/*
 * The app's screens before the garden (cloud/screens.js): sign in, pair,
 * choose a site. One column like a phone's own setup: the mark, a large
 * title, a sentence, the choice; the primary button at the bottom within
 * the thumb's reach. Reads tokens only; touch targets from --touch-min;
 * nothing below 13 px. Only the app (config.app) shows them.
 */
@layer pages {
  .cloud-gate {
    min-height: calc(100dvh / var(--display-zoom));
    display: flex;
    justify-content: center;
    background: var(--surface-0);
  }

  .cloud-screen {
    width: min(100%, 480px);
    min-height: calc(100dvh / var(--display-zoom));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding:
      calc(var(--safe-top) + var(--space-10)) var(--space-5)
      calc(var(--safe-bottom) + var(--space-5));
  }

  .cloud-mark {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--type-headline-size);
    font-weight: 600;
    letter-spacing: var(--type-headline-tracking);
  }

  .cloud-mark-drop {
    width: 20px;
    height: 30px;
  }

  /* A screen with nothing to choose (sign in, paired, offline): the drop large, the words centred in the free height. */
  .cloud-screen[data-hero] .cloud-head {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .cloud-screen[data-hero] .cloud-mark-drop {
    width: 48px;
    height: 72px;
  }

  /* The title names Tropfwerk where it matters; the word beside a large drop would say it twice. */
  .cloud-screen[data-hero] .cloud-mark-word {
    display: none;
  }

  .cloud-screen[data-hero] .cloud-title {
    margin-top: var(--space-5);
  }

  .cloud-screen[data-hero] .cloud-body {
    text-align: center;
  }

  .cloud-title {
    margin: var(--space-6) 0 0;
    font-size: var(--type-title1-size);
    line-height: var(--type-title1-line);
    letter-spacing: var(--type-title1-tracking);
    font-weight: 700;
    outline: none;
  }

  .cloud-lead {
    margin: var(--space-3) 0 0;
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-line);
    color: var(--text-secondary);
  }

  .cloud-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .cloud-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .cloud-problem {
    margin: 0;
    color: var(--warning);
  }

  .cloud-note {
    margin: 0;
    color: var(--text-secondary);
  }

  /* The code from the kiosk: large, even figures, as the kiosk shows it. */
  .cloud-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .cloud-field-label {
    font-weight: 600;
  }

  .cloud-code-input {
    min-height: var(--touch-min);
    box-sizing: border-box;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--surface-1);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--type-title2-size);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cloud-code-input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .cloud-field-hint {
    margin: 0;
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    color: var(--text-secondary);
  }

  /* The two ways to pair: the question over the app's answer list (zone-wizard.css .answer-list). */
  .cloud-choices-question {
    margin: 0 0 var(--space-2);
    font-weight: 600;
  }

  .cloud-sites {
    margin: 0;
  }

  /* Einstellungen › Konto in the app (pages/settings/account-section.js). */
  .account-who {
    margin: 0;
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-line);
    font-weight: 600;
  }

  .account-site {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
  }

  .account-links,
  .account-actions {
    margin-top: var(--space-4);
  }

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

  /* Einstellungen › Zugänge (pages/settings/access-section.js): one row per access, "Entfernen" at its end. */
  .access-lead {
    margin: 0;
  }

  .access-list {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
  }

  .access-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch-min);
    padding: var(--space-2) 0;
  }

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

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

  .access-name {
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-line);
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .access-line {
    color: var(--text-secondary);
  }
}