/* styles/sections/spec-builder-building.css
 * The learning board and the reflecting chips: one surface, two modes (js/spec-building.js).
 * The four slice rows are built once and never destroyed; the only thing that changes is
 * `data-mode` on the board root, so every rule below keys off that one attribute and the board
 * morphs into the chips instead of being replaced by them. Re-based from css/spec-building.css.
 *
 * CTA pattern (SPEC-BUILDER-CONTRACT.md section 3): rag left, auto width, secondary left and
 * primary right, matching min-height. The one exception is the mobile sticky confirm. Light mode
 * only. */
@layer sections {
  .sb {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .sb-orb {
    margin-bottom: var(--space-4);
  }

  /* ===================== PROGRESS: described, never counted ===================== */

  .sb-progress {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin: 0 0 var(--space-4);
    color: var(--ink-2);
    font-size: var(--spec-ui-sm);
    line-height: 1.4;
  }

  .sb-progress-count {
    flex: none;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ===================== THE BOARD ===================== */

  .sb-board {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sb-slice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    background: var(--white);

    /* The morph: both modes are the same element, so these interpolate rather than cut */
    transition: border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
  }

  .sb-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
  }

  .sb-label {
    color: var(--ink-2);
    font-size: var(--spec-ui-sm);
    font-weight: 600;
    line-height: 1.3;
    transition: font-size 0.35s ease, color 0.35s ease;
  }

  .sb-value {
    color: var(--ink);
    font-size: var(--spec-body);
    line-height: 1.5;
    overflow-wrap: anywhere;
    transition: color 0.35s ease;
  }

  /* "Best guess": confidence in words. The dot and the dashed chip only reinforce it. */
  .sb-flag {
    align-self: flex-start;
    margin-top: var(--space-4);
    padding: 2px var(--space-8);
    border-radius: var(--radius-pill);
    background: var(--orange-tint);
    color: var(--orange-ink);
    font-size: var(--spec-micro);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  /* Decoration: every row also carries its state in text */
  .sb-dot {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 7px;
    border-radius: var(--radius-pill);
    background: var(--line-2);
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
  }

  .sb-slice[data-state="pending"] .sb-value {
    color: var(--ink-muted);
  }

  .sb-slice[data-state="pending"] .sb-dot {
    animation: sb-pulse 1.4s ease-in-out infinite;
  }

  .sb-slice[data-state="resolved"] .sb-dot {
    background: var(--fern);
  }

  .sb-slice[data-state="absent"] .sb-dot {
    background: var(--rule-edge);
  }

  .sb-slice[data-state="absent"] .sb-value {
    color: var(--ink-muted);
    font-style: italic;
  }

  /* A slice landing is the payoff: the user is watching their own business appear */
  .sb-slice[data-state="resolved"] .sb-value {
    animation: sb-value-in 0.4s ease-out;
  }

  @keyframes sb-pulse {
    0%,
    100% {
      opacity: 0.35;
    }

    50% {
      opacity: 1;
    }
  }

  @keyframes sb-value-in {
    from {
      opacity: 0;
      transform: translateY(3px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  /* A resumed board is not landing: the work finished before the user arrived */
  .sb[data-resumed] .sb-slice .sb-value {
    animation: none;
  }

  /* ===================== REFLECTING: the rows become the chips ===================== */

  /* The row's chrome dissolves; the chip it holds is the box that matters */
  .sb[data-mode="reflecting"] .sb-slice {
    padding-inline: 0;
    border-color: transparent;
    background: transparent;
  }

  /* The label demotes to a caption and the value takes the emphasis */
  .sb[data-mode="reflecting"] .sb-label {
    color: var(--ink-muted);
    font-size: var(--spec-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .sb[data-mode="reflecting"] .sb-value {
    font-size: var(--t-body-size);
  }

  .sb[data-mode="reflecting"] .sb-slice[data-confidence="settled"] .sb-dot {
    background: var(--fern);
  }

  .sb[data-mode="reflecting"] .sb-slice[data-confidence="soft"] .sb-dot {
    background: var(--orange);
  }

  /* ===================== POSITIONING'S THREE FIELDS ===================== */

  .sb-position-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: var(--space-4) 0 0;
  }

  .sb-position-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .sb-position-label {
    color: var(--ink-muted);
    font-size: var(--spec-micro);
    font-weight: 600;
    line-height: 1.3;
  }

  /* Every editable value on the board is this one chip: a full-width text box that matches the
     entry form's fields. One control per editable group. */
  .sb-chip {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: var(--space-12) var(--space-14);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    background: var(--field-bg);
    color: var(--ink);
    font: inherit;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;

    /* A group's joined text is one name per line; a <button> would collapse the breaks */
    white-space: pre-line;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
  }

  .sb-chip:not([aria-disabled="true"]):hover {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
  }

  /* Soft chips look unfinished on purpose: attention goes to what Brief is unsure about */
  .sb-chip[data-confidence="soft"] {
    border-style: dashed;
    border-color: var(--orange);
    background: var(--orange-wash);
    color: var(--orange-ink);
  }

  .sb-chip[data-confidence="settled"] {
    border-color: var(--field-border);
    background: var(--field-bg);
  }

  /* The user's own correction is the one thing on the board that is certainly true */
  .sb-chip[data-confidence="edited"] {
    border-color: var(--fern);
    background: var(--mist);
    color: var(--fern);
    font-weight: 600;
  }

  /* A chip locked during an in-flight confirm stays focusable (aria-disabled, not disabled) and
     says so with colour and cursor instead of opacity, which would dim its focus ring. It sits
     after the confidence rules so it wins their tied specificity. */
  .sb-chip[aria-disabled="true"] {
    opacity: 1; /* styles/reset.css gives every [aria-disabled] 0.42, which would dim the focus ring */
    border-color: var(--line-2);
    background: var(--paper);
    color: var(--ink-muted);
    cursor: default;
  }

  /* ===================== MISMATCH CARD ===================== */

  .sb-mismatch {
    padding: var(--space-16);
    border: 1px solid var(--orange);
    border-radius: var(--radius-md);
    background: var(--orange-wash);
  }

  .sb-mismatch-title {
    margin: 0 0 var(--space-4);
    color: var(--orange-ink);
    font-weight: 600;
  }

  .sb-mismatch-body {
    margin: 0 0 var(--space-8);
    color: var(--ink-2);
    font-size: var(--spec-ui-sm);
    line-height: 1.5;
  }

  .sb-mismatch-ack {
    min-height: 44px;
  }

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

  .sb-actions {
    display: flex;
    flex-direction: column;

    /* Rag left, and the confirm is not full width: a column flex container would stretch it */
    align-items: flex-start;
    gap: var(--space-8);
    margin-top: var(--space-8);
  }

  .sb-note {
    margin-top: var(--space-4);
    text-align: left;
  }

  /* Pick it back up, then Start over: one rag-left row, secondary first */
  .sb-recover {
    display: flex;
    flex-flow: row wrap;
    gap: var(--space-8) var(--space-16);
    align-items: center;
    justify-content: flex-start;
  }

  .sb-confirm-hint {
    margin: var(--space-4) 0 0;
    color: var(--ink-muted);
  }

  .sb-confirm {
    min-height: 44px;
  }

  /* ===================== EDITABLE VALUES ===================== */

  .sb-chips,
  .sb-slot {
    display: block;
  }

  /* The editor stands in for the chip in place, so the surrounding read stays visible. The
     textarea is already the box; the editor adds no second one. */
  .sb-editor {
    display: block;
    width: 100%;
    padding: var(--space-8);
    color: var(--ink);
  }

  .sb-editor-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .sb-editor-label {
    font-size: var(--spec-ui-sm);
    font-weight: 600;
  }

  /* An auto-growing textarea (js/spec-building.js): every line shown, no handle or scrollbar.
     The field values come from spec-builder-entry.css. */
  .sb-editor-input {
    resize: none;
    overflow: hidden;
    min-height: 44px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  /* Brief showing its working */
  .sb-editor-evidence {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--spec-ui-sm);
    line-height: 1.5;
  }

  /* Rag left, secondary first: js/spec-building.js appends Cancel before Save */
  .sb-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-16);
    align-items: center;
    justify-content: flex-start;
    margin-top: var(--space-4);
  }

  .sb-editor-save {
    min-height: 44px;
  }

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

  /* ===================== MOBILE: the confirm stays reachable ===================== */

  @media (max-width: 899px) {
    .sb-actions {
      position: sticky;
      bottom: 0;
      z-index: 1;
      padding-bottom: env(safe-area-inset-bottom, 0);
      background: linear-gradient(to bottom, transparent, var(--white) 30%);
    }

    /* The one exception to auto width: a small pill floating in a full-bleed sticky bar is
       worse than the full-width target. Scoped to the confirm so a secondary added to this
       cluster later is not stretched. */
    .sb-confirm {
      width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sb-slice,
    .sb-label,
    .sb-value,
    .sb-dot,
    .sb-chip {
      transition: none;
    }

    .sb-slice[data-state="pending"] .sb-dot,
    .sb-slice[data-state="resolved"] .sb-value {
      animation: none;
    }
  }

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

  /* The shell toggles hidden on the root, and the orb and the progress line carry a display.
     .sb[hidden] is the root, .sb [hidden] its descendants; they are not the same rule. */
  .sb[hidden],
  .sb [hidden] {
    display: none;
  }
}