/* GoodLeads — one buying surface (buy.html). Parallel page beside #browse;
   styles ported from the approved prototype (spec/prototype.html, 2026-09-05).
   Same brand tokens as styles.css / detail2.html; standalone so the page paints
   in one request with no framework and no build step. */

:root{
  --bg:#CECECB; --surface:#E0E0DC; --surface-2:#EBEBE7; --ink:#2A2A28; --ink-mid:#5C5C59; --ink-soft:#7A7A76;
  --line:rgba(42,42,40,.16); --line-soft:rgba(42,42,40,.08);
  --amber:#D77A00; --amber-ink:#8F4F00; --fire:#C94A1A; --fire-ink:#8E2F0C; --gold:#C59A2E; --gold-ink:#7A5A10; --green:#78B878; --green-ink:#2E6B36;
  --page:#F4F4F1; --masked:#B9B9B4; --bar:#252523; --bar-ink:#E8E8E4;
  --shadow:0 1px 2px rgba(42,42,40,.08), 0 8px 24px rgba(42,42,40,.10);
  --display:'Outfit',-apple-system,'Segoe UI',sans-serif; --body:'Geist',-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1E1E1C; --surface:#2C2C2A; --surface-2:#353533; --ink:#E8E8E4; --ink-mid:#BDBDB7; --ink-soft:#9A9A94;
    --line:rgba(232,232,228,.18); --line-soft:rgba(232,232,228,.08);
    --amber-ink:#F0A23A; --fire-ink:#F08A5F; --gold-ink:#E3BE64; --green-ink:#9ED39E;
    --page:#252523; --masked:#55554F; --bar:#111110; --bar-ink:#E8E8E4;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1E1E1C; --surface:#2C2C2A; --surface-2:#353533; --ink:#E8E8E4; --ink-mid:#BDBDB7; --ink-soft:#9A9A94;
  --line:rgba(232,232,228,.18); --line-soft:rgba(232,232,228,.08);
  --amber-ink:#F0A23A; --fire-ink:#F08A5F; --gold-ink:#E3BE64; --green-ink:#9ED39E;
  --page:#252523; --masked:#55554F; --bar:#111110; --bar-ink:#E8E8E4;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.15;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
a{color:var(--amber-ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* app frame */
.nav{display:flex;gap:18px;align-items:center;padding:12px 22px;border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--ink-mid);background:var(--page);position:sticky;top:0;z-index:20}
.nav .logo{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.01em;text-decoration:none}
.nav .logo span{color:var(--amber)}
.nav .sp{flex:1}
.nav .lnk{color:var(--ink-mid);text-decoration:none} .nav .lnk.on{color:var(--ink);font-weight:500}
.nav .tag{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-ink);border:1px solid var(--amber-ink);border-radius:999px;padding:1px 10px;white-space:nowrap}
.body{padding:22px;max-width:1240px;margin:0 auto}

/* shared components */
.btn{background:var(--amber);color:#fff;border:0;font-family:var(--display);font-weight:600;padding:11px 16px;font-size:15px;border-radius:6px;text-align:center;display:inline-flex;gap:8px;justify-content:center;align-items:center;text-decoration:none}
.btn:hover{background:var(--amber-ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:none;border:1px solid var(--amber);color:var(--amber-ink)} .btn.ghost:hover{background:rgba(215,122,0,.08)}
.btn.quiet{background:none;border:1px solid var(--line);color:var(--ink)} .btn.quiet:hover{background:var(--surface-2)}
.btn.block{width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px 4px 12px;font-size:14px;color:var(--ink)}
.chip b{font-weight:500}
.chip.in{border-color:var(--green)} .chip.ex{border-color:var(--fire)}
.chip .x{border:0;background:none;padding:0 2px;color:var(--ink-soft);font-size:16px;line-height:1}
.chip .x:hover{color:var(--fire-ink)}
button.chip{cursor:pointer} button.chip:hover{border-color:var(--ink)}
.tierchip{display:inline-block;border-radius:4px;padding:1px 7px;font-size:12.5px;font-weight:500;color:#fff;background:var(--ink-soft);white-space:nowrap}
.tierchip.t1{background:#C94A1A} .tierchip.t2{background:#D77A00} .tierchip.t3{background:#B8901E} .tierchip.t4{background:#8B8B85} .tierchip.t5{background:#5C5C59} .tierchip.t0{background:none;color:var(--ink-soft);border:1px dashed var(--line)}
.masked{color:var(--ink-soft);letter-spacing:.06em}
.note{font-size:13px;color:var(--ink-soft)}
.measured{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--green-ink);font-weight:500}
.measured i{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
.measured.pending{color:var(--ink-soft)} .measured.pending i{background:var(--masked)}
.q{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--line);color:var(--ink-soft);font:600 11px var(--display);margin-left:5px;cursor:help;vertical-align:1px}
.q:hover,.q:focus-visible{border-color:var(--amber);color:var(--amber-ink)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--bar);color:var(--bar-ink);padding:10px 16px;border-radius:8px;font-size:14px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s;z-index:30;max-width:min(90vw,640px)}
.toast.show{opacity:1}
.err{font-size:14px;color:var(--fire-ink);background:rgba(201,74,26,.08);border-left:3px solid var(--fire);padding:8px 10px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}
.pend{color:var(--ink-soft)}

/* screen 0: the front door — say who you sell to, or pick a starter list */
.door{display:grid;gap:34px;max-width:1100px;margin:0 auto}
.door-hero{max-width:720px}
.door-hero h1{font-size:clamp(30px,3.8vw,44px);font-weight:600;letter-spacing:-.01em}
.door-hero .lede{font-size:17px;color:var(--ink-mid);margin:10px 0 18px;max-width:52ch}
.search.big{padding:12px 16px;border-radius:10px;background:var(--surface);border-color:var(--line)}
.search.big input{font-size:18px}
.search.big:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(215,122,0,.15)}
.door-res{min-height:28px;margin-top:10px;display:grid;gap:8px}
.door-res .readback{margin:0}
.door-count{font-size:14px;color:var(--ink-mid)}
.door-count .measured{font-size:14px}
.door-zip{font-size:13.5px;color:var(--ink-soft);margin-top:8px}
.door-zip a{color:var(--ink-mid)}
#doorzips{display:block;width:100%;max-width:520px;margin-top:8px;font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--page);resize:vertical}
.shelf{display:grid;gap:22px}
.shelf-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:22px}
.shelf-head h2{font-size:22px;font-weight:600}
.shelf-nav{display:flex;flex-wrap:wrap;gap:6px}
.shelf-nav .chip{text-decoration:none;color:var(--ink-mid)} .shelf-nav .chip b{color:var(--ink);font-weight:500}
.shelf-state{display:grid;gap:10px}
.shelf-state h3{font-size:17px;font-weight:600;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.shelf-state h3 .note{font-weight:400}
.shelf-state > .btn{justify-self:start;padding:6px 10px;font-size:13px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.card{display:grid;gap:2px;text-align:left;background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;padding:12px 14px;cursor:pointer;color:var(--ink)}
.card:hover{border-color:var(--amber);background:var(--surface-2)}
.card .cl{font-family:var(--display);font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .cn{font-family:var(--display);font-size:24px;font-weight:600;line-height:1.1;margin-top:4px}
.card .cs{font-size:12.5px;color:var(--ink-mid);margin-top:-2px}
.card .cm{font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.card .cshape{font-size:11.5px;color:var(--ink-soft);margin-top:6px;border-top:1px dashed var(--line-soft);padding-top:6px}
.card .cp{font-size:12.5px;color:var(--amber-ink);font-weight:500;margin-top:2px}

/* screen 1 landing */
.land{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start;max-width:960px;margin:0 auto}
.land h1{font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.01em}
.land .lede{font-size:17px;color:var(--ink-mid);margin:10px 0 18px;max-width:46ch}
.land .stats{display:grid;grid-template-columns:repeat(4,auto);gap:6px 22px;margin:14px 0 20px;font-size:14px;color:var(--ink-mid)}
.land .stats b{display:block;font-family:var(--display);font-size:22px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.preview{background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;overflow:hidden}
.preview .ph{padding:10px 14px;font-size:13px;color:var(--ink-mid);border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:8px}
.preview .pr{display:grid;grid-template-columns:1.5fr 1fr .7fr;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:14px;align-items:center}
.preview .pr:last-child{border-bottom:0}
.preview .pr .n{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.also{margin-top:16px;font-size:14px;color:var(--ink-mid);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.also .chip{padding:2px 10px;font-size:13px}
/* the quoted choices: one row per adjacent shape, the price the meter's way, the recommended one flagged */
.also.choices{flex-direction:column;align-items:stretch;gap:8px;max-width:640px}
.also.choices .lab{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-family:var(--display);font-weight:600}
.choice{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:9px 12px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.choice:hover{border-color:var(--ink)} .choice.in{border-color:var(--green)}
.choice b{font-weight:600} .choice .ch-d{color:var(--ink-mid)}
.choice .ch-q{font-weight:600;white-space:nowrap;justify-self:end}
.choice .ch-w{grid-column:1/-1;font-size:12.5px;color:var(--ink-soft)}
.pill.rec{background:var(--amber);color:#fff;margin-left:8px;vertical-align:1px}
@media (max-width:520px){.choice{grid-template-columns:1fr} .choice .ch-q{justify-self:start}}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* screen 2 browse */
.browse{display:grid;grid-template-columns:230px minmax(0,1fr) 290px;gap:20px;align-items:start}
.search{display:flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:8px 12px}
.search{margin:0}
.search input{flex:1;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);min-width:0;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--ink-soft)}
.search kbd{font:12px var(--body);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--ink-soft)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px;align-items:center}
.chips .lab{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-family:var(--display);font-weight:600;margin-right:2px}
.readback{font-size:14px;color:var(--ink-mid);margin-bottom:12px;max-width:70ch}
/* the answer card: the interpreter's reply to a question or an objection — headline, body, one button — under the readback */
.answer{display:grid;gap:8px;background:var(--surface);border:1px solid var(--line-soft);border-left:3px solid var(--amber);border-radius:8px;padding:12px 14px;max-width:560px;margin:2px 0 12px}
.answer h3{font-size:16px;font-weight:600}
.answer p{font-size:14px;color:var(--ink-mid)}
.answer .act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.answer .act .btn{padding:7px 12px;font-size:13.5px}
.door-res .answer{margin-bottom:4px}
.nomatch{font-size:13.5px;color:var(--fire-ink);margin-top:6px}
.suggest{font-size:13.5px;color:var(--ink-mid);margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.suggest .btn{padding:3px 9px;font-size:13px}
.facets{display:grid;gap:18px}
.facet h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid);font-weight:600;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.facet h4 span{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-soft);font-size:12px}
.fv{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;padding:3px 0;font-size:14px;border-radius:4px}
.fv .l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv .barw{grid-column:1/-1;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-bottom:4px}
.fv .barw i{display:block;height:100%;background:var(--amber);opacity:.8}
.fv .c{font-variant-numeric:tabular-nums;color:var(--ink-mid);font-size:13.5px;min-width:34px;text-align:right}
.fv .ctl{display:flex;gap:2px}
.fv .ctl button{border:1px solid var(--line);background:var(--surface);border-radius:4px;width:22px;height:22px;font-size:14px;line-height:1;padding:0;color:var(--ink-mid)}
.fv .ctl button:hover{border-color:var(--ink)} .fv .ctl button.on{background:var(--green);border-color:var(--green);color:#10301A} .fv .ctl button.onx{background:var(--fire);border-color:var(--fire);color:#fff}
.fv.zero{opacity:.45} .fv.zero .ctl button{pointer-events:none}
.fv.info .ctl{visibility:hidden}
.more{display:flex;flex-wrap:wrap;gap:5px} .more .chip{padding:2px 9px;font-size:13px;cursor:pointer}
.adv{display:grid;gap:8px;margin-top:8px;padding:10px;border:1px solid var(--line-soft);border-radius:8px;background:var(--surface-2)}
.adv select,.adv input{font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:var(--page);width:100%}
.adv .row2{grid-template-columns:1fr 1fr}
.grid{border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;background:var(--surface)}
.grid table{width:100%;border-collapse:collapse;font-size:14px}
.grid th{font-family:var(--display);font-weight:600;font-size:13px;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);color:var(--ink-mid);white-space:nowrap;user-select:none}
.grid th button{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.grid th button:hover{color:var(--ink)} .grid th.on button{color:var(--ink)} .grid th.on button::after{content:" ↓";color:var(--amber)} .grid th.on.asc button::after{content:" ↑"}
.grid td{padding:8px 10px;border-bottom:1px solid var(--line-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;font-variant-numeric:tabular-nums}
.grid tr:last-child td{border-bottom:0}
.grid .gf{padding:8px 12px;font-size:13px;color:var(--ink-soft);display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line-soft);background:var(--surface-2)}
.grid .empty{padding:22px 14px;color:var(--ink-mid);font-size:14px}
.gridwrap{overflow-x:auto}
/* The ceiling sits with the Buy button, so both have to be reachable on a
   laptop screen: the pinned column scrolls inside itself rather than hiding its
   own bottom below the fold forever. */
.meter{background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;padding:16px;display:grid;gap:10px;position:sticky;top:64px;max-height:calc(100vh - 80px);overflow-y:auto;overscroll-behavior:contain}
.meter .big{font-family:var(--display);font-size:38px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.meter .big small{font-size:14px;font-weight:500;color:var(--ink-mid);font-family:var(--body);margin-left:6px}
.grade{display:grid;grid-template-columns:1fr auto auto;gap:4px 10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line-soft);font-size:14px}
.grade .g{font-weight:500}
.grade .n{font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:600;font-size:16px}
.grade .p{color:var(--ink-mid);font-size:13.5px;font-variant-numeric:tabular-nums}
.grade.top{border-top:0;padding-top:4px}
.grade.sub1{padding:5px 0 5px 14px;border-top:1px dashed var(--line-soft);font-size:13.5px}
.grade.sub1 .g{font-weight:400;color:var(--ink-mid)} .grade.sub1 .n{font-size:15px}
.grade.quiet .n,.grade.quiet .p{color:var(--ink-soft)}
.meter .fc{border-top:1px solid var(--line-soft);padding-top:8px;font-size:13.5px;color:var(--ink-mid)}
.meter .fc b{color:var(--ink);font-weight:500}
.meter .acts{display:grid;gap:8px;margin-top:4px}
.meter .price{font-variant-numeric:tabular-nums}
.meter .sub{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;color:var(--ink-mid)}
.meter .sub a{font-size:13.5px}
.dial{border-top:1px solid var(--line-soft);padding-top:10px;display:grid;gap:6px}
.dial .dl{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid);font-family:var(--display);font-weight:600}
.din{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-soft)}
.din input{width:0;flex:1;min-width:0;font:inherit;font-size:15px;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:var(--page);font-variant-numeric:tabular-nums}
.din .x{border:0;background:none;color:var(--ink-soft);font-size:18px;padding:0 4px}
.dres{font-size:13.5px;color:var(--ink-mid);background:var(--surface-2);padding:8px 10px;border-radius:6px}
.dres b{color:var(--ink)}
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-2);padding:3px;border-radius:7px}
.lanes .ln{border:0;background:none;border-radius:5px;padding:7px 4px;font-size:12.5px;color:var(--ink-mid)}
.lanes .ln.on{background:var(--page);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* the two-state quote — the meter's spine. Grade rows read across: what each is
   today, what it becomes after we find. Both money columns tabular. */
.two{display:grid;grid-template-columns:minmax(0,1fr) 3.9em 5em;gap:0 8px;align-items:baseline;font-size:13.5px}
.two.one{grid-template-columns:minmax(0,1fr) 3.9em}
.two .h{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;font-family:var(--display);font-weight:600;color:var(--ink-soft);text-align:right;padding-bottom:5px;border-bottom:1px solid var(--line);line-height:1.15}
.two .h:first-child{text-align:left}
.two .h em{display:block;font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;font-size:10.5px;opacity:.85}
.two .g{padding:7px 0 6px;min-width:0}
.two .g b{font-weight:500;display:block}
.two .g small{display:block;font-size:12px;color:var(--ink-soft);line-height:1.3;margin-top:1px}
.two .n,.two .a{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:600;font-size:15.5px;padding:7px 0 6px;white-space:nowrap}
/* green marks a number that GREW into a paying grade; the to-find row's number falls, and that is the good news, so it stays plain ink */
.two .a.up{color:var(--green-ink)}
.two .rw{border-top:1px solid var(--line-soft)}
/* the records still to find on: the biggest bucket, at full ink, with the accent — never the leftovers */
.two .tofind{background:rgba(215,122,0,.09);align-self:stretch}
.two .tofind.g{padding-left:8px;border-left:3px solid var(--amber)}
.two .tofind.a{padding-right:6px} .two .tofind.n{padding-right:0}
.two .tot{border-top:1px solid var(--line);padding-top:8px;margin-top:2px;font-family:var(--display);font-weight:600}
.two .tot.g{font-size:13.5px;color:var(--ink)}
.two .tot em{display:block;font-style:normal;font-family:var(--body);font-weight:400;font-size:10.5px;color:var(--ink-soft);white-space:normal;line-height:1.15;margin-top:1px}
.two .tot.n,.two .tot.a{font-size:15px} .two .tot.a{color:var(--ink)}

.meter .fc.lead{border-top:0;padding-top:0}
/* what the finding is, in records */
.move{font-size:13.5px;color:var(--ink);font-weight:500;margin-top:2px}
.move b{font-family:var(--display);font-weight:700}
/* the primary source, not a scraped list — one line, once on the screen */
.fresh{font-size:12.5px;color:var(--ink-soft);line-height:1.4}

/* the ceiling, above the button instead of after it */
.ceilbox{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:6px;padding:9px 11px;display:grid;gap:3px;font-size:13px;color:var(--ink-mid);font-variant-numeric:tabular-nums}
.ceilbox div{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ceilbox div span:first-child{min-width:0}
.ceilbox b{color:var(--ink);font-weight:600;font-family:var(--display)}
.ceilbox .last{color:var(--ink-mid);font-size:12.5px}
.ceilbox .last span:last-child{color:var(--ink);font-family:var(--display)}

/* the two option sets. One axis each, every option visible, no dropdown. */
.pick{display:grid;gap:5px}
.pick .lh{font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-family:var(--display);font-weight:600;color:var(--ink-soft);display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.pick .lh em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;font-size:11.5px}
/* in dark, .ln.on's --page fill sits DARKER than the group's --surface-2, so the
   selected chip reads recessed; a hairline ring makes the choice legible in both themes */
.pick .lanes .ln.on{box-shadow:0 1px 2px rgba(0,0,0,.08), inset 0 0 0 1px var(--line)}
.lanes.three{grid-template-columns:1fr 1fr 1fr}
.lanes.stack{grid-template-columns:1fr;gap:3px}
.lanes.stack .ln{text-align:left;padding:8px 10px;display:grid;gap:1px}
.lanes .ln .c{display:block;font-family:var(--display);font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;color:var(--ink)}
.lanes .ln .s{display:block;font-size:11.5px;color:var(--ink-soft);line-height:1.3}
.lanes .ln .rec{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--amber-ink);border:1px solid var(--amber);border-radius:999px;padding:0 6px;margin-left:6px;white-space:nowrap}
.lanes .ln .t{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.dest{font-size:13px;color:var(--ink-mid);line-height:1.4}
.sticky-p{display:none}
.facet-toggle{display:none}

/* sheets: checkout / delivered */
.sheet{max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--line-soft);border-radius:10px;padding:26px;display:grid;gap:16px}
.sheet h2{font-size:24px;font-weight:600}
.field{display:grid;gap:6px;font-size:13.5px;color:var(--ink-mid)}
.field input{font:inherit;font-size:15px;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:9px 11px;background:var(--page)}
.lines{display:grid;gap:6px;font-size:14.5px}
.lines div{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.lines div span:last-child{text-align:right}
.lines .tot{border-top:1px solid var(--line);padding-top:8px;font-weight:600;font-family:var(--display);font-size:17px}
.lines .ships{display:block;font-size:12.5px;color:var(--ink-soft);font-variant-numeric:normal;cursor:help}
.sheet .ceiling{font-size:13.5px;color:var(--ink-mid);margin-top:-6px}
.lanes .ln{line-height:1.25}
.closer{border:1px solid var(--line-soft);border-radius:8px;padding:12px 14px;display:grid;gap:10px;background:var(--surface-2)}
.closer .ch{display:grid;gap:2px;font-size:14.5px}
.rec{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--page);border:1px solid var(--line-soft);border-radius:6px;padding:10px 12px}
.rec .rn{font-weight:500} .rec .rb{display:flex;gap:6px;flex:none} .rec .rb .btn{padding:6px 10px;font-size:13px}
.deliver{display:grid;gap:8px}
.deliver .dl{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid);font-family:var(--display);font-weight:600}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line-soft);border-radius:6px;padding:10px 12px;cursor:pointer;font-size:14.5px}
.opt.on{border-color:var(--amber);background:var(--page)}
.opt input[type=radio]{margin-top:4px;accent-color:var(--amber)}
.opt small{display:block;color:var(--ink-mid);font-size:13.5px}
.opt input[type=text]{display:block;font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:var(--page);width:100%}
.attest{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-mid)}
.attest input{margin-top:3px;width:16px;height:16px;accent-color:var(--amber);flex:none}
.stripe{font-size:12.5px;color:var(--ink-soft);text-align:center}
.ok{width:44px;height:44px;border-radius:50%;background:var(--green);color:#10301A;display:grid;place-items:center;font-size:22px;font-weight:700}
.nod{font-family:var(--display);font-weight:500;font-size:15px;color:var(--amber-ink);margin-top:8px;letter-spacing:.01em}
.crmbox{border:1px solid var(--line-soft);border-radius:8px;padding:12px 14px;display:grid;gap:10px;font-size:14.5px;background:var(--surface-2)}
.crmbox small{display:block;color:var(--ink-mid);font-size:13.5px}
.savedbox{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line-soft);border-radius:8px;padding:10px 14px;font-size:14.5px}
.savedbox small{display:block;color:var(--ink-mid);font-size:13px;overflow:hidden;text-overflow:ellipsis;max-width:320px} .savedbox .btn{padding:6px 10px;font-size:13px}

/* The split shipment (ADR-055): the order is part 1 of 2 while we go find the
   phone and email. Built from the receipt's existing idioms (.crmbox for the
   card, .lines for the figures), amber while part 2 runs, green when it lands. */
.ok.part{background:var(--amber);color:#fff;font-family:var(--display)}
.eyebrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.ship{display:grid;gap:10px;background:var(--surface-2);border:1px solid var(--line-soft);border-left:3px solid var(--amber);border-radius:8px;padding:14px 16px}
.ship.done{border-left-color:var(--green)}
.ship .sh{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.ship .sh b{font-family:var(--display);font-weight:600;font-size:15.5px}
.ship p{font-size:14px;color:var(--ink-mid)}
/* The one line that says why the wait exists — the capability, not the gap. */
.ship p.fresh{color:var(--ink);font-weight:500;font-size:14.5px}
.barw{height:6px;background:var(--surface);border-radius:3px;overflow:hidden;border:1px solid var(--line-soft)}
.barw i{display:block;height:100%;background:var(--green)}
/* Indeterminate on purpose: the run's own progress is not on the receipt
   payload, so the bar says "working", never a percentage we cannot source. */
.barw.run i{width:38%;background:var(--amber);opacity:.85;animation:barw-run 1.6s ease-in-out infinite}
.barw.done i{width:100%}
@keyframes barw-run{0%{transform:translateX(-100%)}100%{transform:translateX(263%)}}
/* What part 2 is expected to add, or what it added. Columns are set inline
   (two while it runs, three once it is done). */
.expect{display:grid;gap:3px 14px;font-size:14px;align-items:baseline;background:var(--surface);border:1px solid var(--line-soft);border-radius:6px;padding:10px 12px}
.expect .eh{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-family:var(--display);font-weight:600;text-align:right}
.expect .eh:first-child{text-align:left}
.expect .n{font-variant-numeric:tabular-nums;text-align:right;font-family:var(--display);font-weight:600}
.expect .was{font-variant-numeric:tabular-nums;text-align:right;color:var(--ink-soft)}
.expect .n.up{color:var(--green-ink)}
/* The part-1 file: kept reachable, never presented as current (ADR-026). */
.supers{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px dashed var(--line);border-radius:8px;padding:9px 13px;font-size:13.5px;color:var(--ink-mid)}
.supers b{font-weight:500;color:var(--ink-mid)}
.supers small{display:block;font-size:12.5px;color:var(--ink-soft)}
.supers .btn{padding:5px 10px;font-size:12.5px;flex:none}

/* recurring delivery: the cadence picker (receipt + saved-list overlay) and the manage page */
.recbox{border:1px solid var(--line-soft);border-radius:8px;padding:12px 14px;display:grid;gap:10px;font-size:14.5px;background:var(--surface-2)}
.recbox.on{border-color:var(--green);background:var(--page)}
.recbox .rh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.recbox .rh b{font-weight:600}
.recline{font-size:13.5px;color:var(--ink-mid)}
.cadence{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--surface);padding:3px;border-radius:7px;border:1px solid var(--line-soft)}
.cadence .cd{border:0;background:none;border-radius:5px;padding:7px 4px;font-size:13px;color:var(--ink-mid)}
.cadence .cd.on{background:var(--page);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.recrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.recrow label,.mgrid label,.mgrid > div{display:grid;gap:4px;font-size:12.5px;color:var(--ink-mid)}
.recrow select,.mgrid select{font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:var(--page);width:100%}
.money{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--ink)}
.money input{width:0;flex:1;min-width:0;font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:var(--page);font-variant-numeric:tabular-nums}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:500;background:var(--surface-2);color:var(--ink-mid);white-space:nowrap}
.pill.active{background:var(--green);color:#10301A} .pill.paused{background:var(--gold);color:#3A2A05} .pill.cancelled{background:var(--surface-2);color:var(--ink-soft)}
.mgstat{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--ink-mid);flex-wrap:wrap}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.mgrid .lab{font-size:12.5px;color:var(--ink-mid)}
.mgrid b{font-weight:500;color:var(--ink);font-size:14px}
.hist{display:grid;gap:4px;font-size:14px;border:1px solid var(--line-soft);border-radius:8px;padding:8px 12px;background:var(--surface-2)}
.hist .hd{display:grid;grid-template-columns:1.2fr 1fr .8fr auto;gap:10px;padding:5px 0;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums;align-items:baseline}
.hist .hd:last-child{border-bottom:0}
.hist .hd.tot{font-weight:600;font-family:var(--display);border-top:1px solid var(--line);padding-top:8px}

/* overlay: the record's Profile / How we know pages, and the sample file */
.ov{position:fixed;inset:0;background:rgba(37,37,35,.55);display:grid;place-items:start center;padding:28px 12px;overflow:auto;z-index:25}
.ovin{background:var(--page);color:var(--ink);width:100%;max-width:960px;border-radius:10px;box-shadow:var(--shadow);border:1px solid var(--line);display:grid;grid-template-rows:auto 1fr;min-height:70vh}
.ovbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft);background:var(--surface-2);border-radius:10px 10px 0 0;position:sticky;top:0}
.ovbar .btn{padding:5px 10px;font-size:13px}
.ovbar .lab{font-size:13px;color:var(--ink-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovbar .tabs{display:flex;gap:6px;align-items:center;flex:none}
.ov iframe{width:100%;height:min(78vh,1000px);border:0;border-radius:0 0 10px 10px;background:var(--page)}
.pv{padding:18px 20px;display:grid;gap:14px;font-size:14px}
.pv-head h3{font-size:24px;margin:2px 0}

/* phone */
@media (max-width: 860px){
  .nav{padding:10px 14px;gap:12px} .nav .hide-p{display:none}
  .body{padding:14px}
  .land{grid-template-columns:1fr;gap:20px}
  .door{gap:24px} .search.big input{font-size:16px} .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .land .stats{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr}
  .browse{grid-template-columns:1fr;gap:14px}
  .browse .facets{display:none}
  .browse .facets.open{display:grid}
  .facet-toggle{display:inline-flex}
  .meter{position:static;max-height:none;overflow:visible}
  .two{font-size:14px} .two .n,.two .a{font-size:16px}
  .lanes.three .ln{padding:8px 2px}
  .sticky-p{display:flex;position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:10px 14px;gap:10px;align-items:center;justify-content:space-between;margin:14px -14px -14px;font-size:14px;z-index:15}
  .sticky-p b{font-family:var(--display);font-size:18px}
  .sheet{padding:18px}
  .rec{flex-direction:column;align-items:stretch}
  .recrow,.mgrid{grid-template-columns:1fr}
  .cadence{grid-template-columns:1fr 1fr}
  .hist .hd{grid-template-columns:1fr 1fr;row-gap:2px}
  .savedbox{flex-direction:column;align-items:stretch}
  .ship{padding:12px 13px}
  .expect{padding:9px 10px;font-size:13.5px} .expect .eh{font-size:11px;letter-spacing:.04em}
  .supers{flex-direction:column;align-items:stretch;gap:8px}
}
@media (prefers-reduced-motion: reduce){ .toast{transition:none} .barw.run i{animation:none;width:100%;opacity:.5} }