/* Survey Review Workbench — field-diff review UI.
   Reviewers judge, field by field, whether a proposed value should replace a
   current one. The visual language leads with the value diff, then confidence,
   then provenance, then the decision — plain language on the primary surface,
   audit/trace detail tucked behind one collapsed <details> per field.

   Token contract: every color/radius/shadow/font below resolves through --k-*
   custom properties so a host app can re-skin the whole surface by overriding
   tokens alone (see the "Theming" section of docs/consumer-integration-guide.md).
   The aliases declared here (--k-muted, --k-raised, --k-sunken, --k-brand-ink,
   --k-brand-wash, --k-positive-wash, --k-caution-wash, --k-negative-wash,
   --k-radius) derive from Survey's existing --k-text-muted / --k-panel-raised /
   --k-brand-contrast / --k-*-soft / --k-radius-md tokens so overriding the base
   token a host already knows about re-skins these too — a host can also override
   any alias directly for finer control. */

:root {
  color-scheme: dark;

  --k-muted: var(--k-text-muted);
  --k-faint: var(--k-text-faint);
  --k-raised: var(--k-panel-raised);
  --k-sunken: color-mix(in srgb, var(--k-bg) 55%, var(--k-panel) 45%);
  --k-brand-ink: var(--k-brand-contrast);
  --k-brand-wash: color-mix(in srgb, var(--k-brand) 14%, transparent);
  --k-positive-wash: var(--k-positive-soft, color-mix(in srgb, var(--k-positive) 14%, transparent));
  --k-caution-wash: var(--k-caution-soft, color-mix(in srgb, var(--k-caution) 14%, transparent));
  --k-negative-wash: var(--k-negative-soft, color-mix(in srgb, var(--k-negative) 14%, transparent));
  --k-radius: var(--k-radius-md);

  font-family: var(--k-font-ui);
  background: var(--k-bg);
  color: var(--k-text);
}

/* Read-only evidence pane attached to the existing ReviewItem queue. */
.extraction-inspector { container-type: inline-size; margin-top: 1rem; padding: 1rem; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-panel); color: var(--k-text); }
.inspector-heading, .inspector-layout { display: grid; grid-template-columns: minmax(15rem, .7fr) minmax(0, 1.3fr); gap: 1rem; }
.inspector-heading h2 { margin: 0; }
.inspector-posture { display: flex; flex-direction: column; padding: .75rem; border-radius: var(--k-radius-sm); background: var(--k-positive-wash); }
/* Caution first: an artifact failure on the same source must win the tie and stay negative. */
.inspector-posture.extraction-incomplete { background: var(--k-caution-wash); color: var(--k-caution); border: 2px solid currentColor; }
.inspector-posture.digest-mismatch, .inspector-posture.artifact-unavailable, .inspector-posture.excerpt-mismatch, .inspector-posture.proposals-excluded { background: var(--k-negative-wash); color: var(--k-negative); border: 2px solid currentColor; }
.inspector-posture.extraction-failed { background: var(--k-negative-wash); color: var(--k-negative); border: 2px solid currentColor; }
.inspector-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.inspector-filters label { display: grid; gap: .25rem; font-size: .75rem; color: var(--k-text-muted); }
.inspector-filters select, .inspector-filters input { color: var(--k-text); background: var(--k-sunken); border: 1px solid var(--k-line); padding: .4rem; }
.inspector-pager, .queue-controls, .queue-pager { display: flex; align-items: end; flex-wrap: wrap; gap: .6rem; }
.inspector-pager { justify-content: flex-end; margin: 0 0 .75rem; }
.inspector-pager button, .queue-pager button { color: var(--k-text); background: var(--k-raised); border: 1px solid var(--k-line-strong); border-radius: var(--k-radius-sm); padding: .45rem .7rem; }
.inspector-pager button:disabled, .queue-pager button:disabled { opacity: .45; }
.inspector-candidates { margin: 0; padding-left: 1.5rem; }
.inspector-candidate { width: 100%; display: grid; gap: .2rem; text-align: left; padding: .65rem; color: var(--k-text); background: transparent; border: 1px solid var(--k-line); }
.inspector-source pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 1rem; background: var(--k-sunken); border: 1px solid var(--k-line); min-height: 8rem; line-height: 2.2; }
.inspector-source mark { background: var(--k-brand-wash); color: var(--k-text); outline: 1px solid var(--k-brand); }
.inspector-candidate:focus { outline: 3px solid var(--k-active); outline-offset: 2px; }
/* An inert link target, one per candidate in the model, so a host's
   `href="#<highlightElementId>"` always resolves. It is not a control and must
   not behave like one: no size, no tab stop, nothing painted. */
.highlight-anchor {
  display: inline;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The highlight IS the return control — the only part of this surface a reader
   can see, so it is the thing to aim at. Full phrase width, already visibly
   marked, one tab stop per painted highlight. */
.source-highlight {
  cursor: pointer;
  border-radius: 2px;
  /* Vertical padding on an inline box grows the hit area without moving the
     line box, and the prepared text's line-height below leaves room for it, so
     the target reaches ~24px tall without lines overlapping each other. The
     phrase itself supplies the width. */
  padding: 5px 3px;
  margin: 0 -3px;
}

.source-highlight:focus-visible {
  outline: 3px solid var(--k-active);
  outline-offset: 1px;
}
.source-unavailable { color: var(--k-negative); font-weight: 700; }
@container (max-width: 720px) { .inspector-heading, .inspector-layout { grid-template-columns: 1fr !important; } }

.queue-controls { padding: 1rem; border-bottom: 1px solid var(--k-line); background: var(--k-panel); }
.queue-controls label { display: grid; gap: .25rem; color: var(--k-muted); font-size: .75rem; }
.queue-controls input, .queue-controls select { min-height: 2.25rem; color: var(--k-text); background: var(--k-sunken); border: 1px solid var(--k-line); border-radius: var(--k-radius-sm); padding: .4rem .55rem; }
.queue-result-count { margin-left: auto; color: var(--k-muted); }
.queue-empty { padding: 2rem; color: var(--k-muted); text-align: center; }

/* Light-mode token values come from @kontourai/ui (tokens.css plus each
   theme's light block, which since 1.17 re-sets every mode-dependent value
   its dark preset sets). Only color-scheme is re-asserted here: the :root rule
   above sets it to dark and would otherwise win the source-order tie with
   tokens.css's [data-theme="light"], leaving native controls dark. */
[data-theme="light"] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
}

button,
textarea,
input {
  font: inherit;
  color: inherit;
}

h1, h2, h3, p {
  margin: 0;
}

/* ---------- demo page chrome (host page only, not part of the component) ---------- */

.demo-toolbar {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--k-line-strong);
  border-radius: 999px;
  background: var(--k-panel);
  color: var(--k-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.theme-toggle:hover {
  border-color: var(--k-brand);
  color: var(--k-brand);
}

.theme-toggle-icon {
  font-size: 14px;
  line-height: 1;
}

/* ---------- outer containers ---------- */

.workbench {
  position: relative;
  container-type: inline-size;
  min-height: 100vh;
  padding: 28px 20px 80px;
}

.workbench-shell {
  max-width: 940px;
  margin: 0 auto;
}

/* ---------- review panel + header ---------- */

.review {
  background: var(--k-panel);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow);
  overflow: hidden;
}

.rhead {
  padding: 20px 22px;
  border-bottom: 1px solid var(--k-line);
  display: grid;
  gap: 14px;
}

.rhead .top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.rhead .eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-faint);
}

.rhead h1 {
  margin: 2px 0 0;
  font-size: 21px;
  line-height: 1.2;
  text-wrap: balance;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.rhead .subj {
  flex: 1;
  min-width: 240px;
}

.meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--k-muted);
}

.meta b {
  color: var(--k-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* progress + apply */

.progress {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bar {
  flex: 1;
  min-width: 80px;
  height: 7px;
  border-radius: 999px;
  background: var(--k-sunken);
  overflow: hidden;
  border: 1px solid var(--k-line);
}

.bar > i {
  display: block;
  height: 100%;
  background: var(--k-brand);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* `.progress` is a generic class name, and a host page may well have its own —
   @kontourai/ui ships an unscoped `.progress span { background: linear-gradient(…) }`
   that painted a gradient straight over this element's text in an embed. The
   embed cannot claim the name, but it must not leave its own descendants
   unstyled and open to a host rule; state the presentation explicitly. */
.progress .ptext {
  display: inline;
  height: auto;
  background: none;
}

.ptext {
  font-size: 13px;
  color: var(--k-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ptext b {
  color: var(--k-text);
}

.apply {
  border: 0;
  background: var(--k-brand);
  color: var(--k-brand-ink);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.08s, filter 0.15s;
}

.apply:hover {
  filter: brightness(1.06);
}

.apply:active {
  transform: translateY(1px);
}

.apply:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

/* ---------- field cards ---------- */

.fields {
  display: flex;
  flex-direction: column;
}

.field {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 0;
  border-top: 1px solid var(--k-line);
}

.field:first-child {
  border-top: 0;
}

.stripe {
  background: var(--k-line);
  transition: background 0.25s;
}

.field[data-state="accepted"] .stripe { background: var(--k-positive); }
.field[data-state="kept"] .stripe { background: var(--k-faint); }
.field[data-state="rejected"] .stripe { background: var(--k-negative); }
.field[data-state="could-not-confirm"] .stripe { background: var(--k-caution); }
.field[data-state="review"] .stripe { background: var(--k-brand); }

.fbody {
  padding: 18px 22px 20px;
  display: grid;
  gap: 13px;
  min-width: 0;
}

.frow1 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fname {
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.fkind {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--k-faint);
  border: 1px solid var(--k-line-strong);
  padding: 1px 7px;
  border-radius: 999px;
}

.chip {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.chip.review { color: var(--k-brand); background: var(--k-brand-wash); }
.chip.accepted { color: var(--k-positive); background: var(--k-positive-wash); }
.chip.kept { color: var(--k-muted); background: var(--k-sunken); }
.chip.rejected { color: var(--k-negative); background: var(--k-negative-wash); }
.chip.could-not-confirm { color: var(--k-caution); background: var(--k-caution-wash); }

/* Field-state panel: one row per field, content and lifecycle derived from
   the records, never stored labels. A field that was not read is listed. */
.field-states { padding: var(--k-space-3, 12px) 1rem; border-bottom: 1px solid var(--k-line); background: var(--k-panel); }
.field-states h2 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--k-text); }
.field-states ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.field-states-lead { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--k-caution); }
.field-state-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--k-line); }
.field-state-row:first-child { border-top: 0; }
.field-state-name { font-family: var(--k-font-mono, ui-monospace, monospace); font-size: 12px; color: var(--k-text); overflow-wrap: anywhere; }
.field-state-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.field-state-note { grid-column: 1 / -1; font-size: 12px; color: var(--k-muted); }
.field-state-note.signal { color: var(--k-caution); }
.chip.state-content.value { color: var(--k-positive); background: var(--k-positive-wash); }
.chip.state-content.conflicting,
.chip.state-content.excluded,
.chip.state-content.not_covered { color: var(--k-caution); background: var(--k-caution-wash); }
.chip.state-content.unsupported { color: var(--k-negative); background: var(--k-negative-wash); }
.chip.state-content.none,
.chip.state-lifecycle.superseded { color: var(--k-muted); background: var(--k-sunken); }
.chip.state-lifecycle.pending { color: var(--k-brand); background: var(--k-brand-wash); }
.chip.state-lifecycle.accepted { color: var(--k-positive); background: var(--k-positive-wash); }
.chip.state-lifecycle.rejected { color: var(--k-negative); background: var(--k-negative-wash); }
.chip.state-lifecycle.could_not_confirm { color: var(--k-caution); background: var(--k-caution-wash); }

.frow1 .push {
  margin-left: auto;
}

/* the diff */

.diff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}

/* narrow-width collapse for .diff lives in the responsive section at the foot. */

.val {
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-sm);
  padding: 10px 12px;
  background: var(--k-raised);
  min-width: 0;
}

.val .vlbl {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k-faint);
  margin-bottom: 4px;
}

.val .vtext {
  font-size: 14.5px;
  word-break: break-word;
  white-space: pre-wrap;
}

.val.current {
  background: var(--k-sunken);
}

.val.current .vtext {
  color: var(--k-muted);
}

.val.proposed {
  border-color: color-mix(in srgb, var(--k-brand) 45%, var(--k-line));
}

.val.empty .vtext {
  color: var(--k-faint);
  font-style: italic;
}

.arrow {
  align-self: center;
  color: var(--k-faint);
}

.editrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.editrow input,
.editrow select {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--k-text);
  background: var(--k-panel);
  border: 1px solid var(--k-line-strong);
  border-radius: 6px;
  padding: 6px 9px;
}

.editrow input:focus-visible,
.editrow select:focus-visible {
  outline: 2px solid var(--k-brand);
  outline-offset: 1px;
  border-color: var(--k-brand);
}

.editrow .ehint {
  font-size: 11.5px;
  color: var(--k-faint);
  white-space: nowrap;
}

/* Validation message for a typed proposed-value edit (hidden until the mount
   handler blocks a "Use proposed" on an out-of-shape value). */
.verr {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--k-negative);
}

.verr[hidden] {
  display: none;
}

/* Why a decision was refused, next to the button that refused it. The input
   that satisfies the precondition can be inside the collapsed audit accordion,
   so the message cannot live only with the input (kontourai/survey#208). */
.derr {
  display: block;
  margin-top: 6px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--k-negative);
}

.derr[hidden] {
  display: none;
}

/* confidence + provenance */

.prov {
  display: grid;
  gap: 9px;
  padding: 11px 13px;
  border-radius: var(--k-radius-sm);
  background: var(--k-sunken);
  border: 1px solid var(--k-line);
}

.conf {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--k-muted);
  flex-wrap: wrap;
}

.conf .meter {
  width: 84px;
  height: 6px;
  border-radius: 999px;
  background: var(--k-line-strong);
  overflow: hidden;
}

.conf .meter > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--k-positive);
}

.conf .meter.mid > i {
  background: var(--k-caution);
}

.conf .pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--k-text);
  font-family: var(--k-font-mono);
  font-size: 12px;
}

.excerpt {
  font-size: 13px;
  color: var(--k-text);
}

.excerpt q {
  color: var(--k-text);
}

.excerpt q::before { content: "\201C"; }
.excerpt q::after { content: "\201D"; }

.excerpt .from {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--k-muted);
  flex-wrap: wrap;
}

.excerpt .from a {
  color: var(--k-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.noprov {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--k-caution);
  flex-wrap: wrap;
}

.noprov svg {
  flex: none;
}

.noprov .tag {
  background: var(--k-caution-wash);
  color: var(--k-caution);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
}

/* A queue that came from an extraction import but was not checked against
   it (unverified), or that does not match it (diverges, shown instead of the
   queue). */
.queue-attestation {
  display: flex;
  align-items: flex-start;
  gap: var(--k-space-2);
  margin: 0 0 var(--k-space-3);
  padding: var(--k-space-2) var(--k-space-3);
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--k-caution);
  background: var(--k-caution-wash);
}

.queue-attestation svg {
  flex: none;
  margin-top: 2px;
}

.queue-attestation.diverges {
  color: var(--k-negative);
  background: var(--k-negative-wash);
}

/* A score-blind session: an informational note, not a warning. */
.queue-attestation.score-blind {
  color: var(--k-active);
  background: var(--k-active-soft);
}

/* Conflicting proposed values: each value is listed with its own choice
   control until the field is decided, then marked chosen or not chosen. */
.conflict-values ul {
  list-style: none;
  margin: var(--k-space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--k-space-2);
}

.conflict-values li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-3);
  flex-wrap: wrap;
  padding: var(--k-space-2) var(--k-space-3);
  border: 1px solid var(--k-line);
  border-radius: 9px;
}

.conflict-values li[data-chosen="true"] {
  border-color: var(--k-positive);
  background: var(--k-positive-wash);
}

.conflict-values .conflict-text {
  display: inline-flex;
  align-items: baseline;
  gap: var(--k-space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.conflict-values .vtext {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.conflict-values q {
  color: var(--k-muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.conflict-values .btn.choose {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.choice-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.choice-tag.chosen {
  color: var(--k-positive);
  background: var(--k-positive-wash);
}

.choice-tag.not-chosen {
  color: var(--k-muted);
  background: var(--k-sunken);
}

.excerpt-verification,
.support-verification {
  margin: 0;
  font-size: 12px;
  color: var(--k-muted);
}

/* decisions */

/* The decision row is the point of the card, so it sits on its own line,
   right-aligned and prominent. The quiet calibration toggle is pushed to the
   far left so the two primary actions read as the clear call to action. */
.decide {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2px;
}

.btn {
  border: 1px solid var(--k-line-strong);
  background: var(--k-raised);
  color: var(--k-text);
  font-size: 14px;
  font-weight: 600;
  padding: 0 18px;
  min-height: 42px;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.12s, border-color 0.12s, color 0.12s, filter 0.12s;
}

.btn:hover {
  background: var(--k-sunken);
  border-color: var(--k-line-strong);
}

.btn:focus-visible {
  outline: 2px solid var(--k-brand);
  outline-offset: 2px;
}

/* Use proposed — the filled positive primary, the loudest thing on the card. */
.btn.use {
  background: var(--k-positive);
  border-color: var(--k-positive);
  color: #ffffff;
}

.btn.use:hover {
  background: var(--k-positive);
  border-color: var(--k-positive);
  color: #ffffff;
  filter: brightness(1.07);
}

/* Keep current — a strong neutral secondary; still prominent, clearly not the accept. */
.btn.keep {
  border-color: var(--k-line-strong);
  background: var(--k-panel-raised, var(--k-raised));
}

.btn.unconfirmed {
  border-color: var(--k-caution);
  color: var(--k-caution);
  background: var(--k-caution-wash);
}

/* "Suggestion was wrong" — optional quiet calibration toggle on Keep current.
   Ticking it turns a keep-current decision into the reject signal. Not a third action. */
.wrong {
  order: -1;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--k-faint);
  cursor: pointer;
  user-select: none;
  padding: 8px 4px;
  min-height: 40px;
}

.wrong:hover {
  color: var(--k-negative);
}

.wrong input {
  width: 15px;
  height: 15px;
  accent-color: var(--k-negative);
  cursor: pointer;
  margin: 0;
}

.decided {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 13px;
  color: var(--k-muted);
}

.field[data-decided="1"] .decide {
  display: none;
}

.field[data-decided="1"] .decided {
  display: flex;
}

.undo {
  border: 0;
  background: none;
  color: var(--k-brand);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

/* footer tally */

.foot {
  padding: 16px 22px;
  border-top: 1px solid var(--k-line);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--k-raised);
}

.tally {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--k-muted);
  flex-wrap: wrap;
}

.tally b {
  color: var(--k-text);
  font-variant-numeric: tabular-nums;
}

/* ---------- audit details: the single collapsed power-user surface per field ---------- */

.audit-details {
  border-top: 1px dashed var(--k-line);
  padding-top: 4px;
}

.audit-details summary {
  cursor: pointer;
  padding: 6px 0;
  color: var(--k-faint);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.audit-details summary:hover {
  color: var(--k-muted);
}

.audit-details[open] summary {
  color: var(--k-brand);
}

.audit-body {
  display: grid;
  gap: 14px;
  padding: 4px 0 6px;
}

.note-field {
  display: grid;
  gap: 6px;
}

.field-label {
  color: var(--k-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field-value {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
  color: var(--k-text);
  font-size: 12.5px;
}

.note-field textarea {
  display: block;
  width: 100%;
  min-height: 60px;
  resize: vertical;
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-radius-sm);
  padding: 8px 10px;
  color: var(--k-text);
  background: var(--k-sunken);
  font-family: var(--k-font-mono);
  font-size: 12px;
  line-height: 1.5;
}

.note-field textarea:focus-visible {
  outline: none;
  border-color: var(--k-brand);
  box-shadow: 0 0 0 3px var(--k-brand-wash);
}

.field-stack {
  display: grid;
  gap: 9px;
}

.field-stack.compact {
  gap: 6px;
}

.kv {
  min-width: 0;
}

.kv .field-value {
  margin-top: 3px;
  font-family: var(--k-font-mono);
  font-size: 11.5px;
  color: var(--k-muted);
}

/* Excerpt / rationale 3-line clamp with inline "more / less" expander. */
.kv.excerpt .field-value,
.kv.rationale-clamp .field-value {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-family: var(--k-font-ui);
  font-style: italic;
  color: var(--k-muted);
}

.excerpt-clamp.is-expanded .field-value,
.rationale-clamp.is-expanded .field-value {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.clamp-toggle {
  display: inline;
  margin-left: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--k-brand);
  cursor: pointer;
  font-family: var(--k-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 2px;
  vertical-align: baseline;
}

.clamp-toggle:hover {
  color: var(--k-text);
}

/* Candidate history expander: >3 unselected candidates hide behind "view all (N)". */
.history-overflow {
  display: none;
}

.history-expander.is-expanded .history-overflow {
  display: contents;
}

.history-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 10px;
  border: 1px solid var(--k-line-strong);
  border-radius: 999px;
  background: var(--k-brand-wash);
  color: var(--k-brand);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.history-expand-btn:hover {
  border-color: var(--k-brand);
}

.history-expander.is-expanded .history-expand-btn .expand-label {
  display: none;
}

.history-expander.is-expanded .history-expand-btn .collapse-label {
  display: inline;
}

.history-expand-btn .collapse-label {
  display: none;
}

.preview-section-grid {
  display: grid;
  gap: 10px;
}

.preview-section {
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-sm);
  padding: 10px 12px;
  background: var(--k-sunken);
}

.preview-section h3 {
  margin-bottom: 6px;
  color: var(--k-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reference-details {
  margin-top: 8px;
}

.reference-details summary {
  cursor: pointer;
  list-style: none;
  color: var(--k-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reference-details summary::-webkit-details-marker {
  display: none;
}

.reference-details summary::before {
  content: "▸ ";
}

.reference-details[open] summary::before {
  content: "▾ ";
}

.reference-details .field-stack {
  margin-top: 8px;
}

.preview-disclaimer {
  font-size: 11.5px;
  color: var(--k-faint);
  line-height: 1.5;
}

.preview-disclaimer-footer {
  border-top: 1px solid var(--k-line);
  padding-top: 10px;
}

/* ReviewDecision payload — deliberately the deepest, last thing in the audit details. */
.reference-details pre,
pre[data-testid="decision-payload"] {
  margin: 8px 0 0;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-sm);
  background: var(--k-bg);
  color: var(--k-muted);
  font-family: var(--k-font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.caption {
  text-align: center;
  margin-top: 24px;
  font-size: 12.5px;
  color: var(--k-faint);
}

/* ---------- responsive ----------
   The workbench sets `container-type: inline-size`, so these breakpoints fire on
   the component's own width — correct whether it renders full-bleed on a phone or
   in a narrow column on a wide desktop. Mobile is the primary context, so tap
   targets stay comfortable and nothing forces a horizontal scroll. */

@container (max-width: 620px) {
  .workbench {
    padding: 16px 12px 56px;
  }

  .fbody {
    padding: 16px 15px 18px;
  }

  .rhead {
    padding: 16px;
  }

  .foot {
    padding: 14px 15px;
  }

  .rhead h1 {
    font-size: 19px;
  }

  /* current → proposed stack vertically; the arrow rotates to point down. */
  .diff {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .diff .arrow {
    transform: rotate(90deg);
    justify-self: start;
    margin: 1px 0;
  }

  /* Apply spans the header row as an easy thumb target. */
  .apply {
    flex: 1;
    min-height: 44px;
  }
}

@container (max-width: 480px) {
  /* The two primary actions go full-width and tall so they're the obvious,
     thumb-friendly call to action; the calibration toggle sits below them. */
  .decide {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .btn {
    width: 100%;
    min-height: 46px;
    font-size: 15px;
  }

  .wrong {
    order: 0;
    margin-right: 0;
    justify-content: flex-start;
    min-height: 44px;
  }

  .frow1 {
    gap: 8px;
  }
}

/* The diff-collapse must also hold in host contexts without a query container
   (e.g. an embed that doesn't establish `container-type`): fall back to viewport. */
@media (max-width: 620px) {
  .field-state-row { grid-template-columns: minmax(0, 1fr); }
  .field-state-chips { justify-content: flex-start; }
  .diff {
    grid-template-columns: 1fr;
  }

  .diff .arrow {
    transform: rotate(90deg);
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

.review-context {
  margin: var(--k-space-4);
  padding: var(--k-space-4);
  border: var(--k-border-thin) solid var(--k-line-strong);
  border-radius: var(--k-radius-sm);
  background: var(--k-panel-raised);
  color: var(--k-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}