:root {
  --ink: #3a2c1c;
  --ink-soft: #5c4630;
  --paper: #e7dabd;
  --paper-card: #ede2c8;
  --paper-edge: #b7a279;
  --red: #9e2b25;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #d3c19b;
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: auto;      /* map scrolls left/right below the optimal width */
  overflow-y: hidden;
  -webkit-font-smoothing: antialiased;
}
/* the map is an in-flow block; when wider than the viewport the body scrolls it
   horizontally, while the fixed UI panels stay put over the top */
#chart { display: block; cursor: crosshair; z-index: 0; }

/* decorative neatline framing the top & bottom edges of the chart */
body::before, body::after {
  content: ""; position: fixed; left: 0; right: 0; height: 14px; z-index: 1; pointer-events: none;
}
body::before {
  top: 0;
  background: linear-gradient(to bottom, #c3ac7d, #d6c49d);
  border-bottom: 1px solid rgba(58, 44, 28, 0.5);
  box-shadow: inset 0 -3px 0 rgba(255, 248, 235, 0.3), 0 4px 9px -5px rgba(58, 44, 28, 0.55);
}
body::after {
  bottom: 0;
  background: linear-gradient(to top, #c3ac7d, #d6c49d);
  border-top: 1px solid rgba(58, 44, 28, 0.5);
  box-shadow: inset 0 3px 0 rgba(255, 248, 235, 0.3), 0 -4px 9px -5px rgba(58, 44, 28, 0.55);
}

/* ---- corner docks ------------------------------------------------------- */
/* Each edge's cards stack in a fixed flex column: a hidden or collapsed card
   frees its slot, so cards never overlap and never need hand-tuned
   coordinates. Empty dock space passes pointer events through to the chart.
   Bottom docks are anchored by their bottom edge, so they grow upward. */
.dock {
  position: fixed; z-index: 3;
  display: flex; flex-direction: column; gap: 12px;
  pointer-events: none;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.dock::-webkit-scrollbar { display: none; }
/* cards may compress inside a full dock — each scrolls internally instead */
.dock > * { pointer-events: auto; flex: 0 1 auto; min-height: 0; }
/* top and bottom docks own separate vertical territories on their edge, so
   a tall top stack can never run into the bottom stack (58 + 36 < 100) */
.dock-tl, .dock-tr { max-height: 58vh; max-height: 58dvh; }
.dock-bl, .dock-br { max-height: 36vh; max-height: 36dvh; }
.dock-tl { top: 18px; left: calc(18px + env(safe-area-inset-left, 0px)); z-index: 4; align-items: flex-start; }
.dock-tr { top: 18px; right: calc(18px + env(safe-area-inset-right, 0px)); align-items: flex-end; }
.dock-bl { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); left: calc(18px + env(safe-area-inset-left, 0px)); align-items: flex-start; }
.dock-br { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); right: calc(18px + env(safe-area-inset-right, 0px)); align-items: flex-end; }

/* ---- shared card treatment: aged paper with deckle shadow + ink hairline ---- */
.cartouche, .counters, .helm, .ledger, .legend, .events, .stats, .tracker {
  background: linear-gradient(180deg, rgba(239,228,203,0.94), rgba(231,218,189,0.9));
  border: 1px solid var(--paper-edge);
  box-shadow: 0 2px 0 rgba(92,70,48,0.18), 0 10px 26px rgba(60,44,28,0.22);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
/* the menu toggles cards on/off — flex cards need [hidden] to win over display */
.counters[hidden], .helm[hidden], .legend[hidden], .events[hidden],
.stats[hidden], .tracker[hidden], .ledger[hidden] { display: none; }

/* ---- panel header: the uniform collapse idiom ---------------------------- */
/* Small-caps title + a chevron that flips while expanded; clicking collapses
   the card to its title bar in place (the menu stays the on/off registry). */
.card-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 24px; margin: 0; padding: 2px 0 6px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 10px; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-soft);
  touch-action: manipulation;
}
.card-h:hover { color: var(--ink); }
.card-h .chev { flex: none; transition: transform .25s ease; }
.card-h[aria-expanded="true"] .chev { transform: rotate(180deg); }
.card-h:focus-visible { outline: 1px solid var(--red); outline-offset: 2px; }
#legend-body[hidden], #events-body[hidden], #stats-body[hidden], #tracker-body[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .card-h .chev { transition: none; } }

/* ---- cartouche ---- */
/* its dock (dock-tl) carries z-index 4, so the open menu overlays neighbours.
   A flex column so that when the dock caps its height, the MENU compresses
   and scrolls while the title block keeps its size. */
.cartouche { padding: 14px 22px 12px; max-width: min(46vw, 360px);
  display: flex; flex-direction: column; }
.cartouche > * { flex: none; }
.cartouche > .menu { flex: 0 1 auto; min-height: 0; }
.cartouche .rule { height: 2px; background: var(--ink); opacity: .8; }
.cartouche .rule:last-child { opacity: .5; height: 1px; }
.cartouche h1 {
  font-family: var(--serif); font-weight: 600; margin: 10px 0 2px;
  font-size: clamp(26px, 4vw, 40px); letter-spacing: .14em; text-transform: uppercase;
  line-height: 1;
}
.cartouche .sub { font-family: var(--serif); font-style: italic; margin: 0 0 8px; color: var(--ink-soft); font-size: 14px; }
.cartouche .clock { margin: 6px 0 8px; font-size: 13px; letter-spacing: .06em; display: flex; gap: 10px; align-items: baseline; }
#date { font-variant-numeric: tabular-nums; font-weight: 600; }
.season { text-transform: uppercase; font-size: 10px; letter-spacing: .18em; color: var(--ink-soft);
  border: 1px solid var(--paper-edge); padding: 2px 7px; border-radius: 2px; }
.cartouche .era { margin: -4px 0 8px; font-family: var(--serif); font-style: italic;
  font-size: 12.5px; color: var(--ink-soft); letter-spacing: .04em; }

/* ---- furled cartouche: click the card to stow the instruments ---- */
/* The whole card is a furl target (pointer everywhere except the menu's own
   controls, which keep their meanings); furled, it reads as a small quiet
   title plate and every ambient panel is hidden with it. */
.cartouche { cursor: pointer; }
.cartouche .menu { cursor: default; }
.cartouche.furled { padding: 8px 16px 9px; }
.cartouche.furled > :not(h1) { display: none; }
.cartouche.furled h1 { margin: 0; font-size: 15px; letter-spacing: .18em; }

/* ---- chart-options disclosure (inside the cartouche) ---- */
/* A full-width engraved band under the bottom rule: hairlines flanking a row
   of chevrons (echoing the cartouche's own rules), the hamburger's old
   ink-wash on hover/open. The chevrons flip upward while open. */
.menu-expander {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 8px 0 0; padding: 9px 2px 7px;                    /* ≥24px touch target */
  background: none; border: none; border-radius: 3px;
  color: var(--ink-soft); cursor: pointer; line-height: 0;
}
.menu-expander::before, .menu-expander::after {
  content: ""; flex: 1; height: 1px; background: var(--ink); opacity: .35;
}
.menu-expander:hover { color: var(--ink); background: rgba(92, 70, 48, 0.08); }
.menu-expander[aria-expanded="true"] { color: var(--ink); background: rgba(92, 70, 48, 0.12); }
.menu-expander svg { flex: none; transition: transform .25s ease; }
.menu-expander[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-expander:focus-visible { outline: 1px solid var(--red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .menu-expander svg { transition: none; } }
/* short viewports: the options scroll inside the card instead of overflowing */
.menu { margin-top: 10px; max-height: 58vh; max-height: 58dvh; overflow-y: auto; overscroll-behavior: contain; }
.menu-h { margin: 0 0 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); }
.menu-item { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; padding: 3px 0; touch-action: manipulation; }
.menu-item input { width: 15px; height: 15px; accent-color: #8a6a2c; cursor: pointer; margin: 0; touch-action: manipulation; }
/* nested toggles (the legend's sections) — a hairline marks the branch */
.menu-sub { margin: 0 0 2px 7px; padding-left: 13px; border-left: 1px solid var(--paper-edge); }
.menu-sub .menu-item { font-size: 13px; padding: 2px 0; }
.menu-sub .menu-item input { width: 13px; height: 13px; }
/* set from JS (applyLegendSections) or statically — :has() would exclude
   Firefox ESR ≤115 */
.menu-item.is-disabled { opacity: .45; cursor: default; }
.menu-note { margin: 4px 0 0 24px; font-size: 11px; font-style: italic; color: var(--ink-soft); }
.menu-link { display: inline-block; font-size: 13.5px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--paper-edge); }
.menu-link:hover { color: var(--red); border-bottom-color: var(--red); }

/* ---- counters ---- */
.counters { padding: 10px 8px; flex-shrink: 0; }  /* the counter row never compresses */
.stat-row { display: flex; gap: 4px; justify-content: center; }
.stat { display: flex; flex-direction: column; align-items: center; padding: 2px 14px; }
.stat + .stat { border-left: 1px solid var(--paper-edge); }
.stat .num { font-family: var(--serif); font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1; }
.stat .cap { font-size: 9px; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); margin-top: 4px; }

/* ---- helm / speed ---- */
.helm { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; width: min(78vw, 280px);
  flex-shrink: 0; }        /* the helm never compresses in its dock */
.helm label { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-soft); }
.helm output { font-family: var(--serif); font-size: 14px; font-style: italic; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--ink-soft); border-radius: 2px; outline: none; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4ead0, #c8a24e 60%, #8a6a2c);
  border: 1px solid var(--ink); cursor: grab; box-shadow: 0 1px 3px rgba(60,44,28,.4);
}
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--ink); cursor: grab;
  background: radial-gradient(circle at 35% 30%, #f4ead0, #c8a24e 60%, #8a6a2c);
}
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(158,43,37,.4); }

/* ---- vessel ledger (top card of the right dock while open) ---- */
.ledger { position: relative; width: min(90vw, 340px); max-height: min(62vh, 620px); max-height: min(62dvh, 620px);
  overflow: auto; padding: 18px 20px 22px; }
.ledger .close { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.ledger h2 { font-family: var(--serif); font-size: 22px; margin: 2px 40px 2px 0; line-height: 1.1; }
.ledger .type { font-family: var(--serif); font-style: italic; color: var(--ink-soft); margin: 0 0 12px; font-size: 14px; }
.ledger dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; font-size: 14px; }
.ledger dt { text-transform: uppercase; font-size: 10px; letter-spacing: .14em; color: var(--ink-soft); align-self: center; }
.ledger dd { margin: 0; font-variant-numeric: tabular-nums; }
.flag { display: inline-block; width: 11px; height: 11px; border-radius: 2px; border: 1px solid var(--ink); vertical-align: -1px; margin-right: 6px; }
.leglist { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--paper-edge); }
.leglist li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--paper-edge); font-size: 13px; }
.leglist li.now { font-weight: 600; }
.leglist li.now::before { content: "▸ "; color: var(--red); }
.leglist .dur { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.leglist em { font-style: italic; color: var(--ink-soft); font-size: 12px; }
.portlist li { cursor: pointer; gap: 10px; }
.portlist li:hover, .portlist li:focus-visible { color: var(--red); outline: none; }
.portlist li:focus-visible { text-decoration: underline; }
.muted { color: var(--ink-soft); font-style: italic; font-size: 13px; margin: 4px 0 0; }

/* convoy panel (movement-realism): a body of sail; each row expands to the ship's
   full ledger, reusing the ledger's own dl/leglist styles inside .mexp */
.convoylist { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--paper-edge); }
.mrow { border-bottom: 1px dashed var(--paper-edge); }
.mhead { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 2px; min-height: 24px;
  background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.mhead:hover, .mhead:focus-visible { color: var(--red); outline: none; }
.mhead .chev { flex: 0 0 auto; transition: transform .15s; color: var(--ink-soft); }
.mhead .chev.open { transform: rotate(180deg); }
.mname { font-size: 13.5px; }
.mtype { font-style: italic; color: var(--ink-soft); font-size: 12px; margin-left: 2px; }
.mtag { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--paper-edge); border-radius: 3px; padding: 0 4px; margin-left: auto; }
.mtag.bad { color: var(--red); border-color: var(--red); margin-left: auto; }
.mtag + .mtag { margin-left: 6px; }
.mexp { padding: 2px 0 12px 19px; border-left: 2px solid var(--paper-edge); margin: 0 0 6px 4px; }
.mexp h2 { font-size: 17px; }
@media (pointer: coarse) { .mhead { min-height: 44px; } }
.ledger .blurb { color: var(--ink); font-size: 13px; line-height: 1.5; margin: 0 0 12px; padding-left: 9px; border-left: 2px solid var(--rule); }
.section-h { text-transform: uppercase; font-size: 10px; letter-spacing: .16em; color: var(--ink-soft); margin: 14px 0 4px; }
.mp-note { background: rgba(158,43,37,0.08); border-left: 3px solid var(--red); padding: 8px 10px; font-size: 12.5px; line-height: 1.5; color: #4a2b22; margin-top: 10px; }
.mp-note strong { display: block; margin-bottom: 3px; }
.evidence { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-soft);
  border-top: 1px solid var(--paper-edge); padding-top: 7px; margin: 10px 0 0; }
.war { color: var(--red); font-style: italic; }

/* ---- legend (menu-toggled, bottom-right dock) ---- */
.legend { width: 236px; max-height: min(46vh, 420px); max-height: min(46dvh, 420px); overflow: auto; padding: 12px 16px 14px; }
.lg-row { display: flex; align-items: center; gap: 9px; padding: 2.5px 0; font-size: 12.5px; }
.lg-row canvas { flex: none; }
.legend .section-h { margin-top: 10px; }
.lg-flags { columns: 2; column-gap: 12px; }
.lg-flags .lg-row { break-inside: avoid; }

/* ---- events log (menu-toggled, bottom-left dock above the helm): losses + wars ---- */
.events { width: min(90vw, 330px); max-height: min(38vh, 340px); max-height: min(38dvh, 340px); overflow: auto; padding: 12px 16px 14px; }
.evlist { list-style: none; margin: 4px 0 0; padding: 0; }
.evlist li { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--paper-edge); font-size: 12.5px; line-height: 1.35; }
.ev-date { flex: none; width: 82px; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.ev-bad { color: var(--red); }
.ev-empty { font-style: italic; color: var(--ink-soft); }

.menu-btn { background: none; border: none; border-bottom: 1px solid var(--paper-edge); padding: 0; margin-top: 6px; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--ink); }
.menu-btn:hover { color: var(--red); border-bottom-color: var(--red); }

/* ---- statistics (menu-toggled, right dock): fleet totals, hardest passages, cargoes ---- */
.stats { width: min(90vw, 310px); max-height: min(46vh, 440px); max-height: min(46dvh, 440px); overflow: auto; padding: 12px 16px 14px; }
.stats dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 2px 0 4px; font-size: 13px; }
.stats dt { text-transform: uppercase; font-size: 10px; letter-spacing: .14em; color: var(--ink-soft); align-self: center; }
.stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.st-list { list-style: none; margin: 2px 0 0; padding: 0; }
.st-list li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--paper-edge); font-size: 12.5px; }
.st-list .dur { color: var(--ink-soft); font-variant-numeric: tabular-nums; flex: none; }

/* ---- tracker (menu-toggled, right dock): the followed fleet ---- */
.tracker { width: min(90vw, 310px); max-height: min(36vh, 340px); max-height: min(36dvh, 340px); overflow: auto; padding: 12px 16px 14px; }

/* the follow/unfollow control in a vessel's ledger */
.pin-btn { position: absolute; top: 34px; right: 10px; background: none; border: 1px solid var(--paper-edge); border-radius: 2px;
  padding: 2px 8px; cursor: pointer; font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.pin-btn:hover:not(:disabled) { color: var(--red); border-color: var(--red); }
.pin-btn[disabled] { opacity: .45; cursor: default; }

/* ---- hint (bottom-right dock, under the legend) ---- */
.hint { margin: 0; font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--ink-soft); max-width: 240px; text-align: right;
  pointer-events: none !important;      /* never blocks the chart, even as a dock child */
  transition: opacity .6s; }
.hint.gone { opacity: 0; }

/* cursor lat/long readout (ideas #16) — a small serif plate trailing the pointer */
.coord-readout {
  position: fixed; z-index: 40; pointer-events: none;
  font-family: var(--serif); font-size: 12px; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; color: var(--ink);
  background: var(--paper-90, rgba(231, 218, 189, 0.9));
  border: 1px solid var(--rule); border-radius: 3px;
  padding: 2px 7px; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(40, 30, 15, 0.18); }
@media (pointer: coarse) { .coord-readout { display: none !important; } }

/* ---- touch & tap behaviour --------------------------------------------- */
html { -webkit-tap-highlight-color: transparent; }
button, input[type=range] { touch-action: manipulation; }
@media (pointer: coarse) {
  /* 44px targets on touch devices (24px is the WCAG floor; 44 is best practice) */
  .menu-item, .card-h, .menu-expander, .menu-link, .menu-btn { min-height: 44px; }
  .menu-item { align-items: center; }
  .ledger .close { min-width: 44px; min-height: 44px; }
  .pin-btn { padding: 8px 12px; }
}

/* ---- mobile (<720px): bottom sheets ------------------------------------- */
/* The map-app pattern: the ledger, legend, events, and tracker present as
   non-modal bottom sheets, one at a time (main.js sheet manager toggles
   .as-sheet). The chart stays interactive above; counters + helm remain as
   compact HUD cards in their docks. */
@media (max-width: 719px) {
  /* the top row must share the width: a slimmer title plate + tighter counters */
  .counters { padding: 6px 3px 2px; } .stat { padding: 2px 7px; } .stat .num { font-size: 18px; }
  .stat .cap { font-size: 8px; }
  /* yield exactly the width the counters need: 100vw − counters(~166)
     − edge margins − a breathing gap */
  .cartouche { max-width: min(54vw, calc(100vw - 208px)); padding: 9px 12px 7px; }
  .cartouche h1 { font-size: clamp(14px, 4.4vw, 21px); }
  .cartouche .sub { font-size: 11.5px; }
  .cartouche .clock { font-size: 11.5px; flex-wrap: wrap; gap: 6px; }
  .hint { display: none; }

  .as-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    width: auto; max-width: none;
    max-height: 60vh; max-height: 60dvh;
    margin: 0; border-left: none; border-right: none; border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* the sheet's drag-handle bar */
  .as-sheet::before {
    content: ""; display: block; width: 44px; height: 4px; border-radius: 2px;
    background: var(--paper-edge); margin: 2px auto 10px;
  }
  /* in sheet form the header reads as the dismiss bar — chevron points down */
  .as-sheet .card-h[aria-expanded="true"] .chev { transform: none; }
}