/* Intake screen (slice 2) — layers over app.css + design/tokens.css. Reuses the
   shared primitives (.notice, .btn, .chip, .examining, .examine-error, .src-chip)
   and adds only the input form, the PROPOSED/UNCONFIRMED treatment, the per-factor
   proposal cards, the verbatim anchors, and the plain review flags. Tokens only;
   no font sizes below 14px; weights 400/500 only; status by word + colour. */

:root {
  /* Integrity flag — the anchor could not be grounded. Paired ALWAYS with a word. */
  --alert: #a11220;
  --alert-bg: #fdecec;
}

/* --- Input form --- */
.intake-form {
  max-width: var(--maxw); margin: 28px auto 0;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 24px 24px 26px;
}
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.field label {
  font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium); color: var(--ink);
}
.control {
  font: inherit; font-size: var(--font-size-body); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 10px 12px; min-height: 44px;
}
.control:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus); }
.control--text { line-height: var(--line-height-body); resize: vertical; min-height: 180px; }
.field--doctrine { max-width: 420px; }

.narratives-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .narratives-grid { grid-template-columns: 1fr; } }

.form-actions { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-hint { margin: 0; font-size: var(--font-size-secondary); color: var(--ink-2); }

/* --- Loading / error wrapper reuses .examining / .examine-error from app.css --- */
.propose-status { max-width: var(--maxw); margin: 24px auto 0; }

/* --- Proposal --- */
.proposal { max-width: var(--maxw); margin: 28px auto 0; }

.proposed-banner {
  background: var(--open-bg); border: 1px solid var(--open); border-left: 6px solid var(--open);
  border-radius: 10px; padding: 16px 20px; margin-bottom: 22px;
}
.proposed-banner__tag {
  display: inline-block; font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--on-focus); background: var(--open); border-radius: 999px; padding: 4px 12px;
}
.proposed-banner__text { margin: 10px 0 0; font-size: var(--font-size-body); color: var(--ink); }

.proposal__title {
  margin: 0; font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-medium); line-height: var(--line-height-heading);
}
.proposal__summary { margin: 10px 0 0; font-size: var(--font-size-body); color: var(--ink); }
.proposal__meta { margin: 10px 0 0; font-size: var(--font-size-secondary); color: var(--ink-2); }
.proposal__flags { margin: 14px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }

.scope-out {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-left: 6px solid var(--disputed); border-radius: 10px; padding: 20px 22px;
}
.scope-out__head { margin: 0 0 6px; font-size: var(--font-size-heading-sm); font-weight: var(--font-weight-medium); }
.scope-out__note { margin: 0; font-size: var(--font-size-body); color: var(--ink); }

/* --- Focus block: the dispositive factor(s) --- */
.focus { margin-top: 8px; }
.focus__none {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; margin: 0; font-size: var(--font-size-body); color: var(--ink-2);
}

/* --- Per-factor proposal card --- */
.pfactor-list { display: flex; flex-direction: column; gap: 12px; }
.pfactor {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px;
}
.pfactor--focus { border: 1px solid var(--line-strong); border-left: 6px solid var(--open); padding: 22px 24px; }
.pfactor__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pfactor__label {
  margin: 0; font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-medium); line-height: var(--line-height-heading);
}
.pfactor--focus .pfactor__label { font-size: var(--font-size-heading-md); }
.pfactor__sub { margin: 4px 0 0; font-size: var(--font-size-secondary); color: var(--ink-2); }
.pfactor__flags { margin: 12px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.pfactor__note { margin: 12px 0 0; font-size: var(--font-size-body); color: var(--ink-2); }
.pfactor__reason { margin: 10px 0 0; font-size: var(--font-size-secondary); color: var(--ink-2); font-style: italic; }

/* --- Verbatim anchor: the quote + its narrative + paragraph --- */
.anchor {
  margin: 14px 0 0; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}
.anchor__src { margin: 0 0 8px; }
.anchor__quote { margin: 0; font-size: var(--font-size-body); color: var(--ink); }

/* --- Plain flags — word + colour + symbol, never colour alone --- */
.flag {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium);
  padding: 4px 12px; border-radius: 999px; border: 1px solid currentColor;
}
.flag__sym { font-weight: var(--font-weight-medium); }
.flag--review { color: var(--disputed); background: var(--disputed-bg); }
.flag--unverified { color: var(--alert); background: var(--alert-bg); }

/* --- Status chip: the proposed third state (unaddressed) is calm neutral grey --- */
.chip--unaddressed { color: var(--ink-2); background: #ececea; }

/* ============================================================================
   Slice 3 — confirm-and-correct editor. Large explicit labelled targets (no
   dropdowns, no hidden gestures); status/anchor state by word + colour; the
   confirmed view reads as settled. Tokens only; weights 400/500; >=44px targets.
   ============================================================================ */

:root {
  /* "Your judgement, not anchored" — a distinct state, always shown with its word. */
  --judgement: #4b2e8f;
  --judgement-bg: #efe9fb;
}

/* --- Editable factor card --- */
.edit-section { margin-top: 30px; }
.efactor {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px;
}
.efactor--focus { border: 1px solid var(--line-strong); border-left: 6px solid var(--open); padding: 22px 24px; }
.efactor__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.efactor__label {
  margin: 0; font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-medium); line-height: var(--line-height-heading);
}
.efactor__branch { margin: 4px 0 0; font-size: var(--font-size-secondary); color: var(--ink-2); }
.efactor__flags { margin: 12px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.efactor__note { margin: 14px 0 0; font-size: var(--font-size-body); color: var(--ink-2); }
.efactor__reason { margin: 8px 0 0; font-size: var(--font-size-secondary); color: var(--ink-2); font-style: italic; }

/* --- A labelled control row (status, anchor) --- */
.control-row { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; flex-wrap: wrap; }
.control-row__label {
  min-width: 64px; padding-top: 11px;
  font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium); color: var(--ink-2);
}

/* --- Segmented control: explicit options, current one shown selected --- */
.seg { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.seg__btn {
  font: inherit; font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium);
  min-height: 44px; padding: 8px 16px; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 8px;
}
.seg__btn:hover { background: var(--bg); }
.seg__btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.seg__btn.is-on { color: var(--on-focus); border-color: var(--focus); background: var(--focus); }
/* Selected status carries its OWN colour, so the choice reads by colour + word. */
.seg__btn--agreed.is-on { background: var(--agreed); border-color: var(--agreed); }
.seg__btn--disputed.is-on { background: var(--disputed); border-color: var(--disputed); }
.seg__btn--unaddressed.is-on { background: var(--ink-2); border-color: var(--ink-2); }
.seg__btn--anchored.is-on { background: var(--agreed); border-color: var(--agreed); }
.seg__btn--judgement.is-on { background: var(--judgement); border-color: var(--judgement); }

/* --- Dispositive toggle --- */
.toggle {
  font: inherit; font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium);
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px;
}
.toggle__box {
  width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-secondary);
}
.toggle.is-on { color: var(--focus); border-color: var(--focus); background: #eef3f8; }
.toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* --- Anchor editing --- */
.anchor-edit { display: flex; flex-direction: column; gap: 10px; flex: 1 1 280px; }
.anchor--set-aside { opacity: 0.55; }
.anchor-note { margin: 0; font-size: var(--font-size-secondary); color: var(--ink-2); }
.linklike {
  align-self: flex-start; font: inherit;
  font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium);
  min-height: 44px; padding: 8px 14px; cursor: pointer;
  background: transparent; color: var(--alert); border: 1px solid var(--alert); border-radius: 8px;
}
.linklike:hover { background: var(--alert-bg); }
.linklike:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.linklike--calm { color: var(--focus); border-color: var(--focus); }
.linklike--calm:hover { background: #eef3f8; }

/* --- Extra flag states --- */
.flag--judgement { color: var(--judgement); background: var(--judgement-bg); }
.flag--ok { color: var(--agreed); background: var(--agreed-bg); }

/* --- Bulk unaddressed group --- */
.unaddr-group { margin-top: 30px; }
.unaddr-group__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.unaddr-group__head .section-heading { margin: 0; }
.unaddr-group__head .section-sub { margin: 0; flex: 1 1 220px; }

/* --- Confirm bar --- */
.confirm-bar {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.confirm-bar__note { margin: 0; font-size: var(--font-size-secondary); color: var(--ink-2); flex: 1 1 240px; }

/* --- Settled (confirmed) view --- */
.settled-banner {
  background: var(--agreed-bg); border: 1px solid var(--agreed); border-left: 6px solid var(--agreed);
  border-radius: 10px; padding: 16px 20px; margin-bottom: 18px;
}
.settled-banner__tag {
  display: inline-block; font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--on-focus); background: var(--agreed); border-radius: 999px; padding: 4px 12px;
}
.settled-banner__text { margin: 10px 0 0; font-size: var(--font-size-body); color: var(--ink); }

.pfactor__tags { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ro-tag {
  display: inline-flex; align-items: center;
  font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium);
  color: var(--open); background: var(--open-bg); border: 1px solid var(--open);
  border-radius: 999px; padding: 3px 12px; white-space: nowrap;
}

/* --- "What you changed" summary --- */
.changes {
  margin: 18px 0 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 18px 20px;
}
.changes__none { margin: 0; font-size: var(--font-size-body); color: var(--ink-2); }
.changes__group {
  margin: 14px 0 6px; font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium);
  color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em;
}
.changes__list { margin: 0; padding-left: 20px; }
.changes__list li { font-size: var(--font-size-body); margin: 4px 0; }

/* The settled "Re-open to edit" sits just under the title. */
.settled-banner + .proposal__title { margin-bottom: 14px; }

/* --- Slice 4: Examine on a confirmed dispositive factor (intake page) --- */
.focus-item { margin-bottom: 22px; }
.focus-item .examine-actions { margin-top: 16px; }
.focus-item .examine-result { margin-top: 20px; }

/* ============================================================================
   Phase 3 — SETTLED side-rail view (step 1). Full-viewport two-pane reading view,
   used ONLY by renderSettled. Additive; the editor is untouched. Self-hosted tokens
   only (no CDN). Status colours come from app.css :root (--dispositive/--disputed/
   --agreed/--unaddressed), fonts from tokens.css (--font-serif/--font-sans-new/--font-mono).
   ============================================================================ */
.sr-overlay {
  position: fixed; inset: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; background: var(--paper); z-index: 900;
}

/* Header band */
.sr-header { flex: 0 0 auto; border-bottom: 1px solid var(--line); padding: 18px 40px 16px; }
.sr-header__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sr-brand { display: flex; align-items: baseline; gap: 14px; }
.sr-eyebrow {
  font-family: var(--font-sans-new); font-size: var(--font-size-secondary);
  font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-2);
}
.sr-reopen { flex: 0 0 auto; }
.sr-summary {
  margin: 10px 0 0; font-family: var(--font-serif); font-size: var(--font-size-heading-sm);
  color: var(--ink); max-width: 62ch;
}
.sr-counts {
  margin: 6px 0 0; font-family: var(--font-sans-new); font-size: var(--font-size-secondary); color: var(--ink-2);
}
.sr-disclaim {
  margin: 4px 0 0; font-family: var(--font-sans-new); font-size: var(--font-size-secondary);
  font-style: italic; color: var(--ink-2);
}
/* Mandated non-reliance notice (env.notice), compact in the settled header — quiet neutral
   italic (matching the Phase-2 softened notice), a slim left-ruled row, not a boxed banner.
   At the 14px secondary floor so it stays legible. */
.sr-notice {
  margin: 8px 0 0; max-width: 72ch;
  font-family: var(--font-sans-new); font-size: var(--font-size-secondary); line-height: 1.5;
  font-style: italic; color: var(--ink-2);
  border-left: 2px solid var(--line-strong); padding-left: 12px;
}

/* Body row */
.sr-body { flex: 1; display: flex; min-height: 0; }

/* Left rail */
.sr-rail {
  flex: 0 0 292px; overflow-y: auto; border-right: 1px solid var(--line);
  padding: 22px 18px 60px; background: var(--card);
}
.sr-rail__label {
  margin: 0 0 10px; font-family: var(--font-sans-new); font-size: var(--font-size-secondary);
  font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2);
}
.sr-rail__issues { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.sr-rail__row, .sr-subrow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; border-radius: 6px; padding: 7px 8px;
  font-family: var(--font-serif); font-size: var(--font-size-body); color: var(--ink); line-height: 1.3;
}
.sr-rail__row:hover, .sr-subrow:hover { background: var(--paper-2); }
.sr-rail__row:focus-visible, .sr-subrow:focus-visible, .sr-group__head:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 1px;
}
.sr-rail__none { margin: 0 0 18px; font-family: var(--font-sans-new); font-size: var(--font-size-secondary); color: var(--ink-2); }
.sr-rail__divider { border: none; border-top: 1px solid var(--line); margin: 6px 0 16px; }

/* Status swatch (issues) + dot (sub-rows) — colour by derived status. */
.sr-swatch { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; background: var(--unaddressed); }
.sr-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--unaddressed); }
.sr-swatch--dispositive, .sr-dot--dispositive { background: var(--dispositive); }
.sr-swatch--disputed,    .sr-dot--disputed    { background: var(--disputed); }
.sr-swatch--agreed,      .sr-dot--agreed       { background: var(--agreed); }
.sr-swatch--unaddressed, .sr-dot--unaddressed  { background: var(--unaddressed); }

/* Area groups (collapsed by default; multiple may open). */
.sr-group { margin-bottom: 2px; }
.sr-group__head {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; border-radius: 6px; padding: 7px 8px;
  font-family: var(--font-sans-new); font-size: var(--font-size-secondary); color: var(--ink);
}
.sr-group__head:hover { background: var(--paper-2); }
.sr-group__caret { flex: 0 0 auto; width: 10px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }
.sr-group__name { flex: 1; }
.sr-group__count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.sr-group__items { display: none; padding: 2px 0 6px 18px; }
.sr-group.is-open .sr-group__items { display: flex; flex-direction: column; gap: 2px; }

/* Reasoning column */
.sr-main { flex: 1; overflow-y: auto; }
.sr-col { max-width: 760px; margin: 0 auto; padding: 26px 40px 80px; }
.sr-eyebrow-gap { margin-top: 40px; }
.sr-ref-note {
  margin: 6px 0 14px; font-family: var(--font-serif); font-size: var(--font-size-secondary);
  color: var(--ink-2); max-width: 60ch;
}
.sr-ref-area {
  margin: 16px 0 6px; font-family: var(--font-sans-new); font-size: var(--font-size-secondary);
  font-weight: var(--font-weight-medium); color: var(--ink-2);
}
.sr-ref-row {
  display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line);
  font-family: var(--font-serif); font-size: var(--font-size-body); color: var(--ink);
}
.sr-ref-row__num { flex: 0 0 auto; min-width: 1.6em; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.sr-ref-row__name { flex: 1; }
.sr-ref-row__tag {
  flex: 0 0 auto; font-family: var(--font-sans-new); font-size: 12px; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* Responsive: below 880px hide the rail, reasoning goes full-width.
   TODO (step 2): a "Jump to a factor" disclosure to replace the rail on narrow screens. */
@media (max-width: 880px) {
  .sr-rail { display: none; }
  .sr-col { padding: 22px 20px 64px; }
  .sr-header { padding: 16px 20px; }
}