/*
 * Settings: planning, cistern and refill, calibration (pages/settings/planning/)
 * and their sheets (sheets/planning/): pause, recalculation, refill rate test.
 * Also the explanation sheet's lead question, tip and term line.
 *
 * Same rules as pages.css: tokens only, transform and opacity are the only
 * animated properties, hover only for fine pointers.
 */
@layer pages {
  /* ---------- Cards ---------- */
  .planning-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .planning-card-intro {
    margin-top: var(--space-1);
    color: var(--text-secondary);
    text-wrap: pretty;
  }

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

  /* What Tropfwerk plans by itself: one line under the heading. */
  .schedule-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  /* A block of values with its save bar is one item of the form list. */
  .planning-block > .form-row + .form-row {
    border-top: 1px solid var(--hairline);
  }

  .form-row-note,
  .planning-row > .form-error {
    grid-column: 1 / -1;
  }

  /* ---------- Note lines: a deviation, led by its icon ---------- */
  .note-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 2px;
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  .note-line > .meaning-icon,
  .note-line > .icon {
    flex: none;
    margin-top: 1px;
  }

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

  .block-note {
    margin: -6px 0 var(--space-3);
  }

  .form-hint[data-tone="warning"] {
    color: var(--warning);
  }

  .form-hint[data-tone="live"] {
    color: var(--accent);
  }

  /* ---------- Save bar of an edited block ---------- */
  .save-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }

  .save-bar-text {
    flex: 1 1 240px;
    min-width: 0;
  }

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

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

  .save-bar-actions {
    display: flex;
    flex: none;
    gap: var(--space-2);
  }

  .save-bar-actions > .button {
    min-height: var(--touch-min);
  }

  /* ---------- Rows that open a sheet ---------- */
  .disclosure-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 56px;
    padding: var(--space-3) 0;
    text-align: left;
    color: inherit;
  }

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

  .disclosure-row-text > .form-hint {
    display: block;
  }

  .disclosure-row-chevron {
    color: var(--text-tertiary);
  }

  .disclosure-row:disabled {
    cursor: default;
  }

  .disclosure-row:disabled .form-label {
    color: var(--text-tertiary);
  }

  /* Disabled it leads nowhere just now: no chevron ("Neu berechnen" while a run is armed; plan rule 11). */
  .disclosure-row:disabled .disclosure-row-chevron {
    display: none;
  }

  .disclosure-row:disabled .form-hint {
    color: var(--text-secondary);
  }

  /* A switch that waits for the engine: dimmed, the thumb already where it was asked to go. */
  .switch.is-engine[aria-busy="true"] {
    opacity: 0.6;
  }

  /* ---------- Refill rate ----------
     The rate and when it was measured are one region that opens the test (plan of 2026-10-10, group E). */
  .rate-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--touch-min);
    margin-top: 2px;
    padding: 0;
    border-radius: var(--radius-row);
    text-align: left;
    color: inherit;
  }

  .rate-open-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    min-width: 0;
  }

  .rate-open:disabled .disclosure-row-chevron {
    display: none;
  }

  .rate-value {
    font-variant-numeric: tabular-nums;
  }

  .rate-value[data-tone="warning"] {
    color: var(--warning);
    font-weight: var(--weight-regular);
  }

  /* ---------- Calibration: the flow of every zone ---------- */
  .flow-list {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-2);
  }

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

  .flow-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 56px;
    padding: var(--space-2) 0;
    text-align: left;
    color: inherit;
  }

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

  .flow-row-name {
    font-weight: var(--weight-medium);
    overflow-wrap: anywhere;
  }

  .flow-row-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    color: var(--text-secondary);
  }

  .flow-row-line > .meaning-icon {
    margin-top: 1px;
  }

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

  .flow-row-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .flow-item[data-mode="disabled"] .flow-row-name,
  .flow-item[data-mode="disabled"] .flow-row-value {
    color: var(--text-secondary);
  }

  .flow-item > .flow-offer {
    margin-bottom: var(--space-3);
  }

  .flow-offer > .form-error {
    flex-basis: 100%;
  }

  .flow-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
  }

  /* ---------- Pause sheet: one row per choice ---------- */
  .pause-sheet > .note-line {
    margin-bottom: var(--space-3);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    letter-spacing: var(--type-body-tracking);
  }

  .pause-sheet > .section-key {
    margin-bottom: var(--space-2);
  }

  .choice-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .choice-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 56px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    text-align: left;
    color: inherit;
  }

  .choice-row-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--space-3);
    min-width: 0;
  }

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

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

  .choice-row-busy {
    display: flex;
    gap: 6px;
  }

  .choice-row:disabled:not([aria-busy="true"]) .choice-row-label {
    color: var(--text-secondary);
  }

  /* ---------- Recalculation sheet ---------- */
  .recalc {
    padding-bottom: var(--space-2);
  }

  .recalc-intro > p + p,
  .recalc-result > * + * {
    margin-top: var(--space-2);
  }

  .recalc-next {
    color: var(--text-secondary);
  }

  .recalc-summary {
    font-weight: var(--weight-semibold);
  }

  /* Every zone of the result is a row into its zone sheet (link-row.js; plan of 2026-10-10, group E):
     the zones that get water first, then the others under the reason that keeps them out. */
  .recalc-zone .link-row-icon {
    color: var(--accent);
  }

  .recalc-zone .link-row-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .recalc-others {
    display: grid;
    gap: var(--space-3);
  }

  .recalc-group {
    display: grid;
    gap: var(--space-1);
  }

  /* ---------- The schedule line and an armed run lead somewhere (plan of 2026-10-10, group E) ----------
     One row for the line (its run, or why none is planned), the explanation beside it, not in it. */
  .schedule-link {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-secondary);
  }

  .schedule-link .link-row-label {
    font-weight: var(--weight-regular);
  }

  .schedule-link .link-row-icon {
    align-self: flex-start;
    margin-top: 2px;
  }

  /* Nothing to lead to (a missed start, nothing needed): the line reads as text. */
  .schedule-link:disabled .link-row-label {
    color: var(--text-secondary);
  }

  /* The note's icon and words keep their first line together; one line fills the touch height. */
  .armed-link.link-row {
    align-items: flex-start;
    min-height: var(--touch-min);
    padding: calc((var(--touch-min) - var(--type-caption-line)) / 2) 0;
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
  }

  .armed-link .link-row-label {
    font-weight: var(--weight-regular);
  }

  .armed-link .link-row-icon {
    margin-top: 1px;
  }

  .armed-link .link-row-chevron {
    align-self: center;
  }

  /* A set pause: its text opens the pause sheet; "Fortsetzen" stays its own button. */
  .pause-change {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch-min);
    margin: calc(-1 * var(--space-2)) 0;
    padding: var(--space-2) 0;
    border-radius: var(--radius-row);
    text-align: left;
    color: inherit;
  }

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

  .pause-change:disabled .disclosure-row-chevron {
    display: none;
  }

  /* ---------- Refill rate test ---------- */
  .refill-wizard {
    padding-bottom: var(--space-2);
  }

  .refill-wizard-intro {
    margin-bottom: var(--space-3);
    text-wrap: pretty;
  }

  .wizard-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .wizard-step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
  }

  .wizard-step[data-state="active"] {
    background: var(--surface-2);
  }

  .wizard-step-marker {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1.5px var(--text-tertiary);
    color: var(--text-secondary);
    font-size: var(--type-caption-size);
    font-weight: var(--weight-semibold);
  }

  .wizard-step[data-state="active"] .wizard-step-marker {
    background: var(--accent);
    box-shadow: none;
    color: var(--on-accent);
  }

  .wizard-step[data-state="done"] .wizard-step-marker {
    box-shadow: inset 0 0 0 1.5px var(--success);
    color: var(--success);
  }

  .wizard-step-check {
    display: grid;
  }

  .wizard-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 3px;
  }

  .wizard-step-title {
    font-weight: var(--weight-medium);
  }

  .wizard-step[data-state="todo"] .wizard-step-title {
    color: var(--text-secondary);
  }

  .wizard-step-detail {
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  .refill-wizard[data-tone="warning"] .wizard-step[data-state="active"]:last-child .wizard-step-detail {
    color: var(--warning);
  }

  .wizard-step .progress {
    margin-top: var(--space-2);
  }

  .refill-history {
    margin-top: var(--space-3);
  }

  .refill-history > .section-key {
    margin-bottom: var(--space-1);
  }

  /* ---------- On-screen keypad over a page (components/keyboard.js revealPageOwner) ----------
     Room below the page's content, so its last field can scroll above the keypad. */
  :root[data-keyboard-open] .app-main {
    padding-bottom: calc(var(--keyboard-height, 360px) + var(--space-4));
  }

  /* ---------- Phones ---------- */
  @container app (max-width: 699px) {
    .save-bar {
      padding-left: var(--space-3);
    }

    .save-bar-actions {
      flex: 1 1 100%;
      justify-content: flex-end;
    }

    .rate-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .rate-row .form-control {
      justify-self: start;
    }

    /* A set pause: its text (with its chevron) takes the width, "Fortsetzen" goes under it. */
    .pause-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .pause-row .form-control {
      justify-self: start;
    }

    .planning-cycles .segmented-option {
      padding: 0 2px;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .disclosure-row:not(:disabled):hover .disclosure-row-chevron,
    .pause-change:not(:disabled):hover .disclosure-row-chevron,
    .rate-open:not(:disabled):hover .disclosure-row-chevron,
    .flow-row:hover .disclosure-row-chevron {
      color: var(--text-secondary);
    }

    .choice-row:not(:disabled):hover {
      background: var(--surface-3);
    }
  }
}