/* admin.client DASHBOARD (DESIGN; spec 11 §2-4). The full-screen menu after the 2013 Dota 2 dashboard: the tab rail in
   the top bar, the page area on the left, THE FIVE + EVENTS on the right, ▶ BACK TO GAME bottom-right. Loaded after
   hud31.css. Every rule is scoped to .dash-root (the section) or .dash-rail: body also gets the class .dash while the
   dashboard is open, so a bare `.dash …` selector would match the whole page.
   Sizes are design px on a 1920 × 1080 canvas; the dashboard is zoomed by --dz (live.js sets it on <html>).
   Type floor at --dz 1: labels 11px (Bungee), body and data 12-13px (JetBrains Mono), names 14-18px, titles 26-32px. */

/* ---------- root: below the top bar (z 20) and .r-modal (z 40) ----------
   Chromium's standard zoom multiplies absolute lengths (and vh / vw) by the element's zoom; percentages and 0 insets
   are not touched. So:
   - top = 56px·hud / dz design px, × dz on screen = 56px·hud, exactly the top bar (56px zoomed by --hud);
   - left / right / bottom 0 stay 0, so the box always fills the viewport under the bar. Its design size is the viewport
     (minus the bar) divided by dz: 1920×1080 → dz 1, hud 1.5 → 1920 × (1080 - 84) = 1920 × 996;
     1280×720 → dz .8, hud 1 → 1600 × (720 - 56) / .8 = 1600 × 830; 2560×1440 → dz 1.33, hud 2 → 1925 × (1440 - 112) / 1.33 ≈ 1925 × 998.
   No explicit 100vw / 100vh width (they would be multiplied by dz as well, and the insets already do the job). */
section.dash-root { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; top: calc(56px * var(--hud, 1) / var(--dz, 1)); zoom: var(--dz, 1);
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26%, 420px); grid-template-rows: minmax(0, 1fr); gap: 24px; padding: 24px;
  overflow: hidden; isolation: isolate; color: var(--hot); font-family: var(--mono); font-size: 13px;
  background: radial-gradient(ellipse 70% 55% at 40% 108%, #2a0a05 0%, rgba(42, 10, 5, 0) 70%), linear-gradient(180deg, #080303 0%, #030101 100%); }
section.dash-root[hidden] { display: none; }
/* faint red Bayer dots: a 2×2 ordered-dither tile (thresholds 0 2 / 3 1) at 6px, brightest low under the page like a
   lit floor; then a radial vignette. Both are pseudo-elements, so nothing here can catch a click. */
.dash-root::before, .dash-root::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dash-root::before { background:
    radial-gradient(circle, rgba(255, 42, 18, .30) 0 1px, transparent 1.4px) 0 0 / 6px 6px,
    radial-gradient(circle, rgba(255, 42, 18, .20) 0 1px, transparent 1.4px) 3px 3px / 6px 6px,
    radial-gradient(circle, rgba(255, 42, 18, .12) 0 1px, transparent 1.4px) 3px 0 / 6px 6px,
    radial-gradient(circle, rgba(255, 42, 18, .06) 0 1px, transparent 1.4px) 0 3px / 6px 6px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 40% 100%, #000 0%, rgba(0, 0, 0, .45) 50%, transparent 88%);
          mask-image: radial-gradient(ellipse 90% 80% at 40% 100%, #000 0%, rgba(0, 0, 0, .45) 50%, transparent 88%); }
.dash-root::after { background: radial-gradient(ellipse 120% 100% at 50% 40%, transparent 45%, rgba(0, 0, 0, .55) 75%, rgba(0, 0, 0, .9) 100%); }
.dash-root > * { position: relative; z-index: 1; }
.dash-root, .dash-root * { scrollbar-width: thin; scrollbar-color: var(--trim-dim) #070403; }
.dash-root [hidden] { display: none !important; }

/* Bungee Tint is a colour font: `color` does not tint it (that is why HUD titles all render red). Palette entry 0 is
   the face, so these palettes give it the colours the design asks for. */
@font-palette-values --dash-gold { font-family: "Bungee Tint"; override-colors: 0 #c8a45a; }
@font-palette-values --dash-cream { font-family: "Bungee Tint"; override-colors: 0 #ffe7b0; }
@font-palette-values --dash-hot { font-family: "Bungee Tint"; override-colors: 0 #ffd8cc; }

/* ---------- shared chrome: panels, headers, buttons, chips ---------- */
.dash-root .dpan { min-width: 0; background: linear-gradient(180deg, var(--panel-hi), var(--panel-lo)); border: 1px solid var(--bevel); border-top-color: var(--trim-dim);
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 220, 170, .07), 0 8px 24px rgba(0, 0, 0, .55); }
.dash-root .dh { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 12px; background: linear-gradient(180deg, #2a1a13 0%, #120a07 100%);
  border-bottom: 1px solid var(--trim-dim); box-shadow: inset 0 1px 0 rgba(255, 220, 170, .08); }
.dash-root .dh > .ic { color: var(--trim); flex: none; }
.dash-root .dh b { font-family: var(--font); font-palette: --dash-gold; font-weight: 400; font-size: 16px; letter-spacing: .06em; color: var(--trim); text-shadow: 0 1px 0 #000; }
.dash-root .dh > span, .dash-root .dh > .stc, .dash-root .dh > .dh-link { margin-left: auto; }
.dash-root .dh > span { font-family: var(--mono); font-size: 12px; opacity: .7; text-align: right; }
.dash-root .pt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--trim-dim); }
.dash-root .pt h2 { margin: 0; font-family: var(--font); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .04em; color: var(--red); text-shadow: 0 2px 0 #000, 0 0 18px rgba(255, 42, 18, .35); }
.dash-root .pt p { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.5; opacity: .75; }
.dash-root .none { margin: 0; padding: 14px; font-family: var(--mono); font-size: 13px; line-height: 1.55; opacity: .75; }
.dash-root code { font-family: var(--mono); }
.dash-root small { font-size: 12px; }   /* the UA's `smaller` would drop a 12px parent to 10px, under the floor */
.dash-root kbd { font-size: 11px; }
.dash-root .no-asset-tile { font-size: 11px; }
.dash-root .no-asset-tile.big { font-size: 20px; }

.dash-root .db { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, #24170f, #0b0705); border: 1px solid var(--trim-dim); color: var(--hot); box-shadow: 0 0 0 1px #000;
  font-family: var(--label); font-size: 11px; letter-spacing: .1em; }
.dash-root .db .ic { flex: none; }
.dash-root .db:hover:not(:disabled) { border-color: var(--trim); color: #f2d898; }
.dash-root button:disabled { opacity: .4; cursor: not-allowed; }
.dash-root .db.fly, .dash-root .db.crim { background: linear-gradient(180deg, #3a160a, #120604); border-color: var(--red); }
.dash-root .db.fly:hover:not(:disabled), .dash-root .db.crim:hover:not(:disabled) { background: var(--red); color: #000; }
.dash-root .db.big { padding: 11px 18px; font-size: 13px; }
.dash-root .dh-link { padding: 4px 10px; }

.dash-root .stc { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-family: var(--label); font-size: 11px; letter-spacing: .08em; line-height: 1.35;
  padding: 1px 6px; border: 1px solid #3a2a1c; color: var(--hot); white-space: nowrap; }
.dash-root .stc.on { color: var(--esp-hot); border-color: var(--esp); background: rgba(54, 182, 255, .12); }
.dash-root .stc.zz { color: #a39a95; border-color: #4a4440; background: rgba(120, 110, 104, .1); }
.dash-root .stc.open { color: #8a7a62; border-style: dashed; }
.dash-root .stc.warn { color: var(--warn); border-color: var(--warn); background: rgba(255, 138, 61, .08); white-space: normal; text-align: right; }
.dash-root .you { font-style: normal; font-family: var(--label); font-size: 11px; letter-spacing: .1em; line-height: 1.35; color: #140c05; background: var(--trim); padding: 1px 6px; }
.dash-root .fork { font-style: normal; font-family: var(--label); font-size: 11px; letter-spacing: .08em; color: #ffe7b0; border: 1px solid var(--trim-dim); padding: 1px 6px; }
.dash-root .fork code { font-size: 12px; letter-spacing: 0; color: #fff; }
.dash-root .tint { display: inline-block; width: 13px; height: 13px; border: 1px solid #000; box-shadow: 0 0 0 1px var(--trim-dim); }
.dash-root .hz { background: var(--hazard); color: #000; padding: 0 5px; font-family: var(--label); font-size: 11px; letter-spacing: .06em; }
.dash-root .ad { display: inline-flex; align-items: center; gap: 5px; margin: 0 10px 2px 0; font-family: var(--mono); font-size: 12px; }
.dash-root .ad i { width: 10px; height: 10px; flex: none; box-shadow: 0 0 0 1px #000; }

/* ---------- page area (left): each page scrolls inside itself ---------- */
.dash-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.dash-page { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 8px 8px 0; }
.dash-page[data-page="today"], .dash-page[data-page="creators"] { container: dpage / inline-size; }
/* hosts for modules live.js mounts: ARMORY (library.js) and the re-parented timeline fill the page */
.dash-page[data-page="armory"], .dash-page[data-page="timeline"] { display: flex; flex-direction: column; padding: 0; }
.dash-page[data-page="armory"] > *, .dash-page[data-page="timeline"] > * { flex: 1 1 auto; min-height: 0; }

/* ---------- TODAY ---------- */
.td-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
@container dpage (max-width: 860px) { .td-grid { grid-template-columns: minmax(0, 1fr); } }
.me-card { display: grid; grid-template-columns: clamp(170px, 18cqw, 260px) minmax(0, 1fr); gap: 20px; padding: 16px; }
@container dpage (max-width: 560px) { .me-card { grid-template-columns: minmax(0, 1fr); } .me-pf { max-width: 220px; } }
.me-pf { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid #000; box-shadow: 0 0 0 1px var(--trim-dim), inset 0 0 30px #000;
  background: radial-gradient(ellipse 70% 20% at 50% 88%, color-mix(in srgb, var(--sc, var(--red)) 38%, transparent) 0%, transparent 70%), radial-gradient(ellipse at 50% 40%, #241410 0%, #070404 75%); }
.me-pf::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 6%; height: 10%; border: 2px dotted rgba(255, 42, 18, .55); border-radius: 50%; pointer-events: none; }
.me-pf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 72%; z-index: 1; }
.me-pf .no-asset-tile { position: absolute; inset: 0; }
.me-pf .sil { position: absolute; inset: 0; display: grid; place-items: center; color: #4a3826; }
.me-info { min-width: 0; }
.me-info h3 { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--font); font-weight: 400; font-size: 26px; line-height: 1.05;
  letter-spacing: .03em; color: #ffe7b0; font-palette: --dash-cream; overflow-wrap: anywhere; text-shadow: 0 2px 0 #000; }
.me-info dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 16px; align-items: baseline; }
.me-info dt { font-family: var(--label); font-size: 11px; letter-spacing: .12em; color: var(--trim); }
.me-info dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.me-info dd small { font-size: 12px; opacity: .8; }
.me-info .note { margin: 16px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.55; opacity: .7; }

.quick { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.dash-root .qp { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 10px 16px; text-align: left; cursor: pointer; color: var(--hot);
  background: linear-gradient(180deg, #24170f, #0b0705); border: 1px solid var(--trim-dim); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 220, 170, .08); }
.dash-root .qp > .ic { flex: none; color: var(--trim); }
.dash-root .qp > span { min-width: 0; }
.dash-root .qp b { display: block; font-family: var(--label); font-weight: 400; font-size: 14px; letter-spacing: .1em; }
.dash-root .qp small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 12px; line-height: 1.4; opacity: .78; }
.dash-root .qp.crim { background: linear-gradient(180deg, #3a160a, #120604); border-color: var(--red); }
.dash-root .qp.crim > .ic { color: #ffb199; }
.dash-root .qp.gold > .ic { color: #140c05; }
.dash-root .qp:hover { filter: brightness(1.15); box-shadow: 0 0 0 1px #000, 0 0 14px rgba(200, 164, 90, .25); }

.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; padding: 12px; }
.rc { min-width: 0; padding: 10px 12px; background: linear-gradient(180deg, #160d0a, #080404); border: 1px solid #2a1c14; box-shadow: inset 0 1px 0 rgba(255, 220, 170, .05); }
.rc header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rc header b { font-family: var(--font); font-weight: 400; font-size: 20px; letter-spacing: .04em; color: var(--red); overflow-wrap: anywhere; min-width: 0; }
.rc header .fly { margin-left: auto; }
.rc .sl { flex: none; font-family: var(--label); font-size: 11px; color: var(--trim); border: 1px solid var(--trim-dim); min-width: 22px; padding: 1px 5px; text-align: center; }
.rc p { margin: 0 0 4px; font-family: var(--mono); font-size: 12px; line-height: 1.45; }
.rc .lp { font-family: var(--label); font-size: 11px; letter-spacing: .1em; opacity: .85; }
.rc .nums { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rc .nums span { display: inline-flex; align-items: center; gap: 5px; }
.rc .nums .ic { color: var(--trim); }
.rc .here small { opacity: .55; }
.td-live .more { margin: 0; padding: 0 12px 12px; }

/* event rows (TODAY · LATEST and the right column's EVENTS) */
.dash-root .evl { list-style: none; margin: 0; padding: 6px 0; font-family: var(--mono); font-size: 12px; line-height: 1.45; }
.dash-root .evl li { display: grid; grid-template-columns: 14px auto minmax(0, 1fr); gap: 2px 8px; align-items: start; padding: 4px 12px; border-left: 2px solid transparent; }
.dash-root .evl li i { color: var(--trim); padding-top: 2px; }
.dash-root .evl li time { color: var(--trim); opacity: .85; font-variant-numeric: tabular-nums; }
.dash-root .evl li span { overflow-wrap: anywhere; }
.dash-root .evl li.none { display: block; opacity: .65; line-height: 1.55; }
.dash-root .evl li.k-err { color: var(--warn); border-left-color: var(--warn); } .dash-root .evl li.k-err i { color: var(--warn); }
.dash-root .evl li.k-proof { color: #ffe7b0; border-left-color: #f2d898; }
.dash-root .evl li.k-release { border-left-color: var(--esp); } .dash-root .evl li.k-release i { color: var(--esp-hot); }
.dash-root .evl li.k-pin { border-left-color: var(--trim); }
.dash-root .evl li.k-admin i { color: var(--esp-hot); }

/* ---------- ROOMS: the scoreboard as a page ---------- */
.rooms-tbl { width: 100%; border-collapse: collapse; }
.rooms-tbl th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 9px 12px; background: #120a07; border-bottom: 1px solid var(--trim-dim);
  font-family: var(--label); font-weight: 400; font-size: 11px; letter-spacing: .12em; color: var(--trim); white-space: nowrap; }
.rooms-tbl td { padding: 10px 12px; border-bottom: 1px solid #1d130e; font-family: var(--mono); font-size: 13px; vertical-align: middle; }
.rooms-tbl td.code b { font-family: var(--font); font-weight: 400; font-size: 22px; letter-spacing: .04em; color: var(--red); }
.rooms-tbl td.n { font-variant-numeric: tabular-nums; }
.rooms-tbl td.sl { font-family: var(--label); font-size: 13px; color: var(--trim); text-align: center; width: 56px; }
.rooms-tbl td small { opacity: .6; font-size: 12px; }
.rooms-tbl tr.home td.code b { color: #ffe7b0; }
.rooms-tbl tr.stale > td { opacity: .5; }
.rooms-tbl tr:not(.stale):hover > td { background: rgba(200, 164, 90, .04); }
.rooms-tbl .stl { display: inline-block; margin-left: 8px; font-style: normal; font-family: var(--label); font-size: 11px; letter-spacing: .08em; color: var(--warn); border: 1px solid var(--warn); padding: 0 5px; }
.rooms-tbl td.mobs { min-width: 220px; }
.rooms-tbl td.mobs small { display: inline-block; margin: 4px 6px 0 0; }
.dash-root .mob { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 5px 9px 8px; cursor: pointer; text-transform: uppercase;
  background: #120a07; color: var(--hot); border: 1px solid #3a2a1c; font-family: var(--mono); font-size: 12px; }
.dash-root .mob:hover { border-color: var(--trim); color: #f2d898; }
.dash-root .mob code { font-size: 12px; opacity: .65; text-transform: none; }
.dash-root .mob em { font-style: normal; font-family: var(--label); font-size: 11px; letter-spacing: .06em; color: var(--esp-hot); border: 1px dashed var(--esp); padding: 0 4px; }
.dash-root .mob em.pin { color: #ffe7b0; border: 1px solid var(--trim); }
.dash-root .mob > i { width: 8px; height: 8px; }
.dash-root .mob .hpb { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #2a0d07; }
.dash-root .mob .hpb i { display: block; height: 100%; background: var(--red); }

/* ---------- CREATORS ---------- */
.cr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-bottom: 18px; }
.cr-body { padding: 16px; }
.cr-body p { margin: 0 0 10px; font-family: var(--mono); font-size: 13px; line-height: 1.55; opacity: .82; }
.cr-body p.what { font-size: 14px; opacity: 1; color: #ffe7b0; }
.cr-body .db { margin-top: 6px; }
.cr-split { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; padding: 16px; }
.cr-split > div { flex: 1 1 320px; min-width: 0; }
.cr-split h3 { margin: 0 0 6px; font-family: var(--font); font-palette: --dash-gold; font-weight: 400; font-size: 18px; letter-spacing: .05em; color: var(--trim); }
.cr-split p { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.55; opacity: .82; }

/* ---------- right column: THE FIVE (party), EVENTS (chat), BACK TO GAME (Dota's PLAY) ---------- */
.dash-side { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; container: dside / inline-size; }
.dash-five { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.five-list { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.sc5 { --sc: var(--trim); flex: none; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 16%, #0c0706) 0%, #0c0706 60%); border: 1px solid #2a1c14; border-left: 4px solid var(--sc); }
.sc5.me { box-shadow: inset 0 0 0 1px var(--trim-dim); }
.sc5.empty { border-left-style: dashed; background: repeating-linear-gradient(135deg, #0b0705 0 6px, #0e0806 6px 12px); }
.sc5 .pf { position: relative; width: 60px; height: 68px; overflow: hidden; border: 1px solid #000; box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc) 60%, #000);
  background: radial-gradient(ellipse at 50% 90%, #2a1410 0%, #070404 70%); }
.sc5 .pf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transform: scale(1.3); transform-origin: 50% 18%; }
.sc5 .pf .no-asset-tile { position: absolute; inset: 0; width: auto; height: auto; }
.sc5 .pf .sil { position: absolute; inset: 0; display: grid; place-items: center; color: #4a3826; }
.sc5.sleeping .pf img, .sc5.sleeping .pf .no-asset-tile { filter: grayscale(1) brightness(.5); }
.sc5 .info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sc5 h4 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.1;
  letter-spacing: .03em; color: var(--hot); font-palette: --dash-hot; overflow-wrap: anywhere; }
.sc5.me h4 { color: #ffe7b0; font-palette: --dash-cream; }
.sc5.empty h4 { opacity: .6; }
.sc5 .ln { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; font-family: var(--mono); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.sc5 .ln > .ic { color: var(--sc); flex: none; }
.sc5 .ln code { opacity: .65; }
.sc5 .looking { display: inline-flex; align-items: center; gap: 3px; color: var(--esp-hot); }
.sc5 .acts { display: flex; flex-direction: column; gap: 5px; }
.sc5 .acts .db { min-width: 88px; }
@container dside (max-width: 360px) {
  .sc5 { grid-template-columns: 60px minmax(0, 1fr); }
  .sc5 .acts { grid-column: 1 / -1; flex-direction: row; }
  .sc5 .acts .db { flex: 1; min-width: 0; }
}
.dash-events { flex: 1 1 160px; min-height: 120px; display: flex; flex-direction: column; }
.ev-list { flex: 1; min-height: 0; overflow: auto; }

.dash-back { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 84px; padding: 10px 16px; cursor: pointer; color: #ffe7b0;
  background: linear-gradient(180deg, #b02a12 0%, #6a1407 42%, #2c0703 100%); border: 2px solid var(--trim);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #f2d898, inset 0 2px 0 rgba(255, 231, 176, .55), inset 0 -14px 26px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 42, 18, .28), 0 10px 26px rgba(0, 0, 0, .7); }
.dash-back b { display: flex; align-items: center; gap: 12px; font-family: var(--font); font-palette: --dash-cream; font-weight: 400; font-size: 26px; line-height: 1; letter-spacing: .06em;
  text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 110, 60, .6); }
.dash-back .tri { font-family: system-ui, sans-serif; font-size: 20px; color: #f2d898; }
.dash-back small { font-family: var(--mono); font-size: 12px; opacity: .85; }
.dash-back kbd { color: #ffe7b0; }
.dash-back:hover { filter: brightness(1.15); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #f2d898, inset 0 2px 0 rgba(255, 231, 176, .6), inset 0 -14px 26px rgba(0, 0, 0, .4), 0 0 36px rgba(255, 60, 30, .5), 0 10px 26px rgba(0, 0, 0, .7); }
.dash-back:active { transform: translateY(1px); filter: brightness(.95); }

/* ---------- tab rail (inside .topcentre; the top bar is zoomed by --hud, so these are top-bar design px) ----------
   Hangs from the top edge like the seat portraits it replaces; the active tab is crimson-lit with a gold underline. */
.tabs .dash-rail { display: flex; align-items: stretch; gap: 3px; height: 52px; padding: 0 16px 6px; align-self: flex-start;
  background: linear-gradient(180deg, #0d0806, #000); border: 1px solid var(--trim-dim); border-top: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 10px 100%); }
.tabs .dash-rail[hidden] { display: none !important; }
.tabs .dash-rail button { flex: none; min-width: 120px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; cursor: pointer; opacity: 1;
  background: linear-gradient(180deg, #1c120d 0%, #080504 100%); border: 0; border-bottom: 2px solid transparent; box-shadow: inset 0 0 0 1px #2a1c14;
  color: var(--hot); font-family: var(--label); font-size: 12px; letter-spacing: .1em; white-space: nowrap; }
.tabs .dash-rail button .ic { color: var(--trim); flex: none; }
.tabs .dash-rail button:hover { color: #f2d898; box-shadow: inset 0 0 0 1px var(--trim-dim); }
.tabs .dash-rail button.on { color: #ffe7b0; border-bottom-color: var(--trim); text-shadow: 0 0 8px rgba(255, 42, 18, .8);
  background: linear-gradient(180deg, #5c1a0a 0%, #2a0904 60%, #140503 100%); box-shadow: inset 0 0 0 1px var(--red), inset 0 -10px 18px rgba(255, 42, 18, .28), 0 0 12px rgba(255, 42, 18, .25); }
.tabs .dash-rail button.on .ic { color: #ffb199; }

/* ---------- host fix: the timeline re-parented into page('timeline') ----------
   In the HUD it is a zoomed, fixed, centred modal in .r-modal; here it is a static full-width panel (the dashboard's own
   --dz zoom applies, so its zoom resets to 1), its close button goes (BACK TO GAME / Esc leave the dashboard), and its
   type is raised to the dashboard floor. */
.dash-root .timeline { position: static; inset: auto; transform: none; zoom: 1; width: auto; max-width: none; max-height: none; min-height: 0; z-index: auto; }
.dash-root .timeline > .hx .x { display: none; }
.dash-root .timeline > .hx { min-height: 40px; font-size: 12px; }
.dash-root .timeline > .hx b { font-size: 16px; font-palette: --dash-gold; }
.dash-root .timeline > .hx span { font-size: 12px; }
.dash-root .tl-now span { font-size: 11px; }
.dash-root .tl-now small, .dash-root .tl-list small { font-size: 12px; }
.dash-root .tl-now code, .dash-root .tl-list code, .dash-root .tl-past code { font-size: 12px; }
.dash-root .tl-list li { grid-template-columns: 84px 90px minmax(0, 1fr); padding: 7px 12px; }
.dash-root .tl-list li .k { font-size: 11px; }
.dash-root .tl-list li b { font-size: 13px; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.dash-root .tl-past h5 { font-size: 11px; }
.dash-root .tl-past p, .dash-root .tl-past li, .dash-root .tl-hint { font-size: 12px; }
.dash-root .tl-acts { flex-direction: row; flex-wrap: wrap; }
.dash-root .tl-acts button { font-size: 11px; padding: 7px 10px; }
.dash-root .tl-acts button em { font-size: 11px; }