:root {
  color-scheme: light;
  min-width: 0;
  --fable-sky-top: #d8e8ef;
  --fable-sky-mid: #e8efed;
  --fable-sky-bottom: #f3e8d8;
  --fable-sky-horizon: 54%;
  --fable-theme-color: var(--fable-sky-top);
  --fable-text: #071726;
  --fable-ink: var(--fable-text);
  --fable-muted: #405863;
  --fable-surface: rgba(255, 255, 255, .9);
  --fable-surface-strong: #f8fbfa;
  --fable-surface-soft: rgba(244, 248, 247, .94);
  --fable-hero-surface: rgba(255, 255, 255, .82);
  --fable-line: #71858e;
  --fable-water: #1f766e;
  --fable-water-strong: #075f57;
  --fable-water-soft: #d7eeea;
  --fable-home-date: #176a64;
  --fable-on-water: #ffffff;
  --fable-mint: var(--fable-water);
  --fable-amber: #e0a64e;
  --fable-amber-strong: #cb8d31;
  --fable-on-amber: #201407;
  --fable-current-marker: #905511;
  --fable-sky: var(--fable-sky-top);
  --fable-canvas: var(--fable-sky-bottom);
  --fable-focus: #075f57;
  --fable-radius: 18px;
  --fable-title-size: clamp(28px, 3vw, 36px);
  --fable-chrome-width: min(1112px, calc(100vw - 16px));
  --fable-shadow: 0 1px 2px rgba(7, 23, 38, .08), 0 18px 52px rgba(7, 23, 38, .12);
  --fable-warning-ink: #684d08;
  --fable-warning-surface: #f8efd3;
  --canvas: var(--fable-sky-bottom);
  --paper: var(--fable-surface);
  --paper-soft: var(--fable-surface-soft);
  --ink: var(--fable-ink);
  --muted: var(--fable-muted);
  --faint: var(--fable-muted);
  --rule: var(--fable-line);
  --rule-strong: var(--fable-line);
  --tide: var(--fable-water);
  --tide-strong: var(--fable-water-strong);
  --on-tide: var(--fable-on-water);
  --focus-ring: var(--fable-focus);
  --shadow: var(--fable-shadow);
  --bg: var(--fable-sky-bottom);
  --surface: var(--fable-surface);
  --surface-soft: var(--fable-surface-soft);
  --text-primary: var(--fable-ink);
  --text-secondary: var(--fable-muted);
  --text-tertiary: var(--fable-muted);
  --border: var(--fable-line);
  --border-strong: var(--fable-line);
  --focus: var(--fable-focus);
  --nav-active: var(--fable-water);
  --selected: var(--fable-water-soft);
  --ocean: var(--fable-water-soft);
  --accent-ink: var(--fable-water);
  --accent-line: var(--fable-water);
  --accent-line-soft: var(--fable-line);
  --accent-surface: var(--fable-water-soft);
  --accent-surface-soft: var(--fable-water-soft);
  --glass: var(--fable-surface);
  --glass-strong: var(--fable-surface-strong);
}

/* Shared site chrome; local planner tabs remain inside their own workflow. */
:root .fable-page .site-header {
  position: relative;
  z-index: 12;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 64px;
  box-sizing: border-box;
  width: var(--fable-chrome-width);
  max-width: none;
  margin: 0 calc((100% - var(--fable-chrome-width)) / 2) 16px;
  padding: 8px 16px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--fable-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  white-space: normal;
}
:root .fable-page .site-header .site-brand {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--fable-ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}
:root .fable-page .site-header .site-brand::before { content: none; }
:root .fable-page .site-header .site-brand img { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; border-radius: 8px; }
.site-release-version { margin: 0; padding: 8px 12px; font-size: .8125rem; color: var(--fable-muted); }
:root .fable-page .site-header .site-brand strong,
:root .fable-page .site-header .site-brand .brand-name { color: inherit; font-size: 18px; font-weight: 800; }
:root .fable-page .site-header .site-brand > span:not(.brand-name):last-child:not(:only-of-type),
:root .fable-page .site-descriptor,
:root .fable-page .site-header .site-brand.fable-port-brand > span { margin-left: 0; color: var(--fable-muted); font-size: 12px; font-weight: 600; }
:root .fable-page .site-menu { position: relative; flex: 0 0 auto; margin: 0; padding: 0; border: 0; }
:root .fable-page .site-menu > summary,
:root .fable-page .site-header .fable-display-settings > summary {
  display: flex;
  min-width: 52px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid var(--fable-line);
  border-radius: 12px;
  background: var(--fable-surface-strong);
  color: var(--fable-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  white-space: nowrap;
}
:root .fable-page .site-menu > summary::-webkit-details-marker { display: none; }
:root .fable-page .site-menu > summary::after { content: '▾'; font-size: 11px; }
:root .fable-page .site-menu[open] > summary::after { content: '▴'; }
:root .fable-page .site-menu-links {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  display: grid;
  gap: 2px;
  width: min(260px, calc(100vw - 32px));
  max-height: min(70dvh, 560px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--fable-line);
  border-radius: 16px;
  background: var(--fable-surface-strong);
  box-shadow: var(--fable-shadow);
}
:root .fable-page .site-menu-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  color: var(--fable-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  word-break: keep-all;
}
:root .fable-page .site-menu-links a:hover,
:root .fable-page .site-menu-links a[aria-current="page"] { background: var(--fable-water-soft); color: var(--fable-water-strong); }
:root .fable-page .site-menu-links a[aria-current="page"] { box-shadow: inset 3px 0 var(--fable-water); font-weight: 800; }
.fable-page .site-header :focus-visible { outline: 3px solid var(--fable-focus); outline-offset: 3px; }
.fable-page .site-header .topbar-meta { display: contents; }
.fable-page .site-header #todayLabel { display: none; }
.fable-page .site-header .fable-port-context { display: none; }
.fable-page .candidate-unavailable { color: var(--fable-warning-ink); background: var(--fable-warning-surface); }
.fable-page .candidate-loading { margin: 12px 0; padding: 16px; border: 1px solid var(--fable-line); border-radius: 12px; background: var(--fable-surface-soft); color: var(--fable-muted); }
.fable-page .candidate-loading strong { display: block; margin-bottom: 4px; color: var(--fable-ink); font-size: 16px; }
.fable-page :is(h1, h2, h3, button, summary, .cta) { word-break: keep-all; overflow-wrap: break-word; }
.fable-page :is(.hero-copy h1, .calendar-header h1, .ports-header h1, .lure-header h1) { text-wrap: balance; }
.fable-page .trip-progress-track::before { background: var(--fable-water); }
@media (max-width: 640px) {
  :root .fable-page .site-header .site-brand .brand-descriptor,
  :root .fable-page .site-header .site-brand .brand-tag,
  :root .fable-page .site-descriptor,
  :root .fable-page .site-header .site-brand.fable-port-brand > span { display: none; }
  :root .fable-page .site-header { margin-bottom: 16px; gap: 6px; }
  :root .fable-page .site-header .site-brand { gap: 6px; font-size: 17px; }
  :root .fable-page .site-header .site-brand img { width: 28px; height: 28px; flex-basis: 28px; }
  :root .fable-page .site-header .icon-button { width: 44px; min-width: 44px; }
  :root .fable-page .site-header .fable-display-settings { margin-left: 0; }
  :root .fable-page .site-menu-links { position: fixed; top: auto; right: 16px; margin-top: 8px; }
  .fable-page :is(.hero-copy h1, .calendar-header h1, .ports-header h1, .lure-header h1) { font-size: 30px; line-height: 1.2; }
}

:root[data-fable-phase="night"] {
  --fable-sky-top: #061624;
  --fable-sky-mid: #0a293b;
  --fable-sky-bottom: #16445e;
  --fable-sky-horizon: 54%;
}

:root[data-fable-phase="dawn"] {
  --fable-sky-top: #081827;
  --fable-sky-mid: #293b49;
  --fable-sky-bottom: #344957;
  --fable-sky-horizon: 58%;
}

:root[data-fable-phase="day"] {
  --fable-sky-top: #d8e8ef;
  --fable-sky-mid: #e8efed;
  --fable-sky-bottom: #f3e8d8;
  --fable-sky-horizon: 54%;
}

:root[data-fable-phase="sunset"] {
  --fable-sky-top: #202845;
  --fable-sky-mid: #4a3c55;
  --fable-sky-bottom: #354859;
  --fable-sky-horizon: 58%;
}

/* A manual appearance choice changes the sky luminance as well as the surfaces. */
:root[data-fable-appearance="dark"][data-fable-phase="day"] {
  --fable-sky-top: #102b36;
  --fable-sky-mid: #183c47;
  --fable-sky-bottom: #2d4747;
}

:root[data-fable-appearance="light"][data-fable-phase="night"] {
  --fable-sky-top: #d7e0e7;
  --fable-sky-mid: #dae5e8;
  --fable-sky-bottom: #b9ccd8;
}

:root[data-fable-appearance="light"][data-fable-phase="dawn"] {
  --fable-sky-top: #d8dfe2;
  --fable-sky-mid: #eee1cf;
  --fable-sky-bottom: #c8d5d5;
}

:root[data-fable-appearance="light"][data-fable-phase="sunset"] {
  --fable-sky-top: #ead9d0;
  --fable-sky-mid: #dcc7cd;
  --fable-sky-bottom: #c6d0d8;
}

:root[data-fable-scheme="dark"] {
  color-scheme: dark;
  --fable-text: #f7f8f4;
  --fable-muted: #c5d2d7;
  --fable-surface: rgba(9, 29, 42, .92);
  --fable-surface-strong: #0b2232;
  --fable-surface-soft: rgba(28, 54, 70, .94);
  --fable-hero-surface: rgba(9, 29, 42, .76);
  --fable-line: #718d9a;
  --fable-water: #76e2d4;
  --fable-water-strong: #8aeee0;
  --fable-water-soft: #164a49;
  --fable-home-date: var(--fable-water);
  --fable-on-water: #071726;
  --fable-mint: var(--fable-water);
  --fable-amber: #f2c07a;
  --fable-amber-strong: #ffd08b;
  --fable-on-amber: #201407;
  --fable-current-marker: var(--fable-amber);
  --fable-focus: #f2c07a;
  --fable-shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 20px 56px rgba(0, 0, 0, .28);
  --fable-warning-ink: #f0d28c;
  --fable-warning-surface: #302817;
}

:root[data-fable-scheme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-fable-scheme]) {
    color-scheme: dark;
    --fable-sky-top: #061624;
    --fable-sky-mid: #0a293b;
    --fable-sky-bottom: #16445e;
    --fable-sky-horizon: 54%;
    --fable-text: #f7f8f4;
    --fable-muted: #c5d2d7;
    --fable-surface: rgba(9, 29, 42, .92);
    --fable-surface-strong: #0b2232;
    --fable-surface-soft: rgba(28, 54, 70, .94);
    --fable-hero-surface: rgba(9, 29, 42, .76);
    --fable-line: #718d9a;
    --fable-water: #76e2d4;
    --fable-water-strong: #8aeee0;
    --fable-water-soft: #164a49;
    --fable-home-date: var(--fable-water);
    --fable-on-water: #071726;
    --fable-mint: var(--fable-water);
    --fable-amber: #f2c07a;
    --fable-amber-strong: #ffd08b;
    --fable-on-amber: #201407;
    --fable-current-marker: var(--fable-amber);
    --fable-focus: #f2c07a;
    --fable-shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 20px 56px rgba(0, 0, 0, .28);
  }
}

/* Keep legacy app chrome on the explicit Fable scheme even when later CSS defines old aliases. */
:root[data-fable-scheme],
:root:not([data-fable-scheme]) {
  --bg: var(--fable-sky-bottom);
  --surface: var(--fable-surface);
  --surface-soft: var(--fable-surface-soft);
  --text-primary: var(--fable-ink);
  --text-secondary: var(--fable-muted);
  --text-tertiary: var(--fable-muted);
  --border: var(--fable-line);
  --border-strong: var(--fable-line);
  --focus: var(--fable-focus);
  --nav-active: var(--fable-water);
  --selected: var(--fable-water-soft);
  --ocean: var(--fable-water-soft);
  --accent-ink: var(--fable-water);
  --accent-line: var(--fable-water);
  --accent-line-soft: var(--fable-line);
  --accent-surface: var(--fable-water-soft);
  --accent-surface-soft: var(--fable-water-soft);
  --glass: var(--fable-surface);
  --glass-strong: var(--fable-surface-strong);
}

.fable-page {
  position: relative;
  z-index: 0;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  min-width: 0;
  margin: 0;
  overflow-x: visible;
  isolation: isolate;
  background: var(--fable-sky-bottom);
  color: var(--fable-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.fable-page::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--fable-sky-top) 0%,
    var(--fable-sky-mid) var(--fable-sky-horizon),
    var(--fable-sky-bottom) 100%
  );
  content: "";
  pointer-events: none;
}

.fable-shell {
  position: relative;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding-right: clamp(16px, 4vw, 48px);
  padding-left: clamp(16px, 4vw, 48px);
}

.fable-page .fable-shell,
.fable-page .app-shell { background: transparent; }

.fable-header {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(8px, 2vw, 18px);
  padding: 8px 12px;
  border: 1px solid var(--fable-line);
  border-radius: var(--fable-radius);
  background: var(--fable-hero-surface);
  box-shadow: 0 10px 30px rgba(7, 23, 38, .08);
}

/* The answer-first home keeps its identity open against the safe top of the AUTO sky. */
:root[data-fable-appearance="auto"] .fable-page .fable-header:has(+ main .home-answer) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.fable-page .fable-display-settings {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.fable-page .fable-display-settings > summary {
  display: inline-flex;
  min-width: 64px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--fable-line);
  border-radius: 999px;
  background: var(--fable-surface-strong);
  color: var(--fable-ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  list-style: none;
}

.fable-page .fable-display-settings > summary::-webkit-details-marker { display: none; }
.fable-page .fable-display-settings > summary::after { content: "▾"; font-size: 11px; }
.fable-page .fable-display-settings[open] > summary::after { content: "▴"; }

.fable-page .fable-display-settings > label {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: min(220px, calc(100vw - 32px));
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--fable-line);
  border-radius: 14px;
  background: var(--fable-surface-strong);
  box-shadow: var(--fable-shadow);
  color: var(--fable-muted);
  font-size: 13px;
  font-weight: 700;
}

.fable-page .fable-display-settings:has(> small) > label {
  padding-bottom: 38px;
}

.fable-page .fable-display-settings > small {
  position: absolute;
  z-index: 21;
  top: calc(100% + 94px);
  right: 12px;
  width: min(196px, calc(100vw - 56px));
  color: var(--fable-muted);
  font-size: 11px;
  line-height: 1.35;
  pointer-events: none;
}

.fable-page [data-fable-appearance-select] {
  width: 100%;
  min-height: 44px;
  padding: 8px 34px 8px 10px;
  border: 1px solid var(--fable-line);
  border-radius: 10px;
  background: var(--fable-surface-soft);
  color: var(--fable-ink);
  font: inherit;
  font-size: 16px;
}

.fable-page a:focus-visible,
.fable-page button:focus-visible,
.fable-page select:focus-visible,
.fable-page input:focus-visible {
  outline: 3px solid var(--fable-focus);
  outline-offset: 3px;
}

.fable-page a:not([class]),
.fable-page .footer a,
.fable-page .home-path-link {
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
}

/* Root answer-first home. Data cards are siblings on one surface, never cards within cards. */
.fable-page .home-answer {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  padding: clamp(36px, 7vw, 76px) 0 clamp(44px, 8vw, 88px);
}

.fable-page .home-answer-head {
  display: grid;
  gap: 10px;
  padding: clamp(14px, 3vw, 22px);
  border: 1px solid var(--fable-line);
  border-radius: calc(var(--fable-radius) + 4px);
  background: var(--fable-hero-surface);
}

:root[data-fable-appearance="auto"] .fable-page .home-answer-head {
  padding-right: 0;
  padding-left: 0;
  border-color: transparent;
  background: transparent;
}

.fable-page .home-answer-date,
.fable-page .home-answer-context,
.fable-page .home-port-location,
.fable-page .home-port-tide-meta,
.fable-page .home-location-status {
  margin: 0;
  color: var(--fable-muted);
}

.fable-page .home-answer-date {
  color: var(--fable-home-date);
  font-size: 15px;
  font-weight: 700;
}

.fable-page .home-answer h1 {
  max-width: 11em;
  margin: 0;
  font-size: clamp(42px, 8vw, 76px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.06;
  text-wrap: balance;
  word-break: keep-all;
}

.fable-page .home-answer-context-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fable-page .home-answer-context { font-size: 15px; font-weight: 600; }

.fable-page .home-location-button {
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0 13px;
  border: 1px solid var(--fable-line);
  border-radius: 999px;
  background: var(--fable-surface-strong);
  color: var(--fable-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.fable-page .home-location-button:hover { border-color: var(--fable-water); background: var(--fable-water-soft); }
.fable-page .home-location-button:disabled { cursor: wait; opacity: .64; }

.fable-page .home-port-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--fable-line);
  border-radius: calc(var(--fable-radius) + 6px);
  background: var(--fable-surface);
  box-shadow: var(--fable-shadow);
  list-style: none;
}

.fable-page .home-port-item { min-width: 0; }
.fable-page .home-port-item + .home-port-item { border-left: 1px solid var(--fable-line); }

.fable-page .home-port-link {
  display: grid;
  min-height: 248px;
  height: 100%;
  align-content: space-between;
  gap: 18px;
  padding: clamp(20px, 3vw, 28px);
  color: var(--fable-ink);
  text-decoration: none;
  transition: background-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.fable-page .home-port-link:hover {
  background: var(--fable-water-soft);
  box-shadow: inset 0 -3px 0 var(--fable-water);
}

.fable-page .home-port-link:active { opacity: .82; }
.fable-page .home-port-heading { display: grid; gap: 3px; }
.fable-page .home-port-name { font-size: clamp(20px, 3vw, 26px); font-weight: 800; line-height: 1.25; word-break: keep-all; }
.fable-page .home-port-location { font-size: 14px; }
.fable-page .home-port-tide { display: grid; gap: 3px; }
.fable-page .home-port-tide strong { color: var(--fable-water); font-size: clamp(22px, 3.6vw, 30px); font-weight: 800; line-height: 1.25; }
.fable-page .home-port-tide-meta { font-size: 14px; line-height: 1.55; }
.fable-page .home-port-mul { margin: 0; font-size: 15px; font-weight: 700; }

.fable-page .home-planner-cta {
  display: inline-flex;
  width: min(100%, 720px);
  min-height: 60px;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 10px;
  padding: 0 24px;
  border-radius: var(--fable-radius);
  background: var(--fable-amber);
  color: var(--fable-on-amber);
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 140ms ease, opacity 140ms ease;
}

.fable-page .home-planner-cta:hover { background: var(--fable-amber-strong); }
.fable-page .home-planner-cta:active { opacity: .84; }
.fable-page .home-planner-note {
  width: fit-content;
  max-width: 100%;
  justify-self: center;
  margin: -14px 0 0;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--fable-surface);
  color: var(--fable-muted);
  font-size: 13px;
  text-align: center;
}

.fable-page .home-paths {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 22px;
  margin: 0;
  justify-self: center;
  padding: 2px 10px;
  border: 1px solid var(--fable-line);
  border-radius: 14px;
  background: var(--fable-surface);
  list-style: none;
}

.fable-page .home-path-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--fable-muted);
  font-size: 14px;
  font-weight: 700;
}

.fable-page .home-location-status {
  min-height: 24px;
  width: fit-content;
  max-width: 100%;
  justify-self: center;
  padding-inline: 10px;
  border-radius: 10px;
  background: var(--fable-surface);
  font-size: 14px;
  text-align: center;
}
.fable-page .home-location-status:empty { display: none; }

/* Shared wizard skin. The existing state machine, buttons and history remain authoritative. */
.fable-page .trip-flow {
  --trip-progress: 33.333%;
  min-height: 0;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  background: transparent;
}

.fable-page .trip-flow-shell {
  width: min(680px, 100%);
  gap: 28px;
  padding-top: clamp(32px, 7vw, 64px);
}

.fable-page .trip-flow-intro { gap: 14px; }
.fable-page .trip-flow-meta {
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
.fable-page .trip-flow-kicker { color: var(--fable-home-date); font-size: 15px; font-weight: 700; }
.fable-page .trip-progress { color: var(--fable-ink); font-size: 14px; font-weight: 800; }
.fable-page .trip-progress-track { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: var(--fable-line); }
.fable-page .trip-progress-track::before { display: block; width: var(--trip-progress); height: 100%; border-radius: inherit; background: var(--fable-amber); content: ""; transition: width 180ms cubic-bezier(.2, 0, 0, 1); }

.fable-page .trip-question-title,
.fable-page .trip-step h1,
.fable-page .trip-result-title,
.fable-page #tripErrorTitle {
  max-width: 15em;
  color: var(--fable-ink);
  font-size: clamp(36px, 7vw, 54px);
  letter-spacing: -.02em;
  line-height: 1.12;
}

.fable-page .trip-question-help,
.fable-page .trip-step-description,
.fable-page .trip-flow-value { color: var(--fable-muted); }

.fable-page .trip-choice-list { gap: 12px; }
.fable-page .trip-choice {
  min-height: 86px;
  padding: 18px 20px;
  border: 1px solid var(--fable-line);
  border-radius: var(--fable-radius);
  background: var(--fable-surface);
  color: var(--fable-ink);
  box-shadow: none;
}

.fable-page .trip-choice::after {
  display: grid;
  width: 32px;
  height: 32px;
  grid-column: 2;
  grid-row: 1 / span 2;
  place-items: center;
  align-self: center;
  border: 0;
  border-radius: 0;
  color: var(--fable-muted);
  content: "→";
  font-size: 24px;
  font-weight: 700;
}

.fable-page .trip-choice:has(input) { grid-template-columns: 24px minmax(0, 1fr) auto; }
.fable-page .trip-choice:has(input)::after { grid-column: 3; }

.fable-page .trip-choice:hover { border-color: var(--fable-water); background: var(--fable-water-soft); }
.fable-page .trip-choice.is-selected,
.fable-page .trip-choice[aria-pressed="true"],
.fable-page .trip-choice:has(input:checked) {
  border-color: var(--fable-water);
  background: var(--fable-water-soft);
  box-shadow: inset 0 0 0 2px var(--fable-water);
}

.fable-page .trip-choice.is-selected::after,
.fable-page .trip-choice[aria-pressed="true"]::after,
.fable-page .trip-choice:has(input:checked)::after {
  border-color: var(--fable-water);
  background: var(--fable-water);
  color: var(--fable-surface);
  content: "✓";
  font-size: 15px;
}

.fable-page .trip-choice > span { color: var(--fable-muted); }
.fable-page .trip-choice > strong { font-size: 20px; line-height: 1.35; }
.fable-page .trip-date-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fable-page .trip-date-choices .trip-choice { min-height: 92px; padding: 14px; }
.fable-page .trip-date-choices .trip-choice > strong { font-size: 17px; }
.fable-page .trip-date-choices .trip-choice > span { font-size: 12px; }
.fable-page .trip-exact-date { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.fable-page .trip-exact-date .trip-primary-button { min-height: 56px; width: auto; padding: 12px 20px; white-space: nowrap; }
.fable-page .trip-question-help strong { color: var(--fable-ink); font-weight: 800; }
@media (max-width: 480px) {
  .fable-page .trip-date-choices { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fable-page .trip-date-choices .trip-choice { min-height: 70px; padding: 12px 16px; }
  .fable-page .trip-exact-date { grid-template-columns: minmax(0, 1fr); }
  .fable-page .trip-exact-date .trip-primary-button { width: 100%; }
}
.fable-page .trip-select-field select,
.fable-page .trip-date-input,
.fable-page .trip-select-field input { min-height: 56px; border-color: var(--fable-line); border-radius: 14px; color: var(--fable-ink); }

.fable-page .trip-primary-button {
  min-height: 58px;
  border-radius: var(--fable-radius);
  background: var(--fable-amber);
  color: var(--fable-on-amber);
  font-size: 17px;
  font-weight: 800;
}

.fable-page .trip-primary-button:hover { background: var(--fable-amber-strong); filter: none; }
.fable-page .trip-secondary-button,
.fable-page .trip-back-button,
.fable-page .trip-secondary-action,
.fable-page .trip-restart-button { color: var(--fable-water); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .22em; }
.fable-page .trip-answer-chip { border: 1px solid var(--fable-line); background: var(--fable-surface-soft); color: var(--fable-ink); }

@media (max-width: 760px) {
  .fable-page .home-port-list { grid-template-columns: 1fr; }
  .fable-page .home-port-item + .home-port-item { border-top: 1px solid var(--fable-line); border-left: 0; }
  .fable-page .home-port-link { min-height: 132px; }
}

@media (max-width: 430px) {
  .fable-page .topbar {
    height: auto;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    padding-block: .375rem;
  }

  .fable-page .topbar > .brand {
    max-width: 100%;
    flex: 1 1 auto;
  }

  .fable-page .topbar-meta {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
  }

  .fable-page .home-answer {
    gap: 12px;
    padding-top: 16px;
    padding-bottom: 40px;
  }
  .fable-page .home-answer-head { gap: 4px; }
  .fable-page .home-answer-date { font-size: 14px; }
  .fable-page .home-answer h1 { font-size: clamp(38px, 11vw, 44px); }
  .fable-page .home-answer-context-row { gap: 8px; }
  .fable-page .home-answer-context { min-width: 0; font-size: 13px; }
  .fable-page .home-location-button { min-height: 44px; padding: 0 12px; font-size: 13px; }
  .fable-page .home-port-link {
    min-height: 112px;
    grid-template-areas:
      "heading mul"
      "tide tide";
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    gap: 5px 10px;
    padding: 11px 14px;
  }
  .fable-page .home-port-heading {
    display: flex;
    min-width: 0;
    grid-area: heading;
    align-items: baseline;
    gap: 8px;
  }
  .fable-page .home-port-name { font-size: 18px; }
  .fable-page .home-port-location { min-width: 0; font-size: 12px; }
  .fable-page .home-port-tide {
    display: flex;
    min-width: 0;
    grid-area: tide;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
    flex-wrap: wrap;
  }
  .fable-page .home-port-tide strong { font-size: 21px; }
  .fable-page .home-port-tide-meta { font-size: 12px; line-height: 1.35; }
  .fable-page .home-port-mul {
    grid-area: mul;
    margin: 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--fable-water-soft);
    color: var(--fable-water);
    font-size: 12px;
    line-height: 1.25;
  }
  .fable-page .home-planner-cta { min-height: 56px; font-size: 17px; }
  .fable-page .home-paths { gap: 0 14px; }
  .fable-page .home-location-status { min-height: 0; padding: 4px 0; font-size: 13px; }
  .fable-page .trip-flow-shell { gap: 20px; padding: 22px 16px 0; }
  .fable-page .trip-flow-intro { gap: 10px; }
  .fable-page .trip-step { gap: 16px; }
  .fable-page .trip-question-title,
  .fable-page .trip-step h1 { font-size: 38px; }
  .fable-page .trip-choice { min-height: 76px; padding: 13px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fable-page *,
  .fable-page *::before,
  .fable-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .fable-page {
    --fable-ink: CanvasText;
    --fable-muted: CanvasText;
    --fable-surface: Canvas;
    --fable-surface-strong: Canvas;
    --fable-surface-soft: Canvas;
    --fable-hero-surface: Canvas;
    --fable-line: CanvasText;
    --fable-water: LinkText;
    --fable-water-soft: Canvas;
    --fable-on-water: Canvas;
    --fable-amber: ButtonFace;
    --fable-amber-strong: ButtonFace;
    --fable-on-amber: ButtonText;
    --fable-current-marker: LinkText;
    --fable-focus: Highlight;
    background: Canvas;
  }

  .fable-page::before { background: Canvas; }
}

.fable-page .site-menu-links .site-policy-button { display:flex; align-items:center; width:100%; min-height:44px; padding:10px 12px; border:0; border-top:1px solid var(--fable-line); border-radius:0; background:transparent; color:var(--fable-muted); font:600 14px/1.4 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif; text-align:left; cursor:pointer; }
.fable-page .site-menu-links .site-policy-button:hover { background:var(--fable-water-soft); }

@media(max-width:420px) {
  :root .fable-page .site-header .site-brand strong,
  :root .fable-page .site-header .site-brand .brand-name { font-size:17px; }
  :root .fable-page .site-header .site-menu > summary,
  :root .fable-page .site-header .fable-display-settings > summary { min-width:54px; padding:8px 6px; gap:2px; }
  :root .fable-page .site-header .site-menu > summary::after,
  :root .fable-page .site-header .fable-display-settings > summary::after { font-size:9px; }
}
:root .fable-page .ceph-home-paths { display: block; }
.ceph-entry-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.ceph-entry-paths > a { display: flex; align-items: center; gap: 13px; min-height: 92px; padding: 16px; border: 1px solid var(--fable-line); border-radius: 15px; text-decoration: none; background: var(--fable-surface); color: var(--fable-ink); }
.ceph-entry-paths > .ceph-entry-lab { color: var(--fable-on-water); background: var(--fable-water-strong); border-color: var(--fable-water-strong); }
.ceph-entry-paths svg { flex: 0 0 36px; width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ceph-entry-paths strong { display: block; font-size: 17px; line-height: 1.4; word-break: keep-all; }
.ceph-entry-paths small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; }
.ceph-plan-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
:root .fable-page .ceph-plan-paths > a { display: flex; grid-column: auto; justify-self: stretch; width: auto; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 9px 5px; border: 0; border-radius: 8px; background: transparent; color: var(--fable-water-strong); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.ceph-entry-paths > a:hover { box-shadow: 0 0 0 2px var(--fable-water); }
.ceph-entry-paths > a:focus-visible, .ceph-plan-paths > a:focus-visible { outline: 3px solid var(--fable-focus); outline-offset: 3px; }
#homePlanner { scroll-margin-top: 12px; }
@media (max-width: 520px) {
  .ceph-entry-paths { gap: 9px; }
  .ceph-entry-paths > a { flex-direction: column; align-items: flex-start; gap: 7px; min-height: 110px; padding: 13px; }
  .ceph-entry-paths svg { flex-basis: 28px; width: 28px; height: 28px; }
  .ceph-entry-paths strong { font-size: 15px; }
  .ceph-entry-paths small { font-size: 12px; }
}

/* Site-wide reading system. Data, action and supporting evidence have separate roles. */
:root .fable-page {
  --console-bg:#f4f6f7; --console-ink:#173341; --console-accent:#005f73;
  --sat-ink:#2563c9; --sun-ink:#b73527; --alert-ink:#a3441b;
  --fable-ink:var(--console-ink); --fable-text:var(--console-ink); --fable-muted:#526773;
  --fable-line:#cbd6db; --fable-surface:#fff; --fable-surface-strong:#fff; --fable-surface-soft:#eaf0f2;
  --fable-hero-surface:var(--fable-surface); --fable-water:var(--console-accent); --fable-water-strong:var(--console-accent);
  --fable-water-soft:#e1eff1; --fable-on-water:#fff; --fable-focus:var(--console-accent); --fable-radius:12px; --fable-shadow:none;
  --canvas:var(--console-bg); --paper:var(--fable-surface); --paper-soft:var(--fable-surface-soft);
  --ink:var(--console-ink); --muted:var(--fable-muted); --faint:var(--fable-muted); --rule:var(--fable-line); --rule-strong:#849ca7;
  --tide:var(--console-accent); --tide-strong:var(--console-accent); --on-tide:var(--fable-on-water); --focus-ring:var(--console-accent);
  --bg:var(--console-bg); --surface:var(--fable-surface); --surface-soft:var(--fable-surface-soft);
  --text-primary:var(--console-ink); --text-secondary:var(--fable-muted); --text-tertiary:var(--fable-muted);
  --border:var(--fable-line); --border-strong:#849ca7; --focus:var(--console-accent); --nav-active:var(--console-accent);
  --selected:var(--fable-water-soft); --accent-ink:var(--console-accent); --accent-line:var(--console-accent); --accent-line-soft:var(--fable-line);
  --accent-surface:var(--fable-water-soft); --accent-surface-soft:var(--fable-water-soft); --control-on-accent:var(--fable-on-water);
  --glass:var(--fable-surface); --glass-strong:var(--fable-surface); --shadow:none;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  color:var(--console-ink); background:var(--console-bg); font-size:16px; line-height:1.6;
}
:root[data-fable-scheme="dark"] .fable-page {
  --console-bg:#101e27; --console-ink:#edf4f7; --console-accent:#81d8e3; --fable-muted:#b3c6cf;
  --sat-ink:#6aa7ff; --sun-ink:#ff7566; --alert-ink:#ff9a69;
  --fable-line:#3d5663; --fable-surface:#192f3b; --fable-surface-strong:#203b49; --fable-surface-soft:#243e4b;
  --fable-water-soft:#234551; --fable-on-water:#10252f; --border-strong:#7e9aa8; --rule-strong:#7e9aa8;
}
:root .fable-page::before { background:var(--console-bg); }
:root .fable-page :is(button,input,select,summary) { accent-color:var(--console-accent); }
:root .fable-page :is(a,button,input,select,summary):focus-visible { outline:3px solid var(--console-accent); outline-offset:3px; }
:root .fable-page :is(h1,h2,h3,p,li,dd,dt,button,summary) { overflow-wrap:break-word; }
:root .fable-page :is(h1,h2,h3) { text-wrap:pretty; }
:root .fable-page :is(time,[data-tide-answer],.sea-metric,.calendar-date) { font-variant-numeric:tabular-nums; }

:root .fable-page :is(.fable-shell,.app-shell) { width:min(1120px,100%); margin-inline:auto; padding-inline:clamp(16px,3vw,32px); }
:root .fable-page .site-header { width:100%; max-width:100%; min-height:64px; padding:8px 0; margin:0; border:0; border-bottom:1px solid var(--fable-line); border-radius:0; background:var(--console-bg); box-shadow:none; backdrop-filter:none; }
:root .fable-page .site-header .site-brand { gap:8px; padding:0; font-size:1.125rem; }
:root .fable-page .site-header .site-brand img { width:28px; height:28px; flex:0 0 28px; object-fit:contain; border-radius:6px; }
:root .fable-page :is(.site-menu>summary,.fable-display-settings>summary) { min-height:44px; padding:8px 12px; border:1px solid var(--fable-line); border-radius:8px; background:var(--fable-surface); font-size:.875rem; }
:root .fable-page .site-menu-links { background:var(--fable-surface); border:1px solid var(--fable-line); border-radius:12px; max-height:70vh; overflow:auto; }
:root .fable-page .site-menu-links a { min-height:44px; font-size:.9375rem; line-height:1.5; }
.site-release-version { margin:0; padding:8px 12px; font-size:.8125rem; color:var(--fable-muted); }
:root .fable-page .page-head { margin:20px 0 16px; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
:root .fable-page .page-head h1 { font-size:clamp(1.5rem,3vw,2rem); line-height:1.35; letter-spacing:-.025em; }
:root .fable-page .page-head .sub { margin:8px 0 0; font-size:1rem; line-height:1.7; color:var(--fable-muted); }
:root .fable-page .home-planner { margin-top:16px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
:root .fable-page .hp-canvas-date { margin-block:4px 12px; }
:root .fable-page .hp-disclosure { margin:0; padding:0; border:0; border-bottom:1px solid var(--fable-line); background:transparent; box-shadow:none; border-radius:0; }
:root .fable-page .hp-disclosure>summary { min-height:48px; padding:10px 0; font-size:.9375rem; }
:root .fable-page .hp-disclosure[open] { padding-bottom:12px; }
:root .fable-page .hp-actions { display:flex; flex-wrap:wrap; gap:8px; margin-block:16px; }
:root .fable-page .hp-actions :is(a,button) { min-height:44px; font-size:.9375rem; }
:root .fable-page .hp-calendar-section { margin-top:24px; padding:0; }
:root .fable-page .hp-calendar button { border:0; border-radius:8px; background:var(--fable-surface); }
:root .fable-page .hp-calendar .is-selected button { outline:2px solid var(--console-accent); outline-offset:-2px; background:var(--fable-water-soft); color:var(--console-ink); }
:root .fable-page .hp-calendar button:hover { background:var(--fable-water-soft); }
:root .fable-page .hp-today { color:var(--console-accent); background:transparent; }
:root .fable-page :is(.pathways,.ports-section) { display:block; padding:24px 0 0; margin-top:24px; border:0; border-top:1px solid var(--fable-line); background:transparent; box-shadow:none; }
:root .fable-page :is(.pathway-list,.port-grid) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }
:root .fable-page .directory-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0; border-bottom:1px solid var(--fable-line); }
:root .fable-page .directory-row>a { display:flex; align-items:center; min-height:56px; padding:10px 0; border:0; background:transparent; box-shadow:none; }
.route-evidence { display:contents; }
.route-evidence>summary { align-self:start; min-height:56px; padding:8px; font-size:.875rem; }
.route-evidence>p { grid-column:1/-1; max-width:66ch; margin:0; padding:0 0 16px; color:var(--fable-muted); }
:root .fable-page .home-port-list { display:block; border:0; border-radius:0; background:transparent; }
:root .fable-page .home-port-item { border:0; border-bottom:1px solid var(--fable-line); border-radius:0; background:transparent; }
:root .fable-page .home-port-link { min-height:64px; padding:12px 0; background:transparent; }
:root .fable-page .home-port-evidence>summary { display:flex; align-items:center; min-height:44px; font-size:.875rem; }
:root .fable-page .home-port-evidence p { color:var(--fable-muted); font-size:.9375rem; }
:root .fable-page .port-evidence-details { margin-top:16px; border-top:1px solid var(--fable-line); }
:root .fable-page :is(.port-evidence-details,.route-evidence)>summary { color:var(--fable-water); min-height:44px; cursor:pointer; }
.journey-ready .bottom-nav,
.journey-ready:not([data-home-mode="entry-atlas"]) .ceph-home-paths { display:none !important; }
.journey-context[hidden] { display:none; }
.journey-context { display:flex; flex-wrap:wrap; align-items:center; gap:0 16px; min-height:44px; margin:0 0 12px; border-bottom:1px solid var(--fable-line); }
.journey-return { display:inline-flex; align-items:center; min-height:44px; color:var(--fable-water); font-size:.9375rem; font-weight:600; text-decoration:none; }
.journey-location { color:var(--fable-muted); font-size:.875rem; line-height:1.5; padding-block:6px; overflow-wrap:anywhere; }
.journey-tabs { position:fixed; z-index:30; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:4px max(8px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)); border-top:1px solid var(--fable-line); background:var(--fable-surface); }
.journey-tabs a { min-height:56px; min-width:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; padding:4px 2px; border-radius:8px; text-decoration:none; color:var(--fable-muted); font-size:.875rem; font-weight:600; }
.journey-tabs svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.journey-tabs a[aria-current="page"] { background:var(--fable-water-soft); color:var(--fable-water); }
body.journey-ready { padding-bottom:calc(5rem + env(safe-area-inset-bottom)); }
:root .fable-page.journey-ready .site-header { position:relative; z-index:35; }
.reading-next { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:20px 0; margin:24px 0 0; border-top:2px solid var(--fable-line); }
.reading-next>h2 { grid-column:1/-1; margin:0; font-size:1rem; }
.reading-next>a { display:flex; flex-direction:column; gap:4px; min-height:68px; padding:12px; border:1px solid var(--fable-line); border-radius:10px; background:var(--fable-surface); color:var(--fable-ink); text-decoration:none; }
.reading-next>a strong { color:var(--fable-water); font-size:1rem; }
.reading-next>a span { font-size:.875rem; color:var(--fable-muted); }
.reading-toc { display:flex; flex-wrap:wrap; gap:4px 16px; padding:12px 0; margin:0 0 16px; border-block:1px solid var(--fable-line); }
.reading-toc a { display:flex; min-height:44px; align-items:center; font-size:.9375rem; color:var(--fable-water); }
.reading-toc-label { flex-basis:100%; font-size:.8125rem; color:var(--fable-muted); }
@media(min-width:960px) {
  .journey-tabs { position:static; width:100%; border:0; border-bottom:1px solid var(--fable-line); padding:4px 0; background:transparent; }
  .journey-tabs a { flex-direction:row; gap:8px; min-height:48px; font-size:1rem; }
  body.journey-ready { padding-bottom:0; }
  .journey-context { margin-bottom:20px; }
}
@media(max-width:600px) {
  :root .fable-page :is(.pathway-list,.port-grid) { grid-template-columns:minmax(0,1fr); }
  :root .fable-page .site-header .site-brand :is(.brand-descriptor,.site-descriptor,.brand-tag) { display:none; }
  .reading-next { gap:8px; }
  .reading-next>a { padding:10px; }
}
@media(max-width:360px) {
  .journey-tabs a { font-size:.8125rem; }
  .reading-next { grid-template-columns:minmax(0,1fr); }
}
@media(forced-colors:active) {
  :root .fable-page { --console-bg:Canvas; --console-ink:CanvasText; --console-accent:LinkText; --fable-muted:CanvasText; --fable-line:CanvasText; --fable-surface:Canvas; --fable-surface-soft:Canvas; --fable-water-soft:Canvas; }
  .journey-tabs a[aria-current="page"] { outline:2px solid Highlight; }
}

/* Shared web actions and disclosures retain native semantics and one visual scale. */
:root .fable-page #candidateComparison { display:block; min-width:0; padding:12px; border:1px solid var(--fable-line); border-radius:10px; background:var(--fable-surface); }
:root .fable-page #candidateComparison > summary { min-height:44px; padding:0; font-size:1rem; gap:8px; }
:root .fable-page #candidateComparison .candidate-common > summary { min-height:44px; font-size:.875rem; }
:root .fable-page #selectedDayPanel .primary-button { background:var(--fable-water); color:var(--fable-on-water); border-color:var(--fable-water); font-size:1rem; min-height:48px; }
:root .fable-page #selectedDayPanel :is(.selected-day-temperature small,.selected-day-action small,.selected-day-storage-note) { max-width:none; font-size:.875rem; line-height:1.6; }
:root .fable-page #selectedDayPanel .selected-day-temperature span { font-size:.875rem; }
:root .fable-page .home-port-tide { display:block; }
:root .fable-page .home-port-tide-basis { display:block; margin-top:4px; font-size:.875rem; line-height:1.55; color:var(--fable-muted); font-weight:400; }

/* Minimal Modern 0.6: one blue accent, white reading surfaces, open spacing. */
:root body.fable-page { --mm-bg:#f7f9fc; --mm-paper:#fff; --mm-soft:#edf4ff; --mm-ink:#14243b; --mm-muted:#52647a; --mm-line:#dce5f0; --mm-blue:#175cdb; --mm-on-blue:#fff; --mm-radius:20px; --console-bg:var(--mm-bg); --console-ink:var(--mm-ink); --console-accent:var(--mm-blue); --fable-ink:var(--mm-ink); --fable-text:var(--mm-ink); --fable-muted:var(--mm-muted); --fable-surface:var(--mm-paper); --fable-surface-strong:var(--mm-paper); --fable-surface-soft:var(--mm-soft); --fable-line:var(--mm-line); --fable-water:var(--mm-blue); --fable-water-strong:var(--mm-blue); --fable-water-soft:var(--mm-soft); --fable-on-water:var(--mm-on-blue); --fable-focus:var(--mm-blue); --border-strong:#8296b0; --rule-strong:#8296b0; --radius-sm:12px; --radius-md:20px; --radius-lg:24px; color:var(--mm-ink); background:var(--mm-bg); }
:root[data-fable-scheme="dark"] body.fable-page { --mm-bg:#0e1726; --mm-paper:#172439; --mm-soft:#203454; --mm-ink:#eff5ff; --mm-muted:#b8c8dc; --mm-line:#344760; --mm-blue:#94beff; --mm-on-blue:#10203a; }
:root body.fable-page :is(.fable-shell,.app-shell) { width:min(1184px,100%); padding-inline:clamp(18px,3vw,32px); }
:root body.fable-page .site-header { min-height:76px; border:0; background:transparent; }
:root body.fable-page .site-header .site-brand { font-size:1.65rem; font-weight:800; letter-spacing:-.025em; gap:9px; color:var(--mm-ink); }
:root body.fable-page .site-header .site-brand img { width:34px; height:34px; flex-basis:34px; border-radius:10px; }
:root body.fable-page :is(.site-menu>summary,.fable-display-settings>summary) { border:0; background:var(--mm-paper); border-radius:12px; font-size:.875rem; min-width:48px; min-height:48px; }
:root body.fable-page :is(.site-menu-links,.fable-display-settings[open]) { border-color:var(--mm-line); box-shadow:0 12px 36px #091d3812; }
:root body.fable-page .journey-context { border:0; margin-block:0 16px; }
:root body.fable-page .journey-tabs { border-top:1px solid var(--mm-line); background:var(--mm-paper); padding-top:6px; padding-bottom:calc(6px + env(safe-area-inset-bottom)); }
:root body.fable-page .journey-tabs a { border-radius:14px; font-size:.8125rem; min-height:56px; gap:4px; }
:root body.fable-page .journey-tabs a[aria-current="page"] { color:var(--mm-blue); background:var(--mm-soft); box-shadow:inset 0 -2px var(--mm-blue); }
:root body.fable-page .journey-tabs svg { stroke-width:1.8; }
:root body.fable-page :is(h1,h2,h3) { color:var(--mm-ink); letter-spacing:-.025em; }
:root body.fable-page .page-head { margin-top:20px; }
:root body.fable-page .page-head h1 { font-size:clamp(1.6rem,3vw,2.25rem); font-weight:800; }
:root body.fable-page .home-planner { margin-top:8px; }
:root body.fable-page .hp-heading { padding:8px 0 12px; margin:0; border:0; gap:12px; }
:root body.fable-page .hp-heading :is(h1,h2) { font-size:clamp(1.75rem,3.2vw,2.5rem); font-weight:800; line-height:1.25; }
:root body.fable-page .hp-heading .hp-mascot { display:none; }
:root body.fable-page .hp-heading :is(.hp-eyebrow,#homeSelectedArea) { color:var(--mm-muted); font-size:.875rem; margin-top:6px; }
:root body.fable-page #homePortPicker { border:0; border-radius:10px; background:var(--mm-soft); color:var(--mm-blue); min-height:44px; padding:8px 12px; }
:root body.fable-page .home-location-button { border:1px solid var(--mm-line); border-radius:50%; min-width:48px; min-height:48px; background:var(--mm-paper); color:var(--mm-muted); }
:root body.fable-page .hp-canvas-date { padding:0; margin:0 0 18px; align-items:center; }
:root body.fable-page .hp-canvas-date h2 { font-size:1rem; line-height:1.5; letter-spacing:-.025em; }
:root body.fable-page .hp-canvas-date > strong { background:var(--mm-blue); color:var(--mm-on-blue); padding:6px 12px; border-radius:999px; font-size:.875rem; }
:root body.fable-page [data-minimal-modern] { display:flex; flex-direction:column; gap:16px; }
:root body.fable-page .mm-tide-core { min-width:0; padding:20px; background:var(--mm-paper); border:1px solid var(--mm-line); border-radius:24px; }
:root body.fable-page .hp-tide-answer { padding:20px; border:1px solid var(--mm-line); border-radius:20px; background:var(--mm-paper); box-shadow:none; }
:root body.fable-page .mm-tide-core .hp-tide-answer { padding:0 0 16px; border:0; border-radius:0; }
:root body.fable-page .hp-answer-heading { margin-bottom:16px; gap:8px; }
:root body.fable-page .hp-answer-heading h3 { color:var(--mm-muted); font-size:.875rem; font-weight:600; letter-spacing:0; }
:root body.fable-page .hp-answer-heading > p { padding:4px 8px; border-radius:8px; background:var(--mm-soft); color:var(--mm-blue); font-size:.8125rem; }
:root body.fable-page .hp-tide-answer .hp-events { gap:20px; margin:0; }
:root body.fable-page .hp-tide-answer .hp-extreme { padding:0; }
:root body.fable-page .hp-tide-answer .hp-extreme + .hp-extreme { padding-left:20px; border-left:1px solid var(--mm-line); }
:root body.fable-page .hp-tide-answer dt { color:var(--mm-blue); font-size:.875rem; gap:6px; margin:0 0 8px; }
:root body.fable-page .hp-tide-answer .hp-events dd > span { gap:6px; margin-block:5px; line-height:1.25; }
:root body.fable-page .hp-tide-answer time { font-size:clamp(1.5rem,3.2vw,2rem); letter-spacing:-.025em; line-height:1.25; font-weight:700; }
:root body.fable-page .hp-tide-answer .hp-events small { color:var(--mm-muted); font-size:.875rem; font-weight:500; }
:root body.fable-page .hp-answer-basis { margin:14px 0 0; padding:0; color:var(--mm-muted); font-size:.875rem; line-height:1.6; }
:root body.fable-page .mm-tide-core .ptl-home-canvas { margin:0; padding:0; border:0; background:transparent; border-radius:0; }
:root body.fable-page .ptl-home-canvas .ptl-canvas-toolbar { margin:0; padding:10px 0 0; border-top:1px solid var(--mm-line); }
:root body.fable-page .ptl-home-canvas .ptl-now { border-radius:10px; background:var(--mm-soft); color:var(--mm-blue); }
:root body.fable-page .ptl-home-canvas .ptl-controls { gap:8px; }
:root body.fable-page .ptl-home-canvas .ptl-clock summary time { font-size:1.125rem; }
:root body.fable-page .ptl-home-canvas .ptl-stage { padding-top:0; }
:root body.fable-page .ptl-home-canvas .ptl-lane-tide > header { padding-top:0; min-height:40px; }
:root body.fable-page .ptl-home-canvas .ptl-area { fill:var(--mm-blue); opacity:.09; }
:root body.fable-page .ptl-home-canvas .ptl-curve { stroke:var(--mm-blue); stroke-width:2.5; }
:root body.fable-page .ptl-home-canvas .ptl-pin { stroke:var(--mm-blue); stroke-dasharray:3 4; }
:root body.fable-page .ptl-home-canvas .ptl-pin-dot { fill:var(--mm-blue); stroke:var(--mm-paper); stroke-width:2; }
:root body.fable-page .ptl-home-canvas .ptl-night { fill:var(--mm-muted); opacity:.04; }
:root body.fable-page .ptl-home-canvas .ptl-canvas-caption:empty { display:none; }
:root body.fable-page .ptl-home-canvas .hp-canvas-golden { border:0; border-radius:12px; background:var(--mm-soft); padding:12px; margin-top:12px; }
:root body.fable-page .ptl-home-canvas .hp-canvas-golden h3 { font-size:.875rem; }
:root body.fable-page .mm-almanac { min-width:0; padding:0; }
:root body.fable-page .mm-almanac > h3 { font-size:1rem; margin:2px 0 12px; }
:root body.fable-page .mm-almanac dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; }
:root body.fable-page .mm-almanac dl > div { position:relative; min-width:0; background:var(--mm-paper); padding:16px 10px; border:1px solid var(--mm-line); border-radius:16px; }
:root body.fable-page .mm-almanac svg { color:var(--mm-blue); width:22px; height:22px; margin-bottom:10px; }
:root body.fable-page .mm-almanac dt { color:var(--mm-muted); font-size:.875rem; margin:0 0 4px; }
:root body.fable-page .mm-almanac dd { font-size:1.125rem; font-weight:700; color:var(--mm-ink); margin:0; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
:root body.fable-page .mm-almanac small { display:block; font-size:.8125rem; color:var(--mm-muted); margin-top:4px; line-height:1.5; word-break:keep-all; }
:root body.fable-page .sea-overview-empty { background:var(--mm-soft); border:0; padding:16px; border-radius:16px; }
:root body.fable-page .sea-overview-empty > strong { font-size:.9375rem; }
:root body.fable-page .sea-metric { background:var(--mm-paper); border:1px solid var(--mm-line); border-radius:16px; box-shadow:none; }
:root body.fable-page .hp-canvas-more { padding:0 4px; }
:root body.fable-page .hp-actions { gap:8px; margin:20px 0; }
:root body.fable-page .hp-actions > :is(button,a) { min-height:48px; padding:12px 16px; border:1px solid var(--mm-line); border-radius:12px; background:var(--mm-paper); font-size:.875rem; text-decoration:none; }
:root body.fable-page .hp-actions > a { background:var(--mm-blue); color:var(--mm-on-blue); border-color:var(--mm-blue); }
:root body.fable-page .hp-calendar-section { margin-top:28px; padding:24px 0; border-top:1px solid var(--mm-line); }
:root body.fable-page .hp-calendar { border-spacing:5px; border-collapse:separate; }
:root body.fable-page .hp-calendar button { min-height:54px; background:var(--mm-paper); }
:root body.fable-page .home-port-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
:root body.fable-page .home-port-item { padding:16px; background:var(--mm-paper); border:1px solid var(--mm-line); border-radius:18px; min-width:0; }
:root body.fable-page .home-port-link { padding:0 0 8px; }
:root body.fable-page .home-port-name { font-size:1.125rem; }
:root body.fable-page .home-port-tide > strong { color:var(--mm-blue); }
:root body.fable-page .home-port-evidence > summary { padding:0; }
:root body.fable-page :is(.pathways,.ports-section) { margin-top:32px; padding-top:24px; border-color:var(--mm-line); }
:root body.fable-page .directory-row { border:0; padding:4px 0; }
:root body.fable-page .directory-row > a { border-bottom:1px solid var(--mm-line); font-size:1rem; }
:root body.fable-page .reading-next { border:0; padding:24px 0; gap:12px; }
:root body.fable-page .reading-next > a { border-radius:16px; border-color:var(--mm-line); min-height:88px; }
:root body.fable-page .calendar-header { margin-top:12px; }
:root body.fable-page .calendar-view .port-switcher { border:0; padding-bottom:16px; }
:root body.fable-page #candidateComparison { padding:16px; border:1px solid var(--mm-line); border-radius:20px; background:var(--mm-paper); }
:root body.fable-page #candidateComparison > summary { min-height:48px; }
:root body.fable-page .calendar-view .calendar-month-controls { gap:8px; margin-block:16px; }
:root body.fable-page .calendar-view .calendar-month-controls :is(button,select) { border-color:var(--mm-line); border-radius:12px; background:var(--mm-paper); min-height:48px; }
:root body.fable-page .calendar-view .calendar-day { border-radius:14px; background:var(--mm-paper); min-height:96px; padding:10px 4px; }
:root body.fable-page .calendar-view .calendar-day.is-selected { background:var(--mm-soft); border-color:var(--mm-blue); box-shadow:inset 0 0 0 1px var(--mm-blue); }
:root body.fable-page .calendar-view .calendar-date { font-size:1.25rem; font-weight:700; letter-spacing:-.025em; }
:root body.fable-page .calendar-view .calendar-grid { row-gap:8px; }
:root body.fable-page .calendar-view .selected-day-panel { border:1px solid var(--mm-line); border-radius:24px; padding:24px; background:var(--mm-paper); }
:root body.fable-page .selected-day-close { background:var(--mm-soft); border:0; border-radius:50%; }
:root body.fable-page .selected-day-copy h2 { font-size:1.65rem; letter-spacing:-.025em; }
:root body.fable-page .candidate-table th { color:var(--mm-muted); }
:root body.fable-page .candidate-table :is(th,td) { padding:16px 10px; border-color:var(--mm-line); }
:root body.fable-page .candidate-table thead th:not(:first-child) { background:var(--mm-soft); border-radius:12px 12px 0 0; }
:root body.fable-page .candidate-table time { color:var(--mm-ink); font-size:1rem; font-weight:700; }
:root body.fable-page .candidate-table .candidate-remove { min-height:44px; color:var(--mm-muted); }
:root body.fable-page .ports-view .port-list-row { padding:18px; border:1px solid var(--mm-line); border-radius:16px; margin-block:8px; background:var(--mm-paper); }
:root body.fable-page .ports-view .port-row-head strong { font-size:1.125rem; }
:root body.fable-page .port-list-row.is-reference { border-color:var(--mm-blue); background:var(--mm-soft); }
:root body.fable-page .fable-port-hero { background:transparent; border:0; box-shadow:none; padding:20px 0; }
:root body.fable-page .fable-port-grid { gap:24px; }
:root body.fable-page .fable-port-main { min-width:0; }
:root body.fable-page .reading-toc { border:0; border-radius:16px; padding:16px; background:var(--mm-paper); }
:root body.fable-page .reading-toc a { font-size:.9375rem; }
:root body.fable-page .fable-guide-content { max-width:72ch; }
@media (min-width:960px) { :root body.fable-page .journey-tabs { border:0; background:transparent; margin-bottom:20px; padding:4px 0; gap:8px; } :root body.fable-page .journey-tabs a { min-height:48px; justify-content:center; font-size:.9375rem; } :root body.fable-page [data-minimal-modern] { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr); gap:20px 24px; } :root body.fable-page [data-minimal-modern] > .hp-canvas-date { grid-column:1/-1; } :root body.fable-page .mm-tide-core { grid-column:1; grid-row:2/6; padding:28px; } :root body.fable-page [data-minimal-modern] > :is(.mm-almanac,.sea-overview-empty,.sea-overview,.hp-canvas-more) { grid-column:2; } :root body.fable-page [data-minimal-modern] > .hp-canvas-more { grid-column:2; } }
@media (max-width:959px) { :root body.fable-page .home-port-list { grid-template-columns:1fr; } :root body.fable-page .mm-tide-core { padding:18px; } :root body.fable-page [data-minimal-modern] > .hp-canvas-date { margin-bottom:0; } }
@media (max-width:380px) { :root body.fable-page :is(.fable-shell,.app-shell) { padding-inline:16px; } :root body.fable-page .mm-tide-core { padding:14px; border-radius:20px; } :root body.fable-page .hp-tide-answer .hp-events { gap:12px; } :root body.fable-page .hp-tide-answer .hp-extreme + .hp-extreme { padding-left:12px; } :root body.fable-page .hp-tide-answer .hp-events dd > span { flex-direction:column; gap:2px; } :root body.fable-page .hp-tide-answer time { font-size:1.5rem; } :root body.fable-page .mm-almanac dl { gap:6px; } :root body.fable-page .mm-almanac dl > div { padding:12px 8px; } }
@media (prefers-reduced-motion:reduce) { :root body.fable-page :is(.calendar-day,.journey-tabs a,.site-brand,.hp-tide-answer) { transition:none; animation:none; } }
/* The tackle lesson becomes an annotated technical sheet; its geometry and playback remain unchanged. */
:root body.fable-page .mm-rig-heading { border:0; padding:0; background:transparent; margin:8px 0 20px; }
:root body.fable-page .mm-section-kicker { color:var(--mm-blue); font-size:.875rem; font-weight:700; margin:0 0 6px; }
:root body.fable-page .mm-rig-heading h2 { margin:0 0 20px; font-size:clamp(1.5rem,3vw,2rem); font-weight:800; }
:root body.fable-page .rig-topic-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; }
:root body.fable-page .rig-topic-tabs button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:80px; padding:10px 6px; border:1px solid var(--mm-line); background:var(--mm-paper); border-radius:14px; color:var(--mm-muted); font-size:.875rem; line-height:1.4; word-break:keep-all; }
:root body.fable-page .rig-topic-tabs button[aria-pressed="true"] { background:var(--mm-blue); color:var(--mm-on-blue); border-color:var(--mm-blue); box-shadow:none; }
:root body.fable-page .rig-topic-tabs svg { width:24px; height:24px; }
:root body.fable-page .rig-stage { align-items:start; gap:24px; }
:root body.fable-page .rig-stage > figure { border:1px solid var(--mm-line); border-radius:22px; background:var(--mm-paper); padding:16px; margin:0; }
:root body.fable-page .rig-scene { border:0; background:var(--mm-paper); border-radius:12px; }
:root body.fable-page .rig-water { fill:var(--mm-paper); }
:root body.fable-page .rig-seabed { fill:var(--mm-soft); }
:root body.fable-page .rig-seabed-rule { stroke:var(--mm-line); stroke-width:1.5; }
:root body.fable-page .rig-depth-guide { stroke:var(--mm-line); stroke-width:1; stroke-dasharray:4 5; }
:root body.fable-page .rig-line { stroke:var(--mm-blue); stroke-width:2.5; }
:root body.fable-page .rig-labels text { fill:var(--mm-ink); font-size:16px; font-weight:600; }
:root body.fable-page .rig-labels path { stroke:var(--mm-muted); stroke-width:1; }
:root body.fable-page .rig-sinker { fill:var(--mm-line); stroke:var(--mm-ink); stroke-width:1.8; }
:root body.fable-page .rig-kind-switch { background:var(--mm-soft); border:0; border-radius:12px; padding:0 12px; margin:0 0 8px; }
:root body.fable-page .rig-kind-switch > summary { min-height:48px; font-size:.875rem; color:var(--mm-blue); }
:root body.fable-page .rig-kind-options button { border-radius:10px; min-height:44px; }
:root body.fable-page .rig-copy { border:0; padding:16px 0; }
:root body.fable-page .rig-phase { color:var(--mm-blue); font-size:1.125rem; font-weight:700; margin:0 0 8px; }
:root body.fable-page .rig-sentence { color:var(--mm-ink); font-size:1rem; line-height:1.75; }
:root body.fable-page .rig-playback button { border-radius:12px; min-height:48px; font-size:1rem; }
:root body.fable-page .rig-sources { border:0; border-top:1px solid var(--mm-line); padding-top:12px; margin-top:16px; }
:root body.fable-page .rig-stage figcaption { color:var(--mm-muted); font-size:.875rem; text-align:left; padding:10px 4px 0; }
@media (max-width:380px) { :root body.fable-page .rig-topic-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } :root body.fable-page .rig-topic-tabs button { min-height:56px; flex-direction:row; } :root body.fable-page .rig-stage > figure { padding:8px; } }

/* Compact factual header; source details disclose metadata, never freshness warnings. */
:root body.fable-page .site-header { min-height:64px; }
:root body.fable-page .hp-heading { padding:4px 0; }
:root body.fable-page .hp-heading .hp-port-title { gap:8px; }
:root body.fable-page .hp-tide-answer :is(time,dd) { font-family:inherit; }
:root body.fable-page .hp-tide-answer .hp-events dd { gap:6px; }
:root body.fable-page .hp-tide-answer .hp-events dd > span { margin:0; }
:root body.fable-page .hp-answer-heading { margin-bottom:12px; }
:root body.fable-page .hp-answer-source { margin-top:12px; border:0; padding:0; background:transparent; }
:root body.fable-page .hp-answer-source > summary { min-height:40px; display:flex; align-items:center; gap:6px; color:var(--mm-muted); font-size:.875rem; cursor:pointer; list-style:none; }
:root body.fable-page .hp-answer-source > summary svg { width:16px; height:16px; flex-shrink:0; }
:root body.fable-page .hp-answer-source > summary::marker { content:""; }
:root body.fable-page .hp-answer-source > .hp-answer-basis { margin:0 0 8px; }
:root body.fable-page .hp-answer-state { color:var(--mm-muted); font-size:.875rem; margin:4px 0 0; }
:root body.fable-page .ptl-home-canvas .ptl-clock summary small { display:none; }
:root body.fable-page .ptl-home-canvas .ptl-clock summary time { font-family:inherit; }
:root body.fable-page .ptl-home-canvas .ptl-lane-tide h3 small { display:inline; margin-left:6px; }
:root body.fable-page .ptl-home-canvas .ptl-lane-tide .ptl-value { flex-direction:row; gap:4px; align-items:baseline; }

:root body.fable-page .site-brand > :is(span,strong):not(.brand-tag):not(.brand-descriptor):not(.site-descriptor) { font-size:inherit; font-weight:inherit; letter-spacing:inherit; }
:root body.fable-page .mm-tide-core { padding:16px; }
:root body.fable-page .mm-tide-core .hp-tide-answer { padding-bottom:8px; }
:root body.fable-page .mm-tide-core .ptl-canvas-toolbar { padding-top:0; }
:root body.fable-page .hp-answer-source > summary { min-height:44px; }
:root body.fable-page :is(time,.candidate-value-line,.ptl-value strong) { font-family:inherit; }

:root body.fable-page .candidate-range { color:var(--mm-muted); background:transparent; border:0; }
:root body.fable-page .squid-grade { color:var(--mm-ink); background:var(--mm-soft); border-color:var(--mm-line); }
:root body.fable-page .squid-grade :is(b,small) { color:inherit; }
:root body.fable-page .squid-grade small { font-size:.875rem; }

/* Five user-requested destinations: data is a read-only operational view. */
:root body.fable-page[data-site-identity] nav[data-journey-tabs] { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:380px) { :root body.fable-page[data-site-identity] nav[data-journey-tabs] a { font-size:.75rem; padding-inline:0; } }

/* Persistent primary routes. fable-sky injects this rail on static and SSR pages. */
:root body.fable-page[data-ocean-site] .site-primary-nav {
  display:flex; flex:1 1 auto; align-items:center; justify-content:center; gap:4px; min-width:0; max-width:720px;
  margin-inline:auto; padding:4px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin;
}
:root body.fable-page[data-ocean-site] .site-primary-nav a {
  display:flex; flex:0 0 auto; align-items:center; justify-content:center; min-height:42px; padding:8px 12px;
  border-radius:999px; color:var(--os-muted); font-size:14px; font-weight:750; text-decoration:none; white-space:nowrap;
}
:root body.fable-page[data-ocean-site] .site-primary-nav a:is(:hover,[aria-current="page"]) { color:var(--os-ink); background:var(--os-selected); }
:root body.fable-page[data-ocean-site] .site-primary-nav a[aria-current="page"] { box-shadow:inset 0 0 0 1px var(--os-blue); }
@media(min-width:960px) {
  :root body.fable-page[data-ocean-site] .journey-tabs { display:none; }
}
@media(max-width:860px) {
  :root body.fable-page[data-ocean-site] .site-primary-nav { order:3; flex-basis:100%; justify-content:flex-start; width:100%; max-width:100%; margin:0; padding-inline:0; }
  :root body.fable-page[data-ocean-site] .site-primary-nav a { min-height:44px; padding:7px 11px; font-size:13px; }
}
@media(max-width:350px) {
  :root body.fable-page[data-ocean-site] .site-primary-nav {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; overflow:visible;
  }
  :root body.fable-page[data-ocean-site] .site-primary-nav a {
    width:100%; min-width:0; padding:5px 4px; font-size:12px;
  }
}