/* OTB theme — "Slab Label" (chosen 2026-09-29).
   Light paper app, white label panels, an ink sidebar. The idea is borrowed
   from a PSA slab label: a strict typographic record with a red top edge and
   a boxed grade. Red is RARE: the top edge of record panels (partner, show,
   slab), the primary action, and real problems. Everything else is ink.

   Pages load this AFTER their own <style>, so these tokens and base rules
   win. Page-specific components keep their own rules but should only use the
   tokens below. Rules of the house:
     - one headline number per screen; everything else table-sized
     - section headings are sentence case (h2), never tiny caps
     - Archivo Narrow caps ONLY on label strips (.strip), like a slab label
     - money, certs and counts in JetBrains Mono, tabular, right-aligned
     - no green/red number colouring; negatives are "−$6.42" in ink
     - status reads in words + a small mark (● approved, ○ pending, ✕ rejected) */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Archivo+Narrow:wght@600&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root{
  /* paper + ink */
  --bg:#F3F2EE;          /* page */
  --surface:#FFFFFF;     /* label panel */
  --surface-2:#F8F7F4;   /* inputs, hovered rows, secondary fills */
  --line:#E4E2DC;        /* hairline rules, panel edge */
  --line-2:#CFCCC4;      /* input borders, stronger rules */
  --ink:#14171A;         /* text */
  --ink-2:#3A3F46;       /* secondary text */
  --ink-3:#5B6470;       /* steel: metadata, labels (4.9:1 on white) */
  --red:#E01B24;         /* signal red: slab edge, primary action, problems */
  --red-ink:#B3151C;     /* red text on white (5.9:1) */
  --good:#1F7A4D;        /* status mark only */
  --warn:#A86A00;        /* status mark only */
  --bad:#B3151C;         /* status mark / error text */
  --blue:#2A5DB0;        /* personal-money series only */
  /* chart series, validated (light, on white): deep + light steel-blue differ in
     lightness, loss is red ink. See finances.html charts. */
  --viz-1:#2A4F8C;
  --viz-2:#739FE8;
  --viz-loss:var(--red-ink);
  --radius:3px;
  --font:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-narrow:"Archivo Narrow","Archivo",ui-sans-serif,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}

body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased}

/* ---- panels ---------------------------------------------------------------- */
.card{background:var(--surface);border:0;border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--line)}
/* a RECORD panel (a partner, a show, a slab) gets the slab's red top edge */
.card.record,.slab{border-top:2px solid var(--red)}

/* ---- type ---------------------------------------------------------------------- */
h1,.view-title{font-family:var(--font);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.view-title{font-size:26px}
.view-sub{color:var(--ink-3);font-size:14.5px}
h2{font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.strip{font-family:var(--font-narrow);font-weight:600;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.num,.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.hint{color:var(--ink-3)}
.muted{color:var(--ink-3)}
a{color:var(--ink)}
a:hover{color:var(--red-ink)}

/* the boxed "grade": one key figure per record (share %, rank, a slab's grade) */
.grade{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:70px;
  border:2px solid var(--ink);border-radius:var(--radius);padding:5px 8px;background:var(--surface)}
.grade span{font-family:var(--font-narrow);font-weight:600;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.grade b{font-family:var(--font);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}

/* ---- numbers: ink, not traffic lights ------------------------------------------------ */
.pos{color:var(--ink)}
.neg{color:var(--ink)}
.loss{color:var(--red-ink)}          /* only for a real problem, e.g. a net loss total */

/* ---- controls ---------------------------------------------------------------------- */
input,select,textarea{background:var(--surface);border:1px solid var(--line-2);color:var(--ink);border-radius:var(--radius);font-family:var(--font)}
input::placeholder,textarea::placeholder{color:#8A9099}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:2px solid var(--ink);outline-offset:1px}
button{background:var(--surface);border:1px solid var(--line-2);color:var(--ink);border-radius:var(--radius);font-family:var(--font)}
button:hover{border-color:var(--ink);color:var(--ink)}
button.primary{background:var(--red);border-color:var(--red);color:#fff}
button.primary:hover{background:#C8161E;border-color:#C8161E;color:#fff;filter:none}
button.secondary{border:2px solid var(--ink);background:var(--surface);font-weight:600}
button.link{color:var(--ink-2);background:none;border:0}
button.x{color:var(--ink-3)}
button:disabled{opacity:.5;cursor:not-allowed}

/* ---- tables -------------------------------------------------------------------------- */
table{font-variant-numeric:tabular-nums}
th{font-family:var(--font);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3)}
td{border-top:1px solid var(--line)}
td.r,th.r{text-align:right}
td.r{font-family:var(--font-mono);font-size:13.5px}
tr.total td,tr.tot td{border-top:2px solid var(--ink);font-weight:600}
tr.total,tr.tot{border-top:2px solid var(--ink)}   /* keeps the heavy rule when a table stacks on phones */

/* ---- status: words first, a small mark second --------------------------------------------- */
/* the words carry the meaning in ink; only the small mark takes a colour */
.pill{background:transparent;border:0;padding:0;border-radius:0;font-size:12.5px;font-weight:500;color:var(--ink-2);
  letter-spacing:0;text-transform:none;white-space:nowrap}
.pill::before{content:"●";margin-right:5px;font-size:10px;vertical-align:1px;color:var(--ink-3)}
.pill.pending::before,.pill.new::before{color:var(--warn)}
.pill.pending::before{content:"○"}
.pill.approved::before,.pill.update::before,.pill.matched::before,.pill.in_stock::before{color:var(--good)}
.pill.sold::before{content:"○";color:var(--ink-3)}
.pill.unmatched::before{content:"○";color:var(--warn)}
.pill.rejected,.pill.error,.pill.already_sold{color:var(--bad)}
.pill.rejected::before,.pill.error::before,.pill.already_sold::before{content:"✕";color:var(--bad)}

/* ---- toasts ---------------------------------------------------------------------------- */
.toast{background:var(--ink);color:#FAFAF8;border:0;border-radius:var(--radius);box-shadow:0 8px 24px rgba(20,23,26,.18);
  bottom:24px;padding:10px 16px;font-size:14px}   /* same spot and size on every page */
.toast.bad{background:var(--red-ink)}

/* ==== added for Home / Inventory / My portal (safe to use on any page) ==================== */

/* the ONE headline number on a screen */
.headline{font-family:var(--font);font-size:44px;font-weight:600;letter-spacing:-.02em;line-height:1.05;
  font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:600px){.headline{font-size:36px}}

/* a white label panel with no chrome of its own: use .card for boxed sections,
   .panel when the content brings its own padding (lists, tables) */
.panel{background:var(--surface);border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--line)}

/* a plain list of rows on a panel: title left, figure right, meta under */
.rows{list-style:none;margin:0;padding:0}
.rows > li,.rows > .ri{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;
  padding:12px 16px;border-top:1px solid var(--line)}
.rows > li:first-child,.rows > .ri:first-child{border-top:0}
.rows .t{font-weight:600;min-width:0}
.rows .m{grid-column:1;color:var(--ink-3);font-size:13px}
.rows .v{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap}
.rows .vm{text-align:right;color:var(--ink-3);font-size:13px;white-space:nowrap}
a.ri{color:inherit;text-decoration:none}
a.ri:hover{background:var(--surface-2);color:inherit}

/* a PSA-style slab label, one per slab: year/set strip, the card in bold, cert in mono,
   grade boxed on the right. Rows sit inside a .panel list divided by hairlines; the
   red top edge is only for a single slab shown on its own (add .slab to that one). */
.slabrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"main fig grade";gap:4px 18px;
  align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.slabrow:first-child{border-top:0}
.slabrow.slab{background:var(--surface);border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--line);border-top:2px solid var(--red);padding:14px 16px}
.slabrow .main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:1px}
.slabrow .fig{grid-area:fig;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.slabrow .fig .mono{font-size:14px}
.slabrow .grade{grid-area:grade}
.slabrow .strip{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slabrow .who{display:block;font-weight:600;font-size:15.5px;line-height:1.3}
.slabrow .meta{display:block;font-size:13px;color:var(--ink-3)}
.slabrow .meta .mono{color:var(--ink-2);font-size:12.5px}
@media (max-width:600px){
  .slabrow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main grade" "fig fig";padding:12px 14px}
  .slabrow .fig{flex-direction:row;justify-content:space-between;align-items:baseline;text-align:left;width:100%}
}
.grade.sm{min-width:54px;padding:3px 6px}
.grade.sm b{font-size:17px}

/* empty / loading / error states, in plain words */
.empty{color:var(--ink-3);font-size:14px;padding:14px 16px}
.empty.err{color:var(--bad)}
/* inside a padded .card the words line up with the card's own content, on every page */
.card .empty{padding:12px 0;text-align:left}

/* big touch buttons (phone actions) */
button.big{min-height:52px;font-size:15px;font-weight:600;padding:0 16px}

/* phones: 16px inputs so iOS never zooms the page on focus */
@media (max-width:600px){input,select,textarea{font-size:16px}}

/* ==== shared frame + phone ergonomics (QA pass 2026-09-29) ============================ */

/* ONE page frame for every shell page, so the title never jumps sideways or down
   when you move between Home, Finances, Team and Inventory */
body.shell .wrap{max-width:1120px;margin:0 auto;padding:32px 32px 96px}
@media (max-width:900px){body.shell .wrap{padding:20px 16px 88px}}

/* file pickers look like our own buttons on every page */
input[type=file]::file-selector-button{font:inherit;font-weight:600;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:4px 12px;margin-right:10px;cursor:pointer}

/* phones: every control is a 44px tap target and every field is 16px (pages set
   smaller sizes with class selectors, hence the weight here). Text-style buttons
   (.link) keep their inline layout and get an invisible 44px hit area instead. */
@media (max-width:600px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px!important}
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,button:not(.link){min-height:44px}
  button.link{position:relative}
  button.link::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
  summary{padding-block:12px;min-height:44px;box-sizing:border-box}
}