/* The plot: a cream map table under black boards. Gold means underway and nothing else; the selected ship gets a
   black-and-cream frame. Condensed faces for boards and ship identifiers, the regular face for reports. */
:root {
  --bg: #e8e3d4;          /* the room */
  --fg: #1d1f1c;
  --muted: #55574f;
  --rule: #cfc8b5;
  --card: #f1ede1;
  --board: #161814;       /* black boards */
  --board-fg: #f1ede1;
  --board-muted: #b9b4a6;
  --board-rule: #4a4c45;
  --board-row: #2c2e29;
  --sea: #aebdbf;
  --land: #e6dfc8;
  --coast: #5d5a4c;
  --grat: #c9d3d3;
  --underway: #c9a227;
  --yard: #8a8c84;
  --us: #24476b;          /* navy slot 1 */
  --cn: #9b2a22;          /* navy slot 2 */
  --uk: #5b3f8c; --fr: #2f6d55; --jp: #a8425f; --in: #a86a10; /* slots 3-6: also told apart by flag and label */
  --gap: #b0503a;
  --narrow: "Archivo Narrow", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --display: "Big Shoulders Display", "Archivo Narrow", "Arial Narrow", sans-serif-condensed, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1e1b; --fg: #ecebe4; --muted: #a9a89e; --rule: #3a3c36; --card: #232521;
    --board: #0e0f0d; --board-rule: #3a3c36; --board-row: #22241f;
    --sea: #26333a; --land: #3b3c35; --coast: #6d6a5c; --grat: #2f3e46;
    --us: #4f7fb5; --cn: #c9554b; --uk: #8a6fc4; --fr: #4f9b7d; --jp: #c86a8c; --in: #c48a2c; --yard: #6f716a; --gap: #e0846c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1e1b; --fg: #ecebe4; --muted: #a9a89e; --rule: #3a3c36; --card: #232521;
  --board: #0e0f0d; --board-rule: #3a3c36; --board-row: #22241f;
  --sea: #26333a; --land: #3b3c35; --coast: #6d6a5c; --grat: #2f3e46;
  --us: #4f7fb5; --cn: #c9554b; --uk: #8a6fc4; --fr: #4f9b7d; --jp: #c86a8c; --in: #c48a2c; --yard: #6f716a; --gap: #e0846c;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.4 Archivo, ui-sans-serif, system-ui, sans-serif;
}
a { color: var(--us); }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--underway); outline-offset: 2px; }
.k, dt { font: 500 11px/1.2 var(--narrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--board-muted); }

/* ---------- boards ---------- */
.board { background: var(--board); color: var(--board-fg); }
.board a { color: var(--board-fg); }

.top { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 2px solid var(--board-rule); }
.top > * { border-right: 1px solid var(--board-rule); }
.top h1 { margin: 0; padding: 8px 18px; display: flex; align-items: center; font: 800 40px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.top .cell { padding: 6px 16px; display: flex; align-items: center; gap: 10px; }
.asat { flex-direction: column; justify-content: center; align-items: flex-start !important; gap: 0 !important; }
.asat .date { font: 600 32px/1 var(--display); text-transform: uppercase; font-variant-numeric: tabular-nums; min-width: 6.6em; }
.playback .play { min-height: 44px; min-width: 72px; padding: 0 14px; background: var(--board-fg); color: var(--board); border: 0; font: 600 13px var(--narrow); letter-spacing: 0.08em; text-transform: uppercase; }
.speed { display: flex; align-items: center; gap: 8px; }
.speed select { min-height: 44px; padding: 0 8px; background: var(--board); color: var(--board-fg); border: 1px solid #8a8678; font-size: 14px; }
.timeline { flex: 1 1 320px; gap: 14px !important; }
.slider { flex: 1; position: relative; padding-bottom: 16px; min-width: 160px; }
.slider input { width: 100%; margin: 0; accent-color: var(--board-fg); }
.ticks { position: absolute; left: 8px; right: 8px; bottom: 0; height: 14px; font: 500 11px var(--narrow); color: var(--board-muted); text-transform: uppercase; }
.ticks span { position: absolute; transform: translateX(-50%); font-variant-numeric: tabular-nums; white-space: nowrap; }
.history { min-height: 44px; padding: 0 12px; background: transparent; color: var(--board-fg); border: 1px solid #8a8678; font: 600 12px var(--narrow); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.history[aria-pressed="true"] { background: var(--board-fg); color: var(--board); }
.counts { margin: 0; padding: 0 !important; gap: 0 !important; }
.counts > div { padding: 6px 14px; border-left: 1px solid var(--board-rule); }
.counts > div:first-child { border-left: 0; }
.counts dd { margin: 0; font: 600 28px/1 var(--display); font-variant-numeric: tabular-nums; }
.toggles { gap: 14px !important; font: 500 13px var(--narrow); }
.toggles label { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.toggles input { width: 16px; height: 16px; accent-color: var(--board-fg); }
.top > :last-child { border-right: 0; }

/* ---------- layout: the map takes about 80% of a desktop screen ---------- */
main { display: flex; gap: 14px; padding: 14px; align-items: flex-start; }
.plot { flex: 4 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.panel { flex: 1 1 0; min-width: 280px; border: 2px solid var(--fg); background: var(--card); max-height: calc(100vh - 28px); overflow: auto; position: sticky; top: 14px; }
@media (max-width: 900px) { main { flex-direction: column; align-items: stretch; } .panel { position: static; max-height: none; min-width: 0; } }

/* ---------- map ---------- */
.map { margin: 0; position: relative; border: 2px solid var(--fg); background: var(--sea); }
.map > svg { width: 100%; height: auto; display: block; cursor: grab; touch-action: none; }
.map > svg:active { cursor: grabbing; }
.zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 1; }
.zoom button { width: 44px; height: 44px; border: 0; background: var(--board); color: var(--board-fg); font: 600 18px Archivo, sans-serif; }

.land { fill: var(--land); stroke: var(--coast); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.graticule { fill: none; stroke: var(--grat); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.range-ring { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.halo { fill: var(--us); fill-opacity: 0.08; stroke: var(--us); stroke-opacity: 0.45; stroke-width: 0.75; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.trail { fill: none; stroke: var(--us); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.track { fill: none; stroke: var(--us); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.track.future { stroke-opacity: 0.35; stroke-dasharray: 1 4; }
.navy-CN.trail, .navy-CN.track, .navy-CN.arrow, .trail-key.navy-CN { stroke: var(--cn); }
.navy-UK.trail, .navy-UK.track, .navy-UK.arrow { stroke: var(--uk); }
.navy-FR.trail, .navy-FR.track, .navy-FR.arrow { stroke: var(--fr); }
.navy-JP.trail, .navy-JP.track, .navy-JP.arrow { stroke: var(--jp); }
.navy-IN.trail, .navy-IN.track, .navy-IN.arrow { stroke: var(--in); }
.navy-CN.halo { fill: var(--cn); stroke: var(--cn); }
.navy-UK.halo { fill: var(--uk); stroke: var(--uk); }
.navy-FR.halo { fill: var(--fr); stroke: var(--fr); }
.navy-JP.halo { fill: var(--jp); stroke: var(--jp); }
.navy-IN.halo { fill: var(--in); stroke: var(--in); }
.trail.hl { stroke-opacity: 0.95; stroke-width: 2.6px; }
.trail.faded { stroke-opacity: 0.06; }
.arrow { fill: none; stroke: var(--us); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.trail-hit { fill: none; stroke: transparent; stroke-width: 12px; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer; }
.track.gap, .trail.gap { stroke: var(--gap); stroke-dasharray: 4 4; stroke-opacity: 0.8; }

/* blocks: a ship is a block pushed onto the plot, in its navy's colour, with its flag and hull number */
.stem { stroke: var(--fg); stroke-width: 1.5; }
.stem-dot { fill: var(--fg); }
.ship { cursor: pointer; --navy: var(--us); }
.ship.navy-CN { --navy: var(--cn); } .ship.navy-UK { --navy: var(--uk); } .ship.navy-FR { --navy: var(--fr); }
.ship.navy-JP { --navy: var(--jp); } .ship.navy-IN { --navy: var(--in); }
.ship .block { fill: var(--navy); }
.ship text { font: 600 11px var(--narrow); fill: #fff; pointer-events: none; }
.ship .edge, .ship .sel-out, .ship .sel-in { fill: none; pointer-events: none; }
.ship.tier-underway .edge { stroke: var(--underway); stroke-width: 2; }
.ship.tier-yard .block { fill: var(--yard); }
.ship.tier-presumed .block { fill: var(--card); stroke: var(--navy); stroke-width: 1.5; }
.ship.tier-presumed text { fill: var(--navy); }
.ship.tier-inactive .block { fill: none; stroke: var(--yard); stroke-width: 1.2; stroke-dasharray: 3 2; }
.ship.tier-inactive text { fill: var(--muted); }
.ship.tier-inactive .flag { opacity: 0.5; filter: grayscale(1); }
.ship.sel .sel-out { stroke: var(--card); stroke-width: 7; }
.ship.sel .sel-in { stroke: var(--fg); stroke-width: 3; }
.ship.dim { opacity: 0.35; }

.legend { position: absolute; left: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: calc(100% - 70px); padding: 5px 8px; background: var(--bg); border: 1.5px solid var(--fg); font: 500 12px var(--narrow); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.key { display: inline-block; width: 16px; height: 10px; background: var(--us); }
.key-underway { outline: 2px solid var(--underway); outline-offset: 1px; }
.key-yard { background: var(--yard); }
.key-presumed { background: transparent; border: 1.5px solid var(--cn); }
.key-sel { background: transparent; width: 18px; height: 12px; border: 2px solid var(--fg); outline: 2px solid var(--card); }
.trail-key { stroke: var(--us); stroke-width: 2; stroke-dasharray: 1 3; stroke-linecap: round; }
.halo-key { fill: var(--us); fill-opacity: 0.08; stroke: var(--us); stroke-opacity: 0.6; stroke-dasharray: 2 2; }
.gap-key { stroke: var(--gap); stroke-width: 2; stroke-dasharray: 4 3; }
@media (max-width: 700px) { .legend { position: static; max-width: none; border-width: 1.5px 0 0; } }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 22px; padding: 8px 14px 0; border-bottom: 1px solid var(--board-rule); }
.tabs button { min-height: 36px; padding: 0 0 6px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--board-muted); font: 600 12px var(--narrow); letter-spacing: 0.14em; text-transform: uppercase; }
.tabs button[aria-selected="true"] { color: var(--board-fg); border-bottom-color: var(--board-fg); }
.panel-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; border-bottom: 2px solid var(--fg); position: sticky; top: 0; z-index: 1; }
.panel-tabs button { min-height: 44px; padding: 0; border: 0; background: var(--card); color: var(--fg); letter-spacing: 0.1em; }
.panel-tabs button + button { border-left: 2px solid var(--fg); }
.panel-tabs button[aria-selected="true"] { background: var(--board); color: var(--board-fg); }

/* chips: a ship's flag and hull number, as on its block */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px; font: 600 11px/1.3 var(--narrow); white-space: nowrap; background: var(--navy, var(--us)); color: #fff; border: 1.5px solid var(--navy, var(--us)); justify-self: start; }
.chip.tier-yard { background: var(--yard); border-color: var(--yard); }
.chip.tier-presumed, .chip.tier-inactive { background: transparent; color: inherit; border-color: currentColor; }
.chip.navy-CN { --navy: var(--cn); } .chip.navy-UK { --navy: var(--uk); } .chip.navy-FR { --navy: var(--fr); }
.chip.navy-JP { --navy: var(--jp); } .chip.navy-IN { --navy: var(--in); }
.flag-icon { display: block; flex: none; }

/* ---------- signals board ---------- */
.signals { font-family: var(--narrow); }
.feed { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.feed li { display: grid; grid-template-columns: 64px 84px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 5px 14px; border-top: 1px solid var(--board-row); font-size: 13px; cursor: pointer; }
.feed li:first-child { border-top: 0; }
.feed li:hover { background: var(--board-row); }
.feed time { font: 600 15px var(--display); color: var(--board-muted); text-transform: uppercase; white-space: nowrap; }
.feed .text { font-family: Archivo, sans-serif; }
.feed .src { font-size: 11px; letter-spacing: 0.06em; color: var(--board-muted); text-transform: uppercase; text-align: right; }
.feed .empty { display: block; cursor: default; color: var(--board-muted); }
.feed .empty:hover { background: none; }
.sources { padding: 4px 14px 12px; font: 13px/1.5 Archivo, sans-serif; color: var(--board-fg); max-height: 260px; overflow: auto; }
.sources ul { padding-left: 18px; margin: 8px 0; }
.sources li { margin-bottom: 6px; }
.sources .built { color: var(--board-muted); }
@media (max-width: 700px) { .feed li { grid-template-columns: 56px 76px minmax(0, 1fr); } .feed .src { display: none; } }

/* ---------- all ships ---------- */
.all { background: var(--board); color: var(--board-fg); font-family: var(--narrow); padding-bottom: 8px; }
.ships { list-style: none; margin: 0; padding: 0; }
.ships .tier-head { padding: 10px 12px 3px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--board-muted); }
.ships .tier-head.tier-underway { color: var(--underway); }
.ships li:not(.tier-head) { display: grid; grid-template-columns: 70px minmax(0, 1fr) 36px; gap: 8px; align-items: center; padding: 4px 12px; border-top: 1px solid var(--board-row); font-size: 13px; cursor: pointer; }
.ships li:not(.tier-head):hover, .ships li.hl { background: var(--board-row); }
.ships .chip.tier-presumed { color: var(--board-fg); border-color: var(--board-muted); }
.ships .name { font-family: Archivo, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ships .where { color: var(--board-muted); }
.ships .ago { text-align: right; font: 600 16px var(--display); }
.offscreen { margin: 10px 12px 0; font-size: 12px; color: var(--board-muted); }
.offscreen button { border: 0; background: none; padding: 0; color: var(--board-fg); text-decoration: underline; }

/* ---------- selected ship ---------- */
.none { margin: 0; padding: 16px 14px; color: var(--muted); }
.card .head { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 12px; }
.kicker { display: flex; align-items: center; gap: 8px; font: 500 11px var(--narrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--board-muted); }
.hull-big { font: 800 34px/0.95 var(--display); text-transform: uppercase; }
.log-title { margin: 0; font: 600 16px/1.25 Archivo, sans-serif; }
.age { margin-top: 8px; align-self: flex-start; background: var(--board-fg); color: var(--board); padding: 3px 8px; font: 600 13px var(--narrow); letter-spacing: 0.06em; text-transform: uppercase; }
.caveat { font-size: 12px; color: var(--board-muted); }
.facts { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 5px 10px; margin: 0; padding: 12px 14px; font-size: 13px; border-bottom: 1.5px solid var(--fg); }
.facts dt { color: var(--muted); padding-top: 2px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.photo { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1.5px solid var(--fg); }
.photo .thumb { flex: none; width: 96px; height: 44px; object-fit: cover; border: 1.5px solid var(--fg); background: var(--rule); }
.show-photo { flex: 1; min-height: 44px; text-align: left; padding: 0 10px; background: transparent; border: 1.5px solid var(--fg); font: 600 12px var(--narrow); letter-spacing: 0.1em; text-transform: uppercase; }
.ship-photo { margin: 0; padding: 10px 14px; border-bottom: 1.5px solid var(--fg); }
.ship-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--rule); }
.ship-photo figcaption { font-size: 12px; margin-top: 6px; color: var(--muted); }
.ship-photo figcaption a { color: var(--fg); }
.card h3 { margin: 0; padding: 10px 14px 4px; font: 800 18px var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.entries { list-style: none; margin: 0; padding: 0 0 8px; font-size: 13px; }
.entries li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 4px 14px; border-top: 1px solid var(--rule); cursor: pointer; align-items: baseline; }
.entries li:hover { background: var(--bg); }
.entries li.now { background: var(--bg); box-shadow: inset 4px 0 0 var(--fg); }
.entries time { font: 600 14px/1.15 var(--display); text-transform: uppercase; white-space: pre-line; }
.entries .place { color: var(--muted); font-size: 12px; }
.entries .src { display: block; font-size: 12px; color: var(--muted); }
.entries .unplaced { font-style: italic; }

.tooltip {
  position: fixed; pointer-events: none; z-index: 10; max-width: 320px;
  background: var(--board); color: var(--board-fg); border: 1px solid var(--board-rule);
  padding: 8px 10px; font-size: 13px;
}
.tooltip b { display: block; font: 600 15px var(--narrow); }
.tooltip .where { font-weight: 600; margin-top: 2px; }
.tooltip .note { color: var(--board-muted); margin-top: 4px; }