.notes-page { padding: 32px 28px; }

/* ── Draft tabs ──
   One tab per open live-call form. Sits above the header rather than beside it
   because it can wrap: an agent taking a husband and a wife has two, but a busy
   inbound hour can leave four or five parked. */

.notes-draft-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

/* The tab is a pill wrapping two buttons — open and close — rather than one
   button, because a button cannot legally nest inside another. */
.notes-draft-tab,
.notes-draft-new {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--speed), background var(--speed), color var(--speed);
}

.notes-draft-tab { padding-right: 6px; }

.notes-draft-tab:hover,
.notes-draft-new:hover {
  border-color: var(--wood);
  background: var(--wood-soft);
  color: var(--text);
}

.notes-draft-tab.is-active {
  border-color: var(--wood);
  background: var(--wood-soft);
  color: var(--text);
}

/* Bare — the pill around it carries the chrome. */
.notes-draft-tab-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.notes-draft-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 4px;
  padding: 0;
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity var(--speed), background var(--speed), color var(--speed);
}

.notes-draft-tab:hover .notes-draft-tab-close { opacity: 1; }

.notes-draft-tab-close:hover {
  background: var(--red-soft);
  color: var(--red);
  opacity: 1;
}

/* The product line, so two tabs for the same household are still telling apart
   when one is FEX and the other IUL. */
.notes-draft-tab-line {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--gold-soft);
  color: var(--gold);
}

/* A long name truncates rather than pushing "+ New call" off the row. */
.notes-draft-tab-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes-draft-new {
  border-style: dashed;
  font-weight: 500;
}

/* ── Header ── */

.notes-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.notes-greeting-wrap { display: flex; flex-direction: column; gap: 2px; }

.notes-greeting-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}

.notes-greeting-sub {
  font-size: 13px;
  color: var(--text-muted);
}

.notes-line-pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 6px;
  background: var(--gold-soft);
  color: var(--gold);
  vertical-align: middle;
  letter-spacing: 0.04em;
}

.notes-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Second Submit under the last section — the form runs long enough that the
   header button is off-screen by the time the call ends. Discard is left in the
   header only; it is destructive and doesn't belong under the agent's thumb at
   the end of a call. */
.notes-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ── Sections ── */

.notes-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notes-section {
  /* Inherits .cp-section from crm.css for the card frame */
  padding: 18px 20px;
}

.notes-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  user-select: none;
}

/* Section tool buttons grouped at the right edge of the header, rather than
   being spread out by the header's space-between. Medical is the exception —
   its Research and Knockouts buttons render in the Slack row instead, beside
   Copy and Open. See toolButtons() in notes-section.js. */
.notes-section-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  row-gap: 6px;
}

/* Collapse chevron on the section header — points down when open, right when
   collapsed. Sits just left of the title. */
.notes-section-header .cp-section-title::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 8px;
  vertical-align: middle;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: rotate(90deg);
  transition: transform 0.18s ease;
  opacity: 0.5;
}
.notes-section.collapsed .notes-section-header .cp-section-title::before {
  transform: rotate(0deg);
}

/* Collapsed: hide the fields + any custom-after block, and drop the header's
   divider so it reads as a single bar. The header (title + tool buttons) stays
   visible and clickable.
   NOTE: a global rule in table.css — `.cp-section.collapsed > :not(.cp-section-title)`
   — would otherwise hide the notes header too (the title is nested inside
   .notes-section-header, not a direct child), so we explicitly re-show it. */
.notes-section.collapsed > .notes-section-header {
  display: flex !important;
}
.notes-section.collapsed .notes-fields,
.notes-section.collapsed .notes-custom-after {
  display: none;
}
.notes-section.collapsed .notes-section-header {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

/* Slack Copy/Open block relocated under the Medications box in the Medical
   section (notes-custom-after 'slack'). */
.notes-slack-actions {
  margin-top: 12px;
}

/* Research and Knockouts join this row but sit at the far right, with Copy and
   Open Slack held at the left. margin-left:auto on the group eats the leftover
   space between the two halves. */
.notes-slack-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* .notes-quoter-actions already supplies the row gap — the 8px left margin
   these buttons carry for the section header would double it here. */
.notes-slack-tools > .notes-research-btn,
.notes-slack-tools > .notes-knockouts-btn {
  margin-left: 0;
}

/* Sub-heading / divider inside a section (e.g. "Monthly Bills" within
   Financial). Full-width, small caps label with a top rule for separation. */
.notes-subheading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wood);
  margin: 6px 0 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.notes-section .cp-section-title {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

/* Section tool buttons — Knockouts, E-Apps, Text Code Guides, Quoter, Tips,
   Underwriting Engine, Research.

   They used to be 11px small-caps pills with no fill. Copy and Open Slack, sat
   right beside them in the Medical section, were full-size buttons — so two
   sets of controls that do the same KIND of thing (open a tool with what's on
   the form) read as two different ranks of thing, and the smaller set was the
   harder to hit mid-call. They are one family now, matching .notes-slack-btn
   below value for value. Keep the two in step. */
.notes-knockouts-btn,
.notes-eapps-btn,
.notes-quick-copy-btn,
.notes-text-guides-btn,
.notes-quoter-btn,
.notes-engine-btn,
.notes-tips-btn,
.notes-research-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wood);
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--speed);
  white-space: nowrap;
  margin-left: 8px;
}

.notes-knockouts-btn:hover,
.notes-eapps-btn:hover,
.notes-quick-copy-btn:hover,
.notes-text-guides-btn:hover,
.notes-quoter-btn:hover,
.notes-engine-btn:hover,
.notes-tips-btn:hover,
.notes-research-btn:hover {
  border-color: var(--wood);
  background: var(--wood-soft);
}

/* The inline brand marks these two buttons carry. Explicit size because an
   <svg> with no width/height lays out at its 300×150 default. */
.notes-tool-icon { flex: none; display: inline-block; vertical-align: middle; }

/* ── The two branded tools, Arsenal only ─────────────────────────────────────
   Quoter and Underwriting Engine are the only buttons in this row that open
   something with its own identity, so under Arsenal they carry it — filled,
   white-on-colour, shaped exactly like .notes-slack-open-btn. The rest of the
   row stays outlined, which is what keeps these two reading as "leaves the
   form" rather than as two more toggles.

   Scoped to the two Arsenal appearances by request; Classic, Ivory, Jarvis and
   Windows 2000 keep the outlined treatment above, brand mark and all.

   The InsuranceToolkits purple is sampled from the supplied logo. White on it
   measures 16.5:1; white on the pink measures 4.6:1 — both clear AA for the
   13px semibold label they carry. */
:root[data-theme="arsenal"] .notes-quoter-btn,
:root[data-theme="arsenal-dark"] .notes-quoter-btn {
  background: #2e0a4f;
  border-color: #2e0a4f;
  color: #fff;
}
:root[data-theme="arsenal"] .notes-quoter-btn:hover,
:root[data-theme="arsenal-dark"] .notes-quoter-btn:hover {
  background: #431272;
  border-color: #431272;
}

:root[data-theme="arsenal"] .notes-engine-btn,
:root[data-theme="arsenal-dark"] .notes-engine-btn {
  background: #db2777;
  border-color: #db2777;
  color: #fff;
}
:root[data-theme="arsenal"] .notes-engine-btn:hover,
:root[data-theme="arsenal-dark"] .notes-engine-btn:hover {
  background: #be185d;
  border-color: #be185d;
}

/* Field header row: label on the left, an inline action (e.g. Research) right */
.notes-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.notes-field-head .form-label {
  margin-bottom: 0;
}

.notes-fields { row-gap: 14px; column-gap: 16px; }

.notes-fields .form-field.hidden { display: none; }

/* disableWhen: stays in the layout (unlike .hidden above) but reads as "not
   answerable right now" — greyed and inert, same opacity convention as
   .notes-engine-quoter[disabled] elsewhere in this file.
   The opacity is scoped to the control only, not the whole field: measured
   against all six themes, var(--text-muted) already clears 4.5:1 on its own
   surface (4.60:1 classic to 9.74:1 ivory), but halving it again via a
   blanket opacity on the wrapper drops every theme to ~2:1 — well under
   WCAG AA. The label and hint stay at full opacity so the "why" is readable;
   only the now-inert control dims. */
.notes-fields .form-field.is-field-disabled .form-label { color: var(--text-muted); }
.notes-field-hint { display: none; }
.notes-fields .form-field.is-field-disabled .notes-field-hint { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.notes-fields .form-field.is-field-disabled input,
.notes-fields .form-field.is-field-disabled select,
.notes-fields .form-field.is-field-disabled textarea,
.notes-fields .form-field.is-field-disabled button {
  opacity: .5;
  cursor: not-allowed;
}

/* Inline row: groups N fields side-by-side, spans both grid columns */
.notes-inline-row {
  display: grid;
  grid-template-columns: repeat(var(--row-cols, 3), 1fr);
  gap: 16px;
  align-items: start;
}

/* ── Radio pill group ── */

.notes-radio-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.notes-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--speed);
  user-select: none;
}

.notes-pill:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.notes-pill.active {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
}

/* File attachments on the live call form. Mirrors the look of the CRM side
   panel attachments section but uses notes-* class names to stay scoped. */
.notes-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.notes-file-item {
  font-size: 13px;
  color: var(--text);
}
.notes-file-empty {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
}
.notes-file-add {
  align-self: flex-start;
  font-size: 13px;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--font-body);
}
.notes-file-add:hover {
  background: var(--gold-soft);
}

/* ── Quote attempts ── */

.notes-quotes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.notes-quote-attempt {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: var(--bg);
}

.notes-quote-attempt-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.notes-quote-carrier,
.notes-quote-product {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--text);
}
.notes-quote-product:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.notes-quote-remove {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
}

.notes-quote-remove:hover {
  border-color: var(--red);
  color: var(--red);
}

.notes-quote-grid-header {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 4px 6px;
}

.notes-quote-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notes-quote-row {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 10px;
  align-items: center;
}

.notes-quote-cell {
  position: relative;
  display: flex;
  align-items: center;
}

.notes-quote-prefix {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}

.notes-quote-suffix {
  position: absolute;
  right: 10px;
  color: var(--text-muted);
  font-size: 12px;
  pointer-events: none;
}

.notes-quote-cell input {
  padding-left: 22px;
}

.notes-quote-cell input.notes-quote-monthly {
  padding-right: 32px;
}

.notes-quote-select {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all var(--speed);
}

.notes-quote-select:hover {
  border-color: var(--gold);
}

.notes-quote-radio {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--text-dim);
  transition: all var(--speed);
}

.notes-quote-select.active {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.notes-quote-select.active .notes-quote-radio {
  background: var(--gold);
  border-color: var(--gold);
}

.notes-quote-approval-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notes-quote-approval {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text);
  font-style: italic;
}

.notes-quote-add-option {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--speed);
}

.notes-quote-add-option:hover {
  border-color: var(--gold);
  border-style: solid;
  color: var(--gold);
}

.notes-add-carrier {
  align-self: flex-start;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--speed);
}

.notes-add-carrier:hover {
  border-color: var(--gold);
  border-style: solid;
  color: var(--gold);
}

.notes-quoter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.notes-quoter-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wood);
  font-family: var(--font-body);
  text-decoration: none;
  transition: all var(--speed);
  margin-bottom: 4px;
}

.notes-quoter-link:hover {
  border-color: var(--wood);
  background: var(--wood-soft);
}

/* Copy-for-Slack button — sits beside Open Quoter, same pill shape. */
.notes-slack-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wood);
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--speed);
  margin-bottom: 4px;
}

.notes-slack-btn:hover {
  border-color: var(--wood);
  background: var(--wood-soft);
}

.notes-slack-btn.is-copied {
  border-color: var(--green, #3a7d44);
  color: var(--green, #3a7d44);
}

/* Open-in-Slack button — copies the block and launches Slack. Slack-branded
   aubergine so it reads as the "go to Slack" action, distinct from plain Copy. */
.notes-slack-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #4A154B;
  border: 1px solid #4A154B;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--speed);
  margin-bottom: 4px;
}

.notes-slack-open-btn:hover {
  background: #611f64;
  border-color: #611f64;
}

.notes-slack-open-btn.is-copied {
  background: var(--green, #3a7d44);
  border-color: var(--green, #3a7d44);
  color: #fff;
}

.notes-slack-icon {
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

.notes-slack-textarea {
  width: 100%;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  resize: vertical;
  white-space: pre;
}

/* ── Knockouts modal ── */

.notes-knockouts-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--shadow-rgb), 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
}

.notes-knockouts-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(720px, calc(100% - 48px));
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(var(--shadow-rgb), 0.25);
}

.notes-knockouts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}

.notes-knockouts-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.notes-knockouts-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.notes-knockouts-close:hover { color: var(--text); }

.notes-knockouts-disclaimer {
  padding: 8px 20px;
  background: var(--bg-warm);
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
}

.notes-knockouts-body {
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.notes-knockout-group {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 12px 14px;
}

.notes-knockout-pill {
  align-self: start;
  display: inline-block;
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  text-align: center;
}

.notes-knockout-content { display: flex; flex-direction: column; gap: 10px; }

.notes-knockout-desc {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

.notes-knockout-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: 13px;
}

.notes-knockout-subhead {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.notes-knockout-cols ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  line-height: 1.5;
}

.notes-knockout-carrier {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.notes-knockout-content ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  line-height: 1.5;
  font-size: 13px;
}

/* ── Knockouts matrix (carrier-evaluation modal) ── */

.notes-knockouts-matrix-dialog {
  width: min(1200px, calc(100% - 32px));
}

.notes-knockout-empty {
  padding: 24px 8px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
}

.notes-knockout-matrix-scroll {
  overflow: auto;
  max-height: calc(100vh - 260px);
  min-height: 120px;
}

.notes-knockout-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.notes-knockout-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-warm);
  /* border-collapse drops borders on a sticky cell — they stay behind with the
     table. box-shadow draws the rule on the sticky element itself. */
  box-shadow: inset 0 -2px 0 var(--border);
  padding: 9px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

.notes-knockout-matrix tbody tr:nth-child(even) td,
.notes-knockout-matrix tbody tr:nth-child(even) .notes-knockout-condition-col {
  background-color: var(--bg-warm);
}

.notes-knockout-matrix tbody tr:hover td,
.notes-knockout-matrix tbody tr:hover .notes-knockout-condition-col {
  background-color: var(--wood-soft, rgba(0, 0, 0, 0.05));
}

.notes-knockout-condition-col {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 2;
  font-weight: 600;
  color: var(--text);
  min-width: 180px;
  max-width: 220px;
  border-right: 1px solid var(--border-light);
}

.notes-knockout-matrix tbody .notes-knockout-condition-col {
  text-align: left;
  padding: 10px 14px 10px 12px;
  vertical-align: top;
  line-height: 1.35;
  font-size: 12px;
}

.notes-knockout-matrix thead .notes-knockout-condition-col {
  z-index: 4;
  background: var(--bg-warm);
}

.notes-knockout-cell {
  padding: 10px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  min-width: 150px;
  max-width: 200px;
}

.notes-knockout-cell-empty {
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

.notes-knockout-tier-pill {
  display: inline-block;
  color: white;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 7px;
  line-height: 1.3;
}

/* Toolbar above the matrix: the scope toggle on the left, with the legend and
   the not-evaluated note stacked in a column beside it. */
.notes-knockout-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.notes-knockout-toolbar-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.notes-knockout-scope {
  flex: 0 0 auto;
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elev, transparent);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.notes-knockout-scope:hover { border-color: var(--text-muted); }

/* Carriers the agent holds but the engine can't evaluate. Deliberately quiet
   and deliberately present — absence must never read as rejection. */
.notes-knockout-nodata-note {
  min-width: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Markers inside the class pill: ? needs an answer, * inferred, ~ contested.
   Each carries its reasoning in a title attribute, and the legend below spells
   them out — a tooltip nobody hovers is not documentation. */
.notes-knockout-flag {
  margin-left: 4px;
  font-weight: 700;
  opacity: 0.85;
  cursor: help;
}

.notes-knockout-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 18px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}
.notes-knockout-legend b {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-right: 2px;
}

/* One grid branch per line. The source writes them semicolon-separated, which
   at column width reads as if the FIRST branch is the answer — an agent
   glancing at "2yr: DECLINE; 4yr: GRADED" sees DECLINE.

   Every branch is indented by the same amount so the marker on the active one
   sits in its own gutter and the text stays left-aligned down the column.
   Without that the highlighted line jogs sideways and the block looks ragged. */
.notes-knockout-branch {
  position: relative;
  padding: 2px 0 2px 12px;
  opacity: 0.55;
}

/* The branch that actually fired for this client, given their timing. This is
   the line the pill came from. */
.notes-knockout-branch.is-active {
  opacity: 1;
  font-weight: 600;
  color: var(--text);
}
.notes-knockout-branch.is-active::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 2px;
  opacity: 0.75;
}

.notes-knockout-cell-text {
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.45;
}

.notes-knockout-ref {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed var(--border-light);
  font-size: 10.5px;
  font-style: italic;
  color: var(--text-muted);
}

.notes-knockout-cell-note {
  background: var(--bg-warm);
}

.notes-knockout-note {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.4;
}

.notes-knockout-nodata-col {
  color: var(--text-muted);
  font-style: italic;
}

.notes-knockout-nodata-cell {
  padding: 8px 10px;
  text-align: center;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  background: rgba(0, 0, 0, 0.02);
  min-width: 110px;
}

/* ── E-Apps modal ── */

.notes-eapps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Three children now — logo tile, carrier name, then the action. `gap` groups
   the tile and name as one unit and the action is pushed right by its own
   margin, rather than space-between spreading all three evenly across the row. */
.notes-eapps-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--font-body);
  text-decoration: none;
  color: var(--text);
  transition: all var(--speed);
}

.notes-eapps-open,
.notes-eapps-missing { margin-left: auto; }

.notes-eapps-row:hover {
  border-color: var(--wood);
  background: var(--wood-soft);
}

.notes-eapps-row-missing,
.notes-eapps-row-missing:hover {
  border-color: var(--border-light);
  background: var(--bg-warm);
  cursor: default;
}

.notes-eapps-carrier {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.notes-eapps-open {
  font-size: 12px;
  font-weight: 600;
  color: var(--wood);
  letter-spacing: 0.04em;
}

.notes-eapps-missing {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
}

/* The carrier chosen in the Options matrix — pulled to the top of the Text Code
   Guides list and highlighted so the agent grabs the right guide at a glance. */
.notes-eapps-row-selected,
.notes-eapps-row-selected:hover {
  border-color: var(--wood);
  background: var(--wood-soft);
  box-shadow: 0 0 0 1px var(--wood);
}

.notes-eapps-selected-tag {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--wood);
  color: var(--surface);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ── Tips modal (Product Options reference guide) ── */

.notes-tips-dialog {
  width: min(1100px, calc(100% - 32px));
}

.notes-tips-section + .notes-tips-section {
  margin-top: 6px;
}

.notes-tips-h {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Smart-highlight callout */
.notes-tips-callout {
  border: 1px solid var(--wood);
  background: var(--wood-soft);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.notes-tips-callout-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.notes-tips-callout-line {
  font-size: 13px;
  color: var(--text);
}

.notes-tips-stack {
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
}

/* Age / quote table reuses .notes-knockout-matrix base */
.notes-tips-table td,
.notes-tips-table th[scope='row'] {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  vertical-align: top;
}

.notes-tips-table th[scope='row'] {
  font-weight: 700;
  white-space: nowrap;
}

.notes-tips-quote {
  font-weight: 600;
  white-space: nowrap;
}

.notes-tips-dim {
  opacity: 0.4;
  font-weight: 400;
}

.notes-tips-row-active > th,
.notes-tips-row-active > td {
  background: var(--wood-soft);
}

.notes-tips-row-active > th[scope='row'] {
  box-shadow: inset 3px 0 0 var(--wood);
}

/* Write orders */
.notes-tips-orders {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.notes-tips-order {
  flex: 1 1 240px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface);
}

.notes-tips-order-active {
  border-color: var(--wood);
  background: var(--wood-soft);
}

.notes-tips-order-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.notes-tips-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.notes-tips-order-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.notes-tips-step-n {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wood);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Health levels */
.notes-tips-health {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.notes-tips-health-group {
  flex: 1 1 240px;
  border: 1px solid var(--border-light);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--surface);
}

.notes-tips-health-average {
  border-left-color: #2e9e5b;
}

.notes-tips-health-alarming {
  border-left-color: #d0494b;
}

.notes-tips-health-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.notes-tips-health-average .notes-tips-health-label {
  color: #2e9e5b;
}

.notes-tips-health-alarming .notes-tips-health-label {
  color: #d0494b;
}

.notes-tips-health-group ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--text);
}

/* Carrier matrix reuses .notes-knockout-matrix base */
.notes-tips-matrix td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
  vertical-align: top;
  min-width: 90px;
  line-height: 1.4;
}

/* Glossary table */
.notes-tips-glossary td,
.notes-tips-glossary th[scope='row'] {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
  vertical-align: top;
  line-height: 1.45;
}

.notes-tips-glossary th[scope='row'] {
  font-weight: 700;
  min-width: 160px;
  max-width: 220px;
}

.notes-tips-comm {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.notes-tips-comm-full {
  color: #2e9e5b;
  background: rgba(46, 158, 91, 0.12);
}

.notes-tips-comm-cut {
  color: #d0494b;
  background: rgba(208, 73, 75, 0.12);
}

/* ── Checkbox field ── */

.notes-checkbox-field { padding-top: 4px; }

.notes-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.notes-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--gold);
}

/* ── Confirm modal ── */

.notes-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--shadow-rgb), 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}

.notes-confirm-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 24px;
  max-width: 380px;
  width: calc(100% - 48px);
  box-shadow: 0 12px 40px rgba(var(--shadow-rgb),0.20);
}

.notes-confirm-dialog h3 {
  margin: 0 0 8px 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.notes-confirm-dialog p {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: var(--text-muted);
}

.notes-confirm-dialog ul {
  margin: 0 0 18px 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text);
}

.notes-confirm-dialog ul li { margin-bottom: 2px; }

.notes-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Condition checklist (compact, grouped, multiple categories per line) ── */
.notes-hx-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 28px;
  align-items: flex-start;
  margin-top: 4px;
}
/* Every group occupies exactly the same width whether collapsed or expanded.
   `flex-basis` alone wasn't enough — an expanded group's condition rows are
   wider than a collapsed header, and `flex-grow` let that content push the
   track, dropping the row from 4 columns to 3 the moment one opened. Fixing
   the basis and forbidding grow/shrink pins the column count, so opening a
   group never reflows the others out from under the agent mid-call. */
.notes-hx-group {
  flex: 0 0 240px;
  width: 240px;
  min-width: 0;      /* lets long condition labels ellipsize instead of widening the box */
  margin-bottom: 8px;
}
/* The header IS the toggle — the agent hits any part of it to open or close the
   category, which on a live call is a target they don't have to aim at. */
.notes-hx-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px 4px;
  margin-bottom: 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-light);
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wood);
}
.notes-hx-group-head:hover { background: var(--hover); }
.notes-hx-caret {
  flex: 0 0 auto;
  font-size: 9px;
  opacity: 0.7;
}
.notes-hx-group-name { flex: 1 1 auto; }
/* Count of conditions marked Yes — the whole point of collapsing is that the
   agent can still see, at a glance, which categories have something in them. */
.notes-hx-yes-count {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold);
}
.notes-hx-yes-count[hidden] { display: none; }
.notes-hx-group-body[hidden] { display: none; }
/* The Yes/No pills sit at the same x-position on every row of every category.
   `justify-content: space-between` used to push them flush right, so the gap
   after the label varied with the label's length and the column's width — the
   pills never lined up between categories. Now the label takes the remaining
   space and the pills are a fixed-width block at the end of it. */
.notes-hx-cond {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.notes-hx-cond-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.2;
  /* A long condition name truncates rather than shoving the pills out of line. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notes-hx-pills {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
}
/* Fixed pill width so Yes and No align down the column regardless of label. */
.notes-hx-pills .notes-pill {
  padding: 2px 0;
  width: 38px;
  text-align: center;
  font-size: 12px;
}

/* ── Condition search ────────────────────────────────────────────────────────
   A lens over the checklist. Everything below is temporary state that a cleared
   search removes — nothing here changes where anything sits, because an agent
   who learned this grid on their first call must find it unmoved on their
   hundredth. */
.notes-hx-search {
  position: relative;      /* anchors the no-match hint under the field */
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 300px;
  /* Sits with the title rather than drifting to the far edge — the header is
     `space-between`, so the auto margin is what keeps them together. */
  margin: 0 auto 0 16px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  cursor: text;
  /* The header sets `user-select: none` for its collapse gesture; text in a
     search field has to stay selectable. */
  user-select: text;
}
.notes-hx-search:focus-within {
  border-color: var(--gold);
}
.notes-hx-search-icon {
  flex: 0 0 auto;
  font-size: 12px;
  opacity: 0.55;
}
.notes-hx-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 2px 0;
  background: none;
  font-size: 13px;
  color: var(--text);
}
.notes-hx-search-input:focus { outline: none; }
.notes-hx-search-clear {
  flex: 0 0 auto;
  border: 0;
  padding: 0 2px;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.notes-hx-search-clear[hidden] { display: none; }

/* Nothing matched. Sits under the field rather than in the flow, so the header
   height never changes as the agent types. */
.notes-hx-search-hint {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 3;
  padding: 6px 10px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  white-space: normal;
}
.notes-hx-search-hint[hidden] { display: none; }
.notes-hx-hint-add {
  border: 0;
  padding: 0;
  background: none;
  color: var(--gold);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Search hides with the body — a search field over a closed section is a
   control with nothing to act on. */
.notes-section.collapsed .notes-hx-search { display: none; }

/* Dimmed, never disabled. Opacity says "not what you asked for"; a grey would
   say "you can't have this", and every one of these is still one click away. */
.notes-hx-cond.is-dim,
.notes-hx-group.is-dim > .notes-hx-group-head {
  opacity: 0.32;
}
.notes-hx-group.is-dim > .notes-hx-group-head:hover { opacity: 0.6; }

/* The row Enter will record. Drawn before the keystroke can reach it, and
   scrolled into view when it changes — a keyboard shortcut must never commit
   something off screen.

   Marked from the inside (a soft fill and a bar down the left edge) rather than
   with an outward ring: the rows sit 2px apart, and a ring would spill onto its
   neighbours and make the armed row look like it had grown. */
.notes-hx-cond.is-armed {
  border-radius: 4px;
  background: var(--gold-soft);
  box-shadow: inset 3px 0 0 var(--gold);
}
/* Why this row matched when the agent didn't type its name — "· Eliquis". */
.notes-hx-cond-via {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--gold);
}
.notes-hx-cond-via:empty { display: none; }

/* Where the words went when there was no match for them. */
.notes-fields textarea.is-just-filled {
  box-shadow: 0 0 0 2px var(--gold);
  transition: box-shadow 0.25s ease;
}

/* ── Per-condition medications + timeframe (medical screen) ── */
.notes-condition-meds {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
/* No conditions set to Yes → the slot is empty; collapse it entirely. */
.notes-condition-meds:empty { display: none; }

.notes-condition-meds-head {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.notes-condition-meds-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

/* Undo for a condition pill hit by mistake. Deliberately quiet — it removes an
   answer from the record, so it should not compete with the medication and
   timing controls the agent is actually here to use. It comes forward on hover
   over its own row, and turns red only under the pointer. */
.notes-condition-meds-x {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.notes-condition-meds-row:hover .notes-condition-meds-x { opacity: 0.75; }
.notes-condition-meds-x:hover,
.notes-condition-meds-x:focus-visible {
  opacity: 1;
  background: var(--red-soft);
  color: var(--red);
}

.notes-condition-meds-name {
  flex: 0 0 auto;
  min-width: 150px;
  padding-top: 6px;
  font-size: 13px;
  color: var(--text);
}

.notes-condition-meds-picks {
  display: flex;
  flex: 1 1 220px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Dropdown-that-adds-pills field (tobacco forms). Reuses .notes-med-pill so a
   chosen value looks identical to a chosen medication elsewhere on the form. */
.notes-multi-select {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.notes-multi-select select { flex: 1 1 120px; min-width: 110px; }

.notes-med-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--gold);
}

.notes-med-pill-x {
  border: none;
  background: none;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--gold);
  cursor: pointer;
  opacity: 0.7;
}
.notes-med-pill-x:hover { opacity: 1; }

/* `.notes-condition-extra-select` belongs here. It was omitted, so the
   per-condition follow-up dropdowns (A1c on Diabetes, complications on Diabetic
   Complications) rendered as unstyled browser selects that took no part in the
   flex sizing — which is why the Diabetes row in particular sat unevenly while
   every row without an extra looked fine. */
.notes-condition-meds-select,
.notes-condition-meds-other,
.notes-condition-extra-select,
.notes-condition-timing-select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  /* Share the available width and shrink below their content size so the two
     dropdowns always stay on one line side by side. */
  flex: 1 1 0;
  min-width: 0;
}
.notes-condition-meds-other.hidden { display: none; }

/* The medications + "how long ago?" dropdowns sit inline, side by side, filling
   the row's remaining width and resizing as space allows. */
.notes-condition-meds-dropdowns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex: 1 1 240px;
  min-width: 0;
}
/* Every dropdown in the group takes an equal share, so a row with an extra
   follow-up divides into three even columns rather than two even ones plus a
   leftover. */
.notes-condition-meds-dropdowns > select,
.notes-condition-meds-dropdowns > input {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Associated phone numbers (live-call form + CRM panel) ── */

.notes-assoc {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}
.notes-assoc-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.notes-assoc-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.notes-assoc-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.notes-assoc-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 4px 0 10px;
}
.notes-assoc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-light);
}
.notes-assoc-inputs {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 240px;
  flex-wrap: wrap;
}
.notes-assoc-input {
  flex: 1;
  min-width: 120px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.notes-assoc-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.notes-assoc-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.notes-assoc-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.notes-assoc-remove:hover { color: var(--red); }
.notes-assoc-add {
  margin-top: 10px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
}
.notes-assoc-add:hover {
  border-color: var(--accent, var(--gold));
  color: var(--text);
}

/* ── Phone-numbers field (live-call form): collapsed = plain, ＋ expands ── */

/* Collapsed: slot + host pass through so the two fields align with the form
   grid exactly like before. Expanded: the host becomes a full-width block. */
[data-phone-numbers] { display: contents; }
.notes-phones { display: contents; }

/* With an inline Smoker pill, the collapsed row (Phone | Textable | Smoker)
   becomes its own 3-column grid spanning the full width, so all three sit on
   one line instead of Smoker wrapping under Phone. Expanded (the pn-table
   view) still falls back to the block layout below. */
.notes-phones.pn-has-smoker:not(:has(.pn-table)) {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px 16px;
  align-items: start;
}

/* With inline Height + Weight, the collapsed row is Phone | Textable | Height |
   Weight on one line. Expanded (pn-table) falls back to the block layout, with
   Height/Weight in their own row beneath the table. */
.notes-phones.pn-has-hw:not(:has(.pn-table)),
.notes-phones.pn-has-name:not(:has(.pn-table)) {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px 16px;
  align-items: start;
}
/* Height + Weight inline: Phone | Textable | Height | Weight. */
.notes-phones.pn-has-hw:not(:has(.pn-table)) {
  grid-template-columns: 2fr 1fr 1fr 1fr;
}
/* Full Name added too: Name | Phone | Textable | Height | Weight. */
.notes-phones.pn-has-name.pn-has-hw:not(:has(.pn-table)) {
  grid-template-columns: 1.3fr 1.5fr 0.7fr 1fr 1fr;
}
.pn-hw { width: 100%; }
.pn-name-input { width: 100%; }
.pn-hw-expanded {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}
.pn-hw-expanded .pn-hw-field { flex: 1 1 0; min-width: 0; }
.pn-name-expanded { margin-bottom: 12px; }

.pn-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  width: 20px;
  height: 20px;
  line-height: 1;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  vertical-align: middle;
}
.pn-toggle:hover { border-color: var(--gold); color: var(--text); }

/* Expanded state spans the full width of the form grid. */
.notes-phones:has(.pn-table) { display: block; grid-column: 1 / -1; }

.pn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pn-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pn-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.5fr) minmax(90px, 1fr) auto 44px 28px;
  gap: 8px;
  align-items: center;
}
.pn-row-head {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pn-row-head span { padding: 0 2px; }

.pn-input {
  width: 100%;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}

.pn-textable { display: inline-flex; gap: 4px; }
.pn-textable .notes-pill { padding: 4px 10px; font-size: 12px; }

.pn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pn-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.pn-remove:hover { color: var(--red); }
.pn-remove-spacer { display: inline-block; }

/* Collapsed Textable row: cancel the grid so the pills sit naturally. */
.pn-collapsed-tx.pn-row { display: block; }

.pn-add-row {
  margin-top: 10px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
}
.pn-add-row:hover { border-color: var(--gold); color: var(--text); }

/* ── IUL illustration block ───────────────────────────────────────────────────
   The IUL live-call form's counterpart to the FEX quotes matrix. It reuses the
   .notes-quote-* attempt card, money cell and approval row wholesale; only the
   label + control rows below are specific to it. See
   src/js/components/notes-iul-illustration.js. */

.notes-illus-field {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.notes-illus-field.hidden { display: none; }

.notes-illus-label {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.notes-illus-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.notes-illus-num {
  width: 100%;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text);
}

.notes-illus-num:focus {
  outline: none;
  border-color: var(--gold);
}

/* The money rows put the field inside a .notes-quote-cell so the $ / /mo
   affixes land the same way they do in the FEX matrix. */
.notes-illus-field .notes-quote-cell { width: 100%; }
.notes-illus-field .notes-quote-cell .notes-illus-num { padding-left: 22px; }
.notes-illus-field .notes-quote-cell .notes-quote-suffix ~ .notes-illus-num,
.notes-illus-field .notes-quote-cell .notes-illus-num:not(:last-child) { padding-right: 36px; }

.notes-illus-approval {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text);
  font-style: italic;
}

/* Hide a whole custom block (quotes matrix vs. illustration) when the Pivot to
   Whole Life radio flips — see wireConditionals in components/notes-section.js. */
.notes-custom-after.hidden { display: none; }

@media (max-width: 720px) {
  .notes-illus-field {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ── Underwriting engine (Ship 5) ─────────────────────────────────────────────
   Sits above Product Options' fields, shaped like the quotes block beside it so
   the two read as one surface. Collapsible, like every other section. */

.notes-engine {
  border: 1px solid var(--cb-edge, var(--border));
  border-left: 3px solid var(--cb-ink, var(--gold));
  border-radius: 6px;
  background: var(--cb-panel, var(--bg-warm));
  margin: 0 0 14px;
  overflow: hidden;

  /* ── The recommended carrier's colours ──
     applyCarrierBrand() stamps six --cb-*-on-light / --cb-*-on-dark properties
     on this element per repaint. These three lines choose which half applies,
     and every rule below reads only the resolved name — so the panel re-colours
     wholesale when the pick changes, and falls back to the app's own gold when
     there is no pick at all (an error, or no carrier that can write the client).

     Default is the ON-LIGHT set. That is correct for every appearance EXCEPT
     Arsenal, which is handled just below: this panel inverts, so under the LIGHT
     Arsenal theme it is a DARK card, and a 30%-lightness navy on it would be
     unreadable. Arsenal Dark inverts the other way to a light card and keeps
     the default. */
  --cb-ink:   var(--cb-ink-on-light);
  --cb-edge:  var(--cb-edge-on-light);
  --cb-chip:  var(--cb-chip-on-light);
  --cb-card:  var(--cb-card-on-light);
  --cb-panel: var(--cb-panel-on-light);
  --cb-head:  var(--cb-head-on-light);
}

:root[data-theme="arsenal"] .notes-engine {
  --cb-ink:   var(--cb-ink-on-dark);
  --cb-edge:  var(--cb-edge-on-dark);
  --cb-chip:  var(--cb-chip-on-dark);
  --cb-card:  var(--cb-card-on-dark);
  --cb-panel: var(--cb-panel-on-dark);
  --cb-head:  var(--cb-head-on-dark);
}

/* ── The engine panel runs in the opposite appearance ────────────────────────
   Under Arsenal this panel is dark; under Arsenal Dark it is light. It is the
   one place on the call form that is a machine's opinion rather than the
   agent's own notes, and inverting it says so before a word is read.

   This works by remapping the live tokens onto the --inv-* set that each
   appearance carries (see variables.css). Custom properties inherit, so every
   rule inside this panel — thirty-odd of them, plus the confidence bands and
   the tier pills — re-resolves against the other palette without a single one
   of them being touched or even knowing this happened. That is the whole
   reason to spend tokens on a design system.

   Only the two Arsenal appearances invert. The other four have no --inv-*
   palette and are left exactly as they were. */
:root[data-theme="arsenal"] .notes-engine,
:root[data-theme="arsenal-dark"] .notes-engine {
  --bg:           var(--inv-bg);
  --bg-warm:      var(--inv-bg-warm);
  --surface:      var(--inv-surface);
  --border:       var(--inv-border);
  --border-light: var(--inv-border-light);
  --text:         var(--inv-text);
  --text-muted:   var(--inv-text-muted);
  --text-dim:     var(--inv-text-dim);
  --gold:         var(--inv-gold);
  --gold-soft:    var(--inv-gold-soft);
  --gold-hover:   var(--inv-gold-hover);
  --green:        var(--inv-green);
  --green-soft:   var(--inv-green-soft);
  --red:          var(--inv-red);
  --red-soft:     var(--inv-red-soft);
  --sand:         var(--inv-sand);
  --sand-soft:    var(--inv-sand-soft);
  --wood:         var(--inv-wood);
  --wood-soft:    var(--inv-wood-soft);
  --hover:        var(--inv-hover);
  --shadow-rgb:   var(--inv-shadow-rgb);

  /* The panel now sits on the opposite surface, so it needs its own ground
     rather than inheriting the page's. This selector outranks the base
     `.notes-engine` rule, so the carrier ground has to be repeated here or the
     branding would silently switch off under exactly the two themes that
     invert. */
  background: var(--cb-panel, var(--surface));
  color: var(--text);

  /* The remaining half of "hard to look at" is the edge itself. Tempering the
     palette took the step down from ~17:1 to ~11.5:1; a soft drop shadow and a
     slightly larger radius do the rest, by making the panel read as a card
     resting ON the page rather than a hole cut THROUGH it. A hard rectangular
     boundary between two luminances is what the eye keeps re-focusing on. */
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(var(--shadow-rgb), 0.28);
}

.notes-engine-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--cb-head, var(--surface));
  border-bottom: 1px solid var(--cb-edge, var(--border-light));
}
.notes-engine-title {
  font-weight: 600; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cb-ink, var(--wood));
}
.notes-engine-head-tools { margin-left: auto; display: flex; gap: 6px; }
.notes-engine-head-tools button {
  border: 1px solid var(--cb-edge, var(--border)); background: var(--cb-card, var(--surface));
  border-radius: 4px; padding: 2px 8px; font-size: 11px;
  color: var(--cb-ink, var(--text-muted)); cursor: pointer;
}
.notes-engine-head-tools button:hover {
  background: var(--cb-chip, var(--surface));
  border-color: var(--cb-ink, var(--gold));
}

.notes-engine-body { padding: 10px; }
/* Collapsed keeps the header, so the agent can always get it back. */
.notes-engine.is-collapsed .notes-engine-body { display: none; }
.notes-engine.is-collapsed .notes-engine-fold { transform: rotate(-90deg); }

/* ── Client snapshot ── */
.notes-engine-snapshot {
  font-size: 11px; color: var(--text-muted);
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px dashed var(--cb-edge, var(--border-light));
}
.notes-engine-snapshot .sep { margin: 0 6px; opacity: .45; }
/* An unanswered input has to LOOK unanswered, not merely absent. */
.notes-engine-missing { color: var(--red); font-style: italic; }

/* ── The pick ── */
/* The card carries a wash of the carrier's colour so the recommendation block
   itself is visibly branded, not just its accents. Deliberately very pale — the
   money line and the reason rows sit on it and have to stay legible. */
.notes-engine-pick {
  border: 1px solid var(--cb-edge, var(--border-light)); border-radius: 5px;
  background: var(--cb-card, var(--surface)); padding: 10px;
}

/* Info on the left, the carrier's own button anchored top-right opposite the
   name. align-items: flex-start keeps the button pinned to the top rather than
   floating to the middle of a tall info column. */
.notes-engine-pick-top {
  display: flex; align-items: flex-start; gap: 14px;
}
.notes-engine-pick-info { flex: 1; min-width: 0; }

.notes-engine-pick-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notes-engine-rank { font-weight: 700; color: var(--cb-ink, var(--gold)); font-size: 13px; }
.notes-engine-carrier { font-weight: 600; font-size: 14px; color: var(--text); }
.notes-engine-tier, .notes-engine-class {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 3px; text-transform: uppercase;
}
.notes-engine-tier  { background: var(--wood); color: #fff; }
/* A step stronger than the card wash behind it, or the pill would disappear. */
.notes-engine-class {
  background: var(--cb-chip, var(--gold-soft));
  color: var(--cb-ink, var(--wood));
}
.notes-engine-variant { font-size: 13px; color: var(--text); margin-top: 2px; }
.notes-engine-money { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
/* ── Confidence ── */
/* A <button>, not a <div> — clicking the score opens the Explanation and the
   questions that would raise it. Reset to look exactly as it did before, then
   given a hover state so it reads as clickable at all. */
.notes-engine-conf {
  display: flex; align-items: baseline; gap: 7px; margin-top: 7px;
  padding: 5px 8px; border-radius: 4px; background: var(--cb-chip, var(--bg-warm));
  width: fit-content;
  border: 1px solid transparent;
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.notes-engine-conf:hover { border-color: var(--border); }
.notes-engine-conf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Labelled: a bare number beside a carrier name reads as a rating OF the
   carrier. The bar is gone for the same reason — it implied a measurement. */
.notes-engine-conf-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
}
.notes-engine-conf-num { font-size: 16px; font-weight: 700; color: var(--text); }
.notes-engine-conf-band {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
}
.notes-engine-conf[data-band="High"]     .notes-engine-conf-num { color: #3f7a4f; }
.notes-engine-conf[data-band="Medium"]   .notes-engine-conf-num { color: #b06a2c; }
.notes-engine-conf[data-band="Low"]      .notes-engine-conf-num { color: #b0442c; }
.notes-engine-conf[data-band="Very Low"] .notes-engine-conf-num { color: var(--red); }
.notes-engine-conf-cap { font-size: 10px; color: var(--text-dim); cursor: help; }

/* ── Pick tools ── */
.notes-engine-pick-tools,
.notes-engine-pick-foot {
  display: flex; align-items: center; gap: 6px;
  margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--cb-edge, var(--border-light)); flex-wrap: wrap;
}
.notes-engine-pick-tools-right { margin-left: auto; display: flex; gap: 6px; }
/* The footer row (Backups, This is wrong) is the same KIND of control as the
   per-carrier row above it, so it gets the same chrome. It was rendering as
   bare text because the styling was scoped to .notes-engine-pick-tools alone. */
.notes-engine-pick-tools button,
.notes-engine-pick-foot button {
  border: 1px solid var(--cb-edge, var(--border)); background: transparent;
  border-radius: 4px; padding: 3px 9px; font-size: 11px;
  color: var(--cb-ink, var(--text-muted)); cursor: pointer;
}
.notes-engine-pick-tools button:hover,
.notes-engine-pick-foot button:hover {
  background: var(--cb-chip, var(--surface));
  border-color: var(--cb-ink, var(--gold));
}
/* The primary action, so it carries the carrier's ink at full strength while
   its neighbours sit on the hairline. */
.notes-engine-paste {
  border-color: var(--cb-ink, var(--gold)) !important;
  color: var(--cb-ink, var(--wood)) !important;
  font-weight: 600;
}
/* Stays red under every carrier. "This is wrong" reports a fault, and a fault
   is not part of the brand palette — semantic colour outranks decoration. */
.notes-engine-wrong:hover { border-color: var(--red) !important; color: var(--red) !important; }

/* ── Quoter button (sits to the LEFT of Paste into options) ──
   Text label by default; the carrier's own button artwork replaces it once
   src/assets/carrier-buttons/{slug}.png loads. `is-branded` is set by
   wireCarrierImages() on the anchor, not by :has(), so the swap works the same
   in every embedded webview. */
/* Top-right of the pick card, and the biggest control on it — this is the next
   thing the agent does after reading the recommendation.
   The chrome is written out rather than inherited from
   `.notes-engine-pick-tools button`: this control is an <a> when it has a
   destination (so it gets middle-click, open-in-new-tab and a real status-bar
   URL) and only a <button> in the disabled case, and that element selector
   reaches neither. */
.notes-engine-quoter {
  flex: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cb-ink, var(--text-muted));
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
}
.notes-engine-quoter:hover { border-color: var(--cb-ink, var(--gold)); }

.notes-engine-quoter[disabled] { opacity: .45; cursor: default; }
.notes-engine-quoter[disabled]:hover { color: var(--text-muted); border-color: var(--border); }

/* Fixed HEIGHT, natural width. The source files are cropped tight to the button
   with a transparent surround, so each one keeps its own proportions — these
   range from about 1.6:1 (Transamerica) to 3.7:1 (Americo), and forcing them
   into one box would either squash the wide ones or crop the narrow ones.
   max-width is a guard against a future file with an extreme aspect pushing the
   rest of the tool row off the card. */
.carrier-btn-img {
  display: none;
  height: 40px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
}

/* Artwork present → show it and drop the text, and strip the generic button
   chrome so the supplied image IS the button rather than a picture inside one.
   `overflow: hidden` + a radius keeps the cropped edges looking deliberate. */
.carrier-btn.is-branded {
  padding: 0 !important;
  border-color: transparent !important;
  background: none !important;
  border-radius: 6px;
  overflow: hidden;
}
.carrier-btn.is-branded .carrier-btn-img   { display: block; }
.carrier-btn.is-branded .carrier-btn-label { display: none; }
.carrier-btn.is-branded:hover { filter: brightness(1.06); }

/* The one-sentence answer, above the itemised reasons. Amber when the engine
   could not reach a class at all — there it is not a summary of the reasons,
   it is a statement that there is no decision yet. */
.notes-engine-headline {
  font-size: 11.5px; line-height: 1.5; color: var(--text);
  margin-bottom: 8px; padding-bottom: 7px;
  border-bottom: 1px solid var(--cb-edge, var(--border-light));
}
.notes-engine-headline.is-undecided { color: #b06a2c; font-weight: 600; }

.notes-engine-why-body, .notes-engine-backups-body { margin-top: 9px; }
.notes-engine-sub {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); margin: 9px 0 4px;
}
.notes-engine-why-body ul, .notes-engine-notes { font-size: 11px; color: var(--text-muted); }
.notes-engine-why-body li { margin-bottom: 4px; line-height: 1.45; }
.notes-engine-verbatim {
  display: inline-block; margin-left: 5px; padding: 1px 5px;
  background: var(--bg-warm); border: 1px solid var(--border-light);
  border-radius: 3px; font-size: 10px; color: var(--wood);
}
.notes-engine-ruleid { margin-left: 5px; font-size: 9px; color: var(--text-dim); }
.notes-engine-caution { color: #b06a2c; }
.notes-engine-ledger b { color: var(--red); }

/* ── A tie splits the card ──
   Carriers equal on comp, advance and payout are equal. Stacking one above the
   other still reads as a ranking whatever the caption says, so they sit side by
   side with a divider and neither is "the answer". Collapses to a single column
   on a narrow panel, where side-by-side would be unreadable. */
.notes-engine-pick-cols { display: block; }
.notes-engine-pick.is-split .notes-engine-pick-cols {
  display: grid;
  grid-template-columns: repeat(var(--pick-cols, 2), minmax(0, 1fr));
  gap: 0;
}
.notes-engine-pick.is-split .notes-engine-pick-col + .notes-engine-pick-col {
  border-left: 1px solid var(--cb-edge, var(--border-light));
  padding-left: 14px;
  margin-left: 14px;
}
@media (max-width: 720px) {
  .notes-engine-pick.is-split .notes-engine-pick-cols { grid-template-columns: 1fr; }
  .notes-engine-pick.is-split .notes-engine-pick-col + .notes-engine-pick-col {
    border-left: 0; padding-left: 0; margin-left: 0;
    border-top: 1px solid var(--cb-edge, var(--border-light));
    padding-top: 12px; margin-top: 12px;
  }
}
.notes-engine-tie-note {
  margin-top: 10px; padding: 7px 10px; border-radius: 5px;
  font-size: 11px; line-height: 1.45; color: var(--text-muted);
  background: var(--bg-warm); border: 1px solid var(--border-light);
}
.notes-engine-tie-note b { color: var(--text); }
.notes-engine-pick-foot .notes-engine-pick-tools-right { margin-left: auto; }

/* ── The columns line up at the bottom ──
   Americo writes eight term products and Mutual of Omaha two, so the columns
   are different heights and their Explanation/Paste rows landed at different
   places on the page — which reads as a rendering fault rather than as two
   equal options. The grid already stretches the columns to equal height; making
   each one a flex column and pushing the tools row down with `margin-top: auto`
   pins those rows to the same line whatever is above them. */
.notes-engine-pick.is-split .notes-engine-pick-col {
  display: flex; flex-direction: column;
}
/* Pinned to the bottom only while both explanations are CLOSED, which is the
   state the agent reads first and the one where a ragged pair of button rows
   looks like a rendering fault. With one open the columns are honestly
   different lengths, and holding the other column's buttons at the very bottom
   just opens a gap. */
.notes-engine-pick.is-split:not(.has-open-why) .notes-engine-pick-tools { margin-top: auto; }

/* ── Every product a carrier can write (mortgage protection) ──
   All of a carrier's term products share one underwriting outcome, so they are
   alternatives rather than a ranking. Comp leads each row because that is the
   only thing separating them, and the best-paying one is emphasised. */
.notes-engine-prod-count {
  margin-left: 6px; font-size: 10px; color: var(--text-dim); font-weight: 600;
}
.notes-engine-prods { margin: 4px 0 2px; padding: 0; list-style: none; }
.notes-engine-prod {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 10px; color: var(--text-muted); padding: 1px 0;
}
.notes-engine-prod-comp {
  min-width: 34px; text-align: right; font-weight: 700; color: var(--text-dim);
}
/* A product with no published comp reads as the em-dash in the comp column;
   the name is muted so the row does not look like a live figure. */
.notes-engine-prod-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The split halves the available width, so the confidence chip has to stop
   wrapping onto three lines. */
.notes-engine-pick.is-split .notes-engine-conf { flex-wrap: nowrap; font-size: 10px; }
.notes-engine-pick.is-split .notes-engine-conf-label { display: none; }
.notes-engine-pick.is-split .notes-engine-conf-num::before {
  content: 'Confidence '; font-weight: 400; font-size: 9px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim);
}
/* The split halves the column width, so the carrier artwork has to scale rather
   than be cropped — `.carrier-btn.is-branded` sets overflow:hidden, which meant
   a max-width simply sliced "AMERICO" in half. Shrink the IMAGE and let the
   button size to it. */
.notes-engine-pick.is-split .carrier-btn-img { height: 30px; max-width: 118px; }

/* A joint rank, said out loud on the card rather than left to the numbers. */
.notes-engine-tied {
  margin-left: 8px; padding: 1px 7px; border-radius: 10px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); border: 1px solid var(--border-light);
}

/* ── Tobacco rate split (mortgage protection) ──
   Rendered only when the term carriers disagree about the client's rate class,
   which is often the whole recommendation on a cigar or pipe smoker. Borrows
   the backup list's row shape so it reads as part of the same panel. */
.notes-engine-tsplit-list li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0; font-size: 11px;
  border-bottom: 1px solid var(--cb-edge, var(--border-light));
}
.notes-engine-tsplit-carrier { font-weight: 600; color: var(--text); min-width: 130px; }
.notes-engine-tsplit-rate {
  padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700;
  border: 1px solid var(--border-light); white-space: nowrap;
}
.notes-engine-tsplit-rate[data-rate="Smoker"]     { color: var(--red); }
.notes-engine-tsplit-rate[data-rate="Non-smoker"] { color: var(--green, #2e7d4f); }
.notes-engine-tsplit-rate[data-rate="unknown"]    { color: #b06a2c; }
.notes-engine-tsplit-why {
  color: var(--text-dim); font-size: 10px; line-height: 1.4; margin-left: auto;
  text-align: right; max-width: 60%;
}

/* ── Backups ── */
.notes-engine-backup-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: 11px;
  border-bottom: 1px solid var(--cb-edge, var(--border-light));
}
.notes-engine-brank { color: var(--text-dim); font-weight: 600; }
.notes-engine-bcarrier { font-weight: 600; color: var(--text); min-width: 130px; }
.notes-engine-bclass { color: var(--text-muted); }
.notes-engine-bmoney { color: var(--text-dim); font-size: 10px; margin-left: auto; }
.notes-engine-bconf { font-weight: 700; color: var(--text); }
.notes-engine-paste-backup {
  border: 1px solid var(--cb-edge, var(--border));
  background: var(--cb-card, var(--surface));
  color: var(--cb-ink, var(--text-muted));
  border-radius: 3px; padding: 1px 7px; font-size: 10px; cursor: pointer;
}
.notes-engine-paste-backup:hover { background: var(--cb-chip, var(--surface)); }

/* ── Callouts: the money the ranking deliberately did NOT act on ── */
/* One banner, however many reasons. Each reason is a row inside it; a divider
   separates them so they don't run together, but they stay visibly one block. */
.notes-engine-callout {
  margin-top: 9px; padding: 8px 10px; font-size: 11px;
  background: var(--cb-chip, var(--gold-soft));
  border-left: 3px solid var(--cb-ink, var(--gold));
  border-radius: 4px; color: var(--cb-ink, var(--wood)); line-height: 1.45;
}
.notes-engine-callout-row + .notes-engine-callout-row {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid rgba(var(--shadow-rgb), 0.10);
}

/* ── Follow-up chips ── */
.notes-engine-followups ul { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.notes-engine-followups li { display: flex; align-items: center; gap: 3px; }
.notes-engine-chip {
  border: 1px dashed var(--cb-ink, var(--gold)); background: var(--cb-card, var(--surface));
  border-radius: 12px; padding: 3px 10px; font-size: 11px;
  color: var(--cb-ink, var(--wood)); cursor: pointer; text-align: left;
}
.notes-engine-chip:hover { background: var(--cb-chip, var(--gold-soft)); }
.notes-engine-chip-pts { font-size: 9px; color: var(--text-dim); }

/* The field a chip jumped to, so the agent's eye lands in the right place. */
.notes-engine-flash { animation: notes-engine-flash 1.2s ease-out; }
@keyframes notes-engine-flash {
  0%, 40% { background: var(--gold-soft); }
  100%    { background: transparent; }
}

/* ── Folders, partial results, dead ends ── */
.notes-engine-folder { margin-top: 8px; font-size: 11px; }
.notes-engine-folder summary { cursor: pointer; color: var(--cb-ink, var(--text-muted)); padding: 3px 0; }
.notes-engine-folder summary:hover { color: var(--text); }
.notes-engine-folder ul { padding: 4px 0 4px 14px; color: var(--text-dim); }
.notes-engine-folder li { margin-bottom: 3px; line-height: 1.4; }

.notes-engine-notes { margin-top: 8px; font-size: 11px; color: var(--text-dim); line-height: 1.45; }

/* Point-of-reliance disclaimer (notes-engine.js shell()). Sits outside
   .notes-engine-body so it reads as a footer on the panel rather than a finding
   inside it — the same reason it lives in the shell. Deliberately quiet: an
   agent mid-call should register it without it competing with the
   recommendation. Hidden when collapsed, where there is no visible
   recommendation to disclaim and it would dangle under a bare header. */
.notes-engine-legal {
  padding: 7px 10px 8px;
  border-top: 1px solid var(--border-light);
  font-size: 10.5px; line-height: 1.45; color: var(--text-dim);
}
.notes-engine.is-collapsed .notes-engine-legal { display: none; }
.notes-engine-legal a { color: var(--text-muted); text-decoration: underline; }
.notes-engine-legal a:hover { color: var(--text); }

/* A crash must never be mistakable for a rejection, so these read as tool
   faults rather than findings about the client. */
.notes-engine-partial, .notes-engine-error, .notes-engine-none, .notes-engine-unsupported {
  padding: 9px 11px; border-radius: 4px; font-size: 11.5px; line-height: 1.5;
  background: var(--bg-warm); border-left: 3px solid var(--red); color: var(--text);
}
.notes-engine-partial { margin-bottom: 9px; }
.notes-engine-unsupported { border-left-color: var(--gold); }
.notes-engine-error-detail { margin-top: 5px; font-size: 10px; color: var(--text-dim); }

/* A question with no field to jump to is plain text, not a button. Rendering
   both as buttons meant half of them did nothing when clicked, which is worse
   than not looking clickable at all. */
.notes-engine-ask {
  font-size: 11px; padding: 3px 10px; border-radius: 12px;
  background: var(--bg-warm); border: 1px solid var(--border-light);
  color: var(--text-muted); cursor: help;
}

/* ── Answering an engine question in place ──
   Most engine questions have no field anywhere on the form, so the chip carries
   its own control. The row is a flex line: question, then the control, then the
   confidence points it is worth. `cursor: help` is dropped on these — the text
   is a prompt to read out, not a tooltip. */
.notes-engine-ask-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 5px;
}
.notes-engine-ask-row .notes-engine-ask { cursor: default; flex: 1 1 auto; }

/* The question that could bring a ruled-out carrier back. Marked because it is
   a different KIND of answer from the rest: not "this sharpens the score" but
   "this decides whether there is a recommendation at all". */
.notes-engine-rescue {
  padding: 1px 7px; border-radius: 10px; white-space: nowrap;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #b06a2c; border: 1px solid currentColor;
}
.notes-engine-ask-row.is-rescue .notes-engine-ask { color: var(--text); }

.notes-engine-answer { display: inline-flex; }
/* ─── THEME TOKENS, NOT A HARD-CODED WHITE ────────────────────────────────
   These used `var(--bg-card, #fff)`. There is no `--bg-card` anywhere in the
   variable set, so every theme fell through to a literal white — while `color`
   resolved to the theme's own `--text`, which is near-white in the dark themes.
   Light grey on white, unreadable, and worst inside the native dropdown list
   where the option rows inherit it.
   `--surface` and `--text` are defined by every theme, so they always contrast. */
.notes-engine-answer-pill {
  font: inherit; font-size: 10px; font-weight: 600; line-height: 1;
  padding: 4px 9px; cursor: pointer;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border-light);
}
.notes-engine-answer-pill:first-child { border-radius: 11px 0 0 11px; }
.notes-engine-answer-pill:last-child  { border-radius: 0 11px 11px 0; margin-left: -1px; }
.notes-engine-answer-pill:hover {
  background: var(--accent-soft, var(--bg-warm)); color: var(--text);
}

.notes-engine-answer-select,
.notes-engine-answer-input {
  font: inherit; font-size: 10px; padding: 3px 6px;
  border-radius: 4px; border: 1px solid var(--border-light);
  background: var(--surface); color: var(--text); max-width: 180px;
}
/* The dropdown list is painted by the OS, not by the page, and it does not
   inherit the select's colours — it has to be told separately or the options
   render on the platform default (white) with the page's text colour on top. */
.notes-engine-answer-select option {
  background: var(--surface);
  color: var(--text);
}
/* `color-scheme` is set per THEME on :root (variables.css), so these inherit it
   and the native list chrome follows the theme rather than the OS default. */
.notes-engine-answer-select:focus,
.notes-engine-answer-input:focus { outline: 2px solid var(--accent, #4a5fd0); outline-offset: 1px; }

.notes-engine-snapshot i { font-style: normal; color: var(--text-dim); }

.notes-engine-folder-note {
  list-style: none; margin-top: 6px; padding-top: 5px;
  border-top: 1px solid var(--border-light);
  color: var(--text-dim); font-style: italic;
}

/* Reasons as one scannable row each: statement left, source right. */
.notes-engine-reasons li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; line-height: 1.45;
  border-bottom: 1px solid var(--border-light);
}
.notes-engine-reasons li:last-child { border-bottom: none; }
.notes-engine-reason { flex: 1 1 auto; min-width: 0; }
/* `flex: 0 0 auto` + `nowrap` was right for a short cell like "DECLINE" and
   wrong for American Amicable's diabetes cell, which is 150 characters — it
   refused to wrap or shrink, overflowed the card (horizontal scrollbar and all)
   and squeezed the sentence beside it into a one-word column. It may shrink,
   it may wrap, and it may not take more than half the row. */
.notes-engine-reason-meta {
  flex: 0 1 auto; display: flex; align-items: baseline;
  gap: 6px; white-space: normal; max-width: 48%; min-width: 0;
  justify-content: flex-end;
}
.notes-engine-verbatim { white-space: normal; line-height: 1.35; }
.notes-engine-verbatim { margin-left: 0; }

/* ── Reason rows in a split column ──
   The meta cell (the carrier's verbatim grid text and the rule id) is
   `flex: 0 0 auto; white-space: nowrap`, which is right at full width and wrong
   at half. A cell like "Diagnosed before age 50 — DECLINE; any complications —
   DECLINE" then refused to shrink or wrap, squeezing the sentence beside it
   into a two-word column and leaving the row looking broken.
   Stacked instead: the statement on its own line, its evidence underneath. */
.notes-engine-pick.is-split .notes-engine-reasons li {
  flex-direction: column; align-items: flex-start; gap: 2px;
}
.notes-engine-pick.is-split .notes-engine-reason-meta {
  white-space: normal; flex-wrap: wrap; max-width: 100%;
}
.notes-engine-pick.is-split .notes-engine-verbatim {
  white-space: normal; line-height: 1.35;
}

/* One turn of the arrow, so pressing Rerun visibly does something even when the
   result is identical — which it usually is. */
.notes-engine-rerun.is-spinning { animation: notes-engine-spin .6s ease-in-out; }
@keyframes notes-engine-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* The paste lands in a section further down the page the agent may not have
   scrolled to, so without this the button looks dead even when it worked. */
.notes-engine-paste.is-pasted,
.notes-engine-paste-backup.is-pasted {
  background: #3f7a4f !important;
  border-color: #3f7a4f !important;
  color: #fff !important;
}

/* ── Beneficiaries: repeatable rows ─────────────────────────────────────────
   The add button sits inline with Relationship and matches the "+" that adds a
   face/monthly option in Product Options, so the gesture is already learned. */
.notes-beneficiaries { display: flex; flex-direction: column; gap: 10px; }

.notes-ben-rel { display: flex; align-items: center; gap: 6px; }
.notes-ben-rel select { flex: 1 1 auto; min-width: 0; }

.notes-ben-add,
.notes-ben-remove {
  flex-shrink: 0;
  width: 34px; height: 34px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: 20px; line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--speed);
}
.notes-ben-add:hover {
  border-color: var(--gold); border-style: solid; color: var(--gold);
}
.notes-ben-remove {
  font-size: 16px;
}
.notes-ben-remove:hover {
  border-color: var(--red); border-style: solid; color: var(--red);
}

/* Split % is narrower than the other two — it holds at most three characters,
   and giving it an equal third made the name field cramped for no benefit. */
.notes-beneficiary-row[style*="--row-cols:3"] {
  grid-template-columns: 1.4fr 1.2fr 0.8fr;
}
.notes-ben-split { min-width: 0; }

/* The running total. Shown rather than enforced: a half-entered split is a
   normal intermediate state, so this reads as a reminder until it balances,
   never as an error that blocks the form. */
.notes-ben-total {
  align-self: flex-end;
  font-size: 11px;
  color: var(--red);
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-warm);
  border: 1px solid var(--border-light);
}
.notes-ben-total.is-ok {
  color: #3f7a4f;
  border-color: #3f7a4f;
}

/* ── Quick Copy ──────────────────────────────────────────────────────────────
   Every value a carrier e-app asks for, one click from the clipboard, so the
   agent isn't scrolling a very long form between every field of an application.

   The layout does the anti-clutter work: two columns inside each group turn a
   two-dozen-row list into about a dozen visual lines, and the list is fixed —
   a blank value keeps its slot (dimmed) rather than closing the gap, so a row
   is always in the same place and stays findable by position. */

.notes-qc-dialog {
  width: min(760px, calc(100% - 48px));
}

.notes-qc-filter-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-light);
}

.notes-qc-filter-icon { font-size: 13px; opacity: 0.7; flex: none; }

.notes-qc-filter {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 7px 10px;
}

.notes-qc-filter:focus {
  outline: none;
  border-color: var(--wood);
}

.notes-qc-body { padding-top: 4px; }

.notes-qc-group { margin-bottom: 16px; }
.notes-qc-group.is-filtered-out { display: none; }

.notes-qc-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.notes-qc-note {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.notes-qc-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
}

@media (max-width: 640px) {
  .notes-qc-rows { grid-template-columns: minmax(0, 1fr); }
}

.notes-qc-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.notes-qc-row.is-filtered-out { display: none; }

/* The whole row is the copy target — mid-call, aiming at a small icon is a
   miss waiting to happen. */
.notes-qc-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: all var(--speed);
}

.notes-qc-copy:hover:not(:disabled) {
  border-color: var(--wood);
  background: var(--wood-soft);
}

.notes-qc-copy:disabled { cursor: default; }

.notes-qc-label {
  flex: none;
  width: 108px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mono, because most of what lands here is digits the agent is checking
   character by character against a carrier's form. */
.notes-qc-value {
  flex: 1;
  min-width: 0;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes-qc-row.is-blank .notes-qc-value { color: var(--text-muted); opacity: 0.55; }
.notes-qc-row.is-blank .notes-qc-label { opacity: 0.55; }

/* Already copied this call — dimmed, not hidden, so the agent can see how far
   through the application they are and still re-copy a value. */
.notes-qc-row.is-done .notes-qc-value { opacity: 0.6; }

.notes-qc-tick {
  flex: none;
  font-size: 11px;
  color: #3f7a4f;
}

.notes-qc-copy.is-copied {
  border-color: #3f7a4f;
  background: rgba(63, 122, 79, 0.12);
  color: #3f7a4f;
  font-weight: 600;
  justify-content: center;
}

.notes-qc-eye {
  flex: none;
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--speed);
}

.notes-qc-eye:hover { opacity: 1; }

.notes-qc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-top: 1px solid var(--border-light);
}

.notes-qc-count { font-size: 12px; color: var(--text-muted); }

.notes-qc-clear {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.notes-qc-clear:hover { color: var(--text); }