/* North Sea Surf panel components. Every value comes from tokens.css. */

/* Shared control size: band buttons, the timeline, the dock and open buttons are all 44 px tall */
.nss-icon { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.nss-icon--sm { width: 18px; height: 18px; }

/* Panel: the open state, flush to the bottom edge */
.nss-panel { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); background: var(--ui-surface); border-top: 1px solid var(--ui-line); color: var(--ui-ink); }
.nss-panel-timerow { display: flex; gap: 6px; align-items: flex-end; }
.nss-panel-timerow .nss-timeline { flex: 1; min-width: 0; }

/* Band buttons: Pressure, Wind, Swell, icon only */
.nss-bands { display: flex; gap: var(--space-1); }
.nss-band { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--ui-track); border-radius: var(--radius-card); background: var(--ui-raised); color: var(--ui-ink); cursor: pointer; }
.nss-band[aria-pressed="true"] { background: var(--ui-control); border-color: var(--ui-control); color: var(--ui-control-ink); }
.nss-band:focus-visible, .nss-switch button:focus-visible, .nss-timeline:focus-visible, .nss-dock-btn:focus-visible { outline: 2px solid var(--lifeboat-deep); outline-offset: 2px; }

/* Key row: colour steps on the left, the swell switch on the right */
.nss-keyrow { display: flex; align-items: center; gap: var(--space-2); }
.nss-key { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.nss-key-unit { font-family: var(--font-mono); font-size: 10px; line-height: 1; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ui-ink-muted); }
.nss-key-steps { display: flex; gap: 1px; }
.nss-key-step { flex: 1; display: flex; flex-direction: column; gap: 3px; font-family: var(--font-mono); font-size: 10px; line-height: 1; font-weight: 400; color: var(--ui-ink); }
.nss-key-step i { display: block; height: 6px; border-radius: var(--radius-xs); }

/* Swell switch: Height / Period, icon only */
.nss-switch { flex: 0 0 auto; display: flex; gap: calc(var(--space-1) / 2); padding: calc(var(--space-1) / 2); border-radius: var(--radius-frame); background: var(--ui-raised); border: 1px solid var(--ui-track); }
.nss-switch button { width: 44px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-inner); background: transparent; color: var(--ui-ink); cursor: pointer; }
.nss-switch button[aria-pressed="true"] { background: var(--ui-control); color: var(--ui-control-ink); }

/* Time readout: day and hour at equal weight, lead time small between them */
.nss-readout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-card); background: var(--ui-display); color: var(--ui-display-ink); }
.nss-readout-day, .nss-readout-time { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 28px; line-height: 1; font-weight: 500; letter-spacing: -0.6px; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.nss-readout-lead { flex: 0 0 auto; font-family: var(--font-mono); font-size: 10px; line-height: 1; font-weight: 500; letter-spacing: 0.6px; color: var(--ui-display-muted); font-variant-numeric: tabular-nums; }
.nss-readout-status { flex-basis: 100%; text-align: center; font-family: var(--font-mono); font-size: 9px; line-height: 1; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ui-display-muted); }
.nss-readout-status[data-tone="warn"] { color: var(--lifeboat); }

/* Timeline (horizontal, open panel): 44 px tall, ticks rise from the bottom edge */
.nss-timeline { position: relative; padding-top: 5px; }
.nss-timeline-arrow { position: absolute; left: calc(50% - 7px); top: 0; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--lifeboat-deep); z-index: 1; }
.nss-scale { position: relative; height: 44px; box-sizing: border-box; border-radius: var(--radius-card); background: var(--ui-raised); border: 1px solid var(--ui-track); overflow: hidden; }
.nss-tick { position: absolute; bottom: 0; width: 1px; height: 6px; margin-left: -0.5px; background: var(--ui-ink); }
.nss-tick--3h { height: 10px; }
.nss-tick--day { width: 1.5px; height: 22px; margin-left: -0.75px; }
.nss-tick--past { opacity: 0.35; }
.nss-tick--pending { opacity: 0.18; }
.nss-tick--now { width: 2px; height: 14px; margin-left: -1px; background: var(--lifeboat-deep); opacity: 1; z-index: 1; }
.nss-day { position: absolute; top: 5px; padding-left: 4px; font-family: var(--font-mono); font-size: 10px; line-height: 1; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ui-ink); white-space: nowrap; }
.nss-day--past { opacity: 0.35; }
.nss-end { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(135deg, var(--ui-track) 0 1px, transparent 1px 6px); }
.nss-needle { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--lifeboat-deep); z-index: 2; }
.nss-tip { position: absolute; left: calc(50% + 12px); top: 4px; height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 var(--space-2); border-radius: var(--radius-card); background: var(--ui-control); color: var(--ui-control-ink); font-family: var(--font-mono); font-size: 11px; line-height: 1; font-weight: 600; white-space: nowrap; z-index: 3; transition: opacity 0.3s; }
.nss-tip[data-fading] { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { .nss-tip { transition: none; } }

/* Dock and open buttons: same size and same place in both states */
.nss-dock-btn { flex: 0 0 48px; width: 48px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--ui-track); border-radius: var(--radius-card); background: var(--ui-raised); color: var(--ui-ink); cursor: pointer; }

/* Docked column: 64 px on the right edge, timeline no higher than 60% of the screen */
.nss-column { position: absolute; right: 0; bottom: 0; top: max(0px, calc(40vh - 62px)); width: 64px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 6px var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)) var(--space-1); background: var(--ui-surface); border-left: 1px solid var(--ui-line); border-top: 1px solid var(--ui-line); border-radius: var(--radius-card) 0 0 0; color: var(--ui-ink); }
.nss-column .nss-bands { flex-direction: column; }
.nss-column .nss-band-slot { position: relative; height: 44px; }
.nss-column .nss-band { width: 100%; }
.nss-column-time { padding: 6px 2px; border-radius: var(--radius-card); background: var(--ui-display); color: var(--ui-display-ink); display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nss-column-time b { font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: 0.4px; }
.nss-column-time strong { font-size: 15px; line-height: 1; font-weight: 500; letter-spacing: -0.4px; }
.nss-column-time small { font-size: 8px; line-height: 1; font-weight: 500; color: var(--ui-display-muted); }
.nss-vtimeline { position: relative; flex: 1; min-height: 80px; margin: 0 calc(-1 * var(--space-3)) 0 calc(-1 * var(--space-1)); background: var(--ui-raised); border-top: 1px solid var(--ui-track); border-bottom: 1px solid var(--ui-track); }
.nss-vtimeline-track { position: absolute; inset: 0; overflow: hidden; }
.nss-vtimeline .nss-needle { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; }
.nss-vtimeline-arrow { position: absolute; left: -9px; top: calc(50% - 6px); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--lifeboat-deep); }
.nss-vtimeline .nss-tick { left: auto; right: 0; bottom: auto; height: 1px; width: 6px; margin: -0.5px 0 0; }
.nss-vtimeline .nss-tick--3h { width: 10px; }
.nss-vtimeline .nss-tick--day { height: 1.5px; width: 22px; }
.nss-vtimeline .nss-tick--now { height: 2px; width: 14px; }
.nss-vtimeline .nss-day { left: 6px; top: auto; padding: 0; font-size: 9px; }

/* Flyout: the key (and Height/Period on Swell) floating level with the selected band */
.nss-flyout { position: absolute; right: calc(100% + var(--space-3)); top: 0; height: 100%; width: calc(100vw - 64px - 2 * var(--space-3)); max-width: 306px; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1) 0 10px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--radius-card); }
.nss-flyout .nss-key-unit { font-size: 8px; letter-spacing: 0.5px; }
.nss-flyout .nss-key-step { font-size: 8px; gap: 2px; }
.nss-flyout .nss-switch button { width: 40px; height: 34px; }