/* wizard.css — the measurement wizard's instruction card (WizardInstructionCard, MuteDiagramView,
   StrikeStateRing, QualityBar). Sizes follow Theme.swift / Theme+Measure.swift; colours are base.css tokens. */

.rc-wizard { position: relative; font-family: var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.4; }
.rc-wizard .rc-fallback { padding: 20px 4px; color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; }

.rc-wizard .rc-wizard__root { display: grid; gap: 16px; min-width: 0; }
.rc-wizard .rc-wizard__stage { display: grid; gap: 12px; min-width: 0; }
/* Wide: the app's 60 / 40 split — card left; level, Quality and the site controls stacked on the right. */
.rc-wizard .is-wide.rc-wizard__root { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto 1fr; align-items: start; }
.rc-wizard .is-wide .rc-wizard__stage { display: contents; }
.rc-wizard .is-wide .rc-wizard__stage > .rc-wizard__card { grid-column: 1; grid-row: 1 / span 2; }
.rc-wizard .is-wide .rc-wizard__side { grid-column: 2; grid-row: 1; }
.rc-wizard .is-wide .rc-wizard__controls { grid-column: 2; grid-row: 2; }

/* CardView: surface, radius 10, hairline, padding 16 */
.rc-wizard .rc-wizard__card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px; display: grid; gap: 14px; min-width: 0; }
.rc-wizard .is-narrow .rc-wizard__card { padding: 14px; gap: 12px; }

/* ---------- Header: note name + ring ---------- */
.rc-wizard .rc-wizard__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.rc-wizard .rc-wizard__note { display: flex; align-items: baseline; gap: 6px; font-weight: 700; font-size: 80px; line-height: 0.95; letter-spacing: -0.01em; }   /* app: 96 / 48 pt, scaled */
.rc-wizard .rc-wizard__oct { font-size: 0.5em; font-weight: 600; color: var(--text-2); }
.rc-wizard .rc-wizard__hint { margin-top: 6px; font-size: 0.9375rem; color: var(--text-2); }
.rc-wizard .is-narrow .rc-wizard__note { font-size: 60px; }
.rc-wizard .is-narrow .rc-wizard__hint { font-size: 0.875rem; }

.rc-wizard .rc-wizard__ringbox { --ring: var(--text-2); display: grid; justify-items: center; gap: 6px; width: 176px; }
.rc-wizard .is-narrow .rc-wizard__ringbox { width: 116px; }
.rc-wizard .rc-wizard__ring { position: relative; width: 96px; height: 96px; }   /* ringSize 96, ringWidth 8 */
.rc-wizard .rc-wizard__ring svg { width: 96px; height: 96px; overflow: visible; }
.rc-wizard .rc-wizard__ring-track { fill: none; stroke: var(--surface-2); stroke-width: 8; }
.rc-wizard .rc-wizard__ring-arc { fill: none; stroke: var(--ring); stroke-width: 8; stroke-linecap: round; transition: stroke var(--t-state) var(--ease), stroke-dashoffset var(--t-state) var(--ease), opacity var(--t-state) var(--ease); }
.rc-wizard .is-listening .rc-wizard__ring-arc { transition: stroke var(--t-state) var(--ease); }   /* the fill itself is driven per frame, linearly */
.rc-wizard .rc-wizard__ring-centre { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; }
.rc-wizard .rc-wizard__ring-count { font-size: 20px; font-weight: 600; line-height: 1.1; }
.rc-wizard .rc-wizard__ring-of { font-size: 13px; color: var(--text-2); line-height: 1.2; }
.rc-wizard .rc-wizard__ring-label { min-height: 2.6em; font-size: 13px; font-weight: 550; line-height: 1.3; text-align: center; color: var(--ring); transition: color var(--t-state) var(--ease); text-wrap: balance; }

.rc-wizard .rc-wizard__offset { font-size: 0.9375rem; color: var(--reference); margin-top: -6px; }

/* ---------- Mute diagram ---------- */
.rc-wizard .rc-wizard__diagram { display: grid; justify-items: center; }
.rc-wizard .rc-wizard__diagram svg { width: 100%; max-width: 420px; height: auto; aspect-ratio: 336 / 160; overflow: visible; }
.rc-wizard .rc-wizard__dg, .rc-wizard .rc-wizard__in, .rc-wizard .rc-wizard__line, .rc-wizard .rc-wizard__chip { animation: rc-wizard-in var(--t-state) var(--ease) both; }
@keyframes rc-wizard-in { from { opacity: 0; } to { opacity: 1; } }
.rc-wizard .rc-wizard__str { fill: var(--text); }
.rc-wizard .rc-wizard__str--nb { opacity: 0.28; }
.rc-wizard .rc-wizard__str--ref { fill: var(--reference); }
.rc-wizard .rc-wizard__wedge { fill: var(--warn); stroke: var(--warn); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.rc-wizard .rc-wizard__felt { fill: none; stroke: var(--warn); stroke-opacity: 0.85; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.rc-wizard .rc-wizard__cap { font-family: var(--font-ui); font-size: 11px; font-weight: 600; fill: var(--text-2); }
.rc-wizard .rc-wizard__cap--nb { opacity: 0.7; }
.rc-wizard .rc-wizard__cap--ref { fill: var(--reference); }
.rc-wizard .rc-wizard__cap--warn { fill: var(--warn); }
.rc-wizard .rc-wizard__foot { font-family: var(--font-ui); font-size: 13px; fill: var(--text-2); }
/* On phones the 336-unit diagram is scaled down to ~0.83; larger unit sizes keep the captions legible. */
.rc-wizard .is-narrow .rc-wizard__cap { font-size: 12.5px; }
.rc-wizard .is-narrow .rc-wizard__foot { font-size: 15px; }

.rc-wizard .rc-wizard__headline { font-size: 0.9375rem; font-weight: 600; min-height: 2.8em; }
.rc-wizard .rc-wizard__in { display: inline; }
.rc-wizard .rc-wizard__rule { height: 1px; background: var(--hairline); }

/* ---------- Strike instruction / ONE reason line ---------- */
.rc-wizard .rc-wizard__says { display: grid; gap: 8px; align-content: start; min-height: 98px; }
.rc-wizard .is-narrow .rc-wizard__says { min-height: 136px; }
.rc-wizard .is-wide .rc-wizard__says { min-height: 104px; }
.rc-wizard .rc-wizard__line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; font-size: 0.9375rem; }
.rc-wizard .rc-wizard__line > span:only-child { grid-column: 1 / -1; }
.rc-wizard .rc-wizard__icon { width: 18px; height: 18px; margin-top: 1px; flex: none; }
.rc-wizard .rc-wizard__line--strike { font-weight: 600; }
.rc-wizard .rc-wizard__line--listen { font-weight: 600; color: var(--reference); }
.rc-wizard .rc-wizard__line--analyse { font-weight: 600; color: var(--accent); }
.rc-wizard .rc-wizard__line--demoted { font-size: 0.8125rem; color: var(--text-2); }
.rc-wizard .rc-wizard__line--green { color: var(--in-tune); }
.rc-wizard .rc-wizard__line--red { color: var(--sharp); }

.rc-wizard .rc-wizard__next { font-size: 0.9375rem; color: var(--text-2); }
.rc-wizard .rc-wizard__next.is-empty { visibility: hidden; }
.rc-wizard .rc-wizard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
/* StateBadge: height 22, padding 8, 13 pt medium, fill 15 %, stroke 50 %, capsule */
.rc-wizard .rc-wizard__chip { --c: var(--text-2); display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 13px; font-weight: 550; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.rc-wizard .rc-wizard__chip.is-current { --c: var(--reference); }
.rc-wizard .rc-wizard__chip.is-measured { --c: var(--measured); }

/* ---------- Simulated input ---------- */
.rc-wizard .rc-wizard__side { display: grid; gap: 12px; min-width: 0; }
.rc-wizard .rc-wizard__level { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 0 4px; }
.rc-wizard .rc-wizard__level-label { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.rc-wizard .rc-wizard__key { position: relative; width: 14px; height: 24px; border-radius: 2px 2px 4px 4px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden; }
.rc-wizard .rc-wizard__key i { position: absolute; inset: 0 0 3px 0; border-radius: 2px 2px 3px 3px; background: var(--white-key); transition: transform 100ms var(--ease-out), background-color var(--t-state) var(--ease); }
.rc-wizard .rc-wizard__key.is-down i { transform: translateY(3px); background: var(--reference); }
.rc-wizard .rc-wizard__meter { position: relative; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.rc-wizard .rc-wizard__meter-fill { position: absolute; inset: 0; border-radius: 3px; background: var(--in-tune); transform: scaleX(0); transform-origin: 0 50%; }
.rc-wizard .rc-wizard__meter-tick { position: absolute; top: 0; bottom: 0; left: 80%; width: 1px; background: var(--reference); }   /* −12 dBFS target on −60…0 */

/* ---------- QualityBar ---------- */
.rc-wizard .rc-wizard__quality { gap: 8px; }
.rc-wizard .rc-wizard__q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rc-wizard .rc-wizard__q-title { font-size: 17px; font-weight: 600; }
.rc-wizard .rc-wizard__q-conf { font-size: 13px; color: var(--text-2); transition: color var(--t-state) var(--ease); }
.rc-wizard .rc-wizard__bar { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.rc-wizard .rc-wizard__bar--main { height: 12px; border-radius: 6px; }
.rc-wizard .rc-wizard__bar-fill { position: absolute; inset: 0; border-radius: inherit; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-state) var(--ease), background-color var(--t-state) var(--ease); }
.rc-wizard .rc-wizard__tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.rc-wizard .rc-wizard__tick--amber { left: 60%; background: var(--warn); }
.rc-wizard .rc-wizard__tick--green { left: 80%; background: var(--in-tune); box-shadow: 0 0 0 0.5px rgb(15 17 21 / 0.55); }
.rc-wizard .rc-wizard__q-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: center; }
.rc-wizard .rc-wizard__q-name, .rc-wizard .rc-wizard__q-detail { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.rc-wizard .rc-wizard__q-detail { text-align: right; min-width: 6.4em; }
.rc-wizard .is-narrow .rc-wizard__q-detail { min-width: 0; }

/* ---------- Site controls ---------- */
.rc-wizard .rc-wizard__controls { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.rc-wizard .rc-wizard__row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.rc-wizard .rc-wizard__seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--hairline); }
.rc-wizard .rc-wizard__seg-btn { min-height: 40px; min-width: 40px; padding: 0 14px; border-radius: 9px; font-size: 0.875rem; font-weight: 600; color: var(--text-2); white-space: nowrap;
  transition: background-color var(--t-state) var(--ease), color var(--t-state) var(--ease); }
.rc-wizard .rc-wizard__seg-btn:hover { color: var(--text); }
.rc-wizard .rc-wizard__seg-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 20%, transparent); color: color-mix(in srgb, var(--accent) 70%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.rc-wizard .is-narrow .rc-wizard__seg { display: flex; width: 100%; }
.rc-wizard .is-narrow .rc-wizard__seg-btn { flex: 1 1 0; padding: 0 8px; }
.rc-wizard .rc-wizard__btn { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid rgb(232 234 240 / 0.22); font-size: 0.875rem; font-weight: 650; color: var(--text); white-space: nowrap;
  transition: background-color var(--t-state) var(--ease), border-color var(--t-state) var(--ease), opacity var(--t-state) var(--ease); }
.rc-wizard .rc-wizard__btn:hover { background: rgb(232 234 240 / 0.06); border-color: rgb(232 234 240 / 0.45); }
.rc-wizard .rc-wizard__btn--primary { background: var(--accent); border-color: var(--accent); color: #07111f; min-width: 104px; }
.rc-wizard .rc-wizard__btn--primary:hover { background: #74b6ff; border-color: #74b6ff; }
.rc-wizard .rc-wizard__btn--ghost { border-color: transparent; color: var(--text-2); margin-left: auto; }
.rc-wizard .rc-wizard__btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.rc-wizard .rc-wizard__btn:focus-visible, .rc-wizard .rc-wizard__seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-wizard .rc-wizard__btn--primary:focus-visible { outline-color: var(--text); }
.rc-wizard .rc-wizard__tip { font-size: 0.8125rem; color: var(--text-2); min-height: 2.8em; }
.rc-wizard .is-narrow .rc-wizard__row { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.rc-wizard .is-narrow .rc-wizard__row > .rc-wizard__seg { grid-column: 1 / -1; }
.rc-wizard .is-narrow .rc-wizard__btn--ghost { grid-column: 1 / -1; margin-left: 0; border-color: var(--hairline); }
@media (pointer: coarse) {
  .rc-wizard .rc-wizard__seg-btn, .rc-wizard .rc-wizard__btn { min-height: 44px; }
}