/* UVSentry platform prototypes. One shell, three treatments per tier:
   Report (editorial verdict and ruled lists), Console (ThingsBoard style widget grid),
   Hybrid (verdict up top, working widgets below).
   Brand: white, black and space. Deep sapphire is the one accent. Red and amber only for status. */
:root {
  --stage: #e9ebef;
  --bg: #ffffff; --bg2: #f5f6f8; --canvas: #eef0f3; --card: #ffffff;
  --ink: #0a0a0a; --grey: #5c5c5c; --muted: #767676; --line: #dddddd; --line2: #e9ebef;
  --sapphire: #14418f; --tint: #e3ecfa;
  --critical: #c02b0a; --critical-tint: #fbe9e5;
  --attention: #b45309; --attention-tint: #fcf0e2;
  --offline: #5c5c5c; --offline-tint: #ececec;
  --working: #14418f; --working-tint: #e3ecfa;
  --c2: #0a0a0a; --c3: #767676; --c4: #bdbdbd;
  --nav: #0a0a0a; --nav-fg: #f2f2f2; --nav-muted: #9a9ca3; --nav-active: #14418f;
  --font: "Swiss 721 BT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --max: 1320px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --stage: #050506; --bg: #0b0b0d; --bg2: #141417; --canvas: #101114; --card: #17181c;
  --ink: #f2f2f2; --grey: #a9a9ae; --muted: #8e8e93; --line: #2b2b30; --line2: #222328;
  --sapphire: #7fa8f5; --tint: #18294a;
  --critical: #ff7a5c; --critical-tint: #3a1a14; --attention: #f2a65a; --attention-tint: #3a2a14;
  --offline: #a9a9ae; --offline-tint: #26262a; --working: #7fa8f5; --working-tint: #18294a;
  --c2: #f2f2f2; --c3: #8e8e93; --c4: #4a4a50;
  --nav: #050506; --nav-fg: #f2f2f2; --nav-muted: #8e8e93; --nav-active: #24467f;
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --stage: #050506; --bg: #0b0b0d; --bg2: #141417; --canvas: #101114; --card: #17181c;
  --ink: #f2f2f2; --grey: #a9a9ae; --muted: #8e8e93; --line: #2b2b30; --line2: #222328;
  --sapphire: #7fa8f5; --tint: #18294a;
  --critical: #ff7a5c; --critical-tint: #3a1a14; --attention: #f2a65a; --attention-tint: #3a2a14;
  --offline: #a9a9ae; --offline-tint: #26262a; --working: #7fa8f5; --working-tint: #18294a;
  --c2: #f2f2f2; --c3: #8e8e93; --c4: #4a4a50;
  --nav: #050506; --nav-fg: #f2f2f2; --nav-muted: #8e8e93; --nav-active: #24467f;
  color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sapphire); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: block; } }
:root[data-theme="dark"] .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: block; }
.s-critical { color: var(--critical); } .s-attention { color: var(--attention); } .s-offline { color: var(--offline); } .s-working { color: var(--working); }
.ico { width: 18px; height: 18px; flex: none; vertical-align: -3px; }

/* Prototype bar */
.proto { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 15; background: var(--bg); border-bottom: 1px solid var(--line);
  padding-block: 8px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 16; background: var(--bg); }
.proto-logo { display: flex; } .proto-logo img { height: 24px; width: auto; }
.proto-tier { font-weight: 600; font-size: 14px; padding-left: 16px; border-left: 1px solid var(--line); }
.proto-tier span { color: var(--grey); font-weight: 400; }
.options { display: inline-flex; border: 1px solid var(--ink); margin-left: auto; }
.options button { min-height: 36px; padding: 0 14px; border: 0; background: none; cursor: pointer; font-size: 14px; white-space: nowrap; }
.options button + button { border-left: 1px solid var(--ink); }
.options button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.options b { font-weight: 700; margin-right: 6px; }
.proto-note { width: 100%; font-size: 13px; color: var(--grey); }
.proto-note strong { color: var(--ink); font-weight: 600; }
@container screen (max-width: 760px) { .options { margin-left: 0; width: 100%; } .options button { flex: 1; padding: 0 6px; } .options b { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--ink); background: var(--bg); cursor: pointer; font-weight: 600; font-size: 14px; border-radius: 2px; }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--sapphire); border-color: var(--sapphire); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { min-height: 32px; padding: 0 10px; font-size: 13px; }
.link { border: 0; background: none; padding: 0; color: var(--sapphire); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }

/* Status chips */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 3px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip .ico { width: 14px; height: 14px; vertical-align: 0; }
.chip-critical { background: var(--critical-tint); color: var(--critical); }
.chip-attention { background: var(--attention-tint); color: var(--attention); }
.chip-offline { background: var(--offline-tint); color: var(--offline); }
.chip-working { background: var(--working-tint); color: var(--working); }
.chip-plain { background: var(--bg2); color: var(--grey); border: 1px solid var(--line); }

/* Charts */
.chart { margin: 0; }
.chart-label { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--grey); margin-bottom: 4px; }
.chart svg { display: block; overflow: visible; }
.chart .axis { stroke: var(--ink); stroke-width: 1; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--grey); font-size: 11px; font-family: var(--font); }
.chart .line { fill: none; stroke: var(--c2); stroke-width: 1.6; stroke-linejoin: round; }
.chart .line.accent { stroke: var(--sapphire); }
.chart .area { fill: var(--tint); stroke: none; }
.chart .dot { fill: var(--c2); }
.chart .bar { fill: var(--sapphire); }
.chart .bar.muted { fill: var(--c4); }
.chart .bar.bad { fill: var(--critical); }
.chart .on { fill: var(--sapphire); }
.chart .track { fill: var(--bg2); }
.chart .ref { stroke: var(--critical); stroke-dasharray: 4 3; stroke-width: 1; }
.chart .reftext { fill: var(--critical); font-size: 11px; }
.empty { color: var(--grey); font-size: 14px; padding: 12px 0; margin: 0; }
.chart-tip { position: fixed; z-index: 40; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 12px; padding: 4px 8px; border-radius: 2px; white-space: nowrap; }

/* Drawer */
.scrim { position: fixed; inset: 0; background: rgba(10,10,10,.22); z-index: 20; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(560px, 100vw); background: var(--bg); border-left: 1px solid var(--ink);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform 340ms var(--ease);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px); }
.drawer.is-open { transform: none; }
.drawer-head { padding: 12px 24px 18px; border-bottom: 1px solid var(--line); }
.drawer-close { display: block; margin-left: auto; min-height: 40px; border: 0; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; font-size: 14px; }
.drawer-title { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; outline: none; }
.drawer-place { margin: 4px 0 0; color: var(--grey); }
.drawer-status { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.drawer-body { overflow-y: auto; padding: 4px 24px 48px; }
.d-sec { margin: 28px 0 6px; font-size: 15px; font-weight: 700; }
.facts { margin: 0; display: grid; grid-template-columns: 1fr auto; }
.facts dt, .facts dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts dt { color: var(--grey); }
.facts dd { text-align: right; font-weight: 600; padding-left: 12px; }
.na { color: var(--muted); font-weight: 400; }
.life-bar { height: 6px; background: var(--bg2); border: 1px solid var(--line); position: relative; margin-top: 12px; }
.life-fill { position: absolute; inset: 0 auto 0 0; background: var(--sapphire); }
.life-fill.near { background: var(--attention); }
.life-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--grey); margin-top: 4px; }
.range { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ink); margin: 4px 0 12px; }
.range button { min-height: 34px; padding: 0 12px; border: 0; background: none; cursor: pointer; font-size: 13px; }
.range button + button { border-left: 1px solid var(--ink); }
.range button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.d-charts .chart { margin-bottom: 14px; }
.alarms { list-style: none; margin: 0; padding: 0; }
.alarm { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.alarm-type { font-weight: 700; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.alarm-meta { grid-column: 1; font-size: 13px; color: var(--grey); }
.alarm .btn, .alarm-done { grid-row: span 2; }
.alarm-done { font-size: 13px; color: var(--grey); max-width: 18ch; text-align: right; }
.trail { grid-column: 1 / -1; list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); font-size: 13px; }
.trail li { padding: 2px 0; color: var(--grey); }
.trail li strong { color: var(--ink); font-weight: 600; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 16px; font-size: 14px; max-width: calc(100vw - 32px); border-radius: 2px; }

.foot { max-width: var(--max); margin: 0 auto; padding-block: 24px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); color: var(--grey); font-size: 13px; }
.foot p { margin: 0 0 6px; max-width: 80ch; }

/* ===== Option A: Report ===== */
.rp { max-width: var(--max); margin: 0 auto; padding-block: clamp(32px, 6vw, 72px) 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.verdict { margin: 0; max-width: 20ch; font-size: clamp(34px, 5.8vw, 68px); line-height: 1.03; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
.verdict em { font-style: normal; color: var(--sapphire); }
.verdict .v-critical { color: var(--critical); } .verdict .v-attention { color: var(--attention); }
.verdict-note { margin: 16px 0 0; color: var(--grey); font-size: 17px; max-width: 62ch; }
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(28px, 4vw, 48px); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.count { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; padding: 14px 14px 16px 0; border: 0; border-right: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.count + .count { padding-left: 14px; } .count:last-child { border-right: 0; }
.count:hover { background: var(--bg2); } .count[aria-pressed="true"] { background: var(--tint); }
.count-num { font-size: clamp(30px, 4vw, 44px); line-height: 1; font-weight: 700; letter-spacing: -0.03em; grid-row: span 2; }
.count-label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.count-sub { font-size: 12px; color: var(--grey); }
.count.zero, .count.zero .count-label { color: var(--muted); }
.rp-sec { margin-top: clamp(48px, 7vw, 80px); }
.rp-band { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 16px 14px; background: var(--ink); color: var(--bg); }
.rp-band h2 { margin: 0; font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -0.02em; line-height: 1.1; }
.rp-band span { font-size: 13px; opacity: .75; }
.rp-h3 { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 32px 0 0; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.rp-h3 h3 { margin: 0; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.015em; }
.rp-h3 span { margin-left: auto; font-size: 13px; color: var(--grey); }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: block; width: 100%; padding: 12px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.row:hover { background: var(--bg2); }
.row-line { display: flex; align-items: baseline; gap: 12px; }
.row-name { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.row-leader { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--c4); transform: translateY(-4px); }
.row-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.row-sub { display: flex; justify-content: space-between; gap: 16px; margin-top: 2px; font-size: 14px; color: var(--grey); }
.row.static { cursor: default; } .row.static:hover { background: none; }
.folded { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.folded b { font-weight: 600; }
.folded span { color: var(--grey); font-size: 14px; }
.rp-lede { color: var(--grey); max-width: 66ch; margin: 12px 0 0; }
@container screen (max-width: 640px) {
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .count { grid-template-columns: minmax(0, 1fr); } .count-num { grid-row: auto; margin-bottom: 6px; } .count-label { flex-wrap: wrap; }
  .count:nth-child(2) { border-right: 0; } .count:nth-child(3) { padding-left: 0; } .count:nth-child(n+3) { border-top: 1px solid var(--line); }
  .row-line { flex-wrap: wrap; gap: 2px 12px; } .row-status { order: -1; flex-basis: 100%; } .row-leader { display: none; }
  .row-sub { flex-direction: column; gap: 0; }
}

/* ===== Option B: Console (ThingsBoard style) ===== */
.cn { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 60px); background: var(--canvas); }
.cn-nav { background: var(--nav); color: var(--nav-fg); padding: 16px 0; }
.cn-nav h2 { margin: 0 16px 14px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--nav-muted); font-weight: 600; }
.cn-nav ul { list-style: none; margin: 0; padding: 0; }
.cn-nav li { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 14px; color: var(--nav-muted); }
.cn-nav li.on { background: var(--nav-active); color: #fff; }
.cn-nav li .ico { width: 18px; height: 18px; }
.cn-nav .cn-badge { margin-left: auto; background: var(--critical); color: #fff; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 9px; }
.cn-main { min-width: 0; padding: 16px; padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.cn-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--grey); margin-bottom: 12px; }
.cn-crumbs b { color: var(--ink); font-weight: 600; }
.cn-crumbs .cn-sp { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cn-select { min-height: 32px; border: 1px solid var(--line); background: var(--card); padding: 0 8px; font-size: 13px; border-radius: 2px; }
.cn-headline { background: var(--card); border: 1px solid var(--line2); border-left: 4px solid var(--sapphire); padding: 12px 16px; margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.cn-headline.bad { border-left-color: var(--critical); } .cn-headline.warn { border-left-color: var(--attention); }
.cn-headline strong { font-size: 20px; letter-spacing: -0.01em; }
.cn-headline span { color: var(--grey); font-size: 14px; }
.cn-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.w { background: var(--card); border: 1px solid var(--line2); border-radius: 3px; min-width: 0; display: flex; flex-direction: column; }
.w-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line2); }
.w-head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.w-tools { margin-left: auto; display: flex; gap: 2px; color: var(--muted); }
.w-tools span { display: inline-flex; padding: 2px; }
.w-tools .ico { width: 16px; height: 16px; }
.w-body { padding: 12px 14px; min-width: 0; flex: 1; }
.w-body.flush { padding: 0; }
.span3 { grid-column: span 3; } .span4 { grid-column: span 4; } .span5 { grid-column: span 5; } .span6 { grid-column: span 6; } .span7 { grid-column: span 7; } .span8 { grid-column: span 8; } .span12 { grid-column: span 12; }
@container screen (max-width: 1100px) { .span3 { grid-column: span 6; } .span4, .span5, .span7, .span8 { grid-column: span 12; } .span6 { grid-column: span 12; } }
@container screen (max-width: 860px) { .cn { grid-template-columns: 1fr; } .cn-nav { display: none; } .cn-main { padding-left: max(16px, env(safe-area-inset-left, 0px)); } }
@container screen (max-width: 520px) { .span3 { grid-column: span 12; } }
.kpi { display: flex; align-items: center; gap: 12px; }
.kpi-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.kpi-ico .ico { width: 20px; height: 20px; }
.kpi-num { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.kpi-lab { font-size: 13px; color: var(--grey); }
.kpi-btn { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; padding: 0; }
.kpi-btn[aria-pressed="true"] .kpi-num { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 600; color: var(--grey); font-size: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--card); position: sticky; top: 0; }
.tbl td { padding: 8px 12px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.tbl tbody tr.click { cursor: pointer; } .tbl tbody tr.click:hover { background: var(--bg2); }
.tbl .num { text-align: right; }
.tbl-scroll { max-height: 360px; overflow: auto; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 4px; }
.tile { aspect-ratio: 1; border: 0; border-radius: 2px; cursor: pointer; padding: 0; max-width: 100%; display: grid; place-items: center; }
.tile .ico { width: 14px; height: 14px; }
.tile.t-working { background: var(--working-tint); color: var(--working); }
.tile.t-attention { background: var(--attention); color: #fff; }
.tile.t-critical { background: var(--critical); color: #fff; }
.tile.t-offline { background: var(--offline); color: #fff; }
.tile-group { margin-bottom: 10px; }
.tile-group h4 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--grey); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--grey); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut-wrap ul { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.donut-wrap li { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
.donut-wrap li i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.gauge-num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-top: -8px; }
.gauge-lab { text-align: center; font-size: 12px; color: var(--grey); }

/* ===== Option C: Hybrid ===== */
.hy { max-width: var(--max); margin: 0 auto; padding-block: clamp(24px, 4vw, 44px) 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.hy-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 40px; align-items: end; padding-bottom: 24px; border-bottom: 2px solid var(--ink); }
.hy-verdict { margin: 0; font-size: clamp(28px, 4vw, 46px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.hy-verdict em { font-style: normal; color: var(--sapphire); }
.hy-verdict .v-critical { color: var(--critical); } .hy-verdict .v-attention { color: var(--attention); }
.hy-note { margin: 10px 0 0; color: var(--grey); max-width: 58ch; }
.hy-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hy-kpi { border: 1px solid var(--line); background: var(--bg); padding: 10px 12px; text-align: left; cursor: pointer; border-top: 3px solid var(--line); }
.hy-kpi[data-s="critical"] { border-top-color: var(--critical); } .hy-kpi[data-s="attention"] { border-top-color: var(--attention); }
.hy-kpi[data-s="offline"] { border-top-color: var(--offline); } .hy-kpi[data-s="working"] { border-top-color: var(--working); }
.hy-kpi[aria-pressed="true"] { background: var(--tint); }
.hy-kpi.zero { color: var(--muted); }
.hy-kpi b { display: block; font-size: 28px; line-height: 1.05; letter-spacing: -0.02em; }
.hy-kpi span { font-size: 12px; color: var(--grey); display: flex; align-items: center; gap: 4px; }
.hy-kpi.static { cursor: default; }
.hy-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; margin-top: 28px; }
.hy-panel { min-width: 0; }
.hy-panel + .hy-panel { }
.hy-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
.hy-h h2 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.hy-h span { margin-left: auto; font-size: 13px; color: var(--grey); }
.hy-stack > * + * { margin-top: 32px; }
.hy-ward { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line2); }
.hy-ward-name { font-size: 14px; font-weight: 600; }
.hy-ward-name small { display: block; font-weight: 400; color: var(--grey); font-size: 12px; }
.hy-ward .tiles { grid-template-columns: repeat(auto-fill, 28px); }
.hy-bld { margin: 18px 0 2px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--grey); }
.act { list-style: none; margin: 0; padding: 0; }
.act li > button { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; width: 100%; text-align: left; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; }
.act li > button:hover { background: var(--bg2); }
.act .act-ico { grid-row: span 2; padding-top: 2px; }
.act b { font-weight: 600; font-size: 15px; }
.act small { color: var(--grey); font-size: 13px; }
.act .static { cursor: default; } .act .static:hover { background: none; }
@container screen (max-width: 960px) { .hy-top, .hy-cols { grid-template-columns: 1fr; } }
@container screen (max-width: 520px) { .hy-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hy-ward { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; } }
.w-body.center { display: flex; align-items: center; }

.cn-mbar { display: none; align-items: center; gap: 12px; margin: -16px -16px 12px; padding: 12px 16px; background: var(--nav); color: var(--nav-fg); }
.cn-mbar b { font-size: 16px; font-weight: 600; }
.cn-mbar .cn-mbar-sp { margin-left: auto; }
.cn-mbar .ico { width: 22px; height: 22px; }
@container screen (max-width: 860px) { .cn-mbar { display: flex; } }

.keybox { background: var(--card); border: 1px solid var(--line2); border-radius: 3px; margin-bottom: 12px; }
.keybox summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 14px; }
.keybox ul { list-style: none; margin: 0; padding: 0 14px 10px; display: grid; gap: 8px; }
.keybox li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 13px; color: var(--ink); }
.keybox .keyico .ico { width: 20px; height: 20px; }
.kpi-sub { font-size: 12px; color: var(--grey); margin-top: 2px; }

.mlist { display: none; list-style: none; margin: 0; padding: 0; }
.mcard { padding: 12px 14px; border-bottom: 1px solid var(--line2); }
.mcard:last-child { border-bottom: 0; }
.mcard.click { cursor: pointer; }
.mcard.click:hover, .mcard.click:active { background: var(--bg2); }
.mc-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.mc-top b { font-size: 15px; font-weight: 600; min-width: 0; }
.mc-top .chip { flex: none; }
.mc-sub { font-size: 13px; color: var(--grey); margin-top: 2px; }
.mc-line { font-size: 14px; margin-top: 4px; }
.mc-act { margin-top: 8px; }
.mc-more { display: block; width: 100%; padding: 12px 14px; border: 0; border-top: 1px solid var(--line2); background: none; color: var(--sapphire); font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
@container screen (max-width: 640px) { .desk { display: none !important; } .mlist { display: block; } .tbl-scroll { max-height: none !important; } }
.mphone { display: none; }
@container screen (max-width: 640px) { .mphone { display: block; } }

body { background: var(--stage); }
body::before { display: none; }
.stage { min-height: 100vh; display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: center; justify-content: center; padding-block: 32px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.caption { max-width: 340px; min-width: 0; }
.cap-eyebrow { margin: 0 0 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--grey); }
.cap-title { margin: 0; font-size: 34px; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.cap-title span { color: var(--sapphire); }
.cap-q { margin: 14px 0 0; font-size: 17px; font-weight: 500; }
.cap-p { margin: 12px 0 0; color: var(--grey); font-size: 15px; }
.cap-note { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--grey); font-size: 13px; }
.phone { flex: none; width: 414px; height: min(880px, max(660px, calc(100vh - 48px))); border-radius: 58px; background: #0a0a0a; padding: 12px; border: 1px solid #2b2b30; }
.screen { position: relative; width: 100%; height: 100%; border-radius: 46px; overflow: hidden; background: var(--bg); transform: translateZ(0); container: screen / inline-size; display: flex; flex-direction: column; }
.sbar { position: relative; height: 50px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0 40px; font-weight: 600; font-size: 15px; background: var(--bg); color: var(--ink); z-index: 35; }
.sbar::after { content: ""; position: absolute; left: 50%; top: 11px; width: 120px; height: 34px; border-radius: 20px; background: #000; transform: translateX(-50%); }
.sbar svg { display: block; }
.scroller { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; }
.scroller::-webkit-scrollbar { display: none; }
.homebar { position: absolute; bottom: 8px; left: 50%; width: 134px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .8; transform: translateX(-50%); z-index: 60; pointer-events: none; }
.proto { position: sticky; top: 0; padding: 8px 16px; }
.proto-note, .options { display: none !important; }
.proto-tier { font-size: 13px; }
.drawer { width: 100%; border-left: 0; padding-top: 50px; }
.drawer-head { padding: 4px 16px 14px; } .drawer-body { padding: 4px 16px 56px; }
.scrim { z-index: 20; }
.toast { bottom: 36px; max-width: calc(100% - 32px); }
.cn { min-height: 0; }
.foot { padding-bottom: 40px; }
@media (max-width: 520px) {
  .stage { display: block; padding: 0; }
  .caption { display: none; }
  .phone { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; padding: 0; border: 0; background: none; }
  .screen { border-radius: 0; }
  .sbar, .homebar { display: none; }
  .drawer { padding-top: 0; }
}

/* Live page: full window, no phone frame (added by build-t1.py) */
body { background: var(--bg); }
.stage { display: block; min-height: 0; padding: 0; }
.phone { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; padding: 0; border: 0; background: none; }
.screen { border-radius: 0; }
.drawer { width: min(560px, 100%); border-left: 1px solid var(--ink); padding-top: 0; }
@media (max-width: 560px) { .drawer { border-left: 0; } }
.toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.foot { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }