/* =============================================================================
 * Dorost 9.0 — GLASS layer (owner-approved design, docs/design/9.0/)
 *
 * Load AFTER styles.css:  <link rel="stylesheet" href="assets/glass.css" />
 * Tokens mirror docs/design/9.0/glass-tokens.md exactly. This file is a pure
 * re-skin: no markup, ids or script hooks depend on it, and removing the
 * <link> restores the 8.x look.
 *
 * Theme wiring (same switch as styles.css / Dorost.setTheme):
 *   data-theme="dark"            → dark glass
 *   data-theme="light"           → light glass
 *   no data-theme ("Auto")       → follows the OS; dark is the default when the
 *                                  OS reports no preference (glass-tokens.md §2)
 * The legacy tokens (--bg, --panel, --text-muted, --accent, --success …) are
 * re-pointed at their glass equivalents so the hundreds of inline
 * `var(--panel)` / `var(--text-soft)` styles on the staff pages pick up the
 * glass palette (and its measured contrast) without touching their markup.
 *
 * Rules (glass-tokens.md §1):
 *   1. Glass only sits on the warm blurred SCENE (body::before / ::after).
 *   2. One level of blur. Anything inside a glass card uses --glass-inner.
 *   3. Text tokens below are the measured ones — don't reuse solid tokens.
 *   4. Gold = the one active / primary / eyebrow thing per area.
 *   5. Every glass surface has a solid fallback (@supports, Reduce
 *      Transparency, Reduce Motion).
 * ========================================================================== */

/* ---------- 1. Tokens — theme-independent ---------- */
:root {
  --font-display: 'Gloock', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px;
  --blur: 24px; --blur-chrome: 32px; --sat: 150%;
  --lift: -4px;                         /* owner asked for a 4–5px hover lift */
  --dur-fast: 120ms; --dur: 180ms; --dur-slow: 280ms; --ease: cubic-bezier(.2,.8,.2,1);
  --gold-grad: linear-gradient(135deg, #e6c47e 0%, #c69a34 100%);
  --on-gold: #151007;
  --radius: 20px; --radius-sm: 12px;
}

/* ---------- 1a. Tokens — dark (default) ---------- */
:root:not([data-theme="light"]) {
  color-scheme: dark;

  --base: #0c0907;
  --gtext: #f4efe6; --muted: #c9c2b5; --soft: #a8a194;
  --gold: #d4b876; --gold-strong: #e6c47e; --gold-wash: rgba(212,184,118,.14); --gold-line: rgba(212,184,118,.34);
  --glass: rgba(20,17,14,.60); --glass-strong: rgba(16,14,12,.74);
  --glass-inner: rgba(255,255,255,.05); --glass-inner-2: rgba(255,255,255,.08);
  --glass-fallback: rgba(24,21,18,.94);
  --stroke: rgba(255,255,255,.11); --stroke-strong: rgba(255,255,255,.18); --hair: rgba(255,255,255,.07);
  --sheen: rgba(255,255,255,.055);
  --gshadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px rgba(0,0,0,.36), 0 2px 6px rgba(0,0,0,.22);
  --gshadow-hover: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 44px rgba(0,0,0,.46), 0 4px 10px rgba(0,0,0,.26);
  --g-success: #5ee08f; --success-wash: rgba(74,222,128,.13); --success-line: rgba(74,222,128,.30);
  --g-warning: #fbbf24; --warning-wash: rgba(251,191,36,.13); --warning-line: rgba(251,191,36,.34);
  --g-danger: #fb8a8a;  --danger-wash: rgba(248,113,113,.14); --danger-line: rgba(248,113,113,.36);
  --g-info: #93d5f7;    --info-wash: rgba(125,211,252,.12);   --info-line: rgba(125,211,252,.28);
  --neutral-wash: rgba(255,255,255,.07); --neutral-line: rgba(255,255,255,.14);
  --skel: rgba(255,255,255,.07); --skel-hi: rgba(255,255,255,.13);
  --scene:
    radial-gradient(circle at 74% 16%, rgba(255,214,150,.50) 0 9px, transparent 30px),
    radial-gradient(circle at 83% 27%, rgba(255,178,108,.36) 0 15px, transparent 50px),
    radial-gradient(circle at 66% 9%, rgba(255,232,196,.30) 0 7px, transparent 26px),
    radial-gradient(circle at 93% 12%, rgba(236,118,78,.30) 0 12px, transparent 44px),
    radial-gradient(circle at 58% 24%, rgba(150,170,205,.22) 0 13px, transparent 44px),
    radial-gradient(circle at 89% 44%, rgba(255,200,130,.20) 0 10px, transparent 40px),
    radial-gradient(circle at 21% 72%, rgba(255,196,120,.16) 0 18px, transparent 60px),
    radial-gradient(ellipse 52% 46% at 10% 14%, rgba(198,134,58,.58), transparent 70%),
    radial-gradient(ellipse 48% 58% at 90% 88%, rgba(126,62,28,.62), transparent 70%),
    radial-gradient(ellipse 58% 40% at 76% 18%, rgba(66,80,104,.50), transparent 70%),
    radial-gradient(ellipse 70% 46% at 38% 102%, rgba(70,40,20,.75), transparent 70%),
    radial-gradient(ellipse 40% 32% at 46% 52%, rgba(150,98,48,.30), transparent 70%),
    linear-gradient(160deg, #130e0a 0%, #1d150e 45%, #0c0907 100%);
  --vignette: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%);

  /* Legacy tokens → glass equivalents (dark) */
  --bg: #1a1612;                          /* inline "well" backgrounds inside cards (page bg is --base) */
  --panel: rgba(24,21,18,.94);            /* = --glass-fallback: modals / popovers stay opaque */
  --panel-2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);
  --text: #f4efe6; --text-muted: #c9c2b5; --text-soft: #a8a194; --ivory: #f4efe6;
  --brand: #f4efe6; --brand-600: #ffffff; --brand-50: rgba(255,255,255,.06);
  --accent: #d4b876; --accent-600: #e6c47e; --accent-50: rgba(212,184,118,.14);
  --spark: #d4b876; --spark-600: #e6c47e; --spark-50: rgba(212,184,118,.10);
  --accent-on-brand: #6e5314;
  --success: #5ee08f; --success-50: rgba(74,222,128,.13);
  --warning: #fbbf24; --warning-50: rgba(251,191,36,.13);
  --danger: #fb8a8a;  --danger-50: rgba(248,113,113,.14);
  --info: #93d5f7;    --info-50: rgba(125,211,252,.12);
  --shadow-sm: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px rgba(0,0,0,.36), 0 2px 6px rgba(0,0,0,.22);
  --shadow-md: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 44px rgba(0,0,0,.46), 0 4px 10px rgba(0,0,0,.26);
  --theme-name: "dark";
}

/* ---------- 1b. Tokens — light ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --base: #efe7da;
  --gtext: #1a1712; --muted: #45413a; --soft: #57524a;
  --gold: #76591a; --gold-strong: #6a4f12; --gold-wash: rgba(160,120,40,.13); --gold-line: rgba(130,96,26,.32);
  --glass: rgba(255,253,248,.66); --glass-strong: rgba(255,253,248,.82);
  --glass-inner: rgba(255,255,255,.55); --glass-inner-2: rgba(255,255,255,.75);
  --glass-fallback: rgba(255,253,248,.96);
  --stroke: rgba(255,255,255,.80); --stroke-strong: rgba(255,255,255,.95); --hair: rgba(26,23,18,.08);
  --sheen: rgba(255,255,255,.45);
  --gshadow: inset 0 0 0 .5px rgba(26,23,18,.06), 0 12px 32px rgba(92,66,30,.13), 0 2px 6px rgba(92,66,30,.08);
  --gshadow-hover: inset 0 0 0 .5px rgba(26,23,18,.08), 0 20px 44px rgba(92,66,30,.20), 0 4px 10px rgba(92,66,30,.10);
  --g-success: #106330; --success-wash: rgba(18,112,54,.10); --success-line: rgba(18,112,54,.26);
  --g-warning: #8a3e06; --warning-wash: rgba(180,83,9,.11);  --warning-line: rgba(154,69,7,.30);
  --g-danger: #b01a1a;  --danger-wash: rgba(200,30,30,.09);  --danger-line: rgba(200,30,30,.26);
  --g-info: #0c4a6e;    --info-wash: rgba(12,74,110,.09);    --info-line: rgba(12,74,110,.24);
  --neutral-wash: rgba(26,23,18,.06); --neutral-line: rgba(26,23,18,.14);
  --skel: rgba(26,23,18,.07); --skel-hi: rgba(26,23,18,.12);
  --scene:
    radial-gradient(circle at 74% 16%, rgba(255,255,255,.85) 0 10px, transparent 34px),
    radial-gradient(circle at 84% 28%, rgba(255,244,222,.70) 0 16px, transparent 52px),
    radial-gradient(circle at 63% 10%, rgba(255,255,255,.60) 0 8px, transparent 28px),
    radial-gradient(ellipse 52% 46% at 12% 12%, rgba(255,250,240,.95), transparent 70%),
    radial-gradient(ellipse 50% 56% at 88% 86%, rgba(201,150,104,.50), transparent 70%),
    radial-gradient(ellipse 56% 40% at 78% 18%, rgba(176,190,184,.55), transparent 70%),
    radial-gradient(ellipse 64% 44% at 36% 100%, rgba(186,146,104,.45), transparent 70%),
    radial-gradient(ellipse 40% 34% at 46% 52%, rgba(232,196,150,.45), transparent 70%),
    radial-gradient(ellipse 30% 30% at 22% 70%, rgba(236,182,150,.40), transparent 70%),
    linear-gradient(160deg, #f6efe4 0%, #ebdfcc 50%, #e2d3bd 100%);
  --vignette: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 60%, rgba(120,90,50,.16) 100%);

  --bg: #efe7da;
  --panel: rgba(255,253,248,.96);
  --panel-2: rgba(255,255,255,.55);
  --border: rgba(26,23,18,.10);
  --border-strong: rgba(26,23,18,.17);
  --text: #1a1712; --text-muted: #45413a; --text-soft: #57524a; --ivory: #1a1712;
  --brand: #1a1712; --brand-600: #0a0a0a; --brand-50: rgba(26,23,18,.05);
  --accent: #76591a; --accent-600: #6a4f12; --accent-50: rgba(160,120,40,.13);
  --spark: #76591a; --spark-600: #6a4f12; --spark-50: rgba(160,120,40,.10);
  --accent-on-brand: #d4b876;
  --success: #106330; --success-50: rgba(18,112,54,.10);
  --warning: #8a3e06; --warning-50: rgba(180,83,9,.11);
  --danger: #b01a1a;  --danger-50: rgba(200,30,30,.09);
  --info: #0c4a6e;    --info-50: rgba(12,74,110,.09);
  --shadow-sm: inset 0 0 0 .5px rgba(26,23,18,.06), 0 12px 32px rgba(92,66,30,.13), 0 2px 6px rgba(92,66,30,.08);
  --shadow-md: inset 0 0 0 .5px rgba(26,23,18,.08), 0 20px 44px rgba(92,66,30,.20), 0 4px 10px rgba(92,66,30,.10);
  --theme-name: "light";
}
/* Auto mode while the OS is light — identical body to the block above. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --base: #efe7da;
    --gtext: #1a1712; --muted: #45413a; --soft: #57524a;
    --gold: #76591a; --gold-strong: #6a4f12; --gold-wash: rgba(160,120,40,.13); --gold-line: rgba(130,96,26,.32);
    --glass: rgba(255,253,248,.66); --glass-strong: rgba(255,253,248,.82);
    --glass-inner: rgba(255,255,255,.55); --glass-inner-2: rgba(255,255,255,.75);
    --glass-fallback: rgba(255,253,248,.96);
    --stroke: rgba(255,255,255,.80); --stroke-strong: rgba(255,255,255,.95); --hair: rgba(26,23,18,.08);
    --sheen: rgba(255,255,255,.45);
    --gshadow: inset 0 0 0 .5px rgba(26,23,18,.06), 0 12px 32px rgba(92,66,30,.13), 0 2px 6px rgba(92,66,30,.08);
    --gshadow-hover: inset 0 0 0 .5px rgba(26,23,18,.08), 0 20px 44px rgba(92,66,30,.20), 0 4px 10px rgba(92,66,30,.10);
    --g-success: #106330; --success-wash: rgba(18,112,54,.10); --success-line: rgba(18,112,54,.26);
    --g-warning: #8a3e06; --warning-wash: rgba(180,83,9,.11);  --warning-line: rgba(154,69,7,.30);
    --g-danger: #b01a1a;  --danger-wash: rgba(200,30,30,.09);  --danger-line: rgba(200,30,30,.26);
    --g-info: #0c4a6e;    --info-wash: rgba(12,74,110,.09);    --info-line: rgba(12,74,110,.24);
    --neutral-wash: rgba(26,23,18,.06); --neutral-line: rgba(26,23,18,.14);
    --skel: rgba(26,23,18,.07); --skel-hi: rgba(26,23,18,.12);
    --scene:
      radial-gradient(circle at 74% 16%, rgba(255,255,255,.85) 0 10px, transparent 34px),
      radial-gradient(circle at 84% 28%, rgba(255,244,222,.70) 0 16px, transparent 52px),
      radial-gradient(circle at 63% 10%, rgba(255,255,255,.60) 0 8px, transparent 28px),
      radial-gradient(ellipse 52% 46% at 12% 12%, rgba(255,250,240,.95), transparent 70%),
      radial-gradient(ellipse 50% 56% at 88% 86%, rgba(201,150,104,.50), transparent 70%),
      radial-gradient(ellipse 56% 40% at 78% 18%, rgba(176,190,184,.55), transparent 70%),
      radial-gradient(ellipse 64% 44% at 36% 100%, rgba(186,146,104,.45), transparent 70%),
      radial-gradient(ellipse 40% 34% at 46% 52%, rgba(232,196,150,.45), transparent 70%),
      radial-gradient(ellipse 30% 30% at 22% 70%, rgba(236,182,150,.40), transparent 70%),
      linear-gradient(160deg, #f6efe4 0%, #ebdfcc 50%, #e2d3bd 100%);
    --vignette: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 60%, rgba(120,90,50,.16) 100%);

    --bg: #efe7da;
    --panel: rgba(255,253,248,.96);
    --panel-2: rgba(255,255,255,.55);
    --border: rgba(26,23,18,.10);
    --border-strong: rgba(26,23,18,.17);
    --text: #1a1712; --text-muted: #45413a; --text-soft: #57524a; --ivory: #1a1712;
    --brand: #1a1712; --brand-600: #0a0a0a; --brand-50: rgba(26,23,18,.05);
    --accent: #76591a; --accent-600: #6a4f12; --accent-50: rgba(160,120,40,.13);
    --spark: #76591a; --spark-600: #6a4f12; --spark-50: rgba(160,120,40,.10);
    --accent-on-brand: #d4b876;
    --success: #106330; --success-50: rgba(18,112,54,.10);
    --warning: #8a3e06; --warning-50: rgba(180,83,9,.11);
    --danger: #b01a1a;  --danger-50: rgba(200,30,30,.09);
    --info: #0c4a6e;    --info-50: rgba(12,74,110,.09);
    --shadow-sm: inset 0 0 0 .5px rgba(26,23,18,.06), 0 12px 32px rgba(92,66,30,.13), 0 2px 6px rgba(92,66,30,.08);
    --shadow-md: inset 0 0 0 .5px rgba(26,23,18,.08), 0 20px 44px rgba(92,66,30,.20), 0 4px 10px rgba(92,66,30,.10);
    --theme-name: "light";
  }
}

/* ---------- 2. The scene (one fixed layer behind everything) ---------- */
html { background: var(--base); }
body.g-scene, body.has-chrome { background: transparent; color: var(--text); }
body.g-scene::before, body.has-chrome::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--vignette), var(--scene);
}
body.g-scene::after, body.has-chrome::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- 3. Glass primitives (used directly by new 9.0 markup) ---------- */
.glass {
  position: relative; background: var(--glass); border: 1px solid var(--stroke);
  border-radius: var(--r-lg); box-shadow: var(--gshadow); color: var(--text);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
          backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--sheen), transparent 38%);
}
.glass > * { position: relative; }
.glass.strong { background: var(--glass-strong); }
.glass.lift { cursor: pointer; }
.glass.lift:hover, .glass.lift:focus-visible { transform: translateY(var(--lift)); box-shadow: var(--gshadow-hover); border-color: var(--stroke-strong); }
/* Never stack blurs: a glass card inside a glass card becomes an inner tint. */
.glass .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-inner); box-shadow: none; }
.inner { background: var(--glass-inner); border: 1px solid var(--hair); border-radius: var(--r-md); }

.g-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.g-serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -.005em; }
.g-muted { color: var(--muted); } .g-soft { color: var(--soft); } .g-gold { color: var(--gold); }
.g-mono { font-family: var(--font-mono); }
.gi { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gi.sm { width: 14px; height: 14px; } .gi.xs { width: 12px; height: 12px; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid var(--neutral-line); background: var(--neutral-wash); color: var(--muted); line-height: 1; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ok   { color: var(--g-success); background: var(--success-wash); border-color: var(--success-line); }
.chip.live { color: var(--gold-strong); background: var(--gold-wash); border-color: var(--gold-line); }   /* gold-strong: gold-on-gold-wash measured 4.49 in light with plain --gold */
.chip.warn { color: var(--g-warning); background: var(--warning-wash); border-color: var(--warning-line); }
.chip.bad  { color: var(--g-danger); background: var(--danger-wash); border-color: var(--danger-line); }
.chip.info { color: var(--g-info); background: var(--info-wash); border-color: var(--info-line); }
.chip.sm { height: 20px; padding: 0 8px; font-size: 11px; gap: 4px; }

.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--r-pill); font: 600 13px/1 var(--font-sans); white-space: nowrap; border: 1px solid var(--stroke); background: var(--glass-inner-2); color: var(--text); cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.gbtn:hover { border-color: var(--stroke-strong); text-decoration: none; color: var(--text); }
.gbtn.gold { background: var(--gold-grad); color: var(--on-gold); border-color: rgba(255,255,255,.25); box-shadow: 0 6px 18px rgba(198,154,52,.28); }
.gbtn.gold:hover { color: var(--on-gold); filter: brightness(1.04); }
.gbtn.sm { height: 28px; padding: 0 11px; font-size: 12px; }
.gbtn.ghost { background: transparent; }
.gbtn:disabled { opacity: .55; cursor: default; }
.gav { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 700; flex: none; background: var(--glass-inner-2); border: 1px solid var(--neutral-line); color: var(--text); }
.gav.gold { background: var(--gold-grad); color: var(--on-gold); border-color: rgba(255,255,255,.3); }
.gseg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--glass-inner); border: 1px solid var(--hair); }
.gseg button { height: 26px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); font: 600 12px/1 var(--font-sans); color: var(--muted); background: transparent; border: 1px solid transparent; cursor: pointer; }
.gseg button:hover { color: var(--text); }
.gseg button.on { background: var(--glass-inner-2); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.18); border-color: var(--stroke); }
.skel { background: linear-gradient(90deg, var(--skel) 0%, var(--skel-hi) 45%, var(--skel) 90%); background-size: 200% 100%; border-radius: 8px; animation: gShimmer 1.4s linear infinite; }
@keyframes gShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- 4. Legacy staff components → glass ----------
 * The blur lives on a ::before pseudo-element (like the dispatch bar already
 * does) so a glass card never becomes the containing block for a
 * position:fixed modal rendered inside it, and the sheen sits on ::after. */
:is(.card, .stat, .table-wrap, .filters, .dz-card, .login-card, .page-header) {
  position: relative; background: transparent; border: 1px solid var(--stroke);
  border-radius: var(--r-lg); box-shadow: var(--gshadow); color: var(--text);
}
:is(.card, .stat, .table-wrap, .filters, .dz-card, .login-card, .page-header)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
          backdrop-filter: blur(var(--blur)) saturate(var(--sat));
}
:is(.card, .stat, .table-wrap, .filters, .dz-card, .login-card, .page-header)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--sheen), transparent 38%);
}
/* One level of blur: nested legacy cards become inner tints. */
:is(.card, .stat, .table-wrap, .filters, .dz-card, .glass) :is(.card, .stat, .table-wrap, .filters, .dz-card) {
  box-shadow: none; border-color: var(--hair); border-radius: var(--r-md);
}
:is(.card, .stat, .table-wrap, .filters, .dz-card, .glass) :is(.card, .stat, .table-wrap, .filters, .dz-card)::before {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-inner);
}
:is(.card, .stat, .table-wrap, .filters, .dz-card, .glass) :is(.card, .stat, .table-wrap, .filters, .dz-card)::after { display: none; }
/* A drill-down table inside a card is part of the card, not a second card. */
.card .table-wrap { border: 0; border-radius: 0; background: transparent; }
.card .table-wrap::before, .card .table-wrap::after { display: none; }

.page-header { padding: 14px 20px; border-radius: var(--r-xl); min-height: 64px; }
.page-header::before { background: var(--glass-strong); }
.page-header h1 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--text); }
.page-header .sub { color: var(--muted); }
.card-head { border-bottom-color: var(--hair); padding: 16px 20px 12px; }
.card-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 19px; color: var(--text); }
.card-pad { padding: 18px 20px; }
.section-title { color: var(--gold); }
.content { padding: 22px 24px 32px; }

.stat { padding: 16px 18px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.stat:hover { transform: translateY(var(--lift)); box-shadow: var(--gshadow-hover); border-color: var(--stroke-strong); }
.stat .label { color: var(--muted); }
.stat .value { color: var(--text); font-family: var(--font-display); }
.stat .icon-wrap { background: var(--glass-inner) !important; color: var(--gold) !important; border: 1px solid var(--hair); box-shadow: none !important; border-radius: 10px; width: 34px; height: 34px; }
.stat .trend { color: var(--soft); }
.stat .trend.down { color: var(--g-danger); }

/* Buttons — pills; primary = the gold gradient. */
.btn { border-radius: var(--r-pill); border: 1px solid var(--stroke); background: var(--glass-inner-2); color: var(--text); font-weight: 600; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.btn:hover { background: var(--glass-inner-2); border-color: var(--stroke-strong); text-decoration: none; }
.btn-primary, .btn-spark { background: var(--gold-grad); border-color: rgba(255,255,255,.25); color: var(--on-gold); box-shadow: 0 6px 18px rgba(198,154,52,.28); }
.btn-primary:hover, .btn-spark:hover { background: var(--gold-grad); color: var(--on-gold); filter: brightness(1.04); box-shadow: 0 10px 24px rgba(198,154,52,.36); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--glass-inner); border-color: var(--hair); }
.btn-danger { border-color: transparent; }

/* Inputs inside glass: plain inner tint, never a second blur. */
.field label { color: var(--muted); }
.field input, .field select, .field textarea { background: var(--glass-inner); border: 1px solid var(--border-strong); border-radius: 12px; color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--gold-wash); }
select option { background: var(--base); color: var(--text); }

/* Tabs → segmented chips */
.tab { border-radius: var(--r-pill); border: 1px solid var(--hair); background: var(--glass-inner); color: var(--muted); font-weight: 600; }
.tab:hover { color: var(--text); border-color: var(--stroke); }
.tab .count { background: var(--neutral-wash); color: var(--muted); }
.tab.active { background: var(--glass-inner-2); color: var(--text); border-color: var(--stroke-strong); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.tab.active .count { background: var(--gold-wash); color: var(--gold); }

/* Tables — rows on glass, hairline dividers, mono headers. */
table.runs thead th { background: transparent; color: var(--soft); border-bottom: 1px solid var(--hair); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; }
table.runs tbody td { border-bottom: 1px solid var(--hair); }
table.runs tbody tr { transition: background var(--dur-fast) var(--ease); }
table.runs tbody tr:hover { background: var(--glass-inner); }
table.runs .meta, table.runs .run-id { color: var(--soft); }
.table-foot { border-top: 1px solid var(--hair); color: var(--soft); }

/* Status pills → glass chips (colour + wash from the measured tokens). */
.pill { border-radius: var(--r-pill); border: 1px solid var(--neutral-line); background: var(--neutral-wash); color: var(--muted); font-weight: 600; }
.pill-quoted, .pill-booked { color: var(--g-info); background: var(--info-wash); border-color: var(--info-line); }
.pill-pending, .pill-no-show { color: var(--g-warning); background: var(--warning-wash); border-color: var(--warning-line); }
.pill-dispatched, .pill-en-route, .pill-onboard { color: var(--gold-strong); background: var(--gold-wash); border-color: var(--gold-line); }
.pill-completed { color: var(--g-success); background: var(--success-wash); border-color: var(--success-line); }
.pill-cancelled, .pill-asap { color: var(--g-danger); background: var(--danger-wash); border-color: var(--danger-line); }
.pill-other { color: var(--muted); background: var(--neutral-wash); }

.timeline li { border-left-color: var(--hair); }
.timeline li::before { background: var(--gold); border-color: var(--base); }
.timeline .when { color: var(--soft); }
.kv .k { color: var(--muted); }
.divider { background: var(--hair); }
.toast { border-radius: 14px; background: var(--glass-fallback); color: var(--text); border: 1px solid var(--stroke); -webkit-backdrop-filter: blur(var(--blur-chrome)); backdrop-filter: blur(var(--blur-chrome)); }
.toast.success { background: #106330; color: #fff; border-color: transparent; }
.toast.error { background: #b01a1a; color: #fff; border-color: transparent; }

/* ---------- 5. The dispatch bar → floating glass top bar ---------- */
:root:not([data-theme="light"]) :is(.dnav, .dn-drawer, .dn-pal) {
  --dn-text: #f4efe6; --dn-text-2: #c9c2b5; --dn-mut: #a8a194;
  --dn-line: rgba(255,255,255,.08); --dn-hover: rgba(255,255,255,.06);
  --dn-glass: rgba(16,14,12,.74); --dn-panel: rgba(24,21,18,.94); --dn-panel-border: rgba(255,255,255,.11);
  --dn-gold: #d4b876; --dn-gold-2: #e6c47e; --dn-tile: rgba(212,184,118,.14);
  --dn-on-bg: rgba(212,184,118,.14); --dn-on-ring: rgba(212,184,118,.34); --dn-danger: #fb8a8a;
}
:root[data-theme="light"] :is(.dnav, .dn-drawer, .dn-pal) {
  --dn-text: #1a1712; --dn-text-2: #45413a; --dn-mut: #57524a;
  --dn-line: rgba(26,23,18,.08); --dn-hover: rgba(26,23,18,.05);
  --dn-glass: rgba(255,253,248,.82); --dn-panel: rgba(255,253,248,.96); --dn-panel-border: rgba(255,255,255,.80);
  --dn-gold: #8a6a1f; --dn-gold-2: #76591a; --dn-tile: rgba(160,120,40,.13);
  --dn-on-bg: rgba(160,120,40,.13); --dn-on-ring: rgba(130,96,26,.32); --dn-danger: #b01a1a;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) :is(.dnav, .dn-drawer, .dn-pal) {
    --dn-text: #1a1712; --dn-text-2: #45413a; --dn-mut: #57524a;
    --dn-line: rgba(26,23,18,.08); --dn-hover: rgba(26,23,18,.05);
    --dn-glass: rgba(255,253,248,.82); --dn-panel: rgba(255,253,248,.96); --dn-panel-border: rgba(255,255,255,.80);
    --dn-gold: #8a6a1f; --dn-gold-2: #76591a; --dn-tile: rgba(160,120,40,.13);
    --dn-on-bg: rgba(160,120,40,.13); --dn-on-ring: rgba(130,96,26,.32); --dn-danger: #b01a1a;
  }
}
body.has-chrome .dnav { top: 12px; margin: 14px 18px 0; border-radius: var(--r-xl); }
body.has-chrome .dnav::before {
  border-radius: inherit; border: 1px solid var(--stroke); box-shadow: var(--gshadow);
  -webkit-backdrop-filter: blur(var(--blur-chrome)) saturate(var(--sat)); backdrop-filter: blur(var(--blur-chrome)) saturate(var(--sat));
}
.dn-search { border-radius: var(--r-pill); }
/* Popovers over dense lists: fallback surface + chrome blur (tokens §3). */
.pax-suggest, .pac-container { -webkit-backdrop-filter: blur(var(--blur-chrome)) saturate(var(--sat)); backdrop-filter: blur(var(--blur-chrome)) saturate(var(--sat)); border-radius: var(--r-md); }
/* The CT clock strip (app.js injects its own <style> after this file, hence !important). */
body.has-chrome .dnav { top: calc(var(--dorost-clock-h, 0px) + env(safe-area-inset-top, 0px) + 10px) !important; }
body #dorostClockBar {
  background: var(--glass-strong) !important; color: var(--muted) !important; border-bottom: 1px solid var(--hair) !important;
  -webkit-backdrop-filter: blur(var(--blur-chrome)) saturate(var(--sat)); backdrop-filter: blur(var(--blur-chrome)) saturate(var(--sat));
}
body #dorostClockBar .accent { color: var(--gold) !important; }
.dn-panel, .dn-pal-box { border-radius: var(--r-lg); }
.dn-tab.on { color: var(--dn-gold-2); }

/* ---------- 7. Customer pages (book / account / receipt / live) ----------
 * These pages carry body.marketing.client-shell, whose body-level token pins
 * in styles.css (0,3,1) would beat :root. Opting a page in with
 * class="… g-scene g-client" re-pins the same legacy tokens to the glass
 * palette at higher specificity. The pages always set data-theme (dark by
 * default, light when chosen), so no OS-preference branch is needed here. */
:root:not([data-theme="light"]) body.g-client.marketing.client-shell,
:root:not([data-theme="light"]) body.g-client.marketing:not(.client-shell) {
  background: transparent;
  --text: #f4efe6; --text-muted: #c9c2b5; --text-soft: #a8a194; --ivory: #f4efe6;
  --bg: #1a1612; --panel: rgba(24,21,18,.94); --panel-2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.16);
}
:root[data-theme="light"] body.g-client.marketing.client-shell,
:root[data-theme="light"] body.g-client.marketing:not(.client-shell) {
  background: transparent;
  --text: #1a1712; --text-muted: #45413a; --text-soft: #57524a; --ivory: #1a1712;
  --bg: #efe7da; --panel: rgba(255,253,248,.96); --panel-2: rgba(255,255,255,.55);
  --border: rgba(26,23,18,.10); --border-strong: rgba(26,23,18,.17);
}
body.g-client .client-shell, body.g-client.client-shell { background: transparent; }
body.g-client .client-page::before { display: none; }   /* the scene replaces the old gold vignette */

/* Header → glass-strong bar (theme-aware; was always near-black). */
body.g-client .m-header, body.g-client.client-shell .m-header {
  background: var(--glass-strong); border-bottom: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(var(--blur-chrome)) saturate(var(--sat)); backdrop-filter: blur(var(--blur-chrome)) saturate(var(--sat));
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
body.g-client.client-shell .m-nav-links a { color: var(--muted); }
body.g-client.client-shell .m-nav-links a:hover { color: var(--text); }
body.g-client .m-logo, body.g-client .m-logo span { color: var(--text); }

/* Cards → glass (blur on ::before so sticky/fixed children keep working). */
body.g-client :is(.auth-card, .acc-side, .acc-content, .booking-grid .left, .booking-grid .right, .g-card) {
  background: transparent; border: 1px solid var(--stroke); border-radius: var(--r-lg); box-shadow: var(--gshadow); color: var(--text);
}
body.g-client :is(.auth-card, .acc-content, .booking-grid .left, .g-card) { position: relative; }
body.g-client :is(.auth-card, .acc-side, .acc-content, .booking-grid .left, .booking-grid .right, .g-card)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)); backdrop-filter: blur(var(--blur)) saturate(var(--sat));
}
body.g-client :is(.auth-card, .acc-side, .acc-content, .booking-grid .left, .booking-grid .right, .g-card)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--sheen), transparent 38%);
}
body.g-client .acc-side { isolation: auto; }
body.g-client .acc-section-head { border-bottom-color: var(--hair); }
body.g-client .acc-side .navlinks { border-top-color: var(--hair); }
body.g-client .acc-side .navlinks a.active { background: var(--gold-wash); color: var(--gold); box-shadow: inset 2px 0 0 var(--gold); }
body.g-client .booking-row { border-bottom-color: var(--hair); transition: background var(--dur-fast) var(--ease); }
body.g-client .booking-row:hover { background: var(--glass-inner); }
body.g-client .booking-row .when { background: var(--glass-inner); border: 1px solid var(--hair); border-radius: 12px; }
body.g-client .booking-row .when .d { color: var(--gold); }
body.g-client .auth-tabs { background: var(--glass-inner); border: 1px solid var(--hair); }
body.g-client .auth-tabs button.active { background: var(--glass-inner-2); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
body.g-client .qrow.total { border-top-color: var(--hair); }
body.g-client .qrow.total .v { color: var(--text); }
body.g-client .booking-grid .left h2, body.g-client .booking-grid .right h3 { font-family: var(--font-display); font-weight: 400; }
body.g-client .m-btn-gold, body.g-client .m-btn-spark { background: var(--gold-grad); color: var(--on-gold); }
body.g-client .m-btn-dark { background: var(--glass-inner-2); color: var(--text); border: 1px solid var(--stroke); box-shadow: none; }
body.g-client .m-btn-dark:hover { background: var(--glass-inner-2); color: var(--text); border-color: var(--stroke-strong); }
body.g-client .m-btn-outline { color: var(--text); border-color: var(--stroke-strong); background: var(--glass-inner); }
body.g-client .m-footer { background: var(--glass-strong); border-top: 1px solid var(--hair); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
body.g-client .pill { border-radius: var(--r-pill); }
/* pwa.js injects "My account / Sign out" into #navLinks for the mobile
 * hamburger; on desktop the header CTAs already cover it. */
@media (min-width: 881px) { body.g-client #navLinks [data-mobile-auth] { display: none !important; }   /* pwa.js sets display:flex inline */ }
body.g-client #mobileSignOut { color: var(--g-danger) !important; }

/* ---------- 6. Fallbacks (glass-tokens.md §3) ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, :is(.card, .stat, .table-wrap, .filters, .dz-card, .login-card, .page-header)::before,
  body.g-client :is(.auth-card, .acc-side, .acc-content, .booking-grid .left, .booking-grid .right, .g-card)::before { background: var(--glass-fallback); }
  .glass .glass { background: var(--glass-inner); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, body.has-chrome .dnav::before, .dn-panel, .dn-pal-box, .toast,
  :is(.card, .stat, .table-wrap, .filters, .dz-card, .login-card, .page-header)::before,
  body.g-client :is(.auth-card, .acc-side, .acc-content, .booking-grid .left, .booking-grid .right, .g-card)::before,
  body.g-client .m-header {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--glass-fallback);
  }
  .glass .glass { background: var(--glass-inner); }
}
@media (prefers-reduced-motion: reduce) {
  .glass, .stat, .gbtn, .btn { transition: none; }
  .glass.lift:hover, .glass.lift:focus-visible, .stat:hover { transform: none; }
  .skel { animation: none; }
}
@media print {
  body.g-scene::before, body.g-scene::after, body.has-chrome::before, body.has-chrome::after { display: none; }
  .glass, :is(.card, .stat, .table-wrap, .filters, .dz-card, .page-header)::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
}