:root {
    --color-primary: #1f4e8c;
    --color-primary-contrast: #ffffff;
    --color-text: #1a1a1a;
    --color-muted: #595959;
    --color-surface: #ffffff;
    --color-surface-alt: #f2f4f7;
    --color-border: #c4c9d1;
    --color-error: #b3261e;
    --color-info: #1f4e8c;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading: var(--font-body);
    --font-size: 1rem;
    --radius: 0.375rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --page-width: 60rem;
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
/* the hidden attribute must win over component display rules (progressive enhancement) */
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--font-body); font-size: var(--font-size); color: var(--color-text); background: var(--color-surface); line-height: 1.5; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; }
a { color: var(--color-primary); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.skip-link { position: absolute; left: var(--space-2); top: -3rem; padding: var(--space-2) var(--space-3); background: var(--color-primary); color: var(--color-primary-contrast); border-radius: var(--radius); }
.skip-link:focus { top: var(--space-2); }

.header__inner, .footer__inner, .page { max-width: var(--page-width); margin: 0 auto; padding: var(--space-3); }
.header__logo { display: block; height: 2.5rem; width: auto; }
.header__nav { background: var(--color-primary); }
.header__nav-list { max-width: var(--page-width); margin: 0 auto; padding: var(--space-2) var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); list-style: none; }
.header__nav-list a { color: var(--color-primary-contrast); font-weight: 600; text-decoration: none; }
.header__nav-list a:hover, .header__nav-list a:focus-visible { text-decoration: underline; }
.footer { color: var(--color-muted); border-top: 1px solid var(--color-border); margin-top: var(--space-5); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0; list-style: none; }

.hero__title { font-size: 2rem; margin: var(--space-4) 0 var(--space-2); }
.hero__lead { color: var(--color-muted); font-size: 1.125rem; }

.btn { display: inline-block; padding: var(--space-2) var(--space-4); border-radius: var(--radius); border: 2px solid var(--color-primary); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--secondary { background: transparent; color: var(--color-primary); }

.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.field__label { font-weight: 600; }
.field__input { font: inherit; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.field__help { margin: 0; color: var(--color-muted); font-size: 0.875rem; }
.field--error .field__input { border-color: var(--color-error); }
.field__error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

.card { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.card--selected { border: 2px solid var(--color-primary); background: var(--color-surface-alt); }
.card__title { margin: 0 0 var(--space-1); font-size: 1.125rem; }
.card__body { margin: 0; color: var(--color-muted); }

.steps { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; counter-reset: step; }
.steps__item { padding: var(--space-1) var(--space-2); border-radius: var(--radius); color: var(--color-muted); }
.steps__item--done { color: var(--color-text); }
.steps__item--current { background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 600; }

.notice { padding: var(--space-3); border-left: 4px solid var(--color-info); background: var(--color-surface-alt); border-radius: var(--radius); margin-bottom: var(--space-3); }
.notice--error { border-left-color: var(--color-error); }

.wizard { display: grid; gap: var(--space-4); }
.wizard__lead { color: var(--color-muted); }
.wizard__back { margin-top: var(--space-4); }
.steps__item a { color: inherit; }

fieldset.field { border: 0; padding: 0; min-width: 0; }
.field__label.required::after { content: " *"; color: var(--color-error); }
.choices { display: flex; flex-direction: column; gap: var(--space-2); }
.choice { display: flex; align-items: flex-start; gap: var(--space-2); }
.choice input { margin-top: 0.3rem; }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.section-group { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
.section-group__title { font-weight: 600; font-size: 1.125rem; margin-bottom: var(--space-2); }
.section-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.section-cards { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin: 0; }
.section-cards__title { font-weight: 600; padding: 0 var(--space-1); }

.choice--depth-1 { margin-left: var(--space-4); }
.choice--depth-2 { margin-left: calc(2 * var(--space-4)); }
.choice--depth-3 { margin-left: calc(3 * var(--space-4)); }
.choice--error .choice__label { color: var(--color-error); }
.choice__error { display: block; width: 100%; color: var(--color-error); font-size: 0.875rem; }
.issues__tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); margin-bottom: var(--space-3); }
.issues__weeks { display: flex; flex-direction: column; font-size: 0.875rem; }
.issues__weeks .field__input { width: 5rem; }
.issues__month { font-size: 1rem; margin: var(--space-3) 0 var(--space-2); }
.issues__grid { display: grid; gap: var(--space-2); }
.issues__grid .choice { flex-wrap: wrap; }

.wizard__aside { position: sticky; top: var(--space-3); }
.counter { margin: calc(-1 * var(--space-2)) 0 var(--space-3); color: var(--color-muted); font-size: 0.875rem; }
.is-over-limit .counter { color: var(--color-error); font-weight: 600; }
.ad-preview { margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px dashed var(--color-border); border-radius: var(--radius); background: var(--color-surface-alt); }
.ad-preview__title { font-size: 0.875rem; color: var(--color-muted); margin-bottom: var(--space-1); }
.ad-preview__body { overflow-wrap: anywhere; }
.consents .choice { flex-wrap: wrap; }
.price-panel { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.price-panel__title { margin: 0 0 var(--space-2); font-size: 1.125rem; }
.price-panel__rows { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); }
.price-panel__rows dd { margin: 0; text-align: right; }
.price-panel__total { font-weight: 700; }
.price-panel__empty { margin: 0; color: var(--color-muted); }
.price-panel__errors { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.price-panel__busy { display: none; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); color: var(--color-muted); font-size: 0.875rem; }
turbo-frame[busy] .price-panel__busy { display: flex; }
/* the old price stays readable but does not look current while the new one is on its way */
turbo-frame[busy] .price-panel__rows, turbo-frame[busy] .price-panel__empty, turbo-frame[busy] .notice { opacity: 0.4; }

.summary { margin: 0 0 var(--space-4); }
.summary__row { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.summary__row dt { font-weight: 600; margin-bottom: var(--space-1); }
.summary__row dd { margin: 0; }
.summary__edit { display: inline-block; margin-top: var(--space-1); font-size: 0.875rem; }
.summary__mutations { margin: 0 0 var(--space-1); }
.summary__issues { margin: 0; padding-left: var(--space-4); }
.summary__total { font-size: 1.25rem; font-weight: 700; }
.next-steps { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.next-steps h2 { flex-basis: 100%; margin: 0; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
/* the clicked button of a running submission (submit_guard_controller.js) */
.btn.is-busy { display: inline-flex; align-items: center; gap: var(--space-2); opacity: 0.8; cursor: progress; }
.btn.is-busy::before { content: ''; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::before, .spinner { animation-duration: 2.4s; } }

@media (min-width: 48rem) {
    .issues__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
    .hero__title { font-size: 2.5rem; }
}

@media (min-width: 64rem) {
    .wizard { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; }
}

@media (min-width: 48rem) {
    .section-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}