/* MIRA Glass theme — shared visual layer for all 9 MIRA platforms (owner-approved reference: demos/brand/theme-glass.html).
   Load AFTER the platform's own CSS and shared/mobile.css, and add class="g-glass" to <body>.
   Works on both shells: shell A (core.css / ui.js / shell.js: .rail .shell .top #view) and shell B (shared/hud.css:
   .scenes .top main .scene). Tokens first, then chrome per shell, then shared components, 3D twin overlays, motion.
   Rules: logo purple (#850083) is an accent only — logo, primary CTA, ONE hero KPI per page, highlight series, rings.
   Feature cards are graphite. Status colours are for status only. Motion is transform/opacity and honours
   prefers-reduced-motion. See README.md in this folder. */

/* ============================== 1. tokens ============================== */
html:has(body.g-glass) { background: #eef0f3; }
/* tokens live on :root too, so platform code that reads them with getComputedStyle(documentElement) gets the theme */
:root:has(body.g-glass), body.g-glass {
  /* glass system */
  --g-canvas: #eef0f3;
  --g-glass: rgba(255, 255, 255, 0.58);
  --g-glass-2: rgba(255, 255, 255, 0.38);
  --g-glass-strong: rgba(255, 255, 255, 0.8);
  --g-edge: rgba(255, 255, 255, 0.75);
  --g-blur: blur(22px) saturate(1.5);
  --g-blur-s: blur(14px) saturate(1.4);
  /* cards sit on the soft blob canvas only, where a backdrop blur is invisible but costs a re-blur every frame while the
     blobs drift; so cards use the frosted fill + highlight without a filter. Set to var(--g-blur) to re-enable. */
  --g-card-blur: none;
  --g-hl: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  --g-shadow: var(--g-hl), 0 10px 30px rgba(20, 28, 40, 0.07);
  --g-shadow-up: 0 1px 0 #fff inset, 0 18px 40px rgba(40, 30, 70, 0.14);
  --g-r: 26px; --g-r-s: 16px; --g-pill: 999px;
  --g-ink: #1b1220; --g-ink-2: #554c60; --g-ink-3: #655d70;
  --g-accent: #850083; --g-accent-2: #94208f; --g-accent-3: #a5479f;
  --g-hero: linear-gradient(150deg, #850083 0%, #94208f 55%, #a5479f 100%);
  --g-graphite: linear-gradient(150deg, #1c1d22 0%, #2b2d34 65%, #3a3d45 100%);
  --g-graphite-solid: #2b2d34; --g-dark: #17151b;
  --g-ok-ink: #047857; --g-ok-t: rgba(16, 185, 129, 0.12);
  --g-warn-ink: #b45309; --g-warn-t: rgba(245, 158, 11, 0.14);
  --g-bad-ink: #b42318; --g-bad-t: rgba(239, 68, 68, 0.12);
  --g-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gi: 12px; /* frame inset (collapses to 0 on phones) */

  /* platform tokens re-pointed at the glass system (both shells) */
  --bg: var(--g-canvas);
  --surface: #ffffff; --surface-2: rgba(255, 255, 255, 0.55); --sunken: rgba(27, 18, 32, 0.05);
  --line: rgba(27, 18, 32, 0.08); --line-2: rgba(27, 18, 32, 0.06); --line-strong: rgba(27, 18, 32, 0.14);
  --text: var(--g-ink); --text-2: var(--g-ink-2); --text-3: var(--g-ink-3);
  --primary: var(--g-accent); --primary-h: var(--g-accent-2); --brand: var(--g-accent); --brand-h: var(--g-accent-2);
  --tint: rgba(133, 0, 131, 0.07); --tint-2: rgba(133, 0, 131, 0.16); --tint-line: rgba(133, 0, 131, 0.18);
  --ring: rgba(133, 0, 131, 0.2); --focus: rgba(133, 0, 131, 0.2);
  --neon: var(--g-accent); --neon-2: var(--g-accent-2); --grad: var(--g-accent); --violet: #a5479f;
  --green-t: rgba(18, 183, 106, 0.1); --amber-t: rgba(247, 144, 9, 0.1); --red-t: rgba(217, 45, 32, 0.08); --blue-t: rgba(46, 144, 250, 0.09); --grey-t: rgba(27, 18, 32, 0.05);
  --shadow: var(--g-shadow);
  --shadow-lg: 0 24px 60px -12px rgba(20, 28, 40, 0.22), 0 4px 12px rgba(20, 28, 40, 0.06);
  --r: 22px; --rs: 12px; --r-sm: 12px;
  /* MIRA Estate / Works token hooks */
  --hud-bg: var(--g-glass-strong); --hud-bg-2: rgba(255, 255, 255, 0.88);
  --overlay: rgba(23, 21, 27, 0.78); --overlay-2: rgba(23, 21, 27, 0.88);
  --twin-a: #e2e8ef; --twin-b: #f3f5f8;
  --c-plant: #2b2d34; --c-hvac: #6b7280; --c-plug: #850083;
  --c-s1: #850083; --c-s2: #3a3d45; --c-s5: #a5479f; --c-s6: #9aa1ad; --c-seq-4: #850083;
  --wk-brand: #850083; --wk-brand-2: #94208f; --wk-tint: rgba(133, 0, 131, 0.07); --wk-tint-line: rgba(133, 0, 131, 0.18);
  --wk-twin-bg1: #e2e8ef; --wk-twin-bg2: #f3f5f8; --wk-map: rgba(255, 255, 255, 0.5);

}
body.g-glass { background: transparent; color: var(--g-ink); }

@media (min-width: 961px) { body.g-glass { --rail: 252px; } }

/* ============================== 2. canvas ============================== */
.g-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, #f7f8fa 0, #eceff3 55%, #e4e9ef 100%); }
/* blobs are radial gradients (no CSS filter) so they cost nothing to repaint; only transform animates */
.g-bg i { position: absolute; border-radius: 50%; opacity: 0.55; will-change: transform; animation: g-float 18s ease-in-out infinite; }
.g-bg i:nth-child(1) { width: 760px; height: 760px; left: -220px; top: -240px; background: radial-gradient(circle, #c9d3e0 0, rgba(201, 211, 224, 0.6) 30%, rgba(201, 211, 224, 0) 68%); }
.g-bg i:nth-child(2) { width: 720px; height: 720px; right: -220px; top: 40px; background: radial-gradient(circle, #b9d3ea 0, rgba(185, 211, 234, 0.6) 30%, rgba(185, 211, 234, 0) 68%); animation-delay: -6s; }
.g-bg i:nth-child(3) { width: 660px; height: 660px; left: 36%; bottom: -300px; background: radial-gradient(circle, #ddd6e3 0, rgba(221, 214, 227, 0.6) 30%, rgba(221, 214, 227, 0) 68%); animation-delay: -11s; }
@keyframes g-float { 50% { transform: translate3d(40px, 30px, 0) scale(1.08); } }
.g-glass .bg, .g-glass .scan, .g-glass .amb { display: none !important; }
.g-glass ::selection { background: rgba(133, 0, 131, 0.16); }
.g-glass ::-webkit-scrollbar-thumb { background: rgba(27, 18, 32, 0.16); border-radius: 8px; }

/* ============================== 3. shell A chrome ============================== */
.g-glass .rail { left: var(--gi); top: var(--gi); bottom: var(--gi); padding: 18px 12px 12px; border-radius: var(--g-r); background: var(--g-glass); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow); }
.g-glass .brand-mark img, .g-glass .brand-mark svg { border-radius: 10px; box-shadow: 0 8px 18px rgba(133, 0, 131, 0.22); }
.g-glass .brand-txt b { font-weight: 800; font-size: 16px; color: var(--g-ink); }
.g-glass .brand-txt b em { color: var(--g-accent); font-weight: 800; }
.g-glass .plant-pick { border-radius: var(--g-r-s); border: 1px solid var(--g-edge); background: rgba(255, 255, 255, 0.62); box-shadow: 0 4px 14px rgba(20, 28, 40, 0.05); }
.g-glass .site-ico { background: rgba(27, 18, 32, 0.06); color: var(--g-ink); border-radius: 10px; }
/* nav: visible thin scrollbar + edge fades, so every item stays reachable above the Ask MIRA AI card (bug fix) */
.g-glass .nav { scrollbar-width: thin; scrollbar-color: rgba(27, 18, 32, 0.18) transparent; margin: 0 -6px 0 -4px; padding: 0 4px 0 10px; }
.g-glass .nav::-webkit-scrollbar { display: block; width: 5px; }
.g-glass .nav::-webkit-scrollbar-thumb { background: rgba(27, 18, 32, 0.18); border-radius: 5px; }
.g-glass .nav.g-more-b { -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent); mask-image: linear-gradient(#000 calc(100% - 34px), transparent); }
.g-glass .nav.g-more-t { -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); }
.g-glass .nav.g-more-t.g-more-b { -webkit-mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 34px), transparent); }
.g-glass .nav-g { font: 700 10.5px/1 var(--f-body); letter-spacing: 0.08em; color: var(--g-ink-2); padding: 14px 10px 6px; }
.g-glass .nav a { border-radius: 14px; padding: 8px 10px; font-weight: 600; font-size: 13.5px; color: #3c3344; transition: background 0.25s, box-shadow 0.25s, color 0.2s; }
.g-glass .nav a > span:not(.tag):not(.cnt) { min-width: 0; flex: 1; line-height: 1.25; }
.g-glass .nav a > .tag, .g-glass .nav a > .cnt { flex: none; }
.g-glass .nav a .ic { color: #3c3344; opacity: 0.72; }
.g-glass .nav a:hover { background: rgba(255, 255, 255, 0.55); color: var(--g-dark); }
.g-glass .nav a.on { background: #fff; color: var(--g-dark); box-shadow: 0 6px 16px rgba(20, 28, 40, 0.08); font-weight: 700; }
.g-glass .nav a.on .ic { color: var(--g-dark); opacity: 1; }
.g-glass .nav a.on::before { content: ""; position: absolute; left: -9px; top: 9px; bottom: 9px; width: 4px; border-radius: 4px; background: var(--g-dark); }
.g-glass .nav a .tag { background: var(--g-dark); color: #fff; border-radius: var(--g-pill); padding: 3px 7px; font-weight: 700; }
.g-glass .nav a .cnt { background: var(--g-dark); color: #fff; border-radius: var(--g-pill); padding: 1px 7px; font: 700 11px/1.5 var(--f-body); }
.g-glass .nav a .cnt.hot { background: #d92d20; color: #fff; }
@media (max-height: 1000px) and (min-width: 961px) { .g-glass .nav a { padding-top: 6px; padding-bottom: 6px; } .g-glass .nav-g { padding-top: 11px; } .g-glass .plant-pick { padding: 7px 10px; margin-bottom: 6px; } .g-glass .brand { padding-bottom: 12px; } }
/* Ask MIRA AI card: graphite feature card */
.g-glass .mira-card { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.18); background: var(--g-graphite); color: #fff; box-shadow: 0 12px 28px rgba(20, 22, 30, 0.22); transition: transform 0.3s var(--g-ease), box-shadow 0.3s; }
.g-glass .mira-card::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -60px; top: -70px; background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 70%); pointer-events: none; }
.g-glass .mira-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(20, 22, 30, 0.28); border-color: rgba(255, 255, 255, 0.25); }
.g-glass .mira-card .mc-t b { color: #fff; font-weight: 700; }
.g-glass .mira-card .mc-t small { color: rgba(255, 255, 255, 0.72); }
.g-glass .mira-card kbd { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.8); }
.g-glass .mira-card .owl.away::after { border-color: rgba(255, 255, 255, 0.35); }
.g-glass .rail-foot { color: var(--g-ink-2); }

.g-glass .shell { margin-left: calc(var(--rail) + var(--gi) * 2); padding-right: var(--gi); }
.g-glass .top { top: var(--gi); margin-top: var(--gi); padding: 0 16px 0 20px; border-radius: 22px; background: var(--g-glass); border: 1px solid var(--g-edge); border-bottom: 1px solid var(--g-edge); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--g-shadow); }
.g-glass .crumbs small { color: var(--g-ink-2); }
.g-glass .crumbs h1 { font-weight: 800; letter-spacing: -0.015em; }
.g-glass .top .search, .g-glass .top .site-chip, .g-glass .top .lang-btn { border-radius: var(--g-pill); border: 1px solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.72); color: var(--g-ink-2); }
.g-glass .top .search kbd { border: 0; background: #fff; border-radius: 7px; }
.g-glass .top .site-chip b { color: var(--g-ink); font-weight: 700; }
.g-glass .clock { color: var(--g-ink-2); } .g-glass .clock b { color: var(--g-ink); font-weight: 700; }
.g-glass .badge-demo { border-radius: var(--g-pill); background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.9); color: var(--g-ink-2); font-weight: 600; }
.g-glass .icon-btn { border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.75); color: var(--g-ink); }
.g-glass .icon-btn:hover { background: #fff; }
.g-glass .bell .n { border-color: #fff; background: #d92d20; }
.g-glass .me, .g-glass .avatar { background: linear-gradient(140deg, #e9ecf1, #cfd5de); border: 1px solid #fff; color: var(--g-accent); font-weight: 800; }
.g-glass .sector-bar { background: transparent; border-bottom: 0; padding: 12px 6px 4px; }
.g-glass .ticker { color: var(--g-ink-2); } .g-glass .ticker b { color: var(--g-ink); font-weight: 700; }
.g-glass .sector-bar .tag { background: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.9); }
.g-glass .sec { border-radius: var(--g-pill); }
.g-glass .sec.on { background: #fff; color: var(--g-dark); box-shadow: 0 4px 12px rgba(20, 28, 40, 0.07); }
.g-glass .view { padding: 14px 6px 64px; }
.g-glass .view.enter > * { animation: none; }
.g-glass .ph-row h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.g-glass .ph-row .eyebrow { color: var(--g-ink-2); }
.g-glass .ph-row p { color: var(--g-ink-2); }

/* ============================== 4. shell B chrome ============================== */
.g-glass .scenes { left: var(--gi); top: var(--gi); bottom: var(--gi); border-radius: var(--g-r); padding: 0 12px 14px; background: var(--g-glass); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow); }
.g-glass .side-head { border-bottom: 1px solid var(--line); }
.g-glass .side-head img { box-shadow: 0 8px 18px rgba(133, 0, 131, 0.22); border-radius: 10px; }
.g-glass .side-head b { font-weight: 800; font-size: 15px; }
.g-glass .side-label { font-weight: 700; letter-spacing: 0.08em; color: var(--g-ink-2); }
.g-glass .scenes a { position: relative; border-radius: 14px; font-weight: 600; color: #3c3344; }
.g-glass .scenes a i { color: #3c3344; opacity: 0.72; }
.g-glass .scenes a:hover { background: rgba(255, 255, 255, 0.55); color: var(--g-dark); }
.g-glass .scenes a.on { background: #fff; color: var(--g-dark); box-shadow: 0 6px 16px rgba(20, 28, 40, 0.08); font-weight: 700; }
.g-glass .scenes a.on i { color: var(--g-dark); opacity: 1; }
.g-glass .scenes a.on::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 4px; background: var(--g-dark); }
.g-glass .side-foot { border-top: 1px solid var(--line); color: var(--g-ink-2); }
.g-glass .top:not(.shell .top) { margin-left: calc(var(--side-w) + var(--gi) * 2); margin-right: var(--gi); }
.g-glass .prod, .g-glass .top .chip, .g-glass .top-right .search { border-radius: var(--g-pill); border: 1px solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.72); }
.g-glass .prod img { border-radius: 6px; }
.g-glass main { margin-left: calc(var(--side-w) + var(--gi) * 2); padding-left: 8px; padding-right: calc(var(--gi) + 8px); }
.g-glass footer.foot { margin-left: calc(var(--side-w) + var(--gi) * 2); border-top: 1px solid var(--line); color: var(--g-ink-2); }
.g-glass .page-h h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.g-glass .page-h p { color: var(--g-ink-2); }
.g-glass .scene-h h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; }

/* ============================== 5. components ============================== */
/* glass card */
.g-glass .panel { border-radius: var(--g-r); background: var(--g-glass); border: 1px solid var(--g-edge); -webkit-backdrop-filter: var(--g-card-blur); backdrop-filter: var(--g-card-blur); box-shadow: var(--g-shadow); transition: box-shadow 0.3s var(--g-ease), transform 0.3s var(--g-ease); }
.g-glass .panel .panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.55); box-shadow: 0 4px 14px rgba(20, 28, 40, 0.05); }
.g-glass .panel:hover { box-shadow: 0 1px 0 #fff inset, 0 14px 36px rgba(20, 28, 40, 0.1); }
.g-glass .ph h3 { font-weight: 800; font-size: 15.5px; letter-spacing: -0.01em; color: var(--g-ink); }
.g-glass .ph h3 .ic { color: var(--g-ink-2); }
.g-glass .ph .tag { color: var(--g-ink-2); }
/* lift on hover for tile-like cards (not big panels: they hold twins and charts) */
.g-glass .kpi, .g-glass .mcard, .g-glass .ins, .g-glass .rep-tab, .g-glass .sug, .g-glass .ucard { transition: transform 0.3s var(--g-ease), box-shadow 0.3s var(--g-ease), background 0.25s; }
@media (hover: hover) {
  .g-glass .kpi:hover, .g-glass .mcard:hover, .g-glass .ins:hover, .g-glass .rep-tab:hover, .g-glass .ucard:hover { transform: translateY(-4px); box-shadow: var(--g-shadow-up); }
  .g-glass .sug:hover { transform: translateY(-2px); }
}

/* KPI tiles: big numbers, ↗ chip, delta chips */
.g-glass .kpis > .kpi { container-type: inline-size; }
.g-glass .kpis > .kpi, .g-glass .kpis.lite > .kpi, .g-glass .kpi { background: var(--g-glass); border: 1px solid var(--g-edge); color: var(--g-ink); border-radius: var(--g-r); padding: 18px 18px 16px; }
.g-glass .kpi .lbl { color: var(--g-ink); font-weight: 700; font-size: 13.5px; }
.g-glass .kpi .val { margin: 12px 0 8px; }
.g-glass .kpi .val b, .g-glass .kpis .kpi .val b, .g-glass .kpis.lite .kpi .val b { font-weight: 800; letter-spacing: -0.03em; color: var(--g-ink); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.g-glass .kpis > .kpi .val b, .g-glass .kpis.k8 > .kpi .val b, .g-glass .kpis.kp8 > .kpi .val b, .g-glass .kpis7 > .kpi .val b { font-size: clamp(22px, 12cqi + 8px, 44px); }
.g-glass .kpi .val u, .g-glass .kpi .val .of, .g-glass .kpis.lite .kpi .val u { color: var(--g-ink-2); font-weight: 700; font-size: 14px; }
.g-glass .kpi .sub, .g-glass .kpis.lite .kpi .sub { color: var(--g-ink-2); font-size: 12.5px; }
.g-glass .kpi .sub b, .g-glass .kpi .sub .t2, .g-glass .kpi .sub span[class^="c"], .g-glass .kpis.lite .kpi .sub b { color: var(--g-ink); }
.g-glass .kpi .up, .g-glass .kpi .sub .up, .g-glass .kpis.lite .kpi .sub .up { color: var(--g-ok-ink); background: var(--g-ok-t); border-radius: 7px; padding: 1px 6px; font-weight: 700; }
.g-glass .kpi .dn, .g-glass .kpi .sub .dn, .g-glass .kpis.lite .kpi .sub .dn { color: var(--g-warn-ink); background: var(--g-warn-t); border-radius: 7px; padding: 1px 6px; font-weight: 700; }
.g-glass .kpi .bar, .g-glass .kpi .pbar { background: rgba(27, 18, 32, 0.07); }
.g-glass .kpi .bar i { background: var(--g-accent); }
.g-glass .kpi svg.spark path[stroke] { stroke: var(--g-ink); stroke-opacity: 0.55; }
.g-glass .kpi svg.spark stop { stop-color: var(--g-ink); }
.g-glass .kpi svg.spark { top: auto; bottom: 12px; height: 28px; opacity: 0.8; }
.g-glass .kpi.warn { border-color: rgba(247, 144, 9, 0.35); } .g-glass .kpi.bad { border-color: rgba(217, 45, 32, 0.3); }
.g-glass .kpi.warn .val b { color: var(--g-warn-ink); } .g-glass .kpi.bad .val b { color: var(--g-bad-ink); }
@container (max-width: 199px) {
  .g-glass .kpis > .kpi .lbl { font-size: 12.5px; font-weight: 650; }
}
@container (min-width: 200px) {
  .g-glass .kpis > .kpi .lbl { padding-right: 40px; }
  .g-glass .kpis > .kpi .lbl::after { content: "↗"; position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(27, 18, 32, 0.22); display: grid; place-items: center; font: 700 14px/1 var(--f-body); color: var(--g-ink); transition: transform 0.3s var(--g-ease), background 0.3s; pointer-events: none; }
  .g-glass .kpis > .kpi:hover .lbl::after { transform: rotate(45deg); background: #fff; }
  .g-glass .kpis > .kpi svg.spark { width: 34%; }
}
/* the ONE hero tile per page (motion.js marks it .g-hero) */
.g-glass .kpi.hero:not(.g-hero) { background: var(--g-glass); border-color: var(--g-edge); color: var(--g-ink); }
.g-glass .kpi.hero:not(.g-hero) .lbl, .g-glass .kpi.hero:not(.g-hero) .sub { color: var(--g-ink-2); }
.g-glass .kpis > .kpi.g-hero, .g-glass .kpi.g-hero { position: relative; overflow: hidden; background: var(--g-hero); border-color: rgba(255, 255, 255, 0.3); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 16px 34px rgba(133, 0, 131, 0.24); }
.g-glass .kpi.g-hero .lbl, .g-glass .kpi.g-hero .val b, .g-glass .kpis .kpi.g-hero .val b { color: #fff; }
.g-glass .kpi.g-hero .val u, .g-glass .kpi.g-hero .val .of, .g-glass .kpi.g-hero .sub, .g-glass .kpi.g-hero .sub b, .g-glass .kpi.g-hero .sub .t2, .g-glass .kpi.g-hero .sub span[class^="c"] { color: rgba(255, 255, 255, 0.85); }
.g-glass .kpi.g-hero .up, .g-glass .kpi.g-hero .dn, .g-glass .kpi.g-hero .sub .up, .g-glass .kpi.g-hero .sub .dn { color: #fff; background: rgba(255, 255, 255, 0.2); }
.g-glass .kpi.g-hero .bar, .g-glass .kpi.g-hero .pbar { background: rgba(255, 255, 255, 0.22); }
.g-glass .kpi.g-hero .bar i, .g-glass .kpi.g-hero .pbar i { background: #fff !important; }
.g-glass .kpi.g-hero svg.spark path[stroke] { stroke: #fff; stroke-opacity: 0.85; }
.g-glass .kpi.g-hero svg.spark stop { stop-color: #fff; }
.g-glass .kpi.g-hero .spark path:last-of-type { stroke: #fff !important; } .g-glass .kpi.g-hero .spark path:first-of-type { fill: rgba(255, 255, 255, 0.12) !important; }
.g-glass .kpi.g-hero .lbl::after { border-color: rgba(255, 255, 255, 0.5) !important; color: #fff !important; }
.g-glass .kpi.g-hero:hover .lbl::after { background: rgba(255, 255, 255, 0.2) !important; }
.g-glass .kpi.g-hero:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 22px 44px rgba(133, 0, 131, 0.3); }
.g-glass .kpi.g-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.14) 50%, transparent 65%); transform: translateX(-100%); animation: g-shine 4.5s 1.2s infinite; pointer-events: none; }
@keyframes g-shine { 60%, 100% { transform: translateX(100%); } }

/* graphite feature surfaces (replace old solid-plum headers) */
.g-glass .gc-h, .g-glass .daily .hd, .g-glass .pn-big div { background: var(--g-graphite); color: #fff; }

/* buttons: primary purple pill, secondary white glass pill */
.g-glass .btn { border-radius: var(--g-pill); border: 1px solid rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.75); color: var(--g-ink); font-weight: 700; box-shadow: 0 2px 8px rgba(20, 28, 40, 0.05); transition: transform 0.2s var(--g-ease), box-shadow 0.2s, background 0.2s; }
.g-glass .btn .ic { color: var(--g-ink-2); }
.g-glass .btn:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(20, 28, 40, 0.09); }
.g-glass .btn.pri { background: var(--g-accent); border-color: var(--g-accent); color: #fff; box-shadow: 0 10px 22px rgba(133, 0, 131, 0.26); }
.g-glass .btn.pri .ic { color: #fff; }
.g-glass .btn.pri:hover { background: var(--g-accent-2); border-color: var(--g-accent-2); box-shadow: 0 14px 28px rgba(133, 0, 131, 0.3); }
.g-glass .btn.danger { background: #d92d20; border-color: #d92d20; color: #fff; }
.g-glass .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.g-glass .btn:active { transform: translateY(0) scale(0.98); }
.g-glass .tw-card .acts button, .g-glass .tw-b, .g-glass .ins .act button, .g-glass .ins .acts button, .g-glass .mini-btn, .g-glass .ucard .acts button { border-radius: var(--g-pill); border-color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.82); color: var(--g-ink); font-weight: 700; }
.g-glass .tw-card .acts button.pri, .g-glass .tw-b.pri, .g-glass .ins .act button.pri, .g-glass .ins .acts button.pri, .g-glass .mini-btn.pri, .g-glass .ucard .acts button.pri, .g-glass .tw-narr .nav button.pri { background: var(--g-accent); border-color: var(--g-accent); color: #fff; box-shadow: 0 8px 18px rgba(133, 0, 131, 0.22); }
.g-glass .seg { border-radius: var(--g-pill); border: 1px solid rgba(255, 255, 255, 0.85); background: rgba(27, 18, 32, 0.05); padding: 3px; }
.g-glass .seg button, .g-glass .seg a { border-radius: var(--g-pill); font-weight: 600; color: var(--g-ink-2); }
.g-glass .seg button.on, .g-glass .seg a.on { background: #fff; color: var(--g-dark); box-shadow: 0 3px 10px rgba(20, 28, 40, 0.08); font-weight: 700; }
.g-glass .chip { border-radius: var(--g-pill); border: 1px solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.65); color: var(--g-ink-2); font-weight: 600; }
.g-glass .chip:hover { background: #fff; }
.g-glass .chip.on { background: var(--g-dark); border-color: var(--g-dark); color: #fff; }
.g-glass .chip.on .n { color: rgba(255, 255, 255, 0.7); }
.g-glass .tag { border-radius: var(--g-pill); border-color: rgba(27, 18, 32, 0.08); background: rgba(255, 255, 255, 0.6); color: var(--g-ink-2); font-weight: 600; }
.g-glass .tag.ai { color: var(--g-accent); border-color: rgba(133, 0, 131, 0.16); background: rgba(133, 0, 131, 0.06); }
.g-glass .tag.live { color: var(--g-ok-ink); border-color: rgba(16, 185, 129, 0.25); background: var(--g-ok-t); }
.g-glass .tag.warn { color: var(--g-warn-ink); border-color: rgba(245, 158, 11, 0.3); background: var(--g-warn-t); }
.g-glass .tag.bad { color: var(--g-bad-ink); border-color: rgba(239, 68, 68, 0.25); background: var(--g-bad-t); }
.g-glass .pill { border-radius: var(--g-pill); background: rgba(255, 255, 255, 0.6); border-color: rgba(27, 18, 32, 0.08); font-weight: 600; }
.g-glass .pill.p { color: var(--g-accent); background: rgba(133, 0, 131, 0.06); border-color: rgba(133, 0, 131, 0.16); }
.g-glass .st { font-weight: 600; }
.g-glass .toggle.on, .g-glass .sw[aria-checked="true"] { background: var(--g-dark); }
.g-glass .inp, .g-glass select.inp { border-radius: 14px; border: 1px solid rgba(27, 18, 32, 0.1); background: rgba(255, 255, 255, 0.82); box-shadow: none; }
.g-glass .inp:focus { border-color: var(--g-accent); box-shadow: 0 0 0 4px var(--ring); }
.g-glass .rep-tab { border-radius: 20px; border: 1px solid var(--g-edge); background: var(--g-glass); box-shadow: var(--g-shadow); }
.g-glass .rep-tab.on { background: #fff; border-color: var(--g-dark); box-shadow: 0 0 0 1px var(--g-dark), 0 10px 24px rgba(20, 28, 40, 0.1); }
.g-glass .rep-tab.on .ic { color: var(--g-dark); }
.g-glass .mswitch a { border-radius: var(--g-pill); background: rgba(255, 255, 255, 0.7); }
.g-glass .mswitch a.on { background: var(--g-dark); border-color: var(--g-dark); color: #fff; }
.g-glass .lnk, .g-glass .tbl a.tl { color: var(--g-accent); }

/* nested surfaces inside cards */
.g-glass .kvs div, .g-glass .kv4 > div, .g-glass .mcard .kv div, .g-glass .params div, .g-glass .tw-card .kv div { background: rgba(255, 255, 255, 0.6); }
.g-glass .kv4, .g-glass .mcard .kv, .g-glass .params { background: rgba(27, 18, 32, 0.06); border-color: rgba(255, 255, 255, 0.8); border-radius: 16px; }
.g-glass .kvs div { border-radius: 14px; border-color: rgba(255, 255, 255, 0.85); }
.g-glass .mcard .big b, .g-glass .big-num { font-weight: 800; letter-spacing: -0.03em; }
.g-glass .mcard .glowbar { height: 3px; border-radius: 0 0 3px 3px; left: 22px; right: 22px; }
.g-glass .mbadge { border-radius: 12px; background: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.9); }
.g-glass .sug { border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.6); }
.g-glass .sug .ai { background: rgba(133, 0, 131, 0.08); border-radius: 12px; }
.g-glass .banner { border-radius: 20px; background: rgba(255, 251, 240, 0.72); border-color: rgba(245, 158, 11, 0.28); }
.g-glass .banner.red, .g-glass .banner.out { background: rgba(254, 243, 242, 0.72); border-color: rgba(239, 68, 68, 0.25); }
.g-glass .banner.cyan { background: rgba(239, 248, 255, 0.72); border-color: rgba(46, 144, 250, 0.22); }
.g-glass .banner.purple { background: rgba(255, 255, 255, 0.62); border-color: rgba(133, 0, 131, 0.16); }
.g-glass .banner.ok { background: rgba(236, 253, 243, 0.72); border-color: rgba(16, 185, 129, 0.25); }
.g-glass .banner .bi { border-radius: 12px; }
.g-glass .pbar, .g-glass .minibar, .g-glass .lbar { background: rgba(27, 18, 32, 0.07); }
.g-glass .hr { background: var(--line); }

/* tables */
.g-glass .tbl th { background: rgba(255, 255, 255, 0.42); color: var(--g-ink-2); font-weight: 700; border-color: rgba(27, 18, 32, 0.07); }
.g-glass .tbl td { border-bottom-color: rgba(27, 18, 32, 0.06); }
.g-glass .tbl tbody tr { transition: background 0.2s; }
.g-glass .tbl tbody tr:hover { background: rgba(255, 255, 255, 0.62); }
.g-glass .tbl tr.sel, .g-glass .tbl tr.hi td { background: rgba(133, 0, 131, 0.05); }
.g-glass .tbl tr.sel { box-shadow: inset 3px 0 0 var(--g-dark); }
.g-glass .tbl tr.tot td { background: rgba(255, 255, 255, 0.5); }

/* ₹ impact cells: keep the note readable instead of one word per line */
.g-glass .tbl td.num > small.blk, .g-glass .tbl td.r > small.blk { min-width: 140px; }
@media (max-width: 1600px) and (min-width: 1361px) { .g-glass .top .search { max-width: 210px; min-width: 0; } }

/* alarms: slide in, critical icons pulse */
.g-glass .al { border-bottom-color: rgba(27, 18, 32, 0.06); }
.g-glass .al .sv { border-radius: 12px; position: relative; }
.g-glass .al.high .sv { background: var(--g-bad-t); color: #d92d20; }
.g-glass .al.med .sv { background: var(--g-warn-t); color: var(--g-warn-ink); }
.g-glass .al.high .sv::after, .g-glass .ev .dot.red::after, .g-glass .dot.live::after, .g-glass .tw-live .dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; will-change: transform, opacity; }
.g-glass .al.high .sv::after { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35); animation: g-ring 1.8s ease-out infinite; }
.g-glass .ev .dot.red, .g-glass .dot.live { position: relative; }
.g-glass .ev .dot.red::after { background: rgba(239, 68, 68, 0.45); animation: g-ring 1.6s ease-out infinite; }
.g-glass .dot.live::after { background: rgba(16, 185, 129, 0.5); animation: g-ring 1.8s ease-out infinite; }
@keyframes g-ring { 0% { transform: scale(1); opacity: 0.9; } 80%, 100% { transform: scale(2.4); opacity: 0; } }
.g-glass .al .sv::after { border-radius: 12px; }
.g-glass .dot { border-radius: 50%; }

/* chat (drawer in shell A, inline in both) */
.g-glass aside.mira#mira { border-radius: var(--g-r); background: rgba(255, 255, 255, 0.72); border: 1px solid var(--g-edge); -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); box-shadow: 0 30px 80px rgba(20, 28, 40, 0.2); }
.g-glass .mira-h { border-bottom-color: var(--line); }
.g-glass .mira-badge { background: var(--g-graphite); border-radius: 12px; }
.g-glass .chat-log { background: transparent; }
.g-glass .chat-panel .chat-log { background: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.85); border-radius: 18px; }
.g-glass .msg { border-radius: 18px; }
.g-glass .msg.u { background: var(--g-graphite-solid); color: #fff; border-bottom-right-radius: 6px; }
.g-glass .msg.m { background: #fff; border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 4px 14px rgba(20, 28, 40, 0.06); border-bottom-left-radius: 6px; color: #3c3344; }
.g-glass .msg.m b { color: var(--g-dark); }
.g-glass .msg.m::before { color: var(--g-accent); }
.g-glass .sugg { border-top-color: var(--line); }
.g-glass .sugg button { border-radius: var(--g-pill); border: 1px solid rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.75); color: var(--g-ink-2); font-weight: 600; }
.g-glass .sugg button:hover { background: #fff; color: var(--g-dark); border-color: #fff; }
.g-glass .ask-box, .g-glass form.ask:not(:has(.ask-box)) { border-radius: 20px; border: 1px solid rgba(27, 18, 32, 0.1); background: rgba(255, 255, 255, 0.85); }
.g-glass .ask-box:focus-within, .g-glass form.ask:not(:has(.ask-box)):focus-within { border-color: var(--g-accent); box-shadow: 0 0 0 4px var(--ring); }
.g-glass .ask-box .btn { border-radius: var(--g-pill); }
.g-glass .ask button[type="submit"] { border-radius: var(--g-pill); background: var(--g-accent); box-shadow: 0 6px 14px rgba(133, 0, 131, 0.22); }
.g-glass .typing i { background: var(--g-ink-3); }

/* modals, toasts, menus, tooltips */
.g-glass .modal-bg { background: rgba(23, 21, 27, 0.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.g-glass .modal, .g-glass .modal.panel { border-radius: var(--g-r); background: rgba(255, 255, 255, 0.86); border: 1px solid #fff; -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); box-shadow: 0 30px 80px rgba(20, 28, 40, 0.25); }
.g-glass .toast { border-radius: 18px; background: rgba(255, 255, 255, 0.88); border: 1px solid #fff; -webkit-backdrop-filter: var(--g-blur-s); backdrop-filter: var(--g-blur-s); box-shadow: 0 16px 40px rgba(20, 28, 40, 0.16); }
.g-glass .lang-menu { border-radius: 18px; background: rgba(255, 255, 255, 0.9); border: 1px solid #fff; -webkit-backdrop-filter: var(--g-blur-s); backdrop-filter: var(--g-blur-s); }
.g-glass .lang-menu button { border-radius: 10px; }
.g-glass .lang-menu button.on { color: var(--g-dark); background: rgba(27, 18, 32, 0.06); }
.g-glass .tip, .g-glass .vz-tip { border-radius: 14px; background: rgba(255, 255, 255, 0.92); border: 1px solid #fff; box-shadow: 0 14px 34px rgba(20, 28, 40, 0.16); color: var(--g-ink); }

/* charts: graphite axes/grid, accent series */
.g-glass .chart .gl, .g-glass .vz .gl { stroke: rgba(27, 18, 32, 0.07); }
.g-glass .chart .ax, .g-glass .vz .ax { fill: var(--g-ink-2); }
.g-glass .vz .lb, .g-glass .vz .rl { fill: #3c3344; }
.g-glass .vz .vl, .g-glass .vz .rc, .g-glass .vz .dvv { fill: var(--g-ink); }
.g-glass .vz-m { border-radius: 16px; background: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.9); }
.g-glass .gauge .trk, .g-glass .semi .trk { stroke: rgba(27, 18, 32, 0.08); }
.g-glass .vz-legend, .g-glass .legend { color: var(--g-ink-2); }

/* ============================== 6. 3D twin + overlays ============================== */
.g-glass .twin { background: linear-gradient(180deg, #dde5ee, #f3f5f8); }
.g-glass .twin canvas { animation: g-fade 1s 0.1s var(--g-ease) both; }
.g-glass .tw-legend, .g-glass .tw-hud.tr .seg, .g-glass .tw-b, .g-glass .tw-card, .g-glass .tw-narr, .g-glass .o3-reset, .g-glass .o3-zoom button, .g-glass .wk-bar, .g-glass .map-hud, .g-glass .rp-hud { -webkit-backdrop-filter: var(--g-blur-s); backdrop-filter: var(--g-blur-s); }
/* twin title stays legible when the camera flies over dark roofs / panels (same pill MIRA Watt already used) */
.g-glass .tw-hud.tl .t { width: fit-content; padding: 4px 10px 5px; margin-left: -10px; border-radius: 10px; background: rgba(244, 246, 249, 0.9); box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06); }
.g-glass .tw-hud.tl .k { width: fit-content; padding: 4px 10px; margin-left: -10px; border-radius: 99px; background: rgba(244, 246, 249, 0.9); }
.g-glass .tw-legend { border-radius: 14px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.9); }
.g-glass .tw-hud.tr .seg { background: rgba(255, 255, 255, 0.7); box-shadow: 0 8px 20px rgba(20, 28, 40, 0.08); }
/* the twin's layer bar scrolls sideways on phones (its .tw-hud.tr box is overflow-x: auto); never wrap it into a second row over the scene */
.g-glass .tw-hud.tr .seg { flex-wrap: nowrap; }
.g-glass .tw-b { background: rgba(255, 255, 255, 0.78); box-shadow: 0 8px 20px rgba(20, 28, 40, 0.08); }
.g-glass .tw-card, .g-glass .tw-narr { border-radius: 22px; background: rgba(255, 255, 255, 0.8); border: 1px solid #fff; box-shadow: 0 20px 50px rgba(20, 28, 40, 0.16); animation: g-pop 0.35s var(--g-ease) both; }
.g-glass .tw-card .note { border-radius: 14px; background: rgba(133, 0, 131, 0.05); border-color: rgba(133, 0, 131, 0.14); }
.g-glass .tw-card .x { border-radius: 50%; }
.g-glass .tw-narr .h { color: var(--g-accent); }
.g-glass .p3-l .bx { border-radius: 12px; background: rgba(255, 255, 255, 0.86); border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 6px 16px rgba(40, 30, 70, 0.12); }
.g-glass .p3-l.eq .bx { background: rgba(255, 255, 255, 0.86); border-color: rgba(133, 0, 131, 0.2); }
.g-glass .p3-l.sel .bx { border-color: var(--g-dark); box-shadow: 0 0 0 3px rgba(27, 18, 32, 0.12), 0 6px 16px rgba(40, 30, 70, 0.14); }
.g-glass .p3-tip { border-radius: 12px; background: rgba(23, 21, 27, 0.88); }
.g-glass .twin.o3-armed canvas, .g-glass .o3-armed .twin canvas { box-shadow: inset 0 0 0 2px rgba(27, 18, 32, 0.25) !important; }
.g-glass .o3-nudge .o3-hint { background: var(--g-dark); }
.g-glass .twin-foot { background: rgba(255, 255, 255, 0.4); }
/* phones held sideways: the twin (500–560 px tall) is taller than the screen, so its Exit-walk / tour controls sat under the
   sticky header or below the fold. Fit it to the visible height; walk3d scrolls it into view (scroll-margin clears the header). */
.g-glass .twin { scroll-margin-top: 100px; max-height: max(320px, calc(100svh - 110px)); } /* short laptop screens: walk / VR / tour controls at the twin's foot stay on screen */
@media (orientation: landscape) and (max-height: 520px) {
  .g-glass .twin { height: calc(100svh - 110px); min-height: 250px; }
  /* the tour card and stop card must stay inside the short twin (they ran above its top edge) */
  .g-glass .tw-narr { top: auto; bottom: 12px; max-height: calc(100% - 24px); overflow: auto; }
  .g-glass .tw-card { top: 12px; bottom: auto; left: auto; right: 12px; width: min(340px, 48%); max-height: calc(100% - 24px); overflow: auto; }
  .g-glass .twin.walking .tw-card { top: 64px; max-height: calc(100% - 76px); }
  .g-glass .twin.touring .tw-bar, .g-glass .twin.touring .o3-ui { display: none; }
}
@keyframes g-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* ============================== 7. motion ============================== */
@keyframes g-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes g-slide { from { opacity: 0; transform: translate3d(-12px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
.g-glass .g-rise { animation: g-rise 0.7s var(--g-ease) both; animation-delay: calc(var(--g-n, 0) * 55ms); }
.g-glass .g-slide { animation: g-slide 0.55s var(--g-ease) both; animation-delay: calc(120ms + var(--g-n, 0) * 60ms); }
.g-glass .ev.new { animation: g-slide 0.5s var(--g-ease) both; }
/* paused when the tab is hidden (motion.js toggles .g-hidden) */
.g-hidden .g-bg i, .g-hidden .kpi.g-hero::after, .g-hidden .dot.live::after, .g-hidden .al.high .sv::after, .g-hidden .ev .dot.red::after { animation-play-state: paused; }

/* ============================== 8. responsive ============================== */
@media (max-width: 1024px) {
  /* shell B: sidebar becomes the horizontal scene bar; bars go edge-to-edge so hud.js scroll offsets stay exact */
  .g-glass .scenes { left: 0; top: var(--top-h); bottom: auto; border-radius: 0; border-width: 0 0 1px; box-shadow: none; padding: 0 12px; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: var(--g-blur-s); backdrop-filter: var(--g-blur-s); }
  .g-glass .scenes a.on::before { display: none; }
  .g-glass .top:not(.shell .top) { margin: 0; top: 0; border-radius: 0; border-width: 0 0 1px; }
  .g-glass main, .g-glass footer.foot { margin-left: 0; padding-left: var(--pad); padding-right: var(--pad); }
}
@media (max-width: 960px) {
  .g-glass .rail { transform: translateX(calc(-100% - var(--gi) - 8px)); background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
  .g-glass .rail.open { transform: none; box-shadow: var(--shadow-lg); }
  .g-glass .shell { margin-left: var(--gi); }
  .g-glass .rail-scrim { background: rgba(23, 21, 27, 0.3); }
}
@media (max-width: 700px) {
  body.g-glass { --gi: 0px; --g-r: 20px; }
  .g-glass .rail { top: 0; bottom: 0; left: 0; border-radius: 0 24px 24px 0; background: rgba(255, 255, 255, 0.9); }
  .g-glass .shell { margin-left: 0; padding-right: 0; }
  .g-glass .top { border-radius: 0; border-width: 0 0 1px; margin-top: 0; top: 0; padding: 0 12px; background: rgba(255, 255, 255, 0.72); }
  .g-glass .sector-bar { padding: 10px 12px 2px; }
  .g-glass .view { padding: 12px 12px 64px; }
  .g-glass .ph-row h2 { font-size: 22px; }
  .g-glass .page-h h1 { font-size: 24px; }
  /* phones: no backdrop blur on cards (keeps scrolling smooth); slightly more opaque glass instead */
  .g-glass .panel, .g-glass .kpi, .g-glass .banner, .g-glass .tw-legend, .g-glass .tw-b, .g-glass .tw-card, .g-glass .tw-narr, .g-glass .tw-hud.tr .seg { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .g-glass .panel, .g-glass .kpis > .kpi:not(.g-hero) { background: rgba(255, 255, 255, 0.7); }
  .g-glass .tw-card, .g-glass .tw-narr { background: rgba(255, 255, 255, 0.96); } /* without blur, the twin's hint and buttons read through the tour card */
  /* walk mode: the stop card used to fill the whole view (and run under the walk bar); keep it a compact sheet above the bar */
  .g-glass .twin.walking .tw-card { top: auto; bottom: 132px; max-height: 40%; overflow: auto; }
  .g-glass .kpis > .kpi { padding: 14px 14px 13px; }
  .g-glass .kpi .lbl { font-size: 12.5px; }
  .g-glass .kpis > .kpi .val b, .g-glass .kpis.k8 > .kpi .val b, .g-glass .kpis.kp8 > .kpi .val b, .g-glass .kpis7 > .kpi .val b { font-size: clamp(20px, 12cqi + 6px, 30px); }
  .g-glass aside.mira#mira { border-radius: 22px; }
  .g-bg i { animation: none; }
  .g-glass .nav a.on::before { left: -12px; }
}
@media (max-width: 640px) {
  .g-glass table.mob-cards tr { border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 18px; background: rgba(255, 255, 255, 0.6); box-shadow: 0 4px 14px rgba(20, 28, 40, 0.05); }
  .g-glass table.mob-cards tr:hover { background: rgba(255, 255, 255, 0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .g-bg i, .g-glass .kpi.g-hero::after, .g-glass .dot.live::after, .g-glass .al.high .sv::after, .g-glass .ev .dot.red::after { animation: none !important; }
  .g-glass .g-rise, .g-glass .g-slide, .g-glass .twin canvas, .g-glass .tw-card, .g-glass .tw-narr, .g-glass .ev.new { animation: none !important; opacity: 1 !important; transform: none !important; }
  .g-glass .kpi, .g-glass .mcard, .g-glass .ins, .g-glass .btn, .g-glass .panel, .g-glass .mira-card { transition: none !important; }
  .g-glass .kpi:hover, .g-glass .mcard:hover, .g-glass .ins:hover, .g-glass .btn:hover, .g-glass .mira-card:hover { transform: none !important; }
}

/* alarm tables (fix 2 Nov, all shell-A platforms): ₹ impact column gets real width, text columns wrap instead of
   pushing the table wider than its panel; short columns stay on one line */
@media (min-width: 900px) {
  .g-glass .tbl.altbl { table-layout: auto; }
  .g-glass .tbl.altbl td.num, .g-glass .tbl.altbl th.num, .g-glass .tbl.altbl td.r, .g-glass .tbl.altbl th.r { min-width: 170px; width: 170px; white-space: normal; }
  .g-glass .tbl.altbl td.num > small.blk, .g-glass .tbl.altbl td.r > small.blk { min-width: 0; max-width: none; line-height: 1.35; }
  .g-glass .tbl.altbl td.wrapc { min-width: 140px; max-width: 230px; white-space: normal; }
  .g-glass .tbl.altbl td.mono, .g-glass .tbl.altbl td:first-child { white-space: nowrap; }
  .g-glass .tbl.altbl td:not(.num):not(.wrapc):not(:first-child):not(.mono) { white-space: normal; min-width: 72px; }
  .g-glass .tbl.altbl td .st, .g-glass .tbl.altbl td .pill { white-space: nowrap; }
}

/* ===== 9. top bar priorities, shell A (7 Nov): the page title never truncates. Search shrinks first, then the lowest-priority
   pills step aside (sample-data wording, scenario label, site chip, clock). Also: status strip wraps instead of clipping. ===== */
.g-glass .shell .top { gap: 12px; }
.g-glass .shell .crumbs { flex: 1 1 auto; min-width: 0; }
.g-glass .shell .crumbs h1 { overflow: visible; text-overflow: clip; white-space: nowrap; }
.g-glass .shell .top-r { flex: 0 1 auto; min-width: 0; }
.g-glass .shell .top-r > * { flex-shrink: 0; }
.g-glass .shell .top .search { flex: 0 1 220px; flex-shrink: 1; min-width: 120px; max-width: 220px; }
.g-glass .shell .top .search kbd { flex: none; }
.g-glass .shell .top .scen select { width: 172px; max-width: 172px; text-overflow: ellipsis; }
@media (max-width: 1760px) and (min-width: 961px) { .g-glass .shell .top .badge-demo .hide-s { display: none; } .g-glass .shell .top .scen > span { display: none; } }
@media (max-width: 1620px) and (min-width: 961px) { .g-glass .shell .top .search { flex-basis: 170px; min-width: 110px; } .g-glass .shell .top .site-chip { display: none; } }
@media (max-width: 1500px) and (min-width: 961px) { .g-glass .shell .top .search kbd { display: none; } }
@media (max-width: 1440px) and (min-width: 961px) { .g-glass .shell .top .me { display: none; } }
@media (max-width: 1360px) and (min-width: 961px) { .g-glass .shell .top .clock { display: none; } }
/* status strip: pills wrap onto a second line, the right-hand tag drops under them; nothing is cut mid-word */
.g-glass .shell .sector-bar { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
.g-glass .shell .sector-bar .ticker { flex-wrap: wrap; white-space: normal; gap: 4px 20px; min-width: 0; flex: 1 1 320px; }
.g-glass .shell .sector-bar .ticker span { white-space: nowrap; }
.g-glass .shell .sector-bar .sub-r { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.g-glass .shell .sector-bar .sub-r .tag { white-space: normal; max-width: 100%; }
/* phone / tablet menu drawer (shell A): an opaque, clean surface, so the page behind and the pink glass blobs never bleed through the items */
@media (max-width: 960px) {
  .g-glass .rail, .g-glass .rail.open { background: #fcfcfd; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .g-glass .rail-scrim { background: rgba(23, 21, 27, 0.42); }
}
/* search stays on desktop and small laptops (shell A used to drop it below 1360 px); below 960 px the menu drawer has Ask MIRA AI */
@media (min-width: 961px) { .g-glass .shell .top .search { display: flex; } }
@media (max-width: 1280px) and (min-width: 961px) { .g-glass .shell .top .search kbd { display: none; } .g-glass .shell .top .site-chip, .g-glass .shell .top .me, .g-glass .shell .top .clock { display: none; } }
.g-glass .top .search .s-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* clip-fix 7 Nov 2026: at tablet width (701-960 px, rail hidden) the live-clock pill pushed the ems bell past the right edge; the pill gives way here too, the scenario label shortens */
@media (max-width: 960px) and (min-width: 701px) { .g-glass .shell .top .clock { display: none; } .g-glass .shell .top .scen > span { display: none; } }

/* top-bar search: icon-only when the hint does not fit (set by reel.js fitSearch) */
.g-glass .top .search.s-ico { flex: 0 0 auto; min-width: 0; width: 40px; padding: 0; justify-content: center; gap: 0; }
.g-glass .top .search.s-ico .s-t, .g-glass .top .search.s-ico kbd { display: none; }

/* clip-fix 7 Nov 2026: small labels, KPI captions and panel titles wrap onto a second line instead of ending in an ellipsis or being cut */
body.g-glass .kpi .lbl,
body.g-glass .kpi .sub,
body.g-glass .kpi .sub > *,
body.g-glass .kpi .sub span,
body.g-glass .kv4 small,
body.g-glass .kv4 b,
body.g-glass .mini-stats small,
body.g-glass .mini-stats b,
body.g-glass .sunrow small,
body.g-glass .sunrow b,
body.g-glass .twin-foot small,
body.g-glass .twin-foot b,
body.g-glass .urow .ul small,
body.g-glass .urow .ua small,
body.g-glass .urow .un > small,
body.g-glass .jn,
body.g-glass .jn small,
body.g-glass .mrow .mn b,
body.g-glass .mcard .mh,
body.g-glass .mcard .top1 h4,
body.g-glass .tw-card .kv b,
body.g-glass .ucard .g4 small,
body.g-glass .elec small,
body.g-glass .hm-stats small,
body.g-glass .app-card .kv3 small,
body.g-glass .pve-sum small,
body.g-glass .slr small,
body.g-glass .fcard .grow,
body.g-glass .drvl,
body.g-glass .al p,
body.g-glass .tkrow .mono,
body.g-glass .cal14 span,
body.g-glass .wk-stop,
body.g-glass .ph h3,
body.g-glass .ph h3 span,
body.g-glass #etaStats small,
body.g-glass #twFoot small,
body.g-glass #podName,
body.g-glass #ccName {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; -webkit-line-clamp: unset; line-clamp: unset; max-width: 100%;
}
body.g-glass .ph h3 { min-width: 0; flex: 1 1 auto; }
/* clip-fix 7 Nov 2026: a table wider than its card scrolls inside the card instead of its last column being cut by the rounded corner */
body.g-glass .panel.flush, body.g-glass .panel:has(> table), body.g-glass .panel:has(> .tbl) { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }

/* clip-fix 7 Nov 2026: status text colours darkened to pass WCAG AA (>= 4.5:1) on the tinted glass cards */
body.g-glass .c-red, body.g-glass .sv.bad, body.g-glass .kpi .dn, body.g-glass .st-bad, body.g-glass .pill.r, body.g-glass .tag.bad { color: #b42318 !important; }
body.g-glass .c-amber, body.g-glass .st-warn, body.g-glass .st-standby, body.g-glass .tag.warn, body.g-glass .pill.a, body.g-glass .flag.warn, body.g-glass .params .warnv b, body.g-glass .sv.warn { color: #9a3b06 !important; }
body.g-glass .c-green, body.g-glass .st-ok, body.g-glass .st-running, body.g-glass .tag.live, body.g-glass .pill.g, body.g-glass .kpi .up, body.g-glass .ins .act .imp, body.g-glass .sv.ok { color: #05673f !important; }
body.g-glass .c-cyan, body.g-glass .st-info, body.g-glass .pill.c { color: #1450b8 !important; }
/* phones: the top bar of shell B (Helios, Convoy) drops the clock pill so nothing runs off the right edge */
@media (max-width: 520px) { body.g-glass .top-right .clock, body.g-glass .top-right #clock { display: none; } }
body.g-glass .kpi .val b { white-space: normal; overflow-wrap: anywhere; }
/* clip-fix 7 Nov 2026: contrast patches (value chips, level badges, medals, kbd hints, tank labels, signal cards) */
body.g-glass .jc b { color: color-mix(in srgb, var(--c) 45%, #101828); }
body.g-glass .lvl.l3 { background: #8a2a86; color: #fff; }
body.g-glass .pod.p2 .medal { background: #98318f; } body.g-glass .pod.p3 .medal { background: #8e3a8b; }
body.g-glass .mira-card kbd { color: #fff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); }
body.g-glass .gc-fuel .tank b, body.g-glass .tank b { color: #1b1220; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff; }
body.g-glass .sig.g-hero .big .apq, body.g-glass .sig.g-hero .big .apq span, body.g-glass .sig.g-hero .big .apq b { color: rgba(255, 255, 255, 0.92); }
/* svg diagrams: labels that sit a few pixels past the viewBox edge (UPS mimic, battery chart) stay visible */
body.g-glass svg.mimic-svg, body.g-glass svg.chart { overflow: visible; }
/* clip-fix 7 Nov 2026 (phones): header tags, picker buttons, row captions and table sub-lines wrap inside their box */
body.g-glass .ph > .r { min-width: 0; max-width: 100%; flex-wrap: wrap; }
body.g-glass .ph .tag, body.g-glass .ph .pill { white-space: normal; max-width: 100%; }
body.g-glass .mrow .mn small, body.g-glass .mcard .mh small, body.g-glass .drv small, body.g-glass td small.blk, body.g-glass .bal .bl b, body.g-glass .bal .bl span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
body.g-glass #fdSm, body.g-glass #fdSm > button { max-width: 100%; white-space: normal; }
body.g-glass select#pnTr, body.g-glass select { max-width: 100%; }
body.g-glass select#pnTr { min-width: 168px; }
/* clip-fix 7 Nov 2026: grid cards may shrink below their content (tables inside scroll instead of widening the page); tablet/phone twin fallback leaves room for the wrapped layer bar */
body.g-glass .grid > *, body.g-glass .kpis > *, body.g-glass .cols > * { min-width: 0; }
@media (max-width: 1100px) { body.g-glass .tw-fallback .fb-h { padding-bottom: 130px; } }
@media (max-width: 700px) { body.g-glass .tw-fallback .fb-h { padding-bottom: 170px; } }

/* clip-fix 7 Nov 2026 (round 3) */
body.g-glass svg.bheat { overflow: visible; }
body.g-glass .tkrow small, body.g-glass a.tkrow > div > small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  body.g-glass select#pnTr { flex: 1 1 100%; width: 100%; }
  body.g-glass .shell .crumbs h1 { white-space: normal; overflow-wrap: anywhere; }
  body.g-glass .shell .top .badge-demo { flex: none; }
}
/* clip-fix 7 Nov 2026 (round 4) */
body.g-glass .fld:has(> select#pnTr) { grid-column: 1 / -1; }
@media (max-width: 700px) { body.g-glass table td b, body.g-glass table td small, body.g-glass table td > span { white-space: normal; overflow-wrap: anywhere; } }
/* clip-fix 7 Nov 2026: menu drawer on short screens (phone landscape): the whole drawer scrolls, so the menu list is never squeezed to one row behind the Ask MIRA card */
@media (max-width: 960px) { body.g-glass .rail { overflow-y: auto; overscroll-behavior: contain; } body.g-glass .rail .nav { flex: none; overflow: visible; } }
/* clip-fix 7 Nov 2026 (round 5): contrast of coloured values inside tables and tiles */
body.g-glass [style*="color:var(--green)"], body.g-glass [style*="color: var(--green)"], body.g-glass [style*="#12b76a" i] { color: #05673f !important; }
body.g-glass [style*="color:var(--amber)"], body.g-glass [style*="color: var(--amber)"], body.g-glass [style*="#fdb022" i], body.g-glass [style*="#f79009" i] { color: #9a3b06 !important; }
body.g-glass .hsc { color: #1b1220; }
body.g-glass tr.dim td, body.g-glass tr.dim td.num { color: #5f5866; }
body.g-glass .sbar2 em { color: #1b1220; }
body.g-glass .gc-fuel .tank b, body.g-glass .tank b { color: #fff; text-shadow: 0 0 2px #1b1220, 0 0 2px #1b1220, 0 0 4px rgba(27, 18, 32, 0.8); }
/* clip-fix 7 Nov 2026 (round 6): wrapped segmented controls grow instead of overlapping rows; wide heat maps scroll; floor-card names wrap */
body.g-glass .seg { height: auto; row-gap: 4px; }
body.g-glass #bkHeat, body.g-glass .vz-host:has(> svg.bheat) { overflow-x: auto; }
body.g-glass .fcard .fh b, body.g-glass .fh .grow, body.g-glass .fh .grow b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* clip-fix 7 Nov 2026 (round 7): score chips and avatars with inline colours */
body.g-glass .hsc { color: #fff !important; }
body.g-glass .hsc[style*="#F79009" i] { background: #b54708 !important; }
body.g-glass .hsc[style*="#12B76A" i] { background: #067647 !important; }
body.g-glass .hsc[style*="#D92D20" i] { background: #b42318 !important; }
body.g-glass .av { background: hsl(var(--h, 290) 55% 34%); }
body.g-glass [style*="B64FB3" i] { color: #8a2a86 !important; }
body.g-glass .mob-hint { opacity: 1; color: #5a5263; }
/* round 8 */
body.g-glass .av { color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.45); }
body.g-glass .kcol .kh small, body.g-glass .wa small { color: #4f4759 !important; }
body.g-glass .kp-note { color: #4f4759; }
/* round 9 */
body.g-glass small#crumbGroup, body.g-glass .crumbs small { color: #3f3748; }
body.g-glass a.atile em { color: #9a3b06; } body.g-glass a.atile small { color: #4f4759; }
body.g-glass a.atile.a em, body.g-glass a.atile.r em, body.g-glass a.atile.a small, body.g-glass a.atile.r small { color: #e7e3ee; }
body.g-glass [style*="D92D20" i], body.g-glass .rsrow.r em, body.g-glass .fcard .fc.bad { color: #b42318 !important; }
body.g-glass .flag.ok { color: #05673f; } body.g-glass .flag.bad, body.g-glass .st-bad { color: #9f1c11 !important; } body.g-glass .flag.info { color: #1450b8; } body.g-glass .sk-beginner { color: #9a3b06; }
body.g-glass #kp p.tiny { color: #c9d1de; }
/* round 10 */
body.g-glass .wm .chips span { color: #1450b8; }
body.g-glass .sd-stats small, body.g-glass #blocks small { color: #3f3748; }
body.g-glass .tw-hud .seg, body.g-glass .tw-bar .seg { flex-wrap: wrap; max-width: 100%; }
body.g-glass .tw-hud .seg button, body.g-glass .tw-bar .seg button { flex: none; }
/* clip-fix 7 Nov 2026: the purple hero KPI card keeps every value, unit and caption white (a value coloured with the brand purple was invisible on it) */
body.g-glass .kpi.g-hero .val b, body.g-glass .kpi.g-hero .val u, body.g-glass .kpi.g-hero .sub, body.g-glass .kpi.g-hero .sub *, body.g-glass .kpi.g-hero .apq, body.g-glass .kpi.g-hero .apq span, body.g-glass .kpi.g-hero .apq b { color: #fff !important; }
/* round 11 */
body.g-glass [style*="var(--red)"] { color: #b42318; }
body.g-glass a.atile em, body.g-glass a.atile small, body.g-glass a.atile.a em, body.g-glass a.atile.r em, body.g-glass a.atile.a small, body.g-glass a.atile.r small { color: #d9d3e3; }
body.g-glass .hsc[style*="#84CC16" i] { background: #4d7c0f !important; }
body.g-glass tr.dim { opacity: 1; } body.g-glass tr.dim td, body.g-glass tr.dim td.num { color: #5f5866; }
body.g-glass .chipx.a { color: #9a3b06; } body.g-glass .chipx.g { color: #05673f; } body.g-glass .chipx.r { color: #b42318; }
/* clip-fix 7 Nov 2026 (round 12): on tablets/phones table cells may wrap and use tighter padding so a table fits its card instead of running 20px past the rounded corner */
@media (min-width: 1px) {
  body.g-glass .tbl th, body.g-glass .tbl td { white-space: normal; padding-left: 8px; padding-right: 8px; }
  body.g-glass .tbl td.mono, body.g-glass .tbl td.mono.t3 { white-space: normal; overflow-wrap: anywhere; }
  body.g-glass .tbl td.num, body.g-glass .tbl th.num, body.g-glass .tbl td.r, body.g-glass .tbl th.r { white-space: nowrap; }
  body.g-glass .tbl td.num > small.blk, body.g-glass .tbl td.r > small.blk { min-width: 0; white-space: normal; }
  body.g-glass table td b, body.g-glass table td small, body.g-glass table td > span { white-space: normal; overflow-wrap: anywhere; }
}
body.g-glass .tw-hud.tr { max-width: calc(100% - 24px); }
/* clip-fix 7 Nov 2026 (round 13): a table wrapper inside a flush card must not bleed 20px past the card; the wrapper itself scrolls */
body.g-glass .panel.flush { overflow-x: hidden; }
body.g-glass .panel.flush > .tbl-wrap, body.g-glass .panel.flush > div > .tbl-wrap { margin-left: 0; margin-right: 0; }
body.g-glass .panel:has(> table), body.g-glass .panel:has(> .tbl) { overflow-x: auto; }
/* round 14 */
body.g-glass { --red: #b42318; }
body.g-glass #ledger .lg { background: rgba(255, 255, 255, 0.72); border-color: rgba(27, 18, 32, 0.1); } body.g-glass #ledger .lg small, body.g-glass #ledger .lg u { color: #4f4759; } body.g-glass #ledger .lg b { color: #1b1220; }
@media (max-width: 700px) { body.g-glass .tw-hud.tr { left: 12px; right: 12px; max-width: none; display: flex; justify-content: flex-end; } }
/* round 15 */
body.g-glass [style*="#84CC16" i], body.g-glass [style*="84cc16" i] { color: #4d7c0f !important; }
body.g-glass .hsc[style*="#84CC16" i] { color: #fff !important; }
body.g-glass #fdSm { display: flex; flex-wrap: wrap; gap: 6px; } body.g-glass #fdSm > button { flex: 0 1 auto; max-width: 100%; }
/* round 16: dark HMI / andon panels keep light captions */
body.g-glass .hmi-card .big u, body.g-glass .hmi-card small, body.g-glass .hmi-card .opl small { color: #aeb7c8; }
body.g-glass a.atile em, body.g-glass a.atile small, body.g-glass a.atile.a em, body.g-glass a.atile.r em, body.g-glass a.atile.a small, body.g-glass a.atile.r small { color: #d9d3e3 !important; }
body.g-glass .tbl-wrap.tall { overflow-x: auto; }
body.g-glass .wa-b { height: auto; min-height: 440px; max-height: 600px; overflow-y: auto; }
body.g-glass .seg.mb-s { flex-wrap: wrap; max-width: 100%; }
body.g-glass .tw-hud.tr, body.g-glass .tw-hud.tr .seg { overflow: visible; }
/* round 17 */
body.g-glass .hsc[style*="D92D20" i], body.g-glass .hsc[style*="F79009" i], body.g-glass .hsc[style*="12B76A" i], body.g-glass .hsc[style*="84CC16" i] { color: #fff !important; }
body.g-glass .dim td, body.g-glass tr.dim td { opacity: 1; color: #6a6270; }
body.g-glass a.atile { background: #101828; color: #fff; }
body.g-glass .seg.mb-s > button { white-space: normal; }
body.g-glass .phone .wa p, body.g-glass .phone .wa small { overflow-wrap: anywhere; }
/* round 18 */
body.g-glass .cg, body.g-glass td.cg { color: #05673f; }
body.g-glass [style*="#84CC16" i], body.g-glass [style*="84cc16" i] { color: #3f6212 !important; }
body.g-glass .tbl-wrap.tall th, body.g-glass .tbl-wrap.tall td { padding-left: 6px; padding-right: 6px; }
/* round 19: segmented controls wrap instead of overflowing (beats the nowrap set by the reel layer) */
body.g-glass .seg, body.g-glass .tw-hud .seg, body.g-glass .tw-bar .seg { flex-wrap: wrap !important; max-width: 100%; }
/* clip-fix 7 Nov 2026: at 1440-1560 the live-clock pill steps aside so the search box keeps its full hint */
@media (max-width: 1560px) and (min-width: 961px) { body.g-glass .top .clock, body.g-glass .shell .top .clock { display: none; } }
@media (min-width: 1281px) { body.g-glass .shell .top .search { flex: 0 1 280px; max-width: 280px; min-width: 200px; } }
@media (min-width: 1281px) { body.g-glass .top-right .search { flex: 0 1 232px; max-width: 232px; min-width: 190px; } }
/* clip-fix 7 Nov 2026: 3D twin on phones: the zoom / reset group sits under the layer pills at the top right instead of on top of the Guided tour / Walk buttons at the bottom; view pills have a solid backing so their text reads over the 3D scene */
@media (max-width: 700px) { body.g-glass .twin .o3-ui { top: 170px !important; bottom: auto !important; right: 12px; flex-wrap: wrap; justify-content: flex-end; } body.g-glass .twin .o3-hint { position: static; } }
@media (max-width: 480px) { body.g-glass .twin .seg { border-radius: 18px; } body.g-glass .twin .seg button { padding-left: 7px !important; padding-right: 7px !important; font-size: 12.5px !important; min-width: 44px !important; } }
body.g-glass .twin .tw-hud .seg, body.g-glass .twin .tw-bar .seg, body.g-glass #twViews { background: rgba(255, 255, 255, 0.88); }
/* clip-fix 7 Nov 2026: the Ask MIRA AI card in the menu drawer grows with its text */
body.g-glass .mira-card { height: auto; min-height: 56px; overflow: visible; }
body.g-glass .mira-card .mc-t b, body.g-glass .mira-card .mc-t small { white-space: normal; overflow: visible; }
body.g-glass .rail > *, body.g-glass .rail .mira-card { flex-shrink: 0; }
body.g-glass #mapCard .why, body.g-glass .why { color: #9a3b06; }