:root {
  --ink: #102533;
  --muted: #657784;
  --panel: rgba(248, 251, 252, 0.94);
  --panel-strong: #ffffff;
  --line: rgba(48, 73, 86, 0.16);
  --water: #b9d7df;
  --deep-water: #5f95aa;
  --route: #0f7c8c;
  --route-dark: #075f6d;
  --route-glow: rgba(21, 165, 184, 0.24);
  --motor: #d66f2d;
  --sail: #0e8f62;
  --warning: #d99b22;
  --danger: #b3483a;
  --shadow: 0 18px 38px rgba(24, 46, 58, 0.18);
  --font-ui: "Avenir Next", "Aptos", "Segoe UI", sans-serif;
  --font-size-page: 14px;
  --font-size-meta: 10.5px;
  --font-size-small: 12px;
  --font-size-control: 13px;
  --font-size-body: 14px;
  --font-size-title: clamp(24px, 2vw, 30px);
  --font-size-section: clamp(19px, 1.4vw, 22px);
  --control-height: 36px;
  --control-radius: 8px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--ink);
  /* IMPORTANT FOR BUG AVOIDANCE: centralize the planner type scale so new
     route/weather controls do not silently drift back to oversized debug UI. */
  font-family: var(--font-ui);
  font-size: var(--font-size-page);
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at 10% 8%, rgba(255, 255, 255, 0.86), transparent 29%),
    radial-gradient(circle at 82% 14%, rgba(15, 124, 140, 0.34), transparent 34%),
    radial-gradient(circle at 60% 96%, rgba(16, 37, 51, 0.24), transparent 42%),
    linear-gradient(180deg, #e3f0ef 0%, #accfd5 45%, #719cad 100%);
}

button,
input,
select {
  font: inherit;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  line-height: 1.15;
  min-width: 0;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}

.planner-shell {
  --shell-padding: 14px;
  --shell-frame-height: calc(100vh - 28px);
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  /* IMPORTANT FOR BUG AVOIDANCE: default to a resilient two-column customer
     layout; the review panel drops below the chart before controls clip. */
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  grid-template-rows: minmax(600px, var(--shell-frame-height)) auto;
  gap: 14px;
  padding: var(--shell-padding);
  overflow-x: hidden;
}

@supports (height: 100dvh) {
  .planner-shell {
    --shell-frame-height: calc(100dvh - 28px);
  }
}

.setup-panel[hidden],
.results-panel[hidden] {
  display: none;
}

.planner-shell.setup-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.planner-shell.setup-collapsed .map-stage,
.planner-shell.setup-collapsed .results-panel {
  grid-column: 1 / -1;
}

.planner-shell.map-focus {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(600px, var(--shell-frame-height));
}

.planner-shell.map-focus .map-stage {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

/* IMPORTANT FOR BUG AVOIDANCE: collapsible side panels change only shell
   geometry; hidden panels are recoverable from the map HUD and do not delete
   route form or review state. */

.setup-panel,
.results-panel {
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  border-radius: 10px;
  padding: 16px;
  overflow: auto;
}

.setup-panel {
  max-height: var(--shell-frame-height);
}

.setup-panel {
  display: grid;
  align-content: start;
  gap: 15px;
}

.brand-row,
.results-header,
.section-heading,
.playback-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.speed-toggle-row {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.playback-speed-button {
  min-height: 30px;
  padding: 6px 10px;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.86);
}

.section-heading {
  align-items: center;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: var(--font-size-meta);
  font-weight: 780;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  line-height: 1.08;
}

h1 {
  font-size: var(--font-size-title);
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--font-size-section);
  letter-spacing: -0.025em;
}

.compute-badge,
.state-pill,
.model-chip-label {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--route);
  font-size: var(--font-size-small);
  font-weight: 800;
}

.route-form {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 6px;
}

label span {
  color: var(--muted);
  font-size: var(--font-size-meta);
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  padding: 8px 10px;
  background: var(--panel-strong);
  color: var(--ink);
  font-size: var(--font-size-control);
  line-height: 1.25;
}

textarea {
  min-height: 118px;
  resize: vertical;
  font-family: "SFMono-Regular", "Cascadia Code", monospace;
  line-height: 1.38;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.form-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.constraint-card,
.compute-panel,
.departure-window-card,
.forecast-model-card,
.wind-picker-card,
.route-builder-card,
.polar-editor-card,
.routing-options-card,
.route-matrix,
.departure-planner,
.weather-warning-panel,
.route-error-report-panel,
.route-review,
.polar-panel,
.leg-detail {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px;
  background: rgba(255, 255, 255, 0.58);
}

.setup-disclosure {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.setup-disclosure > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  cursor: pointer;
  list-style: none;
}

.setup-disclosure > summary::-webkit-details-marker {
  display: none;
}

.setup-disclosure > summary::after {
  grid-column: 2;
  grid-row: 1;
  content: "Open";
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--route-dark);
  font-size: var(--font-size-meta);
  font-weight: 850;
  white-space: nowrap;
}

.setup-disclosure[open] > summary::after {
  content: "Hide";
}

.setup-disclosure > summary strong,
.setup-disclosure > summary em {
  display: block;
  min-width: 0;
}

.setup-disclosure > summary > span {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.setup-disclosure > summary em {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--muted);
  font-size: var(--font-size-small);
  font-style: normal;
  font-weight: 750;
  line-height: 1.35;
}

.setup-disclosure > section {
  margin: 0 11px 11px;
  background: rgba(255, 255, 255, 0.66);
}

.constraint-card {
  display: grid;
  gap: 10px;
}

.compute-panel,
.departure-window-card,
.forecast-model-card,
.wind-picker-card,
.route-builder-card,
.polar-editor-card,
.routing-options-card {
  display: grid;
  gap: 10px;
}

.compute-panel {
  position: relative;
  overflow: hidden;
  --planning-progress: 0%;
  border-color: rgba(15, 124, 140, 0.22);
  background:
    radial-gradient(circle at var(--planning-progress) 0%, rgba(110, 231, 216, 0.24), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(235, 248, 248, 0.62));
}

.compute-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.5) 35%, transparent 62%);
  transform: translateX(-100%);
}

.compute-panel.planning {
  border-color: rgba(15, 124, 140, 0.42);
  box-shadow: 0 12px 30px rgba(15, 124, 140, 0.14);
}

.compute-panel.planning::before {
  opacity: 1;
  animation: compute-sheen 2.4s ease-in-out infinite;
}

.compute-panel.ready {
  border-color: rgba(14, 143, 98, 0.34);
}

.compute-panel.attention,
.compute-panel.cancelled {
  border-color: rgba(217, 155, 34, 0.38);
}

.compute-heading {
  position: relative;
  z-index: 1;
  align-items: center;
}

.compute-heading-copy {
  min-width: 0;
}

.compute-status-detail {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: 740;
}

.compute-activity {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 124, 140, 0.12), rgba(255, 255, 255, 0.42));
}

.compute-orbit,
.compute-sweep,
.compute-core {
  position: absolute;
  border-radius: 50%;
}

.compute-orbit {
  inset: 7px;
  border: 1px solid rgba(15, 124, 140, 0.2);
}

.compute-sweep {
  inset: 5px;
  border: 2px solid transparent;
  border-top-color: rgba(15, 124, 140, 0.78);
  border-right-color: rgba(110, 231, 216, 0.72);
  opacity: 0.5;
}

.compute-core {
  inset: 17px;
  background: var(--route);
  box-shadow: 0 0 18px rgba(15, 124, 140, 0.38);
}

.compute-panel.planning .compute-sweep {
  opacity: 1;
  animation: compute-spin 1.15s linear infinite;
}

.compute-panel.planning .compute-core {
  animation: compute-pulse 1.6s ease-in-out infinite;
}

.compute-panel.ready .compute-core {
  background: var(--sail);
}

.compute-panel.attention .compute-core,
.compute-panel.cancelled .compute-core {
  background: var(--warning);
}

.status-progress {
  position: relative;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(16, 37, 51, 0.1), rgba(16, 37, 51, 0.05));
}

.status-progress span {
  position: relative;
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f7c8c, #6ee7d8);
  box-shadow: 0 0 22px var(--route-glow);
  transition: width 360ms cubic-bezier(0.2, 0.85, 0.25, 1);
}

.status-progress span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.64), transparent);
  transform: translateX(-100%);
}

.compute-panel.planning .status-progress span::after {
  animation: progress-shimmer 1.45s ease-in-out infinite;
}

.compute-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: 1.35;
}

.compute-steps li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(48, 73, 86, 0.1);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.42);
}

.compute-steps li.active {
  color: var(--route-dark);
  font-weight: 850;
  border-color: rgba(15, 124, 140, 0.3);
  background: rgba(15, 124, 140, 0.1);
}

.compute-steps li.done {
  color: var(--route-dark);
}

.step-dot {
  position: relative;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(101, 119, 132, 0.3);
}

.compute-steps li.done .step-dot {
  background: var(--route);
}

.compute-steps li.active .step-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(15, 124, 140, 0.38);
  border-radius: 50%;
  animation: step-ping 1.3s ease-out infinite;
}

.route-prep-list {
  display: grid;
  gap: 6px;
}

.route-prep-list[hidden] {
  display: none;
}

.route-prep-item {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  border: 1px solid rgba(48, 73, 86, 0.12);
  border-radius: 8px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.62);
  font-size: var(--font-size-small);
  line-height: 1.3;
}

.route-prep-item strong,
.route-prep-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-prep-item.ready {
  border-color: rgba(14, 143, 98, 0.26);
  background: rgba(223, 248, 238, 0.72);
}

.route-prep-item.unavailable {
  border-color: rgba(217, 155, 34, 0.34);
  background: rgba(255, 246, 223, 0.72);
}

.readiness-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.readiness-chip {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.62);
}

.readiness-chip span,
.readiness-chip strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.readiness-chip span {
  color: var(--muted);
  font-size: var(--font-size-meta);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.readiness-chip strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: var(--font-size-control);
}

.readiness-chip.ready {
  border-color: rgba(15, 124, 140, 0.32);
  background: rgba(15, 124, 140, 0.12);
}

.readiness-chip.warning {
  border-color: rgba(176, 112, 30, 0.36);
  background: rgba(255, 210, 130, 0.18);
}

.readiness-chip.error {
  border-color: rgba(176, 56, 56, 0.34);
  background: rgba(255, 220, 216, 0.34);
}

.readiness-summary {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(15, 124, 140, 0.26);
  border-radius: 9px;
  padding: 9px 10px;
  background:
    linear-gradient(135deg, rgba(15, 124, 140, 0.14), rgba(255, 255, 255, 0.52)),
    rgba(255, 255, 255, 0.5);
}

.readiness-summary span {
  color: var(--route);
  font-size: var(--font-size-meta);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.readiness-summary strong {
  color: var(--ink);
  font-size: var(--font-size-control);
  line-height: 1.35;
}

.readiness-summary.checking {
  border-color: rgba(53, 111, 128, 0.24);
  background:
    linear-gradient(135deg, rgba(95, 145, 158, 0.14), rgba(255, 255, 255, 0.5)),
    rgba(255, 255, 255, 0.5);
}

.readiness-summary.warning {
  border-color: rgba(176, 112, 30, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 210, 130, 0.24), rgba(255, 255, 255, 0.56)),
    rgba(255, 255, 255, 0.54);
}

.readiness-summary.error {
  border-color: rgba(176, 56, 56, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 220, 216, 0.38), rgba(255, 255, 255, 0.58)),
    rgba(255, 255, 255, 0.56);
}

.mode-row,
.action-row,
.layer-toggle-row,
.speed-toggle-row,
.route-matrix-body,
.warning-list,
.departure-cards,
.poi-results,
.route-builder-actions,
.bottom-dock-tabs,
.bottom-route-preview,
.dock-departure-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mode-chip,
.secondary-action,
.map-toolbar button,
.file-action,
.layer-chip,
.play-button,
.playback-speed-button,
.bottom-dock-tab,
.poi-result-button,
.route-model-card,
.departure-card,
.route-preview-card,
.dock-departure-card {
  min-height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  font-size: var(--font-size-control);
  font-weight: 760;
  line-height: 1.16;
}

.mode-chip,
.layer-chip,
.play-button,
.playback-speed-button,
.bottom-dock-tab {
  white-space: nowrap;
}

.secondary-action.ghost {
  background: rgba(255, 255, 255, 0.38);
  color: var(--muted);
}

.mode-chip.active,
.layer-chip.active,
.play-button.active,
.playback-speed-button.active,
.bottom-dock-tab.active,
.route-model-card.active,
.departure-card.best,
.route-preview-card.active,
.dock-departure-card.best {
  border-color: rgba(15, 124, 140, 0.45);
  background: rgba(15, 124, 140, 0.12);
  color: var(--route-dark);
}

/* IMPORTANT FOR BUG AVOIDANCE: disabled route-file controls must look inactive
   so customers do not mistake unavailable route actions for broken buttons. */
button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.map-toolbar button:disabled,
.file-action:disabled,
.secondary-action:disabled {
  background: rgba(255, 255, 255, 0.45);
  color: var(--muted);
}

.primary-action {
  flex: 1 1 180px;
  min-height: 40px;
  border: 0;
  border-radius: var(--control-radius);
  padding: 9px 13px;
  background: var(--route);
  color: #fff;
  font-size: var(--font-size-control);
  font-weight: 820;
}

.primary-action.busy::before,
.secondary-action.busy::before,
.dock-plan-button.cancel::before {
  content: "";
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: currentColor;
  animation: compute-spin 0.8s linear infinite;
}

.secondary-action.busy::before {
  border-color: rgba(15, 124, 140, 0.22);
  border-top-color: currentColor;
}

/* IMPORTANT FOR BUG AVOIDANCE: cancel state must be visually distinct from
   normal route planning so long solves have an obvious escape hatch. */
.primary-action.cancel {
  background: #9d6520;
}

.secondary-action {
  flex: 0 0 auto;
}

.route-builder-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-preset-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.route-preset-button {
  min-width: 0;
  min-height: 54px;
  border: 1px solid rgba(15, 124, 140, 0.18);
  border-radius: 8px;
  padding: 9px 10px;
  background:
    linear-gradient(135deg, rgba(15, 124, 140, 0.1), rgba(255, 255, 255, 0.72)),
    rgba(255, 255, 255, 0.64);
  color: var(--ink);
  text-align: left;
}

.route-preset-button strong,
.route-preset-button span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-preset-button strong {
  color: var(--route-dark);
  font-size: var(--font-size-control);
}

.route-preset-button span {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: 720;
}

.route-builder-actions .secondary-action {
  width: 100%;
  min-width: 0;
  padding-inline: 10px;
}

.stream-status,
.summary-grid,
.condition-strip,
.review-cards,
.leg-detail-body,
.playback-metrics {
  display: grid;
  gap: 9px;
}

.stream-status {
  margin-top: 20px;
}

.stream-status div,
.summary-grid div,
.condition-strip div,
.review-card,
.detail-pill,
.playback-metrics div,
.draft-route-summary {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.7);
}

.stream-status span,
.summary-grid span,
.condition-strip span,
.review-card span,
.detail-pill span,
.route-model-card span,
.departure-card span,
.playback-metrics span,
.draft-route-summary span {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-meta);
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.poi-results {
  min-height: 38px;
}

.route-builder-actions .secondary-action {
  flex: 1 1 142px;
}

.polar-table-label {
  margin-top: 2px;
}

.input-hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: 1.35;
}

.input-hint.bad {
  color: var(--danger);
  font-weight: 800;
}

.polar-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.poi-result-button {
  flex: 1 1 135px;
  display: grid;
  gap: 2px;
  justify-items: start;
  text-align: left;
}

.poi-result-button.active {
  border-color: rgba(15, 124, 140, 0.48);
  background: rgba(15, 124, 140, 0.13);
}

.poi-result-button small {
  color: var(--muted);
  font-weight: 700;
}

.draft-route-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: rgba(15, 124, 140, 0.1);
}

.route-points-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-points-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(48, 73, 86, 0.12);
  border-radius: 8px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.64);
  font-size: var(--font-size-control);
  font-weight: 720;
}

.route-points-list em {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-small);
  font-style: normal;
  font-weight: 650;
}

.route-point-badge {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--route);
  color: #fff;
  font-size: var(--font-size-meta);
  font-weight: 850;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.8),
    0 4px 10px rgba(16, 37, 51, 0.16);
}

.route-point-badge.start {
  background: var(--sail);
}

.route-point-badge.finish {
  background: #c84f39;
}

.route-point-badge.waypoint {
  background: #0f7c8c;
}

.route-point-remove {
  border: 0;
  background: transparent;
  color: var(--danger);
  font-weight: 900;
}

.stream-status strong,
.summary-grid strong,
.condition-strip strong,
.review-card strong,
.detail-pill strong,
.route-model-card strong,
.departure-card strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.18;
}

.review-card p,
.detail-pill p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: var(--font-size-control);
  line-height: 1.35;
}

.route-delta-review .route-delta-strip {
  margin-top: 8px;
}

.route-delta-review .route-delta-chip {
  background: rgba(255, 255, 255, 0.66);
}

/* IMPORTANT FOR BUG AVOIDANCE: route-review deltas are passive comparison
   context from existing Rust stats, not a hidden route scoring surface. */

.warning-list {
  margin-top: 10px;
}

.route-error-report-panel {
  display: grid;
  gap: 10px;
  border-color: rgba(198, 74, 59, 0.26);
  background:
    linear-gradient(135deg, rgba(255, 236, 229, 0.8), rgba(255, 255, 255, 0.6)),
    rgba(255, 255, 255, 0.72);
}

.route-error-report-panel[hidden] {
  display: none;
}

.route-error-report-panel p {
  margin: 0;
  color: #6e342a;
  font-size: var(--font-size-small);
  font-weight: 760;
  line-height: 1.38;
}

.route-error-report-panel label {
  display: grid;
  gap: 5px;
}

.route-error-report-panel textarea {
  min-height: 72px;
  font-family: inherit;
}

.route-error-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.route-error-actions button {
  min-height: var(--control-height);
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  background: #b84a39;
  color: #fff;
  font-size: var(--font-size-control);
  font-weight: 900;
}

.route-error-actions button:disabled {
  cursor: progress;
  opacity: 0.62;
}

.route-error-actions span {
  color: #754035;
  font-size: var(--font-size-small);
  font-weight: 760;
  line-height: 1.35;
}

/* IMPORTANT FOR BUG AVOIDANCE: route error reports stay opt-in and visibly tied
   to the failed route setup, so customer support context is captured without
   making every validation warning look like a backend incident. */

.warning-chip {
  flex: 1 1 190px;
  border: 1px solid rgba(217, 155, 34, 0.34);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 246, 223, 0.75);
}

.warning-chip.good {
  border-color: rgba(14, 143, 98, 0.26);
  background: rgba(223, 248, 238, 0.74);
}

.warning-chip.bad {
  border-color: rgba(179, 72, 58, 0.34);
  background: rgba(255, 231, 225, 0.78);
}

.warning-chip strong,
.warning-chip span {
  display: block;
}

.warning-chip strong {
  font-size: var(--font-size-body);
}

.warning-chip span {
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: 1.35;
}

.warning-action {
  display: block;
  margin-top: 8px;
  border-top: 1px solid rgba(48, 73, 86, 0.12);
  padding-top: 8px;
  color: var(--route-dark);
  font-size: var(--font-size-small);
  font-style: normal;
  font-weight: 820;
  line-height: 1.35;
}

.route-matrix-body,
.departure-cards {
  margin-top: 10px;
}

.route-matrix-body {
  /* IMPORTANT FOR BUG AVOIDANCE: route choice cards carry units and warnings;
     keep them wide enough that Safari/wide-screen sidebars do not clip labels. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.route-spread-summary {
  margin-top: 10px;
  border: 1px solid rgba(48, 73, 86, 0.13);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: 780;
  line-height: 1.35;
}

.route-spread-summary > strong {
  display: block;
  color: inherit;
  font-size: var(--font-size-body);
  font-weight: 920;
}

.route-spread-copy {
  display: block;
  margin-top: 3px;
}

.route-spread-live {
  display: block;
  margin-top: 8px;
  border-top: 1px solid rgba(15, 124, 140, 0.18);
  padding-top: 7px;
  color: var(--route-dark);
  font-weight: 860;
}

/* IMPORTANT FOR BUG AVOIDANCE: the live note appears only for partial result
   sets, so route comparison summaries do not imply unfinished model solves are final. */

.route-insight-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.route-insight-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  max-width: 100%;
  border: 1px solid rgba(48, 73, 86, 0.12);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.62);
  color: inherit;
  white-space: nowrap;
}

.route-insight-chip em,
.route-insight-chip b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-small);
  font-style: normal;
}

.route-insight-chip em {
  opacity: 0.72;
  font-weight: 760;
}

.route-insight-chip b {
  font-weight: 920;
}

/* IMPORTANT FOR BUG AVOIDANCE: route insight chips summarize existing Rust
   route stats only; keep them visually explanatory, not extra route controls. */

.route-spread-summary.tight {
  border-color: rgba(14, 143, 98, 0.28);
  background: rgba(226, 248, 239, 0.68);
  color: #146247;
}

.route-spread-summary.spread {
  border-color: rgba(15, 124, 140, 0.3);
  background: rgba(15, 124, 140, 0.1);
  color: var(--route-dark);
}

.route-spread-summary.single {
  border-color: rgba(217, 155, 34, 0.3);
  background: rgba(255, 246, 223, 0.7);
  color: #8a6418;
}

.route-spread-summary.planning {
  border-color: rgba(15, 124, 140, 0.28);
  background:
    linear-gradient(135deg, rgba(110, 231, 216, 0.16), rgba(255, 255, 255, 0.66)),
    rgba(255, 255, 255, 0.7);
  color: var(--route-dark);
}

.route-visibility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  border: 1px solid rgba(48, 73, 86, 0.12);
  border-radius: 8px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: 820;
}

.route-visibility-bar[hidden] {
  display: none;
}

.route-visibility-bar.attention {
  border-color: rgba(217, 155, 34, 0.3);
  background: rgba(255, 246, 223, 0.74);
  color: #8a6418;
}

.route-visibility-bar button {
  min-height: 30px;
  border: 1px solid rgba(15, 124, 140, 0.22);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(15, 124, 140, 0.09);
  color: var(--route-dark);
  font-size: var(--font-size-small);
  font-weight: 850;
  white-space: nowrap;
}

/* IMPORTANT FOR BUG AVOIDANCE: keep route visibility recoverable at route-set
   level so the chart never silently draws a route that the card says is hidden. */

.route-matrix-body.planning-preview,
.warning-list.planning-preview,
.departure-cards.planning-preview,
.review-cards.planning-preview,
.leg-detail-body.planning-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 8px;
}

.planning-preview-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-height: 58px;
  border: 1px solid rgba(15, 124, 140, 0.18);
  border-radius: 9px;
  padding: 9px;
  background:
    radial-gradient(circle at 0% 0%, rgba(110, 231, 216, 0.18), transparent 56%),
    rgba(255, 255, 255, 0.7);
}

.planning-preview-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.5) 48%, transparent 72%);
  transform: translateX(-120%);
  animation: compute-sheen 2.4s ease-in-out infinite;
}

.planning-preview-pulse {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--route);
  box-shadow: 0 0 0 5px rgba(15, 124, 140, 0.12);
}

.planning-preview-pulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(15, 124, 140, 0.34);
  border-radius: inherit;
  animation: step-ping 1.6s ease-out infinite;
}

.planning-preview-card div {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.planning-preview-card strong,
.planning-preview-card em {
  display: block;
}

.planning-preview-card strong {
  font-size: var(--font-size-control);
}

.planning-preview-card em {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: 1.32;
}

.route-model-card,
.departure-card,
.departure-action-card,
.route-preview-card,
.dock-departure-card {
  position: relative;
  flex: 1 1 160px;
  display: grid;
  gap: 3px;
  align-content: start;
  text-align: left;
}

.route-model-card {
  cursor: default;
  width: 100%;
}

.departure-action-card {
  flex: 1 1 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid rgba(15, 124, 140, 0.24);
  background:
    radial-gradient(circle at 0% 0%, rgba(15, 124, 140, 0.14), transparent 58%),
    rgba(255, 255, 255, 0.66);
}

.departure-action-card span,
.departure-action-card strong,
.departure-action-card em {
  display: block;
}

.departure-action-card span {
  color: var(--muted);
  font-size: var(--font-size-meta);
  font-weight: 850;
  text-transform: uppercase;
}

.departure-action-card strong {
  margin-top: 4px;
  font-size: var(--font-size-body);
}

.departure-action-card em {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: 1.35;
}

.route-model-card.muted,
.route-preview-card.muted {
  opacity: 0.55;
}

.route-card-top,
.route-visibility {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.route-card-title {
  min-width: 0;
}

.route-card-title > span,
.route-card-title > small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-map-status,
.route-preview-map-status {
  color: var(--muted);
  font-size: var(--font-size-meta);
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
}

.route-map-status.visible,
.route-preview-map-status.visible {
  color: var(--sail);
}

.route-map-status.hidden,
.route-preview-map-status.hidden {
  color: var(--warning);
}

/* IMPORTANT FOR BUG AVOIDANCE: route cards show whether the reviewed route is
   drawn on the map, avoiding a hidden-selected-route mismatch during comparison. */

.route-card-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 3px;
  margin-top: 2px;
}

.route-card-headline strong {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.route-card-headline span {
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: 800;
  text-transform: none;
}

.route-delta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.route-delta-strip[hidden] {
  display: none;
}

.route-delta-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  max-width: 100%;
  border: 1px solid rgba(48, 73, 86, 0.12);
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--muted);
  white-space: nowrap;
}

.route-delta-chip.best {
  border-color: rgba(14, 143, 98, 0.24);
  background: rgba(226, 248, 239, 0.66);
  color: #146247;
}

.route-delta-chip em,
.route-delta-chip b {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-meta);
  font-style: normal;
  line-height: 1.1;
}

.route-delta-chip em {
  opacity: 0.72;
  font-weight: 780;
}

.route-delta-chip b {
  font-weight: 920;
}

/* IMPORTANT FOR BUG AVOIDANCE: per-card deltas compare existing route choices
   and must remain passive labels, not a second route-ranking control. */

.route-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.route-metric-grid div {
  min-width: 0;
  border: 1px solid rgba(48, 73, 86, 0.11);
  border-radius: 7px;
  padding: 6px 7px;
  background: rgba(255, 255, 255, 0.54);
}

.route-metric-grid .route-metric-managed-passage {
  grid-column: 1 / -1;
  border-color: rgba(255, 198, 87, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 198, 87, 0.2), rgba(255, 255, 255, 0.62));
}

.route-metric-grid span,
.route-metric-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* IMPORTANT FOR BUG AVOIDANCE: named canal/channel cells span the card width so
   operator cautions remain readable instead of truncating into generic warnings. */

.route-metric-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.route-metric-grid strong {
  margin-top: 3px;
  font-size: var(--font-size-control);
}

.route-split-bar {
  grid-column: 1 / -1;
  min-height: 8px;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      var(--sail) 0 var(--sail-share, 0%),
      var(--motor) var(--sail-share, 0%) 100%
    );
}

.route-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.route-badges[hidden] {
  display: none;
}

.route-badge,
.route-preview-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(48, 73, 86, 0.13);
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font-size: var(--font-size-meta);
  font-weight: 880;
  line-height: 1.1;
}

.route-badge.fast,
.route-preview-badge.fast {
  border-color: rgba(15, 124, 140, 0.3);
  background: rgba(15, 124, 140, 0.12);
  color: var(--route-dark);
}

.route-badge.sail,
.route-preview-badge.sail {
  border-color: rgba(14, 143, 98, 0.3);
  background: rgba(226, 248, 239, 0.72);
  color: #146247;
}

.route-badge.motor,
.route-preview-badge.motor {
  border-color: rgba(214, 111, 45, 0.34);
  background: rgba(255, 238, 226, 0.76);
  color: #8f4b1c;
}

.route-badge.calm,
.route-preview-badge.calm {
  border-color: rgba(82, 159, 197, 0.34);
  background: rgba(226, 246, 252, 0.78);
  color: #27657d;
}

.route-visibility {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.route-visibility input {
  width: auto;
  min-height: auto;
  accent-color: var(--route);
}

.route-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.route-preview-action {
  justify-self: start;
  min-height: 32px;
  border: 1px solid rgba(15, 124, 140, 0.22);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(15, 124, 140, 0.1);
  color: var(--route-dark);
  font-size: var(--font-size-small);
  font-weight: 850;
}

.route-preview-action.subtle {
  border-color: rgba(48, 73, 86, 0.14);
  background: rgba(255, 255, 255, 0.64);
  color: var(--muted);
}

.route-preview-action:focus-visible,
.route-visibility input:focus-visible,
.route-preview-card:focus-visible,
.departure-card:focus-visible,
.dock-departure-card:focus-visible,
.departure-action-card .secondary-action:focus-visible {
  outline: 3px solid rgba(15, 124, 140, 0.34);
  outline-offset: 2px;
}

/* IMPORTANT FOR BUG AVOIDANCE: route alternatives need visible keyboard focus
   because the same card state controls selected review and map visibility. */
/* IMPORTANT FOR BUG AVOIDANCE: departure option keyboard focus must be visible
   because these cards recompute routes and update the active departure time. */

.route-data-quality {
  /* IMPORTANT FOR BUG AVOIDANCE: forecast-window copy can include long local/UTC
     timestamps; wrap it inside route cards instead of widening customer panels. */
  display: block;
  border: 1px solid rgba(15, 124, 140, 0.16);
  border-radius: 8px;
  padding: 6px 8px;
  background: rgba(242, 251, 250, 0.76);
  color: var(--route-dark);
  font-size: var(--font-size-small);
  font-weight: 820;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.route-data-quality.warn {
  border-color: rgba(245, 178, 68, 0.28);
  background: rgba(255, 247, 229, 0.84);
  color: var(--warning);
}

.route-data-quality.good {
  color: #146247;
}

.route-card-caution {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(217, 155, 34, 0.24);
  border-radius: 10px;
  padding: 8px 9px;
  background: rgba(255, 248, 231, 0.72);
  color: #6f4c07;
  font-size: var(--font-size-small);
  line-height: 1.32;
}

.route-card-caution.bad {
  border-color: rgba(198, 74, 59, 0.28);
  background: rgba(255, 239, 235, 0.74);
  color: #7e291d;
}

.route-card-caution strong {
  color: inherit;
  font-size: var(--font-size-small);
  font-weight: 900;
}

.route-card-caution span,
.route-card-caution em {
  color: inherit;
  font-size: var(--font-size-small);
  font-style: normal;
}

.route-card-caution-action {
  font-weight: 850;
  opacity: 0.86;
}

/* IMPORTANT FOR BUG AVOIDANCE: route-card cautions are explanatory customer
   panels, not one-word orange debug warnings; keep the next action visible. */

.route-model-basis {
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: 850;
  line-height: 1.35;
}

.route-model-basis.good {
  color: var(--sail);
}

.route-model-basis.warn {
  color: var(--warning);
}

.route-model-card::before,
.route-preview-card::before {
  content: "";
  position: absolute;
  inset: 9px auto 9px 8px;
  width: 4px;
  border-radius: 999px;
  background: var(--model-color, var(--route));
}

.route-model-card,
.route-preview-card {
  padding-left: 17px;
}

.route-model-card em,
.departure-card em,
.route-preview-card em,
.dock-departure-card em,
.dock-stat em {
  color: var(--muted);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: 1.35;
}

.forecast-model-list {
  display: grid;
  gap: 8px;
}

.forecast-model-chip {
  border: 1px solid rgba(48, 73, 86, 0.14);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.66);
}

.forecast-model-chip.fresh {
  border-color: rgba(14, 143, 98, 0.28);
  background: rgba(226, 248, 239, 0.7);
}

/* IMPORTANT FOR BUG AVOIDANCE: standby forecast models remain visible but muted so
   route-ready guidance and catalog coverage cannot be confused. */
.forecast-model-chip.standby {
  border-color: rgba(95, 111, 117, 0.2);
  background: rgba(240, 244, 244, 0.72);
}

.forecast-model-chip strong,
.forecast-model-chip span,
.forecast-model-chip p {
  display: block;
}

.forecast-model-chip strong {
  font-size: var(--font-size-body);
}

.forecast-model-chip span {
  margin-top: 3px;
  color: var(--route-dark);
  font-size: var(--font-size-small);
  font-weight: 850;
}

.forecast-model-chip p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: 1.35;
}

.forecast-route-status {
  display: inline-block;
  margin-top: 8px;
  border: 1px solid rgba(48, 73, 86, 0.14);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  font-size: var(--font-size-meta);
  font-weight: 850;
  line-height: 1.2;
}

.forecast-route-status.ready {
  border-color: rgba(14, 143, 98, 0.3);
  background: rgba(226, 248, 239, 0.72);
  color: #146247;
}

.forecast-route-status.checking {
  border-color: rgba(15, 124, 140, 0.3);
  background: rgba(15, 124, 140, 0.1);
  color: var(--route-dark);
}

.forecast-route-status.unavailable {
  border-color: rgba(217, 155, 34, 0.34);
  background: rgba(255, 246, 223, 0.76);
  color: #8a6418;
}

.wind-picker-toolbar,
.wind-picker-legend,
.wind-picker-table-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wind-picker-toolbar {
  border: 1px solid rgba(48, 73, 86, 0.14);
  border-radius: 9px;
  padding: 9px;
  background:
    radial-gradient(circle at 0% 0%, rgba(15, 124, 140, 0.14), transparent 50%),
    rgba(255, 255, 255, 0.68);
}

.wind-picker-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.wind-picker-insights article {
  min-width: 0;
  border: 1px solid rgba(15, 124, 140, 0.15);
  border-radius: 10px;
  padding: 9px;
  background:
    linear-gradient(160deg, rgba(14, 143, 98, 0.1), rgba(255, 255, 255, 0.72)),
    rgba(255, 255, 255, 0.66);
}

.wind-picker-insights span,
.wind-picker-insights em {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-size-meta);
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.wind-picker-insights strong {
  display: block;
  margin: 3px 0;
  overflow: hidden;
  color: var(--route-dark);
  font-size: var(--font-size-body);
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wind-picker-insights em {
  text-transform: none;
}

/* IMPORTANT FOR BUG AVOIDANCE: weather-picker insight cards surface sampled
   current/+24h wind and wave spread before the dense table so customers do not
   have to infer whether model data actually loaded. */

.wind-picker-toolbar span,
.wind-picker-table-row span {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-meta);
  font-weight: 850;
  text-transform: uppercase;
}

.wind-picker-toolbar strong,
.wind-picker-table-row strong {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-control);
}

.wind-picker-canvas {
  width: 100%;
  min-height: 180px;
  border: 1px solid rgba(48, 73, 86, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(7, 95, 109, 0.08), rgba(255, 255, 255, 0.86)),
    repeating-linear-gradient(90deg, rgba(48, 73, 86, 0.08) 0 1px, transparent 1px 64px);
}

.wind-picker-focus {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(48, 73, 86, 0.12);
  border-radius: 10px;
  padding: 9px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(226, 248, 239, 0.46)),
    rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: 1.32;
}

.wind-picker-focus > strong {
  color: var(--route-dark);
  font-size: var(--font-size-control);
  font-weight: 920;
}

.wind-picker-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
}

.wind-picker-focus-grid article {
  min-width: 0;
  border-left: 4px solid var(--model-color, var(--route));
  border-radius: 8px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.72);
}

.wind-picker-focus-grid span,
.wind-picker-focus-grid em {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-size-meta);
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wind-picker-focus-grid strong {
  display: block;
  overflow: hidden;
  color: var(--route-dark);
  font-size: var(--font-size-control);
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* IMPORTANT FOR BUG AVOIDANCE: the picker focus card makes the canvas
   inspectable without requiring users to decode overlapping wind/wave lines. */

.wind-picker-legend {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.wind-picker-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--font-size-meta);
  font-weight: 850;
}

.wind-picker-legend i {
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: var(--model-color, var(--route));
}

.wind-picker-legend .wind-picker-line-key {
  border: 1px solid rgba(48, 73, 86, 0.1);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--route-dark);
}

.wind-picker-legend .wind-picker-wave-key {
  height: 0;
  border-top: 3px dashed var(--route);
  background: transparent;
}

.wind-picker-table {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: 1.35;
}

.wind-picker-table-row {
  align-items: flex-start;
  border: 1px solid rgba(48, 73, 86, 0.12);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.64);
}

.wind-picker-table-row em {
  color: var(--route-dark);
  font-style: normal;
  font-weight: 850;
}

.map-stage {
  position: relative;
  min-width: 0;
  /* IMPORTANT FOR BUG AVOIDANCE: let the grid own wide-screen height; Safari
     can oversize map frames when the map item also imposes raw 100vh sizing. */
  min-height: clamp(560px, var(--shell-frame-height), 980px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 10px;
  box-shadow: var(--shadow);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(145deg, var(--water), var(--deep-water));
  background-size:
    72px 72px,
    72px 72px,
    auto;
}

.map {
  position: absolute;
  inset: 0;
}

.map-stage .maplibregl-map,
.map-stage .maplibregl-canvas-container,
.map-stage .maplibregl-canvas {
  width: 100%;
  height: 100%;
}

.wind-canvas,
.wave-overlay,
.fallback-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wind-canvas {
  z-index: 2;
  mix-blend-mode: screen;
}

.wave-overlay {
  z-index: 3;
}

.fallback-route {
  z-index: 4;
}

.fallback-route path {
  fill: none;
  stroke: var(--route);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fallback-route .route-leg-segment {
  stroke-width: 9;
  opacity: 0.9;
}

.fallback-route .route-leg-segment.sail {
  stroke: var(--sail);
}

.fallback-route .route-leg-segment.motor {
  stroke: var(--motor);
  stroke-dasharray: 12 10;
}

.fallback-route-line {
  cursor: crosshair;
  pointer-events: stroke;
}

/* IMPORTANT FOR BUG AVOIDANCE: fallback SVG route lines stay clickable for
   route inspection when MapLibre/WebGL is unavailable. */

.fallback-route circle {
  fill: #fff;
  stroke: var(--route);
  stroke-width: 3;
}

.fallback-route-draft {
  fill: none;
  stroke: rgba(16, 37, 51, 0.72);
  stroke-width: 2.5;
  stroke-dasharray: 8 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.82));
  pointer-events: none;
}

.fallback-route-progress {
  fill: none;
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fallback-route-progress.frontier {
  stroke: rgba(94, 215, 232, 0.68);
  stroke-width: 3;
  stroke-dasharray: 6 7;
}

.fallback-route-progress.partial {
  stroke: #ffb64d;
  stroke-width: 5;
  filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0.94)) drop-shadow(0 5px 12px rgba(16, 37, 51, 0.22));
}

.fallback-route-progress.head {
  overflow: visible;
}

.fallback-route-progress-head-halo {
  fill: rgba(255, 182, 77, 0.24);
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.4;
}

.fallback-route-progress-head-core {
  fill: #ffb64d;
  stroke: #fff9e8;
  stroke-width: 1.5;
  filter: drop-shadow(0 4px 8px rgba(16, 37, 51, 0.28));
}

/* IMPORTANT FOR BUG AVOIDANCE: live fallback progress is visually distinct
   from final route geometry so partial Rust search output is never mistaken
   for a selectable computed route. */

.fallback-route-point-halo {
  fill: rgba(15, 124, 140, 0.2);
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.4;
}

.fallback-route-point-ring {
  fill: #fff;
  stroke: var(--route);
  stroke-width: 3;
  filter: drop-shadow(0 3px 8px rgba(16, 37, 51, 0.28));
}

.fallback-route-point-core {
  fill: var(--route);
  stroke: #d6f3f4;
  stroke-width: 1.1;
}

.fallback-route-point.start .fallback-route-point-halo {
  fill: rgba(14, 143, 98, 0.23);
}

.fallback-route-point.start .fallback-route-point-ring {
  stroke: var(--sail);
}

.fallback-route-point.start .fallback-route-point-core {
  fill: var(--sail);
  stroke: #fff;
}

.fallback-route-point.finish .fallback-route-point-halo {
  fill: rgba(200, 79, 57, 0.24);
}

.fallback-route-point.finish .fallback-route-point-ring {
  stroke: #c84f39;
}

.fallback-route-point.finish .fallback-route-point-core {
  fill: #c84f39;
  stroke: #fff;
}

.fallback-route-point-code {
  fill: #fff;
  stroke: none;
  font-size: 11px;
  font-weight: 950;
  pointer-events: none;
}

.fallback-route-point-label {
  fill: #102533;
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 5px;
  paint-order: stroke;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.01em;
  pointer-events: none;
}

/* IMPORTANT FOR BUG AVOIDANCE: draft start/via/finish markers stay as visual
   annotations only; route geometry and safety remain owned by the Rust result. */

.wave-overlay .wave-vector,
.wave-overlay .wind-vector {
  stroke-linecap: round;
  filter: drop-shadow(0 2px 4px rgba(16, 37, 51, 0.28));
}

.wave-overlay .wind-vector {
  opacity: 0.9;
}

.wave-overlay .wave-vector {
  opacity: 0.78;
}

.wave-overlay .vector-arrowhead {
  stroke: rgba(255, 255, 255, 0.86);
  stroke-linejoin: round;
  stroke-width: 0.8px;
  filter: drop-shadow(0 2px 3px rgba(16, 37, 51, 0.34));
}

/* IMPORTANT FOR BUG AVOIDANCE: route-weather arrows show the sampled movement
   direction on the selected forecast frame; they are not steering commands. */

.wave-overlay .wave-label,
.wave-overlay .wind-label {
  fill: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 900;
  paint-order: stroke;
  stroke: rgba(16, 37, 51, 0.72);
  stroke-width: 4px;
  letter-spacing: 0.01em;
}

.wave-overlay .wind-label {
  fill: #eefcff;
}

.wave-overlay .wave-label {
  fill: #eaf6ff;
}

.map-toolbar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 7;
}

.map-toolbar button {
  min-width: 60px;
}

.map-view-controls {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: min(390px, calc(100% - 28px));
  transform: translateX(-50%);
  pointer-events: auto;
}

.map-view-controls button {
  min-height: 32px;
  min-width: 92px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(15, 39, 51, 0.7);
  color: #fff;
  box-shadow: 0 10px 22px rgba(11, 39, 51, 0.18);
  backdrop-filter: blur(14px);
  font-size: var(--font-size-small);
  font-weight: 850;
  white-space: nowrap;
}

.map-view-controls button:hover,
.map-view-controls button:focus-visible {
  border-color: rgba(110, 231, 216, 0.7);
  background: rgba(9, 82, 96, 0.82);
}

.file-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.map-legend {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: min(470px, calc(50% - 22px));
}

.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(15, 39, 51, 0.68);
  color: #fff;
  font-size: var(--font-size-small);
  font-weight: 800;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}

.map-legend i {
  display: inline-block;
  width: 24px;
  height: 4px;
  border-radius: 999px;
}

.legend-sail {
  background: var(--sail);
}

.legend-motor {
  background:
    repeating-linear-gradient(
      90deg,
      var(--motor) 0,
      var(--motor) 8px,
      transparent 8px,
      transparent 13px
    );
}

.legend-model {
  background: rgba(255, 255, 255, 0.65);
}

/* IMPORTANT FOR BUG AVOIDANCE: the inspect cue must look like a read-only route
   target, not another sailing/motor mode marker in the legend. */
.legend-inspect {
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 2px, transparent 2.5px),
    linear-gradient(90deg, transparent 0 9px, #ffffff 9px 15px, transparent 15px 24px);
  box-shadow: 0 0 0 1px rgba(33, 213, 188, 0.75);
}

.map-hint,
.map-planning-card,
.chart-pick-card {
  position: absolute;
  z-index: 8;
  border: 1px solid rgba(255, 255, 255, 0.46);
  background: rgba(15, 39, 51, 0.72);
  color: #fff;
  box-shadow: 0 14px 30px rgba(11, 39, 51, 0.22);
  backdrop-filter: blur(14px);
}

.map-hint {
  top: 58px;
  left: 14px;
  max-width: calc(100% - 28px);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: var(--font-size-small);
  font-weight: 720;
  text-align: center;
  white-space: nowrap;
}

.map-planning-card {
  /* IMPORTANT FOR BUG AVOIDANCE: this HUD is chart-context feedback for the
     existing route solve, not a replacement for setup-panel planning controls. */
  top: 58px;
  right: 14px;
  width: min(380px, calc(100% - 28px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-radius: 13px;
  padding: 10px;
  background:
    radial-gradient(circle at 18% 12%, rgba(110, 231, 216, 0.28), transparent 32%),
    rgba(15, 39, 51, 0.76);
}

.map-planning-card[hidden] {
  display: none;
}

.map-planning-orb {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.map-planning-orb::before,
.map-planning-orb span {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.map-planning-orb::before {
  inset: 4px;
  border: 2px solid transparent;
  border-top-color: rgba(110, 231, 216, 0.9);
  border-right-color: rgba(255, 255, 255, 0.62);
  animation: compute-spin 1s linear infinite;
}

.map-planning-orb span {
  inset: 14px;
  background: #6ee7d8;
  box-shadow: 0 0 16px rgba(110, 231, 216, 0.56);
  animation: compute-pulse 1.5s ease-in-out infinite;
}

.map-planning-copy {
  min-width: 0;
}

.map-planning-copy .eyebrow {
  color: rgba(255, 255, 255, 0.62);
}

.map-planning-copy strong,
.map-planning-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-planning-copy strong {
  color: #fff;
  font-size: var(--font-size-body);
}

.map-planning-copy span {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-size-small);
  font-weight: 760;
}

.map-planning-progress {
  height: 6px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.map-planning-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6ee7d8, #fff2a6);
  box-shadow: 0 0 14px rgba(110, 231, 216, 0.45);
  transition: width 360ms cubic-bezier(0.2, 0.85, 0.25, 1);
}

.map-planning-live-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
}

.map-planning-live-search[hidden] {
  display: none;
}

.map-planning-live-search span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  overflow: visible;
  white-space: nowrap;
}

.map-planning-live-search i {
  width: 18px;
  height: 3px;
  border-radius: 999px;
}

.map-planning-live-search .live-search-partial {
  background: #ffb64d;
  box-shadow: 0 0 8px rgba(255, 182, 77, 0.48);
}

.map-planning-live-search .live-search-front {
  background: repeating-linear-gradient(
    90deg,
    rgba(94, 215, 232, 0.95) 0 5px,
    transparent 5px 8px
  );
}

.map-planning-live-search em {
  min-width: 0;
  color: rgba(255, 255, 255, 0.62);
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* IMPORTANT FOR BUG AVOIDANCE: the live-search legend explains transient
   Rust progress geometry without turning partial route fronts into route choices. */

.map-planning-card button {
  min-height: 32px;
  border: 1px solid rgba(255, 198, 87, 0.44);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 198, 87, 0.18);
  color: #fff;
  font-size: var(--font-size-small);
  font-weight: 860;
  white-space: nowrap;
}

.chart-pick-card {
  top: 66px;
  left: 16px;
  width: min(390px, calc(100% - 32px));
  display: grid;
  gap: 10px;
  border-radius: 10px;
  padding: 11px;
}

.chart-pick-card.building {
  /* IMPORTANT FOR BUG AVOIDANCE: active map drawing needs a distinct HUD state
     so crews know clicks are extending the draft, not just selecting a point. */
  border-color: rgba(255, 198, 87, 0.7);
  background:
    linear-gradient(135deg, rgba(28, 59, 66, 0.88), rgba(16, 43, 58, 0.78)),
    rgba(15, 39, 51, 0.72);
}

.chart-pick-card[hidden],
.chart-pick-marker[hidden],
.route-inspection-card[hidden],
.route-inspection-marker[hidden] {
  display: none;
}

.chart-pick-card .eyebrow {
  color: rgba(255, 255, 255, 0.68);
}

.chart-pick-card strong {
  display: block;
  font-size: var(--font-size-body);
}

.chart-pick-card span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-size-small);
  font-weight: 720;
}

.chart-pick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 7px;
}

.chart-pick-actions button {
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: var(--font-size-small);
  font-weight: 820;
}

.chart-pick-actions button[hidden] {
  display: none;
}

.chart-pick-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.chart-pick-actions .ghost {
  color: rgba(255, 255, 255, 0.72);
}

.chart-pick-marker {
  position: absolute;
  z-index: 8;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -100%);
  pointer-events: none;
}

.chart-pick-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 18px;
  height: 18px;
  transform: translateX(-50%) rotate(45deg);
  border: 3px solid #fff;
  border-radius: 14px 14px 14px 2px;
  background: var(--route);
  box-shadow: 0 8px 20px rgba(16, 37, 51, 0.35);
}

.chart-pick-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 22px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(16, 37, 51, 0.22);
}

.route-inspection-card {
  position: absolute;
  z-index: 9;
  top: 66px;
  right: 16px;
  width: min(420px, calc(100% - 32px));
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 12px;
  padding: 12px;
  background:
    radial-gradient(circle at 100% 0%, rgba(110, 231, 216, 0.2), transparent 42%),
    rgba(15, 39, 51, 0.8);
  color: #fff;
  box-shadow: 0 18px 36px rgba(11, 39, 51, 0.26);
  backdrop-filter: blur(16px);
}

.route-inspection-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.route-inspection-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.route-inspection-head .eyebrow {
  color: rgba(255, 255, 255, 0.68);
}

.route-inspection-head strong,
.route-inspection-head span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-inspection-head strong {
  font-size: var(--font-size-body);
}

.route-inspection-head span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-size-small);
  font-weight: 760;
}

.route-inspection-head button {
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: var(--font-size-small);
  font-weight: 850;
}

.route-inspection-head button:disabled {
  color: rgba(255, 255, 255, 0.54);
  cursor: not-allowed;
  opacity: 0.72;
}

.route-inspection-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.route-inspection-stats article {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.route-inspection-stats span,
.route-inspection-stats em {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--font-size-meta);
  font-style: normal;
  font-weight: 820;
}

.route-inspection-stats strong {
  display: block;
  margin: 3px 0;
  color: #fff;
  font-size: var(--font-size-control);
  font-weight: 920;
}

.route-inspection-marker {
  position: absolute;
  z-index: 9;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.route-inspection-marker::before,
.route-inspection-marker::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.route-inspection-marker::before {
  border: 3px solid #fff;
  background: rgba(15, 124, 140, 0.96);
  box-shadow: 0 10px 24px rgba(16, 37, 51, 0.32);
}

.route-inspection-marker::after {
  inset: -8px;
  border: 1px solid rgba(110, 231, 216, 0.55);
}

/* IMPORTANT FOR BUG AVOIDANCE: the route inspection HUD is distinct from the
   chart-pick HUD so route review clicks cannot be confused with waypoint edits. */

.weather-playback {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 14px;
  z-index: 7;
  display: grid;
  gap: 8px;
  width: min(1120px, calc(100% - 28px));
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 10px;
  padding: 10px;
  background: rgba(15, 39, 51, 0.72);
  color: #fff;
  box-shadow: 0 18px 34px rgba(11, 39, 51, 0.25);
  backdrop-filter: blur(16px);
  max-height: min(40vh, 350px);
  overflow: auto;
  font-size: var(--font-size-control);
}

/* IMPORTANT FOR BUG AVOIDANCE: the playback dock is centered and bounded so it
   does not collide with side HUDs on wide Safari windows or hide the full chart. */

.weather-playback .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.bottom-dock-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.bottom-dock-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.bottom-dock-tab {
  flex: 1 1 86px;
  min-height: 30px;
  border-radius: 999px;
  border-color: transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.74);
  letter-spacing: 0.01em;
}

.bottom-dock-tab.active {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.88);
  color: #11313d;
}

.bottom-dock-toggle {
  min-height: 34px;
  min-width: 102px;
  padding: 0 12px;
  border-color: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: var(--font-size-small);
  font-weight: 850;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.bottom-dock-toggle:hover,
.bottom-dock-toggle:focus-visible {
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.22);
}

.weather-playback.compact {
  max-height: min(22vh, 176px);
}

/* IMPORTANT FOR BUG AVOIDANCE: compact mode only hides dense review controls;
   keep route tabs and the selected passage brief visible so chart review keeps context. */
.weather-playback.compact .playback-row,
.weather-playback.compact .forecast-range,
.weather-playback.compact .layer-toggle-row,
.weather-playback.compact .bottom-route-preview,
.weather-playback.compact .bottom-weather-content,
.weather-playback.compact .playback-metrics {
  display: none;
}

.dock-passage-brief {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  padding: 9px;
  background:
    radial-gradient(circle at 6% 12%, rgba(119, 235, 210, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.1);
}

.dock-passage-brief.empty {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-size-control);
  font-weight: 760;
}

.dock-plan-prompt {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.dock-plan-copy,
.dock-plan-actions {
  min-width: 0;
}

.dock-plan-copy span,
.dock-plan-copy strong,
.dock-plan-copy em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock-plan-copy span {
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--font-size-meta);
  font-weight: 850;
  text-transform: uppercase;
}

.dock-plan-copy strong {
  margin-top: 3px;
  color: #fff;
  font-size: var(--font-size-body);
  line-height: 1.18;
}

.dock-plan-copy em {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: 1.32;
  white-space: nowrap;
}

.dock-plan-actions {
  /* IMPORTANT FOR BUG AVOIDANCE: keep map-side planning actions compact and
     explicit so mobile users are not forced below the chart to start planning. */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.dock-plan-button {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: var(--font-size-small);
  font-weight: 850;
  white-space: nowrap;
}

.dock-plan-button.primary {
  border-color: rgba(119, 235, 210, 0.56);
  background: rgba(119, 235, 210, 0.18);
}

.dock-plan-button.cancel {
  border-color: rgba(255, 198, 87, 0.46);
  background: rgba(255, 198, 87, 0.16);
}

.dock-plan-button:disabled {
  color: rgba(255, 255, 255, 0.68);
}

.dock-brief-title,
.dock-brief-metrics {
  min-width: 0;
}

.dock-brief-title span,
.dock-brief-title strong,
.dock-brief-title em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock-brief-title span,
.dock-brief-metrics small {
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--font-size-meta);
  font-weight: 850;
  text-transform: uppercase;
}

.dock-brief-title strong {
  margin-top: 3px;
  color: #fff;
  font-size: var(--font-size-body);
  line-height: 1.18;
}

.dock-brief-title em {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: 1.32;
}

.dock-brief-title .dock-data-quality.good {
  color: rgba(166, 255, 222, 0.92);
}

.dock-brief-title .dock-data-quality.warn {
  color: rgba(255, 219, 142, 0.95);
}

.dock-brief-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.dock-brief-metrics span {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 6px 7px;
  background: rgba(255, 255, 255, 0.1);
}

.dock-brief-metrics .dock-managed-passage {
  grid-column: 1 / -1;
  border-color: rgba(255, 219, 142, 0.4);
  background: rgba(255, 198, 87, 0.16);
}

.dock-brief-metrics b {
  overflow: hidden;
  color: #fff;
  font-size: var(--font-size-control);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dock-passage-brief .route-delta-strip {
  grid-column: 1 / -1;
  gap: 5px;
  margin-top: 0;
}

.dock-passage-brief .route-delta-chip {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.82);
}

.dock-passage-brief .route-delta-chip.best {
  border-color: rgba(140, 255, 213, 0.28);
  background: rgba(140, 255, 213, 0.14);
  color: rgba(214, 255, 239, 0.96);
}

/* IMPORTANT FOR BUG AVOIDANCE: selected-dock deltas mirror route cards as
   passive review copy, not a new ranking or compute result. */

.dock-brief-split {
  grid-column: 1 / -1;
  min-height: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--sail) 0 var(--sail-share, 0%),
      var(--motor) var(--sail-share, 0%) 100%
    );
}

.forecast-range {
  min-height: 26px;
  padding: 0;
  accent-color: #64d2e4;
}

.layer-toggle-row {
  align-items: center;
}

.weather-playback .layer-chip {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.86);
}

.weather-playback .layer-chip.active {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.9);
  color: #11313d;
}

.model-chip-label {
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.bottom-route-preview {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  color: rgba(255, 255, 255, 0.78);
  scrollbar-width: thin;
}

.bottom-route-preview.planning-preview,
.bottom-weather-content.planning-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 8px;
  overflow: visible;
}

.weather-playback .planning-preview-card {
  min-height: 62px;
  border-color: rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(110, 231, 216, 0.22), transparent 58%),
    rgba(255, 255, 255, 0.12);
  color: #fff;
}

.weather-playback .planning-preview-card::after {
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.16) 48%, transparent 72%);
}

.weather-playback .planning-preview-card em {
  color: rgba(255, 255, 255, 0.7);
}

.weather-playback .planning-preview-pulse {
  background: #6ee7d8;
  box-shadow: 0 0 0 5px rgba(110, 231, 216, 0.14);
}

.route-preview-card {
  flex: 0 0 min(248px, 74vw);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.route-preview-visibility-note {
  flex: 0 0 min(220px, 68vw);
  display: grid;
  gap: 7px;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 9px;
  padding: 9px;
  background: rgba(255, 246, 223, 0.14);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--font-size-small);
  font-weight: 850;
}

.route-preview-visibility-note button {
  justify-self: start;
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.86);
  color: #102533;
  font-size: var(--font-size-small);
  font-weight: 900;
}

.route-preview-card.active {
  border-color: rgba(255, 255, 255, 0.56);
  background: rgba(255, 255, 255, 0.9);
  color: #102533;
}

.route-preview-card::before {
  background: var(--model-color, #64d2e4);
}

.route-preview-card span,
.route-preview-map-status,
.dock-departure-card span,
.dock-stat span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--font-size-meta);
  font-weight: 850;
  text-transform: uppercase;
}

.route-preview-card em,
.dock-departure-card em,
.dock-stat em {
  color: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.route-preview-card.active span,
.route-preview-card.active .route-preview-map-status,
.route-preview-card.active em {
  color: var(--muted);
}

.route-preview-card .route-preview-map-status.visible {
  color: rgba(140, 255, 213, 0.9);
}

.route-preview-card.active .route-preview-map-status.visible {
  color: var(--sail);
}

.route-preview-card .route-preview-map-status.hidden {
  color: rgba(255, 218, 151, 0.92);
}

.route-preview-card.active .route-preview-map-status.hidden {
  color: var(--warning);
}

.route-preview-badge {
  margin-top: 2px;
}

.route-preview-card .route-delta-strip {
  gap: 4px;
  margin-top: 5px;
}

.route-preview-card .route-delta-chip {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.84);
}

.route-preview-card .route-delta-chip.best {
  border-color: rgba(140, 255, 213, 0.28);
  background: rgba(140, 255, 213, 0.14);
  color: rgba(214, 255, 239, 0.96);
}

.route-preview-card.active .route-delta-chip {
  border-color: rgba(48, 73, 86, 0.12);
  background: rgba(48, 73, 86, 0.06);
  color: var(--muted);
}

.route-preview-card.active .route-delta-chip.best {
  border-color: rgba(14, 143, 98, 0.22);
  background: rgba(226, 248, 239, 0.66);
  color: #146247;
}

/* IMPORTANT FOR BUG AVOIDANCE: chart-bottom deltas mirror route cards so map
   previews explain alternatives without becoming another selection/ranking UI. */

.route-preview-card strong,
.dock-departure-card strong,
.dock-stat strong {
  display: block;
  margin-top: 3px;
  font-size: var(--font-size-body);
  line-height: 1.22;
}

.bottom-weather-content {
  display: grid;
  gap: 10px;
  min-height: 58px;
  color: rgba(255, 255, 255, 0.8);
}

.dock-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.dock-stat,
.dock-departure-card {
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

.dock-departure-card {
  flex: 1 1 190px;
}

.dock-departure-card.best {
  border-color: rgba(119, 235, 210, 0.58);
  background: rgba(119, 235, 210, 0.16);
  color: #fff;
}

.weather-ramp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 999px;
  min-height: 26px;
}

.weather-ramp span {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: var(--font-size-meta);
  font-weight: 850;
  text-shadow: 0 1px 4px rgba(16, 37, 51, 0.38);
}

.wind-ramp {
  background: linear-gradient(90deg, #65c8ef, #66d37d, #f1cf49, #d15a42);
}

.wave-ramp {
  background: linear-gradient(90deg, #8dd7e1, #4e9fc5, #836bb8, #d65c76);
}

.playback-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.playback-metrics div {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.13);
}

.playback-metrics span {
  color: rgba(255, 255, 255, 0.72);
}

.playback-metrics strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: var(--font-size-body);
}

.boat-progress-marker {
  position: absolute;
  z-index: 8;
  display: none;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.boat-progress-marker span {
  position: absolute;
  left: 10px;
  top: 9px;
  width: 14px;
  height: 20px;
  border-radius: 999px 999px 7px 7px;
  background:
    linear-gradient(180deg, #ffffff 0 42%, #0f7c8c 43% 100%);
  box-shadow:
    0 0 0 4px rgba(15, 124, 140, 0.2),
    0 10px 24px rgba(16, 37, 51, 0.3);
}

.boat-progress-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 18px solid #ffffff;
  filter: drop-shadow(0 3px 5px rgba(16, 37, 51, 0.25));
}

.boat-progress-marker::after {
  /* IMPORTANT FOR BUG AVOIDANCE: the marker is a heading-aware vessel, not a
     generic dot, so playback direction stays visually legible on dense route sets. */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 22px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.36);
  filter: blur(1px);
}

.route-race-marker {
  position: absolute;
  z-index: 7;
  width: 24px;
  height: 24px;
  pointer-events: none;
  transform-origin: center;
  filter: drop-shadow(0 8px 14px rgba(16, 37, 51, 0.28));
}

.route-race-vessel {
  position: absolute;
  inset: 3px 7px 3px 7px;
  border-radius: 999px 999px 7px 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0 44%, var(--model-color, var(--route)) 45% 100%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.52);
}

.route-race-vessel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid rgba(255, 255, 255, 0.96);
}

.route-race-label {
  position: absolute;
  left: 21px;
  top: 50%;
  max-width: min(190px, 34vw);
  transform: translateY(-50%) rotate(var(--label-counter-rotation, 0deg));
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(16, 37, 51, 0.76);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* IMPORTANT FOR BUG AVOIDANCE: race playback markers are lightweight route
   annotations with high-contrast labels, not additional route geometry. */

.fallback-route-label {
  fill: var(--route-dark);
  stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 5px;
  paint-order: stroke;
  stroke-linejoin: round;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.01em;
  pointer-events: none;
}

/* IMPORTANT FOR BUG AVOIDANCE: fallback SVG route labels need the same halo
   treatment as MapLibre text, otherwise route choices become unreadable on
   detailed bathy/coastline backgrounds. */

.results-panel {
  display: grid;
  grid-column: 1 / -1;
  align-content: start;
  gap: 15px;
}

.summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.condition-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.summary-grid strong,
.condition-strip strong {
  font-size: 15px;
}

.review-cards {
  margin-top: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.review-card.good {
  border-color: rgba(14, 143, 98, 0.28);
}

.review-card.warn {
  border-color: rgba(217, 155, 34, 0.38);
}

.review-card.bad {
  border-color: rgba(179, 72, 58, 0.34);
}

.polar-canvas {
  width: 100%;
  min-height: 220px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 100%, rgba(15, 124, 140, 0.12), transparent 55%),
    rgba(255, 255, 255, 0.72);
}

/* IMPORTANT FOR BUG AVOIDANCE: keep the polar scale note adjacent to the canvas
   so speed rings do not become detached from their unit explanation. */
.polar-scale-note {
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: 1.35;
}

.leg-detail-body {
  margin-top: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leg-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.74);
}

.leg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-control);
}

.leg-table th,
.leg-table td {
  padding: 10px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.leg-table th {
  color: var(--muted);
  font-size: var(--font-size-meta);
  text-transform: uppercase;
}

.leg-table tr {
  transition:
    background 140ms ease,
    color 140ms ease;
}

.leg-table tbody tr[data-leg-index] {
  cursor: pointer;
}

.leg-table tbody tr[data-leg-index]:hover,
.leg-table tbody tr.selected {
  background: rgba(15, 124, 140, 0.11);
}

.leg-note {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--font-size-small);
}

.planning-leg-row td {
  background:
    linear-gradient(135deg, rgba(110, 231, 216, 0.14), rgba(255, 255, 255, 0.72)),
    rgba(255, 255, 255, 0.74);
}

.planning-leg-row strong,
.planning-leg-row span {
  display: block;
}

.planning-leg-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--font-size-small);
}

/* IMPORTANT FOR BUG AVOIDANCE: progress motion is decorative only; button state
   and route tokens in app.js remain the source of truth for active planning. */
@keyframes compute-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes compute-pulse {
  0%,
  100% {
    transform: scale(0.85);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes compute-sheen {
  0% {
    transform: translateX(-120%);
  }
  55%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes progress-shimmer {
  to {
    transform: translateX(115%);
  }
}

@keyframes step-ping {
  0% {
    transform: scale(0.65);
    opacity: 0.72;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compute-panel::before,
  .compute-panel.planning .compute-sweep,
  .compute-panel.planning .compute-core,
  .compute-panel.planning .status-progress span::after,
  .map-planning-orb::before,
  .map-planning-orb span,
  .planning-preview-card::after,
  .planning-preview-pulse::after,
  .compute-steps li.active .step-dot::after,
  .primary-action.busy::before,
  .secondary-action.busy::before,
  .dock-plan-button.cancel::before {
    animation: none;
  }
}

@media (min-width: 1320px) {
  .planner-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    /* IMPORTANT FOR BUG AVOIDANCE: use the three-pane shell on common
       1366px-wide laptops so route review does not fall below the chart. */
    grid-template-columns: minmax(310px, 360px) minmax(520px, 1fr) minmax(340px, 430px);
    grid-template-rows: minmax(0, 1fr);
  }

  .setup-panel,
  .results-panel {
    min-height: 0;
    max-height: none;
  }

  .map-stage {
    height: 100%;
    min-height: 0;
  }

  .results-panel {
    grid-column: auto;
  }

  .planner-shell.setup-collapsed:not(.results-collapsed) {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  }

  .planner-shell.setup-collapsed:not(.results-collapsed) .map-stage {
    grid-column: 1;
  }

  .planner-shell.setup-collapsed:not(.results-collapsed) .results-panel {
    grid-column: 2;
  }

  .planner-shell.results-collapsed:not(.setup-collapsed) {
    grid-template-columns: minmax(310px, 360px) minmax(0, 1fr);
  }

  .planner-shell.results-collapsed:not(.setup-collapsed) .map-stage {
    grid-column: 2;
  }

  .planner-shell.map-focus {
    grid-template-columns: minmax(0, 1fr);
  }

  .planner-shell.map-focus .map-stage {
    grid-column: 1;
  }
}

@media (max-width: 1240px) {
  .planner-shell {
    grid-template-columns: minmax(300px, 330px) minmax(0, 1fr);
  }

  .setup-panel .form-grid:not(.compact) {
    grid-template-columns: 1fr;
  }

  .results-panel {
    grid-column: 1 / -1;
    min-height: 0;
  }
}

@media (max-width: 820px) {
  :root {
    --font-size-page: 13.5px;
    --font-size-title: clamp(24px, 7vw, 28px);
    --font-size-section: clamp(18px, 5vw, 21px);
    --control-height: 34px;
  }

  .planner-shell {
    --shell-padding: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: var(--shell-padding);
  }

  .map-stage {
    /* IMPORTANT FOR BUG AVOIDANCE: the customer planner is map-first on narrow
       screens; keep enough chart above the dock for route picking. */
    min-height: 74vh;
    order: -1;
  }

  .setup-panel,
  .results-panel {
    max-height: none;
    padding: 14px;
  }

  .planner-shell.setup-collapsed,
  .planner-shell.results-collapsed,
  .planner-shell.map-focus {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .form-grid,
  .form-grid.compact,
  .readiness-strip,
  .summary-grid,
  .condition-strip,
  .review-cards,
  .leg-detail-body {
    grid-template-columns: 1fr;
  }

  .map-hint {
    top: 150px;
    left: 10px;
    max-width: calc(100% - 20px);
    padding: 7px 10px;
    white-space: normal;
  }

  .map-planning-card {
    top: 188px;
    left: 10px;
    right: 10px;
    width: auto;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .map-planning-live-search em {
    flex-basis: 100%;
  }

  .map-planning-card button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .chart-pick-card {
    top: 188px;
    left: 10px;
    width: calc(100% - 20px);
  }

  .route-inspection-card {
    top: 188px;
    left: 10px;
    right: 10px;
    width: auto;
  }

  .route-inspection-stats,
  .wind-picker-insights {
    grid-template-columns: 1fr;
  }

  .map-stage.planning-hud-visible .chart-pick-card {
    top: 268px;
  }

  .chart-pick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .route-builder-actions {
    grid-template-columns: 1fr;
  }

  .route-preset-row {
    grid-template-columns: 1fr;
  }

  .weather-playback {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    transform: none;
    max-height: min(36vh, 305px);
    padding: 9px;
  }

  .map-toolbar {
    top: 10px;
    left: 10px;
    right: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .map-toolbar button,
  .file-action {
    width: 100%;
    min-width: 0;
    padding-inline: 7px;
    font-size: var(--font-size-small);
  }

  .map-view-controls {
    top: 104px;
    left: 10px;
    right: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    transform: none;
  }

  .map-view-controls button {
    width: 100%;
    min-width: 0;
    padding-inline: 7px;
    font-size: var(--font-size-meta);
  }

  .map-legend {
    top: 58px;
    left: 10px;
    right: 10px;
    max-width: none;
    gap: 6px;
  }

  .map-legend span {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 6px 8px;
    font-size: var(--font-size-meta);
  }

  .playback-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .speed-toggle-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .play-button,
  .playback-speed-button {
    width: 100%;
    min-width: 0;
  }

  .bottom-dock-header {
    grid-template-columns: 1fr;
  }

  .bottom-dock-toggle {
    width: 100%;
  }

  .dock-passage-brief {
    grid-template-columns: 1fr;
  }

  .dock-plan-prompt {
    grid-template-columns: 1fr;
  }

  .dock-plan-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .dock-plan-button {
    width: 100%;
    min-width: 0;
  }

  .dock-stat-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .dock-stat {
    flex: 0 0 206px;
  }

  .playback-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .playback-metrics div {
    padding: 8px;
  }

  .playback-metrics strong {
    font-size: 12px;
  }
}