/* Shared presentation for home, recent results and the full replay workspace.
   Deliberately absent from the isolated demo and organizer forms. No map-layer,
   projection, transform, visibility or event/fleet selection rules belong here. */
:root.wr-visual-system,
:root.results-workspace {
  --wr-bg: #f3f6fa;
  --wr-bg-gradient: linear-gradient(180deg, #edf4fb 0, #f3f6fa 360px);
  --wr-card-bg: #ffffff;
  --wr-input-bg: #f6f8fb;
  --wr-input-focus-bg: #ffffff;
  --wr-table-header-bg: #f1f5fa;
  --wr-table-hover-bg: #f1f6fc;
  --wr-btn-bg: #ffffff;
  --wr-btn-hover-bg: #edf3fa;
  --wr-border: #d9e1eb;
  --wr-border-light: #e7ecf2;
  --wr-text-main: #17283b;
  --wr-text-muted: #54657a;
  --wr-text-light: #607187;
  --wr-shadow-sm: 0 2px 8px rgba(15, 35, 60, .035);
  --wr-shadow-md: 0 8px 24px rgba(15, 35, 60, .07);
  --wr-shadow-lg: 0 16px 40px rgba(15, 35, 60, .12);
  --wr-shadow-button: none;
  --wr-shadow-button-hover: none;
  --wr-control-radius: 8px;
  --wr-control-height: 40px;
  --wr-control-font: 13px;
  --wr-action-bg: #1565c0;
  --wr-action-hover: #1256a5;
  --wr-selected-bg: #e8f2fc;
  --wr-selected-text: #125eae;
  --wr-focus: #1565c0;
  --wr-motion: 140ms ease;
  color-scheme: light;
}
:root.wr-visual-system.dark-mode,
:root.results-workspace.dark-mode {
  --wr-bg: #101b2b;
  --wr-bg-gradient: linear-gradient(180deg, #142237 0, #101b2b 360px);
  --wr-card-bg: #19283b;
  --wr-input-bg: #142135;
  --wr-input-focus-bg: #1c3049;
  --wr-table-header-bg: #203149;
  --wr-table-hover-bg: #213750;
  --wr-btn-bg: #1d3047;
  --wr-btn-hover-bg: #29415d;
  --wr-border: #344960;
  --wr-border-light: #2b3e54;
  --wr-text-main: #edf3fa;
  --wr-text-muted: #b0bfd1;
  --wr-text-light: #9eafc3;
  --wr-primary-dark: #85bfff;
  --wr-primary-bg: #203a55;
  --wr-primary-border: #3b638b;
  --wr-selected-bg: #203e5d;
  --wr-selected-text: #a7d3ff;
  --wr-focus: #85bfff;
  --wr-error: #ff9c9c;
  --wr-shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
  --wr-shadow-md: 0 8px 24px rgba(0, 0, 0, .16);
  --wr-shadow-lg: 0 16px 40px rgba(0, 0, 0, .24);
  color-scheme: dark;
}
/* Bridge the results template's legacy token names into the same palette. */
html.results-workspace {
  --bg: var(--wr-bg);
  --card-bg: var(--wr-card-bg);
  --bg-panel: var(--wr-input-bg);
  --surface-secondary: var(--wr-input-bg);
  --border: var(--wr-border);
  --text-main: var(--wr-text-main);
  --text: var(--wr-text-main);
  --text-muted: var(--wr-text-muted);
}
html.results-workspace body { background: var(--wr-bg-gradient); }

/* The original asset is retained. Only the navy "Route" word receives a light
   mask on dark headers, preserving the blue Wake lettering and orange pin.
   The 748×141 mask uses the exact same image as the <img>, with no new artwork. */
.wr-visual-system .wr-brand,
.results-workspace .sail-drawer__brand,
.results-workspace .sail-hero__brand { position: relative; --wr-logo-height: 36px; }
.results-workspace .sail-hero__brand { --wr-logo-height: 27px; }
.results-workspace .sail-drawer__brand { display: inline-flex; --wr-logo-height: 28px; }
.results-workspace .sail-drawer__brand img { display: block; }
.wr-visual-system .wr-brand-logo { height: var(--wr-logo-height); filter: none; }
.wr-visual-system.dark-mode .wr-brand::after,
.results-workspace.dark-mode .sail-drawer__brand::after,
.results-workspace .sail-hero__brand::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--wr-logo-height) * 748 / 141);
  height: var(--wr-logo-height);
  background: #edf3fa;
  mask: url('wakeroute-logo-new.png') center / 100% 100% no-repeat;
  clip-path: inset(0 0 0 66%);
  pointer-events: none;
}

/* One control family. Transport circles, boat dots and status badges retain
   their meaning; ordinary actions no longer all look like primary pills. */
.wr-visual-system .wr-btn,
html.results-workspace :is(a.button, button.button, .charts-actions button, .chart-boat-selector__all, .filter-chip) {
  min-height: var(--wr-control-height);
  border-radius: var(--wr-control-radius);
  font-size: var(--wr-control-font);
  font-weight: 500;
  box-shadow: none;
  transition: background-color var(--wr-motion), border-color var(--wr-motion), color var(--wr-motion);
}
.wr-visual-system .wr-btn:hover,
.wr-visual-system .wr-btn:active,
html.results-workspace :is(a.button, button.button):hover {
  transform: none;
  box-shadow: none;
}
.wr-visual-system .wr-btn--primary,
html.results-workspace :is(a.button.primary, button.button.primary) {
  color: #fff;
  border-color: var(--wr-action-bg);
  background: var(--wr-action-bg);
  box-shadow: none;
}
.wr-visual-system .wr-btn--primary:hover,
html.results-workspace :is(a.button.primary, button.button.primary):hover {
  background: var(--wr-action-hover);
  border-color: var(--wr-action-hover);
  filter: none;
}
.wr-visual-system :is(.wr-input, .wr-select),
.results-workspace #analysisView {
  min-height: var(--wr-control-height);
  border-radius: var(--wr-control-radius);
  transition: border-color var(--wr-motion), background-color var(--wr-motion);
}
.wr-visual-system :is(.wr-input, .wr-select):focus { box-shadow: none; }
.wr-visual-system .wr-select,
.results-workspace #analysisView {
  /* WebKit's native menulist ignores min-height; retain the native picker but
     give its closed control the same dimensions as the adjacent text input. */
  appearance: none;
  height: var(--wr-control-height);
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2354657a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
}
.wr-visual-system.dark-mode .wr-select,
.results-workspace.dark-mode #analysisView {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23b0bfd1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.wr-visual-system .wr-input::placeholder { color: var(--wr-text-light); }
.wr-visual-system .wr-nav-link { color: var(--wr-text-muted); }
.wr-visual-system .wr-nav-link--active { color: var(--wr-selected-text); }
.wr-visual-system :is(.wr-dark-toggle, .wr-nav-hamburger, .wr-drawer__close) {
  width: 40px;
  height: 40px;
  border-radius: var(--wr-control-radius);
}
.wr-visual-system :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--wr-focus);
  outline-offset: 3px;
}

/* Homepage: quieter cards leave the photo, replay and real tracks in front. */
.wr-visual-system .wr-page-landing :is(.wr-flow, .wr-landing-card, .wr-race) {
  box-shadow: none;
  border-radius: 12px;
}
.wr-visual-system .wr-page-landing .wr-race:hover {
  transform: none;
  border-color: var(--wr-focus);
  box-shadow: var(--wr-shadow-sm);
}
.wr-visual-system .wr-race__viz::before { background: none; }
.wr-visual-system .wr-race:hover .wr-race__viz { filter: none; }
.wr-visual-system .wr-race__title { font-size: 17px; line-height: 1.35; }
.wr-visual-system .wr-race__sub { line-height: 1.5; }
.wr-visual-system .wr-section-head h2 { font-size: 24px; letter-spacing: -.025em; }
.wr-visual-system .wr-flow { padding: 24px 24px 8px; }
.wr-visual-system .wr-landing-card { padding: 24px; }
.wr-visual-system .wr-home-insights { padding: 32px; }
.wr-visual-system .wr-home-hero .wr-btn--primary { min-height: 44px; }
.wr-visual-system .wr-ios { box-shadow: none; border-radius: 12px; }
.wr-visual-system .wr-ios:hover { transform: none; }
.wr-visual-system .wr-live-section { box-shadow: none; }
.wr-visual-system .wr-live-row__cta { color: #14743d; }
.wr-visual-system.dark-mode .wr-live-row__cta { color: #7ddfa2; }
.wr-visual-system .wr-site-footer { color: var(--wr-text-muted); }

/* Recent results use the same quiet controls and clearly visible selection. */
.wr-visual-system .wr-runs__filters > summary,
.wr-visual-system .wr-chip { min-height: var(--wr-control-height); border-radius: var(--wr-control-radius); }
.wr-visual-system .wr-runs__filters[open] > summary,
.wr-visual-system .wr-chip.is-active {
  background: var(--wr-selected-bg);
  color: var(--wr-selected-text);
  border-color: var(--wr-focus);
}
.wr-visual-system .run-link { transition: background-color var(--wr-motion); }
.wr-visual-system :is(.run-menu, .wr-runs__filter-panel) { box-shadow: var(--wr-shadow-lg); }
.wr-visual-system .run-menu .run-del,
.wr-visual-system .run-menu .boat-del { color: #b42332; }
.wr-visual-system.dark-mode .run-menu :is(.run-del, .boat-del) { color: var(--wr-error); }

/* Replay controls and boat selection. All existing input elements and active/
   checked states remain owned by view_sail.js. Boat colors are never remapped. */
html.results-workspace :is(.charts-actions button, .filter-chip, .chart-boat-selector__all) {
  background: var(--wr-btn-bg);
  color: var(--wr-text-muted);
  border-color: var(--wr-border);
}
html.results-workspace :is(.charts-actions button.active, .filter-chip.active) {
  color: var(--wr-selected-text);
  background: var(--wr-selected-bg);
  border-color: var(--wr-focus);
}
.results-workspace .panel--secondary > .charts-actions > button { min-height: var(--wr-control-height); }
.results-workspace .chart-boat-chip {
  min-height: var(--wr-control-height);
  padding: 8px 10px;
  border-radius: var(--wr-control-radius);
  color: var(--wr-text-main);
  background: var(--wr-input-bg);
  border-color: var(--wr-border);
  line-height: 1.35;
  transition: background-color var(--wr-motion), border-color var(--wr-motion);
}
.results-workspace .chart-boat-chip.checked {
  color: var(--wr-selected-text);
  background: var(--wr-selected-bg);
  border-color: var(--wr-focus);
}
.results-workspace .chart-boat-chip:hover { border-color: var(--wr-focus); }
.results-workspace :is(.chart-boat-chip, .track-toggle) input { accent-color: var(--wr-action-bg); }
.results-workspace .chart-boat-selector__all:hover { color: var(--wr-text-main); background: var(--wr-btn-hover-bg); }
.results-workspace :is(.map-view-tabs button, .workspace-analysis-toggle, .workspace-analysis-close) {
  min-height: var(--wr-control-height);
  border-radius: var(--wr-control-radius);
  transition: background-color var(--wr-motion), border-color var(--wr-motion);
}
.results-workspace .map-view-tabs button.active { background: var(--wr-action-bg); color: #fff; }
.results-workspace .race-tab { border-radius: var(--wr-control-radius); }
.results-workspace .race-tab--active { background: var(--wr-selected-bg); color: var(--wr-selected-text); border-color: var(--wr-focus); }
.results-workspace #playbackToggle { background: var(--wr-action-bg); }
.results-workspace :is(.chart-card, .sync-item, .track-stat-card, .leg-strip-container, .sync-panel) {
  background: var(--wr-card-bg);
  box-shadow: none;
}
.results-workspace :is(.chart-title, .track-stat-title) { font-weight: 600; }
.results-workspace :is(.sync-item, .track-stat-card) { border-color: var(--wr-border-light); }
.results-workspace :is(.chart-meta, .chart-footer, .event-time, .track-stat-grid span) { color: var(--wr-text-muted); }
.results-workspace :is(.playback-time, .boat-stat, .results-table, .sync-details) { font-variant-numeric: tabular-nums; }
.results-workspace .sail-hero__meta { color: #bac9db; }
.results-workspace .sail-hero__stat-label { color: #bac9db; }
.results-workspace .sail-hero__stat-value { color: #edf3fa; font-variant-numeric: tabular-nums; }
.results-workspace .sail-hero__stat-unit { color: #bac9db; opacity: 1; }
.results-workspace .sail-hero__stat-value--race-start,
.results-workspace .sail-hero__stat-hint { color: #a7d3ff; }
.results-workspace .sail-hero__share-btn { border-radius: var(--wr-control-radius); min-height: 40px; }
.results-workspace .sail-hero__feedback-btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #d8e4f2; }
.results-workspace .sail-hero__feedback-btn:hover { background: rgba(255, 255, 255, .12); }

@media (max-width: 900px) {
  :root.wr-visual-system, :root.results-workspace { --wr-control-height: 44px; }
  .results-workspace .sail-hero__brand { --wr-logo-height: 25px; }
  .wr-visual-system :is(.run-expand, .run-overflow > summary) { width: 44px; height: 44px; }
}
@media (max-width: 540px) {
  .wr-visual-system .wr-brand { --wr-logo-height: 32px; }
  .wr-visual-system .wr-flow, .wr-visual-system .wr-landing-card { padding: 20px; }
}
/* Feedback animates surfaces, never the map coordinate system. Reduced motion
   removes decorative control/card transitions without disabling manual replay. */
@media (prefers-reduced-motion: reduce) {
  .wr-visual-system, .results-workspace { --wr-motion: 0s; }
  .wr-visual-system :is(.wr-btn, .wr-race, .wr-ios, .wr-input, .wr-select, .run-expand [data-icon]),
  .results-workspace :is(.button, .chart-boat-chip, .charts-actions button) { transition: none; }
  .wr-visual-system .wr-live-dot { animation: none; }
}