/*
 * The season (winterization 2026-10-15): the winter card on Today, the
 * frost watch's rows, Settings › Winter, the winter flow with its blow-out
 * board, the wake-up sheet. Reads tokens only; animates transform and
 * opacity only (the Pi 4's GPU): the time passed on an open tile is one
 * Web Animation of its transform per opening (sheets/winter/board.js), the
 * board's "Schließen" fades in. Touch targets 48 px
 * on the kiosk, 44 px elsewhere (--touch-min); nothing below 13 px.
 */
@layer pages {
  /* ------------------------------------------------------------------
     The frost watch (pages/today/winter-card.js): four compact rows
     ------------------------------------------------------------------ */
  .ws-watch {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ws-block {
    display: flex;
    flex-direction: column;
  }

  .ws-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
  }

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

  .ws-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--space-2);
    padding: 6px 0;
  }

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

  .ws-mark {
    position: relative;
    align-self: center;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
  }

  .ws-check {
    color: var(--success);
  }

  /* A condition not met yet: a quiet ring (3:1 at least, as the check rows' empty circle). */
  .ws-ring {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1.75px var(--text-tertiary);
  }

  /* No data (unknown soil): a short dash, it does not block. */
  .ws-row[data-met="null"] .ws-ring {
    width: 12px;
    height: 0;
    border-radius: 1px;
    box-shadow: inset 0 0 0 1px var(--text-tertiary);
  }

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

  .ws-label {
    color: var(--text-primary);
  }

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

  .ws-value {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }

  .ws-row[data-met="true"] .ws-value {
    color: var(--text-primary);
  }

  .ws-probe {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .ws-probe-next {
    color: var(--text-primary);
    font-weight: var(--weight-medium);
  }

  .ws-probe-last {
    color: var(--text-secondary);
  }

  /* ------------------------------------------------------------------
     The winter card on Today: in place of "Nächste Läufe" while resting
     ------------------------------------------------------------------ */
  .winter-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .winter-card-open {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .winter-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
  }

  .winter-card-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .winter-card-symbol {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--info) 14%, var(--surface-1));
    color: var(--info);
  }

  .winter-card-title {
    font-size: var(--type-title2-size);
    line-height: var(--type-title2-line);
    letter-spacing: var(--type-title2-tracking);
    font-weight: var(--weight-semibold);
    text-wrap: balance;
  }

  .winter-card-since {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }

  .winter-card-note {
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  /* ------------------------------------------------------------------
     The winter stage (Stephan 2026-10-18: "Übersicht auf der Hauptseite
     im Winterstil, apple like"): while the season rests the winter card
     takes the two left columns in a cool tint; the weather and a compact
     cistern share the right one (today-page.js data-resting).
     ------------------------------------------------------------------ */
  .today-grid[data-resting="true"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "b c" "b a";
  }

  /* The kiosk's width gives the stage the larger share; a tablet's half leaves the weather its hours. */
  @container app (min-width: 960px) {
    .today-grid[data-resting="true"] {
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    }
  }

  .today-grid[data-resting="true"] .today-col-a {
    grid-area: a;
  }

  .today-grid[data-resting="true"] .today-col-b {
    grid-area: b;
  }

  .today-grid[data-resting="true"] .today-col-c {
    grid-area: c;
  }

  .card.winter-card {
    background: linear-gradient(165deg, color-mix(in srgb, var(--info) 20%, var(--surface-1)) 0%,
      color-mix(in srgb, var(--info) 5%, var(--surface-1)) 100%);
  }

  /* The state and the way back at the top, the conditions at the bottom: with room to spare (no notice above it)
     the stage fills its column calmly instead of ending halfway. */
  .winter-card .winter-card-open {
    flex: 1;
    gap: var(--space-4);
  }

  .winter-card .ws-block {
    margin-top: auto;
  }

  /* On the kiosk the stage has its column to itself when no notice and nothing running stands above it: then the
     snowflake, the state and the way back stand large in the middle, like the winter flow's done step, the
     conditions at the bottom. (A phone's or a tablet's card grows with its content: nothing to fill there.) */
  @container app (min-width: 960px) {
    .today-grid[data-resting="true"] .today-col-b:not(:has(> .hint-deck:not([hidden]), > .run-card:not([hidden]))) .winter-card-head {
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      margin-top: auto;
      text-align: center;
    }

    .today-grid[data-resting="true"] .today-col-b:not(:has(> .hint-deck:not([hidden]), > .run-card:not([hidden]))) .winter-card-heading {
      align-items: center;
    }

    .today-grid[data-resting="true"] .today-col-b:not(:has(> .hint-deck:not([hidden]), > .run-card:not([hidden]))) .winter-card-symbol {
      width: 76px;
      height: 76px;
    }

    .today-grid[data-resting="true"] .today-col-b:not(:has(> .hint-deck:not([hidden]), > .run-card:not([hidden]))) .winter-card-symbol svg {
      width: 36px;
      height: 36px;
    }

    .today-grid[data-resting="true"] .today-col-b:not(:has(> .hint-deck:not([hidden]), > .run-card:not([hidden]))) .winter-card-title {
      font-size: var(--type-title1-size);
      line-height: var(--type-title1-line);
      letter-spacing: var(--type-title1-tracking);
    }

    .today-grid[data-resting="true"] .today-col-b:not(:has(> .hint-deck:not([hidden]), > .run-card:not([hidden]))) .winter-card-start {
      align-items: center;
      text-align: center;
    }
  }

  .winter-card-start {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .winter-card-start-text {
    font-size: var(--type-title3-size);
    line-height: var(--type-title3-line);
    letter-spacing: var(--type-title3-tracking);
    font-weight: var(--weight-semibold);
    text-wrap: balance;
  }

  .winter-card-lead {
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  /* The conditions as frosted rows, the value at the row's end; on the kiosk two tiles side by side with the value
     under the label (a phone's or a tablet's half leaves a label like "Bodentemperatur" no room for that). */
  .winter-card .ws-watch {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: var(--space-1);
  }

  .winter-card .ws-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas: "mark text value";
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-row);
    background: color-mix(in srgb, var(--surface-1) 72%, transparent);
  }

  .winter-card .ws-row + .ws-row {
    border-top: 0;
  }

  .winter-card .ws-mark {
    grid-area: mark;
  }

  .winter-card .ws-text {
    grid-area: text;
  }

  .winter-card .ws-value {
    grid-area: value;
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
  }

  @container app (min-width: 960px) {
    .winter-card .ws-watch {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2);
    }

    .winter-card .ws-row {
      grid-template-columns: 22px minmax(0, 1fr);
      grid-template-areas: "mark text" ". value";
    }

    .winter-card .ws-value {
      text-align: left;
      font-size: var(--type-headline-size);
      line-height: var(--type-headline-line);
      letter-spacing: var(--type-headline-tracking);
    }
  }

  /* The compact cistern while resting or waking: its level and the refill row (pages/today/cistern-card.js);
     "Nachspeisen" only where it can start (waking allows a refill by hand, the winter rest does not). */
  .cistern-card[data-resting="true"] .gauge,
  .cistern-card[data-resting="true"] .cistern-day,
  .cistern-card[data-resting="true"] .cistern-refill-button:disabled {
    display: none;
  }

  /* ------------------------------------------------------------------
     Settings › Winter (pages/settings/winter-section.js)
     ------------------------------------------------------------------ */
  .winter-season {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .winter-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-2) var(--space-4);
  }

  .winter-symbol {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--info);
  }

  .winter-intro-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .winter-block-title {
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-line);
    letter-spacing: var(--type-headline-tracking);
    font-weight: var(--weight-semibold);
  }

  .winter-block-lead,
  .winter-note {
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  .winter-frost,
  .winter-running-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    color: var(--text-primary);
  }

  .winter-frost > .icon {
    color: var(--info);
  }

  .winter-running-line > .icon {
    color: var(--accent);
  }

  .winter-gate {
    color: var(--text-secondary);
  }

  .winter-intro-start {
    align-self: center;
  }

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

  .winter-status-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
  }

  .winter-status-since {
    color: var(--text-secondary);
  }

  .winter-running {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .winter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .winter-links {
    margin-top: var(--space-1);
  }

  .winter-key {
    padding-top: var(--space-3);
  }

  /* ------------------------------------------------------------------
     The winter flow (sheets/winter/winter-flow.js): the zone wizard's
     tall sheet and step container
     ------------------------------------------------------------------ */
  .wz-symbol {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--info);
  }

  .wz-checks {
    display: flex;
    flex-direction: column;
  }

  .wz-gate {
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  /* The summary: one calm column. */
  .wz-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 600px;
  }

  .wz-missing {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-self: stretch;
  }

  .wz-missing-names {
    color: var(--text-primary);
    text-wrap: pretty;
  }

  .wz-missing-key {
    margin-right: var(--space-1);
    color: var(--text-secondary);
  }

  .wz-next {
    margin-top: var(--space-1);
  }

  /* Done: the calm moment, centred. */
  .wz-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) 0 var(--space-4);
    text-align: center;
  }

  .wz-done-symbol {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--info) 14%, var(--surface-1));
    color: var(--info);
  }

  .wz-done-title {
    font-size: var(--type-title2-size);
    line-height: var(--type-title2-line);
    letter-spacing: var(--type-title2-tracking);
    font-weight: var(--weight-semibold);
  }

  .wz-done-title:focus {
    outline: none;
  }

  .wz-done-text {
    max-width: 46ch;
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  /* Leave the controller on or shut it down: side by side on the kiosk, stacked on a phone. */
  .wz-done-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    width: 100%;
    max-width: 680px;
    margin-top: var(--space-2);
  }

  /* ------------------------------------------------------------------
     The blow-out board (sheets/winter/board.js), Apple-like (Stephan
     2026-10-19): the title with its capsules, the tiles with the Zones
     page's symbols; an open tile in the accent, as a switched-on tile in a
     home app, the time passed filling it.
     ------------------------------------------------------------------ */
  .bo-board {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* The title, the capsules and "Schließen" in a row, what to do below it. "Schließen" comes and goes at the end
     of the row, where nothing follows it: nothing moves (on a phone it waits at the title's end, see below). */
  .bo-head {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "title pills close ."
      "lead lead lead lead";
    align-items: center;
    gap: var(--space-1) var(--space-3);
  }

  .bo-title {
    grid-area: title;
    font-size: var(--type-title3-size);
    line-height: var(--type-title3-line);
    letter-spacing: var(--type-title3-tracking);
    font-weight: var(--weight-semibold);
  }

  .bo-title:focus {
    outline: none;
  }

  .bo-pills {
    grid-area: pills;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* A capsule says a state; it is no control. */
  .bo-pump,
  .bo-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .bo-pump[data-locked="false"] {
    color: var(--warning);
  }

  /* "Schließen" beside the count, tinted with the accent: 28 px drawn, its hit area the touch target (--touch-min:
     48 physical px at every display size; it reaches over the line below, which is no control). It fades in where
     the browser can. */
  .bo-close-open {
    grid-area: close;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 28px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-1));
    color: var(--accent);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    transition: transform var(--duration-press) ease-out, opacity var(--duration-base) var(--ease-out);
  }

  .bo-close-open::before {
    content: "";
    position: absolute;
    inset: calc((28px - var(--touch-min)) / 2) -4px;
  }

  @starting-style {
    .bo-close-open {
      opacity: 0;
    }
  }

  .bo-close-open:disabled,
  .bo-close-open[aria-busy="true"] {
    color: var(--text-secondary);
  }

  .bo-close-open:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  /* What to do: the step's own words (which zones, the drip lines' 2 bar), then what a tap does. */
  .bo-lead {
    grid-area: lead;
    color: var(--text-secondary);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    text-wrap: pretty;
  }

  /* --bo-row: a row's height; --bo-pad: a tile's padding above its name; --bo-line: the line under the name (the
     dense kiosk board below sets them). */
  .bo-grid {
    --bo-row: 92px;
    --bo-pad: 12px;
    --bo-line: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    grid-auto-rows: minmax(var(--bo-row), auto);
    gap: var(--space-2);
  }

  /* A tile: closed, one toggle (the zone's symbol, its name, which may take two lines, the line below them); open,
     in the accent, the name and the time left over the time passed, the two actions below. The symbol's square in
     the card's colour on the tile (the Zones page draws it the other way round), its mark in the tile's. */
  .bo-tile {
    --kind-fill: var(--surface-1);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    border-radius: var(--radius-tile);
    background: var(--surface-2);
    overflow: hidden;
  }

  .bo-tile .zone-kind-mark {
    background: var(--surface-2);
  }

  .bo-tile-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "kind name"
      "line line";
    align-content: space-between;
    align-items: center;
    gap: var(--space-1) 10px;
    width: 100%;
    min-height: var(--bo-row);
    padding: var(--bo-pad) var(--space-3) calc(var(--bo-pad) - 4px);
    color: var(--text-primary);
    text-align: left;
    background: transparent;
  }

  /* Without the symbol (an engine without stored answers) the name has the row. */
  .bo-tile-toggle:not(:has(> .zone-kind:not([hidden]))) {
    grid-template-areas:
      "name name"
      "line line";
  }

  .bo-tile-kind {
    grid-area: kind;
  }

  .bo-tile-toggle > .bo-tile-name {
    grid-area: name;
  }

  /* Open: the name and the time left beside it; the time drops below a name that needs the width (no word is
     broken for it). */
  .bo-tile-face {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    align-content: flex-start;
    column-gap: var(--space-2);
    padding: var(--bo-pad) var(--space-3) 0;
  }

  .bo-tile-name {
    font-size: var(--type-headline-compact-size);
    line-height: var(--type-headline-compact-line);
    font-weight: var(--weight-semibold);
    overflow-wrap: anywhere;
  }

  .bo-tile-line {
    grid-area: line;
    display: flex;
    align-items: center;
    min-height: var(--bo-line);
  }

  .bo-tile-left {
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semibold);
    white-space: nowrap;
  }

  .bo-tile-pending {
    color: var(--text-secondary);
  }

  .bo-tile-tally {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }

  .bo-tile-check {
    color: var(--success);
  }

  /* Open: the accent with its own ink, as a switched-on tile in a home app (4.5:1 over the time passed too). */
  .bo-tile[data-state="open"] {
    background: var(--accent);
    color: var(--on-accent);
  }

  /* The time passed: a layer of the accent's ink over the tile, filling it until the engine closes the valve (one
     Web Animation of its transform per opening, board.js); the words stay over it. */
  .bo-tile-bar {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .bo-tile-fill {
    display: block;
    height: 100%;
    background: color-mix(in srgb, var(--on-accent) 14%, transparent);
    transform-origin: 0 50%;
    transform: scaleX(0);
  }

  /* An open tile's two actions below its name, within the tile's 12 px edge all round (Stephan 2026-10-19,
     "Kapsel + Symbol": two words side by side outgrew a narrow tile and touched its edges): "Schließen" a capsule
     in the accent's ink over the width, "Verlängern" a round button with the circular arrow. Each is its touch
     target with the shape drawn 6 px inside it, so the row's padding is the edge less those 6 px where a shape's
     edge is inset (the circle's right, the row's bottom). */
  .bo-tile-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px 6px var(--space-3);
  }

  .bo-tile-close,
  .bo-tile-extend {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-min);
    border-radius: var(--radius-full);
    background: transparent;
  }

  .bo-tile-close::before,
  .bo-tile-extend::before {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: var(--radius-full);
  }

  .bo-tile-close {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 var(--space-3);
    color: var(--accent);
    font-weight: var(--weight-semibold);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    white-space: nowrap;
  }

  .bo-tile-close::before {
    inset: 6px 0;
    background: var(--on-accent);
  }

  .bo-tile-extend {
    flex: none;
    width: var(--touch-min);
    padding: 0;
    color: var(--on-accent);
  }

  .bo-tile-extend::before {
    inset: 6px;
    background: color-mix(in srgb, var(--on-accent) 22%, transparent);
  }

  .bo-tile-close:disabled,
  .bo-tile-extend:disabled {
    opacity: 0.55;
  }

  .bo-tile-close[aria-busy="true"] {
    color: var(--text-secondary);
  }

  .bo-tile-extend[aria-busy="true"] {
    opacity: 0.72;
  }

  /* The master's card: twice a tile's width (on a phone a row of its own above the zones), its name and the hint
     for its state on the left, what a tap does on the right, drawn as a capsule (the card is the one control). */
  .bo-master {
    grid-column: span 2;
    display: grid;
    border-radius: var(--radius-tile);
    background: var(--surface-2);
    overflow: hidden;
  }

  .bo-master-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--bo-row);
    padding: 10px var(--space-3) 10px var(--space-4);
    color: var(--text-primary);
    text-align: left;
    background: transparent;
  }

  .bo-master-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .bo-master-hint {
    color: var(--text-secondary);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
  }

  .bo-master-action {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    background: var(--surface-1);
    color: var(--accent);
    font-weight: var(--weight-semibold);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    white-space: nowrap;
  }

  /* Open for the session: tinted with the accent, quieter than an open zone. */
  .bo-master[data-state="open"] {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  }

  .bo-master[data-pending="open"] {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
  }

  .bo-master-toggle[aria-busy="true"] {
    cursor: progress;
  }

  .bo-master-toggle[aria-busy="true"] .bo-master-action {
    color: var(--text-secondary);
  }

  /* Blocked while the zones allowed at once are open, locked before the drip lines' 2 bar are ticked: the card's
     colour with a fine edge, the name secondary (the words keep 4.5:1), the symbol as on the Zones page. */
  .bo-tile[data-state="blocked"],
  .bo-tile[data-state="locked"] {
    --kind-fill: var(--surface-2);
    background: var(--surface-1);
    box-shadow: inset 0 0 0 1px var(--hairline);
  }

  .bo-tile[data-state="blocked"] .zone-kind-mark,
  .bo-tile[data-state="locked"] .zone-kind-mark {
    background: var(--surface-1);
  }

  .bo-tile[data-state="blocked"] .bo-tile-name,
  .bo-tile[data-state="locked"] .bo-tile-name {
    color: var(--text-secondary);
  }

  .bo-tile-toggle[aria-busy="true"],
  .bo-tile-close[aria-busy="true"],
  .bo-tile-extend[aria-busy="true"] {
    cursor: progress;
  }

  /* Waiting for the control unit's confirmation of an opening: the accent's edge, the words say it. */
  .bo-tile[data-pending="open"] {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
  }

  .bo-tile-toggle:focus-visible,
  .bo-master-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
  }

  /* On the accent the ring takes the accent's ink, around the shape. */
  .bo-tile-close:focus-visible,
  .bo-tile-extend:focus-visible {
    outline: 2px solid var(--on-accent);
    outline-offset: -4px;
  }

  /* The kiosk: 13 zones and the master in three rows, no scrolling (1024 × 600): the sheet takes the screen's width. */
  :root[data-device="kiosk"] .sheet.winter-sheet {
    width: min(1000px, 100%);
  }

  /* Four columns while three rows hold every cell (the master's card takes two): an open tile keeps its name and
     its time left beside each other. Five from 13 cells on (11 zones and the master; 13 zones without it). */
  :root[data-device="kiosk"] .bo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :root[data-device="kiosk"] .bo-grid:has(> .bo-master):has(> :nth-child(12)),
  :root[data-device="kiosk"] .bo-grid:not(:has(> .bo-master)):has(> :nth-child(13)) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* Three rows (more than eight cells, the master's card counting two): the head's second line comes out of the
     tiles, 86 px each, and their gaps (measured 2026-10-19: 13 zones and the master fit the sheet). */
  :root[data-device="kiosk"] .bo-grid:has(> .bo-master):has(> :nth-child(8)),
  :root[data-device="kiosk"] .bo-grid:not(:has(> .bo-master)):has(> :nth-child(9)) {
    --bo-row: 86px;
    --bo-pad: 9px;
    --bo-line: 20px;
    gap: 6px;
  }

  /* An inline error (a valve that did not switch or close) takes the place of the board's head on the kiosk, so
     the board does not outgrow the screen (as the run sheet's info line, pages.css); the tiles show what is open. */
  :root[data-device="kiosk"] .sheet.winter-sheet:has(> .sheet-error:not([hidden])) .bo-head {
    display: none;
  }

  /* The flow's steps keep the wizard's size; the board needs the room under its head. */
  .winter-sheet .zone-wizard {
    padding-bottom: var(--space-3);
  }

  /* ------------------------------------------------------------------
     Waking up (sheets/winter/wake-sheet.js): two choices
     ------------------------------------------------------------------ */
  .wake {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
  }

  .wake-choice {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--touch-min);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-row);
    background: var(--surface-2);
    color: var(--text-primary);
    text-align: left;
  }

  .wake-choice[aria-checked="true"] {
    box-shadow: inset 0 0 0 2px var(--accent);
  }

  .wake-choice-mark {
    position: relative;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 2px var(--text-tertiary);
  }

  .wake-choice[aria-checked="true"] .wake-choice-mark {
    box-shadow: inset 0 0 0 7px var(--accent);
  }

  .wake-choice-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .wake-choice-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
  }

  .wake-choice-label {
    font-weight: var(--weight-semibold);
  }

  .wake-choice-tag {
    color: var(--accent);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
  }

  .wake-choice-sub {
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  /* A season notice's next step in its sheet (sheets/hint-sheet.js). */
  .hint-sheet-action {
    margin-top: var(--space-3);
  }

  /* ------------------------------------------------------------------
     Phones (< 700 px)
     ------------------------------------------------------------------ */
  @container app (max-width: 699px) {
    .wz-done-choices {
      grid-template-columns: minmax(0, 1fr);
    }

    /* The stage first, then the weather, then the compact cistern. */
    .today-grid[data-resting="true"] .weather-card {
      order: 3;
    }

    .today-grid[data-resting="true"] .cistern-card {
      order: 4;
    }

    .winter-card {
      order: 1;
      flex: none;
    }

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

    .winter-intro {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .winter-intro-start {
      grid-column: 1 / -1;
      width: 100%;
    }

    .winter-actions > .button {
      flex: 1 1 100%;
    }

    /* The title with "Schließen" at its end (it comes and goes there, nothing moves), the capsules below. */
    .bo-head {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "title close"
        "pills pills"
        "lead lead";
      row-gap: var(--space-2);
    }

    .bo-close-open {
      justify-self: end;
    }
  }
}