/* Database of Battles — explorer
 *
 * Two categorical series only: the 7th and 96th Infantry Division sectors, which
 * advanced concurrently. Slots 1 and 2 of the validated palette (blue/orange):
 * worst-pair CVD ΔE 24.7 protan, normal-vision ΔE 33.6 — clear of every floor.
 *
 * Geographic confidence is encoded by a SECOND channel, never by colour: a located
 * point draws a solid front with a filled marker, a coarse settlement anchor draws a
 * dashed front with a hollow marker. Colour stays with the division.
 */

:root {
  color-scheme: light;

  --surface-0: #f4f4f1;
  --surface-1: #fcfcfb;
  --surface-2: #eceae4;
  --border:    #d8d5cc;
  --border-strong: #b4b0a4;

  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #7c7a72;

  --series-7th:  #2a78d6;
  --series-96th: #eb6834;

  --warn: #eda100;
  --shadow: 0 1px 2px rgb(11 11 11 / 0.06), 0 4px 12px rgb(11 11 11 / 0.05);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #121211;
    --surface-1: #1a1a19;
    --surface-2: #232322;
    --border:    #33332f;
    --border-strong: #4d4d47;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #918f84;
    --series-7th:  #3987e5;
    --series-96th: #d95926;
    --warn: #c98500;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #121211;
  --surface-1: #1a1a19;
  --surface-2: #232322;
  --border:    #33332f;
  --border-strong: #4d4d47;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #918f84;
  --series-7th:  #3987e5;
  --series-96th: #d95926;
  --warn: #c98500;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface-0);
}

/* ---------- layout ---------- */

#app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head head" "map side" "time side";
  height: 100%;
}

@media (max-width: 900px) {
  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 55vh auto auto;
    grid-template-areas: "head" "map" "time" "side";
    height: auto;
    min-height: 100%;
  }
}

/* ---------- header ---------- */

header {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding: 12px 18px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

header h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.subtitle { color: var(--text-secondary); font-size: 12.5px; }

.counts {
  margin-left: auto;
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-secondary);
}
.counts b { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 620; }
.orbat-link {
  font-size: 12px;
  color: var(--text-primary);
  padding: 3px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.orbat-link:hover { background: var(--surface-2); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; width: 100%; font-size: 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.swatch { width: 22px; height: 0; border-top-width: 3px; border-top-style: solid; border-radius: 2px; }
.swatch.d7 { border-top-color: var(--series-7th); }
.swatch.d96 { border-top-color: var(--series-96th); }
.swatch.dashed { border-top-style: dashed; border-top-color: var(--text-muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); }
.dot.hollow { background: var(--surface-1); border: 2px solid var(--text-muted); }

/* ---------- map ---------- */

#map { grid-area: map; min-height: 320px; background: var(--surface-2); }
.maplibregl-popup-content {
  font-family: var(--font);
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: var(--shadow);
}
.maplibregl-popup-content b { font-weight: 620; }
.tip-meta { color: var(--text-secondary); margin-top: 3px; }

.map-note {
  position: absolute;
  left: 10px; bottom: 10px;
  max-width: 340px;
  padding: 7px 9px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.map-wrap { grid-area: map; position: relative; min-height: 320px; }
.map-wrap #map { position: absolute; inset: 0; }

/* ---------- timeline ---------- */

#timeline {
  grid-area: time;
  padding: 10px 18px 14px;
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  overflow-x: auto;
}
.tl-head {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12px; color: var(--text-secondary); margin-bottom: 6px;
}
.tl-head h2 { margin: 0; font-size: 12.5px; font-weight: 620; color: var(--text-primary); }
.tl-track { display: grid; grid-template-columns: 92px minmax(560px, 1fr); align-items: center; gap: 8px; margin-bottom: 5px; }
.tl-label { font-size: 11.5px; color: var(--text-secondary); text-align: right; }
.tl-lane { position: relative; height: 26px; }
.tl-lane::before {
  content: ""; position: absolute; left: 0; right: 0; top: 12px;
  border-top: 1px solid var(--border);
}
.tl-bar {
  position: absolute; top: 6px; height: 13px;
  border-radius: 3px; border: none; padding: 0;
  cursor: pointer;
}
.tl-bar:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 1px; }
.tl-bar.d7 { background: var(--series-7th); }
.tl-bar.d96 { background: var(--series-96th); }
/* Unlocated engagements read as hollow bars rather than faint ones: at 3-day widths a
 * low opacity made them effectively invisible, which hid 16 of the 28. */
.tl-bar.unlocated {
  background: var(--surface-1);
  box-shadow: inset 0 0 0 2px currentColor;
}
.tl-bar.unlocated.d7 { color: var(--series-7th); }
.tl-bar.unlocated.d96 { color: var(--series-96th); }
.tl-bar.unlocated.active { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 2px var(--surface-1), 0 0 0 4px var(--text-primary); }
.tl-bar.active { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--text-primary); }
.tl-axis { position: relative; height: 15px; }
.tl-tick {
  position: absolute; font-size: 10.5px; color: var(--text-muted);
  transform: translateX(-50%); white-space: nowrap;
}
.tl-tick::before {
  content: ""; position: absolute; left: 50%; top: -4px; height: 4px;
  border-left: 1px solid var(--border-strong);
}

/* ---------- side panel ---------- */

aside {
  grid-area: side;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 14px 16px 24px;
}
@media (max-width: 900px) { aside { border-left: none; border-top: 1px solid var(--border); } }

.tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.tab {
  flex: 1; padding: 6px 8px; font: inherit; font-size: 12px;
  color: var(--text-secondary); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.tab[aria-selected="true"] {
  background: var(--surface-1); color: var(--text-primary);
  font-weight: 620; border-color: var(--border-strong);
}

h3.dossier-name { margin: 0 0 2px; font-size: 15px; font-weight: 620; letter-spacing: -0.01em; }
.dossier-sub { color: var(--text-secondary); font-size: 12px; margin-bottom: 12px; }
.sector-chip {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 620; color: #fff;
}
.sector-chip.d7 { background: var(--series-7th); }
.sector-chip.d96 { background: var(--series-96th); }

dl.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 14px; font-size: 12.5px; }
dl.facts dt { color: var(--text-secondary); }
dl.facts dd { margin: 0; font-variant-numeric: tabular-nums; }

section.block { margin-bottom: 16px; }
section.block > h4 {
  margin: 0 0 6px; font-size: 11px; font-weight: 620; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}

.assert { font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--border); }
.assert:first-of-type { border-top: none; }
.assert .val { font-weight: 620; font-variant-numeric: tabular-nums; }
.assert .ref { color: var(--text-secondary); }
.cite {
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  text-decoration: none; border-bottom: 1px dotted var(--border-strong);
}
.cite:hover { color: var(--text-primary); }

.kind-tag {
  font-size: 10.5px; padding: 0 5px; border-radius: 3px;
  background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border);
}

.note {
  font-size: 12px; line-height: 1.5; color: var(--text-secondary);
  padding: 9px 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--warn);
  border-radius: 5px;
}

table.grid { width: 100%; border-collapse: collapse; font-size: 12px; }
table.grid th, table.grid td {
  text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.grid th { color: var(--text-muted); font-weight: 620; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tbody tr { cursor: pointer; }
table.grid tbody tr:hover { background: var(--surface-2); }
table.grid tbody tr.active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--text-primary); }

.empty { color: var(--text-muted); font-size: 12.5px; font-style: italic; }
footer.credits { font-size: 11px; color: var(--text-muted); line-height: 1.6; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
footer.credits a { color: var(--text-secondary); }