/* Reusable components: button, speech bubble, editor with example papers, correction cards,
   task checklist, video player, form controls, FAQ items. */

/* Button: one primary style, pressable, with a solid bottom edge that collapses on press */
.btn { display: inline-grid; place-items: center; min-block-size: 56px; padding: 0 28px; border: 0; border-radius: 16px;
  background: var(--brand); color: var(--on-brand); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  box-shadow: 0 5px 0 var(--brand-edge); transition: translate .08s, box-shadow .08s; }
.btn:hover { background: color-mix(in oklab, var(--brand) 88%, #000); }
.btn:active { translate: 0 5px; box-shadow: 0 0 0 var(--brand-edge); }
.btn-small { min-block-size: 44px; padding: 0 18px; font-size: var(--small); border-radius: 14px; box-shadow: 0 4px 0 var(--brand-edge); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Speech bubble of the hedgehog; the tail points to the mascot below */
.bubble { position: relative; padding: 12px 16px; border: 2px solid var(--line); border-radius: 18px; background: var(--surface);
  font-weight: 550; line-height: 1.4; }
.bubble::after { content: ''; position: absolute; inset-block-end: -9px; inset-inline-end: 56px; inline-size: 16px; block-size: 16px;
  background: inherit; border: solid var(--line); border-width: 0 2px 2px 0; rotate: 45deg; }

/* Editor: one surface holding the example papers */
.editor { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); overflow: clip; }
.examples { min-inline-size: 0; padding: clamp(18px, 4.5vw, 28px); }
.tap-hint { padding: 14px clamp(18px, 4.5vw, 28px) 0; font-size: var(--small); color: var(--ink-2); }
@media (min-width: 900px) { .tap-hint { display: none; } } /* the hedgehog's bubble says it there */

/* Level and example tabs: radio groups, work without JS */
.ex-tabs, .level-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.level-tabs { margin-block-end: 16px; }
.ex-tabs { padding: 4px; margin: -4px -4px 18px; }
.ex-tabs label, .level-tabs label { position: relative; flex: none; cursor: pointer; }
.ex-tabs input, .level-tabs input { position: absolute; inset: 0; opacity: 0; inline-size: 100%; block-size: 100%; margin: 0; cursor: pointer; }
.ex-tabs span, .level-tabs span { display: grid; place-items: center; min-block-size: 44px; border: 1.5px solid var(--line);
  color: var(--ink-2); transition: background-color .2s, border-color .2s, color .2s; }
.level-tabs span { min-inline-size: 56px; padding-inline: 14px; border-radius: 12px; font-weight: 650; }
.ex-tabs span { padding-inline: 16px; border-radius: 999px; font-weight: 550; font-size: var(--small); }
@media (hover: hover) {
  .ex-tabs label:hover span, .level-tabs label:hover span { border-color: var(--ink-2); color: var(--ink); background: var(--tint); }
}
.level-tabs label:has(input:checked) span { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.ex-tabs label:has(input:checked) span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
:is(.ex-tabs, .level-tabs) label:has(input:focus-visible) span { outline: 3px solid var(--brand); outline-offset: 2px; }
.ex-tabs-label { font-size: var(--small); color: var(--ink-2); margin-block-end: 6px; }

/* Levels and papers: the checked level, then its checked example (a level with one example has no tabs).
   Exam order in a paper: the task, the window with the letter, what the check found.
   Wide screens (founder choice 30.10.2026, «Две колонки»): the task stays on the left like the exam sheet. */
.level, .paper { display: none; }
.examples:has([value="A1"]:checked) [data-level="A1"], .examples:has([value="A2"]:checked) [data-level="A2"],
.examples:has([value="B1"]:checked) [data-level="B1"], .examples:has([value="B2"]:checked) [data-level="B2"] { display: block; }
.paper:only-of-type,
.level:has(.ex-tabs label:nth-child(1) input:checked) .paper:nth-of-type(1),
.level:has(.ex-tabs label:nth-child(2) input:checked) .paper:nth-of-type(2),
.level:has(.ex-tabs label:nth-child(3) input:checked) .paper:nth-of-type(3),
.level:has(.ex-tabs label:nth-child(4) input:checked) .paper:nth-of-type(4) { display: grid; }
.paper { gap: 22px; }
.paper-main { display: grid; gap: 14px; }
@media (min-width: 900px) {
  .paper { grid-template-columns: 340px minmax(0, 1fr); align-items: start; column-gap: 32px; }
  .paper-free { grid-template-columns: minmax(0, 1fr); } /* a free text has no task column */
  .task-check { position: sticky; top: 16px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
  .task-check ul { grid-template-columns: 1fr; }
}
/* A newly shown level, example or letter view fades in (founder round 4, item 9); instant under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .level, .paper, .letter { transition: opacity .3s ease, translate .3s ease; }
  @starting-style { .level, .paper, .letter { opacity: 0; translate: 0 6px; } }
}
.window-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
/* «Оригинал / Исправленный»: one switch, the knob shows which text is on screen (founder round 4, item 7) */
.toggle { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; cursor: pointer; font-size: var(--small); font-weight: 550; color: var(--ink-2); user-select: none; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track { position: relative; flex: none; inline-size: 52px; block-size: 30px; border-radius: 999px; background: var(--line-strong); transition: background-color .25s; }
.toggle-track::after { content: ''; position: absolute; inset: 3px auto auto 3px; inline-size: 24px; block-size: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: translate .25s cubic-bezier(.3, .7, .4, 1.2); }
.toggle .t-off, .toggle:has(input:checked) .t-on { color: var(--ink); font-weight: 650; }
.toggle:has(input:checked) .t-off { color: var(--ink-2); font-weight: 550; }
.toggle:has(input:checked) .toggle-track { background: var(--brand); }
.toggle:has(input:checked) .toggle-track::after { translate: 22px 0; }
.toggle:has(input:focus-visible) .toggle-track { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) {
  .toggle:hover .toggle-track { background: var(--ink-2); }
  .toggle:hover:has(input:checked) .toggle-track { background: var(--brand-edge); }
}
@media (prefers-reduced-motion: reduce) { .toggle-track, .toggle-track::after { transition: none; } }
/* The legend under the result (founder round 4, item 1), quiet and pressed to the right edge.
   It uses the same wavy marks as the letter, so the reader links them at once. */
.legend-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; font-size: 0.875rem; color: var(--ink-2); }
@media (max-width: 899px) { .legend-row { justify-content: flex-start; gap: 4px 12px; font-size: 0.8125rem; } } /* one compact row on phones */
.legend { text-decoration: underline wavy var(--err) 1.5px; text-underline-offset: 0.28em; text-decoration-skip-ink: none; }
.legend-style { text-decoration-color: var(--style); }
.window { border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: clamp(14px, 3vw, 24px) clamp(14px, 3vw, 28px) 12px; }
.letter { font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.3125rem); line-height: 1.85; overflow-wrap: anywhere; }
.letter-fixed, .paper-main:has(.toggle input:checked) .letter-marked { display: none; }
.paper-main:has(.toggle input:checked) .letter-fixed { display: block; }
.letter-fixed ins { text-decoration: none; font-weight: 650; color: var(--brand-ink); background: var(--brand-soft); border-radius: 4px; padding-inline: 2px; }
/* Word counter in the window's corner, like an editor's */
.count { margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px solid var(--line); font-size: var(--small); color: var(--ink-2); text-align: end; }
.count b { font-weight: 650; color: var(--err-ink); }
.count-ok b { color: var(--brand-ink); }
.paper-free .count b { color: var(--ink); } /* a free text has no minimum */
.count-ok b::before, .s-ok::before { content: '✓ '; }
.window-label { font-weight: 650; font-size: 1rem; }
/* What the check found: our own task score, the error count, then the five checks */
.result { display: grid; gap: 12px; }
.strip { display: flex; flex-wrap: wrap; gap: 8px; }
.s-score { background: var(--brand); color: var(--on-brand); }
.checks { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--small); color: var(--ink-2); }
.c-ok::before { content: '✓ '; color: var(--brand-ink); font-weight: 700; }
.c-no { color: var(--err-ink); }
.c-no::before { content: '✗ '; font-weight: 700; }
.strip li { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: var(--small); font-weight: 550; }
.strip b { font-size: 1.125rem; font-weight: 650; }
.s-err { background: var(--err-soft); color: var(--err-ink); }
.s-ok { background: var(--brand-soft); color: var(--brand-ink); }

/* «Другие варианты» (founder rounds 6-7): one correct sentence wears a soft blue tint with a dotted line, unlike the red and
   amber waves; tapping it (or Enter) opens a card with 2-3 tagged variants, placed like the correction card (.fix). */
.js .alt-sent { background: var(--alt-tint); border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  text-decoration: underline dotted var(--alt-line) 2px; text-underline-offset: 0.3em; cursor: pointer; transition: background-color .2s; }
@media (hover: hover) { .js .alt-sent:hover { background: var(--alt-tint-strong); } }
.alt-sent:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.paper:has(.alt:popover-open) .alt-sent { background: var(--alt-tint-strong); }
.legend-alt { background: var(--alt-tint); border-radius: 2px; text-decoration: underline dotted var(--alt-line) 2px; text-underline-offset: 0.28em; text-decoration-skip-ink: none; } /* no padding: same left edge and baseline as the waves */
html:not(.js) .legend-alt { display: none; }
.alt-head { font-weight: 650; }
.alt-note { font-size: 0.875rem; color: var(--ink-2); margin-block: 2px 8px; }
.alt-list { display: grid; gap: 10px; }
.alt-list li { display: grid; gap: 2px; padding-block-start: 8px; border-block-start: 1px solid var(--line); }
.alt-tag { justify-self: start; font-size: 0.8125rem; font-weight: 600; color: var(--brand-ink); }
.alt-text { font-size: 1.0625rem; color: var(--ink); }
.alt-why { font-size: 0.875rem; color: var(--ink-2); }
.alt .fix-cat, .alt::before { display: none; }
.alt { max-block-size: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
@supports (position-area: bottom) {
  @media (min-width: 720px) {
    /* Anchored on wide screens: open where there is most room, and never past the window's edge */
    .alt { max-inline-size: min(460px, 100vw - 32px); max-block-size: calc(100% - 20px); position-try-order: most-block-size; }
  }
}

/* Our rough level estimate for a free text: a quiet box, clearly not a score */
.level-est { display: grid; gap: 6px; padding: 14px 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius); font-size: var(--small); color: var(--ink-2); }
.level-est-head { color: var(--ink); font-size: 1rem; }
.level-est-head b { font-weight: 650; }
.level-est ul { display: grid; gap: 2px; padding-inline-start: 1.1em; list-style: disc; }
.level-est-tip { color: var(--ink); }
.level-est-note { font-size: 0.875rem; }

/* Error marks: the product's own mark. 44 px hit area without moving the line. */
.err { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; border-radius: 4px;
  padding: 10px 2px; margin-block: -10px; margin-inline: -2px;
  text-decoration: underline wavy var(--err) 1.5px; text-underline-offset: 0.28em; text-decoration-skip-ink: none; }
.err-word_choice, .err-word_order { text-decoration-color: var(--style); }
.err sup { font-size: 0.6em; font-weight: 650; color: var(--ink-2); margin-inline-start: 1px; }
button.err:hover, button.err:has(+ :popover-open) { background: var(--err-soft); }
/* Visible by default (screenshots, no JS); drawn in once when the papers enter the view (JS adds .is-drawn). */
@keyframes draw-err { from { text-decoration-color: transparent; } }
.examples.is-drawn .err { animation: draw-err 300ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .examples.is-drawn .err { animation: none; } }

/* Hint on the first example's first mark (founder round 5, item 4): a small blue bubble that bobs and a pulse around
   the word until the first tap (JS). Without JS the tap hint line above says it. */
.err.has-tip { position: relative; }
.tap-tip { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: -6px; z-index: 1; inline-size: max-content; max-inline-size: 15em;
  padding: 6px 12px; border-radius: 10px; background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-pop);
  font-size: 0.875rem; font-weight: 600; line-height: 1.3; white-space: normal; text-align: start; pointer-events: none; }
.tap-tip::after { content: ''; position: absolute; inset-block-end: 100%; inset-inline-start: calc(16px + var(--tip-shift, 0px)); border: 7px solid transparent; border-block-end-color: var(--brand); }
html:not(.js) .tap-tip, .examples.tip-done .tap-tip { display: none; }
/* Phones and tablets: the bubble would cover the letter, and the tap hint line above already says it; the pulse stays. */
@media (max-width: 899px) { .tap-tip { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* Loops until the first tap (founder, final copy round); static under reduced motion */
  .tap-tip { animation: tip-bob .6s ease-in-out infinite alternate; }
  .examples:not(.tip-done) .err.has-tip { animation: tip-pulse 1.4s ease-out infinite; }
}
@keyframes tip-bob { to { translate: 0 5px; } }
@keyframes tip-pulse { from { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 45%, transparent); } to { box-shadow: 0 0 0 12px transparent; } }

/* Correction card: a popover, a bottom sheet on phones and anchored to the word on wider screens */
.fix { font-size: 1rem; line-height: 1.5; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 18px; box-shadow: var(--shadow-pop);
  position: fixed; inset: auto 12px 12px 12px; margin: 0; inline-size: auto; max-inline-size: none; }
.fix::backdrop { background: transparent; }
/* Both cards (correction and variants) open with a short fade and rise, instant under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .fix { transition: opacity .18s ease-out, translate .18s ease-out; }
  @starting-style { .fix:popover-open { opacity: 0; translate: 0 8px; } }
}
.fix-close { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; display: grid; place-items: center; inline-size: 44px; block-size: 44px;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); cursor: pointer; }
.fix-close svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (hover: hover) { .fix-close:hover { background: var(--tint); color: var(--ink); } }
.fix-cat, .alt-head { padding-inline-end: 40px; }
@supports (position-area: bottom) {
  @media (min-width: 720px) {
    .fix { inset: auto; position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline; margin-block: 10px;
      inline-size: max-content; max-inline-size: min(380px, 100vw - 32px); }
  }
}
.fix-cat { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 550; color: var(--ink-2); margin-block-end: 4px; }
.fix-cat::before { content: ''; inline-size: 24px; block-size: 24px; flex: none; border-radius: 50%;
  background: var(--brand-soft) url(../assets/mascot/hedgehog-head.svg) center / 20px no-repeat; }
@media (prefers-color-scheme: dark) { .fix-cat::before { background-image: url(../assets/mascot/hedgehog-head-dark.svg); } }
.fix-pair { font-size: var(--step-1); line-height: 1.4; }
.fix-pair s { color: var(--err-ink); text-decoration-thickness: 1.5px; }
.fix-pair b { font-weight: 650; color: var(--brand-ink); background: var(--brand-soft); border-radius: 6px; padding: 1px 6px; }
.fix-arrow { color: var(--ink-2); padding-inline: 6px; }
.fix-why { margin-block-start: 6px; color: var(--ink-2); }

/* Task, as on the exam sheet: the situation, then the plan points that get ticked */
.task-check { font-size: var(--small); }
.task-check h4 { font-size: 1rem; font-weight: 650; }
.task-lead { color: var(--ink-2); margin-block: 4px 10px; max-inline-size: 70ch; }
/* Task 1: the business card and notes the description is written from */
.task-card { margin-block: 0 12px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--surface); line-height: 1.45; }
.task-check .task-card { gap: 2px; }
.task-card .card-name { font-weight: 650; }
.task-check ul { display: grid; gap: 8px; }
.tp { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.tp-text { display: grid; line-height: 1.35; }
.tp-gloss { color: var(--ink-2); font-size: 0.875rem; }
.tp-mark { position: relative; inline-size: 22px; block-size: 22px; margin-block-start: 1px; border-radius: 50%; border: 2px solid var(--line-strong); }
.tp-covered .tp-mark { border-color: var(--brand); background: var(--brand); }
.tp-covered .tp-mark::after { content: ''; position: absolute; inset: 4px 4px 7px 5px; border: solid var(--on-brand); border-width: 0 0 2.5px 2.5px; rotate: -45deg; }
.tp-partial .tp-mark, .tp-missing .tp-mark { border-color: var(--err); }
.tp-partial .tp-mark::after { content: ''; position: absolute; inset: 8px 4px; background: var(--err); border-radius: 1px; }
.tp-note { margin-block-start: 4px; color: var(--err-ink); font-size: 0.875rem; }

/* Video player: native controls (pause, seek, full screen) plus one big sound button */
.player { position: relative; }
.player video { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; background: var(--surface); border-radius: 14px; }
.player-bar { display: flex; flex-wrap: wrap; gap: 8px; padding-block-start: 8px; }
.player-bar[hidden], .pbtn[hidden] { display: none; }
.pbtn { display: inline-flex; align-items: center; gap: 8px; min-block-size: 48px; padding: 0 16px 0 12px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: var(--small); background: var(--ink); color: var(--bg); cursor: pointer; }
.pbtn svg { inline-size: 22px; block-size: 22px; fill: currentColor; }
@media (max-width: 479px) {
  /* One row at 360-390 px: the sound button shows its icon only, its label stays for screen readers */
  .player-bar { flex-wrap: nowrap; gap: 6px; }
  .pbtn { min-block-size: 44px; padding: 0 12px 0 9px; gap: 6px; white-space: nowrap; }
  .pbtn svg { inline-size: 20px; block-size: 20px; }
  .pbtn.sound { min-inline-size: 44px; padding: 0; justify-content: center; }
  .pbtn.sound span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (hover: hover) { .pbtn:hover { background: color-mix(in oklab, var(--ink) 85%, var(--bg)); } }
.sound .i-sound, .sound.is-on .i-muted, #play .i-pause, #play.is-on .i-play { display: none; }
#play.is-on .i-pause { display: block; }
.sound.is-on .i-sound { display: block; }

/* Form controls */
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
legend, .field > label { font-weight: 650; font-size: 1rem; padding: 0; margin-block-end: 8px; }
.hint { font-size: var(--small); color: var(--ink-2); margin-block: -4px 8px; }
.field { display: grid; }
input[type="text"], input[type="email"], select { font: inherit; color: var(--ink); background: var(--surface); inline-size: 100%; min-block-size: var(--control);
  padding: 12px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); }
input[type="text"]:hover, input[type="email"]:hover, select:hover { border-color: var(--ink-2); }
input[type="text"]:focus-visible, input[type="email"]:focus-visible, select:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
input[aria-invalid="true"] { border-color: var(--err); }
.error { margin-block-start: 8px; font-size: var(--small); color: var(--err-ink); }
input[type="radio"], input[type="checkbox"] { appearance: none; flex: none; inline-size: 22px; block-size: 22px; margin: 0; display: grid; place-content: center;
  border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"] { border-radius: 6px; }
input[type="radio"]::before { content: ''; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--on-brand); scale: 0; transition: scale .12s; }
input[type="checkbox"]::before { content: ''; inline-size: 11px; block-size: 6px; border: solid var(--on-brand); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -1px; scale: 0; }
input:checked { border-color: var(--brand); background: var(--brand); }
input:checked::before { scale: 1; }
input[type="checkbox"][aria-invalid="true"] { border-color: var(--err); }
/* Choice tiles: price and exam level */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.options-wide { grid-template-columns: 1fr; }
.option { display: flex; align-items: center; gap: 12px; min-block-size: var(--control); padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; line-height: 1.4; }
.option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
@media (hover: hover) { .option:hover { border-color: var(--ink-2); } }
.option b { font-weight: 650; }
/* The other contact: a disclosure that looks like a link */
.alt-contact summary { min-block-size: 44px; padding: 0; font-weight: 550; color: var(--brand-ink); text-decoration: underline; text-underline-offset: 0.2em; justify-content: flex-start; }
.alt-contact summary::after { content: none; }
.alt-contact[open] summary { margin-block-end: 8px; }
.alt-contact { border: 0; }
.alt-contact .field { padding-block-end: 4px; }
.link-btn { font: inherit; font-weight: 550; color: var(--brand-ink); background: none; border: 0; padding: 0 8px; min-block-size: 44px; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* FAQ item */
details { border-block-end: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-block-size: 64px; padding-block: 16px; font-weight: 550; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 1.5rem; font-weight: 300; line-height: 1; color: var(--brand-ink); transition: rotate .15s; }
details[open] summary::after { rotate: 45deg; }
@media (hover: hover) { summary:hover, .link-btn:hover { color: var(--brand-ink); } }
details p { padding-block-end: 22px; color: var(--ink-2); max-inline-size: 60ch; }
details p:has(+ p) { padding-block-end: 10px; }
/* Smooth open and close where the browser can animate to auto height; instant elsewhere */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}