/* tokens.css — the Championship Dice League design tokens + shared components.
   Single source of truth for the palette, the metallic gold, shadows, radii,
   and the .btn / .pill / .inp components. Every page links this BEFORE its own
   <style> and aliases its local variable names to these tokens, so values
   can't drift between pages again. Edit colors HERE, nowhere else.

   Visual language (see docs/DESIGN_GUIDELINES.html): cast-brass gold lit from
   above; ONE structural claret (edge = felt = table); navy-leather vessel and
   red-felt field; "one lamp, one table" lighting with navy pads lifted by value
   + light and paper as the lit document. Older token names are kept as aliases
   so existing pages keep working. */

:root{
  /* ---- gold — cast brass, lit from above (matches the PLD monogram) ---- */
  --pld-gold:#c0922f;
  --pld-gold-bright:#e6c878;        /* gold text on navy / felt */
  --pld-gold-deep:#8a6618;          /* gold text on paper (contrast-safe) */
  --pld-gold-soft:#ecdcae;          /* pale gold wash */
  --pld-gold-ink:#2e2206;           /* text on a gold surface */
  --pld-gold-grad:linear-gradient(180deg,#ead7a0 0%,#d8b85f 20%,#c0922f 48%,#9c7322 74%,#7e5c1c 100%);
  --pld-gold-border:#5c4514;        /* warm dark contour, like the monogram outline */
  --pld-gold-bevel:inset 0 1px 0 rgba(255,246,214,.55),inset 0 -3px 5px rgba(80,58,12,.5),0 2px 6px rgba(0,0,0,.4);
  --pld-gold-text-shadow:0 1px 0 rgba(255,240,200,.35);

  /* ---- surfaces ---- */
  --pld-paper-1:#efe7d6; --pld-paper-2:#e6dcc6;
  --pld-paper-grad:linear-gradient(var(--pld-paper-1),var(--pld-paper-2));
  --pld-navy:#1c2a4d; --pld-navy-deep:#14213f; --pld-navy-raise:#243559;
  --pld-leather:#16223f;            /* the navy-leather base the texture sits on */
  --pld-bone:#f4ece0;               /* the white dice; light accents on dark */
  --pld-field:#0e1830;              /* input fields on navy */

  /* ---- claret — ONE structural red: edge = felt = table ---- */
  --pld-claret:#7e1b17;             /* badge edge / rims / accents */
  --pld-claret-felt:#6e1019;        /* the playing field / table */
  --pld-claret-deep:#5a0d14;        /* felt shadow / recess */
  --pld-claret-bright:#c14a3a;      /* claret text / accents on navy */
  --pld-felt-red:var(--pld-claret-felt);          /* back-compat alias */
  --pld-felt-red-deep:var(--pld-claret-deep);     /* back-compat alias */
  --pld-badge-red:var(--pld-claret);              /* back-compat alias */
  /* claret washes + hairlines (V-11): the fills are --pld-claret at alpha, the lines are
     --pld-claret-bright at alpha. Single home for the ~10 literals these replaced; edit the two
     RGB triples here and every done-pill / talk-box / here-row follows. */
  --pld-claret-wash-1:rgba(126,27,23,.22);        /* claret fill: done/complete pills */
  --pld-claret-wash-2:rgba(126,27,23,.16);        /* soft claret fill: the "here" door row */
  --pld-claret-line:rgba(193,74,58,.42);          /* claret hairline: pill + visit-bar borders */
  --pld-claret-line-strong:rgba(193,74,58,.5);    /* stronger claret edge: talk boxes */
  --pld-claret-line-hot:rgba(193,74,58,.6);       /* active claret edge: talk "on" */
  --pld-claret-line-soft:rgba(193,74,58,.28);     /* faint claret edge: "here" row */

  /* ---- ink ramps ---- */
  --pld-ink:#f5f1e8;               /* light text on navy */
  --pld-muted:#c3c9d6; --pld-faint:#95a0b4;
  --pld-page-ink:#16223f;          /* dark text on paper */
  --pld-page-muted:#5b5f6b;

  /* ---- status colors (one semantic set; danger kept apart from claret) ---- */
  --pld-ok:#3f9e6a;                /* ok/live as a fill */
  --pld-ok-bright:#7fd6a4;         /* ok/live as text on navy */
  --pld-danger:#cf3a33;            /* danger as a fill — brighter scarlet */
  --pld-danger-bright:#f0876b;     /* danger as text on navy */
  --pld-danger-line:rgba(207,58,51,.5);  /* danger borders/hairlines */
  --pld-danger-wash:rgba(207,58,51,.16); /* danger fills: error boxes, loser rows, hover washes */
  /* warn/waiting/worst-case — the amber ramp, promoted out of per-page --wc aliases (V-6). Also the
     "warning text" tone V-5 uses for live/consent lines (e.g. "everyone can hear you"). */
  --pld-warn:#e0a86a;              /* warn as a fill / left-edge accent */
  --pld-warn-bright:#f0c089;       /* warn as emphasis text on navy (countdowns, consent lines) */
  --pld-warn-ink:#f0d3b2;          /* warn as body text on navy */
  --pld-warn-line:rgba(224,168,106,.55); /* warn borders/hairlines */
  --pld-warn-wash:rgba(224,168,106,.18); /* warn fills: the seat-warm banner */

  /* ---- lines, shadows, radii ---- */
  --pld-line:rgba(255,255,255,.12);
  --pld-line-gold:rgba(192,146,47,.45);   /* gold hairline/border wash — retuned to the canonical gold (was legacy #c9a24a) */
  --pld-gold-wash-1:rgba(192,146,47,.12); /* faint gold wash: row tints, chip fills, hairline dividers */
  --pld-gold-wash-2:rgba(192,146,47,.28); /* strong gold wash: glows, selection flashes, scrollbar thumbs */
  --pld-gold-glow:rgba(192,146,47,.6);    /* luminous gold: turn pulses, cup glows, hot auras */
  --pld-shadow-sm:0 2px 7px rgba(0,0,0,.25);
  --pld-shadow-md:0 6px 18px rgba(20,25,45,.18);
  --pld-shadow-lg:0 16px 38px rgba(0,0,0,.45);
  --pld-radius-sm:9px; --pld-radius-md:13px; --pld-radius-lg:16px; --pld-radius-xl:18px;

  /* ---- type scale (Oswald display / system body) ---- */
  --pld-fs-1:29px; --pld-fs-2:24px; --pld-fs-3:20px;
  --pld-fs-4:17px; --pld-fs-5:14px; --pld-fs-6:12px;
  --pld-fs-7:11px; --pld-fs-8:10px; /* fs-8 is the LEGIBILITY FLOOR — nothing renders smaller */

  /* ---- light & material: one warm overhead lamp; dark rooms; lifted pads ----
     Use these for the great-dark surfaces. Texture URLs resolve from this file
     at the site root, i.e. /assets/*. */
  --pld-lamp:radial-gradient(ellipse 72% 56% at 50% -10%,rgba(255,231,182,.11),rgba(255,231,182,0) 60%);
  --pld-leather-room:var(--pld-lamp),linear-gradient(rgba(9,15,28,.55),rgba(6,10,20,.8)),#13203c url(assets/leather.jpg) repeat;
  --pld-felt-room:var(--pld-lamp),linear-gradient(rgba(20,4,7,.5),rgba(8,1,3,.78)),#6e1019 url(assets/felt.jpg) repeat;
  --pld-vignette:inset 0 0 170px 46px rgba(0,0,0,.5);
  --pld-card-navy:linear-gradient(162deg,#21315c,#15213c);     /* a navy pad, a step lighter than the ground */
  --pld-card-lift:inset 0 1px 0 rgba(255,255,255,.09),0 14px 30px rgba(0,0,0,.5);
  --pld-vellum:linear-gradient(168deg,#f6eed9,#ece0c4);        /* the lit paper document */
  --pld-vellum-line:#d8cba6; --pld-vellum-ink:#22304f; --pld-vellum-muted:#6e6047;
  --pld-paper-lift:0 26px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.6);
}

/* ---- buttons (canonical; pages must not redefine these) ---- */
.btn{border:none;border-radius:var(--pld-radius-sm);padding:10px 16px;
  font-family:'Oswald',-apple-system,sans-serif;text-transform:uppercase;letter-spacing:.04em;
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;text-align:center}
.btn.gold{background:var(--pld-gold-grad);color:var(--pld-gold-ink);
  border:1px solid var(--pld-gold-border);box-shadow:var(--pld-gold-bevel);text-shadow:var(--pld-gold-text-shadow)}
.btn.gold:hover{filter:brightness(1.05)}
.btn.dark{background:var(--pld-navy);color:var(--pld-ink);border:1px solid var(--pld-line)}
.btn.ghost{background:transparent;color:var(--pld-gold-bright);border:1px solid var(--pld-line-gold)}
.btn.claret{background:linear-gradient(180deg,#9a2a22,#6e1019);color:#f6e6df;
  border:1px solid #4f0d11;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.32)}
.btn.danger{background:var(--pld-danger);color:#fff;border:1px solid rgba(255,255,255,.15)}
.btn.sm{padding:7px 11px;font-size:12.5px}
.btn.xs{padding:4px 8px;font-size:11px}
.btn.big{padding:14px 24px;font-size:16px;width:100%}
.btn.dghost{background:transparent;color:var(--pld-danger-bright);border:1px solid var(--pld-danger-line)}
.btn.dghost:hover{background:var(--pld-danger-wash)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---- status pills (Draft / Live / Complete) ---- */
.pill{font-family:'Oswald',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:50px;font-weight:600;white-space:nowrap}
.pill.draft{background:rgba(255,255,255,.08);color:var(--pld-muted);border:1px solid var(--pld-line)}
.pill.running,.pill.live{background:rgba(63,158,106,.18);color:var(--pld-ok-bright);border:1px solid rgba(63,158,106,.4)}
.pill.complete,.pill.done{background:var(--pld-claret-wash-1);color:var(--pld-claret-bright);border:1px solid var(--pld-claret-line)}
.pill.scheduled{background:var(--pld-gold-wash-1);color:var(--pld-gold-bright);border:1px solid var(--pld-line-gold)}
.pill.reg{background:rgba(63,158,106,.16);color:var(--pld-ok-bright);border:1px solid rgba(63,158,106,.4)}
/* V-12: the two variants admin's .statepill dialect had that the canonical set lacked, hoisted here
   so status pills are one vocabulary. .sanct is the GOLD brand mark (never the claret 'done'). */
.pill.idle{background:var(--pld-navy-raise);color:var(--pld-muted)}
.pill.sanct{background:var(--pld-gold-wash-1);color:var(--pld-gold-bright);border:1px solid var(--pld-line-gold)}
/* Phase 3b (plan §8): "something is wrong" — the amber ramp finally gets a pill. Every other
   variant encodes lifecycle position; this one is for DIVERGED / pending / unclaimed states. */
.pill.warn{background:var(--pld-warn-wash);color:var(--pld-warn-bright);border:1px solid var(--pld-warn-line)}

/* ---- stat band (.f-groups/.f-grp/.gl/.gv/.sub), hoisted from index.css (RESULTS_PLAN §8):
   a bordered row of label-over-value groups. Navy by default; .pld-sheet re-inks it for paper
   THROUGH the material class — pages never hand-map these colors (that mapping is exactly how
   the palette drifted before). Pages size the VALUE type themselves: the landing band runs
   14px; the profile record card runs display-size. Margins stay page-local. ---- */
.f-groups{display:flex;flex-wrap:wrap;justify-content:center;width:fit-content;max-width:100%;
  border:1px solid var(--pld-line);border-radius:var(--pld-radius-md);overflow:hidden;background:rgba(0,0,0,.16)}
.f-grp{padding:12px 24px;border-left:1px solid var(--pld-line);text-align:center;min-width:152px}
.f-grp:first-child{border-left:none}
.f-grp .gl{font-family:'Oswald',sans-serif;font-size:var(--pld-fs-8);text-transform:uppercase;letter-spacing:.1em;color:var(--pld-faint);font-weight:600;margin-bottom:6px}
.f-grp .gv{font-size:14px;color:var(--pld-ink);font-weight:600;line-height:1.35}
.f-grp .gv .sub{display:block;font-size:12px;color:var(--pld-muted);font-weight:400;margin-top:2px}
@media(max-width:560px){.f-grp{padding:11px 16px;border-left:none;border-top:1px solid var(--pld-line);width:100%}.f-grp:first-child{border-top:none}}
.pld-sheet .f-groups{border-color:var(--pld-vellum-line);background:rgba(120,96,40,.05)}
.pld-sheet .f-grp{border-color:var(--pld-vellum-line)}
.pld-sheet .f-grp .gl{color:var(--pld-vellum-muted)}
.pld-sheet .f-grp .gv{color:var(--pld-gold-deep)}
.pld-sheet .f-grp .gv .sub{color:var(--pld-vellum-muted)}

/* ---- notes, hoisted from profile.css (RESULTS_PLAN §8): .note explains; .warn is the amber
   "here is why this looks like this" (pending addresses, under-the-floor stats); .danger is
   the caution accent a danger-family action carries. Margins stay page-local. ---- */
.note{background:var(--pld-navy-deep);border:1px solid var(--pld-line-gold);border-left:4px solid var(--pld-gold);border-radius:var(--pld-radius-sm);padding:12px 14px;font-size:13px;color:var(--pld-muted)}
.note.warn{border-color:var(--pld-warn-line);border-left-color:var(--pld-warn)}
.note.danger{border-color:var(--pld-danger-line);border-left-color:var(--pld-danger)}

/* ---- error note (canonical; pages must not redefine) ---- */
.errnote{background:var(--pld-navy-deep);border:1px solid var(--pld-danger-line);border-left:4px solid var(--pld-danger);
  color:var(--pld-danger-bright);border-radius:10px;padding:12px 14px;font-size:13.5px}

/* ---- inputs on navy surfaces ---- */
.inp{width:100%;padding:10px 12px;border:1px solid var(--pld-line);border-radius:var(--pld-radius-sm);
  font-size:15px;background:var(--pld-field);color:var(--pld-ink)}
.inp:focus{outline:2px solid var(--pld-gold-bright);border-color:var(--pld-gold)}
.inp::placeholder{color:var(--pld-faint)}

/* ---- material rooms + lifted pad (opt-in helpers) ----
   Add .pld-room-leather / .pld-room-felt to a full-bleed container, .pld-pad to a card. */
.pld-room-leather{background:var(--pld-leather-room);background-size:auto,auto,440px}
.pld-room-felt{background:var(--pld-felt-room);background-size:auto,auto,440px}
.pld-pad{background:var(--pld-card-navy);border:1px solid var(--pld-line-gold);box-shadow:var(--pld-card-lift)}

/* ---- material text contexts: put content ON a material and its ink ramp follows by
   definition — pages apply the class, they do not re-map colors (that hand-rolled mapping
   is exactly how the §1 drift happened).
   .pld-sheet   = the lit vellum document: sheet visuals + the dark ink ramp + light-paper
                  inputs (the admin ld-setup recipe, promoted to a component).
   .pld-on-navy = a navy pad's interior: the light ink ramp. Declared AFTER .pld-sheet ON
                  PURPOSE — equal specificity, later wins — so a navy pad nested inside a
                  sheet gets light text with no per-page re-assert lists. ---- */
.pld-sheet{background:var(--pld-vellum);border:1px solid var(--pld-vellum-line);box-shadow:var(--pld-paper-lift);color:var(--pld-vellum-ink)}
.pld-sheet h1,.pld-sheet h2,.pld-sheet h3,.pld-sheet h4{color:var(--pld-gold-deep)}
.pld-sheet p,.pld-sheet li{color:var(--pld-vellum-muted)}
.pld-sheet strong{color:var(--pld-vellum-ink)}
.pld-sheet label{color:var(--pld-vellum-muted)}
.pld-sheet .inp{background:#fffdf6;color:var(--pld-vellum-ink);border:1px solid var(--pld-vellum-line)}
.pld-sheet .inp::placeholder{color:#a99d80}
.pld-sheet .inp:focus{outline:2px solid var(--pld-gold);border-color:var(--pld-gold)}
.pld-sheet .inp[readonly]{background:#efe8d4;color:#8a7d5e}
.pld-sheet input[type="number"]{color-scheme:light}
.pld-sheet .btn.ghost{color:var(--pld-gold-deep);border-color:var(--pld-gold)}
.pld-sheet .btn.dghost{color:var(--pld-danger);border-color:var(--pld-danger)}
.pld-on-navy{color:var(--pld-ink)}
.pld-on-navy h2,.pld-on-navy h3,.pld-on-navy h4{color:var(--pld-gold-bright)}
.pld-on-navy p,.pld-on-navy li{color:var(--pld-muted)}
.pld-on-navy strong{color:var(--pld-ink)}
.pld-on-navy label{color:var(--pld-muted)}

/* ---- keyboard focus: bright gold — legible on navy, felt, and paper.
   (Resolves the old claret-ring vs. claret-rim collision.) ---- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,[role="link"]:focus-visible,
[role="tab"]:focus-visible,[role="radio"]:focus-visible,.btn:focus-visible{
  outline:3px solid var(--pld-gold-bright);outline-offset:2px}

/* ---- motion: respect the user's reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ── Site chrome (nav + footer), moved out of web/nav.ts's injected style tag so the CSP can
   drop style-src 'unsafe-inline' (F9). nav.ts still builds the DOM; this is its skin. ── */
.ldnav{position:sticky;top:0;z-index:2000;background:linear-gradient(rgba(11,18,34,.42),rgba(11,18,34,.58)),#16223f url(assets/leather.jpg) repeat;border-bottom:2px solid var(--pld-badge-red,#7e1b17);color:#f5f1e8;box-shadow:0 2px 12px rgba(0,0,0,.45);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.ldnav *{box-sizing:border-box}
.ldnav a{color:inherit;text-decoration:none}
.ldnav-in{display:flex;align-items:center;gap:10px;padding:0 18px;height:66px}
.ldnav-brand{display:inline-flex;align-items:center;flex:0 0 auto}
.ldnav-brand img{height:46px;width:auto;object-fit:contain;border-radius:var(--pld-radius-sm);display:block}
.ldnav-brand .fb{display:none;font-family:"Oswald",sans-serif;font-weight:700;color:var(--pld-gold-bright);font-size:18px}
.ldnav-crumbs{display:flex;align-items:center;min-width:0;overflow:hidden;margin-left:2px}
.ldnav-sep{color:#6c768f;font-size:16px;margin:0 4px;flex:0 0 auto}
.ldnav-crumb{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:13px;font-weight:500;color:#c2cadb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.ldnav-crumb:hover{color:#fff}
.ldnav-crumb.cur{color:var(--pld-gold-bright);font-weight:600}
.ldnav-sp{flex:1}
.ldnav-auth{position:relative;display:flex;align-items:center;flex:0 0 auto}
.ldgold{color:var(--pld-gold-ink,#3a2c08);background:var(--pld-gold-grad);border:1px solid var(--pld-gold-border,#8a6d22);box-shadow:var(--pld-gold-bevel);text-shadow:var(--pld-gold-text-shadow)}
.ldnav-signin{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:13px;font-weight:600;border-radius:var(--pld-radius-sm);padding:9px 16px;cursor:pointer}
.ldnav-signin:hover{filter:brightness(1.05)}
.ldnav-user{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:rgba(245,241,232,.07);border:1px solid rgba(245,241,232,.18);border-radius:50px;padding:4px 11px 4px 4px;color:#f5f1e8;font-size:13px;max-width:46vw}
.ldnav-user .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ldnav-ava{width:32px;height:32px;border-radius:50%;font-family:"Oswald",sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto;text-transform:uppercase}
.ldnav-caret{font-size:10px;color:#a7b0c6}
.ldnav-pop{position:absolute;top:calc(100% + 9px);right:0;background:#1c2a4d;color:#f5f1e8;border:1px solid rgba(255,255,255,.14);border-radius:var(--pld-radius-md);box-shadow:var(--pld-shadow-lg);min-width:230px;padding:7px;display:none}
.ldnav-pop.open{display:block}
.ldnav-mi{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:var(--pld-radius-sm);font-size:14px;cursor:pointer;color:#f5f1e8;background:none;border:none;font-family:inherit}
.ldnav-mi:hover{background:#243559}
.ldnav-mi.danger{color:var(--pld-danger-bright)}
.ldnav-who{padding:9px 12px 11px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:5px}
.ldnav-who .n{font-family:"Oswald",sans-serif;font-weight:600;font-size:15px}
.ldnav-who .e{font-size:11.5px;color:#a7b0c6;overflow:hidden;text-overflow:ellipsis}
.ldnav-pop h4{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:13px;padding:6px 10px 8px}
.ldnav-inp{width:100%;padding:10px 11px;background:#0e1830;color:#f5f1e8;border:1px solid rgba(255,255,255,.18);border-radius:var(--pld-radius-sm);font-size:14px;margin-bottom:8px}
.ldnav-inp:focus{outline:2px solid var(--pld-gold-bright);border-color:var(--pld-gold)}
.ldnav-go{width:100%;border-radius:var(--pld-radius-sm);padding:11px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:13px;cursor:pointer}
.ldnav-msg{font-size:12.5px;color:#8bd0a4;padding:6px 4px 2px}
/* ---- the shared Settings dialog (web/settings.ts; the account menu, or the play
        screen's felt-bar ⋯ menu — the signed-out nav gear is retired) ---- */
.setdlg{position:fixed;inset:0;z-index:2600;background:rgba(10,16,32,.6);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:16px}
.setdlg[hidden]{display:none}
.setbox{width:min(440px,94vw);background:var(--pld-card-navy,#1c2a4d);color:#f5f1e8;
  border:1px solid var(--pld-line-gold,rgba(192,146,47,.45));border-radius:var(--pld-radius-lg,14px);
  box-shadow:var(--pld-shadow-lg,0 18px 50px rgba(0,0,0,.6));padding:14px 16px 16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.set-head{display:flex;align-items:center;justify-content:space-between;
  font-family:"Oswald",sans-serif;font-weight:600;font-size:17px;letter-spacing:.02em;margin-bottom:10px}
.set-x{border:none;background:none;color:#c2cadb;font-size:22px;line-height:1;cursor:pointer;padding:2px 6px}
.set-x:hover{color:#fff}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;
  border-top:1px solid rgba(255,255,255,.1)}
.set-lab{font-size:14px;font-weight:600;min-width:0}
.set-sub{display:block;font-weight:400;font-size:11.5px;color:#a7b0c6;margin-top:2px}
.set-segs{flex:0 0 auto;display:inline-flex;background:#0e1830;border:1px solid rgba(255,255,255,.14);
  border-radius:9px;padding:3px;gap:2px}
.setseg{border:none;background:none;color:#c2cadb;font-family:"Oswald",sans-serif;font-size:12px;
  font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:6px 12px;border-radius:6px;cursor:pointer}
.setseg.on{background:var(--pld-gold-grad,#c0922f);color:var(--pld-gold-ink,#2e2206)}
.set-voice{flex:1;min-width:0;text-align:right}
.set-voice select{max-width:100%;background:#0e1830;color:#f5f1e8;border:1px solid rgba(255,255,255,.18);
  border-radius:var(--pld-radius-sm);padding:7px 9px;font-size:13px;margin-bottom:6px}
.set-voice .vrow{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.set-voice input[type=range]{width:130px}
.set-voice b{font-size:12px;color:var(--pld-gold-bright);min-width:44px;text-align:right}
.set-note{font-size:11.5px;color:#a7b0c6;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);margin-top:2px}
.ldfoot{margin-top:auto;background:linear-gradient(rgba(11,18,34,.42),rgba(11,18,34,.58)),#16223f url(assets/leather.jpg) repeat;border-top:2px solid var(--pld-badge-red,#7e1b17);color:#c2cadb;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.ldfoot *{box-sizing:border-box}
.ldfoot a{text-decoration:none}
.ldfoot-in{max-width:1100px;margin:0 auto;padding:16px 16px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.ldfoot-brand img{height:30px;border-radius:var(--pld-radius-sm);display:block;opacity:.95}
.ldfoot-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.ldfoot-links a{color:var(--pld-gold-bright);font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:600}
.ldfoot-links a:hover{color:#fff}
.ldfoot-cr{color:#8a93a8;font-size:11px;letter-spacing:.03em}body:not(.tv){min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}body.tv .ldnav,body.tv .ldfoot{display:none}
@media(max-width:600px){.ldnav-in{height:60px;gap:8px}
.ldnav-brand img{height:40px}
.ldnav-user{padding:3px 9px 3px 3px}
.ldnav-ava{width:28px;height:28px}}

/* utility classes hoisted from web/signin.ts inline style= attributes (F9 CSP flip) */
.siu1{margin:10px 0;display:flex;justify-content:center}
.siu2{margin-top:10px;font:500 13px/1.4 system-ui,sans-serif}
.siu3{width:100%}
.siu4{position:relative;width:100%;max-width:420px;box-sizing:border-box;background:var(--pld-field);border:1px solid var(--pld-line-gold);border-radius:var(--pld-radius-lg);box-shadow:0 20px 60px rgba(0,0,0,.5);padding:24px;color:var(--pld-ink)}
.siu5{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--pld-ink);font-size:24px;line-height:1;cursor:pointer;opacity:.65}
.siu6{font:600 20px/1.2 Oswald,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--pld-gold-bright);margin:0 0 4px}
.siu7{font:13px/1.45 system-ui,sans-serif;color:var(--pld-muted);margin:0 0 14px}

/* sign-in dialog email input (was signin.ts INPUT_CSS) */
.ld-si-email{width:100%;box-sizing:border-box;padding:11px 12px;border-radius:var(--pld-radius-sm);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--pld-ink);font:15px system-ui,-apple-system,sans-serif;outline:none}

/* ── icon set (emoji → inline SVG, via Util.ico). Sized to sit inline with text like the emoji
   it replaces; takes its color from the surrounding text (currentColor). `solid` is the default;
   `.ico-line` renders the stroked variant. Die & trophy stay OS emoji (hero glyphs). */
.ico{width:1.08em;height:1.08em;display:inline-block;vertical-align:-.16em;fill:currentColor;flex:none}
.ico-line{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* ── selection controls (see docs/DESIGN_GUIDELINES.html → Selection Controls).
   Segmented = pick-one (role="radiogroup"); selected cell is an ELEVATED gold thumb + bolder
   weight, so even two-option controls are unambiguous (not color alone, WCAG 1.4.1). Carries its
   own dark ground → reads the same on paper, navy, or leather. */
.reset-seg{position:relative;display:inline-flex;border:1px solid var(--pld-line);border-radius:50px;background:var(--pld-field);padding:3px;gap:2px;flex:0 0 auto;vertical-align:middle}
.reset-seg button{position:relative;z-index:1;background:none;border:none;font-family:'Oswald',-apple-system,sans-serif;text-transform:uppercase;letter-spacing:.02em;font-size:10.5px;font-weight:600;padding:6px 12px;border-radius:50px;cursor:pointer;color:var(--pld-muted);white-space:nowrap;line-height:1.15}
/* selected fill — the FALLBACK (shown until Util.slideSegs injects the sliding thumb) */
.reset-seg button.on{background:var(--pld-gold);color:var(--pld-gold-ink);font-weight:700;box-shadow:inset 0 1px 0 rgba(255,246,214,.55),0 2px 5px rgba(0,0,0,.4)}
.reset-seg button:disabled{opacity:.5;cursor:not-allowed}
/* the sliding gold thumb (positioned by Util.slideSegs); .has-thumb drops the button fill so
   the thumb is the only gold and can slide between segments */
.seg-thumb{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:50px;background:var(--pld-gold);box-shadow:inset 0 1px 0 rgba(255,246,214,.55),0 2px 5px rgba(0,0,0,.4);z-index:0;pointer-events:none;transition:transform .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1)}
.reset-seg.has-thumb button.on{background:transparent;box-shadow:none}
@media(prefers-reduced-motion:reduce){.seg-thumb{transition:none}}

/* Checkbox = a form boolean (applied on Submit). A well + a centered GOLD mark; label to the
   right. Dark recess by default; a lit paper well inside .pld-sheet. Style a <button> hook. */
.ldchk{display:inline-flex;align-items:center;gap:10px;cursor:pointer;background:none;border:none;padding:0;font:inherit;color:inherit;text-align:left}
.ldchk-box{width:20px;height:20px;flex:0 0 auto;border-radius:6px;border:1.6px solid var(--pld-line-gold);background-color:var(--pld-field);background-repeat:no-repeat;background-position:center;background-size:13px 13px}
.ldchk.on .ldchk-box{border-color:var(--pld-gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.6 6.5 11.7 12.6 4.4' fill='none' stroke='%23c0922f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ldchk-lab{font-family:'Oswald',-apple-system,sans-serif;text-transform:uppercase;letter-spacing:.03em;font-size:13px;font-weight:600;line-height:1.2;color:var(--pld-ink)}
.ldchk-lab small{display:block;text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;opacity:.7;margin-top:1px}
.pld-sheet .ldchk-box{background-color:#fffdf6;border-color:#c7b78f}
.pld-sheet .ldchk.on .ldchk-box{border-color:var(--pld-gold)}
.pld-sheet .ldchk-lab{color:var(--pld-vellum-ink)}