/*
 * Drip zones and a zone's kind (Stephan 2026-10-08, T1, T3, T6): the
 * drip line's inputs (zone wizard, zone settings), the two quick pickers
 * "Bepflanzung" and "Bewässerung" of the zone settings, the drip card of
 * the wizard's last step. The kind's symbol itself is in components.css
 * (.zone-kind). Reads tokens only; no motion. Touch targets 48 px on the
 * kiosk, 44 px elsewhere; nothing below 13 px.
 */
@layer pages {
  /* ------------------------------------------------------------------
     The drip line's inputs
     ------------------------------------------------------------------ */
  .drip-line {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* The heading and its info button (the figure of the print, Stephan 2026-10-09). */
  .drip-line-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .drip-line-label {
    font-weight: var(--weight-medium);
  }

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

  .drip-line-fields > .form-row {
    padding: var(--space-2) 0;
  }

  .drip-line-fields > .form-row + .form-row {
    border-top: 1px solid var(--hairline);
  }

  /* What the inputs give: one line, the flow at its end. */
  .drip-line-result {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
  }

  /* In the zone settings: under the flow, across the row. */
  .flow-drip {
    grid-column: 1 / -1;
    padding-top: var(--space-1);
  }

  .flow-drip .drip-line-fields > .form-row:first-child {
    border-top: 0;
  }

  /* The drip line's flow when the value set differs from it: one button under the line that names both. */
  .flow-drip-offer {
    display: flex;
    justify-content: flex-start;
  }

  .flow-drip-offer[hidden] {
    display: none;
  }

  /* "Trotzdem messen" after its line (decision of the night of 2026-10-08): quiet, without a fill, its icon on
     the line's left edge; the touch target keeps its size. */
  .flow-block .flow-measure[data-variant="ghost"] {
    margin-inline-start: calc(-1 * var(--space-4));
  }

  /* ------------------------------------------------------------------
     The pickers of the zone settings: a symbol over its word
     ------------------------------------------------------------------ */
  .kind-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: var(--space-2);
  }

  .kind-picker.is-water {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kind-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 76px;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-primary);
    text-align: center;
  }

  .kind-choice-glyph {
    display: grid;
    place-items: center;
    color: var(--kind-ink);
  }

  .kind-choice-label {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    font-weight: var(--weight-medium);
    overflow-wrap: break-word;
  }

  /* The choice: a ring and a tint, not colour alone. */
  .kind-choice[aria-checked="true"] {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
    box-shadow: inset 0 0 0 2px var(--accent);
  }

  .kind-choice[aria-checked="true"] .kind-choice-glyph {
    color: var(--accent);
  }

  .kind-choice.is-pressed {
    background: var(--surface-3);
  }

  /* ------------------------------------------------------------------
     The zone wizard's last step for a new drip zone
     ------------------------------------------------------------------ */
  .measure-card.is-drip .measure-card-title {
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
  }
}