/*
 * Managing a zone (Stephan 2026-10-08, Z1..Z4): the output row and "Zone
 * löschen" in the zone's settings, the output sheet, the establishment
 * wizard's steps (also inside the zone wizard) and its entry in the
 * Establishment tab, the zone wizard's question "Neu angesät oder
 * gepflanzt?", the warning before measuring an output without water.
 * Reads tokens only; no motion of its own (the step container's springs).
 * Touch targets 48 px on the kiosk, 44 px elsewhere; nothing below 13 px.
 */
@layer pages {
  /* ------------------------------------------------------------------
     Zone settings: the output, "Ändern" beside it
     ------------------------------------------------------------------ */
  .port-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
  }

  .port-value {
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  /* "Zone löschen": the last maintenance item; the confirmation names what goes. */
  .delete-panel .is-busy {
    color: var(--text-primary);
  }

  .delete-panel > p + p {
    margin-top: var(--space-2);
  }

  /* ------------------------------------------------------------------
     The output sheet: free outputs as chips, the zones to swap with as a
     grouped list (two columns on the kiosk), what to rewire before the tap
     ------------------------------------------------------------------ */
  .sheet.output-sheet-panel {
    width: min(760px, 100%);
  }

  .output-sheet {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
  }

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

  .output-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .output-section-title {
    font-weight: var(--weight-semibold);
  }

  :root[data-device="kiosk"] .answer-list.output-swaps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-device="kiosk"] .output-swaps .answer-row {
    min-height: max(52px, var(--touch-min));
    box-shadow: inset 0 1px 0 var(--hairline);
  }

  :root[data-device="kiosk"] .output-swaps .answer-row:nth-child(-n + 2) {
    box-shadow: none;
  }

  .output-confirm {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-wrap: pretty;
  }

  /* ------------------------------------------------------------------
     The zone wizard's last question: the words alone, one column
     ------------------------------------------------------------------ */
  .zw-step.zw-establish {
    grid-template-columns: minmax(0, 1fr);
    max-width: 600px;
  }

  .zw-establish > .zw-main:empty {
    display: none;
  }

  /* ------------------------------------------------------------------
     Establishment wizard: the proposal as a form, the summary as rows
     ------------------------------------------------------------------ */
  .ew-plan .ew-after,
  .ew-summary .ew-after {
    margin-top: var(--space-2);
  }

  .zw-summary.ew-summary {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-areas:
      "heading main"
      "after main";
    grid-template-rows: auto 1fr;
    row-gap: var(--space-3);
  }

  .ew-summary > .zw-heading {
    grid-area: heading;
  }

  .ew-summary > .summary-list {
    grid-area: main;
  }

  .ew-summary > .ew-after {
    grid-area: after;
    margin-top: 0;
  }

  .ew-summary .summary-row {
    grid-template-columns: 104px minmax(0, 1fr) auto;
  }

  /* The entry in the Establishment tab, under its intro. */
  .establishment-wizard-entry {
    margin: var(--space-3) 0 var(--space-2);
  }

  /* ------------------------------------------------------------------
     The measurement: only with a valve on the output (Z4)
     ------------------------------------------------------------------ */
  .measure-novalve {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  @container app (max-width: 759px) {
    .zw-summary.ew-summary {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "heading"
        "main"
        "after";
      grid-template-rows: auto;
    }

    .ew-summary .summary-row {
      grid-template-columns: 96px minmax(0, 1fr) auto;
    }
  }
}