:root {
  --paper: #E8EBEE;
  --surface: #F4F6F8;
  --ink: #1C2330;
  --slate: #5A6574;
  --rule: #CDD3DA;
  --oxblood: #7A1E2C;
  --groove: #C4CAD2;
  --good: #2E6A4E;
  --soon: #8F5B00;
  --focus: #2F5DA8;
  --score-sat: 70%;
  --score-light: 42%;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161B23; --surface: #1E242E; --ink: #E3E7ED; --slate: #9AA5B4; --rule: #2E3642;
    --oxblood: #D2596B; --groove: #3A4350; --good: #6CC197; --soon: #E2A646; --focus: #8DB4F5;
    --score-sat: 65%; --score-light: 55%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #161B23; --surface: #1E242E; --ink: #E3E7ED; --slate: #9AA5B4; --rule: #2E3642;
  --oxblood: #D2596B; --groove: #3A4350; --good: #6CC197; --soon: #E2A646; --focus: #8DB4F5;
  --score-sat: 65%; --score-light: 55%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.45 var(--body); font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2 { font-family: var(--display); font-weight: 800; line-height: 1.05; margin: 0; letter-spacing: .01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: 1.6rem; margin: 2rem 0 .8rem; }
h4 { margin: 1rem 0 .3rem; font-size: 1rem; font-weight: 600; }
p { margin: 0; }
.lede { color: var(--slate); max-width: 62ch; margin-top: .5rem; }
button {
  font: 600 1rem var(--body); color: var(--surface); background: var(--ink); border: 0;
  padding: .5rem 1rem; border-radius: 3px; cursor: pointer; min-height: 40px;
}
button:hover { background: var(--oxblood); }
button:disabled { background: var(--slate); cursor: default; }
button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
button.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); background: transparent; }
button.link { background: none; color: var(--slate); padding: 0 .25rem; text-decoration: underline; text-underline-offset: 3px; min-height: 0; font-weight: 500; }
button.link:hover { color: var(--oxblood); }
input, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: .45rem .6rem; min-height: 40px; }

/* top bar */
.top {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  padding: .9rem clamp(16px, 3vw, 40px); border-bottom: 1px solid var(--rule); background: var(--surface);
  padding-top: max(.9rem, env(safe-area-inset-top));   /* full-screen app on iPhone: clear the status bar */
}
.brand { font: 800 1.9rem/1 var(--display); text-decoration: none; letter-spacing: .02em; }
.brand::before {
  content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .35em;
  background: radial-gradient(circle, var(--surface) 0 12%, var(--oxblood) 13% 38%, var(--ink) 39%);
  vertical-align: -.02em;
}
.top nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--slate); font-weight: 500; padding: .25rem 0; border-bottom: 2px solid transparent; }
.top nav a[aria-current] { color: var(--ink); border-bottom-color: var(--oxblood); }
.runnow { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.mail { color: var(--slate); font-size: .95rem; display: flex; gap: .35rem; align-items: center; }
.status { padding: .5rem clamp(16px, 3vw, 40px); background: var(--ink); color: var(--paper); display: flex; gap: .6rem; align-items: center; font-size: .95rem; }
.status[hidden] { display: none; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

main { padding: 0 clamp(16px, 3vw, 40px) 3rem; }
footer { padding: 1.5rem clamp(16px, 3vw, 40px) 2.5rem; color: var(--slate); font-size: .9rem; border-top: 1px solid var(--rule); }

/* findings layout */
.layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; padding-top: 2rem; }
.rail ul { list-style: none; margin: 0; padding: 0; position: sticky; top: 1rem; }
.rail a { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .7rem; text-decoration: none; color: var(--slate); border-left: 3px solid transparent; }
.rail a:hover { color: var(--ink); }
.rail a[aria-current] { color: var(--ink); border-left-color: var(--oxblood); background: var(--surface); font-weight: 600; }
.rail .n { color: var(--slate); font-weight: 400; }
.head { margin-bottom: 1.2rem; }
.filters { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; margin-top: 1.2rem; color: var(--slate); font-size: .95rem; }
.filters label { display: flex; gap: .45rem; align-items: center; }
.errors { border-left: 3px solid var(--oxblood); padding: .5rem .8rem; background: var(--surface); margin: 1rem 0; }
.flash { border-left: 3px solid var(--good); padding: .5rem .8rem; background: var(--surface); margin: 1rem 0; }
.empty { color: var(--slate); padding: 2rem 0; }

/* rows */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: 52px 64px minmax(0, 1fr) minmax(9rem, auto);
  grid-template-areas: "disc cover what buy" "disc cover more more";
  column-gap: 1.1rem; row-gap: .2rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); align-items: start;
}
.row.candidate { grid-template-columns: 52px 0 minmax(0, 1fr) minmax(9rem, auto); column-gap: 1.1rem; }
.rows.compact .row { grid-template-columns: 52px minmax(0, 1fr) minmax(9rem, auto); grid-template-areas: "disc what buy"; }
.disc { grid-area: disc; position: relative; width: 48px; height: 48px; display: inline-grid; place-items: center; }
.disc svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.disc .groove { fill: var(--ink); stroke: var(--groove); stroke-width: 6; }
.disc .fill { fill: none; stroke: hsl(var(--hue, 0) var(--score-sat) var(--score-light)); stroke-width: 6; }
.disc .label { fill: var(--surface); }
.disc b { position: relative; font: 800 1.05rem/1 var(--display); color: var(--ink); }
.cover { grid-area: cover; width: 64px; height: 64px; background: var(--surface); border-radius: 2px; overflow: hidden; }
.row.candidate .cover { display: none; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.what { grid-area: what; min-width: 0; }
.artist { font-weight: 600; font-size: 1.08rem; }
.title { font-size: 1.05rem; }
.title a { text-decoration: none; }
.title a:hover { text-decoration: underline; }
.newmark { font-size: .78rem; font-weight: 600; color: var(--oxblood); margin-left: .3rem; }
.facts { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .35rem; font-size: .95rem; }
.facts .good { color: var(--good); font-weight: 600; }
.facts .soon { color: var(--soon); font-weight: 600; }
.facts .muted { color: var(--slate); }
.news { color: var(--slate); margin-top: .3rem; max-width: 70ch; }
.buy { grid-area: buy; text-align: right; display: flex; flex-direction: column; gap: .15rem; align-items: flex-end; }
.price { font: 800 1.5rem/1 var(--display); }
.price.none { font: 500 .95rem var(--body); color: var(--slate); }
.row.budget .price { color: var(--good); }
.orig, .note { font-size: .85rem; color: var(--slate); }
.euoffer { font-size: .92rem; font-weight: 600; color: var(--good); }
.secondhand { font-size: .92rem; font-weight: 600; color: var(--oxblood); }
.more { grid-area: more; margin-top: .4rem; }
.more summary { cursor: pointer; color: var(--slate); font-size: .92rem; width: fit-content; }
.more summary:hover { color: var(--ink); }
.morebody { padding: .6rem 0 .2rem; max-width: 46rem; }
.parts { border-collapse: collapse; font-size: .95rem; }
.parts th { text-align: left; font-weight: 600; padding: .15rem 1rem .15rem 0; white-space: nowrap; }
.parts td { padding: .15rem 1rem .15rem 0; color: var(--slate); }
.parts td.pts { color: var(--ink); white-space: nowrap; }
.variants, .offers { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.variants li, .offers li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border-bottom: 1px dotted var(--rule); }
.variants li span, .offers li span { color: var(--slate); white-space: nowrap; }
.variants li.gone { color: var(--slate); text-decoration: line-through; text-decoration-thickness: 1px; }
.variants li.gone span { text-decoration: none; }
.dk { font-size: .82rem; color: var(--good); font-weight: 600; }
.fmt { color: var(--slate); font-size: .9rem; margin-top: .6rem; }

/* artists, search, history */
.narrow { max-width: 46rem; padding-top: 2rem; }
.narrow.wide { max-width: 64rem; }
.addform { margin: 1.6rem 0 1rem; }
.addform label { display: block; font-weight: 600; margin-bottom: .35rem; }
.inline { display: flex; gap: .5rem; }
.inline input { flex: 1; min-width: 0; }
.matches ul, .bands, .albums, .history { list-style: none; margin: 0; padding: 0; }
.matches li form { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.matches img, .noimg { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; background: var(--surface); }
.mname { flex: 1; font-weight: 600; }
.bands li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 1rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.bname { font-weight: 600; }
.bmeta { color: var(--slate); font-size: .92rem; }
.albums li label { display: grid; grid-template-columns: auto 3.2rem minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.ay, .aw { color: var(--slate); }
.aw { font-size: .9rem; }
.albums + button { margin-top: 1.2rem; }
.master { margin-top: 2.2rem; }
.mhead { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.mhead img { width: 64px; height: 64px; object-fit: cover; border-radius: 2px; }
.mhead h2 { margin: 0; }
.mhead > div { flex: 1; min-width: 12rem; }
.history li { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.hhead { display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.hhead a { font-weight: 600; }
.kind { color: var(--slate); }
.st.failed { color: var(--oxblood); font-weight: 600; }
.st.ok { color: var(--good); }
.sum { font: inherit; white-space: pre-wrap; margin: .5rem 0 0; color: var(--slate); }
.errlist { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--slate); font-size: .93rem; }

@media (max-width: 860px) {
  .top { gap: .8rem 1.4rem; }
  .runnow { margin-left: 0; width: 100%; justify-content: space-between; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: 1rem; }
  .rail ul { position: static; display: flex; overflow-x: auto; gap: .3rem; padding-bottom: .4rem; scrollbar-width: thin; }
  .rail a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: .4rem .6rem; }
  .rail a[aria-current] { border-bottom-color: var(--oxblood); }
  /* Cover in the left column, score ring overlapping its bottom-right corner like a sticker */
  .row { grid-template-columns: 72px minmax(0, 1fr); column-gap: 1rem;
    grid-template-areas: "cover what" "cover buy" "more more"; }
  .row .cover { display: block; width: 72px; height: 72px; }
  .row .disc { grid-area: cover; align-self: start; justify-self: end; width: 38px; height: 38px;
    margin: 50px -10px 0 0; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
  .row .disc b { font-size: .85rem; }
  .rows.compact .row { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "disc what" "disc buy"; }
  .rows.compact .row .disc { grid-area: disc; margin: 0; width: 48px; height: 48px; filter: none; }
  .buy { text-align: left; align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; margin-top: .3rem; }
  .bands li { grid-template-columns: minmax(0, 1fr) auto; }
  .bands .bmeta { grid-column: 1 / -1; order: 3; }
  .albums li label { grid-template-columns: auto 3rem minmax(0, 1fr); }
  .albums .aw { grid-column: 3; }
  .parts th { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.market { list-style: none; margin: 0; padding: 0; }
.market > li { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.mtitle { font-size: 1.05rem; }
.origs { margin-top: .5rem; }

/* record scanner */
.scan .scanform { display: grid; gap: .8rem; margin: 1.4rem 0; }
.shot { display: grid; place-items: center; min-height: 9rem; border: 2px dashed var(--rule); border-radius: 6px;
  background: var(--surface); cursor: pointer; position: relative; overflow: hidden; text-align: center; padding: 1rem; }
.shot.small { min-height: 4.5rem; }
.shot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.shot:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.shotlabel { font: 800 1.4rem/1.1 var(--display); }
.shot.small .shotlabel { font: 600 1rem var(--body); color: var(--slate); }
.shot.taken { border-style: solid; border-color: var(--good); }
.preview { max-height: 14rem; max-width: 100%; margin-top: .6rem; border-radius: 4px; }
.scan .extra summary { cursor: pointer; color: var(--slate); }
.scan .extra label { display: block; margin: .6rem 0 .2rem; font-weight: 600; }
.scan .extra input { width: 100%; }
#findbtn { min-height: 52px; font-size: 1.1rem; }
.reading { margin-top: 1.5rem; }
.cands { list-style: none; margin: 0; padding: 0; }
.cand { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.chead { display: flex; gap: 1rem; align-items: flex-start; }
.chead img { width: 72px; height: 72px; object-fit: cover; border-radius: 2px; flex: none; }
.matrix { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .35rem; font-size: .88rem; color: var(--slate); }
.matrix code { font-family: inherit; background: var(--surface); padding: .05rem .35rem; border-radius: 2px; }
.addbox { margin-top: .6rem; }
.addbox summary { cursor: pointer; font-weight: 600; }
.addform-scan { display: grid; gap: .6rem; margin-top: .6rem; max-width: 26rem; }
.addform-scan label { display: grid; gap: .2rem; font-size: .95rem; color: var(--slate); }
.recent { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; gap: .8rem; flex-wrap: wrap; padding: .45rem 0; border-bottom: 1px solid var(--rule); }
.recent li > span:first-child { color: var(--slate); min-width: 6.5rem; }

/* filters: always open on wide screens, folded behind a button on phones */
.filterbox > summary { display: none; }
.runnow-history { display: none; }
input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--ink); }

@media (max-width: 860px) {
  .runnow { display: none; }                     /* Run now lives on the History page on phones */
  .runnow-history { display: grid; gap: .7rem; justify-items: start; margin: 1rem 0 1.5rem;
    padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule); }
  .top { gap: .5rem 1.2rem; padding-bottom: .6rem; }
  .top nav { gap: 1.1rem; }
  .top nav a { padding: .45rem 0; }              /* bigger tap targets */
  h1 { font-size: 2.1rem; }
  .filterbox > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem;
    border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); cursor: pointer;
    font-weight: 600; margin-top: .9rem; list-style: none; }
  .filterbox > summary::-webkit-details-marker { display: none; }
  .filterbox[data-active] > summary { border-color: var(--ink); }
  .filterbox .filters { display: grid; grid-template-columns: 1fr; gap: .2rem; margin-top: .6rem; }
  .filterbox .filters label { min-height: 44px; }
  .filterbox .filters select { flex: 1; }
  .more summary { padding: .5rem 0; }
}
/* No cover image: a plain record instead of an empty box */
.cover:empty { background: radial-gradient(circle, var(--surface) 0 6%, var(--oxblood) 7% 24%, var(--ink) 25% 66%, var(--surface) 67%); }
.market-line { margin-top: .3rem; }
.market-line .price-sm { font-weight: 600; color: var(--ink); }

/* live barcode scanner */
.barcodebtn { min-height: 52px; font-size: 1.05rem; background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink); }
.barcodebtn:hover { background: var(--surface); box-shadow: inset 0 0 0 2px var(--oxblood); color: var(--oxblood); }
.barcodesheet { position: fixed; inset: 0; z-index: 50; background: #000; display: grid; place-items: center; }
.barcodesheet[hidden] { display: none; }
.barcodesheet video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.barcodeframe { position: relative; width: min(80vw, 420px); height: min(30vw, 160px);
  border: 3px solid rgba(255, 255, 255, .9); border-radius: 8px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
.barcodehint { position: absolute; left: 0; right: 0; bottom: calc(5.5rem + env(safe-area-inset-bottom));
  text-align: center; color: #fff; font-size: 1.05rem; padding: 0 16px; text-shadow: 0 1px 3px #000; }
.barcodeclose { position: absolute; bottom: calc(1.5rem + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); min-width: 10rem; background: #fff; color: #000; }
.barcodeclose:hover { background: #e8ebee; }

/* Artists checklist */
.bandform { margin-top: .5rem; padding-bottom: 5rem; }
.bandgroup { border: 0; border-top: 1px solid var(--rule); margin: 0; padding: 1rem 0 .6rem; }
.bandgroup legend { font: 800 1.35rem/1 var(--display); padding: 0 .5rem 0 0; }
.bandgroup legend .n { font: 400 .9rem var(--body); color: var(--slate); margin-left: .4rem; }
.grouptools { display: flex; gap: 1rem; margin: .2rem 0 .5rem; }
.bandgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 1rem; }
.bandcheck { display: flex; align-items: center; gap: .55rem; min-height: 40px; }
.savebar { position: sticky; bottom: 0; padding: .8rem 0 calc(.8rem + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--paper) 30%); }
.savebar button { min-width: 12rem; min-height: 48px; }
@media (max-width: 860px) { .bandgrid { grid-template-columns: 1fr 1fr; } .savebar button { width: 100%; } }

/* collection page */
.collbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin: 1.2rem 0 .4rem; }
.collbar form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.collbar .muted, .coll .muted { color: var(--slate); }
.sorts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; color: var(--slate); }
.sorts a[aria-current] { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--oxblood); }
.coll .mhead { align-items: flex-start; margin-bottom: 0; }
.coll .mhead img, .coll .noimg { width: 72px; height: 72px; border-radius: 2px; }
.coll .facts { margin-top: .2rem; }
.cval { text-align: right; min-width: 7rem; }
.cval .why { margin: .15rem 0 .2rem; }
.cval .why summary { cursor: pointer; color: var(--slate); }
.cval .why ul { list-style: none; margin: .3rem 0 0; padding: 0; max-width: 18rem; margin-left: auto; text-align: left; }
.cval .why li { margin-bottom: .3rem; }
@media (max-width: 860px) { .cval .why ul { margin-left: 0; } }
@media (max-width: 860px) { .cval { text-align: left; min-width: 0; flex-basis: 100%; padding-left: calc(72px + 1rem); } }

/* orders page */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stages { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.stages a { display: block; text-decoration: none; background: var(--surface); border-top: 3px solid var(--rule); padding: .55rem .7rem; color: var(--slate); line-height: 1.2; }
.stages b { display: block; font: 800 1.9rem/1 var(--display); color: var(--ink); margin-bottom: .15rem; }
.stages .st-ready a { border-top-color: var(--soon); }
.stages .st-shipped a { border-top-color: var(--focus); }
.stages .st-ordered a { border-top-color: var(--ink); }
.stages .st-delivered a { border-top-color: var(--good); }
.osearch { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .5rem 0 1rem; }
.osearch input { flex: 1; min-width: 14rem; }
.needs { background: var(--surface); border-left: 3px solid var(--oxblood); padding: .4rem 1rem .8rem; margin: 1rem 0 1.5rem; }
.needs h2 { margin: .4rem 0; }
.needs ul { margin: 0; padding-left: 1.1rem; }
.needs li { margin: .3rem 0; }
.needs .nk-pickup b { color: var(--soon); }
.ogroup { margin-top: 1.4rem; }
.ogroup h2 { display: inline; }
.ogroup > summary { cursor: pointer; padding: .3rem 0; }
.ogroup h2 .muted, .ohead .muted, .orecs .muted, .ohist .muted { color: var(--slate); font-weight: 400; }
.orders { list-style: none; margin: .5rem 0 0; padding: 0; }
.order { padding: .9rem 0 .9rem .9rem; border-bottom: 1px solid var(--rule); border-left: 3px solid var(--rule); margin-bottom: .4rem; }
.order.st-ready { border-left-color: var(--soon); }
.order.st-shipped { border-left-color: var(--focus); }
.order.st-ordered { border-left-color: var(--ink); }
.order.st-delivered { border-left-color: var(--good); }
.ohead { display: flex; justify-content: space-between; gap: 1rem; }
.ohead p { margin: 0; }
.ototal { text-align: right; white-space: nowrap; }
.orecs { margin: .5rem 0 0; padding-left: 1.1rem; }
.orecs li { margin: .1rem 0; }
.orecs .good { color: var(--good); font-weight: 600; margin-left: .4rem; font-size: .92rem; }
.onote { color: var(--slate); margin: .4rem 0 0; max-width: 70ch; }
.ohist { margin-top: .4rem; font-size: .95rem; }
.ohist summary { cursor: pointer; color: var(--slate); }
.ohist ol { margin: .3rem 0 0; padding-left: 1.1rem; }
@media (max-width: 860px) { .stages { grid-template-columns: repeat(3, 1fr); } .stages b { font-size: 1.5rem; } }
.oactions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.oactions form { margin: 0; }
.addorder { margin: .5rem 0 1rem; background: var(--surface); padding: .5rem 1rem; }
.addorder > summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
.ogrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem .8rem; margin: .6rem 0; }
.ogrid label, .pickbar label { display: flex; flex-direction: column; gap: .2rem; font-size: .92rem; color: var(--slate); }
.ogrid .wide { grid-column: span 2; }
.recrows { border: 0; padding: 0; margin: .4rem 0 .8rem; }
.recrows legend { font-weight: 600; margin-bottom: .3rem; }
.recrows summary { cursor: pointer; color: var(--slate); margin: .3rem 0; }
.recrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin-bottom: .4rem; }
.pick { margin: .4rem 0 .6rem; padding: .5rem .7rem; background: var(--surface); }
.pick p { margin: 0 0 .4rem; }
.cand { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.cand img, .cand .noimg { width: 44px; height: 44px; object-fit: cover; border-radius: 2px; }
.pickbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin-top: .5rem; }
@media (max-width: 860px) {
  .ogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recrow { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: .4rem; border-bottom: 1px solid var(--rule); }
}
.ogrid input, .ogrid select, .recrow input, .pickbar input { width: 100%; min-width: 0; }

/* stat tiles and charts (collection value, spending) */
:root {
  --viz-surface: var(--surface); --viz-grid: #DCE1E6; --viz-s1: #2a78d6; --viz-s2: #eb6834; --viz-s3: #1baf7a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --viz-grid: #2B323D; --viz-s1: #3987e5; --viz-s2: #d95926; --viz-s3: #199e70; }
}
:root[data-theme="dark"] { --viz-grid: #2B323D; --viz-s1: #3987e5; --viz-s2: #d95926; --viz-s3: #199e70; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0; }
.tile { background: var(--surface); padding: .7rem .9rem; display: flex; flex-direction: column; gap: .1rem; }
.tile .tl { color: var(--slate); font-size: .95rem; }
.tile .tv { font: 800 1.9rem/1.1 var(--display); }
.tile .td { color: var(--slate); font-size: .88rem; }
.tv.up, .gain.up { color: var(--good); }
.gain { font-weight: 600; }
.trend, .narrow section { margin: 1.2rem 0; }
.trend h2 { margin-bottom: .3rem; }
.viz { width: 100%; height: auto; display: block; background: var(--viz-surface); overflow: visible; }
.viz.spark { width: 96px; display: inline-block; background: none; margin: .2rem 0; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-tick { fill: var(--slate); font: 400 12px var(--body); }
.viz-val { fill: var(--ink); font: 600 12px var(--body); }
.viz-line { fill: none; stroke: var(--viz-s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-wash { fill: var(--viz-s1); opacity: .1; }
.viz-spark { fill: none; stroke: var(--slate); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.viz-dot { fill: var(--viz-s1); stroke: var(--viz-surface); stroke-width: 2; }
.viz.spark .viz-dot { stroke: var(--paper); }
.viz-hit { fill: transparent; }
.viz-hit:hover { fill: var(--viz-s1); fill-opacity: .25; }
rect.viz-s1, path.viz-s1, .sw.viz-s1 { fill: var(--viz-s1); background: var(--viz-s1); }
rect.viz-s2, path.viz-s2, .sw.viz-s2 { fill: var(--viz-s2); background: var(--viz-s2); }
rect.viz-s3, path.viz-s3, .sw.viz-s3 { fill: var(--viz-s3); background: var(--viz-s3); }
.legend { list-style: none; padding: 0; margin: .2rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; color: var(--slate); font-size: .95rem; }
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: .4rem; vertical-align: -1px; }
.tableview { margin-top: .6rem; }
.tableview summary { cursor: pointer; color: var(--slate); }
.tablewrap { overflow-x: auto; }
table.money { border-collapse: collapse; width: 100%; font-size: .95rem; margin-top: .4rem; }
table.money th, table.money td { text-align: right; padding: .4rem .6rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.money th:first-child, table.money td:first-child { text-align: left; }
table.money th { color: var(--slate); font-weight: 500; }
.h1row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.crumb { margin: 1rem 0 0; color: var(--slate); }
.small { font-size: .88rem; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr; } .tile .tv { font-size: 1.6rem; } }
.viz-narrow { display: none; }
@media (max-width: 600px) { .viz-wide { display: none; } .viz-narrow { display: block; } }
.cond { margin-top: .3rem; font-size: .95rem; }
.cond summary { cursor: pointer; color: var(--slate); }
.cond form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .8rem; margin-top: .4rem; }
.cond label { display: flex; flex-direction: column; gap: .2rem; color: var(--slate); font-size: .9rem; }
.cond select { max-width: 100%; }

/* Accounts: sign-in pages, settings, users */
.signout { display: flex; align-items: center; gap: .5rem; margin-left: auto; font-size: .95rem; }
.signout .who { color: var(--slate); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authbox { max-width: 26rem; margin: 3rem auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 1.5rem 1.5rem 1.25rem; }
.authbox h1 { margin-top: 0; }
.authbox form, .account form.stack { display: grid; gap: .8rem; }
.authbox label, .account form.stack label { display: grid; gap: .3rem; font-weight: 500; }
.authbox label.check, .account label.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.authbox input[type=email], .authbox input[type=password], .authbox input[type=text],
.account input[type=password], .account input[type=text], .account input[type=date] { width: 100%; }
.account section { border-top: 1px solid var(--rule); padding-top: .5rem; margin-top: 1.5rem; }
.account .genregrid, .welcome .genregrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .4rem 1rem; margin: .5rem 0 1rem; }
.account ul.plain, .users ul.plain { list-style: none; padding: 0; margin: .5rem 0; }
.account ul.plain li, .users ul.plain li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .45rem 0; border-bottom: 1px solid var(--rule); }
.linkbox { display: block; width: 100%; font: 500 .95rem/1.4 ui-monospace, monospace; padding: .6rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; word-break: break-all; user-select: all; }
table.users { border-collapse: collapse; width: 100%; font-size: .95rem; }
table.users th, table.users td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.users td form { display: inline-flex; gap: .3rem; margin: 0 .4rem .3rem 0; }
.tablewrap.users-wrap { overflow-x: auto; }
@media (max-width: 860px) { .signout .who { display: none; } }

/* Auctions (Catawiki lots from the bookmarklet) */
.lots li.closed { opacity: .6; }
.lots .soon, .ratio.soon { color: var(--soon); }
.ratio { font-weight: 600; white-space: nowrap; }
.ratio.good { color: var(--good); }
.ratio.bad { color: var(--oxblood); }
.watchform { margin-top: .5rem; }
.howto { background: var(--surface); padding: .7rem 1rem; margin: 1rem 0 1.6rem; }
.howto summary { cursor: pointer; font-weight: 600; }
.howto ol { padding-left: 1.2rem; }
.howto li { margin: .35rem 0; }
a.bookmarklet { display: inline-block; padding: .3rem .8rem; background: var(--ink); color: var(--surface); border-radius: 3px;
  text-decoration: none; font-weight: 600; cursor: grab; }
ul.checks { list-style: none; padding: 0; }
ul.checks li { padding: .4rem 0; border-bottom: 1px solid var(--rule); }
.narrow h2 { margin-top: 1.6rem; }