/* ══════════════════════════════════════════════════════════════════════════════════════════════
   PITCHNOIR — GLOBAL GLASS DESIGN SYSTEM  ·  pn-glass.css
   ------------------------------------------------------------------------------------------------
   THE single source of truth for the product's two reusable, liquid-glass surfaces. Author once
   here, reuse everywhere (login/auth · index landing · in-game popups). CEO mandate 2026-07-17:
   "Why do we not have one Global design system that is applied to all components?" — this is it.

   TWO canonical classes:
     · .lg-btn    — the ONE liquid-glass button. Variants: --primary (burnt-orange glass),
                    --secondary (neutral glass), --ghost. Real glass (backdrop blur+saturate),
                    inner top highlight, soft depth shadow, a specular sheen, tactile press.
                    AA text in every variant. This REPLACES every flat button.
     · .lg-panel  — the ONE Finder-glass panel/card. Apple-Finder glass language: frosted body,
                    hairline, elevation, sheen. Add --window for the mac traffic-light title bar
                    (a real close control); plain .lg-panel where it's a card.

   Helpers:
     · .lg-titlebar / .lg-dot(.red/.amber/.green) — the traffic-light bar (self-contained; mirrors
       the game's shipped .mac-titlebar so both read as one Finder language).
     · .lg-field  — the glass text input that lives inside a panel.
     · .lg-divider — the "or" hairline rule.

   THEMING: token-driven, works light + dark. Default = DARK. Add class .lg-light to any .lg-panel
   (or an ancestor) to repaint it porcelain — custom props inherit, so nested .lg-btn / .lg-field
   follow automatically. The burnt-orange PRIMARY is constant across themes (the brand spine).

   CONSISTENCY: this canonizes what already shipped in the game — the .pn-window Finder chrome
   (play.html) and the mVC liquid-glass CTA (mvc-os.css) — into ONE reusable contract. It reads the
   PitchNoir --accent / --glow tokens when present (so the 7-theme switcher still recolours it) but
   carries safe fallbacks so it renders standalone. EXTRACT NOTE: linked by play.html + index.html;
   this file is the reference — if a button or panel doesn't match it, it is wrong. Fix here, once.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── BRAND-FIXED CURRENCY ICONOGRAPHY (CEO 2026-07-18, A10/A11) ──────────────────────────────────
   Currency glyphs are BRAND MARKS, never skinnable. They must NEVER inherit the worn --accent (the
   CEO's "pink blobs / pink icons"). WahCoin ◈ = navy-ink diamond on a burnt-orange coin face; Cred ✦
   = fixed gold (earned prestige). These tokens reference NO accent/spine/glow var — fixed on :root so
   every screen, worn or not, renders the same coin/cred. Use them for every ◈/✦ face. */
:root{
  --pn-coin-face:#f97316;   /* WahCoin ◈ — burnt-orange coin, fixed brand */
  --pn-coin-ink:#0b1c30;    /* navy diamond on the coin */
  --pn-cred:#f4c24e;        /* Cred ✦ — earned gold, fixed brand */
}

/* ── BRAND FACES + CANONICAL ACCENT ────────────────────────────────────────────────────────────
   CEO 2026-07-17: "improve the typography in the boxes, don't use apple system fonts" + "match the
   Logo orange and reflect this everywhere". So: (1) every .lg-* control renders in the BRAND faces
   (Inter for value/label text, JetBrains Mono for the tactical labels) with ONLY web-safe fallbacks
   — never -apple-system / system-ui (the OS-default look Jon rejects). (2) The canonical accent is
   LOCKED to the exact wordmark orange sampled from the distressed PITCHNOIR "NOIR" (#f97316 — the
   SST `primary-container` bright orange). Every accent across the system reads --accent, so it's ONE
   orange everywhere; the 7-theme cosmetic switcher can still override --accent for a pack recolour. */
:where(.lg-btn, .lg-field, .lg-panel, .lg-titlebar, .lg-divider, .lg-card){
  --lg-font:'Inter','Segoe UI',Roboto,Arial,sans-serif;
  --lg-mono:'JetBrains Mono',ui-monospace,'Roboto Mono',Menlo,monospace;
  --lg-orange:#f97316;                 /* LOGO orange — sampled from the wordmark, canonical accent */
  /* BUG FIX 2026-07-18: the old `--accent:var(--accent,#f97316)` here was SELF-REFERENTIAL — with no
     inherited --accent it resolves to the guaranteed-invalid value, so every bare `var(--accent)` on a
     descendant broke (pool.html had to alias --pn-orange to dodge it). Removed. Every component below
     reads `var(--accent,#f97316)` with a literal fallback, and host pages (play.html theme tokens) still
     set a real --accent that inherits in — so it's one orange everywhere with no invalid cascade. */
  --lg-ink-slab:#0b1c30;               /* SST on-surface navy-ink — the brutalist slab colour */
}

/* ── THEME TOKENS ──────────────────────────────────────────────────────────────────────────────
   Dark is the default (values live as the var() fallbacks in the component rules below). The
   .lg-light scope overrides the inheriting custom props. Keeping the primary/brand vars here means
   one place to retune the whole system. */
.lg-light{
  /* WARM BONE light theme (CEO 2026-07-23: light must be a premium warm beige — bone / parchment,
     not cool blue and not the old washed greige — and it must re-tint EVERY component, not just the
     canvas. Warm espresso ink, warm ivory panels with real 2-stop gradients, warm elevation shadows,
     orange accent popping on the warm ground. Shared by the design bible AND the whole game. */
  --lg-ink:#2a2119;                 /* primary text — warm espresso near-black (crisp on bone) */
  --lg-ink-dim:#6d6154;             /* secondary text — warm taupe */
  --lg-hair:rgba(58,44,26,.14);     /* hairline — warm ink */
  --lg-panel-bg:linear-gradient(168deg, rgba(250,246,238,.95), rgba(233,224,209,.96));
  --lg-panel-shadow:0 44px 110px rgba(74,54,28,.24), inset 0 1px 0 rgba(255,252,246,.78);
  --lg-panel-sheen:linear-gradient(150deg, rgba(255,253,247,.62), rgba(255,253,247,0) 44%);
  --lg-tb-bg:rgba(58,44,26,.04);
  --lg-tb-border:rgba(58,44,26,.10);
  --lg-tb-ink:#8a7a63;
  --lg-sec-fill:rgba(255,253,247,.62);
  --lg-sec-fill-hover:rgba(255,253,247,.86);
  --lg-sec-border:rgba(58,44,26,.16);
  --lg-sec-ink:#2a2119;
  --lg-ghost-ink:#5c5142;
  --lg-ghost-ink-hover:#2a2119;
  --lg-ghost-hover-bg:rgba(58,44,26,.05);
  --lg-field-bg:rgba(255,254,250,.72);
  --lg-field-border:rgba(58,44,26,.18);
  --lg-field-ink:#2a2119;
  --lg-field-ph:rgba(74,60,40,.6);
  /* .lg-card dossier plate — warm bone repaint (theme-follows like the panel) */
  --lg-card-bg:linear-gradient(158deg, rgba(251,247,240,.93), rgba(237,227,212,.95));
  --lg-card-slab:#0b1c30;
}

/* ══ THE SURFACE LADDER — four measurable elevation levels (CEO 2026-07-18) ═══════════════════════
   CEO verbatim: "not enough contrast, similar coloured light modules on light backgrounds, not enough
   gradients — your fundamental design logic is fucked." The fix is a strict FOUR-level elevation ladder,
   both themes, with a measurable ΔL* ≥ 3 between any two ADJACENT levels (gate-verified):
     · --lg-surface-0  CANVAS  — the view backdrop. Dark: deepest ink. Light: warm greige, distinctly
                                 DARKER than the panels on it (modules read as lifted, not camouflaged).
     · --lg-surface-1  PANEL   — a 2-stop gradient fill + a NEUTRAL hairline (never orange).
     · --lg-surface-2  CARD    — lighter gradient, soft elevation shadow.
     · --lg-surface-3  INPUT   — the lifted focus plane (fields, pickers), highest in the stack.
   Every fill is a gradient at panel scale (not a flat wash); hairlines are neutral ink, never accent.
   Tokens live here (dark default) + on .lg-light (porcelain). Classes .lg-s0..3 apply the whole
   treatment; host surfaces can also compose the raw --lg-surface-*/--lg-elev-* tokens directly. */
:where(html),.lg-ladder{
  --lg-hair-neutral:rgba(150,162,184,.17);
  --lg-surface-0:#090a10;
  --lg-s1-top:#1a1d29; --lg-s1-bot:#101219;
  --lg-s2-top:#252936; --lg-s2-bot:#191d29;
  --lg-surface-3:#2e3340;
  --lg-elev-1:0 1px 3px rgba(0,0,0,.36);
  --lg-elev-2:0 18px 38px -16px rgba(0,0,0,.66), 0 2px 6px rgba(0,0,0,.36);
  --lg-elev-3:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.44);
}
.lg-light{
  --lg-hair-neutral:rgba(58,44,26,.16);
  /* warm bone ladder — L* 86.8 / 92.4 / 96.2 / 100 → ΔL* 5.6 · 3.8 · 3.8 (law holds every step) */
  --lg-surface-0:#e4dbca;                                   /* warm bone canvas — distinctly darker than panels */
  --lg-s1-top:#f3eee2; --lg-s1-bot:#eae2d2;
  --lg-s2-top:#faf7f0; --lg-s2-bot:#f2ebe1;
  --lg-surface-3:#ffffff;
  --lg-elev-1:0 1px 3px rgba(74,54,28,.10);
  --lg-elev-2:0 18px 36px -16px rgba(74,54,28,.20), 0 2px 6px rgba(74,54,28,.08);
  --lg-elev-3:inset 0 1px 2px rgba(74,54,28,.10);
}
.lg-s0{ background:var(--lg-surface-0); }
.lg-s1{ background:linear-gradient(168deg,var(--lg-s1-top),var(--lg-s1-bot));
  border:1px solid var(--lg-hair-neutral); box-shadow:var(--lg-elev-1); }
.lg-s2{ background:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot));
  border:1px solid var(--lg-hair-neutral); box-shadow:var(--lg-elev-2); }
.lg-s3{ background:var(--lg-surface-3);
  border:1px solid var(--lg-hair-neutral); box-shadow:var(--lg-elev-3); }

/* ── .lg-panel — the Finder-glass surface ─────────────────────────────────────────────────────── */
.lg-panel{
  --_ink:var(--lg-ink, #eef3fb);
  position:relative; isolation:isolate;
  border-radius:16px;
  color:var(--_ink);
  background:var(--lg-panel-bg, linear-gradient(168deg, rgba(30,43,64,.86), rgba(12,19,31,.93)));
  border:1px solid var(--lg-hair, rgba(255,255,255,.14));
  box-shadow:var(--lg-panel-shadow, 0 44px 110px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.10));
  -webkit-backdrop-filter:blur(30px) saturate(150%);
  backdrop-filter:blur(30px) saturate(150%);
  overflow:hidden;
}
/* specular sheen — one soft diagonal highlight raking the top-left corner (Apple-glass tell) */
.lg-panel::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:var(--lg-panel-sheen, linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%));
  mix-blend-mode:screen;
}
.lg-light.lg-panel::before, .lg-light .lg-panel::before{ mix-blend-mode:normal; }
.lg-panel > *{ position:relative; z-index:1; }               /* content sits above the sheen */
.lg-panel--pad{ padding:26px 28px 24px; }                    /* default card padding */

/* ── .lg-titlebar — mac traffic-light bar (the --window variant) ───────────────────────────────── */
.lg-titlebar{
  display:flex; align-items:center; gap:9px;
  margin:0 0 18px; padding:12px 16px;
  background:var(--lg-tb-bg, rgba(255,255,255,.05));
  border-bottom:1px solid var(--lg-tb-border, rgba(255,255,255,.12));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
/* BUG FIX 2026-07-18: bleed the bar to the panel edges ONLY on a PADDED window. The old unconditional
   `margin:0 -28px` assumed 28px of panel padding; on an UNPADDED .lg-panel--window it pushed the red
   traffic-light dot outside the panel where overflow:hidden silently clipped it (the pool.html bug).
   Scoped to .lg-panel--pad, so an unpadded window keeps the default flush titlebar margin. */
.lg-panel--window.lg-panel--pad > .lg-titlebar{ margin:0 -28px 20px; }
.lg-panel--window.lg-panel--pad{ padding-top:0; }
/* INK-SWEEP 2026-07-25 (CEO: "sloppy non transparent corners") — window shells that re-open overflow
   (e.g. .vv-win{overflow:visible} for overhanging furniture) let the SQUARE titlebar background +
   backdrop-filter paint a notch OUTSIDE the panel's rounded crown. Class fix: a titlebar seated at a
   window's crown always carries the window's own top radius, so the chrome clips itself. */
.lg-panel--window > .lg-titlebar{ border-top-left-radius:inherit; border-top-right-radius:inherit; }
.lg-tb-dots{ display:flex; gap:8px; flex:none; }
.lg-dot{ width:12px; height:12px; border-radius:50%; border:0; padding:0; cursor:default;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18); }
.lg-dot.red{ background:#ff5f57; cursor:pointer; }
.lg-dot.amber{ background:#febc2e; }
.lg-dot.green{ background:#28c840; }
.lg-dot.red:hover{ filter:brightness(.92); }
.lg-dot.red:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.lg-tb-title{ font:600 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lg-tb-ink, rgba(234,241,251,.62)); }

/* ══ .lg-btn — the ONE liquid-glass button · "THE CLIP" SIGNATURE ════════════════════════════════
   CEO 2026-07-17 (verbatim): "buttons still look too boring, make them interesting, stop using same
   rounded modules — introduce a corner and something ownable." So the button is no longer a uniform
   rounded pill. Its OWNABLE silhouette = a brutalist near-square glass slab with its TOP-RIGHT corner
   sliced on a 45° CHAMFER (clip-path polygon — SST motif #5, the near-square 0.125rem brutalist radius).
   ⛔ CORNER RULING (CEO 2026-07-18 — DEFINITIVE, "I hate that corner stripe and the way it animates"):
   the CUT stays; the burnt-orange REGISTRATION SLASH and its hover ignite/extend animation are RETIRED
   EVERYWHERE (buttons/cards/folders/CTA bars/dock). The ONLY corner furniture now is MACHINED + STATIC:
   a crisp 1px ink bevel line hugging the chamfer + at most ONE 3px accent pip (navy pip on the orange
   primary). No diagonal accent stripe, nothing animating in the corner. Do NOT reintroduce the slash.
   NOTE ON CRAFT: clip-path also clips box-shadow, so OUTER depth/halo/hard-shard shadows are drawn with
   filter:drop-shadow() (they follow the chamfered silhouette — the shard even shows the cut); the glass
   crown/rim highlights stay as INSET box-shadow (they live inside the clip). Both compose per variant
   via --lg-shadow (outer, drop-shadow list) + --lg-inset (inner, box-shadow list). Focus ring is an
   inset ring so it hugs the cut shape and can't be clipped away. */
.lg-btn{
  --_r:3px;                         /* near-square brutalist base radius (SST 0.125rem family) */
  --cut:14px;                       /* chamfer size — the sliced corner */
  --lg-tick:var(--accent,#f97316);  /* the registration-slash colour (orange by default) */
  --_tw:2px;                        /* slash thickness */
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  appearance:none; cursor:pointer; text-decoration:none;
  font:700 14px/1 var(--lg-font); letter-spacing:.012em; white-space:nowrap;
  -webkit-font-smoothing:antialiased;
  padding:12px 22px; min-height:44px; border-radius:var(--_r);
  border:1px solid transparent;
  /* THE CLIP — slice the top-right corner on a 45° chamfer (the ownable silhouette) */
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:var(--lg-inset, none);
  filter:var(--lg-shadow, none);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, filter .16s ease;
}
/* specular sheen — a soft top-lit strip that reads as light on the glass (clipped to the chamfer) */
.lg-btn::before{
  content:""; position:absolute; left:0; right:0; top:0; height:52%; z-index:0; pointer-events:none;
  border-radius:var(--_r) var(--_r) 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0));
}
/* CORNER FURNITURE — CEO 2026-07-18 DEFINITIVE RULING: the registration SLASH + its ignite animation are
   RETIRED everywhere (buttons/cards/folders/CTA bars/dock). The CUT (silhouette) stays. What remains on
   the corner is MACHINED, STATIC furniture: a crisp 1px ink bevel line hugging the chamfer + at most ONE
   3px accent pip. No diagonal accent stripe, nothing animating in the corner. */
.lg-btn::after{
  content:""; position:absolute; top:0; right:0; z-index:3; pointer-events:none;
  width:var(--cut); height:var(--cut);
  /* CEO 2026-07-18 (final): the diagonal corner stripe is DEAD on buttons — "shitty weird line".
     The CUT (clip-path silhouette) is the whole detail; the corner carries NOTHING else. No bevel
     line, no pip. A clean machined chamfer. */
  background:none;
}
.lg-btn > *{ position:relative; z-index:1; }
/* focus: an INSET ring — hugs the chamfered silhouette (can't be clipped away like an outline) */
.lg-btn:focus-visible{ outline:2px solid transparent; outline-offset:2px;
  box-shadow:inset 0 0 0 2px #fff, var(--lg-inset, none); }
.lg-btn:active{ transform:translateY(1px) scale(.995); }
.lg-btn[disabled], .lg-btn:disabled{ opacity:.5; cursor:default; pointer-events:none; }

/* — PRIMARY: LIT LOGO-ORANGE GLASS (the brand spine, #f97316). ─────────────────────────────────
   CEO 2026-07-17: the old #c65a18 fill read "muddy, not glass enough". Fix by CRAFT, not muddying:
   the button is a slab of BACKLIT bright logo-orange glass — the brightest, most saturated parts
   (top crown, luminous rim, glow halo) are pure #f97316, so the eye reads it as the bright logo
   orange; only the thin band DIRECTLY behind the label deepens to the SATURATED burnt-orange spine
   (#9d4300 family — a brand token, NOT desaturated brown) so WHITE text measures >=4.5:1 (UX_RULES
   §1). Bright rim + specular crown + reflection = "lit glass"; the deep text band solves AA without
   darkening the whole face. Layers (top→bottom in paint order): text-zone vignette over a bright
   orange body; a mono-glass crown highlight (::before) and a soft internal reflection (::after). */
.lg-btn--primary{
  --lg-pip:var(--lg-ink-slab,#0b1c30);         /* the corner pip inverts to navy-ink on the orange face */
  --lg-fui-btn:rgba(74,26,0,.5);               /* machined bevel line reads as a dark scored edge on orange */
  color:#fff; text-shadow:0 1px 1.5px rgba(74,26,0,.62);
  border-color:rgba(255,182,120,.55);
  background:
    /* 1. TEXT-ZONE core — an elliptical burnt-orange deepen centred on the label so the WHITE glyphs
       (incl. their caps that reach up into the bright crown) all measure >=4.5:1 (AA band) */
    radial-gradient(140% 150% at 50% 47%, rgba(114,42,0,.64) 0%, rgba(114,42,0,.34) 50%, rgba(114,42,0,0) 80%),
    /* 2. bright logo-orange glass body — luminous crown, warm saturated base (never muddy) */
    linear-gradient(178deg, #ffa04a 0%, #f97316 24%, #e2650f 60%, #c1530a 100%);
  /* OUTER (drop-shadow → follows the chamfer): orange emit-halo + grounding depth */
  --lg-shadow:
    drop-shadow(0 7px 15px rgba(249,115,22,.45))
    drop-shadow(0 3px 6px rgba(96,38,0,.42));
  /* INNER (inset box-shadow → the glass): bright crown, luminous rim, base depth pooling */
  --lg-inset:
    inset 0 1px 0 rgba(255,244,232,.72),
    inset 0 0 0 1px rgba(255,168,96,.32),
    inset 0 -13px 24px -12px rgba(112,42,0,.6);
}
/* mono-glass crown — a stronger wet specular strip than the neutral base sheen; kept above the
   glyph caps (steep falloff by ~40%) so it lights the glass, not the text (protects AA) */
.lg-btn--primary::before{
  height:42%;
  background:linear-gradient(180deg, rgba(255,241,225,.52) 0%, rgba(255,214,172,.1) 46%, rgba(255,255,255,0) 100%);
}
/* HOVER — lift + brighten, and a HARD burnt-orange OFFSET SHARD punches out behind the slab
   (SST hard-offset shadow shadow-[Npx_Npx_0]); drop-shadow makes the shard trace the cut corner too —
   the liquid-glass × brutalist fusion that is PitchNoir. */
.lg-btn--primary:hover{ transform:translateY(-1px);
  border-color:rgba(255,196,140,.7);
  /* ink-sweep 2026-07-25: re-pin the fill+ink on hover — host pages carry a global button:hover (0,1,1)
     that outranks the base (0,1,0) and was flipping primaries to a var(--ink) plate (white-on-white in
     pinned-dark scopes). Same lit-orange body; filter's brightness(1.05) supplies the hover lift. */
  color:#fff;
  background:
    radial-gradient(140% 150% at 50% 47%, rgba(114,42,0,.64) 0%, rgba(114,42,0,.34) 50%, rgba(114,42,0,0) 80%),
    linear-gradient(178deg, #ffa04a 0%, #f97316 24%, #e2650f 60%, #c1530a 100%);
  --lg-shadow:
    drop-shadow(4px 4px 0 rgba(157,67,0,.92))
    drop-shadow(0 13px 28px rgba(249,115,22,.5))
    drop-shadow(0 4px 9px rgba(96,38,0,.46))
    brightness(1.05) saturate(1.04); }
.lg-btn--primary:active{ transform:translateY(1px) scale(.995);
  --lg-shadow:drop-shadow(1px 1px 0 rgba(157,67,0,.85)) drop-shadow(0 4px 10px rgba(249,115,22,.4)) brightness(.98); }
/* keep the inset ring on focus while preserving the primary's inner glass insets */
.lg-btn--primary:focus-visible{ box-shadow:inset 0 0 0 2px #fff, var(--lg-inset); }
/* recolour the primary to the live PitchNoir cosmetic accent when the token is present — keeps the
   same text-zone deepen + shadow so the label stays legible whatever the pack orange/cyan/magenta. */
.lg-btn--primary.lg-accent{
  background:
    radial-gradient(130% 116% at 50% 52%, rgba(0,0,0,.4) 0%, rgba(0,0,0,.12) 46%, rgba(0,0,0,0) 70%),
    linear-gradient(178deg,
      color-mix(in srgb, var(--accent,#f97316) 66%, #fff 34%),
      color-mix(in srgb, var(--accent,#f97316) 82%, #000 18%));
}

/* — SECONDARY: neutral frosted glass. Theme ink @ AA. The default for "Create account" + Google.
   Same CLIP silhouette + orange slash (quieter than primary — the DNA carried across the system). — */
.lg-btn--secondary{
  color:var(--lg-sec-ink, #eef3fb);
  background:var(--lg-sec-fill, rgba(255,255,255,.10));
  border-color:var(--lg-sec-border, rgba(255,255,255,.20));
  --lg-shadow:drop-shadow(0 8px 16px rgba(0,0,0,.28));
  --lg-inset:inset 0 1px 0 rgba(255,255,255,.22);
}
.lg-btn--secondary:hover{ transform:translateY(-1px);
  color:var(--lg-sec-ink, #eef3fb);   /* ink-sweep: re-pin — host global button:hover forces #fff (white-on-bone in light) */
  background:var(--lg-sec-fill-hover, rgba(255,255,255,.17));
  border-color:var(--lg-sec-border, rgba(255,255,255,.30));
  --lg-shadow:drop-shadow(0 13px 24px rgba(0,0,0,.34)); }

/* — GHOST: no fill, hairline on hover. Same CLIP. Fill-less at rest, so it carries NO corner furniture
   (a pip/bevel would float as an orphan per UX_RULES §3). "Quiet ≠ invisible": ink stays AA. — */
.lg-btn--ghost{
  color:var(--lg-ghost-ink, rgba(234,241,251,.78));
  --cut:11px;
  background:transparent; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
  --lg-shadow:none; --lg-inset:none; min-height:38px; padding:9px 15px; font-weight:600;
}
.lg-btn--ghost::before{ display:none; }              /* no glass sheen on the fill-less ghost */
.lg-btn--ghost::after{ display:none; }               /* no corner furniture on a fill-less ghost (no orphan) */
.lg-btn--ghost:hover{ color:var(--lg-ghost-ink-hover, #fff);
  background:var(--lg-ghost-hover-bg, rgba(255,255,255,.07)); }

/* — the Google 'G' mark sits flush; label keeps its optical weight — */
.lg-btn .lg-g{ width:18px; height:18px; flex:none; display:block; }

/* — ICON: a square clipped button for a lone glyph (trash / close / +). Same CLIP + slash, 44px so it
   lines up flush with a full-height --primary beside it (UX_RULES §1 "same height"). — */
.lg-btn--icon{ padding:0; width:44px; min-height:44px; gap:0; }
.lg-btn--icon svg{ width:16px; height:16px; display:block; }
/* — DANGER: a ghost that ARMS red on hover (destructive affordance — delete/kill). The corner pip + ink
   go red so the intent reads before the click; still AA on the glass. — */
.lg-btn--danger{ --lg-pip:#ff6a55; }
.lg-btn--danger:hover{ color:#ff6a55; background:rgba(255,106,85,.10);
  border-color:rgba(255,106,85,.5); -webkit-backdrop-filter:none; backdrop-filter:none; }

/* ── .lg-field — the glass text input ──────────────────────────────────────────────────────────
   CEO 2026-07-17 "improve the typography in the boxes, don't use apple system fonts": value text is
   BRAND Inter (never system-ui/-apple-system), 15px/500 with a hair of negative tracking for a
   crafted, settled feel and tnum for aligned digits; the placeholder is a lighter JetBrains-Mono
   tactical label (uppercase, wide-tracked) that still clears AA on the glass, so an empty field
   reads as designed "classified" chrome, not a default input. Inset glass, logo-orange focus. */
.lg-field{
  width:100%; appearance:none;
  font:500 15px/1.25 var(--lg-font); letter-spacing:-.006em; font-feature-settings:'tnum' 1,'ss01' 1;
  -webkit-font-smoothing:antialiased;
  padding:13px 15px; border-radius:9px; color:var(--lg-field-ink, #eef3fb);
  background:var(--lg-field-bg, rgba(255,255,255,.07));
  border:1px solid var(--lg-field-border, rgba(255,255,255,.18));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.lg-field::placeholder{
  font:600 12px/1.25 var(--lg-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--lg-field-ph, rgba(235,242,252,.64)); opacity:1;
}
.lg-field:focus{ outline:0;
  border-color:var(--accent,#f97316);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12), 0 0 0 3px rgba(249,115,22,.24), 0 2px 10px rgba(249,115,22,.12);
  background:var(--lg-field-bg, rgba(255,255,255,.11)); }

/* ── .lg-divider — hairline "or" rule ──────────────────────────────────────────────────────────── */
.lg-divider{ display:flex; align-items:center; gap:12px;
  font:600 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing:.22em; text-transform:uppercase;
  color:var(--lg-ink-dim, rgba(234,241,251,.4)); margin:4px 0; }
.lg-divider::before, .lg-divider::after{ content:""; flex:1; height:1px;
  background:var(--lg-hair, rgba(255,255,255,.14)); }

/* ══ .lg-card — the ONE dossier / case-file plate ════════════════════════════════════════════════
   CEO 2026-07-18: the My-Agencies modules "look like AI slop — edgier, less standard treatment." This
   is the answer AND the next brick of the global system (to be applied to ALL modules): a reusable
   case-file module language. NOT a rounded glass pill — a brutalist-noir DOSSIER PLATE that carries the
   same signature DNA as .lg-btn: THE CLIP geometry (45° sliced top-right corner, near-square 2px radius
   elsewhere — SST motif #5), a hard 1px hairline edge, an interior hairline structure, a subtle
   film-grain tooth on the glass, and the burnt-orange REGISTRATION SLASH lit along the cut. Compose:
     · .lg-card               — the base clipped plate (grain + edge + elevation + slash)
     · .lg-card--dossier      — the case-file ROW: [monogram] [index-stamp · name · mono ledger] [actions]
     · .lg-card--action       — a full-width clickable ghost bar w/ crosshair corner ticks (the "open a
                                new case file" CTA — arms on hover: ticks + slash ignite, grain lifts)
   Furniture (reuse anywhere): .lg-mark (clipped monogram plate) · .lg-stamp (mono index stamp) ·
   .lg-ledger (mono ledger row of hairline-ruled cells). Reads --accent / --lg-ink-slab / brand faces,
   theme-follows via --lg-card-bg + --lg-hair (porcelain in .lg-light). Because clip-path also clips
   box-shadow, ELEVATION is drawn with filter:drop-shadow() so it TRACES the chamfer; interior structure
   is real markup + hairlines. Entrance = a clip-wipe keyed off an inline --i index (reduced-motion snaps
   to the resting cut). A module that doesn't speak this language is the AI card wall — fix it here. */
.lg-card{
  --cut:20px;                          /* the sliced top-right corner — the ownable silhouette */
  --_r:2px;                            /* near-square brutalist radius everywhere else */
  --lg-tick:var(--accent,#f97316);     /* registration-slash colour */
  --_tw:2.5px;                         /* slash thickness */
  --_ink:var(--lg-ink, #eef3fb);       /* theme-aware ink (porcelain sets --lg-ink) */
  /* CORNER FURNITURE v2 (CEO 2026-07-18): machined FUI instrument corners — NOT a stray recoloured
     slash. Two INK hairline weights (theme-aware, so a worn accent can NEVER turn the corner neon
     pink) + ONE precise accent pip. --lg-fui/-2 draw the machined lines; --lg-pip is the single tick. */
  --lg-fui:color-mix(in srgb, var(--_ink) 70%, transparent);
  --lg-fui-2:color-mix(in srgb, var(--_ink) 32%, transparent);
  --lg-pip:var(--accent,#f97316);
  position:relative; isolation:isolate; color:var(--_ink);
  border-radius:var(--_r);
  background:var(--lg-card-bg, linear-gradient(158deg, rgba(26,37,56,.72), rgba(9,14,24,.82)));
  border:1px solid var(--lg-hair, rgba(255,255,255,.15));
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  filter:var(--lg-card-shadow, drop-shadow(0 18px 34px rgba(0,0,0,.44)) drop-shadow(0 2px 5px rgba(0,0,0,.32)));
  -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  transition:filter .18s ease, border-color .18s ease, transform .18s ease;
}
/* grain tooth + a single raking sheen — the material (SST motif #1 halftone, kept subtle not dirty) */
.lg-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(122deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 72%, rgba(255,255,255,.04) 100%),
    radial-gradient(rgba(255,255,255,.05) 9%, transparent 10%);
  background-size:100% 100%, 6px 6px;
}
.lg-light .lg-card::before{ background:
    linear-gradient(122deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(rgba(58,44,26,.05) 9%, transparent 10%);
  background-size:100% 100%, 6px 6px; }
/* CORNER FURNITURE — a machined FUI instrument bracket hugging the sliced corner. Layered:
   (1) a crisp 1px ink line ALONG the 45° chamfer bevel; (2) a finer parallel step line inset from it
   (the "notched step", 2nd weight); (3) a short machined line down the right edge + (4) along the top
   edge below/left of the cut (the L-bracket arms); (5) three fine registration ticks on the top arm;
   (6) ONE precise accent pip on the bevel. All arms are theme INK (--lg-fui/-2) so a worn accent can't
   turn the corner neon — only the single pip carries the accent. Sits in a fixed 46px box, top-right. */
/* CEO 2026-07-18 (ABSOLUTELY FINAL): ALL corner furniture is DEAD — the L-bracket arms, the
   registration ticks, the pip, everything. Jon hates every bit of it. A card is a clean clipped
   plate with NOTHING in the corner. The CUT is the only detail. Do NOT reintroduce ANY corner mark. */
.lg-card::after{ content:none; }
.lg-card > *{ position:relative; z-index:1; }

/* — DOSSIER ROW: [monogram] [stamp · name · ledger] [actions]. Interior hairline between the mark and
   the body reinforces the case-file structure. — */
.lg-card--dossier{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:17px; padding:15px 18px 15px 15px; margin-top:11px;
}
/* CEO 2026-07-18: nothing animates in the corner — hover is a subtle lift + a hairline warm only. The
   corner furniture (machined ink brackets + one pip) is STATIC; the old corner-arming is retired. */
.lg-card--dossier:hover{ transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--accent,#f97316) 34%, var(--lg-hair, rgba(255,255,255,.15)));
  --lg-card-shadow:drop-shadow(0 24px 44px rgba(0,0,0,.5)) drop-shadow(0 2px 5px rgba(0,0,0,.32)); }

/* the clipped monogram plate — navy brutalist slab (SST motif #6), burnt-orange italic initials, its
   OWN sliced corner. Not a squircle. */
.lg-mark{
  --mcut:11px;
  position:relative; width:52px; height:52px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font:900 18px/1 var(--lg-font); font-style:italic; letter-spacing:-.02em;
  color:var(--accent,#f97316);
  background:var(--lg-card-slab, var(--lg-ink-slab, #0b1c30));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -6px 14px rgba(0,0,0,.30);
  clip-path:polygon(0 0, calc(100% - var(--mcut)) 0, 100% var(--mcut), 100% 100%, 0 100%);
}
.lg-light .lg-mark{ border-color:rgba(58,44,26,.14); color:var(--accent,#f97316); }

.lg-card__body{ min-width:0; }
/* the mono index stamp — a classification code w/ a registration tick (the file's tab) */
.lg-stamp{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:5px;
  font:700 9.5px/1 var(--lg-mono); letter-spacing:.24em; text-transform:uppercase;
  color:color-mix(in srgb, var(--accent,#f97316) 84%, #fff);
}
.lg-stamp::before{ content:""; width:13px; height:1.5px; background:currentColor; opacity:.75; flex:none; }
.lg-card__name{
  display:block; font:800 17px/1.12 var(--lg-font); letter-spacing:-.01em; color:var(--_ink, #f4f8ff);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* the mono ledger — a proper hairline-ruled data strip (WK · S · REP · WAH), not a comma sentence */
.lg-ledger{
  display:inline-flex; flex-wrap:wrap; margin-top:9px; width:max-content; max-width:100%;
  border:1px solid var(--lg-hair, rgba(255,255,255,.14)); border-radius:1px; overflow:hidden;
}
.lg-ledger > span{
  display:inline-flex; align-items:baseline; gap:5px; padding:6px 11px;
  font:700 11px/1 var(--lg-mono); letter-spacing:.05em; font-feature-settings:'tnum' 1;
  color:var(--_ink, #eaf1fb);
  border-left:1px solid var(--lg-hair, rgba(255,255,255,.12));
}
.lg-ledger > span:first-child{ border-left:0; }
.lg-ledger i{ font-style:normal; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--_ink, #eaf1fb) 56%, transparent); }
.lg-ledger > span.is-flag{ color:var(--accent,#f97316);
  background:color-mix(in srgb, var(--accent,#f97316) 14%, transparent); }
.lg-ledger > span.is-flag i{ color:color-mix(in srgb, var(--accent,#f97316) 78%, transparent); }

.lg-card__actions{ display:flex; align-items:center; gap:9px; }

/* — ACTION BAR: the "open a new case file" CTA. Full-width clipped ghost bar, mono label, crosshair
   REGISTRATION corner ticks; on hover it ARMS — ticks + slash ignite orange, grain lifts, edge warms. — */
.lg-card--action{
  --cut:16px;
  position:relative; isolation:isolate; appearance:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; margin-top:18px; padding:17px 20px;
  color:var(--_ink, #eaf1fb);
  font:700 12px/1 var(--lg-mono); letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
  background:
    radial-gradient(rgba(255,255,255,.04) 9%, transparent 10%) 0 0/6px 6px,
    var(--lg-card-bg, linear-gradient(158deg, rgba(255,255,255,.055), rgba(255,255,255,.018)));
  border:1px solid var(--lg-hair, rgba(255,255,255,.17));
  border-radius:var(--_r);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  filter:var(--lg-card-shadow, drop-shadow(0 12px 26px rgba(0,0,0,.30)));
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  transition:filter .2s ease, border-color .2s ease, background .2s ease, color .2s ease, transform .16s ease;
}
/* crosshair corner ticks — L-shaped registration marks at the three un-cut corners (SST tactical HUD).
   At REST they are quiet theme INK (no accent leak); the accent only IGNITES on hover — the "arm" beat. */
.lg-card--action::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  --tk:var(--lg-fui, color-mix(in srgb, var(--_ink) 70%, transparent)); --tl:11px; --tw:1.5px; --to:9px;
  background:
    linear-gradient(var(--tk),var(--tk)) no-repeat left var(--to) top var(--to)/var(--tl) var(--tw),
    linear-gradient(var(--tk),var(--tk)) no-repeat left var(--to) top var(--to)/var(--tw) var(--tl),
    linear-gradient(var(--tk),var(--tk)) no-repeat left var(--to) bottom var(--to)/var(--tl) var(--tw),
    linear-gradient(var(--tk),var(--tk)) no-repeat left var(--to) bottom var(--to)/var(--tw) var(--tl),
    linear-gradient(var(--tk),var(--tk)) no-repeat right var(--to) bottom var(--to)/var(--tl) var(--tw),
    linear-gradient(var(--tk),var(--tk)) no-repeat right var(--to) bottom var(--to)/var(--tw) var(--tl);
  opacity:.42; transition:opacity .2s ease;
}
/* CEO 2026-07-18 (final): diagonal corner stripe DEAD here too — just the clean cut. */
.lg-card--action::after{ content:none; }
.lg-card--action > *{ position:relative; z-index:1; }
.lg-card--action .lg-cta-plus{ font:800 15px/1 var(--lg-font); color:var(--accent,#f97316);
  transition:transform .2s ease; display:inline-block; }
.lg-card--action:hover{ transform:translateY(-1px);
  color:#fff; border-color:color-mix(in srgb, var(--accent,#f97316) 62%, transparent);
  background:
    radial-gradient(rgba(255,255,255,.07) 9%, transparent 10%) 0 0/6px 6px,
    linear-gradient(158deg, color-mix(in srgb, var(--accent,#f97316) 14%, rgba(255,255,255,.05)), rgba(255,255,255,.02));
  --lg-card-shadow:drop-shadow(0 16px 30px rgba(249,115,22,.22)) drop-shadow(0 4px 9px rgba(0,0,0,.32)); }
/* CEO 2026-07-18: the corner does NOT arm/ignite. Ticks + bevel stay STATIC ink on hover; only the plate
   lifts + the edge warms (rule above). The CTA plus still rotates — that's the content affordance, not
   corner furniture. */
.lg-card--action:hover .lg-cta-plus{ transform:rotate(90deg); }
.lg-light .lg-card--action:hover{ color:var(--lg-ink, #2a2119); }
.lg-card--action:focus-visible{ outline:2px solid var(--accent,#f97316); outline-offset:3px; }
.lg-card--action:active{ transform:translateY(0) scale(.996); }

/* — ENTRANCE: a clip-wipe that resolves into the resting chamfer (UX_RULES §4 clean, §11 motion-on-all).
   Staggered off an inline --i index. Reduced-motion snaps straight to the resting cut. — */
@media (prefers-reduced-motion: no-preference){
  .lg-card--reveal{ animation:lg-card-wipe .52s cubic-bezier(.22,.61,.36,1) both;
    animation-delay:calc(var(--i, 0) * 68ms); }
}
@keyframes lg-card-wipe{
  from{ opacity:0; transform:translateY(9px);
    clip-path:polygon(0 0, 7% 0, 7% 0, 7% 100%, 0 100%); }
  55%{ opacity:1; }
  to{ opacity:1; transform:translateY(0);
    clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
}

/* narrow widths: actions drop to a full-width row 2 so the name/ledger column isn't strangled (§3) */
@media (max-width:560px){
  .lg-card--dossier{ grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"mark body" "actions actions"; row-gap:14px; }
  .lg-mark{ grid-area:mark; }
  .lg-card__body{ grid-area:body; }
  .lg-card__actions{ grid-area:actions; }
  .lg-card__actions .lg-btn--primary{ flex:1; }
}

/* ── MOTION: honour reduced-motion (UX_RULES §4 / motion-kit) ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .lg-btn{ transition:none; }
  .lg-btn:hover, .lg-btn:active{ transform:none; }
  .lg-card, .lg-card--action{ transition:none; }
  .lg-card--dossier:hover, .lg-card--action:hover, .lg-card--action:active{ transform:none; }
}