/* Sized in vw/vh so it reads the same at any projector resolution; base unit ~ 1.6vh. */
:root {
  --bg: #0e0e0d; --surface: #1a1a19; --line: #383835;
  --text: #ffffff; --text-2: #c3c2b7; --muted: #8a8980;
  --accent: #3987e5;
  --good: #0ca30c; --warn: #fab219; --serious: #ec835a; --bad: #d03b3b;
  --gap: 1.2vh; --pad: 2.2vh; --fs: 2.6vh;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); overflow: hidden; cursor: none;
  font: 400 var(--fs)/1.35 "DejaVu Sans", "Noto Sans", sans-serif; }
body { display: flex; flex-direction: column; padding: var(--gap); gap: var(--gap); }

#bar { display: flex; align-items: baseline; gap: 1.5vh; padding: 0 0.6vh; font-size: 3vh; color: var(--text-2); }
#bar.off { display: none; }
#title { flex: 1; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hclock { font-variant-numeric: tabular-nums; }
#conn { width: 1.2vh; height: 1.2vh; border-radius: 50%; background: var(--bad); align-self: center; }
#conn.up { background: transparent; }

#stage { flex: 1; min-height: 0; display: grid; gap: var(--gap); }
.panel { background: var(--surface); border-radius: 1vh; padding: var(--pad); min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden; }
.panel > h2 { font-size: min(3vh, 1.8vw); white-space: nowrap; overflow: hidden; font-weight: 700; margin-bottom: 1vh; color: var(--text); flex: none; }
.body { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.blank { background: transparent; }
.err { color: var(--serious); }

/* markdown */
.md h1 { font-size: 4.6vh; margin: 0 0 1.2vh; } .md h2 { font-size: 3.6vh; margin: 1.4vh 0 0.8vh; }
.md h3 { font-size: 3vh; margin: 1.2vh 0 0.6vh; color: var(--text-2); }
.md p { margin: 0 0 1vh; } .md ul, .md ol { margin: 0 0 1vh 3.2vh; } .md li { margin: 0.4vh 0; }
.md code { background: #2a2a28; padding: 0 0.6vh; border-radius: 0.4vh; font-family: "DejaVu Sans Mono", monospace; font-size: 0.9em; }
.md strong { color: var(--text); } .md em { color: var(--text-2); }
.md li.task { list-style: none; margin-left: -3vh; } .md li.task.done { color: var(--muted); text-decoration: line-through; }

/* checklist */
.check { list-style: none; display: flex; flex-direction: column; gap: 1.1vh; }
.check li { display: flex; gap: 1.4vh; align-items: baseline; }
.box { flex: none; width: 2.6vh; height: 2.6vh; border: 0.35vh solid var(--text-2); border-radius: 0.5vh; position: relative; top: 0.35vh; }
.check li.done { color: var(--muted); } .check li.done .txt { text-decoration: line-through; }
.check li.done .box { background: var(--good); border-color: var(--good); }
.check li.done .box::after { content: ""; position: absolute; left: 0.6vh; top: 0.1vh; width: 0.7vh; height: 1.3vh; border: solid #fff; border-width: 0 0.35vh 0.35vh 0; transform: rotate(45deg); }
.check li.now .txt { color: var(--warn); font-weight: 700; }
.note { color: var(--muted); font-size: 0.8em; margin-left: 1vh; }
.progress { color: var(--text-2); font-size: 2.4vh; margin-left: auto; font-weight: 400; }
.panel > h2 { display: flex; align-items: baseline; gap: 1vh; }

/* timeline */
.tl { list-style: none; position: relative; padding-left: 4vh; display: flex; flex-direction: column; gap: 1.6vh; }
.tl::before { content: ""; position: absolute; left: 1.1vh; top: 0.6vh; bottom: 0.6vh; width: 0.3vh; background: var(--line); }
.tl li { position: relative; }
.tl li::before { content: ""; position: absolute; left: -3.65vh; top: 0.55vh; width: 2vh; height: 2vh; border-radius: 50%; background: var(--surface); border: 0.35vh solid var(--text-2); box-sizing: border-box; }
.tl li.done { color: var(--muted); } .tl li.done::before { background: var(--muted); border-color: var(--muted); }
.tl li.now::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 0.6vh #3987e540; }
.tl li.now .what { font-weight: 700; }
.tl .when { display: block; font-size: 2.1vh; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tl li.done .when { color: var(--muted); }

/* clock */
.clock { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.clock .t { font-size: 18vh; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.clock .d { font-size: 4vh; color: var(--text-2); margin-top: 2vh; }
.clock .l { font-size: 3vh; color: var(--muted); margin-top: 1vh; }

/* big */
.big { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
.big .t { font-size: 9vh; font-weight: 700; line-height: 1.1; } .big .s { font-size: 4vh; color: var(--text-2); margin-top: 2vh; }

/* status tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(22vh, 1fr)); gap: var(--gap); }
.tile { background: #222220; border-radius: 0.8vh; padding: 1.6vh; border-left: 0.8vh solid var(--line); }
.tile .lab { color: var(--text-2); font-size: 2.2vh; display: flex; gap: 0.8vh; align-items: center; }
.tile .val { font-size: 5vh; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tile .nt { color: var(--muted); font-size: 2vh; }
.tile.ok { border-left-color: var(--good); } .tile.warn { border-left-color: var(--warn); }
.tile.bad { border-left-color: var(--bad); } .tile.info { border-left-color: var(--accent); }
.ico { font-weight: 700; } .ok .ico { color: var(--good); } .warn .ico { color: var(--warn); } .bad .ico { color: var(--bad); } .info .ico { color: var(--accent); }

/* table */
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th { text-align: left; color: var(--text-2); font-weight: 400; font-size: 2.2vh; border-bottom: 0.2vh solid var(--line); padding: 0.6vh 1.2vh; }
td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40ch; padding: 0.8vh 1.2vh; border-bottom: 0.1vh solid #2a2a28; } td.n, th.n { text-align: right; }

/* image */
.img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cap { color: var(--text-2); font-size: 2.2vh; margin-top: 1vh; flex: none; }

/* chart */
svg.chart { width: 100%; height: 100%; display: block; overflow: visible; }
svg.chart text { fill: var(--text-2); font-size: 2.2vh; font-family: inherit; }
svg.chart .grid { stroke: #2c2c2a; stroke-width: 1; }
svg.chart .axis { stroke: var(--line); stroke-width: 1.5; }
svg.chart .val { fill: var(--text); font-weight: 700; }
.legend { display: flex; gap: 0.6vh 2vh; flex-wrap: wrap; color: var(--text-2); font-size: 1.8vh; margin-bottom: 1vh; flex: none; }
.legend i { display: inline-block; width: 1.8vh; height: 1.8vh; border-radius: 0.4vh; margin-right: 0.8vh; vertical-align: -0.2vh; }

/* shrink-to-fit wrapper (app.js fitPanels) */
.fit { transform-origin: 0 0; }

/* council */
svg.hemi { display: block; height: 16vh; width: auto; margin: 0 auto 1vh; }
svg.hemi .hemi-n { fill: var(--text); font-size: 22px; font-weight: 700; font-family: inherit; }
.council-names { columns: 4; column-gap: 2vh; font-size: 1.9vh; line-height: 1.35; }
.chead { color: var(--text-2); font-weight: 700; margin-top: 0.6vh; break-after: avoid; white-space: nowrap; }
.chead i { display: inline-block; width: 1.4vh; height: 1.4vh; border-radius: 0.3vh; margin-right: 0.6vh; }
.cname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cname.pref { color: #f0c24b; } .cname.watch { color: #fff; font-weight: 700; text-decoration: underline; }

/* map */
svg.map { display: block; width: 100%; height: 100%; }
svg.map path { fill: #2a2a28; stroke: #111110; stroke-width: 1.5; stroke-linejoin: round; }
svg.map path.empty { fill: #2a2a28; }
svg.map path.mark { fill: none; stroke: #fff; stroke-width: 4; }
svg.map .map-label { fill: #fff; font-size: 34px; font-weight: 700; paint-order: stroke; stroke: #000; stroke-width: 6px; font-family: inherit; }
.map-legend { position: absolute; left: 0; top: 0; font-size: 1.7vh; line-height: 1.4; background: rgba(26, 26, 25, .75); padding: .4vh .8vh; border-radius: 6px; }
.map-legend i { display: inline-block; width: 1.2vh; height: 1.2vh; margin-right: .6vh; border-radius: 2px; }

/* status log */
.slog { margin-top: 1vh; font-size: 1.75vh; line-height: 1.4; flex: none; }
.slog-row { display: flex; gap: 1vh; white-space: nowrap; min-width: 0; }
.slog { width: 0; min-width: 100%; }
.slog-t { color: var(--muted, #8a8a86); font-variant-numeric: tabular-nums; }
.slog-x { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.slog-tag { font-weight: 700; }
.tile .val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#snd { font-size: 2.2vh; align-self: center; cursor: pointer; opacity: .6; }
svg.chart tspan.note { fill: var(--muted); font-weight: 400; }
.council-names.compact { columns: 2; font-size: 3vh; line-height: 1.6; }
.council-names.compact .chead { font-size: inherit; }
svg.hemi.big { height: 24vh; }
svg.map .map-label.small { font-size: 22px; stroke-width: 4px; }