/* ============================================================
   TOKENS
   Material story: a dark desk mat, with a black polypropylene
   binder sitting on it. Brass ring hardware is the only warm
   accent; holo foil appears exactly once, on the primary action.
   ============================================================ */
/* Dark is the default. Light mode overrides the same tokens rather than
   restyling components, so anything built on the tokens follows automatically
   — including text colour, which is the thing that breaks when a theme is
   bolted on afterwards. */
:root{
  color-scheme: dark;
  --desk:#141821;
  --desk-hi:#1B212C;
  --panel:#1B2029;
  --panel-2:#222834;
  --page:#252B37;          /* binder sheet */
  --page-2:#1E232D;
  --pocket:#171C25;        /* empty pocket well */
  --seam:#39424F;
  --edge:rgba(255,255,255,.08);
  --edge-2:rgba(255,255,255,.15);
  --text:#EEF1F6;
  --lede:#C3CAD6;
  --bar-bg:rgba(20,24,33,.72);
  --muted:#98A3B5;
  --faint:#6C7787;
  --brass:#D8A93C;
  --brass-2:#A87F22;
  --danger:#F0705E;
  --ok:#5CCB9A;
  --holo:linear-gradient(105deg,#FF9EC4 0%,#FFD97A 24%,#96EFC8 48%,#8FD0FF 72%,#C7A9FF 100%);
  --zip-1:#8A94A4;
  --zip-2:#414A58;
  --step-1:#FF9EC4;
  --step-2:#FFD97A;
  --step-3:#8FD0FF;
  --step-4:#C7A9FF;
  --r:14px;
  --binder-pad:10px;
  --spine-w:26px;
  --r-sm:9px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.75);
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Archivo",var(--sans);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --zoom:1;
}


html[data-theme="light"]{
  /* Native controls — the popup a <select> opens, scrollbars, spinners — are
     painted by the browser, not by us. Without this they follow the operating
     system, so anyone on a dark OS opened a black dropdown on a white page and
     could not read a word of it until they hovered a row. */
  color-scheme:only light;
  --desk:#EFEFEA;
  --lede:#3A4250;
  --bar-bg:rgba(255,255,255,.86);
  --desk-hi:#FFFFFF;
  --panel:#FFFFFF;
  --panel-2:#F4F4EF;
  --page:#E7E7E0;          /* binder sheet */
  --page-2:#DEDED6;
  --pocket:#D3D3CA;        /* empty pocket well */
  --seam:#B9B9AE;
  --edge:rgba(20,24,33,.12);
  --edge-2:rgba(20,24,33,.24);
  --text:#171A20;
  --muted:#525A67;
  --faint:#7C8593;
  --brass:#9A6F0C;
  --brass-2:#7A5606;
  --danger:#B23B29;
  --ok:#1F7A54;
  --zip-1:#9AA3B0;
  --zip-2:#6A7381;
  --shadow:0 20px 46px -22px rgba(20,24,33,.35);
}
html[data-theme="light"] body::before{
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(154,111,12,.10), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(90,120,190,.10), transparent 60%);
}
/* The one place a token swap isn't enough: the holo gradient is designed to sit
   on a dark surface and goes muddy on paper. */
html[data-theme="light"] .btn-primary{color:#1B1206}
html[data-theme="light"] .sheet.cover{
  background:repeating-linear-gradient(135deg,#DEDED6 0 6px,#E4E4DC 6px 12px);
}
html[data-theme="light"] .pocket.filled{background:#C9C9BF}
html[data-theme="light"] .foil{mix-blend-mode:multiply;opacity:.42}
html[data-theme="light"] .rev-mark,html[data-theme="light"] .print-mark,
html[data-theme="light"] .need-tag{
  background:rgba(255,255,255,.94);color:#3B2E66;
}
/* The step accents are drawn from the holo palette, which is tuned for a dark
   background — pale yellow on white is unreadable. Darkened for light mode,
   keeping the same hue so the numbering still reads as one family. */
html[data-theme="light"]{
  --step-1:#B0295F;
  --step-2:#8A5A00;
  --step-3:#155E96;
  --step-4:#5B3A9E;
}
html[data-theme="light"] .rev-inline{color:#5B44A8}
html[data-theme="light"] .af-verdict{color:#3E4653}
html[data-theme="light"] .af-verdict.ok{border-color:rgba(20,120,80,.4);background:rgba(92,203,154,.14);color:#1E5B41}
html[data-theme="light"] .af-verdict.ok b{color:#12633F}
html[data-theme="light"] .af-verdict.warn{color:#7A2E20}
html[data-theme="light"] .sleeve-note{color:#6A5312}
html[data-theme="light"] .pocket .yank{background:rgba(255,255,255,.9);color:#333}
html[data-theme="light"] .pocket .have{background:rgba(255,255,255,.9)}
html[data-theme="light"] .cl-list li,html[data-theme="light"] .miss-body span{color:var(--muted)}
html[data-theme="light"] .need-tag{color:var(--brass)}
html[data-theme="light"] .no-art{
  background:repeating-linear-gradient(135deg,rgba(20,24,33,.05) 0 6px,transparent 6px 12px);
}
html[data-theme="light"] .toast,html[data-theme="light"] .menu-hint,
html[data-theme="light"] .export-reminder,
html[data-theme="light"] .placing-banner{background:rgba(255,255,255,.97)}
html[data-theme="light"] .modal-bg{background:rgba(60,62,58,.5)}
html[data-theme="light"] .res-shot{background:#DCDCD3}
html[data-theme="light"] .spine{
  background:linear-gradient(90deg,rgba(20,24,33,.34) 0%,rgba(20,24,33,.12) 26%,
    rgba(255,255,255,.5) 50%,rgba(20,24,33,.12) 74%,rgba(20,24,33,.34) 100%);
}
html[data-theme="light"] .spine::before,html[data-theme="light"] .spine::after{
  background:repeating-linear-gradient(180deg,rgba(20,24,33,.3) 0 4px,transparent 4px 10px);
}
/* Firefox can keep native fields and select popups tied to the operating-system
   theme even after the page itself changes scheme. `only light` prevents that
   automatic darkening; explicit field and option colours are the fallback for
   native controls that do not fully inherit color-scheme. */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{color-scheme:only light}
html[data-theme="light"] .input,
html[data-theme="light"] .input:focus{
  background-color:#FFFFFF !important;color:#171A20;-webkit-text-fill-color:#171A20;
}
html[data-theme="light"] select.input option{
  color-scheme:only light;background:#FFFFFF !important;color:#171A20 !important;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--desk);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(216,169,60,.07), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(120,150,220,.06), transparent 60%);
}
figure,figcaption,dl,dd,h1,h2,h3,h4,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:4px}
.hidden{display:none !important}
[hidden]{display:none !important}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shared controls ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:11px 18px;border-radius:999px;border:1px solid var(--edge-2);
  background:var(--panel-2);color:var(--text);font-weight:600;font-size:14px;
  transition:background .18s,border-color .18s,transform .18s,opacity .18s;
}
.btn:hover{background:var(--panel-2);border-color:var(--edge-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn-ghost{background:transparent;border-color:var(--edge)}
.btn-ghost:hover{background:var(--panel-2)}
.btn-sm{padding:7px 13px;font-size:13px}
.btn-danger:hover{border-color:rgba(240,112,94,.6);color:var(--danger)}
/* A destructive confirmation should not wear the same inviting gradient as
   every other primary action. */
.btn-primary.btn-danger{
  background:linear-gradient(180deg,#F58272,#D2493A);
  background-size:100% 100%;
  color:#22100C;
  box-shadow:0 10px 30px -12px rgba(240,112,94,.55), inset 0 0 0 1px rgba(255,255,255,.28);
}
.btn-primary.btn-danger:hover{
  background:linear-gradient(180deg,#F79486,#DC5343);
  box-shadow:0 14px 40px -12px rgba(240,112,94,.7), inset 0 0 0 1px rgba(255,255,255,.4);
}

/* the one holo moment */
.btn-primary{
  position:relative;border:0;padding:15px 28px;font-size:15px;font-weight:700;
  color:#14181f;background:var(--holo);background-size:220% 100%;
  background-position:0% 50%;
  box-shadow:0 10px 30px -12px rgba(255,190,120,.55), inset 0 0 0 1px rgba(255,255,255,.4);
  transition:background-position .7s cubic-bezier(.22,1,.36,1),transform .18s,box-shadow .3s;
  letter-spacing:-.01em;
}
.btn-primary:hover{
  background:var(--holo);background-size:220% 100%;background-position:100% 50%;
  box-shadow:0 14px 40px -12px rgba(255,190,120,.7), inset 0 0 0 1px rgba(255,255,255,.55)
}
.btn-primary:active{transform:translateY(1px)}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.input,select.input{
  width:100%;padding:10px 12px;border-radius:10px;background:var(--desk-hi);
  border:1px solid var(--edge);color:var(--text);transition:border-color .16s,background .16s;
}
.input:focus{outline:none;border-color:var(--brass);background-color:var(--desk-hi)}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}

/* ============================================================
   BINDER MATERIAL — used by hero, wizard preview and app
   ============================================================ */
.binder{
  position:relative;display:flex;align-items:stretch;
  border-radius:16px;
  background:linear-gradient(168deg,#2C3341,#1A1F28 70%);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.07);
  padding:var(--binder-pad);gap:0;
}
.binder::before{ /* zip tape running round the cover */
  content:"";position:absolute;inset:4px;border-radius:13px;pointer-events:none;opacity:.55;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 5px) top left/100% 2px no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 5px) bottom left/100% 2px no-repeat,
    repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0 2px,transparent 2px 5px) top left/2px 100% no-repeat,
    repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0 2px,transparent 2px 5px) top right/2px 100% no-repeat;
}
.binder::after{ /* Exo-Tec sheen */
  content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.055) 46%,rgba(255,255,255,.01) 55%,transparent 66%);
}
.zip-pull{ /* the slider sitting on the zip tape */
  position:absolute;right:0;bottom:22px;width:12px;height:28px;border-radius:3px;
  background:linear-gradient(160deg,#B8C1CD,#5F6979 62%,#444D5B);
  box-shadow:0 3px 9px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.6);
  pointer-events:none;z-index:4;
}
.zip-pull::after{
  content:"";position:absolute;left:3px;top:-12px;width:6px;height:14px;
  border:2px solid #8A94A4;border-bottom:0;border-radius:4px 4px 0 0;
}
.sheet{
  flex:1 1 0;min-width:0;position:relative;
  background:linear-gradient(158deg,var(--page),var(--page-2));
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;padding:12px;
  display:flex;flex-direction:column;gap:9px;
  backface-visibility:hidden;
}
.sheet.left{border-top-right-radius:3px;border-bottom-right-radius:3px}
.sheet.right{border-top-left-radius:3px;border-bottom-left-radius:3px}
.sheet.cover{
  background:repeating-linear-gradient(135deg,#171b23 0 6px,#191e26 6px 12px);
  border-color:rgba(255,255,255,.04);
  align-items:center;justify-content:center;gap:6px;
}
.sheet.cover .sheet-num{opacity:.55}
.sheet.cover small{font-family:var(--sans);font-size:11.5px;color:var(--faint);opacity:.7;
  max-width:22ch;text-align:center;line-height:1.6}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:16px}
.sheet-num{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sheet-count{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
/* Tick off a whole page without opening anything. Sits in the page header
   because that is where you already look to see how full the page is. */
.page-own{
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;margin-right:9px;
  padding:3px 9px;border-radius:999px;border:1px solid var(--edge);
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);transition:border-color .16s,color .16s,background .16s;
}
.page-own:hover{border-color:var(--brass);color:var(--brass);background:rgba(216,169,60,.1)}
.page-own.has-need{border-color:rgba(216,169,60,.5);color:var(--brass)}
.share-page-status{
  display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;
  border:1px solid var(--edge);font-family:var(--sans);font-size:10px;font-weight:650;
  color:var(--muted);background:rgba(255,255,255,.035)
}
.share-page-status.has-need{border-color:rgba(216,169,60,.5);color:var(--brass)}
.pockets{
  display:grid;gap:var(--pgap,8px);
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  flex:1;
}

/* stitched spine — Vault X® binders are bound, not ringed */
.spine{
  flex:0 0 var(--spine-w);position:relative;border-radius:2px;
  background:linear-gradient(90deg,
    rgba(0,0,0,.72) 0%, rgba(0,0,0,.32) 26%,
    rgba(255,255,255,.09) 50%,
    rgba(0,0,0,.32) 74%, rgba(0,0,0,.72) 100%);
  box-shadow:inset 1px 0 0 rgba(0,0,0,.6), inset -1px 0 0 rgba(0,0,0,.6);
}
.spine::before,.spine::after{
  content:"";position:absolute;top:14px;bottom:14px;width:1px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.34) 0 4px,transparent 4px 10px);
}
.spine::before{left:6px}
.spine::after{right:6px}

/* ---------- pockets ---------- */
.pocket{
  position:relative;aspect-ratio:63/88;border-radius:5px;
  background:var(--pocket);
  border:1px solid var(--seam);
  display:block;width:100%;overflow:hidden;
  transition:border-color .15s,box-shadow .15s,transform .15s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -6px 12px -8px rgba(0,0,0,.9);
}
.pocket::before{ /* pocket lip */
  content:"";position:absolute;left:6%;right:6%;top:4px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
.deep .pocket,.double .pocket{border-width:2px;border-radius:7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -8px 14px -8px rgba(0,0,0,.95), 0 1px 0 rgba(0,0,0,.4)}
.deep .pockets,.double .pockets{--pgap:11px}
.toploader .pocket{border-width:3px;border-radius:8px;aspect-ratio:74/104;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), inset 0 -10px 18px -8px rgba(0,0,0,1), 0 2px 0 rgba(0,0,0,.5)}
.toploader .pockets{--pgap:14px}

.pocket img{width:100%;height:100%;object-fit:cover;display:block;border-radius:4px}
.pocket .place-no{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.16);
  transition:color .15s;
}
.pocket.filled .place-no{display:none}
.pocket:hover{border-color:rgba(255,255,255,.3)}
.pocket:hover .place-no{color:rgba(255,255,255,.34)}
.pocket.drop-target{
  border-color:var(--brass);box-shadow:0 0 0 3px rgba(216,169,60,.25), inset 0 0 24px rgba(216,169,60,.14);
  transform:scale(1.03);
}
.pocket.can-place{border-color:rgba(216,169,60,.45);border-style:dashed}
.pocket.filled{border-color:rgba(255,255,255,.14);background:#0d1016}
/* A pocket you have reserved for a card you do not own yet: the artwork is
   drained of colour and the border goes dashed, so a page of placeholders
   reads as "still to find" at a glance rather than as a filled page. */
.pocket.need img{filter:grayscale(1) contrast(.72) brightness(.62)}
.pocket.need{border-style:dashed;border-color:rgba(216,169,60,.55)}
.pocket.need::after{
  content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(216,169,60,.07) 0 6px,transparent 6px 12px);
}
.need-tag{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.1em;padding:3px 7px;border-radius:4px;
  background:rgba(20,24,33,.86);border:1px solid rgba(216,169,60,.7);color:var(--brass);
  pointer-events:none;z-index:2;
}
/* ------------------------------------------------------------------
   Reverse holos

   A flat scan can't be turned into a real foil, but the thing that makes
   a reverse holo recognisable across a table is the rainbow sheen over
   everything except the artwork window. A blended gradient plus a fine
   diagonal texture gets close enough to read at a glance, and the marker
   underneath carries the meaning at sizes where the sheen is too subtle.
   ------------------------------------------------------------------ */
.pocket.rev{border-color:rgba(199,169,255,.55)}
.pocket.rev.filled{box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(199,169,255,.18)}

.foil{
  position:absolute;inset:0;border-radius:4px;pointer-events:none;z-index:1;
  background-image:linear-gradient(112deg,
      #FF6BB0 0%, #FFD24F 16%, #5CF0BC 32%, #4FC0FF 48%,
      #C08DFF 64%, #FF8FC4 80%, #FFD97A 100%);
  background-size:230% 230%;
  background-position:0% 50%;
  mix-blend-mode:overlay;
  opacity:.58;
  /* A reverse holo foils everything except the artwork window, so mask the
     illustration box back out. Without this the whole card washes pale and
     stops looking like a card at all. */
  -webkit-mask-image:radial-gradient(ellipse 46% 27% at 50% 33%, transparent 62%, #000 100%);
  mask-image:radial-gradient(ellipse 46% 27% at 50% 33%, transparent 62%, #000 100%);
  transition:opacity .25s ease, background-position 1.1s cubic-bezier(.22,1,.36,1);
}
/* The fine diagonal texture that catches the light on a real one. */
.foil::after{
  content:"";position:absolute;inset:0;border-radius:4px;
  background-image:repeating-linear-gradient(102deg,
    rgba(255,255,255,.30) 0 1.5px, rgba(255,255,255,0) 1.5px 5px);
  mix-blend-mode:soft-light;
}
.pocket.rev:hover .foil{opacity:.82;background-position:100% 50%}

/* Shown only when a card exists in more than one non-reverse printing, so you
   can tell the non-holo from the holo in adjacent pockets. */
.print-mark{
  position:absolute;left:50%;bottom:5px;transform:translateX(-50%);z-index:3;
  pointer-events:none;padding:2.5px 7px;border-radius:999px;
  background:rgba(16,18,26,.88);border:1px solid var(--edge-2);
  color:var(--muted);backdrop-filter:blur(3px);
  font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.06em;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
@container pocket (max-width: 78px){
  .print-mark{font-size:7px;padding:2px 5px;letter-spacing:.06em}
}

.rev-mark{
  position:absolute;left:50%;bottom:5px;transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:4px;pointer-events:none;
  padding:2.5px 7px 2.5px 5px;border-radius:999px;
  background:rgba(16,12,26,.86);border:1px solid rgba(199,169,255,.75);
  color:#DCC9FF;backdrop-filter:blur(3px);
  font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.06em;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.rev-mark svg{width:9px;height:9px;flex:none}
/* Below roughly 78px of pocket width the wordmark stops being legible, so the
   icon carries it alone. */
@container pocket (max-width: 78px){
  .rev-mark span{display:none}
  .rev-mark{padding:3px;gap:0}
}
.pocket{container-type:inline-size;container-name:pocket}
.pocket.need .rev-mark{bottom:5px}
.pocket .have{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:rgba(10,13,18,.85);border:1px solid var(--edge-2);color:var(--muted);
  display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);z-index:3;
}
.pocket.filled:hover .have,.pocket.filled:focus-within .have{display:flex}
.pocket .have:hover{border-color:var(--brass);color:var(--brass)}
.pocket.need .have{display:flex;border-color:rgba(216,169,60,.6);color:var(--brass)}
.pocket.flash{animation:pocketFlash 1.5s ease-out}
@keyframes pocketFlash{
  0%,100%{box-shadow:0 0 0 0 rgba(216,169,60,0)}
  15%{box-shadow:0 0 0 4px rgba(216,169,60,.65)}
  60%{box-shadow:0 0 0 4px rgba(216,169,60,.35)}
}
#missingBtn .count{
  font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:999px;
  background:var(--panel-2);color:var(--muted);
}
#missingBtn.has-missing{border-color:rgba(216,169,60,.55);color:var(--brass)}
#missingBtn.has-missing .count{background:var(--brass);color:#14181f;font-weight:700}

.pocket .yank{
  position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;
  background:rgba(10,13,18,.85);border:1px solid var(--edge-2);color:#fff;
  display:none;align-items:center;justify-content:center;font-size:13px;line-height:1;
  backdrop-filter:blur(4px);
}
.pocket.filled:hover .yank,.pocket.filled:focus-within .yank{display:flex}
.pocket .yank:hover{background:var(--danger);border-color:var(--danger);color:#12161c}

/* interactive sizing in app */
#app .pocket{cursor:pointer}
#app .pocket.filled{cursor:grab}
#app .pocket.filled:active{cursor:grabbing}

/* ============================================================
   LANDING
   ============================================================ */
.wrap{position:relative;z-index:1;max-width:1340px;margin:0 auto;padding:0 28px}
.topbar{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:22px 0;
}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;
  font-size:15px;letter-spacing:-.01em;font-stretch:105%}
.brand .mark{
  width:26px;height:26px;border-radius:7px;background:var(--holo);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);flex:none;
  position:relative;
}
.brand .mark::after{content:"";position:absolute;inset:6px 6px auto 6px;height:1.5px;background:rgba(20,24,33,.65);border-radius:2px;
  box-shadow:0 4px 0 rgba(20,24,33,.65),0 8px 0 rgba(20,24,33,.65)}
.brand small{display:block;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase}

.hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr);gap:52px;align-items:center;
  padding:26px 0 66px}
.hero h1{
  font-family:var(--display);font-weight:800;font-stretch:114%;
  font-size:clamp(46px,6.6vw,86px);line-height:.93;letter-spacing:-.042em;margin:0;
  text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--brass)}
.hero p.lede{color:var(--lede);font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:34ch;margin:24px 0 0}
/* Returning visitors were missing a small ghost button in the corner, so the
   saved binder now leads the page: named, with its own artwork and progress,
   and the primary action. Starting fresh becomes the secondary choice. */
.resume-card{
  margin-top:32px;padding:22px 24px 24px;border-radius:18px;
  border:1px solid rgba(216,169,60,.4);
  background:linear-gradient(180deg,rgba(216,169,60,.09),rgba(216,169,60,.03));
  box-shadow:0 20px 50px -30px rgba(216,169,60,.55);
  max-width:560px;
}
.resume-card .eyebrow{color:var(--brass)}
.resume-name{
  font-family:var(--display);font-weight:800;font-stretch:106%;
  font-size:clamp(24px,2.6vw,32px);line-height:1.05;letter-spacing:-.03em;
  margin:8px 0 5px;overflow-wrap:anywhere;
}
.resume-meta{color:var(--muted);font-size:14px;margin:0 0 14px}
.resume-strip{display:flex;gap:6px;margin-bottom:14px;min-height:0}
.resume-strip img{width:38px;aspect-ratio:63/88;object-fit:cover;border-radius:4px;
  border:1px solid var(--edge-2);background:var(--pocket)}
.resume-strip .more{align-self:center;font-family:var(--sans);font-size:12px;color:var(--faint);
  margin-left:2px}
.resume-progress{height:6px;margin-bottom:18px}
.resume-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.resume-actions .btn-primary{padding:14px 26px;font-size:15px}
.resume-export-note{
  margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--edge);
  color:var(--muted);font-family:var(--sans);font-size:13.5px;font-weight:500;line-height:1.55;
}

.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:center;margin-top:36px}
/* When a saved binder is showing, it has to be visible without scrolling —
   that was the whole problem. The headline shrinks and the lede tightens to
   make room, and creating a new binder becomes the quieter path. */
.hero.has-resume h1{font-size:clamp(34px,4.1vw,54px)}
.hero.has-resume p.lede{font-size:16px;margin-top:16px;max-width:46ch}
.hero.has-resume .resume-card{margin-top:24px}
.hero.has-resume .cta-row{display:none}
.hero.has-resume .note{text-align:left;margin:14px 0 0}
.hero .cta-row .btn-primary{padding:18px 40px;font-size:16px;line-height:1;text-align:center}
.hero .note{
  width:fit-content;max-width:520px;margin:16px auto 0;padding:9px 13px;
  border:1px solid var(--edge);border-radius:10px;background:var(--panel);
  font-family:var(--sans);font-size:14.5px;font-weight:500;line-height:1.55;
  color:var(--muted);text-align:center;
}

.hero-stage{position:relative;perspective:2200px}
.hero-stage::after{ /* light pooling under the binder */
  content:"";position:absolute;left:6%;right:6%;bottom:-6%;height:34%;z-index:-1;
  background:radial-gradient(60% 100% at 50% 50%,rgba(216,169,60,.16),transparent 72%);
  filter:blur(28px);
}
.hero-stage .binder{transform:rotateY(-9deg) rotateX(3deg) scale(1.04);transform-origin:center}
.hero-stage .pockets{--pgap:8px}
.hero-cap{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero-cap div{font-family:var(--sans);font-size:12.5px;color:var(--faint)}
.hero-cap b{display:block;font-family:var(--display);font-size:16px;font-weight:700;color:var(--text);
  letter-spacing:-.015em;margin-bottom:2px}
.hero-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:19px}
.hero-more-card{
  position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;
  align-items:center;padding:14px 15px;border:1px solid var(--edge);border-radius:13px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 8%,var(--panel)),var(--panel));
  box-shadow:0 14px 34px -28px var(--tone)
}
.hero-more-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--tone)}
.hero-more-card svg{width:25px;height:25px;color:var(--tone);flex:none}
.hero-more-card b{display:block;font-family:var(--display);font-size:15px;line-height:1.2;
  letter-spacing:-.015em;color:var(--text);margin-bottom:4px}
.hero-more-card span{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}

/* ---- the three steps ---- */
.steps{border-top:1px solid var(--edge);padding:64px 0 20px}
.steps-head{
  font-family:var(--display);font-weight:800;font-stretch:110%;
  font-size:clamp(22px,2.4vw,30px);line-height:1;letter-spacing:-.03em;
  color:var(--text);margin-bottom:34px;
}
.steps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 52px}
.step{position:relative;padding-top:22px;border-top:3px solid var(--tone)}
.step .num{
  font-family:var(--display);font-weight:900;font-stretch:120%;
  font-size:clamp(30px,3vw,42px);line-height:1;letter-spacing:-.05em;color:var(--tone);
  display:block;margin-bottom:14px;
}
.step h3{
  font-family:var(--display);font-weight:800;font-stretch:112%;
  font-size:clamp(25px,2.4vw,34px);line-height:1;letter-spacing:-.032em;
  margin:0 0 14px;text-wrap:balance;
}
.step p{color:var(--muted);font-size:16px;line-height:1.55;margin:0;max-width:44ch}
.step p .mono{color:var(--tone);font-size:14.5px}
footer.site{padding:44px 0 60px;margin-top:56px;border-top:1px solid var(--edge);
  color:var(--faint);font-size:12.5px;display:flex;justify-content:space-between;
  align-items:flex-start;gap:32px;flex-wrap:wrap}
footer.site .foot-main{max-width:74ch;display:grid;gap:9px}
footer.site p{margin:0;line-height:1.6}
footer.site b{color:var(--muted);font-weight:600}
footer.site a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
footer.site a:hover{color:var(--brass)}
footer.site .foot-meta{display:grid;gap:7px;justify-items:end;text-align:right;flex:none}

/* Standalone information pages keep the same visual language without loading
   the application runtime or touching binder data stored in the browser. */
.legal-page{min-height:100%;position:relative;z-index:1}
.legal-page .topbar{padding-top:28px}
.legal-brand{text-decoration:none;width:max-content}
.legal-home{margin-left:auto}
.legal-shell{width:min(900px,calc(100% - 40px));margin:0 auto;padding:70px 0 24px}
.legal-hero{padding-bottom:34px;border-bottom:1px solid var(--edge)}
.legal-hero h1{font-family:var(--display);font-size:clamp(38px,7vw,72px);line-height:.95;
  letter-spacing:-.045em;margin:10px 0 18px}
.legal-hero p{max-width:66ch;color:var(--lede);font-size:17px;line-height:1.65}
.legal-content{display:grid;gap:34px;padding:42px 0 28px}
.legal-section{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:30px;
  padding-bottom:34px;border-bottom:1px solid var(--edge)}
.legal-section h2{font-family:var(--display);font-size:23px;line-height:1.1;letter-spacing:-.025em}
.legal-copy{display:grid;gap:13px;color:var(--muted);font-size:15.5px;line-height:1.7}
.legal-copy ul{margin:0;padding-left:20px;display:grid;gap:9px}
.legal-copy a{color:var(--brass);text-underline-offset:3px}
.legal-note{padding:15px 17px;border:1px solid rgba(216,169,60,.38);border-radius:12px;
  background:rgba(216,169,60,.07);color:var(--lede)}

/* What's new: a quiet link that grows a dot when there is something unread */
.whats-new{
  display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--edge);background:var(--panel);font-size:12px;color:var(--muted);
  transition:border-color .16s,color .16s,background .16s;
}
.whats-new:hover{border-color:var(--brass);color:var(--brass)}
.whats-new .mono{font-size:11px;color:var(--faint)}
.whats-new:hover .mono{color:var(--brass)}
.whats-new .dot,.whats-new-top .dot{
  width:7px;height:7px;border-radius:50%;background:var(--brass);flex:none;
  box-shadow:0 0 0 3px rgba(216,169,60,.22);
}
.whats-new-top .dot{margin-left:2px}

/* Navigation. One component, used in the landing header and the binder bar,
   so the same actions live in the same order wherever you are. */
.nav{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;
  border:1px solid var(--edge);background:var(--panel);flex-wrap:wrap}
.nav-app{padding:3px;background:transparent;border-color:transparent}
.nav-item{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--muted);border:1px solid transparent;
  transition:background .16s,color .16s,border-color .16s;white-space:nowrap;
}
.nav-item svg{width:15px;height:15px;flex:none}
.nav-item:hover{background:var(--panel-2);color:var(--text)}
.nav-item[hidden]{display:none}
.nav-primary{background:var(--holo);background-size:200% 100%;color:#14181f;font-weight:700}
.nav-primary:hover{background:var(--holo);background-size:200% 100%;background-position:100% 50%;color:#14181f}
.release-anchor{position:relative;display:inline-flex}

/* Homepage binder switcher. Both "Open my binders" buttons use this same
   anchored menu, so a collection behaves identically from either entry point. */
.binder-picker{
  position:fixed;z-index:88;width:min(430px,calc(100vw - 28px));max-height:min(620px,calc(100dvh - 28px));
  overflow:auto;padding:8px;border-radius:16px;background:var(--panel);border:1px solid var(--edge-2);
  box-shadow:0 28px 66px -24px rgba(0,0,0,.88);animation:hintIn .22s cubic-bezier(.22,1,.36,1)
}
.binder-picker-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 11px 9px}
.binder-picker-head b{font-family:var(--display);font-size:16px;color:var(--text)}
.binder-picker-head span{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.binder-picker-list{display:grid;gap:6px}
.binder-picker-row{display:flex;align-items:stretch;gap:6px}
.binder-picker-open{
  flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;
  padding:11px 12px;border-radius:11px;border:1px solid transparent;text-align:left;color:var(--muted);
  transition:background .15s,border-color .15s,color .15s
}
.binder-picker-open:hover{background:var(--desk-hi);border-color:var(--edge);color:var(--text)}
.binder-picker-row.active .binder-picker-open{background:var(--desk-hi);border-color:rgba(216,169,60,.5);color:var(--text)}
.binder-picker-copy{min-width:0}
.binder-picker-copy b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:13.5px;margin-bottom:3px}
.binder-picker-copy span{display:block;font-size:11.5px;color:var(--faint);line-height:1.35}
.binder-picker-thumbs{display:flex;justify-content:flex-start;min-width:60px}
.binder-picker-thumbs img,.binder-picker-thumbs .binder-picker-empty{
  display:block;width:25px;height:35px;object-fit:cover;border-radius:3px;border:1px solid var(--edge-2);background:var(--pocket);
  box-shadow:-4px 0 8px rgba(0,0,0,.3)
}
.binder-picker-thumbs img+img{margin-left:-8px}
.binder-picker-thumbs .binder-picker-empty{width:58px;display:grid;place-items:center;font-family:var(--mono);font-size:9px;color:var(--faint)}
.binder-picker-delete{flex:none;width:40px;border-radius:11px;color:var(--faint);transition:background .15s,color .15s}
.binder-picker-delete:hover{background:rgba(240,112,94,.12);color:var(--danger)}
.binder-picker-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:9px 10px 4px;border-top:1px solid var(--edge)}
.binder-picker-foot p{margin:0;font-size:11.5px;line-height:1.4;color:var(--faint)}
.binder-picker-full{padding:10px 12px;margin-top:8px;border-radius:10px;background:rgba(216,169,60,.08);border:1px solid rgba(216,169,60,.3);font-size:12px;line-height:1.5;color:var(--muted)}

/* Persistent backup pointer. It deliberately has no release number in its
   preference: people keep seeing it through future updates until they make
   the explicit choice to dismiss it. JS positions the arrow over Export. */
.export-reminder{
  position:fixed;z-index:85;left:14px;top:14px;width:min(390px,calc(100vw - 28px));
  padding:15px 16px;border-radius:14px;background:var(--panel);
  border:1px solid var(--brass);box-shadow:0 24px 54px -22px rgba(0,0,0,.82);
  color:var(--muted);font-size:13.5px;line-height:1.5;visibility:hidden;
}
.export-reminder.ready{visibility:visible;animation:hintIn .34s cubic-bezier(.22,1,.36,1)}
.export-reminder::before{
  content:"";position:absolute;left:calc(var(--export-arrow-x,50%) - 6px);bottom:-7px;
  width:12px;height:12px;transform:rotate(45deg);background:var(--panel);
  border-right:1px solid var(--brass);border-bottom:1px solid var(--brass);
}
.export-reminder b{display:block;color:var(--text);font-family:var(--display);font-size:15px;margin-bottom:3px}
.export-reminder span{display:block}
.export-reminder .btn{position:relative;margin-top:13px;z-index:1}
#exportBtn.backup-pulse{border-color:var(--brass);animation:menuPulse 2s ease-out 3}
/* Currency lives only inside a binder. On the landing page it reads as a
   shopfront, which this is not. */
.cur-wrap{position:relative;display:inline-flex}
.nav-cur .cur-code{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}
.nav-cur .cur-chev{width:11px;height:11px;opacity:.6}
.cur-flag{display:inline-flex;width:17px;height:12px;flex:none}
.flag{width:17px;height:12px;border-radius:2px;display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.28) inset}
.cur-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:80;min-width:212px;
  padding:6px;border-radius:14px;background:var(--panel);border:1px solid var(--edge-2);
  box-shadow:0 22px 48px -20px rgba(0,0,0,.75);animation:hintIn .18s cubic-bezier(.22,1,.36,1);
}
.cur-opt{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:9px;
  font-size:13px;color:var(--muted);transition:background .14s,color .14s;text-align:left;
}
.cur-opt:hover{background:var(--panel-2);color:var(--text)}
.cur-opt.on{color:var(--brass)}
.cur-opt.on .cur-opt-code{color:var(--brass)}
.cur-opt-code{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text);flex:none}
.cur-opt-name{font-size:12.5px;color:var(--faint);margin-left:auto}
.nav-theme .ic-sun{display:none}
html[data-theme="light"] .nav-theme .ic-moon{display:none}
html[data-theme="light"] .nav-theme .ic-sun{display:inline-block}
@media (max-width:900px){
  .nav-hide-sm{display:none}
  .nav-app .nav-item{padding:8px 10px}
  /* The pill stretched full width with its buttons packed to one side. */
  .topbar .nav{width:100%;justify-content:center}
  .topbar{flex-wrap:wrap;gap:10px}
  .brand{flex:1 1 100%}
}
@media (max-width:640px){
  .nav{gap:2px;padding:3px}
  .nav-item{padding:7px 10px;font-size:12px}
  .nav-item .dot{margin-left:0}
}
.whats-new-top[hidden]{display:none}

/* The notes themselves */
.cl-scroll{display:grid;gap:22px;max-height:56vh;overflow:auto;padding-right:6px}
.cl-scroll::-webkit-scrollbar{width:8px}
.cl-scroll::-webkit-scrollbar-thumb{background:var(--panel-2);border-radius:99px}
.cl-entry{padding-left:15px;border-left:2px solid var(--edge)}
.cl-entry.cl-new{border-left-color:var(--brass)}
.cl-entry summary{list-style:none;cursor:pointer;border-radius:9px;padding:7px 8px;margin:-7px -8px 0;
  transition:background .16s}
.cl-entry summary::-webkit-details-marker{display:none}
.cl-entry summary:hover{background:var(--panel-2)}
.cl-summary{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:8px 10px}
.cl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cl-ver{font-size:12px;color:var(--text);font-weight:600}
.cl-date{font-size:11px;color:var(--faint)}
.cl-title{grid-column:1/4;font-family:var(--display);font-size:16px;font-weight:700;
  letter-spacing:-.015em;color:var(--text)}
.cl-chevron{grid-column:4;grid-row:1/3;width:17px;height:17px;color:var(--faint);
  transition:transform .2s cubic-bezier(.22,1,.36,1)}
.cl-entry[open] .cl-chevron{transform:rotate(180deg);color:var(--brass)}
.cl-body{padding-top:12px}
.cl-badge{
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:rgba(216,169,60,.16);
  border:1px solid rgba(216,169,60,.5);color:var(--brass);
}
.cl-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cl-list li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--muted)}
.cl-type{
  flex:none;font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;margin-top:2px;min-width:60px;text-align:center;
}
.cl-added{background:rgba(92,203,154,.14);border:1px solid rgba(92,203,154,.45);color:var(--ok)}
.cl-changed{background:rgba(143,208,255,.12);border:1px solid rgba(143,208,255,.4);color:var(--step-3)}
.cl-fixed{background:rgba(216,169,60,.14);border:1px solid rgba(216,169,60,.45);color:var(--brass)}
.cl-removed{background:rgba(240,112,94,.12);border:1px solid rgba(240,112,94,.4);color:var(--danger)}
footer.site .foot-links{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  padding:3px 0 1px}
footer.site .foot-links .dot{opacity:.45}
footer.site .foot-links a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:1px;color:var(--muted)}
footer.site .foot-links a:hover{color:var(--brass);border-bottom-color:var(--brass)}

/* Contact / support dialog */
.contact-rows{display:grid;gap:10px}
.contact-row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:11px;
  border:1px solid var(--edge);background:var(--desk-hi)}
.contact-row svg{flex:none;color:var(--brass)}
.contact-row .cr-body{flex:1;min-width:0}
.contact-row b{display:block;font-size:11.5px;font-family:var(--sans);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);font-weight:400;margin-bottom:3px}
.contact-row span.val{font-size:14px;color:var(--text);word-break:break-all}
.donation-copy{display:grid;gap:10px;margin:16px 0 0;color:var(--muted);font-size:13.5px;line-height:1.65}
.donation-copy p{margin:0}
.kofi-panel{margin-top:18px;border:1px solid var(--edge-2);border-radius:12px;overflow:hidden;
  background:#F9F9F9;box-shadow:0 18px 44px -28px rgba(0,0,0,.72)}
.kofi-panel iframe{display:block;width:100%;height:712px;padding:4px;border:0;background:#F9F9F9}
.kofi-fallback{margin:10px 2px 0;color:var(--faint);font-size:11.5px;line-height:1.5;text-align:center}
.kofi-fallback a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.kofi-fallback a:hover{color:var(--brass)}
.device-icons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.device-platform{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:92px;padding:13px 8px;border-radius:12px;border:1px solid var(--edge);
  background:var(--desk-hi);color:var(--muted)}
.device-platform svg{display:block;width:36px;height:36px;color:var(--text)}
.device-platform span{font-size:11.5px;font-weight:600;text-align:center;line-height:1.2}
.device-platform.windows svg{color:#4BA9E8}
.device-platform.android svg{color:#74B65A}
@media (max-width:480px){.device-icons{grid-template-columns:repeat(2,minmax(0,1fr))}}
.copy-btn{flex:none;padding:6px 12px;border-radius:999px;border:1px solid var(--edge-2);
  font-size:12px;color:var(--muted);transition:border-color .16s,color .16s}
.copy-btn:hover{border-color:var(--brass);color:var(--brass)}

/* ============================================================
   WIZARD
   ============================================================ */
#wizard{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column}
#wizard .wrap{width:100%;max-width:2000px;padding-inline:clamp(28px,4vw,76px)}
.wiz-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0}
.wiz-steps{display:flex;gap:8px;align-items:center;font-family:var(--sans);font-size:13px;font-weight:650;color:var(--faint)}
.wiz-steps span{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  border:1px solid var(--edge);background:var(--desk-hi);transition:border-color .18s,background .18s,color .18s}
.wiz-steps span.on{color:var(--text);border-color:var(--brass);background:var(--panel);
  box-shadow:0 0 0 1px rgba(216,169,60,.25)}
.wiz-steps span.done{color:var(--brass);border-color:rgba(216,169,60,.3)}
.wiz-body{flex:1;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(370px,.75fr);
  gap:clamp(38px,4vw,76px);align-items:start;padding:clamp(22px,3vh,48px) 0 60px}
.wiz-h{font-family:var(--display);font-weight:800;font-stretch:108%;font-size:clamp(26px,3.4vw,38px);
  line-height:1.03;letter-spacing:-.03em;margin:10px 0 8px}
.wiz-sub{color:var(--muted);margin:0 0 26px;max-width:52ch}

.choice-grid{display:grid;gap:12px}
.choice-grid.two{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
#rangeChoices{grid-template-columns:repeat(2,minmax(0,1fr))}
.choice-section{grid-column:1/-1;margin:8px 0 0;font-family:var(--sans);font-size:12px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.choice-section:first-child{margin-top:0}
.choice{
  display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;
  padding:16px;border-radius:var(--r);border:1px solid var(--edge);
  background:var(--panel);transition:border-color .16s,background .16s,transform .16s;
}
.choice:hover{border-color:var(--edge-2);background:var(--panel-2)}
.choice[aria-pressed="true"]{border-color:var(--brass);background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box;
  box-shadow:0 0 0 1px rgba(216,169,60,.5), 0 10px 30px -18px rgba(216,169,60,.7)}
.choice h4{margin:0 0 4px;font-size:15px;font-weight:650;font-family:var(--display);letter-spacing:-.01em}
.choice p{margin:0;color:var(--muted);font-size:13.5px}
.choice .tag{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--brass);letter-spacing:.07em;text-transform:uppercase}

/* mini grid diagram inside binder choices */
.mini{flex:none;display:grid;gap:2px;width:44px;padding:4px;border-radius:5px;background:var(--pocket);border:1px solid var(--seam)}
.mini i{display:block;aspect-ratio:63/88;background:rgba(255,255,255,.13);border-radius:1.5px}
.choice[aria-pressed="true"] .mini i{background:rgba(216,169,60,.6)}

.builder{display:grid;gap:22px;padding:clamp(20px,2vw,28px);border-radius:var(--r);
  border:1px solid var(--edge);background:var(--panel)}
.preset-row{display:flex;gap:8px;flex-wrap:wrap}
.preset{padding:7px 14px;border-radius:999px;border:1px solid var(--edge);background:var(--desk-hi);
  font-size:13px;color:var(--muted);transition:border-color .16s,color .16s,background .16s}
.preset:hover{border-color:var(--edge-2);color:var(--text)}
.preset[aria-pressed="true"]{border-color:var(--brass);color:var(--brass);background:rgba(216,169,60,.1)}
.builder-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:18px}
.number-stepper{display:grid;grid-template-columns:52px minmax(68px,1fr) 52px;align-items:stretch;margin-top:7px}
.number-stepper .input{height:52px;min-width:0;border-radius:0;text-align:center;font-family:var(--mono);font-size:16px;font-weight:600}
.number-stepper .input::-webkit-inner-spin-button,.number-stepper .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.number-stepper .input{-moz-appearance:textfield}
.stepper-btn{display:grid;place-items:center;min-height:52px;border:1px solid var(--edge-2);background:var(--desk-hi);
  color:var(--text);font-size:25px;font-weight:500;line-height:1;transition:background .15s,border-color .15s,color .15s}
.stepper-btn:first-child{border-radius:10px 0 0 10px;border-right:0}
.stepper-btn:last-child{border-radius:0 10px 10px 0;border-left:0}
.stepper-btn:hover{background:var(--panel-2);border-color:var(--brass);color:var(--brass)}
.stepper-btn:focus-visible{position:relative;z-index:1;outline:2px solid var(--brass);outline-offset:1px}
.builder-out{margin:0;font-family:var(--mono);font-size:13px;color:var(--muted);
  padding:11px 14px;border-radius:10px;background:var(--desk-hi);border:1px solid var(--edge)}
.builder-out b{color:var(--brass);font-size:15px}
.field-head{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin:0 0 10px}
.mini-spread{grid-template-columns:1fr 1fr;gap:2px}
.mini-spread i{aspect-ratio:63/88;background:rgba(255,255,255,.13);border-radius:1.5px}
.mini-spread i.blank{background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 2px,transparent 2px 4px)}
.choice[aria-pressed="true"] .mini-spread i.blank{background:repeating-linear-gradient(135deg,rgba(216,169,60,.3) 0 2px,transparent 2px 4px)}
.sleeve-note{margin:0 0 20px;padding:11px 14px;border-radius:10px;font-size:13px;line-height:1.5;
  border:1px solid rgba(216,169,60,.4);background:rgba(216,169,60,.08);color:#E7D2A2}
.binder-list{display:grid;gap:12px;max-height:min(66vh,700px);overflow:auto;padding-right:8px;
  mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent)}
.binder-list::-webkit-scrollbar{width:8px}
.binder-list::-webkit-scrollbar-thumb{background:var(--panel-2);border-radius:99px}
.spec{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--sans);font-size:12px;color:var(--faint);margin-top:6px}
.spec b{color:var(--muted);font-weight:500}

.wiz-preview{position:sticky;top:24px}
.wiz-preview .binder{transform:scale(.98)}
.preview-meta{margin-top:18px;display:grid;gap:8px}
.preview-meta .row{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;
  padding:9px 12px;background:var(--panel);border:1px solid var(--edge);border-radius:10px}
.preview-meta .row span:first-child{color:var(--muted)}
.preview-meta .row span:last-child{font-family:var(--mono);font-size:12.5px}
.wiz-nav{display:flex;gap:12px;margin-top:28px;align-items:center;flex-wrap:wrap}

/* ============================================================
   APP / BINDER WORKSPACE
   ============================================================ */
#app{position:relative;z-index:1;height:100dvh;display:flex;flex-direction:column}
.app-bar{
  /* Positioned and lifted so the options hint can hang below it. The bar's
     backdrop-filter makes its own stacking context, so without a z-index here
     the hint paints behind the workspace no matter what it sets itself. */
  position:relative;z-index:60;
  display:flex;align-items:center;gap:14px;padding:12px 18px;
  border-bottom:1px solid var(--edge);background:var(--bar-bg);backdrop-filter:blur(12px);
  flex:none;flex-wrap:wrap;
}
.app-bar .title{font-family:var(--display);font-weight:750;font-size:15px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px;min-width:0}
.home-btn{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 7px;border-radius:999px;
  border:1px solid var(--edge);background:var(--panel);font-size:13px;font-weight:600;
  transition:border-color .16s,background .16s;flex:none}
.home-btn:hover{border-color:var(--edge-2);background:var(--panel-2)}
.home-btn .mark{width:20px;height:20px;border-radius:6px;background:var(--holo);flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.app-bar .title .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34vw}
.shared-badge{
  display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;
  border:1px solid rgba(96,205,170,.45);background:rgba(36,177,139,.1);
  color:#73d7ba;font-size:11.5px;font-weight:700;white-space:nowrap
}
.shared-badge svg{width:14px;height:14px;flex:none}
html[data-theme="light"] .shared-badge{color:#14795f;background:rgba(36,177,139,.1);border-color:rgba(20,121,95,.32)}
.chip{
  font-family:var(--sans);font-size:12px;color:var(--muted);padding:4px 10px;border-radius:999px;
  border:1px solid var(--edge);background:var(--panel);white-space:nowrap;
}
.progress-wrap{display:flex;align-items:center;gap:9px;min-width:150px}
.progress{flex:1;height:5px;border-radius:99px;background:var(--panel-2);overflow:hidden;min-width:70px}
.progress i{display:block;height:100%;width:0;background:var(--holo);background-size:200%;transition:width .5s cubic-bezier(.22,1,.36,1)}
.app-bar .spacer{flex:1}

/* One-time pointer at the options menu. New users were not finding it, and
   most of what the app can do lives behind it. Shown once, then never again. */
.menu-hint{
  position:absolute;top:58px;right:14px;z-index:70;width:min(300px,calc(100vw - 28px));
  padding:15px 16px;border-radius:14px;background:var(--panel);
  border:1px solid var(--brass);box-shadow:0 24px 50px -22px #000;
  animation:hintIn .34s cubic-bezier(.22,1,.36,1);
}
.menu-hint::before{
  content:"";position:absolute;top:-7px;right:26px;width:12px;height:12px;
  background:var(--panel);border-left:1px solid var(--brass);border-top:1px solid var(--brass);
  transform:rotate(45deg);
}
.menu-hint p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.menu-hint b{color:var(--text)}
@keyframes hintIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#menuBtn.pulse{border-color:var(--brass);box-shadow:0 0 0 0 rgba(216,169,60,.5);
  animation:menuPulse 2s ease-out 3}
@keyframes menuPulse{
  0%{box-shadow:0 0 0 0 rgba(216,169,60,.45)}
  70%{box-shadow:0 0 0 12px rgba(216,169,60,0)}
  100%{box-shadow:0 0 0 0 rgba(216,169,60,0)}
}

.workspace{position:relative;flex:1;display:grid;grid-template-columns:390px minmax(0,1fr);min-height:0;
  transition:grid-template-columns .3s cubic-bezier(.22,1,.36,1)}
.workspace.rail-collapsed{
  /* Keep a slim, dedicated gutter for the reopen handle. With a zero-width
     column the handle sat on top of the binder's previous-page arrow. */
  grid-template-columns:36px minmax(0,1fr)
}

/* A shared link is a genuinely separate, read-only view. The search panel and
   every binder-mutating control are removed rather than merely disabled; the
   same state is also enforced in app.js before anything can reach storage. */
body.shared-view .workspace{grid-template-columns:minmax(0,1fr)}
body.shared-view .rail,
body.shared-view .rail-collapse,
body.shared-view .rail-toggle,
body.shared-view #menuBtn,
body.shared-view #menuHint,
body.shared-view #exportReminder,
body.shared-view #lockBtn,
body.shared-view #shareBtn,
body.shared-view .undo-pair,
body.shared-view #fillBtn,
body.shared-view #missingBtn,
body.shared-view #valueBtn,
body.shared-view #clearPageBtn,
body.shared-view #clearBinderBtn,
body.shared-view #backdropBtn,
body.shared-view #importBtn,
body.shared-view #exportBtn,
body.shared-view .stage-tools .tool-sep{display:none !important}
body.shared-view .pocket{cursor:pointer}
body.shared-view .stage-tools{gap:8px}
body.fs-mode #exportReminder{display:none !important}

/* ----- search rail ----- */
.rail{
  border-right:1px solid var(--edge);background:var(--panel);
  display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
  transition:opacity .2s,border-color .2s;
}
.workspace.rail-collapsed .rail{opacity:0;border-color:transparent;pointer-events:none}
.rail-collapse{
  position:absolute;z-index:55;left:374px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:31px;height:68px;
  border:1px solid var(--edge-2);border-left:0;border-radius:0 12px 12px 0;
  background:var(--panel);color:var(--muted);box-shadow:8px 0 24px -16px rgba(0,0,0,.8);
  transition:left .3s cubic-bezier(.22,1,.36,1),background .16s,color .16s;
}
.rail-collapse svg{width:16px;height:16px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.rail-collapse:hover{background:var(--panel-2);color:var(--brass)}
.workspace.rail-collapsed .rail-collapse{left:0}
.workspace.rail-collapsed .rail-collapse svg{transform:rotate(180deg)}
.rail-head{padding:14px;display:grid;gap:10px;border-bottom:1px solid var(--edge);flex:none}
.rail-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.search-box{position:relative}
.search-box .input{padding-left:34px}
.search-box svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--faint)}
.rail-hint{font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.55}
.rail-foot{display:grid;gap:10px}
.sizer{display:flex;align-items:center;gap:10px;color:var(--faint);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.sizer input[type=range]{flex:1;min-width:0;accent-color:var(--brass)}
.sizer svg{flex:none}
.rail-tools{display:flex;gap:8px;flex-wrap:wrap}
.results{flex:1;min-height:0;overflow:auto;padding:12px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--card-w,112px),1fr));
  grid-auto-rows:max-content;gap:10px;align-content:start}
.results::-webkit-scrollbar{width:9px}
.results::-webkit-scrollbar-thumb{background:var(--panel-2);border-radius:99px}
.res{
  position:relative;border-radius:7px;overflow:hidden;background:var(--desk-hi);
  border:1px solid var(--edge);cursor:grab;transition:transform .16s,border-color .16s,box-shadow .16s;
}
.res:hover{transform:translateY(-3px);border-color:var(--edge-2);box-shadow:0 10px 24px -14px #000}
.res:active{cursor:grabbing}
.res img{width:100%;aspect-ratio:63/88;object-fit:cover;display:block;background:var(--pocket)}
.res-shot{position:relative;display:block;aspect-ratio:63/88;background:var(--pocket);
  border-radius:6px;overflow:hidden}
.res-shot img{width:100%;height:100%;object-fit:cover;display:block}
.detail-shot{border-radius:9px}
/* Shown when the community database has no scan for a card. It still names the
   card, so the tile stays usable — you can drag it into a pocket regardless. */
.no-art{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:8px;text-align:center;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 6px,transparent 6px 12px);
  border-radius:5px;
}
.no-art b{font-size:11px;font-weight:600;color:var(--muted);line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.no-art span{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.no-art em{font-family:var(--sans);font-size:9.5px;font-weight:600;font-style:normal;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);opacity:.75;margin-top:2px}
.res figcaption{padding:6px 7px 7px;font-size:12px;line-height:1.3}
.res figcaption b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res figcaption span{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.res.selected{border-color:var(--brass);box-shadow:0 0 0 2px rgba(216,169,60,.45)}
.res .owned{position:absolute;top:5px;right:5px;width:16px;height:16px;border-radius:50%;
  background:var(--ok);color:#0f1319;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:700}
.res-state{grid-column:1/-1;color:var(--faint);font-size:13px;text-align:center;padding:34px 12px;line-height:1.6}
.res-state b{display:block;color:var(--muted);font-family:var(--display);font-size:14px;margin-bottom:5px}

/* ----- binder stage ----- */
.stage{
  position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;
  gap:14px;padding:18px;
}
/* Backdrops. Pure CSS so they cost no bandwidth and adapt to the theme.
   Namespaced `backdrop-*` rather than `bg-*`: the picker's own container was
   `.bg-grid`, and so was the cutting-mat backdrop, so choosing it turned the
   whole stage into a CSS grid and threw the layout apart. */
.stage{transition:background .3s ease}
.fs-hud{position:absolute;z-index:25;left:50%;top:18px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:999px;
  border:1px solid var(--edge-2);background:rgba(20,24,33,.88);backdrop-filter:blur(12px);
  box-shadow:0 16px 44px -20px rgba(0,0,0,.9)}
html[data-theme="light"] .fs-hud{background:rgba(255,255,255,.9)}
.fs-page{font-size:11px;color:var(--muted);padding-left:5px;white-space:nowrap}
.stage:fullscreen,.stage.fs-fallback{width:100vw;height:100vh;max-width:none;padding:22px 26px;
  background-color:var(--desk)}
.stage:fullscreen::backdrop{background:var(--desk)}
.stage.fs-fallback{position:fixed;inset:0;z-index:1000}
body.fs-mode{overflow:hidden}
.stage:fullscreen .stage-top,.stage:fullscreen .stage-tools,.stage:fullscreen .pager,
.stage.fs-fallback .stage-top,.stage.fs-fallback .stage-tools,.stage.fs-fallback .pager{display:none}
.stage:fullscreen .stage-mid,.stage.fs-fallback .stage-mid{height:100%;min-height:0;padding-top:46px}
.stage:fullscreen .side-nav,.stage.fs-fallback .side-nav{width:64px;height:140px;background:rgba(20,24,33,.5)}
html[data-theme="light"] .stage:fullscreen .side-nav,
html[data-theme="light"] .stage.fs-fallback .side-nav{background:rgba(255,255,255,.62)}
.stage.backdrop-playmat,.bg-swatch.backdrop-playmat .bg-prev{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 3px, transparent 3px 6px),
    linear-gradient(160deg, #1d2b3a, #16202c);
}
.stage.backdrop-oak,.bg-swatch.backdrop-oak .bg-prev{
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.10) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(255,255,255,.035) 0 1px, transparent 1px 26px),
    linear-gradient(150deg, #5a3d24, #3b2716);
}
.stage.backdrop-slate,.bg-swatch.backdrop-slate .bg-prev{
  background:
    radial-gradient(90% 70% at 30% 10%, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(120deg, rgba(0,0,0,.06) 0 5px, transparent 5px 13px),
    linear-gradient(165deg, #3a4048, #23272d);
}
.stage.backdrop-holo,.bg-swatch.backdrop-holo .bg-prev{
  background:
    repeating-linear-gradient(102deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px),
    linear-gradient(115deg,#3a2340,#243a52 28%,#1f4a44 52%,#3d3358 78%,#432740);
}
.stage.backdrop-grid,.bg-swatch.backdrop-grid .bg-prev{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 1px, transparent 1px 140px),
    linear-gradient(160deg,#1d3a30,#14261f);
}
.stage.backdrop-aurora,.bg-swatch.backdrop-aurora .bg-prev{
  background:
    radial-gradient(70% 55% at 20% 15%, rgba(120,200,255,.18), transparent 60%),
    radial-gradient(60% 50% at 80% 25%, rgba(200,140,255,.16), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(90,240,200,.13), transparent 60%),
    linear-gradient(170deg,#141a2c,#0e1420);
}
.stage.backdrop-carbon,.bg-swatch.backdrop-carbon .bg-prev{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 2px, transparent 2px 5px),
    linear-gradient(160deg,#20242c,#15181e);
}
/* Light mode needs its own textures, not flat colour substitutes. Keeping the
   same layers in the stage and the picker preview also means the swatch is an
   honest preview of what will appear behind the binder. */
html[data-theme="light"] .stage.backdrop-playmat,
html[data-theme="light"] .bg-swatch.backdrop-playmat .bg-prev{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.48), transparent 62%),
    repeating-linear-gradient(45deg, rgba(35,62,82,.075) 0 2px, transparent 2px 5px),
    linear-gradient(160deg,#c6d6e4,#aec3d6);
}
html[data-theme="light"] .stage.backdrop-oak,
html[data-theme="light"] .bg-swatch.backdrop-oak .bg-prev{
  background:
    repeating-linear-gradient(92deg, rgba(73,43,18,.16) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(255,255,255,.18) 0 1px, transparent 1px 26px),
    linear-gradient(150deg,#c9a077,#a97e52);
}
html[data-theme="light"] .stage.backdrop-slate,
html[data-theme="light"] .bg-swatch.backdrop-slate .bg-prev{
  background:
    radial-gradient(90% 70% at 30% 10%, rgba(255,255,255,.34), transparent 60%),
    repeating-linear-gradient(120deg, rgba(55,65,75,.10) 0 4px, transparent 4px 13px),
    linear-gradient(165deg,#cfd4d9,#b3bac1);
}
html[data-theme="light"] .stage.backdrop-holo,
html[data-theme="light"] .bg-swatch.backdrop-holo .bg-prev{
  background:
    repeating-linear-gradient(102deg, rgba(255,255,255,.34) 0 2px, transparent 2px 7px),
    linear-gradient(115deg,#e7cfe4,#cfe0ea 40%,#d3ecdf 70%,#e3d6f0);
}
html[data-theme="light"] .stage.backdrop-grid,
html[data-theme="light"] .bg-swatch.backdrop-grid .bg-prev{
  background:
    repeating-linear-gradient(0deg, rgba(20,40,30,.11) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(20,40,30,.11) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(20,40,30,.22) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(90deg, rgba(20,40,30,.22) 0 1px, transparent 1px 140px),
    linear-gradient(160deg,#bcd6c6,#a4c4b1);
}
html[data-theme="light"] .stage.backdrop-aurora,
html[data-theme="light"] .bg-swatch.backdrop-aurora .bg-prev{
  background:
    radial-gradient(70% 55% at 20% 15%, rgba(61,156,220,.25), transparent 60%),
    radial-gradient(60% 50% at 80% 25%, rgba(154,83,207,.20), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(36,177,139,.19), transparent 60%),
    linear-gradient(170deg,#dfe3f4,#c9d6ee);
}
html[data-theme="light"] .stage.backdrop-carbon,
html[data-theme="light"] .bg-swatch.backdrop-carbon .bg-prev{
  background:
    repeating-linear-gradient(45deg, rgba(53,60,70,.13) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 2px, transparent 2px 5px),
    linear-gradient(160deg,#d5d8de,#bfc4cc);
}

/* ---- prices ---- */
.price-block{margin-top:16px;padding-top:14px;border-top:1px solid var(--edge)}
.price-loading,.price-none{margin:0;font-size:13px;color:var(--muted);line-height:1.55}
.price-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.price-big{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.price-src{font-family:var(--sans);font-size:12px;color:var(--faint)}
.price-rows{gap:5px}
.price-rows div{padding-bottom:4px}
.price-note{margin:12px 0 0;font-size:11.5px;line-height:1.55;color:var(--faint)}
.price-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.price-links a{
  display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;
  border:1px solid var(--edge-2);font-size:12.5px;font-weight:600;color:var(--muted);
  text-decoration:none;transition:border-color .16s,color .16s,background .16s;
}
.price-links a:hover{border-color:var(--brass);color:var(--brass);background:rgba(216,169,60,.08)}
.price-links a:first-child{border-color:var(--brass);color:var(--brass)}

/* ---- binder value ---- */
.cur-row{display:flex;gap:6px;margin:0 0 16px}
.cur-btn{
  padding:7px 14px;border-radius:999px;border:1px solid var(--edge);background:var(--desk-hi);
  font-size:12.5px;font-weight:600;color:var(--muted);transition:border-color .16s,color .16s;
}
.cur-btn:hover{border-color:var(--edge-2);color:var(--text)}
.cur-btn.on{border-color:var(--brass);color:var(--brass);background:rgba(216,169,60,.1)}
.val-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.val-card{
  padding:14px 15px;border-radius:12px;border:1px solid var(--edge);background:var(--desk-hi);
  display:grid;gap:2px;
}
.val-card b{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.val-card span{font-size:12.5px;font-weight:600;color:var(--muted)}
.val-card small{font-size:11px;color:var(--faint)}
.val-total{border-color:rgba(216,169,60,.45);background:rgba(216,169,60,.07)}
.val-total b{color:var(--brass)}
.val-list{display:grid;gap:6px}
.val-row{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:8px 12px;border-radius:9px;background:var(--desk-hi);border:1px solid var(--edge);
}
.val-name{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.val-num{font-size:13px;color:var(--brass);flex:none}

.bg-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.bg-swatch{
  display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:12px;
  border:1px solid var(--edge);background:var(--desk-hi);text-align:left;
  transition:border-color .16s,background .16s;
}
.bg-swatch:hover{border-color:var(--edge-2)}
.bg-swatch.on{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.bg-prev{display:block;height:52px;border-radius:8px;background-color:var(--panel-2)}
.bg-swatch.backdrop-none .bg-prev{background:var(--desk)}
.bg-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.2}
.bg-name small{display:block;font-weight:400;font-size:11px;color:var(--faint);margin-top:2px}

.stage-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.stage-top-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Progress sits where you are already looking. Two segments: cards you own,
   and pockets holding a card you still need. */
.prog{flex:1 1 260px;min-width:200px;max-width:520px;display:grid;gap:6px}
.prog-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.prog-label{font-size:12px;color:var(--muted);line-height:1.3}
.prog-pct{font-size:12px;color:var(--brass);font-weight:600}
.prog-track{
  display:flex;height:8px;border-radius:99px;overflow:hidden;
  background:var(--panel-2);border:1px solid var(--edge);
}
.prog-have{background:var(--holo);background-size:220% 100%;transition:width .45s cubic-bezier(.22,1,.36,1)}
.prog-need{
  background:repeating-linear-gradient(135deg,rgba(216,169,60,.5) 0 4px,rgba(216,169,60,.16) 4px 8px);
  transition:width .45s cubic-bezier(.22,1,.36,1);
}

/* Lock. A mis-tap guard, so it has to be visible without being shouty. */
.lock-btn{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--edge);background:var(--panel);font-size:12.5px;font-weight:600;
  color:var(--muted);transition:border-color .16s,color .16s,background .16s;
}
.lock-btn svg{width:15px;height:15px;flex:none}
.lock-btn .ic-shut{display:none}
.lock-btn:hover{border-color:var(--edge-2);color:var(--text)}
.lock-btn.on{border-color:var(--brass);color:var(--brass);background:rgba(216,169,60,.12)}
.lock-btn.on .ic-open{display:none}
.lock-btn.on .ic-shut{display:inline-block}
.stage.locked .binder{box-shadow:var(--shadow), 0 0 0 2px rgba(216,169,60,.45)}
.stage.locked .pocket{cursor:default}
.stage.locked .pocket:hover{border-color:var(--seam)}
.stage-mid{position:relative;flex:1;min-height:0;display:flex;align-items:stretch}
.stage-scroll{flex:1;min-height:0;min-width:0;overflow:auto;display:grid;place-items:center;padding:2px}
.stage-tools{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.tool-sep{width:1px;height:20px;background:var(--edge)}
.undo-pair{display:flex;gap:6px}

/* toggle switch */
.toggle{display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 7px;border-radius:999px;
  border:1px solid var(--edge);background:var(--panel);font-size:12.5px;color:var(--muted);
  transition:border-color .16s,color .16s}
.toggle:hover{border-color:var(--edge-2);color:var(--text)}
.toggle .knob{width:30px;height:17px;border-radius:999px;background:var(--desk-hi);
  border:1px solid var(--edge-2);position:relative;transition:background .2s,border-color .2s;flex:none}
.toggle .knob::after{content:"";position:absolute;left:2px;top:1.5px;width:12px;height:12px;border-radius:50%;
  background:var(--faint);transition:transform .22s cubic-bezier(.22,1,.36,1),background .2s}
.toggle[aria-checked="true"]{color:var(--text)}
.toggle[aria-checked="true"] .knob{background:rgba(216,169,60,.28);border-color:var(--brass)}
.toggle[aria-checked="true"] .knob::after{transform:translateX(13px);background:var(--brass)}

/* arrows either side of the binder */
.side-nav{
  flex:none;width:52px;height:112px;align-self:center;display:flex;align-items:center;justify-content:center;
  color:var(--muted);border-radius:16px;border:1px solid var(--edge);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.side-nav:hover{background:rgba(216,169,60,.12);color:var(--brass);border-color:rgba(216,169,60,.5)}
.side-nav:active{transform:scale(.97)}
.side-nav[disabled]{opacity:.2;pointer-events:none}
.stage-scroll::-webkit-scrollbar{width:9px;height:9px}
.stage-scroll::-webkit-scrollbar-thumb{background:var(--panel-2);border-radius:99px}
.pager{flex:none}
.stage-inner{position:relative;perspective:3000px;width:var(--stage-w,100%);margin:0 auto;flex:none}
/* The leaf must hinge on the centre of the spine, not on its own edge.
   Its own edge sits half a spine-width away from that centre, so the
   origin is pushed out by exactly that much — otherwise the page lands
   a spine-width off the real page and snaps sideways on hand-off. */
.flip-layer{position:absolute;inset:var(--binder-pad);pointer-events:none;
  transform-style:preserve-3d;z-index:5}
.flipper{position:absolute;top:0;bottom:0;width:calc(50% - var(--spine-w) / 2);
  transform-style:preserve-3d;will-change:transform}
.flipper.fwd{right:0;transform-origin:calc(var(--spine-w) / -2) center}
.flipper.back{left:0;transform-origin:calc(100% + var(--spine-w) / 2) center}
.flipper.solo{left:0;right:0;width:auto}
.flipper .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform-style:preserve-3d;display:flex;border-radius:10px;overflow:hidden}
.flipper .face:not(.rear){transform:rotateY(0deg)}
.flipper .face.rear{transform:rotateY(180deg);opacity:0}
.flipper .sheet{box-shadow:0 40px 80px -34px rgba(0,0,0,.95)}
.face-shade{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:10px;
  background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.16) 55%,rgba(0,0,0,.5))}
.flipper.back .face-shade{background:linear-gradient(270deg,rgba(0,0,0,.62),rgba(0,0,0,.16) 55%,rgba(0,0,0,.5))}

.pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  background:var(--panel);border:1px solid var(--edge);border-radius:999px;
  padding:6px 12px;box-shadow:0 8px 24px -16px rgba(0,0,0,.6);align-self:center}
.pager .nav{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--edge-2);background:var(--panel);
  display:flex;align-items:center;justify-content:center;transition:background .16s,border-color .16s
}
.pager .nav:hover{background:var(--panel-2);border-color:var(--brass);color:var(--brass)}
.pager .nav[disabled]{opacity:.3;pointer-events:none}
.pager .readout{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:170px;text-align:center}
.pager .jump{width:64px;text-align:center;padding:7px 8px}
.zoomer{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12px;color:var(--muted)}
.zoomer input[type=range]{width:110px;accent-color:var(--brass)}

.placing-banner{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:12px;padding:9px 9px 9px 16px;border-radius:999px;
  background:rgba(27,32,41,.94);border:1px solid var(--brass);backdrop-filter:blur(10px);
  box-shadow:0 20px 50px -20px #000;font-size:13.5px;
}
.placing-banner img{width:26px;border-radius:3px}

/* toast */
#toasts{position:fixed;right:18px;bottom:104px;z-index:80;display:flex;flex-direction:column-reverse;
  gap:9px;align-items:flex-end;pointer-events:none}
.toast{
  padding:10px 15px;border-radius:11px;background:rgba(27,32,41,.96);border:1px solid var(--edge-2);
  font-size:13.5px;box-shadow:0 18px 44px -22px #000;animation:pop .3s cubic-bezier(.22,1,.36,1);
  max-width:330px;
}
.toast.warn{border-color:rgba(240,112,94,.6)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* modal */
.modal-bg{position:fixed;inset:0;z-index:90;background:rgba(8,10,14,.72);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:22px}
.modal{
  width:min(560px,100%);max-height:86vh;overflow:auto;background:var(--panel);
  border:1px solid var(--edge-2);border-radius:18px;padding:22px;box-shadow:var(--shadow)
}
.modal h3{font-family:var(--display);font-size:19px;margin:0 0 6px;letter-spacing:-.02em}
.modal .modal-sub{color:var(--muted);font-size:13.5px;margin:0 0 18px}
.share-safety{
  margin:14px 0 0;padding:12px 14px;border-radius:11px;border:1px solid var(--edge);
  background:var(--desk-hi);color:var(--muted);font-size:13px;line-height:1.55
}
.share-safety b{color:var(--text)}
.share-url-row{display:flex;gap:8px}
.share-url-row .input{width:100%;font-size:11.5px}
.share-loading{height:5px;border-radius:999px;overflow:hidden;background:var(--desk-hi);border:1px solid var(--edge)}
.share-loading span{display:block;width:38%;height:100%;border-radius:inherit;background:var(--holo);background-size:220% 100%;animation:shareLoading 1.15s ease-in-out infinite}
@keyframes shareLoading{from{transform:translateX(-105%)}to{transform:translateX(370%)}}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.opt-list{display:grid;gap:10px}
.opt{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:11px;
  border:1px solid var(--edge);background:var(--desk-hi);cursor:pointer;
  transition:border-color .16s,background .16s}
.opt:hover{border-color:var(--edge-2);background:var(--panel-2)}
.opt input{margin:2px 0 0;accent-color:var(--brass);width:15px;height:15px;flex:none}
.opt-btn{width:100%;text-align:left;align-items:center}
.opt-btn svg{flex:none;color:var(--brass)}
.opt-btn:hover{border-color:var(--brass)}
.opt span{font-size:13px;color:var(--muted);line-height:1.45}
.opt b{display:block;color:var(--text);font-weight:600;font-size:13.5px;margin-bottom:2px}
.bug-credit{border:0;padding:0;margin:0;display:grid;gap:9px}
.bug-credit legend{padding:0;margin:0 0 10px;font-size:13.5px;font-weight:650;color:var(--text)}

/* Capacity verdict in the auto-fill dialog */
.af-verdict{
  margin:20px 0 0;padding:13px 15px;border-radius:11px;font-size:13.5px;line-height:1.6;
  border:1px solid var(--edge);background:var(--desk-hi);color:var(--muted);
}
.af-verdict b{color:var(--text)}
.af-verdict.ok{border-color:rgba(92,203,154,.45);background:rgba(92,203,154,.08)}
.af-verdict.ok b{color:var(--ok)}
.af-verdict.warn{border-color:rgba(240,112,94,.5);background:rgba(240,112,94,.08);color:#F1C7BF}
.af-verdict.warn b{color:var(--danger)}

/* Still-to-find list */
.miss-list{display:grid;gap:8px;max-height:46vh;overflow:auto;padding-right:4px}
.miss-list::-webkit-scrollbar{width:8px}
.miss-list::-webkit-scrollbar-thumb{background:var(--panel-2);border-radius:99px}
.miss-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:9px 12px;border-radius:10px;border:1px solid var(--edge);background:var(--desk-hi);
  transition:border-color .16s,background .16s;
}
.miss-row:hover{border-color:var(--brass);background:var(--panel-2)}
.miss-row img{width:30px;aspect-ratio:63/88;object-fit:cover;border-radius:3px;flex:none;
  filter:grayscale(1) brightness(.75)}
.miss-noimg{width:30px;aspect-ratio:63/88;border-radius:3px;background:var(--pocket);flex:none}
.miss-body{flex:1;min-width:0;font-size:13px}
.miss-body b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.miss-body span{font-family:var(--mono);font-size:11px;color:var(--faint)}
.rev-inline{font-family:var(--sans);font-size:10.5px;font-weight:600;color:#C7A9FF;letter-spacing:.04em}
.miss-pos{flex:none;font-size:11px;color:var(--faint)}
.card-detail{display:grid;grid-template-columns:150px 1fr;gap:18px}
.card-detail img{width:100%;border-radius:9px}
.dl{display:grid;gap:7px;margin:0;font-size:13.5px}
.dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--edge);padding-bottom:6px}
.dl dt{color:var(--muted)}
.dl dd{margin:0;font-family:var(--mono);font-size:12.5px;text-align:right}

/* rail toggle for small screens */
.rail-toggle{display:none}
.sheet-grip{display:none}
.filters-toggle{display:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr;gap:44px;padding:14px 0 60px}
  .hero .cta-row{margin-top:28px}
  .wiz-body{grid-template-columns:1fr;gap:34px}
  #rangeChoices{grid-template-columns:1fr}
  .wiz-preview{position:static}
  .steps{padding-top:48px}
  .steps-grid{grid-template-columns:1fr;gap:40px}
  .resume-card{max-width:none}
  .step p{max-width:52ch}
}
@media (max-width:900px){
  .builder-grid{grid-template-columns:1fr}
  .workspace{grid-template-columns:1fr}
  .rail-collapse{display:none}
  /* Bottom sheet. Height is the full travel; how much shows is controlled by
     --sheet-y, which the drag handler writes directly so the sheet tracks the
     finger, then snaps on release. */
  .rail{
    position:fixed;left:0;right:0;bottom:0;top:auto;height:94dvh;z-index:50;
    border-right:0;border-top:1px solid var(--edge-2);border-radius:20px 20px 0 0;
    transform:translateY(var(--sheet-y,100%));
    transition:transform .36s cubic-bezier(.22,1,.36,1);
    box-shadow:0 -22px 60px -22px #000;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .rail.dragging{transition:none}
  /* The grip is the affordance, but the whole header is the drag surface —
     a 40px strip is a fussy target on a phone, and reaching for it is the
     thing that made this feel stiff. Anything that isn't a control drags. */
  .sheet-grip{
    display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;
    padding:10px 0 6px;cursor:grab;touch-action:none;
    -webkit-user-select:none;user-select:none;
  }
  .sheet-grip:active{cursor:grabbing}
  .sheet-grip .bar{width:44px;height:5px;border-radius:99px;background:var(--edge-2);
    transition:background .16s,width .16s}
  .rail.dragging .sheet-grip .bar{background:var(--brass);width:58px}
  .sheet-grip .grip-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--faint);text-align:center}
  .rail-head{padding:0 14px 10px;gap:8px;touch-action:pan-y}
  .rail-head .field label{margin-bottom:1px}

  /* Expansion + set collapse away, so the search box and the cards get the
     height instead. Most searches never touch them. */
  .filters-toggle{
    display:flex;align-items:center;gap:8px;width:100%;padding:8px 2px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--faint);
  }
  .filters-toggle .chev{transition:transform .22s cubic-bezier(.22,1,.36,1)}
  .filters-toggle[aria-expanded="false"] .chev{transform:rotate(-90deg)}
  .rail.filters-off .rail-filters{display:none}
  .rail-toggle{
    display:inline-flex;position:static;align-items:center;gap:8px;
    padding:9px 14px;border-radius:999px;background:var(--holo);color:#14181f;font-weight:700;
    box-shadow:0 14px 34px -14px rgba(255,190,120,.6);
  }
  .placing-banner{bottom:calc(env(safe-area-inset-bottom) + 16px)}
  .sheet-open .rail-toggle{opacity:.45;pointer-events:none}
  .rail-toggle{transition:opacity .24s}
  /* bigger tap targets and thumbnails once the sheet is the main surface */
  .results{padding:10px 12px 26px}
  .rail-foot .rail-hint{display:none}
  .sizer{font-size:10px}
  .side-nav{width:30px;height:64px}

  /* On a phone the binder is the point, so it gets the room. The tools row
     used to wrap to four lines and eat about 40% of the screen; it is now a
     single strip you swipe sideways. */
  .stage{padding:10px 8px;gap:8px}
  .stage-top{gap:8px;align-items:center}
  .prog{flex:1 1 100%;max-width:none;order:-1}
  .stage-top-right{
    width:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    padding:1px 1px 3px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .stage-top-right::-webkit-scrollbar{display:none}
  .stage-top-right > *{flex:0 0 auto}
  /* Keep the two mobile-specific controls immediately visible. The DOM order
     remains unchanged for desktop; only the narrow toolbar is reordered. */
  #animBtn{order:1}
  .stage-top-right .rail-toggle{order:2}
  #spreadChip{order:3}
  #lockBtn{order:4}
  #shareBtn{order:5}
  .stage-mid{min-height:44dvh}

  .stage-tools{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;
    gap:8px;padding:2px 2px 6px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  }
  .stage-tools::-webkit-scrollbar{display:none}
  .stage-tools > *{flex:0 0 auto;scroll-snap-align:start}
  .tool-sep{display:none}

  /* The side arrows already navigate the binder on touch. Hiding this second
     pager saves a full row without changing desktop controls or JS state. */
  .pager{display:none}
  :root{--spine-w:16px;--binder-pad:8px}
  .app-bar .title .name{max-width:44vw}
}
@media (max-width:640px){
  /* the resume card carries this on a phone; the bar button just crowds it */
  #resumeBtn{display:none}
  .app-bar{padding:9px 12px;gap:9px}
  .app-bar .title{font-size:14px}
  /* The bar was wrapping to three rows. The count is now shown by the progress
     bar directly above the binder, so it does not need to be here as well. */
  #barSpec,.progress,.progress-wrap{display:none}
  .app-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .app-bar::-webkit-scrollbar{display:none}
  .app-bar > *{flex:0 0 auto}
  .app-bar .spacer{flex:1 1 auto;min-width:0}
  #menuBtn{padding:7px 12px}
  .anim-text{display:none}
  .lock-btn .lock-text{display:none}
  .lock-btn,.toggle{padding:6px 10px}
  .rail-toggle{padding:7px 11px;font-size:12px}
  /* The two destructive actions live in Binder options on a phone — six
     buttons under the binder costs more height than they are worth. */
  #clearPageBtn,#clearBinderBtn{display:none}
  .progress-wrap{min-width:auto}
  .zoomer,#viewBtn{display:none}
  .wrap{padding:0 16px}
  #wizard .wrap{padding-inline:16px}
  .wiz-top{align-items:flex-start;flex-direction:column}
  .wiz-steps{width:100%;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .wiz-steps::-webkit-scrollbar{display:none}
  .wiz-steps span{flex:0 0 auto;padding:8px 11px;font-size:12px}
  .spine{flex-basis:var(--spine-w)}
  .spine::before{left:4px}
  .spine::after{right:4px}
  .stage{padding:12px}
  .hero-stage .binder{transform:none}
  .hero-cap{gap:18px 24px;margin-top:27px}
  .hero-more{grid-template-columns:1fr;margin-top:17px}
  .fs-hud{top:10px;width:calc(100% - 20px);justify-content:center;border-radius:14px;flex-wrap:wrap}
  .fs-page{display:none}
  .stage:fullscreen,.stage.fs-fallback{padding:10px 6px}
  .stage:fullscreen .stage-mid,.stage.fs-fallback .stage-mid{padding-top:72px}
  .stage:fullscreen .side-nav,.stage.fs-fallback .side-nav{width:34px;height:76px}

  /* Mobile dialogs stay inside the dynamic viewport, including devices with
     a browser toolbar or safe-area inset. Narrow layouts stack rows that would
     otherwise force horizontal scrolling. */
  .modal-bg{align-items:flex-end;padding:10px}
  .modal{max-height:calc(100dvh - 20px);padding:18px;border-radius:16px}
  .share-url-row{flex-direction:column}
  .share-url-row .copy-btn{min-height:42px}
  .card-detail{grid-template-columns:1fr}
  .card-detail img{width:min(180px,55vw);justify-self:center}
  .cl-list li{display:grid;gap:6px}
  .cl-type{justify-self:start}
  footer.site .foot-meta{justify-items:start;text-align:left}
  .legal-page .topbar{padding-top:18px}
  .legal-home{margin-left:0}
  .legal-shell{width:min(100% - 32px,900px);padding-top:44px}
  .legal-section{grid-template-columns:1fr;gap:14px}
  #toasts{left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);align-items:stretch}
  .toast{max-width:none}
}

/* ============================================================
   PRINT / SAVE AS PDF
   Built as a real print layout rather than a canvas render: card art is
   served from another origin, and drawing it to a canvas would taint it
   and block the export. Printing has no such restriction, and the
   browser's own "Save as PDF" gives sharper type than a rasterised page.
   ============================================================ */
#printRoot{display:none}
@media print{
  @page{ size:A4 portrait; margin:11mm; }
  html,body{background:#fff !important;color:#111 !important}
  body::before{display:none !important}
  #landing,#wizard,#app,#toasts,#modalRoot,.rail-toggle,.placing-banner{display:none !important}
  #printRoot{display:block}

  .p-sheet{break-after:page;page-break-after:always}
  .p-sheet:last-child{break-after:auto;page-break-after:auto}

  .p-cover{display:flex;flex-direction:column;justify-content:center;min-height:245mm}
  .p-cover h1{font-family:var(--display);font-size:34pt;line-height:1;letter-spacing:-.03em;
    margin:0 0 6mm;color:#111}
  .p-cover .p-sub{font-size:12pt;color:#444;margin:0 0 12mm}
  .p-cover dl{display:grid;grid-template-columns:auto 1fr;gap:3mm 8mm;font-size:10.5pt;margin:0}
  .p-cover dt{color:#666}
  .p-cover dd{margin:0;font-family:var(--mono);color:#111}
  .p-cover .p-foot{margin-top:auto;padding-top:10mm;border-top:1px solid #ddd;
    font-size:8.5pt;color:#777}

  .p-head{display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1.2pt solid #111;padding-bottom:2mm;margin-bottom:5mm}
  .p-head h2{font-family:var(--display);font-size:16pt;margin:0;letter-spacing:-.02em;color:#111}
  .p-head span{font-family:var(--mono);font-size:9pt;color:#555}

  .p-grid{display:grid;gap:3.5mm;grid-template-columns:repeat(var(--pcols),1fr);
    width:var(--pw,100%);margin:0 auto}
  .p-slot{break-inside:avoid;page-break-inside:avoid}
  .p-frame{position:relative;aspect-ratio:63/88;border:.8pt solid #bbb;border-radius:1.6mm;
    overflow:hidden;background:#f4f4f4}
  .p-frame img{width:100%;height:100%;object-fit:cover;display:block}
  .p-frame .p-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:7pt;color:#bbb}
  .p-cap{margin-top:1.4mm;height:6.5mm;overflow:hidden;font-size:7.5pt;line-height:1.25;color:#222}
  .p-frame.p-need img{filter:grayscale(1) brightness(1.12) contrast(.55)}
  .p-frame.p-need{border-style:dashed;border-color:#999}
  .p-needtag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    font-family:var(--mono);font-size:6.5pt;letter-spacing:.1em;padding:1mm 1.6mm;
    border:.5pt solid #666;border-radius:1mm;background:#fff;color:#444}
  .p-frame.p-rev-frame{border-color:#777}
  .p-rev{position:absolute;left:50%;bottom:1.4mm;transform:translateX(-50%);
    font-family:var(--mono);font-size:6pt;letter-spacing:.12em;padding:.7mm 1.6mm;
    border:.5pt solid #555;border-radius:1mm;background:#fff;color:#333}
  .p-list tr.need td{color:#666}
  .p-list td i{font-style:normal;font-family:var(--mono);font-size:7pt;color:#777}
  .p-cap b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .p-cap span{font-family:var(--mono);font-size:6.8pt;color:#777}

  .p-list h2{font-family:var(--display);font-size:16pt;margin:0 0 4mm;color:#111}
  .p-list table{width:100%;border-collapse:collapse;font-size:8.5pt}
  .p-list th{text-align:left;font-size:7pt;letter-spacing:.1em;text-transform:uppercase;
    color:#777;border-bottom:1pt solid #111;padding:0 3mm 1.6mm 0}
  .p-list td{padding:1.5mm 3mm 1.5mm 0;border-bottom:.5pt solid #e6e6e6;vertical-align:top}
  .p-list td.n{font-family:var(--mono);color:#555;white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .flipper{transition:none !important;animation:none !important}
}