/* ═══════════════════════════════════════════════════════════════════════════
   ui/survey.css — the survey browser's own surfaces.
   ---------------------------------------------------------------------------
   Chrome (nav, honesty strip, .zc-panel / .zc-toolbar / .zc-btn, the file://
   guard) comes from ui/theme.css, which loads FIRST — the same system the
   per-cell difference viewer (ui/cell-aladin.html) and ui/index.html use, so
   this page reads as the same instrument rather than its own dark-only skin.

   This file therefore defines NO --bg/--ink/--line/--card of its own: those are
   theme.css's tokens and must stay overridable by the night/plate toggle. What
   it does own is the honesty palette below (recovery / candidate / verdict /
   processed / unchecked). Those stay literal hex on purpose: the map's markers
   and footprints are drawn on a canvas from the SAME hex constants in
   survey-map.js and survey-zoom.js, so a legend swatch that re-themed would
   stop matching the thing it is a key for. The sky behind them is always dark.

   Everything is prefixed `svy-`/scoped to an id so nothing here can reach the
   single-field viewer's CSS, which shares this directory.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The five honesty-category hues (--recovery / --candidate / --verdict /
   --processed / --unchecked, both themes) and the .realness badge live in
   detail-drawer.css, which this page links FIRST. One definition, two pages. */

* { box-sizing: border-box; }

html { height: 100%; }
/* Column flex rather than `height: calc(100vh - <magic numbers>)`: the header's
   tagline wraps to a different number of lines at every width, so any hardcoded
   header height is wrong somewhere. nav / #hbar / #fileGate / #svy-drawer are all
   position:fixed and out of flow; body's padding-top clears the fixed chrome. */
body {
  margin: 0; padding: var(--chrome-h) 0 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 14px/1.5 var(--ff-d);
  overflow: hidden;                       /* the map and panels scroll, not the page */
}

/* ------------------------------------------------------------------ header
   Sits BELOW the fixed nav + honesty strip (theme.css owns both, and
   --chrome-h is their combined height). */
#header {
  flex: 0 0 auto;
  padding: 9px var(--gut) 8px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-2);
}
#header h1 {
  margin: 0 0 3px; font-size: 17px; line-height: 1.15; letter-spacing: -.015em;
  font-variation-settings: 'wght' 600, 'wdth' 96; color: var(--ink);
}
#tagline { margin: 0; font-size: 12.5px; color: var(--ink-2); max-width: 92ch; line-height: 1.5; }
#tagline strong { color: var(--am); font-weight: 400; }

#summary-chips { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-family: var(--ff-m); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink-2);
}
.chip b { color: var(--ink); font-weight: 400; }
.chip[data-cls="recovery"]  { border-color: color-mix(in srgb, var(--recovery) 60%, var(--line)); }
.chip[data-cls="candidate"] { border-color: color-mix(in srgb, var(--candidate) 60%, var(--line)); }
.chip[data-cls="verdict"]   { border-color: color-mix(in srgb, var(--verdict) 60%, var(--line)); }
.chip[data-cls="unchecked"] { border-color: color-mix(in srgb, var(--unchecked) 60%, var(--line)); }

/* ------------------------------------------------------------------ layout */
#layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 340px;
  gap: 0;
  flex: 1 1 auto; min-height: 0;
}
#views-panel, #exposure-panel {
  overflow-y: auto; padding: 12px 14px; background: var(--bg-2);
}
#views-panel { border-right: 1px solid var(--line-2); }
#exposure-panel { border-left: 1px solid var(--line-2); }
#views-panel h2, #exposure-panel h2 {
  margin: 0 0 4px; font-family: var(--ff-m);
  font-size: 10px; text-transform: uppercase; letter-spacing: .22em;
  color: var(--am); font-weight: 400;
}
/* --ink-2, not --ink-3: --ink-3 measures ~3.3:1 in night and ~2.9:1 in plate,
   under AA for body-size text. Same local bump the explainer pages made. */
.hint { margin: 0 0 10px; font-size: 11.5px; color: var(--ink-2); line-height: 1.5; }

#map-wrap { position: relative; min-width: 0; background: #04060c; }
#survey-map { position: absolute; inset: 0; }

/* ---------------------------------------------------- floating map surfaces
   All three (toolbar, legend, status) share the viewer's glass-panel language.
   Placement: toolbar top-right (under Aladin's own button row), status directly
   under it, legend bottom-left, and survey-zoom.js's #svy-cell-hud bottom-right
   — so none of them can overlap each other or Aladin's own controls. */
/* top:52px, not 10px: Aladin builds its OWN projection + fullscreen buttons in
   the map's top-right corner (measured ~37px tall), and the top-left corner is
   its coordinate readout + layer stack. This row sits clear underneath both. */
#viewer-controls {
  position: absolute; top: 52px; right: 10px; z-index: 25;
  max-width: calc(100% - 20px);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
#viewer-controls::-webkit-scrollbar { display: none; }
#viewer-controls .zc-btn { flex: 0 0 auto; }

/* bottom:44px, not 10px: Aladin draws its own FoV readout in the map's
   bottom-left corner and an opaque panel on top of it hides it (measured —
   the pre-redesign legend did exactly that). */
#map-legend {
  position: absolute; left: 10px; bottom: 44px; z-index: 20;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 6px 10px; font-size: 11.5px; color: var(--ink-2);
  /* never reach under #svy-cell-hud (268px wide + its 8px gutter) on the right */
  max-width: calc(100% - 300px);
}
.lg { display: inline-flex; align-items: center; gap: 5px; }
.lg i { width: 10px; height: 10px; border: 2px solid var(--processed); border-radius: 2px; }
.lg[data-cls="recovery"]   i { border-color: var(--recovery); }
.lg[data-cls="candidates"] i { border-color: var(--candidate); }
.lg[data-cls="verdicts"]   i { border-color: var(--verdict); }
.lg[data-cls="cell"] i { border-color: var(--cy); border-radius: 50%; }
.lg-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.lg-title {
  font-family: var(--ff-m); font-size: 9px; text-transform: uppercase; letter-spacing: .2em;
  color: var(--ink-3); min-width: 62px;
}
.lg[data-mk="real"]   i { border-color: var(--verdict); border-width: 2px;
                          box-shadow: 0 0 5px var(--verdict); }
.lg[data-mk="cand"]   i { border-color: var(--candidate); border-width: 1px; }
.lg[data-mk="bogus"]  i { border-color: #6b7488; border-width: 1px; border-radius: 50%; }
.lg[data-mk="uneval"] i { border-color: #4a5064; border-width: 1px; border-radius: 50%;
                          border-style: dashed; width: 8px; height: 8px; }

/* Top-RIGHT, tucked under the toolbar. NOT top-left: Aladin draws its own
   coordinate/FoV readout and its layer-stack button there, and a panel over
   them is unreadable (measured — they collided). */
#map-status {
  position: absolute; right: 10px; top: 100px; z-index: 20;
  background: var(--card-2); border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border-radius: 3px; padding: 5px 10px;
  font-family: var(--ff-m); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-2);
  max-width: calc(100% - 20px);
}

/* ------------------------------------------------------------------ views */
#view-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.vtab {
  font-family: var(--ff-m); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 8px; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line-2); border-radius: 2px; color: var(--ink-3);
  transition: color .2s, border-color .2s, background .2s;
}
.vtab:hover { color: var(--ink); border-color: var(--line); }
.vtab[aria-selected="true"] {
  color: var(--am); border-color: color-mix(in srgb, var(--am) 55%, var(--line));
  background: color-mix(in srgb, var(--am) 12%, transparent);
}

.view-note {
  font-size: 11.5px; color: var(--ink-2); margin: 0 0 8px; line-height: 1.5;
  padding: 7px 9px; border-left: 2px solid var(--line);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.view-note[data-cls="recovery"]   { border-left-color: var(--recovery); }
.view-note[data-cls="candidate"]  { border-left-color: var(--candidate); }
.view-note[data-cls="verdict"]    { border-left-color: var(--verdict); }
.view-note[data-cls="unchecked"]  { border-left-color: var(--unchecked); }

/* ------------------------------------------------------------------ rows */
.row {
  padding: 6px 8px; margin-bottom: 4px; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line-2);
  border-left-width: 3px; border-radius: 2px; font-size: 12px;
  transition: background .18s, border-color .18s;
}
.row:hover { background: color-mix(in srgb, var(--cy) 9%, transparent); border-color: var(--line); }
.row[data-cat="recovery"]  { border-left-color: var(--recovery); }
.row[data-cat="candidate"] { border-left-color: var(--candidate); }
.row[data-cat="verdict"]   { border-left-color: var(--verdict); }
.row[data-cat="none"]      { border-left-color: var(--processed); }
.row-top { display: flex; justify-content: space-between; gap: 8px; }
.row-id { font-family: var(--ff-m); font-size: 10.5px; color: var(--ink); }
.row-sub { color: var(--ink-2); font-size: 11px; margin-top: 2px; }

.cat {
  font-family: var(--ff-m); font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
  padding: 2px 5px; border-radius: 2px; border: 1px solid currentColor;
}
.cat[data-cat="recovery"]  { color: var(--recovery); }
.cat[data-cat="candidate"] { color: var(--candidate); }
.cat[data-cat="verdict"]   { color: var(--verdict); }
.cat[data-cat="none"]      { color: var(--processed); }
.cat[data-cat="unchecked"] { color: var(--unchecked); }

.row[data-real="real"] { background: color-mix(in srgb, var(--verdict) 10%, transparent); }
.row[data-real="bogus"], .row[data-real="unevaluated"] { opacity: .72; }
.row[data-real="bogus"]:hover, .row[data-real="unevaluated"]:hover { opacity: 1; }

.tally {
  font-family: var(--ff-m); font-size: 10px; letter-spacing: .05em; color: var(--ink-3);
  margin: 2px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-2);
}
.tally b { color: var(--verdict); font-weight: 400; }

.truncnote { font-size: 11px; color: var(--ink-2); margin: 8px 0 4px; font-style: italic; }
.empty { font-size: 12px; color: var(--ink-2); padding: 8px 0; }

#exposure-meta {
  font-size: 11.5px; color: var(--ink-2); margin-bottom: 8px; line-height: 1.55;
  border-bottom: 1px solid var(--line-2); padding-bottom: 8px;
}
#exposure-meta b { color: var(--ink); font-weight: 400; }
.warn {
  display: block; margin-top: 6px; padding: 5px 7px; font-size: 11px; line-height: 1.5;
  color: var(--am); background: color-mix(in srgb, var(--am) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--am) 40%, var(--line)); border-radius: 2px;
}

/* The per-detection drawer (#svy-drawer, .banner, .svy-*, .verdict-head, .strike)
   now lives in detail-drawer.css — shared with ui/cell-aladin.html. */


/* ------------------------------------------ zoom-in imagery HUD (survey-zoom.js)
   Sits bottom-right of the map, clear of #map-status (top-right) and beside
   #map-legend (bottom-left), so none of them overlap at any width. */
#svy-cell-hud {
  position: absolute; right: 8px; bottom: 8px; z-index: 5;
  width: 268px; max-width: calc(100% - 16px); max-height: 52%; overflow-y: auto;
  padding: 8px 10px; font-size: 11.5px; line-height: 1.45;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
  color: var(--ink-2);
}
#svy-cell-hud .hud-line { color: var(--ink); }
#svy-cell-hud .hud-dim { color: var(--ink-2); }
.hud-cell {
  margin-top: 8px; padding: 6px 8px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 4%, transparent); border-left: 3px solid var(--cy);
}
.hud-cell b { display: block; color: var(--ink); font-weight: 400; }
.hud-cell .hud-sub { display: block; font-size: 11px; color: var(--ink-2); }
.hud-open {
  display: inline-block; margin-top: 4px;
  font-family: var(--ff-m); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cy); text-decoration: none; border-bottom: 1px solid transparent;
}
.hud-open:hover { border-bottom-color: var(--cy); }
.hud-warn {
  margin-top: 6px; padding: 5px 7px; border-radius: 2px; font-size: 11px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-left: 3px solid var(--unchecked); color: var(--ink-2);
}
.hud-warn b { color: var(--ink); font-weight: 400; }
.hud-ctl {
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 4px; font-size: 11px;
}
.hud-ctl label { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-2); }
.hud-ctl input { margin: 0; accent-color: var(--am); }

@media (max-width: 1100px) {
  #layout { grid-template-columns: 250px minmax(0, 1fr); }
  #exposure-panel { display: none; }
}
@media (max-width: 760px) {
  /* Stack rather than hide: "Across the survey" is the only way into the
     cross-exposure views, so dropping it would remove real function. */
  #layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 34%) minmax(0, 1fr); }
  #views-panel { border-right: 0; border-bottom: 1px solid var(--line-2); }
  #map-legend { max-width: calc(100% - 20px); bottom: 10px; }
  #svy-cell-hud { max-height: 40%; }

  /* The intro costs 220px of a 780px screen if left alone, and the map is the
     page. Nothing is hidden: the tagline just sets tighter and the summary
     chips scroll sideways in one row instead of wrapping to three. */
  #header { padding: 8px var(--gut) 7px; }
  #tagline { font-size: 11.5px; line-height: 1.45; }
  #summary-chips {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  #summary-chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
}