/* wildfire-exposure-eo geobrowser (WU-9). Two-pane layout: study panel + map. */

:root {
  --panel-width: 380px;
  --ink: #222;
  --muted: #666;
  --accent: #b34700;
  --border: #ddd;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}

#layout {
  display: flex;
  height: 100vh;
}

#panel {
  width: var(--panel-width);
  flex: none;
  overflow-y: auto;
  padding: 16px 18px 24px;
  border-right: 1px solid var(--border);
  background: #fdfdfb;
  font-size: 13.5px;
  line-height: 1.45;
}

#map { flex: 1; min-width: 0; }

h1 { font-size: 19px; margin: 0 0 8px; }
h2 { font-size: 14px; margin: 18px 0 6px; border-bottom: 1px solid var(--border); padding-bottom: 3px; }
h3 { font-size: 12.5px; margin: 10px 0 4px; }

a { color: #0b5394; }
code { font-size: 12px; background: #f0efe9; padding: 0 3px; border-radius: 3px; }

.lead { margin: 0 0 8px; }

.scope-banner {
  background: #fff3e0;
  border-left: 3px solid var(--accent);
  padding: 7px 10px;
  margin: 8px 0;
  font-size: 12.5px;
}

.caption { color: var(--muted); font-size: 12px; margin: 2px 0 0 22px; }
footer .caption, #validation-section .caption { margin-left: 0; }

.layer-row { margin: 8px 0; }
.layer-row label { font-weight: 600; cursor: pointer; }
/* A temporarily-withdrawn layer toggle: dimmed and not interactive. */
.layer-row label.disabled { cursor: not-allowed; opacity: 0.55; }
.tag.withdrawn { background: #b5471f; color: #fff; }

/* Thematic TOC groups: a labelled fieldset per pipeline stage (Inputs, Interim,
   Output, Validation, Operational). Light border + uppercase legend so the
   grouping reads at a glance without crowding the layer rows. */
.toc-group {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 10px 8px;
  margin: 10px 0;
}
.toc-group > legend {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  padding: 0 5px;
}
.toc-group .group-caption { margin-left: 0; margin-bottom: 4px; }

/* Process / provenance panel: the pipeline as a temporal timeline. Each step is
   a left-bordered <li> with a dated label, a title, and a one-line body. */
.process-intro { margin-left: 0; }
.process-timeline { list-style: none; padding: 0; margin: 6px 0 0; }
.process-timeline li {
  position: relative;
  padding: 4px 0 8px 14px;
  border-left: 2px solid var(--border);
  margin-left: 4px;
}
.process-timeline li::before {
  content: "";
  position: absolute;
  left: -5px; top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.process-when {
  display: block;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.process-title { display: block; font-size: 12.5px; }
.process-body { display: block; font-size: 12px; color: var(--muted); }

/* Burn-history legend: one swatch row per source (ICNF vs EFFIS). */
#burnhistory-legend-list { list-style: none; padding: 0; margin: 4px 0; font-size: 12px; }
#burnhistory-legend-list li { display: flex; align-items: center; gap: 6px; margin: 2px 0; }

.tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}
.tag.output { background: #2a6f3c; color: #fff; }
.tag.input { background: #e8e6df; color: #555; }
.tag.operational, .layer-row label .tag.operational { background: #b5471f; color: #fff; }
.tag.ui, .layer-row label .tag:not(.output):not(.input):not(.operational) { background: #d9e6ef; color: #355; }

.fwi-select-label { display: block; margin: 4px 0 0 22px; font-size: 12px; color: var(--muted); }
.fwi-select-label select { margin-left: 4px; font-size: 12px; }
/* Nested per-AOI ICNF toggle inside the study-area row: indented to read as a
   sub-option of the active validation study area. */
.study-icnf-label { display: block; margin: 6px 0 0 22px; cursor: pointer; }

.error { color: #b00020; font-size: 12px; }

#legend-section canvas { display: block; border: 1px solid var(--border); }
.ramp-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  width: 220px;
}

#fuel-legend-list { list-style: none; padding: 0; margin: 4px 0; font-size: 12px; }
#fuel-legend-list li { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.swatch {
  width: 14px; height: 14px; flex: none;
  border: 1px solid #999; border-radius: 2px;
}

#validation-body table { border-collapse: collapse; font-size: 12.5px; margin: 6px 0; }
#validation-body td { padding: 2px 8px 2px 0; vertical-align: top; }
#validation-body td:first-child { color: var(--muted); }

#downloads-list { padding-left: 18px; margin: 4px 0; }
#downloads-list li { margin: 3px 0; }
#downloads-list .size { color: var(--muted); font-size: 11.5px; }

#diagrams pre.mermaid {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px;
  overflow-x: auto;
  margin: 8px 0;
}
#diagrams h3 { margin-top: 14px; }

/* Asset analyser table. Filter controls wrap in a compact grid; the table body
   scrolls vertically inside a fixed-height wrap so the panel stays navigable
   even with thousands of rows. Impact-severity cells carry a viridis-ish heat
   bar (width = severity) so the triage reads at a glance. */
.analyser-intro { margin-left: 0; }

#analyser-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 8px;
  margin: 6px 0;
}
#analyser-controls label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--muted);
  gap: 2px;
}
#analyser-controls label.analyser-search { grid-column: 1 / -1; }
#analyser-controls select,
#analyser-controls input {
  font-size: 12px;
  padding: 2px 3px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
}

#analyser-count { margin-left: 0; font-weight: 600; color: var(--ink); }

#analyser-table-wrap {
  max-height: 340px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
}
#analyser-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
  table-layout: fixed;
}
/* Fixed column widths so the IMPACT SEVERITY column (the headline) is always in
   view inside the 380 px panel; long type/AOI text ellipsises rather than
   pushing the numeric columns off-screen. */
#analyser-table th:nth-child(1), #analyser-table td:nth-child(1) { width: 21%; }
#analyser-table th:nth-child(2), #analyser-table td:nth-child(2) { width: 23%; }
#analyser-table th:nth-child(3), #analyser-table td:nth-child(3) { width: 16%; }
#analyser-table th:nth-child(4), #analyser-table td:nth-child(4) { width: 9%; }
#analyser-table th:nth-child(5), #analyser-table td:nth-child(5) { width: 11%; }
#analyser-table th:nth-child(6), #analyser-table td:nth-child(6) { width: 9%; }
#analyser-table th:nth-child(7), #analyser-table td:nth-child(7) { width: 11%; }
#analyser-table td.asset-name, #analyser-table td.asset-type, #analyser-table td:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#analyser-table thead th {
  position: sticky;
  top: 0;
  background: #f0efe9;
  z-index: 1;
  text-align: left;
  padding: 4px 5px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
#analyser-table th.num { text-align: right; }
#analyser-table th[aria-sort] { color: var(--accent); }
#analyser-table tbody td {
  padding: 3px 5px;
  border-bottom: 1px solid #efeee8;
  vertical-align: middle;
}
#analyser-table tbody tr { cursor: pointer; }
#analyser-table tbody tr:hover { background: #fff3e0; }
#analyser-table tbody tr.selected { background: #ffe1b3; }
#analyser-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
#analyser-table td.asset-type code { font-size: 10.5px; background: none; padding: 0; color: var(--muted); }
.burn-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
  background: #e31a1c;
}
.impact-cell {
  position: relative;
  min-width: 56px;
}
.impact-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  margin-top: 1px;
  background: var(--accent);
}
#analyser-roads-note {
  margin-left: 0;
  background: #f4f4ef;
  border-left: 3px solid #5a7d9a;
  padding: 6px 9px;
}
#analyser-burned-note { margin-left: 0; }

footer { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 8px; }

.maplibregl-popup-content { font-size: 12.5px; line-height: 1.4; }
.maplibregl-popup-content h4 { margin: 0 0 4px; font-size: 13px; }

/* Basemap switcher: two radios under one heading, distinct from the layer
   checkboxes (lighter weight, inline). */
#basemap-switcher label.radio { font-weight: 400; display: inline-block; margin-right: 10px; }

/* Hover tooltip. position:fixed + clientX/Y (set in app.js) avoids scroll-offset
   math; pointer-events:none keeps it from stealing map events. Deliberately
   lighter than .maplibregl-popup-content so the hover label reads as a transient
   summary, not a click popup. white-space:pre-line renders the "\n" line breaks
   that showTip() inserts. */
#hover-tip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 9px;
  font-size: 12px;
  line-height: 1.4;
  max-width: 260px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  white-space: pre-line;
}

/* ------------------------------------------------------------------------- *
 * Symbol legend (shape = asset class). Glyphs are dark-fill inline SVGs; the
 * colour axis is shown by the viridis ramp above. */
#legend-symbols { margin-top: 10px; }
.legend-axis {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #fff; background: #5a7d9a;
  padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle;
}
#legend-exposure .legend-axis { background: #2a6f3c; }
.legend-note { margin-left: 0; }
#symbol-legend-list { list-style: none; padding: 0; margin: 4px 0; font-size: 12px; }
#symbol-legend-list li { display: flex; align-items: center; gap: 7px; margin: 3px 0; }
#symbol-legend-list svg.glyph { flex: none; }

.ghost-btn {
  font: inherit; font-size: 12px; color: #0b5394;
  background: none; border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 8px; cursor: pointer;
}
.ghost-btn:hover { background: #eef4fb; }

/* ------------------------------------------------------------------------- *
 * Floating / dockable attribute table. Overlaid on the map (position:fixed so
 * its coordinate frame is the viewport — drag math stays offset-free). Three
 * dock modes via class: .floating (free, left/top set inline), .docked-left,
 * .docked-right (snap full-height to a side). .collapsed hides the body.
 *
 * NOTE: it is fixed to the viewport, not the #map element, but it visually sits
 * over the map (which fills the right of the layout). Snap docking uses the
 * map's on-screen rect (app.js) so "dock left" lands at the map's left edge,
 * not under the study panel. */
#analyser-float {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: #fdfdfb;
  border: 1px solid #bbb;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  font-size: 13px;
}
#analyser-float.floating {
  width: 440px;
  height: 60vh;
  max-height: 88vh;
}
#analyser-float.docked-right {
  top: 0; right: 0; bottom: 0;
  width: 460px;
  max-width: 60vw;
  border-radius: 0;
  border-right: none; border-top: none; border-bottom: none;
}
#analyser-float.docked-left {
  top: 0; bottom: 0;
  left: var(--panel-width); /* sit at the map's left edge, beside the study panel */
  width: 460px;
  max-width: 60vw;
  border-radius: 0;
  border-left: none; border-top: none; border-bottom: none;
}
#analyser-float.collapsed { height: auto !important; bottom: auto; }
#analyser-float.collapsed #analyser-float-body,
#analyser-float.collapsed #analyser-resize { display: none; }
#analyser-float.dragging { user-select: none; opacity: 0.96; }

#analyser-float-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: #2f3b45;
  color: #fff;
  cursor: grab;
  touch-action: none;
  flex: none;
}
#analyser-float.dragging #analyser-float-header { cursor: grabbing; }
#analyser-float-header .grip { opacity: 0.7; font-size: 14px; }
#analyser-float-header .title { font-size: 13px; flex: 1; }
#analyser-float-header .float-actions { display: flex; gap: 3px; }
#analyser-float-header button {
  font: inherit; font-size: 12px; line-height: 1;
  background: rgba(255, 255, 255, 0.12);
  color: #fff; border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px; padding: 2px 6px; cursor: pointer;
}
#analyser-float-header button:hover { background: rgba(255, 255, 255, 0.28); }

#analyser-float-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 10px 10px;
}
/* Inside the floating panel the table-wrap is the scroll container and grows to
   fill the panel height (rather than the old fixed 340px sidebar cap). The
   filter controls, count line and notes keep their natural height; the table
   body scrolls inside the remaining space, with the sticky header pinned. */
#analyser-float #analyser-table-wrap {
  max-height: none;
  flex: 1;
  min-height: 120px;
}
#analyser-float #analyser-controls,
#analyser-float #analyser-count,
#analyser-float #analyser-burned-note,
#analyser-float #analyser-roads-note { flex: none; }
/* Notes below the table: collapse to a scrollable max-height so they do not
   crowd out the table inside a short panel. */
#analyser-float #analyser-roads-note { max-height: 6.5em; overflow: auto; }

#analyser-resize {
  position: absolute;
  right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 50%, #999 50% 60%, transparent 60% 70%, #999 70% 80%, transparent 80%);
}

/* The ☰ "show table" button, parked at the top of the map when the panel is
   hidden. */
#table-show-btn {
  position: fixed;
  z-index: 1200;
  top: 10px;
  left: calc(var(--panel-width) + 12px);
  font: inherit; font-size: 12.5px; font-weight: 600;
  background: #2f3b45; color: #fff;
  border: none; border-radius: 5px;
  padding: 6px 11px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
#table-show-btn:hover { background: #3d4b57; }

/* Row flash on reverse (map → table) reveal: a brief amber pulse so the eye
   catches the scrolled-to row. */
@keyframes row-flash {
  0% { background: #ffd166; }
  60% { background: #ffe9b3; }
  100% { background: #ffe1b3; } /* settle on the .selected highlight */
}
#analyser-table tbody tr.flash { animation: row-flash 1.2s ease-out; }

@media (max-width: 760px) {
  #layout { flex-direction: column; }
  #panel { width: 100%; height: 45vh; border-right: none; border-bottom: 1px solid var(--border); }
  #map { height: 55vh; }
  /* On narrow screens the floating table spans the width and docks bottom-ish. */
  #analyser-float.floating { width: 94vw; height: 50vh; }
  #analyser-float.docked-left { left: 0; width: 94vw; max-width: 94vw; }
  #analyser-float.docked-right { width: 94vw; max-width: 94vw; }
  #table-show-btn { left: 8px; top: auto; bottom: 8px; }
}