/* =========================================================
   AIS Collision Avoidance Simulator — Styles
   SkipperCheck.net · Real-MKD radar aesthetic
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

/* Page header (reuse VHF class names for consistency) */
.vhf-page-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a3a5c;
    margin-top: 32px;
    margin-bottom: 4px;
}
.vhf-page-subtitle {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 28px;
}

/* Section headers between scenario groups */
.ais-section-header {
    color: #1a3a5c;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e0e8f0;
}
.ais-section-header:first-of-type { margin-top: 0; }

/* Scenario grid (shared look with VHF) */
.scenario-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}
.scenario-card {
    border: 2px solid #e0e8f0;
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.18s ease;
    background: #fff;
    position: relative;
}
.scenario-card:hover {
    border-color: #0d6efd;
    background: #f0f6ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(13,110,253,0.12);
}
.scenario-card.active { border-color: #0d6efd; background: #e8f0ff; }
.scenario-card .badge-type {
    font-size: 10px; font-weight: 700;
    padding: 3px 9px; border-radius: 12px;
    display: inline-block; margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.8px;
}
.badge-distress  { background: #fde8e8; color: #c0392b; }
.badge-urgency   { background: #fef3cd; color: #a05000; }
.badge-safety    { background: #d4edda; color: #155724; }
.badge-routine   { background: #d1ecf1; color: #0c5460; }
.badge-dsc       { background: #ede0ff; color: #5b0070; }
.badge-receive   { background: #d6eaff; color: #004085; }
.badge-explore   { background: #e8e0ff; color: #3a006f; }
.scenario-card h6 { margin: 0 0 5px; font-size: 14px; font-weight: 700; color: #1a2a3a; }
.scenario-card p  { margin: 0; font-size: 12px; color: #666; line-height: 1.4; }
/* the Free Mode card: the daily regatta from 6 h before its gun (2026-10-09, ais-simulator.js _rgPickTick; /regatta's navy and amber) */
.scenario-card .rg-pick {
    display: block; width: fit-content; max-width: 100%; box-sizing: border-box; margin: -2px 0 8px; padding: 3px 9px; border-radius: 12px;
    background: #0b2540; color: #ffc164; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.35;
}
.scenario-card .rg-pick[hidden] { display: none; }

/* Completed scenario */
.scenario-card.is-completed {
    border-color: #28a745;
    background: #f3fbf4;
}
.scenario-card.is-completed:hover { background: #e6f5ea; border-color: #28a745; box-shadow: 0 4px 16px rgba(40,167,69,0.15); }
.scenario-card.is-completed::after {
    content: "✓";
    position: absolute; top: 8px; right: 8px;
    width: 24px; height: 24px; border-radius: 50%;
    background: #28a745; color: #fff; font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#ais-markdone-btn.is-done { background: #28a745 !important; border-color: #28a745 !important; color: #fff !important; cursor: default; }

/* Signed-in wrapper: keep simulator usable inside 9-col content */
.ais-signed-in-wrap { max-width: 100%; }

/* Progress bar */
.ais-progress-wrap {
    background: #fff; border: 1px solid #e0e8f0; border-radius: 10px;
    padding: 14px 18px; margin-bottom: 18px;
}
.ais-progress-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; color: #333; margin-bottom: 8px;
}
.ais-progress-head strong { color: #0b2540; font-size: 14px; }
.ais-progress-head span { color: #6c757d; font-size: 12px; }
.ais-progress-bar {
    background: #eef2f6; border-radius: 20px; height: 10px; overflow: hidden;
}
.ais-progress-bar-fill {
    background: linear-gradient(90deg, #28a745 0%, #5bd675 100%);
    height: 100%; transition: width .4s ease;
}

/* ── Layout ── */
.ais-layout {
    display: grid;
    grid-template-columns: 620px 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1200px) {
    /* minmax(0, 1fr), not 1fr (= minmax(auto, 1fr)): the column must not grow to its widest child's min-content. On a
       375 px phone the chart bar's AREA / VESSEL menus (their longest option) made it 388 px and the page 399 px wide,
       the radar's right edge cut off and the page scrolling sideways (2026-10-07) */
    .ais-layout { grid-template-columns: minmax(0, 1fr); }
}

.ais-radar-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================================
   AIS MKD — real radar display
   ============================================================ */
.ais-mkd {
    background: linear-gradient(180deg, #232528 0%, #141516 100%);
    border: 1px solid #000;
    border-radius: 6px;
    padding: 10px;
    box-shadow:
        0 10px 28px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.08);
    user-select: none;
    -webkit-user-select: none;
}

.mkd-top-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px 6px;
    border-bottom: 1px solid #333;
    margin-bottom: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
}
.mkd-brand { color: #f39100; font-weight: bold; letter-spacing: 2px; }
.mkd-mode { color: #888; font-size: 10px; }

.mkd-main {
    position: relative;
    background: #000;
    border: 1px solid #111;
    border-radius: 4px;
    overflow: hidden;
}
#ais-radar {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: #000;
    cursor: crosshair;
}

/* HUD overlays on PPI corners */
.mkd-hud-tl, .mkd-hud-tr, .mkd-hud-bl, .mkd-hud-br {
    position: absolute;
    font-family: 'Share Tech Mono', monospace;
    color: #f0c040;
    font-size: 11px;
    line-height: 1.3;
    pointer-events: none;
    text-shadow: 0 0 3px rgba(240,192,64,0.5);
}
.mkd-hud-tl { top: 8px; left: 10px; }
.mkd-hud-tr { top: 8px; right: 10px; text-align: right; }
.mkd-hud-bl { bottom: 8px; left: 10px; }
.mkd-hud-br { bottom: 8px; right: 10px; text-align: right; }
.hud-label { color: #6a7a80; font-size: 9px; letter-spacing: 1px; }
.hud-val   { color: #f0c040; font-size: 13px; font-weight: bold; }

.mkd-alert {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(180,0,0,0.85);
    color: #fff;
    padding: 6px 18px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    letter-spacing: 3px;
    font-weight: bold;
    border: 2px solid #ff3030;
    border-radius: 3px;
    animation: mkd-blink 0.7s step-end infinite;
    pointer-events: none;
}
@keyframes mkd-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* Control strip */
.mkd-ctl-strip {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-top: 8px;
}
.mkd-btn {
    background: linear-gradient(180deg, #3f4145 0%, #242528 100%);
    color: #e8e8e8;
    border: 1px solid #050505;
    border-radius: 3px;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -2px 3px rgba(0,0,0,0.45),
        0 1px 1px rgba(0,0,0,0.5);
    font-family: Arial, sans-serif;
    transition: background 0.1s;
}
.mkd-btn:hover { background: linear-gradient(180deg, #4a4c50 0%, #2c2d30 100%); }
.mkd-btn:active, .mkd-btn.active {
    background: #16171a;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.65);
    color: #f0c040;
}

/* ── Own-ship control panel ── */
.ais-ctl-panel {
    background: linear-gradient(180deg, #2a2c30 0%, #1a1b1d 100%);
    border: 1px solid #000;
    border-radius: 6px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.ctl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ctl-label {
    color: #888;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    min-width: 110px;
}
.ctl-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
}
/* COG + SOG row attached directly under the MKD button strip */
.mkd-ship-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 8px;
    background: linear-gradient(180deg, #2a2c30 0%, #1a1b1d 100%);
    border: 1px solid #000;
    border-radius: 4px;
    flex-wrap: wrap;
}
.mkd-ship-row .ctl-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
}
.mkd-ship-row .ctl-label {
    min-width: 30px;
    font-size: 10px;
    letter-spacing: 1px;
}
.mkd-ship-row .ctl-value {
    font-size: 16px;
    min-width: 44px;
    padding: 0 3px;
    text-align: center;
}
.mkd-ship-row .rbtn {
    padding: 4px 5px;
    font-size: 9px;
    letter-spacing: 0;
    min-width: 0;
    flex: 0 0 auto;
}
.mkd-ship-row .ctl-group { gap: 4px; min-width: 0; }
.mkd-ship-row .ctl-label { min-width: 28px; font-size: 10px; }

/* COG + SOG side-by-side row */
.ctl-row-combined {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.ctl-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 320px;
}
.ctl-row-combined .ctl-label {
    min-width: 40px;
}

/* Full-screen tweaks — canvas on the left, controls stacked on the right */
/* Full window (2026-10-06): the simulator over the whole window in every browser, an iPhone included. Was the
   element Fullscreen API's :fullscreen; now .is-fullwin on #ais-panel-sim and .ais-fullwin on <html>, set by
   aisFullwinEnter() in ais-simulator.js (Chromium and Safari also go native fullscreen on <html> under it, only to
   hide the browser's bars). Fixed over the window, the dynamic viewport height on phones, clear of the notch and the
   home bar, above the site's header and footer (the cookie banner stays on top); the page under it does not scroll. */
#ais-panel-sim.is-fullwin {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000;
    margin: 0; background: #000; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
@supports (height: 100dvh) {
    #ais-panel-sim.is-fullwin { bottom: auto; height: 100dvh; }
}
#ais-panel-sim.is-fullwin .scenario-panel { display: none; }
#ais-panel-sim.is-fullwin .ais-layout { display: block; }
#ais-panel-sim.is-fullwin .ais-radar-stack { width: 100%; max-width: none; }

#ais-panel-sim.is-fullwin .ais-mkd {
    display: grid;
    grid-template-columns: min(90vh, calc(100vw - 260px)) 1fr;
    grid-template-areas:
        "top  top"
        "main ctl"
        "main ship";
    gap: 8px;
    align-items: start;
}
/* Fullscreen with the bridge window (Free Mode): the out-of-the-window view
   runs the full width across the top like a simulator's front windows; the
   radar drops below it, smaller, with the controls beside it. The class is
   set by bridgeSetActive() in ais-simulator.js. */
/* --bridge-h: the window's height; the radar column takes what is left of
   the screen, never under 240 px. Free Mode 38vh, other scenarios 30vh, fog
   scenarios (nothing to see but grey) 18vh, short landscape phones 24vh. */
#ais-panel-sim.is-fullwin .ais-mkd.has-bridge { --bridge-h: 30vh; }
#ais-panel-sim.is-fullwin .ais-mkd.has-bridge.has-chart { --bridge-h: 32vh; }
#ais-panel-sim.is-fullwin .ais-mkd.has-bridge.bridge-fog { --bridge-h: 18vh; }
@media (orientation: landscape) and (max-height: 520px) {
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge,
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge.has-chart { --bridge-h: 24vh; }
}
#ais-panel-sim.is-fullwin .ais-mkd.has-bridge {
    --radar-w: max(240px, min(calc(100vh - var(--bridge-h) - 120px), 46vw));
    grid-template-columns: var(--radar-w) 1fr;
    grid-template-areas:
        "top    top"
        "bridge bridge"
        "main   ctl"
        "main   ship";
    grid-template-rows: auto auto auto 1fr;
}
#ais-panel-sim.is-fullwin .ais-bridge-wrap { grid-area: bridge; margin-top: 0; }
/* ...and with the chart (Free Mode in a real sea area): radar | controls | chart */
#ais-panel-sim.is-fullwin .ais-mkd.has-bridge.has-chart {
    --radar-w: max(240px, min(calc(100vh - var(--bridge-h) - 135px), 30vw));
    grid-template-columns: var(--radar-w) minmax(0, 1fr) var(--radar-w);
    grid-template-areas:
        "top    top    top"
        "bridge bridge bridge"
        "main   ctl    chart"
        "main   ship   chart"
        "main   inst   chart"
        "main   helm   chart";
    grid-template-rows: auto auto auto auto auto 1fr;
}
#ais-panel-sim.is-fullwin .ais-inst { grid-area: inst; margin-top: 0; }
#ais-panel-sim.is-fullwin .ais-helm { grid-area: helm; margin-top: 0; align-self: start; }
/* Free Mode fullscreen: one row of buttons and a compact helm so it all fits */
#ais-panel-sim.is-fullwin .ais-mkd.has-chart .mkd-ctl-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: none; }
#ais-panel-sim.is-fullwin .ais-mkd.has-chart .mkd-ctl-strip .mkd-btn { padding: 8px 2px; font-size: 11px; }
/* the helm (wheel, lever, AUTO ±1/±10) replaces the COG / REV rows here */
#ais-panel-sim.is-fullwin .ais-mkd.has-chart .mkd-ship-row { display: none; }
#ais-panel-sim.is-fullwin .helm-wheel { width: 84px; height: 84px; }
#ais-panel-sim.is-fullwin .helm-lever { height: 92px; }
#ais-panel-sim.is-fullwin .ais-mkd.has-chart .ais-inst-val b { font-size: 28px; }
#ais-panel-sim.is-fullwin .ais-mkd.has-chart .ais-inst-tile { padding: 4px 8px 3px; }
#ais-panel-sim.is-fullwin .helm-box { padding: 5px 7px; gap: 4px; }
/* the autopilot row (AUTO + four course steps) on one line in the narrow middle column */
#ais-panel-sim.is-fullwin .helm-ap { gap: 3px; }
#ais-panel-sim.is-fullwin .helm-ap .ais-bridge-toggle { padding: 3px 4px; font-size: 9.5px; letter-spacing: 0; }
#ais-panel-sim.is-fullwin .ais-chart-wrap { grid-area: chart; margin-top: 0; }
#ais-panel-sim.is-fullwin .ais-mkd.has-chart .ais-chart { height: calc(var(--radar-w) - 36px); }
#ais-panel-sim.is-fullwin .ais-mkd.has-bridge #ais-bridge {
    aspect-ratio: auto;
    height: var(--bridge-h);
}
/* narrow fullscreen columns: the chart bar wraps, instrument tiles reflow */
#ais-panel-sim.is-fullwin .ais-chart-bar { flex-wrap: wrap; }
#ais-panel-sim.is-fullwin .ais-inst { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
#ais-panel-sim.is-fullwin .ais-mkd.has-bridge .mkd-ctl-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 560px;
}
#ais-panel-sim.is-fullwin .ais-mkd.has-bridge .mkd-ship-row { max-width: 560px; }
@media (orientation: landscape) {
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge.has-chart .mkd-ctl-strip {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        max-width: none;
    }
    /* the chart fills its column down to the radar's foot */
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge.has-chart .ais-chart-wrap:not([hidden]) {
        display: flex;
        flex-direction: column;
        align-self: stretch;
        min-height: 0;
    }
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge.has-chart .ais-chart { flex: 1 1 auto; height: auto; min-height: 180px; }
}
/* tablets: the middle column is narrow — keep wheel | lever | thrusters in one
   row but smaller, and a lower bridge window, so it all fits without scrolling */
@media (max-width: 1180px) {
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge.has-chart { --bridge-h: 24vh; }
    #ais-panel-sim.is-fullwin .ais-helm { grid-template-columns: minmax(0, 1.5fr) 92px minmax(0, 1.1fr); }
    #ais-panel-sim.is-fullwin .helm-wheel { width: 64px; height: 64px; }
    #ais-panel-sim.is-fullwin .helm-lever { width: 82px; min-width: 0; height: 84px; }
}
@media (orientation: portrait) {
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge {
        grid-template-columns: 1fr;
        grid-template-areas: "top" "bridge" "main" "ctl" "ship";
        grid-template-rows: none;
    }
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge #ais-bridge { height: 30vh; }
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge .mkd-main { width: min(100%, 50vh); justify-self: center; }
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge .mkd-ctl-strip,
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge .mkd-ship-row { max-width: none; }
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge.has-chart {
        grid-template-columns: 1fr;
        grid-template-areas: "top" "bridge" "main" "ctl" "ship" "inst" "helm" "chart";
    }
    #ais-panel-sim.is-fullwin .ais-mkd.has-chart .ais-chart { height: 40vh; }
}
#ais-panel-sim.is-fullwin .mkd-top-strip { grid-area: top; }
#ais-panel-sim.is-fullwin .mkd-main      { grid-area: main; }
#ais-panel-sim.is-fullwin .mkd-ctl-strip {
    grid-area: ctl;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
}
#ais-panel-sim.is-fullwin .mkd-ctl-strip .mkd-btn { width: 100%; padding: 10px 8px; font-size: 12px; }
#ais-panel-sim.is-fullwin .mkd-ship-row {
    grid-area: ship;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px;
}
#ais-panel-sim.is-fullwin .mkd-ship-row .ctl-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}
#ais-panel-sim.is-fullwin #ais-radar {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    max-width: none;
}
/* the page under it keeps its place and does not scroll (only <html>: body is height 100%, hiding its overflow
   would cut the page to one screen and lose the scroll position) */
html.ais-fullwin { overflow: hidden !important; overscroll-behavior: none; background: #000; }
/* ✕ EXIT (full window only): top right, a large target over everything in the panel; ⛶ FULL steps aside */
.ais-fullwin-exit { display: none; }
#ais-panel-sim.is-fullwin .ais-fullwin-exit {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; z-index: 40;
    top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
    min-width: 48px; min-height: 44px; padding: 0 14px;
    font: 700 14px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; line-height: 1; white-space: nowrap;
    color: #fff; background: rgba(18, 22, 26, 0.9); border: 2px solid #e8eef2; border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); cursor: pointer; touch-action: manipulation;
}
#ais-panel-sim.is-fullwin .ais-fullwin-exit:hover { border-color: #f39100; color: #f39100; }
#ais-panel-sim.is-fullwin .ais-fullwin-exit:focus-visible { outline: 2px solid #f39100; outline-offset: 2px; }
#ais-panel-sim.is-fullwin #ais-fullscreen { display: none; }
/* the heading row (← Scenarios, the scenario's name) clear of ✕ EXIT and readable on black */
#ais-panel-sim.is-fullwin > div:first-of-type { padding-right: 112px; }
#ais-panel-sim.is-fullwin #ais-sim-title { min-width: 0; color: #cfd8dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Docking mode (2026-10-06, Free Mode: ENTER or ⚓ DOCK; _dockEnter in ais-simulator.js puts .is-dock on the full
   window): since v319 the 2-D harbour plan on #ais-bridge (_d2Frame), the whole screen, north up, the 3-D canvas hidden
   (not rendered either); over it #ais-dock — the
   readout and zoom / ✕ EXIT along the top, her own controls along the bottom (rudder and thrusters left, sails and lines
   next, the engine lever(s) right, under the right thumb). Big targets, safe areas; everything else steps aside. */
#ais-panel-sim.is-fullwin.is-dock { overflow: hidden; }
#ais-panel-sim.is-fullwin.is-dock > :not(.ais-layout):not(.ais-dock):not(.ais-unlock-modal) { display: none !important; }   /* L2: the lessons' unlock dialog shows over docking mode */
#ais-panel-sim.is-fullwin.is-dock .scenario-panel,
#ais-panel-sim.is-fullwin.is-dock .ais-mkd > :not(.ais-bridge-wrap) { display: none !important; }
#ais-panel-sim.is-fullwin.is-dock .ais-bridge-wrap {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30;
    margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #0b1a2a;
}
#ais-panel-sim.is-fullwin.is-dock .ais-mkd #ais-bridge,
#ais-panel-sim.is-fullwin.is-dock .ais-mkd.has-bridge #ais-bridge {
    width: 100%; height: 100%; aspect-ratio: auto; touch-action: none; cursor: grab;
}
#ais-panel-sim.is-fullwin.is-dock .ais-mkd #ais-bridge:active { cursor: grabbing; }
#ais-panel-sim.is-dock .ais-bridge-look,
#ais-panel-sim.is-dock .ais-bridge-tools,
#ais-panel-sim.is-dock .ais-bridge-dial { display: none; }
#ais-panel-sim.is-dock .ais-bridge-3d { visibility: hidden !important; }
.ais-dock[hidden], .ais-dock [hidden] { display: none !important; }
.ais-dock {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 35;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    font: 12px "Share Tech Mono", Menlo, monospace; color: #e6eef8;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ais-dock .dock-panel, .ais-dock .dock-stop {
    pointer-events: auto;
    background: rgba(6, 16, 28, 0.72); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.ais-dock .dock-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ais-dock .dock-hud { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; }
.ais-dock .dock-tile { display: flex; flex-direction: column; min-width: 62px; padding: 2px 7px 3px; border-radius: 6px; }
.ais-dock .dock-tl { font-size: 9px; letter-spacing: 0.08em; color: #9fb3c8; white-space: nowrap; }
.ais-dock .dock-tv { display: flex; align-items: center; gap: 3px; line-height: 1; }
.ais-dock .dock-tv b { font: 400 24px 'VT323', monospace; color: #f0c040; text-shadow: 0 0 6px rgba(240, 192, 64, 0.35); }
.ais-dock .dock-tv small { font-size: 10px; color: #9fb3c8; }
.ais-dock .dock-ts { font-size: 9px; color: #8fa89a; white-space: nowrap; }
.ais-dock .dock-wind { color: #6fd0ff; transition: transform 0.4s linear; flex: 0 0 auto; }
.ais-dock .dock-tile.is-warn { background: rgba(240, 192, 64, 0.22); }
.ais-dock .dock-tile.is-alarm { background: rgba(255, 56, 48, 0.4); }
.ais-dock .dock-tile.is-alarm .dock-tv b { color: #fff; }
.ais-dock .dock-tools { display: flex; gap: 6px; padding: 4px; margin-left: auto; }
.ais-dock .dock-btn {
    min-height: 40px; min-width: 40px; padding: 0 10px; border-radius: 6px; cursor: pointer;
    font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em; white-space: nowrap;
    color: #e6eef8; background: rgba(20, 38, 56, 0.92); border: 1px solid rgba(255, 255, 255, 0.35);
    touch-action: manipulation;
}
.ais-dock .dock-btn:hover { border-color: #f0c040; }
.ais-dock .dock-btn:focus-visible, .ais-dock [role="slider"]:focus-visible { outline: 2px solid #f39100; outline-offset: 2px; }
.ais-dock .dock-btn[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.ais-dock .dock-btn:disabled { opacity: 0.4; cursor: default; }
.ais-dock .dock-btn.is-ready { border-color: #2de66f; color: #2de66f; }
.ais-dock .dock-sq { width: 44px; padding: 0; font-size: 16px; }
.ais-dock [data-dock-thr], .ais-dock [data-dock-pivot], .ais-dock #dock-rud-l, .ais-dock #dock-rud-r { touch-action: none; }
.ais-dock .dock-exit { border: 2px solid #e8eef2; font-size: 13px; }
.ais-dock .dock-exit:hover { color: #f39100; border-color: #f39100; }
.ais-dock .dock-mid { position: relative; flex: 1 1 auto; min-height: 0; }
.ais-dock .dock-msg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: max-content; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ais-dock .dock-line {
    padding: 4px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.66); text-align: center;
    font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.03em; color: #7fd4ff; white-space: normal;
}
.ais-dock .dock-line.is-ok { color: #2de66f; }
.ais-dock .dock-line.is-warn { color: #f0c040; }
.ais-dock .dock-line.is-stop { color: #ff3830; }
.ais-dock .dock-stop {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 92%;
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px;
    background: rgba(32, 0, 0, 0.9); border: 2px solid #ff3830; text-align: center;
}
.ais-dock .dock-stop b { font: 700 26px Arial, sans-serif; color: #ff3830; letter-spacing: 0.04em; }
.ais-dock .dock-stop span { color: #ffd760; font-size: 12px; }
.ais-dock .dock-scale { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(6, 16, 28, 0.55); font-size: 11px; }
.ais-dock .dock-scale i { display: block; height: 6px; width: 60px; border: 2px solid #e6eef8; border-top: 0; }
.ais-dock .dock-north { color: #f0c040; font-weight: 700; }
.ais-dock .dock-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ais-dock .dock-lab { font-size: 10px; letter-spacing: 0.08em; color: #9fb3c8; white-space: nowrap; }
.ais-dock .dock-row > .dock-lab { min-width: 40px; text-align: right; }
.ais-dock .dock-val { font: 400 20px 'VT323', monospace; color: #f0c040; line-height: 1; white-space: nowrap; }
.ais-dock .dock-val-sm { font-size: 17px; min-width: 44px; text-align: center; }
/* EACH SAIL ON ITS OWN in docking mode (2026-10-09): with a sail plan the MAIN / JIB labels are toggles (_dockUI, _dockSailGrp), lit
   while that sail is set; an outline, not a border or side padding, so the rows keep their width on a phone */
.ais-dock .dock-row > .dock-lab[role="button"] { cursor: pointer; padding: 9px 0; border-radius: 4px; outline: 1px solid rgba(255, 255, 255, 0.35); outline-offset: -1px; text-align: center; touch-action: manipulation; }
.ais-dock .dock-row > .dock-lab[aria-pressed="true"] { background: #2de66f; color: #06210f; outline-color: #2de66f; }
/* the bottom: thrusters over the rudder | sails over MAKE FAST over the fenders and lines | … | the engine lever(s) */
.ais-dock .dock-deck {
    display: grid; gap: 8px; align-items: end;
    grid-template-columns: auto 1fr auto; grid-template-areas: "b b b" "l l l" "a . e";
}
.ais-dock .dock-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ais-dock .dock-col-a { grid-area: a; align-items: flex-start; }
.ais-dock .dock-col-b { grid-area: b; flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.ais-dock .dock-eng { grid-area: e; }
@media (orientation: landscape) {
    .ais-dock .dock-deck { grid-template-columns: auto auto 1fr auto; grid-template-areas: "a b . e" "a l . e"; }
    .ais-dock .dock-col-b { flex-direction: column; align-items: stretch; }
}
.ais-dock .dock-thr, .ais-dock .dock-steer, .ais-dock .dock-sail, .ais-dock .dock-act { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; }
.ais-dock .dock-thr .dock-btn[aria-pressed="true"] { background: #f0c040; border-color: #f0c040; color: #1a1200; }
/* v323 (owner: "the bow thruster must be marked which way it pushes: to the green or the red side"): every control that
   pushes an end of her sideways — the bow and stern thrusters, a catamaran's PIVOT, the big ships' tugs — is red where
   it pushes that end to PORT and green to STARBOARD (the plan's thruster arrows the same), bright while it pushes */
.ais-dock [data-dock-thr][data-d="-1"], .ais-dock [data-dock-tug][data-d="-1"], .ais-dock [data-dock-pivot="-1"] { color: #ff9a92; border-color: rgba(232, 72, 64, 0.9); background: rgba(120, 22, 24, 0.62); }
.ais-dock [data-dock-thr][data-d="1"], .ais-dock [data-dock-tug][data-d="1"], .ais-dock [data-dock-pivot="1"] { color: #8ff2b2; border-color: rgba(45, 190, 100, 0.9); background: rgba(16, 92, 44, 0.62); }
.ais-dock .dock-thr .dock-btn[data-dock-thr][data-d="-1"][aria-pressed="true"], .ais-dock .dock-thr [data-dock-tug][data-d="-1"]:active, .ais-dock .dock-thr [data-dock-pivot="-1"]:active { background: #d8342c; border-color: #ffb0a8; color: #fff; }
.ais-dock .dock-thr .dock-btn[data-dock-thr][data-d="1"][aria-pressed="true"], .ais-dock .dock-thr [data-dock-tug][data-d="1"]:active, .ais-dock .dock-thr [data-dock-pivot="1"]:active { background: #1d9a4a; border-color: #b4f5c8; color: #fff; }
/* ☾ / ☀ (v323): the plan by night or by day; amber while it overrides the real sky */
.ais-dock #dock-dn { font-size: 18px; }
.ais-dock #dock-dn[aria-pressed="true"] { background: rgba(240, 192, 64, 0.22); border-color: #f0c040; color: #f0c040; }
/* CHART / PHOTO (v333): the docking plan as the harbour from the air (default) or as the clean chart plan; it names the
   other look, in small letters to fit a square; the chart look is a choice, not an alarm: no green "on" fill */
.ais-dock #dock-look { font-size: 10px; letter-spacing: 0; }
.ais-dock #dock-look[aria-pressed="true"] { background: rgba(20, 38, 56, 0.92); border-color: rgba(255, 255, 255, 0.35); color: #e6eef8; }
/* FORCES (DOCKING PLAN — FORCES): the wash, wind, current and drift drawn on the plan; a view choice like CHART, so no green
   "on" fill: a wind-blue edge while they show, dimmed and dashed while hidden */
.ais-dock #dock-fx { font-size: 10px; letter-spacing: 0; }
.ais-dock #dock-fx[aria-pressed="true"] { background: rgba(20, 38, 56, 0.92); border-color: #6fd0ff; color: #cfeeff; }
.ais-dock #dock-fx[aria-pressed="false"] { color: #8193a6; border-style: dashed; }
@media (max-height: 520px), (max-width: 420px) { .ais-dock #dock-fx { font-size: 9px; } }      /* six letters in a 40 px square */
/* ┄ GUIDE (2026-10-09; ais-simulator.js _guide*): the recommended track's switch — in the docking tools after FORCES, in the 3-D
   view's tools, in a drill's panel (_guideBtn). Off: dashed and grey, as SOUND off. The chart's captions: small, the plan's ink. */
.ais-dock #dock-guide { font-size: 10px; letter-spacing: 0; }
.ais-dock #dock-guide[aria-pressed="true"] { background: rgba(20, 38, 56, 0.92); border-color: #b9dcff; color: #e6f3ff; }
.ais-dock #dock-guide[aria-pressed="false"] { color: #8193a6; border-style: dashed; }
@media (max-height: 520px), (max-width: 420px) { .ais-dock #dock-guide { font-size: 9px; } }
:where(.guide-btn.is-off) { color: #8fa1b3; border-style: dashed; }
.ais-bridge-toggle.guide-btn[aria-pressed="true"] { border-color: rgba(214, 236, 255, 0.7); }
.guide-plain { font: 700 10px/1.2 "Share Tech Mono", Menlo, Consolas, monospace; letter-spacing: 0.04em; padding: 3px 7px; border: 1px solid rgba(214, 236, 255, 0.55);
    border-radius: 4px; background: rgba(8, 24, 38, 0.6); color: #e6f3ff; cursor: pointer; touch-action: manipulation; }
@media (pointer: coarse) { .guide-plain { min-height: 32px; padding: 6px 10px; } }
.guide-ch-lab { white-space: nowrap; font: 700 10px/12px "Share Tech Mono", Menlo, Consolas, monospace; color: #1f3d5c; text-shadow: 0 0 2px #fff, 0 0 3px #fff; pointer-events: none; }
.guide-ch-lab i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: rgba(31, 61, 92, 0.55); vertical-align: 0; }
/* seven tools on a phone: ⌖ alone (no CENTRE word), the squares a little narrower */
@media (max-width: 480px) {
    .ais-dock #dock-centre { min-width: 40px; padding: 0 6px; font-size: 16px; }
    .ais-dock #dock-centre .dock-centre-t { display: none; }
    .ais-dock .dock-tools { gap: 4px; }
}
/* ... it makes six tools: on the narrowest phones (under 360 px) they wrap rather than run off the screen */
@media (max-width: 359px) { .ais-dock .dock-tools { flex-wrap: wrap; justify-content: flex-end; } }
.ais-dock .dock-kayak { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; }
.ais-dock .dock-kayak .dock-btn[aria-pressed="true"] { background: #f39100; border-color: #f39100; color: #1a1000; }
.ais-dock #dock-brace { min-width: 84px; touch-action: none; }
.ais-dock #dock-kroll, .ais-dock #dock-kreenter, .ais-dock #dock-right { background: #c8202a; border-color: #c8202a; color: #fff; }
.ais-dock .dock-eng > .dock-lab { align-self: flex-start; }
.ais-dock .dock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ais-dock .dock-head .dock-val { min-width: 0; text-align: right; }
/* v325 (L1): Harbour Ready — the docking lessons in the docking overlay (_lesUiBuild … in ais-simulator.js): LESSONS
   beside ✕ EXIT, the ladder drawer (right; a full-height sheet on a phone), the lesson card / question / debrief over the
   plan (a bottom sheet on a phone, the debrief beside the plan so her track shows), and the run HUD in the top bar (a
   .dock-panel, so the camera keeps her out from under it). The lesson colour is teal (no IALA mark uses it); stars gold.
   During a lesson MAKE FAST, HARBOUR, the sails, STOP ENGINE and the collision banner step aside (.is-lesson): a lesson
   is under engine, its lines go one by one, and the debrief says what happened. */
.ais-dock.is-lesson #dock-moor, .ais-dock.is-lesson .dock-harb, .ais-dock.is-lesson .dock-stop,
.ais-dock.is-lesson #dock-sail, .ais-dock.is-lesson #dock-engine { display: none !important; }
.ais-dock .dock-les-btn { border-color: rgba(14, 154, 167, 0.95); color: #8eeaf0; }
.ais-dock .dock-les-btn[aria-pressed="true"] { background: #0e9aa7; border-color: #0e9aa7; color: #02181b; }
.ais-dock .dock-les-hud { display: flex; flex-direction: column; gap: 3px; padding: 5px 8px 6px; max-width: 520px; min-width: 0; flex: 1 1 260px; border-color: rgba(14, 154, 167, 0.7); }
.ais-dock .dock-les-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ais-dock .dock-les-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8eeaf0; font-size: 12px; letter-spacing: 0.04em; }
.ais-dock .dock-les-timer { font: 400 19px 'VT323', monospace; color: #f0c040; white-space: nowrap; }
.ais-dock .dock-les-timer.is-over { color: #ffb347; }
.ais-dock .dock-les-row .dock-btn { min-height: 32px; min-width: 32px; padding: 0 8px; font-size: 11px; }
.ais-dock .dock-les-goal { font-size: 12px; line-height: 1.35; color: #e6eef8; white-space: normal; }
.ais-dock .dock-les-objs { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 11px; }
.ais-dock .dock-les-obj { white-space: nowrap; color: #9fb3c8; }
.ais-dock .dock-les-obj.is-ok { color: #2de66f; }
.ais-dock .dock-les-obj.is-keep { color: #c9d6e3; }
.ais-dock .dock-les-obj.is-bad { color: #ff6a60; }
.ais-dock .dock-les-nums { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.ais-dock .dock-les-num { display: flex; align-items: baseline; gap: 4px; }
.ais-dock .dock-les-num small { font-size: 9px; letter-spacing: 0.08em; color: #9fb3c8; }
.ais-dock .dock-les-num b { font: 400 19px 'VT323', monospace; color: #f0c040; }
.ais-dock .dock-les-feed { min-height: 0; font-weight: 700; font-size: 12px; }
.ais-dock .dock-les-feed:empty { display: none; }
.ais-dock .dock-les-feed.is-touch { color: #b8c4d0; }
.ais-dock .dock-les-feed.is-hard { color: #f0a020; }
.ais-dock .dock-les-feed.is-collision { color: #ff3830; }
.ais-dock .dock-les-cue { font-size: 11px; color: #8eeaf0; cursor: pointer; white-space: normal; }
.ais-dock .dock-les-cue:empty { display: none; }
/* the ladder */
.ais-dock .dock-les-drawer {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; width: min(380px, 100%); overflow-y: auto; -webkit-overflow-scrolling: touch;
    pointer-events: auto; padding: max(10px, env(safe-area-inset-top)) 12px 16px; background: rgba(6, 16, 28, 0.96);
    border-left: 1px solid rgba(14, 154, 167, 0.6); box-shadow: -6px 0 24px rgba(0, 0, 0, 0.45); -webkit-user-select: text; user-select: text;
}
.ais-dock .dock-les-dhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ais-dock .dock-les-dhead b { color: #8eeaf0; letter-spacing: 0.06em; font-size: 12px; }
.ais-dock .dock-les-prog, .ais-dock .dock-les-note { color: #9fb3c8; font-size: 11px; margin: 4px 0 8px; line-height: 1.45; white-space: normal; }
.ais-dock .dock-les-mod h4 { color: #e6eef8; font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em; margin: 12px 0 2px; }
.ais-dock .dock-les-why { color: #9fb3c8; font-size: 11px; line-height: 1.45; margin: 0 0 6px; white-space: normal; }
.ais-dock .dock-les-item {
    display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 48px; margin: 0 0 6px; padding: 7px 10px; text-align: left; cursor: pointer;
    font: 12px "Share Tech Mono", Menlo, monospace; color: #e6eef8; background: rgba(20, 38, 56, 0.92); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px;
}
.ais-dock .dock-les-item:hover, .ais-dock .dock-les-item:focus-visible { border-color: #0e9aa7; }
.ais-dock .dock-les-item.is-on { border-color: #0e9aa7; box-shadow: inset 3px 0 0 #0e9aa7; }
.ais-dock .dock-les-it { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ais-dock .dock-les-stars { color: #f0c040; letter-spacing: 0.1em; white-space: nowrap; }
.ais-dock .dock-les-meta { color: #9fb3c8; font-size: 11px; white-space: normal; }
.ais-dock .dock-les-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ais-dock .dock-les-tags i { font-style: normal; font-size: 10px; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.25); color: #c9d6e3; }
.ais-dock .dock-les-tags .dock-les-free { border-color: #2de66f; color: #2de66f; }
.ais-dock .dock-les-tags .dock-les-rec { border-color: #0e9aa7; color: #8eeaf0; }
.ais-dock .dock-btn.dock-les-wide { width: 100%; margin-top: 10px; white-space: normal; min-height: 44px; }
/* the card, the question, the debrief */
.ais-dock .dock-les-modal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 12px; pointer-events: auto; background: rgba(2, 8, 16, 0.32); }
.ais-dock .dock-les-modal.is-debrief, .ais-dock .dock-les-modal.is-between { justify-content: flex-end; background: transparent; pointer-events: none; }
.ais-dock .dock-les-card {
    pointer-events: auto; width: min(560px, 100%); max-height: calc(100% - 8px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 12px;
    background: rgba(8, 20, 34, 0.97); border: 1px solid rgba(14, 154, 167, 0.7); border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    font: 13px/1.5 Arial, Helvetica, sans-serif; color: #e6eef8; -webkit-user-select: text; user-select: text;
}
.ais-dock .dock-les-modal.is-debrief .dock-les-card, .ais-dock .dock-les-modal.is-between .dock-les-card { width: min(440px, 100%); }
.ais-dock .dock-les-kicker { font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.06em; color: #8eeaf0; }
.ais-dock .dock-les-card h3 { margin: 4px 0 6px; font: 700 20px Arial, Helvetica, sans-serif; color: #fff; }
.ais-dock .dock-les-card h3.is-fail { color: #ffb347; }
.ais-dock .dock-les-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.ais-dock .dock-les-chips span { font: 11px "Share Tech Mono", Menlo, monospace; padding: 2px 7px; border-radius: 5px; background: rgba(14, 154, 167, 0.16); border: 1px solid rgba(14, 154, 167, 0.5); color: #c9eef1; }
.ais-dock .dock-les-goalb { font-weight: 700; color: #fff; margin: 0 0 8px; }
.ais-dock .dock-les-brief { margin: 0 0 6px; color: #d5dde6; }
.ais-dock .dock-les-pre { margin: 0 0 8px; color: #9fb3c8; font-size: 12px; }
.ais-dock .dock-les-link { background: none; border: 0; padding: 0; color: #8eeaf0; text-decoration: underline; cursor: pointer; font: inherit; }
.ais-dock .dock-les-cues, .ais-dock .dock-les-facts, .ais-dock .dock-les-rows { margin: 4px 0 8px 18px; padding: 0; color: #d5dde6; }
.ais-dock .dock-les-cues li, .ais-dock .dock-les-facts li, .ais-dock .dock-les-rows li { margin: 0 0 3px; }
.ais-dock .dock-les-rows li.is-full { color: #8fe0a8; }
.ais-dock .dock-les-keys { font-size: 12px; color: #9fb3c8; margin: 0 0 6px; }
.ais-dock .dock-les-rules summary { cursor: pointer; color: #8eeaf0; font-size: 12px; }
.ais-dock .dock-les-rules p { margin: 4px 0; font-size: 12px; color: #c9d6e3; }
.ais-dock .dock-les-btns { position: sticky; bottom: -12px; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 2px; background: rgba(8, 20, 34, 0.97); }
.ais-dock .dock-les-btns .dock-btn { min-height: 44px; }
.ais-dock .dock-les-btns .dock-les-go { background: #0e9aa7; border-color: #0e9aa7; color: #02181b; }
.ais-dock .dock-les-btns .dock-les-opt { flex: 1 1 140px; }
.ais-dock .dock-les-starrow { display: flex; gap: 12px; margin: 4px 0 6px; }
.ais-dock .dock-les-star { display: flex; flex-direction: column; align-items: center; color: #6c7f92; }
.ais-dock .dock-les-star b { font-size: 20px; line-height: 1; }
.ais-dock .dock-les-star small { font: 10px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.04em; }
.ais-dock .dock-les-star.is-on { color: #f0c040; }
.ais-dock .dock-les-starrow.is-big .dock-les-star b { font-size: 30px; }
.ais-dock .dock-les-score b { font: 400 34px 'VT323', monospace; color: #f0c040; }
.ais-dock .dock-les-score span { color: #9fb3c8; font-size: 12px; }
.ais-dock .dock-les-bars { display: grid; gap: 3px; margin: 6px 0; }
.ais-dock .dock-les-bar { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: 6px; font-size: 12px; }
.ais-dock .dock-les-bar i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ais-dock .dock-les-bar em { display: block; height: 100%; background: #0e9aa7; }
.ais-dock .dock-les-bar small { color: #9fb3c8; text-align: right; }
.ais-dock .dock-les-tip { margin: 6px 0; padding: 6px 9px; border-left: 3px solid #f0c040; background: rgba(240, 192, 64, 0.08); color: #f5e6bd; }
/* PRE-CHARTER (Module 8, 2026-10-09): a check part's card — the radio's display (the VHF trainer's light LCD: dark ink on
   teal, never bright colours), the ship's radio licence beside it, long choices in sentence case, a struck-out answer; the
   course link (the VHF Radio Course) and a module's links (parts A / B elsewhere in the simulator) in the ladder */
.ais-dock .dock-les-pcw { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 2px 0 10px; }
.ais-dock .dock-les-lcd {
    display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 150px; min-height: 64px; padding: 6px 12px;
    border: 3px solid #0a0a0a; border-radius: 5px; color: #0a1410; font: 17px/1.1 'VT323', 'Share Tech Mono', Menlo, monospace; letter-spacing: 0.06em;
    background: radial-gradient(ellipse at 30% 20%, #9cc0b4 0%, #6e9687 45%, #537e6f 100%); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
.ais-dock .dock-les-lcd span.is-big { font-size: 26px; }
.ais-dock .dock-les-lcd.is-off { background: #2a3430; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7); }
.ais-dock .dock-les-paper {
    display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 150px; padding: 6px 12px; border-radius: 3px;
    background: #f4f1e8; color: #1d2733; font: 12px/1.35 Arial, Helvetica, sans-serif; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ais-dock .dock-les-paper b { font-size: 11px; letter-spacing: 0.08em; color: #44505e; }
.ais-dock .dock-les-btns.dock-les-pcrow { position: static; flex-direction: column; }
.ais-dock .dock-les-btns .dock-les-pctile { white-space: normal; line-height: 1.25; }
.ais-dock .dock-les-why.dock-les-pcmiss { margin: 0 0 8px; padding: 5px 9px; border-left: 3px solid #f0c040; background: rgba(240, 192, 64, 0.08); color: #f5e6bd; font-size: 12px; }
.ais-dock .dock-les-btns .dock-les-pcopt {
    flex: 1 1 auto; min-height: 44px; padding: 8px 12px; text-align: left; white-space: normal; letter-spacing: 0;
    font: 13px/1.4 Arial, Helvetica, sans-serif;
}
.ais-dock .dock-les-btns .dock-les-pcopt.is-out { opacity: 0.45; text-decoration: line-through; cursor: default; }
.ais-dock .dock-les-btns .dock-les-pcopt.is-out:hover { border-color: rgba(255, 255, 255, 0.35); }
.ais-dock .dock-les-course { margin: 8px 0 4px; padding: 6px 9px; border-left: 3px solid #0e9aa7; background: rgba(14, 154, 167, 0.1); color: #d5dde6; font-size: 12px; }
.ais-dock .dock-les-course a { color: #8eeaf0; font-weight: 700; white-space: nowrap; }
.ais-dock .dock-les-link-item { border-style: dashed; }
/* L2 (Modules 2-3): the subscriber tag and note, the levels, the demo bar under the plan, the GHOST button. The ghost itself
   is drawn on the plan in grey pencil dashes (ais-simulator.js _lesGhostDraw); the unlock dialog is the page's own
   .ais-unlock-modal, placed inside the full window so it shows over docking mode. */
.ais-dock .dock-les-tags .dock-les-lock { border-color: rgba(240, 192, 64, 0.7); color: #f0c040; }
.ais-dock .dock-les-lockn { margin: 0 0 8px; padding: 5px 8px; border-left: 3px solid #f0c040; background: rgba(240, 192, 64, 0.08); color: #f5e6bd; font-size: 12px; }
.ais-dock .dock-les-levels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.ais-dock .dock-les-levels .dock-btn { min-height: 36px; font-size: 11px; }
.ais-dock .dock-les-levels .dock-les-lvl.is-on { background: #0e9aa7; border-color: #0e9aa7; color: #02181b; }
.ais-dock .dock-les-btns .dock-les-demo:disabled { opacity: 0.45; }
.ais-dock .dock-les-modal.is-demo { align-items: flex-end; background: transparent; pointer-events: none; }
.ais-dock .dock-les-modal.is-demo .dock-les-card { width: min(520px, 100%); padding: 8px 12px 6px; }
.ais-dock .dock-les-demo-cap { margin: 4px 0 0; min-height: 18px; font: 13px "Share Tech Mono", Menlo, monospace; color: #e6eef8; }
.ais-dock .dock-les-row .dock-les-ghostb[aria-pressed="true"] { background: #6b7684; border-color: #9aa5b3; color: #fff; }
.ais-dock .dock-les-row .dock-les-guideb[aria-pressed="true"], .ais-dock .dock-les-btns .dock-les-guideb[aria-pressed="true"] { background: #2c5272; border-color: #6f9cc4; color: #fff; }   /* GUIDE · HARBOUR READY: the line on */
.ais-dock .dock-les-row .dock-btn { flex: none; }      /* GHOST, RETRY, ✕ keep their size; the title gives way (L2) */
@media (max-width: 480px) {      /* a phone: the title on its own line, the clock and the buttons under it (L2: GHOST made the row too long) */
    .ais-dock .dock-les-row { flex-wrap: wrap; row-gap: 2px; }
    .ais-dock .dock-les-row .dock-les-title { flex: 1 1 100%; }
    .ais-dock .dock-les-row .dock-les-timer { margin-right: auto; }
}
@media (max-width: 480px) {
    .ais-dock .dock-tools { flex-wrap: wrap; justify-content: flex-end; }      /* LESSONS beside ✕ EXIT: a second row on a phone */
}
@media (max-width: 600px) {
    .ais-dock .dock-les-hud { flex-basis: 100%; max-width: none; order: 3; }
    .ais-dock .dock-les-cue, .ais-dock .dock-les-objs .dock-les-obj.is-keep { display: none; }
    .ais-dock .dock-les-modal { align-items: flex-end; padding: 0; }
    .ais-dock .dock-les-modal.is-debrief, .ais-dock .dock-les-modal.is-between { justify-content: center; }
    .ais-dock .dock-les-card, .ais-dock .dock-les-modal.is-debrief .dock-les-card, .ais-dock .dock-les-modal.is-between .dock-les-card {
        width: 100%; max-height: 62vh; border-radius: 14px 14px 0 0; padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    .ais-dock .dock-les-drawer { width: 100%; border-left: 0; }
    .ais-dock .dock-les-modal.is-demo .dock-les-card { border-radius: 14px 14px 0 0; }
}
.ais-dock .dock-rudder {
    position: relative; width: clamp(100px, 24vw, 220px); height: 44px; cursor: ew-resize; touch-action: none;
    border-radius: 6px; background: linear-gradient(90deg, rgba(200, 32, 42, 0.55), rgba(26, 26, 26, 0.7) 48%, rgba(26, 26, 26, 0.7) 52%, rgba(31, 138, 58, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.ais-dock .dock-rudder i { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.5); }
.ais-dock .dock-rudder b {
    position: absolute; left: 50%; top: 3px; bottom: 3px; width: 14px; margin-left: -7px; border-radius: 4px;
    background: #f0c040; box-shadow: 0 0 6px rgba(240, 192, 64, 0.6);
}
.ais-dock .dock-act { flex-direction: row; flex-wrap: wrap; }
.ais-dock .dock-act .dock-btn { flex: 1 1 auto; }
/* fenders and lines (2026-10-07): FENDERS P / S (white while out) and ALL OFF over the four lines (a small boat's one
   painter), each — / THROWN (amber, held) / FAST (green; red near its breaking load) */
.ais-dock .dock-lines { grid-area: l; justify-self: start; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; }
.ais-dock .dock-lines .dock-row { justify-content: flex-start; flex-wrap: nowrap; }
.ais-dock .dock-fgrp { display: inline-flex; align-items: center; gap: 6px; }
.ais-dock .dock-fgrp[hidden], .ais-dock .dock-ln[hidden] { display: none; }
.ais-dock .dock-fend[aria-pressed="true"] { background: #e8eef2; border-color: #e8eef2; color: #0b1a2a; }
.ais-dock .dock-ln { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 52px; padding: 0 6px; line-height: 1.05; }
.ais-dock .dock-ln small { font-size: 9px; font-weight: 400; letter-spacing: 0.02em; color: #9fb3c8; }
.ais-dock .dock-ln.is-thrown { border-color: #f0c040; background: rgba(240, 192, 64, 0.22); }
.ais-dock .dock-ln.is-thrown small { color: #f0c040; }
.ais-dock .dock-ln.is-fast { background: #2de66f; border-color: #2de66f; color: #06210f; }
.ais-dock .dock-ln.is-fast small { color: #0c3a1c; }
.ais-dock .dock-ln.is-strain { background: #ff5040; border-color: #ff5040; color: #fff; }
.ais-dock .dock-ln.is-strain small { color: #fff; }
/* the line pairs (2026-10-08, _linePairs): the slot's caption over a P half and an S half, tinted red and green as the
   thrusters, a red / green bar under each whatever its state; a single line (a lazy line, a painter) one button */
.ais-dock .dock-lpair { display: inline-flex; flex-direction: column; align-items: stretch; gap: 2px; }
.ais-dock .dock-lpair[hidden], .ais-dock .dock-lcap[hidden] { display: none; }
.ais-dock .dock-lcap { font: 700 9px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.06em; line-height: 1; color: #c9d6e2; text-align: center; white-space: nowrap; }
.ais-dock .dock-lhalves { display: inline-flex; gap: 2px; }
.ais-dock .dock-lhalves .dock-ln { min-width: 36px; padding: 0 4px; }
.ais-dock .dock-lhalves .dock-ln.is-one { min-width: 52px; }
.ais-dock .dock-ln.is-p:not(.is-one) { color: #ff9a92; border-color: rgba(232, 72, 64, 0.9); background: rgba(120, 22, 24, 0.62); box-shadow: inset 0 -3px 0 #d8342c; }
.ais-dock .dock-ln.is-s:not(.is-one) { color: #8ff2b2; border-color: rgba(45, 190, 100, 0.9); background: rgba(16, 92, 44, 0.62); box-shadow: inset 0 -3px 0 #1d9a4a; }
.ais-dock .dock-ln.is-p.is-thrown, .ais-dock .dock-ln.is-s.is-thrown { border-color: #f0c040; background: rgba(240, 192, 64, 0.22); }
.ais-dock .dock-ln.is-p.is-fast, .ais-dock .dock-ln.is-s.is-fast { background: #2de66f; border-color: #2de66f; color: #06210f; }
.ais-dock .dock-ln.is-p.is-strain, .ais-dock .dock-ln.is-s.is-strain { background: #ff5040; border-color: #ff5040; color: #fff; }
.ais-dock .dock-eng { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; }
.ais-dock .dock-levers { display: flex; align-items: stretch; gap: 6px; height: clamp(130px, 30vh, 230px); }
.ais-dock .dock-lever {
    position: relative; width: 52px; cursor: ns-resize; touch-action: none; border-radius: 8px;
    background: linear-gradient(180deg, rgba(31, 138, 58, 0.45), rgba(20, 30, 40, 0.8) 46%, rgba(20, 30, 40, 0.8) 54%, rgba(200, 32, 42, 0.45));
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.ais-dock .dock-lever i { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 6px; margin-left: -3px; border-radius: 3px; background: #05080a; }
.ais-dock .dock-lever b {
    position: absolute; left: 3px; right: 3px; top: 50%; height: 20px; margin-top: -10px; border-radius: 5px;
    background: #d9dde2; border: 1px solid #6d7278; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.ais-dock .dock-lever.is-port b { background: #e0464e; border-color: #7a1a1f; }
.ais-dock .dock-lever.is-stbd b { background: #35c46a; border-color: #135a2c; }
.ais-dock .dock-lever.is-off { opacity: 0.45; }
.ais-dock .dock-orders { display: flex; flex-direction: column; justify-content: space-between; }
.ais-dock .dock-orders button {
    flex: 1 1 0; min-height: 0; padding: 0 4px; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
    font: 700 10px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.04em; color: #8fe0a8; touch-action: manipulation;
}
.ais-dock .dock-orders button.is-stop { color: #f0c040; }
.ais-dock .dock-orders button.is-astern { color: #ff9c8a; }
.ais-dock .dock-orders button:hover { background: rgba(255, 255, 255, 0.12); }
/* small screens: a little tighter */
@media (max-height: 520px), (max-width: 420px) {
    .ais-dock { gap: 6px; }
    .ais-dock .dock-tile { min-width: 54px; padding: 1px 5px 2px; }
    .ais-dock .dock-tv b { font-size: 20px; }
    .ais-dock .dock-ts { display: none; }
    .ais-dock .dock-thr, .ais-dock .dock-steer, .ais-dock .dock-sail, .ais-dock .dock-act, .ais-dock .dock-eng { padding: 4px 6px; gap: 4px; }
    .ais-dock .dock-btn { min-height: 38px; padding: 0 8px; }
    .ais-dock .dock-sq { width: 40px; }
    .ais-dock .dock-rudder { height: 40px; width: clamp(96px, 22vw, 190px); }
    .ais-dock .dock-row > .dock-lab { min-width: 34px; }
}
@media (max-height: 520px) and (orientation: landscape) {
    .ais-dock .dock-levers { height: clamp(110px, 38vh, 170px); }
    .ais-dock .dock-thr .dock-btn, .ais-dock .dock-sail .dock-btn, .ais-dock .dock-act .dock-btn, .ais-dock .dock-tools .dock-btn, .ais-dock .dock-lines .dock-btn { min-height: 34px; }
    .ais-dock .dock-lines { padding: 4px 6px; gap: 4px; }
    .ais-dock .dock-tv b { font-size: 18px; }
}
/* a phone upright: the sails beside the lines (one row), the rudder and the lever(s) side by side, a shorter lever */
@media (max-width: 480px) and (orientation: portrait) {
    .ais-dock .dock-tile { flex: 1 1 0; min-width: 0; }
    .ais-dock .dock-hud { flex: 1 1 100%; flex-wrap: nowrap; }
    .ais-dock .dock-col-b { flex-wrap: nowrap; }
    .ais-dock .dock-act { flex-direction: column; }
    .ais-dock .dock-sail .dock-btn, .ais-dock .dock-act .dock-btn { padding: 0 6px; min-height: 36px; }
    .ais-dock .dock-row > .dock-lab { min-width: 30px; }
    .ais-dock .dock-steer .dock-sq, .ais-dock #dock-mid { width: 36px; min-width: 36px; padding: 0; }
    .ais-dock .dock-rudder { width: clamp(76px, 22vw, 150px); }
    .ais-dock .dock-row { gap: 5px; }
    .ais-dock .dock-levers { height: clamp(120px, 24vh, 200px); gap: 4px; }
    .ais-dock .dock-lever { width: 40px; }
    .ais-dock .dock-orders button { font-size: 9px; padding: 0 2px; }
    .ais-dock .dock-eng .dock-btn { padding: 0 6px; font-size: 11px; }
    /* the fenders and lines in one row across the screen: P S · BOW F.SPR A.SPR STERN · ALL OFF */
    .ais-dock .dock-lines { flex-direction: row; justify-self: stretch; justify-content: space-between; align-items: center; gap: 4px; padding: 4px 6px; }
    .ais-dock .dock-lines .dock-row { display: contents; }
    .ais-dock .dock-fgrp { gap: 4px; }
    .ais-dock .dock-fgrp .dock-lab { display: none; }
    .ais-dock .dock-lines .dock-btn { min-width: 40px; min-height: 38px; padding: 0 4px; font-size: 10px; letter-spacing: 0.02em; }
    .ais-dock .dock-lines .dock-sq { width: 40px; }
    .ais-dock .dock-off { order: 2; }
}
/* v319 (mooring): a phone upright — the fenders row's B·S (bow and stern) and ANCHOR make nine buttons across with the
   line slots and ALL OFF: a little narrower, so ALL OFF stays on the screen (375 px) */
@media (max-width: 480px) and (orientation: portrait) {
    .ais-dock .dock-lines .dock-btn { min-width: 34px; padding: 0 2px; }
    .ais-dock .dock-lines .dock-sq { width: 34px; }
    .ais-dock .dock-lines .dock-ln b { font-size: 9px; letter-spacing: 0; }
}
/* v319: a phone upright leaves the harbour plan more room — HOIST / DROP beside the two sheets, a shorter lever */
@media (max-width: 480px) and (orientation: portrait) {
    .ais-dock .dock-sail { display: grid; grid-template-columns: auto auto; column-gap: 6px; row-gap: 4px; align-items: center; }
    .ais-dock #dock-sails { grid-row: 1 / span 2; align-self: stretch; width: 60px; min-width: 60px; padding: 0 4px; white-space: normal; line-height: 1.2; }
    .ais-dock .dock-levers { height: clamp(116px, 18vh, 160px); }
}
/* ⚓ DOCK beside the boat's name in the helm (Free Mode) */
.helm-dock-btn {
    flex: 0 1 auto; padding: 6px 8px; cursor: pointer; white-space: nowrap;
    font: 700 11px "Share Tech Mono", Menlo, monospace; color: #f0c040; background: #0d1512; border: 1px solid #6a5a2a; border-radius: 4px;
}
.helm-dock-btn small { font-weight: 400; color: #8f8a6b; }
.helm-dock-btn:hover { color: #fff3c4; border-color: #f0c040; }
/* a phone upright: the radar the full width with the buttons under it, never a 115 px radar beside them */
@media (max-width: 560px) {
    #ais-panel-sim.is-fullwin .ais-mkd { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" "ctl" "ship"; }
    #ais-panel-sim.is-fullwin .mkd-ctl-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ctl-value {
    color: #f0c040;
    font-family: 'VT323', monospace;
    font-size: 26px;
    min-width: 70px;
    text-align: center;
    text-shadow: 0 0 5px rgba(240,192,64,0.5);
    line-height: 1;
    background: #000;
    border: 1px solid #222;
    padding: 2px 8px;
    border-radius: 3px;
}
.rbtn {
    background: linear-gradient(180deg, #3f4145 0%, #242528 100%);
    color: #e8e8e8;
    border: 1px solid #050505;
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -2px 3px rgba(0,0,0,0.45),
        0 1px 1px rgba(0,0,0,0.5);
    font-family: Arial, sans-serif;
    transition: background 0.1s;
    min-width: 44px;
}
.rbtn:hover { background: linear-gradient(180deg, #4a4c50 0%, #2c2d30 100%); }
.rbtn:active { background: #16171a; box-shadow: inset 0 2px 5px rgba(0,0,0,0.65); }
.rbtn.wide  { width: 100%; padding: 10px; font-size: 13px; letter-spacing: 2px; color: #ff9040; }
.rbtn:disabled { opacity: 0.35; cursor: not-allowed; }
.rbtn.rbtn-emerg {
    background: linear-gradient(180deg, #b32c1e 0%, #7a1d12 100%);
    color: #fff7e0;
    border-color: #601208;
    font-weight: bold;
    letter-spacing: 1px;
}
.rbtn.rbtn-emerg:hover  { background: linear-gradient(180deg, #d8361f 0%, #961e10 100%); }
.rbtn.rbtn-emerg:active { background: #4a0c05; box-shadow: inset 0 2px 5px rgba(0,0,0,0.75); }

/* ── Target info panel ── */
.ais-target-panel {
    background: #0b0d10;
    border: 1px solid #1a2230;
    border-radius: 6px;
    padding: 12px 14px;
    color: #cfe0ff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
}
.tgt-header {
    color: #f0c040;
    font-size: 11px;
    letter-spacing: 2.5px;
    border-bottom: 1px solid #1a2230;
    padding-bottom: 6px;
    margin-bottom: 8px;
    font-weight: bold;
}
.tgt-empty { color: #556; font-style: italic; padding: 6px 0; }
.tgt-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px dotted #1a2230;
}
.tgt-row:last-child { border-bottom: none; }
.tgt-row span:first-child { color: #6a7a95; letter-spacing: 1.5px; }
.tgt-row span:last-child  { color: #cfe0ff; font-weight: bold; }
.tgt-row.tgt-critical span:last-child { color: #ff6040; text-shadow: 0 0 4px rgba(255,96,64,0.5); }

/* ============================================================
   Scenario Panel (reused styling, aligned with VHF)
   ============================================================ */
.scenario-panel {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    overflow: hidden;
    min-height: 480px;
    display: flex;
    flex-direction: column;
}
.scenario-panel-header {
    background: linear-gradient(135deg, #1a4a8a, #0d3060);
    color: #fff;
    padding: 18px 22px;
}
.header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.scenario-panel-header .step-label {
    font-size: 10px; opacity: 0.6;
    letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 4px;
}
.scenario-panel-header h4 { margin: 0; font-size: 18px; font-weight: 700; }
.btn-header-continue {
    flex-shrink: 0;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.6);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 6px;
    white-space: nowrap;
    transition: background 0.15s;
}
.btn-header-continue:hover { background: rgba(255,255,255,0.28); border-color: #fff; color: #fff; }
/* phones: MARK AS COMPLETED / EVALUATE may break over two lines rather than push the title row 4 px past the panel */
@media (max-width: 420px) { .btn-header-continue { white-space: normal; padding: 6px 10px; } }
/* phones: the guest banner's CTA buttons (white-space: nowrap, their row flex-shrink: 0; the pages' own <style>) were 586 px
   wide and made the whole /colreg-simulator page 620 px wide before Free Mode was even started (2026-10-07); here they wrap
   and share the width. Two classes, so it outranks the one-class rules in the templates whatever the order. */
@media (max-width: 700px) {
    .ais-premium-banner .ais-premium-banner__cta-wrap { flex: 1 1 100%; min-width: 0; }
    .ais-premium-banner .ais-premium-banner__cta, .ais-premium-banner .ais-premium-banner__cta-secondary { flex: 1 1 auto; white-space: normal; text-align: center; }
}

.ais-rule-pills {
    display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px;
}
.ais-rule-pill {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.scenario-panel-body {
    padding: 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.instr-box {
    border-left: 4px solid #0d6efd;
    background: #f0f6ff;
    border-radius: 0 8px 8px 0;
    padding: 13px 16px;
    font-size: 14px;
    line-height: 1.55;
    color: #1a2a3a;
    white-space: pre-wrap;
}
.instr-box.warn { border-color: #f39c12; background: #fffbf0; }
.instr-box.ok   { border-color: #27ae60; background: #f0fff6; }
.instr-box.err  { border-color: #e74c3c; background: #fff5f5; }

.feedback-box {
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 13px;
    display: none;
    line-height: 1.55;
    white-space: pre-wrap;              /* the results' paragraphs and bullet lines (review 2026-10-16) */
}
.feedback-box.show { display: block; }
.feedback-box.correct   { background: #f0fff6; border: 1px solid #27ae60; color: #155724; }
.feedback-box.incorrect { background: #fff5f5; border: 1px solid #e74c3c; color: #7a1010; }
.feedback-box.partial   { background: #fffbf0; border: 1px solid #f39c12; color: #7a5010; }
.feedback-box ul { margin: 6px 0 0 18px; padding: 0; }
.feedback-box li { margin: 3px 0; }

.action-btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.action-btn-row .btn,
.action-btn-row button {
    font-size: 1.05rem !important;
    padding: 11px 24px !important;
    min-height: 48px !important;
}

/* Night Recognition (lights_*) scenarios are A/B/C/D multiple-choice — stack
   one option per row so they read like a quiz, not a button toolbar. */
body.ais-lights-mode .action-btn-row {
    flex-direction: column;
    align-items: stretch;
}
body.ais-lights-mode .action-btn-row .btn,
body.ais-lights-mode .action-btn-row button {
    width: 100%;
    text-align: left;
    white-space: normal;
}

@media (max-width: 768px) {
    .ais-mkd { padding: 6px; }
    .ctl-buttons .rbtn { padding: 6px 8px; font-size: 11px; }
    .ctl-value { font-size: 22px; min-width: 60px; }
    .mkd-ctl-strip .mkd-btn { padding: 8px 2px; font-size: 10px; }
}
@media (max-width: 560px) {
    .mkd-ctl-strip { grid-template-columns: repeat(4, 1fr); }   /* 8 buttons: two rows on a phone */
}

/* Night Recognition (lights_*) scenarios — hide irrelevant HUD overlays and
   ship controls; the canvas renders its own night scene + aspect badge. */
body.ais-lights-mode .mkd-hud-tl,
body.ais-lights-mode .mkd-hud-tr,
body.ais-lights-mode .mkd-hud-bl,
body.ais-lights-mode .mkd-hud-br,
body.ais-lights-mode .mkd-ctl-strip,
body.ais-lights-mode .mkd-ship-row,
body.ais-lights-mode #mkd-alert {
    display: none !important;
}

/* Night Recognition aspect rotation controls — only visible in lights_* mode,
   so mobile (no keyboard) users can still rotate the target vessel. */
.mkd-aspect-row { display: none; }
body.ais-lights-mode .mkd-aspect-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    background: #0a1d33;
    border-top: 1px solid #1f3a5c;
}
.mkd-aspect-row .aspect-label {
    color: #6fa8d6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-right: 4px;
}
.mkd-aspect-row .abtn {
    background: #1a3358;
    color: #e8f1ff;
    border: 1px solid #2a4a72;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Share Tech Mono", monospace;
    min-width: 56px;
    min-height: 44px;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
.mkd-aspect-row .abtn:hover,
.mkd-aspect-row .abtn:focus {
    background: #234680;
    border-color: #4179c0;
    outline: none;
}
.mkd-aspect-row .abtn:active { background: #0e2548; }
.mkd-aspect-row .aspect-value {
    color: #ffd066;
    font-size: 18px;
    font-weight: 700;
    font-family: "Share Tech Mono", monospace;
    min-width: 64px;
    text-align: center;
}

/* ---------------------------------------------------------------
 * Bridge window — live out-of-the-window view under the COG/SOG row.
 * Prototype, Free Mode only (scenario flag `bridgeView`), 2026-10.
 * --------------------------------------------------------------- */
.ais-bridge-wrap {
    position: relative;
    margin-top: 10px;
    border: 1px solid #000;
    border-radius: 4px;
    overflow: hidden;
    background: #0b1a2a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.ais-bridge-wrap[hidden] { display: none; }
#ais-bridge {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 240;
    cursor: grab;
    /* sideways drags look around; vertical swipes still scroll the page */
    touch-action: pan-y;
}
#ais-bridge:active { cursor: grabbing; }
.ais-bridge-wrap.is-orbit #ais-bridge { touch-action: none; }
/* Over the look-around dial: its own touch-action so a finger turning the
   dial doesn't scroll the page. Sized in the canvas's logical px (--lpx). */
.ais-bridge-dial {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(var(--lpx, 1px) * 76);
    height: calc(var(--lpx, 1px) * 76);
    z-index: 2;
    touch-action: none;
    cursor: pointer;
}
/* 3-D view (bridge3d.js) sits under the 2-D canvas, which then paints only the HUD */
.ais-bridge-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ais-bridge { position: relative; z-index: 1; }
.ais-bridge-tools { z-index: 2; }
/* look round / centre / zoom: bottom centre, clear of the dial (left) and the tools (right) */
.ais-bridge-look {
    position: absolute; z-index: 2; bottom: 8px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 4px;
}
.ais-bridge-look .ais-bridge-toggle { min-width: 30px; padding: 4px 7px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
@media (max-width: 700px) {
    .ais-bridge-look { left: auto; right: 8px; bottom: 40px; transform: none; }
}
.ais-bridge-tools {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
}
.ais-bridge-toggle {
    font: 600 11px "Share Tech Mono", Menlo, monospace;
    letter-spacing: 0.06em;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(8, 24, 38, 0.55);
    color: #e6eef8;
    cursor: pointer;
}
.ais-bridge-toggle:hover { background: rgba(8, 24, 38, 0.75); }
/* Free Mode: DAY / NIGHT forced over the real sky; the button reads REAL (amber) until it is pressed again (_bridgeLight) */
#ais-bridge-daynight.is-forced { border-color: #f0c040; color: #ffd34d; }
/* ---- v352 glass bridge (the tanker and the cruise ship; ais-simulator.js _bridgeEye*, _gb*) ---------------------------------
   Where you stand, top right of the bridge view: ◧ P WING · CONN · S WING ◨ · LOOK AFT · ⛶ GLASS. The glass layout
   (#ais-panel-sim.is-glass, the full window only): the 3-D view fills the screen down to --gb-view-b (the strip; on an
   upright phone the strip and the panel under the view); our radar (.mkd-main), chart (.ais-chart-wrap) and helm (.ais-helm)
   are moved as they are into the picture-in-picture frames (.gb-in-a / .gb-in-b over the bodies at --gba-* / --gbb-*, px,
   _gbLayout); the view's own buttons and dial go to its top. Big targets; the safe areas. */
.ais-bridge-eyes {
    position: absolute; z-index: 2; top: calc(var(--lpx, 1px) * 27 + 34px); right: 8px;   /* under ⧉ SECOND SCREEN (.ss-corner) */
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: calc(100% - 16px);
}
.ais-bridge-eyes[hidden] { display: none; }
.ais-bridge-eyes.is-short .be-x { display: none; }       /* a small bridge window (_bridgeEyeUI): ◧ P · CONN · S ◨ · AFT · ⛶ */
html.ais-ssv .ais-bridge-eyes { visibility: hidden !important; }   /* a SECOND SCREEN viewer shows only its view */
.ais-bridge-eyes .ais-bridge-toggle { padding: 4px 7px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ais-bridge-eyes .ais-bridge-toggle[aria-pressed="true"] { background: #f0c040; border-color: #f0c040; color: #13202c; }
.ais-bridge-eyes #ais-bridge-glass { border-color: #2de66f; color: #2de66f; }
@media (max-width: 700px) {
    .ais-bridge-eyes .ais-bridge-toggle { padding: 3px 5px; font-size: 10px; letter-spacing: 0.02em; }
}
/* a big ship in the full window: a drag on the view in any direction is hers (the levers up / down, the gaze tips) */
#ais-panel-sim.is-fullwin .ais-bridge-wrap.is-big #ais-bridge { touch-action: none; }
/* the classic layout: a console screen tapped lights our own panel on the page */
.gb-flash { animation: gbFlash 1.3s ease-out; }
@keyframes gbFlash { 0%, 35% { box-shadow: 0 0 0 3px #f0c040, 0 0 18px rgba(240, 192, 64, 0.6); } 100% { box-shadow: 0 0 0 0 rgba(240, 192, 64, 0); } }
/* the glass layout */
.ais-gb[hidden], .ais-gb [hidden] { display: none !important; }
/* glass for every vessel: a small craft (not a big ship) has no conning display and no rate-of-turn tile */
.ais-gb.is-gb-small [data-gb-open="con"], .ais-gb.is-gb-small .gb-read .gb-tile:nth-child(3), .ais-gb.is-gb-small [data-gb-proxy="helm-tug-call"],
.ais-gb.is-gb-nothr .gb-read .gb-tile:nth-child(6) { display: none !important; }   /* no tugs for a small craft; no BOW THR tile without a thruster */
#ais-panel-sim.is-fullwin.is-glass { overflow: hidden; }
#ais-panel-sim.is-glass > :not(.ais-layout):not(.ais-unlock-modal) { display: none !important; }
#ais-panel-sim.is-glass .scenario-panel { display: none !important; }
#ais-panel-sim.is-glass .ais-mkd.has-bridge > :not(.ais-bridge-wrap):not(.ais-gb):not(.gb-in-a):not(.gb-in-b):not(.gb-in-c):not(.gb-chart-full) { display: none !important; }   /* (c: the chart's third slot, 2026-10-11 — it was hidden here: "karte nestrādā, melns ekrāns"; .gb-chart-full: CHART VIEW) */
/* ▤ CHART VIEW on the desktop's glass bridge (owner 2026-10-11: "chart view / live view arī desktopā"): the chart over the whole view, in the 3-D view's place */
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .ais-chart-wrap.gb-chart-full { position: fixed; left: 0; right: 0; top: var(--rg-hud-h, 0px); bottom: var(--gb-view-b, 56px); z-index: 31; display: flex !important; flex-direction: column; margin: 0; border: 0; border-radius: 0; box-sizing: border-box; background: #0b1a2a; }
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .ais-chart-wrap.gb-chart-full .ais-chart { flex: 1 1 auto; height: auto; min-height: 0; }
#gb-read .gb-tile[hidden] { display: none !important; }   /* the strip's tiles swapped in a server race (_gbRead: the ship's go, DTW / BTW / VMG / TWA / ETA come) */
.rg-hud .rg-l2-i { margin-left: 8px; min-height: 22px; padding: 0 8px; font-size: 14px; line-height: 1; vertical-align: middle; color: #8fdcff; border-color: #24485a; }   /* ⓘ % POLAR (owner 2026-10-11) */
.rg-polar-help .rg-body p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: #e4f6ea; }
/* the lap's city story card (owner 2026-10-11: "Kolkai ejot garām… stāstiņš"): under the race panel on the desktop, mid-screen on the phone console; closes itself */
.rg-story {
    position: fixed; z-index: 2147483440; left: 50%; top: calc(var(--rg-hud-h, 120px) + 14px); transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); box-sizing: border-box;
    background: rgba(5, 8, 7, 0.95); border: 1px solid #2c3a33; border-radius: 8px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
    font: 14px/1.45 "Share Tech Mono", Menlo, monospace; color: #e4f6ea;
}
#rg-mv:not([hidden]) ~ .rg-story { top: 50%; transform: translate(-50%, -50%); }
.rg-story .rg-story-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #2c3a33; color: #f0c040; font-size: 15px; letter-spacing: 0.03em; }
.rg-story .rg-story-h button, .rg-story .rg-story-a button { font: inherit; cursor: pointer; background: #0d1512; color: #e4f6ea; border: 1px solid #2c3a33; border-radius: 6px; padding: 4px 10px; }
.rg-story .rg-story-a button.is-go { background: #f0c040; border-color: #f0c040; color: #1a1202; font-weight: 700; padding: 6px 16px; }
.rg-story .rg-story-b { padding: 10px 12px 2px; max-height: 50vh; overflow-y: auto; }
.rg-story .rg-story-b p { margin: 0 0 8px; }
.rg-story .rg-story-a { display: flex; justify-content: flex-end; padding: 4px 12px 10px; }
#ais-chartview-btn { display: none; }
#ais-liveview-btn { margin-left: 8px !important; margin-right: 0; color: #f0c040; border-color: #6a5210; font-weight: 700; }   /* ⛵ LIVE VIEW at the chart bar's right end while CHART VIEW is on — about where ▤ CHART VIEW stands (owner 2026-10-11) */
#ais-liveview-btn[hidden] { display: none !important; }
html.rg-glass #ais-chartview-btn { display: inline-block; color: #8fdcff; border-color: #24485a; }
html.rg-glass #ais-chartview-btn[aria-pressed="true"] { color: #f0c040; border-color: #6a5210; }
#ais-panel-sim.is-glass .ais-mkd.has-bridge { background: none; border: 0; box-shadow: none; padding: 0; }
#ais-panel-sim.is-glass .ais-mkd.has-bridge .ais-bridge-wrap {
    position: fixed; top: 0; left: 0; right: 0; bottom: var(--gb-view-b, 56px); z-index: 30;
    margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #0b1a2a;
}
#ais-panel-sim.is-glass .ais-mkd.has-bridge #ais-bridge { width: 100%; height: 100%; aspect-ratio: auto; touch-action: none; }
#ais-panel-sim.is-glass .ais-bridge-look { top: calc(var(--lpx, 1px) * 27); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
#ais-panel-sim.is-glass .ais-bridge-eyes { top: calc(var(--lpx, 1px) * 27 + 36px); right: 10px; }
#ais-panel-sim.is-glass .ais-bridge-tools { top: calc(var(--lpx, 1px) * 27 + 72px); bottom: auto; right: 10px; }
#ais-panel-sim.is-glass .ais-bridge-dial { top: calc(var(--lpx, 1px) * 28); bottom: auto; }
/* our panels in the frames */
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .gb-in-a,
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .gb-in-b,
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .gb-in-c { position: fixed; z-index: 47; margin: 0; box-sizing: border-box; overflow: auto; border-radius: 0 0 8px 8px; }   /* (c: the chart — 2026-10-11; "karte nestrādā, melns ekrāns": c lacked this rule; d, the SAILS box, is moved into its frame's body instead) */
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .gb-in-a { left: var(--gba-x); top: var(--gba-y); width: var(--gba-w); height: var(--gba-h); }
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .gb-in-b { left: var(--gbb-x); top: var(--gbb-y); width: var(--gbb-w); height: var(--gbb-h); }
#gb-pip-d-body > .helm-sail-box { display: flex !important; flex-direction: column; justify-content: space-evenly; gap: 12px; width: 100%; height: 100%; box-sizing: border-box; padding: 12px 14px; margin: 0; border: 0; border-radius: 0; overflow: auto; background: rgba(10, 16, 22, 0.96); }
html.gb-three.rg-srv #ais-panel-sim.is-glass .ais-helm > .helm-sail-box { display: none !important; }   /* (wide server race: the sails have their own panel — never inside AUTOPILOT; owner 2026-10-11 "autopilota logā SAILS nevajag") */
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .mkd-main.gb-in-a { overflow: hidden; border: 0; justify-self: auto; }
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .mkd-main.gb-in-a #ais-radar { width: 100%; height: 100%; }
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .ais-chart-wrap.gb-in-b,
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .ais-chart-wrap.gb-in-c { display: flex; flex-direction: column; border: 0; }
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .ais-chart-wrap.gb-in-b .ais-chart,
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .ais-chart-wrap.gb-in-c .ais-chart { flex: 1 1 auto; height: auto; min-height: 0; }
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .ais-helm.gb-in-b { background: rgba(10, 16, 22, 0.96); padding: 6px; align-content: start; }
.ais-gb {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; pointer-events: none;
    font: 12px "Share Tech Mono", Menlo, monospace; color: #e6eef8;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ais-gb .gb-pip, .ais-gb .gb-strip, .ais-gb .gb-msg { pointer-events: auto; }
.gb-pip {
    position: fixed; box-sizing: border-box; overflow: hidden;
    background: rgba(6, 12, 18, 0.92); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 8px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}
#gb-pip-a { left: calc(var(--gba-x) - 1px); top: calc(var(--gba-y) - 32px); width: calc(var(--gba-w) + 2px); height: calc(var(--gba-h) + 33px); }
#gb-pip-b { left: calc(var(--gbb-x) - 1px); top: calc(var(--gbb-y) - 32px); width: calc(var(--gbb-w) + 2px); height: calc(var(--gbb-h) + 33px); }
.gb-pip-bar {
    display: flex; align-items: center; gap: 3px; height: 31px; padding: 0 3px 0 9px; box-sizing: border-box;
    background: rgba(16, 28, 40, 0.97); border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.gb-pip-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; letter-spacing: 0.1em; color: #f0c040; }
.gb-pip-tools { display: none; gap: 3px; flex: 0 1 auto; min-width: 0; overflow: hidden; }   /* a narrow panel cuts its tools, never ⤢ ✕ */
.gb-pip-bar .gb-sq { flex: 0 0 auto; }
.gb-pip[data-what="radar"] .gb-radtools { display: flex; }
.gb-pip-body {
    position: absolute; left: 0; right: 0; top: 32px; bottom: 0;
    display: flex; align-items: center; justify-content: center; color: #8fa3b5; font-size: 11px; letter-spacing: 0.08em;
}
.gb-pip-body .gb-cv { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b141d; }
.gb-strip {
    position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; box-sizing: border-box;
    padding: 4px calc(max(8px, env(safe-area-inset-right)) + 52px) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: rgba(6, 12, 18, 0.95); border-top: 1px solid rgba(255, 255, 255, 0.14);   /* right: room for the site's cookie button */
}
.gb-read { display: flex; gap: 0; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gb-btns { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.gb-read::-webkit-scrollbar, .gb-btns::-webkit-scrollbar { display: none; }
.gb-tile { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 58px; padding: 1px 8px; border-left: 1px solid rgba(255, 255, 255, 0.09); }
.gb-tile:first-child { border-left: 0; padding-left: 2px; }
.gb-tl { font-size: 9px; letter-spacing: 0.08em; color: #9fb3c8; white-space: nowrap; }
.gb-tv { display: flex; align-items: baseline; gap: 2px; line-height: 1; white-space: nowrap; }
.gb-tv b { font: 400 24px 'VT323', monospace; color: #f0c040; text-shadow: 0 0 6px rgba(240, 192, 64, 0.3); }
.gb-tile-w .gb-tv b { font-size: 20px; }
.gb-tv small { font-size: 10px; color: #9fb3c8; }
.gb-ts { font-size: 9px; color: #8fa89a; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.gb-btn {
    flex: 0 0 auto; min-height: 36px; padding: 0 9px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(18, 30, 42, 0.92); color: #e6eef8; font: 600 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em;
    white-space: nowrap; cursor: pointer; touch-action: manipulation;
}
.gb-btn:hover { border-color: #f0c040; }
.gb-btn:focus-visible { outline: 2px solid #f39100; outline-offset: 1px; }
.gb-btn[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.gb-btn:disabled { opacity: 0.4; cursor: default; }
.gb-btn.is-invite { animation: ais-dockblink 0.8s steps(1, end) infinite; border-color: #f39100; }
.gb-pip-bar .gb-btn { min-height: 25px; padding: 0 7px; font-size: 10px; }
.gb-pip-bar .gb-sq { width: 29px; padding: 0; font-size: 13px; }
.gb-sep { flex: 0 0 1px; align-self: stretch; margin: 3px 2px; background: rgba(255, 255, 255, 0.16); }
.gb-exit { border: 2px solid #e8eef2; }
.gb-msg {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--gb-view-b, 56px) + 10px);
    max-width: min(92vw, 820px); padding: 4px 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.66);
    font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.04em; text-align: center; color: #7fd4ff;
}
.gb-msg.is-ok { color: #2de66f; }
.gb-msg.is-warn { color: #f0c040; }
.gb-msg.is-stop { color: #ff3830; }
@media (prefers-reduced-motion: reduce) { .gb-btn.is-invite { animation: none; background: #f39100; color: #111; } }
/* an upright phone or tablet: the panel is under the view, so the view's own controls stay where the classic window has them
   (the dial bottom-left, the look buttons over the view tools bottom-right; _bridgeDialY) */
@media (orientation: portrait) and (max-width: 900px) {
    #ais-panel-sim.is-glass .ais-bridge-dial { top: auto; bottom: 0; }
    /* review: BRIDGE / BINOCULARS / NIGHT stay at the top (glass rule): at the bottom they lay over the dial's WIND / FOV readouts */
}
/* phones and narrow windows: the strip in two rows (the readouts, then the buttons), the look buttons bottom right of the view */
@media (max-width: 760px), (orientation: portrait) and (max-width: 900px) {
    .gb-strip { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 3px; }
    .gb-btns { margin-left: 0; }
    .gb-tv b { font-size: 20px; }
    .gb-tile-w .gb-tv b { font-size: 17px; }
    .gb-tile { min-width: 48px; padding: 1px 5px; }
    .gb-btn { min-height: 34px; padding: 0 7px; font-size: 10px; }
    /* review: ◀ ⌖ CENTER ▶ − + stay at the top centre (glass rule): at the bottom they covered the dial's readouts, the wheel and the levers */
    .gb-btns .gb-exit, .gb-btns #gb-classic { order: -1; }   /* review: ✕ EXIT and CLASSIC first — never scrolled out of reach */
}
/* a phone held sideways: one row (the readouts, the buttons each scroll sideways), no sub-lines — the view keeps the height */
@media (orientation: landscape) and (max-height: 500px) {
    .gb-strip { flex-direction: row; flex-wrap: nowrap; align-items: center; padding-top: 2px; padding-bottom: max(2px, env(safe-area-inset-bottom)); }
    .gb-read { flex: 0 1 auto; max-width: 58%; }
    .gb-btns { flex: 1 1 auto; width: auto; margin-left: 0; }
    .gb-btns .gb-exit, .gb-btns #gb-classic { order: -1; }   /* review: ✕ EXIT and CLASSIC first — never scrolled out of reach */
    .gb-read { width: auto; }
    .gb-ts { display: none; }
    .gb-tv b { font-size: 19px; }
    .gb-tile-w .gb-tv b { font-size: 16px; }
    .gb-tile { min-width: 44px; padding: 1px 5px; }
    .gb-btn { min-height: 32px; padding: 0 7px; font-size: 10px; }
}
/* Bridge instruments (Free Mode): speed, course, depth, wind */
.ais-inst {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}
.ais-inst[hidden] { display: none; }
.ais-inst-tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 6px 9px 5px;
    background: #050807;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.ais-inst-lab { font: 600 9px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #6f8a7a; }
.ais-inst-val { display: flex; align-items: baseline; gap: 4px; min-width: 0; overflow: hidden; color: #f0c040; font-family: 'VT323', monospace; }
.ais-inst-val b { font-weight: 400; font-size: 36px; line-height: 1; text-shadow: 0 0 6px rgba(240, 192, 64, 0.45); }
.ais-inst-val small { font-size: 16px; color: #b89a40; }
.ais-inst-sub {
    font: 10px "Share Tech Mono", Menlo, monospace;
    color: #8fa89a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ais-inst-arrow { align-self: center; margin-left: auto; color: #9fd0ff; transition: transform 0.4s linear; }
.ais-inst-tile.is-warn .ais-inst-val { color: #ff9c3a; }
.ais-inst-tile.is-alarm .ais-inst-val { color: #ff3830; animation: ais-echo-blink 0.8s steps(1) infinite; }
/* PRACTICE WIND (Free Mode; _prwUi … in ais-simulator.js): a tap on a WIND readout (the bridge instruments' tile, docking
   mode's WIND tile) opens the wind control; a small chip on the label says REAL or SET, and on a practice wind the tile is
   edged amber. The control in our instrument look: navy glass, amber figures, the plan's wind blue for the rose */
.ais-pw-tile { cursor: pointer; }
.ais-pw-tile:focus-visible { outline: 2px solid #f39100; outline-offset: 2px; }
.ais-pw-chip {
    display: inline-block; margin-left: 5px; padding: 0 3px 0 4px; border: 1px solid rgba(159, 208, 255, 0.45); border-radius: 3px;
    font: 700 8px/11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.06em; color: #9fd0ff; vertical-align: 1px; white-space: nowrap;
}
.ais-pw-chip::after { content: ' \25BE'; font-size: 7px; }
.ais-pw-chip.is-set { color: #1a1200; background: #f0c040; border-color: #f0c040; }
.ais-pw-chip[hidden] { display: none; }
.ais-inst-lab .ais-pw-chip, .ais-dock .dock-tl .ais-pw-chip { margin-top: -2px; margin-bottom: -2px; }   /* in the label's line: the tiles keep their height */
.ais-inst-tile.ais-pw-tile:hover { border-color: rgba(111, 208, 255, 0.45); }
.ais-inst-tile.is-pw { box-shadow: inset 0 0 0 1px rgba(240, 192, 64, 0.6); }
.ais-dock .dock-tile.ais-pw-tile:hover { background: rgba(111, 208, 255, 0.1); }
.ais-dock .dock-tile.is-pw { box-shadow: inset 0 0 0 1px rgba(240, 192, 64, 0.65); }
/* 〰 CURRENTS (2026-10-09; ais-simulator.js _cur*): the CURRENT tile (a fifth bridge instrument; on a phone a row of its own),
   CURRENT in docking mode's top bar, and the current control (the PRACTICE WIND control's look; its arrows in the current's
   colour, the plan's C.current by night) */
.ais-inst.has-cur { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ais-cur-tile .ais-inst-arrow, .ais-dock .dock-cur { color: #ffb15c; }
.ais-pc .ais-pw-shaft, .ais-pc .ais-pw-head { stroke: #ffb15c; }
.ais-pc .ais-pw-seg button[data-pc-m="set"][aria-checked="true"] { color: #1a1200; background: #f0c040; border-color: #f0c040; }
.ais-pc .ais-pw-seg button[data-pc-m="off"][aria-checked="true"] { color: #e6eef8; background: rgba(159, 179, 200, 0.22); border-color: #9fb3c8; }
.ais-dock .dock-tile[hidden] { display: none; }
@media (max-width: 560px) {
    .ais-inst.has-cur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ais-inst.has-cur .ais-cur-tile { grid-column: 1 / -1; }
}
/* a phone upright in docking mode: six tiles share the top bar (~57 px each) — the REAL / SET chips and the CURRENT tile's unit
   would spill onto the next tile; the amber edge (.is-pw) still marks a set wind or current, and a tap still opens the control */
@media (max-width: 480px) and (orientation: portrait) {
    .ais-dock .dock-hud .ais-pw-chip { display: none; }
    .ais-dock #dock-cur-tile .dock-tv small { display: none; }
}
.ais-pw {
    position: fixed; z-index: 60; left: 8px; top: 8px; width: 304px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
    overflow: auto; box-sizing: border-box; padding: 8px 10px 10px; text-align: left; pointer-events: auto;
    background: rgba(6, 16, 28, 0.97); border: 1px solid rgba(111, 208, 255, 0.45); border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    font: 12px "Share Tech Mono", Menlo, monospace; color: #e6eef8; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ais-pw[hidden] { display: none; }
.ais-pw-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ais-pw-hd b { font-size: 12px; letter-spacing: 0.14em; color: #9fb3c8; }
.ais-pw-tag { padding: 1px 5px; border-radius: 3px; border: 1px solid rgba(159, 208, 255, 0.4); font: 700 9px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #9fd0ff; }
.ais-pw.is-set .ais-pw-tag { color: #1a1200; background: #f0c040; border-color: #f0c040; }
.ais-pw.is-locked .ais-pw-tag { color: #9fb3c8; border-color: rgba(159, 179, 200, 0.4); }
.ais-pw button {
    box-sizing: border-box; min-height: 32px; margin: 0; padding: 0 6px; border-radius: 6px; cursor: pointer; touch-action: manipulation;
    font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em; line-height: 1; white-space: nowrap;
    color: #c9d6e3; background: rgba(20, 38, 56, 0.92); border: 1px solid rgba(255, 255, 255, 0.25);
}
.ais-pw button:hover { border-color: #f0c040; }
.ais-pw button:disabled { opacity: 0.4; cursor: default; }
.ais-pw button:disabled:hover { border-color: rgba(255, 255, 255, 0.25); }
.ais-pw button:focus-visible, .ais-pw input:focus-visible, .ais-pw .ais-pw-rose:focus-visible { outline: 2px solid #f39100; outline-offset: 1px; }
.ais-pw .ais-pw-x { margin-left: auto; min-width: 32px; min-height: 28px; font-size: 13px; }
.ais-pw-seg { display: flex; gap: 4px; margin: 4px 0; }
.ais-pw-seg button { flex: 1 1 0; min-width: 0; }
.ais-pw-seg button[aria-checked="true"] { color: #e8f7ff; border-color: #6fd0ff; background: rgba(111, 208, 255, 0.24); }
.ais-pw-seg button[data-pw-on="1"][aria-checked="true"] { color: #1a1200; background: #f0c040; border-color: #f0c040; }
.ais-pw-live { min-height: 13px; margin: 2px 0 6px; font-size: 10px; color: #8fa89a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ais-pw-main { display: flex; align-items: center; gap: 10px; }
.ais-pw:not(.is-set) .ais-pw-main, .ais-pw:not(.is-set) .ais-pw-opts { opacity: 0.6; }      /* REAL: her own settings, waiting (a touch sets SET) */
.ais-pw-rose { position: relative; flex: 0 0 auto; width: 136px; height: 136px; border-radius: 50%; cursor: crosshair; touch-action: none; }
.ais-pw.is-locked .ais-pw-rose { cursor: default; }
.ais-pw-rose svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ais-pw-ring { fill: rgba(111, 208, 255, 0.07); stroke: rgba(159, 208, 255, 0.55); stroke-width: 1; }
.ais-pw-tick { stroke: rgba(159, 208, 255, 0.38); stroke-width: 1; }
.ais-pw-tick.is-main { stroke: rgba(230, 238, 248, 0.8); stroke-width: 1.5; }
.ais-pw-shaft, .ais-pw-head { fill: none; stroke: #6fd0ff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ais-pw-knob { fill: #f0c040; stroke: #06101c; stroke-width: 1.5; }
.ais-pw-deg { font: 400 17px 'VT323', monospace; fill: #f0c040; text-anchor: middle; }
.ais-pw .ais-pw-pt {
    position: absolute; transform: translate(-50%, -50%); min-width: 26px; min-height: 20px; height: 20px; padding: 0 2px;
    border-radius: 4px; font-size: 10px; letter-spacing: 0; background: rgba(6, 16, 28, 0.92); border-color: rgba(255, 255, 255, 0.22);
}
.ais-pw .ais-pw-pt.is-on { color: #f0c040; border-color: #f0c040; }
.ais-pw-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ais-pw-read { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.ais-pw-lab { min-width: 40px; font-size: 9px; letter-spacing: 0.08em; color: #9fb3c8; }
.ais-pw-read b { font: 400 28px 'VT323', monospace; line-height: 1; color: #f0c040; text-shadow: 0 0 6px rgba(240, 192, 64, 0.35); }
.ais-pw-read small { font-size: 10px; color: #9fb3c8; }
.ais-pw-sl { display: flex; align-items: center; gap: 4px; }
.ais-pw-sl input { flex: 1 1 auto; min-width: 0; margin: 0; accent-color: #6fd0ff; touch-action: none; }
.ais-pw .ais-pw-step { flex: 0 0 32px; padding: 0; font-size: 16px; }
.ais-pw-opts { margin-top: 6px; }
.ais-pw-opts > .ais-pw-lab { display: block; margin-top: 2px; }
.ais-pw-note { margin: 6px 0 0; font-size: 10px; line-height: 1.35; color: #8fa89a; white-space: normal; }
.ais-pw.is-locked .ais-pw-note { color: #f0c040; }
@media (max-width: 340px) {
    .ais-pw-main { flex-direction: column; align-items: stretch; }
    .ais-pw-rose { align-self: center; }
}
@media (max-width: 560px) {
    .ais-inst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ais-inst-val b { font-size: 30px; }
}

/* Ship handling panel (Free Mode): wheel, engine lever, thrusters */
.ais-helm {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.75fr) minmax(0, 1.2fr);
    gap: 6px;
    margin-top: 10px;
    user-select: none;
    -webkit-user-select: none;
}
.ais-helm[hidden] { display: none; }
.helm-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 7px 8px;
    background: #050807;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.helm-lab { align-self: flex-start; font: 600 9px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #6f8a7a; }
.helm-val { font: 400 20px 'VT323', monospace; color: #f0c040; line-height: 1; text-shadow: 0 0 6px rgba(240, 192, 64, 0.4); white-space: nowrap; }
.helm-sub { font: 10px "Share Tech Mono", Menlo, monospace; color: #8fa89a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.helm-wheel { width: 112px; height: 112px; cursor: grab; touch-action: none; transition: transform 0.08s linear; }
.helm-wheel:active { cursor: grabbing; }
.helm-rudder { width: 100%; max-width: 170px; }
.helm-rudder-bar {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #c8202a 0%, #3a1a1a 48%, #1a1a1a 50%, #1a3a20 52%, #1f8a3a 100%);
}
.helm-rudder-bar i { position: absolute; top: -3px; width: 3px; height: 14px; margin-left: -1.5px; background: #f0c040; border-radius: 1px; left: 50%; }
.helm-btns { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.helm-ap .ais-bridge-toggle { padding: 3px 6px; font-size: 10px; }
.helm-thr-note { color: #ff9c8a; white-space: normal; text-align: center; }
/* own vessel choice, the sailing yacht's sail panel, the handling note */
.helm-vessel-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.helm-vessel-row > .helm-lab { align-self: center; margin-right: 2px; }
.helm-vessel-btn {
    flex: 1 1 0; min-width: 0; padding: 6px 6px; cursor: pointer;
    font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #b9cfc2; background: #0d1512; border: 1px solid #2c3a33; border-radius: 4px;
}
.helm-vessel-btn small { font-weight: 400; color: #7f9a8b; }
.helm-boat-btn {
    flex: 0 1 auto; max-width: 260px; padding: 6px 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: 600 11px "Share Tech Mono", Menlo, monospace; color: #f0c040; background: #0d1512; border: 1px dashed #4a5a50; border-radius: 4px;
}
.helm-boat-btn[aria-expanded="true"] { border-style: solid; border-color: #f0c040; }
.helm-boat-form { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 8px; background: #050807; border: 1px solid #2c3a33; border-radius: 4px; }
.helm-boat-form[hidden] { display: none; }
.helm-boat-form label { display: flex; align-items: center; gap: 6px; font: 600 9px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #6f8a7a; }
.helm-boat-form input, .helm-boat-form select {
    font: 600 12px "Share Tech Mono", Menlo, monospace; color: #e4f6ea; background: #0d1512; border: 1px solid #2c3a33; border-radius: 3px; padding: 3px 6px; max-width: 170px;
}
#helm-boat-flagcv { width: 36px; height: 24px; border: 1px solid #000; }
.helm-boat-note { flex-basis: 100%; margin: 0; font: 400 10px "Share Tech Mono", Menlo, monospace; color: #6f8a7a; }
/* shared sea: other skippers' boats are blue on the radar, so is this switch */
.helm-shared-btn {
    flex: 0 1 auto; max-width: 260px; padding: 6px 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: 600 11px "Share Tech Mono", Menlo, monospace; color: #5fd4ff; background: #0d1512; border: 1px solid #2c4a5a; border-radius: 4px;
}
.helm-shared-btn[aria-pressed="true"] { border-color: #5fd4ff; }
.helm-shared-btn[aria-pressed="false"] { color: #7f9a8b; border-style: dashed; }
.helm-shared-btn:hover { color: #e4f6ea; }
.helm-vessel-btn:hover { border-color: #4a6a58; color: #e4f6ea; }
.helm-vessel-btn[aria-checked="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.helm-vessel-btn[aria-checked="true"] small { color: #0c3a1c; }
@media (max-width: 560px) { .helm-vessel-row > .helm-lab { width: 100%; } .helm-vessel-btn { flex-basis: 45%; } }
.ais-helm > .helm-box[hidden] { display: none; }
.helm-val-sm { font-size: 16px; white-space: normal; text-align: center; }
/* ELEONORA: broach early warning under the point of sail — amber; red and blinking once she is heeled */
.helm-warn { font: 700 11px "Share Tech Mono", Menlo, monospace; color: #f0c040; white-space: normal; text-align: center; line-height: 1.3; max-width: 100%; }
.helm-warn.is-alarm { color: #ff3830; animation: ais-echo-blink 0.8s steps(1) infinite; }
.helm-warn[hidden] { display: none; }
.helm-sheet { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; align-items: center; gap: 4px; font: 600 9px "Share Tech Mono", Menlo, monospace; color: #8fa89a; }
.helm-sheet > span { width: 30px; }
.helm-sheet > b { font: 400 18px 'VT323', monospace; color: #f0c040; min-width: 34px; text-align: center; }
.helm-sheet .ais-bridge-toggle { padding: 3px 6px; font-size: 10px; }
.helm-man { min-width: 64px; font-weight: 700; }
/* ELEONORA off the wind: the SPI sheet row only while the spinnaker is up; SPINNAKER / GOOSE-WING lit when on */
.helm-sheet[hidden] { display: none; }
#helm-spin[aria-pressed="true"], #helm-goose[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
/* EACH SAIL ON ITS OWN (2026-10-09): a row per sail under HOIST / DROP SAILS (built by ais-simulator.js _uiSailRows): MAIN UP / REEF /
   DOWN, a roller headsail OUT / PART / ROLLED, Libava's TOPSAIL / STAYSAIL / JIB SET / DOWN; lit what the crew was told, the name amber
   while they are at it */
.helm-sailset { display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: 100%; }
.helm-sailset[hidden] { display: none; }
.helm-sailrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; max-width: 100%; font: 600 9px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #8fa89a; }
.helm-sailrow > span { min-width: 58px; text-align: right; padding-right: 3px; }
.helm-sailrow.is-moving > span { color: #f0c040; }
.helm-sailrow .ais-bridge-toggle { min-width: 40px; padding: 3px 5px; font-size: 10px; letter-spacing: 0.02em; }
.helm-sailrow .ais-bridge-toggle[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
/* HEAD TO WIND FOR THE MAIN (2026-10-09): an order to the main refused off the wind — its control shakes briefly (ais-simulator.js
   _mhShake adds .mh-no for about 0.45 s); with reduced motion an amber ring only */
@keyframes mh-shake { 0%, 100% { transform: translateX(0); } 15%, 55% { transform: translateX(-4px); } 35%, 75% { transform: translateX(4px); } }
.mh-no { animation: mh-shake 0.42s ease-in-out 1; box-shadow: 0 0 0 2px rgba(240, 192, 64, 0.9) !important; }
@media (prefers-reduced-motion: reduce) { .mh-no { animation: none; } }
#helm-tack[aria-pressed="true"], #helm-gybe[aria-pressed="true"],
#helm-sails[aria-pressed="true"], #helm-autotrim[aria-pressed="true"], #helm-reef[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
#helm-engine[aria-pressed="false"] { background: #c8202a; border-color: #c8202a; color: #fff; }
.helm-lever.is-off { opacity: 0.35; pointer-events: none; }
.helm-info-text { white-space: normal; text-align: left; line-height: 1.35; font-size: 11px; color: #b9cfc2; }
/* mooring strip (every vessel): one row across the helm */
.helm-moor-box { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; }
.helm-moor-box > .helm-lab { align-self: center; }
.helm-moor-box > .helm-sub { flex: 1 1 160px; text-align: left; }
/* ---- AUDIO (2026-10-08; ais-simulator.js _aud*): SOUND in the 3-D view's tools and the docking plan's (a speaker; struck through
   when off), its pop-up over the tools (ON / OFF, the volume), and SOUND SIGNALS in the helm: WHISTLE held (lit while it sounds),
   the Rule 34 buttons, FOG AUTO, the line saying what was sounded. Full width after MOORING (order: 1). ---- */
.ais-snd-btn svg { width: 12px; height: 12px; vertical-align: -2px; }
.ais-dock .ais-snd-btn svg { width: 16px; height: 16px; vertical-align: -3px; }
.ais-snd-btn .snd-x { display: none; }
.ais-snd-btn.is-off .snd-w { display: none; }
.ais-snd-btn.is-off .snd-x { display: inline; }
.ais-bridge-toggle.ais-snd-btn.is-off { color: #8fa1b3; border-style: dashed; }
.ais-snd-pop {
    position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 3;
    display: flex; align-items: center; gap: 7px; padding: 5px 8px; white-space: nowrap;
    background: rgba(8, 24, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px;
    font: 600 10px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.06em; color: #9fb3c8;
}
.ais-snd-pop[hidden] { display: none; }
.ais-snd-pop input[type="range"] { width: 104px; margin: 0; accent-color: #f0c040; touch-action: manipulation; }
.ais-snd-pop b { min-width: 22px; text-align: right; font: 400 18px 'VT323', monospace; color: #f0c040; }
#ais-snd-on { min-width: 40px; }
#ais-snd-on[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
#ais-panel-sim.is-glass .ais-snd-pop { bottom: auto; top: calc(100% + 6px); }
html.ais-ssv .ais-snd-pop { visibility: hidden !important; }
@media (max-width: 560px) { .ais-snd-btn .snd-t { display: none; } }
/* ===== 🎮 GAME CONTROLLERS (v1, 2026-10-09; ais-simulator.js _gp*, docs/gamepad.md): CONTROLLER in the 3-D view's tools (and the
   docking plan's once a controller has been seen; lit while one drives), its panel (devices, live sticks, feel, calibration, the
   mapping per boat) and the hint strip. Our own look: the chart room's dark, lavender for the controller. ===== */
.gp-btn svg { width: 15px; height: 11px; vertical-align: -1px; }
.ais-dock .gp-btn svg { width: 19px; height: 14px; vertical-align: -2px; }
.gp-btn.is-live { border-color: #b9a8ff; color: #e6e0ff; }
.gp-btn.is-live::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: #2de66f; vertical-align: 1px; }
.ais-dock .gp-btn.is-live::after { margin-left: 3px; }
.gp-btn[hidden] { display: none !important; }
@media (max-width: 560px) { .gp-btn .gp-t { display: none; } }
@media (pointer: coarse) { .ais-bridge-toggle.gp-btn:not(.is-seen) { display: none; } }      /* a phone or a tablet: only once a controller is there */
html.ais-ssv .gp-btn, html.ais-ssv .gp-hint, html.ais-ssv .gp-sheet { display: none !important; }
/* the hint strip: what each stick and button does now (a new boat, a new mode, a controller connected) */
.gp-hint {
    position: fixed; z-index: 2147483400; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
    max-width: min(920px, calc(100vw - 24px)); box-sizing: border-box; padding: 6px 12px; border-radius: 6px; pointer-events: none;
    background: rgba(5, 8, 7, 0.9); border: 1px solid #5d4fa8; border-left: 3px solid #b9a8ff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    font: 11.5px/1.45 "Share Tech Mono", Menlo, monospace; letter-spacing: 0.03em; color: #e4f6ea; text-align: center; overflow-wrap: anywhere;
}
.gp-hint[hidden] { display: none; }
/* the panel */
.gp-sheet {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483500; display: flex; align-items: flex-start; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px 16px; background: rgba(0, 0, 0, 0.55); overflow-y: auto; overscroll-behavior: contain;
}
.gp-sheet[hidden] { display: none; }
.gp-box {
    width: 100%; max-width: 820px; display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 32px); box-sizing: border-box;
    background: #050807; border: 1px solid #2c3a33; border-top: 3px solid #b9a8ff; border-radius: 8px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
    font: 13px/1.45 "Share Tech Mono", Menlo, monospace; color: #e4f6ea;
}
@supports (height: 100dvh) { .gp-box { max-height: calc(100dvh - 32px); } }
.gp-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px 14px; border-bottom: 1px solid #2c3a33; }
.gp-title { font-size: 16px; letter-spacing: 0.08em; color: #b9a8ff; white-space: nowrap; }
.gp-sub { flex: 1 1 auto; min-width: 0; color: #6f8a7a; font-size: 11px; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-body { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 4px 12px 14px; -webkit-overflow-scrolling: touch; }
.gp-sec { margin: 0; padding: 8px 0 10px; border-bottom: 1px solid #16211b; }
.gp-h { margin: 2px 0 6px; font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.12em; color: #b9a8ff; }
.gp-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gp-b {
    cursor: pointer; padding: 6px 10px; min-height: 32px; border-radius: 4px; border: 1px solid #2c3a33; background: #0d1512; color: #e4f6ea;
    font: 700 11.5px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em; white-space: nowrap;
}
.gp-b:hover { border-color: #5d4fa8; }
.gp-b:focus-visible { outline: 2px solid #b9a8ff; outline-offset: 1px; }
.gp-b.is-go { border-color: #5d4fa8; color: #d8d0ff; }
.gp-b.is-go:hover { background: #1a1630; }
.gp-b.is-warn { color: #ff8a80; border-color: #5a2a26; }
.gp-b[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.gp-b[aria-pressed="false"] { color: #8fa89a; border-style: dashed; }
.gp-x { min-width: 40px; margin-left: auto; }
.gp-mini { min-height: 26px; padding: 3px 7px; font-size: 10.5px; }
.gp-note { margin: 6px 2px 2px; color: #8fa89a; font-size: 11.5px; }
.gp-foot { margin-top: 10px; }
.gp-none { margin: 2px; color: #f0c040; }
.gp-devs { display: flex; flex-direction: column; gap: 4px; }
.gp-dev { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 8px; border: 1px solid #1c2a23; border-radius: 5px; background: #0a110e; }
.gp-dev.is-prim { border-color: #5d4fa8; }
.gp-dev b { color: #e4f6ea; letter-spacing: 0.03em; }
.gp-dev small { flex: 1 1 auto; color: #6f8a7a; font-size: 10.5px; letter-spacing: 0.05em; }
.gp-tag { padding: 1px 6px; border-radius: 3px; background: #b9a8ff; color: #120d2a; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }
.gp-prof { margin: 0 2px 6px; color: #f0c040; letter-spacing: 0.04em; }
/* live: the two sticks (a ring for the raw place, the dot as read), the triggers, the buttons */
.gp-pad { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.gp-pad[hidden] { display: none; }
.gp-stick-w, .gp-trig-w { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gp-stick-w small, .gp-trig-w small { color: #6f8a7a; font-size: 10px; letter-spacing: 0.06em; }
.gp-stick { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 1px solid #2c3a33; background: radial-gradient(circle, #101b16 0 30%, #0a110e 31%); }
.gp-stick::before, .gp-stick::after { content: ''; position: absolute; background: #1c2a23; }
.gp-stick::before { left: 50%; top: 4px; bottom: 4px; width: 1px; }
.gp-stick::after { top: 50%; left: 4px; right: 4px; height: 1px; }
.gp-stick u, .gp-stick i { position: absolute; left: 50%; top: 50%; z-index: 1; border-radius: 50%; }
.gp-stick u { width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1px solid #6f8a7a; }
.gp-stick i { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #b9a8ff; box-shadow: 0 0 6px rgba(185, 168, 255, 0.6); }
.gp-trig { position: relative; width: 14px; height: 64px; border: 1px solid #2c3a33; border-radius: 3px; background: #0a110e; overflow: hidden; }
.gp-trig i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #b9a8ff; }
.gp-chips { display: flex; flex-wrap: wrap; gap: 3px; flex: 1 1 260px; align-self: center; }
.gp-chip, .gp-bn { min-width: 22px; padding: 2px 5px; border: 1px solid #2c3a33; border-radius: 3px; text-align: center; color: #6f8a7a; font-size: 10px; }
.gp-chip.is-on, .gp-bn.is-on { background: #b9a8ff; border-color: #b9a8ff; color: #120d2a; }
.gp-axes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.gp-axbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 3px 12px; }
.gp-axname { grid-column: 1 / -1; color: #6f8a7a; font-size: 10px; letter-spacing: 0.06em; }
.gp-axw { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #8fa89a; }
.gp-axw span { flex: 0 0 74px; white-space: nowrap; }
.gp-ax { position: relative; flex: 1 1 auto; height: 8px; border: 1px solid #2c3a33; border-radius: 2px; background: #0a110e; }
.gp-ax::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #2c3a33; }
.gp-ax i { position: absolute; top: 1px; bottom: 1px; left: 50%; width: 0; background: #b9a8ff; }
.gp-ax u { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px; margin-left: -1px; background: #f0c040; }
.gp-bns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; }
/* feel */
.gp-rng { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.gp-rng-l { flex: 0 0 96px; color: #b9cfc2; font-size: 11.5px; letter-spacing: 0.05em; }
.gp-rng input[type="range"] { flex: 1 1 auto; max-width: 320px; margin: 0; accent-color: #b9a8ff; touch-action: manipulation; }
.gp-rng b { flex: 0 0 100px; font: 400 17px 'VT323', monospace; color: #f0c040; }
/* the mapping */
.gp-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.gp-tab { min-height: 28px; padding: 4px 8px; font-size: 10.5px; }
.gp-tab[aria-selected="true"] { background: #b9a8ff; border-color: #b9a8ff; color: #120d2a; }
.gp-tab.is-cur:not([aria-selected="true"])::after { content: ' ●'; color: #2de66f; }
.gp-cap { margin: 4px 0 8px; padding: 7px 10px; border-left: 3px solid #b9a8ff; background: #120f22; color: #e6e0ff; font-size: 12px; }
.gp-cap.is-cap { animation: gp-blink 1.1s ease-in-out infinite; }
.gp-cap[hidden] { display: none; }
@keyframes gp-blink { 50% { background: #231c45; } }
@media (prefers-reduced-motion: reduce) { .gp-cap.is-cap { animation: none; } }
.gp-map { display: flex; flex-direction: column; }
.gp-mr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 0.6fr) auto; align-items: center; gap: 4px 10px; padding: 4px 2px; border-bottom: 1px solid #16211b; }
.gp-mr.is-off { opacity: 0.5; }
.gp-ml { font-size: 11.5px; color: #d7e6dd; overflow-wrap: anywhere; }
.gp-ml small { color: #6f8a7a; font-size: 10px; }
.gp-src { color: #5fd4ff; font-size: 11.5px; letter-spacing: 0.03em; overflow-wrap: anywhere; }
.gp-src.is-none { color: #6f8a7a; }
.gp-src.is-twin { color: #f0c040; }
.gp-ops { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.gp-sty { min-width: 60px; }
.gp-inv { color: #b9cfc2; }
@media (max-width: 600px) {
    .gp-sheet { padding: env(safe-area-inset-top) 0 0; }
    .gp-box { max-height: none; min-height: 100%; border-radius: 0; border-left: 0; border-right: 0; }
    .gp-sub { display: none; }
    .gp-mr { grid-template-columns: minmax(0, 1fr) auto; }
    .gp-ops { grid-column: 1 / -1; justify-content: flex-start; }
    .gp-rng-l { flex-basis: 78px; }
    .gp-rng b { flex-basis: 74px; }
    .gp-hint { font-size: 10.5px; padding: 5px 8px; }
}

.helm-snd-box { grid-column: 1 / -1; order: 1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 4px 8px; }
.helm-snd-box > .helm-lab { align-self: center; }
.helm-snd-pats { gap: 4px; }
.helm-snd-pats .ais-bridge-toggle { min-width: 30px; padding: 2px 6px; font: 700 13px/1.2 Menlo, Consolas, monospace; letter-spacing: 0.08em; }
.helm-snd-whistle { font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.helm-snd-whistle small { font-weight: 400; opacity: 0.75; }
.helm-snd-whistle.is-on { background: #f0c040; border-color: #f0c040; color: #13202c; }
#helm-snd-fog[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.helm-snd-sub { flex: 1 1 100%; text-align: left; white-space: normal; line-height: 1.35; }
@media (pointer: coarse) { .helm-snd-whistle { min-height: 36px; padding: 6px 12px; } .helm-snd-pats .ais-bridge-toggle, .helm-snd-fog { min-height: 32px; } }
#helm-moor { min-width: 92px; font-weight: 700; }
#helm-moor[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
#helm-moor:disabled { opacity: 0.4; cursor: default; }
#helm-moor-engine[aria-pressed="false"] { background: #c8202a; border-color: #c8202a; color: #fff; }
#helm-moor-engine[hidden] { display: none; }
/* fenders and lines (2026-10-07): a row under MOORING — FENDERS PORT / STBD (white while out), LINES (amber held, green
   made fast, red near breaking), ALL OFF */
.helm-lines { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.helm-fgrp { display: inline-flex; align-items: center; gap: 4px; }
.helm-fgrp[hidden], .helm-ln[hidden] { display: none; }
.helm-llab { font: 600 9px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #6f8a7a; }
.helm-lines .ais-bridge-toggle { padding: 3px 6px; font-size: 10px; letter-spacing: 0.03em; }
.helm-ln small { font-size: 9px; opacity: 0.85; }
.helm-fend[aria-pressed="true"] { background: #e8eef2; border-color: #e8eef2; color: #0b1a2a; }
.helm-ln.is-thrown { border-color: #f0c040; color: #f0c040; }
.helm-ln.is-fast { background: #2de66f; border-color: #2de66f; color: #06210f; }
.helm-ln.is-strain { background: #ff5040; border-color: #ff5040; color: #fff; }
#helm-lines-off:disabled { opacity: 0.4; cursor: default; }
/* the line pairs (2026-10-08): the caption over a P half (red) and an S half (green), as in the docking overlay */
.helm-lpair { display: inline-flex; flex-direction: column; align-items: stretch; gap: 2px; }
.helm-lpair[hidden], .helm-lcap[hidden] { display: none; }
.helm-lcap { font: 600 9px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.06em; line-height: 1; color: #8fa89a; text-align: center; white-space: nowrap; }
.helm-lhalves { display: inline-flex; gap: 2px; }
.helm-lhalves .helm-ln { min-width: 34px; }
.helm-ln.is-p:not(.is-one) { color: #ff9a92; border-color: rgba(232, 72, 64, 0.9); background: rgba(120, 22, 24, 0.5); box-shadow: inset 0 -2px 0 #d8342c; }
.helm-ln.is-s:not(.is-one) { color: #8ff2b2; border-color: rgba(45, 190, 100, 0.9); background: rgba(16, 92, 44, 0.5); box-shadow: inset 0 -2px 0 #1d9a4a; }
.helm-ln.is-p.is-thrown, .helm-ln.is-s.is-thrown { border-color: #f0c040; color: #f0c040; }
.helm-ln.is-p.is-fast, .helm-ln.is-s.is-fast { background: #2de66f; border-color: #2de66f; color: #06210f; }
.helm-ln.is-p.is-strain, .helm-ln.is-s.is-strain { background: #ff5040; border-color: #ff5040; color: #fff; }
.helm-ap-box[hidden] { display: none !important; }
.mkd-ship-row.is-helm-hidden { display: none !important; }
.ais-chart-sailwheel { background: none; border: 0; pointer-events: none; }
.helm-thr-note[hidden] { display: none; }
#helm-auto[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.helm-lever {
    position: relative;
    width: 86px;
    max-width: 100%;
    min-width: 76px;
    height: 132px;
    cursor: ns-resize;
    touch-action: none;
}
.helm-lever-scale {
    position: absolute; left: 0; top: 0; bottom: 0; width: 40px;
    display: flex; flex-direction: column; justify-content: space-between;
    font: 9px "Share Tech Mono", Menlo, monospace; color: #8fa89a;
}
.helm-lever-scale span:nth-child(-n+3) { color: #9fe0b0; }
.helm-lever-scale span:nth-last-child(-n+3) { color: #ff9c8a; }
.helm-lever-scale .is-stop { color: #f0c040; }
.helm-lever-track { position: absolute; left: 54px; top: 4px; bottom: 4px; width: 8px; border-radius: 4px; background: #1c1f22; box-shadow: inset 0 0 0 1px #000; }
.helm-lever-knob {
    position: absolute; left: 42px; top: 50%; width: 32px; height: 16px; margin-top: -8px;
    border-radius: 4px; background: linear-gradient(180deg, #d24a3a, #8f2418); border: 1px solid #000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.helm-joy {
    position: relative;
    width: 100%;
    max-width: 180px;
    height: 26px;
    border-radius: 13px;
    background: #1c1f22;
    box-shadow: inset 0 0 0 1px #000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px;
    font: 9px "Share Tech Mono", Menlo, monospace; color: #6f8a7a;
    cursor: ew-resize;
    touch-action: none;
}
.helm-joy i {
    position: absolute; top: 3px; left: 50%; width: 20px; height: 20px; margin-left: -10px;
    border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e8e8e8, #8d9196); border: 1px solid #000;
    transition: left 0.12s ease-out;
}
/* v323: the thruster sliders say which way they push — the port half red, the starboard half green (◀ PORT, STBD ▶),
   the knob and the value red or green while it pushes that end to port or starboard (helmUI: .is-port / .is-stbd) */
.helm-joy { background: linear-gradient(90deg, rgba(200, 32, 42, 0.55), #1c1f22 38%, #1c1f22 62%, rgba(31, 138, 58, 0.55)); }
.helm-joy .is-p { color: #ff9a92; }
.helm-joy .is-s { color: #8ff2b2; }
.helm-joy.is-port i { background: radial-gradient(circle at 35% 35%, #ffb0a8, #c8202a); }
.helm-joy.is-stbd i { background: radial-gradient(circle at 35% 35%, #b4f5c8, #1f8a3a); }
.helm-val.is-port { color: #ff6a5e; text-shadow: 0 0 6px rgba(255, 80, 64, 0.4); }
.helm-val.is-stbd { color: #4fe08a; text-shadow: 0 0 6px rgba(45, 230, 111, 0.4); }
/* wheel on the left, its readouts and buttons beside it */
.helm-wheel-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "lab lab" "wheel val" "wheel rud" "wheel btns" "wheel rot" "ap ap";
    align-items: center;
    justify-items: center;
    column-gap: 8px;
}
.helm-wheel-box > .helm-lab { grid-area: lab; }
.helm-wheel-box > .helm-wheel { grid-area: wheel; }
.helm-wheel-box > .helm-tiller { grid-area: wheel; }
.helm-tiller { width: 112px; height: 90px; cursor: ew-resize; touch-action: none; }
.helm-tiller[hidden] { display: none; }
#ais-panel-sim.is-fullwin .helm-tiller { width: 84px; height: 68px; }
.helm-wheel-box > .helm-rudder { grid-area: rud; }
.helm-wheel-box > #helm-rudder-val { grid-area: val; }
.helm-wheel-box > .helm-btns:not(.helm-ap) { grid-area: btns; }
/* autopilot: its own framed row under the wheel, so ±1/±10 read as COURSE, not rudder */
.helm-wheel-box > .helm-ap-box {
    grid-area: ap;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    padding: 4px 4px 2px;
    border: 1px solid rgba(45, 230, 111, 0.22);
    border-radius: 4px;
}
.helm-ap-box > .helm-lab { align-self: center; color: #7fbf95; }
.helm-wheel-box > #helm-rot { grid-area: rot; }
@media (max-width: 560px) {
    .ais-helm { grid-template-columns: 1fr 1fr; }
    .helm-wheel-box { grid-column: 1 / -1; }
}

/* Chart window (Free Mode, real sea area) */
.ais-chart-wrap {
    margin-top: 10px;
    border: 1px solid #000;
    border-radius: 4px;
    overflow: hidden;
    background: #0b1a2a;
}
.ais-chart-wrap[hidden], .ais-chart[hidden], .ais-chart-empty[hidden] { display: none; }
.ais-chart-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #141516;
    font: 600 11px "Share Tech Mono", Menlo, monospace;
    letter-spacing: 0.06em;
    color: #9fb0bc;
}
.ais-chart-bar select {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
    text-overflow: ellipsis;
    font: inherit;
    background: #0b1a2a;
    color: #e6eef8;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 3px 6px;
}
.ais-chart-bar .ais-bridge-toggle { margin-left: auto; }
/* v332: the harbour picker (_hbpOpen in ais-simulator.js) — AREA's button in the chart bar and ⚓ HARBOUR in docking mode
   open one panel: a search field, country chips, the starts and harbours grouped by country (sticky headings). A drop-down
   under its button on a desktop; the whole screen (.is-sheet) on a phone, 600 px wide or less or 480 px tall. */
.ais-hbp-btn {
    flex: 1 1 210px; min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; min-height: 30px;
    padding: 3px 8px; font: inherit; letter-spacing: inherit; text-align: left; color: #e6eef8; background: #0b1a2a;
    border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; cursor: pointer; touch-action: manipulation;
}
.ais-hbp-btn:hover, .ais-hbp-btn[aria-expanded="true"] { border-color: #f39100; }
.ais-hbp-btn:focus-visible { outline: 2px solid #f39100; outline-offset: 1px; }
.ais-hbp-btn-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ais-hbp-btn i { flex: none; font-style: normal; color: #9fb3c8; }
.ais-hbp {
    position: fixed; z-index: 2147483600; display: flex; flex-direction: column; width: 440px; max-height: 70vh;
    color: #e6eef8; background: #0f1b28; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 8px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.65); font: 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.ais-hbp[hidden], .ais-hbp [hidden] { display: none !important; }
.ais-hbp.is-sheet {
    top: 0; right: 0; bottom: 0; left: 0; width: auto; max-height: none; border: 0; border-radius: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.ais-hbp-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 6px 14px; }
.ais-hbp-title { flex: 1 1 auto; font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.1em; color: #9fb3c8; }
.ais-hbp-x {
    min-width: 44px; min-height: 40px; padding: 0 10px; font: 700 16px "Share Tech Mono", Menlo, monospace; color: #e6eef8;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; cursor: pointer;
}
.ais-hbp-x:hover { border-color: #f39100; color: #f39100; }
.ais-hbp-q {
    flex: none; margin: 0 10px 8px; padding: 10px 12px; font: 16px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #fff; background: #07121d; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 6px; -webkit-appearance: none; appearance: none;
}
.ais-hbp-q::placeholder { color: #7f93a6; }
.ais-hbp-q:focus { outline: none; border-color: #f39100; box-shadow: 0 0 0 2px rgba(243, 145, 0, 0.35); }
.ais-hbp-chips { flex: none; display: flex; gap: 6px; padding: 0 10px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ais-hbp-chips::-webkit-scrollbar { display: none; }
.ais-hbp-chip {
    flex: none; min-height: 32px; padding: 0 11px; font: 600 12.5px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #cfe0ee; background: #17283a; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; cursor: pointer; white-space: nowrap;
}
.ais-hbp-chip:hover, .ais-hbp-chip:focus-visible { border-color: #f39100; color: #fff; outline: none; }
.ais-hbp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 6px; outline: none; }
.ais-hbp-gh {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 8px; padding: 9px 14px 6px;
    background: #0f1b28; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ais-hbp-gh b { font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #f0c040; }
.ais-hbp-gh small { flex: 1 1 auto; font-size: 11.5px; color: #8aa0b4; }
.ais-hbp-gh.is-fold { cursor: pointer; }
.ais-hbp-gh i { font-style: normal; color: #8aa0b4; }
.ais-hbp-gh.is-fold[data-open="0"] i::before { content: '▸'; }
.ais-hbp-gh.is-fold[data-open="1"] i::before { content: '▾'; }
.ais-hbp-opt, .ais-hbp-more { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 14px; cursor: pointer; }
.ais-hbp-opt b { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ais-hbp-opt small { flex: none; font-size: 11.5px; color: #8aa0b4; }
.ais-hbp-opt.is-major b { font-weight: 700; }
.ais-hbp-opt.is-major b::after { content: ' ★'; color: #f0c040; font-size: 0.8em; font-weight: 400; }
.ais-hbp-opt:hover, .ais-hbp-more:hover { background: #172b40; }
.ais-hbp-opt.is-act, .ais-hbp-more.is-act { background: #1f4468; }
.ais-hbp-opt[aria-selected="true"] { box-shadow: inset 3px 0 0 #f39100; }
.ais-hbp-opt[aria-selected="true"] b { color: #ffc46b; }
.ais-hbp-opt[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.ais-hbp-more { color: #7fd4ff; font-size: 13px; }
.ais-hbp-wait, .ais-hbp-empty { padding: 10px 14px; color: #9fb3c8; font-size: 13px; }
.ais-hbp-foot { flex: none; padding: 8px 14px 10px; font-size: 12px; line-height: 1.35; color: #9fb3c8; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ais-hbp.is-sheet .ais-hbp-opt, .ais-hbp.is-sheet .ais-hbp-more { min-height: 46px; }
.ais-hbp.is-sheet .ais-hbp-head { padding-top: 10px; }
@supports (height: 100dvh) {
    .ais-hbp.is-sheet { bottom: auto; height: 100dvh; }
}
@media (prefers-reduced-motion: no-preference) {
    .ais-hbp:not(.is-sheet) { animation: ais-hbp-in 0.12s ease-out; }
}
@keyframes ais-hbp-in { from { opacity: 0; transform: translateY(-4px); } }
.ais-echo { color: #9fe0b0; white-space: nowrap; }
.ais-echo[hidden] { display: none; }
.ais-echo.is-warn { color: #f0c040; }
.ais-echo.is-alarm { color: #ff3830; animation: ais-echo-blink 0.8s steps(1) infinite; }
@keyframes ais-echo-blink { 50% { opacity: 0.25; } }
@media (max-width: 560px) {
    .ais-chart-bar { flex-wrap: wrap; }
    .ais-echo { order: 3; width: 100%; }
}
#ais-chart-follow[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.ais-chart { height: 320px; background: #aad3df; }
.ais-route-bar { padding-top: 0; }
.ais-route-bar[hidden] { display: none; }
.ais-route-bar .ais-bridge-toggle { margin-left: 0; }
#ais-route-edit[aria-pressed="true"], #ais-route-track[aria-pressed="true"] { background: #d42fd4; border-color: #d42fd4; color: #fff; }
#ais-chart-depths { margin-left: auto; }
#ais-chart-depths[aria-pressed="true"] { background: #3d7fd6; border-color: #3d7fd6; color: #fff; }
/* the TRACK scheme lives in this line (owner 2026-10-17: one line; "ja ekrāns mazāks, tad divās"): it wraps under the buttons on a narrow bar, never cut */
.ais-route-info { color: #e6b3e6; white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; flex: 1 1 320px; line-height: 1.35; }
.ais-route-bar { flex-wrap: wrap; }
/* ROUTE: a big magenta crosshair in a white halo (owner 2026-10-16: "to krustiņu redzamāku" — the browser's thin one vanished on the chart) */
.ais-chart.is-route-edit { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg stroke='%23fff' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M18 3v10M18 23v10M3 18h10M23 18h10'/%3E%3C/g%3E%3Cg stroke='%23d42fd4' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 3v10M18 23v10M3 18h10M23 18h10'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='2.2' fill='%23d42fd4' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 18 18, crosshair; }
.ais-wpt {
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 2.5px solid #d42fd4; background: rgba(255, 255, 255, 0.92);
    color: #8a1f8a; font: 700 14px "Share Tech Mono", Menlo, monospace;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 1px 4px rgba(0, 0, 0, 0.35);   /* bigger, a halo (owner 2026-10-17 "lielākus, manāmākus") */
}
.ais-wpt.is-active { background: #d42fd4; color: #fff; }
.ais-wpt.is-past { opacity: 0.28; }                                                  /* the waypoints already passed: much fainter */
.ais-chart-empty { padding: 18px 14px; color: #9fb0bc; font-size: 13px; }
.ais-chart-ship { background: none; border: 0; }
.ais-chart-ship svg { display: block; transition: transform 0.3s linear; }
#ais-bridge-binoc[aria-pressed="true"] {
    background: #ffd34d;
    border-color: #ffd34d;
    color: #10202e;
}

/* ◀ ▶ rudder buttons beside MIDSHIPS (hold to keep turning) */
.helm-rud { min-width: 40px; font-size: 14px; touch-action: none; user-select: none; -webkit-user-select: none; }
/* 2026-10-05: eight own vessels. Anything hidden in the helm stays hidden, whatever display its class sets */
.ais-helm [hidden] { display: none !important; }
/* the choice: a 4 × 2 grid of two-line buttons on its own line under YOUR VESSEL · BOAT · SHARED SEA */
.helm-vessel-grid { flex: 1 1 100%; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.helm-vessel-grid .helm-vessel-btn { padding: 4px 3px 3px; line-height: 1.15; text-align: center; }
.helm-vessel-grid .helm-vessel-btn small { display: block; font-size: 9px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .helm-vessel-grid .helm-vessel-btn { font-size: 10px; letter-spacing: 0.02em; } }
/* buru katamarāns Namejs: a lever for each engine (port red, starboard green), the scale between them */
.helm-twin { display: grid; grid-template-columns: 28px 38px 28px; column-gap: 3px; height: 132px; }
.helm-twin .helm-lever-scale { position: static; width: auto; text-align: center; }
.helm-tlever { position: relative; height: 100%; cursor: ns-resize; touch-action: none; border-radius: 4px; }
.helm-tlever:focus-visible { outline: 2px solid #f0c040; outline-offset: 1px; }
.helm-tlever > i { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 8px; margin-left: -4px; border-radius: 4px; background: #1c1f22; box-shadow: inset 0 0 0 1px #000; }
.helm-tlever > b {
    position: absolute; left: 0; right: 0; top: 50%; height: 16px; margin-top: -8px; border-radius: 4px; border: 1px solid #000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); background: linear-gradient(180deg, #d24a3a, #8f2418);
}
.helm-tlever.is-stbd > b { background: linear-gradient(180deg, #3fbf62, #19672f); }
.helm-twin.is-off { opacity: 0.35; pointer-events: none; }
#helm-twin-stop { padding: 3px 6px; font-size: 10px; }
#ais-panel-sim.is-fullwin .helm-twin { height: 92px; }
/* fullscreen: the vessel grid on one-line buttons (each subtitle is in the button's title), so the helm keeps its place */
#ais-panel-sim.is-fullwin .helm-vessel-grid { gap: 3px; }
#ais-panel-sim.is-fullwin .helm-vessel-grid .helm-vessel-btn { padding: 3px 2px; font-size: 10px; letter-spacing: 0.02em; }
#ais-panel-sim.is-fullwin .helm-vessel-grid .helm-vessel-btn small { display: none; }
/* the dinghies: HIKE and BOARD (lit when chosen), the water in the Optimist, RIGHT THE BOAT after a capsize */
.helm-seg { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; max-width: 100%; font: 600 9px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #8fa89a; }
.helm-seg > span { flex-basis: 100%; text-align: center; }
.helm-seg .ais-bridge-toggle { min-width: 36px; padding: 3px 5px; font-size: 10px; letter-spacing: 0.02em; }
.helm-seg .ais-bridge-toggle[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.helm-seg .ais-bridge-toggle:disabled { opacity: 0.4; cursor: default; }
/* AUTO MID (2026-10-09; ais-simulator.js _am): MID HOLD | AUTO on its own line under ◀ MID ▶ (the helm's wheel or tiller),
   and MID HOLD / MID AUTO between the docking bar's WHEEL · RUDDER and its readout (green while AUTO) */
.helm-btns > .helm-am { flex: 1 0 100%; flex-wrap: nowrap; }
.helm-am > span { flex-basis: auto; }
.helm-am .ais-bridge-toggle { min-width: 0; padding: 2px 7px; font-size: 9.5px; }
#ais-panel-sim.is-fullwin .helm-am .ais-bridge-toggle { padding: 2px 5px; font-size: 9px; }
.ais-dock .dock-steer .dock-head { flex-wrap: wrap; row-gap: 2px; }
.ais-dock .dock-am { align-self: center; min-height: 24px; min-width: 0; padding: 0 7px; font-size: 10px; letter-spacing: 0.04em; }
@media (max-height: 520px), (max-width: 420px) { .ais-dock .dock-am { min-height: 22px; padding: 0 5px; font-size: 9px; } }
.helm-water { display: flex; align-items: center; gap: 5px; width: 100%; font: 600 9px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #8fa89a; }
.helm-water-bar { position: relative; flex: 1 1 auto; min-width: 30px; height: 8px; border-radius: 4px; overflow: hidden; background: #1c1f22; box-shadow: inset 0 0 0 1px #000; }
.helm-water-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #3d7fd6; transition: width 0.25s linear; }
.helm-water-bar > i.is-high { background: #ff9c8a; }
.helm-water .ais-bridge-toggle { padding: 3px 6px; font-size: 10px; }
.helm-right { font-weight: 700; background: #c8202a; border-color: #c8202a; color: #fff; animation: helm-right-pulse 1.2s ease-in-out infinite; }
.helm-right:hover { background: #a81a22; }
.helm-right[aria-busy="true"] { animation: none; background: #8a6a1a; border-color: #8a6a1a; }
@keyframes helm-right-pulse { 50% { box-shadow: 0 0 0 3px rgba(200, 32, 42, 0.4); } }
@media (prefers-reduced-motion: reduce) { .helm-right { animation: none; } }
#helm-dinghy-state.is-alarm { color: #ff3830; text-shadow: none; }
#helm-dinghy-sub { white-space: normal; text-align: center; }
/* the helm's columns per boat: a dinghy's crew box, Namejs's two levers; LATEKO stacks her engine over her bow
   thruster in the middle column, the sails panel on the right takes both rows (desktop; on phones a full row) */
.ais-helm.is-dinghy { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.ais-helm.is-cat { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.95fr) minmax(0, 1.2fr); }
@media (min-width: 561px) {
    .ais-helm.is-stack2 { grid-auto-flow: row dense; }
    .ais-helm.is-stack2 > .helm-wheel-box { grid-column: 1; grid-row: span 2; }
    .ais-helm.is-stack2 > .helm-engine-box, .ais-helm.is-stack2 > .helm-thr-box, .ais-helm.is-stack2 > .helm-dinghy-box { grid-column: 2; }
    .ais-helm.is-stack2 > .helm-sail-box { grid-column: 3; grid-row: span 2; }
}
@media (max-width: 560px) {
    .ais-helm.is-dinghy, .ais-helm.is-cat { grid-template-columns: 1fr 1fr; }
    .ais-helm.is-stack2 > .helm-sail-box { grid-column: 1 / -1; }
}
@media (max-width: 1180px) {
    #ais-panel-sim.is-fullwin .ais-helm.is-dinghy { grid-template-columns: minmax(0, 1.3fr) 124px minmax(0, 1.1fr); }
    #ais-panel-sim.is-fullwin .ais-helm.is-cat { grid-template-columns: minmax(0, 1.4fr) 108px minmax(0, 1.1fr); }
    #ais-panel-sim.is-fullwin .helm-twin { height: 84px; grid-template-columns: 24px 34px 24px; }
}
/* a phone in fullscreen (portrait): two columns as outside fullscreen, never a narrow fixed middle one beside an empty third */
@media (max-width: 560px) {
    #ais-panel-sim.is-fullwin .ais-helm, #ais-panel-sim.is-fullwin .ais-helm.is-dinghy, #ais-panel-sim.is-fullwin .ais-helm.is-cat { grid-template-columns: 1fr 1fr; }
}
/* 2026-10-06: eleven own vessels. The grid stays four to a row (three rows; fullscreen one-line buttons); a wide
   fullscreen puts six to a row, so the helm keeps its two rows of choice */
@media (min-width: 1181px) {
    #ais-panel-sim.is-fullwin .helm-vessel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* B.Yond 40M: two levers (and E-MODE) in the middle, her thrusters on the right; AC75: the tow lever over FOILS · FLIGHT */
.ais-helm.is-twin { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.95fr) minmax(0, 1.2fr); }
.ais-helm.is-ac75 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1.2fr); }
@media (min-width: 561px) {
    .ais-helm.is-stack2 > .helm-foil-box { grid-column: 2; }
}
@media (max-width: 1180px) {
    #ais-panel-sim.is-fullwin .ais-helm.is-twin { grid-template-columns: minmax(0, 1.4fr) 108px minmax(0, 1.1fr); }
    #ais-panel-sim.is-fullwin .ais-helm.is-ac75 { grid-template-columns: minmax(0, 1.3fr) 124px minmax(0, 1.1fr); }
}
@media (max-width: 560px) {
    .ais-helm.is-twin, .ais-helm.is-ac75,
    #ais-panel-sim.is-fullwin .ais-helm.is-twin, #ais-panel-sim.is-fullwin .ais-helm.is-ac75 { grid-template-columns: 1fr 1fr; }
}
/* AC75 FOILS · FLIGHT: green when flying, red on a splash-down; the two cant arms (orange = down); RIDE ▼ value ▲ */
#helm-foil-state.is-flying { color: #2de66f; text-shadow: 0 0 6px rgba(45, 230, 111, 0.4); }
#helm-foil-state.is-alarm { color: #ff3830; text-shadow: none; }
.helm-arms { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 3px 5px; width: 100%; font: 600 9px "Share Tech Mono", Menlo, monospace; color: #8fa89a; }
.helm-arm-bar { position: relative; height: 8px; border-radius: 4px; overflow: hidden; background: #1c1f22; box-shadow: inset 0 0 0 1px #000; }
.helm-arm-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #f39100; transition: width 0.25s linear; }
.helm-foil-box .helm-seg .ais-bridge-toggle { min-width: 0; }
.helm-foil-box .helm-seg .ais-bridge-toggle[data-foils="swap"] { font-weight: 700; }
.helm-ride > b { min-width: 52px; }
#helm-ride-sub, #helm-foil-arms { white-space: normal; text-align: center; }
/* B.Yond 40M E-MODE: grey diesel, blue hybrid, green electric */
.helm-emode { font-weight: 700; white-space: normal; line-height: 1.2; }
#helm-emode[data-mode="hybrid"] { background: #3d7fd6; border-color: #3d7fd6; color: #fff; }
#helm-emode[data-mode="electric"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.helm-emode-sub { white-space: normal; text-align: center; }
/* ↶ 1 H BACK (Free Mode): a ninth button in the control strip (the strip gets .has-rewind), lit on a stop, and a big
   one over the radar under the AGROUND / CAPSIZED / COLLISION banner */
#ais-rewind[hidden], #ais-rewind-stop[hidden] { display: none !important; }
#ais-rewind:disabled { opacity: 0.4; cursor: default; }
#ais-rewind.is-hot { background: linear-gradient(180deg, #f5a623 0%, #c87400 100%); color: #1a1000; }
.mkd-ctl-strip.has-rewind { grid-template-columns: repeat(9, minmax(0, 1fr)); }
@media (min-width: 561px) and (max-width: 700px) {
    .mkd-ctl-strip.has-rewind { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .mkd-ctl-strip.has-rewind { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 9 buttons: three rows of three on a phone */
}
#ais-panel-sim.is-fullwin .ais-mkd.has-chart .mkd-ctl-strip.has-rewind { grid-template-columns: repeat(8, minmax(0, 1fr)); }
#ais-panel-sim.is-fullwin .ais-mkd.has-bridge .mkd-ctl-strip.has-rewind { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (orientation: landscape) {
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge.has-chart .mkd-ctl-strip.has-rewind { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
/* a narrow full window (tablets, small laptops, ≤ 1300 px): eight buttons (FULL is hidden there) would clip RESTART; two rows of four */
@media (orientation: landscape) and (max-width: 1300px) {
    #ais-panel-sim.is-fullwin .ais-mkd.has-bridge.has-chart .mkd-ctl-strip.has-rewind { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mkd-rewind-stop {
    position: absolute; left: 50%; top: 64.5%; transform: translateX(-50%); z-index: 3;
    padding: 8px 18px 6px; border: 2px solid #ffd760; border-radius: 4px; cursor: pointer; white-space: nowrap;
    font: 700 15px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.06em; line-height: 1.15; color: #1a1000; background: #f39100;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.6);
    animation: mkd-rewind-pulse 1.2s ease-in-out infinite;
}
.mkd-rewind-stop small { display: block; font-size: 10px; font-weight: 400; letter-spacing: 0.04em; }
.mkd-rewind-stop:hover { background: #ffab2e; }
.mkd-rewind-stop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes mkd-rewind-pulse { 50% { box-shadow: 0 0 0 6px rgba(243, 145, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.6); } }
@media (prefers-reduced-motion: reduce) { .mkd-rewind-stop { animation: none; } }
@media (max-width: 560px) { .mkd-rewind-stop { font-size: 13px; padding: 6px 12px 5px; } }
/* ↶ 5 MIN BACK / ↶ 30 MIN BACK (2026-10-09: a 5-minute step, and the hour became half an hour). The control strip keeps ONE
   cell for the two (#ais-rw: 5 MIN over 30 MIN), so every tuned grid above keeps its column count; the stop over the radar
   shows both side by side, 5 MIN first (#ais-rw-stops, where the one button was; smaller on a radar under 330 px);
   docking mode: its stop (5 MIN · 30 MIN · RESTART) and its tools (MAKE FAST · 5 MIN · 30 MIN). " BACK" (.rw-w) is left out
   where there is no room for it. */
#ais-rw { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#ais-rw[hidden], #ais-rewind5[hidden], #ais-rewind5-stop[hidden], #dock-rewind5[hidden], #dock-stop-back5[hidden] { display: none !important; }
#ais-rewind5:disabled { opacity: 0.4; cursor: default; }
#ais-rewind5.is-hot { background: linear-gradient(180deg, #f5a623 0%, #c87400 100%); color: #1a1000; }
#ais-panel-sim #ais-rw > .mkd-btn {
    flex: 1 1 0; width: 100%; min-width: 0; min-height: 21px; padding: 2px 1px; font-size: 10px; line-height: 1.15;
    letter-spacing: 0.2px; white-space: nowrap; overflow: hidden;
}
#ais-rw .rw-w { display: none; }
@media (max-width: 700px) { #ais-rw .rw-w { display: inline; } }       /* (a phone, a narrow window: three or five to a row, wide cells) */
/* the full window with neither the chart nor the 3-D view (one column of buttons): the two as large as the others */
@media (min-width: 561px) {
    #ais-panel-sim.is-fullwin .ais-mkd:not(.has-chart):not(.has-bridge) #ais-rw > .mkd-btn { padding: 6px 8px; font-size: 12px; }
    #ais-panel-sim.is-fullwin .ais-mkd:not(.has-chart):not(.has-bridge) #ais-rw .rw-w { display: inline; }
}
/* a drill's focus layout (a row of buttons, RESTART and the two back on a stop) */
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass):not(.dv-stop) #ais-rw { display: none !important; }
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) #ais-rw { flex-direction: row; flex: 0 0 auto; gap: 6px; }
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) #ais-rw > .mkd-btn { width: auto; flex: 0 0 auto; padding: 7px 14px; font-size: 11px; }
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) #ais-rw .rw-w { display: inline; }
/* a race's focus layout steps the back buttons aside, as it does ↶ 30 MIN BACK (#ais-rewind, #ais-rewind-stop) */
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-rw,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-rewind5-stop { display: none !important; }
/* the glass strip: lit on a stop, as the strip's are */
#ais-gb .gb-btn.is-hot { background: #f39100; border-color: #ffd760; color: #1a1000; }
/* the stop over the radar: the two side by side, centred where the one was */
.mkd-rewind-stops {
    position: absolute; left: 50%; top: 64.5%; transform: translateX(-50%); z-index: 3;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: max-content; max-width: 96%; pointer-events: none;
}
.mkd-rewind-stops > .mkd-rewind-stop { position: static; transform: none; pointer-events: auto; min-width: 11.3em; }   /* (the two as wide as each other) */
.mkd-rewind-stops.is-narrow > .mkd-rewind-stop { min-width: 7.4em; font-size: 12px; padding: 5px 9px 4px; }   /* a small radar (under 330 px: a phone on its side, a panel): ↶ 5 MIN · ↶ 30 MIN */
.mkd-rewind-stops.is-narrow .rw-w { display: none; }
html.ais-ssv-radar #ais-rewind5-stop { visibility: hidden !important; }
/* docking mode */
.ais-dock #dock-stop .rw-w { color: inherit; font-size: inherit; }   /* (not the stop's yellow reason line) */
.ais-dock .dock-act .rw-w { display: none; }
@media (max-width: 480px) { .ais-dock #dock-stop .rw-w { display: none; } }
/* 2026-10-06 (v314): thirteen own vessels (the Pershing 8X and the sea kayak). Five to a row (5, 5, 3) on a computer and a phone;
   in the full window the one-line buttons wrap by their own width (two rows where the helm column is wide enough), so no name is cut */
.helm-vessel-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#ais-panel-sim.is-fullwin .helm-vessel-grid { display: flex; flex-wrap: wrap; }
#ais-panel-sim.is-fullwin .helm-vessel-grid .helm-vessel-btn { flex: 1 1 auto; min-width: max-content; }
/* v319 (2026-10-07): fifteen own vessels — the tanker and the cruise ship join: five to a row is three full rows (5, 5, 5) on a
   computer and on a phone; the full window keeps its one-line buttons wrapped by their width */
/* the tanker / cruise ship: the wheel over two rows, the telegraph in the middle, SHIP · ENGINE over the bow thruster(s) on the right
   (phones: two columns, SHIP · ENGINE a row of its own) */
.ais-helm.is-big { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 1.4fr); }
#ais-panel-sim.is-fullwin .ais-helm.is-big { grid-template-columns: minmax(0, 1.3fr) 112px minmax(0, 1.25fr); }
@media (min-width: 561px) {
    .ais-helm.is-big { grid-auto-flow: row dense; }
    .ais-helm.is-big > .helm-wheel-box { grid-column: 1; grid-row: span 2; }
    .ais-helm.is-big > .helm-engine-box { grid-column: 2; grid-row: span 2; }
    .ais-helm.is-big > .helm-ship-box, .ais-helm.is-big > .helm-thr-box { grid-column: 3; }
}
@media (max-width: 560px) {
    .ais-helm.is-big, #ais-panel-sim.is-fullwin .ais-helm.is-big { grid-template-columns: 1fr 1fr; }
    .ais-helm.is-big { grid-auto-flow: row dense; }                  /* the bow thruster(s) beside the telegraph */
    .ais-helm.is-big > .helm-ship-box { grid-column: 1 / -1; }
}
/* the engine telegraph's scale on the lever (NAV FULL … FULL ASTERN, at each order's place) */
.helm-lever > .helm-tele-scale { display: none; }
.helm-lever.is-tele > .helm-lever-scale { display: none; }
.helm-lever.is-tele > .helm-tele-scale { display: block; }
.helm-lever .helm-tele-scale span { position: absolute; left: 0; transform: translateY(-50%); white-space: nowrap; font-size: 8px; letter-spacing: 0; color: #9fe0b0; }
.helm-lever .helm-tele-scale span.is-ast { color: #ff9c8a; }
.helm-lever .helm-tele-scale span.is-stop { color: #f0c040; }
/* SHIP · ENGINE: the rpm gauge (astern red … ahead green, the order's amber tick, the shaft's white needle), the ROT gauge (port
   red … starboard green), engine state green running, grey stopped, red without starting air */
.helm-ship-gauge { display: grid; grid-template-columns: 24px minmax(0, 1fr) 42px; align-items: center; gap: 5px; width: 100%; font: 600 8.5px "Share Tech Mono", Menlo, monospace; color: #8fa89a; }
.helm-ship-gauge > b { font: 400 15px 'VT323', monospace; color: #f0c040; text-align: right; white-space: nowrap; }
.helm-ship-bar { position: relative; height: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px #000; background: linear-gradient(90deg, #7a2a24 0%, #2b2f33 50%, #1f6a3a 100%); }
.helm-ship-bar > i { position: absolute; top: -3px; left: 50%; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 1px; }
.helm-ship-bar > .helm-ship-zero { top: 0; height: 8px; width: 1px; margin-left: -0.5px; background: rgba(0, 0, 0, 0.8); }
.helm-ship-bar > .helm-ship-ord { background: #f0c040; box-shadow: 0 0 0 1px #000; transition: left 0.25s linear; }
.helm-ship-bar > .helm-ship-ndl { background: #fff; box-shadow: 0 0 0 1px #000; transition: left 0.25s linear; }
#helm-ship-state { color: #2de66f; text-shadow: 0 0 6px rgba(45, 230, 111, 0.4); }
#helm-ship-state.is-idle { color: #b9cfc2; text-shadow: none; }
#helm-ship-state.is-alarm { color: #ff3830; text-shadow: none; }
.helm-ship-box .helm-seg .ais-bridge-toggle { min-width: 0; }
.helm-ship-box .helm-seg [data-pods="joy"][aria-pressed="true"] { background: #f39100; border-color: #f39100; color: #1a1000; }
.helm-tugs { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; }
.helm-tugs .helm-sheet > b { min-width: 92px; font-size: 15px; }
.helm-tugs .ais-bridge-toggle:disabled { opacity: 0.4; cursor: default; }
#helm-tug-call[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
#helm-ship-sub { white-space: normal; text-align: center; line-height: 1.3; }
@media (max-width: 560px) {
    /* a phone in the full window: back to five to a row (5, 5, 3), the names a size smaller, not six, six and one */
    #ais-panel-sim.is-fullwin .helm-vessel-grid { display: grid; }
    #ais-panel-sim.is-fullwin .helm-vessel-grid .helm-vessel-btn { min-width: 0; padding: 3px 1px; font-size: 9px; letter-spacing: 0; }
}
@media (max-width: 560px) {
    .helm-vessel-grid { gap: 3px; }
    .helm-vessel-grid .helm-vessel-btn { padding: 4px 1px 3px; font-size: 9.5px; letter-spacing: 0; }
    .helm-vessel-grid .helm-vessel-btn small { font-size: 8.5px; }
}
/* Pershing 8X: the wheel over two rows, her two levers in the middle, DRIVES · TRIM over her thrusters on the right (phones: two
   columns, the thrusters a row of their own); the sea kayak: her sweep strokes beside KAYAK · PADDLER (phones: one under the other) */
.ais-helm.is-pershing { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 1.4fr); }
#ais-panel-sim.is-fullwin .ais-helm.is-pershing { grid-template-columns: minmax(0, 1.3fr) 112px minmax(0, 1.25fr); }
@media (max-width: 700px) {
    .ais-helm.is-pershing { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.95fr) minmax(0, 1.2fr); }
    /* 561–700 px (since the VESSEL menu joined AREA, 2026-10-05): the chart bar did not wrap, and its two menus pushed the
       whole simulator column out to ~860 px, past the screen; it wraps here as on phones and in the full window */
    .ais-chart-bar { flex-wrap: wrap; }
}
@media (max-width: 1180px) {
    #ais-panel-sim.is-fullwin .ais-helm.is-pershing { grid-template-columns: minmax(0, 1.35fr) 100px minmax(0, 1.15fr); }
}
@media (min-width: 561px) {
    .ais-helm.is-pershing { grid-auto-flow: row dense; }
    .ais-helm.is-pershing > .helm-wheel-box { grid-column: 1; grid-row: span 2; }
    .ais-helm.is-pershing > .helm-engine-box { grid-column: 2; grid-row: span 2; }
    .ais-helm.is-pershing > .helm-trim-box, .ais-helm.is-pershing > .helm-thr-box { grid-column: 3; }
}
.ais-helm.is-kayak, #ais-panel-sim.is-fullwin .ais-helm.is-kayak { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
@media (max-width: 560px) {
    .ais-helm.is-kayak, #ais-panel-sim.is-fullwin .ais-helm.is-kayak,
    .ais-helm.is-pershing, #ais-panel-sim.is-fullwin .ais-helm.is-pershing { grid-template-columns: 1fr 1fr; }
    .ais-helm.is-kayak > .helm-kayak-box, .ais-helm.is-pershing > .helm-thr-box { grid-column: 1 / -1; }
}
/* DRIVES · TRIM: green planing, grey off the plane, red blown out; the plane bar; the trim gauge (blue bow down … red too high,
   the black tick at 0°); MANUAL lit orange: the trim is the skipper's */
#helm-trim-state.is-flying { color: #2de66f; text-shadow: 0 0 6px rgba(45, 230, 111, 0.4); }
#helm-trim-state.is-alarm { color: #ff3830; text-shadow: none; }
#helm-trim-state.is-idle { color: #b9cfc2; text-shadow: none; }
.helm-plane { grid-template-columns: auto minmax(0, 1fr); }
.helm-plane .helm-arm-bar > i { background: #2de66f; }
.helm-trim-gauge { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 5px; width: 100%; font: 600 8.5px "Share Tech Mono", Menlo, monospace; color: #8fa89a; white-space: nowrap; }
.helm-trim-bar { position: relative; height: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px #000;
    background: linear-gradient(90deg, #3d7fd6 0%, #1f8a3a 40%, #1f8a3a 70%, #f0c040 85%, #c8202a 100%); }
.helm-trim-bar > i { position: absolute; top: -3px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 1px; }
.helm-trim-bar > .helm-trim-zero { top: 0; height: 8px; width: 1px; margin-left: -0.5px; background: rgba(0, 0, 0, 0.8); }
.helm-trim-bar > .helm-trim-ndl { left: 40%; background: #fff; box-shadow: 0 0 0 1px #000; transition: left 0.25s linear; }
.helm-trim-box .helm-seg .ais-bridge-toggle[data-trimmode="manual"][aria-pressed="true"] { background: #f39100; border-color: #f39100; color: #1a1000; }
.helm-trim-set > b { min-width: 48px; }
#ais-panel-sim.is-fullwin .helm-trim-set > span { display: none; }
#helm-trim-sub { white-space: normal; text-align: center; }
/* KAYAK · PADDLER: the BALANCE bar (red where she goes over), BRACE lit orange while held, ROLL / RE-ENTER red (RIGHT THE BOAT's style) */
#helm-kayak-state.is-alarm { color: #ff3830; text-shadow: none; }
.helm-kbal { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px; width: 100%; font: 600 9px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #8fa89a; }
.helm-kbal-bar { position: relative; height: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px #000;
    background: linear-gradient(90deg, #c8202a 0%, #c8202a 10%, #f0c040 22%, #1f8a3a 40%, #1f8a3a 60%, #f0c040 78%, #c8202a 90%, #c8202a 100%); }
.helm-kbal-bar > i { position: absolute; top: -3px; left: 50%; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 1px; background: #fff; box-shadow: 0 0 0 1px #000; transition: left 0.2s linear; }
.helm-paddle > b { min-width: 64px; }
.helm-krow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; max-width: 100%; }
.helm-krow > .helm-seg > span { flex-basis: auto; }
.helm-brace { min-width: 84px; font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none; }
.helm-brace[aria-pressed="true"] { background: #f39100; border-color: #f39100; color: #1a1000; }
.helm-kayak-box .ais-bridge-toggle:disabled { opacity: 0.4; cursor: default; }
/* the sea plane (2026-10-08): her wheel and throttle, BEAVER · FLIGHT on the right (phones: a row of its own); the attitude indicator beside
   IAS / ALT / VSI / HDG; green aloft, red at the stall; HOLD lit orange, the magnetos red while the engine is stopped */
.ais-helm.is-sea { grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.6fr) minmax(0, 1.75fr); }
#ais-panel-sim.is-fullwin .ais-helm.is-sea { grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1.6fr); }
@media (max-width: 560px) {
    .ais-helm.is-sea, #ais-panel-sim.is-fullwin .ais-helm.is-sea { grid-template-columns: 1fr 1fr; }
    .ais-helm.is-sea > .helm-sp-box { grid-column: 1 / -1; }
}
#helm-sp-state.is-flying { color: #2de66f; text-shadow: 0 0 6px rgba(45, 230, 111, 0.4); }
#helm-sp-state.is-alarm, #helm-sp-ias.is-alarm { color: #ff3830; text-shadow: none; }
.helm-sp-inst { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; width: 100%; }
.helm-sp-adi { width: 84px; height: 84px; flex: 0 0 auto; }
#ais-panel-sim.is-fullwin .helm-sp-adi { width: 58px; height: 58px; }
.helm-sp-tiles { display: grid; grid-template-columns: auto auto; gap: 1px 8px; font: 600 9px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.06em; color: #8fa89a; }
.helm-sp-tiles > span { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.helm-sp-tiles i { font-style: normal; min-width: 3ch; }
.helm-sp-tiles b { font: 400 18px 'VT323', monospace; color: #f0c040; min-width: 3ch; text-align: right; letter-spacing: 0; }
#ais-panel-sim.is-fullwin .helm-sp-tiles b { font-size: 15px; }
.helm-sp-tiles small { font-size: 8px; color: #6f8478; }
.helm-sp-yoke > b { min-width: 72px; font-size: 16px; white-space: nowrap; }
.helm-sp-yoke > span { width: auto; }
.helm-sp-box .helm-seg .ais-bridge-toggle { min-width: 0; }
.helm-sp-box .ais-bridge-toggle:disabled { opacity: 0.4; cursor: default; }
.helm-sp-row { flex-wrap: wrap; justify-content: center; }
.helm-sp-row .ais-bridge-toggle { white-space: nowrap; }
#helm-sp-hold[aria-pressed="true"] { background: #f39100; border-color: #f39100; color: #1a1000; }
#helm-sp-mag[aria-pressed="false"] { background: #c8202a; border-color: #c8202a; color: #fff; }
#helm-sp-sub, #helm-sp-warn { white-space: normal; text-align: center; }
@media (pointer: coarse) { .helm-sp-box .ais-bridge-toggle { min-height: 34px; } .helm-sp-yoke .ais-bridge-toggle { min-width: 64px; touch-action: none; } }
.helm-krec .ais-bridge-toggle { font-weight: 700; }
#helm-kayak-sub, #helm-kcold { white-space: normal; text-align: center; }
/* the kayak from above in the wheel's place: red hull, black hatches and cockpit, the paddler's yellow buoyancy aid; capsized
   her dark bottom shows, with the paddler in the water she is pale and he is beside her */
.helm-wheel-box > .helm-kpic { grid-area: wheel; }
.helm-kpic { width: 112px; height: 94px; }
#ais-panel-sim.is-fullwin .helm-kpic { width: 84px; height: 70px; }
@media (max-width: 1180px) { #ais-panel-sim.is-fullwin .helm-kpic { width: 64px; height: 54px; } }
.helm-kpic-hull { fill: #d22b2b; stroke: #5e1010; stroke-width: 1.2; }
.helm-kpic-cockpit { fill: #141414; }
.helm-kpic-man { fill: #f5c400; stroke: #6d5a00; stroke-width: 1; }
.helm-kpic.is-cap .helm-kpic-hull { fill: #3a3f44; stroke: #000; }
.helm-kpic.is-cap .helm-kpic-man, .helm-kpic.is-cap #helm-kpic-g { opacity: 0.25; }
.helm-kpic.is-wet .helm-kpic-hull { fill: #8a3a3a; }
.helm-kpic.is-wet .helm-kpic-man { transform: translate(18px, 6px); }
/* v323: ⚓ HARBOUR in the docking overlay's top bar (_hbMenu / _hbGo): the harbour's name on a label, the select lying
   invisibly over it so the browser's own list opens (a wheel on a phone); a phone upright shows only ⚓ ▾ (under 380 px
   only ⚓: beside the view buttons on a 360 px phone) */
.ais-dock .dock-harb { position: relative; display: flex; align-items: center; min-height: 50px; max-width: 230px; padding: 0 12px; cursor: pointer; }
.ais-dock .dock-harb-lab { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em; white-space: nowrap; color: #e6eef8; }
.ais-dock .dock-harb-lab b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ais-dock .dock-harb-lab i { font-style: normal; color: #9fb3c8; }
.ais-dock .dock-harb-ic { color: #f0c040; font-size: 15px; }
.ais-dock .dock-harb select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.ais-dock .dock-harb:hover { border-color: #f0c040; }
.ais-dock .dock-harb:focus-within { outline: 2px solid #f39100; outline-offset: 2px; }
@media (max-width: 480px) and (orientation: portrait) {
    .ais-dock .dock-harb { min-height: 48px; padding: 0 9px; }
    .ais-dock .dock-harb-lab b { display: none; }
}
@media (max-width: 380px) and (orientation: portrait) {
    .ais-dock .dock-harb { padding: 0 10px; }
    .ais-dock .dock-harb-lab i { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
    .ais-dock .dock-harb { min-height: 44px; }
}

/* TIME ×1 / ×10 / ×100 at a glance (owner 2026-10-08): ×1 green and steady, ×10 orange blinking, ×100 red blinking
   twice as fast — the radar HUD's "×N" and the TIME button (_timeMultLook in ais-simulator.js) */
.is-t1 { color: #2de66f !important; }
.is-t10 { color: #ff9a1f !important; animation: ais-tblink 1s steps(1, end) infinite; }
.is-t100 { color: #ff3830 !important; animation: ais-tblink 0.5s steps(1, end) infinite; }
#ais-speed-toggle.is-t1 { border-color: #2de66f; }
#ais-speed-toggle.is-t10 { border-color: #ff9a1f; }
#ais-speed-toggle.is-t100 { border-color: #ff3830; }
@keyframes ais-tblink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .is-t10, .is-t100 { animation: none; } }

/* the autopilot row with ±90° (v339): seven buttons on one line on a phone */
@media (max-width: 420px) {
    .helm-ap { gap: 3px; }
    .helm-ap .ais-bridge-toggle { padding: 3px 3px; font-size: 9.5px; letter-spacing: 0; }
}


/* ⚓ DOCK blinks in a harbour basin (v340, _dockInviteTick): orange, until she docks, makes fast or leaves */
#helm-dock.is-invite { animation: ais-dockblink 0.8s steps(1, end) infinite; border-color: #f39100; }
@keyframes ais-dockblink { 0% { background: #f39100; color: #111; } 50% { background: transparent; color: #f39100; } }
@media (prefers-reduced-motion: reduce) { #helm-dock.is-invite { animation: none; background: #f39100; color: #111; } }
/* ===== ⧉ SECOND SCREEN (v342; ais-simulator.js _ss*) — in the simulator window: the buttons, the menu, the badge on her own
   3-D view; the viewer (/colreg-simulator?view=3d|dock|radar|chart|conning: html.ais-ssv) shows only its view (.ssv-on),
   the whole window, black round it, with a corner readout, a full-screen hint and what it says when it has no picture ===== */
.ss-open.is-on { border-color: #4fc3f7 !important; color: #8fdcff !important; }
.ais-mkd.has-bridge .mkd-ctl-strip > .ss-open { display: none; }   /* the radar's row is a tuned grid (8–9 a row): a 10th button took a row of its own; the bridge window's corner has ⧉ */
@media (max-width: 700px) { .ss-open .ss-lab { display: none; } }
.ais-bridge-wrap .ss-corner { position: absolute; z-index: 2; right: 8px; top: calc(var(--lpx, 1px) * 27); padding: 3px 8px; }
.ais-bridge-wrap .ss-corner:not(.is-wide) .ss-lab { display: none; }
#ais-panel-sim.is-dock .ss-corner { display: none; }
.ss-menu {
    position: fixed; z-index: 2147483600; width: min(430px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto;
    box-sizing: border-box; padding: 10px 12px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(6, 16, 28, 0.97); color: #e6eef8; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    font: 12px/1.45 "Share Tech Mono", Menlo, monospace; text-align: left;
}
.ss-menu[hidden] { display: none; }
.ss-menu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ss-menu-head b { color: #f39100; letter-spacing: 0.08em; font-size: 13px; }
.ss-x { background: none; border: 0; color: #9fb3c8; font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.ss-x:hover { color: #fff; }
.ss-menu-sub { margin: 0 0 8px; color: #b8c7d6; }
.ss-menu-views { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin-bottom: 8px; }
.ss-menu-views button {
    font: 600 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em; text-align: left; cursor: pointer;
    padding: 8px 9px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); color: #e6eef8;
}
.ss-menu-views button small { display: block; margin-top: 2px; font-weight: 400; font-size: 10px; letter-spacing: 0; color: #9fb3c8; }
.ss-menu-views button.is-pref { border-color: #f39100; background: rgba(243, 145, 0, 0.16); }
.ss-menu-views button:hover, .ss-menu-views button:focus-visible { border-color: #ffb547; color: #ffd38a; outline: none; }
.ss-closeall { display: block; width: 100%; margin: 0 0 8px; padding: 7px 8px; border: 1px solid #e0402f; border-radius: 4px; background: rgba(224, 64, 47, 0.14); color: #ffb4a8; font: inherit; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; }
.ss-closeall:hover, .ss-closeall:focus-visible { background: rgba(224, 64, 47, 0.28); color: #fff; outline: none; }
.ss-closeall[hidden] { display: none; }
.ss-menu-opt { display: flex; gap: 7px; align-items: flex-start; margin: 2px 0 6px; color: #cfd8dc; cursor: pointer; font-weight: 400; }
.ss-menu-opt input { margin: 2px 0 0; flex: none; }
.ss-menu-stat { color: #8fdcff; margin: 2px 0 6px; }
.ss-menu-blocked { color: #ffb547; margin: 0 0 6px; }
.ss-menu-blocked[hidden] { display: none; }
.ss-menu-blocked a { color: #ffd34d; text-decoration: underline; }
.ss-menu-help summary { cursor: pointer; color: #f0c040; }
.ss-menu-help ol { margin: 6px 0; padding-left: 18px; }
.ss-menu-help li { margin-bottom: 4px; }
.ss-menu-help p { margin: 4px 0; color: #b8c7d6; }
.ss-menu-help code { color: #ffd34d; font-size: 11px; }
.ss-badge {
    position: absolute; z-index: 3; right: 8px; top: calc(var(--lpx, 1px) * 27 + 30px); pointer-events: none; white-space: nowrap;
    font: 600 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.06em; color: #8fdcff;
    background: rgba(6, 16, 28, 0.75); border: 1px solid rgba(79, 195, 247, 0.5); border-radius: 6px; padding: 3px 9px;
}
.ss-badge[hidden], #ais-panel-sim.is-dock .ss-badge { display: none; }
.ais-bridge-wrap.ss-paused::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(6, 16, 28, 0.84); pointer-events: none; }
.ais-bridge-wrap.ss-paused .ss-badge { top: 50%; right: auto; left: 50%; transform: translate(-50%, -50%); padding: 8px 14px; font-size: 13px; }

/* the viewer: only its view, the whole window */
.ssv-hud, .ssv-msg, .ssv-fs, .ssv-con { display: none; }
html.ais-ssv, html.ais-ssv body { overflow: hidden !important; height: 100% !important; margin: 0 !important; background: #000 !important; }
html.ais-ssv body { visibility: hidden !important; }
html.ais-ssv .ssv-on {
    visibility: visible !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important;
    padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 2147483000 !important;
    background: #000 !important;
}
html.ais-ssv #ais-bridge-wrap.ssv-on #ais-bridge { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; }
html.ais-ssv .ais-bridge-look, html.ais-ssv .ais-bridge-tools, html.ais-ssv .ss-badge, html.ais-ssv .ss-open { visibility: hidden !important; }
html.ais-ssv-dock .ais-bridge-dial, html.ais-ssv-dock .ais-bridge-3d { visibility: hidden !important; }
html.ais-ssv-dock #ais-bridge { touch-action: none; cursor: grab; }
html.ais-ssv-3d.ssv-3dok:not(.ssv-hud2) #ais-bridge, html.ais-ssv-3d.ssv-3dok:not(.ssv-hud2) .ais-bridge-dial { opacity: 0; }
html.ais-ssv-radar .mkd-main.ssv-on #ais-radar {
    position: absolute; left: 50%; top: 50%; width: min(100vw, 100vh) !important; height: min(100vw, 100vh) !important;
    transform: translate(-50%, -50%); cursor: default;
}
html.ais-ssv-radar .mkd-main .hud-val { font-size: 22px; }
html.ais-ssv-radar .mkd-main .hud-label { font-size: 13px; }
html.ais-ssv-radar .mkd-main .mkd-hud-tl, html.ais-ssv-radar .mkd-main .mkd-hud-tr { top: 18px; }
html.ais-ssv-radar .mkd-main .mkd-hud-bl, html.ais-ssv-radar .mkd-main .mkd-hud-br { bottom: 18px; }
html.ais-ssv-radar .mkd-main .mkd-hud-tl, html.ais-ssv-radar .mkd-main .mkd-hud-bl { left: 22px; }
html.ais-ssv-radar .mkd-main .mkd-hud-tr, html.ais-ssv-radar .mkd-main .mkd-hud-br { right: 22px; }
html.ais-ssv-radar #ais-rewind-stop { visibility: hidden !important; }
html.ais-ssv-chart #ais-chart-wrap .ais-chart-bar { display: none !important; }
html.ais-ssv-chart #ais-chart-wrap.ssv-on #ais-chart { position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; width: auto !important; height: auto !important; }
/* the corner readout, its ↺ FOLLOW, the debug line (D) */
html.ais-ssv .ssv-hud {
    display: flex; visibility: visible; position: fixed; z-index: 2147483100; gap: 8px; align-items: center; pointer-events: none;
    right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
    font: 600 16px "Share Tech Mono", Menlo, monospace; color: #e6eef8;
}
html.ais-ssv-radar .ssv-hud, html.ais-ssv-chart .ssv-hud { bottom: auto; right: auto; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); }
html.ais-ssv-conning .ssv-read { display: none; }
html.ais-ssv.ssv-clean .ssv-read, html.ais-ssv.ssv-clean .ssv-dbg { display: none; }
.ssv-read { background: rgba(6, 16, 28, 0.6); border-radius: 8px; padding: 5px 11px; letter-spacing: 0.04em; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.ssv-read:empty { display: none; }
.ssv-read b { color: #fff; }
.ssv-read i { display: inline-block; font-style: normal; color: #7fd0ff; }
.ssv-follow {
    pointer-events: auto; cursor: pointer; font: 600 14px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em;
    padding: 6px 11px; border-radius: 8px; border: 1px solid #f39100; background: rgba(6, 16, 28, 0.8); color: #ffb547;
}
.ssv-follow[hidden], .ssv-dbg[hidden] { display: none; }
.ssv-dbg { background: rgba(6, 16, 28, 0.6); border-radius: 8px; padding: 5px 9px; font-size: 12px; color: #8fdcff; white-space: nowrap; }
/* no picture: looking for the simulator, its window hidden or closed, a view this scenario has not */
html.ais-ssv .ssv-msg {
    display: flex; visibility: visible; position: fixed; z-index: 2147483200; top: 0; right: 0; bottom: 0; left: 0;
    align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.55);
    font: 15px/1.5 "Share Tech Mono", Menlo, monospace; color: #e6eef8; text-align: center;
}
html.ais-ssv .ssv-msg.is-blank { background: #000; }
html.ais-ssv .ssv-msg[hidden] { display: none; }
.ssv-msg-box { max-width: 620px; padding: 22px 26px; border-radius: 12px; background: rgba(6, 16, 28, 0.88); border: 1px solid rgba(255, 255, 255, 0.14); }
.ssv-msg-k { color: #f39100; letter-spacing: 0.12em; font-size: 12px; margin-bottom: 8px; }
.ssv-msg h2 { margin: 0 0 8px; font: 600 24px/1.25 "Share Tech Mono", Menlo, monospace; color: #fff; }
.ssv-msg p { margin: 0; color: #b8c7d6; }
.ssv-msg p:empty { display: none; }
.ssv-msg button {
    margin-top: 16px; cursor: pointer; font: 600 15px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em;
    padding: 9px 18px; border-radius: 8px; border: 1px solid #f39100; background: #f39100; color: #111;
}
.ssv-msg button[hidden] { display: none; }
/* CLICK FOR FULL SCREEN: big for the first seconds, then a small pill that shows while the mouse moves */
html.ais-ssv .ssv-fs {
    display: flex; visibility: visible; position: fixed; z-index: 2147483150; left: 50%; top: 62%; transform: translate(-50%, -50%);
    flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 18px 30px; border-radius: 14px;
    border: 2px solid rgba(243, 145, 0, 0.9); background: rgba(6, 16, 28, 0.78); color: #fff;
    font: 600 22px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.06em; transition: opacity 0.4s;
}
.ssv-fs span { font-size: 40px; line-height: 1; color: #f39100; }
.ssv-fs small { font-size: 13px; font-weight: 400; color: #b8c7d6; letter-spacing: 0.02em; }
html.ais-ssv .ssv-fs.is-small { top: max(12px, env(safe-area-inset-top)); left: auto; right: max(12px, env(safe-area-inset-right)); transform: none; flex-direction: row; gap: 8px; padding: 6px 12px; font-size: 13px; border-width: 1px; border-radius: 8px; }
.ssv-fs.is-small span { font-size: 16px; }
.ssv-fs.is-small small { display: none; }
html.ais-ssv .ssv-fs[hidden] { display: none; }
html.ais-ssv.ssv-idle .ssv-fs.is-small { opacity: 0; pointer-events: none; }
html.ais-ssv.ssv-idle, html.ais-ssv.ssv-idle * { cursor: none !important; }
/* INSTRUMENTS (view=conning): big tiles */
html.ais-ssv .ssv-con { display: flex; align-items: center; justify-content: center; padding: 3vmin; box-sizing: border-box; font-family: "Share Tech Mono", Menlo, monospace; color: #e6eef8; }
.ssv-con-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2vmin; width: 100%; max-width: 1600px; }
.ssv-t { display: flex; flex-direction: column; gap: 0.6vmin; padding: 2vmin 2.4vmin; border-radius: 1.6vmin; background: #08131f; border: 1px solid rgba(255, 255, 255, 0.12); min-width: 0; }
.ssv-t.is-wide { grid-column: span 3; }
.ssv-t > span { font-size: max(12px, 2vmin); letter-spacing: 0.1em; color: #9fb3c8; }
.ssv-t > b { font-size: max(26px, 7vmin); line-height: 1.05; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssv-t > i { font-style: normal; font-size: max(12px, 2.2vmin); color: #8fdcff; min-height: 1.2em; }
.ssv-t.is-wide > b { font-size: max(22px, 5vmin); }
.ssv-bar { position: relative; height: 2.2vmin; min-height: 12px; border-radius: 1.1vmin; background: linear-gradient(90deg, rgba(229, 57, 53, 0.55), rgba(255, 255, 255, 0.08) 50%, rgba(67, 160, 71, 0.55)); }
.ssv-bar i { position: absolute; top: -0.6vmin; bottom: -0.6vmin; width: 0.6vmin; min-width: 3px; margin-left: -0.3vmin; border-radius: 2px; }
.ssv-bar .ssv-bar-0 { left: 50%; background: rgba(255, 255, 255, 0.35); }
.ssv-bar .ssv-bar-n { left: 50%; background: #f39100; box-shadow: 0 0 6px rgba(243, 145, 0, 0.8); }
@media (max-aspect-ratio: 1/1) { .ssv-con-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ssv-t.is-wide { grid-column: span 2; } }

/* BINOCULARS only in the bridge view (v344, _binocBtnSync) */
#ais-bridge-binoc[hidden] { display: none !important; }

/* ===== OFFSHORE (v1, 2026-10-08) — the ⛽ OFFSHORE button, the PSV / CTV panel, the exercise panel, the catalog (ais-simulator.js _off*) ===== */
#helm-offshore { color: #ff9ad8; border-color: #b0106f; }
#helm-offshore:hover { color: #e4f6ea; }
html.off-running #helm-offshore { background: #2a0a1e; color: #ffc2e8; }
.off-btn {
    cursor: pointer; padding: 7px 11px; min-height: 34px; border-radius: 4px; border: 1px solid #2c3a33; background: #0d1512; color: #e4f6ea;
    font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em; white-space: nowrap;
}
.off-btn:hover { border-color: #4a6a58; }
.off-btn:focus-visible { outline: 2px solid #ff9ad8; outline-offset: 1px; }
.off-btn.is-go { background: #b0106f; border-color: #b0106f; color: #fff; }
.off-btn.is-go:hover { background: #cf2a8c; }
.off-btn.is-warn { color: #ff8a80; border-color: #5a2a26; }
.off-btn[hidden] { display: none; }
.off-btn[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.off-mini { padding: 4px 8px; min-height: 28px; font-size: 11px; }
/* the PSV's DP / joystick panel, the CTV's push-on gauge: right side, over the simulator (and the full window) */
.off-dp {
    position: fixed; z-index: 2147483300; right: max(8px, env(safe-area-inset-right)); top: max(64px, env(safe-area-inset-top)); width: 236px; box-sizing: border-box;
    padding: 6px 7px 7px; border-radius: 8px; background: rgba(5, 8, 7, 0.9); border: 1px solid #2c3a33; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    font: 11px/1.3 "Share Tech Mono", Menlo, monospace; color: #e4f6ea; touch-action: none;
}
.off-dp[hidden] { display: none; }
.off-dp-h { display: flex; align-items: center; gap: 6px; }
.off-dp-t { color: #ff9ad8; letter-spacing: 0.06em; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.off-dp-st { padding: 1px 6px; border-radius: 3px; font-weight: 700; font-size: 10px; letter-spacing: 0.04em; color: #9fb8aa; border: 1px solid #2c3a33; }
.off-dp-st.is-ok { color: #2de66f; border-color: #1f6a3c; }
.off-dp-st.is-warn { color: #f0c040; border-color: #6a5210; }
.off-dp-st.is-alarm { background: #ff3830; color: #fff; border-color: #ff3830; animation: ais-echo-blink 0.8s steps(1) infinite; }
.off-dp-m { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-top: 5px; }
.off-dp-m .off-btn { padding: 3px 2px; min-height: 26px; font-size: 9.5px; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; }
.off-dp-m .off-s { display: none; }
.off-dp-cv { display: block; width: 100%; height: auto; margin-top: 5px; border-radius: 4px; background: #040a08; }
.off-dp-n { margin-top: 4px; color: #b9cfc2; font-size: 10.5px; overflow-wrap: anywhere; }
.off-pad { position: relative; width: 100%; height: 86px; margin-top: 5px; border: 1px solid #2c4a3a; border-radius: 6px; cursor: crosshair;
    background: radial-gradient(circle at 50% 50%, #12261e 0, #0a1511 70%); }
.off-pad::before, .off-pad::after { content: ''; position: absolute; background: #1d3a2e; }
.off-pad::before { left: 50%; top: 6px; bottom: 6px; width: 1px; }
.off-pad::after { top: 50%; left: 6px; right: 6px; height: 1px; }
.off-pad-k { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #2de66f; box-shadow: 0 0 8px rgba(45, 230, 111, 0.6); z-index: 1; }
.off-tw { position: relative; height: 18px; margin-top: 4px; border: 1px solid #2c4a3a; border-radius: 9px; background: #0a1511; cursor: ew-resize; }
.off-tw-k { position: absolute; top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #f39100; }
.off-pad.is-off, .off-tw.is-off { opacity: 0.35; cursor: default; }
.off-dp-sp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-top: 5px; }
.off-dp-sp[hidden] { display: none; }
.off-dp-sp .off-btn { padding: 2px 1px; min-height: 24px; font-size: 9.5px; }
.off-dp-f { margin-top: 4px; color: #6f8a7a; font-size: 9.5px; letter-spacing: 0.03em; }
.off-dp.is-ctv .off-dp-m, .off-dp.is-ctv .off-pad, .off-dp.is-ctv .off-tw, .off-dp.is-ctv .off-dp-sp { display: none; }
.off-dp.is-folded .off-dp-m, .off-dp.is-folded .off-dp-cv, .off-dp.is-folded .off-pad, .off-dp.is-folded .off-tw,
.off-dp.is-folded .off-dp-sp, .off-dp.is-folded .off-dp-f { display: none; }
/* the exercise panel: top left */
.off-hud {
    position: fixed; z-index: 2147483350; top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); width: min(360px, calc(100vw - 268px));
    min-width: 220px; box-sizing: border-box; padding: 6px 10px 8px; border-radius: 8px; background: rgba(5, 8, 7, 0.92); border: 1px solid #4a1a38;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5); font: 12px/1.35 "Share Tech Mono", Menlo, monospace; color: #e4f6ea; max-height: calc(100vh - 16px); overflow-y: auto;
}
.off-hud[hidden], .off-hud.is-away { display: none; }
.off-hud-l1 { display: flex; align-items: center; gap: 8px; }
.off-hud-ti { color: #ff9ad8; letter-spacing: 0.05em; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.off-hud-t { font: 400 22px/1 'VT323', "Share Tech Mono", monospace; color: #fff; flex: none; }
.off-hud-g { margin-top: 4px; color: #fff; overflow-wrap: anywhere; }
.off-hud-c { list-style: none; margin: 4px 0 0; padding: 0; }
.off-hud-c li { color: #9fb8aa; font-size: 11px; padding: 1px 0; overflow-wrap: anywhere; }
.off-hud-c li.is-ok { color: #2de66f; }
.off-hud-card { margin-top: 5px; }
.off-hud-card:empty { display: none; }
.off-hud-card p { margin: 4px 0; font-size: 11.5px; overflow-wrap: anywhere; }
.off-brief { color: #b9cfc2; }
.off-say { color: #f0c040; }
.off-q { color: #fff; }
.off-why { color: #ff8a80; }
.off-pen { color: #f0c040; font-size: 11px !important; margin: 1px 0 !important; }
.off-tip { color: #8fdcff; }
.off-res { font: 400 26px/1.1 'VT323', "Share Tech Mono", monospace; letter-spacing: 0.04em; }
.off-res.is-ok { color: #2de66f; }
.off-res.is-fail { color: #ff6a5f; }
.off-facts { margin: 4px 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; font-size: 11px; }
.off-facts dt { color: #6f8a7a; }
.off-facts dd { margin: 0; }
.off-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }
.off-opt { white-space: normal; text-align: left; line-height: 1.3; font-weight: 400; font-size: 11px; }
.off-opt:hover { border-color: #ff9ad8; }
.off-hud-b { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.off-hud.is-folded .off-hud-c, .off-hud.is-folded .off-hud-card, .off-hud.is-folded .off-hud-b { display: none; }
html.rg-racing .off-hud { top: 84px; }
/* the catalog: a sheet over the simulator */
.off-sheet {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483500; display: flex; align-items: flex-start; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px 16px; background: rgba(0, 0, 0, 0.55); overflow-y: auto; overscroll-behavior: contain;
}
.off-sheet[hidden] { display: none; }
.off-box {
    width: 100%; max-width: 760px; display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 32px);
    background: #050807; border: 1px solid #4a1a38; border-radius: 8px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
    font: 13px/1.4 "Share Tech Mono", Menlo, monospace; color: #e4f6ea;
}
@supports (height: 100dvh) { .off-box { max-height: calc(100dvh - 32px); } }
.off-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px 14px; border-bottom: 1px solid #2c3a33; }
.off-title { font-size: 16px; letter-spacing: 0.08em; color: #ff9ad8; }
.off-sub { flex: 1 1 auto; min-width: 0; color: #6f8a7a; font-size: 11px; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.off-x { min-width: 40px; }
.off-body { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px 12px; -webkit-overflow-scrolling: touch; }
.off-note { color: #6f8a7a; font-size: 12px; margin: 6px 2px 10px; }
.off-row { padding: 8px 10px; margin: 0 0 6px; border: 1px solid #2c3a33; border-radius: 6px; background: #0d1512; }
.off-row-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.off-row-t b { font-size: 14px; color: #fff; overflow-wrap: anywhere; }
.off-row-m { color: #b9cfc2; font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
.off-row-m.is-sub { color: #6f8a7a; }
.off-row-acts { display: flex; gap: 6px; margin-top: 6px; }
.off-badge { font-size: 10px; letter-spacing: 0.08em; padding: 1px 6px; border-radius: 3px; border: 1px solid #2c3a33; color: #9fb8aa; white-space: nowrap; }
.off-badge.is-site { border-color: #b0106f; color: #ff9ad8; }
.off-badge.is-best { border-color: #2de66f; color: #2de66f; }
/* the chart: the installations' names, characters and zones */
.off-ch-lab { white-space: nowrap; font: 700 10px/1.25 "Share Tech Mono", Menlo, monospace; color: #b0106f; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; }
.off-ch-lab i { font-style: normal; font-weight: 400; color: #5a2a48; }
.off-ch-lab.is-farm { color: #7a5a00; }
@media (max-width: 700px) {
    .off-dp { width: 196px; top: auto; bottom: max(8px, env(safe-area-inset-bottom)); }
    .off-dp-m .off-l { display: none; }
    .off-dp-m .off-s { display: inline; }
    .off-pad { height: 64px; }
    .off-hud { width: calc(100vw - 16px); max-height: 40vh; }
    html.ais-fullwin .off-hud { top: calc(max(8px, env(safe-area-inset-top)) + 52px); max-height: calc(40vh - 52px); }   /* under ✕ EXIT */
    html.ais-fullwin .off-dp { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 84px); }                             /* over the PPI's corner, not RNG / PAUSE / VECT */
}
/* ===== ⚠ EMERGENCIES AT SEA (pre-charter, part B, 2026-10-09) — the button, the drill panel, the catalog, the brief and the debrief (ais-simulator.js _emg*) ===== */
/* ⚠ EMERGENCY beside ⚓ DOCK: a safety yellow, never the MOB's orange; .is-on while a drill is loaded or running */
.helm-emg-btn {
    flex: 0 1 auto; padding: 6px 8px; cursor: pointer; white-space: nowrap;
    font: 700 11px "Share Tech Mono", Menlo, monospace; color: #ffc42e; background: #0d1512; border: 1px solid #6a5212; border-radius: 4px;
}
.helm-emg-btn:hover { color: #fff; border-color: #ffc42e; }
.helm-emg-btn:focus-visible { outline: 2px solid #ffc42e; outline-offset: 1px; }
#helm-emg.is-on { background: #3a2c06; color: #fff; border-color: #ffc42e; }
/* the drill panel: top right over the simulator (the MOB panel's place; never both), foldable, full width on a phone */
.emg-hud {
    position: fixed; z-index: 2147483410; top: max(56px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
    width: min(370px, calc(100vw - 16px)); max-height: calc(100vh - 24px); overflow-y: auto; box-sizing: border-box; padding: 7px 10px 8px; border-radius: 8px;
    background: rgba(5, 8, 7, 0.93); border: 1px solid #6a5212; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    font: 12px/1.35 "Share Tech Mono", Menlo, monospace; color: #e4f6ea; pointer-events: auto; overscroll-behavior: contain;
}
@supports (height: 100dvh) { .emg-hud { max-height: calc(100dvh - 24px); } }
.emg-hud[hidden] { display: none; }
.emg-hud-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.emg-hud-name { flex: 1 1 auto; min-width: 0; color: #ffc42e; letter-spacing: 0.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emg-hud-l2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.emg-hud-clk { font: 400 26px/1 'VT323', "Share Tech Mono", monospace; color: #ffc42e; letter-spacing: 0.04em; }
.emg-hud-sub { color: #6f8a7a; font-size: 11px; letter-spacing: 0.06em; }
.emg-hud-msg { margin-top: 4px; color: #b9cfc2; overflow-wrap: anywhere; }
.emg-hud-msg:empty { display: none; }
.emg-hud-msg.is-alarm { color: #fff; background: #a3200f; padding: 2px 6px; border-radius: 3px; font-weight: 700; }
.emg-hud-msg.is-warn { color: #f0c040; }
.emg-stat { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.emg-stat:empty { display: none; }
.emg-chip { display: inline-flex; gap: 5px; align-items: baseline; padding: 1px 6px; border-radius: 3px; border: 1px solid #2c3a33; background: #0d1512; font-size: 11px; max-width: 100%; overflow-wrap: anywhere; }
.emg-chip i { font-style: normal; color: #6f8a7a; letter-spacing: 0.06em; }
.emg-chip b { font-weight: 700; color: #e4f6ea; }
.emg-chip.is-ok { border-color: #1f5a36; } .emg-chip.is-ok b { color: #2de66f; }
.emg-chip.is-warn { border-color: #5a4a20; } .emg-chip.is-warn b { color: #f0c040; }
.emg-chip.is-bad { border-color: #7a2a20; } .emg-chip.is-bad b { color: #ff7a6a; }
.emg-stepbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; padding-top: 4px; border-top: 1px solid #2c3a33; }
.emg-sub { color: #6f8a7a; font-size: 11px; letter-spacing: 0.06em; }
.emg-steps { list-style: none; margin: 2px 0 0; padding: 0; }
.emg-step { padding: 3px 0 2px; color: #6f8a7a; overflow-wrap: anywhere; }
.emg-step b { font-weight: 700; }
.emg-step.is-cur { color: #fff; } .emg-step.is-cur b { color: #ffc42e; }
.emg-step.is-done { color: #2de66f; }
.emg-step.is-half { color: #f0c040; }
.emg-step.is-miss { color: #ff8a80; }
.emg-step.is-rule { color: #b9cfc2; }
.emg-step.is-called { color: #8fdcff; }
.emg-cue { display: block; margin: 2px 0 2px 14px; color: #e4f6ea; font-size: 12px; font-weight: 400; }
.emg-note { display: inline-block; margin-left: 6px; color: #f0c040; font-size: 11px; }
.emg-ordh { margin-top: 7px; padding-top: 5px; border-top: 1px solid #2c3a33; color: #f0c040; font-size: 11px; letter-spacing: 0.06em; }
.emg-orders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.emg-btn {
    min-height: 30px; padding: 4px 10px; cursor: pointer; border-radius: 4px; border: 1px solid #2c3a33; background: #0d1512; color: #e4f6ea;
    font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.03em;
}
.emg-btn:hover { border-color: #4a6a58; }
.emg-btn:focus-visible { outline: 2px solid #ffc42e; outline-offset: 1px; }
.emg-btn.is-go { background: #ffc42e; border-color: #ffc42e; color: #1a1202; }
.emg-btn.is-go:hover { background: #ffd65e; }
.emg-btn.is-warn { color: #ff8a80; border-color: #5a2a26; }
.emg-mini { min-height: 26px; padding: 2px 8px; font-size: 11px; white-space: nowrap; }
.emg-ord { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 40px; padding: 4px 7px; text-align: left; white-space: normal; min-width: 0; }
.emg-ord-t { overflow-wrap: anywhere; }
.emg-ord-s { color: #8fdcff; font-weight: 400; font-size: 10px; }
.emg-ord-s:empty { display: none; }
.emg-ord.is-busy { border-color: #2c5a7a; background: #071420; }
.emg-ord.is-q { border-style: dashed; }
.emg-ord.is-done { color: #2de66f; border-color: #1f5a36; }
.emg-ord.is-off { opacity: 0.5; }
.emg-ord.is-ask { border-color: #ffc42e; }
.emg-ask { margin-top: 6px; padding: 6px; border: 1px solid #ffc42e; border-radius: 6px; background: #120f05; display: flex; flex-direction: column; gap: 4px; }
.emg-ask b { color: #ffc42e; font-size: 11px; letter-spacing: 0.06em; }
.emg-choice { text-align: left; white-space: normal; }
.emg-hud-b { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.emg-hud .emg-cue { margin-left: 0; margin-top: 6px; }
.emg-hud.is-folded .emg-steps, .emg-hud.is-folded .emg-stepbar, .emg-hud.is-folded .emg-ordh, .emg-hud.is-folded .emg-orders,
.emg-hud.is-folded .emg-ask, .emg-hud.is-folded > .emg-cue, .emg-hud.is-folded .emg-hud-b { display: none; }
/* the catalog, the brief and the debrief: a sheet over the simulator (over the full window too) */
.emg-sheet {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483500; display: flex; align-items: flex-start; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px 16px; background: rgba(0, 0, 0, 0.55); overflow-y: auto; overscroll-behavior: contain;
}
.emg-sheet[hidden] { display: none; }
.emg-box {
    width: 100%; max-width: 780px; display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 32px);
    background: #050807; border: 1px solid #6a5212; border-radius: 8px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
    font: 13px/1.4 "Share Tech Mono", Menlo, monospace; color: #e4f6ea;
}
@supports (height: 100dvh) { .emg-box { max-height: calc(100dvh - 32px); } }
.emg-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px 14px; border-bottom: 1px solid #2c3a33; }
.emg-title { font-size: 16px; letter-spacing: 0.06em; color: #ffc42e; white-space: nowrap; }
.emg-head .emg-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emg-x { min-width: 40px; }
.emg-body { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 10px 12px 12px; -webkit-overflow-scrolling: touch; }
.emg-body h4 { margin: 14px 0 6px; font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #f0c040; }
.emg-intro, .emg-brief, .emg-kit { color: #b9cfc2; font-size: 12px; margin: 0 2px 10px; }
.emg-brief { color: #e4f6ea; font-size: 13px; }
.emg-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.emg-opts.is-in { margin: 6px 0 0; }
.emg-opt-l { min-width: 92px; color: #6f8a7a; font-size: 11px; letter-spacing: 0.08em; }
.emg-opt[aria-checked="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.emg-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.emg-card { padding: 9px 10px; border: 1px solid #2c3a33; border-radius: 6px; background: #0d1512; min-width: 0; }
.emg-card.is-pick { border-color: #ffc42e; }
.emg-card-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.emg-card-t b { font-size: 13px; color: #fff; overflow-wrap: anywhere; }
.emg-card-s { color: #6f8a7a; font-size: 11px; margin-top: 3px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.emg-card-m { color: #b9cfc2; font-size: 12px; margin-top: 4px; overflow-wrap: anywhere; }
.emg-card-a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.emg-card-l { margin: 4px 0 0 18px; padding: 0; color: #b9cfc2; font-size: 12px; }
.emg-ref { color: #6f8a7a; font-size: 10px; overflow-wrap: anywhere; }
.emg-badge { font-size: 10px; letter-spacing: 0.08em; padding: 1px 6px; border-radius: 3px; border: 1px solid #2c3a33; color: #9fb8aa; white-space: nowrap; }
.emg-badge.is-free { border-color: #1f5a36; color: #2de66f; }
.emg-badge.is-best { border-color: #f0c040; color: #f0c040; }
.emg-facts { margin: 4px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 10px; font-size: 12px; }
.emg-facts dt { color: #6f8a7a; letter-spacing: 0.06em; }
.emg-facts dd { margin: 0; color: #e4f6ea; overflow-wrap: anywhere; }
.emg-body .emg-note { display: block; margin: 8px 0 0; color: #b9cfc2; font-size: 12px; }
.emg-foot { padding: 6px 14px 9px; border-top: 1px solid #2c3a33; color: #6f8a7a; font-size: 11px; overflow-wrap: anywhere; }
.emg-foot.is-err { color: #ff8a80; }
.emg-res { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.emg-score { font: 400 44px/1 'VT323', "Share Tech Mono", monospace; color: #2de66f; }
.emg-score.is-fail { color: #ff5a3a; }
.emg-stars { font-size: 22px; color: #f0c040; letter-spacing: 0.1em; }
.emg-res-t { color: #fff; font-weight: 700; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.emg-tip { margin: 8px 0 10px; padding: 7px 10px; border-left: 3px solid #ffc42e; background: #120f05; color: #f2ecda; }
.emg-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.emg-table td { padding: 3px 6px; border-bottom: 1px solid #142019; color: #e4f6ea; overflow-wrap: anywhere; }
.emg-table td.is-n { text-align: right; white-space: nowrap; color: #f0c040; }
.emg-table tr.is-tot td { font-weight: 700; color: #fff; border-bottom: 0; }
.emg-steps.is-deb { margin-top: 0; }
.emg-pens { margin: 0; padding: 0 0 0 16px; color: #ff8a80; font-size: 12px; }
.emg-pens .emg-cue { margin-left: 0; color: #e4f6ea; }
.emg-call { margin: 6px 0 0; padding: 6px 8px; border: 1px dashed #2c5a7a; border-radius: 4px; color: #8fdcff; font-size: 11px; overflow-wrap: anywhere; }
.emg-log { max-height: 180px; overflow-y: auto; padding: 4px 6px; border: 1px solid #2c3a33; border-radius: 4px; color: #b9cfc2; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.emg-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 12px; border-top: 1px solid #2c3a33; }
@media (max-width: 600px) {
    .emg-sheet { padding: env(safe-area-inset-top) 0 0; }
    .emg-box { max-height: none; min-height: 100%; border-radius: 0; border-left: 0; border-right: 0; }
    .emg-list { grid-template-columns: minmax(0, 1fr); }
    .emg-hud { width: calc(100vw - 16px); max-height: 55vh; }
    .emg-hud-clk { font-size: 22px; }
    .emg-head .emg-sub { display: none; }
}
/* ===== 🛟 MAN OVERBOARD (v1) — the MOB button, the MOB panel, the drills and the debrief (ais-simulator.js _mob*) ===== */
/* 🛟 MOB beside ⚓ DOCK: the emergency's red-orange; DRILLS beside it; .is-on while a drill is armed or a person is in the water */
.mob-grp { display: inline-flex; flex: 0 1 auto; gap: 0; min-width: 0; }
.helm-mob-btn {
    flex: 0 1 auto; padding: 6px 8px; cursor: pointer; white-space: nowrap;
    font: 700 11px "Share Tech Mono", Menlo, monospace; color: #ff7a4a; background: #0d1512; border: 1px solid #7a3420; border-radius: 4px 0 0 4px;
}
.helm-mob-btn.is-drills { color: #e4b8a6; border-left: 0; border-radius: 0 4px 4px 0; font-weight: 600; }
.helm-mob-btn:hover { color: #fff; border-color: #ff7a4a; }
.helm-mob-btn:focus-visible { outline: 2px solid #ff7a4a; outline-offset: 1px; }
#helm-mob.is-on { background: #3a1206; color: #fff; animation: mob-blink 1s steps(1) infinite; }
.gb-btn.mob-gb { color: #ff7a4a; }
@keyframes mob-blink { 50% { background: #0d1512; color: #ff7a4a; } }
/* the MOB panel: top right over the simulator, under the full window's ✕ EXIT (the regatta's is top centre; never both), foldable, the
   current step only until ▸ ALL STEPS; full width on a phone */
.mob-hud {
    position: fixed; z-index: 2147483410; top: max(56px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
    width: min(340px, calc(100vw - 16px)); max-height: calc(100vh - 24px); overflow-y: auto; box-sizing: border-box; padding: 7px 10px 8px; border-radius: 8px;
    background: rgba(5, 8, 7, 0.92); border: 1px solid #7a3420; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    font: 12px/1.35 "Share Tech Mono", Menlo, monospace; color: #e4f6ea; pointer-events: auto;
}
.mob-hud[hidden] { display: none; }
.mob-hud.is-lost { border-color: #ff3830; }
.mob-hud-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mob-hud-name { flex: 1 1 auto; min-width: 0; color: #ff7a4a; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-hud-l2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.mob-hud-clk { font: 400 26px/1 'VT323', "Share Tech Mono", monospace; color: #ff5a3a; letter-spacing: 0.04em; }
.mob-hud-spot { color: #ffb070; font-weight: 700; overflow-wrap: anywhere; }
.mob-hud.is-lost .mob-hud-spot { color: #ff3830; animation: mob-lost 0.8s steps(1) infinite; }
@keyframes mob-lost { 50% { color: #ff9a8a; } }
.mob-hud-wp { color: #8fdcff; font-size: 11px; margin-top: 2px; overflow-wrap: anywhere; }
.mob-hud-wp:empty { display: none; }
.mob-hud-msg { margin-top: 4px; color: #b9cfc2; overflow-wrap: anywhere; }
.mob-hud-msg:empty { display: none; }
.mob-hud-msg.is-alarm { color: #fff; background: #a3200f; padding: 2px 6px; border-radius: 3px; font-weight: 700; }
.mob-hud-msg.is-warn { color: #f0c040; }
.mob-stepbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; padding-top: 4px; border-top: 1px solid #2c3a33; }
.mob-steps { list-style: none; margin: 2px 0 0; padding: 0; }
.mob-step { padding: 3px 0 2px; color: #6f8a7a; overflow-wrap: anywhere; }
.mob-step b { font-weight: 700; }
.mob-step.is-cur { color: #fff; }
.mob-step.is-cur b { color: #ffb070; }
.mob-step.is-done { color: #2de66f; }
.mob-step.is-half { color: #f0c040; }
.mob-step.is-miss { color: #ff8a80; }
.mob-cue { display: block; margin: 2px 0 2px 14px; color: #e4f6ea; font-size: 12px; }
.mob-note { display: inline-block; margin-left: 6px; color: #f0c040; font-size: 11px; }
.mob-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.mob-sub { color: #6f8a7a; font-size: 11px; letter-spacing: 0.06em; }
.mob-hud-b { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mob-hud.is-folded .mob-steps, .mob-hud.is-folded .mob-stepbar, .mob-hud.is-folded .mob-chips, .mob-hud.is-folded > .mob-cue, .mob-hud.is-folded .mob-hud-b > .mob-btn:not(.is-mob) { display: none; }
/* folded, 🛟 MOB stays (a phone has no Shift+O and the helm's MOB is below the fold): the bar then holds it alone, else nothing */
.mob-hud.is-folded .mob-hud-b { margin-top: 0; }
.mob-hud.is-folded .mob-hud-b > .mob-btn.is-mob { margin-top: 5px; }
.mob-btn {
    min-height: 30px; padding: 4px 10px; cursor: pointer; border-radius: 4px; border: 1px solid #2c3a33; background: #0d1512; color: #e4f6ea;
    font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.04em; white-space: nowrap;
}
.mob-btn:hover { border-color: #4a6a58; }
.mob-btn:focus-visible { outline: 2px solid #ff7a4a; outline-offset: 1px; }
.mob-btn.is-mob { background: #c8321a; border-color: #ff5a3a; color: #fff; animation: mob-blink2 0.8s steps(1) infinite; }
@keyframes mob-blink2 { 50% { background: #5a1408; } }
.mob-btn.is-go { background: #ff7a4a; border-color: #ff7a4a; color: #1a0802; }
.mob-btn.is-go:hover { background: #ff9a72; }
.mob-btn.is-warn { color: #ff8a80; border-color: #5a2a26; }
.mob-btn.is-sent { color: #2de66f; border-color: #1f5a36; }
.mob-mini { min-height: 26px; padding: 2px 8px; font-size: 11px; }
/* ▶ DEMO (2026-10-09, ais-simulator.js _dd — one demo engine for the lessons and the drills): the demo bar — top left over the
   simulator (the drills' own panels are top right), at the bottom on a phone, at the foot of a docking lesson's plan; the pulsing
   orange rings on the controls of the demo helmsman's last order (our focus orange, #f39100: soft, never a flashing fill; still
   with prefers-reduced-motion); ▶ DEMO in the drills' panels and in the lesson bar */
.dd-bar {
    position: fixed; z-index: 2147483600; top: max(56px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left));
    width: min(430px, calc(100vw - 16px)); box-sizing: border-box; padding: 7px 10px 8px; border-radius: 8px;
    background: rgba(5, 8, 7, 0.93); border: 1px solid #8a5410; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    font: 12px/1.35 "Share Tech Mono", Menlo, monospace; color: #e4f6ea; pointer-events: auto;
}
.dd-bar[hidden] { display: none; }
.dd-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dd-tag { color: #f39100; letter-spacing: 0.08em; white-space: nowrap; }
.dd-name { flex: 1 1 auto; min-width: 0; color: #ffd08a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.04em; }
.dd-step { color: #6f8a7a; font-size: 11px; white-space: nowrap; }
.dd-note { margin-top: 3px; color: #f0c040; font-size: 11px; overflow-wrap: anywhere; }
.dd-note[hidden] { display: none; }
.dd-cap { margin-top: 5px; padding-top: 5px; border-top: 1px solid #2c3a33; overflow-wrap: anywhere; }
.dd-what { display: inline; color: #fff; font-size: 14px; letter-spacing: 0.04em; }
.dd-key {
    display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid #4a6a58; border-radius: 3px; color: #ffd08a;
    font: 700 11px "Share Tech Mono", Menlo, monospace; vertical-align: 1px;
}
.dd-key[hidden] { display: none; }
.dd-key.is-ring { border-color: #f39100; box-shadow: 0 0 0 2px rgba(243, 145, 0, 0.55); animation: dd-key 0.9s ease-in-out infinite; }
@keyframes dd-key { 50% { box-shadow: 0 0 0 4px rgba(243, 145, 0, 0.2); } }
.dd-why { display: block; margin-top: 2px; color: #b9cfc2; }
.dd-why:empty { display: none; }
.dd-b, .dd-end, .dd-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.dd-b[hidden], .dd-end[hidden], .dd-pop[hidden] { display: none; }
.dd-seg { display: inline-flex; gap: 2px; }
.dd-btn {
    min-height: 30px; padding: 4px 9px; cursor: pointer; border-radius: 4px; border: 1px solid #2c3a33; background: #0d1512; color: #e4f6ea;
    font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.04em; white-space: nowrap;
}
.dd-btn:hover { border-color: #4a6a58; }
.dd-btn:focus-visible { outline: 2px solid #f39100; outline-offset: 1px; }
.dd-btn:disabled { opacity: 0.4; cursor: default; }
.dd-btn[aria-checked="true"], .dd-btn[aria-pressed="true"], .dd-btn.is-on { border-color: #f39100; color: #f39100; }
.dd-btn.is-go { background: #f39100; border-color: #f39100; color: #1a1000; }
.dd-btn.is-go:hover { background: #ffad3a; }
.dd-ex { color: #ff8a80; border-color: #5a2a26; }
.dd-pop { padding: 6px 8px; border-radius: 5px; background: #2a1a04; border: 1px solid #8a5410; }
.dd-pop-t { flex: 1 1 100%; color: #ffd08a; }
.dd-pop .dd-btn[hidden] { display: none; }
.dd-bar.is-end { border-color: #f39100; }
/* its place (_ddBarPlace): top left; top centre when a drill's panel is there; bottom left; the end over a debrief: bottom right */
.dd-bar[data-pos="tc"] { top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); }
.dd-bar[data-pos="bl"] { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
.dd-bar[data-pos="br"] { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: auto; right: max(8px, env(safe-area-inset-right)); width: min(380px, calc(100vw - 16px)); }
/* the ring: on the lever, the wheel or the button of the last order — a slow pulse, never over the control's own face */
.dd-ring {
    position: fixed; z-index: 2147483590; pointer-events: none; box-sizing: border-box; border-radius: 9px;
    border: 3px solid #f39100; box-shadow: 0 0 0 3px rgba(243, 145, 0, 0.28), 0 0 14px rgba(243, 145, 0, 0.45);
    animation: dd-ring 0.95s ease-in-out infinite;
}
.dd-ring[hidden] { display: none; }
@keyframes dd-ring { 50% { border-color: rgba(243, 145, 0, 0.35); box-shadow: 0 0 0 6px rgba(243, 145, 0, 0.12), 0 0 4px rgba(243, 145, 0, 0.2); } }
.dd-toast {
    position: fixed; z-index: 2147483610; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%);
    max-width: calc(100vw - 32px); padding: 7px 12px; border-radius: 6px; background: rgba(5, 8, 7, 0.95); border: 1px solid #8a5410; color: #ffd08a;
    font: 12px/1.35 "Share Tech Mono", Menlo, monospace;
}
.dd-toast[hidden] { display: none; }
/* ▶ DEMO in a drill's panel, brief or debrief: the panel's own button, an orange outline */
.dd-go { border-color: #8a5410 !important; color: #ffb347 !important; }
.dd-go:hover { border-color: #f39100 !important; color: #f39100 !important; }
@media (prefers-reduced-motion: reduce) { .dd-ring, .dd-key.is-ring { animation: none; } }
@media (max-width: 600px) {
    .dd-bar, .dd-bar[data-pos] { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; right: 8px; width: auto; padding: 5px 8px 6px; transform: none; }
    .dd-what { font-size: 13px; }
    .dd-why { font-size: 11px; max-height: 2.8em; overflow: hidden; }
    .dd-btn { min-height: 34px; padding: 4px 8px; }
    .dd-b, .dd-end, .dd-pop { margin-top: 5px; }
}
/* a docking lesson's demo (DD_K.les): the bar at the foot of the plan (K.host: .dock-mid), over the plan's top above a question's
   card or the next run's (.is-ldm-q); RETRY and GHOST away from the lesson bar while it runs (.is-ldm); ▶ DEMO in the lesson bar
   (▶ alone beside GHOST, GUIDE and RETRY: that bar is 520 px at most; the word on a phone); the typed radio call's caret */
.ais-dock .dd-bar.is-host {
    position: absolute; top: auto; bottom: 6px; left: auto; right: 6px; transform: none; z-index: 4;     /* (the corner: the boat at the plan's centre stays in sight) */
    width: min(460px, calc(42% - 12px));
}
.ais-dock.is-ldm-q .dd-bar.is-host { top: 4px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(560px, calc(100% - 12px)); }
.ais-dock .dock-les-row .dock-les-dmo { color: #f39100; border-color: rgba(243, 145, 0, 0.7); }
.ais-dock .dock-les-row .dock-les-dmo-t { display: none; }
.ais-dock.is-ldm #dock-les-retry, .ais-dock.is-ldm #dock-les-ghost { display: none; }
.ais-dock .dock-les-card > .dock-les-brief.ldm-typing::after { content: '▍'; color: #f39100; }
@media (max-width: 600px) {
    .ais-dock .dd-bar.is-host { left: 4px; right: 4px; top: 4px; bottom: auto; width: auto; transform: none; }
    .ais-dock.is-ldm #dock-les-hud { position: relative; }
    .ais-dock #dock-les-hud > .dd-bar.is-host { top: 0; bottom: auto; left: 0; right: 0; width: auto; transform: none; min-height: 100%; }
    .ais-dock.is-ldm-q .dd-bar.is-host { top: 4px; bottom: auto; }
}
@media (max-width: 480px) { .ais-dock .dock-les-row .dock-les-dmo-t { display: inline; } }
/* a phone, a drill: the bar over the top once a control it rings lies under its place at the bottom (_ddBarPlace: 'pt') */
@media (max-width: 600px) { .dd-bar[data-pos="pt"] { top: max(8px, env(safe-area-inset-top)); bottom: auto; } }
/* ▶ DEMO · THE WAY OUT (2026-10-09, owner: the pilot drill's panel folded, END DRILL out of sight — "I could not get out of the pilot
   drill"; the panels over the site's menu in the page): ✕ END in every drill panel's header, folded too (_ddEndBtn; a demo running
   ends first) — not where there is nothing to end (the tow panel without an exercise, the ⚑ panel for her own signals, the DP panel
   with no exercise) */
.dd-xend { flex: none; white-space: nowrap; color: #ff8a80 !important; border-color: #6a2a26 !important; }
.dd-xend:hover { color: #fff !important; border-color: #ff6a5f !important; }
.tw-hud:not(.is-ex) .dd-xend, .ds-hud.is-sig .dd-xend, html:not(.off-running):not(.sv-running) .off-dp .dd-xend { display: none; }
/* the header row stays at the panel's top while the panel scrolls (a tall panel on a short screen, a ringed button scrolled into view):
   its ▾ / ▸ and ✕ END never scroll away */
.ptx-hud-l1, .off-hud-l1, .tw-hud-h, .ds-hud-l1, .mob-hud-l1, .emg-hud-l1 { position: sticky; top: 0; z-index: 2; background: #050807; }
.ptx-hud-l1 { background: #07090c; }
.ds-hud-l1 { background: #050b12; }
/* the page (not the full window): the drill panels and the DEMO bar below the simulator's own title row (← Scenarios) while it is in
   sight, never over the site's menu nor that row — --dd-y on <html> (_ddPageY: that row's bottom; 0 once it is scrolled away): they
   move with the simulator, every one by the same, so they stay clear of each other as they were; the full window as before */
html:not(.ais-fullwin) .ptx-hud, html:not(.ais-fullwin):not(.rg-racing) .off-hud, html:not(.ais-fullwin):not(.rg-racing) .ds-hud { top: calc(max(8px, env(safe-area-inset-top)) + var(--dd-y, 0px)); }
html:not(.ais-fullwin) .mob-hud, html:not(.ais-fullwin) .emg-hud { top: calc(max(56px, env(safe-area-inset-top)) + var(--dd-y, 0px)); }
html:not(.ais-fullwin) .tw-hud { top: calc(max(64px, env(safe-area-inset-top)) + var(--dd-y, 0px)); }
@media (min-width: 701px) {
    html:not(.ais-fullwin) .off-dp { top: calc(max(64px, env(safe-area-inset-top)) + var(--dd-y, 0px)); }
    html:not(.ais-fullwin) .pch { top: calc(max(8px, env(safe-area-inset-top)) + var(--dd-y, 0px)); }
    html:not(.ais-fullwin):not(.rg-racing) .off-hud { max-height: calc(100vh - 16px - var(--dd-y, 0px)); }
    html:not(.ais-fullwin) .tw-hud { max-height: calc(100vh - 80px - var(--dd-y, 0px)); }
}
@media (min-width: 601px) {
    html:not(.ais-fullwin) .mob-hud, html:not(.ais-fullwin) .emg-hud { max-height: calc(100vh - 24px - var(--dd-y, 0px)); }
    html:not(.ais-fullwin) .dd-bar:not(.is-host):not([data-pos]), html:not(.ais-fullwin) .dd-bar[data-pos="tl"]:not(.is-host) { top: calc(max(56px, env(safe-area-inset-top)) + var(--dd-y, 0px)); }
    html:not(.ais-fullwin) .dd-bar[data-pos="tc"]:not(.is-host) { top: calc(max(8px, env(safe-area-inset-top)) + var(--dd-y, 0px)); }
}
@media (max-width: 560px) { html:not(.ais-fullwin) .tw-hud { top: calc(max(60px, calc(env(safe-area-inset-top) + 52px)) + var(--dd-y, 0px)); } }
/* a phone, the bar at the top ('pt'): under the header row of a drill panel up there (--dd-ph, _ddPageY) — its ▾ / ▸ and ✕ END in sight */
@media (max-width: 600px) {
    .dd-bar[data-pos="pt"]:not(.is-host) { top: max(max(8px, env(safe-area-inset-top)), var(--dd-ph, 0px)); }
    html:not(.ais-fullwin) .dd-bar[data-pos="pt"]:not(.is-host) { top: max(calc(max(8px, env(safe-area-inset-top)) + var(--dd-y, 0px)), var(--dd-ph, 0px)); }
}
@media (orientation: landscape) and (max-height: 560px) {
    html.dv-focus:not(.dv-plan):not(.ais-fullwin) .mob-hud, html.dv-focus:not(.dv-plan):not(.ais-fullwin) .ptx-hud, html.dv-focus:not(.dv-plan):not(.ais-fullwin) .ds-hud,
    html.dv-focus:not(.dv-plan):not(.ais-fullwin) .off-hud, html.dv-focus:not(.dv-plan):not(.ais-fullwin) .tw-hud { max-height: calc(100vh - 72px - var(--dd-y, 0px)) !important; }
}
/* the drills and the debrief: a sheet over the simulator (over the full window too) */
.mob-sheet {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483500; display: flex; align-items: flex-start; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px 16px; background: rgba(0, 0, 0, 0.55); overflow-y: auto; overscroll-behavior: contain;
}
.mob-sheet[hidden] { display: none; }
.mob-box {
    width: 100%; max-width: 760px; display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 32px);
    background: #050807; border: 1px solid #7a3420; border-radius: 8px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
    font: 13px/1.4 "Share Tech Mono", Menlo, monospace; color: #e4f6ea;
}
@supports (height: 100dvh) { .mob-box { max-height: calc(100dvh - 32px); } .mob-hud { max-height: calc(100dvh - 24px); } }
.mob-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px 14px; border-bottom: 1px solid #2c3a33; }
.mob-title { font-size: 16px; letter-spacing: 0.06em; color: #ff7a4a; white-space: nowrap; }
.mob-head .mob-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-x { min-width: 40px; }
.mob-body { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 10px 12px 12px; -webkit-overflow-scrolling: touch; }
.mob-body h4 { margin: 14px 0 6px; font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #f0c040; }
.mob-intro { color: #8aa598; font-size: 12px; margin: 0 2px 10px; }
.mob-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.mob-opt-l { min-width: 92px; color: #6f8a7a; font-size: 11px; letter-spacing: 0.08em; }
.mob-opt[aria-checked="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.mob-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.mob-card { padding: 9px 10px; border: 1px solid #2c3a33; border-radius: 6px; background: #0d1512; min-width: 0; }
.mob-card.is-off { opacity: 0.5; }
.mob-card-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mob-card-t b { font-size: 13px; color: #fff; overflow-wrap: anywhere; }
.mob-card-m { color: #b9cfc2; font-size: 12px; margin-top: 4px; overflow-wrap: anywhere; }
.mob-card-m.is-sub { color: #6f8a7a; }
.mob-card-s { margin: 6px 0 0 18px; padding: 0; color: #8aa598; font-size: 11px; }
.mob-card-a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mob-ref { color: #6f8a7a; font-size: 10px; overflow-wrap: anywhere; }
.mob-badge { font-size: 10px; letter-spacing: 0.08em; padding: 1px 6px; border-radius: 3px; border: 1px solid #2c3a33; color: #9fb8aa; white-space: nowrap; }
.mob-badge.is-sail { border-color: #2c4a5a; color: #5fd4ff; }
.mob-badge.is-power { border-color: #5a4a20; color: #f0c040; }
.mob-badge.is-ship { border-color: #5a2a26; color: #ff8a80; }
.mob-badge.is-best { border-color: #f0c040; color: #f0c040; }
.mob-foot { padding: 6px 14px 9px; border-top: 1px solid #2c3a33; color: #6f8a7a; font-size: 11px; overflow-wrap: anywhere; }
.mob-res { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mob-score { font: 400 44px/1 'VT323', "Share Tech Mono", monospace; color: #2de66f; }
.mob-score.is-fail { color: #ff5a3a; }
.mob-stars { font-size: 22px; color: #f0c040; letter-spacing: 0.1em; }
.mob-res-t { color: #fff; font-weight: 700; letter-spacing: 0.04em; }
.mob-tip { margin: 8px 0 10px; padding: 7px 10px; border-left: 3px solid #ff7a4a; background: #120c08; color: #f2e4da; }
.mob-det { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 12px; align-items: start; }
.mob-svg { width: 100%; height: auto; border: 1px solid #2c3a33; border-radius: 6px; display: block; }
.mob-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.mob-table td { padding: 3px 6px; border-bottom: 1px solid #142019; color: #e4f6ea; overflow-wrap: anywhere; }
.mob-table td.is-n { text-align: right; white-space: nowrap; color: #f0c040; }
.mob-steps.is-deb { margin-top: 0; }
.mob-facts { margin: 8px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 10px; font-size: 12px; }
.mob-facts dt { color: #6f8a7a; letter-spacing: 0.06em; }
.mob-facts dd { margin: 0; color: #e4f6ea; overflow-wrap: anywhere; }
.mob-log { max-height: 160px; overflow-y: auto; padding: 4px 6px; border: 1px solid #2c3a33; border-radius: 4px; color: #b9cfc2; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mob-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 12px; border-top: 1px solid #2c3a33; }
/* the chart: the plotter's MOB waypoint */
.mob-ch i { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border: 2px solid #ff3830; border-radius: 50%; background: rgba(255, 56, 48, 0.25); }
.mob-ch i::before, .mob-ch i::after { content: ''; position: absolute; left: 6px; top: 1px; width: 2px; height: 12px; background: #ff3830; transform: rotate(45deg); }
.mob-ch i::after { transform: rotate(-45deg); }
.mob-ch b { position: absolute; left: 22px; top: 1px; white-space: nowrap; font: 700 11px "Share Tech Mono", Menlo, monospace; color: #c41a12; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
@media (max-width: 600px) {
    .mob-sheet { padding: env(safe-area-inset-top) 0 0; }
    .mob-box { max-height: none; min-height: 100%; border-radius: 0; border-left: 0; border-right: 0; }
    .mob-list, .mob-det { grid-template-columns: minmax(0, 1fr); }
    .mob-hud { width: calc(100vw - 16px); max-height: 45vh; padding: 5px 8px; }
    .mob-hud-clk { font-size: 22px; }
}

/* ===== TOWAGE (2026-10-08) — ⛓ TOWING, the tugs' drive box, the TOW panel, the exercises' sheet (ais-simulator.js _tw*) ===== */
.tw-btn-main { color: #f39100; border-color: #5a3a10; border-style: solid; }
.tw-btn-main[aria-pressed="true"] { background: #f39100; border-color: #f39100; color: #140b00; }
.tw-btn-main:hover { color: #ffb347; }
/* the drive box: AZIMUTHS (two dials, the mode, SIDE) or FLANKING RUDDERS */
.helm-tw-box .helm-seg .ais-bridge-toggle { min-width: 0; }
.helm-tw-box [data-twmode][aria-pressed="true"] { background: #f39100; border-color: #f39100; color: #1a1000; }
.tw-dials { display: flex; gap: 8px; justify-content: center; width: 100%; }
.tw-dial { width: 92px; height: 92px; touch-action: none; border-radius: 50%; }
.tw-side { width: 100%; }
.tw-side > b { min-width: 46px; text-align: center; font: 400 15px 'VT323', monospace; color: #f0c040; }
.tw-flank { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; }
.tw-flank-bar { position: relative; width: 100%; max-width: 170px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #c8202a 0%, #3a1a1a 48%, #1a1a1a 50%, #1a3a20 52%, #1f8a3a 100%); }
.tw-flank-bar > i { position: absolute; top: -3px; left: 50%; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 1px; background: #f39100; box-shadow: 0 0 0 1px #000; }
#tw-flank-sub { white-space: normal; text-align: center; }
@media (min-width: 561px) {
    .ais-helm.is-tug { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.3fr); grid-auto-flow: row dense; }
    .ais-helm.is-tug > .helm-wheel-box { grid-column: 1; grid-row: span 2; }
    .ais-helm.is-tug > .helm-engine-box { grid-column: 2; grid-row: span 2; }
    .ais-helm.is-tug > .helm-tw-box, .ais-helm.is-tug > .helm-moor-box { grid-column: 3; }
}
@media (max-width: 560px) {
    .ais-helm.is-tug { grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; }
    .ais-helm.is-tug > .helm-tw-box { grid-column: 1 / -1; }
}
/* the TOW panel: over the simulator, top left; folds to its title */
.tw-hud {
    position: fixed; z-index: 2147483300; top: max(64px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); width: min(350px, calc(100vw - 16px));
    max-height: calc(100vh - 80px); overflow-y: auto; box-sizing: border-box; padding: 7px 9px 8px; border-radius: 8px;
    background: rgba(5, 8, 7, 0.92); border: 1px solid #2c3a33; border-left: 3px solid #f39100; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    font: 11.5px/1.35 "Share Tech Mono", Menlo, monospace; color: #e4f6ea;
}
.tw-hud[hidden] { display: none; }
.tw-hud-h { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tw-hud-t { color: #f39100; letter-spacing: 0.08em; white-space: nowrap; }
.tw-hud-s { flex: 1 1 auto; min-width: 0; color: #9fb8aa; font-size: 10.5px; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-hud-clk { font: 400 20px/1 'VT323', monospace; color: #fff; }
.tw-hud.is-folded > :not(.tw-hud-h) { display: none !important; }
.tw-steps { margin: 6px 0 2px; padding: 0 0 0 4px; list-style: none; }
.tw-steps li { color: #6f8a7a; padding: 1px 0; overflow-wrap: anywhere; }
.tw-steps li.is-done { color: #2de66f; }
.tw-steps li.is-now { color: #fff; font-weight: 700; }
.tw-hint { margin: 4px 0; color: #f0c040; min-height: 14px; overflow-wrap: anywhere; }
.tw-hint:empty { display: none; }
.tw-gauge, .tw-heel { display: grid; grid-template-columns: 34px minmax(0, 1fr) 54px; align-items: center; gap: 6px; margin-top: 4px; }
.tw-g-lab { font-size: 9.5px; letter-spacing: 0.08em; color: #8fa89a; }
.tw-g-val { font: 400 17px/1 'VT323', monospace; color: #f0c040; text-align: right; white-space: nowrap; }
.tw-g-bar, .tw-h-bar { position: relative; height: 10px; border-radius: 5px; background: #142019; box-shadow: inset 0 0 0 1px #000; overflow: hidden; }
.tw-g-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #2de66f; transition: width 0.25s linear; }
.tw-g-fill.is-warn { background: #f0c040; }
.tw-g-fill.is-alarm { background: #ff3830; animation: ais-echo-blink 0.8s steps(1) infinite; }
.tw-g-swl, .tw-g-brk { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.tw-g-swl { background: #f0c040; }
.tw-g-brk { background: repeating-linear-gradient(180deg, #fff 0 2px, transparent 2px 4px); }
.tw-h-bar { background: linear-gradient(90deg, #5a1a18 0%, #2a2f2c 30%, #1c2a22 50%, #2a2f2c 70%, #5a1a18 100%); }
.tw-h-de { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ff3830; }
.tw-h-ndl { position: absolute; top: -1px; bottom: -1px; width: 3px; margin-left: -1.5px; left: 50%; background: #fff; box-shadow: 0 0 0 1px #000; transition: left 0.25s linear; }
.tw-h-ndl.is-alarm { background: #ff3830; }
.tw-read { color: #b9cfc2; font-size: 10.5px; margin-top: 3px; overflow-wrap: anywhere; }
.tw-read:empty { display: none; }
.tw-btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tw-btns:empty { display: none; }
.tw-prac { border-top: 1px solid #2c3a33; padding-top: 5px; }
.tw-btn {
    cursor: pointer; padding: 5px 8px; min-height: 30px; border-radius: 4px; border: 1px solid #2c3a33; background: #0d1512; color: #e4f6ea;
    font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.04em; white-space: nowrap;
}
.tw-btn kbd { margin-left: 5px; padding: 0 3px; border-radius: 2px; background: #1c2a22; color: #8fa89a; font: 400 9.5px "Share Tech Mono", Menlo, monospace; }
.tw-btn:hover:not(:disabled) { border-color: #4a6a58; }
.tw-btn:focus-visible { outline: 2px solid #f39100; outline-offset: 1px; }
.tw-btn:disabled { opacity: 0.4; cursor: default; }
.tw-btn[hidden] { display: none; }
.tw-btn[aria-pressed="true"] { border-color: #f0c040; color: #f0c040; }
.tw-btn.is-go { background: #f39100; border-color: #f39100; color: #140b00; }
.tw-btn.is-go:hover:not(:disabled) { background: #ffa72a; }
.tw-btn.is-go:disabled { background: #3a2a10; border-color: #3a2a10; color: #9a7a40; }
.tw-btn.is-warn { color: #ff8a80; border-color: #5a2a26; }
.tw-mini { min-height: 26px; padding: 3px 7px; font-size: 10.5px; }
/* the sheet: the catalog, a briefing, the debrief */
.tw-sheet {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483500; display: flex; align-items: flex-start; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px 16px; background: rgba(0, 0, 0, 0.55); overflow-y: auto; overscroll-behavior: contain;
}
.tw-sheet[hidden] { display: none; }
.tw-box {
    width: 100%; max-width: 760px; display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 32px);
    background: #050807; border: 1px solid #2c3a33; border-top: 3px solid #f39100; border-radius: 8px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
    font: 13px/1.45 "Share Tech Mono", Menlo, monospace; color: #e4f6ea;
}
@supports (height: 100dvh) { .tw-box { max-height: calc(100dvh - 32px); } }
.tw-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px 14px; border-bottom: 1px solid #2c3a33; }
.tw-title { font-size: 16px; letter-spacing: 0.08em; color: #f39100; white-space: nowrap; }
.tw-sub { flex: 1 1 auto; min-width: 0; color: #6f8a7a; font-size: 11px; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-x { min-width: 40px; }
.tw-body { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 10px 12px 14px; -webkit-overflow-scrolling: touch; }
.tw-note { color: #8fa89a; font-size: 12px; margin: 4px 2px 10px; }
.tw-note.is-err { color: #ff6a5f; }
.tw-card {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 64px; align-items: center; gap: 10px; width: 100%; margin: 0 0 6px; padding: 9px 10px;
    text-align: left; cursor: pointer; border: 1px solid #2c3a33; border-radius: 6px; background: #0d1512; color: #e4f6ea; font: inherit;
}
.tw-card:hover:not(:disabled) { border-color: #f39100; }
.tw-card:focus-visible { outline: 2px solid #f39100; outline-offset: 1px; }
.tw-card:disabled { opacity: 0.45; cursor: default; }
.tw-card-n { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #f39100; color: #f39100; font-weight: 700; }
.tw-card-tx { display: flex; flex-direction: column; min-width: 0; }
.tw-card-tx b { letter-spacing: 0.04em; }
.tw-card-tx small { color: #8fa89a; font-size: 11.5px; }
.tw-card-v { color: #5fd4ff; font-size: 11px; letter-spacing: 0.05em; white-space: nowrap; }
.tw-card-best { text-align: right; font: 400 20px/1 'VT323', monospace; color: #6f8a7a; }
.tw-card-best.is-good { color: #2de66f; }
.tw-card-free { grid-template-columns: 34px minmax(0, 1fr); }
.tw-lead { color: #f0c040; margin: 2px 2px 8px; }
.tw-brief { margin: 0 0 10px; padding-left: 18px; }
.tw-brief li { margin: 0 0 6px; color: #d7e6dd; }
.tw-rule { margin: 8px 0; padding: 7px 10px; border-left: 3px solid #5fd4ff; background: #0a1418; color: #bfe8f8; font-size: 12px; }
.tw-cond { color: #9fb8aa; font-size: 12px; letter-spacing: 0.04em; margin: 6px 2px; }
.tw-steps-brief { list-style: decimal; padding-left: 22px; }
.tw-steps-brief li { color: #b9cfc2; }
.tw-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tw-row .tw-btn { min-height: 36px; padding: 7px 14px; font-size: 12px; }
.tw-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; }
.tw-score b { font: 400 56px/1 'VT323', monospace; color: #f0c040; }
.tw-score span { color: #b9cfc2; }
.tw-score.is-good b { color: #2de66f; }
.tw-score.is-fail b, .tw-score.is-fail span { color: #ff6a5f; }
.tw-items { width: 100%; border-collapse: collapse; margin: 0 0 10px; font-size: 12px; }
.tw-items td { padding: 4px 6px; border-bottom: 1px solid #16211b; vertical-align: top; }
.tw-items .tw-pts { color: #f0c040; white-space: nowrap; text-align: right; }
.tw-items .tw-why { color: #8fa89a; }
@media (max-width: 560px) {
    .tw-hud { top: max(60px, calc(env(safe-area-inset-top) + 52px)); max-height: min(46vh, calc(100vh - 120px)); }     /* below ✕ EXIT and ← Scenarios (full window) */
    .tw-card { grid-template-columns: 30px minmax(0, 1fr) 52px; }
    .tw-card-v { display: none; }
}
/* ===== ⚑ DISTRESS SIGNALS (v1) — the button, the sheet, the drill bar (ais-simulator.js _ds*; docs/distress-signals.md) ===== */
/* the button beside SHARED SEA: a signal red; blinking while her own signals show (TRAINING), steady orange in a drill */
#helm-distress { color: #ff6a5f; border-color: #6a2a26; }
#helm-distress:hover { color: #ffd0cb; }
#helm-distress.is-on { background: #2a0806; border-color: #ff4a3d; color: #ffb3ab; animation: ds-blink 1.1s steps(1) infinite; }
#helm-distress.is-drill { border-color: #f39100; color: #ffb547; }
@keyframes ds-blink { 50% { border-color: #6a2a26; color: #ff6a5f; } }
/* the sheet: a chart-table look — dark navy paper, a fine grid, SkipperCheck orange for the go buttons */
.ds-sheet {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483490; display: flex; align-items: flex-start; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px 16px; background: rgba(2, 6, 12, 0.6); overflow-y: auto; overscroll-behavior: contain;
}
.ds-sheet[hidden] { display: none; }
.ds-box {
    position: relative; width: 100%; max-width: 820px; display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 32px);
    background-color: #07111c; border: 1px solid #23405a; border-radius: 8px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
    background-image: linear-gradient(rgba(95, 180, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 180, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    font: 13px/1.45 "Share Tech Mono", Menlo, monospace; color: #e2edf6;
}
@supports (height: 100dvh) { .ds-box { max-height: calc(100dvh - 32px); } }
.ds-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px 14px; border-bottom: 1px solid #23405a; }
.ds-title { flex: none; white-space: nowrap; font-size: 16px; letter-spacing: 0.08em; color: #ff6a5f; }
.ds-sub { flex: 1 1 auto; min-width: 0; color: #7f9db6; font-size: 11px; letter-spacing: 0.08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-tabs { display: flex; gap: 4px; padding: 8px 10px 0; flex-wrap: wrap; }
.ds-body { flex: 1 1 auto; min-height: 140px; overflow-y: auto; padding: 10px 12px 14px; -webkit-overflow-scrolling: touch; }
.ds-body h4 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.1em; color: #f0c040; }
.ds-foot { min-height: 18px; padding: 6px 14px 9px; border-top: 1px solid #23405a; color: #8fdcff; font-size: 12px; overflow-wrap: anywhere; }
.ds-foot.is-err { color: #ff6a5f; }
.ds-foot:empty { display: none; }
.ds-btn {
    position: relative; overflow: hidden; cursor: pointer; padding: 7px 11px; min-height: 34px; border-radius: 4px; border: 1px solid #23405a;
    background: #0b1826; color: #e2edf6; font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em; white-space: nowrap;
}
.ds-btn:hover { border-color: #4f7ea3; }
.ds-btn:focus-visible { outline: 2px solid #f39100; outline-offset: 1px; }
.ds-btn:disabled { opacity: 0.4; cursor: default; }
.ds-btn.is-go { background: #f39100; border-color: #f39100; color: #160b00; }
.ds-btn.is-go:hover { background: #ffa72a; }
.ds-btn.is-warn { color: #ff8a80; border-color: #6a2a26; }
.ds-btn.is-fire { background: #3a0d09; border-color: #ff4a3d; color: #ffd0cb; min-width: 74px; }
.ds-btn.is-fire:hover:not(:disabled) { background: #5a120c; }
.ds-btn.is-hold { display: block; width: 100%; max-width: 420px; margin: 10px 0 4px; min-height: 46px; background: #3a0d09; border: 2px solid #ff4a3d; color: #ffd0cb; font-size: 14px; }
.ds-btn.is-hold .ds-hold-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 74, 61, 0.45); pointer-events: none; }
.ds-mini { padding: 3px 8px; min-height: 26px; font-size: 10px; color: #8fdcff; }
.ds-x { min-width: 40px; }
.ds-tab { border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: #9fb8cc; }
.ds-tab[aria-selected="true"] { background: #e2edf6; border-color: #e2edf6; color: #07111c; }
.ds-note { color: #9fb8cc; font-size: 12px; margin: 6px 2px; }
.ds-note.is-err { color: #ff6a5f; }
.ds-note:empty { display: none; }
.ds-cover { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 11px; border: 1px dashed #6a2a26; border-radius: 6px; background: rgba(42, 8, 6, 0.55); }
.ds-cover b { color: #ff8a80; letter-spacing: 0.06em; }
.ds-cover span { flex: 1 1 260px; color: #c9b3b0; font-size: 12px; }
.ds-cover.is-up { border-style: solid; border-color: #ff4a3d; }
.ds-cover.is-up b { color: #ffb3ab; }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ds-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 8px; }
.ds-card { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid #23405a; border-radius: 6px; background: rgba(9, 22, 36, 0.92); min-width: 0; }
.ds-card.is-on { border-color: #ff4a3d; box-shadow: inset 0 0 0 1px rgba(255, 74, 61, 0.35); }
.ds-card.is-run { border-color: #f39100; margin-bottom: 8px; }
.ds-card-h { display: flex; align-items: baseline; gap: 6px; }
.ds-card-h b { color: #fff; font-size: 13px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.ds-card small { color: #8fa9bf; font-size: 11px; line-height: 1.35; }
.ds-card p { margin: 2px 0; color: #c4d4e2; font-size: 12px; }
.ds-card-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.ds-ax { flex: none; color: #f0c040; font-size: 11px; }
.ds-stock { color: #8fdcff; font-size: 11px; letter-spacing: 0.06em; }
.ds-stock.is-out { color: #ff6a5f; }
.ds-state { color: #8fa9bf; font-size: 11px; }
.ds-card.is-on .ds-state { color: #ff8a80; }
.ds-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; align-items: center; }
.ds-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.ds-field { display: flex; flex-direction: column; gap: 3px; color: #8fa9bf; font-size: 11px; letter-spacing: 0.06em; margin: 6px 0; }
.ds-in {
    padding: 7px 9px; box-sizing: border-box; border-radius: 4px; border: 1px solid #23405a; background: #0b1826; color: #e2edf6;
    font: 600 13px "Share Tech Mono", Menlo, monospace; color-scheme: dark; max-width: 100%;
}
.ds-in:focus { outline: none; border-color: #f39100; }
.ds-in.is-short { width: 90px; }
.ds-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; margin: 4px 0 8px; }
.ds-checks.is-one { grid-template-columns: minmax(0, 1fr); }
.ds-check { display: flex; align-items: flex-start; gap: 8px; padding: 4px 6px; border-radius: 4px; cursor: pointer; color: #dbe6ef; font-size: 12px; }
.ds-check:hover { background: rgba(95, 180, 255, 0.08); }
.ds-check input { margin: 2px 0 0; accent-color: #f39100; }
.ds-script {
    margin: 6px 0; padding: 9px 11px; white-space: pre-wrap; overflow-wrap: anywhere; border-left: 3px solid #f39100; border-radius: 4px;
    background: rgba(3, 9, 16, 0.9); color: #ffe2b8; font: 12px/1.55 "Share Tech Mono", Menlo, monospace; letter-spacing: 0.03em;
}
.ds-script.is-in { border-left-color: #5fd4ff; color: #cdefff; }
.ds-link { color: #f39100; text-decoration: underline; }
.ds-list { margin: 4px 0 8px 18px; padding: 0; color: #c4d4e2; font-size: 12px; }
.ds-list li { margin: 3px 0; }
.ds-tw { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ds-table { border-collapse: collapse; width: 100%; font-size: 12px; margin: 6px 0; }
.ds-table th { text-align: left; color: #7f9db6; font-weight: 400; letter-spacing: 0.06em; padding: 4px 6px; border-bottom: 1px solid #23405a; }
.ds-table td { padding: 4px 6px; border-bottom: 1px solid #13283b; vertical-align: top; color: #e2edf6; }
.ds-table td.is-pts { white-space: nowrap; color: #f0c040; text-align: right; }
.ds-table td.is-why { color: #9fb8cc; }
.ds-table td.is-no { color: #6f8396; }
.ds-table td.is-ax { color: #f0c040; white-space: nowrap; }
.ds-deb { margin: 8px 0; padding: 9px 11px; border: 1px solid #f39100; border-radius: 6px; background: rgba(30, 18, 2, 0.55); }
.ds-deb-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ds-deb-h b { color: #fff; letter-spacing: 0.05em; }
.ds-score { font: 400 26px/1 'VT323', "Share Tech Mono", monospace; color: #f39100; }
.ds-grade { color: #2de66f; letter-spacing: 0.08em; }
/* the confirm over the sheet: the cover */
.ds-conf {
    position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); box-sizing: border-box; z-index: 2;
    padding: 12px 14px; border: 2px solid #ff4a3d; border-radius: 8px; background: #12070a; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
.ds-conf-t { display: block; color: #ff8a80; letter-spacing: 0.08em; margin-bottom: 6px; }
.ds-conf p { margin: 6px 0; color: #e6d2cf; font-size: 12px; }
/* the drill bar: top centre over the views (under the regatta's bar while racing) */
.ds-hud {
    position: fixed; z-index: 2147483390; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
    width: min(660px, calc(100vw - 32px)); box-sizing: border-box; padding: 6px 10px 7px; border-radius: 8px;
    background: rgba(5, 11, 18, 0.92); border: 1px solid #f39100; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    font: 12px/1.35 "Share Tech Mono", Menlo, monospace; color: #e2edf6; pointer-events: auto;
}
.ds-hud[hidden] { display: none; }
.ds-hud.is-own { border-color: #ff4a3d; }
html.rg-racing .ds-hud { top: 132px; }
.ds-hud-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ds-hud-t { flex: 1 1 auto; min-width: 0; color: #f39100; letter-spacing: 0.08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-hud.is-sig .ds-hud-t { color: #ff8a80; }
.ds-hud-c { font: 400 24px/1 'VT323', "Share Tech Mono", monospace; color: #fff; flex: none; }
.ds-hud-l2 { margin-top: 3px; color: #c4d4e2; overflow-wrap: anywhere; }
.ds-hud-l2.is-warn { color: #f0c040; }
.ds-hud-l2.is-alarm, .ds-hud-l2.is-stop { color: #ff6a5f; }
.ds-hud-l2:empty, .ds-hud-l3:empty { display: none; }
.ds-hud-l3 { margin-top: 3px; color: #ff8a80; overflow-wrap: anywhere; animation: ds-blink 1.1s steps(1) infinite; }
.ds-hud-b { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ds-hud-b:empty { display: none; }
.ds-hud-b .ds-btn { min-height: 30px; padding: 4px 9px; }
.ds-hud-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #23405a; }
.ds-hud-f[hidden] { display: none; }
.ds-hud-f label { display: flex; align-items: center; gap: 6px; color: #8fa9bf; font-size: 11px; letter-spacing: 0.06em; }
@media (max-width: 600px) {
    .ds-sheet { padding: env(safe-area-inset-top) 0 0; }
    .ds-box { max-height: none; min-height: 100%; border-radius: 0; border-left: 0; border-right: 0; }
    .ds-hud { width: calc(100vw - 16px); padding: 5px 8px; }
    .ds-grid, .ds-grid.is-wide, .ds-checks { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { #helm-distress.is-on, .ds-hud-l3 { animation: none; } }
/* ===== ☑ PRE-CHARTER, PART A (2026-10-09) — the button, the panel at the side of the full window, the plan, the drawings, the drills (ais-simulator.js _pch*; docs/pre-charter-handover.md) ===== */
/* the button beside ⚓ DOCK: a harbour green */
#helm-precharter { color: #8fe5b2; border-color: #1f5a3a; }
#helm-precharter:hover { color: #c9f5d9; }
#helm-precharter[aria-pressed="true"] { background: #0c2a1a; border-color: #2f9e5c; color: #c9f5d9; }
/* the panel: the chart-table look of the drill sheets; the 3-D view stays free on its left */
.pch {
    position: fixed; z-index: 2147483380; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom));
    width: min(470px, max(340px, 48vw), calc(100vw - 16px)); box-sizing: border-box; display: flex; flex-direction: column; min-height: 0;
    background-color: #07111c; border: 1px solid #23405a; border-radius: 8px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
    background-image: linear-gradient(rgba(95, 180, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 180, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px; font: 12px/1.45 "Share Tech Mono", Menlo, monospace; color: #e2edf6;
}
.pch[hidden] { display: none; }
.pch-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px 12px; border-bottom: 1px solid #23405a; }
.pch-title { flex: none; font-size: 15px; letter-spacing: 0.08em; color: #8fe5b2; white-space: nowrap; }
.pch-boat { flex: 1 1 auto; min-width: 0; color: #7f9db6; font-size: 10px; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pch-tabs { display: flex; gap: 4px; padding: 7px 8px 0; flex-wrap: wrap; }
.pch-body { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 8px 10px 12px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.pch-foot { min-height: 16px; padding: 5px 12px 8px; border-top: 1px solid #23405a; color: #8fdcff; font-size: 11px; overflow-wrap: anywhere; }
.pch-foot:empty { display: none; }
.pch-foot.is-err { color: #ff6a5f; }
.pch-btn {
    cursor: pointer; padding: 6px 10px; min-height: 32px; border-radius: 4px; border: 1px solid #23405a; background: #0b1826; color: #e2edf6;
    font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.04em; text-align: left;
}
.pch-btn:hover { border-color: #4f7ea3; }
.pch-btn:focus-visible { outline: 2px solid #f39100; outline-offset: 1px; }
.pch-btn.is-go { background: #f39100; border-color: #f39100; color: #160b00; }
.pch-btn.is-go:hover { background: #ffa72a; }
.pch-btn.is-done { color: #8fe5b2; border-color: #2f9e5c; }
.pch-btn.is-warn { color: #ff8a80; border-color: #6a2a26; }
.pch-x { min-width: 38px; text-align: center; }
.pch-tab { border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: #9fb8cc; }
.pch-tab[aria-selected="true"] { background: #e2edf6; border-color: #e2edf6; color: #07111c; }
.pch-intro { margin: 2px 0 8px; color: #c4d4e2; }
.pch-note { margin: 4px 0 8px; color: #f0c040; font-size: 11px; }
.pch-note.is-err { color: #ff6a5f; }
.pch-small { color: #9fb8cc; font-size: 11px; line-height: 1.4; }
.pch-prog { margin: 6px 0; color: #8fdcff; font-size: 11px; letter-spacing: 0.05em; }
.pch-lab { margin: 8px 0 4px; color: #f0c040; font-size: 10px; letter-spacing: 0.1em; }
/* the plan beside the card */
.pch-row { display: flex; gap: 8px; align-items: flex-start; }
.pch-planbox { flex: 0 0 168px; min-width: 0; }
.pch-layers { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 4px; }
.pch-lay { padding: 3px 5px; min-height: 24px; font-size: 9.5px; color: #9fb8cc; }
.pch-lay[aria-pressed="true"] { background: #e2edf6; border-color: #e2edf6; color: #07111c; }
.pch-plan { border: 1px solid #23405a; border-radius: 6px; overflow: hidden; background: #a9cfe6; }
.pch-svg { display: block; width: 100%; height: auto; max-height: 52vh; }
.pch-mk { cursor: pointer; }
.pch-mk:focus { outline: none; }
.pch-mk:focus-visible circle { stroke: #f39100; stroke-width: 2.5; }
.pch-card { flex: 1 1 auto; min-width: 0; padding: 7px 9px; border: 1px solid #23405a; border-radius: 6px; background: rgba(9, 22, 36, 0.92); }
.pch-card-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; }
.pch-card-h b { color: #fff; font-size: 12.5px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.pch-no { flex: none; display: inline-block; min-width: 20px; padding: 1px 4px; border-radius: 10px; background: #f39100; color: #160b00; text-align: center; font-weight: 700; }
.pch-zone { flex: 1 1 100%; color: #7f9db6; font-size: 10px; letter-spacing: 0.08em; }
.pch-chk, .pch-facts, .pch-errs { margin: 2px 0 6px 16px; padding: 0; }
.pch-chk li, .pch-facts li, .pch-errs li { margin: 3px 0; color: #dbe6ef; }
.pch-facts li { color: #fff; }
.pch-errs li { color: #ffb3ab; }
.pch-errs li.is-ok { color: #8fe5b2; }
.pch-why { margin: 6px 0 2px; padding: 5px 8px; border-left: 3px solid #f39100; color: #ffe2b8; background: rgba(3, 9, 16, 0.6); }
.pch-look { margin: 6px 0; color: #9fb8cc; }
.pch-look summary { cursor: pointer; font-size: 10px; letter-spacing: 0.1em; color: #8fdcff; }
.pch-dgbox { margin: 8px 0 4px; border: 1px solid #23405a; border-radius: 6px; overflow: hidden; }
.pch-dg { display: block; width: 100%; height: auto; }
.pch-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; align-items: center; }
/* SPOT THE FAULTS: the verdict and the call */
.pch-verdict { display: flex; gap: 6px; margin: 8px 0 4px; }
.pch-verdict .pch-btn { flex: 1 1 0; text-align: center; min-height: 38px; }
.pch-btn.is-ok[aria-pressed="true"] { background: #2f9e5c; border-color: #2f9e5c; color: #fff; }
.pch-btn.is-rep { color: #ffb3ab; border-color: #6a2a26; }
.pch-btn.is-rep[aria-pressed="true"] { background: #b3261e; border-color: #e2342b; color: #fff; }
.pch-calls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin: 4px 0; }
.pch-call { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.pch-call small { font-weight: 400; color: #9fb8cc; font-size: 10.5px; }
.pch-call[aria-checked="true"] { background: #e2edf6; border-color: #e2edf6; color: #07111c; }
.pch-call[aria-checked="true"] small { color: #3f4c58; }
.pch-conf { margin: 8px 0; padding: 8px 10px; border: 1px solid #f39100; border-radius: 6px; background: rgba(30, 18, 2, 0.7); }
.pch-conf p { margin: 0 0 6px; color: #ffe2b8; }
.pch-conf .pch-btn { margin-right: 6px; }
/* the debriefs */
.pch-deb { margin: 4px 0 8px; padding: 8px 10px; border: 1px solid #f39100; border-radius: 6px; background: rgba(30, 18, 2, 0.55); }
.pch-deb-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pch-deb-h b { color: #fff; letter-spacing: 0.06em; }
.pch-score { font: 400 26px/1 'VT323', "Share Tech Mono", monospace; color: #f39100; }
.pch-stars { color: #f0c040; letter-spacing: 0.1em; }
.pch-parts { margin: 4px 0; color: #9fb8cc; font-size: 10.5px; }
.pch-tip { margin: 6px 0 0; color: #ffe2b8; }
.pch-tw { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pch-table { border-collapse: collapse; width: 100%; font-size: 11px; margin: 4px 0; }
.pch-table th { text-align: left; color: #7f9db6; font-weight: 400; letter-spacing: 0.06em; padding: 3px 5px; border-bottom: 1px solid #23405a; }
.pch-table td { padding: 4px 5px; border-bottom: 1px solid #13283b; vertical-align: top; color: #e2edf6; }
.pch-table td.is-ok { color: #2de66f; }
.pch-table td.is-part { color: #f0c040; }
.pch-table td.is-miss { color: #ff6a5f; }
/* SYSTEMS */
.pch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.pch-dcard { display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border: 1px solid #23405a; border-radius: 6px; background: rgba(9, 22, 36, 0.92); }
.pch-dcard.is-off { opacity: 0.55; }
.pch-dcard-t { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pch-dcard-t b { color: #fff; font-size: 12px; }
.pch-start { align-self: flex-start; margin-top: auto; }
.pch-badge { color: #f0c040; font-size: 10.5px; letter-spacing: 0.05em; }
.pch-badge.is-warn { color: #ff8a80; }
.pch-run-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; color: #fff; letter-spacing: 0.05em; }
.pch-read { margin: 6px 0; padding: 6px 8px; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 4px; background: #0b1826; border: 1px solid #23405a; color: #7ee0a3; font: 11px/1.45 "Share Tech Mono", Menlo, monospace; }
.pch-steps { margin: 4px 0 4px 18px; padding: 0; font-size: 11px; }
.pch-steps li.is-ok { color: #c9f5d9; }
.pch-steps li.is-miss { color: #ff8a80; }
.pch-ctl { display: flex; flex-wrap: wrap; gap: 5px; }
.pch-c { padding: 5px 8px; min-height: 30px; font-size: 10.5px; }
.pch-sw[aria-pressed="true"] { background: #f0c040; border-color: #f0c040; color: #160b00; }
.pch-log { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.pch-log .is-ok { color: #8fe5b2; }
.pch-log .is-err { color: #ff8a80; }
.pch-log .is-alarm { color: #ff6a5f; font-weight: 700; }
.pch-log .is-warn, .pch-log .is-hint { color: #f0c040; }
.pch-log .is-info { color: #9fb8cc; }
.pch-good { color: #8fe5b2; margin: 6px 0; }
.pch-bad { color: #ff8a80; margin: 6px 0; }
/* a phone: a sheet over the lower part of the screen, the 3-D view above it */
@media (max-width: 700px) {
    .pch { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 56vh; border-radius: 10px 10px 0 0; border-left: 0; border-right: 0; }
    @supports (height: 100dvh) { .pch { height: 56dvh; } }
    .pch-planbox { flex-basis: 128px; }
    .pch-boat { display: none; }
}
@media (max-width: 380px) { .pch-row { flex-direction: column; } .pch-planbox { flex-basis: auto; width: 100%; } .pch-svg { max-height: 36vh; } }
/* ===== PRE-CHARTER, PART A end ===== */
/* ===== SURVEY (v1, 2026-10-09) — the ≋ SURVEY button, the survey panel (XTE bar, data quality), her DP panel's fifth mode, the catalog (ais-simulator.js _sv*) ===== */
#helm-survey { color: #6fe3d6; border-color: #0f7f78; }
#helm-survey:hover { color: #e4f6ea; }
html.sv-running #helm-survey { background: #062a28; color: #b8fff4; }
.sv-hud { border-color: #0f5f5a; }
.sv-hud .off-hud-ti { color: #6fe3d6; }
.sv-hud .off-btn.is-go, .sv-sheet .off-btn.is-go { background: #0f7f78; border-color: #0f7f78; }
.sv-hud .off-btn.is-go:hover, .sv-sheet .off-btn.is-go:hover { background: #17a398; }
.sv-sheet .off-box { border-color: #0f5f5a; }
.sv-sheet .off-title { color: #6fe3d6; }
.sv-sheet .off-badge.sv-badge { border-color: #0f7f78; color: #6fe3d6; }
/* the cross-track bar: ±10 m, the ±2 m band green, her mark */
.sv-xw { margin-top: 6px; padding: 5px 6px 4px; border: 1px solid #1d3a36; border-radius: 6px; background: #07110f; }
.sv-xw[hidden] { display: none; }
.sv-xl { font-size: 10.5px; letter-spacing: 0.04em; color: #9fb8aa; overflow-wrap: anywhere; }
.sv-xl.is-log { color: #6fe3d6; }
.sv-xte { position: relative; height: 18px; margin-top: 4px; border-radius: 3px; background: linear-gradient(90deg, #3a1210 0, #2a2410 25%, #10201a 40%, #10201a 60%, #2a2410 75%, #3a1210 100%); overflow: hidden; }
.sv-xte-ok { position: absolute; top: 0; bottom: 0; left: 40%; width: 20%; background: rgba(45, 230, 111, 0.28); border-left: 1px solid #2de66f; border-right: 1px solid #2de66f; }
.sv-xte-c { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #f0c040; }
.sv-xte-k { position: absolute; top: 2px; width: 10px; height: 14px; margin-left: -5px; border-radius: 2px; background: #2de66f; box-shadow: 0 0 6px rgba(45, 230, 111, 0.7); transition: left 0.15s linear; }
.sv-xte-k.is-warn { background: #f0c040; box-shadow: 0 0 6px rgba(240, 192, 64, 0.7); }
.sv-xte-k.is-alarm { background: #ff3830; box-shadow: 0 0 6px rgba(255, 56, 48, 0.8); }
.sv-xs { display: flex; justify-content: space-between; font-size: 9.5px; color: #6f8a7a; margin-top: 1px; }
.sv-xn { font-size: 11px; color: #e4f6ea; margin-top: 2px; overflow-wrap: anywhere; }
.sv-dq, .sv-lines { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; align-items: center; }
.sv-chip { font-size: 10px; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 3px; border: 1px solid #2c3a33; color: #9fb8aa; white-space: nowrap; }
.sv-chip.is-ok { color: #2de66f; border-color: #1f6a3c; }
.sv-chip.is-warn { color: #f0c040; border-color: #6a5210; }
.sv-chip.is-bad { color: #ff8a80; border-color: #6a2a26; }
.sv-chip.is-arm { color: #ffb15c; border-color: #8a5a10; }
.sv-ord { font-size: 10px; color: #6f8a7a; letter-spacing: 0.04em; }
.sv-cov { margin-top: 4px; font-size: 10.5px; color: #b9cfc2; overflow-wrap: anywhere; }
.sv-cov:empty, .sv-cov[hidden], .sv-lines[hidden] { display: none; }
.off-hud.is-folded .sv-dq, .off-hud.is-folded .sv-lines, .off-hud.is-folded .sv-cov { display: none; }
/* her DP panel: five modes (AUTO TRACK after LEVERS), AUTO TRACK's buttons */
.off-dp.is-svy .off-dp-m { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.off-dp.is-svy .off-dp-m .off-l { display: none; }
.off-dp.is-svy .off-dp-m .off-s { display: inline; }
.off-dp-m .sv-trk-btn[hidden] { display: none; }
.sv-dp-sp { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sv-dp-sp[hidden] { display: none; }
.off-dp.is-folded .sv-dp-sp { display: none; }
/* the chart: the lines' numbers, the box */
.sv-ch-lab { white-space: nowrap; font: 700 10px/1.25 "Share Tech Mono", Menlo, monospace; color: #0f5f5a; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; }
.sv-ch-lab.is-box { color: #1f3352; font-weight: 400; }
@media (max-width: 700px) {
    .sv-xte { height: 22px; }
    .sv-xte-k { height: 18px; }
}
/* ===== REGATTA (v1) — lobby, HUD, results (ais-simulator.js _rg*) ===== */
/* the button beside SHARED SEA: the committee's orange; blinking dot in the public race's entry window */
#helm-regatta { color: #f39100; border-color: #f39100; }
#helm-regatta.is-guest { color: #a88a5a; border-style: dashed; }
#helm-regatta.is-on { background: #2a1a05; color: #ffb547; }
#helm-regatta.is-live { animation: rg-blink 1.2s steps(1) infinite; }
#helm-regatta.rg-flash { animation: rg-blink 0.6s steps(1) 8; }
#helm-regatta[hidden] { display: none; }
#helm-regatta.is-soon { background: #1c1408; }                     /* 2026-10-09: the daily race within 6 h (_rgSoonHere) — no blink */
#helm-regatta.is-guest.is-soon { color: #d9a35a; }
html.rg-racing #helm-shared { display: none; }                     /* racing: the race's own fleet, no shared sea */
@keyframes rg-blink { 50% { border-color: #2c3a33; color: #e4f6ea; } }
/* the lobby: a sheet over the simulator (over the full window too), one column on a phone */
.rg-sheet {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483500; display: flex; align-items: flex-start; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px 16px; background: rgba(0, 0, 0, 0.55); overflow-y: auto; overscroll-behavior: contain;
}
.rg-sheet[hidden] { display: none; }
/* THE SERVER RACE (owner 2026-10-10): no hand steering — the autopilot (heading or wind angle) and the sails; no engine */
html.rg-srv .helm-wheel-box > :not(.helm-ap-box), html.rg-srv #helm-engine-box, html.rg-srv #helm-tack, html.rg-srv #helm-gybe { display: none !important; }   /* (and TACK / GYBE: the course order turns her the way it is set) */
.rg-chip.is-srv { background: #071822; color: #8fdcff; border: 1px solid #1f5f80; }          /* THE SERVER RACE: what the server sails her on */
.rg-box {
    width: 100%; max-width: 780px; display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 32px);
    background: #050807; border: 1px solid #2c3a33; border-radius: 8px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
    font: 13px/1.4 "Share Tech Mono", Menlo, monospace; color: #e4f6ea;
}
@supports (height: 100dvh) { .rg-box { max-height: calc(100dvh - 32px); } }
/* 2026-10-10 owner: "not a popup — a page of its own over the whole screen": the lobby fills the window on every screen,
   its content kept to a readable column in the middle on a wide one */
.rg-sheet { padding: 0; background: #050807; align-items: stretch; }
.rg-box { max-width: none; height: 100vh; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
@supports (height: 100dvh) { .rg-box { height: 100dvh; max-height: none; } }
.rg-box > .rg-head, .rg-box > .rg-tabs, .rg-box > .rg-body, .rg-box > .rg-foot { padding-left: max(14px, env(safe-area-inset-left), calc((100% - 1080px) / 2)); padding-right: max(14px, env(safe-area-inset-right), calc((100% - 1080px) / 2)); }
.rg-box > .rg-head { padding-top: max(10px, env(safe-area-inset-top)); }
.rg-box > .rg-foot { padding-bottom: max(9px, env(safe-area-inset-bottom)); }
.rg-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px 14px; border-bottom: 1px solid #2c3a33; }
.rg-title { font-size: 16px; letter-spacing: 0.08em; color: #f39100; }
.rg-sub { flex: 1 1 auto; min-width: 0; color: #6f8a7a; font-size: 11px; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-btn.rg-pub { display: inline-flex; align-items: center; flex: none; min-height: 28px; padding: 4px 8px; font-size: 11px; color: #f39100; border-color: #5a3a10; text-decoration: none; }   /* 2026-10-09: /regatta (after .rg-btn's rules in weight: .rg-btn comes later) */
.rg-btn.rg-pub:hover, .rg-btn.rg-pub:focus-visible { color: #ffb547; border-color: #f39100; text-decoration: none; }
.rg-btn.rg-pub[hidden] { display: none; }
.rg-pub .rg-pub-s { display: none; }
@media (max-width: 560px) { .rg-head .rg-pub .rg-pub-l { display: none; } .rg-head .rg-pub .rg-pub-s { display: inline; } .rg-head .rg-title { white-space: nowrap; } }
.rg-acts .rg-btn.rg-pub { min-height: 34px; padding: 7px 11px; font-size: 12px; }
.rg-note .rg-note-a { color: #f39100; text-decoration: underline; text-underline-offset: 2px; }
.rg-note .rg-note-a:hover, .rg-note .rg-note-a:focus-visible { color: #ffb547; }
.rg-tabs { display: flex; gap: 4px; padding: 8px 10px 0; flex-wrap: wrap; }
.rg-body { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 10px 12px 12px; -webkit-overflow-scrolling: touch; }
.rg-foot { min-height: 18px; padding: 6px 14px 9px; border-top: 1px solid #2c3a33; color: #8fdcff; font-size: 12px; overflow-wrap: anywhere; }
.rg-foot.is-err { color: #ff6a5f; }
.rg-foot:empty { display: none; }
.rg-btn {
    cursor: pointer; padding: 7px 11px; min-height: 34px; border-radius: 4px; border: 1px solid #2c3a33; background: #0d1512; color: #e4f6ea;
    font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em; white-space: nowrap;
}
.rg-btn:hover { border-color: #4a6a58; }
.rg-btn:focus-visible { outline: 2px solid #f39100; outline-offset: 1px; }
.rg-btn:disabled { opacity: 0.45; cursor: default; }
.rg-btn.is-go { background: #f39100; border-color: #f39100; color: #140b00; }
.rg-btn.is-go:hover { background: #ffa72a; }
.rg-btn.is-warn { color: #ff8a80; border-color: #5a2a26; }
.rg-x { min-width: 40px; }
.rg-tab { border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: #9fb8aa; }
.rg-tab[aria-selected="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.rg-mini { padding: 4px 8px; min-height: 28px; font-size: 11px; }
.rg-note { color: #6f8a7a; font-size: 12px; margin: 8px 2px; }
.rg-note.is-err { color: #ff6a5f; }
.rg-row { display: block; cursor: pointer; padding: 8px 10px; margin: 0 0 6px; border: 1px solid #2c3a33; border-radius: 6px; background: #0d1512; }
.rg-row:hover, .rg-row:focus-visible { border-color: #f39100; outline: none; }
.rg-row-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rg-row-t b { font-size: 14px; color: #fff; overflow-wrap: anywhere; }
.rg-row-m { color: #b9cfc2; font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
.rg-row-m.is-sub { color: #6f8a7a; }
.rg-row-acts { display: flex; gap: 6px; margin-top: 6px; }
.rg-badge { font-size: 10px; letter-spacing: 0.08em; padding: 1px 6px; border-radius: 3px; border: 1px solid #2c3a33; color: #9fb8aa; white-space: nowrap; }
.rg-badge.is-open, .rg-badge.is-sequence { border-color: #f39100; color: #f39100; }
.rg-badge.is-racing { border-color: #2de66f; color: #2de66f; }
.rg-badge.is-trial { border-color: #5fd4ff; color: #5fd4ff; }
.rg-badge.is-cancelled, .rg-badge.is-expired { color: #6f8a7a; }
.rg-badge.is-mine { border-color: #f0c040; color: #f0c040; }
.rg-badge.is-code { border-color: #f0c040; color: #f0c040; letter-spacing: 0.12em; }
.rg-back { margin-bottom: 8px; }
#rg-lobby.is-lap .rg-tabs, #rg-lobby.is-lap .rg-back { display: none !important; }   /* THE BALTIC LAP: one race — no LIVE / PRACTICE tabs, no ‹ ALL REGATTAS (owner 2026-10-11) */
.rg-det-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rg-det-h h3 { margin: 0; font: 700 17px "Share Tech Mono", Menlo, monospace; color: #fff; overflow-wrap: anywhere; }
.rg-det-g { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 12px; align-items: start; }
.rg-svg { width: 100%; height: auto; background: #0a1a2a; border: 1px solid #2c3a33; border-radius: 6px; }
.rg-facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 10px; font-size: 12px; }
.rg-facts dt { color: #6f8a7a; letter-spacing: 0.06em; }
.rg-facts dd { margin: 0; color: #e4f6ea; overflow-wrap: anywhere; }
.rg-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; align-items: center; }
/* JOIN all day (2026-10-09, ais-simulator.js _rgSuActs): ENTERED, the count and the evening e-mail box in a row of their own under the buttons */
.rg-acts .rg-su { flex: 1 1 100%; order: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.rg-su .rg-note { margin: 2px; overflow-wrap: anywhere; }
.rg-su .rg-note.is-in { color: #2de66f; }
.rg-su label.rg-note { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; color: #a8bdb0; }
.rg-su label.rg-note input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #f39100; cursor: pointer; }
.rg-body h4 { margin: 14px 0 6px; font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #f0c040; }
.rg-entries { display: flex; flex-wrap: wrap; gap: 5px; }
.rg-entry { padding: 2px 7px; border: 1px solid #2c4a5a; border-radius: 3px; color: #5fd4ff; font-size: 11px; }
.rg-tw { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #2c3a33; border-radius: 6px; }
.rg-table { border-collapse: collapse; width: 100%; font-size: 12px; white-space: nowrap; }
.rg-table th { position: sticky; top: 0; background: #0d1512; color: #6f8a7a; font-weight: 400; letter-spacing: 0.06em; text-align: left; padding: 5px 8px; border-bottom: 1px solid #2c3a33; }
.rg-table td { padding: 4px 8px; border-bottom: 1px solid #142019; color: #e4f6ea; }
.rg-table td.is-name { color: #fff; }
.rg-table td.is-code { color: #ff8a80; }
.rg-table td.is-small { color: #6f8a7a; font-size: 11px; }
.rg-table tr.is-me td { background: #142a1c; }
/* LATE ENTRY (2026-10-09, ais-simulator.js _rgLate*): the LIVE row's line, LATE in the results, the race panel's chip */
.rg-row-m.is-late { color: #f0c040; }
.rg-late-tag { margin-left: 6px; padding: 0 4px; border: 1px solid #6a5210; border-radius: 3px; color: #f0c040; font-size: 10px; letter-spacing: 0.08em; }
.rg-chip.is-late { background: #2a2108; color: #f0c040; border: 1px solid #6a5210; }
.rg-su .rg-note.is-late { color: #f0c040; }
.rg-sec { margin: 0 0 10px; }
.rg-sec h4 { margin: 4px 0 6px; }
.rg-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: normal; text-align: left; flex: 1 1 140px; min-width: 0; }
.rg-opt small { font-weight: 400; color: #6f8a7a; font-size: 10px; }
.rg-opt[aria-checked="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.rg-opt[aria-checked="true"] small { color: #0c3a1c; }
.rg-in {
    display: block; width: 100%; max-width: 360px; margin-top: 6px; padding: 7px 9px; box-sizing: border-box; border-radius: 4px; border: 1px solid #2c3a33;
    background: #0d1512; color: #e4f6ea; font: 600 13px "Share Tech Mono", Menlo, monospace; color-scheme: dark;
}
.rg-in:focus { outline: none; border-color: #f39100; }
.rg-or { margin-top: 8px; color: #6f8a7a; font-size: 11px; letter-spacing: 0.06em; }
.rg-create { margin-top: 4px; min-width: 160px; }
/* the race HUD: top centre over the radar and the 3-D view, foldable */
.rg-hud {
    position: fixed; z-index: 2147483400; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
    width: min(640px, calc(100vw - 32px)); box-sizing: border-box; padding: 6px 10px 7px; border-radius: 8px;
    background: rgba(5, 8, 7, 0.9); border: 1px solid #2c3a33; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    font: 12px/1.35 "Share Tech Mono", Menlo, monospace; color: #e4f6ea; pointer-events: auto;
}
.rg-hud[hidden] { display: none; }
.rg-hud-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rg-hud-ph { color: #f39100; letter-spacing: 0.08em; font-weight: 700; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rg-hud-t { font: 400 26px/1 'VT323', "Share Tech Mono", monospace; color: #fff; letter-spacing: 0.04em; flex: none; }
.rg-hud.is-last .rg-hud-t { color: #ff3830; }
.rg-hud-x { color: #f0c040; font-weight: 700; }
.rg-flags { display: flex; gap: 4px; margin-left: auto; }
.rg-flag { width: 24px; height: 16px; display: block; }
.rg-hud-fold { min-height: 26px; padding: 2px 8px; }
.rg-hud-l2 { margin-top: 3px; color: #b9cfc2; overflow-wrap: anywhere; }
.rg-hud-l2:empty { display: none; }
html.rg-building .rg-hud { display: none; }                         /* the course builder's bar takes the top */
.rg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rg-chips:empty { display: none; }
.rg-chip { padding: 1px 7px; border-radius: 3px; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; }
.rg-chip.is-alarm { background: #ff3830; color: #fff; animation: ais-echo-blink 0.8s steps(1) infinite; }
.rg-chip.is-warn { background: #3a2c08; color: #f0c040; border: 1px solid #6a5210; }
.rg-hud-b { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.rg-hud-b .rg-btn[aria-pressed="true"] { border-color: #f0c040; color: #f0c040; }
.rg-hud-b .rg-btn[hidden] { display: none; }
.rg-fleet { margin-top: 5px; max-height: 30vh; overflow-y: auto; border-top: 1px solid #2c3a33; padding-top: 4px; }
.rg-fleet[hidden] { display: none; }
.rg-fl { color: #5fd4ff; font-size: 11px; padding: 1px 0; overflow-wrap: anywhere; }
.rg-fl.is-lost { color: #6f8a7a; }
.rg-hud.is-folded .rg-hud-l2, .rg-hud.is-folded .rg-hud-b, .rg-hud.is-folded .rg-fleet { display: none; }
/* the course builder's bar over the chart */
.rg-build {
    position: fixed; z-index: 2147483450; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
    width: min(720px, calc(100vw - 32px)); box-sizing: border-box; padding: 8px 10px; border-radius: 8px; background: rgba(5, 8, 7, 0.94);
    border: 1px solid #f39100; font: 12px/1.35 "Share Tech Mono", Menlo, monospace; color: #e4f6ea;
}
.rg-build[hidden] { display: none; }
.rg-build-t { display: block; color: #f39100; letter-spacing: 0.04em; margin-bottom: 5px; }
.rg-build-r { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rg-build-n { color: #f0c040; padding: 0 2px; }
.rg-build-i { margin-top: 5px; color: #2de66f; overflow-wrap: anywhere; }
.rg-build-i.is-warn { color: #f0c040; }
.rg-bm { display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #1a1206; font: 700 11px "Share Tech Mono", Menlo, monospace; color: #1a1206; }
.rg-bm.is-cb { background: #f39100; border-radius: 3px; }
.rg-bm.is-pin { background: #f39100; }
.rg-bm.is-mark { background: #f0c040; }
.rg-bm.is-fin { background: #7fd4ff; }
/* ---- PILOT TRANSFERS (2026-10-08, ais-simulator.js _ptx): the ⚑ PILOT button, the drills catalog, the drill panel, the briefing and
   the debrief. The pilot flags' white and red over the simulator's dark panels (no IALA or COLREG colour means anything here). ---- */
#helm-pilot { color: #ffffff; border-color: #e8412c; box-shadow: inset 4px 0 0 #e8412c; }
#helm-pilot:hover { border-color: #ff6a52; }
html.ptx-on #helm-pilot { background: #2a0d09; color: #ffb3a6; }
.ptx-sheet {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483500; display: flex; align-items: flex-start; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px 16px; background: rgba(0, 0, 0, 0.55); overflow-y: auto; overscroll-behavior: contain;
}
.ptx-sheet[hidden] { display: none; }
.ptx-card { z-index: 2147483510; align-items: center; }
.ptx-box {
    width: 100%; max-width: 760px; display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 32px);
    background: #07090c; border: 1px solid #3a2a2a; border-top: 3px solid #e8412c; border-radius: 8px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
    font: 13px/1.45 "Share Tech Mono", Menlo, monospace; color: #e9eef2;
}
@supports (height: 100dvh) { .ptx-box { max-height: calc(100dvh - 32px); } }
.ptx-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px 14px; border-bottom: 1px solid #2a2f36; flex-wrap: wrap; }
.ptx-title { font-size: 16px; letter-spacing: 0.08em; color: #ffffff; }
.ptx-sub { flex: 1 1 200px; min-width: 0; color: #8d99a6; font-size: 11px; letter-spacing: 0.06em; overflow-wrap: anywhere; }
.ptx-body { flex: 1 1 auto; min-height: 80px; overflow-y: auto; padding: 10px 12px 12px; -webkit-overflow-scrolling: touch; }
.ptx-body h4 { margin: 14px 0 6px; font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #ff8a73; }
.ptx-foot { min-height: 18px; padding: 6px 14px 9px; border-top: 1px solid #2a2f36; color: #8fdcff; font-size: 12px; overflow-wrap: anywhere; }
.ptx-foot.is-err { color: #ff6a5f; }
.ptx-foot:empty { display: none; }
.ptx-btn {
    cursor: pointer; padding: 7px 11px; min-height: 34px; border-radius: 4px; border: 1px solid #2a2f36; background: #10151a; color: #e9eef2;
    font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em; white-space: nowrap;
}
.ptx-btn:hover { border-color: #5a6672; }
.ptx-btn:focus-visible { outline: 2px solid #e8412c; outline-offset: 1px; }
.ptx-btn.is-go { background: #e8412c; border-color: #e8412c; color: #ffffff; }
.ptx-btn.is-go:hover { background: #ff5a42; }
.ptx-btn.is-warn { color: #ff8a80; border-color: #5a2a26; }
.ptx-x { min-width: 40px; margin-left: auto; }
.ptx-mini { padding: 4px 8px; min-height: 28px; font-size: 11px; }
.ptx-note { color: #8d99a6; font-size: 12px; margin: 6px 2px 8px; }
.ptx-row { display: block; cursor: pointer; padding: 8px 10px; margin: 0 0 6px; border: 1px solid #2a2f36; border-radius: 6px; background: #0e1318; }
.ptx-row:hover, .ptx-row:focus-visible { border-color: #e8412c; outline: none; }
.ptx-row.is-pick { border-color: #ff8a73; box-shadow: inset 3px 0 0 #e8412c; }
.ptx-row-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptx-row-t b { font-size: 14px; color: #fff; overflow-wrap: anywhere; }
.ptx-row-m { color: #aab6c2; font-size: 11px; margin-top: 3px; letter-spacing: 0.03em; overflow-wrap: anywhere; }
.ptx-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 50%; background: #e8412c; color: #fff; font-weight: 700; font-size: 12px; }
.ptx-badge { font-size: 10px; letter-spacing: 0.08em; padding: 1px 6px; border-radius: 3px; border: 1px solid #2a2f36; color: #9fb0c0; white-space: nowrap; }
.ptx-badge.is-lock { border-color: #6a5210; color: #f0c040; }
.ptx-badge.is-best { border-color: #2de66f; color: #2de66f; }
.ptx-sec { margin: 0 0 8px; }
.ptx-lab { display: block; color: #8d99a6; font-size: 11px; letter-spacing: 0.08em; margin: 0 0 4px; }
.ptx-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.ptx-opt { white-space: normal; text-align: left; flex: 0 1 auto; }
.ptx-opt[aria-checked="true"] { background: #f4f4f0; border-color: #f4f4f0; color: #0a0d10; }
.ptx-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px 12px; }
.ptx-body .ptx-acts { padding: 8px 0 0; }
.ptx-facts { margin: 4px 0 8px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; font-size: 12px; }
.ptx-facts dt { color: #ff8a73; letter-spacing: 0.06em; white-space: nowrap; }
.ptx-facts dd { margin: 0; color: #e9eef2; overflow-wrap: anywhere; }
.ptx-res { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 2px 0 10px; }
.ptx-score { font: 400 44px/1 'VT323', "Share Tech Mono", monospace; color: #fff; }
.ptx-stars { font-size: 22px; color: #f0c040; letter-spacing: 0.1em; }
.ptx-res.is-fail .ptx-stars { font-size: 14px; color: #ff6a5f; letter-spacing: 0.08em; }
.ptx-why { color: #e9eef2; font-weight: 700; overflow-wrap: anywhere; flex: 1 1 220px; }
.ptx-res.is-fail .ptx-why { color: #ff8a80; }
.ptx-table { border-collapse: collapse; width: 100%; max-width: 380px; font-size: 12px; margin: 0 0 8px; }
.ptx-table td { padding: 3px 8px; border-bottom: 1px solid #1a2026; }
.ptx-table td.is-num { text-align: right; color: #fff; }
.ptx-tips { margin: 0; padding-left: 18px; color: #cfd8e0; font-size: 12px; }
.ptx-tips li { margin: 0 0 4px; }
/* the drill panel: top centre over the 3-D view (as the regatta's), foldable */
.ptx-hud {
    position: fixed; z-index: 2147483400; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
    width: min(660px, calc(100vw - 32px)); box-sizing: border-box; padding: 6px 10px 7px; border-radius: 8px;
    background: rgba(7, 9, 12, 0.9); border: 1px solid #2a2f36; border-top: 2px solid #e8412c; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    font: 12px/1.35 "Share Tech Mono", Menlo, monospace; color: #e9eef2; pointer-events: auto;
}
.ptx-hud[hidden] { display: none; }
.ptx-hud-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ptx-ph { color: #ff8a73; letter-spacing: 0.08em; font-weight: 700; white-space: nowrap; }
.ptx-t { font: 400 24px/1 'VT323', "Share Tech Mono", monospace; color: #fff; flex: none; }
.ptx-ship { flex: 1 1 auto; min-width: 0; color: #aab6c2; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptx-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 5px; }
.ptx-tile { background: #0e1318; border: 1px solid #1e252c; border-radius: 4px; padding: 3px 6px; min-width: 0; }
.ptx-tl { display: block; color: #7d8a96; font-size: 9px; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptx-tv { display: block; font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptx-tile.is-ok { border-color: #1f6a3c; }
.ptx-tile.is-ok .ptx-tv { color: #2de66f; }
.ptx-tile.is-warn .ptx-tv { color: #f0c040; }
.ptx-tile.is-bad { border-color: #6a2420; }
.ptx-tile.is-bad .ptx-tv { color: #ff6a5f; }
.ptx-pilot { display: flex; align-items: center; gap: 8px; margin-top: 5px; min-width: 0; }
.ptx-pilot-t { flex: 1 1 auto; min-width: 0; color: #e9eef2; font-size: 11px; overflow-wrap: anywhere; }
.ptx-bar { flex: 0 0 110px; height: 8px; border-radius: 4px; background: #1a2026; overflow: hidden; }
.ptx-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f4f4f0, #e8412c); transition: width 0.2s linear; }
.ptx-vhf { margin-top: 5px; border-top: 1px solid #1e252c; padding-top: 4px; max-height: 64px; overflow: hidden; }
.ptx-vhf:empty { display: none; }
.ptx-vl { color: #8fdcff; font-size: 11px; overflow-wrap: anywhere; }
.ptx-vl b { color: #5fd4ff; font-weight: 700; }
.ptx-vl.is-boat, .ptx-vl.is-boat b { color: #c9d3dc; }
.ptx-hud-b { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ptx-hud.is-folded .ptx-grid, .ptx-hud.is-folded .ptx-vhf, .ptx-hud.is-folded .ptx-hud-b { display: none; }
/* a phone (upright or on its side): the last VHF call only, slimmer buttons (review 2026-10-08: 285 → ~175 px upright) */
@media (max-width: 560px), (orientation: landscape) and (max-height: 520px) {
    .ptx-hud { padding: 4px 8px 5px; }
    .ptx-vl:not(:last-child) { display: none; }
    .ptx-vhf { max-height: 30px; }
    .ptx-mini { min-height: 26px; padding: 2px 7px; }
    .ptx-t { font-size: 20px; }
}
@media (max-width: 560px) {
    .ptx-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }          /* one row of tiles: the 3-D view under it stays in sight */
    .ptx-tile { padding: 2px 3px; }
    .ptx-tl { font-size: 8px; letter-spacing: 0.02em; }
    .ptx-tv { font-size: 11px; letter-spacing: -0.02em; }
    .ptx-bar { flex-basis: 70px; }
    .ptx-facts { grid-template-columns: minmax(0, 1fr); }
    .ptx-facts dt { margin-top: 4px; }
}
/* the chart layer: the committee boat's flag, mark labels, ghosts */
.rg-ch-cb i { position: absolute; left: 2px; top: 0; width: 2px; height: 22px; background: #1a1206; }
.rg-ch-cb i::after { content: ''; position: absolute; left: 2px; top: 1px; width: 13px; height: 9px; background: #f39100; border: 1px solid #1a1206; }
.rg-ch-nav { white-space: nowrap; font: 700 13px "Share Tech Mono", Menlo, monospace; color: #6a3c00; background: rgba(255, 248, 232, 0.95); border: 2px solid #f39100; border-radius: 6px; padding: 2px 7px; transform: translate(-50%, -50%); }   /* the chart: the way to her next point (the server race) */
.rg-ch-lab { white-space: nowrap; font: 700 11px "Share Tech Mono", Menlo, monospace; color: #5a4206; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.rg-ch-nav i { display: block; font-style: normal; font-weight: 600; font-size: 11px; color: #8a5a10; }   /* a route waypoint: what it is on the way to (2026-10-12) */
.ais-chart-name { white-space: nowrap; font: 700 11px "Share Tech Mono", Menlo, monospace; color: #063a52; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; pointer-events: none; }   /* the race's boats' names by them on the desktop chart (owner 2026-10-12) */
html.rg-srv .ais-chart-name { font-size: 13px; }
.rg-ch-ghost { border: 2px solid #5fd4ff; border-radius: 50%; box-sizing: border-box; }
.rg-ch-ghost b { position: absolute; left: 14px; top: -3px; white-space: nowrap; font: 600 10px "Share Tech Mono", Menlo, monospace; color: #0a5a7a; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
/* an invite while logged out */
.rg-toast {
    position: fixed; z-index: 2147483450; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 8px 10px; border-radius: 8px;
    background: #050807; border: 1px solid #f39100; font: 12px "Share Tech Mono", Menlo, monospace; color: #e4f6ea;
}
.rg-toast[hidden] { display: none; }
.rg-toast > span { flex: 1 1 auto; min-width: 0; }                                   /* (a phone: the sentence wraps as a sentence, not a word a line — Nadine 2026-10-17) */
.rg-toast .rg-btn { flex: 0 0 auto; }
/* 2026-10-09 — NAME YOUR BOAT (the first JOIN, in the race's detail) and CH 72 · RACE, the race's own channel (ais-simulator.js
   _rgName* / _rgChat*; docs/regatta-mode.md). The channel's look is a VHF set's: a pale LCD bar with dark figures over the
   race panel's dark body. Its place is the page's (_rgChatPlace: clear of the race panel, the helm, the docking plan's helm
   deck and a desktop's radar); these are its defaults and its insides. */
.rg-name { margin: 12px 0 6px; padding: 10px 12px 12px; border: 1px solid #f39100; border-radius: 6px; background: #0d1512; }
.rg-name-h { margin: 0 0 8px; font: 700 13px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.1em; color: #f39100; }
.rg-name-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; }
.rg-name-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rg-name-l { font-size: 10px; letter-spacing: 0.1em; color: #6f8a7a; }
.rg-name .rg-in { max-width: none; margin-top: 0; }
.rg-name .rg-in[aria-invalid="true"] { border-color: #ff6a5f; }
.rg-name-e { color: #ff6a5f; font-size: 11px; overflow-wrap: anywhere; }
.rg-name-e:empty { display: none; }
.rg-name-e.is-g { margin: 6px 0 0; }
.rg-name-sail { margin: 8px 0 0; color: #f0c040; letter-spacing: 0.1em; font-weight: 700; }
.rg-name-sail[hidden] { display: none; }
.rg-name-n { margin: 6px 0 0; color: #6f8a7a; font-size: 11px; overflow-wrap: anywhere; }
.rg-name .rg-acts { margin: 10px 0 0; }
.rg-btn.rg-name-back { margin-left: auto; }
@media (max-width: 560px) { .rg-name .rg-in { font-size: 16px; } .rg-btn.rg-name-back { margin-left: 0; } }     /* 16 px: no zoom on focus */
/* CH 72 · RACE */
.rg-chat {
    position: fixed; z-index: 2147483390; right: 16px; bottom: 16px; width: min(320px, calc(100vw - 32px)); max-height: 50vh; box-sizing: border-box;
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    background: rgba(5, 8, 7, 0.94); border: 1px solid #3f4f37; border-radius: 8px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    font: 12px/1.35 "Share Tech Mono", Menlo, monospace; color: #e4f6ea;
}
.rg-chat[hidden], .rg-chat.is-tucked { display: none; }
.rg-chat-h {
    display: flex; align-items: center; gap: 7px; flex: none; width: 100%; min-height: 30px; padding: 3px 9px; box-sizing: border-box; cursor: pointer;
    border: 0; border-radius: 7px 7px 0 0; background: #c3cfae; color: #1b2614; text-align: left;
    font: 400 19px/1 'VT323', "Share Tech Mono", monospace; letter-spacing: 0.04em;
}
.rg-chat:not(.is-open) .rg-chat-h { border-radius: 7px; }
.rg-chat-h:focus-visible { outline: 2px solid #f39100; outline-offset: -2px; }
.rg-chat-t { flex: none; font-weight: 400; white-space: nowrap; }
.rg-chat-u { flex: none; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #1b2614; color: #c3cfae; font: 700 11px/18px "Share Tech Mono", Menlo, monospace; text-align: center; }
.rg-chat-u[hidden] { display: none; }
.rg-chat-pv { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11px "Share Tech Mono", Menlo, monospace; color: #2d3a24; }
.rg-chat.is-open .rg-chat-pv { visibility: hidden; }
.rg-chat-ar { flex: none; margin-left: auto; font: 700 13px "Share Tech Mono", Menlo, monospace; }
.rg-chat-b { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 4px 8px 6px; gap: 5px; }
.rg-chat:not(.is-open) .rg-chat-b { display: none; }
.rg-chat-n, .rg-chat-nl { margin: 0; flex: none; color: #6f8a7a; font-size: 10px; line-height: 1.3; }
.rg-chat-nl { display: none; margin: 0 0 3px; }
.rg-chat.is-tight .rg-chat-n { display: none; }                   /* tight (a phone, a short band): the notice heads the log instead */
.rg-chat.is-tight .rg-chat-nl { display: block; }
.rg-chat.is-tight .rg-chat-b { padding: 3px 6px 5px; gap: 4px; }
.rg-chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-right: 2px; }
.rg-chat-ln { padding: 1px 0; overflow-wrap: anywhere; color: #e4f6ea; }
.rg-chat-ln.is-me { color: #9fd8b4; }
.rg-chat-ln.is-q .rg-chat-tx { color: #f0c040; font-weight: 700; letter-spacing: 0.04em; }
.rg-chat-tm { color: #6f8a7a; margin-right: 5px; font-size: 11px; }
.rg-chat-fl { display: inline-block; margin-right: 5px; padding: 0 3px; border: 1px solid #2c4a5a; border-radius: 2px; color: #5fd4ff; font-size: 10px; line-height: 13px; vertical-align: 1px; }
.rg-chat-who { margin-right: 6px; color: #5fd4ff; font: 700 12px "Share Tech Mono", Menlo, monospace; }
button.rg-chat-who { padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
button.rg-chat-who:focus-visible { outline: 2px solid #f39100; }
.rg-chat-ln.is-me .rg-chat-who { color: #2de66f; }
.rg-chat-empty { color: #6f8a7a; font-size: 11px; padding: 2px 0; }
.rg-chat-menu, .rg-chat-mu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 4px; }
.rg-chat-mu[hidden] { display: none; }
.rg-chat-ml { color: #6f8a7a; font-size: 10px; letter-spacing: 0.08em; }
.rg-chat-mb, .rg-chat-qb, .rg-chat-send {
    cursor: pointer; min-height: 26px; padding: 2px 7px; border-radius: 4px; border: 1px solid #2c3a33; background: #0d1512; color: #e4f6ea;
    font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.03em; white-space: nowrap; touch-action: manipulation;
}
.rg-chat-mb:hover, .rg-chat-qb:hover, .rg-chat-send:hover { border-color: #4a6a58; }
.rg-chat-mb:focus-visible, .rg-chat-qb:focus-visible, .rg-chat-send:focus-visible { outline: 2px solid #f39100; outline-offset: 1px; }
.rg-chat-mb.is-warn { color: #ff8a80; border-color: #5a2a26; }
.rg-chat-qb:disabled, .rg-chat-send:disabled { opacity: 0.45; cursor: default; }
.rg-chat-q { display: flex; flex-wrap: wrap; gap: 4px; flex: none; }
.rg-chat-qb { color: #f0c040; min-height: 24px; padding: 2px 5px; font-size: 10px; letter-spacing: 0; }
.rg-chat-f { display: flex; gap: 5px; flex: none; }
.rg-chat-in {
    flex: 1 1 auto; min-width: 0; padding: 5px 8px; box-sizing: border-box; border-radius: 4px; border: 1px solid #2c3a33; background: #0d1512; color: #e4f6ea;
    font: 600 13px "Share Tech Mono", Menlo, monospace; color-scheme: dark;
}
.rg-chat-in:focus { outline: none; border-color: #f39100; }
.rg-chat-send { min-width: 56px; color: #06210f; background: #2de66f; border-color: #2de66f; }
.rg-chat-st { flex: none; min-height: 0; color: #8fdcff; font-size: 11px; overflow-wrap: anywhere; }
.rg-chat-st:empty { display: none; }
.rg-chat-st.is-err { color: #ff8a80; }
/* a phone (or a short landscape window): one strip folded, the quick calls on one scrolling row, 16 px in the box (no zoom) */
@media (max-width: 560px), (max-height: 500px) {
    .rg-chat { left: 8px; right: 8px; bottom: auto; top: 120px; width: auto; max-height: 35vh; }
    .rg-chat-q { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
    .rg-chat-qb, .rg-chat-send, .rg-chat-mb { min-height: 32px; }
    .rg-chat-qb { font-size: 11px; padding: 2px 7px; }
    .rg-chat-in { font-size: 16px; padding: 4px 8px; }
}
/* ===== 📱 REGATTA · MOBILE VIEW (2026-10-10; ais-simulator.js _mv*; docs/regatta-mode.md "Mobile race view"): a race from a phone —
   THREE BLOCKS: the map (the largest), the autopilot, the sails. Upright: the map on top, the two blocks side by side under it; on its side:
   the map on the left, the two blocks stacked on the right. html.rg-mv hides every other part of the page (the lobby, the toast and the
   race's confirm stay over it). Safe-area insets; no horizontal scroll; thumb-sized buttons (44 px; 40 on a short landscape screen). ===== */
html.rg-mv, html.rg-mv body { overflow: hidden !important; overscroll-behavior: none; height: 100%; }
html.rg-mv body > *:not(#rg-mv):not(#rg-lobby):not(#rg-toast):not(#rg-over):not(#rg-steer):not(#rg-notice):not(#rg-ws-flash):not(#rg-inv):not(#rg-xask):not(script):not(style):not(link) { display: none !important; }   /* (#rg-inv, #rg-xask: INVITE A FRIEND / the extras' two ways — owner 2026-10-15 "mobilajā invite nestrādā") */
.rg-mv {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483420; box-sizing: border-box; display: grid; gap: 6px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "map map" "ap sails";
    padding: env(safe-area-inset-top, 0px) max(6px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    background: #050807; color: #e4f6ea; font: 12px/1.3 "Share Tech Mono", Menlo, monospace; overflow: hidden;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
}
.rg-mv[hidden] { display: none; }
.rg-mv button { touch-action: manipulation; }
.mv-map { grid-area: map; position: relative; min-height: 0; min-width: 0; overflow: hidden; border-radius: 0 0 8px 8px; background: #0b1a2a; }
.mv-cv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.mv-cv:active { cursor: grabbing; }
/* the strip: the race at a glance, over the top of the map */
.mv-strip {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2; box-sizing: border-box; padding: 5px 7px 4px;
    background: rgba(5, 8, 7, 0.84); border-bottom: 1px solid #2c3a33; pointer-events: none;
}
.mv-strip button { pointer-events: auto; }
.mv-r1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mv-ph { color: #f39100; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.mv-clk { font: 400 28px/1 'VT323', "Share Tech Mono", monospace; color: #fff; letter-spacing: 0.03em; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.mv-strip.is-last .mv-clk { color: #ff3830; }
.mv-fx { color: #f0c040; font-weight: 700; flex: none; }
.mv-fl { display: flex; gap: 3px; flex: none; }
.mv-fl .rg-flag { width: 21px; height: 14px; }
.mv-pos { margin-left: auto; color: #2de66f; font-weight: 700; white-space: nowrap; flex: none; }
.mv-pos:empty { display: none; }
.mv-more { margin-left: 4px; position: relative; flex: none; min-width: 44px; min-height: 36px; font-size: 20px; line-height: 1; padding: 0 8px; }
.mv-pos:empty + .mv-more { margin-left: auto; }
.mv-bell { margin-left: 4px; flex: none; min-width: 44px; min-height: 36px; font-size: 16px; line-height: 1; padding: 0 8px; }   /* REGATTA PUSH: 🔔 this device */
.mv-bell[hidden] { display: none; }
.mv-deskb { margin-left: 4px; flex: none; min-height: 36px; font-size: 13px; line-height: 1; padding: 0 8px; color: #8fdcff; border-color: #24485a; }   /* 🖥 DESKTOP in the top row (owner 2026-10-11: not only under ⋯) */
.rg-mv .mv-pos { min-height: 36px; padding: 0 8px; font-size: 14px; }                                   /* POS k/N is a button: the fleet sheet (owner 2026-10-11) */
.mv-bell[aria-pressed="false"] { color: #8fa89a; }                                                       /* 🔕 OFF dim, 🔔 ON green: the state, not the order */
/* TAKE HER ON YOUR PHONE: the QR code at the end of the ⋯ sheet on a desktop (owner 2026-10-11) */
.mv-phone[hidden] { display: none; }
.mv-phone .mv-qr { flex: 0 0 100%; display: flex; justify-content: center; padding: 6px 0 2px; color: #b9cfc2; font-size: 13px; letter-spacing: 0.04em; }
.mv-phone .mv-qr img { width: min(240px, 60vw); height: auto; border-radius: 6px; background: #fff; }
.mv-phone .mv-phone-n { flex: 1 1 100%; margin: 4px 0; color: #b9cfc2; font-size: 12px; line-height: 1.35; letter-spacing: 0; }
/* THE FLEET sheet (a tap on POS): the race panel's fleet rows, scrolling */
.mv-fleet-sheet .mv-fleet-box { display: block; max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: 13px; line-height: 1.35; }
.mv-fleet-sheet .rg-fl { padding: 7px 0; border-bottom: 1px solid #1f2a25; }
.mv-fleet-sheet .rg-fl.is-me { color: #ffc164; font-weight: 700; }
html.rg-srv #ais-gp-btn { display: none !important; }                                                    /* no 🎮 CONTROLLER in a server race (owner 2026-10-11) */
html.rg-srv #gb-mob { display: none !important; }                                                        /* no 🛟 MOB on the glass strip in a server race (owner 2026-10-11 "no GLASS noņem MOB pogu") */
html.rg-srv #gb-classic { display: none !important; }                                                    /* no CLASSIC in a server race ("uz classic view neļauj aiziet") */
html.rg-srv #ais-bridge-poster, html.rg-srv #helm-poster { display: none !important; }                    /* no WHEELHOUSE POSTER in a server race (owner 2026-10-11 "poster arī noņem nost regatē") */
html.rg-srv [data-ss-view="dock"] { display: none !important; }                                          /* SECOND SCREEN without DOCKING PLAN in a server race (owner 2026-10-11) */
html.rg-srv #helm-boat-form { display: none !important; }                                                /* the boat form never inside AUTOPILOT: YOUR BOAT has its own sheet in a race (owner 2026-10-11 "izvākt ārā no AUTOPILOT") */
.rg-boat-sheet .rg-name-g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 4px 0 8px; }
.rg-boat-sheet .rg-name-e.is-g { min-height: 1.2em; color: #ff6a5f; margin: 0 0 6px; }
/* the race panel is a band of its own over the glass view: the view (and everything drawn or placed in it — captions, the look dial, ◀ CENTER ▶,
   the tools, SECOND SCREEN, the marks' words) starts under it (owner 2026-10-11: "kas te viens uz otra"; "pats regates panelis ir kaut kam
   virsū — sategre datus kopā ar pārējo"; --rg-hud-h: _rgHudTick, the panel's bottom edge) */
html.rg-srv #ais-panel-sim.is-glass .ais-mkd.has-bridge .ais-bridge-wrap { top: var(--rg-hud-h, 0px); }
/* on the glass bridge the race panel is a flat band across the top, part of the screen (owner 2026-10-11: "šos uzrakstus vajag integrēt ekrānā"):
   no box, no rounded corners, no shadow; the view begins right under it */
html.rg-glass .rg-hud { top: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; width: auto !important;   /* (100vw took the page's scrollbar too: the bar ran off to the right outside the full window — Nautica / owner 2026-10-13) */ max-width: none; border-radius: 0; border-width: 0 0 1px 0; border-color: #2c3a33; box-shadow: none; background: rgba(5, 8, 7, 0.96); padding: 6px 12px 8px; z-index: 2147483450; }
html.rg-srv #gb-pip-b[data-what="helm"] [data-gb-big] { display: none !important; }                     /* her helm is never enlarged in a server race (owner 2026-10-11: "to nevajag palielināt") */
/* the third glass panel (2026-10-11, owner: "chart, helm un radar nedrīkst likt vienu uz otra — jāliek blakus"): the chart in slot c between the
   radar (a) and the helm (b) in a server race on a wide screen (ais-simulator.js _gbThree, _gbLayout); the helm then one column (html.gb-three) */
#ais-panel-sim.is-glass .ais-mkd.has-bridge > .gb-in-c { left: var(--gbc-x); top: var(--gbc-y); width: var(--gbc-w); height: var(--gbc-h); }
#gb-pip-c { left: calc(var(--gbc-x) - 1px); top: calc(var(--gbc-y) - 32px); width: calc(var(--gbc-w) + 2px); height: calc(var(--gbc-h) + 33px); }
/* the fourth slot d (2026-10-11, owner: "HELM mums būs AUTOPILOT un SAILS — savādāk nelien vienā ekrānā"): the SAILS box out of the helm, between
   the chart and the autopilot; never enlarged */
#gb-pip-d { left: calc(var(--gbd-x) - 1px); top: calc(var(--gbd-y) - 32px); width: calc(var(--gbd-w) + 2px); height: calc(var(--gbd-h) + 33px); }
html.rg-srv #gb-pip-d [data-gb-big] { display: none !important; }
html.rg-srv #gb-pip-d-body .helm-sail-box .ais-bridge-toggle { min-height: 44px; font-size: 15px; padding: 6px 14px; }   /* (the SAILS frame: the same thumb-sized buttons as in the helm) */
html.rg-srv #gb-pip-d-body .helm-sail-box .helm-sheet { font-size: 13px; gap: 8px; }
html.rg-srv #gb-pip-d-body .helm-sail-box .helm-sheet > b { font-size: 26px; min-width: 56px; }
html.rg-srv #gb-pip-d-body .helm-sail-box .helm-sub, html.rg-srv #gb-pip-d-body .helm-sail-box .helm-warn, html.rg-srv #gb-pip-d-body .helm-sail-box .helm-val-sm, html.rg-srv #gb-pip-d-body .helm-sail-box .helm-btns { font-size: 14px; }
html.gb-three.rg-srv #ais-panel-sim.is-glass .ais-helm { grid-template-columns: minmax(0, 1fr); }
html.gb-three.rg-srv #ais-panel-sim.is-glass .ais-helm > .helm-sail-box { grid-column: 1 !important; }
/* bigger letters in a server race (owner 2026-10-11: "tik mazus nekur nevar salasīt — arī citur mazākos burtus vajag lielākus par šiem") */
html.rg-srv .rg-hud { font-size: 14px; }
html.rg-srv .rg-hud .rg-fl { font-size: 15px; padding: 3px 0; }
html.rg-srv .rg-hud .rg-mini { font-size: 13px; padding: 5px 10px; min-height: 32px; }
html.rg-srv .rg-hud .rg-hud-ph { font-size: 14px; }
html.rg-srv .rg-hud .rg-hud-me { font-size: 15px; }
html.rg-srv .rg-hud .rg-hud-ftog { font-size: 14px; }
html.rg-srv .rg-hud .rg-chips .rg-chip { font-size: 13px; }
html.rg-srv .rg-hud .rg-note { font-size: 13px; }
html.rg-srv .gb-pip-t { font-size: 13px; }
html.rg-srv .gb-btn { font-size: 12px; }
html.rg-srv .helm-lab { font-size: 12px; }
html.rg-srv .rs-dial-lock { font-size: 15px; min-height: 44px; }
.mv-fleet-sheet .rg-fl { font-size: 14px; }
/* the console's ring round her on the desktop chart in a server race (2026-10-11): an overlay canvas over the Leaflet map, no pointer events */
.ais-chart-ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 450; }
.ais-chart-ring[hidden] { display: none; }
/* a clicked ship's info on the chart (2026-10-11): the radar's target panel as a pop-up */
.ais-chart-pop .leaflet-popup-content { margin: 8px 12px; font: 12px/1.45 "Share Tech Mono", Menlo, monospace; color: #1f2d3a; white-space: nowrap; }
.ais-chart-pop .leaflet-popup-content b { color: #0b2540; }
.ais-chart-pop .leaflet-popup-content-wrapper { border-radius: 6px; border: 1px solid #29343e; }
/* the second screen (2026-10-11): − / + zoom at the bottom right (the radar's range, the 3-D view's zoom); INSTRUMENTS' tiles swapped in a server race */
.ssv-zoom { position: fixed; right: 14px; bottom: 14px; z-index: 40; display: flex; gap: 10px; }
.ssv-zoom button { min-width: 60px; min-height: 60px; font: 700 30px/1 "Share Tech Mono", Menlo, monospace; color: #e4f6ea; background: rgba(5, 8, 7, 0.82); border: 1px solid #2c3a33; border-radius: 12px; cursor: pointer; }
.ssv-zoom button:hover { border-color: #f0c040; color: #f0c040; }
html.ssv-idle .ssv-zoom { opacity: 0.3; }
#ais-ssv-con .ssv-t[hidden] { display: none !important; }
.rg-fl .rg-tr.is-up { color: #2de66f; font-weight: 700; }   /* gaining on the leader (owner 2026-10-11: "zaļa bultiņa uz augšu") */
.rg-fl .rg-tr.is-dn { color: #ff5346; font-weight: 700; }   /* losing to the leader ("sarkana uz leju") */
/* the glass helm's SAILS box in a server race (owner 2026-10-11: "par mazu buru vadības pogas, apakšā tukšs laukums — izkārto loģiskāk"): it fills its
   column, the rows spread down it, the buttons thumb-sized */
html.rg-srv #ais-panel-sim.is-glass .ais-helm > .helm-sail-box { align-self: stretch !important; display: flex; flex-direction: column; justify-content: space-evenly; gap: 12px; padding: 12px 14px; }
html.rg-srv #ais-panel-sim.is-glass .helm-sail-box .ais-bridge-toggle { min-height: 44px; font-size: 15px; padding: 6px 14px; }
html.rg-srv #ais-panel-sim.is-glass .helm-sail-box .helm-btns { gap: 8px; font-size: 13px; }
html.rg-srv #ais-panel-sim.is-glass .helm-sail-box .helm-sheet { font-size: 13px; gap: 8px; }
html.rg-srv #ais-panel-sim.is-glass .helm-sail-box .helm-sheet > span { width: 48px; }
html.rg-srv #ais-panel-sim.is-glass .helm-sail-box .helm-sheet > b { font-size: 26px; min-width: 56px; }
html.rg-srv #ais-panel-sim.is-glass .helm-sail-box .helm-sheet .ais-bridge-toggle { padding: 6px 12px; font-size: 14px; min-height: 40px; }
html.rg-srv #ais-panel-sim.is-glass .helm-sail-box .helm-sub, html.rg-srv #ais-panel-sim.is-glass .helm-sail-box .helm-warn, html.rg-srv #ais-panel-sim.is-glass .helm-sail-box .helm-val-sm { font-size: 14px; }
/* a screen on its side in a server race: the sails block sits top right over the map, so LIVE VIEW and LOCK WIND ANGLE stand left of it
   (owner 2026-10-11: "sabraucis kopā poga uz pogas") */
@media (orientation: landscape) {
    .rg-mv.is-srv .mv-view, .rg-mv.is-srv .mv-lockw { right: calc(min(330px, 40%) + max(8px, env(safe-area-inset-right, 0px)) + 8px); }
}
/* 2026-10-10 owner on a real phone: "everything is too small, I cannot read the mobile console" — the console's words larger */
.rg-mv .mv-t i { font-size: 12px; }
.rg-mv .mv-t b { font-size: 19px; }
.rg-mv .mv-nn, .rg-mv .mv-nb, .rg-mv .mv-fin-t { font-size: 18px; }
.rg-mv .mv-eta { font-size: 15px; }
.rg-mv .mv-say { font-size: 14px; max-height: 2.8em; }
.rg-mv .mv-bh > b, .rg-mv .mv-set-l, .rg-mv .mv-set-s, .rg-mv .mv-sst, .rg-mv .mv-tgt { font-size: 14px; }
.rg-mv .mv-hint { font-size: 13px; }
.rg-mv .mv-up { font-size: 14px; }
.rg-mv .mv-seg .mv-b { font-size: 15px; }
.rg-mv .mv-opts .mv-o, .rg-mv .mv-race .mv-o { font-size: 15px; }
.rg-mv .mv-sec-t, .rg-mv .mv-cst { font-size: 13px; }
.rg-mv .mv-net-t, .rg-mv .mv-ban-s { font-size: 14px; }
.mv-ban.is-mini { top: calc(var(--mv-top, 60px) + 6px); transform: none; right: 60px; padding: 4px 8px; cursor: pointer; }   /* the notice shrunk to a line (a tap: back) */
.mv-ban.is-mini .mv-ban-s, .mv-ban.is-mini .mv-ban-b { display: none; }
.mv-ban.is-mini .mv-ban-t { font-size: 14px; }
/* THE SERVER RACE on a desktop: the autopilot as a compass rose (drag her round); the course buttons give way to it */
.rs-dial { display: block; width: min(100%, 440px); aspect-ratio: 1 / 1; margin: 4px auto 6px; touch-action: none; cursor: grab; }   /* 440 (was 300): owner 2026-10-11 "rinķis centa monētas izmērā — neko nevar saskatīt" */
.rs-dial[hidden] { display: none; }
html.rg-srv #helm-ap-box .helm-ap { display: none; }
html.rg-srv #helm-engine, html.rg-srv #helm-thr-box, html.rg-srv #helm-dock, html.rg-srv #helm-moor-box, html.rg-srv #helm-sails { display: none !important; }   /* (owner 2026-10-10: "in the regatta the engine things out" — no engine, no thrusters, no docking; HOIST SAILS: MAIN / GENOA rows) */
/* THE SERVER RACE's sails block: the helm's rows (no engine, no tack / gybe), each button an order */
.mv-rig { display: flex; flex-direction: column; gap: 6px; }
.mv-rig[hidden] { display: none; }
.mv-rig-r { display: flex; align-items: center; gap: 6px; }
.mv-rig-l { flex: 0 0 52px; color: #8fa89a; font-size: 13px; letter-spacing: 0.06em; }
.mv-rig-r .mv-rb { flex: 1 1 0; min-width: 0; min-height: 40px; font-size: 15px; padding: 2px 4px; }
.rg-mv .mv-rig-r .mv-rb[aria-pressed="true"] { background: #2de66f; color: #06120b; border-color: #2de66f; font-weight: 700; }   /* (owner 2026-10-10: the lit buttons' words were yellow on green — unreadable) */
.mv-rig-v { flex: 0 0 52px; text-align: center; color: #f0c040; font-size: 18px; }
.mv-rig-s { flex: 1 1 auto; text-align: center; color: #b9cfc2; font-size: 13px; }
.rg-mv.is-srv .mv-g-sl { grid-template-columns: minmax(0, 1fr); }          /* the server race's sails: REEF, SPINNAKER, GOOSE-WING, a line of words each */
.rg-mv.is-srv .mv-g-sl .mv-s { white-space: pre-line; line-height: 1.25; min-height: 56px; font-size: 17px; text-align: left; padding: 6px 12px; }
.rg-mv.is-srv .mv-g-sl .mv-s::first-line { font-size: 19px; }
.rg-mv.is-srv .mv-sst { display: none; }
#rg-lobby .rg-my-h { margin: 18px 0 6px; color: #f39100; font-size: 13px; letter-spacing: 0.08em; }
#rg-lobby .rg-my { padding: 4px 0; border-bottom: 1px solid #1f2a25; }
.mv-pos:empty + .mv-bell { margin-left: auto; }
.mv-bell[aria-pressed="true"] { color: #2de66f; border-color: #1f6f3f; }
.mv-pos:empty + .mv-bell[hidden] + .mv-more { margin-left: auto; }
.mv-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 8px; background: #ff3830; color: #fff; font-size: 10px; line-height: 16px; text-align: center; padding: 0 3px; box-sizing: border-box; }
.mv-badge[hidden] { display: none; }
.mv-r2 { display: flex; gap: 5px; margin-top: 4px; min-width: 0; align-items: stretch; }
.mv-r2[hidden] { display: none; }
.mv-r3 { display: flex; gap: 5px; margin-top: 4px; min-width: 0; }
.mv-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 1px 2px 2px; border-radius: 4px; background: rgba(13, 21, 18, 0.9); border: 1px solid #1f2a25; }
.mv-t i { font-style: normal; font-size: 9px; color: #8fa89a; letter-spacing: 0.06em; line-height: 1.2; }
.mv-t b { font-size: 15px; color: #e4f6ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mv-start .mv-t b { font: 400 23px/1 'VT323', "Share Tech Mono", monospace; color: #fff; }
.mv-start .mv-t.mv-bias b { font: 700 14px/1.6 "Share Tech Mono", Menlo, monospace; color: #f0c040; }
.mv-start .mv-t.is-late b { color: #ff8a80; }
.mv-next { align-items: baseline; flex-wrap: wrap; column-gap: 8px; row-gap: 0; padding: 2px 2px 0; }
.mv-nn { color: #f0c040; font-size: 15px; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mv-nb { color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; }
.mv-eta { color: #8fdcff; font-size: 13px; white-space: nowrap; }
.mv-fin { align-items: center; justify-content: space-between; }
.mv-fin-t { color: #2de66f; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-res[hidden] { display: none; }
.mv-say { margin-top: 3px; min-height: 0; color: #b9cfc2; font-size: 11px; line-height: 1.25; overflow: hidden; max-height: 2.6em; overflow-wrap: anywhere; }
.mv-wt { margin-top: 3px; color: #8fdcff; font-size: 13px; line-height: 1.25; letter-spacing: 0.02em; overflow-wrap: anywhere; }   /* the wind trend under the data row (owner 2026-10-11: "ieliec telefonā") */
.mv-wt[hidden] { display: none; }
.mv-say:empty { display: none; }
.mv-say.is-warn { color: #f0c040; }
/* the wind shift gauge, under the strip on the right */
.mv-shift {
    position: absolute; z-index: 2; right: 56px; top: calc(var(--mv-top, 120px)); width: 132px; box-sizing: border-box; padding: 3px 6px 4px;
    border-radius: 6px; background: rgba(5, 8, 7, 0.78); border: 1px solid #2c3a33; pointer-events: none; font-size: 10px;
}
.mv-shift[hidden] { display: none; }
.mv-sh-l { display: block; color: #e4f6ea; font-weight: 700; white-space: nowrap; }
.mv-shift.is-lift .mv-sh-l { color: #2de66f; }
.mv-shift.is-head .mv-sh-l { color: #ff8a80; }
.mv-sh-bar { position: relative; display: block; height: 6px; margin: 3px 0 2px; border-radius: 3px; background: linear-gradient(90deg, #5a2a26, #2c3a33 45%, #2c3a33 55%, #1f5a35); }
.mv-sh-dot { position: absolute; top: -3px; left: 50%; width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px #000; }
.mv-sh-f { display: block; color: #f0c040; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-sh-f:empty { display: none; }
/* OCS / PENALTY: big, over the middle of the map */
.mv-ban {
    position: absolute; z-index: 3; left: 8px; right: 60px; top: 46%; transform: translateY(-50%); box-sizing: border-box; padding: 8px 10px;
    border-radius: 8px; background: rgba(120, 12, 8, 0.92); border: 2px solid #ff3830; text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.mv-ban[hidden] { display: none; }
.mv-ban.is-x { background: rgba(130, 70, 0, 0.94); border-color: #ffb000; }
.mv-ban-t { display: block; color: #fff; font-size: 20px; letter-spacing: 0.04em; }
.mv-ban-s { display: block; color: #ffd8d2; font-size: 12px; margin-top: 2px; }
.mv-ban-b { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.mv-ban-b .mv-b[hidden] { display: none; }
.mv-pen { background: #ff3830; border-color: #ff3830; color: #fff; }
.mv-pen-x { color: #fff; }
/* the network */
.mv-net {
    position: absolute; z-index: 3; left: 8px; right: 60px; bottom: 30px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; padding: 6px 8px;
    border-radius: 6px; background: rgba(58, 44, 8, 0.95); border: 1px solid #f0c040; color: #f0c040;
}
.mv-net[hidden] { display: none; }
.mv-net-t { flex: 1 1 auto; min-width: 0; font-size: 12px; overflow-wrap: anywhere; animation: ais-echo-blink 1.2s steps(1) infinite; }
/* the map's own buttons: a column on the right */
.mv-mapb { position: absolute; z-index: 2; right: 4px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.mv-mapb .mv-b { min-width: 46px; padding: 0 4px; }
.mv-up { font-size: 10px; }
.mv-ctr { font-size: 22px; }
.mv-ctr.is-man { border-color: #f0c040; color: #f0c040; }
.mv-zin, .mv-zout { font-size: 22px; }
/* the buttons */
.rg-mv .mv-b { min-height: 44px; padding: 4px 6px; font-size: 14px; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #0d1512; }
.rg-mv .mv-b:active { background: #1f2a25; }
.rg-mv .mv-b[aria-pressed="true"] { border-color: #f0c040; color: #f0c040; }
.rg-mv .mv-b[hidden] { display: none; }
/* the two blocks */
.mv-blk { min-width: 0; min-height: 0; box-sizing: border-box; padding: 6px; border-radius: 8px; background: #0a110e; border: 1px solid #1f2a25; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.mv-ap { grid-area: ap; }
.mv-sails { grid-area: sails; }
.mv-bh { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mv-bh > b { color: #f39100; letter-spacing: 0.06em; font-size: 11px; flex: none; }
.mv-seg { display: inline-flex; margin-left: auto; min-width: 0; }
.mv-seg .mv-b { min-height: 32px; font-size: 12px; padding: 2px 8px; border-radius: 0; }
.mv-seg .mv-b:first-child { border-radius: 4px 0 0 4px; }
.mv-seg .mv-b:last-child { border-radius: 0 4px 4px 0; }
.mv-seg .mv-b[aria-pressed="true"] { background: #f0c040; color: #140b00; border-color: #f0c040; }
.mv-set { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mv-set-l { color: #8fa89a; font-size: 11px; flex: none; }
.mv-set-v { font: 400 30px/1 'VT323', "Share Tech Mono", monospace; color: #fff; flex: none; }
.mv-set-s { margin-left: auto; color: #2de66f; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mv-set-s.is-off { color: #f0c040; }
.mv-g { display: grid; gap: 5px; min-width: 0; }
.mv-g-ap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mv-g-ap .mv-tk { grid-column: span 2; font-size: 16px; color: #8fdcff; border-color: #24485a; }
.rg-mv .mv-a { font-size: 15px; padding: 2px; }
.mv-hint { color: #6f8a7a; font-size: 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-tgt { color: #b9cfc2; font-size: 11px; overflow-wrap: anywhere; line-height: 1.25; }
.mv-tgt:empty { display: none; }
.mv-sst { margin-left: auto; color: #b9cfc2; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mv-g-sl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mv-g-sl .mv-shk { grid-column: span 2; margin-left: 0; display: flex; }
.mv-g-sl .mv-shk .mv-b { flex: 1 1 0; min-width: 0; min-height: 34px; }
.rg-mv .mv-s { font-size: 13px; white-space: normal; line-height: 1.1; padding: 2px 4px; }
.mv-sh { font-size: 15px; }
/* ⋯ : CH 72 · RACE, the options, the race */
.mv-sheet {
    position: absolute; z-index: 8; left: max(6px, env(safe-area-inset-left, 0px)); right: max(6px, env(safe-area-inset-right, 0px)); bottom: max(6px, env(safe-area-inset-bottom, 0px));
    top: max(44px, env(safe-area-inset-top, 0px)); box-sizing: border-box; padding: 8px; border-radius: 10px; background: rgba(5, 8, 7, 0.97); border: 1px solid #f39100;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
    -webkit-user-select: text; user-select: text;
}
.mv-sheet[hidden] { display: none; }
.mv-sh-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mv-sh-h b { color: #f39100; font-size: 14px; letter-spacing: 0.06em; }
.mv-x { min-width: 48px; }
.mv-sec { margin-top: 8px; padding-top: 6px; border-top: 1px solid #1f2a25; display: flex; flex-wrap: wrap; gap: 6px; }
.mv-sec[hidden] { display: none; }
.mv-sec-t { flex: 0 0 100%; color: #8fa89a; font-size: 11px; letter-spacing: 0.08em; }
.mv-chat { display: block; }
.mv-clog { max-height: 28vh; overflow-y: auto; margin: 4px 0 6px; padding: 4px 6px; border-radius: 4px; background: #0a110e; border: 1px solid #1f2a25; font-size: 12px; }
.mv-cm { padding: 1px 0; overflow-wrap: anywhere; color: #e4f6ea; }
.mv-cm b { color: #8fdcff; }
.mv-cm.is-me b { color: #f0c040; }
.mv-cm.is-empty { color: #6f8a7a; }
.mv-cq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.rg-mv .mv-q { font-size: 12px; text-align: left; white-space: normal; line-height: 1.15; }
.mv-cf { display: flex; gap: 6px; margin-top: 6px; }
.mv-cin { flex: 1 1 auto; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 4px 8px; border-radius: 4px; border: 1px solid #2c3a33; background: #0d1512; color: #e4f6ea; font: 16px "Share Tech Mono", Menlo, monospace; }
.mv-cin:focus { outline: none; border-color: #f39100; }
.mv-send { color: #06210f; background: #2de66f !important; border-color: #2de66f; }
.mv-cst { margin-top: 4px; color: #8fdcff; font-size: 11px; overflow-wrap: anywhere; }
.mv-cst:empty { display: none; }
.mv-cst.is-err { color: #ff8a80; }
.mv-opts .mv-o, .mv-race .mv-o { flex: 1 1 calc(50% - 6px); min-width: 0; font-size: 13px; }
.mv-desk { color: #8fdcff; }
/* the race panel's MOBILE VIEW, lit when a phone is suggested it */
.rg-hud-b .mv-hud-btn { color: #8fdcff; border-color: #24485a; }
.rg-hud-b .mv-hud-btn.is-hint { color: #140b00; background: #8fdcff; border-color: #8fdcff; animation: ais-echo-blink 1s steps(1) 6; }
/* on its side: the map on the left, the autopilot over the sails on the right */
@media (orientation: landscape) {
    .rg-mv { grid-template-columns: minmax(0, 1fr) minmax(250px, 42%); grid-template-rows: minmax(0, auto) minmax(0, 1fr); grid-template-areas: "map ap" "map sails"; }
    .mv-map { border-radius: 0 0 8px 0; }
    .mv-g-ap { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .mv-g-ap .mv-tk { grid-column: span 1; }
    .mv-g-sl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mv-g-sl .mv-shk { grid-column: span 2; }
    .mv-sheet { left: 40%; }
}
/* a short screen on its side (a phone): everything a little tighter, still thumb-sized */
@media (orientation: landscape) and (max-height: 500px) {
    .rg-mv { gap: 4px; }
    .rg-mv .mv-b { min-height: 40px; font-size: 13px; }
    .mv-seg .mv-b { min-height: 32px; }
    .mv-g-sl .mv-shk .mv-b { min-height: 30px; }
    .mv-blk { padding: 4px; gap: 3px; }
    .mv-set-v { font-size: 24px; }
    .mv-hint { display: none; }
    .mv-tgt { font-size: 10px; }
    .mv-clk { font-size: 24px; }
    .mv-start .mv-t b { font-size: 20px; }
    .mv-t b { font-size: 13px; }
    .mv-r3 { margin-top: 2px; }
    .mv-r3 .mv-t { flex-direction: row; justify-content: center; gap: 5px; align-items: baseline; padding: 0 2px; }
    .mv-sheet { left: 30%; top: max(6px, env(safe-area-inset-top, 0px)); }
}
/* a big screen on its side (a tablet, a desktop): the blocks not wider than a thumb needs */
@media (orientation: landscape) and (min-width: 1000px) {
    .rg-mv { grid-template-columns: minmax(0, 1fr) 380px; }
    .mv-sheet { left: auto; width: 420px; }
}
/* THE SERVER RACE (owner 2026-10-10: "always north up; the map over the whole screen, the buttons on the map"): one area — the map;
   the sails a compact panel on it (at its foot upright, down its right side on its side); no autopilot block (the ring round her is
   the autopilot); the map's buttons over the sails (--mv-bot: _mvDraw) */
.rg-mv.is-srv { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "map"; gap: 0; padding: 0; }
.rg-mv.is-srv .mv-map { border-radius: 0; }
.rg-mv.is-srv .mv-ap { display: none; }
.rg-mv.is-srv .mv-fx { display: none; }                         /* (REAL TIME: the strip's room for the phase and the clock) */
.rg-mv.is-srv .mv-clk { flex: 0 1 auto; font-size: 24px; }
.rg-mv.is-srv .mv-ph { flex: none; }                            /* (STARTED ✓ / NOT STARTED: never cut) */
.rg-mv.is-srv .mv-strip { padding-top: max(5px, env(safe-area-inset-top, 0px)); padding-left: max(7px, env(safe-area-inset-left, 0px)); padding-right: max(7px, env(safe-area-inset-right, 0px)); }
.mv-map > .mv-sails {
    position: absolute; z-index: 2; left: max(6px, env(safe-area-inset-left, 0px)); right: max(6px, env(safe-area-inset-right, 0px)); bottom: max(6px, env(safe-area-inset-bottom, 0px));
    padding: 5px; gap: 4px; background: rgba(5, 8, 7, 0.86); border-color: #2c3a33;
}
.mv-map > .mv-sails .mv-bh { display: none; }
.mv-map > .mv-sails .mv-rig { gap: 4px; }
.mv-map > .mv-sails .mv-rig-r .mv-rb { min-height: 40px; }
.mv-map > .mv-sails .mv-rig-s { font-size: 12px; line-height: 1.2; }
.rg-mv.is-srv .mv-mapb { right: max(6px, env(safe-area-inset-right, 0px)); bottom: calc(var(--mv-bot, 0px) + 8px); }
.rg-mv.is-srv .mv-net { bottom: calc(var(--mv-bot, 0px) + 8px); }
@media (orientation: landscape) {
    .mv-map > .mv-sails { left: auto; width: min(330px, 40%); bottom: auto; top: calc(var(--mv-top, 60px) + 4px); }
    .rg-mv.is-srv .mv-mapb { right: calc(min(330px, 40%) + max(6px, env(safe-area-inset-right, 0px)) + 6px); bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
    .rg-mv.is-srv .mv-net { bottom: 8px; }
}
@media (orientation: landscape) and (max-height: 500px) {
    .mv-map > .mv-sails .mv-rig-r .mv-rb { min-height: 36px; }
}
/* ACCEPT NEW COURSE (owner 2026-10-10): a drag on the ring proposes; this bar over the sails gives the order (_mvProp) */
.mv-acc { position: absolute; z-index: 3; left: max(8px, env(safe-area-inset-left, 0px)); right: 64px; bottom: calc(var(--mv-bot, 0px) + 8px); display: flex; gap: 6px; }
.mv-acc[hidden] { display: none; }
.rg-mv .mv-acc .mv-acc-go { flex: 1 1 auto; min-height: 52px; font-size: 16px; background: #f39100; color: #140b00; border-color: #f39100; white-space: normal; line-height: 1.15; font-weight: 700; }
.rg-mv .mv-acc .mv-acc-x { flex: none; min-width: 52px; min-height: 52px; font-size: 18px; }
@media (orientation: landscape) { .mv-acc { right: calc(min(330px, 40%) + 70px); bottom: max(8px, env(safe-area-inset-bottom, 0px)); } }
.rs-dial-acc { display: flex; gap: 6px; margin: 0 0 6px; }
.rs-dial-acc[hidden] { display: none; }
.rs-dial-acc .rs-acc-go { flex: 1 1 auto; background: #f39100; color: #140b00; border-color: #f39100; font-weight: 700; }
.rs-dial-acc .rs-acc-x { flex: none; min-width: 40px; }
/* + / − bigger than a cent coin (owner 2026-10-10), ⌖ over them */
.rg-mv.is-srv .mv-mapb { align-items: flex-end; gap: 8px; }
.rg-mv.is-srv .mv-mapb .mv-zin, .rg-mv.is-srv .mv-mapb .mv-zout { width: 88px; height: 88px; min-width: 88px; font-size: 44px; line-height: 1; border-radius: 14px; }
.rg-mv.is-srv .mv-mapb .mv-ctr { width: 60px; height: 60px; min-width: 60px; font-size: 28px; }
.rg-mv.is-srv .mv-acc { right: 108px; }
@media (orientation: landscape) and (max-height: 500px) {
    .rg-mv.is-srv .mv-mapb .mv-zin, .rg-mv.is-srv .mv-mapb .mv-zout { width: 72px; height: 72px; min-width: 72px; font-size: 36px; }
    .rg-mv.is-srv .mv-mapb .mv-ctr { width: 52px; height: 52px; min-width: 52px; }
}
/* LIVE VIEW / CHART VIEW (owner 2026-10-10): the toggle at the top right under the strip; LIVE VIEW: the simulator's 3-D window in the
   map (its own buttons hidden), the chart canvas off, the compass rose bottom left over the sails (_mvLiveSet, _mvLiveDial) */
.mv-view { position: absolute; z-index: 3; top: calc(var(--mv-top, 60px) + 6px); right: max(8px, env(safe-area-inset-right, 0px)); }
.rg-mv .mv-view { min-height: 44px; padding: 4px 12px; font-size: 15px; font-weight: 700; color: #8fdcff; border-color: #24485a; background: rgba(5, 8, 7, 0.88); }
.rg-mv .mv-view[aria-pressed="true"] { color: #f0c040; border-color: #6a5210; }
.mv-map > #ais-bridge-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.mv-map > #ais-bridge-wrap > :not(#ais-bridge):not(.ais-bridge-3d) { display: none !important; }
.mv-map > #ais-bridge-wrap > #ais-bridge { width: 100%; height: 100%; aspect-ratio: auto; }
.rg-mv.is-live .mv-cv { display: none; }
.mv-ldial { position: absolute; z-index: 3; left: max(8px, env(safe-area-inset-left, 0px)); bottom: calc(var(--mv-bot, 0px) + 8px); width: 220px; height: 220px; touch-action: none; cursor: grab; }
.mv-ldial[hidden] { display: none; }
.rg-mv.is-live .mv-acc { bottom: calc(var(--mv-bot, 0px) + 236px); }
.rg-mv.is-srv .mv-ban.is-mini, .rg-mv.is-srv .mv-ban.is-ok { right: 150px; }
@media (orientation: landscape) and (max-height: 500px) {
    .mv-ldial { width: 170px; height: 170px; bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
    .rg-mv.is-live .mv-acc { bottom: max(8px, env(safe-area-inset-bottom, 0px)); left: 186px; }
}
/* YOU HAVE STARTED (owner 2026-10-10): green, under the strip for 10 s (a tap: gone); after it the strip's STARTED ✓ */
.mv-ban.is-ok { top: calc(var(--mv-top, 60px) + 8px); transform: none; background: rgba(6, 70, 30, 0.94); border-color: #2de66f; cursor: pointer; }
.mv-ban.is-ok .mv-ban-s { color: #c9f5d8; }
.mv-ph.is-ok { color: #2de66f; }
.mv-ph.is-not { color: #ffb000; }
.rg-chip.is-ok { background: #062a14; color: #2de66f; border: 1px solid #1f6f3f; }
/* EXECUTING (owner 2026-10-10): an order on its way — the button asked and the words pulse amber until it is done (_rsPendNow) */
@keyframes rs-exec { 50% { opacity: 0.45; } }
.mv-rig-r .mv-rb.is-exec { border-color: #f0c040; box-shadow: inset 0 0 0 2px #f0c040; animation: rs-exec 1s ease-in-out infinite; }
.mv-rig-s.is-exec { color: #f0c040; font-weight: 700; animation: rs-exec 1s ease-in-out infinite; }
.rg-chip.is-exec { background: #3a2c08; color: #ffd27a; border: 1px solid #f0c040; animation: rs-exec 1s ease-in-out infinite; }
html.rg-srv .rg-ch-lab { font-size: 15px; }
/* THE SERVER RACE on a desktop (owner 2026-10-10): the race panel a row of the simulator's grid, not over the view; the radar's RNG −/+ */
html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd { grid-template-areas: "hud hud" "bridge bridge" "ctl ctl" "main inst" "helm helm"; }
html.rg-focus .rg-hud.is-inline, .rg-hud.is-inline { position: static; left: auto; top: auto; transform: none; width: auto; max-width: none; grid-area: hud; box-shadow: none; z-index: auto; margin: 0; }
html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-range-dn,
html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-range-up { display: inline-flex !important; }
/* LOCK WIND ANGLE (owner 2026-10-10, simulator subscribers): under LIVE VIEW on the console; under the rose on the desktop */
.mv-lockw { position: absolute; z-index: 3; top: calc(var(--mv-top, 60px) + 58px); right: max(8px, env(safe-area-inset-right, 0px)); }
.rg-mv .mv-lockw { min-height: 44px; padding: 4px 12px; font-size: 14px; font-weight: 700; color: #ffd27a; border-color: #6a5210; background: rgba(5, 8, 7, 0.88); }
.rg-mv .mv-lockw[aria-pressed="true"] { color: #06120b; background: #f0c040; border-color: #f0c040; }
.rg-mv .mv-lockw[hidden] { display: none; }
.rs-dial-lock { display: block; width: 100%; margin: 0 0 6px; color: #ffd27a; border-color: #6a5210; font-weight: 700; }
.rs-dial-lock[aria-pressed="true"] { color: #06120b; background: #f0c040; border-color: #f0c040; }
.rs-dial-lock[hidden] { display: none; }
/* −1° / +1° (owner 2026-10-10: "big buttons, easy to press"): the console's left side by the ring; the desktop under the rose */
.mv-nudge { position: absolute; z-index: 3; left: max(8px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.mv-nudge[hidden] { display: none; }
.rg-mv .mv-nudge .mv-nb { width: 76px; height: 76px; min-width: 76px; font-size: 26px; font-weight: 700; line-height: 1; border-radius: 14px; color: #ffd27a; border-color: #6a5210; background: rgba(5, 8, 7, 0.88); }
.rg-mv.is-live .mv-nudge { top: calc(var(--mv-top, 60px) + 70px); transform: none; }
.rs-dial-nudge { display: flex; gap: 6px; margin: 0 0 6px; }
.rs-dial-nudge .rs-nb { flex: 1 1 0; min-height: 44px; font-size: 18px; font-weight: 700; }
@media (orientation: landscape) and (max-height: 500px) { .rg-mv .mv-nudge .mv-nb { width: 60px; height: 60px; min-width: 60px; font-size: 22px; } }
/* THE DESKTOP RACE WINDOW (owner 2026-10-11: "a page of its own, an efficient layout, the panel with FLEET in the window, full screen
   no use"): a server race in focus on a wide screen, in the page and in the full window — one grid without holes: the race panel
   across the top; the 3-D view large over the radar and the chart side by side; the instruments, the autopilot (the rose, LOCK WIND
   ANGLE, −1° / +1°) and the sails down the right column; the control strip (RNG, FULL) under the radar and the chart */
@media (min-width: 1100px) {
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(330px, 24%); grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas: "hud hud hud" "bridge bridge inst" "bridge bridge helm" "main slot helm" "ctl ctl helm"; gap: 8px; align-items: stretch;
    }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-bridge-wrap { grid-area: bridge; height: auto; min-height: 320px; display: flex; flex-direction: column; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd #ais-bridge,
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd.has-bridge #ais-bridge { height: 100%; min-height: 320px; flex: 1 1 auto; aspect-ratio: auto; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-main { grid-area: main; width: auto; height: 100%; min-height: 0; aspect-ratio: auto; display: flex; align-items: center; justify-content: center; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-main #ais-radar { width: auto; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 1 / 1; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-chart-wrap { display: flex !important; grid-area: slot; width: auto; height: 100%; min-height: 0; aspect-ratio: auto; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-chart .mkd-main { display: flex !important; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-ctl-strip { grid-area: ctl; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst { grid-area: inst; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: start; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-helm,
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .ais-helm { grid-area: helm; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 0; overflow: auto; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .helm-sail-box { display: block; column-count: 1; }
    /* the right column within the screen: the rose smaller, the boxes tight, the column scrolls when a short screen still needs it */
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-helm { overflow-y: auto !important; min-height: 0 !important; max-height: 100%; align-self: stretch; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .rs-dial { width: min(100%, 220px); margin: 2px auto 4px; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .helm-box { padding: 6px 8px; margin: 0 0 6px; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .rs-dial-nudge .rs-nb { min-height: 36px; font-size: 16px; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .rg-hud.is-inline .rg-fleet { max-height: 30vh; overflow: auto; }
    /* the full window: the grid fills the screen, the view takes the height the rest leaves */
    html.rg-srv #ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-layout,
    html.rg-srv #ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-radar-stack { height: 100%; }
    html.rg-srv #ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd { height: 100%; grid-template-rows: auto auto minmax(0, 1.1fr) minmax(0, 1fr) auto; }
    html.rg-srv #ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-bridge-wrap { min-height: 0; }
    html.rg-srv #ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd #ais-bridge { min-height: 0; }
}
/* GAME OVER (owner 2026-10-11): the race over for her — over everything, the console too */
.rg-over { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483510; overflow: auto; box-sizing: border-box; padding: max(24px, env(safe-area-inset-top)) 16px 24px;
    background: rgba(5, 8, 7, 0.96); color: #e4f6ea; font: 14px/1.4 "Share Tech Mono", Menlo, monospace; text-align: center; }
.rg-over[hidden] { display: none; }
.rg-over-k { font: 700 15px/1.2 "Share Tech Mono", Menlo, monospace; letter-spacing: 0.3em; color: #ff3830; margin: 4vh 0 10px; }
.rg-over h2.rg-over-t { margin: 0 0 8px; font: 700 clamp(22px, 4vw, 36px)/1.2 "Share Tech Mono", Menlo, monospace; color: #fff; }
.rg-over-s { margin: 0 auto 18px; max-width: 640px; color: #ffd27a; font-size: 15px; }
.rg-over-table { margin: 0 auto 18px; border-collapse: collapse; min-width: min(560px, 100%); }
.rg-over-table td { padding: 7px 12px; border-bottom: 1px solid #1f2a25; text-align: left; white-space: nowrap; }
.rg-over-table .rg-over-p { color: #f0c040; font-weight: 700; width: 3.5em; text-transform: uppercase; }
.rg-over h2.rg-over-t { text-transform: uppercase; }
.rg-over-table .rg-over-e { color: #b9cfc2; }
.rg-over-table tr.is-me td { background: #0f3a1d; color: #fff; border-color: #2de66f; font-weight: 700; }
.rg-over-table tr.is-me .rg-over-p { color: #2de66f; }
.rg-over-b { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rg-over-b .rg-btn, .rg-over-b button { min-height: 48px; padding: 8px 22px; font-size: 15px; }
/* REGATTA INFO (THE BALTIC LAP, 2026-10-11): the same sheet as GAME OVER, green, with the course table, the rules and the leg results */
.rg-info .rg-over-k { color: #2de66f; }
.rg-info-b { max-width: 900px; margin: 0 auto; text-align: left; }
.rg-info-h { margin: 22px 0 8px; font: 700 13px/1.2 "Share Tech Mono", Menlo, monospace; letter-spacing: 0.2em; color: #f0c040; }
.rg-info-t { width: 100%; min-width: 0; }
.rg-info-t td { white-space: normal; vertical-align: top; }
.rg-info-t .rg-over-p { width: 4.5em; }
.rg-info-t .rg-over-n { white-space: nowrap; }
.rg-info-l { margin: 0; padding-left: 20px; color: #d6e6dc; }
.rg-info-l li { margin: 7px 0; }
.rg-info-p { margin: 4px 0; color: #b9cfc2; }
@media (max-width: 560px) { .rg-info-t .rg-over-n { white-space: normal; } .rg-info-t td { padding: 6px 6px; } }
/* ===== REGATTA · MOBILE VIEW end ===== */
/* ===== 🎓 CLASSROOM (v1, 2026-10-09) — the button, the class bar, the sheet, the instructor view, the summary and its print (ais-simulator.js _cl*; docs/classroom.md) ===== */
/* the button beside ✎ SCENARIO: a teacher's blue */
#helm-class { color: #8fdcff; border-color: #5fd4ff; border-style: solid; }
#helm-class:hover { background: #0a2230; color: #e4f6ea; }
#helm-class[hidden] { display: none; }
html.cl-in #helm-class { background: #0a2230; color: #fff; }
html.cl-in #helm-shared, html.cl-in #helm-regatta { display: none; }      /* in a class: the class's own sea, no public sea, no regatta */
/* the class bar: bottom left over the simulator, foldable; it lights up for a message */
.cl-bar {
    position: fixed; z-index: 2147483420; left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom));
    width: min(440px, calc(100vw - 84px)); box-sizing: border-box; padding: 6px 8px 7px; border-radius: 8px;     /* clear of the site's cookie button (bottom right) */
    background: rgba(5, 8, 7, 0.92); border: 1px solid #2c4a5a; border-left: 3px solid #5fd4ff; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    font: 12px/1.35 "Share Tech Mono", Menlo, monospace; color: #e4f6ea;
}
.cl-bar[hidden] { display: none; }
.cl-bar-l1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cl-bar-t { color: #5fd4ff; letter-spacing: 0.06em; white-space: nowrap; }
.cl-bar-n { flex: 1 1 120px; min-width: 0; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-bar-chips { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; order: 5; }
.cl-bar-chips:empty { display: none; }
.cl-bar .rg-mini { min-height: 30px; }
.cl-bar-l2 { margin-top: 4px; color: #b9cfc2; overflow-wrap: anywhere; }
.cl-bar-l2:empty { display: none; }
.cl-bar.is-new { border-color: #f39100; animation: cl-new 0.9s steps(1) 6; }
.cl-bar.is-new .cl-bar-l2 { color: #ffb547; }
@keyframes cl-new { 50% { border-color: #2c4a5a; box-shadow: 0 0 0 2px rgba(243, 145, 0, 0.6), 0 6px 22px rgba(0, 0, 0, 0.5); } }
.cl-bar-log { margin-top: 5px; max-height: 32vh; overflow-y: auto; border-top: 1px solid #2c3a33; padding-top: 4px; }
.cl-bar-log[hidden] { display: none; }
.cl-log-i { padding: 2px 0; color: #e4f6ea; overflow-wrap: anywhere; }
.cl-log-i.is-sub { color: #6f8a7a; }
.cl-bar.is-folded .cl-bar-l2, .cl-bar.is-folded .cl-bar-log, .cl-bar.is-folded .cl-bar-n { display: none; }
.cl-chip { padding: 1px 7px; border-radius: 3px; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; white-space: nowrap; border: 1px solid #2c3a33; color: #9fb8aa; }
.cl-chip.is-alarm { background: #ff3830; border-color: #ff3830; color: #fff; animation: ais-echo-blink 0.8s steps(1) infinite; }
.cl-chip.is-warn { background: #3a2c08; color: #f0c040; border-color: #6a5210; }
.cl-chip.is-paused { background: #f39100; border-color: #f39100; color: #140b00; }
.cl-chip.is-off { color: #ff8a80; border-color: #5a2a26; }
.cl-chip.is-sub { color: #6f8a7a; }
/* the sheet (JOIN · TEACH · MY CLASSES): the regatta's sheet, its own few parts */
.cl-box { max-width: 720px; }
.cl-body .rg-sec h4 { margin-top: 10px; }
.cl-sel { display: inline-block; width: auto; max-width: 100%; margin: 4px 6px 0 0; }
.cl-code-in { max-width: 180px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 16px; margin-top: 0; }
.cl-who { padding: 6px 9px; border: 1px solid #2c4a5a; border-radius: 4px; color: #8fdcff; font-weight: 700; overflow-wrap: anywhere; }
.cl-seg .rg-opt { flex: 1 1 150px; }
.cl-filebtn { position: relative; display: inline-flex; align-items: center; margin-top: 6px; overflow: hidden; }
.cl-filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.cl-scsum { color: #b9cfc2; }
.cl-cardrow { cursor: default; }
.cl-mine { cursor: default; }
.cl-facts { margin: 6px 0 4px; }
.cl-card-box { max-width: 460px; }
.cl-card-acts { padding: 0 12px 12px; margin: 0; }
.cl-toast { border-color: #5fd4ff; }
/* the INSTRUCTOR VIEW: the whole window — the head, the chart beside the roll and the controls, the timeline */
.cl-iv {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483500; display: flex; flex-direction: column; min-height: 0;
    background: #050807; color: #e4f6ea; font: 13px/1.4 "Share Tech Mono", Menlo, monospace; overscroll-behavior: contain;
}
.cl-iv[hidden] { display: none; }
.cl-iv-head {
    flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    border-bottom: 1px solid #2c3a33; background: #0a1210;
}
.cl-iv-ttl { flex: 1 1 320px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cl-iv-title { font-size: 16px; color: #5fd4ff; letter-spacing: 0.06em; overflow-wrap: anywhere; }
.cl-iv-code { font-size: 13px; }
.cl-iv-meta { flex-basis: 100%; color: #9fb8aa; font-size: 11px; overflow-wrap: anywhere; }
.cl-iv-hb { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cl-iv-hb .rg-mini { min-height: 34px; }
.cl-iv-pause.is-on { background: #f39100; border-color: #f39100; color: #140b00; }
.cl-iv-hb .rg-btn[aria-pressed="true"]:not(.cl-iv-pause) { border-color: #f0c040; color: #f0c040; }
.cl-iv-hb .rg-btn[hidden] { display: none; }
.cl-iv.is-paused .cl-iv-head { background: #2a1a05; }
.cl-iv-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 460px); }
.cl-iv-mapbox { position: relative; min-height: 220px; background: #0a1a2a; }
.cl-iv-map, .cl-iv-plot { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.cl-iv-map[hidden], .cl-iv-plot[hidden] { display: none; }
.cl-iv-mtools { position: absolute; z-index: 1000; left: 52px; top: 10px; display: flex; gap: 6px; align-items: center; pointer-events: none; }
.cl-iv-mtools .rg-btn { pointer-events: auto; }
.cl-iv-mnote { color: #f0c040; font-size: 11px; text-shadow: 0 0 3px #000; }
.cl-iv-side { min-height: 0; display: flex; flex-direction: column; border-left: 1px solid #2c3a33; }
.cl-iv-list { flex: 1 1 auto; min-height: 90px; overflow-y: auto; padding: 8px; -webkit-overflow-scrolling: touch; }
.cl-iv-ctl { flex: none; max-height: 46%; overflow-y: auto; padding: 8px 10px 10px; border-top: 1px solid #2c3a33; background: #0a1210; }
.cl-iv-ctl[hidden] { display: none; }
.cl-ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 6px; }
.cl-ctl-row[hidden] { display: none; }
.cl-ctl-row .cl-sel { margin: 0; }
.cl-ctl-l { color: #6f8a7a; letter-spacing: 0.08em; }
.cl-tsel { flex: 1 1 180px; color: #f39100; }
.cl-msg-in { flex: 1 1 200px; max-width: none; margin: 0; }
.cl-ctl-ev { border-top: 1px dashed #2c3a33; padding-top: 6px; }
.cl-ev { min-height: 34px; }
.cl-ctl-opt { border-top: 1px dashed #2c3a33; padding-top: 6px; margin-bottom: 0; }
.cl-iv-tlbox { flex: none; height: 150px; display: flex; flex-direction: column; border-top: 1px solid #2c3a33; }
.cl-iv-h { margin: 6px 12px 4px; font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.1em; color: #f0c040; }
.cl-iv-tl { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 12px 6px; font-size: 12px; -webkit-overflow-scrolling: touch; }
.cl-tl-i { display: flex; gap: 8px; padding: 1px 0; color: #b9cfc2; }
.cl-tl-t { flex: none; color: #6f8a7a; }
.cl-tl-w { flex: none; color: #fff; }
.cl-tl-x { min-width: 0; overflow-wrap: anywhere; }
.cl-tl-i.is-alarm .cl-tl-x { color: #ff8a80; }
.cl-tl-i.is-warn .cl-tl-x { color: #f0c040; }
.cl-tl-i.is-cmd .cl-tl-x { color: #f39100; }
.cl-tl-i.is-ok .cl-tl-x { color: #2de66f; }
.cl-tl-i.is-sub .cl-tl-x { color: #6f8a7a; }
.cl-iv-foot { flex: none; }
/* one student on the roll */
.cl-row { padding: 6px 8px 7px; margin: 0 0 6px; border: 1px solid #2c3a33; border-radius: 6px; background: #0d1512; cursor: pointer; }
.cl-row:focus-visible { outline: 2px solid #f39100; outline-offset: 1px; }
.cl-row.is-sel { border-color: #f39100; background: #1a1206; }
.cl-row.is-alarm { border-color: #ff3830; }
.cl-row.is-gone { opacity: 0.55; }
.cl-row-t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cl-flag { flex: none; width: 24px; height: 16px; border: 1px solid #000; }
.cl-flag[hidden] { display: none; }
.cl-row-n { min-width: 0; flex: 0 1 auto; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-row-v { flex: 1 1 auto; min-width: 0; color: #6f8a7a; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-row-acts { flex: none; display: flex; gap: 4px; }
.cl-row-acts[hidden] { display: none; }
.cl-row-acts .rg-mini { min-width: 32px; min-height: 30px; padding: 3px 6px; }
.cl-row-nav { margin-top: 3px; color: #b9cfc2; font-size: 11px; white-space: pre-line; overflow-wrap: anywhere; }
.cl-row-act { margin-top: 2px; color: #5fd4ff; font-size: 11px; overflow-wrap: anywhere; }
.cl-row-act:empty { display: none; }
.cl-row-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cl-row-chips:empty { display: none; }
.cl-empty { padding: 14px 10px; border: 1px dashed #2c4a5a; border-radius: 6px; color: #b9cfc2; overflow-wrap: anywhere; }
.cl-empty b { display: block; color: #5fd4ff; margin-bottom: 4px; }
/* the boats on the chart: an arrow along her heading, her name */
.cl-mk { background: none; border: 0; }
.cl-mk i {
    position: absolute; left: 7px; top: 3px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-bottom: 20px solid #e4f6ea; transform-origin: 6px 10px; filter: drop-shadow(0 0 2px #000);
}
.cl-mk b {
    position: absolute; left: 24px; top: 5px; white-space: nowrap; font: 700 11px "Share Tech Mono", Menlo, monospace; color: #fff;
    text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 2px #000;
}
.cl-mk.is-sel i { border-bottom-color: #f39100; }
.cl-mk.is-sel b { color: #ffb547; }
.cl-mk.is-warn i { border-bottom-color: #ff3830; }
.cl-mk.is-off { opacity: 0.45; }
/* the summary: over the chart (the whole width) while it is open */
.cl-iv-sum { flex: none; max-height: 48vh; overflow-y: auto; padding: 4px 12px 10px; border-top: 1px solid #2c3a33; background: #0a1210; }
.cl-iv-sum[hidden] { display: none; }
.cl-sum-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.cl-sum-h .rg-acts { margin: 4px 0; }
.cl-sum-t td.cl-best { white-space: normal; min-width: 180px; color: #2de66f; }
.cl-sum-t tr.is-gone td { color: #6f8a7a; }
.cl-iv.is-ended .cl-iv-main { display: none; }
.cl-iv.is-ended .cl-iv-sum { flex: 1 1 auto; max-height: none; }
/* the folded view: a pill bottom right */
.cl-pill {
    position: fixed; z-index: 2147483420; right: max(76px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom));     /* left of the site's cookie button */
    min-height: 40px; border-color: #5fd4ff; color: #8fdcff; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}
.cl-pill[hidden] { display: none; }
.cl-pill.is-alarm { border-color: #ff3830; color: #fff; background: #3a0c0a; }
html.cl-teaching body { overflow: hidden; }
/* a tablet in portrait, a phone: one column — the chart, the roll, the controls, the timeline — the whole view scrolls */
@media (max-width: 900px) {
    .cl-iv { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .cl-iv-main { flex: none; display: block; }
    .cl-iv-mapbox { height: 42vh; min-height: 220px; }
    .cl-iv-side { border-left: 0; }
    .cl-iv-list { max-height: none; overflow: visible; }
    .cl-iv-ctl { max-height: none; overflow: visible; }
    .cl-iv-tlbox { height: auto; }
    .cl-iv-tl { max-height: 40vh; }
}
@media (max-width: 520px) {
    .cl-iv-hb .rg-mini { flex: 1 1 auto; }
    .cl-iv-mtools { left: 48px; }
}
/* PRINT: only the summary table */
.cl-print { display: none; }
@media print {
    html.cl-printing body > * { display: none !important; }
    html.cl-printing body > #cl-print { display: block !important; color: #000; background: #fff; font: 10pt/1.35 Arial, Helvetica, sans-serif; padding: 0; }
    html.cl-printing #cl-print h1 { font-size: 14pt; margin: 0 0 4pt; }
    html.cl-printing #cl-print p { margin: 2pt 0 6pt; }
    html.cl-printing #cl-print .rg-tw { border: 0; overflow: visible; }
    html.cl-printing #cl-print table { border-collapse: collapse; width: 100%; white-space: normal; }
    html.cl-printing #cl-print th, html.cl-printing #cl-print td { position: static; border: 1px solid #888; padding: 2pt 4pt; color: #000; background: #fff; font-size: 8.5pt; text-align: left; }
}
@media (max-width: 520px) {
    .cl-row-t { flex-wrap: wrap; }
    .cl-row-acts { order: 5; flex-basis: 100%; justify-content: flex-end; margin-top: 3px; }
}
/* ===== ✎ SCENARIO BUILDER (2026-10-08; ais-simulator.js _sb*) — the button, the editor sheet and its chart, the scenario bar ===== */
#helm-scenario { color: #ffc266; border-color: #f39100; border-style: dashed; }
#helm-scenario:hover { background: #2a1a05; }
/* the editor: a sheet over the simulator (over the full window too); a column on a phone */
.sb-sheet {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483500; display: flex; align-items: stretch; justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) 12px 12px; background: rgba(0, 0, 0, 0.6); overscroll-behavior: contain;
}
.sb-sheet[hidden] { display: none; }
.sb-box {
    width: 100%; max-width: 1240px; display: flex; flex-direction: column; min-height: 0; height: calc(100vh - 24px);
    background: #050807; border: 1px solid #2c3a33; border-top: 3px solid #f39100; border-radius: 8px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
    font: 13px/1.4 "Share Tech Mono", Menlo, monospace; color: #e4f6ea; overflow: hidden;
}
@supports (height: 100dvh) { .sb-box { height: calc(100dvh - 24px); } }
.sb-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid #2c3a33; flex: none; }
.sb-title { font-size: 16px; letter-spacing: 0.08em; color: #f39100; white-space: nowrap; }
.sb-sub { flex: 1 1 auto; min-width: 0; color: #6f8a7a; font-size: 11px; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-main { flex: 1 1 auto; min-height: 0; display: flex; }
.sb-mapw { flex: 1 1 58%; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid #2c3a33; }
.sb-tools { display: flex; gap: 4px; padding: 6px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex: none; background: #0a120f; border-bottom: 1px solid #2c3a33; }
.sb-map { flex: 1 1 auto; min-height: 260px; background: #aad3df; }
.sb-maphint { flex: none; padding: 4px 10px; font-size: 11px; letter-spacing: 0.05em; color: #f0c040; background: #0a120f; border-top: 1px solid #2c3a33; min-height: 14px; }
.sb-side { flex: 1 1 42%; min-width: 0; max-width: 520px; display: flex; flex-direction: column; min-height: 0; }
.sb-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid #2c3a33; flex: none; }
.sb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 12px 16px; -webkit-overflow-scrolling: touch; }
.sb-foot { flex: none; min-height: 18px; padding: 6px 14px 8px; border-top: 1px solid #2c3a33; color: #8fdcff; font-size: 12px; overflow-wrap: anywhere; }
.sb-foot.is-err { color: #ff8a80; }
.sb-foot:empty { display: none; }
/* buttons */
.sb-btn {
    cursor: pointer; padding: 6px 10px; min-height: 34px; border-radius: 4px; border: 1px solid #2c3a33; background: #0d1512; color: #e4f6ea;
    font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.05em; white-space: nowrap;
}
.sb-btn:hover { border-color: #4a6a58; }
.sb-btn:focus-visible { outline: 2px solid #f39100; outline-offset: 1px; }
.sb-btn:disabled { opacity: 0.45; cursor: default; }
.sb-btn.is-go { background: #f39100; border-color: #f39100; color: #140b00; }
.sb-btn.is-go:hover { background: #ffa72a; }
.sb-btn.is-warn { color: #ff8a80; border-color: #5a2a26; }
.sb-mini { padding: 3px 8px; min-height: 28px; font-size: 11px; }
.sb-x { min-width: 40px; }
.sb-run { font-size: 13px; padding: 6px 16px; }
.sb-tab { min-height: 30px; padding: 4px 9px; font-size: 11px; color: #9fb8aa; }
.sb-tab[aria-selected="true"] { background: #1c2a23; border-color: #f39100; color: #ffc266; }
.sb-tool { min-height: 32px; padding: 4px 9px; font-size: 11px; background: #0d1512; }
.sb-tool[aria-pressed="true"] { background: #f39100; border-color: #f39100; color: #140b00; }
/* the form */
.sb-h { margin: 14px 0 6px; font: 700 12px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #f0c040; overflow-wrap: anywhere; }
.sb-f { display: block; margin: 8px 0; }
.sb-fl { display: block; margin-bottom: 3px; color: #6f8a7a; font-size: 11px; letter-spacing: 0.06em; }
.sb-fn { display: block; margin-top: 3px; color: #6f8a7a; font-size: 11px; }
.sb-in {
    box-sizing: border-box; width: 100%; min-height: 34px; padding: 5px 8px; border-radius: 4px; border: 1px solid #2c3a33; background: #0d1512; color: #e4f6ea;
    font: 13px "Share Tech Mono", Menlo, monospace;
}
.sb-in:focus { outline: none; border-color: #f39100; }
.sb-ta { min-height: 76px; resize: vertical; line-height: 1.4; }
.sb-num { width: 92px; }
.sb-sel { width: 100%; }
.sb-link { margin-top: 6px; font-size: 11px; }
.sb-row2 { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-row2 .sb-f { flex: 1 1 80px; }
.sb-row2 .sb-num { width: 100%; }
.sb-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-sg { min-height: 30px; padding: 4px 8px; font-size: 11px; color: #b9cfc2; }
.sb-sg[aria-pressed="true"] { background: #2de66f; border-color: #2de66f; color: #06210f; }
.sb-hdg { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sb-hdg .sb-num { width: 78px; }
.sb-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.sb-acts .sb-f { margin: 0; flex: 1 1 160px; }
.sb-note { color: #8aa496; font-size: 12px; margin: 6px 2px; white-space: pre-line; overflow-wrap: anywhere; }
.sb-note.is-warn { color: #f0c040; }
.sb-row { display: block; width: 100%; text-align: left; white-space: normal; padding: 7px 10px; margin: 0 0 5px; background: #0d1512; }
.sb-row b { display: block; font-size: 13px; color: #fff; overflow-wrap: anywhere; }
.sb-row.is-sel { border-color: #f39100; }
.sb-row-m { display: block; color: #8aa496; font-size: 11px; font-weight: 400; margin-top: 2px; overflow-wrap: anywhere; }
.sb-card { border: 1px solid #2c3a33; border-radius: 6px; padding: 6px 10px 8px; margin: 8px 0; background: #08100d; }
.sb-card.is-sel { border-color: #f39100; }
.sb-card-h { display: block; margin: 4px 0 4px; color: #ffc266; font-size: 12px; letter-spacing: 0.06em; overflow-wrap: anywhere; }
.sb-hbres { margin: 2px 0 6px; }
/* the chart's marks: our own (a ship arrow and her name; yours orange) */
.sb-mk { position: relative; }
.sb-mk i { position: absolute; left: 6px; top: 1px; width: 14px; height: 24px; background: #12455c; clip-path: polygon(50% 0, 100% 34%, 100% 100%, 0 100%, 0 34%);
    border: 0; transform-origin: 50% 50%; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.sb-mk.is-own i { background: #f39100; }
.sb-mk.is-anc i { background: #2a2f33; }
.sb-mk.is-moor i { background: #6b7a86; }
.sb-mk.is-hb i { clip-path: none; border-radius: 50%; width: 18px; height: 18px; left: 4px; top: 4px; background: #f39100; }
.sb-mk.is-sel::before { content: ''; position: absolute; left: -4px; top: -4px; width: 30px; height: 30px; border: 2px solid #f39100; border-radius: 50%; box-sizing: border-box; background: rgba(243, 145, 0, 0.12); }
.sb-mk b { position: absolute; left: 50%; top: 27px; transform: translateX(-50%); white-space: nowrap; font: 700 11px "Share Tech Mono", Menlo, monospace;
    color: #0a2a3a; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; pointer-events: none; }
.sb-mk.is-own b { color: #7a3f00; }
.sb-wp { border-radius: 50%; border: 2px solid #137a74; background: #e9fbf8; box-sizing: border-box; }
.sb-wp b { display: block; text-align: center; font: 700 10px/16px "Share Tech Mono", Menlo, monospace; color: #0b4a46; }
.sb-wp.is-sel { border-color: #f39100; }
.sb-vx { border-radius: 2px; border: 2px solid #f39100; background: #fff7ea; box-sizing: border-box; }
.sb-hdl { border-radius: 50%; border: 2px solid #f39100; background: rgba(255, 247, 234, 0.9); box-sizing: border-box; cursor: grab; }
.sb-alab b, .sb-ch-lab span { white-space: nowrap; font: 700 11px "Share Tech Mono", Menlo, monospace; color: #8a4f00; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
/* the scenario bar while it runs (top centre) */
.sb-hud {
    position: fixed; z-index: 2147483400; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
    width: min(660px, calc(100vw - 24px)); box-sizing: border-box; padding: 6px 10px 7px; border-radius: 8px;
    background: rgba(5, 8, 7, 0.9); border: 1px solid #2c3a33; border-left: 3px solid #f39100; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    font: 12px/1.35 "Share Tech Mono", Menlo, monospace; color: #e4f6ea;
}
.sb-hud[hidden] { display: none; }
html.sb-editing .sb-hud { display: none; }
.sb-hud-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sb-hud-nm { color: #ffc266; letter-spacing: 0.06em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; max-width: 260px; }
.sb-hud-t { font: 400 22px/1 'VT323', "Share Tech Mono", monospace; color: #fff; flex: none; }
.sb-hud-tod { color: #8fdcff; flex: none; }
.sb-hud-l2 { margin-top: 3px; color: #b9cfc2; overflow-wrap: anywhere; }
.sb-hud-l2:empty { display: none; }
.sb-hud-b { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.sb-hud-b .sb-btn[aria-pressed="true"] { border-color: #f0c040; color: #f0c040; }
.sb-hud-b .sb-btn[hidden] { display: none; }
.sb-hud-menu { margin-top: 6px; max-height: 40vh; overflow-y: auto; border-top: 1px solid #2c3a33; padding-top: 5px; }
.sb-hud-menu[hidden] { display: none; }
.sb-hud.is-folded .sb-hud-l2, .sb-hud.is-folded .sb-hud-b, .sb-hud.is-folded .sb-hud-menu { display: none; }
.sb-hud.is-folded { width: auto; max-width: min(420px, calc(100vw - 24px)); }
/* docking mode: folded at the right edge, half way down (the plan's own bars and buttons keep their places); ▸ opens it there */
.sb-hud.is-dock { top: 46%; right: 8px; left: auto; transform: none; width: min(420px, calc(100vw - 16px)); }
.sb-hud.is-dock.is-folded { width: auto; }
.sb-hud.is-dock.is-folded .sb-hud-nm { max-width: 110px; }
.sb-hud.is-dock.is-folded .sb-hud-tod { display: none; }
/* a note over the page: a bad link, the debrief */
.sb-toast { position: fixed; z-index: 2147483450; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100vw - 32px); }
.sb-toast[hidden] { display: none; }
.sb-toast-in { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: 8px; background: #050807; border: 1px solid #f39100;
    font: 12px "Share Tech Mono", Menlo, monospace; color: #e4f6ea; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55); }
.sb-toast-in > span { overflow-wrap: anywhere; }
.sb-toast-h { color: #ffc266; letter-spacing: 0.06em; }
.sb-toast-l { color: #b9cfc2; }
.sb-toast-l.is-warn { color: #ff8a80; }
.sb-toast-b { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
@media (max-width: 760px) {
    .sb-sheet { padding: env(safe-area-inset-top) 0 0; }
    .sb-box { height: 100vh; border-radius: 0; border-left: 0; border-right: 0; max-width: none; }
    .sb-main { flex-direction: column; }
    .sb-mapw { flex: none; height: 44vh; border-right: 0; border-bottom: 1px solid #2c3a33; }
    .sb-map { min-height: 0; }
    .sb-side { flex: 1 1 auto; max-width: none; }
    .sb-title { font-size: 14px; }
    .sb-sub { display: none; }
    .sb-hud { width: calc(100vw - 16px); padding: 5px 8px; }
    .sb-hud-t { font-size: 19px; }
}
@supports (height: 100dvh) { @media (max-width: 760px) { .sb-box { height: 100dvh; } } }
@media (max-width: 600px) {
    .rg-det-g { grid-template-columns: minmax(0, 1fr); }
    .rg-hud { width: calc(100vw - 16px); padding: 5px 8px; }
    .rg-hud-t { font-size: 22px; }
    .rg-flag { width: 18px; height: 12px; }
    .rg-opt { flex-basis: 45%; }
    .rg-l2-ends { display: none; }
}
/* ===== ▦ DRILL VIEW (2026-10-09; ais-simulator.js _dv*): a drill's PLAN (docking mode's plan flown for it: .is-dv,
   html.dv-plan), the PLAN / 3-D switch and readout in its panel (.dv-bar), and the FOCUS LAYOUT while a drill runs in the 3-D
   view (.is-dvfocus: the view, the drill's panel, her own controls; ⤢ in the panel shows everything again) ===== */
.dv-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 5px 0 1px; padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); font: 11px/1.2 "Share Tech Mono", Menlo, monospace; color: #9fb3c8;
}
.dv-seg { display: inline-flex; flex: none; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 5px; overflow: hidden; }
.dv-b {
    min-height: 26px; padding: 0 8px; border: 0; border-radius: 0; background: rgba(20, 38, 56, 0.92); color: #e6eef8; cursor: pointer;
    font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.04em; white-space: nowrap; touch-action: manipulation;
}
.dv-seg .dv-b + .dv-b { border-left: 1px solid rgba(255, 255, 255, 0.32); }
.dv-b:hover { color: #f0c040; }
.dv-b[aria-pressed="true"] { background: #2de66f; color: #06210f; }
.dv-b:disabled { opacity: 0.45; cursor: default; color: #e6eef8; }
.dv-b:focus-visible { outline: 2px solid #f39100; outline-offset: 1px; }
.dv-b.dv-all { flex: none; width: 30px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 5px; font-size: 14px; }
.dv-b.dv-all[hidden] { display: none; }
.dv-read { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 9px; flex: 1 1 auto; min-width: 0; }
.dv-ri { white-space: nowrap; }
.dv-ri i { margin-right: 3px; font-style: normal; font-size: 9px; letter-spacing: 0.08em; color: #8fa89a; }
.dv-ri b { font-weight: 700; color: #f0c040; }
.dv-r-tgt b { color: #7fd4ff; }
.tw-hud.is-folded > .dv-bar { display: flex !important; }
html.dv-plan .dv-bar .dv-r-std { display: none; }             /* the plan's own bar reads SOG, HDG and WIND */
/* the plan: docking mode's plan and bar for the drill — no harbour picker, lines, MAKE FAST, contacts or lessons; her controls stay */
#ais-panel-sim.is-dv .ais-dock #dock-harb,
#ais-panel-sim.is-dv .ais-dock #dock-lines,
#ais-panel-sim.is-dv .ais-dock .dock-act,
#ais-panel-sim.is-dv .ais-dock #dock-hits-tile,
#ais-panel-sim.is-dv.dv-k-mob .ais-dock #dock-clear-tile,
#ais-panel-sim.is-dv.dv-k-sv .ais-dock #dock-clear-tile,
#ais-panel-sim.is-dv.dv-k-ds .ais-dock #dock-clear-tile,
html.dv-plan #dock-les-btn { display: none !important; }
.ais-dock .dv-up { min-width: 66px; }
.ais-dock .dv-3dbtn { border: 2px solid #f39100; color: #ffd08a; font-size: 13px; }
.ais-dock .dv-3dbtn:hover { color: #f39100; }
.ais-dock #dock-centre.is-ready { border-color: #f0c040; color: #f0c040; }      /* panned or zoomed by hand: ⌖ CENTRE goes back */
/* the drill's own panels under the plan's top bar (--dv-top, _dvUi), never so tall that they cover her controls */
html.dv-plan .mob-hud, html.dv-plan .ptx-hud, html.dv-plan .off-hud, html.dv-plan .tw-hud, html.dv-plan .ds-hud, html.dv-plan .off-dp {
    top: var(--dv-top, 64px) !important; max-height: min(46vh, calc(100vh - var(--dv-top, 64px) - 170px)) !important; overflow-y: auto;
}
/* the focus layout: what the drill does not need steps aside (the radar stays for DISTRESS: its echo is a way to find her) */
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .scenario-panel,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .mkd-top-strip,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass):not(.dvf-ds) .mkd-main,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .mkd-ship-row,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) #ais-inst,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) #ais-chart-wrap,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .helm-vessel-row,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) #helm-boat-form,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) #helm-snd-box,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) #helm-moor-box,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) #helm-info-box,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) #ais-range-dn,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) #ais-range-up,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) #ais-motion-toggle,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) #ais-vector,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass):not(.dv-stop) #ais-restart,
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass):not(.dv-stop) #ais-rewind { display: none !important; }
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .ais-layout { grid-template-columns: minmax(0, 1fr); }
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .ais-radar-stack { width: 100%; max-width: none; }
/* the view across the whole width, the control strip under it, her controls in a row below (the helm's own three columns) */
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .ais-mkd {
    display: grid !important; gap: 8px; align-items: start;
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "bridge" "ctl" "helm"; grid-template-rows: none;
}
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .ais-bridge-wrap { grid-area: bridge; margin-top: 0; }
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .mkd-ctl-strip {
    grid-area: ctl; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; max-width: none; margin: 0; padding: 0;
}
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .mkd-ctl-strip .mkd-btn { width: auto; flex: 0 0 auto; padding: 7px 14px; font-size: 11px; }
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .ais-helm { grid-area: helm; margin-top: 0; }
#ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .ais-mkd #ais-bridge { aspect-ratio: auto; height: clamp(240px, 60vh, 820px); }
/* DISTRESS: the radar beside her controls */
#ais-panel-sim.is-dvfocus.dvf-ds:not(.is-dock):not(.is-glass) .ais-mkd {
    grid-template-columns: minmax(180px, min(32%, 38vh)) minmax(0, 1fr); grid-template-areas: "bridge bridge" "ctl ctl" "main helm";
}
#ais-panel-sim.is-dvfocus.dvf-ds:not(.is-dock):not(.is-glass) .mkd-main { grid-area: main; width: 100%; }
/* ... in the full window the view takes all the height the controls leave */
#ais-panel-sim.is-fullwin.is-dvfocus:not(.is-dock):not(.is-glass) > div:first-of-type { display: none !important; }   /* (the title row: Bootstrap .d-flex is display: flex !important) */
#ais-panel-sim.is-fullwin.is-dvfocus:not(.is-dock):not(.is-glass) .ais-layout,
#ais-panel-sim.is-fullwin.is-dvfocus:not(.is-dock):not(.is-glass) .ais-radar-stack { height: 100%; }
#ais-panel-sim.is-fullwin.is-dvfocus:not(.is-dock):not(.is-glass) .ais-mkd { height: 100%; grid-template-rows: minmax(0, 1fr) auto auto; align-items: stretch; }
#ais-panel-sim.is-fullwin.is-dvfocus:not(.is-dock):not(.is-glass) .ais-mkd #ais-bridge,
#ais-panel-sim.is-fullwin.is-dvfocus:not(.is-dock):not(.is-glass) .ais-mkd.has-bridge #ais-bridge { height: 100%; min-height: 0; }
#ais-panel-sim.is-fullwin.is-dvfocus:not(.is-dock):not(.is-glass) .ais-bridge-wrap { min-height: 140px; }
#ais-panel-sim.is-fullwin.is-dvfocus:not(.is-dock):not(.is-glass) .mkd-ctl-strip,
#ais-panel-sim.is-fullwin.is-dvfocus:not(.is-dock):not(.is-glass) .ais-helm { align-self: start; }
#ais-panel-sim.is-fullwin.is-dvfocus.dvf-ds:not(.is-dock):not(.is-glass) .mkd-main { align-self: start; }
/* DISTRESS on a phone upright: her controls the full width, the radar under them (beside each other the helm had 164 px, ran off
   the screen and made the page 401 px wide on a 390 px phone) */
@media (max-width: 600px) and (orientation: portrait) {
    #ais-panel-sim.is-dvfocus.dvf-ds:not(.is-dock):not(.is-glass) .ais-mkd { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bridge" "ctl" "helm" "main"; }
    #ais-panel-sim.is-dvfocus.dvf-ds:not(.is-dock):not(.is-glass) .mkd-main { justify-self: center; width: min(100%, 320px); }
    #ais-panel-sim.is-fullwin.is-dvfocus.dvf-ds:not(.is-dock):not(.is-glass) .ais-mkd { height: auto; min-height: 100%; grid-template-rows: minmax(240px, 46vh) auto auto auto; }
}
/* a phone on its side (a short screen): the view on the left, her controls in a column on the right */
@media (orientation: landscape) and (max-height: 560px) {
    #ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .ais-mkd,
    #ais-panel-sim.is-dvfocus.dvf-ds:not(.is-dock):not(.is-glass) .ais-mkd {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 40%); grid-template-areas: "bridge main" "bridge helm" "ctl helm"; grid-template-rows: auto minmax(0, 1fr) auto;
    }
    #ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .ais-mkd #ais-bridge { height: calc(100vh - 70px); }
    #ais-panel-sim.is-fullwin.is-dvfocus:not(.is-dock):not(.is-glass) .ais-mkd #ais-bridge { height: 100%; }
    #ais-panel-sim.is-fullwin.is-dvfocus:not(.is-dock):not(.is-glass) .ais-helm { max-height: 100%; overflow-y: auto; align-self: stretch; }
    #ais-panel-sim.is-dvfocus.dvf-ds:not(.is-dock):not(.is-glass) .mkd-main { justify-self: center; width: min(100%, 36vh); }   /* DISTRESS: a small radar, her helm keeps its room */
    /* the drill's panel over the view's column, never over her helm in the right one (centred or top right it covered the wheel,
       ◀ MID ▶, MID HOLD | AUTO and the engine levers); ▾ folds it */
    html.dv-focus:not(.dv-plan) .mob-hud, html.dv-focus:not(.dv-plan) .ptx-hud, html.dv-focus:not(.dv-plan) .ds-hud,
    html.dv-focus:not(.dv-plan) .off-hud, html.dv-focus:not(.dv-plan) .tw-hud {
        left: max(8px, env(safe-area-inset-left)) !important; right: auto !important; transform: none !important;
        max-width: calc(58vw - 16px) !important; min-width: 0 !important; max-height: calc(100vh - 16px) !important; overflow-y: auto;
    }
    /* her helm in that 40 % column as on a phone upright: the wheel or tiller across, the other boxes two a row (three columns
       clipped MIDSHIPS, MID and MID HOLD | AUTO) */
    #ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .ais-helm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
    #ais-panel-sim.is-dvfocus:not(.is-dock):not(.is-glass) .helm-wheel-box { grid-column: 1 / -1; }
    /* the view's column and her helm's: the control strip right under the view however tall her helm (its extra height in a last
       row); no radar (all but DISTRESS): the helm from the top of its column (the empty 'main' row pushed it 23–165 px down) */
    #ais-panel-sim.is-dvfocus:not(.dvf-ds):not(.is-dock):not(.is-glass) .ais-mkd { grid-template-areas: "bridge helm" "ctl helm" ". helm"; grid-template-rows: auto auto 1fr; }
    #ais-panel-sim.is-dvfocus.dvf-ds:not(.is-fullwin):not(.is-dock):not(.is-glass) .ais-mkd { grid-template-areas: "bridge main" "bridge helm" "ctl helm" ". helm"; grid-template-rows: auto auto auto 1fr; }
    #ais-panel-sim.is-fullwin.is-dvfocus:not(.dvf-ds):not(.is-dock):not(.is-glass) .ais-mkd { grid-template-areas: "bridge helm" "ctl helm"; grid-template-rows: minmax(0, 1fr) auto; }
}
/* ===== ⛵ REGATTA FOCUS (2026-10-09; ais-simulator.js _rgf*): from JOIN to BACK TO FREE MODE only what a race needs — the 3-D
   view (the biggest), the race panel over it, her helm and sails, the radar with the course, the numbers (.is-rgfocus on
   #ais-panel-sim, html.rg-focus; never with the drills' .is-dvfocus, in docking mode or on the glass bridge). ⤢ in the race panel
   shows everything again for the rest of the race. THE SLOT for CH 72 · RACE (the race chat): on a desktop the right column
   under the radar (grid area "slot"), nothing of ours in it (_rgfSlot); on a phone the chat's own place, under the race panel ===== */
/* the bar at the head of the control strip: the race clock (where PAUSE and TIME were) and ◎ RADAR · ▤ CHART; ⤢ in the race panel */
.rgf-bar { display: none; }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .rgf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; }
.rgf-clock {
    display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; min-height: 30px; box-sizing: border-box; padding: 4px 10px;
    border: 1px solid #2c3a33; border-radius: 4px; background: #050807;
    font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.08em; color: #f39100; white-space: nowrap;
}
.rgf-clock b { font: 400 22px/1 'VT323', "Share Tech Mono", monospace; letter-spacing: 0.04em; color: #fff; }
.rgf-clock i { font-style: normal; letter-spacing: 0.02em; color: #f0c040; }
.rgf-clock.is-last b { color: #ff3830; }
.rgf-seg { display: inline-flex; flex: none; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 5px; overflow: hidden; }
.rgf-seg[hidden] { display: none; }
.rgf-b {
    min-height: 30px; padding: 0 10px; border: 0; border-radius: 0; background: rgba(20, 38, 56, 0.92); color: #e6eef8; cursor: pointer;
    font: 700 11px "Share Tech Mono", Menlo, monospace; letter-spacing: 0.04em; white-space: nowrap; touch-action: manipulation;
}
.rgf-seg .rgf-b + .rgf-b { border-left: 1px solid rgba(255, 255, 255, 0.32); }
.rgf-b:hover { color: #f0c040; }
.rgf-b[aria-pressed="true"] { background: #2de66f; color: #06210f; }
.rgf-b:focus-visible { outline: 2px solid #f39100; outline-offset: -2px; }
.rgf-exit { display: none; }
#ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .rgf-exit { display: inline-flex; align-items: center; margin-left: auto; color: #fff; border: 2px solid #e8eef2; }
#ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .rgf-exit:hover { border-color: #f39100; color: #f39100; }
#ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-fullwin-exit { display: none !important; }               /* (✕ EXIT is at the strip's end: .rgf-exit) */
.rg-hud .rgf-all { flex: none; min-width: 32px; min-height: 26px; padding: 2px 8px; font-size: 14px; line-height: 1; }
.rg-hud .rgf-all[hidden] { display: none; }
/* what a race does not need steps aside (PAUSE back after the finish, RESTART on a stop, the engine until the preparatory signal) */
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .scenario-panel,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-top-strip,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-ship-row,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-hud-tr,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-hud-bl,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-rewind-stop,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .helm-vessel-row,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #helm-boat-form,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #helm-moor-box,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #helm-snd-box,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #helm-info-box,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #inst-cur-tile,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-bridge-poster,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-range-dn,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-range-up,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-motion-toggle,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-vector,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-speed-toggle,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-rewind,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-ctl-strip .ss-open,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus):not(.rgf-pause) #ais-pause,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus):not(.rgf-stop) #ais-restart,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng #helm-engine-box,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng #helm-engine,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus):not(.rgf-chart) #ais-chart-wrap,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-chart .mkd-main,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-chart-wrap .ais-chart-bar label,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-world,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-world-pick,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-vessel,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-route-edit,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-route-clear,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-route-info { display: none !important; }
/* one column for the simulator (no scenario panel); a phone upright (the default here): the view, the strip, the radar beside
   the instruments, the helm */
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-layout { grid-template-columns: minmax(0, 1fr); }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-radar-stack { width: 100%; max-width: none; }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd {
    display: grid !important; gap: 8px; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "bridge bridge" "ctl ctl" "main inst" "helm helm";
}
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-bridge-wrap { grid-area: bridge; margin-top: 0; }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd #ais-bridge,
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd.has-bridge #ais-bridge { aspect-ratio: auto; height: clamp(220px, max(46vh, calc(35vh + 140px)), 62vh); }   /* (CH 72 open fits over it, under the race panel) */
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-ctl-strip {
    grid-area: ctl; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; max-width: none; margin: 0; padding: 0;
}
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-ctl-strip .mkd-btn { width: auto; flex: 0 0 auto; padding: 7px 14px; font-size: 11px; }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-main { grid-area: main; width: 100%; max-width: none; justify-self: stretch; margin: 0; }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #mkd-alert { top: 86%; white-space: nowrap; }                /* the radar's alarm off her and the line (the middle) */
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-chart-wrap { grid-area: main; display: flex; flex-direction: column; width: 100%; aspect-ratio: 1 / 1; min-height: 0; margin-top: 0; }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-chart-wrap .ais-chart-bar { flex: none; }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-chart { flex: 1 1 auto; height: auto; min-height: 0; }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst { grid-area: inst; margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst-tile { padding: 4px 7px 3px; }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst-val b { font-size: 26px; }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst-val small { font-size: 13px; }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-helm { grid-area: helm; margin-top: 0; grid-template-columns: minmax(0, 1.2fr) minmax(150px, 0.6fr) minmax(0, 1.9fr); }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .ais-helm { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #helm-throttle-val { white-space: normal; text-align: center; }
/* the view's look-round buttons above its tools where the view is narrow (as the page does under 700 px) */
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-bridge-wrap { container: rgfview / inline-size; }
@container rgfview (max-width: 820px) {
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-bridge-look { left: auto; right: 8px; bottom: 40px; transform: none; }
}
@media (max-width: 560px) {
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-helm,
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .ais-helm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .helm-wheel-box,
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .helm-sail-box { grid-column: 1 / -1; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst { gap: 4px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst-tile { padding: 3px 6px 2px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst-val b { font-size: 22px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-hud-br { display: none; }                             /* a small radar: OWN and RNG only */
}
/* the sails in two columns where they have the room — by the helm's own width (a container query; a browser without them keeps
   one column): beside the tiller and the engine, beside the tiller alone, the whole width of a phone once the engine is off */
#ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-helm { container: rgfhelm / inline-size; }
@container rgfhelm (min-width: 760px) {
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .helm-sail-box { display: block; column-count: 2; column-gap: 14px; text-align: center; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .helm-sail-box > * { break-inside: avoid; margin: 0 auto 5px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .helm-sail-box > .helm-lab { display: block; column-span: all; text-align: left; margin-left: 0; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .helm-sail-box > b,
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .helm-sail-box > span { display: block; }
}
@container rgfhelm (min-width: 540px) {
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .helm-sail-box { display: block; column-count: 2; column-gap: 14px; text-align: center; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .helm-sail-box > * { break-inside: avoid; margin: 0 auto 5px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .helm-sail-box > .helm-lab { display: block; column-span: all; text-align: left; margin-left: 0; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .helm-sail-box > b,
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .helm-sail-box > span { display: block; }
}
@media (max-width: 560px) {
    @container rgfhelm (min-width: 330px) {
        #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .helm-sail-box { display: block; column-count: 2; column-gap: 12px; text-align: center; }
        #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .helm-sail-box > * { break-inside: avoid; margin: 0 auto 5px; }
        #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .helm-sail-box > .helm-lab { display: block; column-span: all; text-align: left; margin-left: 0; }
        #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .helm-sail-box > b,
        #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .helm-sail-box > span { display: block; }
    }
}
/* a desktop: the view and the radar side by side at the top (the radar an --rgf-w square, top right), under the view the control
   strip with the instruments beside it, then her helm; THE SLOT (CH 72 · RACE) is the rest of the right column, under the radar
   to the foot of the panel — tall enough for the channel open at its full height (--rgf-w leaves 480 px of the window for it and
   the panel's edges). The view spans the radar's row and the one under it (contain: size: its canvas never sizes those rows);
   in the page that row fills what the window has left, in the full window all of it */
@media (min-width: 900px) and (min-height: 561px) {
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) { --rgf-w: clamp(240px, min(26vw, calc(100vh - 480px)), 520px); }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd {
        grid-template-columns: auto minmax(0, 1fr) var(--rgf-w);
        grid-template-areas: "bridge bridge main" "bridge bridge slot" "ctl inst slot" "helm helm slot";
        grid-template-rows: auto minmax(clamp(120px, calc(100vh - var(--rgf-w) - 330px), 600px), auto) auto auto;
    }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-bridge-wrap { align-self: stretch; contain: size; min-height: 220px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd #ais-bridge,
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd.has-bridge #ais-bridge { height: 100%; min-height: 0; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-ctl-strip { align-self: center; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .rgf-clock { min-width: 216px; }                            /* (the phases' words change; the columns stay put) */
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); align-self: center; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-chart-wrap { align-self: start; }
    /* THE SERVER RACE (owner 2026-10-10: "the desktop view lacks the map — put the map under the radar"): the radar on top, the
       chart under it in the right column (the slot), both shown */
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #ais-chart-wrap { display: flex !important; grid-area: slot; }
    html.rg-srv #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-chart .mkd-main { display: block !important; }
}
/* ... in the full window the view takes all the height the rest leaves; the title row steps aside */
#ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) > div:first-of-type { display: none !important; }        /* (Bootstrap .d-flex is display: flex !important) */
#ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-layout,
#ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-radar-stack { height: auto; min-height: 100%; }
#ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd { min-height: 100%; }
@media (min-width: 900px) and (min-height: 561px) {
    #ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-layout,
    #ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-radar-stack { height: 100%; }
    #ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto auto; }
}
/* a phone on its side (a short screen): the view on the left with the strip under it, the radar over the instruments in a narrow
   column, her helm in a column of its own on the right (it scrolls); the race panel over the view's column only */
@media (orientation: landscape) and (max-height: 560px) {
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) { --rgf-w: clamp(110px, 32vh, 200px); }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd {
        grid-template-columns: minmax(0, 1fr) var(--rgf-w) minmax(250px, 38%);
        grid-template-areas: "bridge main helm" "bridge inst helm" "ctl inst helm";
        grid-template-rows: auto minmax(0, 1fr) auto;
    }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-bridge-wrap { align-self: stretch; contain: size; min-height: 150px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd #ais-bridge,
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd.has-bridge #ais-bridge { height: 100%; min-height: 0; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst-tile { padding: 2px 6px 2px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst-lab { font-size: 8px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst-val b { font-size: 20px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst-val small { font-size: 11px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-inst-sub { font-size: 9px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-hud-br { display: none; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-helm {
        align-self: start; max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .helm-wheel-box,
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus).rgf-noeng .helm-sail-box { grid-column: 1 / -1; }
    #ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-layout,
    #ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-radar-stack { height: 100%; min-height: 0; }
    #ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-mkd { height: 100%; min-height: 0; }
    #ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .ais-helm { max-height: 100%; align-self: stretch; }
    html.rg-focus .rg-hud .rg-l2-ends { display: none; }
}
/* a phone (upright or on its side): the race panel a little tighter, the clock without its phase (the race panel says it), a
   small radar's alarm and corner figures smaller */
@media (max-width: 560px), (orientation: landscape) and (max-height: 560px) {
    html.rg-focus .rg-hud { padding: 4px 8px 5px; font-size: 11px; line-height: 1.3; }
    html.rg-focus .rg-hud-t { font-size: 22px; }
    html.rg-focus .rg-hud .rg-mini { padding: 3px 7px; font-size: 10.5px; }
    html.rg-focus .rg-hud-b { gap: 4px; margin-top: 4px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .rgf-clock > span { display: none; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .rgf-clock { padding: 3px 8px; gap: 5px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .rgf-clock b { font-size: 20px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .rgf-b { padding: 0 7px; }
    #ais-panel-sim.is-fullwin.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .rgf-exit { padding: 6px 9px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) #mkd-alert { font-size: 9px; letter-spacing: 1px; padding: 2px 6px; border-width: 1px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-main .hud-val { font-size: 11px; }
    #ais-panel-sim.is-rgfocus:not(.is-dock):not(.is-glass):not(.is-dvfocus) .mkd-main .hud-label { font-size: 8px; }
}
/* the race panel: centred over the view and no wider than it (--rgf-hud-x / --rgf-hud-w: _rgfHud) — clear of the radar's column */
html.rg-focus .rg-hud { left: var(--rgf-hud-x, 50%); width: min(640px, var(--rgf-hud-w, calc(100vw - 32px)), calc(100vw - 16px)); }
/* ===== REGATTA FOCUS end ===== */
/* a phone upright (2026-10-08): the line pairs on a row of their own under FENDERS, ANCHOR and ALL OFF */
@media (max-width: 480px) and (orientation: portrait) {
    .ais-dock .dock-lines { flex-direction: column; align-items: stretch; }
    .ais-dock .dock-lines .dock-row { display: flex; justify-content: space-between; gap: 4px; }
    .ais-dock .dock-lhalves .dock-ln { min-width: 34px; }
    .ais-dock .dock-lhalves .dock-ln.is-one { min-width: 48px; }
}

/* ⛶ FULL blinks while a server race is sailed in the page, not in the full window (owner 2026-10-11: "ja nav fullscreen, lai mirgo fullscreen poga"; ais-simulator.js _rgButtonLabel) */
@keyframes aisFsBlink { 0%, 100% { box-shadow: 0 0 0 0 rgba(243, 145, 0, 0); } 50% { box-shadow: 0 0 0 4px rgba(243, 145, 0, 0.75); background-color: #f39100; color: #fff; } }
#ais-fullscreen.is-blink { animation: aisFsBlink 1.1s ease-in-out infinite; }

/* RNG − / + on the radar itself in a server race (owner 2026-10-11: "radaram nav + un −"; ais-simulator.js _rgfRng) */
.mkd-main .rgf-rng { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; z-index: 6; }
.mkd-main .rgf-rng[hidden] { display: none; }
.mkd-main .rgf-rng-b { width: 42px; height: 36px; font: bold 20px/1 "Share Tech Mono", Menlo, monospace; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(8, 18, 30, 0.78); color: #e6f0ff; cursor: pointer; padding: 0; }
.mkd-main .rgf-rng-b:hover, .mkd-main .rgf-rng-b:focus-visible { background: #f39100; color: #fff; border-color: #f39100; }

/* THE SERVER RACE's helm chooser (owner 2026-10-11: "regates helm nevajag nekādas citas laivas un citus uzdevumus — tikai to, kas attiecas uz regati"):
   only YOUR VESSEL, the ✎ boat chip and ⛵ REGATTA stay; the vessels and every other drill's button step aside while she races */
html.rg-srv .helm-vessel-row > *:not(#helm-vessel-lab):not(#helm-boat-edit):not(#helm-regatta) { display: none !important; }
/* her boat's name at the top of the race panel and the console (owner 2026-10-11: "savas laivas nosaukumu kaut kur augšā labi pamanāmu") */
.rg-hud .rg-hud-me { font: bold 13px/1.2 "Share Tech Mono", Menlo, monospace; color: #ffc164; background: rgba(243, 145, 0, 0.14); border: 1px solid rgba(243, 145, 0, 0.55); border-radius: 5px; padding: 3px 7px; cursor: pointer; white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.rg-hud .rg-hud-me.is-unnamed { color: #fff; background: #b45309; border-color: #f39100; animation: aisFsBlink 1.1s ease-in-out infinite; }
.rg-hud .rg-hud-me:hover, .rg-hud .rg-hud-me:focus-visible { background: #f39100; color: #fff; }
.mv-r1 .mv-me { color: #ffc164; font-weight: 700; white-space: nowrap; max-width: 38%; overflow: hidden; text-overflow: ellipsis; margin-right: 6px; }
.mv-r1 .mv-me:empty { display: none; }

/* the flags drawn in the regatta's lists (owner 2026-10-11: "liec tabulā arī karodziņus klāt"; ais-simulator.js _rgFlagIcon) */
.rg-flag-ic { width: 20px; height: 13px; vertical-align: -1px; margin-right: 5px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 2px; }

/* her own row in the FLEET list (owner 2026-10-11: "kāpēc te neredzu sevi") */
.rg-hud .rg-fl.is-me { color: #ffc164; font-weight: 700; }

/* the HELM · SAILS panel in a server race (owner 2026-10-11: "tagad logam superdebils izkārtojums"): the engine column is gone, so two columns —
   the autopilot's dial on the left, the sails on the right — both from the top, nothing stretched or empty (the race window's own single-column
   grid rules, with their id selectors, still win there) */
html.rg-srv #ais-panel-sim.is-glass .ais-helm { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }   /* the dial's column wider (owner 2026-10-11: a bigger course ring) */
html.rg-srv #ais-panel-sim.is-glass .ais-helm > .helm-wheel-box { grid-column: 1 !important; grid-row: auto !important; align-content: start; align-self: start; }
html.rg-srv #ais-panel-sim.is-glass .ais-helm > .helm-sail-box { grid-column: 2 !important; grid-row: auto !important; align-self: start; }
/* (the race window's own grid — not glass — keeps its single column; css 115's unscoped rules had thrown its sails box into a second column: owner "nu kas tas tāds") */

/* no SOUND SIGNALS box (Rules 32–35 whistle buttons) anywhere in a server race — the glass helm pip too (owner 2026-10-11: "sound signals arī nevajag regatē") */
html.rg-srv #helm-snd-box { display: none !important; }

/* the glass strip in a server race (owner 2026-10-11: "no regates glass noņem arī PAUSE, TIME, MOB, MAKE FAST, 5 MIN, 30 MIN, to free"): only what the
   race needs stays — no pause, no time compression, no tugs, no mooring, no docking, no rewinds, no restart, no MOB */
html.rg-srv #gb-strip .gb-btn[data-gb-proxy="ais-pause"], html.rg-srv #gb-strip .gb-btn[data-gb-proxy="ais-speed-toggle"],
html.rg-srv #gb-strip .gb-btn[data-gb-proxy="helm-tug-call"], html.rg-srv #gb-strip .gb-btn[data-gb-proxy="helm-moor"],
html.rg-srv #gb-strip .gb-btn[data-gb-proxy="helm-dock"], html.rg-srv #gb-strip .gb-btn[data-gb-proxy="ais-rewind5"],
html.rg-srv #gb-strip .gb-btn[data-gb-proxy="ais-rewind"], html.rg-srv #gb-strip .gb-btn[data-gb-proxy="ais-restart"],
html.rg-srv #gb-strip .gb-btn[data-gb-proxy*="mob"], html.rg-srv #gb-strip .gb-btn[data-gb-proxy*="free"] { display: none !important; }

/* the FLEET open/close toggle at the right end of the race panel's first line (owner 2026-10-11) */
.rg-hud .rg-hud-ftog { margin-left: auto; font-weight: 700; color: #ffc164; border-color: rgba(243, 145, 0, 0.55); background: rgba(243, 145, 0, 0.14); white-space: nowrap; }   /* POS k/N · FLEET (owner 2026-10-11: "apvieno pie FLEET") */
.rg-hud .rg-hud-ftog[hidden] { display: none; }
.rg-hud .rg-hud-x[hidden] { display: none; }
/* a server race (2026-10-11 evening, owner: "NEXT KOLKA utt. lielāku, vienā rindā aiz YOUR BOAT gar visu ekrāna augšu, labi izlasāmu"): the race
   panel the width of the view, one row — her boat, the phase and the clock, the NEXT line big across the middle, POS · FLEET at the right;
   the chips, the buttons and the fleet list on rows of their own under it */
html.rg-srv .rg-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; left: var(--rg-hud-x, 50%); width: var(--rg-hud-w, min(640px, calc(100vw - 32px))); top: var(--rg-hud-y, max(8px, env(safe-area-inset-top))); }   /* (--rg-hud-y: 8 px under the simulator block's top while that is below the window's top — never over the page's header; _rgHudPlace) */   /* (the page: over the simulator block, _rgHudTick sets --rg-hud-x / -w — owner 2026-10-11 "šis arī nav OK": it ran over the page) */
html.rg-srv .rg-hud[hidden] { display: none; }
html.rg-focus.rg-srv .rg-hud { width: min(var(--rgf-hud-w, calc(100vw - 32px)), calc(100vw - 16px)); }
html.rg-srv .rg-hud .rg-hud-l1 { flex: 0 0 auto; flex-wrap: wrap; }
html.rg-srv .rg-hud .rg-hud-me { max-width: none; overflow: visible; text-overflow: clip; }   /* her whole name (owner 2026-10-11: "neder, ka apgriež manu laivas nosaukumu") */
html.rg-srv .rg-hud .rg-hud-l2 { flex: 1 1 480px; min-width: 0; margin-top: 0; font: 700 15px/1.3 "Share Tech Mono", Menlo, monospace; letter-spacing: 0.03em; color: #eaf6ee; }
html.rg-srv .rg-hud .rg-hud-l2:empty { display: none; }
html.rg-srv .rg-hud .rg-hud-ftog { flex: none; }
html.rg-srv .rg-hud .rg-chips, html.rg-srv .rg-hud .rg-hud-b, html.rg-srv .rg-hud .rg-fleet { flex: 1 1 100%; margin-top: 0; }
/* the FLEET list: a see-through overlay hanging under the panel, not a part of its band — the 3-D view keeps its height (owner 2026-10-11:
   "uztaisām FLEET ekrānu caurspīdīgu, lai burāšanas ekrāns nesamazinās"); every boat in view, a scrollbar only when the screen is full */
html.rg-srv .rg-hud .rg-fleet { position: absolute; top: 100%; left: 0; right: 0; z-index: 1; margin: 0; padding: 6px 12px 10px; border-top: 1px solid #2c3a33; border-radius: 0 0 8px 8px;
    background: rgba(5, 8, 7, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    max-height: calc(100vh - var(--rg-hud-h, 120px) - 12px) !important; overflow-y: auto !important; }
html.rg-srv .rg-hud .rg-chips:empty { display: none; }
html.rg-srv .rg-hud.is-folded .rg-hud-l2, html.rg-srv .rg-hud.is-folded .rg-hud-b, html.rg-srv .rg-hud.is-folded .rg-fleet { display: none; }
@media (max-width: 900px) { html.rg-srv .rg-hud .rg-hud-l2 { flex-basis: 100%; font-size: 13px; } }

/* the helm's YOUR BOAT row (the ✎ chip, ⛵ RACING) gone in a server race — the race panel's own chip says the name (owner 2026-10-11: "no helm noņem nost šo") */
html.rg-srv .helm-vessel-row { display: none !important; }
/* the chart window in a server race (owner 2026-10-11: "pie chart tur var izvēlēties citas laivas — regatē tikai tas, kas lietojams regatē"):
   no AREA (the starts and harbours) and no VESSEL (another boat) choice, no route planner of the chart's own (ROUTE / TRACK / CLEAR —
   the server sails her on orders); FOLLOW and the depths stay */
html.rg-srv .ais-chart-bar label[for="ais-world"], html.rg-srv #ais-world, html.rg-srv .ais-chart-bar label[for="ais-world-pick"], html.rg-srv #ais-world-pick, html.rg-srv .ais-chart-bar label[for="ais-vessel"], html.rg-srv #ais-vessel,
html.rg-srv #ais-route-edit, html.rg-srv #ais-route-track, html.rg-srv #ais-route-clear, html.rg-srv #ais-route-info,
html.rg-srv #ais-chart-depths { display: none !important; }      /* (DEPTHS too — owner 2026-10-11 "no kartes novāc pogu DEPTHS regatei") */
/* the race window's own bar in a server race (owner 2026-10-11: "šis ir lieks — taimeris jau ir, chart un radar neko nemaina"): its clock (the
   race panel has it) and the ◎ RADAR · ▤ CHART switch hidden; ✕ EXIT stays */
html.rg-srv .rgf-bar .rgf-clock, html.rg-srv .rgf-bar .rgf-seg { display: none !important; }
/* the regatta is the regatta (owner 2026-10-11: "piedāvā pamest, ja spiežu scenārijus; kad spiežu regati, piedāvā rejoin — jānodala"): in a server
   race no way back to the scenario picker, no ⛵ REGATTA (the lobby would offer REJOIN), no ✎ SCENARIO, no ↻ RESTART — RETIRE on the race panel leaves */
html.rg-srv #ais-btn-back, html.rg-srv #helm-regatta, html.rg-srv #helm-scenario, html.rg-srv #ais-restart { display: none !important; }
/* the chart's CPA graphic (owner 2026-10-11, "tā kā Raymarine"): the label on the CPA line and the × where she crosses our heading line */
.ais-chart-cpa-lab, .ais-chart-bcr { background: none; border: 0; }
.ais-chart-cpa-lab > span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; font: 700 12px/1 "Share Tech Mono", Menlo, monospace; color: #1a1202; background: rgba(255, 255, 255, 0.92); border: 1px solid #c0392b; border-radius: 4px; padding: 3px 6px; }
.ais-chart-bcr > i { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none; font: 700 22px/1 "Share Tech Mono", Menlo, monospace; font-style: normal; color: #c0392b; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.ais-chart-bcr > span { position: absolute; left: 10px; top: 6px; white-space: nowrap; pointer-events: none; font: 700 11px/1 "Share Tech Mono", Menlo, monospace; color: #1a1202; background: rgba(255, 255, 255, 0.9); border: 1px solid #c0392b; border-radius: 4px; padding: 2px 5px; }
/* FLEET: the ACTIVE words in colour (owner 2026-10-12): green within the hour, orange from one hour to five, plain beyond */
.rg-act.is-on { color: #2de66f; font-weight: 700; }
.rg-act.is-warm { color: #f39100; font-weight: 700; }
/* the phone console in a server race: see-through buttons and panels, the map or the live view showing through (owner 2026-10-12: "uztaisi pogas uz
   telefona caurspīdīgas"); a text shadow keeps the labels readable over water and land */
.rg-mv.is-srv .mv-b, .rg-mv.is-srv .rg-btn { background: rgba(13, 21, 18, 0.42); border-color: rgba(130, 160, 145, 0.45); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
.rg-mv.is-srv .mv-b:active, .rg-mv.is-srv .rg-btn:active { background: rgba(31, 42, 37, 0.65); }
.rg-mv.is-srv .mv-b[aria-pressed="true"], .rg-mv.is-srv .rg-btn[aria-pressed="true"] { background: rgba(240, 192, 64, 0.92); border-color: #f0c040; color: #1a1202; text-shadow: none; }   /* a pressed button solid orange, dark letters (owner: "nevar salasīt, kas rakstīts uz buru pogām, kad tās iezīmētas") */
.rg-mv.is-srv .mv-map > .mv-sails { background: rgba(5, 8, 7, 0.32); border-color: rgba(44, 58, 51, 0.6); }
.rg-mv.is-srv .mv-strip { background: rgba(5, 8, 7, 0.55); border-bottom-color: rgba(44, 58, 51, 0.7); }
.rg-mv.is-srv .mv-t { background: rgba(13, 21, 18, 0.45); border-color: rgba(31, 42, 37, 0.6); }
.rg-mv.is-srv .mv-strip, .rg-mv.is-srv .mv-t, .rg-mv.is-srv .mv-say, .rg-mv.is-srv .mv-wt, .rg-mv.is-srv .mv-next { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
.rg-mv.is-srv .mv-rig-r .mv-rb[aria-pressed="true"] { background: #2de66f; color: #06120b; border-color: #2de66f; text-shadow: none; }   /* the lit sail buttons solid green with dark letters, as before v155 (owner 2026-10-10 / 2026-10-12) */
/* the see-through console (css v155) must not take the controls that have to be read at a glance (owner 2026-10-12: "sakārto krāsu, nevar redzēt"):
   ACCEPT NEW COURSE solid orange with dark letters, its ✕ and the ±1° nudge buttons on a near-solid dark */
.rg-mv.is-srv .mv-acc .mv-acc-go { background: #f39100; color: #140b00; border-color: #f39100; text-shadow: none; }
.rg-mv.is-srv .mv-acc .mv-acc-go:active { background: #ffb340; }
.rg-mv.is-srv .mv-acc .mv-acc-x { background: rgba(5, 8, 7, 0.9); color: #e4f6ea; border-color: #2c3a33; }
.rg-mv.is-srv .mv-nudge .mv-nb { background: rgba(5, 8, 7, 0.82); color: #ffd27a; border-color: #6a5210; text-shadow: none; }
/* the city's story again (owner 2026-10-12): the 📖 chip on the race panel and the mark's name on the console are tappable */
.rg-chip.is-story { cursor: pointer; }
.rg-mv .mv-nn { cursor: pointer; }
/* the sail buttons while the crew is at the sails (owner 2026-10-12: "kamēr EXECUTING kādu buru maiņu, buru pogas lai ir neaktīvas uz to brīdi") */
.rg-mv .mv-b:disabled, .helm-sail-box button:disabled { opacity: 0.45; cursor: not-allowed; }
/* the 📖 story chip bright, to be noticed (owner 2026-10-12: "spilgtāku, lai var pamanīt") */
.rg-hud .rg-chips .rg-chip.is-story { background: #f0c040; color: #1a1202; border-color: #f0c040; font-weight: 700; box-shadow: 0 0 0 2px rgba(240, 192, 64, 0.35); }
/* the AUTOPILOT and SAILS panels see-through on the glass bridge, the live view or the chart showing through, as the phone console (owner 2026-10-12:
   "autopilotu vajag caurspīdīgu uz live view un uz kartes, tā kā mobilajā"); lit / pressed buttons stay solid */
html.rg-srv.rg-glass #gb-pip-b[data-what="helm"], html.rg-srv.rg-glass #gb-pip-d { background: rgba(6, 12, 18, 0.36); border-color: rgba(255, 255, 255, 0.22); box-shadow: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
html.rg-srv.rg-glass #gb-pip-b[data-what="helm"] .gb-pip-bar, html.rg-srv.rg-glass #gb-pip-d .gb-pip-bar { background: rgba(16, 28, 40, 0.5); }
html.rg-srv.rg-glass #gb-pip-b[data-what="helm"] .helm-box, html.rg-srv.rg-glass #gb-pip-d .helm-box { background: rgba(5, 8, 7, 0.34); border-color: rgba(0, 0, 0, 0.45); box-shadow: none; }
html.rg-srv.rg-glass #gb-pip-b[data-what="helm"] button:not([aria-pressed="true"]):not(.is-go), html.rg-srv.rg-glass #gb-pip-d button:not([aria-pressed="true"]):not(.is-go) { background: rgba(13, 21, 18, 0.45); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
/* the wrong side of the mark, blinking in the middle of the screen until she puts it right (owner 2026-10-12: "lai mirkšķinās ekrāna vidū — tu apņēmi marku
   pa otru pusi, labo situāciju"); over the race panel and the phone console, under the sheets; it takes no taps */
.rg-ws-flash {
    position: fixed; z-index: 2147483460; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(760px, calc(100vw - 32px)); box-sizing: border-box;
    padding: 16px 22px; text-align: center; pointer-events: none; background: rgba(140, 10, 10, 0.92); border: 3px solid #ff3830; border-radius: 12px;
    color: #fff; font: 700 20px/1.3 "Share Tech Mono", Menlo, monospace; letter-spacing: 0.04em; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    animation: rg-ws-blink 1s steps(1, end) infinite;
}
.rg-ws-flash b { display: block; font-size: 30px; line-height: 1.15; color: #ffd27a; margin-bottom: 8px; }
.rg-ws-flash span { display: block; }
@keyframes rg-ws-blink { 0%, 58% { opacity: 1; } 59%, 100% { opacity: 0.3; } }
@media (max-width: 600px) { .rg-ws-flash { font-size: 16px; padding: 12px 14px; } .rg-ws-flash b { font-size: 22px; } }
/* the race committee's word to a boat (admin act 'notice'): the story card's frame in the committee's yellow */
.rg-story.rg-notice { border-color: #f0c040; box-shadow: 0 0 0 2px rgba(240, 192, 64, 0.35), 0 14px 44px rgba(0, 0, 0, 0.6); }
.rg-story.rg-notice .rg-story-h { color: #ffd27a; }
/* the chart's scale bar (owner 2026-10-12: "uzliec uz kartes mērogu") */
.ais-chart-scale { position: absolute; left: 10px; bottom: 10px; z-index: 450; pointer-events: none; font: 700 12px/1 "Share Tech Mono", Menlo, monospace; color: #1a1202; }
.ais-chart-scale i { display: block; height: 6px; border: 2px solid #1a1202; border-top: 0; background: rgba(255, 255, 255, 0.75); box-sizing: border-box; }
.ais-chart-scale span { display: block; margin-top: 3px; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.rg-sog0 { color: #ff5a52; font-weight: 700; }   /* FLEET: a boat standing still (0.0 kn) in red (owner 2026-10-12) */
/* A SMALL SCREEN in the server race (owner 2026-10-12: "mazie mobilie ekrāni slikti rāda — SAILS skatu pielikt" + a phone on its side):
   three tabs at the foot — CHART (the map and the ring), AUTOPILOT (the big rose, ±1°, LOCK WIND ANGLE, ACCEPT), SAILS (the rows over the
   screen); ais-simulator.js _mvTabsOn / _mvTab (.is-tabs, .tab-chart / .tab-ap / .tab-sails) */
.mv-tabs, .mv-tabbg { display: none; }
.rg-mv.is-tabs .mv-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; position: absolute; z-index: 5;
    left: max(6px, env(safe-area-inset-left, 0px)); right: max(6px, env(safe-area-inset-right, 0px)); bottom: max(6px, env(safe-area-inset-bottom, 0px));
    padding: 4px; border-radius: 10px; background: rgba(5, 8, 7, 0.94); border: 1px solid #2c3a33; }
.rg-mv.is-tabs .mv-tabs .mv-tab { min-height: 44px; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: #cfe8da; background: #121c18; border-color: #2c3a33; }
.rg-mv.is-tabs .mv-tabs .mv-tab[aria-pressed="true"] { color: #140b00; background: #f39100; border-color: #f39100; }
.rg-mv.is-tabs.tab-ap .mv-tabbg, .rg-mv.is-tabs.tab-sails .mv-tabbg { display: block; position: absolute; z-index: 1; left: 0; right: 0; top: var(--mv-top, 60px); bottom: 0; background: #071119; }
/* the strip shorter off the chart: her place, the clock and the four figures; the next mark's line and the wind trend on the chart */
.rg-mv.is-tabs.tab-ap .mv-next, .rg-mv.is-tabs.tab-ap .mv-wt, .rg-mv.is-tabs.tab-sails .mv-next, .rg-mv.is-tabs.tab-sails .mv-wt { display: none; }
/* CHART: nothing over the map but the ring, its zoom buttons and ACCEPT */
/* (Nadine 2026-10-12: "before it was a better view — faster to change the course, like in a race"): the race tools stay on the chart —
   ±1° at its left edge, LOCK WIND ANGLE under LIVE VIEW, the ring to drag; only the sails' panel goes to its own tab; ACCEPT between ±1° and the zoom */
.rg-mv.is-tabs.tab-chart .mv-map > .mv-sails { display: none !important; }
.rg-mv.is-tabs.tab-chart .mv-acc { left: calc(max(8px, env(safe-area-inset-left, 0px)) + 90px); right: 104px; bottom: calc(var(--mv-bot, 0px) + 8px); }
.rg-mv.is-tabs.tab-chart .mv-nudge { top: auto; bottom: calc(var(--mv-bot, 0px) + 8px); transform: none; }
/* AUTOPILOT: the rose big in the middle, ±1° in a row under it, LOCK WIND ANGLE and ACCEPT */
.rg-mv.is-tabs.tab-ap .mv-map > .mv-sails, .rg-mv.is-tabs.tab-ap .mv-mapb, .rg-mv.is-tabs.tab-ap .mv-view, .rg-mv.is-tabs.tab-ap .mv-gauge { display: none !important; }
.rg-mv.is-tabs.tab-ap .mv-ldial { z-index: 3; left: 50%; right: auto; top: calc(var(--mv-top, 60px) + 6px); bottom: auto; transform: translateX(-50%);
    width: min(94%, calc(100vh - var(--mv-top, 60px) - var(--mv-bot, 60px) - 190px)); width: min(94%, calc(100dvh - var(--mv-top, 60px) - var(--mv-bot, 60px) - 190px)); height: auto; aspect-ratio: 1; max-width: 520px; }
.rg-mv.is-tabs.tab-ap .mv-nudge { z-index: 3; top: auto; bottom: calc(var(--mv-bot, 0px) + 8px); left: 50%; transform: translateX(-50%); flex-direction: row; gap: 14px; }
.rg-mv.is-tabs.tab-ap .mv-nudge .mv-nb { width: 84px; height: 56px; min-width: 84px; }
.rg-mv.is-tabs.tab-ap .mv-lockw { z-index: 3; top: auto; bottom: calc(var(--mv-bot, 0px) + 74px); left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
.rg-mv.is-tabs.tab-ap .mv-acc { z-index: 4; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(var(--mv-bot, 0px) + 126px); }
/* SAILS: the rows over the screen, the names readable */
.rg-mv.is-tabs.tab-sails .mv-mapb, .rg-mv.is-tabs.tab-sails .mv-view, .rg-mv.is-tabs.tab-sails .mv-lockw, .rg-mv.is-tabs.tab-sails .mv-nudge,
.rg-mv.is-tabs.tab-sails .mv-acc, .rg-mv.is-tabs.tab-sails .mv-gauge { display: none !important; }
.rg-mv.is-tabs.tab-sails .mv-map > .mv-sails { z-index: 3; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); width: auto;
    top: calc(var(--mv-top, 60px) + 6px); bottom: calc(var(--mv-bot, 0px) + 6px); overflow-y: auto; background: #0b1411; border-color: #2c3a33; }
.rg-mv.is-tabs.tab-sails .mv-rig-l { flex: 0 0 104px; color: #cfe8da; font-size: 14px; font-weight: 700; }
.rg-mv.is-tabs.tab-sails .mv-map > .mv-sails .mv-rig-r .mv-rb { min-height: 50px; font-size: 16px; }
/* on its side: the rose on the left, its buttons in a column on the right */
@media (orientation: landscape) {
    .rg-mv.is-tabs.tab-ap .mv-ldial { left: max(10px, env(safe-area-inset-left, 0px)); transform: none; width: auto; height: calc(100% - var(--mv-top, 60px) - var(--mv-bot, 60px) - 14px); aspect-ratio: 1; max-width: 60%; }
    .rg-mv.is-tabs.tab-ap .mv-lockw { left: auto; right: max(10px, env(safe-area-inset-right, 0px)); transform: none; top: calc(var(--mv-top, 60px) + 8px); bottom: auto; }
    .rg-mv.is-tabs.tab-ap .mv-nudge { left: auto; right: max(10px, env(safe-area-inset-right, 0px)); transform: none; top: calc(var(--mv-top, 60px) + 62px); bottom: auto; }
    .rg-mv.is-tabs.tab-ap .mv-acc { left: 50%; right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(var(--mv-bot, 0px) + 8px); }
    .rg-mv.is-tabs.tab-sails .mv-rig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
}
.rg-mv.is-tabs.tab-ap .mv-cv, .rg-mv.is-tabs.tab-sails .mv-cv { visibility: hidden; }   /* (the chart's words not through the strip off the CHART tab) */
/* the tabs on a phone on its side: the chart is short — its buttons in rows along its foot and its top (the zoom right, ±1° left, LIVE VIEW
   and LOCK WIND ANGLE side by side at the top right), the wind trend off; ACCEPT between them */
@media (orientation: landscape) and (max-height: 820px) {
    .rg-mv.is-tabs .mv-wt { display: none; }
    .rg-mv.is-tabs.tab-chart .mv-mapb { right: max(6px, env(safe-area-inset-right, 0px)); bottom: calc(var(--mv-bot, 0px) + 6px); flex-direction: row; align-items: flex-end; gap: 6px; }
    .rg-mv.is-tabs.tab-chart .mv-mapb .mv-zin, .rg-mv.is-tabs.tab-chart .mv-mapb .mv-zout { width: 52px; height: 52px; min-width: 52px; font-size: 28px; }
    .rg-mv.is-tabs.tab-chart .mv-mapb .mv-ctr { width: 44px; height: 44px; min-width: 44px; font-size: 22px; }
    .rg-mv.is-tabs.tab-chart .mv-nudge { flex-direction: row; gap: 6px; bottom: calc(var(--mv-bot, 0px) + 6px); }
    .rg-mv.is-tabs.tab-chart .mv-nudge .mv-nb { width: 58px; height: 52px; min-width: 58px; font-size: 20px; }
    .rg-mv.is-tabs.tab-chart .mv-acc { left: calc(max(8px, env(safe-area-inset-left, 0px)) + 132px); right: 176px; bottom: calc(var(--mv-bot, 0px) + 6px); }
    .rg-mv.is-tabs.tab-chart .mv-acc .mv-acc-go { min-height: 52px; font-size: 14px; }
    .rg-mv.is-tabs.tab-chart .mv-acc .mv-acc-x { min-height: 52px; min-width: 46px; }
    .rg-mv.is-tabs.tab-chart .mv-lockw { top: calc(var(--mv-top, 60px) + 6px); right: calc(max(8px, env(safe-area-inset-right, 0px)) + 150px); }
}
/* MAP (owner 2026-10-12: "telefonā ekrāns, kurā ir tikai karte un var grozīt kursu aiz garā COG, un +1 / −1"): the CHART tab without the strip,
   LIVE VIEW, LOCK WIND ANGLE, the zoom and the gauge — the map, the ring and its long course line to drag, ±1° and ACCEPT (.tab-map is also .tab-chart) */
.rg-mv.is-tabs.tab-map .mv-strip, .rg-mv.is-tabs.tab-map .mv-view, .rg-mv.is-tabs.tab-map .mv-lockw,
.rg-mv.is-tabs.tab-map .mv-gauge { display: none !important; }      /* (the zoom + / − stay: "un zoom arī vajag") */
.rg-mv.is-tabs .mv-tabs .mv-tab { padding-left: 2px; padding-right: 2px; }
@media (max-width: 400px) { .rg-mv.is-tabs .mv-tabs .mv-tab { font-size: 13px; letter-spacing: 0.02em; } }
/* LIVE VIEW with the tabs (owner 2026-10-12: "live view nav ok uz telefona — tas rimbulis virsū grādiem"): the rose bottom right, ±1° left,
   the chart's zoom off (the 3-D view zooms itself); ACCEPT over the rose upright, between them on its side */
.rg-mv.is-tabs.is-live:not(.tab-ap) .mv-mapb { display: none !important; }
.rg-mv.is-tabs.is-live:not(.tab-ap) .mv-ldial { left: auto; right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(var(--mv-bot, 0px) + 8px); }
.rg-mv.is-tabs.is-live:not(.tab-ap) .mv-acc { left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(var(--mv-bot, 0px) + 236px); }
@media (orientation: landscape) and (max-height: 820px) {
    .rg-mv.is-tabs.is-live:not(.tab-ap) .mv-ldial { width: 140px; height: 140px; }
    .rg-mv.is-tabs.is-live:not(.tab-ap) .mv-acc { left: calc(max(8px, env(safe-area-inset-left, 0px)) + 132px); right: 160px; bottom: calc(var(--mv-bot, 0px) + 6px); }
}
/* ACCEPT NEW COURSE on the desktop chart (owner 2026-10-12): after a drag of her vector, at the chart's foot (ais-simulator.js _chartAccTick) */
.ais-chart-acc { position: absolute; z-index: 1000; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; max-width: calc(100% - 24px); }
.ais-chart-acc[hidden] { display: none; }
.ais-chart-acc button { font: 700 14px "Share Tech Mono", Menlo, monospace; border-radius: 6px; cursor: pointer; padding: 8px 12px; }
.ais-chart-acc .ais-chart-acc-go { background: #f39100; color: #140b00; border: 1px solid #f39100; white-space: normal; text-align: center; }
.ais-chart-acc .ais-chart-acc-x { background: #0b1411; color: #e4f6ea; border: 1px solid #2c3a33; min-width: 40px; }
/* the AUTOPILOT tab not black (owner 2026-10-12: "autopilots arī melns"): the map seen through a dark veil under the big rose */
.rg-mv.is-tabs.tab-ap .mv-cv { visibility: visible; }
.rg-mv.is-tabs.tab-ap .mv-tabbg { background: rgba(7, 17, 25, 0.5); }
/* INSTR (owner 2026-10-12: "MAP būs INSTR — tikai instrumenti"): the strip over the whole screen above the tabs, its figures big; nothing else */
.rg-mv.is-tabs.tab-instr .mv-tabbg { display: block; position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; background: #071119; }
.rg-mv.is-tabs.tab-instr .mv-cv, .rg-mv.is-tabs.tab-instr .mv-map > .mv-sails, .rg-mv.is-tabs.tab-instr .mv-mapb, .rg-mv.is-tabs.tab-instr .mv-view,
.rg-mv.is-tabs.tab-instr .mv-lockw, .rg-mv.is-tabs.tab-instr .mv-nudge, .rg-mv.is-tabs.tab-instr .mv-acc, .rg-mv.is-tabs.tab-instr .mv-gauge,
.rg-mv.is-tabs.tab-instr .mv-ldial, .rg-mv.is-tabs.tab-instr #ais-bridge-wrap { display: none !important; }
.rg-mv.is-tabs.tab-instr .mv-strip { bottom: calc(var(--mv-bot, 60px) + 4px); overflow-y: auto; background: #071119; border-bottom: 0; padding: 10px 12px; }
.rg-mv.is-tabs.tab-instr .mv-r2, .rg-mv.is-tabs.tab-instr .mv-r3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.rg-mv.is-tabs.tab-instr .mv-r2[hidden] { display: none; }
.rg-mv.is-tabs.tab-instr .mv-next { display: block; font-size: 20px; line-height: 1.35; }
.rg-mv.is-tabs.tab-instr .mv-t { padding: 10px 4px; border-radius: 8px; }
.rg-mv.is-tabs.tab-instr .mv-t i { font-size: 15px; }
.rg-mv.is-tabs.tab-instr .mv-t b, .rg-mv.is-tabs.tab-instr .mv-start .mv-t b { font-size: 46px; line-height: 1.05; }
.rg-mv.is-tabs.tab-instr .mv-wt { display: block !important; font-size: 18px; margin-top: 12px; }
@media (orientation: landscape) and (max-height: 820px) {
    .rg-mv.is-tabs.tab-instr .mv-r2, .rg-mv.is-tabs.tab-instr .mv-r3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rg-mv.is-tabs.tab-instr .mv-t b, .rg-mv.is-tabs.tab-instr .mv-start .mv-t b { font-size: 36px; }
}
/* INSTR's own figures (owner 2026-10-12): off elsewhere; on INSTR a grid of tiles like the others, their values a little smaller */
.mv-xi { display: none !important; }
.rg-mv.is-tabs.tab-instr .mv-xi { display: grid !important; }
.rg-mv.is-tabs.tab-instr .mv-xi .mv-t b { font-size: 30px; }
@media (orientation: landscape) and (max-height: 820px) { .rg-mv.is-tabs.tab-instr .mv-xi .mv-t b { font-size: 24px; } }
.rg-mv.is-tabs.tab-instr .mv-xi .mv-t.mv-wide { grid-column: span 2; }
.rg-mv.is-tabs.tab-instr .mv-xi .mv-t.mv-wide b { font-size: 24px; }
/* the AUTOPILOT tab with LIVE VIEW on: still the map under the rose (the 3-D view off on this tab), as without it */
.rg-mv.is-tabs.tab-ap #ais-bridge-wrap { display: none !important; }
.rg-mv.is-tabs.tab-ap.is-live .mv-cv { display: block; visibility: visible; }
.rg-mv.is-live.tab-ap .mv-acc { bottom: calc(var(--mv-bot, 0px) + 126px); }
/* (owner 2026-10-12: "pagriežot horizontāli un atpakaļ vairs nestrādā pogas"): the rose's size from the visible height (100dvh — iOS's 100vh is the
   tall one, the rose grew over ±1° and LOCK), and the AUTOPILOT tab's buttons over the rose, never under it */
.rg-mv.is-tabs.tab-ap .mv-nudge, .rg-mv.is-tabs.tab-ap .mv-lockw, .rg-mv.is-tabs.tab-ap .mv-acc { z-index: 6; }
/* fewer buttons (owner 2026-10-12): AUTO TRIM on — no EASE / TRIM rows; AUTO SAILS on (the server race) — no sail buttons but AUTO SAILS, TACK / GYBE */
#helm-sail-box.is-autotrim .helm-sheet { display: none !important; }
#helm-sail-box.is-autosails #helm-sailset, #helm-sail-box.is-autosails #helm-sails, #helm-sail-box.is-autosails #helm-spin, #helm-sail-box.is-autosails #helm-goose,
#helm-sail-box.is-autosails #helm-c0, #helm-sail-box.is-autosails #helm-reef, #helm-sail-box.is-autosails #helm-autotrim, #helm-sail-box.is-autosails .helm-sheet { display: none !important; }
/* AUTO SAILS / the Code Zero lit green while on (owner 2026-10-12: "AUTO SAILS jāpaliek zaļam, kad aktīvs") — over the glass panel's styles */
#helm-autos[aria-pressed="true"], #helm-c0[aria-pressed="true"] { background: #2de66f !important; color: #06210f !important; border-color: #2de66f !important; opacity: 1 !important; }

/* ONE SIMULATOR A VISIT (owner 2026-10-13; ais-simulator.js SIM_LOCK): the ways to the other simulators hidden */
html.sim-lock-regatta #helm-offshore, html.sim-lock-regatta #helm-survey, html.sim-lock-regatta #helm-distress, html.sim-lock-regatta #helm-scenario,
html.sim-lock-regatta #helm-class, html.sim-lock-regatta #helm-mob, html.sim-lock-regatta #helm-mob-drills, html.sim-lock-regatta #helm-precharter,
html.sim-lock-regatta #helm-emg, html.sim-lock-regatta #helm-dock, html.sim-lock-regatta #helm-pilot, html.sim-lock-regatta #helm-towing,
html.sim-lock-regatta #helm-shared, html.sim-lock-regatta .helm-vessel-grid { display: none !important; }
html.sim-lock-free #helm-regatta { display: none !important; }
html.sim-lock-free #helm-dock:not(.is-invite):not([aria-pressed="true"]) { display: none !important; }      /* docking: in a harbour only */
html.sim-lock-dock #helm-regatta, html.sim-lock-dock #helm-offshore, html.sim-lock-dock #helm-survey, html.sim-lock-dock #helm-distress,
html.sim-lock-dock #helm-scenario, html.sim-lock-dock #helm-class, html.sim-lock-dock #helm-mob, html.sim-lock-dock #helm-mob-drills,
html.sim-lock-dock #helm-precharter, html.sim-lock-dock #helm-emg, html.sim-lock-dock #helm-pilot, html.sim-lock-dock #helm-towing,
html.sim-lock-dock #helm-shared { display: none !important; }
/* the race bar as a row of the simulator's grid (.is-inline, a race in the page): never wider than the block — its one long NEXT line made the
   grid item's min-content width, and the bar ran past the simulator to the window's right edge (owner 2026-10-13 screenshot: "salauzts") */
#ais-panel-sim .ais-mkd > .rg-hud.is-inline { min-width: 0; max-width: 100%; box-sizing: border-box; }
/* a gap under the simulator, above the site's footer (owner 2026-10-13: "gribu atstarpīti zem loga virs footer"); the full window has none */
#ais-panel-sim:not(.is-fullwin) { margin-bottom: 40px; }
/* THE LIVE VIEW (?regatta=watch, ais-simulator.js _rgw; Nautica / owner 2026-10-13): the 3-D view alone in a 16:9 box, the line over it, no controls */
html.rg-watch #ais-panel-select { display: none !important; }
html.rg-watch #ais-panel-sim > *:not(.ais-layout) { display: none !important; }
html.rg-watch #ais-panel-sim .ais-layout { display: block !important; }
html.rg-watch #ais-panel-sim .ais-layout > *:not(.ais-radar-stack) { display: none !important; }
html.rg-watch #ais-panel-sim .ais-radar-stack { display: block !important; }
html.rg-watch #ais-panel-sim .ais-radar-stack > *:not(.ais-mkd) { display: none !important; }
html.rg-watch #ais-panel-sim .ais-mkd { display: block !important; padding: 0; border: 0; box-shadow: none; background: #000; }
html.rg-watch #ais-panel-sim .ais-mkd > *:not(.ais-bridge-wrap) { display: none !important; }
html.rg-watch #ais-panel-sim .ais-bridge-wrap { position: relative !important; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; margin: 0 !important; }
html.rg-watch #ais-panel-sim .ais-bridge-wrap > *:not(canvas):not(#ais-bridge-view):not(.rgw-cap):not(.ais-bridge-3d) { display: none !important; }
/* the view's own canvas fills the 16:9 box: _bridgeFit reads its size, and the 3-D view renders at that aspect (it was a 2.5:1 strip squeezed into
   16:9 — ELEONORA narrow, her rails tall: owner 2026-10-13 "pārāk saspiesta horizontāli") */
html.rg-watch #ais-panel-sim #ais-bridge { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
.rgw-cap { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 8px 12px; background: linear-gradient(180deg, rgba(4, 10, 16, 0.78), rgba(4, 10, 16, 0)); pointer-events: none; }
.rgw-cap-t { font: 700 15px/1.25 "Share Tech Mono", Menlo, monospace; letter-spacing: 0.04em; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.rgw-join { pointer-events: auto; font: 700 24px/1 "Share Tech Mono", Menlo, monospace; letter-spacing: 0.06em; color: #fff; background: #f39100; border-radius: 10px;
    padding: 16px 28px; text-decoration: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); border: 2px solid #ffc164; }   /* (much bigger — owner 2026-10-13) */
.rgw-join:hover { background: #ff9f1a; color: #fff; }
@media (max-width: 600px) { .rgw-cap-t { font-size: 12px; } .rgw-join { font-size: 17px; padding: 11px 18px; } }

/* THE CHART PLOTTER (ECDIS) SIMULATOR (2026-10-15, /ecdis-simulator → ?ecdis=1; owner: "lai no tā nevar aiziet uz citiem simulatoriem vai regati,
   lai tajā nav nekas lieks"): only the boat, her helm and sails, the radar, the instruments, TIME and the rewind, the chart with ROUTE / CHECK
   ROUTE / TRACK / DEPTHS; ✕ EXIT (the full window's) goes back to /simulators */
html.is-ecdis .scenario-panel,
html.is-ecdis #ais-btn-back, html.is-ecdis #ais-fullscreen,
html.is-ecdis #helm-boat-edit, html.is-ecdis #helm-poster, html.is-ecdis #helm-shared, html.is-ecdis #helm-offshore, html.is-ecdis #helm-survey,
html.is-ecdis #helm-distress, html.is-ecdis #helm-regatta, html.is-ecdis #helm-scenario, html.is-ecdis #helm-class, html.is-ecdis #helm-mob,
html.is-ecdis #helm-mob-drills, html.is-ecdis #helm-precharter, html.is-ecdis #helm-emg, html.is-ecdis #helm-dock, html.is-ecdis #helm-pilot,
html.is-ecdis #helm-towing, html.is-ecdis #helm-snd-box, html.is-ecdis #helm-moor-box, html.is-ecdis #helm-info-box,
html.is-ecdis #ais-bridge-poster, html.is-ecdis #ais-gp-btn, html.is-ecdis #ais-markdone-btn, html.is-ecdis #ais-help-btn,
html.is-ecdis .ss-open, html.is-ecdis #ais-ss-btn, html.is-ecdis #rg-hud, html.is-ecdis .sim-related,
html.is-ecdis #gb-mob, html.is-ecdis #gb-classic, html.is-ecdis [data-gb-proxy="helm-moor"], html.is-ecdis [data-gb-proxy="helm-dock"],
html.is-ecdis [data-gb-proxy="helm-tug-call"], html.is-ecdis [data-gb-act="pods"],
html.is-ecdis [data-gb-open="helm"], html.is-ecdis [data-gb-open="sails"], html.is-ecdis [data-gb-open="con"], html.is-ecdis #ais-route-track,
html.is-ecdis #ais-panel-sim .ais-helm, html.is-ecdis #ais-panel-sim .helm-vessel-row, html.is-ecdis .rs-dial { display: none !important; }   /* (no helm: ▶ EXECUTE sails her — owner 2026-10-15) */
/* the plotter's bottom bar (owner 2026-10-15: "apakšējā joslā daudz kas lieks"): HDG · SOG · DEPTH and PAUSE · TIME · ↶ 5 / 30 MIN · ↻ · ✕ EXIT */
html.is-ecdis .gb-tile:has(#gb-rot), html.is-ecdis .gb-tile:has(#gb-rud), html.is-ecdis .gb-tile:has(#gb-tel), html.is-ecdis .gb-tile:has(#gb-thr),
html.is-ecdis .gb-tile:has(#gb-wind), html.is-ecdis [data-gb-open="radar"], html.is-ecdis [data-gb-open="chart"] { display: none !important; }
/* the cursor's position and the next leg (_ecdisCursor) */
.ec-cur { position: absolute; left: 10px; bottom: 40px; z-index: 1000; pointer-events: none; background: rgba(6, 16, 28, 0.9); color: #e6eef8;
    font: 700 20px/1.4 "Share Tech Mono", Menlo, monospace; padding: 10px 16px; border-radius: 10px; border: 2px solid #2b4560; white-space: nowrap;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); }     /* (big: owner 2026-10-15 "šo vajag diezgan lielu, jo svarīgs") */
.ec-cur b { color: #ffc164; font-weight: 700; }
.ec-cur i { font-style: normal; display: inline-block; font-size: 26px; color: #fff; }
.ec-cur small { font-size: 15px; color: #9fb3c8; }
@media (max-width: 700px) { .ec-cur { font-size: 15px; padding: 7px 10px; } .ec-cur i { font-size: 19px; } .ec-cur small { font-size: 12px; } }
.ec-cur[hidden] { display: none; }
/* (owner 2026-10-15: "nevajag arī LIVE VIEW" — the plotter is the chart only) */
html.is-ecdis #ais-liveview-btn, html.is-ecdis #ais-chartview-btn { display: none !important; }
/* (owner 2026-10-15: "pārlādējot atvēra HELM, ENGINE, THRUSTERS…" — the glass panels a reload brings back: none on the plotter) */
html.is-ecdis .gb-pip,
html.is-ecdis #ais-panel-sim .gb-in-a:not(.gb-chart-full), html.is-ecdis #ais-panel-sim .gb-in-b:not(.gb-chart-full),
html.is-ecdis #ais-panel-sim .gb-in-c:not(.gb-chart-full), html.is-ecdis #ais-panel-sim .gb-in-d:not(.gb-chart-full) { display: none !important; }
/* (owner 2026-10-15: "augšā nevajag AREA un VESSEL" — the boat is chosen on /ecdis-simulator) */
html.is-ecdis #ais-world, html.is-ecdis #ais-world-pick, html.is-ecdis #ais-vessel,
html.is-ecdis .ais-chart-bar label[for="ais-world"], html.is-ecdis .ais-chart-bar label[for="ais-world-pick"], html.is-ecdis .ais-chart-bar label[for="ais-vessel"] { display: none !important; }
/* the plotter's route bar — its main controls, big (owner 2026-10-15: "tas viss ir pārāk mazs — tas taču galvenais") */
html.is-ecdis .ais-route-bar { gap: 10px !important; padding: 8px 10px !important; flex-wrap: wrap; }
html.is-ecdis .ais-route-bar .ais-bridge-toggle { font-size: 17px !important; padding: 12px 18px !important; border-radius: 10px !important; letter-spacing: .04em; min-height: 48px; }
html.is-ecdis #ais-route-edit { background: #d42fd4 !important; border-color: #d42fd4 !important; color: #fff !important; }
html.is-ecdis #ais-route-check { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }
html.is-ecdis #ais-route-exec { font-size: 18px !important; }
html.is-ecdis .ais-route-info { font-size: 15px !important; }
/* the plotter tests by arithmetic (owner 2026-10-15): no EXECUTE, no boat readouts, only ✕ EXIT below */
html.is-ecdis #ais-route-exec, html.is-ecdis #gb-read, html.is-ecdis [data-gb-proxy="ais-pause"], html.is-ecdis [data-gb-proxy="ais-speed-toggle"],
html.is-ecdis [data-gb-proxy="ais-rewind5"], html.is-ecdis [data-gb-proxy="ais-rewind"], html.is-ecdis [data-gb-proxy="ais-restart"] { display: none !important; }
html.is-ecdis #ais-route-check { background: #16a34a !important; border-color: #16a34a !important; font-size: 18px !important; }
/* fixing the route (owner 2026-10-15: "kamēr es labošu kļūdas, šo vajag paslēpt — lai vienīgais aktīvais ir šis"): the verdict alone, no route bar */
html.is-ecdis.ec-fixing .ais-route-bar { display: none !important; }
html.is-ecdis.ec-fixing #ec-res { top: 70px !important; max-height: calc(100vh - 150px) !important; }
/* (owner 2026-10-15: "poga DEPTHS uz kartes plotera ir pilnīgi lieka" — the depths are always on here) */
html.is-ecdis #ais-chart-depths { display: none !important; }
/* (owner 2026-10-15: "CENTER TO BOAT lieks ploterī" — there is no boat) */
html.is-ecdis #ais-chart-follow { display: none !important; }
/* the phone console's AUTO · WIND · TRACK (Nadine 2026-10-15: "my wind vane disappeared" — the row sat under the map): where LOCK WIND ANGLE was,
   over the chart at the top right */
.rg-mv .mv-modes { position: absolute; z-index: 3; top: calc(var(--mv-top, 60px) + 58px); right: max(8px, env(safe-area-inset-right, 0px)); margin: 0 !important; display: flex; gap: 6px; }
@media (orientation: landscape) { .rg-mv.is-srv .mv-modes { right: calc(min(330px, 40%) + max(8px, env(safe-area-inset-right, 0px)) + 8px); } }
.rg-mv .mv-modes[hidden] { display: none !important; }
.rg-mv .mv-modes .rs-mode { flex: 0 0 auto !important; min-height: 44px; padding: 4px 12px; font-size: 14px; font-weight: 700; color: #ffd27a; border: 1px solid #6a5210; border-radius: 8px; background: rgba(5, 8, 7, 0.88); }
.rg-mv .mv-modes .rs-mode[aria-pressed="true"] { color: #fff; }
/* AUTOPILOT tab: AUTO · WIND · TRACK under the rose, over ±1° (owner 2026-10-15: "zem apļa"); on its side top right like the old LOCK WIND ANGLE */
.rg-mv.is-tabs.tab-ap .mv-modes { z-index: 6; top: auto; bottom: calc(var(--mv-bot, 0px) + 74px); left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
@media (orientation: landscape) { .rg-mv.is-tabs.tab-ap .mv-modes { left: auto; right: max(10px, env(safe-area-inset-right, 0px)); transform: none; top: calc(var(--mv-top, 60px) + 8px); bottom: auto; } }
/* THE CHART PLOTTER: no sail wheel / wind rose left on the chart (empty canvases, 2026-10-15) */
html.is-ecdis .ais-chart-sailwheel, html.is-ecdis .ais-chart-wind { display: none !important; }
/* THE DOCKING / THE SAILING SIMULATOR units (?dock=1 / ?sails=1, owner 2026-10-15 "nodalītās vienības, lai no tām nevar iziet uz citurieni"):
   no scenarios, no race, no plotter route, no other modes — her own helm, sails, lines and the harbour stay; ✕ EXIT goes to /simulators */
html.is-unit .scenario-panel, html.is-unit #ais-btn-back, html.is-unit .sim-related, html.is-unit #rg-hud,
html.is-unit #helm-offshore, html.is-unit #helm-survey, html.is-unit #helm-distress, html.is-unit #helm-regatta, html.is-unit #helm-scenario,
html.is-unit #helm-class, html.is-unit #helm-mob, html.is-unit #helm-mob-drills, html.is-unit #helm-precharter, html.is-unit #helm-emg,
html.is-unit #helm-pilot, html.is-unit #helm-towing, html.is-unit #ais-gp-btn, html.is-unit #ais-markdone-btn, html.is-unit #gb-mob,
html.is-unit .ss-open, html.is-unit #ais-ss-btn, html.is-unit .ais-route-bar, html.is-unit #ais-route-edit, html.is-unit #ais-route-track,
html.is-unit-sails #helm-dock, html.is-unit-sails [data-gb-proxy="helm-dock"] { display: none !important; }

/* the CHART tab is the chart (owner 2026-10-16: "uz kartes nevajag autopilotu"): no AUTO / WIND row, no ±1° nudges, no LOCK WIND — the AUTOPILOT tab has them */
/* …and back on it (owner 2026-10-17: "uzliekam uz kartes +1 / −1 autopilota vadībai un lai rāda, kurš režīms ieslēgts"): ±1° bottom left,
   the AUTO · WIND · TRACK row (the lit one = the mode) above them, compact; LOCK WIND stays off (the modes' WIND) */
.rg-mv.is-tabs.tab-chart .mv-lockw { display: none !important; }
.rg-mv.is-tabs.tab-chart .mv-nudge { z-index: 3; top: auto; bottom: calc(var(--mv-bot, 0px) + 8px); left: max(8px, env(safe-area-inset-left, 0px)); right: auto; transform: none; flex-direction: row; gap: 6px; }
.rg-mv.is-tabs.tab-chart .mv-nudge .mv-nb { width: 64px; height: 48px; min-width: 64px; font-size: 20px; }
.rg-mv.is-tabs.tab-chart .mv-modes { z-index: 3; top: auto; bottom: calc(var(--mv-bot, 0px) + 64px); left: max(8px, env(safe-area-inset-left, 0px)); right: auto; transform: none; gap: 4px; flex-wrap: nowrap; }
.rg-mv.is-tabs.tab-chart .mv-modes .rs-mode { min-height: 38px; padding: 2px 8px; font-size: 12px; }
.rg-mv.is-tabs.tab-chart .mv-acc { left: max(8px, env(safe-area-inset-left, 0px)); right: 76px; bottom: calc(var(--mv-bot, 0px) + 112px); }

/* no sound on a phone (owner 2026-10-16): the SOUND button and its pop-up are not offered on a touch screen without a mouse */
@media (hover: none) and (pointer: coarse) { #ais-snd-btn, #ais-snd-pop { display: none !important; } }

/* CENTER TO BOAT over the chart (owner 2026-10-17), and the race's chart bar — nothing left in it there — gone: the route bar is the one line */
.ais-chart #ais-chart-follow { position: absolute; top: 8px; right: 8px; z-index: 1000; margin: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
html.rg-srv .ais-chart-bar:not(.ais-route-bar) { display: none !important; }

/* the chart's zoom buttons (owner 2026-10-17: "datora kartei vajag lielākas + − pogas, nestrādā bieži"): big, on top of every overlay */
.ais-chart .leaflet-control-zoom a { width: 46px; height: 46px; line-height: 46px; font-size: 28px; font-weight: 700; }
.ais-chart .leaflet-control-zoom { border: 2px solid rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; }
.ais-chart .leaflet-top.leaflet-left { z-index: 1100; }

/* THE FREE SIMULATOR (?free=1, owner 2026-10-17): Free Mode's own drills and the route planner stay; the other units' hides apply (no scenarios, race, modes) */
html.is-unit-free .ais-route-bar { display: flex !important; }
html.is-unit-free #ais-route-edit, html.is-unit-free #ais-route-track, html.is-unit-free #helm-mob, html.is-unit-free #helm-mob-drills,
html.is-unit-free #helm-precharter, html.is-unit-free #helm-emg, html.is-unit-free #helm-distress, html.is-unit-free #gb-mob { display: revert !important; }

/* A SMALL PHONE UPRIGHT (Nadine 2026-10-17, Samsung S21 FE 360 px: "can't sail like this"): the CHART tab's zoom + / − and CENTER a hand's size,
   not a quarter of the screen; the AUTOPILOT tab's AUTO · WIND · TRACK one row across the foot, ±1° the row under them, ACCEPT NEW COURSE
   above both — nothing on top of anything; the ≋ WIND box under the data bar (which is one row across the top on a phone: _mvDataBar) */
@media (max-width: 640px) and (orientation: portrait) {  /* (was 480: the owner's iPhone missed it — the data bar under the buttons, 2026-10-17) */
    .rg-mv.is-tabs.tab-chart .mv-mapb { gap: 8px; }
    .rg-mv.is-tabs.tab-chart .mv-mapb .mv-zin, .rg-mv.is-tabs.tab-chart .mv-mapb .mv-zout { width: 52px; height: 52px; min-width: 52px; font-size: 28px; border-radius: 10px; }
    .rg-mv.is-tabs.tab-chart .mv-mapb .mv-ctr { width: 44px; height: 44px; min-width: 44px; font-size: 22px; }
    .rg-mv.is-tabs.tab-ap .mv-modes { left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); transform: none; bottom: calc(var(--mv-bot, 0px) + 72px); flex-wrap: nowrap; gap: 6px; }
    .rg-mv.is-tabs.tab-ap .mv-modes .rs-mode { flex: 1 1 0 !important; min-width: 0; padding: 4px 6px; min-height: 48px; }
    .rg-mv.is-tabs.tab-ap .mv-nudge { left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); transform: none; gap: 6px; }
    .rg-mv.is-tabs.tab-ap .mv-nudge .mv-nb { flex: 1 1 0; width: auto; min-width: 0; height: 56px; }
    .rg-mv.is-tabs.tab-ap .mv-acc { bottom: calc(var(--mv-bot, 0px) + 130px); }
    .rg-mv.is-tabs.tab-chart .mv-ban.is-mini { top: 50px; left: 8px; right: auto; max-width: calc(100% - 16px); }   /* (under the data bar, not over SOG · COG · BTW) */
    .rg-mv.is-tabs.tab-chart .mv-windbox { top: 92px !important; max-width: calc(100% - 16px) !important; }
    .rg-mv.is-tabs.tab-chart .mv-acc { bottom: calc(var(--mv-bot, 0px) + 112px); left: max(8px, env(safe-area-inset-left, 0px)); right: 76px; }
}

/* INSTR: the AUTO · WIND · TRACK · RESTART XTE row inside the AUTOPILOT tile, not floating over TWS / TWA (owner 2026-10-17: "apvienojam") */
.rg-mv.is-tabs.tab-instr .mv-xi .mv-t .mv-modes { position: static; transform: none; top: auto; right: auto; left: auto; bottom: auto; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px !important; z-index: auto; }
.rg-mv.is-tabs.tab-instr .mv-xi .mv-t .mv-modes .rs-mode { flex: 1 1 auto !important; min-width: 0; min-height: 44px; padding: 4px 8px; font-size: 14px; }

/* THE SERVER RACE: her own boat big on the desktop chart (owner 2026-10-17): the symbol scaled up (ais-simulator.js _chartRotate), a halo round it */
html.rg-srv .ais-chart-own { overflow: visible; }
html.rg-srv .ais-chart-own svg { overflow: visible; filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 8px rgba(255, 211, 77, 0.95)) drop-shadow(0 0 16px rgba(255, 211, 77, 0.6)); }

/* HOW TO SAIL — the first-race cards (owner 2026-10-17): a small card bottom left over the chart, the thing it talks about lit */
.rg-coach { position: fixed; z-index: 2147483470; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(var(--gb-view-b, 56px) + 16px); width: min(440px, calc(100vw - 32px)); box-sizing: border-box;
    padding: 14px 16px 12px; background: rgba(5, 8, 7, 0.96); border: 2px solid #f39100; border-radius: 12px; color: #e4f6ea; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    font: 14px/1.45 "Share Tech Mono", Menlo, monospace; }
.rg-coach[hidden] { display: none; }
.rg-coach-k { font-weight: 700; font-size: 15px; letter-spacing: 0.2em; color: #f39100; margin-bottom: 6px; }
.rg-coach-t { margin: 0 0 12px; color: #e4f6ea; font-size: 14.5px; }
.rg-coach-b { display: flex; align-items: center; gap: 8px; }
.rg-coach-b .rg-coach-n { flex: 1 1 auto; text-align: center; color: #8fa89a; font-size: 12px; letter-spacing: 0.1em; }
.rg-coach-b .rg-btn { font-size: 13px; padding: 8px 12px; }
.rg-coach-b .rg-btn:disabled { opacity: 0.35; }
.rg-coach-hl { outline: 3px solid #f39100 !important; outline-offset: 3px; animation: rg-coach-pulse 1.1s ease-in-out infinite; border-radius: 8px; }
@keyframes rg-coach-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(243, 145, 0, 0); } 50% { box-shadow: 0 0 0 8px rgba(243, 145, 0, 0.45); } }
#ais-chart-ring.rg-coach-hl { outline: 0 !important; animation: none; }
.rg-hud-b .rg-hud-how { color: #ffd27a; border-color: #6a5210; }
@media (max-width: 600px) { .rg-coach { bottom: calc(var(--mv-bot, 60px) + 70px); left: 8px; width: calc(100vw - 16px); font-size: 13px; padding: 12px 12px 10px; } .rg-coach-t { font-size: 13.5px; } }