/* Winston V3 — Strategy Lab v2.
 *
 * Wedge-first layout: chat hero pinned under the sleeve picker; narrative
 * summary card; hero-knobs row visible by default with a toggle to all
 * settings grouped by trader bucket; versions list at the bottom.
 *
 * Single-column on desktop AND mobile — the v1 left/right grid put the
 * chat below 6 scrolls on phones. v2 stacks vertically with the wedge
 * always above the knob density.
 */

#screen-strategy-lab {
  padding: var(--space-5) var(--space-6) var(--space-8);
  /* Operator surface — use the full content width (no narrow column).
   * Trading Desk + Operations already render full-width; the lab should
   * match so settings + chat fit side-by-side on a 1440+ display and
   * the operator doesn't scroll to see all knobs.
   */
  max-width: 100%;
  margin: 0;
}

@media (max-width: 768px) {
  #screen-strategy-lab {
    padding: var(--space-4) var(--space-4) var(--space-7);
  }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.lab-hero {
  margin-bottom: var(--space-3);
}

.lab-hero h1 {
  font-size: var(--type-2xl);
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.lab-hero-sub {
  margin: 0;
  font-size: var(--type-sm);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 760px;
}

/* ── Sleeve picker tabs ────────────────────────────────────────────────── */

.lab-sleeve-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.lab-sleeve-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
  text-align: left;
  font: inherit;
  color: var(--ink);
  flex: 0 0 auto;
}

.lab-sleeve-pill:hover {
  border-color: var(--ink-muted);
}

.lab-sleeve-pill:active {
  transform: translateY(1px);
}

/* Selection state — "this sleeve is what you're currently VIEWING." A bold
 * underline + ink color shift, NOT the accent fill. We reserve the accent
 * fill for "currently running in production" (version-active pill, hero
 * chat). Keeps the two meanings visually distinct.
 */
.lab-sleeve-pill.is-active {
  border-color: var(--ink);
  background: var(--surface-raised);
  box-shadow: inset 0 -3px 0 var(--ink);
}

.lab-sleeve-pill.is-active .lab-sleeve-name {
  color: var(--ink);
  font-weight: 700;
}

.lab-sleeve-pill.is-dormant {
  opacity: 0.7;
}

.lab-sleeve-pill.is-dormant.is-active {
  opacity: 1;   /* don't dim when focused */
}

.lab-sleeve-pill-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lab-sleeve-name {
  font-weight: 600;
  font-size: var(--type-sm);
  text-transform: capitalize;
}

.lab-sleeve-dormant-chip {
  display: inline-block;
  padding: 1px 6px;
  font-size: var(--type-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--surface-raised);
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.lab-sleeve-pill-meta {
  font-size: var(--type-xs);
}

/* ── Hero chat (the wedge made physical) ──────────────────────────────── */

/* Compact sticky chat strip. v2-first-pass had a 3-row hero (input row +
 * suggestion-chip block + foot copy) that consumed ~180px of vertical
 * real estate. Operator feedback was "scroll to see settings, hard to
 * chat" — the foot copy was redundant explanation, and the chip block
 * is fine inline with the input. Strip is now single-row + a compact
 * chip row, ~80px tall, settings visible above the fold.
 */
.lab-hero-chat {
  position: sticky;
  top: var(--space-3);
  z-index: 5;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px color-mix(in oklab, var(--accent) 16%, transparent);
}

.lab-hero-chat-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lab-hero-chat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink, white);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 13px;
}

.lab-hero-chat-input {
  flex: 1;
  min-width: 0;
  padding: 6px var(--space-3);
  font: inherit;
  font-size: var(--type-sm);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.lab-hero-chat-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 24%, transparent);
}

.lab-hero-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-2);
}

.lab-hero-chip {
  cursor: pointer;
  padding: 3px 10px;
  font-size: var(--type-xs);
}

.lab-hero-chip:hover {
  background: var(--accent);
  color: var(--accent-ink, white);
  border-color: var(--accent);
}

/* Foot copy is hidden by default — the affordance is self-explanatory.
 * If you want to keep it for first-time orientation, gate via a class
 * the JS removes after first use.
 */
.lab-hero-chat-foot {
  display: none;
}

@media (max-width: 640px) {
  .lab-hero-chat {
    position: static;   /* don't fight the iOS keyboard */
  }
  .lab-hero-chat-row {
    flex-direction: column;
    align-items: stretch;
  }
  .lab-hero-chat-row .btn {
    width: 100%;
  }
}

/* ── Dormant banner ────────────────────────────────────────────────────── */

.lab-dormant-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklab, var(--warn, #c89030) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--warn, #c89030) 50%, var(--rule));
  border-left: 3px solid var(--warn, #c89030);
  border-radius: var(--radius-sm);
  font-size: var(--type-sm);
  line-height: 1.55;
}

.lab-dormant-icon {
  font-size: 18px;
  line-height: 1;
}

/* ── Narrative summary card ────────────────────────────────────────────── */

.lab-summary {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.lab-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.lab-summary-head h2 {
  margin: 0;
  font-size: var(--type-lg);
  font-weight: 600;
}

.lab-summary-sleeve {
  text-transform: capitalize;
  color: var(--accent);
}

.lab-summary-version {
  font-size: var(--type-sm);
  color: var(--ink-muted);
}

.lab-summary-line {
  margin: 0 0 var(--space-3);
  font-size: var(--type-md);
  line-height: 1.55;
}

.lab-summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.lab-summary-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lab-summary-stats dt {
  font-size: var(--type-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.lab-summary-stats dd {
  margin: 0;
  font-size: var(--type-md);
}

.lab-summary-activity {
  margin: 0;
  font-size: var(--type-xs);
  font-style: italic;
}

/* ── Content grid: settings + versions ────────────────────────────────── */
/* Single column. The previous 1fr+360px side-rail at --bp-xl stole the
 * column the label cell needed — at 2240px the settings card ended up
 * ~724px wide, and inside a 2-col bucket grid the label collapsed to
 * "Sto…" / "Po…" / "Mi…". Versions belongs under Settings, not beside
 * it: operators scan top-to-bottom (tune → save → see history), not
 * left-to-right.
 */
.lab-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* ── Knobs section ─────────────────────────────────────────────────────── */

.lab-knobs {
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}

.lab-knobs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.lab-knobs-head h2 {
  margin: 0;
  font-size: var(--type-lg);
  font-weight: 600;
}

.lab-knobs-sub {
  margin: var(--space-1) 0 0;
  font-size: var(--type-sm);
  max-width: 540px;
}

.lab-knobs-toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-raised);
}

.lab-knobs-toggle-btn {
  padding: 6px 14px;
  font: inherit;
  font-size: var(--type-sm);
  font-weight: 500;
  background: transparent;
  color: var(--ink-muted);
  border: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.lab-knobs-toggle-btn:hover {
  color: var(--ink);
}

/* View-mode toggle uses an INK fill, not the accent fill, so it doesn't
 * compete with the version-active pill (which IS accent). Same vocabulary
 * as the sleeve picker's selection state — ink = "what you're viewing."
 */
.lab-knobs-toggle-btn.is-active {
  background: var(--ink);
  color: var(--surface);
}

.lab-knobs-empty {
  padding: var(--space-4);
  text-align: center;
}

/* Single-column bucket stack. The prior 2-col grid at --bp-xl gave each
 * bucket ~332px inner width, leaving the row's label cell negative space
 * after subtracting value (84) + band (130) + actions (~80) + 3×gap.
 * Buckets stacked vertically let the label flex into the full row width
 * (~1500px @ 2240vp) and "Sector concentration cap" renders without
 * ellipsis.
 */
.lab-knob-buckets-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.lab-knob-bucket {
  margin-bottom: 0;
  min-width: 0;   /* let table cells truncate / wrap inside the grid cell */
}

.lab-knob-bucket:last-child {
  margin-bottom: 0;
}

.lab-knob-bucket-head {
  margin-bottom: var(--space-1);
}

.lab-knob-bucket-head h3 {
  margin: 0;
  font-size: var(--type-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.lab-knob-bucket-head span {
  display: none;   /* bucket hint is redundant once the rows are visible */
  margin-top: 2px;
  font-size: var(--type-xs);
  line-height: 1.5;
}

/* ── Knob list (flex-row, NOT a table) ───────────────────────────────────
 * v2c used a <table> per bucket. At wide viewports with two buckets
 * side-by-side, the per-bucket auto-table-layout column widths drifted
 * — value/band/actions cells lost their pinned widths and the action
 * buttons rendered visually on top of the value text. v2e replaces the
 * table with a flex-row layout per knob. Each section's width is fixed
 * in CSS, so adjacent buckets render identically regardless of label
 * length, and there's no auto-sizing to fight.
 */
.lab-knob-list {
  display: flex;
  flex-direction: column;
}

.lab-knob-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--type-sm);
  cursor: help;   /* signals the title= tooltip */
}

.lab-knob-row:last-child {
  border-bottom: 0;
}

.lab-knob-row:hover {
  background: color-mix(in oklab, var(--ink) 3%, transparent);
}

.lab-knob-row.is-dirty {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}

.lab-knob-row.is-warn .lab-knob-value-num {
  color: var(--warn, #c89030);
  font-weight: 600;
}

/* Section widths — explicit so rows align top-to-bottom within a bucket.
 * The label flexes; everything else is fixed. min-width 180px guarantees
 * "Sector concentration cap" (~22 chars @ 14px) renders without ellipsis
 * even when the row container narrows to the smallest documented column.
 */
.lab-knob-label {
  flex: 1 1 auto;
  min-width: 180px;   /* enough for longest knob label at 14px before ellipsis */
  font-size: var(--type-sm);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lab-knob-value {
  flex: 0 0 auto;
  width: 84px;
  text-align: right;
  white-space: nowrap;
}

.lab-knob-value-num {
  font-size: var(--type-sm);
  font-weight: 600;
}

.lab-knob-dirty-pill {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 1px 6px;
  font-size: var(--type-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--accent);
  color: var(--accent-ink, white);
  border-radius: 999px;
}

.lab-knob-band {
  flex: 0 0 auto;
  width: 130px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-xs);
}

.lab-knob-band-text {
  flex: 0 0 auto;
  white-space: nowrap;
}

.lab-knob-band-meter {
  display: block;
  position: relative;
  flex: 1 1 auto;
  min-width: 40px;
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
}

.lab-knob-band-mark {
  position: absolute;
  top: -3px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--accent);
  border: 2px solid var(--surface);
  border-radius: 50%;
}

.lab-knob-row.is-warn .lab-knob-band-mark {
  background: var(--warn, #c89030);
}

.lab-knob-actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-1);
  justify-content: flex-end;
  white-space: nowrap;
}

@media (max-width: 768px) {
  /* On phones, stack the row sections so the label has full width
   * and the value/band/actions fall below it. */
  .lab-knob-row {
    flex-wrap: wrap;
    gap: 4px var(--space-2);
  }
  .lab-knob-label {
    flex: 1 1 100%;
    white-space: normal;
  }
  .lab-knob-value,
  .lab-knob-band,
  .lab-knob-actions {
    flex: 0 0 auto;
  }
  .lab-knob-band {
    width: auto;
    min-width: 100px;
  }
}

/* ── Pending edits footer ──────────────────────────────────────────────── */

.lab-pending-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklab, var(--accent) 8%, var(--surface-raised));
  border: 1px solid color-mix(in oklab, var(--accent) 36%, var(--rule));
  border-radius: var(--radius-sm);
}

.lab-pending-summary {
  font-size: var(--type-sm);
}

.lab-pending-actions {
  display: flex;
  gap: var(--space-2);
}

/* ── Versions section ──────────────────────────────────────────────────── */

.lab-versions {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}

.lab-versions-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.lab-versions-head h2 {
  margin: 0;
  font-size: var(--type-lg);
  font-weight: 600;
}

.lab-versions-count {
  font-size: var(--type-sm);
}

.lab-versions-empty {
  padding: var(--space-3) 0;
  font-size: var(--type-sm);
  line-height: 1.55;
}

.lab-versions-empty p {
  margin: 0 0 var(--space-2);
}

.lab-versions-empty p:last-child {
  margin-bottom: 0;
}

.lab-versions-table {
  width: 100%;
  border-collapse: collapse;
}

.lab-versions-table th {
  padding: var(--space-2) var(--space-3);
  font-size: var(--type-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-align: left;
  border-bottom: 1px solid var(--rule);
}

.lab-version-actions-head {
  text-align: right;
}

.lab-versions-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--type-sm);
}

.lab-versions-table tr.is-active td {
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}

.lab-version-actions {
  text-align: right;
  white-space: nowrap;
}

.lab-version-actions .btn + .btn {
  margin-left: var(--space-1);
}

.lab-active-pill {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 8px;
  font-size: var(--type-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--accent);
  color: var(--accent-ink, white);
  border-radius: 999px;
}

.lab-default-pill {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 1px 8px;
  font-size: var(--type-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-raised);
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
}

/* Brain Phase 2 (#153) — version-perf column. Renders the per-version
 * historical perf badge derived from `decisions.jsonl` → `version_perf.json`.
 *
 * Color stays neutral (no money-tone). The lab is data-density; portfolio-tone
 * lives on Trading Desk + Portfolio surfaces where money decisions happen.
 */
.lab-version-perf-head {
  text-align: left;
  white-space: nowrap;
}

.lab-version-perf {
  text-align: left;
  white-space: nowrap;
  color: var(--ink);
}

.lab-perf-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  font-size: var(--type-sm);
  font-weight: 500;
}

.lab-perf-win,
.lab-perf-exp {
  font-variant-numeric: tabular-nums;
}

.lab-perf-sep {
  color: var(--ink-muted);
  opacity: 0.7;
}

.lab-perf-empty,
.lab-perf-pending {
  font-size: var(--type-sm);
  font-style: italic;
}

/* #157 H10 — small-N honesty. Versions with fewer than 10 closed trades
 * render at reduced opacity so the operator doesn't read 100% (over 3
 * trades) as equivalent to 60% (over 50). The `~` prefix in the win-rate
 * is the second signal. No tone-coding — Strategy Lab is data-density. */
.lab-perf-badge.lab-perf-low-n {
  opacity: 0.65;
}

/* ── Modals ────────────────────────────────────────────────────────────── */

.lab-modal-doc {
  margin: 0 0 var(--space-3);
  font-size: var(--type-sm);
  line-height: 1.55;
  color: var(--ink-muted);
}

.lab-modal-field {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--type-sm);
}

.lab-modal-field input {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-2);
  font: inherit;
  font-family: var(--font-mono);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.lab-modal-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 24%, transparent);
}

.lab-modal-band,
.lab-modal-help {
  margin: var(--space-2) 0 0;
  font-size: var(--type-xs);
}

.lab-modal-section-head {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--type-sm);
  font-weight: 600;
}

.lab-modal-diff {
  width: 100%;
  border-collapse: collapse;
}

.lab-modal-diff th {
  padding: var(--space-2) var(--space-3);
  font-size: var(--type-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-align: left;
  border-bottom: 1px solid var(--rule);
}

.lab-modal-diff th.num {
  text-align: right;
}

.lab-modal-diff td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--type-sm);
}

.lab-modal-diff td.num {
  text-align: right;
}

.lab-modal-diff-empty {
  margin: var(--space-3) 0;
  font-size: var(--type-sm);
}

.lab-diff-label {
  font-size: var(--type-sm);
  font-weight: 500;
  color: var(--ink);
}

.lab-diff-path {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.6;
}

.lab-diff-after[data-dir="up"] {
  color: var(--money-up, #2a8c4a);
}

.lab-diff-after[data-dir="down"] {
  color: var(--money-down, #b53636);
}

.lab-scope {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}

.lab-scope h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--type-sm);
  font-weight: 600;
}

.lab-scope ul {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--type-sm);
  line-height: 1.6;
}

.lab-typed-confirm {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--type-sm);
}

.lab-typed-confirm code {
  background: var(--surface-raised);
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid var(--rule);
}

.lab-typed-confirm input {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-2);
  font: inherit;
  font-family: var(--font-mono);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.lab-typed-confirm input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 24%, transparent);
}

/* ── Loading / error scaffolds ─────────────────────────────────────────── */

.lab-loading,
.lab-error {
  padding: var(--space-6);
  text-align: center;
  color: var(--ink-muted);
}

.lab-error {
  color: var(--down, var(--money-down, #b53636));
}

/* ── Library inline Activate + type-to-confirm modal (#319, kit LibraryView).
   The library table renders in both #playbooks and the embedded Engines
   Library sub-tab; these are global (unprefixed) like the rest of .lib-*. ── */
.lib-act-cell { text-align: right; white-space: nowrap; }
.lib-confirm-backdrop { position: fixed; inset: 0; z-index: var(--z-modal, 300); display: flex; align-items: center; justify-content: center; background: rgba(20,20,20,0.45); }
.lib-confirm { position: relative; width: min(440px, 92vw); background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-lg); }
.lib-confirm-title { margin-bottom: var(--space-3); }
.lib-confirm-body { color: var(--ink-muted); font-size: var(--type-sm); line-height: 1.55; margin-bottom: var(--space-4); }
.lib-confirm-body strong { color: var(--ink); }
.lib-confirm-input { width: 100%; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: var(--space-4); font-size: var(--type-md); }
.lib-confirm-input:focus { outline: 2px solid var(--ai); outline-offset: 1px; border-color: var(--ai); }
.lib-confirm-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }