/* GridSense — design system per DESIGN.md (light, achromatic, Ember reserved for alarm/error) */
:root {
  /* DESIGN.md tokens */
  --color-canvas: #f5f5f5;
  --color-paper: #ffffff;
  --color-surface-alt: #fafafa;
  --color-ink: #0a0a0a;
  --color-ink-soft: #171717;
  --color-mid-gray: #737373;
  --color-hairline: #e5e5e5;
  --color-ember: #e7000b;
  --color-status-red: #e7000b; --color-status-amber: #d97706; --color-status-green: #16a34a;
  --color-status-red-wash: #fef2f2; --color-status-amber-wash: #fffbeb; --color-status-green-wash: #f0fdf4;

  --font-geist: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-caption: 12px; --leading-caption: 1.33; --tracking-caption: 0.05em;
  --text-body: 14px; --leading-body: 1.43;
  --text-body-lg: 16px; --leading-body-lg: 1.5;
  --text-subheading: 18px; --leading-subheading: 1.56;
  --text-heading: 30px; --leading-heading: 1.2; --tracking-heading: -0.025em;

  --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-48: 48px;
  --page-max-width: 1280px;

  --radius-small: 6px; --radius-nested: 10px; --radius-buttons: 18px; --radius-inputs: 18px; --radius-badges: 18px; --radius-cards: 24px;

  --shadow-subtle: 0 0 0 1px rgba(23,23,23,0.05), 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);

  /* Legacy aliases (JS inline styles still reference these) */
  --bg: var(--color-canvas); --panel: var(--color-paper); --panel-2: var(--color-canvas);
  --ink: var(--color-ink); --ink-2: var(--color-ink-soft); --ink-3: var(--color-mid-gray);
  --line: var(--color-hairline); --line-2: var(--color-hairline);
  --accent: var(--color-ink); --accent-2: var(--color-ink-soft); --accent-wash: var(--color-canvas);
  /* Status encoding: the only chroma in the system */
  --red: var(--color-status-red); --amber: var(--color-status-amber); --green: var(--color-status-green);
  --red-wash: var(--color-status-red-wash); --amber-wash: var(--color-status-amber-wash); --green-wash: var(--color-status-green-wash);
  --mono: var(--font-geist-mono); --sans: var(--font-geist); --r: var(--radius-cards);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #f5f5f5; background-color: var(--color-canvas); color: var(--color-ink); font: 400 var(--text-body)/var(--leading-body) var(--font-geist); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }
.mono { font-family: var(--font-geist-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--color-mid-gray); }
.small { font-size: 12px; line-height: 1.33; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

/* header */
header.top { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--color-surface-alt); border-bottom: 1px solid var(--color-hairline); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
.brand { font-weight: 600; letter-spacing: -0.03em; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.brand .bolt { width: 24px; height: 24px; border-radius: var(--radius-small); background: var(--color-ink); color: var(--color-surface-alt); display: grid; place-items: center; font-size: 13px; letter-spacing: 0; }
.feeder { color: var(--color-mid-gray); font-size: 13px; }
nav.tabs { display: flex; gap: 2px; margin-left: 8px; padding: 3px; background: var(--color-canvas); border-radius: var(--radius-buttons); }
nav.tabs button { background: none; border: 0; padding: 0 12px; height: 30px; border-radius: var(--radius-buttons); color: var(--color-mid-gray); font-weight: 500; font-size: 13px; white-space: nowrap; }
nav.tabs button:hover { color: var(--color-ink); }
nav.tabs button.on { background: var(--color-ink); color: var(--color-surface-alt); }
nav.tabs button.on .muted { color: #d4d4d4; }
.mode { margin-left: auto; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: var(--radius-badges); border: 1px solid var(--color-hairline); color: var(--color-mid-gray); background: transparent; }
.mode b { color: var(--color-ink); font-weight: 500; }

/* layout */
main { padding: 20px; max-width: var(--page-max-width); margin: 0 auto; }
.room { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 16px; align-items: start; }
.panel { background: var(--color-paper); border: 1px solid var(--color-hairline); border-radius: var(--radius-cards); box-shadow: var(--shadow-subtle); overflow: hidden; min-width: 0; }
.panel h2 { font-size: var(--text-caption); line-height: var(--leading-caption); text-transform: uppercase; letter-spacing: var(--tracking-caption); color: var(--color-mid-gray); margin: 0; font-weight: 500; }
.panel .hd { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--color-hairline); flex-wrap: wrap; }
.panel .bd { padding: 16px 20px; }
.foot-note { margin: 12px 4px 0; }

/* impact — stat blocks */
.impact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--color-paper); border: 1px solid var(--color-hairline); border-radius: var(--radius-cards); box-shadow: var(--shadow-subtle); padding: 20px; position: relative; min-width: 0; }
.kpi .lbl { font-size: 12px; line-height: 1.33; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-mid-gray); font-weight: 500; padding-right: 22px; }
.kpi .val { font: 600 30px/1.2 var(--font-geist); letter-spacing: -0.025em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpi .val small { font-size: 13px; letter-spacing: 0; color: var(--color-mid-gray); font-weight: 500; }
.kpi .pot { font-size: 14px; color: var(--color-mid-gray); margin-top: 4px; }
.kpi .pot b { color: var(--color-ink); font-family: var(--font-geist-mono); font-weight: 500; }
.kpi .tip { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; z-index: 30; background: var(--color-ink); color: var(--color-surface-alt); padding: 10px 12px; border-radius: var(--radius-nested); font-size: 12px; line-height: 1.45; }
.kpi:hover .tip { display: block; }
.kpi .i { position: absolute; top: 18px; right: 18px; font-size: 11px; color: var(--color-mid-gray); border: 1px solid var(--color-hairline); border-radius: 50%; width: 16px; height: 16px; display: grid; place-items: center; }

.feederline { display: flex; gap: 12px 28px; padding: 16px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--color-hairline); }
.feederline div { font-size: 12px; line-height: 1.33; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-mid-gray); font-weight: 500; }
.feederline b { display: block; font: 600 18px/1.4 var(--font-geist); letter-spacing: -0.025em; text-transform: none; color: var(--color-ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.feederline b.alarm { color: var(--color-ember); }

.grid2 { display: grid; grid-template-columns: 330px minmax(0, 1fr); }
.map { border-right: 1px solid var(--color-hairline); padding: 12px; min-width: 0; }
.map > svg { width: 100%; height: auto; display: block; }
.map .legend { display: flex; gap: 6px 12px; font-size: 12px; color: var(--color-mid-gray); padding: 8px 4px 0; flex-wrap: wrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: -1px; }
.dot.red { background: var(--color-status-red); }
.dot.amber { background: var(--color-status-amber); }
.dot.green { background: var(--color-status-green); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-mid-gray); font-weight: 500; padding: 8px 12px; border-bottom: 1px solid var(--color-hairline); white-space: nowrap; line-height: 1.33; }
td { padding: 8px 12px; border-bottom: 1px solid var(--color-hairline); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--color-surface-alt); }
tr.click:hover td:first-child { border-radius: var(--radius-nested) 0 0 var(--radius-nested); }
tr.click:hover td:last-child { border-radius: 0 var(--radius-nested) var(--radius-nested) 0; }
td.num { font-family: var(--font-geist-mono); text-align: right; font-variant-numeric: tabular-nums; } th.num { text-align: right; }
td.nowrap { white-space: nowrap; }
td.alarm, .alarm { color: var(--color-ember); }
td.empty { padding: 16px 12px; }

/* badges (status pills): red = solid, amber/green = tinted wash */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; line-height: 1.33; padding: 2px 8px; border-radius: var(--radius-badges); white-space: nowrap; border: 1px solid transparent; }
.pill.red { background: var(--color-status-red); color: #fff; border-color: var(--color-status-red); }
.pill.amber { background: var(--color-status-amber-wash); color: var(--color-status-amber); border-color: var(--color-status-amber-wash); }
.pill.green { background: var(--color-status-green-wash); color: var(--color-status-green); border-color: var(--color-status-green-wash); }
.pill.n { background: var(--color-canvas); color: var(--color-ink-soft); }
.code { font: 400 12px/1.4 var(--font-geist-mono); padding: 1px 6px; border-radius: var(--radius-small); background: var(--color-canvas); color: var(--color-ink-soft); margin: 1px 2px 1px 0; display: inline-block; }
.tablewrap { overflow-x: auto; }

/* chat */
.chat { position: sticky; top: 76px; height: calc(100vh - 96px); display: flex; flex-direction: column; }
.chat .log { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.msg.user { align-self: flex-end; background: var(--color-ink); color: var(--color-surface-alt); padding: 8px 14px; border-radius: var(--radius-buttons) var(--radius-buttons) var(--radius-small) var(--radius-buttons); max-width: 85%; }
.msg.bot { background: var(--color-surface-alt); border: 1px solid var(--color-hairline); border-radius: var(--radius-nested); padding: 12px 14px; }
.msg.bot .answer p { margin: 6px 0; } .msg.bot .answer ul { margin: 4px 0 6px; padding-left: 18px; } .msg.bot .answer li { margin: 3px 0; }
.msg.bot .answer h2, .msg.bot .answer h3, .msg.bot .answer h4 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin: 12px 0 4px; text-transform: none; color: var(--color-ink); }
.steps { border-left: 1px solid var(--color-hairline); margin: 6px 0 8px 4px; padding-left: 10px; display: flex; flex-direction: column; gap: 4px; }
.step { font-size: 12px; line-height: 1.5; color: var(--color-ink-soft); }
.step.thought { font-style: italic; color: var(--color-mid-gray); }
.step.error { color: var(--color-ember); }
.step details summary { cursor: pointer; list-style: none; }
.step details summary::-webkit-details-marker { display: none; }
.step .tool { font: 500 12px var(--font-geist-mono); color: var(--color-ink); background: var(--color-canvas); border: 1px solid var(--color-hairline); padding: 1px 6px; border-radius: var(--radius-small); }
.step pre { white-space: pre-wrap; word-break: break-word; font: 400 12px/1.4 var(--font-geist-mono); background: var(--color-paper); border: 1px solid var(--color-hairline); padding: 8px 10px; border-radius: var(--radius-nested); max-height: 220px; overflow: auto; margin: 4px 0; }
.trace-hd { font-size: 12px; font-weight: 500; color: var(--color-mid-gray); text-transform: uppercase; letter-spacing: 0.05em; display: flex; justify-content: space-between; gap: 8px; }
.spinner { width: 12px; height: 12px; border: 2px solid var(--color-hairline); border-top-color: var(--color-ink); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.wo-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-hairline); }
.wo-actions .wo-note { width: 100%; }
.wo-actions .wo-btns { width: 100%; display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.chat form { display: flex; gap: 8px; padding: 12px 20px 8px; border-top: 1px solid var(--color-hairline); }
.chat input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--radius-inputs); background: var(--color-canvas); color: var(--color-ink); font: inherit; }
.chat input::placeholder, .field::placeholder { color: var(--color-mid-gray); }
.chat input:focus, .field:focus { outline: none; border-color: var(--color-hairline); background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-hairline); }
.suggest { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 20px 16px; }
.chip { border: 1px solid var(--color-hairline); background: transparent; color: var(--color-ink); border-radius: var(--radius-badges); padding: 2px 10px; font-size: 12px; font-weight: 500; text-align: left; }
.chip:hover { background: var(--color-canvas); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 0; background: var(--color-ink); color: var(--color-surface-alt); border-radius: var(--radius-buttons); padding: 0 12px; font-weight: 500; font-size: 14px; line-height: 1; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--color-ink-soft); }
.btn.ghost { background: var(--color-canvas); color: var(--color-ink); }
.btn.ghost:hover { background: var(--color-hairline); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn.big { width: 100%; height: 44px; font-size: 16px; }
.btn:disabled { opacity: .5; cursor: default; }
.empty { color: var(--color-mid-gray); font-size: 14px; padding: 8px 2px; }

/* drawer */
.drawer-bg { position: fixed; inset: 0; background: rgba(10, 10, 10, .3); z-index: 40; display: none; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(860px, 100vw); background: var(--color-canvas); z-index: 41; overflow-y: auto; border-right: 1px solid var(--color-hairline); transform: translateX(-102%); transition: transform .2s ease; }
.drawer.open { transform: none; } .drawer-bg.open { display: block; }
.drawer .dh { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--color-surface-alt); border-bottom: 1px solid var(--color-hairline); position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
.drawer .dh h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.025em; }
.drawer .dh h3 .sub { font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--color-mid-gray); }
.drawer .db { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { background: var(--color-paper); border: 1px solid var(--color-hairline); border-radius: var(--radius-nested); padding: 10px 12px; min-width: 0; }
.panel .stat { background: var(--color-surface-alt); }
.stat .l { font-size: 12px; line-height: 1.33; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-mid-gray); font-weight: 500; }
.stat .v { font: 600 18px/1.4 var(--font-geist); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .axis { font: 400 10px var(--font-geist-mono); fill: var(--color-mid-gray); }
.chart svg.bill-svg { max-width: 500px; }
.chart svg.cons-svg { width: 100%; height: auto; }
.x { margin-left: auto; display: inline-flex; align-items: center; height: 30px; background: transparent; border: 1px solid var(--color-hairline); border-radius: var(--radius-buttons); padding: 0 12px; color: var(--color-ink); font-weight: 500; font-size: 13px; }
.x:hover { background: var(--color-canvas); }

/* work orders */
.wo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wo-detail-body { display: flex; flex-direction: column; gap: 12px; }
.wo-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.status { display: inline-flex; font-size: 12px; font-weight: 500; line-height: 1.33; padding: 2px 8px; border-radius: var(--radius-badges); background: var(--color-canvas); color: var(--color-ink-soft); white-space: nowrap; border: 1px solid transparent; }
.status.Draft { background: var(--color-canvas); }
.status.Approved { background: var(--color-ink-soft); color: var(--color-surface-alt); }
.status.Inspected { background: var(--color-status-green-wash); color: var(--color-status-green); }
.status.Re-check { background: var(--color-status-amber-wash); color: var(--color-status-amber); }
.status.Closed { background: var(--color-canvas); color: var(--color-mid-gray); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; font-size: 14px; margin: 0; }
.kv dt { color: var(--color-mid-gray); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; padding-top: 2px; } .kv dd { margin: 0; min-width: 0; }
ul.check { padding-left: 18px; margin: 4px 0; }
.verdict { border-radius: var(--radius-nested); padding: 12px 14px; border: 1px solid var(--color-hairline); background: var(--color-surface-alt); }
.verdict.tamper_found { border-color: var(--color-status-red); background: var(--color-status-red-wash); }
.verdict.tamper_found h4 { color: var(--color-status-red); }
.verdict.clean { border-color: var(--color-status-green); background: var(--color-status-green-wash); }
.verdict.clean h4 { color: var(--color-status-green); }
.verdict.unclear { border: 1px dashed var(--color-status-amber); background: var(--color-status-amber-wash); }
.verdict.unclear h4 { color: var(--color-status-amber); }
.verdict.needs_inspector { border-color: var(--color-hairline); background: var(--color-canvas); }
.verdict h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.verdict .row { margin-top: 6px; }
.photo-thumb { max-width: 160px; border-radius: var(--radius-nested); border: 1px solid var(--color-hairline); display: block; margin-top: 8px; }

/* bill + report */
.narrow { max-width: 760px; }
.bill-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bill-out { margin-top: 16px; }
.bill-text { font-size: 16px; line-height: 1.7; }
.bill-chart { margin-top: 16px; }
.narrow.bill-panel { max-width: 860px; }
.bill-stats { margin-top: 16px; }
.bill-stats .stat .v { font-size: 20px; white-space: nowrap; }
.stat .s { font-size: 12px; line-height: 1.33; margin-top: 2px; }
.bill-h { margin: 0 0 6px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.bill-sec { margin-top: 16px; }
.bill-sec p { margin: 0; line-height: 1.6; }
.bill-tips { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bill-tips li { background: var(--color-surface-alt); border: 1px solid var(--color-hairline); border-radius: var(--radius-nested); padding: 10px 12px; line-height: 1.5; }
.bill-tips .save { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--color-mid-gray); font-variant-numeric: tabular-nums; }
.bill-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 12px; color: var(--color-mid-gray); }
.bill-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart .bill-legend svg { flex: none; overflow: visible; width: 22px; height: 10px; display: inline-block; }
.bill-foot { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--color-hairline); }
.chart svg.bill-svg.wide { max-width: 640px; }
.bill-report[lang="hi"] { line-height: 1.7; }
.toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-canvas); border-radius: var(--radius-buttons); }
.toggle button { border: 0; background: transparent; height: 30px; padding: 0 14px; color: var(--color-mid-gray); border-radius: var(--radius-buttons); font-weight: 500; }
.toggle button.on { background: var(--color-ink); color: var(--color-surface-alt); }
.field { padding: 8px 10px; height: 36px; border: 1px solid transparent; border-radius: var(--radius-inputs); background: var(--color-canvas); color: var(--color-ink); font: inherit; }
.rep-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.rep-grid .hd .btn { margin-left: auto; }
.report { font-size: 14px; } .report h2 { font-size: 18px; text-transform: none; letter-spacing: -0.025em; color: var(--color-ink); font-weight: 600; margin-top: 16px; } .report h2:first-child { margin-top: 0; } .report h3 { font-size: 14px; font-weight: 600; margin: 16px 0 4px; } .report ul { padding-left: 18px; }
.report .print-row { margin-top: 16px; }
.evalbox { font-size: 14px; }
.evalbox p:first-child { margin-top: 0; }

/* OpenStreetMap panel (Leaflet). isolation keeps Leaflet's z-indexes below the header and drawer. */
.geo { display: none; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-nested); overflow: hidden; background: var(--color-canvas); position: relative; z-index: 0; isolation: isolate; border: 1px solid var(--color-hairline); }
.geo .leaflet-tile-pane { filter: grayscale(1) contrast(1.05); }
.geo .leaflet-control-attribution { font-size: 10px; }
.geo .leaflet-tooltip { border-radius: var(--radius-nested); border: 1px solid var(--color-hairline); font-family: var(--font-geist); color: var(--color-ink); box-shadow: var(--shadow-subtle); }
.dt-mk { border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 11px var(--font-geist-mono); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; }
.dt-mk.red { background: var(--color-status-red); } .dt-mk.amber { background: var(--color-status-amber); } .dt-mk.green { background: var(--color-status-green); }
.dt-mk.over { outline: 2px dashed var(--color-ember); outline-offset: 3px; }
.ss-mk { width: 12px; height: 12px; background: var(--color-ink); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* field inspection page (inspect.html) */
body.m { max-width: 480px; margin: 0 auto; }
body.m header.top { position: static; }
.card { background: var(--color-paper); border: 1px solid var(--color-hairline); border-radius: var(--radius-cards); box-shadow: var(--shadow-subtle); padding: 20px; margin: 12px; }
.card .row { display: flex; align-items: center; gap: 8px; }
.card h3 { margin: 8px 0 2px; font-size: 18px; font-weight: 600; letter-spacing: -0.025em; }
.card .evidence { color: var(--color-mid-gray); }
.card .verdict-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.card.err { color: var(--color-ember); }
.hidden-input { display: none; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photos button { border: 1px solid var(--color-hairline); border-radius: var(--radius-nested); padding: 0; background: var(--color-paper); overflow: hidden; }
.photos img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.photos span { font-size: 12px; display: block; padding: 4px; color: var(--color-mid-gray); }
.photos-lbl { margin: 12px 0 6px; }

@media (max-width: 1100px) {
  .room { grid-template-columns: 1fr; }
  .chat { position: static; height: 640px; }
  .grid2 { grid-template-columns: 1fr; } .map { border-right: 0; border-bottom: 1px solid var(--color-hairline); }
  .wo-grid { grid-template-columns: 1fr; }
  .rep-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .impact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  main { padding: 12px; } header.top { padding: 10px 12px; }
  .impact, .stats { grid-template-columns: repeat(2, 1fr); }
  .kpi { padding: 16px; } .kpi .val { font-size: 24px; }
  nav.tabs { order: 3; width: 100%; overflow-x: auto; margin-left: 0; }
  .mode { margin-left: 0; }
  .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; }
  .panel .hd, .panel .bd { padding: 14px 16px; }
  .feederline { padding: 14px 16px; }
  .chat { height: 560px; }
  .drawer .db { padding: 12px; }
  .bill-form .field { flex: 1 1 100%; }
}

/* ---- Map card: expand control, legend overlay, linked highlight ---- */
.map { position: relative; }
.map-expand { position: absolute; top: 22px; right: 22px; z-index: 5; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-hairline); border-radius: var(--radius-buttons); background: var(--color-paper); color: var(--color-ink); cursor: pointer; box-shadow: var(--shadow-subtle); }
.map-expand:hover { background: var(--color-canvas); }
.map-expand:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.map-expand .ic-collapse, .map.is-full .map-expand .ic-expand { display: none; }
.map.is-full .map-expand .ic-collapse { display: block; }
.dt-mk { transition: transform .12s ease, box-shadow .12s ease; }
.dt-mk.hl { transform: scale(1.22); box-shadow: 0 0 0 3px var(--color-ink), 0 2px 6px rgba(0,0,0,.35); }
#map g.hl circle:not([stroke-dasharray]) { stroke: var(--color-ink); stroke-width: 3; }
tr.click.hl td { background: color-mix(in srgb, var(--color-ink) 8%, var(--color-paper)); }
/* expanded state (all widths): fixed layer above header (20), below drawer (41) */
.map.is-full { position: fixed; inset: 16px; z-index: 35; padding: 12px; background: var(--color-paper); border: 1px solid var(--color-hairline); border-radius: var(--radius-cards); box-shadow: 0 0 0 100vmax rgba(10,10,10,.45); display: flex; flex-direction: column; }
.map.is-full .geo { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; height: auto; }
.map.is-full > svg { flex: 1 1 auto; min-height: 0; height: 100%; }
.grid2.map-open { padding-top: var(--map-h, 0); }