/* ==========================================================================
   API DEMO PLAYGROUND  —  CRS "API & MCP" prototype, ported to ERB + Stimulus
   --------------------------------------------------------------------------
   Re-creation of crs-platform `/build` (src/pages/ApiSetup.tsx), serving the
   operator "API & MCP" page. It keeps the prototype's LAYOUT and its own
   neutral/semantic token layer rather than Motion's components, but the brand
   ramp is Motion blue — the prototype's electric purple was retired so this
   page matches the rest of the operator app. Do not reintroduce it.

   The local tokens are still scoped under `.crs-build` so this page's
   neutrals/semantics can't bleed into the surrounding operator chrome; EVERY
   selector here carries that scope. Auto-included via Sprockets `require_tree .`.
   ========================================================================== */

.crs-build {
  /* neutral foundation */
  --crs-paper: #f3f2f3;
  --crs-surface: #ffffff;
  --crs-sand: #f8f7f8;
  /* ink / text hierarchy */
  --crs-ink: #14111d;
  --crs-ink-soft: #393641;
  --crs-ink-muted: #6b6870;
  --crs-ink-faint: #9c9ba0;
  /* borders */
  --crs-line: #e6e6e7;
  --crs-line-strong: #cecdcf;
  /* Brand ramp — Motion blue, not the prototype's electric purple. Anchored on
     the real design-system tokens wherever one exists (so a change to the DS
     blue follows through here); the in-between stops are white tints of
     --color-primary on the same curve. */
  --crs-brand-50: #f2f4ff;                          /* primary @ 95% white */
  --crs-brand-100: var(--color-primary-light);      /* #E6EAFF */
  --crs-brand-200: #bfc9ff;                         /* primary @ 75% white */
  --crs-brand-300: #8c9fff;                         /* primary @ 55% white */
  --crs-brand-500: var(--color-sidebar-accent);     /* #4D69FF — primary @ 30% white */
  --crs-brand-600: var(--color-primary);            /* #0029FF */
  --crs-brand-700: var(--color-primary-dark);       /* #001FCF */
  --crs-brand-800: #001799;
  /* decision semantics */
  --crs-approve: #12843a;  --crs-approve-soft: #e5f3ee;  --crs-approve-ring: #a9dcc2;
  --crs-reject: #fa3a55;   --crs-reject-soft: #fcefee;   --crs-reject-ring: #f2bdb7;
  --crs-review: #8e9100;   --crs-review-soft: #fbfce5;   --crs-review-ring: #ead2a0;
  --crs-info: #408efc;
  /* elevation */
  --crs-shadow-soft: 0 1px 2px rgba(8, 4, 17, 0.04), 0 1px 2px rgba(8, 4, 17, 0.06);
  --crs-shadow-card: 0 1px 2px rgba(8, 4, 17, 0.04), 0 4px 12px -4px rgba(8, 4, 17, 0.08);
  /* type */
  --crs-font-sans: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --crs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  font-family: var(--crs-font-sans);
  color: var(--crs-ink);
  letter-spacing: 0.01em;
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

@media (min-width: 640px) {
  .crs-build { padding: 2rem 2.5rem 4rem; }
}

.crs-build *,
.crs-build *::before,
.crs-build *::after { box-sizing: border-box; }

.crs-build .hidden { display: none !important; }

/* ---- typography --------------------------------------------------------- */
.crs-build .crs-eyebrow {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--crs-brand-700); margin: 0;
}
.crs-build .crs-title {
  font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em;
  color: var(--crs-ink); margin: 6px 0 0;
}
.crs-build .crs-lead {
  margin: 6px 0 0; max-width: 36rem; font-size: 15px; line-height: 1.55;
  color: var(--crs-ink-muted);
}
.crs-build .crs-h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--crs-ink); margin: 0; }
.crs-build .crs-sub { font-size: 13px; color: var(--crs-ink-muted); margin: 2px 0 0; }
.crs-build .crs-mono { font-family: var(--crs-font-mono); }
.crs-build .tabular { font-variant-numeric: tabular-nums; }

.crs-build code {
  font-family: var(--crs-font-mono);
}
.crs-build .crs-inline-code {
  border-radius: 4px; background: var(--crs-sand); padding: 1px 6px;
  font-family: var(--crs-font-mono); font-size: 13px; color: var(--crs-ink-soft);
}

/* ---- step heading ------------------------------------------------------- */
/* Each step is a single line of title text, so the numbered circle centres
   against it. (This was flex-start with a 2px nudge back when every step also
   carried a subtitle — against one 22.5px line, a 28px circle top-aligned that
   way sits ~4px low.) */
.crs-build .crs-step { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.crs-build .crs-step-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px; background: var(--crs-brand-600);
  color: #fff; font-size: 12px; font-weight: 600;
}
.crs-build .crs-step-title { font-size: 16px; font-weight: 600; color: var(--crs-ink); margin: 0; }

/* ---- header row --------------------------------------------------------- */
.crs-build .crs-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px;
}

/* ---- cards & panels ----------------------------------------------------- */
.crs-build .crs-card {
  background: var(--crs-surface); border: 1px solid var(--crs-line);
  border-radius: 8px; box-shadow: var(--crs-shadow-soft); padding: 20px;
}
.crs-build .crs-panel {
  margin-top: 16px; overflow: hidden; border: 1px solid var(--crs-line);
  border-radius: 12px; background: var(--crs-surface); box-shadow: var(--crs-shadow-card);
}
.crs-build .crs-panel-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--crs-line); padding: 14px 20px;
}
.crs-build .crs-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
/* "No cascade yet" notice — a next step, not an error, so it takes the brand
   tint rather than a warning colour. */
.crs-build .crs-empty-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 20px 20px 0; padding: 10px 12px;
  border-radius: 8px; border: 1px solid var(--crs-brand-100); background: var(--crs-brand-50);
  font-size: 13px; line-height: 1.6; color: var(--crs-ink-soft);
}
.crs-build .crs-empty-note svg { flex: none; margin-top: 3px; color: var(--crs-brand-600); }
@media (min-width: 768px) { .crs-build .crs-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- generic helpers ---------------------------------------------------- */
.crs-build .crs-row { display: flex; align-items: center; gap: 8px; }
.crs-build .crs-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .crs-build .crs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crs-build .crs-mt2 { margin-top: 8px; }
.crs-build .crs-mt3 { margin-top: 12px; }
.crs-build .crs-mt4 { margin-top: 16px; }
.crs-build .crs-spacer { flex: 1 1 auto; }
.crs-build .crs-m0 { margin: 0; }
.crs-build .crs-mb12 { margin-bottom: 12px; }
.crs-build .crs-ml-auto { margin-left: auto; }
.crs-build .crs-row-wrap { flex-wrap: wrap; gap: 12px; }
.crs-build .crs-report-main { min-width: 0; flex: 1; }
.crs-build .crs-self-start { align-self: flex-start; }

.crs-build .crs-badge {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  background: var(--crs-sand); padding: 2px 8px; font-size: 11px; font-weight: 500;
  color: var(--crs-ink-muted);
}

/* ---- buttons ------------------------------------------------------------ */
.crs-build .crs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 8px; border: 1px solid var(--crs-ink); background: var(--crs-ink);
  color: var(--crs-paper); padding: 9px 14px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background 0.15s, opacity 0.15s, border-color 0.15s;
}
.crs-build .crs-btn:hover { background: var(--crs-ink-soft); border-color: var(--crs-ink-soft); }
.crs-build .crs-btn:disabled { opacity: 0.6; cursor: default; }
.crs-build .crs-btn-full { width: 100%; }
.crs-build a.crs-btn, .crs-build a.crs-btn-ghost { text-decoration: none; }

.crs-build .crs-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 8px; border: 1px solid var(--crs-line); background: var(--crs-surface);
  color: var(--crs-ink-soft); padding: 7px 11px; font-size: 12px; font-weight: 500;
  font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.crs-build .crs-btn-ghost:hover { border-color: var(--crs-line-strong); background: rgba(248, 247, 248, 0.7); }

.crs-build .crs-kbd {
  margin-left: 4px; border-radius: 4px; background: rgba(243, 242, 243, 0.15);
  padding: 2px 6px; font-family: var(--crs-font-mono); font-size: 10px;
}

/* ---- keys --------------------------------------------------------------- */
.crs-build .crs-key {
  border-radius: 12px; border: 1px solid var(--crs-line); background: rgba(248, 247, 248, 0.3);
  padding: 12px;
}
.crs-build .crs-key-label { font-size: 12px; font-weight: 500; color: var(--crs-ink-muted); margin: 0; }
.crs-build .crs-key-row { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.crs-build .crs-key-val {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--crs-font-mono); font-size: 13px; color: var(--crs-ink);
}
.crs-build .crs-key-actions { display: flex; flex: none; align-items: center; gap: 6px; }

/* small inline toggle (Guided / Raw) */
.crs-build .crs-toggle {
  display: inline-flex; border-radius: 8px; border: 1px solid var(--crs-line); padding: 2px;
}
.crs-build .crs-toggle-btn {
  border: 0; border-radius: 6px; background: transparent; color: var(--crs-ink-muted);
  padding: 2px 8px; font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.crs-build .crs-toggle-btn:hover { color: var(--crs-ink); }
.crs-build .crs-toggle-btn.is-active { background: var(--crs-ink); color: var(--crs-paper); }
/* Raw JSON stays visible but locked in the sandbox (aria-disabled + the
   shared .is-locked hint); no hover darkening. Colour only, no opacity: the
   hint bubble is this button's ::after and would fade with it. */
.crs-build .crs-toggle-btn.is-locked,
.crs-build .crs-toggle-btn.is-locked:hover { color: var(--crs-ink-muted); cursor: not-allowed; }

/* ---- endpoint bar ------------------------------------------------------- */
.crs-build .crs-endpoint {
  display: flex; align-items: center; gap: 8px; border-radius: 8px;
  border: 1px solid var(--crs-line); background: rgba(248, 247, 248, 0.4); padding: 8px 10px;
}
.crs-build .crs-method {
  border-radius: 6px; background: var(--crs-ink); padding: 1px 8px;
  font-family: var(--crs-font-mono); font-size: 11px; font-weight: 600; color: var(--crs-paper);
}
.crs-build .crs-endpoint-path {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--crs-font-mono); font-size: 12px; color: var(--crs-ink-soft);
}

/* ---- forms -------------------------------------------------------------- */
.crs-build .crs-field { display: block; }
.crs-build .crs-field-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.crs-build .crs-label { font-size: 13px; font-weight: 500; color: var(--crs-ink-soft); }
.crs-build .crs-hint { font-size: 12px; color: var(--crs-ink-muted); margin: 4px 0 0; }
/* Hint that sits ABOVE the control it describes, rather than below it. */
.crs-build .crs-hint-lead { margin: 0 0 6px; }
.crs-build .crs-select,
.crs-build .crs-textarea {
  width: 100%; border-radius: 4px; border: 1px solid var(--crs-line); background: var(--crs-surface);
  padding: 8px 12px; font-size: 14px; font-family: inherit; color: var(--crs-ink);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.crs-build .crs-select:focus,
.crs-build .crs-textarea:focus { border-color: var(--crs-line-strong); box-shadow: 0 0 0 2px var(--crs-info); }
.crs-build .crs-textarea { font-family: var(--crs-font-mono); font-size: 12px; resize: vertical; }
.crs-build .crs-textarea.is-invalid { border-color: var(--crs-reject); }
.crs-build .crs-field-error { margin: 4px 0 0; font-size: 12px; font-weight: 500; color: var(--crs-reject); }

.crs-build .crs-pre {
  margin: 8px 0 0; overflow-x: auto; border-radius: 8px; border: 1px solid var(--crs-line);
  background: rgba(248, 247, 248, 0.4); padding: 8px 12px;
  font-family: var(--crs-font-mono); font-size: 11px; line-height: 1.6; color: var(--crs-ink-soft);
  white-space: pre-wrap; word-break: break-word;
}

/* ---- response panel ----------------------------------------------------- */
.crs-build .crs-stack { display: flex; flex-direction: column; gap: 10px; }
.crs-build .crs-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crs-build .crs-status-ok {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 6px;
  background: var(--crs-approve-soft); padding: 4px 8px; font-size: 12px; font-weight: 600;
  color: var(--crs-approve);
}
.crs-build .crs-status-ok.is-accepted { background: var(--crs-brand-50); color: var(--crs-brand-700); }
.crs-build .crs-status-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.crs-build .crs-status-wait {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
  color: var(--crs-ink-muted);
}
.crs-build .crs-latency {
  border-radius: 6px; border: 1px solid var(--crs-line); background: var(--crs-surface);
  padding: 4px 8px; font-size: 12px; font-weight: 500; color: var(--crs-ink-muted);
}
.crs-build .crs-outcome { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.crs-build .crs-outcome.is-approve { color: var(--crs-approve); }
.crs-build .crs-outcome.is-reject { color: var(--crs-reject); }
.crs-build .crs-outcome.is-review { color: var(--crs-review); }

.crs-build .crs-headers {
  border-radius: 8px; border: 1px solid var(--crs-line); background: rgba(248, 247, 248, 0.4); padding: 8px 12px;
}
.crs-build .crs-header-row { display: flex; gap: 8px; font-family: var(--crs-font-mono); font-size: 11px; line-height: 1.6; }
.crs-build .crs-header-key { flex: none; color: var(--crs-ink-faint); }
.crs-build .crs-header-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crs-ink-soft); }

/* empty state */
.crs-build .crs-empty {
  display: flex; min-height: 260px; height: 100%; flex-direction: column; align-items: center;
  justify-content: center; border-radius: 12px; border: 1px dashed var(--crs-line-strong);
  background: rgba(248, 247, 248, 0.3); padding: 24px; text-align: center;
}
.crs-build .crs-empty-icon {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--crs-surface); color: var(--crs-ink-faint); box-shadow: var(--crs-shadow-soft);
}
.crs-build .crs-empty-title { margin: 12px 0 0; font-size: 14px; font-weight: 500; color: var(--crs-ink); }
.crs-build .crs-empty-sub { margin: 4px 0 0; max-width: 20rem; font-size: 12px; color: var(--crs-ink-muted); }

/* ---- dark JSON console -------------------------------------------------- */
.crs-build .crs-json-wrap { position: relative; }
.crs-build .crs-json-copy { position: absolute; right: 10px; top: 10px; z-index: 5; opacity: 0; transition: opacity 0.15s; }
.crs-build .crs-json-wrap:hover .crs-json-copy { opacity: 1; }
.crs-build .crs-json {
  max-height: 420px; overflow: auto; border-radius: 12px; background: var(--crs-ink);
  margin: 0; padding: 14px 16px; font-family: var(--crs-font-mono); font-size: 12.5px; line-height: 1.65;
  color: rgba(243, 242, 243, 0.85);
}
.crs-build .crs-json code { font-family: inherit; white-space: pre-wrap; word-break: break-word; }
.crs-build .crs-tok-key { color: var(--crs-brand-300); }
.crs-build .crs-tok-str { color: #86d9a8; }
.crs-build .crs-tok-num { color: #e6b450; }
.crs-build .crs-tok-bool { color: rgba(243, 242, 243, 0.45); }
.crs-build .crs-json-pre { color: rgba(243, 242, 243, 0.35); }
.crs-build .crs-caret { color: var(--crs-paper); animation: crs-blink 1.1s step-end infinite; }

/* report / agent bridge buttons */
.crs-build .crs-report-link {
  display: inline-flex; width: 100%; align-items: center; gap: 10px; border-radius: 12px;
  border: 1px solid var(--crs-line); background: rgba(248, 247, 248, 0.4); padding: 10px 12px;
  text-align: left; text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.crs-build .crs-report-link:hover { border-color: var(--crs-line-strong); background: rgba(248, 247, 248, 0.7); }
.crs-build .crs-report-icon {
  display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; background: var(--crs-ink); color: var(--crs-paper);
}
.crs-build .crs-report-title { display: block; font-size: 14px; font-weight: 500; color: var(--crs-ink); }
.crs-build .crs-report-path { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--crs-font-mono); font-size: 11px; color: var(--crs-ink-muted); }
.crs-build .t-brand { color: var(--crs-brand-600); }

/* ---- tabs (wire into tools) -------------------------------------------- */
.crs-build .crs-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.crs-build .crs-tab {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; border: 1px solid var(--crs-line);
  background: transparent; color: var(--crs-ink-soft); padding: 7px 12px; font-size: 14px; font-weight: 500;
  font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.crs-build .crs-tab:hover { border-color: var(--crs-line-strong); background: rgba(248, 247, 248, 0.5); }
.crs-build .crs-tab.is-active { border-color: var(--crs-ink); background: var(--crs-ink); color: var(--crs-paper); }
.crs-build .crs-tabpanels { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.crs-build .crs-tabpanels > div { display: flex; flex-direction: column; gap: 12px; } /* space stacked code blocks within a tab */
/* One-click install, shown beneath the snippet it duplicates (Cursor / VS Code). */
.crs-build .crs-install { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.crs-build .crs-install-note { margin: 0; font-size: 13px; color: var(--crs-ink-muted); }

/* ---- code block --------------------------------------------------------- */
.crs-build .crs-code { overflow: hidden; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--crs-ink); }
.crs-build .crs-code.is-light { border-color: var(--crs-line); background: #fcfbf8; }
.crs-build .crs-code-head {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 14px;
  font-size: 11px; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: rgba(243, 242, 243, 0.5);
}
/* QA run 16 R16-18. --crs-ink-faint (#9c9ba0) on this panel's #fcfbf8 is 2.67:1
   — the label is 11px, so it needs 4.5:1, not 3:1. --crs-ink-muted (#6b6870) is
   the next rung of this page's own ink ramp at 5.29:1, and is already what the
   Copy button in this very head uses two rules down. */
.crs-build .crs-code.is-light .crs-code-head { border-bottom-color: var(--crs-line); color: var(--crs-ink-muted); }
.crs-build .crs-code-label { font-family: var(--crs-font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.crs-build .crs-code-copy {
  display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 6px; background: transparent;
  color: rgba(243, 242, 243, 0.6); padding: 4px 8px; font-size: 11px; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.crs-build .crs-code-copy:hover { background: rgba(255, 255, 255, 0.1); color: var(--crs-paper); }
.crs-build .crs-code.is-light .crs-code-copy { color: var(--crs-ink-muted); }
.crs-build .crs-code.is-light .crs-code-copy:hover { background: var(--crs-sand); }
.crs-build .crs-code-body { overflow-x: auto; margin: 0; padding: 14px 16px; }
.crs-build .crs-code-body code {
  font-family: var(--crs-font-mono); font-size: 12.5px; line-height: 1.65; color: rgba(243, 242, 243, 0.9);
  white-space: pre; display: block;
}
.crs-build .crs-code.is-light .crs-code-body code { color: var(--crs-ink-soft); }

/* ---- agent transcript --------------------------------------------------- */
.crs-build .crs-grid-bg {
  background-image: radial-gradient(circle, rgba(8, 4, 17, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.crs-build .crs-transcript-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; }
.crs-build .crs-msg { display: flex; align-items: flex-start; gap: 10px; animation: crs-fade-up 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.crs-build .crs-avatar {
  margin-top: 2px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px; font-size: 10px; font-weight: 600;
}
.crs-build .crs-avatar.is-you { background: var(--crs-ink); color: var(--crs-paper); }
.crs-build .crs-avatar.is-bot { background: rgba(0, 41, 255, 0.1); color: var(--crs-brand-700); }
.crs-build .crs-bubble { margin: 0; border-radius: 16px; border-top-left-radius: 4px; background: var(--crs-sand); padding: 6px 12px; font-size: 14px; color: var(--crs-ink); }
.crs-build .crs-assistant-text { margin: 0; padding-top: 4px; font-size: 14px; color: var(--crs-ink-soft); }
.crs-build .crs-tool { margin-left: 32px; border-radius: 12px; border: 1px solid var(--crs-line); background: var(--crs-surface); padding: 8px 12px; animation: crs-fade-up 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.crs-build .crs-tool-name { display: flex; align-items: center; gap: 6px; font-family: var(--crs-font-mono); font-size: 12px; color: var(--crs-ink); }
.crs-build .crs-tool-args { color: var(--crs-ink-faint); }
.crs-build .crs-tool-result { margin-top: 4px; display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--crs-ink-muted); }
.crs-build .crs-tool-result span { font-family: var(--crs-font-mono); }
.crs-build .crs-typing { margin-left: 32px; display: flex; gap: 4px; padding-top: 4px; }
.crs-build .crs-typing .crs-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--crs-ink-faint); animation: crs-pulse-soft 1.6s ease-in-out infinite; }


/* ---- alert banners (flash) --------------------------------------------- */
.crs-build .crs-alert { border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.crs-build .crs-alert.is-success { background: var(--crs-approve-soft); color: var(--crs-approve); }
.crs-build .crs-alert.is-error { background: var(--crs-reject-soft); color: var(--crs-reject); }

/* svg icon sizing inside the page */
.crs-build svg.crs-ic { width: 16px; height: 16px; flex: none; }      /* h-4 w-4 */
.crs-build svg.crs-ic-sm { width: 14px; height: 14px; flex: none; }   /* h-3.5 w-3.5 */
.crs-build svg.crs-ic-lg { width: 20px; height: 20px; flex: none; }   /* h-5 w-5 */
.crs-build .crs-spin { animation: crs-spin 0.7s linear infinite; }

/* ---- keyframes ---------------------------------------------------------- */
@keyframes crs-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes crs-fade-up { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes crs-pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes crs-spin { to { transform: rotate(360deg); } }

.crs-build .crs-fade { animation: crs-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .crs-build .crs-fade,
  .crs-build .crs-msg,
  .crs-build .crs-tool { animation: none; }
  .crs-build .crs-caret,
  .crs-build .crs-typing .crs-dot,
  .crs-build .crs-spin { animation: none; }
}
/* ==========================================================================
   ONBOARDING / ACCOUNT-ACTIVATION — FRONTEND PROTOTYPE STYLES
   Scoped styles for: the two-step sign-up page, the dashboard activation
   checklist rail, the "sandbox mode" banner Activate link, and the full-page
   account-activation flow (/activate). Built on Motion design-system tokens
   (var(--color-*)) so views need no inline styles or hardcoded hex.
   Auto-included via Sprockets require_tree.
   ========================================================================== */

/* ---- Shared primitives -------------------------------------------------- */
.op-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary, #0029FF); margin: 0 0 8px; }
.op-title { font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--color-mirage, #0D122D); margin: 0; }
.op-subtitle { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--color-mirage-70, #56596C); }
.op-mb { margin-bottom: 18px; }
.op-text-center { text-align: center; }
.op-disabled { pointer-events: none; opacity: .5; }
.op-divider { height: 1px; background-color: var(--color-link-water, #DFEAF2); border: 0; margin: 22px 0; }
.op-note { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--color-mirage-70, #56596C); margin-top: 18px; }
.op-note svg { flex: none; margin-top: 1px; }

.op-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.op-col-span-2 { grid-column: 1 / -1; }
.op-invalid { border-color: var(--color-token-red, #FA3A55) !important; box-shadow: 0 0 0 3px var(--color-secondary-token-red-light, #FFE0EB) !important; }
/* The HTML `hidden` attribute must win over flex/inline-flex component classes (buttons, product rows, menus). */
.activate-page [hidden] { display: none !important; }
.op-error-summary { padding: 12px 14px; border-radius: 8px; background-color: var(--color-secondary-token-red-light, #FFE0EB); color: var(--color-token-red, #FA3A55); font-size: 13px; }
.op-error-summary p { margin: 0; }

.op-consent { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--color-link-water, #DFEAF2); cursor: pointer; }
.op-consent:first-child { border-top: 0; }
.op-consent input { margin-top: 3px; flex: none; }
.op-consent-text { font-size: 13.5px; line-height: 1.5; color: var(--color-mirage-80, #3D4157); }

.op-review { border: 1px solid var(--color-link-water, #DFEAF2); border-radius: 12px; overflow: hidden; }
.op-review-row { display: flex; justify-content: space-between; gap: 24px; padding: 12px 16px; border-top: 1px solid var(--color-link-water, #DFEAF2); }
.op-review-row:first-child { border-top: 0; }
.op-review-key { font-size: 13.5px; color: var(--color-mirage-70, #56596C); }
.op-review-val { font-size: 13.5px; font-weight: 500; color: var(--color-mirage, #0D122D); text-align: right; }

.op-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.op-step { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.op-step-badge { flex: none; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background-color: var(--color-mirage-05, #F3F3F5); color: var(--color-mirage-70, #56596C); border: 1px solid var(--color-link-water, #DFEAF2); }
.op-step-label { font-size: 14px; font-weight: 500; color: var(--color-mirage-70, #56596C); }
.op-step.is-current .op-step-badge { background-color: var(--color-primary, #0029FF); color: #FFFFFF; border-color: var(--color-primary, #0029FF); }
.op-step.is-current .op-step-label { color: var(--color-mirage, #0D122D); }
.op-step.is-done .op-step-badge { background-color: var(--color-blue-05, #F2F4FF); color: var(--color-primary, #0029FF); border-color: var(--color-blue-05, #F2F4FF); }

.op-progress-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.op-progress-label { font-size: 13px; font-weight: 600; color: var(--color-mirage, #0D122D); }
.op-progress-count { font-size: 13px; color: var(--color-mirage-70, #56596C); }
.op-progress-track { height: 7px; border-radius: 999px; background-color: var(--color-mirage-05, #F3F3F5); overflow: hidden; }
.op-progress-fill { height: 100%; border-radius: 999px; background-color: var(--color-primary, #0029FF); transition: width .3s ease; }
.op-progress-fill.is-0 { width: 0; } .op-progress-fill.is-25 { width: 25%; } .op-progress-fill.is-50 { width: 50%; } .op-progress-fill.is-75 { width: 75%; } .op-progress-fill.is-100 { width: 100%; }

.op-checklist { display: flex; flex-direction: column; gap: 14px; }
.op-check { display: flex; align-items: flex-start; gap: 12px; }
.op-check-badge { flex: none; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background-color: var(--color-mirage-05, #F3F3F5); color: var(--color-mirage-70, #56596C); }
.op-check.is-done .op-check-badge { background-color: var(--color-token-green, #00DF81); color: #FFFFFF; }
.op-check.is-current .op-check-badge { background-color: var(--color-primary, #0029FF); color: #FFFFFF; }
.op-check.is-locked { opacity: .55; }
.op-check-body { flex: 1 1 auto; min-width: 0; }
/* Explicit margins: the app has no global p reset, so without these the UA's
   1em block margins misalign the title against the badge and inflate gaps. */
.op-check-title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--color-mirage, #0D122D); }
.op-check-desc { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--color-mirage-70, #56596C); }
.op-check-action { margin-top: 10px; }

.op-actions-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* ---- Sign-up page (two-step, Profound-style) ---------------------------- */
.signup-page { display: flex; height: 100vh; max-height: 100vh; background-color: var(--color-white, #FFFFFF); }
/* Column so .signup-left-inner's `margin: auto 0` centres the form in the space
   above the legal line, which then sits on the bottom edge (see .signup-legal). */
.signup-left { box-sizing: border-box; flex: 1 1 50%; min-width: 0; max-width: 50%; display: flex; flex-direction: column; align-items: center; padding: 24px 40px; overflow-y: auto; }
.signup-right, .signup-right-dark { max-height: 100vh; }
.signup-left-inner { width: 100%; max-width: 460px; margin: auto 0; }
.signup-logo { display: block; height: 30px; width: auto; margin-bottom: 24px; }
.signup-title { font-size: 44px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; color: var(--color-mirage, #0D122D); margin: 0; }
.signup-subtitle { margin: 10px 0 18px; font-size: 14px; line-height: 1.5; color: var(--color-mirage-70, #56596C); }
.signup-progress { display: flex; gap: 6px; margin-bottom: 24px; }
.signup-progress-seg { flex: 1 1 0; height: 4px; border-radius: 999px; background-color: var(--color-mirage-05, #F3F3F5); transition: background-color .2s; }
.signup-progress-seg.is-active { background-color: var(--color-primary, #0029FF); }
.signup-form { display: flex; flex-direction: column; gap: 16px; }
.signup-form .form-field-group + .form-field-group { margin-top: 6px; }
.signup-submit { margin-top: 8px; }
.signup-actions { display: flex; gap: 12px; margin-top: 8px; }
.signup-submit-grow { flex: 1 1 auto; }
.signup-footer { margin-top: 18px; font-size: 14px; color: var(--color-mirage-70, #56596C); }
.signup-demo-card { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 14px; border: 1px solid var(--color-link-water, #DFEAF2); border-radius: 12px; background-color: var(--color-app-bg, #F7F9FB); }
.signup-demo-avatars { display: flex; flex: none; }
.signup-demo-avatars .avatar { margin-left: -8px; border: 2px solid var(--color-white, #FFFFFF); }
.signup-demo-avatars .avatar:first-child { margin-left: 0; }
.signup-demo-avatar { object-fit: cover; padding: 0; }
.signup-demo-title { font-size: 14px; font-weight: 600; color: var(--color-mirage, #0D122D); }
.signup-demo-btn { margin-left: auto; flex: none; }
.signup-right { box-sizing: border-box; flex: 1 1 50%; min-width: 0; position: relative; background-color: var(--color-app-bg, #F7F9FB); background-image: radial-gradient(var(--color-link-water, #DFEAF2) 1.1px, transparent 1.1px); background-size: 22px 22px; display: flex; align-items: center; justify-content: center; padding: 40px 0; overflow: hidden; }
@media (max-width: 900px) { .signup-right { display: none; } .signup-left { flex-basis: 100%; max-width: 100%; } }

/* ---- "Sandbox mode" banner (+ Activate link) ---------------------------- */
.alert-banner.sandbox-banner { justify-content: space-between; align-items: center; gap: 14px; border-radius: 0; margin: 0; }
.sandbox-banner .sandbox-text { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.sandbox-activate { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 8px; background-color: var(--color-primary, #0029FF); color: #FFFFFF; font-size: 13px; font-weight: 600; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none; }
.sandbox-activate:hover { background-color: var(--color-blue-90, #1A3EFF); color: #FFFFFF; }
.sandbox-activate svg { width: 15px; height: 15px; }

/* ---- Full-page account-activation flow (/activate) ---------------------- */
.activate-page { min-height: 100vh; background-color: var(--color-app-bg, #F7F9FB); }
.activate-topbar { background-color: var(--color-white, #FFFFFF); border-bottom: 1px solid var(--color-link-water, #DFEAF2); position: sticky; top: 0; z-index: 10; }
.activate-topbar-inner { max-width: 760px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 16px; }
.activate-logo { height: 26px; width: auto; display: block; }
.activate-saved { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; font-weight: 500; color: var(--color-token-green, #00DF81); opacity: 0; transition: opacity .2s; }
.activate-saved.is-visible { opacity: 1; }
.activate-exit { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--color-mirage-70, #56596C); }
.activate-exit:hover { color: var(--color-primary, #0029FF); }
.activate-container { max-width: 680px; margin: 0 auto; padding: 36px 24px 64px; }
.activate-foot { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--color-link-water, #DFEAF2); }
.activate-foot-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-mirage-70, #56596C); }

/* Step indicator — vertical badge+label columns so 5 fit any width */
.kyc-steps { gap: 6px; }
.kyc-steps .op-step { flex: 1 1 0; flex-direction: column; gap: 6px; text-align: center; }
.kyc-steps .op-step-label { font-size: 11px; }
@media (max-width: 560px) { .kyc-steps .op-step-label { display: none; } }

.kyc-section-title { font-size: 15px; font-weight: 600; color: var(--color-mirage, #0D122D); margin: 0 0 3px; }
.kyc-section-sub { font-size: 13px; line-height: 1.5; color: var(--color-mirage-70, #56596C); margin: 0 0 16px; }

/* Products */
.kyc-product-list { display: flex; flex-direction: column; gap: 10px; }
.kyc-product { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-link-water, #DFEAF2); border-radius: 10px; cursor: pointer; }
.kyc-product:has(input:checked) { border-color: var(--color-primary, #0029FF); background-color: var(--color-blue-05, #F2F4FF); }
.kyc-product input { flex: none; }
.kyc-product-main { flex: 1 1 auto; min-width: 0; }
.kyc-product-name { font-size: 14px; font-weight: 600; color: var(--color-mirage, #0D122D); }
.kyc-product-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.kyc-product-vendor { font-size: 12px; color: var(--color-mirage-70, #56596C); }
.kyc-cascade-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background-color: var(--color-blue-05, #F2F4FF); color: var(--color-primary, #0029FF); font-size: 11px; font-weight: 600; }
.kyc-product-price { flex: none; font-size: 14px; font-weight: 600; color: var(--color-mirage, #0D122D); white-space: nowrap; }
.kyc-product-price span { font-weight: 400; font-size: 12px; color: var(--color-mirage-70, #56596C); }
.kyc-enterprise { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--color-glaucous, #718EBF); border-radius: 10px; background-color: var(--color-app-bg, #F7F9FB); }
.kyc-enterprise-text { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--color-mirage-80, #3D4157); }
.kyc-enterprise .btn-secondary { flex: none; white-space: nowrap; }
.kyc-total-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-link-water, #DFEAF2); }
.kyc-total-label { font-size: 14px; color: var(--color-mirage-70, #56596C); }
.kyc-total { font-size: 20px; font-weight: 700; color: var(--color-mirage, #0D122D); }
.kyc-total small { font-size: 12px; font-weight: 400; color: var(--color-mirage-70, #56596C); }
/* Added catalog products + "rolodex" picker */
.kyc-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.kyc-product-added { cursor: default; }
.kyc-product-remove { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--color-link-water, #DFEAF2); border-radius: 8px; background-color: var(--color-white, #FFFFFF); color: var(--color-mirage-70, #56596C); cursor: pointer; }
.kyc-product-remove:hover { border-color: var(--color-token-red, #FA3A55); color: var(--color-token-red, #FA3A55); }
.kyc-rolodex-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 11px 14px; border: 1px dashed var(--color-glaucous, #718EBF); border-radius: 10px; background-color: var(--color-white, #FFFFFF); color: var(--color-primary, #0029FF); font-size: 13px; font-weight: 600; cursor: pointer; }
.kyc-rolodex-toggle:hover { background-color: var(--color-blue-05, #F2F4FF); }
/* Add-products drawer (right sidebar) */
.kyc-drawer-backdrop { position: fixed; inset: 0; z-index: 60; display: none; background-color: rgba(13, 18, 45, .35); }
.kyc-drawer { position: fixed; top: 0; right: 0; z-index: 61; display: none; flex-direction: column; width: 400px; max-width: 92vw; height: 100vh; background-color: var(--color-white, #FFFFFF); box-shadow: -16px 0 44px rgba(13, 18, 45, .20); }
.activate-page.drawer-open .kyc-drawer-backdrop { display: block; animation: kyc-fade-in .2s ease; }
.activate-page.drawer-open .kyc-drawer { display: flex; animation: kyc-drawer-in .28s cubic-bezier(.4, 0, .2, 1); }
@keyframes kyc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kyc-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.kyc-drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--color-link-water, #DFEAF2); }
.kyc-drawer-title { font-size: 16px; font-weight: 700; color: var(--color-mirage, #0D122D); }
.kyc-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background-color: transparent; color: var(--color-mirage-70, #56596C); cursor: pointer; }
.kyc-drawer-close:hover { background-color: var(--color-mirage-05, #F3F3F5); }
.kyc-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 8px; }
.kyc-drawer-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--color-link-water, #DFEAF2); border-radius: 10px; cursor: pointer; }
.kyc-drawer-item:has(input:checked) { border-color: var(--color-primary, #0029FF); background-color: var(--color-blue-05, #F2F4FF); }
.kyc-drawer-item input { flex: none; }
.kyc-drawer-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kyc-drawer-foot { flex: none; padding: 16px 22px; border-top: 1px solid var(--color-link-water, #DFEAF2); }
.kyc-drawer-add { width: 100%; box-sizing: border-box; justify-content: center; }
.kyc-drawer-add:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .activate-page.drawer-open .kyc-drawer, .activate-page.drawer-open .kyc-drawer-backdrop { animation: none; } }

/* Success */
.kyc-done { text-align: center; padding: 48px 16px; }
.kyc-done-icon { width: 72px; height: 72px; border-radius: 999px; background-color: var(--color-token-green, #00DF81); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.kyc-done-icon svg { width: 38px; height: 38px; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 * DASH-DEF-12: this used to be `require_tree .`, which concatenates EVERY
 * stylesheet in this directory — including tenantiq.css, the PM design system.
 * The operator bundle therefore shipped 255 TenantIQ-prefixed rules it never
 * uses, ~40KB, on every page. QA measured them in the deployed asset while the
 * source file showed none: the leak only exists after compilation. Note that
 * require_tree recurses, so moving the file to a subdirectory would not fix it.
 *
 * The requires are explicit now. Adding a stylesheet here does NOT put it in
 * the operator bundle — link it from the layout that needs it, or add it below
 * if it genuinely belongs to every operator page.
 *
 * tenantiq.css is deliberately absent: it is the TenantIQ surface, already
 * linked by layouts/pm, layouts/tenantiq and users/sessions/new, and CLAUDE.md
 * forbids the two design systems meeting in one view. The two below ARE
 * operator styles despite their filenames — onboarding_prototype backs signup,
 * password reset, invitations, activation and the getting-started dock;
 * api_demo_playground backs the API page and the landing page's logo.
 *



 */

/* ==========================================================================
   CUSTOM THEME COLORS
   Brand colors from Motion/Cascades design system
   ========================================================================== */
:root {
  --color-blue: #1814F3;
  --color-blue-05: #F2F4FF;
  --color-blue-30: #B3BFFF;
  --color-blue-70: #4D69FF;
  --color-blue-90: #1A3EFF;
  --color-catalina-blue: #343C6A;
  --color-glaucous: #718EBF;
  --color-green-ish: #16DBCC;
  --color-emerald: #16DBCC;
  --color-radical-red: #FE5C73;
  --color-link-water: #DFEAF2;
  --color-yellow-orange: #FFBB38;
  --color-token-green: #00DF81;
  --color-token-yellow: #FFBB38;
  --color-token-orange: #FE8742;
  --color-token-red: #FA3A55;
  /* Text-only variants: the brand status colours above are far below WCAG
     AA as text (green 1.77:1, yellow 1.69:1, red 3.62:1 on white). Fills and
     dots keep the brand values; anything rendering these as TEXT uses these. */
  --color-token-green-ink: #067A4E;
  --color-token-yellow-ink: #7A5200;
  --color-token-red-ink: #C8102E;
  /* .btn-danger hover: darker than the red ink, white text 8.2:1 (QA DEF-31). */
  --color-token-red-ink-hover: #A00C24;
  --color-token-purple: #9233FE;
  --color-token-purple-ink: #7A21D6;
  /* Info is fill/dot only — #00C1FF is 2.1:1 on white, so there is no
     text-token-info class; .report-card-tile--identity consumes this var. */
  --color-token-info: #00C1FF;
  --color-mirage: #0D122D;
  --color-mirage-05: #F3F3F5;
  --color-mirage-80: #3D4157;
  --color-mirage-60: #6E7181;
  --color-mirage-70: #56596C;
  --color-mirage-30: #B6B8C0;
  --color-mirage-20: #CFD0D5;
  --color-portage: #8094FF;
  --color-gray-05: #FAFAFA;
  --color-gray-chateau: #9EA0AB;
  --color-secondary-token-green-light: #D9FAEC;
  --color-secondary-token-yellow-light: #FFF5D9;
  --color-secondary-token-orange-light: #FFEFE5;
  --color-secondary-token-red-light: #FFE0EB;
  --color-secondary-token-purple-light: #F4E9FF;

  /* Base brand tokens — previously only present as var() fallbacks. */
  --color-primary: #0029FF;
  --color-primary-dark: #001FCF;
  --color-primary-light: #E6EAFF;
  /* Primary BUTTON fill (2026-08 UX round): the cascade surface's ink, promoted
     app-wide — .btn-primary is black; blue stays for links, focus, selection. */
  --color-ink: #14111d;
  --color-ink-hover: #06040d;
  /* Product-blue accent (builder node/catalog icon squares, run wires). Ruby
     side mirrors this as BillingProduct::PRODUCT_ACCENT — keep in sync. */
  --color-product-accent: #2b4ae8;
  --color-app-bg: #F7F9FB;
  --color-white: #FFFFFF;
  --color-muted: #63667A;
  /* Disabled ink (DESIGN_SYSTEM text-disabled). Three rules consumed this via
     a literal fallback while the property itself was never defined, so the
     token read as decoration; declaring it makes them actually token-driven. */
  --color-disabled: #C4C6C8;

  /* Operator left sidebar — dark navy rail (DESIGN_SYSTEM.md §2.9). The accent
     is #4D69FF, not raw --color-primary: #0029FF is ~1.6:1 on the navy and
     near-invisible there. */
  --color-sidebar-bg: #0D122D;
  --color-sidebar-surface: #161B33;
  --color-sidebar-surface-hover: #1E2440;
  --color-sidebar-pill-active: #2C3350;
  --color-sidebar-active-bg: rgba(77, 105, 255, 0.14);
  --color-sidebar-accent: #4D69FF;
  --color-sidebar-text: #FFFFFF;
  --color-sidebar-text-muted: #9EA0AB;
  --color-sidebar-caption: #8A8DA0;
  --color-sidebar-divider: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  overflow-x: hidden;
}

/* ==========================================================================
   PAGE LAYOUT - Main app structure with sidebar and content container
   ========================================================================== */
/* Vertical shell: optional top banner above the sidebar + content row. */
.app-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-layout {
  flex: 1 1 auto;
  min-height: 0;
  background-color: var(--color-app-bg, #F7F9FB);
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.page-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 24px;
}

.page-content {
  flex: 1;
  background-color: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 12px 12px 0 0;
  min-height: 0;
  overflow: hidden;
}

.page-content-inner {
  height: 100%;
  /* Without border-box, height:100% + padding makes this scroll viewport
     48px taller than its overflow-hidden parent — clipping the last 48px
     of every page out of reach. */
  box-sizing: border-box;
  overflow-y: auto;
  padding: 24px;
}

/* ==========================================================================
   IMPERSONATION BANNER
   Shown when an admin is logged in as another user
   ========================================================================== */
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  background-color: var(--color-token-yellow-10, #FFF8E6);
  border-bottom: 1px solid var(--color-token-yellow, #FFBB38);
  z-index: 59;
  font-family: Inter, sans-serif;
  color: var(--color-mirage, #0D122D);
}

/* ==========================================================================
   MODAL STYLES - Explore Products and generic modals
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.modal-overlay.hidden {
  display: none;
}

.modal-content {
  position: relative;
  background-color: white;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 12px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

/* Explore Products Modal */
.explore-modal {
  display: flex;
  /* Gutter between the category rail and the content column — without it the
     rail's hover pills run flush into the search bar's border. */
  gap: 24px;
  width: 1200px;
  max-width: calc(100vw - 48px);
  height: 600px;
  padding: 15px;
  overflow: hidden;
}

/* Left Sidebar */
.explore-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.explore-sidebar-title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-mirage);
  margin: 0;
  /* 14px left = the rail rows' content inset (3px indicator + 2px gap + 9px
     padding), so the title shares the rows' left edge. */
  padding: 4px 0 12px 14px;
}

.explore-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--color-link-water);
  background: white;
  color: var(--color-mirage-70);
  cursor: pointer;
  z-index: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.explore-close-btn:hover {
  background-color: var(--color-app-bg, #F7F9FB);
  color: var(--color-mirage);
}

.explore-section-header {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-mirage);
  padding: 8px 0 8px 14px; /* left edge matches the nav rows (see title note) */
}

.explore-section-spacer {
  height: 12px;
}

.explore-nav-item {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.explore-nav-indicator {
  width: 3px;
  height: 38px;
  display: flex;
  align-items: center;
}

.explore-nav-indicator::after {
  content: '';
  width: 3px;
  height: 18px;
  background-color: transparent;
  border-radius: 0 10px 10px 0;
  transition: background-color 0.2s ease;
}

.explore-nav-item.active .explore-nav-indicator::after,
.explore-nav-item:hover .explore-nav-indicator::after {
  background-color: var(--color-blue);
}

.explore-nav-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 9px;
  height: 38px;
  border-radius: 9px;
  transition: background-color 0.2s ease;
}

.explore-nav-item:hover .explore-nav-content {
  background-color: var(--color-blue-05);
}

.explore-nav-item.active .explore-nav-content {
  background-color: var(--color-primary-light, #E6EAFF);
}

.explore-nav-icon {
  width: 24px;
  height: 24px;
  /* Centered in the 28px badge column so "All Products" text starts at the
     same x as the vendor/category rows below it. */
  margin: 0 2px;
  color: var(--color-mirage-70);
  flex-shrink: 0;
}

.explore-nav-item.active .explore-nav-icon {
  color: var(--color-blue);
}

.explore-nav-category-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.explore-nav-category-svg {
  width: 16px;
  height: 16px;
  color: var(--color-mirage-70);
}

.explore-nav-vendor-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  color: var(--color-mirage-80);
}

.explore-nav-label {
  flex: 1;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-mirage-70);
  transition: color 0.2s ease, font-weight 0.15s ease;
}

.explore-nav-item.active .explore-nav-label {
  color: var(--color-blue);
  font-weight: 600;
}

.explore-nav-badge {
  min-width: 32px;
  padding: 6px 9px;
  background-color: var(--color-app-bg, #F7F9FB);
  border-radius: 12px;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  color: var(--color-mirage-70);
  text-align: center;
}

.explore-nav-item.active .explore-nav-badge {
  background-color: white;
}

/* Right Content */
.explore-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow: hidden;
}

.explore-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 40px = the rail title block's height, so the 38px search-bar row spans the
     same band as the 38px "All Products" row beside it. */
  margin-top: 40px;
}

.explore-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 333px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  background-color: white;
  transition: border-color 0.15s ease;
}

.explore-search-bar:focus-within {
  border-color: var(--color-primary, #0029FF);
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.1);
}

.explore-search-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-mirage-50);
}

.explore-search-input,
.explore-search-input:focus {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-mirage);
  background: transparent !important;
  padding: 0 !important;
  margin: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.explore-search-input::placeholder {
  color: var(--color-mirage-50);
}

.explore-result-count {
  font-size: 12px;
  color: var(--color-mirage-60);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Products List */
.explore-products-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 4px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.explore-products-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

/* Empty search state */
.explore-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
}

.explore-empty.hidden {
  display: none;
}

.explore-empty-icon {
  width: 32px;
  height: 32px;
  color: var(--color-mirage-30);
}

.explore-empty-text {
  font-size: 14px;
  color: var(--color-mirage-60);
  margin: 0;
}

.explore-product-item {
  display: flex;
  flex-direction: column;
  background-color: white;
  border: 1px solid var(--color-link-water);
  border-radius: 12px;
  text-align: left;
  transition: all 0.2s ease;
  width: 100%;
}

.explore-product-item:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.explore-product-item.expanded {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.explore-product-item.hidden {
  display: none;
}

/* Product Header Button (collapsed state trigger) */
.explore-product-header-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.explore-product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.explore-product-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.explore-product-vendor-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 42px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  color: var(--color-mirage-80);
}

.explore-product-name {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-mirage);
}

.explore-product-description {
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-mirage-60);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Product meta — price + inquiry pill */
.explore-product-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 12px;
}

.explore-product-price {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-mirage);
  white-space: nowrap;
}

.explore-product-price-unit {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-mirage-60);
}

.explore-inquiry-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.explore-inquiry-pill--soft {
  background-color: var(--color-secondary-token-green-light);
  color: var(--color-token-green-ink);
}

.explore-inquiry-pill--hard {
  background-color: var(--color-secondary-token-yellow-light);
  color: var(--color-mirage-80);
}

.explore-product-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-mirage-30);
  transition: transform 0.2s ease;
}

.explore-product-item.expanded .explore-product-chevron {
  transform: rotate(90deg);
}

/* Expanded Content */
.explore-product-expanded {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 0 18px 18px 18px;
}

.explore-product-item.expanded .explore-product-expanded {
  display: flex;
}

.explore-product-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.explore-detail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: var(--color-app-bg, #F7F9FB);
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  padding: 12px 16px;
}

.explore-detail-section--workflows .explore-detail-icon {
  color: var(--color-token-green-ink);
}

.explore-detail-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.explore-detail-icon {
  width: 18px;
  height: 18px;
  color: var(--color-blue);
}

.explore-detail-title {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-mirage);
}

.explore-detail-text {
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-mirage-60);
  margin: 0;
  text-align: justify;
}

.explore-use-cases {
  margin: 0;
  padding-left: 16px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-mirage-60);
}

.explore-use-cases li {
  margin-bottom: 2px;
}

.explore-detail-section--workflows .explore-use-cases li {
  text-align: justify;
}

.explore-detail-section--limitations {
  grid-column: 1 / -1;
  background-color: var(--color-secondary-token-yellow-light);
  border: 1px solid var(--color-token-yellow);
  border-radius: 8px;
  padding: 12px 16px;
}

.explore-detail-section--limitations .explore-detail-icon {
  color: var(--color-token-yellow-ink);
}

.explore-product-cta {
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   MOTION BRAND FONT CLASSES
   ========================================================================== */
.motion-heading-font {
  font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-mirage);
  font-size: 28px;
}

.motion-semi-bold-font {
  font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-mirage);
  font-size: 15px;
  line-height: 150%;
}

.motion-regular-font {
  color: var(--color-mirage-80);
  font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
}

/* ==========================================================================
   BUTTON STYLES
   Primary, Secondary, and Tertiary button variants
   ========================================================================== */
/* Ink-filled (black) since the 2026-08 UX round — matching the cascade
   surface's buttons. The focus ring stays brand blue (that pairing is what
   the cascade ink buttons always shipped with). Never place a .btn-primary
   on the dark navy chrome (sidebar / sandbox banner) — ink vanishes there;
   the banner keeps its own blue .app-sandbox-banner-cta for that reason.
   Deliberate scope: the applicant-facing intake surface follows the ink too —
   neutral black suits the white-label brand better than CRS blue; only the
   marketing landing (.lp-shell below) keeps the blue CTA family. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 12px;
  background-color: var(--color-ink, #14111d);
  border: 1px solid var(--color-ink, #14111d);
  border-radius: 9px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--color-ink-hover, #06040d);
  border-color: var(--color-ink-hover, #06040d);
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.3);
}

.btn-primary svg {
  color: #ffffff;
  fill: currentColor;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* The marketing landing keeps the blue CTA family — the black primary is an
   operator-app decision, and .lp-sidebar-cta paints its own blue, so letting
   the base ink through would leave the page mixed blue/black. */
.lp-shell .btn-primary { background-color: var(--color-primary, #0029FF); border-color: var(--color-primary, #0029FF); }
.lp-shell .btn-primary:hover { background-color: var(--color-primary-dark, #001FCF); border-color: var(--color-primary-dark, #001FCF); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 12px;
  background-color: #ffffff;
  border: 1px solid #0029ff;
  border-radius: 9px;
  color: #0029ff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-secondary:hover {
  background-color: #f2f4ff;
}

.btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.3);
}

.btn-secondary svg {
  color: #0029ff;
  fill: currentColor;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 12px;
  background-color: #f2f4ff;
  border: 1px solid #f2f4ff;
  border-radius: 9px;
  color: #0029ff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-tertiary:hover {
  background-color: #e5eaff;
  border-color: #e5eaff;
}

.btn-tertiary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.15);
}

.btn-tertiary svg {
  color: #0029ff;
  fill: currentColor;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-0.5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes appear-then-fade {
  0%, 100% {
    opacity: 0;
  }
  5%, 60% {
    opacity: 1;
  }
}

/* ==========================================================================
   FLASH MESSAGES
   ========================================================================== */
.flash {
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  width: max-content;
  padding: 0 1rem;
  z-index: 9999;
}

.flash__message {
  font-size: 1rem;
  color: white;
  padding: 0.5rem 1rem;
  background-color: black;
  animation: appear-then-fade 4s both;
  border-radius: 999px;
}

.flash__notice {
  background-color: #4CAF50;
}

.flash__alert {
  background-color: #FFC107;
}

.flash__error {
  background-color: #F44336;
}

/* ==========================================================================
   TOOLTIP STYLES
   ========================================================================== */
.tooltip {
  position: fixed;
  display: none;
  background-color: #1F2937;
  color: white;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  z-index: 9999;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.group:hover .tooltip {
  display: block;
}

/* ---- Locked options ("needs live access") ----
   aria-disabled controls that stay focusable, look inactive, and explain
   themselves on hover or focus through data-locked-hint. The bubble sits
   above and right-aligned so it clears table edges and dropdown menus. */
.is-locked {
  position: relative;
  cursor: not-allowed;
}
.is-locked[data-locked-hint]::after {
  content: attr(data-locked-hint);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 120;
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-mirage, #0D122D);
  color: var(--color-white, #FFFFFF);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 20px rgba(13, 18, 45, 0.18);
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}
.is-locked[data-locked-hint]::before {
  content: "";
  position: absolute;
  right: 14px;
  bottom: calc(100% + 3px);
  border: 5px solid transparent;
  border-top-color: var(--color-mirage, #0D122D);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease-out;
}
.is-locked[data-locked-hint]:hover::after,
.is-locked[data-locked-hint]:focus-visible::after {
  opacity: 1;
  transform: none;
}
.is-locked[data-locked-hint]:hover::before,
.is-locked[data-locked-hint]:focus-visible::before {
  opacity: 1;
}
.is-locked:focus { outline: none; }
.is-locked:focus-visible { box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.2); }
/* Locked entries inside an actions dropdown: muted label, no hover fill. */
.action-item.is-locked { color: var(--color-mirage-30, #B6B8C0); cursor: not-allowed; }
.action-item.is-locked:hover { background: none; }
.action-item.is-locked .action-icon svg { color: var(--color-mirage-30, #B6B8C0); }

/* ==========================================================================
   DROPDOWN STYLES
   ========================================================================== */
.dropdown-menu {
  display: none;
  min-width: 150px;
  z-index: 50;
  position: absolute;
  right: 0;
  top: 100%;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 5px;
}

.dropdown-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: #1d4ed8;
  background-color: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  text-decoration: none;
  margin-bottom: 0.25rem;
  width: 100%;
}

.dropdown-item:hover {
  background-color: #e5e7eb;
}

.dropdown-menu.show {
  display: block;
}

/* ==========================================================================
   DOCKET TABLE STYLES
   Flex-based table layout matching Motion brand design
   ========================================================================== */
.docket-table-header {
  display: flex;
  background-color: var(--color-mirage-05, #F3F3F5);
  padding: 12px 15px;
  border-radius: 8px 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-mirage-80, #3D4157);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.docket-table-header a {
  color: inherit;
  text-decoration: none;
}

.docket-table-header a:hover {
  color: inherit;
}

.docket-table-row {
  display: flex;
  flex-wrap: wrap;
  padding: 14px 15px;
  border-bottom: 1px solid var(--color-link-water, #DFEAF2);
  font-size: 14px;
  color: var(--color-mirage-80, #3D4157);
}

.docket-table-row:last-child {
  border-bottom: none;
}

/* ==========================================================================
   FILTER DROPDOWN STYLES
   Search and filter UI components
   ========================================================================== */
.filter-dropdown {
  background: white;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 9px;
  padding: 16px;
  min-width: 280px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.filter-inline {
  background: var(--color-white, #FFFFFF);
  /* Same 1px border as .search-bar / .filter-inline-toggle: equal 41px outer
     height, and the pill reads as a control instead of a floating lozenge. */
  border: 1px solid var(--color-link-water, #DFEAF2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 39px;
  padding: 0 12px;
  border-radius: 9px;
}

.filter-inline:focus-within {
  border-color: var(--color-primary, #0029FF);
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.15);
}

.filter-inline-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  color: var(--color-mirage-60, #6E7181);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-inline-select {
  border: none;
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-mirage-80, #3D4157);
  padding: 0;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.filter-inline-toggle {
  background: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-link-water, #DFEAF2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 39px;
  padding: 0 14px;
  border-radius: 9999px;
  font-size: 14px;
  color: var(--color-mirage-70, #56596C);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.filter-inline-toggle:hover {
  border-color: #FFBB38;
}

.filter-inline-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.filter-inline-toggle .status-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  display: inline-block;
  background: #FFBB38;
}

.filter-inline-toggle:has(input:checked) {
  background-color: #FFF4DB;
  color: #B07A00;
  border-color: #FFBB38;
  font-weight: 600;
}

.filter-inline-toggle:has(input:checked) .status-pill-dot {
  background: #B07A00;
}

/* Keyboard focus ring (checkbox is hidden, so ring goes on the label) */
.filter-inline-toggle:focus-within {
  outline: 2px solid rgba(255, 187, 56, 0.35);
  outline-offset: 2px;
}

.filter-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 6px;
  font-size: 14px;
  color: var(--color-mirage-80, #3D4157);
  background: white;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: var(--color-blue-90, #1A3EFF);
  box-shadow: 0 0 0 3px rgba(26, 62, 255, 0.15);
}

.filter-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-mirage-60, #6E7181);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.filter-divider {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-link-water, #DFEAF2);
}

/* Hidden utility class for Stimulus controllers */
.hidden {
  display: none !important;
}

/* ==========================================================================
   WORKFLOWS UI CUSTOM CLASSES
   Custom width, height, gap, and styling for workflows table
   ========================================================================== */

/* Table column widths */
.col-w-60 { width: 60px; flex-shrink: 0; }
.col-w-80 { width: 80px; flex-shrink: 0; }
.col-w-100 { width: 100px; flex-shrink: 0; }
.col-w-120 { width: 120px; flex-shrink: 0; }
.col-w-160 { width: 160px; flex-shrink: 0; }
.col-w-150 { width: 150px; flex-shrink: 0; }
.col-code-sm { width: 120px; flex-shrink: 0; }
.col-created { width: 170px; flex-shrink: 0; }

/* Flex columns for name/code - share remaining space */
.col-name {
  flex: 1.1;
  min-width: 0;
}

.col-code {
  flex: 0.9;
  min-width: 0;
}

.col-owner {
  width: 180px;
  flex-shrink: 0;
}

/* Search bar */
.search-bar {
  background: white;
  border: 1px solid var(--color-link-water, #DFEAF2);
  display: flex;
  gap: 8px;
  height: 39px;
  align-items: center;
  padding: 0 10px;
  border-radius: 9px;
  width: 333px;
  transition: border-color 0.15s ease;
}

.search-bar:focus-within {
  border-color: var(--color-primary, #0029FF);
}

.search-bar-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-mirage-30, #B6B8C0);
}

.search-bar:focus-within .search-bar-icon {
  color: var(--color-primary, #0029FF);
}

.search-input {
  width: 100%;
  font-weight: 400;
  font-size: 14px;
  color: var(--color-mirage-80, #3D4157);
  line-height: 20px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent;
}

.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search-input::placeholder {
  color: var(--color-mirage-30, #B6B8C0);
}

.search-input:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.search-clear-btn {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--color-mirage-30, #B6B8C0);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.search-clear-btn:hover {
  color: var(--color-mirage-80, #3D4157);
  background-color: var(--color-mirage-05, #F3F3F5);
}

/* Search loading state */
.search-loading .search-bar-icon {
  animation: search-spin 0.8s linear infinite;
  color: var(--color-primary, #0029FF);
}

@keyframes search-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Filter button */
.filter-btn {
  background: white;
  border: 1px solid #dfeaf2;
  display: flex;
  gap: 12px;
  height: 39px;
  align-items: center;
  padding: 0 9px;
  border-radius: 9px;
  cursor: pointer;
}

.filter-btn:hover {
  background: #f9fafb;
}

.filter-icon-box {
  background: #f7f9fb;
  border: 1px solid #f2f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Icon sizes */
.icon-15 { width: 15px; height: 15px; }
.icon-18 { width: 18px; height: 18px; }
.icon-19 { width: 19px; height: 19px; }

/* Gap utilities */
.gap-15 { gap: 15px; }

/* Colors */
.text-mirage { color: #0D122D; }
.text-mirage-80 { color: #3D4157; }
.text-mirage-70 { color: #56596C; }
.text-mirage-60 { color: #6E7181; }
.text-mirage-30 { color: #B6B8C0; }
.text-muted { color: var(--color-muted); }
.text-brand-blue { color: #1a3eff; }
.bg-zebra { background-color: #FAFAFA; }

/* Status badge with dot */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  min-height: 28px;
  box-sizing: border-box;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge-active {
  border: 1px solid #bbf7d0;
}

.status-badge-draft {
  border: 1px solid #e5e7eb;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot-active {
  background-color: #16a34a;
}

.status-dot-draft {
  background-color: #9ca3af;
}

.status-badge-failed {
  border: 1px solid #fecaca;
}

.status-dot-failed {
  background-color: #dc2626;
}

/* Row actions dropdown */
.actions-dropdown {
  position: absolute;
  right: 0;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  z-index: 100;
  width: max-content;
  min-width: 80px;
  padding: 8px;
  display: flex;
  flex-direction: column;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 8px;
  gap: 12px;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  border-radius: 6px;
  font-size: 14px;
  color: #3D4157;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.action-item:hover {
  background-color: var(--color-primary-light, #E6EAFF);
}

.action-item-danger {
  color: #dc2626;
}

.action-item-danger:hover {
  background-color: #fef2f2;
}

.action-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
}

.action-divider {
  height: 1px;
  background-color: var(--color-link-water, #DFEAF2);
  margin: 4px 0;
}

.action-toggle {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid var(--color-link-water, #DFEAF2);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-mirage-60, #6E7181);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.action-toggle:hover,
.action-toggle-active {
  background: #f5f7ff;
  border-color: var(--color-blue-30, #B3BFFF);
  color: var(--color-blue, #1814F3);
}

.action-toggle:focus-visible {
  outline: none;
  border-color: var(--color-blue, #1814F3);
  box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.15);
}

/* Pagination */
.pagy-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 14px;
  color: var(--color-mirage-70, #56596C);
}

.pagy-nav .page a,
.pagy-nav .page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--color-mirage-70, #56596C);
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pagy-nav .page a:hover {
  background: var(--color-primary-light, #E6EAFF);
  color: var(--color-blue, #1814F3);
}

.pagy-nav .page.active {
  background: var(--color-blue, #0029FF);
  color: #ffffff;
  font-weight: 600;
  border-radius: 8px;
}

.pagy-nav .page.disabled {
  color: var(--color-disabled, #C4C6C8);
  pointer-events: none;
}

.pagy-nav .page.gap {
  background: transparent;
  min-width: auto;
  padding: 0 4px;
  letter-spacing: 2px;
}

.pagy-nav .page.prev,
.pagy-nav .page.next {
  margin: 0 4px;
}

.pagy-nav .page.prev a,
.pagy-nav .page.next a {
  font-weight: 500;
  color: var(--color-mirage-80, #3D4157);
}

/* ==========================================================================
   DISABLED STATES
   One quiet idiom everywhere: an inactive control keeps its shape and reads
   as present but unavailable (lower contrast, not-allowed cursor), never a
   grey slab painted over it. The Motion buttons refine this per variant
   (see "Inactive Motion buttons" below); .is-locked is the "needs live
   access" variant that stays focusable so its reason can show on hover.
   ========================================================================== */
a:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

button:disabled,
a.disabled {
  opacity: 0.55;
  box-shadow: none;
}

a.disabled {
  cursor: not-allowed;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--color-mirage-05, #F3F3F5);
  color: var(--color-mirage-60, #6E7181);
}

/* Tailwind-like utility classes */
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-white { background-color: #ffffff; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-600 { background-color: #2563eb; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-green-50 { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-600 { background-color: #16a34a; }
.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-yellow-100 { background-color: #fef3c7; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-gray-400 { background-color: #9ca3af; }

.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }
.text-blue-600 { color: #2563eb; }
.text-blue-700 { color: #1d4ed8; }
.text-blue-800 { color: #1e40af; }
.text-blue-900 { color: #1e3a8a; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.text-green-800 { color: #166534; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.text-red-800 { color: #991b1b; }
.text-red-900 { color: #7f1d1d; }
.text-yellow-800 { color: #92400e; }
.text-purple-800 { color: #6b21a8; }
.text-white { color: #ffffff; }

.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-blue-500 { border-color: #3b82f6; }
.border-green-400 { border-color: #4ade80; }
.border-green-200 { border-color: #bbf7d0; }
.border-amber-400 { border-color: #fbbf24; }
.border-red-200 { border-color: #fecaca; }
.border-transparent { border-color: transparent; }

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }

.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }

.uppercase { text-transform: uppercase; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   DRAWFLOW OVERRIDES
   Custom styling for workflow canvas and nodes
   ========================================================================== */
#drawflow {
  width: 100%;
  height: 100%;
  background: #ffffff;
  background-size: 14px 14px;
  background-image: radial-gradient(#DFEAF2 1px, transparent 1px);
}

/* Original drawflow styles - keep for other visualizations */
.drawflow .drawflow-node {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #0D122D !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  width: max-content !important;
  min-width: 240px;
  max-width: 420px;
}

.drawflow .drawflow-node.selected .custom-node,
.drawflow .drawflow-node.selected .base-node {
  border: 1px solid var(--color-blue-90, #1A3EFF) !important;
}


.node-warning-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  width: 28px;
  height: 28px;
  padding: 0;
  z-index: 5;
}

/* Decision nodes: move warning badge to the left to avoid overlapping port labels */
#drawflow .drawflow .drawflow-node.IfElse .node-warning-badge,
#drawflow .drawflow .drawflow-node.Condition .node-warning-badge,
#drawflow .drawflow .drawflow-node.Decision .node-warning-badge {
  right: auto;
  left: -10px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.4);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  box-sizing: border-box;
}

.node-warning-badge svg {
  width: 18px;
  height: 18px;
}

.node-warning-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  z-index: 6;
  padding: 6px 8px;
  border-radius: 6px;
  background: #0D122D;
  color: #ffffff;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

.node-warning-badge:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.node-warning-badge:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(245, 158, 11, 0.5);
}

/* Node context menu trigger button */
#drawflow .node-menu-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: var(--color-mirage-30, #B6B8C0);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  z-index: 5;
  padding: 0;
  outline: none;
  box-shadow: none;
}

#drawflow .node-menu-btn:hover {
  background-color: var(--color-mirage-05, #F3F3F5);
  color: var(--color-mirage-80, #3D4157);
}

/* Shared floating context menu for nodes */
.node-context-menu {
  position: fixed;
  z-index: 10000;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  min-width: 160px;
  padding: 8px;
  display: flex;
  flex-direction: column;
}

.node-context-menu.hidden {
  display: none;
}

.drawflow .drawflow-node .inputs,
.drawflow .drawflow-node .outputs {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
  border: 0 !important;
  background: transparent !important;
  cursor: crosshair !important;
}

.drawflow .connection .main-path {
  fill: none !important;
  stroke-width: 5px !important;
  stroke: #DFEAF2 !important;
  pointer-events: all !important;
  cursor: pointer !important;
}

.drawflow .connection .main-path:hover {
  stroke: var(--color-blue-90, #1A3EFF) !important;
  stroke-width: 6px !important;
}

.drawflow .drawflow-delete {
  background: #ef4444;
  color: white;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ==========================================================================
   CUSTOM OUTPUT PORTS
   Circle-style output ports with labels
   ========================================================================== */
.custom-outputs {
  position: absolute;
  right: 0;
  top: 46%;
  transform: translate(50%, -50%);
}

.drawflow-node-output {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 20px;
  height: 20px;
  justify-content: center;
  margin-bottom: 5px;
}

.drawflow-node-output::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 14px;
  height: 14px;
  background: #DFEAF2;
  border-radius: 50%;
  border: 1.5px solid #DFEAF2;
}

.custom-port-label {
  max-width: 40px;
  margin-left: -40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

/* ==========================================================================
   CUSTOM INPUT PORT (Arrow style)
   ========================================================================== */
.custom-port-arrow {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-81%, -67%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   VERTICAL LAYOUT MODE
   Adjustments for vertical workflow orientation (applied when #drawflow has
   the `.vertical` class)
   ========================================================================== */

/* Inputs container: tall enough to span the detached "Connect Here" pill
   AND the node's top edge. pointer-events is gated by .connection-mode so it
   only intercepts clicks while a connection drag is in flight (otherwise
   panning/clicks above the node would be eaten by the invisible container). */
#drawflow.vertical .drawflow .drawflow-node .inputs {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  right: auto !important;
  transform: translate(-50%, -100%) !important;
  display: block !important;
  height: 44px !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  isolation: isolate;
}

/* Outputs container: decision-style nodes keep a tight flex layout for the
   3 branch labels (PASS / HUMAN_REVIEW / REJECT). Non-decision override is
   below: a tall block container that covers the "Connect" pill area. */
#drawflow.vertical .drawflow .drawflow-node .outputs {
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translate(-50%, -66%) !important;
  flex-direction: row !important;
  display: flex !important;
  gap: 0;
  width: auto !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  isolation: isolate;
}

#drawflow.vertical .drawflow .drawflow-node:not(.IfElse):not(.Condition):not(.Decision) .outputs {
  transform: translate(-50%, 0) !important;
  display: block !important;
  height: 44px !important;
  cursor: crosshair !important;
}

/* Match cursor on the input container during a drag so the "Drop Here"
   pill area reads as a valid drop target. */
#drawflow.vertical.connection-mode .drawflow .drawflow-node .inputs {
  cursor: crosshair !important;
}

/* Activate hit testing on the input container only while a connection drag
   is active. This is what makes mouseup land on .inputs (a node descendant)
   when the user releases on the detached "Drop Here" pill cue. Output
   containers stay pointer-events: none so connection-line clicks pass
   through to the SVG path for selection/deletion. */
#drawflow.vertical.connection-mode .drawflow .drawflow-node .inputs {
  pointer-events: auto !important;
}

/* Width of the tall input/output hit container for non-decision nodes. */
#drawflow.vertical .drawflow .drawflow-node:not(.IfElse):not(.Condition):not(.Decision) .inputs,
#drawflow.vertical .drawflow .drawflow-node:not(.IfElse):not(.Condition):not(.Decision) .outputs {
  width: calc(100% - 44px) !important;
  min-width: 170px !important;
  max-width: 360px !important;
}

/* The .input/.output port is the actual Drawflow drag anchor. We pin it
   absolutely inside the (now tall) inputs/outputs container so the visible
   port still sits at the node edge — Drawflow's drag-start hit detection
   and our custom path routing both expect the anchor at the edge. The
   surrounding tall container covers the pill area for mouseup capture. */
#drawflow.vertical .drawflow .drawflow-node .input,
#drawflow.vertical .drawflow .drawflow-node .input:hover {
  position: absolute !important;
  left: 50% !important;
  /* Vendored drawflow.min.css sets `top: 2px`; with height+top set, `bottom`
     is ignored (over-constrained), floating the port 35px above the node. */
  top: auto !important;
  bottom: -7px !important;
  transform: translateX(-50%) !important;
  width: 280px !important;
  height: 14px !important;
  margin: 0 !important;
  cursor: crosshair !important;
  background: transparent !important;
  pointer-events: auto !important;
  border-radius: 8px;
  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  z-index: 100 !important;
}

#drawflow.vertical .drawflow .drawflow-node:not(.IfElse):not(.Condition):not(.Decision) .output,
#drawflow.vertical .drawflow .drawflow-node:not(.IfElse):not(.Condition):not(.Decision) .output:hover {
  position: absolute !important;
  left: 50% !important;
  top: -7px !important;
  transform: translateX(-50%) !important;
  width: 280px !important;
  height: 14px !important;
  margin: 0 !important;
  cursor: crosshair !important;
  background: transparent !important;
  pointer-events: auto !important;
  border-radius: 8px;
  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  z-index: 100 !important;
}

#drawflow.vertical .drawflow .drawflow-node .input:hover,
#drawflow.vertical .drawflow .drawflow-node .output:hover {
  background: transparent !important;
}

/* Detached connect affordance: explicit enough to teach the interaction,
   but anchored off the node's real width instead of a fixed port strip. */
#drawflow.vertical .drawflow .drawflow-node.port-hover-output:not(.IfElse):not(.Condition):not(.Decision),
#drawflow.vertical .drawflow .drawflow-node.port-hover-input {
  border-color: rgba(77, 105, 255, 0.44) !important;
}

/* (Stale flex sizing rule removed — .input/.output are absolutely positioned
   inside their now-tall container, see rules above.) */

/* Detached pill cue rendered above (input) or below (output) the node card.
   The pill has pointer-events: none; releases that land on it are caught by
   the document-level fallback in visualization_controller.js. */
#drawflow.vertical .drawflow .drawflow-node.port-hover-output:not(.IfElse):not(.Condition):not(.Decision) .outputs::after,
#drawflow.vertical .drawflow .drawflow-node.port-hover-input .inputs::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1A3EFF;
  background: #FFFFFF;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(84, 109, 255, 0.32);
  box-shadow: 0 4px 14px rgba(13, 18, 45, 0.1);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1000;
}

/* Pill sits INSIDE the tall .inputs/.outputs container — that way mouseup
   on the pill area falls through (pill has pointer-events: none) onto the
   container, which is a node descendant and gets caught by the canvas
   mouseup fallback. Anchored near the inner edge of the container so the
   pill sits close to the node card (about 8px gap), not floating far away. */
#drawflow.vertical .drawflow .drawflow-node.port-hover-input .inputs::after {
  bottom: 8px;
  content: "Connect Here";
}

#drawflow.vertical .drawflow .drawflow-node.port-hover-output:not(.IfElse):not(.Condition):not(.Decision) .outputs::after {
  top: 8px;
  content: "Connect";
}

#drawflow.vertical.connection-mode .drawflow .drawflow-node.port-hover-input .inputs::after {
  content: "Drop Here";
  color: #FFFFFF;
  background: #1A3EFF;
  border-color: #1A3EFF;
  box-shadow: 0 6px 16px rgba(26, 62, 255, 0.32);
}

/* Decision node: 3 outputs spread across the row, each wide enough for
   its label so clicking the label drags from that specific port. */
#drawflow.vertical .drawflow .drawflow-node.IfElse .outputs,
#drawflow.vertical .drawflow .drawflow-node.Condition .outputs,
#drawflow.vertical .drawflow .drawflow-node.Decision .outputs {
  width: 260px;
  justify-content: space-between;
}

#drawflow.vertical .drawflow .drawflow-node.IfElse .output,
#drawflow.vertical .drawflow .drawflow-node.Condition .output,
#drawflow.vertical .drawflow .drawflow-node.Decision .output {
  width: 100px !important;
  height: 14px !important;
  flex: 0 0 100px !important;
  margin: 0 !important;
  position: relative !important;
  cursor: crosshair !important;
}

/* Decision port labels: sit near the TOP of the port, just below the
   node edge, so they read as belonging to the Decision node.
   pointer-events: none so clicks pass through to the parent port. */
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_1::after,
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_2::after,
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_3::after,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_1::after,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_2::after,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_3::after,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_1::after,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_2::after,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_3::after {
  left: 50% !important;
  top: 2px !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  pointer-events: none;
}

#drawflow.vertical .drawflow .drawflow-node.IfElse .output_1:hover::after,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_1:hover::after,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_1:hover::after,
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_2:hover::after,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_2:hover::after,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_2:hover::after,
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_3:hover::after,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_3:hover::after,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_3:hover::after {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 8px rgba(13, 18, 45, 0.08);
}

/* Vertical layout: Decision node matches the height of other nodes (72px).
   The extra 100px height from the horizontal layout was only needed to stack
   3 output ports vertically along the right edge. */
#drawflow.vertical .drawflow .drawflow-node.IfElse .base-node,
#drawflow.vertical .drawflow .drawflow-node.Condition .base-node,
#drawflow.vertical .drawflow .drawflow-node.Decision .base-node {
  height: 72px !important;
}

/* Node drag items */
.node-drag-item {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.node-drag-item:hover {
  transform: translateY(-1px);
}

.node-drag-item:active {
  transform: scale(0.98);
  opacity: 0.8;
}

/* Sidebar transitions */
[data-visualization-ui-target="leftSidebar"],
[data-visualization-ui-target="rightSidebar"] {
  transition: width 0.2s ease, opacity 0.2s ease;
}

[data-visualization-ui-target="leftSidebar"].collapsed,
[data-visualization-ui-target="rightSidebar"].collapsed {
  opacity: 0;
}

/* Form inputs */
input[type="text"],
input[type="url"],
input[type="number"],
input[type="email"],
select:not(.btn-demo-select):not(.filter-inline-select),
textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
}

input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
select:not(.btn-demo-select):not(.filter-inline-select):focus,
textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Form input - Motion styled */
.form-input {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-mirage, #0D122D);
  background-color: #ffffff;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.form-input::placeholder {
  color: var(--color-mirage-30, #B6B8C0);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-blue, #1814F3);
  box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.1);
}

/* Form card */
.form-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-link-water, #DFEAF2);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Authentication */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 32px;
  background: linear-gradient(135deg, #f3f6ff 0%, #f7fbf5 55%, #fff7f0 100%);
  position: relative;
  overflow: hidden;
  font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
  color: #0b1227;
}

.auth-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  width: 100%;
}

.auth-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(0);
  opacity: 0.6;
  animation: auth-float 16s ease-in-out infinite;
}

.auth-orb-1 {
  width: 260px;
  height: 260px;
  top: -40px;
  left: -60px;
  background: radial-gradient(circle at 30% 30%, #b9d3ff, transparent 70%);
}

.auth-orb-2 {
  width: 220px;
  height: 220px;
  bottom: -60px;
  right: 15%;
  background: radial-gradient(circle at 50% 50%, #c5f2d8, transparent 70%);
  animation-delay: -4s;
}

.auth-orb-3 {
  width: 180px;
  height: 180px;
  top: 30%;
  right: -40px;
  background: radial-gradient(circle at 40% 40%, #ffd7b0, transparent 70%);
  animation-delay: -8s;
}

@keyframes auth-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
  100% {
    transform: translateY(0);
  }
}

.auth-side {
  position: relative;
  z-index: 1;
  max-width: 520px;
}

.auth-brand {
  display: block;
  height: 28px;
  width: auto;
  margin-bottom: 16px;
}

.auth-title {
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  margin-bottom: 16px;
}

.auth-subtitle {
  font-size: 15px;
  color: #4b5563;
  margin-bottom: 32px;
}

.auth-metrics {
  display: flex;
  gap: 24px;
}

.auth-metric {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(24, 20, 243, 0.08);
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 140px;
  box-shadow: 0 6px 16px rgba(12, 20, 36, 0.06);
}

.auth-metric-value {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #0b1227;
}

.auth-metric-label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.auth-card {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(24, 20, 243, 0.08);
  box-shadow: 0 18px 40px rgba(12, 20, 36, 0.12);
  padding: 28px;
  animation: auth-rise 0.5s ease-out;
}

@keyframes auth-rise {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.auth-card-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px 0;
}

.auth-card-header p {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 20px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-label {
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  display: block;
  margin-bottom: 8px;
}

.auth-field .form-input {
  background: #f5f7ff;
  border-color: #d9e1f7;
}

.auth-field .form-input:focus {
  background: #ffffff;
}

.auth-submit {
  margin-top: 8px;
  height: 44px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 12px;
}

.auth-forgot-link {
  text-align: right;
  margin-top: 16px;
  font-size: 13px;
}

.auth-errors {
  background: var(--color-secondary-token-red-light, #FFE0EB);
  color: var(--color-token-red-ink);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.auth-errors p {
  margin: 0;
}

.auth-errors p + p {
  margin-top: 4px;
}

.auth-footer-link {
  text-align: center;
  font-size: 14px;
  color: var(--color-mirage-70, #56596C);
  margin-top: 20px;
}

.invite-modal-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: var(--color-primary-light, #E6EAFF);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .auth-shell {
    padding: 40px 20px;
  }

  .auth-content {
    grid-template-columns: 1fr;
  }

  .auth-side {
    text-align: center;
    margin: 0 auto;
  }

  .auth-metrics {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Workflow badge */
.workflow-badge {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
  border: 1px solid rgba(24, 20, 243, 0.1);
  border-radius: 24px;
  font-size: 13px;
  color: var(--color-mirage-60, #6E7181);
  margin-bottom: 32px;
}

.workflow-badge strong {
  color: var(--color-blue, #1814F3);
  font-weight: 600;
}

/* Signed-in user chip */
.nav-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: #f0f4ff;
  border: 1px solid #dfeaf2;
  color: #1a3eff;
  font-size: 12px;
  font-weight: 500;
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: #1814F3;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.user-email {
  color: #1a3eff;
}

@media (max-width: 640px) {
  .user-email {
    display: none;
  }
}

/* Goal cards */
.goal-cards-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
}

.goal-cards-container form,
.goal-cards-container button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.goal-card {
  background-color: #ffffff;
  border-radius: 12px;
  border: none !important;
  outline: none !important;
  padding: 20px 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.goal-card:hover {
  box-shadow: 0 8px 24px rgba(24, 20, 243, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

.goal-card-custom {
  background-color: #fafafa;
}

/* Goal template text */
.goal-template-text {
  text-decoration: none !important;
}

.goal-icon-container {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   WORKFLOW BUILDER STYLES
   ========================================================================== */

/* Top toolbar */
.builder-toolbar {
  height: 56px;
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-link-water, #DFEAF2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}

.toolbar-divider {
  width: 1px;
  height: 24px;
  background-color: var(--color-link-water, #DFEAF2);
}

.builder-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--color-mirage-60, #6E7181);
  transition: all 0.2s ease;
  text-decoration: none;
}

.builder-back-btn:hover {
  background-color: var(--color-mirage-05, #F3F3F5);
  color: var(--color-mirage, #0D122D);
}

.builder-workflow-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--color-link-water, #DFEAF2);
}

.builder-workflow-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-mirage, #0D122D);
  margin: 0;
}

/* Inline-rename variant: reads as the heading until focused (prototype).
   input-element selectors so the global input styling doesn't outspecify
   the resting borderless look. */
input.builder-workflow-name-input {
  /* Prototype: 18px/600, lh 28, 0 4px padding, borderless at rest. */
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--cb-ink, #14111d);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 4px;
  margin-left: -4px;
  background: transparent;
  box-shadow: none;
  width: 100%;
  max-width: 280px;
}
input.builder-workflow-name-input:hover { border-color: var(--cb-line, #e6e6e7); }
input.builder-workflow-name-input:focus {
  outline: none;
  border-color: var(--cb-line-strong, #d5d3d7);
  background: #ffffff;
}

.builder-workflow-code {
  display: none;
}

.builder-zoom-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: var(--color-mirage-05, #F3F3F5);
  border-radius: 8px;
  padding: 4px;
}

.builder-zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--color-mirage-60, #6E7181);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.builder-zoom-btn:hover {
  background-color: #ffffff;
  color: var(--color-mirage, #0D122D);
}

.builder-zoom-label {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-mirage-60, #6E7181);
  cursor: pointer;
  background: none;
  border: none;
}

.builder-zoom-label:hover {
  color: var(--color-mirage, #0D122D);
}

.builder-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--color-mirage-60, #6E7181);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.builder-icon-btn:hover {
  background-color: var(--color-mirage-05, #F3F3F5);
  color: var(--color-mirage, #0D122D);
}

/* Left sidebar */
.builder-sidebar {
  width: 340px;
  background-color: #ffffff;
  border-right: 1px solid var(--color-link-water, #DFEAF2);
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
}

.builder-sidebar.collapsed {
  width: 0;
  border-right: none;
  overflow: hidden;
}

/* Sidebar edge toggle - positioned relative to main content area */
.sidebar-edge-toggle {
  position: absolute;
  top: 50%;
  left: 328px;
  transform: translateY(-50%);
  width: 24px;
  height: 48px;
  background: #ffffff;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-left: none;
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: left 0.2s ease, background 0.2s ease;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}

.sidebar-edge-toggle:hover {
  background: #f3f4f6;
}

.sidebar-toggle-icon {
  width: 16px;
  height: 16px;
  color: #6b7280;
  transition: transform 0.2s ease;
}

/* Collapsed state */
.builder-sidebar.collapsed + .sidebar-edge-toggle {
  left: 0;
}

.builder-sidebar.collapsed + .sidebar-edge-toggle .sidebar-toggle-icon {
  transform: rotate(180deg);
}

/* Right Sidebar - Node Configuration */
.builder-right-sidebar {
  width: 340px;
  min-width: 340px;
  max-width: 340px;
  flex-shrink: 0;
  background-color: #ffffff;
  border-left: 1px solid var(--color-link-water, #DFEAF2);
  display: flex;
  flex-direction: column;
  opacity: 1;
  overflow: hidden;
  transition: min-width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease,
              border-color 0.3s ease;
}

.builder-right-sidebar.collapsed {
  min-width: 0;
  max-width: 0;
  opacity: 0;
  border-color: transparent;
  pointer-events: none;
}

/* Header - matches left sidebar tabs area */
.builder-right-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 14px 16px;
  border-bottom: 1px solid var(--color-link-water, #DFEAF2);
  background-color: #ffffff;
  flex-shrink: 0;
}

.builder-right-sidebar-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-mirage-60, #6E7181);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.builder-right-sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--color-mirage-60, #6E7181);
  cursor: pointer;
  transition: all 0.2s ease;
}

.builder-right-sidebar-close:hover {
  background-color: var(--color-mirage-05, #F3F3F5);
  color: var(--color-mirage, #0D122D);
}

/* Node info card - matches left sidebar node items */
.builder-right-sidebar-node-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 12px 16px 0 16px;
  background-color: #ffffff;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.builder-right-sidebar-node-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--node-vendor-color, var(--color-blue, #1814F3));
  border-radius: 10px 0 0 10px;
}

.builder-right-sidebar-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  background-color: var(--color-blue-05, #F2F4FF);
  color: var(--color-blue, #1814F3);
}

.builder-right-sidebar-node-icon svg {
  width: 20px;
  height: 20px;
}

.sidebar-node-initials {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

.builder-right-sidebar-node-info {
  flex: 1;
  min-width: 0;
}

.builder-right-sidebar-node-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-mirage, #0D122D);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.builder-right-sidebar-node-type {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-mirage-60, #6E7181);
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.builder-right-sidebar-node-type-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-blue, #1814F3);
  background-color: var(--color-blue-05, #F2F4FF);
  padding: 2px 6px;
  border-radius: 4px;
}

.builder-right-sidebar-node-desc {
  font-size: 12px;
  color: var(--color-mirage-70, #56596C);
}

.builder-right-sidebar-node-code {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-blue, #1814F3);
  background: var(--color-blue-05, #F2F4FF);
  padding: 1px 5px;
  border-radius: 4px;
}

.builder-right-sidebar-node-price {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-token-green-ink);
  background: var(--color-secondary-token-green-light, #D9FAEC);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Form content area */
.builder-right-sidebar-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  box-sizing: border-box;
  max-width: 100%;
}

.builder-right-sidebar-content * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Empty state */
.builder-right-sidebar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--color-mirage-30, #B6B8C0);
  font-size: 13px;
  text-align: center;
}

/* Form section styling - matches left sidebar groups */
.builder-form-section {
  margin-bottom: 16px;
}

.builder-form-section:last-child {
  margin-bottom: 0;
}

.builder-form-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-mirage-30, #B6B8C0);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-link-water, #DFEAF2);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Form inputs - matches left sidebar search input */
.builder-form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-mirage-80, #3D4157);
  margin-bottom: 4px;
}

.builder-form-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--color-mirage, #0D122D);
  background-color: var(--color-mirage-05, #F3F3F5);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.builder-form-input::placeholder {
  color: var(--color-mirage-30, #B6B8C0);
}

.builder-form-input:focus {
  outline: none;
  background-color: #ffffff;
  border-color: var(--color-blue, #1814F3);
  box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.1);
}

.builder-form-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--color-mirage, #0D122D);
  background-color: var(--color-mirage-05, #F3F3F5);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.2s ease;
  box-sizing: border-box;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236E7181'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 36px;
}

.builder-form-select:focus {
  outline: none;
  background-color: #ffffff;
  border-color: var(--color-blue, #1814F3);
  box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.1);
}

/* Small uppercase eyebrow above a control in a node form (Execution Mode,
   Sample Scenario, Demo Applicant, API Credential). Shared by the billing
   product and applicant source forms, where it was an inline style. */
.builder-form-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-mirage-70, #56596C);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.builder-form-eyebrow-tight {
  margin-bottom: 6px;
}

/* Two-up segmented control (Sample Data / Live Test, Test / Live). */
.builder-mode-toggle {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-link-water, #DFEAF2);
  background: var(--color-mirage-05, #F3F3F5);
}

.builder-mode-btn {
  flex: 1;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.builder-mode-btn:first-child {
  border-radius: 7px 0 0 7px;
}

.builder-mode-btn:last-child {
  border-radius: 0 7px 7px 0;
}

/* Initial paint only — csv_upload_controller swaps background/color through
   element.style once either half is clicked, which outranks these. */
.builder-mode-btn-active {
  background: var(--color-mirage, #0D122D);
  color: #ffffff;
}

.builder-mode-btn-idle {
  background: transparent;
  color: var(--color-mirage-70, #56596C);
}

/* Unit picker sitting beside a numeric input (Wait duration, Adverse Action
   dispute window): shrink-to-fit instead of the full-width default. */
.builder-form-select-unit {
  width: auto;
  min-width: 100px;
}

/* Adverse Action "auto-detected at execution time" capability list. */
.aa-capability-note {
  line-height: 1.6;
}

.aa-capability-note ul {
  margin: 0;
  padding-left: 16px;
}

.builder-form-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--color-mirage, #0D122D);
  background-color: var(--color-mirage-05, #F3F3F5);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.2s ease;
  box-sizing: border-box;
  resize: vertical;
  min-height: 80px;
}

.builder-form-textarea::placeholder {
  color: var(--color-mirage-30, #B6B8C0);
}

.builder-form-textarea:focus {
  outline: none;
  background-color: #ffffff;
  border-color: var(--color-blue, #1814F3);
  box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.1);
}

.builder-form-help {
  font-size: 11px;
  color: var(--color-mirage-60, #6E7181);
  margin-top: 3px;
  line-height: 1.4;
}

/* Info boxes in forms */
.builder-form-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background-color: var(--color-blue-05, #F2F4FF);
  border: 1px solid var(--color-blue-30, #B3BFFF);
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-mirage-80, #3D4157);
}

.builder-form-info svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-blue, #1814F3);
}

.builder-form-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background-color: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-mirage-80, #3D4157);
}

.builder-form-warning svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #D97706;
}

.builder-form-success {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background-color: #ECFDF5;
  border: 1px solid #6EE7B7;
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-mirage-80, #3D4157);
}

.builder-form-success svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #059669;
}

/* Form container */
.builder-form-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Tabs */
.builder-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-link-water, #DFEAF2);
}

.builder-tab {
  flex: 1;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--color-mirage-60, #6E7181);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.builder-tab:hover {
  color: var(--color-mirage, #0D122D);
}

.builder-tab-active {
  color: var(--color-blue, #1814F3);
  border-bottom-color: var(--color-blue, #1814F3);
}

/* Search */
.builder-search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-link-water, #DFEAF2);
}

.builder-search-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--color-mirage, #0D122D);
  background-color: var(--color-mirage-05, #F3F3F5);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.builder-search-input::placeholder {
  color: var(--color-mirage-30, #B6B8C0);
}

.builder-search-input:focus {
  outline: none;
  background-color: #ffffff;
  border-color: var(--color-blue, #1814F3);
  box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.1);
}

/* Node list */
.builder-node-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.builder-node-empty {
  color: var(--color-mirage-60, #6E7181);
  font-size: 13px;
  padding: 12px 8px;
  text-align: center;
}

.builder-tab-description {
  font-size: 12px;
  color: var(--color-mirage-60, #6E7181);
  margin-bottom: 16px;
}

/* Node groups */
.builder-node-group {
  margin-bottom: 20px;
}

.builder-node-group:last-child {
  margin-bottom: 0;
}

.builder-node-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-mirage-60, #6E7181);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.builder-node-group-title:hover {
  background-color: var(--color-mirage-05, #F3F3F5);
}

.builder-group-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--color-mirage-30, #B6B8C0);
}

.builder-group-title-text {
  flex: 1;
  text-align: left;
}

/* Collapsed state */
.builder-node-group[data-collapsed="true"] .builder-group-chevron {
  transform: rotate(-90deg);
}

.builder-node-group[data-collapsed="true"] .builder-node-items {
  display: none;
}

.builder-vendor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.builder-node-count {
  font-weight: 400;
  color: var(--color-mirage-30, #B6B8C0);
  margin-left: auto;
}

/* Node items */
.builder-node-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.builder-node-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background-color: #ffffff;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 10px;
  cursor: grab;
  transition: all 0.2s ease;
  min-height: 44px;
  touch-action: none;
  position: relative;
  overflow: hidden;
}

.builder-node-item[data-tooltip] {
  overflow: visible;
}

.builder-node-vendor-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 10px 0 0 10px;
}

.builder-node-item:hover {
  border-color: var(--color-blue-30, #B3BFFF);
  box-shadow: 0 2px 8px rgba(24, 20, 243, 0.08);
}

.builder-node-item:active {
  cursor: grabbing;
  border-color: var(--color-blue, #1814F3);
  box-shadow: 0 4px 12px rgba(24, 20, 243, 0.15);
}

.builder-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}

.builder-node-icon svg {
  width: 18px;
  height: 18px;
  color: var(--node-glyph-color, #ffffff);
}

/* Shared cascade icon sprite host (offscreen; symbols referenced via <use>). */
.cascade-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.builder-node-initials {
  font-size: 10px;
  font-weight: 700;
  color: #374151;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

/* Vendor initials on canvas nodes */
.canvas-node-initials {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

/* Drag preview - minimal node representation */
.builder-drag-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.builder-drag-preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
}

.builder-drag-preview-icon svg {
  width: 16px;
  height: 16px;
  color: #374151;
}

.builder-drag-preview-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-mirage, #0D122D);
  white-space: nowrap;
}

.builder-node-content {
  flex: 1;
  min-width: 0;
}

.builder-node-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-mirage, #0D122D);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.builder-node-desc {
  font-size: 11px;
  color: var(--color-mirage-60, #6E7181);
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.builder-node-configurable-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-blue, #1814F3);
  background-color: var(--color-blue-05, #F2F4FF);
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
}

.builder-node-api-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #005934;
  background-color: #D9FAEC;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  margin-left: 4px;
}

.builder-node-mock-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #92640D;
  background-color: #FFF3D6;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  margin-left: 4px;
}

.builder-node-drag-handle {
  color: var(--color-mirage-30, #B6B8C0);
  flex-shrink: 0;
}

/* Node tooltip on hover */
.builder-node-item {
  position: relative;
}

.builder-node-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 12px;
  top: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #0D122D;
  color: #ffffff;
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
  max-width: 240px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.1s ease-out, transform 0.1s ease-out, visibility 0.1s ease-out;
  z-index: 20;
  pointer-events: none;
}

.builder-node-item[data-tooltip]::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 100%;
  margin-top: 0;
  border: 6px solid transparent;
  border-bottom-color: #0D122D;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease-out, visibility 0.1s ease-out;
  z-index: 20;
  pointer-events: none;
}

.builder-node-item[data-tooltip]:hover::after,
.builder-node-item[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hide hover effects during drag operations */
.builder-sidebar-dragging .builder-node-item:hover {
  border-color: var(--color-link-water, #DFEAF2);
  box-shadow: none;
}

.builder-sidebar-dragging .builder-node-item[data-tooltip]::after,
.builder-sidebar-dragging .builder-node-item[data-tooltip]::before {
  opacity: 0;
  visibility: hidden;
}

.builder-node-drag-handle svg {
  width: 16px;
  height: 16px;
}

/* Canvas wrapper — positions the empty-state overlay relative to the canvas */
.builder-canvas-wrapper {
  flex: 1 1 0%;
  min-height: 0;
  position: relative;
}

/* Canvas area */
.builder-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: grab;
  background-color: var(--color-mirage-05, #F3F3F5);
  background-image: radial-gradient(var(--color-mirage-20, #CFD0D5) 1px, transparent 1px);
  background-size: 20px 20px;
}

.builder-canvas:active {
  cursor: grabbing;
}

/* Empty canvas state — centered in visible canvas area */
.builder-canvas-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 5;
  pointer-events: none;
}

.builder-canvas-empty.hidden {
  display: none;
}

.builder-canvas-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--color-mirage-30);
  margin-bottom: 16px;
}

.builder-canvas-empty-heading {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-mirage-70);
  margin: 0 0 8px 0;
}

.builder-canvas-empty-subtext {
  font-size: 14px;
  color: var(--color-mirage-30);
  margin: 0;
}

/* Start node prompt — shown when canvas has nodes but no ApplicantSource */
.builder-start-prompt {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--color-blue-05);
  border: 1px solid var(--color-blue-30);
  border-radius: 8px;
  color: var(--color-mirage-80);
  font-size: 13px;
  font-weight: 500;
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}

.builder-start-prompt svg {
  color: var(--color-blue-70);
  flex-shrink: 0;
}

.builder-start-prompt.hidden {
  display: none;
}

/* START badge on ApplicantSource nodes */
.node-start-badge {
  position: absolute;
  top: -8px;
  left: 12px;
  padding: 0 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 16px;
  color: var(--color-blue-90, #1A3EFF);
  background: var(--color-blue-05, #F2F4FF);
  border: 1px solid var(--color-blue-30, #B3BFFF);
  border-radius: 10px;
  z-index: 2;
}

/* ==========================================================================
   CRITICAL: Drawflow container hierarchy must ALL fill the canvas

   After Drawflow.start(), the structure becomes:
   #drawflow.builder-canvas.parent-drawflow
     └── .drawflow (created by Drawflow - handles pan events)
           └── .precanvas (holds nodes, gets transformed)
   ========================================================================== */

/* The element we initialize Drawflow on - becomes .parent-drawflow */
#drawflow.parent-drawflow,
.builder-canvas.parent-drawflow {
  width: 100% !important;
  height: 100% !important;
  min-height: 400px;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

/* The main drawflow container - THIS handles pan/drag events */
#drawflow.parent-drawflow > .drawflow,
.parent-drawflow > .drawflow {
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  cursor: grab !important;
  background: transparent !important;
  overflow: visible !important;
  transform-origin: 0 0 !important;
}

#drawflow.parent-drawflow > .drawflow:active,
.parent-drawflow > .drawflow:active {
  cursor: grabbing !important;
}

/* Drawflow v0.x uses `.drawflow` as the transform layer */

/* Nodes should have move cursor */
.drawflow .drawflow-node {
  cursor: move !important;
}

/* ==========================================================================
   WORKFLOW BUILDER - Drawflow node customizations
   ========================================================================== */

#drawflow .drawflow .drawflow-node {
  background: #ffffff !important;
  border: 1px solid var(--color-link-water, #DFEAF2) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  padding: 0 !important;
  min-width: 220px !important;
  width: auto !important;
  overflow: visible !important;
}

#drawflow .drawflow .drawflow-node:hover {
  border-color: var(--color-blue-30, #B3BFFF) !important;
  box-shadow: 0 4px 12px rgba(24, 20, 243, 0.08) !important;
}

#drawflow .drawflow .drawflow-node.selected {
  border-color: var(--color-blue, #1814F3) !important;
  box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.15) !important;
}

/* Multi-select: same visual ring as Drawflow's .selected */
#drawflow .drawflow .drawflow-node.multi-selected {
  border-color: var(--color-blue, #1814F3) !important;
  box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.15) !important;
}

.drawflow .drawflow-node.multi-selected .custom-node,
.drawflow .drawflow-node.multi-selected .base-node {
  border: 1px solid var(--color-blue-90, #1A3EFF) !important;
}

/* Lasso selection rectangle */
.lasso-selection-rect {
  position: fixed;
  border: 1.5px dashed var(--color-blue-70, #4D69FF);
  background: rgba(24, 20, 243, 0.06);
  pointer-events: none;
  z-index: 9999;
}

/* Position connection port containers to align with visible node edges */
#drawflow .drawflow .drawflow-node .inputs {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
}

#drawflow .drawflow .drawflow-node .outputs {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translate(50%, -50%) !important;
  z-index: 10 !important;
}

/* Invisible clickable connection points */
#drawflow .drawflow .drawflow-node .input,
#drawflow .drawflow .drawflow-node .output {
  width: 20px !important;
  height: 30px !important;
  background: transparent !important;
  border: none !important;
  cursor: crosshair !important;
}

/* Decision node: give more vertical room for 3 ports */
#drawflow .drawflow .drawflow-node.IfElse .output,
#drawflow .drawflow .drawflow-node.Condition .output,
#drawflow .drawflow .drawflow-node.Decision .output {
  height: 26px !important;
  margin: 2px 0 !important;
}

/* Decision node output port labels — 3 branches: Pass / Human Review / Fail */
#drawflow .drawflow .drawflow-node.IfElse .output_1::after,
#drawflow .drawflow .drawflow-node.IfElse .output_2::after,
#drawflow .drawflow .drawflow-node.IfElse .output_3::after,
#drawflow .drawflow .drawflow-node.Decision .output_1::after,
#drawflow .drawflow .drawflow-node.Decision .output_2::after,
#drawflow .drawflow .drawflow-node.Decision .output_3::after {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#drawflow .drawflow .drawflow-node.IfElse .output_1::after,
#drawflow .drawflow .drawflow-node.Decision .output_1::after {
  content: 'Pass';
  color: var(--color-token-green-ink);
}

#drawflow .drawflow .drawflow-node.IfElse .output_2::after,
#drawflow .drawflow .drawflow-node.Decision .output_2::after {
  content: 'Human Review';
  color: var(--color-token-yellow-ink);
}

#drawflow .drawflow .drawflow-node.IfElse .output_3::after,
#drawflow .drawflow .drawflow-node.Decision .output_3::after {
  content: 'Reject';
  color: var(--color-token-red-ink);
}

/* Connection lines - thicker for easier manipulation */
#drawflow .drawflow .connection .main-path {
  stroke: var(--color-mirage-30, #B6B8C0) !important;
  stroke-width: 3px !important;
  cursor: pointer !important;
  marker-end: url(#drawflow-arrow) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke 140ms ease, stroke-width 140ms ease, opacity 140ms ease !important;
}

#drawflow .drawflow .connection:not(.connection--decision-pass):not(.connection--decision-human-review):not(.connection--decision-fail) .main-path:hover {
  stroke: var(--color-blue, #1814F3) !important;
  stroke-width: 4px !important;
}

/* Selected connection: thicker line so the user can tell their click landed.
   Clicking a connection sets Drawflow's connection_selected; pressing Delete
   or Backspace then removes it (handleGlobalKeydown in the controller). */
#drawflow .drawflow .connection.selected .main-path {
  stroke-width: 5px !important;
  filter: drop-shadow(0 0 4px rgba(26, 62, 255, 0.45));
}

/* Floating delete button shown at the midpoint of a connection on hover.
   Position is computed in JS from path.getPointAtLength(totalLength/2). */
#drawflow .connection-delete-btn {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  color: var(--color-token-red-ink);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 2px 8px rgba(13, 18, 45, 0.14);
}

#drawflow .connection-delete-btn.is-visible {
  display: flex;
}

#drawflow .connection-delete-btn:hover {
  background: #FA3A55;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(250, 58, 85, 0.32);
}

#drawflow .connection-delete-btn svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* Arrow head color on hover */
#drawflow .drawflow .connection:hover:not(.connection--decision-pass):not(.connection--decision-human-review):not(.connection--decision-fail) .main-path {
  marker-end: url(#drawflow-arrow-hover) !important;
}

/* Decision node branch colors: pass=green, human_review=yellow, fail=red */
#drawflow .drawflow .connection.connection--decision-pass .main-path {
  stroke: #00DF81 !important;
  marker-end: url(#drawflow-arrow-pass) !important;
}
#drawflow .drawflow .connection.connection--decision-human-review .main-path {
  stroke: #FFBB38 !important;
  marker-end: url(#drawflow-arrow-human-review) !important;
}
#drawflow .drawflow .connection.connection--decision-fail .main-path {
  stroke: #FA3A55 !important;
  marker-end: url(#drawflow-arrow-fail) !important;
}

/* Connection preview while composing an association */
#drawflow .drawflow .connection.connection--preview .main-path {
  stroke-width: 3px !important;
  stroke-dasharray: 8 6 !important;
  opacity: 0.92 !important;
  animation: drawflow-connection-preview 0.9s linear infinite;
}

#drawflow .drawflow .connection.connection--preview:not(.connection--decision-pass):not(.connection--decision-human-review):not(.connection--decision-fail) .main-path {
  stroke: #7B8193 !important;
  marker-end: url(#drawflow-arrow) !important;
}

#drawflow .drawflow .drawflow-node.connection-target--preview .base-node,
#drawflow .drawflow .drawflow-node.connection-target--preview .custom-node {
  box-shadow: 0 0 0 2px rgba(24, 20, 243, 0.16), 0 12px 26px rgba(24, 20, 243, 0.12) !important;
}

#drawflow .drawflow .drawflow-node.connection-target--preview::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 24px;
  border: 2px dashed rgba(24, 20, 243, 0.28);
  pointer-events: none;
}

@keyframes drawflow-connection-preview {
  from {
    stroke-dashoffset: 14;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   DECISION MODAL
   Two-pane modal (Logic Builder + Preview) for configuring Decision nodes
   ========================================================================== */
.decision-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 18, 45, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.decision-modal-overlay.hidden { display: none; }

.decision-modal {
  width: min(920px, calc(100vw - 48px));
  max-height: calc(100vh - 32px);
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 25px 50px -12px rgba(13, 18, 45, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.decision-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 22px 14px;
  border-bottom: 1px solid #DFEAF2;
  gap: 16px;
}
.decision-modal-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.decision-modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.decision-modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #F4E9FF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0029FF;
  flex-shrink: 0;
}
.decision-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #0D122D;
  margin: 0;
  line-height: 1.2;
}
.decision-modal-subtitle {
  font-size: 12px;
  color: #56596C;
  margin: 0;
  line-height: 1.4;
}
.decision-modal-close {
  background: transparent;
  border: none;
  color: #56596C;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.decision-modal-close:hover { background: #F3F3F5; color: #0D122D; }

/* Muted italic <text> inside the branch-preview SVG (empty-condition and
   "+n more" lines) — replaces the font-style="italic" presentation attribute. */
.decision-preview-note { font-style: italic; }

.decision-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: minmax(0, 1fr);
  height: min(680px, calc(100vh - 140px));
  overflow: hidden;
}

.decision-modal-logic,
.decision-modal-preview {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.decision-modal-preview {
  background: linear-gradient(180deg, #F7F9FB 0%, #FFFFFF 100%);
  border-left: 1px solid #DFEAF2;
}

.decision-modal-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid #DFEAF2;
  flex-wrap: wrap;
}
.decision-modal-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1.5px solid #DFEAF2;
  background: #FFFFFF;
  color: #56596C;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.decision-modal-tab:hover { border-color: #B6B8C0; color: #0D122D; }
.decision-modal-tab-active.decision-modal-tab-pass {
  border-color: #00DF81;
  background: rgba(0, 223, 129, 0.08);
  color: #0D122D;
}
.decision-modal-tab-active.decision-modal-tab-human-review {
  border-color: #FFBB38;
  background: rgba(255, 187, 56, 0.1);
  color: #0D122D;
}
.decision-modal-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Branch colours for the tab dots. Brand token values are fill-only here (no
   contrast requirement), and they key off the tab/pill the dot sits in so the
   markup carries no inline style. */
.decision-modal-tab-pass .decision-modal-tab-dot {
  background: var(--color-token-green);
}
.decision-modal-tab-human-review .decision-modal-tab-dot {
  background: var(--color-token-yellow);
}
.decision-modal-fallback-pill .decision-modal-tab-dot {
  background: var(--color-token-red);
}
.decision-modal-tab-label { white-space: nowrap; }
.decision-modal-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #0D122D;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
}
.decision-modal-tab-count-empty {
  background: #F3F3F5;
  color: var(--color-muted);
}
.decision-modal-fallback-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #FFF1F3;
  color: var(--color-token-red-ink);
  font-size: 12px;
  font-weight: 600;
}

.decision-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

.decision-modal-preview-canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.decision-modal-preview-canvas svg { width: 100%; height: 100%; max-height: 400px; }

.decision-preview-branch-hit { cursor: pointer; }
.decision-preview-branch-hit:hover rect { filter: brightness(0.97); }

.decision-modal-preview-label {
  padding: 12px 18px 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* decision-preview-path: no drop-shadow; flow animation handled by SVG packets */
.decision-preview-path { transition: stroke-width 0.15s ease; }

.decision-modal-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #F2F4FF;
  color: #3D4157;
  font-size: 12px;
  line-height: 1.4;
}
.decision-modal-hint svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #0029FF;
  margin-top: 1px;
}

/* ==========================================================================
   DECISION MODAL — SENTENCE-STYLE RULE BUILDER
   ========================================================================== */
.decision-rule-scope {
  border-radius: 10px;
  padding: 14px 16px 12px;
  margin: -6px -4px 0;
  transition: background 0.2s ease;
  box-sizing: border-box;
  max-width: 100%;
}
.decision-rule-scope-pass {
  background: rgba(0, 223, 129, 0.05);
  border: 1px solid rgba(0, 223, 129, 0.18);
}
.decision-rule-scope-human-review {
  background: rgba(255, 187, 56, 0.06);
  border: 1px solid rgba(255, 187, 56, 0.22);
}

.decision-rule-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(13, 18, 45, 0.04);
  color: #56596C;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  cursor: default;
}
.decision-rule-hint svg { color: var(--color-muted); }

.decision-rule-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 14px;
  font-size: 14px;
  font-weight: 500;
  color: #3D4157;
  line-height: 1.4;
}
.decision-rule-branch-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.decision-rule-branch-chip-pass {
  background: rgba(0, 223, 129, 0.15);
  color: #007a45;
}
.decision-rule-branch-chip-human-review,
.decision-rule-branch-chip-human_review {
  background: rgba(255, 187, 56, 0.2);
  color: #9a6500;
}
.decision-rule-logic {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #DFEAF2;
  overflow: visible;
  margin: 0;
}
.decision-rule-logic.hidden { display: none; }
.decision-rule-logic .decision-rule-logic-btn.ifelse-logic-btn {
  flex: 0 0 auto;
  padding: 3px 12px;
  border: none;
  background: transparent;
  color: #56596C;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  text-transform: lowercase;
  line-height: 1.4;
}
.decision-rule-logic .decision-rule-logic-btn.ifelse-logic-btn-active {
  background: #0D122D;
  color: #FFFFFF;
}
.decision-rule-logic .decision-rule-logic-btn.ifelse-logic-btn:hover {
  color: #0D122D;
}
.decision-rule-logic .decision-rule-logic-btn.ifelse-logic-btn-active:hover {
  color: #FFFFFF;
}

.decision-rule-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.decision-rule-row.ifelse-condition-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 1.5fr) 28px;
  gap: 6px;
  align-items: center;
  padding: 8px;
  margin: 0;
  background: #FFFFFF;
  border: 1px solid #DFEAF2;
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
/* When remove button is hidden (only 1 condition), collapse its column so Value fills the space */
.decision-rule-row.ifelse-condition-row:has(.decision-rule-remove[style*="display:none"]),
.decision-rule-row.ifelse-condition-row:has(.decision-rule-remove[style*="display: none"]) {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 1.5fr) 0;
}
.decision-rule-row.ifelse-condition-row:focus-within {
  border-color: #0029FF;
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.1);
}
.decision-rule-row .decision-rule-cell {
  display: block;
  min-width: 0;
  max-width: 100%;
}
.decision-rule-row .builder-form-label { display: none; }
.decision-rule-row .decision-rule-cell > * {
  max-width: 100%;
  box-sizing: border-box;
}
.decision-rule-cell {
  min-width: 0;
}
.decision-rule-cell .ifelse-field-picker { margin: 0; }
.decision-rule-cell .ifelse-field-picker-input-wrap {
  border: 1px solid transparent;
  background: #F7F9FB;
  border-radius: 7px;
  min-height: 34px;
}
.decision-rule-cell .ifelse-field-picker-input-wrap:hover {
  background: #F3F3F5;
}
.decision-rule-cell .ifelse-field-picker-input {
  font-size: 13px;
  padding: 6px 10px;
  background: transparent;
}
.decision-rule-cell .builder-form-select {
  width: 100%;
  font-size: 13px;
}
.decision-rule-operator,
.decision-rule-value {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid transparent;
  background: #F7F9FB;
  border-radius: 7px;
  color: #0D122D;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.decision-rule-operator { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23868896' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 26px;
}
.decision-rule-operator:hover,
.decision-rule-value:hover {
  background: #F3F3F5;
}
.decision-rule-operator:focus,
.decision-rule-value:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #0029FF;
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.1);
}
.decision-rule-remove {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-muted);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.decision-rule-remove:hover {
  background: #FFF1F3;
  color: var(--color-token-red-ink);
}

.decision-rule-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 2px;
  background: transparent;
  border: none;
  color: #0029FF;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
}
.decision-rule-add:hover {
  color: #0022cc;
  text-decoration: underline;
}

/* ---- Grouped conditions (AND between groups, OR/AND within a group) ---- */
.decision-groups-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.decision-group {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #DFEAF2;
  border-radius: 10px;
}

.decision-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 12px;
}

.decision-group-title {
  font-size: 11px;
  font-weight: 700;
  color: #56596C;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.decision-group-header-label {
  font-size: 12px;
  color: #56596C;
  font-weight: 500;
}

.decision-group-inner-logic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #DFEAF2;
}
.decision-group-inner-logic.hidden { display: none; }
.decision-group-inner-logic .decision-rule-logic-btn.ifelse-group-inner-logic-btn {
  flex: 0 0 auto;
  padding: 3px 10px;
  border: none;
  background: transparent;
  color: #56596C;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
.decision-group-inner-logic .decision-rule-logic-btn.ifelse-group-inner-logic-btn.ifelse-logic-btn-active {
  background: #0D122D;
  color: #FFFFFF;
}
.decision-group-inner-logic .decision-rule-logic-btn.ifelse-group-inner-logic-btn:hover {
  color: #0D122D;
}
.decision-group-inner-logic .decision-rule-logic-btn.ifelse-group-inner-logic-btn.ifelse-logic-btn-active:hover {
  color: #FFFFFF;
}
.decision-group-inner-logic > .decision-group-header-label {
  padding: 0 4px;
}

.decision-group-remove {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-muted);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.decision-group-remove:hover {
  background: #FFF1F3;
  color: var(--color-token-red-ink);
}

/* Top-level AND/OR separator between groups */
.decision-group-top-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  margin: 2px 0;
  padding: 4px 0;
}
.decision-group-top-separator::before,
.decision-group-top-separator::after {
  content: '';
  position: absolute;
  top: 50%;
  height: 1px;
  background: #DFEAF2;
  width: 38%;
}
.decision-group-top-separator::before { left: 0; }
.decision-group-top-separator::after { right: 0; }
.decision-group-top-separator .ifelse-group-top-logic-btn {
  position: relative;
  z-index: 1;
  padding: 5px 14px;
  border: 1px solid #DFEAF2;
  background: #FFFFFF;
  color: #0D122D;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.decision-group-top-separator .ifelse-group-top-logic-btn:first-of-type {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
  border-right: none;
}
.decision-group-top-separator .ifelse-group-top-logic-btn:last-of-type {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}
.decision-group-top-separator .ifelse-group-top-logic-btn.ifelse-logic-btn-active {
  background: #0D122D;
  color: #FFFFFF;
  border-color: #0D122D;
}
.decision-group-top-separator .ifelse-group-top-logic-btn:not(.ifelse-logic-btn-active):hover {
  color: #0D122D;
  background: #F7F9FB;
}

.decision-group-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px dashed #DFEAF2;
  color: #0029FF;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  width: 100%;
}
.decision-group-add:hover {
  background: rgba(0, 41, 255, 0.04);
  border-color: #0029FF;
}

.decision-rule-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 16px;
  color: var(--color-muted);
  text-align: center;
  font-size: 13px;
}
.decision-rule-empty svg { color: #C4C6C8; }
.decision-rule-empty p { margin: 0; max-width: 320px; line-height: 1.4; }

.decision-rule-hint-subtle {
  /* no-op placeholder */
}

.decision-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.decision-modal-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #DFEAF2;
  border-top-color: #0029FF;
  border-radius: 50%;
  animation: decision-modal-spin 0.8s linear infinite;
}
@keyframes decision-modal-spin { to { transform: rotate(360deg); } }
.decision-modal-error {
  padding: 14px;
  border-radius: 8px;
  background: #FFF1F3;
  color: var(--color-token-red-ink);
  font-size: 13px;
}

@media (max-width: 768px) {
  .decision-modal-body {
    grid-template-columns: 1fr;
  }
  .decision-modal-preview {
    border-left: none;
    border-top: 1px solid #DFEAF2;
  }
}

/* Base node styling on canvas */
#drawflow .drawflow .base-node {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: none !important;
  width: 100%;
  box-sizing: border-box;
}

#drawflow .drawflow .base-node.border-amber-400 {
  background: #fffbeb;
}

/* Content-driven node width. This lived as a style attribute on the
   _base_node partial (CSP: style-src has no nonce for style attributes), so it
   beat the width:100% above by being inline — the scoped selector reproduces
   that. The .cascade-builder-surface reskin still overrides all three with
   !important, exactly as it did against the inline style. */
.base-node-frame,
#drawflow .drawflow .base-node.base-node-frame {
  min-width: 240px;
  max-width: 420px;
  width: max-content;
}

#drawflow .drawflow .node-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}

#drawflow .drawflow .node-icon-container svg {
  width: 20px;
  height: 20px;
}

/* Buttons */
.cursor-pointer { cursor: pointer; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

/* Layout utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

.min-h-screen { min-height: 100vh; }
.h-screen { height: 100vh; }
.h-full { height: 100%; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.w-3 { width: 0.75rem; }
.h-3 { height: 0.75rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-full { width: 100%; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-2 { height: 0.5rem; }
.w-2 { width: 0.5rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-72 { width: 18rem; }
.w-80 { width: 20rem; }
.w-0 { width: 0; }

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pt-6 { padding-top: 1.5rem; }
.pl-2 { padding-left: 0.5rem; }

.m-0 { margin: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-10 { margin-left: 2.5rem; }
.mr-3 { margin-right: 0.75rem; }

.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-x-4 > * + * { margin-left: 1rem; }

.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-l { border-left-width: 1px; }
.border-r { border-right-width: 1px; }

.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-visible { overflow: visible; }
.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }
.max-w-2xl { max-width: 42rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-table { max-width: 1100px; }
.mx-auto { margin-left: auto; margin-right: auto; }

.relative { position: relative; }
.absolute { position: absolute; }
.shrink-0 { flex-shrink: 0; }

.whitespace-nowrap { white-space: nowrap; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.tracking-wider { letter-spacing: 0.05em; }

.inline-flex { display: inline-flex; }
/* button_to renders a <form>; `.inline` keeps it on the same line as its
   siblings — this was a style="display:inline" on the generated form tag. */
.inline { display: inline; }
.divide-y > * + * { border-top-width: 1px; }
.divide-gray-200 > * + * { border-color: #e5e7eb; }

.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }

/* Hover states */
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.hover\:bg-white:hover { background-color: #ffffff; }
.hover\:bg-blue-50:hover { background-color: #eff6ff; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.hover\:bg-red-50:hover { background-color: #fef2f2; }
.hover\:text-gray-700:hover { color: #374151; }
.hover\:text-gray-900:hover { color: #111827; }
.hover\:text-blue-800:hover { color: #1e40af; }
.hover\:text-blue-900:hover { color: #1e3a8a; }
.hover\:text-red-900:hover { color: #7f1d1d; }
.hover\:border-gray-300:hover { border-color: #d1d5db; }
.hover\:shadow-sm:hover { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.no-underline { text-decoration: none; }
.hover\:underline:hover { text-decoration: underline; }

/* Ring utilities */
.ring-2 { box-shadow: 0 0 0 2px var(--tw-ring-color, currentColor); }
.ring-green-100 { --tw-ring-color: rgba(220, 252, 231, 1); }
.ring-amber-100 { --tw-ring-color: rgba(254, 243, 199, 1); }
.ring-blue-200 { --tw-ring-color: rgba(191, 219, 254, 1); }
.focus\:ring-blue-500:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }
.focus\:border-blue-500:focus { border-color: #3b82f6; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px; }

/* ── Utility gap-fill (2026-09 class audit) ──────────────────────────────
   Every class below was already used in app/views on the assumption it
   existed (Tailwind muscle memory) but had no definition, so it silently
   did nothing. Scales and conventions match the hand-rolled utilities
   above. The border-* entries carry an explicit solid style because this
   sheet has no global border-style reset; color utilities still override
   the color, and .border-dashed (defined after the widths) the style. */
.block { display: block; }
.inline-block { display: inline-block; }
/* Alias of .shrink-0 above — the Tailwind v2 name, which most views use. */
.flex-shrink-0 { flex-shrink: 0; }
.items-baseline { align-items: baseline; }
.justify-end { justify-content: flex-end; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-10 { z-index: 10; }
.col-span-2 { grid-column: span 2 / span 2; }
.overflow-x-auto { overflow-x: auto; }

.w-7 { width: 1.75rem; }
.h-7 { height: 1.75rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-9 { width: 2.25rem; }
.h-9 { height: 2.25rem; }
.w-32 { width: 8rem; }
.max-w-lg { max-width: 32rem; }

.p-3 { padding: 0.75rem; }
.p-5 { padding: 1.25rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pb-4 { padding-bottom: 1rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-5 { padding-left: 1.25rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-12 { margin-top: 3rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-y-12 > * + * { margin-top: 3rem; }

.border-2 { border-width: 2px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.border-l-2 { border-left-width: 2px; border-left-style: solid; }
.border-dashed { border-style: dashed; }
.border-link-water { border-color: var(--color-link-water); }
.divide-link-water > * + * { border-top: 1px solid var(--color-link-water); }

.font-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.font-normal { font-weight: 400; }
.tracking-wide { letter-spacing: 0.025em; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }
.duration-300 { transition-duration: 300ms; }

.bg-app-bg { background-color: var(--color-app-bg); }
.bg-mirage-05 { background-color: var(--color-mirage-05); }
.bg-token-red-10 { background-color: color-mix(in srgb, var(--color-token-red) 10%, var(--color-white)); }

/* Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
}

@media (min-width: 1024px) {
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* Table styles */
table { border-collapse: collapse; }
th, td { padding: 0.75rem 1.5rem; }

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-weight: 500;
  pointer-events: auto;
  animation: toast-enter 0.3s ease-out;
  max-width: 380px;
}

/* CONTRAST-SWEEP (2026-09-11): .toast-message is 14px/500, so it needs 4.5:1,
   and white on the old hardcoded #10B981 measured 2.54:1 — on the component
   that carries every success flash in the operator app. Fixed by deepening the
   fill to the green ink CLAUDE.md already nominates for success text
   (--color-token-green-ink #067A4E) rather than by restyling the toast: white
   on it is 5.38:1, and .toast-dismiss's shared rgba(255,255,255,0.7) glyph goes
   from 1.91:1 to 3.47:1, clearing the 3:1 non-text floor it also missed. The
   brand #00DF81 / #10B981 green stays a fill-and-dot value, never a text
   ground. (--color-token-green-ink is redefined to #0F7333 inside the builder /
   list / report surfaces; white on that is 5.97:1, so a toast rendered under
   one of those scopes clears AA too.) .toast-error / -warning / -info are the
   same shape and are left alone here — they were not in the sweep's finding. */
.toast-success {
  background-color: var(--color-token-green-ink);
  color: white;
}

.toast-error {
  background-color: #EF4444;
  color: white;
}

.toast-warning {
  background-color: #F59E0B;
  color: white;
}

.toast-info {
  background-color: var(--color-blue, #1814F3);
  color: white;
}

.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.toast-message {
  flex: 1;
  line-height: 1.4;
}

.toast-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 8px;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s, background-color 0.2s;
}

.toast-dismiss:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

.toast-exit {
  animation: toast-exit 0.3s ease-in forwards;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* ==========================================================================
   DEMO EXECUTION STYLES
   n8n-style workflow execution visualization
   ========================================================================== */

/* Demo button in toolbar */
.btn-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  height: 38px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-demo:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-demo svg {
  width: 16px;
  height: 16px;
}

.btn-demo-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  height: 38px;
  background: var(--color-mirage-05, #F3F3F5);
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 8px;
  color: var(--color-mirage-30, #B6B8C0);
  font-size: 13px;
  font-weight: 500;
  cursor: default;
}

.btn-demo-disabled svg {
  width: 16px;
  height: 16px;
}

.btn-demo-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  height: 38px;
  margin-left: 8px;
}

.btn-demo-dropdown-toggle:hover {
  background: #e5e7eb;
}

.btn-demo-dropdown-toggle svg {
  width: 14px;
  height: 14px;
  color: #6b7280;
}

/* Info icon with tooltip */
.scenario-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  color: #9ca3af;
  cursor: help;
  position: relative;
}

.scenario-info-icon:hover {
  color: #6b7280;
}

.scenario-info-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  padding: 8px 12px;
  background: #1f2937;
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
  pointer-events: none;
  width: 200px;
  text-align: left;
}

.scenario-info-icon[data-tooltip]::before {
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  right: 4px;
  border: 6px solid transparent;
  border-bottom-color: #1f2937;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

.scenario-info-icon[data-tooltip]:hover::after,
.scenario-info-icon[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

.scenario-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 100;
  min-width: 120px;
}

.scenario-dropdown.hidden {
  display: none;
}

.scenario-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
}

.scenario-option:hover {
  background: #f3f4f6;
}

.scenario-option:first-child {
  border-bottom: 1px solid #e5e7eb;
}

.btn-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.btn-stop:hover {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-stop svg {
  width: 16px;
  height: 16px;
}

/* Demo Modal */
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-modal.hidden {
  display: none;
}

.demo-modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.demo-modal-content {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 500px;
  margin: 20px;
  animation: modal-enter 0.3s ease-out;
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.demo-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.demo-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.demo-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-modal-close:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.demo-modal-body {
  padding: 24px;
}

.demo-modal-description {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 20px 0;
}

.demo-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
  border-radius: 0 0 16px 16px;
}

/* Scenario options */
.demo-scenario-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.demo-scenario-option {
  cursor: pointer;
}

.demo-scenario-option input[type="radio"] {
  display: none;
}

.demo-scenario-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.demo-scenario-option input[type="radio"]:checked + .demo-scenario-card {
  border-color: var(--color-blue, #1814F3);
  background-color: #f8faff;
}

.demo-scenario-card:hover {
  border-color: #d1d5db;
}

.demo-scenario-icon {
  flex-shrink: 0;
}

.demo-scenario-info h3 {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
}

.demo-scenario-info p {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

.demo-scenario-result {
  font-weight: 600;
}

/* Speed control */
.demo-speed-control {
  display: flex;
  align-items: center;
  gap: 16px;
}

.demo-speed-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.demo-speed-options {
  display: flex;
  gap: 8px;
}

.demo-speed-option {
  cursor: pointer;
}

.demo-speed-option input[type="radio"] {
  display: none;
}

.demo-speed-option span {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.demo-speed-option input[type="radio"]:checked + span {
  background: var(--color-blue, #1814F3);
  color: #ffffff;
}

.demo-speed-option span:hover {
  background: #e5e7eb;
}

.demo-speed-option input[type="radio"]:checked + span:hover {
  background: var(--color-blue-90, #1A3EFF);
}

/* Progress Panel */
.demo-progress-panel {
  position: fixed;
  top: 80px;
  right: 20px;
  width: 340px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  z-index: 100;
  overflow: hidden;
  animation: slide-in-right 0.3s ease-out;
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.demo-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff;
}

.demo-progress-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.demo-progress-title h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.demo-badge {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.demo-progress-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-progress-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.demo-progress-list {
  padding: 16px 20px;
  max-height: 300px;
  overflow-y: auto;
}

.demo-progress-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
}

.demo-progress-item:last-child {
  border-bottom: none;
}

.demo-progress-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-progress-dot {
  width: 8px;
  height: 8px;
  background: #d1d5db;
  border-radius: 50%;
}

.demo-progress-icon-pending .demo-progress-dot {
  background: #f59e0b;
  animation: pulse 1s infinite;
}

.demo-progress-icon-running svg {
  animation: spin 1s linear infinite;
}

.demo-progress-info {
  flex: 1;
  min-width: 0;
}

.demo-progress-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}

.demo-progress-status {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.demo-progress-status-success {
  color: #059669;
}

.demo-progress-status-running {
  color: #2563eb;
}

.demo-progress-status-skipped {
  color: #9ca3af;
}

.demo-progress-footer {
  padding: 12px 20px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.demo-progress-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6b7280;
}

/* Node states - targets the inner .base-node element */
/* RUNNING STATE - Blue glow with pulsing animation */
.demo-node-running .base-node {
  border: 2px solid #3b82f6 !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25), 0 4px 20px rgba(59, 130, 246, 0.3) !important;
  animation: node-running-glow 1.5s ease-in-out infinite;
}

/* SUCCESS STATE - Green with solid background */
.demo-node-success .base-node {
  border: 2px solid #10b981 !important;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 4px 12px rgba(16, 185, 129, 0.15) !important;
}

/* FAILED STATE - Red with strong visual feedback */
.demo-node-failed .base-node {
  border: 2px solid #ef4444 !important;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2), 0 4px 12px rgba(239, 68, 68, 0.15) !important;
}

/* PENDING STATE - Yellow/amber waiting indicator with clear "queued" appearance */
.demo-node-pending .base-node {
  border: 2px dashed #f59e0b !important;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15) !important;
  animation: node-pending-pulse 1.5s ease-in-out infinite;
  opacity: 0.85;
}

/* WAITING STATE - Orange with pulsing animation (for Wait nodes) */
.demo-node-waiting .base-node {
  border: 2px solid #f97316 !important;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25), 0 4px 20px rgba(249, 115, 22, 0.3) !important;
  animation: node-waiting-glow 1.5s ease-in-out infinite;
}

/* SKIPPED STATE - Grayed out */
.demo-node-skipped .base-node {
  opacity: 0.5;
  border: 1px dashed #9ca3af !important;
  background: #f9fafb !important;
}

/* Running state glow animation */
@keyframes node-running-glow {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25), 0 4px 20px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.15), 0 4px 30px rgba(59, 130, 246, 0.4);
  }
}

/* Pending state pulse - more noticeable "waiting in queue" effect */
@keyframes node-pending-pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
    opacity: 0.85;
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.08);
    opacity: 0.7;
  }
}

/* Waiting state glow animation */
@keyframes node-waiting-glow {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25), 0 4px 20px rgba(249, 115, 22, 0.3);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(249, 115, 22, 0.15), 0 4px 30px rgba(249, 115, 22, 0.4);
  }
}

/* Waiting countdown overlay on node */
.demo-waiting-countdown {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
  z-index: 15;
  white-space: nowrap;
  animation: countdown-pop-in 0.3s ease-out;
}

@keyframes countdown-pop-in {
  0% {
    transform: translateX(-50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translateX(-50%) scale(1.1);
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

/* Status indicator on nodes - badge that appears at top-right */
.demo-status-indicator {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 10;
  border: 2px solid #ffffff;
  animation: badge-pop-in 0.3s ease-out;
}

@keyframes badge-pop-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.demo-status-indicator svg {
  width: 18px;
  height: 18px;
}

/* Running indicator - blue background with spinning icon */
.demo-status-running {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-color: #3b82f6;
}

.demo-status-running svg {
  color: #ffffff !important;
  animation: status-spin 1s linear infinite;
}

/* Waiting indicator - orange background with spinning icon */
.demo-status-waiting {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border-color: #f97316;
}

.demo-status-waiting svg {
  color: #ffffff !important;
  animation: status-spin 1s linear infinite;
}

@keyframes status-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Success indicator - green background with check */
.demo-status-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #10b981;
}

.demo-status-success svg {
  color: #ffffff !important;
}

/* Failed indicator - red background */
.demo-status-failed {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-color: #ef4444;
}

.demo-status-failed svg {
  color: #ffffff !important;
}

/* Pending indicator - amber background with subtle pulse */
.demo-status-pending {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: #f59e0b;
  animation: status-pending-pulse 1.2s ease-in-out infinite;
}

.demo-status-pending svg {
  color: #ffffff !important;
}

@keyframes status-pending-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

/* Skipped indicator - gray */
.demo-status-skipped {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.demo-status-skipped svg {
  color: #6b7280 !important;
}

/* Connection animation */
.demo-connection-active .main-path {
  stroke: #10b981 !important;
  stroke-width: 3px !important;
  animation: connection-flow 0.5s ease-out;
}

@keyframes connection-flow {
  0% {
    stroke-dasharray: 10, 10;
    stroke-dashoffset: 20;
  }
  100% {
    stroke-dasharray: 10, 10;
    stroke-dashoffset: 0;
  }
}

/* Live execution: marching-ants flow animation on edges while the upstream
   node has completed but the downstream hasn't started yet. Respects the
   per-branch colors applied to Decision edges. */
.connection.connection--flowing .main-path {
  stroke-width: 3.5px;
  stroke-dasharray: 8 6;
  animation: connection-flowing 1s linear infinite;
  filter: drop-shadow(0 0 4px currentColor);
}

.connection.connection--flowing.connection--decision-pass .main-path {
  stroke: #00DF81;
  color: rgba(0, 223, 129, 0.55);
}

.connection.connection--flowing.connection--decision-human-review .main-path {
  stroke: #FFBB38;
  color: rgba(255, 187, 56, 0.55);
}

.connection.connection--flowing.connection--decision-fail .main-path {
  stroke: #FA3A55;
  color: rgba(250, 58, 85, 0.55);
}

.connection.connection--flowing:not(.connection--decision-pass):not(.connection--decision-human-review):not(.connection--decision-fail) .main-path {
  stroke: #0029FF;
  color: rgba(0, 41, 255, 0.45);
}

@keyframes connection-flowing {
  from { stroke-dashoffset: 28; }
  to   { stroke-dashoffset: 0; }
}

/* Spin animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Completion Toast - replaces modal for better UX */
.demo-completion-toast {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  max-width: 450px;
  animation: toast-slide-in 0.4s ease-out;
  pointer-events: auto;
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.demo-toast-exit {
  animation: toast-slide-out 0.3s ease-in forwards;
}

@keyframes toast-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.demo-toast-success {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff;
}

.demo-toast-failed {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: #ffffff;
}

.demo-toast-notice {
  background: linear-gradient(135deg, var(--color-mirage) 0%, #1a2040 100%);
  color: #ffffff;
}
.demo-notice-links {
  margin-top: 8px;
}
.demo-notice-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.demo-notice-link-label {
  font-size: 12px;
  opacity: 0.85;
  flex: 1;
}
.demo-notice-btn {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  transition: background-color 0.15s;
}
.demo-notice-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.demo-toast-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-toast-icon svg {
  width: 24px;
  height: 24px;
}

.demo-toast-content {
  flex: 1;
  min-width: 0;
}

.demo-toast-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.demo-toast-subtitle {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 2px;
}

.demo-toast-action {
  flex-shrink: 0;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-toast-action:hover {
  background: rgba(255, 255, 255, 0.3);
}

.demo-toast-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.demo-toast-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Legacy completion modal - kept for backwards compatibility */
.demo-completion-content {
  text-align: center;
  padding: 40px 24px;
}

.demo-completion-icon {
  margin-bottom: 20px;
}

.demo-completion-icon svg {
  width: 64px;
  height: 64px;
}

.demo-completion-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 24px 0;
}

.demo-completion-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 24px;
}

.demo-stat {
  text-align: center;
}

.demo-stat-label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.demo-stat-value {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

/* Inspector panel */
.demo-inspector-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  max-height: 400px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  z-index: 100;
  overflow: hidden;
  animation: slide-in-right 0.3s ease-out;
}

.demo-inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #1f2937;
  color: #ffffff;
}

.demo-inspector-header h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.demo-inspector-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-inspector-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.demo-inspector-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}

.demo-inspector-tab {
  flex: 1;
  padding: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-inspector-tab:hover {
  color: #374151;
}

.demo-inspector-tab.active {
  color: var(--color-blue, #1814F3);
  border-bottom-color: var(--color-blue, #1814F3);
}

.demo-inspector-content {
  padding: 16px;
  max-height: 280px;
  overflow-y: auto;
  background: #1f2937;
}

.demo-inspector-content pre {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.demo-inspector-content code {
  color: #a5f3fc;
  font-family: 'Monaco', 'Menlo', monospace;
}

/* ==========================================================================
   WORKFLOW MODAL - Based on Figma design (node 58:3706)
   Two-step modal for creating workflows
   ========================================================================== */
.workflow-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: workflow-modal-fade-in 0.2s ease-out;
}

.workflow-modal-overlay.hidden {
  display: none;
}

@keyframes workflow-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.workflow-modal {
  background-color: white;
  border: 1px solid #dfeaf2;
  border-radius: 12px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  animation: workflow-modal-slide-in 0.25s ease-out;
}

@keyframes workflow-modal-slide-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal Header */
.workflow-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid #dfeaf2;
}

.workflow-modal-title-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.workflow-modal-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f9fb;
  border: 1px solid #f2f4ff;
  border-radius: 9px;
}

.workflow-modal-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-blue, #1814F3);
}

.workflow-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #0d122d;
  margin: 0;
  line-height: 22px;
}

.workflow-modal-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #6e7181;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.workflow-modal-close:hover {
  color: #0d122d;
  background-color: #f5f7fa;
}

/* Modal Body */
.workflow-modal-body {
  padding: 24px;
}

.workflow-modal-description {
  font-size: 16px;
  line-height: 24px;
  color: #252a42;
  margin: 0 0 15px 0;
}

.workflow-modal-hint {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted);
  margin: 0;
}

/* Modal Footer */
.workflow-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  padding: 18px 24px;
  border-top: 1px solid #dfeaf2;
}

/* Step indicator */
.workflow-modal-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}

.workflow-modal-step {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #dfeaf2;
  transition: background-color 0.2s ease;
}

.workflow-modal-step.active {
  background-color: var(--color-blue, #1814F3);
}

/* Goal cards for step 2 */
.workflow-modal-goals {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 340px;
  overflow-y: auto;
}

.workflow-modal-goal {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  background-color: white;
  border: 1px solid #dfeaf2;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
}

.workflow-modal-goal:hover {
  border-color: var(--color-blue-30, #B3BFFF);
  background-color: #fafbfc;
}

.workflow-modal-goal.selected {
  border-color: var(--color-blue, #1814F3);
  background-color: var(--color-blue-05, #F2F4FF);
}

.workflow-modal-goal-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}

.workflow-modal-goal-content {
  flex: 1;
  min-width: 0;
}

.workflow-modal-goal-name {
  font-size: 15px;
  font-weight: 600;
  color: #0d122d;
  margin: 0 0 4px 0;
}

.workflow-modal-goal-description {
  font-size: 13px;
  color: #6e7181;
  margin: 0;
  line-height: 18px;
}

.workflow-modal-goal-arrow {
  width: 20px;
  height: 20px;
  color: #b6b8c0;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.workflow-modal-goal:hover .workflow-modal-goal-arrow {
  color: var(--color-blue, #1814F3);
}

/* Form inside modal */
.workflow-modal-form .form-input {
  width: 100%;
}

/* ==========================================================================
   MOTION DESIGN SYSTEM - FORM FIELDS
   Standardized form field components with focus-within label color change
   ========================================================================== */
.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #56596C;
  transition: color 0.2s ease;
}

.form-field-group:focus-within .form-field-label {
  color: #0029FF;
}

.form-field-required {
  color: var(--color-token-red-ink);
  margin-left: 2px;
}

.form-field-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #3D4157;
  background-color: #ffffff;
  border: 1px solid #DFEAF2;
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.form-field-input::placeholder {
  color: var(--color-muted);
}

.form-field-input:focus {
  outline: none;
  border-color: #0029FF;
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.1);
}

.form-field-input-error {
  border-color: #FA3A55;
}

.form-field-input-error:focus {
  border-color: #FA3A55;
  box-shadow: 0 0 0 3px rgba(250, 58, 85, 0.1);
}

.form-field-select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #3D4157;
  background-color: #ffffff;
  border: 1px solid #DFEAF2;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

/* Multi-line text input. Mirrors .form-field-input — the explicit
   font-family is what kills the browser-default monospace UA style
   that <textarea> inherits when no font is declared. */
.form-field-textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 20px;
  font-family: inherit;
  color: #3D4157;
  background-color: #ffffff;
  border: 1px solid #DFEAF2;
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  resize: vertical;
}

.form-field-textarea::placeholder {
  color: var(--color-muted);
}

.form-field-textarea:focus {
  outline: none;
  border-color: #0029FF;
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.1);
}

/* Principal-reasons scroll box: force a visible scrollbar so PMs can
   tell the list is scrollable. macOS Safari/Chrome hide scrollbars by
   default when overflow:auto is used; setting overflow-y: scroll on
   the element plus the explicit ::-webkit-scrollbar rules below
   guarantees the track + thumb render at all times. */
.aa-reasons-scroll {
  scrollbar-width: thin;
  scrollbar-color: #C4C6C8 #F3F3F5;
}
.aa-reasons-scroll::-webkit-scrollbar {
  width: 10px;
}
.aa-reasons-scroll::-webkit-scrollbar-track {
  background: #F3F3F5;
  border-radius: 0 6px 6px 0;
}
.aa-reasons-scroll::-webkit-scrollbar-thumb {
  background: #C4C6C8;
  border-radius: 5px;
  border: 2px solid #F3F3F5;
}
.aa-reasons-scroll::-webkit-scrollbar-thumb:hover {
  background: #868896;
}

.form-field-select:focus {
  outline: none;
  border-color: #0029FF;
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.1);
}

.form-field-helper {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 4px;
}

.form-field-error-msg {
  font-size: 12px;
  color: var(--color-token-red-ink);
  margin-top: 4px;
}

.form-field-input--error {
  border-color: var(--color-token-red);
}

/* Live password-rule checklist (password_checklist_controller.js) — helper
   text that ticks green as each rule is met. */
.pw-checklist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--color-muted);
}

.pw-checklist-item { margin-top: 2px; }

.pw-checklist-item::before {
  content: "○ ";
  color: var(--color-muted);
}

.pw-checklist-item.pw-checklist-met::before {
  content: "✓ ";
  color: var(--color-token-green-ink);
}

/* Explicit default so an unmet class chip never inherits green when the
   parent "3 of the 4" row is satisfied by the other three. */
.pw-checklist-class { color: var(--color-muted); }

.pw-checklist-item.pw-checklist-met,
.pw-checklist-class.pw-checklist-met {
  color: var(--color-token-green-ink);
}

.form-field-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form-field-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #0029FF;
  cursor: pointer;
}

.form-field-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form-field-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #0029FF;
  cursor: pointer;
}

.form-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #0D122D;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #DFEAF2;
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #DFEAF2;
}

.form-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 20px;
  background-color: var(--color-ink, #14111d);
  border: 1px solid var(--color-ink, #14111d);
  border-radius: 9px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-submit-btn:hover {
  background-color: var(--color-ink-hover, #06040d);
  border-color: var(--color-ink-hover, #06040d);
}

.form-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 20px;
  background-color: #ffffff;
  border: 1px solid #DFEAF2;
  border-radius: 9px;
  color: #56596C;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.form-cancel-btn:hover {
  background-color: #F7F9FB;
  border-color: #B6B8C0;
}

/* ==========================================================================
   MOTION DESIGN SYSTEM - STATUS PILLS
   Status indicator badges with colored dots
   ========================================================================== */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.status-pill-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.status-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-pill-green {
  background-color: #D9FAEC;
  color: #005934;
}

.status-pill-green .status-pill-dot {
  background-color: #00DF81;
}

.status-pill-red {
  background-color: #FFE0EB;
  color: #641722;
}

.status-pill-red .status-pill-dot {
  background-color: #FA3A55;
}

.status-pill-yellow {
  background-color: #FFF5D9;
  color: #664B16;
}

.status-pill-yellow .status-pill-dot {
  background-color: #FFBB38;
}

.status-pill-info {
  background-color: var(--color-primary-light, #E6EAFF);
  color: var(--color-primary, #0029FF);
}

.status-pill-info .status-pill-dot {
  background-color: var(--color-primary, #0029FF);
}

.status-pill-gray {
  background-color: #F3F3F5;
  color: #56596C;
}

.status-pill-gray .status-pill-dot {
  background-color: #9EA0AB;
}

.status-pill-blue {
  background-color: #E5F9FF;
  color: #004D66;
}

.status-pill-blue .status-pill-dot {
  background-color: #00C1FF;
}

.status-pill-primary {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.status-pill-primary .status-pill-dot {
  background-color: var(--color-primary);
}

.status-pill-purple {
  background-color: #F4E9FF;
  color: #3A1466;
}

.status-pill-purple .status-pill-dot {
  background-color: #9233FE;
}

/* ==========================================================================
   MOTION DESIGN SYSTEM - DANGER BUTTONS
   Destructive action buttons
   ========================================================================== */
/* The fill is the AA red ink, not the #FA3A55 brand red: white text on the
   brand red is 3.62:1, on the ink 5.88:1 (WCAG 1.4.3, QA DEF-31). */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 12px;
  background-color: var(--color-token-red-ink);
  border: 1px solid var(--color-token-red-ink);
  border-radius: 9px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-danger:hover {
  background-color: var(--color-token-red-ink-hover);
  border-color: var(--color-token-red-ink-hover);
}

.btn-danger:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(250, 58, 85, 0.3);
}

.btn-danger svg {
  color: #ffffff;
  fill: currentColor;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-danger-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 12px;
  background-color: #ffffff;
  border: 1px solid #FA3A55;
  border-radius: 9px;
  color: var(--color-token-red-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-danger-outline:hover {
  background-color: #FFF5F6;
}

.btn-danger-outline:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(250, 58, 85, 0.3);
}

.btn-danger-outline svg {
  color: var(--color-token-red-ink);
  fill: currentColor;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Outline icons keep their outline. The button rules above fill svgs with
   currentColor for the glyph icons they ship with, which turns a closed
   stroke path (the pencil-square "Edit" icon) into a solid block. */
.btn-primary svg[fill="none"],
.btn-secondary svg[fill="none"],
.btn-tertiary svg[fill="none"],
.btn-danger svg[fill="none"],
.btn-danger-outline svg[fill="none"] {
  fill: none;
}

/* Inactive Motion buttons: same footprint, the fill drops to a neutral wash
   and the label to muted ink. No opacity, so the text stays crisp and the
   button never looks half-rendered. Covers the disabled attribute and the
   aria-disabled idiom used for locked options (.is-locked). */
.btn-primary:disabled, .btn-primary[aria-disabled="true"],
.btn-secondary:disabled, .btn-secondary[aria-disabled="true"],
.btn-tertiary:disabled, .btn-tertiary[aria-disabled="true"],
.btn-danger:disabled, .btn-danger[aria-disabled="true"],
.btn-danger-outline:disabled, .btn-danger-outline[aria-disabled="true"] {
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  background-color: var(--color-mirage-05, #F3F3F5);
  border-color: var(--color-link-water, #DFEAF2);
  color: var(--color-mirage-60, #6E7181);
}
.btn-primary:disabled svg, .btn-primary[aria-disabled="true"] svg,
.btn-secondary:disabled svg, .btn-secondary[aria-disabled="true"] svg,
.btn-tertiary:disabled svg, .btn-tertiary[aria-disabled="true"] svg,
.btn-danger:disabled svg, .btn-danger[aria-disabled="true"] svg,
.btn-danger-outline:disabled svg, .btn-danger-outline[aria-disabled="true"] svg {
  color: var(--color-mirage-30, #B6B8C0);
}
/* Locked buttons stay in the tab order (the hint shows on focus), so they
   keep a visible ring; the box-shadow: none above would otherwise win. */
.is-locked[aria-disabled="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.2);
}
/* The cascade builder/list surfaces repaint .btn-* with !important fills, so
   the neutral wash cannot show there; those buttons dim instead. */
.cascade-list-surface .btn-primary:disabled, .cascade-builder-surface .btn-primary:disabled,
.cascade-list-surface .btn-secondary:disabled, .cascade-builder-surface .btn-secondary:disabled,
.cascade-builder-surface .builder-toolbar .btn-demo:disabled, .cascade-builder-surface .builder-toolbar .btn-stop:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- btn-xs: compact button size modifier ---------- */
.btn-xs {
  padding: 4px 10px;
  font-size: 12px;
  line-height: 16px;
  border-radius: 6px;
  gap: 4px;
}

/* ==========================================================================
   MOTION DESIGN SYSTEM - ALERT BANNERS
   Contextual alert/notification banners
   ========================================================================== */
.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 9px;
  border: 1px solid;
}

/* Full-bleed variant: an alert that spans the width of a pane as a top strip
   (cascade builder read-only banner) rather than sitting as a rounded card. */
.alert-banner-strip {
  border-radius: 0;
  margin: 0;
  padding: 8px 16px;
}

.alert-banner-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.alert-banner-content {
  flex: 1;
  min-width: 0;
}

.alert-banner-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.alert-banner-message {
  font-size: 14px;
  line-height: 1.5;
}

.alert-info {
  background-color: #E5F9FF;
  border-color: #00C1FF;
  color: #004D66;
}

.alert-info .alert-banner-icon {
  color: #00C1FF;
}

.alert-success {
  background-color: #D9FAEC;
  border-color: #00DF81;
  color: #005934;
}

.alert-success .alert-banner-icon {
  color: var(--color-token-green-ink);
}

.alert-warning {
  background-color: #FFF5D9;
  border-color: #FFBB38;
  color: #664B16;
}

.alert-warning .alert-banner-icon {
  color: var(--color-token-yellow-ink);
}

.alert-error {
  background-color: #FFE0EB;
  border-color: #FA3A55;
  color: #641722;
}

.alert-error .alert-banner-icon {
  color: var(--color-token-red-ink);
}

/* ==========================================================================
   PM screening request — outcome banner
   Wider, multi-state header used on the screening-request detail page.
   Layout differs from .alert-banner (left-aligned circular icon avatar +
   title/blurb stack), so it gets its own class family rather than reusing
   alert-* directly. Color triplets are intentionally desaturated relative
   to the design-system tokens so the banner doesn't compete with the
   primary CTA in the rail.
   ========================================================================== */
.outcome-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid;
}

.outcome-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.outcome-banner-title {
  font-size: 16px;
  font-weight: 600;
}

.outcome-banner-blurb {
  font-size: 13px;
}

.outcome-banner-pass    { background: #E6F9F1; border-color: #00DF81; color: #007A4A; }
.outcome-banner-review  { background: #FFF4DC; border-color: #FFBB38; color: #8A5A00; }
.outcome-banner-fail    { background: #FFE6EA; border-color: #FA3A55; color: #8A1027; }
.outcome-banner-running { background: #E6F4FF; border-color: #00C1FF; color: #005C7A; }
.outcome-banner-neutral { background: #F3F3F5; border-color: #C4C6C8; color: #56596C; }

.outcome-banner-pass    .outcome-banner-icon { background: #00DF81; }
.outcome-banner-review  .outcome-banner-icon { background: #FFBB38; }
.outcome-banner-fail    .outcome-banner-icon { background: #FA3A55; }
.outcome-banner-running .outcome-banner-icon { background: #00C1FF; }
.outcome-banner-neutral .outcome-banner-icon { background: #C4C6C8; }

/* ==========================================================================
   MOTION DESIGN SYSTEM - LINKS
   Styled link variants
   ========================================================================== */
.link-default {
  color: #0029FF;
  text-decoration: none;
  transition: color 0.2s ease;
}

.link-default:hover {
  color: #001899;
  text-decoration: underline;
}

.link-muted {
  color: #56596C;
  text-decoration: none;
  transition: color 0.2s ease;
}

.link-muted:hover {
  color: #3D4157;
  text-decoration: underline;
}

.link-danger {
  color: var(--color-token-red-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.link-danger:hover {
  color: #C82E44;
  text-decoration: underline;
}

/* A <button> (or button_to) that reads as a link: pair with one of the link
   classes above. Strips the browser's button chrome (grey fill, outset
   border, padding) and takes the page font; size stays with text-* utilities. */
.link-button {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

/* ==========================================================================
   MOTION DESIGN SYSTEM - AVATARS
   User avatar components
   ========================================================================== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #F2F4FF;
  color: #0029FF;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.avatar-lg {
  width: 48px;
  height: 48px;
  font-size: 20px;
}

.avatar-xl {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
}

.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

.avatar-status-online {
  background-color: #00DF81;
}

.avatar-status-offline {
  background-color: #9EA0AB;
}

.avatar-status-busy {
  background-color: #FA3A55;
}

/* ==========================================================================
   MOTION DESIGN SYSTEM - DIVIDERS
   Horizontal divider lines
   ========================================================================== */
.divider {
  border: none;
  border-top: 1px solid #DFEAF2;
  margin: 16px 0;
}

.divider-sm {
  margin: 8px 0;
}

.divider-lg {
  margin: 24px 0;
}

/* Section break between two stacked panels on one page (admin credentials:
   Credentials / API Endpoints). */
.divider-section {
  margin: 32px 0;
}

/* ==========================================================================
   MOTION DESIGN SYSTEM - ACTION DROPDOWNS
   Dropdown menus for table row actions
   ========================================================================== */
.action-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  background: #ffffff;
  border: 1px solid #DFEAF2;
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  padding: 6px;
  z-index: 40;
}

.action-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #3D4157;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.action-dropdown-item:hover {
  background-color: #F7F9FB;
}

.action-dropdown-item svg {
  width: 18px;
  height: 18px;
  color: #56596C;
}

.action-dropdown-item-danger {
  color: var(--color-token-red-ink);
}

.action-dropdown-item-danger:hover {
  background-color: #FFF5F6;
}

.action-dropdown-item-danger svg {
  color: var(--color-token-red-ink);
}

.action-dropdown-divider {
  border-top: 1px solid #DFEAF2;
  margin: 6px 0;
}

/* ==========================================================================
   MOTION DESIGN SYSTEM - INPUT GROUPS
   Input with prefix/suffix elements
   ========================================================================== */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group-prefix,
.input-group-suffix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background-color: #F7F9FB;
  border: 1px solid #DFEAF2;
  color: #56596C;
  font-size: 14px;
}

.input-group-prefix {
  border-right: none;
  border-radius: 6px 0 0 6px;
}

.input-group-suffix {
  border-left: none;
  border-radius: 0 6px 6px 0;
}

.input-group .form-field-input {
  border-radius: 0;
}

.input-group .form-field-input:first-child {
  border-radius: 6px 0 0 6px;
}

.input-group .form-field-input:last-child {
  border-radius: 0 6px 6px 0;
}

/* ==========================================================================
   MOTION DESIGN SYSTEM - CARDS
   Card container styling
   ========================================================================== */
.ds-card {
  background: #ffffff;
  border: 1px solid #DFEAF2;
  border-radius: 9px;
  padding: 24px;
}

.ds-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #DFEAF2;
}

.ds-card-title {
  font-size: 18px;
  font-weight: 600;
  color: #0D122D;
}

/* ==========================================================================
   MOTION DESIGN SYSTEM - EMPTY STATES
   Empty state containers for pages with no content
   ========================================================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Was min-height: calc(100vh - 200px), which centred the block inside a
     700px-tall box: on a standard 1440x900 viewport the explanatory line
     ended at y=917, below the fold, so the one sentence telling a new user
     why the page is empty could only be read by scrolling. Capped so the
     title and description sit together in view. */
  min-height: 320px;
  padding: 48px 16px;
}

.empty-state-filtered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
}

.empty-state-filtered-icon {
  width: 32px;
  height: 32px;
  color: var(--color-mirage-30);
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background-color: #F2F4FF;
}

.empty-state-icon svg {
  width: 40px;
  height: 40px;
  color: #0029FF;
}

.empty-state-title {
  font-size: 20px;
  font-weight: 600;
  color: #0D122D;
  margin-bottom: 8px;
}

.empty-state-description {
  font-size: 14px;
  color: var(--color-muted);
  max-width: 24rem;
  margin-bottom: 32px;
}

/* Table container minimum height */
.table-container {
  min-height: 400px;
}

/* Stat badges/pills */
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 20px;
  border-radius: 9999px;
  font-size: 14px;
}

.stat-pill-green {
  background-color: #D9FAEC;
  color: var(--color-token-green-ink);
}

.stat-pill-red {
  background-color: #FFE0EB;
  color: var(--color-token-red-ink);
}

.stat-pill-gray {
  background-color: #F3F3F5;
  color: #56596C;
}

.stat-pill-yellow {
  background-color: #FFF4DB;
  color: #B07A00;
}

/* ==========================================================================
   SINGLE-APPLICANT PAGE
   Layout-only styles for the single-applicant screening form and results.
   Colors use DS variables; components reuse DS classes (ds-card, form-field-*,
   alert-banner, status-pill, divider, btn-*).
   ========================================================================== */

.sa-page {
  min-height: calc(100vh - 64px);
  /* Containing block for absolutely positioned helpers (sr-only live
     regions): without it their static position, deep in the scrolled
     content, extends the document itself and the window grows a second
     scrollbar with dead space under the app shell. */
  position: relative;
}

.sa-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Single Reports home is an INDEX page, so it matches the other indexes
   (.max-w-table, 1100px) rather than the narrower form-page default — otherwise
   its heading and empty state sit at a different x than Cascades/Applicants.
   Horizontal padding is dropped because the shared .page-content-inner already
   supplies 24px; .sa-container's own 24px was stacking on top of it. */
.sa-container.sr-home {
  max-width: 1100px;
  /* Only the bottom inset is kept: .page-content-inner already supplies the
     horizontal padding, and .sa-container's 32px top would push this page's
     heading 32px lower than every other index. */
  padding: 0 0 64px;
}

.sa-header { margin-bottom: 24px; }

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

/* Same row with no title beside the action — keeps the action on the right. */
.sa-header-row-end { justify-content: flex-end; }

.sa-mode-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  padding-top: 4px;
}

.sa-mode-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sa-mode-hint {
  font-size: 11px;
  color: var(--color-mirage-30, #B6B8C0);
  margin: 0;
}

.sa-mode-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}

.sa-mode-badge-test {
  background-color: var(--color-mirage-05, #F3F3F5);
  color: var(--color-mirage-60, #6E7181);
}

.sa-mode-badge-live {
  background-color: rgba(0, 223, 129, 0.12);
  color: #00a85e;
}

.sa-mode-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-mirage-30, #B6B8C0);
  transition: color 0.2s ease;
  user-select: none;
}

.sa-mode-label-active {
  color: var(--color-mirage-80, #3D4157);
}

.sa-mode-switch {
  position: relative;
  width: 40px;
  height: 22px;
  background-color: var(--color-mirage-10, #E8E8EC);
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
}

.sa-mode-switch.sa-mode-live {
  background-color: var(--color-token-green, #00DF81);
}
/* Locked for the sandbox (aria-disabled + the shared .is-locked hint): the
   track stays grey and the thumb goes flat; no opacity, so the hint bubble
   (this button's ::after) stays solid. */
.sa-mode-switch.is-locked { cursor: not-allowed; }
/* The switch sits at the top of the scroll area, so its hint opens downward. */
.sa-mode-switch.is-locked[data-locked-hint]::after { top: calc(100% + 8px); bottom: auto; }
.sa-mode-switch.is-locked[data-locked-hint]::before {
  top: calc(100% + 3px); bottom: auto;
  border-top-color: transparent; border-bottom-color: var(--color-mirage, #0D122D);
}
.sa-mode-switch.is-locked .sa-mode-switch-thumb { background-color: var(--color-mirage-05, #F3F3F5); box-shadow: none; }

.sa-mode-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.sa-mode-switch.sa-mode-live .sa-mode-switch-thumb {
  transform: translateX(18px);
}

/* Reusable toggle switch */
.toggle-switch,
.toggle-switch button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* Non-interactive switch, rendered in place of the real toggle when the
   operator lacks production approval. Declared after the base so it wins
   the cursor, exactly as the inline style did. */
.toggle-switch-locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.toggle-switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  background-color: var(--color-mirage-10, #E8E8EC);
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.toggle-switch-track.active {
  background-color: var(--color-token-green, #00DF81);
}

.toggle-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.toggle-switch-track.active .toggle-switch-thumb {
  transform: translateX(18px);
}

.sa-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-mirage);
}

.sa-subtitle {
  font-size: 14px;
  color: var(--color-mirage-60);
  margin-top: 4px;
}

.sa-card { margin-bottom: 20px; }

.sa-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.sa-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: var(--color-blue-05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sa-card-icon-svg {
  width: 20px;
  height: 20px;
  color: var(--color-blue);
}

.sa-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-mirage);
}

.sa-card-desc {
  font-size: 13px;
  color: var(--color-mirage-60);
  margin-top: 2px;
}

.sa-section-divider {
  border-top: 1px solid var(--color-link-water);
  margin: 24px 0;
}

.sa-node-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-mirage);
}

/* Form grid — 2 columns */
.sa-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sa-col-span-2 { grid-column: span 2; }

@media (max-width: 640px) {
  .sa-form-grid { grid-template-columns: 1fr; }
  .sa-col-span-2 { grid-column: span 1; }
}

/* Workflow search + count bar */
.sa-workflow-search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sa-workflow-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--color-link-water);
  border-radius: 9px;
  padding: 0 12px;
  height: 36px;
  flex: 1;
  max-width: 280px;
  transition: border-color 0.15s ease;
}

.sa-workflow-search:focus-within {
  border-color: var(--color-blue);
}

.sa-workflow-search-icon {
  width: 16px;
  height: 16px;
  color: var(--color-mirage-60);
  flex-shrink: 0;
}

.sa-workflow-search-input {
  width: 100%;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-mirage-80);
  line-height: 20px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent;
}

.sa-workflow-search-input::placeholder {
  color: var(--color-mirage-60);
}

.sa-workflow-count {
  font-size: 13px;
  color: var(--color-mirage-60);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Scrollable workflow container */
.sa-workflow-scroll {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--color-link-water);
  border-radius: 9px;
  padding: 12px;
  background: var(--color-app-bg, #F7F9FB);
}

/* Workflow selector grid */
.sa-workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* Empty search state */
.sa-workflow-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
}

.sa-workflow-empty-icon {
  width: 32px;
  height: 32px;
  color: var(--color-mirage-30);
}

/* Workflow selector cards — only custom styles that utilities can't cover */
.sa-workflow-card {
  border: 2px solid var(--color-link-water);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.sa-workflow-card:hover {
  border-color: var(--color-blue-30);
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.06);
}

.sa-workflow-card--selected {
  border-color: var(--color-blue);
  background: var(--color-blue-05);
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.12);
}

/* Check icon — hidden by default, shown when selected */
.sa-workflow-check {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sa-workflow-card--selected .sa-workflow-check {
  opacity: 1;
}

/* Dim unselected cards when a selection has been made */
.sa-workflow-scroll--has-selection .sa-workflow-card:not(.sa-workflow-card--selected) {
  opacity: 0.45;
  filter: grayscale(0.2);
}

.sa-workflow-scroll--has-selection .sa-workflow-card:not(.sa-workflow-card--selected):hover {
  opacity: 0.8;
  filter: none;
}

.sa-product-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sa-workflow-card-footer {
  padding-top: 12px;
  border-top: 1px solid var(--color-link-water);
}

/* Submit area */
.sa-actions { display: flex; justify-content: flex-end; }

.sa-submit-btn { min-width: 260px; justify-content: center; }

/* ── Results view ─────────────────────────────────────────────────── */

.sa-results-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sa-results-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sa-elapsed {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-mirage-60);
  font-variant-numeric: tabular-nums;
}

/* Node result cards */
.sa-node-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sa-node-card {
  background: var(--color-gray-05);
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.sa-node-card--pending  { opacity: 0.55; }
.sa-node-card--running  { border-color: var(--color-blue-30); box-shadow: 0 0 0 2px rgba(0, 41, 255, 0.08); opacity: 1; }
.sa-node-card--waiting  { border-color: var(--color-token-orange); opacity: 1; }
.sa-node-card--success  { border-color: var(--color-token-green); opacity: 1; }
.sa-node-card--failed   { border-color: var(--color-token-red); opacity: 1; }
.sa-node-card--skipped  { opacity: 0.45; }

/* Collapsed skipped summary row */
.sa-skipped-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--color-mirage-60);
  background: var(--color-gray-05);
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  opacity: 0.55;
}

.sa-skipped-summary svg { flex-shrink: 0; color: var(--color-mirage-30); }

.sa-node-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}

.sa-node-card-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sa-node-card-status-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sa-node-card--pending .sa-node-card-status-icon { color: var(--color-mirage-30); }
.sa-node-card--running .sa-node-card-status-icon { color: var(--color-blue); }
.sa-node-card--waiting .sa-node-card-status-icon { color: var(--color-token-orange); }
.sa-node-card--success .sa-node-card-status-icon { color: var(--color-token-green-ink); }
.sa-node-card--failed  .sa-node-card-status-icon { color: var(--color-token-red-ink); }
.sa-node-card--skipped .sa-node-card-status-icon { color: var(--color-mirage-30); }

/* Expand/collapse toggle on cards with output */
.sa-node-card[data-expandable] .sa-node-card-header { cursor: pointer; }

.sa-node-card-toggle {
  display: flex;
  align-items: center;
  color: var(--color-mirage-30);
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.sa-node-card--collapsed .sa-node-card-toggle { transform: rotate(-90deg); }

.sa-node-card-status-text { font-size: 13px; font-weight: 500; color: var(--color-mirage-60); }
.sa-status-running { color: var(--color-blue); }
.sa-status-success { color: var(--color-token-green-ink); }
.sa-status-failed  { color: var(--color-token-red-ink); }
.sa-status-skipped { color: var(--color-mirage-30); }

/* Node type badges — uses DS status colors */
.sa-node-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 2px;
}

.sa-type-product   { background: var(--color-blue-05);                        color: var(--color-blue); }
.sa-type-condition  { background: var(--color-secondary-token-yellow-light);   color: var(--color-catalina-blue); }
.sa-type-action     { background: var(--color-secondary-token-purple-light);   color: var(--color-token-purple); }
.sa-type-wait       { background: var(--color-secondary-token-orange-light);   color: var(--color-token-orange); }
.sa-type-goto       { background: var(--color-secondary-token-purple-light);   color: var(--color-token-purple); }
.sa-type-trigger    { background: var(--color-secondary-token-green-light);    color: var(--color-token-green-ink); }
.sa-type-default    { background: var(--color-mirage-05);                      color: var(--color-mirage-60); }

/* Node output area */
.sa-node-card-output {
  border-top: 1px solid var(--color-link-water);
  padding: 14px 16px;
}

.sa-output-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

@media (max-width: 640px) {
  .sa-output-grid { grid-template-columns: 1fr; }
}

.sa-output-item { display: flex; flex-direction: column; gap: 2px; }

.sa-output-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-mirage-60);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sa-output-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-mirage);
  word-break: break-word;
}

.sa-output-toggle {
  display: block;
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 13px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-blue);
}

.sa-score-factors {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-link-water);
}
.sa-score-factors-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-mirage-70);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.sa-score-factors-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sa-score-factors-list li {
  font-size: 13px;
  color: var(--color-mirage-80);
  padding: 4px 0;
  padding-left: 16px;
  position: relative;
}
.sa-score-factors-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-mirage-30, #C4C6C8);
}
.sa-score-factor-code {
  font-weight: 600;
  color: var(--color-mirage);
}

.sa-notice-links {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-link-water);
}
.sa-notice-links-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-mirage-70);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.sa-notice-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.sa-notice-link-label {
  font-size: 13px;
  color: var(--color-mirage-80);
}
.sa-notice-link-actions {
  display: flex;
  gap: 8px;
}
.sa-notice-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-blue);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.15s;
}
.sa-notice-btn:hover {
  background-color: var(--color-primary-light, #E6EAFF);
}

.sa-node-error { font-size: 13px; color: var(--color-token-red-ink); }

/* The credential picker sits outside the modal's padded cards, so it carries
   the body gutter itself. */
.sa-credential-section { padding: 0 20px; }

/* Utilities */
.sa-icon-sm { width: 20px; height: 20px; }

@keyframes sa-spin { to { transform: rotate(360deg); } }
.sa-spin { animation: sa-spin 1s linear infinite; }

/* Confirm delete dialog */
.confirm-delete-dialog { max-width: 420px; width: 100%; }

/* Form dialogs reuse the confirm shell but need room for inputs. Declared
   after .confirm-delete-dialog so the wider max-width wins, as the inline
   style used to. */
.confirm-dialog-md { max-width: 440px; }
.confirm-dialog-lg { max-width: 480px; }

.confirm-delete-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background-color: var(--color-secondary-token-red-light, #FFE0EB);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-token-red-ink);
}

/* Caution (not destructive) variant — used by the "batch in progress" confirm,
   which warns about losing the live view rather than deleting anything. */
.confirm-delete-icon-warning {
  background-color: #FFF3E0;
  color: var(--color-token-yellow);
}

.confirm-delete-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-link-water, #DFEAF2);
}

/* CSV Upload Modal */
.csv-upload-modal {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--color-link-water, #DFEAF2);
  width: 640px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  animation: workflow-modal-slide-in 0.25s ease-out;
}

.csv-upload-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px 10px;
  border-bottom: 1px solid var(--color-link-water, #DFEAF2);
  flex-shrink: 0;
}

.csv-upload-modal-header > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.csv-upload-modal-header h3,
.csv-upload-modal-header p {
  margin: 0;
}

.csv-upload-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-mirage-70, #56596C);
  border-radius: 6px;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

.csv-upload-modal-close:hover {
  background-color: var(--color-mirage-05, #F3F3F5);
}

.csv-upload-modal-body {
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.csv-upload-modal-state {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.csv-upload-modal-state-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.csv-upload-modal-preview-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.csv-upload-modal-file-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.csv-upload-modal-table-panel {
  flex: 1;
  min-height: 180px;
  overflow: auto;
}

.csv-upload-modal-status-list {
  flex: 1;
  min-height: 180px;
  overflow-y: auto;
}

.csv-upload-modal-footer {
  flex-shrink: 0;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-link-water, #DFEAF2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #ffffff 18px);
}

.csv-upload-modal-progress-content {
  gap: 10px;
}

.csv-upload-modal-progress-header,
.csv-upload-modal-progress-bar-block {
  margin: 0;
}

.csv-upload-modal-progress-header h5 {
  margin: 0;
}

.csv-upload-modal-progress-search {
  margin-bottom: 0;
}

.csv-upload-modal-progress-state {
  margin-top: -4px;
}

.csv-upload-modal-progress-footer {
  margin-top: 8px;
  padding-top: 10px;
}

.batch-export-step {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.batch-export-step-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.batch-export-step-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.batch-export-step-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-mirage, #0D122D);
}

.batch-export-step-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-mirage-70, #56596C);
}

.batch-export-step-list {
  flex: 1;
  min-height: 240px;
  overflow-y: auto;
}

.batch-export-step-footer {
  flex-shrink: 0;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-link-water, #DFEAF2);
}

.builder-form-container .batch-export-step-list {
  max-height: 360px;
}

/* Bare "Deselect All" affordance in the picker header, plus the compact field
   search below it. .batch-export-search sits after .form-field-input so its
   tighter metrics still win. */
.batch-export-toggle-all {
  font-size: 11px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.batch-export-search {
  font-size: 12px;
  padding: 6px 10px;
}

/* ── Single-Applicant Modal ─────────────────────────────── */

.single-applicant-modal {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--color-link-water, #DFEAF2);
  width: 900px;
  max-width: calc(100vw - 48px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: workflow-modal-slide-in 0.25s ease-out;
}

.sa-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-link-water, #DFEAF2);
  flex-shrink: 0;
}

.sa-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--color-mirage-70, #56596C);
  cursor: pointer;
  transition: background 0.15s ease;
}

.sa-modal-close:hover {
  background: var(--color-mirage-05, #F3F3F5);
}

.sa-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.sa-modal-mode-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

/* Override sa-container sizing for modal context */
.sa-modal-body .sa-container {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Reduce workflow scroll height in modal */
.sa-modal-body .sa-workflow-scroll {
  max-height: 220px;
}

/* Results header in modal */
.sa-modal-body .sa-results-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

/* ==========================================================================
   PRODUCT INFO DIALOG (sidebar "i" button)
   ========================================================================== */

/* Info button on sidebar node items — top-right corner */
.builder-node-info-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--color-mirage-30, #B6B8C0);
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.builder-node-item:hover .builder-node-info-btn {
  opacity: 1;
}

.builder-node-info-btn:hover {
  color: var(--color-blue, #1814F3);
  background-color: var(--color-blue-05, #F2F4FF);
}

/* Product info dialog */
.product-info-dialog {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  width: 640px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.product-info-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--color-mirage-30, #B6B8C0);
  cursor: pointer;
  z-index: 1;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.product-info-close-btn:hover {
  color: var(--color-mirage, #0D122D);
  background-color: var(--color-mirage-05, #F3F3F5);
}

.product-info-body {
  padding: 44px 24px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-mirage-20, #CFD0D5) transparent;
}

.product-info-body::-webkit-scrollbar {
  width: 6px;
}

.product-info-body::-webkit-scrollbar-track {
  background: transparent;
}

.product-info-body::-webkit-scrollbar-thumb {
  background-color: var(--color-mirage-20, #CFD0D5);
  border-radius: 3px;
}

.product-info-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-mirage-30, #B6B8C0);
}

.product-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-right: 28px;
}

.product-info-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.product-info-name {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-mirage, #0D122D);
  margin: 0;
}

.product-info-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.product-info-price {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-mirage, #0D122D);
  white-space: nowrap;
}

.product-info-price-unit {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-mirage-60, #6E7181);
}

.product-info-description {
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-mirage-60, #6E7181);
  margin: 0;
}

.product-info-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Limitations spans full width */
.product-info-sections .explore-detail-section--limitations {
  grid-column: 1 / -1;
}

/* Sections align to top so shorter columns don't stretch */
.product-info-sections .explore-detail-section {
  align-self: start;
}

/* Override justified text in dialog — left-align reads better at this width */
.product-info-sections .explore-detail-text,
.product-info-sections .explore-use-cases li {
  text-align: left;
}

.product-info-cta {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.product-info-loading {
  text-align: center;
  padding: 32px 16px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: var(--color-mirage-60, #6E7181);
}

/* ==========================================================================
   BILLING PRODUCT FORM - Tab navigation
   ========================================================================== */
.bp-tab-nav {
  display: flex;
  border-bottom: 2px solid var(--color-link-water, #DFEAF2);
  margin-bottom: 16px;
  position: sticky;
  top: -16px;
  margin-top: -16px;
  padding-top: 16px;
  background: white;
  z-index: 2;
}

.bp-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-mirage-70, #56596C);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bp-tab:hover {
  color: var(--color-mirage, #0D122D);
}

.bp-tab.bp-tab-active {
  color: var(--color-primary, #0029FF);
  border-bottom-color: var(--color-primary, #0029FF);
}

.bp-tab-panel {
  display: none;
}

.bp-tab-panel.bp-tab-panel-active {
  display: block;
}

/* Tab glyphs — one inline style per <svg> before the CSP pass. */
.bp-tab svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ---------- Output tab field list ---------- */
.bp-output-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bp-output-group-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-mirage-70, #56596C);
  margin-bottom: 4px;
}

.bp-output-group-body {
  background: var(--color-mirage-05, #F3F3F5);
  border-radius: 8px;
  padding: 2px 0;
}

.bp-output-field-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 12px;
}

.bp-output-field-row + .bp-output-field-row {
  border-top: 1px solid var(--color-link-water, #DFEAF2);
}

.bp-output-field-label {
  font-size: 12px;
  color: var(--color-mirage-80, #3D4157);
}

.bp-output-enum-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

.bp-output-enum-pill {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-mirage-70, #56596C);
  background: white;
  border: 1px solid var(--color-link-water, #DFEAF2);
  padding: 0 5px;
  border-radius: 3px;
  line-height: 18px;
}

/* Footnote under the output field list. Overrides the 1rem line-height that
   .text-xs sets on the same element, as the inline style used to. */
.bp-output-footnote {
  line-height: 1.5;
}

/* ---------- If/Else multi-condition ---------- */
.ifelse-logic-toggle {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--color-link-water, #DFEAF2);
  margin-bottom: 10px;
}

.ifelse-logic-toggle.hidden {
  display: none;
}

.ifelse-logic-btn {
  flex: 1;
  padding: 5px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-mirage-70, #56596C);
  background: var(--color-mirage-05, #F3F3F5);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ifelse-logic-btn:hover {
  color: var(--color-mirage, #0D122D);
}

.ifelse-logic-btn-active {
  background: var(--color-primary, #0029FF);
  color: white;
}

.ifelse-logic-btn-active:hover {
  color: white;
}

.ifelse-condition-row {
  position: relative;
  padding: 12px;
  border: 1px solid #DFEAF2;
  border-radius: 6px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ifelse-condition-row .builder-form-label {
  font-size: 14px;
  font-weight: 500;
  color: #56596C;
  margin-bottom: 4px;
}

.ifelse-condition-row .builder-form-input,
.ifelse-condition-row .builder-form-select {
  padding: 10px 12px;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #DFEAF2;
  border-radius: 6px;
}

.ifelse-condition-row .builder-form-input:focus,
.ifelse-condition-row .builder-form-select:focus {
  border-color: #0029FF;
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.1);
}

.ifelse-condition-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--color-muted);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ifelse-condition-remove:hover {
  color: var(--color-token-red-ink);
  background: rgba(250, 58, 85, 0.08);
}

.ifelse-condition-remove:hover {
  color: var(--color-token-red-ink);
  background: rgba(250, 58, 85, 0.08);
}

.ifelse-add-condition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary, #0029FF);
  background: none;
  border: 1px dashed var(--color-link-water, #DFEAF2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ifelse-add-condition:hover {
  border-color: var(--color-primary, #0029FF);
  background: var(--color-primary-light, #E6EAFF);
}

.ifelse-add-condition-icon {
  width: 14px;
  height: 14px;
}

/* Searchable field picker (combobox) */
.ifelse-field-picker {
  position: relative;
}

.ifelse-field-picker-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 0;
  background-color: #ffffff;
  border: 1px solid #DFEAF2;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ifelse-field-picker-input-wrap:hover {
  border-color: #0029FF;
}

.ifelse-field-picker-open {
  border-color: #0029FF;
  background-color: white;
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.1);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

input.ifelse-field-picker-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 12px;
  font-size: 14px;
  background: transparent;
  cursor: pointer;
  color: #3D4157;
  min-width: 0;
  box-shadow: none;
  border-radius: 0;
}

input.ifelse-field-picker-input:focus {
  border: none;
  box-shadow: none;
}

.ifelse-field-picker-open .ifelse-field-picker-input {
  cursor: text;
}

.ifelse-field-picker-input::placeholder {
  color: var(--color-muted);
}

.ifelse-field-picker-chevron {
  width: 16px;
  height: 16px;
  color: var(--color-mirage-60, #6E7181);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.ifelse-field-picker-open .ifelse-field-picker-chevron {
  transform: rotate(180deg);
}

.ifelse-field-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: white;
  border: 1px solid #0029FF;
  border-top: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.ifelse-field-picker-dropdown.hidden {
  display: none;
}

.ifelse-field-picker-options {
  max-height: 240px;
  overflow-y: auto;
}

/* Inside the Decision modal, the dropdown gets clipped by .decision-modal overflow:hidden.
   Cap it tighter so it fits within the modal viewport, and always show the scrollbar
   so users know there are more options below the fold. */
.decision-modal .ifelse-field-picker-dropdown {
  overflow: visible;
}
/* macOS hides overlay scrollbars — keep max-height generous so common field lists fit.
   When they don't (e.g., upstream Product with many fields), force a native scrollbar. */
.decision-modal .ifelse-field-picker-options {
  max-height: 400px;
  overflow-y: auto;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  scrollbar-width: thin;
  scrollbar-color: #868896 #F3F3F5;
}
.decision-modal .ifelse-field-picker-options::-webkit-scrollbar {
  width: 8px;
  -webkit-appearance: none;
}
.decision-modal .ifelse-field-picker-options::-webkit-scrollbar-track {
  background: #F3F3F5;
}
.decision-modal .ifelse-field-picker-options::-webkit-scrollbar-thumb {
  background: #C4C6C8;
  border-radius: 4px;
}
/* Add a subtle fade at the bottom when content does overflow, as a universal scroll cue */
.decision-modal .ifelse-field-picker-dropdown {
  position: absolute;
}
.decision-modal .ifelse-field-picker-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 8px;
  bottom: 0;
  height: 22px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
  pointer-events: none;
  border-bottom-left-radius: 6px;
}

.ifelse-field-picker-group-label {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-mirage-70, #56596C);
  background: var(--color-mirage-05, #F3F3F5);
  position: sticky;
  top: 0;
}

.ifelse-field-picker-option {
  padding: 7px 10px 7px 16px;
  font-size: 13px;
  cursor: pointer;
  color: var(--color-mirage-80, #3D4157);
}

.ifelse-field-picker-option:hover {
  background: var(--color-primary-light, #E6EAFF);
}

.ifelse-field-picker-option-selected {
  color: var(--color-primary, #0029FF);
  font-weight: 500;
}

.ifelse-field-picker-empty {
  padding: 16px 10px;
  font-size: 12px;
  color: var(--color-muted);
  text-align: center;
}

.ifelse-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  background: var(--color-mirage-05, #F3F3F5);
  border-radius: 8px;
  border: 1px dashed var(--color-link-water, #DFEAF2);
}

.ifelse-empty-state-icon {
  width: 32px;
  height: 32px;
  color: var(--color-mirage-60, #6E7181);
  margin-bottom: 12px;
}

.ifelse-empty-state-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-mirage, #0D122D);
  margin: 0 0 4px;
}

.ifelse-empty-state-desc {
  font-size: 12px;
  color: var(--color-mirage-70, #56596C);
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================================
   TEST STEP - Mode toggle and result panel
   ========================================================================== */
.test-mode-btn {
  background: var(--color-mirage-05, #F3F3F5);
  color: var(--color-mirage-70, #56596C);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.test-mode-btn:hover:not(.test-mode-active) {
  background: var(--color-link-water, #DFEAF2);
}

.test-mode-btn.test-mode-active {
  background: var(--color-mirage, #0D122D);
  color: white;
}

#test-step-btn:hover:not(:disabled) {
  opacity: 0.9;
}

#test-step-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#test-step-btn .animate-spin {
  animation: spin 1s linear infinite;
}

/* ---------- Test tab: mock banner, scenario picker, demo applicant ----------
   Every rule below replaces a style attribute on _billing_product_form; a CSP
   without 'unsafe-inline' drops style attributes, and there is no nonce for
   them. Values are carried over unchanged. */
.bp-test-hint {
  font-size: 12px;
  color: var(--color-mirage-70, #56596C);
  margin-top: 6px;
}

.bp-mock-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #FFF8E7;
  border: 1px solid #F0DFA8;
  border-radius: 8px;
}

.bp-mock-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #92640D;
}

.bp-mock-banner-title {
  font-size: 12px;
  font-weight: 600;
  color: #92640D;
}

.bp-mock-banner-text {
  font-size: 11px;
  color: #A6790F;
  margin-top: 2px;
}

.bp-test-select {
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 8px;
  color: var(--color-mirage-80, #3D4157);
  background: white;
}

.bp-test-help {
  font-size: 11px;
  color: var(--color-muted, #63667A);
  margin-top: 4px;
}

.bp-demo-note {
  font-size: 11px;
  color: var(--color-muted, #63667A);
  margin-top: 6px;
}

.bp-demo-card {
  background: var(--color-mirage-05, #F3F3F5);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--color-link-water, #DFEAF2);
}

.bp-demo-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bp-demo-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background: var(--color-primary, #0029FF);
  flex-shrink: 0;
}

.bp-demo-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-mirage, #0D122D);
}

.bp-demo-email {
  font-size: 11px;
  color: var(--color-mirage-70, #56596C);
}

.bp-demo-grid {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-link-water, #DFEAF2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 11px;
  color: var(--color-mirage-80, #3D4157);
}

.bp-demo-grid-full {
  grid-column: span 2;
}

.bp-demo-key {
  color: var(--color-mirage-70, #56596C);
}

.bp-test-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: var(--color-mirage, #0D122D);
  color: #ffffff;
  transition: opacity 0.15s ease;
}

.bp-test-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ==========================================================================
   APPLICANT SOURCE — CSV upload + batch execution node form
   Layout for _applicant_source_form's three states (upload, preview, batch
   progress). These were style attributes; the values are unchanged. Rules that
   tune a shared component (.form-field-select, .builder-search-input,
   .btn-primary) sit after those definitions so they still win, as inline
   styles did.
   ========================================================================== */
.csv-dropzone {
  transition: all 0.15s ease;
}

.csv-template-btn {
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
}

.csv-change-file-btn {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-primary, #0029FF);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.csv-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.csv-file-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-mirage-70, #56596C);
  min-width: 0;
}

.csv-mapping-summary {
  margin-bottom: 8px;
}

.csv-preview-scroll {
  max-height: 280px;
  overflow-y: auto;
}

.csv-credential-select {
  width: 100%;
  padding: 6px 28px 6px 10px;
  height: 32px;
}

/* Same compact metrics for the API-credential picker outside the node form —
   the CSV upload modal and the single-applicant modal. */
.credential-select-compact {
  width: 100%;
  padding: 6px 28px 6px 10px;
  height: 32px;
}

.csv-run-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.15s ease;
}

/* batch_execution_controller drives width and background through
   element.style once a batch starts; this is the at-rest state. */
.csv-progress-bar {
  width: 0%;
  background: var(--color-blue, #1814F3);
}

.csv-search-wrapper {
  margin-bottom: 8px;
}

.csv-search-input {
  padding: 7px 10px;
  font-size: 12px;
}

.csv-row-list {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}

.csv-batch-actions {
  border-top: 1px solid var(--color-link-water, #DFEAF2);
}

/* --------------------------------------------------------------------------
   csv_upload_controller.js templates — column-mapping summary, preview table,
   pagination and the validation summary. These markup strings previously
   carried style="" attributes; every declaration below is a verbatim move of
   one, so the rendered result is unchanged. Kept here (after
   .builder-form-select and .status-pill-sm) so the tuning rules still win the
   cascade exactly as the inline styles did.
   -------------------------------------------------------------------------- */
.csv-map-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

.csv-map-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C4C6C8;
  flex-shrink: 0;
}

.csv-map-dot-mapped {
  background: var(--color-token-green, #00DF81);
}

.csv-map-header {
  font-size: 11px;
  color: var(--color-mirage-80, #3D4157);
  min-width: 80px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csv-map-select {
  font-size: 11px;
  padding: 2px 6px;
  flex: 1;
  min-width: 0;
}

.csv-map-toggle {
  cursor: pointer;
  user-select: none;
}

.csv-map-pill {
  font-size: 11px;
}

/* Collapsed by default via the `hidden` class the controller toggles; this
   rule intentionally sets no `display` so that toggle keeps working. */
.csv-mapping-detail {
  margin-top: 8px;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 8px;
  padding: 8px 10px;
}

/* Rotated to 180deg through element.style by toggleMappingDetail. */
.csv-mapping-chevron {
  color: var(--color-gray-chateau, #9EA0AB);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.csv-preview-th {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-mirage-70, #56596C);
  text-align: left;
  white-space: nowrap;
}

.csv-preview-th-index {
  width: 24px;
}

.csv-preview-th-status {
  width: 20px;
  padding: 6px 4px;
}

.csv-preview-row-alt {
  background: #F3F3F5;
}

.csv-preview-td {
  padding: 5px 8px;
  font-size: 11px;
  color: var(--color-mirage-80, #3D4157);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.csv-preview-td-index {
  padding: 5px 8px;
  font-size: 11px;
  color: var(--color-muted);
}

.csv-preview-td-status {
  padding: 5px 4px;
  text-align: center;
}

.csv-row-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.csv-row-dot-valid {
  background: var(--color-token-green, #00DF81);
}

.csv-row-dot-invalid {
  background: var(--color-token-red, #FA3A55);
}

/* The disabled look was previously branched in JS off the same flag that sets
   the `disabled` attribute, so :disabled reproduces it exactly. */
.csv-page-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-primary, #0029FF);
}

.csv-page-btn:disabled {
  cursor: default;
  color: #C4C6C8;
}

.csv-validation-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.csv-validation-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.csv-validation-stat-valid {
  color: var(--color-token-green, #00DF81);
}

.csv-validation-stat-invalid {
  color: var(--color-token-red, #FA3A55);
}

.csv-validation-row-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-token-green, #00DF81);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   batch_execution_controller.js templates — adverse-action notice links, the
   export field picker and the two error surfaces. Same provenance: each rule
   is a lifted style="" attribute, values unchanged.
   -------------------------------------------------------------------------- */
.batch-notice-link {
  font-size: 10px;
  color: var(--color-primary, #0029FF);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.batch-group-toggle-btn {
  font-size: 10px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 2px;
}

.batch-field-option {
  padding: 3px 0;
}

.batch-error-line {
  margin-top: 2px;
}

.batch-error-detail {
  margin-top: 4px;
}

.batch-error-list {
  margin: 4px 0 0;
  padding-left: 16px;
}

.batch-error-alert {
  font-size: 12px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   visualization_controller.js node test-result card. The outcome colour was
   interpolated into three inline styles (border, icon, label); it now rides a
   single modifier class that publishes --test-outcome-color to the subtree.
   -------------------------------------------------------------------------- */
.test-result-card {
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--test-outcome-color);
  background: var(--color-white, #FFFFFF);
}

.test-result-pass { --test-outcome-color: var(--color-token-green); }
.test-result-fail { --test-outcome-color: var(--color-token-red); }
.test-result-review { --test-outcome-color: var(--color-token-yellow); }
.test-result-error { --test-outcome-color: var(--color-token-red); }

.test-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.test-result-outcome {
  display: flex;
  align-items: center;
  gap: 8px;
}

.test-result-icon {
  color: var(--test-outcome-color);
}

.test-result-outcome-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--test-outcome-color);
}

.test-result-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

.test-result-chip {
  background: var(--color-mirage-05, #F3F3F5);
  color: var(--color-mirage-70, #56596C);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.test-result-chip-live {
  background: var(--color-secondary-token-yellow-light, #FFF5D9);
  color: #92400e;
}

.test-result-fields {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.test-result-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
}

.test-result-field-label {
  font-weight: 500;
  color: var(--color-mirage-70, #56596C);
  flex-shrink: 0;
}

.test-result-field-value {
  color: var(--color-mirage-80, #3D4157);
  word-break: break-all;
}

.test-result-error-body {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-token-red, #FA3A55);
  word-break: break-all;
}

.test-value-empty {
  color: var(--color-muted);
  font-style: italic;
}

.test-value-yes {
  color: var(--color-token-green, #00DF81);
  font-weight: 500;
}

.test-value-no {
  color: var(--color-mirage-70, #56596C);
}

.test-value-number {
  font-weight: 500;
  color: var(--color-mirage-80, #3D4157);
}

.test-value-id {
  font-family: monospace;
  font-size: 10px;
  color: var(--color-mirage-70, #56596C);
}

/* ==========================================================================
   VARIABLE AUTOCOMPLETE - Dropdown, browse button, preview tags
   ========================================================================== */

/* Dropdown container */
.variable-autocomplete-dropdown {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
  animation: autocomplete-fade-in 0.15s ease-out;
  max-height: 320px;
  overflow: hidden;
  position: relative;
  z-index: 100; /* above the builder toolbar (30) and canvas caption when it opens upward */
}

.variable-autocomplete-options {
  max-height: 300px;
  overflow-y: auto;
}

/* Scroll indicator gradient at bottom */
.variable-autocomplete-dropdown::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, white);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s;
}

.variable-autocomplete-dropdown.scrolled-to-bottom::after {
  opacity: 0;
}

@keyframes autocomplete-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Group headers */
.autocomplete-group {
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.autocomplete-group-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-mirage-30, #B6B8C0);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.autocomplete-group-line {
  flex: 1;
  height: 1px;
  background: var(--color-link-water, #DFEAF2);
}

/* Options */
.autocomplete-option {
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background-color 0.1s ease;
}

.autocomplete-option:hover {
  background-color: var(--color-mirage-05, #F3F3F5);
}

.autocomplete-option.highlighted {
  background-color: var(--color-blue-05, #F2F4FF);
}

.autocomplete-option.hidden,
.autocomplete-group.hidden {
  display: none;
}

.autocomplete-option-label {
  font-size: 13px;
  color: var(--color-mirage-80, #3D4157);
  white-space: nowrap;
}

.autocomplete-option .var-code {
  font-size: 10px;
  color: var(--color-mirage-30, #B6B8C0);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.autocomplete-option:hover .var-code,
.autocomplete-option.highlighted .var-code {
  opacity: 1;
}

.autocomplete-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--color-mirage-30, #B6B8C0);
  text-align: center;
}

/* Input wrapper with browse button */
.variable-input-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
}

.variable-input-wrapper .builder-form-input,
.variable-input-wrapper .builder-form-textarea {
  flex: 1;
  padding-right: 36px;
}

.variable-browse-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-mirage-30, #B6B8C0);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.variable-browse-btn:hover {
  background: var(--color-blue-05, #F2F4FF);
  color: var(--color-blue, #1814F3);
}

/* The "{x}" glyph inside the browse button. Was an inline style repeated on
   every node form that offers variable insertion (send email, internal
   notification, adverse action, and the shared _variable_input_field partial);
   style attributes cannot survive a CSP without 'unsafe-inline'. */
.variable-browse-btn > span {
  font-size: 13px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  line-height: 1;
}

/* For textareas, position the browse button at top-right */
.variable-input-wrapper .builder-form-textarea ~ .variable-browse-btn {
  top: 10px;
  transform: none;
}

/* Variable input left-border indicator */
.builder-form-input.has-variables,
.builder-form-textarea.has-variables {
  border-left: 3px solid var(--color-blue-05, #F2F4FF);
}

/* Preview row with variable tags */
.variable-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 0 0;
}

.variable-preview.hidden {
  display: none;
}

.variable-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

.variable-tag-context {
  background: var(--color-secondary-token-green-light, #D9FAEC);
  color: #0a8a54;
}

.variable-tag-upstream {
  background: var(--color-blue-05, #F2F4FF);
  color: var(--color-blue, #1814F3);
}

/* Pill overlay for variable inputs (Zapier-style) */
.variable-pill-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 36px;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  z-index: 1;
  cursor: text;
}

/* Align pill to top in textareas */
.variable-input-wrapper:has(.builder-form-textarea) .variable-pill-overlay {
  align-items: flex-start;
  padding-top: 8px;
}

/* Mixed content overlay: text + inline pill tags */
.variable-pill-overlay-mixed {
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  background: var(--color-mirage-05, #F3F3F5);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-mirage, #0D122D);
  padding: 10px 12px;
  padding-right: 36px;
  border-radius: 8px;
  overflow-y: auto;
  right: 0;
}

.variable-pill-inline {
  display: inline-flex;
  vertical-align: middle;
  margin: 1px 2px;
}

.variable-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: 6px;
  background: var(--color-blue-05, #F2F4FF);
  border: 1px solid rgba(24, 20, 243, 0.12);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.variable-pill-tag:hover {
  border-color: rgba(24, 20, 243, 0.3);
  box-shadow: 0 1px 3px rgba(24, 20, 243, 0.08);
}

.variable-pill-source {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-mirage-30, #B6B8C0);
}

.variable-pill-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-blue, #1814F3);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

.variable-pill-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--color-mirage-30, #B6B8C0);
  font-size: 16px;
  line-height: 1;
  padding: 0 0 0 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.variable-pill-clear:hover,
.variable-pill-remove:hover {
  color: var(--color-token-red-ink);
}

/* Variable pill remove button (inside contenteditable pills) */
.variable-pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--color-mirage-30, #B6B8C0);
  font-size: 16px;
  line-height: 1;
  padding: 0 0 0 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}

/* Rich editor for reason field (contenteditable) */
.reason-rich-editor {
  flex: 1;
  min-height: 80px;
  outline: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  resize: none;
  overflow-y: auto;
  line-height: 1.6;
}

.reason-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--color-mirage-30, #B6B8C0);
  pointer-events: none;
}

.reason-rich-editor .variable-pill-tag {
  display: inline-flex;
  vertical-align: baseline;
  margin: 2px 2px;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

/* Position browse button at top-right for the reason editor */
.variable-input-wrapper .reason-rich-editor ~ .variable-browse-btn {
  top: 10px;
  transform: none;
}

/* Rich variable editor (shared contenteditable with inline pills) */
.rich-variable-editor {
  flex: 1;
  min-height: 80px;
  outline: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  resize: none;
  overflow-y: auto;
  line-height: 1.6;
}

.rich-variable-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--color-mirage-30, #B6B8C0);
  pointer-events: none;
}

.rich-variable-editor .variable-pill-tag {
  display: inline-flex;
  vertical-align: baseline;
  margin: 2px 2px;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.rich-variable-editor--single-line {
  min-height: unset;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Position browse button at top-right for rich editors */
.variable-input-wrapper .rich-variable-editor ~ .variable-browse-btn {
  top: 50%;
  transform: translateY(-50%);
}

.variable-input-wrapper .rich-variable-editor:not(.rich-variable-editor--single-line) ~ .variable-browse-btn {
  top: 10px;
  transform: none;
}

/* SMS character counter */
#sms-char-count {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   EXECUTIONS PAGE — Batch expand, error preview, timeline
   ========================================================================== */

/* Fixed-width column for workflow name */
.col-w-200 { width: 200px; flex-shrink: 0; }

/* Batch children container */
.batch-children-indent {
  border-bottom: 1px solid var(--color-link-water, #DFEAF2);
  border-left: 3px solid var(--color-primary, #0029FF);
  margin-left: 16px;
  background: var(--color-mirage-05, #F3F3F5);
}

/* Indent only the name column in child rows to preserve column alignment */
.batch-children-indent .col-name {
  padding-left: 12px;
  position: relative;
}

.batch-children-indent .docket-table-row {
  background: var(--color-mirage-05, #F3F3F5);
}

.batch-children-indent .docket-table-row:hover {
  background: var(--color-primary-light, #E6EAFF);
}

.batch-children-indent .docket-table-row + .docket-table-row {
  border-top: 1px solid var(--color-link-water, #DFEAF2);
}

/* Batch child inline status (dot + plain text, no pill) */
.batch-child-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.batch-child-status .status-pill-dot {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--color-mirage-30, #B6B8C0);
}

.batch-child-status .dot-green { background-color: var(--color-token-green, #00DF81) !important; }
.batch-child-status .dot-red { background-color: var(--color-token-red, #FA3A55) !important; }
.batch-child-status .dot-blue { background-color: var(--color-primary, #0029FF) !important; }
.batch-child-status .dot-yellow { background-color: var(--color-token-yellow, #FFBB38) !important; }

.batch-child-review-dot-yellow { color: #B07A00; font-weight: 500; }
.batch-child-review-dot-green  { color: #008A51; font-weight: 500; }
.batch-child-review-dot-red    { color: #B3233D; font-weight: 500; }

.review-aging {
  color: #B3233D !important;
}

/* Warning glyph beside an aging duration, nudged onto the text baseline.
   Shared by the executions table row and the execution detail header. */
.review-aging-icon { vertical-align: -3px; }

/* Status subline under the pill: capped so a long reason truncates instead
   of widening the column. */
.exec-status-subline { max-width: 156px; }

/* Expanded version-history drawer under an adverse-action template row: spans
   the full grid and swaps the row's padding/background for a nested look.
   Compound selector so it outranks .docket-table-row from anywhere. */
.docket-table-row.aa-template-versions-row {
  grid-column: 1 / -1;
  padding: 8px 16px;
  background: var(--color-mirage-05, #F3F3F5);
}

.aa-template-versions-list {
  margin: 0;
  padding-left: 16px;
}

/* Tighten the status pills inside the executions table so they hug their
   labels instead of carrying a global ~10px padding that makes short
   labels (Approved, Denied) look mostly background. Scoped to docket
   rows so the rest of the design system's pill usage stays untouched. */
.docket-table-row .status-pill-sm {
  padding: 4px 8px;
  gap: 4px;
}

/* Re-evaluation chain indicators */
.chain-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  background: #F2F4FF;
  color: #0029FF;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.chain-superseded-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-mirage-70, #56596C);
  padding: 6px 12px;
  background: #F2F4FF;
  border-left: 3px solid #0029FF;
}

.chain-superseded-banner svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.chain-pill svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.reeval-connector svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Nested re-evaluation rows in the batch drill-down. Visually distinct
   from the original batch-child rows so users understand they're derived. */
.reeval-row {
  background: #F7F9FB;
  border-left: 3px solid #0029FF;
}

.reeval-row:hover {
  background: #EEF3FF;
}

.reeval-connector {
  color: var(--color-mirage-70, #56596C);
  margin-right: 6px;
  flex-shrink: 0;
}

/* Bulk-review selection UI on the executions index */
.bulk-review-checkbox-col {
  width: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 8px;
}

.bulk-review-checkbox-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary, #0029FF);
}

.bulk-review-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFFFFF;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(13, 18, 45, 0.18);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 100;
  min-width: 420px;
}

.bulk-review-bar.hidden { display: none; }

.bulk-review-bar-count {
  font-size: 14px;
  color: var(--color-mirage-80, #3D4157);
  padding-right: 8px;
  border-right: 1px solid var(--color-link-water, #DFEAF2);
}

.bulk-review-over-limit {
  color: #B3233D !important;
  font-weight: 600;
}

.bulk-review-bar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.batch-child-status .dot-gray { background-color: var(--color-mirage-30, #B6B8C0) !important; }

/* Batch "View all" link */
.batch-view-all {
  border-top: 1px solid var(--color-link-water, #DFEAF2);
  padding: 10px 16px;
}

.batch-view-all-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary, #0029FF);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.15s ease;
}

.batch-view-all-link:hover {
  color: var(--color-blue-90, #1A3EFF);
  text-decoration: underline;
}

/* Chevron rotation for batch expand */
.rotate-90 {
  transform: rotate(90deg);
}

.transition-transform {
  transition: transform 0.2s ease;
}

/* Truncated error preview */
.execution-error-preview {
  font-size: 12px;
  color: var(--color-token-red-ink);
  margin-top: 2px;
  line-height: 1.4;
  max-width: 600px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Batch row summary text */
.batch-summary-text {
  font-size: 13px;
  color: var(--color-mirage-70, #56596C);
}

/* Clickable execution row */
.execution-row-link {
  display: flex;
  width: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.execution-row-link:hover {
  text-decoration: none;
  color: inherit;
}

/* Execution detail page timeline */
.exec-timeline {
  position: relative;
  padding-left: 40px;
}

.exec-timeline-line {
  position: absolute;
  left: 12px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background-color: var(--color-link-water, #DFEAF2);
}

.exec-timeline-item {
  position: relative;
  padding-bottom: 22px;
}

.exec-timeline-item:last-child {
  padding-bottom: 0;
}

/* Typed icon node on the rail — status is carried by the ring/icon color, so
   completed steps don't need a redundant pill. */
.exec-timeline-node {
  position: absolute;
  left: -40px;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid var(--color-link-water, #DFEAF2);
  background: var(--color-white, #FFFFFF);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-mirage-70, #56596C);
}
.exec-timeline-node svg { width: 13px; height: 13px; }

.exec-timeline-node-completed {
  border-color: var(--color-token-green, #00DF81);
  background: var(--color-secondary-token-green-light, #D9FAEC);
  color: var(--color-mirage-80, #3D4157);
}
.exec-timeline-node-failed {
  border-color: var(--color-token-red, #FA3A55);
  background: var(--color-secondary-token-red-light, #FFE0EB);
  color: var(--color-token-red-ink);
}
.exec-timeline-node-pending {
  border-color: var(--color-mirage-30, #B6B8C0);
  background: var(--color-mirage-05, #F3F3F5);
  color: var(--color-muted);
}
.exec-timeline-node-running {
  border-color: var(--color-blue-70, #4D69FF);
  background: var(--color-blue-05, #F2F4FF);
  color: var(--color-primary, #0029FF);
}
.exec-timeline-node-waiting {
  border-color: var(--color-token-yellow, #FFBB38);
  background: var(--color-secondary-token-yellow-light, #FFF5D9);
  color: var(--color-mirage-80, #3D4157);
}
.exec-timeline-node-skipped {
  border-color: var(--color-mirage-20, #CFD0D5);
  background: var(--color-mirage-05, #F3F3F5);
  border-style: dashed;
  color: var(--color-muted);
}

.exec-timeline-body { min-width: 0; padding-top: 3px; }
.exec-timeline-name { font-weight: 600; font-size: 14px; color: var(--color-mirage-80, #3D4157); }
.exec-timeline-sub {
  font-size: 12.5px; color: var(--color-mirage-70, #56596C);
  cursor: pointer; margin-top: 3px; list-style: none;
}
.exec-timeline-sub::before { content: "▸ "; color: var(--color-muted); }
.exec-timeline-decision[open] .exec-timeline-sub::before { content: "▾ "; }
.exec-timeline-sub::-webkit-details-marker { display: none; }

/* Nested children inside a Human Review timeline block: indent + connector
   line so the grouping reads visually without a heavier container. */
.exec-timeline-children {
  position: relative;
  margin-top: 12px;
  padding-left: 40px;
}

.exec-timeline-children-line {
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-link-water, #DFEAF2);
}

/* Small uppercase eyebrow over the subject name in the execution header. */
.exec-detail-eyebrow { letter-spacing: 0.08em; }

.exec-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.exec-detail-header > :first-child {
  flex: 1;
  min-width: 0;
}

/* ========================================
   Dashboard Recent Cascades Section
   ======================================== */

.dashboard-recent {
  background-color: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 12px;
  padding: 24px;
  max-width: 1200px;
  margin: 24px auto 0;
  box-sizing: border-box;
}

.dashboard-recent-list {
  display: flex;
  flex-direction: column;
}

.dashboard-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}

.dashboard-recent-item:hover {
  background-color: var(--color-mirage-05, #F3F3F5);
}

.dashboard-recent-item + .dashboard-recent-item {
  border-top: 1px solid var(--color-link-water, #DFEAF2);
}

/* CSV drag-and-drop active state */
.csv-drop-active {
  background-color: var(--color-primary-light, #E6EAFF) !important;
  outline: 2px dashed var(--color-primary, #0029FF);
  outline-offset: -2px;
}

.docket-table-row.csv-drop-active {
  background-color: var(--color-primary-light, #E6EAFF) !important;
}

.dashboard-recent-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: var(--color-primary-light, #E6EAFF);
  color: var(--color-primary, #0029FF);
  flex-shrink: 0;
}

.dashboard-recent-info {
  flex: 1;
  min-width: 0;
}

.exec-detail-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-mirage-70, #56596C);
}

.exec-detail-meta dt {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-mirage-60, #6E7181);
  margin-bottom: 2px;
}

.exec-detail-meta dd {
  margin: 0;
}

/* Collapsible output JSON */
.exec-output-toggle {
  font-size: 12px;
  color: var(--color-blue-90, #1A3EFF);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin-top: 4px;
}

.exec-output-toggle:hover {
  text-decoration: underline;
}

.exec-output-json {
  font-size: 12px;
  background: var(--color-mirage-05, #F3F3F5);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 6px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  color: var(--color-mirage-80, #3D4157);
}

/* Execution detail — two-column layout when a review panel is present */
.exec-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.exec-detail-layout:has(.exec-detail-rail) {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.exec-detail-main { min-width: 0; }

.exec-detail-rail {
  position: sticky;
  top: 24px;
  /* A sticky rail taller than the viewport pins its overflow out of reach —
     cap it to the visible area and scroll internally instead. */
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

@media (max-width: 1100px) {
  .exec-detail-layout:has(.exec-detail-rail) {
    grid-template-columns: minmax(0, 1fr);
  }
  .exec-detail-rail { position: static; }
}

/* Review panel card */
.review-panel-card {
  background: #FFFFFF;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 1px 2px rgba(13, 18, 45, 0.03);
}

.review-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.review-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-mirage, #0D122D);
}

.review-panel-decided {
  font-size: 13px;
  color: var(--color-mirage-70, #56596C);
  padding: 8px 10px;
  background: #F7F9FB;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-panel-branch-outcome {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.review-panel-decided-ok   { background: #D9FAEC; color: #008A51; }
.review-panel-decided-err  { background: #FFE0EB; color: #B3233D; }
.review-panel-decided-warn { background: #FFF4DB; color: #B07A00; }

.review-panel-locked {
  font-size: 13px;
  color: var(--color-mirage-70, #56596C);
  padding: 10px 12px;
  background: var(--color-mirage-05, #F3F3F5);
  border-radius: 6px;
  border-left: 3px solid #C4C6C8;
}

.review-panel-linked-note {
  font-size: 12px;
  color: var(--color-mirage-70, #56596C);
  padding: 6px 10px;
  background: #F2F4FF;
  border-radius: 6px;
  border-left: 3px solid #0029FF;
}

.review-panel-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-panel-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-mirage-70, #56596C);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.review-panel-assignee {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.review-assignee-link button {
  background: transparent;
  border: none;
  color: var(--color-mirage-70, #56596C);
  font-size: 12px;
  padding: 0;
  cursor: pointer;
}

.review-assignee-link button:hover {
  color: var(--color-primary, #0029FF);
  text-decoration: underline;
}

.review-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-btn-full {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.review-note-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-note-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  resize: vertical;
}

.review-note-form input[type="submit"] {
  align-self: flex-start;
}

.review-event-list-wrap {
  position: relative;
}

.review-event-list-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.review-event-list-wrap.is-scrollable::after {
  opacity: 1;
}

.review-event-list {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #C4C6C8 transparent;
}

/* Inline variant rendered inside the Execution Timeline's Human Review
   step. Fits the card background, with a left rail to visually nest the
   events under the step title. */
.review-event-list-inline {
  margin-top: 6px;
  padding: 8px 8px 8px 14px;
  border-left: 2px solid #DFEAF2;
  max-height: none;
  overflow-y: visible;
}

.review-event-list::-webkit-scrollbar {
  width: 8px;
}

.review-event-list::-webkit-scrollbar-track {
  background: transparent;
}

.review-event-list::-webkit-scrollbar-thumb {
  background: #DFEAF2;
  border-radius: 4px;
}

.review-event-list::-webkit-scrollbar-thumb:hover {
  background: #C4C6C8;
}

.review-event-item {
  padding: 8px 10px;
  background: #F7F9FB;
  border-radius: 6px;
  font-size: 13px;
}

.review-event-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.review-event-label {
  font-weight: 600;
  color: var(--color-mirage, #0D122D);
  font-size: 13px;
}

.review-event-time {
  font-size: 11px;
  color: var(--color-muted);
}

.review-event-actor {
  font-size: 12px;
  color: var(--color-mirage-70, #56596C);
}

.review-event-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-mirage-80, #3D4157);
  background: #FFFFFF;
  padding: 6px 8px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Expandable long note: one-line preview + disclosure toggle.
   Uses the native <details> element so it's accessible + JS-free. */
.review-event-note-expandable {
  margin-top: 6px;
  background: #FFFFFF;
  border-radius: 4px;
  font-size: 12px;
  color: var(--color-mirage-80, #3D4157);
}

.review-event-note-expandable > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.review-event-note-expandable > summary::-webkit-details-marker { display: none; }

.review-event-note-preview {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-event-note-toggle::before {
  content: "Show more";
  color: var(--color-primary, #0029FF);
  font-weight: 500;
  font-size: 11px;
  white-space: nowrap;
}

.review-event-note-expandable[open] > summary .review-event-note-preview {
  display: none;
}

.review-event-note-expandable[open] > summary .review-event-note-toggle::before {
  content: "Show less";
}

.review-event-note-expandable[open] > summary {
  padding-bottom: 2px;
  justify-content: flex-end;
}

.review-event-note-full {
  margin-top: 0;
  border-top: 1px solid var(--color-mirage-05, #F3F3F5);
}

/* Review decision confirmation modal */
.review-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 18, 45, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 16px;
}

/* The modal overlay lives inside a sticky-positioned ancestor
   (.exec-detail-rail) which forms a stacking context. When the modal is
   open we temporarily raise that ancestor (z-index: 9001, see below) so the
   overlay paints over the surrounding chrome. We also lock body scroll here
   so the JS controller doesn't have to mutate inline styles. */
body.review-modal-open {
  overflow: hidden;
}
body.review-modal-open .exec-detail-rail {
  z-index: 9001;
}

.review-confirm-overlay.hidden { display: none; }

.review-confirm-dialog {
  background: #FFFFFF;
  border-radius: 12px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(13, 18, 45, 0.25);
}

.review-confirm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-link-water, #DFEAF2);
}

.review-confirm-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-mirage, #0D122D);
}

.review-confirm-close {
  background: transparent;
  border: none;
  color: var(--color-mirage-70, #56596C);
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
}

.review-confirm-close:hover {
  background: var(--color-mirage-05, #F3F3F5);
}

.review-confirm-body {
  padding: 24px 28px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-confirm-lede {
  font-size: 14px;
  color: var(--color-mirage-80, #3D4157);
  margin: 0;
}

.review-confirm-preview-title {
  font-size: 12px;
  color: var(--color-mirage-70, #56596C);
  margin-bottom: 6px;
}

.review-confirm-node-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 6px;
  padding: 6px 8px;
  background: #F7F9FB;
}

.review-confirm-node-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  background: #FFFFFF;
  border-radius: 4px;
  font-size: 13px;
}

.review-confirm-node-name {
  color: var(--color-mirage, #0D122D);
  font-weight: 500;
}

.review-confirm-node-type {
  font-size: 11px;
  color: var(--color-mirage-70, #56596C);
  background: var(--color-mirage-05, #F3F3F5);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.review-confirm-empty {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
  padding: 8px 10px;
  background: var(--color-mirage-05, #F3F3F5);
  border-radius: 6px;
}

.review-confirm-warning {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid;
}

.review-confirm-warning-test {
  color: #3D4157;
  background: #F3F3F5;
  border-left-color: #868896;
}

.review-confirm-warning-live {
  color: #B3233D;
  background: #FFE0EB;
  border-left-color: #FA3A55;
}

.review-confirm-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-confirm-form.hidden { display: none; }
.review-confirm-preview.hidden { display: none; }

.review-confirm-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.review-confirm-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-link-water, #DFEAF2);
}

/* Inputs snapshot card on execution detail */
.exec-inputs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 20px;
}
.exec-inputs-grid dt {
  font-size: 11px;
  color: var(--color-mirage-70, #56596C);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  margin-bottom: 2px;
}
.exec-inputs-grid dd {
  font-size: 13px;
  color: var(--color-mirage-80, #3D4157);
  word-break: break-word;
  margin: 0;
  margin-inline-start: 0;
}

/* Human Review banner on execution detail */
.review-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: #FFF4DB;
  border: 1px solid #FFBB38;
  border-radius: 10px;
}

.review-banner-icon {
  color: #B07A00;
  flex-shrink: 0;
  margin-top: 2px;
}

.review-banner-title {
  font-weight: 600;
  color: #6E4E00;
  font-size: 14px;
  margin-bottom: 2px;
}

.review-banner-sub {
  font-size: 13px;
  color: #7A5800;
}

.review-banner-rules {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-banner-rules code {
  font-size: 12px;
  color: #5A4200;
  background: rgba(255, 255, 255, 0.6);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

/* Decision branch chip shown next to a Decision node in the timeline */
.decision-branch-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

.decision-branch-chip-pass {
  background: #D9FAEC;
  color: #008A51;
}

.decision-branch-chip-human-review {
  background: #FFF4DB;
  color: #B07A00;
}

.decision-branch-chip-fail {
  background: #FFE0EB;
  color: #B3233D;
}

/* Human-readable Decision output summary */
.decision-summary {
  margin-top: 6px;
  padding: 8px 12px;
  background: #F7F9FB;
  border-left: 3px solid #DFEAF2;
  border-radius: 0 6px 6px 0;
}

.decision-summary-header {
  font-size: 12px;
  color: #56596C;
  margin-bottom: 4px;
  font-weight: 500;
}

.decision-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.decision-summary-list code {
  font-size: 12px;
  color: #3D4157;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

/* Error preview in timeline (allow wrapping) */
.execution-error-wrap {
  white-space: normal;
  max-width: none;
}

/* Execution row inline detail (error/wait messages) */
.execution-row-detail {
  padding-left: 15px;
  padding-bottom: 6px;
  width: 100%;
}

/* Flex min-width reset for truncation in flex containers */
.flex-truncate {
  min-width: 0;
}

.dashboard-recent-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-mirage, #0D122D);
  margin: 0;
  line-height: 20px;
}

.dashboard-recent-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  font-size: 13px;
}

.dashboard-recent-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* ========================================
   Dashboard Templates Section
   ======================================== */

.dashboard-templates {
  background-color: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 12px;
  padding: 24px;
  max-width: 1200px;
  margin: 24px auto;
  box-sizing: border-box;
}

.dashboard-templates-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* Dashboard Tabs */
.dashboard-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
}

.dashboard-tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-mirage-70, #56596C);
  background: transparent;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.dashboard-tab:hover {
  color: var(--color-mirage, #0D122D);
  background-color: var(--color-mirage-05, #F3F3F5);
}

.dashboard-tab-active {
  color: var(--color-white, #FFFFFF);
  background-color: var(--color-mirage, #0D122D);
  border-color: var(--color-mirage, #0D122D);
}

.dashboard-tab-active:hover {
  color: var(--color-white, #FFFFFF);
  background-color: var(--color-mirage, #0D122D);
}

/* Template Cards Scroll Container */
.dashboard-template-scroll {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1000px) {
  .dashboard-template-scroll {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .dashboard-template-scroll {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .dashboard-template-scroll {
    grid-template-columns: 1fr;
  }
}


/* Template Card */
.dashboard-template-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background-color: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  scroll-snap-align: start;
}

.dashboard-template-card:hover {
  border-color: var(--color-blue-30, #B3BFFF);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Template Icon */
.dashboard-template-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}

.dashboard-template-icons {
  display: flex;
  gap: 6px;
}

/* Template Card Text */
.dashboard-template-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-mirage, #0D122D);
  margin: 0;
  line-height: 20px;
}

.dashboard-template-description {
  font-size: 13px;
  color: var(--color-mirage-70, #56596C);
  margin: 0;
  line-height: 18px;
  flex: 1;
}

/* ========================================
   Templates Browse Page
   ======================================== */

.templates-page {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 24px;
}

.templates-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.templates-grid .dashboard-template-card {
  flex: unset;
  width: 100%;
}

@media (max-width: 768px) {
  .templates-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .templates-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Landing Page (.lp-*)
   ======================================== */

/* --- Shell & Layout --- */
.lp-shell {
  display: flex;
  min-height: 100vh;
  background: #FFFFFF;
  font-family: 'Inter', sans-serif;
}


.lp-content {
  width: 848px;
  margin-left: max(220px, calc((100% - 848px) / 2));
  margin-right: auto;
  padding-top: 72px;
}

/* --- Sidebar --- */
.lp-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  height: 100vh;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 100;
  padding: 32px 16px 20px;
  box-sizing: border-box;
}

.lp-sidebar-top {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* No overflow here: scrolling lives on .lp-sidebar-links so the
     absolutely-positioned brand menu can't be clipped, and Windows
     never draws a horizontal scrollbar under the nav. */
}

.lp-brand-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  cursor: default;
  user-select: none;
}

.lp-sidebar-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.lp-sidebar-logo img {
  height: 26px;
  width: auto;
  display: block;
}

/* Desktop rail is 220px with 16px side padding (188px content); at 26px the
   wordmark + caret run 203px and clip the caret / spawn a Windows h-scrollbar. */
.lp-sidebar .lp-sidebar-logo img {
  height: 22px;
}

.lp-brand-caret {
  color: var(--color-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
  cursor: pointer;
}

.lp-brand-caret-open {
  transform: rotate(180deg);
}

.lp-brand-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #FFFFFF;
  border: 1px solid #DFEAF2;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  padding: 8px;
  /* No width floor: P-02 left the CRS wordmark as this menu's only item, and
     the old 160px (sized for "Powered by" + wordmark) stranded ~56px of dead
     space beside it. The card hugs its content, so the mark sits on equal
     23px insets. */
  z-index: 10;
}

.lp-brand-menu.hidden {
  display: none;
}

.lp-brand-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}

.lp-brand-menu-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.lp-brand-crs-logo {
  display: block;
}

/* Optical kerning against the preceding "Powered by" — scoped to the sidebar
   footer, the only place that still pairs the label with the wordmark (P-02
   dropped the label from the brand dropdown, where the wordmark now aligns on
   the menu item's own padding). */
.lp-sidebar-powered-logo .lp-crs-logo {
  margin-left: -12px;
}

.lp-brand-menu-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
  white-space: nowrap;
}

.lp-brand-menu-name {
  font-size: 14px;
  font-weight: 700;
  color: #0D122D;
  white-space: nowrap;
}

.lp-mobile-bar .lp-brand-menu-item {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.lp-mobile-bar .lp-brand-menu {
  left: 0;
  background: #FFFFFF;
  border: 1px solid #DFEAF2;
}

.lp-sidebar-divider {
  height: 1px;
  background: #DFEAF2;
  margin: 24px 24px 16px;
}

.lp-sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.lp-sidebar-link {
  display: flex;
  align-items: center;
  padding: 10px 8px;
  color: #56596C;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.lp-sidebar-link:hover {
  color: #0D122D;
}

.lp-sidebar-link-active {
  color: #0D122D;
  font-weight: 600;
  border-left-color: #0029FF;
}

.lp-sidebar-subnav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 4px;
}

.lp-sidebar-subnav.hidden {
  display: none;
}

.lp-sidebar-sublink {
  display: flex;
  align-items: center;
  padding: 7px 8px 7px 20px;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-left: 2px solid transparent;
  margin-left: 3px;
  transition: color 0.2s, border-color 0.2s;
  cursor: pointer;
}

.lp-sidebar-sublink:hover {
  color: #0D122D;
}

.lp-sidebar-sublink-active {
  color: #0029FF;
  font-weight: 600;
}

.lp-sidebar-bottom {
  padding: 0 8px 0;
  flex-shrink: 0;
}

.lp-sidebar-cta {
  display: block;
  text-align: center;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 9px;
  background: #0029FF;
  color: #FFFFFF;
  text-decoration: none;
  transition: background 0.2s;
  box-sizing: border-box;
}

.lp-sidebar-cta:hover {
  background: #0022D4;
}

.lp-sidebar-powered {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 16px;
}

.lp-sidebar-powered-text {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  margin-right: 0;
}

.lp-sidebar-powered-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s;
}

.lp-sidebar-powered-logo:hover {
  opacity: 0.8;
}

/* --- Mobile Bar --- */
.lp-mobile-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #FFFFFF;
  border-bottom: 1px solid #DFEAF2;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
}

.lp-mobile-toggle {
  background: none;
  border: none;
  color: #0D122D;
  cursor: pointer;
  padding: 4px;
}

.lp-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

.lp-mobile-overlay.hidden {
  display: none;
}

/* --- Top Auth Bar --- */
.lp-topbar {
  position: fixed;
  top: 0;
  left: 220px;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 28px 64px 0;
  background: transparent;
  z-index: 99;
  pointer-events: none;
}

.lp-topbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.lp-topbar-login {
  font-size: 14px;
  font-weight: 500;
  color: #3D4157;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 9px;
  transition: color 0.2s, background 0.2s;
}

.lp-topbar-login:hover {
  color: #0D122D;
  background: #F5F7FA;
}

.lp-topbar-signup {
  font-size: 14px;
  padding: 8px 20px;
}

/* --- Hero --- */
.lp-hero {
  background: #FFFFFF;
  padding: 24px 64px 80px;
}

.lp-hero-pills {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
}

.lp-hero-float {
  font-size: 13px;
  font-weight: 500;
  color: #3D4157;
  background: #FFFFFF;
  border: 1px solid #DFEAF2;
  border-radius: 100px;
  padding: 8px 16px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.lp-hero-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.lp-hero-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #0D122D;
  line-height: 1.1;
  margin: 0 0 20px;
  letter-spacing: -1px;
}

.lp-hero-sub {
  font-size: 18px;
  color: #56596C;
  line-height: 1.6;
  margin: 0;
  max-width: 520px;
}

.lp-hero-powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 13px;
  color: var(--color-muted);
}

.lp-hero-powered-text {
  white-space: nowrap;
}

.lp-hero-powered-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.lp-hero-powered-logo:hover {
  opacity: 1;
}

.lp-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


.lp-btn-lg {
  padding: 14px 28px !important;
  font-size: 16px !important;
  border-radius: 9px;
}

.lp-btn-lg.btn-secondary {
  background: #FFFFFF;
  color: #0D122D;
  border-color: #DFEAF2;
}

.lp-btn-lg.btn-secondary:hover {
  background: #F5F7FA;
  border-color: #0029FF;
  color: #0029FF;
}

.lp-hero-visual {
  width: 100%;
}

/* --- Mockup Browser Chrome --- */
.lp-mockup-browser {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 0 0 1px #DFEAF2;
  overflow: hidden;
}

.lp-mockup-sm {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 0 0 1px #DFEAF2;
}

.lp-mockup-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #F5F7FA;
  border-bottom: 1px solid #DFEAF2;
}

.lp-mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.lp-mockup-dot-red { background: #FA3A55; }
.lp-mockup-dot-yellow { background: #FFBB38; }
.lp-mockup-dot-green { background: #00DF81; }

.lp-mockup-titlebar-text {
  font-size: 12px;
  color: var(--color-muted);
  margin-left: 8px;
}

/* --- Hero Interactive Demo --- */
.lp-demo-resetting .lp-demo-ghost,
.lp-demo-resetting .lp-demo-node-animated,
.lp-demo-resetting .lp-demo-line-yes,
.lp-demo-resetting .lp-demo-line-eviction,
.lp-demo-resetting .lp-demo-panel-item { transition: none !important; }

.lp-demo-workspace {
  display: flex;
  position: relative;
  overflow: hidden;
}

.lp-demo-panel {
  width: 140px;
  flex-shrink: 0;
  background: #F7F9FB;
  border-right: 1px solid #DFEAF2;
  padding: 10px 8px;
}

.lp-demo-panel-header {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding: 0 4px;
}

.lp-demo-panel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #3D4157;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 2px;
  cursor: default;
  transition: background 0.15s, opacity 0.15s, color 0.15s;
  user-select: none;
}

.lp-demo-panel-item-used { opacity: 0.35; }

.lp-demo-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lp-dot-primary { background: var(--color-primary, #0029FF); }
.lp-dot-purple { background: var(--color-token-purple); }
.lp-dot-orange { background: #FF8C38; }
.lp-dot-info { background: #00C1FF; }
.lp-dot-green { background: var(--color-token-green); }
.lp-dot-red { background: var(--color-token-red, #FA3A55); }
.lp-dot-yellow { background: var(--color-token-yellow); }

.lp-demo-lib-highlight {
  background: #EEF1FF;
  color: #0029FF;
}

.lp-demo-lib-dragging { opacity: 0.15 !important; }

.lp-demo-canvas {
  flex: 1;
  position: relative;
  height: 390px;
  background: #FAFBFF;
}

.lp-demo-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lp-demo-line {
  stroke: #DFEAF2;
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 4 3;
}

.lp-demo-line-no {
  stroke: #FA3A55;
  stroke-dasharray: none;
  stroke-width: 1.5;
  fill: none;
}

.lp-demo-line-yes,
.lp-demo-line-eviction {
  fill: none;
  stroke: #00DF81;
  stroke-width: 1.5;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 0.7s ease;
}

.lp-demo-line-eviction { transition: stroke-dashoffset 0.4s ease; }

.lp-demo-connector-draw { stroke-dashoffset: 0 !important; }

.lp-demo-node-animated {
  opacity: 0;
  transform: scale(0.88) translateY(6px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lp-demo-node-visible {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

.lp-demo-ghost {
  position: absolute;
  width: 120px;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  font-size: 11px;
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-demo-ghost-active {
  opacity: 1;
  transform: scale(1.05) rotate(-1.5deg);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

.lp-demo-ghost-moving {
  transform: translate(var(--ghost-dx), var(--ghost-dy)) scale(1.02) rotate(0deg) !important;
  transition: opacity 0.2s ease,
              transform 1.5s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s ease !important;
}

.lp-demo-ghost-drop {
  opacity: 0 !important;
  transform: translate(var(--ghost-dx), var(--ghost-dy)) scale(0.96) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.lp-demo-decision-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
}

.lp-demo-branch-yes {
  font-size: 9px;
  font-weight: 600;
  color: var(--color-token-green-ink);
}

.lp-demo-branch-no {
  font-size: 9px;
  font-weight: 600;
  color: var(--color-token-red-ink);
}

/* Demo node positions */
.lp-demo-node-credit    { top: 20px;  left: 230px; }
.lp-demo-node-decision  { top: 110px; left: 230px; }
.lp-demo-node-adverse   { top: 215px; left: 395px; }
.lp-demo-node-criminal  { top: 215px; left: 65px; }
.lp-demo-node-eviction  { top: 315px; left: 65px; }

/* Ghost start positions & travel distances */
.lp-demo-ghost-criminal  { top: 56px; left: 5px; --ghost-dx: 200px; --ghost-dy: 159px; }
.lp-demo-ghost-eviction  { top: 88px; left: 5px; --ghost-dx: 200px; --ghost-dy: 227px; }

/* --- Workflow Canvas Mockup --- */
.lp-mockup-canvas {
  position: relative;
  height: 340px;
  background: #F9FAFB;
  padding: 12px;
}

.lp-mockup-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lp-mockup-node {
  position: absolute;
  width: 120px;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-size: 11px;
}

.lp-mockup-node-header {
  padding: 5px 10px;
  font-weight: 600;
  color: #FFFFFF;
  font-size: 10px;
  text-align: center;
}

.lp-mockup-header-blue { background: #0029FF; }
.lp-mockup-header-purple { background: #9233FE; }
.lp-mockup-header-green { background: #00DF81; color: #0D122D; }
/* Red keeps white text, so the fill darkens to the AA red ink (QA RT-04:
   white on #FA3A55 was 3.62:1); orange keeps its brand fill and takes ink
   text like the green/teal siblings (white on #FF8C38 was 2.32:1). */
.lp-mockup-header-red { background: var(--color-token-red-ink); }
.lp-mockup-header-teal { background: #00C1FF; color: #0D122D; }
.lp-mockup-header-orange { background: #FF8C38; color: #0D122D; }

.lp-mockup-node-body {
  padding: 6px 10px;
  color: #56596C;
  font-size: 10px;
  text-align: center;
}

/* --- Builder UI Mockup --- */
.lp-mockup-builder-ui {
  display: flex;
  min-height: 240px;
}

.lp-mockup-builder-sidebar {
  width: 130px;
  background: #F5F7FA;
  border-right: 1px solid #DFEAF2;
  padding: 12px 10px;
}

.lp-mockup-sidebar-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.lp-mockup-sidebar-label-spaced {
  margin-top: 8px;
}

.lp-mockup-sidebar-item {
  font-size: 11px;
  color: #3D4157;
  padding: 5px 8px;
  border-radius: 5px;
  margin-bottom: 3px;
  cursor: default;
}

.lp-mockup-sidebar-item:hover {
  background: #E6EAFF;
}

.lp-mockup-builder-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px;
  background: #FAFBFC;
}

.lp-mini-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #FFFFFF;
  border: 1px solid #DFEAF2;
  border-radius: 6px;
  font-size: 11px;
  color: #3D4157;
  font-weight: 500;
}

.lp-mini-node-active {
  border-color: #0029FF;
  box-shadow: 0 0 0 2px rgba(0, 41, 255, 0.08);
}

.lp-mini-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.lp-mini-connector {
  width: 2px;
  height: 16px;
  background: #DFEAF2;
}

/* --- Content Sections --- */
.lp-section {
  padding: 96px 64px;
}

.lp-section-alt {
  background: #FFFFFF;
}

.lp-section-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 64px;
}

.lp-section-reverse {
  flex-direction: row-reverse;
}

.lp-section-centered {
  flex-direction: column;
  text-align: center;
}

.lp-section-text {
  flex: 1;
  min-width: 0;
}

.lp-section-visual {
  flex: 1;
  min-width: 0;
}

.lp-section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #0029FF;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.lp-section-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #0D122D;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}

.lp-section-body {
  font-size: 16px;
  color: #56596C;
  line-height: 1.65;
  margin: 0 0 24px;
  max-width: 480px;
}

.lp-section-body-centered {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.lp-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #3D4157;
  line-height: 1.5;
}

.lp-check-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-primary, #0029FF);
}

/* --- Feature Tabs Showcase --- */
.lp-features-section {
  padding: 48px 0 64px;
}

.lp-features-card {
  background: #000000;
  border-radius: 16px;
  border: none;
  padding: 48px 40px 56px;
}

.lp-features-card-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
  text-align: left;
  margin: 0 0 36px;
}

/* Dark card — tab overrides */
.lp-features-card .lp-features-tabs {
  border-bottom-color: rgba(255,255,255,0.1);
}
.lp-features-card .lp-features-tab {
  border-top-color: transparent;
}
.lp-features-card .lp-features-tab:hover {
  background: rgba(255,255,255,0.06);
}
.lp-features-card .lp-features-tab-active {
  background: rgba(255,255,255,0.08);
  border-top-color: #4D6FFF;
}
.lp-features-card .lp-features-tab-icon { color: rgba(255,255,255,0.35); }
.lp-features-card .lp-features-tab-active .lp-features-tab-icon { color: #4D6FFF; }
/* R16-08: 0.45 composited on the card's opaque #000000 is rgb(115) = 4.41:1 at
   15px/600, under the 4.5:1 AA floor. 0.50 -> rgb(127.5) = 5.28:1. The AA
   minimum is alpha 0.4554, too close to the cliff to bank on; 0.50 still sits
   well below the active label's #FFFFFF (18.4:1), so the hierarchy holds. */
.lp-features-card .lp-features-tab-label { color: rgba(255,255,255,0.50); }
.lp-features-card .lp-features-tab-active .lp-features-tab-label { color: #FFFFFF; }
.lp-features-card .lp-features-tab-desc { color: rgba(255,255,255,0.3); }
.lp-features-card .lp-features-tab-active .lp-features-tab-desc { color: rgba(255,255,255,0.55); }

/* Dark card — panel text overrides */
.lp-features-card .lp-section-eyebrow { color: #4D6FFF; }
.lp-features-card .lp-section-headline { color: #FFFFFF; }
.lp-features-card .lp-section-body { color: rgba(255,255,255,0.75); }
.lp-features-card .lp-feature-list li { color: rgba(255,255,255,0.7); }
.lp-features-card .lp-check-icon path { fill: #4D6FFF; }

.lp-features-card .lp-vendor-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.lp-features-card .lp-vendor-card {
  padding: 14px;
  gap: 6px;
}
.lp-features-card .lp-vendor-card-icon {
  width: 36px;
  height: 36px;
  font-size: 12px;
}
.lp-features-card .lp-vendor-highlights { border-top-color: rgba(255,255,255,0.1); }
.lp-features-card .lp-vendor-tag {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.65);
}

.lp-features-card .lp-template-grid {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 0;
}
.lp-features-card .lp-template-card {
  text-align: left;
}
.lp-features-card .lp-template-icon {
  margin-left: 0;
  margin-right: auto;
}


.lp-features-tabs-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #000000;
  margin-bottom: 40px;
}

.lp-features-tabs-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lp-features-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #DFEAF2;
}

.lp-features-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 10px;
  background: none;
  border: none;
  border-top: 3px solid transparent;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  transition: all 0.2s ease;
}

.lp-features-tab:hover {
  background: #F7F9FB;
}

.lp-features-tab-active {
  border-top-color: #0029FF;
  background: #FFFFFF;
}

.lp-features-tab-icon {
  width: 20px;
  height: 20px;
  color: var(--color-muted);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.lp-features-tab-active .lp-features-tab-icon {
  color: #0029FF;
}

.lp-features-tab-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #56596C;
  line-height: 1.3;
}

.lp-features-tab-active .lp-features-tab-label {
  color: #0D122D;
}

.lp-features-tab-desc {
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.4;
  margin-top: 2px;
}

.lp-features-tab-active .lp-features-tab-desc {
  color: #56596C;
}

/* Panels */
.lp-features-panel {
  max-width: 1100px;
  margin: 0 auto;
  animation: lp-fade-in 0.3s ease;
}

.lp-features-panel-hidden {
  display: none;
}

.lp-features-panel-active {
  display: block;
}

@keyframes lp-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Accordion headers — hidden on desktop, shown on mobile via media query */
.lp-features-accordion-header {
  display: none;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  color: #FFFFFF;
  font-family: 'Space Grotesk', sans-serif;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.2s;
}

.lp-features-accordion-header:hover {
  opacity: 0.85;
}

.lp-features-panel:last-of-type .lp-features-accordion-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.lp-features-panel.lp-features-panel-active .lp-features-accordion-header {
  border-bottom: none;
}

/* Colored dot */
.lp-accordion-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lp-accordion-dot-blue { background: var(--color-primary, #0029FF); }
.lp-accordion-dot-purple { background: var(--color-token-purple, #9233FE); }
.lp-accordion-dot-green { background: var(--color-token-green, #00DF81); }
.lp-accordion-dot-orange { background: var(--color-token-orange, #FF8C38); }

/* Header text block */
.lp-accordion-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.lp-accordion-title {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.3;
}

.lp-accordion-desc {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

/* Chevron */
.lp-accordion-chevron {
  margin-left: auto;
  font-size: 14px;
  transition: transform 0.2s;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

/* Mobile hero compact workflow */
.lp-hero-mobile {
  display: none;
}

.lp-hero-mobile-chain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 28px 20px;
  background: #FAFBFF;
}

.lp-hero-mobile-node {
  animation: lp-node-pull-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lp-hero-mobile-node:nth-child(1) { animation-delay: 0.3s; }
.lp-hero-mobile-node:nth-child(3) { animation-delay: 1.0s; }
.lp-hero-mobile-node:nth-child(5) { animation-delay: 1.7s; }

.lp-hero-mobile-chain .lp-mini-connector {
  animation: lp-connector-draw 0.4s ease both;
}

.lp-hero-mobile-chain > .lp-mini-connector:nth-of-type(1) { animation-delay: 0.8s; }
.lp-hero-mobile-chain > .lp-mini-connector:nth-of-type(2) { animation-delay: 1.5s; }

.lp-mini-connector-branch {
  display: flex;
  gap: 24px;
  margin-top: 0;
  animation: lp-node-pull-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 2.4s;
}

.lp-mini-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.lp-mini-branch-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 2px;
}

.lp-mini-branch-yes {
  color: var(--color-token-green-ink);
  background: rgba(0, 223, 129, 0.1);
}

.lp-mini-branch-no {
  color: var(--color-token-red-ink);
  background: rgba(250, 58, 85, 0.1);
}

@keyframes lp-node-pull-in {
  0% { opacity: 0; transform: translateY(24px) scale(0.92); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lp-connector-draw {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

/* Reduced motion (QA RT-06): the entrance animations elsewhere on the landing
   page were already suppressed, but the hero mockup's ambient loops kept
   running. The pull-in/draw keyframes fill from opacity 0, so animation: none
   leaves these at their natural visible state; the lp-demo-* transition
   overrides make hero_demo_controller's static reveal snap instead of
   animating (the controller skips its loop under the same media query). */
@media (prefers-reduced-motion: reduce) {
  .lp-features-panel,
  .lp-hero-mobile-node,
  .lp-hero-mobile-chain .lp-mini-connector,
  .lp-mini-connector-branch {
    animation: none;
  }
  .lp-demo-node-animated { opacity: 1; transform: none; transition: none; }
  .lp-demo-line-yes, .lp-demo-line-eviction { stroke-dashoffset: 0; transition: none; }
  .lp-demo-ghost { transition: none; }
}

.lp-features-panel-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.lp-features-panel-visual {
  width: 100%;
  max-width: 620px;
}

.lp-features-panel-text {
  width: 100%;
  max-width: 620px;
  text-align: left;
}

.lp-features-panel-body {
  width: 100%;
  max-width: 620px;
  text-align: left;
}

.lp-features-panel-inner > .lp-section-eyebrow,
.lp-features-panel-inner > .lp-section-headline {
  width: 100%;
  max-width: 620px;
  text-align: left;
}

/* --- Vendor Highlights (tags) --- */
.lp-vendor-highlights {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.lp-vendor-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: #E6EAFF;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #0029FF;
}

/* --- Vendor Card Grid --- */
.lp-vendor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.lp-vendor-card {
  background: #FFFFFF;
  border: 1px solid #DFEAF2;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.lp-vendor-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.lp-vendor-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.lp-vendor-icon-primary { background: var(--color-primary-light, #E6EAFF); color: var(--color-primary, #0029FF); }
/* Purple ink, not the brand purple: #9233FE on the light tint was 4.35:1 (QA RT-04). */
.lp-vendor-icon-purple { background: var(--color-secondary-token-purple-light); color: var(--color-token-purple-ink); }
.lp-vendor-icon-green { background: var(--color-secondary-token-green-light); color: var(--color-token-green-ink); }

.lp-vendor-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #0D122D;
}

.lp-vendor-card-category {
  font-size: 12px;
  color: var(--color-muted);
}

/* --- Batch Processing Mockup --- */
.lp-batch-mockup {
  padding: 16px;
}

.lp-batch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.lp-batch-title {
  font-size: 13px;
  font-weight: 600;
  color: #0D122D;
}

.lp-batch-progress-text {
  font-size: 13px;
  font-weight: 700;
  color: #0029FF;
}

.lp-batch-progress-bar {
  height: 6px;
  background: #F3F3F5;
  border-radius: 999px;
  margin-bottom: 16px;
  overflow: hidden;
}

.lp-batch-progress-fill {
  height: 100%;
  background: #0029FF;
  border-radius: 999px;
  transition: width 0.5s ease;
}

.lp-batch-progress-78 { width: 78%; }

.lp-batch-table {
  display: flex;
  flex-direction: column;
}

.lp-batch-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #F3F3F5;
}

.lp-batch-row:last-child {
  border-bottom: none;
}

.lp-batch-row-header {
  border-bottom: 1px solid #DFEAF2;
}

.lp-batch-row-header .lp-batch-cell {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lp-batch-cell {
  flex: 1;
  font-size: 12px;
  color: #3D4157;
}

.lp-batch-cell-name {
  flex: 2;
  font-weight: 500;
}

.lp-mini-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.lp-mini-pill-green {
  background: #D9FAEC;
  color: var(--color-token-green-ink);
}

.lp-mini-pill-blue {
  background: #E6EAFF;
  color: #0029FF;
}

.lp-mini-pill-gray {
  background: #F3F3F5;
  color: var(--color-muted);
}

/* --- Letter / Adverse Action Mockup --- */
.lp-letter-mockup {
  background: #FFFFFF;
  border: 1px solid #DFEAF2;
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  max-width: 360px;
  margin: 0 auto;
}

.lp-letter-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.lp-letter-logo {
  font-size: 13px;
  font-weight: 700;
  color: #0D122D;
}

.lp-letter-date {
  font-size: 11px;
  color: var(--color-muted);
}

.lp-letter-divider {
  height: 1px;
  background: #DFEAF2;
  margin-bottom: 16px;
}

.lp-letter-title {
  font-size: 16px;
  font-weight: 700;
  color: #0D122D;
  margin-bottom: 12px;
}

.lp-letter-line {
  height: 8px;
  background: #F3F3F5;
  border-radius: 4px;
  margin-bottom: 8px;
}

.lp-letter-line-long { width: 100%; }
.lp-letter-line-medium { width: 65%; }

.lp-letter-spacer {
  height: 12px;
}

.lp-letter-subtitle {
  font-size: 12px;
  font-weight: 700;
  color: #3D4157;
  margin-bottom: 8px;
}

.lp-letter-reason {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #56596C;
  margin-bottom: 6px;
}

.lp-letter-x {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.lp-letter-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #E6EAFF;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #0029FF;
  margin-top: 8px;
}

/* --- Template Grid --- */
.lp-template-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
  width: 100%;
}

.lp-template-card {
  background: #FFFFFF;
  border: 1px solid #DFEAF2;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  transition: box-shadow 0.2s, transform 0.2s;
}

.lp-template-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(-3px);
}

.lp-template-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.lp-template-icon-primary { background: var(--color-primary-light, #E6EAFF); }
.lp-template-icon-purple { background: var(--color-secondary-token-purple-light); }
.lp-template-icon-green { background: var(--color-secondary-token-green-light); }
.lp-template-icon-yellow { background: var(--color-secondary-token-yellow-light); }

.lp-template-icon svg {
  width: 24px;
  height: 24px;
}

.lp-template-name {
  font-size: 15px;
  font-weight: 600;
  color: #0D122D;
  margin: 0 0 8px;
}

.lp-template-desc {
  font-size: 13px;
  color: #56596C;
  line-height: 1.5;
  margin: 0;
}

/* ---- Landing proof strip (stats + logo marquee; copy from the CRS site) ---- */
.lp-proof-section {
  padding: 72px 64px;
  background: #FFFFFF;
  border-top: 1px solid #DFEAF2;
  border-bottom: 1px solid #DFEAF2;
}

.lp-proof-inner { max-width: 1200px; margin: 0 auto; }

.lp-proof-lede {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  color: #0D122D;
  margin: 0 0 40px;
  max-width: 720px;
}

.lp-proof-lede strong { color: #0029FF; font-weight: 700; }

.lp-proof-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid #DFEAF2;
}

.lp-proof-stat { display: flex; flex-direction: column; gap: 6px; }

.lp-proof-stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #0D122D;
}

.lp-proof-star { color: #FFBB38; }

.lp-proof-stat-label { font-size: 14px; line-height: 1.45; color: #56596C; }

.lp-proof-sub {
  font-size: 16px;
  line-height: 1.6;
  color: #3D4157;
  margin: 8px 0 28px;
  max-width: 760px;
}

/* Logo marquee — same assets + motion as the auth showcase, restyled for the
   light surface: logos forced to ink and faded, edge fade via white mask. */
.lp-logos {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #FFFFFF 8%, #FFFFFF 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #FFFFFF 8%, #FFFFFF 92%, transparent 100%);
}

.lp-logos-track {
  display: flex;
  align-items: center;
  /* spacing lives on the items (padding-right), not track gap: the -50%
     keyframe loop is only seamless when each duplicated copy spans exactly
     half the track, trailing space included. */
  width: max-content;
  animation: auth-marquee-rtl 40s linear infinite;
}

.lp-logos:hover .lp-logos-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .lp-logos-track { animation: none; }
}

.lp-logo { flex: 0 0 auto; display: inline-flex; align-items: center; padding-right: 44px; }

.lp-logo-img {
  height: 22px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.5;
}

@media (max-width: 1225px) {
  .lp-proof-section { padding: 56px 24px; }
}

@media (max-width: 900px) {
  .lp-proof-lede { font-size: 20px; }
  .lp-proof-stat-value { font-size: 24px; }
}

/* ---- Landing testimonials (G2 quotes from the CRS site's customer wall) ---- */
.lp-quotes-section { padding: 96px 64px; background: #FFFFFF; }

/* Joins the page-wide 1225px collapse (must live AFTER the base rule above). */
@media (max-width: 1225px) {
  .lp-quotes-section { padding: 64px 24px; }
}

.lp-quotes-inner { max-width: 1200px; margin: 0 auto; }

.lp-quotes-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
  color: #0D122D;
  margin: 0 0 40px;
  max-width: 640px;
}

.lp-quote-featured {
  margin: 0 0 40px;
  padding: 40px;
  border-radius: 16px;
  background: #0D122D;
}

.lp-quote-featured-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.45;
  color: #FFFFFF;
  margin: 0 0 24px;
  max-width: 880px;
}

.lp-quote-featured .lp-quote-name { color: #FFFFFF; }
.lp-quote-featured .lp-quote-role { color: #9EA0AB; }

.lp-quotes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.lp-quote-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px;
  border-radius: 16px;
  background: #F7F9FB;
  transition: transform 0.2s, box-shadow 0.2s;
}

.lp-quote-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.lp-quote-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0029FF;
  margin: 0 0 12px;
}

.lp-quote-text {
  font-size: 16px;
  line-height: 1.6;
  color: #0D122D;
  margin: 0 0 20px;
}

.lp-quote-attribution { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }

.lp-quote-name { font-size: 15px; font-weight: 700; color: #0D122D; }

.lp-quote-role { font-size: 13px; color: #56596C; }

@media (max-width: 900px) {
  .lp-quotes-headline { font-size: 32px; }
  .lp-quote-featured { padding: 28px; }
  .lp-quote-featured-text { font-size: 20px; }
}

@media (max-width: 720px) {
  .lp-quotes-grid { grid-template-columns: 1fr; }
}

/* --- CTA Section --- */
.lp-cta-section {
  padding: 80px 48px;
  background: #FFFFFF;
  text-align: center;
}

.lp-cta-inner {
  max-width: 600px;
  margin: 0 auto;
}

.lp-cta-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #0D122D;
  line-height: 1.2;
  margin: 0 0 16px;
}

.lp-cta-sub {
  font-size: 17px;
  color: #56596C;
  line-height: 1.6;
  margin: 0 0 32px;
}

.lp-btn-white {
  background: #FFFFFF !important;
  color: #0029FF !important;
  border: none !important;
}

.lp-btn-white:hover {
  background: #E6EAFF !important;
}

/* --- Cost Savings Funnel --- */
.lp-cost-funnel {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.lp-cost-step {
  margin-bottom: 12px;
}

.lp-cost-step-bar {
  box-sizing: border-box;
  background: #E6EAFF;
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: width 0.3s;
}

.lp-cost-step-bar-mid {
  background: #FFF3E0;
}

.lp-cost-step-bar-narrow {
  background: #E8F5E9;
}

.lp-cost-step-bar-full { width: 100%; }
/* 68%, not the visual 60% target: border-box (above) folded the 36px side
   padding into the width, and at a true 60% the label+cost pair wraps to
   three lines inside the blue bento column. */
.lp-cost-step-bar-60   { width: 68%; }

.lp-cost-step-label {
  font-size: 14px;
  font-weight: 500;
  color: #0D122D;
}

.lp-cost-step-cost {
  font-size: 13px;
  font-weight: 600;
  color: #56596C;
}

.lp-cost-result {
  margin-top: 20px;
  border-top: 1px solid #DFEAF2;
  padding-top: 20px;
}

.lp-cost-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.lp-cost-result-label {
  font-size: 14px;
  color: #56596C;
}

.lp-cost-result-value {
  font-size: 16px;
  font-weight: 700;
}

.lp-cost-result-savings {
  color: var(--color-token-green-ink);
}

.lp-cost-result-waste {
  color: var(--color-token-red-ink);
  text-decoration: line-through;
}

.lp-cost-result-highlight {
  background: #F0FFF4;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 8px;
}

.lp-cost-result-highlight .lp-cost-result-label {
  font-weight: 600;
  color: #0D122D;
}

.lp-cost-result-highlight .lp-cost-result-savings {
  font-size: 20px;
}

.lp-cta-secondary-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  color: #56596C;
  text-decoration: none;
  transition: color 0.2s;
}

.lp-cta-secondary-link:hover {
  color: #0029FF;
}

/* --- Footer --- */
.lp-footer {
  background: #FFFFFF;
  padding: 32px 48px;
  border-top: 1px solid #DFEAF2;
}

.lp-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lp-footer-brand {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #0D122D;
}

.lp-footer-links {
  display: flex;
  gap: 24px;
}

.lp-footer-links a {
  font-size: 13px;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.lp-footer-links a:hover {
  color: #0D122D;
}

.lp-footer-copy {
  font-size: 12px;
  color: var(--color-muted);
}

/* --- Calendly Modal --- */

.calendly-modal-content {
  position: relative;
  background-color: white;
  border-radius: 12px;
  width: 1000px;
  max-width: 95vw;
  /* height/overflow are superseded by the P-01 block in the 2026-09-11 section
     at the end of this file — 85vh left Calendly too little room on short
     Windows laptops. Kept here as the pre-override baseline. */
  height: 85vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.calendly-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 10;
  background: white;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--color-mirage-70, #56596C);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.calendly-modal-close:hover {
  background: var(--color-mirage-05, #F3F3F5);
  color: var(--color-mirage, #0D122D);
}

/* Loading animation */
.calendly-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: white;
  z-index: 5;
  transition: opacity 0.3s ease;
}

.calendly-loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.calendly-loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-link-water, #DFEAF2);
  border-top-color: var(--color-primary, #0029FF);
  border-radius: 50%;
  animation: calendly-spin 0.8s linear infinite;
}

.calendly-loader-text {
  font-size: 14px;
  color: var(--color-mirage-70, #56596C);
  margin: 0;
}

/* Failed-state actions (Retry + direct scheduling link) */
.calendly-loader-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@keyframes calendly-spin {
  to { transform: rotate(360deg); }
}

.calendly-modal-content iframe {
  border: none;
  transition: opacity 0.3s ease;
}

/* --- Responsive --- */
@media (max-width: 1225px) {
  .lp-sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    background: #FFFFFF;
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid #DFEAF2;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 101;
    flex-direction: row;
    padding: 24px 32px;
  }

  .lp-sidebar.lp-sidebar-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .lp-mobile-bar {
    display: flex;
  }

  .lp-topbar {
    display: none;
  }

  .lp-mobile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .lp-mobile-cta {
    font-size: 13px;
    padding: 8px 14px;
  }

  .lp-sidebar-bottom {
    display: none;
  }

  .lp-sidebar-top {
    padding: 0;
  }

  .lp-sidebar .lp-brand-dropdown {
    display: none;
  }

  .lp-sidebar .lp-sidebar-divider {
    display: none;
  }

  .lp-sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .lp-sidebar-subnav {
    padding-left: 12px;
  }

  .lp-content {
    width: 100%;
    margin: 0 auto;
    padding-top: 56px;
  }

  .lp-hero {
    padding: 60px 24px;
  }

  .lp-hero-pills {
    flex-wrap: wrap;
  }

  .lp-hero-inner {
    flex-direction: column;
    gap: 40px;
  }

  .lp-hero-headline {
    font-size: 36px;
  }

  .lp-section {
    padding: 64px 24px;
  }

  .lp-section-inner {
    flex-direction: column;
    gap: 40px;
  }

  .lp-section-reverse {
    flex-direction: column;
  }

  .lp-section-body {
    max-width: 100%;
  }

  .lp-features-section {
    padding: 64px 24px 48px;
  }

  .lp-features-panel-inner {
    gap: 24px;
  }

  .lp-features-tab {
    min-width: 120px;
    padding: 12px 14px 10px;
  }

  .lp-features-tab-desc {
    display: none;
  }

  .lp-template-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-cta-section {
    padding: 60px 24px;
  }

  .lp-footer-inner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .lp-hero-headline {
    font-size: 28px;
  }

  .lp-hero-visual {
    display: none;
  }

  .lp-hero-mobile {
    display: flex;
    justify-content: center;
  }

  .lp-section-headline {
    font-size: 28px;
  }

  .lp-hero-actions {
    flex-direction: column;
  }

  .lp-template-grid {
    grid-template-columns: 1fr;
  }

  .lp-vendor-grid {
    grid-template-columns: 1fr;
  }

  .lp-cta-headline {
    font-size: 26px;
  }

  /* Feature tabs → accordion on mobile */
  .lp-features-tabs-sticky {
    display: none;
  }

  .lp-features-accordion-header {
    display: flex;
    scroll-margin-top: 64px;
  }

  .lp-features-panel {
    display: block !important;
  }

  .lp-features-panel-inner {
    display: none;
    padding-bottom: 16px;
  }

  .lp-features-panel-active .lp-features-panel-inner {
    display: flex;
  }

  .lp-features-panel-active .lp-accordion-chevron {
    transform: rotate(180deg);
  }
}

/* --- Platform section heading --- */

.lp-platform-section .lp-section-inner {
  flex-direction: column;
  align-items: flex-start;
}

.lp-platform-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  color: #0D122D;
  margin: 0 0 48px;
  letter-spacing: -1px;
}

@media (max-width: 1225px) {
  .lp-platform-headline {
    font-size: 42px;
  }
}

@media (max-width: 640px) {
  .lp-platform-headline {
    font-size: 32px;
  }

  .lp-platform-section {
    padding: 48px 16px 40px;
  }
}

/* --- Bento Grid (Platform section) --- */

.lp-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

.lp-bento-card {
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.lp-bento-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}

.lp-bento-visual {
  padding: 32px 32px 0;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.lp-bento-visual .lp-cost-funnel,
.lp-bento-visual .lp-letter-mockup {
  transform: scale(0.85);
  transform-origin: top center;
}

.lp-bento-bottom {
  padding: 28px 32px 32px;
}

.lp-bento-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
}

.lp-bento-desc {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
  opacity: 0.8;
}

.lp-bento-link {
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

.lp-bento-link:hover {
  text-decoration: underline;
}

/* Light card (white with border) */
.lp-bento-light {
  background: #FFFFFF;
  border: 1px solid #DFEAF2;
  color: #0D122D;
}

/* Muted card (light gray) */
.lp-bento-muted {
  background: #F7F9FB;
  color: #0D122D;
}

.lp-bento-light .lp-bento-link {
  color: #0029FF;
}

/* Green card */
.lp-bento-green {
  background: #00DF81;
  color: #0D122D;
}

.lp-bento-green .lp-bento-link {
  color: #0D122D;
}

/* Dark card */
.lp-bento-dark {
  background: #0D122D;
  color: #FFFFFF;
}

/* Blue card */
.lp-bento-blue {
  background: #0029FF;
  color: #FFFFFF;
}

.lp-bento-blue .lp-bento-link {
  color: #FFFFFF;
}

.lp-bento-blue .lp-cost-funnel {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 20px;
}

/* Full-width card */
.lp-bento-wide {
  grid-column: span 2;
}

/* Stacked column */
.lp-bento-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Stat number */
.lp-bento-stat {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 4px;
  letter-spacing: -0.5px;
}

/* Compact visual (shorter mockup area) */
.lp-bento-visual-compact {
  padding: 24px 24px 0;
}

.lp-bento-visual-compact .lp-letter-mockup {
  transform: scale(0.78);
  transform-origin: top center;
}

/* Fill remaining stack height */
.lp-bento-fill {
  flex: 1;
}

/* Onboarding checklist mockup */
.lp-onboarding-mockup {
  background: #FFFFFF;
  border: 1px solid #DFEAF2;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 280px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.lp-onboarding-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #0D122D;
  margin-bottom: 12px;
}

.lp-onboarding-divider {
  height: 1px;
  background: #DFEAF2;
  margin-bottom: 14px;
}

.lp-onboarding-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color: #56596C;
}

.lp-onboarding-done span {
  color: #0D122D;
}

.lp-onboarding-badge {
  margin-top: 14px;
  padding: 6px 12px;
  background: #D9FAEC;
  color: var(--color-token-green-ink);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

/* Quote card */
.lp-bento-quote-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
}

.lp-bento-quote-mark {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 0.8;
  color: #0029FF;
  opacity: 0.3;
  margin-bottom: 16px;
}

.lp-bento-quote-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  color: #0D122D;
  margin: 0 0 24px;
  font-style: normal;
}

.lp-bento-quote-footer {
  margin-top: auto;
}

.lp-bento-quote-name {
  font-size: 15px;
  font-weight: 700;
  color: #0D122D;
}

.lp-bento-quote-role {
  font-size: 13px;
  color: #56596C;
  margin-top: 2px;
}

@media (max-width: 1225px) {
  .lp-bento-headline {
    font-size: 22px;
  }

  .lp-bento-visual .lp-cost-funnel,
  .lp-bento-visual .lp-letter-mockup {
    transform: scale(0.75);
  }
}

@media (max-width: 640px) {
  .lp-bento-grid {
    grid-template-columns: 1fr;
  }

  .lp-bento-wide {
    grid-column: span 1;
  }

  .lp-bento-visual {
    padding: 24px 24px 0;
  }

  .lp-bento-bottom {
    padding: 20px 24px 28px;
  }

  .lp-bento-stat {
    font-size: 28px;
  }
}

/* ==========================================================================
   ADMIN DASHBOARD
   Scrollable table, sticky header/column, fixed panel
   ========================================================================== */

/* ---------- scrollable table wrapper ---------- */
.admin-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 8px;
}

/* Focusable (tabindex="0") so a keyboard user can scroll the table. */
.admin-table-wrap:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------- real <table> ---------- */
.admin-table {
  width: 100%;
  min-width: 1030px;                 /* sum of column min-widths */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--color-mirage-05, #F3F3F5);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-mirage-80, #3D4157);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-link-water, #DFEAF2);
}

.admin-table tbody td {
  padding: 12px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-link-water, #DFEAF2);
  white-space: nowrap;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- pinned (sticky) first column ---------- */
.admin-col-pin {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: inherit;
  min-width: 240px;
  width: 240px;
  white-space: normal;
}

/* header corner cell: sticky both directions */
.admin-table thead th.admin-col-pin {
  z-index: 4 !important;
  background-color: var(--color-mirage-05, #F3F3F5);
}

/* pin shadow when scrolled horizontally */
.admin-col-pin::after {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  bottom: 0;
  width: 6px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0.04), transparent);
}

/* ---------- column widths ---------- */
.admin-col-role     { min-width: 80px;  width: 80px; }
/* Status fits the longest account-state pill ("Awaiting review", 124px at
   status-pill-sm) plus the 2 x 14px cell padding, with headroom for font
   fallback. table-layout: fixed never shrinks a column below this width. */
.admin-col-status   { min-width: 160px; width: 160px; }
.admin-col-vertical { min-width: 100px; width: 100px; }
.admin-col-num      { min-width: 85px;  width: 85px; }
.admin-col-api      { min-width: 120px; width: 120px; }
.admin-col-date     { min-width: 120px; width: 120px; }
.admin-col-email    { min-width: 180px; width: 180px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fits the "Permissible purpose" header (149px in Inter 12px semibold caps)
   plus the cell padding; longer purposes wrap (admin-col-wrap). */
.admin-col-purpose  { min-width: 190px; width: 190px; }

/* Body cells that wrap instead of running into the next column. */
.admin-table tbody td.admin-col-wrap { white-space: normal; overflow-wrap: anywhere; }

/* /admin/activations: the dashboard table with no pinned column. The legal
   entity column has no width, so it takes what the fixed columns leave and
   wraps. Each fixed column takes its width plus the 2 x 14px cell padding
   (measured in Chrome), so the dashboard widths (770px + 140px) left it 14px
   at 1280. These narrower widths still fit their content in Inter: widest date
   92.5px, the "Awaiting review" pill 124px, "PERMISSIBLE" 85px (the purpose
   header wraps). At 900px the legal entity keeps 160px, and 900px fits the
   content area of a 1280px window with the sidebar open (909px). */
.admin-table.admin-table-activations { min-width: 900px; }
.admin-table-activations .admin-col-email   { min-width: 150px; width: 150px; max-width: 150px; }
.admin-table-activations .admin-col-purpose { min-width: 120px; width: 120px; }
.admin-table-activations .admin-col-date    { min-width: 100px; width: 100px; }
.admin-table-activations .admin-col-status  { min-width: 130px; width: 130px; }
.admin-table-activations thead th.admin-col-wrap { white-space: normal; }

/* Admin page container */
.admin-page-container { max-width: 1400px; margin: 0 auto; }

/* Inline edit input */
.inline-edit-input { padding: 4px 8px; height: 30px; }

/* Inline edit pencil icon */
.inline-edit-pencil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  background: none;
  color: var(--color-mirage-70, #56596C);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.inline-edit-pencil:hover {
  color: var(--color-primary, #0029FF);
}

tr:hover .inline-edit-pencil,
.admin-col-pin:hover .inline-edit-pencil,
div:hover > .inline-edit-pencil,
div:hover > div > .inline-edit-pencil,
div:hover > div > div > .inline-edit-pencil {
  opacity: 1;
}

/* Always show pencil in the detail panel */
.admin-panel .inline-edit-pencil {
  opacity: 0.6;
}

.admin-panel .inline-edit-pencil:hover {
  opacity: 1;
}

/* Row trigger: the customer name is a real <button> so a row can be reached
   with Tab and opened with Enter or Space. It looks like the text it wraps. */
.admin-row-open {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
}

.admin-row-open:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------- row styles ---------- */
.admin-table-row {
  cursor: pointer;
  background-color: white;
}

.admin-table-row:hover td {
  background-color: var(--color-mirage-05, #F3F3F5);
}

.admin-table-row:hover .admin-col-pin {
  background-color: var(--color-mirage-05, #F3F3F5);
}

.admin-row-alt {
  background-color: var(--color-gray-05, #FAFAFA);
}

.admin-row-alt .admin-col-pin {
  background-color: var(--color-gray-05, #FAFAFA);
}

/* active row */
.admin-row-active td {
  background-color: var(--color-blue-05, #F2F4FF) !important;
}

.admin-row-active .admin-col-pin {
  background-color: var(--color-blue-05, #F2F4FF) !important;
  box-shadow: inset 3px 0 0 var(--color-blue, #0029FF);
}

/* ---------- fixed full-height panel ---------- */
.admin-panel {
  position: fixed;
  top: 12px;
  right: -440px;
  bottom: 12px;
  width: 420px;
  background-color: white;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 12px;
  overflow-y: auto;
  z-index: 70;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-panel-open {
  right: 12px;
}

.admin-panel-content {
  min-width: 420px;
}

/* push page content when panel opens */
.admin-panel-pushed {
  padding-right: 444px !important;   /* 420 + original 24 */
  transition: padding-right 0.3s ease;
}

/* Filter chips */
.admin-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-link-water, #DFEAF2);
  background-color: white;
  color: var(--color-mirage-70, #56596C);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.admin-chip:hover {
  background-color: var(--color-mirage-05, #F3F3F5);
}

.admin-chip-active {
  background-color: var(--color-blue, #0029FF);
  color: white;
  border-color: var(--color-blue, #0029FF);
}

.admin-chip-active:hover {
  background-color: var(--color-blue-90, #1A3EFF);
}

/* Vertical badge */
.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.admin-badge-vertical {
  background-color: var(--color-blue-05, #F2F4FF);
  color: var(--color-blue, #0029FF);
}

/* Stat boxes in detail panel */
.admin-stat-box {
  background-color: var(--color-mirage-05, #F3F3F5);
  border-radius: 9px;
  padding: 12px 16px;
}

/* Product chips */
.admin-product-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  background-color: var(--color-mirage-05, #F3F3F5);
  color: var(--color-mirage-70, #56596C);
}

.admin-product-chip-active {
  background-color: var(--color-secondary-token-green-light, #D9FAEC);
  color: var(--color-token-green-ink);
}

/* Sparkline container */
/* Bare icon button (password reveal toggle in the credentials table). */
.password-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
}

.admin-sparkline {
  width: 100%;
}

/* Fixed plot height. The plot is stretched to the panel width, and its points
   sit at the centres of `count` equal columns (see admin/customers/_sparkline). */
.admin-sparkline-svg { height: 60px; }

/* Date labels: one equal column per point (as many columns as labels), each
   label centred under its point at any panel width. */
.admin-sparkline-labels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  text-align: center;
}

/* Non-scaling stroke: the stretched viewBox would otherwise widen the line. */
.admin-sparkline-line {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.admin-sparkline-dot {
  fill: var(--color-white);
  stroke: var(--color-blue);
  stroke-width: 1.5px;
}

.admin-sparkline-stop-top    { stop-color: var(--color-blue); stop-opacity: 0.15; }
.admin-sparkline-stop-bottom { stop-color: var(--color-blue); stop-opacity: 0.01; }

/* ==========================================================================
   INTAKE LINKS — Generate Link Modal
   ========================================================================== */

.generate-link-mode-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #56596C;
  background: #ffffff;
  border: 1px solid #DFEAF2;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.generate-link-mode-btn:hover {
  border-color: #0029FF;
  color: #3D4157;
}

.generate-link-mode-btn.generate-link-mode-active {
  background: #F2F4FF;
  border-color: #0029FF;
  color: #0029FF;
}

/* ==========================================================================
   INTAKE LINKS — Public Intake Form
   ========================================================================== */

.intake-layout {
  min-height: 100vh;
  background: #F7F9FB;
  display: flex;
  flex-direction: column;
}

.intake-header {
  background: #ffffff;
  border-bottom: 1px solid #DFEAF2;
  padding: 20px 24px;
}

.intake-header-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.intake-company-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #F2F4FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.intake-company-logo svg {
  width: 22px;
  height: 22px;
  color: #0029FF;
}

.intake-company-name {
  font-size: 16px;
  font-weight: 600;
  color: #0D122D;
}

.intake-body {
  flex: 1;
  padding: 32px 24px;
}

.intake-card {
  max-width: 640px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #DFEAF2;
  border-radius: 12px;
  padding: 32px;
}

.intake-section {
  margin-bottom: 28px;
}

.intake-section:last-child {
  margin-bottom: 0;
}

.intake-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #0D122D;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #DFEAF2;
}

.intake-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.intake-grid-full {
  grid-column: 1 / -1;
}

.intake-upload-zone {
  border: 2px dashed #DFEAF2;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.intake-upload-zone:hover {
  border-color: #0029FF;
  background: #F2F4FF;
}

.intake-upload-zone.has-files {
  border-color: #00DF81;
  background: #F0FDF4;
}

.intake-upload-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  color: var(--color-muted);
}

.intake-upload-zone:hover .intake-upload-icon {
  color: #0029FF;
}

.intake-upload-label {
  font-size: 14px;
  font-weight: 500;
  color: #3D4157;
}

.intake-upload-hint {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 4px;
}

.intake-file-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.intake-file-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #3D4157;
}

.intake-file-item svg {
  width: 14px;
  height: 14px;
  color: var(--color-token-green-ink);
  flex-shrink: 0;
}

.intake-footer {
  padding: 20px 24px;
  text-align: center;
}

.intake-footer-text {
  font-size: 12px;
  color: var(--color-muted);
}

.intake-footer-text a {
  color: #0029FF;
  text-decoration: none;
}

.intake-disclaimer {
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.5;
  margin-top: 16px;
}

/* Success page */
.intake-success {
  max-width: 480px;
  margin: 80px auto 0;
  text-align: center;
  padding: 40px;
  background: #ffffff;
  border: 1px solid #DFEAF2;
  border-radius: 12px;
}

.intake-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: #E8F5E9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intake-success-icon svg {
  width: 32px;
  height: 32px;
  color: #2E7D32;
}

.intake-success-title {
  font-size: 20px;
  font-weight: 600;
  color: #0D122D;
  margin-bottom: 8px;
}

.intake-success-message {
  font-size: 14px;
  color: #56596C;
  line-height: 1.6;
}

/* ==========================================================================
   INTAKE LINKS — Management Page
   ========================================================================== */

.intake-link-recipient {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.intake-link-recipient-name {
  font-weight: 500;
  color: #3D4157;
  font-size: 14px;
}

.intake-link-recipient-email {
  font-size: 12px;
  color: var(--color-muted);
}

/* Column widths for intake links table */
.col-recipient {
  width: 200px;
  min-width: 200px;
  padding: 0 12px;
}

.col-workflow-name {
  width: 170px;
  min-width: 170px;
  padding: 0 12px;
}

.col-il-status {
  width: 110px;
  min-width: 110px;
  padding: 0 12px;
}

.col-il-created {
  width: 140px;
  min-width: 140px;
  padding: 0 12px;
}

.col-il-expires {
  width: 140px;
  min-width: 140px;
  padding: 0 12px;
}

@media (max-width: 768px) {
  .intake-grid {
    grid-template-columns: 1fr;
  }

  .intake-card {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   INTAKE LINKS — Index page + Generate modal
   ========================================================================== */

/* Generate-link modal sizing (replaces inline max-width) */
.generate-link-modal {
  max-width: 520px;
}

/* Body padding (replaces inline style) */
.generate-link-body {
  padding: 20px 24px;
}

/* Success icon for the result panel (replaces inline hex) */
.generate-link-icon-success {
  background-color: #E6F9F0;
  color: #00A862;
}

/* Read-only URL display in result panel (replaces inline font/size styles) */
.intake-link-url-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

/* QR code container (replaces inline hex bg/border) */
.generate-link-qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  background-color: #F7F9FB;
  border: 1px solid #DFEAF2;
}

.generate-link-qr-image {
  width: 180px;
  height: 180px;
  border-radius: 4px;
}

/* Workflow picker rows on the Intake Links index */
.intake-workflow-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background-color: #FFFFFF;
  border: 1px solid #DFEAF2;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.intake-workflow-pick:hover {
  background-color: #F2F4FF;
  border-color: #0029FF;
}

/* Lightweight toast for resend feedback */
.intake-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(13, 18, 45, 0.12);
  z-index: 9999;
}

.intake-toast-success {
  background-color: #E6F9F0;
  color: #00733F;
  border: 1px solid #B5EBD0;
}

.intake-toast-error {
  background-color: #FDECEE;
  color: #B11227;
  border: 1px solid #F8C6CC;
}

/* Public intake form helpers */
.intake-hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.intake-submit-btn {
  padding: 14px 24px;
  font-size: 15px;
}

/* Input wrapper with a right-aligned action button (e.g. SSN visibility toggle) */
.form-field-input-wrapper {
  position: relative;
}

.form-field-input-with-action {
  padding-right: 40px;
}

.form-field-input-action {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  background: transparent;
  border: none;
  color: #56596C;
  cursor: pointer;
  border-radius: 0 8px 8px 0;
}

.form-field-input-action:hover {
  color: #0029FF;
}

.form-field-eye {
  pointer-events: none;
}

/* Date input — match the height/padding of other text inputs. Browsers render
   date inputs with their own internal padding which makes them visually
   shorter than text inputs at the same nominal padding. Force consistency. */
.form-field-date {
  /* iOS/Safari shortens date inputs unless we set min-height to match */
  min-height: 40px;
  /* Chrome/Edge: line-height makes the value sit lower than text inputs */
  line-height: normal;
  /* Some browsers center the value text vertically only when display is set */
  display: block;
  -webkit-appearance: none;
  appearance: none;
}

.form-field-date::-webkit-datetime-edit {
  padding: 0;
}

.form-field-date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  margin-left: 4px;
}

/* Logo header on the public intake form */
.intake-company-logo-image {
  max-height: 40px;
  max-width: 200px;
  object-fit: contain;
}

/* Logo uploader inside the Generate Intake Link modal */
.intake-logo-uploader {
  border: 1px dashed #DFEAF2;
  border-radius: 8px;
  background-color: #F7F9FB;
  transition: border-color 0.15s, background-color 0.15s;
}

.intake-logo-uploader-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 16px;
  cursor: pointer;
  text-align: center;
}

.intake-logo-uploader-empty:hover {
  background-color: #F2F4FF;
  border-color: #0029FF;
}

.intake-logo-uploader-icon {
  width: 28px;
  height: 28px;
  color: #56596C;
}

.intake-logo-uploader-label {
  font-size: 13px;
  font-weight: 500;
  color: #3D4157;
  margin: 0;
}

.intake-logo-uploader-hint {
  font-size: 12px;
  color: var(--color-muted);
  margin: 0;
}

.intake-logo-uploader-filled {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
}

.intake-logo-uploader-preview {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: contain;
  background-color: #FFFFFF;
  border: 1px solid #DFEAF2;
  border-radius: 6px;
  padding: 4px;
}

.intake-logo-uploader-meta {
  flex: 1;
  min-width: 0;
}

.intake-logo-uploader-filename {
  font-size: 13px;
  color: #3D4157;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Loosen vertical rhythm in the Generate Intake Link modal so labels and
   inputs aren't visually crammed against each other. */
.generate-link-body .form-field-group + .form-field-group {
  margin-top: 18px;
}

.generate-link-body .form-field-label {
  display: block;
  margin-bottom: 8px;
}

.generate-link-body .form-field-helper {
  margin-top: 8px;
}

/* Modal header: tighten title/subtitle stack and present the active cascade
   as an inline pill. */
.generate-link-title-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.generate-link-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #56596C;
  margin: 0;
}

.generate-link-using {
  font-weight: 500;
}

.generate-link-cascade-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background-color: #F2F4FF;
  color: #0029FF;
  border: 1px solid #DDE3FF;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header layout when no branding is present — keep vertical rhythm but
   render nothing visible (no fake name fallback). */
.intake-header-empty {
  min-height: 0;
  padding: 8px 0;
  border-bottom: none;
}

/* "Awaiting" header on the Executions page — surfaces queued submissions
   and outstanding intake links above the executions table. */
.intake-awaiting-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.intake-awaiting-section {
  background-color: #FFFFFF;
  border: 1px solid #DFEAF2;
  border-radius: 12px;
  overflow: hidden;
}

.intake-awaiting-section-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid #F2F4FF;
}

.intake-awaiting-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #0D122D;
  margin: 0;
}

.intake-awaiting-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.intake-awaiting-dot-yellow { background-color: #FFBB38; }
.intake-awaiting-dot-blue { background-color: #00C1FF; }

.intake-awaiting-count {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  background-color: #F2F4FF;
  color: #0029FF;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.intake-awaiting-hint {
  font-size: 12px;
  color: #56596C;
  margin: 4px 0 0;
}

.intake-awaiting-rows {
  display: flex;
  flex-direction: column;
}

.intake-awaiting-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid #F2F4FF;
}

.intake-awaiting-row:first-child {
  border-top: none;
}

.intake-awaiting-row-main,
.intake-awaiting-row-cascade {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.intake-awaiting-applicant {
  font-size: 14px;
  font-weight: 500;
  color: #0D122D;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intake-awaiting-meta {
  font-size: 12px;
  color: #56596C;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intake-awaiting-cascade-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background-color: #F2F4FF;
  color: #0029FF;
  border: 1px solid #DDE3FF;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intake-awaiting-row-actions {
  display: flex;
  gap: 8px;
}

.intake-awaiting-row-actions .btn-primary,
.intake-awaiting-row-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
}

.icon-16 {
  width: 16px;
  height: 16px;
}

/* Dashboard layout: recent cascades on the left, awaiting-review aside on
   the right. Both columns stretch to the same height. Stacks on narrow
   viewports. */
.dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  gap: 20px;
  align-items: stretch;
  max-width: 1200px;
  margin: 24px auto 0;
}

/* When only one of the two cards has content, collapse the grid to a single
   column so we don't render an empty 1.6fr placeholder beside it. */
.dashboard-row-single {
  grid-template-columns: 1fr;
}

@media (max-width: 960px) {
  .dashboard-row {
    grid-template-columns: 1fr;
  }
}

/* When the recent-cascades card lives inside the dashboard row, neutralise
   its standalone outer margins/max-width so the grid controls layout. */
.dashboard-row .dashboard-row-main {
  margin: 0;
  max-width: none;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dashboard-row-main .dashboard-recent-list {
  flex: 1;
}

.dashboard-row-aside {
  min-width: 0;
  display: block;
}

.awaiting-review-card {
  background-color: #FFFFFF;
  border: 1px solid #DFEAF2;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.awaiting-review-card .divider {
  margin: 16px 0;
}

.awaiting-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.awaiting-review-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0D122D;
}

.awaiting-review-count {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  border-radius: 999px;
  background-color: #FFF6E1;
  color: #B17A00;
  border: 1px solid #FFE6A8;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.awaiting-review-view-all {
  font-size: 13px;
  flex-shrink: 0;
}

.awaiting-review-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 32px 8px;
  flex: 1;
  justify-content: center;
}

.awaiting-review-empty-icon {
  width: 32px;
  height: 32px;
  color: #00A862;
  margin-bottom: 4px;
}

.awaiting-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.awaiting-review-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid #F2F4FF;
}

.awaiting-review-item:first-child {
  border-top: none;
  padding-top: 0;
}

.awaiting-review-item-main {
  flex: 1;
  min-width: 0;
}

.awaiting-review-applicant {
  font-size: 14px;
  font-weight: 500;
  color: #0D122D;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.awaiting-review-meta {
  font-size: 12px;
  color: #56596C;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.awaiting-review-action {
  flex-shrink: 0;
  padding: 6px 14px;
}

/* Rows/cards that navigate on double-click / double-tap (row_link_controller.js)
   signal their interactivity with a pointer cursor. */
[data-controller~="row-link"] { cursor: pointer; }

/* ==========================================================================
   Guided "define your decisions" overlay (cascade builder)
   Floating, collapsible corner panel listing the cascade's Decision nodes as a
   checklist. Motion design system (the builder chrome is Motion). Behaviour:
   app/javascript/controllers/decision_guide_controller.js
   ========================================================================== */
.decision-guide {
  /* Canvas-relative (rendered inside .builder-canvas-wrapper): immune to the
     toolbar wrapping to two rows and to the sandbox banner. Sits below the
     canvas hint pill. */
  position: absolute;
  left: 16px;
  top: 56px;
  z-index: 900;
  width: 320px;
  transition: left 0.2s ease;
  /* The fixed 320px wrapper sits over the canvas (z-index 900). Without this it
     blanket-captures clicks across its whole box — including transparent gaps —
     so nodes underneath can't be selected/deleted. Only the visible pill/panel
     should be interactive; let everything else fall through to the canvas. */
  pointer-events: none;
}
.decision-guide-pill,
.decision-guide-panel { pointer-events: auto; }
/* Canvas-relative now, so sidebar collapse and the sandbox banner no longer
   change where the guide lands — both variants collapse to the base offsets. */
.decision-guide.is-sidebar-collapsed { left: 16px; }
.has-sandbox-banner .decision-guide { top: 56px; }
/* Hidden while a decision modal is open (it would overlap the modal). */
.decision-guide.is-suppressed { display: none; }

/* Collapsed pill — also the reopen affordance. */
.decision-guide-pill {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-mirage, #0D122D);
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(13, 18, 45, 0.28);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.decision-guide-pill:hover { background: #1b2347; }
.decision-guide-pill-icon { width: 16px; height: 16px; flex-shrink: 0; }
.decision-guide-pill-badge {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
}
.decision-guide.is-collapsed .decision-guide-pill { display: inline-flex; }
.decision-guide.is-collapsed .decision-guide-panel { display: none; }
.decision-guide.is-complete .decision-guide-pill-badge {
  background: var(--color-token-green, #00DF81);
  color: var(--color-mirage, #0D122D);
}

/* Expanded panel */
.decision-guide-panel {
  background: #fff;
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(13, 18, 45, 0.20);
  overflow: hidden;
}
.decision-guide-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--color-link-water, #DFEAF2);
}
.decision-guide-title { flex: 1; padding-right: 8px; font-size: 14px; font-weight: 700; color: var(--color-mirage, #0D122D); }
.decision-guide-collapse {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 6px;
  color: var(--color-mirage-60, #6E7181); cursor: pointer;
}
.decision-guide-collapse:hover { background: var(--color-mirage-05, #F3F3F5); }
.decision-guide-collapse svg { width: 16px; height: 16px; }

.decision-guide-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.decision-guide-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.decision-guide-item:hover {
  background: var(--color-mirage-05, #F3F3F5);
  border-color: var(--color-link-water, #DFEAF2);
}

/* Status indicator: amber ring (to-do) → green check (done) */
.decision-guide-status {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-token-yellow, #FFBB38);
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.decision-guide-status-check { width: 14px; height: 14px; opacity: 0; }
.decision-guide-item.is-done .decision-guide-status {
  background: var(--color-token-green, #00DF81);
  border-color: var(--color-token-green, #00DF81);
}
.decision-guide-item.is-done .decision-guide-status-check { opacity: 1; }

.decision-guide-item-name {
  flex: 1;
  min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--color-mirage, #0D122D);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.decision-guide-item-arrow { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-mirage-30, #B6B8C0); }
.decision-guide-item:hover .decision-guide-item-arrow { color: var(--color-mirage-60, #6E7181); }

/* ==========================================================================
   AI cascade builder
   Bespoke chrome for the "AI builds a cascade" entry screen + the in-place
   build animation (app/views/cascade_ai/*). Operator/apex surface → Motion
   tokens only (var(--color-*)); no hardcoded brand colors. Structural-only
   utilities (flex/gap/etc.) come from application.css elsewhere.
   ========================================================================== */

/* ----- entry screen: header ----- */
.cascade-ai {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 24px;
}
@media (min-width: 640px) {
  .cascade-ai { padding: 36px 40px; }
}
/* SCREEN 1 (entry) matches the prototype's centered max-w-3xl column; the
   designing screen (SCREEN 2) keeps the wider .cascade-ai width for its 2-col grid. */
.cascade-ai-entry-wrap {
  max-width: 688px;
  margin: 0 auto;
  /* Prototype body text carries a fixed 0.16px tracking (inherited px, not em). */
  letter-spacing: 0.16px;
}

.cascade-ai-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-mirage-60);
  margin-bottom: 16px;
  transition: color 0.15s ease;
}
.cascade-ai-back:hover { color: var(--cb-ink); }
.cascade-ai-back .icon-18 { width: 16px; height: 16px; }

.cascade-ai-eyebrow {
  font-size: 12px;
  line-height: 16px; /* prototype-measured; default 1.5 shifts the column 2px */
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin: 0 0 6px;
}
.cascade-ai-greeting {
  /* Prototype: 30px/400, lh 36px, tracking -0.75px. */
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -0.75px;
  color: var(--cb-ink);
  margin: 0 0 8px;
}
.cascade-ai-subtitle {
  font-size: 16px;
  line-height: 1.5;
  max-width: 576px;
  color: var(--color-mirage-60);
  margin: 0;
}

/* ----- entry screen: mode cards ----- */
.cascade-ai-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 28px 0 20px;
}
@media (max-width: 720px) {
  .cascade-ai-modes { grid-template-columns: 1fr; }
}

.cascade-ai-mode {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  letter-spacing: 0.16px; /* buttons don't inherit tracking */
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--cb-line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.cascade-ai-mode:hover {
  border-color: var(--cb-line-strong);
  background: rgba(248, 247, 248, 0.4);
}
.cascade-ai-mode.is-selected {
  /* Prototype (measured): purple border under a solid 2px blue ring. */
  border-color: var(--color-blue-70);
  background: rgba(242, 244, 255, 0.5);
  box-shadow: 0 0 0 2px #408efc;
}

.cascade-ai-mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--cb-ink);
  color: var(--cb-paper);
}
.cascade-ai-mode-icon svg { width: 16px; height: 16px; }
.cascade-ai-mode.is-selected .cascade-ai-mode-icon {
  background: var(--color-primary);
  color: #ffffff;
}

.cascade-ai-mode-text {
  display: flex;
  flex-direction: column;
  gap: 0; /* prototype: title/desc stack tight (card totals 86px) */
  min-width: 0;
}
.cascade-ai-mode-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--cb-ink);
}
.cascade-ai-mode-desc {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-mirage-60);
}

/* ----- entry screen: panels ----- */
.cascade-ai-panel { margin-bottom: 24px; }
.cascade-ai-panel[data-mode="prompt"],
.cascade-ai-panel[data-mode="pdf"],
.cascade-ai-panel[data-mode="scratch"] {
  background: #ffffff;
  border: 1px solid var(--cb-line);
  border-radius: 12px;
  padding: 20px;
}

.cascade-ai-textarea {
  box-sizing: border-box; /* the global reset misses textareas — content-box inflated it to 672×116 */
  width: 100%;
  resize: vertical;
  letter-spacing: 0.16px;
  min-height: 98px; /* prototype: 4 lines at 15px/20 + 8px 12px padding */
  border: 1px solid var(--cb-line);
  border-radius: 4px;
  background: #ffffff;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 15px;
  line-height: 20px;
  color: var(--cb-ink);
}
.cascade-ai-textarea::placeholder { color: var(--color-mirage-30); }
.cascade-ai-textarea:focus {
  outline: none;
  border-color: var(--cb-line-strong);
  box-shadow: 0 0 0 2px #408efc;
}

.cascade-ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 19px; /* prototype-measured gap under the textarea */
}
.cascade-ai-chip {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.16px;
  color: var(--color-mirage-60);
  background: #ffffff;
  border: 1px solid var(--cb-line);
  border-radius: 9999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.cascade-ai-chip:hover {
  border-color: var(--cb-line-strong);
  color: var(--color-mirage-70);
}

.cascade-ai-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.cascade-ai-helper { margin: 0; max-width: 60ch; font-size: 12px; color: var(--color-mirage-60); }

/* Build-by-hand: one compact card — copy left, dark CTA right (prototype). */
.cascade-ai-scratch-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cascade-ai-scratch-main form { flex-shrink: 0; }
.cascade-ai-scratch-title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--cb-ink, #14111d);
  margin: 0 0 2px;
}
.cascade-ai-scratch-blurb { font-size: 14px; line-height: 20px; margin: 0; color: #6b6870; }

/* ----- entry screen: build-by-hand templates module ----- */
.cascade-ai-scratch-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 720px) {
  .cascade-ai-scratch-layout { grid-template-columns: 1fr; }
}

.cascade-ai-templates { padding: 20px; }
.cascade-ai-templates-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.cascade-ai-templates-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-mirage, #0D122D);
  margin: 0;
}
.cascade-ai-templates-sub {
  font-size: 13px;
  line-height: 1.5;
  margin: 6px 0 14px;
}
.cascade-ai-templates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cascade-ai-template {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px;
  background: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cascade-ai-template:hover {
  border-color: var(--color-blue-30, #B3BFFF);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.cascade-ai-template-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cascade-ai-template-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-mirage, #0D122D);
  line-height: 18px;
}
.cascade-ai-template-desc {
  font-size: 12px;
  color: var(--color-mirage-70, #56596C);
  line-height: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Generate cascade" CTA (sparkle) — the standard blue primary action. */
.btn-cascade-ai-generate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: var(--cb-brand-900);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn-cascade-ai-generate:hover { background: #06040d; }
.btn-cascade-ai-generate:active { transform: translateY(1px); }
.btn-cascade-ai-generate .icon-18 { width: 16px; height: 16px; color: #ffffff; }
.btn-cascade-ai-generate:disabled,
.btn-cascade-ai-generate.is-busy {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn-cascade-ai-generate:disabled:hover,
.btn-cascade-ai-generate.is-busy:hover { background: var(--cb-brand-900); }

/* ----- entry screen: dropzone ----- */
/* Prototype-measured: sand wash, ink badge, 14px/500 title. */
.cascade-ai-dropzone {
  position: relative;
  display: block;
  text-align: center;
  padding: 32px 24px;
  border: 2px dashed var(--cb-line-strong, #cecdcf);
  border-radius: 12px;
  background: rgba(248, 247, 248, 0.3);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cascade-ai-dropzone:hover { border-color: var(--color-blue-70); }
.cascade-ai-dropzone.is-dragover { border-color: var(--color-blue-70); background: rgba(242, 244, 255, 0.5); }
.cascade-ai-dropzone.has-file { border-color: var(--color-blue-70); border-style: solid; }
.cascade-ai-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cascade-ai-dropzone-badge {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 auto; border-radius: 8px;
  background: var(--cb-ink, #14111d); color: var(--cb-paper, #f3f2f3);
}
.cascade-ai-dropzone-badge svg { width: 20px; height: 20px; }
.cascade-ai-dropzone-title { display: block; margin-top: 12px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cb-ink, #14111d); }
.cascade-ai-dropzone-hint { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: #6b6870; }

/* Sample documents (prototype: "Or try a sample document") */
.cascade-ai-samples-label { margin: 16px 0 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: #393641; }
.cascade-ai-samples { display: flex; flex-direction: column; gap: 8px; }
.cascade-ai-sample {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px; border: 1px solid var(--cb-line, #e6e6e7); border-radius: 8px;
  background: transparent; text-align: left; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cascade-ai-sample:hover { border-color: var(--cb-line-strong, #cecdcf); }
.cascade-ai-sample.is-selected { border-color: var(--color-blue-70); background: rgba(242, 244, 255, 0.5); }
.cascade-ai-sample.is-dragging { opacity: 0.5; }
.cascade-ai-sample-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-muted); }
.cascade-ai-sample-meta { min-width: 0; flex: 1; }
.cascade-ai-sample-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cb-ink, #14111d); }
.cascade-ai-sample-size { display: block; font-size: 12px; line-height: 16px; color: #6b6870; }
.cascade-ai-sample-check { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-primary); visibility: hidden; }
.cascade-ai-sample.is-selected .cascade-ai-sample-check { visibility: visible; }
.cascade-ai-upload-footer { margin-top: 16px; display: flex; justify-content: flex-end; }

/* client-side PDF validation message */
.cascade-ai-file-error { margin-top: 10px; }

/* ----- designing screen (SCREEN 2) ----- */
.cascade-ai-designing {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  margin-top: 8px;
}
@media (max-width: 860px) {
  .cascade-ai-designing { grid-template-columns: 1fr; }
}

.cascade-ai-designing-left { min-width: 0; }

.cascade-ai-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.cascade-ai-designing-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.cascade-ai-spark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--color-primary);
  color: #ffffff;
}
.cascade-ai-spark svg { width: 14px; height: 14px; }

/* honest mock/live badge */
.cascade-ai-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 9999px;
  padding: 4px 10px;
}
.cascade-ai-badge-mock {
  color: var(--color-mirage-80, #3D4157);
  background: var(--color-secondary-token-yellow-light, #FFF5D9);
  border: 1px solid var(--color-token-yellow, #FFBB38);
}
.cascade-ai-badge-live {
  color: var(--color-mirage-70, #56596C);
  background: var(--color-mirage-05, #F3F3F5);
  border: 1px solid var(--color-link-water, #DFEAF2);
}

.cascade-ai-designing-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-ink);
  margin: 0;
}

.cascade-ai-progress {
  position: relative;
  height: 6px;
  border-radius: 9999px;
  background: var(--cb-line);
  overflow: hidden;
  margin-bottom: 20px;
}
.cascade-ai-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 9999px;
  background: var(--color-primary);
  transition: width 0.5s ease;
}
/* indeterminate sweep during the real (unknown-length) generation wait */
.cascade-ai-progress.is-indeterminate .cascade-ai-progress-bar {
  width: 40%;
  transition: none;
  animation: cascade-ai-indeterminate 1.2s ease-in-out infinite;
}
@keyframes cascade-ai-indeterminate {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* ----- checklist ----- */
.cascade-ai-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cascade-ai-check { display: flex; align-items: flex-start; gap: 10px; }

.cascade-ai-check-mark {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.cascade-ai-check-icon { width: 14px; height: 14px; color: var(--cb-approve); opacity: 0; }
.cascade-ai-check-spinner {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 9999px;
  border: 1.5px solid var(--cb-line-strong);
  border-top-color: var(--color-primary);
  opacity: 0;
}
.cascade-ai-check.is-loading .cascade-ai-check-spinner { opacity: 1; animation: cascade-ai-spin 0.7s linear infinite; }
.cascade-ai-check.is-done .cascade-ai-check-icon { opacity: 1; }

.cascade-ai-check-label { font-size: 14px; line-height: 1.4; color: var(--cb-ink); }
.cascade-ai-check.is-done .cascade-ai-check-label { color: var(--color-mirage-60); }

@keyframes cascade-ai-spin { to { transform: rotate(360deg); } }

/* ----- warnings banner ----- */
.cascade-ai-warnings { margin-top: 20px; }
.cascade-ai-warning-list {
  list-style: disc;
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ----- error state -----
   When generation fails (a real error OR a guardrail rejection), the controller
   adds .is-error to .cascade-ai-designing: the in-progress chrome (status chip,
   badge, progress bar, checklist, warnings, and the canvas) is hidden and the
   centered error CARD takes over the full grid. */
.cascade-ai-designing.is-error {
  /* Collapse the two-column build layout to a single centered column. */
  grid-template-columns: 1fr;
}
.cascade-ai-designing.is-error .cascade-ai-designing-left,
.cascade-ai-designing.is-error .cascade-ai-canvas {
  display: none;
}

.cascade-ai-error {
  /* Span the full grid and center the card. */
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.cascade-ai-error:focus { outline: none; }

.cascade-ai-error-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 460px;
  width: 100%;
  padding: 36px 28px;
  background: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 14px;
}

.cascade-ai-error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: var(--color-secondary-token-red-light, #FFE0EB);
  color: var(--color-token-red-ink);
}
.cascade-ai-error-icon svg { width: 26px; height: 26px; }

.cascade-ai-error-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.cascade-ai-error-msg {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-width: 40ch;
}

/* suggestion: "Try something like:" + a clickable example prompt */
.cascade-ai-error-suggest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}
.cascade-ai-error-suggest-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-mirage-70, #56596C);
  margin: 0;
}
.cascade-ai-error-chip {
  width: 100%;
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-mirage-80, #3D4157);
  background: var(--color-app-bg, #F7F9FB);
  border: 1px solid var(--color-link-water, #DFEAF2);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.cascade-ai-error-chip:hover {
  border-color: var(--color-primary, #0029FF);
  background: var(--color-primary-light, #E6EAFF);
  color: var(--color-primary, #0029FF);
}
.cascade-ai-error-chip:focus-visible {
  outline: 2px solid var(--color-primary, #0029FF);
  outline-offset: 2px;
}

.cascade-ai-error-action { margin-top: 6px; }

/* ----- right canvas: dotted grid + flow cards ----- */
.cascade-ai-canvas {
  border: 1px solid var(--cb-line);
  border-radius: 12px;
  background-color: var(--cb-paper);
  background-image: radial-gradient(#d8d5cc 1px, transparent 1px);
  background-size: 20px 20px;
  padding: 32px 24px;
  min-height: 420px;
  overflow: auto;
}
.cascade-ai-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cascade-ai-node, .cascade-ai-node-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.cascade-ai-node.is-in, .cascade-ai-node-row.is-in { opacity: 1; transform: translateY(0); }
/* the decision card is nested inside the row; reveal it with its row */
.cascade-ai-node-row.is-in .cascade-ai-node { opacity: 1; transform: translateY(0); }

.cascade-ai-node {
  border-radius: 12px;
  padding: 12px 14px;
}
.cascade-ai-node-title { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cascade-ai-node-sub { display: block; font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cascade-ai-node-applicant {
  width: 184px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cb-ink);
  color: var(--cb-paper);
  box-shadow: var(--cb-shadow-node);
}
.cascade-ai-node-applicant .cascade-ai-node-sub { color: rgba(243, 242, 243, 0.5); }
.cascade-ai-node-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.cascade-ai-node-avatar svg { width: 16px; height: 16px; }

.cascade-ai-node-product, .cascade-ai-node-simple {
  width: 216px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--cb-line);
  box-shadow: var(--cb-shadow-node);
}
.cascade-ai-node-product .cascade-ai-node-title,
.cascade-ai-node-simple .cascade-ai-node-title { color: var(--cb-ink); }
.cascade-ai-node-product .cascade-ai-node-sub,
.cascade-ai-node-simple .cascade-ai-node-sub { color: var(--color-mirage-60); }

.cascade-ai-node-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--color-primary);
  color: #ffffff;
}
.cascade-ai-node-badge svg { width: 18px; height: 18px; }
.cascade-ai-node-body { display: flex; flex-direction: column; min-width: 0; }

/* decision card + fail chip laid out side by side, joined by a short line */
.cascade-ai-node-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.cascade-ai-node-decision {
  width: 216px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 2px dashed rgba(20, 17, 29, 0.2);
  box-shadow: var(--cb-shadow-node);
}
.cascade-ai-node-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-mirage-30);
}
.cascade-ai-node-eyebrow svg { width: 12px; height: 12px; }
.cascade-ai-node-decision .cascade-ai-node-title { color: var(--cb-ink); margin-top: 4px; }
.cascade-ai-node-cond {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--color-mirage-70);
  background: var(--cb-sand);
  border-radius: 6px;
  padding: 2px 8px;
}
.cascade-ai-node-cond:empty { display: none; }

.cascade-ai-fail-chip {
  position: relative;
  margin-left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--cb-reject);
  background: var(--cb-reject-soft);
  border: 1px solid var(--cb-reject-ring);
  border-radius: 8px;
  padding: 5px 10px;
  white-space: nowrap;
}
.cascade-ai-fail-chip::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 20px;
  height: 1px;
  background: var(--cb-line-strong);
}
.cascade-ai-fail-chip svg { width: 12px; height: 12px; }

/* vertical connector between cards */
.cascade-ai-connector {
  width: 1px;
  height: 24px;
  background: var(--cb-line-strong);
}

/* invalid-input nudge */
.cascade-ai-shake { animation: cascade-ai-shake 0.4s ease; }
@keyframes cascade-ai-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* ----- reduced motion ----- */
/* Respect users who ask for less motion: drop entrance transitions, the
   spinner/indeterminate sweep, and the shake. The JS also skips its per-node
   await delays and renders the flowchart at once. */
@media (prefers-reduced-motion: reduce) {
  .cascade-ai-mode,
  .cascade-ai-mode:hover { transform: none; transition: none; }
  .cascade-ai-node,
  .cascade-ai-node-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cascade-ai-progress-bar { transition: none; }
  .cascade-ai-progress.is-indeterminate .cascade-ai-progress-bar { animation: none; }
  .cascade-ai-check.is-loading .cascade-ai-check-spinner { animation: none; }
  .cascade-ai-shake { animation: none; }
  .btn-cascade-ai-generate:active { transform: none; }
}

/* ==========================================================================
   OPERATOR LEFT SIDEBAR — dark navy rail (Motion surface)
   Replaces the former .cascades-topnav top header. Mounted by
   layouts/application.html.erb via shared/_sidebar; driven by sidebar_controller.
   ========================================================================== */
.app-sidebar {
  flex: 0 0 256px;
  width: 256px;
  height: 100%;
  box-sizing: border-box; /* border-right counts inside the 256/64px, like the prototype */
  background-color: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-sidebar-divider);
  display: flex;
  flex-direction: column;
  /* No overflow clip here: the account popover must be able to escape the rail
     (notably in the 72px collapsed state). .sidebar-nav handles its own scroll. */
  overflow: visible;
  transition: flex-basis 0.18s ease, width 0.18s ease;
}

/* --- Workspace header (avatar + company + name + account menu) --- */
.sidebar-head { padding: 12px 8px 8px; }
.sidebar-workspace { position: relative; }
.sidebar-ws-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background-color 0.15s ease;
}
.sidebar-ws-btn:hover { background-color: var(--color-sidebar-surface-hover); }
.sidebar-ws-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background-color: var(--color-sidebar-pill-active);
  color: var(--color-sidebar-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
}
.sidebar-ws-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-ws-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sidebar-ws-company {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-ws-name {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-sidebar-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-ws-chevron { flex: 0 0 auto; width: 16px; height: 16px; color: var(--color-sidebar-caption); }

/* Account dropdown (light popover) */
.sidebar-account-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 6px;
  right: 6px;
  background-color: var(--color-white);
  border: 1px solid var(--color-link-water);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(13, 18, 45, 0.18);
  padding: 8px;
  z-index: 70;
}
.sidebar-account-menu.hidden { display: none; }
.sidebar-account-menu form { margin: 0; }
.sidebar-account-email {
  display: block;
  font-size: 12px;
  color: var(--color-mirage-70);
  padding: 4px 8px 8px;
  word-break: break-all;
  border-bottom: 1px solid var(--color-link-water);
  margin-bottom: 6px;
}
.sidebar-account-signout {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-token-red-ink);
  cursor: pointer;
}
.sidebar-account-signout:hover { background-color: var(--color-secondary-token-red-light); }

/* --- Navigation (prototype: inset 4px-radius pills, nav px-3, items px-3 py-2.5) --- */
.sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 12px 8px; }
.sidebar-caption {
  margin: 0;
  padding: 12px 12px 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-sidebar-caption);
}
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  margin-bottom: 4px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--color-sidebar-text-muted);
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-link:hover { background-color: var(--color-sidebar-surface-hover); color: var(--color-sidebar-text); }
.sidebar-link.active { background-color: var(--color-sidebar-active-bg); color: var(--color-sidebar-text); font-weight: 500; }
.sidebar-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 999px;
  background-color: var(--color-sidebar-accent);
}
.sidebar-icon { flex: 0 0 auto; width: 20px; height: 20px; }
.sidebar-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* --- Footer (prototype: border-t portal-border, p-2, logo row px-2 py-1.5) --- */
.sidebar-footer {
  margin-top: auto;
  padding: 8px;
  border-top: 1px solid var(--color-sidebar-divider);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-mode-toggle {
  display: flex;
  background-color: var(--color-sidebar-surface);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.sidebar-mode-btn {
  flex: 1;
  padding: 6px 0;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--color-sidebar-text-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-mode-btn:hover { color: var(--color-sidebar-text); }
.sidebar-mode-btn.active { background-color: var(--color-sidebar-pill-active); color: var(--color-sidebar-text); }

/* Explore products — secondary action above the footer divider (not a primary nav page). */
.sidebar-explore {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 10px 4px;
  padding: 8px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--color-sidebar-text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-explore:hover { background-color: var(--color-sidebar-surface-hover); color: var(--color-sidebar-text); }
.sidebar-explore-icon { flex: 0 0 auto; width: 18px; height: 18px; }
.sidebar-explore span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.sidebar-footrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; }
.sidebar-foot-logo { display: inline-flex; align-items: center; text-decoration: none; }
/* Prototype swaps the asset per state: full wordmark (18px) expanded,
   mark-only glyph (20px) collapsed. */
.sidebar-logo-word { display: block; height: 18px; width: auto; }
.sidebar-logo-glyph { display: none; height: 20px; width: auto; }
.sidebar-mode-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-sidebar-caption);
  text-decoration: none;
  white-space: nowrap;
}
.sidebar-collapse {
  display: flex;
  align-items: center;
  /* Right-aligned per the 2026-08 UX round (same 16px inset as the footrow
     content above); the collapsed rail re-centers it (see .sidebar-collapsed). */
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--color-sidebar-text-muted);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-collapse:hover { background-color: var(--color-sidebar-surface-hover); color: var(--color-sidebar-text); }
.sidebar-collapse-icon { width: 16px; height: 16px; flex: 0 0 auto; transition: transform 0.18s ease; }

/* --- Mobile top bar + overlay (hidden on desktop) --- */
.app-mobilebar { display: none; }
.app-mobilebar-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.app-mobilebar-burger span { display: block; height: 2px; border-radius: 2px; background-color: var(--color-mirage); }
.app-mobilebar-logo { display: inline-flex; align-items: center; }
.app-mobilebar-logo img { height: 22px; width: auto; }
.app-sidebar-overlay { display: none; }

/* --- Desktop: collapsed icon rail --- */
@media (min-width: 1001px) {
  .page-layout.sidebar-collapsed .app-sidebar { flex-basis: 64px; width: 64px; }
  .sidebar-collapsed .sidebar-logo-word { display: none; }
  .sidebar-collapsed .sidebar-logo-glyph { display: block; }
  .sidebar-collapsed .sidebar-ws-text,
  .sidebar-collapsed .sidebar-ws-chevron,
  .sidebar-collapsed .sidebar-caption,
  .sidebar-collapsed .sidebar-link span,
  .sidebar-collapsed .sidebar-explore span,
  .sidebar-collapsed .sidebar-mode-toggle,
  .sidebar-collapsed .sidebar-mode-tag,
  .sidebar-collapsed .sidebar-collapse-label { display: none; }
  .sidebar-collapsed .sidebar-head { padding: 16px 10px 8px; }
  .sidebar-collapsed .sidebar-ws-btn { justify-content: center; padding: 6px 0; }
  .sidebar-collapsed .sidebar-link { justify-content: center; padding: 0; gap: 0; }
  .sidebar-collapsed .sidebar-explore { justify-content: center; margin: 0 0 4px; padding: 8px 0; gap: 0; }
  .sidebar-collapsed .sidebar-footrow { justify-content: center; }
  .sidebar-collapsed .sidebar-collapse { justify-content: center; }
  .sidebar-collapsed .sidebar-collapse-icon { transform: rotate(180deg); }
  .sidebar-collapsed .sidebar-account-menu { left: 6px; right: auto; width: 230px; }
}

/* --- Mobile: sidebar becomes an off-canvas drawer --- */
@media (max-width: 1000px) {
  .app-mobilebar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 8px;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-link-water);
    flex: 0 0 auto;
  }
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    transform: translateX(-100%);
    /* Hidden when closed so the off-screen drawer's links leave the tab order. */
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s ease;
    box-shadow: 0 12px 32px rgba(13, 18, 45, 0.28);
  }
  .page-layout.sidebar-mobile-open .app-sidebar { transform: translateX(0); visibility: visible; }
  .sidebar-collapse { display: none; }
  .app-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 75;
    background-color: rgba(13, 18, 45, 0.4);
  }
  .app-sidebar-overlay.hidden { display: none; }
  .page-content-wrapper { padding: 16px; }
}

/* --- Sidebar focus-visible rings (keyboard) --- */
.sidebar-link:focus-visible,
.sidebar-ws-btn:focus-visible,
.sidebar-mode-btn:focus-visible,
.sidebar-mode-tag:focus-visible,
.sidebar-foot-logo:focus-visible,
.sidebar-collapse:focus-visible {
  outline: 2px solid var(--color-sidebar-text);
  outline-offset: -2px;
}
/* Controls that sit on a light surface (white account popover / white mobile bar). */
.sidebar-account-signout:focus-visible,
.app-mobilebar-burger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Respect reduced-motion: placed after all sidebar transition rules so it wins on source order --- */
@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .sidebar-collapse-icon,
  .sidebar-ws-btn,
  .sidebar-link,
  .sidebar-mode-btn {
    transition: none;
  }
}

/* ==========================================================================
   SANDBOX BANNER — full-width top banner (operator pages, non-production users)
   ========================================================================== */
.app-sandbox-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 44px;
  padding: 0 24px;
  background-color: var(--color-sidebar-bg); /* prototype: same portal dark as the rail */
  border-bottom: 1px solid var(--color-sidebar-divider);
  color: var(--color-sidebar-text);
  font-size: 13px;
}
.app-sandbox-banner-msg { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Blue accent from the dark-chrome token family (see DESIGN_SYSTEM.md §2.9) —
   --color-primary is too dark to read against this near-black band. */
.app-sandbox-banner-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--color-sidebar-accent); }
.app-sandbox-banner-iconbox { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--color-sidebar-accent) 22%, transparent); }
.app-sandbox-banner-iconbox .app-sandbox-banner-icon { width: 14px; height: 14px; }
.app-sandbox-banner-msg span { color: var(--color-sidebar-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sandbox-banner-msg strong { color: var(--color-sidebar-text); font-weight: 600; }
.app-sandbox-banner-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.app-sandbox-banner-note { color: var(--color-sidebar-caption); font-size: 12px; white-space: nowrap; }
.app-sandbox-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.app-sandbox-banner-cta:hover { background-color: var(--color-primary-dark); }
.app-sandbox-banner-cta:focus-visible { outline: 2px solid var(--color-sidebar-text); outline-offset: 2px; }
button.app-sandbox-banner-cta { border: 0; cursor: pointer; font-family: inherit; }
.app-sandbox-banner-arrow { flex: 0 0 auto; width: 16px; height: 16px; }

/* In-review banner state (prototype): spinner + static pill. */
.app-sandbox-banner-spinner {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--color-portage);
  animation: aw-spin 0.9s linear infinite;
}
@keyframes aw-spin { to { transform: rotate(360deg); } }
.app-sandbox-banner-review-pill {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--color-sidebar-text);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .app-sandbox-banner { padding: 0 16px; height: 44px; }
  .app-sandbox-banner-note { display: none; }
}

/* ==========================================================================
   ACTIVATION WIZARD — crs2 prototype's "Activate live access" modal (3 steps)
   ========================================================================== */
/* layering comes from .modal-overlay (z-index 1000) on the same element —
   a lower override here would let the fixed .dash-gs-dock (900) sit on top */
/* display-setting rules below must never beat the hidden attribute */
.activation-wizard [hidden] { display: none !important; }
.aw-dialog {
  display: flex; flex-direction: column;
  width: 672px; max-width: 94vw; max-height: 92vh;
  overflow: hidden; /* header/stepper/footer stay pinned; .aw-body scrolls */
  background: #ffffff; border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.aw-form { display: flex; flex-direction: column; min-height: 0; }
.aw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px 0; }
.aw-eyebrow {
  display: flex; align-items: center; gap: 6px; margin: 0 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-primary);
}
.aw-eyebrow svg { width: 14px; height: 14px; }
.aw-title { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: #14111d; }
.aw-sub { margin: 6px 0 0; font-size: 14px; color: #6b6870; }
.aw-close {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent;
  color: #6b6870; cursor: pointer;
}
.aw-close:hover { background: #f8f7f8; color: #14111d; }
.aw-close svg { width: 18px; height: 18px; }

/* Stepper */
.aw-stepper { display: flex; align-items: center; gap: 10px; padding: 18px 28px 20px; }
.aw-step { display: flex; align-items: center; gap: 8px; }
.aw-stepper-line { flex: 1; height: 1px; min-width: 24px; background: #e6e6e7; }
.aw-step-dot {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: #f8f7f8; color: var(--color-muted); font-size: 12px; font-weight: 600;
}
.aw-step-check { display: none; width: 12px; height: 12px; }
.aw-step-label { font-size: 13px; color: var(--color-muted); max-width: 90px; line-height: 1.2; }
.aw-step.is-active .aw-step-dot { background: var(--color-primary); color: #ffffff; }
.aw-step.is-active .aw-step-label { color: #14111d; font-weight: 500; }
.aw-step.is-done .aw-step-dot { background: #14111d; color: #ffffff; }
.aw-step.is-done .aw-step-num { display: none; }
.aw-step.is-done .aw-step-check { display: block; }

/* Body + fields */
.aw-body {
  padding: 20px 28px 24px; border-top: 1px solid #e6e6e7;
  display: flex; flex-direction: column; gap: 16px;
  flex: 1; min-height: 0; overflow-y: auto;
}
.aw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* P-07: the ST column holds a <select>; 64px minus .aw-input's 24px padding
   left ~40px, which clips "AL" plus the native caret on Windows/Chrome. */
.aw-grid3 { display: grid; grid-template-columns: 2fr 88px 1fr; gap: 12px; }
.aw-label { font-size: 14px; font-weight: 500; color: #14111d; }
.aw-req { color: var(--color-primary); }
.aw-input {
  box-sizing: border-box; width: 100%;
  padding: 10px 12px; border: 1px solid #e6e6e7; border-radius: 8px;
  background: #ffffff; font-size: 14px; font-family: inherit; color: #14111d;
}
.aw-input::placeholder { color: var(--color-muted); }
.aw-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.14); }
.aw-input-invalid, .aw-input-invalid:focus { border-color: #fa3a55; box-shadow: 0 0 0 3px rgba(250, 58, 85, 0.12); }
.aw-hint { margin: 0; font-size: 12px; color: var(--color-muted); }
/* Both the submit error on the last step and the per-field messages
   activation_wizard_controller.js injects under an invalid input. */
.aw-error { margin: 0; font-size: 13px; color: var(--color-token-red-ink); }
.aw-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 14px; border: 1px solid #e6e6e7; border-radius: 10px;
  background: #f8f7f8; font-size: 13px; line-height: 1.5; color: #6b6870;
}
.aw-note svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; }
.aw-note-text { min-width: 0; }

/* Footer */
.aw-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; border-top: 1px solid #e6e6e7;
}
.aw-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border: 0; border-radius: 8px; background: transparent;
  font-size: 14px; font-weight: 500; font-family: inherit; color: #393641; cursor: pointer;
}
.aw-back:hover { background: #f8f7f8; }
.aw-continue {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 0; border-radius: 8px;
  background: var(--color-mirage); color: #ffffff;
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.aw-continue svg { width: 16px; height: 16px; }
.aw-continue:disabled { opacity: 0.45; cursor: not-allowed; }
.aw-continue-accent { background: var(--color-ink); }
.aw-continue-accent:not(:disabled):hover { background: var(--color-ink-hover); }

/* Success pane */
.aw-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 40px; gap: 6px; }
.aw-success-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 999px; margin-bottom: 10px;
  background: #e5f3ee; border: 2px solid #12843a; color: var(--color-token-green-ink);
}
.aw-success-badge svg { width: 26px; height: 26px; }
.aw-success .aw-sub { max-width: 420px; }
.aw-eta { width: 100%; max-width: 380px; margin-top: 18px; border: 1px solid #e6e6e7; border-radius: 12px; padding: 14px 16px; text-align: left; }
.aw-eta-head { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #e6e6e7; font-size: 13px; font-weight: 600; color: #14111d; }
.aw-eta-head svg { width: 15px; height: 15px; color: var(--color-primary); }
.aw-eta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: #6b6870; }
.aw-eta-row s { color: var(--color-muted); margin-right: 6px; }
.aw-eta-row strong { color: #14111d; }
.aw-done {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  padding: 11px 18px; border: 0; border-radius: 8px;
  background: var(--color-mirage); color: #ffffff;
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.aw-done:hover { background: #14111d; }
.aw-done svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .aw-grid2 { grid-template-columns: 1fr; }
  .aw-stepper { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .app-sandbox-banner-cta { transition: none; }
}
/* ============================================================================
   Auth showcase — dark social-proof panel for sign-up / sign-in.
   Reused by users/registrations/new + users/sessions/new. Marquees duplicate
   their track for a seamless loop; stars use fractional fill. Colors via Motion
   tokens (color-mix keeps dark-surface translucency token-based — no hex/rgba).
   ============================================================================ */
.signup-right-dark { padding: 0; background: var(--color-mirage); display: flex; flex-direction: column; align-items: stretch; }

.auth-showcase {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  padding: 44px 40px;
  background: var(--color-mirage);
  color: var(--color-white, #FFFFFF);
  overflow: hidden;
}
.auth-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--color-white, #FFFFFF) 7%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.auth-showcase::after {
  content: "";
  position: absolute;
  top: -140px;
  right: -160px;
  width: 460px;
  height: 460px;
  border-radius: 9999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary, #0029FF) 38%, transparent), transparent 70%);
  filter: blur(44px);
  pointer-events: none;
}
.auth-showcase > * { position: relative; z-index: 1; }

/* G2 rating pill */
.auth-g2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-white, #FFFFFF) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-white, #FFFFFF) 14%, transparent);
  color: var(--color-white, #FFFFFF);
  text-decoration: none;
}
.auth-g2-score { font-weight: 700; font-size: 14px; }
.auth-g2-cap { font-size: 12px; color: color-mix(in srgb, var(--color-white, #FFFFFF) 65%, transparent); }

/* Fractional stars (★ overlay clipped by the is-wN width buckets below) */
.auth-stars { position: relative; display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.auth-stars-empty { color: color-mix(in srgb, var(--color-white, #FFFFFF) 24%, transparent); }
.auth-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  /* Graphical fill, not text — the brand yellow, not the AA-text ink variant
     (the rating is exposed to AT via aria-label on .auth-stars). */
  color: var(--color-token-yellow, #FFBB38);
}
/* Width buckets in 5% steps (see OnboardingHelper#auth_stars): the fill can't
   be an inline style — the enforcing CSP drops style attributes (no
   'unsafe-inline' on style-src), which left the fill at width 0 and the stars
   grey. Same idiom as .op-progress-fill.is-N. */
.auth-stars-fill.is-w0 { width: 0%; }
.auth-stars-fill.is-w5 { width: 5%; }
.auth-stars-fill.is-w10 { width: 10%; }
.auth-stars-fill.is-w15 { width: 15%; }
.auth-stars-fill.is-w20 { width: 20%; }
.auth-stars-fill.is-w25 { width: 25%; }
.auth-stars-fill.is-w30 { width: 30%; }
.auth-stars-fill.is-w35 { width: 35%; }
.auth-stars-fill.is-w40 { width: 40%; }
.auth-stars-fill.is-w45 { width: 45%; }
.auth-stars-fill.is-w50 { width: 50%; }
.auth-stars-fill.is-w55 { width: 55%; }
.auth-stars-fill.is-w60 { width: 60%; }
.auth-stars-fill.is-w65 { width: 65%; }
.auth-stars-fill.is-w70 { width: 70%; }
.auth-stars-fill.is-w75 { width: 75%; }
.auth-stars-fill.is-w80 { width: 80%; }
.auth-stars-fill.is-w85 { width: 85%; }
.auth-stars-fill.is-w90 { width: 90%; }
.auth-stars-fill.is-w95 { width: 95%; }
.auth-stars-fill.is-w100 { width: 100%; }

/* Shared marquee chrome (edge fade via mask; alpha is all that matters) */
.auth-marquee, .auth-logos {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, var(--color-mirage) 26%, var(--color-mirage) 74%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--color-mirage) 26%, var(--color-mirage) 74%, transparent 100%);
}

/* Testimonial marquee (slow, →) */
.auth-marquee { margin: 0; min-height: 0; display: flex; align-items: center; }
.auth-mid { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.auth-marquee-track { display: flex; align-items: stretch; gap: 16px; width: max-content; animation: auth-marquee-ltr 64s linear infinite; }
.auth-marquee:hover .auth-marquee-track { animation-play-state: paused; }
@keyframes auth-marquee-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.auth-quote-card {
  flex: 0 0 auto;
  width: 340px;
  margin: 0;
  padding: 22px;
  border-radius: 14px;
  background: var(--color-white, #FFFFFF);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--color-mirage) 45%, transparent);
  display: flex;
  flex-direction: column;
}
/* Empty stars need a light gray on the white card (the panel default is a
   light-on-dark translucent that would vanish here). */
.auth-quote-card .auth-stars-empty { color: color-mix(in srgb, var(--color-mirage) 16%, var(--color-white, #FFFFFF)); }
.auth-quote-text {
  margin: 14px 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-mirage-80);
}
.auth-quote-person { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.auth-quote-avatar {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-light, #E6EAFF);
  color: var(--color-primary, #0029FF);
  font-size: 12px; font-weight: 700;
}
.auth-quote-meta { display: flex; flex-direction: column; }
.auth-quote-name { font-weight: 600; font-size: 13px; color: var(--color-mirage); }
.auth-quote-role { margin-top: 1px; font-size: 12px; color: var(--color-mirage-70); }

/* Logo marquee (faster, ←) */
.auth-logos { margin: 0; }
.auth-logos-track { display: flex; align-items: center; gap: 30px; width: max-content; animation: auth-marquee-rtl 40s linear infinite; }
.auth-logos:hover .auth-logos-track { animation-play-state: paused; }
@keyframes auth-marquee-rtl { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.auth-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
/* Customer logos: normalize to a common cap-height, force monochrome white,
   dim slightly so they read as proof marks rather than brand splashes. */
.auth-logo-img { height: 24px; width: auto; max-width: 150px; object-fit: contain; filter: brightness(0) invert(1); opacity: .66; }
.auth-logos:hover .auth-logo-img { opacity: .82; }

/* Trust pills (bottom of the panel) */
.auth-badges { flex: none; display: flex; flex-wrap: wrap; gap: 10px; }
.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--color-white, #FFFFFF) 16%, transparent);
  background: color-mix(in srgb, var(--color-white, #FFFFFF) 6%, transparent);
  font-size: 12px;
  color: color-mix(in srgb, var(--color-white, #FFFFFF) 80%, transparent);
}
.auth-badge svg { opacity: .85; }

/* Sign-up left column additions */
.signup-eyebrow {
  display: flex;
  width: fit-content;
  align-items: center;
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--color-primary-light, #E6EAFF);
  color: var(--color-primary, #0029FF);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}
/* Pinned to the bottom of the left column (a direct child of .signup-left, which
   is the scroll container) and kept visible while that column scrolls. The top
   margin guarantees separation from the sign-up demo card even when space is
   tight, so the line never reads as part of that card. */
.signup-legal { position: sticky; bottom: 0; z-index: 1; width: 100%; max-width: 560px; box-sizing: border-box; margin: 32px 0 0; padding: 12px 16px 4px; background-color: var(--color-white, #FFFFFF); font-size: 12px; line-height: 1.5; color: var(--color-mirage-70); text-align: center; text-wrap: balance; }

/* The sign-up "Book a call" modal reuses the shared .calendly-modal* component
   (see the landing page) via the calendly-modal Stimulus controller. */

/* Staggered entrance (left column) — ~70ms cascade */
@keyframes signup-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.signup-stagger > * { opacity: 0; animation: signup-rise .5s cubic-bezier(.4, 0, .2, 1) forwards; }
.signup-stagger > *:nth-child(1) { animation-delay: 0s; }
.signup-stagger > *:nth-child(2) { animation-delay: .07s; }
.signup-stagger > *:nth-child(3) { animation-delay: .14s; }
.signup-stagger > *:nth-child(4) { animation-delay: .21s; }
.signup-stagger > *:nth-child(5) { animation-delay: .28s; }
.signup-stagger > *:nth-child(6) { animation-delay: .35s; }
.signup-stagger > *:nth-child(7) { animation-delay: .42s; }
.signup-stagger > *:nth-child(8) { animation-delay: .49s; }
.signup-stagger > *:nth-child(9) { animation-delay: .56s; }

@media (max-width: 900px) { .signup-right-dark { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .auth-marquee-track, .auth-logos-track { animation: none; }
  .signup-stagger > * { animation: none; opacity: 1; transform: none; }
}

/* ============================================================================
   Onboarding modal — full-screen 3-step (Personalize -> Describe -> No-Code Workflows).
   Dark brand rail (left) + form (right). All colors via Motion tokens; dark
   translucency via color-mix. See onboarding/_modal.html.erb + onboarding_controller.js.
   ============================================================================ */
.ob-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--color-mirage) 45%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* One FIXED size for both steps (sized for the larger step 2 card grid in width,
   and tall enough for step 1's full form in height) so the modal never resizes
   between steps and never grows as the personalization chip/brand appear. */
.ob-modal { display: flex; width: min(1180px, 96vw); height: min(672px, 92vh); background: var(--color-app-bg, #F7F9FB); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 90px color-mix(in srgb, var(--color-mirage) 55%, transparent); }
.ob-grid { display: grid; grid-template-columns: 260px 1fr; grid-template-rows: minmax(0, 1fr); height: 100%; width: 100%; min-height: 0; }

/* Brand rail */
.ob-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
  background: var(--color-mirage);
  color: var(--color-white, #FFFFFF);
  overflow: hidden;
}
.ob-rail::after {
  content: "";
  position: absolute;
  bottom: -160px;
  left: -120px;
  width: 380px;
  height: 380px;
  border-radius: 9999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary, #0029FF) 36%, transparent), transparent 70%);
  filter: blur(44px);
  pointer-events: none;
}
.ob-rail > * { position: relative; z-index: 1; }
.ob-rail-logo { height: 26px; width: auto; filter: brightness(0) invert(1); }
.ob-rail-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.ob-rail-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ob-rail-brand[hidden] { display: none; }
.ob-rail-avatar {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background-color: color-mix(in srgb, var(--color-white, #FFFFFF) 14%, transparent);
  background-size: cover; background-position: center; color: var(--color-white, #FFFFFF);
}
.ob-rail-bizname { font-size: 16px; font-weight: 600; }

.ob-blurb-title { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.ob-blurb-text { margin: 0; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--color-white, #FFFFFF) 70%, transparent); }
.ob-blurb:not([hidden]) { animation: ob-fade-up .25s ease; }

.ob-rail-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ob-rail-step { display: flex; align-items: center; gap: 10px; font-size: 14px; color: color-mix(in srgb, var(--color-white, #FFFFFF) 55%, transparent); cursor: pointer; transition: color .15s ease; }
.ob-rail-step:hover { color: var(--color-white, #FFFFFF); }
.ob-rail-dot { width: 8px; height: 8px; border-radius: 9999px; background: color-mix(in srgb, var(--color-white, #FFFFFF) 30%, transparent); }
.ob-rail-step.is-current { color: var(--color-white, #FFFFFF); font-weight: 600; }
.ob-rail-step.is-current .ob-rail-dot { background: var(--color-white, #FFFFFF); }
.ob-rail-step.is-done .ob-rail-dot { background: var(--color-token-green); }

/* Bottom-left: CRS logo + per-step welcome blurb */
.ob-rail-foot { margin-top: auto; }
.ob-rail-foot-logo { display: block; height: 22px; width: auto; margin-bottom: 12px; filter: brightness(0) invert(1); }

/* Form column — a fixed-height flex column: header stays put, the body flexes
   (and scrolls only if a very short viewport forces it), and the actions row
   below it is ALWAYS visible so the Continue/Enter CTA is never clipped. */
.ob-main { display: flex; flex-direction: column; padding: 28px 40px; min-height: 0; }
.ob-main-inner { width: 100%; max-width: 860px; margin: 0 auto; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; }
/* Step 1 is just a form — keep it a comfortable column, centered in the wide modal. */
/* Wider than the single-column steps to give the paired two-up fields room. */
.ob-step[data-step="1"] { max-width: 640px; }
.ob-step { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; animation: ob-slide-in .22s ease; }
/* display:flex above would defeat the `hidden` attribute on the inactive step —
   keep hidden steps out of the flex flow so the active one gets the full height. */
.ob-step[hidden] { display: none; }
.ob-step-body { flex: 1; min-height: 0; width: 100%; overflow-y: auto; }
.ob-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary, #0029FF); }
.ob-title { margin: 0 0 6px; font-size: 26px; font-weight: 700; color: var(--color-mirage); }
.ob-subtitle { margin: 0 0 12px; font-size: 15px; color: var(--color-mirage-70); }
/* Compact spacing between step-1 form fields so the full form fits with no scroll. */
.ob-step[data-step="1"] .form-field-group { margin: 0; }
/* Pairing the fields two-up frees the vertical room to breathe: the grid gap
   owns the spacing between fields (so the stacked-sibling margin must go), and
   the heading block gets a real gap before the first label. */
.ob-step[data-step="1"] .op-form-grid { gap: 20px 16px; }
.ob-step[data-step="1"] .op-form-grid .form-field-group + .form-field-group { margin-top: 0; }
.ob-step[data-step="1"] .ob-title { margin-bottom: 8px; }
.ob-step[data-step="1"] .ob-subtitle { margin-bottom: 26px; }
.ob-step[data-step="1"] .ob-chip { margin-top: 20px; }

/* Logo upload */
.ob-logo { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px dashed var(--color-link-water); border-radius: 10px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.ob-logo.is-dragover { border-color: var(--color-primary, #0029FF); background: var(--color-primary-light, #E6EAFF); }
.ob-logo-preview { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px; background-color: var(--color-mirage-05); background-size: cover; background-position: center; display: inline-flex; align-items: center; justify-content: center; color: var(--color-mirage-30, #B6B8C0); }
.ob-logo-preview.has-image { border: 1px solid var(--color-link-water); }
.ob-logo-preview.has-image svg { display: none; }
.ob-logo-cta { display: flex; flex-direction: column; gap: 2px; }
.ob-logo-title { font-size: 14px; font-weight: 600; color: var(--color-mirage-80); }
.ob-logo-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Live confirmation chip */
.ob-chip { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 8px 12px; border-radius: 10px; background: var(--color-primary-light, #E6EAFF); color: var(--color-mirage-80); font-size: 13px; animation: ob-fade-up .25s ease; }
.ob-chip[hidden] { display: none; }
.ob-chip-avatar { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background-color: var(--color-primary, #0029FF); background-size: cover; background-position: center; color: var(--color-white, #FFFFFF); }


/* Volume pills */
.ob-pills { display: flex; flex-wrap: nowrap; gap: 8px; }
.ob-pill { position: relative; cursor: pointer; }
.ob-pill-input { position: absolute; opacity: 0; pointer-events: none; }
.ob-pill span { display: inline-block; padding: 8px 14px; border: 1px solid var(--color-link-water); border-radius: 9999px; font-size: 13px; color: var(--color-mirage-70); transition: all .15s ease; }
.ob-pill:has(.ob-pill-input:checked) span { border-color: var(--color-primary, #0029FF); background: var(--color-primary, #0029FF); color: var(--color-white, #FFFFFF); }

/* Step 2 (Build) — "How do you want to start?" build-mode cards: three
   mutually exclusive routes into the product, each summarised by three points. */
.ob-step[data-step="2"] .ob-step-body { display: flex; flex-direction: column; gap: 20px; }
.ob-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ob-mode { position: relative; display: block; padding: 18px; border: 1px solid var(--color-link-water); border-radius: 12px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.ob-mode:hover { border-color: var(--color-mirage-30); }
.ob-mode-input { position: absolute; opacity: 0; pointer-events: none; }
.ob-mode:has(.ob-mode-input:checked) { border-color: var(--color-primary, #0029FF); background: var(--color-primary-light, #E6EAFF); }
/* The real radio is visually hidden, so mirror its focus ring onto the card. */
.ob-mode:has(.ob-mode-input:focus-visible) { border-color: var(--color-primary, #0029FF); box-shadow: 0 0 0 3px var(--color-primary-light, #E6EAFF); }
/* Radio affordance, top-right — a ring that thickens into a dot when selected. */
.ob-mode::after { content: ""; position: absolute; top: 18px; right: 18px; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid var(--color-link-water); border-radius: 9999px; background-color: var(--color-white, #FFFFFF); }
.ob-mode:has(.ob-mode-input:checked)::after { border-width: 5px; border-color: var(--color-primary, #0029FF); }
.ob-mode-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background-color: var(--color-mirage); color: var(--color-white, #FFFFFF); }
.ob-mode-name { display: block; margin-top: 14px; font-size: 16px; font-weight: 700; color: var(--color-mirage); }
.ob-mode-tag { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-mirage-70); }
.ob-mode-points { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.ob-mode-point { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--color-mirage-80); }
.ob-mode-check { flex: 0 0 auto; display: inline-flex; color: var(--color-token-green-ink); }

/* Footer actions — sit directly below the flexing body, always visible. */
.ob-actions { display: flex; gap: 12px; margin-top: 16px; justify-content: space-between; }
.ob-actions-end { justify-content: flex-end; }
.ob-cta-grow { flex: 1; }
/* #4: disabled CTA — a faded primary so the active/inactive state reads clearly. */
.ob-cta:disabled, .ob-cta[disabled] { background-color: var(--color-ink, #14111d); color: var(--color-white, #FFFFFF); opacity: .4; cursor: not-allowed; }

/* #8: Fit within the viewport with no scroll on normal screens. The modal is a
   fixed height (above); on short viewports it caps at 92vh and the step body
   scrolls internally rather than clipping the pinned actions row. */
/* Short viewports: trim chrome so step 1's form fits with no scroll. */
@media (max-height: 760px) {
  .ob-main { padding: 22px 32px; }
  .ob-title { font-size: 22px; margin-bottom: 6px; }
  .ob-subtitle { margin-bottom: 12px; }
  .ob-step[data-step="1"] .ob-subtitle { margin-bottom: 16px; }
  .ob-step[data-step="1"] .op-form-grid { gap: 14px 16px; }
  .ob-step[data-step="1"] .ob-chip { margin-top: 14px; }
  .ob-mode { padding: 14px; }
  .ob-mode-icon { width: 32px; height: 32px; }
  .ob-mode-name { margin-top: 10px; font-size: 15px; }
  .ob-mode-points { margin-top: 10px; gap: 5px; }
}
/* Narrow viewports: fall back to 2 columns + allow tag/pill wrapping. */
@media (max-width: 1230px) {
  .ob-pills { flex-wrap: wrap; }
}

/* Mobile progress dots (rail hidden) */
.ob-dots { display: none; gap: 6px; margin-bottom: 20px; }
.ob-dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--color-link-water); transition: width .2s ease, background-color .2s ease; }
.ob-dot.is-current { width: 18px; background: var(--color-primary, #0029FF); }

@keyframes ob-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ob-slide-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .ob-grid { grid-template-columns: 1fr; }
  .ob-rail { display: none; }
  .ob-dots { display: flex; }
  .ob-modes { grid-template-columns: 1fr; }
  /* Scoped to step 1 — .op-form-grid is shared with the /activate KYC form. */
  .ob-step[data-step="1"] .op-form-grid { grid-template-columns: 1fr; }
  .ob-main { padding: 32px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-step, .ob-blurb:not([hidden]), .ob-chip { animation: none; }
}

/* Sign-in trust line (lock icon + text) */
.signup-trust { display: inline-flex; align-items: center; gap: 6px; }
.signup-forgot { display: flex; justify-content: flex-end; margin-top: -6px; }

/* ==========================================================================
   CASCADE BUILDER — paper/ink + purple reskin (crs2-platform parity)
   --------------------------------------------------------------------------
   Everything here is scoped to `.cascade-builder-surface`, a class applied to
   the operator builder root ONLY (gated off pm_builder_mode? — the PM builder
   stays on TenantIQ). CSS custom properties cascade by DOM subtree, so
   redefining the Motion `--color-*` tokens on this container repaints the whole
   `builder-*` class family automatically; the rest of the operator app is
   untouched. Token values come from the prototype tailwind.config.js.
   ========================================================================== */
.cascade-builder-surface,
.cascade-list-surface,
/* The report modal is a self-contained prototype component that three surfaces
   render. On a Motion page (Single Reports) it needs the reskin palette its own
   child rules are written against, WITHOUT the surface's page background — so
   this scope carries the tokens only, wrapped around the overlay (fixed, so it
   costs no layout) and nothing else. */
.test-report-surface {
  /* Brand tokens are NOT remapped here — the surface keeps Motion blue
     (:root --color-primary et al.); only the paper/ink neutrals below differ.
     The prototype's electric-purple remap was retired. */

  /* Ink hierarchy + neutrals */
  --color-mirage: #14111d;
  --color-mirage-80: #393641;
  --color-mirage-70: #393641;
  --color-mirage-60: #6b6870;
  --color-mirage-30: #9c9ba0;
  --color-mirage-20: #cecdcf;
  --color-mirage-05: #f8f7f8;      /* sand — neutral hover / input fills */
  --color-link-water: #e6e6e7;     /* line — all builder borders */

  /* Success / price chip → approve (muted, on-brand green) */
  --color-token-green: #12843a;
  --color-secondary-token-green-light: #e5f3ee;
  /* Text on this surface keeps the builder's own green rather than inheriting
     the global ink. #12843a was already close but landed at 4.48:1 on sand and
     4.19:1 on the green chip; this clears AA on white, sand, paper and chip. */
  --color-token-green-ink: #0F7333;

  /* New builder-only tokens */
  --cb-paper: #f3f2f3;
  --cb-sand: #f8f7f8;
  --cb-ink: #14111d;
  --cb-line: #e6e6e7;
  --cb-line-strong: #cecdcf;
  --cb-brand: var(--color-primary);
  --cb-brand-100: #E6EAFF;
  --cb-brand-900: var(--cb-ink);
  --cb-approve: #12843a;  --cb-approve-soft: #e5f3ee;  --cb-approve-ring: #a9dcc2;
  --cb-reject:  #fa3a55;  --cb-reject-soft:  #fcefee;  --cb-reject-ring:  #f2bdb7;
  --cb-review:  #8e9100;  --cb-review-soft:  #fbfce5;  --cb-review-ring:  #ead2a0;
  --cb-dot-approve: #12935a;  --cb-dot-reject: #d7483b;  --cb-dot-review: #b97714;
  --cb-shadow-node: 0 1px 2px rgba(8, 4, 17, 0.05), 0 4px 12px -4px rgba(8, 4, 17, 0.12);

  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* The prototype renders with Tailwind's `antialiased`; without it every glyph
   sits a hair heavier and auto-width buttons measure ~2px wider. */
.cascade-list-surface, .cascade-builder-surface {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Form controls don't inherit font-family (UA default is Arial), so every
   button/chip/input on the reskin surfaces silently dropped out of Poppins —
   measured against the prototype via the Generate button's width. */
.cascade-list-surface button, .cascade-list-surface input,
.cascade-list-surface textarea, .cascade-list-surface select,
.cascade-builder-surface button, .cascade-builder-surface input,
.cascade-builder-surface textarea, .cascade-builder-surface select {
  font-family: inherit;
}

/* ---- Canvas surface: warm paper + 22px dot grid ---- */
.cascade-builder-surface #drawflow,
.cascade-builder-surface .builder-canvas {
  background-color: var(--cb-paper);
  background-size: 22px 22px;
  background-image: radial-gradient(#d8d5cc 1px, transparent 1px);
}

/* Nodes use the brand face too (their wrapper hardcodes Inter !important). */
.cascade-builder-surface .drawflow .drawflow-node {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif !important;
}

/* The legacy `#drawflow .drawflow .drawflow-node` rule paints the WRAPPER as a
   card (white, hairline, shadow, min-width 220px). On the reskin the card is
   the 208px .base-node inside, so the wider wrapper peeked out underneath it
   like a duplicate node. Make the wrapper fully invisible here. */
.cascade-builder-surface #drawflow .drawflow .drawflow-node,
.cascade-builder-surface #drawflow .drawflow .drawflow-node:hover {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

/* ---- Node card: white surface, hairline, 12px radius, soft node shadow ---- */
.cascade-builder-surface #drawflow .drawflow .base-node {
  background: #ffffff;
  border: 1px solid var(--cb-line) !important;
  border-radius: 12px;
  box-shadow: var(--cb-shadow-node);
}
.cascade-builder-surface .drawflow .drawflow-node.selected .base-node {
  border-color: var(--cb-brand) !important;
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.18), var(--cb-shadow-node);
}

/* START (Applicant Source): dark ink card, light text (prototype StartFace) */
.cascade-builder-surface #drawflow .drawflow-node.ApplicantSource .base-node {
  background: var(--cb-ink);
  border-color: var(--cb-ink) !important;
}
.cascade-builder-surface #drawflow .drawflow-node.ApplicantSource .base-node .text-gray-900 {
  color: #f3f2f3 !important;
}
.cascade-builder-surface #drawflow .drawflow-node.ApplicantSource .base-node .text-mirage-70,
.cascade-builder-surface #drawflow .drawflow-node.ApplicantSource .base-node .node-type-label {
  color: rgba(243, 242, 243, 0.6) !important;
}

/* Decision / If-Else: dashed border, solid brand when selected (DecisionFace) */
.cascade-builder-surface #drawflow .drawflow-node.IfElse .base-node,
.cascade-builder-surface #drawflow .drawflow-node.Condition .base-node,
.cascade-builder-surface #drawflow .drawflow-node.Decision .base-node {
  border-style: dashed !important;
  border-width: 2px !important;
  border-color: rgba(20, 17, 29, 0.2) !important;
}
.cascade-builder-surface #drawflow .drawflow-node.IfElse.selected .base-node,
.cascade-builder-surface #drawflow .drawflow-node.Condition.selected .base-node,
.cascade-builder-surface #drawflow .drawflow-node.Decision.selected .base-node {
  border-style: solid !important;
  border-color: var(--cb-brand) !important;
}

/* Node icons: products get a solid category-accent square + white glyph, the
   applicant a person glyph in a translucent square. The glyph is hidden by
   default (so the PM/TenantIQ builder keeps its vendor-initials/heroicon look)
   and swapped in only on this surface. */
.canvas-node-glyph { display: none; }
.cascade-builder-surface #drawflow .base-node .canvas-node-glyph {
  display: block; width: 20px; height: 20px; color: var(--node-glyph-color, #ffffff);
}
.cascade-builder-surface #drawflow .base-node:has(.canvas-node-glyph) .canvas-node-default { display: none; }
.cascade-builder-surface #drawflow .base-node:has(.canvas-node-glyph) .node-icon-container {
  background-color: var(--node-accent) !important;
}
/* Prototype applicant has no START badge. */
.cascade-builder-surface .node-start-badge { display: none; }

/* Decision face: drop the icon square (prototype DecisionFace is a vertical card
   with no icon) and add a git-fork glyph to the eyebrow. */
.cascade-builder-surface #drawflow .base-node[data-step-type="IfElse"] .node-icon-container,
.cascade-builder-surface #drawflow .base-node[data-step-type="Condition"] .node-icon-container,
.cascade-builder-surface #drawflow .base-node[data-step-type="Decision"] .node-icon-container {
  display: none;
}
.node-eyebrow-fork { display: none; }
.cascade-builder-surface .node-type-label .node-eyebrow-fork {
  display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px;
  /* Drawflow's vendored `.drawflow svg {position:absolute}` (meant for wire
     SVGs) would otherwise yank this inline icon over the label text. */
  position: static;
}
/* Mono condition chip on a configured decision (prototype DecisionFace). */
.cascade-builder-surface #drawflow .base-node[data-step-type="IfElse"] .canvas-node-cond,
.cascade-builder-surface #drawflow .base-node[data-step-type="Condition"] .canvas-node-cond,
.cascade-builder-surface #drawflow .base-node[data-step-type="Decision"] .canvas-node-cond {
  display: inline-flex; align-self: flex-start; margin-top: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--color-mirage-70); background: var(--cb-sand);
  border-radius: 6px; padding: 1px 7px;
}

/* ---- Test cases panel (prototype TestRunner, operator surface only) ---- */
.builder-test-panel {
  width: 340px; flex-shrink: 0; /* prototype: 340 */
  display: flex; flex-direction: column;
  background: #ffffff; border-left: 1px solid var(--cb-line);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
}
.test-panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--cb-line);
}
.test-panel-heading { display: flex; align-items: center; gap: 8px; }
.test-panel-flask { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-primary); }
.test-panel-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--cb-ink); }
.test-panel-sub { margin: 0; font-size: 11px; color: var(--color-mirage-60); }
/* Empty / not-covered message. Without an explicit size it inherits the
   builder surface's large base font and renders huge. */
.test-panel-empty { margin: 0; padding: 12px 16px; font-size: 12px; line-height: 1.5; color: var(--color-mirage-70); }
.test-panel-actions { display: flex; align-items: center; gap: 6px; }
.test-panel-runall { white-space: nowrap; }
.test-panel-runall {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border: none; border-radius: 4px;
  background: var(--cb-brand-900); color: #ffffff; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background 0.15s ease;
}
.test-panel-runall svg { width: 12px; height: 12px; }
.test-panel-runall:hover { background: #06040d; }
.test-panel-runall:disabled { opacity: 0.5; cursor: not-allowed; }

.test-panel-scroll { flex: 1; overflow-y: auto; }
.test-panel-list { list-style: none; margin: 0; padding: 0; }
/* Disclosure holding the subjects that can't run against this cascade, kept
   below the runnable ones so they don't dominate the panel. */
.test-panel-more { border-top: 1px solid var(--cb-line); }
.test-panel-more-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; font-size: 12px; font-weight: 500; color: var(--color-mirage-70);
}
.test-panel-more-summary::-webkit-details-marker { display: none; }
.test-panel-more-summary::before {
  content: ""; flex-shrink: 0;
  border-left: 4px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
.test-panel-more[open] > .test-panel-more-summary::before { transform: rotate(90deg); }
.test-panel-more-summary:hover { background: var(--cb-sand); }
.test-case { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--cb-line); }
.test-case:last-child { border-bottom: 0; }
.test-case-avatar {
  flex-shrink: 0; width: 32px; height: 32px; margin-top: 1px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cb-sand); color: var(--color-mirage-70); font-size: 11px; font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}
.test-case-avatar-approve { background: var(--cb-approve-soft); color: var(--cb-approve); }
.test-case-avatar-decline { background: var(--cb-reject-soft); color: var(--cb-reject); }
.test-case-avatar-review  { background: var(--cb-review-soft); color: var(--cb-review); }
.test-case-body { flex: 1; min-width: 0; }
.test-case-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.test-case-name { font-size: 14px; font-weight: 500; color: var(--cb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "No sandbox data: …" note on its own full-width line under the name, so the
   name never has to share the row with it. Muted, reads as an unavailable
   state rather than a peer of the Run action. */
.test-case-uncovered { margin: 2px 0 0; font-size: 12px; line-height: 16.5px; color: var(--color-mirage-60); }
.test-case-blurb { margin: 2px 0 0; font-size: 12px; line-height: 16.5px; color: var(--color-mirage-60); }
.test-case-reason { margin: 6px 0 0; font-size: 12px; line-height: 1.4; font-weight: 500; }
.test-case-reason-approve { color: var(--cb-approve); }
.test-case-reason-decline { color: var(--cb-reject); }
.test-case-reason-review  { color: var(--cb-review); }

/* Execute on the reskinned surface: the Motion green gradient sits outside
   the paper/ink palette, so it joins the neutral toolbar buttons — white,
   ink text, with the approve-green reserved for the play glyph. */
.cascade-builder-surface .btn-demo {
  background: #ffffff;
  border: 1px solid var(--cb-line);
  color: var(--cb-ink);
  font-weight: 500;
  box-shadow: none;
}
.cascade-builder-surface .btn-demo svg { color: var(--cb-approve); }
.cascade-builder-surface .btn-demo:hover {
  background: var(--cb-sand);
  border-color: var(--cb-line-strong);
}

/* "View report & output" link revealed under a test row after its run. */
.test-case-report-link {
  /* Prototype: quiet sand chip, not a link (rounded-md bg-sand px-2 py-1,
     11px/500 ink-soft, hover bg-line). */
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; padding: 4px 8px; border: 0; border-radius: 6px;
  background: var(--cb-sand); cursor: pointer;
  font-size: 11px; line-height: 15px; font-weight: 500; color: #393641;
  transition: background-color 0.12s ease;
}
.test-case-report-link svg { width: 12px; height: 12px; }
.test-case-report-link:hover { background: var(--cb-line); }

/* Test report modal — the prototype's synthetic consumer report. */
.cascade-builder-surface .test-report-dialog,
.cascade-list-surface .test-report-dialog,
.test-report-surface .test-report-dialog {
  display: flex; flex-direction: column;
  width: 896px; max-width: 94vw; max-height: 92vh;
  background: #ffffff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.test-report-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--cb-line); flex-shrink: 0;
}
.test-report-heading { display: flex; align-items: center; gap: 8px; color: var(--cb-ink); }
.test-report-heading svg { width: 18px; height: 18px; }
.test-report-title { margin: 0; font-size: 16px; font-weight: 600; }
.test-report-header-actions { display: flex; align-items: center; gap: 10px; }
.test-report-download {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px; background: var(--cb-ink); color: var(--cb-paper);
  font-size: 12px; font-weight: 500; text-decoration: none;
}
.test-report-download svg { width: 13px; height: 13px; }
.test-report-download:hover { opacity: 0.9; }
.test-report-record {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--cb-line, #e6e6e7);
  background: transparent; color: var(--cb-ink, #14111d);
  font-size: 12px; font-weight: 500; text-decoration: none;
}
.test-report-record svg { width: 13px; height: 13px; }
.test-report-record:hover { background: var(--cb-sand, #f8f7f8); }
/* display: inline-flex above would beat the UA [hidden] rule; the builder's
   dry runs and the Applicants page never fill this link. */
.test-report-record[hidden] { display: none; }
.test-report-close {
  /* Prototype: 32px round icon button */
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: #6b6870; cursor: pointer;
}
.test-report-close svg { width: 16px; height: 16px; }
.test-report-close:hover { background: var(--cb-sand); color: var(--cb-ink); }
.test-report-body { padding: 0; overflow-y: auto; }

/* Meta band (prototype: logo + stacked brand left, 3-line meta right) */
.test-report-meta {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 28px 32px 20px; border-bottom: 1px solid var(--cb-line);
}
.test-report-brand-block { display: flex; align-items: center; gap: 10px; }
.test-report-brand-block svg { flex-shrink: 0; }
.test-report-brand { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.2px; color: var(--cb-ink); }
.test-report-kind { margin: 0; font-size: 11px; line-height: 16px; color: #6b6870; }
.test-report-ids { text-align: right; font-size: 11px; line-height: 16px; color: #6b6870; }
.test-report-ids p { margin: 0; }
.test-report-meta-id { font-family: 'JetBrains Mono', ui-monospace, monospace; color: #393641; }

/* Subject + decision (prototype: display-face name, bordered outcome box) */
.test-report-subject-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding: 24px 32px 0;
}
.test-report-eyebrow {
  margin: 0; font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: 0.55px; text-transform: uppercase; color: var(--color-muted);
}
.test-report-name { margin: 0; font-size: 24px; line-height: 32px; font-weight: 400; color: var(--cb-ink); }
.test-report-blurb { margin: 0; font-size: 12px; line-height: 16px; color: #6b6870; }
.test-report-decision { border-radius: 8px; border: 1px solid transparent; padding: 10px 16px; text-align: right; }
.test-report-decision.decision-approve { background: var(--cb-approve-soft); border-color: var(--cb-approve-ring); }
.test-report-decision.decision-decline { background: var(--cb-reject-soft); border-color: var(--cb-reject-ring); }
.test-report-decision.decision-review  { background: var(--cb-review-soft); border-color: var(--cb-review-ring); }
.test-report-decision-eyebrow {
  margin: 0; font-size: 10px; line-height: 15px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase; color: #6b6870;
}
.test-report-decision-label {
  margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-size: 18px; line-height: 28px; font-weight: 600;
}
.test-report-decision-label svg { width: 18px; height: 18px; }
.decision-approve .test-report-decision-label { color: var(--cb-approve); }
.decision-decline .test-report-decision-label { color: var(--cb-reject); }
.decision-review  .test-report-decision-label { color: var(--cb-review); }
.test-report-decision-reason { margin: 2px 0 0; max-width: 240px; font-size: 11px; line-height: 16px; color: #393641; }

/* Product cards (prototype: bordered sections with icon header + vendor pill) */
.test-report-products { display: flex; flex-direction: column; gap: 20px; padding: 24px 32px; }
.test-report-product { border: 1px solid var(--cb-line); border-radius: 12px; }
.test-report-product-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--cb-line);
}
.test-report-product-icon {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; color: #ffffff; flex-shrink: 0;
}
.test-report-product-icon svg { width: 14px; height: 14px; }
.test-report-product-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--cb-ink); }
.test-report-product-vendor {
  font-size: 10px; line-height: 15px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px; background: var(--cb-sand); color: #6b6870;
}
.test-report-metrics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 24px; padding: 14px 16px;
}
@media (max-width: 900px) { .test-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.test-report-metric-label { margin: 0; font-size: 11px; line-height: 16px; color: #6b6870; }
.test-report-metric-value {
  margin: 0; display: flex; align-items: center; gap: 6px;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cb-ink);
  font-variant-numeric: tabular-nums;
}
.test-report-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.test-report-dot-ok   { background: var(--cb-approve); }
.test-report-dot-warn { background: var(--cb-review); }
.test-report-dot-bad  { background: var(--cb-reject); }

/* Detail block inside a product card */
.test-report-product-detail { border-top: 1px solid var(--cb-line); padding: 12px 16px; }
.test-report-detail-eyebrow {
  margin: 0 0 6px; font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: 0.55px; text-transform: uppercase; color: var(--color-muted);
}
.test-report-detail-list { list-style: none; margin: 0; padding: 0; }
.test-report-detail-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 16px; color: #6b6870; }
.test-report-detail-list li + li { margin-top: 6px; }
.test-report-detail-dot { width: 6px; height: 6px; border-radius: 999px; background: #9c9ba0; flex-shrink: 0; margin-top: 4px; }
.test-report-detail-strong { font-weight: 500; color: var(--cb-ink); }

.test-report-disclaimer {
  margin: 0; border-top: 1px solid var(--cb-line);
  padding: 16px 32px; font-size: 10px; line-height: 1.6; color: var(--color-muted);
}

/* ---- Adverse action tab (prototype: sandbox notice builder) ----
   Values below are prototype-measured (crs2-platform, Aug 2026). */
/* The controller toggles this modal's slots via the hidden attribute; the
   display-setting component classes below would otherwise override it. */
#test-report-overlay [hidden] { display: none !important; }

/* Header tabs (prototype: px-3 py-1.5 rounded-lg, 14px icons, ink-soft → bg-ink/paper) */
.test-report-heading { gap: 6px; }
.test-report-header { padding: 12px 20px; }
.test-report-header-actions { gap: 8px; }
.test-report-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 0; border-radius: 8px; background: transparent;
  font-size: 14px; font-weight: 500; line-height: 20px; color: #393641;
  cursor: pointer; transition: background-color 0.15s ease;
}
.test-report-tab svg { width: 14px; height: 14px; }
.test-report-tab:hover { background: var(--cb-sand); }
.test-report-tab.is-active { background: var(--cb-ink); color: var(--cb-paper); }
.test-report-tab.is-active:hover { background: var(--cb-ink); }
/* The ping + pill only nudge from the other tab; the active AA tab drops them. */
.test-report-tab.is-active .test-report-tab-ping,
.test-report-tab.is-active .test-report-aa-pill { display: none; }

/* Ping dot inside the AA tab (prototype: h-2 w-2, animate-ping, bg-review) */
.test-report-tab-ping { position: relative; display: flex; width: 8px; height: 8px; margin-left: 2px; }
.test-report-tab-ping-pulse {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--cb-review); opacity: 0.6;
  animation: test-aa-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.test-report-tab-ping-dot { position: relative; width: 8px; height: 8px; border-radius: 999px; background: var(--cb-review); }
@keyframes test-aa-ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* Pill lives INSIDE the tab button (prototype: px-1.5 py-0.5, 10px semibold) */
.test-report-aa-pill {
  font-size: 10px; font-weight: 600; line-height: 15px;
  padding: 2px 6px; border-radius: 999px;
  background: var(--cb-review-soft); color: var(--cb-review);
}

/* Header Download PDF is a ghost chip (prototype: border-line bg-surface text-xs ink-soft) */
.test-report-download {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--cb-line); border-radius: 8px;
  background: #ffffff; color: #393641;
  font-size: 12px; font-weight: 500; text-decoration: none;
  transition: background-color 0.15s ease;
}
.test-report-download svg { width: 14px; height: 14px; }
.test-report-download:hover { background: rgba(248, 247, 248, 0.6); }

/* AA tab body: banner on top, then 290px rail | sand preview (prototype: h-[78vh]) */
.test-aa-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* The 78vh belongs to the builder (banner + rail/preview); the sent pane hugs. */
/* Keyed off a class, NOT the Stimulus target attribute: two surfaces render
   this partial through a gsub that rewrites "test-runner" to their own
   controller name, which silently stopped an attribute selector from matching
   (the rail's scroller never engaged and .test-aa-body clipped the overflow). */
.test-aa-body > .test-aa-content { display: flex; flex-direction: column; height: 78vh; min-height: 0; }

.test-aa-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 24px; border-bottom: 1px solid var(--cb-line); flex-shrink: 0;
}
.test-aa-banner svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--cb-review); margin-top: 2px; }
.test-aa-banner p { margin: 0; font-size: 12px; line-height: 1.625; color: #393641; }
.test-aa-banner-strong { font-weight: 500; color: var(--cb-ink); }

/* Row pinned to the available height (minmax(0,1fr)) so each column is its
   own scroll region even if the 78vh rule above ever fails to apply —
   otherwise the row sizes to content, nothing scrolls, and .test-aa-body's
   overflow:hidden clips both panes (same hardening as .aa-modal-grid). */
.test-aa-layout { display: grid; grid-template-columns: 290px 1fr; grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; }

/* Left rail (prototype: p-5, groups space-y-6, options space-y-1.5) */
.test-aa-rail { padding: 20px; border-right: 1px solid var(--cb-line); overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.test-aa-group + .test-aa-group { margin-top: 24px; }
.test-aa-group-label {
  margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-muted);
}
.test-aa-option { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.test-aa-option + .test-aa-option { margin-top: 6px; }
.test-aa-option input { position: absolute; opacity: 0; pointer-events: none; }
.test-aa-box {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
  border: 1px solid var(--cb-line-strong); background: transparent;
}
.test-aa-box-radio { border-radius: 999px; }
.test-aa-option input:checked + .test-aa-box-radio { border-color: var(--color-primary); }
.test-aa-option input:checked + .test-aa-box-radio::after {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--color-primary);
}
.test-aa-box-check { border-radius: 4px; }
.test-aa-option input:checked + .test-aa-box-check {
  border-color: var(--color-primary); background: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px 10px; background-position: center; background-repeat: no-repeat;
}
.test-aa-option-label { font-size: 13px; line-height: 1.375; color: #6b6870; }
.test-aa-option input:checked ~ .test-aa-option-label { font-weight: 500; color: var(--cb-ink); }

/* Right: preview on a sand wash, doc card centered (prototype: bg-sand/40 p-4, max-w-2xl) */
.test-aa-doc-scroll { overflow-y: auto; min-height: 0; overscroll-behavior: contain; background: rgba(248, 247, 248, 0.4); padding: 16px; }

@media (max-width: 900px) {
  /* Stacked layout: one shared scroll region reads better than two trapped ones. */
  .test-aa-layout { display: block; overflow-y: auto; }
  .test-aa-rail, .test-aa-doc-scroll { overflow-y: visible; min-height: auto; }
  .test-aa-rail { border-right: none; border-bottom: 1px solid var(--cb-line); }
}
.test-aa-doc {
  max-width: 672px; margin: 0 auto;
  background: #ffffff; border: 1px solid var(--cb-line); border-radius: 12px;
  box-shadow: var(--cb-shadow-node);
  padding: 28px 32px; font-size: 12.5px; line-height: 1.625; color: var(--cb-ink);
}
.test-aa-doc p { margin: 0; }
.test-aa-doc-company { margin-top: 12px !important; font-weight: 600; }
.test-aa-doc-strong { font-weight: 600; }
.test-aa-doc-muted { color: #6b6870; }
.test-aa-doc-eyebrow {
  margin-top: 16px !important; font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-muted);
}
.test-aa-doc-title {
  margin: 24px 0 0; font-size: 18px; font-weight: 400; letter-spacing: -0.45px; text-align: center;
}
.test-aa-doc-section { margin-top: 20px; }
.test-aa-doc-heading {
  margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--cb-line);
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #393641;
}
.test-aa-doc-item { display: flex; align-items: flex-start; gap: 6px; }
.test-aa-doc-tick {
  display: flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; flex-shrink: 0; margin-top: 3px;
  border: 1px solid var(--cb-line-strong); border-radius: 3px; background: transparent; color: #ffffff;
}
.test-aa-doc-tick svg { width: 8px; height: 8px; visibility: hidden; }
.test-aa-doc-item[data-checked] .test-aa-doc-tick { background: var(--cb-ink); border-color: var(--cb-ink); }
.test-aa-doc-item[data-checked] .test-aa-doc-tick svg { visibility: visible; }
.test-aa-doc-item-label { font-size: 11.5px; line-height: 1.375; color: #6b6870; }
.test-aa-doc-item[data-checked] .test-aa-doc-item-label { font-weight: 500; color: var(--cb-ink); }
.test-aa-doc-list-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 4px; }
.test-aa-doc-text { margin-top: 20px !important; font-size: 11px; line-height: 1.625; color: #393641; }
.test-aa-doc-heading + .test-aa-doc-text { margin-top: 0 !important; }
.test-aa-doc-text:last-child {
  margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--cb-line);
  font-size: 9.5px; color: var(--color-muted);
}
.test-aa-doc-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.test-aa-doc-blocks > div { border: 1px solid var(--cb-line); border-radius: 8px; padding: 10px; }
.test-aa-doc-blocks .test-aa-doc-strong { font-size: 11px; }
.test-aa-doc-blocks .test-aa-doc-muted { font-size: 10.5px; }

/* Footer (prototype: px-6 py-3.5, chips 12px, actions h-8 13px) */
.test-aa-footer { border-top: 1px solid var(--cb-line); padding: 14px 24px; flex-shrink: 0; }
.test-aa-footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.test-aa-deliver-label { font-size: 12px; font-weight: 500; color: #393641; }
.test-aa-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--cb-line); border-radius: 8px;
  background: transparent; font-size: 12px; font-weight: 500; line-height: 16px;
  color: #6b6870; cursor: pointer; transition: background-color 0.15s ease;
}
.test-aa-chip:hover { background: rgba(248, 247, 248, 0.6); }
.test-aa-chip-icon { width: 14px; height: 14px; }
.test-aa-chip-check { width: 12px; height: 12px; display: none; }
.test-aa-chip.is-on { background: var(--color-blue-05); border-color: var(--color-blue-70); color: var(--color-primary-dark); }
.test-aa-chip.is-on:hover { background: var(--color-blue-05); }
/* Sales-gated Mail: reads as present but unavailable; the wrap's tooltip
   (shared with the execution page's builder) says whom to contact. */
.test-aa-chip-locked { cursor: not-allowed; color: #6b6870; border-style: dashed; }
.test-aa-chip-locked:hover { background: transparent; }
.test-aa-chip.is-on .test-aa-chip-check { display: inline; }
/* Sales-gated channel chip (mail): locked, never selectable; the wrapping
   .aa-chip-locked-wrap carries the mailto popover (shared with the operator
   AA-draft modal). */
.test-aa-chip-locked { color: var(--color-disabled, #C4C6C8); cursor: not-allowed; }
.test-aa-chip-locked:hover { background: transparent; }
/* Always-on channel chip (digital): a statement, not a control. */
.test-aa-chip-static { cursor: default; }
.test-aa-chip-static:hover { background: var(--color-blue-05); }
.test-aa-footer-spacer { flex: 1; }
.test-aa-download-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border: 1px solid var(--cb-line); border-radius: 4px;
  background: #ffffff; color: var(--cb-ink); font-size: 13px; font-weight: 500;
  text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.test-aa-download-ghost svg { width: 16px; height: 16px; margin-left: -2px; }
.test-aa-download-ghost:hover { background: var(--cb-sand); border-color: var(--cb-line-strong); }
.test-aa-send {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border: 0; border-radius: 4px;
  background: var(--cb-brand-900); color: #ffffff; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background-color 0.15s ease;
}
.test-aa-send svg { width: 16px; height: 16px; margin-left: -2px; }
.test-aa-send:hover { background: #06040d; }

/* Sent success state — replaces banner + builder (prototype: px-8 py-14 centered) */
.test-aa-sent {
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 32px; text-align: center; overflow-y: auto;
}
.test-aa-sent-badge {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 999px; background: var(--cb-approve-soft);
}
.test-aa-sent-badge svg { width: 28px; height: 28px; color: var(--cb-approve); }
.test-aa-sent-title { margin: 20px 0 0; font-size: 24px; font-weight: 400; color: var(--cb-ink); }
.test-aa-sent-line { margin: 8px 0 0; max-width: 448px; font-size: 14px; line-height: 1.5; color: #6b6870; }
.test-aa-sent-line strong { font-weight: 500; color: var(--cb-ink); }
.test-aa-sent-file {
  display: flex; align-items: center; gap: 8px; margin-top: 24px;
  border: 1px solid var(--cb-line); border-radius: 12px; background: rgba(248, 247, 248, 0.4);
  padding: 10px 16px; font-size: 12px; color: #6b6870;
}
.test-aa-sent-file svg { width: 14px; height: 14px; flex-shrink: 0; }
.test-aa-sent-download {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  height: 36px; padding: 0 16px; border: 1px solid var(--cb-line); border-radius: 4px;
  background: #ffffff; color: var(--cb-ink); font-size: 14px; font-weight: 500;
  text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.test-aa-sent-download svg { width: 16px; height: 16px; margin-left: -2px; }
.test-aa-sent-download:hover { background: var(--cb-sand); border-color: var(--cb-line-strong); }

/* NODE DETAILS swaps in for the Test cases panel (prototype behaviour) —
   without this both right panels render and the Test panel gets squeezed
   into the middle of the canvas. */
.cascade-builder-surface:has(.builder-right-sidebar:not(.collapsed)) .builder-test-panel {
  display: none;
}

/* Product node face: vendor subtitle under the name (prototype "Experian"). */
.cascade-builder-surface .canvas-node-vendor {
  font-size: 11px;
  line-height: 16.5px;
  color: var(--color-mirage-60);
}

/* Node faces, measured against the prototype: content-driven width (the
   partial inlines min-width 240, prototype cards run 176-208), 14/600/20
   titles. */
.cascade-builder-surface .base-node { min-width: 172px !important; }
.cascade-builder-surface .base-node span.font-medium { font-weight: 600; line-height: 20px; }

/* Use in API — prototype ghost variant: smaller, transparent, r8. */
.builder-header-btn-ghost {
  height: auto; padding: 8px 10px; gap: 4px;
  border-radius: 8px; background: transparent;
  font-size: 12px; line-height: 16px; color: var(--color-mirage-70);
}

/* Canvas caption (prototype): floating hint over the dot grid. */
.builder-canvas-caption {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 5; pointer-events: none;
  font-size: 12px; line-height: 16px; color: var(--color-mirage-60);
  letter-spacing: 0.16px; white-space: nowrap;
}

/* Test-run canvas trace: the walked path lights up (marching-ants edges via
   .connection--flowing), the active node glows, everything off-path dims
   while the trace plays out. */
.cascade-builder-surface .drawflow-node { transition: opacity 0.2s ease; }
.cascade-builder-surface .drawflow-node.test-trace-dim { opacity: 0.35; }
.cascade-builder-surface .drawflow-node.test-trace-active { filter: drop-shadow(0 0 7px rgba(102, 56, 204, 0.55)); }
.test-case-run {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 4px 8px; border: 1px solid var(--cb-line); border-radius: 6px; line-height: 16px;
  background: #ffffff; font-size: 12px; font-weight: 500; color: var(--color-mirage-70); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.test-case-run svg { width: 11px; height: 11px; }
.test-case-run:hover { border-color: var(--cb-line-strong); background: var(--cb-sand); }
.test-case-running { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--color-primary); }
@keyframes test-case-spin { to { transform: rotate(360deg); } }
.test-case-spinner { width: 12px; height: 12px; border-radius: 999px; border: 1.5px solid var(--cb-line); border-top-color: var(--color-primary); animation: test-case-spin 0.7s linear infinite; }
.test-outcome { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.test-outcome svg { width: 14px; height: 14px; }
.test-outcome-approve { color: var(--cb-approve); }
.test-outcome-decline { color: var(--cb-reject); }
.test-outcome-review  { color: var(--cb-review); }

/* ---- Editor header chrome (cascade-id chip, Use in API, Add node) ---- */
.cascade-builder-surface .builder-workflow-info {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-left: 0;
  border-left: none;
}
.builder-cascade-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-primary-dark); line-height: 1.3;
}
.builder-cascade-id { /* prototype: translucent sand, 4px right pad (the copy button pads itself) */
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 10px; border: 1px solid var(--cb-line); border-radius: 8px; background: rgba(248, 247, 248, 0.4);
}
.builder-cascade-id-key { font-size: 11px; color: var(--color-mirage-60); }
.builder-cascade-id-val { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 16px; color: var(--cb-ink); }
.builder-cascade-id-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: none; background: none; border-radius: 5px;
  color: var(--color-mirage-60); cursor: pointer;
}
.builder-cascade-id-copy svg { width: 13px; height: 13px; }
.builder-cascade-id-copy:hover { background: var(--cb-line); color: var(--cb-ink); }
.builder-cascade-id-copied { font-size: 11px; font-weight: 600; color: var(--cb-approve); }
.builder-cascade-id-copied:empty { display: none; }

.builder-header-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border: 1px solid var(--cb-line); border-radius: 4px;
  background: #ffffff; font-size: 13px; font-weight: 500; line-height: 19.5px; color: var(--cb-ink); cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.builder-header-btn svg { width: 14px; height: 14px; }
.builder-header-btn:hover { border-color: var(--cb-line-strong); background: var(--cb-sand); color: var(--cb-ink); }

/* Warning badge: amber → review olive to match the palette */
.cascade-builder-surface .node-warning-badge {
  background: linear-gradient(135deg, #a7a800 0%, var(--cb-review) 100%);
}

/* ---- Connectors: neutral warm-gray wires (branch labels are a Drawflow
        limitation — deferred; color parity only for now) ---- */
.cascade-builder-surface .drawflow .connection .main-path {
  stroke: var(--cb-line-strong);
  stroke-width: 2px;
}
.cascade-builder-surface .drawflow .connection .main-path:hover {
  stroke: var(--cb-brand);
}

/* ---- Raw-hex holdouts that clash with purple (blue rings/shadows) ---- */
.cascade-builder-surface .builder-search-input:focus {
  border-color: var(--cb-brand);
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.14);
}
.cascade-builder-surface .builder-node-item:hover {
  box-shadow: 0 2px 8px rgba(0, 41, 255, 0.10);
}
.cascade-builder-surface .builder-node-item:active {
  box-shadow: 0 2px 8px rgba(0, 41, 255, 0.16);
}
/* Selected canvas node outline (overrides .selected .base-node blue at 1638) */
.cascade-builder-surface .drawflow .drawflow-node.selected .custom-node {
  border-color: var(--cb-brand) !important;
}

/* ---- "Browse all products" sidebar entry point ---- */
.cascade-builder-surface .builder-browse-all-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--cb-brand-900);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}
.cascade-builder-surface .builder-browse-all-btn:hover { background: #06040d; }
.cascade-builder-surface .builder-browse-all-btn:active { transform: scale(0.99); }
.cascade-builder-surface .builder-browse-all-label { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Full product catalog modal ---- */
.cascade-builder-surface .product-catalog-dialog {
  display: flex;
  flex-direction: column;
  width: 900px;
  max-width: 94vw;
  height: 88vh;
  max-height: 860px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.cascade-builder-surface .product-catalog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--cb-line);
}
.cascade-builder-surface .product-catalog-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--cb-ink); }
.cascade-builder-surface .product-catalog-subtitle { margin: 2px 0 0; font-size: 13px; color: var(--color-mirage-60); }
.cascade-builder-surface .product-catalog-close-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: none; background: transparent; border-radius: 8px;
  color: var(--color-mirage-30); cursor: pointer;
}
.cascade-builder-surface .product-catalog-close-btn:hover { background: var(--cb-sand); color: var(--cb-ink); }

.cascade-builder-surface .product-catalog-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--cb-line);
}
.cascade-builder-surface .product-catalog-search { position: relative; }
.cascade-builder-surface .product-catalog-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--color-mirage-30); pointer-events: none;
}
.cascade-builder-surface .product-catalog-search-input {
  /* border-box: the global reset misses inputs, and content-box + 100% width
     overflows the dialog — the autofocus then scrolls the whole modal 24px
     left, eating the left padding. */
  box-sizing: border-box;
  width: 100%; height: 40px; padding: 0 12px 0 36px;
  background: var(--cb-sand); border: 1px solid transparent; border-radius: 10px;
  font-size: 14px; color: var(--cb-ink); outline: none;
}
.cascade-builder-surface .product-catalog-search-input::placeholder { color: var(--color-mirage-30); }
.cascade-builder-surface .product-catalog-search-input:focus {
  background: #ffffff; border-color: var(--cb-brand);
  box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.14);
}
.cascade-builder-surface .product-catalog-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cascade-builder-surface .catalog-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: #ffffff; border: 1px solid var(--cb-line);
  font-size: 12px; font-weight: 500; color: var(--color-mirage-70);
  cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.cascade-builder-surface .catalog-chip:hover { border-color: var(--cb-line-strong); color: var(--cb-ink); }
.cascade-builder-surface .catalog-chip-active { background: var(--color-blue-05); border-color: var(--cb-brand); color: var(--color-primary-dark); }
.cascade-builder-surface .catalog-chip-count { font-size: 11px; opacity: 0.7; }

.cascade-builder-surface .product-catalog-body { flex: 1; overflow-y: auto; padding: 16px 24px 24px; }
.cascade-builder-surface .catalog-section { margin-bottom: 20px; }
.cascade-builder-surface .catalog-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cascade-builder-surface .catalog-section-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-mirage-60);
}
.cascade-builder-surface .catalog-section-count { font-size: 11px; color: var(--color-mirage-30); }
.cascade-builder-surface .catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cascade-builder-surface .catalog-card {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; background: #ffffff;
  border: 1px solid var(--cb-line); border-radius: 12px;
  cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cascade-builder-surface .catalog-card:hover { border-color: var(--cb-brand); box-shadow: 0 2px 10px rgba(0, 41, 255, 0.10); }
.cascade-builder-surface .catalog-card:focus-visible { outline: 2px solid var(--cb-brand); outline-offset: 2px; }
.cascade-builder-surface .catalog-card-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.cascade-builder-surface .catalog-card-icon svg { width: 20px; height: 20px; color: #ffffff; }
.cascade-builder-surface .catalog-card-initials { font-size: 11px; font-weight: 700; color: #374151; text-transform: uppercase; }
.cascade-builder-surface .catalog-card-body { flex: 1; min-width: 0; }
.cascade-builder-surface .catalog-card-name { font-size: 13px; font-weight: 600; color: var(--cb-ink); }
.cascade-builder-surface .catalog-card-desc {
  margin-top: 2px; font-size: 11px; color: var(--color-mirage-60);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cascade-builder-surface .catalog-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cascade-builder-surface .catalog-card-price { font-size: 12px; font-weight: 600; color: var(--cb-approve); }
.cascade-builder-surface .catalog-card-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.cascade-builder-surface .catalog-card-badge-api { color: var(--cb-approve); background: var(--cb-approve-soft); }
.cascade-builder-surface .catalog-card-add {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cb-brand); background: var(--color-blue-05);
  opacity: 0; transition: opacity 0.15s ease;
}
.cascade-builder-surface .catalog-card:hover .catalog-card-add { opacity: 1; }
.cascade-builder-surface .catalog-empty,
.cascade-builder-surface .catalog-loading {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 48px 0; text-align: center; color: var(--color-mirage-60);
}
@media (max-width: 680px) {
  .cascade-builder-surface .catalog-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CASCADES LIST — prototype "Your cascades" card grid (operator apex only)
   Scoped to .cascade-list-surface; PM host keeps the dense TenantIQ table.
   ========================================================================== */
.cascade-list-surface {
  min-height: 100%;
  /* White like every other operator page (the prototype's grey paper reads
     as a different app); the builder canvas keeps its own paper + dot grid. */
  background: var(--color-white, #FFFFFF);
}
.cascade-list-wrap {
  max-width: 1024px;
  margin: 0 auto;
  padding: 32px 24px;
}
@media (min-width: 640px) {
  .cascade-list-wrap { padding: 32px 40px; }
}

.cascade-list-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px;
}
.cascade-list-eyebrow {
  margin: 0;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-primary-dark);
}
.cascade-list-title {
  margin: 6px 0 0;
  font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em;
  color: var(--cb-ink);
}
.cascade-list-subtitle { margin: 6px 0 0; font-size: 15px; color: var(--color-mirage-60); }

/* "New cascade" / "Save & Activate" → dark prototype primary button */
.cascade-list-surface .btn-primary,
.cascade-builder-surface .btn-primary {
  background: var(--cb-brand-900) !important;
  border-color: var(--cb-brand-900) !important;
  color: #ffffff !important;
  border-radius: 8px;
}
.cascade-list-surface .btn-primary:hover,
.cascade-builder-surface .btn-primary:hover { background: #06040d !important; }

/* "Save as Draft" → neutral prototype secondary (white, ink text, line border) */
.cascade-builder-surface .btn-secondary {
  border-color: var(--cb-line) !important;
  color: var(--cb-ink) !important;
  border-radius: 8px;
}
.cascade-builder-surface .btn-secondary:hover {
  background: var(--cb-sand) !important;
  border-color: var(--cb-line-strong) !important;
}

/* Grid */
.cascade-grid {
  margin-top: 28px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
@media (min-width: 640px) {
  .cascade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Card */
.cascade-card {
  position: relative; /* containing block for the stretched Open link below */
  display: flex; flex-direction: column;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--cb-line); border-radius: 16px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.cascade-card:hover { box-shadow: 0 1px 2px rgba(8, 4, 17, 0.04), 0 4px 12px -4px rgba(8, 4, 17, 0.08); }
.cascade-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.cascade-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--cb-ink); color: var(--cb-paper);
}
.cascade-card-icon svg { width: 20px; height: 20px; }
.cascade-card-top-right { display: flex; align-items: center; gap: 8px; }

.cascade-badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
/* CONTRAST-SWEEP (2026-09-11): 12px/600 is normal text for WCAG, and
   --cb-approve (#12843a) on --cb-approve-soft (#e5f3ee) measured 4.19:1 in the
   browser. Only the badge INK moves, onto --color-token-green-ink — which this
   surface already redefines to #0F7333 for exactly this reason (see the note at
   the .cascade-builder-surface / .cascade-list-surface / .test-report-surface
   token block: "#12843a ... landed at 4.48:1 on sand and 4.19:1 on the green
   chip"). Measured after: rgb(15,115,51) on rgb(229,243,238) = 5.22:1. Outside
   those scopes the token falls back to the global #067A4E = 4.71:1, so the
   badge clears AA either way. Darkening the --cb-approve token itself would
   repaint 14 other usages on that surface (dots, icons, rings, price text) that
   carry no contrast requirement. */
.cascade-badge-active { background: var(--cb-approve-soft); color: var(--color-token-green-ink); }
.cascade-badge-draft { background: var(--cb-sand); color: var(--color-mirage-60); border: 1px solid var(--cb-line); }

/* Delete (trash) — top-right of the card */
.cascade-card-delete {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: none; background: none; border-radius: 8px;
  color: var(--color-mirage-30); cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.cascade-card-delete svg { width: 16px; height: 16px; }
.cascade-card-delete:hover { color: var(--cb-reject); background: var(--cb-reject-soft); }

.cascade-card-name-link { display: block; margin-top: 14px; text-decoration: none; }
.cascade-card-name {
  margin: 0; font-size: 18px; font-weight: 600; color: var(--cb-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cascade-card-name-link:hover .cascade-card-name { color: var(--color-primary-dark); }
.cascade-card-usecase { margin: 4px 0 0; font-size: 13px; color: var(--color-mirage-60); }

.cascade-card-meta {
  margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-size: 12px; color: var(--color-mirage-60);
}
.cascade-card-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.cascade-card-meta-item svg { width: 14px; height: 14px; }

.cascade-card-code {
  display: block; margin-top: 12px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px; color: var(--color-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cascade-card-footer {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cb-line);
  /* flex-end keeps "Open →" on the right now that it is the footer's only child */
  display: flex; align-items: center; justify-content: flex-end;
}
.cascade-card-open {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 500; color: var(--color-primary-dark); text-decoration: none;
}
/* Stretched link: the whole card opens the cascade (real <a> semantics —
   cmd-click, middle-click, copy-link all work). Interactive/selectable
   children are lifted above the overlay right below. */
.cascade-card .cascade-card-open::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.cascade-card-delete, .cascade-card-name-link, .cascade-card-code, .cascade-card-toggle { position: relative; z-index: 1; }
.cascade-card-open svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.cascade-card:hover .cascade-card-open svg { transform: translateX(2px); }

.cascade-card-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border: none; cursor: pointer; }
.cascade-card-toggle-label { font-size: 12px; font-weight: 500; color: var(--color-mirage-60); }
.cascade-card-toggle-note { font-size: 12px; color: var(--color-muted); }

/* Empty state (prototype) */
/* Token fallbacks so this empty-state family renders identically OUTSIDE the
   cascade surfaces too (Single Reports reuses it; --cb-* only exists on
   .cascade-list/builder-surface). */
.cascade-empty {
  margin-top: 28px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 64px 24px;
  border: 1px dashed var(--cb-line-strong, #cecdcf); border-radius: 24px;
  background: rgba(255, 255, 255, 0.6);
}
.cascade-empty-icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--cb-ink, #14111d); color: var(--cb-paper, #f3f2f3);
}
.cascade-empty-icon svg { width: 28px; height: 28px; }
.cascade-empty-title { margin: 20px 0 0; font-size: 24px; font-weight: 600; color: var(--cb-ink, #14111d); }
.cascade-empty-text { margin: 8px auto 0; max-width: 28rem; color: var(--color-mirage-60); }
.cascade-empty-text code { padding: 1px 5px; border-radius: 4px; background: var(--cb-sand, #f8f7f8); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
.cascade-empty-cta { margin-top: 24px; }

.cascade-list-pagination { margin-top: 24px; }

/* Full-bleed: the paper surface fills the content card instead of floating
   inside its 24px padding (removes the blank margin around the cascades). */
.page-content-inner:has(.cascade-list-surface) { padding: 0; }

/* Toolbar: search + status filter + sort */
.cascade-toolbar {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.cascade-toolbar-search { position: relative; flex: 1 1 260px; min-width: 200px; }
.cascade-toolbar-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--color-mirage-30); pointer-events: none;
}
.cascade-search-input {
  width: 100%; height: 40px; padding: 0 36px;
  background: #ffffff; border: 1px solid var(--cb-line); border-radius: 10px;
  font-size: 14px; color: var(--cb-ink); outline: none;
}
.cascade-search-input::placeholder { color: var(--color-mirage-30); }
.cascade-search-input:focus { border-color: var(--cb-brand); box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.14); }
.cascade-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: none; background: none;
  color: var(--color-mirage-30); border-radius: 6px; cursor: pointer;
}
.cascade-search-clear:hover { background: var(--cb-sand); color: var(--cb-ink); }
.cascade-search-clear.hidden { display: none; }
/* Higher specificity than the global `select:not(.btn-demo-select)` reset
   (0,1,1), which otherwise forces width:100%/display:block and stacks them. */
.cascade-toolbar .cascade-filter-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
  height: 40px;
  padding: 0 30px 0 12px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--cb-line);
  border-radius: 10px;
  font-size: 13px;
  color: var(--color-mirage-70);
  cursor: pointer;
}
.cascade-toolbar .cascade-filter-select:focus {
  outline: none; border-color: var(--cb-brand); box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.14);
}
.search-loading .cascade-search-input { opacity: 0.7; }

/* Use-case tag */
.cascade-usecase-tag {
  display: inline-flex; align-items: center; margin-top: 8px;
  padding: 2px 10px; border-radius: 999px;
  background: var(--color-blue-05); color: var(--color-primary-dark);
  font-size: 11px; font-weight: 600;
}

/* Product chips */
.cascade-card-products { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.cascade-chip {
  display: inline-flex; align-items: center; max-width: 170px;
  padding: 3px 9px; border-radius: 8px;
  background: var(--cb-sand); border: 1px solid var(--cb-line);
  font-size: 11px; font-weight: 500; color: var(--color-mirage-70);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cascade-chip-more { background: transparent; border-color: transparent; color: var(--color-mirage-60); }
.cascade-chip-empty { background: transparent; border-style: dashed; color: var(--color-mirage-30); }

/* "Needs setup" badge (0 products) */
.cascade-badge-setup { background: var(--cb-review-soft); color: var(--cb-review); border: 1px solid var(--cb-review-ring); }

/* Copyable cascade_id */
.cascade-card-code-row { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.cascade-card-code-row .cascade-card-code { margin-top: 0; min-width: 0; flex: 0 1 auto; }
.cascade-card-copy {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 5px; border: none; background: none;
  color: var(--color-mirage-30); border-radius: 6px; cursor: pointer;
}
.cascade-card-copy:hover { color: var(--cb-brand); background: var(--color-blue-05); }
.cascade-card-copy-icon { width: 13px; height: 13px; }
.cascade-card-copied { font-size: 11px; font-weight: 600; color: var(--cb-approve); }
.cascade-card-copied:empty { display: none; }

/* Filtered empty state (small variant) */
.cascade-empty-sm { padding: 48px 24px; }
.cascade-empty-icon-sm { width: 44px; height: 44px; border-radius: 12px; }
.cascade-empty-icon-sm svg { width: 22px; height: 22px; }
.cascade-empty-title-sm { font-size: 18px; }
.cascade-empty-clear { margin-top: 16px; }


/* Self-hosted Poppins (OFL) — the reskin's brand face. Registered locally so it
   renders correctly even when Google Fonts is blocked (privacy/ad-block
   extensions block fonts.gstatic.com) or unreachable. Files in /public/fonts. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/poppins-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/poppins-700.woff2) format('woff2'); }

/* DASH-DEF-10 — self-hosted Inter and JetBrains Mono (both OFL). First paint
   used to depend on two third-party hosts: rsms.me for Inter and Google for
   JetBrains Mono, each a stylesheet <link> in <head>, so both were
   render-blocking AND leaked a request per visitor to a third party. Poppins
   was already local; these finish the job.

   Both are VARIABLE fonts, so one file covers the whole weight range and
   replaces what would otherwise be four static faces each. Inter is registered
   under the plain family name the app already asks for, so no font-family
   declaration had to change.

   Byte-neutral against what shipped before: rsms.me serves this same variable
   file to any browser supporting font-variation-settings, which is all of them
   now. It is not subsetted — doing that needs fonttools, which is not in this
   toolchain, and would make the vendored file a derived artifact. If first
   paint needs more later:
     pyftsubset inter-variable.woff2 --unicodes=U+0000-00FF,U+0131,U+0152-0153 \
       --flavor=woff2 --output-file=inter-latin.woff2   (343KB -> ~40KB)

   Italic is not vendored, matching the existing Poppins treatment — browsers
   synthesise an oblique, which is what they already did for Poppins. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-variable.woff2) format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-variable-latin.woff2) format('woff2');
}

/* Space Grotesk — the landing page's display face (every lp-* headline asks
   for it). Its Google Fonts <link> lived in a content_for :head no layout
   ever yielded, so the marketing page silently fell back to sans-serif;
   vendored per DASH-DEF-10 (latin subset, same treatment as JetBrains Mono)
   instead of resurrecting the third-party stylesheet. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-variable-latin.woff2) format('woff2');
}

/* ==========================================================================
   Adverse-action document facsimile — surface-agnostic (shared by the
   operator/Motion and PM/TenantIQ AA builders). HTML mirror of the notice
   PDF (Prawn renders Helvetica on white). Deliberately NOT brand chrome:
   this is a document artifact and must visually match the applicant's PDF,
   so it uses hardcoded grayscale, not design-system tokens. Rendered by
   app/views/adverse_actions/_notice_facsimile.html.erb. Lives here (not in
   either brand stylesheet) because application.css loads on both layouts.
   ========================================================================== */
.aa-doc {
  background: #FFFFFF; color: #1F1F1F;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 12.5px; line-height: 1.5;
  border: 1px solid #D4CDC0; border-radius: 6px;
  box-shadow: 0 4px 16px rgba(26, 24, 20, 0.10);
  padding: 32px 36px;
}
.aa-doc-title {
  text-align: center; font-size: 16px; font-weight: 700;
  letter-spacing: 0.01em; margin: 18px 0 2px;
}
.aa-doc-subtitle { text-align: center; font-style: italic; font-size: 10.5px; color: #555555; margin-bottom: 4px; }
.aa-doc-banner {
  border-top: 1px solid #444444; border-bottom: 1px solid #444444;
  text-align: center; font-weight: 700; font-size: 12px;
  padding: 4px 0; margin: 10px 0 12px;
}
.aa-doc-ecoa { border-top: 1px solid #444444; margin-top: 12px; padding-top: 8px; }
.aa-doc-heading {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #333333;
  border-bottom: 1px solid #B5B5B5; padding-bottom: 3px;
  margin: 16px 0 7px;
}
.aa-doc-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #777777; }
.aa-doc-check { display: flex; align-items: baseline; gap: 8px; margin: 3px 0; color: #999999; transition: color 0.18s ease, font-weight 0.18s ease; }
.aa-doc-check.is-checked { color: #1F1F1F; font-weight: 700; }
.aa-doc-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; flex-shrink: 0;
  border: 1.5px solid #555555; border-radius: 2px;
  font-size: 10px; font-weight: 700; line-height: 1; color: #1F1F1F;
  transform: translateY(2px);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.aa-doc-footnote {
  font-size: 10.5px; font-style: italic; color: #666666;
  text-align: center; margin-top: 12px;
  border-top: 1px solid #444444; padding-top: 6px;
}

/* Body of the document. Every rule below replaced a style attribute on
   _notice_facsimile: the values mirror AdverseActionCheckboxPdf's metrics and
   are carried over unchanged. Note .aa-doc-headline is the notice's own title
   line (13.5px, no margin) — distinct from the larger .aa-doc-title above. */
.aa-doc-headline { text-align: center; font-weight: 700; font-size: 13.5px; }
.aa-doc-meta { font-size: 12px; border-collapse: collapse; }
.aa-doc-meta-key { font-weight: 700; padding-right: 14px; white-space: nowrap; }
.aa-doc-subheading { font-weight: 700; font-size: 12px; margin-top: 8px; }
.aa-doc-para { font-size: 11.5px; text-align: justify; margin: 8px 0; }
.aa-doc-para-tight { font-size: 11.5px; margin: 6px 0; }
.aa-doc-strong { font-weight: 700; }
/* Indented address block (bureau contacts, the furnisher's own details). */
.aa-doc-contact { margin: 8px 0 8px 20px; font-size: 11.5px; }
.aa-doc-contact-tight { margin: 6px 0 6px 20px; }
.aa-doc-ecoa-heading { font-weight: 700; font-size: 11px; }
.aa-doc-ecoa-text { font-size: 10.5px; text-align: justify; margin: 4px 0; }

/* ==========================================================================
   Adverse-action modal (operator / Motion surface). Report | Adverse action
   tabbed dialog opened from the execution page. Token-based; the notice
   facsimile inside uses the shared .aa-doc* family above.
   ========================================================================== */
.aa-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(13, 18, 45, 0.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; overflow-y: auto;
  animation: aa-overlay-in 0.16s ease-out;
}
.aa-modal-overlay.hidden { display: none; }
.aa-modal {
  background: var(--color-white);
  border: 1px solid var(--color-link-water);
  border-radius: 12px;
  width: min(1160px, 100%);
  /* Stable size: the dialog holds its height across tabs so switching to a
     short panel (e.g. an empty Report tab) doesn't collapse it. */
  min-height: min(600px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  outline: none;
  animation: aa-modal-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes aa-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes aa-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .aa-modal-overlay, .aa-modal { animation: none; }
}
.aa-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--color-link-water);
  flex-shrink: 0;
}
/* Icon-only header button: square padding so the download glyph sits centered
   at the same height as the Close button beside it. */
.aa-modal-download-btn { padding: 9px; }
/* The body is a fixed frame; each tab pane scrolls itself. Inside the builder
   the left rail and the facsimile scroll INDEPENDENTLY (long reason lists vs a
   long notice), and the delivery footer stays pinned. */
.aa-modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.aa-modal-tabpane { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.aa-modal-footer {
  background: var(--color-white);
  border-top: 1px solid var(--color-link-water); padding: 12px 20px;
  flex-shrink: 0;
}

/* Tab pills — same visual family as the review-confirm preview tabs, keyed on
   .is-active so the shared aa-modal Stimulus controller drives them unchanged. */
.ds-modal-tabs { display: flex; gap: 8px; }
.ds-modal-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--color-link-water);
  background: var(--color-white); color: var(--color-mirage-70);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.ds-modal-tab .ds-modal-tab-icon { width: 15px; height: 15px; }
.ds-modal-tab.is-active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Chip toggle — Motion analog of the TenantIQ chip: a checkbox-backed pill
   that fills on :checked. Used for the footer "Deliver by" Mail/Email chips. */
.ds-chip-toggle {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--color-link-water);
  color: var(--color-mirage-70); font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.ds-chip-toggle:has(input:checked) {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.ds-chip-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ds-chip-check { display: none; width: 14px; height: 14px; flex-shrink: 0; }
.ds-chip-toggle:has(input:checked) .ds-chip-check { display: inline; }

/* Sales-gated channel chip: locked (never selectable) with a hover/focus
   popover carrying a mailto link — a real element (not a pseudo/title) so
   the link is clickable. The wrapper is focusable; :focus-within keeps the
   link keyboard-reachable (Tab reveals, Tab again focuses the link). */
.ds-chip-toggle-locked {
  color: var(--color-disabled, #C4C6C8);
  cursor: not-allowed;
}

/* Always-on channel chip (email): checked and disabled, so it reads as a
   statement rather than a control — no pointer cursor. */
.ds-chip-toggle-static { cursor: default; }

.aa-chip-locked-wrap {
  position: relative;
  display: inline-flex;
  border-radius: 8px;
}

/* The wrapper is a tab stop (that's how the popover's mailto link is reached
   by keyboard), so it needs a visible focus ring like any other. */
.aa-chip-locked-wrap:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Opens upward (the chip row sits in the modal footer); the transparent
   padding-bottom bridges the 8px gap so :hover survives while the pointer
   travels from the chip into the bubble. */
.aa-chip-locked-tooltip {
  position: absolute;
  bottom: 100%;
  left: 0;
  padding-bottom: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

.aa-chip-locked-wrap:hover .aa-chip-locked-tooltip,
.aa-chip-locked-wrap:focus-within .aa-chip-locked-tooltip {
  opacity: 1;
  visibility: visible;
}

.aa-chip-locked-tooltip-body {
  display: block;
  padding: 8px 12px;
  background: #1F2937;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  border-radius: 6px;
  white-space: nowrap;
}

.aa-chip-locked-tooltip-body a {
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aa-chip-locked-tooltip-body a:hover {
  color: var(--color-link-water, #DFEAF2);
}

/* Builder grid — Tailwind doesn't JIT lg:grid-cols-2 here, so a bespoke rule.
   The single row is pinned to the available height (minmax(0,1fr)) so each
   column becomes its own scroll region. */
.aa-builder { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.aa-builder > .alert-banner { flex: none; }
.aa-modal-grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1; min-height: 0;
}

/* AA modal — structural helpers (replace repeated token-referencing inline
   styles in the builder/confirmation partials). */
.aa-modal-grid > .aa-builder-left { padding: 20px; border-right: 1px solid var(--color-link-water); overflow-y: auto; min-height: 0; }
.aa-modal-grid > .aa-builder-right { padding: 20px; min-width: 0; overflow-y: auto; min-height: 0; }
@media (max-width: 960px) {
  /* Stacked layout: one shared scroll region reads better than two tiny ones. */
  .aa-modal-grid { display: block; overflow-y: auto; }
  .aa-modal-grid > .aa-builder-left,
  .aa-modal-grid > .aa-builder-right { overflow-y: visible; min-height: auto; }
  .aa-modal-grid > .aa-builder-left { border-right: none; border-bottom: 1px solid var(--color-link-water); }
}

/* Builder internals — one rule per style attribute the CSP pass removed. */
.aa-builder-live-banner { margin: 16px 20px 0; }
.aa-builder-group-label { margin-bottom: 8px; }
.aa-builder-choice { margin: 4px 0; }
.aa-builder-details-fields { display: flex; flex-direction: column; gap: 14px; }
.aa-builder-footer-actions { margin-left: auto; }

/* Sent-confirmation prose: looser leading than .text-sm, declared after it. */
.aa-sent-body { line-height: 1.65; }
.aa-modal-panel {
  padding: 48px 32px; text-align: center;
  flex: 1; min-height: min(520px, 62vh);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* Neutralize the global h2/p margin-top inside the panel — spacing is owned
   entirely by each element's mb-* utility so the rhythm stays deliberate. */
.aa-modal-panel > * { max-width: 520px; margin-top: 0; }
.aa-modal-badge {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 999px; margin: 0 auto 16px;
  background: var(--color-primary-light);
}
.aa-modal-badge svg { color: var(--color-primary); }
.aa-modal-badge--muted { background: var(--color-app-bg); }
.aa-modal-badge--muted svg { color: var(--color-muted); }
/* Success (notice sent): green tint + green check for a satisfying "done". */
.aa-modal-badge--success { background: var(--color-secondary-token-green-light); animation: aa-badge-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.aa-modal-badge--success svg { color: var(--color-token-green-ink); }
@keyframes aa-badge-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .aa-modal-badge--success { animation: none; } }
.aa-modal-report-frame { width: 100%; height: 72vh; border: 1px solid var(--color-link-water); border-radius: 6px; }

/* ==========================================================================
   Applicants index — stat tiles, view tabs, applicant cards, surface chips.
   Motion tokens only; the card list is the index default ("Applicants" view),
   the classic table lives on the "Runs" tab.
   ========================================================================== */
.page-tabs { display: flex; gap: 8px; }
.page-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--color-link-water);
  background: var(--color-white); color: var(--color-mirage-70);
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.page-tab .page-tab-icon { width: 15px; height: 15px; }
.page-tab.is-active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.stat-tile-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 960px) { .stat-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-tile { padding: 18px 20px; }
.stat-tile-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--color-mirage-70);
}
.stat-tile-icon { width: 16px; height: 16px; color: var(--color-muted); flex-shrink: 0; }
.stat-tile-value { font-size: 28px; font-weight: 600; color: var(--color-mirage); margin-top: 8px; line-height: 1.1; }
.stat-tile-denominator { font-size: 18px; font-weight: 500; color: var(--color-mirage-70); }

.applicant-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; text-decoration: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.applicant-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 12px rgba(13, 18, 45, 0.08); }
.applicant-card-chevron { width: 18px; height: 18px; color: var(--color-muted); flex-shrink: 0; }
.applicant-card:hover .applicant-card-chevron { color: var(--color-primary); }
.applicant-card-meta { min-width: 160px; }
/* Phone widths: the rigid meta column (160px) + avatar + chevron exceed the
   card's inner width, collapsing the name/email/pills column to ~0 and letting
   its content paint under the opaque surface chips. Wrap the meta block onto
   its own full-width footer row instead; the chevron is decorative (the whole
   card is the link), so it goes. */
@media (max-width: 640px) {
  .applicant-card { flex-wrap: wrap; }
  .applicant-card-meta { flex: 1 1 100%; min-width: 0; }
  .applicant-card-chevron { display: none; }
}

.id-chip {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--color-mirage-70);
  background: var(--color-mirage-05); border-radius: 4px;
  padding: 2px 6px; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Prose chip: keeps the pill shape but drops the mono face when the content is
   a product name rather than an identifier. */
.id-chip-plain { font-family: inherit; }

.surface-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--color-link-water);
  background: var(--color-white);
  font-size: 12px; font-weight: 600; color: var(--color-mirage-70);
}
.surface-chip-icon { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Execution page report cards (product signal cards) ──────────────── */
.report-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.report-card-tile {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  color: var(--color-white);
}
.report-card-tile svg { width: 20px; height: 20px; }
.report-card-tile--credit   { background: var(--color-primary); }
.report-card-tile--identity { background: var(--color-token-info); }
.report-card-tile--criminal { background: var(--color-mirage-70); }
.report-card-tile--eviction { background: var(--color-token-yellow); }
.report-card-tile--fraud    { background: var(--color-token-green); }

.report-metric-grid {
  display: grid; gap: 18px 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 960px) { .report-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.report-metric-label { font-size: 13px; color: var(--color-mirage-70); }
.report-metric-value {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 600; color: var(--color-mirage); margin-top: 3px;
}
.report-metric-dot {
  width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
  background: var(--color-disabled);
}
.report-metric-dot--good    { background: var(--color-token-green); }
.report-metric-dot--warn    { background: var(--color-token-yellow); }
.report-metric-dot--bad     { background: var(--color-token-red); }
.report-metric-dot--neutral { background: var(--color-disabled); }

.report-detail {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--color-link-water);
}
.report-detail-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px;
}
.report-detail-row {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13.5px; color: var(--color-mirage-80); margin: 4px 0;
}

/* ==========================================================================
   Adverse Action rail card — standalone beside the Actions panel so the FCRA
   obligation is unmissable. Actionable states carry a soft beacon: the card
   ring pulses a few times on load (then settles) and the pill dot keeps a
   gentle heartbeat. Settled states (sent/skipped) stay calm.
   ========================================================================== */
.aa-action-card { margin-top: 16px; }
.exec-detail-rail > .aa-action-card:first-child { margin-top: 0; }
.exec-detail-rail > .review-panel-card + .review-panel-card { margin-top: 16px; }
.aa-action-card-icon { width: 16px; height: 16px; color: var(--color-mirage-70); }

/* Attention = the quiet heartbeat on the pill dot only; the card itself
   keeps the standard border (a colored ring read as too loud). */
.aa-action-card--attention .status-pill-dot {
  animation: aa-dot-heartbeat 2s ease-in-out infinite;
}
@keyframes aa-dot-heartbeat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .aa-action-card--attention .status-pill-dot { animation: none; }
}

/* ==========================================================================
   Adverse-action draft panel on a Single Report — preview | form, two up.
   These replace style attributes on _adverse_action_panel; there is no
   Tailwind JIT here and style-src has no nonce for style attributes.
   ========================================================================== */
.aa-draft-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.aa-draft-preview {
  min-width: 0;
  position: sticky;
  top: 20px;
}

.aa-draft-preview-frame {
  width: 100%;
  height: 580px;
  border: 1px solid var(--color-link-water);
  border-radius: 6px;
}

/* Reason list: a fixed scroll box (always-visible scrollbar, so the thumb
   advertises there is more below). Pairs with .aa-reasons-scroll, which is
   declared earlier and only styles the scrollbar itself. */
.aa-reasons-box {
  max-height: 220px;
  overflow-y: scroll;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--color-link-water);
  border-radius: 6px;
}

/* Fade + chevron pinned to the bottom of the scroll box (inset to clear the
   10px scrollbar gutter and the 1px border). */
.aa-reasons-fade {
  position: absolute;
  left: 1px;
  right: 14px;
  bottom: 1px;
  height: 36px;
  pointer-events: none;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(to bottom, rgba(247, 249, 251, 0), rgba(247, 249, 251, 0.85) 60%, rgba(247, 249, 251, 1));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
}

/* Adverse-action audit filter bar: each field flexes, with a wider slot for
   the reviewer-email search. */
.aa-audit-filter { flex: 1; min-width: 140px; }
.aa-audit-filter-wide { min-width: 200px; }

/* ==========================================================================
   SINGLE REPORTS · HOME (sr-*)
   Report-type cards + recent screenings on the Single Reports home.
   Motion tokens only; components reuse ds-card / avatar / btn-*.
   ========================================================================== */

/* NOTE: the .sr-home container width override lives beside .sa-container itself
   (search "sr-home"), not here. Declared at this position in the bundle it was
   silently dropped by the browser and the page rendered at the base 800px. */

.sr-micro-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mirage-70, #56596C);
  /* Full margin shorthand: the labels are h2s (heading order, QA SR-RT-02),
     so the UA's heading top margin must be zeroed to keep the old p layout. */
  margin: 0 0 12px;
}
.sr-recent-label { margin-top: 32px; }

/* ----- report type card grid ----- */
.sr-rt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .sr-rt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sr-rt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sr-rt-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.sr-rt-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
/* Name wraps to at most two lines; the action row keeps its own top-right
   slot (flex-shrink: 0 below) so it never overlaps the name. Full name is
   available via title="" on the heading. */
.sr-rt-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-mirage, #0D122D);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.sr-rt-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
/* button_to wraps its button in a form; collapse the wrapper */
.sr-rt-actions form { display: contents; }

.sr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--color-mirage-70, #56596C);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sr-icon-btn:hover {
  background: var(--color-tertiary, #F2F4FF);
  color: var(--color-primary, #0029FF);
}
.sr-icon-btn svg { width: 16px; height: 16px; }
.sr-icon-btn-danger:hover {
  background: var(--color-secondary-token-red-light, #FFE0EB);
  color: var(--color-token-red-ink);
}

.sr-rt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sr-rt-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-mirage-80, #3D4157);
  background: var(--color-mirage-05, #F3F3F5);
  border-radius: 999px;
  padding: 3px 10px;
}

/* Card footer: divider owns the spacing, btn-primary owns the look.
   Full-width so the CTA reads as the card's one primary action. */
.sr-rt-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-link-water, #DFEAF2);
}
.sr-rt-screen { width: 100%; box-sizing: border-box; }

/* CSV drag-and-drop onto a saved report-type card → batch-screen with it.
   The overlay shows only while a file is dragged over (report_card_drop). */
.sr-rt-card-drop { border-color: var(--color-primary, #0029FF); }
.sr-rt-card-drop-error { border-color: var(--color-token-red, #FA3A55); }
.sr-rt-drophint {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 9px;
  border: 2px dashed var(--color-primary, #0029FF);
  background: var(--color-primary-light, #E6EAFF);
  color: var(--color-primary, #0029FF);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.sr-rt-card-drop .sr-rt-drophint { display: flex; }
.sr-rt-drophint svg { width: 26px; height: 26px; }

/* ----- recent screenings ----- */
.sr-recent-card { padding: 8px; }
.sr-recent-list {
  display: flex;
  flex-direction: column;
}
.sr-recent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
/* Only the main link navigates; the hover paints the link, not the row. */
.sr-recent-main:hover { background: var(--color-mirage-05, #F3F3F5); border-radius: 8px; }
/* R16-13: the row is an <a>, so the UA's link ink beat the `color: inherit` on
   the wrapping .sr-recent-row. Same treatment as .execution-row-link, the
   app's other whole-row anchor. */
.sr-recent-main { flex: 1; min-width: 0; color: inherit; }
.sr-recent-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-mirage-80, #3D4157);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-recent-title {
  font-size: 12px;
  color: var(--color-mirage-70, #56596C);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-recent-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-muted);
}
.sr-recent-time svg { width: 14px; height: 14px; }

/* ----- Single Reports home (srh-) -----
   The common-report chip row on the saved-reports home. Motion tokens only. */
.srh-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 20px; }
.srh-quick-label { font-size: 13px; font-weight: 500; color: var(--color-mirage-70); white-space: nowrap; }
.srh-quick-list { display: flex; flex-wrap: wrap; gap: 6px; }
.srh-quick-chip { text-decoration: none; }

.sr-recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sr-recent-head .sr-micro-label { margin-bottom: 0; }
.sr-recent-actions { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sr-recent-again { white-space: nowrap; }
.sr-pill-case { margin-left: 8px; vertical-align: middle; }

/* ----- Single Reports screening page (sr-run) -----
   Two columns: the report as the builder's product rows on the left, who to
   screen on the right (the cascade builder's test-case list, or the Manual
   and CSV entry). Stacks under 960px. */
.sr-run .sa-container { max-width: 1240px; }
.sr-run-grid {
  display: grid;
  /* The report rows (name, bureau chips, Configure, remove) need the width;
     the test-case list reads fine narrower. */
  grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 960px) {
  .sr-run-grid { grid-template-columns: minmax(0, 1fr); }
}
.sr-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sr-run .sr-plan-head .sa-card-heading { margin-bottom: 0; }
.sr-plan-count { color: var(--color-mirage-70); font-weight: 500; }
.sr-plan-card .srb-rows { margin-top: 14px; }
.sr-plan-card .srb-empty { padding: 14px 0 4px; }
/* The report card is the narrower column: the name keeps a real line and the
   bureau chips, Configure and remove wrap under it when they do not fit. */
.sr-plan-card .srb-row { flex-wrap: wrap; row-gap: 8px; }
.sr-plan-card .srb-row > .flex-1 { flex: 1 1 150px; }

/* The entry tabs wrap under the card heading in the right column; keep air
   around them so the panel below never sits flush against them. */
.sr-run .sr-entry-tabs { margin: 4px 0 6px; }
.sr-run .sr-cases, .sr-run [data-single-report-form-target="manualPanel"],
.sr-run [data-single-report-form-target="csvPanel"] { margin-top: 18px; }

/* Test cases: the cascade builder's list (avatar, name, blurb, Run per row,
   Run all in the head), in Motion tokens. A finished row shows "Report
   ready" and keeps a View report link; a failed one says why. */
.sr-cases-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2px 0 12px; border-bottom: 1px solid var(--color-link-water);
}
.sr-cases-heading { display: flex; align-items: center; gap: 10px; }
.sr-cases-flask { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; }
.sr-cases-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-mirage); }
.sr-cases-sub { margin: 0; font-size: 12px; color: var(--color-mirage-70); }
.sr-cases-runall svg { width: 12px; height: 12px; }
.sr-cases-list { list-style: none; margin: 0; padding: 0; }
.sr-case {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 6px; border-bottom: 1px solid var(--color-link-water);
  transition: background-color 0.15s ease;
}
.sr-case.is-selected { background: var(--color-app-bg); }
.sr-case-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0;
  background: var(--color-mirage-05); color: var(--color-mirage-80);
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.sr-case.is-done .sr-case-avatar { background: var(--color-primary-light); color: var(--color-primary); }
.sr-case-body { flex: 1; min-width: 0; }
.sr-case-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sr-case-name { font-size: 14px; font-weight: 600; color: var(--color-mirage); }
.sr-case-status { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sr-case-blurb { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--color-mirage-70); }
.sr-case-note { margin: 4px 0 0; font-size: 12px; color: var(--color-token-red-ink); }
.sr-case-run {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--color-mirage-20); background: var(--color-white);
  color: var(--color-mirage); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sr-case-run:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.sr-case-run svg { width: 11px; height: 11px; }
.sr-case-running { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-mirage-70); }
.sr-case-view { background: none; border: none; padding: 0; font: inherit; font-size: 12px; font-weight: 500; color: var(--color-primary); cursor: pointer; }
.sr-case-view:hover { text-decoration: underline; }

/* Density: the screening page's header and cards sit tighter so the test
   cases (or the applicant fields) start above the fold. */
.sr-run .sa-header { margin-bottom: 12px; }
.sr-run .sa-title { font-size: 24px; line-height: 1.2; }
.sr-run .sa-subtitle { margin-top: 4px; font-size: 14px; }
.sr-run .sa-card { padding: 16px 20px; margin-bottom: 12px; }
.sr-run .sa-card-heading { margin-bottom: 10px; }
.sr-run .sr-persona-grid { margin-top: 4px; }
.sr-inline-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.sr-inline-save .form-field-input { max-width: 280px; }
.sr-stale { margin: 10px 0 0; font-size: 13px; color: var(--color-token-yellow); }
.srr-subline { margin: 2px 0 0; font-size: 12px; color: var(--color-mirage-70); }

/* Run status, inline under the Pull button (there is no results page): a
   quiet progress strip while the pull runs, then the outcome banner with
   the ways onward (Read the report, Open screening record). */
.sr-run-status { margin-top: 14px; }
.sr-run-progress {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--color-primary-light); color: var(--color-mirage-80);
  font-size: 13px;
}
.sr-run-spinner {
  width: 14px; height: 14px; flex-shrink: 0; border-radius: 999px;
  border: 2px solid rgba(0, 41, 255, 0.2); border-top-color: var(--color-primary);
  animation: sr-run-spin 0.7s linear infinite;
}
@keyframes sr-run-spin { to { transform: rotate(360deg); } }
.sr-run-status .alert-banner { margin: 0; }
.sr-run-done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.sr-run-done-actions .link-default { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.sr-locked-note { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .sr-run-spinner { animation: none; } }

/* ----- Single Reports builder (srb-) -----
   The Cora report-type builder at /single_reports/new. Formerly a nonced
   <style> block inside the view; a document's CSP nonce is pinned at its
   first full-page load, so the block failed the check on any later Turbo
   visit once the session id changed (a brand-new account's onboarding
   path) and every builder icon rendered unsized. Motion tokens only; the
   sole raw colors are box-shadow alphas, matching the other shadows here. */
.sa-container.srb-container { max-width: 1120px; }

/* Compact header: back link, title and actions in one band so both panes
   start above the fold at 1280x720. */
.srb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.srb-head-copy { min-width: 0; }
.srb-head .srb-back { margin-bottom: 6px; }
.srb-title { font-size: 24px; line-height: 1.2; margin: 0; }
.srb-subtitle { margin-top: 4px; font-size: 14px; }

/* ── floating composer ───────────────────────────────────────
   Cora's line, the input and the common reports in one elevated card. It
   only LOOKS lifted: it scrolls with the page, so nothing slides behind it. */
.srb-composer {
  position: relative; min-width: 0; align-self: start;
  margin: 0; padding: 18px 20px 16px;
  border-radius: 18px;
  background: var(--color-white);
  border: 1px solid var(--color-link-water);
  box-shadow: 0 18px 44px rgba(13, 18, 45, 0.10), 0 2px 6px rgba(13, 18, 45, 0.05);
}
.srb-composer-lead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.srb-avatar-lg { width: 40px; height: 40px; border-radius: 12px; animation: srb-glow 3.2s ease-in-out infinite; }
.srb-avatar-lg svg { width: 20px; height: 20px; transition: transform 0.3s ease; }
.srb-composer.is-thinking .srb-avatar-lg svg { animation: srb-spin 1.6s linear infinite; }
@keyframes srb-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-primary-light); }
  50% { box-shadow: 0 0 0 7px var(--color-primary-light); }
}
.srb-composer-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--color-mirage-80); }
.srb-composer-input { display: flex; gap: 10px; }
.srb-composer-input .form-field-input {
  height: 48px; font-size: 15px; padding: 0 16px; border-radius: 12px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.srb-composer-input .form-field-input:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-light); outline: none;
}
.srb-composer-input .srb-send { width: 48px; height: 48px; border-radius: 12px; }
.srb-composer .srb-suggested { margin-top: 10px; }

/* A lead-in plus raised white pills, so the common reports read as things
   you press rather than tags. */
.srb-common { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.srb-common-label { font-size: 13px; font-weight: 500; color: var(--color-mirage-70); white-space: nowrap; }
.srb-common-list { display: flex; flex-wrap: wrap; gap: 8px; }
/* The chips are buttons and look it: a firm border, a button radius and a
   resting shadow, lifting on hover and pressing on click. Text only. */
.srb-common-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 10px;
  border: 1px solid var(--color-mirage-20); background: var(--color-white);
  color: var(--color-mirage); font: inherit; cursor: pointer;
  box-shadow: 0 1px 2px rgba(13, 18, 45, 0.08), 0 2px 6px rgba(13, 18, 45, 0.05);
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.srb-common-chip:hover {
  border-color: var(--color-primary); background: var(--color-primary-light);
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(13, 18, 45, 0.12);
}
.srb-common-chip:focus { outline: none; }
.srb-common-chip:focus-visible { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.25); }
.srb-common-chip:active { transform: translateY(0); box-shadow: none; background: var(--color-primary-light); }
.srb-common-name { font-size: 13px; font-weight: 600; }
.srb-common-price { font-size: 12px; color: var(--color-mirage-70); }

/* The same chips inside a Cora bubble: a hairline under her words, a quiet
   lead-in, then the smaller chips. The bubble widens to fit them. */
.srb-bubble-offer { max-width: 100%; }
.srb-chat-offer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-link-water);
}
.srb-chat-offer-label { flex-basis: 100%; font-size: 12px; font-weight: 500; color: var(--color-mirage-70); }
.srb-chat-offer-list { display: flex; flex-wrap: wrap; gap: 6px; }
.srb-common-chip-sm { padding: 5px 10px; border-radius: 9px; }
.srb-common-chip-sm .srb-common-name { font-size: 12px; }

.srb-rise-in { animation: srb-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
/* backwards, not both: once the pop lands the chip's own hover/active
   transforms must take over (a forwards fill would pin transform: none). */
.srb-pop-in { animation: srb-pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }

.srb-card-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* Two tracks whose flex factors animate: quiet = composer alone (second
   track collapsed), active = chat column + report. Both states use
   minmax(0, Nfr) so the browser interpolates the change. */
.srb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  column-gap: 14px;
  row-gap: 14px;
  align-items: start;
  transition: grid-template-columns 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), column-gap 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.srb-grid.is-quiet { grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); column-gap: 0; }
.srb-grid > .srb-pane {
  min-width: 0; opacity: 1; transform: none; visibility: visible;
  transition: opacity 0.4s ease 0.2s, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s, visibility 0s linear 0s;
}
/* Quiet: hidden for real (visibility), so Browse all and the pane copy are
   not reachable by keyboard or assistive tech while invisible. The
   visibility flip is delayed on the way out so the glide still animates. */
.srb-grid.is-quiet > .srb-pane {
  opacity: 0; transform: translateX(18px); pointer-events: none; overflow: hidden; visibility: hidden;
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.6s;
}
.srb-grid.is-quiet .srb-thread { display: none; }
.srb-composer .srb-thread { margin: 4px 0 12px; min-height: 0; max-height: 360px; }
/* Once the chat starts the static row goes away: the common reports come
   up inside Cora's replies instead (.srb-chat-offer). */
.srb-grid:not(.is-quiet) .srb-common { display: none; }

/* ── assembly motion ─────────────────────────────────────────
   Rows enter one after another (delay classes, no inline styles under
   CSP); the pane breathes while Cora is working. */
.srb-row.srb-in { animation: srb-rise 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.srb-d0 { animation-delay: 0ms; }
.srb-d1 { animation-delay: 70ms; }
.srb-d2 { animation-delay: 140ms; }
.srb-d3 { animation-delay: 210ms; }
.srb-d4 { animation-delay: 280ms; }
.srb-d5 { animation-delay: 350ms; }
@keyframes srb-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes srb-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
.srb-pane.is-building { animation: srb-breathe 1.3s ease-in-out infinite; }
@keyframes srb-breathe {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-primary-light); }
  50% { box-shadow: 0 0 0 5px var(--color-primary-light); }
}

@media (prefers-reduced-motion: reduce) {
  .srb-row.srb-in,
  .srb-pane.is-building, .srb-rise-in, .srb-pop-in, .srb-avatar-lg,
  .srb-composer.is-thinking .srb-avatar-lg svg { animation: none; }
  .srb-grid, .srb-grid > .srb-pane { transition: none; }
}
@media (max-width: 960px) {
  .srb-grid, .srb-grid.is-quiet { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .srb-grid.is-quiet > .srb-pane { display: none; }
}

.srb-pane { padding: 20px; margin-bottom: 0; }

.srb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}
.srb-back svg { width: 14px; height: 14px; }

/* ── chat pane ─────────────────────────────────────────────── */
.srb-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 320px;
  min-height: 160px;
  overflow-y: auto;
  padding: 2px;
}
.srb-msg { display: flex; align-items: flex-start; gap: 10px; }
.srb-msg-user { justify-content: flex-end; }
.srb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.srb-avatar svg { width: 15px; height: 15px; }
.srb-bubble {
  max-width: 85%;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.55;
}
.srb-bubble-assistant {
  background: var(--color-app-bg);
  border: 1px solid var(--color-link-water);
  color: var(--color-mirage-80);
}
.srb-bubble-user { background: var(--color-primary); color: var(--color-white); }
.srb-thinking { display: inline-flex; align-items: center; gap: 8px; color: var(--color-mirage-70); }
.srb-thinking svg { width: 14px; height: 14px; }
.srb-spin { animation: srb-spin 1s linear infinite; }
@keyframes srb-spin { to { transform: rotate(360deg); } }

.srb-suggested .cascade-ai-chip { display: inline-flex; align-items: center; gap: 6px; }
.srb-suggested .cascade-ai-chip svg { width: 13px; height: 13px; flex-shrink: 0; }

.srb-suggested { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.srb-microlabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mirage-70);
}

.srb-send {
  flex-shrink: 0;
  width: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.srb-send svg { width: 18px; height: 18px; }

/* ── report pane ───────────────────────────────────────────── */
.srb-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.srb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-link-water);
  border-radius: 10px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.srb-row.srb-enter { opacity: 0; transform: translateY(6px); }
.srb-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--color-blue-05);
  color: var(--color-blue);
}
.srb-row-icon svg { width: 16px; height: 16px; }
.srb-row-name { font-size: 14px; font-weight: 600; color: var(--color-mirage); }
.srb-row-sub { font-size: 12px; color: var(--color-mirage-70); margin-top: 1px; }
.srb-row-sub .srb-addon-count { color: var(--color-primary); font-weight: 500; }

.srb-bureaus { display: inline-flex; gap: 4px; flex-shrink: 0; }
.srb-bureau-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-link-water);
  background: var(--color-white);
  color: var(--color-mirage-70);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.srb-bureau-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.srb-bureau-chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  cursor: default;
}
.srb-marker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--color-mirage-05);
  color: var(--color-mirage-70);
  flex-shrink: 0;
}

.srb-config { position: relative; flex-shrink: 0; }
.srb-config summary { list-style: none; }
.srb-config summary::-webkit-details-marker { display: none; }
.srb-config-btn {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid var(--color-link-water);
  background: var(--color-white);
  color: var(--color-mirage-70);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.srb-config-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.srb-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 320px;
  max-height: 440px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-link-water);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(13, 18, 45, 0.12);
  padding: 16px;
  z-index: 40;
}
.srb-popover-name { font-size: 14px; font-weight: 600; color: var(--color-mirage); margin-top: 4px; }
.srb-popover-desc { font-size: 12px; line-height: 1.5; color: var(--color-mirage-70); margin-top: 6px; }
.srb-popover-capability {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-mirage-80);
  background: var(--color-app-bg);
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 10px;
}
.srb-toggle-list { margin-top: 8px; }
.srb-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--color-mirage-05);
  font-size: 13px;
  color: var(--color-mirage-80);
  cursor: pointer;
}
.srb-toggle-row:first-child { border-top: none; }

.srb-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-mirage-60);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.srb-remove:hover { background: var(--color-mirage-05); color: var(--color-token-red); }
.srb-remove svg { width: 14px; height: 14px; }

.srb-empty { text-align: center; padding: 40px 16px; }
.srb-empty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-blue-05);
  color: var(--color-blue);
  margin-bottom: 10px;
}
.srb-empty-badge svg { width: 20px; height: 20px; }

/* ── page-header save controls + card browse pill ──────────── */
/* Save lives in the page header (top right, aligned with the title). The
   open state (name input + Save + cancel) swaps into the saveClosed slot;
   on narrow widths it wraps below the title. Browse all is a pill in the
   report card's own header (top right). */
.srb-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.srb-pane-head-copy { min-width: 0; }
.srb-browse-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}
.srb-browse-pill svg { width: 14px; height: 14px; }
.srb-save-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.srb-save-bar .form-field-error-msg { margin-top: 0; text-align: right; max-width: 300px; }
.srb-name-input { width: 210px; }

@media (prefers-reduced-motion: reduce) {
  .srb-row { transition: none; }
  .srb-row.srb-enter { opacity: 1; transform: none; }
}

/* =====================================================================
   OPERATOR DASHBOARD — greeting, entry cards, stat tiles, recent/activity
   panels, and the "Get set up" checklist (static in the page flow — see the
   dock note below). Motion tokens only; the checklist internals reuse
   .op-checklist / .op-progress-* from the activation work, so only the dock
   shell is defined here.
   ========================================================================== */
/* Bottom padding keeps the last panel scrollable clear of the floating
   "Get set up" dock pinned bottom-right. */
.dash { display: flex; flex-direction: column; gap: 24px; padding-bottom: 96px; }

.dash-greeting-title { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--color-mirage); }
.dash-greeting-sub { margin: 6px 0 0; font-size: 15px; color: var(--color-mirage-70); }

/* ---- The three ways in ---- */
.dash-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* The whole card is an <a>, so it resets link ink and carries the focus ring. */
.dash-entry { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--color-link-water); border-radius: 14px; background-color: var(--color-white); color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.dash-entry:hover { border-color: var(--color-primary); box-shadow: 0 6px 20px color-mix(in srgb, var(--color-mirage) 8%, transparent); }
.dash-entry:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.dash-entry:hover .dash-entry-link { text-decoration: underline; }
.dash-entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dash-entry-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background-color: var(--color-mirage); color: var(--color-white); }
.dash-entry-badge { padding: 4px 10px; border-radius: 9999px; background-color: var(--color-primary-light); color: var(--color-primary); font-size: 11px; font-weight: 600; white-space: nowrap; }
.dash-entry-title { margin: 16px 0 0; font-size: 17px; font-weight: 700; color: var(--color-mirage); }
.dash-entry-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-mirage-70); }
.dash-entry-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; color: var(--color-primary); font-size: 14px; font-weight: 600; }
.dash-entry-arrow { flex: 0 0 auto; width: 16px; height: 16px; }

/* ---- Stat tiles ---- */
.dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.dash-stat { padding: 18px 20px; border: 1px solid var(--color-link-water); border-radius: 14px; background-color: var(--color-white); }
.dash-stat-label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--color-mirage-70); }
.dash-stat-icon { display: inline-flex; color: var(--color-muted); }
.dash-stat-icon svg { width: 16px; height: 16px; }
.dash-stat-value { margin: 10px 0 0; font-size: 28px; font-weight: 700; color: var(--color-mirage); }

/* ---- Recently used / applicant activity ---- */
.dash-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
.dash-row-single { grid-template-columns: 1fr; }
.dash-panel { padding: 20px; }
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-panel-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-mirage); }
.dash-panel-sub { margin: 4px 0 0; font-size: 13px; color: var(--color-mirage-70); }
.dash-recent, .dash-activity { display: flex; flex-direction: column; margin-top: 12px; }
.dash-recent-row, .dash-activity-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; text-decoration: none; transition: background-color .15s ease; }
.dash-recent-row:hover, .dash-activity-row:hover { background-color: var(--color-mirage-05); }
.dash-recent-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background-color: var(--color-primary-light); color: var(--color-primary); }
.dash-recent-body, .dash-activity-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dash-recent-name, .dash-activity-name { font-size: 14px; font-weight: 600; color: var(--color-mirage); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-recent-meta, .dash-activity-meta { font-size: 12px; color: var(--color-mirage-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-recent-time, .dash-activity-time { flex: 0 0 auto; font-size: 12px; color: var(--color-muted); white-space: nowrap; }

/* ---- "Get set up" checklist ----
   Floating dock pinned bottom-right (no ancestor of the partial has a
   transform/filter, so fixed anchors to the viewport even though
   .page-content-inner is the scroll container). The original DASH-DEF-01
   obstruction (see the defect note further down) is mitigated by the
   collapse-to-icon control: one click shrinks the panel to a 44px bubble and
   the choice is remembered in localStorage.
   The panel and its collapsed bubble swap inside the dock; both need an
   explicit [hidden] rule, since the component classes set display and would
   otherwise beat the UA stylesheet's [hidden].
   z-index 900: above page chrome (dropdowns z-50, sticky table bits z-100),
   below .modal-overlay / .ob-overlay (1000) and toasts / flash (9999). */
.dash-gs-dock { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }
.dash-gs-dock > * { pointer-events: auto; }
.dash-gs { width: 300px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); overflow-y: auto; padding: 16px; border: 1px solid var(--color-link-water); border-radius: 14px; background-color: var(--color-white); box-shadow: 0 12px 40px color-mix(in srgb, var(--color-mirage) 18%, transparent); }
.dash-gs[hidden] { display: none; }
.dash-gs-bubble { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-link-water); border-radius: 9999px; background-color: var(--color-white); color: var(--color-primary); box-shadow: 0 8px 24px color-mix(in srgb, var(--color-mirage) 16%, transparent); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.dash-gs-bubble[hidden] { display: none; }
.dash-gs-bubble:hover { border-color: var(--color-primary); box-shadow: 0 10px 28px color-mix(in srgb, var(--color-mirage) 22%, transparent); }
.dash-gs-bubble-count { position: absolute; top: -6px; right: -6px; padding: 1px 5px; border-radius: 9999px; border: 2px solid var(--color-white); background-color: var(--color-primary); color: var(--color-white); font-size: 10px; font-weight: 600; line-height: 14px; }

/* Permanent-dismiss x on the minimized bubble: an 18px badge overlapping the
   44px bubble's top-LEFT corner (the count pill owns the top-right). Opens the
   confirm tag below rather than dismissing directly. */
.dash-gs-dismiss-x { position: absolute; right: 36px; bottom: 36px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 1px solid var(--color-link-water); border-radius: 9999px; background-color: var(--color-white); color: var(--color-muted); box-shadow: 0 2px 8px color-mix(in srgb, var(--color-mirage) 14%, transparent); cursor: pointer; }
.dash-gs-dismiss-x[hidden] { display: none; }
.dash-gs-dismiss-x:hover { color: var(--color-token-red); border-color: var(--color-token-red); }

/* Dismiss-confirm tag: a bubble-height pill popping off the collapsed icon
   (right: 54px = 44px bubble + 10px gap; the ::after notch points at it),
   opened ONLY by the x above. A direct dock child, so the dock's
   pointer-events pattern re-enables clicks. */
.dash-gs-hint { position: absolute; right: 54px; bottom: 0; display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 8px 0 14px; border: 1px solid var(--color-link-water); border-radius: 9999px; background-color: var(--color-white); box-shadow: 0 8px 24px color-mix(in srgb, var(--color-mirage) 16%, transparent); white-space: nowrap; transform-origin: right center; animation: dash-gs-hint-pop .2s ease-out; }
.dash-gs-hint[hidden] { display: none; }
.dash-gs-hint::after { content: ""; position: absolute; right: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background-color: var(--color-white); border-top: 1px solid var(--color-link-water); border-right: 1px solid var(--color-link-water); transform: rotate(45deg); }
.dash-gs-hint-dismiss { padding: 4px 2px; border: 0; background: transparent; color: var(--color-mirage-70); font-size: 12px; font-weight: 600; cursor: pointer; }
.dash-gs-hint-dismiss:hover { color: var(--color-mirage); text-decoration: underline; }
.dash-gs-hint-close { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 9999px; background: transparent; color: var(--color-muted); cursor: pointer; }
.dash-gs-hint-close:hover { background-color: var(--color-mirage-05); color: var(--color-mirage); }
@keyframes dash-gs-hint-pop { from { opacity: 0; transform: translateX(6px) scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dash-gs-hint { animation: none; } }
/* gap matches .op-check's 12px so the header title and step titles share a left edge */
.dash-gs-head { display: flex; align-items: center; gap: 12px; }
.dash-gs-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background-color: var(--color-primary-light); color: var(--color-primary); }
.dash-gs-title { font-size: 14px; font-weight: 600; color: var(--color-mirage); }
.dash-gs-count { margin-left: auto; font-size: 12px; line-height: 20px; color: var(--color-mirage-70); }
/* -4px pulls the 14px glyph optically flush with the panel's 16px padding */
.dash-gs-close { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: -4px; padding: 0; border: 0; border-radius: 6px; background-color: transparent; color: var(--color-muted); cursor: pointer; }
.dash-gs-close:hover { background-color: var(--color-mirage-05); color: var(--color-mirage); }
.dash-gs-track { margin-top: 12px; }
.dash-gs-list { margin-top: 16px; gap: 12px; }
/* 18px line + 3px padding centers a single-line title on the 24px badge */
.dash-gs .op-check-title { font-size: 13px; line-height: 18px; padding-top: 3px; }
.dash-gs .op-check.is-done .op-check-title { text-decoration: line-through; color: var(--color-muted); }
/* Single-sourced title→CTA gap (8px < the 12px step gap, so the CTA groups
   with its own step); the base .op-check-action 10px is for the wider pages. */
.dash-gs .op-check-action { margin-top: 8px; }
/* .btn-primary is content-box, so a bare width:100% overflows the panel by its
   padding + border (26px). */
.dash-gs-cta { box-sizing: border-box; width: 100%; padding: 6px 12px; font-size: 13px; }

@media (max-width: 1200px) {
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dash-entries { grid-template-columns: 1fr; }
  .dash-greeting-title { font-size: 24px; }
  /* R16-11: the fixed-dock inset used to live here; below 1200px the dock is in
     the page flow, where right/bottom would shove it over the panel above. */
}
/* ---- 04 · Editor chrome & canvas — prototype-measured (crs2-platform, 2026-08-11) ---- */
/* Header: px-5 py-3 auto-height (was fixed 56px), hairline in surface ink */
.cascade-builder-surface .builder-toolbar {
  height: auto;
  padding: 12px 20px;
  flex-wrap: wrap; /* prototype header wraps rather than clipping */
  row-gap: 8px;
  border-bottom-color: var(--cb-line);
  position: relative;
  z-index: 30; /* above canvas overlays (decision guide, hint pill) when wrapped */
}
.cascade-builder-surface .builder-back-btn { width: 32px; height: 32px; color: #6b6870; }
.cascade-builder-surface .builder-back-btn:hover { background: var(--cb-sand); color: var(--cb-ink); }
.cascade-builder-surface .builder-back-btn svg { width: 16px; height: 16px; }
.cascade-builder-surface .builder-cascade-eyebrow { font-size: 11px; line-height: 16px; letter-spacing: 0.55px; color: var(--color-muted); }
/* Name input: prototype is borderless with a sand wash on hover/focus */
.cascade-builder-surface input.builder-workflow-name-input {
  border: 0;
  /* Prototype: w-full within an auto-sized min-w-0 block resolves to the
     input's intrinsic ~20ch; a fixed 100% here collapses to the eyebrow's
     width instead. */
  width: 24ch;
  max-width: 42ch;
}
.cascade-builder-surface input.builder-workflow-name-input:hover { background: rgba(248, 247, 248, 0.6); }
.cascade-builder-surface input.builder-workflow-name-input:focus {
  background: rgba(248, 247, 248, 0.7);
  box-shadow: 0 0 0 2px rgba(102, 56, 204, 0.15);
}
/* cascade_id copy: prototype nests a bordered white button inside the chip */
.cascade-builder-surface .builder-cascade-id-copy {
  width: auto; height: 28px; padding: 6px 10px;
  border: 1px solid var(--cb-line); border-radius: 8px;
  background: #ffffff; color: #393641;
}
.cascade-builder-surface .builder-cascade-id-copy svg { width: 14px; height: 14px; }
.cascade-builder-surface .builder-cascade-id-copy:hover { border-color: var(--cb-line-strong); background: rgba(248, 247, 248, 0.6); color: #393641; }

/* App-only toolbar actions (Execute / Use Case / Save) restyled into the
   surface language: ghost h-8 rounded-4 + brand-900 primary. */
.cascade-builder-surface .builder-toolbar .btn-demo,
.cascade-builder-surface .builder-toolbar .btn-stop,
.cascade-builder-surface .builder-toolbar .btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--cb-line); border-radius: 4px;
  background: #ffffff; color: var(--cb-ink);
  font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap;
  box-shadow: none; text-transform: none;
}
.cascade-builder-surface .builder-toolbar .btn-demo:hover,
.cascade-builder-surface .builder-toolbar .btn-stop:hover,
.cascade-builder-surface .builder-toolbar .btn-secondary:hover {
  background: var(--cb-sand); border-color: var(--cb-line-strong); color: var(--cb-ink);
}
.cascade-builder-surface .builder-toolbar .btn-demo svg,
.cascade-builder-surface .builder-toolbar .btn-stop svg { width: 16px; height: 16px; }
.cascade-builder-surface .builder-toolbar .btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 0; border-radius: 4px;
  background: var(--cb-brand-900); color: #ffffff;
  font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap;
  box-shadow: none;
}
.cascade-builder-surface .builder-toolbar .btn-primary:hover { background: #06040d; }
.cascade-builder-surface .builder-toolbar .form-field-select {
  height: 32px; padding: 0 28px 0 10px;
  border: 1px solid var(--cb-line); border-radius: 8px;
  background-color: #ffffff; font-size: 12px; font-weight: 500; color: #393641;
  box-shadow: none;
}
.cascade-builder-surface .builder-toolbar .form-field-select:hover { border-color: var(--cb-line-strong); }
.cascade-builder-surface .builder-toolbar label { font-size: 12px; font-weight: 500; color: #393641; }
.cascade-builder-surface .toolbar-divider { background-color: var(--cb-line); }

/* Canvas: prototype dot grid is 22px gap, 1.4px dots */
.cascade-builder-surface .builder-canvas {
  background-image: radial-gradient(#d8d5cc 0.7px, transparent 0.7px);
}
/* Hint: prototype pill, top-left, white/85 over the grid with a hairline */
.cascade-builder-surface .builder-canvas-caption {
  left: 16px; top: 16px; transform: none;
  padding: 6px 12px;
  border: 1px solid var(--cb-line); border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #6b6870;
  box-shadow: 0 1px 2px rgba(8, 4, 17, 0.04);
}

/* Zoom / fit / tidy: react-flow style stack, bottom-right of the canvas */
.builder-canvas-controls {
  position: absolute; right: 16px; bottom: 16px; z-index: 6;
  display: flex; flex-direction: column;
  border: 1px solid var(--cb-line); border-radius: 8px; overflow: hidden;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.builder-canvas-controls-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 0; background: #ffffff; color: #393641; cursor: pointer;
  transition: background-color 0.12s ease;
}
.builder-canvas-controls-btn + .builder-canvas-controls-btn { border-top: 1px solid var(--cb-line); }
.builder-canvas-controls-btn:hover { background: var(--cb-sand); }
.builder-canvas-controls-btn svg { width: 13px; height: 13px; }

/* Wires: ALL neutral warm-gray 2px like the prototype — branch identity moves
   to the Pass/Fail/Review labels. The base rules carry !important, so these
   must too. */
.cascade-builder-surface #drawflow .drawflow .connection .main-path,
.cascade-builder-surface #drawflow .drawflow .connection.connection--decision-pass .main-path,
.cascade-builder-surface #drawflow .drawflow .connection.connection--decision-human-review .main-path,
.cascade-builder-surface #drawflow .drawflow .connection.connection--decision-fail .main-path {
  stroke: #cbc8bf !important;
  stroke-width: 2px !important;
  marker-end: url(#drawflow-arrow) !important;
}
.cascade-builder-surface #drawflow .drawflow .connection .main-path:hover,
.cascade-builder-surface #drawflow .drawflow .connection:hover .main-path {
  stroke: var(--cb-brand) !important;
  stroke-width: 2px !important;
}
.cascade-builder-surface #drawflow .drawflow .connection.selected .main-path {
  stroke: var(--cb-brand) !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 4px rgba(0, 41, 255, 0.35));
}

/* Branch labels (prototype: 11px/600 colored text on a white rounded chip at
   the wire midpoint; positioned by the visualization controller). */
.connection-branch-label {
  position: absolute; z-index: 8;
  transform: translate(-50%, -50%);
  padding: 1px 7px; border-radius: 8px;
  background: #ffffff;
  font-size: 11px; font-weight: 600; line-height: 16px;
  pointer-events: none; white-space: nowrap;
}
.connection-branch-label--pass { color: #12935a; }
.connection-branch-label--fail { color: #d7483b; }
.connection-branch-label--review { color: #b97714; }

/* Header right cluster (prototype: everything after the name hugs the right
   edge — chip · Use in API · Add node ⌄ · delete · app actions) */
.builder-toolbar-right {
  display: flex; align-items: center; justify-content: flex-end;
  flex: 1; flex-wrap: wrap; gap: 8px; row-gap: 8px;
  margin-left: auto; min-width: 0;
}
.builder-header-btn-chevron { width: 14px; height: 14px; margin: 0 -2px 0 -2px; }
.builder-trash-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  color: #6b6870; text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.builder-trash-btn svg { width: 16px; height: 16px; }
.builder-trash-btn:hover { background: var(--cb-reject-soft); color: var(--cb-reject); }

/* ---- 06 · Node faces & handles — prototype-measured (crs2-platform, 2026-08-11) ---- */
/* Geometry: compact auto-height cards (px-3.5 py-3, gap-2.5), fixed widths —
   applicant 176, everything else 208. Beats the fixed 72/100px heights above. */
.cascade-builder-surface #drawflow .drawflow .base-node {
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  width: 208px !important;
  padding: 12px 14px !important;
  gap: 10px !important;
}
.cascade-builder-surface #drawflow .drawflow-node.ApplicantSource .base-node { width: 176px !important; }
/* Icon squares: 36px rounded-lg (applicant 32px translucent on ink) */
.cascade-builder-surface #drawflow .node-icon-container {
  width: 36px !important; height: 36px !important; border-radius: 8px !important;
  flex-shrink: 0;
}
.cascade-builder-surface #drawflow .drawflow-node.ApplicantSource .node-icon-container {
  width: 32px !important; height: 32px !important;
}
/* Type: title 14/600 (was 500); subtitles 11px like the prototype */
.cascade-builder-surface #drawflow .base-node .font-medium.text-sm { font-weight: 600; }
.cascade-builder-surface #drawflow .base-node .text-xs { font-size: 11px; line-height: 15px; }
.cascade-builder-surface #drawflow .base-node .flex-col { gap: 2px; }

/* Selection: the prototype ring (2px paper offset + brand) instead of a
   recolored border. Decisions keep their dashed border when selected.
   (#drawflow in the selector so it outweighs the id-bearing base rule.) */
.cascade-builder-surface #drawflow .drawflow .drawflow-node.selected .base-node {
  border-color: var(--cb-line) !important;
  box-shadow: 0 0 0 2px var(--cb-paper), 0 0 0 4px var(--cb-brand), var(--cb-shadow-node);
}
.cascade-builder-surface #drawflow .drawflow-node.IfElse.selected .base-node,
.cascade-builder-surface #drawflow .drawflow-node.Condition.selected .base-node,
.cascade-builder-surface #drawflow .drawflow-node.Decision.selected .base-node {
  border-style: dashed !important;
  border-color: rgba(20, 17, 29, 0.2) !important;
}
.cascade-builder-surface #drawflow .drawflow-node.ApplicantSource.selected .base-node {
  border-color: var(--cb-ink) !important;
}

/* Handles: the prototype's always-visible 10px dots with a 2px white ring.
   Rendered as ::before on the (invisible, wide) drag strips so Drawflow's
   hit detection keeps working. Targets faint, sources ink, decision branches
   in their outcome colors. */
#drawflow.vertical .drawflow .drawflow-node .input::before,
#drawflow.vertical .drawflow .drawflow-node .output::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 999px;
  background: #14111d;
  border: 2px solid #ffffff;
  box-sizing: content-box;
  pointer-events: none;
}
#drawflow.vertical .drawflow .drawflow-node .output::before { background: #9c9ba0; }
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_1::before,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_1::before,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_1::before { background: #12935a; }
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_2::before,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_2::before,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_2::before { background: #b97714; }
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_3::before,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_3::before,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_3::before { background: #d7483b; }
/* Decision dots sit at the strip's top edge (right below the node) */
#drawflow.vertical .drawflow .drawflow-node.IfElse .output::before,
#drawflow.vertical .drawflow .drawflow-node.Condition .output::before,
#drawflow.vertical .drawflow .drawflow-node.Decision .output::before { top: 7px; }

/* Node menu: the prototype's faces carry no chrome — reveal ours on hover only */
.cascade-builder-surface #drawflow .node-menu-btn { opacity: 0; transition: opacity 0.12s ease; }
.cascade-builder-surface #drawflow .base-node:hover .node-menu-btn,
.cascade-builder-surface #drawflow .drawflow-node.selected .node-menu-btn { opacity: 1; }

/* Decision port cues: the prototype carries branch identity in the colored
   handle dots + Pass/Fail/Review wire labels, not port-label pills. */
.cascade-builder-surface #drawflow.vertical .drawflow .drawflow-node.IfElse .output::after,
.cascade-builder-surface #drawflow.vertical .drawflow .drawflow-node.Condition .output::after,
.cascade-builder-surface #drawflow.vertical .drawflow .drawflow-node.Decision .output::after {
  display: none !important;
}

/* Connect-drag preview: the prototype's thin quiet line (1px #b1b1b7), not a
   thick marching-ants dash. */
.cascade-builder-surface #drawflow .drawflow .connection.connection--preview .main-path {
  stroke: #b1b1b7 !important;
  stroke-width: 1.5px !important;
  stroke-dasharray: none !important;
  animation: none !important;
}

/* Test-run trace — prototype-measured (react-flow `animated` edge): visited
   wires turn product-blue dashes (2.75px, 5px dash, 0.5s), visited
   nodes return to full opacity with NO glow, everything else dims to 0.38.
   Must out-rank the neutral-wire !important overrides above. */
.cascade-builder-surface #drawflow .drawflow .connection.connection--flowing .main-path,
.cascade-builder-surface #drawflow .drawflow .connection.connection--flowing.connection--decision-pass .main-path,
.cascade-builder-surface #drawflow .drawflow .connection.connection--flowing.connection--decision-human-review .main-path,
.cascade-builder-surface #drawflow .drawflow .connection.connection--flowing.connection--decision-fail .main-path {
  stroke: var(--color-product-accent, #2b4ae8) !important;
  stroke-width: 2.75px !important;
  stroke-dasharray: 5 !important;
  animation: connection-flowing-proto 0.5s linear infinite;
  filter: none;
}
@keyframes connection-flowing-proto {
  from { stroke-dashoffset: 10; }
  to   { stroke-dashoffset: 0; }
}
.cascade-builder-surface .drawflow-node.test-trace-dim { opacity: 0.38; }
.cascade-builder-surface .drawflow-node.test-trace-active { filter: none; }

/* ---- Applicants page (prototype /applicants, measured 2026-08-12) ----
   Token remap comes from .cascade-list-surface; these are the page-specific
   metrics: 30/400 display title, 16/24 lede, bordered signal chips, sand
   avatars, 8px card radii, prototype hover. */
.cascade-list-surface .applicants-title { font-weight: 400; letter-spacing: -0.75px; }
/* Stat tiles: white cards, r8, 12/16 faint label, display value */
.cascade-list-surface .stat-tile { border-radius: 8px; border-color: var(--cb-line); }
.cascade-list-surface .stat-tile-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--color-muted); }
.cascade-list-surface .stat-tile-value { font-size: 24px; line-height: 32px; font-weight: 400; color: var(--cb-ink); }

/* Applicant cards: r8 hairline, prototype hover (line-strong + card shadow) */
.cascade-list-surface .applicant-card {
  border-radius: 8px; border-color: var(--cb-line);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cascade-list-surface .applicant-card:hover {
  border-color: var(--cb-line-strong);
  box-shadow: var(--cb-shadow-node);
}
.cascade-list-surface .applicant-card .avatar {
  width: 44px; height: 44px;
  background: var(--cb-sand); color: #393641;
  font-size: 14px; line-height: 20px; font-weight: 600;
}

/* Signal chips: the prototype's bordered soft pills in outcome tones */
.cascade-list-surface .applicant-card .status-pill {
  border: 1px solid transparent;
  font-size: 11px; line-height: 16px; font-weight: 500;
  padding: 2px 8px;
}
/* Ink text on the cb soft fills (QA APP-RT-03): the prototype cb text tones
   fail AA at 11px — approve 4.19:1, review 3.25:1, reject 3.23:1. Fills and
   rings keep the prototype values; only the text darkens to the ink tokens. */
.cascade-list-surface .applicant-card .status-pill-green {
  background: var(--cb-approve-soft); color: var(--color-token-green-ink); border-color: var(--cb-approve-ring);
}
.cascade-list-surface .applicant-card .status-pill-yellow {
  background: var(--cb-review-soft); color: var(--color-token-yellow-ink); border-color: var(--cb-review-ring);
}
.cascade-list-surface .applicant-card .status-pill-red {
  background: var(--cb-reject-soft); color: var(--color-token-red-ink); border-color: var(--cb-reject-ring);
}
.cascade-list-surface .applicant-card .status-pill-gray {
  background: var(--cb-sand); color: #6b6870; border-color: var(--cb-line);
}
.cascade-list-surface .applicant-card .status-pill .status-pill-dot { display: none; }

/* Surface chips: outline pills like the prototype */
.cascade-list-surface .surface-chip {
  border: 1px solid var(--cb-line); background: #ffffff;
  font-size: 11px; line-height: 16px; font-weight: 500; color: #393641;
  border-radius: 999px; padding: 2px 8px;
}

/* ---- Applicant summary modal (prototype /applicants modal, measured) ---- */
.cascade-list-surface .applicant-modal-dialog {
  position: relative;
  width: 672px; max-width: 94vw; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: #ffffff; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.cascade-list-surface .applicant-modal-close {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: #6b6870; cursor: pointer;
}
.cascade-list-surface .applicant-modal-close:hover { background: var(--cb-sand); color: var(--cb-ink); }
.cascade-list-surface .applicant-modal-close svg { width: 16px; height: 16px; }

.cascade-list-surface .applicant-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 56px 16px 24px; border-bottom: 1px solid var(--cb-line);
}
.cascade-list-surface .applicant-modal-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cascade-list-surface .applicant-modal-avatar {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--cb-sand); color: #393641;
  font-size: 16px; line-height: 24px; font-weight: 600;
}
.cascade-list-surface .applicant-modal-name { margin: 0; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--cb-ink); }
.cascade-list-surface .applicant-modal-sub { margin: 0; font-size: 12px; line-height: 16px; color: #6b6870; }
.cascade-list-surface .applicant-modal-report-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 6px 12px; border-radius: 8px;
  background: var(--cb-ink); color: var(--cb-paper);
  font-size: 12px; line-height: 16px; font-weight: 600; text-decoration: none;
  transition: background-color 0.15s ease;
}
.cascade-list-surface .applicant-modal-report-btn:hover { background: #393641; }
.cascade-list-surface .applicant-modal-report-btn svg { width: 14px; height: 14px; }

.cascade-list-surface .applicant-modal-body {
  display: flex; flex-direction: column; gap: 20px;
  max-height: 70vh; overflow-y: auto; padding: 20px 24px;
}
.cascade-list-surface .applicant-modal-info {
  border: 1px solid var(--cb-brand-100); border-radius: 8px;
  background: rgba(242, 244, 255, 0.5); padding: 12px 16px;
}
.cascade-list-surface .applicant-modal-info-head {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 12px; line-height: 16px; font-weight: 600; color: var(--cb-ink);
}
.cascade-list-surface .applicant-modal-info-head svg { width: 14px; height: 14px; }
.cascade-list-surface .applicant-modal-info-text { margin: 4px 0 0; font-size: 12px; line-height: 1.625; color: #393641; }
.cascade-list-surface .applicant-modal-info-text strong { font-weight: 500; color: var(--cb-ink); }

.cascade-list-surface .applicant-modal-section-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--cb-ink); }
.cascade-list-surface .applicant-modal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cascade-list-surface .applicant-modal-chip {
  display: inline-flex; align-items: center;
  border: 1px solid transparent; border-radius: 999px;
  padding: 4px 10px; font-size: 12px; line-height: 16px; font-weight: 500;
}
.cascade-list-surface .applicant-modal-chip-good { background: var(--cb-approve-soft); color: var(--cb-approve); border-color: var(--cb-approve-ring); }
.cascade-list-surface .applicant-modal-chip-warn { background: var(--cb-review-soft); color: var(--cb-review); border-color: var(--cb-review-ring); }
.cascade-list-surface .applicant-modal-chip-bad  { background: var(--cb-reject-soft); color: var(--cb-reject); border-color: var(--cb-reject-ring); }
.cascade-list-surface .applicant-modal-chip-neutral { background: var(--cb-sand); color: #6b6870; border-color: var(--cb-line); }
.cascade-list-surface .applicant-modal-empty { font-size: 12px; color: var(--color-muted); }

.cascade-list-surface .applicant-modal-activity { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cascade-list-surface .applicant-modal-activity li { display: flex; gap: 12px; }
.cascade-list-surface .applicant-modal-activity-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; margin-top: 2px; border-radius: 999px;
  border: 1px solid var(--cb-line); background: #ffffff; color: #6b6870;
}
.cascade-list-surface .applicant-modal-activity-icon svg { width: 14px; height: 14px; }
.cascade-list-surface .applicant-modal-activity-body { min-width: 0; flex: 1; }
.cascade-list-surface .applicant-modal-activity-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cascade-list-surface .applicant-modal-activity-name {
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cb-ink); text-decoration: none;
}
.cascade-list-surface .applicant-modal-activity-name:hover { text-decoration: underline; }
.cascade-list-surface .applicant-modal-outcome {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 2px 8px;
  font-size: 11px; line-height: 16px; font-weight: 600;
}
.cascade-list-surface .applicant-modal-outcome-approve { background: var(--cb-approve-soft); color: var(--cb-approve); }
.cascade-list-surface .applicant-modal-outcome-decline { background: var(--cb-reject-soft); color: var(--cb-reject); }
.cascade-list-surface .applicant-modal-outcome-review  { background: var(--cb-review-soft); color: var(--cb-review); }
.cascade-list-surface .applicant-modal-activity-meta { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: #6b6870; }
.cascade-list-surface .applicant-modal-activity-ref {
  display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 4px;
  background: var(--cb-sand); color: var(--color-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; line-height: 15px;
}
.cascade-list-surface .applicant-modal-more { margin: 10px 0 0; font-size: 11px; color: var(--color-muted); }

/* ==========================================================================
   Skip link — first focusable element on every operator page. Visually hidden
   until focused, then pinned top-left over the chrome. Added with the <main>
   landmark: without both, reaching page content by keyboard meant tabbing the
   banner CTA and the whole nav rail on every page (WCAG 2.4.1).
   ========================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}

/* <main> is only ever focused programmatically (by the skip link), so it takes
   no visible ring — the ring belongs to the control the user is actually on.
   Keyboard focus remains correct; only the paint is suppressed. */
#main:focus {
  outline: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline: 3px solid var(--color-token-yellow);
  outline-offset: 2px;
}

/* ==========================================================================
   Status + accent TEXT utilities.

   CLAUDE.md and DESIGN_SYSTEM.md have documented these four class names for a
   long time and 38 operator views use them, but they were never defined
   anywhere outside the .tiq scope — so on the operator surface they were inert
   and the text simply inherited its parent colour. "Danger" copy in the admin
   delete/revoke modals was not red; the dashboard's pending-approval counts
   were not amber.

   They resolve to the AA-safe INK values, not the raw brand ones: a class
   named text-* sets text, and the brand green/yellow/red measure 1.77, 1.69
   and 3.62:1 on white. The brand values remain correct for fills, dots and
   borders, which carry no contrast requirement and keep using the
   --color-token-* custom properties directly.
   ========================================================================== */
.text-primary { color: var(--color-primary); }
.text-token-green { color: var(--color-token-green-ink); }
.text-token-yellow { color: var(--color-token-yellow-ink); }
.text-token-red { color: var(--color-token-red-ink); }

/* Visually hidden but available to assistive tech. Used for live regions that
   announce results changing in place (the Applicants list swaps its results
   container with no page load, so there is otherwise no signal). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   2026-08-18 QA run — responsive fixes
   ========================================================================== */

/* APP-DEF-11: .search-bar has a fixed 333px width and sat in a flex row that
   let it overflow its container. At 390px the field rendered 355px wide inside
   a 341px column, running off-screen along with its clear button and forcing
   the content pane to scroll sideways. The tiles beside it already wrapped
   correctly; only the field did not shrink. */
.search-bar {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
}

/* DASH-DEF-01 / DEV-BUG-14 (history): the original fixed "Getting started"
   dock overlapped the dashboard stat grid at every width (42% of the viewport
   at 390) with only a 22px close affordance, so it was moved into the page
   flow. It is fixed bottom-right again BY DESIGN (2026-08 UX round) — the
   difference from the buggy original is the mitigation the first version
   lacked: the header X collapses it to a 44px
   bubble, and the collapsed state is remembered across visits (localStorage).
   If overlap complaints return, tune the collapse affordance — don't silently
   un-float the dock.
   2026-09-11 (R16-11): the overlap came back at narrow widths, where no amount
   of collapse affordance helps because the dock is 300px of a ~340-720px
   column. The float is KEPT above 1200px as the UX round intended; at or below
   the dashboard's own 1200px breakpoint the dock drops into the page flow.
   See the R16-11 block in the 2026-09-11 section at the end of this file. */


/* ==========================================================================
   Vendor + category tints for the Explore products catalogue.
   Mirrors BillingProduct::VENDOR_ICON_BG_COLORS and CATEGORY_ICONS. These
   were 56 inline `style="background-color: #RRGGBB"` attributes, which is a
   CLAUDE.md rule-1 violation and the kind of drift that makes a future theme
   pass miss elements silently. Keep in step with the model constants.
   ========================================================================== */
:root {
  --vendor-bg-exp: #DBEAFE;
  --vendor-bg-tuc: #D1FAE5;
  --vendor-bg-eqf: #FEE2E2;
  --vendor-bg-lnr: #EDE9FE;
  --vendor-bg-cic: #FEF3C7;
  --vendor-bg-crs: #ECFCCB;
  --vendor-bg-pps: #CCFBF1;
  --vendor-bg-mcl: #E0E7FF;
  --vendor-bg-kcb: #FCE7F3;
  --vendor-bg-cic-tn: #FFEDD5;
  --vendor-bg-service-link: #D1FAE5;
  --vendor-bg-fico: #DBEAFE;
  --vendor-bg-ubq: #CFFAFE;
  --vendor-bg-at-data: #F1F5F9;
  --vendor-bg-default: #F3F4F6;
  --category-bg-consumer-credit: #EDE9FE;
  --category-bg-income-and-assets: #D1FAE5;
  --category-bg-business-credit: #DBEAFE;
  --category-bg-identity-and-fraud: #FEE2E2;
  --category-bg-public-records: #FEF3C7;
  --category-bg-alternative-credit: #E0E7FF;
  --category-bg-externally-hosted: #F3E8FF;
  --category-bg-prescreen: #CFFAFE;
  --category-bg-iscreen: #CCFBF1;
  --category-bg-b2c-plan: #FCE7F3;
  --category-bg-merge-products: #E0F2FE;
  --category-bg-bundle: #F5F5F4;
  --category-bg-default: #F3F4F6;
}

.vendor-bg-exp { background-color: var(--vendor-bg-exp); }
.vendor-bg-tuc { background-color: var(--vendor-bg-tuc); }
.vendor-bg-eqf { background-color: var(--vendor-bg-eqf); }
.vendor-bg-lnr { background-color: var(--vendor-bg-lnr); }
.vendor-bg-cic { background-color: var(--vendor-bg-cic); }
.vendor-bg-crs { background-color: var(--vendor-bg-crs); }
.vendor-bg-pps { background-color: var(--vendor-bg-pps); }
.vendor-bg-mcl { background-color: var(--vendor-bg-mcl); }
.vendor-bg-kcb { background-color: var(--vendor-bg-kcb); }
.vendor-bg-cic-tn { background-color: var(--vendor-bg-cic-tn); }
.vendor-bg-service-link { background-color: var(--vendor-bg-service-link); }
.vendor-bg-fico { background-color: var(--vendor-bg-fico); }
.vendor-bg-ubq { background-color: var(--vendor-bg-ubq); }
.vendor-bg-at-data { background-color: var(--vendor-bg-at-data); }
.vendor-bg-default { background-color: var(--vendor-bg-default); }
.category-bg-consumer-credit { background-color: var(--category-bg-consumer-credit); }
.category-bg-income-and-assets { background-color: var(--category-bg-income-and-assets); }
.category-bg-business-credit { background-color: var(--category-bg-business-credit); }
.category-bg-identity-and-fraud { background-color: var(--category-bg-identity-and-fraud); }
.category-bg-public-records { background-color: var(--category-bg-public-records); }
.category-bg-alternative-credit { background-color: var(--category-bg-alternative-credit); }
.category-bg-externally-hosted { background-color: var(--category-bg-externally-hosted); }
.category-bg-prescreen { background-color: var(--category-bg-prescreen); }
.category-bg-iscreen { background-color: var(--category-bg-iscreen); }
.category-bg-b2c-plan { background-color: var(--category-bg-b2c-plan); }
.category-bg-merge-products { background-color: var(--category-bg-merge-products); }
.category-bg-bundle { background-color: var(--category-bg-bundle); }
.category-bg-default { background-color: var(--category-bg-default); }

/* ============================================================================
   Applicant report PDF downloads (Applicants list rows + applicant summary
   modal). The PDF link on a row is a positioned sibling of the card, never a
   child: the whole card is already an <a>, and a link cannot nest another.
   ============================================================================ */
.applicant-card-wrap { position: relative; }
/* Reserve the slot between the meta block and the chevron so no card content
   ever sits under the icon; the chevron keeps the edge. */
.applicant-card-wrap .applicant-card-chevron { margin-left: 36px; }
.applicant-card-pdf {
  position: absolute; top: 50%; right: 44px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  color: var(--color-muted); text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.applicant-card-pdf svg { width: 16px; height: 16px; }
.applicant-card-pdf:hover { background: var(--cb-sand); color: var(--cb-ink); }
.applicant-card-pdf:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; color: var(--cb-ink); }
/* Phone widths: the chevron is hidden and the meta block wraps to its own
   row, so the icon takes the card's top-right corner instead; the extra
   padding keeps the name row clear of it. */
@media (max-width: 640px) {
  .applicant-card-wrap .applicant-card { padding-right: 52px; }
  .applicant-card-pdf { top: 12px; right: 12px; transform: none; }
}

/* Summary modal: "View full report" + a ghost "Download PDF" beside it */
.cascade-list-surface .applicant-modal-header-actions {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 8px; flex-shrink: 0;
}
.cascade-list-surface .applicant-modal-pdf-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--cb-line); background: transparent; color: var(--cb-ink);
  font-size: 12px; line-height: 16px; font-weight: 600; text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cascade-list-surface .applicant-modal-pdf-btn:hover { background: var(--cb-sand); border-color: var(--cb-line-strong); }
.cascade-list-surface .applicant-modal-pdf-btn svg { width: 14px; height: 14px; }

/* ==========================================================================
   2026-09-11 QA run (R16 + reviewer PDF) — overlap, overflow and modal sizing
   ========================================================================== */

/* R16-11: the "Get set up" dock is fixed bottom-right BY DESIGN above this
   breakpoint (see the DASH-DEF-01 note above — do not un-float it wholesale).
   Below it the content column is narrow enough that the 300px dock lands on
   the entry cards (2 of 4 covered at 390px, 1 at 1024px), so from here down it
   joins the page flow beneath the panels instead. 1200px is the dashboard's
   OWN existing breakpoint — the one two rules up that already drops .dash-stats
   to two columns — not a new one.
   position: relative, never static: .dash-gs-dismiss-x and .dash-gs-hint are
   absolutely positioned against the dock and would otherwise re-anchor to the
   initial containing block and fly off.
   SCOPE OF THIS RULE (measured 2026-09-11, real /dashboard with the dock
   rendered): above the breakpoint the pinned dock still occupies the viewport's
   bottom-right 358x288 band, so it overlays — and, because .dash-gs-dock's
   pointer-events: none is re-enabled on its children, genuinely click-blocks —
   whatever sits there. That residual is a function of viewport HEIGHT, not
   width: the overlap appears wherever (viewport height - 288) is less than the
   dashboard's content height, i.e. at 1280x720, 1440x780, 1920x800 alike, and
   disappears at 1920x1080 / 1440x1200. Raising this width breakpoint therefore
   does NOT address it, and neither does a taller .dash padding-bottom (tested:
   288px leaves the scroll-top overlap byte-identical at 309x264px and only
   grows maxScroll 134 -> 326). The pin is a 2026-08 UX decision, so the fix
   belongs in the collapse affordance the note above nominates — the dock should
   open collapsed when it would land on content — not in this file. */
@media (max-width: 1200px) {
  .dash-gs-dock { position: relative; right: auto; bottom: auto; margin-top: 24px; }
  /* In flow the panel spans the column; the viewport-relative cap and its own
     scrollbar only made sense while it floated. box-sizing matters here — the
     panel is content-box, so a bare width: 100% bleeds its 16px padding + 1px
     border (34px) past the column, and `align-items: flex-end` puts all of the
     spill on the left (same trap the .dash-gs-cta note above records). */
  .dash-gs { box-sizing: border-box; width: 100%; max-width: none; max-height: none; overflow-y: visible; }
  /* The 96px gutter existed only to keep the last panel clear of the float, so
     it comes off only where the float is actually there. The dock renders just
     for current_user.show_getting_started? (dashboard/index.html.erb), and when
     it does it is .dash's immediately-following sibling inside
     .page-content-inner — measured: [DIV.dash, DIV.dash-gs-dock]. Unscoped,
     this rule also took 96px off every activated/dismissed account's dashboard
     below 1200px (measured on the real /dashboard with no dock in the DOM:
     padding-bottom 96px at 1201, 0px at 1199), which is blast radius outside
     the defect. :has() is already used throughout this stylesheet. */
  .dash:has(+ .dash-gs-dock) { padding-bottom: 0; }
  /* The CTA was stretched to 100% to fill the 300px dock; across a full content
     column it would read as a banner rather than a button. */
  .dash-gs-cta { width: auto; }
}

/* R16-14 / P-06: the Single Reports pane scrolled sideways inside
   .page-content-inner (whose unspecified overflow-x computes to auto beside
   overflow-y: auto, so it scrolls horizontally while the document does not).
   Cause: in the quiet state the grid track is 0 wide, but .ds-card's 1px border
   plus .srb-pane's 20px padding floor the collapsed pane's border box at 42px,
   and translateX(18px) pushes it 18px further — 60px of scrollable overflow
   past the grid. Zeroing the box makes a zero-width track actually zero-width.
   height: 0 removes the same box's phantom row height (its content laid out at
   content-width 0, one word per line, reserving hundreds of px of invisible
   grid row). Not overflow-x: hidden on the grid or pane: the plan rows open a
   .srb-popover Configure dropdown that has to escape the card (CLAUDE.md rule
   6). The properties are deliberately absent from the rule's transition list —
   they snap while the pane is invisible. */
.srb-grid.is-quiet > .srb-pane {
  padding: 0;
  border-width: 0;
  height: 0;
}

/* P-01: the scrollbar the reviewer photographed on the schedule-a-call modal is
   Calendly's OWN, inside the cross-origin iframe — unstylable from here — and it
   appeared because height: 85vh threw away 15% of the viewport on exactly the
   short Windows laptops where Calendly (which wants ~700px) had none to spare.
   Fix by sizing: take every available pixel up to a cap, using the same
   min(px, calc(100vh - 48px)) idiom as .aa-modal (48px = .modal-overlay's
   24px top+bottom padding). Where the viewport is still too short, the iframe
   holds its own floor and OUR panel scrolls with the thin subtle scrollbar
   below, so Calendly never has to — and the widget is never clipped. */
.calendly-modal-content {
  height: min(820px, calc(100vh - 48px));
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-mirage-20, #CFD0D5) transparent;
}
.calendly-modal-content::-webkit-scrollbar { width: 6px; }
.calendly-modal-content::-webkit-scrollbar-track { background: transparent; }
.calendly-modal-content::-webkit-scrollbar-thumb {
  background-color: var(--color-mirage-20, #CFD0D5);
  border-radius: 3px;
}
.calendly-modal-content::-webkit-scrollbar-thumb:hover { background-color: var(--color-mirage-30, #B6B8C0); }
/* display: block kills the inline baseline gap that made height: 100% overflow
   the panel by ~4px and get silently clipped; min-height is the widget's floor. */
.calendly-modal-content iframe {
  display: block;
  height: 100%;
  min-height: 712px;
}
/* Sticky, not absolute, so Close stays reachable once the panel scrolls. The
   auto left margin puts it back on the right and the negative bottom margin
   cancels the row it now occupies, so the iframe still starts at the top. */
.calendly-modal-close {
  position: sticky;
  top: 8px;
  right: auto;
  margin: 8px 12px -44px auto;
}

/* --------------------------------------------------------------------------
   Rules below are groundwork for follow-up markup changes in this same QA run
   (this stylesheet has a single owner this pass). Each is inert until the
   matching markup lands.
   -------------------------------------------------------------------------- */

/* P-03 (show/hide password on /login and /signup): no new CSS — the affix
   pattern at ~14906 (.form-field-input-wrapper / .form-field-input-with-action /
   .form-field-input-action / .form-field-eye, already driving the intake SSN
   reveal) is the one to reuse verbatim. Only gap: the action button had no
   keyboard focus ring, which a password toggle needs. */
.form-field-input-action:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: 0 8px 8px 0;
}

/* P-05 (sidebar account dropdown): the email must sit on one line, ellipsised,
   with a copy button beside it and Sign out below the divider.
   IMPORTANT: .sidebar-account-menu is a WHITE popover that merely overhangs the
   navy rail (background: var(--color-white), see ~16416, and the focus-ring
   block at ~16683 already files it under "light surface"). It therefore takes
   Motion light tokens — the --color-sidebar-* family is white-on-navy ink and
   would be invisible here.
   Truncation follows the house pattern used by .sidebar-ws-company /
   .sidebar-ws-name in this same component: the three ellipsis properties on the
   item plus min-width: 0 on the flex child (which .truncate alone does not give
   you). The email rule is overridden through the new row rather than rewritten,
   so the popover still renders correctly until the markup lands. */
.sidebar-account-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 8px 8px;
  border-bottom: 1px solid var(--color-link-water);
  margin-bottom: 6px;
}
.sidebar-account-row .sidebar-account-email {
  flex: 1;
  min-width: 0;
  padding: 0;
  margin-bottom: 0;
  border-bottom: 0;
  word-break: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Same icon-button shape as .dash-gs-close / .builder-cascade-id-copy. */
.sidebar-account-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
.sidebar-account-copy svg { width: 14px; height: 14px; }
.sidebar-account-copy:hover { background-color: var(--color-mirage-05); color: var(--color-primary); }
.sidebar-account-copy:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Empty until clipboard#copy fills it, and :empty keeps it from reserving space
   (same trick as .builder-cascade-id-copied). */
.sidebar-account-copied {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-token-green-ink);
}
.sidebar-account-copied:empty { display: none; }
/* Lets Sign out carry a leading icon next to its label; identical rendering
   while the button is still text-only. */
.sidebar-account-menu .sidebar-account-signout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sidebar-account-menu .sidebar-account-signout svg { flex: 0 0 auto; width: 16px; height: 16px; }

/* P-07: the ST <select> width lives with .aw-grid3 at ~16827 (widened there). */

/* P-03 follow-up: keep the validation error border once the password is
   REVEALED. `.form-field-input--error` is a bare class (0,1,0) and sets only
   border-color, while the base field rule at ~2254 is an attribute selector
   (0,1,1) carrying the `border` SHORTHAND. While the field is type="password"
   that base rule does not match it at all, so the red border shows; the moment
   password_reveal#toggle flips the input to type="text" the base rule starts
   matching and out-ranks the error colour, silently dropping the only visual
   error cue exactly when the value is on screen. Qualifying the class with the
   element (0,2,0) wins for both types; the bare class is kept for the
   non-<input> users of this modifier. */
input.form-field-input--error,
.form-field-input--error {
  border-color: var(--color-token-red);
}