@charset "UTF-8";
/* ============================================================================
   BRAHMARAKSHA DESIGN SYSTEM
   Flood Command Platform — Upper Assam

   Direction: "hydrological survey instrument"
   Severity is ONE sequential ramp (slate -> ochre -> rust -> vermilion),
   never a set of unrelated hues. Accent blue is reserved for interaction
   and river data only.
   ========================================================================= */

/* ------------------------------------------------------------------ FONTS
   Self-hosted. A flood command centre may be running on a satellite link or
   no link at all — nothing here should depend on a font CDN.
   Weight ranges let 450/550 resolve to a real file instead of a synthetic.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 450;
  font-display: swap; src: url('fonts/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500 550;
  font-display: swap; src: url('fonts/IBMPlexSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600 800;
  font-display: swap; src: url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 400 450;
  font-display: swap; src: url('fonts/IBMPlexSansCondensed-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 500 550;
  font-display: swap; src: url('fonts/IBMPlexSansCondensed-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600 800;
  font-display: swap; src: url('fonts/IBMPlexSansCondensed-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400 450;
  font-display: swap; src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500 550;
  font-display: swap; src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600 800;
  font-display: swap; src: url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
}

/* ---------------------------------------------------------------- TOKENS */
:root {
  /* Surfaces — deep slate with a silt-green cast, not pure black */
  --ink-0:  #0B1116;
  --ink-1:  #101820;
  --ink-2:  #16212A;
  --ink-3:  #1D2B36;
  --ink-4:  #263644;

  /* Hairlines */
  --rule:      #24333F;
  --rule-soft: #1A2732;
  --rule-hard: #33475A;

  /* Text */
  --fg:       #E6EDF2;
  --fg-mute:  #93A6B3;
  --fg-faint: #62757F;

  /* Severity ramp — sequential, single perceptual scale */
  --sev-0: #4C7C8A;   /* normal / below danger */
  --sev-1: #B08A3C;   /* moderate / watch      */
  --sev-2: #C0713A;   /* high                  */
  --sev-3: #B8402C;   /* critical / above HFL  */

  --sev-0-bg: rgba(76,124,138,.11);
  --sev-1-bg: rgba(176,138,60,.12);
  --sev-2-bg: rgba(192,113,58,.12);
  --sev-3-bg: rgba(184,64,44,.13);

  --sev-0-line: rgba(76,124,138,.34);
  --sev-1-line: rgba(176,138,60,.36);
  --sev-2-line: rgba(192,113,58,.36);
  --sev-3-line: rgba(184,64,44,.42);

  /* Semantic */
  --safe:    #4E8564;
  --safe-bg: rgba(78,133,100,.12);
  --river:   #4A90B8;   /* the single accent */
  --river-bg:rgba(74,144,184,.12);
  --river-line: rgba(74,144,184,.34);

  /* Type */
  --display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Scale — no more 0.58rem */
  --t-micro: .688rem;   /* 11px  labels, eyebrows */
  --t-fine:  .75rem;    /* 12px  meta            */
  --t-sm:    .8125rem;  /* 13px  secondary       */
  --t-base:  .875rem;   /* 14px  body            */
  --t-md:    1rem;      /* 16px                  */
  --t-lg:    1.25rem;   /* 20px                  */
  --t-xl:    1.75rem;   /* 28px  card figure     */
  --t-2xl:   2.5rem;    /* 40px  headline figure */

  /* Space — 4pt grid */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  --r-sm: 4px; --r-md: 7px; --r-lg: 11px;

  --rail: 232px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px -12px rgba(0,0,0,.6);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------ BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink-0);
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss03" 1;
}

/* Subtle contour texture — reads as survey paper, not decoration */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(74,144,184,.055), transparent 62%),
    radial-gradient(760px 460px at 4% 104%, rgba(184,64,44,.038), transparent 60%);
}

::selection { background: rgba(74,144,184,.32); color: #fff; }

a { color: var(--river); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--river);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 10px; border: 2px solid var(--ink-1); }
*::-webkit-scrollbar-thumb:hover { background: var(--rule-hard); }

/* Numbers are tabular everywhere. Non-negotiable in a data instrument. */
.mono, .figure, .stat-figure, td.num, .tnum {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* ------------------------------------------------------------- APP SHELL */
.app {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ---- Left rail --------------------------------------------------------- */
.rail {
  background: var(--ink-1);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rail-head {
  padding: var(--s5) var(--s4) var(--s4);
  border-bottom: 1px solid var(--rule);
}
.rail-logo { display: block; }
.rail-logo img, .rail-logo svg { display: block; height: 50px; width: auto; }
/* Set as live text rather than baked into the SVG: crisper at small sizes,
   and it stays readable to screen readers and translation tools. */
.rail-strap {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.rail-nav { padding: var(--s4) var(--s3); flex: 1; }

.nav-group + .nav-group { margin-top: var(--s5); }
.nav-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding: 0 var(--s3) var(--s2);
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px var(--s3);
  border: 0; background: none;
  border-radius: var(--r-md);
  color: var(--fg-mute);
  font-size: var(--t-sm);
  font-weight: 450;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.nav-item:hover { background: var(--ink-2); color: var(--fg); }
.nav-item[aria-current="page"], .nav-item.is-active {
  background: var(--ink-3);
  color: var(--fg);
  font-weight: 550;
}
.nav-item[aria-current="page"]::before, .nav-item.is-active::before {
  content: ""; position: absolute; left: -12px;
  top: 50%; transform: translateY(-50%);
  width: 3px; height: 17px; border-radius: 0 3px 3px 0;
  background: var(--river);
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .82; }
.nav-item .nav-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.nav-item.is-alert .nav-count { color: var(--sev-3); }

.rail-foot {
  padding: var(--s4) var(--s5) var(--s5);
  border-top: 1px solid var(--rule);
}
.helpline-label {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint);
}
.helpline-num {
  font-family: var(--mono); font-size: var(--t-md); font-weight: 600;
  color: var(--fg); letter-spacing: -.01em; margin-top: 2px; display: block;
}

/* ---- Main column ------------------------------------------------------- */
.main { min-width: 0; display: flex; flex-direction: column; }

/* Status strip — the operational heartbeat, full width */
.statusbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16,24,32,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  padding: 0 var(--s7);
  display: flex; align-items: center; gap: var(--s5);
  height: 58px; flex-shrink: 0;
}
.status-live { display: flex; align-items: center; gap: var(--s2); }
.pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sev-3);
  box-shadow: 0 0 0 0 rgba(184,64,44,.6);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184,64,44,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(184,64,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,64,44,0); }
}
.status-live span {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .13em; text-transform: uppercase; color: var(--fg-mute);
}
.status-sep { width: 1px; height: 22px; background: var(--rule); }
.status-item { display: flex; flex-direction: column; gap: 1px; }
.status-item dt {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint);
}
.status-item dd {
  font-family: var(--mono); font-size: var(--t-sm); font-weight: 550;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.status-right { margin-left: auto; display: flex; align-items: center; gap: var(--s4); }

.page { padding: var(--s7); flex: 1; max-width: 1680px; width: 100%; }

/* ---- Development notice ----------------------------------------------- */
.dev-notice {
  margin-bottom: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--sev-1-bg);
  border: 1px solid var(--sev-1-line);
  border-radius: var(--r-md);
  border-left: 3px solid var(--sev-1);
}
.dev-notice-title {
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--sev-1);
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.dev-notice p {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--fg-mute);
  max-width: 72ch;
}
.dev-notice p + p { margin-top: 8px; }

/* ---- Page heading ------------------------------------------------------ */
.page-head { margin-bottom: var(--s6); }
.eyebrow {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--river);
  margin-bottom: 6px;
}
.page-title {
  font-family: var(--display);
  font-size: 1.9rem; font-weight: 600; letter-spacing: -.015em;
  line-height: 1.15;
}
.page-sub { color: var(--fg-mute); font-size: var(--t-base); margin-top: 5px; max-width: 68ch; }

/* -------------------------------------------------------------- SECTIONS */
.section { margin-bottom: var(--s8); }
.section-head {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.section-title {
  font-family: var(--display);
  font-size: var(--t-md); font-weight: 600; letter-spacing: .01em;
}
.section-note { font-size: var(--t-fine); color: var(--fg-faint); margin-left: auto; font-family: var(--mono); }

/* ----------------------------------------------------------------- CARDS */
.card {
  background: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
.card-head {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s4);
}
.card-title {
  font-family: var(--display); font-size: var(--t-base);
  font-weight: 600; letter-spacing: .01em;
}
.card-tools { margin-left: auto; display: flex; gap: var(--s2); }

/* Stat card — one number, one label, restrained */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s3);
}
@media (min-width: 1320px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s5) var(--s5);
  position: relative;
  overflow: hidden;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.stat:hover { border-color: var(--rule-hard); transform: translateY(-1px); }
.stat::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--sev-0); opacity: .8;
}
.stat[data-sev="1"]::after { background: var(--sev-1); }
.stat[data-sev="2"]::after { background: var(--sev-2); }
.stat[data-sev="3"]::after { background: var(--sev-3); }
.stat[data-sev="safe"]::after { background: var(--safe); }
.stat[data-sev="river"]::after { background: var(--river); }

.stat-label {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 10px;
}
.stat-figure {
  font-size: var(--t-xl); font-weight: 600; line-height: 1;
  letter-spacing: -.02em; color: var(--fg);
  display: flex; align-items: baseline; gap: 5px;
}
.stat-figure .unit {
  font-size: var(--t-fine); font-weight: 450; color: var(--fg-faint);
  letter-spacing: .02em;
}
.stat-meta {
  margin-top: 8px; font-size: var(--t-fine); color: var(--fg-mute);
  display: flex; align-items: center; gap: 5px;
}
.stat-meta .delta { font-family: var(--mono); font-weight: 550; }
.delta.up   { color: var(--sev-3); }
.delta.down { color: var(--safe); }
.delta.flat { color: var(--fg-faint); }

/* ------------------------------------------------------- SIGNATURE: GAUGE
   CWC-style river gauge plate. Vertical etched scale, DL and HFL as real
   tick marks, water column filling against them. This is the one bold
   element — everything around it stays quiet.
   --------------------------------------------------------------------- */
.gauge-bank {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--s3);
}
.gauge {
  background: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
}
.gauge-id { min-height: 34px; }
.gauge-river {
  font-family: var(--display); font-size: var(--t-base);
  font-weight: 600; letter-spacing: .01em; line-height: 1.2;
}
.gauge-station {
  font-family: var(--mono); font-size: var(--t-micro);
  color: var(--fg-faint); letter-spacing: .06em; text-transform: uppercase;
}

.plate {
  position: relative;
  height: 168px;
  background:
    linear-gradient(to bottom, var(--ink-0), var(--ink-2));
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
}
/* etched minor graduations */
.plate::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 13px,
    rgba(200,220,232,.07) 13px, rgba(200,220,232,.07) 14px
  );
  pointer-events: none; z-index: 2;
}
.plate-water {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(74,144,184,.34), rgba(46,107,140,.56));
  border-top: 2px solid #9FD2EC;
  transition: height 1s var(--ease);
  z-index: 1;
}
.plate[data-status="ABOVE_DANGER"] .plate-water {
  background: linear-gradient(to bottom, rgba(192,113,58,.34), rgba(150,84,40,.56));
  border-top-color: #F0B37E;
}
.plate[data-status="ABOVE_HFL"] .plate-water {
  background: linear-gradient(to bottom, rgba(184,64,44,.36), rgba(140,46,32,.58));
  border-top-color: #F2947E;
}
/* marker lines: DL and HFL */
.plate-mark {
  position: absolute; left: 0; right: 0; z-index: 3;
  border-top: 1px dashed currentColor;
  display: flex; justify-content: flex-end;
}
.plate-mark span {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .09em; padding: 1px 4px;
  background: var(--ink-0); border-radius: 0 0 0 3px;
  transform: translateY(-1px);
}
.plate-mark.dl  { color: var(--sev-1); }
.plate-mark.hfl { color: var(--sev-3); }

.gauge-read {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
}
.gauge-level {
  font-family: var(--mono); font-size: var(--t-lg); font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.gauge-level .unit { font-size: var(--t-fine); color: var(--fg-faint); font-weight: 450; }
.gauge-trend {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase;
  display: flex; align-items: center; gap: 4px;
}
.gauge-trend.receding { color: var(--safe); }
.gauge-trend.rising   { color: var(--sev-3); }
.gauge-trend.stable   { color: var(--fg-faint); }

/* ------------------------------------------------------- SEVERITY BAND
   Proportional strip: every district as a segment sized by affected people,
   coloured by severity. One glance = whole-region picture.
   ------------------------------------------------------------------- */
.band { margin-bottom: var(--s3); }
.band-track {
  display: flex; height: 40px; border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--rule);
  background: var(--ink-1);
}
.band-seg {
  position: relative; display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; overflow: hidden;
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .05em; color: #fff;
  transition: filter .16s var(--ease);
}
.band-seg:hover, .band-seg:focus-visible { filter: brightness(1.22); }
.band-seg[data-sev="0"] { background: var(--sev-0); }
.band-seg[data-sev="1"] { background: var(--sev-1); }
.band-seg[data-sev="2"] { background: var(--sev-2); }
.band-seg[data-sev="3"] { background: var(--sev-3); }
.band-seg + .band-seg { border-left: 1px solid rgba(11,17,22,.45); }
.band-legend {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  margin-top: var(--s3);
  font-family: var(--mono); font-size: var(--t-micro);
  color: var(--fg-mute); letter-spacing: .06em;
}
.band-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 6px; }

/* ----------------------------------------------------------------- BADGE */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px;
  border: 1px solid transparent; white-space: nowrap;
}
.badge[data-sev="0"] { background: var(--sev-0-bg); color: var(--sev-0); border-color: var(--sev-0-line); }
.badge[data-sev="1"] { background: var(--sev-1-bg); color: var(--sev-1); border-color: var(--sev-1-line); }
.badge[data-sev="2"] { background: var(--sev-2-bg); color: var(--sev-2); border-color: var(--sev-2-line); }
.badge[data-sev="3"] { background: var(--sev-3-bg); color: var(--sev-3); border-color: var(--sev-3-line); }
.badge[data-sev="safe"]  { background: var(--safe-bg);  color: var(--safe);  border-color: rgba(78,133,100,.34); }
.badge[data-sev="river"] { background: var(--river-bg); color: var(--river); border-color: var(--river-line); }
.badge[data-sev="mute"]  { background: var(--ink-3); color: var(--fg-mute); border-color: var(--rule); }
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* --------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule-hard);
  background: var(--ink-2);
  color: var(--fg);
  font-size: var(--t-sm); font-weight: 500;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
  white-space: nowrap;
}
.btn:hover  { background: var(--ink-3); border-color: var(--fg-faint); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }

.btn-primary {
  background: var(--river); border-color: var(--river); color: #06131C; font-weight: 600;
}
.btn-primary:hover { background: #5AA0C8; border-color: #5AA0C8; }

.btn-danger {
  background: var(--sev-3); border-color: var(--sev-3); color: #fff; font-weight: 600;
}
.btn-danger:hover { background: #C9503A; border-color: #C9503A; }

.btn-ghost { background: transparent; border-color: var(--rule); color: var(--fg-mute); }
.btn-ghost:hover { background: var(--ink-2); color: var(--fg); }

.btn-sm { padding: 5px 10px; font-size: var(--t-fine); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--ink-2); border-color: var(--rule-hard); }

/* Segmented control — replaces scattered toggle buttons */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--ink-2); border: 1px solid var(--rule); border-radius: var(--r-md);
}
.segmented button {
  border: 0; background: none; color: var(--fg-mute);
  padding: 5px 12px; border-radius: 5px;
  font-size: var(--t-fine); font-weight: 500; cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.segmented button:hover { color: var(--fg); }
.segmented button[aria-selected="true"] { background: var(--ink-4); color: var(--fg); font-weight: 550; }

/* ----------------------------------------------------------------- TABLE */
.table-wrap {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--ink-1);
}
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-faint); text-align: left;
  padding: 11px var(--s4);
  background: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.data th.num, table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td {
  padding: 11px var(--s4);
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t-sm);
  vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background .12s var(--ease); }
table.data tbody tr:hover { background: var(--ink-2); }
table.data tbody tr.is-selected { background: var(--river-bg); }
.cell-strong { font-weight: 550; color: var(--fg); }
.cell-mute { color: var(--fg-mute); }

/* Inline meter used inside table cells */
.meter {
  display: block; width: 100%;
  height: 5px; border-radius: 3px; background: var(--ink-3);
  overflow: hidden; min-width: 72px; flex: 1;
}
.meter > i {
  display: block; height: 100%; border-radius: 3px;
  background: var(--sev-0); transition: width .8s var(--ease);
}
.meter[data-sev="1"] > i { background: var(--sev-1); }
.meter[data-sev="2"] > i { background: var(--sev-2); }
.meter[data-sev="3"] > i { background: var(--sev-3); }
.meter[data-sev="safe"] > i { background: var(--safe); }
.meter[data-sev="river"] > i { background: var(--river); }

/* ------------------------------------------------------------- LIST ITEMS */
.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: background .12s var(--ease);
  text-align: left; border-left: 0; border-right: 0; border-top: 0;
  background: none; width: 100%;
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: var(--ink-2); }
.list-item.is-active { background: var(--river-bg); }
.list-main { flex: 1; min-width: 0; }
.list-title {
  font-size: var(--t-sm); font-weight: 550; color: var(--fg);
  display: flex; align-items: center; gap: var(--s2);
}
.list-sub {
  font-size: var(--t-fine); color: var(--fg-mute); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.list-time {
  font-family: var(--mono); font-size: var(--t-micro);
  color: var(--fg-faint); white-space: nowrap;
}

/* ------------------------------------------------------------------ GRIDS */
.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); }
.split { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 1180px) { .split { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- MAP */
.map-shell {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-1);
  height: clamp(420px, 62vh, 720px);
}
.map-shell .leaflet-container { height: 100%; width: 100%; background: var(--ink-0); }
.leaflet-control-attribution {
  background: rgba(11,17,22,.82) !important;
  color: var(--fg-faint) !important;
  font-family: var(--mono) !important; font-size: 10px !important;
  border-radius: var(--r-sm) 0 0 0 !important;
}
.leaflet-control-attribution a { color: var(--fg-mute) !important; }
.leaflet-control-zoom a {
  background: var(--ink-2) !important; color: var(--fg) !important;
  border-color: var(--rule) !important;
}
.leaflet-control-zoom a:hover { background: var(--ink-3) !important; }
.leaflet-popup-content-wrapper {
  background: var(--ink-2) !important; color: var(--fg) !important;
  border: 1px solid var(--rule-hard) !important; border-radius: var(--r-md) !important;
  box-shadow: var(--shadow) !important;
}
.leaflet-popup-tip { background: var(--ink-2) !important; border: 1px solid var(--rule-hard) !important; }
.leaflet-popup-content { margin: 11px 13px !important; font-family: var(--body) !important; font-size: var(--t-sm) !important; }

.map-legend {
  position: absolute; left: var(--s4); bottom: var(--s4); z-index: 500;
  background: rgba(16,24,32,.93);
  backdrop-filter: blur(10px);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
}
.map-legend h4 {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--fg-faint);
  margin-bottom: var(--s2);
}
.map-legend ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.map-legend li {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--t-fine); color: var(--fg-mute);
}
.map-legend i { width: 9px; height: 9px; border-radius: 50%; }

/* ---------------------------------------------------------------- CANVAS */
.canvas-shell {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-0);
  height: clamp(400px, 58vh, 680px);
}
.canvas-shell canvas { display: block; width: 100%; height: 100%; }

/* Chart.js containers need a bounded parent */
.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 340px; }

/* ------------------------------------------------------------------ CHAT */
.chat {
  display: grid;
  grid-template-rows: 1fr auto;
  height: calc(100vh - 58px - var(--s7) * 2);
  min-height: 460px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--ink-1);
  overflow: hidden;
}
.chat-log {
  overflow-y: auto; padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s4);
  scroll-behavior: smooth;
}
.msg { display: flex; gap: var(--s3); max-width: 78ch; }
.msg-avatar {
  width: 28px; height: 28px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  background: var(--ink-3); color: var(--fg-mute);
}
.msg-avatar-br {
  background: #000;
  overflow: hidden;
  padding: 0;
}
.msg-avatar-br img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.msg.user { margin-left: auto; flex-direction: row-reverse; }
.msg.user .msg-avatar { background: var(--river-bg); color: var(--river); }
.msg-body {
  background: var(--ink-2); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 10px var(--s4);
  font-size: var(--t-sm); line-height: 1.62;
}
.msg.user .msg-body { background: var(--river-bg); border-color: var(--river-line); }
.msg-body p + p { margin-top: 9px; }
.msg-body ol, .msg-body ul { margin: 8px 0 8px 18px; }
.msg-body li + li { margin-top: 4px; }
.msg-body code {
  font-family: var(--mono); font-size: .92em;
  background: var(--ink-0); padding: 1px 5px; border-radius: 3px;
}
.msg-body strong { font-weight: 600; color: var(--fg); }
.msg-mode {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 5px; display: block;
}
.msg.error .msg-body { background: var(--sev-3-bg); border-color: var(--sev-3-line); }

.chat-compose {
  border-top: 1px solid var(--rule);
  padding: var(--s4) var(--s5);
  background: var(--ink-1);
}
.compose-row {
  display: flex; gap: var(--s3); align-items: flex-end;
  background: var(--ink-2); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s2) var(--s2) var(--s2) var(--s4);
  transition: border-color .15s var(--ease);
}
.compose-row:focus-within { border-color: var(--river-line); }
.compose-row textarea {
  flex: 1; background: none; border: 0; resize: none;
  font-size: var(--t-sm); line-height: 1.55; max-height: 132px;
  padding: 7px 0; outline: none; font-family: var(--body);
}
.compose-row textarea::placeholder { color: var(--fg-faint); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.chip {
  border: 1px solid var(--rule); background: var(--ink-2);
  color: var(--fg-mute); border-radius: 100px;
  padding: 5px 12px; font-size: var(--t-fine); cursor: pointer;
  transition: all .14s var(--ease);
}
.chip:hover { border-color: var(--river-line); color: var(--fg); background: var(--river-bg); }

.typing { display: flex; gap: 4px; padding: 4px 0; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-faint);
  animation: bounce 1.3s var(--ease) infinite;
}
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes bounce { 0%,60%,100% { opacity:.3; transform: translateY(0);} 30% { opacity:1; transform: translateY(-4px);} }

/* ------------------------------------------------- MAP CONTROLS & OVERLAYS */
.map-controls {
  position: absolute; top: var(--s4); right: var(--s4); z-index: 500;
  display: flex; gap: var(--s2); align-items: center;
}
.map-switcher {
  display: inline-flex; padding: 3px; gap: 2px;
  background: rgba(16,24,32,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rule); border-radius: var(--r-md);
}
.map-switcher button {
  border: 0; background: none; color: var(--fg-mute);
  padding: 5px 11px; border-radius: 5px;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease);
}
.map-switcher button:hover { color: var(--fg); }
.map-switcher button[aria-pressed="true"] { background: var(--ink-4); color: var(--fg); }

.map-drone {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(16,24,32,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rule-hard); border-radius: var(--r-md);
  color: var(--fg); padding: 7px 12px; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .06em; text-transform: uppercase;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.map-drone:hover { border-color: var(--river); background: var(--river-bg); }
.map-drone svg { width: 15px; height: 15px; }

/* While the drone is flying, the HUD owns the frame. */
.is-drone .map-controls,
.is-drone .map-legend,
.is-drone .leaflet-control-container { display: none; }

/* Drone heads-up display -------------------------------------------------- */
.drone-hud {
  position: absolute; inset: 0; z-index: 620; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease);
  font-family: var(--mono);
}
.drone-hud.is-shown { opacity: 1; }
.drone-hud::after {           /* vignette, sells the camera feed */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(4,8,11,.55) 100%);
}
.drone-frame { position: absolute; inset: 8%; }
.drone-frame .c { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(230,237,242,.8); }
.drone-frame .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.drone-frame .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.drone-frame .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.drone-frame .br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.drone-cross {
  position: absolute; top: 50%; left: 50%; width: 42px; height: 42px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--river), var(--river)) center/2px 14px no-repeat,
    linear-gradient(var(--river), var(--river)) center/14px 2px no-repeat;
  border: 1px solid rgba(74,144,184,.55); border-radius: 50%;
}
.drone-top {
  position: absolute; top: var(--s4); left: var(--s4); right: var(--s4);
  display: flex; align-items: center; gap: var(--s3); pointer-events: auto;
}
.drone-rec {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-micro); letter-spacing: .14em; color: var(--sev-3);
  background: rgba(11,17,22,.8); padding: 4px 9px; border-radius: var(--r-sm);
}
.drone-rec i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sev-3);
  animation: pulse 1.6s var(--ease) infinite;
}
.drone-label {
  font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg); background: rgba(11,17,22,.8);
  padding: 4px 9px; border-radius: var(--r-sm);
}
.drone-exit {
  margin-left: auto; pointer-events: auto;
  background: rgba(11,17,22,.86); border: 1px solid var(--rule-hard);
  color: var(--fg); border-radius: var(--r-sm); cursor: pointer;
  padding: 5px 12px; font-family: var(--mono);
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
}
.drone-exit:hover { border-color: var(--fg-mute); }
.drone-tele {
  position: absolute; left: 50%; bottom: var(--s4);
  transform: translateX(-50%);
  display: flex; gap: var(--s4);
  background: rgba(11,17,22,.82); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s2) var(--s4);
}
.drone-tele dt {
  font-size: 9px; letter-spacing: .14em; color: var(--fg-faint);
}
.drone-tele dd {
  font-size: var(--t-fine); color: var(--fg); font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Animated vehicle -------------------------------------------------------- */
.vehicle-marker {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink-1); color: #EAF3F8;
  border: 2px solid var(--sev-2);
  box-shadow: 0 0 0 4px rgba(192,113,58,.22), 0 3px 10px rgba(0,0,0,.5);
}
.vehicle-marker.is-boat {
  border-color: var(--river);
  box-shadow: 0 0 0 4px rgba(74,144,184,.24), 0 3px 10px rgba(0,0,0,.5);
}
.vehicle-marker svg { width: 19px; height: 19px; }

/* Playback bar ------------------------------------------------------------ */
.playback {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule); border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--ink-1);
}
.playback-track {
  flex: 1; height: 5px; border-radius: 3px; background: var(--ink-3);
  overflow: hidden; min-width: 60px;
}
.playback-track > i {
  display: block; height: 100%; width: 0;
  background: var(--river); border-radius: 3px;
}
.playback-stage {
  font-family: var(--mono); font-size: var(--t-micro);
  color: var(--fg-mute); letter-spacing: .05em; white-space: nowrap;
}
.speed-group { display: inline-flex; gap: 2px; }
.speed-group button {
  background: var(--ink-2); border: 1px solid var(--rule);
  color: var(--fg-mute); border-radius: var(--r-sm);
  padding: 3px 8px; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-micro);
}
.speed-group button[aria-pressed="true"] {
  background: var(--ink-4); color: var(--fg); border-color: var(--rule-hard);
}

@media (max-width: 720px) {
  .map-controls { top: auto; bottom: var(--s4); right: var(--s3); left: var(--s3);
                  flex-wrap: wrap; justify-content: flex-end; }
  .drone-tele { gap: var(--s3); padding: 6px var(--s3); }
  .drone-tele dd { font-size: var(--t-micro); }
  .playback { flex-wrap: wrap; row-gap: var(--s2); }
}

/* ------------------------------------------------------------- UTILITIES */
.empty {
  padding: var(--s8) var(--s5); text-align: center; color: var(--fg-faint);
}
.empty h4 {
  font-family: var(--display); font-size: var(--t-base); font-weight: 600;
  color: var(--fg-mute); margin-bottom: 5px;
}
.empty p { font-size: var(--t-sm); max-width: 42ch; margin: 0 auto; }

.skeleton {
  background: linear-gradient(90deg, var(--ink-2) 25%, var(--ink-3) 50%, var(--ink-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }

.view { display: none; }
.view.is-active { display: block; animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.toast {
  position: fixed; bottom: var(--s6); right: var(--s6); z-index: 900;
  background: var(--ink-3); border: 1px solid var(--rule-hard);
  border-left: 3px solid var(--safe);
  border-radius: var(--r-md); padding: var(--s3) var(--s5);
  font-size: var(--t-sm); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-shown { opacity: 1; transform: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--s4); top: -60px; z-index: 999;
  background: var(--river); color: #06131C; padding: 9px 15px;
  border-radius: var(--r-md); font-weight: 600; font-size: var(--t-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--s4); text-decoration: none; }

.u-flex { display: flex; align-items: center; }
.u-gap2 { gap: var(--s2); } .u-gap3 { gap: var(--s3); } .u-gap4 { gap: var(--s4); }
.u-mla { margin-left: auto; }
.u-wrap { flex-wrap: wrap; }

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width: 1080px) {
  :root { --rail: 0px; }
  .app { grid-template-columns: 1fr; }
  .rail {
    position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 300;
    transform: translateX(-100%);
    transition: transform .28s var(--ease);
    box-shadow: var(--shadow);
    height: 100dvh;
  }
  .rail.is-open { transform: none; }
  .rail-scrim {
    position: fixed; inset: 0; background: rgba(5,9,12,.66); z-index: 250;
    opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
  }
  .rail-scrim.is-shown { opacity: 1; pointer-events: auto; }
  .menu-btn { display: inline-flex !important; }
  .page { padding: var(--s5) var(--s4); }
  .statusbar { padding: 0 var(--s4); gap: var(--s3); overflow-x: auto; }
}
.menu-btn { display: none; }

@media (max-width: 720px) {
  :root { --t-2xl: 2rem; --t-xl: 1.5rem; }
  .page-title { font-size: 1.5rem; }
  .chat { height: calc(100dvh - 58px - var(--s5) * 2); }
  .split { grid-template-columns: 1fr; }

  /* Two up beats one tall column of mostly empty cards. */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .stat { padding: var(--s3) var(--s4) var(--s4); }

  /* The strip has 58px and no second line: keep the two figures that drive
     the first decision, drop the rest rather than clipping them. */
  .statusbar dl { flex-wrap: nowrap; gap: var(--s4); }
  .status-item:nth-child(2), .status-item:nth-child(n+4) { display: none; }

  /* Section notes belong under the title, not squeezed beside it. */
  .section-head { flex-wrap: wrap; }
  .section-note { margin-left: 0; flex-basis: 100%; }

  .gauge-bank { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .plate { height: 132px; }
  /* Grid items default to min-width:auto; the nowrap status badge would
     otherwise force the card wider than its track. */
  .gauge { min-width: 0; padding: var(--s3); }
  .gauge > .u-flex { flex-wrap: wrap; row-gap: 4px; }
  .gauge > .u-flex .u-mla { margin-left: 0; }
  .gauge-read { flex-wrap: wrap; row-gap: 2px; }

  /* Card headers, list rows and control bars all carry nowrap children that
     would otherwise set a min-content wider than the phone. Let them wrap. */
  .card-head { flex-wrap: wrap; row-gap: var(--s2); }
  .card-tools { margin-left: 0; }
  .list-item { flex-wrap: wrap; row-gap: var(--s2); }
  .list-item > div { min-width: 0; }
  .list-item select { max-width: 100% !important; width: 100%; }
  .route-controls { grid-template-columns: 1fr !important; }
  .segmented { flex-wrap: wrap; }
}

/* --------------------------------------------------- MOTION PREFERENCES */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .rail, .statusbar, .btn, .segmented { display: none !important; }
  body { background: #fff; color: #000; }
  .app { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- IDENTITY & ADMIN LINK
   Added in v3 alongside the sign-in register. Who is at the console belongs in
   the status bar next to the clock, because both answer "what is true right
   now"; the way out sits beside it rather than buried in a menu.
   ------------------------------------------------------------------------ */
.who { display: none; text-align: right; line-height: 1.25; }
.who-name {
  font-size: var(--t-sm); font-weight: 550; color: var(--fg);
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who-dept {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .07em; color: var(--fg-faint);
  max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* [hidden] is removed by script once the session is known. */
.who:not([hidden]) { display: block; }

/* Narrow screens keep the name and drop the department and the button — the
   status bar is already the most crowded strip in the interface. */
@media (max-width: 900px) {
  .who-dept { display: none; }
  .who-name { max-width: 12ch; }
}

.rail-admin {
  display: inline-block; margin-top: var(--s3);
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--fg-faint); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.rail-admin:hover { color: var(--river); border-bottom-color: var(--river-line); }