/* Survey app styles (PA-4.2 to PA-4.8). One file for every page; the CSP
   allows no inline style (PA-4.6).

   WCAG 2.1 AA (PA-Q2): every text colour has at least 4.5:1 against its
   background, controls, their borders and the focus outline at least 3:1;
   touch targets are at least 44 px high and nothing needs hover. The colours
   are the study's own, not GovData's, so raters don't take the study for an
   official GovData service. They are blue with orange accents, never red
   against green, so raters with a red-green colour weakness tell every state
   apart; a mark with an error is also hatched, so colour isn't its only sign. */

:root {
    --bg: #f6f4ef;
    --surface: #ffffff;
    --text: #1d2a33;
    --muted: #4f5b64;
    --primary: #1f5fa8;
    --primary-dark: #174a85;
    --primary-soft: #eaf1fa;
    --tag-bg: #e3ecf8;
    --tag-text: #163f6e;
    --focus: #b45309;
    --error: #b3261e;
    --error-soft: #fdecea;
    --level-bg: #fff3d1;
    --level-text: #5b3a00;
    --level-edge: #d99a00;
    --control: #6b747b;
    --line: #dcd7cc;
    --step-empty: #8a9399;
    --thermo-empty: #e9edf1;
}

/* A computer screen is read from further away than a phone, but the phone
   sizes looked too large there; everything sized in rem shrinks with it. */
@media (min-width: 900px) {
    html {
        font-size: 90%;
    }
}

/* Read by screen readers, not shown. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    overflow-wrap: break-word;
}

/* Every page but the rating page: one readable column on a card. */
body.page {
    max-width: 48rem;
    margin: 0 auto;
    padding: 1rem;
}

body.page main {
    padding: 0.5rem 1.25rem 1.25rem;
    background: var(--surface);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(29, 42, 51, 0.12);
}

a {
    display: inline-block;
    padding: 0.5rem 0;
    color: var(--primary);
}

/* Links inside running text stay inline. */
p a,
label a,
article li a {
    display: inline;
    padding: 0;
}

h1 {
    font-size: 1.75rem;
    line-height: 1.25;
    hyphens: auto;
}

h2 {
    font-size: 1.375rem;
    line-height: 1.3;
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

button {
    font: inherit;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.5rem 1.5rem;
    color: #ffffff;
    background: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 0.5rem;
    cursor: pointer;
}

button:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

button.secondary,
.pane-toggle {
    color: var(--primary);
    background: var(--surface);
}

button.secondary:hover,
.pane-toggle:hover {
    color: #ffffff;
    background: var(--primary-dark);
}

button:disabled {
    cursor: default;
    opacity: 0.45;
}

fieldset {
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

legend {
    font-weight: bold;
    margin-bottom: 0.5rem;
    padding: 0;
}

/* The label is part of the touch target of its radio or checkbox. */
.choice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 0;
}

.choice input {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.1rem 0 0;
    accent-color: var(--primary);
}

.choice label {
    flex: 1;
    /* A long German word breaks instead of pushing the ? to the next line. */
    min-width: 0;
    hyphens: auto;
    cursor: pointer;
}

.error-summary {
    border: 3px solid var(--error);
    border-radius: 0.5rem;
    padding: 0 1rem;
    margin-bottom: 1.5rem;
    background: var(--surface);
}

.error-summary h2 {
    font-size: 1.125rem;
}

.error-summary ul {
    list-style: none;
    padding: 0;
}

.error-summary a {
    display: block;
}

.error-summary a,
.error {
    color: var(--error);
    font-weight: bold;
}

.error {
    margin: 0.25rem 0 0.5rem;
    /* Scrolled to, an error keeps the line above it (its heading) in view. */
    scroll-margin-top: 4rem;
}

.rater-id {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    font-family: ui-monospace, monospace;
}

/* Plain payload values keep their line breaks. */
.text {
    white-space: pre-line;
}

details.hint {
    margin: 0 0 1rem;
}

details.hint summary {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    gap: 0.5rem;
    padding: 0.25rem 1rem;
    color: var(--primary);
    font-weight: 600;
    background: var(--surface);
    border: 2px solid var(--primary);
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
}

/* A button shape and an arrow, so the hint reads as something to open. */
details.hint summary::-webkit-details-marker {
    display: none;
}

details.hint summary::after {
    content: "▾";
}

details.hint[open] summary {
    background: var(--primary-soft);
}

details.hint[open] summary::after {
    content: "▴";
}

/* A hint is titled sections of short points (Gut, Beachten, Nicht gemeint),
   so it reads as a list rather than a block of text. */
details.hint .hint-body {
    margin: 0.5rem 0 0;
    padding: 0.75rem 1rem;
    background: var(--primary-soft);
    border-radius: 0.5rem;
}

details.hint .hint-title {
    margin: 0.75rem 0 0.25rem;
    font-weight: 600;
}

details.hint .hint-title:first-child {
    margin-top: 0;
}

details.hint .hint-list {
    margin: 0;
    padding-left: 1.25rem;
}

details.hint .hint-list li + li {
    margin-top: 0.25rem;
}

input[type="text"] {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    margin-top: 0.25rem;
    padding: 0.5rem;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 2px solid var(--control);
    border-radius: 0.5rem;
}

.note {
    margin: 0.5rem 0 0;
}

.note label {
    font-weight: bold;
}

/* The honeypot field (design doc §8) sits off-screen; people never reach
   it, spam bots fill it. */
.honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.progress {
    margin: 0 0 1.5rem;
}

.progress progress {
    width: 100%;
    height: 0.75rem;
    accent-color: var(--primary);
}

.progress p {
    margin: 0.25rem 0 0;
    font-weight: bold;
}

.level-notice {
    margin: 0 0 1rem;
    padding: 0.5rem 1rem;
    color: var(--level-text);
    font-weight: bold;
    background: var(--level-bg);
    border-left: 0.35rem solid var(--level-edge);
    border-radius: 0.5rem;
}

footer {
    margin-top: 3rem;
    border-top: 1px solid var(--control);
}

footer a {
    min-height: 2.75rem;
}

footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    list-style: none;
    padding: 0;
}

/* --- The rating page (PA-4.8) ---------------------------------------------
   The page fills the window: a bar with the progress and the pane button,
   then the dataset and the current question. From about 900 px both panes
   stand side by side and each scrolls on its own; below that one pane shows
   at a time. The script marks the page as ready; without it only the
   <noscript> notice shows. */

body.rating-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

body.rating-page main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Datenschutz and Impressum close each pane, below everything else, so they
   show only at the very end of its scroll. */
.pane-footer {
    margin: 2rem 0 0;
    font-size: 1rem;
}

.pane-question .pane-footer {
    margin-top: 0;
}

.pane-footer ul {
    margin: 0;
}

.noscript {
    max-width: 48rem;
    margin: 1rem auto;
    padding: 0.5rem 1.25rem 1.25rem;
    background: var(--surface);
    border-radius: 0.75rem;
}

.rating {
    display: none;
}

.js-ready .rating {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.rating-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.rating-bar .progress {
    flex: 1;
    margin: 0;
}

.rating-bar .progress p {
    margin: 0;
    font-size: 1rem;
}

.pane-toggle {
    flex: none;
    padding: 0.5rem 1rem;
}

.panes {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.pane {
    --pane-x: 1rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem var(--pane-x);
}

/* The question navigation sticks to the bottom edge of its pane. The form
   is at least as high as the pane, so the links after it start below the
   visible part. */
.pane-question {
    padding-bottom: 0;
}

.pane-question form {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.pane-question .questions {
    flex: 1 0 auto;
}

.pane-dataset {
    background: var(--surface);
}

.dataset,
.pane-question form {
    max-width: 44rem;
    margin: 0 auto;
}

@media (min-width: 900px) {
    .panes {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .pane {
        --pane-x: 2rem;
        padding-top: 1.5rem;
    }

    .pane-dataset {
        border-right: 1px solid var(--line);
    }

    .pane-toggle {
        display: none;
    }

    /* Both panes show; the links close the question pane only. */
    .pane-dataset .pane-footer {
        display: none;
    }
}

@media (max-width: 899.98px) {
    /* A vertical swipe scrolls the pane; the script takes horizontal ones. */
    .panes {
        touch-action: pan-y;
    }

    .rating[data-pane="dataset"] .pane-question,
    .rating[data-pane="question"] .pane-dataset {
        display: none;
    }

    .pane.enter-left {
        animation: pane-from-left 0.2s ease-out;
    }

    .pane.enter-right {
        animation: pane-from-right 0.2s ease-out;
    }

    /* The step marks show where the rater is; the line would cost room
       for the question. */
    .counter {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* The dataset, laid out like a portal dataset page. */
.dataset-title {
    margin: 0 0 0.75rem;
    font-size: 1.6rem;
}

.description {
    margin-bottom: 1.5rem;
}

.no-entry {
    color: var(--muted);
    font-style: italic;
}

.formatted > :first-child {
    margin-top: 0;
}

.formatted h2,
.formatted h3,
.formatted h4,
.formatted h5,
.formatted h6 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.2rem;
    line-height: 1.3;
}

.formatted h4,
.formatted h5,
.formatted h6 {
    font-size: 1.05rem;
}

.formatted ul,
.formatted ol {
    padding-left: 1.5rem;
}

.formatted blockquote {
    margin: 1rem 0;
    padding: 0 1rem;
    border-left: 0.25rem solid var(--line);
}

.formatted code {
    padding: 0 0.25rem;
    font-size: 0.95em;
    background: var(--bg);
    border-radius: 0.25rem;
}

.formatted pre {
    overflow-x: auto;
    padding: 0.75rem;
    background: var(--bg);
    border-radius: 0.5rem;
}

.formatted pre code {
    padding: 0;
}

.formatted hr {
    border: 0;
    border-top: 1px solid var(--line);
}

/* Links look like links but do nothing (design doc §4). */
.formatted .link {
    color: var(--primary);
    text-decoration: underline;
}

.table-scroll {
    overflow-x: auto;
    margin: 1rem 0;
}

.table-scroll table {
    border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
    padding: 0.25rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--line);
}

.facts {
    margin: 0 0 1.5rem;
}

.fact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0.5rem 0;
    border-top: 1px solid var(--line);
}

.fact dt {
    color: var(--muted);
    font-weight: bold;
    font-size: 1rem;
}

.fact dd {
    margin: 0;
}

@media (min-width: 30rem) {
    .fact {
        grid-template-columns: 11rem minmax(0, 1fr);
        gap: 1rem;
    }
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tags li {
    padding: 0.1rem 0.75rem;
    color: var(--tag-text);
    font-size: 1rem;
    background: var(--tag-bg);
    border-radius: 999px;
}

.resources-title {
    font-size: 1.25rem;
}

.resources {
    margin: 0;
    padding: 0;
    list-style: none;
}

.resource {
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
}

.resource-title {
    margin: 0;
    font-weight: bold;
}

.resource-format {
    margin: 0 0 0.5rem;
    color: var(--muted);
    font-size: 1rem;
}

.further {
    color: var(--muted);
}

/* One question at a time. */
.question-text {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.question .choice {
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
}

.question .choice:has(input:checked) {
    background: var(--primary-soft);
    border-color: var(--primary);
}

/* The Gesamteindruck as a thermometer (rating page and example): six
   segments, the highest on top, each in its own colour from orange (0) to
   blue (5), filled up to the chosen one; the readout beside it says „4/5“.
   Each segment is a radio stretched over it, invisible but focusable. */
.thermometer {
    display: flex;
    gap: 1rem;
    margin: 0.5rem 0 1rem;
}

.thermo-scale {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 4rem;
    padding: 3px;
    background: var(--surface);
    border: 2px solid var(--control);
    border-radius: 2rem;
}

.thermo-level {
    position: relative;
    height: 2.75rem;
    background: var(--thermo-empty);
    border-radius: 0.35rem;
}

.thermo-level:first-child {
    border-radius: 1.75rem 1.75rem 0.35rem 0.35rem;
}

.thermo-level:last-child {
    border-radius: 0.35rem 0.35rem 1.75rem 1.75rem;
}

.thermo-level input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.thermo-level input:disabled {
    cursor: default;
}

.level-0 { --fill: #b8460b; }
.level-1 { --fill: #dd7a2c; }
.level-2 { --fill: #f0b36d; }
.level-3 { --fill: #8fb9e3; }
.level-4 { --fill: #3f84cc; }
.level-5 { --fill: #1b5aa6; }

/* The chosen segment and every one below it. */
.thermo-level:has(input:checked),
.thermo-level:has(input:checked) ~ .thermo-level {
    background: var(--fill);
}

.thermo-level:hover:not(:has(input:disabled)) {
    box-shadow: inset 0 0 0 3px var(--primary);
}

.thermo-level:has(input:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.thermometer:has(input[aria-invalid="true"]) .thermo-scale {
    border-color: var(--error);
}

.thermo-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.thermo-end {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
}

.thermo-readout {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.thermo-readout::before {
    content: "–/5";
    color: var(--muted);
}

.thermometer:has(input[value="0"]:checked) .thermo-readout::before { content: "0/5"; color: var(--text); }
.thermometer:has(input[value="1"]:checked) .thermo-readout::before { content: "1/5"; color: var(--text); }
.thermometer:has(input[value="2"]:checked) .thermo-readout::before { content: "2/5"; color: var(--text); }
.thermometer:has(input[value="3"]:checked) .thermo-readout::before { content: "3/5"; color: var(--text); }
.thermometer:has(input[value="4"]:checked) .thermo-readout::before { content: "4/5"; color: var(--text); }
.thermometer:has(input[value="5"]:checked) .thermo-readout::before { content: "5/5"; color: var(--text); }

.locked-note {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    color: var(--level-text);
    background: var(--level-bg);
    border-radius: 0.5rem;
}

.question.enter-forward {
    animation: question-from-below 0.22s ease-out;
}

.question.enter-back {
    animation: question-from-above 0.22s ease-out;
}

.question-nav {
    position: sticky;
    bottom: 0;
    margin: 0 calc(-1 * var(--pane-x));
    padding: 0.75rem var(--pane-x);
    background: var(--bg);
    border-top: 1px solid var(--line);
}

.steps {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.steps li {
    flex: 1;
    min-width: 0;
}

/* Each mark is a button the full touch height; the bar is drawn inside. */
.steps button,
.steps button:hover {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0.25rem;
}

.steps button::before {
    content: "";
    flex: 1;
    height: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--step-empty);
    border-radius: 999px;
}

.steps li.is-answered button::before {
    background: var(--primary);
    border-color: var(--primary);
}

.steps li.is-error button::before {
    background: repeating-linear-gradient(
        135deg,
        var(--error) 0 0.3rem,
        var(--error-soft) 0.3rem 0.5rem
    );
    border-color: var(--error);
}

.steps li.is-current button::before {
    outline: 2px solid var(--text);
    outline-offset: 1px;
}

.counter {
    margin: 0 0 0.5rem;
    font-weight: bold;
}

/* Zurück on the left, Weiter or „Antwort senden“ on the right, „Jetzt
   senden“ in the middle when it shows. */
.nav-buttons {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
}

.nav-buttons button {
    grid-row: 1;
}

.nav-buttons [data-action="back"] {
    grid-column: 1;
}

.nav-buttons [data-action="submit-early"] {
    grid-column: 2;
    justify-self: center;
}

.nav-buttons [data-action="next"],
.nav-buttons [data-action="submit"] {
    grid-column: 3;
}

@media (max-width: 30rem) {
    .nav-buttons button {
        padding: 0.5rem 0.75rem;
    }
}

.nav-status {
    margin: 0.5rem 0 0;
    color: var(--error);
    font-weight: bold;
}

.nav-status:empty {
    display: none;
}

@keyframes question-from-below {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes question-from-above {
    from {
        opacity: 0;
        transform: translateY(-1.5rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pane-from-right {
    from {
        opacity: 0;
        transform: translateX(2rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pane-from-left {
    from {
        opacity: 0;
        transform: translateX(-2rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Datenschutz and Impressum on the rating page: a dialog over the page, so
   no answer is lost. The bar with „Schließen" stays at the top. */
.legal-dialog {
    width: min(48rem, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 0;
    color: var(--text);
    background: var(--surface);
    border: 0;
    border-radius: 0.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.legal-dialog::backdrop {
    background: rgba(29, 42, 51, 0.6);
}

.legal-dialog-bar {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.legal-dialog-title {
    margin: 0;
    font-weight: 600;
}

.legal-dialog-body {
    padding: 0 1.25rem 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* --- PA-2.3: "Keine Mängel", greyed-out questions, term explanations ------- */

/* The "Keine Mängel" box belongs to the best answer (PA-Q58). Without
   JavaScript it stays visible with its note and the server checks it; with
   the script it shows only under "Ja", so the note is no longer needed. */
html.js-ready .only-with-yes {
    display: none;
}

html.js-ready .choice-no-defects[hidden] {
    display: none;
}

/* A question about an empty field is not asked (PA-Q82): greyed out, with
   its banner instead of the answer scale and the checklist. */
.question-skipped {
    color: var(--muted);
}

.question-skipped .question-text {
    color: var(--muted);
}

.not-asked {
    margin: 0 0 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--muted);
    background: var(--surface);
    border: 2px dashed var(--line);
    border-radius: 0.5rem;
}

/* The ? beside a checklist label explains its term (PA-Q80). It sits next to
   the label, not inside it, so opening it never ticks the box. The opened
   panel is fixed in the middle of the window, above everything else, so it
   never needs scrolling, and closes with its ×, with Escape, with a click
   beside it or with the ? again. */
.choice-item {
    position: relative;
    align-items: center;
}

details.term {
    flex: none;
    margin: 0;
}

details.term summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    color: var(--primary);
    font-weight: 700;
    background: var(--surface);
    border: 2px solid var(--primary);
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
}

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

details.term[open] summary {
    background: var(--primary-soft);
}

/* The backdrop dims the page behind the panel and catches a click beside it:
   a click there is a click on the close control (rating.js). A closed details
   renders neither. */
details.term .term-backdrop {
    position: fixed;
    z-index: 20;
    inset: 0;
    background: rgb(0 0 0 / 0.35);
}

details.term .term-panel {
    position: fixed;
    z-index: 21;
    top: 50%;
    left: 1rem;
    right: 1rem;
    max-width: 32rem;
    margin: 0 auto;
    transform: translateY(-50%);
    padding: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--primary);
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.2);
}

/* The × that closes the ? panel and the two legal dialogs: a circle of the
   same kind as the ? itself, at least 44 px for a finger. */
.close-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    color: var(--primary);
    font-size: 1.5rem;
    line-height: 1;
    background: var(--surface);
    border: 2px solid var(--primary);
    border-radius: 999px;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus-visible {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

details.term .close-button {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

/* The text keeps clear of the ×. */
details.term .term-panel p {
    margin: 0;
    padding-right: 2.5rem;
}

/* --- PA-2.2: the worked example of the introduction ----------------------- */

/* The rating page's blocks in their read-only mode, one below the other. */
.worked-example {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

.worked-example .question {
    margin-top: 1.5rem;
}

.reason {
    margin: 0.5rem 0 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--level-bg);
    color: var(--level-text);
    border-radius: 0.5rem;
}

.reason-label {
    font-weight: 600;
}

/* The page has no script, so a ? panel opens in the flow below its row
   instead of floating over a backdrop that only the script could close. */
.worked-example .choice-item {
    flex-wrap: wrap;
}

details.term-inline[open] {
    flex-basis: 100%;
}

details.term-inline .term-panel {
    position: static;
    max-width: none;
    margin-top: 0.5rem;
    transform: none;
    box-shadow: none;
}