/* Only the expanded desktop drawer and phone landscape receive these rules. */
.gauge-forecast-handle { position: fixed; z-index: 56; width: 44px; height: 88px; padding: 0 1px 0 0; display: flex; justify-content: flex-end; align-items: center; border: 0; background: transparent; color: var(--color-brand-bronze); font: inherit; font-size: 1rem; cursor: pointer; }
.gauge-forecast-handle::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0 auto; width: 12px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-right: 0; border-radius: 6px 0 0 6px; }
.gauge-forecast-handle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* Same 1px frame and colour as dashboard cards, without changing box geometry. */
body.desktop-ui:not(.phone-ui) #rijnpegels { box-shadow: inset 0 0 0 1px var(--color-border); }
/* Temporarily portalled to body: above both forecast controls (55/56), below
   existing gauge popovers (70) and native modal dialogs, outside rail clipping. */
body.desktop-ui:not(.phone-ui) #waarschuwingen.gauge-forecast-warning-motion { position: fixed; z-index: 57; left: var(--forecast-warning-left); top: var(--forecast-warning-top); width: var(--forecast-warning-width); height: var(--forecast-warning-height); right: auto; bottom: auto; max-height: none; transform: translateY(var(--forecast-warning-shift)); }
/* Keep the outgoing visual unit stable while its controller is already closed. */
body.desktop-ui:not(.phone-ui) #waarschuwingen.gauge-forecast-warning-motion #waarschuwingen-content { height: var(--forecast-warning-content-height) !important; opacity: var(--forecast-warning-content-opacity) !important; overflow-y: auto; }
body.desktop-ui:not(.phone-ui) #rijnpegels.gauge-forecast-open { position: fixed; z-index: 55; right: var(--forecast-right); top: var(--forecast-top); width: var(--forecast-width); height: var(--forecast-height); overflow-x: hidden; background: var(--color-surface); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--color-border), 0 6px 24px var(--color-shadow-detail); }
/* Let a profile-hidden card finish its existing close animation. */
body.desktop-ui:not(.phone-ui) #rijnpegels.gauge-forecast-open[hidden] { display: block !important; }
body.desktop-ui:not(.phone-ui) #rijnpegels.gauge-forecast-open > .card-heading, body.desktop-ui:not(.phone-ui) #rijnpegels.gauge-forecast-open .desktop-gauge-details { width: var(--forecast-base-width); }
body.desktop-ui:not(.phone-ui) #rijnpegels.gauge-forecast-open #rijnpegels-content { width: var(--forecast-content-width); }
body.desktop-ui:not(.phone-ui) #rijnpegels.gauge-forecast-open .phone-gauge-table { width: var(--forecast-table-width); }
body.desktop-ui:not(.phone-ui) #rijnpegels.gauge-forecast-open .phone-gauge-table tr > :first-child { width: auto; }
#rijnpegels:is(.gauge-forecast-open, .gauge-forecast-landscape) .phone-gauge-table { table-layout: fixed; }
.phone-ui #rijnpegels.gauge-forecast-landscape .phone-gauge-table tr { grid-template-columns: var(--forecast-columns, minmax(0, 48fr) minmax(0, 16fr) minmax(0, 16fr) minmax(0, 20fr)); }
.phone-ui #rijnpegels.gauge-forecast-landscape .phone-gauge-table > colgroup { display: none; }
.phone-ui #rijnpegels.gauge-forecast-landscape .phone-gauge-table tbody td.gauge-forecast-cell { flex-direction: row; align-items: center; }
#rijnpegels .gauge-forecast-cell, #rijnpegels .gauge-forecast-time { color: var(--color-text); white-space: nowrap; }
.gauge-forecast-time > span { display: block; }
body.desktop-ui:not(.phone-ui) .gauge-forecast-time > span { display: inline; }
body.desktop-ui:not(.phone-ui) .gauge-forecast-time > span + span { margin-inline-start: .2rem; }
.gauge-forecast-cell abbr { margin-inline-start: .2rem; font-size: .65em; text-decoration: none; }
.gauge-forecast-stale { margin-inline-start: .15rem; }
.gauge-forecast-note { flex: 0 0 auto; margin: .5rem 0 0; font-size: .65rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
/* Intrinsic measurements use the same font and cell padding as the real table. */
.gauge-forecast-probe { position: fixed !important; left: -100000px; top: 0; visibility: hidden; pointer-events: none; width: max-content !important; max-width: none !important; height: auto !important; display: table !important; table-layout: auto !important; }
.gauge-forecast-probe :is(thead, tbody) { display: table-row-group !important; width: auto !important; }
.gauge-forecast-probe tr { display: table-row !important; width: auto !important; }
.gauge-forecast-probe :is(th, td) { display: table-cell !important; width: auto !important; white-space: nowrap; }
.gauge-forecast-probe .phone-gauge-name { width: max-content !important; }