/* Desktop presentation only. phone-ui includes both real phones and dev previews. */
body.desktop-ui:not(.phone-ui) #desktop-notices-dialog .desktop-notices-title-group { display: grid; grid-template-columns: max-content; flex: 0 0 auto; }
body.desktop-ui:not(.phone-ui) #desktop-notices-dialog .desktop-notices-subtitle { display: block; width: 0; min-width: 100%; height: auto; aspect-ratio: 300 / 18; overflow: hidden; }
body.desktop-ui:not(.phone-ui) #desktop-notices-dialog .desktop-notices-subtitle text { fill: var(--color-text-muted); font-family: inherit; font-size: 12px; text-transform: uppercase; }
.desktop-warning-toggle, .desktop-subtitle, .desktop-profile-count { display: none; }
@media (min-width: 44rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body.desktop-ui:not(.phone-ui) .page-width { width: calc(100% - 3rem); max-width: none; }
  body.desktop-ui:not(.phone-ui) > .site-header { flex: 0 0 auto; display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(12rem, 18rem) auto; grid-template-rows: auto auto; gap: .15rem 1rem; padding-block: .6rem .8rem; }
  body.desktop-ui:not(.phone-ui) .site-header .brand { grid-column: 1; grid-row: 1; width: 300px; height: 48px; }
  body.desktop-ui:not(.phone-ui) .desktop-subtitle { display: block; grid-column: 1; grid-row: 2; color: var(--color-accent-cyan); font-size: .7rem; }
  body.desktop-ui:not(.phone-ui) .desktop-header-status { grid-column: 2; grid-row: 1 / -1; align-self: center; text-align: right; min-width: 0; font-size: .72rem; color: var(--color-text-muted); }
  body.desktop-ui:not(.phone-ui) #dashboard-status { font-size: .76rem; }
  body.desktop-ui:not(.phone-ui) > .safety-bar { display: none; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls { grid-column: 3; grid-row: 1 / -1; display: grid; grid-template-columns: minmax(10rem, 16rem) auto auto; align-items: center; gap: .4rem .65rem; min-width: 0; }
  body.desktop-ui:not(.phone-ui) .route-control { grid-column: 1; grid-row: 1 / 3; max-width: 16rem; }
  body.desktop-ui:not(.phone-ui) .route-control > label { margin: 0; font-size: .65rem; color: var(--color-text-muted); }
  body.desktop-ui:not(.phone-ui) .route-control select { min-height: 32px; height: 32px; font-size: .76rem; padding: .35rem 1.8rem .35rem .6rem; border-radius: 3px; background: var(--color-surface); }
  body.desktop-ui:not(.phone-ui) .route-control select:hover { background: var(--color-hover-bg); }
  body.desktop-ui:not(.phone-ui) #route-description { font-size: .65rem; line-height: 1.3; max-width: 28ch; margin-top: .2rem; }
  body.desktop-ui:not(.phone-ui) .main-nav { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(2, auto); gap: .3rem; }
  body.desktop-ui:not(.phone-ui) .main-nav a, .desktop-ui .button-secondary { min-height: 32px; padding: .35rem .6rem; font-size: .76rem; border: 1px solid var(--color-border-strong); border-radius: 3px; background: var(--color-surface); }
  body.desktop-ui:not(.phone-ui) #settings-open { grid-column: 2; grid-row: 2; }
  body.desktop-ui:not(.phone-ui) .toolbar-actions { grid-column: 3; grid-row: 1 / 3; flex-direction: column; flex-wrap: nowrap; gap: .3rem; max-width: 11rem; }
  body.desktop-ui:not(.phone-ui) .toolbar-actions button { min-height: 36px; }
  body.desktop-ui:not(.phone-ui) .dashboard-heading, .desktop-ui .dashboard-toolbar, .desktop-ui #dashboard > .acquisition-note { display: none; }
  body.desktop-ui:not(.phone-ui) #dashboard { flex: 1 1 0; min-height: 0; padding-block: 0; }
  body.desktop-ui:not(.phone-ui) #dashboard-sections { display: none; }
  body.desktop-ui:not(.phone-ui) .desktop-workspace { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(20rem, 24vw, 28rem); gap: 1.25rem; }
  body.desktop-ui:not(.phone-ui) .desktop-card-area { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding-right: .35rem; padding-bottom: 1rem; scroll-behavior: smooth; }
  /* Left card-column scrollbar only; retain native dimensions and light styling. */
  html[data-theme="dark"] body.desktop-ui:not(.phone-ui) .desktop-card-area { scrollbar-color: var(--color-border) var(--color-bg); }
  @supports not (scrollbar-color: auto) {
    html[data-theme="dark"] body.desktop-ui:not(.phone-ui) .desktop-card-area::-webkit-scrollbar-track { background: var(--color-bg); }
    html[data-theme="dark"] body.desktop-ui:not(.phone-ui) .desktop-card-area::-webkit-scrollbar-thumb { background: var(--color-border); }
    html[data-theme="dark"] body.desktop-ui:not(.phone-ui) .desktop-card-area::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }
  }
  body.desktop-ui:not(.phone-ui) .desktop-card-area > .card { margin-bottom: 1.25rem; }
  body.desktop-ui:not(.phone-ui) #getij { border: 0; background: transparent; padding: 0; margin: 0 0 1.25rem; }
  body.desktop-ui:not(.phone-ui) #getij > .card-heading { margin-bottom: .5rem; font-size: .7rem; }
  body.desktop-ui:not(.phone-ui) #getij > .card-heading .eyebrow { display: none; }
  body.desktop-ui:not(.phone-ui) #tide-heading { font-size: .9rem; }
  body.desktop-ui:not(.phone-ui) #getij-content { container-type: inline-size; }
  body.desktop-ui:not(.phone-ui) .chart-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: stretch; }
  body.desktop-ui:not(.phone-ui) .chart-shell { background: var(--color-surface); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
  body.desktop-ui:not(.phone-ui) .chart-shell > h3, .desktop-ui .chart-shell > .tide-current-value, .desktop-ui .chart-shell > .tide-current-time { display: none; }
  body.desktop-ui:not(.phone-ui) .phone-tide-block > .phone-tide-name { display: block; color: var(--color-text); font-size: 1.1rem; margin-bottom: 1rem; }
  body.desktop-ui:not(.phone-ui) .phone-tide-block > .phone-readings { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: .6rem; margin-bottom: .75rem; }
  body.desktop-ui:not(.phone-ui) .phone-reading { display: grid; align-content: start; gap: .25rem; min-width: 0; font-size: .9rem; }
  body.desktop-ui:not(.phone-ui) .phone-reading .eyebrow { font-size: .65rem; color: var(--color-text-muted); margin: 0 0 .2rem; }
  body.desktop-ui:not(.phone-ui) .phone-reading .phone-value { color: var(--color-chart-main); font-size: clamp(1.25rem, 1.5vw, 1.75rem); line-height: 1.2; }
  body.desktop-ui:not(.phone-ui) .phone-reading .phone-value.water-chart-reading-restricted { color: var(--color-chart-passage); }
  body.desktop-ui:not(.phone-ui) .phone-reading-line { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
  body.desktop-ui:not(.phone-ui) .phone-reading-time, .desktop-ui .phone-reading small { flex-basis: 100%; font-size: .72rem; }
  body.desktop-ui:not(.phone-ui) .phone-reading > span { font-size: 1.1rem; color: var(--color-chart-main); }
  body.desktop-ui:not(.phone-ui) .phone-graph { margin-block: .75rem .4rem; }
  body.desktop-ui:not(.phone-ui) .phone-graph-surface { height: clamp(12rem, 20vh, 17rem); border: 0; border-radius: 0; }
  body.desktop-ui:not(.phone-ui) .phone-tide-footer { font-size: .65rem; }
  body.desktop-ui:not(.phone-ui) .desktop-rail { position: relative; min-width: 0; min-height: 0; border-radius: var(--radius); background: var(--color-surface); overflow: hidden; margin-bottom: 1rem; }
  body.desktop-ui:not(.phone-ui) #rijnpegels { height: 100%; overflow-y: auto; overscroll-behavior-y: contain; padding: 1rem 1rem 4.5rem; border: 0; background: transparent; }
  body.desktop-ui:not(.phone-ui) #rijnpegels .card-heading { margin-bottom: .8rem; align-items: center; }
  body.desktop-ui:not(.phone-ui) #rijnpegels .card-heading .eyebrow { display: none; }
  body.desktop-ui:not(.phone-ui) #gauges-heading { text-transform: uppercase; font-size: 1.2rem; }
  body.desktop-ui:not(.phone-ui) #rijnpegels-content > .phone-gauge-view { display: block; margin-top: 0; }
  body.desktop-ui:not(.phone-ui) .phone-gauge-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
  body.desktop-ui:not(.phone-ui) .phone-gauge-table tr > :first-child { width: 46%; text-align: left; }
  body.desktop-ui:not(.phone-ui) .phone-gauge-table th { font-weight: 400; }
  body.desktop-ui:not(.phone-ui) .phone-gauge-table th, .desktop-ui .phone-gauge-table td { padding: .2rem .3rem; text-align: right; overflow-wrap: normal; }
  body.desktop-ui:not(.phone-ui) .phone-gauge-name { width: 100%; min-height: 25px; text-align: left; border: 0; background: transparent; color: var(--color-text); padding: 0; font-size: inherit; }
  body.desktop-ui:not(.phone-ui) .phone-gauge-emphasis .phone-gauge-name { font-weight: 600; }
  body.desktop-ui:not(.phone-ui) .phone-gauge-table tr[data-severity] { background: color-mix(in srgb, var(--color-navigation-restriction) 16%, transparent); outline: 1px solid var(--color-navigation-restriction); outline-offset: -1px; }
  body.desktop-ui:not(.phone-ui) .phone-operation-flag { font-weight: 800; color: var(--color-warning); margin-right: .3rem; }
  body.desktop-ui:not(.phone-ui) tr[data-severity="Critical"] .phone-operation-flag { color: var(--color-critical-indicator); }
  body.desktop-ui:not(.phone-ui) .phone-marke { display: block; font-size: .6rem; color: var(--color-warning); }
  body.desktop-ui:not(.phone-ui) .phone-marke-2 { color: var(--color-critical-indicator); }
  body.desktop-ui:not(.phone-ui) tr[data-freshness="Stale"] td, .desktop-ui tr[data-freshness="Unknown"] td { color: var(--color-text-muted); }
  body.desktop-ui:not(.phone-ui) .phone-gauge-table td.gauge-delta-positive { color: var(--color-gauge-rise); }
  body.desktop-ui:not(.phone-ui) .phone-gauge-table td.gauge-delta-negative { color: var(--color-gauge-fall); }
  body.desktop-ui:not(.phone-ui) .phone-a11y { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.desktop-ui:not(.phone-ui) .phone-gauge-popover { display: block; position: fixed; z-index: 70; overflow-y: auto; padding: .8rem; background: var(--color-surface); border: 1px solid var(--color-accent-cyan); border-radius: 6px; box-shadow: 0 6px 24px var(--color-shadow-detail); }
  body.desktop-ui:not(.phone-ui) .phone-gauge-restriction { color: var(--color-navigation-restriction); }
  body.desktop-ui:not(.phone-ui) .desktop-gauge-details { margin-top: .75rem; }
  body.desktop-ui:not(.phone-ui) .desktop-gauge-details summary { min-height: 32px; padding-block: .35rem; font-size: .72rem; }
  body.desktop-ui:not(.phone-ui) .desktop-gauge-details .data-list { max-height: none; overflow: visible; }
  body.desktop-ui:not(.phone-ui) #waarschuwingen { position: absolute; bottom: 0; left: 0; right: 0; max-height: 100%; display: flex; flex-direction: column; padding: .6rem 1rem; background: var(--color-surface); border: 0; border-top: 1px solid var(--color-brand-bronze); border-radius: 0; box-shadow: 0 -8px 20px var(--color-shadow-detail); }
  body.desktop-ui:not(.phone-ui) #waarschuwingen > .card-heading { position: relative; flex: 0 0 auto; align-items: center; margin: 0; min-height: 42px; padding-right: 2rem; gap: .4rem; }
  body.desktop-ui:not(.phone-ui) #waarschuwingen .eyebrow { display: none; }
  body.desktop-ui:not(.phone-ui) #warnings-heading { text-transform: uppercase; font-size: clamp(.85rem, 1vw, 1.1rem); }
  body.desktop-ui:not(.phone-ui) #waarschuwingen > .card-heading > div { flex: 1 1 auto; }
  body.desktop-ui:not(.phone-ui) #waarschuwingen > .card-heading > .badge { font-size: .65rem; padding: .2rem .4rem; }
  body.desktop-ui:not(.phone-ui) .desktop-warning-toggle { display: block; position: absolute; inset: 0; width: 100%; border: 0; background: transparent; color: var(--color-brand-bronze); }
  body.desktop-ui:not(.phone-ui) .desktop-warning-toggle::after { content: "▴"; position: absolute; right: .1rem; top: 50%; transform: translateY(-50%); }
  body.desktop-ui:not(.phone-ui) #waarschuwingen[data-desktop-open="true"] .desktop-warning-toggle::after { content: "▾"; }
  body.desktop-ui:not(.phone-ui) #waarschuwingen-content { display: none; overflow-y: auto; min-height: 0; max-height: calc(100dvh - 14rem); padding-top: .5rem; overscroll-behavior-y: contain; }
  body.desktop-ui:not(.phone-ui) #waarschuwingen[data-desktop-open="true"] #waarschuwingen-content { display: block; }
  body.desktop-ui:not(.phone-ui) #waarschuwingen .data-list { gap: .4rem; }
  body.desktop-ui:not(.phone-ui) #waarschuwingen .data-item { border: 0; border-left: 3px solid var(--color-warning); border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; padding: .5rem .6rem; }
  body.desktop-ui:not(.phone-ui) #waarschuwingen .data-item.tone-danger { border-left-color: var(--color-critical); }
  body.desktop-ui:not(.phone-ui) #waarschuwingen .data-item h3 { font-size: .85rem; }
  body.desktop-ui:not(.phone-ui) #waarschuwingen .source-prose { font-size: .78rem; }
  body.desktop-ui:not(.phone-ui) > .site-footer { flex: 0 0 auto; padding-block: .2rem .35rem; font-size: .65rem; }

  /* Reflow within the same dashboard family on tablet/ECDIS-sized viewports. */
  @media (max-width: 79.999rem) {
    body.desktop-ui:not(.phone-ui) > .site-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; width: calc(100% - 3rem); }
    body.desktop-ui:not(.phone-ui) .site-header .brand { width: min(100%, 300px); }
    body.desktop-ui:not(.phone-ui) .desktop-header-status { grid-column: 2; grid-row: 1 / 3; }
    body.desktop-ui:not(.phone-ui) .desktop-header-controls { grid-column: 1 / -1; grid-row: 3; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); margin-top: .5rem; }
    body.desktop-ui:not(.phone-ui) .main-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.desktop-ui:not(.phone-ui) .toolbar-actions { max-width: none; }
    body.desktop-ui:not(.phone-ui) .desktop-workspace { grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; }
    body.desktop-ui:not(.phone-ui) .chart-shell { padding: .85rem; }
    body.desktop-ui:not(.phone-ui) .phone-reading > span { font-size: .95rem; }
  }
}
/* Second desktop migration: existing content lives in native application dialogs. */
@media (min-width: 44rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) > .site-header { grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 18rem) auto; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls { grid-template-columns: minmax(11rem, 16rem) max-content max-content max-content; justify-content: end; gap: .3rem .6rem; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls > .main-nav { display: none; }
  body.desktop-ui:not(.phone-ui) .desktop-navigation { grid-column: 2; grid-row: 1 / 3; display: grid; gap: .3rem; }
  body.desktop-ui:not(.phone-ui) #settings-open { grid-column: 3; grid-row: 1; }
  body.desktop-ui:not(.phone-ui) .toolbar-actions { grid-column: 4; grid-row: 1 / 3; }
  body.desktop-ui:not(.phone-ui) #retry-dashboard { min-height: 64px; }
  body.desktop-ui:not(.phone-ui) #route-description,
  body.desktop-ui:not(.phone-ui) > .site-footer,
  body.desktop-ui:not(.phone-ui) .desktop-gauge-details,
  body.desktop-ui:not(.phone-ui) .phone-tide-footer .source-line { display: none; }
  body.desktop-ui:not(.phone-ui) .desktop-subwindow .card { border: 0; padding: 0; background: transparent; }
  body.desktop-ui:not(.phone-ui) .desktop-subwindow .data-list { max-height: none; overflow: visible; }
  body.desktop-ui:not(.phone-ui) .desktop-subwindow > .dialog-content > details { margin-bottom: 1rem; }
  body.desktop-ui:not(.phone-ui) .desktop-subwindow > .dialog-content > details > summary { display: none; }
  body.desktop-ui:not(.phone-ui) .desktop-subwindow > .dialog-content > details p { margin-block: .6rem; font-size: .95rem; line-height: 1.5; }
  body.desktop-ui:not(.phone-ui) .desktop-subwindow #refresh-data { margin-top: 1rem; }
  body.desktop-ui:not(.phone-ui) .desktop-notice-target { outline: 2px solid var(--color-focus); outline-offset: -2px; }
  @media (max-width: 79.999rem) {
    body.desktop-ui:not(.phone-ui) > .site-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    body.desktop-ui:not(.phone-ui) .desktop-header-controls { grid-template-columns: minmax(11rem, 16rem) max-content max-content max-content; justify-content: end; }
  }
}
@media (min-width: 44rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) .desktop-clock { color: var(--color-text); font-size: 1rem; margin-bottom: .2rem; }
}
/* Scoped dashboard polish; all phone styling and chart/grid rules stay unchanged. */
@media (min-width: 44rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) .desktop-card-area > #mgd { display: none; }
  body.desktop-ui:not(.phone-ui) .desktop-header-status[data-compact="true"] #dashboard-status { display: none; }
  body.desktop-ui:not(.phone-ui) .desktop-header-status:not([data-compact="true"]) .desktop-updated { display: none; }
  body.desktop-ui:not(.phone-ui) .desktop-updated { color: var(--color-text-muted); font-size: .7rem; line-height: 1.3; }
  body.desktop-ui:not(.phone-ui) #bronstatus > .card-heading { align-items: center; gap: .4rem .8rem; }
  body.desktop-ui:not(.phone-ui) #bronstatus > .card-heading > div { flex: 1 1 12rem; }
  body.desktop-ui:not(.phone-ui) #bronstatus > .card-heading > #refresh-data { margin: 0; flex: 0 1 auto; }
  body.desktop-ui:not(.phone-ui) #bronstatus .source-list { display: block; }
  body.desktop-ui:not(.phone-ui) #bronstatus .source-item { padding-block: .6rem; gap: .2rem .6rem; }
  body.desktop-ui:not(.phone-ui) #bronstatus .source-heading { gap: .25rem .8rem; }
  body.desktop-ui:not(.phone-ui) #bronstatus .source-heading strong { flex: 1 1 16rem; }
  body.desktop-ui:not(.phone-ui) #bronstatus .source-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
  body.desktop-ui:not(.phone-ui) dialog { box-sizing: border-box; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
  body.desktop-ui:not(.phone-ui) .desktop-notice-target { animation: desktop-notice-pulse 1s ease-in-out 2; }
}
@keyframes desktop-notice-pulse {
  0%, 100% { outline-color: color-mix(in srgb, var(--color-focus) 35%, transparent); }
  50% { outline-color: var(--color-focus); }
}
@media (prefers-reduced-motion: reduce) {
  body.desktop-ui:not(.phone-ui) .desktop-card-area { scroll-behavior: auto; }
  body.desktop-ui:not(.phone-ui) .desktop-notice-target { animation: none; }
}
/* One visual contract for all primary dashboard dialogs, including configuration. */
@media (min-width: 44rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) .desktop-subwindow {
    width: min(58rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem);
    box-sizing: border-box; overflow: hidden; padding: .65rem; overscroll-behavior: contain;
    background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong);
    border-radius: var(--radius); box-shadow: 0 8px 32px var(--color-shadow-detail);
    scrollbar-color: var(--color-border-strong) var(--color-surface); font-size: .95rem; line-height: 1.5;
  }
  body.desktop-ui:not(.phone-ui) .desktop-subwindow::backdrop { background: var(--color-backdrop-dialog); }
  body.desktop-ui:not(.phone-ui) .desktop-subwindow > .dialog-content { max-height: calc(100dvh - 3.5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: .4rem clamp(.6rem, 2vw, 1.1rem); scrollbar-color: var(--color-border-strong) var(--color-surface); }
  body.desktop-ui:not(.phone-ui) .desktop-subwindow > .card-heading {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; background: var(--color-surface); padding-bottom: .6rem; border-bottom: 1px solid var(--color-border);
  }
  body.desktop-ui:not(.phone-ui) #waarschuwingen-content { display: block; height: 0; padding-top: 0; overflow: hidden; opacity: 0; scrollbar-gutter: stable; }
  body.desktop-ui:not(.phone-ui) #waarschuwingen[data-desktop-open="true"] #waarschuwingen-content { display: block; overflow-y: auto; }
  body.desktop-ui:not(.phone-ui) #waarschuwingen-content > :first-child { margin-top: .5rem; }
}
/* Profiles select content; gauges have a dedicated sidebar role. */
@media (min-width: 44rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) .desktop-profile-count { display: none; }
  body.desktop-ui:not(.phone-ui) #getij > .card-heading > .badge:not(.desktop-profile-count) { display: none; }
  body.desktop-ui:not(.phone-ui) .desktop-workspace { display: grid; position: relative; grid-template-columns: minmax(0, 1fr); gap: 1rem; --rail-width: clamp(18rem, 24vw, 28rem); }
  body.desktop-ui:not(.phone-ui) .desktop-workspace[data-gauges="true"] { grid-template-columns: minmax(0, 1fr) var(--rail-width); }
  body.desktop-ui:not(.phone-ui) .desktop-card-area { height: 100%; padding-bottom: 5rem; }
  body.desktop-ui:not(.phone-ui) .desktop-rail { position: absolute; right: 0; bottom: 1rem; height: calc(100% - 1rem); width: var(--rail-width); margin: 0; background: transparent; overflow: visible; pointer-events: none; }
  body.desktop-ui:not(.phone-ui) .desktop-workspace[data-gauges="true"] .desktop-rail { position: relative; right: auto; bottom: auto; grid-column: 2; width: auto; margin-bottom: 1rem; height: calc(100% - 1rem); background: var(--color-surface); overflow: hidden; }
  body.desktop-ui:not(.phone-ui) .desktop-rail > #rijnpegels { pointer-events: auto; }
  body.desktop-ui:not(.phone-ui) #waarschuwingen { pointer-events: auto; border-radius: var(--radius); }
  body.desktop-ui:not(.phone-ui) #waarschuwingen-content { max-height: none; flex: 0 1 auto; }
  body.desktop-ui:not(.phone-ui) .chart-grid { align-items: stretch; grid-auto-rows: auto; }
  body.desktop-ui:not(.phone-ui) .chart-shell { min-height: min-content; }
  body.desktop-ui:not(.phone-ui) .phone-graph-surface { min-height: 12rem; flex-shrink: 0; }
  body.desktop-ui:not(.phone-ui) .desktop-tide-metadata { display: none; }
  body.desktop-ui:not(.phone-ui) .dashboard-profile-placeholder > h3 { display: block; }
  body.desktop-ui:not(.phone-ui) .chart-grid > .card { grid-column: auto; grid-row: auto; margin: 0; min-width: 0; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); }
  body.desktop-ui:not(.phone-ui) .chart-grid > .card .data-list { max-height: none; }
}

@media (min-width: 44rem) and (min-height: 44rem) {
 body.desktop-ui:not(.phone-ui) #getij > .card-heading { display: none; }
 body.desktop-ui:not(.phone-ui) .route-control { display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; }
 body.desktop-ui:not(.phone-ui) .route-control > label { grid-column: 1 / -1; }
 body.desktop-ui:not(.phone-ui) .desktop-card-area[data-empty="true"] { padding-bottom: 0; }
 body.desktop-ui:not(.phone-ui) .desktop-card-area[data-empty="true"] #getij { height: 100%; margin: 0; }
 body.desktop-ui:not(.phone-ui) .desktop-card-area[data-empty="true"] #getij-content { height: 100%; display: grid; place-items: center; }
 body.desktop-ui:not(.phone-ui) .desktop-card-area[data-empty="true"] .chart-grid { display: none; }
 .desktop-empty-icon { margin: 0; width: min(55%, 18rem); height: auto; opacity: .18; pointer-events: none; user-select: none; }
}

/* Compact control sizing is shared; narrow dashboards reflow instead of stretching. */
@media (min-width: 44rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) .desktop-header-status { line-height: 1.3; }
  body.desktop-ui:not(.phone-ui) .desktop-clock { margin-bottom: .15rem; font-variant-numeric: tabular-nums; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .button { white-space: nowrap; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .toolbar-actions { align-items: flex-start; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .route-control { align-self: center; justify-self: end; }
  body.desktop-ui:not(.phone-ui) #rijnpegels > .card-heading > .badge { display: none; }
  @media (max-width: 45.999rem) {
    body.desktop-ui:not(.phone-ui) .desktop-header-controls { grid-template-columns: max-content max-content max-content; row-gap: .5rem; }
    body.desktop-ui:not(.phone-ui) .desktop-header-controls .route-control { grid-column: 1 / -1; grid-row: 1; width: 16rem; max-width: 100%; }
    body.desktop-ui:not(.phone-ui) .desktop-navigation { grid-column: 1; grid-row: 2 / 4; }
    body.desktop-ui:not(.phone-ui) #settings-open { grid-column: 2; grid-row: 2; }
    body.desktop-ui:not(.phone-ui) .toolbar-actions { grid-column: 3; grid-row: 2 / 4; }
  }
}

/* One stable, right-oriented instrument toolbar; phone mode is excluded. */
body.desktop-ui:not(.phone-ui) .desktop-header-controls #desktop-info-open.desktop-icon-button,
body.desktop-ui:not(.phone-ui) .desktop-header-controls #settings-open.desktop-icon-button,
body.desktop-ui:not(.phone-ui) .desktop-header-controls #retry-dashboard.desktop-icon-button { position: relative; display: inline-grid; place-items: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; box-sizing: border-box; }
/* Extend vertically only: adjacent controls keep their own horizontal hit areas. */
body.desktop-ui:not(.phone-ui) .desktop-header-controls .desktop-icon-button::before { content: ""; position: absolute; inset: -6px 0; }
body.desktop-ui:not(.phone-ui) .desktop-header-controls .desktop-icon-button > svg { width: 20px; height: 20px; pointer-events: none; }
@media (min-width: 44rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) > .site-header { grid-template-columns: minmax(12rem, 1fr) auto; grid-template-rows: auto auto auto; }
  body.desktop-ui:not(.phone-ui) .desktop-header-status { grid-column: 2; grid-row: 1 / 3; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: nowrap; align-items: center; justify-content: safe end; justify-self: end; width: max-content; max-width: 100%; gap: .35rem; margin-top: .35rem; padding: .3rem; overflow-x: auto; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls > * { flex: 0 0 auto; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .route-control { width: 10rem; max-width: 10rem; }
  body.desktop-ui:not(.phone-ui) .route-control > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .desktop-navigation { display: flex; flex-wrap: nowrap; gap: .35rem; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls #retry-dashboard { min-height: 32px; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .toolbar-actions button { min-height: 32px; }
  body.desktop-ui:not(.phone-ui) .desktop-updated { width: 8rem; margin: 0; white-space: nowrap; font-size: .7rem; text-align: right; }
  body.desktop-ui:not(.phone-ui) .desktop-control-size { display: block; width: max-content; height: 0; visibility: hidden; white-space: nowrap; overflow: hidden; pointer-events: none; }
}
@media (min-width: 100rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) > .site-header { grid-template-columns: minmax(12rem, 1fr) auto; grid-template-rows: auto auto; }
  body.desktop-ui:not(.phone-ui) .desktop-header-status { grid-column: 2; grid-row: 1; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls { grid-column: 2; grid-row: 2; margin-top: 0; }
}

/* Center actual controls independently of the adjacent update annotation.
   Narrow scrollable toolbars retain their existing presentation. */
@media (min-width: 60rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) > .site-header { grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: 48px auto auto; }
  body.desktop-ui:not(.phone-ui) .desktop-header-status { grid-column: 1 / -1; grid-row: 4; text-align: right; }
  body.desktop-ui:not(.phone-ui) .desktop-header-status[data-compact="true"] { display: none; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls { position: relative; grid-column: 1 / -1; grid-row: 3; justify-self: center; overflow: visible; margin-top: .15rem; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .route-control { width: 6rem; max-width: 6rem; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .desktop-updated { position: absolute; left: 100%; margin-left: .5rem; text-align: left; }
}
@media (min-width: 84rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) > .site-header { grid-template-rows: 48px auto; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls { grid-column: 1 / -1; grid-row: 1 / 3; margin-top: 0; }
}

/* Compact one-row ECDIS: retain text and height, recover only horizontal space. */
@media (min-width: 64rem) and (max-width: 83.999rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) > .site-header { grid-template-rows: 48px auto; column-gap: .1rem; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls { grid-column: 2; grid-row: 1 / 3; justify-self: start; gap: .2rem; padding-inline: 0; margin-top: 0; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .desktop-navigation { gap: .2rem; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .button { padding-inline: .125rem; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .desktop-updated { width: 4.25rem; margin-left: .125rem; white-space: normal; }
}

/* Align the instrument row with the logo alone, excluding its subtitle. */
@media (min-width: 64rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) .desktop-header-controls { grid-row: 1; }
}

/* Keep narrow scrollable toolbars unchanged; larger headers share two-line status. */
.desktop-updated-label, .desktop-updated-time { display: none; }
@media (min-width: 64rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .desktop-updated { width: 4.25rem; text-align: center; line-height: 1.2; }
  body.desktop-ui:not(.phone-ui) .desktop-updated-inline { display: none; }
  body.desktop-ui:not(.phone-ui) .desktop-updated-label,
  body.desktop-ui:not(.phone-ui) .desktop-updated-time { display: block; white-space: nowrap; }
}

/* Intrinsic sizing copies are absent from phone layout and accessibility. */
.phone-desktop-reserve { display: none; }
.desktop-passage-slot, .desktop-next-passage-slot { display: contents; }
.tide-bridge-reference { font-size: .72rem; line-height: 1.4; }
.tide-bridge-reference p { margin-block: .2rem; }
@media (min-width: 44rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) .chart-shell { padding: .75rem .85rem; }
  body.desktop-ui:not(.phone-ui) .phone-tide-block > .phone-tide-name { margin-block: 0 .45rem; }
  body.desktop-ui:not(.phone-ui) .phone-tide-block > .phone-readings { gap: .45rem; margin-bottom: .3rem; }
  body.desktop-ui:not(.phone-ui) .phone-reading { gap: .12rem; }
  body.desktop-ui:not(.phone-ui) .phone-reading-line { font-variant-numeric: tabular-nums; }
  body.desktop-ui:not(.phone-ui) .phone-reading:first-child { grid-template-rows: auto auto auto; }
  body.desktop-ui:not(.phone-ui) .phone-reading:first-child > .eyebrow { grid-row: 1; grid-column: 1; }
  body.desktop-ui:not(.phone-ui) .phone-reading:first-child > .phone-reading-line { grid-row: 2; grid-column: 1; }
  body.desktop-ui:not(.phone-ui) .phone-reading:first-child > small { grid-row: 3; grid-column: 1; line-height: 1.35; }
  body.desktop-ui:not(.phone-ui) .phone-reading:first-child > small[hidden] { display: block; visibility: hidden; }
  body.desktop-ui:not(.phone-ui) .phone-desktop-reserve { display: block; visibility: hidden; pointer-events: none; }
  body.desktop-ui:not(.phone-ui) .phone-reading-line.phone-desktop-reserve { display: flex; }
  body.desktop-ui:not(.phone-ui) .phone-graph { margin-block: .3rem .2rem; }
  body.desktop-ui:not(.phone-ui) .phone-graph-surface { height: clamp(10.75rem, 17vh, 14rem); min-height: 10.75rem; }
  body.desktop-ui:not(.phone-ui) .phone-graph-legend { margin-block: .2rem; }
  body.desktop-ui:not(.phone-ui) .desktop-passage-slot,
  body.desktop-ui:not(.phone-ui) .desktop-next-passage-slot { display: grid; }
  body.desktop-ui:not(.phone-ui) .desktop-passage-slot > *,
  body.desktop-ui:not(.phone-ui) .desktop-next-passage-slot > * { grid-area: 1 / 1; line-height: 1.35; }
  body.desktop-ui:not(.phone-ui) .desktop-next-passage-slot > [hidden] { display: block; visibility: hidden; }
  body.desktop-ui:not(.phone-ui) .tide-bridge-reference { margin-bottom: .35rem; }
  body.desktop-ui:not(.phone-ui) .phone-tide-block > .tide-bridge-reference { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; }
  body.desktop-ui:not(.phone-ui) .tide-bridge-reference > p { margin: 0; }
  body.desktop-ui:not(.phone-ui) .tide-bridge-details { position: absolute; top: 100%; left: 0; width: min(28rem, 100%); z-index: 2; padding: .6rem; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 6px; box-shadow: 0 6px 24px var(--color-shadow-detail); }
}

.phone-tide-landscape .tide-bridge-reference { display: none; }
/* Phone reading-line display rules must never expose sizing copies. */
.phone-ui .phone-desktop-reserve { display: none; }

/* Size columns from the available card area, not from the viewport.
   28.5rem leaves room for three readings, timestamps and the chart legend.
   Cap the grid at three columns, or two for a balanced four-card dashboard. */
@media (min-width: 64rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) .desktop-workspace { --rail-width: clamp(19rem, 24vw, 28rem); }
  body.desktop-ui:not(.phone-ui) .chart-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(28.5rem, calc((100% - 2.2rem) / 3))), 1fr));
  }
  body.desktop-ui:not(.phone-ui) .chart-grid[data-card-count="4"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(28.5rem, calc((100% - 1.1rem) / 2))), 1fr));
  }
  body.desktop-ui:not(.phone-ui) #getij,
  body.desktop-ui:not(.phone-ui) #getij-content,
  body.desktop-ui:not(.phone-ui) .phone-tide-block,
  body.desktop-ui:not(.phone-ui) .phone-graph { min-width: 0; }
  body.desktop-ui:not(.phone-ui) .phone-tide-block > .phone-readings { grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)); }
  body.desktop-ui:not(.phone-ui) .phone-reading-line > *,
  body.desktop-ui:not(.phone-ui) .desktop-passage-slot > *,
  body.desktop-ui:not(.phone-ui) .desktop-next-passage-slot > * { min-width: 0; overflow-wrap: anywhere; }
}
/* Visual route order only; the existing phone station order/state is untouched. */
@media (min-width: 64rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) .chart-shell[data-station-id="suurhoffbrug"] { order: -1; }
}

/* Header-only banner geometry. Crop the PNG's alpha margins, not its artwork.
   Source 2172x724; visible bounds (alpha >=16): x49..2123, y210..434. */
@media (min-width: 44rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) .desktop-banner { grid-column: 1; grid-row: 1 / 3; width: 18rem; min-width: 0; align-self: start; }
  body.desktop-ui:not(.phone-ui) .desktop-banner .brand { width: 100%; height: auto; aspect-ratio: 2074 / 224; }
  body.desktop-ui:not(.phone-ui) .desktop-banner .phone-brand-banner { width: calc(100% * 2172 / 2074); left: calc(-100% * 49 / 2074); top: -93.75%; height: auto; transform: none; }
  body.desktop-ui:not(.phone-ui) .desktop-banner .desktop-subtitle { display: block; width: 100%; height: auto; margin: 2px 0 0; aspect-ratio: 300 / 18; transform: none; letter-spacing: normal; overflow: hidden; }
  body.desktop-ui:not(.phone-ui) .desktop-subtitle text { fill: var(--color-accent-cyan); font-family: inherit; font-size: 12px; }
}
/* A bounded banner yields room without shrinking labels or changing dashboard mode.
   Below 52rem the existing narrow dashboard header remains in place. */
@media (min-width: 52rem) and (max-width: 83.999rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) > .site-header { grid-template-columns: clamp(10rem, calc(100vw - 42rem), 18rem) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0; }
  body.desktop-ui:not(.phone-ui) .desktop-banner { width: 100%; grid-row: 1; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls { position: relative; grid-column: 2; grid-row: 1; align-self: start; justify-self: center; width: max-content; max-width: none; flex-wrap: nowrap; overflow: visible; gap: .35rem; padding: 0; margin: 0; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .route-control { width: 6rem; max-width: 6rem; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .desktop-navigation { gap: .35rem; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .button { padding-inline: .35rem; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .desktop-icon-button { padding: 0; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls .desktop-updated { position: absolute; left: 100%; width: 4.25rem; margin: 0 0 0 .35rem; text-align: center; line-height: 1.2; white-space: normal; }
  body.desktop-ui:not(.phone-ui) .desktop-updated-inline { display: none; }
  body.desktop-ui:not(.phone-ui) .desktop-updated-label, body.desktop-ui:not(.phone-ui) .desktop-updated-time { display: block; white-space: nowrap; }
  body.desktop-ui:not(.phone-ui) .desktop-header-status { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 84rem) and (min-height: 44rem) {
  body.desktop-ui:not(.phone-ui) > .site-header { grid-template-columns: 18rem minmax(0, 1fr); column-gap: 0; }
  body.desktop-ui:not(.phone-ui) .desktop-header-controls { grid-column: 2; grid-row: 1; align-self: start; justify-self: center; padding-block: 0; }
}

/* Source acquisition keeps its own action; match the existing compact icon family. */
body.desktop-ui:not(.phone-ui) .desktop-subwindow #refresh-data.source-refresh-icon { position: relative; width: 32px; min-width: 32px; height: 32px; min-height: 32px; margin-top: 0; }
body.desktop-ui:not(.phone-ui) .desktop-subwindow #refresh-data.source-refresh-icon::before { content: ""; position: absolute; inset: -6px 0; }

/* Info alignment only: override the generic card-heading div flex growth. */
body.desktop-ui:not(.phone-ui) #desktop-about-dialog > .card-heading { flex-wrap: nowrap; }
body.desktop-ui:not(.phone-ui) #desktop-about-dialog > .card-heading > .release-window-actions { flex: 0 0 auto; margin-left: auto; justify-content: flex-end; }
/* The source badge is appended after refresh at render time; order visually only. */
body.desktop-ui:not(.phone-ui) #bronstatus > .card-heading { flex-wrap: nowrap; }
body.desktop-ui:not(.phone-ui) #bronstatus > .card-heading > div { order: 0; }
body.desktop-ui:not(.phone-ui) #bronstatus > .card-heading > .badge { order: 1; flex: 0 0 auto; }
body.desktop-ui:not(.phone-ui) #bronstatus > .card-heading > #refresh-data { order: 2; }