/* eve-marine-demo — light premium theme.
 * Palette per owner brief: legal-tech clarity, chart-room calm.
 * Status colors are semantic only: red=contradicted, amber=uncertain/partial,
 * green=verified support, grey=not evaluated. */
:root {
  --bg: #F4F7F8;
  --card: #FFFFFF;
  --ink: #17212B;
  --ink-2: #607080;
  --accent: #1A8F86;
  --evb: #2B6F9F;
  --warn: #C58B18;
  --contra: #C94A4A;
  --ok: #2F8A5B;
  --neval: #8A97A5;
  --border: #DCE3E7;
  --shadow: 0 1px 2px rgba(23,33,43,.05), 0 6px 18px rgba(23,33,43,.06);
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --r: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--mono); font-size: .9em; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-weight: 650; letter-spacing: -0.01em; }

/* ---------- marking banner (verbatim from index marking[]) ---------- */
#marking {
  display: flex; flex-wrap: wrap; gap: 2px 22px; justify-content: center;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 12px;
  letter-spacing: .02em;
  padding: 7px 16px;
}
#marking span { display: inline-flex; align-items: center; gap: 7px; }
#marking span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: .55;
}

/* ---------- header ---------- */
header.app {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 16px 22px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
header.app h1 { margin: 0; font-size: 19px; }
header.app h1 .brand { color: var(--accent); }
#scenario-name { color: var(--ink-2); font-size: 13.5px; }
#vessel-name { color: var(--ink-2); font-size: 12.5px; }
#pkg-id { margin-left: auto; color: var(--ink-2); font-family: var(--mono); font-size: 11.5px; }
#seal-status {
  color: var(--warn); font-family: var(--mono); font-size: 11.5px;
  background: #FAF3E3; border: 1px solid #EAD9B0; border-radius: 6px; padding: 2px 8px;
}

/* ---------- layout ---------- */
main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  /* Compact by default: the chart shares the column with the timeline so the
   * playback controls and instruments are visible without scrolling. The
   * expand toggle switches to the full-height chart. */
  grid-template-rows: minmax(300px, 44vh) auto;
  grid-template-areas: "map side" "time side";
  gap: 16px;
  padding: 16px 22px 10px;
  min-height: calc(100vh - 170px);
}
main.map-expanded {
  grid-template-rows: minmax(400px, 1fr) auto;
}
#map-wrap {
  grid-area: map; position: relative; border-radius: var(--r);
  overflow: hidden; min-height: 300px; box-shadow: var(--shadow);
  border: 1px solid var(--border); background: #DCE9F0;
}
main.map-expanded #map-wrap { min-height: 400px; }
.map-expand {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  background: rgba(255,255,255,.95); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 11px; font-size: 12px; font-weight: 600;
  color: var(--ink); cursor: pointer; box-shadow: var(--shadow);
}
.map-expand:hover { border-color: var(--evb); color: var(--evb); }
/* Compact mode declutters the chart: the text labels and the legend are
 * display aids only and reappear in the expanded view. The markers stay
 * clickable, and every labelled value remains in the transit panel. */
main:not(.map-expanded) .mk-label { display: none; }
main:not(.map-expanded) .map-legend { display: none; }
main:not(.map-expanded) .map-badge {
  left: 12px; transform: none; text-align: left;
  max-width: calc(100% - 150px); white-space: normal;
}
#map { position: absolute; inset: 0; }
.map-badge {
  position: absolute; left: 50%; transform: translateX(-50%); top: 10px; z-index: 5;
  background: rgba(255,255,255,.94); border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink-2); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; padding: 5px 14px; box-shadow: var(--shadow);
  white-space: nowrap;
}
.map-legend {
  position: absolute; left: 10px; bottom: 26px; z-index: 5;
  background: rgba(255,255,255,.94); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 11px; font-size: 11.5px; color: var(--ink-2);
  display: grid; gap: 4px; box-shadow: var(--shadow);
}
.map-legend i {
  display: inline-block; width: 14px; height: 4px; margin-right: 7px;
  vertical-align: middle; border-radius: 2px;
}
.lg-area { background: var(--ev); }
.lg-inside { background: var(--warn); }
.lg-foot { background: var(--accent); }
.lg-track { background: var(--evb); }

/* map HTML markers */
.mk-label {
  background: rgba(255,255,255,.95); border: 1px solid var(--border);
  border-radius: 7px; padding: 3px 9px; font-size: 11.5px; color: var(--ink);
  box-shadow: var(--shadow); white-space: nowrap; pointer-events: none;
}
.mk-label .mono { color: var(--ink-2); }
.mk-label.mk-inside { border-color: var(--warn); color: #8A6210; font-weight: 650; }
.mk-label.mk-endpoint { border-color: var(--evb); color: var(--evb); font-weight: 600; }
.mk-label.mk-area { border-color: #A9D6D1; color: var(--ev); }
.mk-event {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--warn); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border); cursor: pointer;
}
.mk-transit {
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 3px solid var(--evb);
  box-shadow: 0 0 0 2px rgba(255,255,255,.9); cursor: pointer;
}
.mk-transit.mk-entry { border-color: var(--ok); }
.mk-transit.mk-exit { border-color: var(--evb); }

/* ---------- panels ---------- */
#side { grid-area: side; display: flex; flex-direction: column; gap: 14px; min-width: 0; overflow-y: auto; }
#timebar { grid-area: time; }
.panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow);
}
.eyebrow {
  margin: 0 0 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}

/* ---------- status chips ---------- */
.chip {
  display: inline-block; font-size: 12px; font-weight: 650;
  padding: 3px 11px; border-radius: 999px; vertical-align: middle;
  border: 1px solid transparent;
}
.s-supported, .s-pass { color: var(--ok); background: #E7F2EB; border-color: #C8E2D2; }
.s-contradicted, .s-fail { color: var(--contra); background: #F9EAEA; border-color: #EFCFCF; }
.s-partial { color: var(--warn); background: #FAF3E3; border-color: #EAD9B0; }
.s-not_evaluated { color: var(--neval); background: #EFF2F5; border-color: var(--border); }
.s-ptfalse { color: var(--ink); background: #EFF2F5; border: 1.5px solid var(--ink); font-family: var(--mono); }

/* ---------- claim panel ---------- */
.claim-text {
  margin: 0 0 12px; font-size: 17px; line-height: 1.45; color: var(--ink);
  font-weight: 500;
}
.overall {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: #FBF7F7; border: 1px solid #EFDCDC; border-radius: 8px;
}
.overall-label { font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; }
.overall .chip { font-size: 13px; }
.hr-flag { margin: 8px 0 4px; font-size: 12px; color: var(--ink-2); }
.hr-flag b { color: var(--warn); font-weight: 650; }
.transit { margin: 12px 0 14px; padding: 11px 13px;
  background: #F0F5F9; border: 1px solid #D6E2EB; border-radius: 8px; }
.transit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
}
.transit-grid .tr-k { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .07em; }
.transit-grid .tr-v { font-size: 17px; font-weight: 650; color: var(--evb); }
.transit-grid .tr-v small { font-size: 11.5px; color: var(--ink-2); font-weight: 500; }
.transit-head { font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2); margin: 0 0 8px; font-weight: 600; }
.transit-src { margin-top: 8px; font-size: 11.5px; color: var(--ink-2); }
.cond-reason { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.ins-value.inside { color: #8A6210; }

.cond-list { display: grid; gap: 10px; }
.cond {
  text-align: left; background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; display: grid; gap: 6px;
  transition: border-color 120ms, box-shadow 120ms;
}
.cond:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.cond-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.cond-label { font-size: 13.5px; color: var(--ink); }
.cond-partial { font-size: 12px; color: var(--warn); }
.cond-more { font-size: 11.5px; color: var(--ink-2); }

/* ---------- trust panel ---------- */
.trust-row { padding: 9px 0; border-bottom: 1px solid #EDF1F4; }
.trust-row:last-of-type { border-bottom: 0; }
.trust-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.trust-name { font-size: 13px; color: var(--ink); }
.trust-reason { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.prod-trust {
  margin-top: 14px; padding: 13px 15px;
  border: 2px solid var(--ink); border-radius: 8px; background: #FAFBFC;
}
.prod-trust .trust-name { font-family: var(--mono); font-weight: 650; font-size: 12.5px; }
.pt-reasons { margin: 8px 0 0; padding-left: 20px; }
.pt-reasons li { font-family: var(--mono); font-size: 11.5px; color: var(--ink); margin: 3px 0; }
.pt-note { margin-top: 9px; font-size: 12px; color: var(--ink-2); }
#seal-line { margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }

/* ---------- timeline ---------- */
#timebar { display: grid; gap: 10px; }
.tl-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 13px 16px; box-shadow: var(--shadow); }
.tl-controls { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
#btn-play {
  background: var(--accent); color: #fff; font-weight: 650;
  border-radius: 8px; padding: 7px 18px; min-width: 78px;
}
#btn-play:hover { filter: brightness(1.05); }
[data-speed] {
  border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px;
  color: var(--ink-2); font-size: 12px;
}
[data-speed].on { color: var(--accent); border-color: var(--accent); background: #EAF4F3; }
#btn-frame-evidence {
  margin-left: auto; border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 11px; color: var(--evb); font-size: 12px;
}
#btn-frame-evidence:hover { border-color: var(--evb); background: #F0F5F9; }

.tl-track { position: relative; padding: 8px 0 24px; }
#tl-slider { width: 100%; accent-color: var(--accent); }
#tl-events { position: absolute; left: 0; right: 0; top: 24px; height: 16px; }
.tl-event {
  position: absolute; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--warn); border: 2px solid var(--card); padding: 0;
  box-shadow: 0 0 0 1px var(--border);
}
.tl-event-label { display: none; }
.tl-event:hover::after {
  content: attr(title); position: absolute; bottom: 16px; left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: var(--ink); color: #fff; border-radius: 6px;
  font-size: 11.5px; padding: 4px 9px; z-index: 20;
}

.instruments { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 9px; }
.ins { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.ins-k { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.ins-value { font-family: var(--mono); font-size: 18px; margin-top: 2px; color: var(--ink); }
.ins-value.active { color: var(--warn); }
.ins-value.warn { color: var(--contra); font-size: 13px; }
.ins-value.dim { color: var(--neval); font-size: 11.5px; font-family: var(--sans); }
.ins-unit { font-size: 11px; color: var(--ink-2); margin-left: 3px; }
.not-in-dataset { grid-column: 1 / -1; font-size: 11.5px; color: var(--neval); }

/* Event log: a vertical, scrollable list in chronological order. The cap
 * keeps the card stable however many events a voyage produces; longer
 * voyages scroll instead of reflowing the layout. */
#ev-list {
  list-style: none; margin: 8px 0 0; padding: 4px 2px;
  display: flex; flex-direction: column; gap: 3px;
  max-height: 132px; overflow-y: auto;
  border-top: 1px solid var(--border);
}
#ev-list li { font-size: 12px; color: var(--neval); padding: 2px 4px; border-radius: 5px; }
#ev-list li.past { color: var(--ink); background: #F0F5F9; }
#ev-list li .mono { color: var(--evb); margin-right: 7px; }

/* ---------- hashes ---------- */
.hash {
  font-family: var(--mono); font-size: 11px; color: var(--evb);
  border: 1px dashed #B9CFDF; border-radius: 6px; padding: 2px 7px; margin: 1px 4px 1px 0;
  background: #F7FAFC;
}
.hash:hover { border-color: var(--evb); background: #EDF4F9; }
.hash.static { border-style: solid; cursor: default; }

/* ---------- inspector ---------- */
#inspector {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(540px, 100vw);
  background: var(--bg); border-left: 1px solid var(--border);
  transform: translateX(102%); transition: transform 200ms ease;
  z-index: 40; display: flex; flex-direction: column;
  box-shadow: -18px 0 40px rgba(23,33,43,.12);
}
#inspector.open { transform: translateX(0); }
.insp-top {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--card);
}
.insp-top h2 { margin: 0; font-size: 13px; font-family: var(--mono); color: var(--evb); }
#insp-close { margin-left: auto; color: var(--ink-2); font-size: 22px; line-height: 1; padding: 2px 9px; border-radius: 7px; }
#insp-close:hover { background: var(--bg); }
#insp-body { overflow-y: auto; padding: 16px; }

.chain-step {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 14px 15px; box-shadow: var(--shadow);
}
.chain-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.chain-head h3 {
  margin: 0; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.chain-sub { font-size: 11.5px; color: var(--ink-2); }
.chain-link { display: flex; justify-content: center; padding: 3px 0; }
.chain-line { width: 2px; height: 20px; background: linear-gradient(var(--border), var(--evb)); border-radius: 1px; }

.rec { border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; margin: 9px 0; background: #FBFCFD; }
.rec-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 7px; }
.rec-type {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  color: var(--evb); text-transform: uppercase;
  background: #EDF4F9; border-radius: 5px; padding: 2px 7px;
}
.kv-line { display: flex; gap: 10px; font-size: 12.5px; margin: 4px 0; align-items: baseline; flex-wrap: wrap; }
.kv-line .k { color: var(--ink-2); min-width: 122px; font-size: 11.5px; }
.kv-line .v { color: var(--ink); word-break: break-all; }
.nmea {
  display: block; background: #F1F5F8; border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 9px; color: #23566E; font-size: 11.5px; overflow-x: auto;
  font-family: var(--mono);
}
.rec-foot { margin-top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--neval); }
.reason-full { font-size: 12.5px; color: var(--ink-2); margin: 7px 0 3px; }
.raw-json { font-family: var(--mono); font-size: 11px; color: var(--ink-2); overflow-x: auto; }

.ver-grid { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 12px; }
.ver-k { font-family: var(--mono); color: var(--ink-2); }
.ver-v { font-family: var(--mono); word-break: break-all; color: var(--ink); }
.ver-v.pt-false { font-weight: 700; }
.reverify { font-family: var(--mono); font-size: 11px; color: var(--neval); margin: 11px 0 0; word-break: break-word; }
.legal-text { font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; color: var(--ink); }
.file-link { display: inline-block; margin-top: 10px; color: var(--evb); font-family: var(--mono); font-size: 12px; }
.loading { color: var(--ink-2); font-size: 13px; }
.error { color: var(--contra); font-size: 13px; }

/* ---------- exports + footer ---------- */
.exports { display: grid; gap: 10px; }
.exports button {
  text-align: left; border: 1px solid var(--border); border-radius: 8px;
  padding: 11px 13px; background: var(--card); font-size: 13.5px; color: var(--ink);
  transition: border-color 120ms;
}
.exports button:hover { border-color: var(--accent); }
.exports .sub { display: block; color: var(--ink-2); font-size: 12px; margin-top: 2px; }

footer.app {
  padding: 18px 22px 24px; border-top: 1px solid var(--border);
  color: var(--ink-2); font-size: 12.5px; background: var(--card);
}
footer.app .disclaimer { color: var(--ink); font-size: 13.5px; margin: 0 0 8px; max-width: 860px; }
footer.app .foot-meta { font-family: var(--mono); font-size: 11px; color: var(--neval); margin-top: 8px; }
footer.app .attribution { font-size: 11.5px; margin-top: 6px; }
footer.app a { color: var(--evb); }
#boot-status { padding: 34px; text-align: center; color: var(--ink-2); }
#boot-status.error { color: var(--contra); }

/* MapLibre control theming for light UI */
.maplibregl-ctrl-group { border-radius: 8px !important; box-shadow: var(--shadow) !important; }
.maplibregl-ctrl-attrib { font-size: 10.5px !important; background: rgba(255,255,255,.85) !important; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  main {
    grid-template-columns: 1fr;
    grid-template-areas: "map" "time" "side";
    grid-template-rows: 38vh auto auto;
  }
  main.map-expanded { grid-template-rows: 70vh auto auto; }
  #side { overflow: visible; }
  #pkg-id { margin-left: 0; }
  .map-badge { font-size: 10px; white-space: normal; text-align: center; max-width: 86%; }
}
@media (prefers-reduced-motion: reduce) {
  #inspector, .cond, .exports button { transition: none; }
}