:root {
      color-scheme: dark;
      --page: #081421;
      --panel: #132235;
      --panel-2: #0f1b2a;
      --box: #0d1a28;
      --line: #24415f;
      --line-soft: #1e3550;
      --text: #e8f0fb;
      --muted: #9badc1;
      --green: #48f18a;
      --green-soft: rgba(72, 241, 138, 0.16);
      --red: #ff675e;
      --red-soft: rgba(255, 103, 94, 0.15);
      --amber: #f6bb4f;
      --amber-soft: rgba(246, 187, 79, 0.16);
      --blue: #77b9e8;
      --blue-soft: rgba(119, 185, 232, 0.14);
      --gray: #8390a0;
      --gray-soft: rgba(131, 144, 160, 0.14);
      --sandbar: #c9b78b;
      --zone-sandbar: var(--sandbar);
      --zone-very-shallow: #de5b2a;
      --zone-shallow: #e8bf38;
      --zone-rideable: #2f83a0;
      --zone-deep: #3f61b0;
      --subtle-fill: rgba(8, 20, 33, 0.22);
      --subtle-fill-strong: rgba(8, 20, 33, 0.30);
      --help-panel: #18304a;
      --segment-text: rgba(232, 240, 251, 0.88);
      --marker-ring: rgba(8, 20, 33, 0.65);
      --inset-line: rgba(255, 255, 255, 0.10);
      --elevated-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
      --knob-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
      --radius: 26px;
}

/* Tide chart uses the Wind Graph visual system. */
.tide-graph-widget { margin-top: 14px; }
.tide-graph-line { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(105, 178, 235, .32)); }
.tide-graph-area { fill: rgba(105, 178, 235, .13); stroke: none; }
.wind-graph-inspector-dot.tide { fill: var(--blue); stroke: var(--panel); stroke-width: 1.5; }
.wind-graph-inspector-value.tide { fill: var(--blue); }

    :root[data-theme="light"] {
      color-scheme: light;
      --page: #eaf4f6;
      --panel: #fffefa;
      --panel-2: #f8fbfd;
      --box: #edf5f1;
      --line: #9fb8c6;
      --line-soft: #c8d9e1;
      --text: #0d1b2e;
      --muted: #566a7b;
      --green: #0c7a50;
      --green-soft: rgba(12, 122, 80, 0.13);
      --red: #be5346;
      --red-soft: rgba(190, 83, 70, 0.13);
      --amber: #b87616;
      --amber-soft: rgba(184, 118, 22, 0.16);
      --blue: #207f9d;
      --blue-soft: rgba(32, 127, 157, 0.14);
      --gray: #687987;
      --gray-soft: rgba(104, 121, 135, 0.13);
      --sandbar: #b58b35;
      --subtle-fill: rgba(230, 240, 245, 0.72);
      --subtle-fill-strong: rgba(223, 235, 241, 0.9);
      --help-panel: #dcecf4;
      --segment-text: rgba(255, 255, 255, 0.9);
      --marker-ring: rgba(255, 255, 255, 0.86);
      --inset-line: rgba(16, 32, 51, 0.12);
      --elevated-shadow: 0 20px 48px rgba(38, 74, 96, 0.18);
      --knob-shadow: 0 9px 18px rgba(38, 74, 96, 0.24);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--page);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      transition: background-color 160ms ease, color 160ms ease;
    }

    :root[data-theme="light"] body {
      background:
        radial-gradient(circle at 18% -8%, rgba(41, 140, 154, 0.16), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(207, 146, 45, 0.12), transparent 26%),
        linear-gradient(180deg, #e8f3f7 0%, #f7fbfa 48%, #edf5f7 100%);
    }

    main {
      width: min(1040px, calc(100vw - 28px));
      max-width: 100%;
      margin: 0 auto;
      padding: 12px 0 40px;
      overflow-x: hidden;
    }

    .app-status-bar {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      max-width: 100%;
      min-width: 0;
      min-height: 44px;
      border-bottom: 1px solid var(--line-soft);
      margin-bottom: 10px;
      padding: 0 clamp(18px, 3vw, 26px) 8px;
      overflow: hidden;
    }

    .top-bar {
      display: flex;
      justify-content: flex-end;
      min-width: 0;
    }

    .theme-switch {
      display: inline-flex;
      align-items: stretch;
      border: 1.5px solid color-mix(in srgb, var(--text) 42%, var(--line));
      border-radius: 999px;
      background: var(--subtle-fill);
      overflow: hidden;
      padding: 0;
      cursor: pointer;
      color: inherit;
    }

    .theme-option {
      width: 34px;
      height: 32px;
      border: 0;
      background: transparent;
      color: color-mix(in srgb, var(--text) 55%, transparent);
      display: inline-grid;
      place-items: center;
      padding: 0;
      pointer-events: none;
    }

    .theme-option + .theme-option {
      border-left: 1px solid color-mix(in srgb, var(--text) 18%, var(--line));
    }

    .theme-option svg {
      width: 16px;
      height: 16px;
      display: block;
    }

    :root[data-theme="light"] .theme-option[data-theme-face="light"],
    :root:not([data-theme="light"]) .theme-option[data-theme-face="dark"] {
      background: color-mix(in srgb, var(--text) 16%, transparent);
      color: var(--text);
    }

    .theme-switch:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }

    .wind-card {
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 0;
    }

    :root[data-theme="light"] .wind-card {
      background: transparent;
      box-shadow: none;
    }

    .wind-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }

    .eyebrow.wind-title {
      color: var(--text);
      font-size: 19px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0.06em;
      min-width: 0;
    }

    .pills {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 22px;
    }

    .app-status-bar .pills {
      flex-wrap: nowrap;
      justify-content: flex-start;
      min-width: 0;
      margin-bottom: 0;
      overflow: visible;
    }

    .pill {
      min-height: 32px;
      border: 1.5px solid var(--line);
      border-radius: 999px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: clamp(13px, 1.55vw, 16px);
      font-weight: 850;
      letter-spacing: 0;
      background: var(--subtle-fill);
    }

    .app-status-bar .pill {
      flex: 0 1 auto;
      min-width: 0;
      min-height: 28px;
      padding: 0 10px;
      gap: 6px;
      font-size: 12px;
      overflow: hidden;
      white-space: nowrap;
    }

    .app-status-bar .tide-alert-help {
      width: 19px;
      height: 19px;
      font-size: 12px;
    }

    .pill.live {
      color: var(--green);
      border-color: var(--green);
    }

    .pill.standby {
      color: var(--amber);
      border-color: var(--amber);
      background: var(--amber-soft);
    }

    .pill.off-duty {
      color: var(--red);
      border-color: var(--red);
      background: var(--red-soft);
    }

    .pill.sensor-offline {
      color: var(--muted);
      border-color: var(--line);
      background: var(--subtle-fill);
    }

    .pill.off-duty.weather-closure {
      color: #fff8f6;
      border-color: var(--red);
      background: var(--red);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 30%, transparent);
    }

    .pill.tide-alert {
      color: var(--blue);
      border-color: var(--blue);
      background: var(--blue-soft);
    }

    .pill.tide-alert.alert {
      color: var(--amber);
      border-color: var(--amber);
      background: var(--amber-soft);
    }

    .pill.tide-alert.sandbar {
      color: #112034;
      border-color: var(--sandbar);
      background: var(--sandbar);
    }

    .pill.tide-alert.very-shallow {
      color: #fffaf4;
      border-color: var(--zone-very-shallow);
      background: var(--zone-very-shallow);
    }

    .pill.tide-alert.shallow {
      color: #241904;
      border-color: #e8bf38;
      background: #e8bf38;
    }

    .pill.tide-alert.deep {
      color: var(--blue);
      border-color: var(--blue);
      background: var(--blue-soft);
    }

    .pill.tide-alert.has-helper {
      position: relative;
      gap: 8px;
    }

    .tide-alert-label {
      min-width: 0;
    }

    .tide-alert-help-wrap {
      position: relative;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
    }

    .tide-alert-help {
      width: 20px;
      height: 20px;
      border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, currentColor 14%, transparent);
      color: currentColor;
      display: inline-grid;
      place-items: center;
      font: inherit;
      font-size: 13px;
      line-height: 1;
      font-weight: 900;
      cursor: pointer;
    }

    .tide-alert-help:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
    }

    .tide-alert-help-text {
      position: absolute;
      z-index: 20;
      top: calc(100% + 10px);
      right: 0;
      width: min(310px, calc(100vw - 48px));
      border: 2px solid var(--line);
      border-radius: 14px;
      background: var(--help-panel);
      color: var(--text);
      box-shadow: var(--elevated-shadow);
      padding: 9px 13px;
      display: none;
      font-size: 13px;
      line-height: 1.32;
      font-weight: 750;
      letter-spacing: 0;
      text-transform: none;
      white-space: normal;
    }

    .tide-alert-help-wrap.is-open .tide-alert-help-text {
      display: block;
    }

    .pill.flow-alert {
      color: var(--amber);
      border-color: var(--amber);
      background: var(--amber-soft);
    }

    .pill.wind-delta {
      color: var(--green);
      border-color: var(--green);
      background: var(--green-soft);
    }

    .pill.wind-delta.down {
      color: var(--red);
      border-color: var(--red);
      background: rgba(255, 111, 97, 0.16);
    }

    .pill.wind-delta.easing {
      color: var(--amber);
      border-color: var(--amber);
      background: var(--amber-soft);
    }

    .rider-call-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      min-width: 0;
    }

    .rider-widget .pill.wind-delta {
      min-height: 34px;
      margin-left: 0;
      padding: 0 12px;
      font-size: clamp(14px, 1.7vw, 17px);
      flex: 0 1 auto;
    }

    .wind-delta-stack {
      margin-left: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
    }

    .wind-delta-analysis {
      box-sizing: border-box;
      grid-column: 1 / -1;
      order: 0;
      width: 100%;
      border: 1px solid var(--green);
      border-radius: 12px;
      background: color-mix(in srgb, var(--green-soft) 70%, var(--panel));
      color: var(--text);
      padding: 7px 10px;
      font-size: clamp(11px, 1.35vw, 13px);
      line-height: 1.25;
      font-weight: 850;
      text-align: center;
    }

    .wind-delta-analysis.down {
      border-color: var(--red);
      background: color-mix(in srgb, rgba(255, 111, 97, 0.16) 76%, var(--panel));
    }

    .wind-delta-analysis.easing {
      border-color: var(--amber);
      background: color-mix(in srgb, var(--amber-soft) 76%, var(--panel));
    }

    .wind-delta-analysis.is-hidden {
      display: none;
    }

    .pill.is-hidden {
      display: none;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: currentColor;
      flex: 0 0 auto;
    }

    .hero-row {
      width: min(100%, 640px);
      display: grid;
      grid-template-columns: clamp(92px, 17vw, 140px) auto clamp(92px, 17vw, 140px);
      align-items: end;
      gap: clamp(18px, 4vw, 34px);
      margin-bottom: 32px;
    }

    .speed {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-width: 0;
      justify-content: center;
    }

    .speed-label {
      color: var(--text);
      font-size: clamp(18px, 2.6vw, 25px);
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .speed-value {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 16px;
    }

    .speed strong {
      font-size: clamp(94px, 16vw, 158px);
      line-height: 0.82;
      font-weight: 900;
      letter-spacing: 0;
    }

    .speed-unit {
      color: var(--muted);
      font-size: clamp(25px, 4vw, 36px);
      font-weight: 850;
    }

    .wind-range {
      display: flex;
      gap: 12px;
      align-items: stretch;
      flex-wrap: wrap;
      padding-bottom: 10px;
    }

    .range-chip {
      min-width: 118px;
      min-height: 74px;
      border: 2px solid var(--line);
      border-radius: 18px;
      background: var(--subtle-fill);
      padding: 13px 16px;
      display: grid;
      align-content: space-between;
      gap: 8px;
    }

    .hero-row > .range-chip {
      min-width: 0;
      width: 100%;
      align-self: end;
      margin-bottom: 10px;
    }

    .range-chip span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .range-chip strong {
      color: var(--text);
      font-size: 29px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .range-chip.lull {
      border-color: color-mix(in srgb, var(--amber) 62%, transparent);
      background: linear-gradient(180deg, var(--amber-soft), var(--subtle-fill));
    }

    .range-chip.lull strong {
      color: var(--amber);
    }

    .range-chip.gust strong {
      color: var(--green);
    }

    .rider-trend-note {
      grid-column: 1 / -1;
      order: 0;
      border: 1px solid var(--line-soft);
      border-color: color-mix(in srgb, var(--blue) 62%, transparent);
      border-radius: 16px;
      background: var(--subtle-fill-strong);
      padding: 13px 14px;
      color: var(--muted);
      font-size: clamp(14px, 1.8vw, 17px);
      line-height: 1.3;
      font-weight: 800;
      display: grid;
      gap: 9px;
      overflow-wrap: anywhere;
    }

    .rider-trend-note[hidden] {
      display: none;
    }

    .rider-trend-label {
      display: flex;
      flex-wrap: wrap;
      gap: 0.28em;
      align-items: baseline;
      color: var(--muted);
      font-size: clamp(16px, 2vw, 19px);
      line-height: 1.05;
      font-weight: 950;
    }

    .rider-trend-state {
      color: var(--green);
    }

    .rider-trend-note[data-trend-tone="building"] .rider-trend-state,
    .rider-trend-note[data-trend-tone="holding"] .rider-trend-state {
      color: var(--green);
    }

    .rider-trend-note[data-trend-tone="easing"] .rider-trend-state,
    .rider-trend-note[data-trend-tone="staying_light"] .rider-trend-state {
      color: var(--amber);
    }

    .rider-trend-note[data-trend-tone="falling_off"] .rider-trend-state {
      color: var(--red);
    }

    .rider-trend-facts {
      --trend-avg-col: minmax(84px, 96px);
      --trend-change-col: minmax(104px, 118px);
      display: grid;
      gap: 6px;
    }

    .rider-trend-columns {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(76px, 1fr) var(--trend-avg-col) var(--trend-change-col);
      column-gap: 16px;
      row-gap: 6px;
      align-items: end;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.1;
      font-weight: 950;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .rider-trend-columns span:nth-child(n + 2) {
      text-align: right;
      white-space: nowrap;
      justify-self: stretch;
      max-width: none;
    }

    .rider-trend-row {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(76px, 1fr) var(--trend-avg-col) var(--trend-change-col);
      column-gap: 16px;
      row-gap: 6px;
      align-items: baseline;
    }

    .rider-trend-row span {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.1;
      font-weight: 950;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .rider-trend-row b {
      color: var(--text);
      font-size: clamp(14px, 1.8vw, 16px);
      line-height: 1.15;
      font-weight: 900;
      text-align: right;
      white-space: nowrap;
    }

    .rider-trend-delta {
      min-width: 50px;
      color: var(--muted);
      font-size: clamp(14px, 1.8vw, 16px);
      line-height: 1.15;
      font-weight: 950;
      font-style: normal;
      text-align: right;
      white-space: nowrap;
    }

    .rider-trend-delta.up {
      color: var(--green);
    }

    .rider-trend-delta.down {
      color: var(--red);
    }

    .rider-trend-row:not(.is-primary) span,
    .rider-trend-row:not(.is-primary) b,
    .rider-trend-row:not(.is-primary) .rider-trend-delta {
      color: var(--text);
    }

    .rider-trend-row.is-primary span,
    .rider-trend-row.is-primary b,
    .rider-trend-row.is-primary .rider-trend-delta {
      color: var(--amber);
    }

    .rider-trend-note[data-trend-tone="building"] .rider-trend-row.is-primary span,
    .rider-trend-note[data-trend-tone="building"] .rider-trend-row.is-primary b,
    .rider-trend-note[data-trend-tone="building"] .rider-trend-row.is-primary .rider-trend-delta,
    .rider-trend-note[data-trend-tone="holding"] .rider-trend-row.is-primary span,
    .rider-trend-note[data-trend-tone="holding"] .rider-trend-row.is-primary b,
    .rider-trend-note[data-trend-tone="holding"] .rider-trend-row.is-primary .rider-trend-delta {
      color: var(--green);
    }

    .rider-trend-note[data-trend-tone="easing"] .rider-trend-row.is-primary span,
    .rider-trend-note[data-trend-tone="easing"] .rider-trend-row.is-primary b,
    .rider-trend-note[data-trend-tone="easing"] .rider-trend-row.is-primary .rider-trend-delta,
    .rider-trend-note[data-trend-tone="staying_light"] .rider-trend-row.is-primary span,
    .rider-trend-note[data-trend-tone="staying_light"] .rider-trend-row.is-primary b,
    .rider-trend-note[data-trend-tone="staying_light"] .rider-trend-row.is-primary .rider-trend-delta {
      color: var(--amber);
    }

    .rider-trend-note[data-trend-tone="falling_off"] .rider-trend-row.is-primary span,
    .rider-trend-note[data-trend-tone="falling_off"] .rider-trend-row.is-primary b,
    .rider-trend-note[data-trend-tone="falling_off"] .rider-trend-row.is-primary .rider-trend-delta {
      color: var(--red);
    }

    .rider-trend-note.has-caption {
      padding-bottom: 0;
      overflow: hidden;
    }

    .rider-trend-caption {
      margin: 4px -14px 0;
      padding: 10px 14px 11px;
      border-top: 1px solid color-mix(in srgb, var(--green) 32%, transparent);
      background: color-mix(in srgb, var(--green-soft) 72%, var(--panel));
      color: var(--text);
      font-size: 13px;
      line-height: 1.25;
      font-weight: 800;
      text-align: center;
      white-space: nowrap;
    }

    .rider-trend-caption b {
      color: inherit;
      font-weight: 950;
    }

    .rider-trend-note[data-trend-tone="building"] .rider-trend-caption b,
    .rider-trend-note[data-trend-tone="holding"] .rider-trend-caption b {
      color: var(--green);
    }

    .rider-trend-note[data-trend-tone="easing"] .rider-trend-caption,
    .rider-trend-note[data-trend-tone="staying_light"] .rider-trend-caption {
      border-top-color: color-mix(in srgb, var(--amber) 38%, transparent);
      background: color-mix(in srgb, var(--amber-soft) 76%, var(--panel));
    }

    .rider-trend-note[data-trend-tone="easing"] .rider-trend-caption b,
    .rider-trend-note[data-trend-tone="staying_light"] .rider-trend-caption b {
      color: var(--amber);
    }

    .rider-trend-note[data-trend-tone="falling_off"] .rider-trend-caption {
      border-top-color: color-mix(in srgb, var(--red) 38%, transparent);
      background: color-mix(in srgb, var(--red-soft) 76%, var(--panel));
    }

    .rider-trend-note[data-trend-tone="falling_off"] .rider-trend-caption b {
      color: var(--red);
    }

    @media (max-width: 360px) {
      .rider-trend-caption {
        white-space: normal;
      }
    }

    .switch-summary {
      border: 2px solid var(--line);
      border-radius: 22px;
      background: var(--subtle-fill);
      padding: 18px;
      display: grid;
      gap: 14px;
      min-width: 0;
      margin-top: 16px;
    }

    .summary-top {
      display: grid;
      gap: 8px;
    }

    .summary-top strong {
      font-size: clamp(20px, 4vw, 38px);
      line-height: 1;
      color: var(--green);
      letter-spacing: 0;
    }

    .summary-title {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .summary-top span {
      color: var(--muted);
      font-size: 15px;
      font-weight: 800;
      white-space: nowrap;
    }

    .summary-top [data-wind-trend-meta] {
      color: var(--muted);
      font-size: 15px;
      font-weight: 800;
      white-space: nowrap;
    }

    .mini-bar,
    .trend-bar {
      position: relative;
      height: 38px;
      border-radius: 999px;
      border: 1px solid var(--line-soft);
      overflow: hidden;
    }

    .mini-bar {
      background: linear-gradient(90deg, rgba(119, 185, 232, 0.24), rgba(246, 187, 79, 0.18) 50%, rgba(72, 241, 138, 0.26));
    }

    .trend-bar {
      background: linear-gradient(90deg, var(--red-soft), var(--amber-soft) 50%, var(--green-soft));
    }

    .mini-bar::before,
    .mini-bar::after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0;
      z-index: 1;
      pointer-events: none;
    }

    .mini-bar::before {
      content: "Outflow";
      left: 14px;
      color: var(--blue);
    }

    .mini-bar::after {
      content: "Inflow";
      right: 14px;
      color: var(--green);
    }

    .bar-caption {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      color: var(--muted);
      font-size: 10px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0;
      z-index: 1;
      pointer-events: none;
      white-space: nowrap;
    }

    .bar-caption-left {
      left: 18%;
    }

    .bar-caption-center {
      left: 50%;
    }

    .bar-caption-right {
      left: 82%;
    }

    .thumb {
      position: absolute;
      left: clamp(12px, var(--bar-thumb, 50%), calc(100% - 12px));
      top: 50%;
      width: 24px;
      height: 24px;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: var(--green);
      box-shadow: 0 0 0 8px var(--green-soft), var(--knob-shadow);
      transition: left 280ms ease;
      z-index: 2;
    }

    .trend-bar .thumb {
      background: var(--amber);
      box-shadow: 0 0 0 8px var(--amber-soft), var(--knob-shadow);
    }

    .trend-bar[data-trend-tone="building"] .thumb {
      background: var(--green);
      box-shadow: 0 0 0 8px var(--green-soft), var(--knob-shadow);
    }

    .trend-bar[data-trend-tone="falling_off"] .thumb {
      background: var(--red);
      box-shadow: 0 0 0 8px var(--red-soft), var(--knob-shadow);
    }

    .summary-top strong[data-wind-trend-label] {
      color: var(--amber);
    }

    .summary-top strong[data-wind-trend-label][data-trend-tone="building"] {
      color: var(--green);
    }

    .summary-top strong[data-wind-trend-label][data-trend-tone="falling_off"] {
      color: var(--red);
    }

    .flow-widget {
      margin-top: 18px;
      border: 2px solid var(--line);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(119, 185, 232, 0.10), var(--panel-2));
      padding: clamp(14px, 2.4vw, 18px);
      display: grid;
      gap: 12px;
    }

    .flow-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .flow-head strong {
      font-size: clamp(15px, 2vw, 18px);
      line-height: 1;
      color: var(--muted);
      font-weight: 950;
      letter-spacing: 0;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .flow-head .eyebrow {
      margin: 0;
    }

    .direction-bar {
      height: 44px;
      border-color: color-mix(in srgb, var(--blue) 42%, var(--line-soft));
      background: linear-gradient(90deg, rgba(119, 185, 232, 0.34), rgba(246, 187, 79, 0.22) 50%, rgba(72, 241, 138, 0.34));
    }

    .direction-bar .thumb {
      width: 28px;
      height: 28px;
      background: var(--blue);
      box-shadow: 0 0 0 8px var(--blue-soft), var(--knob-shadow);
    }

    .direction-bar[data-flow-tone="inflow"] .thumb {
      background: var(--green);
      box-shadow: 0 0 0 8px var(--green-soft), var(--knob-shadow);
    }

    .direction-bar[data-flow-tone="outflow"] .thumb {
      background: var(--blue);
      box-shadow: 0 0 0 8px var(--blue-soft), var(--knob-shadow);
    }

    .direction-readout {
      position: absolute;
      left: clamp(58px, var(--bar-thumb, 50%), calc(100% - 58px));
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--panel);
      color: var(--text);
      padding: 6px 10px;
      font-size: clamp(13px, 1.6vw, 15px);
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0;
      white-space: nowrap;
      pointer-events: none;
    }

    .direction-bar[data-flow-tone="inflow"] .direction-readout {
      border-color: var(--green);
      color: var(--green);
    }

    .direction-bar[data-flow-tone="outflow"] .direction-readout {
      border-color: var(--blue);
      color: var(--blue);
    }

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

    .stat {
      min-height: 146px;
      border: 2px solid var(--line);
      border-radius: 18px;
      background: var(--box);
      padding: 22px 20px;
      display: grid;
      align-content: space-between;
      gap: 18px;
    }

    .label {
      color: var(--muted);
      font-size: clamp(17px, 2vw, 22px);
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .value {
      color: var(--text);
      font-size: clamp(32px, 5vw, 40px);
      line-height: 1;
      font-weight: 900;
      letter-spacing: 0;
    }

    .stat.inflow {
      border-color: rgba(72, 241, 138, 0.55);
      background: linear-gradient(180deg, rgba(72, 241, 138, 0.10), var(--box));
    }

    .stat.inflow .value {
      color: var(--green);
    }

    .conditions-card {
      min-height: auto;
      align-content: start;
      gap: 16px;
      padding: 22px 20px;
    }

    .quicklook-grid {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .quicklook-grid.current-commentary {
      grid-template-columns: 1fr;
    }

    .current-condition-hero {
      border: 1px solid var(--line-soft);
      border-radius: 16px;
      background: linear-gradient(180deg, var(--subtle-fill-strong), var(--subtle-fill));
      padding: 17px 18px;
      display: grid;
      gap: 10px;
    }

    .current-condition-kicker {
      color: var(--muted);
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .current-condition-call {
      color: var(--text);
      font-size: clamp(27px, 4.4vw, 42px);
      line-height: 0.98;
      font-weight: 950;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }

    .current-commentary-text {
      margin: 0;
      color: var(--text);
      font-size: clamp(16px, 2.15vw, 22px);
      line-height: 1.28;
      font-weight: 800;
      letter-spacing: 0;
    }

    .current-condition-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      min-width: 0;
    }

    .current-condition-meta span {
      min-height: 26px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      padding: 5px 9px;
      color: var(--muted);
      background: var(--subtle-fill);
      font-size: 12px;
      line-height: 1;
      font-weight: 900;
      white-space: nowrap;
    }

    .condition-facts {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .quicklook-item {
      border: 1px solid var(--line-soft);
      border-radius: 16px;
      background: var(--subtle-fill);
      padding: 14px 15px;
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .quicklook-item.primary {
      grid-column: 1 / -1;
      padding: 16px 18px;
      background: linear-gradient(180deg, var(--subtle-fill-strong), var(--subtle-fill));
    }

    .quicklook-kicker {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .quicklook-value {
      color: var(--text);
      font-size: clamp(17px, 2.3vw, 22px);
      line-height: 1.15;
      font-weight: 900;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }

    .quicklook-item.primary .quicklook-value {
      font-size: clamp(24px, 4vw, 34px);
    }

    .quicklook-item.primary .quicklook-value[data-trend-tone="building"] {
      color: var(--green);
    }

    .quicklook-item.primary .quicklook-value[data-trend-tone="falling_off"] {
      color: var(--red);
    }

    .quicklook-item.primary .quicklook-value[data-trend-tone="holding"] {
      color: var(--amber);
    }

    .stat.empty {
      border-style: dashed;
      opacity: 0.58;
    }

    .stat.empty .value {
      color: var(--muted);
    }

    .source-line {
      margin-top: 28px;
      color: var(--muted);
      font-size: clamp(18px, 2.4vw, 25px);
      line-height: 1.35;
      font-weight: 650;
    }

    .rider-widget {
      margin-top: 18px;
      border: 2px solid var(--line);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(119, 185, 232, 0.10), var(--panel-2));
      padding: clamp(18px, 3vw, 26px) clamp(9px, 1.5vw, 13px);
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      align-items: stretch;
    }

    .wind-card .rider-widget {
      margin-top: 0;
      margin-bottom: 18px;
    }

    /* Keep the live wind sequence stable regardless of source markup or viewport rules. */
    .rider-widget > .wind-readout-stack { order: 1; }
    .rider-widget > .rider-trend-note { order: 2; }

    .tide-items-widget {
      margin-bottom: 18px;
      border: 2px solid var(--line);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(119, 185, 232, 0.10), var(--panel-2));
      padding: clamp(18px, 3vw, 26px) clamp(9px, 1.5vw, 13px);
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      align-items: stretch;
    }

    .tide-items-widget > .tide-level-widget { order: 1; }
    .tide-items-widget > .tide-trend-bubble { order: 2; margin-top: 12px; }
    .tide-items-widget > .tide-graph-widget { order: 3; margin-top: 0; }

    .tide-items-widget > .tide-call {
      min-width: 0;
      display: grid;
      gap: 14px;
      margin: 0 0 3px;
    }

    .tide-call .eyebrow {
      margin: 0;
    }

    .tide-items-widget.has-open-title > .tide-call { order: 1; }
    .tide-items-widget.has-open-title > .tide-level-widget { order: 2; }
    .tide-items-widget.has-open-title > .tide-graph-widget { order: 3; }

    .tide-trend-bubble {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid color-mix(in srgb, var(--blue) 62%, transparent);
      border-radius: 16px;
      background: color-mix(in srgb, var(--blue) 10%, var(--panel-2));
      padding: 13px 16px;
      color: var(--text);
      font-size: clamp(15px, 1.7vw, 18px);
      font-weight: 800;
      line-height: 1.4;
    }

    .tide-trend-bubble[hidden] { display: none; }

    :root[data-theme="light"] .rider-widget,
    :root[data-theme="light"] .tide-items-widget,
    :root[data-theme="light"] .launch-widget {
      background: linear-gradient(145deg, #ecf8fb 0%, #f8fcff 58%, #eef5ff 100%);
      box-shadow: 0 16px 42px rgba(32, 127, 157, 0.1);
    }

    .rider-call {
      min-width: 0;
      display: grid;
      gap: 14px;
    }

    .eyebrow {
      color: var(--muted);
      font-size: clamp(15px, 1.45vw, 18px);
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .wind-source-label {
      margin-left: 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .rider-call strong {
      color: var(--text);
      font-size: clamp(42px, 7vw, 74px);
      line-height: 0.96;
      font-weight: 900;
      letter-spacing: 0;
      align-self: center;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.18em;
    }

    .rider-archive-note {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.3;
      font-weight: 750;
    }

    .rider-archive-note[hidden] {
      display: none;
    }

    .rider-widget.is-archive .rider-call strong {
      font-size: clamp(28px, 5vw, 48px);
    }

    .rider-widget .rider-call strong:empty {
      display: none;
    }

    .rider-widget.is-archive .reading strong {
      opacity: 0.78;
    }

    .rider-widget.is-archive .wind-graph-line {
      opacity: 0.78;
    }

    .rider-widget.is-archive.is-standby .reading strong {
      opacity: 0.45;
    }

    .rider-call-primary {
      color: var(--text);
      display: inline-flex;
      align-items: baseline;
      gap: 0.2em;
      white-space: nowrap;
    }

    .rider-call-primary.rider-call-outflow {
      color: var(--amber);
    }

    .rider-call-diamond {
      color: #02070d;
      display: inline-block;
      flex: 0 0 auto;
      line-height: 0.9;
      transform: translateY(-0.02em);
    }

    :root:not([data-theme="light"]) .rider-call-diamond {
      -webkit-text-stroke: 0.035em color-mix(in srgb, var(--blue) 72%, var(--amber) 28%);
      text-shadow:
        0 0 0.04em color-mix(in srgb, var(--blue) 70%, var(--amber) 30%),
        0 0 0.16em rgba(119, 185, 232, 0.46),
        0 0 0.28em rgba(246, 187, 79, 0.22);
    }

    .rider-call-detail {
      color: var(--muted);
      font-size: 0.58em;
      line-height: 1.05;
      font-weight: 850;
      white-space: nowrap;
    }

    .rider-call-separator {
      color: var(--muted);
      margin: 0 0.16em;
    }

    .rider-call-gust {
      color: var(--red);
    }

    .rider-call .steady {
      color: var(--blue);
    }

    .wind-readout-stack {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .reading-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      border: 1.5px solid color-mix(in srgb, var(--blue) 62%, transparent);
      border-bottom: 0;
      border-radius: 12px 12px 0 0;
      background: var(--subtle-fill-strong);
      padding: 8px 12px 4px;
      overflow: hidden;
    }

    .reading {
      min-height: 70px;
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 0 8px 4px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: 13px minmax(0, 1fr);
      align-content: stretch;
      align-items: end;
      column-gap: 4px;
      row-gap: 7px;
      min-width: 0;
    }

    .reading span {
      grid-column: 1 / -1;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .reading strong {
      color: var(--text);
      font-size: clamp(28px, 4.5vw, 42px);
      line-height: 1;
      font-weight: 900;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .reading.lull {
      order: 1;
      grid-column: auto;
    }

    .reading.lull,
    .reading.gusty {
      min-height: 70px;
      align-content: stretch;
    }

    .reading.lull strong {
      color: var(--green);
    }

    .reading.average {
      order: 2;
      grid-column: auto;
      border-left: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line-soft));
    }

    .reading.average span {
      color: var(--muted);
      font-size: 11px;
    }

    .reading.average strong {
      color: var(--text);
      font-size: clamp(28px, 4.5vw, 42px);
    }

    .reading.gusty {
      order: 3;
      grid-column: auto;
      border-left: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line-soft));
    }

    .reading.gusty strong {
      color: var(--red);
    }

    .reading.gusty.is-low-spread {
      border-left-color: color-mix(in srgb, var(--blue) 34%, var(--line-soft));
      background: transparent;
    }

    .reading.gusty.is-low-spread strong {
      color: var(--red);
    }

    .rider-wind-meta {
      min-width: 0;
      min-height: 48px;
      border: 1.5px solid color-mix(in srgb, var(--blue) 36%, var(--line-soft));
      border-top-width: 1px;
      border-radius: 0 0 12px 12px;
      background: color-mix(in srgb, var(--panel) 72%, var(--subtle-fill-strong));
      padding: 3px 4px 4px;
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) auto;
      align-items: center;
      gap: 0;
      white-space: nowrap;
    }

    .rider-wind-meta-item {
      min-width: 0;
      border: 0;
      display: flex;
      align-items: center;
      gap: 5px;
      overflow: hidden;
    }

    .rider-wind-meta-item > span {
      color: var(--muted);
      display: inline;
      min-width: 34px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.06em;
      line-height: 1;
      text-transform: uppercase;
    }

    .rider-wind-meta-item strong {
      color: var(--text);
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.01em;
      line-height: 1.1;
    }

    .rider-wind-meta-direction {
      padding: 1px 10px 1px 7px;
      border-right: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line-soft));
      display: flex;
      align-items: center;
    }

    .rider-wind-meta-direction > div {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
    }

    .rider-wind-meta-direction strong {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .rider-wind-meta-direction em {
      color: var(--muted);
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
    }

    .rider-wind-meta-temps {
      padding: 1px 10px;
      border-right: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
    }

    .wind-graph-widget {
      --wind-graph-line-width: 2;
      --wind-graph-line-avg-width: 2.4;
      --wind-graph-plot-left: calc((22 / 360) * 100%);
      grid-column: 1 / -1;
      margin-top: 12px;
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 0;
      min-width: 0;
      overflow: hidden;
    }

    .tide-items-widget > .tide-graph-widget.wind-graph-widget {
      overflow: visible;
      width: 100%;
    }

    .wind-graph-widget[hidden] {
      display: none;
    }

    .wind-readout-stack > .wind-graph-widget {
      margin-top: 4px;
    }

    .wind-direction-graph-widget {
      --wind-direction-card-pad-x: clamp(9px, 1.5vw, 13px);
      grid-column: 1 / -1;
      order: 6;
      margin-top: 18px;
      border: 2px solid var(--line);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(119, 185, 232, 0.10), var(--panel-2));
      padding: clamp(18px, 3vw, 26px) var(--wind-direction-card-pad-x);
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      align-items: stretch;
      min-width: 0;
      overflow: hidden;
    }

    :root[data-theme="light"] .wind-direction-graph-widget {
      background: linear-gradient(145deg, #ecf8fb 0%, #f8fcff 58%, #eef5ff 100%);
      box-shadow: 0 16px 42px rgba(32, 127, 157, 0.1);
    }

    .wind-direction-graph-widget[hidden] { display: none; }

    .wind-direction-graph-widget .rider-call {
      gap: 14px;
    }

    .wind-direction-graph-widget .rider-call strong {
      font-size: clamp(22px, 5.2vw, 28px);
      line-height: 1.05;
      text-transform: none;
    }

    .wind-direction-graph-widget .rider-call strong.is-unclassified {
      color: color-mix(in srgb, var(--text) 78%, var(--muted));
    }

    .wind-direction-graph-widget .rider-call strong:empty {
      display: none;
    }

    .share-osprey-widget {
      margin: 18px 0 8px;
    }

    .share-osprey-card {
      margin: 0;
      padding: 16px 14px 14px;
      border-radius: 16px;
      background: var(--box);
      border: 1px solid var(--line-soft);
      display: grid;
      grid-template-columns: 148px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
    }

    .share-osprey-qr {
      width: 148px;
      height: 148px;
      padding: 8px;
      border-radius: 12px;
      background: #fff;
    }

    :root[data-theme="dark"] .share-osprey-qr {
      background: #f4f7fb;
    }

    .share-osprey-qr img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .share-osprey-kicker {
      margin: 0 0 4px;
      color: var(--green);
      font-size: 13px;
      font-weight: 850;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .share-osprey-title {
      margin: 0 0 6px;
      color: var(--text);
      font-size: 20px;
      font-weight: 800;
      line-height: 1.2;
    }

    .share-osprey-note {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .share-osprey-target {
      grid-column: 1 / -1;
      margin: 2px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .share-osprey-target a {
      color: inherit;
      font-weight: 700;
      text-decoration: none;
    }

    .wind-direction-graph-widget .wind-graph-plot {
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    .wind-direction-graph-widget .wind-graph-y-tick,
    .wind-direction-graph-widget .wind-graph-x-tick {
      pointer-events: none;
    }

    .wind-direction-graph-widget .wind-graph-hit-area {
      cursor: ew-resize;
      touch-action: pan-y;
    }

    .wind-direction-graph-line {
      fill: none;
      stroke: var(--amber);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .wind-direction-graph-latest {
      fill: var(--amber);
      stroke: var(--panel);
      stroke-width: 2;
      vector-effect: non-scaling-stroke;
    }

    .wind-direction-graph-empty {
      min-height: 220px;
      display: grid;
      place-items: center;
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
    }

    .wind-direction-stack {
      min-width: 0;
      display: grid;
      gap: 8px;
    }

    .wind-direction-graph-widget .wind-graph-x-tick text {
      text-anchor: middle;
    }

    .wind-direction-graph-widget .wind-graph-y-tick text {
      font-size: 7px;
      font-weight: 800;
    }

    .wind-direction-graph-widget .wind-graph-y-tick .wind-direction-y-cardinal,
    .wind-direction-graph-widget .wind-graph-y-tick .wind-direction-y-deg {
      font-size: 7px;
      font-weight: 800;
    }

    .wind-direction-facts {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      width: auto;
      margin-left: calc(5 / 320 * 100%);
      margin-right: calc(18 / 320 * 100%);
      padding: 5px 4px 6px;
      border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent);
      border-radius: 10px;
      background: color-mix(in srgb, var(--subtle-fill-strong, var(--panel)) 55%, transparent);
      overflow: hidden;
    }

    .wind-direction-fact {
      min-width: 0;
      display: grid;
      gap: 2px;
      padding: 0 6px;
      border-right: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line-soft, var(--line)));
    }

    .wind-direction-fact:first-child {
      padding-left: 2px;
    }

    .wind-direction-fact:nth-child(4) {
      border-right: 0;
      padding-right: 2px;
    }

    .wind-direction-fact span {
      color: color-mix(in srgb, var(--muted) 82%, var(--panel));
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.05em;
      line-height: 1.1;
      text-transform: uppercase;
    }

    .wind-direction-fact strong {
      color: color-mix(in srgb, var(--text) 58%, var(--muted));
      font-size: 11px;
      font-weight: 650;
      letter-spacing: 0;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .wind-direction-graph-widget .wind-graph-plot-frame > .wind-graph-range {
      top: 14px;
      right: calc(18 / 320 * 100% + 8px);
      border-color: transparent;
      background: transparent;
    }

    .wind-direction-graph-widget .wind-graph-range {
      border-color: transparent;
    }

    .wind-direction-graph-widget .wind-graph-range button.is-active {
      background: var(--blue);
      color: var(--panel);
    }

    .wind-direction-inspector-line {
      stroke: color-mix(in srgb, var(--text) 56%, transparent);
      stroke-dasharray: 3 3;
      stroke-width: 1.1;
      pointer-events: none;
      vector-effect: non-scaling-stroke;
    }

    .wind-direction-inspector-dot {
      fill: var(--amber);
      stroke: var(--panel);
      stroke-width: 2;
      pointer-events: none;
      vector-effect: non-scaling-stroke;
    }

    .wind-direction-quality {
      --wind-direction-quality-tone: var(--muted);
      grid-column: 1 / -1;
      min-width: 0;
      margin: 6px -4px -6px;
      padding: 0;
      display: block;
      border: 0;
      border-radius: 0;
      background: transparent;
      overflow: hidden;
    }

    .wind-direction-quality-caption,
    .wind-direction-quality small {
      display: block;
      grid-column: auto;
      margin: 0;
      padding: 10px var(--wind-direction-card-pad-x) 11px;
      border-top: 1px solid color-mix(in srgb, var(--wind-direction-quality-tone) 32%, transparent);
      background: color-mix(in srgb, var(--muted) 12%, var(--panel));
      color: var(--text);
      font-size: 13px;
      line-height: 1.25;
      font-weight: 800;
      text-align: center;
      min-height: calc(21px + 2.5em);
      box-sizing: border-box;
    }

    .wind-direction-quality.steady .wind-direction-quality-caption,
    .wind-direction-quality.steady small {
      border-top-color: color-mix(in srgb, var(--green) 32%, transparent);
      background: color-mix(in srgb, var(--green-soft) 72%, var(--panel));
    }

    .wind-direction-quality.typical .wind-direction-quality-caption,
    .wind-direction-quality.typical small {
      border-top-color: color-mix(in srgb, var(--blue) 32%, transparent);
      background: color-mix(in srgb, var(--blue-soft) 72%, var(--panel));
    }

    .wind-direction-quality.variable .wind-direction-quality-caption,
    .wind-direction-quality.variable small {
      border-top-color: color-mix(in srgb, var(--amber) 38%, transparent);
      background: color-mix(in srgb, var(--amber-soft) 76%, var(--panel));
    }

    .wind-direction-quality.highly-variable .wind-direction-quality-caption,
    .wind-direction-quality.highly-variable small {
      border-top-color: color-mix(in srgb, var(--red) 38%, transparent);
      background: color-mix(in srgb, var(--red-soft) 76%, var(--panel));
    }

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

    .wind-graph-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 18px 2px;
    }

    .wind-graph-widget .wind-graph-day-head {
      justify-content: flex-start;
      position: relative;
      z-index: 2;
      padding: 0 8px 0 var(--wind-graph-plot-left);
      margin: 0 0 -8px;
    }

    .wind-graph-day-head[hidden] {
      display: none;
    }

    .wind-graph-day-stepper {
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }

    .wind-graph-day-stepper button {
      appearance: none;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font: inherit;
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
      min-width: 22px;
      padding: 4px 2px;
      text-align: center;
    }

    .wind-graph-day-stepper button:disabled {
      cursor: default;
      opacity: 0.28;
    }

    .wind-graph-day-stepper button:focus-visible {
      outline: 2px solid var(--green);
      outline-offset: 2px;
    }

    .wind-graph-day-stepper [data-wind-graph-day-caption] {
      color: var(--text);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.04em;
      line-height: 1;
      text-transform: uppercase;
      white-space: nowrap;
      min-width: 0;
      text-align: center;
      transition: color 120ms ease;
    }

    .wind-graph-day-stepper [data-wind-graph-day-caption].is-inspecting {
      color: var(--muted);
    }

    .wind-graph-day-stepper [data-wind-graph-inspect-time] {
      color: var(--text);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.04em;
      line-height: 1;
      margin-left: 6px;
      min-width: 7.2ch;
      text-align: left;
      text-transform: uppercase;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      transition: color 120ms ease;
    }

    .wind-graph-day-stepper [data-wind-graph-inspect-time].is-inspecting {
      color: var(--amber);
    }

    .wind-graph-day-stepper [data-wind-graph-inspect-time][hidden] {
      display: none;
    }

    .wind-graph-title {
      color: var(--muted);
      font-size: 15px;
      line-height: 1;
    }

    .wind-graph-range {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      border: 1px solid color-mix(in srgb, var(--blue) 48%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--panel) 72%, transparent);
      padding: 2px;
      flex: 0 0 auto;
    }

    .wind-graph-range button {
      appearance: none;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font: inherit;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
      min-width: 34px;
      padding: 6px 8px;
      text-align: center;
    }

    .wind-graph-range button.is-active {
      background: var(--blue);
      color: var(--panel);
    }

    .wind-graph-range button:focus-visible {
      outline: 2px solid var(--green);
      outline-offset: 2px;
    }

    .wind-graph-plot-frame {
      position: relative;
      min-width: 0;
    }

    .wind-graph-plot-frame > .wind-graph-range {
      position: absolute;
      top: calc((10 / 270) * 100% + 8px);
      right: calc((6 / 360) * 100% + 8px);
      z-index: 3;
      margin: 0;
      border-color: transparent;
      background: transparent;
      padding: 0;
      pointer-events: none;
    }

    .wind-graph-plot-frame > .wind-graph-range button {
      min-width: 26px;
      padding: 5px 6px;
      font-size: 9px;
      font-weight: 800;
      pointer-events: auto;
    }

    .wind-graph-widget .wind-graph-plot-frame > .wind-graph-standby-note {
      position: absolute;
      left: var(--wind-graph-plot-left, 8%);
      right: 10px;
      top: 22%;
      bottom: 24%;
      z-index: 2;
      display: grid;
      place-items: center;
      margin: 0;
      padding: 0 12px;
      pointer-events: none;
      color: var(--muted);
      font-size: clamp(12px, 2.6vw, 15px);
      font-weight: 800;
      letter-spacing: 0.01em;
      line-height: 1.3;
      text-align: center;
    }

    .wind-graph-widget .wind-graph-plot-frame > .wind-graph-standby-note[hidden] {
      display: none;
    }

    .tide-graph-widget .wind-graph-plot-frame > .wind-graph-range {
      top: 18px;
      right: 10px;
    }

    .wind-graph-range[hidden] {
      display: none;
    }

    .wind-graph-day-label {
      justify-self: end;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: 0.02em;
      text-align: right;
      padding: 0 8px 0 4px;
      white-space: nowrap;
    }

    .wind-graph-day-label[hidden] {
      display: none;
    }

    .wind-graph-plot {
      position: relative;
      min-width: 0;
      overflow: hidden;
      max-width: none;
      margin-inline: 0;
    }

    .wind-graph-plot .osprey-jump-game {
      position: absolute;
      z-index: 2;
      display: block;
      padding: 0;
      border: 0;
      border-radius: 2.41% / 3.45%;
      background: transparent;
      cursor: pointer;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      clip-path: inset(0.4px round 2.41% / 3.45%);
    }

    .wind-graph-plot .osprey-jump-game:focus-visible {
      outline: 2px solid var(--green);
      outline-offset: -3px;
    }

    :root[data-theme="dark"] .wind-graph-plot .osprey-jump-game {
      filter: brightness(0) invert(1);
    }

    .wind-graph-widget .wind-graph-plot {
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    .wind-graph-plot svg {
      display: block;
      width: 100%;
      height: auto;
      min-height: 148px;
    }

    .wind-graph-plot .wind-speed-graph {
      min-height: 0;
      font-family: Inter, ui-sans-serif, system-ui, sans-serif;
      font-variant-numeric: tabular-nums;
    }

    .wind-graph-frame {
      fill: none;
      stroke: color-mix(in srgb, var(--blue) 24%, var(--line));
      stroke-width: 1.2;
    }

    :root[data-theme="light"] .wind-graph-frame {
      fill: #ffffff;
    }

    .wind-graph-y-tick line,
    .wind-graph-x-tick line {
      stroke: color-mix(in srgb, var(--line) 68%, transparent);
      stroke-width: 0.7;
    }

    .wind-speed-graph .wind-graph-y-tick.is-minor > line {
      stroke: color-mix(in srgb, var(--line) 28%, transparent);
      stroke-width: 0.4;
    }

    .wind-speed-graph .wind-graph-x-tick.is-odd > line {
      stroke-width: 0.45;
    }

    .wind-speed-graph .wind-graph-x-tick.is-even > line {
      stroke-width: 0.95;
    }

    .wind-graph-axis-tick {
      stroke: color-mix(in srgb, var(--muted) 70%, var(--line));
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }

    .wind-graph-y-tick text,
    .wind-graph-x-tick text {
      fill: var(--muted);
      font-size: 10px;
      font-weight: 850;
      text-anchor: middle;
    }

    .wind-graph-y-tick text {
      text-anchor: end;
    }

    .wind-graph-x-tick text {
      text-anchor: start;
    }

    .wind-speed-graph .wind-graph-y-tick text,
    .wind-speed-graph .wind-graph-x-tick text {
      fill: var(--muted);
      font-family: Inter, ui-sans-serif, system-ui, sans-serif;
      font-size: 11px;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.015em;
    }

    .wind-speed-graph .wind-graph-y-tick.has-major-label text {
      font-size: 13px;
      font-weight: 700;
    }

    .wind-speed-graph .wind-graph-y-tick.has-minor-label text {
      fill: color-mix(in srgb, var(--muted) 78%, var(--panel));
      font-size: 9.5px;
      font-weight: 500;
    }

    .wind-speed-graph .wind-graph-y-tick text {
      text-anchor: end;
    }

    .wind-speed-graph .wind-graph-x-tick text {
      text-anchor: middle;
    }

    .tide-graph-widget .wind-graph-y-tick.is-minor > line {
      stroke: color-mix(in srgb, var(--line) 28%, transparent);
      stroke-width: 0.4;
    }

    .tide-graph-widget .wind-graph-x-tick.is-odd > line {
      stroke-width: 0.45;
    }

    .tide-graph-widget .wind-graph-x-tick.is-even > line {
      stroke-width: 0.95;
    }

    .tide-graph-widget .wind-graph-y-tick text,
    .tide-graph-widget .wind-graph-x-tick text {
      fill: var(--muted);
      font-family: Inter, ui-sans-serif, system-ui, sans-serif;
      font-size: 11px;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.015em;
    }

    .tide-graph-widget .wind-graph-y-tick.has-minor-label text {
      fill: color-mix(in srgb, var(--muted) 78%, var(--panel));
      font-size: 8px;
      font-weight: 400;
    }

    .tide-graph-widget .wind-graph-x-tick text {
      text-anchor: middle;
    }

    .tide-graph-widget .wind-graph-x-tick.is-first text {
      text-anchor: start;
    }

    .tide-graph-widget .wind-graph-x-tick.is-last text {
      text-anchor: end;
    }

    .tide-graph-widget .tide-graph-plot {
      overflow: visible;
    }

    .tide-graph-widget .tide-graph-plot svg {
      min-height: 248px;
      overflow: visible;
      width: 100%;
    }

    .tide-graph-current-dot {
      fill: var(--blue);
      stroke: var(--panel);
      stroke-width: 2;
      pointer-events: none;
    }

    .tide-items-widget .wind-graph-inspector-dot.tide {
      fill: var(--amber);
      stroke: var(--panel);
    }

    .tide-graph-sandbar-line,
    .tide-graph-covered-line {
      stroke: color-mix(in srgb, var(--amber) 70%, var(--line));
      stroke-width: 1;
      stroke-dasharray: 4 3;
    }

    .tide-graph-sandbar-label,
    .tide-graph-covered-label {
      fill: color-mix(in srgb, var(--amber) 80%, var(--muted));
      font-size: 8px;
      font-weight: 600;
      text-anchor: end;
    }

    .tide-graph-widget .wind-graph-inspector-line {
      stroke: color-mix(in srgb, var(--text) 88%, transparent);
      stroke-width: 2;
      stroke-dasharray: 4 4;
      stroke-linecap: round;
    }

    .wind-graph-line {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: var(--wind-graph-line-width, 2);
      vector-effect: non-scaling-stroke;
    }

    .wind-graph-line.lull {
      stroke: var(--green);
      opacity: 1;
    }

    .wind-graph-line.average {
      stroke: var(--text);
      stroke-width: var(--wind-graph-line-avg-width, 2.4);
    }

    .wind-graph-line.gust {
      stroke: var(--red);
      opacity: 0.9;
    }

    .wind-graph-hit-area {
      cursor: crosshair;
      fill: transparent;
      pointer-events: all;
      touch-action: pan-y;
    }

    .wind-graph-widget .wind-graph-hit-area {
      cursor: ew-resize;
      touch-action: pan-y;
    }

    .wind-graph-inspector-layer,
    .wind-graph-inspector-readout,
    .wind-graph-inspector-dot,
    .wind-graph-inspector-line {
      pointer-events: none;
    }

    .wind-graph-inspector-line {
      stroke: color-mix(in srgb, var(--text) 56%, transparent);
      stroke-dasharray: 3 3;
      stroke-width: 1.1;
      vector-effect: non-scaling-stroke;
    }

    .wind-graph-inspector-axis-notch {
      stroke: color-mix(in srgb, var(--text) 84%, transparent);
      stroke-linecap: round;
      stroke-width: 2;
      vector-effect: non-scaling-stroke;
    }

    .wind-graph-inspector-dot {
      fill: var(--panel);
      stroke-width: 2.3;
      vector-effect: non-scaling-stroke;
    }

    .wind-graph-widget .wind-graph-inspector-dot {
      stroke: none;
      stroke-width: 0;
    }

    .wind-graph-inspector-dot.lull {
      stroke: var(--green);
    }

    .wind-graph-widget .wind-graph-inspector-dot.lull {
      fill: var(--green);
    }

    .wind-graph-inspector-dot.average {
      stroke: var(--text);
    }

    .wind-graph-widget .wind-graph-inspector-dot.average {
      fill: var(--text);
    }

    .wind-graph-inspector-dot.gust {
      stroke: var(--red);
    }

    .wind-graph-widget .wind-graph-inspector-dot.gust {
      fill: var(--red);
    }

    .wind-graph-inspector-readout rect {
      fill: color-mix(in srgb, var(--panel) 92%, transparent);
      stroke: color-mix(in srgb, var(--blue) 42%, var(--line));
      stroke-width: 0.9;
    }

    .wind-graph-inspector-time,
    .wind-graph-inspector-label,
    .wind-graph-inspector-value {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .wind-graph-inspector-time {
      fill: var(--text);
    }

    .wind-graph-inspector-label,
    .wind-graph-inspector-value {
      fill: var(--text);
    }

    .wind-graph-inspector-label.lull,
    .wind-graph-inspector-value.lull {
      fill: var(--blue);
    }

    .wind-graph-inspector-label.average,
    .wind-graph-inspector-value.average {
      fill: var(--green);
    }

    .wind-graph-inspector-label.gust,
    .wind-graph-inspector-value.gust {
      fill: var(--red);
    }

    .tide-widget {
      margin-top: 18px;
      border: 2px solid var(--line);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(246, 187, 79, 0.10), var(--panel-2));
      padding: clamp(18px, 3vw, 26px);
      display: grid;
      gap: 18px;
    }

    .tide-widget[hidden] {
      display: none;
    }

    :root[data-theme="light"] .tide-widget {
      background: linear-gradient(145deg, #fff8e9 0%, #fffefa 54%, #f3fbf6 100%);
      box-shadow: 0 16px 42px rgba(184, 118, 22, 0.1);
    }

    .tide-level-widget {
      margin-top: 18px;
      border: 2px solid var(--line);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(119, 185, 232, 0.12), var(--panel-2));
      padding: clamp(18px, 3vw, 26px);
      display: grid;
      gap: 16px;
    }

    :root[data-theme="light"] .tide-level-widget {
      background: linear-gradient(145deg, #ecf8fb 0%, #fffefa 58%, #eef5ff 100%);
      box-shadow: 0 16px 42px rgba(32, 127, 157, 0.1);
    }

    .tide-items-widget > .tide-level-widget {
      margin-top: 0;
      border: 2px solid color-mix(in srgb, var(--blue) 62%, transparent);
      border-radius: 16px;
      background: var(--subtle-fill-strong);
      padding: 14px 18px 13px;
      gap: 12px;
      box-shadow: none;
    }

    :root[data-theme="light"] .tide-items-widget > .tide-level-widget {
      background: var(--subtle-fill-strong);
      box-shadow: none;
    }

    .tide-level-top {
      display: grid;
      gap: 6px;
    }

    .tide-items-widget > .tide-level-widget .tide-level-top {
      gap: 0;
    }

    .tide-level-widget {
      --tide-current-tone: var(--blue);
    }

    .tide-level-widget[data-tide-movement-speed="steady"] {
      --tide-current-tone: var(--amber);
    }

    .tide-level-widget[data-tide-movement-speed="fast"] {
      --tide-current-tone: var(--red);
    }

    .tide-level-readout {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      align-items: center;
      gap: clamp(16px, 3vw, 30px);
      min-width: 0;
    }

    .tide-current-fact,
    .tide-movement-fact {
      min-width: 0;
      min-height: 78px;
      display: grid;
      grid-template-rows: minmax(15px, auto) minmax(0, 1fr);
      align-content: stretch;
      justify-items: start;
      gap: 8px;
    }


    .tide-current-label {
      color: var(--blue);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.06em;
      line-height: 1;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .tide-current-label.is-clock {
      color: var(--amber);
      font-size: 15px;
      letter-spacing: 0.02em;
      font-variant-numeric: tabular-nums;
      text-transform: none;
    }

    .tide-flow-label {
      display: none;
      color: var(--muted);
    }

    .tide-change-label {
      color: var(--blue);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .tide-current-body {
      display: flex;
      align-items: center;
      min-width: 0;
    }

    .tide-current-body > strong {
      color: var(--tide-current-tone);
      font-size: clamp(34px, 5.1vw, 48px);
      line-height: 0.95;
      font-weight: 900;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .tide-movement-fact .tide-level-direction {
      width: 100%;
      min-height: 0;
      align-self: center;
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 0;
      gap: clamp(10px, 1.45vw, 14px);
      font-size: clamp(18px, 2.5vw, 25px);
    }

    .tide-movement-fact .tide-level-direction .tide-direction-arrow {
      flex: 0 0 clamp(44px, 5.4vw, 56px);
      width: clamp(44px, 5.4vw, 56px);
      height: clamp(44px, 5.4vw, 56px);
      font-size: clamp(34px, 4.4vw, 44px);
    }

    .tide-movement-fact .tide-level-direction .tide-direction-copy {
      gap: 1px;
      min-width: 0;
    }

    .tide-movement-fact .tide-level-direction .tide-direction-copy strong {
      font-size: clamp(18px, 2.45vw, 24px);
      line-height: 1;
      white-space: nowrap;
    }

    .tide-movement-fact .tide-level-direction .tide-direction-copy span {
      font-size: clamp(18px, 2.45vw, 24px);
      text-transform: none;
    }

    .tide-level-grid {
      min-height: 0;
      border: 0;
      border-top: 2px solid color-mix(in srgb, var(--blue) 30%, transparent);
      border-radius: 0;
      background: transparent;
      padding: 12px 0 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: clamp(18px, 4vw, 34px);
    }

    .tide-level-fact {
      min-width: 0;
      display: grid;
      grid-template-columns: 1fr;
      align-content: start;
      justify-items: start;
      gap: 5px;
    }

    .tide-level-fact + .tide-level-fact {
      border-left: 2px solid color-mix(in srgb, var(--blue) 24%, transparent);
      padding-left: clamp(16px, 3vw, 28px);
    }

    .tide-level-fact > span {
      color: var(--muted);
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .tide-level-fact strong {
      color: var(--text);
      font-size: clamp(17px, 2.5vw, 20px);
      line-height: 1;
      font-weight: 900;
      letter-spacing: 0;
      overflow-wrap: anywhere;
      justify-self: start;
      text-align: left;
    }

    .tide-extreme {
      display: grid;
      justify-items: start;
      gap: 3px;
    }

    .tide-extreme-height {
      color: var(--text);
      font-size: clamp(17px, 2.5vw, 20px);
      line-height: 0.95;
      font-weight: 950;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .tide-extreme-time {
      color: var(--muted);
      font-size: clamp(13px, 1.9vw, 16px);
      line-height: 1;
      font-weight: 850;
      white-space: nowrap;
    }

    .tide-time-period {
      font-size: 0.82em;
      font-variant-caps: all-small-caps;
      font-weight: 950;
      letter-spacing: 0;
    }

    .tide-top {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: start;
    }

    .tide-clearance-layout {
      min-width: 0;
      flex: 1 1 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 104px;
      gap: 18px;
      align-items: start;
    }

    .tide-top > .help-wrap .help-button {
      width: 34px;
      height: 34px;
      font-size: 16px;
    }

    .tide-copy {
      min-width: 0;
      display: grid;
      gap: 8px;
    }

    .tide-copy strong {
      color: var(--text);
      font-size: clamp(39px, 6vw, 64px);
      line-height: 0.96;
      font-weight: 900;
      letter-spacing: 0;
    }

    .tide-copy .very-shallow,
    .clearance-readout b.very-shallow {
      color: var(--zone-very-shallow);
    }

    .tide-copy .sandbar,
    .clearance-readout b.sandbar {
      color: var(--zone-sandbar);
    }

    .tide-copy .shallow,
    .clearance-readout b.shallow {
      color: var(--zone-shallow);
    }

    .tide-copy .rideable,
    .clearance-readout b.rideable {
      color: var(--zone-rideable);
    }

    .tide-copy .deep,
    .clearance-readout b.deep {
      color: var(--zone-deep);
    }

    .clearance-readout {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: clamp(18px, 2.4vw, 23px);
      line-height: 1.25;
      font-weight: 750;
    }

    .clearance-model-note {
      color: var(--muted);
      font-size: clamp(44px, 7vw, 72px);
      line-height: 0.94;
      font-weight: 950;
      letter-spacing: 0;
    }

    .clearance-kicker {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .clearance-metric-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px 14px;
      min-width: 0;
    }

    .clearance-readout b {
      font-size: clamp(31px, 4.5vw, 44px);
      line-height: 1;
      font-weight: 900;
      letter-spacing: 0;
    }

    .tide-direction {
      --tide-tone: var(--muted);
      width: fit-content;
      max-width: 100%;
      border: 1px solid color-mix(in srgb, var(--tide-tone) 55%, transparent);
      border-radius: 999px;
      padding: 7px 11px 7px 7px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--subtle-fill-strong);
      color: var(--tide-tone);
      font-size: clamp(15px, 2vw, 19px);
      line-height: 1;
      font-weight: 950;
      white-space: nowrap;
    }

    .tide-direction-arrow {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      background: var(--tide-tone);
      color: var(--page);
      font-size: 28px;
      line-height: 1;
      font-weight: 950;
    }

    .tide-direction-copy {
      display: grid;
      gap: 2px;
    }

    .tide-direction-copy strong {
      color: currentColor;
      font-size: clamp(14px, 1.8vw, 17px);
      line-height: 1;
      font-weight: 950;
    }

    .tide-direction-copy span {
      color: var(--muted);
      font-size: 11px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .tide-direction.slow {
      --tide-tone: var(--blue);
    }

    .tide-direction.steady {
      --tide-tone: var(--amber);
    }

    .tide-direction.fast {
      --tide-tone: var(--red);
    }

    .clearance-zone {
      width: fit-content;
      max-width: 100%;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      padding: 8px 11px;
      background: var(--subtle-fill-strong);
      color: var(--text);
      font-size: clamp(14px, 2vw, 18px);
      line-height: 1;
      font-weight: 950;
      white-space: nowrap;
    }

    .clearance-zone.sandbar {
      color: #112034;
      background: var(--sandbar);
      border-color: transparent;
    }

    .clearance-zone.very-shallow {
      color: #fffaf4;
      background: #de5b2a;
      border-color: transparent;
    }

    .clearance-zone.shallow {
      color: #241904;
      background: #e8bf38;
      border-color: transparent;
    }

    .clearance-zone.rideable {
      color: #eefaff;
      background: #2f83a0;
      border-color: transparent;
    }

    .clearance-zone.deep {
      color: #f4f8ff;
      background: #3f61b0;
      border-color: transparent;
    }

    .clearance-commentary {
      max-width: 760px;
      margin: 4px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
      color: var(--muted);
      font-size: clamp(16px, 2.2vw, 21px);
      line-height: 1.28;
      font-weight: 760;
    }

    .clearance-note {
      position: relative;
      padding: 2px 0 2px 12px;
      border-left: 3px solid rgba(168, 188, 207, 0.36);
    }

    .clearance-note-primary {
      color: var(--muted);
    }

    .clearance-note-callout {
      color: var(--text);
      border-left-color: var(--amber);
      font-weight: 900;
    }

    .clearance-more {
      max-width: 760px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 10px;
      color: var(--muted);
      font-size: clamp(13px, 1.8vw, 16px);
      line-height: 1.35;
      font-weight: 750;
    }

    .clearance-more .pill {
      min-height: 34px;
      padding: 0 12px;
      font-size: clamp(13px, 1.8vw, 16px);
    }

    .clearance-more-detail {
      color: var(--muted);
      font-size: clamp(13px, 1.8vw, 16px);
      line-height: 1.35;
      font-weight: 750;
    }

    .clearance-more.is-hidden {
      display: none;
    }

    .clearance-gauge {
      --marker: 0%;
      display: grid;
      gap: 9px;
      justify-items: center;
      min-width: 0;
    }

    .clearance-gauge-label {
      color: var(--muted);
      font-size: 11px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
    }

    .clearance-vertical-scale {
      position: relative;
      width: 42px;
      height: 292px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      background: var(--box);
      display: flex;
      flex-direction: column-reverse;
      overflow: visible;
    }

    .clearance-vertical-scale .depth-segment {
      width: 100%;
      height: auto;
      min-height: 0;
      flex: var(--share) 0 0;
    }

    .clearance-vertical-scale .depth-segment.sandbar {
      border-radius: 0 0 999px 999px;
    }

    .clearance-vertical-scale .depth-segment.deep {
      border-radius: 999px 999px 0 0;
    }

    .clearance-vertical-marker {
      position: absolute;
      left: 50%;
      bottom: clamp(12px, var(--marker), calc(100% - 12px));
      width: 28px;
      height: 28px;
      transform: translate(-50%, 50%);
      border: 3px solid var(--text);
      border-radius: 999px;
      background: var(--amber);
      box-shadow: var(--knob-shadow);
      pointer-events: none;
    }

    .clearance-vertical-marker::after {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: var(--panel);
      font-size: 18px;
      font-weight: 950;
      line-height: 1;
      transform: translateY(-1px);
    }

    [data-tide-direction="rising"] .clearance-vertical-marker::after {
      content: "↑";
    }

    [data-tide-direction="falling"] .clearance-vertical-marker::after {
      content: "↓";
    }

    [data-tide-direction="flat"] .clearance-vertical-marker::after {
      content: "→";
    }

    .clearance-vertical-ticks {
      position: absolute;
      inset: 8px -54px 8px auto;
      width: 42px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1;
      font-weight: 850;
    }

    .clearance-vertical-ticks span {
      position: absolute;
      right: 0;
      bottom: var(--y);
      transform: translateY(50%);
    }

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

    .tide-fact {
      border: 2px solid var(--line);
      border-radius: 18px;
      background: var(--subtle-fill-strong);
      padding: 14px 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .tide-fact span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .tide-fact strong {
      color: var(--text);
      font-size: clamp(24px, 3.2vw, 34px);
      line-height: 1;
      font-weight: 900;
      letter-spacing: 0;
    }

    .sandbar-status {
      width: fit-content;
      max-width: 100%;
      border-radius: 999px;
      padding: 9px 13px;
      color: var(--text);
      background: var(--gray-soft);
      font-size: clamp(20px, 3vw, 30px);
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .sandbar-status.open {
      color: #112034;
      background: var(--sandbar);
    }

    .sandbar-status.covered {
      color: #061825;
      background: var(--blue);
    }

    .launch-widget {
      position: relative;
      margin-top: 18px;
      border: 2px solid var(--line);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(119, 185, 232, 0.10), var(--panel-2));
      padding: clamp(18px, 3vw, 26px);
      display: grid;
      gap: 12px;
    }

    .launch-head {
      display: grid;
      gap: 12px;
      padding-right: 48px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .launch-title-tools {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .launch-title-tools .help-wrap {
      position: absolute;
      top: clamp(18px, 3vw, 26px);
      right: clamp(18px, 3vw, 26px);
    }

    .launch-title-tools .help-button {
      width: 34px;
      height: 34px;
      font-size: 16px;
    }

    .launch-title-tools .help-panel {
      right: auto;
      left: 0;
      text-transform: none;
      letter-spacing: 0;
    }

    .launch-current {
      display: grid;
      justify-items: start;
      gap: 4px;
      min-width: 0;
      text-align: left;
      letter-spacing: 0;
      text-transform: none;
    }

    .launch-current strong {
      color: var(--text);
      font-size: clamp(23px, 3.6vw, 36px);
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0;
    }

    .launch-current span {
      max-width: 34rem;
      color: var(--muted);
      font-size: clamp(13px, 1.8vw, 16px);
      line-height: 1.3;
      font-weight: 750;
    }

    .launch-current span:empty {
      display: none;
    }

    .launch-current.open strong {
      color: var(--sandbar);
    }

    .launch-current.covered strong {
      color: var(--blue);
    }

    .launch-current.caution strong,
    .launch-current.gear-warning strong {
      color: var(--amber);
    }

    .shuttle-widget {
      margin-top: 18px;
      border: 2px solid var(--line);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(72, 241, 138, 0.10), var(--panel-2));
      padding: clamp(18px, 3vw, 26px);
      display: grid;
      gap: 14px;
    }

    :root[data-theme="light"] .shuttle-widget {
      border-color: #9cb5c2;
      background: linear-gradient(145deg, #f8fcfb 0%, #f2f8f8 58%, #edf5f7 100%);
      box-shadow: 0 16px 38px rgba(46, 70, 82, 0.14);
    }

    .shuttle-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    .shuttle-title-row {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .shuttle-title {
      margin: 0;
    }

    .shuttle-schedule-help-wrap {
      position: relative;
      flex: 0 0 auto;
      justify-self: end;
    }

    .shuttle-schedule-help-button {
      width: auto;
      min-width: 0;
      height: 30px;
      border-radius: 999px;
      padding: 0 11px;
      font-size: 12px;
      white-space: nowrap;
    }

    .shuttle-schedule-help-panel {
      left: auto;
      right: 0;
      width: min(360px, calc(100vw - 48px));
    }

    .shuttle-schedule-help-grid {
      display: grid;
      gap: 2px;
    }

    .shuttle-schedule-help-grid div {
      min-width: 0;
      display: grid;
      grid-template-columns: 8px minmax(0, 1fr) auto;
      gap: 6px 10px;
      align-items: baseline;
      border-top: 1px solid var(--line-soft);
      padding: 6px 0 0;
    }

    .shuttle-schedule-help-grid div:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .shuttle-schedule-help-grid div::before {
      content: "";
      width: 8px;
      height: 14px;
      border-radius: 99px;
      background: var(--green);
      align-self: center;
    }

    .shuttle-schedule-help-grid b {
      min-width: 0;
      color: var(--text);
      font-size: 15px;
      line-height: 1.2;
      font-weight: 850;
      font-variant-numeric: tabular-nums;
      overflow-wrap: anywhere;
    }

    .shuttle-schedule-help-grid span {
      min-width: 0;
      color: var(--green);
      font-size: 11px;
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }

    .shuttle-schedule-help-grid .is-break {
      padding-top: 3px;
    }

    .shuttle-schedule-help-grid .is-break::before {
      height: 8px;
      background: var(--red);
    }

    .shuttle-schedule-help-grid .is-break b {
      color: var(--red);
      font-size: 12px;
      font-weight: 650;
    }

    .shuttle-schedule-help-grid .is-break span {
      color: var(--red);
    }

    .shuttle-schedule-help-grid .is-last span,
    .shuttle-schedule-help-grid .is-return span {
      color: var(--amber);
    }

    .shuttle-schedule-help-grid .is-return::before {
      background: var(--amber);
    }

    .shuttle-schedule-help-grid em {
      display: none;
    }

    .shuttle-schedule-note {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      border: 2px solid var(--line);
      border-radius: 18px;
      background: var(--subtle-fill-strong);
      padding: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.2;
      font-weight: 850;
      min-width: 0;
    }

    .shuttle-schedule-item {
      min-width: 0;
      display: grid;
      gap: 6px;
      padding: 12px;
    }

    .shuttle-schedule-item:nth-child(even) {
      border-left: 1px solid var(--line-soft);
    }

    .shuttle-schedule-item:nth-child(n + 3) {
      border-top: 1px solid var(--line-soft);
    }

    .shuttle-schedule-note span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .shuttle-schedule-note b {
      color: var(--text);
      font-weight: 950;
      font-size: clamp(13px, 1.8vw, 16px);
      line-height: 1.1;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }

    .shuttle-schedule-item.is-current-time b {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--green);
    }

    .shuttle-schedule-item.is-current-time b::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--green);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 16%, transparent);
      flex: 0 0 auto;
    }

    .shuttle-schedule-item.is-current-period.is-operating b {
      color: var(--green);
    }

    .shuttle-schedule-item.is-current-period.is-break b,
    .shuttle-schedule-item.is-status.is-break b,
    .shuttle-schedule-item.is-status.is-offline b,
    .shuttle-schedule-item.is-next-break b {
      color: var(--red);
    }

    .shuttle-schedule-item.is-current-period.is-quiet b {
      color: var(--muted);
      font-weight: 650;
    }

    .shuttle-schedule-item.is-next-shuttle b {
      color: var(--green);
    }

    .shuttle-schedule-item.is-status.is-standby b {
      color: var(--amber);
    }

    .shuttle-schedule-item.is-status.is-operating b {
      color: var(--green);
    }

    .shuttle-status {
      min-height: 30px;
      border: 1.5px solid var(--green);
      border-radius: 999px;
      padding: 0 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--green);
      background: var(--green-soft);
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .shuttle-status.running {
      color: #061825;
      border-color: var(--green);
      background: var(--green);
    }

    .shuttle-status.on-break {
      color: var(--amber);
      border-color: var(--amber);
      background: var(--amber-soft);
    }

    .shuttle-status.off-duty {
      color: var(--red);
      border-color: var(--red);
      background: var(--red-soft);
    }

    .shuttle-status.sent {
      color: #061825;
      border-color: var(--green);
      background: var(--green);
    }

    .shuttle-status.waiting {
      color: var(--amber);
      border-color: var(--amber);
      background: var(--amber-soft);
    }

    .shuttle-status.error {
      color: var(--red);
      border-color: var(--red);
      background: var(--red-soft);
    }

    .shuttle-ping-button {
      width: 100%;
      min-height: 58px;
      border: 0;
      border-radius: 16px;
      background: var(--green);
      color: #061825;
      font: inherit;
      font-size: clamp(18px, 2.4vw, 24px);
      font-weight: 950;
      letter-spacing: 0;
      cursor: pointer;
      box-shadow: var(--knob-shadow);
      display: grid;
      place-items: center;
      line-height: 1.08;
    }

    :root[data-theme="light"] .shuttle-ping-button {
      background: linear-gradient(180deg, #2f6f8d 0%, #245a73 100%);
      color: #f6fbff;
      box-shadow: 0 14px 30px rgba(36, 90, 115, 0.18);
    }

    :root[data-theme="light"] .shuttle-ping-button:hover,
    :root[data-theme="light"] .shuttle-ping-button:focus-visible {
      background: linear-gradient(180deg, #337896 0%, #25576f 100%);
    }

    :root[data-theme="light"] .shuttle-schedule-note {
      border-color: #9db8c5;
      background: #eaf3f5;
    }

    :root[data-theme="light"] .shuttle-schedule-item.is-current-time b,
    :root[data-theme="light"] .shuttle-schedule-item.is-current-period.is-operating b,
    :root[data-theme="light"] .shuttle-schedule-item.is-next-shuttle b {
      color: #245a73;
    }

    :root[data-theme="light"] .shuttle-schedule-item.is-status.is-operating b {
      color: var(--green);
    }

    :root[data-theme="light"] .shuttle-schedule-item.is-current-time b::before {
      background: #2f6f8d;
      box-shadow: 0 0 0 4px rgba(47, 111, 141, 0.15);
    }

    .shuttle-button-main {
      display: block;
    }

    .shuttle-button-helper {
      margin-top: -5px;
      color: var(--muted);
      font-size: clamp(12px, 1.55vw, 15px);
      line-height: 1.25;
      font-weight: 850;
      text-align: center;
    }

    .shuttle-composer {
      display: grid;
      gap: 8px;
      margin: 0;
      width: 100%;
      min-width: 0;
    }

    .shuttle-composer[hidden] {
      display: none;
    }

    .shuttle-composer .shuttle-button-helper {
      margin-top: 0;
      text-align: left;
    }

    .shuttle-ping-button.send-mint,
    :root[data-theme="light"] .shuttle-ping-button.send-mint {
      background: #48f18a;
      color: #061825;
      box-shadow: 0 8px 18px rgba(12, 40, 28, 0.22);
    }

    .shuttle-name-field {
      justify-self: center;
      width: min(360px, 100%);
      display: grid;
      gap: 7px;
      text-align: center;
    }

    .shuttle-name-field.is-stacked {
      width: 100%;
      justify-self: stretch;
      text-align: left;
    }

    .shuttle-name-field.is-stacked input {
      text-align: left;
    }

    .shuttle-name-field[hidden] {
      display: none;
    }

    .shuttle-name-field span {
      color: var(--muted);
      font-size: 11px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .shuttle-name-field input {
      width: 100%;
      min-height: 44px;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      background: var(--subtle-fill);
      color: var(--text);
      box-sizing: border-box;
      font: inherit;
      font-size: 16px;
      font-weight: 850;
      line-height: 1.1;
      padding: 0 14px;
      text-align: center;
    }

    .shuttle-name-field input::placeholder {
      color: var(--muted);
      opacity: 0.72;
    }

    .shuttle-name-field input:focus-visible {
      border-color: var(--blue);
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }

    .shuttle-cancel-button {
      justify-self: center;
      min-height: 34px;
      border: 1.5px solid var(--line);
      border-radius: 999px;
      padding: 0 16px;
      background: var(--subtle-fill);
      color: var(--muted);
      font: inherit;
      font-size: 13px;
      line-height: 1;
      font-weight: 900;
      cursor: pointer;
    }

    .shuttle-cancel-button[hidden] {
      display: none;
    }

    .shuttle-cancel-button.is-text {
      min-height: 28px;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
    }

    .shuttle-cancel-button:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }

    .shuttle-ping-button:focus-visible {
      outline: 3px solid var(--blue);
      outline-offset: 3px;
    }

    .shuttle-ping-button.is-confirming {
      background: var(--amber);
      color: #061825;
    }

    :root[data-theme="light"] .shuttle-ping-button.is-confirming {
      background: var(--amber);
      color: #061825;
    }

    .shuttle-ping-button:disabled {
      cursor: not-allowed;
      opacity: 0.68;
      box-shadow: none;
    }

    .shuttle-meta {
      color: var(--muted);
      font-size: clamp(13px, 1.8vw, 16px);
      line-height: 1.35;
      font-weight: 750;
    }

    .shuttle-button-helper:empty,
    .shuttle-meta:empty {
      display: none;
    }

    .window-band {
      position: relative;
      min-height: 22px;
      border: 1px solid var(--line-soft);
      border-radius: 18px;
      background: var(--box);
      display: flex;
      overflow: hidden;
    }

    .window-segment {
      min-width: 0;
      flex: var(--share) 0 0;
      display: grid;
      place-items: center;
      padding: 0 10px;
      color: var(--segment-text);
      font-size: 12px;
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: 0;
      text-align: center;
      text-transform: uppercase;
    }

    .window-segment.is-compact {
      padding: 0;
      font-size: 0;
      letter-spacing: 0;
    }

    .window-segment.open {
      color: #102034;
      background: var(--sandbar);
    }

    .window-segment.covered {
      color: #061825;
      background: linear-gradient(90deg, #2f83a0, #77b9e8);
    }

    .window-segment.caution {
      color: #1f1607;
      background: var(--amber);
    }

    .window-segment.gear-warning {
      color: #241004;
      background: linear-gradient(90deg, #f6bb4f, #ff7a4a);
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.24);
    }

    .launch-help-list {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .launch-help-list li {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      border-top: 1px solid var(--line-soft);
      padding-top: 9px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.3;
      font-weight: 750;
    }

    .launch-swatch {
      width: 18px;
      height: 18px;
      border: 1px solid var(--line-soft);
      border-radius: 5px;
      margin-top: 1px;
    }

    .launch-swatch.open {
      background: var(--sandbar);
    }

    .launch-swatch.covered {
      background: linear-gradient(90deg, #2f83a0, #77b9e8);
    }

    .launch-swatch.caution {
      background: var(--amber);
    }

    .launch-swatch.gear-warning {
      background: linear-gradient(90deg, #f6bb4f, #ff7a4a);
    }

    .launch-help-copy {
      display: grid;
      gap: 2px;
    }

    .launch-help-copy b {
      color: var(--text);
      font-weight: 900;
    }

    .window-band.is-after-hours .window-marker {
      display: none;
    }

    .window-marker {
      position: absolute;
      left: clamp(10px, var(--window-marker), calc(100% - 10px));
      top: 0;
      width: 4px;
      height: 100%;
      border-radius: 999px;
      background: var(--text);
      box-shadow: 0 0 0 2px var(--marker-ring);
      pointer-events: none;
    }

    .window-timeline {
      position: relative;
      min-height: 22px;
      margin: 0 2px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .window-tick {
      position: absolute;
      left: var(--x);
      top: 0;
      transform: translateX(-50%);
      color: var(--muted);
      font-size: 11px;
      line-height: 1.1;
      font-weight: 850;
      text-align: center;
      white-space: nowrap;
    }

    .window-tick.has-lane::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -14px;
      width: 1px;
      height: 12px;
      background: var(--line-soft);
      transform: translateX(-50%);
    }

    .window-tick[style*="--x: 0"] span,
    .window-tick-start span {
      text-align: left;
    }

    .window-tick strong {
      color: var(--text);
      font-weight: 950;
    }

    .window-tick span {
      display: block;
      margin-top: 4px;
      color: var(--amber);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .launch-day-note {
      max-width: 760px;
      margin: 4px 0 0;
      color: var(--muted);
      font-size: clamp(14px, 1.7vw, 16px);
      line-height: 1.3;
      font-weight: 760;
      letter-spacing: 0;
    }

    .launch-window-key {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px 10px;
      margin-top: -2px;
    }

    .launch-window-key-item {
      min-width: 0;
      display: grid;
      grid-template-columns: 8px minmax(0, 1fr);
      gap: 3px 6px;
      align-items: center;
      color: var(--muted);
    }

    .launch-window-key-item .launch-swatch {
      width: 8px;
      height: 28px;
      border: 0;
      border-radius: 999px;
      grid-row: 1 / span 2;
      margin: 0;
    }

    .launch-window-key-item strong {
      color: var(--text);
      font-size: 11px;
      line-height: 1.08;
      font-weight: 950;
      letter-spacing: 0;
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }

    .launch-window-key-item span:last-child {
      color: var(--muted);
      font-size: 11px;
      line-height: 1;
      font-weight: 850;
    }

    .window-tick-start {
      transform: translateX(0);
    }

    .window-tick-end {
      transform: translateX(-100%);
    }

    .help-wrap {
      position: relative;
      flex: 0 0 auto;
    }

    .help-button {
      width: 42px;
      height: 42px;
      border: 2px solid var(--line);
      border-radius: 999px;
      background: var(--subtle-fill-strong);
      color: var(--text);
      font: inherit;
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
    }

    .help-button:hover,
    .help-button:focus-visible {
      border-color: var(--amber);
      color: var(--amber);
      outline: none;
    }

    .shuttle-widget .shuttle-schedule-help-button {
      width: max-content;
      min-width: 92px;
      height: 30px;
      min-height: 30px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
    }

    .help-panel {
      position: absolute;
      z-index: 10;
      top: 52px;
      right: 0;
      width: min(360px, calc(100vw - 48px));
      border: 2px solid var(--line);
      border-radius: 18px;
      background: var(--help-panel);
      padding: 16px;
      box-shadow: var(--elevated-shadow);
      display: none;
      gap: 12px;
    }

    .shuttle-widget .shuttle-schedule-help-panel {
      top: calc(100% + 12px);
      left: auto;
      right: 0;
    }

    .help-wrap.is-open .help-panel {
      display: grid;
    }

    .help-panel h2 {
      margin: 0;
      color: var(--text);
      font-size: 18px;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .help-panel p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.35;
      font-weight: 650;
    }

    .depth-list {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .depth-list li {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      border-top: 1px solid var(--line-soft);
      padding-top: 8px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
    }

    .depth-list b {
      color: var(--text);
      white-space: nowrap;
    }

    .help-clearance-body {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      align-items: start;
      gap: 14px;
      border-top: 1px solid var(--line-soft);
      padding-top: 8px;
    }

    .help-clearance-main {
      display: grid;
      gap: 9px;
      min-width: 0;
    }

    .clearance-scale {
      display: grid;
      gap: 9px;
      width: auto;
    }

    .help-panel .clearance-scale {
      padding-top: 0;
    }

    .help-panel .clearance-scale-vertical {
      align-items: start;
      gap: 0;
    }

    .help-panel .clearance-vertical-scale {
      width: 32px;
      height: 168px;
      justify-self: start;
    }

    .help-panel .clearance-vertical-marker {
      width: 22px;
      height: 22px;
    }

    .help-panel .clearance-vertical-ticks {
      inset: 7px -40px 7px auto;
      width: 34px;
      font-size: 10px;
    }

    .clearance-scale-caption {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.3;
      font-weight: 750;
    }

    .help-panel .clearance-scale-caption {
      border-top: 1px solid var(--line-soft);
      padding-top: 8px;
    }

    .clearance-scale-caption b {
      color: var(--text);
      font-size: 12px;
      line-height: 1.1;
      font-weight: 950;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .depth-bar {
      position: relative;
      height: 28px;
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid var(--line-soft);
      background: var(--box);
      display: flex;
    }

    .depth-segment {
      height: 100%;
      flex: var(--share) 0 0;
    }

    .depth-segment.sandbar {
      background: var(--sandbar);
    }

    .depth-segment.very-shallow {
      background: #de5b2a;
    }

    .depth-segment.shallow {
      background: #e8bf38;
    }

    .depth-segment.rideable {
      background: #2f83a0;
    }

    .depth-segment.deep {
      background: #3f61b0;
    }

    .depth-marker {
      position: absolute;
      left: var(--marker);
      top: 50%;
      width: 28px;
      height: 28px;
      transform: translate(-50%, -50%);
      border: 3px solid var(--text);
      border-radius: 999px;
      background: var(--amber);
      box-shadow: var(--knob-shadow);
    }

    .depth-ticks {
      display: grid;
      grid-template-columns: 0.5fr 1fr 1.2fr 1.2fr 1.1fr;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0;
    }

    .depth-ticks span:last-child {
      text-align: right;
    }

    .sandbar-timeline-widget {
      position: relative;
      margin-top: 18px;
      border: 2px solid var(--line);
      border-radius: 18px;
      background: var(--panel-2);
      padding: clamp(16px, 2.5vw, 22px);
      display: grid;
      gap: 14px;
    }

    :root[data-theme="light"] .sandbar-timeline-widget {
      background: #f7fbfb;
      box-shadow: 0 16px 42px rgba(38, 74, 96, 0.11);
    }

    .sandbar-timeline-head {
      display: grid;
      gap: 10px;
      min-width: 0;
      padding-right: 48px;
    }

    .sandbar-timeline-title-tools {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .sandbar-timeline-title-tools .help-wrap {
      position: absolute;
      top: clamp(16px, 2.5vw, 22px);
      right: clamp(16px, 2.5vw, 22px);
    }

    .sandbar-timeline-title-tools .help-button {
      width: 34px;
      height: 34px;
      font-size: 16px;
    }

    .sandbar-timeline-title-tools .help-panel {
      right: auto;
      left: 0;
      text-transform: none;
      letter-spacing: 0;
    }

    .sandbar-depth-help-swatch {
      width: 18px;
      height: 18px;
      border: 1px solid var(--line-soft);
      border-radius: 5px;
      margin-top: 1px;
    }

    .sandbar-depth-help-swatch.sandbar {
      background: var(--zone-sandbar);
    }

    .sandbar-depth-help-swatch.very-shallow {
      background: var(--zone-very-shallow);
    }

    .sandbar-depth-help-swatch.shallow {
      background: var(--zone-shallow);
    }

    .sandbar-depth-help-swatch.rideable {
      background: var(--zone-rideable);
    }

    .sandbar-depth-help-swatch.deep {
      background: var(--zone-deep);
    }

    .sandbar-timeline-current {
      display: grid;
      justify-items: start;
      gap: 7px;
      min-width: 0;
      text-align: left;
    }

    .sandbar-timeline-current[hidden] {
      display: none;
    }

    .sandbar-timeline-current strong {
      color: var(--text);
      font-size: clamp(20px, 2.8vw, 28px);
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0;
    }

    .sandbar-timeline-current strong.sandbar {
      color: var(--zone-sandbar);
    }

    .sandbar-timeline-current strong.very-shallow {
      color: var(--zone-very-shallow);
    }

    .sandbar-timeline-current strong.shallow {
      color: var(--zone-shallow);
    }

    .sandbar-timeline-current strong.rideable {
      color: var(--zone-rideable);
    }

    .sandbar-timeline-current strong.deep {
      color: var(--zone-deep);
    }

    .sandbar-timeline-depth {
      display: grid;
      justify-items: start;
      gap: 3px;
    }

    .sandbar-timeline-depth[hidden] {
      display: none;
    }

    .sandbar-timeline-depth span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.15;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: none;
    }

    .sandbar-timeline-depth b {
      max-width: none;
      color: var(--text);
      font-size: clamp(19px, 2.8vw, 26px);
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0;
      text-align: left;
    }

    .sandbar-timeline-caution {
      max-width: 42rem;
      margin: 1px 0 0;
      padding-left: 10px;
      border-left: 3px solid var(--zone-shallow);
      color: var(--muted);
      font-size: clamp(12px, 1.8vw, 14px);
      line-height: 1.25;
      font-weight: 800;
    }

    .sandbar-timeline-caution.sandbar,
    .sandbar-timeline-caution.shallow {
      border-left-color: var(--zone-shallow);
    }

    .sandbar-timeline-caution.rideable {
      border-left-color: var(--zone-rideable);
    }

    .sandbar-timeline-depth b.sandbar {
      color: var(--zone-sandbar);
    }

    .sandbar-timeline-depth b.very-shallow {
      color: var(--zone-very-shallow);
    }

    .sandbar-timeline-depth b.shallow {
      color: var(--zone-shallow);
    }

    .sandbar-timeline-depth b.rideable {
      color: var(--zone-rideable);
    }

    .sandbar-timeline-depth b.deep {
      color: var(--zone-deep);
    }

    .sandbar-depth-band {
      position: relative;
      min-height: 22px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      background: var(--box);
      display: flex;
      overflow: hidden;
    }

    .sandbar-depth-segment {
      min-width: 0;
      flex: var(--share) 0 0;
      min-height: 100%;
    }

    .sandbar-depth-segment.is-compact {
      padding: 0;
      font-size: 0;
    }

    .sandbar-depth-segment.sandbar {
      background: var(--zone-sandbar);
    }

    .sandbar-depth-segment.very-shallow {
      background: var(--zone-very-shallow);
    }

    .sandbar-depth-segment.shallow {
      background: var(--zone-shallow);
    }

    .sandbar-depth-segment.rideable {
      color: #eefbff;
      background: var(--zone-rideable);
    }

    .sandbar-depth-segment.deep {
      color: #eef2ff;
      background: var(--zone-deep);
    }

    .sandbar-depth-band.is-after-hours .sandbar-depth-marker {
      display: none;
    }

    .sandbar-depth-marker {
      position: absolute;
      left: clamp(10px, var(--sandbar-depth-marker), calc(100% - 10px));
      top: -4px;
      width: 4px;
      height: calc(100% + 8px);
      transform: translateX(-50%);
      border-radius: 999px;
      background: var(--text);
      box-shadow: 0 0 0 2px var(--marker-ring);
      pointer-events: none;
    }

    .sandbar-depth-ticks {
      position: relative;
      min-height: 22px;
      margin: 0 2px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .sandbar-depth-tick {
      position: absolute;
      left: var(--x);
      top: 0;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .sandbar-depth-tick:first-child {
      transform: translateX(0);
    }

    .sandbar-depth-tick:last-child {
      transform: translateX(-100%);
    }

    .sandbar-depth-key {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px 16px;
      align-items: start;
    }

    .sandbar-depth-key-item {
      min-width: 0;
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr);
      gap: 3px 8px;
      align-items: center;
      color: var(--muted);
    }

    .sandbar-depth-swatch {
      width: 10px;
      height: 46px;
      border-radius: 999px;
      grid-row: 1 / span 3;
      background: currentColor;
    }

    .sandbar-depth-key-item strong {
      color: var(--text);
      font-size: 13px;
      line-height: 1.05;
      font-weight: 950;
      letter-spacing: 0;
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }

    .sandbar-depth-key-range,
    .sandbar-depth-key-time {
      color: var(--muted);
      font-size: 12px;
      line-height: 1;
      font-weight: 850;
    }

    .sandbar-depth-key-time {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.05;
      font-weight: 850;
      letter-spacing: 0;
    }

    .sandbar-depth-note {
      margin-top: -4px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.25;
      font-weight: 800;
    }

    .sandbar-depth-key-item.sandbar {
      color: var(--zone-sandbar);
    }

    .sandbar-depth-key-item.very-shallow {
      color: var(--zone-very-shallow);
    }

    .sandbar-depth-key-item.shallow {
      color: var(--zone-shallow);
    }

    .sandbar-depth-key-item.rideable {
      color: var(--zone-rideable);
    }

    .sandbar-depth-key-item.deep {
      color: var(--zone-deep);
    }

    .dropoff-widget {
      margin-top: 18px;
      border: 2px solid var(--line);
      border-radius: 18px;
      background: var(--panel-2);
      padding: clamp(16px, 2.5vw, 22px);
      display: grid;
      gap: 14px;
    }

    :root[data-theme="light"] .dropoff-widget {
      background: #f7fbfb;
      box-shadow: 0 16px 42px rgba(38, 74, 96, 0.11);
    }

    .dropoff-scale {
      display: grid;
      gap: 9px;
    }

    .dropoff-band {
      position: relative;
      min-height: 34px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      background: var(--box);
      display: flex;
      overflow: hidden;
    }

    .dropoff-segment {
      min-width: 0;
      flex: var(--share) 0 0;
      font-size: 0;
      line-height: 0;
    }

    .dropoff-segment + .dropoff-segment {
      box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.28);
    }

    .dropoff-segment.dry {
      background: var(--sandbar);
    }

    .dropoff-segment.awkward {
      background: linear-gradient(90deg, #26799a, #79c9da);
    }

    .dropoff-segment.shallow {
      background: #2f83a0;
    }

    .dropoff-segment.normal {
      background: #2e9867;
    }

    .dropoff-segment.deep {
      background: #3f61b0;
    }

    .dropoff-marker {
      position: absolute;
      left: clamp(10px, var(--dropoff-marker), calc(100% - 10px));
      top: -3px;
      width: 4px;
      height: calc(100% + 6px);
      transform: translateX(-50%);
      border-radius: 999px;
      background: var(--text);
      box-shadow: 0 0 0 2px var(--marker-ring);
      pointer-events: none;
    }

    .dropoff-zone-key {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: 7px 12px;
    }

    .dropoff-zone-item {
      min-width: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 0;
      display: grid;
      grid-template-columns: 9px minmax(0, 1fr);
      gap: 3px 7px;
      align-items: center;
    }

    .dropoff-zone-swatch {
      width: 9px;
      height: 28px;
      border-radius: 999px;
      grid-row: 1 / span 2;
      background: currentColor;
    }

    .dropoff-zone-item strong {
      min-width: 0;
      color: var(--text);
      font-size: 11px;
      line-height: 1.08;
      font-weight: 950;
      letter-spacing: 0;
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }

    .dropoff-zone-item span:last-child {
      color: var(--muted);
      font-size: 11px;
      line-height: 1;
      font-weight: 850;
    }

    .dropoff-zone-item.dry {
      color: var(--sandbar);
    }

    .dropoff-zone-item.awkward,
    .dropoff-zone-item.shallow {
      color: #79c9da;
    }

    .dropoff-zone-item.normal,
    .dropoff-zone-item.deep {
      color: var(--green);
    }

    .dropoff-timeline {
      display: grid;
      gap: 7px;
      margin: 0;
    }

    .dropoff-tick {
      min-width: 0;
      border: 1px solid var(--line-soft);
      border-radius: 10px;
      background: var(--subtle-fill);
      padding: 8px 10px;
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1;
      font-weight: 850;
    }

    .dropoff-tick strong {
      color: var(--text);
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
    }

    .dropoff-tick span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .dropoff-tick em {
      color: var(--muted);
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
      white-space: nowrap;
    }

    .dropoff-tick.action {
      border-color: color-mix(in srgb, var(--amber) 46%, var(--line-soft));
      color: var(--text);
      background: color-mix(in srgb, var(--amber) 12%, var(--subtle-fill));
      box-shadow: inset 4px 0 0 var(--amber);
    }

    .dropoff-tick.action strong {
      color: var(--amber);
    }

    .dropoff-tick.empty {
      grid-template-columns: 1fr;
      color: var(--muted);
    }

    .dropoff-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      border-top: 1px solid var(--line-soft);
      padding-top: 12px;
    }

    .dropoff-copy {
      min-width: 0;
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .dropoff-next-kicker {
      color: var(--muted);
      font-size: 11px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .dropoff-next-call {
      color: var(--amber);
      font-size: clamp(21px, 3vw, 31px);
      line-height: 1.02;
      font-weight: 950;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }

    .dropoff-next-call.alert {
      color: var(--red);
    }

    .dropoff-next-call.caution {
      color: var(--amber);
    }

    .dropoff-next-call.normal {
      color: var(--green);
    }

    .dropoff-next-call.dry {
      color: var(--sandbar);
    }

    .dropoff-current-line {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 7px;
      color: var(--muted);
      font-size: clamp(13px, 1.6vw, 15px);
      line-height: 1.2;
      font-weight: 850;
    }

    .dropoff-current-line span {
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .dropoff-current-line b {
      color: var(--text);
      font-size: clamp(14px, 1.7vw, 17px);
      font-weight: 950;
    }

    .dropoff-current-line b.dry {
      color: var(--sandbar);
    }

    .dropoff-current-line b.awkward,
    .dropoff-current-line b.shallow {
      color: #79c9da;
    }

    .dropoff-current-line b.normal,
    .dropoff-current-line b.deep {
      color: var(--green);
    }

    .dropoff-meta {
      max-width: 760px;
      color: var(--muted);
      font-size: clamp(13px, 1.7vw, 16px);
      line-height: 1.35;
      font-weight: 750;
    }

    .stream-widget {
      margin-top: 18px;
      border: 2px solid var(--line);
      border-radius: 22px;
      background: var(--box);
      padding: clamp(16px, 2.6vw, 22px);
      display: grid;
      gap: 14px;
    }

    .stream-widget[hidden] {
      display: none;
    }

    :root[data-theme="light"] .stream-widget {
      background: linear-gradient(145deg, #f4fbf8 0%, #ffffff 58%, #edf6fb 100%);
      box-shadow: 0 16px 42px rgba(38, 74, 96, 0.1);
    }

    .stream-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
    }

    .stream-head span {
      color: var(--muted);
      font-size: clamp(13px, 1.2vw, 15px);
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .stream-head .eyebrow span {
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      white-space: inherit;
    }

    .stream-list {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .stream-row {
      min-height: 44px;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: var(--subtle-fill-strong);
      padding: 10px 12px;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .stream-row.rider-stream-row {
      grid-template-columns: 104px minmax(0, 1fr);
    }

    .stream-row.is-latest {
      grid-template-columns: 72px minmax(0, 1fr) auto;
      border-color: var(--blue);
      background: var(--blue-soft);
      box-shadow: inset 0 0 0 1px rgba(119, 185, 232, 0.22);
    }

    .stream-row.rider-stream-row.is-latest {
      grid-template-columns: 104px minmax(0, 1fr) auto;
    }

    .stream-row.wind-stream-row {
      grid-template-columns: 90px 28px minmax(0, 1fr);
      gap: 8px;
    }

    .stream-row.wind-stream-row.is-latest {
      grid-template-columns: 90px 28px minmax(0, 1fr) auto;
    }

    .stream-row.wind-stream-row.is-hot-period {
      background:
        linear-gradient(90deg, rgba(255, 103, 94, 0.12), rgba(255, 103, 94, 0.05) 48%, transparent 78%),
        var(--subtle-fill-strong);
    }

    .stream-row.wind-stream-row.is-very-strong.is-very-gusty {
      background:
        linear-gradient(90deg, rgba(255, 103, 94, 0.18), rgba(255, 103, 94, 0.10) 52%, rgba(255, 103, 94, 0.04) 78%, transparent 92%),
        var(--subtle-fill-strong);
    }

    .stream-row.rider-report-row {
      grid-template-columns: 92px minmax(0, 1fr);
      align-items: start;
      gap: 14px;
      padding: 14px;
    }

    .stream-row.rider-report-row.is-latest {
      grid-template-columns: 92px minmax(0, 1fr) auto;
    }

    .stream-row.rider-status-row.is-on-duty {
      border-color: color-mix(in srgb, var(--green) 58%, var(--line-soft));
      background: color-mix(in srgb, var(--green) 10%, var(--subtle-fill-strong));
    }

    .stream-row.rider-status-row.is-standby {
      border-color: color-mix(in srgb, var(--amber) 58%, var(--line-soft));
      background: color-mix(in srgb, var(--amber) 10%, var(--subtle-fill-strong));
    }

    .stream-row.rider-status-row.is-off-duty {
      border-color: var(--red);
      background: color-mix(in srgb, var(--red) 16%, var(--subtle-fill-strong));
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 34%, transparent);
    }

    .stream-row.rider-report-row .stream-time {
      padding-top: 2px;
    }

    .stream-time {
      color: var(--blue);
      font-size: 13px;
      line-height: 1;
      font-weight: 950;
      white-space: nowrap;
    }

    .stream-movement-slot {
      width: 34px;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: center;
    }

    .stream-date {
      display: block;
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .stream-line {
      min-width: 0;
      color: var(--text);
      font-size: clamp(15px, 2vw, 18px);
      line-height: 1.2;
      font-weight: 800;
      overflow-wrap: anywhere;
    }

    .wind-stream-row .stream-line {
      font-size: clamp(15px, 1.8vw, 17px);
      font-weight: 500;
    }

    .wind-stream-row.stream-post-row {
      align-items: start;
    }

    .wind-stream-row.stream-post-row .stream-time {
      padding-top: 2px;
    }

    .wind-stream-row.stream-post-row .stream-movement-slot {
      align-self: start;
      margin-top: 2px;
    }

    .wind-stream-row.stream-post-row .rider-report-content {
      gap: 4px;
    }

    .wind-stream-row.stream-post-row .rider-report-text {
      font-size: inherit;
    }

    .stream-osprey-report {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .wind-stream-row .stream-osprey-report .rider-report-wind-alert-speeds {
      font-size: clamp(10px, 2.8vw, 14px);
    }

    .rider-report-content {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .rider-report-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    .rider-report-source,
    .rider-report-trust,
    .rider-report-latest {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      border-radius: 999px;
      font-size: 10px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .rider-report-source {
      color: var(--blue);
    }

    .rider-report-trust {
      border: 1px solid var(--green);
      padding: 0 7px;
      color: var(--green);
      background: var(--green-soft);
    }

    .rider-report-latest {
      border: 1px solid var(--blue);
      padding: 0 7px;
      color: var(--blue);
      background: var(--blue-soft);
    }

    .rider-report-status-update {
      --status-tone: var(--blue);
      border: 1px solid color-mix(in srgb, var(--status-tone) 58%, var(--line-soft));
      border-radius: 12px;
      padding: 9px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px 10px;
      background: color-mix(in srgb, var(--status-tone) 12%, var(--subtle-fill-strong));
    }

    .rider-report-status-update.is-on-duty {
      --status-tone: var(--green);
    }

    .rider-report-status-update.is-standby {
      --status-tone: var(--amber);
    }

    .rider-report-status-update.is-off-duty {
      --status-tone: var(--red);
    }

    .rider-report-status-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .rider-report-status-kicker {
      color: var(--muted);
      font-size: 10px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .rider-report-status-value {
      color: var(--text);
      font-size: clamp(14px, 1.75vw, 17px);
      line-height: 1;
      font-weight: 900;
    }

    .rider-report-status-time {
      min-height: 24px;
      border: 1px solid var(--status-tone);
      border-radius: 999px;
      padding: 4px 8px;
      display: inline-flex;
      align-items: center;
      color: var(--status-tone);
      background: var(--subtle-fill);
      font-size: 11px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .rider-report-text {
      margin: 0;
      min-width: 0;
      max-width: 100%;
      color: var(--text);
      font-size: clamp(14px, 1.8vw, 17px);
      line-height: 1.3;
      font-weight: 500;
      overflow-wrap: anywhere;
    }

    .rider-report-wind-alert-title,
    .rider-report-wind-alert-speeds {
      display: block;
    }

    .rider-report-wind-alert-speeds {
      margin-top: 4px;
      font-size: clamp(10px, 3.2vw, 15px);
      letter-spacing: -0.015em;
      white-space: nowrap;
    }

    .rider-report-wind-alert {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      max-width: 100%;
    }

    .rider-report-wind-alert-mark {
      width: 28px;
      height: 28px;
      margin-top: 1px;
      flex: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--green);
      border-radius: 999px;
      color: var(--page);
      background: var(--green);
      font-size: 15px;
      line-height: 1;
      font-weight: 950;
    }

    .rider-report-wind-alert-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .rider-report-wind-alert-arrow {
      display: inline-block;
      font-size: 75%;
      font-weight: 700;
      line-height: 1;
      vertical-align: 0.12em;
    }

    .stream-row.is-favorable-switch {
      border-color: color-mix(in srgb, var(--green) 58%, var(--line-soft));
      background: color-mix(in srgb, var(--green) 10%, var(--subtle-fill-strong));
    }

    .stream-row.is-favorable-switch.is-latest {
      border-color: color-mix(in srgb, var(--green) 70%, var(--line-soft));
      background: color-mix(in srgb, var(--green) 12%, var(--subtle-fill-strong));
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 24%, transparent);
    }

    .rider-report-status-line {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      color: var(--text);
      font-weight: 650;
    }

    .rider-report-status-reason {
      min-height: 22px;
      border: 1px solid var(--red);
      border-radius: 999px;
      padding: 3px 8px;
      display: inline-flex;
      align-items: center;
      color: var(--red);
      background: var(--red-soft);
      font-size: 11px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .rider-report-status-line b {
      color: var(--muted);
      font-weight: 950;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .rider-report-facts {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .rider-report-facts span {
      min-height: 24px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      padding: 4px 8px;
      color: var(--muted);
      background: var(--subtle-fill);
      font-size: 12px;
      line-height: 1;
      font-weight: 900;
      white-space: nowrap;
    }

    .stream-movement {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      margin: 0;
      border: 1px solid currentColor;
      border-radius: 999px;
      font-size: 18px;
      line-height: 1;
      font-weight: 950;
    }

    .stream-movement.up {
      color: var(--green);
      background: var(--green-soft);
    }

    .stream-movement.down {
      color: var(--amber);
      background: var(--amber-soft);
    }

    .stream-movement.flat {
      color: var(--blue);
      background: var(--blue-soft);
      box-shadow: inset 0 0 0 1px rgba(119, 185, 232, 0.2);
    }

    .stream-points {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
    }

    .stream-rider-reports {
      display: grid;
      gap: 6px;
      min-width: 0;
      margin-top: 8px;
    }

    .stream-rider-note {
      min-width: 0;
      border: 1px solid var(--line-soft);
      border-radius: 10px;
      background: var(--subtle-fill);
      color: var(--blue);
      padding: 8px 10px;
      font-size: clamp(13px, 1.6vw, 15px);
      line-height: 1.25;
      font-weight: 850;
    }

    .stream-rider-note b {
      color: var(--muted);
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .stream-rider-note.stream-osprey-note {
      color: var(--text);
      font-weight: 500;
    }

    .stream-rider-note .rider-report-content {
      gap: 4px;
    }

    .stream-rider-note .rider-report-text {
      font-size: inherit;
    }


    .stream-latest-badge {
      display: inline-flex;
      align-items: center;
      justify-self: end;
      min-height: 20px;
      border: 1px solid var(--blue);
      border-radius: 999px;
      padding: 0 8px;
      color: var(--blue);
      font-size: 10px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      vertical-align: middle;
      white-space: nowrap;
    }

    .stream-points > span:not(:last-child)::after {
      content: "·";
      margin: 0 0.5em;
      color: var(--muted);
      font-weight: 700;
    }

    .wind-stream-row .stream-points > span:not(:last-child)::after {
      margin: 0 0.38em;
      font-weight: 500;
    }

    .stream-empty {
      color: var(--muted);
      font-size: 16px;
      font-weight: 750;
    }

    .stream-more {
      justify-self: end;
      min-height: 32px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--subtle-fill);
      color: var(--text);
      padding: 6px 12px;
      font: inherit;
      font-size: 13px;
      font-weight: 850;
      letter-spacing: 0;
      cursor: pointer;
    }

    .stream-more:hover {
      border-color: var(--blue);
      color: var(--blue);
    }

    .stream-more:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }

    .stream-more[hidden] {
      display: none;
    }

    :root[data-theme="light"] .stream-more {
      background: rgba(32, 127, 157, 0.08);
    }

    .lost-found-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 12px;
    }

    .lost-found-item {
      min-width: 0;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: var(--subtle-fill-strong);
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
    }

    .lost-found-photo {
      width: 100%;
      aspect-ratio: 4 / 3;
      background: var(--subtle-fill);
      object-fit: cover;
      display: block;
    }

    .lost-found-body {
      min-width: 0;
      padding: 12px;
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .lost-found-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
    }

    .lost-found-badge,
    .lost-found-time {
      min-height: 22px;
      border-radius: 999px;
      padding: 4px 8px;
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .lost-found-badge {
      border: 1px solid var(--blue);
      color: var(--blue);
      background: var(--blue-soft);
    }

    .lost-found-time {
      border: 1px solid var(--line-soft);
      color: var(--muted);
      background: var(--subtle-fill);
    }

    .lost-found-comment {
      margin: 0;
      min-width: 0;
      color: var(--text);
      font-size: clamp(14px, 1.8vw, 17px);
      line-height: 1.3;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .lost-found-location {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.2;
      font-weight: 850;
      overflow-wrap: anywhere;
    }

    @media (max-width: 760px) {
      html,
      body {
        max-width: 100%;
        overflow-x: hidden;
      }

      main {
        width: calc(100vw - 16px);
        max-width: 1040px;
        padding-top: 12px;
        overflow: hidden;
      }

      .wind-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        max-width: 100%;
        overflow: hidden;
      }

      .app-status-bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
        min-height: 0;
        margin-bottom: 10px;
        padding: 0 clamp(12px, 3vw, 18px) 8px;
      }

      .app-status-bar .pills {
        grid-column: auto;
        grid-row: auto;
        flex-wrap: nowrap;
        align-self: center;
        overflow: visible;
      }

      .app-status-bar .top-bar {
        justify-self: end;
      }

      .wind-header {
        gap: 10px;
        margin-bottom: 14px;
      }

      .top-bar {
        flex: 0 0 auto;
      }

      .theme-option {
        width: 32px;
        height: 30px;
      }

      .pills {
        gap: 7px;
        margin-bottom: 18px;
      }

      .app-status-bar .pills {
        gap: 6px;
        margin-bottom: 0;
      }

      .rider-widget,
      .tide-items-widget,
      .stream-widget,
      .conditions-card,
      .tide-widget,
      .sandbar-timeline-widget,
      .tide-level-widget,
      .flow-widget,
      .launch-widget,
      .shuttle-widget,
      .dropoff-widget {
        max-width: 100%;
        min-width: 0;
      }

      .tide-clearance-layout {
        grid-template-columns: minmax(0, 1fr) 88px;
        gap: 14px;
      }

      .clearance-vertical-scale {
        height: 252px;
      }

      .hero-row {
        width: 100%;
        grid-template-columns: clamp(76px, 22vw, 104px) auto clamp(76px, 22vw, 104px);
        gap: 12px;
      }

      .hero-row > .range-chip {
        min-height: 64px;
        padding: 11px 12px;
      }

      .range-chip strong {
        font-size: 24px;
      }

      .stat-grid {
        grid-template-columns: 1fr;
      }

      .condition-points {
        grid-template-columns: 1fr;
      }

      .rider-widget {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 12px;
        overflow: hidden;
      }

      .rider-call {
        gap: 6px;
      }

      .rider-call-top {
        align-items: center;
        gap: 8px;
        min-height: 30px;
      }

      .rider-call .eyebrow {
        font-size: 14px;
        line-height: 1;
      }

      .rider-widget .pill.wind-delta {
        min-height: 30px;
        padding-inline: 10px;
        font-size: 13px;
      }

      .reading-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 8px 5px 4px;
        border-radius: 12px 12px 0 0;
        gap: 0;
      }

      .reading {
        min-height: 62px;
        padding: 0;
        border-radius: 0;
        grid-template-rows: 11px minmax(0, 1fr);
        gap: 6px;
      }

      .reading.average {
        order: 2;
        padding-left: 7px;
      }

      .reading.lull {
        order: 1;
      }

      .reading.gusty {
        order: 3;
      }

      .reading.lull,
      .reading.gusty {
        min-height: 62px;
        padding: 0;
        gap: 6px;
      }

      .reading.gusty {
        padding-left: 7px;
      }

      .reading span {
        font-size: 10px;
      }

      .rider-wind-meta-item > span {
        font-size: 10px;
        min-width: 30px;
      }

      .reading.average span {
        font-size: 11px;
      }

      .reading strong,
      .reading.average strong {
        font-size: clamp(24px, 8vw, 34px);
      }

      .wind-graph-widget {
        grid-column: 1 / -1;
      }

      .wind-graph-head {
        gap: 8px;
        padding: 0 12px 2px;
      }

      .wind-graph-widget .wind-graph-day-head {
        padding: 0 4px 0 var(--wind-graph-plot-left);
      }

      .wind-graph-range button {
        min-width: 25px;
        padding: 5px 4px;
      }

      .rider-wind-meta {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .rider-wind-meta-direction {
        padding-inline: 5px 7px;
      }

      .rider-wind-meta-temps {
        padding-inline: 7px;
      }

      .wind-graph-plot-frame > .wind-graph-range {
        top: calc((10 / 270) * 100% + 6px);
        right: calc((6 / 360) * 100% + 6px);
      }

      .tide-graph-widget .wind-graph-plot-frame > .wind-graph-range {
        top: 16px;
        right: 8px;
      }

      .reading.lull {
        order: 1;
      }

      .reading.gusty {
        order: 3;
      }

      .rider-temperature-metric {
        padding-left: 8px;
      }

      .rider-direction-value {
        font-size: clamp(21px, 6.6vw, 28px);
      }

      .rider-direction-degrees {
        font-size: clamp(16px, 5vw, 22px);
      }

      .rider-direction-label {
        font-size: 10px;
      }

      .rider-trend-note {
        padding: 12px 10px;
      }

      .rider-trend-note.has-caption .rider-trend-caption {
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
      }

      .rider-trend-facts {
        --trend-avg-col: minmax(58px, 68px);
        --trend-change-col: minmax(74px, 84px);
      }

      .rider-trend-columns,
      .rider-trend-row {
        grid-template-columns: minmax(82px, 1fr) var(--trend-avg-col) var(--trend-change-col);
        column-gap: 8px;
      }

      .rider-trend-columns {
        font-size: 10px;
      }

      .tide-alert-help-text {
        position: fixed;
        top: 188px;
        right: 14px;
        left: 14px;
        width: auto;
        max-height: calc(100vh - 224px);
        overflow-y: auto;
      }

      .rider-call strong {
        font-size: clamp(26px, 6.8vw, 31px);
        line-height: 0.94;
        overflow-wrap: normal;
      }

      .current-commentary-text,
      .current-condition-call,
      .quicklook-value {
        overflow-wrap: anywhere;
      }

      .quicklook-grid {
        grid-template-columns: 1fr;
      }

      .condition-facts {
        grid-template-columns: 1fr;
      }

      .quicklook-item.primary {
        grid-column: auto;
      }

      .tide-level-widget {
        padding: 14px;
      }

      .tide-items-widget > .tide-level-widget {
        padding: 12px;
        gap: 10px;
      }

      .tide-level-grid {
        min-height: 0;
        padding: 10px 0 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .tide-level-fact {
        min-height: 0;
        padding: 0;
      }

      .tide-level-fact + .tide-level-fact {
        padding-left: 12px;
      }

      .tide-level-fact > span {
        font-size: 12px;
      }

      .tide-level-fact strong {
        font-size: clamp(14px, 3.6vw, 16px);
      }

      .tide-level-readout {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        gap: 10px;
      }

      .tide-current-fact,
      .tide-movement-fact {
        min-height: 62px;
        padding: 0;
        grid-template-rows: 11px minmax(0, 1fr);
        gap: 6px;
      }

      .tide-current-label {
        font-size: 11px;
      }

      .tide-current-body > strong {
        flex: 0 0 auto;
        font-size: clamp(22px, 6.4vw, 30px);
        white-space: nowrap;
      }

      .tide-movement-fact .tide-level-direction {
        min-width: 0;
        width: auto;
        min-height: 0;
        padding: 0;
        gap: 7px;
      }

      .tide-movement-fact .tide-level-direction .tide-direction-arrow {
        flex-basis: clamp(36px, 10vw, 44px);
        width: clamp(36px, 10vw, 44px);
        height: clamp(36px, 10vw, 44px);
        font-size: clamp(28px, 7.8vw, 34px);
      }

      .tide-movement-fact .tide-level-direction .tide-direction-copy {
        min-width: 0;
        gap: 2px;
      }

      .tide-movement-fact .tide-level-direction .tide-direction-copy strong {
        font-size: clamp(12px, 3.6vw, 17px);
        white-space: nowrap;
      }

      .tide-movement-fact .tide-level-direction .tide-direction-copy span {
        font-size: clamp(12px, 3.6vw, 17px);
      }

      .tide-extreme-height {
        font-size: clamp(14px, 3.6vw, 16px);
      }

      .tide-extreme-time {
        font-size: clamp(12px, 3.2vw, 14px);
      }

      .dropoff-top {
        grid-template-columns: 1fr;
      }

      .wind-header {
        align-items: flex-start;
      }

      .pill {
        min-height: 31px;
        padding: 0 10px;
        gap: 7px;
        font-size: 13px;
      }

      .app-status-bar .pill {
        min-height: 28px;
        padding: 0 9px;
        gap: 5px;
        font-size: 12px;
      }

      .dot {
        width: 9px;
        height: 9px;
      }

      .summary-top {
        display: grid;
      }

      .stream-head {
        display: grid;
      }

      .launch-head {
        display: grid;
      }

      .sandbar-timeline-head {
        display: grid;
      }

      .sandbar-timeline-current {
        justify-items: start;
        text-align: left;
      }

      .sandbar-timeline-depth {
        justify-items: start;
      }

      .sandbar-timeline-depth b {
        max-width: none;
        font-size: clamp(19px, 6vw, 26px);
        line-height: 1;
      }

      .launch-title-tools {
        justify-content: flex-start;
      }

      .launch-current {
        justify-items: start;
        text-align: left;
      }

      .help-panel {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: auto;
        bottom: auto;
        width: min(360px, calc(100vw - 28px));
      }

      .launch-title-tools .help-panel,
      .sandbar-timeline-title-tools .help-panel {
        right: 0;
        left: auto;
      }

      .shuttle-widget .shuttle-schedule-help-panel {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: auto;
        bottom: auto;
        width: min(360px, calc(100vw - 48px));
        max-height: min(76vh, 520px);
        overflow-y: auto;
      }

    }

    @media (max-width: 560px) {
      .shuttle-schedule-note {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .shuttle-schedule-item {
        padding: 11px 12px;
      }

      .shuttle-schedule-note span {
        font-size: 10px;
        letter-spacing: 0.045em;
      }

      .shuttle-schedule-note b {
        font-size: clamp(15px, 4.6vw, 18px);
      }

      .tide-top {
        gap: 10px;
      }

      .tide-clearance-layout {
        grid-template-columns: minmax(0, 1fr) 58px;
        gap: 12px;
      }

      .tide-copy strong {
        font-size: clamp(34px, 10vw, 42px);
        overflow-wrap: anywhere;
      }

      .clearance-metric-row {
        gap: 9px;
      }

      .clearance-model-note {
        font-size: clamp(38px, 10vw, 52px);
      }

      .tide-direction {
        max-width: 100%;
        min-height: 40px;
        padding: 6px 9px 6px 6px;
        gap: 6px;
        font-size: 14px;
        white-space: normal;
      }

      .tide-direction-arrow {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        font-size: 24px;
      }

      .tide-direction-copy {
        min-width: 0;
      }

      .tide-direction-copy strong {
        font-size: 13px;
        line-height: 1.05;
        white-space: normal;
      }

      .tide-direction-copy span {
        font-size: 10px;
      }

      .clearance-more .pill {
        min-height: 34px;
        padding: 8px 12px;
        line-height: 1.15;
        white-space: normal;
      }

      .clearance-gauge {
        align-self: start;
      }

      .clearance-gauge-label {
        font-size: 9px;
      }

      .clearance-vertical-scale {
        width: 34px;
        height: clamp(196px, 58vw, 248px);
      }

      .clearance-vertical-ticks {
        display: none;
      }

      .help-clearance-body {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 10px;
      }

      .help-panel .clearance-vertical-scale {
        width: 30px;
        height: 152px;
      }

      .help-panel .clearance-vertical-ticks {
        display: block;
        inset: 7px -36px 7px auto;
        width: 30px;
      }

      .hero-row {
        grid-template-columns: clamp(64px, 21vw, 84px) auto clamp(64px, 21vw, 84px);
        gap: 8px;
      }

      .hero-row > .range-chip {
        min-height: 56px;
        border-radius: 14px;
        padding: 9px 10px;
      }

      .range-chip span {
        font-size: 11px;
      }

      .range-chip strong {
        font-size: 19px;
      }

      .dropoff-band {
        min-height: 38px;
      }

      .dropoff-zone-key {
        grid-template-columns: 1fr;
      }

      .dropoff-timeline {
        display: grid;
        grid-template-columns: 1fr;
      }

      .dropoff-tick {
        grid-template-columns: 58px minmax(0, 1fr) auto;
        width: 100%;
        border-radius: 12px;
        white-space: normal;
      }

      .window-segment {
        padding: 0;
        font-size: 0;
      }

      .window-band {
        min-height: 20px;
      }

      .sandbar-depth-band {
        min-height: 20px;
      }

      .sandbar-depth-segment {
        padding: 0;
        font-size: 0;
      }

      .launch-window-key {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px 8px;
      }

      .window-timeline {
        min-height: 22px;
        margin: 0 2px;
      }

      .window-tick,
      .window-tick-start,
      .window-tick-end {
        position: absolute;
        width: max-content;
        max-width: 92px;
        white-space: normal;
      }

      .window-tick-end {
        text-align: right;
      }

      .stream-row {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px;
      }

      .stream-row.rider-stream-row {
        grid-template-columns: 88px minmax(0, 1fr);
      }

      .stream-row.is-latest {
        grid-template-columns: 64px minmax(0, 1fr) auto;
      }

      .stream-row.wind-stream-row {
        grid-template-columns: 86px 26px minmax(0, 1fr);
        gap: 6px;
      }

      .stream-row.wind-stream-row.is-latest {
        grid-template-columns: 86px 26px minmax(0, 1fr) auto;
      }

      .stream-movement-slot {
        width: 26px;
        min-height: 26px;
      }

      .stream-movement {
        width: 24px;
        height: 24px;
        font-size: 16px;
      }

      .stream-row.rider-stream-row.is-latest {
        grid-template-columns: 88px minmax(0, 1fr) auto;
      }

      .stream-row.rider-report-row,
      .stream-row.rider-report-row.is-latest {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 8px;
        padding: 11px;
      }

      .stream-row.rider-report-row .stream-latest-badge {
        grid-column: 2;
        justify-self: start;
        margin-top: 2px;
      }

      .bar-caption {
        font-size: 0;
      }

      .trend-bar .bar-caption-center {
        font-size: 9px;
      }

    }

    @media (max-width: 380px) {
      main {
        width: calc(100vw - 16px);
      }

      .app-status-bar {
        gap: 8px;
      }

      .app-status-bar .pills {
        gap: 5px;
      }

      .eyebrow.wind-title {
        font-size: 16px;
        letter-spacing: 0.04em;
      }

      .theme-option {
        width: 30px;
        height: 28px;
      }

      .theme-option svg {
        width: 15px;
        height: 15px;
      }

      .app-status-bar .pill {
        min-height: 26px;
        padding: 0 7px;
        font-size: 11px;
      }

      .app-status-bar .tide-alert-help {
        width: 18px;
        height: 18px;
        font-size: 11px;
      }

      .rider-call strong {
        font-size: clamp(25px, 6.8vw, 28px);
      }
    }

    @media (max-width: 980px), (pointer: coarse) {
      .wind-graph-widget .wind-graph-line {
        stroke-width: 1.15;
      }

      .wind-graph-widget .wind-graph-line.average {
        stroke-width: 1.35;
      }

      .wind-graph-widget .wind-graph-day-stepper {
        gap: 6px;
      }

      .wind-graph-widget .wind-graph-day-stepper button {
        font-size: 22px;
        font-weight: 800;
        min-width: 36px;
        min-height: 36px;
        padding: 6px 4px;
      }

      .wind-graph-widget .wind-graph-day-stepper [data-wind-graph-day-caption] {
        font-size: 13px;
        letter-spacing: 0.03em;
      }

      .wind-graph-widget .wind-graph-day-stepper [data-wind-graph-inspect-time] {
        font-size: 13px;
        letter-spacing: 0.03em;
        margin-left: 8px;
      }

      .wind-graph-widget .wind-graph-plot-frame > .wind-graph-range button {
        min-width: 38px;
        padding: 8px 9px;
        font-size: 12px;
        font-weight: 800;
      }
    }


    [data-wind-stream-widget] .stream-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }

    /* Honey Hole visual tide guide */
    .tide-items-widget > .tide-call {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }

    .tide-coverage-help-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      justify-self: end;
    }

    .tide-coverage-cue {
      color: var(--amber);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: normal;
      line-height: 1.2;
      white-space: nowrap;
      cursor: default;
      pointer-events: none;
      user-select: none;
    }

    .tide-coverage-cue::after {
      content: "→";
      display: inline-block;
      margin-left: 5px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      transform: translateY(0.5px);
    }

    .tide-coverage-help-button {
      width: 34px;
      height: 34px;
      justify-self: end;
      font-size: 16px;
    }

    .tide-coverage-help-button[aria-busy="true"] {
      opacity: 0.58;
    }

    html.has-open-tide-coverage-dialog {
      overflow: hidden;
    }

    .tide-coverage-dialog {
      width: min(1120px, calc(100vw - 28px));
      max-width: none;
      max-height: calc(100dvh - 28px);
      margin: auto;
      overflow: auto;
      overscroll-behavior: contain;
      border: 2px solid var(--line);
      border-radius: 24px;
      padding: 0;
      color: var(--text);
      background: var(--panel);
      box-shadow: 0 34px 100px rgba(0, 0, 0, 0.55);
      touch-action: manipulation;
    }

    .tide-coverage-dialog::backdrop {
      background: rgba(3, 12, 19, 0.74);
      backdrop-filter: blur(4px);
    }

    .tide-coverage-helper {
      overflow: visible;
      border-radius: 22px;
      color: var(--text);
      background: var(--panel);
    }

    .tide-coverage-header {
      position: sticky;
      z-index: 3;
      top: 0;
      border-bottom: 1px solid var(--line);
      padding: clamp(16px, 2.4vw, 24px);
      background: color-mix(in srgb, var(--panel) 94%, transparent);
      backdrop-filter: blur(16px);
    }

    .tide-coverage-header .eyebrow {
      margin: 0;
      color: color-mix(in srgb, var(--blue) 72%, var(--text));
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .tide-coverage-header-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .tide-coverage-header h2 {
      margin: 10px 0 0;
      color: var(--text);
      font-size: clamp(30px, 4.2vw, 48px);
      line-height: 0.98;
      font-weight: 950;
      letter-spacing: -0.045em;
    }

    .tide-coverage-close {
      min-width: 44px;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 16px;
      color: var(--text);
      background: var(--subtle-fill-strong);
      font-size: 14px;
      font-weight: 850;
      cursor: pointer;
      touch-action: manipulation;
    }

    .tide-coverage-close:hover,
    .tide-coverage-close:focus-visible {
      border-color: var(--blue);
      outline: none;
      background: var(--blue-soft);
    }

    .tide-coverage-grid {
      display: block;
    }

    .tide-coverage-visual-column {
      min-width: 0;
      padding: clamp(14px, 2.6vw, 26px);
    }

    .tide-coverage-figure {
      position: relative;
      overflow: hidden;
      margin: 0;
      aspect-ratio: 16 / 9;
      max-height: min(52dvh, 560px);
      border: 1px solid var(--line);
      border-radius: 17px;
      background: #07151d;
      cursor: ew-resize;
      touch-action: none;
      user-select: none;
    }

    .tide-coverage-figure::after {
      position: absolute;
      inset: 74% 0 0;
      content: "";
      pointer-events: none;
      background: linear-gradient(180deg, transparent, rgba(2, 10, 13, 0.42));
    }

    .tide-coverage-figure::before {
      position: absolute;
      z-index: 3;
      top: 0;
      left: 0;
      width: 34%;
      height: 3px;
      border-radius: 999px;
      content: "";
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(90deg, transparent, #54bfd8, transparent);
      transform: translateX(-120%);
    }

    .tide-coverage-figure.is-loading::before {
      opacity: 1;
      animation: tide-coverage-loading 760ms ease-in-out infinite;
    }

    .tide-coverage-figure img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }

    @keyframes tide-coverage-loading {
      to { transform: translateX(395%); }
    }

    .tide-coverage-value-chip {
      position: absolute;
      z-index: 2;
      top: 13px;
      left: 13px;
      display: grid;
      gap: 2px;
      min-width: 108px;
      border: 1px solid rgba(255, 255, 255, 0.32);
      border-radius: 12px;
      padding: 9px 11px;
      color: white;
      background: rgba(5, 21, 28, 0.82);
      backdrop-filter: blur(10px);
      pointer-events: none;
    }

    .tide-coverage-value-chip small {
      color: #c8dde2;
      font-size: 9px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .tide-coverage-value-chip strong {
      font-size: clamp(22px, 2.8vw, 30px);
      line-height: 1;
      font-weight: 950;
      letter-spacing: -0.035em;
    }

    .tide-coverage-image-label,
    .tide-coverage-live-note {
      position: absolute;
      z-index: 2;
      margin: 0;
      color: white;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
      white-space: nowrap;
    }

    .tide-coverage-image-label {
      left: 50%;
      bottom: 10%;
      transform: translateX(-50%);
    }

    .tide-coverage-live-note {
      top: 13px;
      right: 13px;
      border: 1px solid rgba(255, 255, 255, 0.32);
      border-radius: 999px;
      padding: 6px 9px;
      background: rgba(5, 21, 28, 0.82);
      backdrop-filter: blur(10px);
      text-shadow: none;
      letter-spacing: 0.07em;
      pointer-events: none;
    }

    .tide-coverage-control {
      position: sticky;
      z-index: 4;
      bottom: 0;
      padding: 14px 16px 18px;
      background: color-mix(in srgb, var(--panel) 96%, transparent);
      backdrop-filter: blur(16px);
    }

    .tide-coverage-drag-hint-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin: 0 2px 8px;
    }

    .tide-coverage-drag-hint {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      letter-spacing: 0.04em;
    }

    .tide-coverage-current-readout {
      margin: 0;
      color: var(--text);
      font-size: 12px;
      font-weight: 750;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .tide-coverage-current-readout strong {
      font-weight: 900;
    }

    .tide-coverage-range-row {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      margin-top: 0;
    }

    .tide-coverage-range-row::before {
      position: absolute;
      top: 50%;
      left: var(--tide-current-pct, 38%);
      z-index: 1;
      width: 2px;
      height: 28px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--amber, #f6bb4f) 80%, white);
      content: "";
      pointer-events: none;
      transform: translate(-50%, -50%);
    }

    .tide-coverage-range-row input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 52px;
      margin: 0;
      background: transparent;
      cursor: ew-resize;
      touch-action: none;
    }

    .tide-coverage-range-row input[type="range"]::-webkit-slider-runnable-track {
      height: 16px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--blue) 35%, var(--subtle-fill-strong));
    }

    .tide-coverage-range-row input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 28px;
      height: 28px;
      margin-top: -6px;
      border: 3px solid var(--panel);
      border-radius: 999px;
      background: var(--blue);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    }

    .tide-coverage-range-row input[type="range"]::-moz-range-track {
      height: 16px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--blue) 35%, var(--subtle-fill-strong));
    }

    .tide-coverage-range-row input[type="range"]::-moz-range-thumb {
      width: 28px;
      height: 28px;
      border: 3px solid var(--panel);
      border-radius: 999px;
      background: var(--blue);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    }

    .tide-coverage-range-row input[type="range"]:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 6px;
      border-radius: 999px;
    }

    .tide-coverage-range-ticks {
      display: flex;
      justify-content: space-between;
      margin: 6px 8px 0;
      color: var(--muted);
      font-size: 10px;
      font-weight: 750;
    }

    @media (max-width: 840px) {
      .tide-coverage-dialog {
        width: min(760px, calc(100vw - 18px));
        max-height: calc(100dvh - 18px);
        border-radius: 18px;
      }

      .tide-coverage-helper {
        border-radius: 16px;
      }

      .tide-coverage-visual-column {
        border: 0;
      }

      .tide-coverage-header {
        position: static;
      }
    }

    @media (max-width: 560px) {
      .tide-coverage-header {
        padding: 14px 16px 15px;
      }

      .tide-coverage-header h2 {
        font-size: 24px;
      }

      .tide-coverage-figure {
        border-radius: 12px;
      }

      .tide-coverage-live-note {
        top: 8px;
        right: 8px;
        padding: 5px 8px;
        font-size: 9px;
      }

      .tide-coverage-value-chip {
        top: 8px;
        left: 8px;
        min-width: 94px;
        padding: 7px 9px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .tide-coverage-figure::before,
      .tide-coverage-figure img {
        animation-duration: 0.01ms;
        transition-duration: 0.01ms;
      }
    }

/* Q-20260831-022 — status pill spacing and compact header */
.app-status-bar .pills { gap: 10px; }
.app-status-bar .pill { min-height: 32px; padding: 0 13px; gap: 7px; overflow: visible; }
.app-status-bar .tide-alert-help { width: 21px; height: 21px; background: transparent; font-size: 12px; }
.app-status-bar .pill.tide-alert.has-helper { gap: 0; padding-right: 0; }
.app-status-bar .pill.tide-alert.has-helper .tide-alert-label { padding-right: 8px; }
.app-status-bar .pill.tide-alert.has-helper .tide-alert-help-wrap { align-self: stretch; border-left: 0; padding: 0 10px 0 0; }

@media (max-width: 760px) {
  .app-status-bar .pills { gap: 8px; }
  .app-status-bar .pill { min-height: 30px; padding: 0 11px; gap: 6px; font-size: 12px; }
  .app-status-bar .pill.tide-alert.has-helper .tide-alert-label { padding-right: 7px; }
  .app-status-bar .pill.tide-alert.has-helper .tide-alert-help-wrap { padding-right: 8px; padding-left: 0; }
}

@media (max-width: 560px) {
  .app-status-bar { gap: 6px; padding-bottom: 8px; }
  .app-status-bar .pills { grid-column: auto; grid-row: auto; gap: 7px; }
  .eyebrow.wind-title { font-size: 16px; letter-spacing: 0.04em; }
  .theme-option { width: 28px; height: 28px; }
  .app-status-bar .pill { min-height: 30px; padding: 0 9px; }
  .app-status-bar .pill.tide-alert.has-helper .tide-alert-label { padding-right: 6px; }
  .app-status-bar .pill.tide-alert.has-helper .tide-alert-help-wrap { padding-right: 7px; padding-left: 0; }
  .app-status-bar .tide-alert-help { width: 19px; height: 19px; }
  .app-status-bar:has(.flow-alert:not(.is-hidden)) { row-gap: 8px; padding-bottom: 10px; }
  .app-status-bar:has(.flow-alert:not(.is-hidden)) .pills { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .app-status-bar:has(.flow-alert:not(.is-hidden)) .top-bar { grid-column: 3; grid-row: 1; }
}

@media (max-width: 380px) {
  .app-status-bar { gap: 5px; }
  .app-status-bar .pills { gap: 6px; }
  .eyebrow.wind-title { font-size: 14px; letter-spacing: 0.03em; }
  .theme-option { width: 26px; height: 26px; }
  .app-status-bar .pill { min-height: 27px; padding: 0 7px; font-size: 10px; }
  .app-status-bar .pill.tide-alert.has-helper .tide-alert-label { padding-right: 5px; }
  .app-status-bar .pill.tide-alert.has-helper .tide-alert-help-wrap { padding-right: 5px; padding-left: 0; }
  .app-status-bar .tide-alert-help { width: 17px; height: 17px; font-size: 10px; }
}

@media (max-width: 340px) {
  .app-status-bar { row-gap: 8px; padding-bottom: 10px; }
  .app-status-bar .pills { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .app-status-bar .top-bar { grid-column: 3; grid-row: 1; }
}

/* Wind manual refresh: occupy the existing day row without changing its height. */
.wind-graph-widget .wind-graph-day-head { padding-right: 40px; }
.wind-graph-day-head .wind-graph-day-stepper { position: relative; }
.wind-graph-day-head .wind-refresh { position:absolute; right:4px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:22px; height:22px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; }
.wind-refresh svg { width:18px; height:18px; }
.wind-refresh:hover { background:var(--blue-soft); }
.wind-refresh:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.wind-refresh:disabled { cursor:wait; opacity:.65; }
.wind-refresh.has-error { background:var(--red-soft); color:var(--red); }
.wind-refresh[aria-busy="true"] svg { animation:wind-refresh-spin .8s linear infinite; }
[data-wind-refresh-feedback] { display:none; position:absolute; left:24px; right:24px; top:0; height:100%; align-items:center; justify-content:center; white-space:nowrap; font-size:10px; font-weight:600; pointer-events:none; }
.is-refresh-feedback [data-wind-refresh-feedback] { display:flex; }
.is-refresh-feedback [data-wind-graph-day-caption], .is-refresh-feedback [data-wind-graph-inspect-time] { visibility:hidden; }
.wind-refresh-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes wind-refresh-spin { to { transform:rotate(360deg); } }
@media(max-width:980px),(pointer:coarse) {
  .wind-graph-day-head .wind-refresh { width:36px; height:36px; }
  .wind-refresh svg { width:20px; height:20px; }
  [data-wind-refresh-feedback] { left:36px; right:36px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .wind-refresh[aria-busy="true"] svg { animation:none; } }

/* Reserve feedback width when the sensor has no observation-time label. */
.is-refresh-feedback .wind-graph-day-stepper { min-width:180px; }
.is-refresh-feedback [data-wind-graph-day-step="1"] { margin-left:auto; }

/* Pickup form: beach-wide observed member count. */
.shuttle-widget .shuttle-count-field { border:0; padding:0; margin:8px 0 4px; min-width:0; }
.shuttle-widget .shuttle-count-field legend { color:var(--muted); font-size:11px; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.shuttle-widget .shuttle-count-hint { color:var(--muted); font-size:12px; line-height:1.4; margin:6px 0 10px; }
.shuttle-widget .shuttle-count-stepper { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; gap:4px; padding:4px; border:1.5px solid var(--line); border-radius:12px; background:var(--subtle-fill); touch-action:manipulation; }
.shuttle-widget .shuttle-count-stepper button { min-height:44px; border:0; border-radius:8px; background:var(--line); color:var(--text); font:inherit; font-size:24px; cursor:pointer; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
.shuttle-widget .shuttle-count-stepper button[aria-disabled="true"] { opacity:.4; cursor:default; }
.shuttle-widget .shuttle-count-stepper input { width:100%; min-width:0; border:0; border-radius:8px; background:transparent; color:var(--text); text-align:center; font:inherit; font-size:24px; font-weight:850; -moz-appearance:textfield; }
.shuttle-widget .shuttle-count-stepper input::-webkit-inner-spin-button,
.shuttle-widget .shuttle-count-stepper input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.shuttle-widget .shuttle-count-stepper :focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.shuttle-widget .shuttle-ping-button[hidden] { display:none; }

.shuttle-widget .shuttle-count-stepper input::placeholder { color:var(--muted); font-size:14px; font-weight:500; opacity:1; }