/* SPDX-License-Identifier: AGPL-3.0-or-later */
:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; line-height: 1.5; margin: 0; }
main { max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
h1 { margin-bottom: 0.25rem; }
.intro { opacity: 0.85; }
fieldset { border: 1px solid currentColor; border-radius: 6px; margin: 1rem 0; padding: 0.75rem 1rem; }
legend { font-weight: 600; }
label { display: block; margin: 0.5rem 0; }
/* `:not([type="checkbox"])` is load-bearing (2026-08-27). A bare
   `input { width: 100% }` stretches the consent checkbox to the full column;
   the control itself is then drawn centred inside that width, so it appears
   on its own line above its label, detached from the sentence it gates. Found
   on a phone — the browser tier ticks it with page.check(), which is actionable
   whatever the box's width, so no headless check could have seen it. */
input:not([type="checkbox"]), textarea {
  width: 100%; box-sizing: border-box; padding: 0.4rem; font: inherit;
}
/* nowrap so the badge breaks BEFORE itself rather than through itself — on a
   phone the legend wrapped mid-counter, leaving the unit stranded on its own
   line. */
.counter { font-weight: 400; font-size: 0.8rem; opacity: 0.7;
           white-space: nowrap; }
.counter.over { color: #c00; opacity: 1; }
button { font: inherit; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.error { color: #c00; min-height: 1.25rem; }
.warning { border-left: 4px solid #c60; padding-left: 0.75rem; }
.token-row { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
#token { font-size: 1.1rem; padding: 0.4rem 0.6rem; background: rgba(128,128,128,0.15); border-radius: 4px; user-select: all; }
pre { background: rgba(128,128,128,0.12); padding: 0.75rem; border-radius: 6px; overflow-x: auto; }
hr { margin: 2rem 0; opacity: 0.3; }

/* Art. 9 consent gates. `optional` and `gate-note` are the Art. 7(4) half —
   a registration without these sections is complete, and it has to LOOK it.
   `placeholder` marks deployment facts (controller, purpose, retention) that
   the build must fill: they are loud on purpose, so an unfilled one is seen
   before an attendee reads it rather than after. */
.optional { font-weight: 400; font-size: 0.8rem; text-transform: uppercase;
            letter-spacing: 0.04em; opacity: 0.75; margin-left: 0.4rem;
            white-space: nowrap; }
.gate-note { font-size: 0.9rem; opacity: 0.85; margin: 0.25rem 0 0.6rem; }
/* The checkbox sits beside the sentence and the sentence wraps as one block
   beside it, rather than flowing under the box. `align-items: flex-start`
   keeps it on the first line; the min sizes are the thumb target — the
   browser's default 13px box is well under the 24px WCAG 2.2 (2.5.8) floor,
   and this is a control an attendee taps on a phone. */
.consent { display: flex; align-items: flex-start; gap: 0.5rem;
           margin: 0 0 0.8rem; font-size: 0.9rem; }
.consent input[type="checkbox"] {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0;
}
/* The sentence is ONE flex item on purpose: without this wrapper every span
   inside it — each [PLACEHOLDER], the English rendering — would become a flex
   item of its own and the sentence would lay out as columns. `min-width: 0`
   lets it wrap instead of forcing the row wider than the fieldset. */
.consent-text { min-width: 0; }
.placeholder { background: #fe6; color: #000; padding: 0 0.25rem;
               font-family: monospace; font-weight: 700; }
fieldset[data-requires-consent] input:disabled,
fieldset[data-requires-consent] textarea:disabled { background: rgba(128,128,128,0.15); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Bilingual page (2026-08-27): Finnish is operative, English accompanies it
   as a convenience rendering — visually secondary, never hidden. Hiding it
   behind a disclosure would mean it is not available to the person who needs
   it; muting it keeps one reading flow. `lang="en"` on these parts is what
   makes assistive technology switch voice (WCAG 3.1.2). */
.en { opacity: 0.72; font-size: 0.92em; }
p.en { margin-top: 0.15rem; }
.lang-note { font-size: 0.9rem; border-left: 4px solid currentColor;
             padding-left: 0.75rem; opacity: 0.9; }
.subtitle { margin-top: 0; opacity: 0.85; }

/* Printing the receipt must print the TOKEN — never the Art. 9 echo. */
@media print {
  .intro, #privacy-notice, #reg-form, #delete-section, hr,
  #submitted, #again-btn, #copy-btn, #download-btn,
  #receipt h3 { display: none !important; }
}