/* styles/sections/spec-builder-questions.css
 * The question flow (js/spec-questions*.js): one card, one question, radio-style option tiles and
 * a free-text row in the same list, Skip on the left and Next at the bottom right. Selecting a
 * tile only selects; Next submits. Mobile is P0 (SPEC-BUILDER-CONTRACT.md section 3): one card,
 * one column, so there is no layout to collapse. Light mode only. Re-based from
 * css/spec-questions.css. The tile box and checkbox come from spec-builder-entry.css. */
@layer sections {
  /* ===================== LAYOUT ===================== */

  .specq {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .specq-heading {
    margin: 0;
  }

  /* ===================== THE CARD ===================== */

  .specq-card {
    position: relative; /* anchors .specq-loading-overlay's absolute cover */
    padding: var(--space-24);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    background: var(--white);
  }

  .specq-title-row {
    margin: 0 0 var(--space-16);
  }

  /* Text-equivalent progress, an eyebrow above the title. Never a bar or a percentage: there is
     no denominator to promise. It sits outside .specq-body, so the working dim never touches it. */
  .specq-progress {
    margin: 0 0 var(--space-8);
    color: var(--ink-muted);
    font-size: var(--spec-label);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* The problem's short title: the visual anchor of the card. `.specq-problem` is its subhead. */
  .specq-problem-title {
    margin: 0 0 var(--space-4);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--spec-title);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .specq-problem {
    margin: 0;
    min-width: 0;
    color: var(--ink-2);
    font-size: var(--spec-body);
    line-height: 1.55;
  }

  /* A question stored without a title renders the problem alone, at full strength */
  .specq-title-row:has(.specq-problem-title[hidden]) .specq-problem {
    color: var(--ink);
    font-size: var(--t-body-size);
  }

  /* ===================== BETWEEN QUESTIONS ===================== */

  /* The card stays readable while Brief works the answer in; a blank card for 10 to 20 seconds
     is the most expensive moment in the flow. 0.78 keeps the body text above 4.5:1. The status
     line is a real element outside this subtree because opacity would dim a pseudo-element. */
  .specq-card[data-working="true"] .specq-body {
    opacity: 0.78;
    transition: opacity var(--dur-overlay) ease-out;
  }

  .specq-working-note {
    margin: 0 0 var(--space-12);
    color: var(--ink-2);
    font-size: var(--spec-ui-sm);
    font-style: italic;
  }

  /* The full loading state (before the first question, after the last answer, on re-entry).
     The card drops its own border and fill, so the spinner reads as sitting on the page like the
     heading above it. Both must go: the overlay's inset reaches the padding edge, and the
     1px border strip sits on the card's background. */
  .specq-card[data-working-mode="full"] {
    border-color: transparent;
    background: transparent;
  }

  /* The overlay stays opaque and matches the card behind it (.lite-card, white). Transparent
     would show the previous question straight through. The z-index is load-bearing: the dimmed
     .specq-body is its own stacking context and painted over an auto-z-index sibling. */
  .specq-loading-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    padding: var(--space-24);
    background: var(--white);
  }

  .specq-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--line-2);
    border-top-color: var(--fern);
    border-radius: var(--radius-pill);
    animation: specq-spin 0.8s linear infinite;
  }

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

  .specq-loading-text {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--spec-ui);
    text-align: center;
  }

  /* ===================== OPTION TILES ===================== */

  /* The group wrapper (role="group", named by the question) disappears with its hidden list */
  .specq-options-wrap:has(> .specq-options[hidden]) {
    display: none;
  }

  .specq-option-item {
    display: block;
  }

  /* The tile is a <button> wearing .lite-competitor-card (spec-builder-entry.css) */
  .specq-option-btn {
    width: 100%;
    min-height: 44px;
    text-align: left;
    font: inherit;
    color: inherit;
  }

  .specq-option-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    box-shadow: none;
  }

  /* Selected reads as checked before Next is pressed. aria-pressed is the one source, so the
     visual and announced states cannot drift. */
  .specq-option-btn[aria-pressed="true"] {
    border-color: var(--fern);
    background: var(--mist);
  }

  /* A circle, not a checkbox: one pick, so it reads differently from the entry's multi-select */
  .specq-option-radio {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-pill);
    background: var(--field-bg);
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
  }

  .specq-option-btn:hover:not(:disabled, [aria-pressed="true"]) .specq-option-radio {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
  }

  .specq-option-btn[aria-pressed="true"] .specq-option-radio {
    border-color: var(--field-radio);
    background: radial-gradient(circle, var(--field-radio) 0 4.75px, transparent 5.25px), var(--field-bg);
  }

  .specq-option-description {
    margin: var(--space-4) 0 0;
    color: var(--ink-2);
    font-size: var(--spec-ui-sm);
    line-height: 1.5;
  }

  /* Marks Brief's suggestion, which is a different fact from the selection marker */
  .specq-recommended-note {
    color: var(--ink-2);
  }

  /* The free-text row is one more item in the same list, so the list gap spaces it */
  .specq-freetext label {
    color: var(--ink-2);
  }

  /* ===================== ACTIONS ===================== */

  /* Skip first in DOM order, Next after it; flex-end puts that same order at the right edge.
     No `order` and no reverse: tab order must follow what the eye sees. */
  .specq-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: center;
    justify-content: flex-end;
    margin-top: var(--space-24);
  }

  /* The free-text wrapper kept the old .lite-field bottom margin (24px) under it, so the action
     row sat about 56px below the field; 32 here plus the 24 above restores that. */
  .specq-freetext-item {
    margin-bottom: var(--space-32);
  }

  /* Not full width: a bar would read as a form submit, which this is not */
  .specq-actions .btn {
    min-height: 44px;
    flex: 0 1 auto;
    width: auto;
  }

  /* ===================== BANNER (never a modal) ===================== */

  .specq-banner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-14) var(--space-16);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    background: var(--paper);
  }

  /* Built by js/spec-turn-engine.js, so these carry the engine's neutral names */
  .spec-banner-text {
    flex: 1 1 12rem;
    color: var(--ink-2);
    font-size: var(--spec-ui);
    line-height: 1.5;
  }

  .spec-banner-btn {
    min-height: 44px;
  }

  /* The cap is the strongest conversion moment: earned and warm, never "you're out" */
  .specq-capped {
    width: 100%;
    padding: var(--space-16);
    border: 1px solid var(--fern);
    border-radius: var(--radius-md);
    background: var(--mist);
  }

  .specq-capped-title {
    margin: 0 0 var(--space-6);
    color: var(--fern);
    font-weight: 600;
  }

  .specq-capped-body {
    margin: 0 0 var(--space-12);
    color: var(--ink-2);
    line-height: 1.55;
  }

  .specq-capped .btn {
    min-height: 44px;
  }

  /* A finalize failure reported inside the capped card, next to the only claim CTA */
  .specq-capped-error {
    margin: var(--space-12) 0 0;
    color: var(--ink-2);
    font-size: var(--spec-ui-sm);
    line-height: 1.5;
  }

  .specq-interim-claim {
    min-height: 44px;
    margin-top: var(--space-20);
  }

  /* Announced once per question, never per keystroke */
  .specq-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .specq-card[data-working="true"] .specq-body {
      transition: none;
    }

    /* The rotating text is handled in js/spec-rotating-copy.js; the ring needs its own guard */
    .specq-loading-spinner {
      animation: none;
    }
  }

  /* ===================== hidden MUST WIN ===================== */

  /* The UA [hidden] rule is the weakest in the cascade, so any class-level display beats it.
     The root names the container the shell toggles ([data-spec-substate="refining"]), not
     .specq: that is a child, and nothing ever sets hidden on it. */
  [data-spec-substate="refining"][hidden],
  .specq [hidden] {
    display: none;
  }
}