/* ORYC Aeolian Flotilla
   ---------------------------------------------------------------------------
   Mobile-first. Everything outside a media query is the phone layout, because
   that is where this will actually be read - in a cockpit, one-handed, in
   sunlight. `min-width` queries add the desktop treatment on top.

   Three themes. Day and dark are the usual pair. "Night" is a red-on-black
   mode that preserves night vision, the way a chartplotter does - relevant
   here because the fleet sails to Stromboli after dark to watch the Sciara
   del Fuoco, and a white phone screen ruins your eyes for an hour.

   Brand colours are sampled from ORYC_flag.png, which is exactly three
   colours: #D2232A red, #23408F navy, white.
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --navy: #23408f;
  --red: #d2232a;

  /* Cool, blue-biased paper rather than the usual warm cream. */
  --ground: #eef1f6;
  --surface: #fff;
  --surface-sunk: #f5f7fa;
  --ink: #0f1e3d;
  --ink-mid: #45536f;
  --ink-soft: #6c7a96;
  --hair: #d5dce7;
  --hair-soft: #e6ebf2;

  --brand-ink: #fff;
  --brand-bg: var(--navy);
  --accent: var(--red);

  --go: #0f7a4f;
  --go-bg: #e4f2eb;
  --go-line: #9fcdb8;
  --caution: #a06400;
  --caution-bg: #fbeed8;
  --caution-line: #e3c68b;
  --nogo: #c4262c;
  --nogo-bg: #fbe7e8;
  --nogo-line: #eeb2b4;
  --none: #6c7a96;
  --none-bg: #eaeef4;
  --none-line: #ccd5e2;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r: 12px;
  --r-sm: 8px;
  --pad: 16px;
  --shadow: 0 1px 2px rgba(15, 30, 61, .05), 0 6px 20px rgba(15, 30, 61, .05);
  --ring: 0 0 0 3px rgba(35, 64, 143, .35);
}

/* Dark: guarded so an explicit light choice still beats a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="night"]) {
    color-scheme: dark;
    --ground: #0c1322;
    --surface: #141d30;
    --surface-sunk: #101829;
    --ink: #e8edf6;
    --ink-mid: #a5b2c9;
    --ink-soft: #7d8aa3;
    --hair: #27334a;
    --hair-soft: #1d2740;
    --brand-bg: #16203a;
    --brand-ink: #e8edf6;
    --accent: #ef5a60;
    --go: #4cc48c;      --go-bg: #11291f;      --go-line: #1f5d40;
    --caution: #e0a545; --caution-bg: #2a2011; --caution-line: #5e4820;
    --nogo: #f2696f;    --nogo-bg: #2c1416;    --nogo-line: #6b2a2e;
    --none: #7d8aa3;    --none-bg: #1a2338;    --none-line: #2b3750;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28);
    --ring: 0 0 0 3px rgba(122, 162, 255, .45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0c1322;
  --surface: #141d30;
  --surface-sunk: #101829;
  --ink: #e8edf6;
  --ink-mid: #a5b2c9;
  --ink-soft: #7d8aa3;
  --hair: #27334a;
  --hair-soft: #1d2740;
  --brand-bg: #16203a;
  --brand-ink: #e8edf6;
  --accent: #ef5a60;
  --go: #4cc48c;      --go-bg: #11291f;      --go-line: #1f5d40;
  --caution: #e0a545; --caution-bg: #2a2011; --caution-line: #5e4820;
  --nogo: #f2696f;    --nogo-bg: #2c1416;    --nogo-line: #6b2a2e;
  --none: #7d8aa3;    --none-bg: #1a2338;    --none-line: #2b3750;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28);
  --ring: 0 0 0 3px rgba(122, 162, 255, .45);
}

/* Night vision: red on black, nothing else. Deliberately monochrome - any
   other hue on a dark-adapted eye costs you twenty minutes of night vision. */
:root[data-theme="night"] {
  color-scheme: dark;
  --ground: #000;
  --surface: #0a0000;
  --surface-sunk: #050000;
  --ink: #ff4d4d;
  --ink-mid: #c23a3a;
  --ink-soft: #8c2b2b;
  --hair: #401414;
  --hair-soft: #2a0d0d;
  --brand-bg: #0a0000;
  --brand-ink: #ff4d4d;
  --accent: #ff4d4d;
  --go: #ff6b6b;      --go-bg: #140404;      --go-line: #4d1919;
  --caution: #ff4d4d; --caution-bg: #140404; --caution-line: #4d1919;
  --nogo: #ff2a2a;    --nogo-bg: #1a0303;    --nogo-line: #661c1c;
  --none: #8c2b2b;    --none-bg: #0d0202;    --none-line: #331010;
  --shadow: none;
  --ring: 0 0 0 3px rgba(255, 77, 77, .5);
}
:root[data-theme="night"] img { filter: grayscale(1) sepia(1) saturate(6) hue-rotate(-28deg) brightness(.75); }
:root[data-theme="night"] .card,
:root[data-theme="night"] .panel { border-color: var(--hair); }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.15; text-wrap: balance; }

a { color: var(--navy); }
:root[data-theme="dark"] a, :root[data-theme="night"] a { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a { color: var(--accent); }
}

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 14px; }
@media (min-width: 720px) { .wrap { padding: 0 24px; } }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-mid); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }

/* ═══ Masthead ═══════════════════════════════════════════════════════════ */

.masthead {
  background: var(--brand-bg);
  color: var(--brand-ink);
  border-bottom: 3px solid var(--red);
  position: relative;
}

/* On a phone the title gets the full width and the controls drop to their
   own row - squeezing all three into one column wrapped "Aeolian Flotilla"
   onto two lines. From 560px up they sit on a single row. */
.masthead .wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "burgee title" "meta meta";
  align-items: center;
  gap: 10px 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.burgee { grid-area: burgee; }
.mast-text { grid-area: title; min-width: 0; }
.mast-right { grid-area: meta; justify-content: flex-end; }

@media (min-width: 560px) {
  .masthead .wrap {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "burgee title meta";
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

.burgee { width: 46px; height: auto; display: block; }
@media (min-width: 720px) { .burgee { width: 64px; } }

.club {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: 1px;
}

.masthead h1 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.4rem, 7vw, 2rem);
  letter-spacing: -.01em;
}

.masthead .dates { font-size: .76rem; opacity: .78; margin-top: 2px; }
@media (min-width: 720px) { .masthead .dates { font-size: .88rem; } }

.mast-right { display: flex; align-items: center; gap: 8px; }

.pill-day {
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  line-height: 1.1;
}
:root[data-theme="night"] .pill-day { border-color: var(--hair); }
.pill-day .n { display: block; font-family: var(--mono); font-size: 1.15rem; font-weight: 600; }
.pill-day .l { display: block; font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }

/* Theme switch, and the ft/m unit switch beside it - same pill */
.theme-switch, .unit-switch { display: flex; gap: 2px; background: rgba(255,255,255,.1); border-radius: 100px; padding: 2px; }
:root[data-theme="night"] .theme-switch,
:root[data-theme="night"] .unit-switch { background: var(--surface-sunk); border: 1px solid var(--hair); }
.theme-switch button, .unit-switch button {
  font: inherit; font-size: .9rem; line-height: 1;
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: .55;
  padding: 6px 7px; border-radius: 100px;
  min-width: 30px; min-height: 30px;
}
.theme-switch button[aria-pressed="true"],
.unit-switch button[aria-pressed="true"] { background: rgba(255,255,255,.2); opacity: 1; }
:root[data-theme="night"] .theme-switch button[aria-pressed="true"],
:root[data-theme="night"] .unit-switch button[aria-pressed="true"] { background: #1a0303; }

/* The unit buttons are words, not glyphs, so they need a little more room
   and a smaller face to sit level with the theme icons. */
.unit-switch button { font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: 6px 8px; }

/* Shown in the status strip only while the toggle is on metres and the
   build-time prose still reads in feet. */
.unit-note { color: var(--caution); }

/* ═══ Status strip ═══════════════════════════════════════════════════════ */

.status {
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
  font-size: .8rem;
}
.status .wrap { padding-top: 9px; padding-bottom: 9px; }

.status-line {
  display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap;
  color: var(--ink-mid);
}
.status-line b { color: var(--ink); font-weight: 600; }

.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--go);
  flex: none; box-shadow: 0 0 0 3px var(--go-bg);
}
.live-dot.warn { background: var(--caution); box-shadow: 0 0 0 3px var(--caution-bg); }

.disclose {
  font: inherit; font-size: .78rem; color: var(--navy);
  background: none; border: none; padding: 2px 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
:root[data-theme="dark"] .disclose, :root[data-theme="night"] .disclose { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .disclose { color: var(--accent); } }

.model-grid { display: grid; gap: 6px; margin-top: 10px; }
@media (min-width: 620px) { .model-grid { grid-template-columns: 1fr 1fr; } }

.model-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline;
  font-size: .74rem; padding: 6px 9px;
  background: var(--surface-sunk); border: 1px solid var(--hair-soft); border-radius: var(--r-sm);
}
.model-row .mid { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.model-row .det { color: var(--ink-soft); font-family: var(--mono); }
.model-row.is-stale { border-color: var(--caution-line); background: var(--caution-bg); }
.model-row.is-dead { border-color: var(--nogo-line); background: var(--nogo-bg); }

/* ═══ Notices ════════════════════════════════════════════════════════════ */

.notice {
  display: flex; gap: 9px; align-items: flex-start;
  border: 1px solid; border-radius: var(--r-sm);
  padding: 10px 12px; font-size: .82rem; margin-top: 10px;
}
.notice .ico { flex: none; font-size: .95em; line-height: 1.4; }
.notice b { display: block; margin-bottom: 1px; }
.notice-warn { background: var(--caution-bg); border-color: var(--caution-line); color: var(--caution); }
.notice-danger { background: var(--nogo-bg); border-color: var(--nogo-line); color: var(--nogo); }
.notice-warn b, .notice-danger b { color: inherit; }

/* ═══ Sections ═══════════════════════════════════════════════════════════ */

main { padding: 20px 0 40px; }
section { margin-bottom: 30px; scroll-margin-top: 12px; }

.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.sec-head h2 {
  font-family: var(--display); font-optical-sizing: auto;
  font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em;
}
@media (min-width: 720px) { .sec-head h2 { font-size: 1.4rem; } }
.sec-head .sub { font-size: .76rem; color: var(--ink-soft); }

.card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card + .card { margin-top: 12px; }
.card-pad { padding: var(--pad); }

/* ═══ Status chips ═══════════════════════════════════════════════════════ */
/* Never colour alone: every chip carries a glyph and a word, so it survives
   colour blindness, greyscale printing and the monochrome night theme. */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; border: 1px solid; white-space: nowrap;
}
.chip .g { font-size: .82em; }
.chip-go { color: var(--go); background: var(--go-bg); border-color: var(--go-line); }
.chip-caution { color: var(--caution); background: var(--caution-bg); border-color: var(--caution-line); }
.chip-nogo { color: var(--nogo); background: var(--nogo-bg); border-color: var(--nogo-line); }
.chip-unknown { color: var(--none); background: var(--none-bg); border-color: var(--none-line); }
.chip-sheltered { color: var(--go); background: var(--go-bg); border-color: var(--go-line); }
.chip-workable { color: var(--caution); background: var(--caution-bg); border-color: var(--caution-line); }
.chip-exposed { color: var(--caution); background: var(--caution-bg); border-color: var(--caution-line); }
.chip-untenable { color: var(--nogo); background: var(--nogo-bg); border-color: var(--nogo-line); }

/* Wind arrow, drawn as SVG so it aligns and scales predictably. */
.warr { display: inline-block; vertical-align: -2px; }
.warr svg { display: block; }

/* ═══ Conditions now ═════════════════════════════════════════════════════ */

.now-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: 132px;
  gap: 10px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
@media (min-width: 720px) {
  .now-scroll { grid-auto-flow: row; grid-auto-columns: auto;
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); overflow: visible; }
}
.now-card {
  scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 11px 12px;
}
.now-card .pl { font-size: .72rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-card .ws { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; line-height: 1.1; margin-top: 3px; }
.now-card .ws small { font-size: .5em; font-weight: 400; color: var(--ink-soft); margin-left: 2px; }
.now-card .wd { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--ink-mid); margin-top: 3px; }
.now-card .spread {
  font-size: .64rem; color: var(--caution); font-family: var(--mono); margin-top: 4px;
}
.now-card .sea { font-size: .7rem; color: var(--ink-soft); margin-top: 5px; font-family: var(--mono); }

/* ═══ Briefing ═══════════════════════════════════════════════════════════ */

.briefing { border-top: 3px solid var(--red); }
.briefing .headline {
  font-family: var(--display); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(1.1rem, 4.4vw, 1.45rem); line-height: 1.28; margin-bottom: 12px;
}
.briefing h4 {
  font-size: .66rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft); margin: 15px 0 4px; font-weight: 600;
}
.briefing p { margin: 0; font-size: .92rem; }
.briefing ul { margin: 5px 0 0; padding-left: 18px; font-size: .9rem; }
.briefing li + li { margin-top: 3px; }
.briefing .by {
  margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--hair-soft);
  font-size: .72rem; color: var(--ink-soft);
  display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap;
}

/* Responsive swap: the hour-by-hour data is stacked rows on a phone and a
   real table from 720px up. Same numbers, never a sideways scroll on a
   handheld - this is the primary content of the page. */
.only-wide { display: none; }
.only-phone { display: block; }
@media (min-width: 720px) {
  .only-wide { display: table; width: 100%; }
  .only-phone { display: none; }
}

/* ═══ Passage cards ══════════════════════════════════════════════════════ */

.leg-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px var(--pad); border-bottom: 1px solid var(--hair-soft);
}
.leg-head h3 { font-size: 1rem; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.leg-head .when { font-size: .76rem; color: var(--ink-soft); font-family: var(--mono); }
.leg.is-optional .leg-head h3::after {
  content: "optional"; font-family: var(--sans); font-size: .58rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--hair); border-radius: 100px; padding: 1px 6px; margin-left: 7px;
  vertical-align: middle; white-space: nowrap;
}

/* Fixed-label facts row - reads as instrument data, not prose. */
.facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hair-soft); border-bottom: 1px solid var(--hair-soft);
}
.facts > div { background: var(--surface); padding: 8px var(--pad); }
.facts .k { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.facts .v { font-family: var(--mono); font-size: .88rem; font-weight: 600; margin-top: 1px;
            display: flex; align-items: center; gap: 4px; }

/* The recommended departure - the single most important thing on the card. */
.callout { padding: 13px var(--pad); border-bottom: 1px solid var(--hair-soft); }
.callout.go { background: var(--go-bg); }
.callout.caution { background: var(--caution-bg); }
.callout.nogo { background: var(--nogo-bg); }

.callout-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.callout-time { font-family: var(--mono); font-size: 1.7rem; font-weight: 600; line-height: 1; }
.callout-lab { font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mid); }
.callout .why { font-size: .8rem; color: var(--ink-mid); margin-top: 7px; }

/* Key numbers for the recommended window - a 2x3 grid on phones, never a table. */
.keynums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 11px; }
.keynums > div { min-width: 0; }
.keynums .k { font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.keynums .v { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; line-height: 1.2;
              display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; }
.keynums .v small { font-size: .62em; font-weight: 400; color: var(--ink-soft); }
.keynums .pos { grid-column: 1 / -1; }
.keynums .pos .v { font-family: var(--sans); font-size: .88rem; font-weight: 500; }

/* Hour-by-hour: stacked rows on phones, a real table from 720px up. */
.hours { border-bottom: 1px solid var(--hair-soft); }
.hours[hidden] { display: none; }

.hour-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px;
  align-items: center; padding: 9px var(--pad);
  border-top: 1px solid var(--hair-soft); font-size: .82rem;
}
.hour-row.is-best { background: var(--surface-sunk); box-shadow: inset 3px 0 0 var(--navy); }
.hour-row .t { font-family: var(--mono); font-weight: 600; }
.hour-row .d { font-family: var(--mono); color: var(--ink-mid); font-size: .78rem;
               display: flex; gap: 4px 9px; flex-wrap: wrap; align-items: center; }
/* Keep each datum whole when the row wraps - an arrow orphaned from its
   compass label reads as a stray mark. */
.hour-row .d .nw { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.hour-row .d .nw + .nw::before { content: "·"; color: var(--ink-soft); margin-right: 5px; }

@media (min-width: 720px) {
  .hours-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
  .hours-table th {
    text-align: left; font-size: .6rem; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 600; padding: 8px var(--pad); white-space: nowrap;
    border-bottom: 1px solid var(--hair);
  }
  .hours-table td { padding: 7px var(--pad); border-top: 1px solid var(--hair-soft); white-space: nowrap; }
  .hours-table tr.is-best { background: var(--surface-sunk); }
  .hours-table tr.is-best td:first-child { box-shadow: inset 3px 0 0 var(--navy); font-weight: 600; }
  .hours-table .pos { white-space: normal; color: var(--ink-mid); }
}

.card-foot {
  padding: 10px var(--pad); display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; font-size: .78rem; color: var(--ink-soft);
}

/* Pre-trip: an empty state that looks designed rather than broken. */
.await {
  padding: 15px var(--pad); display: flex; gap: 11px; align-items: flex-start;
  background: var(--surface-sunk);
}
.await .ring {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 2px dashed var(--hair); display: grid; place-items: center;
  font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--ink-soft);
}
.await .txt { font-size: .82rem; color: var(--ink-mid); }
.await .txt b { color: var(--ink); }

.rehearsal-note { border-left: 3px solid var(--caution); font-size: .85rem; }
.reh-leg {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
  padding: 10px var(--pad); border-top: 1px solid var(--hair-soft);
}
.reh-leg:first-child { border-top: none; }
.reh-leg .lab { font-weight: 600; font-size: .9rem; }
.reh-leg .det { font-family: var(--mono); font-size: .76rem; color: var(--ink-mid);
                grid-column: 1 / -1; display: flex; gap: 9px; flex-wrap: wrap; }
.reh-date { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); }

table.stab { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.stab th {
  text-align: left; font-size: .6rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; padding: 7px var(--pad);
  border-bottom: 1px solid var(--hair); white-space: nowrap;
}
table.stab td { padding: 7px var(--pad); border-top: 1px solid var(--hair-soft);
                font-family: var(--mono); white-space: nowrap; }
table.stab td:first-child { font-family: var(--sans); }
.stab-bar { display: inline-block; height: 5px; border-radius: 3px; background: var(--navy);
            vertical-align: middle; margin-left: 7px; min-width: 2px; }
:root[data-theme="night"] .stab-bar { background: var(--accent); }

/* ═══ Berths ═════════════════════════════════════════════════════════════ */

.berth-grid { display: grid; gap: 12px; }
@media (min-width: 760px) { .berth-grid { grid-template-columns: 1fr 1fr; } }

.opt {
  border: 1px solid var(--hair-soft); border-radius: var(--r-sm);
  padding: 10px 11px; background: var(--surface-sunk);
}
.opt + .opt { margin-top: 7px; }
.opt.is-best { border-color: var(--go-line); background: var(--go-bg); }
.opt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.opt-name { font-weight: 600; font-size: .9rem; }
.opt .why { font-size: .78rem; color: var(--ink-mid); margin-top: 3px; }
.opt .nums { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); margin-top: 5px;
             display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.opt .warn { font-size: .74rem; color: var(--nogo); font-weight: 600; margin-top: 4px; }
.meter { height: 3px; background: var(--hair); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; }

.badge-unver {
  font-size: .56rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--caution); border: 1px solid var(--caution-line); background: var(--caution-bg);
  border-radius: 3px; padding: 0 4px; margin-left: 5px; vertical-align: 1px; white-space: nowrap;
}

/* ═══ Map ════════════════════════════════════════════════════════════════ */

#map-canvas { height: 300px; border-radius: var(--r); border: 1px solid var(--hair); z-index: 0; }
@media (min-width: 720px) { #map-canvas { height: 440px; } }
/* Darken only the raster tiles. Filtering the whole map pane also inverted
   the route lines, mooring markers and wind arrows, which are already
   theme-coloured. */
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85); }
:root[data-theme="night"] .leaflet-tile-pane { filter: invert(1) grayscale(1) sepia(1) saturate(5) hue-rotate(-28deg) brightness(.5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="night"]) .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.85);
  }
}

.map-notice {
  font-size: .78rem; color: var(--caution); background: var(--caution-bg);
  border: 1px solid var(--caution-line); border-radius: var(--r-sm);
  padding: 8px 11px; margin: 9px 0 0;
}
/* Without tiles the pane is a flat void; a faint grid reads as a chart
   background and keeps the vectors legible. */
#map-canvas.no-tiles {
  background-image: linear-gradient(var(--hair-soft) 1px, transparent 1px),
                    linear-gradient(90deg, var(--hair-soft) 1px, transparent 1px);
  background-size: 40px 40px;
  background-color: var(--surface-sunk);
}
#map-canvas.no-tiles .leaflet-tile-pane { display: none; }

.map-ctl { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 10px; }
.map-ctl input[type=range] { flex: 1 1 180px; accent-color: var(--navy); min-height: 28px; }
.map-time { font-family: var(--mono); font-size: .8rem; font-weight: 600; min-width: 130px; }

.legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: .72rem; color: var(--ink-soft); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* Points of interest draw as a white disc with a red ring, not a filled
   dot - without a legend entry the ring reads as a warning. */
.dot-poi { width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  background: #fff; border: 2px solid var(--red); box-sizing: border-box; }
.leaflet-container { font: inherit; }
.wind-pin { text-align: center; }
.wind-arrow { color: var(--navy); display: flex; justify-content: center; }
:root[data-theme="dark"] .wind-arrow, :root[data-theme="night"] .wind-arrow { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wind-arrow { color: var(--accent); }
}
.wind-kt {
  font-family: var(--mono); font-size: 12px; font-weight: 600; line-height: 1;
  text-align: center; color: var(--ink);
  text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface), 0 0 3px var(--surface);
}

/* ═══ Charts ═════════════════════════════════════════════════════════════ */

.tabs { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 7px; margin-bottom: 11px;
        -webkit-overflow-scrolling: touch; }
.tabs button {
  font: inherit; font-size: .78rem; white-space: nowrap; flex: none;
  padding: 6px 13px; min-height: 32px;
  border: 1px solid var(--hair); background: var(--surface);
  border-radius: 100px; cursor: pointer; color: var(--ink-mid);
}
.tabs button[aria-pressed=true] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
:root[data-theme="night"] .tabs button[aria-pressed=true] { background: var(--nogo-bg); border-color: var(--accent); color: var(--accent); }

.chart-box { position: relative; height: 230px; width: 100%; min-width: 0; }
@media (min-width: 720px) { .chart-box { height: 290px; } }
.chart-box + .chart-box { margin-top: 16px; }

.barbs { display: flex; margin-top: 6px; font-size: .6rem; color: var(--ink-soft); overflow: hidden; }
.barbs span { flex: 1 1 0; text-align: center; }

/* ═══ Links ══════════════════════════════════════════════════════════════ */

.windy, .link-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .74rem; font-weight: 600; text-decoration: none;
  color: var(--navy); border: 1px solid var(--hair); background: var(--surface);
  border-radius: 100px; padding: 5px 11px; min-height: 30px; white-space: nowrap;
}
.link-btn { border-radius: var(--r-sm); font-size: .8rem; padding: 8px 13px; min-height: 36px; }
.windy:hover, .link-btn:hover { border-color: var(--navy); }
:root[data-theme="dark"] .windy, :root[data-theme="night"] .windy,
:root[data-theme="dark"] .link-btn, :root[data-theme="night"] .link-btn { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .windy,
  :root:not([data-theme="light"]) .link-btn { color: var(--accent); }
}

.link-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }

/* ═══ Stromboli ══════════════════════════════════════════════════════════ */

.strombo { border-left: 3px solid var(--red); }
.strombo p { font-size: .87rem; }

/* ═══ Itinerary ══════════════════════════════════════════════════════════ */

.day-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--pad); border-bottom: 1px solid var(--hair-soft);
}
.daynum {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .88rem; font-weight: 600;
}
:root[data-theme="night"] .daynum { background: var(--nogo-bg); color: var(--accent); border: 1px solid var(--hair); }
.day.is-optional .daynum { background: var(--surface); color: var(--ink-soft); border: 1px dashed var(--hair); }
.day-head h3 { font-size: 1rem; font-weight: 600; flex: 1 1 auto; }
.day-head .when { font-size: .72rem; color: var(--ink-soft); font-family: var(--mono); }

.day .lede { font-size: .87rem; color: var(--ink-mid); font-style: italic; margin: 0 0 8px; }
.day .prose { font-size: .87rem; white-space: pre-line; margin: 0; max-width: 68ch; }
.day .prose.clipped {
  max-height: 4.4em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.more { font: inherit; font-size: .77rem; font-weight: 600; color: var(--navy);
        background: none; border: none; padding: 6px 0; cursor: pointer; min-height: 32px; }
:root[data-theme="dark"] .more, :root[data-theme="night"] .more { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .more { color: var(--accent); } }

.mooring-note {
  font-size: .79rem; color: var(--ink-mid); background: var(--surface-sunk);
  border-left: 2px solid var(--hair); padding: 8px 11px; margin-top: 10px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.tag {
  font-size: .68rem; border: 1px solid var(--hair); border-radius: 100px;
  padding: 2px 8px; color: var(--ink-soft); background: var(--surface-sunk);
}
.tag.flag { background: var(--caution-bg); border-color: var(--caution-line); color: var(--caution); font-weight: 600; }
.tag.dinner { background: var(--go-bg); border-color: var(--go-line); color: var(--go); font-weight: 600; }

.sail-line {
  display: flex; align-items: center; gap: 6px; font-size: .78rem;
  color: var(--ink-soft); font-family: var(--mono); margin-top: 8px;
}

/* ═══ Footer ═════════════════════════════════════════════════════════════ */

footer {
  background: var(--brand-bg); color: var(--brand-ink);
  border-top: 3px solid var(--red); padding: 22px 0; font-size: .78rem;
}
footer .wrap > * + * { margin-top: 8px; }
footer a { color: inherit; }
footer .fine { opacity: .7; }
.disclaimer-foot {
  border-left: 2px solid var(--red); padding-left: 11px;
  font-size: .8rem;
}

/* ═══ Print ══════════════════════════════════════════════════════════════ */

@media print {
  :root { --shadow: none; --ground: #fff; --surface: #fff; --surface-sunk: #fff;
          --ink: #111; --ink-mid: #333; --ink-soft: #555; --hair: #bbb; --hair-soft: #ddd;
          --brand-bg: #fff; --brand-ink: #111; }
  body { font-size: 10pt; }
  .masthead { border-bottom-width: 2px; }
  .theme-switch, .unit-switch, #map, #charts, .tabs, .map-ctl, .more, .windy, .disclose { display: none !important; }
  .card, .leg, .berth, .day { break-inside: avoid; box-shadow: none; }
  section { margin-bottom: 14px; }
  .day .prose.clipped { max-height: none; mask-image: none; -webkit-mask-image: none; }
  .hours[hidden] { display: table-row-group !important; }
  footer { border-top-width: 2px; }
}