.container {
width: 100%;
padding-inline: var(--space-sm);
}
@media (min-width: 768px)  { .container { padding-inline: var(--space-lg); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-md); } }
.grid-reveal {
position: fixed;
inset: 0;
z-index: var(--z-debug);
pointer-events: none;
}
.grid-reveal .container { height: 100%; }
.grid-reveal__columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-sm);
height: 100%;
}
.grid-reveal__col {
height: 100%;
border-left:  1px solid color-mix(in srgb, var(--accent) 15%, transparent);
border-right: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}
.grid-reveal__col span {
display: block;
padding-top: var(--space-xs);
font-family: var(--font-mono);
font-size: var(--ruler-tick-size);
font-weight: var(--ruler-tick-weight);
letter-spacing: var(--ruler-tick-tracking);
color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.grid-reveal__col:nth-child(n+5) { display: none; }
@media (min-width: 768px) {
.grid-reveal__columns { grid-template-columns: repeat(8, 1fr); gap: var(--space-md); }
.grid-reveal__col:nth-child(n+5) { display: block; }
.grid-reveal__col:nth-child(n+9) { display: none; }
}
@media (min-width: 1024px) {
.grid-reveal__columns { grid-template-columns: repeat(12, 1fr); }
.grid-reveal__col:nth-child(n+9) { display: block; }
}
:root {
--bg:   #eef2f6;
--text: #131616;
--accent: #1a1a1a;
--marine:  #002642;
--horizon: #FF5E37;
--salt:    #F5EFE5;
--stone:   #798591;
--interactive: #0066D6;
--wave-flat:     #6ba3c7;
--wave-small:    #4a8cb0;
--wave-medium:   #2d7399;
--wave-solid:    #1a5a82;
--wave-big:      #0d4168;
--wave-xxl:      #062a4a;
--period-ramp-short: #B7E2E6;
--period-ramp-long:  #472A82;
--energy-dead:   #AEB7BE;
--energy-wind-a: #F0D67C; --energy-wind-b: #E4B24A;
--energy-avg-a:  #5AC6D6; --energy-avg-b:  #2F6FC6;
--energy-good-a: #C455A6; --energy-good-b: #8341BE;
--energy-prem-a: #F0913E; --energy-prem-b: #A81F22;
--loading-ring-gradient: conic-gradient(from 0deg,
var(--energy-dead)   0%,
var(--energy-wind-a) 11.1%,
var(--energy-wind-b) 22.2%,
var(--energy-avg-a)  33.3%,
var(--energy-avg-b)  44.4%,
var(--energy-good-a) 55.6%,
var(--energy-good-b) 66.7%,
var(--energy-prem-a) 77.8%,
var(--energy-prem-b) 88.9%,
var(--energy-dead)   100%);
--hash-line:        var(--stone);
--hash-line-width:  1.5px;
--hash-stripe:      7.07px;
--hash-pattern: url('/images/hash-tile.svg?v=20260930d');
--wind-offshore: #1f7a45;
--wind-onshore:  #96610c;
--wind-cross:    #6a645c;
--error: #B83920;
--success: #1f7a45;
--border:  #e4e2dd;
--divider: var(--border);
--chip-hairline: color-mix(in srgb, var(--border) 60%, transparent);
--card-surface: #FEFDFA;
--surface-row:  #FBF7EF;
--status-ambient-surface: #000;
--status-ambient-on:      #fff;
--plot-ground: var(--card-surface);
--forecast-field: var(--surface-row);
--lane-separation: calc(var(--space-md) * 0.8);
--tile-surface:        var(--surface-row);
--tile-surface-hover:  color-mix(in srgb, var(--text) 5%, var(--surface-row));
--compass-ocean: color-mix(in srgb, var(--wave-flat) 45%, var(--card-surface));
--compass-sand:  #E9DEC9;
--legend-shore:  color-mix(in srgb, var(--compass-sand) 88%, #000 12%);
--map-ocean:     color-mix(in srgb, var(--wave-flat) 45%, var(--card-surface));
--map-land:      #E9DEC9;
--map-land-edge: color-mix(in srgb, var(--muted) 45%, transparent);
--map-marker:    var(--text);
--map-label-color:  var(--text);
--map-label-size:   0.75rem;
--map-label-weight: 600;
--map-label-gap:    11px;
--map-label-halo:   color-mix(in srgb, var(--card-surface) 92%, transparent);
--map-sample:        var(--map-marker);
--map-sample-size:   16px;
--map-sample-label:  var(--map-label-color);
--map-sample-weight: 500;
--map-sample-label-size: 0.6875rem;
--map-sample-gap:    15px;
--map-sample-line:   color-mix(in srgb, var(--text) 60%, transparent);
--map-cluster-bg:    var(--text);
--map-cluster-fg:    var(--card-surface);
--map-cluster-size:  24px;
--map-cluster-count-size: 0.8125rem;
--map-cluster-gap:   17px;
--map-fit-size: 40px;
--map-fit-bg:   var(--card-surface);
--map-fit-fg:   var(--text);
--top-card-height: 57px;
--waterline-safe-padding: 16px;
--chrome-safe-padding: 20px;
--muted:   #5A6570;
--space-xs:  0.5rem;
--space-sm:  1rem;
--space-md:  clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
--space-lg:  clamp(1.5rem, 1.25rem + 0.75vw, 2rem);
--ease-emphasized:            cubic-bezier(0.2, 0, 0, 1);
--ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
--ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
--ease-standard:              cubic-bezier(0.2, 0, 0, 1);
--ease-md-standard:           cubic-bezier(0.4, 0, 0.2, 1);
--dur-short:        150ms;
--dur-popover:      200ms;
--dur-medium:       250ms;
--dur-fade:         200ms;
--dur-sheet-enter:  400ms;
--dur-sheet-exit:   300ms;
--scrim-fade:       300ms;
--scrim-ease:       var(--ease-standard);
--elevation-card:    0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
--elevation-popover: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
--elevation-menu:    0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
--elevation-sheet:   0 -2px 8px rgba(0, 0, 0, 0.06), 0 -8px 32px rgba(0, 0, 0, 0.12);
--scrim-mobile: rgba(15, 23, 42, 0.42);
--sheet-sky-gap: 10svh;
--tooltip-surface: #322F35;
--tooltip-on-surface: #F5EFF7;
--font-family:  'Inter', sans-serif;
--font-mono:    'DM Mono', monospace;
--font-scale: 1;
--heading-dampen: 1;
--heading-font-scale: calc(1 + (var(--font-scale) - 1) * var(--heading-dampen));
--heading-size:         calc(clamp(2rem, -1.6px + 2vw, 36.8px) * var(--heading-font-scale));
--heading-weight:       600;
--heading-line-height:  calc(clamp(2rem, -1.6px + 2vw, 36.8px) * var(--heading-font-scale));
--heading-tracking:     -0.03em;
--subtitle-size:        calc(clamp(1rem, -0.8px + 1vw, 18.4px) * var(--font-scale));
--subtitle-weight:      600;
--subtitle-line-height: 1.3;
--subtitle-tracking:    0;
--panel-title-tracking: -0.015em;
--page-title-tracking:  -0.02em;
--section-title-gap:    calc(12em / 16);
--body-size:            calc(clamp(0.875rem, -0.7px + 0.875vw, 16.1px) * var(--font-scale));
--body-weight:          400;
--body-line-height:     1.4;
--ui-size:              calc(clamp(0.875rem, -0.7px + 0.875vw, 16.1px) * var(--font-scale));
--ui-weight:            500;
--ui-line-height:       1.4;
--chip-size:            calc(clamp(0.875rem, -0.7px + 0.875vw, 16.1px) * var(--font-scale));
--chip-weight:          500;
--chip-line-height:     1.2;
--chip-height:      calc(32em / 14);
--chip-gap:         calc(8em / 14);
--chip-gap-tight:   calc(6em / 14);
--radius-s:         calc(8px  * var(--font-scale));
--radius-m:         calc(16px * var(--font-scale));
--radius-l:         calc(28px * var(--font-scale));
--radius-full:      999px;
--chip-radius:      var(--radius-s);
--chip-caret-pull:  calc(-4em / 18);
--chip-pad:         0 calc(16em / 14) 0 calc(12em / 14);
--chip-pad-tight:   0 calc(10em / 14) 0 calc(8em / 14);
--nav-state-hover:  color-mix(in srgb, var(--text) 6%, transparent);
--nav-state-open:   color-mix(in srgb, var(--interactive) 10%, var(--card-surface));
--card-radius:      var(--radius-m);
--plot-radius:      0px;
--meta-size:            calc(clamp(0.75rem, -0.6px + 0.75vw, 13.8px) * var(--font-scale));
--meta-weight:          400;
--meta-line-height:     1.3;
--row-label-size:       calc(clamp(0.875rem, -0.7px + 0.875vw, 16.1px) * var(--font-scale));
--row-label-weight:     400;
--row-label-line-height: 1.4;
--row-primary-size:     calc(clamp(0.875rem, -0.7px + 0.875vw, 16.1px) * var(--font-scale));
--row-primary-weight:   600;
--row-primary-line-height: 1.4;
--row-meta-size:        calc(clamp(0.875rem, -0.7px + 0.875vw, 16.1px) * var(--font-scale));
--row-meta-weight:      400;
--row-meta-line-height: 1.4;
--row-caveat-size:      calc(clamp(0.875rem, -0.7px + 0.875vw, 16.1px) * var(--font-scale));
--row-caveat-weight:    400;
--row-caveat-line-height: 1.4;
--input-size:           calc(clamp(1rem, -0.8px + 1vw, 18.4px) * var(--font-scale));
--dialog-title-size:    calc(clamp(1.0625rem, -0.85px + 1.0625vw, 19.55px) * var(--font-scale));
--dialog-body-size:     calc(clamp(1rem, -0.8px + 1vw, 18.4px) * var(--font-scale));
--dialog-action-size:   calc(clamp(0.9375rem, -0.75px + 0.9375vw, 17.25px) * var(--font-scale));
--display-size:         calc(clamp(2.125rem, 1.1rem + 2.6vw, 3.5rem) * var(--font-scale));
--display-line-height:  1.05;
--display-tracking:     -0.025em;
--display-measure:      10em;
--display-action-gap:   1.05;
--hero-action-size:     calc(1rem * var(--font-scale));
--brand-panel-surface:     var(--card-surface);
--brand-panel-pad-block:   var(--space-lg);
--brand-panel-pad-inline:  clamp(var(--space-sm), 5vw, 5rem);
--brand-panel-measure:     36rem;
--brand-panel-split:       50%;
--brand-panel-stack-h:     calc(var(--app-height, 100svh) / 2);
--brand-panel-appbar-h:    0px;
--dialog-small-size:    calc(clamp(0.75rem, -0.6px + 0.75vw, 13.8px) * var(--font-scale));
--ruler-tick-size:      0.625rem;
--ruler-tick-weight:    500;
--ruler-tick-tracking:  0.08em;
--ruler-label-size:     calc(clamp(0.78125rem, -0.625px + 0.78125vw, 14px) * var(--font-scale));
--timeline-clock-size:   calc(clamp(0.78125rem, -0.625px + 0.78125vw, 14.375px) * var(--font-scale));
--timeline-clock-weight: 500;
--timeline-clock-tracking: 0;
--timeline-hour-size:    calc(clamp(0.78125rem, -0.625px + 0.78125vw, 14.375px) * var(--font-scale));
--timeline-hour-weight:  400;
--timeline-hour-tracking: 0.04em;
--timeline-weekday-size:   calc(clamp(0.875rem, -0.7px + 0.875vw, 16.1px) * var(--font-scale));
--timeline-weekday-weight: 600;
--timeline-legend-size:    calc(clamp(0.6875rem, -0.55px + 0.6875vw, 12.65px) * var(--font-scale));
--timeline-strip-h:            calc(124 * var(--timeline-clock-size) / 12);
--timeline-strip-h-historical: calc(60 * var(--timeline-clock-size) / 12);
--panel-title-h: calc(14px * var(--font-scale) + var(--footer-title-line) + 6px * var(--font-scale));
--footer-collapsed-h:            calc(var(--panel-title-h) + var(--timeline-strip-h) + 2px);
--footer-title-line:  calc(var(--subtitle-size) * 1.25 * var(--subtitle-line-height));
--footer-chevron-clearance: max(
0px,
calc(20px * var(--font-scale) - var(--footer-title-line) / 2)
);
--record-ride-footer-h: 126px;
--spot-sheet-peek-lead-h: 172px;
--spot-sheet-peek-compass: 0.75;
--home-sheet-peek-lead-h: 207px;
--home-directory-peek-h:  196px;
--content-band-deduct: calc(
var(--top-card-height)
+ var(--footer-collapsed-h)
+ env(safe-area-inset-bottom, 0px)
+ (var(--chrome-safe-padding) * var(--font-scale))
);
--open-surface-fraction: 0.66;
--open-surface-fraction-footer: 0.78;
--compass-label-size:    calc(clamp(0.6875rem, -0.55px + 0.6875vw, 12.65px) * var(--font-scale));
--icon-sm:   calc(clamp(1rem, -0.8px + 1vw, 18.4px) * var(--font-scale));
--icon-md:   calc(clamp(1.125rem, -0.9px + 1.125vw, 20.7px) * var(--font-scale));
--icon-ml:   calc(clamp(1.25rem, -1px + 1.25vw, 23px) * var(--font-scale));
--icon-lg:   calc(clamp(1.5rem, -1.2px + 1.5vw, 27.6px) * var(--font-scale));
--z-canvas:        0;
--z-rail:          200;
--z-toggle:        300;
--z-card-bottom:   400;
--z-card-top:      500;
--z-tooltip:       600;
--z-overlay:       1100;
--z-debug:        9999;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/dm-mono-v16-latin-regular.woff2') format('woff2');
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/dm-mono-v16-latin-500.woff2') format('woff2');
}
@font-face {
font-family: 'Material Symbols Rounded';
font-style: normal;
font-weight: 500;
font-display: block;
src: url('../fonts/material-symbols-rounded.woff2?v=20260930d') format('woff2');
}
html:not(.fonts-ready) .material-symbols-rounded {
visibility: hidden;
}
.material-symbols-rounded {
font-family: 'Material Symbols Rounded';
font-weight: 500;
font-style: normal;
font-size: var(--icon-lg);
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-variation-settings: 'FILL' 0;
}
:root {
--card-inset: var(--space-sm);
}
@media (min-width: 768px)  { :root { --card-inset: var(--space-lg); } }
@media (min-width: 1024px) { :root { --card-inset: var(--space-md); } }
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: var(--font-family);
font-size: var(--body-size);
font-weight: var(--body-weight);
line-height: var(--body-line-height);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
height: 100vh;
height: 100svh;
}
#particle-canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
height: calc(100dvh + env(safe-area-inset-bottom, 0px));
z-index: var(--z-canvas);
display: block;
}
.ruler-rail {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: calc(36px * var(--font-scale));
z-index: var(--z-rail);
background: var(--card-surface);
border: none;
border-radius: 0;
box-shadow: none;
pointer-events: auto;
cursor: pointer;
}
.ruler-rail:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.ruler-rail canvas {
display: block;
width: 100%;
height: 100%;
font-size: var(--ruler-label-size);
pointer-events: none;
}
.unit-toggle-wrap {
position: fixed;
left: calc((36px + var(--space-sm)) * var(--font-scale));
top: calc(var(--waterline-y, 50vh) + 16px);
z-index: var(--z-toggle);
pointer-events: auto;
}
html:not(.app-booted) .unit-toggle-wrap {
opacity: 0;
}
.total-height-chip {
position: fixed;
left: calc((36px + var(--space-sm)) * var(--font-scale));
top: var(--crest-y, 30vh);
transform: translate(0, -50%);
z-index: var(--z-toggle);
display: inline-flex;
align-items: center;
gap: var(--chip-gap);
height: var(--chip-height);
padding: var(--chip-pad);
border: 1px solid var(--chip-hairline);
border-radius: var(--chip-radius);
background: var(--card-surface);
box-shadow: var(--elevation-card);
font-family: var(--font-family);
font-size: var(--chip-size);
font-weight: var(--chip-weight);
line-height: var(--chip-line-height);
white-space: nowrap;
color: var(--text);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
opacity: var(--crest-alpha, 0);
transition:
transform    350ms var(--ease-emphasized-decelerate),
border-color 0.2s   var(--ease-md-standard);
}
.total-height-chip:not(.is-visible) {
pointer-events: none;
}
@media (hover: hover) {
.total-height-chip.is-visible:hover {
border-color: var(--text);
}
}
.total-height-chip.is-visible:focus-visible {
border-color: var(--text);
}
.total-height-chip:focus-visible {
outline: 2px solid var(--interactive);
outline-offset: 2px;
}
body.auth-card-open .total-height-chip {
opacity: 0;
transform: translate(-100vw, -50%);
pointer-events: none;
transition:
opacity   400ms var(--ease-emphasized-decelerate),
transform 400ms var(--ease-emphasized-decelerate);
}
.unit-toggle {
display: inline-flex;
align-items: stretch;
height: var(--chip-height);
border: 1px solid color-mix(in srgb, var(--interactive) 18%, var(--border));
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--interactive) 6%, var(--card-surface));
overflow: hidden;
}
.unit-toggle-option {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--chip-gap);
min-width: calc(56em / 14);
padding: 0 calc(12em / 14);
border: 0;
background: transparent;
font-family: var(--font-family);
font-size: var(--chip-size);
font-weight: var(--chip-weight);
line-height: var(--chip-line-height);
color: var(--muted);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
transition: color 0.15s var(--ease-md-standard);
}
.unit-toggle-option + .unit-toggle-option {
border-left: 1px solid color-mix(in srgb, var(--interactive) 18%, var(--border));
}
.unit-toggle-option:first-child {
padding-left: calc(16em / 14);
border-radius: var(--radius-full) 0 0 var(--radius-full);
}
.unit-toggle-option:last-child {
padding-right: calc(16em / 14);
border-radius: 0 var(--radius-full) var(--radius-full) 0;
}
@media (hover: hover) {
.unit-toggle-option:hover {
color: var(--text);
}
}
.unit-toggle-option:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
position: relative;
z-index: 1;
}
.unit-toggle-option[aria-pressed="true"] {
color: var(--text);
}
.unit-toggle-check {
font-size: var(--icon-md);
line-height: 1;
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
color: var(--interactive);
display: none;
}
.unit-toggle-option[aria-pressed="true"] .unit-toggle-check {
display: inline-block;
}
.unit-toggle-label {
}
.ui-layer {
position: relative;
height: 100vh;
height: 100svh;
display: flex;
flex-direction: column;
pointer-events: none;
container-type: inline-size;
container-name: ui;
}
.ui-layer > * {
pointer-events: auto;
}
.viewport-spacer {
flex: 1;
pointer-events: none;
}
.top-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-card-top);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(8px * var(--font-scale));
padding: calc(calc(12em / 14) + env(safe-area-inset-top, 0px)) calc(var(--space-sm) * var(--font-scale)) calc(12em / 14);
background: var(--card-surface);
border-radius: 0;
border-bottom: 1px solid var(--divider);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
pointer-events: auto;
flex-shrink: 0;
}
.wind-compass-card {
position: fixed;
top: calc(
var(--top-card-height)
+ var(--chrome-safe-padding)
);
bottom: calc(
env(safe-area-inset-bottom, 0px)
+ var(--footer-collapsed-h)
+ var(--chrome-safe-padding)
);
right: calc(var(--space-sm) * var(--font-scale));
height: max-content;
margin-top: auto;
margin-bottom: auto;
width: calc(176em / 14);
padding: calc(12em / 14) 0 calc(12em / 14) calc(12em / 14);
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
max-height: calc(
100vh
- var(--top-card-height)
- var(--chrome-safe-padding)
- var(--footer-collapsed-h)
- env(safe-area-inset-bottom, 0px)
- var(--chrome-safe-padding)
);
max-height: calc(
100dvh
- var(--top-card-height)
- var(--chrome-safe-padding)
- var(--footer-collapsed-h)
- env(safe-area-inset-bottom, 0px)
- var(--chrome-safe-padding)
);
border-radius: var(--card-radius);
background: var(--card-surface);
box-shadow: var(--elevation-card);
z-index: var(--z-card-bottom);
overflow: visible;
opacity: 1;
pointer-events: auto;
transition: opacity var(--dur-popover) var(--ease-emphasized);
}
body.is-historical .wind-compass-card {
opacity: 0;
pointer-events: none;
}
.wind-compass-card-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
border-radius: 0 var(--radius-m) var(--radius-m) 0;
}
.wind-compass-card-scroll::-webkit-scrollbar {
width: 8px;
}
.wind-compass-card-scroll::-webkit-scrollbar-track {
background: transparent;
}
.wind-compass-card-scroll::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.18);
border-radius: 4px;
}
.wind-compass-card-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.28);
}
.wind-compass-card.is-overflowing .wind-compass-card-scroll {
scrollbar-gutter: stable;
}
.wind-compass-card-scroll-affordance {
position: absolute;
left: 0;
right: 0;
font-size: var(--body-size);
height: var(--chip-height);
display: flex;
align-items: center;
justify-content: center;
background: var(--card-surface);
border: none;
cursor: pointer;
color: var(--muted);
z-index: 1;
transition:
background 0.2s var(--ease-md-standard),
color 0.2s var(--ease-md-standard);
}
.wind-compass-card-scroll-affordance--up {
top: 0;
border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.wind-compass-card-scroll-affordance--down {
bottom: 0;
border-radius: 0 0 var(--card-radius) var(--card-radius);
}
.wind-compass-card-scroll-affordance:hover {
background: var(--surface-row);
color: var(--text);
}
.wind-compass-card-scroll-affordance:active {
background: color-mix(in srgb, var(--text) 4%, var(--surface-row));
}
.wind-compass-card-scroll-affordance:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.wind-compass-card-scroll-chevron {
font-size: var(--icon-lg);
}
.wind-compass-card-scroll-affordance--up .wind-compass-card-scroll-chevron {
transform: rotate(180deg);
}
.wind-compass-card:not(.is-overflowing) .wind-compass-card-scroll-affordance,
.wind-compass-card:not(.is-scroll-up-available) .wind-compass-card-scroll-affordance--up,
.wind-compass-card:not(.is-scroll-down-available) .wind-compass-card-scroll-affordance--down {
display: none;
}
.wind-compass-region,
.swell-compass-region {
position: relative;
overflow: clip;
width: 100%;
padding: calc(8em / 14);
display: flex;
justify-content: center;
align-items: center;
background: var(--card-surface);
font: inherit;
color: inherit;
cursor: pointer;
border: 1px solid var(--chip-hairline);
border-radius: 0 0 var(--chip-radius) var(--chip-radius);
flex-shrink: 0;
transition: border-color 0.2s var(--ease-md-standard);
}
.wind-compass-no-dir-dash {
position: absolute;
top: 50%;
left: 50%;
width: calc(14em / 14);
height: calc(2em / 14);
background: var(--text);
border-radius: 1px;
transform: translate(-50%, -50%);
pointer-events: none;
}
.wind-compass-inner {
position: relative;
width: calc(136em / 14);
height: calc(136em / 14);
}
.wind-compass-disc {
position: absolute;
top: 50%;
left: 50%;
width: calc(72em / 14);
height: calc(72em / 14);
transform: translate(-50%, -50%);
display: flex;
border-radius: 50%;
overflow: hidden;
}
.wind-compass-disc-half {
flex: 1;
height: 100%;
}
.wind-compass-disc-half--ocean {
background: var(--compass-ocean);
}
.wind-compass-disc-half--sand {
background: var(--compass-sand);
}
.wind-compass-frame {
position: absolute;
inset: 0;
transform: rotate(var(--compass-rot, 0deg));
transition: transform var(--dur-medium) var(--ease-emphasized);
}
.wind-compass-label {
position: absolute;
font-size: var(--compass-label-size);
font-weight: 600;
color: var(--muted);
letter-spacing: 0.02em;
line-height: 1;
user-select: none;
transition: transform var(--dur-medium) var(--ease-emphasized);
}
.wind-compass-label--n {
top: calc(12em / 11);
left: 50%;
transform: translateX(-50%) rotate(calc(-1 * var(--compass-rot, 0deg)));
}
.wind-compass-label--e {
top: 50%;
right: calc(12em / 11);
transform: translateY(-50%) rotate(calc(-1 * var(--compass-rot, 0deg)));
}
.wind-compass-label--s {
bottom: calc(12em / 11);
left: 50%;
transform: translateX(-50%) rotate(calc(-1 * var(--compass-rot, 0deg)));
}
.wind-compass-label--w {
top: 50%;
left: calc(12em / 11);
transform: translateY(-50%) rotate(calc(-1 * var(--compass-rot, 0deg)));
}
.wind-compass-tick {
position: absolute;
top: calc(50% - 36em / 14);
left: 50%;
width: calc(1.5em / 14);
height: calc(5em / 14);
margin-left: calc(-0.75em / 14);
background: var(--muted);
border-radius: 1px;
opacity: 0.45;
transform-origin: 50% calc(36em / 14);
}
.wind-compass-tick--n  { transform: rotate(0deg); }
.wind-compass-tick--ne { transform: rotate(45deg); }
.wind-compass-tick--e  { transform: rotate(90deg); }
.wind-compass-tick--se { transform: rotate(135deg); }
.wind-compass-tick--s  { transform: rotate(180deg); }
.wind-compass-tick--sw { transform: rotate(225deg); }
.wind-compass-tick--w  { transform: rotate(270deg); }
.wind-compass-tick--nw { transform: rotate(315deg); }
.wind-compass-arrow {
position: absolute;
top: 50%;
left: 50%;
font-size: calc(28em / 14);
color: var(--text);
font-variation-settings: 'FILL' 0, 'wght' 600;
transform: translate(-50%, -50%) rotate(var(--wind-rot, 0deg));
transition: transform var(--dur-medium) var(--ease-emphasized);
pointer-events: none;
}
.conditions-chips {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
max-width: calc(152em / 14);
}
.conditions-group {
display: flex;
flex-direction: column;
gap: calc(4em / 14);
width: auto;
min-width: 0;
padding: calc(8em / 14);
border: none;
border-radius: var(--chip-radius);
background: var(--tile-surface);
color: var(--text);
font: inherit;
text-align: left;
transition: background 0.15s;
user-select: none;
-webkit-user-select: none;
}
.conditions-group[role="button"] { cursor: pointer; }
@media (hover: hover) {
.conditions-group[role="button"]:hover { background: var(--tile-surface-hover); }
}
.conditions-group[role="button"]:active { background: var(--tile-surface-hover); }
.conditions-group[role="button"].is-detail-source { background: var(--tile-surface-hover); }
.conditions-group[role="button"]:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--interactive);
}
.conditions-chips .wind-chip,
.conditions-chips .shore-chip,
.conditions-chips .swell-dir-chip,
.conditions-chips .period-chip {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
cursor: inherit;
width: auto;
min-width: 0;
text-align: left;
}
.conditions-chips .period-chip,
.conditions-chips .wind-chip {
height: auto;
}
.conditions-chips .wind-compass-region,
.conditions-chips .swell-compass-region {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
cursor: inherit;
}
.conditions-chips .wind-chip-label,
.conditions-chips .shore-chip-label,
.conditions-chips .swell-dir-chip-label,
.conditions-chips .period-chip-label {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.conditions-chips .wind-chip-state-icon {
margin-left: auto;
}
.conditions-group-title {
display: block;
font-family: var(--font-family);
font-size: var(--meta-size);
font-weight: 500;
line-height: 1;
color: var(--text);
margin-bottom: calc(8em / 12);
}
.conditions-group-title[data-group="wind"] {
margin-top: calc(12em / 12);
}
.conditions-chips .wind-chip-icon,
.conditions-chips .shore-chip-icon,
.conditions-chips .swell-dir-chip-icon,
.conditions-chips .period-chip-icon {
width: calc(20em / 18);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
@media (max-width: 767px) {
.wind-compass-card {
top: calc(
var(--top-card-height)
+ var(--chrome-safe-padding)
);
bottom: calc(
env(safe-area-inset-bottom, 0px)
+ var(--footer-collapsed-h)
+ var(--chrome-safe-padding)
);
max-height: calc(
100vh
- var(--top-card-height)
- var(--chrome-safe-padding)
- var(--footer-collapsed-h)
- env(safe-area-inset-bottom, 0px)
- var(--chrome-safe-padding)
);
max-height: calc(
100dvh
- var(--top-card-height)
- var(--chrome-safe-padding)
- var(--footer-collapsed-h)
- env(safe-area-inset-bottom, 0px)
- var(--chrome-safe-padding)
);
}
}
@media (max-width: 480px) {
.wind-compass-card {
width: 172px;
padding: 10px 0 10px 10px;
}
.wind-compass-region,
.swell-compass-region {
padding: 8px;
}
.wind-compass-inner:not(.spot-location-compass) {
width: 120px;
height: 120px;
}
.wind-compass-disc { width: 60px; height: 60px; }
.wind-compass-inner:not(.spot-location-compass) .wind-compass-tick { top: calc(50% - 30px); transform-origin: 50% 30px; }
.wind-compass-inner:not(.spot-location-compass) .wind-compass-label { font-size: var(--compass-label-size); }
.wind-compass-inner:not(.spot-location-compass) .wind-compass-label--n { top: 12px; }
.wind-compass-inner:not(.spot-location-compass) .wind-compass-label--e { right: 12px; }
.wind-compass-inner:not(.spot-location-compass) .wind-compass-label--s { bottom: 12px; }
.wind-compass-inner:not(.spot-location-compass) .wind-compass-label--w { left: 12px; }
.wind-compass-arrow { font-size: 24px; }
.conditions-chips {
max-width: 152px;
}
}
.wordmark {
display: inline-flex;
align-items: center;
position: relative;
isolation: isolate;
margin-left: calc(var(--logo-height) * -0.055);
--logo-height: calc(var(--heading-size) * 1.12);
font-size: var(--heading-size);
font-weight: var(--heading-weight);
letter-spacing: var(--heading-tracking);
line-height: var(--heading-line-height);
color: var(--marine);
flex-shrink: 0;
text-decoration: none;
cursor: pointer;
border-radius: 4px;
outline: none;
transition: opacity var(--dur-popover) var(--ease-standard);
}
.wordmark-logo {
display: block;
height: var(--logo-height);
width: auto;
position: relative;
z-index: 1;
}
.wordmark-icon {
display: none;
height: var(--logo-height);
width: auto;
position: relative;
z-index: 1;
}
.logo-disc {
transition: fill 0.2s var(--ease-md-standard);
}
@media (hover: hover) {
.wordmark:hover .logo-disc {
fill: var(--interactive);
}
}
.wordmark:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
}
.logo-ring {
position: absolute;
top: 50%;
left: 0;
width: var(--logo-height);
height: var(--logo-height);
margin-top: calc(var(--logo-height) / -2);
z-index: 0;
pointer-events: none;
border-radius: 50%;
clip-path: circle(50%);
--ring-peek: 1.30;
transform: scale(0.82);
opacity: 0;
transition:
transform 440ms cubic-bezier(0.34, 1.32, 0.5, 1),
opacity   300ms var(--ease-md-standard);
}
.logo-ring-spin {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--loading-ring-gradient);
opacity: 0.5;
filter: blur(2px);
}
.logo-ring-spin::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 0deg,
transparent 250deg,
var(--energy-avg-a) 300deg,
#ffffff 332deg,
var(--energy-prem-b) 352deg,
transparent 360deg);
filter: blur(1.4px) brightness(1.1);
animation: ring-comet-sweep 1.9s cubic-bezier(0.66, 0, 0.34, 1) infinite;
animation-play-state: paused;
}
html:not(.app-booted) .logo-ring {
transform: scale(var(--ring-peek));
opacity: 1;
}
body.is-loading .logo-ring {
transform: scale(var(--ring-peek));
opacity: 1;
transition-delay: 400ms, 400ms;
}
@keyframes ring-comet-sweep { to { transform: rotate(360deg); } }
:is(html:not(.app-booted), body.is-loading) .logo-ring-spin::after {
animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
.logo-ring {
transition: opacity 260ms var(--ease-md-standard);
}
html:not(.app-booted) .logo-ring,
body.is-loading .logo-ring {
transform: scale(1.16);
}
.logo-ring-spin::after { animation: none !important; }
}
.timeline-clock:empty {
display: none;
}
.timeline-clock {
position: absolute;
top: 0;
font-family: var(--font-mono);
font-size: var(--meta-size);
font-weight: var(--timeline-clock-weight);
line-height: 1;
color: var(--text);
letter-spacing: var(--timeline-clock-tracking);
white-space: nowrap;
pointer-events: none;
z-index: 3;
transition: opacity 160ms var(--ease-md-standard);
}
.timeline-clock.is-swapping {
opacity: 0;
}
.timeline-clock-label {
font-family: var(--font-family);
font-size: var(--timeline-legend-size);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--muted);
margin-right: -0.03em;
}
.timeline-clock-value {
font-family: var(--font-family);
}
.timeline-clock-seconds {
font-family: inherit;
}
@media (max-width: 359px) {
.timeline-clock-seconds { display: none; }
}
@media (max-width: 319px) {
.timeline-clock-label { display: none; }
}
.location-selector {
display: flex;
align-items: center;
min-width: 0;
}
.location-trigger {
display: inline-flex;
align-items: center;
gap: calc(2em / 16);
height: calc(36em / 16);
padding: 0 calc(12em / 16) 0 calc(16em / 16);
border: 0;
border-radius: var(--radius-full);
background: transparent;
font-family: var(--font-family);
font-size: var(--subtitle-size);
font-weight: var(--subtitle-weight);
letter-spacing: var(--subtitle-tracking);
line-height: 1;
white-space: nowrap;
color: var(--text);
cursor: pointer;
transition: background-color 0.2s var(--ease-md-standard);
user-select: none;
-webkit-user-select: none;
text-align: left;
}
.login-chip.is-skeleton,
.avatar-chip.is-skeleton {
min-width: calc(88em / 14);
}
@media (hover: hover) {
.location-trigger:hover {
background: var(--nav-state-hover);
}
}
.location-trigger[aria-expanded="true"] {
background: var(--nav-state-open);
}
.location-trigger:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (min-width: 768px) {
.location-trigger::after {
display: none;
}
}
.location-trigger-icon {
display: none;
align-items: center;
justify-content: center;
width: 1em;
overflow: hidden;
font-size: calc(24em / 16);
line-height: 1;
color: var(--text);
flex-shrink: 0;
}
.location-trigger-name {
white-space: nowrap;
}
.location-trigger-caret {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
overflow: hidden;
flex-shrink: 0;
font-size: calc(20em / 16);
line-height: 1;
color: currentColor;
transition: transform var(--dur-medium) var(--ease-emphasized);
}
.location-trigger[aria-expanded="true"] .location-trigger-caret {
transform: rotate(180deg);
}
@keyframes popover-reveal {
from { opacity: 0; transform: translateY(-8px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes popover-dismiss {
from { opacity: 1; transform: translateY(0); }
to   { opacity: 0; transform: translateY(-8px); }
}
.location-menu.is-dismissing {
animation: popover-dismiss var(--dur-popover) var(--ease-standard) forwards;
}
.location-menu:focus { outline: none; }
.location-menu::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--divider);
opacity: 0;
pointer-events: none;
z-index: 3;
transition: opacity var(--dur-popover) var(--ease-standard);
}
.location-menu.is-scrolled:not(.is-bar-search):not(:has(> .location-search-wrap))::before {
opacity: 1;
}
.location-menu.is-bar-search {
top: var(--bar-search-top, calc(100% + 1px + var(--space-xs)));
left: var(--bar-search-left, 0px);
right: auto;
width: var(--bar-search-width, 360px);
border-radius: var(--card-radius);
}
.location-menu.is-bar-search.is-bar-empty {
visibility: hidden;
}
.location-menu {
position: absolute;
top: 100%;
left: -1px;
right: -1px;
max-height: min(
calc(100vh - var(--content-band-deduct)),
calc(100vh * var(--open-surface-fraction) - var(--top-card-height))
);
max-height: min(
calc(100dvh - var(--content-band-deduct)),
calc(100dvh * var(--open-surface-fraction) - var(--top-card-height))
);
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--card-surface);
border-radius: 0 0 var(--card-radius) var(--card-radius);
z-index: 200;
box-shadow: var(--elevation-menu);
padding: 0;
animation: popover-reveal var(--dur-popover) var(--ease-standard);
}
.top-bar:has(.location-trigger[aria-expanded="true"]) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.location-menu-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
position: relative;
}
.location-regions {
column-width: calc(220em / 14);
column-gap: calc(var(--space-lg) * var(--font-scale));
padding: calc(var(--space-md) * var(--font-scale)) calc(16em / 14) calc(var(--space-md) * var(--font-scale));
}
.location-region {
break-inside: avoid;
display: flex;
flex-direction: column;
gap: calc(4em / 14);
margin-bottom: calc(var(--space-md) * var(--font-scale));
min-width: 0;
}
.location-region-list {
display: flex;
flex-direction: column;
gap: calc(4em / 14);
}
.location-section-title {
font-family: var(--font-family);
font-size: var(--subtitle-size);
font-weight: var(--subtitle-weight);
letter-spacing: var(--subtitle-tracking);
line-height: var(--subtitle-line-height);
color: var(--muted);
margin: 0 0 var(--section-title-gap);
}
.location-spot-link {
display: flex;
align-items: center;
gap: calc(8em / 14);
width: 100%;
text-align: left;
padding: calc(10em / 14) calc(12em / 14);
min-height: calc(44em / 14);
border: none;
border-radius: var(--radius-s);
background: var(--tile-surface);
color: var(--text);
text-decoration: none;
font-family: var(--font-family);
font-size: var(--row-primary-size);
font-weight: var(--row-label-weight);
line-height: var(--row-label-line-height);
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.location-region--none {
column-span: all;
}
.location-region--none .location-spot-link {
appearance: none;
-webkit-appearance: none;
margin: 0;
}
.location-spot-link:hover {
background: var(--tile-surface-hover);
}
.location-spot-link:focus-visible {
outline: none;
background: var(--tile-surface-hover);
box-shadow: inset 0 0 0 2px var(--interactive);
}
.location-spot-link-mark {
display: none;
flex-shrink: 0;
font-size: var(--icon-md);
width: 1em;
color: var(--interactive);
}
.location-spot-link.is-active {
font-weight: 600;
color: var(--text);
background: color-mix(in srgb, var(--interactive) 10%, var(--tile-surface));
}
.location-spot-link.is-active .location-spot-link-mark {
display: inline-flex;
align-items: center;
justify-content: center;
}
.location-spot-link.is-active:hover {
background: color-mix(in srgb, var(--interactive) 14%, var(--tile-surface));
}
.location-backdrop {
display: none;
}
.top-chips {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: calc(8px * var(--font-scale));
margin-left: var(--space-md);
}
.appbar-search-slot {
display: flex;
align-items: center;
margin-right: auto;
flex: 0 1 calc(320em / 14);
min-width: 0;
}
html:not(.is-business-persona) .top-bar {
flex-wrap: nowrap;
}
.appbar-search-slot:empty {
flex-basis: 0;
}
.appbar-search-slot:not(:empty) {
min-width: calc(180em / 14);
box-sizing: content-box;
padding-right: var(--space-md);
}
html.home-view .appbar-search-slot,
html.home-hero .appbar-search-slot {
flex: 0 0 0;
min-width: 0;
padding-right: 0;
overflow: hidden;
visibility: hidden;
}
.appbar-search-slot .location-search-wrap {
flex: 1 1 auto;
min-width: 0;
padding: 0;
background: transparent;
border-bottom: 0;
z-index: 210;
}
.appbar-search-slot .location-search-bar {
height: calc(36em / 14);
}
.period-chip,
.swell-dir-chip,
.wind-chip,
.shore-chip {
display: inline-flex;
align-items: center;
gap: var(--chip-gap);
height: var(--chip-height);
padding: var(--chip-pad);
border: 1px solid var(--border);
border-radius: var(--chip-radius);
background: transparent;
font-family: var(--font-family);
font-size: var(--chip-size);
font-weight: var(--chip-weight);
line-height: var(--chip-line-height);
white-space: nowrap;
color: var(--text);
transition:
color 0.2s var(--ease-md-standard),
border-color 0.2s var(--ease-md-standard);
user-select: none;
-webkit-user-select: none;
}
.chip-suffix {
}
.period-chip-icon,
.swell-dir-chip-icon,
.wind-chip-icon,
.shore-chip-icon,
.total-height-chip-icon {
font-size: var(--icon-md);
line-height: 1;
font-variation-settings: 'FILL' 0;
flex-shrink: 0;
}
.wind-chip-state-icon {
font-size: var(--icon-sm);
line-height: 1;
font-variation-settings: 'FILL' 1;
flex-shrink: 0;
}
.wind-chip-state-icon:empty {
display: none;
}
.is-skeleton .wind-chip-icon,
.is-skeleton .shore-chip-icon,
.is-skeleton .swell-dir-chip-icon,
.is-skeleton .period-chip-icon,
.is-skeleton .location-trigger-icon,
.is-skeleton .login-chip-icon,
.is-skeleton .avatar-chip-mark,
.is-skeleton .avatar-chip-caret,
.is-skeleton .wind-chip-state-icon {
display: none;
}
.avatar-chip-label {
display: none;
font-size: var(--chip-size);
line-height: var(--chip-line-height);
color: var(--text);
font-weight: var(--chip-weight);
}
.avatar-chip.is-skeleton .avatar-chip-label {
display: inline-flex;
align-items: center;
}
.login-chip.is-auth-unavailable,
.avatar-chip.is-auth-unavailable {
cursor: not-allowed;
}
.login-chip.is-auth-unavailable .login-chip-icon,
.login-chip.is-auth-unavailable .login-chip-label,
.avatar-chip.is-auth-unavailable .avatar-chip-mark,
.avatar-chip.is-auth-unavailable .avatar-chip-caret {
opacity: 0.45;
}
.login-chip-icon,
.avatar-chip-icon,
.avatar-chip-caret {
width: var(--icon-md);
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
@container ui (max-width: 720px) {
.top-bar {
flex-wrap: nowrap;
}
}
html.ui-stacked .top-bar {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"wordmark .       auth"
"chips    chips   chips";
}
html.ui-stacked .wordmark { grid-area: wordmark; }
html.ui-stacked .top-chips {
grid-area: chips;
margin-left: 0;
flex-wrap: nowrap;
justify-content: flex-end;
}
html.ui-stacked .login-chip,
html.ui-stacked .avatar-chip-anchor {
grid-area: auth;
justify-self: end;
}
html.ui-stacked .location-selector { min-width: 0; flex-shrink: 1; }
html.ui-stacked .location-trigger { min-width: 0; max-width: 100%; }
html.ui-stacked .location-trigger-name {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
html.ui-stacked .appbar-search-slot,
html.ui-stacked .signup-btn {
display: none;
}
.period-chip-icon,
.swell-dir-chip-icon,
.shore-chip-icon,
.total-height-chip-icon {
color: var(--muted);
}
@media (max-width: 767px) {
.top-chips {
gap: 6px;
}
.wordmark { order: -2; }
.appbar-search-slot { order: -1; }
.top-chips { margin-left: 0; }
.location-trigger {
justify-content: center;
width: calc(40em / 16);
height: calc(40em / 16);
margin-block: calc(-2em / 16);
padding: 0;
border-radius: var(--radius-full);
}
.location-trigger-icon { display: inline-flex; }
.location-trigger-caret { display: none; }
.location-trigger-name {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.top-bar .auth-card-submit.signup-btn { display: none; }
.period-chip,
.wind-chip {
padding: var(--chip-pad-tight);
gap: var(--chip-gap-tight);
}
.location-backdrop {
display: block;
position: fixed;
inset: 0;
background: var(--scrim-mobile);
z-index: 999;
animation: sheet-backdrop-fade var(--scrim-fade) var(--scrim-ease);
}
.location-backdrop[hidden] {
display: none;
}
@keyframes sheet-backdrop-fade {
from { opacity: 0; }
to   { opacity: 1; }
}
.location-menu {
position: fixed;
top: auto;
left: 0;
right: 0;
bottom: 0;
max-height: 88dvh;
padding-top: 10px;
border: none;
border-radius: var(--radius-m) var(--radius-m) 0 0;
box-shadow: var(--elevation-sheet);
z-index: 1000;
animation: sheet-rise var(--dur-sheet-enter) var(--ease-emphasized-decelerate);
overscroll-behavior: contain;
}
@keyframes sheet-rise {
from { transform: translateY(100%); }
to   { transform: translateY(0); }
}
@keyframes sheet-fall {
from { transform: translateY(0); }
to   { transform: translateY(100%); }
}
@keyframes sheet-backdrop-fade-out {
from { opacity: 1; }
to   { opacity: 0; }
}
.location-menu.is-dismissing {
animation: sheet-fall var(--dur-sheet-exit) var(--ease-emphasized-accelerate) forwards;
}
body.is-bottom-panel-expanded .bottom-panel.is-collapsing {
height: calc(var(--footer-collapsed-h) + env(safe-area-inset-bottom, 0px));
transition: height var(--dur-sheet-exit) var(--ease-emphasized-accelerate);
}
.location-backdrop.is-dismissing,
.bottom-panel-backdrop.is-dismissing {
animation: sheet-backdrop-fade-out var(--scrim-fade) var(--scrim-ease) forwards;
}
.location-regions {
column-count: 1;
column-width: auto;
}
.location-menu.is-search-mode {
top: 0;
bottom: 0;
max-height: none;
border-radius: 0;
}
.location-menu.is-search-mode .location-menu-scroll {
padding-bottom: var(--keyboard-inset, 0px);
}
.location-menu.is-search-mode .location-search-back {
display: inline-flex;
}
body.location-menu-open {
overflow: hidden;
}
.top-bar:has(.location-trigger[aria-expanded="true"]) {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
}
.wind-chip .wind-chip-icon,
.wind-chip .wind-chip-state-icon,
.shore-chip .shore-chip-icon { color: var(--muted); }
.period-chip,
.wind-chip,
.shore-chip,
.location-trigger,
.login-chip,
.avatar-chip {
position: relative;
}
.conditions-group::after,
.location-trigger::after,
.login-chip::after,
.avatar-chip::after,
.bottom-panel-expand::after,
.spot-location-figure[data-tooltip]::after,
.location-search-clear::after,
.wordmark[data-tooltip]::after,
.home-map-fit[data-tooltip]::after,
.location-spot-link::after,
.data-row--clickable::after,
.total-height-chip[data-tooltip]::after,
.timeline-tide-marker[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 4em / 12);
left: var(--tooltip-left, 50%);
transform: translateX(var(--tooltip-left-shift, -50%));
padding: calc(4em / 12) calc(8em / 12);
background: var(--tooltip-surface);
color: var(--tooltip-on-surface);
font-family: var(--font-family);
font-size: var(--meta-size);
font-weight: var(--ui-weight);
line-height: var(--meta-line-height);
letter-spacing: 0.02em;
border-radius: calc(4em / 12);
white-space: nowrap;
pointer-events: none;
opacity: 0;
z-index: 30;
transition: opacity 0.15s var(--ease-md-standard);
}
.wordmark[data-tooltip]:hover::after,
.wordmark[data-tooltip]:focus-visible::after,
.home-map-fit[data-tooltip]:hover::after,
.home-map-fit[data-tooltip]:focus-visible::after,
.conditions-group[role="button"]:hover::after,
.conditions-group[role="button"]:focus-visible::after,
.location-trigger:hover::after,
.location-trigger:focus-visible::after,
.login-chip:hover::after,
.login-chip:focus-visible::after,
.avatar-chip:hover::after,
.avatar-chip:focus-visible::after,
.bottom-panel-expand:hover::after,
.bottom-panel-expand:focus-visible::after,
.spot-location-figure[data-tooltip]:hover::after,
.spot-location-figure[data-tooltip]:focus-visible::after,
.location-search-clear:hover::after,
.location-search-clear:focus-visible::after,
.location-spot-link:hover::after,
.location-spot-link:focus-visible::after,
.data-row--clickable:hover::after,
.data-row--clickable:focus-visible::after,
.total-height-chip[data-tooltip]:hover::after,
.total-height-chip[data-tooltip]:focus-visible::after,
.timeline-tide-marker[data-tooltip]:hover::after,
.timeline-tide-marker[data-tooltip]:focus-visible::after {
opacity: 1;
transition-delay: 0.5s;
}
html.is-business-persona .wordmark::after {
content: none;
display: none;
}
.bottom-panel-expand::after,
.spot-location-figure[data-tooltip]::after,
.location-search-clear::after,
.location-spot-link::after,
.data-row--clickable::after,
.timeline-tide-marker[data-tooltip]::after,
.conditions-group::after {
position: fixed;
top: var(--tooltip-top, auto);
bottom: auto;
}
@media (hover: none) {
.conditions-group::after,
.location-trigger::after,
.login-chip::after,
.avatar-chip::after,
.bottom-panel-expand::after,
.spot-location-figure[data-tooltip]::after,
.location-search-clear::after,
.location-spot-link::after,
.data-row--clickable::after,
.total-height-chip[data-tooltip]::after,
.timeline-tide-marker[data-tooltip]::after,
.timeline-hover-tooltip {
display: none;
}
}
.timeline-hover-tooltip {
position: fixed;
top: 0;
left: 0;
padding: calc(4em / 12) calc(8em / 12);
background: var(--tooltip-surface);
color: var(--tooltip-on-surface);
font-family: var(--font-family);
font-size: var(--meta-size);
font-weight: var(--ui-weight);
line-height: var(--meta-line-height);
letter-spacing: 0.02em;
border-radius: calc(4em / 12);
white-space: nowrap;
pointer-events: none;
opacity: 0;
z-index: var(--z-tooltip);
transition: opacity 0.15s var(--ease-md-standard);
}
.timeline-hover-tooltip.is-visible {
opacity: 1;
}
.unit-toggle-tooltip-portal {
position: fixed;
top: 0;
left: 0;
padding: calc(4em / 12) calc(8em / 12);
background: var(--tooltip-surface);
color: var(--tooltip-on-surface);
font-family: var(--font-family);
font-size: var(--meta-size);
font-weight: var(--ui-weight);
line-height: var(--meta-line-height);
letter-spacing: 0.02em;
border-radius: calc(4em / 12);
white-space: nowrap;
pointer-events: none;
opacity: 0;
z-index: var(--z-tooltip);
transition: opacity 0.15s var(--ease-md-standard);
}
.unit-toggle-tooltip-portal.is-visible {
opacity: 1;
transition-delay: 0.5s;
}
@media (hover: none) {
.unit-toggle-tooltip-portal { display: none; }
}
html:has(#location-dropdown:not([hidden])) .conditions-group::after,
html:has(#location-dropdown:not([hidden])) .wordmark[data-tooltip]::after,
html:has(#location-dropdown:not([hidden])) .location-trigger::after,
html:has(#location-dropdown:not([hidden])) .login-chip::after,
html:has(#location-dropdown:not([hidden])) .avatar-chip::after,
html:has(#avatar-menu:not([hidden])) .conditions-group::after,
html:has(#avatar-menu:not([hidden])) .wordmark[data-tooltip]::after,
html:has(#avatar-menu:not([hidden])) .location-trigger::after,
html:has(#avatar-menu:not([hidden])) .login-chip::after,
html:has(#avatar-menu:not([hidden])) .avatar-chip::after {
display: none;
}
.bottom-panel-backdrop,
.avatar-backdrop {
display: none;
}
.menu-sheet-title {
display: none;
}
@media (max-width: 767px) {
body.is-bottom-panel-expanded .bottom-panel {
left: 0;
right: 0;
bottom: 0;
height: 88dvh;
max-height: none;
padding-top: 8px;
border: none;
border-radius: var(--radius-m) var(--radius-m) 0 0;
box-shadow: var(--elevation-sheet);
z-index: 1000;
transition: height var(--dur-sheet-enter) var(--ease-emphasized-decelerate);
}
.bottom-panel-backdrop {
display: block;
position: fixed;
inset: 0;
background: var(--scrim-mobile);
z-index: 999;
animation: sheet-backdrop-fade var(--scrim-fade) var(--scrim-ease);
}
.bottom-panel-backdrop[hidden] {
display: none;
}
body.is-bottom-panel-expanded {
overflow: hidden;
}
body.is-bottom-panel-expanded .bottom-panel-expand {
display: none;
}
body.is-bottom-panel-expanded .bottom-panel-timeline {
right: 16px;
}
body.is-bottom-panel-expanded .bottom-panel-detail.expanded {
flex: 1 1 0;
min-height: 0;
max-height: none;
}
}
.location-search-wrap {
position: relative;
flex-shrink: 0;
z-index: 2;
display: flex;
align-items: center;
gap: calc(8em / 14);
padding: calc(12em / 14) calc(16em / 14);
background: var(--card-surface);
border-bottom: 1px solid var(--divider);
}
.location-search-bar {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: calc(8em / 14);
min-width: 0;
padding: calc(6em / 14) calc(12em / 14);
box-sizing: border-box;
height: calc(40em / 14);
background: var(--card-surface);
border: 1px solid var(--border);
border-radius: var(--radius-full);
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.location-search-bar:hover:not(:focus-within) {
background: color-mix(in srgb, var(--interactive) 3%, var(--card-surface));
}
.location-search-bar:focus-within {
border-color: var(--interactive);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--interactive) 18%, transparent);
}
.location-search-icon {
flex-shrink: 0;
font-size: var(--icon-ml);
color: var(--muted);
pointer-events: none;
}
.location-search-input {
flex: 1 1 auto;
min-width: 0;
padding: 0;
border: none;
background: transparent;
outline: none;
font-family: var(--font-family);
font-size: var(--input-size);
font-weight: var(--body-weight);
line-height: var(--ui-line-height);
height: calc(var(--input-size) * var(--ui-line-height));
color: var(--text);
}
.location-search-input::placeholder {
color: var(--muted);
}
.location-search-clear {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--input-size);
width: calc(28em / 16);
height: calc(28em / 16);
padding: 0;
border: none;
border-radius: var(--radius-full);
background: transparent;
color: var(--muted);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.location-search-clear:hover {
background: var(--surface-row);
color: var(--text);
}
.location-search-clear:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--interactive);
}
.location-search-clear .material-symbols-rounded {
font-size: var(--icon-md);
}
.location-search-clear[hidden] { display: none; }
.location-search-back {
display: none;
flex-shrink: 0;
align-items: center;
justify-content: center;
font-size: var(--input-size);
width: calc(36em / 16);
height: calc(36em / 16);
padding: 0;
border: none;
border-radius: var(--radius-full);
background: transparent;
color: var(--text);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.location-search-back:hover {
background: var(--surface-row);
}
.location-search-back:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--interactive);
}
.location-search-back .material-symbols-rounded {
font-size: var(--icon-ml);
transform: rotate(-90deg);
}
.location-search-status {
padding: 0 calc(16em / 12);
font-family: var(--font-family);
font-size: var(--meta-size);
font-weight: var(--meta-weight);
line-height: var(--meta-line-height);
color: var(--muted);
}
.location-search-status:empty {
display: none;
}
.location-search-status:not(:empty) {
padding: calc(8em / 12) calc(16em / 12) 0;
}
.search-results {}
.search-result-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 16px;
background: none;
border: none;
border-bottom: 1px solid var(--divider);
cursor: pointer;
text-align: left;
font-family: var(--font-family);
transition: background 0.15s;
}
.search-result-item:hover,
.search-result-item:focus {
background: var(--surface-row);
outline: none;
}
.search-result-icon {
font-size: var(--icon-md);
line-height: 1;
color: var(--muted);
flex-shrink: 0;
}
.search-result-body {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
}
.search-result-name {
font-size: var(--ui-size);
font-weight: var(--ui-weight);
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-result-detail {
font-size: var(--meta-size);
font-weight: var(--meta-weight);
line-height: var(--meta-line-height);
color: var(--muted);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-result-item mark.search-result-match {
background: color-mix(in srgb, var(--interactive) 16%, transparent);
color: inherit;
border-radius: 2px;
padding: 0 1px;
}
.invite-block {
padding: 16px 12px;
font-size: var(--ui-size);
color: var(--muted);
text-align: center;
}
.invite-lead {
margin: 0 0 12px;
line-height: 1.45;
text-wrap: pretty;
}
.form-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.bottom-panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
z-index: var(--z-card-bottom);
max-height: calc(
100vh
- var(--top-card-height)
- var(--waterline-safe-padding)
);
max-height: calc(
100dvh
- var(--top-card-height)
- var(--waterline-safe-padding)
);
background: var(--card-surface);
border-radius: var(--radius-m) var(--radius-m) 0 0;
border-top: 1px solid var(--divider);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
pointer-events: auto;
overflow: hidden;
display: flex;
flex-direction: column;
}
@media (max-width: 767px) {
.top-bar {
top: 0;
left: 0;
right: 0;
padding-top: calc(12px + env(safe-area-inset-top, 0px));
border-radius: 0;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid var(--divider);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.bottom-panel {
bottom: 0;
left: 0;
right: 0;
border-radius: var(--radius-m) var(--radius-m) 0 0;
border-top: 1px solid var(--divider);
border-left: none;
border-right: none;
border-bottom: none;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
padding-bottom: env(safe-area-inset-bottom, 0px);
height: calc(var(--footer-collapsed-h) + env(safe-area-inset-bottom, 0px));
transition: height 225ms var(--ease-md-standard);
max-height: calc(
100dvh
- var(--top-card-height)
- var(--waterline-safe-padding)
);
}
}
.bottom-panel-row {
display: flex;
flex-direction: column;
position: relative;
font-size: var(--timeline-clock-size);
flex-shrink: 0;
}
.bottom-panel-timeline-zone {
position: relative;
min-height: var(--timeline-strip-h);
transition: min-height 225ms var(--ease-md-standard);
flex-shrink: 0;
}
.bottom-panel-title {
flex-shrink: 0;
padding: calc(14px * var(--font-scale)) calc(16px * var(--font-scale)) calc(6px * var(--font-scale));
}
.bottom-panel-timeline {
position: absolute;
top: calc(4em / 12.5);
left: calc(16px * var(--font-scale));
right: calc(16px * var(--font-scale));
}
@media (min-width: 768px) {
body:not(.is-bottom-panel-expanded) .bottom-panel-timeline::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: calc(-4px * var(--font-scale));
bottom: calc(-1 * var(--space-xs) * var(--font-scale));
background: var(--plot-ground);
border-radius: var(--plot-radius);
z-index: -1;
pointer-events: none;
}
}
.timeline-stack {
position: relative;
padding-top: calc(18em / 12.5);
cursor: pointer;
}
.timeline-stack, .timeline-stack *,
.forecast-lane-tile, .forecast-lane-tile * {
touch-action: pan-y;
}
.timeline-stack:has(.timeline-track:not(.has-data))::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: calc((16em + 18em) / 12.5);
background: var(--hash-pattern), var(--plot-ground);
border-radius: 0 0 var(--plot-radius) var(--plot-radius);
pointer-events: none;
}
.bottom-panel-expand {
position: absolute;
right: calc(var(--space-sm) * var(--font-scale));
top: calc(
var(--footer-title-centre, calc(22px * var(--font-scale)))
- 20px * var(--font-scale)
);
display: flex;
align-items: center;
justify-content: center;
width: calc(40px * var(--font-scale));
height: calc(40px * var(--font-scale));
background: none;
border: none;
border-radius: 50%;
cursor: pointer;
color: var(--muted);
transition:
background 0.2s var(--ease-md-standard),
color 0.2s var(--ease-md-standard);
}
@media (hover: hover) {
.bottom-panel-expand:hover {
background: var(--surface-row);
color: var(--text);
}
}
.bottom-panel-expand:active {
background: color-mix(in srgb, var(--text) 4%, var(--surface-row));
}
.bottom-panel-expand:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (min-width: 768px) {
#bottom-panel-handle,
#home-directory-handle,
#record-ride-handle {
width: auto;
gap: calc(4px * var(--font-scale));
padding: 0 calc(12px * var(--font-scale)) 0 calc(16px * var(--font-scale));
border-radius: var(--radius-full);
color: var(--text);
font-family: var(--font-family);
font-size: var(--dialog-action-size);
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
#bottom-panel-handle::before,
#home-directory-handle::before,
#record-ride-handle::before {
content: attr(data-tooltip);
}
#bottom-panel-handle::after,
#home-directory-handle::after,
#record-ride-handle::after {
display: none;
}
}
@media (hover: hover) and (min-width: 768px) {
#bottom-panel-handle:hover,
#home-directory-handle:hover,
#record-ride-handle:hover,
.bottom-panel-row:has(#forecast-title:hover) #bottom-panel-handle,
.home-directory-row:has(.home-directory-title:hover) #home-directory-handle,
.record-ride-row:has(.record-ride-title:hover) #record-ride-handle {
background: var(--nav-state-hover);
color: var(--text);
}
#forecast-title,
.home-directory-title,
.record-ride-title {
cursor: pointer;
}
}
.spot-location-copy {
position: static;
flex: none;
width: calc(24px * var(--font-scale));
height: calc(24px * var(--font-scale));
margin-block: calc(-3px * var(--font-scale));
}
.spot-location-copy .material-symbols-rounded {
font-size: var(--icon-sm);
}
.bottom-panel-chevron {
font-size: var(--icon-lg);
transition: transform 225ms var(--ease-md-standard);
}
.bottom-panel-expand[aria-expanded="true"] .bottom-panel-chevron {
transform: rotate(180deg);
}
.timeline-tide-strip {
position: relative;
height: calc(18em / 12.5);
width: 100%;
border-radius: 0 0 var(--plot-radius) var(--plot-radius);
background: var(--plot-ground);
overflow: hidden;
user-select: none;
-webkit-user-select: none;
}
.timeline-tide-strip.is-unavailable {
background: var(--plot-ground);
}
.timeline-tide-marker {
position: absolute;
top: 0;
left: 0;
font-size: var(--timeline-clock-size);
margin-left: calc(-12em / 12);
display: flex;
align-items: center;
justify-content: center;
width: calc(24em / 12);
height: calc(20em / 12);
padding: 0;
background: transparent;
border: none;
cursor: pointer;
}
.timeline-tide-marker:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -1px;
border-radius: 4px;
}
.timeline-tide-marker-icon {
font-size: var(--icon-sm);
line-height: 1;
color: var(--text);
transition: color 0.15s ease;
display: inline-block;
}
.timeline-tide-marker:hover .timeline-tide-marker-icon,
.timeline-tide-marker:focus-visible .timeline-tide-marker-icon {
color: var(--accent);
}
.timeline-tide-marker.is-low .timeline-tide-marker-icon {
transform: rotate(180deg);
}
.timeline-tide-strip.is-estimated .timeline-tide-marker-icon {
opacity: 0.45;
}
.timeline-tide-strip {
cursor: pointer;
}
.timeline-track {
position: relative;
height: calc(16em / 12.5);
width: 100%;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
border-radius: 0;
background: var(--hash-pattern), var(--card-surface);
}
.timeline-track.has-data {
background: var(--plot-ground);
}
.timeline-heatmap {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
}
.timeline-needle {
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background: #EB0028;
pointer-events: none;
transition: left 0.22s var(--ease-md-standard);
z-index: 2;
box-shadow:
0 0 0 0.5px rgba(255, 255, 255, 0.6),
0 1px 3px rgba(0, 0, 0, 0.3);
}
:root {
--lane-swell-height:   var(--compass-ocean);
--lane-swell-combined: color-mix(in srgb, var(--compass-ocean) 72%, var(--accent) 28%);
--lane-gridline:       color-mix(in srgb, var(--accent) 10%, var(--plot-ground));
--lane-tide-fill:      var(--lane-swell-height);
--lane-tide-line:      var(--lane-swell-combined);
}
.forecast-lanes {
display: flex;
flex-direction: column;
--lane-water-h: calc(6 * 12px);
--lane-direction-h: 40px;
gap: var(--lane-separation);
padding: 0 calc(16px * var(--font-scale)) 0;
}
.forecast-lane + .forecast-lane {
padding-top: var(--lane-separation);
border-top: 1px solid var(--divider);
}
.forecast-lane {
display: flex;
flex-direction: column;
gap: 0;
}
.forecast-lane-title {
color: var(--muted);
font-family: var(--font-family);
font-size: var(--subtitle-size);
font-weight: var(--subtitle-weight);
letter-spacing: var(--subtitle-tracking);
line-height: var(--subtitle-line-height);
margin: 0 0 var(--section-title-gap);
}
@media (min-width: 768px) {
#forecast-title .container-title-text {
font-size: calc(var(--subtitle-size) * 1.25);
font-weight: var(--subtitle-weight);
letter-spacing: var(--panel-title-tracking);
line-height: var(--subtitle-line-height);
}
#timeline-strip {
--footer-title-centre: calc(
14px * var(--font-scale)
+ var(--footer-title-line) / 2
);
}
}
.forecast-lane-plot {
position: relative;
width: 100%;
background: var(--plot-ground);
border-radius: 0;
overflow: hidden;
cursor: pointer;
}
.forecast-lane--height .forecast-lane-plot {
height: var(--lane-water-h);
}
.forecast-lane--period .forecast-lane-plot {
height: calc(16 * var(--timeline-clock-size) / 12.5);
border-radius: 0;
}
.forecast-lane--tide .forecast-lane-plot {
height: var(--lane-water-h);
}
.forecast-lane--swell-direction .forecast-lane-plot,
.forecast-lane--wind .forecast-lane-plot {
height: var(--lane-direction-h);
border-radius: 0;
}
.forecast-lane-tide-markers {
background: transparent;
border-radius: 0;
font-size: var(--timeline-clock-size);
margin-top: calc(-6 * var(--timeline-clock-size) / 12);
}
.forecast-lane-canvas {
display: block;
width: 100%;
height: 100%;
}
.timeline-hour-label.is-past { opacity: 0.5; }
.forecast-lane-plot-wrap {
position: relative;
width: 100%;
}
.forecast-lane-tile {
--lane-value-gap: calc(18 * var(--timeline-clock-size) / 12.5 - var(--timeline-clock-size));
display: flex;
flex-direction: column;
gap: calc(6 * var(--timeline-clock-size) / 12);
overflow: hidden;
padding: calc(var(--timeline-clock-size) + var(--lane-value-gap) + 4px * var(--font-scale)) 0 0;
cursor: pointer;
}
.forecast-lane-value {
position: absolute;
bottom: 100%;
margin-bottom: var(--lane-value-gap);
font-size: var(--meta-size);
font-weight: var(--timeline-clock-weight);
line-height: 1;
color: var(--text);
white-space: nowrap;
pointer-events: none;
z-index: 3;
}
.forecast-lane-value.is-empty { display: none; }
.forecast-lane-needle {
top: calc(-1 * var(--timeline-clock-size) - var(--lane-value-gap));
bottom: 0;
height: auto;
}
.forecast-lane-legend.timeline-legend-row {
margin: 0;
padding-inline: 0;
cursor: default;
}
.forecast-lane-legend-key {
display: inline-flex;
align-items: center;
gap: calc(4em / 12);
}
.forecast-lane-legend-swatch {
display: inline-block;
width: calc(13em / 12);
height: calc(8em / 12);
border-radius: 1px;
}
.forecast-lane-legend-swatch.is-primary  { background: var(--lane-swell-height); }
.forecast-lane-legend-swatch.is-combined { background: var(--lane-swell-combined); }
.forecast-lane-legend--shore {
--legend-arrow-h: calc(8em / 12);
--legend-arrow-pt: 22%;
}
.forecast-lane-legend--shore .timeline-legend-static {
width: 100%;
flex-wrap: nowrap;
justify-content: space-between;
}
.forecast-lane-legend--shore .forecast-lane-legend-swatch {
width: calc(var(--legend-arrow-h) * 3);
height: var(--legend-arrow-h);
border-radius: 0;
}
.forecast-lane-legend-swatch.is-ocean {
background: var(--compass-ocean);
clip-path: polygon(100% 0, var(--legend-arrow-pt) 0, 0 50%, var(--legend-arrow-pt) 100%, 100% 100%);
}
.forecast-lane-legend-swatch.is-shore {
background: var(--legend-shore);
clip-path: polygon(0 0, calc(100% - var(--legend-arrow-pt)) 0, 100% 50%, calc(100% - var(--legend-arrow-pt)) 100%, 0 100%);
}
.forecast-lane-table {
padding-inline: 0;
margin-top: calc(var(--space-xs) * var(--font-scale));
cursor: default;
}
.forecast-lane-table .data-list {
--lane-stat-gap:     calc(24px * var(--font-scale));
--lane-stat-row-gap: calc(8px  * var(--font-scale));
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
column-gap: var(--lane-stat-gap);
row-gap: var(--lane-stat-row-gap);
}
.forecast-lane-table .data-row {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: calc(3em / 14);
min-height: 0;
padding: calc(9em / 14) 0 calc(7em / 14);
background: none;
border-radius: 0;
}
.forecast-lane-table .data-row-label {
font-size: var(--timeline-legend-size);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--muted);
margin-right: -0.03em;
}
.spot-location-tile {
display: flex;
flex-direction: column;
gap: calc(var(--space-md) * var(--font-scale));
}
@media (min-width: 768px) and (max-width: 959px) {
.spot-location-tile {
gap: var(--lane-separation);
}
.spot-location-row + .spot-location-row {
padding-top: var(--lane-separation);
border-top: 1px solid var(--divider);
}
}
.spot-location-row-title {
grid-column: 1 / -1;
}
.spot-location-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0 calc(var(--space-sm) * var(--font-scale));
min-width: 0;
}
@media (max-width: 767px) {
.spot-location-row > .spot-location-figure {
margin-bottom: calc(var(--space-sm) * var(--font-scale));
}
}
@media (min-width: 768px) {
.spot-location-row {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
column-gap: calc(var(--space-md) * var(--font-scale));
}
}
.spot-suggested {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
margin-top: calc(var(--space-md) * var(--font-scale));
min-width: 0;
}
@media (min-width: 768px) {
.spot-suggested {
margin-top: var(--lane-separation);
padding-top: var(--lane-separation);
border-top: 1px solid var(--divider);
}
}
.spot-overview {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
min-width: 0;
}
.spot-overview-text {
margin: 0;
columns: 24em 4;
column-gap: calc(var(--space-lg) * var(--font-scale));
orphans: 2;
widows: 2;
font-family: var(--font-family);
font-size: var(--body-size);
font-weight: var(--body-weight);
line-height: 1.5;
color: var(--text);
}
.spot-overview-note {
margin: calc(var(--space-sm) * var(--font-scale)) 0 0;
font-family: var(--font-family);
font-size: var(--meta-size);
font-weight: var(--meta-weight);
line-height: var(--meta-line-height);
color: var(--muted);
max-width: 72ch;
}
.spot-overview-note-link {
color: var(--text);
text-decoration: none;
text-underline-offset: 0.15em;
}
@media (hover: hover) {
.spot-overview-note-link:hover { text-decoration: underline; }
}
.spot-overview-note-link:focus-visible {
text-decoration: underline;
outline: 2px solid var(--interactive);
outline-offset: 2px;
border-radius: 2px;
}
.spot-overview:not([hidden]) + .spot-location-tile {
margin-top: calc(var(--space-md) * var(--font-scale));
}
@media (min-width: 768px) {
.spot-overview:not([hidden]) + .spot-location-tile {
margin-top: var(--lane-separation);
padding-top: var(--lane-separation);
border-top: 1px solid var(--divider);
}
}
.surf-breakdown + .record-ride-lanes {
margin-top: calc(var(--space-md) * var(--font-scale));
}
@media (min-width: 900px) {
.record-ride-lanes .spot-overview-text {
columns: 3;
}
}
@media (min-width: 960px) {
.forecast-lanes { --spot-overview-cols: 3; }
#spot-overview-text {
columns: 3;
}
.spot-location-tile {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: auto auto auto;
align-items: start;
column-gap: var(--spot-grid-gap);
row-gap: 0;
}
.spot-location-row {
grid-row: span 3;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: subgrid;
row-gap: 0;
}
.spot-location-row > .spot-location-figure {
width: 100%;
aspect-ratio: var(--spot-map-ratio);
}
.spot-location-row > .spot-location-body {
margin-top: calc(var(--space-sm) * var(--font-scale));
}
}
@media (min-width: 768px) and (max-width: 959px) {
.forecast-lanes { --spot-overview-cols: 2; }
#spot-overview-text {
columns: var(--spot-overview-cols);
}
.spot-location-row {
grid-template-columns:
calc((100% - (var(--spot-overview-cols) - 1) * var(--spot-grid-gap)) / var(--spot-overview-cols))
minmax(0, 1fr);
column-gap: var(--spot-grid-gap);
}
.spot-location-row > .spot-location-figure {
width: 100%;
aspect-ratio: var(--spot-map-ratio);
align-self: stretch;
}
}
.forecast-lanes {
--spot-grid-gap: calc(var(--space-lg) * var(--font-scale));
--spot-map-ratio: 16 / 9;
}
.spot-location-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: calc(var(--space-sm) * var(--font-scale));
}
.spot-location-figure {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
container-type: size;
border-radius: var(--chip-radius);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.spot-location-rays,
.spot-location-compass { --compass-basis: 7cqmin; }
.spot-location-figure:focus-visible {
outline: 2px solid var(--interactive);
outline-offset: 2px;
}
.spot-location-map {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: var(--chip-radius);
overflow: hidden;
}
.spot-location-compass {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: var(--compass-basis);
pointer-events: none;
}
.spot-location-compass .wind-compass-label {
font-size: calc(11 * var(--compass-basis) / 14);
}
.spot-location-rays {
position: absolute;
inset: 0;
pointer-events: none;
}
.spot-location-ray {
--ray-weight: 1.5;
position: absolute;
top: 50%;
right: 50%;
margin-right: calc(10 * var(--compass-basis) / 14);
width: calc(54 * var(--compass-basis) / 14);
height: calc(var(--ray-weight) * var(--compass-basis) / 14);
margin-top: calc(-0.5 * var(--ray-weight) * var(--compass-basis) / 14);
border-radius: 1px;
transform-origin: calc(100% + 10 * var(--compass-basis) / 14) 50%;
transform: rotate(var(--ray-rot, 0deg));
}
.spot-location-ray[hidden] { display: none; }
.spot-location-ray--axis {
--axis-dash: 3px;
--axis-gap:  3px;
height: 1px;
margin-top: -0.5px;
right: auto;
left: 50%;
margin-right: 0;
width: calc(72 * var(--compass-basis) / 14);
margin-left: calc(-36 * var(--compass-basis) / 14);
transform-origin: 50% 50%;
border-radius: 0;
background:
linear-gradient(to right,
transparent 0 calc(var(--axis-gap) / 2),
var(--map-sample-line) calc(var(--axis-gap) / 2) calc(var(--axis-gap) / 2 + var(--axis-dash)),
transparent 0)
center / calc(var(--axis-dash) + var(--axis-gap)) 100% repeat-x;
}
.spot-location-ray--facing {
--ray-weight: 1.75;
margin-right: 0;
width: calc(33.5 * var(--compass-basis) / 14);
transform-origin: 100% 50%;
background: var(--map-marker);
}
.spot-location-ray--facing .spot-location-ray-head { color: var(--map-marker); }
.spot-location-ray-head {
position: absolute;
left: 0;
top: 50%;
font-size: calc(20 * var(--compass-basis) / 14);
line-height: 1;
font-variation-settings: 'FILL' 1, 'wght' 600;
transform: translate(-50%, -50%);
}
.spot-location-pin {
position: absolute;
left: 50%;
top: 50%;
width: 11px;
height: 11px;
margin: -5.5px 0 0 -5.5px;
border-radius: 50%;
background: var(--map-marker);
box-shadow: 0 0 0 2.5px var(--card-surface), 0 1px 3px rgba(0,38,66,.35);
pointer-events: none;
}
.spot-location-figure--sample[hidden] { display: none; }
.map-status {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(var(--space-xs) * var(--font-scale));
padding: calc(var(--space-sm) * var(--font-scale));
background: var(--map-ocean);
border-radius: var(--chip-radius);
font-family: var(--font-family);
font-size: var(--ui-size);
font-weight: var(--ui-weight);
line-height: 1.3;
color: var(--text);
text-align: center;
}
.map-status .map-status-action {
margin: 0;
color: color-mix(in srgb, var(--interactive) 80%, black);
}
.spot-location-sample-marks {
position: absolute;
inset: 0;
pointer-events: none;
}
.spot-location-cell {
fill: none;
stroke: var(--map-sample-line);
stroke-width: 1;
stroke-dasharray: 3 3;
vector-effect: non-scaling-stroke;
}
.spot-location-tether.spot-location-tether--solid { stroke-dasharray: none; }
.spot-location-tether {
stroke: var(--map-sample-line);
stroke-width: 1;
stroke-dasharray: 3 3;
fill: none;
vector-effect: non-scaling-stroke;
}
.spot-location-sample-marks .home-map-marker,
.spot-location-sample-marks .home-map-sample {
left: calc(50% + var(--mx, 0) * 100cqmax / 170);
top:  calc(50% + var(--my, 0) * 100cqmax / 170);
}
.conditions-detail {
position: fixed;
display: flex;
flex-direction: column;
padding: calc(12em / 14) 0 calc(12em / 14) calc(12em / 14);
border-radius: var(--card-radius);
background: var(--card-surface);
box-shadow: var(--elevation-card);
z-index: var(--z-card-bottom);
opacity: 0;
transition: opacity var(--dur-short) var(--ease-standard);
pointer-events: none;
}
.conditions-detail.is-open {
opacity: 1;
transition-duration: var(--dur-popover);
}
.conditions-detail[hidden] { display: none; }
body.detail-panel-open [data-tooltip]::after,
body.detail-panel-open .unit-toggle-tooltip-portal::after,
body.detail-panel-open .timeline-hover-tooltip::after {
opacity: 0 !important;
}
.wind-compass-card.is-detail-fused {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.wind-compass-card.is-detail-open {
box-shadow: none;
z-index: calc(var(--z-card-bottom) + 1);
}
.conditions-detail-title {
flex: 0 0 auto;
margin-bottom: var(--space-xs);
}
.conditions-detail .conditions-detail-figure {
flex: 1 1 auto;
width: 100%;
min-height: 0;
aspect-ratio: auto;
border-radius: var(--chip-radius) 0 0 var(--chip-radius);
}
.conditions-detail .conditions-detail-marks {
overflow: hidden;
border-radius: var(--chip-radius) 0 0 var(--chip-radius);
}
.spot-location-sample-marks .spot-location-wind-ring {
position: absolute;
left: calc(50% + var(--mx, 0) * 100cqmax / 170);
top:  calc(50% + var(--my, 0) * 100cqmax / 170);
width: calc(var(--map-sample-size) * 72 / 28);
height: calc(var(--map-sample-size) * 72 / 28);
transform: translate(-50%, -50%);
display: grid;
place-items: center;
border: 1px dashed var(--map-sample-line);
border-radius: 50%;
pointer-events: none;
}
.conditions-detail-inline { display: none; }
@media (max-width: 767px) {
.conditions-detail-inline:not([hidden]) {
display: block;
margin-bottom: calc(var(--space-sm) * var(--font-scale));
}
.conditions-detail-inline .conditions-detail-figure { --detail-ring-size: 60px; }
.conditions-detail-inline .conditions-detail-marks .conditions-detail-arrow { font-size: 24px; }
}
.conditions-detail-figure { --detail-ring-size: calc(72em / 14); }
.conditions-detail-marks .conditions-detail-ring {
position: absolute;
left: calc(50% + var(--mx, 0) * 100cqmax / 170);
top:  calc(50% + var(--my, 0) * 100cqmax / 170);
width: var(--detail-ring-size);
height: var(--detail-ring-size);
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
}
.conditions-detail-marks .conditions-detail-ring::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px dashed var(--map-sample-line);
}
.conditions-detail-marks .conditions-detail-arrow {
position: absolute;
left: calc(50% + var(--mx, 0) * 100cqmax / 170);
top:  calc(50% + var(--my, 0) * 100cqmax / 170);
font-size: calc(28em / 14);
color: var(--map-marker);
font-variation-settings: 'FILL' 0, 'wght' 600;
transform: translate(-50%, -50%) rotate(var(--detail-arrow-rot, 0deg));
transition: transform var(--dur-medium) var(--ease-emphasized);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.conditions-detail,
.conditions-detail-marks .conditions-detail-arrow { transition: none; }
}
@media (min-width: 768px) {
.spot-location-figure {
width: calc(240px * var(--font-scale));
aspect-ratio: 1;
}
}
.spot-location-ocean { fill: var(--map-ocean); }
.spot-location-land  { fill: var(--map-land); }
.spot-location-coast {
stroke: var(--map-land-edge);
stroke-width: 0.6;
vector-effect: non-scaling-stroke;
stroke-linejoin: round;
}
.spot-location-table {
min-width: 0;
margin-top: 0;
}
.forecast-lane-legend .timeline-legend-tide {
margin-left: 0;
}
.forecast-lane-legend .timeline-legend-title {
display: none;
}
@media (min-width: 768px) {
body.is-bottom-panel-expanded #timeline-strip .timeline-legend-row {
display: none;
}
body.is-bottom-panel-expanded #timeline-tide-strip {
display: none;
}
body.is-bottom-panel-expanded:not(.is-historical) #surf-breakdown {
display: none;
}
body.is-bottom-panel-expanded .bottom-panel-timeline-zone {
min-height: calc(
4em / 12
+ 18em / 12.5
+ 20em / 12.5
+ 16em / 12
+ 16em / 12.5
+ var(--space-sm) * var(--font-scale)
);
}
body.is-bottom-panel-expanded .bottom-panel-detail.expanded {
padding-top: var(--lane-separation);
}
body.is-bottom-panel-expanded .timeline-updated-footer-row {
display: flex;
}
.bottom-panel-timeline {
right: calc(16px * var(--font-scale) + var(--forecast-sb-gutter, 0px));
}
body.is-bottom-panel-expanded .timeline-weekday-row,
body.is-bottom-panel-expanded .timeline-hours,
body.is-bottom-panel-expanded .timeline-track,
body.is-bottom-panel-expanded .timeline-track.has-data {
background: transparent;
}
body.is-bottom-panel-expanded .timeline-weekday-row {
border-radius: 0;
}
body.is-bottom-panel-expanded .timeline-weekday-label {
font-size: var(--subtitle-size);
font-weight: var(--subtitle-weight);
letter-spacing: var(--subtitle-tracking);
}
}
.forecast-lane-updated-row {
display: none;
font-size: var(--timeline-legend-size);
margin-top: calc(4 * var(--timeline-clock-size) / 12);
}
.timeline-updated-footer-row {
display: none;
font-size: var(--timeline-legend-size);
padding-inline: calc(16px * var(--font-scale));
margin-block: calc(24px * var(--font-scale));
}
.timeline-updated-footer-row .timeline-updated {
margin-left: 0;
}
.timeline-weekday-row {
position: relative;
height: calc(20em / 12.5);
width: 100%;
background: var(--plot-ground);
border-radius: var(--plot-radius) var(--plot-radius) 0 0;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
}
.timeline-weekday-label {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-family);
font-size: var(--timeline-weekday-size);
font-weight: var(--timeline-weekday-weight);
letter-spacing: -0.01em;
line-height: 1;
color: var(--muted);
transition: color 0.18s ease;
white-space: nowrap;
z-index: 1;
}
.timeline-weekday-label.is-active {
color: var(--text);
}
.timeline-hours {
position: relative;
height: calc(16em / 12);
margin-top: 0;
background: var(--plot-ground);
overflow: hidden;
}
.timeline-hour-label {
position: absolute;
top: 0;
font-family: var(--font-mono);
font-size: var(--timeline-hour-size);
font-weight: var(--timeline-hour-weight);
color: var(--muted);
letter-spacing: var(--timeline-hour-tracking);
white-space: nowrap;
transition: color 0.18s ease;
}
.timeline-hour-label::before {
content: none;
}
.timeline-hour-label--anchor.in-active-day {
color: var(--text);
font-weight: 500;
}
.timeline-hour-label--no-tick::before {
display: none;
}
.timeline-hours-skeleton {
display: flex;
justify-content: space-between;
padding-inline: 2px;
width: 100%;
}
.timeline-hours-skeleton > span {
font-family: var(--font-mono);
font-size: var(--timeline-hour-size);
font-weight: var(--timeline-hour-weight);
letter-spacing: var(--timeline-hour-tracking);
color: var(--border);
white-space: nowrap;
}
.timeline-hour-tick {
position: absolute;
top: 0;
width: 1px;
height: 0;
}
.timeline-hour-tick::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 1px;
height: 5px;
background: var(--accent);
}
.timeline-legend-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(4em / 12) calc(12em / 12);
margin: calc(9em / 12) 0 0;
font-family: var(--font-family);
font-size: var(--timeline-legend-size);
font-weight: 500;
line-height: 1;
}
.timeline-legend-static {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: calc(4em / 12) calc(8em / 12);
}
.timeline-legend-title {
color: var(--text);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.timeline-legend-tide {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: calc(4em / 12) calc(6em / 12);
margin-left: calc(12em / 12);
}
.timeline-legend-tide-icon {
font-size: 1.2em;
line-height: 1;
color: var(--text);
display: inline-block;
}
.timeline-legend-tide-icon.is-low {
transform: rotate(180deg);
}
html.mobile-scroll .timeline-legend-tide { margin-left: 0; }
html.mobile-scroll .timeline-updated { margin-left: 0; }
.timeline-updated {
margin-left: auto;
color: var(--muted);
font-weight: 400;
letter-spacing: 0;
flex-shrink: 0;
white-space: nowrap;
}
.timeline-updated-label,
.timeline-updated-value {
white-space: nowrap;
}
.timeline-updated-label {
text-transform: uppercase;
letter-spacing: 0.03em;
font-weight: 500;
margin-right: -0.03em;
}
.timeline-updated-value {
font-family: var(--font-family);
}
.timeline-legend-gradient {
display: inline-block;
width: calc(133em / 12);
height: calc(8em / 12);
border-radius: 1px;
background: linear-gradient(to right,
#AEB7BE 0 9.774%,
transparent 9.774% 12.782%,
#F0D67C 12.782% 22.556%, #E4B24A 22.556% 32.331%,
transparent 32.331% 35.338%,
#5AC6D6 35.338% 45.113%, #2F6FC6 45.113% 54.887%,
transparent 54.887% 57.895%,
#C455A6 57.895% 67.669%, #8341BE 67.669% 77.444%,
transparent 77.444% 80.451%,
#F0913E 80.451% 90.226%, #A81F22 90.226% 100%);
}
.timeline-legend-gradient-label {
color: var(--muted);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.timeline-legend-gradient.is-banded {
display: inline-flex;
align-items: center;
gap: calc(4em / 12);
width: auto;
background: none;
}
.timeline-legend-seg {
display: inline-flex;
position: relative;
}
.timeline-legend-chip {
width: calc(13em / 12);
height: calc(8em / 12);
}
.timeline-legend-chip:first-child {
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
.timeline-legend-chip:last-child {
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
}
.timeline-legend-seg[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 4em / 12);
left: 50%;
transform: translateX(-50%);
padding: calc(4em / 12) calc(8em / 12);
background: var(--tooltip-surface);
color: var(--tooltip-on-surface);
font-family: var(--font-family);
font-size: var(--meta-size);
font-weight: var(--ui-weight);
line-height: var(--meta-line-height);
letter-spacing: 0.02em;
border-radius: calc(4em / 12);
white-space: nowrap;
pointer-events: none;
opacity: 0;
z-index: 30;
transition: opacity 0.15s var(--ease-md-standard);
}
.timeline-legend-seg[data-tooltip]:hover::after {
opacity: 1;
transition-delay: 0.5s;
}
.bottom-panel-detail {
max-height: 0;
overflow: hidden;
padding: 0;
border-top: 1px solid transparent;
scrollbar-gutter: stable;
transition:
max-height   225ms var(--ease-md-standard),
padding      225ms var(--ease-md-standard),
border-color 225ms var(--ease-md-standard);
}
.bottom-panel-detail.expanded {
max-height: 100vh;
padding: calc(var(--space-sm) * var(--font-scale)) 0;
border-top-color: transparent;
overflow-y: auto;
background: var(--forecast-field);
--plot-ground: var(--forecast-field);
--lane-gridline: color-mix(in srgb, var(--accent) 10%, var(--forecast-field));
}
.bottom-panel-detail.expanded.record-ride-detail {
background: transparent;
--plot-ground: var(--card-surface);
--lane-gridline: color-mix(in srgb, var(--accent) 10%, var(--card-surface));
}
.bottom-panel-detail.expanded.is-scrolled {
border-top-color: var(--divider);
}
@media (min-width: 768px) {
.bottom-panel-detail.expanded {
max-height: min(
calc(100vh - var(--content-band-deduct)),
calc(100vh * var(--open-surface-fraction-footer) - var(--footer-collapsed-h))
);
max-height: min(
calc(100dvh - var(--content-band-deduct)),
calc(100dvh * var(--open-surface-fraction-footer) - var(--footer-collapsed-h))
);
}
}
.bottom-panel-detail,
.location-menu-scroll,
.home-directory-scroll,
.mobile-sheet-body {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
scrollbar-gutter: stable;
}
.bottom-panel-detail::-webkit-scrollbar,
.location-menu-scroll::-webkit-scrollbar,
.home-directory-scroll::-webkit-scrollbar,
.mobile-sheet-body::-webkit-scrollbar {
width: 8px;
}
.bottom-panel-detail::-webkit-scrollbar-track,
.location-menu-scroll::-webkit-scrollbar-track,
.home-directory-scroll::-webkit-scrollbar-track,
.mobile-sheet-body::-webkit-scrollbar-track {
background: transparent;
}
.bottom-panel-detail::-webkit-scrollbar-thumb,
.location-menu-scroll::-webkit-scrollbar-thumb,
.home-directory-scroll::-webkit-scrollbar-thumb,
.mobile-sheet-body::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.18);
border-radius: 4px;
}
.bottom-panel-detail::-webkit-scrollbar-thumb:hover,
.location-menu-scroll::-webkit-scrollbar-thumb:hover,
.home-directory-scroll::-webkit-scrollbar-thumb:hover,
.mobile-sheet-body::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.28);
}
.surf-breakdown {
display: grid;
grid-template-columns: 1fr;
gap: calc(var(--space-md) * var(--font-scale)) calc(var(--space-lg) * var(--font-scale));
padding-inline: calc(var(--space-sm) * var(--font-scale));
}
@media (min-width: 900px) {
.surf-breakdown {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.surf-section {
min-width: 0;
}
.surf-empty-state {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: calc(var(--space-lg) * var(--font-scale)) calc(var(--space-sm) * var(--font-scale));
min-height: calc(120em / 14);
font-family: var(--font-family);
font-size: var(--ui-size);
font-weight: var(--ui-weight);
color: var(--muted);
}
.surf-section-title {
display: flex;
align-items: center;
font-family: var(--font-family);
font-size: var(--subtitle-size);
font-weight: var(--subtitle-weight);
letter-spacing: var(--subtitle-tracking);
line-height: var(--subtitle-line-height);
color: var(--muted);
margin: 0 0 var(--section-title-gap);
}
.container-title {
display: flex;
align-items: center;
}
.container-title-text {
font-family: var(--font-family);
font-size: var(--meta-size);
font-weight: 500;
line-height: 1.3;
color: var(--text);
}
html.mobile-scroll .container-title-text {
font-size: var(--subtitle-size);
font-weight: var(--subtitle-weight);
letter-spacing: var(--subtitle-tracking);
line-height: var(--subtitle-line-height);
color: var(--text);
}
.conditions-title {
display: none;
}
.data-list {
display: flex;
flex-direction: column;
gap: calc(4em / 14);
}
.data-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(12em / 14);
padding: calc(10em / 14) calc(12em / 14);
min-height: calc(44em / 14);
background: var(--tile-surface);
border-radius: var(--chip-radius);
}
.data-row--clickable {
border: none;
font: inherit;
color: inherit;
text-align: inherit;
width: 100%;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background 0.15s;
}
.data-row--clickable:hover {
background: var(--tile-surface-hover);
}
.data-row--clickable:focus-visible {
outline: none;
background: var(--tile-surface-hover);
box-shadow: inset 0 0 0 2px var(--interactive);
}
.surf-section {
scroll-margin-top: calc(var(--space-sm) * var(--font-scale));
}
.data-row-label {
font-family: var(--font-family);
font-size: var(--row-label-size);
font-weight: var(--row-label-weight);
line-height: var(--row-label-line-height);
color: var(--muted);
flex-shrink: 0;
}
.data-row-value {
display: inline-flex;
align-items: center;
gap: calc(6em / 14);
min-width: 0;
text-align: right;
flex-wrap: wrap;
justify-content: flex-end;
}
.data-row-primary {
font-family: var(--font-family);
font-size: var(--row-primary-size);
font-weight: var(--row-primary-weight);
line-height: var(--row-primary-line-height);
color: var(--text);
white-space: nowrap;
}
.data-row-primary--good,
.data-row-primary--warn { color: var(--text); }
.data-row-primary--empty { color: var(--muted); }
.data-row-meta {
font-family: var(--font-family);
font-size: var(--row-meta-size);
font-weight: var(--row-meta-weight);
line-height: var(--row-meta-line-height);
color: var(--muted);
white-space: nowrap;
}
.data-row-caveat {
font-family: var(--font-family);
font-size: var(--row-caveat-size);
font-weight: var(--row-caveat-weight);
line-height: var(--row-caveat-line-height);
color: var(--muted);
}
.data-row-primary-ext-icon {
font-size: 0.95em;
line-height: 1;
margin-left: 0.32em;
vertical-align: -0.125em;
color: inherit;
}
.data-row-arrow {
color: var(--muted);
font-size: var(--icon-md);
line-height: 1;
transform-origin: 50% 50%;
transition: transform 0.32s var(--ease-md-standard);
font-variation-settings: 'FILL' 0;
}
.data-row-arrow--tone { color: inherit; }
.wind-section { min-width: 0; }
.readings-footer {
margin-top: calc(24px * var(--font-scale));
border-top: 1px solid var(--divider);
padding-top: calc(24px * var(--font-scale));
margin-inline: calc(var(--space-sm) * var(--font-scale));
font-family: var(--font-family);
font-size: var(--meta-size);
font-weight: var(--meta-weight);
line-height: var(--meta-line-height);
color: var(--muted);
}
.home-directory-regions {
padding-bottom: 0;
margin-bottom: calc(var(--space-md) * var(--font-scale) * -1);
}
.home-directory-regions .location-region {
margin-bottom: 0;
padding-bottom: calc(var(--space-md) * var(--font-scale));
}
.home-directory-footer {
padding-bottom: calc(var(--space-sm) * var(--font-scale));
}
.home-directory-regions[hidden] ~ .home-directory-footer {
display: none;
}
.attribution-line {
display: flex;
flex-direction: column;
gap: calc(var(--space-xs) * var(--font-scale));
}
.attribution-pitch {
display: block;
max-width: 54ch;
text-wrap: balance;
font-size: var(--subtitle-size);
font-weight: 500;
line-height: var(--subtitle-line-height);
color: var(--text);
margin-bottom: calc(var(--space-xs) * var(--font-scale));
}
.attribution-links {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: calc(var(--space-xs) * var(--font-scale));
}
.attribution-author {
display: block;
}
.attribution-link-item {
display: inline-flex;
align-items: baseline;
gap: calc(var(--space-xs) * var(--font-scale));
}
.attribution-legal {
display: block;
}
.attribution-sep {
color: var(--muted);
}
.attribution-text {
white-space: nowrap;
color: var(--text);
text-decoration: none;
text-underline-offset: 0.15em;
}
.attribution-action-row {
display: block;
margin-bottom: calc((24px - var(--space-xs)) * var(--font-scale));
}
.attribution-action-row .attribution-action {
margin-inline-start: calc(-14em / 15);
}
.attribution-text:hover,
.attribution-text:focus-visible {
text-decoration: underline;
}
.attribution-text:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
.timeline-slider:focus-visible + .timeline-stack {
outline: 2px solid var(--interactive);
outline-offset: 2px;
border-radius: var(--chip-radius);
}
.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;
}
.skip-link {
position: fixed;
top: -100px;
left: 8px;
z-index: var(--z-overlay);
padding: 10px 14px;
background: var(--card-surface);
border-radius: var(--chip-radius);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 4px 12px rgba(0, 0, 0, 0.06);
font-family: var(--font-family);
font-size: var(--ui-size);
font-weight: 500;
color: var(--text);
text-decoration: none;
transition: top 0.15s ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 8px;
outline: 2px solid var(--accent);
outline-offset: 2px;
}
[hidden] {
display: none !important;
}
.overlay-scrim {
position: fixed;
inset: 0;
z-index: calc(var(--z-overlay) - 1);
background: var(--scrim-mobile);
pointer-events: none;
opacity: 0;
transition: opacity var(--scrim-fade) var(--scrim-ease);
}
.overlay-scrim.is-visible {
opacity: 1;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.overlay-scrim { transition: none; }
}
.retry-overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
will-change: transform;
z-index: var(--z-overlay);
pointer-events: none;
font-family: var(--font-family);
font-size: var(--ui-size);
font-weight: var(--ui-weight);
line-height: 1;
color: var(--text);
padding: calc(10em / 14) calc(16em / 14);
background: var(--card-surface);
border-radius: var(--radius-s);
box-shadow: var(--elevation-card);
white-space: nowrap;
user-select: none;
display: inline-flex;
align-items: center;
gap: calc(12em / 14);
}
.retry-overlay.is-ambient {
background: var(--status-ambient-surface);
color: var(--status-ambient-on);
}
.retry-overlay-text {
}
.retry-overlay-action {
pointer-events: auto;
background: transparent;
border: none;
color: var(--interactive);
font-family: inherit;
font-size: var(--dialog-action-size);
font-weight: 500;
line-height: 1;
padding: calc(6em / 15) calc(10em / 15);
margin: calc(-6em / 15) calc(-4em / 15) calc(-6em / 15) 0;
border-radius: var(--radius-full);
cursor: pointer;
white-space: nowrap;
transition:
background-color 0.15s var(--ease-md-standard);
}
.retry-overlay-action:hover {
background: color-mix(in srgb, var(--interactive) 8%, transparent);
color: color-mix(in srgb, var(--interactive) 80%, black);
}
.retry-overlay-action:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.retry-overlay-action:active {
background: color-mix(in srgb, var(--interactive) 16%, transparent);
}
a.retry-overlay-action {
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.32em;
}
.retry-overlay-ext-icon {
font-size: 0.95em;
line-height: 1;
color: inherit;
}
.retry-overlay.is-provider {
white-space: normal;
flex-wrap: wrap;
justify-content: center;
text-align: center;
width: min(27em, calc(100vw - 2 * var(--space-sm)));
padding: calc(14em / 14) calc(18em / 14);
gap: calc(8em / 14) calc(8em / 14);
}
.retry-overlay.is-provider .retry-overlay-text {
flex-basis: 100%;
line-height: 1.45;
}
.retry-overlay.is-provider .retry-overlay-action {
margin: 0;
}
.retry-overlay.is-provider .retry-overlay-action:not(.retry-overlay-status) {
flex-basis: 100%;
display: flex;
justify-content: center;
}
.reduced-motion-gate {
position: fixed;
inset: 0;
z-index: calc(var(--z-overlay) + 100);
}
.reduced-motion-gate[hidden] { display: none; }
.reduced-motion-scrim {
position: absolute;
inset: 0;
background: var(--scrim-mobile);
pointer-events: auto;
}
.retry-overlay.is-gate {
flex-direction: column;
gap: 14px;
max-width: min(90vw, 216px);
padding: 20px 24px;
white-space: normal;
text-align: center;
}
.retry-overlay.is-gate .retry-overlay-text {
line-height: 1.4;
width: 168px;
max-width: 100%;
}
.retry-overlay.is-gate .retry-overlay-action {
margin: 0;
padding: 8px 16px;
}
.login-chip {
display: inline-flex;
align-items: center;
gap: var(--chip-gap);
height: var(--chip-height);
padding: var(--chip-pad);
border: 1px solid color-mix(in srgb, var(--interactive) 18%, var(--border));
border-radius: var(--chip-radius);
background: color-mix(in srgb, var(--interactive) 6%, var(--card-surface));
font-family: var(--font-family);
font-size: var(--chip-size);
font-weight: var(--chip-weight);
line-height: var(--chip-line-height);
color: var(--text);
cursor: pointer;
white-space: nowrap;
transition:
color 0.2s var(--ease-md-standard),
border-color 0.2s var(--ease-md-standard),
background-color 0.2s var(--ease-md-standard);
user-select: none;
-webkit-user-select: none;
}
.login-chip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
border-color: color-mix(in srgb, var(--text) 35%, var(--border));
}
@media (hover: hover) {
.login-chip:hover {
background: color-mix(in srgb, var(--interactive) 10%, var(--card-surface));
border-color: color-mix(in srgb, var(--interactive) 35%, var(--border));
}
}
.login-chip-icon {
font-size: var(--icon-md);
color: var(--interactive);
line-height: 1;
font-variation-settings: 'FILL' 0;
flex-shrink: 0;
}
.auth-card-submit.signup-btn,
.auth-card-submit.appbar-action {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: auto;
height: calc(36em / 15);
padding: 0 calc(16em / 15);
white-space: nowrap;
}
.signup-btn.is-skeleton {
visibility: hidden;
}
.signup-btn.is-auth-unavailable {
opacity: 0.5;
cursor: not-allowed;
}
.login-chip.auth-card-switch {
height: calc(36em / 15);
padding: 0 calc(14em / 15);
}
.login-chip.auth-card-switch.is-skeleton {
min-width: calc(72em / 15);
}
.login-chip.auth-card-switch:not(.is-auth-unavailable)::after {
display: none;
}
.avatar-chip-anchor {
position: relative;
display: none;
}
.avatar-chip {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: calc(40em / 14);
height: calc(40em / 14);
margin-block: calc(-2em / 14);
padding: 0;
border: 0;
border-radius: var(--radius-full);
background: transparent;
font-family: var(--font-family);
font-size: var(--chip-size);
cursor: pointer;
transition:
border-color 0.2s var(--ease-md-standard),
background-color 0.2s var(--ease-md-standard);
user-select: none;
-webkit-user-select: none;
}
.avatar-chip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (hover: hover) {
.avatar-chip:hover {
background: var(--nav-state-hover);
}
}
.avatar-chip[aria-expanded="true"] {
background: var(--nav-state-open);
}
.avatar-chip-mark {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--interactive);
font-family: var(--font-family);
line-height: 1;
flex-shrink: 0;
text-transform: uppercase;
}
.avatar-chip-mark[data-initial] {
width: 2em;
height: 2em;
border-radius: 50%;
background: color-mix(in srgb, var(--interactive) 20%, var(--card-surface));
font-size: var(--meta-size);
font-weight: 600;
}
.avatar-chip-icon {
font-size: var(--icon-md);
line-height: 1;
font-variation-settings: 'FILL' 0;
}
.avatar-chip-mark[data-initial] .avatar-chip-icon {
display: none;
}
.avatar-chip-initial {
display: none;
}
.avatar-chip-mark[data-initial] .avatar-chip-initial {
display: inline;
}
.avatar-chip-caret {
color: var(--muted);
flex-shrink: 0;
font-size: var(--icon-md);
margin-left: var(--chip-caret-pull);
transition: transform var(--dur-medium) var(--ease-emphasized);
}
.avatar-chip[aria-expanded="true"] .avatar-chip-caret {
transform: rotate(180deg);
}
.avatar-chip .avatar-chip-mark[data-initial] {
font-size: calc(16em / 14);
}
.avatar-chip .avatar-chip-mark:not([data-initial]) {
width: calc(32em / 14);
height: calc(32em / 14);
border-radius: 50%;
background: color-mix(in srgb, var(--interactive) 20%, var(--card-surface));
}
.avatar-chip .avatar-chip-icon {
width: 1em;
font-size: calc(20em / 14);
font-variation-settings: 'FILL' 1;
}
.avatar-chip .avatar-chip-caret {
display: none;
}
.avatar-chip.is-skeleton {
min-width: 0;
}
.avatar-menu {
position: absolute;
top: calc(100% + 6em / 14);
right: 0;
overflow: hidden;
min-width: calc(240em / 14);
padding: calc(8em / 14) 0;
background: var(--card-surface);
border-radius: var(--card-radius);
box-shadow: var(--elevation-menu);
z-index: 40;
animation: popover-reveal var(--dur-popover) var(--ease-standard);
}
.avatar-menu:focus {
outline: none;
}
.avatar-menu.is-dismissing {
animation: popover-dismiss var(--dur-popover) var(--ease-standard) forwards;
}
.avatar-menu-item {
display: flex;
align-items: center;
width: 100%;
height: calc(48em / 14);
padding: 0 calc(16em / 14);
border: none;
background: transparent;
font-family: var(--font-family);
font-size: var(--ui-size);
font-weight: var(--ui-weight);
line-height: var(--ui-line-height);
color: var(--text);
text-align: left;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s var(--ease-md-standard);
}
.avatar-menu-item:hover,
.avatar-menu-item:focus-visible {
background: var(--surface-row);
outline: none;
}
a.avatar-menu-item {
text-decoration: none;
color: var(--text);
}
.avatar-menu-item--secondary {
font-weight: 400;
}
.avatar-menu-divider {
height: 1px;
margin: calc(8em / 14) 0;
background: var(--divider);
border: 0;
}
.avatar-menu-item-label {
flex: 1;
min-width: 0;
line-height: 1;
}
@media (max-width: 767px) {
.avatar-menu {
position: fixed;
top: auto;
left: 0;
right: 0;
bottom: 0;
min-width: 0;
max-width: none;
max-height: 88dvh;
padding: 16px 0 calc(8px + env(safe-area-inset-bottom, 0px));
border: none;
border-radius: var(--radius-m) var(--radius-m) 0 0;
box-shadow: var(--elevation-sheet);
z-index: 1000;
animation: sheet-rise var(--dur-sheet-enter) var(--ease-emphasized-decelerate);
overflow-y: auto;
overscroll-behavior: contain;
}
.avatar-menu.is-dismissing {
animation: sheet-fall var(--dur-sheet-exit) var(--ease-emphasized-accelerate) forwards;
}
.avatar-backdrop {
display: block;
position: fixed;
inset: 0;
background: var(--scrim-mobile);
z-index: 999;
animation: sheet-backdrop-fade var(--scrim-fade) var(--scrim-ease);
}
.avatar-backdrop[hidden] {
display: none;
}
.avatar-backdrop.is-dismissing {
animation: sheet-backdrop-fade-out var(--scrim-fade) var(--scrim-ease) forwards;
}
body.avatar-menu-open {
overflow: hidden;
}
.menu-sheet-title {
display: block;
margin: 0 0 4px;
padding: 0 16px;
font-family: var(--font-family);
font-size: var(--subtitle-size);
font-weight: var(--subtitle-weight);
line-height: var(--subtitle-line-height);
color: var(--text);
}
}
body.is-signed-in .login-chip,
html.is-signed-in body .login-chip,
body.is-signed-in .signup-btn,
html.is-signed-in body .signup-btn {
display: none;
}
body.is-signed-in .avatar-chip-anchor,
html.is-signed-in body .avatar-chip-anchor {
display: inline-flex;
}
html.is-business-persona body .login-chip,
html.is-business-persona body .signup-btn {
display: none;
}
html.is-business-persona body .avatar-chip-anchor {
display: none !important;
}
html.is-business-persona body .kiosk-settings-chip {
display: inline-flex;
}
.auth-overlay {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--space-sm) * var(--font-scale));
padding-top:    calc(var(--space-sm) * var(--font-scale) + env(safe-area-inset-top, 0px));
padding-bottom: calc(var(--space-sm) * var(--font-scale) + env(safe-area-inset-bottom, 0px));
}
.top-bar,
.ruler-rail,
.wind-compass-card,
.bottom-panel,
.unit-toggle-wrap {
transition:
opacity   350ms var(--ease-emphasized-decelerate),
transform 350ms var(--ease-emphasized-decelerate);
}
body.auth-card-open .top-bar,
body.auth-card-open .ruler-rail,
body.auth-card-open .wind-compass-card,
body.auth-card-open .bottom-panel,
body.auth-card-open .record-ride-panel,
body.auth-card-open .unit-toggle-wrap {
transition:
opacity   400ms var(--ease-emphasized-decelerate),
transform 400ms var(--ease-emphasized-decelerate);
}
body.auth-card-open .top-bar {
opacity: 0;
transform: translateY(-150%);
pointer-events: none;
}
body.auth-card-open .ruler-rail {
opacity: 0;
transform: translateX(-100%);
pointer-events: none;
}
body.auth-card-open .wind-compass-card {
opacity: 0;
transform: translateX(150%);
pointer-events: none;
}
body.auth-card-open .bottom-panel {
opacity: 0;
transform: translateY(150%);
pointer-events: none;
}
body.is-historical.auth-card-open:not(.home-view) .record-ride-panel {
opacity: 0;
transform: translateY(150%);
pointer-events: none;
}
body.auth-card-open .unit-toggle-wrap {
opacity: 0;
transform: translateX(-100vw);
pointer-events: none;
}
body.home-view.auth-card-open .top-bar,
body.home-view.auth-card-open .ruler-rail,
body.home-view.auth-card-open .wind-compass-card,
body.home-view.auth-card-open .bottom-panel,
body.home-view.auth-card-open .unit-toggle-wrap {
transform: none;
opacity: 1;
}
body.home-view.auth-card-open .auth-overlay-backdrop {
background-color: var(--scrim-mobile);
animation: auth-scrim-in var(--scrim-fade) var(--scrim-ease);
}
body.home-view .auth-overlay.is-closing .auth-overlay-backdrop {
animation: auth-scrim-out var(--scrim-fade) var(--scrim-ease) forwards;
}
.auth-overlay[hidden] {
display: none;
}
.auth-overlay-backdrop {
position: absolute;
inset: 0;
background-color: transparent;
}
.auth-card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: calc(480em / 14);
height: auto;
max-height: calc(100dvh - 128px);
background: var(--card-surface);
border-radius: var(--radius-l);
overflow: hidden;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.08),
0 1px 3px rgba(0, 0, 0, 0.04);
text-align: left;
animation: auth-card-rise 400ms var(--ease-md-standard);
}
.auth-overlay.is-closing .auth-card {
animation: auth-card-fall 350ms var(--ease-md-standard) forwards;
}
@keyframes auth-card-rise {
from { opacity: 0; transform: scale(0.85); }
to   { opacity: 1; transform: scale(1);    }
}
@keyframes auth-card-fall {
from { opacity: 1; transform: scale(1);    }
to   { opacity: 0; transform: scale(0.85); }
}
@keyframes auth-scrim-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes auth-scrim-out { from { opacity: 1; } to { opacity: 0; } }
.auth-card-header {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(12em / 14);
padding: calc(16em / 14) calc(20em / 14);
min-height: calc(72em / 14 + 1px);
background: var(--card-surface);
border-bottom: 1px solid var(--divider);
}
.auth-card-close {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
font-size: var(--body-size);
width: calc(40em / 14);
height: calc(40em / 14);
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
margin: 0;
padding: 0;
background: transparent;
border-radius: 50%;
color: var(--muted);
cursor: pointer;
outline: none;
transition: background-color 0.12s ease, color 0.12s ease;
}
.auth-card-close:hover {
background-color: color-mix(in srgb, var(--text) 6%, transparent);
color: var(--text);
}
.auth-card-close:focus-visible {
background-color: color-mix(in srgb, var(--text) 6%, transparent);
color: var(--text);
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.auth-card-close .material-symbols-rounded {
font-size: var(--icon-md);
}
.auth-card-back {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
font-size: var(--body-size);
width: calc(40em / 14);
height: calc(40em / 14);
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
margin: 0;
padding: 0;
background: transparent;
border-radius: 50%;
color: var(--muted);
cursor: pointer;
outline: none;
transition: background-color 0.12s ease, color 0.12s ease;
}
.auth-card-back:hover {
background-color: color-mix(in srgb, var(--text) 6%, transparent);
color: var(--text);
}
.auth-card-back:focus-visible {
background-color: color-mix(in srgb, var(--text) 6%, transparent);
color: var(--text);
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.auth-card-back .material-symbols-rounded {
font-size: var(--icon-md);
}
.auth-card-scroll {
flex: 1 1 auto;
min-height: 0;
scrollbar-gutter: stable;
display: flex;
flex-direction: column;
gap: calc(16em / 14);
overflow-y: auto;
overscroll-behavior: contain;
padding: calc(24em / 14) calc(24em / 14) calc(40em / 14);
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--text) 20%, transparent) transparent;
}
.auth-card-title {
flex: 1 1 auto;
margin: 0;
font-family: var(--font-family);
font-size: var(--dialog-title-size);
font-weight: 600;
line-height: 1.4;
color: var(--text);
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.auth-card-switch {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: calc(8em / 15) calc(14em / 15);
background: transparent;
border: 0;
border-radius: var(--radius-full);
font-family: var(--font-family);
font-size: var(--dialog-action-size);
font-weight: 500;
line-height: 1;
color: var(--interactive);
cursor: pointer;
outline: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.auth-card-switch:hover {
background-color: color-mix(in srgb, var(--interactive) 8%, transparent);
color: color-mix(in srgb, var(--interactive) 80%, black);
}
.auth-card-switch:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.auth-card-switch--inline {
margin: calc(-8em / 15) calc(-14em / 15);
vertical-align: baseline;
}
.auth-card-blurb {
margin: 0;
font-family: var(--font-family);
font-size: var(--dialog-body-size);
line-height: 1.5;
color: var(--text);
text-align: left;
}
.auth-card-blurb--center {
text-align: center;
}
.auth-card-blurb--center + .auth-card-blurb--center {
margin-top: calc(-8em / 16);
}
.auth-card-blurb--loading {
min-height: calc(400em / 16);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
}
.kiosk-terminal-note {
margin: 0;
font-family: var(--font-family);
font-size: var(--dialog-small-size);
line-height: 1.5;
color: var(--muted);
text-align: left;
}
.kiosk-settings-section {
display: flex;
flex-direction: column;
gap: calc(8em / 14);
}
.kiosk-settings-section-title {
margin: 0;
font-family: var(--font-family);
font-size: var(--meta-size);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.kiosk-settings-rows {
display: flex;
flex-direction: column;
}
.kiosk-settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(16em / 14);
min-height: calc(44em / 14);
padding: calc(8em / 14) 0;
}
.kiosk-settings-rows > * + * {
border-top: 1px solid var(--divider);
}
.kiosk-settings-row-label {
font-family: var(--font-family);
font-size: var(--body-size);
color: var(--muted);
}
.kiosk-settings-row-value {
font-family: var(--font-family);
font-size: var(--body-size);
font-weight: 500;
color: var(--text);
text-align: right;
}
.kiosk-settings-row-value-group {
display: inline-flex;
align-items: center;
gap: calc(10em / 14);
}
.kiosk-settings-code {
font-family: 'DM Mono', monospace;
letter-spacing: 0.03em;
}
.kiosk-settings-copy {
font-family: var(--font-family);
font-size: var(--meta-size);
font-weight: 500;
color: var(--interactive);
background: none;
border: none;
padding: calc(4em / 12) calc(8em / 12);
border-radius: var(--radius-s);
cursor: pointer;
}
.kiosk-settings-copy:hover {
background: rgba(0, 102, 214, 0.08);
}
.kiosk-settings-copy:focus-visible {
outline: 2px solid var(--interactive);
outline-offset: 1px;
}
.kiosk-settings-header-left {
display: flex;
align-items: center;
gap: calc(8em / 14);
min-width: 0;
}
.kiosk-settings-nav-row {
-webkit-appearance: none;
appearance: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(16em / 14);
width: calc(100% + 16em / 14);
margin: 0 calc(-8em / 14);
min-height: calc(44em / 14);
padding: calc(8em / 14);
border: none;
border-radius: var(--radius-s);
background: transparent;
font: inherit;
color: var(--text);
text-align: left;
cursor: pointer;
transition: background 0.15s;
}
.kiosk-settings-nav-row:hover {
background: color-mix(in srgb, var(--text) 5%, transparent);
}
.kiosk-settings-nav-row:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--interactive);
}
.kiosk-settings-nav-row-end {
display: inline-flex;
align-items: center;
gap: calc(4em / 14);
min-width: 0;
}
.kiosk-settings-nav-row-end .kiosk-settings-row-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kiosk-settings-nav-chevron {
flex-shrink: 0;
font-size: var(--icon-md);
color: var(--muted);
}
.kiosk-settings-stack-row {
display: flex;
flex-direction: column;
gap: calc(8em / 14);
padding: calc(10em / 14) 0;
}
.kiosk-settings-seg {
display: flex;
flex-wrap: wrap;
gap: calc(6em / 14);
}
.kiosk-settings-seg-btn {
-webkit-appearance: none;
appearance: none;
font-family: var(--font-family);
font-size: var(--body-size);
font-weight: 500;
line-height: 1;
min-height: calc(32em / 14);
padding: 0 calc(14em / 14);
border: 1px solid var(--border);
border-radius: var(--radius-full);
background: var(--card-surface);
color: var(--text);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.kiosk-settings-seg-btn:hover {
background: color-mix(in srgb, var(--text) 5%, var(--card-surface));
}
.kiosk-settings-seg-btn[aria-pressed="true"] {
background: color-mix(in srgb, var(--interactive) 10%, var(--card-surface));
border-color: var(--interactive);
color: var(--interactive);
font-weight: 600;
}
.kiosk-settings-seg-btn:focus-visible {
outline: 2px solid var(--interactive);
outline-offset: 1px;
}
.kiosk-settings-hint {
margin: 0;
padding: calc(8em / 12) 0 0;
font-family: var(--font-family);
font-size: var(--meta-size);
line-height: 1.4;
color: var(--muted);
}
.kiosk-settings-hint--picker {
padding: 0 0 calc(8em / 12);
}
.kiosk-settings-footer {
display: flex;
flex-direction: column;
gap: calc(12em / 14);
}
.kiosk-settings-status {
margin: 0;
}
.kiosk-settings-save:disabled {
opacity: 0.5;
cursor: default;
}
.kiosk-settings-save:disabled:hover {
background: var(--accent);
}
.kiosk-locations-picker .location-spot-link {
-webkit-appearance: none;
appearance: none;
}
.auth-card-form {
display: flex;
flex-direction: column;
gap: calc(16em / 14);
}
.md3-field {
position: relative;
display: block;
}
.md3-field-group {
display: flex;
flex-direction: column;
gap: calc(4em / 14);
}
.md3-field-helper {
margin: 0;
padding: 0 calc(16em / 12);
font-family: var(--font-family);
font-size: var(--meta-size);
line-height: 1.33;
color: var(--muted);
}
.md3-field-group:has(.md3-field-input[aria-invalid="true"]) .md3-field-helper {
color: var(--error);
}
.md3-field-input {
width: 100%;
height: calc(56em / 16);
padding: 0 1em;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-s);
font-family: var(--font-family);
font-size: var(--input-size);
line-height: 1.5;
color: var(--text);
outline: none;
vertical-align: middle;
scroll-margin-block: 1em;
transition: border-color 0.15s ease;
}
.md3-field-input::placeholder {
color: transparent;
}
input.md3-field-input:read-only {
pointer-events: none;
color: var(--muted);
cursor: default;
}
.md3-field--has-trailing:not(.is-editing),
.md3-field--has-trailing:not(.is-editing) input.md3-field-input {
cursor: pointer;
}
.md3-field--has-trailing .md3-field-input {
padding-right: calc(56em / 16);
}
.location-menu.is-embedded {
position: static;
top: auto;
left: auto;
right: auto;
display: block;
width: 100%;
max-height: none;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
min-height: calc(100dvh - 240px);
}
.location-menu.is-embedded .location-menu-scroll {
display: block;
flex: none;
overflow: visible;
max-height: none;
padding: 0;
}
.location-menu.is-embedded .location-regions {
column-width: auto;
column-count: 1;
padding: calc(12em / 14) 0 0;
}
.location-menu.is-embedded .location-search-wrap {
padding: 0;
background: transparent;
border-bottom: none;
}
.location-menu.is-embedded .location-spot-link::after,
.location-menu.is-embedded .location-search-clear::after {
content: none;
display: none;
}
.md3-field--toggle {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(8em / 14);
}
.auth-card-account-row[data-row="marketing"] {
margin-bottom: calc(8em / 14);
}
.md3-field-label--static,
.md3-field--toggle .md3-field-label {
position: static;
transform: none;
font-size: var(--meta-size);
background: transparent;
padding: 0;
left: auto;
top: auto;
}
.md3-field--toggle .unit-toggle-option::after {
content: none;
display: none;
}
.md3-field-trailing-icon {
appearance: none;
-webkit-appearance: none;
position: absolute;
top: 50%;
font-size: var(--input-size);
right: calc(8em / 16);
transform: translateY(-50%);
width: calc(40em / 16);
height: calc(40em / 16);
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
margin: 0;
padding: 0;
background: transparent;
border-radius: 50%;
color: var(--muted);
cursor: pointer;
outline: none;
transition: background-color 0.12s ease, color 0.12s ease;
}
.md3-field-trailing-icon:hover {
background: color-mix(in srgb, var(--text) 6%, transparent);
color: var(--text);
}
.md3-field-trailing-icon:focus-visible {
background: color-mix(in srgb, var(--text) 6%, transparent);
color: var(--text);
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.md3-field-trailing-icon .material-symbols-rounded {
font-size: var(--icon-md);
}
.md3-field.is-editing .md3-field-trailing-icon {
display: none;
}
.md3-field-input:not(:read-only):hover {
border-color: color-mix(in srgb, var(--text) 35%, var(--border));
}
.md3-field-input:focus {
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
}
.md3-field-input:-webkit-autofill,
.md3-field-input:-webkit-autofill:hover,
.md3-field-input:-webkit-autofill:focus,
.md3-field-input:-webkit-autofill:active {
-webkit-box-shadow: inset 0 0 0 1000px var(--card-surface);
box-shadow: inset 0 0 0 1000px var(--card-surface);
-webkit-text-fill-color: var(--text);
caret-color: var(--text);
transition: background-color 5000s ease-in-out 0s;
}
.md3-field-input:-webkit-autofill:focus {
-webkit-box-shadow: inset 0 0 0 1000px var(--card-surface),
inset 0 0 0 1px var(--accent);
box-shadow: inset 0 0 0 1000px var(--card-surface),
inset 0 0 0 1px var(--accent);
}
.md3-field-input[aria-invalid="true"] {
border-color: var(--error);
}
.md3-field-input[aria-invalid="true"]:focus {
box-shadow: inset 0 0 0 1px var(--error);
}
.md3-field-label {
position: absolute;
left: calc(0.75 * var(--input-size));
top: 50%;
transform: translateY(-50%);
padding: 0 calc(0.25 * var(--input-size));
background: var(--card-surface);
font-family: var(--font-family);
font-size: var(--input-size);
font-weight: 400;
line-height: 1;
color: var(--muted);
pointer-events: none;
transition:
top       0.15s var(--ease-emphasized-decelerate),
font-size 0.15s var(--ease-emphasized-decelerate),
color     0.15s ease;
z-index: 1;
white-space: nowrap;
}
.md3-field-input:focus ~ .md3-field-label,
.md3-field-input:not(:placeholder-shown) ~ .md3-field-label {
top: 0;
font-size: var(--meta-size);
}
.md3-field-input:focus ~ .md3-field-label {
color: var(--accent);
}
.md3-field-input[aria-invalid="true"] ~ .md3-field-label {
color: var(--error);
}
.auth-card-submit {
width: 100%;
height: calc(48em / 15);
padding: 0 calc(24em / 15);
border: none;
border-radius: var(--radius-full);
background: var(--accent);
color: var(--card-surface);
font-family: var(--font-family);
font-size: var(--dialog-action-size);
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.05s ease;
}
.auth-card-submit:hover {
background: color-mix(in srgb, var(--accent) 85%, white);
}
.auth-card-submit:active {
transform: translateY(1px);
}
.auth-card-submit:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.auth-card-error {
margin: 0;
padding: calc(10em / 12) calc(12em / 12);
background: color-mix(in srgb, var(--error) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--error) 28%, transparent);
border-radius: var(--radius-s);
font-family: var(--font-family);
font-size: var(--dialog-small-size);
line-height: 1.4;
color: var(--error);
}
.turnstile-slot:empty {
display: none;
}
.turnstile-slot {
display: flex;
justify-content: center;
margin: 0;
}
.auth-card-error--success {
background: color-mix(in srgb, var(--success) 8%, transparent);
border-color: color-mix(in srgb, var(--success) 28%, transparent);
color: var(--success);
}
.auth-card-legal {
margin: 0;
font-family: var(--font-family);
font-size: var(--meta-size);
line-height: 1.5;
color: var(--muted);
text-align: center;
}
.auth-card-legal a {
color: var(--muted);
text-decoration: underline;
text-underline-offset: 2px;
}
.auth-card-legal a:hover {
color: var(--text);
}
.auth-card-checkbox {
display: grid;
grid-template-columns: auto 1fr;
gap: calc(8em / 14);
align-items: center;
cursor: pointer;
margin: 0;
margin-left: calc(-11em / 14);
padding: 0;
font-family: var(--font-family);
}
.auth-card-checkbox-target {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(40em / 14);
height: calc(40em / 14);
flex-shrink: 0;
}
.auth-card-checkbox-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.auth-card-checkbox-state-layer {
position: absolute;
inset: 0;
border-radius: 50%;
background-color: var(--accent);
opacity: 0;
transition: opacity 120ms var(--ease-md-standard);
pointer-events: none;
}
.auth-card-checkbox:hover .auth-card-checkbox-state-layer {
opacity: 0.08;
}
.auth-card-checkbox-input:focus-visible ~ .auth-card-checkbox-state-layer {
opacity: 0.12;
}
.auth-card-checkbox-input:active ~ .auth-card-checkbox-state-layer {
opacity: 0.12;
}
.auth-card-checkbox-box {
position: relative;
width: calc(18em / 14);
height: calc(18em / 14);
border: 2px solid color-mix(in srgb, var(--text) 60%, transparent);
border-radius: 2px;
background-color: transparent;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
transition:
background-color 150ms var(--ease-md-standard),
border-color     150ms var(--ease-md-standard);
}
.auth-card-checkbox-input:checked ~ .auth-card-checkbox-box {
background-color: var(--accent);
border-color: var(--accent);
}
.auth-card-checkbox-check {
width: calc(14em / 14);
height: calc(14em / 14);
color: var(--card-surface);
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset var(--dur-fade) var(--ease-emphasized);
pointer-events: none;
}
.auth-card-checkbox-input:checked ~ .auth-card-checkbox-box .auth-card-checkbox-check {
stroke-dashoffset: 0;
}
.auth-card-checkbox-text {
font-family: var(--font-family);
font-size: var(--dialog-body-size);
line-height: 1.5;
color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
.auth-card-checkbox-state-layer,
.auth-card-checkbox-box,
.auth-card-checkbox-check {
transition: none;
}
}
.auth-card-account-list {
display: flex;
flex-direction: column;
gap: calc(16em / 14);
}
.auth-card-account-row {
display: flex;
flex-direction: column;
gap: calc(8em / 14);
}
.auth-card-account-fields {
display: flex;
flex-direction: column;
gap: calc(16em / 14);
}
.auth-card-account-actions {
display: flex;
justify-content: flex-end;
gap: calc(8em / 14);
}
.auth-card-account-action {
appearance: none;
-webkit-appearance: none;
flex-shrink: 0;
border: 0;
margin: 0;
background: transparent;
padding: calc(8em / 15) calc(14em / 15);
font-family: var(--font-family);
font-size: var(--dialog-action-size);
font-weight: 500;
color: var(--interactive);
cursor: pointer;
border-radius: var(--radius-full);
outline: none;
transition: background-color 0.15s ease;
}
.auth-card-account-action:hover {
background: color-mix(in srgb, var(--interactive) 8%, transparent);
}
.auth-card-account-action:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.auth-card-account-action:disabled {
opacity: 0.5;
cursor: default;
}
.auth-card-account-action--cancel {
color: var(--muted);
}
.auth-card-account-action--cancel:hover {
background: color-mix(in srgb, var(--text) 6%, transparent);
}
.auth-card-account-danger {
appearance: none;
-webkit-appearance: none;
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
margin: calc(8em / 15) 0 0 calc(-14em / 15);
padding: calc(8em / 15) calc(14em / 15);
background: transparent;
border: 0;
border-radius: var(--radius-full);
font-family: var(--font-family);
font-size: var(--dialog-action-size);
font-weight: 500;
line-height: 1;
color: var(--error);
cursor: pointer;
outline: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.auth-card-account-danger:hover {
background-color: color-mix(in srgb, var(--error) 8%, transparent);
color: color-mix(in srgb, var(--error) 85%, black);
}
.auth-card-account-danger:focus-visible {
outline: 2px solid var(--error);
outline-offset: 2px;
}
.auth-card-submit--danger {
background: var(--error);
}
.auth-card-submit--danger:hover {
background: color-mix(in srgb, var(--error) 85%, black);
}
.auth-card-submit--danger:focus-visible {
outline-color: var(--error);
}
@media (max-width: 767px) {
.auth-overlay {
align-items: stretch;
justify-content: stretch;
padding: 0;
}
.auth-card {
max-width: none;
width: 100%;
height: 100dvh;
max-height: 100dvh;
border: none;
border-radius: 0;
box-shadow: none;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
animation: auth-card-rise 400ms var(--ease-md-standard);
}
.auth-overlay.is-closing .auth-card {
animation: auth-card-fall 350ms var(--ease-md-standard) forwards;
}
.auth-card-scroll {
padding: 20px 20px 20px;
}
.location-menu.is-embedded {
min-height: 0;
}
.auth-card-header {
padding: 12px 16px 12px 20px;
}
.auth-card-title {
font-size: 1.125rem;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
@media (max-width: 767px) {
#mobile-sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: calc(100svh - var(--top-card-height, 57px) - var(--sheet-sky-gap));
display: flex;
flex-direction: column;
background: var(--card-surface);
border-radius: var(--radius-m) var(--radius-m) 0 0;
box-shadow: var(--elevation-sheet);
z-index: 1000;
transform: translateY(calc(100% - var(--sheet-peek-h, 280px)));
transition: transform var(--dur-sheet-enter) var(--ease-emphasized-decelerate);
overscroll-behavior: contain;
}
#mobile-sheet.is-no-transition { transition: none; }
#mobile-sheet.is-search-mode {
top: 0;
bottom: 0;
height: auto;
max-height: none;
border-radius: 0;
transform: none !important;
transition: none;
}
#mobile-sheet.is-search-mode .mobile-sheet-handle { display: none; }
#mobile-sheet.is-search-mode .home-directory-row { display: none; }
#mobile-sheet.is-search-mode .home-directory-search { padding-top: calc(10px + 12em / 14); }
#mobile-sheet.is-search-mode .location-search-back { display: inline-flex; }
#mobile-sheet.is-search-mode .mobile-sheet-body {
display: flex;
flex-direction: column;
overflow: hidden !important;
padding-bottom: 0;
}
#mobile-sheet.is-search-mode .home-directory-detail {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
#mobile-sheet.is-search-mode .home-directory-scroll {
overflow-y: auto;
min-height: 0;
scrollbar-gutter: auto;
padding-bottom: var(--keyboard-inset, 0px);
}
#mobile-sheet.is-retracted { box-shadow: none; }
@keyframes sheet-swap-in  { from { transform: translateY(100%); } }
@keyframes sheet-swap-out { to   { transform: translateY(100%); } }
#mobile-sheet.is-swapping-in {
animation: sheet-swap-in var(--dur-sheet-enter) var(--ease-emphasized-decelerate)
var(--swap-stagger, 240ms) backwards;
}
#mobile-sheet.is-swapping-out {
animation: sheet-swap-out var(--dur-sheet-exit) var(--ease-emphasized-accelerate) forwards;
}
.home-view #mobile-sheet .wind-compass-card,
.home-view #mobile-sheet #bottom-panel { display: flex !important; }
.mobile-sheet-handle {
flex: none;
display: flex;
align-items: center;
justify-content: center;
appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
padding: 11px 0 7px;
cursor: grab;
touch-action: none;
}
.mobile-sheet-handle:active { cursor: grabbing; }
.mobile-sheet-handle:focus-visible {
outline: 2px solid var(--interactive);
outline-offset: -3px;
border-radius: var(--radius-s);
}
.mobile-sheet-grabber {
display: block;
width: 32px;
height: 4px;
border-radius: var(--radius-full);
background: var(--stone);
}
.mobile-sheet-body {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--keyboard-inset, 0px));
touch-action: pan-y;
overscroll-behavior: none;
}
.forecast-seg-bar {
--seg-content-gap: calc(var(--space-sm) * var(--font-scale));
flex: none;
padding: calc(var(--space-xs) * var(--font-scale)) 16px var(--seg-content-gap);
}
.forecast-seg {
display: flex;
width: 100%;
}
.forecast-seg .unit-toggle-option {
flex: 1 1 0;
min-width: 0;
}
.forecast-seg .unit-toggle-label { white-space: nowrap; }
.sheet-peek-slot {
display: grid;
}
.sheet-peek-slot > #wind-compass-card {
grid-area: 1 / 1;
min-width: 0;
align-self: start;
}
.sheet-peek-slot #conditions-title {
display: none;
}
.sheet-peek-slot > #wind-compass-card { padding-top: 0; }
.sheet-peek-slot:is([data-segment="forecast"], [data-segment="location"]) > #wind-compass-card { visibility: hidden; }
.sheet-peek-slot:is([data-segment="forecast"], [data-segment="location"]) ~ #bottom-panel #bottom-panel-detail { display: none; }
.sheet-peek-slot:is([data-segment="current"], [data-segment="location"]) ~ #forecast-lanes { display: none; }
.sheet-peek-slot:is([data-segment="current"], [data-segment="forecast"]) ~ #spot-location-lane { display: none; }
.sheet-peek-slot[data-segment="forecast"] ~ #forecast-lanes {
margin-top: calc(-1 * var(--sheet-peek-lead-h, 0px));
position: relative;
z-index: 1;
background: var(--forecast-field);
padding-top: var(--lane-separation);
--plot-ground: var(--forecast-field);
--lane-gridline: color-mix(in srgb, var(--accent) 10%, var(--forecast-field));
}
.sheet-peek-slot[data-segment="location"] ~ #spot-location-lane {
margin-top: calc(-1 * var(--sheet-peek-lead-h, 0px));
position: relative;
z-index: 1;
background: var(--card-surface);
padding-top: 0;
padding-inline: calc(16px * var(--font-scale));
}
.spot-location-table .data-list {
flex-direction: column;
align-items: stretch;
column-gap: 0;
row-gap: calc(4em / 14);
}
.spot-location-table .data-row {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: calc(12em / 14);
min-height: calc(44em / 14);
padding: calc(10em / 14) calc(12em / 14);
background: var(--tile-surface);
border-radius: var(--chip-radius);
}
.spot-location-table .data-row-label {
font-size: var(--row-label-size);
font-weight: var(--row-label-weight);
line-height: var(--row-label-line-height);
text-transform: none;
letter-spacing: normal;
margin-right: 0;
}
#mobile-sheet > .bottom-panel-timeline {
flex: none;
background: var(--card-surface);
padding-right: calc(var(--space-sm) * var(--font-scale) + var(--forecast-sb-gutter, 0px));
padding-bottom: calc(var(--space-sm) * var(--font-scale));
}
#mobile-sheet:not([data-segment="forecast"]) > .bottom-panel-timeline {
display: none;
}
#mobile-sheet[data-segment] > .mobile-sheet-body {
border-top: 1px solid transparent;
transition: border-color 225ms var(--ease-md-standard);
}
#mobile-sheet[data-segment].is-scrolled > .mobile-sheet-body {
border-top-color: var(--divider);
}
#mobile-sheet[data-segment="forecast"] > .mobile-sheet-body {
background: var(--forecast-field);
}
#mobile-sheet > .bottom-panel-timeline .timeline-legend-row,
#mobile-sheet > .bottom-panel-timeline #timeline-tide-strip { display: none; }
#mobile-sheet > .bottom-panel-timeline .timeline-weekday-row,
#mobile-sheet > .bottom-panel-timeline .timeline-hours,
#mobile-sheet > .bottom-panel-timeline .timeline-track,
#mobile-sheet > .bottom-panel-timeline .timeline-track.has-data {
background: transparent;
}
#mobile-sheet > .bottom-panel-timeline .timeline-weekday-row {
border-radius: 0;
}
#mobile-sheet > .bottom-panel-timeline .timeline-weekday-label {
font-size: var(--subtitle-size);
font-weight: var(--subtitle-weight);
letter-spacing: var(--subtitle-tracking);
}
#mobile-sheet > .mobile-sheet-body > .timeline-updated-footer-row {
display: flex;
}
#mobile-sheet #timeline-strip { display: none; }
#mobile-sheet #bottom-panel { padding-bottom: 0; }
#mobile-sheet .home-directory-row,
#mobile-sheet .record-ride-row {
padding-right: calc(16em / 14);
}
#mobile-sheet .bottom-panel-expand { display: none; }
#mobile-sheet .spot-location-copy { display: flex; }
#mobile-sheet .home-directory-detail {
max-height: none;
min-height: 0;
overflow: visible;
border-top-color: transparent;
transition: none;
}
#mobile-sheet .home-directory-scroll {
overflow: visible;
scrollbar-gutter: auto;
}
html.mobile-scroll .wind-compass-card {
position: relative;
inset: auto;
width: auto;
max-width: none;
height: auto;
max-height: none;
margin: 0;
padding: 2px 16px 0;
border-radius: 0;
box-shadow: none;
background: transparent;
overflow: visible;
}
html.mobile-scroll .wind-compass-card-scroll { overflow: visible; }
html.mobile-scroll .wind-compass-card-scroll-affordance--up,
html.mobile-scroll .wind-compass-card-scroll-affordance--down { display: none; }
html.mobile-scroll .conditions-chips {
grid-template-columns: 1fr 1fr;
column-gap: 8px;
row-gap: 0;
max-width: none;
align-items: start;
}
html.mobile-scroll .conditions-group-title {
grid-row: 1;
font-size: var(--subtitle-size);
font-weight: var(--subtitle-weight);
letter-spacing: var(--subtitle-tracking);
line-height: var(--subtitle-line-height);
color: var(--muted);
margin: 0 0 var(--section-title-gap);
}
html.mobile-scroll .conditions-group-title[data-group="swell"],
html.mobile-scroll .conditions-group[data-group="swell"] { grid-column: 1; }
html.mobile-scroll .conditions-group-title[data-group="wind"],
html.mobile-scroll .conditions-group[data-group="wind"] { grid-column: 2; }
html.mobile-scroll .conditions-group { grid-row: 2; }
html.mobile-scroll .bottom-panel {
position: relative;
inset: auto;
margin: 0;
border-radius: 0;
border-top: none;
box-shadow: none;
height: auto;
max-height: none;
background: transparent;
}
html.mobile-scroll .bottom-panel-title {
padding-top: calc(var(--space-md) * var(--font-scale));
}
html.mobile-scroll .bottom-panel-detail {
max-height: none;
overflow: visible;
padding: calc(var(--space-md) * var(--font-scale)) 0 0;
border-top-color: transparent;
}
html.mobile-scroll .bottom-panel-expand { display: none; }
html.mobile-scroll .bottom-panel-timeline {
position: static;
padding: 0 calc(var(--space-sm) * var(--font-scale));
}
html.mobile-scroll body:not(.is-historical) .bottom-panel-timeline-zone {
min-height: 0;
}
html.mobile-scroll body.auth-card-open .wind-compass-card,
html.mobile-scroll body.auth-card-open .bottom-panel {
transform: none;
opacity: 1;
}
html.mobile-scroll body.is-historical .wind-compass-card {
display: none;
}
}
@media (hover: none) {
.wordmark:focus-visible,
.login-chip:focus-visible,
.signup-btn:focus-visible,
.avatar-chip:focus-visible,
.location-trigger:focus-visible,
.total-height-chip:focus-visible,
.unit-toggle-option:focus-visible,
.bottom-panel-expand:focus-visible,
.conditions-group:focus-visible,
.ruler-rail:focus-visible,
.timeline-tide-marker:focus-visible,
.timeline-slider:focus-visible + .timeline-stack,
.data-row--clickable:focus-visible,
.location-spot-link:focus-visible,
.location-search-clear:focus-visible,
.location-search-back:focus-visible,
.avatar-menu-item:focus-visible,
.home-map-fit:focus-visible {
outline: none;
box-shadow: none;
}
.wordmark[data-tooltip]:hover::after,
.wordmark[data-tooltip]:focus-visible::after,
.home-map-fit[data-tooltip]:hover::after,
.home-map-fit[data-tooltip]:focus-visible::after,
.conditions-group:hover::after,
.conditions-group:focus-visible::after,
.location-trigger:hover::after,
.location-trigger:focus-visible::after,
.login-chip:hover::after,
.login-chip:focus-visible::after,
.avatar-chip:hover::after,
.avatar-chip:focus-visible::after,
.bottom-panel-expand:hover::after,
.bottom-panel-expand:focus-visible::after,
.spot-location-figure[data-tooltip]:hover::after,
.spot-location-figure[data-tooltip]:focus-visible::after,
.location-search-clear:hover::after,
.location-search-clear:focus-visible::after,
.location-spot-link:hover::after,
.location-spot-link:focus-visible::after,
.data-row--clickable:hover::after,
.data-row--clickable:focus-visible::after,
.total-height-chip[data-tooltip]:hover::after,
.total-height-chip[data-tooltip]:focus-visible::after,
.timeline-tide-marker[data-tooltip]:hover::after,
.timeline-tide-marker[data-tooltip]:focus-visible::after {
opacity: 0;
}
}
.home-view .wordmark[data-tooltip]:hover::after,
.home-view .wordmark[data-tooltip]:focus-visible::after {
opacity: 0;
}
#home-view {
position: fixed;
inset: 0;
z-index: 100;
display: none;
overflow: hidden;
background: var(--map-ocean);
touch-action: none;
}
.home-view #home-view { display: block; }
#home-view:focus { outline: none; }
.home-map-canvas {
position: absolute;
inset: 0;
cursor: grab;
display: block;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.home-map-canvas.is-grabbing { cursor: grabbing; }
.home-map-markers {
position: absolute;
inset: 0;
pointer-events: none;
}
.home-map-marker {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
margin: -11px;
pointer-events: auto;
display: grid;
place-items: center;
cursor: pointer;
text-decoration: none;
touch-action: none;
-webkit-touch-callout: none;
}
.home-map-marker-dot {
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--map-marker);
box-shadow: 0 0 0 2.5px var(--card-surface), 0 1px 3px rgba(0,38,66,.35);
transition: transform var(--dur-fade, 150ms) var(--ease-md-standard, ease);
}
@media (hover: hover) {
.home-map-marker:hover .home-map-marker-dot,
.home-map-marker:focus-visible .home-map-marker-dot { transform: scale(1.35); }
}
.home-map-marker:focus-visible {
outline: 2px solid var(--interactive);
outline-offset: 2px;
border-radius: 50%;
}
.home-map-marker:hover,
.home-map-marker:focus-visible,
.home-map-cluster:hover,
.home-map-cluster:focus-visible {
z-index: 3;
}
.home-map-marker[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: var(--tooltip-left, 50%);
transform: translateX(var(--tooltip-left-shift, -50%));
padding: 4px 8px;
background: var(--tooltip-surface, #131616);
color: var(--tooltip-on-surface, #FEFDFA);
font: 500 var(--meta-size, 12px)/1.2 var(--font-family, Inter, sans-serif);
white-space: nowrap;
border-radius: var(--radius-s, 8px);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-fade, 150ms) var(--ease-md-standard, ease);
z-index: 2;
}
@media (hover: hover) {
.home-map-marker:hover::after,
.home-map-marker:focus-visible::after { opacity: 1; }
}
@media (hover: hover) {
.home-map-marker.has-label:hover::after,
.home-map-marker.has-label:focus-visible::after { opacity: 0; }
}
.home-map-label {
position: absolute;
top: 50%;
left: calc(50% + var(--map-label-gap));
transform: translateY(-50%);
white-space: nowrap;
font-family: var(--font-family, Inter, sans-serif);
font-size: var(--map-label-size);
font-weight: var(--map-label-weight);
line-height: 1.1;
color: var(--map-label-color);
text-shadow:
0 0 2px var(--map-label-halo), 0 0 2px var(--map-label-halo),
0 0 3px var(--map-label-halo), 0 0 4px var(--map-label-halo);
pointer-events: auto;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
opacity: 1;
transition: opacity var(--dur-fade, 150ms) var(--ease-md-standard, ease);
}
.home-map-label-section {
font-weight: var(--map-sample-weight);
}
.home-map-label-section[hidden] { display: none; }
.home-map-label.label-left {
left: auto;
right: calc(50% + var(--map-label-gap));
}
.home-map-label.label-below,
.home-map-label.label-above {
left: 50%;
right: auto;
transform: translateX(-50%);
}
.home-map-label.label-below {
top: calc(50% + var(--map-label-gap));
}
.home-map-label.label-above {
top: auto;
bottom: calc(50% + var(--map-label-gap));
}
.home-map-sample {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
margin: -11px;
display: grid;
place-items: center;
pointer-events: none;
animation: home-map-sample-in var(--dur-fade, 150ms) var(--ease-md-standard, ease);
}
@keyframes home-map-sample-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.home-map-sample { animation: none; }
}
.home-map-sample-icon {
font-size: var(--map-sample-size);
line-height: 1;
color: var(--map-sample);
}
.home-map-wind {
position: absolute;
top: 0;
left: 0;
width: calc(var(--map-sample-size) * 72 / 28);
height: calc(var(--map-sample-size) * 72 / 28);
margin: calc(var(--map-sample-size) * -36 / 28);
display: grid;
place-items: center;
border: 1px dashed var(--map-sample-line);
border-radius: 50%;
pointer-events: none;
animation: home-map-sample-in var(--dur-fade, 150ms) var(--ease-md-standard, ease);
}
@media (prefers-reduced-motion: reduce) {
.home-map-wind { animation: none; }
}
.home-map-sample,
.home-map-wind { transition: opacity var(--dur-fade, 150ms) var(--ease-md-standard, ease); }
.home-map-sample.is-faded,
.home-map-wind.is-faded { opacity: 0.2; }
.home-map-label.is-hidden { opacity: 0; pointer-events: none; }
.home-map-cluster {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
margin: -11px;
padding: 0;
border: 0;
background: none;
display: grid;
place-items: center;
cursor: pointer;
pointer-events: auto;
touch-action: none;
-webkit-touch-callout: none;
}
.home-map-cluster-count {
width: var(--map-cluster-size);
height: var(--map-cluster-size);
border-radius: 50%;
background: var(--map-cluster-bg);
color: var(--map-cluster-fg);
box-shadow: 0 0 0 2.5px var(--card-surface), 0 1px 3px rgba(0, 38, 66, .35);
display: grid;
place-items: center;
font: var(--map-label-weight) var(--map-cluster-count-size)/1 var(--font-family, Inter, sans-serif);
font-weight: 700;
transition: transform var(--dur-fade, 150ms) var(--ease-md-standard, ease);
}
@media (hover: hover) {
.home-map-cluster:hover .home-map-cluster-count { transform: scale(1.12); }
}
.home-map-cluster:focus-visible {
outline: 2px solid var(--interactive);
outline-offset: 2px;
border-radius: 50%;
}
.home-map-cluster-label { left: calc(50% + var(--map-cluster-gap)); }
.home-map-cluster-label.label-left {
left: auto;
right: calc(50% + var(--map-cluster-gap));
}
.home-map-marker.is-clustered { opacity: 0; pointer-events: none; }
.home-map-fit {
position: absolute;
right: var(--space-sm);
bottom: 60px;
width: var(--map-fit-size);
height: var(--map-fit-size);
display: grid;
place-items: center;
padding: 0;
border: 1px solid var(--chip-hairline);
border-radius: var(--chip-radius);
background: var(--map-fit-bg);
color: var(--map-fit-fg);
box-shadow: var(--elevation-card);
cursor: pointer;
z-index: 2;
pointer-events: auto;
opacity: 0;
visibility: hidden;
transform: scale(0.92);
transition: opacity var(--dur-fade, 150ms) var(--ease-md-standard, ease),
transform var(--dur-fade, 150ms) var(--ease-md-standard, ease),
visibility 0s linear var(--dur-fade, 150ms);
}
.home-map-fit.is-visible {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity var(--dur-fade, 150ms) var(--ease-md-standard, ease),
transform var(--dur-fade, 150ms) var(--ease-md-standard, ease);
}
.home-map-fit .material-symbols-rounded { font-size: 22px; }
.home-map-cells[aria-pressed="true"] { color: var(--interactive); }
@media (hover: hover) {
.home-map-fit:hover { border-color: var(--text-tinted, var(--muted)); }
}
.home-map-fit:focus-visible { outline: 2px solid var(--interactive); outline-offset: 2px; }
.home-map-fit[data-tooltip]::after {
top: 50%;
bottom: auto;
left: auto;
right: calc(100% + 4em / 12);
transform: translateY(-50%);
}
.home-map-credit {
position: absolute;
right: var(--space-sm);
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
margin: 0;
z-index: 2;
font-size: 0.6875rem;
line-height: 1.3;
font-weight: 500;
color: var(--map-label-color);
user-select: none;
pointer-events: auto;
background: var(--map-ocean);
padding: 2px 6px;
border-radius: var(--radius-s);
}
.home-map-credit a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in srgb, var(--map-label-color) 45%, transparent);
}
@media (hover: hover) {
.home-map-credit a:hover { text-decoration-color: currentColor; }
}
.home-map-credit a:focus-visible {
outline: 2px solid var(--interactive);
outline-offset: 2px;
border-radius: 2px;
}
.home-view #particle-canvas,
.home-view .ruler-rail,
.home-view #bottom-panel,
.home-view .wind-compass-card,
.home-view .unit-toggle-wrap,
.home-view #total-height-chip,
.home-view #spot-header,
.home-view .top-chips {
display: none !important;
}
.spot-header {
position: fixed;
top: calc(var(--top-card-height) + var(--chrome-safe-padding) - var(--spot-header-cap-lead, 0px));
left: calc((36px + var(--space-sm)) * var(--font-scale));
max-width: calc(100% - (36px + var(--space-sm) * 2) * var(--font-scale));
z-index: var(--z-toggle);
color: var(--spot-header-ink, var(--text));
text-shadow:
0 0 2px var(--spot-header-halo, transparent), 0 0 2px var(--spot-header-halo, transparent),
0 0 3px var(--spot-header-halo, transparent), 0 0 4px var(--spot-header-halo, transparent);
font-family: var(--font-family);
pointer-events: none;
transition:
opacity   350ms var(--ease-emphasized-decelerate),
transform 350ms var(--ease-emphasized-decelerate);
}
@media (prefers-reduced-motion: reduce) {
.spot-header {
transition:
opacity   350ms var(--ease-emphasized-decelerate),
transform 350ms var(--ease-emphasized-decelerate),
color     500ms var(--ease-standard);
}
.spot-header-time,
.spot-header-temp-label,
.spot-header-sep,
.spot-header-note { transition: color 500ms var(--ease-standard); }
}
.spot-header-temp-label,
.spot-header-sep,
.spot-header-note { color: var(--spot-header-ink-2, currentColor); }
.spot-header p { margin: 0; min-width: 0; }
.spot-header-title {
display: flex;
align-items: baseline;
column-gap: calc(var(--space-sm) * var(--font-scale));
font-size: calc(var(--subtitle-size) * 1.5);
font-weight: var(--subtitle-weight);
letter-spacing: var(--page-title-tracking);
line-height: var(--subtitle-line-height);
}
.spot-header-place,
.spot-header-note {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.spot-header-temp { flex: none; white-space: nowrap; }
.spot-header-temp-label {
font-size: var(--meta-size);
font-weight: var(--meta-weight);
}
.spot-header-sub {
display: flex;
align-items: baseline;
gap: calc(var(--space-xs) * var(--font-scale));
font-size: var(--meta-size);
font-weight: var(--meta-weight);
line-height: var(--meta-line-height);
}
.spot-header-time {
flex: none;
white-space: nowrap;
font-weight: var(--timeline-clock-weight);
}
body.auth-card-open .spot-header {
opacity: 0;
transform: translateY(calc(-100% - var(--top-card-height) - var(--chrome-safe-padding)));
pointer-events: none;
}
.home-directory { display: none; }
.home-view .home-directory {
display: flex;
flex-direction: column;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-card-bottom);
padding-bottom: env(safe-area-inset-bottom, 0px);
max-height: calc(100vh * var(--open-surface-fraction));
max-height: min(
calc(100dvh - var(--top-card-height) - var(--waterline-safe-padding)),
calc(100dvh * var(--open-surface-fraction))
);
background: var(--card-surface);
border-radius: var(--radius-m) var(--radius-m) 0 0;
border-top: 1px solid var(--divider);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.home-directory-row,
.record-ride-row {
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
padding: calc(14px * var(--font-scale)) calc(16px * var(--font-scale)) var(--footer-chevron-clearance);
padding-right: calc((40px + var(--space-sm) * 2) * var(--font-scale));
--footer-title-centre: calc(
14px * var(--font-scale)
+ var(--footer-title-line) / 2
);
}
.home-directory-title,
.record-ride-title {
display: flex;
align-items: center;
min-width: 0;
}
.home-directory-title-text,
.record-ride-title-text {
font-family: var(--font-family);
font-size: calc(var(--subtitle-size) * 1.25);
font-weight: var(--subtitle-weight);
letter-spacing: var(--panel-title-tracking);
line-height: var(--subtitle-line-height);
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-directory-title {
flex-direction: column;
align-items: flex-start;
}
.home-directory-title-text { max-width: 100%; }
.home-directory-detail {
display: flex;
flex-direction: column;
min-height: 0;
max-height: var(--home-directory-peek-h);
overflow: hidden;
border-top: 1px solid transparent;
transition:
max-height   225ms var(--ease-md-standard),
border-color 225ms var(--ease-md-standard);
}
.home-directory.is-open .home-directory-detail {
max-height: 100vh;
flex: 1 1 auto;
}
.home-directory-search {
flex-shrink: 0;
position: sticky;
top: 0;
padding-top: calc(12em / 14 - var(--footer-chevron-clearance));
}
.home-directory-scroll {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
scrollbar-gutter: stable;
position: relative;
}
.home-directory.is-open .home-directory-scroll {
overflow-y: auto;
}
@media (max-width: 767px) {
.home-view .home-directory { display: none; }
#mobile-sheet .home-directory-row,
#mobile-sheet .record-ride-row {
padding-top: 2px;
padding-right: calc(16px * var(--font-scale));
--footer-title-centre: calc(
2px + var(--subtitle-size) * var(--subtitle-line-height) / 2
);
}
#mobile-sheet .home-directory-detail {
border-top-width: 0;
}
}
@media (min-width: 768px) {
.home-directory {
display: flex;
flex-direction: column;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-card-bottom);
padding-bottom: env(safe-area-inset-bottom, 0px);
max-height: min(
calc(100dvh - var(--top-card-height) - var(--waterline-safe-padding)),
calc(100dvh * var(--open-surface-fraction))
);
background: var(--card-surface);
border-radius: var(--radius-m) var(--radius-m) 0 0;
border-top: 1px solid var(--divider);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
overflow: hidden;
transform: translateY(110%);
pointer-events: none;
visibility: hidden;
}
.home-view .home-directory {
transform: none;
pointer-events: auto;
visibility: visible;
}
.home-view #bottom-panel {
display: flex !important;
transform: translateY(110%);
pointer-events: none;
visibility: hidden;
}
html.view-transitioning .home-directory,
html.view-transitioning #bottom-panel {
transition: transform var(--dur-sheet-enter) var(--ease-emphasized-decelerate);
visibility: visible;
}
}
.record-ride-panel {
display: flex;
flex-direction: column;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-card-bottom);
padding-bottom: env(safe-area-inset-bottom, 0px);
max-height: calc(
100dvh
- var(--top-card-height)
- var(--waterline-safe-padding)
);
background: var(--card-surface);
border-radius: var(--radius-m) var(--radius-m) 0 0;
border-top: 1px solid var(--divider);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
overflow: hidden;
--record-ride-row-h: calc(
14px * var(--font-scale)
+ var(--footer-title-line)
+ max(calc(12px * var(--font-scale)), var(--footer-chevron-clearance))
+ 1px
);
transform: translateY(110%);
pointer-events: none;
visibility: hidden;
}
.record-ride-row {
padding-bottom: max(
calc(12px * var(--font-scale)),
var(--footer-chevron-clearance)
);
border-bottom: 1px solid var(--divider);
}
.record-ride-panel .bottom-panel-detail:not(.expanded) {
max-height: calc(
var(--record-ride-footer-h) - 1px - var(--record-ride-row-h)
);
padding: calc(var(--space-sm) * var(--font-scale)) 0;
}
@media (min-width: 768px) {
body.is-historical:not(.home-view) .record-ride-panel {
transform: none;
pointer-events: auto;
visibility: visible;
}
body.is-historical:not(.home-view) #bottom-panel {
transform: translateY(110%);
pointer-events: none;
visibility: hidden;
}
html.view-transitioning .record-ride-panel {
transition: transform var(--dur-sheet-enter) var(--ease-emphasized-decelerate);
visibility: visible;
}
}
html.mobile-scroll body.is-historical #bottom-panel {
display: none;
}
#mobile-sheet .record-ride-panel {
padding-bottom: 0;
position: relative;
inset: auto;
transform: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
margin: 0;
border-radius: 0;
border-top: none;
box-shadow: none;
height: auto;
max-height: none;
background: transparent;
}
#mobile-sheet .record-ride-panel .bottom-panel-detail {
max-height: none;
overflow: visible;
padding: calc(var(--space-sm) * var(--font-scale)) 0 var(--space-sm);
border-top-width: 0;
}
html.home-hero #bottom-panel,
html.home-hero #bottom-panel-backdrop,
html.home-hero #mobile-sheet,
html.home-hero .wind-compass-card,
html.home-hero .conditions-detail,
html.home-hero .unit-toggle-wrap,
html.home-hero .top-chips,
html.home-hero #spot-header {
visibility: hidden !important;
pointer-events: none !important;
}
.home-hero-panel { display: none; }
html.home-hero .home-hero-panel {
display: flex;
align-items: center;
position: fixed;
z-index: var(--z-card-bottom);
box-sizing: border-box;
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: var(--brand-panel-surface);
padding: var(--brand-panel-pad-block) var(--brand-panel-pad-inline);
pointer-events: auto;
}
.home-hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(var(--display-size) * var(--display-action-gap));
width: 100%;
}
.home-hero-title {
margin: 0;
max-width: var(--display-measure);
font-family: var(--font-family);
font-size: var(--display-size);
font-weight: 600;
line-height: var(--display-line-height);
letter-spacing: var(--display-tracking);
color: var(--text);
}
.home-hero-title span { display: block; }
.home-hero-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.home-hero-action {
font-size: var(--hero-action-size);
width: auto;
text-decoration: none;
white-space: nowrap;
}
a.home-hero-action.auth-card-submit {
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (orientation: landscape) and (min-width: 720px) {
html.home-hero .home-hero-panel {
top: 0;
right: 0;
bottom: 0;
width: var(--brand-panel-split);
padding-top: calc(var(--brand-panel-appbar-h) + var(--brand-panel-pad-block));
}
@media (min-height: 640px) {
html.home-hero .home-hero-content {
position: absolute;
left: var(--brand-panel-pad-inline);
right: var(--brand-panel-pad-inline);
top: calc(var(--crest-y, 33vh) - 0.16 * var(--display-size));
width: auto;
}
}
}
@media (orientation: portrait), (max-width: 719.98px) {
html.home-hero .home-hero-panel {
left: 0;
right: 0;
bottom: 0;
min-height: var(--brand-panel-stack-h);
padding-bottom: calc(var(--brand-panel-pad-block) + env(safe-area-inset-bottom, 0px));
}
html.home-hero .home-hero-panel {
align-items: flex-start;
padding-top: var(--display-size);
--display-size: calc(clamp(2.25rem, 7vw, 3.5rem) * var(--font-scale));
padding-inline: calc(var(--space-sm) * var(--font-scale));
}
}
@media (max-width: 599.98px) {
html.home-hero .home-hero-action { font-size: calc(0.9375rem * var(--font-scale)); }
}
.home-hero-panel:focus { outline: none; }
#particle-canvas:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -4px;
}
html.home-hero body.auth-card-open .top-bar,
html.home-hero body.auth-card-open .ruler-rail,
html.home-hero body.auth-card-open .unit-toggle-wrap,
html.home-hero body.auth-card-open .home-hero-panel,
html.home-hero body.auth-card-open .total-height-chip {
transform: none;
opacity: 1;
}
html.home-hero body.auth-card-open .home-hero-panel { pointer-events: none; }
html.home-hero body.auth-card-open .auth-overlay-backdrop {
background-color: var(--scrim-mobile);
animation: auth-scrim-in var(--scrim-fade) var(--scrim-ease);
}
html.home-hero .auth-overlay.is-closing .auth-overlay-backdrop {
animation: auth-scrim-out var(--scrim-fade) var(--scrim-ease) forwards;
}
html.home-hero #total-height-chip,
html.home-hero .wordmark {
pointer-events: none;
}
html.home-hero .wordmark[data-tooltip]:hover::after,
html.home-hero .wordmark[data-tooltip]:focus-visible::after,
html.home-hero #total-height-chip[data-tooltip]:hover::after {
content: none;
}
.wave-pause-hint {
position: fixed;
left: 50%;
bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%) translateY(4px);
z-index: var(--z-tooltip);
margin: 0;
padding: calc(8em / 14) calc(14em / 14);
border-radius: var(--radius-full);
background: var(--text);
color: var(--card-surface);
font-family: var(--font-family);
font-size: var(--ui-size);
font-weight: var(--ui-weight);
line-height: 1;
white-space: nowrap;
box-shadow: var(--elevation-card);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-short) var(--ease-standard),
transform var(--dur-short) var(--ease-standard);
}
#particle-canvas:focus-visible + .wave-pause-hint {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.wave-pause-hint { transition: none; }
}