/* =========================================================
   Klar — sheet dialog
   ----------------------------------------------------------
   Dialogs stay in the mobile context: a readable title, a close
   button, focus led in and returned, Escape and Cancel changing
   nothing (UIUX.md).

   The reference positions its dialog against the phone frame with
   inline styles. In production there is no frame, so the sheet is
   simply centred in the viewport and capped at the content width —
   which is also what keeps it inside a 320 px screen.
   ========================================================= */

dialog.sheet {
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 25px;
  width: min(var(--container-max), calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - 40px));
  overflow: auto;
  box-shadow: var(--shadow-lg);
  margin: auto;
  overscroll-behavior: contain;
}

dialog.sheet::backdrop {
  background: rgba(22, 39, 31, 0.4);
  backdrop-filter: blur(3px);
}

.sheet__head {
  padding: 20px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

.sheet__head h2 {
  font-size: var(--text-xl);
  overflow-wrap: anywhere;
  min-width: 0;
}

.sheet__content {
  padding: 8px 20px 22px;
  display: grid;
  gap: 18px;
  min-width: 0;
}

.sheet__content > * {
  min-width: 0;
}

/* Gestapelt, nicht nebeneinander -- aus zwei Gruenden, die beide zaehlen.
 *
 * Die Konzeptform: ``dialog-delete-recipe`` stellt ``secondary.full`` ueber
 * ``primary.full``, zwei Knoepfe in voller Breite untereinander. Unsere
 * Markup-Reihenfolge stimmt damit bereits ueberein.
 *
 * Und die Sicherheit: nebeneinander teilen sich „Abbrechen" und „Endgueltig
 * loeschen" eine Kante, und die zerstoerende Aktion liegt rechts, wo der
 * Daumen ohnehin ruht. Gestapelt liegen rund 60 px dazwischen. Das wiegt
 * schwerer, seit die Bestaetigung nicht mehr rot gefuellt ist, sondern
 * ``primary`` wie im Kit -- wir haben die Warnfarbe abgegeben, also nehmen wir
 * uns den Abstand.
 *
 * ``.sheet__actions > .btn`` ist entfallen: im Raster ist jedes Kind schon
 * voll breit, die Flex-Zeile brauchte die Regel nur, um es zu erzwingen.
 *
 * Benannte Abweichung: das Konzept hat gar keinen Aktionsblock, seine Knoepfe
 * stehen im ``sheet-content`` mit dessen 18 px Abstand. Unserer ist ein
 * eigener gepolsterter Bereich; 18 px zwischen zwei Knoepfen darin saehen
 * verloren aus, deshalb bleiben es 9. */
.sheet__actions {
  display: grid;
  gap: 9px;
}

/* Der Mahlzeitenbogen ist der einzige mit einer langen, scrollenden Liste.
 * Seine Hauptaktion bleibt deshalb unten stehen, so wie ``.sheet__head`` oben
 * stehen bleibt: sonst wandert „Auswahl übernehmen" bei vielen Mahlzeiten aus
 * dem Bild, und die einzige Art, die Auswahl durchzusetzen, wäre erst zu
 * scrollen. Das eigene Polster, weil ``.sheet__actions`` keines mitbringt --
 * jede Verwendung setzt ihres selbst (siehe ``.sheet--household``). */
.sheet__actions--anchored {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* Household forms retain separate Django POST actions while sharing the
   reference's inset, vertically spaced dialog layout. */
.sheet--household {
  --household-inset: 20px;
}

.sheet--household .household-permissions {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
  display: grid;
  gap: 18px;
}

.sheet--household .sheet__actions {
  padding: 0 var(--household-inset) 22px;
}

.sheet--household .sheet__content .hint {
  margin: 0;
}

.sheet--household form + form {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.sheet--household .permission-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sheet--household .permission-row input {
  flex-shrink: 0;
}

/* A choice row inside a sheet: label left, meaning right. */
.sheet__choice {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  padding: 13px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  font-size: var(--text-base);
  color: inherit;
  text-decoration: none;
  align-items: center;
}

.sheet__choice small {
  color: var(--muted);
  display: block;
  font-size: var(--text-xs);
  margin-top: 5px;
}

/* An action list: one destination per row, 60 px tall. */
.sheet__list {
  display: grid;
  gap: 5px;
}

.sheet__list > a,
.sheet__list > button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px;
  border: 0;
  background: var(--surface);
  text-align: left;
  border-radius: 12px;
  font-size: var(--text-base);
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  width: 100%;
}

.sheet__list > a:hover,
.sheet__list > button:hover {
  background: var(--bg);
}

.sheet__list .sheet__caret {
  margin-left: auto;
  color: var(--muted);
  flex-shrink: 0;
}

/* A radio list of fixed types (new meal, copy target). */
.sheet__radio-list {
  display: grid;
  gap: 8px;
}

.sheet__radio-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-size: var(--text-base);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-weight: 600;
}

.sheet__radio-list input {
  width: 17px;
  height: 17px;
  min-width: 17px;
  accent-color: var(--accent);
}

.sheet__radio-list svg {
  color: var(--accent);
  width: 19px;
  height: 19px;
}

@media (max-width: 350px) {
  .sheet--household {
    --household-inset: 15px;
  }
  dialog.sheet {
    border-radius: 20px;
    width: calc(100vw - 16px);
  }
  .sheet__head,
  .sheet__content {
    padding-left: 15px;
    padding-right: 15px;
  }
}