.display-page{align-items:stretch;width:100%;position:relative}.start-screen{justify-content:center;align-items:center;gap:var(--space-6);overflow-wrap:anywhere;flex-direction:column;flex:1;width:100%;display:flex}.start-screen[hidden],.tide-display[hidden],.display-topbar[hidden]{display:none}.start-mark{width:calc(var(--space-8) + var(--space-8));height:auto}.start-button,.start-secondary{cursor:pointer;border-radius:var(--radius-button);max-width:100%;padding:var(--space-3) var(--space-6);font-weight:var(--font-body-emphasis-weight);border:0}.start-button{color:var(--color-on-primary);background:var(--color-primary)}.start-message{min-height:var(--font-body-line-height);color:var(--color-text-secondary)}.start-choices{justify-content:center;gap:var(--space-2);flex-wrap:wrap;width:100%;display:flex}.start-secondary{color:var(--color-accent-text);background:var(--color-surface-sunken)}.start-secondary:disabled{cursor:default;color:var(--color-disabled-content);background:var(--color-disabled-container)}.start-button:focus-visible,.start-secondary:focus-visible{outline:var(--space-1) solid var(--color-accent-text);outline-offset:var(--space-1)}.tide-display{justify-content:center;align-items:center;gap:var(--space-4);flex-direction:column;flex:1;width:100%;min-width:0;display:flex}.tide-display h2{font-size:var(--font-station-title-size);line-height:var(--font-station-title-line-height);font-weight:var(--font-station-title-weight);margin:0}.tide-display h2:focus{outline:none}.display-controls{align-self:stretch;width:100%}.topbar{z-index:12;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);text-align:left;flex-wrap:wrap;display:flex;position:relative}.topbar-mark{width:var(--space-9);height:var(--space-9)}.topbar-name{font-size:var(--font-station-title-size);line-height:var(--font-station-title-line-height);font-weight:var(--font-station-title-weight)}.topbar-location{min-width:0;color:var(--color-text-secondary);font-size:var(--font-secondary-size);line-height:var(--font-secondary-line-height);overflow-wrap:anywhere;flex:1}.topbar-actions{align-items:center;gap:var(--space-2);margin-left:auto;display:flex}.topbar-actions .icon-button{justify-content:center;align-items:center;gap:var(--space-2);min-width:calc(var(--space-6) + var(--space-5));min-height:calc(var(--space-6) + var(--space-5));padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-button);background:var(--color-surface);color:var(--color-text-primary);font-size:var(--font-footnote-size);line-height:var(--font-footnote-line-height);cursor:pointer;text-decoration:none;display:inline-flex}.topbar-actions .icon-button:hover{background:var(--color-surface-sunken)}.topbar-actions svg{width:var(--space-6);height:var(--space-6);fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.topbar-actions [hidden]{display:none}:root:fullscreen .topbar-actions{display:none}@media (display-mode:fullscreen){.topbar-actions{display:none}}.display-settings{max-width:calc(100vw - var(--space-8));width:32rem;max-height:calc(100svh - var(--space-8));padding:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-text-primary);text-align:left;overflow:auto}.display-settings::backdrop{background:var(--color-scrim)}.settings-form{gap:var(--space-4);flex-direction:column;display:flex}.settings-form h2{font-size:var(--font-sheet-title-size);line-height:var(--font-sheet-title-line-height);font-weight:var(--font-sheet-title-weight);margin:0}.settings-units{gap:var(--space-4);flex-wrap:wrap;display:flex}.settings-units label{gap:var(--space-2);flex-direction:column;flex:1;min-width:8rem;display:flex}.settings-units select,.settings-footer button{min-height:calc(var(--space-6) + var(--space-5));padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-field);color:var(--color-text-primary);background:var(--color-surface)}.settings-note,.settings-feedback{font-size:var(--font-footnote-size);line-height:var(--font-footnote-line-height);color:var(--color-text-secondary);margin:0}.settings-feedback:empty{display:none}.settings-footer{justify-content:flex-end;gap:var(--space-3);display:flex}.settings-footer button{cursor:pointer}.settings-footer .settings-done{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-on-primary);font-weight:var(--font-body-emphasis-weight)}@media (width<=40rem){.topbar-actions .button-label{display:none}.topbar-location{flex-basis:100%;order:1}}.display-page[data-display-state=display]{padding:var(--space-4) var(--space-6);justify-content:flex-start}.tide-display{text-align:left;justify-content:flex-start;align-items:stretch}.tide-display>h2{text-align:left}.tide-graph{gap:var(--space-3);width:100%;min-width:0;display:grid}.graph-meta,.graph-footnote{color:var(--color-text-secondary);font-size:var(--font-footnote-size);line-height:var(--font-footnote-line-height)}.graph-meta{margin-top:calc(-1 * var(--space-2))}.graph-status:empty{display:none}.graph-status{padding:var(--space-3);border-radius:var(--radius-card);background:var(--color-banner-container);color:var(--color-on-banner);font-size:var(--font-footnote-size)}.graph-card{padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-separator);border-radius:var(--radius-card);margin:0}.graph-card h3{margin:0 0 var(--space-1);font-size:var(--font-footnote-size);line-height:var(--font-footnote-line-height);font-weight:var(--font-body-emphasis-weight);color:var(--color-text-secondary)}.graph-current{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.graph-current-value{font-size:var(--font-value-large-size);line-height:var(--font-value-large-line-height);font-weight:var(--font-value-large-weight);font-variant-numeric:tabular-nums}.graph-current-context{text-align:right;font-size:var(--font-secondary-size);line-height:var(--font-secondary-line-height)}.graph-events{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.graph-event-time{font-size:var(--font-value-size);line-height:var(--font-value-line-height);font-weight:var(--font-value-weight);font-variant-numeric:tabular-nums}.graph-event>p+p{margin-top:var(--space-1)}.graph-chart{padding:var(--space-3)}.graph-chart svg{width:100%;display:block;overflow:visible}.graph-chart figcaption{text-align:right;margin-top:var(--space-1)}.graph-axis{fill:var(--color-text-secondary);font:11px system-ui,sans-serif}.graph-event-label{fill:var(--color-text-primary);font:600 11px system-ui,sans-serif}.graph-grid{stroke:var(--chart-grid);stroke-width:1px}.graph-zero{stroke:var(--color-border);stroke-width:1px}.graph-curve{stroke:var(--chart-curve);stroke-width:2.5px;fill:none;stroke-linecap:round;stroke-linejoin:round}.graph-fill{fill:var(--chart-fill)}.graph-high{fill:var(--chart-curve);stroke:var(--color-surface);stroke-width:2px}.graph-low{fill:var(--color-surface);stroke:var(--chart-curve);stroke-width:2px}.graph-now-line{stroke:var(--chart-now-line);stroke-width:2px}.graph-now-dot{fill:var(--chart-now-line);stroke:var(--color-surface);stroke-width:2px}.graph-now-pill{fill:var(--chart-now-line)}.graph-now-label{fill:var(--color-on-accent);font:700 10px system-ui,sans-serif}@media (prefers-color-scheme:light){.graph-now-label{fill:var(--color-surface)}}.graph-table-section h3{margin:var(--space-2) 0 var(--space-2);font-size:var(--font-sheet-title-size)}.graph-table-scroll{max-width:100%}.graph-table-section table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--font-secondary-size);line-height:var(--font-secondary-line-height);table-layout:fixed;background:var(--color-surface);border:1px solid var(--color-separator);border-radius:var(--radius-card)}.graph-table-section th,.graph-table-section td{padding:var(--space-3);text-align:left;vertical-align:top;overflow-wrap:anywhere}.graph-table-section thead{color:var(--color-text-secondary);font-size:var(--font-footnote-size)}.graph-table-section tr+tr>*,.graph-table-section tbody tr:first-child>*{border-top:1px solid var(--color-separator)}.graph-table-section th:first-child{width:22%}.graph-table-section th:last-child{width:23%}.graph-table-section .graph-table-height{text-align:right;font-variant-numeric:tabular-nums}.graph-state{justify-content:center;align-items:center;gap:var(--space-4);text-align:center;flex-direction:column;min-height:200px;display:flex}.graph-refresh{justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.graph-retry{padding:var(--space-2) var(--space-3);color:var(--color-accent-text);border:1px solid var(--color-separator);border-radius:var(--radius-button);background:var(--color-surface);cursor:pointer;font-size:var(--font-footnote-size)}.graph-retry:disabled{cursor:wait;opacity:.65}.graph-spinner{border:3px solid var(--color-separator);border-top-color:var(--color-primary);border-radius:50%;width:28px;height:28px;animation:1s linear infinite graph-spin}.graph-sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@keyframes graph-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.graph-spinner{animation:none}}@media (width<=480px){.display-page[data-display-state=display],.graph-card{padding:var(--space-3)}.graph-current{align-items:flex-start}.graph-current-context{max-width:46%}.graph-table-section th,.graph-table-section td{padding:var(--space-2);font-size:var(--font-footnote-size)}}@media (width>=1000px){.tide-graph{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr))}.graph-meta,.graph-status,.graph-chart,.graph-table-section,.graph-refresh{grid-column:1/-1}.graph-meta{grid-row:1}.graph-status{grid-row:2}.graph-current,.graph-events{grid-row:3}.graph-chart{grid-row:4}.graph-table-section{grid-row:5}.graph-refresh{grid-row:6}.graph-table-section table{font-size:var(--font-secondary-size)}}.ocean-background-host{isolation:isolate}.ocean-background{z-index:-1;pointer-events:none;-webkit-user-select:none;user-select:none;--ocean-water-top:color-mix(in srgb, var(--chart-curve) 4%, var(--color-background));--ocean-water-bottom:color-mix(in srgb, var(--chart-curve) 2%, var(--color-background));--ocean-line:color-mix(in srgb, var(--chart-curve) 6%, var(--color-background));position:fixed;inset:0;overflow:hidden}.ocean-water{border-top:1px solid var(--ocean-line);background:linear-gradient(var(--ocean-water-top), var(--ocean-water-bottom));transform:translateY(var(--ocean-surface,51%));transition:transform var(--motion-standard) ease-in-out;position:absolute;inset:0}.ocean-background[data-state=neutral] .ocean-water{opacity:.5;border-top-color:#0000}.ocean-waves{fill:none;width:200%;height:6px;stroke:var(--ocean-line);stroke-width:1px;transform-box:border-box;display:none;position:absolute;top:-3px;left:0;overflow:visible}@media (prefers-reduced-motion:no-preference){.ocean-background[data-state=tide] .ocean-water{border-top-color:#0000}.ocean-background[data-state=tide] .ocean-waves{animation:36s linear infinite ocean-drift;display:block}.ocean-background[data-motion=paused] .ocean-waves{animation-play-state:paused}}@keyframes ocean-drift{0%{transform:translate(0)}to{transform:translate(-50%)}}@media (prefers-color-scheme:dark){.ocean-background{--ocean-water-top:color-mix(in srgb, var(--chart-curve) 6%, var(--color-background));--ocean-water-bottom:color-mix(in srgb, var(--chart-curve) 3%, var(--color-background));--ocean-line:color-mix(in srgb, var(--chart-curve) 12%, var(--color-background))}}@media (prefers-contrast:more),(forced-colors:active){.ocean-background{display:none}}@media (prefers-reduced-motion:reduce){.ocean-water{transition:none}}