/*
 * History and Weather pages (src/ui/pages/history/, src/ui/pages/weather/)
 * and their sheets (src/ui/sheets/history/, src/ui/sheets/weather/).
 *
 * Same rules as pages.css: tokens only, transform and opacity are the only
 * animated properties (press feedback), charts are static. The colour
 * steps of the heatmap and their text colours are chosen per theme so
 * every value in a cell reaches 4.5:1 (measured: night 4.77..10.0, day
 * 4.68..11.8).
 */
@layer tokens {
  :root,
  :root[data-theme="night"] {
    --heat-1: #2b3a47;
    --heat-2: #385167;
    --heat-3: #466c8c;
    --heat-4: #578cb9;
    --heat-5: #6db5f2;
    --heat-text-1: var(--text-primary);
    --heat-text-2: var(--text-primary);
    --heat-text-3: var(--text-primary);
    --heat-text-4: #05111d;
    --heat-text-5: #05111d;
    --evaporation: #c9a36b;
    --establishment-fill: #3f6f97;
  }

  :root[data-theme="day"] {
    --heat-1: #c4d4e2;
    --heat-2: #a1bed7;
    --heat-3: #79a6ca;
    --heat-4: #4988ba;
    --heat-5: #0b62a6;
    --heat-text-1: var(--text-primary);
    --heat-text-2: var(--text-primary);
    --heat-text-3: var(--text-primary);
    --heat-text-4: var(--text-primary);
    --heat-text-5: #ffffff;
    --evaporation: #a8742a;
    --establishment-fill: #79a6ca;
  }
}

@layer pages {
  /* ------------------------------------------------------------------
     Page head: title and the page's choices (sticky on the kiosk)
     ------------------------------------------------------------------ */
  .page-history,
  .page-weather {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .history-head {
    position: sticky;
    top: calc(-1 * var(--space-1));
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 56px;
    background: var(--surface-0);
  }

  /* A head without controls (Weather) scrolls away with the page. */
  .page-weather .history-head {
    position: static;
  }

  /* A card a link brings into view (ui/reveal.js, e.g. "Füllstand" from
     Today's cistern) lands under the sticky head (its 56 px), not behind
     it. */
  .page-history .history-card {
    scroll-margin-top: 56px;
  }

  .history-title {
    flex: none;
    padding-left: var(--space-1);
    font-size: var(--type-title2-size);
    line-height: var(--type-title2-line);
    letter-spacing: var(--type-title2-tracking);
    font-weight: var(--weight-semibold);
  }

  .history-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
  }

  .history-range {
    width: 336px;
  }

  .history-unit {
    width: 136px;
  }

  .history-segmented.is-compact {
    flex: none;
  }

  .history-segmented.is-compact .segmented-option {
    padding: 0 var(--space-3);
  }

  /* ------------------------------------------------------------------
     Cards of both pages
     ------------------------------------------------------------------ */
  .history-card,
  .weather-page-card {
    min-width: 0;
  }

  /* A head that does not fit its card's width wraps: the control or the period moves under the title, on every
     width. Kept on one line, the kiosk's "Füllstand" (a headline since the type audit of 2026-10-10) pushed its
     info button under "24 h / 7 Tage / 28 Tage" (a tap chose "24 h"), and "Fill level" broke into two lines. */
  .history-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 32px;
  }

  .history-card-period,
  .weather-asof {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
    white-space: nowrap;
  }

  .weather-asof[data-stale="true"] {
    color: var(--warning);
  }

  .history-message {
    padding: var(--space-6) 0;
    color: var(--text-secondary);
    text-align: center;
  }

  .history-note {
    margin-top: var(--space-2);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  .history-note.is-warning {
    color: var(--warning);
  }

  /* Figures: a quiet label over a value (water, run time, per day, last). */
  .history-figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-2);
  }

  .history-figure {
    min-width: 0;
  }

  .history-figure dt {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  .history-figure dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
  }

  .history-figure-value {
    overflow: hidden;
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-line);
    letter-spacing: var(--type-headline-tracking);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .history-figure-sub {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
    white-space: nowrap;
  }

  /* ------------------------------------------------------------------
     History: heatmap (zone × day), one subgrid row per zone
     ------------------------------------------------------------------ */
  /* Rows are touch targets: 48 px on the kiosk (44 px on phones), so the
     page scrolls rather than the rows shrink (Stephan, 2026-10-06, E7). */
  .heatmap-card {
    /* 48 px, and a finger's size on the screen at the display size's smaller step (--touch-min). */
    --heat-row: max(48px, var(--touch-min));
    --heat-cell-min: max(48px, var(--touch-min));
    --heat-name: minmax(112px, 164px);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .heatmap-card .history-figures {
    margin-top: var(--space-1);
  }

  .heatmap-scroller,
  .season-scroller {
    position: relative;
  }

  .heatmap-scroller {
    margin: var(--space-2) calc(-1 * var(--space-4)) 0;
    padding: 0 var(--space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  /* The scroller clips: the focus ring goes inside the cell or row. */
  .heatmap-scroller :focus-visible {
    outline-offset: -2px;
  }

  .heatmap-grid {
    display: grid;
    grid-template-columns: var(--heat-name) repeat(var(--heat-days), minmax(var(--heat-cell-min), 1fr)) minmax(68px, auto);
    gap: 2px;
    min-width: min-content;
  }

  .heatmap-grid.is-dense {
    --heat-cell-min: 18px;
    gap: 2px 1px;
  }

  .heatmap-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: stretch;
  }

  .heatmap-row.is-head {
    align-items: end;
    padding-bottom: 2px;
  }

  /* Longer periods: the whole row is one button (the days are too narrow to tap). */
  .heatmap-row.is-target {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
  }

  .heatmap-row.is-target.is-pressed .heatmap-cell,
  .heatmap-row.is-target.is-pressed .heatmap-name {
    opacity: 0.7;
  }

  /* The empty corner covers the day heads that scroll under it (phones). */
  .heatmap-row.is-head > .heatmap-name {
    align-self: stretch;
  }

  .heatmap-name {
    position: sticky;
    left: calc(-1 * var(--space-4));
    z-index: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    margin-left: calc(-1 * var(--space-4));
    padding: 0 var(--space-2) 0 var(--space-4);
    background: var(--surface-1);
    white-space: nowrap;
    font-variant-numeric: normal;
  }

  /* The ellipsis works on a block inside the flex cell, not on the cell itself. */
  .heatmap-name-text,
  .season-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Days or months hidden on the left (phones): a fade at the name column says so. */
  .heatmap-name::after,
  .season-name::after {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    bottom: 0;
    width: 8px;
    background: linear-gradient(to right, var(--surface-1), transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) ease;
  }

  [data-hidden-start="true"] .heatmap-name::after,
  [data-hidden-start="true"] .season-name::after {
    opacity: 1;
  }

  .heatmap-row[data-muted="true"] .heatmap-name {
    color: var(--text-tertiary);
  }

  .heatmap-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    font-size: var(--type-caption-size);
    line-height: 16px;
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  .heatmap-day[data-today="true"] {
    color: var(--accent);
    font-weight: var(--weight-semibold);
  }

  .heatmap-day-top:empty::before {
    content: "\00a0";
  }

  /* Dense: the month name stands over its first day and may run into the next columns. */
  .is-dense .heatmap-day {
    align-items: flex-start;
  }

  .is-dense .heatmap-day-top {
    white-space: nowrap;
  }

  .is-dense .heatmap-day-number {
    align-self: center;
  }

  .heatmap-cell {
    display: grid;
    place-items: center;
    min-width: 0;
    height: var(--heat-row);
    padding: 0;
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
  }

  .heatmap-cell[data-step="1"] { background: var(--heat-1); color: var(--heat-text-1); }
  .heatmap-cell[data-step="2"] { background: var(--heat-2); color: var(--heat-text-2); }
  .heatmap-cell[data-step="3"] { background: var(--heat-3); color: var(--heat-text-3); }
  .heatmap-cell[data-step="4"] { background: var(--heat-4); color: var(--heat-text-4); }
  .heatmap-cell[data-step="5"] { background: var(--heat-5); color: var(--heat-text-5); }

  .heatmap-row[data-muted="true"] .heatmap-cell[data-step="0"] {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--hairline);
  }

  /* A new week starts with a little more air. */
  .heatmap-cell.is-week-start,
  .heatmap-day.is-week-start {
    margin-left: 2px;
  }

  .heatmap-value {
    overflow: hidden;
    white-space: nowrap;
  }

  .heatmap-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: var(--space-2);
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }

  .heatmap-total.is-head {
    align-items: flex-end;
    font-size: var(--type-caption-size);
    line-height: 16px;
    letter-spacing: var(--type-caption-tracking);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
  }

  /* Rain over the zones (heatmap-card.js, season-card.js; Stephan 2026-10-09):
     a bar per day or month in the rain's colour, the millimetres on it. Not a
     target: shorter than the zone rows. Static, nothing moves. */
  .heatmap-rain,
  .season-rain {
    position: relative;
    display: grid;
    place-items: end center;
    min-width: 0;
    height: 36px;
    overflow: hidden;
    border-radius: var(--radius-xs);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
  }

  .heatmap-rain.is-week-start {
    margin-left: 2px;
  }

  .heatmap-rain-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--rain, 0) * 100%);
    border-radius: 3px 3px 0 0;
    background: var(--wx-drop);
    opacity: 0.32;
  }

  [data-wet="true"] > .heatmap-rain-bar {
    min-height: 3px;
  }

  .heatmap-rain-value {
    position: relative;
    padding-bottom: 3px;
    white-space: nowrap;
  }

  .heatmap-total.is-rain,
  .season-total.is-rain {
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
  }

  .heatmap-row.is-rain .heatmap-name,
  .season-row.is-rain .season-name {
    color: var(--text-secondary);
  }

  /* ------------------------------------------------------------------
     History: events, fill level, leak test, season
     ------------------------------------------------------------------ */
  .history-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
  }

  .history-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .history-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
  }

  .page-history[data-range="season"] .history-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-history[data-range="season"] .history-col-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .event-days {
    margin-top: var(--space-1);
  }

  .event-day + .event-day {
    margin-top: var(--space-4);
  }

  /* 28 days are about a hundred rows: days out of view skip layout and paint. */
  .event-day {
    content-visibility: auto;
    contain-intrinsic-size: auto 240px;
  }

  /* The day's litres stand over the rows' litres (chevron column and its gap to the right). */
  .event-day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 2px;
    padding-right: calc(18px + var(--space-2));
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
  }

  .event-day-total {
    font-weight: var(--weight-regular);
    white-space: nowrap;
  }

  .event-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* One row per event: the icon in a small rounded square, centred to the
     row; then name and litres, under them one secondary line. The row
     reaches 8 px into the card's padding so its press area and focus ring
     have room; the text stays on the card's grid. */
  .event-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: center;
    width: calc(100% + 16px);
    margin: 0 -8px;
    padding: 0 8px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-align: left;
  }

  .event-glyph {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-secondary);
  }

  .event-row.is-compact .event-glyph {
    background: transparent;
    color: var(--text-tertiary);
  }

  .event-row[data-tone="warning"] .event-glyph {
    background: var(--surface-warning-strong);
    color: var(--warning);
  }

  .event-row[data-tone="critical"] .event-glyph {
    background: color-mix(in srgb, var(--danger) 16%, var(--surface-1));
    color: var(--danger);
  }

  .event-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    grid-template-areas:
      "name value chevron"
      "line line chevron";
    column-gap: var(--space-2);
    align-content: center;
    align-items: baseline;
    min-width: 0;
    min-height: 60px;
    padding: 9px 0;
  }

  /* Separators start at the text, not under the icons. */
  .event-item + .event-item .event-main {
    border-top: 1px solid var(--hairline);
  }

  .event-name {
    grid-area: name;
    min-width: 0;
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-line);
    letter-spacing: var(--type-headline-tracking);
    font-weight: var(--weight-medium);
    font-variant-numeric: normal;
    overflow-wrap: anywhere;
  }

  .event-value {
    grid-area: value;
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-line);
    letter-spacing: var(--type-headline-tracking);
    text-align: right;
    white-space: nowrap;
  }

  .event-line {
    grid-area: line;
    min-width: 0;
    color: var(--text-secondary);
  }

  .event-row[data-tone="warning"] .event-line {
    color: var(--warning);
  }

  .event-row[data-tone="critical"] .event-line {
    color: var(--danger);
  }

  .event-chevron {
    grid-area: chevron;
    align-self: center;
    color: var(--text-tertiary);
  }

  /* A watering run's zones open in place (events-card.js): its chevron
     turns, transform only. */
  .event-row[aria-expanded] .event-chevron {
    transition: transform var(--duration-base) var(--ease-out);
  }

  .event-row[aria-expanded="true"] .event-chevron {
    transform: rotate(180deg);
  }

  /* The zones under their run, from the text column on (their hairlines
     run to the edge like the rows'); each zone's litres stand in the
     column of the run's litres, before the chevron's column, and add up to
     them. One grid for all zones (subgrid), so the run times stand in one
     column too. No height animation (Pi GPU): the zones fade in, opacity
     only, and the rows below move at once. */
  .event-zone-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: var(--space-3);
    margin: 0;
    padding: 0 0 var(--space-2) calc(32px + var(--space-3));
    list-style: none;
    animation: event-zones-in var(--duration-base) ease-out;
  }

  .event-zone-list[hidden] {
    display: none;
  }

  @keyframes event-zones-in {
    from {
      opacity: 0;
    }
  }

  .event-zone {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
    padding: 7px 0;
    border-top: 1px solid var(--hairline);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    letter-spacing: var(--type-body-tracking);
  }

  .event-zone-name {
    min-width: 0;
    font-variant-numeric: normal;
    overflow-wrap: anywhere;
  }

  .event-zone-time {
    color: var(--text-secondary);
    text-align: right;
    white-space: nowrap;
  }

  .event-zone-value {
    padding-right: calc(18px + var(--space-2));
    text-align: right;
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    .event-row[aria-expanded] .event-chevron {
      transition: none;
    }

    .event-zone-list {
      animation: none;
    }
  }

  /* What is done and only noted: one quiet line, as high as a touch target. */
  .event-row.is-compact .event-main {
    grid-template-areas: "name name chevron";
    align-items: center;
    min-height: var(--touch-min);
    padding: 4px 0;
  }

  .event-row.is-compact .event-name {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    letter-spacing: var(--type-body-tracking);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
  }

  .day-run-time {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-line);
    letter-spacing: var(--type-headline-tracking);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
  }

  .event-icon {
    display: grid;
    margin-top: 2px;
    color: var(--text-secondary);
  }

  .day-run-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .event-badge {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    font-weight: var(--weight-medium);
    color: var(--warning);
    white-space: nowrap;
  }

  .day-run[data-tone="critical"] .event-badge {
    color: var(--danger);
  }

  /* Fill level */
  .level-chart {
    --plot-height: 150px;
    margin: var(--space-3) 0 0;
  }

  .level-frame {
    margin-top: 0;
  }

  .level-area {
    fill: var(--accent);
    opacity: 0.14;
  }

  .level-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .level-reserve {
    stroke: var(--text-tertiary);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
  }

  .level-reserve-label {
    position: absolute;
    right: var(--space-1);
    padding-bottom: 2px;
    transform: translateY(-100%);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
    white-space: nowrap;
    pointer-events: none;
  }

  .level-lane {
    position: relative;
    height: 12px;
    margin-top: var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
  }

  .level-refill {
    position: absolute;
    top: 2px;
    bottom: 2px;
    border-radius: 2px;
    background: var(--accent);
  }

  .level-refill.is-cancelled {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--accent);
  }

  .level-refill.is-legend {
    position: static;
    display: inline-block;
    width: 16px;
    height: 8px;
  }

  .level-legend {
    margin-left: 56px;
  }

  /* Inflow and outflow side by side, "Tiefster Stand" on a row of its own under them, its time whole and
     beside its value (Stephan 2026-10-11: in a third of the kiosk's card, 112 px, "Donnerstag 06:05" and
     its chevron need 144 px and broke into "Donnerstag / 06:05"; "Wednesday 06:05" as long). */
  .cistern-history-card .history-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-3);
  }

  .cistern-history-card .history-figure[data-figure="lowest"] {
    grid-column: 1 / -1;
  }

  .cistern-history-card .history-figure[data-figure="lowest"] .history-figure-sub {
    white-space: nowrap;
  }

  /* The figures' values keep the phone's headline size, outside the kiosk's half step (tokens.css; in
     the kiosk's 112 px columns of three figures "about 2,345 L" was cut at 18 px, measured 2026-10-10). */
  .cistern-history-card .history-figure-value {
    font-size: var(--type-headline-compact-size);
    line-height: var(--type-headline-compact-line);
  }

  /* Leak-test nights */
  .leak-headline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-weight: var(--weight-medium);
  }

  .leak-headline[data-tone="ok"] .meaning-icon {
    color: var(--success);
  }

  .leak-headline[data-tone="critical"] {
    color: var(--danger);
  }

  .leak-chart {
    margin-top: var(--space-3);
  }

  .leak-strip {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    /* With the plot's 4 px over it a touch target, also at the display size's smaller step. */
    height: max(44px, calc(var(--touch-min) - 4px));
    padding-bottom: 2px;
    border-bottom: 1px solid var(--hairline);
  }

  .leak-night {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex: 1 1 0;
    height: 100%;
  }

  .leak-bar {
    display: block;
    width: 100%;
    height: calc(var(--night-height, 0) * 100%);
    border-radius: 2px;
    background: var(--success);
    opacity: 0.55;
  }

  .leak-night[data-result="leak"] .leak-bar {
    background: var(--danger);
    opacity: 1;
  }

  .leak-night[data-result="invalid"] .leak-bar {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--text-tertiary);
    opacity: 1;
  }

  .leak-night[data-result="none"] .leak-bar,
  .leak-night[data-result="pending"] .leak-bar {
    height: 4px;
    background: var(--surface-3);
    opacity: 1;
  }

  .leak-axis {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-1);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  /* Season */
  .season-unit {
    margin-top: var(--space-4);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  .season-bars {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-1);
  }

  .season-bar {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .season-bar-value,
  .season-bar-label {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    text-align: center;
    white-space: nowrap;
  }

  .season-bar-value {
    color: var(--text-secondary);
  }

  .season-bar-value:empty::before {
    content: "\00a0";
  }

  .season-bar-label {
    margin-top: var(--space-1);
    color: var(--text-secondary);
  }

  .season-bar[data-current="true"] .season-bar-label {
    color: var(--accent);
    font-weight: var(--weight-semibold);
  }

  .season-bar-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 120px;
    border-bottom: 1px solid var(--text-tertiary);
  }

  .season-bar-fill {
    display: flex;
    width: 100%;
    height: calc(var(--bar, 0) * 100%);
    min-height: 0;
  }

  .season-stack {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    overflow: hidden;
    border-radius: 3px 3px 0 0;
  }

  .season-segment {
    display: block;
    flex: 1 1 0;
    min-height: 0;
    background: var(--accent);
  }

  .season-segment[data-kind="establishment"] {
    background: var(--establishment-fill);
  }

  .season-segment[data-kind="manual"] {
    background: var(--text-secondary);
  }

  .season-segment[data-kind="other"] {
    background: var(--text-tertiary);
  }

  .season-segment.is-legend {
    display: inline-block;
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 3px;
  }

  .season-scroller {
    margin: var(--space-4) calc(-1 * var(--space-4)) 0;
    padding: 0 var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .season-grid {
    display: grid;
    grid-template-columns: minmax(112px, 164px) repeat(var(--season-months), minmax(52px, 1fr)) minmax(72px, auto);
    gap: 2px;
    min-width: min-content;
  }

  .season-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  .season-name {
    position: sticky;
    left: calc(-1 * var(--space-4));
    z-index: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    margin-left: calc(-1 * var(--space-4));
    padding: 0 var(--space-2) 0 var(--space-4);
    background: var(--surface-1);
    white-space: nowrap;
    font-variant-numeric: normal;
  }

  .season-row[data-muted="true"] .season-name {
    color: var(--text-tertiary);
  }

  .season-month,
  .season-total.is-head {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    text-align: center;
    color: var(--text-secondary);
  }

  .season-month[data-current="true"] {
    color: var(--accent);
    font-weight: var(--weight-semibold);
  }

  .season-cell {
    display: grid;
    place-items: center;
    height: 32px;
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    font-weight: var(--weight-medium);
  }

  .season-cell[data-step="1"] { background: var(--heat-1); color: var(--heat-text-1); }
  .season-cell[data-step="2"] { background: var(--heat-2); color: var(--heat-text-2); }
  .season-cell[data-step="3"] { background: var(--heat-3); color: var(--heat-text-3); }
  .season-cell[data-step="4"] { background: var(--heat-4); color: var(--heat-text-4); }
  .season-cell[data-step="5"] { background: var(--heat-5); color: var(--heat-text-5); }

  .season-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: var(--space-2);
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }

  .season-total.is-head {
    justify-content: flex-end;
    text-align: right;
  }

  /* ------------------------------------------------------------------
     History sheets: one zone's day, one event
     ------------------------------------------------------------------ */
  .day-nav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
  }

  .day-nav-title {
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-line);
    letter-spacing: var(--type-headline-tracking);
    font-weight: var(--weight-semibold);
    text-align: center;
  }

  .day-runs {
    margin-top: var(--space-3);
  }

  .day-run {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
    min-height: max(52px, var(--touch-min));
    padding: 6px 0;
  }

  .day-run + .day-run {
    border-top: 1px solid var(--hairline);
  }

  .day-run-title {
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-line);
    letter-spacing: var(--type-headline-tracking);
    font-weight: var(--weight-medium);
    font-variant-numeric: normal;
  }

  .day-run-meta {
    color: var(--text-secondary);
  }

  .day-total {
    margin-top: var(--space-3);
    font-weight: var(--weight-medium);
  }

  .day-total[data-empty="true"] {
    padding: var(--space-4) 0;
    color: var(--text-secondary);
    font-weight: var(--weight-regular);
    text-align: center;
  }

  .event-sheet .facts > div[data-tone="warning"] dd {
    color: var(--warning);
  }

  .event-sheet .facts > div[data-tone="critical"] dd {
    color: var(--danger);
  }

  .event-zones {
    margin-top: var(--space-4);
  }

  .event-zones .facts {
    margin-top: var(--space-2);
  }

  /* ------------------------------------------------------------------
     Weather page
     ------------------------------------------------------------------ */
  .weather-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-3);
    align-items: start;
  }

  .evaporation-card {
    grid-column: 1 / -1;
  }

  .current-hero {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-top: var(--space-1);
  }

  .current-word {
    font-size: var(--type-title3-size);
    line-height: var(--type-title3-line);
    letter-spacing: var(--type-title3-tracking);
    color: var(--text-secondary);
  }

  .weather-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  .weather-tile {
    min-width: 0;
    padding: 10px var(--space-3);
    border-radius: var(--radius-tile);
    background: var(--surface-2);
  }

  .weather-tile dt {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  .weather-tile dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
  }

  .weather-tile-value {
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-line);
    letter-spacing: var(--type-headline-tracking);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
  }

  .weather-tile-word,
  .weather-tile-sub {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  .weather-tile-sub {
    flex-basis: 100%;
  }

  .rain-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-2);
  }

  .rain-total dt {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  .rain-total dd {
    font-size: var(--type-title2-size);
    line-height: var(--type-title2-line);
    letter-spacing: var(--type-title2-tracking);
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }

  .rain-now,
  .rain-pause-line {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-weight: var(--weight-medium);
  }

  .rain-now {
    color: var(--accent);
  }

  .rain-pause-line {
    color: var(--warning);
  }

  .rain-now > .icon,
  .rain-pause-line > .icon {
    flex: none;
    margin-top: 1px;
  }

  /*
   * "Regnet gerade" and the rain pause under it are one note about what the
   * rain does now: the second line follows at a group's gap, not a
   * paragraph's.
   */
  .rain-now:not([hidden]) + .rain-pause-line {
    margin-top: var(--space-1);
  }

  .rain-phases-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
  }

  .rain-phases {
    margin-top: var(--space-2);
  }

  .rain-phase {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: max(52px, var(--touch-min));
    padding: 4px 0;
  }

  .rain-phase + .rain-phase {
    border-top: 1px solid var(--hairline);
  }

  .rain-phase-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .rain-phase-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    font-weight: var(--weight-medium);
  }

  .rain-phase[data-ongoing="true"] .rain-phase-title {
    color: var(--accent);
  }

  .rain-phase-when {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  .rain-phase-meta {
    flex: none;
    color: var(--text-secondary);
    white-space: nowrap;
  }

  /* Evaporation and rain: rain up from the middle line, evaporation down. */
  .evap-chart {
    --evap-height: 168px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    margin-top: var(--space-3);
  }

  .evap-axis {
    position: relative;
    height: var(--evap-height);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-tertiary);
  }

  .evap-axis > span {
    position: absolute;
    right: var(--space-2);
    white-space: nowrap;
  }

  .evap-axis .is-top {
    top: 0;
  }

  .evap-axis .is-zero {
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
  }

  .evap-axis .is-bottom {
    bottom: 0;
  }

  .evap-main {
    min-width: 0;
  }

  .evap-columns {
    position: relative;
    display: flex;
    gap: 1px;
    height: var(--evap-height);
  }

  .evap-columns::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--text-tertiary);
  }

  .evap-day {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
  }

  .evap-day.is-week-start {
    box-shadow: -1px 0 0 var(--hairline);
  }

  .evap-half {
    display: flex;
    flex: 1 1 0;
    padding: 0 1px;
  }

  .evap-half.is-rain {
    align-items: flex-end;
  }

  .evap-half.is-et0 {
    align-items: flex-start;
  }

  .evap-bar {
    display: block;
    width: 100%;
  }

  .evap-bar.is-rain {
    border-radius: 2px 2px 0 0;
    background: var(--accent);
  }

  .evap-bar.is-et0 {
    border-radius: 0 0 2px 2px;
    background: var(--evaporation);
  }

  .evap-day[data-uncounted="true"] .evap-bar.is-rain {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--accent);
  }

  .evap-dates {
    position: relative;
    height: var(--type-caption-line);
    margin-top: var(--space-1);
  }

  .evap-date {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-tertiary);
    white-space: nowrap;
  }

  .evap-date.is-first {
    transform: none;
  }

  .evap-date.is-end {
    transform: translateX(-100%);
  }

  .evap-legend {
    margin-left: 48px;
  }

  .evap-key {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
  }

  .evap-key.is-rain {
    background: var(--accent);
  }

  .evap-key.is-et0 {
    background: var(--evaporation);
  }

  .evap-figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--space-3);
  }

  .pause-rules,
  .station-rows {
    margin-top: var(--space-3);
  }

  .pause-rules dt,
  .station-rows dt {
    flex: none;
    white-space: nowrap;
  }

  .station-rows > div[data-tone="warning"] dd {
    color: var(--warning);
  }

  .station-rows > div[data-tone="ok"] dd {
    color: var(--success);
  }

  .station-rows dd {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* Rain-pause sheet */
  .rain-settings .form-list {
    margin-top: var(--space-2);
  }

  /* ------------------------------------------------------------------
     Phones and narrow screens
     ------------------------------------------------------------------ */
  @container app (max-width: 959px) {
    .history-columns,
    .weather-grid,
    .page-history[data-range="season"] .history-col-side {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @container app (max-width: 699px) {
    .history-head {
      position: static;
      flex-wrap: wrap;
      gap: var(--space-3);
      min-height: 0;
      padding-top: var(--space-3);
    }

    /* The head scrolls away: the fixed header's room is the scroller's (layout.css). */
    .page-history .history-card {
      scroll-margin-top: 0;
    }

    .history-title {
      font-size: var(--type-title1-size);
      line-height: var(--type-title1-line);
      letter-spacing: var(--type-title1-tracking);
    }

    .history-controls {
      flex-basis: 100%;
      margin-left: 0;
    }

    .history-range {
      flex: 1 1 auto;
      width: auto;
    }

    .history-unit {
      flex: none;
      width: 112px;
    }

    .heatmap-card {
      --heat-row: var(--touch-min);
      /* A week's first cell gives 2 px to its gap (is-week-start): still a touch target at every display size. */
      --heat-cell-min: max(48px, calc(var(--touch-min) + 2px));
      --heat-name: 112px;
    }

    .heatmap-grid.is-dense {
      --heat-cell-min: 30px;
    }

    /* Sideways the columns snap whole to the name column: no cut-off
       number peeks out under it. */
    .heatmap-scroller,
    .season-scroller {
      scroll-snap-type: x proximity;
      scroll-padding-left: calc(var(--name-col) + var(--space-4));
    }

    .heatmap-scroller {
      --name-col: var(--heat-name);
    }

    .season-scroller {
      --name-col: 112px;
    }

    .season-grid {
      grid-template-columns: var(--name-col) repeat(var(--season-months), minmax(52px, 1fr)) minmax(72px, auto);
    }

    .heatmap-row.is-head > .heatmap-day,
    .heatmap-row.is-head > .heatmap-total,
    .season-row.is-head > .season-month,
    .season-row.is-head > .season-total {
      scroll-snap-align: start;
    }

    /* Phones: rows are 44 px high, so a long name takes two lines. */
    .heatmap-name-text,
    .season-name-text {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      white-space: normal;
      line-height: 18px;
      hyphens: auto;
      overflow-wrap: break-word;
    }

    .history-figures {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cistern-history-card .history-figures,
    .evap-figures {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Phones: the chevron stands by the name and the litres (as in a mail
       list), so the line under them has the row's whole width and
       "09:06 · Von Hand · Beendet nach 16 s" keeps one line, as in variant
       C (Stephan 2026-10-07); a run still shows that it opens. */
    .event-main {
      grid-template-areas:
        "name value chevron"
        "line line line";
    }

    .rain-total dd {
      font-size: var(--type-title3-size);
      line-height: var(--type-title3-line);
    }

    .evap-chart {
      --evap-height: 144px;
      grid-template-columns: 40px minmax(0, 1fr);
    }

    .evap-legend {
      margin-left: 40px;
    }

    /* Phones: the months as rows, the bars across, the value at the end. */
    .season-bars {
      flex-direction: column;
      gap: var(--space-2);
    }

    .season-bar {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) 64px;
      align-items: center;
      gap: var(--space-2);
    }

    .season-bar-label {
      order: 0;
      margin-top: 0;
      text-align: left;
    }

    .season-bar-track {
      order: 1;
      height: 20px;
      align-items: stretch;
      border-bottom: 0;
      border-left: 1px solid var(--text-tertiary);
    }

    .season-bar-value {
      order: 2;
      text-align: right;
    }

    .season-bar-fill {
      width: calc(var(--bar, 0) * 100%);
      height: auto;
    }

    .season-stack {
      flex-direction: row;
      border-radius: 0 3px 3px 0;
    }

    .rain-phases-head {
      flex-wrap: wrap;
    }

    .rain-phases-head > .segmented {
      flex: 1 1 100%;
    }

    .evap-date.is-alternate {
      display: none;
    }
  }

  /* A narrow phone (< 380 px: a 390 px phone at the display size's larger step is 355 px, a 360 px one): the unit's
     two short words („L“, „mm“) take two touch targets, no more, and the period's segments the room that leaves,
     closer together and to their words, so „28 Tage“ / „28 days“ stays in its segment (it ran 9.8 px past it, up to
     „Saison“; review 2026-10-11). */
  @container app (max-width: 379px) {
    .history-unit {
      width: calc(2 * var(--touch-min) + var(--segmented-gap) + 2 * var(--segmented-pad));
    }

    .history-range {
      --segmented-gap: var(--space-1);
    }

    .history-range .segmented-option {
      padding: 0;
    }
  }

  /* ------------------------------------------------------------------
     Everything sensibly tappable, History and Weather (Stephan
     2026-10-10, plan group D): what leads somewhere shows it calmly (a
     press state, a chevron where a row leads on, no underline) and is a
     touch target of 48 px on the kiosk and 44 px on phones; a value in a
     card keeps its place and reaches its height with an ::after.
     ------------------------------------------------------------------ */

  /* A figure that leads somewhere (heatmap-card.js createFigures()): its value and a chevron, the whole figure hit. */
  .history-figure[data-link] {
    position: relative;
  }

  .history-figure-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    max-width: 100%;
    min-width: 0;
    text-align: left;
  }

  .history-figure-link::after {
    content: "";
    position: absolute;
    inset: min(0px, calc((100% - var(--touch-min)) / 2 - 1px)) 0;
  }

  /* The sub line and the chevron wrap as one (heatmap-card.js): never a chevron alone on a line. Where
     the figure is narrower than the two, the sub's words wrap inside it and the chevron stays beside its
     last line ("Tiefster Stand" has the fill level's whole width and keeps its time on one line). */
  .history-figure-tail {
    display: inline-flex;
    align-items: flex-end;
    gap: 0 var(--space-2);
    min-width: 0;
  }

  .history-figure-tail > .history-figure-sub {
    min-width: 0;
    white-space: normal;
  }

  .history-figure-tail > .history-figure-chevron {
    align-self: flex-end;
    margin-bottom: 1px;
  }

  .history-figure-chevron {
    align-self: center;
    margin-left: calc(-1 * var(--space-1));
    color: var(--text-tertiary);
  }

  .history-figure-link:disabled .history-figure-chevron {
    display: none;
  }

  /* Seven days: a day's head, a zone's name and its total lead on. */
  .heatmap-day.is-link {
    align-self: stretch;
  }

  .heatmap-day-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: var(--touch-min);
    border-radius: var(--radius-xs);
  }

  .heatmap-name-link {
    display: flex;
    align-items: center;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: var(--heat-row);
    text-align: left;
    font-variant-numeric: normal;
  }

  .heatmap-total.is-link {
    padding-left: 0;
  }

  .heatmap-total-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: var(--heat-row);
    padding-left: var(--space-2);
    font-weight: inherit;
    white-space: nowrap;
  }

  /* A zone under an opened run: a row of the touch height into its day, the chevron in the run's chevron column. */
  .event-zone-item {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  .event-zone.is-link {
    position: relative;
    align-items: center;
    min-height: var(--touch-min);
    padding: 0;
    text-align: left;
  }

  .event-zone-chevron {
    position: absolute;
    top: 50%;
    right: 1px;
    color: var(--text-tertiary);
    translate: 0 -50%;
  }

  /* A run of a zone's day leads to its event. */
  .day-run-item + .day-run-item {
    border-top: 1px solid var(--hairline);
  }

  .day-run.is-link {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    width: 100%;
    text-align: left;
  }

  .day-run-chevron {
    align-self: center;
    color: var(--text-tertiary);
  }

  .day-run.is-link:disabled .day-run-chevron {
    display: none;
  }

  /* The leak test: its deviation leads to its night; the nights are one slider (chart-readout.js). */
  .leak-headline-link {
    margin-top: var(--space-1);
    padding: 0;
  }

  .leak-note {
    margin-top: var(--space-1);
  }

  .leak-note .link-row.is-inline {
    color: var(--text-secondary);
  }

  .leak-plot {
    padding-top: 4px;
  }

  /* Fill level: "Reserve" leads to its setting, the refills' lane to a refill. */
  .level-plot-wrap {
    position: relative;
  }

  .level-reserve-label.is-link {
    z-index: 3;
    min-width: var(--touch-min);
    padding: 0 var(--space-1) 2px;
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    pointer-events: auto;
  }

  .level-reserve-label.is-link::before {
    content: "";
    position: absolute;
    inset: min(0px, calc((100% - var(--touch-min)) / 2)) 0;
  }

  /* Over the date labels under it (they are pictures, aria-hidden), so its reach is a finger's. */
  .level-lane.is-link {
    z-index: 1;
    display: block;
    width: 100%;
  }

  .level-lane.is-link::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--space-2)) 0 calc(var(--space-2) + 12px - var(--touch-min));
  }

  /* Season: the months are one slider; a zone's row of the touch height opens the zone. */
  .season-bars.readout-surface {
    padding-top: var(--space-1);
  }

  .season-row.is-target {
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-xs);
    color: inherit;
    text-align: left;
  }

  .season-row.is-target > .season-cell {
    height: var(--touch-min);
  }

  .season-row.is-target.is-pressed .season-cell,
  .season-row.is-target.is-pressed .season-name {
    opacity: 0.7;
  }

  /* The month sheet. */
  .month-sheet {
    display: grid;
    gap: var(--space-4);
    padding-bottom: var(--space-2);
  }

  .month-section {
    display: grid;
    gap: var(--space-2);
  }

  .month-sheet > .prose-sub,
  .month-sheet > .history-note {
    margin-top: 0;
  }

  .event-note {
    margin-top: var(--space-3);
  }

  /* Weather › "Regen": a total chooses its range; the notes lead on. */
  .rain-total.is-link {
    position: relative;
  }

  .rain-total-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    font-weight: inherit;
    white-space: nowrap;
  }

  /* The total's whole cell is the target. Where the display size's smaller step makes it taller, it grows upward:
     downward it reached into the hit area under it (measured 2026-10-11: 47 px on the screen). */
  .rain-total-link::after {
    content: "";
    position: absolute;
    inset: 0;
    top: calc(48px - max(48px, var(--touch-min)));
    min-height: var(--touch-min);
  }

  .rain-total-chevron {
    flex: none;
    color: var(--text-tertiary);
  }

  /*
   * The pause line as a link: the line's look, the chevron after its last
   * word. Two lines are as high as before and reach the touch height into
   * the air around them (::before), so the kiosk's first screen keeps the
   * forecast's hours (Stephan 2026-10-08); one line gets the height of two.
   */
  .rain-pause-line.is-link {
    position: relative;
    align-items: center;
    width: 100%;
    min-height: calc(var(--touch-min) - 2 * var(--space-1));
    text-align: left;
  }

  .rain-pause-line.is-link::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--space-1)) 0;
  }

  .rain-pause-chevron {
    margin-left: 2px;
    vertical-align: -3px;
  }

  .rain-badge-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1px;
  }

  .rain-badge-link::before {
    content: "";
    position: absolute;
    inset: min(0px, calc((100% - var(--touch-min)) / 2)) calc(-1 * var(--space-2));
  }

  .rain-badge-chevron {
    flex: none;
  }

  /* "Regenpause": rows that lead on, on the surface the facts had. */
  .pause-zones-section {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  /* The one way to the station's settings, apart from its facts (Stephan 2026-10-18). */
  .station-change {
    margin-top: var(--space-2);
  }

  .pause-rules .link-row-label {
    color: var(--text-secondary);
    font-weight: var(--weight-regular);
  }

  .pause-rules .link-row-value,
  .station-rows .link-row-value {
    max-width: 75%;
    color: var(--text-primary);
    font-weight: var(--weight-medium);
  }
}