/*
 * Fallwerk – Dialoge und Karten zu Schlüsseln und Wiederherstellungszugang (Statusleiste und V1-Dialoge: entfernt mit AL3b)
 * Verwendet ausschließlich Tokens aus tokens.css und die Breakpoints 640px, 1024px, 1440px.
 * Ergänzt akten.css (Hinweise, Kennzeichen) und akten-formulare.css (Dialog, Formulare).
 */

.notice__actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Dialog der Abläufe: auch bei schmalen Bildschirmen und großer Schrift ohne Überlauf */
.dialog--key {
  max-width: var(--layout-width-dialog-key);
  padding: var(--space-4);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.dialog--key[open] {
  grid-template-columns: minmax(0, 1fr);
}

.dialog--key .form-error {
  align-items: flex-start;
  margin-bottom: 0;
}

.dialog--key .field input {
  width: 100%;
}

/* Kontrollkästchen mit anklickbarem Label (Klickfläche mindestens 44 px) */
.inline-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--target-min-size);
  padding-block: var(--space-2);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
}

.inline-check input[type="checkbox"] {
  flex: none;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
  margin: 0;
  padding: 0;
  accent-color: var(--color-primary);
}

/* Fortschrittsanzeige (Kontoschritt und Paketsatz) */
.progress {
  flex: 1;
  min-width: 0;
  height: var(--space-3);
  accent-color: var(--color-primary);
}

/* Einmalige Anzeige des Wiederherstellungscodes */
.recovery-code {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  color: var(--color-code-text);
  background: var(--color-code-bg);
  border: var(--border-width) solid var(--color-code-border);
  border-radius: var(--radius-surface);
}

.recovery-code__group {
  display: inline-block;
}

.print-only {
  display: none;
}

/* Einstellungen: Schlüsselzugang */
.key-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  justify-items: start;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.key-section > * {
  max-width: 100%;
}

.key-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: 0;
}

.key-facts dt {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.key-facts dd {
  margin: 0 0 var(--space-2);
  overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .dialog--key {
    padding: var(--space-5);
  }

  .key-facts {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .key-facts dd {
    margin: 0;
  }
}

/* Druck: nur der Wiederherstellungscode mit kurzem Hinweis, gleich ob er im Schlüsseldialog, im Kontoschritt nach der
   Anmeldung oder in den Einstellungen steht. Die Regeln greifen nur, solange ein Druckbereich angezeigt wird; ohne ihn
   bleibt die Druckansicht der Seite unverändert. Ausgeblendet wird alles außer dem Druckbereich und seinen Vorfahren. */
@media print {
  body:has(#p-print-area) *:not(#p-print-area, #p-print-area *, :has(#p-print-area)) {
    display: none !important;
  }

  body:has(#p-print-area) :has(#p-print-area) {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    color: var(--color-code-text);
    background: none;
    border: 0;
    box-shadow: none;
  }

  .no-print,
  #p-print-area p:not(.print-only):not(.recovery-code) {
    display: none !important;
  }

  .print-only {
    display: block;
  }

  /* Druck ist immer hell (theme.css): Code schwarz auf weiß, ohne Akzentfläche */
  .recovery-code {
    color: var(--color-code-text);
    background: none;
    border: 2px solid var(--color-code-border);
  }
}

/* S5a2: Kontoschritt nach der Anmeldung (Pflichtwechsel, Einrichtung, FW2-Wiederherstellung). Muster der Anmeldekarte,
   in der Breite des Schlüsseldialogs, weil die Paketsatz-Schritte (Codeanzeige, Fortschritt) darin Platz brauchen. */
.account-gate .login__card {
  max-width: var(--layout-width-dialog-key);
}