/* /crossing — Crossing for a tablet at the helm (spec 2026-09-29 §2.2, §7.3).
   Builds on tokens.v2.css; everything here is --cx-* so night mode is one token swap.
   Rules: type >= 15 px, targets >= 44 px, 16 px gutters, no horizontal page scroll. */

:root {
  --cx-bg: var(--bg);
  --cx-surface: var(--surface);
  --cx-text: var(--text);
  --cx-muted: var(--text-muted);
  --cx-muted-text: var(--text-muted);
  --cx-line: var(--line);
  --cx-accent: var(--accent);
  --cx-accent-soft: var(--accent-soft);
  --cx-on-accent: #FFFFFF;
  --cx-brass: #C9962B;
  --cx-danger: var(--danger);
  --cx-warn: var(--warn);
  --cx-warn-soft: rgba(184,116,26,0.16);
  --cx-water: var(--map-water);
  --cx-hull-stroke: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cx-brass: #E3B856;
    --cx-on-accent: #10201D;
    --cx-warn-soft: rgba(217,162,74,0.18);
  }
}
/* §7.3 night palette: red on near-black. Secondary TEXT stays night.text (night.muted is 2.4:1 on
   night.bg, under the 4.5:1 floor), night.muted is kept for rules, ticks and borders. */
html:root[data-night] {
  color-scheme: dark;
  --bg: #050203;
  --cx-bg: #050203;
  --cx-surface: #120506;
  --cx-text: #E8402E;
  --cx-muted: #8E2A1F;
  --cx-muted-text: #E8402E;
  --cx-line: rgba(232,64,46,0.22);
  --cx-accent: #FF6A55;
  --cx-accent-soft: rgba(255,106,85,0.14);
  --cx-on-accent: #050203;
  --cx-brass: #B34A2A;
  --cx-danger: #FF6A55;
  --cx-warn: #E8402E;
  --cx-warn-soft: rgba(232,64,46,0.16);
  --cx-water: #0E0405;
  --cx-hull-stroke: #050203;
  --ship-cargo: #E8402E; --ship-tanker: #E8402E; --ship-passenger: #E8402E; --ship-ferry: #E8402E;
  --ship-tug: #E8402E; --ship-fishing: #E8402E; --ship-pleasure: #E8402E; --ship-other: #E8402E;
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body.cx-page {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--cx-bg); color: var(--cx-text);
  font: 400 17px/1.4 var(--font-text);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--cx-accent); }
.cx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cx-skip { position: absolute; left: 16px; top: -60px; z-index: 2000; padding: 12px 16px; border-radius: 12px; background: var(--cx-surface); color: var(--cx-text); font: 600 16px var(--font-text); }
.cx-skip:focus { top: 8px; }

/* ── top bar ── */
.cx-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 16px 6px; padding-top: max(10px, env(safe-area-inset-top)); }
.cx-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-home { display: inline-flex; flex: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; }
.cx-home:focus-visible { outline: 3px solid var(--cx-accent); }
html[data-night] .cx-home img { filter: grayscale(1) sepia(1) saturate(6) hue-rotate(-40deg) brightness(0.7); }
.cx-title h1 { margin: 0; font: 600 26px/1.1 var(--font-display); font-variation-settings: var(--font-display-variation); }
.cx-eyebrow { margin: 2px 0 0; font: 500 15px/1.3 var(--font-text); color: var(--cx-muted-text); }
.cx-tools { display: flex; flex-wrap: wrap; gap: 8px; }

.cx-btn {
  min-height: 44px; min-width: 44px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; border: 1px solid var(--cx-line);
  background: var(--cx-surface); color: var(--cx-text);
  font: 600 16px/1 var(--font-text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cx-btn[aria-pressed="true"], .cx-btn-go { background: var(--cx-accent); color: var(--cx-on-accent); border-color: var(--cx-accent); }
.cx-btn:disabled { opacity: 0.5; cursor: default; }
.cx-btn:focus-visible { outline: 3px solid var(--cx-accent); outline-offset: 2px; }
.cx-btn-go:focus-visible, .cx-btn[aria-pressed="true"]:focus-visible { outline-color: var(--cx-text); }
/* night: no bright fills — an "on" control is outlined, not lit */
html[data-night] .cx-btn[aria-pressed="true"], html[data-night] .cx-btn-go,
html[data-night] .cx-seg input:checked + span { background: var(--cx-surface); color: var(--cx-accent); border-color: var(--cx-accent); }
html[data-night] .cx-btn[aria-pressed="true"], html[data-night] .cx-btn-go { border-width: 1.5px; }

/* ── strips ── */
.cx-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 0 16px 8px; font: 600 15px/1.3 var(--font-time); font-variant-numeric: tabular-nums; color: var(--cx-muted-text); }
.cx-notice { margin: 0 16px 10px; padding: 10px 14px; border-radius: 12px; background: var(--cx-warn-soft); color: var(--cx-text); font: 600 15px/1.35 var(--font-text); }
.cx-notice p { margin: 0; }
.cx-notice p + p { margin-top: 4px; }

/* ── layout: stacked (phone, portrait tablet) ── */
.cx-main { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 0 16px 12px; min-width: 0; }
.cx-col { display: contents; }
.cx-hero { order: 1; }
.cx-map { order: 2; }
.cx-tl { order: 3; }
.cx-list { order: 4; }
.cx-feednote { order: 5; }
.cx-main:not([data-state="running"]) .cx-list { display: none; }
.cx-main[data-state="idle"] .cx-map, .cx-main[data-state="ended"] .cx-map,
.cx-main[data-state="denied"] .cx-map, .cx-main[data-state="disabled"] .cx-map { opacity: 0.6; }

.cx-card { min-width: 0; background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: 16px; padding: 14px 16px; }

/* ── map ── */
.cx-map { position: relative; height: clamp(260px, 42vh, 480px); min-width: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--cx-line); background: var(--cx-water); }
#cx-map { position: absolute; inset: 0; background: var(--cx-water); }
.cx-map .leaflet-container { font: 500 15px/1.3 var(--font-text); }
.cx-map .leaflet-bar { border: 1px solid var(--cx-line); box-shadow: none; }
.cx-map .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; background: var(--cx-surface); color: var(--cx-text); border-bottom-color: var(--cx-line); }
.cx-map .leaflet-control-attribution { font-size: 15px; background: var(--cx-surface); color: var(--cx-muted-text); opacity: 0.85; }
.cx-map .leaflet-control-attribution a { color: inherit; }
.leaflet-tooltip.cx-tip { padding: 3px 8px; border-radius: 8px; border: 1px solid var(--cx-line); background: var(--cx-surface); color: var(--cx-text); box-shadow: none; font: 700 15px/1.2 var(--font-time); font-variant-numeric: tabular-nums; }
.leaflet-tooltip.cx-tip::before { display: none; }
.cx-own { background: none; border: 0; }
.cx-night-wash { position: absolute; left: -50000px; top: -50000px; width: 100000px; height: 100000px; background: #3A0A05; opacity: 0.85; display: none; }
html[data-night] .cx-night-wash { display: block; }
.cx-recentre { position: absolute; right: 12px; bottom: 44px; z-index: 800; }
.cx-map-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 800; margin: 0; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--cx-line); background: var(--cx-surface); color: var(--cx-text); font: 600 16px/1.2 var(--font-text); white-space: nowrap; }

/* ── hero ── */
.cx-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; }
.cx-hero > p, .cx-hero > button { grid-column: 1 / -1; justify-self: start; }
.cx-hero > button { margin-top: 6px; }
.cx-hero:focus { outline: none; }
.cx-hero-text { min-width: 0; }
.cx-hero p { margin: 0; }
.cx-hero-eb { font: 700 15px/1.2 var(--font-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cx-accent); }
.cx-hero-eb.is-meets, .cx-hero-verdict.is-meets { color: var(--cx-danger); }
.cx-hero-eb.is-close, .cx-hero-verdict.is-close { color: var(--cx-warn); }
.cx-hero-name { margin-top: 4px !important; font: 600 24px/1.15 var(--font-display); font-variation-settings: var(--font-display-variation); overflow-wrap: anywhere; }
.cx-hero-time { margin-top: 2px !important; font: 700 34px/1.1 var(--font-time); font-variant-numeric: tabular-nums; }
.cx-hero-rel { font-size: 19px; color: var(--cx-accent); white-space: nowrap; }
.cx-narrow { display: none; }
.cx-sheet-fs { display: none; margin-top: 14px; width: 100%; }
@media (max-width: 479px) {
  /* one row of pills: Line · moon · End; Full screen lives in the Line sheet */
  .cx-wide { display: none; }
  .cx-narrow { display: inline; }
  #cx-fs-btn { display: none !important; }
  .cx-sheet-fs:not([hidden]) { display: inline-flex; }
  .cx-top { gap: 6px 10px; }
  /* the phone hero: the time alone on its line, the countdown under it (never a dangling "·") */
  .cx-hero-rel { display: block; margin-top: 2px; }
  .cx-hero-rel .cx-dot { display: none; }
  .cx-row { grid-template-columns: 4.6em minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 14px; }
}
.cx-hero-verdict { margin-top: 4px !important; font: 600 17px/1.3 var(--font-text); }
.cx-hero-meta { margin-top: 4px !important; font: 500 15px/1.35 var(--font-text); color: var(--cx-muted-text); }
.cx-hero-msg { margin-top: 4px !important; font: 600 22px/1.25 var(--font-display); }
.cx-hero-sub { margin-top: 6px !important; max-width: 62ch; font: 400 16px/1.45 var(--font-text); color: var(--cx-muted-text); }
.cx-hero-dial svg { display: block; }

/* ── timeline ── */
.cx-tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cx-tl-head h2 { margin: 0; font: 700 15px/1.2 var(--font-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cx-muted-text); }
.cx-tl-you { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--font-text); color: var(--cx-muted-text); }
.cx-tl-you i { display: inline-block; width: 10px; height: 10px; transform: rotate(45deg); background: var(--cx-brass); border: 1px solid var(--cx-text); }
.cx-tl-svg { margin-top: 6px; width: 100%; overflow: hidden; }
.cx-tl-svg svg { display: block; font-family: var(--font-time); font-size: 15px; font-variant-numeric: tabular-nums; }
.cx-tl-svg .cx-loz { cursor: pointer; }
.cx-gaps p { margin: 6px 0 0; font: 600 15px/1.35 var(--font-text); color: var(--cx-accent); }
.cx-gaps p.cx-gaps-own { color: var(--cx-muted-text); font-weight: 500; }

/* ── list ── */
.cx-list { padding: 0; overflow: hidden; }
.cx-rows { list-style: none; margin: 0; padding: 0; }
.cx-rows li + li { border-top: 1px solid var(--cx-line); }
.cx-row {
  width: 100%; min-height: 56px; padding: 10px 16px;
  display: grid; grid-template-columns: 5.4em minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  background: none; border: 0; color: inherit; text-align: left; font: inherit; cursor: pointer;
}
.cx-row[aria-pressed="true"] { background: var(--cx-accent-soft); }
.cx-row:focus-visible { outline: 3px solid var(--cx-accent); outline-offset: -3px; }
.cx-row-t { font: 700 17px/1.2 var(--font-time); font-variant-numeric: tabular-nums; }
.cx-row-main { min-width: 0; }
.cx-row-n { display: block; font: 600 17px/1.25 var(--font-text); overflow-wrap: anywhere; }
.cx-row-m { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 2px; font: 500 15px/1.3 var(--font-text); color: var(--cx-muted-text); }
.cx-chip { padding: 3px 8px; border-radius: 999px; color: #FFFFFF; font: 700 15px/1.1 var(--font-text); white-space: nowrap; }
html[data-night] .cx-chip { background: transparent !important; color: var(--cx-text); border: 1px solid var(--cx-line); }
.cx-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.cx-row-w { font: 700 16px/1.2 var(--font-time); white-space: nowrap; }
.cx-row-w.is-meets { color: var(--cx-danger); }
.cx-row-w.is-close { color: var(--cx-warn); }
.cx-row-a { font: 500 15px/1.2 var(--font-text); color: var(--cx-muted-text); white-space: nowrap; }
.cx-empty { margin: 0; padding: 14px 16px; font: 500 16px/1.4 var(--font-text); }
.cx-feednote { margin: 0; font: 500 15px/1.4 var(--font-text); color: var(--cx-muted-text); }
.cx-main[data-stale="1"] .cx-hero, .cx-main[data-stale="1"] .cx-tl, .cx-main[data-stale="1"] .cx-list { opacity: 0.55; }

/* ── footer ── */
.cx-foot { padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--cx-line); font: 600 15px/1.35 var(--font-text); text-align: center; color: var(--cx-text); }
.cx-foot a { color: inherit; }

/* ── sheets ── */
.cx-sheet { width: min(520px, calc(100vw - 32px)); max-width: none; padding: 20px; border: 1px solid var(--cx-line); border-radius: 20px; background: var(--cx-surface); color: var(--cx-text); }
.cx-sheet::backdrop { background: rgba(0,0,0,0.5); }
.cx-sheet h2 { margin: 0 0 10px; font: 600 24px/1.2 var(--font-display); }
.cx-sheet p { margin: 0 0 10px; font: 400 16px/1.5 var(--font-text); color: var(--cx-muted-text); }
.cx-sheet-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cx-sheet-btns .cx-btn { flex: 1 1 140px; }
.cx-seg { display: flex; border: 1px solid var(--cx-line); border-radius: 12px; overflow: hidden; }
.cx-seg label { flex: 1; position: relative; }
.cx-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cx-seg span { display: flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 12px; font: 600 16px/1.2 var(--font-text); }
.cx-seg input:checked + span { background: var(--cx-accent); color: var(--cx-on-accent); }
.cx-seg input:focus-visible + span { outline: 3px solid var(--cx-text); outline-offset: -3px; }
.cx-plan { display: flex; justify-content: space-between; margin-top: 18px; font: 600 16px/1.2 var(--font-text); }
.cx-plan output { font-family: var(--font-time); font-variant-numeric: tabular-nums; }
#cx-plan { width: 100%; min-height: 44px; margin: 4px 0 0; accent-color: var(--cx-accent); }
.cx-plan-note { margin-top: 4px !important; font-size: 15px !important; }

/* ── Trips (spec 2026-10-03-shipoclock-trips §2.2): the switch, the strip's pill, the Trip panel ── */
:root { --tv-text: var(--cx-text); --tv-muted: var(--cx-muted-text); --tv-line: var(--cx-line); --tv-track: var(--cx-accent); --tv-surface: var(--cx-surface); }
.cx-switch { display: flex; align-items: center; gap: 14px; min-height: 44px; margin: 6px 0 4px; padding: 10px 14px; border: 1px solid var(--cx-line); border-radius: 14px; cursor: pointer; position: relative; }
.cx-hero > .cx-switch { grid-column: 1 / -1; margin-top: 10px; max-width: 62ch; }
.cx-switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-switch-label { font: 600 17px/1.25 var(--font-text); color: var(--cx-text); }
.cx-switch-sub { font: 400 15px/1.4 var(--font-text); color: var(--cx-muted-text); }
.cx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cx-switch-ui { flex: none; position: relative; width: 52px; height: 32px; border-radius: 999px; background: var(--cx-line); border: 1px solid var(--cx-line); transition: background 0.15s; }
.cx-switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--cx-surface); box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: transform 0.15s; }
.cx-switch input:checked + .cx-switch-ui { background: var(--cx-accent); border-color: var(--cx-accent); }
.cx-switch input:checked + .cx-switch-ui::after { transform: translateX(20px); }
.cx-switch input:focus-visible + .cx-switch-ui { outline: 3px solid var(--cx-text); outline-offset: 2px; }
/* night: an outlined switch, never a filled red control (rev 2 rule) */
html[data-night] .cx-switch input:checked + .cx-switch-ui { background: transparent; border: 1.5px solid var(--cx-accent); }
html[data-night] .cx-switch input:checked + .cx-switch-ui::after { background: var(--cx-accent); box-shadow: none; }
.cx-trips-link { margin: 4px 0 0 !important; }
.cx-trips-link a { display: inline-flex; align-items: center; min-height: 44px; font: 600 16px/1.2 var(--font-text); }

.cx-strip-r { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px; margin-left: auto; }
.cx-save { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cx-line); background: var(--cx-surface); color: var(--cx-text); font: 600 15px/1 var(--font-time); font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cx-save i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cx-muted); }
.cx-save[aria-pressed="true"] i { background: var(--cx-text); border-color: var(--cx-text); }
html[data-night] .cx-save[aria-pressed="true"] { border: 1.5px solid var(--cx-accent); }
html[data-night] .cx-save[aria-pressed="true"] i { background: transparent; border-color: var(--cx-accent); }
.cx-save:focus-visible { outline: 3px solid var(--cx-accent); outline-offset: 2px; }

.cx-toast { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3000; width: max-content; max-width: calc(100vw - 32px); padding: 8px 16px; border-radius: 14px; border: 1px solid var(--cx-line); background: var(--cx-surface); color: var(--cx-text); box-shadow: 0 6px 24px rgba(0,0,0,0.25); font: 600 16px/1.35 var(--font-text); }
.cx-toast a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 6px; }

.cx-trip { max-height: calc(100dvh - 32px); overflow-y: auto; }
.cx-trip h2 { margin-bottom: 2px; }
.cx-trip-unsaved { margin: 0 0 8px !important; padding: 10px 12px; border-radius: 12px; background: var(--cx-warn-soft); color: var(--cx-text) !important; font-weight: 600 !important; }
.cx-trip-time { margin: 0 0 10px !important; font: 700 19px/1.3 var(--font-time) !important; font-variant-numeric: tabular-nums; color: var(--cx-text) !important; }
.cx-trip-map { border: 1px solid var(--cx-line); border-radius: 14px; background: var(--cx-water); overflow: hidden; }
.cx-trip-note { margin: 14px 0 0 !important; font-size: 15px !important; }
.cx-trip-msg { margin: 10px 0 0 !important; color: var(--cx-text) !important; font-weight: 600 !important; }
.cx-trip-confirm { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cx-line); }
.cx-trip-q { margin: 0 0 4px !important; font: 600 20px/1.25 var(--font-display) !important; color: var(--cx-text) !important; }
.cx-trip-confirm .cx-btn-end { border-color: var(--cx-danger); color: var(--cx-danger); }
@media (max-width: 479px) { .cx-trip .tv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── landscape tablet / laptop: map left 55 %, the answer right ── */
@media (min-width: 900px) and (orientation: landscape) {
  body.cx-page { height: 100vh; height: 100dvh; overflow: hidden; }
  .cx-main { display: grid; grid-template-columns: 55% minmax(0, 1fr); gap: 12px; min-height: 0; }
  .cx-map { order: 0; height: auto; min-height: 0; }
  .cx-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px; }
  .cx-col > * { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}