*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --bg:           #111827;
  --bg-card:      #1f2937;
  --bg-sidebar:   #0f172a;
  --accent:       #16a34a;
  --accent-hover: #15803d;
  --text:         #f9fafb;
  --text-muted:   #9ca3af;
  --border:       #374151;
  --danger:       #ef4444;
  --over:         #22c55e;
  --under:        #ef4444;
  --warn:         #f59e0b;
  --info:         #3b82f6;
  --radius:       6px;
  --top-h:        52px;
  --panel-w:      320px;
  --sheet-h:      36vh;

  /* ── Type scale — use these tokens, NOT raw rem/px font-sizes. ──
     Rationale + migration plan: docs/frontend_design_system.md */
  --fs-eyebrow: 0.62rem;  /* uppercase labels: VIEW, RATE, section eyebrows */
  --fs-2xs:     0.68rem;  /* legend units, micro-meta */
  --fs-xs:      0.72rem;  /* chips, captions, secondary meta */
  --fs-sm:      0.78rem;  /* secondary body */
  --fs-base:    0.82rem;  /* body / zone rows / dropdown */
  --fs-md:      0.88rem;  /* emphasis */
  --fs-lg:      1rem;     /* sub-headings */
  --fs-xl:      1.35rem;  /* field title */
  --fs-2xl:     1.6rem;   /* page headline */

  /* ── Spacing scale — 4px base grid. Prefer these over ad-hoc px. ──
     --sp-0_5 / --sp-1_5 are dense half-steps for chips/legends (review before
     widening); everything else snaps to the 4px grid. */
  --sp-0_5: 2px;
  --sp-1:   4px;
  --sp-1_5: 6px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
}

html, body {
  height: 100%;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior: none;
}

/* ── Login ────────────────────────────────────────────────── */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: var(--sp-4);
}
.login-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: var(--sp-6);
  width: 100%;
  max-width: 360px;
  border: 1px solid var(--border);
}
.brand { font-size: var(--fs-2xl); font-weight: 700; color: var(--accent); letter-spacing: -0.5px; }
.brand-tagline { color: var(--text-muted); font-size: var(--fs-base); margin: var(--sp-1) 0 var(--sp-6); }
.login-form { display: flex; flex-direction: column; gap: var(--sp-1_5); }
.field-label { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1_5); }
.login-form input {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-lg);
  transition: border-color 0.15s;
}
.login-form input:focus { outline: none; border-color: var(--accent); }
.login-form button {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: var(--fs-lg);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.login-form button:hover    { background: var(--accent-hover); }
.login-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.error-msg { color: var(--danger); font-size: var(--fs-base); margin-top: var(--sp-2); }

/* ── App shell ────────────────────────────────────────────── */
.app {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ── Map backdrop ─────────────────────────────────────────── */
.map-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
}
.map-wrap {
  width: 100%;
  height: 100%;
  background: #0a0f1a;
}

/* On desktop, map is beside the panel */
@media (min-width: 768px) {
  .map-backdrop { left: 0; right: var(--panel-w); }
}

/* ── Top bar ──────────────────────────────────────────────── */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--top-h);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-1_5);
  background: rgba(17, 24, 39, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(55, 65, 81, 0.5);
}

.top-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.top-btn:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.top-btn:active { background: rgba(255,255,255,0.12); }

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-0_5);
  min-width: 0;
  overflow: hidden;
}
.bc-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 500;
  padding: var(--sp-1) var(--sp-1_5);
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  transition: color 0.15s, background 0.15s;
  line-height: 1.2;
}
.bc-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.bc-btn.bc-active { color: var(--text); cursor: default; }
.bc-btn.bc-active:hover { background: none; }
.bc-crumb { display: flex; align-items: center; min-width: 0; }
/* One chevron per crumb = separator + switcher. It drills into the crumb's
   children; the SVG points RIGHT at rest (separator) and rotates DOWN when the
   crumb is the tail (its level isn't selected yet) or its picker is open. */
.bc-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: -1px;
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  border-radius: 5px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.bc-chev svg { transform: rotate(-90deg); transition: transform 0.15s; }
.bc-chev.bc-chev-tail svg,
.bc-chev.cp-open svg { transform: rotate(0deg); }
.bc-chev:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* Drill-down sibling picker popover (D8) */
.crumb-picker {
  position: fixed;
  z-index: 1200;
  min-width: 180px;
  max-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-card, #1f2937);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius, 6px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  padding: var(--sp-1);
}
.cp-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-radius: 5px;
  font-size: var(--fs-md);
  transition: background 0.1s;
}
.cp-item:hover { background: rgba(255,255,255,0.06); }
.cp-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-sub { font-size: var(--fs-xs); color: var(--text-muted); flex-shrink: 0; }
.cp-item .badge { flex-shrink: 0; }
.cp-empty { padding: var(--sp-3) var(--sp-4); color: var(--text-muted); font-size: var(--fs-base); }

/* ── Year selector ────────────────────────────────────────── */
.year-select {
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(55,65,81,0.7);
  border-radius: 6px;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
  padding: var(--sp-1_5) var(--sp-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.year-select:hover { border-color: rgba(156,163,175,0.6); background: rgba(255,255,255,0.09); }
.year-select:focus { outline: none; border-color: var(--accent); }
.year-select option { background: #1f2937; color: var(--text); }
/* Highlight when viewing a non-current season */
.year-select.year-past { border-color: var(--warn); color: var(--warn); }

/* ── Drawer ───────────────────────────────────────────────── */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
}
.drawer.open { pointer-events: auto; }

.drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.25s;
}
.drawer.open .drawer-overlay { opacity: 1; }

.drawer-panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 260px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
}
.drawer.open .drawer-panel { transform: translateX(0); }

.drawer-head {
  height: var(--top-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-2) 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.brand-sm { font-size: var(--fs-lg); font-weight: 700; color: var(--accent); }

.drawer-body { padding: var(--sp-2); flex: 1; overflow-y: auto; }

.drawer-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius);
  font-size: var(--fs-md);
  text-align: left;
  transition: color 0.15s, background 0.15s;
}
.drawer-item:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* ── Bottom sheet ─────────────────────────────────────────── */
.sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--bg);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* height driven by data-detent */
  height: 36vh;
  transition: height 0.36s cubic-bezier(0.32,0.72,0,1);
}
.sheet[data-detent="mid"]  { height: 55vh; }
.sheet[data-detent="full"] { height: 92vh; }

.sheet-handle-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) 0 var(--sp-1_5);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.sheet-handle-row:active { cursor: grabbing; }
.sheet-handle {
  width: 36px;
  height: 4px;
  background: #374151;
  border-radius: 2px;
}

.sheet-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* On desktop: panel replaces the bottom sheet */
@media (min-width: 768px) {
  .sheet {
    top: var(--top-h);
    left: auto;
    right: 0;
    bottom: 0;
    width: var(--panel-w);
    height: auto !important;
    border-radius: 0;
    box-shadow: none;
    border-left: 1px solid var(--border);
    transition: none;
  }
  .sheet-handle-row { display: none; }
}

/* ── Sheet summary strip (prepended by JS to field list) ──── */
.sheet-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) var(--sp-1_5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-bottom: 1px solid rgba(55,65,81,0.5);
  flex-shrink: 0;
}
.summary-alert {
  color: var(--danger);
  font-weight: 600;
}

/* ── Field tree (grower → farm → field) ─────────────────────
   Lives inside #field-detail when at overview level. */
.grower-group {}
.grower-header {
  padding: var(--sp-2) var(--sp-4) var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  background: rgba(22,163,74,0.07);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.farm-group {}
.farm-header {
  padding: var(--sp-1_5) var(--sp-4) var(--sp-1) var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(55,65,81,0.4);
}
.field-list-ul { list-style: none; }
.field-item a.field-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-6);
  text-decoration: none;
  color: var(--text);
  transition: background 0.12s;
  border-left: 3px solid transparent;
  font-size: var(--fs-md);
  line-height: 1.3;
}
.field-item a.field-link:hover  { background: rgba(255,255,255,0.05); }
.field-item a.field-link.active {
  border-left-color: var(--accent);
  background: rgba(22,163,74,0.12);
  color: #fff;
}
.field-meta { display: flex; gap: var(--sp-1_5); align-items: center; flex-shrink: 0; }
.badge {
  font-size: var(--fs-xs);
  padding: var(--sp-0_5) var(--sp-1_5);
  border-radius: 9999px;
  background: var(--danger);
  color: #fff;
  font-weight: 600;
}
.badge-area { font-size: var(--fs-sm); color: var(--text-muted); }

/* No-boundary stubs */
.stubs-farm-header { color: #4b5563; border-top: 1px dashed rgba(75,85,99,0.4); font-style: italic; }
.field-link-stub   { opacity: 0.55; font-style: italic; }
.stub-farm-ctx     { font-size: var(--fs-xs); color: #6b7280; margin-right: var(--sp-1_5); }

/* ── Field detail (lives inside #field-detail at field level) */
.detail-header { padding: var(--sp-3) var(--sp-5) 0; }
.detail-header h2 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-1); }
.detail-header .meta { font-size: var(--fs-base); color: var(--text-muted); }

/* ── Neighbor field labels (I7/D2): centered, always-on name pills on the
   map; tap the pill or the outline to switch into that field (D2). Overrides
   Leaflet's default tooltip chrome (white box + arrow). ── */
.leaflet-tooltip.field-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  background: rgba(15,20,17,0.72);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: var(--sp-0_5) var(--sp-2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 130ms ease;
}
/* Width-gate hide (JS toggles .label-hidden on zoomend): fade out rather than
   pop, which reads better under continuous/fractional zoom. visibility (not
   display:none) keeps the element laid out so offsetWidth stays measurable. */
.leaflet-tooltip.field-label.label-hidden {
  opacity: 0;
  visibility: hidden;
}
/* Leaflet draws a directional arrow via ::before; centered labels don't want it. */
.leaflet-tooltip.field-label::before { display: none; }
/* The selected field's own label — accent, non-interactive orientation only. */
.leaflet-tooltip.field-label-selected {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
  cursor: default;
}
/* Graded two-line pill: name on top, a muted qualifier below (farm, or
   farm · grower) for fields outside the active scope. The pill grows to two lines
   only when a subtitle is present (in-scope fields stay single-line names). */
.leaflet-tooltip.field-label .fl-name { display: block; text-align: center; line-height: 1.2; }
.leaflet-tooltip.field-label .fl-sub {
  display: block;
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.2;
}
/* Faint (other-grower) fields: dim the whole pill so it reads as context, while
   staying legible + clickable. Keep the width-gate's hidden state winning. */
.leaflet-tooltip.field-label.field-label-dim { opacity: 0.62; }
.leaflet-tooltip.field-label.field-label-dim.label-hidden { opacity: 0; visibility: hidden; }
.sibling-boundary { cursor: pointer; }

/* ── Tabs (segmented control) ─────────────────────────────── */
.tab-bar {
  display: flex;
  gap: var(--sp-0_5);
  margin: var(--sp-2);
  padding: var(--sp-0_5);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.tab-btn {
  flex: 1;
  text-align: center;
  padding: var(--sp-1_5) 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
  transition: color 0.15s, background 0.15s;
}
.tab-btn:hover:not(.active) { color: var(--text); }
.tab-btn.active { color: #4ade80; font-weight: 600; background: rgba(22,163,74,0.20); }
#tab-content    { padding: 0; }

/* ── Panel card — the shared section-card pattern across all tabs.
   Background-only (matches the Activity obs-row / scouting-card look the
   2026-06-13 redesign standardised on); no nested cards. Heading required
   when a tab shows ≥2 cards. See docs/frontend_design_system.md. ── */
.panel-card {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: var(--sp-3);
  margin: 0 var(--sp-2) var(--sp-2);
}
.panel-card-head {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--sp-2);
}

/* ── Map anchor (hidden — field ID carrier for JS) ─────────── */
.map-anchor { display: none !important; }

/* ── Map stats row ────────────────────────────────────────── */
.map-stats {
  display: flex;
  gap: var(--sp-6);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-base);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.stat-item     { display: flex; flex-direction: column; }
.stat-label    { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--sp-0_5); }
.stat-val      { font-weight: 600; }
.alerts-val    { color: var(--danger); }

/* Leaflet host — disposable wrapper inside .map-wrap (backdrop) */
.map-wrap > .leaflet-host { position: absolute; inset: 0; }

/* Push Leaflet top-edge controls below the translucent top bar */
.map-wrap .leaflet-top { top: var(--top-h); }

/* ── Layers control ───────────────────────────────────────── */
.layers-ctrl { position: relative; }
.layers-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-0_5);
  min-width: 48px;
  min-height: 48px;
  padding: var(--sp-1_5) var(--sp-2);
  background: #fff;
  color: #1f2937;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: pointer;
  user-select: none;
  line-height: 1;
  transition: background 0.12s;
}
.layers-btn:hover  { background: #f3f4f6; }
.layers-btn:active { background: #e5e7eb; }
.layers-btn__icon  { display: block; }
.layers-btn__label { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; }
.layers-panel {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  min-width: 140px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  overflow: hidden;
  color: #1f2937;
}
.layers-panel[hidden] { display: none; }
.layers-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-base);
  cursor: pointer;
}
.layers-row:hover { background: #f3f4f6; }
.layers-row__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #9ca3af;
  flex-shrink: 0;
}
.layers-row.active .layers-row__dot {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 2px #fff;
}

/* ── Alert list (a .panel-card; heading via .panel-card-head) ─ */
.alert-list .muted { padding: 0; }

/* Panel card head row: title + edge-filter toggle aligned */
.panel-card-head-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.panel-card-head-row .panel-card-head { margin-bottom: 0; }

/* Edge-filter toggle button */
.edge-filter-btn {
  margin-left: auto;
  font-size: var(--fs-xs);
  padding: var(--sp-0_5) var(--sp-2);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.edge-filter-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.35); }

/* Hide edge-adjacent rows when interior filter is active */
.alert-list[data-edge-filter="interior"] .alert-item[data-edge-adjacent="true"] { display: none; }

/* Edge-adjacency chip inside an alert row */
.alert-edge-chip {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  padding: 0 var(--sp-1);
  flex-shrink: 0;
}

/* Empty-state shown by JS when filter is interior and all rows are edge */
.edge-filter-empty { margin: 0; padding: var(--sp-1) 0; }
.edge-filter-show-btn {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: var(--fs-sm); padding: 0;
  text-decoration: underline;
}
.edge-filter-show-btn:hover { color: var(--text); }
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-1_5) var(--sp-1_5);
  border-bottom: 1px solid rgba(55,65,81,0.5);
  font-size: var(--fs-base);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
.alert-item:hover          { background: rgba(255,255,255,0.04); }
.alert-item:last-child     { border-bottom: none; }
.alert-item.alert-selected {
  background: rgba(22,163,74,0.12);
  outline: 1px solid var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Past-season note (alerts are current-season only) */
.alerts-past-note {
  font-size: var(--fs-base);
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-2);
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 6px;
  line-height: 1.4;
}
.alert-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: var(--sp-1_5); border: 1.5px solid transparent; }
.dot-over    { background: var(--over);  border-color: #166534; }
.dot-under   { background: var(--under); border-color: #991b1b; }
.dot-neutral { background: var(--warn);  border-color: #92400e; }
.alert-summary  { font-weight: 500; margin-bottom: var(--sp-0_5); }
.alert-date     { color: var(--text-muted); font-size: var(--fs-sm); }
/* ── Stub tabs ────────────────────────────────────────────── */
.stub-tab { padding: var(--sp-6) var(--sp-5); color: var(--text-muted); font-size: var(--fs-md); }

/* ── FAB ──────────────────────────────────────────────────── */
.fab {
  position: fixed;
  right: 14px;
  bottom: calc(var(--sheet-h) + 14px);
  z-index: 299;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
  transition: background 0.15s, transform 0.22s ease;
  touch-action: manipulation;
}
.fab:hover    { background: var(--accent-hover); }
.fab:active   { transform: scale(0.93); }
.fab.open     { background: #374151; }
.fab.open svg { transform: rotate(45deg); }
.fab svg      { transition: transform 0.22s ease; }

/* ── FAB speed-dial ───────────────────────────────────────── */
.fab-menu {
  position: fixed;
  right: 14px;
  bottom: calc(var(--sheet-h) + 76px);
  z-index: 298;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fab-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fab-action {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--text);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: background 0.15s;
  touch-action: manipulation;
}
.fab-action:hover { background: #2d3748; }
.fab-action svg   { flex-shrink: 0; color: var(--text-muted); }

.fa-badge {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--sp-0_5) var(--sp-1_5);
  border-radius: 4px;
}
.fa-none   { background: rgba(239,68,68,0.15);  color: #f87171; }
.fa-schema { background: rgba(245,158,11,0.15); color: #fbbf24; }

/* Hide FAB when sheet is full */
#sheet[data-detent="full"] ~ .fab-menu,
#sheet[data-detent="full"] ~ .fab {
  visibility: hidden;
  pointer-events: none;
}

/* Desktop FAB: sits in the map area (panel is right-docked) */
@media (min-width: 768px) {
  .fab      { right: calc(var(--panel-w) + 20px); bottom: 32px; }
  .fab-menu { right: calc(var(--panel-w) + 20px); bottom: 94px; }
  #sheet[data-detent="full"] ~ .fab-menu,
  #sheet[data-detent="full"] ~ .fab { visibility: visible; pointer-events: auto; }
}

/* ── Search overlay ───────────────────────────────────────── */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(9, 14, 26, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex !important;  /* override [hidden] only when shown via JS (hidden attr removed) */
  flex-direction: column;
}
.search-overlay[hidden] { display: none !important; }

.search-bar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  flex-shrink: 0;
  margin-top: env(safe-area-inset-top, 0px);
}
/* Contained search pill: glass + soft placeholder, inset from the panel edge. */
.search-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--sp-2) var(--sp-3);
  transition: border-color 0.12s;
}
.search-field:focus-within { border-color: rgba(156,163,175,0.6); }
.search-icon { flex-shrink: 0; color: var(--text-muted); }
.search-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-size: var(--fs-lg);
  outline: none;
  min-width: 0;
}
.search-input::placeholder { color: #6b7280; }
.search-input::-webkit-search-cancel-button { display: none; }

.search-results { flex: 1; overflow-y: auto; padding: var(--sp-1_5) 0 var(--sp-6); }

.sr-section {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4b5563;
  padding: var(--sp-3) var(--sp-4) var(--sp-1);
}
.sr-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid rgba(55,65,81,0.3);
}
.sr-item:hover { background: rgba(255,255,255,0.05); }
.sr-item:last-child { border-bottom: none; }
.sr-chip {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-0_5) var(--sp-1_5);
  border-radius: 4px;
  flex-shrink: 0;
}
.sr-chip-grower { background: rgba(168,85,247,0.2); color: #c084fc; }
.sr-chip-farm  { background: rgba(59,130,246,0.2);  color: #60a5fa; }
.sr-chip-field { background: rgba(22,163,74,0.2);   color: #4ade80; }
.sr-item .badge { margin-left: auto; flex-shrink: 0; }
.sr-name  { font-size: var(--fs-md); font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sub   { font-size: var(--fs-sm); color: var(--text-muted); flex-shrink: 0; }
.sr-empty { padding: var(--sp-6) var(--sp-4); color: var(--text-muted); font-size: var(--fs-md); }

/* ── GPS blue dot ─────────────────────────────────────────── */
.gps-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  position: relative;
}
.gps-dot::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.28);
  animation: gps-pulse 2s ease-out infinite;
}
@keyframes gps-pulse {
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Farm header clickable ────────────────────────────────── */
.farm-header-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-2) var(--sp-4) var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.15s;
}
.farm-header-btn:hover { color: var(--accent); }

/* Grower header as a button (scope to that grower). Keeps the .grower-header
   look + sticky position from the shared class; this resets button chrome and
   makes it a full-width, left-aligned, clickable row. */
.grower-header-btn {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  padding: var(--sp-2) var(--sp-4) var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  background: rgba(22,163,74,0.07);
  transition: color 0.15s;
}
.grower-header-btn:hover { color: var(--text); }

/* ── Imagery source toggle + date picker ──────────────────── */
.imagery-source-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1_5);
  padding: var(--sp-2) var(--sp-3) var(--sp-1_5);
  border-bottom: 1px solid rgba(55,65,81,0.4);
}
/* First card after the source row has no card above to supply the inter-card
   gap, so it would butt against the row's bottom border — restore the gap. */
.imagery-source-row + .panel-card { margin-top: var(--sp-2); }
/* Row 1: satellite/drone + index toggles */
.imagery-controls-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
/* Row 2: date picker + flag button */
.scene-picker-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1_5);
}
.imagery-source-toggle {
  display: flex;
  border: 1px solid rgba(55,65,81,0.6);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.src-btn {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.src-btn:disabled { opacity: 0.4; cursor: default; }
.src-btn-active { background: var(--accent); color: #fff; }
/* Index toggle (NDVI / OSAVI / NDRE) — reuses src-btn style */
.index-toggle {
  display: flex;
  border: 1px solid rgba(55,65,81,0.6);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  margin-left: auto;
}
.idx-btn {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  letter-spacing: 0.02em;
}
.idx-btn-active { background: rgba(22,163,74,0.25); color: var(--accent); }
.idx-btn:hover:not(.idx-btn-active):not(:disabled) { color: var(--text); }
.idx-btn:disabled { opacity: 0.32; cursor: not-allowed; }
.scene-date-picker {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(55,65,81,0.6);
  border-radius: 6px;
  color: var(--text);
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
}
.scene-date-picker option { background: #1f2937; }
.scene-no-dates { font-size: var(--fs-sm); color: var(--text-muted); }
/* ☁ Flag button */
.scene-flag-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(55,65,81,0.6);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-2);
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.scene-flag-btn:hover {
  color: var(--warn);
  border-color: var(--warn);
  background: rgba(245,158,11,0.08);
}
.scene-flag-btn:disabled { opacity: 0.4; cursor: default; }
/* Suppressed images note + list */
.suppressed-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
}
.suppressed-note-label { color: var(--text-muted); }
.suppressed-note-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.suppressed-scene-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0_5);
  margin-top: var(--sp-0_5);
}
.suppressed-scene-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  font-size: var(--fs-sm);
  border-top: 1px solid rgba(55,65,81,0.3);
}
.suppressed-scene-date { color: var(--text); font-weight: 500; flex-shrink: 0; }
.suppressed-scene-reason { color: var(--text-muted); flex: 1; font-size: var(--fs-xs); }
.scene-unsuppress-btn {
  background: none;
  border: 1px solid rgba(55,65,81,0.6);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: var(--sp-0_5) var(--sp-2);
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s;
}
.scene-unsuppress-btn:hover { color: var(--text); border-color: rgba(156,163,175,0.5); }
.suppressed-empty { font-size: var(--fs-sm); color: var(--text-muted); padding: var(--sp-1) 0; }
/* var(--warn) already used above for flag hover — it's defined in the root theme */

/* ── Season section (inside imagery tab; a .panel-card) ───── */
.season-section-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.season-section-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.season-section-meta  { font-size: var(--fs-sm); color: var(--text-muted); }
.season-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1_5) var(--sp-3);
}
.season-cell  { display: flex; flex-direction: column; gap: var(--sp-0_5); }
.season-label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.season-val   { font-size: var(--fs-md); font-weight: 600; color: var(--text); }

/* ── Alert metric toggle ──────────────────────────────────── */
.alert-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-0_5);
}
.metric-toggle {
  background: none;
  border: 1px solid rgba(55,65,81,0.7);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1;
  padding: var(--sp-0_5) var(--sp-1_5);
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s;
}
.metric-toggle:hover {
  color: var(--text);
  border-color: rgba(156,163,175,0.5);
}

/* ── Alert actions (review + note) ───────────────────────── */
.alert-actions {
  display: flex;
  gap: var(--sp-1_5);
  margin-top: var(--sp-1_5);
}
.alert-review-btn,
.alert-note-toggle,
.alert-promote-toggle {
  background: none;
  border: 1px solid rgba(55,65,81,0.7);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
  transition: color 0.12s, border-color 0.12s;
}
.alert-review-btn:hover,
.alert-note-toggle:hover,
.alert-promote-toggle:hover {
  color: var(--text);
  border-color: rgba(156,163,175,0.5);
}
.alert-review-btn:disabled { opacity: 0.45; cursor: default; }

.alert-note-form {
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1_5);
}
.note-source,
.note-text,
.note-date {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(55,65,81,0.8);
  border-radius: 4px;
  color: var(--text);
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-1_5);
  box-sizing: border-box;
}
.note-text { resize: vertical; min-height: 48px; }
.note-form-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.note-submit {
  background: var(--accent);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-3);
}
.note-submit:disabled { opacity: 0.45; cursor: default; }
.note-confirm {
  font-size: var(--fs-xs);
  color: var(--accent);
  font-weight: 600;
}

/* ── Zones tab (soil reports + zones) ─────────────────────── */
/* h3 margin matches .panel-card-head so "Zone" and "Soil reports" read identically. */
.zones-tab h3, .samples-tab h3 { font-size: var(--fs-base); font-weight: 600; margin: 0 0 var(--sp-2); }
.samples-tab { padding: var(--sp-3); }
.sample-report-list { display: flex; flex-direction: column; gap: var(--sp-0_5); }
.sample-report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  font-size: var(--fs-base);
}
.sample-report-meta { display: flex; flex-direction: column; gap: var(--sp-0_5); }
.sample-report-date { font-weight: 600; color: var(--text); }
.sample-report-lab  { font-size: var(--fs-xs); color: var(--text-muted); }
.sample-report-count { font-size: var(--fs-sm); color: var(--text-muted); flex-shrink: 0; }

/* ── Season history curve (Imagery tab; a .panel-card) ──── */
.curve-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.curve-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.curve-meta  { font-size: var(--fs-xs); color: var(--text-muted); }
.curve-section[data-trend-field] { cursor: pointer; transition: background 0.12s; }
.curve-section[data-trend-field]:hover { background: rgba(255,255,255,0.09); }
.curve-expand { color: var(--accent); font-weight: 700; margin-left: var(--sp-0_5); }

/* ── Trend detail sheet (cumulative-AUC crop trajectory) ──── */
.trend-sheet {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.trend-sheet-content {
  width: 100%; max-width: 560px;
  background: var(--panel, #0f1620);
  border-radius: 16px 16px 0 0;
  border-top: 1px solid var(--border);
  max-height: 88vh; overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 12px);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
}
@media (min-width: 600px) {
  .trend-sheet { align-items: center; }
  .trend-sheet-content { border-radius: 16px; max-height: 90vh; }
}
.trend-sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-3); position: sticky; top: 0;
  background: var(--panel, #0f1620); border-bottom: 1px solid var(--border);
}
.trend-sheet-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.trend-sheet-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-0_5); }
.trend-sheet-close {
  background: none; border: none; color: var(--text-muted);
  font-size: var(--fs-2xl); line-height: 1; cursor: pointer; padding: 0 var(--sp-1);
}
.trend-sheet-close:hover { color: var(--text); }
.trend-sheet-body { padding: var(--sp-4) var(--sp-4) var(--sp-4); }
.trend-strip {
  display: flex; flex-direction: column; gap: var(--sp-1_5);
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border);
}
.trend-stat { display: flex; gap: var(--sp-3); align-items: baseline; font-size: var(--fs-base); }
.trend-stat-k {
  flex-shrink: 0; width: 54px; font-weight: 600; color: var(--text-muted);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
}
.trend-stat-v { color: var(--text); }
.trend-foot { font-size: var(--fs-xs); margin-top: var(--sp-3); line-height: 1.4; }
.trend-empty { padding: var(--sp-2) 0; font-size: var(--fs-base); line-height: 1.5; }
.trend-incomplete { color: var(--warn); }

/* ── trend toggle pills ───────────────────────────────────── */
.trend-pills {
  display: flex; flex-wrap: wrap; gap: var(--sp-1_5);
  margin-top: var(--sp-3);
}
.trend-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1_5);
  padding: var(--sp-1) var(--sp-2); border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03);
  color: var(--text-muted); font-size: var(--fs-xs); cursor: pointer;
  transition: opacity 0.12s, color 0.12s;
}
.trend-pill:hover { color: var(--text); }
.trend-pill:not(.active) { opacity: 0.4; }
.trend-pill.active { color: var(--text); }
.trend-sw {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.15);
}
.trend-loading { padding: 40px var(--sp-4); text-align: center; color: var(--text-muted); }

/* ── Lens A trendline hover-highlight ─────────────────────── */
/* Year lines + band fade smoothly when a sibling is hovered (JS sets inline
   opacity/stroke via the data-hit-target companion polylines). */
[data-lens-panel="A"] svg [data-series^="year-"],
[data-lens-panel="A"] svg [data-series="band"] {
  transition: opacity 0.12s;
}
/* Year label that follows the cursor along the hovered line */
.trend-hover-label {
  fill: #fff;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  font-family: system-ui, -apple-system, sans-serif;
  paint-order: stroke;
  stroke: rgba(10, 16, 24, 0.85);
  stroke-width: 3px;
  pointer-events: none;
}
/* Pill states mirrored from the hovered line (and vice versa) */
.trend-pill.trend-pill-lit {
  border-color: rgba(74, 222, 128, 0.7);
  background: rgba(74, 222, 128, 0.12);
  color: var(--text);
}
.trend-pill.trend-pill-faded { opacity: 0.35; }

/* ── Scouting summary card (Field Data tab) ─────────────── */
.scouting-summary-card {
  padding: var(--sp-3) var(--sp-3);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  margin-bottom: var(--sp-2);
}
.scouting-card-head { font-size: var(--fs-base); font-weight: 600; margin: 0 0 var(--sp-1); }
.scouting-count { font-size: var(--fs-base); color: var(--text); margin: 0 0 var(--sp-0_5); }
.scouting-peek  { margin: var(--sp-0_5) 0 0; font-size: var(--fs-sm); }

/* ── Activity tab ────────────────────────────────────────── */
.activity-tab { padding: 0 var(--sp-2) var(--sp-2); }
.activity-empty { padding-top: var(--sp-1); }
.activity-feed { display: flex; flex-direction: column; gap: var(--sp-4); }
.obs-day-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.obs-day-header {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--text-muted);
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-1_5); margin-bottom: var(--sp-0_5);
}
.obs-row {
  display: flex; flex-direction: column; gap: var(--sp-1_5);
  padding: var(--sp-3) var(--sp-3);
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  border-left: 3px solid transparent;
}
.obs-row:has(.obs-chip-infield) { border-left-color: #f59e0b; }
.obs-row:has(.obs-chip-remote)  { border-left-color: #3b82f6; }
.obs-row-header { display: flex; align-items: center; gap: var(--sp-2); }
.obs-chip {
  display: inline-block; padding: var(--sp-0_5) var(--sp-2);
  border-radius: 999px; font-size: var(--fs-2xs); font-weight: 600;
}
.obs-chip-infield { background: rgba(245,158,11,0.18); color: #f59e0b; }
.obs-chip-remote  { background: rgba(59,130,246,0.18);  color: #3b82f6; }
.obs-note  { font-size: var(--fs-md); color: var(--text); line-height: 1.5; margin: 0; }
.obs-meta  { font-size: var(--fs-xs); color: var(--text-muted); }
.obs-alert-ref {
  font-size: var(--fs-xs); color: var(--text-muted);
  padding-left: var(--sp-3); border-left: 2px solid rgba(55,65,81,0.6);
}
.obs-alert-ref-resolved { opacity: 0.5; }
/* ── Field-event rows (planting, etc.) ───────────────────── */
.obs-chip-planted { background: rgba(34,197,94,0.18); color: #22c55e; }
.obs-row:has(.obs-chip-planted) { border-left-color: #22c55e; }
.obs-event-label { font-size: var(--fs-base); color: var(--text-muted); }

/* ── Farm panel ───────────────────────────────────────────── */
.farm-panel { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.farm-panel-stats {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(55,65,81,0.4);
}
.farm-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-3) var(--sp-2);
  gap: var(--sp-0_5);
  border-right: 1px solid rgba(55,65,81,0.4);
}
.farm-stat:last-child { border-right: none; }
.farm-stat-val   { font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
.farm-stat-alert { color: var(--danger); }
.farm-stat-label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.farm-card {
  border-radius: 8px;
  border: 1px solid rgba(55,65,81,0.4);
  overflow: hidden;
}
.farm-card-live        { border-color: rgba(22,163,74,0.3); }
.farm-card-schema      { border-color: rgba(234,179,8,0.3); }
.farm-card-placeholder { border-color: rgba(75,85,99,0.4); opacity: 0.7; }
.farm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3) var(--sp-1_5);
  border-bottom: 1px solid rgba(55,65,81,0.3);
}
.farm-card-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.farm-card-badge {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--sp-0_5) var(--sp-1_5);
  border-radius: 4px;
}
.badge-live        { background: rgba(22,163,74,0.2);  color: #4ade80; }
.badge-schema      { background: rgba(234,179,8,0.15); color: #fbbf24; }
.badge-placeholder { background: rgba(75,85,99,0.3);  color: #9ca3af; }
.farm-card-body { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-base); color: var(--text); margin: 0; }
.farm-card-body.muted { color: var(--text-muted); font-size: var(--fs-sm); }
.farm-card-crop { padding: var(--sp-1_5) var(--sp-3) 0; font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.farm-card .season-grid { padding: var(--sp-2) var(--sp-3) var(--sp-3); }

/* ── Misc ─────────────────────────────────────────────────── */
.muted { color: var(--text-muted); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); }
.icon-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-lg);
  padding: var(--sp-1) var(--sp-1_5);
  border-radius: var(--radius);
  line-height: 1;
  transition: color 0.15s;
}
.icon-btn:hover { color: var(--text); }

/* ── Scouting observation modal ───────────────────────────── */
.scout-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.scout-modal[hidden] { display: none; }
.scout-modal-card {
  background: var(--surface);
  border-radius: 14px 14px 0 0;
  width: 100%;
  max-width: 560px;
  padding: 0 0 var(--sp-4);
  max-height: 90vh;
  overflow-y: auto;
}
@media (min-width: 680px) {
  .scout-modal { align-items: center; }
  .scout-modal-card { border-radius: 12px; margin-bottom: 0; }
}
.scout-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.scout-modal-title { font-weight: 600; font-size: var(--fs-lg); }
.scout-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: var(--sp-1);
  display: flex;
  border-radius: 4px;
}
.scout-modal-close:hover { color: var(--text); }
.scout-modal-body { padding: var(--sp-3) var(--sp-4) var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-3); }
.scout-label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-base); color: var(--text-muted); font-weight: 500; }
.scout-select, .scout-textarea, .scout-date {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-md);
  padding: var(--sp-1_5) var(--sp-2);
  outline: none;
  font-family: inherit;
}
.scout-select:focus, .scout-textarea:focus, .scout-date:focus {
  border-color: var(--accent);
}
.scout-textarea { resize: vertical; min-height: 80px; }
.scout-row { display: flex; gap: var(--sp-2); align-items: flex-end; }
.scout-label-date { flex: 1; }
.scout-gps-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-1_5);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--fs-base);
  padding: var(--sp-1_5) var(--sp-3);
  cursor: pointer;
  white-space: nowrap;
  height: 2.05rem;
}
.scout-gps-btn:hover { color: var(--accent); border-color: var(--accent); }
.scout-gps-status { font-size: var(--fs-sm); color: var(--text-muted); }
.scout-modal-footer { display: flex; gap: var(--sp-2); justify-content: flex-end; padding-top: var(--sp-1); }
.scout-cancel-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--fs-base);
  padding: var(--sp-1_5) var(--sp-4);
  cursor: pointer;
}
.scout-cancel-btn:hover { color: var(--text); }
.scout-submit-btn {
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 600;
  padding: var(--sp-1_5) var(--sp-4);
  cursor: pointer;
}
.scout-submit-btn:disabled { opacity: 0.5; cursor: default; }
.scout-confirm { font-size: var(--fs-base); color: var(--accent); text-align: right; display: block; }
.scout-optional { font-weight: 400; color: var(--text-muted); font-size: var(--fs-sm); }

/* ── Cause pills (scout modal + alert note form) ───────────── */
.scout-cause-pills,
.alert-cause-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding-top: var(--sp-0_5);
}
.cause-pill {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: var(--sp-0_5) var(--sp-2);
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.cause-pill:hover { border-color: var(--accent); color: var(--text); }
.cause-pill.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Cause tag (activity feed obs row) ─────────────────────── */
.obs-cause-tag {
  background: rgba(59,130,246,0.15);
  border-radius: 10px;
  color: #93c5fd;
  font-size: var(--fs-xs);
  padding: var(--sp-0_5) var(--sp-1_5);
}

/* ── Scout photo upload ─────────────────────────────────────── */
.scout-photo-input { display: none; }
.scout-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1_5);
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-base);
  padding: var(--sp-1_5) var(--sp-3);
  width: fit-content;
}
.scout-photo-btn:hover { border-color: var(--accent); color: var(--text); }
.scout-photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1_5);
  margin-top: var(--sp-1_5);
}
.scout-photo-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* ── Photos in activity feed ────────────────────────────────── */
.obs-photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1_5);
  margin: var(--sp-1_5) 0 0;
}
.obs-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
}

/* ── Photo lightbox ─────────────────────────────────────────── */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: 96vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}
.lightbox-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  padding: var(--sp-2);
}
.lightbox-close:hover { background: rgba(255,255,255,0.15); }

/* ── Obs pin (teardrop) ────────────────────────────────────── */
.obs-pin {
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.obs-pin-infield { background: #f59e0b; }
.obs-pin-remote  { background: #3b82f6; }

/* ── Leaflet popup — dark theme override ───────────────────── */
.leaflet-popup-content-wrapper {
  background: #1f2937;
  color: #f9fafb;
  border: 1px solid #374151;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.55);
}
.leaflet-popup-tip-container .leaflet-popup-tip { background: #1f2937; }
.leaflet-popup-content { margin: var(--sp-3) var(--sp-3); }
.leaflet-popup-close-button { color: #9ca3af !important; }
.leaflet-popup-close-button:hover { color: #f9fafb !important; }

/* ── Obs popup content ─────────────────────────────────────── */
.obs-popup { font-family: system-ui, -apple-system, sans-serif; min-width: 160px; }
.obs-popup-meta { font-size: var(--fs-xs); color: #9ca3af; margin-bottom: var(--sp-1); }
.obs-popup-note { font-size: var(--fs-base); color: #f9fafb; line-height: 1.4; margin-bottom: var(--sp-2); }
.obs-popup-activity {
  display: block;
  width: 100%;
  background: none;
  border: 1px solid #374151;
  border-radius: 4px;
  color: #9ca3af;
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  text-align: center;
}
.obs-popup-activity:hover { color: #f9fafb; border-color: #6b7280; }
.obs-popup-photos {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.obs-popup-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #374151;
}
.obs-popup-thumb:hover { opacity: 0.85; }

/* ── season-history legend ─────────────────────────────────── */
.sh-legend {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-1_5) var(--sp-0_5);
  font-size: var(--fs-xs);
  color: #9ca3af;
}
.sh-legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.sh-swatch {
  display: inline-block;
  width: 20px;
  height: 3px;
  border-radius: 2px;
}
.sh-swatch-current { background: #4ade80; }
.sh-gradient-bar {
  display: inline-block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, rgba(255,255,255,0.12), rgba(255,255,255,0.55));
}

/* ── Lens A / Lens B mode toggle bar ──────────────────────────── */
.trend-lens-bar {
  display: flex;
  gap: var(--sp-1_5);
  padding: 0 0 var(--sp-3);
}
.lens-pill {
  padding: var(--sp-1) var(--sp-4);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: rgba(255,255,255,0.45);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lens-pill.active {
  background: #4ade80;
  border-color: #4ade80;
  color: #0a1a0a;
}

/* ── Zones lens (Lens B) — per-zone trajectories ─────────────── */
.zone-input-selector {
  display: flex;
  gap: var(--sp-1_5);
  align-items: center;
  padding: 0 0 var(--sp-2);
  flex-wrap: wrap;
}
.zone-input-label {
  font-size: var(--fs-2xs);
  color: rgba(255,255,255,0.40);
  margin-right: var(--sp-1);
}
.zone-input-btn {
  padding: var(--sp-1) var(--sp-3);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: rgba(255,255,255,0.45);
  font-size: var(--fs-2xs);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.zone-input-btn.active {
  background: rgba(251,191,36,0.20);
  border-color: rgba(251,191,36,0.55);
  color: rgba(251,191,36,0.90);
}
.zone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-0_5);
}
.zone-legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1_5);
  font-size: var(--fs-2xs);
  color: rgba(255,255,255,0.60);
  cursor: pointer;
}
.zone-legend-item.hidden-zone {
  opacity: 0.30;
}
.zone-legend-swatch {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}
.zone-empty {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.35);
  padding: var(--sp-4) 0 var(--sp-2);
  font-style: italic;
}

/* ── Zones lens — Option-B field map ─────────────────────────── */
.zone-field-map {
  display: block;
  width: 100%;
  margin: var(--sp-3) 0 var(--sp-1_5);
  border-radius: 4px;
}
/* Zone patches: thin persistent outline; fill + outline transition on hover */
.zone-field-patch {
  transition: fill-opacity 0.15s, stroke 0.15s, stroke-opacity 0.15s, stroke-width 0.15s;
}
/* Hover-highlight: the JS adds/removes these classes on the <g> wrappers.
   Faded zones drop their colour to a faint neutral outline so the lit zone is the
   only coloured patch — otherwise a thin coloured edge of an adjacent zone (esp. the
   field-margin zone, which rings the whole boundary) reads as a stray lit sliver. */
[data-field-zone].zone-faded .zone-field-patch {
  fill-opacity: 0.05;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-opacity: 1;
  stroke-width: 0.75px;
}
[data-field-zone].zone-lit .zone-field-patch {
  fill-opacity: 0.80;
  stroke-width: 2px;
}
/* Legend-item hover */
.zone-legend-item {
  transition: opacity 0.12s;
}
.zone-legend-item.zone-faded {
  opacity: 0.25;
}
.zone-legend-item.zone-lit {
  opacity: 1;
}

/* ── Management zones list (imagery tab) ──────────────────── */
.mgmt-zones-section {
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-top: 1px solid rgba(55, 65, 81, 0.4);
  margin-top: var(--sp-1);
}
.mgmt-zones-header {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-1_5);
}
.mgmt-zones-list { list-style: none; margin: 0; padding: 0; }
.mgmt-zone-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-1);
  font-size: var(--fs-base);
  border-bottom: 1px solid rgba(55, 65, 81, 0.3);
}
.mgmt-zone-item:last-child { border-bottom: none; }
.mgmt-zone-label { color: var(--text); font-weight: 500; }
.mgmt-zone-meta  { color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }

/* ── Zones panel (the "Zone" .panel-card: view dropdown + sub-selector
   + legend + zone list). The .soil-section class is kept as a JS hook
   (app.js uses .closest('.soil-section')); visuals come from .panel-card. ── */
.soil-sub { font-size: var(--fs-2xs); color: var(--text-muted); }
.soil-legend { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-0_5); }
.soil-legend .row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.soil-legend .sw { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.15); }
.soil-legend .ac { margin-left: auto; color: var(--text-muted); font-size: var(--fs-xs); }
.soil-legend .legend-unit { font-size: var(--fs-2xs); color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: var(--sp-0_5); }

/* ── Two-tier view control: full-width dropdown + contextual sub-selector.
   The "View" label was dropped — the bar self-explains, and full-width makes
   its left edge line up with the pills/legend/zone rows below it. ── */
.zone-view { display: flex; margin: 0 0 var(--sp-2); }
.zone-view-select {
  flex: 1; min-width: 0; appearance: none; -webkit-appearance: none;
  background-color: rgba(31, 41, 55, 0.6); border: 1px solid rgba(75, 85, 99, 0.7);
  border-radius: 8px; color: var(--text); font-size: var(--fs-base); font-weight: 600;
  padding: var(--sp-1_5) 30px var(--sp-1_5) var(--sp-3); cursor: pointer;
  /* muted chevron, drawn so the control reads as a real dropdown */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color 0.12s;
}
.zone-view-select:hover { border-color: rgba(156, 163, 175, 0.6); }
.zone-view-select:focus { outline: none; border-color: #eab308; }
.zone-sub { display: flex; flex-wrap: wrap; gap: var(--sp-1_5); margin-bottom: var(--sp-2); }
.sub-group { display: flex; flex-wrap: wrap; gap: var(--sp-1_5); }
.cby-empty { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; }
.cby-chip {
  background: none; border: 1px solid rgba(75, 85, 99, 0.7); border-radius: 13px;
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; padding: var(--sp-1) var(--sp-2);
  cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.cby-chip:hover:not(:disabled) { color: var(--text); border-color: rgba(156, 163, 175, 0.6); }
.cby-chip.active { background: rgba(234, 179, 8, 0.15); border-color: #eab308; color: #fde68a; }
/* Disabled / stub chips (no-coverage Survey, Tissue placeholder) — inert + muted. */
.cby-chip:disabled, .cby-chip.stub {
  opacity: 0.45; cursor: default; font-style: italic; font-weight: 500;
}

/* ── Survey (AGRASID) detail — revealed only when a Survey chip is active ── */
.survey-detail {
  margin-top: var(--sp-3); padding-top: var(--sp-2);
  border-top: 1px solid rgba(55, 65, 81, 0.5);
}

/* ── Set-aware zone list (labelled, collapsible sets; soil-enriched rows) ── */
.zone-sets { margin-top: var(--sp-2); }
.zone-set { margin-bottom: var(--sp-2); }
.zone-set-head {
  display: flex; align-items: center; gap: var(--sp-1_5); width: 100%;
  background: none; border: none; cursor: pointer; padding: var(--sp-1) var(--sp-0_5);
  color: var(--text-muted); font: inherit; text-align: left;
}
.zone-set-caret { font-size: var(--fs-xs); transition: transform 0.12s; }
.zone-set.collapsed .zone-set-caret { transform: rotate(-90deg); }
.zone-set-title {
  font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text);
}
.zone-set-count {
  margin-left: auto; font-size: var(--fs-2xs); color: var(--text-muted);
  border: 1px solid rgba(75, 85, 99, 0.7); border-radius: 10px; padding: var(--sp-0_5) var(--sp-2);
}
.zone-set.collapsed .zone-set-rows { display: none; }
.zone-row {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-1); font-size: var(--fs-base);
  border-bottom: 1px solid rgba(55, 65, 81, 0.3);
  cursor: pointer; transition: opacity 0.12s, background 0.12s;
}
.zone-row:last-child { border-bottom: none; }
.zone-row.zone-vr-lit   { background: rgba(255,255,255,0.06); }
.zone-row.zone-vr-faded { opacity: 0.22; }

/* Legend band highlight (soil-legend and rate legend both use .soil-legend .row) */
.soil-legend .row { cursor: pointer; transition: opacity 0.12s, background 0.12s; }
.soil-legend .row.zone-vr-lit   { background: rgba(255,255,255,0.07); }
.soil-legend .row.zone-vr-faded { opacity: 0.22; }
.zone-row-label { color: var(--text); font-weight: 500; }
.zone-row-meta  { color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.zone-row-val   { margin-left: auto; color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.zone-row-chip:empty:not(.rate-swatch) { display: none; }
.zone-row-chip:not(:empty) {
  flex-shrink: 0; font-size: var(--fs-2xs); font-weight: 600; line-height: 1;
  padding: var(--sp-1) var(--sp-2); border-radius: 11px; white-space: nowrap;
  /* --c = status hex set inline; translucent chip keeping the colour scheme */
  color: var(--c, var(--text-muted));
  background: color-mix(in srgb, var(--c, #9e9e9e) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #9e9e9e) 38%, transparent);
}
/* Rate layer: a solid colour swatch (no text) instead of a status chip. */
.zone-row-chip.rate-swatch {
  flex-shrink: 0; width: 14px; height: 14px; padding: 0; border-radius: 3px;
  background: var(--c, #9e9e9e); border: 1px solid rgba(255, 255, 255, 0.2);
}
/* When the soil lens has a value but the row also shows acreage, keep the value
   tight to the chip rather than pushing acreage away. */
.zone-row-val:empty { display: none; }

/* ── Mismatch warning — separated below the zone table ── */
.fertility-warn {
  margin-top: var(--sp-3); padding-top: var(--sp-2);
  border-top: 1px solid rgba(55, 65, 81, 0.5);
  font-size: var(--fs-xs); color: #fbbf24; line-height: 1.4;
}

/* ── Footer: last-sampled + soil-history pop-out stub ── */
.fertility-foot {
  margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted);
  display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap;
}
.fertility-history-btn {
  background: none; border: none; color: #fde68a; cursor: pointer;
  font-size: var(--fs-xs); font-weight: 600; padding: 0;
}
.fertility-history-btn:hover { text-decoration: underline; }
.soil-dom { font-size: var(--fs-base); line-height: 1.5; margin-top: var(--sp-3); }
.soil-dom .big { font-size: var(--fs-md); font-weight: 600; color: #fde68a; }
.soil-selected { margin-top: var(--sp-3); }
.soil-selected dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-base); }
.soil-selected dt { color: var(--text-muted); }
.soil-selected dd { margin: 0; text-align: right; font-weight: 500; }
/* overlay rows in the Leaflet layers control */
.layers-divider { border-top: 1px solid rgba(75, 85, 99, 0.5); margin: var(--sp-1_5) 0; }
.layers-row.layers-overlay { gap: var(--sp-2); }
.layers-row.layers-overlay input { accent-color: #eab308; }
.layers-row.layers-overlay.disabled { opacity: 0.4; pointer-events: none; }

/* ── Custom dropdown — progressive enhancement of native <select> ──
   The native select stays in the DOM (hidden) as model + change/HTMX source;
   the .dd-trigger button + fixed .dd-list listbox overlay it so the OPEN list
   anchors to the trigger (native popups can't be CSS-positioned). The trigger
   reuses each select's own class for contextual sizing; .dd-trigger normalises
   the chevron + layout. Mirrors the .crumb-picker popover. (2026-06-13) */
.dd-native-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none;
}
.dd-trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-1_5); padding-right: var(--sp-3);
  font-family: inherit; line-height: 1.3; background-image: none;
}
.dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dd-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.12s; }
.dd-trigger[aria-expanded="true"] .dd-chevron { transform: rotate(180deg); }
.dd-list {
  position: fixed; z-index: 1200;
  max-height: 50vh; overflow-y: auto;
  background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  padding: var(--sp-1);
}
.dd-list:focus { outline: none; }
.dd-option {
  display: flex; align-items: center; min-height: 40px;
  padding: var(--sp-1) var(--sp-3); border-radius: 5px;
  font-size: var(--fs-base); color: var(--text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-option:hover, .dd-option.dd-active { background: rgba(255, 255, 255, 0.08); }
.dd-option[aria-selected="true"] { color: #fde68a; font-weight: 600; }
.dd-option[aria-disabled="true"] { opacity: 0.4; cursor: default; font-style: italic; }
.dd-option[aria-disabled="true"]:hover,
.dd-option[aria-disabled="true"].dd-active { background: none; }