/* =====================================================================
   HOME — the device's "void terminal", on the web (2026-09-23)
   ---------------------------------------------------------------------
   Everything here is scoped to #view-dashboard: the radio / people /
   profile surfaces keep their own look (user requirement — net radio must
   not change visually for anyone). Colours follow the device's term_theme,
   typography is the device's own U8g2 bitmap fonts turned into web fonts
   (tools/build_webfonts.py), so letters are pixel-identical to the glass.
   One font pixel = --px CSS px: 2px on wide screens, 1.5px on phones.
   ===================================================================== */
@font-face { font-family: "X01002 Doom"; src: url("/fonts/x-doom.woff") format("woff"); font-display: block; }
@font-face { font-family: "X01002 Logi"; src: url("/fonts/x-logi.woff") format("woff"); font-display: block; }
@font-face { font-family: "X01002 Seg";  src: url("/fonts/x-seg.woff") format("woff");  font-display: block; }
@font-face { font-family: "X01002 VCR";  src: url("/fonts/x-vcr.woff") format("woff");  font-display: block; }
@font-face { font-family: "X01002 9x15"; src: url("/fonts/x-9x15.woff") format("woff"); font-display: block; }
@font-face { font-family: "X01002 7x13"; src: url("/fonts/x-7x13.woff") format("woff"); font-display: block; }
@font-face { font-family: "X01002 6x13"; src: url("/fonts/x-6x13.woff") format("woff"); font-display: block; }
@font-face { font-family: "X01002 6x12"; src: url("/fonts/x-6x12.woff") format("woff"); font-display: block; }
/* XENO (xeno-web.js) — the device's Inconsolata numerals + the small terminal faces */
@font-face { font-family: "X01002 In21"; src: url("/fonts/x-in21.woff") format("woff"); font-display: block; }
@font-face { font-family: "X01002 In16"; src: url("/fonts/x-in16.woff") format("woff"); font-display: block; }
@font-face { font-family: "X01002 10x20"; src: url("/fonts/x-10x20.woff") format("woff"); font-display: block; }
@font-face { font-family: "X01002 5x7"; src: url("/fonts/x-5x7.woff") format("woff"); font-display: block; }
@font-face { font-family: "X01002 4x6"; src: url("/fonts/x-4x6.woff") format("woff"); font-display: block; }

#view-dashboard.th {
  --px: 2px;
  --glass: #000;
  --dim: #145233; --mid: #34a86a; --fg: #7dffb2; --hi: #dcfff0;
  --glow: rgba(20, 82, 51, .9);
  /* type roles (VCR has no Cyrillic: the browser falls back per glyph to 9x15) */
  --f-big: "X01002 VCR", "X01002 9x15", ui-monospace, monospace;
  --f-head: "X01002 9x15", ui-monospace, monospace;
  --f-body: "X01002 7x13", ui-monospace, monospace;
  --f-data: "X01002 6x13", ui-monospace, monospace;
  --f-label: "X01002 6x12", ui-monospace, monospace;
  color: var(--fg);
  -webkit-font-smoothing: none;
  font-smooth: never;
}
#view-dashboard.th[data-theme="amber"] { --dim: #5a3608; --mid: #b8761a; --fg: #ffb347; --hi: #ffe7c2; --glow: rgba(90, 54, 8, .95); }
#view-dashboard.th[data-theme="void"]  { --dim: #2e2466; --mid: #7a63e6; --fg: #a8d8ff; --hi: #f1ecff; --glow: rgba(46, 36, 102, .95); }
@media (max-width: 560px) { #view-dashboard.th { --px: 1.5px; } }

/* ---- the glass: black, CRT scanlines on top (fx bit 1) ---- */
#view-dashboard .th-screen {
  position: relative; background: var(--glass); border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .06);
  padding: calc(var(--px) * 7) calc(var(--px) * 7) calc(var(--px) * 9);
  overflow: hidden; isolation: isolate;
}
#view-dashboard .th-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent var(--px),
              rgba(0, 0, 0, .26) var(--px), rgba(0, 0, 0, .26) calc(var(--px) * 2));
  opacity: 0; transition: opacity .3s;
}
#view-dashboard.th.fx-scan .th-screen::after { opacity: 1; }
#view-dashboard.th.fx-glow .th-glow { text-shadow: 0 0 calc(var(--px) * 1.5) var(--glow), 0 0 calc(var(--px) * .5) var(--glow); }
/* power-on sweep when Home opens (like the device's wipe) */
#view-dashboard .th-sweep {
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--px) * 2); z-index: 6;
  background: var(--hi); box-shadow: 0 0 12px var(--fg); pointer-events: none; opacity: 0;
}
#view-dashboard .th-screen.booting .th-sweep { animation: th-sweep .55s linear forwards; }
#view-dashboard .th-screen.booting .th-body { animation: th-reveal .55s linear forwards; }
@keyframes th-sweep { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 1; } }
@keyframes th-reveal { 0% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  #view-dashboard .th-screen.booting .th-sweep, #view-dashboard .th-screen.booting .th-body { animation: none; }
}

/* ---- header bar ---- */
#view-dashboard .th-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: calc(var(--px) * 3); margin-bottom: calc(var(--px) * 5);
  background: linear-gradient(to right, var(--dim) 50%, transparent 0) bottom left / calc(var(--px) * 2) var(--px) repeat-x;
  font: calc(var(--px) * 12) / 1 var(--f-label);
}
#view-dashboard .th-logo { color: var(--hi); white-space: nowrap; display: inline-flex; align-items: baseline; }
#view-dashboard .th-logo::before {
  content: ""; width: calc(var(--px) * 9); height: calc(var(--px) * 5); margin-right: calc(var(--px) * 3);
  background: var(--hi); clip-path: polygon(50% 0, 100% 100%, 0 100%); align-self: center;
}
#view-dashboard .th-brand { color: var(--mid); }
#view-dashboard .th-link { display: inline-flex; align-items: center; gap: calc(var(--px) * 5); color: var(--fg); white-space: nowrap; }
#view-dashboard .th-link .th-dim { color: var(--mid); }
#view-dashboard .th-link.lost { color: var(--mid); }
#view-dashboard .th-bars { display: inline-flex; align-items: flex-end; gap: var(--px); height: calc(var(--px) * 8); }
#view-dashboard .th-bars i { width: calc(var(--px) * 2); background: var(--dim); }
#view-dashboard .th-bars i:nth-child(1) { height: 25%; } #view-dashboard .th-bars i:nth-child(2) { height: 50%; }
#view-dashboard .th-bars i:nth-child(3) { height: 75%; } #view-dashboard .th-bars i:nth-child(4) { height: 100%; }
#view-dashboard .th-bars i.on { background: var(--fg); }

/* ---- clock ---- */
#view-dashboard .th-clock {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--px) * 4) calc(var(--px) * 10);
  margin: calc(var(--px) * 3) 0 calc(var(--px) * 9); min-height: calc(var(--px) * 62);
}
#view-dashboard .th-time {
  color: var(--hi); font: calc(var(--px) * 39) / 1 "X01002 Doom", var(--f-big); white-space: nowrap;
  letter-spacing: 0; flex: none;
}
#view-dashboard.th[data-clock="logi"] .th-time { font: calc(var(--px) * 47) / 1 "X01002 Logi", var(--f-big); }
#view-dashboard.th[data-clock="seg"] .th-time { font: calc(var(--px) * 42) / 1 "X01002 Seg", var(--f-big); }
#view-dashboard .th-colon.off { visibility: hidden; }
#view-dashboard .th-daycol { flex: 1; min-width: calc(var(--px) * 60); display: flex; flex-direction: column; gap: calc(var(--px) * 3); }
#view-dashboard .th-day { color: var(--fg); font: calc(var(--px) * 17) / 1 var(--f-big); white-space: nowrap; overflow: hidden; text-overflow: clip; }
#view-dashboard.th[data-lang="uk"] .th-day { font: calc(var(--px) * 15) / 1 var(--f-head); }
#view-dashboard .th-date { color: var(--fg); font: calc(var(--px) * 13) / 1 var(--f-body); }
#view-dashboard .th-secline { display: flex; align-items: center; gap: calc(var(--px) * 4); margin-top: calc(var(--px) * 2); }
#view-dashboard .th-secbar { position: relative; flex: 1; height: var(--px); background: var(--dim); }
#view-dashboard .th-secbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--fg); }
#view-dashboard .th-secbar b { position: absolute; top: calc(var(--px) * -1); width: var(--px); height: var(--px); background: var(--hi); }
#view-dashboard .th-secs { color: var(--mid); font: calc(var(--px) * 12) / 1 var(--f-label); }

/* ---- panels: dim frame, label cut into the top edge, HUD corner brackets ---- */
#view-dashboard .th-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--px) * 9) calc(var(--px) * 5); }
#view-dashboard .th-wide { grid-column: 1 / -1; }
@media (max-width: 420px) { #view-dashboard .th-grid { grid-template-columns: 1fr; } }
#view-dashboard .th-panel {
  position: relative; min-width: 0;
  box-shadow: inset 0 0 0 var(--px) var(--dim);
  padding: calc(var(--px) * 11) calc(var(--px) * 7) calc(var(--px) * 7);
}
#view-dashboard .th-panel::before {
  --c: calc(var(--px) * 4);
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--mid), var(--mid)) top left / var(--c) var(--px),
    linear-gradient(var(--mid), var(--mid)) top left / var(--px) var(--c),
    linear-gradient(var(--mid), var(--mid)) top right / var(--c) var(--px),
    linear-gradient(var(--mid), var(--mid)) top right / var(--px) var(--c),
    linear-gradient(var(--mid), var(--mid)) bottom left / var(--c) var(--px),
    linear-gradient(var(--mid), var(--mid)) bottom left / var(--px) var(--c),
    linear-gradient(var(--mid), var(--mid)) bottom right / var(--c) var(--px),
    linear-gradient(var(--mid), var(--mid)) bottom right / var(--px) var(--c);
  background-repeat: no-repeat;
}
#view-dashboard .th-lbl, #view-dashboard .th-chip {
  position: absolute; top: 0; transform: translateY(-50%); z-index: 1;
  background: var(--glass); padding: 0 calc(var(--px) * 2); margin: 0; font-weight: normal; letter-spacing: 0;
  font: calc(var(--px) * 12) / 1 var(--f-label); color: var(--mid); white-space: nowrap;
  max-width: calc(100% - var(--px) * 14); overflow: hidden;
}
#view-dashboard .th-lbl { left: calc(var(--px) * 5); }
/* label + chip on one edge row: the label yields (clips), the chip never overlaps it */
#view-dashboard .th-edge {
  position: absolute; top: 0; left: calc(var(--px) * 5); right: calc(var(--px) * 5); z-index: 1;
  transform: translateY(-50%); display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--px) * 4); pointer-events: none;
}
#view-dashboard .th-edge .th-lbl, #view-dashboard .th-edge .th-chip { position: static; transform: none; max-width: none; }
#view-dashboard .th-edge .th-lbl { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: clip; }
#view-dashboard .th-edge .th-chip { flex: none; }
#view-dashboard .th-chip { right: calc(var(--px) * 5); color: var(--fg); display: inline-flex; align-items: center; gap: calc(var(--px) * 3); }
#view-dashboard .th-chip .dot { width: calc(var(--px) * 4); height: calc(var(--px) * 4); border-radius: 50%; background: var(--fg); }
#view-dashboard .th-chip.live .dot { animation: th-breathe 2s ease-in-out infinite; }
#view-dashboard .th-chip.buffering .dot { animation: th-blink .8s steps(1) infinite; }
#view-dashboard .th-chip.idle { color: var(--dim); }
#view-dashboard .th-chip.idle .dot { display: none; }
@keyframes th-breathe { 0%, 100% { background: var(--mid); } 50% { background: var(--hi); } }
@keyframes th-blink { 50% { background: var(--dim); } }

/* pixel canvases stay crisp at any scale */
#view-dashboard canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

/* ---- outside / room ---- */
#view-dashboard .th-wxrow { display: flex; align-items: center; gap: calc(var(--px) * 6); }
#view-dashboard .th-wxicon { width: calc(var(--px) * 45); height: calc(var(--px) * 36); flex: none; }
#view-dashboard .th-temp { color: var(--hi); font: calc(var(--px) * 34) / 1 var(--f-big); white-space: nowrap; }
#view-dashboard .th-feels { color: var(--fg); font: calc(var(--px) * 13) / 1 var(--f-data); margin-top: calc(var(--px) * 3); }
#view-dashboard .th-desc { color: var(--fg); font: calc(var(--px) * 13) / 1.15 var(--f-data); margin-top: calc(var(--px) * 7); }
#view-dashboard .th-stats { color: var(--mid); font: calc(var(--px) * 13) / 1.15 var(--f-data); margin-top: calc(var(--px) * 4); }
#view-dashboard .th-kv { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 4) calc(var(--px) * 10); margin-top: calc(var(--px) * 7); }
#view-dashboard .th-kv div { display: flex; flex-direction: column; gap: calc(var(--px) * 2); }
#view-dashboard .th-kv span { color: var(--mid); font: calc(var(--px) * 12) / 1 var(--f-label); }
#view-dashboard .th-kv b { color: var(--fg); font: calc(var(--px) * 13) / 1 var(--f-data); font-weight: normal; }
#view-dashboard .th-hot { color: var(--hi) !important; }
#view-dashboard .th-muted { color: var(--mid); font: calc(var(--px) * 13) / 1.2 var(--f-data); }

/* ---- crew radar ---- */
#view-dashboard .th-radarwrap { display: flex; flex-direction: column; align-items: center; gap: calc(var(--px) * 5); }
#view-dashboard .th-radar { width: calc(var(--px) * 90); height: calc(var(--px) * 90); }
#view-dashboard .th-crew { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: calc(var(--px) * 3); }
#view-dashboard .th-crew li { display: flex; gap: calc(var(--px) * 4); font: calc(var(--px) * 13) / 1.1 var(--f-data); color: var(--mid); min-width: 0; }
#view-dashboard .th-crew li b { color: var(--fg); font-weight: normal; flex: none; }
#view-dashboard .th-crew li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#view-dashboard .th-crew li.air b::before { content: "+ "; color: var(--hi); }
#view-dashboard .th-counts { display: flex; justify-content: space-between; width: 100%; font: calc(var(--px) * 12) / 1 var(--f-label); color: var(--mid); }
#view-dashboard .th-counts .on { color: var(--fg); }

/* ---- device audio ---- */
#view-dashboard .th-station { color: var(--hi); font: calc(var(--px) * 17) / 1.05 var(--f-big); overflow-wrap: anywhere; }
#view-dashboard .th-title { color: var(--fg); font: calc(var(--px) * 13) / 1.2 var(--f-body); margin-top: calc(var(--px) * 5); overflow-wrap: anywhere; }
#view-dashboard .th-vu { width: 100%; height: calc(var(--px) * 20); margin-top: calc(var(--px) * 7); }

/* ---- companion ---- */
#view-dashboard .th-comp { display: flex; gap: calc(var(--px) * 7); align-items: flex-start; }
#view-dashboard .th-alien { width: calc(var(--px) * 64); height: calc(var(--px) * 64); flex: none; }
#view-dashboard .th-log {
  flex: 1; min-width: 0; min-height: calc(var(--px) * 64); padding-left: calc(var(--px) * 6);
  background: linear-gradient(var(--dim) 50%, transparent 0) left top / var(--px) calc(var(--px) * 2) repeat-y;
  display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--px) * 2);
  font: calc(var(--px) * 13) / 1 var(--f-body);
}
#view-dashboard .th-log div { color: var(--mid); white-space: nowrap; overflow: hidden; }
#view-dashboard .th-log div::before { content: "> "; color: var(--mid); }
#view-dashboard .th-log div.cur { color: var(--hi); }
#view-dashboard .th-log div.cur::after {
  content: ""; display: inline-block; width: calc(var(--px) * 5); height: calc(var(--px) * 10);
  background: var(--fg); margin-left: var(--px); vertical-align: calc(var(--px) * -1);
  animation: th-cursor 0.9s steps(1) infinite;
}
@keyframes th-cursor { 50% { opacity: 0; } }

/* ---- screen remote: the device's own screens as terminal keys ---- */
#view-dashboard .th-keys { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 4); }
#view-dashboard .th-key {
  font: calc(var(--px) * 13) / 1 var(--f-data); color: var(--mid); background: var(--glass);
  border: var(--px) solid var(--dim); border-radius: 0; cursor: pointer;
  padding: calc(var(--px) * 4) calc(var(--px) * 6);
}
#view-dashboard .th-key:hover { color: var(--fg); border-color: var(--mid); }
#view-dashboard .th-key.cur { color: var(--glass); background: var(--fg); border-color: var(--fg); }
#view-dashboard .th-key:focus-visible { outline: var(--px) solid var(--hi); outline-offset: var(--px); }
#view-dashboard .th-key:disabled { opacity: .5; cursor: default; }

#view-dashboard .th-foot { margin-top: calc(var(--px) * 7); text-align: right; color: var(--dim); font: calc(var(--px) * 12) / 1 var(--f-label); }

/* ---- XENO look (Settings → SCREEN → WEB → XENO): the terminal hides, one crisp pixel canvas shows ---- */
#view-dashboard .xeno-web { display: none; }
#view-dashboard.xeno-on .th-screen { display: none; }
#view-dashboard.xeno-on .xeno-web { display: flex; justify-content: center; padding: 8px 0 24px; }
.xeno-web canvas {
  width: min(100%, 720px, calc((100dvh - 150px) * 0.75)); height: auto; aspect-ratio: 3 / 4;
  image-rendering: pixelated; image-rendering: crisp-edges; display: block; border-radius: 6px;
}