/* ============================================================================
   FOUND MONEY — CONCEPT B: "THE PILE" — PROTOTYPE

   Built from BKM/Projects/Resale-Intake/2026-09-12_Concept-B-The-Pile-Spec.md.
   Internal comparison artefact per that spec's s.13 Q1: fixture state, nothing
   persisted server-side, no real family names, photographs or prices.

   THE TOKEN LAYER IS PORTED, NOT REINVENTED. Everything down to the end of the
   "ported" block is copied from the first rebuild prototype (strp-7q2v), which
   copied it from the shipped apps/resale/public/index.html. That is deliberate:
   the two prototypes must differ in STRUCTURE, not in hand. If they differed in
   both, the comparison would be worthless.

   WHAT IS NEW IN THIS FILE, all of it downstream of this concept:
     .stack / .stackcard      Home's three stacks (s.2, s.3.2)
     .tray / .chiprail        Shoot: the free-form capture tray (s.4.2)
     .face                    "You can put the phone down" (s.4.4, s.5)
     .floor / .lane           THE MIDDLE — parallel work, rendered (s.5.2, s.5.5)
     .wavebar                 the stagger, shown rather than hidden
     .scard                   the Sort card in its six states (s.6.2)
     .fixsheet                the Fix sheet and its three consequences (s.6.3)
     .pushbanner              the simulated return signal (s.5.4)
     .openq / #protoctl       PROTOTYPE ONLY
   ========================================================================= */

@font-face{
  font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/bebasneue-subset.woff2') format('woff2');
}

/* ========================================================================= */
/* ===================== PORTED TOKEN LAYER — DO NOT DRIFT ================= */
/* ========================================================================= */
:root{
  --paper:#8D9994; --paper-2:#FFFFFF; --paper-3:#F1EFEA;
  --ink:#17213A; --ink-2:#1E2B44; --ink-3:#2B3B54; --ink-4:#55606F; --cream:#FBF8EF;
  --rule:#C7C2B2; --rule-2:#B7AF9C;
  --metal:var(--ink); --metal-ink:var(--ink);
  --live:#C4392A; --live-soft:#F4D9D5;
  --sea:#1F5E3E;
  --marigold:#C4392A; --on-marigold:#FBF8EF;
  --mustard:#E3A93A; --mustard-deep:#A66F14; --on-mustard:var(--ink);
  --echo:var(--ink);
  --serif:'Bebas Neue',Impact,var(--sans);
  --sans:-apple-system,BlinkMacSystemFont,'Inter','Inter Tight','Segoe UI',system-ui,sans-serif;
  --numface:'Inter','Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:ui-monospace,'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:28px; --s7:40px;
  --gutter:20px; --tap:48px; --tap-primary:56px;
  /* Clearance for the fixed PROTOTYPE tab (27px tall, top-right). Any screen
     whose FIRST row carries right-aligned content — the Sort counter, the Floor
     head, the Face card's top-right corner — has to start below it, or the
     scaffolding sits on the product. Scaffolding never occludes the thing being
     judged. Set to 0 if the tab is ever removed. */
  --tabclear:34px;
  --r-sm:4px; --r:6px; --r-lg:10px;
  --tabbar-h:58px;
  --border-w:3px;
  --press:3px 3px 0 var(--echo);
  --press-sm:2px 2px 0 var(--echo);
}
html[data-swatch=raspberry]{ --paper:#75D0D8; }
html[data-swatch=grapesicle]{ --paper:#CBBEDD; }
html[data-swatch=cottoncandy]{ --paper:#EDBFD3; }
html[data-swatch=spearmint]{ --paper:#C8DDC8; }
html[data-swatch=bananasplit]{ --paper:#EBDF90; }
html[data-swatch=bone]{ --paper:#E7E0D0; --marigold:#7A2331; }
html[data-swatch=portlandstone]{ --paper:#C8C3B8; --marigold:#7A2331; }
html[data-swatch=walnutwash]{ --paper:#D4BFA0; --marigold:#7A2331; }
html[data-swatch=slate]{ --paper:#ABB4B9; --marigold:#7A2331; }
html[data-swatch=pewter]{ --paper:#949A9C; --marigold:#7A2331; }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{font-size:100%}
@supports (font:-apple-system-body){ html{font:-apple-system-body;font-family:var(--sans)} }
html.big{font-size:118%}
body{
  background:var(--paper);color:var(--ink);font:400 1.125rem/1.55 var(--sans);
  padding-bottom:calc(var(--tap-primary) + 96px + env(safe-area-inset-bottom));
  transition:background-color .25s ease;
  -webkit-text-size-adjust:100%;
}
body.has-tabbar{ padding-bottom:calc(var(--tap-primary) + 96px + var(--tabbar-h) + env(safe-area-inset-bottom)); }
body.has-tabbar .sticky{ bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom:var(--s3); }
[hidden]{display:none !important}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:640px;margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{margin:0}

.title{font:400 2rem/1.15 var(--serif);text-transform:uppercase;letter-spacing:.01em;margin:0}
.titlerow{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-bottom:var(--s3);border-bottom:var(--border-w) solid var(--ink);margin:var(--s6) 0 var(--s5)}
.titlerow .title{flex:1 1 auto;min-width:0}
.swatch-trig{flex:0 0 auto;width:44px;height:44px;min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0}
.swatch-trig .tr-chip{width:32px;height:32px;border-radius:50%;background:var(--cream);
  border:var(--border-w) solid var(--ink);box-shadow:var(--press-sm);
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;padding:4px}
.swatch-trig .tr-dot{border-radius:50%;display:block}

.sec{font:800 1.25rem/1.25 var(--sans);letter-spacing:.01em;text-transform:uppercase;padding-bottom:8px;
  border-bottom:3px solid var(--ink);margin:36px 0 var(--s4)}
.meta{font:500 0.75rem/1.4 var(--mono);letter-spacing:.04em;color:var(--ink-3)}
.tag{font:600 0.6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.small{font:400 0.9375rem/1.5 var(--sans);color:var(--ink-3)}
.body2{font:400 1rem/1.5 var(--sans);color:var(--ink-2)}
p{margin:0 0 var(--s4)}

button{font:inherit;color:inherit;cursor:pointer}
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:var(--tap-primary);padding:0 var(--s5);border:var(--border-w) solid var(--ink);
  background:var(--marigold);color:var(--on-marigold);border-radius:var(--r);
  font:800 1.0625rem/1 var(--sans);letter-spacing:.01em;text-transform:uppercase;
  box-shadow:var(--press);transition:transform .1s;
}
.btn:active{transform:translateY(2px)}
.btn.ghost{background:var(--cream);color:var(--ink)}
.btn.quiet{background:var(--paper-2);color:var(--ink);border-color:var(--rule-2);border-width:2px;
  box-shadow:none;text-transform:none;font-weight:600;letter-spacing:0}
.btn[disabled]{opacity:.45;pointer-events:none}

.field{display:block;margin-bottom:var(--s5)}
.field > span{display:block;font:600 0.9375rem/1.3 var(--sans);margin-bottom:6px}
input[type=text],input[type=search],textarea,select{
  width:100%;min-height:var(--tap-primary);padding:14px var(--s4);font:600 1.125rem/1.4 var(--sans);
  background:var(--cream);border:var(--border-w) solid var(--ink);border-radius:var(--r);color:var(--ink);
  box-shadow:var(--press-sm);-webkit-appearance:none;appearance:none;
}
textarea{min-height:96px;resize:vertical;font-weight:400}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 -4px 0 var(--marigold)}
.m-field{background:var(--cream);border:var(--border-w) solid var(--ink);border-radius:var(--r);
  padding:12px 14px;box-shadow:var(--press-sm)}
.m-field-label{font:800 0.6875rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:6px}
.money-field{display:flex;align-items:center;gap:8px}
.money-tag{font:800 1.25rem/1 var(--numface);color:var(--ink-3)}
/* min-width:0 is load-bearing — a flex child's default min-width is `auto`,
   which for an <input> resolves to ~20 characters and pushed the page wider
   than the viewport at 320px with Bigger Words on. Carried from the first
   prototype, where it was found by measuring rather than by looking. */
.money-input{border:0;background:transparent;flex:1 1 auto;min-width:0;min-height:44px;padding:4px 0;
  font:800 1.25rem/1 var(--numface);font-variant-numeric:tabular-nums;color:var(--ink)}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.chip{min-height:44px;padding:0 var(--s4);border:3px solid var(--ink);background:var(--cream);
  border-radius:var(--r);font:800 0.9375rem/1 var(--sans);color:var(--ink)}
.chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}

.ladder{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rung{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:8px 14px;
  border:3px solid var(--ink);border-radius:var(--r);font:700 1rem/1.3 var(--sans);color:var(--ink);
  text-align:left;background:var(--paper-2);box-shadow:var(--press-sm);
  transition:opacity .15s,min-height .15s,border-width .15s}
.ladder.picked .rung[aria-pressed="false"]{opacity:.65}
.rung[aria-pressed="true"]{background:var(--ink);color:var(--cream);min-height:60px;border-width:5px;
  box-shadow:3px 3px 0 var(--ink);opacity:1}

.sticky{position:fixed;left:0;right:0;bottom:0;background:var(--cream);
  padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));z-index:40}
.sticky::before{content:"";position:absolute;left:0;right:0;top:-28px;height:28px;
  background:linear-gradient(to bottom, transparent 0%, var(--cream) 100%);pointer-events:none}
.sticky .inner{max-width:640px;margin:0 auto;display:flex;gap:var(--s3);flex-direction:column}
.sticky .inner .btn{flex:1}
.sticky .ghostline{background:none;border:0;padding:6px 0;min-height:44px;
  font:400 .9375rem/1.3 var(--sans);color:var(--ink-3);text-decoration:underline;text-align:center}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;
  background:var(--cream);border-top:1px solid var(--rule-2);padding-bottom:env(safe-area-inset-bottom)}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--tabbar-h);padding:8px 4px;background:none;border:0;
  font:800 .75rem/1.15 var(--sans);letter-spacing:.01em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;position:relative;white-space:normal}
.tabbar .tab.active{color:var(--ink)}
.tabbar .tab.active::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;background:var(--marigold)}
.tabbar .notif-badge{position:absolute;top:2px;right:22%;min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;background:var(--live);color:var(--cream);
  border-radius:999px;font:800 .6875rem/1 var(--numface);font-variant-numeric:tabular-nums}

#welcome,#signin{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;box-sizing:border-box;padding-top:6vh;
  padding-bottom:calc(var(--tap-primary) + 56px + env(safe-area-inset-bottom))}
.entry-center{width:100%}
.wordmark{text-align:center;font:400 2.125rem/1.12 var(--serif);text-transform:uppercase;letter-spacing:.02em;
  padding:14px 22px;background:var(--ink);color:var(--paper);border:var(--border-w) solid var(--ink);
  border-radius:var(--r);width:max-content;max-width:100%;margin:0 auto var(--s6);box-shadow:var(--press)}
.wordmark .wm-tick{display:inline-block;vertical-align:-2px;margin-right:10px}
.w-panel{margin:0 0 var(--s6);background:var(--marigold);color:var(--on-marigold);
  border:var(--border-w) solid var(--ink);border-radius:var(--r);box-shadow:var(--press);padding:24px 20px}
.w-panel h1{font:400 1.625rem/1.15 var(--serif);text-transform:uppercase;letter-spacing:.01em;margin:0 0 10px}
.w-panel p{font:600 1rem/1.4 var(--sans);margin:0 0 8px}
.w-panel p.small{font:400 .875rem/1.4 var(--sans);color:var(--on-marigold);opacity:.85;margin:0}
.w-flow{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:var(--s6);flex-wrap:wrap}
.w-flow span{font:800 .8125rem/1 var(--sans);letter-spacing:.03em;color:var(--metal-ink)}
.w-flow span.arrow{color:var(--ink-4);font-weight:700}
.pcard{display:block;width:100%;border:var(--border-w) solid var(--ink);border-radius:var(--r);
  padding:0;margin:0 0 var(--s5);text-align:left;font:inherit;color:inherit;background:var(--paper-2);
  box-shadow:var(--press)}
.pcard .tf{display:flex;align-items:center;min-height:64px;padding:14px 16px}
.pcard:active{filter:brightness(.97)}
.pcard .g{flex:1;min-width:0}
.pcard .kick{display:block;font:800 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--metal-ink);margin-bottom:4px}
.pcard .nm{display:block;font:800 1.375rem/1.15 var(--sans)}
.pcard .sub{display:block;font:700 .75rem/1 var(--sans);letter-spacing:.02em;color:var(--metal-ink);margin-top:5px}
.cells{display:flex;gap:var(--s3);justify-content:center;margin:var(--s6) 0 var(--s4)}
.cell{width:48px;height:60px;background:var(--cream);border:3px solid var(--ink);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font:700 1.625rem/1 var(--numface);
  color:var(--ink);box-shadow:var(--press-sm)}
.cell.on{border:var(--border-w) solid var(--ink);background:var(--marigold);color:var(--on-marigold)}
.codewrap{position:relative}
#codeInput{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;
  background:transparent;font-size:16px;color:transparent;caret-color:transparent}

.copy{display:block;width:100%;text-align:left;min-height:var(--tap-primary);padding:var(--s3) var(--s4);
  margin-bottom:var(--s3);background:var(--cream);border:var(--border-w) solid var(--ink);
  border-left:6px solid var(--ink);border-radius:var(--r);box-shadow:var(--press);
  transition:background .12s,color .12s,transform .12s}
.copy:active{transform:translateY(2px)}
.copy .lab{display:flex;justify-content:space-between;align-items:center;
  font:600 0.6875rem/1 var(--mono);letter-spacing:.06em;color:var(--ink-3);margin-bottom:6px}
.copy .prev{font:400 1rem/1.45 var(--sans);color:var(--ink-2);white-space:pre-wrap;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.copy.next{border-left-color:var(--live);border-left-width:6px}
.copy.flash{background:var(--ink);border-color:var(--ink)}
.copy.flash .lab,.copy.flash .prev{color:var(--cream)}
.copy.flash .prev{-webkit-line-clamp:unset;display:block;text-align:center;font-size:1.125rem}
.tick{color:var(--sea);font-size:0.8125rem}
.brief{padding:var(--s4) var(--s5) var(--s4) var(--s4);margin-bottom:var(--s4);background:var(--paper-2);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);border-left:6px solid var(--ink)}
.brief .tag{color:var(--ink-3);display:block;margin-bottom:8px}
.brief h3{font:700 1.0625rem/1.3 var(--sans);margin-bottom:8px}
.brief .txt{font:400 1.0625rem/1.55 var(--sans);white-space:pre-wrap}

.margin{font:400 .9375rem/1.5 var(--sans);color:var(--ink-3);padding-left:14px;
  border-left:3px solid var(--metal);margin:10px 0 var(--s5)}
.margin b{font-weight:600;color:var(--ink-2)}
.say{border-left:3px solid var(--live);background:var(--live-soft);padding:var(--s4);margin:var(--s4) 0;
  font:400 1.0625rem/1.5 var(--sans);color:var(--ink)}
.say.calm{border-left-color:var(--metal);background:var(--paper-2)}
.tally{font:400 .9375rem/1.5 var(--sans);color:var(--ink-3);padding-left:14px;
  border-left:3px solid var(--metal);margin:0 0 var(--s5)}
.tally b{font-weight:700;color:var(--ink);font-family:var(--numface);font-variant-numeric:tabular-nums}
.netbar{position:fixed;left:0;right:0;top:0;z-index:60;background:var(--live);color:var(--cream);
  padding:10px var(--gutter);font:700 0.9375rem/1.3 var(--sans);text-align:center;
  border-bottom:var(--border-w) solid var(--ink)}
.ticket{display:inline-block;vertical-align:middle}
.ticket svg{display:block}
details.disc{margin:0 0 var(--s4)}
details.disc > summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;
  gap:8px;font:600 .9375rem/1.3 var(--sans);color:var(--metal-ink);text-decoration:underline;text-underline-offset:3px}
details.disc > summary::-webkit-details-marker{display:none}
details.disc[open] > summary{margin-bottom:var(--s3)}
.sheet{position:fixed;inset:0;z-index:80;background:rgba(23,33,58,.45);
  display:flex;align-items:flex-end;justify-content:center}
.sheet .card{background:var(--paper-2);width:100%;max-width:640px;
  padding:var(--s6) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom));
  border-radius:var(--r-lg) var(--r-lg) 0 0;border-top:var(--border-w) solid var(--ink);
  max-height:88vh;overflow-y:auto}
/* Gated like every other piece of movement in the file. It had been declared
   unconditionally, which meant the Fix sheet still slid up under Reduce Motion
   while the whole middle correctly computed to nothing. */
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion=reduce]) .sheet .card{animation:sheetup .22s cubic-bezier(.2,.8,.2,1)}
}
@keyframes sheetup{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.sheet h3{font:400 1.5rem/1.3 var(--serif);margin-bottom:var(--s3)}
.sheet .btn{margin-bottom:var(--s3)}
.swatch-tabs{display:flex;gap:8px;margin:var(--s4) 0 0}
.swatch-tab{flex:1;min-height:var(--tap);padding:0 var(--s3);border:var(--border-w) solid var(--ink);
  border-radius:var(--r);color:var(--ink);font:700 0.9375rem/1.2 var(--sans);text-align:center;position:relative}
.swatch-tab[data-tab="playful"]{background:linear-gradient(135deg,#8D9994 0%,#75D0D8 20%,#CBBEDD 40%,#EDBFD3 60%,#C8DDC8 80%,#EBDF90 100%)}
.swatch-tab[data-tab="premium"]{background:linear-gradient(135deg,#E7E0D0 0%,#C8C3B8 25%,#D4BFA0 50%,#ABB4B9 75%,#949A9C 100%)}
.swatch-tab[aria-selected="true"]{border-width:5px;box-shadow:var(--press)}
.swatch-picker{display:flex;flex-direction:column;gap:10px;margin:var(--s4) 0}
.swatch-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:76px;padding:14px 16px;border:var(--border-w) solid var(--ink);border-radius:var(--r);
  text-align:left;box-shadow:var(--press);transform:scale(1);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s cubic-bezier(.34,1.56,.64,1)}
.swatch-opt:active{transform:scale(.96);box-shadow:0 0 0 var(--echo)}
.swatch-opt[aria-pressed="true"]{border-width:5px}
.swatch-label{display:inline-flex;flex-direction:column;gap:2px;background:rgba(20,20,20,.55);
  padding:6px 10px;border-radius:4px;max-width:78%}
.swatch-opt .nm{font:700 0.9375rem/1.2 var(--sans);color:var(--cream)}
.swatch-opt .stock{font:600 0.6875rem/1.3 var(--sans);color:var(--cream);opacity:.85}
.more-list{display:flex;flex-direction:column;gap:10px;margin-top:var(--s3)}
.more-row{display:flex;align-items:center;min-height:56px;width:100%;padding:0 var(--s4);
  border:3px solid var(--ink);border-radius:var(--r);background:var(--cream);color:var(--ink);
  text-decoration:none;font:600 1.0625rem/1.3 var(--sans);text-align:left;box-shadow:var(--press-sm)}
.footline{max-width:640px;margin:var(--s7) auto 0;padding:var(--s5) var(--gutter) var(--s6);
  border-top:3px solid var(--ink);display:flex;flex-direction:column;gap:var(--s3);flex-wrap:wrap}
.cc-trigger{position:relative;display:inline-block;padding:12px 20px;margin-bottom:var(--s4);
  font:400 1.25rem/1.1 var(--serif);background:var(--ink);color:var(--paper);
  border:var(--border-w) solid var(--ink);border-radius:var(--r);cursor:pointer;
  user-select:none;-webkit-user-select:none;touch-action:none;perspective:600px}
.cc-face{position:relative;display:inline-block;transform-style:preserve-3d}
/* The Compartment's flip is a 3D rotation — the single most vestibular thing in
   the file — and it was the other rule declaring motion outside the gate. */
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion=reduce]) .cc-face{transition:transform .22s cubic-bezier(.4,0,.2,1)}
}
.cc-trigger.flipped .cc-face{transform:rotateY(180deg)}
.cc-face-side{display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cc-face-back{position:absolute;inset:0;transform:rotateY(180deg)}
.cc-charge{position:absolute;left:var(--border-w);right:var(--border-w);bottom:calc(-1 * var(--border-w));
  height:4px;background:var(--marigold);width:0%}
.cc-panel{max-width:480px;margin:0 0 var(--s4)}
.cc-tear{height:14px;background-image:radial-gradient(circle,var(--paper-2) 3.5px,transparent 4px);
  background-size:18px 14px;background-position:center}
.cc-card{background:var(--cream);border:var(--border-w) solid var(--ink);border-top:none;
  border-radius:0 0 var(--r) var(--r);padding:var(--s4) var(--s4) var(--s5);box-shadow:var(--press)}
.cc-till{display:flex;flex-direction:column;gap:8px}
.cc-till-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border:3px solid var(--ink);
  border-radius:var(--r);background:var(--cream);box-shadow:var(--press-sm)}
.cc-till-row.lead{background:var(--marigold);color:var(--on-marigold);box-shadow:3px 3px 0 var(--ink)}
.cc-till-row .pos{font:400 1.25rem/1 var(--serif);width:26px;text-align:center;flex:0 0 auto}
.cc-till-row .who{flex:1;min-width:0}
.cc-till-row .who .name{font:800 0.9375rem/1.2 var(--sans);display:block}
.cc-till-row .who .count{font:400 0.75rem/1.3 var(--sans);opacity:.8}
.cc-till-row .amt{font:800 1.125rem/1 var(--numface);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(prefers-contrast:more){
  body,.body2,.small,.margin{color:var(--ink)}
  :root{--rule:#57617B;--ink-3:#17213A;--ink-4:#223049}
}
.title,.wordmark,.cell{font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
/* ===================== END PORTED TOKEN LAYER ============================ */


/* ============================================================================
   HOME — THE THREE STACKS (s.2, s.3.2)

   The skeleton never changes (relearnable law s.2.1): three cards, always in
   this order, always present, each with a count and one sentence, and an empty
   one says so in one line rather than disappearing. A stack with nothing in it
   is information.

   THE PILE IS NEVER A TO-DO LIST (s.1). No overdue language, no red badge on
   an unsorted count, no "you haven't done these". A full stack reads like post
   that has arrived, not like work that is late. The only colour that carries
   urgency in this block is reserved for a stack the MACHINE is blocked on.
   ========================================================================= */
.stack{display:flex;flex-direction:column;gap:var(--s3);margin:0 0 var(--s5)}
.stackcard{display:flex;align-items:center;gap:var(--s4);width:100%;text-align:left;
  min-height:84px;padding:var(--s4);border:var(--border-w) solid var(--ink);border-radius:var(--r);
  background:var(--cream);color:var(--ink);box-shadow:var(--press);
  transition:transform .1s,box-shadow .1s}
.stackcard:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--echo)}
.stackcard .sc-n{flex:0 0 auto;min-width:56px;height:56px;padding:0 6px;border-radius:var(--r-sm);
  border:var(--border-w) solid var(--ink);background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;
  font:800 1.75rem/1 var(--numface);font-variant-numeric:tabular-nums}
.stackcard .sc-g{flex:1;min-width:0}
.stackcard .sc-t{display:block;font:800 1.1875rem/1.25 var(--sans)}
.stackcard .sc-s{display:block;font:400 .9375rem/1.4 var(--sans);color:var(--ink-3);margin-top:4px}
.stackcard .sc-go{flex:0 0 auto;font:800 1.25rem/1 var(--sans);color:var(--ink-4)}
/* empty: quiet, present, and it says so */
.stackcard.empty{background:transparent;box-shadow:none;border-style:dashed;border-color:var(--rule-2);min-height:64px}
.stackcard.empty .sc-n{background:transparent;border-style:dashed;border-color:var(--rule-2);color:var(--ink-4);
  font-size:1.25rem}
.stackcard.empty .sc-t{color:var(--ink-3);font-weight:700;font-size:1.0625rem}
/* the machine is working: the count gets the ink ground and a slow breath */
.stackcard.working .sc-n{background:var(--ink);color:var(--cream)}
.stackcard.ready .sc-n{background:var(--marigold);color:var(--on-marigold)}
.stackcard.post .sc-n{background:var(--mustard);color:var(--on-mustard)}
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion=reduce]) .stackcard.working .sc-n{animation:breathe 2.6s ease-in-out infinite}
}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.62}}
/* the arriving stamp when a pile finishes and Home is on screen */
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion=reduce]) .stackcard.arrived{animation:arrive .42s cubic-bezier(.2,1.5,.4,1)}
}
@keyframes arrive{0%{transform:scale(1.04) rotate(-.6deg)}100%{transform:none}}

.ledger{border-top:var(--border-w) solid var(--ink);margin-top:var(--s4)}
.h6row{position:relative;display:flex;align-items:center;gap:var(--s4);width:100%;text-align:left;
  background:none;border:0;padding:26px 4px 14px;border-bottom:var(--border-w) solid var(--ink);color:var(--ink)}
.h6row .g{flex:1;min-width:0}
.h6row .code,.h6row .t,.h6row .st{display:block}
.h6row .code{font:700 .6875rem/1 var(--mono);color:var(--ink-3)}
.h6row .t{font:700 1.0625rem/1.3 var(--sans);margin-top:2px}
.h6row .st{font:700 .8125rem/1.3 var(--sans);color:var(--ink-3);margin-top:3px}
.h6row .st.info{color:var(--metal-ink)}
.h6row .flag{position:absolute;top:-3px;left:6px;font:800 .625rem/1 var(--sans);letter-spacing:.05em;
  text-transform:uppercase;padding:5px 9px;border:2px solid var(--ink);border-top:none;
  border-radius:0 0 6px 6px;z-index:2;background:var(--paper-3);color:var(--ink-3)}
.h6-price{flex:0 0 auto;width:56px;height:56px;border-radius:50%;border:var(--border-w) solid var(--ink);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font:800 .9375rem/1.05 var(--numface);font-variant-numeric:tabular-nums;padding:2px;
  background:var(--cream);box-shadow:var(--press-sm)}
.h6row.researching .flag,.h6row.researching .h6-price{background:var(--metal);color:var(--cream)}
.h6row.listed .flag,.h6row.listed .h6-price{background:var(--mustard);color:var(--on-mustard)}
.h6row.sold{filter:grayscale(1);opacity:.68}
.h6row.sold .h6-price{background:var(--paper-3);color:var(--ink-3)}
.h6row.held .flag,.h6row.held .h6-price{background:var(--live);color:var(--cream)}


/* ============================================================================
   SHOOT — THE TRAY (s.4.2)

   A free-form capture tray, NOT a per-angle frame grid. The grid is the right
   design for one considered object and the wrong one for a garage pass: the
   category is not known before the first shot, the pace is "three quick shots
   and move on", and every extra decision is paid once per thing in the pile.
   ========================================================================= */
.tray{margin:var(--s5) 0 0}
.chiprail{display:flex;gap:10px;overflow-x:auto;padding:var(--s2) 2px var(--s4);
  border-bottom:2px solid var(--rule);margin:0 0 var(--s4);min-height:92px;align-items:center;
  scroll-snap-type:x proximity}
.chiprail .cr-empty{font:400 .875rem/1.4 var(--sans);color:var(--ink-3);padding:8px 0}
.pchip{position:relative;flex:0 0 auto;width:70px;scroll-snap-align:start;background:none;border:0;padding:0;
  text-align:center;color:var(--ink)}
.pchip canvas{display:block;width:64px;height:64px;object-fit:cover;margin:0 auto;
  border:var(--border-w) solid var(--ink);border-radius:var(--r-sm);background:var(--paper-3)}
.pchip .pc-k{display:block;font:700 .5625rem/1.2 var(--mono);letter-spacing:.04em;margin-top:4px;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the upload ring: a real 0->100 sweep per thing, drawn as a conic gradient so
   it needs no SVG and costs nothing to animate. */
.pchip .pc-ring{position:absolute;top:-3px;left:50%;margin-left:-35px;width:70px;height:70px;border-radius:50%;
  background:conic-gradient(var(--live) calc(var(--p,0) * 1%), rgba(23,33,58,.14) 0);
  -webkit-mask:radial-gradient(circle, transparent 29px, #000 30px);
  mask:radial-gradient(circle, transparent 29px, #000 30px);pointer-events:none}
.pchip .pc-tick{position:absolute;top:44px;right:2px;width:22px;height:22px;border-radius:50%;
  background:var(--sea);border:2px solid var(--cream);display:none;align-items:center;justify-content:center;
  color:var(--cream);font:800 12px/1 var(--sans)}
.pchip[data-s=done] .pc-tick{display:flex}
.pchip[data-s=held] .pc-tick{display:flex;background:var(--live)}
.pchip[data-s=offline] canvas{border-style:dashed;opacity:.72}
.pchip[data-s=offline] .pc-k{color:var(--live)}

.shotstrip{display:flex;gap:var(--s3);overflow-x:auto;padding:var(--s2) 0 var(--s3);scroll-snap-type:x proximity;
  min-height:132px;align-items:center}
.shotstrip .ss-empty{font:400 1rem/1.45 var(--sans);color:var(--ink-3)}
.shot{position:relative;flex:0 0 auto;scroll-snap-align:start}
.shot canvas{display:block;width:112px;height:112px;object-fit:cover;
  border:3px solid var(--ink);border-radius:var(--r);background:var(--paper-3)}
.shot .ord{position:absolute;top:6px;left:6px;background:var(--cream);border:2px solid var(--ink);
  border-radius:var(--r-sm);padding:1px 7px;font:700 1.125rem/1.2 var(--numface)}
.shot .drop{position:absolute;bottom:6px;right:6px;min-width:30px;min-height:30px;border-radius:var(--r-sm);
  background:var(--ink);color:var(--cream);border:2px solid var(--cream);font:800 .75rem/1 var(--sans)}
.shot .soft{position:absolute;bottom:6px;left:6px;background:var(--live);color:var(--cream);
  padding:3px 6px;border-radius:var(--r-sm);font:800 .625rem/1 var(--sans);letter-spacing:.04em;text-transform:uppercase}
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion=reduce]) .shot.fresh{animation:shotin .3s cubic-bezier(.2,1.4,.4,1)}
}
@keyframes shotin{from{transform:scale(.72) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}

.threewords{font:700 1.0625rem/1.5 var(--sans);color:var(--ink-2);text-align:center;
  padding:var(--s3) 0 var(--s4);letter-spacing:.01em}
.bigshoot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:112px;border:var(--border-w) solid var(--ink);border-radius:var(--r);
  background:var(--cream);box-shadow:var(--press);color:var(--ink);
  font:800 1.25rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:.02em;margin:0 0 var(--s3)}
.bigshoot:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--echo)}
.bigshoot .lens{width:40px;height:40px;border-radius:50%;border:4px solid var(--ink);position:relative}
.bigshoot .lens::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--live)}
/* hold to talk */
.talk{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:var(--tap);
  padding:0 var(--s4);border:2px solid var(--rule-2);border-radius:var(--r);background:var(--paper-2);
  color:var(--ink-2);font:600 1rem/1.3 var(--sans);text-align:left;overflow:hidden;
  user-select:none;-webkit-user-select:none;touch-action:none}
.talk .tk-bars{display:flex;gap:3px;align-items:flex-end;height:20px;flex:0 0 auto}
.talk .tk-bars i{width:3px;height:5px;background:var(--ink-4);border-radius:2px;display:block}
.talk.on{border-color:var(--live);border-width:3px;background:var(--live-soft)}
.talk.on .tk-bars i{background:var(--live)}
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion=reduce]) .talk.on .tk-bars i{animation:vu .62s ease-in-out infinite alternate}
  html:not([data-motion=reduce]) .talk.on .tk-bars i:nth-child(2){animation-delay:.1s}
  html:not([data-motion=reduce]) .talk.on .tk-bars i:nth-child(3){animation-delay:.22s}
  html:not([data-motion=reduce]) .talk.on .tk-bars i:nth-child(4){animation-delay:.06s}
  html:not([data-motion=reduce]) .talk.on .tk-bars i:nth-child(5){animation-delay:.17s}
}
@keyframes vu{from{height:5px}to{height:20px}}
.traycount{font:700 .6875rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}


/* ============================================================================
   "YOU CAN PUT THE PHONE DOWN" — THE FACE (s.4.4, s.5)

   The concept's most distinctive moment, and the one that is easiest to get
   wrong by rendering a progress bar. There is no single progress bar here,
   because there is no single piece of work: there are up to six independent
   runs, three of them in flight and the rest waiting on a deliberate delay.

   THE FACE IS THE DEFAULT AND THE FLOOR IS THE OPT-IN. That ordering is the
   whole concept: if the detailed view is what you land on, the app has told
   you to watch, which is the thing this concept exists to stop doing. So the
   default screen is ambient, legible from across a kitchen, and says in one
   line that nothing is waiting on you.
   ========================================================================= */
.face{border:var(--border-w) solid var(--ink);border-radius:var(--r);background:var(--cream);
  box-shadow:var(--press);padding:var(--s6) var(--s5);margin:var(--tabclear) 0 var(--s4);text-align:center}
.face .fk{font:700 .6875rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-bottom:var(--s4)}
.face .fbig{font:400 clamp(2.5rem,13vw,4rem)/1 var(--serif);text-transform:uppercase;letter-spacing:.01em;
  display:block;margin:0 0 6px}
.face .fsub{font:600 1.0625rem/1.4 var(--sans);color:var(--ink-2);margin:0 0 var(--s5)}
.face .fby{display:inline-block;background:var(--ink);color:var(--cream);border-radius:var(--r-sm);
  padding:8px 14px;font:800 1.0625rem/1 var(--numface);font-variant-numeric:tabular-nums;margin-bottom:var(--s5)}
.face .fcalm{font:400 1rem/1.5 var(--sans);color:var(--ink-3);margin:0}

/* THE PULSE ROW. One Ticket per thing in the pile — the D-615 motif doing the
   job it was drawn for, standing in for an item — each breathing on its OWN
   phase and its OWN period, so the row reads as several independent things
   happening rather than as one thing with six parts. Six marks in sync would
   be a lie about the backend, where every run is an independent queue message
   with no coupling to any other. The periods are deliberately unequal and no
   two neighbours share one.

   A mark that is waiting on its wave delay sits pale and still. A mark that is
   done goes solid ink and stops. A mark that is held goes gold and stops,
   because a held thing is not work in progress, it is a question. */
.pulse{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center;margin:0 0 var(--s3)}
.pulse .pm{position:relative;width:34px;height:34px;color:var(--rule-2);display:block}
.pulse .pm[data-s=run]{color:var(--live)}
.pulse .pm[data-s=done]{color:var(--ink)}
.pulse .pm[data-s=held]{color:var(--mustard-deep)}
.pulse .pm[data-s=wait]{color:var(--rule-2);opacity:.7}
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion=reduce]) .pulse .pm[data-s=run]{animation:pm var(--per,2.4s) ease-in-out infinite}
}
@keyframes pm{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.80);opacity:.5}}
/* The legend is not decoration. Colour alone is never the only carrier of
   state on a screen this cohort has to relearn from cold, and the row above is
   the one place in the app where colour IS the information. */
.pulselegend{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 var(--s5)}
.pulselegend span{display:inline-flex;align-items:center;gap:5px;
  font:600 .625rem/1.2 var(--mono);letter-spacing:.04em;color:var(--ink-3)}
.pulselegend i{width:9px;height:9px;border-radius:2px;display:block}

/* THE TICKER. One honest line at a time, taken from whichever lane is actually
   moving, rotating slowly. This is what keeps the ambient screen alive without
   pretending to measure anything: it is not a percentage, it is a true sentence
   about one of the runs, and when there is nothing to say it says that. */
.fticker{font:600 .8125rem/1.5 var(--mono);color:var(--ink-3);min-height:3em;margin:0 0 var(--s4);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:0 6px}
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion=reduce]) .fticker.swap{animation:tickin .5s ease}
}
@keyframes tickin{from{opacity:0}to{opacity:1}}


/* ============================================================================
   THE FLOOR — PARALLEL WORK, RENDERED (s.5.2, s.5.5)

   One lane per thing. Lanes run at the same time, at different rates, showing
   different search text, and finish at different moments. That is the whole
   point: the backend has always been able to do this (independent queue
   messages, max_batch_size = 1) and no screen has ever shown it.

   A lane is a horizontal track with the search progress as a ground fill and
   the current search line on top of it. Fourteen tick marks along the foot are
   the per-search trace. When a lane finishes it stamps, then migrates up out of
   the running group into the finished one — work visibly moving from the bottom
   of the screen to the top while the person is not required to be there.
   ========================================================================= */
.floorhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding-bottom:var(--s3);border-bottom:var(--border-w) solid var(--ink);margin:var(--tabclear) 0 var(--s4)}
.floorhead .fh-l{font:800 1.0625rem/1.3 var(--sans)}
.floorhead .fh-r{font:700 .8125rem/1.3 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* THE WAVE BAR. The stagger made visible instead of hidden. Three at a time,
   ninety seconds apart, is a real constraint with a real reason, and a person
   who can see it has a true model of why the fourth thing has not started. */
.wavebar{background:var(--paper-2);border:2px solid var(--rule-2);border-radius:var(--r);
  padding:var(--s3) var(--s4);margin:0 0 var(--s4)}
.wavebar .wb-k{font:700 .625rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-bottom:8px}
.wavebar .wb-rows{display:flex;flex-direction:column;gap:6px}
.wavebar .wb-row{display:flex;align-items:center;gap:8px}
.wavebar .wb-n{font:700 .6875rem/1 var(--mono);color:var(--ink-4);flex:0 0 auto;min-width:54px}
.wavebar .wb-slots{display:flex;gap:5px;flex:1;min-width:0;flex-wrap:wrap}
.wavebar .wb-slot{width:100%;max-width:34px;height:10px;border-radius:2px;border:2px solid var(--ink);
  background:transparent;flex:1 1 22px}
.wavebar .wb-slot[data-s=run]{background:var(--live);border-color:var(--live)}
.wavebar .wb-slot[data-s=done]{background:var(--ink)}
.wavebar .wb-slot[data-s=wait]{border-style:dashed;border-color:var(--ink-4)}
.wavebar .wb-why{font:400 .8125rem/1.45 var(--sans);color:var(--ink-3);margin:10px 0 0}

.lanes{display:flex;flex-direction:column;gap:10px;margin:0 0 var(--s4)}
.lanegroup-k{font:700 .625rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin:var(--s4) 0 8px;display:block}
.lane{position:relative;overflow:hidden;border:var(--border-w) solid var(--ink);border-radius:var(--r);
  background:var(--cream);box-shadow:var(--press-sm);text-align:left;width:100%;padding:0;color:var(--ink);
  display:block}
/* the ground fill IS the search progress. No separate progress bar, because the
   lane already is one and a second one would be inventing a number. */
.lane .ln-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:rgba(196,57,42,.13);
  transition:width .55s cubic-bezier(.2,.7,.2,1);z-index:0}
.lane .ln-body{position:relative;z-index:1;padding:12px 14px}
.lane .ln-top{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.lane .ln-code{font:700 .625rem/1 var(--mono);letter-spacing:.06em;color:var(--ink-3);flex:0 0 auto}
.lane .ln-t{font:800 1rem/1.3 var(--sans);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lane .ln-stage{font:700 .625rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--live);flex:0 0 auto}
/* the rolling line. One live search per lane, replaced as each one fires — six
   lanes each showing different text is what "parallel" looks like on a phone. */
.lane .ln-line{font:400 .9375rem/1.4 var(--sans);color:var(--ink-2);min-height:1.4em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion=reduce]) .lane .ln-line.roll{animation:roll .34s cubic-bezier(.2,.8,.2,1)}
}
@keyframes roll{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* the per-search trace */
.lane .ln-ticks{display:flex;gap:3px;margin-top:8px;height:7px;align-items:stretch}
.lane .ln-ticks i{flex:1 1 auto;background:rgba(23,33,58,.15);border-radius:1px;display:block;
  transition:background .25s}
.lane .ln-ticks i.hit{background:var(--live)}
.lane .ln-ticks i.fired{background:rgba(196,57,42,.42)}

.lane[data-s=wait]{border-style:dashed;border-color:var(--ink-4);box-shadow:none;background:transparent}
.lane[data-s=wait] .ln-stage{color:var(--ink-4)}
.lane[data-s=held]{border-color:var(--live);background:var(--live-soft)}
.lane[data-s=held] .ln-stage{color:var(--live)}
.lane[data-s=done]{background:var(--ink);border-color:var(--ink)}
.lane[data-s=done] .ln-code,.lane[data-s=done] .ln-line{color:#C9CFDC}
.lane[data-s=done] .ln-t{color:var(--cream)}
.lane[data-s=done] .ln-stage{color:var(--mustard)}
.lane[data-s=done] .ln-fill{background:transparent}
.lane[data-s=done] .ln-ticks i{background:rgba(251,248,239,.22)}
.lane[data-s=done] .ln-ticks i.hit{background:var(--mustard)}
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion=reduce]) .lane.justdone{animation:lanestamp .46s cubic-bezier(.2,1.5,.4,1)}
}
@keyframes lanestamp{0%{transform:scale(1.035) rotate(-.7deg)}60%{transform:scale(.995)}100%{transform:none}}
.lane .ln-price{position:absolute;right:12px;bottom:10px;z-index:2;
  font:800 1.125rem/1 var(--numface);font-variant-numeric:tabular-nums;color:var(--mustard)}

.floorfoot{font:400 .9375rem/1.5 var(--sans);color:var(--ink-3);padding-left:14px;
  border-left:3px solid var(--metal);margin:var(--s4) 0 var(--s5)}

/* the simulated return signal (s.5.4) */
.pushbanner{position:fixed;left:10px;right:10px;top:10px;z-index:70;display:flex;gap:12px;align-items:flex-start;
  background:rgba(248,248,248,.97);color:#111;border-radius:14px;padding:12px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);backdrop-filter:blur(12px)}
.pushbanner .pb-ic{flex:0 0 auto;width:38px;height:38px;border-radius:9px;background:var(--ink);
  display:flex;align-items:center;justify-content:center}
.pushbanner .pb-g{flex:1;min-width:0}
.pushbanner .pb-a{font:700 .625rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#666}
.pushbanner .pb-t{font:700 .9375rem/1.3 -apple-system,sans-serif;margin-top:3px;color:#111}
.pushbanner .pb-b{font:400 .875rem/1.35 -apple-system,sans-serif;color:#333}
.pushbanner .pb-x{flex:0 0 auto;background:none;border:0;font:700 1.125rem/1 sans-serif;color:#888;
  min-width:34px;min-height:34px}
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion=reduce]) .pushbanner{animation:pushin .36s cubic-bezier(.2,1.2,.3,1)}
}
@keyframes pushin{from{transform:translateY(-70px);opacity:0}to{transform:none;opacity:1}}
.pushbanner.sim::after{content:"SIMULATED";position:absolute;right:10px;bottom:4px;
  font:800 .5rem/1 var(--mono);letter-spacing:.1em;color:#999}


/* ============================================================================
   SORT — ONE CARD AT A TIME, THREE FIXED ACTIONS (s.6)

   Every card has the same skeleton in the same places, in all six states. A
   section with nothing to say says so in one line rather than vanishing, which
   is relearnable s.2.1 applied to a card instead of a screen. No swipes
   anywhere: buttons only, because a swipe is an invisible affordance and this
   cohort cannot be asked to remember one.
   ========================================================================= */
.sortwrap{margin:var(--tabclear) 0 0}
.sortk{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  font:700 .6875rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:10px}
.sortk .sk-r{color:var(--live)}
.scard{position:relative;border:var(--border-w) solid var(--ink);border-radius:var(--r);
  background:var(--cream);box-shadow:var(--press);overflow:hidden;margin:0 0 var(--s4)}
.scard .sc-photo{display:block;width:100%;aspect-ratio:4/3;background:var(--paper-3);
  border-bottom:var(--border-w) solid var(--ink)}
.scard .sc-in{padding:var(--s5) var(--s4) var(--s4)}
.scard .sc-h{font:800 1.375rem/1.28 var(--sans);margin:0 0 10px}
.scard[data-s=held]{border-color:var(--live)}
.scard[data-s=held] .sc-photo{border-bottom-color:var(--live)}
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion=reduce]) .scard.deal{animation:deal .34s cubic-bezier(.2,.9,.3,1)}
  html:not([data-motion=reduce]) .scard.leave{animation:leave .3s cubic-bezier(.4,0,.7,.4) forwards}
}
@keyframes deal{from{transform:translateY(16px) scale(.985);opacity:0}to{transform:none;opacity:1}}
@keyframes leave{to{transform:translateY(-22px) scale(.97);opacity:0}}
/* the stack behind the card: two thin edges, so "there are more" is structural
   rather than a sentence. Purely decorative and it disappears at n = 1. */
.stackshadow{position:relative;margin:0 0 var(--s4)}
.stackshadow::before,.stackshadow::after{content:"";position:absolute;left:10px;right:10px;
  border:var(--border-w) solid var(--ink);border-radius:var(--r);background:var(--paper-3);z-index:-1}
.stackshadow::before{bottom:-7px;height:22px}
.stackshadow::after{bottom:-13px;left:20px;right:20px;height:22px;opacity:.72}
.stackshadow.one::before,.stackshadow.one::after{display:none}
.stackshadow > .scard{margin-bottom:0;position:relative;z-index:1}

.condchip{display:inline-flex;align-items:flex-start;gap:8px;text-align:left;
  background:var(--paper-2);border:2px solid var(--ink);border-radius:var(--r);
  padding:9px 12px;margin:0 0 var(--s4);font:600 .9375rem/1.35 var(--sans);color:var(--ink);
  min-height:44px;max-width:100%}
.condchip .cc-g{display:block}
.condchip .cc-w{display:block;font:400 .8125rem/1.35 var(--sans);color:var(--ink-3);margin-top:3px}
.condchip[data-src=vision_guess]{border-style:dashed}
.condchip[data-src=assumed]{border-style:dashed;border-color:var(--rule-2)}

.pricehero{background:var(--paper-2);border-radius:var(--r);padding:var(--s5) var(--s4);text-align:center;
  margin:0 0 var(--s4);border:var(--border-w) solid var(--ink);box-shadow:var(--press)}
.pricehero .phk{font:700 .6875rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:var(--s3)}
.pricehero .fig{font:800 3.25rem/1 var(--numface);font-variant-numeric:tabular-nums;color:var(--live);
  text-shadow:3px 3px 0 var(--mustard);display:block}
.pricehero .phl{font:600 1rem/1.4 var(--sans);color:var(--ink-2);margin-top:10px}
/* confidence as SHAPE — inherited from the first prototype, where it is one of
   Linnea's open forks. Carried here unchanged rather than re-opened, because
   this concept does not fork on it. */
.pricehero[data-c=moderate] .fig{color:var(--ink);text-shadow:none;-webkit-text-stroke:2px var(--live)}
.pricehero[data-c=low]{border-style:dashed}
.pricehero[data-c=low] .fig{color:transparent;text-shadow:none;-webkit-text-stroke:2px var(--ink-3)}
.pricehero.insufficient{background:var(--live);border-color:var(--ink)}
.pricehero.insufficient .phk,.pricehero.insufficient .phl{color:var(--cream)}
.pricehero.insufficient .fig{font:800 1.75rem/1.2 var(--numface);color:var(--cream);text-shadow:none}
.flanks{display:flex;gap:var(--s6);justify-content:center;margin:0 0 var(--s4)}
.flanks div{text-align:center}
.flanks .v{font:700 1.375rem/1 var(--numface);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.flanks .k{font:400 .875rem/1.4 var(--sans);color:var(--ink-3)}
.confline{font:400 .9375rem/1.5 var(--sans);color:var(--ink-3);margin:0 0 var(--s4);text-align:center}

.adpeek{background:var(--paper-2);border-left:6px solid var(--ink);border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);padding:var(--s4);margin:0 0 var(--s4)}
.adpeek .apk{font:700 .625rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-bottom:8px}
.adpeek .apt{font:400 1.0625rem/1.55 var(--sans);white-space:pre-wrap;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.onephoto{display:flex;gap:10px;align-items:flex-start;background:var(--mustard);color:var(--on-mustard);
  border:var(--border-w) solid var(--ink);border-radius:var(--r);padding:var(--s4);margin:0 0 var(--s4);
  box-shadow:var(--press-sm);font:600 1rem/1.42 var(--sans)}
.foryou{border-top:2px solid var(--rule);margin:var(--s4) 0 0;padding-top:var(--s3)}
.foryou > summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;
  font:700 .9375rem/1.3 var(--sans);color:var(--ink-2)}
.foryou > summary::-webkit-details-marker{display:none}
.foryou .fy-b{background:var(--paper-2);border-left:6px solid var(--live);padding:var(--s4);margin:0 0 10px}
.foryou .fy-b h4{font:700 1rem/1.3 var(--sans);margin:0 0 6px}
.foryou .fy-b p{font:400 .9375rem/1.5 var(--sans);margin:0;color:var(--ink-2)}

.three{display:flex;flex-direction:column;gap:10px;margin:0 0 var(--s4)}
.three .btn{margin:0}
.three .btn.tertiary{background:none;border:0;box-shadow:none;color:var(--ink-3);text-transform:none;
  font:600 1rem/1.3 var(--sans);min-height:var(--tap);text-decoration:underline;text-underline-offset:3px}

.askbox{background:var(--cream);border:var(--border-w) solid var(--live);border-radius:var(--r);
  padding:var(--s5) var(--s4);margin:0 0 var(--s4)}
.askbox .abq{font:800 1.25rem/1.32 var(--sans);margin:0 0 var(--s3)}
.askbox .abe{font:400 .9375rem/1.5 var(--sans);color:var(--ink-2);padding-left:12px;
  border-left:3px solid var(--rule-2);margin:0 0 var(--s4)}
.markedshots{display:flex;gap:8px;overflow-x:auto;padding:0 0 var(--s3)}
.markedshots .ms{position:relative;flex:0 0 auto}
.markedshots canvas{display:block;width:84px;height:84px;border:3px solid var(--ink);border-radius:var(--r-sm)}
.markedshots .ms.flagged canvas{border-color:var(--live);border-width:4px}
.markedshots .ms .n{position:absolute;top:4px;left:4px;background:var(--cream);border:2px solid var(--ink);
  border-radius:3px;padding:0 5px;font:700 .8125rem/1.35 var(--numface)}
.markedshots .ms.flagged .n{background:var(--live);color:var(--cream);border-color:var(--cream)}

.sortdone{border:var(--border-w) solid var(--ink);border-radius:var(--r);background:var(--cream);
  box-shadow:var(--press);padding:var(--s6) var(--s5);text-align:center;margin:var(--s5) 0}
.sortdone .sd-b{font:400 2rem/1.1 var(--serif);text-transform:uppercase;display:block;margin-bottom:10px}


/* ============================================================================
   POST — THE PASTE RAIL (s.7). REUSED FROM THE SPINE, deliberately unchanged.
   Facebook's posting form is a serial paste; a different concept for our side
   does not earn a different answer for theirs.
   ========================================================================= */
.prev-card{background:var(--cream);border:var(--border-w) solid var(--ink);border-radius:var(--r);
  overflow:hidden;margin:0 0 10px;box-shadow:var(--press)}
.prev-card .pc-photo{width:100%;aspect-ratio:4/3;background:var(--paper-3);display:block;
  border-bottom:var(--border-w) solid var(--ink)}
.prev-card .pc-body{padding:var(--s4)}
.prev-card .pc-t{font:800 1.125rem/1.3 var(--sans);margin:0 0 6px}
.prev-card .pc-p{font:800 1.5rem/1 var(--numface);font-variant-numeric:tabular-nums;margin:0 0 8px}
.prev-card .pc-d{font:400 .9375rem/1.5 var(--sans);color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prev-cap{font:600 .9375rem/1.4 var(--sans);color:var(--ink-3);margin:0 0 var(--s5);text-align:center}
.railstrip{position:sticky;top:0;z-index:30;background:var(--paper);padding:10px 0 var(--s3);
  border-bottom:var(--border-w) solid var(--ink);margin:0 0 var(--s4)}
.railstrip .rsk{font:700 .8125rem/1.2 var(--sans);letter-spacing:.02em;margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.railstrip .rsk > span{flex:1 1 auto;min-width:0}
.railstrip .rsk em{font-style:normal;font-weight:400;font-size:.75rem;color:var(--ink-3);
  flex:0 0 auto;white-space:nowrap}
@media(max-width:359px){ .railstrip .rsk em{display:none} }
.railmarks{display:flex;gap:8px;align-items:flex-end}
.railmark{flex:0 0 auto;opacity:.34;transition:opacity .2s;position:relative;padding-bottom:6px}
.railmark.done{opacity:1}
.railmark.cur{opacity:1}
.railmark.cur::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--live)}
.railbody{min-height:170px}
.railnav{display:flex;justify-content:space-between;gap:var(--s4);margin:var(--s3) 0 var(--s5)}
.railnav button{background:none;border:0;padding:8px 0;min-height:44px;
  font:600 .9375rem/1.3 var(--sans);color:var(--metal-ink);text-decoration:underline;text-underline-offset:3px}
.railpack{background:var(--paper-2);border:var(--border-w) solid var(--ink);border-radius:var(--r);
  padding:var(--s4);margin:0 0 var(--s3);box-shadow:var(--press-sm)}
.railpack h4{font:700 1rem/1.3 var(--sans);margin:0 0 8px}
.raildone{background:var(--sea);color:var(--cream);border:var(--border-w) solid var(--ink);
  border-radius:var(--r);padding:var(--s4);margin:0 0 var(--s4);font:700 1.0625rem/1.4 var(--sans)}
.queuenext{display:flex;align-items:center;gap:10px;background:var(--paper-2);border:2px dashed var(--rule-2);
  border-radius:var(--r);padding:12px 14px;margin:0 0 var(--s4);font:600 .9375rem/1.35 var(--sans);color:var(--ink-2)}

.renewal-projection{text-align:center;background:var(--live);color:var(--cream);
  border:var(--border-w) solid var(--ink);border-radius:var(--r);padding:12px 18px;margin:12px 0 4px}
.renewal-projection .k{font:800 .6875rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.renewal-projection .v{font:800 1.5rem/1.3 var(--numface);font-variant-numeric:tabular-nums;margin-top:4px}
.passedon{display:flex;gap:12px;align-items:flex-start;background:var(--paper-2);
  border-left:6px solid var(--ink);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:var(--s5) var(--s4);margin:0 0 var(--s5)}
.passedon .pot{font:700 1.1875rem/1.4 var(--sans)}
.passedon .pos{font:400 .9375rem/1.5 var(--sans);color:var(--ink-3);margin-top:6px}


/* ============================================================================
   PROTOTYPE-ONLY CHROME. Marked, not hidden.
   ========================================================================= */
.openq{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
  font:800 .5625rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  padding:3px 6px;border-radius:3px;border:1.5px dashed var(--ink);
  background:rgba(227,169,58,.28);color:var(--ink);margin-left:6px;white-space:nowrap;cursor:help}
html[data-openq=off] .openq{display:none}
html[data-openq=on] [data-openq-host]{outline:2px dashed rgba(196,57,42,.55);outline-offset:3px;border-radius:3px}

#protoTab{position:fixed;top:0;right:0;z-index:120;background:var(--ink);color:var(--cream);
  border:0;border-bottom-left-radius:8px;padding:8px 13px;
  font:800 .6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
#protoctl{position:fixed;inset:0;z-index:130;background:rgba(23,33,58,.55);display:flex;justify-content:flex-end}
#protoctl .pcard2{background:var(--cream);width:min(430px,100%);height:100%;overflow-y:auto;
  padding:var(--s5) var(--s5) 80px;border-left:var(--border-w) solid var(--ink)}
#protoctl h2{font:400 1.5rem/1.15 var(--serif);text-transform:uppercase;margin:0 0 4px}
#protoctl .pcintro{font:400 .875rem/1.5 var(--sans);color:var(--ink-3);margin:0 0 var(--s5)}
.ctlgrp{border-top:2px solid var(--rule);padding-top:var(--s4);margin-bottom:var(--s4)}
.ctlgrp > h3{font:800 .75rem/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px}
.ctlgrp .ctlwho{font:500 .6875rem/1.3 var(--mono);color:var(--live);margin:0 0 8px}
.ctlgrp .ctlwho.na{color:var(--ink-4)}
.ctlgrp .ctlnote{font:400 .8125rem/1.45 var(--sans);color:var(--ink-3);margin:6px 0 0}
.segs{display:flex;flex-wrap:wrap;gap:6px}
.seg{min-height:40px;padding:0 11px;border:2px solid var(--ink);border-radius:var(--r-sm);
  background:var(--paper-2);font:700 .8125rem/1 var(--sans);color:var(--ink);text-align:left}
.seg[aria-pressed=true]{background:var(--ink);color:var(--cream)}
#protoctl .btn{margin-top:var(--s4)}
.protofoot{font:400 .8125rem/1.5 var(--sans);color:var(--ink-3);border-top:2px solid var(--rule);
  padding-top:var(--s4);margin-top:var(--s5)}

@media(min-width:900px){
  body.framed{background:#0E1524;display:flex;align-items:flex-start;justify-content:center;
    padding:34px 0 60px;min-height:100vh}
  body.framed #deviceFrame{width:var(--dev-w,390px);height:var(--dev-h,844px);flex:0 0 auto;
    background:var(--paper);border:12px solid #05080F;border-radius:46px;overflow:hidden;
    position:relative;box-shadow:0 26px 70px rgba(0,0,0,.55)}
  body.framed #deviceScroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch}
  body.framed .sticky,body.framed .tabbar,body.framed .netbar,body.framed .sheet,
  body.framed .pushbanner{position:absolute}
  body.framed #welcome,body.framed #signin{min-height:var(--dev-h,844px)}
}
#deviceFrame{width:100%}