/* Self-assessment widget. Structure only: every colour, font and size comes from custom properties.
   Set --as-* on .as (or any ancestor), or rely on the concept's tokens (--c-bg, --c-ink, --c-accent, --f-display, --f-text). */
.as {
  --as-bg: var(--c-bg, #f7f1e5); --as-surface: var(--c-surface, #fffcf5); --as-ink: var(--c-ink, #3f4527); --as-muted: color-mix(in srgb, var(--as-ink) 68%, transparent);
  --as-accent: var(--c-accent, #a9573c); --as-accent-ink: #fff; --as-line: color-mix(in srgb, var(--as-ink) 18%, transparent);
  --as-font: var(--f-text, Georgia, serif); --as-display: var(--f-display, Georgia, serif); --as-radius: var(--r-2, 16px); --as-gap: var(--s-2, 1rem);
  --as-shadow: var(--shadow-1, none); --as-dur: var(--dur-1, .2s);
  color: var(--as-ink); font-family: var(--as-font); font-size: 1.0625rem; line-height: 1.6; max-width: 46rem; margin: 0 auto;
}
.as *, .as *::before, .as *::after { box-sizing: border-box; }
.as__card { background: var(--as-surface); border: 1px solid var(--as-line); border-radius: var(--as-radius); padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: var(--as-shadow); }
.as__title, .as__q, .as__h { font-family: var(--as-display); font-weight: 400; line-height: 1.25; margin: 0 0 var(--as-gap); }
.as__title { font-size: clamp(1.7rem, 4.6vw, 2.4rem); } .as__q { font-size: clamp(1.3rem, 3.6vw, 1.8rem); } .as__h { font-size: 1.3rem; margin-top: 1.6rem; }
.as__lead, .as__note { color: var(--as-muted); } .as__note { font-size: .9rem; }
.as__progress { height: .4rem; border-radius: 99px; background: var(--as-line); overflow: hidden; margin: 0 0 .5rem; }
.as__progress > span { display: block; height: 100%; width: 0; background: var(--as-accent); transition: width var(--as-dur) ease; }
.as__count { font-size: .9rem; color: var(--as-muted); margin: 0 0 var(--as-gap); }
.as__scale { border: 0; margin: 0; padding: 0; display: grid; gap: .6rem; }
.as__opt { position: relative; display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; min-height: 48px; border: 1px solid var(--as-line); border-radius: calc(var(--as-radius) * .6); cursor: pointer; background: var(--as-bg); transition: border-color var(--as-dur), background var(--as-dur); }
.as__opt:hover { border-color: var(--as-accent); }
.as__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.as__dot { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--as-muted); display: grid; place-items: center; font-size: .8rem; }
.as__opt:has(input:checked) { border-color: var(--as-accent); background: color-mix(in srgb, var(--as-accent) 10%, var(--as-surface)); }
.as__opt:has(input:checked) .as__dot { background: var(--as-accent); border-color: var(--as-accent); color: var(--as-accent-ink); }
.as__opt:has(input:focus-visible) { outline: 3px solid var(--as-accent); outline-offset: 2px; }
.as__nav { display: flex; justify-content: space-between; gap: var(--as-gap); margin-top: 1.5rem; flex-wrap: wrap; }
.as__btn { font: inherit; min-height: 48px; padding: .8rem 1.7rem; border-radius: 999px; border: 1px solid var(--as-accent); background: var(--as-accent); color: var(--as-accent-ink); cursor: pointer; text-decoration: none; display: inline-block; text-align: center; }
.as__btn--ghost { background: transparent; color: var(--as-accent); } .as__btn[disabled] { opacity: .45; cursor: not-allowed; }
.as__btn:focus-visible { outline: 3px solid var(--as-ink); outline-offset: 2px; }
.as__field { margin: 0 0 var(--as-gap); } .as__field label { display: block; font-weight: 600; margin-bottom: .3rem; }
.as__field input[type=text], .as__field input[type=email] { width: 100%; font: inherit; color: inherit; background: #fff; padding: .75rem .9rem; border: 1px solid var(--as-line); border-radius: calc(var(--as-radius) * .5); }
.as__field input:focus-visible { outline: 3px solid var(--as-accent); outline-offset: 1px; }
.as__check { display: flex; gap: .6rem; align-items: flex-start; } .as__check input { width: 1.2rem; height: 1.2rem; margin-top: .3rem; accent-color: var(--as-accent); }
.as__err { color: #8a2f1c; font-weight: 600; min-height: 1.4em; }
.as__result-grid { display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 40rem) { .as__result-grid { grid-template-columns: 1fr 1fr; } }
.as__radar { width: 100%; height: auto; max-width: 22rem; margin: 0 auto; display: block; }
.as__radar-grid { fill: none; stroke: var(--as-line); } .as__radar-shape { fill: color-mix(in srgb, var(--as-accent) 25%, transparent); stroke: var(--as-accent); stroke-width: 2; stroke-linejoin: round; }
.as__radar-dot { fill: var(--as-accent); } .as__radar-label { fill: var(--as-ink); font-size: 11px; font-family: var(--as-font); }
.as__bars { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; } .as__bar { display: grid; gap: .25rem; } .as__bar-head { display: flex; justify-content: space-between; font-size: .95rem; }
.as__bar-track { height: .55rem; border-radius: 99px; background: var(--as-line); overflow: hidden; } .as__bar-fill { height: 100%; background: var(--as-accent); border-radius: 99px; }
.as__bar.is-edge .as__bar-fill { background: color-mix(in srgb, var(--as-accent) 45%, var(--as-ink)); }
.as__list { padding-left: 1.2rem; margin: 0 0 1rem; } .as__list li { margin-bottom: .4rem; }
.as__question { margin: 1.4rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--as-accent); font-family: var(--as-display); font-size: 1.3rem; font-style: italic; }
.as__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.as__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.as__panel { animation: as-in .35s ease both; } @keyframes as-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .as__panel { animation: none; } .as__progress > span, .as__opt { transition: none; } }