/* Time Bomb HQ - the staff side of timebombtcg.com.
   Same navy, cream and gold as the shop (..\Website\site\styles.css), same fonts
   (Cinzel for headings, Inter for everything else). No framework, no build step.

   Contents
     1. tokens            5. buttons            9. tables          13. toasts
     2. base              6. form controls     10. cards + stats   14. states (empty, skeleton, fuse)
     3. app shell         7. menus + selects   11. drawer          15. sign-in gate
     4. page header       8. tabs + badges     12. modal + confirm 16. views (inventory, placeholders)
*/

/* ---------- 1. tokens ---------- */
:root{
  /* colour */
  --bg:#060b1a;
  --bg-raise:#091026;
  --surface:#0c1530;
  --surface-2:#111c3d;
  --surface-3:#17244d;
  --line:#1e2d57;
  --line-strong:#2c3f78;
  --text:#f3eddc;
  --muted:#94a4c9;
  --faint:#7384ae;
  --gold:#e5b544;
  --gold-2:#f7d98a;
  --gold-ink:#241a05;
  --gold-grad:linear-gradient(95deg,var(--gold) 0%,var(--gold-2) 100%);
  --gold-tint:rgba(229,181,68,.12);
  --blue:#3f7fe0;
  --blue-2:#8db6f5;
  --blue-tint:rgba(63,127,224,.14);
  --blue-glow:rgba(45,105,215,.38);
  --danger:#ff8a8a;
  --danger-deep:#8c3b3b;
  --danger-tint:rgba(255,122,122,.12);
  --ok:#77d9ae;
  --ok-tint:rgba(119,217,174,.12);
  --warn:#f2b05e;
  --warn-tint:rgba(242,176,94,.14);

  /* spacing scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;

  /* radii */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* shadows */
  --sh-1:0 1px 2px rgba(0,0,0,.35);
  --sh-2:0 8px 24px rgba(0,0,0,.4);
  --sh-pop:0 14px 34px rgba(0,0,0,.5);
  --sh-modal:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(229,181,68,.12);
  --sh-gold:0 6px 20px rgba(229,181,68,.26);

  /* type scale */
  --font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:Cinzel,Georgia,serif;
  --fs-2xs:.6875rem;  /* 11px  labels, table headers */
  --fs-xs:.75rem;     /* 12px */
  --fs-sm:.8125rem;   /* 13px  table cells, controls */
  --fs-md:.875rem;    /* 14px  body */
  --fs-lg:1rem;
  --fs-xl:1.25rem;
  --fs-2xl:1.6rem;

  /* motion */
  --t-fast:120ms ease;
  --t:160ms ease;
  --t-slow:200ms ease;

  /* layout */
  --nav-w:236px;
  --topbar-h:52px;
  --content-max:1920px;
  --control-h:36px;
  --control-h-sm:30px;
}

/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{
  margin:0;height:100%;
  background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--fs-md);line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;            /* the app scrolls inside its own panes, never the page */
}
h1,h2,h3,h4,p{margin:0}
a{color:var(--gold-2);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}
::selection{background:rgba(229,181,68,.35);color:#fff}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.gold{color:var(--gold-2)}
.nowrap{white-space:nowrap}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:var(--r-xs)}
/* A heading that only takes focus from the code (so a screen reader starts at the panel's
   title) is not a control: it gets no ring. Everything a person can act on keeps its ring. */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,h3[tabindex="-1"]:focus{outline:none}
/* thin, themed scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box;border:2px solid transparent}
::-webkit-scrollbar-corner{background:transparent}

/* ---------- 3. app shell ---------- */
.app{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);height:100vh}

.nav{
  position:relative;display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(180deg,#0a1230 0%,var(--bg) 60%);
  border-right:1px solid var(--line);
}
.nav::before{                 /* the shop's blue glow, behind the logo */
  content:"";position:absolute;top:-120px;left:50%;width:420px;height:340px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,var(--blue-glow),transparent 70%);opacity:.55;
}
.brand{
  position:relative;display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4) var(--s-4) var(--s-3);color:inherit;text-decoration:none;
}
.brand:hover{text-decoration:none}
.brand img{
  width:46px;height:46px;flex:none;display:block;
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 84%,transparent 100%);
  mask-image:radial-gradient(circle closest-side at 50% 50%,#000 84%,transparent 100%);
}
.brand-name{
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;line-height:1.1;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold-2);
}
.brand-name small{
  display:block;margin-top:3px;font-family:var(--font);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.2em;color:var(--muted);
}
.nav-list{
  position:relative;flex:1;min-height:0;overflow-y:auto;
  list-style:none;margin:0;padding:var(--s-2) var(--s-3);
  display:flex;flex-direction:column;gap:2px;
}
.nav-group{
  margin:var(--s-4) var(--s-3) var(--s-1);
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.nav-link{
  position:relative;display:flex;align-items:center;gap:var(--s-3);
  height:38px;padding:0 var(--s-3);border-radius:var(--r-md);
  color:var(--muted);font-weight:600;font-size:var(--fs-md);text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast);
}
.nav-link:hover{background:rgba(255,255,255,.05);color:var(--text);text-decoration:none}
.nav-link .ico{flex:none;opacity:.9}
.nav-link[aria-current="page"]{background:var(--gold-tint);color:var(--gold-2)}
.nav-link[aria-current="page"]::before{
  content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;
  background:var(--gold-grad);box-shadow:0 0 10px rgba(229,181,68,.6);
}
.nav-link .soon{
  margin-left:auto;font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 7px;
}
.nav-foot{
  position:relative;padding:var(--s-3) var(--s-4) var(--s-4);border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--faint);display:flex;flex-direction:column;gap:var(--s-2);
}
.nav-foot .badge{align-self:flex-start}
.combo{position:relative;min-width:0}

.main{position:relative;display:grid;grid-template-rows:var(--topbar-h) minmax(0,1fr);min-width:0;min-height:0}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:0 var(--s-6);border-bottom:1px solid var(--line);
  background:rgba(6,11,26,.92);
}
.crumbs{display:flex;align-items:center;gap:var(--s-2);min-width:0;font-size:var(--fs-xs);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.crumbs b{color:var(--muted);font-weight:700}
.crumbs .sep{opacity:.5}
.topbar-right{display:flex;align-items:center;gap:var(--s-3)}

.spark{
  width:7px;height:7px;border-radius:50%;flex:none;background:var(--gold);
  box-shadow:0 0 10px 2px rgba(229,181,68,.8);animation:pulse 1.9s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}

.user{position:relative}
.user-btn{
  display:inline-flex;align-items:center;gap:var(--s-2);height:var(--control-h);max-width:240px;
  padding:0 12px 0 4px;border-radius:var(--r-pill);cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--text);font-size:var(--fs-sm);font-weight:600;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.user-btn:hover,.user-btn[aria-expanded="true"]{border-color:var(--gold)}
.user-ini{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--gold-grad);color:var(--gold-ink);font-weight:700;font-size:var(--fs-xs);
}
.user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#view{min-height:0;overflow:auto}
#view:focus{outline:none}
.page{max-width:var(--content-max);margin:0 auto;padding:var(--s-6) var(--s-6) var(--s-10)}
/* a page whose table scrolls inside it: the page itself fills the pane and never scrolls */
.page--fill{height:calc(100vh - var(--topbar-h));display:flex;flex-direction:column;gap:var(--s-3);padding-bottom:var(--s-4);max-width:2400px}

/* ---------- 4. page header ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.page-title{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-2xl);line-height:1.15;
  letter-spacing:.05em;text-transform:uppercase;color:var(--gold-2);
}
.page-sub{color:var(--muted);font-size:var(--fs-md);margin-top:2px;max-width:70ch}
.page-actions{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.section-title{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);letter-spacing:.05em;
  text-transform:uppercase;color:var(--gold-2);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);
  border:1px solid var(--line);background:rgba(255,255,255,.03);padding:5px 12px;border-radius:var(--r-pill);
}

/* ---------- 5. buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:var(--control-h);padding:0 16px;border-radius:var(--r-pill);
  border:1px solid transparent;background:none;color:var(--text);
  font-weight:600;font-size:var(--fs-sm);line-height:1;white-space:nowrap;cursor:pointer;
  text-decoration:none;user-select:none;
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),
             border-color var(--t-fast),color var(--t-fast),filter var(--t-fast);
}
.btn:hover{text-decoration:none}
.btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:var(--r-pill)}
.btn .ico{flex:none}
.btn-primary{background:var(--gold-grad);color:var(--gold-ink);font-weight:700;box-shadow:var(--sh-gold)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 26px rgba(229,181,68,.4);filter:brightness(1.04)}
.btn-secondary{background:var(--surface);border-color:var(--line);color:var(--text)}
.btn-secondary:hover:not(:disabled){border-color:var(--gold);background:var(--surface-2)}
.btn-ghost{color:var(--muted)}
.btn-ghost:hover:not(:disabled){background:rgba(255,255,255,.06);color:var(--text)}
.btn-danger{border-color:var(--danger-deep);color:var(--danger)}
.btn-danger:hover:not(:disabled){background:var(--danger-tint);border-color:var(--danger)}
.btn-sm{height:var(--control-h-sm);padding:0 12px;font-size:var(--fs-xs)}
.btn-icon{width:var(--control-h);padding:0}
.btn-icon.btn-sm{width:var(--control-h-sm)}
.btn-block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--surface-2);border-color:transparent;color:var(--faint);
  box-shadow:none;cursor:not-allowed;filter:none;transform:none;
}
.btn-ghost:disabled,.btn-danger:disabled{background:none;border-color:var(--line)}
.btn[aria-busy="true"]{position:relative;color:transparent !important;pointer-events:none}
.btn[aria-busy="true"]::after{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(36,26,5,.35);border-top-color:var(--gold-ink);animation:spin .7s linear infinite;
}
.btn-secondary[aria-busy="true"]::after,.btn-ghost[aria-busy="true"]::after,.btn-danger[aria-busy="true"]::after{
  border-color:rgba(243,237,220,.25);border-top-color:var(--text);
}
@keyframes spin{to{transform:rotate(360deg)}}
.link-btn{background:none;border:0;padding:0;color:var(--gold-2);font-weight:600;cursor:pointer}
.link-btn:hover{text-decoration:underline}

/* ---------- 6. form controls ---------- */
.field{display:grid;gap:5px;min-width:0;align-content:start}   /* a field with a hint beside one without: the boxes still line up */
.field>label,.field>.label{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.field .req{color:var(--gold)}
.field .hint{font-size:var(--fs-xs);color:var(--faint);line-height:1.4}
.field .error{font-size:var(--fs-xs);color:var(--danger)}
.input,.textarea{
  width:100%;height:var(--control-h);padding:0 12px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);font-size:var(--fs-sm);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.textarea{height:auto;min-height:84px;padding:9px 12px;line-height:1.45;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:hover,.textarea:hover{border-color:var(--line-strong)}
.input:focus,.textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(229,181,68,.18)}
.input:disabled,.textarea:disabled{opacity:.55;cursor:not-allowed}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger)}
.input.num{text-align:right}
.input-money{position:relative}
.input-money::before{
  content:"$";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);
  font-size:var(--fs-sm);pointer-events:none;
}
.input-money .input{padding-left:24px}
.textarea.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:var(--fs-xs);white-space:pre;overflow:auto;tab-size:4}

/* search box (filter bar) */
.search{position:relative;flex:1 1 220px;min-width:180px;max-width:380px}
.search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.search .input{border-radius:var(--r-pill);padding-left:36px;padding-right:32px;background:var(--surface)}
.search-clear{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:none;border:0;color:var(--muted);cursor:pointer;
}
.search-clear:hover{background:var(--surface-3);color:var(--text)}

/* checkbox */
.check{display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;font-size:var(--fs-sm);user-select:none}
.check input{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;flex:none;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:5px;background:var(--surface-2);
  display:grid;place-items:center;transition:background var(--t-fast),border-color var(--t-fast);
}
.check input::after{
  content:"";width:9px;height:5px;margin-top:-2px;border-left:2px solid var(--gold-ink);border-bottom:2px solid var(--gold-ink);
  transform:rotate(-45deg) scale(0);transition:transform var(--t-fast);
}
.check input:checked{background:var(--gold-grad);border-color:transparent}
.check input:checked::after{transform:rotate(-45deg) scale(1)}
.check input:hover{border-color:var(--gold)}

/* toggle switch */
.switch{display:inline-flex;align-items:center;gap:var(--s-3);cursor:pointer;font-size:var(--fs-sm);user-select:none}
.switch input{
  appearance:none;-webkit-appearance:none;position:relative;width:38px;height:22px;margin:0;flex:none;cursor:pointer;
  border-radius:var(--r-pill);background:var(--surface-3);border:1px solid var(--line-strong);
  transition:background var(--t),border-color var(--t);
}
.switch input::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--muted);transition:transform var(--t),background var(--t);
}
.switch input:checked{background:var(--gold-grad);border-color:transparent}
.switch input:checked::after{transform:translateX(16px);background:var(--gold-ink)}
.switch input:hover{border-color:var(--gold)}
.switch input:disabled{opacity:.5;cursor:not-allowed}

/* number stepper */
.stepper{display:flex;align-items:stretch;height:var(--control-h)}
.stepper .input{border-radius:0;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;border-left:0;border-right:0;min-width:0}
.stepper button{
  width:38px;flex:none;background:var(--surface-2);border:1px solid var(--line);color:var(--text);cursor:pointer;
  font-size:1.05rem;line-height:1;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.stepper button:first-child{border-radius:var(--r-md) 0 0 var(--r-md)}
.stepper button:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
.stepper button:hover{background:var(--surface-3);border-color:var(--gold);color:var(--gold-2)}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-4)}
.form-grid .span-2{grid-column:1 / -1}
.form-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid--3 .span-2{grid-column:span 2}
.form-grid--3 .span-3{grid-column:1 / -1}
.form-section{
  margin:var(--s-5) 0 var(--s-3);padding-bottom:6px;border-bottom:1px solid var(--line);
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);
}
.form-section:first-child{margin-top:0}
.form-error{
  display:flex;gap:var(--s-2);align-items:flex-start;padding:10px 12px;border-radius:var(--r-md);
  background:var(--danger-tint);border:1px solid var(--danger-deep);color:var(--danger);font-size:var(--fs-sm);
}
.note{
  display:flex;gap:var(--s-2);align-items:flex-start;padding:10px 12px;border-radius:var(--r-md);
  background:var(--gold-tint);border:1px solid rgba(229,181,68,.35);color:var(--text);font-size:var(--fs-sm);line-height:1.45;
}
.note .ico{color:var(--gold);flex:none;margin-top:1px}
.note>div{min-width:0;flex:1}
.note b{font-weight:600}
.note--warn{background:var(--warn-tint);border-color:rgba(242,176,94,.5)}
.note--warn .ico{color:var(--warn)}
.note--danger{background:var(--danger-tint);border-color:var(--danger-deep)}
.note--danger .ico{color:var(--danger)}
.note--info{background:var(--blue-tint);border-color:rgba(63,127,224,.5)}
.note--info .ico{color:var(--blue-2)}
.note--ok{background:var(--ok-tint);border-color:rgba(119,217,174,.4)}
.note--ok .ico{color:var(--ok)}
/* a form inside the standard edit panel (ui/forms.js) */
.edit-drawer{display:grid;gap:var(--s-4)}
.edit-drawer-actions{display:flex;gap:var(--s-2)}
.hq-form{min-width:0}
/* a number box that Recommend filled in (wheel), or any value HQ worked out for you */
.input.is-filled{border-color:rgba(229,181,68,.75);background:var(--gold-tint);color:var(--gold-2)}
.input-suffix{position:relative}
.input-suffix .input{padding-right:30px}
.input-suffix::after{
  content:attr(data-suffix);position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--faint);
  font-size:var(--fs-sm);pointer-events:none;
}
.input-prefix{position:relative}
.input-prefix .input{padding-left:52px}
.input-prefix::before{
  content:attr(data-prefix);position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);
  font-size:var(--fs-sm);pointer-events:none;white-space:nowrap;
}

/* ---------- 7. menus + selects ---------- */
/* The themed dropdown from the shop's sort menu: a button that opens a listbox, with a
   gold arrow. Native <select> lists cannot be themed, so none are used. */
.select{position:relative;display:inline-flex;min-width:0}
.select-btn{
  display:inline-flex;align-items:center;gap:6px;height:var(--control-h);max-width:100%;
  padding:0 12px 0 14px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:var(--fs-sm);font-weight:500;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.select-btn:hover{border-color:var(--gold)}
.select-btn[aria-expanded="true"]{border-color:var(--gold);background:var(--surface-2)}
.select-btn .k{color:var(--muted)}
.select-btn .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.select.is-set .select-btn{border-color:rgba(229,181,68,.6);background:var(--gold-tint)}
.select.is-set .select-btn .v{color:var(--gold-2);font-weight:600}
.caret{
  width:7px;height:7px;margin:-3px 2px 0 4px;flex:none;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform var(--t);
}
[aria-expanded="true"]>.caret{transform:translateY(4px) rotate(225deg)}
/* form-style select: fills its field like an input */
.select--field{display:flex}
.select--field .select-btn{width:100%;justify-content:space-between;border-radius:var(--r-md);background:var(--surface-2)}
.select--field .select-btn .v{max-width:none;flex:1;text-align:left}
.select--field .select-btn .v.placeholder{color:var(--faint)}

.menu{
  position:fixed;z-index:400;min-width:180px;max-width:min(420px,calc(100vw - 16px));
  margin:0;padding:6px;list-style:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-pop);
  animation:menu-in var(--t-fast);
}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu-find{padding:2px 2px 6px}
.menu-find .input{height:32px;border-radius:var(--r-sm);background:var(--bg)}
.menu-list{list-style:none;margin:0;padding:0;max-height:min(340px,50vh);overflow-y:auto}
.menu-list:focus{outline:none}
.menu-opt{
  display:flex;align-items:center;gap:var(--s-2);padding:7px 10px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--muted);cursor:pointer;white-space:nowrap;
}
.menu-opt .t{flex:1;overflow:hidden;text-overflow:ellipsis}
.menu-opt .n{color:var(--faint);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.menu-opt .tick{width:14px;flex:none;color:var(--gold);font-weight:700;text-align:center}
.menu-opt.active{background:var(--surface-2);color:var(--text)}
.menu-opt[aria-selected="true"]{color:var(--gold-2);font-weight:600}
.menu-opt.is-blank .t{font-style:italic}
.menu-none{padding:10px;color:var(--faint);font-size:var(--fs-sm)}
.menu-sep{height:1px;background:var(--line);margin:6px 4px}
.menu a.menu-opt,.menu button.menu-opt{width:100%;background:none;border:0;text-align:left;text-decoration:none}
.menu a.menu-opt:hover,.menu button.menu-opt:hover,.menu a.menu-opt:focus-visible,.menu button.menu-opt:focus-visible{
  background:var(--surface-2);color:var(--text);outline:none;
}
.menu-head{padding:8px 10px 6px;font-size:var(--fs-xs);color:var(--faint)}
.menu-head b{display:block;color:var(--text);font-size:var(--fs-sm)}

/* ---------- 8. tabs + badges ---------- */
.tabs{
  display:inline-flex;gap:4px;padding:4px;max-width:100%;overflow-x:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.tab{
  display:inline-flex;align-items:center;gap:var(--s-2);height:36px;padding:0 14px;border-radius:var(--r-md);
  background:transparent;border:0;color:var(--muted);font-weight:600;font-size:var(--fs-sm);white-space:nowrap;cursor:pointer;
  transition:background var(--t),color var(--t),box-shadow var(--t);
}
.tab:hover:not([aria-selected="true"]){background:var(--surface-2);color:var(--text)}
.tab[aria-selected="true"]{background:var(--gold-grad);color:var(--gold-ink);box-shadow:0 4px 14px rgba(229,181,68,.24)}
.tab .count{
  min-width:26px;padding:1px 7px;border-radius:var(--r-pill);text-align:center;
  background:var(--surface-3);color:var(--muted);font-size:var(--fs-2xs);font-weight:700;font-variant-numeric:tabular-nums;
}
.tab[aria-selected="true"] .count{background:rgba(36,26,5,.18);color:var(--gold-ink)}
.tab .dot-low{width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 8px rgba(242,176,94,.8)}
.tabs--sm .tab{height:30px;padding:0 12px;font-size:var(--fs-xs)}
.tabs--block{display:flex}
.tabs--block .tab{flex:1;justify-content:center}

.badge{
  display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:var(--r-pill);
  font-size:.65rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,.03);
}
.badge-gold{border-color:rgba(229,181,68,.55);color:var(--gold-2);background:var(--gold-tint)}
.badge-blue{border-color:rgba(63,127,224,.6);color:var(--blue-2);background:var(--blue-tint)}
.badge-low{border-color:rgba(242,176,94,.6);color:var(--warn);background:var(--warn-tint)}
.badge-out{border-color:var(--danger-deep);color:var(--danger);background:var(--danger-tint)}
.badge-ok{border-color:rgba(119,217,174,.45);color:var(--ok);background:var(--ok-tint)}
.badge-solid{border-color:transparent;background:var(--gold-grad);color:var(--gold-ink)}
/* an estimate, not a record: dashed, lower case, quiet. Every estimated cost carries it. */
.badge-est{
  height:16px;padding:0 6px;border-style:dashed;border-color:rgba(242,176,94,.7);color:var(--warn);background:none;
  font-size:.62rem;letter-spacing:.04em;text-transform:none;font-style:italic;cursor:help;vertical-align:middle;
}
.cost-est{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
/* a giveaway win: a real cost of $0. Solid and green, so it never reads as the dashed "est." */
.badge-won{
  height:16px;padding:0 6px;border-color:rgba(119,217,174,.45);color:var(--ok);background:var(--ok-tint);
  font-size:.62rem;letter-spacing:.04em;text-transform:none;cursor:help;vertical-align:middle;
}
.field > [data-giveaway-win]{justify-self:start}
.table .cost-est{justify-content:flex-end}
.stat-unit{font-family:var(--font);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.badges{display:inline-flex;gap:4px;flex-wrap:wrap}

.chip{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 6px 0 11px;border-radius:var(--r-pill);
  background:var(--gold-tint);border:1px solid rgba(229,181,68,.55);color:var(--text);font-size:var(--fs-xs);font-weight:600;
}

/* ---------- 9. tables ---------- */
.table-wrap{
  position:relative;flex:1;min-height:0;overflow:auto;container-type:inline-size;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
/* fixed layout: each column keeps its set width and the name columns share what is left,
   so a long name is cut with an ellipsis instead of pushing the table sideways */
.table--fixed{table-layout:fixed;min-width:860px}
.table th{
  position:sticky;top:0;z-index:2;height:38px;padding:0 12px;text-align:left;white-space:nowrap;
  background:#0f1a3a;border-bottom:1px solid var(--line);
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.table th.num{text-align:right}
.table th:first-child,.table td:first-child{padding-left:16px}
.table th:last-child,.table td:last-child{padding-right:16px}
.th-sort{
  display:inline-flex;align-items:center;gap:5px;height:100%;padding:0;background:none;border:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;transition:color var(--t-fast);
}
.th-sort:hover{color:var(--text)}
.th-sort .arrow{width:.9em;color:var(--gold);font-weight:700;font-size:.8rem;opacity:0;transition:opacity var(--t-fast)}
.th-sort:hover .arrow{opacity:.45}
th[aria-sort="ascending"] .th-sort,th[aria-sort="descending"] .th-sort{color:var(--gold-2)}
th[aria-sort="ascending"] .arrow,th[aria-sort="descending"] .arrow{opacity:1}
th.num .th-sort{flex-direction:row-reverse}
.table td{
  height:42px;padding:6px 12px;border-bottom:1px solid rgba(30,45,87,.55);vertical-align:middle;
  max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.table tbody tr:nth-child(even) td{background:rgba(255,255,255,.018)}
.table tbody tr{transition:background var(--t-fast)}
.table tbody tr.clickable{cursor:pointer}
.table tbody tr.clickable:hover td{background:var(--blue-tint)}
.table tbody tr.clickable:focus-visible{outline:none}
.table tbody tr.clickable:focus-visible td{background:var(--blue-tint);box-shadow:inset 0 0 0 1px var(--gold-2)}
.table tbody tr.is-selected td{background:var(--gold-tint)}
.table tbody tr.is-selected td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.table tbody tr.is-zero td{color:var(--muted)}
.table tbody tr:last-child td{border-bottom:0}
.td-main{font-weight:600;color:var(--text)}
.td-sub{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--faint);overflow:hidden;text-overflow:ellipsis}
.td-wrap{white-space:normal}
.table .zero{color:var(--faint)}
.table .money-strong{color:var(--gold-2);font-weight:600}
/* Lower-priority columns give way first when the table gets narrow. The three widths are
   where, with that tier showing, the name column still has about 300px on the widest tab
   (Singles); the sums are in views/inventory/columns.js. */
@container (max-width:2079px){.table .c-3{display:none}}
@container (max-width:1649px){.table .c-2{display:none}}
@container (max-width:1279px){.table .c-1{display:none}}
.table--compact td{height:36px}
.table--plain{font-size:var(--fs-sm)}
.table--plain th{position:static;background:none}

.table-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;min-height:36px}
.pager{display:flex;align-items:center;gap:var(--s-2)}
.pager .pages{display:flex;gap:2px}
.page-btn{
  min-width:32px;height:32px;padding:0 8px;border-radius:var(--r-sm);background:none;border:1px solid transparent;
  color:var(--muted);font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.page-btn:hover:not(:disabled):not([aria-current="page"]){background:var(--surface-2);color:var(--text)}
.page-btn[aria-current="page"]{background:var(--gold-tint);border-color:rgba(229,181,68,.55);color:var(--gold-2)}
.page-btn:disabled{opacity:.35;cursor:not-allowed}
.page-gap{align-self:center;color:var(--faint);padding:0 2px}

/* ---------- 10. cards + stats ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);
}
.card-title{font-weight:700;font-size:var(--fs-lg);display:flex;align-items:center;gap:var(--s-2)}
.card p{color:var(--muted)}
.card--link{display:block;color:inherit;text-decoration:none;transition:border-color var(--t),transform var(--t)}
.card--link:hover{border-color:var(--gold);transform:translateY(-2px);text-decoration:none}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 8px rgba(229,181,68,.7)}
.grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

.stats{display:flex;gap:var(--s-2);flex-wrap:wrap}
.stat{
  min-width:132px;padding:8px 14px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
}
.stat-label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.stat-value{
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;line-height:1.25;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;min-height:1.5rem;
}
.stat-value.gold{color:var(--gold-2)}
.stat-sub{font-size:var(--fs-2xs);color:var(--faint);white-space:nowrap;min-height:1rem}

/* tiles: the big numbers at the top of a section (ui/components.js tile()) */
.tiles{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tiles--tight{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--s-2)}
.tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}   /* six tiles as two even rows */
@media (max-width:1000px){.tiles--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tiles--3{grid-template-columns:minmax(0,1fr)}}
.tile{
  position:relative;min-width:0;padding:var(--s-4) var(--s-5);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.tile-label{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:20px;
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}
.tile-value{
  margin-top:6px;font-family:var(--font-display);font-weight:700;font-size:1.7rem;line-height:1.2;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tile-sub{margin-top:4px;font-size:var(--fs-xs);color:var(--muted);line-height:1.45}
.tile-foot{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted)}
.tile--gold{background:linear-gradient(120deg,var(--surface) 0%,#0e1a40 100%);border-color:rgba(229,181,68,.35)}
.tile--gold .tile-value{color:var(--gold-2)}
.tile--ok .tile-value{color:var(--ok)}
.tile--warn .tile-value{color:var(--warn)}
.tile--danger .tile-value{color:var(--danger)}
.tiles--tight .tile{padding:var(--s-3) var(--s-4)}
.tiles--tight .tile-value{font-size:1.25rem}

/* panels: a titled card (ui/components.js panel()) */
.panel{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);
}
.panel-title{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-2);
}
.panel-sub{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.panel-actions{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.panel-body{padding:var(--s-4)}
.panel-body--flush{padding:0}
.panel-body--flush .table-wrap{border:0;border-radius:0 0 var(--r-lg) var(--r-lg);background:none}
.panel .table--plain th{height:34px}
.skel-block{display:grid;gap:14px;padding:var(--s-2) 0}

/* layout helpers shared by the section pages */
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);min-width:0}   /* one column that never grows past its box */
.stack--lg{gap:var(--s-6)}
.row{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.row--between{justify-content:space-between}
.grow{flex:1;min-width:0}
/* the row under a page header that holds the section's tabs and its actions */
.subnav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin:var(--s-4) 0}
/* a list table that sits in a scrolling page rather than filling the pane */
.table-wrap--page{flex:none;max-height:none;overflow-x:auto;overflow-y:visible}
.table-wrap--page .table th{position:static}
.table td.td-actions{overflow:visible;text-align:right}
.table .pos{color:var(--ok)}
.table .neg{color:var(--danger)}
.table tfoot td{height:40px;border-top:1px solid var(--line-strong);border-bottom:0;font-weight:700;background:rgba(255,255,255,.03)}

/* ---------- 11. drawer ---------- */
.backdrop{
  position:fixed;inset:0;z-index:200;background:rgba(3,6,16,.62);
  opacity:0;pointer-events:none;transition:opacity var(--t-slow);
}
.backdrop.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:210;width:min(560px,100vw);
  display:flex;flex-direction:column;
  background:var(--bg-raise);border-left:1px solid var(--line);box-shadow:-18px 0 50px rgba(0,0,0,.5);
  transform:translateX(102%);transition:transform var(--t-slow);
}
.drawer.open{transform:none}
.drawer-head{
  display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-5) var(--s-5) var(--s-4);
  border-bottom:1px solid var(--line);
}
.drawer-titles{flex:1;min-width:0}
.drawer-title{
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;line-height:1.25;color:var(--gold-2);
  overflow-wrap:anywhere;
}
.drawer-sub{color:var(--muted);font-size:var(--fs-sm);margin-top:2px;overflow-wrap:anywhere}
.drawer-body{flex:1;min-height:0;overflow-y:auto;padding:var(--s-5)}
.drawer-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3) var(--s-5);border-top:1px solid var(--line);background:rgba(6,11,26,.6);
}
.icon-btn{
  width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:none;border:1px solid transparent;color:var(--muted);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--line)}

/* ---------- 12. modal + confirm ---------- */
.modal-back{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:var(--s-5);
  background:rgba(3,6,16,.74);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity var(--t);
}
.modal-back.open{opacity:1;pointer-events:auto}
.modal{
  width:min(640px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-modal);
  transform:translateY(10px) scale(.98);transition:transform var(--t-slow);
}
.modal-back.open .modal{transform:none}
.modal--sm{width:min(440px,100%)}
.modal--lg{width:min(980px,100%)}
.modal--xl{width:min(1280px,100%)}
.modal-head{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-5) var(--s-5) var(--s-3)}
.modal-titles{flex:1;min-width:0}
.modal-title{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--gold-2);letter-spacing:.02em}
.modal-sub{color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
.modal-body{flex:1;min-height:0;overflow-y:auto;padding:var(--s-2) var(--s-5) var(--s-5)}
.modal-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-wrap:wrap;
  padding:var(--s-3) var(--s-5);border-top:1px solid var(--line);
}
.modal-foot .grow{flex:1;min-width:0;color:var(--muted);font-size:var(--fs-sm)}

.ask{text-align:center;padding:var(--s-6) var(--s-6) var(--s-5)}
.ask-art{margin:0 0 var(--s-3);line-height:0}
.ask h2{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--gold);margin:0 0 var(--s-2)}
.ask p{color:var(--muted);font-size:var(--fs-sm);line-height:1.55}
.ask p b{color:var(--text);font-weight:600}
.ask-row{display:flex;gap:var(--s-2);margin-top:var(--s-5)}
.ask-row .btn{flex:1;height:40px}
.bomb-spark{animation:bomb-spark .9s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes bomb-spark{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.65)}}

/* ---------- 13. toasts ---------- */
.toasts{
  position:fixed;right:20px;bottom:68px;z-index:500;display:flex;flex-direction:column;gap:var(--s-2);
  width:min(400px,calc(100vw - 40px));pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:var(--s-3);padding:12px 12px 12px 14px;pointer-events:auto;
  background:var(--surface-2);border:1px solid var(--line-strong);border-left:3px solid var(--gold);
  border-radius:var(--r-md);box-shadow:var(--sh-pop);font-size:var(--fs-sm);line-height:1.45;
  animation:toast-in var(--t-slow);
}
.toast.leaving{opacity:0;transform:translateX(12px);transition:opacity var(--t),transform var(--t)}
.toast-error{border-left-color:var(--danger)}
.toast-info{border-left-color:var(--blue)}
.toast .msg{flex:1;min-width:0;overflow-wrap:anywhere}
.toast .msg b{display:block}
.toast .ico{flex:none;margin-top:1px;color:var(--gold)}
.toast-error .ico{color:var(--danger)}
.toast-info .ico{color:var(--blue-2)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 14. states ---------- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--s-2);padding:var(--s-12) var(--s-6)}
.empty h3{font-family:var(--font-display);font-size:var(--fs-xl);color:var(--gold-2);letter-spacing:.03em}
.empty p{color:var(--muted);max-width:46ch}
.empty .btn{margin-top:var(--s-3)}
.table-empty{position:sticky;left:0;width:100%}

.skel{
  display:block;height:12px;border-radius:6px;
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:skel 1.3s ease infinite;
}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
.is-loading{opacity:.55;transition:opacity var(--t)}

/* the fuse: a thin gold line that burns across the top of the pane while HQ is working */
.fuse{position:absolute;top:calc(var(--topbar-h) - 1px);left:0;right:0;height:2px;z-index:50;overflow:hidden;opacity:0;transition:opacity var(--t);pointer-events:none}
.fuse.on{opacity:1}
.fuse::before{
  content:"";position:absolute;top:0;bottom:0;width:38%;left:-40%;
  background:linear-gradient(90deg,transparent,var(--gold) 70%,#fff);
  box-shadow:0 0 12px 1px rgba(247,217,138,.9);animation:fuse 1.1s linear infinite;
}
@keyframes fuse{to{left:100%}}

/* ---------- 15. sign-in gate ---------- */
.gate{
  position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:var(--s-5);overflow:auto;
  background:radial-gradient(900px 620px at 50% 30%,rgba(45,105,215,.26),transparent 70%),var(--bg);
  transition:opacity .3s ease;
}
.gate.leaving{opacity:0;pointer-events:none}
.gate-card{
  width:min(420px,100%);padding:var(--s-8) var(--s-6) var(--s-6);text-align:center;
  background:rgba(12,21,48,.82);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-modal);
  backdrop-filter:blur(6px);
}
.gate-logo{
  width:170px;height:auto;display:block;margin:0 auto var(--s-4);
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 84%,transparent 100%);
  mask-image:radial-gradient(circle closest-side at 50% 50%,#000 84%,transparent 100%);
}
.gate h1{
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2);
}
.gate-sub{color:var(--muted);margin:var(--s-2) 0 var(--s-5);min-height:2.6em}
.gate-actions{display:flex;flex-direction:column;gap:var(--s-2);align-items:center;min-height:44px;justify-content:center}
.gate-actions .btn{min-width:200px;height:42px;font-size:var(--fs-md)}
.gate-foot{margin-top:var(--s-5);font-size:var(--fs-xs);color:var(--faint)}
.fuse-line{position:relative;width:160px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.fuse-line::before{
  content:"";position:absolute;inset:0 auto 0 -40%;width:40%;
  background:linear-gradient(90deg,transparent,var(--gold),#fff);animation:fuse 1.1s linear infinite;
}

/* ---------- 16. views ---------- */
/* inventory */
.inv-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-5);flex-wrap:wrap}
.filters{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.filters .spacer{flex:1}
.drawer-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);margin-bottom:var(--s-4)}
.drawer-stats .stat{min-width:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px var(--s-4);font-size:var(--fs-sm)}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;display:grid;grid-template-columns:54px 1fr;gap:var(--s-3);padding:10px 0;border-bottom:1px solid rgba(30,45,87,.55)}
.timeline li:last-child{border-bottom:0}
.tl-delta{
  align-self:start;justify-self:start;min-width:48px;padding:3px 8px;border-radius:var(--r-sm);text-align:center;
  font-weight:700;font-size:var(--fs-sm);font-variant-numeric:tabular-nums;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
}
.tl-delta.up{color:var(--ok);border-color:rgba(119,217,174,.4);background:var(--ok-tint)}
.tl-delta.down{color:var(--danger);border-color:var(--danger-deep);background:var(--danger-tint)}
.tl-delta.edit{color:var(--gold-2);border-color:rgba(229,181,68,.4);background:var(--gold-tint);font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;padding:5px 6px}
.tl-what{font-size:var(--fs-sm);overflow-wrap:anywhere}
.tl-what b{font-weight:600}
.tl-what .arrow{color:var(--gold);padding:0 4px}
.tl-meta{font-size:var(--fs-xs);color:var(--faint);margin-top:2px}

.preview-summary{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-3) 0}
.preview-wrap{max-height:min(46vh,520px);overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);container-type:inline-size}
.preview-wrap .table td{height:auto;padding-top:7px;padding-bottom:7px;white-space:normal;vertical-align:top;max-width:420px}
.preview-wrap .table th{background:#0f1a3a}
.row-problem td{background:rgba(255,122,122,.06) !important}
.problem-list{margin:0;padding:0;list-style:none;color:var(--danger);font-size:var(--fs-xs);line-height:1.5}
.note-list{margin:0;padding:0;list-style:none;color:var(--warn);font-size:var(--fs-xs);line-height:1.5}
.diff{font-size:var(--fs-xs);line-height:1.6}
.diff .f{color:var(--muted)}
.diff .o{color:var(--faint);text-decoration:line-through}
.diff .n{color:var(--gold-2);font-weight:600}

.drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);text-align:center;
  padding:var(--s-8) var(--s-5);border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);
  background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;
  transition:border-color var(--t),background var(--t);
}
.drop:hover,.drop.over,.drop:focus-visible{border-color:var(--gold);background:var(--gold-tint)}
.drop b{color:var(--text)}
.cols-hint{font-size:var(--fs-xs);color:var(--faint);line-height:1.6}
.cols-hint code{
  display:inline-block;margin:1px 0;padding:0 6px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);
  color:var(--muted);font-family:inherit;font-size:var(--fs-2xs);
}
.suggest{margin-top:6px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.suggest-head{padding:6px 10px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);background:var(--bg)}
.suggest button{
  display:flex;width:100%;align-items:center;gap:var(--s-3);padding:8px 10px;background:none;border:0;border-top:1px solid var(--line);
  text-align:left;cursor:pointer;font-size:var(--fs-sm);color:var(--text);transition:background var(--t-fast);
}
.suggest button:hover,.suggest button:focus-visible{background:var(--blue-tint);outline:none}
.suggest .t{flex:1;min-width:0}
.picked{
  display:flex;align-items:center;gap:var(--s-3);padding:10px 12px;border-radius:var(--r-md);
  background:var(--gold-tint);border:1px solid rgba(229,181,68,.45);
}
.picked .t{flex:1;min-width:0}

/* wheel (views/wheel.js and views/wheel/) */
.chip--plain{padding:0 11px}
.chip--warn{background:var(--warn-tint);border-color:rgba(242,176,94,.55);color:var(--warn)}
.chip--danger{background:var(--danger-tint);border-color:var(--danger-deep);color:var(--danger)}
.chip--info{background:var(--blue-tint);border-color:rgba(63,127,224,.55);color:var(--blue-2)}
.chip--ok{background:var(--ok-tint);border-color:rgba(119,217,174,.45);color:var(--ok)}
.chips{display:flex;gap:6px;flex-wrap:wrap}

/* the calculator: inputs on the left, live results on the right */
.wheel-grid{display:grid;grid-template-columns:minmax(430px,540px) minmax(0,1fr);gap:var(--s-4);align-items:start}
.wheel-col{display:grid;gap:var(--s-4);min-width:0}
.wheel-status{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--muted)}
.field .hint.is-derived{color:var(--gold-2);font-weight:600}
.field .hint.is-error{color:var(--danger)}
@media (max-width:1240px){.wheel-grid{grid-template-columns:1fr}}
.price-row{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:var(--s-3);align-items:end}

.tier-table{display:grid;gap:6px}
.tier-row{display:grid;grid-template-columns:22px minmax(0,1fr) 72px 104px 116px 30px;gap:6px;align-items:center}
.tier-row--head{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:0 2px}
.tier-row--head .num{padding-right:12px}
.tier-move{display:grid;gap:1px}
.tier-move button{
  width:22px;height:17px;padding:0;display:grid;place-items:center;border-radius:5px;cursor:pointer;
  background:none;border:1px solid transparent;color:var(--faint);transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.tier-move button:hover:not(:disabled){color:var(--gold-2);background:var(--surface-2);border-color:var(--line)}
.tier-move button:disabled{opacity:.3;cursor:not-allowed}
.tier-prizes{
  height:var(--control-h);padding:0 10px;border-radius:var(--r-md);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--surface);border:1px dashed var(--line-strong);color:var(--muted);font-size:var(--fs-xs);font-weight:600;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.tier-prizes:hover{border-color:var(--gold);color:var(--gold-2)}
.tier-prizes.has{border-style:solid;color:var(--text);background:var(--surface-2)}
.tier-prizes.full{border-color:rgba(119,217,174,.5);color:var(--ok)}
.tier-prizes.over{border-color:var(--danger-deep);color:var(--danger)}
.tier-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-2)}

/* a section that opens and closes (fees and cost assumptions) */
.disclosure{border-top:1px solid var(--line);margin-top:var(--s-4);padding-top:var(--s-3)}
.disclosure-btn{
  display:flex;align-items:center;gap:var(--s-2);width:100%;padding:4px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color var(--t-fast);
}
.disclosure-btn:hover{color:var(--gold-2)}
.disclosure-btn .caret{margin-left:auto}
.disclosure-body{padding-top:var(--s-3)}

/* a list of label / value facts */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px var(--s-4);margin:0;font-size:var(--fs-sm)}
.facts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);min-width:0;border-bottom:1px dashed rgba(30,45,87,.7);padding-bottom:4px}
.facts dt{color:var(--muted);white-space:nowrap}
.facts dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.facts dd.gold{color:var(--gold-2)}
.problem-lines{margin:0;padding:0 0 0 18px;display:grid;gap:4px}

/* small plain tables inside panels (price ladder, tier shares, survival) */
.mini-wrap{overflow-x:auto}
.mini{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.mini th{
  padding:6px 10px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line);
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.mini td{padding:7px 10px;border-bottom:1px solid rgba(30,45,87,.55);white-space:nowrap;font-variant-numeric:tabular-nums}
.mini tr:last-child td{border-bottom:0}
.mini th.num,.mini td.num{text-align:right}
.mini td.pos{color:var(--ok)} .mini td.neg{color:var(--danger)}
.mini tr.is-mark td{background:var(--gold-tint)}
.mini tr.is-mark td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.mini .heat{display:inline-block;min-width:54px;padding:1px 6px;border-radius:5px;text-align:right}
.mini-note{font-size:var(--fs-xs);color:var(--faint);margin-top:var(--s-2);line-height:1.5}

/* Recommend */
.rec-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.rec-card{
  position:relative;display:grid;gap:var(--s-3);padding:var(--s-4);min-width:0;
  background:linear-gradient(160deg,var(--surface-2) 0%,var(--surface) 70%);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  transition:border-color var(--t),box-shadow var(--t);
}
.rec-card:hover{border-color:rgba(229,181,68,.6);box-shadow:var(--sh-2)}
.rec-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--gold-grad)}
.rec-card--safe::before{background:var(--ok)}
.rec-card--aggressive::before{background:var(--warn)}
.rec-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.rec-name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);letter-spacing:.05em;text-transform:uppercase;color:var(--gold-2)}
.rec-profit{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1.15;font-variant-numeric:tabular-nums}
.rec-profit.pos{color:var(--ok)} .rec-profit.neg{color:var(--danger)}
.rec-profit small{display:block;font-family:var(--font);font-size:var(--fs-xs);font-weight:500;color:var(--muted)}
.rec-why{font-size:var(--fs-sm);color:var(--text);line-height:1.5}
.rec-source{font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
.rec-actions{display:flex;gap:var(--s-2);flex-wrap:wrap}
.rec-detail{display:grid;gap:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line)}
.rec-detail h4{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.rec-list{margin:0;padding:0;list-style:none;display:grid;gap:3px;font-size:var(--fs-sm)}
.rec-list li{display:flex;align-items:baseline;gap:var(--s-2);min-width:0}
.rec-list .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-list .n{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rec-warnings{margin:0;padding:0 0 0 18px;display:grid;gap:4px;font-size:var(--fs-xs);color:var(--warn);line-height:1.45}

/* the prize picker */
.pick-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pick{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:var(--s-3);align-items:center;padding:8px 10px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
}
.pick .t{min-width:0}
.pick .t b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick .t span{display:block;font-size:var(--fs-xs);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick .stepper{width:112px;height:32px}
.pick .stepper button{width:30px}
.pick-add{display:grid;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.02)}
.pick-results{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.pick-results li+li{border-top:1px solid var(--line)}
.pick-results button{
  display:flex;width:100%;align-items:center;gap:var(--s-3);padding:8px 10px;background:none;border:0;text-align:left;cursor:pointer;
  font-size:var(--fs-sm);color:var(--text);transition:background var(--t-fast);
}
.pick-results button:hover:not(:disabled),.pick-results button:focus-visible{background:var(--blue-tint);outline:none}
.pick-results button:disabled{opacity:.5;cursor:not-allowed}
.pick-results .t{flex:1;min-width:0}
.pick-results .t b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-results .t span{display:block;font-size:var(--fs-xs);color:var(--faint)}
.pick-results .n{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted);font-size:var(--fs-xs);text-align:right}
.pick-empty{padding:var(--s-5);text-align:center;color:var(--faint);font-size:var(--fs-sm)}

/* confirm lists (Mark as Used, Finish the show) */
.check-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-md);max-height:min(40vh,360px);overflow-y:auto}
.check-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s-3);align-items:center;padding:8px 12px;font-size:var(--fs-sm)}
.check-list li+li{border-top:1px solid rgba(30,45,87,.55)}
.check-list li.is-short{background:var(--danger-tint)}
.check-list .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.check-list .t small{display:block;color:var(--faint);font-size:var(--fs-xs)}
.check-list .n{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
.check-list .q{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.check-list .input{width:76px;height:32px}
.dialog-section{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin:var(--s-4) 0 var(--s-2)}
.dialog-section:first-child{margin-top:0}
.finish-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2)}

/* tally: prizes won so far, ticked off during the show */
.tally{display:grid;gap:6px}
.tally-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s-3);align-items:center;font-size:var(--fs-sm)}
.tally-row .stepper{width:124px;height:32px}
.tally-row .stepper button{width:32px}
.tally-row .left{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* the stream card: what viewers are shown */
.card-stage{display:grid;justify-items:center;gap:var(--s-4)}
.card-tools{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;justify-content:center}
.stream-card{
  position:relative;overflow:hidden;width:min(100%,1180px);aspect-ratio:16 / 9;container-type:inline-size;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  background:radial-gradient(120% 90% at 0% 0%,rgba(45,105,215,.35),transparent 60%),linear-gradient(140deg,#0a1230 0%,var(--bg) 70%);
  border:1px solid rgba(229,181,68,.45);border-radius:22px;box-shadow:var(--sh-modal);color:var(--text);
}
.stream-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(247,217,138,.12),inset 0 0 90px rgba(6,11,26,.6)}
.sc-left{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:4.2cqw 3.4cqw;border-right:1px solid rgba(229,181,68,.22)}
.sc-brand{display:flex;align-items:center;gap:1.4cqw}
.sc-brand img{
  width:8.4cqw;height:8.4cqw;display:block;
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 84%,transparent 100%);
  mask-image:radial-gradient(circle closest-side at 50% 50%,#000 84%,transparent 100%);
}
.sc-brand b{font-family:var(--font-display);font-size:1.9cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);line-height:1.15}
.sc-brand b small{display:block;font-family:var(--font);font-size:1.05cqw;font-weight:600;letter-spacing:.24em;color:var(--muted)}
.sc-title{font-family:var(--font-display);font-weight:700;font-size:3.1cqw;line-height:1.12;letter-spacing:.03em;color:var(--text);overflow-wrap:anywhere}
.sc-odds{font-family:var(--font-display);font-weight:700;line-height:.95;color:var(--gold-2);text-shadow:0 0 34px rgba(229,181,68,.4)}
.sc-odds small{display:block;font-family:var(--font);font-size:1.5cqw;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);text-shadow:none;margin-bottom:.8cqw}
.sc-odds span{font-size:9.4cqw;letter-spacing:.02em;white-space:nowrap}
.sc-odds--long span{font-size:6.9cqw}      /* "1 in 4.8" */
.sc-odds--xlong span{font-size:5.6cqw}     /* "1 in 12.5" */
.sc-dense .sc-right{gap:.7cqw;padding-top:2cqw;padding-bottom:2cqw}
.sc-dense .sc-tier{padding:.6cqw 1.4cqw}
.sc-dense .sc-count{font-size:2.2cqw}
.sc-dense .sc-count small,.sc-dense .sc-prizes,.sc-dense .sc-value small{display:none}
.sc-dense .sc-tier-name{font-size:1.5cqw}
.sc-meta{display:grid;gap:.5cqw;font-size:1.55cqw;color:var(--muted)}
.sc-meta b{color:var(--text);font-weight:700}
.rec-card:only-child{max-width:780px}
.sc-live{display:inline-flex;align-items:center;gap:.8cqw;justify-self:start;padding:.5cqw 1.3cqw;border-radius:var(--r-pill);border:1px solid rgba(119,217,174,.5);background:var(--ok-tint);color:var(--ok);font-size:1.5cqw;font-weight:700}
.sc-right{position:relative;display:flex;flex-direction:column;gap:1.3cqw;padding:3.4cqw 3.4cqw;min-height:0;justify-content:center}
.sc-tier{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.6cqw;align-items:center;padding:1.3cqw 1.6cqw;border-radius:1.2cqw;background:rgba(12,21,48,.72);border:1px solid var(--line)}
.sc-tier:first-child{border-color:rgba(229,181,68,.6);background:linear-gradient(95deg,rgba(229,181,68,.16),rgba(12,21,48,.72))}
.sc-count{font-family:var(--font-display);font-weight:700;font-size:3.2cqw;line-height:1;color:var(--gold-2);min-width:6.2cqw;text-align:center;font-variant-numeric:tabular-nums}
.sc-count small{display:block;font-family:var(--font);font-size:1cqw;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:.4cqw}
.sc-tier-name{font-family:var(--font-display);font-weight:700;font-size:1.9cqw;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.sc-prizes{font-size:1.25cqw;color:var(--muted);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sc-value{font-size:1.6cqw;font-weight:700;color:var(--text);white-space:nowrap;text-align:right}
.sc-value small{display:block;font-size:1cqw;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sc-foot{font-size:1.1cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
@media print{
  body{overflow:visible;background:#fff}
  .nav,.topbar,.fuse,.toasts,.no-print{display:none !important}
  .app{display:block;height:auto}
  .main{display:block}
  #view{overflow:visible}
  .page{padding:0;max-width:none}
  .stream-card{width:100%;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* placeholders ("coming next") */
.soon-hero{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-6);align-items:center;
  margin-top:var(--s-5);padding:var(--s-6);
  background:linear-gradient(120deg,var(--surface) 0%,#0e1a40 100%);border:1px solid var(--line);border-radius:var(--r-xl);
}
.soon-hero::after{
  content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(45,105,215,.3),transparent 70%);
}
.soon-hero p{color:var(--text);font-size:var(--fs-lg);line-height:1.6;max-width:72ch;margin-top:var(--s-3)}
.soon-art{position:relative;z-index:1;opacity:.95}
.soon-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:var(--s-3)}
.soon-card{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start;padding:var(--s-4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--t);
}
.soon-card:hover{border-color:var(--line-strong)}
.soon-num{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid rgba(229,181,68,.5);background:var(--gold-tint);color:var(--gold-2);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);
}
.soon-card h3{font-size:var(--fs-md);font-weight:700}
.soon-card p{color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
.soon-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-8)}
.soon-foot{margin-top:var(--s-6);display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;color:var(--faint);font-size:var(--fs-sm)}

/* money (views/money.js and views/money/) */
/* a sentence of explanation under tiles or a table */
.money-lead{color:var(--muted);font-size:var(--fs-sm);line-height:1.55;max-width:96ch}
/* the profit-rule options on the overview: what it decides, the choice, and whether it is confirmed */
.money-rule{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px) minmax(210px,auto);gap:var(--s-3) var(--s-5);align-items:center;
  padding:var(--s-4) 0;border-bottom:1px solid var(--line);
}
.money-rule:first-child{padding-top:0}
.money-rule:last-child{border-bottom:0;padding-bottom:0}
.money-rule h3{font-size:var(--fs-md);font-weight:700;color:var(--text)}
.money-rule p{margin-top:2px;color:var(--muted);font-size:var(--fs-sm);line-height:1.5;max-width:78ch}
.money-rule p.means{margin-top:var(--s-2);padding-left:var(--s-3);border-left:2px solid var(--gold);color:var(--text)}
.money-rule-state{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-wrap:wrap}
@media (max-width:1180px){
  .money-rule{grid-template-columns:minmax(0,1fr) minmax(200px,260px)}
  .money-rule-state{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:760px){.money-rule{grid-template-columns:1fr}}
/* profit periods: each row of numbers sits on the sentence that explains it */
.table.money-periods{min-width:980px}
.table.money-periods tbody tr td{background:none}
.table.money-periods tbody tr.money-period td{border-bottom:0;height:40px;padding-bottom:2px}
.table.money-periods tbody tr.money-explain td{
  height:auto;padding-top:0;padding-bottom:var(--s-3);max-width:none;white-space:normal;overflow:visible;
  color:var(--muted);font-size:var(--fs-xs);line-height:1.5;
}
.table.money-periods tbody tr.money-explain .badge{margin-left:var(--s-2);vertical-align:middle}
.table.money-periods tbody tr.money-explain:last-child td{border-bottom:0}
.table.money-periods tbody tr.money-period:hover td,
.table.money-periods tbody tr.money-period:hover + tr.money-explain td,
.table.money-periods tbody tr.money-period:focus-visible + tr.money-explain td{background:var(--blue-tint)}
.money-note{display:block;margin-top:2px;color:var(--faint)}
/* the reimbursed cell holds a badge and its button side by side */
.table td.money-pay{overflow:visible}
.table td.money-pay .btn{margin-left:var(--s-2);vertical-align:middle}
.table td.td-actions .btn{vertical-align:middle}
/* P&L and sales tax: row headings on the left, results set apart */
.table.money-pnl{min-width:780px}
.table.money-pnl tbody th{
  height:40px;padding:6px 12px 6px 16px;text-align:left;font-weight:500;color:var(--text);white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.table.money-pnl tbody td{border-bottom:1px solid var(--line)}
.table.money-pnl tbody tr:last-child th{border-bottom:0}
.table.money-pnl tbody tr.is-result th,.table.money-pnl tbody tr.is-result td{
  font-weight:700;border-top:1px solid var(--line-strong);background:var(--gold-tint);
}
.table.money-pnl tbody tr.is-result th{color:var(--gold-2)}
.table.money-pnl .td-sub{white-space:normal}

/* mail */
.mail-card{
  max-width:560px;margin:var(--s-10) auto 0;padding:var(--s-8);text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
}
.mail-card p{color:var(--muted);margin:var(--s-2) auto var(--s-5);max-width:44ch}
.mail-card .btn{height:44px;padding:0 26px;font-size:var(--fs-md)}

/* shows (views/shows.js and views/shows/) */
/* the two list tables scroll sideways inside their own box before a column gets too narrow to read */
.show-log .table--fixed{min-width:1280px}
.show-boards .table--fixed{min-width:1580px}
.show-log .table td,.show-boards .table td{height:48px}
.show-log .td-sub,.show-boards .td-sub{white-space:nowrap}
.show-tile-skel{width:58%;height:18px;margin:9px 0 8px}
/* the worked-out numbers under the show form: they stay in view while the fields above are typed */
.show-calc{
  position:sticky;bottom:0;z-index:3;margin:0 calc(var(--s-5) * -1);
  padding:var(--s-3) var(--s-5) var(--s-4);background:var(--bg-raise);
  border-top:1px solid rgba(229,181,68,.35);box-shadow:0 -12px 24px rgba(0,0,0,.35);
}
.show-calc-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);font-size:var(--fs-2xs)}
.show-calc-title{
  display:inline-flex;align-items:center;gap:6px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);
}
.show-calc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2);margin:var(--s-2) 0 0}
.show-calc-item{
  min-width:0;padding:6px 10px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);
  transition:border-color var(--t),background var(--t);
}
.show-calc-item dt{
  font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.show-calc-item dd{
  margin:1px 0 0;font-weight:700;font-size:var(--fs-md);color:var(--text);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.show-calc-item.is-blank dd{color:var(--faint);font-weight:500}
.show-calc-item[data-k="avg"]:not(.is-blank){border-color:rgba(229,181,68,.45);background:var(--gold-tint)}
.show-calc-item[data-k="avg"]:not(.is-blank) dd{color:var(--gold-2)}
.show-calc-item.is-pos{border-color:rgba(119,217,174,.4);background:var(--ok-tint)}
.show-calc-item.is-pos dd{color:var(--ok)}
.show-calc-item.is-neg{border-color:var(--danger-deep);background:var(--danger-tint)}
.show-calc-item.is-neg dd{color:var(--danger)}
.show-calc-note{margin-top:var(--s-2);font-size:var(--fs-2xs);line-height:1.5;color:var(--faint)}
.show-more{display:grid;gap:var(--s-2);padding-top:var(--s-2)}
/* one comparable board, opened from its row */
.board-kv{grid-template-columns:minmax(120px,auto) 1fr;gap:8px var(--s-5)}
.board-kv dt{white-space:nowrap}
.board-notes{font-size:var(--fs-sm);line-height:1.6;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
/* the "From Whatnot report" preview */
.report-file{
  display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;margin-left:auto;
  font-size:var(--fs-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.report-cols{max-height:min(34vh,340px)}
.report-rows{max-height:min(30vh,300px)}
.report-rows .table td,.report-rows .table th{white-space:nowrap;max-width:260px;vertical-align:middle}
@media (max-width:760px){
  .show-calc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* a short window: the numbers sit under the form instead of covering part of it */
@media (max-height:720px){
  .show-calc{position:static;box-shadow:none}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  :root{--nav-w:68px}
  .brand{justify-content:center;padding-left:0;padding-right:0}
  .brand-name,.nav-link .lbl,.nav-link .soon,.nav-group,.nav-foot .txt{display:none}
  .nav-link{justify-content:center;padding:0}
  .nav-link[aria-current="page"]::before{left:-12px}
  .nav-foot{align-items:center;padding-left:var(--s-2);padding-right:var(--s-2)}
  .nav-foot .badge{display:none}   /* the top bar already says "Local development mode" */
}
@media (max-height:820px){
  .page--fill .page-sub{display:none}
  .page--fill{padding-top:var(--s-4);gap:var(--s-2)}
}
/* laptop width: the totals sit beside the tabs instead of taking a row of their own */
@media (max-width:1440px){
  .inv-top .stat{min-width:0;padding:5px 12px}
  .inv-top .stat-value{font-size:1.02rem}
  .inv-top .stat-sub{display:none}
}
@media (max-width:760px){
  .form-grid,.form-grid--3{grid-template-columns:1fr}
  .form-grid--3 .span-2{grid-column:auto}
  .soon-hero{grid-template-columns:1fr}
  .soon-art{display:none}
  .topbar{padding:0 var(--s-4)}
  .page{padding:var(--s-4)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .fuse::before,.fuse-line::before{animation:none;left:0;width:100%;opacity:.6}
  .spark,.bomb-spark{animation:none}
}