/* MIRA reel layer — styles for reel.js (sliding pill, seg thumb, live clock, tick gauge, KPI ring, dark tooltip, route exit).
   Scoped under body.g-glass. Graphite is the active colour; logo purple stays reserved for the hero KPI / primary / best bar. */
.g-glass .r-sl.r-rel { position: relative; }
.g-glass .r-pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 14px; pointer-events: none; background: linear-gradient(135deg, #1c1d22, #2b2d34 60%, #3a3d45); box-shadow: 0 10px 22px rgba(20, 22, 30, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), width 0.34s cubic-bezier(0.22, 1, 0.36, 1), height 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s; will-change: transform, width, height; }
.g-glass .r-pill.r-still, .g-glass .r-thumb.r-still { transition: none; }
.g-glass .nav.r-sl a, .g-glass .scenes.r-sl a { z-index: 1; }
.g-glass .nav.r-sl a.on, .g-glass .scenes.r-sl a.on { background: transparent; box-shadow: none; color: #fff; transition: color 0.25s; }
.g-glass .nav.r-sl a.on::before, .g-glass .scenes.r-sl a.on::before { display: none; }
.g-glass .nav.r-sl a.on .ic, .g-glass .scenes.r-sl a.on i { color: #fff; opacity: 1; }
.g-glass .nav.r-sl a.on:hover, .g-glass .scenes.r-sl a.on:hover { background: transparent; color: #fff; }
.g-glass .nav.r-sl a.on .tag, .g-glass .nav.r-sl a.on .cnt:not(.hot), .g-glass .scenes.r-sl a.on .cnt:not(.hot) { background: rgba(255, 255, 255, 0.2); color: #fff; }

.g-glass .r-thumb { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; pointer-events: none; background: #fff; box-shadow: 0 3px 10px rgba(20, 28, 40, 0.1); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), width 0.3s cubic-bezier(0.22, 1, 0.36, 1), height 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s; }
.g-glass .seg.r-sl > button, .g-glass .seg.r-sl > a { position: relative; z-index: 1; }
.g-glass .seg.r-sl > button.on, .g-glass .seg.r-sl > a.on, .g-glass .seg.r-sl > [aria-selected="true"] { background: transparent; box-shadow: none; }

/* live clock pill */
.g-glass .clock { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid #fff; box-shadow: 0 4px 14px rgba(20, 28, 40, 0.06); font-variant-numeric: tabular-nums; }
.g-glass .clock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #12b76a; flex: none; animation: r-live 1.8s ease-out infinite; }
@keyframes r-live { 0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(18, 183, 106, 0); } }
.g-hidden .clock::before { animation: none; }
.g-glass .r-d { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; height: 1.2em; line-height: 1.2em; }
.g-glass .r-d > i { display: inline-block; font-style: normal; animation: r-din 0.26s cubic-bezier(0.22, 1, 0.36, 1) both; }
.g-glass .r-d::before { content: attr(data-o); position: absolute; left: 0; top: 0; animation: r-dout 0.26s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes r-din { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes r-dout { from { transform: none; opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }

/* charts: hover darkens the column, tooltip is a dark card */
.g-glass svg .r-bar { transition: filter 0.18s; }
.g-glass svg .r-bar.r-hot { filter: brightness(0.42) saturate(0.8); }
.g-glass .vz-tip { background: #1c1d22; color: #f3f4f6; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 16px 36px rgba(10, 12, 20, 0.35); }
.g-glass .vz-tip b, .g-glass .vz-tip .r em { color: #fff; }
.g-glass .vz-tip em { color: #7fe3b0; }
.g-glass .vz-tip .r.tot { border-top-color: rgba(255, 255, 255, 0.16); }

/* tick-arc gauge */
.g-glass svg .r-tk { stroke: #d5d8de; stroke-width: 1.5; stroke-linecap: round; transition: stroke 0.12s; }
.g-glass svg .r-tk.lit { stroke: #3a3d45; }
.g-glass svg .r-knob { fill: #fff; stroke: #1c1d22; stroke-width: 2.5; filter: drop-shadow(0 2px 3px rgba(20, 22, 30, 0.35)); }

/* % KPI ring */
.g-glass .kpi .val .r-ring { margin-left: auto; align-self: center; flex: none; width: 30px; height: 30px; pointer-events: none; }
.g-glass .kpi .val .r-ring circle { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.g-glass .kpi .val .r-ring .rt { stroke: rgba(27, 18, 32, 0.1); }
.g-glass .kpi .val .r-ring .rf { stroke: #1c1d22; }
.g-glass .kpi.g-hero .val .r-ring .rt { stroke: rgba(255, 255, 255, 0.28); }
.g-glass .kpi.g-hero .val .r-ring .rf { stroke: #fff; }

/* route exit */
.g-glass #view { transition: opacity 0.15s ease, filter 0.15s ease; }
.g-glass #view.r-out { opacity: 0; filter: blur(3px); }

@media (prefers-reduced-motion: reduce) {
  .g-glass .r-pill, .g-glass .r-thumb, .g-glass #view { transition: none; }
  .g-glass .clock::before, .g-glass .r-d > i, .g-glass .r-d::before { animation: none; }
  .g-glass .r-d::before { display: none; }
}
/* fix 3 Nov: the wider live-clock pill pushed the top bar 50px over at ~1440, so the search box sat on the date chip (solar, fleet) — let search give way first */
.g-glass .top-mid > .chip { flex: none; }
@media (min-width: 1481px) { .g-glass .top > .top-mid { flex-shrink: 0; } }
@media (max-width: 1480px) { .g-glass .top-mid > .hide-md { display: none; } } /* the 'Today' date chip gives way below 1480 (clock pill already shows the time) */
.g-glass .top > .top-right { flex: 0 1 auto; min-width: 0; }
.g-glass .top-right > .search { flex: 0 1 170px; width: auto; min-width: 104px; }