/* ============================================================================
   Screening module — design system chrome
   ----------------------------------------------------------------------------
   Module-shared CSS for screening pages reskinned to the new design system.
   Composes from tokens in new-design-system/design-system/tokens/design-tokens.css
   (served via Propshaft, linked in the application layout).
   ----------------------------------------------------------------------------
   Atoms inlined here pending promotion into new-design-system/design-system/
   components/ proper:
     - .shell, .toplinks, .subnav, .pill            (shared-page-shell chrome)
     - .head-prefix, .head-name, .head-meta         (page-head, Compact Detail)
     - .section, .section-heading                   (typed section headings)
     - .prose, .bullets                             (long-form content)
     - .actions-table                               (Help-page-specific tabular
                                                      action-availability matrix)
   ============================================================================ */

/* --------- Module-scoped reset / base --------- */
.screening-app, .screening-app * { box-sizing: border-box; }
.screening-app { font-family: var(--font-sans); color: var(--fg); background: var(--paper); }
.screening-app a { color: inherit; text-decoration: none; }

/* --------- Shell + chrome --------- */
/* Container-relative, not viewport-relative: self-caps at 1280 + centers when the
   page owns the full window (standalone), and fills the frame's content column when
   wrapped by the global-nav app frame (which already provides the 1280 cap + nav
   offset). Sizing off 100vw here ignored the nav and overflowed the offset column,
   clipping the right edge of wide content. */
/* Outer page padding lives at the app frame's .viewport > .shell rule
   (24px / --s-6). Do not re-set padding-inline here. */
.screening-app .shell { width: 100%; max-width: 1280px; margin: 0 auto; }

.screening-app .toplinks {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 10px;
  font-size: 12.5px; color: var(--fg-muted);
}
.screening-app .toplinks .crumbs { display: flex; align-items: center; gap: 6px; }
.screening-app .toplinks .crumbs a { color: var(--fg-muted); }
.screening-app .toplinks .crumbs a:hover { color: var(--fg); text-decoration: underline; }
.screening-app .toplinks .crumb-sep { color: var(--fg-faint); }
.screening-app .toplinks .crumb-cur { color: var(--fg); font-weight: 500; }
.screening-app .home-link { color: var(--color-blue-700); font-size: 12.5px; }
.screening-app .home-link:hover { text-decoration: underline; }

.screening-app .subnav { display: flex; gap: 6px; padding: 4px 0 18px; }
.screening-app .pill {
  padding: 5px 11px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font: inherit; font-size: 12.5px; color: var(--fg-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.screening-app .pill:hover { color: var(--fg); }
.screening-app .pill-arrow { font-family: var(--font-mono); font-size: 9px; color: var(--fg-faint); }
.screening-app .pill--active {
  background: var(--color-slate-900); color: #fff; border-color: var(--color-slate-900);
}
.screening-app .pill--active .pill-arrow { color: rgba(255, 255, 255, 0.6); }

/* --------- Compact Detail reading column --------- */
.screening-app .reader { max-width: 880px; margin: 0 auto; padding: 0 28px 64px; }

/* --------- Page head (Compact Detail variant) --------- */
.screening-app .head { padding: 22px 0 18px; border-bottom: 1px solid var(--border); }
.screening-app .head-prefix {
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-muted); font-weight: 700;
}
.screening-app .head-name {
  font-size: 26px; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.15; color: var(--fg);
  margin: 4px 0 0;
}
.screening-app .head-meta {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--fg-muted); margin-top: 8px;
}

/* --------- Sections + headings --------- */
.screening-app .section { margin-top: 28px; }
.screening-app .section-heading {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg); font-weight: 700; margin: 0 0 10px;
  border-bottom: 2px solid var(--fg); padding-bottom: 5px;
}

/* --------- Prose + bullets (long-form content) --------- */
.screening-app .prose p {
  margin: 0 0 12px;
  font-size: 14px; line-height: 1.65; color: var(--fg);
}
.screening-app .prose p:last-child { margin-bottom: 0; }
.screening-app .prose strong { font-weight: 600; }
.screening-app .prose em { font-style: italic; color: var(--fg); }
.screening-app .prose code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--surface-2); padding: 1px 5px;
  border-radius: 3px; border: 1px solid var(--border);
}
.screening-app .prose a { color: var(--color-blue-700); }
.screening-app .prose a:hover { text-decoration: underline; }

.screening-app ul.bullets {
  margin: 0 0 12px;
  padding-left: 22px;
  list-style: disc;
  font-size: 14px; line-height: 1.65; color: var(--fg);
}
.screening-app ul.bullets li { margin-bottom: 6px; }
.screening-app ul.bullets li:last-child { margin-bottom: 0; }
.screening-app ul.bullets li strong { font-weight: 600; }
.screening-app ul.bullets li em { font-style: italic; }
.screening-app ul.bullets li code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--surface-2); padding: 1px 5px;
  border-radius: 3px; border: 1px solid var(--border);
}

.screening-app .lead {
  font-size: 15.5px; line-height: 1.6; color: var(--fg);
  margin: 16px 0 0;
}

/* ============================================================================
   Index archetype chrome
   ----------------------------------------------------------------------------
   Atoms inlined here pending promotion:
     - .page-head, .page-title-row, .page-title         (Index archetype head)
     - .btn-primary                                     (button, primary slate-900)
     - .tbl-wrap, table.tbl, table.tbl th/td            (table atom)
     - .badge--active / --paused / --awaiting / --closed (badge-chip + status colors)
     - .landmark                                        (Index archetype landmark row)
   ============================================================================ */

.screening-app .page-head {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.screening-app .page-title-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
}
.screening-app .page-title {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0;
}

.screening-app .btn-primary {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 13px;
  background: var(--color-slate-900); color: #fff;
  border: 1px solid var(--color-slate-900); border-radius: var(--r-input);
  font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--t-fast);
}
.screening-app .btn-primary:hover { background: var(--color-slate-800); }

.screening-app .tbl-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  margin-top: 10px;
}
.screening-app table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.screening-app table.tbl th {
  text-align: left; padding: 8px 12px;
  font-weight: 600; color: var(--fg-muted);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  font-family: var(--font-mono);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.screening-app table.tbl th.num { text-align: right; }
.screening-app table.tbl td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  color: var(--fg); vertical-align: top;
}
.screening-app table.tbl tr.data-row { cursor: pointer; }
.screening-app table.tbl tr.data-row:hover td { background: var(--color-slate-50); }

/* Real-link variant for the run-id cell on the Runs index — the
   anchor carries native link semantics (keyboard focus, right-click
   open in new tab, screen-reader link role) and visually matches
   the surrounding mono cell text. */
.screening-app table.tbl .run-row-link {
  color: inherit;
  text-decoration: none;
  font: inherit;
}
.screening-app table.tbl .run-row-link:hover { text-decoration: underline; }
.screening-app table.tbl .run-row-link:focus-visible {
  outline: 2px solid var(--color-blue-500, #3b82f6);
  outline-offset: 1px;
  border-radius: var(--r-input);
}
.screening-app table.tbl tr:last-child td { border-bottom: none; }

.screening-app .posting-title a { color: var(--fg); text-decoration: none; }
.screening-app .posting-title a:hover { text-decoration: underline; color: var(--color-blue-700); }
.screening-app .posting-added { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); margin-top: 3px; }
.screening-app .posting-label { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.screening-app .col-num { font-family: var(--font-mono); text-align: right; }
.screening-app .col-mono { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.screening-app .last-run { display: inline-flex; align-items: center; gap: 8px; }
.screening-app .last-run-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); }

/* --- Badges (status pills) --- */
.screening-app .badge {
  display: inline-flex; align-items: center; padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 500;
  font-family: var(--font-mono);
  background: var(--surface-2); color: var(--fg-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.screening-app .badge--active {
  background: var(--color-success-bg); color: var(--color-success-text);
  border-color: var(--color-success-border);
}
.screening-app .badge--paused {
  background: var(--surface-2); color: var(--fg-muted);
  border-color: var(--border-strong);
}
.screening-app .badge--awaiting,
.screening-app .badge--awaiting_review {
  background: var(--color-warning-bg); color: var(--color-warning-text);
  border-color: #fde68a;
}
.screening-app .badge--closed,
.screening-app .badge--failed,
.screening-app .badge--evaluation_error {
  background: var(--color-danger-bg); color: var(--color-danger-text);
  border-color: #fecaca;
}
.screening-app .badge--running,
.screening-app .badge--pending,
.screening-app .badge--retrying {
  background: var(--color-info-bg); color: var(--color-info-text);
  border-color: #bfdbfe;
}
.screening-app .badge--done,
.screening-app .badge--completed {
  background: var(--surface-2); color: var(--fg-muted);
  border-color: var(--border);
}

/* --- Awaiting your review (Runs index priority callouts) --- */
.screening-app .awaiting-block {
  margin-top: 10px;
}
.screening-app .awaiting-block-head {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-muted); font-weight: 600;
  padding: 6px 4px 8px;
}
.screening-app .awaiting-card {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 16px;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--r-card);
  margin-bottom: 8px;
  text-decoration: none; color: inherit;
}
.screening-app .awaiting-card:hover { border-color: var(--color-warning-text); }
.screening-app .awaiting-card-body { flex: 1; min-width: 0; }
.screening-app .awaiting-card-title {
  font-size: 14px; font-weight: 600; color: var(--color-warning-text);
}
.screening-app .awaiting-card-meta {
  font-size: 12.5px; color: var(--color-warning-text); margin-top: 3px;
}
.screening-app .awaiting-card-cta {
  display: inline-flex; align-items: center; padding: 6px 14px;
  font-size: 13px; font-weight: 600;
  background: var(--color-slate-900); color: #fff;
  border-radius: var(--r-input);
  white-space: nowrap;
}

/* --- Landmark row at index bottom --- */
.screening-app .landmark {
  background: var(--surface);
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--r-card) var(--r-card);
  padding: 9px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
}
.screening-app .landmark-left {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-faint);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* Bottom padding now provided by the app frame's .viewport > .shell rule.
   The previous module-local override is no longer needed. */

/* ============================================================================
   Rich Detail archetype chrome
   ----------------------------------------------------------------------------
   Scope: every rule below applies only inside `.detail-page` so it doesn't
   collide with Compact Detail's `.head`, etc. Atoms inlined here pending
   promotion:
     - .detail-page                       (Rich Detail container)
     - .head + .head-block + .head-r       (Rich Detail page-head)
     - .body / .work / .facts              (two-column body)
     - .panel-section, .panel-head, etc.   (panel atom — Rich Detail variant)
     - .rule-list, .rule-row, .rule-text   (two-line-row, hard/soft rules)
     - .past-runs (panel grid)
     - .awaiting-row                       (callout, "Awaiting your review" prompt)
     - .facts-section, .facts-row, etc.    (Field atom — Rich Detail facts column)
     - .overflow-btn + .dropdown-menu      (overflow + dropdown chrome)
   ============================================================================ */

.screening-app .detail-page { background: var(--paper); }

/* Page head (override the Compact Detail version when inside .detail-page) */
.screening-app .detail-page .head {
  padding: 22px 28px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 22px;
}
.screening-app .detail-page .head-block {
  flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.screening-app .detail-page .head-prefix {
  font-family: var(--font-mono);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-slate-500); font-weight: 700;
}
.screening-app .detail-page .head-name {
  font-size: 32px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--fg);
  margin: 0;
}
/* Click-to-edit title on the show page (P0.5 progressive border).
   Looks like the static .head-name at rest; hover surfaces a slate-200
   border; focus deepens to slate-400 + paper bg. Negative margins
   counter the padding so the heading visually sits in the same place
   as the static-rendered version. */
.screening-app .detail-page .head-name--editable {
  display: block; width: 100%;
  padding: 2px 6px;
  margin: -2px -6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-input);
  font-family: inherit;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.screening-app .detail-page .head-name--editable:hover {
  border-color: var(--border);
}
.screening-app .detail-page .head-name--editable:focus {
  outline: none;
  border-color: var(--color-slate-400);
  background: var(--paper);
}
.screening-app .detail-page .head-meta {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--color-slate-500); margin-top: 6px;
}
.screening-app .detail-page .head-meta a { color: var(--color-blue-700); }
.screening-app .detail-page .head-meta a:hover { text-decoration: underline; }
.screening-app .detail-page .head-r {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; position: relative;
}

.screening-app .overflow-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-input);
  color: var(--fg-muted); cursor: pointer; padding: 0;
  font-family: inherit;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.screening-app .overflow-btn:hover { background: var(--surface-2); color: var(--fg); }

/* Dropdown menu (overflow targets) */
.screening-app .dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 4px;
  z-index: 50;
}
.screening-app .dropdown-menu a,
.screening-app .dropdown-menu button {
  display: block;
  padding: 7px 10px;
  font-size: 13px; color: var(--fg);
  background: transparent; border: none; width: 100%;
  text-align: left; cursor: pointer; border-radius: 3px;
  font-family: inherit;
}
.screening-app .dropdown-menu a:hover,
.screening-app .dropdown-menu button:hover {
  background: var(--color-slate-50);
}
.screening-app .dropdown-menu .dropdown-danger,
.screening-app .dropdown-menu .dropdown-danger:hover {
  color: var(--color-danger-text);
}

/* Body: two-column grid */
.screening-app .detail-page .body {
  display: grid; grid-template-columns: 1fr 300px; gap: 0;
}
.screening-app .detail-page .work {
  padding: 18px 28px 48px; border-right: 1px solid var(--border);
  min-width: 0;
}
.screening-app .detail-page .facts {
  padding: 18px 22px 36px;
  position: sticky; top: 16px; align-self: start;
}

/* Work column — panels */
.screening-app .detail-page .panel-section { border-top: 1px solid var(--border); margin-bottom: 28px; }
.screening-app .detail-page .panel-section:first-child { border-top: none; margin-top: 0; }
.screening-app .detail-page .panel-head {
  padding: 14px 0 10px;
  display: flex; align-items: baseline; gap: 10px;
}
.screening-app .detail-page .panel-title {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--fg);
  display: flex; align-items: baseline; gap: 8px;
}
.screening-app .detail-page .panel-count {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-slate-500); font-weight: 500;
}
.screening-app .detail-page .panel-actions {
  margin-left: auto; display: flex; gap: 12px;
}
.screening-app .detail-page .panel-action {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  color: var(--color-blue-700); background: transparent; border: none;
  padding: 0; cursor: pointer; text-decoration: none;
}
.screening-app .detail-page .panel-action:hover { text-decoration: underline; }

/* Callout — "Runs awaiting your review" prompt
   (Inlined pending promotion of the bundled callout atom into the
   design system proper. Same warning-tinted block + primary CTA shape.) */
.screening-app .detail-page .awaiting-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-5); align-items: center;
  padding: var(--s-4) var(--s-5);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--r-card);
  margin-top: 4px;
}
.screening-app .detail-page .awaiting-row + .awaiting-row { margin-top: var(--s-3); }
.screening-app .detail-page .awaiting-row-id {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--color-warning-text);
}
.screening-app .detail-page .awaiting-row-meta {
  font-size: 12.5px; color: var(--color-warning-text); margin-top: 2px;
}
.screening-app .detail-page .awaiting-row-cta {
  display: inline-flex; align-items: center; padding: 6px 14px;
  font-size: 13px; font-weight: 600;
  background: var(--color-slate-900); color: #fff;
  border: 1px solid var(--color-slate-900);
  border-radius: var(--r-input);
  cursor: pointer; font-family: inherit; line-height: 1.3;
  transition: background-color var(--t-fast);
  text-decoration: none;
}
.screening-app .detail-page .awaiting-row-cta:hover { background: var(--color-slate-800); }

/* Rules — two-line row (hard rules) and single-line (soft rules)
   (Inlined pending promotion of two-line-row into row-collection.) */
.screening-app .detail-page .rule-list {
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--paper);
}
.screening-app .detail-page .rule-list:empty { display: none; }
.screening-app .detail-page .rule-row {
  display: grid; grid-template-columns: 1fr 28px;
  align-items: start; gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.screening-app .detail-page .rule-row:last-child { border-bottom: none; }
.screening-app .detail-page .rule-row-body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.screening-app .detail-page .rule-text {
  font-size: 13px; color: var(--fg); line-height: 1.5; max-width: 62ch;
}
.screening-app .detail-page .rule-reason {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--color-slate-500); margin-top: 4px;
  line-height: 1.4;
}
.screening-app .detail-page .rule-reason em { font-style: normal; color: var(--fg-muted); font-weight: 500; }
.screening-app .detail-page .row-x,
.screening-app .detail-page .rule-row-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: transparent; border: none; border-radius: 3px;
  color: var(--fg-faint); cursor: pointer; padding: 0;
  font: inherit; font-size: 15px; line-height: 1;
  margin-top: 4px;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.screening-app .detail-page .row-x:hover,
.screening-app .detail-page .rule-row-x:hover {
  background: var(--color-danger-bg); color: var(--color-danger-text);
}

/* Empty rule-list state */
.screening-app .detail-page .rules-empty {
  padding: var(--s-5);
  font-size: 12.5px; color: var(--fg-faint);
  font-style: italic;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  margin-top: 4px;
}

/* --- Inline-editable rules (P0.5 progressive border) ---
   The text input and reason select live at rest as borderless cells.
   On hover, a slate-200 border appears (1px); on focus, slate-400 +
   a paper background. The reason select uses appearance:none so its
   browser-default chrome doesn't fight the borderless treatment.

   The text field is a <textarea> rather than an <input>: rule text can
   be a paragraph (an AI prompt fragment). It auto-grows in height as
   content is typed — `field-sizing: content` handles this natively in
   recent Chrome / Safari; in older browsers the Stimulus controller
   sets `style.height = scrollHeight + 'px'` on every input event. The
   textarea is `display: block` + `resize: none` + `overflow: hidden`
   so it visually behaves like a single auto-growing cell and never
   shows its own scrollbar. `font: inherit` defeats the browser default
   that would otherwise render textareas in monospace. */
.screening-app .detail-page .rule-list--editable .rule-text-input {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-input);
  padding: 4px 6px;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  line-height: 1.5;
  resize: none;
  overflow: hidden;
  min-height: calc(1.5em + 8px); /* one line + vertical padding */
  field-sizing: content; /* modern fallback; JS auto-grow is canonical */
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.screening-app .detail-page .rule-list--editable .rule-text-input::placeholder {
  color: var(--fg-faint); font-style: italic;
}
.screening-app .detail-page .rule-list--editable .rule-text-input:hover {
  border-color: var(--border);
}
.screening-app .detail-page .rule-list--editable .rule-text-input:focus {
  outline: none;
  border-color: var(--color-slate-400);
  background: var(--paper);
}

.screening-app .detail-page .rule-list--editable .rule-reason-row {
  display: flex; align-items: center; gap: 4px;
  margin-top: 2px;
  padding-left: 6px; /* align with text input's inner edge */
}
.screening-app .detail-page .rule-list--editable .rule-reason-arrow {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--color-slate-500); line-height: 1.4;
}
.screening-app .detail-page .rule-list--editable .rule-reason-select {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-input);
  padding: 2px 22px 2px 4px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-faint) 50%),
                    linear-gradient(135deg, var(--fg-faint) 50%, transparent 50%);
  background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  font-weight: 500;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.screening-app .detail-page .rule-list--editable .rule-reason-select:hover {
  border-color: var(--border);
}
.screening-app .detail-page .rule-list--editable .rule-reason-select:focus {
  outline: none;
  border-color: var(--color-slate-400);
  background-color: var(--paper);
}

/* --- Inline-edit save callout ---
   The save affordance below the rule list is the canonical Callout atom
   (.callout / .callout--warning / .callout--prompt — see
   new-design-system/design-system/components/callout/). The local class
   `.rule-save-callout` is just a spacing hook; the visual treatment is
   100% the atom. The Stimulus controller toggles the `hidden` attribute
   on this element to show/hide it. There is intentionally no
   Enter-to-commit on the textareas — rule text can be a paragraph, so
   Enter inserts a newline like normal and the operator commits
   explicitly via the callout's Save changes button. */
.screening-app .detail-page .rule-save-callout { margin-top: 8px; }

/* Scoped .btn / .btn--primary for callout action slots.
   The canonical button atom hasn't been promoted to the design system
   yet (callout's example.html inlines these as a placeholder until then).
   Scoping under .screening-app .callout keeps this from colliding with
   the button atom when it lands — at which point this block is deleted
   and the global atom takes over.

   .btn--primary uses chained `.btn.btn--primary` (specificity 0,4,0) so
   it beats the legacy `.screening-app .detail-page .btn` rule (0,3,0)
   that's defined later in this file. Equal-specificity selectors would
   lose to source-order; the chain breaks the tie cleanly without
   depending on positional context. */
.screening-app .callout .btn {
  display: inline-flex; align-items: center; padding: 4px 10px;
  font-size: 12px; font-weight: 500; line-height: 1.4;
  border-radius: var(--r-input);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--fg);
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: background-color var(--t-fast);
}
.screening-app .callout .btn:hover { background: var(--surface-2); }
.screening-app .callout .btn.btn--primary {
  background: var(--color-slate-900); color: #fff;
  border-color: var(--color-slate-900);
  padding: 6px 14px; font-size: 13px; font-weight: 600;
}
.screening-app .callout .btn.btn--primary:hover { background: var(--color-slate-800); border-color: var(--color-slate-800); }

/* Past runs table-style list */
.screening-app .detail-page .past-runs {
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--paper);
}
.screening-app .detail-page .past-head {
  display: grid;
  grid-template-columns: 60px 1fr 130px 90px 60px 110px;
  gap: var(--s-4);
  padding: 8px var(--s-5);
  background: var(--color-slate-50);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-slate-500); font-weight: 600;
}
.screening-app .detail-page .past-row {
  display: grid;
  grid-template-columns: 60px 1fr 130px 90px 60px 110px;
  gap: var(--s-4);
  padding: 10px var(--s-5);
  align-items: center;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  text-decoration: none;
  color: inherit;
}
.screening-app .detail-page .past-row:last-child { border-bottom: none; }
.screening-app .detail-page .past-row:hover { background: var(--color-slate-50); }
.screening-app .detail-page .past-id { font-family: var(--font-mono); font-weight: 600; }
.screening-app .detail-page .past-scope { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.screening-app .detail-page .past-count { font-family: var(--font-mono); font-size: 12px; text-align: right; }
.screening-app .detail-page .past-started { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.screening-app .detail-page .past-open { color: var(--color-blue-700); }
.screening-app .detail-page .past-open:hover { text-decoration: underline; cursor: pointer; }
.screening-app .detail-page .past-empty {
  padding: var(--s-5);
  font-size: 12.5px; color: var(--fg-faint);
  font-style: italic;
}

/* Rich Detail status pill in past-runs / head — pure tint, no border */
.screening-app .detail-page .badge--rd {
  display: inline-flex; align-items: center;
  padding: 2px var(--s-3);
  font-size: 11.5px; font-weight: 500; line-height: 1.4;
  border-radius: var(--r-pill);
  white-space: nowrap;
  border: none;
}
.screening-app .detail-page .badge--rd.badge--awaiting,
.screening-app .detail-page .badge--rd.badge--awaiting_review {
  background: var(--color-warning-bg); color: var(--color-warning-text);
}
.screening-app .detail-page .badge--rd.badge--closed,
.screening-app .detail-page .badge--rd.badge--failed,
.screening-app .detail-page .badge--rd.badge--evaluation_error {
  background: var(--color-danger-bg); color: var(--color-danger-text);
}
.screening-app .detail-page .badge--rd.badge--running,
.screening-app .detail-page .badge--rd.badge--pending,
.screening-app .detail-page .badge--rd.badge--retrying {
  background: var(--color-info-bg); color: var(--color-info-text);
}
.screening-app .detail-page .badge--rd.badge--done,
.screening-app .detail-page .badge--rd.badge--completed {
  background: var(--surface-2); color: var(--fg-muted);
}

/* Facts column */
.screening-app .detail-page .facts-section {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg); font-weight: 700;
  margin: 22px 0 8px;
  border-bottom: 2px solid var(--fg); padding-bottom: 5px;
}
.screening-app .detail-page .facts-section:first-child { margin-top: 0; }
.screening-app .detail-page .facts-row {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 4px 14px; padding: 6px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.screening-app .detail-page .facts-row:last-of-type { border-bottom: none; }
.screening-app .detail-page .facts-l {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-slate-500); font-weight: 600; padding-top: 3px;
}
.screening-app .detail-page .facts-v {
  font-size: 12.5px;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.screening-app .detail-page .facts-v--mono { font-family: var(--font-mono); font-size: 12px; }
.screening-app .detail-page .facts-v--link { color: var(--color-blue-700); }
.screening-app .detail-page .facts-v--link:hover { text-decoration: underline; cursor: pointer; }
.screening-app .detail-page .facts-v--badge {
  padding: 1px 8px; background: var(--surface-2); color: var(--fg-muted);
  border-radius: var(--r-pill); font-size: 11.5px; font-weight: 500;
}
.screening-app .detail-page .facts-v--badge.active {
  background: var(--color-success-bg); color: var(--color-success-text);
}
.screening-app .detail-page .facts-v--badge.paused {
  background: var(--surface-2); color: var(--fg-muted);
}

/* ============================================================================
   Run-show specifics — atoms used only on screening_runs/show.html.erb
   ----------------------------------------------------------------------------
   All scoped under `.screening-app .detail-page` so they extend the Rich
   Detail archetype with run-show-specific atoms. Atoms inlined here pending
   promotion to the design system proper:
     - .status-badge + .status-pulse                 (status-badge-pulse atom)
     - .tally-grid + .tally-tile + .tally-count etc. (stat-tile atom)
     - .progress-body + .progress-bar + .progress-line (progress-bar atom)
     - .dcard + variants                              (multi-section-card atom)
     - .checkbox / .checkbox-spacer                   (small primitives)
     - .extlink, .forget-link, .btn                   (small atoms)
     - .callout.callout--warning                      (canonical callout atom — used for stale-claim recovery)
     - .commit-bar                                    (bulk-action-bar atom)
     - .select-controls                               (select all/none above decisions)
     - .list-pending-note                             (pending-vocabulary atom)
     - .closed-banner, .retrying-banner               (page-level inline reasons; alternative to subtitle prose per P0.8)
   ============================================================================ */

/* Status badge on page head (additional to badge-chip; .status-badge in
   .detail-page distinguishes it from the existing index-page .badge atom). */
.screening-app .detail-page .status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  border-radius: var(--r-pill); white-space: nowrap;
}
.screening-app .detail-page .status-badge--awaiting,
.screening-app .detail-page .status-badge--awaiting_review {
  background: var(--color-warning-bg); color: var(--color-warning-text);
}
.screening-app .detail-page .status-badge--running,
.screening-app .detail-page .status-badge--pending,
.screening-app .detail-page .status-badge--retrying {
  background: var(--color-info-bg); color: var(--color-info-text);
}
.screening-app .detail-page .status-badge--closed,
.screening-app .detail-page .status-badge--failed,
.screening-app .detail-page .status-badge--evaluation_error,
.screening-app .detail-page .status-badge--errors {
  background: var(--color-danger-bg); color: var(--color-danger-text);
}
.screening-app .detail-page .status-badge--clean,
.screening-app .detail-page .status-badge--done,
.screening-app .detail-page .status-badge--completed {
  background: var(--surface-2); color: var(--fg-muted);
}
.screening-app .detail-page .status-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentcolor; opacity: 0.7;
  animation: screening-pulse 1.2s ease-in-out infinite;
}
@keyframes screening-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .screening-app .detail-page .status-pulse { animation: none; opacity: 0.7; }
}

/* Progress (running state) */
.screening-app .detail-page .progress-body {
  margin-top: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.screening-app .detail-page .progress-desc {
  font-size: 12.5px; color: var(--fg-muted); line-height: 1.55;
}
.screening-app .detail-page .progress-line {
  font-family: var(--font-mono); font-size: 13px; color: var(--fg);
  display: flex; align-items: baseline; gap: 10px;
}
.screening-app .detail-page .progress-line-current { font-weight: 600; }
.screening-app .detail-page .progress-line-total { color: var(--color-slate-500); }
.screening-app .detail-page .progress-line-pct { color: var(--color-slate-500); font-size: 12px; margin-left: auto; }
.screening-app .detail-page .progress-bar {
  height: 4px; background: var(--color-slate-100); border-radius: 2px; overflow: hidden;
}
.screening-app .detail-page .progress-fill {
  height: 100%; background: var(--color-info-text);
  transition: width var(--t-fast);
}

/* Tally tiles (stat-tile grid) */
.screening-app .detail-page .tally-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-top: 4px;
}
.screening-app .detail-page .tally-tile {
  background: var(--paper);
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.screening-app .detail-page .tally-count {
  font-family: var(--font-mono); font-size: 28px; font-weight: 700;
  color: var(--fg); line-height: 1.05; letter-spacing: -0.01em;
}
.screening-app .detail-page .tally-count--zero { color: var(--color-slate-400); }
.screening-app .detail-page .tally-label {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-slate-500); font-weight: 600;
}

/* Select controls row above the decisions list */
.screening-app .detail-page .select-controls {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 0 14px;
  font-size: 12.5px;
}
.screening-app .detail-page .select-controls a {
  color: var(--color-blue-700); cursor: pointer; background: transparent;
  border: none; padding: 0; font-family: inherit; font-size: 12.5px;
  text-decoration: none;
}
.screening-app .detail-page .select-controls a:hover { text-decoration: underline; }
.screening-app .detail-page .select-controls .sep { color: var(--fg-faint); }

/* Multi-section decision card */
.screening-app .detail-page .decisions {
  display: flex; flex-direction: column; gap: var(--s-4);
}
.screening-app .detail-page .dcard {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.screening-app .detail-page .dcard-head {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--color-slate-50);
}
.screening-app .detail-page .dcard-id {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; min-width: 0;
}
.screening-app .detail-page .dcard-name { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.screening-app .detail-page .dcard-email { font-size: 12px; color: var(--fg-muted); font-family: var(--font-mono); }
.screening-app .detail-page .dcard-headend {
  display: flex; align-items: center; gap: var(--s-4);
}
.screening-app .detail-page .dcard-body { padding: var(--s-4) var(--s-5); }
.screening-app .detail-page .dcard-criterion { font-size: 12px; color: var(--fg-muted); }
.screening-app .detail-page .dcard-criterion strong { font-weight: 600; }
.screening-app .detail-page .dcard-reasoning {
  font-size: 13px; color: var(--fg); margin-top: var(--s-3); line-height: 1.55; max-width: 62ch;
}
.screening-app .detail-page .dcard-reasoning--first { margin-top: 0; }
.screening-app .detail-page .dcard-prior {
  font-size: 12px; color: var(--fg-muted); margin-top: var(--s-4); line-height: 1.5;
}
.screening-app .detail-page .dcard-prior strong { font-weight: 600; color: var(--fg-muted); }
.screening-app .detail-page .dcard-prior em { font-style: normal; color: var(--fg); }
.screening-app .detail-page .dcard-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--color-slate-50);
  gap: var(--s-4);
}
.screening-app .detail-page .dcard-foot-actions { display: flex; gap: var(--s-3); align-items: center; }
.screening-app .detail-page .dcard-foot-spacer { flex: 1; }

/* Decision-kind badges inside .dcard-headend */
.screening-app .detail-page .dcard-headend .badge {
  display: inline-flex; align-items: center;
  padding: 3px var(--s-3);
  font-size: 12px; font-weight: 500; line-height: 1.4;
  border-radius: var(--r-pill); white-space: nowrap;
  border: none;
}
.screening-app .detail-page .dcard-headend .badge--auto_disqualified {
  background: var(--color-warning-bg); color: var(--color-warning-text);
}
.screening-app .detail-page .dcard-headend .badge--strong_match_flagged {
  background: var(--color-success-bg); color: var(--color-success-text);
}
.screening-app .detail-page .dcard-headend .badge--no_action {
  background: var(--surface-2); color: var(--fg-muted);
}
.screening-app .detail-page .dcard-headend .badge--evaluation_error {
  background: var(--color-danger-bg); color: var(--color-danger-text);
}

/* Small atoms inside cards */
.screening-app .detail-page .extlink {
  color: var(--color-blue-700); text-decoration: none; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  cursor: pointer;
}
.screening-app .detail-page .extlink:hover { text-decoration: underline; }
.screening-app .detail-page .extlink-arrow { font-size: 11px; opacity: 0.8; }

.screening-app .detail-page .checkbox {
  width: 14px; height: 14px; accent-color: var(--color-slate-900); margin: 0; cursor: pointer;
}
.screening-app .detail-page .checkbox-spacer { width: 14px; height: 14px; }

.screening-app .detail-page .btn {
  display: inline-flex; align-items: center; padding: 4px 10px;
  font-size: 12px; font-weight: 500; line-height: 1.4;
  border-radius: var(--r-input); border: 1px solid var(--border);
  background: var(--paper); color: var(--fg); cursor: pointer; font-family: inherit;
  transition: background-color var(--t-fast);
}
.screening-app .detail-page .btn:hover { background: var(--surface-2); }
.screening-app .detail-page .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.screening-app .detail-page .forget-link {
  background: transparent; border: none; padding: 0; cursor: pointer;
  color: var(--fg-faint); font-size: 12px; font-family: inherit;
  text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px;
  white-space: nowrap;
}
.screening-app .detail-page .forget-link:hover { color: var(--fg-muted); }
.screening-app .detail-page .forget-link:disabled { opacity: 0.5; cursor: not-allowed; }

/* Stale-claim recovery callout inside a dcard body */
/* Stale-claim recovery uses the canonical .callout atom now (see
   slice 9 cleanup). Margin-top hook to keep it spaced from the
   committable-row's action chrome above. */
.screening-app .detail-page > .body .callout--warning { margin-top: var(--s-4); }

/* Pending-vocabulary note (held-until variant of absence-vocab) */
.screening-app .detail-page .list-pending-note {
  margin-top: 4px;
  padding: 14px 16px;
  background: var(--color-slate-50);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.55;
}

/* Bulk-action footer */
.screening-app .detail-page .commit-bar {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--color-slate-50);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  display: flex; align-items: center; gap: var(--s-5);
}
.screening-app .detail-page .commit-bar-primary {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  font-size: 13px; font-weight: 600;
  background: var(--color-slate-900); color: #fff;
  border: 1px solid var(--color-slate-900);
  border-radius: var(--r-input);
  cursor: pointer; font-family: inherit; line-height: 1.3;
  transition: background-color var(--t-fast);
}
.screening-app .detail-page .commit-bar-primary:hover { background: var(--color-slate-800); }
.screening-app .detail-page .commit-bar-primary:disabled {
  background: var(--color-slate-500); border-color: var(--color-slate-500); cursor: not-allowed;
}
.screening-app .detail-page .commit-bar-secondary {
  color: var(--color-blue-700); font-size: 12.5px;
  background: transparent; border: none; padding: 0; cursor: pointer;
  font-family: inherit;
}
.screening-app .detail-page .commit-bar-secondary:hover { text-decoration: underline; }
.screening-app .detail-page .commit-bar-spacer { flex: 1; }

/* Inline page-level banner alternatives (e.g. failed-run error message
   surfaces in Facts column rather than a banner; retrying state shows
   as a small note in the work column when no decisions exist yet).
   Closed-run lock reason is carried by the .status-badge--closed; per
   P0.8 we do not render an explanatory subtitle. */
.screening-app .detail-page .run-error-note {
  margin: var(--s-4) 0 0;
  padding: var(--s-4);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--r-card);
  font-size: 12.5px; color: var(--color-danger-text); line-height: 1.55;
}
.screening-app .detail-page .run-error-note strong { font-weight: 600; }

/* ============================================================================
   Modal — used for the new-run quick-add on profile show.
   ----------------------------------------------------------------------------
   Atom inlined here pending promotion of the design system's Modal component
   into design-system/components/modal/ with shipped CSS. Matches the locked
   geometry (6px radius, subtle shadow, 480-560px max width).
   ============================================================================ */
.screening-app .modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.34);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 96px;
  z-index: 100;
}
.screening-app .modal-backdrop[hidden] { display: none; }
.screening-app .modal-box {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-modal);
  width: 520px; max-width: calc(100vw - 48px);
  box-shadow: var(--sh-modal);
}
.screening-app .modal-head { padding: 18px 22px 4px; }
.screening-app .modal-title {
  font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -0.005em;
}
.screening-app .modal-meta {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--fg-muted); margin-top: 4px;
}
.screening-app .modal-body { padding: 14px 22px 4px; }
.screening-app .modal-form-row {
  display: grid; grid-template-columns: 78px 1fr;
  gap: 12px; padding: 10px 0; align-items: center;
}
.screening-app .modal-form-l {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-muted); font-weight: 600;
}
.screening-app .modal-form-l .req {
  color: var(--color-warning-text); margin-left: 2px;
}
.screening-app .modal-form-v {
  display: flex; align-items: center; gap: 8px;
}
.screening-app .modal-input,
.screening-app .modal-select {
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-input);
  padding: 6px 10px; font-size: 13px; font-family: inherit; color: var(--fg);
  transition: border-color var(--t-fast);
}
.screening-app .modal-input:focus,
.screening-app .modal-select:focus {
  outline: none; border-color: var(--color-blue-500);
  box-shadow: 0 0 0 2px var(--color-blue-200);
}
.screening-app .modal-select { width: 100%; cursor: pointer; }
.screening-app .modal-input-mono { font-family: var(--font-mono); width: 120px; }
.screening-app .modal-input-suffix {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
}
.screening-app .modal-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-modal) var(--r-modal);
  margin-top: 8px;
}
.screening-app .modal-counter {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-muted);
}
.screening-app .modal-actions { display: flex; gap: 10px; }
.screening-app .modal-btn-cancel {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg); border-radius: var(--r-input);
  padding: 6px 12px; font-size: 13px; font-family: inherit;
  cursor: pointer;
  transition: background-color var(--t-fast);
}
.screening-app .modal-btn-cancel:hover { background: var(--surface-2); }
.screening-app .modal-btn-primary {
  background: var(--color-slate-900); color: #fff;
  border: 1px solid var(--color-slate-900);
  border-radius: var(--r-input);
  padding: 6px 14px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background-color var(--t-fast);
}
.screening-app .modal-btn-primary:hover { background: var(--color-slate-800); }
.screening-app .modal-btn-primary:disabled {
  background: var(--color-slate-500);
  border-color: var(--color-slate-500);
  cursor: not-allowed;
}

/* --------- Help-page action-availability table --------- */
.screening-app table.actions-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
  margin: 8px 0 4px;
  border: 1px solid var(--border);
}
.screening-app table.actions-table th {
  text-align: left; padding: 8px 12px;
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 600; color: var(--fg-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.screening-app table.actions-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.screening-app table.actions-table tbody tr:last-child td { border-bottom: none; }
.screening-app table.actions-table td.yes { font-family: var(--font-mono); color: var(--fg); }
.screening-app table.actions-table td.no { font-family: var(--font-mono); color: var(--fg-faint); }
.screening-app table.actions-table td.qual { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }

/* ============================================================================
   CREATE-STATE — Rich Detail new-record flow (foundations/record-creation.md)
   ----------------------------------------------------------------------------
   The detail page IS the create page. The create-zone is a tinted band
   that wraps the page head + the required-fields cluster; the body
   below renders the rest of the page (rules panels, past runs, facts
   column) at 0.4 opacity with pointer-events:none, so the operator can
   see the shape of what's coming but can't interact with it.

   This is the static version of the create-state. The canonical
   spec (foundations/record-creation.md) also defines a P0.7 V4 morph
   transition on commit (~2.6s) — that lives in a follow-up enhancement,
   for now the controller redirects to the show page on success.
   ============================================================================ */

.screening-app .detail-page .create-zone {
  background: var(--color-slate-50);
  border-bottom: 1px solid var(--border);
}
.screening-app .detail-page--creating .head {
  border-bottom: 1px solid var(--border);
}

/* Title field during create — editable input styled to read as the
   page heading. The input keeps the same typography + size as the
   static .head-name on a saved record so the eye doesn't move when
   the title morphs from editable → static on commit. A subtle
   border + paper background distinguish it as editable; the
   placeholder ("New job posting") is the prompt. */
.screening-app .detail-page .head-name-input {
  width: 100%;
  padding: 4px 8px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  font: inherit;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--fg);
  transition: border-color var(--t-fast);
}
.screening-app .detail-page .head-name-input:hover { border-color: var(--color-slate-300); }
.screening-app .detail-page .head-name-input:focus {
  outline: none;
  border-color: var(--color-slate-400);
}
.screening-app .detail-page .head-name-input::placeholder {
  color: var(--fg-faint);
  font-weight: 600;
}
.screening-app .detail-page .head-meta-empty {
  font-style: italic;
  color: var(--fg-faint);
}

/* "Active · unsaved" badge variant — solid border + slate-500 to
   communicate not-yet-real, no caret because state can't be changed
   on a record that doesn't exist. */
.screening-app .badge--unsaved {
  background: var(--paper);
  color: var(--color-slate-500);
  border: 1px solid var(--color-slate-500);
}

/* Required cluster — first content section inside the create-zone.
   The cluster spans the full create-zone width (not constrained to
   either work or facts column) per the foundations/record-creation
   spec. */
.screening-app .detail-page .required-cluster {
  padding: 16px 22px 18px;
}
.screening-app .detail-page .required-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
  border-bottom: 2px solid var(--color-slate-200);
  padding-bottom: 4px;
  margin-bottom: 12px;
}
.screening-app .detail-page .cluster-note {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Field rows inside the cluster — 180px label / 1fr value grid,
   matching the Rich Detail facts-row treatment but with editable
   inputs instead of static values. */
.screening-app .detail-page .cluster-field {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
}
.screening-app .detail-page .cluster-field-l {
  font-size: 12.5px;
  color: var(--fg-muted);
  padding-top: 6px;
  line-height: 1.4;
}
.screening-app .detail-page .cluster-field-l .req {
  color: var(--color-warning-text);
  font-weight: 700;
  margin-left: 2px;
}
.screening-app .detail-page .cluster-field-hint {
  display: block;
  font-size: 11.5px;
  color: var(--fg-faint);
  margin-top: 2px;
}
.screening-app .detail-page .cluster-field-v {
  min-width: 0;
}
.screening-app .detail-page .cluster-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  line-height: 1.5;
  transition: border-color var(--t-fast);
}
.screening-app .detail-page .cluster-input:hover { border-color: var(--color-slate-300); }
.screening-app .detail-page .cluster-input:focus {
  outline: none;
  border-color: var(--color-slate-400);
}
.screening-app .detail-page .cluster-input::placeholder {
  color: var(--fg-faint);
}

/* URL-paste row — input + Parse button + inline feedback line. */
.screening-app .detail-page .cluster-parse-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.screening-app .detail-page .cluster-parse-row .cluster-input {
  flex: 1;
}
.screening-app .detail-page .cluster-parse-feedback {
  font-size: 12px;
  margin: 6px 0 0;
  line-height: 1.4;
}
.screening-app .detail-page .cluster-parse-feedback.screening-parse-feedback-success {
  color: var(--color-success-text, #047857);
}
.screening-app .detail-page .cluster-parse-feedback.screening-parse-feedback-error {
  color: var(--color-danger-text);
}
/* Links inside the feedback line inherit the success/error tint but
   carry an underline so they read as clickable rather than as part
   of the warning prose. Scoped to .screening-parse-feedback (not
   .cluster-parse-feedback) because the parser controller rewrites
   `className` on each call, dropping the wrapper-scope class. */
.screening-app .detail-page .screening-parse-feedback a {
  color: inherit;
  text-decoration: underline;
}
.screening-app .detail-page .screening-parse-feedback a:hover {
  text-decoration: none;
}

/* Footer row — counter on the left, "Create and Continue →" on the
   right, separated from the cluster by a dashed border. */
.screening-app .detail-page .cluster-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-slate-300);
}
.screening-app .detail-page .cluster-counter {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-muted);
}

/* Ghosted body — operator can see the shape but can't reach it. The
   .body--ghosted modifier ALSO sets aria-hidden in the markup; the CSS
   is the visual half of the same affordance. */
.screening-app .detail-page .body--ghosted {
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}
.screening-app .detail-page .facts-v--empty {
  font-family: var(--font-mono);
  color: var(--fg-faint);
  font-style: italic;
}

/* Scoped .btn / .btn--primary for the cluster footer. Same shape as
   .callout-scoped .btn rules above; the button atom lands later and
   replaces both. */
.screening-app .detail-page .required-cluster .btn {
  display: inline-flex; align-items: center; padding: 4px 10px;
  font-size: 12px; font-weight: 500; line-height: 1.4;
  border-radius: var(--r-input);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--fg);
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: background-color var(--t-fast);
}
.screening-app .detail-page .required-cluster .btn:hover { background: var(--surface-2); }
.screening-app .detail-page .required-cluster .btn.btn--primary {
  background: var(--color-slate-900); color: #fff;
  border-color: var(--color-slate-900);
  padding: 6px 14px; font-size: 13px; font-weight: 600;
}
.screening-app .detail-page .required-cluster .btn.btn--primary:hover {
  background: var(--color-slate-800); border-color: var(--color-slate-800);
}
.screening-app .detail-page .required-cluster .btn.btn--primary:disabled {
  opacity: 0.5; cursor: not-allowed;
  background: var(--color-slate-900); border-color: var(--color-slate-900);
}

/* ============================================================================
   P0.7 V4 MORPH TRANSITION — create-state → saved-state
   ----------------------------------------------------------------------------
   When the Stimulus controller flips data-state from "creating" to "saved"
   on the .detail-page, the morph plays in place over ~2.6s:

     t=0      : title input / badge "Active · unsaved" / "no id yet" all
                bloom with a slate-500/55% double ring (morphOldRing
                keyframe) — see the source of truth in
                foundations/principles/p0-7-morph-change-transition.md
     t=0.8s   : ghosted body opacity transition begins (0.4 → 1.0)
                — the controller swaps in the show-page body content
                at this beat so the fade-in lands on real data
     t=1.4s   : required-cluster collapses out, create-zone tint fades
                to paper white
     t=2.6s   : every animation complete; controller pushState's the
                show URL
   ============================================================================ */

@keyframes screening-morph-old-ring {
  0%   { box-shadow: 0 0 0 0 rgba(100, 116, 139, 0); opacity: 1; }
  10%  { box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.55); opacity: 1; }
  25%  { box-shadow: 0 0 0 0 rgba(100, 116, 139, 0); opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes screening-morph-new-ring {
  0%, 35% { opacity: 0; box-shadow: 0 0 0 0 rgba(100, 116, 139, 0); }
  55%     { opacity: 1; box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.55); }
  100%    { opacity: 1; box-shadow: 0 0 0 0 rgba(100, 116, 139, 0); }
}

/* .swap-old / .swap-new pair sits inside a -tx wrapper. Both elements
   are present in the DOM; the new one is positioned absolutely on top
   of the old one and starts at opacity 0. The keyframes above ring
   each then crossfade. */
.screening-app .detail-page .head-name-tx,
.screening-app .detail-page .head-id-tx,
.screening-app .detail-page .badge-tx {
  position: relative;
  display: inline-block;
}
.screening-app .detail-page .head-name-tx { display: block; }

.screening-app .detail-page .head-name-tx .swap-old,
.screening-app .detail-page .head-id-tx .swap-old,
.screening-app .detail-page .badge-tx .swap-old {
  position: relative;
  z-index: 1;
  border-radius: var(--r-input);
}

/* Only the title swap-new needs heading typography baked in. The id +
   badge swap-new just sit at their natural sizes (inherited from .badge,
   meta line, etc.) — applying h1-sized font here makes the post-morph
   Active pill render at 24px+. */
.screening-app .detail-page .head-name-tx .swap-new {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  border-radius: var(--r-input);
  margin: 0;
  font: inherit;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--fg);
  padding: 4px 8px;
}
.screening-app .detail-page .head-id-tx .swap-new,
.screening-app .detail-page .badge-tx .swap-new {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  border-radius: var(--r-input);
  margin: 0;
}

/* On commit, both old + new animate */
.screening-app .detail-page[data-state="saved"] .head-name-tx .swap-old,
.screening-app .detail-page[data-state="saved"] .head-id-tx .swap-old,
.screening-app .detail-page[data-state="saved"] .badge-tx .swap-old {
  animation: screening-morph-old-ring 2.6s ease-out forwards;
}
.screening-app .detail-page[data-state="saved"] .head-name-tx .swap-new,
.screening-app .detail-page[data-state="saved"] .head-id-tx .swap-new,
.screening-app .detail-page[data-state="saved"] .badge-tx .swap-new {
  animation: screening-morph-new-ring 2.6s ease-out forwards;
}

/* Required cluster collapses out at t=1.4s */
.screening-app .detail-page .required-cluster,
.screening-app .detail-page .required-eyebrow {
  overflow: hidden;
  transition:
    opacity 0.4s ease-out 1.4s,
    max-height 0.6s ease-out 1.6s,
    padding 0.6s ease-out 1.6s,
    margin 0.6s ease-out 1.6s;
  max-height: 600px;
}
.screening-app .detail-page[data-state="saved"] .required-cluster {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Create-zone background fades tint → paper at t=1.2s */
.screening-app .detail-page .create-zone {
  transition: background 0.5s ease-out 1.2s, border-bottom-color 0.5s ease-out 1.2s;
}
.screening-app .detail-page[data-state="saved"] .create-zone {
  background: var(--paper);
  border-bottom-color: var(--border);
}

/* Body un-ghosts: opacity 0.4 → 1.0 with delay so the cluster gets a
   visible head start. */
.screening-app .detail-page .body--ghosted {
  transition: opacity 1.4s ease-out 0.8s;
}
.screening-app .detail-page[data-state="saved"] .body--ghosted {
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}