/* ============================================================
     DESIGN TOKENS: layer 1 of the design system. Every colour, size and font the app uses is
     named here once; the style library (app.css) and the screens read these names only.
     Dark is the default; [data-theme="light"] redefines the colour tokens (owner decision
     10 Oct 2026: add a light theme for outdoor shows, dark stays the default). The theme is a
     per-phone choice (Settings > Appearance), never synced business data.
     Contrast of every text token on every surface is checked by scripts/check-contrast.mjs.
     ============================================================ */
  :root{
    /* ground and surfaces: hierarchy comes from TONE, not from boxes */
    --canvas:#050505; --bg:#050505;
    --surface:#151515;
    --surface-2:#1F1F1E; --well-hover:#292927;
    --border:rgba(255,255,255,.06); --border-2:rgba(255,255,255,.06);
    --line-solid:#3A3A36; --line-dashed:#4A4A44;
    --tint-1:rgba(255,255,255,.03); --tint-2:rgba(255,255,255,.045);   /* press and stripe tints */
    /* text */
    --text:#F5F4F0; --body:#C9C9C3; --muted:#8A8A85; --muted-2:#868680;   /* was #7E7E78: below AA on cards */
    /* interactive = ink; there is no brand hue in this system */
    --primary:#F5F4F0; --primary-ink:#0A0A0A;
    --primary-soft:rgba(245,244,240,.12);
    /* data colours: reserved, never decorative (money in and profit, loss) */
    --green:#8FD0A0; --green-ink:#8FD0A0; --green-soft:rgba(143,208,160,.14);
    --accent:#E0907A; --accent-soft:rgba(224,144,122,.14);
    --warm:#F2A582;
    /* pop colours: flood a whole card, bring their own dark ink (same in both themes) */
    --citron:#C9F24D; --citron-ink:#132000;
    --ember:#F2632B;  --ember-ink:#1B0A00;
    --peri:#A8BEF9;   --peri-ink:#0A1030;
    /* tinted grounds behind the Bought / Cost and Trade / booked badges */
    --ember-soft:rgba(242,99,43,.14);
    --peri-soft:rgba(168,190,249,.14);
    --gold:#FFB03B;   --gold-ink:#1F1200;   /* analytics: shows family (was a citron alias; .rar now names citron) */
    --teal:#3FC9A9;   --teal-ink:#001A14;   /* analytics: sales family */
    --shadow:0 1px 2px rgba(0,0,0,.5);
    --shadow-lg:0 18px 50px rgba(0,0,0,.7);
    --brand-grad:#F5F4F0;              /* was a gradient: this system has none */
    --ink-on-light:#0A0A0A; --ink-on-dark:#FFFFFF;   /* text and icons on pop and member colours (uiInk) */
    --spark-fill:rgba(19,32,0,.18);     /* the shaded area under a sparkline on a pop card (same in both themes) */
    --scrim:rgba(10,12,18,.82);        /* dark chip behind text laid over card photos (same in both themes) */
    --theme-color:#050505;             /* the phone's status bar */
    /* space: one scale for every gap and padding */
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
    /* shape */
    --radius:24px; --radius-sm:16px; --radius-pill:999px;
    /* layout */
    --nav-h:66px; --max:760px; --touch:44px;
    /* type */
    --font-ui:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --font-num:"Bitter",Georgia,"Times New Roman",serif;
    --text-xs:11px; --text-sm:13px; --text-md:15px; --text-lg:17px; --text-xl:22px;
    /* motion */
    --ease-out:cubic-bezier(.33,1,.68,1); --dur-fast:.15s; --dur:.28s;
    color-scheme:dark;
  }
  /* LIGHT: warm paper, ink text, data colours deepened to keep their meaning and contrast */
  :root[data-theme="light"]{
    --canvas:#F4F3EF; --bg:#F4F3EF;
    --surface:#FFFFFF; --elev:#FFFFFF;
    --surface-2:#ECEBE6; --well-hover:#E3E2DC;
    --border:rgba(20,20,18,.09); --border-2:rgba(20,20,18,.09);
    --line-solid:#CFCEC6; --line-dashed:#B9B8AF;
    --tint-1:rgba(20,20,18,.04); --tint-2:rgba(20,20,18,.05);
    --text:#141412; --body:#3A3A35; --muted:#5F5F59; --muted-2:#66665F;
    --primary:#141412; --primary-2:#141412; --primary-ink:#FFFFFF;
    --primary-soft:rgba(20,20,18,.08);
    --green:#1E7A3C; --green-ink:#1E7A3C; --green-soft:rgba(30,122,60,.12);
    --accent:#B3472C; --accent-soft:rgba(179,71,44,.12);
    --warm:#B5602E;
    --amber:#C9501F; --amber-soft:rgba(201,80,31,.12);
    --purple:#3F5BB8; --purple-soft:rgba(63,91,184,.12);
    --gold:#5C7A00;
    --shadow:0 1px 2px rgba(20,20,18,.08);
    --shadow-lg:0 18px 50px rgba(20,20,18,.18);
    --brand-grad:#141412;
    --theme-color:#F4F3EF;
    color-scheme:light;
  }

@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
    --canvas:#F4F3EF; --bg:#F4F3EF;
    --surface:#FFFFFF; --elev:#FFFFFF;
    --surface-2:#ECEBE6; --well-hover:#E3E2DC;
    --border:rgba(20,20,18,.09); --border-2:rgba(20,20,18,.09);
    --line-solid:#CFCEC6; --line-dashed:#B9B8AF;
    --tint-1:rgba(20,20,18,.04); --tint-2:rgba(20,20,18,.05);
    --text:#141412; --body:#3A3A35; --muted:#5F5F59; --muted-2:#66665F;
    --primary:#141412; --primary-2:#141412; --primary-ink:#FFFFFF;
    --primary-soft:rgba(20,20,18,.08);
    --green:#1E7A3C; --green-ink:#1E7A3C; --green-soft:rgba(30,122,60,.12);
    --accent:#B3472C; --accent-soft:rgba(179,71,44,.12);
    --warm:#B5602E;
    --amber:#C9501F; --amber-soft:rgba(201,80,31,.12);
    --purple:#3F5BB8; --purple-soft:rgba(63,91,184,.12);
    --gold:#5C7A00;
    --shadow:0 1px 2px rgba(20,20,18,.08);
    --shadow-lg:0 18px 50px rgba(20,20,18,.18);
    --brand-grad:#141412;
    --theme-color:#F4F3EF;
    color-scheme:light;
  }}

/* TCG Ops operator app. Tokens come from the app (src/styles/tokens.css, added above by
   scripts/build-ops.mjs); light follows the computer's setting, or the theme toggle. Desktop first. */
@font-face{font-family:"Public Sans";src:url("publicsans.woff2") format("woff2-variations"),url("publicsans.woff2") format("woff2");font-weight:100 900;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--body);font:15px/1.5 var(--font-ui);-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--text);margin:0;letter-spacing:-.01em}
h1{font-size:24px}h2{font-size:17px;margin:24px 0 8px}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.pad{padding:24px}.muted{color:var(--muted)}.small{font-size:13px}.num{font-variant-numeric:tabular-nums}
.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.brand{font-weight:800;color:var(--text);padding:6px 10px 14px}
.nav{display:block;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--body)}
.nav.on{background:var(--surface-2);color:var(--text);font-weight:650}
.main{display:flex;flex-direction:column;min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--border)}
.top .grow{flex:1}
.capsule{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--surface-2);font-size:13px}
.capsule.bad{background:var(--accent-soft);color:var(--accent)}.capsule.good{background:var(--green-soft);color:var(--green)}
.page{padding:24px;max-width:1180px;width:100%}
.btn{border:1px solid var(--line-solid);background:var(--surface-2);border-radius:999px;padding:7px 14px;cursor:pointer}
.btn:hover{background:var(--well-hover)}
.btn.primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.btn.danger{color:var(--accent);border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}
.link{background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:16px 0}
.tile{background:var(--surface);border-radius:16px;padding:16px}
.tile b{display:block;font-size:28px;color:var(--text);font-variant-numeric:tabular-nums}
.card{background:var(--surface);border-radius:16px;padding:16px;margin:12px 0}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:13px}
tr.rowlink{cursor:pointer}tr.rowlink:hover{background:var(--tint-2)}
.inbox li{list-style:none;padding:10px 12px;border-radius:12px;background:var(--surface);margin:6px 0}
.inbox{padding:0;margin:0}
.lvl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:16px 0 4px}
.lvl1{color:var(--accent)}.lvl2{color:var(--warm)}.lvl3{color:var(--muted)}
.err{background:var(--accent-soft);color:var(--text);padding:14px;border-radius:12px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--surface-2);font-size:12px}
.tag.on{background:var(--green-soft);color:var(--green)}.tag.off{background:var(--accent-soft);color:var(--accent)}
.field{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.field label{font-size:13px;color:var(--muted)}
input,select,textarea{background:var(--surface-2);border:1px solid var(--line-solid);border-radius:10px;padding:8px 10px;width:100%}
textarea{min-height:90px;resize:vertical}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#overlay{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:10}
#overlay[hidden]{display:none}
.dialog{background:var(--surface);border-radius:18px;padding:20px;width:min(520px,92vw);box-shadow:var(--shadow-lg)}
.dialog h3{margin-bottom:8px}
.palette input{font-size:17px}
.palette ul{list-style:none;padding:0;margin:10px 0 0;max-height:50vh;overflow:auto}
.palette li{padding:8px 10px;border-radius:10px;cursor:pointer}
.palette li.on{background:var(--surface-2)}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--primary-ink);padding:10px 16px;border-radius:999px;z-index:20;display:flex;gap:12px;align-items:center}
#toast[hidden]{display:none}
#toast .link{color:inherit}
.login{max-width:380px;margin:12vh auto;padding:24px;background:var(--surface);border-radius:18px}
@media (max-width:800px){.shell{grid-template-columns:1fr}.side{flex-direction:row;overflow:auto}.brand{display:none}}