/*
 * CFP Anomaly Tracker — main.css
 * Design system: Relational Landscapes / Coalescence Cradle
 * Tokens: coalescence-cradle/color/tokens/ + design-systems/maps/editorial/map-tokens.css
 * Labeling conventions: coalescence-cradle/menu/static/style.css + menu/layouts.html
 */

/* ── Base tokens ─────────────────────────────────────────────────────────── */
:root {
  --white:       #ffffff;
  --paper:       #FDFCFB;
  --surface:     #f7f5f3;
  --rule:        #e8e5e1;
  --rule-md:     #d5d0ca;
  --stone-3:     #a09b96;
  --stone-2:     #6b6560;
  --stone-1:     #2e2b28;
  --ink:         #0a0a0a;
  --hairline:    rgba(26,26,26,0.12);

  /* Map tokens — editorial ochre-earth system */
  --map-bg:              #f3f1ec;
  --map-land:            #f6f4ef;
  --map-water:           #ddd8d0;

  /* Sequential ramp: neutral parchment → deep burnt umber */
  --map-seq-1:           #f0eeeb;
  --map-seq-2:           #dccf9e;
  --map-seq-3:           #c4924a;
  --map-seq-4:           #a85c28;
  --map-seq-5:           #6e3018;

  /* Semantic anomaly states */
  --map-positive:        #4a7858;
  --map-caution:         #a85c28;
  --map-alert:           #6e3018;

  /* Marker */
  --map-marker:          #a85c28;
  --map-marker-dim:      #9b9189;
  --map-marker-selected: #6e3018;

  /* Map chrome */
  --map-legend-bg:       rgba(246, 244, 239, 0.96);
  --map-legend-border:   #e4dfd8;
  --map-tooltip-bg:      rgba(246, 244, 239, 0.97);
  --map-tooltip-border:  #d4cec6;
  --map-control-bg:      rgba(246, 244, 239, 0.94);
  --map-rule:            1px solid #e0dbd3;

  /* Typography */
  --font:              'Helvetica Neue', Helvetica, Arial, sans-serif;
  --tracking-header:   0.38em;
  --tracking-label:    0.28em;
  --tracking-caps:     0.09em;

  /* Type scale (map UI convention) */
  --text-xs:    0.44rem;   /* ~7px  — section labels, legend labels         */
  --text-sm:    0.55rem;   /* ~9px  — pipeline note, log entries            */
  --text-base:  0.82rem;   /* ~13px — data values, status Z-score           */
  --text-title: 0.58rem;   /* ~9px  — header title (wider tracking)         */

  /* Spacing */
  --gap-xs:  4px;
  --gap-sm:  8px;
  --gap-md:  14px;

  --radius-sm: 2px;
  --radius-md: 3px;

  --panel-w: 248px;
}

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

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--map-bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body { display: flex; flex-direction: column; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.app-header {
  flex-shrink: 0;
  height: 40px;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  gap: 1rem;
}

.header-lead, .header-trail {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.header-mark {
  font-size: var(--text-title);
  color: var(--stone-2);
}

.header-title {
  font-size: var(--text-title);
  font-weight: 500;
  letter-spacing: var(--tracking-header);
  text-transform: uppercase;
  color: var(--ink);
}

.header-sub, .header-meta {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-3);
  white-space: nowrap;
}

.header-divider {
  font-size: var(--text-xs);
  color: var(--rule-md);
}

/* ── App body ────────────────────────────────────────────────────────────── */
.app-body {
  flex: 1;
  display: grid;
  grid-template-columns: var(--panel-w) 1fr;
  overflow: hidden;
}

/* ── Status panel ────────────────────────────────────────────────────────── */
.status-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  background: var(--white);
}

/* ── Panel section ───────────────────────────────────────────────────────── */
.panel-section {
  padding: var(--gap-md);
  border-bottom: 1px solid var(--rule);
}

.section-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-3);
  margin-bottom: var(--gap-sm);
}

/* ── Status chip (ls-status pattern from layouts.html) ──────────────────── */
.status-chip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  line-height: 1.7;
}

.status--loading     { color: var(--stone-3);      border-color: var(--rule-md); }
.status--normal      { color: var(--map-positive);  border-color: var(--map-positive); }
.status--watch       { color: var(--stone-2);       border-color: var(--stone-2); }
.status--moderate    { color: var(--map-caution);   border-color: var(--map-caution); }
.status--significant { color: var(--map-alert);     border-color: var(--map-alert); }
.status--exceptional { color: var(--map-alert);     border-color: var(--map-alert); font-weight: 600; }
.status--error       { color: var(--stone-2);       border-color: var(--rule-md); }

/* ── Stats grid ──────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px var(--gap-sm);
}

.stats-grid dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--stone-3);
  align-self: baseline;
  white-space: nowrap;
}

.stats-grid dd {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--stone-1);
  line-height: 1.85;
}

/* ── Spatial meta ────────────────────────────────────────────────────────── */
.spatial-meta {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  color: var(--stone-3);
  line-height: 1.9;
}

/* ── Legend ──────────────────────────────────────────────────────────────── */
.legend { display: flex; flex-direction: column; gap: 5px; }

.legend-row {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.legend-swatch {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

.swatch--baseline    { background: var(--map-seq-1); border: 1px solid var(--rule-md); }
.swatch--watch       { background: var(--map-seq-2); border: 1px solid var(--rule-md); }
.swatch--deviation   { background: var(--map-caution); }
.swatch--significant { background: var(--map-seq-5); }
.swatch--critical    { background: var(--map-alert); }

.legend-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-2);
  flex: 1;
}

.legend-value {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  color: var(--stone-3);
  white-space: nowrap;
}

/* ── Layer toggle ────────────────────────────────────────────────────────── */
/*    Switches between Temperature / Vegetation / Moisture map layers.       */
.layer-toggle {
  display: flex;
  gap: 4px;
}

.layer-btn {
  flex: 1;
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-3);
  background: transparent;
  border: 1px solid var(--rule-md);
  border-radius: var(--radius-sm);
  padding: 3px 0;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.layer-btn:hover {
  color: var(--stone-1);
  border-color: var(--stone-3);
}

.layer-btn--active {
  color: var(--stone-1);
  border-color: var(--stone-1);
  background: var(--surface);
}

/* Vegetation index anomaly swatches */
.swatch--veg-watch    { background: #d4e8c0; border: 1px solid var(--rule-md); }
.swatch--veg-moderate { background: #7fb86a; }
.swatch--veg-signif   { background: #3e7a38; }
.swatch--veg-baseline { background: var(--map-seq-1); border: 1px solid var(--rule-md); }

/* Moisture (NDMI) deficit swatches — warm ramp signals dryness concern */
.swatch--moist-watch    { background: #c4e4f0; border: 1px solid var(--rule-md); }
.swatch--moist-moderate { background: #4fa8c8; }
.swatch--moist-signif   { background: #1d6080; }
.swatch--moist-baseline { background: var(--map-seq-1); border: 1px solid var(--rule-md); }

/* Smoke / aerosol anomaly swatches — purple gradient ramp signals smoke loading */
.swatch--smoke-baseline { background: #f0eeeb; border: 1px solid var(--rule-md); }
.swatch--smoke-watch    { background: #cbb4d4; border: 1px solid var(--rule-md); }
.swatch--smoke-moderate { background: #9b7fa8; }
.swatch--smoke-signif   { background: #6d4f7d; }
.swatch--smoke-critical { background: #3d2847; }

/* Aquatic turbidity swatches — teal-cyan ramp signals sediment loading */
.swatch--aqua-baseline { background: #cfe8e8; border: 1px solid var(--rule-md); }
.swatch--aqua-watch    { background: #66c2c2; border: 1px solid var(--rule-md); }
.swatch--aqua-moderate { background: #2d9999; }
.swatch--aqua-signif   { background: #1a7373; }
.swatch--aqua-critical { background: #0d4d4d; }

/* ── Legend note ─────────────────────────────────────────────────────────── */
.legend-note {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--stone-3);
  line-height: 1.75;
  margin-top: 6px;
  border-top: 1px solid var(--rule);
  padding-top: 6px;
}

/* ── Observation date navigator ─────────────────────────────────────────── */
.obs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap-sm);
}
.obs-nav .section-label { margin-bottom: 0; }
.obs-nav-controls { display: flex; gap: 3px; }

.obs-nav-btn {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1;
  color: var(--stone-3);
  background: transparent;
  border: 1px solid var(--rule-md);
  border-radius: var(--radius-sm);
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.obs-nav-btn:hover:not(:disabled) {
  color: var(--stone-1);
  border-color: var(--stone-3);
}
.obs-nav-btn:disabled,
.obs-nav-btn--disabled {
  opacity: 0.28;
  cursor: default;
}

/* ── Mode toggle ─────────────────────────────────────────────────────────── */
.mode-toggle {
  display: flex;
  gap: 4px;
}

.mode-btn {
  flex: 1;
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-3);
  background: transparent;
  border: 1px solid var(--rule-md);
  border-radius: var(--radius-sm);
  padding: 3px 0;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.mode-btn:hover {
  color: var(--stone-1);
  border-color: var(--stone-3);
}

.mode-btn--active {
  color: var(--stone-1);
  border-color: var(--stone-1);
  background: var(--surface);
}

.mode-hint {
  margin-top: 6px;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--stone-3);
  line-height: 1.7;
}

/* ── Observation log ─────────────────────────────────────────────────────── */
.log-list { list-style: none; display: flex; flex-direction: column; gap: 3px; }

.log-list li {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 3px 5px;
  border-left: 2px solid var(--rule-md);
  color: var(--stone-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.log-list li.level--normal      { border-color: var(--map-positive); }
.log-list li.level--watch       { border-color: var(--map-seq-2); color: var(--stone-2); }
.log-list li.level--moderate    { border-color: var(--map-caution); color: var(--stone-1); }
.log-list li.level--significant { border-color: var(--map-alert); color: var(--stone-1); }
.log-list li.level--exceptional { border-color: var(--map-alert); color: var(--stone-1); font-weight: 500; }
.log-list li { cursor: pointer; }
.log-list li:hover { background: var(--surface); }
.log-list li.log-selected { background: var(--surface); color: var(--stone-1); font-weight: 500; }

.log-value { color: var(--stone-3); }

/* ── Pipeline note ───────────────────────────────────────────────────────── */
.panel-section--footer {
  margin-top: auto;
  border-bottom: none;
  border-top: 2px solid var(--rule-md);
  background: var(--surface);
}

.pipeline-note {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--stone-2);
  line-height: 2.1;
  margin-bottom: var(--gap-sm);
}

/* ── Map ─────────────────────────────────────────────────────────────────── */
.map-container { position: relative; overflow: hidden; }
#map { width: 100%; height: 100%; }

/* ── Pixel dossier ───────────────────────────────────────────────────────── */
.map-dossier {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 300px;
  background: var(--paper);
  border-left: 1px solid var(--hairline);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.map-dossier.open { transform: translateX(0); }

.map-dossier-header {
  position: sticky;
  top: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
  flex-shrink: 0;
}
.map-dossier-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-3);
}
.map-dossier-close {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--stone-3);
  cursor: pointer;
  transition: color 0.1s;
  line-height: 1;
}
.map-dossier-close:hover { color: var(--ink); }

.map-dossier-body { padding: 1.4rem 1.2rem 2.4rem; }

.map-dossier-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.4rem;
  line-height: 1.35;
}
.map-dossier-sub {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  color: var(--stone-2);
  line-height: 1.85;
  font-weight: 300;
  margin-bottom: 1.6rem;
  text-transform: uppercase;
}

.map-dossier-section-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-3);
  margin-top: 1.2rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
}

.map-dossier-rows { }

.map-dossier-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
}
.map-dossier-row:last-child { border-bottom: none; }

.map-dossier-key {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-3);
  flex-shrink: 0;
}
.map-dossier-val {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--stone-1);
  text-align: right;
}

/* Override Mapbox GL controls to RL map chrome tokens */
.mapboxgl-ctrl-group {
  background: var(--map-control-bg) !important;
  border: 1px solid var(--map-legend-border) !important;
  box-shadow: none !important;
  border-radius: var(--radius-sm) !important;
}
.mapboxgl-ctrl-group button { background: transparent !important; }
.mapboxgl-ctrl-attrib {
  background: rgba(246,244,239,0.80) !important;
  font-size: 9px !important;
  color: var(--stone-3) !important;
}

/* Map popup */
.mapboxgl-popup-content {
  background: var(--map-tooltip-bg) !important;
  border: 1px solid var(--map-tooltip-border) !important;
  box-shadow: 0 1px 4px rgba(20,16,9,0.06) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--gap-sm) var(--gap-md) !important;
  font-family: var(--font) !important;
  min-width: 140px;
}
.mapboxgl-popup-close-button { color: var(--stone-3) !important; }

.popup-label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-3);
  margin-bottom: 2px;
}
.popup-value {
  font-size: var(--text-base);
  color: var(--stone-1);
}

/* ── Methods trigger ─────────────────────────────────────────────────────── */
.methods-trigger {
  display: block;
  margin-top: var(--gap-sm);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-3);
  cursor: pointer;
  transition: color 0.12s;
}
.methods-trigger:hover { color: var(--stone-1); }

/* ── Methods drawer (rl-drawer from layouts library) ─────────────────────── */
.rl-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 149;
  background: rgba(253,252,251,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rl-drawer-backdrop.open { display: block; }

.rl-drawer--right {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  width: 380px;
  max-width: 92vw;
  background: var(--paper);
  border-left: 1px solid var(--hairline);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.rl-drawer--right.open { transform: translateX(0); }

.rl-drawer-header {
  position: sticky;
  top: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem;
  z-index: 10;
}
.rl-drawer-title {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-3);
}
.rl-drawer-close {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--stone-3);
  cursor: pointer;
  transition: color 0.1s;
  line-height: 1;
}
.rl-drawer-close:hover { color: var(--ink); }

.rl-drawer-body {
  padding: 1.6rem 1.6rem 3rem;
}

/* ── Dossier accordion (layout-c pattern) ────────────────────────────────── */
.dossier-toggle {
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  font-family: var(--font);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-2);
  cursor: pointer;
  transition: color 0.1s;
  text-align: left;
}
.dossier-toggle:hover,
.dossier-toggle.open { color: var(--stone-1); }

.toggle-icon {
  font-size: 11px;
  color: var(--stone-3);
  transition: transform 0.15s;
  line-height: 1;
  flex-shrink: 0;
  transform: rotate(90deg);
}
.dossier-toggle.open .toggle-icon { transform: rotate(-90deg); }

.dossier-section-body {
  display: none;
  padding: 0.4rem 0 1.2rem;
}
.dossier-section-body.open { display: block; }

.dossier-section-body p {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--stone-2);
  line-height: 1.85;
  margin-bottom: 0.7rem;
}

.dossier-data-row {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
}
.dossier-data-row:last-child { border-bottom: none; }

.dossier-data-key {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-3);
  flex-shrink: 0;
}
.dossier-data-val {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--stone-2);
  text-align: right;
}

/* ── Provenance links within drawer ─────────────────────────────────────── */
.drawer-link {
  color: var(--stone-2);
  text-decoration: underline;
  text-decoration-color: var(--rule-md);
  text-underline-offset: 2px;
  transition: color 0.1s, text-decoration-color 0.1s;
}
.drawer-link:hover {
  color: var(--stone-1);
  text-decoration-color: var(--stone-2);
}