/* ============================================================
 * Field Console — full-bleed Leaflet workspace.
 * Inherits design tokens from style.css; overrides only the
 * console-specific layout (topstrip + dock + map frame).
 * ============================================================ */

body.field {
  background: var(--ink-deep);
  background-image: none;
  height: 100vh;
  overflow: hidden;
}
body.field::before { display: none; }

/* ---------- top status strip ---------- */
.topstrip {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: var(--ink-deep);
  color: var(--ivory);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 28px;
  z-index: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--ivory) 12%, transparent);
}
.topstrip__left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  color: var(--ivory);
}
.topstrip__seal { color: var(--ivory); display: inline-flex; }
.topstrip__name {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.topstrip__sep { color: var(--moss-tint); opacity: 0.5; }
.topstrip__mode {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--cream);
}

.view-toggle--strip {
  border: 1px solid color-mix(in srgb, var(--ivory) 18%, transparent);
  background: transparent;
}
.view-toggle--strip .toggle-btn {
  color: color-mix(in srgb, var(--ivory) 70%, transparent);
  border-right-color: color-mix(in srgb, var(--ivory) 18%, transparent);
  padding: 8px 14px;
  font-size: 12px;
}
.view-toggle--strip .toggle-btn:hover {
  background: color-mix(in srgb, var(--ivory) 10%, transparent);
  color: var(--ivory);
}
.view-toggle--strip .toggle-btn.is-active {
  background: var(--ivory);
  color: var(--ink-deep);
}

.topstrip__readout {
  margin: 0 0 0 auto;
  display: flex;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cream);
}
.topstrip__readout div { display: flex; flex-direction: column; gap: 2px; }
.topstrip__readout dt {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: color-mix(in srgb, var(--ivory) 50%, transparent);
  margin: 0;
}
.topstrip__readout dd {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ivory);
  font-feature-settings: "tnum";
  min-width: 120px;
}

/* ---------- field shell ---------- */
.field-shell {
  position: fixed;
  top: 56px;
  left: 0; right: 0; bottom: 0;
  display: flex;
}

/* ---------- dock (sidebar) ---------- */
.dock {
  width: 380px;
  flex-shrink: 0;
  height: 100%;
  background: var(--paper-edge);
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  padding: 0;
  font-size: 13.5px;
  color: var(--ink-deep);
  position: relative;
  transition: width 220ms ease;
}
.dock::-webkit-scrollbar { width: 8px; }
.dock::-webkit-scrollbar-thumb { background: var(--rule); }
.dock::-webkit-scrollbar-track { background: transparent; }

.dock__section { padding: 20px 24px 22px; border-bottom: 1px solid var(--rule); }
.dock__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.dock__head-en {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--terracotta);
  text-transform: uppercase;
  flex-shrink: 0;
}
.dock__head-rule { flex: 1; height: 1px; background: var(--rule); }

/* form */
.dock__form { display: flex; flex-direction: column; gap: 14px; }
.dock-field { display: flex; flex-direction: column; gap: 4px; }
.dock-field__label { display: flex; align-items: baseline; gap: 8px; }
.dock-field__en {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--moss);
}
.dock-field__zh {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-deep);
}
.dock-field select,
.dock-field input,
.lot-input input {
  width: 100%;
  padding: 8px 10px;
  background: var(--ivory);
  border: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-deep);
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.dock-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 14px) 16px, calc(100% - 8px) 16px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 26px;
}
.dock-field select:focus, .dock-field input:focus, .lot-input input:focus {
  border-color: var(--terracotta);
  background: var(--ivory);
}

.lot-input {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lot-input input {
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  flex: 1;
}
.lot-input span {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--moss);
}

/* dock buttons */
.dock-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  background: var(--terracotta);
  color: var(--ivory);
  border: 1px solid var(--terracotta-deep);
  font-family: var(--font-display);
  cursor: pointer;
  margin-top: 4px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 3px 3px 0 var(--terracotta-deep);
}
.dock-btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--terracotta-deep); }
.dock-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--terracotta-deep); }
.dock-btn__zh { font-size: 14px; font-weight: 700; letter-spacing: 0.32em; padding-left: 0.32em; }
.dock-btn__en { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; opacity: 0.85; }

.dock-btn--ghost {
  background: transparent;
  color: var(--ink-deep);
  border-color: var(--ink-deep);
  box-shadow: 3px 3px 0 var(--ink-deep);
}
.dock-btn--ghost:hover { background: var(--ink-deep); color: var(--ivory); box-shadow: 1px 1px 0 var(--ink-deep); }

/* layers */
.layer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.layer-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 12px;
  background: var(--ivory);
  border: 1px solid var(--rule-soft);
  position: relative;
}
.layer-row__swatch {
  grid-row: 1 / 3;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink-deep);
  display: block;
}
.layer-row__swatch--hillside  { background: color-mix(in srgb, var(--moss) 50%, var(--ivory)); }
.layer-row__swatch--swc       { background: var(--ochre); }
.layer-row__swatch--reservoir { background: color-mix(in srgb, var(--moss-soft) 60%, var(--ivory)); }
.layer-row__swatch--violation { background: var(--terracotta); }
.layer-row__swatch--town {
  background: linear-gradient(
    to right,
    #f0e4dc 0%,
    #f0e4dc 20%,
    #dcb9a4 20%,
    #dcb9a4 40%,
    #c69077 40%,
    #c69077 60%,
    #a8614a 60%,
    #a8614a 80%,
    #834935 80%
  );
}
.layer-row__name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-deep);
}
.layer-row__en {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--moss);
  text-transform: uppercase;
}
.layer-row__state {
  grid-row: 1 / 3;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}
.layer-row__badge {
  grid-row: 1 / 3;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  border: 1px dashed var(--terracotta);
  padding: 3px 8px;
}
.layer-row--planned { opacity: 0.85; }
.layer-row--planned::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 8px,
    color-mix(in srgb, var(--terracotta) 6%, transparent) 8px 9px
  );
  pointer-events: none;
}
.layer-row--toggle { cursor: pointer; transition: background 120ms, border-color 120ms; }
.layer-row--toggle:hover { background: color-mix(in srgb, var(--terracotta) 4%, var(--ivory)); }
.layer-row--toggle:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.layer-row--toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--terracotta) 8%, var(--ivory));
  border-color: var(--terracotta);
}
.layer-row--toggle[aria-pressed="true"] .layer-row__state { color: var(--terracotta); }

/* result panel inside dock */
.result-parcel {
  font-family: var(--font-display);
  font-size: 14.5px;
  margin-bottom: 10px;
  line-height: 1.7;
  color: var(--ink-deep);
}
.result-parcel strong { font-weight: 700; }
.result-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.summary-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--moss);
  color: var(--ivory);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
}
.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-bottom: 14px;
}
.result-table th {
  text-align: left;
  background: transparent;
  border-bottom: 1px solid var(--ink-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 6px 8px;
  color: var(--moss);
  text-transform: uppercase;
}
.result-table td {
  padding: 8px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  font-family: var(--font-body);
  color: var(--ink-mid);
  line-height: 1.55;
  white-space: pre-line;
}
.result-table .match-yes { color: var(--terracotta); font-weight: 600; font-family: var(--font-display); }
.result-table .match-no  { color: var(--moss);       font-weight: 600; font-family: var(--font-display); }

.result-actions { display: flex; }
.result-actions .dock-btn { width: 100%; }

/* status panels override (smaller in dock) */
.dock .status { margin: 16px 24px; padding: 14px 16px; font-size: 12px; }
.dock .status--loading { display: flex; }

/* ---------- map frame ---------- */
.map-frame {
  position: relative;
  flex: 1;
  background: var(--bone);
}
#map { position: absolute; inset: 0; }
.map-frame__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 500;
  color: var(--ink-deep);
}
.map-frame__corner::before,
.map-frame__corner::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.map-frame__corner--tl { top: 12px; left: 12px; }
.map-frame__corner--tl::before { width: 14px; height: 1px; left: 0; top: 0; }
.map-frame__corner--tl::after  { width: 1px; height: 14px; left: 0; top: 0; }
.map-frame__corner--tr { top: 12px; right: 12px; }
.map-frame__corner--tr::before { width: 14px; height: 1px; right: 0; top: 0; }
.map-frame__corner--tr::after  { width: 1px; height: 14px; right: 0; top: 0; }
.map-frame__corner--bl { bottom: 12px; left: 12px; }
.map-frame__corner--bl::before { width: 14px; height: 1px; left: 0; bottom: 0; }
.map-frame__corner--bl::after  { width: 1px; height: 14px; left: 0; bottom: 0; }
.map-frame__corner--br { bottom: 12px; right: 12px; }
.map-frame__corner--br::before { width: 14px; height: 1px; right: 0; bottom: 0; }
.map-frame__corner--br::after  { width: 1px; height: 14px; right: 0; bottom: 0; }

/* projection stamp (floating bottom-left) */
.proj-stamp {
  position: absolute;
  bottom: 22px;
  left: 22px;
  z-index: 500;
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
  padding: 12px 16px;
  border: 1px solid var(--ink-deep);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-mid);
  backdrop-filter: blur(6px);
}
.proj-stamp__row b {
  display: inline-block;
  width: 64px;
  font-weight: 600;
  color: var(--terracotta);
  letter-spacing: 0.18em;
  font-size: 9.5px;
}

/* leaflet tweaks to match palette */
.leaflet-container {
  background: var(--bone);
  font-family: var(--font-body);
}
.leaflet-control-zoom {
  border: 1px solid var(--ink-deep) !important;
  box-shadow: none !important;
}
.leaflet-control-zoom a {
  background: var(--ivory) !important;
  color: var(--ink-deep) !important;
  border-bottom-color: var(--rule) !important;
  font-family: var(--font-display);
  font-weight: 700;
}
.leaflet-control-zoom a:hover { background: var(--paper) !important; }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--ivory) 92%, transparent) !important;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-soft) !important;
  padding: 2px 8px !important;
}
.leaflet-control-attribution a { color: var(--moss) !important; }

/* ---------- panel fold (collapsible dock + dashboard) ---------- */
.panel-fold {
  position: absolute;
  top: 16px;
  width: 26px;
  height: 36px;
  background: var(--ivory);
  border: 1px solid var(--rule);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink-deep);
  z-index: 12;
  transition: background 120ms, color 120ms, border-color 120ms;
  padding: 0;
}
.panel-fold:hover { background: var(--ink-deep); color: var(--ivory); border-color: var(--ink-deep); }
.panel-fold:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.panel-fold__chevron { line-height: 1; transform-origin: center; transition: transform 220ms ease; }

.panel-fold--dock { right: -1px; border-right-color: var(--paper-edge); }
.panel-fold--dashboard { left: -1px; border-left-color: var(--paper-edge); }

/* Vertical rail label, only visible when the panel is folded */
.panel-fold__rail {
  position: absolute;
  top: 70px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--moss);
  white-space: nowrap;
  writing-mode: vertical-rl;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease 80ms;
  z-index: 10;
}
.panel-fold__rail { left: 50%; transform: translateX(-50%); }
.panel-fold__rail--dashboard { writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); }

/* Folded states */
.dock.is-folded {
  width: 28px;
  background-image: none;
  overflow: hidden;
}
.dock.is-folded > :is(.dock__section, .status) { display: none; }
.dock.is-folded .panel-fold__chevron { transform: rotate(180deg); }
.dock.is-folded .panel-fold__rail { opacity: 1; }

.dashboard.is-folded {
  width: 28px;
  background-image: none;
  overflow: hidden;
}
.dashboard.is-folded > .dashboard__section { display: none; }
.dashboard.is-folded .panel-fold__chevron { transform: rotate(180deg); }
.dashboard.is-folded .panel-fold__rail { opacity: 1; }

/* Expand button (dashboard only). Stacks below the fold button on the same edge. */
.panel-expand {
  position: absolute;
  top: 60px;
  left: -1px;
  width: 26px;
  height: 32px;
  background: var(--ivory);
  border: 1px solid var(--rule);
  border-left-color: var(--paper-edge);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-deep);
  z-index: 12;
  transition: background 120ms, color 120ms, border-color 120ms;
  padding: 0;
}
.panel-expand:hover { background: var(--ink-deep); color: var(--ivory); border-color: var(--ink-deep); }
.panel-expand:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.panel-expand__icon { line-height: 1; display: inline-block; transition: transform 180ms ease; }
.dashboard.is-expanded .panel-expand__icon { transform: rotate(180deg); }

/* Expanded dashboard: shell becomes a 2-column grid; dashboard takes the right
   column (~70%), the dock and map stack in the left column. */
.field-shell.has-expanded-dashboard {
  display: grid;
  grid-template-columns: minmax(280px, 30%) 1fr;
  grid-template-rows: minmax(0, auto) minmax(0, 1fr);
}
.field-shell.has-expanded-dashboard .dock {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  max-height: 45vh;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.field-shell.has-expanded-dashboard .dock.is-folded {
  max-height: none;
}
.field-shell.has-expanded-dashboard .map-frame {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
}
.field-shell.has-expanded-dashboard .dashboard.is-expanded {
  grid-column: 2;
  grid-row: 1 / -1;
  width: auto;
}

/* ---------- dashboard (right panel) ---------- */
.dashboard {
  width: 420px;
  flex-shrink: 0;
  height: 100%;
  background: var(--paper-edge);
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  border-left: 1px solid var(--rule);
  overflow-y: auto;
  padding: 0;
  font-size: 13.5px;
  color: var(--ink-deep);
  position: relative;
  transition: width 220ms ease;
}
.dashboard::-webkit-scrollbar { width: 8px; }
.dashboard::-webkit-scrollbar-thumb { background: var(--rule); }
.dashboard::-webkit-scrollbar-track { background: transparent; }

.dashboard__section { padding: 20px 22px 22px; border-bottom: 1px solid var(--rule); }
.dashboard__section--cases { padding-bottom: 28px; }

.dashboard__section--filters {
  position: sticky;
  top: 0;
  background: var(--paper-edge);
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  z-index: 5;
  padding-bottom: 16px;
}

/* Filter bar (drill-down) */
.filter-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.filter-bar__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--ink-soft);
  min-width: 0;
}
.filter-bar__field--date { grid-column: 1 / -1; }
.filter-bar__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
}
.filter-bar__field select,
.filter-bar__field input[type="date"] {
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 6px 8px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-deep);
  border-radius: 0;
  outline: none;
  width: 100%;
  min-width: 0;
}
.filter-bar__field select:focus,
.filter-bar__field input:focus { border-color: var(--terracotta); }
.filter-bar__date-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.filter-bar__date-pair span {
  font-family: var(--font-mono);
  color: var(--moss);
  font-size: 12px;
}
.filter-bar__reset {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--terracotta);
  color: var(--terracotta);
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.filter-bar__reset:hover { background: var(--terracotta); color: var(--ivory); }
.filter-bar__reset.is-empty { opacity: 0.35; pointer-events: none; }
.dashboard__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.dashboard__head-en {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss);
  white-space: nowrap;
}
.dashboard__head-rule { flex: 1; height: 1px; background: var(--rule); }
.dashboard__hint {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin: -6px 0 14px;
  line-height: 1.5;
}
.dashboard__footnote {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-soft);
  margin-top: 10px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* KPI cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.kpi-card {
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  min-width: 0;
}
.kpi-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 1px;
  background: var(--terracotta);
}
.kpi-card__label {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-weight: 500;
}
.kpi-card__label sup { color: var(--terracotta); font-weight: 700; }
.kpi-card__value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-deep);
  font-feature-settings: "tnum";
  line-height: 1.1;
  word-break: keep-all;
}
.field-shell.has-expanded-dashboard .kpi-card__value { font-size: 28px; }
.kpi-card__hint {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--moss);
  text-transform: uppercase;
}

/* Town ranking */
.town-ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.town-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.town-row__rank {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--moss);
}
.town-row__bar-wrap {
  position: relative;
  background: var(--ivory);
  border: 1px solid var(--rule);
  height: 18px;
}
.town-row__bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--terracotta) 70%, var(--ivory));
}
.town-row__name {
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-deep);
  z-index: 1;
}
.town-row__count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-feature-settings: "tnum";
  color: var(--ink-deep);
  min-width: 32px;
  text-align: right;
}

/* Timeline chart */
.dashboard__chart-wrap {
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 12px;
  position: relative;
}
.dashboard__chart-toggle {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  justify-content: flex-end;
}
.chart-toggle {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 120ms, color 120ms, border-color 120ms;
}
.chart-toggle:hover { background: var(--ivory); }
.chart-toggle.is-active {
  background: var(--ink-deep);
  color: var(--ivory);
  border-color: var(--ink-deep);
}

/* Cases list */
.case-filters { display: flex; gap: 10px; margin-bottom: 12px; }
.case-filters__field { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-soft); }
.case-filters__field span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
}
.case-filters__field select {
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 6px 8px;
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--ink-deep);
}
.case-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  background: var(--ivory);
}
.case-list::-webkit-scrollbar { width: 8px; }
.case-list::-webkit-scrollbar-thumb { background: var(--rule); }
.case-row {
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: background 120ms;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
}
.case-row:hover { background: color-mix(in srgb, var(--terracotta) 5%, var(--ivory)); }
.case-row.is-active { background: color-mix(in srgb, var(--terracotta) 10%, var(--ivory)); }
.case-row[data-disabled="true"] { opacity: 0.55; cursor: default; }
.case-row__lot {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink-deep);
}
.case-row__date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
}
.case-row__meta {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--ink-soft);
  display: flex;
  gap: 10px;
  align-items: center;
}
.case-row__status {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid currentColor;
}
.case-row__status--open { color: var(--terracotta); }
.case-row__status--closed { color: var(--moss); }
.case-row__fine { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.case-list__empty { padding: 16px; text-align: center; color: var(--ink-soft); font-size: 12px; }

.case-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  gap: 10px;
}
.case-pager__btn {
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  cursor: pointer;
  color: var(--ink-deep);
}
.case-pager__btn:hover:not([disabled]) { background: var(--ink-deep); color: var(--ivory); }
.case-pager__btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.case-pager__info {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
}

/* Choropleth tooltip (Leaflet override) */
.town-tooltip {
  font-family: var(--font-display);
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink-deep);
}
.town-tooltip strong { font-weight: 700; }
.town-tooltip span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--terracotta);
  font-feature-settings: "tnum";
}

/* responsive */
@media (max-width: 1280px) {
  .dashboard { width: 360px; }
}
@media (max-width: 1100px) {
  .field-shell { flex-direction: column; }
  .dock { width: 100%; height: auto; max-height: 50vh; border-right: 0; border-bottom: 1px solid var(--rule); }
  .map-frame { flex: 1; min-height: 360px; }
  .dashboard {
    width: 100%;
    height: auto;
    max-height: 60vh;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}
@media (max-width: 880px) {
  .topstrip__readout { display: none; }
  .kpi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .topstrip { gap: 12px; padding: 0 12px; }
  .topstrip__mode, .view-toggle--strip .toggle-btn__num { display: none; }
}