/* TODO(SVA): @font-face below is LB Metallservice's brand font (Euclid Circular A),
   left over from the survey this was cloned from. Replace with SVA Graubünden's
   font, or drop this block and rely on the system-font fallbacks in --font-display. */
@font-face {
    font-family: 'Euclid Circular A';
    src: url('/assets/EuclidCircularA-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   Design tokens — swap these for the client's brand.
   To rebrand the survey, you should only need to edit this
   :root block and replace assets/sva.png.

   TODO(SVA): colours below are still LB Metallservice's brand palette
   (Pantone 7527/7529/7531), carried over from the survey this was cloned
   from. Replace with SVA Graubünden's colours once supplied.
   ============================================================ */
:root {
    --color-primary:          #000000;   /* buttons, bars, selected states */
    --color-primary-hover:    #9b907c;   /* LBMS Pantone 7531 — placeholder */
    --color-primary-contrast: #ffffff;
    --font-display: 'Euclid Circular A', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-body:    'Euclid Circular A', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    --color-bg:      #fbfaf9;   /* LBMS Pantone 7527 50% — placeholder */
    --color-surface: #f2eee7;   /* LBMS Pantone 7527 — placeholder */
    --color-text:    #000000;
    --color-muted:   #9b907c;   /* LBMS Pantone 7531 — placeholder */
    --color-border:  #dfd8cb;   /* LBMS Pantone 7529 — placeholder */
    --color-error:   #b3261e;

    --radius: 12px;
    --maxw:   42rem;
}

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

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

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.page {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) 4rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.masthead { margin-bottom: 2rem; }
.masthead__logo { display: block; width: 200px; height: auto; }

.title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 5vw, 2.25rem);
    line-height: 1.15;
    margin: 0 0 .5rem;
}

.lede { color: var(--color-muted); margin: 0 0 2.5rem; }
.lede a { color: var(--color-primary); }

/* ---------- Form ---------- */
.survey { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 2rem; }
.survey-step { display: flex; flex-direction: column; gap: 2rem; }
.survey-step[hidden] { display: none; }

.step-indicator {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-muted);
    margin: 0;
}

.field { display: flex; flex-direction: column; gap: .6rem; }
.field__group {
    border: 0; padding: 0; margin: 0; min-width: 0;
    display: flex; flex-direction: column; gap: .55rem;
}
.field__label { font-weight: 600; font-size: 1.05rem; padding: 0; }
.field__req { color: var(--color-error); }

.option {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.option:hover { border-color: var(--color-primary); }
.option input { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--color-primary); }
.option:focus-within { border-color: var(--color-primary); }

.rating { display: flex; flex-wrap: wrap; gap: .5rem; }
.rating__item { position: relative; }
.rating__item input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rating__item span {
    display: grid; place-items: center;
    width: 3rem; height: 3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.rating__item input:checked + span {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    border-color: var(--color-primary);
}
.rating__item input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.input {
    font: inherit; width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
}
.input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
textarea.input { resize: vertical; }

/* ---------- Intro page ---------- */
.intro-note { margin: 0 0 .5rem; }

.intro-parts {
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* ---------- Section dividers ---------- */
.survey-section {
    padding: 1.25rem 1.25rem 1rem;
    background: var(--color-surface);
    border-radius: var(--radius);
}
.survey-section__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin: 0 0 .4rem;
}
.survey-section__hint {
    margin: 0;
    color: var(--color-muted);
    font-size: .95rem;
}

/* ---------- Field extras ---------- */
.field__optional { font-weight: 400; color: var(--color-muted); font-size: .9rem; }
.field__hint     { margin: .5rem 0; color: var(--color-muted); font-size: .9rem; font-style: italic; }

/* ---------- text_group ---------- */
.text-group { display: flex; flex-direction: column; gap: .6rem; }
.text-group__row  { display: flex; flex-direction: column; gap: .35rem; }
.text-group__label {
    font-weight: 600;
    color: var(--color-muted);
    font-size: .95rem;
}

/* ---------- Results extras ---------- */
.result-section-heading { margin: 2rem 0 .5rem; }
.result__section {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-muted);
    margin: 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--color-border);
}
.result__subq {
    font-size: .95rem;
    font-weight: 600;
    color: var(--color-muted);
    margin: 1rem 0 .4rem;
}
.result__subq:first-child { margin-top: 0; }

.field--error .option,
.field--error .input,
.field--error .field__group { /* nothing visual on the group itself */ }
.field--error .option { border-color: var(--color-error); }
.field--error .input  { border-color: var(--color-error); }
.field__msg { color: var(--color-error); margin: 0; font-size: .9rem; }

.btn {
    align-self: flex-start;
    font: inherit; font-weight: 600;
    padding: .8rem 1.6rem;
    border: 0; border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}
.btn:hover { background: var(--color-primary-hover); }
.btn:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.btn--ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.btn--ghost:hover { background: var(--color-surface); }

.form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---------- Results ---------- */
.result {
    margin: 0 0 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}
.result:last-of-type { border-bottom: 0; }
.result__q { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 1rem; }
.result__avg { margin: 0 0 1rem; color: var(--color-muted); }

.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.bar {
    display: grid;
    grid-template-columns: minmax(7rem, 32%) 1fr auto;
    align-items: center; gap: .75rem;
}
.bar__label { font-size: .95rem; }
.bar__track { background: var(--color-surface); border-radius: 999px; height: .9rem; overflow: hidden; }
.bar__fill  { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; }
.bar__value { font-variant-numeric: tabular-nums; color: var(--color-muted); font-size: .9rem; white-space: nowrap; }

.quotes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.quote  { background: var(--color-surface); border-radius: var(--radius); padding: .9rem 1.1rem; }

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

/* ---------- Footer ---------- */
.site-footer { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--color-border); text-align: right; }
.site-footer a { color: var(--color-muted); font-size: .65rem; text-decoration: none; }
.site-footer a:hover { color: var(--color-text); }

@media (max-width: 30rem) {
    .bar { grid-template-columns: 1fr auto; }
    .bar__track { grid-column: 1 / -1; order: 3; }
}

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