/**
 * Crescita Studio — multi-step Diagnosi assessment. Roadmap step 6.
 * Enqueued only on the Diagnosi page, after diagnosi.css.
 *
 * Uses the existing tokens and the Diagnosi page's own button classes rather
 * than introducing a second visual language: this is a new step in an approved
 * flow, not a new design. No new colour, radius or type scale is invented here
 * — DESIGN.md's locked direction and tokens.css own those.
 *
 * Every `ul`/`ol`-shaped container in this file carries an explicit
 * `margin: 0; padding: 0`. GeneratePress's global typography sets
 * `ul { margin: 0 0 1.5em 3em }` as an element selector, which beats the
 * theme's `*` reset on specificity — the off-centre-list bug this page has
 * already hit twice (see technology.md "Recurring bugs").
 */

#crescita-assessment[hidden] { display: none; }

.crescita-assessment {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  font-family: var(--font-primary);
  color: var(--crescita-midnight);
  /* Founder direction 2026-09-05: the questionnaire reads down the centre,
     so nothing sits off to one side while the eye tracks a single column.
     Headings, sub-headings, progress and the nav all centre from here. */
  text-align: center;
}

/* The exception, and it is deliberate: answer text stays left-aligned.
   Centring a list of options costs a stable left edge to scan down, and the
   longest ones here run to two lines — centred, they are measurably slower
   to read. The block is centred; its contents are not. */
.crescita-assessment-option,
.crescita-assessment-chip,
.crescita-assessment-select,
.crescita-assessment-input,
.crescita-assessment-consent {
  text-align: left;
}

/* ------------------------------------------------------------- progress -- */

.crescita-assessment-progress { margin: 0 0 var(--space-md); }

.crescita-assessment-progress-label {
  margin: 0 0 var(--space-2xs);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.crescita-assessment-progress-bar {
  height: 4px;
  border-radius: var(--radius-chip);
  background: var(--crescita-stone);
  overflow: hidden;
}

/*
 * The progress fill animates `width`, deliberately.
 *
 * Width IS the value this element communicates — it is the progress. The usual
 * replacement, `transform: scaleX`, scales the element's `border-radius` with
 * it and turns a 4px pill's caps into ellipses. This is one childless bar, so
 * there is no subtree to reflow, and it already drops the transition under
 * `prefers-reduced-motion` below.
 *
 * The waiver is inline rather than in `.impeccable/config.json` because the
 * config entries for it did not work: one was added 2026-09-05 and another
 * 2026-09-06, and the finding fired straight through both. An inline comment
 * sits on the line it excuses and travels with the file.
 */
.crescita-assessment-progress-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-chip);
  background: var(--crescita-ocean);
  transition: width 240ms ease; /* impeccable-disable-line layout-transition */
}

@media (prefers-reduced-motion: reduce) {
  .crescita-assessment-progress-fill { transition: none; }
}

/* ------------------------------------------------------------- headings -- */

.crescita-assessment-title {
  margin: 0 0 var(--space-2xs);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.2;
}

/*
 * The heading takes focus on every step change so a screen-reader user is
 * told where they landed. **It must never draw a ring — not even for a
 * keyboard user**, which is what this used to do.
 *
 * The old rule cleared `:focus` and kept `:focus-visible`, which looks
 * correct and is not: a browser keeps a "the last interaction was keyboard"
 * flag, so advancing with Enter on `Avanti` made the *programmatically*
 * focused heading match `:focus-visible` and box itself. Reported from the
 * first real run — a box around "Contenuti e misurazione".
 *
 * Removing it is not a WCAG 2.4.7 regression. That criterion is about the
 * keyboard focus indicator on operable controls; this is a `tabindex="-1"`
 * heading, unreachable by Tab, focused only to be announced. A ring on it
 * tells a sighted user something is selected when nothing is.
 */
.crescita-assessment-title:focus,
.crescita-assessment-title:focus-visible {
  outline: none;
}

.crescita-assessment-sub {
  margin: 0 0 var(--space-md);
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/*
 * Required above Step 1 — Implementation Spec §8-9. Visually distinct so it
 * reads as a boundary, not as body copy.
 *
 * **Stone, not a left tab.** It carried a 3px Ocean `border-left`, which was
 * wrong twice over: a thick coloured edge on one side of a callout is the
 * generic-UI tell the Anti-Slop rules bar, and this surface is centred by
 * founder direction (2026-09-05) — an asymmetric accent pulls against the
 * single column the eye is tracking. The Sand background underneath it was
 * also doing nothing, since the page ground is Sand; Stone is the Brand Kit's
 * own card neutral (§3) and differentiates the block symmetrically, so the
 * boundary now comes from the surface rather than from a stripe.
 */
.crescita-assessment-warning {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--crescita-stone);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ------------------------------------------------------------ questions -- */

.crescita-assessment-questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.crescita-assessment-q {
  margin: 0;
  padding: 0;
  border: 0;
}

.crescita-assessment-prompt {
  padding: 0;
  margin: 0 0 var(--space-sm);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

.crescita-assessment-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
}

.crescita-assessment-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  /* 24px minimum target is the WCAG 2.2 AA floor this site already holds to;
     the full row is the target, not just the control. */
  min-height: 44px;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--crescita-stone);
  border-radius: var(--radius-btn);
  background: #fff;
  cursor: pointer;
  line-height: 1.45;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.crescita-assessment-option:hover { border-color: var(--crescita-fog); }

.crescita-assessment-option:has(input:checked) {
  border-color: var(--crescita-ocean);
  background: var(--crescita-sand);
}

/* :has() is widely supported but not universal; the checked control itself
   stays visible so the state is never conveyed by colour alone regardless. */
.crescita-assessment-option input,
.crescita-assessment-chip input {
  flex: 0 0 auto;
  margin-top: 0.2em;
  accent-color: var(--crescita-ocean);
}

.crescita-assessment-option:focus-within,
.crescita-assessment-chip:focus-within {
  outline: 2px solid var(--crescita-ocean);
  outline-offset: 2px;
}

.crescita-assessment-hint {
  margin: var(--space-2xs) 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------- chips -- */

.crescita-assessment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
}

.crescita-assessment-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--crescita-stone);
  border-radius: var(--radius-chip);
  background: #fff;
  cursor: pointer;
  font-size: 0.9375rem;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.crescita-assessment-chip:has(input:checked) {
  border-color: var(--crescita-ocean);
  background: var(--crescita-sand);
}

/* ------------------------------------------------------------- selects --- */

.crescita-assessment-location {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.crescita-assessment-select-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/*
 * A field has to look like a field before it is touched.
 *
 * The resting border was `--crescita-stone` on `#fff`. Measured against the
 * glass panel the gate now sits on (`rgba(255,255,255,.55)` over Sand, which
 * resolves to about `#FBFBF8`): the border came out at **1.21:1** and the fill
 * at **1.04:1**. WCAG 2.2 SC 1.4.11 asks 3:1 for the boundary of a user
 * interface component, so this was not a preference — the one input in the
 * funnel was, measurably, almost not there until it was focused.
 *
 * **The glass panel is what exposed it.** On Sand a white field had somewhere
 * to stand out against; on translucent white it had nothing. The measurement
 * was always poor, the panel simply made it visible.
 *
 * Ocean at 60% resolves to **3.54:1** against the panel. 55% would have cleared
 * 3:1 at 3.11:1, and the extra headroom is deliberate: the panel is
 * translucent, so the hero's gradient shifts what sits behind it and a value
 * measured at exactly the threshold would fall under it somewhere on the page.
 * Ocean rather than a grey so the field stays inside the palette.
 *
 * Focus still has to read as a clear step up from this, or making the resting
 * state visible would have cost the focus state its meaning: the border goes to
 * solid Ocean (11.1:1) and the 2px ring stays.
 */
/*
 * **Scoped to `.crescita-assessment` on purpose — do not flatten it back.**
 * GeneratePress styles fields by attribute:
 * `input[type="email"], …, select, textarea { border: var(--base) }` at
 * specificity 0-1-1, which beats a bare `.crescita-assessment-input` at 0-1-0.
 * The theme’s own border here never applied — the field was rendering with
 * GP’s `--base` (`#f0f0f0`), not `--crescita-stone`. The descendant selector
 * takes it to 0-2-0, which wins on class count.
 */
.crescita-assessment .crescita-assessment-select,
.crescita-assessment .crescita-assessment-input {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid rgba(30, 58, 95, 0.6);
  border-radius: var(--radius-btn);
  background: #fff;
  /* Reads as a well rather than a flat patch — the shadow does the work the
     border cannot do alone without turning into a heavy outline. */
  box-shadow: inset 0 1px 2px rgba(15, 23, 34, 0.06);
  font-family: inherit;
  font-size: 1rem;
  color: inherit;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

/* Scoped for the same reason — GP’s `input[type="email"]:focus` is 0-2-1. */
.crescita-assessment .crescita-assessment-select:focus-visible,
.crescita-assessment .crescita-assessment-input:focus-visible {
  border-color: var(--crescita-ocean);
  outline: 2px solid var(--crescita-ocean);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .crescita-assessment .crescita-assessment-select,
  .crescita-assessment .crescita-assessment-input { transition: none; }
}

.crescita-assessment-select:disabled {
  background: var(--crescita-sand);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

/* ------------------------------------------------- comune search field --- */

/*
 * The comune combobox. Founder direction 2026-09-07: the field filtered as you
 * typed, but it looked like a list of 1,500 rows to scroll, so nothing invited
 * anyone to type and nothing confirmed that typing had worked.
 *
 * Four cues, and each answers a question the old control left open:
 * the magnifier and the placeholder say *this is a search*; the marked letters
 * in each result say *this is why Milano is here*; the count says *this is how
 * much is left*; and the tick with the Ocean border says *this one is yours*,
 * which has to survive the list closing — it is the only state left on screen
 * once the reader moves on.
 *
 * Scoped under `.crescita-assessment` for the same reason the fields above
 * are: GeneratePress styles `input` by attribute at 0-1-1 and would win
 * against a lone class.
 */

.crescita-combobox { position: relative; }

.crescita-combobox-field {
  position: relative;
  display: flex;
  align-items: center;
}

.crescita-combobox-icon {
  position: absolute;
  left: var(--space-sm);
  display: flex;
  color: var(--crescita-ocean);
  opacity: 0.7;
  pointer-events: none;
}

.crescita-assessment .crescita-combobox-input {
  width: 100%;
  min-height: 44px;
  /* Room for the magnifier on one side and the tick on the other. */
  padding: var(--space-2xs) 2.75rem;
  border: 1px solid rgba(30, 58, 95, 0.6);
  border-radius: var(--radius-btn);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(15, 23, 34, 0.06);
  font-family: inherit;
  font-size: 1rem;
  color: inherit;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.crescita-assessment .crescita-combobox-input:focus-visible {
  border-color: var(--crescita-ocean);
  outline: 2px solid var(--crescita-ocean);
  outline-offset: 2px;
}

.crescita-assessment .crescita-combobox-input:disabled {
  background: var(--crescita-sand);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.crescita-assessment .crescita-combobox-input:disabled + .crescita-combobox-check,
.crescita-combobox-input:disabled ~ .crescita-combobox-icon { opacity: 0.35; }

/* The selected state: it has to read after the list has closed. */
.crescita-combobox-check {
  position: absolute;
  right: var(--space-sm);
  display: flex;
  color: var(--crescita-ocean);
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.crescita-combobox.is-selected .crescita-combobox-check {
  opacity: 1;
  transform: none;
}

.crescita-assessment .crescita-combobox.is-selected .crescita-combobox-input {
  border-color: var(--crescita-ocean);
  box-shadow: inset 0 1px 2px rgba(15, 23, 34, 0.06), 0 0 0 1px var(--crescita-ocean);
}

.crescita-combobox-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 17rem;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--crescita-stone);
  border-radius: var(--radius-btn);
  box-shadow: 0 12px 32px -12px rgba(15, 23, 34, 0.28);
}

.crescita-combobox-option {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: calc(var(--radius-btn) - 4px);
  cursor: pointer;
  font-size: 0.9375rem;
}

.crescita-combobox-option.is-active,
.crescita-combobox-option:hover { background: var(--crescita-sand); }

.crescita-combobox-option.is-chosen { font-weight: 600; }

/* The letters the reader typed, marked in the result. Not the browser's yellow
   `mark`: this is a match cue inside the palette, not a highlighter pen. */
.crescita-combobox-hit {
  background: rgba(30, 58, 95, 0.12);
  color: var(--crescita-ocean);
  font-weight: 700;
  border-radius: 3px;
  padding: 0 1px;
}

/* Reserves its line so a result count cannot shift the layout under a thumb. */
.crescita-combobox-status {
  margin: var(--space-2xs) 0 0;
  min-height: 1.25rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.crescita-combobox.is-selected .crescita-combobox-status {
  color: var(--crescita-ocean);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .crescita-assessment .crescita-combobox-input,
  .crescita-combobox-check { transition: none; }
}


/* ------------------------------------------------------------------ nav --- */

.crescita-assessment-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--crescita-stone);
}

/*
 * `Indietro` and `Avanti` are one pair and now look like one pair.
 *
 * Both already carry `.crescita-diagnosi-btn`, so the size, radius, weight
 * and press behaviour come from the Diagnosi button system. What did not was
 * `Indietro`: a one-off transparent chip with a stone hairline that belonged
 * to no family on the page. It now uses the secondary treatment the rest of
 * the site already uses — midnight on the surface, midnight border, ocean on
 * hover.
 *
 * **They are deliberately not identical.** Only one of them is the action;
 * making both midnight would remove the hierarchy the founder relies on to
 * see where to go next. Same family, different rank.
 */
.crescita-assessment-back {
  background: transparent;
  border: 1px solid var(--crescita-midnight);
  color: var(--crescita-midnight);
  box-shadow: none;
}

/* Lit, like every other control on the site (founder direction 2026-09-06).
   A colour-only shift beside a primary that now blooms read as the disabled
   one of the pair. */
.crescita-assessment-back:hover,
.crescita-assessment-back:focus-visible {
  color: var(--crescita-ocean-bright);
  border-color: var(--crescita-ocean-bright);
  background: rgba(46, 90, 143, 0.07);
  box-shadow: 0 0 0 3px rgba(46, 90, 143, 0.12);
}

/*
 * Disabled `Avanti` is a real state, not a faded enabled one.
 *
 * `opacity: 0.45` over midnight produced the grey slab in the founder’s
 * screenshot — and, worse, left the gloss sweep running across it. An
 * animated highlight sweeping a control you cannot press reads as a broken
 * button rather than a locked one. The sweep belongs to the live primary
 * button; a disabled control gets a flat, quiet surface and no motion.
 */
.crescita-assessment-next[disabled] {
  background: var(--crescita-stone);
  color: var(--color-text-secondary);
  box-shadow: none;
  opacity: 1;
  transform: none;
  cursor: not-allowed;
}

.crescita-assessment-next[disabled]::after {
  content: none;
}

.crescita-assessment-status {
  flex: 1 1 100%;
  margin: 0;
  min-height: 1.25em;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------- the gate --- */

/*
 * The last screen of the funnel, and until now the only one that was not a
 * surface at all.
 *
 * Measured against the hero form on 2026-09-05: that panel is
 * `crescita-diagnosi-glass` — translucent white, a 14px blur, a 16px radius,
 * an inset highlight and 31.5px of padding. The gate had none of it: a
 * transparent block with no border, no radius and no padding, sitting directly
 * on the sand. It carries the same weight of decision as the hero form — the
 * one field a visitor fills in before the analysis runs — so it now carries the
 * same panel. The glass itself comes from `diagnosi.css`; only the padding and
 * the column live here.
 *
 * 26rem inside a 44rem column, and previously flush left, which is what put the
 * last screen off-axis after fifteen centred ones.
 */
.crescita-assessment-gate {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 26rem;
  margin-inline: auto;
  width: 100%;
  padding: var(--space-md);
}

.crescita-assessment-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.crescita-assessment-consent input {
  flex: 0 0 auto;
  margin-top: 0.2em;
  accent-color: var(--crescita-ocean);
}

/* -------------------------------------------------------- processing ------ */

.crescita-assessment-elapsed {
  margin: 0 0 var(--space-sm);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/*
 * A spinner, NOT a progress bar. A determinate bar would have to claim a
 * completion percentage the audit cannot know, which is the padded-timer
 * theatre data-sources §9 forbids. This turns while real work happens and
 * stops when it stops.
 */
.crescita-assessment-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--crescita-stone);
  border-top-color: var(--crescita-ocean);
  border-radius: 50%;
  animation: crescita-assessment-spin 900ms linear infinite;
}

@keyframes crescita-assessment-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .crescita-assessment-spinner { animation: none; border-top-color: var(--crescita-stone); }
}

/* ---------------------------------------------------------------- result -- */

/*
 * The result screen's score, presented as a card rather than a loose number.
 *
 * It is deliberately NOT a copy of the report's score card: the report is a
 * page of its own with the band ramp, the eight areas and the priority
 * actions, and CLAUDE.md forbids a second path that produces report content.
 * This states the number, names the band, and hands over.
 */
.crescita-assessment-scorecard {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 40px rgba(15, 23, 34, 0.07);
}

/* `display: flex` with no `justify-content` packs to the start, and
   `text-align: center` on the ancestor does not reach a flex child — which is
   why the score sat hard left on a centred screen. */
.crescita-assessment-score {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.15em;
  margin: 0;
}

.crescita-assessment-score-value {
  font-size: clamp(3rem, 12vw, 5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--crescita-ocean);
}

/*
 * The number carries its band's colour, as it does in the report.
 *
 * Keyed off the band NAME from `score()` (register.mjs BANDS) rather than off
 * the number, so no methodology threshold is duplicated in the theme — if the
 * bands ever move, this follows without an edit. These are the text-on-light
 * values: measured on Sand, where the floor for a number this size is 3:1 and
 * every one of them clears 4.5:1.
 */
.crescita-assessment-scorecard[data-band="Critico"] .crescita-assessment-score-value { color: #A32C21; }
.crescita-assessment-scorecard[data-band="Fragile"] .crescita-assessment-score-value { color: #8A5A00; }
.crescita-assessment-scorecard[data-band="In crescita"] .crescita-assessment-score-value { color: #7A6A00; }
.crescita-assessment-scorecard[data-band="Solido"] .crescita-assessment-score-value { color: #1F6B45; }
.crescita-assessment-scorecard[data-band="Eccellente"] .crescita-assessment-score-value { color: #14675A; }

.crescita-assessment-band {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.crescita-assessment-score-total {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.crescita-assessment-score-label {
  margin: var(--space-2xs) 0 var(--space-md);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}