:root {
  color-scheme: var(--native-color-scheme);
  --radius: 14px;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, select, summary, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Immediate press feedback without changing geometry, selection or focus rings. */
:is(button, select, summary, a):active:not(:disabled) { filter: brightness(.85); }
button, select, summary { cursor: pointer; }
button:disabled, select:disabled { cursor: default; opacity: .7; }
a { color: inherit; text-underline-offset: .25em; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 650; line-height: 1.2; letter-spacing: -.025em; }
h2 { font-size: 1.3rem; font-weight: 650; color: var(--color-brand-bronze); line-height: 1.3; }
h3 { font-size: 1rem; font-weight: 600; }
p, h1, h2, h3, a, label, span { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }
.page-width { width: min(100% - 2rem, 112rem); margin-inline: auto; }
.muted, .control-note { color: var(--color-text-muted); }
.chart-caption { color: var(--color-chart-label); }
#rijnpegels .gauge-delta-positive { color: var(--color-gauge-rise); }
#rijnpegels .gauge-delta-negative { color: var(--color-gauge-fall); }
.gauge-vgd-block { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: .6rem; font-size: .72rem; font-variant-numeric: tabular-nums; }
.gauge-vgd-block th, .gauge-vgd-block td { padding: .3rem .12rem; text-align: center; border: 1px solid var(--color-border); overflow-wrap: anywhere; }
.gauge-vgd-block th { color: var(--color-text-muted); font-weight: 600; }
.accent { color: var(--color-accent-cyan); }
.eyebrow { color: var(--color-text-muted); text-transform: uppercase; font-size: .7rem; letter-spacing: .13em; margin-bottom: .4rem; font-weight: 600; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 20; padding: .8rem; background: var(--color-accent-cyan); color: var(--color-bg); transform: translateY(-200%); border-radius: 6px; }
.skip-link:focus { transform: translateY(0); }

.site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding-block: 1.1rem; }
.brand { display: flex; align-items: center; gap: .65rem; min-width: 0; text-decoration: none; }
/* Crop only the existing PNG's transparent margins inside the original brand cell. */
body:not(.phone-ui) .brand { position: relative; display: block; width: min(100%, 320px); height: 56px; overflow: hidden; }
body:not(.phone-ui) .brand .phone-brand-banner { display: block; position: absolute; top: 50%; left: 0; width: 100%; height: auto; max-height: none; transform: translateY(-44.475%); }
.main-nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.main-nav a { display: grid; place-items: center; min-height: 44px; padding: .5rem; text-decoration: none; background: var(--color-surface); border-radius: 7px; font-size: .85rem; }
.button { min-height: 44px; border: 1px solid var(--color-border); border-radius: 8px; padding: .55rem .85rem; font-weight: 600; max-width: 100%; }
.button-secondary { background: var(--color-surface); color: var(--color-text); }
.safety-bar { position: sticky; top: 0; z-index: 5; background: var(--color-warning-bg); border-block: 1px solid var(--color-warning-border); }
.safety-content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .2rem 1rem; padding-block: .4rem; font-size: .8rem; }
.safety-content > span { display: flex; align-items: center; gap: .6rem; flex: 1 1 14rem; }
.safety-content a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-warning); }
.status-dot { width: 8px; height: 8px; flex: 0 0 8px; background: var(--color-warning); border-radius: 50%; }

main { padding-block: 1.8rem; }
.dashboard-heading { display: grid; gap: 1.5rem; margin-bottom: 1.6rem; }
.dashboard-heading h1 + p { margin-top: .75rem; max-width: 65ch; font-size: .9rem; }
.route-control { min-width: 0; }
label { display: grid; gap: .45rem; font-size: .85rem; font-weight: 600; min-width: 0; }
.route-control > label { margin-bottom: .4rem; }
select, input { width: 100%; min-width: 0; min-height: 48px; padding: .6rem .75rem; border: 1px solid var(--color-border-strong); border-radius: 8px; background: var(--color-surface-alt); color: var(--color-text); }
select { padding-right: 1.8rem; text-overflow: ellipsis; }
.control-note { font-size: .78rem; margin-top: .5rem; font-weight: 400; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.dashboard-grid > *, .chart-grid > *, .placeholder-grid > * { min-width: 0; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: clamp(1rem, 2vw, 1.5rem); scroll-margin-top: 8rem; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; }
.card-heading > div { min-width: 0; flex: 1 1 10rem; }
.badge { color: var(--color-text-muted); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 999px; padding: .25rem .65rem; font-size: .7rem; line-height: 1.5; }
.badge-amber { color: var(--color-warning); border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.warnings-card { border-color: var(--color-warning-border); border-left: 4px solid var(--color-warning); }
.warning-placeholder { display: flex; gap: .85rem; align-items: flex-start; }
.warning-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: var(--color-warning-bg-strong); color: var(--color-warning); font-weight: 800; }
.warning-placeholder p { color: var(--color-text-muted); margin-top: .3rem; font-size: .9rem; }
.section-details { border-top: 1px solid var(--color-border); margin-top: 1.2rem; }
.section-details summary { min-height: 48px; padding-block: .75rem; color: var(--color-accent-cyan); font-size: .82rem; }
.section-details p { font-size: .85rem; color: var(--color-text-muted); padding: .2rem 0 .6rem; }
.chart-grid, .placeholder-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.chart-shell { padding: 1rem; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 10px; }
.chart-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .35rem .7rem; }
.chart-heading span, .chart-caption { font-size: .73rem; color: var(--color-chart-label); }
.chart-placeholder { min-height: 12rem; aspect-ratio: 1.6; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .5rem; padding: 1rem; margin-block: 1rem; border: 1px dashed var(--color-border-placeholder); border-radius: 8px; }
.chart-placeholder strong { font-size: .9rem; font-weight: 500; }
.chart-placeholder p { font-size: .8rem; max-width: 28ch; color: var(--color-chart-label); }
.placeholder-symbol { font-size: 2rem; color: var(--color-accent-cyan); line-height: 1; font-weight: 400; }
.empty-state { display: grid; justify-items: start; align-content: center; gap: .85rem; min-height: 14rem; padding: 1rem; border: 1px dashed var(--color-border-placeholder); border-radius: 9px; background: var(--color-surface-alt); }
.empty-state.compact { min-height: 8rem; }
.empty-state p, .placeholder-tile p { font-size: .87rem; color: var(--color-text-muted); max-width: 55ch; }
.placeholder-tile { background: var(--color-surface-alt); padding: 1rem; border: 1px solid var(--color-border); border-radius: 9px; }
.placeholder-tile p { margin-block: .5rem .9rem; }
.text-status { font-size: .75rem; color: var(--color-text-muted); }
.source-list { list-style: none; padding: 0; margin: 0; }
.source-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .6rem; padding-block: .8rem; border-bottom: 1px solid var(--color-border); font-size: .8rem; }
.source-list li:last-child { border-bottom: 0; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; padding-block: 1rem 2rem; font-size: .75rem; color: var(--color-text-muted); }

dialog { width: min(42rem, calc(100% - 1.5rem)); max-width: calc(100% - 1.5rem); max-height: calc(100dvh - 1.5rem); margin: auto; padding: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); overflow-y: auto; }
dialog::backdrop { background: var(--color-backdrop-dialog); }
body:has(dialog[open]) { overflow: hidden; }
.dialog-content { padding: clamp(1rem, 4vw, 1.75rem); }
.dialog-content .card-heading { align-items: center; }
.dialog-content .card-heading form { margin: 0; }
#settings-status { margin-block: 1rem; color: var(--color-text-muted); font-size: .85rem; }
.settings-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
input[readonly] { color: var(--color-text-muted); }
fieldset { min-width: 0; margin: 1.5rem 0 1rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: 9px; }
legend { padding-inline: .4rem; color: var(--color-brand-bronze); font-size: .9rem; }
.noscript-note { padding-block: 1rem; color: var(--color-warning); }

/* Data views keep the existing dashboard breakpoints and natural reading order. */
[hidden] { display: none !important; }
/* Local mobile preference is resolved before the first visible phone presentation. */
html[data-phone-initializing] body { visibility: hidden; }
.profile-manager > label { display: block; margin-top: .75rem; }
.profile-manager > input, .profile-manager > select { width: 100%; }
.profile-card-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .5rem; }
.profile-card-choices label { display: flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--color-text); }
.profile-card-choices input { width: auto; flex: 0 0 auto; accent-color: var(--color-accent-cyan); }
.profile-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .75rem; }
.dashboard-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.dashboard-toolbar > p { flex: 1 1 18rem; font-size: .85rem; color: var(--color-text-muted); }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.toolbar-actions, .dashboard-toolbar > *, .source-item > * { min-width: 0; max-width: 100%; }
.source-item > .facts, .source-item > .section-details { flex-basis: 100%; }
.acquisition-note { margin-bottom: 1rem; }
.acquisition-note:empty { display: none; }
.section-content, .data-list, .data-item, .item-heading, .facts, .source-item { min-width: 0; }
.section-content > * + * { margin-top: 1rem; }
.data-list { display: grid; gap: .85rem; }
.data-item { padding: 1rem; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 9px; scroll-margin-top: 9rem; }
.data-item > * + * { margin-top: .7rem; }
.data-item .data-item { padding: .75rem; }
.item-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .55rem; }
.item-heading h3 { flex: 1 1 9rem; }
.measurement { font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 650; font-variant-numeric: tabular-nums; margin-top: .7rem; overflow-wrap: anywhere; }
.facts { display: grid; gap: .5rem; font-size: .82rem; margin-block: .8rem; }
.fact-row { display: flex; flex-wrap: wrap; gap: .15rem .75rem; min-width: 0; }
.fact-row dt { flex: 1 1 8rem; color: var(--color-text-muted); }
.fact-row dd { flex: 1 1 9rem; margin: 0; }
.facts dt, .facts dd, .schedule-item, .source-prose, .source-item strong { overflow-wrap: anywhere; min-width: 0; }
.source-prose { white-space: pre-wrap; font-size: .9rem; }
.state-message { padding: .85rem; border: 1px solid var(--color-border); border-radius: 8px; font-size: .85rem; color: var(--color-text-muted); background: var(--color-surface-alt); }
.tone-danger { border-color: var(--color-critical-border); }
.badge.tone-danger, .state-message.tone-danger { color: var(--color-critical); background: var(--color-critical-bg); }
.tone-caution { border-color: var(--color-warning-border-strong); }
.badge.tone-caution, .state-message.tone-caution { color: var(--color-warning); background: var(--color-warning-bg-alt); }
.safety-bar[data-tone="danger"] { background: var(--color-critical-bg); border-color: var(--color-critical-border); }
.safety-bar[data-tone="danger"] .status-dot { background: var(--color-critical); }
.safety-bar[data-tone="neutral"] { background: var(--color-surface-alt); border-color: var(--color-border); }
.safety-bar[data-tone="neutral"] .status-dot { background: var(--color-text-muted); }
.data-item[tabindex="-1"]:focus { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.data-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: .5rem; color: var(--color-accent-cyan); max-width: 100%; }
.data-item button { white-space: normal; text-align: left; }
.schedule-item { padding-block: .75rem; border-bottom: 1px solid var(--color-border); }
.schedule-item h4 { margin: 0; font-size: .95rem; }
.source-list .source-item { align-content: start; align-items: baseline; }
.source-heading { display: flex; flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; }
.source-heading strong { flex: 1 1 auto; }
.source-time { margin-left: auto; color: var(--color-text-muted); }
.source-origin { font-weight: normal; color: var(--color-text-muted); }
.source-list .source-special { outline: 1px solid var(--color-source-cache-border); outline-offset: -1px; padding-inline: .5rem; }
.source-item > .control-note { flex-basis: 100%; margin-top: .25rem; }
.source-item > .section-details { border-top: 0; margin-top: 0; }

/* One information block; keep the heading intact and all body text equally readable. */
#phone-about > p { font-size: .95rem; font-weight: 400; line-height: 1.5; color: var(--color-text); overflow-wrap: anywhere; }
.chart-shell .facts { margin-top: 1rem; }

/* Natural document order stays intact: warnings always precede the data sections. */
@media (min-width: 48rem) {
  .page-width { width: min(100% - 3rem, 112rem); }
  .main-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-heading { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); align-items: start; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .warnings-card, .tide-card, .infrastructure-card { grid-column: 1 / -1; }
  .chart-grid, .placeholder-grid, .settings-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gauges-card .data-list { max-height: 48rem; overflow-y: auto; scrollbar-gutter: stable; padding: .3rem; }
}

@media (min-width: 80rem) {
  .site-header { grid-template-columns: minmax(14rem, 1fr) auto auto; gap: 2rem; }
  .main-nav { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; }
  .main-nav a { background: transparent; padding-inline: 1rem; }
  .dashboard-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .warnings-card { grid-column: 1 / -1; }
  .tide-card { grid-column: span 6; }
  .gauges-card, .mgd-card { grid-column: span 3; }
  .infrastructure-card, .notices-card { grid-column: span 6; }
  .sources-card { grid-column: 1 / -1; }
  .source-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5rem; }
  .source-list li { min-width: 0; }
  .infrastructure-card > .section-content > .data-list,
  .notices-card > .section-content > .data-list { max-height: 60rem; overflow-y: auto; scrollbar-gutter: stable; padding: .3rem; }
}

@media (min-width: 110rem) {
  .dashboard-grid { gap: 1.5rem; }
  .source-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Hover only decorates controls; information is always available via click/tap. */
@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover, .button-secondary:hover:not(:disabled) { background: var(--color-hover-bg); color: var(--color-accent-cyan); }
  .section-details summary:hover { color: var(--color-text); }
  .safety-content a:hover { color: var(--color-text); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Shared opaque header, separate inset body scroll viewport. */
dialog.modal-frame { padding: .65rem; overflow: hidden; }
dialog.modal-frame[open] { display: flex; flex-direction: column; }
dialog.modal-frame > .card-heading { flex: 0 0 auto; margin: 0; padding: .4rem .75rem .65rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
dialog.modal-frame > .dialog-content { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: .75rem; }
.configuration-actions { display: flex; align-items: center; gap: .4rem; }
.configuration-actions form { margin: 0; }

.card-heading > .configuration-actions { flex: 0 0 auto; margin-left: auto; }

/* One language picker shared by desktop and phone configuration. */
.configuration-language-field { display: grid; gap: .35rem; }
#configuration-languages { display: flex; gap: .65rem; }
#configuration-languages .button { position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 64px; min-height: 44px; padding: .55rem .85rem; }
#configuration-languages .button::before { content: ""; position: absolute; inset: 4px; border-radius: 2px; z-index: -1; }
#configuration-languages .button[aria-pressed="true"] { border-color: var(--color-accent-cyan); box-shadow: 0 0 0 1px var(--color-accent-cyan); }
.configuration-language-label { padding: .1rem .3rem; color: var(--color-flag-nl-white); background: color-mix(in srgb, var(--color-flag-de-black) 75%, var(--color-flag-nl-white)); border-radius: 2px; font-weight: 700; }
#configuration-languages [data-language="nl"]::before { background: linear-gradient(var(--color-flag-nl-red) 0 33.333%, var(--color-flag-nl-white) 33.333% 66.667%, var(--color-flag-nl-blue) 66.667%); }
#configuration-languages [data-language="de"]::before { background: linear-gradient(var(--color-flag-de-black) 0 33.333%, var(--color-flag-de-red) 33.333% 66.667%, var(--color-flag-de-gold) 66.667%); }

/* Configuration only: retain the approved Theme label/control rhythm. */
#settings-dialog { --configuration-field-gap: .45rem; }
#settings-dialog label, #settings-dialog .configuration-language-field { gap: var(--configuration-field-gap); }
#settings-dialog .profile-manager > label { margin-bottom: var(--configuration-field-gap); }
#settings-dialog .profile-card-choices { row-gap: 0; }
#settings-dialog .profile-card-choices label { gap: .5rem; }
#settings-dialog label[for="start-card"] { margin-top: 1.25rem; }
#settings-dialog #settings-status:empty { display: none; }

/* Release indicators share one state and never reserve additional geometry. */
.release-indicator-anchor { position: relative; }
.release-unseen-dot { position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-bronze); pointer-events: none; }
.release-unseen-dot[hidden] { display: none; }
.release-version > .release-unseen-dot { right: -9px; }
.release-history-entry > .release-unseen-dot { top: 5px; right: 5px; }
.release-history-view[hidden] { display: none; }
.release-history-view > section { margin-top: 1.5rem; }
.release-history-view p { font-size: .95rem; font-weight: 400; line-height: 1.5; color: var(--color-text); }
.release-history-view > h2 { margin-top: 1rem; }

/* Info navigation occupies one stable slot below the persistent version row. */
.release-info-actions { display: grid; grid-template-columns: max-content; align-items: start; }
.release-info-actions > button { grid-area: 1 / 1; width: 100%; }
.release-window-actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; margin-left: auto; }
#refresh-data.source-refresh-icon { display: inline-grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; flex: 0 0 auto; }
#refresh-data.source-refresh-icon > svg { width: 20px; height: 20px; pointer-events: none; }
#phone-about .release-info-actions { grid-template-columns: minmax(0, 1fr); width: min(100%, 15rem); }