/* Ocean v1: one final visual contract for every public route. No data, scores or map transforms. */
:root { --fable-theme-color:#061a30; }
:root[data-fable-appearance="light"] { --fable-theme-color:#edf4fb; }
:root body.fable-page[data-site-identity][data-ocean-site] {
 --os-bg:#061a30; --os-panel:#0a263f; --os-raised:#113451; --os-soft:#123b5b;
 --os-line:#315775; --os-ink:#edf5ff; --os-muted:#b9cee3; --os-blue:#91caff;
 --os-action:#8ac6ff; --os-on-action:#06223e; --os-selected:#163f62; --os-gold:#ffd195;
 --os-warn:#ffe0af; --os-warn-bg:#392d22; --os-success:#a8e5cf; --os-success-bg:#143a36;
 --os-radius:18px; --os-width:1408px; --os-gap:24px;
}
:root[data-fable-appearance="light"] body.fable-page[data-site-identity][data-ocean-site] {
 --os-bg:#edf4fb; --os-panel:#ffffff; --os-raised:#f4f8fc; --os-soft:#e1edf8;
 --os-line:#bacfe1; --os-ink:#17344f; --os-muted:#45627d; --os-blue:#185e9f;
 --os-action:#175f9e; --os-on-action:#ffffff; --os-selected:#d6e9fa; --os-gold:#8c4717;
 --os-warn:#754113; --os-warn-bg:#fff0db; --os-success:#125c47; --os-success-bg:#e0f3eb;
}
:root body.fable-page[data-site-identity][data-ocean-site],
:root[data-fable-appearance] body.fable-page[data-site-identity][data-ocean-site] {
 --si-bg:var(--os-bg); --si-paper:var(--os-panel); --si-ink:var(--os-ink); --si-muted:var(--os-muted); --si-rule:var(--os-line); --si-blue:var(--os-blue); --si-soft:var(--os-soft); --si-coral:var(--os-gold); --si-coral-soft:var(--os-warn-bg);
 --si-hero:#092b49; --si-hero-ink:#edf5ff; --si-hero-muted:#bfd4e7; --si-highlight:#ffd195;
 --fable-canvas:var(--os-bg); --fable-sky-top:var(--os-bg); --fable-sky-mid:var(--os-bg); --fable-sky-bottom:var(--os-bg); --fable-text:var(--os-ink); --fable-ink:var(--os-ink); --fable-muted:var(--os-muted);
 --fable-surface:var(--os-panel); --fable-surface-strong:var(--os-raised); --fable-surface-soft:var(--os-soft); --fable-hero-surface:var(--os-panel); --fable-line:var(--os-line);
 --fable-water:var(--os-action); --fable-water-strong:var(--os-blue); --fable-water-soft:var(--os-selected); --fable-on-water:var(--os-on-action); --fable-home-date:var(--os-blue); --fable-mint:var(--os-blue);
 --fable-amber:var(--os-gold); --fable-amber-strong:var(--os-gold); --fable-on-amber:#231708; --fable-current-marker:var(--os-gold); --fable-focus:var(--os-blue); --fable-warning-ink:var(--os-warn); --fable-warning-surface:var(--os-warn-bg); --fable-shadow:0 8px 28px #00000014;
 --mm-bg:var(--os-bg); --mm-paper:var(--os-panel); --mm-ink:var(--os-ink); --mm-muted:var(--os-muted); --mm-line:var(--os-line); --mm-blue:var(--os-action); --mm-on-blue:var(--os-on-action); --mm-soft:var(--os-soft);
 --content-page:var(--os-bg); --content-ink:var(--os-ink); --content-muted:var(--os-muted); --content-surface:var(--os-panel); --content-surface-soft:var(--os-soft); --content-line:var(--os-line); --content-water:var(--os-blue); --content-caution:var(--os-warn-bg); --content-caution-ink:var(--os-warn);
 --bg:var(--os-bg); --canvas:var(--os-bg); --paper:var(--os-panel); --surface:var(--os-panel); --paper-soft:var(--os-soft); --surface-soft:var(--os-soft); --ink:var(--os-ink); --text-primary:var(--os-ink); --muted:var(--os-muted); --faint:var(--os-muted); --text-secondary:var(--os-muted); --text-tertiary:var(--os-muted);
 --border:var(--os-line); --border-strong:var(--os-line); --rule:var(--os-line); --rule-strong:var(--os-line); --tide:var(--os-action); --tide-strong:var(--os-blue); --on-tide:var(--os-on-action); --focus:var(--os-blue); --focus-ring:var(--os-blue); --nav-active:var(--os-blue); --selected:var(--os-selected); --ocean:var(--os-soft);
 --accent-ink:var(--os-blue); --accent-line:var(--os-blue); --accent-line-soft:var(--os-line); --accent-surface:var(--os-selected); --accent-surface-soft:var(--os-soft); --control-on-accent:var(--os-on-action); --glass:var(--os-panel); --glass-strong:var(--os-raised);
 --warn-ink:var(--os-warn); --warn-ink-strong:var(--os-warn); --warn-surface:var(--os-warn-bg); --warn-surface-soft:var(--os-warn-bg); --warn-line:var(--os-gold); --alert-ink:var(--os-warn); --alert-surface:var(--os-warn-bg); --info-ink:var(--os-blue); --info-surface:var(--os-soft);
 color:var(--os-ink); background:var(--os-bg); color-scheme:dark; line-height:1.65; font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif; font-variant-numeric:tabular-nums;
}
:root[data-fable-appearance="light"] body.fable-page[data-site-identity][data-ocean-site] { color-scheme:light; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.fable-shell,.app-shell) { width:min(var(--os-width),100%); max-width:var(--os-width); margin-inline:auto; padding-inline:clamp(16px,3vw,32px); background:transparent; }
:root body.fable-page[data-site-identity][data-ocean-site] .site-header { min-height:78px; margin:0; padding-block:10px; border-bottom:1px solid var(--os-line); background:transparent; }
:root body.fable-page[data-site-identity][data-ocean-site] .site-brand { color:var(--os-ink); }
:root body.fable-page[data-site-identity][data-ocean-site] .site-brand .brand-name { font-size:26px; letter-spacing:-.035em; }
:root body.fable-page[data-site-identity][data-ocean-site] .site-header :is(.site-menu,.fable-display-settings)>summary { border-radius:12px; min-width:48px; min-height:48px; background:var(--os-panel); color:var(--os-ink); }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.site-menu-links,.fable-port-links,.fable-display-settings) { color:var(--os-ink); border-color:var(--os-line); }
:root body.fable-page[data-site-identity][data-ocean-site] .journey-tabs { border:1px solid var(--os-line); background:var(--os-panel); border-radius:16px; padding:5px; gap:5px; margin-block:14px 20px; }
:root body.fable-page[data-site-identity][data-ocean-site] .journey-tabs a { color:var(--os-muted); border-radius:11px; min-height:48px; font-weight:600; }
:root body.fable-page[data-site-identity][data-ocean-site] .journey-tabs a[aria-current="page"] { background:var(--os-selected); color:var(--os-ink); box-shadow:inset 0 -3px var(--os-blue); }
:root body.fable-page[data-site-identity][data-ocean-site] .journey-context { padding:10px 2px; margin-bottom:12px; color:var(--os-muted); border-bottom:1px solid var(--os-line); font-size:13px; }
:root body.fable-page[data-site-identity][data-ocean-site] .journey-context a { color:var(--os-blue); }
:root body.fable-page[data-site-identity][data-ocean-site] :is(button,input,select,summary,a):focus-visible { outline:3px solid var(--os-blue); outline-offset:3px; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(input,select,textarea) { color:var(--os-ink); background-color:var(--os-panel); border-color:var(--os-line); border-radius:12px; accent-color:var(--os-blue); }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.si-view-lead,.si-editorial-lead,.ds-note,.hp-note) { color:var(--os-muted); font-weight:400; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.si-kicker,.ds-kicker,.visual-overline) { color:var(--os-blue); letter-spacing:.02em; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.page-head,.ds-heading) { position:relative; margin:20px 0 24px; padding:28px 30px; border:1px solid var(--os-line); border-radius:22px; background:linear-gradient(115deg,var(--os-panel),var(--os-raised)); box-shadow:none; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.page-head,.ds-heading) h1 { color:var(--os-ink); font-size:clamp(27px,3.3vw,40px); font-weight:750; line-height:1.3; letter-spacing:-.035em; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.page-head,.ds-heading) p { color:var(--os-muted); max-width:64ch; line-height:1.8; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.site-header,.journey-context,.page-head,.ds-heading) a { text-underline-offset:4px; }
/* Discover and compare: the same page heading, tools, card hierarchy and selected states. */
:root body.fable-page[data-site-identity][data-ocean-site] :is(#mapView,#calendarView,#lureView) { padding:0 0 40px; max-width:none; margin-inline:0; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(#mapView .ports-header,#calendarView .calendar-header,#lureView>.lab-heading) { padding:26px 28px; margin:16px 0 22px; border:1px solid var(--os-line); border-radius:22px; background:linear-gradient(115deg,var(--os-panel),var(--os-raised)); }
:root body.fable-page[data-site-identity][data-ocean-site] :is(#mapView,#calendarView,#lureView) h1 { font-size:clamp(28px,3.3vw,40px); font-weight:750; letter-spacing:-.035em; color:var(--os-ink); }
:root body.fable-page[data-site-identity][data-ocean-site] #calendarView .calendar-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 28px; }
:root body.fable-page[data-site-identity][data-ocean-site] #calendarView .calendar-header .port-switcher { grid-column:2; grid-row:1/4; width:auto; align-self:center; border:0; padding:0; }
:root body.fable-page[data-site-identity][data-ocean-site] #calendarView .calendar-header .si-view-lead { max-width:60ch; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-explore-toolbar { padding:16px; background:var(--os-panel); border:1px solid var(--os-line); border-radius:16px; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-explore-options { padding:8px 0; margin:8px 0 16px; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-presets button { border:1px solid var(--os-line); background:var(--os-panel); color:var(--os-muted); }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-presets button[aria-pressed="true"] { color:var(--os-ink); border-color:var(--os-blue); background:var(--os-selected); }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-explore-layout { grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr); gap:24px; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView:not(.is-map-mode) .ex-explore-layout { grid-template-columns:1fr; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView #mapPanel { box-shadow:0 8px 28px #00000018; border-color:var(--os-line); border-radius:20px; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .port-list-row { padding:22px; border-color:var(--os-line); background:var(--os-panel); border-radius:18px; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .port-row-head>strong { font-size:21px; font-weight:650; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-port-mul { color:var(--os-gold); font-size:28px; }
:root body.fable-page[data-site-identity][data-ocean-site] .ex-port-numbers { padding:12px 0; border-block:1px solid var(--os-line); }
:root body.fable-page[data-site-identity][data-ocean-site] #calendarView .ex-date-row { padding:22px; background:var(--os-panel); border-radius:18px; }
:root body.fable-page[data-site-identity][data-ocean-site] #calendarView .ex-date-row.is-saved { background:var(--os-selected); border-color:var(--os-blue); }
:root body.fable-page[data-site-identity][data-ocean-site] #calendarView .ex-date-heading strong { color:var(--os-gold); font-size:25px; }
:root body.fable-page[data-site-identity][data-ocean-site] #calendarView .ex-date-facts { border-top:1px solid var(--os-line); padding-top:16px; margin-top:16px; }
:root body.fable-page[data-site-identity][data-ocean-site] #calendarView .ex-date-facts strong { font-size:16px; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.calendar-month-controls,.calendar-filters) { gap:8px; }
:root body.fable-page[data-site-identity][data-ocean-site] #calendarView .calendar-day { color:var(--os-ink); background:var(--os-panel); border-color:var(--os-line); border-radius:12px; }
:root body.fable-page[data-site-identity][data-ocean-site] #calendarView .calendar-day.is-selected { background:var(--os-selected); border-color:var(--os-blue); }
:root body.fable-page[data-site-identity][data-ocean-site] #calendarView .calendar-mul { color:var(--os-gold); }
:root body.fable-page[data-site-identity][data-ocean-site] .ex-compare-tray { background:var(--os-panel); border-color:var(--os-line); box-shadow:0 6px 32px #0005; }
/* Learn: a focused lesson navigator and a paired diagram/explanation workspace. */
:root body.fable-page[data-site-identity][data-ocean-site] #lureView .lab-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
:root body.fable-page[data-site-identity][data-ocean-site] #lureView .rig-learning { max-width:none; padding:0; background:transparent; }
:root body.fable-page[data-site-identity][data-ocean-site] #lureView .mm-rig-heading { padding:0; margin:18px 0; }
:root body.fable-page[data-site-identity][data-ocean-site] #lureView .mm-section-kicker { color:var(--os-blue); font-size:13px; letter-spacing:.04em; }
:root body.fable-page[data-site-identity][data-ocean-site] #lureView .rig-topic-tabs { gap:10px; padding:6px; background:var(--os-panel); border:1px solid var(--os-line); border-radius:18px; }
:root body.fable-page[data-site-identity][data-ocean-site] #lureView .rig-topic-tabs button { background:transparent; color:var(--os-muted); border:1px solid transparent; border-radius:12px; min-height:70px; }
:root body.fable-page[data-site-identity][data-ocean-site] #lureView .rig-topic-tabs button[aria-selected="true"],
:root body.fable-page[data-site-identity][data-ocean-site] #lureView .rig-topic-tabs button[aria-pressed="true"] { background:var(--os-selected); color:var(--os-ink); border-color:var(--os-blue); }
:root body.fable-page[data-site-identity][data-ocean-site] #lureView :is(.rig-stage,.rig-copy-current,.lure-form,.lure-candidate,.rig-guide,.lure-field-guide) { background:var(--os-panel); color:var(--os-ink); border:1px solid var(--os-line); border-radius:20px; box-shadow:none; }
:root body.fable-page[data-site-identity][data-ocean-site] #lureView .rig-stage { padding:20px; }
:root body.fable-page[data-site-identity][data-ocean-site] #lureView .rig-copy-current { padding:24px; min-height:180px; }
:root body.fable-page[data-site-identity][data-ocean-site] #lureView .rig-copy-current p { font-size:16px; line-height:1.85; }
:root body.fable-page[data-site-identity][data-ocean-site] #lureView .rig-kind-switch { background:var(--os-selected); color:var(--os-blue); border-color:var(--os-line); border-radius:12px; }
:root body.fable-page[data-site-identity][data-ocean-site] #lureView :is(.lab-topic-menu,.lab-info)>div { background:var(--os-panel); border-color:var(--os-line); color:var(--os-ink); }
:root body.fable-page[data-site-identity][data-ocean-site] #lureView .lure-candidate.is-first { border-color:var(--os-gold); background:var(--os-raised); }
/* Data: distinguish uptime, freshness and history rather than collapsing warnings. */
:root body.fable-page[data-site-identity][data-ocean-site] .ds-sections { padding:6px; gap:8px; border:1px solid var(--os-line); border-radius:14px; background:var(--os-panel); }
:root body.fable-page[data-site-identity][data-ocean-site] .ds-sections a { padding-inline:16px; border-radius:10px; color:var(--os-blue); }
:root body.fable-page[data-site-identity][data-ocean-site] .ds-overview { padding:28px; background:linear-gradient(110deg,var(--os-panel),var(--os-raised)); border-color:var(--os-line); }
:root body.fable-page[data-site-identity][data-ocean-site] .ds-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
:root body.fable-page[data-site-identity][data-ocean-site] .ds-card { padding:24px; background:var(--os-panel); border-color:var(--os-line); }
:root body.fable-page[data-site-identity][data-ocean-site] .ds-catch { grid-column:auto; }
:root body.fable-page[data-site-identity][data-ocean-site] .ds-card .ds-big { color:var(--os-ink); font-size:30px; letter-spacing:-.035em; }
:root body.fable-page[data-site-identity][data-ocean-site] .ds-ok { color:var(--os-success); background:var(--os-success-bg); }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.ds-warn,.ds-warning) { color:var(--os-warn); background:var(--os-warn-bg); }
:root body.fable-page[data-site-identity][data-ocean-site] .ds-warning { border-color:var(--os-gold); border-radius:0 10px 10px 0; }
:root body.fable-page[data-site-identity][data-ocean-site] .ds-card .ds-counts { grid-template-columns:repeat(2,minmax(0,1fr)); }
/* Guides and port details are part of the same product, not legacy editorial islands. */
:root body.fable-page[data-site-identity][data-ocean-site] .reading-toc { display:flex; flex-wrap:wrap; gap:6px; padding:10px; border:1px solid var(--os-line); border-radius:14px; background:var(--os-panel); }
:root body.fable-page[data-site-identity][data-ocean-site] .reading-toc a { display:flex; align-items:center; min-height:44px; padding:8px 14px; border-radius:10px; color:var(--os-blue); background:var(--os-raised); text-decoration:none; }
:root body.fable-page[data-site-identity][data-ocean-site] .fable-shell>:is(.answer,.observed-alternative,.tackle-reading,figure,.related) { background:var(--os-panel); color:var(--os-ink); border:1px solid var(--os-line); border-radius:20px; padding:26px; box-shadow:none; }
:root body.fable-page[data-site-identity][data-ocean-site] .fable-shell>:is(.answer,.observed-alternative,.tackle-reading) { border-top:3px solid var(--os-blue); }
:root body.fable-page[data-site-identity][data-ocean-site] .fable-shell>section:not(.hero):not(.view):not(.rig-learning):not(.home-planner) { padding:24px; border:1px solid var(--os-line); border-radius:20px; background:var(--os-panel); margin-block:20px; }
:root body.fable-page[data-site-identity][data-ocean-site] .fable-shell :is(.related,.tackle-reading,.answer,.observed-alternative) p { color:var(--os-muted); line-height:1.85; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.tackle-card,.port-card,.guide-card,.definition-card,.content-card) { background:var(--os-raised); border-color:var(--os-line); color:var(--os-ink); border-radius:16px; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.tackle-card,.port-card,.guide-card) :is(p,small) { color:var(--os-muted); }
:root body.fable-page[data-site-identity][data-ocean-site] .fable-shell table { color:var(--os-ink); border-color:var(--os-line); }
:root body.fable-page[data-site-identity][data-ocean-site] .fable-shell :is(th,td) { border-color:var(--os-line); }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.port-tide-section,.hp-calendar-section,.port-tides) { background:var(--os-panel); border-color:var(--os-line); color:var(--os-ink); border-radius:20px; }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-calendar button { color:var(--os-ink); background:var(--os-panel); border-color:var(--os-line); }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-calendar .is-selected button { background:var(--os-selected); color:var(--os-ink); border-color:var(--os-blue); }
:root body.fable-page[data-site-identity][data-ocean-site] .journey-next { padding:22px; border:1px solid var(--os-line); border-radius:18px; background:var(--os-panel); }
:root body.fable-page[data-site-identity][data-ocean-site] .journey-next a { background:var(--os-raised); color:var(--os-blue); border-color:var(--os-line); border-radius:12px; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.footer,footer) { color:var(--os-muted); border-color:var(--os-line); }
/* Keep dialogs and disclosures readable in every flow, including old trip entry. */
:root body.fable-page[data-site-identity][data-ocean-site] .trip-progress-track::before { background:var(--os-blue); }
:root body.fable-page[data-site-identity][data-ocean-site] :is(dialog,.modal-panel,.dialog-panel,.bottom-sheet,.port-sheet) { background:var(--os-panel); color:var(--os-ink); border-color:var(--os-line); }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.primary-button,.masthead-cta) { color:var(--os-on-action); background:var(--os-action); border-radius:12px; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.surface,.card,.question-card,.selection-card,.trip-step,.trip-result-panel) { background:var(--os-panel); border-color:var(--os-line); color:var(--os-ink); }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.site-menu-links,.fable-port-links) a:hover { background:var(--os-selected); color:var(--os-ink); }
@media(hover:hover) {
 :root body.fable-page[data-site-identity][data-ocean-site] :is(.port-list-row,.ex-date-row,.reading-toc a,.journey-next a):hover { border-color:var(--os-blue); }
 :root body.fable-page[data-site-identity][data-ocean-site] .journey-tabs a:hover { background:var(--os-selected); color:var(--os-ink); }
}
@media(min-width:1100px) {
 :root body.fable-page.fable-content[data-site-identity][data-ocean-site] .reading-toc { gap:8px 12px; }
 :root body.fable-page.fable-content[data-site-identity][data-ocean-site] .fable-shell>section { padding:30px; }
 :root body.fable-page[data-site-identity][data-ocean-site] #lureView .rig-stage { padding:24px; }
}
:root body.fable-page[data-ocean-site] .site-primary-nav a{min-width:48px;min-height:48px;padding:10px 14px;font-size:16px}
@media(max-width:959px) {
 :root body.fable-page[data-site-identity][data-ocean-site] .journey-tabs { margin:0; border-radius:18px 18px 0 0; padding:5px 6px calc(5px + env(safe-area-inset-bottom)); gap:2px; background:var(--os-panel); }
 :root body.fable-page[data-site-identity][data-ocean-site] .journey-tabs a { min-height:52px; font-size:12px; }
 :root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-explore-layout { grid-template-columns:1fr; gap:16px; }
 :root body.fable-page[data-site-identity][data-ocean-site] .ds-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 :root body.fable-page[data-site-identity][data-ocean-site] .ds-catch { grid-column:1/-1; }
 :root body.fable-page[data-site-identity][data-ocean-site] :is(.page-head,.ds-heading,#mapView .ports-header,#calendarView .calendar-header,#lureView>.lab-heading) { margin:12px 0 18px; padding:20px; border-radius:18px; }
 :root body.fable-page[data-site-identity][data-ocean-site] #calendarView .calendar-header { grid-template-columns:1fr; gap:10px; }
 :root body.fable-page[data-site-identity][data-ocean-site] #calendarView .calendar-header .port-switcher { grid-column:1; grid-row:auto; }
}
@media(max-width:860px) {
 :root body.fable-page[data-site-identity][data-ocean-site] .site-header { flex-wrap:wrap; }
 :root body.fable-page[data-site-identity][data-ocean-site] .site-primary-nav { order:3; flex:1 0 100%; width:100%; max-width:100%; margin:0; padding-inline:0; }
 :root body.fable-page[data-site-identity][data-ocean-site] .site-menu-links { inset-inline:auto 0; width:min(260px,calc(100vw - 24px)); }
}
@media(max-width:600px) {
 :root body.fable-page[data-site-identity][data-ocean-site] { --os-gap:16px; }
 :root body.fable-page[data-site-identity][data-ocean-site] .ds-grid { grid-template-columns:1fr; gap:16px; }
 :root body.fable-page[data-site-identity][data-ocean-site] .ds-card,:root body.fable-page[data-site-identity][data-ocean-site] .ds-overview { padding:18px; }
 :root body.fable-page[data-site-identity][data-ocean-site] .ds-sections { flex-wrap:wrap; gap:2px; }
 :root body.fable-page[data-site-identity][data-ocean-site] .ds-sections a { padding-inline:10px; font-size:14px; }
 :root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-explore-toolbar { padding:12px; grid-template-columns:minmax(0,1fr) 130px; }
 :root body.fable-page[data-site-identity][data-ocean-site] #mapView .port-list-row,:root body.fable-page[data-site-identity][data-ocean-site] #calendarView .ex-date-row { padding:16px; }
 :root body.fable-page[data-site-identity][data-ocean-site] #calendarView .ex-date-heading strong { font-size:22px; }
 :root body.fable-page[data-site-identity][data-ocean-site] #lureView .rig-topic-tabs { gap:6px; padding:5px; }
 :root body.fable-page[data-site-identity][data-ocean-site] #lureView .rig-topic-tabs button { padding:10px 6px; font-size:13px; }
 :root body.fable-page[data-site-identity][data-ocean-site] #lureView :is(.rig-stage,.rig-copy-current) { padding:16px; }
 :root body.fable-page[data-site-identity][data-ocean-site] .fable-shell>:is(.answer,.observed-alternative,.tackle-reading,figure,.related),:root body.fable-page[data-site-identity][data-ocean-site] .fable-shell>section:not(.hero):not(.view):not(.rig-learning):not(.home-planner) { padding:18px; }
}
@media(max-width:359px) {
 :root body.fable-page[data-site-identity][data-ocean-site] .site-brand .brand-name { font-size:22px; }
 :root body.fable-page[data-site-identity][data-ocean-site] .site-menu-links { position:fixed; top:72px; left:12px; right:12px; width:auto; max-width:none; max-height:calc(100dvh - 90px); overflow:auto; }
 :root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-explore-toolbar { grid-template-columns:1fr; }
 :root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-date-label { display:flex; justify-content:space-between; gap:8px; }
 :root body.fable-page[data-site-identity][data-ocean-site] #mapView #exploreDate { max-width:168px; }
 :root body.fable-page[data-site-identity][data-ocean-site] :is(.page-head,.ds-heading,#mapView .ports-header,#calendarView .calendar-header,#lureView>.lab-heading) { padding:16px; }
}
@media(prefers-reduced-motion:reduce) {
 :root body.fable-page[data-site-identity][data-ocean-site] { scroll-behavior:auto; }
 :root body.fable-page[data-site-identity][data-ocean-site] :is(.journey-tabs,.port-list-row,.ex-date-row,.reading-toc a) { animation:none; transition:none; }
}
@media(forced-colors:active) {
 :root body.fable-page[data-site-identity][data-ocean-site] { --os-bg:Canvas; --os-panel:Canvas; --os-raised:Canvas; --os-soft:Canvas; --os-ink:CanvasText; --os-muted:CanvasText; --os-line:CanvasText; --os-blue:LinkText; --os-action:Highlight; --os-on-action:HighlightText; --os-selected:Canvas; --os-gold:CanvasText; --os-warn:CanvasText; --os-warn-bg:Canvas; --os-success:CanvasText; --os-success-bg:Canvas; }
 :root body.fable-page[data-site-identity][data-ocean-site] .journey-tabs a[aria-current="page"] { border:2px solid Highlight; }
}
/* Legacy sky is a fixed body pseudo-element: recolor the visible canvas, not only body. */
:root:not([data-fable-appearance="light"]) { background:#061a30; }
:root[data-fable-appearance="light"] { background:#edf4fb; }
:root body.fable-page[data-site-identity][data-ocean-site]::before { background:var(--os-bg); }
:root body.fable-page[data-site-identity][data-ocean-site] :is(#mapView,#calendarView,#lureView) { width:100%; box-sizing:border-box; }
/* Enlarged text must reflow; a time and its unit may occupy separate lines. */
:root body.fable-page[data-site-identity][data-ocean-site] .hp-extreme > dd > span { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px; max-width:100%; }
:root body.fable-page[data-site-identity][data-ocean-site] .si-tide-main { flex-wrap:wrap; }
@media(max-width:600px) {
 :root body.fable-page[data-site-identity][data-ocean-site] .site-header { flex-wrap:wrap; }
 :root body.fable-page[data-site-identity][data-ocean-site] .site-header .site-brand { min-width:max-content; }
 :root body.fable-page[data-site-identity][data-ocean-site] .hp-heading { flex-wrap:wrap; }
 :root body.fable-page[data-site-identity][data-ocean-site] .hp-heading .home-location-button { min-width:max-content; flex-basis:auto; width:auto; padding-inline:10px; }
}
/* The shared renderer also appears on port details; its photo must stay secondary there. */
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] { display:flex; flex-direction:column; gap:12px; margin-top:16px; color:var(--si-hero-ink); }
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] .tom-pick { display:flex; flex-direction:column; gap:10px; padding:12px; border:1px solid #ffffff30; border-radius:12px; background:#ffffff08; color:inherit; text-decoration:none; }
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] .tom-kicker { color:var(--si-hero-muted); font-size:13px; font-weight:500; }
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] .tom-row { display:flex; align-items:center; gap:12px; min-width:0; }
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] .tom-well { display:flex; align-items:center; justify-content:center; flex:0 1 148px; width:148px; max-width:45%; min-width:76px; height:48px; padding:8px; background:#d8e5f0; border-radius:9px; }
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] .tom-thumb { display:block; width:100%; height:auto; max-height:32px; object-fit:contain; }
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] .tom-row > strong { min-width:0; font-size:16px; line-height:1.6; word-break:keep-all; overflow-wrap:anywhere; color:var(--si-hero-ink); }
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] .tom-tips { border-top:1px solid #ffffff30; color:var(--si-hero-ink); }
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] .tom-tips > summary { min-height:48px; display:flex; align-items:center; padding-block:8px; font-size:14px; cursor:pointer; }
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] .tom-tips-body { display:grid; gap:16px; padding-block:10px; }
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] .tom-tips h3 { font-size:16px; margin:0 0 10px; color:var(--si-hero-ink); }
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] .tom-tips :is(p,li) { font-size:14px; line-height:1.8; color:var(--si-hero-muted); }
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] .tom-tips a { color:#a9d5ff; text-underline-offset:3px; }
:root body.fable-page[data-site-identity][data-ocean-site]:not(.home-canvas-page) [data-today-one-move] .tom-stop { margin:0; padding:12px; border-left:3px solid #ffd195; color:#ffe0af; font-size:16px; line-height:1.7; }

/* Beginner flow: one scale and surface language; existing imagery and data stay intact. */
:root body.fable-page[data-site-identity][data-ocean-site] { --bf-radius:18px; --bf-gap:16px; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] .fable-shell { width:min(var(--os-width),100%); max-width:var(--os-width); }
:root body.fable-page[data-site-identity][data-ocean-site] .journey-context { min-height:36px; margin:8px 0 14px; padding-block:6px; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.page-head,.ds-heading,#mapView .ports-header,#calendarView .calendar-header,#lureView>.lab-heading,.bf-page-head) { margin:12px 0 18px; padding:20px 24px; border:1px solid var(--os-line); border-radius:var(--bf-radius); background:linear-gradient(115deg,var(--os-panel),var(--os-raised)); gap:12px; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.page-head,.ds-heading,#mapView,#calendarView,#lureView,.bf-page-head) h1 { font-size:clamp(26px,3vw,34px); line-height:1.3; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.page-head,.ds-heading) p { line-height:1.6; margin-block:6px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-page-prepare { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:9px 14px; border:1px solid var(--os-line); border-radius:12px; background:var(--os-selected); color:var(--os-blue); text-decoration:none; font-size:14px; font-weight:600; }
:root body.fable-page[data-site-identity][data-ocean-site] #calendarView .bf-page-prepare { grid-column:2; justify-self:end; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-entry { display:flex; justify-content:center; gap:10px; margin:0 0 14px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-entry a { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px 14px; border:1px solid var(--os-line); border-radius:12px; color:var(--os-ink); background:var(--os-panel); text-decoration:none; font-size:14px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-entry a:first-child { color:var(--os-blue); }
:root body.fable-page.home-canvas-page[data-site-identity][data-ocean-site] .hp-heading { min-height:106px; padding:16px 0 10px; }
:root body.fable-page.home-canvas-page[data-site-identity][data-ocean-site] .ah-story { top:22px; font-size:16px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-window-status { display:table; margin-top:7px; padding:3px 8px; border-radius:7px; font-size:13px; font-weight:600; color:var(--si-hero-ink); background:#ffffff12; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-term { display:inline-block; margin-left:4px; font-size:12px; font-weight:400; }
:root body.fable-page[data-site-identity][data-ocean-site] [data-beginner-tips] .tom-tips-body { display:block; padding:10px 14px 14px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-quickpaths { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-quickpaths a { display:flex; flex-direction:column; align-items:center; gap:6px; min-height:76px; padding:10px 5px; border:1px solid #ffffff26; border-radius:12px; color:var(--si-hero-ink); background:#ffffff08; font-size:13px; text-decoration:none; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-quickpaths svg { width:26px; height:26px; color:#a9d5ff; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.bf-tip-library,.bf-tip-topic) { border:0; border-top:1px solid #ffffff26; }
:root body.fable-page[data-site-identity][data-ocean-site] :is(.bf-tip-library,.bf-tip-topic) > summary { display:list-item; min-height:44px; padding:10px 0; color:var(--si-hero-ink); font-size:14px; cursor:pointer; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-tip-topic h3 { display:inline; font-size:14px; margin:0; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-tip-library > section { margin:0; padding:0; }
/* Candidate actions are choices, never a generated best-day ranking. */
:root body.fable-page[data-site-identity][data-ocean-site] .bf-choose-date { display:flex; gap:12px; margin:12px 0 18px; overflow-x:auto; padding:4px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-date-action { display:grid; flex:1 0 150px; gap:8px; padding:16px; border:1px solid var(--os-line); border-radius:14px; background:var(--os-panel); color:var(--os-ink); text-decoration:none; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-date-action > svg { color:var(--os-blue); }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-date-action > span { font-size:15px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-date-action strong { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:44px; font-size:15px; color:var(--os-gold); }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-date-action strong svg { width:18px; height:18px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-score-details { margin:18px 0; border:1px solid var(--os-line); border-radius:14px; padding:0 16px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-score-details > summary { min-height:48px; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--os-muted); cursor:pointer; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-score-details > summary::after { content:'+'; margin-left:auto; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-score-details[open] > summary::after { content:'−'; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-score-details > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-score-details :is(p,small) { color:var(--os-muted); font-size:14px; line-height:1.65; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-score-details dd { margin:4px 0 14px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-score-details small { display:block; margin-top:6px; }
:root body.fable-page[data-site-identity][data-ocean-site] #candidateComparison { scroll-margin-block:16px 100px; }
/* The preparation page uses the same header/cards and existing line icons. */
.bf-prepare-page * { box-sizing:border-box; }
.bf-prepare-page .bf-page-head { display:flex; align-items:center; justify-content:space-between; }
.bf-prepare-page .bf-page-head :is(h1,p) { margin:0; }
.bf-prepare-page #bf-context-label { margin-top:8px; font-size:1.375rem; color:var(--os-muted); }
.bf-prepare-page .bf-back { display:flex; align-items:center; min-height:44px; color:var(--os-blue); text-decoration:none; }
.bf-prepare-page .bf-page-return { display:flex; flex-wrap:wrap; gap:8px 18px; }
.bf-prepare-page .bf-context-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:14px; align-items:end; padding:18px; border:1px solid var(--os-line); border-radius:18px; background:var(--os-panel); }
.bf-prepare-page .bf-context-form label { display:grid; gap:7px; min-width:0; font-size:1.125rem; color:var(--os-muted); }
.bf-prepare-page .bf-context-form :is(input,select,button) { width:100%; min-width:0; min-height:48px; padding:10px 12px; font:inherit; font-size:1.125rem; border:1px solid var(--os-line); border-radius:10px; }
.bf-prepare-page button { color:var(--os-on-action); background:var(--os-action); cursor:pointer; }
.bf-prepare-page button:disabled { cursor:not-allowed; opacity:.65; }
.bf-prepare-page .bf-progress { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:20px 0 6px; }
.bf-prepare-page progress { width:160px; height:8px; accent-color:var(--os-blue); }
.bf-prepare-page .bf-progress span { color:var(--os-muted); font-size:13px; }
.bf-prepare-page .bf-save-status { min-height:24px; color:var(--os-muted); font-size:14px; margin:8px 0 20px; }
.bf-prepare-page .bf-checklist { display:grid; gap:20px; }
.bf-prepare-page .bf-card { min-width:0; margin:0; padding:18px; background:var(--os-panel); border:1px solid var(--os-line); border-radius:18px; }
.bf-prepare-page legend { display:flex; align-items:center; gap:8px; padding:0 8px; color:var(--os-ink); font-size:19px; font-weight:650; }
.bf-prepare-page .bf-items { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.bf-prepare-page .bf-card:last-child .bf-items { grid-template-columns:repeat(5,minmax(0,1fr)); }
.bf-prepare-page .bf-item { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding:18px 12px; background:var(--os-raised); border:1px solid var(--os-line); border-radius:14px; text-align:center; cursor:pointer; }
.bf-prepare-page .bf-item input { position:absolute; top:10px; right:10px; width:20px; height:20px; accent-color:var(--os-blue); }
.bf-prepare-page .bf-item-art { display:grid; place-items:center; width:60px; height:60px; border-radius:50%; color:var(--os-blue); background:var(--os-panel); }
.bf-prepare-page .bf-item-art svg { width:32px; height:32px; }
.bf-prepare-page .bf-item strong { font-size:16px; font-weight:650; }
.bf-prepare-page .bf-item small { max-width:22ch; color:var(--os-muted); font-size:13px; line-height:1.55; word-break:keep-all; overflow-wrap:anywhere; }
.bf-prepare-page .bf-item:has(input:checked) { border-color:var(--os-blue); background:var(--os-selected); }
.bf-prepare-page .bf-item:has(input:focus-visible) { outline:3px solid var(--os-blue); outline-offset:3px; }
.bf-prepare-page fieldset:disabled .bf-item { cursor:not-allowed; opacity:.65; }
.bf-prepare-page .bf-prepare-actions { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 28px; }
.bf-prepare-page .bf-prepare-actions button { min-height:48px; padding:10px 16px; border:1px solid var(--os-line); border-radius:12px; font:inherit; font-size:1.125rem; }
.bf-prepare-page #bf-reset { margin-left:auto; background:transparent; color:var(--os-muted); }
.bf-prepare-page #bf-copy-fallback { width:100%; padding:14px; font:inherit; }
.bf-prepare-page .bf-learning { margin:24px 0; padding:22px; border:1px solid var(--os-line); border-radius:18px; background:var(--os-panel); }
.bf-prepare-page .bf-learning header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-bottom:16px; }
.bf-prepare-page .bf-learning h2 { font-size:22px; margin:0; }
.bf-prepare-page .bf-learning header span { color:var(--os-muted); font-size:13px; }
.bf-prepare-page #bf-learning-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.bf-prepare-page .bf-lesson { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:102px; padding:16px; border:1px solid var(--os-line); border-radius:14px; color:var(--os-blue); text-decoration:none; }
.bf-prepare-page .bf-lesson svg { width:36px; height:36px; }
.bf-prepare-page .bf-notice { padding:14px 16px; border-left:3px solid var(--os-gold); border-radius:0 12px 12px 0; background:var(--os-warn-bg); color:var(--os-warn); font-size:1.125rem; line-height:1.7; }
.bf-prepare-page .bf-storage-note summary { min-height:48px; padding-block:12px; cursor:pointer; }
.bf-prepare-page .bf-storage-note p { color:var(--os-muted); font-size:14px; }
.bf-prepare-page .bf-footer { display:flex; flex-wrap:wrap; gap:20px; padding:20px 0 110px; border-top:1px solid var(--os-line); }
.bf-prepare-page .bf-footer a { min-height:44px; display:flex; align-items:center; font-size:14px; }
@media(max-width:959px) {
 :root body.fable-page[data-site-identity][data-ocean-site] :is(.page-head,.ds-heading,#mapView .ports-header,#calendarView .calendar-header,#lureView>.lab-heading,.bf-page-head) { padding:16px 18px; border-radius:18px; flex-wrap:wrap; }
 :root body.fable-page[data-site-identity][data-ocean-site] #calendarView .bf-page-prepare { grid-column:1; justify-self:start; }
 :root body.fable-page[data-site-identity][data-ocean-site] .bf-choose-date { gap:8px; }
 :root body.fable-page[data-site-identity][data-ocean-site] .bf-date-action { padding:12px; flex-basis:132px; }
 .bf-prepare-page .bf-card .bf-items,.bf-prepare-page .bf-card:last-child .bf-items { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:600px) {
 :root body.fable-page[data-site-identity][data-ocean-site] .bf-entry { gap:8px; }
 :root body.fable-page[data-site-identity][data-ocean-site] .bf-entry a { padding:8px 10px; font-size:13px; }
 :root body.fable-page[data-site-identity][data-ocean-site] .bf-quickpaths { grid-template-columns:repeat(2,minmax(0,1fr)); }
 :root body.fable-page[data-site-identity][data-ocean-site] .bf-window-status { font-size:12px; }
 .bf-prepare-page .bf-context-form { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:14px; gap:10px; }
 .bf-prepare-page .bf-context-form > button { grid-column:1/-1; }
 .bf-prepare-page .bf-card .bf-items,.bf-prepare-page .bf-card:last-child .bf-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .bf-prepare-page .bf-card { padding:14px; }
 .bf-prepare-page .bf-item { padding:18px 8px 14px; }
 .bf-prepare-page #bf-learning-links { gap:8px; }
 .bf-prepare-page .bf-lesson { min-height:92px; padding:12px 6px; font-size:14px; }
}
.bf-prepare-page { margin:0; }
.bf-prepare-page > .skip-link { position:fixed; top:-120px; left:12px; z-index:100; padding:10px 14px; border-radius:10px; background:var(--os-panel); color:var(--os-ink); }
.bf-prepare-page > .skip-link:focus { top:8px; }
.bf-prepare-page .bf-context-options { margin:12px 0 18px; }
.bf-prepare-page .bf-context-options > summary { min-height:44px; padding:8px 0; color:var(--os-blue); cursor:pointer; }
.bf-prepare-page progress { appearance:none; border:0; border-radius:10px; overflow:hidden; background:var(--os-selected); }
.bf-prepare-page progress::-webkit-progress-bar { background:var(--os-selected); }
.bf-prepare-page progress::-webkit-progress-value { background:var(--os-blue); }
.bf-prepare-page progress::-moz-progress-bar { background:var(--os-blue); }
/* v0.13 preparation polish: same images and palette, fewer repeated headers. */
:root body.fable-page[data-site-identity][data-ocean-site] .bf-prepare-page { min-width:0; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-page-head { padding:18px 22px; margin:12px 0; align-items:center; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-page-head h1 { font-size:30px; margin:4px 0 6px; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] #bf-context-label { margin:6px 0; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-date-caption { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:8px; }
:root body.fable-page[data-site-identity][data-ocean-site] #bf-date-relation { padding:3px 10px; border:1px solid var(--os-line); border-radius:999px; color:var(--os-gold); background:var(--os-panel); font-size:16px; }
:root body.fable-page[data-site-identity][data-ocean-site] #bf-date-relation[data-relation="past"] { color:var(--os-warn); background:var(--os-warn-bg); }
:root body.fable-page[data-site-identity][data-ocean-site] #bf-today { color:var(--os-muted); font-size:16px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-context-options { margin:4px 0 14px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-context-options > summary { min-height:48px; align-content:center; font-size:1.125rem; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-progress-panel { padding:16px 18px; border:1px solid var(--os-line); border-radius:18px; background:var(--os-panel); margin:8px 0 18px; }
:root body.fable-page[data-site-identity][data-ocean-site] #bf-remaining-title { margin:0 0 10px; font-size:20px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-group-progress { display:flex; flex-wrap:wrap; gap:8px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-group-progress > span { padding:4px 12px; border-radius:999px; color:var(--os-blue); background:var(--os-selected); font-size:14px; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-progress { margin:12px 0 6px; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] #bf-count { font-size:2rem; line-height:1.3; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-save-status { margin:8px 0 0; font-size:1.125rem; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-card { padding:14px; margin:0 0 16px; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-item { min-height:130px; padding:12px; gap:8px; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-item-art { width:44px; height:44px; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-item strong { font-size:18px; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-item small { font-size:16px; line-height:1.55; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-reset-options { margin-left:auto; color:var(--os-muted); }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-reset-options > summary { min-height:44px; align-content:center; padding:0 10px; cursor:pointer; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-reset-options p { font-size:13px; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-entry .bf-resume { flex-basis:100%; justify-content:center; display:flex; flex-wrap:wrap; padding:8px 12px; border-style:dashed; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-resume { display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-height:48px; border:1px solid var(--os-line); border-radius:14px; padding:12px; color:var(--os-blue); text-decoration:none; }
:root body.fable-page[data-site-identity][data-ocean-site] .bf-resume > span { font-size:13px; color:var(--os-muted); }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-learning { margin-block:18px; padding:16px; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-learning h2 { font-size:20px; }
@media(min-width:960px) {
 :root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] #bf-checklist { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,5fr); gap:18px; align-items:start; }
 :root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
 :root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] [data-bf-group="gear"] .bf-items { grid-template-columns:repeat(3,minmax(0,1fr)); }
 :root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-progress-panel { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
 :root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-group-progress { justify-content:flex-end; }
}
@media(max-width:599px) {
 :root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-page-head { padding:16px; }
 :root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-page-head h1 { font-size:26px; }
 :root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-item { min-height:112px; }
 :root body.fable-page[data-site-identity][data-ocean-site] .bf-reset-options { margin-left:0; width:100%; }
}
/* Compact preparation readout; none of the state or caution text is removed. */
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-progress-panel { padding:12px 16px; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] #bf-remaining-title { font-size:18px; line-height:1.45; margin:0 0 8px; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-progress { gap:8px; margin:10px 0 4px; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-progress progress { width:90px; max-width:30%; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-progress > span { font-size:16px; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] #bf-save-status { min-height:22px; line-height:1.6; margin-top:4px; }
:root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] #mainContent { padding-bottom:24px; }
@media(max-width:359px) {
 :root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-date-caption { gap:6px; }
 :root body.fable-page.bf-prepare-page[data-site-identity][data-ocean-site] .bf-progress progress { width:56px; }
}

/* Preparation handoff uses the same target size and typography as the other actions. */
.bf-prepare-page #bf-app-share { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; margin-top:12px; padding:12px 16px; border:1px solid var(--os-line); border-radius:12px; font:inherit; font-size:16px; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.bf-prepare-page #bf-app-fallback { width:100%; max-width:100%; margin-top:12px; padding:12px; font:inherit; font-size:14px; }

/* Compact comparison keeps all tide and marine values visible, without altering map transforms. */
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .port-list-row { padding:14px 16px; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .port-row-head>strong { font-size:18px; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-port-mul { display:inline-block; margin:8px 12px 0 0; font-size:22px; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .port-list-row .ex-port-numbers { margin:8px 0; padding:8px 0; gap:6px 12px; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .port-list-row .ex-card-action { padding-top:8px; margin-top:8px; }
@media(max-width:600px) {
 :root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-explore-options { display:flex; flex-wrap:wrap; gap:8px; }
 :root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-presets { flex:1 0 100%; flex-wrap:wrap; overflow:visible; gap:6px; }
 :root body.fable-page[data-site-identity][data-ocean-site] #mapView .explore-mode-switch { margin-left:auto; }
 :root body.fable-page[data-site-identity][data-ocean-site] #mapView .region-filters { flex:1 0 100%; flex-wrap:wrap; overflow:visible; }
}

:root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-order-help { margin:0 0 12px; color:var(--os-muted); font-size:14px; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-order-help > summary { min-height:44px; padding:10px 0; color:var(--os-blue); cursor:pointer; }
:root body.fable-page[data-site-identity][data-ocean-site] #mapView .ex-order-help p { margin:0 0 8px; line-height:1.7; overflow-wrap:anywhere; }

/* LIVE review follow-up: real tide times first, with existing values and source details intact. */
:root body.fable-page[data-ocean-site] .hp-tide-canvas[data-reading-tide-first][data-minimal-modern] {display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;}
:root body.fable-page[data-ocean-site] .hp-tide-canvas[data-reading-tide-first][data-minimal-modern] > * {grid-column:1;grid-row:auto;order:0;min-width:0;}
:root body.fable-page[data-ocean-site] .hp-tide-canvas[data-reading-tide-first][data-minimal-modern] > .mm-tide-core {display:block;padding:16px;border:1px solid var(--os-line);border-radius:18px;background:var(--os-panel);}
:root body.fable-page[data-ocean-site] .hp-tide-canvas[data-reading-tide-first][data-minimal-modern] .mm-tide-core > [data-tide-answer] {padding:0 0 16px;border:0;border-bottom:1px solid var(--os-line);border-radius:0;background:transparent;}
:root body.fable-page[data-ocean-site] [data-reading-tide-first] .si-tide-hero [hidden] {display:none;}
:root body.fable-page[data-ocean-site] [data-reading-tide-first] .si-tide-hero.is-general .si-tide-facts {grid-template-columns:minmax(0,1fr);}
:root body.fable-page[data-ocean-site] .reading-supplement {margin:20px 0;padding:0;border:0;border-top:1px solid var(--os-line);border-radius:0;background:transparent;}
:root body.fable-page[data-ocean-site] .reading-supplement > summary {display:list-item;min-height:48px;padding:12px 0;color:var(--os-blue);cursor:pointer;line-height:1.6;}
:root body.fable-page[data-ocean-site] .reading-supplement > summary h2 {display:inline;margin:0;font-size:17px;line-height:1.6;font-weight:650;}
:root body.fable-page[data-ocean-site] .reading-supplement > :is(.related,.ports) {margin:6px 0 20px;padding:0;background:transparent;}
:root body.fable-page[data-ocean-site] .port-monthly-disclosure .port-monthly-compare {margin:0;padding:8px 0;border:0;}
:root body.fable-page[data-ocean-site] .reading-next {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0;padding:0;border:0;background:transparent;}
:root body.fable-page[data-ocean-site] .reading-next h2 {grid-column:1/-1;margin:0;font-size:18px;}
:root body.fable-page[data-ocean-site] .reading-next a {min-width:0;min-height:48px;padding:14px 16px;overflow-wrap:anywhere;border-radius:14px;}
:root body.fable-page[data-ocean-site] .reading-next [data-reading-priority="primary"] {background:var(--os-action);border-color:var(--os-action);color:var(--os-on-action);}
:root body.fable-page[data-ocean-site] .reading-next [data-reading-priority="primary"] :is(strong,span) {color:inherit;}
:root body.fable-page[data-ocean-site] .reading-next [data-reading-priority="secondary"] {background:transparent;border-color:var(--os-line);}
:root body.fable-page.bf-prepare-page[data-ocean-site] :is(#bf-checklist,.bf-group-progress,.bf-progress,.bf-prepare-actions)[hidden] {display:none;}
@media(min-width:1100px) {
 :root body.fable-page[data-ocean-site] .hp-tide-canvas[data-reading-tide-first][data-minimal-modern] {grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;}
 :root body.fable-page[data-ocean-site] .hp-tide-canvas[data-reading-tide-first][data-minimal-modern] > :is(.hp-canvas-date,.hp-canvas-more) {grid-column:1/-1;}
 :root body.fable-page[data-ocean-site] .hp-tide-canvas[data-reading-tide-first][data-minimal-modern] > [data-squid-hero] {grid-column:2;grid-row:2;}
}
@media(max-width:599px) {
 :root body.fable-page[data-ocean-site] .reading-next {grid-template-columns:minmax(0,1fr);}
}

/* Port lookup is a tool, not a stack of editorial hero panels. */
:root body.fable-page.fable-port[data-ocean-site] #mainContent > .answer {padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;margin:12px 0;}
:root body.fable-page.fable-port[data-ocean-site] #mainContent > .page-head {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:8px 0 12px;border:0;border-radius:0;background:transparent;margin:8px 0;}
:root body.fable-page.fable-port[data-ocean-site] #mainContent > .page-head h1 {margin:0;font-size:clamp(24px,2.8vw,34px);}
:root body.fable-page.fable-port[data-ocean-site] .port-tide-summary {margin-top:0;}
:root body.fable-page.fable-port[data-ocean-site] .port-reading-jumps {padding:0;margin:8px 0 12px;border:0;border-radius:0;background:transparent;}
:root body.fable-page.fable-port[data-ocean-site] .port-reading-jumps a {min-height:48px;padding:8px 12px;background:var(--os-panel);font-size:1rem;}
:root body.fable-page.fable-port[data-ocean-site] .port-pinned-day {padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;}
:root body.fable-page.fable-port[data-ocean-site] .hp-canvas-date {margin:0;padding:0;}
:root body.fable-page[data-ocean-site] .reading-supplement > section {padding:0;margin:8px 0 16px;border:0;background:transparent;}

@media(min-width:1200px) {
body.guidebook-page #mainContent{display:grid;grid-template-columns:minmax(176px,224px) minmax(0,72ch);column-gap:clamp(32px,5vw,80px);align-items:start}
.guidebook-page #mainContent>:is(.gb-head,.gb-purpose,.gb-task-links){grid-column:1/-1}
.guidebook-page #mainContent>.gb-steps{grid-column:1;align-self:start;position:sticky;top:20px;max-height:calc(100dvh - 40px);overflow:auto;grid-template-columns:minmax(0,1fr)}
.guidebook-page #mainContent>:is(.gb-stage,.gb-app,.reading-next){grid-column:2;min-width:0}
}

@media(max-width:959px) {
#mainContent #bf-checklist{grid-template-columns:minmax(0,1fr)}
#bf-checklist .bf-card .bf-items{grid-template-columns:minmax(0,1fr)}
#bf-checklist .bf-item{display:grid;grid-template-columns:24px 44px minmax(0,1fr);align-items:center;min-height:76px;text-align:left}
#bf-checklist .bf-item input{position:static;margin:0}
#bf-checklist .bf-item-copy{min-width:0}
:root body.fable-page[data-ocean-site] .site-primary-nav a{padding:8px 10px;font-size:14px}
}

.guidebook-page :is(.gb-purpose,.gb-stage-heading span){font-size:16px}