/* Audience Evaluation module — chrome + stage badges.
   Index table chrome reuses the global cpv1-* classes (campaigns.css);
   person tokens reuse the canon initials-token atom. This file adds only
   the module subnav, the Stage-column badges, and an sr-only utility. */

/* --- Module subnav (Flagged Registrants / Configure) ------------------ */
.ae-subnav { display: flex; gap: 8px; align-items: center; margin: 0 0 16px; }
.ae-subnav-pill {
  font-size: 13px; font-weight: 600; line-height: 1; padding: 7px 13px;
  border-radius: var(--r-input); border: 1px solid transparent;
  color: var(--fg-muted); text-decoration: none;
  transition: background var(--t-fast, 100ms) ease-out, color var(--t-fast, 100ms) ease-out;
}
.ae-subnav-pill:hover { background: var(--surface-2); color: var(--fg); }
.ae-subnav-pill--active,
.ae-subnav-pill--active:hover { background: var(--color-slate-900); color: #fff; }
.ae-subnav-pill--disabled { color: var(--fg-faint); cursor: default; }
.ae-subnav-pill--disabled:hover { background: transparent; color: var(--fg-faint); }

/* --- Stage column badge (D3 two-queue lifecycle) ---------------------- */
/* Tinted treatment per the status-colors foundation: pale bg + saturated
   text, mono lowercase, 4px square corners, no leading dot. */
.ae-stage {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; text-transform: lowercase; letter-spacing: 0.01em;
  padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid transparent;
  line-height: 1.45; white-space: nowrap;
}
.ae-stage--needs-decision { background: var(--color-warning-bg);  color: var(--color-warning-text);  border-color: var(--color-warning-border); }
.ae-stage--in-review      { background: var(--color-blue-50);     color: var(--color-blue-700);      border-color: var(--color-blue-200); }
.ae-stage--needs-action   { background: var(--color-blue-50);     color: var(--color-blue-700);      border-color: var(--color-blue-200); }
.ae-stage--closed         { background: var(--surface-2);         color: var(--fg-muted);            border-color: var(--border); }

/* --- Screen-reader-only utility (used by the initials-token markup) --- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =====================================================================
   Decide (quick-decision) page — Rich Detail, stage-aware (D2/D3).
   Same site as the index: shared app frame + tokens + card vocabulary.
   On-deck rail + work column (AI assessment, decision, discussion) +
   trusted Salesforce facts rail. No new background or card system.
   ===================================================================== */
.ae-decide { display: flex; gap: 0; align-items: stretch; min-height: 0; }

/* On-deck rail (D3 advance) */
.ae-ondeck {
  width: 210px; flex-shrink: 0; border-right: 1px solid var(--border);
  margin: -4px 20px 0 0; padding-right: 4px; align-self: flex-start;
  max-height: calc(100vh - 160px); overflow-y: auto;
}
.ae-od-item {
  display: block; padding: 8px 10px; border-bottom: 1px solid var(--border-faint);
  text-decoration: none; color: var(--fg);
}
.ae-od-item:hover { background: var(--color-slate-50); }
.ae-od-item.is-current { background: var(--surface-2); }
.ae-od-item.is-done { opacity: 0.5; }
.ae-od-name { display: block; font-size: 13px; font-weight: 600; }
.ae-od-sub { display: block; font-size: 11.5px; color: var(--fg-muted); margin-top: 1px; }
.ae-od-foot { border-top: 1px solid var(--border); margin-top: 4px; }
.ae-od-back {
  display: flex; align-items: center; gap: 8px; padding: 11px 10px;
  font-size: 12.5px; font-weight: 500; color: var(--fg-muted); text-decoration: none;
}
.ae-od-back:hover { background: var(--color-slate-50); color: var(--fg); }

.ae-decide-main { flex: 1; min-width: 0; }

/* Page head */
.ae-decide-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 4px 0 16px; border-bottom: 1px solid var(--border);
}
.ae-head-prefix {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--fg-faint); font-weight: 700;
}
.ae-head-name { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin: 6px 0 0; }
.ae-head-sub { font-size: 14px; color: var(--fg-muted); margin-top: 4px; }
.ae-head-right { flex-shrink: 0; }

/* Two-column body: work + trusted facts (Rich Detail) */
.ae-decide-body { display: grid; grid-template-columns: 1fr 290px; gap: 0; }
.ae-work { padding: 8px 28px 40px 0; border-right: 1px solid var(--border); min-width: 0; }
.ae-facts { padding: 18px 0 40px 24px; }

/* Work sections — hairline-separated, mono uppercase titles */
.ae-sec { border-top: 1px solid var(--border); margin-top: 22px; }
.ae-sec:first-child { border-top: none; margin-top: 0; }
.ae-sec-head { display: flex; align-items: center; gap: 9px; padding: 14px 0 12px; }
.ae-sec-title {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.07em; font-weight: 700; color: var(--fg);
}
.ae-sec-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); margin-left: auto; }

/* AI assessment block (components/ai-assessment-block · P0.11). Judgment chip
   lives in the section header; reasoning + model/date footer in the inset. */
.ai-judgment {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--r-pill); border: 1px solid transparent; text-transform: none;
}
.ai-judgment--sell { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: var(--color-danger-border); }
.ai-judgment--unclear { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.ai-judgment--buy { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }
.ai-block { background: var(--color-slate-50); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; }
.ai-rsec { margin-bottom: 12px; }
.ai-rsec:last-child { margin-bottom: 0; }
.ai-rsec-label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg-faint); font-weight: 700; margin-bottom: 3px;
}
.ai-rsec-body { font-size: 13.5px; line-height: 1.55; color: var(--fg); }
.ai-foot { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); margin-top: 12px; }

/* Decision — disposition picker + actions */
.ae-split-l {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--fg-faint); font-weight: 700; margin-bottom: 11px;
}
/* Mode-first selector (DECISION-FLOW-REVISION) — segmented, button vocabulary */
.ae-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.ae-mode {
  text-align: center; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-input); padding: 10px 12px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--fg);
}
.ae-mode:hover { border-color: var(--color-slate-700); }
.ae-mode.is-on { border-color: var(--color-slate-900); box-shadow: inset 0 0 0 1px var(--color-slate-900); background: var(--color-slate-900); color: #fff; }
.ae-dform[hidden] { display: none; }
.ae-split-l--spaced { margin-top: 18px; }
.ae-opt { color: var(--fg-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Disposition tiles — wrapping grid (grows with the configurable reason set).
   Equal columns + grid-auto-rows:1fr size every tile to the tallest one, so
   they're all identical regardless of label length. */
.ae-disp-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(134px, 1fr)); grid-auto-rows: 1fr; gap: 8px; align-items: stretch; }
.ae-disp { position: relative; display: flex; cursor: pointer; }
.ae-disp-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.ae-disp-label {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 12.5px; font-weight: 600; color: var(--fg);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-input);
  padding: 11px 10px; box-shadow: 0 1px 1px rgba(15,23,42,.05);
  transition: background var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.ae-disp:hover .ae-disp-label { background: var(--surface); border-color: var(--color-slate-900); }
.ae-disp-radio:checked + .ae-disp-label { background: var(--surface); border-color: var(--color-slate-900); box-shadow: inset 0 0 0 1px var(--color-slate-900); }
.ae-disp-radio:focus-visible + .ae-disp-label { outline: 2px solid var(--color-blue-700); outline-offset: 2px; }

.ae-hz { margin-top: 18px; display: flex; justify-content: flex-end; gap: 10px; }
.ae-act { font: inherit; font-size: 13px; font-weight: 600; border-radius: var(--r-input); padding: 10px 18px; cursor: pointer; border: 1px solid transparent; }
.ae-act:disabled { opacity: 0.45; cursor: default; }
.ae-act-resolve { color: #fff; background: var(--color-slate-900); border-color: var(--color-slate-900); }
.ae-act-resolve:disabled:hover { background: var(--color-slate-900); }
.ae-act-resolve:hover { background: #1e293b; }
.ae-act-approval { color: var(--fg); background: var(--surface); border-color: var(--border-strong); }
.ae-act-approval:hover { background: var(--surface-2); }
.ae-act-approve { color: #fff; background: var(--color-success); border-color: var(--color-success); }
.ae-act-sendback { color: var(--fg); background: var(--surface); border-color: var(--border-strong); }

.ae-proposed { font-size: 14px; }
.ae-proposed-meta, .ae-settled-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-faint); margin-top: 5px; }
.ae-appr-row { display: flex; gap: 10px; margin-top: 14px; }
.ae-settled { font-size: 14px; }
.ae-acts-l { margin-top: 18px; }

/* Action checklist */
.ae-acts { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.ae-actrow { display: grid; grid-template-columns: 22px 1fr auto; gap: 11px; align-items: center; padding: 10px 13px; border-bottom: 1px solid var(--border-faint); }
.ae-actrow:last-child { border-bottom: none; }
.ae-actrow.is-done .ae-actlabel { color: var(--fg-muted); }
.ae-actcheck { color: var(--color-success); font-weight: 700; text-align: center; }
.ae-actcheck-form { margin: 0; }
.ae-actcheck-btn {
  width: 18px; height: 18px; padding: 0; line-height: 1; font-size: 11px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 3px; background: var(--surface); color: transparent;
}
.ae-actcheck-btn:hover { border-color: var(--color-success); color: var(--color-success); }
/* Done state: the same checked look the static ✓ had, still clickable —
   hover hints the uncheck (border dims, check fades) so a mis-click is
   fixable at any time, not just inside the undo window. */
.ae-actcheck-btn.is-done {
  border-color: var(--color-success); background: var(--color-success-bg); color: var(--color-success-text);
}
.ae-actcheck-btn.is-done:hover { border-color: var(--border-strong); color: var(--fg-faint); background: var(--surface); }
.ae-actlabel { font-size: 13.5px; }
.ae-actright { font-family: var(--font-mono); font-size: 11px; }
.ae-actdone { color: var(--color-success-text); }
.ae-actclaimed { color: var(--fg-muted); }
.ae-actclaim-form { margin: 0; }
.ae-actclaim { font: inherit; font-family: var(--font-mono); font-size: 11px; color: var(--color-blue-700); background: none; border: none; cursor: pointer; padding: 0; }
.ae-actclaim:hover { text-decoration: underline; }

/* Discussion thread (components/discussion-thread) — comment = blue bubble with
   inline [author@ops · source] tag; event = amber italic; square corners. */
.disc { display: flex; flex-direction: column; gap: 8px; }
.disc-entry { font-size: 13px; line-height: 1.5; padding: 8px 10px; border-radius: 3px; border: 1px solid transparent; color: var(--fg); }
.disc-entry--comment { background: var(--color-blue-50); border-color: var(--color-blue-200); }
.disc-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; margin-right: 6px; color: var(--color-blue-700); }
.disc-entry--event { padding: 4px 10px; color: var(--color-warning-text); font-style: italic; font-size: 12px; }
.disc-entry--event .disc-label { color: var(--color-warning-text); }
.disc-entry--system { padding: 4px 10px; color: var(--fg-muted); font-style: italic; font-size: 12px; }
.ment { color: var(--color-blue-700); font-weight: 500; }
.disc-time { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); margin-left: 8px; white-space: nowrap; }
.disc-composer { margin-top: 11px; border: 1px solid var(--border-strong); border-radius: var(--r-card); overflow: hidden; }
.disc-composer textarea { width: 100%; border: none; padding: 9px 11px; font: inherit; font-size: 13px; resize: vertical; display: block; }
.disc-composer textarea:focus { outline: none; }
.disc-composer-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 9px; border-top: 1px solid var(--border-faint); background: var(--color-slate-50); }
.disc-composer-mirror { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); }
.disc-composer-send { font: inherit; font-size: 12px; font-weight: 600; color: #fff; background: var(--color-slate-900); border: none; border-radius: var(--r-input); padding: 5px 12px; cursor: pointer; }

/* @-mention composer (mention controller): a contenteditable editor whose
   picked users become inline chips (pills), so a tag is set off from text. */
.ae-ment-field { position: relative; }
.ae-ment-editor {
  min-height: 44px; padding: 9px 11px; font: inherit; font-size: 13px; line-height: 1.6;
  color: var(--fg); outline: none; white-space: pre-wrap; overflow-wrap: break-word;
}
.ae-dform .ae-ment-editor {
  min-height: 64px; border: 1px solid var(--border-strong); border-radius: var(--r-input);
}
.ae-dform .ae-ment-editor:focus { border-color: var(--color-blue-700); box-shadow: 0 0 0 3px var(--color-blue-50); }
/* Inline mention chip — pill, sits within the flowing text as one atom. */
.ae-ment-chip {
  display: inline-block; background: var(--color-blue-50); color: var(--color-blue-700);
  border: 1px solid var(--color-blue-200); border-radius: 3px; padding: 0 5px;
  font-weight: 500; font-size: 12.5px; line-height: 1.45; white-space: nowrap;
}
/* Canon picker overlay: floats above everything (fixed, top of stack), never
   contained/clipped by the composer. JS sets left/width/top (flips above on
   bottom-clip). */
.ae-ment-menu {
  position: fixed; z-index: 1000;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card);
  box-shadow: 0 6px 20px rgba(15,23,42,.14); max-height: 240px; overflow-y: auto; padding: 4px;
}
/* Two-line "with-metadata" item: name over mono email — disambiguates people
   who share a name (e.g. two Erins). Never wraps. */
.ae-ment-opt {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  white-space: nowrap; background: none; border: 0; border-radius: var(--r-input);
  padding: 6px 9px; cursor: pointer; font: inherit;
}
.ae-ment-opt:hover, .ae-ment-opt.is-active { background: var(--surface-2); }
.ae-ment-name { font-size: 13px; font-weight: 600; color: var(--fg); }
.ae-ment-email { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }

/* Trusted facts rail */
.ae-facts-src { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ae-facts-src-l { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-faint); font-weight: 700; }
.ae-src-tag { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; color: var(--color-slate-700); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 3px; padding: 1px 6px; }
.ae-facts-sec { margin-bottom: 16px; }
.ae-facts-eyebrow { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg); font-weight: 700; border-bottom: 2px solid var(--fg); padding-bottom: 5px; margin-bottom: 8px; }
/* Field grid (components/field-grid · narrow variant) composing field rows */
.field-grid { display: grid; }
.field-grid--narrow { grid-template-columns: 76px 1fr; gap: 6px 14px; }
.field-grid .field { display: contents; }
.field-grid .field-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-faint); font-weight: 600; padding: 2px 0; }
.field-grid .field-value { font-size: 12.5px; color: var(--fg); font-weight: 500; overflow-wrap: break-word; padding: 2px 0; }

/* Email row: ellipsize instead of overflowing the rail; tiny always-visible
   copy affordance (P0.4) — full address stays on title + one click away. */
.ae-email-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ae-email-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ae-copy-btn {
  flex: none; width: 18px; height: 18px; padding: 0; line-height: 1; font-size: 11px;
  border: none; border-radius: 3px; background: transparent; color: var(--fg-faint); cursor: pointer;
}
.ae-copy-btn:hover { background: var(--surface-2); color: var(--fg); }
.ae-copy-btn.is-copied { color: var(--color-success); }
.ae-f-links { display: flex; flex-direction: column; gap: 6px; }
.ae-f-links a { font-size: 12px; color: var(--color-blue-700); }
.ae-f-links a:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .ae-decide { flex-direction: column; }
  .ae-ondeck { width: auto; border-right: none; border-bottom: 1px solid var(--border); margin: 0 0 16px; max-height: 200px; }
  .ae-decide-body { grid-template-columns: 1fr; }
  .ae-work { border-right: none; padding-right: 0; }
  .ae-facts { padding-left: 0; border-top: 1px solid var(--border); padding-top: 20px; }
}

/* =====================================================================
   Config module (D4) — Compact Detail layout (880px), composed from the
   locked Row-collection (Panel) + Table atoms. Reasons & actions are
   draggable row-collections with an inline-edit Active/Inactive value;
   the matrix is a Table. No bespoke list/badge/note treatments.
   ===================================================================== */
.ae-config { max-width: 880px; margin: 0 auto; padding: 0 28px 36px; }
.ae-cfg-head { padding: 4px 0 16px; border-bottom: 1px solid var(--border); }

/* Row-collection panel (per components/row-collection + panel) */
.ae-cfg-panel { margin-top: 24px; }
.panel.ae-cfg-panel { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); overflow: visible; }
.ae-cfg-panel .panel-head {
  display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-bottom: 1px solid var(--border);
}
.ae-cfg-panel .panel-title { font-size: 13px; font-weight: 600; color: var(--fg); }

/* Add-action in the panel head (P0.1): the canon "+ Verb" text-link. Clicking
   it reveals the blank create-row in the body (inline-create controller). */
.ae-cfg-panel .panel-action {
  margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--color-blue-600);
}
.ae-cfg-panel .panel-action:hover { text-decoration: underline; }

/* Canon input + button atoms (components/input, components/button). The design
   system ships no importable atom CSS, and this module stylesheet loads app-wide,
   so the atoms are vendored here verbatim from each atom's example.html, scoped
   to .ae-config to avoid leaking bare .input/.btn globally. */
.ae-config .input {
  width: 100%; padding: var(--s-3) var(--s-3); font-family: var(--font-sans); font-size: 13px;
  color: var(--fg); background: var(--surface); border: 1px solid transparent; border-radius: var(--r-input);
  transition: background-color var(--t-fast), border-color var(--t-fast); box-sizing: border-box;
}
.ae-config .input:focus { outline: 2px solid var(--color-blue-500); outline-offset: 1px; border-color: var(--color-slate-400); }
.ae-config .input--filled { background: var(--surface-2); border-color: transparent; }
.ae-config .input--filled:focus { background: var(--surface); }
.ae-config .btn {
  display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 1; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; user-select: none; white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.ae-config .btn:focus-visible { outline: 2px solid var(--color-blue-500); outline-offset: 2px; }
.ae-config .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ae-config .btn--primary { background: var(--color-slate-900); color: #fff; border-color: var(--color-slate-900); }
.ae-config .btn--primary:hover:not([disabled]) { background: var(--color-slate-700); border-color: var(--color-slate-700); }
.ae-config .btn--secondary { background: var(--surface); color: var(--color-slate-700); border-color: var(--color-slate-300); }
.ae-config .btn--secondary:hover:not([disabled]) { background: var(--color-slate-50); border-color: var(--color-slate-400); }

/* Rows */
.ae-cfg-panel .panel-body--rows { display: flex; flex-direction: column; }
.ae-cfg-panel .row {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  border-bottom: 1px solid var(--border-faint); background: var(--surface);
}
.ae-cfg-panel .row:last-child { border-bottom: none; }
.ae-cfg-panel .row.is-dragging { opacity: 0.5; background: var(--color-slate-50); }
.row-drag {
  border: 0; background: none; padding: 0; cursor: grab; color: var(--fg-faint);
  font-size: 13px; line-height: 1; letter-spacing: -2px;
}
.row-drag:hover { color: var(--fg-muted); }
.row-drag:active { cursor: grabbing; }
.ae-cfg-panel .row-content { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--fg); }
.row-status { margin-left: auto; }

/* Quick-add blank row (append-editable-row): a real .row that's hidden until
   the head "+ Verb" reveals it. The input fills the name column; the Add button
   sits in the status column. The drag spacer keeps the input aligned with the
   real rows' names (they sit after a drag handle). */
.ae-cfg-panel .row.ae-create-row { display: none; margin: 0; }
.ae-cfg-panel .row.ae-create-row.is-revealed { display: flex; }
.ae-create-row .ae-drag-spacer { visibility: hidden; cursor: default; }
.ae-create-row .row-status { display: flex; gap: 6px; align-items: center; }

/* Inline-edit Active/Inactive value (P0.5 + A6 clickable-status: dotted + ▾) */
.ae-state-form { margin: 0; }
.ae-state-select {
  font: inherit; font-family: var(--font-mono); font-size: 11px; cursor: pointer;
  color: var(--color-success-text); background: var(--color-success-bg);
  border: 1px solid var(--color-success-border); border-radius: var(--r-pill);
  padding: 2px 6px; appearance: auto;
}
.ae-state-select.is-off { color: var(--fg-muted); background: var(--surface-2); border-color: var(--border); }
.ae-state-select:focus-visible { outline: 2px solid var(--color-blue-700); outline-offset: 1px; }

/* Required-actions matrix — Table atom (faint dividers, surface-2 header) */
.ae-cfg-section-title {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg); font-weight: 700; border-bottom: 2px solid var(--fg); padding-bottom: 6px; margin-bottom: 12px;
}
.ae-matrix { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--r-card); }
.ae-matrix th {
  background: var(--surface-2); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--fg-faint); font-weight: 700; padding: 9px 10px; text-align: center;
  border-bottom: 1px solid var(--border); vertical-align: bottom;
}
.ae-matrix th.ae-mx-rowh { text-align: left; }
.ae-matrix td { padding: 8px 10px; border-bottom: 1px solid var(--border-faint); text-align: center; }
.ae-matrix tr:last-child td { border-bottom: none; }
.ae-matrix td.ae-mx-reason { text-align: left; font-size: 13px; font-weight: 500; }
.ae-matrix tr:hover td { background: var(--color-slate-50); }
.ae-mx-form { margin: 0; display: inline-flex; }
.ae-mx-form input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--color-slate-900); cursor: pointer; }

/* ---- Help (reader) — single-column reference page ------------------------- */
.ae-reader { max-width: 820px; margin: 0 auto; padding: 4px 0 64px; }
.ae-reader-head { margin-bottom: 18px; }
.ae-reader-lead { font-size: 15px; line-height: 1.6; color: var(--fg); margin: 0; }
.ae-reader-section { border-top: 1px solid var(--border); margin-top: 22px; padding-top: 18px; }
.ae-reader-section h2 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--fg-muted); margin: 0 0 11px;
}
.ae-reader-bullets { margin: 0; padding-left: 18px; }
.ae-reader-bullets li { font-size: 14px; line-height: 1.6; color: var(--fg); margin-bottom: 7px; }
.ae-reader-bullets li:last-child { margin-bottom: 0; }
.ae-reader-bullets strong, .ae-reader-prose strong { font-weight: 600; }
.ae-reader-prose p { font-size: 14px; line-height: 1.65; color: var(--fg); margin: 0 0 10px; }
.ae-reader-prose p:last-child { margin-bottom: 0; }

/* ---- Index: show full content in the text columns ------------------------ */
/* The shared control-panel cells are nowrap + ellipsis; for this index we'd
   rather wrap long titles / companies / dispositions than truncate them, so the
   full value is always visible within the column's fixed width. (NOT the name
   column — it's auto-width, so wrapping would collapse it to a sliver.) */
.ae-index .cpv1-data-row td.cpv1-col-fk-long {
  white-space: normal;
  overflow-wrap: break-word;
}
.ae-index .cpv1-data-row td { vertical-align: top; }
/* The name column is auto-width in the shared CSS; once the other columns wrap,
   table-layout:auto starves it to ~0. Pin it so the registrant name always shows
   (the table scrolls horizontally if the total exceeds the content width). */
.ae-index .cpv1-tbl .cpv1-col-name { width: 200px; min-width: 200px; }
/* Stage badges ("needs decision", "needs action 0/2") need a touch more room. */
.ae-index .cpv1-tbl .cpv1-col-badge-wide { width: 165px; min-width: 165px; }