/* styles/sections/spec-builder-entry.css
 * Spec Builder entry screen and the pieces the whole flow shares. The card, page frame, step
 * type, orb, turnstile and the base option tile come from styles/sections/lite-form.css, which
 * this file loads after; it holds only what the Spec Builder does differently: a fixed card
 * headline, the entry form's furniture, the option tiles on the forms board (A5L5JX) hover and
 * indicator values, and bridges for the class names js/spec-*.js emits (btn-primary,
 * btn-secondary, lite-back, lite-field, lite-form-error). styles/sections/lite-form.css is not
 * edited, so the teardown and coach pages render as before. Tokens only. Flow screens have
 * their own spec-builder-*.css.
 *
 * `hidden` must keep hiding: the shell toggles it on elements that carry a `display`, and a
 * class-level display beats the UA rule, so each toggled element is re-asserted at the end. */
@layer sections {
  /* The ui, ui-sm, label and micro roles in styles/typography.css are classes with literal sizes
     and expose no custom properties, so their sizes are named here once. --spec-body is the
     forms board's 16px control and label size, --spec-title the question and section title
     (20px at every width; the h5 role grows to 28px on W, which a fixed card cannot hold),
     --spec-headline the card headline (24px on M, 30px from D). The last two have no role. */
  .lite-page {
    --spec-ui: 15px;
    --spec-ui-sm: 14px;
    --spec-label: 13px;
    --spec-micro: 12px;
    --spec-body: 16px;
    --spec-title: 20px;
    --spec-headline: 24px;
  }

  /* lite-form.css sets the headline on the h3 role, which grows to 40px and 48px on D and W
     inside a card that does not widen. The Spec Builder keeps one size per breakpoint. */
  .lite-headline {
    font-size: var(--spec-headline);
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  /* ===================== ENTRY FORM ===================== */

  /* "(required)" and "(optional)" are the same quiet word, so neither field kind shouts */
  .lite-required,
  .lite-optional {
    color: var(--ink-muted);
    font-weight: 400;
  }

  /* The idea is two lines, not the 120px default */
  #field-idea {
    min-height: 88px;
  }

  /* The character counter changes on every keystroke: fixed-width digits keep it still */
  #paste-counter {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .lite-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .lite-actions .lite-submit {
    margin-top: 0;
  }

  /* Form-level error (entry, board, final document). The values of a .form-message--error: the
     element is built by js/spec-*.js without .form-message, and the icon is a mask of the forms
     board's alert glyph, so the message never rides on colour alone. */
  .lite-form-error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-10);
    margin: 0;
    padding: calc(var(--space-14) - 1px) calc(var(--space-16) - 1px);
    border: 1px solid color-mix(in srgb, var(--field-error) 25%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--field-error) 8%, transparent);
    color: var(--field-fg);
    font-size: var(--spec-ui);
    line-height: 1.45;
  }

  .lite-form-error::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background-color: var(--field-error);
    mask: var(--icon-alert) center / contain no-repeat;
  }

  /* ===================== CONTROLS BUILT BY JS ===================== */

  /* js/spec-questions-skeleton.js builds the free-text row as `.lite-field` > label + textarea,
     and js/spec-building.js builds the board editor's `.sb-editor-input`. Neither can carry
     .field / .textarea, so they take the same values here. */
  .lite-field label {
    display: block;
    margin-bottom: var(--space-8);
    font-size: var(--spec-ui-sm);
    font-weight: 600;
    line-height: 1.2;
  }

  .lite-field textarea,
  .sb-editor-input {
    --focus-offset: 4px;
    --field-ring: transparent;
    --field-lift: 0 0 transparent;

    display: block;
    width: 100%;
    min-height: 88px;
    padding: var(--space-12) var(--space-14);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    background-color: var(--field-bg);
    color: var(--field-fg);
    font-family: var(--font-body);
    font-size: var(--spec-body);
    line-height: 1.45;
    resize: vertical;
    box-shadow: var(--field-lift), inset 0 0 0 1px var(--field-ring);
    transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
  }

  .lite-field textarea::placeholder {
    color: var(--field-placeholder);
    opacity: 1;
  }

  .lite-field textarea:hover:not(:disabled, [aria-invalid="true"], :focus-visible),
  .sb-editor-input:hover:not(:disabled, [aria-invalid="true"], :focus-visible) {
    --field-ring: var(--field-border-hover);
    --field-lift: var(--field-hover-lift);

    border-color: var(--field-border-hover);
  }

  .lite-field textarea:focus-visible,
  .sb-editor-input:focus-visible {
    --field-ring: var(--field-border-focus);

    border-color: var(--field-border-focus);
  }

  .lite-field textarea[aria-invalid="true"],
  .sb-editor-input[aria-invalid="true"] {
    border-color: var(--field-error);
  }

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

  /* The entry's outcome chips and the question screen's choices (a <button>, see
     spec-builder-questions.css) share lite-form.css's tile. Here it takes the forms board
     (A5L5JX) values: a 20px control, 12px to a body-16 regular label, and a hover of a 2px ink
     edge (the 1px border plus a 1px inset ring, so the box never changes size) with the
     Elevation/low lift. A chip that is off reads the same as one that is untouched: the check
     and the fern edge carry "on", so the tile stays at full strength. */
  .lite-competitor-card {
    position: relative;
    min-height: 44px;
    padding: var(--space-10) var(--space-16);
    cursor: pointer;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
  }

  .lite-competitor-card[data-selected="false"] {
    background: var(--white);
  }

  .lite-competitor-card[data-selected="false"] .lite-competitor-body {
    color: inherit;
  }

  .lite-competitor-card[data-selected="true"] {
    background: var(--mist);
  }

  .lite-competitor-card:hover:not(:disabled) {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink), var(--elevation-low);
  }

  .lite-competitor-card:hover .lite-competitor-toggle:not([aria-pressed="true"]) {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
  }

  /* The checkbox: 20px drawn, 44px to hit (the ::before reaches 12px past every edge) */
  .lite-competitor-toggle {
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    border-width: 1px;
  }

  .lite-competitor-toggle::before {
    inset: -12px;
  }

  .lite-competitor-toggle:hover {
    box-shadow: inset 0 0 0 1px var(--ink);
  }

  /* The board's check glyph (14px, white on fern) in place of the border-drawn tick */
  .lite-competitor-toggle[aria-pressed="true"]::after {
    inset: 0;
    width: 14px;
    height: 14px;
    margin: auto;
    border: 0;
    background-color: var(--field-check-fg);
    mask: var(--icon-check) center / contain no-repeat;
    transform: none;
  }

  .lite-competitor-title {
    font-size: var(--spec-body);
    line-height: 1.4;
  }

  .lite-competitor-title strong {
    color: var(--ink);
    font-weight: 400;
  }

  /* ===================== ACTION CLASSES THE JS EMITS ===================== */

  /* js/spec-*.js builds buttons as `btn btn-primary` / `btn btn-secondary`; those names are
     pinned by tests, so the .btn--primary and .btn--secondary values are carried here (fills
     and states; the pressed sink animation is the one thing left out). */
  .btn-primary {
    background: var(--fern);
    color: var(--white);
  }

  .btn-secondary {
    border-color: var(--rule-edge);
    background: var(--white);
    color: var(--ink);
  }

  @media (hover: hover) {
    .btn-primary:hover:not([disabled], [aria-disabled="true"], [aria-busy="true"]) {
      background: var(--fern-hover);
      box-shadow: var(--shadow-btn-hover);
    }

    .btn-secondary:hover:not([disabled], [aria-disabled="true"], [aria-busy="true"]) {
      border-color: var(--ink);
      background: var(--paper);
      box-shadow: var(--elevation-subtle);
    }
  }

  .btn-primary:active:not([disabled], [aria-disabled="true"], [aria-busy="true"]) {
    background: var(--fern-pressed);
    box-shadow: var(--shadow-btn-pressed);
  }

  .btn-secondary:active:not([disabled], [aria-disabled="true"], [aria-busy="true"]) {
    border-color: var(--ink);
    background: var(--mist);
    box-shadow: inset 0 2px 4px var(--line);
  }

  /* The quiet text button (Start over, Cancel). It sits in a row beside a button, so it drops
     the bottom margin lite-form.css gives it (which lifts its label off the button's baseline)
     and matches the row's 15px. */
  .lite-back {
    margin: 0;
    font-size: var(--spec-ui);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* js/spec-building.js builds its hint and note as `.lite-microcopy`; lite-form.css pulls that
     up under a field, which clips it under a button. Each caller sets its own margin. */
  .lite-microcopy {
    margin: 0;
  }

  @media (min-width: 900px) {
    .lite-page {
      --spec-headline: 30px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .lite-field textarea,
    .sb-editor-input,
    .lite-competitor-card,
    .lite-competitor-toggle {
      transition: none;
    }
  }

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

  .lite-form-error[hidden] {
    display: none;
  }
}