:root {
  /* Institutional command-centre palette (de-neoned). A light institutional theme
     + toggle lands in the next iteration; see FLEXZ_UPGRADE.md. */
  --bg: #121417;
  --bg-2: #0f1830;
  --panel: rgba(36, 39, 44, .90);
  --panel-2: rgba(44, 48, 53, .82);
  --line: rgba(125, 145, 180, .16);
  --line-2: rgba(125, 145, 180, .28);
  --text: #e6eaf2;
  --muted: #9aa6b8;
  --faint: #66738a;
  /* Functional status — desaturated, accessible, kept distinct from the brand red */
  --green: #2fb37f;
  --amber: #e0a32a;
  --red: #e2483f;
  /* Accent: was neon cyan -> calm institutional steel-blue (legacy token name kept) */
  --cyan: #5b8fc7;
  --accent: #5b8fc7;
  /* TVK brand accents — used sparingly over the institutional base, never as party wash */
  --brand: #c8102e;   /* TVK red */
  --brand-2: #9e1b1b; /* TVK maroon */
  --gold: #f2b807;    /* TVK gold (secondary highlight) */
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body.tn-root {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
  background: linear-gradient(180deg, #16191d 0%, #121417 60%, #0d0f12 100%);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

.mono {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.shell {
  position: relative;
  z-index: 1;
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 34px;
}

.topbar,
.panel,
.mapwrap,
.card,
.login-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), rgba(8, 13, 23, .62));
  box-shadow: 0 18px 70px -48px rgba(0, 0, 0, .9);
  backdrop-filter: blur(10px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand-mark {
  display: block;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 10px;
  box-shadow: 0 0 28px -18px rgba(55, 182, 240, .9);
  object-fit: contain;
}

.brand h1,
.login-card h1 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.brand p,
.login-card p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.pill {
  flex: none;
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(55, 182, 240, .08);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.topright {
  display: flex;
  align-items: center;
  gap: 18px;
}

.topcenter {
  display: flex;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 180px;
}

.clock,
.who {
  text-align: right;
}

.clock .t {
  font-size: 16px;
  font-weight: 600;
}

.clock .d,
.who .u {
  color: var(--muted);
  font-size: 11px;
}

.who .r {
  font-size: 13px;
  font-weight: 600;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  color: var(--text);
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}

.btn:hover,
.btn:focus-visible {
  border-color: rgba(55, 182, 240, .55);
  background: rgba(55, 182, 240, .1);
  outline: none;
}

.btn-primary {
  width: 100%;
  margin-top: 8px;
  border-color: rgba(55, 182, 240, .62);
  background: rgba(55, 182, 240, .18);
  color: #d9f5ff;
  font-weight: 700;
}

.btn-logout:hover {
  border-color: rgba(240, 68, 68, .58);
  color: #ffb2b2;
}

.btn-ai {
  gap: 11px;
  min-width: 210px;
  min-height: 48px;
  padding: 11px 18px;
  border-color: rgba(47, 179, 127, .5);
  background:
    radial-gradient(90px 42px at 18% 0%, rgba(47, 179, 127, .18), transparent 72%),
    rgba(47, 179, 127, .11);
  box-shadow: 0 0 30px -24px rgba(47, 179, 127, .95), inset 0 0 24px -20px var(--green);
  color: #eafff5;
  font-size: 15px;
  font-weight: 800;
}

.btn-ai:hover,
.btn-ai:focus-visible {
  border-color: rgba(47, 179, 127, .62);
  background:
    radial-gradient(90px 42px at 18% 0%, rgba(47, 179, 127, .24), transparent 72%),
    rgba(47, 179, 127, .17);
  transform: translateY(-1px);
}

.ai-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 30px;
  border: 1px solid rgba(47, 179, 127, .5);
  border-radius: 9px;
  color: var(--green);
  background: rgba(5, 18, 12, .46);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 700;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.card {
  min-height: 116px;
  padding: var(--space-2) var(--space-2);
  border-radius: 15px;
}

.card-top,
.map-actions,
.panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-top {
  justify-content: space-between;
}

.card .k {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.card .v {
  margin-top: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--type-kpi-md);
  font-weight: 600;
  line-height: 1;
}

.card .u {
  color: var(--muted);
  font-size: 15px;
}

.source-info {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--cyan);
  background: rgba(55, 182, 240, .08);
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}

.source-info:hover,
.source-info:focus-visible {
  border-color: rgba(55, 182, 240, .55);
  background: rgba(55, 182, 240, .16);
  outline: none;
  transform: translateY(-1px);
}

.card.tone-red .v {
  color: #ff8585;
}

.card.tone-amber .v {
  color: #ffc56b;
}

.card.tone-green .v {
  color: #7df0bf;
}

button.card {
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.ai-summary-card {
  position: relative;
  display: flex;
  min-height: 132px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-color: rgba(125, 145, 180, .28);
  box-shadow: 0 18px 70px -48px rgba(0, 0, 0, .9), 0 0 30px -22px var(--ai-c);
  transition: transform .16s, border-color .16s, box-shadow .16s;
}

.ai-summary-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--ai-c) 22%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--ai-c) 13%, transparent), transparent 46%);
  opacity: .86;
}

.ai-summary-card > * {
  position: relative;
  z-index: 1;
}

.ai-summary-card:hover,
.ai-summary-card:focus-visible {
  border-color: var(--ai-c);
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 22px 76px -48px rgba(0, 0, 0, .95), 0 0 34px -18px var(--ai-c);
}

.ai-summary-card.loading {
  grid-column: 1 / -1;
  min-height: 110px;
}

.ai-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-card-label,
.ai-card-status {
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ai-card-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--status-c);
  border-radius: 999px;
  color: var(--status-c);
  background: color-mix(in srgb, var(--status-c) 12%, transparent);
}

.ai-card-title {
  margin-top: 10px;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
}

.ai-card-copy {
  margin-top: 10px;
  color: #c9d6ea;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.main {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.mapwrap {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.map-head,
.panel-h,
.detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.map-head {
  padding: 15px 18px 8px;
}

.ttl,
.eyebrow,
.sec-t {
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mtr {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.mtr b,
.breadcrumb a {
  color: var(--cyan);
}

.status-counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.map-actions {
  align-items: flex-end;
  flex-direction: column;
}

.panel-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.btn-lineage {
  gap: 8px;
  min-height: 36px;
  border-color: rgba(55, 182, 240, .36);
  color: #d9f5ff;
  background: linear-gradient(135deg, rgba(55, 182, 240, .13), rgba(56, 189, 248, .055));
  font-size: 12px;
  font-weight: 700;
}

.btn-lineage.compact {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 11.5px;
}

.count-pill {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 11px;
}

.svg-stage {
  position: relative;
  min-height: 560px;
}

.tnmap {
  display: block;
  width: 100%;
  height: auto;
  max-height: 74vh;
  min-height: 560px;
  padding: 4px 10px 96px;
}

.district {
  fill-opacity: .40;
  stroke-width: 1.1;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px var(--glow));
  transition: fill-opacity .2s, filter .25s, stroke-width .15s;
  cursor: pointer;
}

.district:hover {
  fill-opacity: .62;
  stroke-width: 1.9;
  filter: drop-shadow(0 0 13px var(--glow));
}

.district.is-top {
  stroke-width: 3.3px;
  animation: spike 1.2s ease-in-out infinite;
}

@keyframes spike {
  0%,
  100% {
    fill-opacity: .45;
    filter: drop-shadow(0 0 6px var(--glow));
  }
  50% {
    fill-opacity: .85;
    filter: drop-shadow(0 0 22px var(--glow)) drop-shadow(0 0 9px var(--glow));
  }
}

.status-green {
  fill: var(--green);
  stroke: var(--green);
}

.status-amber {
  fill: var(--amber);
  stroke: var(--amber);
}

.status-red {
  fill: var(--red);
  stroke: var(--red);
}

.tip {
  position: absolute;
  z-index: 10;
  min-width: 160px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: rgba(8, 12, 22, .96);
  box-shadow: 0 16px 44px -16px rgba(0, 0, 0, .85);
  pointer-events: none;
}

.tip.hidden {
  display: none;
}

/* Cursor-anchored variant (appended to <body>) used by the Priority District
   list rows — the map's posTip() clamps to .svg-stage, so panel rows need their
   own fixed positioning. Explicit light text keeps the header readable on the
   dark tip across all themes (silver overrides only reach #map-tooltip / .tip .m). */
.tip-fixed {
  position: fixed;
  color: #e6eaf2;
}

.tip .n {
  font-weight: 700;
}

.tip .m {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.legend {
  position: absolute;
  left: 16px;
  bottom: 98px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(22, 24, 28, .82);
}

.legend .row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #cfdae9;
  font-size: 12px;
}

.dot,
.badge .bd {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.dot {
  width: 11px;
  height: 11px;
}

.green {
  background: var(--green);
}

.amber {
  background: var(--amber);
}

.red {
  background: var(--red);
}

.tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.map-tabs {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
}

.compact-tabs {
  margin-top: 14px;
}

.tab {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(19, 29, 48, .78);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform .16s, border-color .16s, background .16s, box-shadow .16s;
}

.tab:hover,
.tab:focus-visible {
  border-color: var(--line-2);
  background: rgba(255, 255, 255, .055);
  outline: none;
  transform: translateY(-1px);
}

.tab.active {
  border-color: var(--tab-c);
  box-shadow: inset 0 0 22px -14px var(--tab-c), 0 12px 30px -24px var(--tab-c);
}

.tab-ic {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--tab-c);
  background: rgba(255, 255, 255, .035);
  font-family: "Archivo", sans-serif;
  font-weight: 800;
}

.tab-tx {
  min-width: 0;
}

.tab-tx .l,
.deptrow .dl {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.tab-tx .s,
.deptrow .dm {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel {
  min-height: 420px;
  padding: var(--space-3);
  border-radius: 18px;
}

.panel .title {
  margin-top: 4px;
  font-size: var(--type-title);
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.badge.green {
  border: 1px solid rgba(56, 189, 248, .44);
  color: #d8ff9f;
  background: rgba(56, 189, 248, .13);
}

.badge.amber {
  border: 1px solid rgba(255, 191, 0, .44);
  color: #ffdd66;
  background: rgba(255, 191, 0, .13);
}

.badge.red {
  border: 1px solid rgba(242, 58, 58, .45);
  color: #ff9b9b;
  background: rgba(242, 58, 58, .13);
}

.badge.green .bd {
  background: var(--green);
}

.badge.amber .bd {
  background: var(--amber);
}

.badge.red .bd {
  background: var(--red);
}

.big-metric {
  margin-top: 16px;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .035), transparent);
}

.bm-k {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .05em;
}

.bm-v {
  margin-top: 7px;
  font-size: var(--type-kpi-lg);
  font-weight: 600;
  line-height: 1;
  overflow-wrap: anywhere;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.tile {
  min-height: 74px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .026);
}

.tile .tk {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .04em;
}

.tile .tv {
  margin-top: 7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--type-kpi-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tile.has-target {
  display: flex;
  flex-direction: column;
}

.tile .tile-target {
  margin-top: 8px;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.tile .tile-delta {
  margin-top: 3px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
}

.tile .tile-delta.over { color: var(--red); }
.tile .tile-delta.under { color: var(--green); }
.tile .tile-delta.on-target { color: var(--muted); }

.sec-t {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 10px;
}

.sec-t::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.alist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arow,
.deptrow,
.area-card {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, .028);
  cursor: pointer;
  text-align: left;
  transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}

.arow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 11px;
}

.arow:hover,
.deptrow:hover,
.area-card:hover {
  border-color: var(--line-2);
  background: rgba(255, 255, 255, .058);
}

.arow .an {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arow .av {
  color: var(--muted);
  font-size: 12px;
}

.empty-ok {
  padding: 26px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}

.ward-empty {
  grid-column: 1 / -1;
}

.detail-head {
  margin-top: 16px;
  padding: 0 4px;
}

.breadcrumb {
  color: var(--muted);
  font-size: 13px;
}

.breadcrumb span {
  margin: 0 6px;
}

.detail-head h2 {
  margin: 6px 0 0;
  font-family: "Archivo", sans-serif;
  font-size: 28px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.spark {
  margin-top: 14px;
  padding: 12px 8px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(2, 6, 14, .28);
}

.spark canvas {
  display: block;
  width: 100%;
  max-height: 180px;
}

.sp-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px 6px;
  color: var(--muted);
  font-size: 11px;
}

.sp-h b {
  color: var(--cyan);
  font-weight: 700;
}

.deptrow {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 64px;
  margin-bottom: 9px;
  padding: 11px 12px;
  border-radius: 12px;
}

.deptrow.on {
  border-color: var(--dr-c);
  box-shadow: inset 0 0 22px -13px var(--dr-c);
}

.deptrow .ic {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--dr-c);
  background: rgba(255, 255, 255, .03);
  font-family: "Archivo", sans-serif;
  font-weight: 800;
}

.deptrow .info {
  flex: 1;
  min-width: 0;
}

.deptrow .val {
  flex: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 16px;
  font-weight: 600;
}

.district-alert-box {
  margin-top: 16px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(125, 145, 180, .18);
  border-radius: 14px;
  background:
    radial-gradient(260px 160px at 12% 0%, rgba(55, 182, 240, .1), transparent 68%),
    rgba(255, 255, 255, .024);
}

.alert-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.alert-title {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 800;
}

.alert-marquee {
  position: relative;
  height: 220px;
  margin-top: 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}

.alert-track {
  display: grid;
  gap: 9px;
  animation: alert-scroll 28s linear infinite;
}

.district-alert-box:hover .alert-track {
  animation-play-state: paused;
}

.district-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--alert-c) 36%, var(--line));
  border-left-width: 3px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--alert-c) 10%, transparent), transparent 66%),
    rgba(5, 10, 19, .42);
  box-shadow: inset 0 0 22px -18px var(--alert-c);
}

.alert-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--status-c);
  box-shadow: 0 0 12px -2px var(--status-c);
}

.alert-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.alert-meta {
  color: color-mix(in srgb, var(--alert-c) 72%, white);
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.alert-text {
  color: #dbe6f7;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@keyframes alert-scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.area-panel {
  min-height: unset;
  margin-top: 16px;
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.area-card {
  position: relative;
  min-height: 132px;
  padding: 14px;
  border-radius: 14px;
  overflow: hidden;
}

.area-card.is-top {
  animation: card-spike 1.2s ease-in-out infinite;
}

@keyframes card-spike {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(55, 182, 240, 0);
  }
  50% {
    box-shadow: 0 0 22px -3px var(--card-glow), inset 0 0 28px -18px var(--card-glow);
  }
}

.area-card .area-name {
  min-height: 42px;
  font-weight: 700;
  line-height: 1.25;
}

.area-card .area-value {
  margin-top: 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 24px;
  font-weight: 600;
}

.area-card .badge {
  margin-top: 12px;
}

.foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 0 4px;
  color: var(--faint);
  font-size: 11.5px;
}

body.lineage-open {
  overflow: hidden;
}

body.insights-open {
  overflow: hidden;
}

.lineage-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(760px 520px at 22% 18%, rgba(55, 182, 240, .16), transparent 62%),
    radial-gradient(680px 420px at 82% 72%, rgba(56, 189, 248, .08), transparent 66%),
    rgba(2, 5, 11, .78);
  backdrop-filter: blur(14px);
}

.lineage-modal.hidden {
  display: none;
}

.lineage-panel {
  position: relative;
  width: min(1180px, 100%);
  max-height: min(860px, calc(100vh - 44px));
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(125, 145, 180, .28);
  border-radius: 22px;
  background:
    linear-gradient(rgba(55, 182, 240, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 182, 240, .045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 22, 38, .94), rgba(6, 11, 21, .96));
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: 0 30px 100px -44px rgba(0, 0, 0, .95);
}

.lineage-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 2px 14px;
}

.lineage-top h2 {
  margin: 4px 0 0;
  font-family: "Archivo", sans-serif;
  font-size: 24px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lineage-top p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.lineage-note {
  color: #cdd8ea;
}

.lineage-note.hidden {
  display: none;
}

.insights-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(700px 460px at 50% 12%, rgba(55, 182, 240, .18), transparent 66%),
    radial-gradient(560px 360px at 78% 82%, rgba(56, 189, 248, .1), transparent 64%),
    rgba(2, 5, 11, .8);
  backdrop-filter: blur(14px);
}

.insights-modal.hidden {
  display: none;
}

.insights-panel {
  width: min(960px, 100%);
  max-height: min(780px, calc(100vh - 44px));
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(125, 145, 180, .3);
  border-radius: 22px;
  background:
    linear-gradient(rgba(55, 182, 240, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 182, 240, .04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 22, 38, .96), rgba(6, 11, 21, .97));
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: 0 30px 100px -44px rgba(0, 0, 0, .95);
}

.insights-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 2px 14px;
}

.insights-top h2 {
  margin: 4px 0 0;
  font-family: "Archivo", sans-serif;
  font-size: 24px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.insights-top p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.insights-close {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.insights-close:hover,
.insights-close:focus-visible {
  border-color: rgba(55, 182, 240, .62);
  outline: none;
}

.insights-content {
  max-height: calc(min(780px, 100vh - 44px) - 96px);
  overflow: auto;
}

.insights-loading {
  display: grid;
  place-items: center;
  min-height: 320px;
  color: var(--muted);
  font-weight: 700;
}

.insights-brief {
  display: grid;
  gap: 14px;
}

.insight-lead {
  padding: 16px;
  border: 1px solid rgba(55, 182, 240, .32);
  border-radius: 16px;
  background:
    radial-gradient(260px 120px at 18% 0%, rgba(55, 182, 240, .16), transparent 70%),
    rgba(255, 255, 255, .03);
}

.insight-k {
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.insight-topline {
  margin-top: 6px;
  font-family: "Archivo", sans-serif;
  font-size: 24px;
  font-weight: 800;
}

.insight-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.insight-focus {
  display: block;
  min-height: 132px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--focus-c) 42%, var(--line));
  border-radius: 15px;
  color: inherit;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--focus-c) 12%, transparent), transparent 70%),
  rgba(255, 255, 255, .024);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: transform .16s, border-color .16s, box-shadow .16s, background .16s;
}

.insight-focus:hover,
.insight-focus:focus-visible {
  border-color: color-mix(in srgb, var(--focus-c) 78%, white);
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 18px 48px -34px var(--focus-c);
}

.insight-focus .dept {
  color: color-mix(in srgb, var(--focus-c) 72%, white);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.insight-focus .name {
  margin-top: 9px;
  font-size: 19px;
  font-weight: 800;
}

.insight-focus .value {
  margin-top: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 24px;
  font-weight: 600;
}

.insight-focus .reason {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.insight-list {
  display: grid;
  gap: 10px;
}

.insight-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .024);
}

.insight-row b {
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.insight-row span {
  color: #dbe6f7;
  font-size: 13px;
  line-height: 1.4;
}

.lineage-close {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.lineage-close:hover,
.lineage-close:focus-visible {
  border-color: rgba(242, 58, 58, .54);
  outline: none;
}

.lineage-content {
  overflow: auto;
}

.lineage-map {
  position: relative;
  min-width: 930px;
  min-height: 570px;
  overflow: hidden;
  border: 1px solid rgba(125, 145, 180, .18);
  border-radius: 18px;
  background:
    radial-gradient(340px 260px at 50% 52%, rgba(55, 182, 240, .12), transparent 72%),
    linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
}

.lineage-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lineage-edge {
  fill: none;
  stroke-width: .42;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.lineage-edge.live {
  stroke: rgba(55, 182, 240, .62);
}

.lineage-edge.delayed {
  stroke: rgba(255, 191, 0, .66);
  stroke-dasharray: .018 .028;
}

.lineage-edge.offline {
  stroke: rgba(242, 58, 58, .62);
  stroke-dasharray: .028 .03;
}

.lineage-packet {
  filter: drop-shadow(0 0 8px currentColor);
}

.lineage-packet.live {
  color: var(--cyan);
  fill: var(--cyan);
}

.lineage-packet.delayed {
  color: var(--amber);
  fill: var(--amber);
}

.lineage-node {
  position: absolute;
  z-index: 2;
  width: 260px;
  min-height: 96px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--node-c) 48%, var(--line));
  border-radius: 15px;
  background:
    radial-gradient(160px 90px at 12% 0%, color-mix(in srgb, var(--node-c) 16%, transparent), transparent 70%),
    rgba(8, 13, 23, .88);
  box-shadow: 0 18px 44px -32px var(--node-c), inset 0 0 24px -20px var(--node-c);
  outline: none;
  animation: lineage-node-pulse 3.4s ease-in-out infinite;
}

.lineage-node.ingestion {
  width: 240px;
}

.lineage-node.hub {
  width: 278px;
  min-height: 132px;
}

@keyframes lineage-node-pulse {
  0%,
  100% {
    box-shadow: 0 18px 44px -32px var(--node-c), inset 0 0 24px -20px var(--node-c);
  }
  50% {
    box-shadow: 0 18px 52px -26px var(--node-c), inset 0 0 32px -18px var(--node-c);
  }
}

.lineage-node:focus-visible {
  border-color: var(--node-c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--node-c) 22%, transparent), 0 18px 52px -26px var(--node-c);
}

.node-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.node-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  font-size: 18px;
}

.node-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 800;
  line-height: 1.16;
}

.node-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  color: color-mix(in srgb, var(--node-c) 82%, white);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.node-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--node-c);
  box-shadow: 0 0 12px var(--node-c);
}

.node-meta {
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
}

.node-records {
  margin-top: 5px;
  color: #dce8f7;
  font-size: 12px;
}

.kpi-list {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.kpi-list li {
  position: relative;
  padding-left: 14px;
  color: #dce8f7;
  font-size: 12px;
}

.kpi-list li::before {
  content: "";
  position: absolute;
  top: .6em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.tier-label {
  position: absolute;
  z-index: 1;
  color: rgba(231, 238, 248, .36);
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.tier-label.sources {
  top: calc(5% - 21px);
  left: calc(4% + 130px);
}

.tier-label.ingestion {
  top: calc(38% - 22px);
  left: calc(40% + 120px);
}

.tier-label.kpis {
  top: calc(34% - 22px);
  left: calc(70% + 139px);
}

.lineage-tip {
  position: absolute;
  z-index: 5;
  max-width: 260px;
  padding: 9px 10px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: #dce8f7;
  background: rgba(4, 8, 16, .96);
  box-shadow: 0 18px 42px -24px rgba(0, 0, 0, .95);
  font-size: 12px;
  pointer-events: none;
}

.lineage-tip.hidden {
  display: none;
}

.lineage-loading {
  display: grid;
  min-height: 360px;
  place-items: center;
  gap: 12px;
  color: var(--muted);
}

.lineage-loading span {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(55, 182, 240, .18);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: lineage-spin .8s linear infinite;
}

@keyframes lineage-spin {
  to {
    transform: rotate(360deg);
  }
}

.login-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  overflow: hidden;
}

.login-page::before {
  content: "FG";
  position: fixed;
  inset: auto auto 7vh 8vw;
  color: rgba(125, 145, 180, .045);
  font-family: "Archivo", sans-serif;
  font-size: 34vw;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px);
  transition: opacity .75s ease, transform .75s ease;
}

.login-page.is-open::before {
  opacity: 1;
  transform: translateY(0);
}

.login-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(340px, 420px);
  align-items: center;
  gap: 74px;
  width: min(1040px, 100%);
  min-height: 620px;
}

.login-stage::before {
  content: "";
  position: absolute;
  inset: 70px 0;
  z-index: 0;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(440px 320px at 22% 50%, rgba(55, 182, 240, .12), transparent 64%),
    linear-gradient(180deg, rgba(15, 22, 38, .82), rgba(8, 13, 23, .68));
  box-shadow: 0 26px 90px -54px rgba(0, 0, 0, .95);
  opacity: 0;
  pointer-events: none;
  transform: scaleX(.92);
  transform-origin: center;
  transition:
    opacity .56s ease .12s,
    transform .78s cubic-bezier(.2, .84, .26, 1) .06s;
  backdrop-filter: blur(10px);
}

.login-stage::after {
  content: "";
  position: absolute;
  top: 128px;
  bottom: 128px;
  left: calc(100% - 494px);
  z-index: 1;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(125, 145, 180, .32), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease .34s;
}

.login-page.is-open .login-stage::before {
  opacity: 1;
  transform: scaleX(1);
}

.login-page.is-open .login-stage::after {
  opacity: 1;
}

.login-card {
  position: relative;
  grid-column: 2;
  z-index: 2;
  width: min(420px, 100%);
  padding: 28px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transform: translateX(42px) scale(.98);
  transition:
    opacity .56s ease .18s,
    transform .72s cubic-bezier(.2, .84, .26, 1) .12s,
    filter .72s ease .12s;
  filter: blur(7px);
}

.login-page.is-open .login-card {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

.login-logo-trigger {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(540px, 86vw);
  aspect-ratio: 23 / 10;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%) scale(1);
  transition:
    left .84s cubic-bezier(.2, .84, .26, 1),
    top .84s cubic-bezier(.2, .84, .26, 1),
    width .78s cubic-bezier(.2, .84, .26, 1),
    transform .78s cubic-bezier(.2, .84, .26, 1),
    filter .78s ease;
  filter: drop-shadow(0 0 38px rgba(55, 182, 240, .24));
}

.login-logo-trigger:hover,
.login-logo-trigger:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 46px rgba(55, 182, 240, .36));
  transform: translate(-50%, -50%) scale(1.025);
}

.login-page.is-open .login-logo-trigger {
  left: calc((100% - 494px) / 2);
  width: min(400px, 40vw);
  transform: translate(-50%, -50%) scale(.96);
  cursor: default;
  transition:
    left .84s cubic-bezier(.2, .84, .26, 1),
    top .84s cubic-bezier(.2, .84, .26, 1),
    width .84s cubic-bezier(.2, .84, .26, 1),
    transform .84s cubic-bezier(.2, .84, .26, 1),
    filter .84s ease;
}

.login-mark {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  user-select: none;
}

@media (min-width: 821px) {
  body.tn-root[data-view="status"],
  body.tn-root[data-view="district"],
  body.tn-root[data-view="area"] {
    /* Fit to one screen, no scroll (Grafana now lives in a popup, not inline). */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  body[data-view="status"] .shell,
  body[data-view="district"] .shell,
  body[data-view="area"] .shell {
    display: flex;
    /* Full-width: fill the screen edge-to-edge, no big side gutters. */
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    padding: 8px 14px;
    overflow: hidden;
  }

  body[data-view="status"] .topbar,
  body[data-view="district"] .topbar,
  body[data-view="area"] .topbar {
    flex: 0 0 auto;
    min-height: 64px;
    padding: 9px 14px;
  }

  body[data-view="status"] .brand-mark,
  body[data-view="district"] .brand-mark,
  body[data-view="area"] .brand-mark {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  body[data-view="status"] .brand h1,
  body[data-view="district"] .brand h1,
  body[data-view="area"] .brand h1 {
    font-size: 15px;
  }

  body[data-view="status"] .brand p,
  body[data-view="district"] .brand p,
  body[data-view="area"] .brand p {
    font-size: 11px;
  }

  body[data-view="status"] .btn-ai,
  body[data-view="district"] .btn-ai,
  body[data-view="area"] .btn-ai {
    min-width: 188px;
    min-height: 42px;
    padding: 8px 14px;
    font-size: 14px;
  }

  body[data-view="status"] .ai-mark,
  body[data-view="district"] .ai-mark,
  body[data-view="area"] .ai-mark {
    width: 28px;
    height: 26px;
  }

  body[data-view="status"] .cards {
    flex: 0 0 auto;
    gap: 10px;
    margin-top: 10px;
  }

  body[data-view="status"] .card {
    min-height: 86px;
    padding: 12px 14px;
  }

  body[data-view="status"] .ai-summary-card {
    min-height: 104px;
  }

  body[data-view="status"] .card .v {
    margin-top: 7px;
    font-size: 25px;
  }

  body[data-view="status"] .ai-card-title {
    margin-top: 8px;
    font-size: 18px;
  }

  body[data-view="status"] .ai-card-copy {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.28;
  }

  body[data-view="status"] .status-grid {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 10px;
  }

  body[data-view="status"] .mapwrap,
  body[data-view="status"] .status-grid > .panel {
    height: 100%;
    min-height: 0;
  }

  body[data-view="status"] .mapwrap,
  body[data-view="status"] .status-grid > .panel,
  body[data-view="district"] .detail-grid > .panel,
  body[data-view="area"] .detail-grid > .panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body[data-view="status"] .map-head {
    flex: 0 0 auto;
    padding: 11px 14px 5px;
  }

  body[data-view="status"] .svg-stage {
    flex: 1 1 auto;
    min-height: 0;
  }

  body[data-view="status"] .tnmap {
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 2px 8px 80px;
  }

  body[data-view="status"] .legend {
    bottom: 82px;
  }

  body[data-view="status"] .map-tabs {
    right: 12px;
    bottom: 12px;
    left: 12px;
    gap: 10px;
  }

  body[data-view="status"] .status-grid > .panel {
    padding: 14px;
  }

  body[data-view="status"] .status-grid .alist {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  body[data-view="status"] .status-grid .arow {
    padding: 8px 10px;
  }

  body[data-view="district"] .detail-head,
  body[data-view="area"] .detail-head {
    flex: 0 0 auto;
    margin-top: 8px;
  }

  body[data-view="district"] .detail-head h2,
  body[data-view="area"] .detail-head h2 {
    margin-top: 2px;
    font-size: 24px;
  }

  body[data-view="district"] .compact-tabs,
  body[data-view="area"] .compact-tabs {
    flex: 0 0 auto;
    gap: 10px;
    margin-top: 8px;
  }

  body[data-view="status"] .tab,
  body[data-view="district"] .tab,
  body[data-view="area"] .tab {
    padding: 9px 12px;
    border-radius: 12px;
  }

  body[data-view="status"] .tab-ic,
  body[data-view="district"] .tab-ic,
  body[data-view="area"] .tab-ic {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  body[data-view="district"] .detail-grid,
  body[data-view="area"] .detail-grid {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 10px;
  }

  body[data-view="district"] .detail-grid > .panel,
  body[data-view="area"] .detail-grid > .panel {
    height: 100%;
    min-height: 0;
    padding: 13px;
  }

  body[data-view="district"] .panel-h,
  body[data-view="area"] .panel-h {
    flex: 0 0 auto;
  }

  body[data-view="district"] .panel .title,
  body[data-view="area"] .panel .title {
    font-size: 19px;
  }

  body[data-view="district"] .big-metric,
  body[data-view="area"] .big-metric {
    flex: 0 0 auto;
    margin-top: 10px;
    padding: 12px;
  }

  body[data-view="district"] .bm-v,
  body[data-view="area"] .bm-v {
    font-size: 34px;
  }

  body[data-view="district"] .tiles,
  body[data-view="area"] .tiles {
    flex: 0 0 auto;
    gap: 8px;
    margin-top: 10px;
  }

  body[data-view="district"] .tile,
  body[data-view="area"] .tile {
    min-height: 58px;
    padding: 9px 10px;
  }

  body[data-view="district"] .tile .tv,
  body[data-view="area"] .tile .tv {
    margin-top: 4px;
    font-size: 17px;
  }

  body[data-view="district"] .spark,
  body[data-view="area"] .spark {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    margin-top: 10px;
    padding: 10px 8px 6px;
  }

  body[data-view="district"] .spark canvas,
  body[data-view="area"] .spark canvas {
    height: 100% !important;
    max-height: 100%;
    flex: 1 1 auto;
    min-height: 0;
  }

  body[data-view="district"] .deptrow,
  body[data-view="area"] .deptrow {
    min-height: 54px;
    margin-bottom: 7px;
    padding: 8px 10px;
    gap: 10px;
  }

  body[data-view="district"] .deptrow .ic,
  body[data-view="area"] .deptrow .ic {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  body[data-view="district"] .district-alert-box {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    margin-top: 10px;
    padding: 10px;
  }

  body[data-view="district"] .alert-marquee {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    margin-top: 8px;
  }

  body[data-view="district"] .district-alert {
    min-height: 54px;
    padding: 8px 10px;
  }

  body[data-view="district"] .area-panel {
    flex: 0 0 auto;
    min-height: 0;
    margin-top: 10px;
    padding: 11px 13px;
  }

  body[data-view="district"] .area-grid {
    gap: 10px;
    margin-top: 9px;
  }

  body[data-view="district"] .area-card {
    min-height: 82px;
    padding: 10px;
  }

  body[data-view="district"] .area-card .area-name {
    min-height: 30px;
    font-size: 13px;
  }

  body[data-view="district"] .area-card .area-value {
    margin-top: 7px;
    font-size: 20px;
  }

  body[data-view="district"] .area-card .badge {
    margin-top: 7px;
  }

  body[data-view="status"] .foot,
  body[data-view="district"] .foot,
  body[data-view="area"] .foot {
    flex: 0 0 auto;
    margin-top: 6px;
    font-size: 10.5px;
  }
}

.login-form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.login-form label {
  position: relative;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.login-form input,
.login-form select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  color: var(--text);
  background: rgba(5, 10, 18, .72);
}

.login-form input:focus,
.login-form select:focus {
  border-color: rgba(55, 182, 240, .65);
  outline: none;
  box-shadow: 0 0 0 3px rgba(55, 182, 240, .12);
}

.username-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 20;
  display: grid;
  gap: 4px;
  max-height: 210px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: rgba(5, 10, 18, .96);
  box-shadow: 0 18px 50px -26px rgba(0, 0, 0, .95);
  backdrop-filter: blur(10px);
}

.username-suggestions[hidden] {
  display: none;
}

.username-suggestions button {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.username-suggestions button:hover,
.username-suggestions button:focus-visible,
.username-suggestions button.is-active {
  outline: none;
  background: rgba(55, 182, 240, .14);
}

.form-error {
  padding: 10px 12px;
  border: 1px solid rgba(240, 68, 68, .42);
  border-radius: 11px;
  color: #ffb2b2;
  background: rgba(240, 68, 68, .1);
}

@media (max-width: 1100px) {
  .main {
    grid-template-columns: 1fr;
  }

  .area-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .shell {
    width: min(100% - 20px, 1480px);
    padding-top: 10px;
  }

  .login-page {
    padding: 16px;
  }

  .login-stage {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: calc(100vh - 32px);
  }

  .login-stage::before {
    inset: 58px 0 20px;
    transform: scaleY(.9);
  }

  .login-stage::after {
    display: none;
  }

  .login-page.is-open .login-stage::before {
    transform: scaleY(1);
  }

  .login-card {
    grid-column: 1;
    justify-self: center;
    width: min(420px, 100%);
    transform: translateY(42px) scale(.98);
  }

  .login-logo-trigger {
    width: min(420px, 88vw);
  }

  .login-page.is-open .login-logo-trigger {
    top: 16%;
    left: 50%;
    width: min(300px, 74vw);
    transform: translate(-50%, -50%) scale(.96);
  }

  .login-page.is-open .login-card {
    transform: translateY(92px) scale(1);
  }

  .topbar,
  .topright,
  .topcenter,
  .detail-head,
  .foot {
    align-items: stretch;
    flex-direction: column;
  }

  .topcenter,
  .btn-ai {
    width: 100%;
  }

  .clock,
  .who {
    text-align: left;
  }

  .map-head,
  .map-actions,
  .panel-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .status-counts {
    justify-content: flex-start;
  }

  .lineage-modal {
    padding: 12px;
  }

  .lineage-panel {
    max-height: calc(100vh - 24px);
    padding: 14px;
  }

  .insights-modal {
    padding: 12px;
  }

  .insights-panel {
    max-height: calc(100vh - 24px);
    padding: 14px;
  }

  .insight-focus-grid {
    grid-template-columns: 1fr;
  }

  .insight-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .lineage-map {
    min-width: 860px;
  }

  .tabs,
  .cards,
  .area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-tabs {
    position: static;
    padding: 0 12px 12px;
  }

  .tnmap {
    min-height: 430px;
    padding-bottom: 12px;
  }

  .svg-stage {
    min-height: 430px;
  }

  .legend {
    bottom: 14px;
  }
}

@media (max-width: 560px) {
  .tabs,
  .cards,
  .tiles,
  .area-grid {
    grid-template-columns: 1fr;
  }

  .brand {
    align-items: flex-start;
  }

  .brand h1 {
    font-size: 14px;
  }

  .pill {
    display: none;
  }

  .bm-v {
    font-size: 34px;
  }

  .card .v {
    font-size: 26px;
  }

  .lineage-top {
    flex-direction: column;
  }

  .lineage-close {
    position: absolute;
    top: 14px;
    right: 14px;
  }
}

/* ============================================================
   SOVEREIGN COMMAND — premium overhaul layer
   Cinematic atmosphere · frosted glass · refined light · motion.
   Cascades after base rules; status/dept semantics preserved.
   ============================================================ */

:root {
  /* Authoritative token layer (this block wins over the first :root for shared keys).
     Institutional command-centre palette, de-neoned, with restrained TVK accents. */
  --bg: #121417;
  --bg-2: #0f1830;
  --text: #e6eaf2;
  --muted: #9aa6b8;
  --faint: #66738a;
  --line: rgba(132, 152, 192, .14);
  --line-2: rgba(132, 152, 192, .26);
  /* Functional status — desaturated, accessible, distinct from the brand red */
  --green: #2fb37f;
  --amber: #e0a32a;
  --red: #e2483f;
  /* Accent: institutional steel-blue (legacy token name kept) */
  --cyan: #5b8fc7;
  --accent: #5b8fc7;
  /* TVK brand accents — used sparingly, never as a party-colour wash */
  --brand: #c8102e;   /* TVK red */
  --brand-2: #9e1b1b; /* TVK maroon */
  --gold: #f2b807;    /* TVK gold (secondary highlight) */
  /* Surfaces: more solid (less glassmorphism), calmer shadows */
  --glass: rgba(38, 41, 46, .92);
  --glass-2: rgba(30, 33, 37, .88);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 50px -34px rgba(0, 0, 0, .85);
  --shadow-2: 0 30px 90px -46px rgba(0, 0, 0, .9);
  /* ---- USWDS-derived design tokens (theme-invariant; both themes inherit) ----
     Public Sans self-hosted (SIL OFL-1.1; see vendor/fonts/public-sans/OFL.txt).
     Latin-only face → system-ui/sans-serif fallback covers any non-latin glyph,
     same as the IBM Plex Sans it replaces (no script regression). */
  --font-sans: "Public Sans", system-ui, sans-serif;
  /* USWDS 8px-base spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  /* Modular type scale (KPI numerals + section titles) */
  --type-kpi-lg: 40px;  /* hero metric  (.bm-v base) */
  --type-kpi-md: 32px;  /* card value   (.card .v)   */
  --type-kpi-sm: 20px;  /* tile value   (.tile .tv)  */
  --type-title:  24px;  /* panel title  (.panel .title) */
}

/* --- Institutional canvas: clean navy, no neon aurora / grid / film-grain --- */
body.tn-root {
  background: linear-gradient(180deg, #16191d 0%, #121417 60%, #0d0f12 100%);
  background-attachment: fixed;
}

body.tn-root::before,
body.tn-root::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Soft vignette only — keeps depth without the grid/scanline "game HUD" texture */
body.tn-root::before {
  background: radial-gradient(135% 125% at 50% 36%, transparent 60%, rgba(8, 9, 11, 0.55) 100%);
}

body.tn-root::after {
  display: none;
}

/* --- Frosted glass surfaces with inner top-light --- */
.topbar,
.panel,
.mapwrap,
.login-stage::before,
.lineage-panel,
.insights-panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass), var(--glass-2));
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
}

.card,
.tab,
.big-metric,
.tile,
.spark,
.deptrow,
.arow,
.area-card,
.district-alert-box {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .035) inset;
}

/* Glowing hairline along the top of the command bar */
.topbar {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.topbar::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(200, 16, 46, .55), rgba(242, 184, 7, .45), transparent);
}

.topbar::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(200, 16, 46, .55), rgba(242, 184, 7, .45), transparent);
}

.brand-mark {
  box-shadow: 0 0 0 1px rgba(132, 152, 192, .18), 0 6px 18px -12px rgba(0, 0, 0, .6);
}

/* --- Light-on-dark gradient typography for hero text --- */
.brand h1,
.login-card h1,
.detail-head h2,
.panel .title {
  background: linear-gradient(94deg, #ffffff 0%, #cfe0f4 52%, #8fb9e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.eyebrow,
.ttl,
.sec-t,
.ai-card-label {
  color: var(--faint);
}

/* --- Premium map rendering: vivid jewel tiles, crisp dark separators --- */
/* No per-district glow: it bled across borders and read blurry. Crisp fills +
   strong separators give clean, distinct tiles even between same-status neighbours. */
.district {
  fill-opacity: .9;
  stroke: rgba(2, 5, 11, .92);
  stroke-width: 1.5;
  paint-order: stroke;
  filter: none;
  transition: fill-opacity .18s, stroke-width .15s, stroke .18s;
}

.district:hover {
  fill-opacity: 1;
  stroke: #ffffff;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 11px var(--glow));
}

/* Priority district: a calm STATIC accent outline (no blink, no neon, no radar ping) */
.district.is-top {
  stroke: var(--gold);
  stroke-width: 2.6;
  filter: drop-shadow(0 0 3px rgba(242, 184, 7, .5));
}

/* Home district for district-level roles (collector/secretary): a calm dashed
   steel-blue ring, distinct from the gold priority outline. */
.district.is-home {
  stroke: var(--cyan);
  stroke-width: 2.4;
  stroke-dasharray: 6 4;
}

.svg-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Ambient steel-blue table light + a soft edge vignette that seats the map
     into the panel (command-table depth, no layout change). */
  background:
    radial-gradient(60% 50% at 46% 44%, rgba(91, 143, 199, .07), transparent 70%),
    radial-gradient(125% 115% at 50% 46%, transparent 58%, rgba(0, 0, 0, .32) 100%);
}

/* --- Status chips: jewel-tone, matched to new palette --- */
.badge.green {
  border-color: rgba(34, 211, 155, .42);
  color: #8fefc4;
  background: rgba(34, 211, 155, .12);
}

.badge.amber {
  border-color: rgba(245, 177, 42, .44);
  color: #ffd98a;
  background: rgba(245, 177, 42, .13);
}

.badge.red {
  border-color: rgba(242, 58, 58, .46);
  color: #ffaeb9;
  background: rgba(242, 58, 58, .12);
}

.count-pill {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line);
}

/* --- Buttons: tactile, with a moving sheen on the primary CTA --- */
.btn {
  transition: background .18s ease, border-color .18s ease, color .18s ease,
    transform .18s cubic-bezier(.2, .8, .25, 1), box-shadow .18s ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(.985);
}

.btn-primary {
  position: relative;
  overflow: hidden;
  border-color: rgba(56, 189, 248, .6);
  background: linear-gradient(180deg, #2eb0ec, #1d83c2);
  color: #f1fbff;
  box-shadow: 0 14px 34px -16px rgba(56, 189, 248, .8), 0 1px 0 rgba(255, 255, 255, .25) inset;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
}

.btn-primary:hover::after {
  left: 130%;
}

.btn-ai {
  box-shadow: 0 0 34px -22px rgba(47, 179, 127, .9), inset 0 0 26px -20px var(--green);
}

/* --- Premium scrollbars, selection, focus --- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(132, 152, 192, .26) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 12px;
  background: rgba(132, 152, 192, .26);
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(132, 152, 192, .42);
  background-clip: content-box;
}

::selection {
  background: rgba(56, 189, 248, .32);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* --- Orchestrated entrance: static shell only (never JS-replaced) --- */
@keyframes sc-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.shell > .topbar {
  animation: sc-rise .62s cubic-bezier(.2, .82, .25, 1) both;
}

.shell .cards {
  animation: sc-rise .62s cubic-bezier(.2, .82, .25, 1) .09s both;
}

.shell .main,
.shell .detail-head {
  animation: sc-rise .72s cubic-bezier(.2, .82, .25, 1) .17s both;
}

.shell .compact-tabs {
  animation: sc-rise .62s cubic-bezier(.2, .82, .25, 1) .12s both;
}

.shell .area-panel {
  animation: sc-rise .72s cubic-bezier(.2, .82, .25, 1) .26s both;
}

.shell .foot {
  animation: sc-rise .6s ease .34s both;
}

/* --- Login: deeper stage, brighter logo, refined inputs --- */
.login-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(680px 480px at 30% 46%, rgba(56, 189, 248, .10), transparent 64%);
  opacity: 0;
  transition: opacity .8s ease;
}

.login-page.is-open::after {
  opacity: 1;
}

.login-stage::before {
  box-shadow: var(--shadow-2);
}

.login-mark {
  box-shadow: none;
}

.login-form input,
.login-form select {
  background: rgba(8, 13, 24, .72);
  border-color: var(--line-2);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.login-form input:hover,
.login-form select:hover {
  border-color: rgba(56, 189, 248, .4);
}

/* --- Honor reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .shell > .topbar,
  .shell .cards,
  .shell .main,
  .shell .detail-head,
  .shell .compact-tabs,
  .shell .area-panel,
  .shell .foot {
    animation: none;
  }

  .district.is-top,
  .area-card.is-top,
  .lineage-node {
    animation: none;
  }
}

/* ============================================================
   SOC / INTELLIGENCE HUD LAYER
   Classified bar · CRT scanlines · radar sweep · login HUD ·
   decrypt-reveal glow. All decorative; pointer-events: none.
   ============================================================ */

/* Institutional vignette only — CRT scanlines + HUD grid removed (game-like). */
body.tn-root::before {
  background: radial-gradient(135% 125% at 50% 36%, transparent 60%, rgba(8, 9, 11, 0.55) 100%);
}

/* --- Classified access bar --- */
.classbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin: 0 2px 8px;
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(242, 58, 58, .12), rgba(8, 13, 23, .5) 26%, rgba(8, 13, 23, .5) 74%, rgba(56, 189, 248, .1)),
    rgba(8, 13, 23, .4);
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.cb-dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: cb-blink 1.5s steps(1) infinite;
}

@keyframes cb-blink {
  0%, 58% { opacity: 1; }
  59%, 100% { opacity: .22; }
}

.cb-tag { color: #ffb1bc; }

.cb-mid {
  flex: 1;
  text-align: center;
  color: var(--faint);
}

.cb-r { color: var(--muted); }
.cb-r b { color: var(--cyan); }

.cb-live { color: var(--green); }

/* --- Map stage (radar scan-sweep removed for the government build) --- */
.svg-stage { overflow: hidden; }

/* --- Decrypt-reveal glow (toggled by hud.js) --- */
.decoding {
  color: var(--cyan) !important;
  -webkit-text-fill-color: var(--cyan);
  text-shadow: 0 0 12px rgba(56, 189, 248, .65);
}

/* --- Login secure-channel HUD --- */
.login-hud {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(147, 162, 187, .5);
  opacity: 0;
  transition: opacity .9s ease .2s;
}

.login-page.is-open .login-hud { opacity: 1; }

.login-hud .corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(56, 189, 248, .4);
}

.login-hud .tl { top: 22px; left: 24px; border-right: 0; border-bottom: 0; }
.login-hud .tr { top: 22px; right: 24px; border-left: 0; border-bottom: 0; }
.login-hud .bl { bottom: 22px; left: 24px; border-right: 0; border-top: 0; }
.login-hud .br { bottom: 22px; right: 24px; border-left: 0; border-top: 0; }

.login-hud .hud-read {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.login-hud .hud-tl { top: 30px; left: 60px; color: rgba(110, 231, 183, .66); }
.login-hud .hud-tr { top: 30px; right: 60px; }
.login-hud .hud-bl { bottom: 30px; left: 60px; }
.login-hud .hud-br { bottom: 30px; right: 60px; }

.login-hud .hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 9px var(--green);
  animation: cb-blink 1.8s steps(1) infinite;
}

@media (max-width: 820px) {
  .classbar { display: none; }
  .login-hud .hud-read { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svg-stage::before,
  .cb-dot,
  .login-hud .hud-dot { animation: none; }
}

/* ============================================================
   STATE FUSION CENTER — COP layer
   Readiness posture · alert crawl · command palette ·
   watch-floor drawer (ops journal + feed integrity).
   ============================================================ */

/* --- Fusion bar: readiness (left) + alert crawl (right) --- */
.fusionbar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex: 0 0 auto;
  margin: 0 2px 8px;
  min-height: 38px;
}

.readiness {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--rl-c, var(--cyan)) 42%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rl-c, var(--cyan)) 16%, transparent), rgba(8, 13, 23, .5) 60%),
    rgba(8, 13, 23, .4);
  box-shadow: inset 0 0 22px -16px var(--rl-c, var(--cyan));
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.readiness:hover,
.readiness:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow: inset 0 0 26px -14px var(--rl-c, var(--cyan)), 0 10px 26px -18px var(--rl-c, var(--cyan));
}

.rl-arrow {
  color: var(--rl-c, var(--cyan));
  font-size: 13px;
  filter: drop-shadow(0 0 6px var(--rl-c, var(--cyan)));
}

.rl-main { display: grid; line-height: 1.15; }

.rl-k {
  color: var(--faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.rl-v {
  font-family: "Archivo", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--rl-c, var(--cyan));
}

.rl-bar { display: inline-flex; gap: 3px; align-items: center; }

.rl-seg {
  width: 6px;
  height: 16px;
  border-radius: 2px;
  background: rgba(132, 152, 192, .16);
}

.rl-seg.on { background: rgba(132, 152, 192, .34); }

.rl-drivers {
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

/* --- Alert crawl (NWS-style) --- */
.crawl {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 13, 23, .42);
  overflow: hidden;
}

.crawl-led {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--line);
  background: rgba(242, 58, 58, .14);
  color: #ffb1bc;
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
}

.crawl-view {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 96%, transparent);
}

.crawl-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 7px 0;
  animation: crawl-scroll 46s linear infinite;
}

.crawl-track.crawl-static { animation: none; padding-left: 12px; }

.crawl:hover .crawl-track { animation-play-state: paused; }

@keyframes crawl-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.crawl-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  color: #cdd8ea;
  font-size: 11.5px;
  font-weight: 500;
}

.crawl-item b { font-family: "Archivo", sans-serif; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; }
.crawl-dept { font-weight: 700; }
.crawl-dot { width: 7px; height: 7px; border-radius: 50%; }
.crawl-sep { color: var(--faint); opacity: .5; }

/* --- Command-bar buttons in topbar --- */
.btn-search {
  gap: 9px;
  border-color: var(--line-2);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.btn-search:hover,
.btn-search:focus-visible { color: var(--text); }

.search-ic { font-size: 15px; color: var(--cyan); }

.search-kbd,
.cmdk kbd,
.cmdk-esc {
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 600;
}

.btn-watch {
  gap: 9px;
  border-color: rgba(56, 189, 248, .34);
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), rgba(79, 70, 229, .08));
  color: #d9f5ff;
  font-weight: 700;
}

.watch-ic { color: var(--cyan); }

/* --- Watch Floor drawer --- */
body.watchfloor-open,
body.cmdk-open { overflow: hidden; }

.watchfloor {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  justify-content: flex-end;
  background: rgba(2, 5, 11, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.watchfloor.hidden { display: none; }

.wf-panel {
  display: flex;
  flex-direction: column;
  width: min(580px, 100%);
  height: 100%;
  border-left: 1px solid var(--line-2);
  background:
    radial-gradient(520px 300px at 90% 0%, rgba(56, 189, 248, .08), transparent 64%),
    linear-gradient(180deg, rgba(15, 22, 38, .98), rgba(6, 11, 21, .99));
  box-shadow: -40px 0 110px -50px rgba(0, 0, 0, .95);
  animation: wf-slide .42s cubic-bezier(.2, .82, .25, 1);
}

@keyframes wf-slide {
  from { transform: translateX(40px); opacity: .4; }
  to { transform: translateX(0); opacity: 1; }
}

.wf-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}

.wf-head h2 {
  margin: 4px 0 0;
  font-family: "Archivo", sans-serif;
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wf-head p { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; }

.wf-close {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.wf-close:hover { border-color: rgba(242, 58, 58, .5); }

.wf-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px 16px;
  gap: 14px;
}

.wf-sec {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  color: var(--faint);
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.wf-rec {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: cb-blink 1.4s steps(1) infinite;
}

.wf-journal { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.wf-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.oj-row {
  display: grid;
  grid-template-columns: 64px 88px 1fr;
  grid-template-areas: "time tag dept" "time text text";
  gap: 2px 9px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .022);
  font-size: 11.5px;
}

.oj-row.sev-red { border-left-color: var(--red); }
.oj-row.sev-amber { border-left-color: var(--amber); }
.oj-row.sev-green { border-left-color: var(--green); }

.oj-time { grid-area: time; align-self: center; color: var(--muted); font-size: 11px; }
.oj-tag {
  grid-area: tag;
  color: color-mix(in srgb, var(--ec, var(--cyan)) 80%, white);
  font-family: "Archivo", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.oj-dept { grid-area: dept; color: var(--faint); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; text-align: right; }
.oj-text { grid-area: text; color: #dbe6f7; line-height: 1.35; }

.oj-new { animation: oj-flash .9s ease; }

@keyframes oj-flash {
  0% { opacity: 0; transform: translateY(-6px); background: rgba(56, 189, 248, .14); }
  100% { opacity: 1; transform: none; background: rgba(255, 255, 255, .022); }
}

.wf-feeds { flex: 0 0 auto; max-height: 42%; display: flex; flex-direction: column; min-height: 0; }

.feed-rollup {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .08em;
}

.feed-rollup.ok { color: #8fefc4; border: 1px solid rgba(34, 211, 155, .4); background: rgba(34, 211, 155, .12); }
.feed-rollup.warn { color: #ffd98a; border: 1px solid rgba(245, 177, 42, .42); background: rgba(245, 177, 42, .12); }

.wf-board { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: 10px; padding-right: 4px; }

.fb-group { border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; background: rgba(255, 255, 255, .02); }

.fb-dept {
  color: var(--dc, var(--cyan));
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.fb-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  font-size: 11px;
}

.fb-dot { width: 8px; height: 8px; border-radius: 50%; }
.fb-name { color: #dbe6f7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-meta { grid-column: 2 / 3; color: var(--faint); font-family: "IBM Plex Mono", monospace; font-size: 9.5px; }
.fb-st { font-family: "IBM Plex Mono", monospace; font-size: 9px; font-weight: 700; letter-spacing: .06em; }

/* --- Command palette --- */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 12vh 18px 18px;
  background:
    radial-gradient(700px 420px at 50% 0%, rgba(56, 189, 248, .12), transparent 64%),
    rgba(2, 5, 11, .74);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.cmdk.hidden { display: none; }

.cmdk-panel {
  width: min(660px, 100%);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(rgba(56, 189, 248, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, .035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 22, 38, .98), rgba(7, 12, 22, .99));
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: 0 40px 120px -44px rgba(0, 0, 0, .96);
  animation: cmdk-in .26s cubic-bezier(.2, .82, .25, 1);
}

@keyframes cmdk-in {
  from { opacity: 0; transform: translateY(-12px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}

.cmdk-prompt { color: var(--cyan); font-size: 18px; }

.cmdk-input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  outline: none;
}

.cmdk-input::placeholder { color: var(--faint); }

.cmdk-results { max-height: 50vh; overflow-y: auto; padding: 8px; }

.cmdk-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.cmdk-row.is-active,
.cmdk-row:hover {
  border-color: rgba(56, 189, 248, .32);
  background: rgba(56, 189, 248, .1);
}

.cmdk-dot { width: 9px; height: 9px; border-radius: 50%; justify-self: center; }

.cmdk-ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.cmdk-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-hint { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-kind {
  color: var(--faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}

.cmdk-empty { padding: 26px; text-align: center; color: var(--muted); }

.cmdk-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 11px;
}

.cmdk-brand { margin-left: auto; font-family: "IBM Plex Mono", monospace; letter-spacing: .1em; }

/* --- Fusion-bar responsive --- */
@media (max-width: 900px) {
  .btn-search { font-size: 0; gap: 0; padding: 9px 12px; }
  .btn-search .search-ic { font-size: 16px; }
  .btn-search .search-kbd { display: none; }
}

@media (max-width: 820px) {
  .fusionbar { display: none; }
  .wf-panel { width: 100%; }
  .oj-row { grid-template-columns: 56px 1fr; grid-template-areas: "time tag" "text text"; }
  .oj-dept { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .crawl-track { animation: none; }
  .wf-panel,
  .cmdk-panel,
  .oj-new { animation: none; }
  .wf-rec { animation: none; }
}

/* --- M6 Fusion lens: 4-tab map row + fusion tab --- */
.map-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.fusion-tab .tab-ic {
  color: #a78bfa;
  background: rgba(167, 139, 250, .12);
  border-color: rgba(167, 139, 250, .3);
}

.fusion-tab.active {
  border-color: #a78bfa;
  box-shadow: inset 0 0 22px -14px #a78bfa, 0 12px 30px -24px #a78bfa;
}

/* Violet ambient wash while the fusion lens is engaged */
.mapwrap.fusion-mode::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70% 60% at 46% 42%, rgba(167, 139, 250, .1), transparent 70%);
}

.mapwrap.fusion-mode .map-head .ttl::after {
  content: " · FUSION LENS";
  color: #a78bfa;
}

@media (max-width: 820px) {
  .map-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- M7 Time playback scrubber --- */
.btn-replay {
  gap: 7px;
  min-height: 36px;
  border-color: rgba(167, 139, 250, .4);
  color: #d9c9ff;
  background: linear-gradient(135deg, rgba(167, 139, 250, .14), rgba(56, 189, 248, .05));
  font-size: 12px;
  font-weight: 700;
}

.btn-replay.on { border-color: #a78bfa; box-shadow: 0 0 22px -12px #a78bfa; }

.playback {
  position: absolute;
  z-index: 6;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: rgba(8, 13, 23, .92);
  box-shadow: 0 18px 50px -26px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.playback.hidden { display: none; }

.pb-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}

.pb-x:hover { border-color: rgba(242, 58, 58, .5); }

.pb-range { width: 220px; max-width: 40vw; accent-color: #a78bfa; cursor: pointer; }

.pb-day {
  min-width: 54px;
  text-align: center;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* --- Live telemetry tick flash (up = green glow, down = red glow) --- */
@keyframes tick-flash {
  0% { text-shadow: 0 0 13px var(--tick); transform: translateY(-1px); }
  100% { text-shadow: none; transform: none; }
}

.tick-up,
.tick-down { animation: tick-flash .9s ease; }
.tick-up { --tick: rgba(94, 227, 160, .75); }
.tick-down { --tick: rgba(255, 138, 152, .7); }

@media (prefers-reduced-motion: reduce) {
  .tick-up,
  .tick-down { animation: none; }
}

/* ============================================================
   UNIFIED AI INSIGHTS COMMAND CENTER
   Prominent live analysis (left) reading a quiet watch floor
   (right rail), readiness posture in the header. Centered modal.
   ============================================================ */

/* Slow the alert crawl down a touch */
.crawl-track { animation-duration: 72s; }

body.aibrief-open { overflow: hidden; }

.aibrief {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(760px 520px at 50% 8%, rgba(56, 189, 248, .16), transparent 62%),
    radial-gradient(620px 420px at 84% 86%, rgba(167, 139, 250, .1), transparent 64%),
    rgba(2, 5, 11, .8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.aibrief.hidden { display: none; }

.aibrief-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1040px, 94vw);
  max-height: min(860px, 92vh);
  overflow: hidden;
  border: 1px solid rgba(125, 145, 180, .3);
  border-radius: 22px;
  background:
    linear-gradient(rgba(56, 189, 248, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, .035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 22, 38, .97), rgba(6, 11, 21, .98));
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: 0 44px 120px -44px rgba(0, 0, 0, .96);
  animation: aibrief-in .42s cubic-bezier(.2, .82, .25, 1);
}

@keyframes aibrief-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.aibrief-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex: 0 0 auto;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
}

.aibrief-head-l { flex: 1; min-width: 0; }

.aibrief-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ai-mark.sm {
  width: auto;
  height: auto;
  padding: 2px 6px;
  font-size: 10px;
}

.aibrief-head h2 {
  margin: 6px 0 0;
  font-family: "Archivo", sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: linear-gradient(94deg, #ffffff, #cfe0f4 52%, #8fb9e6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.aibrief-head p { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; }

.aibrief-posture {
  flex: 0 0 auto;
  text-align: right;
  padding: 9px 15px;
  border: 1px solid color-mix(in srgb, var(--rl-c, var(--cyan)) 48%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--rl-c, var(--cyan)) 10%, transparent);
  box-shadow: inset 0 0 26px -16px var(--rl-c, var(--cyan));
}

.bp-k {
  color: var(--faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bp-v { font-family: "Archivo", sans-serif; font-size: 22px; font-weight: 800; color: var(--rl-c, var(--cyan)); line-height: 1.1; }
.bp-name { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rl-c, var(--cyan)); }

.aibrief-close {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.aibrief-close:hover { border-color: rgba(56, 189, 248, .6); }

.aibrief-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.aibrief-main { padding: 20px 22px 24px; }

/* --- Prominent AI analysis --- */
.brief-loading { display: grid; place-items: center; min-height: 280px; color: var(--muted); font-weight: 700; }

.brief-lead {
  padding: 16px 18px;
  border: 1px solid rgba(56, 189, 248, .32);
  border-radius: 16px;
  background:
    radial-gradient(280px 130px at 16% 0%, rgba(56, 189, 248, .16), transparent 70%),
    rgba(255, 255, 255, .028);
}

.brief-k {
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.brief-headline {
  margin-top: 7px;
  font-family: "Archivo", sans-serif;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
}

.brief-sub { margin-top: 9px; color: #c9d6ea; font-size: 13.5px; font-weight: 500; line-height: 1.45; }

.brief-block { margin-top: 18px; }

.brief-sec {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
  color: var(--faint);
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.brief-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.brief-focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.brief-focus {
  display: block;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--fc, var(--cyan)) 42%, var(--line));
  border-radius: 15px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--fc, var(--cyan)) 12%, transparent), transparent 70%), rgba(255, 255, 255, .024);
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.brief-focus:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--fc, var(--cyan)) 78%, white);
  box-shadow: 0 18px 48px -34px var(--fc, var(--cyan));
}
.bf-dept { color: color-mix(in srgb, var(--fc, var(--cyan)) 74%, white); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.bf-name { margin-top: 8px; font-size: 19px; font-weight: 800; }
.bf-val { margin-top: 5px; font-size: 22px; font-weight: 600; }
.bf-reason { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.38; }

.brief-points { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
.brief-points li { position: relative; padding-left: 19px; color: #dbe6f7; font-size: 13.5px; line-height: 1.44; }
.brief-points li::before { content: "▸"; position: absolute; left: 0; top: -1px; color: var(--cyan); }

.brief-moves { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.brief-moves li {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 11px;
  background: rgba(255, 255, 255, .024);
  color: #e7eefb;
  font-size: 13px;
  line-height: 1.4;
}
.bm-dept { font-family: "Archivo", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-right: 9px; }

/* --- Quiet watch-floor rail (low visual presence) --- */
.aibrief-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px 13px 16px;
  border-left: 1px solid var(--line);
  background: rgba(255, 255, 255, .012);
  opacity: .82;
}

.rail-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--faint);
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.aibrief-rail .feed-rollup { align-self: flex-start; margin: 8px 0 0; }

.rail-journal {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  padding-right: 3px;
}

.rail-journal .oj-row {
  grid-template-columns: 46px 1fr;
  grid-template-areas: "time tag" "text text";
  padding: 6px 8px;
  font-size: 10px;
}
.rail-journal .oj-dept { display: none; }
.rail-journal .oj-time { font-size: 9.5px; }
.rail-journal .oj-text { font-size: 10px; }

.rail-board { flex: 0 0 auto; max-height: 36%; overflow-y: auto; margin-top: 10px; display: grid; gap: 7px; padding-right: 3px; }
.rail-board .fb-group { padding: 7px 8px; }
.rail-board .fb-dept { font-size: 9px; margin-bottom: 5px; }
.rail-board .fb-row { grid-template-columns: 10px 1fr auto; gap: 7px; font-size: 9.5px; padding: 3px 0; }
.rail-board .fb-meta { font-size: 8.5px; }

@media (max-width: 900px) {
  .aibrief-body { grid-template-columns: 1fr; }
  .aibrief-rail { border-left: 0; border-top: 1px solid var(--line); max-height: 40vh; }
  .brief-focus-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .aibrief-panel { animation: none; }
}

/* Full-width live alert crawl (readiness gauge removed) */
.crawl-led { gap: 8px; color: #ffb1bc; }
.crawl-led-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 9px var(--red);
  animation: cb-blink 1.5s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .crawl-led-dot { animation: none; }
}

/* ───────────────────────── Signature 3D hero (tn-map-3d.js) ───────────────── */
.svg-stage.is-3d { height: 64vh; min-height: 560px; }
.svg-stage.is-3d > #tn-map,
.svg-stage.is-3d > #map-tooltip { display: none; }

.tn3d {
  position: absolute;
  inset: 0 0 0 0;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(70,98,150,.16), transparent 60%),
    linear-gradient(180deg, rgba(8,13,24,.30), rgba(4,7,14,.62));
  display: none;
}
.svg-stage.is-3d .tn3d { display: block; }
.tn3d-canvas { display: block; width: 100%; height: 100%; }

.tn3d-tip {
  position: absolute;
  transform: translate(14px, -50%);
  pointer-events: none;
  z-index: 4;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(9,14,25,.92);
  border: 1px solid rgba(125,145,180,.28);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.8);
  font: 600 12px/1.35 'Public Sans', system-ui, sans-serif;
  color: #e8eefb;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.tn3d-tip.hidden { display: none; }
.tn3d-tip b { display: block; font-size: 13px; letter-spacing: .01em; }
.tn3d-tip .s {
  display: inline-block;
  margin: 3px 6px 0 0;
  padding: 1px 7px;
  border-radius: 999px;
  font: 700 10px/1.4 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.tn3d-tip .s-red   { background: rgba(255,59,78,.16);  color: #ff8896; }
.tn3d-tip .s-amber { background: rgba(255,176,32,.16); color: #ffce7a; }
.tn3d-tip .s-green { background: rgba(47,224,138,.15); color: #7df0bd; }
.tn3d-tip i { font-style: normal; color: #9fb2d4; font-family: 'IBM Plex Mono', monospace; }

.tn3d-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tn3d-toggle .d3-ic { font-size: 13px; opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .tn3d { transition: none; }
}

/* ─────────────────────── Grid Acquisition intro (login-intro.js) ──────────── */
.grid-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: transparent;
  overflow: hidden;
  transform-origin: center;
}
.gi-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 120% at 50% 45%, #0a1322 0%, #05080f 60%, #03060c 100%);
  will-change: opacity;
}
.gi-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.gi-tn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(44vw, 500px);
  height: min(68vh, 640px);
  fill: none;
  opacity: 0;
  transform-origin: center;
  filter: drop-shadow(0 0 16px rgba(79, 224, 200, .35));
}
.gi-tn .gi-d {
  fill: none;
  stroke: #57c9bd;
  stroke-width: 2.2;
  stroke-linejoin: round;
  opacity: .9;
}
.gi-tn .gi-d.s-red   { stroke: #ff5a3c; }
.gi-tn .gi-d.s-amber { stroke: #ffb020; }
.gi-tn .gi-d.s-green { stroke: #3fe0a0; }

.gi-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #8fe6da;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.gi-corner {
  position: absolute;
  width: 34px; height: 34px;
  border: 1.5px solid rgba(79, 224, 200, .5);
}
.gi-corner.tl { top: 22px; left: 22px; border-right: 0; border-bottom: 0; }
.gi-corner.tr { top: 22px; right: 22px; border-left: 0; border-bottom: 0; }
.gi-corner.bl { bottom: 22px; left: 22px; border-right: 0; border-top: 0; }
.gi-corner.br { bottom: 22px; right: 22px; border-left: 0; border-top: 0; }

.gi-top { position: absolute; top: 30px; left: 34px; }
.gi-brand {
  font-weight: 600; font-size: 12px; letter-spacing: .26em;
  color: #cfeee7;
}
.gi-seq {
  margin-top: 5px; font-size: 10.5px; letter-spacing: .34em;
  color: rgba(123, 196, 184, .72);
}

.gi-reticle {
  position: absolute;
  inset: 0; margin: auto;
  width: 168px; height: 168px;
  opacity: 0;
}
.gi-reticle span {
  position: absolute; left: 50%; top: 50%;
  background: rgba(255, 106, 61, .85);
  box-shadow: 0 0 10px rgba(255, 106, 61, .6);
}
.gi-reticle span:first-child { width: 70%; height: 1.5px; transform: translate(-50%, -50%); }
.gi-reticle span:nth-child(2) { width: 1.5px; height: 70%; transform: translate(-50%, -50%); }
.gi-reticle i {
  position: absolute; inset: 0;
  border: 1.5px solid rgba(255, 106, 61, .65);
  border-radius: 50%;
  box-shadow: inset 0 0 18px rgba(255, 106, 61, .25), 0 0 14px rgba(255, 106, 61, .3);
  animation: gi-spin 8s linear infinite;
  clip-path: polygon(0 0,100% 0,100% 14%,0 14%,0 0, 0 86%,100% 86%,100% 100%,0 100%);
}
@keyframes gi-spin { to { transform: rotate(360deg); } }

.gi-readout {
  position: absolute;
  left: 0; right: 0; bottom: 11%;
  text-align: center;
  opacity: 0;
}
.gi-acq {
  font-size: 13px; font-weight: 600;
  letter-spacing: .22em; color: #d7f3ec;
}
.gi-acq .gi-dots { animation: gi-blink 1.1s steps(1) infinite; }
@keyframes gi-blink { 50% { opacity: .25; } }
.gi-coord {
  margin-top: 8px;
  display: inline-flex; gap: 22px;
  font-size: 12px; letter-spacing: .12em;
  color: #ff8a63;
}
.gi-coord b { font-weight: 600; }

.gi-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(79, 224, 200, .5), transparent);
  animation: gi-scanmove 3.6s ease-in-out infinite;
}
@keyframes gi-scanmove { 0% { top: 8%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 92%; opacity: 0; } }

.gi-skip {
  position: absolute;
  bottom: 26px; right: 30px;
  pointer-events: auto;
  background: rgba(10, 18, 30, .7);
  border: 1px solid rgba(79, 224, 200, .3);
  color: #aef0e4;
  font: 600 11px/1 'IBM Plex Mono', monospace;
  letter-spacing: .18em;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.gi-skip:hover { background: rgba(18, 30, 48, .9); border-color: rgba(79, 224, 200, .6); }

@media (prefers-reduced-motion: reduce) {
  .grid-intro { display: none; }
}

/* =====================================================================
   INSTITUTIONAL LIGHT THEME  (additive override — DEFAULT)
   Appended intentionally at EOF. Scoped under html[data-theme="silver"];
   edits NOTHING above. Removing this block (or any non-"light" theme
   value) restores the dark "command" theme byte-for-byte.
   Strategy: re-map shared tokens, then explicitly flatten the handful of
   surfaces that hardcode dark rgba()/gradients/glows and so ignore tokens.
   ===================================================================== */

/* --- Token remap (drives every rule that reads var()) --- */
html[data-theme="silver"] {
  /* Page canvas is a brushed silver-grey (not black); surfaces are lighter silver. */
  --bg: #888d96;
  --bg-2: #8e939b;
  --text: #1b2536;
  --muted: #56627a;
  --faint: #75809a;
  --line: #c3c8d0;
  --line-2: #b2b8c1;
  /* Status / RAG colours kept at the DARK-MODE values so the choropleth map
     (and badges/dots) are colour-identical to dark mode. */
  --green: #2fb37f;
  --amber: #e0a32a;
  --red: #e2483f;
  /* Accent: institutional steel-blue, darkened for white */
  --cyan: #2f6fb0;
  --accent: #2f6fb0;
  /* TVK accents kept; brand red darkened slightly for AA on white */
  --brand: #b80f29;
  --brand-2: #9e1b1b;
  --gold: #b7860b;
  /* Surfaces: solid white cards, neutral shadow, no glass blur */
  --glass: #dfe2e6;
  --glass-2: #d6d9dd;
  --shadow-1: 0 1px 2px rgba(16, 26, 46, .05), 0 8px 24px -18px rgba(16, 26, 46, .25);
  --shadow-2: 0 24px 60px -36px rgba(16, 26, 46, .35);
}

/* --- Page canvas: off-white, kill scanline/grid pseudo-elements ---
   Matches the WINNING body.tn-root::before (later in source) on element
   count and beats it on specificity, so the grid/scanlines never paint. */
html[data-theme="silver"] body.tn-root {
  background: linear-gradient(180deg, #8e939b 0%, #888d96 55%, #82878f 100%);
}
html[data-theme="silver"] body.tn-root::before,
html[data-theme="silver"] body.tn-root::after {
  display: none;
  background: none;
}

/* --- Frosted-glass surfaces -> solid white cards --- */
html[data-theme="silver"] .topbar,
html[data-theme="silver"] .panel,
html[data-theme="silver"] .mapwrap,
html[data-theme="silver"] .lineage-panel,
html[data-theme="silver"] .insights-panel {
  background: #dfe2e6;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="silver"] .card,
html[data-theme="silver"] .tab,
html[data-theme="silver"] .big-metric,
html[data-theme="silver"] .tile,
html[data-theme="silver"] .spark,
html[data-theme="silver"] .deptrow,
html[data-theme="silver"] .arow,
html[data-theme="silver"] .area-card,
html[data-theme="silver"] .district-alert-box {
  background: #e8eaed;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

/* Alert ROWS: the base fill is rgba(5,10,19,.42) — a dark-mode surface that
   reads as a muddy grey wash on the light panel. Re-base to a light surface,
   keep the faint diagonal status tint + the coloured left border, drop the
   dark inset glow. */
html[data-theme="silver"] .district-alert {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--alert-c) 13%, transparent), transparent 64%),
    #f6f7f9;
  box-shadow: none;
}

/* Tamed selected/active tab + priority area card */
html[data-theme="silver"] .tab.active,
html[data-theme="silver"] .deptrow.on,
html[data-theme="silver"] .area-card.is-top {
  border-color: var(--brand);
  background: #f0f1f3;
  box-shadow: 0 0 0 1px var(--brand) inset, var(--shadow-1);
}

/* TVK flag band (red -> gold -> red) kept in silver mode — uses the theme's
   darker brand/gold so the band stays legible on the light topbar. */
html[data-theme="silver"] .topbar::after,
html[data-theme="silver"] .topbar::before {
  background: linear-gradient(90deg, var(--brand) 0%, var(--gold) 50%, var(--brand) 100%);
  opacity: 1;
}
html[data-theme="silver"] .brand-mark {
  box-shadow: 0 0 0 1px var(--line);
}

/* --- Hero text: gradient-clip -> solid dark ink ---
   Covers the main hero group AND .aibrief-head h2 (a separate gradient-clip
   heading at ~3704) so the AI-brief title is not white-on-white. */
html[data-theme="silver"] .login-card h1,
html[data-theme="silver"] .detail-head h2,
html[data-theme="silver"] .panel .title,
html[data-theme="silver"] .aibrief-head h2 {
  background: none;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
}
/* "FLEXZ GOVERNANCE" wordmark keeps the TVK red -> gold -> red gradient in silver
   mode (theme's darker gold/red so it reads on the light topbar). */
html[data-theme="silver"] .brand h1 {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  background: linear-gradient(90deg, #ff3048 0%, #c8102e 36%, #ffcc33 38%, #ffcc33 64%, #c8102e 69%, #ff3048 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="silver"] .brand p { color: var(--muted); }

/* --- Pill / count-pill / source chip on white --- */
html[data-theme="silver"] .pill {
  color: var(--cyan);
  background: #eef4fb;
  border-color: #cfe0f1;
}
html[data-theme="silver"] .count-pill {
  background: #f1f4f9;
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="silver"] .source-info {
  color: var(--cyan);
  background: #eef4fb;
  border-color: #cfe0f1;
}
html[data-theme="silver"] .source-info:hover,
html[data-theme="silver"] .source-info:focus-visible {
  background: #e2eefb;
  border-color: var(--cyan);
}

/* --- Buttons: flat, no neon glow --- */
html[data-theme="silver"] .btn {
  color: var(--text);
  background: #ffffff;
  border-color: var(--line-2);
}
html[data-theme="silver"] .btn:hover,
html[data-theme="silver"] .btn:focus-visible {
  background: #f1f5fb;
  border-color: var(--cyan);
}
html[data-theme="silver"] .btn-search { color: var(--muted); background: #f6f8fc; }
html[data-theme="silver"] .btn-search:hover,
html[data-theme="silver"] .btn-search:focus-visible { color: var(--text); }
html[data-theme="silver"] .search-kbd { color: var(--faint); }

html[data-theme="silver"] .btn-primary {
  border-color: var(--cyan);
  background: var(--cyan);
  color: #ffffff;
  box-shadow: none;
}
html[data-theme="silver"] .btn-primary:hover,
html[data-theme="silver"] .btn-primary:focus-visible {
  border-color: #235f98;
  background: #276fb0;
  color: #ffffff;
  box-shadow: 0 12px 26px -18px rgba(39, 111, 176, .65);
}
html[data-theme="silver"] .btn-primary::after { display: none; }

/* AI Insights keeps its DARK pill in silver/light mode too (matches dark theme):
   a solid dark base is required because the dark theme's translucent green only
   reads dark over a dark page — on the light page it needs an opaque dark fill. */
html[data-theme="silver"] .btn-ai {
  color: #eafff5;
  border-color: rgba(47, 179, 127, .5);
  background:
    radial-gradient(90px 42px at 18% 0%, rgba(47, 179, 127, .22), transparent 72%),
    #0d1e16;
  box-shadow: 0 10px 26px -16px rgba(13, 30, 22, .55), inset 0 0 24px -20px var(--green);
}
html[data-theme="silver"] .btn-ai:hover,
html[data-theme="silver"] .btn-ai:focus-visible {
  border-color: rgba(47, 179, 127, .62);
  background:
    radial-gradient(90px 42px at 18% 0%, rgba(47, 179, 127, .30), transparent 72%),
    #11281d;
}
html[data-theme="silver"] .ai-mark {
  color: var(--green);
  background: rgba(5, 18, 12, .46);
  border-color: rgba(47, 179, 127, .5);
}
html[data-theme="silver"] .ai-mark.sm { color: #166534; background: #e7f6ed; border-color: #abdcbd; }

html[data-theme="silver"] .btn-logout:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Theme-toggle button: inherits .btn; tighten spacing */
html[data-theme="silver"] .btn-theme { gap: 8px; }
.btn-theme { gap: 8px; min-width: 0; }
.btn-theme .theme-ic { font-size: 15px; line-height: 1; }
.btn-theme .theme-lbl { font-size: 12px; font-weight: 600; }

/* --- Status RAG: chips & big-value tones, AA on white --- */
html[data-theme="silver"] .badge.green {
  color: #166534; background: #e7f6ed; border-color: #abdcbd;
}
html[data-theme="silver"] .badge.amber {
  color: #92400e; background: #fdf2e3; border-color: #f0cf9a;
}
html[data-theme="silver"] .badge.red {
  color: #991b1b; background: #fcebea; border-color: #f0b4b0;
}
html[data-theme="silver"] .card.tone-green .v { color: var(--green); }
html[data-theme="silver"] .card.tone-amber .v { color: var(--amber); }
html[data-theme="silver"] .card.tone-red .v   { color: var(--red); }

/* --- Map: keep RAG fills (JS-driven), tidy separators/outlines --- */
html[data-theme="silver"] .district {
  stroke: #ffffff;
  fill-opacity: .92;
}
html[data-theme="silver"] .district:hover {
  stroke: #1b2536;
  filter: none;
}
html[data-theme="silver"] .district.is-top {
  stroke: var(--gold);
  filter: none;
}
html[data-theme="silver"] .svg-stage::after { display: none; }

/* --- Fusion bar / alert crawl (hardcoded dark rgba) --- */
html[data-theme="silver"] .readiness {
  background: #f6f8fc;
  border-color: var(--line-2);
  box-shadow: none;
  color: var(--text);
  --rl-c: var(--cyan);
}
html[data-theme="silver"] .rl-seg { background: #d8dfea; }
html[data-theme="silver"] .rl-seg.on { background: #9fb0c8; }
html[data-theme="silver"] .rl-arrow,
html[data-theme="silver"] .rl-v { color: var(--cyan); filter: none; }
html[data-theme="silver"] .crawl {
  background: #ffffff;
  border-color: var(--line);
}
html[data-theme="silver"] .crawl-led {
  background: #fcebea;
  color: var(--red);
  border-right-color: var(--line);
}
html[data-theme="silver"] .crawl-item { color: var(--text); }
html[data-theme="silver"] .crawl-sep { color: var(--faint); }

/* --- Panel/card body text that HARDCODES light-gray ink for the dark
   surfaces (#c9d6ea / #cdd8ea / #dbe6f7 / #dce8f7 / #cfdae9). On the now-white
   surfaces these are near-invisible, so re-ink to a readable dark token.
   (.lineage-tip / .map-tooltip keep their own intentional dark backgrounds,
   so their light ink stays legible and is left alone.) --- */
html[data-theme="silver"] .ai-card-title,
html[data-theme="silver"] .ai-card-copy,
html[data-theme="silver"] .alert-text,
html[data-theme="silver"] .insight-row span,
html[data-theme="silver"] .node-records,
html[data-theme="silver"] .kpi-list li,
html[data-theme="silver"] .oj-text,
html[data-theme="silver"] .fb-name,
html[data-theme="silver"] .legend .row {
  color: var(--text);
}
/* Legend chip: light surface in the silver theme (base chip is dark, which would
   leave the now-dark legend text unreadable on it). */
html[data-theme="silver"] .legend {
  background: #e8eaed;
  border-color: var(--line);
}
/* --- Silver mode rides a DARK page canvas, so the few elements that sit on the
   bare background (alerts ticker, footer) need treating: the ticker becomes a
   silver surface (its text is already dark); the footer text goes light. --- */
html[data-theme="silver"] .crawl {
  background: #dde0e4;
  border-color: var(--line);
}
html[data-theme="silver"] .foot,
html[data-theme="silver"] .foot * {
  color: #2a2f37;
}
html[data-theme="silver"] .lineage-note { color: var(--muted); }
html[data-theme="silver"] .oj-tag {
  color: var(--cyan);
}

/* Fusion-lens signature violet: deepen for AA contrast on white. */
html[data-theme="silver"] .fusion-tab .tab-ic { color: #6d4bd6; background: #efeafd; }
html[data-theme="silver"] .mapwrap.fusion-mode .map-head .ttl::after { color: #6d4bd6; }

/* Watch-floor feed-rollup status chips (light green/amber ink on pale tints
   read low-contrast on white) -> darken ink for AA. */
html[data-theme="silver"] .feed-rollup.ok {
  color: #166534; border-color: #abdcbd; background: #e7f6ed;
}
html[data-theme="silver"] .feed-rollup.warn {
  color: #92400e; border-color: #f0cf9a; background: #fdf2e3;
}

/* --- Command palette & AI brief panels (multi-layer dark gradients) --- */
html[data-theme="silver"] .cmdk-panel {
  background: #ffffff;
  border-color: var(--line-2);
  box-shadow: var(--shadow-2);
}
html[data-theme="silver"] .cmdk-prompt { color: var(--cyan); }
html[data-theme="silver"] .aibrief-panel {
  background: #ffffff;
  border-color: var(--line-2);
  box-shadow: var(--shadow-2);
}
/* AI-brief body content: these hardcode light ink (#fff / #c9d6ea / #dbe6f7 /
   #e7eefb) for the dark panel — re-ink dark so they stay legible on white. */
html[data-theme="silver"] .brief-headline { color: var(--text); }
html[data-theme="silver"] .brief-sub,
html[data-theme="silver"] .brief-points li,
html[data-theme="silver"] .brief-moves li { color: var(--text); }
html[data-theme="silver"] .brief-lead {
  border-color: #cfe0f1;
  background: #f4f8fd;
}
html[data-theme="silver"] .brief-focus { background: #f6f8fc; }
html[data-theme="silver"] .brief-focus:hover { box-shadow: var(--shadow-1); }
html[data-theme="silver"] .brief-moves li { background: #f6f8fc; }
html[data-theme="silver"] .aibrief-rail {
  background: #f8fafc;
  opacity: 1;
}
html[data-theme="silver"] .aibrief-close { color: var(--muted); }
html[data-theme="silver"] .aibrief-close:hover { border-color: var(--cyan); }

/* tn3d hero tooltip rides over the light map; keep it readable */
html[data-theme="silver"] .tn3d-tip {
  background: #ffffff;
  border-color: var(--line-2);
  color: var(--text);
  box-shadow: var(--shadow-1);
}
html[data-theme="silver"] .tn3d-tip i { color: var(--muted); }

/* --- Login surfaces & inputs --- */
html[data-theme="silver"] .login-page::after { display: none; }
html[data-theme="silver"] .login-mark { box-shadow: none; }
html[data-theme="silver"] .login-form input,
html[data-theme="silver"] .login-form select {
  background: #ffffff;
  border-color: var(--line-2);
  color: var(--text);
}
html[data-theme="silver"] .login-form input:hover,
html[data-theme="silver"] .login-form select:hover {
  border-color: var(--cyan);
}
html[data-theme="silver"] .username-suggestions {
  background: #ffffff;
  border-color: var(--line-2);
  box-shadow: 0 18px 42px -28px rgba(16, 26, 46, .38);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="silver"] .username-suggestions button {
  color: var(--text);
}
html[data-theme="silver"] .username-suggestions button:hover,
html[data-theme="silver"] .username-suggestions button:focus-visible,
html[data-theme="silver"] .username-suggestions button.is-active {
  background: #eaf3fc;
  color: var(--text);
}

/* --- Scrollbars / selection / focus on light --- */
html[data-theme="silver"] * {
  scrollbar-color: #b7c1d2 transparent;
}
html[data-theme="silver"] *::-webkit-scrollbar-thumb {
  background: #b7c1d2; background-clip: content-box;
}
html[data-theme="silver"] *::-webkit-scrollbar-thumb:hover {
  background: #9aa7bd; background-clip: content-box;
}
html[data-theme="silver"] ::selection {
  background: rgba(47, 111, 176, .22);
  color: var(--text);
}
html[data-theme="silver"] :focus-visible {
  outline-color: var(--brand);
}

/* --- AI summary card decorative glow -> subtle tint --- */
html[data-theme="silver"] .ai-summary-card {
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}
html[data-theme="silver"] .ai-summary-card::before { opacity: .14; }

/* ============================================================
   PRESSURE-TEST FIXES (post-workflow)
   ============================================================ */

/* 1. "Nothing loops forever": kill the beacon-style pulse on the priority
      district, priority ward card, and lineage nodes — in BOTH themes. The
      resting look (static gold outline / solid cards) is already defined. */
/* Priority district BLINKS on the map (restored at user request) — a clear gold
   pulse so the top district is unmistakable. Other forever-loops stay disabled. */
.area-card.is-top { animation: none !important; }
.lineage-node { animation: none !important; }
.district.is-top {
  stroke: var(--gold);
  stroke-opacity: 1;
  animation: flexz-top-blink 1.3s ease-in-out infinite !important;
}
@keyframes flexz-top-blink {
  0%, 100% { stroke-width: 3; filter: drop-shadow(0 0 5px rgba(242, 184, 7, .72)); }
  50%      { stroke-width: 5; filter: drop-shadow(0 0 14px rgba(242, 184, 7, .98)) drop-shadow(0 0 6px rgba(242, 184, 7, .9)); }
}

/* Critical ward cards BLINK ("Critical ward blinks", per the key). This must beat
   the global `.area-card.is-top { animation: none !important }` disable above —
   the top ward is also red, and it's the one that most needs to blink — so the
   rule is targeted + !important, mirroring the restored map-district blink. */
.area-card.status-red {
  animation: ward-critical-blink 1.2s ease-in-out infinite !important;
}
@keyframes ward-critical-blink {
  0%, 100% {
    border-color: var(--red);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 35%, transparent),
                0 0 0 rgba(242, 58, 58, 0);
  }
  50% {
    border-color: var(--red);
    box-shadow: 0 0 0 1px var(--red),
                0 0 22px -3px var(--red), inset 0 0 30px -16px var(--red);
  }
}
@media (prefers-reduced-motion: reduce) {
  .district.is-top { animation: none !important; stroke-width: 3; }
}

/* Map reverted to SVG — keep the ECharts geo overlay fully hidden so it can't
   re-intercept the dept-tab clicks. */
#tn-geo-map { display: none !important; }

/* The department tabs (Police/Health/PDS/Combined) are absolutely positioned
   over the bottom of the map; the SVG was stacking above them and swallowing
   their clicks. Anchor them to .mapwrap and lift them above the map. */
.mapwrap { position: relative; }
.map-tabs { z-index: 15; }
.svg-stage { z-index: 0; }

/* 2. Light theme missed these hardcoded-dark surfaces (pressure-test blockers).
      The data-lineage modal is a lead-the-demo feature and was rendering dark
      navy nodes with re-inked dark text = invisible on the white panel. */
html[data-theme="silver"] .lineage-node {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}
html[data-theme="silver"] .node-icon {
  background: #f1f4f9;
  border-color: var(--line);
}
html[data-theme="silver"] .node-title { color: var(--text); }
/* Map / lineage tooltips keep their dark backgrounds, so their text must stay
   LIGHT in silver mode (var(--text) is dark here → was invisible on hover). */
html[data-theme="silver"] .lineage-tip,
html[data-theme="silver"] #map-tooltip { color: #e6eaf2; }
html[data-theme="silver"] #map-tooltip .m,
html[data-theme="silver"] .tip .m { color: #9aa6b8; }

/* 3. Login screen (first impression) showed a dark navy slab on the off-white
      canvas — flatten the frosted panel and drop the cyan logo glow in light. */
html[data-theme="silver"] .login-stage::before,
html[data-theme="silver"] .login-page.is-open .login-stage::before {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="silver"] .login-logo-trigger { filter: none; }
html[data-theme="silver"] .login-hud .corner { border-color: var(--line); opacity: .5; }


/* =====================================================================
   PUBLIC SANS — self-hosted USWDS institutional typeface
   Source: U.S. Web Design System Public Sans, repackaged as static
   per-weight woff2 by Fontsource (@fontsource/public-sans@5.2.7).
   LICENSE: SIL Open Font License 1.1 (NOT CC0 — Public Sans is a
   Modified Version of Libre Franklin; the combined work is OFL-1.1).
   Full text travels with the fonts at
   dashboard/static/dashboard/vendor/fonts/public-sans/OFL.txt.
   Latin-only subset; var(--font-sans) keeps a system-ui fallback.
   Appended at EOF — additive, reversible; removing this block (and the
   --font-sans token) restores the prior Google-hosted IBM Plex Sans.
   ===================================================================== */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/public-sans/public-sans-400.60715978fab2.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/public-sans/public-sans-500.38c037ffedf4.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/public-sans/public-sans-600.6b1fe1f62892.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/fonts/public-sans/public-sans-700.3c0eda7c2982.woff2") format("woff2");
}

/* =====================================================================
   ARCHIVO (headings) + IBM PLEX MONO (numerals) — self-hosted to complete
   air-gap / offline operation (closes the pressure-test "Google Fonts CDN"
   gap). Static per-weight woff2 from @fontsource. Archivo = OFL-1.1;
   IBM Plex Mono = OFL-1.1. The Google Fonts <link> was removed from base.html.
   ===================================================================== */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/fonts/archivo/archivo-700.8574a5d7eebc.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../vendor/fonts/archivo/archivo-800.fbd292f0a665.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono/ibm-plex-mono-500.b1c8a895f5fd.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono/ibm-plex-mono-600.5a2ce7798732.woff2") format("woff2");
}

/* =====================================================================
   TABLER IDIOMS (borrowed CSS only — MIT, github.com/tabler/tabler).
   No Bootstrap, no framework, no assets imported. Additive + reversible:
   restyles EXISTING components in place, reuses existing tokens, and is
   safe in both themes (chip colours ride --green/--amber/--red which
   already have html[data-theme="silver"] overrides). Append-only after the
   USWDS / Public Sans block (current EOF).

   NOTE re --space-*: a sibling USWDS integration already defines the
   --space-* scale at ~line 2538 on an 8px base (8/16/24/32/40/48), and it
   is consumed elsewhere (.card padding, etc.). We therefore DO NOT redefine
   it here — that would silently corrupt app-wide spacing. We reuse the
   existing rungs where the intended size matches (8→--space-1, 16→--space-2,
   24→--space-3) and use literals for in-between values. Only namespaced
   --tbl-* keys are introduced below; they collide with nothing.
   ===================================================================== */

:root {
  /* Tabler-style consistent card geometry. Namespaced keys only — does NOT
     redefine --line/--glass/--shadow-1/--space-*, so the authoritative
     :root (~2506) and the USWDS --space-* scale (~2538) are untouched. */
  --tbl-radius-card: 15px;
  --tbl-radius-row: 11px;
  --tbl-row-hairline: var(--line);
}

/* --- (a) Tabler "stat card" treatment for the summary KPI cards.
       Big numeral + small UPPERCASE label is already the shape; Tabler tunes
       the rhythm: tighter label tracking + a hairline above the value, with
       tabular figures so digits don't jitter. We deliberately do NOT set
       .v font-size here — the responsive overrides (status view ~1966, the
       <=560px rule ~2485) keep their tuned sizes; only additive properties
       are layered on, so no specificity fight and every view keeps its
       intended numeral size. The .k/.v/.u markup is unchanged. --- */
.card .k {
  font-size: 11px;
  letter-spacing: .08em;
}
.card .v {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--tbl-row-hairline);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.card .u {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 500;
}

/* --- (a.2) Honest "status chip" on the summary card.
       No numeric delta exists in the data, so the real signal is card.tone
       (green/amber/red). Turn the tone into a Tabler status chip pinned to
       the BOTTOM-right of the card — clear of the top-right .source-info (ⓘ)
       button that lives in .card-top — using the SAME status tokens the
       .badge uses, so both themes inherit. Pure CSS: ::after reads tone. --- */
.card.tone-green,
.card.tone-amber,
.card.tone-red { position: relative; }
.card.tone-green::after,
.card.tone-amber::after,
.card.tone-red::after {
  position: absolute;
  right: 16px;
  bottom: 14px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* Label keyed off the existing tone class (data has no per-card delta/label;
   if a template later sets data-tone-label, swap content to attr() — no other
   CSS change needed). */
.card.tone-green::after { content: "Normal"; }
.card.tone-amber::after { content: "Watch"; }
.card.tone-red::after   { content: "Critical"; }
.card.tone-green::after {
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 42%, transparent);
  background: color-mix(in srgb, var(--green) 14%, transparent);
}
.card.tone-amber::after {
  color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
}
.card.tone-red::after {
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 42%, transparent);
  background: color-mix(in srgb, var(--red) 14%, transparent);
}
/* Reserve space on the value's last line so a wide numeral can't run under
   the bottom-right chip (~70px wide for "Critical"). */
.card.tone-green .v,
.card.tone-amber .v,
.card.tone-red .v { padding-right: 78px; }

/* --- (a.3) Tabler delta chip on the ONLY component with real delta data:
       the detail-view tiles (.tile-delta already carries .over/.under/
       .on-target from fmtDelta(), dashboard.js ~407). Promote text -> pill.
       Colours reuse --red/--green/--muted (all have light overrides), so
       both themes work. This OVERRIDES the prior plain-text colour rules at
       ~841-843 (same specificity, later in source = wins). --- */
.tile .tile-delta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.tile .tile-delta.over {
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  background: color-mix(in srgb, var(--red) 13%, transparent);
}
.tile .tile-delta.under {
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
  background: color-mix(in srgb, var(--green) 13%, transparent);
}
.tile .tile-delta.on-target {
  color: var(--muted);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}
/* Arrow glyph in front of the delta — direction matches over/under sense. */
.tile .tile-delta.over::before  { content: "\25B2"; font-size: 7px; }
.tile .tile-delta.under::before { content: "\25BC"; font-size: 7px; }

/* --- (b) Tabler "data-table" idioms on the LIST components that read as
       tables (alert list + dept-overview). They are <button> flex rows with
       click handlers, NOT <table>s, so we lift the TREATMENT only: zebra
       rows, right-aligned tabular numerics, and a clear hover row. No DOM
       change -> the qsa(".arow"/".deptrow") click JS + the light overrides
       stay intact. "Sticky header" is intentionally dropped (no header row
       exists to stick). --- */

/* Tighten the alert list into a table-like stack (flat rows, shared hairline,
   zebra) framed by a single 1px outer border. */
#alert-list.alist {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--tbl-radius-row);
  overflow: hidden;
  background: transparent;
}
#alert-list.alist .arow {
  border: 0;
  border-bottom: 1px solid var(--tbl-row-hairline);
  border-radius: 0;
  background: transparent;
}
#alert-list.alist .arow:last-child { border-bottom: 0; }
#alert-list.alist .arow:nth-child(even) {
  background: color-mix(in srgb, var(--muted) 5%, transparent);
}
#alert-list.alist .arow:hover {
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}
/* Right-align the numeric column, lock tabular figures so digits don't jitter. */
#alert-list.alist .arow .av {
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* dept-overview rows -> same table rhythm (right-aligned tabular .val). */
.dept-overview .deptrow .val {
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.dept-overview .deptrow:hover {
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}

/* --- (c) Consistent card radius / hairline / section header (Tabler card +
       card-header idiom) on existing surfaces. Reuses tokens only. --- */
.card { border-radius: var(--tbl-radius-card); }
/* Section header band: tighten .sec-t's rhythm/tracking, keeping its existing
   trailing-hairline rule (.sec-t::after at ~852) intact. --space-3 = 24px
   (USWDS) top, 10px bottom (matches the prior .sec-t margin shape). */
.sec-t {
  margin: var(--space-3) 0 10px;
  font-size: 10.5px;
  letter-spacing: .12em;
}

/* --- Light-theme parity: most chips ride color-mix() over --green/--amber/
       --red/--cyan/--muted, which are already remapped under
       html[data-theme="silver"] (~4136+), so they recolour for free. Only the
       zebra/hover need more contrast on solid white, and the status chip gets
       the AA-tuned inks the codebase already uses for .badge in light. --- */
html[data-theme="silver"] #alert-list.alist {
  border-color: var(--line);
}
html[data-theme="silver"] #alert-list.alist .arow:nth-child(even) {
  background: #f6f8fc;
}
html[data-theme="silver"] #alert-list.alist .arow:hover,
html[data-theme="silver"] .dept-overview .deptrow:hover {
  background: #eef4fb;
}
html[data-theme="silver"] .card.tone-green::after {
  color: #166534; border-color: #abdcbd; background: #e7f6ed;
}
html[data-theme="silver"] .card.tone-amber::after {
  color: #92400e; border-color: #f0cf9a; background: #fdf2e3;
}
html[data-theme="silver"] .card.tone-red::after {
  color: #991b1b; border-color: #f0b4b0; background: #fcebea;
}

/* ============================================================
   ECharts integration (Apache 2.0, vendored).
   Trend chart container + GEO choropleth overlay. Append-only;
   does not alter any existing token or selector.
   ============================================================ */

/* Trend: ECharts needs an explicitly sized box (it makes its own canvas).
   Mirrors the old `.spark canvas` sizing + the area/district flex overrides
   (those desktop overrides use `height:100% !important`, so we match it). */
.spark .trend-chart {
  display: block;
  width: 100%;
  height: 148px;
  max-height: 180px;
}
@media (min-width: 1100px) {
  body[data-view="district"] .spark .trend-chart,
  body[data-view="area"] .spark .trend-chart {
    height: 100% !important;
    max-height: 220px;
    flex: 1 1 auto;
    /* Floor to prevent the ECharts collapse-to-28px bug, but low enough that the
       chart shrinks to fit the panel's available space (dense views like PDS leave
       little room) instead of overflowing it and being clipped by overflow:hidden. */
    min-height: 40px;
  }
}

/* GEO map overlay: sits over the same .svg-stage box as #tn-map.
   The SVG stays in the DOM (fusion/playback/login-intro need it); we just
   layer the ECharts choropleth above it for the dept (Police/Health/PDS) views. */
.tn-geo-map {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}
/* The status legend (Normal/Watch/Critical key) is position:absolute with no
   stacking context of its own; raise it above the overlay so it stays visible
   on the dept (ECharts) view. */
.svg-stage .legend { z-index: 3; }
/* When fusion-center paints the shared SVG (Combined tab) or playback opens, JS
   adds .geo-hidden so the ECharts overlay steps aside and the SVG shows through.
   showGeoOverlay(true) calls resize() so re-show on a previously-hidden box paints. */
.tn-geo-map.geo-hidden {
  display: none;
}
/* Keep the SVG visually behind the overlay during dept views (it is wiped/idle
   then anyway); fusion/playback re-raise it implicitly since the overlay is hidden. */
.svg-stage > #tn-map {
  position: relative;
  z-index: 1;
}
/* Defensive only: the dormant 3D-hero `.is-3d` mode (tn-map-3d.js, not currently
   loaded). Use visibility, not display, so ECharts keeps a measurable box and
   never inits at 0×0. The live globe intro is a fixed full-screen overlay that
   paints ABOVE this layer, so it needs no rule here. */
.svg-stage.is-3d .tn-geo-map { visibility: hidden; }

/* =====================================================================
   VAULT-GREY BACKGROUND (default theme). ONLY the page background differs
   from the dark theme — every other colour (map, RAG status, accents, cards,
   text) is inherited unchanged. The white "institutional light" rules
   (html[data-theme="silver"]) are intentionally orphaned: the toggle now uses
   "grey" <-> "dark", so those 130+ rules never match. (Safe to delete later.)
   ===================================================================== */
html[data-theme="grey"] {
  --bg: #25282d;
  --bg-2: #262a32;
  /* Grey BOXES too (was navy cards on a grey page): surfaces a step lighter
     than the canvas so panels/cards read as grey, not blue. Token-driven, so it
     cascades to .topbar/.panel/.mapwrap/.card/.tile/etc. */
  --glass: rgba(61, 68, 80, .96);
  --glass-2: rgba(52, 59, 70, .94);
  --panel: rgba(61, 68, 80, .94);
  --panel-2: rgba(52, 59, 70, .9);
  --line: rgba(168, 178, 194, .16);
  --line-2: rgba(168, 178, 194, .28);
}
html[data-theme="grey"] body.tn-root {
  background: linear-gradient(180deg, #2b2f34 0%, #25282d 58%, #1f2227 100%);
}
/* Card inner sheen: lift cards a touch above the grey panels so boxes are clear. */
html[data-theme="grey"] .card,
html[data-theme="grey"] .tile,
html[data-theme="grey"] .big-metric,
html[data-theme="grey"] .deptrow,
html[data-theme="grey"] .arow,
html[data-theme="grey"] .area-card,
html[data-theme="grey"] .spark,
html[data-theme="grey"] .district-alert-box {
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
}
html[data-theme="grey"] body.tn-root::before {
  background: radial-gradient(135% 125% at 50% 36%, transparent 64%, rgba(15, 17, 19, 0.45) 100%);
}
html[data-theme="grey"] body.tn-root::after { display: none; }

/* =====================================================================
   TVK FLAG-COLOUR ACCENTS (used more prominently, per request).
   Red --brand (#c8102e) + gold --gold (#f2b807), evoking the TVK flag.
   Applied in BOTH backgrounds. Functional RAG status colours are untouched.
   ===================================================================== */
/* Flag band along the top AND bottom edges of the command bar (red → gold → red). */
.topbar::after,
.topbar::before {
  height: 2px;
  opacity: 1;
  background: linear-gradient(90deg, var(--brand) 0%, var(--gold) 50%, var(--brand) 100%);
}
/* "Live Demo" pill → TVK red, with a live yellow indicator dot. */
.pill {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pill::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px 1px rgba(242, 184, 7, .85);
  animation: pill-live-blink 1.8s ease-in-out infinite;
}
@keyframes pill-live-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px 1px rgba(242, 184, 7, .85); }
  50% { opacity: .5; box-shadow: 0 0 2px 0 rgba(242, 184, 7, .3); }
}
@media (prefers-reduced-motion: reduce) {
  .pill::before { animation: none; }
}
/* Brand wordmark uses the same red -> gold -> red blend as the topbar bands. */
.brand h1 {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, var(--gold) 50%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand h1.brand-wordmark,
html[data-theme="silver"] .brand h1.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--brand) 0%, var(--gold) 50%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-wordmark span {
  display: inline-block;
}

.brand-wordmark .wm-flexz {
  margin-right: .28em;
}

/* Section eyebrows in gold; section titles get a TVK-red accent bar. */
.eyebrow { color: var(--gold); }
.sec-t { border-left: 3px solid var(--brand); padding-left: 10px; }
/* AI Insights stays green-on-green (signal colour, not party accent);
   "Live Alerts" LED in TVK red. */
.btn-ai .ai-mark { color: var(--green); border-color: rgba(47, 179, 127, .52); }
.crawl-led { color: var(--brand); }
/* Active department tab: a TVK-red underline accent on top of its dept colour. */
.dept-tab.active { box-shadow: inset 0 -3px 0 0 var(--brand); }

/* =====================================================================
   SILVER MAP FINISH + PREMIUM SURFACES  (appended layer — additive)

   Silver/light mode keeps the map on a light surface. The priority district
   uses a gold accent and city-point marker so it stays visible without turning
   the whole map stage dark.
   ===================================================================== */

/* --- 1. Silver: light map stage with a city-point priority marker --- */
html[data-theme="silver"] .svg-stage {
  margin: 2px 14px 14px;
  border: 1px solid #c8ced8;
  border-radius: 16px;
  background:
    radial-gradient(110% 100% at 50% 46%, rgba(255, 255, 255, .74) 0%, rgba(239, 242, 246, .42) 58%, rgba(218, 223, 231, .5) 100%),
    linear-gradient(180deg, #f3f5f8 0%, #e8ebf0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .86),
    0 14px 32px -26px rgba(16, 26, 46, .34);
}

html[data-theme="silver"] .svg-stage::after {
  display: none;
}

html[data-theme="silver"] .district {
  stroke: #ffffff;
  fill-opacity: .92;
  filter: none;
}
html[data-theme="silver"] .district:hover {
  stroke: #2f3743;
  fill-opacity: 1;
  filter: none;
}
html[data-theme="silver"] .district.is-home {
  stroke: var(--cyan);
}

html[data-theme="silver"] .district.is-top {
  stroke: #ffcc33;
  stroke-opacity: 1;
  stroke-width: 4;
  stroke-linejoin: round;
  paint-order: fill stroke markers;
  fill-opacity: 1;
  animation: flexz-top-blink-light 1.35s ease-in-out infinite !important;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .95))
    drop-shadow(0 0 8px rgba(255, 204, 51, .88))
    drop-shadow(0 0 18px rgba(242, 184, 7, .48));
}

@keyframes flexz-top-blink-light {
  0%, 100% {
    stroke-width: 3.6;
    filter:
      drop-shadow(0 0 2px rgba(255, 255, 255, .9))
      drop-shadow(0 0 7px rgba(255, 204, 51, .76));
  }
  50% {
    stroke-width: 5.4;
    filter:
      drop-shadow(0 0 3px rgba(255, 255, 255, 1))
      drop-shadow(0 0 12px rgba(255, 204, 51, .98))
      drop-shadow(0 0 22px rgba(242, 184, 7, .62));
  }
}

.priority-beacon {
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(242, 184, 7, .55));
}
.priority-beacon-ring,
.priority-beacon-halo,
.priority-beacon-dot {
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}
.priority-beacon-ring {
  fill: none;
  stroke: rgba(255, 204, 51, .92);
  stroke-width: 2.2;
  animation: priority-beacon-expand 1.55s ease-out infinite;
}
.priority-beacon-ring-two {
  animation-delay: .78s;
}
.priority-beacon-halo {
  fill: rgba(255, 204, 51, .18);
  stroke: rgba(255, 248, 207, .86);
  stroke-width: 1.4;
}
.priority-beacon-dot {
  fill: #ffcc33;
  stroke: #fff8cf;
  stroke-width: 2;
  animation: priority-beacon-dot 1.15s ease-in-out infinite;
}
html[data-theme="silver"] .priority-beacon {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .9))
    drop-shadow(0 0 10px rgba(242, 184, 7, .62));
}
html[data-theme="silver"] .priority-beacon-halo {
  fill: #ffffff;
  stroke: rgba(242, 184, 7, .74);
}

@keyframes priority-beacon-expand {
  0% { opacity: .94; transform: scale(.42); }
  72% { opacity: .24; }
  100% { opacity: 0; transform: scale(2.25); }
}
@keyframes priority-beacon-dot {
  0%, 100% { opacity: .9; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .priority-beacon-ring,
  .priority-beacon-dot {
    animation: none !important;
  }
}

html[data-theme="silver"] .svg-stage .legend {
  border-color: var(--line);
  background: rgba(232, 234, 237, .92);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="silver"] .svg-stage .legend .row { color: var(--text); }
html[data-theme="silver"] .svg-stage .legend .lg-t { color: var(--faint); }
html[data-theme="silver"] .legend .dot.top {
  border-color: #ffcc33;
  animation: legend-top-pulse 1.3s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255, 204, 51, .72);
}

/* --- 2. Silver: brushed-metal finish on surfaces + canvas vignette --- */
html[data-theme="silver"] body.tn-root::before {
  display: block;
  background: radial-gradient(130% 120% at 50% 34%, transparent 58%, rgba(26, 32, 44, .32) 100%);
}
html[data-theme="silver"] .topbar,
html[data-theme="silver"] .panel,
html[data-theme="silver"] .mapwrap,
html[data-theme="silver"] .lineage-panel,
html[data-theme="silver"] .insights-panel {
  background: linear-gradient(180deg, #e6e9ed 0%, #dfe2e6 54%, #d9dce1 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--shadow-1);
}
html[data-theme="silver"] .card,
html[data-theme="silver"] .tab,
html[data-theme="silver"] .big-metric,
html[data-theme="silver"] .tile,
html[data-theme="silver"] .spark,
html[data-theme="silver"] .deptrow,
html[data-theme="silver"] .arow,
html[data-theme="silver"] .area-card,
html[data-theme="silver"] .district-alert-box {
  background: linear-gradient(180deg, #edeff2 0%, #e6e8ec 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--shadow-1);
}
html[data-theme="silver"] .tab:hover,
html[data-theme="silver"] .tab:focus-visible {
  border-color: var(--line-2);
  background: #f2f4f7;
}

/* --- 3. Both themes: legend as a proper map key (title + Priority row) --- */
.legend .lg-t {
  margin-bottom: 2px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Gold pulsing ring = the priority-district blink, explained in the key. */
.legend .dot.top {
  background: transparent;
  border: 2.5px solid var(--gold);
  animation: legend-top-pulse 1.3s ease-in-out infinite;
}
@keyframes legend-top-pulse {
  0%, 100% { box-shadow: 0 0 3px rgba(242, 184, 7, .35); }
  50%      { box-shadow: 0 0 9px rgba(242, 184, 7, .8); }
}

/* --- 4. Both themes: sheen sweep across the AI Insights CTA on hover --- */
.btn-ai {
  position: relative;
  overflow: hidden;
}
.btn-ai::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .26), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn-ai:hover::after,
.btn-ai:focus-visible::after { left: 130%; }

@media (prefers-reduced-motion: reduce) {
  .legend .dot.top { animation: none; }
  .btn-ai::after { display: none; }
}

/* =====================================================================
   STATUS HOME DESKTOP HEIGHT
   The post-login home screen must behave like a cockpit on laptop-height
   viewports: one browser viewport, no page scroll. Compress the status
   home instead of releasing the body lock when height is tight.
   ===================================================================== */
@media (min-width: 821px) and (max-height: 859px) {
  body.tn-root[data-view="status"] {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  body[data-view="status"] .shell {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    padding: 6px 10px 4px;
    overflow: hidden;
  }

  body[data-view="status"] .fusionbar {
    min-height: 30px;
    margin: 0 0 5px;
    gap: 6px;
  }

  body[data-view="status"] .crawl {
    border-radius: 9px;
  }

  body[data-view="status"] .crawl-led {
    padding: 0 9px;
    font-size: 9px;
    letter-spacing: .16em;
  }

  body[data-view="status"] .crawl-track {
    padding: 5px 0;
  }

  body[data-view="status"] .crawl-track.crawl-static {
    padding-left: 9px;
  }

  body[data-view="status"] .crawl-item {
    gap: 6px;
    padding: 0 10px;
    font-size: 10.5px;
  }

  body[data-view="status"] .topbar {
    min-height: 52px;
    padding: 6px 10px;
    gap: 10px;
    border-radius: 13px;
  }

  body[data-view="status"] .brand {
    flex: 1 1 390px;
    gap: 9px;
  }

  body[data-view="status"] .brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 8px;
  }

  body[data-view="status"] .brand h1 {
    font-size: 13px;
    letter-spacing: .1em;
  }

  body[data-view="status"] .brand p {
    max-width: 360px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-view="status"] .pill {
    padding: 3px 7px;
    font-size: 9px;
  }

  body[data-view="status"] .topcenter {
    gap: 6px;
    flex: 0 1 440px;
    min-width: 0;
  }

  body[data-view="status"] .topright {
    gap: 8px;
    flex: 0 0 auto;
  }

  body[data-view="status"] .btn {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 9px;
  }

  body[data-view="status"] .btn-search {
    flex: 1 1 170px;
    min-width: 0;
  }

  body[data-view="status"] .btn-ai {
    gap: 8px;
    min-width: 154px;
    min-height: 36px;
    padding: 7px 10px;
    font-size: 13px;
  }

  body[data-view="status"] .ai-mark {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 11px;
  }

  body[data-view="status"] .clock .t {
    font-size: 14px;
  }

  body[data-view="status"] .clock .d,
  body[data-view="status"] .who .u {
    font-size: 10px;
  }

  body[data-view="status"] .who .r {
    font-size: 12px;
  }

  body[data-view="status"] .cards {
    flex: 0 0 auto;
    gap: 8px;
    margin-top: 6px;
  }

  body[data-view="status"] .card {
    min-height: 74px;
    padding: 9px 11px;
  }

  body[data-view="status"] .ai-summary-card {
    min-height: 74px;
  }

  body[data-view="status"] .ai-card-label,
  body[data-view="status"] .ai-card-status {
    font-size: 9.5px;
  }

  body[data-view="status"] .ai-card-title {
    margin-top: 6px;
    font-size: 16px;
    line-height: 1.05;
  }

  body[data-view="status"] .ai-card-copy {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 11px;
    line-height: 1.22;
  }

  body[data-view="status"] .card .v {
    margin-top: 6px;
    padding-top: 6px;
    font-size: 22px;
  }

  body[data-view="status"] .card .u {
    font-size: 12px;
  }

  body[data-view="status"] .status-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr);
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 6px;
  }

  body[data-view="status"] .mapwrap,
  body[data-view="status"] .status-grid > .panel {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
  }

  body[data-view="status"] .map-head {
    align-items: center;
    flex: 0 0 auto;
    padding: 8px 10px 4px;
  }

  body[data-view="status"] .map-actions {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  body[data-view="status"] .btn-lineage {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 11px;
  }

  body[data-view="status"] .status-counts {
    flex-wrap: nowrap;
    gap: 6px;
  }

  body[data-view="status"] .count-pill {
    padding: 4px 7px;
    font-size: 10px;
  }

  body[data-view="status"] .svg-stage {
    flex: 1 1 auto;
    min-height: 0;
  }

  body[data-view="status"] .tnmap {
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 0 6px 58px;
  }

  body[data-view="status"] .legend {
    left: 10px;
    bottom: 56px;
    gap: 4px;
    padding: 8px 9px;
    border-radius: 10px;
  }

  body[data-view="status"] .legend .row {
    gap: 6px;
    font-size: 10.5px;
  }

  body[data-view="status"] .map-tabs {
    right: 8px;
    bottom: 8px;
    left: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  body[data-view="status"] .tab {
    min-height: 40px;
    padding: 6px 8px;
    gap: 8px;
    border-radius: 10px;
  }

  body[data-view="status"] .tab-ic {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 8px;
  }

  body[data-view="status"] .tab-tx .l {
    font-size: 12px;
  }

  body[data-view="status"] .tab-tx .s {
    display: none;
  }

  body[data-view="status"] .status-grid > .panel {
    padding: 10px;
  }

  body[data-view="status"] .panel-h {
    gap: 8px;
  }

  body[data-view="status"] .panel .title {
    margin-top: 2px;
    font-size: 22px;
  }

  body[data-view="status"] .badge {
    padding: 4px 7px;
    font-size: 9.5px;
  }

  body[data-view="status"] .big-metric {
    flex: 0 0 auto;
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
  }

  body[data-view="status"] .bm-k {
    font-size: 11px;
  }

  body[data-view="status"] .bm-v {
    margin-top: 4px;
    font-size: 36px;
  }

  body[data-view="status"] .sec-t {
    gap: 7px;
    margin: 12px 0 7px;
    font-size: 9.5px;
  }

  body[data-view="status"] .status-grid .alist {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  body[data-view="status"] .status-grid .arow {
    padding: 7px 9px;
  }

  body[data-view="status"] .arow .an {
    font-size: 13px;
  }

  body[data-view="status"] .arow .av {
    font-size: 11px;
  }

  body[data-view="status"] .foot {
    display: none;
  }
}

@media (min-width: 821px) and (max-width: 1150px) and (max-height: 859px) {
  body[data-view="status"] .status-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(270px, .85fr);
  }

  body[data-view="status"] .brand {
    flex-basis: 300px;
  }

  body[data-view="status"] .brand p,
  body[data-view="status"] .pill,
  body[data-view="status"] .clock .d,
  body[data-view="status"] .who .u,
  body[data-view="status"] .search-kbd {
    display: none;
  }

  body[data-view="status"] .topcenter {
    flex-basis: 330px;
  }

  body[data-view="status"] .btn-ai {
    min-width: 126px;
  }

  body[data-view="status"] .btn-logout {
    padding-right: 9px;
    padding-left: 9px;
  }

  body[data-view="status"] .ai-card-copy {
    -webkit-line-clamp: 1;
  }
}

@media (min-width: 821px) and (max-height: 720px) {
  body[data-view="status"] .shell {
    padding-top: 4px;
  }

  body[data-view="status"] .fusionbar {
    min-height: 28px;
    margin-bottom: 4px;
  }

  body[data-view="status"] .topbar {
    min-height: 48px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  body[data-view="status"] .cards {
    gap: 6px;
    margin-top: 5px;
  }

  body[data-view="status"] .card,
  body[data-view="status"] .ai-summary-card {
    min-height: 64px;
  }

  body[data-view="status"] .ai-card-copy,
  body[data-view="status"] .mtr,
  body[data-view="status"] .status-counts {
    display: none;
  }

  body[data-view="status"] .status-grid {
    gap: 8px;
    margin-top: 5px;
  }

  body[data-view="status"] .map-head {
    padding-top: 7px;
  }

  body[data-view="status"] .tnmap {
    padding-bottom: 52px;
  }

  body[data-view="status"] .map-tabs {
    bottom: 6px;
  }

  body[data-view="status"] .tab {
    min-height: 36px;
    padding: 5px 7px;
  }

  body[data-view="status"] .legend {
    display: none;
  }

  body[data-view="status"] .panel .title {
    font-size: 20px;
  }

  body[data-view="status"] .big-metric {
    margin-top: 8px;
    padding: 8px;
  }

  body[data-view="status"] .bm-v {
    font-size: 32px;
  }

  body[data-view="status"] .sec-t {
    margin-top: 10px;
  }
}

/* Detail pages still prefer natural scrolling on very short desktop
   viewports, because their panels contain more independent content than the
   status cockpit. */
@media (min-width: 821px) and (max-height: 859px) {
  body.tn-root[data-view="district"],
  body.tn-root[data-view="area"] {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-view="district"] .shell,
  body[data-view="area"] .shell {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  /* --- District / Area detail: panels take content height, nothing clips --- */
  body[data-view="district"] .detail-grid > .panel,
  body[data-view="area"] .detail-grid > .panel {
    height: auto;
    overflow: visible;
  }
  /* Trend chart: a fixed box again (the 100%!important flex sizing collapses
     to its 40px floor once the panel is content-sized). */
  body[data-view="district"] .spark .trend-chart,
  body[data-view="area"] .spark .trend-chart {
    height: 170px !important;
    max-height: 200px;
    flex: 0 0 auto;
  }
  /* Live alert ticker: fixed window again instead of flex-grow. */
  body[data-view="district"] .alert-marquee {
    height: 200px;
    min-height: 200px;
    flex: 0 0 auto;
  }
}

/* =====================================================================
   VIEWPORT-CONTAINED GOVERNANCE PORTAL
   Final cascade layer for governance.flexz.ai desktop app shells.
   The dashboard must occupy exactly the browser viewport, keep every track
   fluid, and never create document-level horizontal overflow.
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --app-pad-x: clamp(.625rem, .82vw, 1.125rem);
  --app-pad-y: clamp(.375rem, .62vh, .75rem);
  --app-gap: clamp(.375rem, .7vw, .875rem);
  --app-radius: clamp(.625rem, .76vw, 1rem);
  --space-1: clamp(.375rem, .48vw, .5rem);
  --space-2: clamp(.625rem, .86vw, 1rem);
  --space-3: clamp(.875rem, 1.14vw, 1.5rem);
  --space-4: clamp(1.125rem, 1.45vw, 2rem);
  --type-kpi-lg: clamp(1.9rem, 2.2vw, 2.55rem);
  --type-kpi-md: clamp(1.35rem, 1.75vw, 2rem);
  --type-kpi-sm: clamp(1rem, 1.15vw, 1.25rem);
  --type-title: clamp(1.1rem, 1.28vw, 1.5rem);
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body.tn-root {
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}

img,
svg,
canvas,
video {
  max-inline-size: 100%;
}

.shell,
.topbar,
.fusionbar,
.main,
.cards,
.tabs,
.panel,
.mapwrap,
.svg-stage,
.area-panel,
.lineage-panel,
.aibrief-panel,
.cmdk-panel,
.wf-panel {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.brand > div,
.topcenter,
.topright,
.panel-h > div,
.map-head > div,
.detail-head > div,
.tab-tx,
.card,
.tile,
.arow,
.deptrow,
.area-card,
.ai-summary-card,
.brief-focus,
.insight-focus {
  min-inline-size: 0;
}

.brand h1,
.brand p,
.panel .title,
.detail-head h2,
.tab-tx .l,
.tab-tx .s,
.arow .an,
.deptrow .dl,
.deptrow .dm,
.cmdk-label,
.cmdk-hint {
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand h1,
.brand h1.brand-wordmark,
html[data-theme="silver"] .brand h1.brand-wordmark {
  width: auto;
  max-inline-size: 100%;
}

.btn,
.badge,
.pill,
.count-pill,
.clock,
.who {
  min-inline-size: 0;
}

@supports not (overflow: clip) {
  html,
  body.tn-root {
    overflow-x: hidden;
  }
}

@media (min-width: 821px) {
  body.tn-root[data-view="status"],
  body.tn-root[data-view="district"],
  body.tn-root[data-view="area"] {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
  }

  body[data-view="status"] .shell,
  body[data-view="district"] .shell,
  body[data-view="area"] .shell {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    block-size: 100vh;
    block-size: 100dvh;
    max-inline-size: 100vw;
    max-block-size: 100vh;
    max-block-size: 100dvh;
    margin: 0;
    padding: var(--app-pad-y) var(--app-pad-x);
    gap: 0;
    overflow: hidden;
  }

  body[data-view="status"] .fusionbar,
  body[data-view="district"] .fusionbar,
  body[data-view="area"] .fusionbar {
    min-block-size: clamp(1.75rem, 3.7vh, 2.375rem);
    margin: 0 0 var(--app-gap);
    gap: var(--app-gap);
  }

  body[data-view="status"] .topbar,
  body[data-view="district"] .topbar,
  body[data-view="area"] .topbar {
    flex: 0 0 auto;
    min-block-size: clamp(3rem, 6.4vh, 4.25rem);
    gap: var(--app-gap);
    padding: clamp(.375rem, .78vh, .75rem) clamp(.625rem, .9vw, 1rem);
    border-radius: var(--app-radius);
    overflow: hidden;
  }

  body[data-view="status"] .brand,
  body[data-view="district"] .brand,
  body[data-view="area"] .brand {
    flex: 1 1 30%;
    gap: clamp(.5rem, .72vw, .875rem);
    min-inline-size: 0;
  }

  body[data-view="status"] .brand-mark,
  body[data-view="district"] .brand-mark,
  body[data-view="area"] .brand-mark {
    inline-size: clamp(2.25rem, 3.05vw, 3.125rem);
    block-size: clamp(2.25rem, 3.05vw, 3.125rem);
    flex: 0 0 clamp(2.25rem, 3.05vw, 3.125rem);
  }

  body[data-view="status"] .brand h1,
  body[data-view="district"] .brand h1,
  body[data-view="area"] .brand h1 {
    font-size: clamp(.78rem, .92vw, 1rem);
    letter-spacing: clamp(.045em, .22vw, .1em);
  }

  body[data-view="status"] .brand p,
  body[data-view="district"] .brand p,
  body[data-view="area"] .brand p {
    font-size: clamp(.62rem, .74vw, .75rem);
    white-space: nowrap;
  }

  body[data-view="status"] .topcenter,
  body[data-view="district"] .topcenter,
  body[data-view="area"] .topcenter {
    flex: 1 1 31%;
    justify-content: center;
    gap: clamp(.375rem, .6vw, .75rem);
    min-inline-size: 0;
  }

  body[data-view="status"] .topright,
  body[data-view="district"] .topright,
  body[data-view="area"] .topright {
    flex: 1 1 36%;
    justify-content: flex-end;
    gap: clamp(.375rem, .68vw, .875rem);
    min-inline-size: 0;
  }

  body[data-view="status"] .btn,
  body[data-view="district"] .btn,
  body[data-view="area"] .btn {
    min-block-size: clamp(2rem, 4.3vh, 2.5rem);
    padding: clamp(.375rem, .66vh, .625rem) clamp(.5rem, .74vw, .875rem);
    border-radius: clamp(.5rem, .62vw, .7rem);
    font-size: clamp(.72rem, .78vw, .875rem);
    white-space: nowrap;
  }

  body[data-view="status"] .btn-search,
  body[data-view="district"] .btn-search,
  body[data-view="area"] .btn-search {
    flex: 1 1 clamp(8rem, 12vw, 15rem);
    max-inline-size: clamp(9rem, 17vw, 18rem);
    overflow: hidden;
  }

  body[data-view="status"] .btn-ai,
  body[data-view="district"] .btn-ai,
  body[data-view="area"] .btn-ai {
    flex: 0 1 clamp(7.75rem, 12vw, 13rem);
    min-inline-size: 0;
    min-block-size: clamp(2rem, 4.5vh, 2.75rem);
    gap: clamp(.375rem, .55vw, .625rem);
    font-size: clamp(.72rem, .82vw, .94rem);
  }

  body[data-view="status"] .ai-mark,
  body[data-view="district"] .ai-mark,
  body[data-view="area"] .ai-mark {
    inline-size: clamp(1.35rem, 1.75vw, 2rem);
    block-size: clamp(1.35rem, 1.75vw, 1.875rem);
    flex: 0 0 clamp(1.35rem, 1.75vw, 2rem);
  }

  body[data-view="status"] .clock .t,
  body[data-view="district"] .clock .t,
  body[data-view="area"] .clock .t {
    font-size: clamp(.78rem, .9vw, 1rem);
  }

  body[data-view="status"] .clock .d,
  body[data-view="status"] .who .u,
  body[data-view="district"] .clock .d,
  body[data-view="district"] .who .u,
  body[data-view="area"] .clock .d,
  body[data-view="area"] .who .u {
    font-size: clamp(.58rem, .65vw, .7rem);
  }

  body[data-view="status"] .who .r,
  body[data-view="district"] .who .r,
  body[data-view="area"] .who .r {
    font-size: clamp(.68rem, .74vw, .82rem);
  }

  body[data-view="status"] .main,
  body[data-view="district"] .main,
  body[data-view="area"] .main {
    gap: var(--app-gap);
    min-block-size: 0;
    margin-top: var(--app-gap);
  }

  body[data-view="status"] .status-grid,
  body[data-view="district"] .detail-grid,
  body[data-view="area"] .detail-grid {
    flex: 1 1 auto;
    min-block-size: 0;
    /* CRITICAL for short screens: pin the single grid row to the flex-assigned
       height. With the default auto row (+ align-items:start from .main) the
       panels sized to their CONTENT, overflowing downward and pushing the
       Ward View off the bottom of smaller laptops. A definite minmax(0,1fr)
       row makes the panels' height:100% real, so their inner flex columns
       compress (spark/alert marquee shrink) instead of the page clipping. */
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
  }

  body[data-view="status"] .status-grid {
    grid-template-columns: minmax(0, 1.58fr) minmax(clamp(16rem, 24vw, 25rem), .92fr);
  }

  body[data-view="district"] .detail-grid,
  body[data-view="area"] .detail-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(clamp(16rem, 25vw, 26rem), .9fr);
  }

  body[data-view="status"] .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--app-gap);
    flex: 0 0 auto;
    margin-top: var(--app-gap);
  }

  body[data-view="status"] .card {
    min-block-size: clamp(4rem, 9.8vh, 7rem);
    padding: clamp(.5rem, .94vh, .875rem) clamp(.625rem, .88vw, 1rem);
    overflow: hidden;
  }

  body[data-view="status"] .card .v {
    font-size: clamp(1.25rem, 1.9vw, 2rem);
  }

  body[data-view="status"] .ai-card-title {
    font-size: clamp(.95rem, 1.25vw, 1.35rem);
  }

  body[data-view="status"] .ai-card-copy {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: clamp(.66rem, .78vw, .82rem);
  }

  body[data-view="status"] .mapwrap,
  body[data-view="status"] .status-grid > .panel,
  body[data-view="district"] .detail-grid > .panel,
  body[data-view="area"] .detail-grid > .panel {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
    border-radius: var(--app-radius);
  }

  body[data-view="status"] .map-head,
  body[data-view="district"] .panel-h,
  body[data-view="area"] .panel-h {
    flex: 0 0 auto;
  }

  body[data-view="status"] .svg-stage {
    flex: 1 1 auto;
    min-block-size: 0;
    block-size: auto;
  }

  body[data-view="status"] .svg-stage.is-3d {
    block-size: auto;
    min-block-size: 0;
  }

  body[data-view="status"] .tnmap {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    max-block-size: none;
    padding: 0 clamp(.25rem, .45vw, .625rem) clamp(3.25rem, 8vh, 6rem);
  }

  body[data-view="status"] .map-tabs {
    inset-inline: clamp(.5rem, .75vw, 1rem);
    bottom: clamp(.375rem, .8vh, 1rem);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.3125rem, .54vw, .75rem);
  }

  body[data-view="status"] .legend {
    left: clamp(.5rem, .75vw, 1rem);
    bottom: clamp(3.5rem, 8.2vh, 6rem);
    max-inline-size: min(12rem, 24%);
    gap: clamp(.2rem, .38vh, .45rem);
    padding: clamp(.45rem, .72vh, .7rem) clamp(.5rem, .68vw, .8rem);
  }

  body[data-view="status"] .status-grid > .panel,
  body[data-view="district"] .detail-grid > .panel,
  body[data-view="area"] .detail-grid > .panel {
    padding: clamp(.625rem, .9vw, 1rem);
  }

  body[data-view="status"] .status-grid .alist,
  body[data-view="district"] .dept-overview,
  body[data-view="area"] .dept-overview,
  body[data-view="district"] .district-alert-box {
    min-block-size: 0;
    overflow: hidden;
  }

  body[data-view="status"] .status-grid .alist {
    flex: 1 1 auto;
  }

  /* The department strip must NEVER lose a row: with flex-shrink it was the
     PDS row (last in DEPT_ORDER) that got clipped under the alert box when
     the viewport-locked panel ran out of height. Keep the strip rigid and
     compress the row chrome instead; the alert marquee absorbs the squeeze. */
  body[data-view="district"] .dept-overview,
  body[data-view="area"] .dept-overview {
    flex: 0 0 auto;
    overflow: visible;
  }

  body[data-view="district"] .deptrow,
  body[data-view="area"] .deptrow {
    min-height: clamp(2.5rem, 6vh, 3.375rem);
    margin-bottom: clamp(.3rem, .7vh, .45rem);
    padding-top: clamp(.3rem, .72vh, .5rem);
    padding-bottom: clamp(.3rem, .72vh, .5rem);
  }

  body[data-view="district"] .district-alert-box {
    flex: 1 1 auto;
    /* Always keep a readable alert window, but never let it push the dept
       strip out of the panel. */
    min-block-size: clamp(4.25rem, 11vh, 7.5rem);
  }

  body[data-view="district"] .alert-marquee {
    block-size: auto;
    min-block-size: 0;
    flex: 1 1 auto;
  }

  body[data-view="district"] .detail-head,
  body[data-view="area"] .detail-head,
  body[data-view="district"] .compact-tabs,
  body[data-view="area"] .compact-tabs {
    flex: 0 0 auto;
  }

  body[data-view="district"] .detail-head,
  body[data-view="area"] .detail-head {
    margin-top: var(--app-gap);
    padding-inline: clamp(.125rem, .3vw, .25rem);
  }

  body[data-view="district"] .detail-head h2,
  body[data-view="area"] .detail-head h2 {
    font-size: clamp(1.05rem, 1.5vw, 1.75rem);
  }

  body[data-view="district"] .compact-tabs,
  body[data-view="area"] .compact-tabs {
    gap: var(--app-gap);
    margin-top: var(--app-gap);
  }

  body[data-view="status"] .tab,
  body[data-view="district"] .tab,
  body[data-view="area"] .tab {
    min-block-size: clamp(2.25rem, 5.2vh, 3.8rem);
    gap: clamp(.375rem, .62vw, .75rem);
    padding: clamp(.375rem, .72vh, .75rem) clamp(.5rem, .72vw, .875rem);
    overflow: hidden;
  }

  body[data-view="status"] .tab-ic,
  body[data-view="district"] .tab-ic,
  body[data-view="area"] .tab-ic {
    inline-size: clamp(1.6rem, 2.2vw, 2.5rem);
    block-size: clamp(1.6rem, 2.2vw, 2.5rem);
    flex-basis: clamp(1.6rem, 2.2vw, 2.5rem);
  }

  body[data-view="district"] .big-metric,
  body[data-view="area"] .big-metric,
  body[data-view="district"] .tiles,
  body[data-view="area"] .tiles,
  body[data-view="district"] .spark,
  body[data-view="area"] .spark {
    margin-top: var(--app-gap);
  }

  body[data-view="district"] .tiles,
  body[data-view="area"] .tiles {
    gap: clamp(.375rem, .55vw, .625rem);
    /* Auto-fit instead of a hard 2-up grid: PDS has 5 tiles (other depts 4),
       and the third 2-up row was crushing the trend chart to its floor —
       the "straight line" bug. On a desktop panel the tiles now share one
       or two compact rows and the chart keeps its height. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(7.25rem, 10.5vw, 10.5rem)), 1fr));
  }

  body[data-view="district"] .tile,
  body[data-view="area"] .tile {
    min-block-size: clamp(3.25rem, 7.5vh, 4.625rem);
    padding: clamp(.5rem, .82vh, .75rem) clamp(.5rem, .68vw, .8rem);
    overflow: hidden;
  }

  body[data-view="district"] .spark,
  body[data-view="area"] .spark {
    flex: 1 1 auto;
    /* A real floor: below ~6rem the ECharts line reads as a squashed straight
       line. Tiles/metric above are clamped, so this floor always fits. */
    min-block-size: clamp(6rem, 16vh, 12rem);
  }

  body[data-view="district"] .spark .trend-chart,
  body[data-view="area"] .spark .trend-chart {
    block-size: 100% !important;
    min-block-size: 0;
    max-block-size: none;
  }

  body[data-view="district"] .area-panel {
    display: flex;
    flex: 0 1 clamp(6.5rem, 18vh, 12.25rem);
    flex-direction: column;
    /* The Ward View must NEVER be squeezed out: keep a complete band
       (header + name + value + badge) at any viewport height. */
    min-block-size: clamp(8.75rem, 16.5vh, 12.5rem);
    margin-top: var(--app-gap);
    padding: clamp(.5rem, .75vw, .875rem);
    overflow: hidden;
  }

  body[data-view="district"] .area-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: clamp(.375rem, .58vw, .75rem);
    flex: 1 1 auto;
    min-block-size: 0;
    margin-top: clamp(.375rem, .62vh, .625rem);
    overflow: hidden;
  }

  /* Ward cards: content must scale with the card's HEIGHT (vh), not the
     viewport width — a vw-sized numeral inside a vh-sized card was taller
     than its box and got chopped by overflow:hidden on most desktops. */
  body[data-view="district"] .area-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: 0;
    padding: clamp(.35rem, .7vh, .7rem) clamp(.5rem, .7vw, .875rem);
    overflow: hidden;
  }

  body[data-view="district"] .area-card .area-name {
    /* Never let the ward NAME be the flex-shrink victim: like the status chip
       (flex:0 0 auto below), it must survive every viewport height. Without
       this, a short card shrinks this line to 0 and overflow:hidden clips the
       name away entirely — leaving only the value + badge. It truncates
       HORIZONTALLY (ellipsis), never collapses vertically. */
    flex: 0 0 auto;
    min-block-size: 0;
    overflow: hidden;
    font-size: clamp(.72rem, 1.6vh, .85rem);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-view="district"] .area-card .area-value {
    margin-top: clamp(.1rem, .5vh, .4rem);
    font-size: clamp(.95rem, 2.4vh, 1.5rem);
  }

  body[data-view="district"] .area-card .badge {
    /* Status chip (Normal/Watch/Critical) must survive EVERY viewport
       height: compact, height-scaled, never display:none. */
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: clamp(.1rem, .45vh, .45rem);
    padding: clamp(1px, .35vh, 5px) clamp(4px, .5vw, 9px);
    font-size: clamp(.5rem, 1.35vh, .66rem);
  }

  body[data-view="status"] .foot,
  body[data-view="district"] .foot,
  body[data-view="area"] .foot {
    flex: 0 0 auto;
    min-block-size: 0;
    margin-top: clamp(.25rem, .48vh, .5rem);
    font-size: clamp(.58rem, .64vw, .72rem);
    overflow: hidden;
  }

  .lineage-modal,
  .aibrief,
  .cmdk,
  .watchfloor {
    max-inline-size: 100vw;
    max-block-size: 100vh;
    max-block-size: 100dvh;
    overflow: hidden;
  }

  .lineage-panel,
  .aibrief-panel,
  .cmdk-panel {
    inline-size: min(100%, calc(100vw - (var(--app-pad-x) * 2)));
    max-block-size: calc(100dvh - (var(--app-pad-y) * 2));
  }

  .lineage-map {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: min(36rem, 68vh);
  }
}

@media (min-width: 821px) and (max-width: 1380px) {
  body[data-view="status"] .search-kbd,
  body[data-view="district"] .search-kbd,
  body[data-view="area"] .search-kbd,
  body[data-view="status"] .clock .d,
  body[data-view="district"] .clock .d,
  body[data-view="area"] .clock .d,
  body[data-view="status"] .who .u,
  body[data-view="district"] .who .u,
  body[data-view="area"] .who .u {
    display: none;
  }

  body[data-view="status"] .topright,
  body[data-view="district"] .topright,
  body[data-view="area"] .topright {
    flex-basis: 31%;
  }

  body[data-view="status"] .btn-theme .theme-lbl,
  body[data-view="district"] .btn-theme .theme-lbl,
  body[data-view="area"] .btn-theme .theme-lbl {
    display: none;
  }
}

@media (min-width: 821px) and (max-height: 760px) {
  body[data-view="status"] .brand p,
  body[data-view="district"] .brand p,
  body[data-view="area"] .brand p,
  body[data-view="status"] .pill,
  body[data-view="district"] .pill,
  body[data-view="area"] .pill,
  body[data-view="status"] .foot,
  body[data-view="district"] .foot,
  body[data-view="area"] .foot {
    display: none;
  }

  body[data-view="status"] .topbar,
  body[data-view="district"] .topbar,
  body[data-view="area"] .topbar {
    min-block-size: clamp(2.625rem, 6.2vh, 3.25rem);
  }

  body[data-view="status"] .cards {
    gap: clamp(.25rem, .45vw, .5rem);
    margin-top: clamp(.25rem, .5vh, .5rem);
  }

  body[data-view="status"] .card,
  body[data-view="status"] .ai-summary-card {
    min-block-size: clamp(3.25rem, 8.8vh, 4.5rem);
  }

  body[data-view="status"] .ai-card-copy,
  body[data-view="status"] .mtr {
    display: none;
  }

  body[data-view="district"] .area-panel {
    flex-basis: clamp(5.25rem, 15vh, 8.5rem);
  }
}

@media (min-width: 1600px) {
  body[data-view="status"] .status-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(clamp(18rem, 22vw, 30rem), .82fr);
  }

  body[data-view="district"] .detail-grid,
  body[data-view="area"] .detail-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(clamp(18rem, 23vw, 31rem), .82fr);
  }
}

@media (min-width: 821px) {
  .login-page {
    inline-size: 100vw;
    block-size: 100vh;
    block-size: 100dvh;
    min-block-size: 0;
    padding: clamp(.75rem, 1.6vw, 1.5rem);
    overflow: hidden;
  }

  .login-stage {
    inline-size: min(100%, 72rem);
    min-block-size: min(100%, clamp(28rem, 72vh, 38.75rem));
    grid-template-columns: minmax(0, 1fr) minmax(min(21rem, 36vw), .42fr);
    gap: clamp(1.25rem, 5vw, 4.625rem);
  }

  .login-card {
    inline-size: min(100%, 26.25rem);
    padding: clamp(1rem, 2vw, 1.75rem);
  }

  .login-logo-trigger {
    inline-size: min(39vw, 33.75rem);
  }

  .login-page.is-open .login-logo-trigger {
    left: clamp(16rem, 31%, 29rem);
    inline-size: min(30vw, 25rem);
  }
}

/* =====================================================================
   BIG-DISPLAY SCALE-UP (command-wall TVs / 4K desktops)
   The fluid tokens above cap near the 1480px design width, so on a large
   panel the cockpit was rendering laptop-sized type inside huge empty
   panels. From 1920px CSS width up, let the same vw/vh curves keep
   tracking the viewport (higher rem caps) and scale the fixed-px body
   roles (rows, tiles, alerts, badges) that the tokens don't cover.
   Still one screen, no scroll: only type/spacing grow — every track stays
   flex/grid-bound to the viewport-locked shell.
   ===================================================================== */
@media (min-width: 1920px) {
  :root {
    --app-pad-x: clamp(1.125rem, .82vw, 2.25rem);
    --app-pad-y: clamp(.75rem, .62vh, 1.4rem);
    --app-gap: clamp(.875rem, .7vw, 1.6rem);
    --app-radius: clamp(1rem, .76vw, 1.7rem);
    --space-1: clamp(.5rem, .48vw, .9rem);
    --space-2: clamp(1rem, .86vw, 1.7rem);
    --space-3: clamp(1.5rem, 1.14vw, 2.2rem);
    --type-kpi-lg: clamp(2.55rem, 2.2vw, 4.6rem);
    --type-kpi-md: clamp(2rem, 1.75vw, 3.6rem);
    --type-kpi-sm: clamp(1.25rem, 1.15vw, 2.3rem);
    --type-title: clamp(1.5rem, 1.28vw, 2.6rem);
  }

  body[data-view="status"] .brand h1,
  body[data-view="district"] .brand h1,
  body[data-view="area"] .brand h1 {
    font-size: clamp(1rem, .92vw, 1.8rem);
  }

  body[data-view="status"] .brand p,
  body[data-view="district"] .brand p,
  body[data-view="area"] .brand p,
  body[data-view="status"] .btn,
  body[data-view="district"] .btn,
  body[data-view="area"] .btn {
    font-size: clamp(.875rem, .78vw, 1.5rem);
  }

  body[data-view="status"] .brand-mark,
  body[data-view="district"] .brand-mark,
  body[data-view="area"] .brand-mark {
    inline-size: clamp(3.125rem, 3.05vw, 5.5rem);
    block-size: clamp(3.125rem, 3.05vw, 5.5rem);
    flex: 0 0 clamp(3.125rem, 3.05vw, 5.5rem);
  }

  body[data-view="status"] .clock .t,
  body[data-view="district"] .clock .t,
  body[data-view="area"] .clock .t {
    font-size: clamp(1rem, .9vw, 1.75rem);
  }

  /* Uppercase micro-labels, badges & footers */
  .eyebrow,
  .ttl,
  .sec-t,
  .bm-k,
  .tile .tk,
  .badge,
  .alert-meta,
  .legend,
  .legend .row,
  .count-pill,
  .mtr,
  .foot {
    font-size: clamp(.6875rem, .62vw, 1.2rem);
  }

  /* Department strip + alert feed + alert list rows */
  .deptrow .dl,
  .arow .an,
  .alert-title {
    font-size: clamp(.9375rem, .85vw, 1.65rem);
  }

  .deptrow .dm,
  .arow .av,
  .alert-text,
  .tile .tile-target,
  .tile .tile-delta {
    font-size: clamp(.75rem, .68vw, 1.3rem);
  }

  .deptrow .val {
    font-size: clamp(1rem, .92vw, 1.8rem);
  }

  body[data-view="district"] .deptrow,
  body[data-view="area"] .deptrow {
    min-height: clamp(3.375rem, 5.4vh, 5rem);
  }

  .deptrow .ic {
    flex-basis: clamp(2.25rem, 2vw, 3.4rem);
    width: clamp(2.25rem, 2vw, 3.4rem);
    height: clamp(2.25rem, 2vw, 3.4rem);
    font-size: clamp(.9375rem, .85vw, 1.6rem);
  }

  /* Detail tiles + ward cards */
  body[data-view="district"] .tile,
  body[data-view="area"] .tile {
    min-block-size: clamp(4.625rem, 7.5vh, 7rem);
  }

  body[data-view="district"] .area-card .area-name {
    font-size: clamp(.85rem, .78vw, 1.5rem);
  }

  body[data-view="district"] .area-card .area-value {
    font-size: clamp(1.5rem, 1.35vw, 2.6rem);
  }

  /* Map chrome + tabs */
  body[data-view="status"] .tab-tx .l,
  body[data-view="district"] .tab-tx .l,
  body[data-view="area"] .tab-tx .l {
    font-size: clamp(.875rem, .8vw, 1.55rem);
  }

  body[data-view="status"] .tab-tx .s,
  body[data-view="district"] .tab-tx .s,
  body[data-view="area"] .tab-tx .s {
    font-size: clamp(.6875rem, .6vw, 1.15rem);
  }

  body[data-view="status"] .tab,
  body[data-view="district"] .tab,
  body[data-view="area"] .tab {
    min-block-size: clamp(3.8rem, 5.2vh, 5.4rem);
  }

  body[data-view="status"] .tab-ic,
  body[data-view="district"] .tab-ic,
  body[data-view="area"] .tab-ic {
    inline-size: clamp(2.5rem, 2.2vw, 3.9rem);
    block-size: clamp(2.5rem, 2.2vw, 3.9rem);
    flex-basis: clamp(2.5rem, 2.2vw, 3.9rem);
    font-size: clamp(1rem, .95vw, 1.75rem);
  }

  /* Status home: summary cards + priority panel rows */
  body[data-view="status"] .card .v {
    font-size: clamp(2rem, 1.9vw, 3.8rem);
  }

  body[data-view="status"] .card .k {
    font-size: clamp(.6875rem, .62vw, 1.2rem);
  }

  body[data-view="status"] .ai-card-title {
    font-size: clamp(1.35rem, 1.25vw, 2.5rem);
  }

  body[data-view="status"] .ai-card-copy {
    font-size: clamp(.82rem, .78vw, 1.5rem);
  }

  body[data-view="status"] .card {
    min-block-size: clamp(7rem, 9.8vh, 10rem);
  }

  /* Detail head + crawl ticker */
  body[data-view="district"] .detail-head h2,
  body[data-view="area"] .detail-head h2 {
    font-size: clamp(1.75rem, 1.5vw, 2.9rem);
  }

  .breadcrumb,
  .crawl-item {
    font-size: clamp(.78rem, .68vw, 1.3rem);
  }

  .crawl-led {
    font-size: clamp(.625rem, .55vw, 1.05rem);
  }
}

/* =====================================================================
   MID-HEIGHT DESKTOPS (769-1010px viewport: 1080p with browser chrome /
   taskbar, or laptops at 125% scaling). The ward band needs enough rise
   for name + value on every card; the badge is the dispensable line here.
   ===================================================================== */
@media (min-width: 821px) and (min-height: 769px) and (max-height: 1010px) {
  body[data-view="district"] .area-panel {
    flex-basis: clamp(9.5rem, 18.5vh, 12.5rem);
    min-block-size: clamp(9rem, 17vh, 11.5rem);
  }

  /* Slim ward header so the row of cards gets the panel's height. */
  body[data-view="district"] .area-panel .panel-h .title {
    margin-top: 1px;
    font-size: clamp(.85rem, 2vh, 1.1rem);
  }

  body[data-view="district"] .area-grid {
    margin-top: clamp(.25rem, .7vh, .5rem);
  }

  body[data-view="district"] .area-card .area-name {
    font-size: clamp(.64rem, 1.5vh, .8rem);
  }

  body[data-view="district"] .area-card .area-value {
    margin-top: clamp(.1rem, .4vh, .3rem);
    font-size: clamp(.9rem, 2.1vh, 1.25rem);
  }
}

/* =====================================================================
   SHORT-VIEWPORT DETAIL COCKPIT (laptops with browser chrome / taskbar)
   The district & area views carry more vertical stack than the status
   home (head + tabs + two panels + ward band). Below ~768px of real
   viewport height, compress every fixed rung so the WHOLE cockpit —
   including the Ward View — stays on screen with no scroll and no
   clipped rows.
   ===================================================================== */
@media (min-width: 821px) and (max-height: 768px) {
  body[data-view="district"] .detail-head,
  body[data-view="area"] .detail-head {
    margin-top: clamp(.25rem, .6vh, .5rem);
  }

  body[data-view="district"] .detail-head h2,
  body[data-view="area"] .detail-head h2 {
    margin-top: 0;
    font-size: clamp(.95rem, 2.4vh, 1.35rem);
  }

  body[data-view="district"] .compact-tabs,
  body[data-view="area"] .compact-tabs {
    margin-top: clamp(.25rem, .6vh, .5rem);
  }

  body[data-view="district"] .tab,
  body[data-view="area"] .tab {
    min-block-size: clamp(1.9rem, 4.6vh, 2.6rem);
    padding-top: clamp(.2rem, .5vh, .375rem);
    padding-bottom: clamp(.2rem, .5vh, .375rem);
  }

  body[data-view="district"] .tab-ic,
  body[data-view="area"] .tab-ic {
    inline-size: clamp(1.35rem, 3.2vh, 1.8rem);
    block-size: clamp(1.35rem, 3.2vh, 1.8rem);
    flex-basis: clamp(1.35rem, 3.2vh, 1.8rem);
  }

  body[data-view="district"] .tab-tx .s,
  body[data-view="area"] .tab-tx .s {
    display: none;
  }

  body[data-view="district"] .big-metric,
  body[data-view="area"] .big-metric {
    margin-top: clamp(.3rem, .8vh, .55rem);
    padding: clamp(.375rem, 1vh, .625rem) clamp(.5rem, .8vw, .75rem);
  }

  body[data-view="district"] .bm-v,
  body[data-view="area"] .bm-v {
    margin-top: 3px;
    font-size: clamp(1.3rem, 3.6vh, 2rem);
  }

  body[data-view="district"] .tiles,
  body[data-view="area"] .tiles {
    margin-top: clamp(.3rem, .8vh, .55rem);
  }

  body[data-view="district"] .tile,
  body[data-view="area"] .tile {
    min-block-size: clamp(2.4rem, 6.4vh, 3.4rem);
    padding: clamp(.3rem, .8vh, .5rem) clamp(.4rem, .6vw, .6rem);
  }

  body[data-view="district"] .tile .tv,
  body[data-view="area"] .tile .tv {
    margin-top: 2px;
    font-size: clamp(.85rem, 2.2vh, 1.1rem);
  }

  body[data-view="district"] .spark,
  body[data-view="area"] .spark {
    margin-top: clamp(.3rem, .8vh, .55rem);
    padding: clamp(.3rem, .8vh, .55rem) clamp(.3rem, .5vw, .5rem) clamp(.2rem, .5vh, .375rem);
    min-block-size: clamp(3.6rem, 11vh, 7rem);
  }

  body[data-view="district"] .panel .title,
  body[data-view="area"] .panel .title {
    margin-top: 2px;
    font-size: clamp(.9rem, 2.3vh, 1.2rem);
  }

  body[data-view="district"] .deptrow,
  body[data-view="area"] .deptrow {
    min-height: clamp(2rem, 5.2vh, 2.7rem);
    margin-bottom: clamp(.2rem, .5vh, .35rem);
    padding-top: clamp(.2rem, .5vh, .35rem);
    padding-bottom: clamp(.2rem, .5vh, .35rem);
    gap: 8px;
  }

  body[data-view="district"] .deptrow .ic,
  body[data-view="area"] .deptrow .ic {
    flex-basis: clamp(1.4rem, 3.4vh, 1.9rem);
    width: clamp(1.4rem, 3.4vh, 1.9rem);
    height: clamp(1.4rem, 3.4vh, 1.9rem);
    border-radius: 7px;
  }

  body[data-view="district"] .deptrow .val,
  body[data-view="area"] .deptrow .val {
    font-size: clamp(.8rem, 2vh, 1rem);
  }

  body[data-view="district"] .district-alert-box {
    margin-top: clamp(.3rem, .8vh, .55rem);
    padding: clamp(.35rem, .9vh, .6rem);
    min-block-size: clamp(3.2rem, 8.5vh, 5rem);
  }

  body[data-view="district"] .alert-title {
    margin-top: 2px;
    font-size: clamp(.8rem, 2vh, 1rem);
  }

  body[data-view="district"] .alert-marquee {
    margin-top: clamp(.25rem, .7vh, .5rem);
  }

  body[data-view="district"] .district-alert {
    min-height: clamp(2.2rem, 5.6vh, 3rem);
    padding: clamp(.25rem, .7vh, .5rem) clamp(.4rem, .6vw, .625rem);
  }

  body[data-view="district"] .area-panel {
    flex-basis: clamp(6rem, 15.5vh, 8.75rem);
    min-block-size: clamp(5.75rem, 14.5vh, 8.25rem);
    margin-top: clamp(.3rem, .8vh, .55rem);
    padding: clamp(.3rem, .8vh, .55rem) clamp(.4rem, .6vw, .7rem);
  }

  body[data-view="district"] .area-grid {
    margin-top: clamp(.2rem, .6vh, .45rem);
  }

  body[data-view="district"] .area-card {
    padding: clamp(.3rem, .8vh, .5rem) clamp(.35rem, .55vw, .55rem);
  }

  body[data-view="district"] .area-card .area-name {
    min-height: 0;
    overflow: hidden;
    font-size: clamp(.62rem, 1.7vh, .78rem);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-view="district"] .area-card .area-value {
    margin-top: clamp(.1rem, .4vh, .3rem);
    font-size: clamp(.85rem, 2.4vh, 1.2rem);
  }
}

/* Ultra-short tier (e.g. 1366x768 laptop at 125% zoom => ~550px viewport):
   shed the secondary text lines so the primary numbers + ward band still
   land on one screen. */
@media (min-width: 821px) and (max-height: 620px) {
  body[data-view="district"] .tile .tile-target,
  body[data-view="area"] .tile .tile-target,
  body[data-view="district"] .tile .tile-delta,
  body[data-view="area"] .tile .tile-delta,
  body[data-view="district"] .deptrow .dm,
  body[data-view="area"] .deptrow .dm,
  body[data-view="district"] .sp-h,
  body[data-view="area"] .sp-h,
  body[data-view="district"] .fusionbar,
  body[data-view="area"] .fusionbar {
    display: none;
  }

  body[data-view="district"] .big-metric,
  body[data-view="area"] .big-metric {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }

  body[data-view="district"] .bm-v,
  body[data-view="area"] .bm-v {
    margin-top: 0;
    font-size: clamp(1.1rem, 3.4vh, 1.6rem);
  }

  body[data-view="district"] .spark,
  body[data-view="area"] .spark {
    min-block-size: clamp(2.8rem, 9vh, 4.5rem);
  }

  /* Ward band gets PRIORITY at ultra-short heights: a slimmer header and a
     firmer basis so the five cards always render with name, value AND the
     status chip. */
  body[data-view="district"] .area-panel {
    flex-basis: clamp(6.25rem, 16vh, 7.75rem);
    min-block-size: clamp(5.75rem, 15vh, 7.25rem);
  }

  /* Hide only the HEADER chrome (eyebrow + "Critical ward blinks" badge) —
     the per-card status chips must stay. */
  body[data-view="district"] .area-panel .eyebrow,
  body[data-view="district"] .area-panel .panel-h .badge {
    display: none;
  }

  body[data-view="district"] .area-panel .title {
    margin-top: 0;
    font-size: clamp(.72rem, 1.9vh, .9rem);
  }
}