/* =============================================================================
   themes/glass.css: the "Glass" theme.
   Modelled on a frosted-glass dashboard: a warm, softly blurred scene (CSS mesh gradient, no photo)
   fixed behind the page, translucent blurred panels with a 1px light edge, near-black "ink" for text
   and charts, a yellow highlighter as the only accent colour, black pill buttons and badges, and the
   site tabs as a pill bar inside a glass capsule. Dark mode is a deep espresso version of the scene.

   1. Tokens (--brand-*, Primer surface/border/text variables, and a few theme-local --glass-*) for
      light and dark. The dark block appears twice, as in github.css: once for "Dark", once inside the
      prefers-color-scheme media query for "System". Keep them identical.
   2. Fallbacks: solid surfaces without backdrop-filter or with prefers-reduced-transparency.
   3. Component styling, every selector scoped to html[data-app-theme=glass].
   Raw colours are allowed here (and in github.css / bento.css) and nowhere else.

   Readability: normal glass is 46% fill (hero, KPIs, chart, nav). Tables, long lists, forms and
   inputs use the strong glass (80%+). Text/background pairs were checked for WCAG AA (4.5:1) on the
   darkest and lightest parts of the scene, light and dark.
   ============================================================================= */

/* ---------- 1. tokens: mode independent ---------- */
html[data-app-theme=glass][data-color-mode] {
  --brand-name-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --brand-body-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --brand-serif-font: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --brand-mono-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --brand-radius: 14px;               /* controls, code blocks */
  --brand-radius-lg: 22px;            /* panels */
  --brand-chart-bar-radius: 6;
  --brand-chart-area: 0.05;           /* very faint fill under the first line */
  --brand-chart-line-width: 1.75;     /* thin ink lines */
  --brand-chart-tension: 0.35;
}

/* ---------- 1. tokens: LIGHT ---------- */
html[data-app-theme=glass][data-color-mode=light],
html[data-app-theme=glass][data-color-mode=auto] {
  --brand-primary: #1a1612;
  --brand-primary-hover: #000000;
  --brand-primary-active: #000000;
  --brand-primary-fg: #ffffff;
  --brand-primary-muted: rgba(245, 213, 71, .42);       /* highlighter yellow: bars, selected rows */
  --brand-cta: #1a1612;                                  /* black pill, white text */
  --brand-cta-hover: #3a3128;
  --brand-cta-active: #000000;
  --brand-cta-fg: #ffffff;
  --brand-header-bg: transparent;
  --brand-header-fg: #4f4336;
  --brand-header-logo: #1a1612;
  /* warm blurred scene: sand, amber, terracotta and cream light spots; fixed behind the page */
  --brand-page-bg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 73% 27%, rgba(255, 247, 228, .95) 0, rgba(255, 247, 228, .55) 5%, rgba(255, 247, 228, 0) 11%),
    radial-gradient(circle at 15% 56%, rgba(255, 240, 210, .9) 0, rgba(255, 240, 210, .5) 4%, rgba(255, 240, 210, 0) 9%),
    radial-gradient(circle at 91% 68%, rgba(255, 232, 196, .85) 0, rgba(255, 232, 196, 0) 8%),
    radial-gradient(ellipse 22% 14% at 38% 6%, rgba(255, 246, 226, .8) 0, rgba(255, 246, 226, 0) 100%),
    radial-gradient(60% 55% at 4% 0%, #f0a24a 0%, rgba(240, 162, 74, 0) 72%),
    radial-gradient(55% 60% at 100% 8%, #d9764c 0%, rgba(217, 118, 76, 0) 74%),
    radial-gradient(65% 55% at 78% 108%, #c27a54 0%, rgba(194, 122, 84, 0) 74%),
    radial-gradient(55% 55% at 0% 100%, #d9b283 0%, rgba(217, 178, 131, 0) 74%),
    radial-gradient(45% 40% at 48% 58%, #f1d7a4 0%, rgba(241, 215, 164, 0) 78%),
    linear-gradient(160deg, #ecd8b6, #e4cba5);
  --brand-card-border: rgba(255, 255, 255, .6);
  --brand-input-border: #8a7966;
  --brand-shadow: 0 1px 1px rgba(80, 50, 20, .03), 0 6px 22px -16px rgba(80, 50, 20, .16);
  --brand-shadow-hover: 0 1px 2px rgba(80, 50, 20, .04), 0 12px 28px -16px rgba(80, 50, 20, .24);
  --brand-hero-bg: transparent;
  --brand-hero-fg: #1a1612;
  --brand-hero-fg-muted: #51453a;
  --brand-live-bg: rgba(255, 255, 255, .5);
  --brand-live-fg: #1a1612;
  --brand-live-dot: #1a1612;
  --brand-rail-bg: rgba(255, 255, 255, .45);
  --brand-rail-fg: #51453a;
  --brand-rail-hover-bg: rgba(26, 22, 18, .08);
  --brand-rail-active-bg: #1a1612;
  --brand-rail-active-fg: #ffffff;
  --brand-meter-track: rgba(26, 22, 18, .1);
  --brand-meter-fill: #1a1612;

  /* series: ink, highlighter yellow (deepened to ~3:1 for lines), warm greys; 5 = terracotta (negative) */
  --brand-series-1: #1a1612;
  --brand-series-2: #a87d00;
  --brand-series-3: #6f6355;
  --brand-series-4: #9c8e7d;
  --brand-series-5: #a8472b;
  --brand-series-6: #3f362c;
  --brand-heat-0: rgba(245, 213, 71, 0);
  --brand-heat-1: rgba(245, 213, 71, .5);
  --brand-heat-2: rgba(232, 160, 50, .68);
  --brand-heat-3: rgba(196, 92, 50, .82);
  --brand-heat-4: rgba(110, 30, 20, .92);

  /* glass (theme-local; the fallback block below swaps them for solids) */
  --glass-fill: rgba(255, 255, 255, .46);
  --glass-fill-strong: rgba(255, 255, 255, .8);
  --glass-fill-solid: #f6eee1;
  --glass-strong-solid: #fbf6ee;
  --glass-inset: rgba(255, 255, 255, .5);
  --glass-border: rgba(255, 255, 255, .6);
  --glass-hair: rgba(60, 40, 20, .1);
  --glass-blur: blur(22px) saturate(140%);
  --glass-base: #ecdcc2;
  --glass-mark: #f5d547;
  --glass-on-mark: #1a1612;
  --glass-link-line: rgba(26, 22, 18, .4);

  /* Primer surfaces for this mode */
  --bgColor-default: #fbf6ee;
  --bgColor-muted: rgba(255, 255, 255, .55);
  --bgColor-inset: #efe4d2;
  --bgColor-success-muted: #f5d547;
  --bgColor-danger-muted: rgba(168, 71, 43, .13);
  --bgColor-attention-muted: rgba(160, 100, 10, .14);
  --borderColor-default: rgba(60, 40, 20, .16);
  --borderColor-muted: rgba(60, 40, 20, .1);
  --fgColor-default: #1a1612;
  --fgColor-muted: #4f4237;
  --fgColor-success: #1a1612;
  --fgColor-danger: #822f17;
  --fgColor-attention: #7d5200;
  --button-default-bgColor-rest: rgba(255, 255, 255, .55);
  --button-default-bgColor-hover: rgba(255, 255, 255, .85);
  --button-default-bgColor-active: rgba(255, 255, 255, .95);
  --button-default-borderColor-rest: rgba(60, 40, 20, .22);
  --button-default-fgColor-rest: #1a1612;
}

/* ---------- 1. tokens: DARK ---------- */
html[data-app-theme=glass][data-color-mode=dark] {
  --brand-primary: #f4ece0;
  --brand-primary-hover: #ffffff;
  --brand-primary-active: #ffffff;
  --brand-primary-fg: #1a1208;
  --brand-primary-muted: rgba(245, 213, 71, .2);
  --brand-cta: #f4ece0;                                  /* light pill, dark text */
  --brand-cta-hover: #ffffff;
  --brand-cta-active: #e2d6c4;
  --brand-cta-fg: #1a1208;
  --brand-header-bg: transparent;
  --brand-header-fg: #cdbfab;
  --brand-header-logo: #f4ece0;
  --brand-page-bg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 73% 27%, rgba(190, 125, 62, .5) 0, rgba(190, 125, 62, .22) 5%, rgba(190, 125, 62, 0) 11%),
    radial-gradient(circle at 15% 56%, rgba(170, 105, 52, .42) 0, rgba(170, 105, 52, .18) 4%, rgba(170, 105, 52, 0) 9%),
    radial-gradient(circle at 91% 68%, rgba(190, 110, 60, .38) 0, rgba(190, 110, 60, 0) 8%),
    radial-gradient(ellipse 22% 14% at 38% 6%, rgba(200, 140, 80, .3) 0, rgba(200, 140, 80, 0) 100%),
    radial-gradient(60% 55% at 4% 0%, #7a4a22 0%, rgba(122, 74, 34, 0) 72%),
    radial-gradient(55% 60% at 100% 8%, #7d3f29 0%, rgba(125, 63, 41, 0) 74%),
    radial-gradient(65% 55% at 78% 108%, #64361f 0%, rgba(100, 54, 31, 0) 74%),
    radial-gradient(55% 55% at 0% 100%, #523620 0%, rgba(82, 54, 32, 0) 74%),
    radial-gradient(45% 40% at 48% 58%, #3d2816 0%, rgba(61, 40, 22, 0) 78%),
    linear-gradient(160deg, #26180f, #1a110b);
  --brand-card-border: rgba(255, 255, 255, .08);
  --brand-input-border: #8d7c68;
  --brand-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 30px -18px rgba(0, 0, 0, .55);
  --brand-shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 20px 38px -18px rgba(0, 0, 0, .7);
  --brand-hero-bg: transparent;
  --brand-hero-fg: #f4ece0;
  --brand-hero-fg-muted: #cdbfab;
  --brand-live-bg: rgba(255, 255, 255, .08);
  --brand-live-fg: #f4ece0;
  --brand-live-dot: #f5d547;
  --brand-rail-bg: rgba(30, 22, 16, .5);
  --brand-rail-fg: #cdbfab;
  --brand-rail-hover-bg: rgba(255, 255, 255, .09);
  --brand-rail-active-bg: #f4ece0;
  --brand-rail-active-fg: #1a1208;
  --brand-meter-track: rgba(255, 255, 255, .1);
  --brand-meter-fill: #f4ece0;

  --brand-series-1: #f4ece0;
  --brand-series-2: #f5d547;
  --brand-series-3: #a99a88;
  --brand-series-4: #7d6f60;
  --brand-series-5: #e8967a;
  --brand-series-6: #cbbda9;
  --brand-heat-0: rgba(245, 213, 71, 0);
  --brand-heat-1: rgba(245, 213, 71, .5);
  --brand-heat-2: rgba(232, 160, 50, .68);
  --brand-heat-3: rgba(196, 92, 50, .82);
  --brand-heat-4: rgba(110, 30, 20, .92);

  --glass-fill: rgba(30, 22, 16, .45);
  --glass-fill-strong: rgba(30, 22, 16, .82);
  --glass-fill-solid: #2a1e15;
  --glass-strong-solid: #241912;
  --glass-inset: rgba(255, 255, 255, .07);
  --glass-border: rgba(255, 255, 255, .09);
  --glass-hair: rgba(255, 255, 255, .09);
  --glass-blur: blur(22px) saturate(140%);
  --glass-base: #1c130d;
  --glass-mark: #f5d547;
  --glass-on-mark: #1a1612;
  --glass-link-line: rgba(244, 236, 224, .45);

  --bgColor-default: #241912;
  --bgColor-muted: rgba(255, 255, 255, .06);
  --bgColor-inset: #1a110b;
  --bgColor-success-muted: #f5d547;
  --bgColor-danger-muted: rgba(232, 150, 122, .16);
  --bgColor-attention-muted: rgba(235, 187, 92, .16);
  --borderColor-default: rgba(255, 255, 255, .13);
  --borderColor-muted: rgba(255, 255, 255, .08);
  --fgColor-default: #f4ece0;
  --fgColor-muted: #c4b5a1;
  --fgColor-success: #f5d547;
  --fgColor-danger: #f0a58b;
  --fgColor-attention: #ebbb5c;
  --button-default-bgColor-rest: rgba(255, 255, 255, .08);
  --button-default-bgColor-hover: rgba(255, 255, 255, .15);
  --button-default-bgColor-active: rgba(255, 255, 255, .2);
  --button-default-borderColor-rest: rgba(255, 255, 255, .22);
  --button-default-fgColor-rest: #f4ece0;
}

@media (prefers-color-scheme: dark) {
  html[data-app-theme=glass][data-color-mode=auto] {
    --brand-primary: #f4ece0;
    --brand-primary-hover: #ffffff;
    --brand-primary-active: #ffffff;
    --brand-primary-fg: #1a1208;
    --brand-primary-muted: rgba(245, 213, 71, .2);
    --brand-cta: #f4ece0;                                  /* light pill, dark text */
    --brand-cta-hover: #ffffff;
    --brand-cta-active: #e2d6c4;
    --brand-cta-fg: #1a1208;
    --brand-header-bg: transparent;
    --brand-header-fg: #cdbfab;
    --brand-header-logo: #f4ece0;
    --brand-page-bg:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      radial-gradient(circle at 73% 27%, rgba(190, 125, 62, .5) 0, rgba(190, 125, 62, .22) 5%, rgba(190, 125, 62, 0) 11%),
      radial-gradient(circle at 15% 56%, rgba(170, 105, 52, .42) 0, rgba(170, 105, 52, .18) 4%, rgba(170, 105, 52, 0) 9%),
      radial-gradient(circle at 91% 68%, rgba(190, 110, 60, .38) 0, rgba(190, 110, 60, 0) 8%),
      radial-gradient(ellipse 22% 14% at 38% 6%, rgba(200, 140, 80, .3) 0, rgba(200, 140, 80, 0) 100%),
      radial-gradient(60% 55% at 4% 0%, #7a4a22 0%, rgba(122, 74, 34, 0) 72%),
      radial-gradient(55% 60% at 100% 8%, #7d3f29 0%, rgba(125, 63, 41, 0) 74%),
      radial-gradient(65% 55% at 78% 108%, #64361f 0%, rgba(100, 54, 31, 0) 74%),
      radial-gradient(55% 55% at 0% 100%, #523620 0%, rgba(82, 54, 32, 0) 74%),
      radial-gradient(45% 40% at 48% 58%, #3d2816 0%, rgba(61, 40, 22, 0) 78%),
      linear-gradient(160deg, #26180f, #1a110b);
    --brand-card-border: rgba(255, 255, 255, .08);
    --brand-input-border: #8d7c68;
    --brand-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 30px -18px rgba(0, 0, 0, .55);
    --brand-shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 20px 38px -18px rgba(0, 0, 0, .7);
    --brand-hero-bg: transparent;
    --brand-hero-fg: #f4ece0;
    --brand-hero-fg-muted: #cdbfab;
    --brand-live-bg: rgba(255, 255, 255, .08);
    --brand-live-fg: #f4ece0;
    --brand-live-dot: #f5d547;
    --brand-rail-bg: rgba(30, 22, 16, .5);
    --brand-rail-fg: #cdbfab;
    --brand-rail-hover-bg: rgba(255, 255, 255, .09);
    --brand-rail-active-bg: #f4ece0;
    --brand-rail-active-fg: #1a1208;
    --brand-meter-track: rgba(255, 255, 255, .1);
    --brand-meter-fill: #f4ece0;

    --brand-series-1: #f4ece0;
    --brand-series-2: #f5d547;
    --brand-series-3: #a99a88;
    --brand-series-4: #7d6f60;
    --brand-series-5: #e8967a;
    --brand-series-6: #cbbda9;
    --brand-heat-0: rgba(245, 213, 71, 0);
    --brand-heat-1: rgba(245, 213, 71, .5);
    --brand-heat-2: rgba(232, 160, 50, .68);
    --brand-heat-3: rgba(196, 92, 50, .82);
    --brand-heat-4: rgba(110, 30, 20, .92);

    --glass-fill: rgba(30, 22, 16, .45);
    --glass-fill-strong: rgba(30, 22, 16, .82);
    --glass-fill-solid: #2a1e15;
    --glass-strong-solid: #241912;
    --glass-inset: rgba(255, 255, 255, .07);
    --glass-border: rgba(255, 255, 255, .09);
    --glass-hair: rgba(255, 255, 255, .09);
    --glass-blur: blur(22px) saturate(140%);
    --glass-base: #1c130d;
    --glass-mark: #f5d547;
    --glass-on-mark: #1a1612;
    --glass-link-line: rgba(244, 236, 224, .45);

    --bgColor-default: #241912;
    --bgColor-muted: rgba(255, 255, 255, .06);
    --bgColor-inset: #1a110b;
    --bgColor-success-muted: #f5d547;
    --bgColor-danger-muted: rgba(232, 150, 122, .16);
    --bgColor-attention-muted: rgba(235, 187, 92, .16);
    --borderColor-default: rgba(255, 255, 255, .13);
    --borderColor-muted: rgba(255, 255, 255, .08);
    --fgColor-default: #f4ece0;
    --fgColor-muted: #c4b5a1;
    --fgColor-success: #f5d547;
    --fgColor-danger: #f0a58b;
    --fgColor-attention: #ebbb5c;
    --button-default-bgColor-rest: rgba(255, 255, 255, .08);
    --button-default-bgColor-hover: rgba(255, 255, 255, .15);
    --button-default-bgColor-active: rgba(255, 255, 255, .2);
    --button-default-borderColor-rest: rgba(255, 255, 255, .22);
    --button-default-fgColor-rest: #f4ece0;
  }
}

/* ---------- 2. fallbacks: solid surfaces (same specificity as the token blocks, so it comes after them) ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-app-theme=glass][data-color-mode] {
    --glass-fill: var(--glass-fill-solid);
    --glass-fill-strong: var(--glass-strong-solid);
    --glass-blur: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-app-theme=glass][data-color-mode] {
    --glass-fill: var(--glass-fill-solid);
    --glass-fill-strong: var(--glass-strong-solid);
    --glass-blur: none;
  }
}

/* =============================================================================
   3. Components
   ============================================================================= */

/* ---------- scene + header ---------- */
html[data-app-theme=glass] { background-color: var(--glass-base); }
html[data-app-theme=glass] body.color-bg-default { background: transparent !important; position: relative; font-weight: 400; }
html[data-app-theme=glass] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--app-page-bg);
  background-size: 180px 180px, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
}
html[data-app-theme=glass] .Header { background: transparent; padding: 18px 28px 6px; box-shadow: none; }
html[data-app-theme=glass] .app-header { position: relative; }
html[data-app-theme=glass] .app-brand-name { font-weight: 600; letter-spacing: -.02em; font-size: 17px; }
html[data-app-theme=glass] .Header-link:hover { text-decoration: none; }
html[data-app-theme=glass] .app-main { padding-top: 14px !important; }
html[data-app-theme=glass] h1, html[data-app-theme=glass] .h2 { letter-spacing: -.025em; font-weight: 500; }
html[data-app-theme=glass] .sitenav-head { align-items: baseline !important; }
html[data-app-theme=glass] .sitenav-head h1 { font-size: 32px; font-weight: 500; }
html[data-app-theme=glass] .sitenav-head .color-fg-muted { font-size: 14px !important; }
/* on the overview the hero panel carries the title */
html[data-app-theme=glass] .app-main:has(.hero-intro) .sitenav-head { display: none !important; }
html[data-app-theme=glass] :is(a, button, summary, [tabindex], input, select):focus-visible {
  outline: 2px solid var(--focus-outlineColor); outline-offset: 2px;
}
/* links: ink, with a hairline underline so they stay recognisable without colour */
html[data-app-theme=glass] .app-main a:not(.btn, .UnderlineNav-item, .BtnGroup-item, .Header-link) {
  text-decoration: underline; text-decoration-color: var(--glass-link-line); text-underline-offset: 3px; text-decoration-thickness: 1px;
}
html[data-app-theme=glass] .app-main a:not(.btn, .UnderlineNav-item, .BtnGroup-item, .Header-link):hover {
  text-decoration-color: currentColor; background: var(--glass-mark); color: var(--glass-on-mark); border-radius: 4px;
}
html[data-app-theme=glass] .btn-link { color: var(--fgColor-default); text-decoration: underline; text-decoration-color: var(--glass-link-line); text-underline-offset: 3px; }

/* ---------- glass panels ---------- */
html[data-app-theme=glass] :is(.Box, .kpi, .hero, .UnderlineNav, .BtnGroup, .login-card, .site-card) {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--app-shadow);
}
html[data-app-theme=glass] :is(.Box, .kpi, .hero, .login-card, .site-card) { border-radius: var(--app-radius-lg); }
/* tables, long lists, forms and snippets: strong glass for contrast */
html[data-app-theme=glass] :is(.rp-panel, .Box:not(.site-list):has(table, form, .form-control, code.snippet, .Box-row)) {
  background: var(--glass-fill-strong);
}
/* a Box inside a Box row list does not blur twice */
html[data-app-theme=glass] .Box .Box { -webkit-backdrop-filter: none; backdrop-filter: none; }

html[data-app-theme=glass] .Box-header { background: transparent; border: 0; margin: 0; padding: 20px 24px 6px; border-radius: 0; }
html[data-app-theme=glass] .Box-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
html[data-app-theme=glass] .Box-body { padding: 12px 24px 24px; }
html[data-app-theme=glass] .Box-row { border-top: 1px solid var(--glass-hair); margin-top: 0; padding: 12px 24px; background: transparent; }
html[data-app-theme=glass] .Box-row:first-child { border-top: 0; }
html[data-app-theme=glass] .Box-row:last-child { border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg); }
html[data-app-theme=glass] .Box-footer { background: transparent; border-top: 1px solid var(--glass-hair); margin-top: 0; padding: 12px 24px; border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg); }
html[data-app-theme=glass] .blankslate { padding: 40px 32px; }
html[data-app-theme=glass] code.snippet { background: var(--glass-fill-strong); border: 1px solid var(--glass-hair); border-radius: var(--app-radius); }
html[data-app-theme=glass] .Subhead { border-bottom: 0; padding-bottom: 8px; align-items: center; }
html[data-app-theme=glass] .Subhead-heading { font-size: 32px; font-weight: 500; letter-spacing: -.03em; }
html[data-app-theme=glass] .flash { border-radius: var(--app-radius); border: 1px solid var(--glass-border); color: var(--fgColor-default); background: var(--glass-fill-strong); }
html[data-app-theme=glass] .flash-success { background: var(--glass-mark); color: var(--glass-on-mark); border-color: transparent; }
html[data-app-theme=glass] .flash-error { background: var(--bgColor-danger-muted); border-color: var(--fgColor-danger); }
html[data-app-theme=glass] .flash-warn { background: var(--bgColor-attention-muted); border-color: var(--fgColor-attention); }
html[data-app-theme=glass] .note { border-radius: var(--app-radius); }

/* hover lift (subtle); movement is off under prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  html[data-app-theme=glass] :is(.kpi, .rp-panel, .chart-card, .site-card) { transition: transform 160ms ease, box-shadow 160ms ease; }
  html[data-app-theme=glass] :is(.kpi, .rp-panel, .chart-card, .site-card):hover { transform: translateY(-2px); box-shadow: var(--app-shadow-hover); }
}

/* ---------- buttons, inputs ---------- */
html[data-app-theme=glass] .btn {
  border-radius: 999px; font-weight: 500; box-shadow: none;
  background-color: var(--button-default-bgColor-rest); border: 1px solid var(--button-default-borderColor-rest); color: var(--button-default-fgColor-rest);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: background-color 120ms ease;
}
html[data-app-theme=glass] .btn:hover { background-color: var(--button-default-bgColor-hover); text-decoration: none; }
html[data-app-theme=glass] .btn-sm { padding: 3px 14px; }
/* primary: black pill with white text (light pill with dark text in dark mode) */
html[data-app-theme=glass] .btn-primary, html[data-app-theme=glass] .btn.selected {
  background-color: var(--app-cta); color: var(--app-cta-fg); border-color: transparent;
}
html[data-app-theme=glass] .btn-primary:hover { background-color: var(--app-cta-hover); }
html[data-app-theme=glass] .btn-danger { background-color: transparent; color: var(--fgColor-danger); border-color: var(--fgColor-danger); }
html[data-app-theme=glass] .btn-danger:hover { background-color: var(--bgColor-danger-muted); color: var(--fgColor-danger); }
html[data-app-theme=glass] .form-control, html[data-app-theme=glass] .form-select, html[data-app-theme=glass] select, html[data-app-theme=glass] textarea {
  border-radius: var(--app-radius);
  border: 1px solid var(--app-input-border);
  background-color: var(--glass-fill-strong);
  color: var(--fgColor-default);
  box-shadow: none;
}
html[data-app-theme=glass] .form-control:focus, html[data-app-theme=glass] .form-select:focus {
  border-color: var(--focus-outlineColor); box-shadow: 0 0 0 3px var(--bgColor-accent-muted); outline: none;
}
html[data-app-theme=glass] .rp-custom .form-control { color-scheme: light dark; }

/* ---------- pill toggles ---------- */
html[data-app-theme=glass] .BtnGroup { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; vertical-align: middle; box-shadow: none; }
html[data-app-theme=glass] .BtnGroup-item {
  float: none; border: 0 !important; border-radius: 999px !important; box-shadow: none;
  background: transparent !important; color: var(--fgColor-muted); -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-app-theme=glass] .BtnGroup-item:hover { color: var(--fgColor-default); background: var(--app-rail-hover-bg) !important; }
html[data-app-theme=glass] .BtnGroup-item.selected, html[data-app-theme=glass] .BtnGroup-item[aria-pressed=true], html[data-app-theme=glass] .BtnGroup-item[aria-current=true] {
  background: var(--app-rail-active-bg) !important; color: var(--app-rail-active-fg);
}
/* a group inside a panel does not blur again */
html[data-app-theme=glass] .hero .BtnGroup { background: var(--glass-inset); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-app-theme=glass] .hero .btn { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- badges ---------- */
html[data-app-theme=glass] .Label {
  border: 1px solid var(--glass-hair); border-radius: 999px; padding: 2px 10px; font-weight: 600;
  background: var(--glass-inset); color: var(--fgColor-muted) !important;
}
html[data-app-theme=glass] .Label--accent { background: var(--app-rail-active-bg); border-color: transparent; color: var(--app-rail-active-fg) !important; }
html[data-app-theme=glass] .Label.rp-pill-good { background: var(--glass-mark); border-color: transparent; color: var(--glass-on-mark) !important; }
html[data-app-theme=glass] .Label.rp-pill-warn { background: var(--bgColor-attention-muted); border-color: transparent; color: var(--app-warn) !important; }
html[data-app-theme=glass] .Label.rp-pill-bad { background: var(--bgColor-danger-muted); border-color: transparent; color: var(--app-bad) !important; }
html[data-app-theme=glass] .Counter { border-radius: 999px; }

/* ---------- KPI tiles ---------- */
html[data-app-theme=glass] .kpi-grid { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
html[data-app-theme=glass] .kpi { display: flex; flex-direction: column; gap: 2px; padding: 20px 22px; }
html[data-app-theme=glass] .kpi-label { font-size: 13px; font-weight: 500; color: var(--fgColor-muted); }
html[data-app-theme=glass] .kpi-value { font-size: 36px; font-weight: 500; letter-spacing: -.035em; line-height: 1.15; margin-top: 2px; }
html[data-app-theme=glass] .kpi-delta-up, html[data-app-theme=glass] .kpi-delta-down {
  align-self: flex-start; margin-top: 6px; padding: 2px 10px; border-radius: 12px; font-weight: 600;
}
html[data-app-theme=glass] .kpi-delta-up { background: var(--glass-mark); color: var(--glass-on-mark); }   /* yellow highlighter */
html[data-app-theme=glass] .kpi-delta-down { background: var(--bgColor-danger-muted); color: var(--fgColor-danger); }
html[data-app-theme=glass] .kpi .color-fg-muted.f6 { margin-top: 6px; }

/* ---------- panels: rows with highlighter bars, tables ---------- */
html[data-app-theme=glass] .Box-row.bar-row { padding: 9px 24px !important; }
html[data-app-theme=glass] .bar-row .bar { background: var(--app-accent-muted); border-radius: 8px; }
html[data-app-theme=glass] .bar-row .bar[style*="--pct"] {
  inset: 4px auto 4px 12px; width: calc((100% - 24px) * var(--pct) / 100) !important; min-width: 6px;
}
html[data-app-theme=glass] .rp-table td.rp-cell-path .bar { background: var(--app-accent-muted); border-radius: 8px; }
html[data-app-theme=glass] .rp-label { font-size: 14px; }
html[data-app-theme=glass] .num { font-weight: 500; }
html[data-app-theme=glass] .rp-table { width: 100%; }
html[data-app-theme=glass] .rp-table th, html[data-app-theme=glass] .rp-table td { padding: 11px 24px; border-top-color: var(--glass-hair); }
html[data-app-theme=glass] .rp-table thead th { background: transparent; border-top: 1px solid var(--glass-hair); font-weight: 600; }
html[data-app-theme=glass] .rp-table tbody tr:hover { background: var(--bgColor-muted); }
html[data-app-theme=glass] .rp-selected { background: var(--app-accent-muted); }
html[data-app-theme=glass] .rp-swatch { border-radius: 999px; width: 10px; height: 10px; }
html[data-app-theme=glass] .rp-heat-legend { border-radius: 999px; }
html[data-app-theme=glass] .rp-heat-scroll { border-radius: var(--app-radius); }
html[data-app-theme=glass] .rp-good { font-weight: 600; }

/* ---------- overview hero: a large glass panel ---------- */
html[data-app-theme=glass] .hero { padding: 30px 34px 26px; margin-bottom: 20px; }
html[data-app-theme=glass] .hero-intro { display: block; margin-bottom: 28px; }
html[data-app-theme=glass] .hero-kicker { font-size: 13px; color: var(--app-hero-fg-muted); font-weight: 500; }
html[data-app-theme=glass] .hero-title {
  margin: 8px 0 0; font-family: var(--app-font-display); font-weight: 500; color: var(--app-hero-fg);
  font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -.035em;
}
/* the emphasised words become a yellow highlighter pill */
html[data-app-theme=glass] .hero-em {
  font-style: normal; font-weight: 500; background: var(--glass-mark); color: var(--glass-on-mark);
  padding: 0 .3em .05em; border-radius: .4em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html[data-app-theme=glass] .hero-controls { margin: 0 !important; gap: 12px 16px; }
html[data-app-theme=glass] .hero .rp-toolbar { margin: 0 !important; }
html[data-app-theme=glass] .hero .color-fg-muted { color: var(--app-hero-fg-muted) !important; }

/* live pill */
html[data-app-theme=glass] .rp-realtime {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: var(--app-live-bg); color: var(--app-live-fg); font-size: 13px; border: 1px solid var(--glass-hair);
}
html[data-app-theme=glass] .rp-realtime strong { color: inherit; }
html[data-app-theme=glass] .rp-live-tag {
  display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; background: var(--glass-mark); color: var(--glass-on-mark);
}
html[data-app-theme=glass] .rp-dot { background: var(--fgColor-muted); }
html[data-app-theme=glass] .rp-dot-live { background: var(--app-live-dot); box-shadow: 0 0 0 3px var(--glass-mark); }
html[data-app-theme=glass] .chart-card .chart-box { height: 280px; }

/* ---------- site navigation: pill bar in a glass capsule ---------- */
html[data-app-theme=glass] .UnderlineNav {
  display: flex; width: fit-content; max-width: 100%; min-height: 0; padding: 5px; border-radius: 999px;
  justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-bottom: 4px;
}
html[data-app-theme=glass] .UnderlineNav::-webkit-scrollbar { display: none; }
html[data-app-theme=glass] .UnderlineNav-body { gap: 2px; }
html[data-app-theme=glass] .UnderlineNav-item {
  border-radius: 999px; padding: 0 16px; line-height: 34px; font-weight: 500; color: var(--app-rail-fg);
  transition: background-color 120ms ease, color 120ms ease;
}
html[data-app-theme=glass] .UnderlineNav-item:hover { background: var(--app-rail-hover-bg); color: var(--fgColor-default); text-decoration: none; }
html[data-app-theme=glass] .UnderlineNav-item[aria-current]:not([aria-current=false]) {
  background: var(--app-rail-active-bg); color: var(--app-rail-active-fg); font-weight: 600;
}
html[data-app-theme=glass] .UnderlineNav-item::after { display: none !important; }
html[data-app-theme=glass] .UnderlineNav-item:focus-visible { outline-offset: 1px; }

/* ---------- home: site cards ---------- */
html[data-app-theme=glass] .Box.site-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; background: none; border: 0; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-app-theme=glass] .Box-row.site-card {
  display: flex; align-items: center; gap: 14px; padding: 20px 22px !important; margin: 0;
  background: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: var(--app-radius-lg) !important;
}
html[data-app-theme=glass] .site-avatar {
  display: inline-flex; flex: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--app-rail-active-bg); color: var(--app-rail-active-fg); font-weight: 600; font-size: 18px;
}
html[data-app-theme=glass] .site-card-body { flex: 1; min-width: 0; }
html[data-app-theme=glass] .site-card-body a { font-weight: 600; letter-spacing: -.01em; }
html[data-app-theme=glass] .site-card-body .f6 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- login ---------- */
html[data-app-theme=glass] .login-wrap { max-width: 400px; }
html[data-app-theme=glass] .login-card .Box-body { padding: 44px 32px; }
html[data-app-theme=glass] .login-card h1 { font-size: 34px; font-weight: 500; letter-spacing: -.03em; }
html[data-app-theme=glass] .login-card .btn-primary { padding: 9px 16px; font-size: 15px; }
html[data-app-theme=glass] .login-card .hero-em { font-size: 1em; }

/* ---------- small screens ---------- */
@media (max-width: 543px) {
  html[data-app-theme=glass] .Header { padding: 14px 16px 4px; }
  html[data-app-theme=glass] .hero { padding: 22px 20px; }
  html[data-app-theme=glass] .kpi { padding: 16px; }
  html[data-app-theme=glass] .kpi-value { font-size: 30px; }
  html[data-app-theme=glass] .Box-header { padding: 18px 18px 4px; }
  html[data-app-theme=glass] .Box-body, html[data-app-theme=glass] .Box-row, html[data-app-theme=glass] .Box-footer,
  html[data-app-theme=glass] .rp-table th, html[data-app-theme=glass] .rp-table td { padding-left: 18px; padding-right: 18px; }
  html[data-app-theme=glass] .Box-row.bar-row { padding: 9px 18px !important; }
  html[data-app-theme=glass] .bar-row .bar[style*="--pct"] { left: 8px; width: calc((100% - 16px) * var(--pct) / 100) !important; }
  html[data-app-theme=glass] .sitenav-head h1 { font-size: 26px; }
}