/* Theme tokens: swap these to apply the client's design. */
:root {
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --color-bg: #f5f5f4;
    --color-surface: #ffffff;
    --color-text: #1c1917;
    --color-muted: #57534e;
    --color-border: #d6d3d1;
    --color-primary: #1c1917;
    --color-primary-text: #ffffff;
    --color-soft: #e7e5e4;
    --color-focus: #2563eb;
    --color-error: #b91c1c;
    --color-success: #15803d;
    --radius: 14px;
    --radius-sm: 10px;
    --tap: 3.25rem;
    --maxw: 40rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}

a { color: inherit; }

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

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

/* Header / footer */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding-top: env(safe-area-inset-top);
}
.site-header__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-block: .75rem;
    padding-inline: max(1rem, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.brand { font-weight: 700; text-decoration: none; }
.lang-switch {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: .25rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
}
.lang-switch:hover { border-color: var(--color-text); }

.site-main {
    flex: 1;
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding-block: 1.25rem 2.5rem;
    padding-inline: max(1rem, env(safe-area-inset-left));
}

@media (min-width: 768px) {
    body { font-size: 1.125rem; }
    .site-main { padding-block: 2.5rem 3rem; padding-inline: 1.5rem; }
}

/* Typography */
.page-title { font-size: clamp(1.625rem, 5vw, 2.125rem); line-height: 1.2; margin: 0 0 .5rem; }
.lead { color: var(--color-muted); margin: 0; }
.section-title { font-size: 1.125rem; margin: 2rem 0 .75rem; }
.eyebrow {
    display: block;
    margin: 0 0 .5rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.tag {
    display: inline-block;
    padding: .0625rem .5rem;
    border-radius: 999px;
    background: var(--color-soft);
    color: var(--color-muted);
    font-size: .75rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Home */
.survey-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 640px) { .survey-list { grid-template-columns: 1fr 1fr; } }
.survey-card {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    height: 100%;
    min-height: 7rem;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
}
.survey-card:hover { border-color: var(--color-text); }
.survey-card__title { font-size: 1.125rem; font-weight: 650; line-height: 1.3; }
.survey-card__status { margin-top: auto; padding-top: .75rem; font-size: .875rem; font-weight: 600; }
.survey-card__status::after { content: " →"; }
.survey-card.is-done .survey-card__status { color: var(--color-success); }
.survey-card.is-done .survey-card__status::after { content: " ✓"; }

.thanks-back { margin-top: 2rem; }

/* Question screen */
.progress { height: 4px; margin-bottom: 1rem; background: var(--color-soft); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; transition: width .3s ease; }
.survey-name { margin: 0 0 1.5rem; font-size: .875rem; color: var(--color-muted); }
.notice { margin: 0 0 1rem; padding: .75rem 1rem; background: var(--color-soft); border-radius: var(--radius-sm); }

.question fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.question legend { display: block; width: 100%; padding: 0; }
.question__label { margin: 0 0 .75rem; font-size: clamp(1.375rem, 4.8vw, 1.875rem); line-height: 1.25; font-weight: 650; }
.question__label label { cursor: default; }
.help { margin: -.25rem 0 1rem; color: var(--color-muted); }

.input {
    display: block;
    width: 100%;
    min-height: var(--tap);
    padding: .75rem 1rem;
    font: inherit;
    font-size: max(16px, 1rem);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    appearance: none;
}
textarea.input { min-height: 9rem; resize: vertical; }
.input:focus { outline: 3px solid color-mix(in srgb, var(--color-focus) 30%, transparent); border-color: var(--color-focus); }
.input[aria-invalid="true"] { border-color: var(--color-error); }

.fields { display: grid; gap: 1rem; }
.field { display: grid; gap: .375rem; }
.field__label { font-weight: 600; font-size: .9375rem; }

.options { display: grid; gap: .625rem; }
.option {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: var(--tap);
    padding: .75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
}
.option:hover { border-color: var(--color-muted); }
.option input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-primary); }
.option:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.option:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.option__label { font-weight: 500; }

.options--yesno { grid-template-columns: 1fr 1fr; }
.options--rating { grid-template-columns: repeat(5, 1fr); }
.options--rating .option { justify-content: center; padding: .75rem 0; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.options--rating .option input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.options--rating .option:has(input:checked) { background: var(--color-primary); color: var(--color-primary-text); }
@media (min-width: 640px) {
    .options--choice, .options--multi { grid-template-columns: 1fr 1fr; }
}

.error { margin: .625rem 0 0; color: var(--color-error); font-weight: 500; }

.privacy-note { margin: 1.5rem 0 0; font-size: .8125rem; color: var(--color-muted); }

.actions { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: .75rem; margin-top: 1.75rem; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: .75rem 1.5rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
}
.btn--primary { flex: 0 1 14rem; background: var(--color-primary); color: var(--color-primary-text); }
.btn--primary:hover { opacity: .9; }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--color-text); }
.btn--sm { min-height: 2.25rem; padding: .375rem .875rem; font-size: .875rem; flex: none; }
.btn--danger { background: transparent; color: var(--color-error); border-color: currentColor; }
.btn[disabled], .is-submitting .btn { opacity: .6; cursor: progress; pointer-events: none; }