/* ==========================================================================
   components.css — wiederverwendbare Bausteine.
   Keine Datei ausserhalb setzt Farben direkt; alles läuft über tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schaltflächen
   Die Hauptschaltfläche steht auf Lime mit dunkler Schrift — in dieser
   Richtung liegt der Kontrast bei rund 11:1. Umgekehrt, Lime als Schriftfarbe
   auf hellem Grund, wären es 1,5:1 und damit unlesbar.
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--border);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);

  /* Mindestens 44 px hoch — sonst ist die Fläche am Handy zu klein zum Treffen. */
  min-height: 2.875rem;
  padding: var(--space-2xs) var(--space-md);

  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);

  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-border: var(--accent);
  font-weight: 600;
}

.btn-primary:hover {
  --btn-bg: color-mix(in oklab, var(--accent) 88%, black);
  --btn-border: color-mix(in oklab, var(--accent) 88%, black);
}

/* Der Rand ist bewusst kräftiger als die allgemeine Trennlinie: Eine
   Schaltfläche muss auch ohne Mauszeiger als solche erkennbar sein. Der
   gewählte Ton erreicht gegenüber der weissen Fläche 3,6:1 und liegt damit
   über den 3:1, die für Bedienelemente gefordert sind — mit der blassen
   Trennlinienfarbe waren es nur 1,2:1. */
.btn-secondary {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  --btn-border: color-mix(in oklab, var(--ink) 45%, var(--border));
  /* Ganze Pixel: Browser runden Randbreiten auf Gerätepixel, 1.5px wurde
     dadurch stillschweigend wieder zu 1px. */
  border-width: 2px;
}

.btn-secondary:hover {
  --btn-border: var(--ink);
}

/* Für den Nebenweg — sichtbar, aber ohne der Hauptaktion Konkurrenz zu machen. */
.btn-quiet {
  --btn-bg: transparent;
  --btn-fg: var(--link);
  --btn-border: transparent;
  padding-inline: var(--space-2xs);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.btn-quiet:hover {
  box-shadow: none;
  transform: none;
  text-decoration-thickness: 2px;
}

.btn-lg {
  min-height: 3.25rem;
  padding-inline: var(--space-lg);
  font-size: var(--text-lg);
}

.btn-block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Textmarker
   Hebt ein Wort auf hellem Grund hervor, ohne die Kontrastregel zu brechen:
   die Schrift bleibt dunkel, Lime liegt als Fläche dahinter. Auf Lime erreicht
   der Text 10,4:1, auf dem Seitengrund 17:1 — beides weit über der Grenze.
   Lime als Schriftfarbe wäre dagegen bei 1,7:1 gelandet.

   Der Strich sitzt bewusst nicht auf voller Höhe, sondern liegt wie ein
   gezogener Marker im unteren Drittel.
   -------------------------------------------------------------------------- */

.highlight {
  background-image: linear-gradient(
    to bottom,
    transparent 52%,
    color-mix(in oklab, var(--accent) 78%, transparent) 52%
  );
  background-repeat: no-repeat;
  padding-inline: 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Auf der Bühne braucht es den Marker nicht — dort darf Lime selbst Schrift
   sein. Der Strich würde die Zeile dort nur unruhig machen. */
.stage .highlight {
  background-image: none;
  color: var(--stage-accent);
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   Karten
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  container-type: inline-size;
}

.card-link {
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.card-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in oklab, var(--accent-2) 45%, var(--border));
}

.card h3 {
  font-size: var(--text-lg);
}

.card p {
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* Nummerierte Ablaufkarte. Die Nummer trägt hier echte Information — die
   Reihenfolge ist Teil der Aussage, deshalb ist sie sichtbar.

   Die Nummer steht auf einer Lime-Fläche statt in Lime-Schrift: Lime als
   Schriftfarbe käme auf hellem Grund auf 1,66:1 und wäre bei Sonnenlicht
   praktisch unlesbar. Als Fläche mit dunkler Ziffer darauf sind es 10,4:1 —
   und die Zahl fällt sogar stärker auf. Derselbe Kniff wie beim Hauptknopf
   und beim Textmarker. */
.step {
  position: relative;
  padding-block-start: var(--space-sm);
  border-top: 2px solid var(--accent);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  counter-increment: step;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 2.4rem;
  padding: 0.2em 0.6em;
  margin-block-end: var(--space-xs);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.steps {
  counter-reset: step;
}

/* --------------------------------------------------------------------------
   Platzhalter für noch fehlende Bilder.
   Steht im endgültigen Seitenverhältnis, damit das Layout jetzt schon sitzt
   und später nur die Bilddatei eingesetzt wird — ohne dass sich etwas
   verschiebt. Bewusst als sichtbare Fläche und nicht als leerer Raum, damit
   nicht vergessen wird, dass hier noch etwas hingehört.
   -------------------------------------------------------------------------- */

.placeholder {
  display: grid;
  place-content: center;
  gap: var(--space-3xs);
  aspect-ratio: 16 / 10;
  padding: var(--space-sm);
  background: repeating-linear-gradient(
    135deg,
    var(--surface-sunken) 0 12px,
    var(--surface) 12px 24px
  );
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  text-align: center;
}

.stage .placeholder {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--stage) 92%, white) 0 12px,
    color-mix(in oklab, var(--stage) 85%, white) 12px 24px
  );
}

/* --------------------------------------------------------------------------
   Kennzeichen
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0.25em 0.7em;
  background: color-mix(in oklab, var(--accent-2) 14%, var(--surface));
  color: var(--link);
  border: 1px solid color-mix(in oklab, var(--accent-2) 30%, var(--border));
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.stage .badge {
  background: color-mix(in oklab, var(--stage-accent) 16%, transparent);
  color: var(--stage-accent);
  border-color: color-mix(in oklab, var(--stage-accent) 38%, transparent);
}

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */

/* Native <fieldset>/<legend> bringen einen Rand, einen Innenabstand und eine
   Mindestbreite mit, die dieses Projekt sonst ueberall zurueckgesetzt hat.
   Ohne diese Zeilen zeigte jede gruppierte Frage im Automatisierungs-Check
   einen browsereigenen Rahmen, der zum sonstigen Erscheinungsbild nicht
   passt, und die Legende saesse leicht eingerueckt gegenueber gewoehnlichen
   Labeln. Betrifft jedes <fieldset>/<legend> im Projekt, nicht nur den
   Check -- gehoert deshalb hierher statt in eine Seiten-eigene Datei. */
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

.field {
  display: grid;
  gap: var(--space-3xs);
}

.field > label,
.fieldset-legend {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-snug);
}

/* Fuer eine Legende, die einen ganzen Abschnitt ueberschreibt (z.B. je Block
   im Automatisierungs-Check), statt nur eine einzelne Frage/Gruppe zu
   beschriften -- derselbe Baustein, nur groesser, ueber ein bestehendes
   Groessen-Token statt eines wiederholten Inline-Stils.
   margin-block-end noetig, weil <legend> am Rasterfluss des umschliessenden
   .stack/.stack-lg-Fieldsets NICHT teilnimmt (Browser rendern sie ausserhalb
   des Rasters) -- das gap des Fieldsets wirkt deshalb nur zwischen den
   uebrigen Kindern, nicht zwischen Legende und erstem Kind. Dasselbe Token
   wie stack-lg (var(--space-md)) haelt den Abstand im selben Rhythmus wie
   die 28px-Luecken daneben, statt eine zweite, abweichende Zahl einzufuehren. */
.fieldset-legend-lg {
  font-size: var(--text-xl);
  margin-block-end: var(--space-md);
}

.field-hint {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.7em 0.85em;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--ink-soft);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 var(--focus-ring) color-mix(in oklab, var(--link) 25%, transparent);
}

.textarea {
  min-height: 7rem;
  resize: vertical;
}

.field-error .input,
.field-error .textarea,
.field-error .select {
  border-color: var(--danger);
}

.error-text {
  color: var(--danger);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Auswahlfelder als anklickbare Kacheln. Das ganze Feld ist Trefferfläche,
   nicht nur das kleine Kästchen — am Handy der entscheidende Unterschied. */
.choices {
  display: grid;
  gap: var(--space-2xs);
  border: 0;
  padding: 0;
  margin: 0;
}

.choices-inline {
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  min-height: 2.875rem;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.choice:hover {
  border-color: var(--ink-soft);
}

.choice input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-block-start: 0.28rem;
  accent-color: var(--link);
}

/* :has() erspart die JavaScript-Klasse, die man dafür früher gebraucht hätte. */
.choice:has(input:checked) {
  border-color: var(--link);
  background: color-mix(in oklab, var(--accent-2) 8%, var(--surface));
}

.choice:has(input:focus-visible) {
  outline: var(--focus-ring) solid var(--link);
  outline-offset: 2px;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
}

.consent input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-block-start: 0.2rem;
  accent-color: var(--link);
}

/* Honigtopf — für Menschen unsichtbar, für einfache Bots verlockend.
   Bewusst nicht display:none, das durchschauen manche Skripte. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Schrittweise Fuehrung (wizard.js) — greift ausschliesslich unter der
   Markierung data-wizard="an", die das Skript selbst beim Start am
   Formular setzt. Kein Block ist ohne diese Markierung verborgen: laeuft
   wizard.js nicht (JavaScript aus, Skript schlaegt fehl), bleibt die
   Markierung aus und diese Regel wirkungslos — alle sechs <fieldset>
   bleiben sichtbar.
   [hidden] blendet Inhalt zwar schon ueber die eingebaute Formatvorlage
   des Browsers aus, die hier nur ausdruecklich nachgebildet wird — noetig,
   weil .btn selbst ein display setzt (inline-flex) und eine Auszeichnung
   mit gleichem Ursprung (Autor-CSS) die eingebaute [hidden]-Regel sonst
   ueberstimmt: Vor/Zurueck blieben sonst trotz hidden-Attribut als Flaeche
   sichtbar, nur ohne Beschriftung. */
[data-wizard="an"] [data-wizard-block][hidden],
[data-wizard="an"] .btn[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Vorbereitungsgrad — die Leitmechanik des Checks.
   Kein Fortschrittsbalken („noch 3 Schritte"), sondern eine Gewinnanzeige:
   jede Antwort macht das spätere Gespräch besser.
   -------------------------------------------------------------------------- */

/* Der permanente Ausstieg (.btn-quiet traegt bereits --link/--deep als
   Textfarbe, siehe Kontrastregel) -- der eigene Abstand hier ist noetig,
   weil .stack-lg auf dem umschliessenden .wrap ohne .stack kein
   display:grid setzt und sein gap deshalb wirkungslos bleibt. */
.check-exit {
  margin-block-end: var(--space-sm);
}

.readiness {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.readiness-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
}

.readiness-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--link);
}

.readiness-track {
  height: 0.6rem;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.readiness-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: inherit;
  transition: width var(--dur-slow) var(--ease);
}

/* Feste Mindestbreite fuer den laengsten der vier Buttontexte ("Sehr gut
   vorbereitet — anfragen") -- die Breite des Knopfes bleibt dadurch bei
   allen vier Texten gleich, kein Ruckeln und kein Verschieben des
   Seitenlayouts beim Wechsel. --btn-fixed-min steht in tokens.css (ch statt
   rem, skaliert mit der clamp()-Schriftgroesse). min() haelt sie auf
   schmalen Bildschirmen unter der verfuegbaren Breite (gleiches Muster wie
   bei den Rasterspalten in layout.css), statt ueberzulaufen. */
[data-readiness-button] {
  min-width: min(var(--btn-fixed-min), 100%);
}

/* --------------------------------------------------------------------------
   Akkordeon über <details> — natives Element, funktioniert ohne JavaScript
   und ist von Haus aus tastaturbedienbar.
   -------------------------------------------------------------------------- */

.accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.accordion + .accordion {
  margin-block-start: var(--space-2xs);
}

.accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 2.875rem;
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-display);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.accordion > summary::-webkit-details-marker {
  display: none;
}

.accordion > summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--link);
  border-bottom: 2px solid var(--link);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}

.accordion[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.accordion-body {
  padding: 0 var(--space-sm) var(--space-sm);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Kopfbereich und Navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--page) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.brand-mark {
  flex: none;
  width: 2rem;
  height: 2rem;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}

.nav-link:hover {
  background: var(--surface-sunken);
}

.nav-link[aria-current="page"] {
  color: var(--link);
  background: color-mix(in oklab, var(--accent-2) 10%, transparent);
}

/* Bis 60rem klappt die Navigation über ein <details> auf — ohne JavaScript
   voll bedienbar. main.js verbessert nur das Schliessverhalten. */
.nav-toggle {
  display: block;
}

.nav-toggle > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: 2.75rem;
  padding-inline: var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.nav-toggle > summary::-webkit-details-marker {
  display: none;
}

/* Ein zugeklapptes <details> blendet seinen Inhalt normalerweise selbst aus —
   bei absolut positionierten Kindern greift das aber nicht zuverlässig. Ohne
   diese Zeile bleiben die Menüpunkte anklickbar und für Vorleseprogramme
   vorhanden, obwohl das Menü geschlossen ist, und ragen über den Bildschirmrand
   hinaus. Gemessen auf 360 px: rechte Kante bei 445 px. */
.nav-toggle:not([open]) .nav-panel {
  display: none;
}

.nav-panel {
  position: absolute;
  inset-inline: var(--gutter);
  margin-block-start: var(--space-2xs);
  padding: var(--space-2xs);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.nav-panel .nav-list {
  flex-direction: column;
  align-items: stretch;
}

.nav-panel .nav-link {
  justify-content: flex-start;
  border-radius: var(--radius-md);
}

.nav-desktop {
  display: none;
}

@media (min-width: 60rem) {
  .nav-toggle {
    display: none;
  }

  .nav-desktop {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Fußbereich
   -------------------------------------------------------------------------- */

.site-footer {
  margin-block-start: var(--space-2xl);
  padding-block: var(--space-lg);
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--link);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Platzhalter im Fließtext.
   Markiert Angaben, die Jens noch liefern muss — Anschrift, Steuernummer,
   Hostername. Bewusst auffällig: geht die Seite versehentlich unausgefüllt
   live, sieht man es sofort statt erst bei der ersten Abmahnung.
   Suchbar über die Zeichenkette „ph-todo".
   -------------------------------------------------------------------------- */

.ph-todo {
  background: color-mix(in oklab, var(--danger) 12%, var(--surface));
  color: var(--danger);
  padding: 0.1em 0.4em;
  border: 1px dashed color-mix(in oklab, var(--danger) 45%, transparent);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Hinweisfeld
   -------------------------------------------------------------------------- */

.notice {
  padding: var(--space-xs) var(--space-sm);
  background: color-mix(in oklab, var(--accent-2) 10%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent-2) 32%, var(--border));
  border-left-width: 4px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.notice-warn {
  background: color-mix(in oklab, var(--danger) 8%, var(--surface));
  border-color: color-mix(in oklab, var(--danger) 32%, var(--border));
}

/* --------------------------------------------------------------------------
   Zusammenfassung des Automatisierungs-Checks (render_summary() im Format
   'html', app/summary.php) -- auf der Danke-Seite eingebettetes, bereits
   maskiertes HTML ohne eigenes Seitengerüst. Die sieben Klassen hier sind
   genau die, die render_summary() tatsächlich erzeugt (siehe dessen
   Quelltext) -- kein Druckstil, der folgt erst in einer späteren Aufgabe.
   -------------------------------------------------------------------------- */

.summary-block {
  display: grid;
  gap: var(--space-sm);
}

.summary-block + .summary-block {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-lg);
  border-top: 1px solid var(--border);
}

.summary-block__title {
  font-size: var(--text-lg);
}

.summary-block__list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
}

.summary-block__item {
  display: grid;
  gap: var(--space-3xs);
}

.summary-block__question {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink-soft);
}

.summary-block__answer {
  margin: 0;
}

.summary-block__answer-list {
  display: grid;
  gap: var(--space-3xs);
  margin: 0;
  padding-inline-start: 1.25em;
}