/* Component-specific styles extracted from layout */

/* ============================================================
   Turbo frames — global, and load-bearing

   A frame normally shouldn't introduce a box: it wraps content that
   belongs to the parent's flex/grid flow, so `display: contents` lets
   that content participate directly. This rule started life in
   `job_search_planning.css` as a bare `turbo-frame` selector aimed at
   the planned-actions table, but every stylesheet ships in the `:app`
   bundle, so it silently applied to every frame in the app.

   That is fatal for `loading="lazy"`. Turbo drives lazy loading off an
   IntersectionObserver, which never fires for an element with no layout
   box — so a `display: contents` lazy frame NEVER FETCHES. No request,
   no console error, just an empty frame forever;
   `getBoundingClientRect()` reads 0x0 on a visibly-open frame. It cost
   a cycle to find (Concept A, S4).

   So: contents for the eager frames that want to disappear into their
   parent's layout, a real block box for the lazy ones that must be
   observable. Scoped by `loading` rather than by id or page, because the
   rule is about how Turbo loads a frame, not about where it lives.
   ============================================================ */
turbo-frame:not([loading="lazy"]) { display: contents; }
turbo-frame[loading="lazy"]      { display: block; }

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem .9rem;
  border-radius: var(--bp-r-md);
  border: none;
  background: var(--bp-accent);
  color: var(--bp-accent-ink);
  text-decoration: none;
  font-weight: 600;
  transition: filter var(--bp-dur-fast) var(--bp-easing), transform var(--bp-dur-fast) var(--bp-easing);
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:active { transform: translateY(1px); }

a.btn-secondary,
button.btn-secondary,
input[type=submit].btn-secondary,
form.btn-secondary > input[type=submit],
form.btn-secondary > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem .9rem;
  border-radius: var(--bp-r-md);
  background: var(--bp-paper);
  color: var(--bp-ink);
  text-decoration: none;
  font-weight: 600;
  border: 1px solid var(--bp-rule);
  transition: background var(--bp-dur-fast) var(--bp-easing), transform var(--bp-dur-fast) var(--bp-easing), border-color var(--bp-dur-fast) var(--bp-easing);
  cursor: pointer;
}
a.btn-secondary:hover,
button.btn-secondary:hover,
input[type=submit].btn-secondary:hover,
form.btn-secondary > input[type=submit]:hover,
form.btn-secondary > button:hover {
  background: var(--bp-surface);
  border-color: var(--bp-ink-muted);
}
a.btn-secondary:active,
button.btn-secondary:active,
input[type=submit].btn-secondary:active,
form.btn-secondary > input[type=submit]:active,
form.btn-secondary > button:active {
  transform: translateY(1px);
}

.btn-secondary.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Colored button variants */
a.btn-success,
button.btn-success,
input[type=submit].btn-success,
form.btn-success > input[type=submit],
form.btn-success > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem .9rem;
  border-radius: var(--bp-r-md);
  background: var(--bp-success);
  color: var(--bp-accent-ink);
  text-decoration: none;
  font-weight: 600;
  border: none;
  transition: filter var(--bp-dur-fast) var(--bp-easing), transform var(--bp-dur-fast) var(--bp-easing);
  cursor: pointer;
}
a.btn-success:hover,
button.btn-success:hover,
input[type=submit].btn-success:hover,
form.btn-success > input[type=submit]:hover,
form.btn-success > button:hover { filter: brightness(1.1); }
a.btn-success:active,
button.btn-success:active,
input[type=submit].btn-success:active,
form.btn-success > input[type=submit]:active,
form.btn-success > button:active { transform: translateY(1px); }

a.btn-warning,
button.btn-warning,
input[type=submit].btn-warning,
form.btn-warning > input[type=submit],
form.btn-warning > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem .9rem;
  border-radius: var(--bp-r-md);
  background: var(--bp-warning);
  color: var(--bp-accent-ink);
  text-decoration: none;
  font-weight: 600;
  border: none;
  transition: filter var(--bp-dur-fast) var(--bp-easing), transform var(--bp-dur-fast) var(--bp-easing);
  cursor: pointer;
}
a.btn-warning:hover,
button.btn-warning:hover,
input[type=submit].btn-warning:hover,
form.btn-warning > input[type=submit]:hover,
form.btn-warning > button:hover { filter: brightness(1.1); }
a.btn-warning:active,
button.btn-warning:active,
input[type=submit].btn-warning:active,
form.btn-warning > input[type=submit]:active,
form.btn-warning > button:active { transform: translateY(1px); }

a.btn-info,
button.btn-info,
input[type=submit].btn-info,
form.btn-info > input[type=submit],
form.btn-info > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem .9rem;
  border-radius: var(--bp-r-md);
  background: var(--bp-info);
  color: var(--bp-accent-ink);
  text-decoration: none;
  font-weight: 600;
  border: none;
  transition: filter var(--bp-dur-fast) var(--bp-easing), transform var(--bp-dur-fast) var(--bp-easing);
  cursor: pointer;
}
a.btn-info:hover,
button.btn-info:hover,
input[type=submit].btn-info:hover,
form.btn-info > input[type=submit]:hover,
form.btn-info > button:hover { filter: brightness(1.1); }
a.btn-info:active,
button.btn-info:active,
input[type=submit].btn-info:active,
form.btn-info > input[type=submit]:active,
form.btn-info > button:active { transform: translateY(1px); }

a.btn-danger,
button.btn-danger,
input[type=submit].btn-danger,
form.btn-danger > input[type=submit],
form.btn-danger > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem .9rem;
  border-radius: var(--bp-r-md);
  background: var(--bp-danger);
  color: var(--bp-accent-ink);
  text-decoration: none;
  font-weight: 600;
  border: none;
  transition: filter var(--bp-dur-fast) var(--bp-easing), transform var(--bp-dur-fast) var(--bp-easing);
  cursor: pointer;
}
a.btn-danger:hover,
button.btn-danger:hover,
input[type=submit].btn-danger:hover,
form.btn-danger > input[type=submit]:hover,
form.btn-danger > button:hover { filter: brightness(1.1); }
a.btn-danger:active,
button.btn-danger:active,
input[type=submit].btn-danger:active,
form.btn-danger > input[type=submit]:active,
form.btn-danger > button:active { transform: translateY(1px); }

/* Button size variants */
.btn-sm {
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  border-radius: var(--bp-r-md);
}

/* Navigation */
.nav-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--bp-rule);
  color: var(--bp-ink);
  border-radius: var(--bp-r-md);
  padding: .5rem .65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-mobile {
  display: grid;
  gap: .4rem;
  padding: .6rem 0 .9rem;
  border-top: 1px solid var(--bp-rule);
}
.nav-mobile a {
  color: var(--bp-ink);
  text-decoration: none;
  padding: .55rem .7rem;
  border-radius: var(--bp-r-md);
}

.nav-mobile-login {
  justify-self: start;
}

/* Alerts / Flashes */
.bp-alert {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--bp-s-4);
  padding: var(--bp-s-3) var(--bp-s-5);
  border: 1px solid var(--bp-rule);
  border-left-width: 4px;
  border-radius: var(--bp-r-md);
  background: var(--bp-paper);
  font-size: 14px;
  align-items: start;
  margin: var(--bp-s-2) 0;
}
.bp-alert:has(.bp-alert__close) {
  grid-template-columns: 18px 1fr auto;
}
/* A reversing action (e.g. Undo) claims its own column ahead of the
   dismiss control, so the message never has to shrink to make room. */
.bp-alert:has(.bp-alert__action-form):has(.bp-alert__close) {
  grid-template-columns: 18px 1fr auto auto;
}
.bp-alert__action-form { margin: 0; align-self: start; }
.bp-alert__action {
  font: inherit;
  font-weight: 600;
  color: var(--bp-accent);
  background: transparent;
  border: 0;
  padding: 0 var(--bp-s-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  line-height: 1.4;
}
.bp-alert__action:hover { color: var(--bp-ink); }
.bp-alert__action:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
  border-radius: var(--bp-r-sm);
}
.bp-alert .mark        { font-weight: 700; line-height: 1.4; }
.bp-alert__title       { font-weight: 600; color: var(--bp-ink); margin-bottom: 2px; }
.bp-alert__body        { color: var(--bp-ink-2); }
.bp-alert__close {
  font-family: var(--bp-mono-family);
  font-size: 18px;
  color: var(--bp-ink-muted);
  cursor: pointer;
  border: 0;
  background: transparent;
  line-height: 1;
  padding: 0;
  align-self: start;
}
.bp-alert__close:hover { color: var(--bp-ink); }
.bp-alert--success { border-left-color: var(--bp-success); }
.bp-alert--success .mark { color: var(--bp-success); }
.bp-alert--warning { border-left-color: var(--bp-warning); }
.bp-alert--warning .mark { color: var(--bp-warning); }
.bp-alert--danger  { border-left-color: var(--bp-danger); }
.bp-alert--danger  .mark { color: var(--bp-danger); }
.bp-alert--info    { border-left-color: var(--bp-info); }
.bp-alert--info    .mark { color: var(--bp-info); }

/* Inline form validation errors — temporary alias until Step 6 feature cleanup.
   New code must use .bp-alert.bp-alert--danger instead. */
.flash.alert {
  border-left: 4px solid var(--bp-danger);
  background: var(--bp-tint-danger);
  color: var(--bp-tint-ink-danger);
  border-radius: var(--bp-r-md);
  padding: var(--bp-s-3) var(--bp-s-4);
  font-size: 14px;
  margin: var(--bp-s-2) 0;
}

/* Tables */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bp-paper);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-lg);
  overflow: hidden;
}
.table thead th {
  text-align: left;
  padding: .6rem .75rem;
  font-weight: 700;
  background: var(--bp-surface);
  border-bottom: 1px solid var(--bp-rule);
}
.table tbody td {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--bp-rule-soft);
  vertical-align: top;
}
.table tbody tr:last-child td {
  border-bottom: none;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .5rem;
  border-radius: var(--bp-r-pill);
  font-size: .85rem;
  font-weight: 600;
}

.badge-gray {
  background: color-mix(in srgb, var(--bp-ink-muted) 15%, transparent);
  color: var(--bp-ink-muted);
  border: 1px solid var(--bp-rule);
}

.badge-green {
  background: var(--bp-tint-done);
  color: var(--bp-success);
  border: 1px solid color-mix(in srgb, var(--bp-success) 35%, transparent);
}

.badge-red {
  background: var(--bp-tint-danger);
  color: var(--bp-danger);
  border: 1px solid color-mix(in srgb, var(--bp-danger) 35%, transparent);
}

.badge-amber {
  background: var(--bp-tint-warning);
  color: var(--bp-warning);
  border: 1px solid color-mix(in srgb, var(--bp-warning) 35%, transparent);
}

.badge-blue {
  background: var(--bp-tint-info);
  color: var(--bp-info);
  border: 1px solid color-mix(in srgb, var(--bp-info) 35%, transparent);
}

/* Score slider */
.score-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
}
.score-slider:focus { outline: none; }

.score-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--bp-surface-2);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-pill);
}
.score-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bp-accent);
  border: 2px solid var(--bp-paper);
  margin-top: -6px;
  box-shadow: 0 0 0 1px var(--bp-rule);
}
.score-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bp-accent) 25%, transparent);
}

.score-slider::-moz-range-track {
  height: 6px;
  background: var(--bp-surface-2);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-pill);
}
.score-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bp-accent);
  border: 2px solid var(--bp-paper);
  box-shadow: 0 0 0 1px var(--bp-rule);
}

.score-slider::-ms-track {
  height: 6px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.score-slider::-ms-fill-lower,
.score-slider::-ms-fill-upper {
  background: var(--bp-surface-2);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-pill);
}
.score-slider::-ms-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bp-accent);
  border: 2px solid var(--bp-paper);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--bp-ink-muted);
  margin-top: 0.2rem;
}

/* Read-only value display */
.read-only-value {
  padding: .6rem .75rem;
  background: var(--bp-surface);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
  white-space: pre-wrap;
}

/* Score display */
.score-display {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.score-display .stars {
  letter-spacing: .1rem;
}

/* Status indicator */
.status {
  margin-top: .1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Modal overlay and components */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.35);
  padding: 1rem;
}

.modal-content {
  width: min(560px, 96vw);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-lg);
  background: var(--bp-paper);
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--bp-rule);
  background: var(--bp-paper);
}

.modal-title {
  margin: 0;
  font-size: 1.1rem;
}

.modal-status {
  padding: .8rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--bp-rule);
  background: var(--bp-paper);
}

.modal-body {
  padding: 1rem;
  display: grid;
  gap: .6rem;
  background: var(--bp-paper);
}

/* Form components */
.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: .3rem;
}

.form-actions-end {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: .6rem;
}

.bp-form-actions {
  display: flex;
  gap: var(--bp-s-3);
  justify-content: flex-end;
  margin-top: var(--bp-s-5);
}

/* Page header styling */
.page-header h1 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: 0;
}

.page-header p {
  margin: 0;
}

.page-header .text-muted {
  font-size: .95rem;
}

.status-label {
  font-weight: 600;
}

/* Info card spacing */
.info-card-spaced {
  margin-top: .6rem;
}

/* Star rating */
.star-rating {
  letter-spacing: .1rem;
}

.star-filled {
  color: var(--bp-warning);
}

.star-empty {
  color: var(--bp-ink-subtle);
}

.star-score {
  color: var(--bp-ink-muted);
  font-size: .9rem;
}

/* Button variants */
.btn-full-width {
  width: 100%;
}

.btn-centered {
  text-align: center;
}

.links-cta {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Summary/details customization */
.summary-clickable {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.summary-meta {
  color: var(--bp-ink-muted);
  font-size: .9rem;
}

.spacer {
  flex: 1;
}

/* Feedback alert */
.feedback-alert {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: var(--bp-r-md);
  font-size: .85rem;
  font-weight: 600;
  background: var(--bp-tint-info);
  color: var(--bp-info);
  border: 1px solid color-mix(in srgb, var(--bp-info) 45%, transparent);
}

/* Notice messages */
.notice-success {
  color: var(--bp-success);
}

.notice-error {
  color: var(--bp-danger);
}

/* Collapsible sections */
.collapsible-section {
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-lg);
  background: var(--bp-paper);
  overflow: hidden;
}

.collapsible-header {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: var(--bp-surface);
  border-bottom: 1px solid var(--bp-rule);
  transition: background var(--bp-dur-fast) var(--bp-easing);
  user-select: none;
}

.collapsible-header:hover {
  background: var(--bp-surface-2);
}

.collapsible-header::-webkit-details-marker {
  display: none;
}

.collapsible-icon {
  font-size: .85rem;
  transition: transform var(--bp-dur-med) var(--bp-easing);
  color: var(--bp-ink-muted);
}

details[open] .collapsible-icon {
  transform: rotate(0deg);
}

details:not([open]) .collapsible-icon {
  transform: rotate(-90deg);
}

.collapsible-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bp-ink);
}

.collapsible-content {
  padding: 1.25rem;
  background: var(--bp-paper);
}

@media (max-width: 640px) {
  .collapsible-header {
    padding: .85rem 1rem;
  }

  .collapsible-title {
    font-size: 1.1rem;
  }

  .collapsible-content {
    padding: 1rem;
  }
}

/* Dual list selector */
.dual-list-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  margin-top: .5rem;
  align-items: start;
}

.dual-list-buttons {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  justify-content: center;
  margin-top: 2rem;
}

.dual-list-section {
  min-width: 0; /* Prevents overflow on small screens */
}

@media (max-width: 768px) {
  .dual-list-container {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .dual-list-buttons {
    flex-direction: row;
    justify-content: center;
    margin-top: 0;
    order: 2; /* Move buttons between the two lists */
  }

  .dual-list-section:first-child {
    order: 1;
  }

  .dual-list-section:last-child {
    order: 3;
  }

  .dual-list-buttons button {
    flex: 1;
    max-width: 150px;
  }
}

/* Metadata and muted text label */
.metadata-label {
  color: var(--bp-ink-muted);
  font-size: var(--fs-sm);
}

/* Separator for metadata items */
.metadata-separator {
  color: var(--bp-ink-muted);
  font-size: var(--fs-sm);
}

/* Page header with actions */
.page-header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.page-header-actions h1 {
  margin: 0;
}

/* Flex column layout for grouped sections */
.flex-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Flex row with baseline alignment */
.flex-row-baseline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Contact person card styles */
.contact-info-item {
  margin-bottom: 0.5rem;
}

.contact-company-label {
  font-weight: normal;
  color: var(--bp-ink-muted);
}

.priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: var(--bp-r-sm);
  font-size: 0.85rem;
  font-weight: 600;
}

.priority-badge.high {
  background: var(--bp-tint-danger);
  color: var(--bp-tint-ink-danger);
}

.priority-badge.medium {
  background: var(--bp-tint-warning);
  color: var(--bp-tint-ink-warning);
}

.priority-badge.low {
  background: var(--bp-tint-info);
  color: var(--bp-tint-ink-info);
}

.list-disc {
  list-style: disc;
  padding-left: 1.25rem;
}

.section-title-spacing {
  margin-top: 1rem;
}

/* ─── bp-field — form field wrapper (label / control / help / error) ─────── */
.bp-field { display: grid; gap: 6px; margin-bottom: 18px; }
.bp-field label { font-size: 13px; font-weight: 600; color: var(--bp-ink); }
.bp-field .help  { font-size: 12.5px; color: var(--bp-ink-muted); }
.bp-field .error { font-size: 12.5px; color: var(--bp-danger); }

/* ─── bp-input / bp-textarea / bp-select — form field tokens ─────────────── */
.bp-input,
.bp-select,
.bp-textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  background: var(--bp-paper);
  color: var(--bp-ink);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
  transition: border-color var(--bp-dur-fast), box-shadow var(--bp-dur-fast);
}
.bp-input:focus,
.bp-select:focus,
.bp-textarea:focus {
  outline: none;
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 15%, transparent);
}
.bp-input::placeholder,
.bp-textarea::placeholder { color: var(--bp-ink-muted); }
.bp-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

/* Safari's native <select> ignores padding / min-height on its intrinsic sizing
   path, so it renders ~6-8px shorter than an adjacent .bp-input even with the
   shared rule above. `appearance: none` opts out of native styling so the box
   obeys our box model, and the inline-SVG caret restores the dropdown
   affordance. The stroke hex (%236b6b6b) is the resolved value of
   --bp-ink-muted — CSS custom properties don't resolve inside data URIs, so
   the token value is duplicated here. If --bp-ink-muted changes, update this
   value to match. */
.bp-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' stroke='%236b6b6b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--bp-s-3) center;
  background-size: var(--bp-s-3) var(--bp-s-3);
  padding-right: var(--bp-s-6);
}

/* ─── bp-radio / bp-checkbox ─────────────────────────────────────────────── */
.bp-checkbox,
.bp-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 0;
}
.bp-checkbox input,
.bp-radio input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--bp-rule);
  background: var(--bp-paper);
  margin: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin-top: 1px;
}
.bp-checkbox input { border-radius: var(--bp-r-sm); }
.bp-radio input    { border-radius: 50%; }
.bp-checkbox input:checked,
.bp-radio input:checked { background: var(--bp-accent); border-color: var(--bp-accent); }
.bp-checkbox input:focus-visible,
.bp-radio input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 25%, transparent);
}
.bp-radio input:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}
.bp-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-s-4);
}

/* ─── bp-pill — survey answer pill ──────────────────────────────────────── */
.bp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-s-2);
  margin-top: var(--bp-s-2);
}
.bp-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--bp-r-pill);
  border: 1px solid var(--bp-rule);
  background: var(--bp-paper);
  color: var(--bp-ink-2);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  transition: background var(--bp-dur-fast), border-color var(--bp-dur-fast), color var(--bp-dur-fast);
}
.bp-pill:hover { border-color: var(--bp-ink-muted); background: var(--bp-surface); }
.bp-pill.is-selected {
  background: var(--bp-accent);
  border-color: var(--bp-accent);
  color: var(--bp-accent-ink);
}
.bp-pill__check { opacity: 0; margin-right: 6px; font-size: 12px; }
.bp-pill.is-selected .bp-pill__check { opacity: 1; }
.bp-pill.is-selected:disabled { opacity: 1; cursor: default; }

/* ─── bp-step-meta + bp-progress — survey progress indicator ────────────── */
.bp-step-meta {
  font-family: var(--bp-mono-family);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
}
.bp-progress {
  height: 6px;
  background: var(--bp-surface-2);
  border-radius: var(--bp-r-pill);
  overflow: hidden;
}
.bp-progress__fill {
  height: 100%;
  background: var(--bp-accent);
  border-radius: var(--bp-r-pill);
  transition: width 0.35s ease;
}
/* Indeterminate variant — a sliding sweep for "working, no known
   percentage" states (e.g. the Flow D resume-parse spinner, #884). The
   fill width is fixed; the animation translates it across the track. */
.bp-progress--indeterminate .bp-progress__fill {
  width: 40%;
  transition: none;
  animation: bp-progress-sweep 1.2s var(--bp-easing, ease-in-out) infinite;
}
@keyframes bp-progress-sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-progress--indeterminate .bp-progress__fill {
    animation: none;
    width: 100%;
  }
}

/* ─── bp-ai-working — "the AI is generating this, the screen updates itself" ──
   The shared affordance for AUTO-REFRESH surfaces (#1588): a background job
   produces AI content and a Turbo Stream broadcast morphs it in when it lands.
   Composed from the .insight card + the indeterminate progress sweep above, so
   it inherits their tokens and reduced-motion handling. See
   shared/_ai_working.html.erb. Button-driven synchronous generation uses
   .bp-btn.is-generating instead. */
.bp-ai-working .bp-progress--indeterminate {
  margin-top: var(--bp-s-3);
}
.bp-ai-working__note {
  color: var(--bp-ink-muted);
  font-size: 13px;
}
:where(.insight).bp-ai-working .bp-ai-working__note {
  margin-top: var(--bp-s-3);
}
/* Compact variant — a lightweight inline dots indicator for narrow rail cards
   (e.g. the Capabilities dashboard readiness peek). No card chrome, no bar. The
   dots reuse the chat typing-bounce keyframes. */
.bp-ai-working--compact {
  display: flex;
  align-items: flex-start;
  gap: var(--bp-s-2);
}
.bp-ai-working__compact-copy {
  margin: 0;
}
.bp-ai-working__dots {
  display: inline-flex;
  gap: 4px;
  flex: none;
  padding-top: 7px;
}
.bp-ai-working__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bp-ink-subtle);
  animation: typing-bounce 1.2s var(--bp-easing, ease-in-out) infinite;
}
.bp-ai-working__dots span:nth-child(2) { animation-delay: 0.2s; }
.bp-ai-working__dots span:nth-child(3) { animation-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .bp-ai-working__dots span { animation: none; }
}

/* ─── bp-card ────────────────────────────────────────────────────────────── */
.bp-card {
  background: var(--bp-paper);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-lg);
  padding: 24px;
}
.bp-card--soft {
  background: var(--bp-surface);
  border-color: var(--bp-rule-soft);
}

/* ─── bp-choice-card — equal-weight decision / fork pattern ───────────────────
   For dedicated decision screens whose entire job is choosing between co-equal
   options (a mode / fork picker). The whole card is the control: the inner
   `__action` link/button stretches to cover the card, and the accent moment is
   the hovered/focused card — not a row of competing filled --primary buttons.
   Compose with .bp-card (+ optional --soft) for chrome. See the Handoff §06. */
.bp-choice-card {
  position: relative;
  transition: border-color var(--bp-dur-fast) var(--bp-easing),
              background var(--bp-dur-fast) var(--bp-easing);
}
.bp-choice-card:hover {
  border-color: var(--bp-accent);
  background: var(--bp-accent-soft);
}
.bp-choice-card:focus-within {
  border-color: var(--bp-accent);
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
}

/* The labelled action stays visible (screen readers get a real, named control);
   its ::after makes the whole card the hit target. Keep it a quiet accent link,
   never a filled button — the card is the accent, not the control inside it. */
.bp-choice-card__action {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-s-2);
  font: inherit;
  font-weight: 600;
  color: var(--bp-accent);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.bp-choice-card__action::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* The focus ring is drawn on the card via :focus-within, so suppress the
   control's own ring to avoid a doubled outline. */
.bp-choice-card__action:focus-visible { outline: none; }

/* button_to wraps its control in a <form>; collapse it so the button is the
   card's flow child and its stretched ::after positions against the card. */
.bp-choice-card__form { display: contents; }

/* Recommended variant — marks the smart-default card in an otherwise co-equal
   fork (e.g. a GTKY-derived mode). An accent border (the same accent the hover /
   focus state uses) makes it read as the default at rest; pair with a `.bp-badge`
   in the card header to name it ("Recommended for you"). Use this instead of a
   competing filled --primary button when one card should lead but all remain
   selectable. */
.bp-choice-card--recommended {
  border-color: var(--bp-accent);
}

/* ─── bp-btn — design system button primitives ───────────────────────────── */
.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bp-s-2);
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--bp-r-md);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--bp-dur-fast) var(--bp-easing),
              color var(--bp-dur-fast) var(--bp-easing),
              border-color var(--bp-dur-fast) var(--bp-easing);
}
.bp-btn--primary   { background: var(--bp-accent); color: var(--bp-accent-ink); border-color: var(--bp-accent); }
.bp-btn--primary:hover { background: color-mix(in srgb, var(--bp-accent) 85%, var(--bp-ink)); border-color: color-mix(in srgb, var(--bp-accent) 85%, var(--bp-ink)); text-decoration: none; }
.bp-btn--secondary { background: var(--bp-paper); color: var(--bp-ink); border-color: var(--bp-rule); }
.bp-btn--secondary:hover { background: var(--bp-surface); border-color: var(--bp-ink-muted); text-decoration: none; }
.bp-btn--ghost     { background: transparent; color: var(--bp-ink-muted); border-color: transparent; }
.bp-btn--ghost:hover { color: var(--bp-ink); background: var(--bp-surface); text-decoration: none; }
.bp-btn--danger    { background: var(--bp-paper); color: var(--bp-danger); border-color: var(--bp-rule); }
.bp-btn--danger:hover { background: var(--bp-tint-danger); border-color: var(--bp-danger); text-decoration: none; }
.bp-btn--sm  { padding: 6px 12px; font-size: 13px; }
.bp-btn--lg  { padding: 14px var(--bp-s-5); font-size: 15px; }
.bp-btn--block { display: flex; width: 100%; }
.bp-btn[disabled],
.bp-btn.is-disabled,
.bp-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.bp-btn.is-disabled,
.bp-btn[aria-disabled="true"] { pointer-events: none; }
.bp-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 25%, transparent);
}
/* Generating state (#1509) — immediate pending feedback on the Communication
   Plan's synchronous AI generate/regenerate buttons. The generating-button
   Stimulus controller adds .is-generating (and disables the button) on submit;
   the leading spinner is drawn from currentColor so it reads on the primary
   (accent) and secondary (paper) variants alike. Placed after the [disabled]
   rule so it wins the equal-specificity tie and keeps the spinner legible rather
   than dimmed to the disabled 0.45. */
.bp-btn.is-generating {
  opacity: 0.9;
  cursor: progress;
}
.bp-btn.is-generating::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bp-btn-spin 0.7s linear infinite;
}
@keyframes bp-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bp-btn.is-generating::before { animation-duration: 1.6s; }
}
/* Waiting state (#1588) — a server-rendered sibling of .is-generating for a
   disabled control that is blocked on an auto-refresh background job (e.g. the
   GTKY advance button while the readiness assessor runs). Same spinner, but no
   JS: the class is rendered directly on the disabled button, and the Turbo
   Stream broadcast morphs the enabled control in when the job lands. Placed
   after [disabled] so the spinner stays legible rather than dimmed. */
.bp-btn.is-waiting {
  opacity: 0.7;
  cursor: progress;
}
.bp-btn.is-waiting::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bp-btn-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bp-btn.is-waiting::before { animation-duration: 1.6s; }
}

/* ─── bp-badge — design system status badges ─────────────────────────────── */
.bp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-s-1);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: var(--bp-r-pill);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.bp-badge--done    { background: var(--bp-tint-done);    color: var(--bp-tint-ink-done); }
.bp-badge--active  { background: var(--bp-tint-active);  color: var(--bp-tint-ink-active); }
.bp-badge--warning { background: var(--bp-tint-warning); color: var(--bp-tint-ink-warning); }
.bp-badge--danger  { background: var(--bp-tint-danger);  color: var(--bp-tint-ink-danger); }
.bp-badge--info    { background: var(--bp-tint-info);    color: var(--bp-tint-ink-info); }
.bp-badge--idle    { background: transparent; color: var(--bp-ink-muted); border-color: var(--bp-rule); }
/* Solid-accent fill — the only "step indicator" surface in the app
   (questionnaire shell, capabilities flows) wanted full-strength
   brand colour rather than the soft tints above. */
.bp-badge--accent  { background: var(--bp-accent); color: var(--bp-accent-ink); text-transform: uppercase; letter-spacing: 0.05em; font-size: 12.5px; padding: 4px 12px; }

/* ─── jsr-rail — Job Search Readiness progression rail (DESIGN §2) ────────────
   Four levels L1–L4 across one row, each a node + level name + status chip (or a
   muted "not yet started" affordance). The inbound connector lights up to the
   furthest reached level so the rail reads as a filled progress track. Status is
   derived from StageProgress (honest signal), never from the AI payload. */
.jsr-rail {
  list-style: none;
  margin: 0 auto var(--bp-s-6);
  padding: 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.jsr-rail__level {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--bp-s-2);
  padding: 0 var(--bp-s-2);
}
/* Connector from the previous node's centre to this one's. */
.jsr-rail__level::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--bp-rule);
  z-index: 0;
}
.jsr-rail__level:first-child::before { display: none; }
.jsr-rail__level--ready::before,
.jsr-rail__level--developing::before { background: var(--bp-tint-ink-active); }
.jsr-rail__node {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--bp-paper);
  border: 2px solid var(--bp-rule);
}
.jsr-rail__level--ready .jsr-rail__node {
  background: var(--bp-tint-ink-done);
  border-color: var(--bp-tint-ink-done);
}
.jsr-rail__level--developing .jsr-rail__node {
  background: var(--bp-tint-ink-active);
  border-color: var(--bp-tint-ink-active);
}
.jsr-rail__level.is-current .jsr-rail__node { box-shadow: 0 0 0 4px var(--bp-tint-active); }
.jsr-rail__ord {
  font-family: var(--bp-mono-family);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bp-ink-muted);
}
.jsr-rail__name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bp-ink);
}
.jsr-rail__level--not-started .jsr-rail__name { color: var(--bp-ink-muted); font-weight: 500; }
.jsr-rail__level.is-current .jsr-rail__name { color: var(--bp-accent); }
.jsr-rail__pending { font-size: 11.5px; color: var(--bp-ink-muted); }
@media (max-width: 560px) {
  .jsr-rail { grid-template-columns: 1fr; gap: var(--bp-s-3); }
  .jsr-rail__level {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: var(--bp-s-3);
  }
  .jsr-rail__level::before { display: none; }
}
/* Compact variant — vertical stack for a narrow status card (the Capabilities
   dashboard rail), independent of viewport. Declared AFTER the small-screen
   media block so its (equal-specificity) declarations win at every width — a
   compact rail keeps its tighter gap even below 560px. */
.jsr-rail--compact {
  grid-template-columns: 1fr;
  gap: var(--bp-s-2);
  margin: 0 0 var(--bp-s-3);
}
.jsr-rail--compact .jsr-rail__level {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  gap: var(--bp-s-2);
  padding: 0;
}
.jsr-rail--compact .jsr-rail__level::before { display: none; }
/* One-line assessment peek under the compact rail on the dashboard status card. */
.capabilities-dashboard__readiness-peek {
  margin: var(--bp-s-2) 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--bp-ink-muted);
}

/* ─── bp-chip — neutral read-only content token ──────────────────────────────
   Displays a value the user already chose (a selected answer, a tag). Distinct
   from .bp-badge (status, pill) and .bp-pill (interactive selection). Use
   .bp-chips on the wrapping <ul> when rendering a set. */
.bp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp-chip {
  display: inline-block;
  padding: calc(var(--bp-s-1) / 2) var(--bp-s-2);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-sm);
  background: var(--bp-surface);
  color: var(--bp-ink);
  font-size: 13px;
}

/* ─── Type scale utilities ────────────────────────────────────────────────── */
.t-display-1 { font-family: var(--bp-display-family); font-weight: 500; font-size: 56px; line-height: 1.03; letter-spacing: -0.02em; }
.t-display-2 { font-family: var(--bp-display-family); font-weight: 500; font-size: 40px; line-height: 1.08; letter-spacing: -0.015em; }
.t-display-3 { font-family: var(--bp-display-family); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; }
.t-heading    { font-weight: 600; font-size: 17px; line-height: 1.4; }
.t-body-lede  { font-family: var(--bp-serif-family); font-size: 20px; line-height: 1.55; }
.t-body       { font-size: 15px; line-height: 1.55; }
.t-body-sm    { font-size: 13.5px; line-height: 1.55; color: var(--bp-ink-2); }
.t-label      { font-family: var(--bp-mono-family); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bp-ink-muted); }
.t-mono       { font-family: var(--bp-mono-family); font-size: 13px; color: var(--bp-ink); }

/* ─── Stage-complete pattern ──────────────────────────────────────────────── */
.complete-header {
  text-align: center;
  padding: var(--bp-s-8) var(--bp-s-5) var(--bp-s-6);
  max-width: 680px;
  margin: 0 auto var(--bp-s-6);
}
.complete-header h1 {
  font-family: var(--bp-display-family);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: var(--bp-s-2) 0 var(--bp-s-3);
  color: var(--bp-ink);
}
.complete-header .t-body-lede { margin: 0; color: var(--bp-ink-2); }

.complete-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--bp-s-6);
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .complete-grid { grid-template-columns: 1fr; }
}

.insight-list {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-4);
}

.insight {
  background: var(--bp-paper);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-lg);
  padding: var(--bp-s-5) var(--bp-s-6);
}
.insight-kicker {
  font-family: var(--bp-mono-family);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
  display: block;
  margin-bottom: var(--bp-s-2);
}
/* Wrap the .insight scope in :where() so descendant selectors stay at element-only
   specificity. Without this, `.insight p` (0,0,1,1) silently overrides any utility
   class on a child element (e.g. .t-body-sm at 0,0,1,0), breaking typography
   utilities for anything dropped inside an .insight card. */
:where(.insight) h2 {
  font-family: var(--bp-display-family);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 var(--bp-s-2);
  color: var(--bp-ink);
}
:where(.insight) p { margin: 0 0 var(--bp-s-2); color: var(--bp-ink-2); font-size: 15px; line-height: 1.55; }
:where(.insight) p:last-child { margin-bottom: 0; }
:where(.insight) ul { margin: 0; padding-left: 1.25em; color: var(--bp-ink-2); font-size: 15px; line-height: 1.55; }
:where(.insight) ul li + li { margin-top: var(--bp-s-2); }
:where(.insight) h2 .bp-badge { font-size: 13px; padding: 4px 12px; vertical-align: middle; }

.complete-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--bp-s-3);
  max-width: 1040px;
  margin: var(--bp-s-6) auto 0;
  padding-top: var(--bp-s-5);
  border-top: 1px solid var(--bp-rule-soft);
}
@media (max-width: 480px) {
  .complete-footer-nav { flex-direction: column; }
  .complete-footer-nav .bp-btn { width: 100%; justify-content: center; }
}

/* Sidebar card stack inside complete-grid */
.complete-grid aside .bp-card { margin-bottom: var(--bp-s-4); }
.complete-grid aside .bp-card:last-child { margin-bottom: 0; }
.complete-grid aside .bp-card h2 { margin: 0 0 var(--bp-s-2); }

/* ============================================================
   Migrated from capabilities.css (issue #864)

   The blocks below were previously siloed in a per-feature
   `capabilities.css` stylesheet — the Claude Code Handoff §07
   names that pattern as forbidden. The migration consolidated
   onto existing `.bp-*` library primitives wherever possible:

     - card chrome    → `.bp-card` (rules carry layout only)
     - begin CTA      → `.bp-btn .bp-btn--primary .bp-btn--lg`
     - step kicker    → `.bp-badge .bp-badge--accent`
     - detail textarea → `.bp-textarea`

   What remains is cross-stage shell shared by GTKY / placeholder
   intros / capabilities (renamed out of `capabilities-` to
   `.stage-intro__*` and `.questionnaire-*`) and the
   capabilities-specific dashboard / category / entry-form /
   entry-editor compositions.
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   Stage intro shell — 2-column "title + content + sidebar"
   layout shared across stages.

   Used by `_placeholder_intro` (any stage), `_questionnaire_shell`
   (GTKY + future questionnaire stages), and the Capabilities
   intro full page. The previous `.capabilities-intro-*` (hyphen,
   not BEM `__`) names predate the slice-1a rewrite and were
   already cross-stage despite the misleading prefix.
   ────────────────────────────────────────────────────────────── */

.stage-intro {
  padding: 2rem;
}

.stage-intro__header {
  margin-bottom: 3rem;
  text-align: center;
}

.stage-intro__header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--bp-ink);
}

.stage-intro__header .subtitle {
  font-size: 1.1rem;
  color: var(--bp-ink-muted);
}

/* Stage-3 intro capture-mode selector (iter-4 D4) — the GTKY-derived mode named
   in the lede and presented as the recommended card in a co-equal 3-card fork
   (the .bp-choice-card pattern; layout mirrors stages/gtky/mode_select). Only the
   intro-scoped layout lives here; the card chrome + the --recommended variant are
   library atoms. */
.stage-intro__mode {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-4);
}
.stage-intro__mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--bp-s-4);
}
.stage-intro__mode-card {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
}
.stage-intro__mode-card-header {
  display: grid;
  gap: var(--bp-s-1);
}
.stage-intro__mode-card-header h2 {
  margin: 0;
}
/* Pin the badge above the kicker without forcing extra grid rows on the
   non-recommended cards (which have no badge). */
.stage-intro__mode-card-header .bp-badge {
  justify-self: start;
  margin-bottom: var(--bp-s-1);
}
.stage-intro__mode-card-footer {
  margin-top: auto;
  padding-top: var(--bp-s-3);
}

.stage-intro__layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
}

@media (max-width: 768px) {
  .stage-intro__layout {
    grid-template-columns: 1fr;
  }
}

.stage-intro__main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Card content typography inside the stage-intro main column —
   the cards themselves are plain `.bp-card`, so these rules only
   shape the title/body spacing of cards rendered inside this
   layout. */
.stage-intro__main > .bp-card h2 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: var(--bp-ink);
}

.stage-intro__main > .bp-card p {
  color: var(--bp-ink);
  line-height: 1.6;
  margin: 0;
}

.stage-intro__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.stage-intro__sidebar > .bp-card h3 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
  color: var(--bp-ink);
}

.stage-intro__sidebar > .bp-card p {
  font-size: 0.9rem;
  color: var(--bp-ink);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.stage-intro__sidebar > .bp-card p:last-child {
  margin-bottom: 0;
}

.stage-intro__sidebar > .bp-card ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  color: var(--bp-ink-muted);
}

.stage-intro__sidebar > .bp-card ul li {
  margin-bottom: 0.4rem;
}

/* Numbered-step list (placeholder intros use this for "What
   You'll Do" walk-throughs). */
.stage-intro__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.stage-intro__steps li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* Numeric step marker — circular badge containing the step
   number, paired with `.step-content` for the label + body. */
.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  background: var(--bp-accent);
  color: var(--bp-accent-ink);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
}

.step-content h3 {
  font-size: 1rem;
  margin: 0 0 0.25rem;
  color: var(--bp-ink);
}

.step-content p {
  font-size: 0.9rem;
  color: var(--bp-ink-muted);
  margin: 0;
}

/* Small italic note ("time estimate", "auto-save", etc.) — used
   inside stage-intro sidebar cards. Scoped under the sidebar-card
   path so it has enough specificity to beat the broader
   `.stage-intro__sidebar > .bp-card p` rule's `color: var(--bp-ink)`
   without needing `!important`. */
.stage-intro__sidebar > .bp-card p.stage-intro__time-note {
  color: var(--bp-ink-muted);
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────────
   Questionnaire surfaces — used by the GTKY survey form,
   GTKY review, and any future questionnaire-driven stage.
   ────────────────────────────────────────────────────────────── */

/* Centered hero block above the question card — kicker badge +
   title + subtitle. The kicker is `.bp-badge .bp-badge--accent`
   in markup; this rule just spaces it from the title below. */
.questionnaire-step-header {
  margin-bottom: 2rem;
  text-align: center;
}

.questionnaire-step-header .bp-badge { margin-bottom: 0.75rem; }

.questionnaire-step-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--bp-ink);
}

.questionnaire-step-header .subtitle {
  font-size: 1.1rem;
  color: var(--bp-ink-muted);
  margin-bottom: 0.75rem;
}

/* Survey-form footer — back-to-dashboard left, mode-switch right.
   Mirrors the AI chat's `.chat-hint` footer so the two end-of-
   page actions sit at the same vertical on both surfaces (#819). */
.survey-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bp-s-2) var(--bp-s-4);
  margin-top: 1rem;
}

.survey-form__switch-form { margin: 0; }

.survey-form__back-link,
.survey-form__switch-link {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--bp-dur-fast) var(--bp-easing);
}

.survey-form__back-link { color: var(--bp-ink-muted); }
.survey-form__back-link:hover { color: var(--bp-ink); }
.survey-form__switch-link { color: var(--bp-accent); }
.survey-form__switch-link:hover { color: var(--bp-ink); }

/* Individual question wrapper inside a `.bp-card` form panel —
   label + helper + input controls stacked vertically. */
.questionnaire-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.questionnaire-field__label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bp-ink);
}

/* Label suppression — questions whose label is hidden by a
   conditional rule stay in the flow but render without their
   question text. Hidden via sr-only-style positioning rather
   than `display: none` so the label remains in the accessibility
   tree and continues to provide an accessible name. */
.questionnaire-field__label.is-suppressed {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.questionnaire-field__helper {
  font-size: 0.85rem;
  color: var(--bp-ink-muted);
  line-height: 1.5;
}

.questionnaire-field__helper p { margin: 0; }

/* Toggle helper variants based on the parent question's
   data-suppress-label state. The questionnaire-reveal Stimulus
   controller flips that attribute on the question wrapper, so
   this purely-declarative swap stays in sync without extra JS. */
.q-reveal--helper-suppressed { display: none; }

.q-reveal--question[data-suppress-label="true"] .q-reveal--helper-default {
  display: none;
}

.q-reveal--question[data-suppress-label="true"] .q-reveal--helper-suppressed {
  display: block;
}

/* Footer row of the question card — Back / Continue / Submit. */
.questionnaire-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--bp-rule);
}

/* ── Questionnaire reveal: progress bar + sticky variant ── */
.q-reveal-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

/* Sticky variant — keeps the progress indicator visible as the
   user scrolls through revealed/completed questions. Offset
   clears the sticky `.app-bar` (top: 0; z-index: 50). z-index
   sits above question cards but well below the modal layer
   (z-index: 1000 in modal.css). */
.q-reveal-progress.is-sticky {
  position: sticky;
  top: 56px;
  z-index: 20;
  background: var(--bp-paper);
  padding: 0.75rem 0;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--bp-rule-soft);
}

@media (max-height: 600px) {
  .q-reveal-progress.is-sticky {
    position: static;
    border-bottom: 0;
    padding: 0;
  }
}

/* ── Questionnaire reveal: question states ── */

/* Newly-revealed questions fade in from below. Base class is
   visible by default so no-JS users still see all questions;
   the animation only plays when JS adds `q-reveal--visible`. */
@keyframes q-reveal-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.q-reveal--question.q-reveal--visible {
  animation: q-reveal-enter 0.25s ease both;
}

.q-reveal--active {
  border-left: 3px solid var(--bp-accent);
  padding-left: 0.75rem;
  margin-left: -0.75rem;
}

@keyframes q-refocus {
  0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 0%, transparent); }
  40%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 20%, transparent); }
  100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 0%, transparent); }
}

.q-reveal--refocus { animation: q-refocus 0.4s ease; }

.q-reveal--completed {
  opacity: 0.75;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--bp-rule);
  margin-bottom: 0.25rem;
}

.q-reveal--completed.q-reveal--last-completed { border-bottom: none; }

.q-reveal--completed .bp-pill:not(.is-selected) { display: none; }

.q-reveal--completed input[type="text"],
.q-reveal--completed textarea {
  pointer-events: none;
  background: var(--bp-surface);
  border-color: transparent;
  color: var(--bp-ink);
  resize: none;
}

.q-reveal--question-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.q-reveal--change-btn {
  display: none;
  font-size: 0.75rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--bp-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  flex-shrink: 0;
  margin-top: 1px;
}

.q-reveal--completed .q-reveal--change-btn { display: inline-block; }

.q-reveal-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ──────────────────────────────────────────────────────────────
   Shared utilities
   ────────────────────────────────────────────────────────────── */

/* Month-picker polyfill — two `<select>` elements replacing
   `<input type="month">`. Used by `month_year_field` in
   `stages/capabilities_helper.rb`. */
.month-picker-selects {
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.month-picker-selects select {
  flex: 1 1 auto;
  min-width: 7rem;
}

/* Visually hidden but available to screen readers. */
.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;
}

/* ============================================================
   Capabilities — Stage Introduction (Flow A — slice 1a, #834)
   ============================================================ */

.capabilities-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--bp-s-6) var(--bp-s-5) var(--bp-s-7);
}

.capabilities-intro__header { margin-bottom: var(--bp-s-6); }

.capabilities-intro__header h1 {
  margin: var(--bp-s-2) 0 var(--bp-s-3);
}

.capabilities-intro__body { margin-bottom: var(--bp-s-6); }

.capabilities-intro__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bp-s-3);
}

.capabilities-intro__cta-form { margin: 0; }

/* Capabilities intro modal — passed as `custom_class:` on
   `shared/_modal`, with the body rendered from
   `shared/_capabilities_intro_content`. The body uses these
   classes for the title/copy typography. */
.capabilities-intro-modal-content { max-width: 560px; }

.capabilities-intro-modal-goal {
  color: var(--bp-ink);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.capabilities-intro-modal-steps-heading {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--bp-ink);
}

.capabilities-intro-modal-steps {
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--bp-ink);
}

.capabilities-intro-modal-steps li {
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.capabilities-intro-modal-time {
  font-size: 0.9rem;
  color: var(--bp-ink-muted);
  margin: 0;
}

/* ============================================================
   Capabilities — Flow B Category Filter (slice 1b, #835)
   ============================================================ */

.capabilities-filter {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--bp-s-6) var(--bp-s-5) var(--bp-s-7);
}

.capabilities-filter__header { margin-bottom: var(--bp-s-5); }

.capabilities-filter__header h1 {
  margin: var(--bp-s-2) 0 var(--bp-s-3);
}

.capabilities-filter__notice { margin-bottom: var(--bp-s-6); }

.capabilities-filter__notice ul {
  margin: var(--bp-s-2) 0;
  padding-left: 1.25rem;
}

.capabilities-filter__notice li { line-height: 1.6; }

.capabilities-filter__details {
  margin: var(--bp-s-3) 0 0;
  font-size: 0.9rem;
  color: var(--bp-ink);
}

.capabilities-filter__details > summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--bp-accent);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.capabilities-filter__details > summary::-webkit-details-marker {
  display: none;
}

.capabilities-filter__details > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform var(--bp-dur-fast) var(--bp-easing);
  font-size: 0.85em;
}

.capabilities-filter__details[open] > summary::before {
  transform: rotate(90deg);
}

.capabilities-filter__details > p {
  margin: var(--bp-s-2) 0 0;
  line-height: 1.55;
  color: var(--bp-ink-muted);
}

.capabilities-filter__ai-reasoning {
  margin: var(--bp-s-2) 0 0;
  color: var(--bp-ink-muted);
  font-size: 0.85rem;
  line-height: 1.45;
  max-width: 60ch;
}

.capabilities-filter__form {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-5);
}

.capabilities-filter__group {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

.capabilities-filter__group-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bp-ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.capabilities-filter__group-count {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bp-ink-muted);
  background: var(--bp-surface);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-pill);
  padding: 0.05rem 0.5rem;
}

.capabilities-filter__group-blurb {
  margin: 0;
  font-size: 0.85rem;
  color: var(--bp-ink-muted);
  line-height: 1.45;
}

.capabilities-filter__group-empty {
  font-style: italic;
  color: var(--bp-ink-muted);
  margin: 0;
}

.capabilities-filter__rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
  overflow: hidden;
  background: var(--bp-paper);
}

.capabilities-filter__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
}

.capabilities-filter__row-label {
  flex: 1 1 auto;
  min-width: 0;
}

.capabilities-filter__row + .capabilities-filter__row {
  border-top: 1px solid var(--bp-rule-soft);
}

.capabilities-filter__category-name {
  font-size: 0.95rem;
  color: var(--bp-ink);
}

.capabilities-filter__ai-reasoning + .capabilities-filter__gtky-note,
.capabilities-filter__category-name + .capabilities-filter__gtky-note {
  margin-top: var(--bp-s-2);
}

.capabilities-filter__gtky-note {
  margin: var(--bp-s-2) 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--bp-accent);
  max-width: 60ch;
}

.capabilities-filter__row-control { flex-shrink: 0; }

/* Segmented Applicable / Not-Applicable toggle. The radios are visually
   hidden; the sibling <span> label is the tappable segment and reflects the
   checked state via :checked + sibling selectors. */
.capabilities-filter__toggle {
  display: inline-flex;
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-pill);
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: var(--bp-paper);
}

.capabilities-filter__toggle-option {
  display: inline-flex;
  cursor: pointer;
}

.capabilities-filter__toggle-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.capabilities-filter__toggle-option span {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  color: var(--bp-ink-muted);
  transition: background var(--bp-dur-fast) var(--bp-easing),
              color var(--bp-dur-fast) var(--bp-easing);
}

.capabilities-filter__toggle-option:first-child span {
  border-right: 1px solid var(--bp-rule);
}

.capabilities-filter__toggle-option input:checked + span {
  background: var(--bp-accent);
  color: var(--bp-on-accent, #fff);
  font-weight: 500;
}

.capabilities-filter__toggle-option input:focus-visible + span {
  outline: 2px solid var(--bp-accent);
  outline-offset: -2px;
}

.capabilities-filter__toggle-option input:disabled + span {
  cursor: not-allowed;
  color: var(--bp-ink-faint, var(--bp-ink-muted));
  opacity: 0.55;
}

.capabilities-filter__toggle-option:has(input:disabled) {
  cursor: not-allowed;
}

.capabilities-filter__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-3);
  padding-top: var(--bp-s-4);
  border-top: 1px solid var(--bp-rule);
}

@media (max-width: 600px) {
  .capabilities-filter__row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   Capabilities — Stage Dashboard (slice 1c, #836; +slice 1d, #837)

   The summary cards, category cards, and manage-modal rows
   carry plain `.bp-card` in markup for chrome (bg + border +
   radius). The selectors below only set padding overrides and
   the unique flex / grid layout — no duplicated chrome.
   ============================================================ */

.capabilities-dashboard {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--bp-s-6) var(--bp-s-5) var(--bp-s-7);
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-6);
}

.capabilities-dashboard__hero h1 {
  margin: var(--bp-s-2) 0 var(--bp-s-3);
}

.capabilities-dashboard__hero-actions {
  margin-top: var(--bp-s-3);
  display: flex;
  gap: var(--bp-s-3);
}

/* Two-column work / status split. Main column flexes; the status rail
   is a fixed width so a long Role Readiness statement grows the rail's
   own height instead of pushing the active categories below the fold.
   `align-items: start` keeps each column's height independent. */
.capabilities-dashboard__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--bp-s-6);
  align-items: start;
}

.capabilities-dashboard__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-5);
}

.capabilities-dashboard__rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-4);
}

/* Below 900px the rail drops beneath the work (source order is main
   first), so the active categories stay directly under the page hero. */
@media (max-width: 900px) {
  .capabilities-dashboard__split {
    grid-template-columns: 1fr;
  }
}

/* Each status / continue card pairs `.bp-card` (chrome) with this class
   for the tighter padding + inner flex stack. */
.capabilities-dashboard__card {
  padding: var(--bp-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

/* Pin each card's CTA to the bottom of its flex stack so the button
   sits below the copy regardless of how much text precedes it. */
.capabilities-dashboard__card .bp-btn {
  margin-top: auto;
}

/* The Continue CTA is a button_to (POST) — `display: contents` collapses
   its wrapper <form> so the button itself stays the card's flex child and
   keeps the margin-top:auto bottom-pin above. */
.capabilities-dashboard__continue-cta-form {
  display: contents;
}

.capabilities-dashboard__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
}

.capabilities-dashboard__continue-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--bp-ink);
}

.capabilities-dashboard__continue-meta,
.capabilities-dashboard__continue-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--bp-ink-muted);
}

.capabilities-dashboard__progress-count {
  margin: 0;
  font-size: 0.95rem;
  color: var(--bp-ink);
}

.capabilities-dashboard__readiness h2 { margin: 0; }

.capabilities-dashboard__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-3);
  margin-bottom: var(--bp-s-4);
}

.capabilities-dashboard__section-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bp-ink);
}

.capabilities-dashboard__empty {
  font-style: italic;
  color: var(--bp-ink-muted);
}

/* Flow D import offer (slice 1f, #839) — a single soft card between
   the summary row and the category list, shown only while the
   one-time import offer is still available. */
.capabilities-dashboard__import {
  margin-bottom: var(--bp-s-5);
}

.capabilities-dashboard__import-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bp-s-4);
}

.capabilities-dashboard__import-body {
  flex: 1 1 20rem;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-1);
}

.capabilities-dashboard__import-title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--bp-ink);
}

.capabilities-dashboard__import-copy {
  margin: 0;
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

/* Capture Guidance Helper (S6) — "describe it, I'll route it". A quiet card
   above the category list; deliberately soft so it reads as a helper, not a
   primary action. Inherits `.bp-card--soft`. */
.capabilities-dashboard__guidance {
  display: block;
  margin-bottom: var(--bp-s-5);
}

.capabilities-dashboard__guidance-card {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
}

/* Collapsible header (native <details><summary>). Custom chevron in place of
   the default marker, rotating on open — mirrors the category-introduction
   disclosure so the two read as the same affordance. When collapsed only this
   summary shows; the card gap disappears with the hidden content. */
.capabilities-dashboard__guidance-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
}

.capabilities-dashboard__guidance-summary::-webkit-details-marker {
  display: none;
}

.capabilities-dashboard__guidance-summary::before {
  content: "▸";
  display: inline-block;
  transition: transform var(--bp-dur-fast) var(--bp-easing);
  font-size: 0.95em;
  color: var(--bp-ink-muted);
}

.capabilities-dashboard__guidance-card[open] .capabilities-dashboard__guidance-summary::before {
  transform: rotate(90deg);
}

.capabilities-dashboard__guidance-body {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-1);
}

.capabilities-dashboard__guidance-title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--bp-ink);
}

.capabilities-dashboard__guidance-copy {
  margin: 0;
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

.capabilities-dashboard__guidance-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bp-s-3);
}

/* The field carries its own bottom margin (.bp-field); drop it here so the
   input and the submit button baseline-align on one row. */
.capabilities-dashboard__guidance-form .bp-field {
  flex: 1 1 20rem;
  margin-bottom: 0;
}

.capabilities-dashboard__guidance-note {
  margin: 0;
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

.capabilities-dashboard__guidance-lead {
  margin: var(--bp-s-2) 0 var(--bp-s-2);
  font-weight: 600;
  color: var(--bp-ink);
}

.capabilities-dashboard__guidance-matches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

.capabilities-dashboard__guidance-match {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bp-s-3);
  padding: var(--bp-s-3);
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-radius);
}

.capabilities-dashboard__guidance-match-text {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.capabilities-dashboard__guidance-match-name {
  font-weight: 600;
  color: var(--bp-ink);
}

.capabilities-dashboard__guidance-match-reason {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bp-ink-muted);
}

/* Not-Applicable action: the "you set this aside" caption stacks directly
   above its reinstate button so the row stays two columns (text | action)
   rather than three. */
.capabilities-dashboard__guidance-match-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bp-s-1);
}

.capabilities-dashboard__guidance-match-na {
  font-size: 0.8125rem;
  color: var(--bp-ink-muted);
}

/* button_to renders a form wrapper; keep it inline so the CTA sits on the
   match row rather than forcing a line break. */
.capabilities-dashboard__guidance-match form {
  margin: 0;
}

/* Capture-depth indicator (S4) — a quiet, read-only pill where the
   retired tier badge used to sit. It communicates what finishing the
   category takes (`Facts` vs `Refined`), not a setting the user picks,
   so it is deliberately low-prominence: no fill, muted ink, a subtle
   rule. `help` cursor + `title`/sr-only note carry the one-line
   explanation (DESIGN § Dashboard item 4). */
.capabilities-dashboard__depth {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
  padding: 2px var(--bp-s-2);
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-r-sm);
  cursor: help;
}

/* The legend renders the same badge inline in a sentence, so it must
   sit on the text baseline and not carry the standalone pill's help
   cursor (the legend is already the explanation). */
.capabilities-dashboard__depth--inline {
  vertical-align: baseline;
  cursor: inherit;
}

/* One-line key for the per-card depth badges. Quiet by design — it
   explains the Facts/Refined tags once so the badge itself needn't be
   hovered to be understood. */
.capabilities-dashboard__depth-legend {
  margin: 0 0 var(--bp-s-3);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bp-ink-muted);
}

.capabilities-dashboard__category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
}

/* Each category card pairs `.bp-card` (chrome) with this class
   for the tighter padding + inner flex stack. */
.capabilities-dashboard__category {
  padding: var(--bp-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
}

.capabilities-dashboard__category-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bp-s-3);
}

.capabilities-dashboard__category-identity {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-1);
  /* `flex-start` (NOT the default `stretch`) keeps the
     designation pill — an inline-flex element — from stretching
     to the column's full width. Without this it renders as wide
     as the category h3 ("Work Experience"), which reads as a
     long bar rather than a pill. */
  align-items: flex-start;
}

.capabilities-dashboard__category-meta {
  display: flex;
  align-items: center;
  gap: var(--bp-s-2);
  flex-wrap: wrap;
}

.capabilities-dashboard__category-actions {
  display: flex;
  gap: var(--bp-s-2);
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.capabilities-dashboard__category-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bp-ink);
}

/* The name is the only route to the category screen now that the
   "Open category" button is gone. It reads as the heading it is, and
   reveals itself as a link on hover rather than shouting in link blue. */
.capabilities-dashboard__category-name a {
  color: inherit;
  text-decoration: none;
}

.capabilities-dashboard__category-name a:hover,
.capabilities-dashboard__category-name a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--bp-rule);
  text-underline-offset: 3px;
}

.capabilities-dashboard__category-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--bp-ink-muted);
  font-style: italic;
}

/* One disclosure primitive, two uses: "Why this matters" and (later) the
   completed-entry fold. Same affordance, same weight, so a card never
   looks like it has two different kinds of secret. */
.capabilities-dashboard__disclosure > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--bp-ink-muted);
  padding: var(--bp-s-2) 0;
  display: flex;
  align-items: center;
  gap: var(--bp-s-2);
}

.capabilities-dashboard__disclosure > summary::-webkit-details-marker { display: none; }

.capabilities-dashboard__disclosure > summary::before {
  content: "+";
  font-family: var(--bp-mono-family);
  font-size: 0.8rem;
  color: var(--bp-ink-subtle);
  width: 9px;
  text-align: center;
}

.capabilities-dashboard__disclosure[open] > summary::before { content: "\2212"; }

.capabilities-dashboard__disclosure > summary:hover { color: var(--bp-ink); }

.capabilities-dashboard__disclosure > summary:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
  border-radius: var(--bp-r-sm);
}

/* "Why this matters" sits directly under the category head: the reason
   precedes the work. Collapsed by default; the body is a lazily-loaded
   Turbo Frame, so the AI call happens on expand and never on the
   dashboard render. The 17px left pad aligns the copy with the summary
   text, past the +/− marker. */
.capabilities-dashboard__why { margin-top: var(--bp-s-1); }

.capabilities-dashboard__why-copy {
  font-family: var(--bp-serif-family);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bp-ink-2);
  margin: 0;
  max-width: 68ch;
  padding: 0 0 var(--bp-s-3) 17px;
}

.capabilities-dashboard__why-loading {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
  padding: var(--bp-s-1) 0 var(--bp-s-4) 17px;
  max-width: 68ch;
}

.capabilities-dashboard__why-skeleton {
  height: 9px;
  border-radius: var(--bp-r-pill);
  background: var(--bp-surface-2);
}

/* Entry rows. A rule-separated list, not a stack of cards — nesting
   cards inside cards is the fastest way to make a dashboard feel
   heavy. */
.capabilities-dashboard__entries {
  list-style: none;
  margin: var(--bp-s-3) 0 0;
  padding: 0;
  border-top: 1px solid var(--bp-rule-soft);
}

.capabilities-dashboard__entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--bp-s-4);
  padding: var(--bp-s-3) 0;
  border-bottom: 1px solid var(--bp-rule-soft);
}

.capabilities-dashboard__entry:last-child { border-bottom: 0; }

.capabilities-dashboard__entry-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.capabilities-dashboard__entry-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--bp-ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capabilities-dashboard__entry-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--bp-rule);
  text-underline-offset: 3px;
}

.capabilities-dashboard__entry-sub {
  font-size: 0.78rem;
  color: var(--bp-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A finished entry recedes: it is a record, not a task. */
.capabilities-dashboard__entry[data-done="true"] .capabilities-dashboard__entry-title {
  font-weight: 500;
  color: var(--bp-ink-2);
}

/* Reserve the action column even when an entry has no action, so the
   status badges stay in one vertical line down the card. */
.capabilities-dashboard__entry-action {
  min-width: 150px;
  display: flex;
  justify-content: flex-end;
}

.capabilities-dashboard__entry-action--none {
  color: var(--bp-ink-subtle);
  font-size: 0.78rem;
  font-style: italic;
  padding-right: var(--bp-s-2);
}

/* Below the phone breakpoint the three-column grid crushes the title.
   Stack instead, and let the badge + action sit on one line under it. */
@media (max-width: 720px) {
  .capabilities-dashboard__entry {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--bp-s-2) var(--bp-s-3);
  }

  .capabilities-dashboard__entry-main { grid-column: 1 / -1; }
  .capabilities-dashboard__entry-action { min-width: 0; }
}

/* The one-line "where does this category stand" summary that takes the
   rollup vector's place. It sits BELOW the entries so the card reads
   reason -> work -> score; a summary belongs at the end. */
.capabilities-dashboard__category-standing {
  display: flex;
  align-items: center;
  gap: var(--bp-s-3);
  margin-top: var(--bp-s-4);
  padding-top: var(--bp-s-3);
  border-top: 1px solid var(--bp-rule-soft);
}

.capabilities-dashboard__category-standing .bp-progress {
  flex: 1;
  max-width: 180px;
}

.capabilities-dashboard__standing-text {
  font-size: 0.8rem;
  color: var(--bp-ink-muted);
  font-variant-numeric: tabular-nums;
}

.capabilities-dashboard__standing-text strong {
  color: var(--bp-ink-2);
  font-weight: 600;
}

/* N/A bottom section — collapsed-by-default `<details>`,
   expanding to reveal a list of categories the user marked Not
   Applicable with inline Reinstate-as-<designation> affordances.
   Lives below the active designation groups so it doesn't
   visually compete with the work the user is trying to do, but
   stays discoverable so "where did Category X go?" has an
   obvious answer. */
.capabilities-dashboard__na {
  margin-top: var(--bp-s-4);
  border-top: 1px dashed var(--bp-rule);
  padding-top: var(--bp-s-3);
}

.capabilities-dashboard__na-summary {
  display: flex;
  align-items: center;
  gap: var(--bp-s-2);
  cursor: pointer;
  padding: var(--bp-s-1) var(--bp-s-2);
  margin-inline: calc(-1 * var(--bp-s-2));
  border-radius: var(--bp-r-md);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bp-ink-muted);
  user-select: none;
  /* Hide the default disclosure markers — both the Firefox /
     spec list-item marker and Safari's WebKit-specific
     `::-webkit-details-marker` pseudo. We render our own chevron
     below so the toggle affordance is visible across browsers
     and stays consistent with `display: flex` on the summary
     (which suppresses the default marker in some engines). */
  list-style: none;
}

.capabilities-dashboard__na-summary::-webkit-details-marker {
  display: none;
}

.capabilities-dashboard__na-summary::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform 150ms ease;
}

.capabilities-dashboard__na[open] .capabilities-dashboard__na-summary::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

.capabilities-dashboard__na-summary:hover {
  background: var(--bp-tint-info);
  color: var(--bp-ink);
}

.capabilities-dashboard__na-summary:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
}

.capabilities-dashboard__na-summary-count {
  font-variant-numeric: tabular-nums;
}

.capabilities-dashboard__na-list {
  list-style: none;
  margin: var(--bp-s-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

.capabilities-dashboard__na-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-3);
  padding: var(--bp-s-2) 0;
  flex-wrap: wrap;
}

.capabilities-dashboard__na-name {
  font-weight: 600;
  color: var(--bp-ink);
}

.capabilities-dashboard__na-actions {
  display: flex;
  align-items: center;
  gap: var(--bp-s-2);
  flex-wrap: wrap;
}

/* ============================================================
   Capabilities — applicability control (Concept A, S4)
   With tiers retired (epic #1598) the control is a single-click
   binary action: a direct "Mark Not Applicable" button on an
   Applicable card, a direct "Reinstate" on a Not Applicable row,
   or a quiet reason when GTKY forbids the move. Both PATCH the
   same endpoint.
   ============================================================ */

.capabilities-dashboard__designation {
  display: inline-flex;
  align-items: center;
}

/* `button_to` wraps the action in a form; it must not become a
   layout box between the control's flex row and its button. */
.capabilities-dashboard__designation-form {
  display: contents;
  margin: 0;
}

/* Never lie about state: say WHY the move is unavailable, rather
   than offering an action the server would bounce to another
   screen. Quiet and inline — it sits in the card's meta row. */
.capabilities-dashboard__designation-note {
  font-size: 12px;
  color: var(--bp-ink-subtle);
  line-height: 1.4;
  max-width: 22rem;
}

/* ============================================================
   Capabilities — Flow D Data Import (slice 1f, #839)
   Import offer surface (resume / LinkedIn cards + manual-entry
   escape) and the "no longer available" spent-offer state.
   ============================================================ */

.capabilities-data-import {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--bp-s-6) var(--bp-s-5) var(--bp-s-7);
}

.capabilities-data-import__header { margin-bottom: var(--bp-s-6); }

.capabilities-data-import__header h1 {
  margin: var(--bp-s-2) 0 var(--bp-s-3);
}

/* One-time-import note — a quiet inset banner above the source cards so
   the user knows resume / LinkedIn are mutually exclusive before they
   pick one. */
.capabilities-data-import__note {
  margin: 0 0 var(--bp-s-5);
  padding: var(--bp-s-3) var(--bp-s-4);
  border-left: 3px solid var(--bp-rule);
  background: var(--bp-paper);
  border-radius: var(--bp-r-sm);
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

.capabilities-data-import__sources {
  display: grid;
  gap: var(--bp-s-4);
  margin-bottom: var(--bp-s-6);
}

@media (min-width: 720px) {
  .capabilities-data-import__sources {
    grid-template-columns: repeat(2, 1fr);
  }
}

.capabilities-data-import__source {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

.capabilities-data-import__kicker {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bp-ink-muted);
}

.capabilities-data-import__source-title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--bp-ink);
}

.capabilities-data-import__source-copy {
  margin: 0 0 var(--bp-s-3);
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

/* Both source cards embed a form (the shared file-uploader, or the
   LinkedIn button_to). Let it fill the card and pin the submit control
   to the bottom edge so the two cards align. */
.capabilities-data-import__source form {
  margin-top: auto;
}

.capabilities-data-import__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bp-s-3);
  padding-top: var(--bp-s-4);
  border-top: 1px solid var(--bp-rule);
}

.capabilities-data-import__manual-prompt {
  flex: 1 1 16rem;
  margin: 0;
  color: var(--bp-ink-muted);
}

.capabilities-data-import__dismiss-form { margin: 0; }

.capabilities-data-import__unavailable {
  text-align: center;
  padding: var(--bp-s-6) var(--bp-s-5);
}

.capabilities-data-import__unavailable-title {
  margin: 0 0 var(--bp-s-3);
  color: var(--bp-ink);
}

.capabilities-data-import__unavailable-copy {
  margin: 0 auto var(--bp-s-5);
  max-width: 46ch;
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

/* ============================================================
   Capabilities — Flow C surfaces (slice 1d, #837)
   Category landing + new-entry form + lifecycle-aware editor.

   Verifiable-data fields use `.bp-input` / `.bp-select` /
   `.bp-textarea` directly (the Safari select fix lives on
   `.bp-select` itself). Category rows use `.bp-card` for chrome.
   ============================================================ */

.capabilities-category {
  /* List view — fills the layout container the way the dashboard
     does, so a scanner can see Company · Role · Dates · State
     without wrapping every row. */
  padding: var(--bp-s-4);
}

.capabilities-entry-form,
.capabilities-entry-editor {
  /* Form views stay constrained — narrower forms read more
     easily and keep the eye moving down the field stack instead
     of across. The handoff scale tops out at --bp-s-8 (64px);
     760px (the spec value for "chat & reading views") sits
     between scale steps so we express it as scale * a small
     whole-number factor. */
  padding: var(--bp-s-4);
  max-width: calc(var(--bp-s-8) * 12 - var(--bp-s-2));
  margin: 0 auto;
}

.capabilities-category__header,
.capabilities-entry-form__header,
.capabilities-entry-editor__header {
  margin-bottom: var(--bp-s-5);
}

/* Title-left / action-right header row (#1274 follow-up). The entry identity
   block flexes; the "Edit details" ghost action stays top-aligned on the
   right. Wraps on narrow screens so the action drops below the identity. */
.capabilities-entry-editor__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bp-s-4);
  flex-wrap: wrap;
}

.capabilities-entry-editor__identity {
  min-width: 0;
}

/* Header action cluster (#1470) — the surface's actions kept together (the
   clear "back to your résumé" return + the Edit control) rather than scattered
   between header and footer. Wraps to its own row on a narrow title-row. */
.capabilities-entry-editor__header-actions {
  display: flex;
  align-items: center;
  gap: var(--bp-s-3);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* The co-located "Edit" control (#1470) — a single bordered group holding the
   "Edit" label + the Facts / Narrative choices, so the two edit paths read as
   one either/or selection rather than two buttons at opposite ends of the page. */
.capabilities-entry-editor__edit-choices {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-s-2);
  padding: var(--bp-s-2);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
  background: var(--bp-surface-2);
  flex-shrink: 0;
}
.capabilities-entry-editor__edit-choices-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
  padding-left: var(--bp-s-1);
}
/* button_to wraps its button in a <form>; keep it inline + margin-free so the
   Narrative choice sits flush beside Facts inside the group. */
.capabilities-entry-editor__edit-choice-form {
  margin: 0;
  display: inline-flex;
}

.capabilities-category__nav,
.capabilities-entry-form__nav,
.capabilities-entry-editor__nav {
  margin-top: var(--bp-s-3);
  display: flex;
  gap: var(--bp-s-2);
}

/* In the entry editor the nav leads the header (above the title block), so it
   needs space below it rather than above. */
.capabilities-entry-editor__header .capabilities-entry-editor__nav {
  margin-top: 0;
  margin-bottom: var(--bp-s-4);
}

.capabilities-category__designation-row {
  display: flex;
  align-items: center;
  gap: var(--bp-s-2);
  flex-wrap: wrap;
  margin: var(--bp-s-2) 0 var(--bp-s-3);
}

.capabilities-category__remove-form {
  display: inline;
  margin: 0;
}

.capabilities-category__intro { margin-bottom: var(--bp-s-4); }

.capabilities-category__intro-summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--bp-ink);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.capabilities-category__intro-summary::-webkit-details-marker {
  display: none;
}

.capabilities-category__intro-summary::before {
  content: "▸";
  display: inline-block;
  transition: transform var(--bp-dur-fast) var(--bp-easing);
  font-size: 0.85em;
  color: var(--bp-ink-muted);
}

.capabilities-category__intro[open] .capabilities-category__intro-summary::before {
  transform: rotate(90deg);
}

.capabilities-category__intro-copy {
  margin: var(--bp-s-2) 0 0;
  line-height: 1.55;
  color: var(--bp-ink-muted);
}

.capabilities-category__entries-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--bp-s-3);
}

.capabilities-category__entries-title { margin: 0; }

.capabilities-category__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

/* Each row pairs `.bp-card` (chrome) with this class for the
   tighter padding + horizontal flex layout. */
.capabilities-category__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--bp-s-3);
}

.capabilities-category__row-title {
  margin: 0 0 var(--bp-s-1);
  font-size: 1rem;
}

.capabilities-category__row-meta {
  margin: 0;
  color: var(--bp-ink-muted);
  font-size: 0.875rem;
}

/* Lifecycle badge stacked over the forward CTA (#1182 F1b). */
.capabilities-category__row-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--bp-s-2);
  flex-shrink: 0;
}

.capabilities-category__row-advance {
  margin: 0;
}

.capabilities-category__empty {
  padding: var(--bp-s-3);
  color: var(--bp-ink-muted);
}

/* Entry form & editor */
.capabilities-entry-form__form,
.capabilities-entry-editor__shell {
  padding: var(--bp-s-4);
}

.capabilities-entry-form__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--bp-s-3);
}

/* Grouped field cluster (e.g. start/end date pair). Spans the
   full row width of the parent grid so the legend reads as a
   single labeled control, then lays the paired sub-fields out
   horizontally — one row at wide widths, stacked on narrow
   viewports. */
.capabilities-entry-form__field-group {
  grid-column: 1 / -1;
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
  padding: var(--bp-s-2) var(--bp-s-4) var(--bp-s-4);
  margin: 0;
}

.capabilities-entry-form__field-group-legend {
  padding: 0 var(--bp-s-2);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--bp-ink-muted);
}

.capabilities-entry-form__field-group-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--bp-s-3);
}

.capabilities-entry-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-1);
}

.capabilities-entry-form__label {
  font-weight: 600;
  font-size: 0.875rem;
}

.capabilities-entry-form__month-year {
  display: grid;
  grid-template-columns: 1fr 7rem;
  gap: var(--bp-s-2);
}

/* Selects inside the month/year pair need to shrink below their
   intrinsic content width or the 1fr/7rem grid template breaks. */
.capabilities-entry-form__month-year .bp-select {
  min-width: 0;
}

@media (max-width: 480px) {
  .capabilities-entry-form__month-year {
    grid-template-columns: 1fr 1fr;
  }
}

.capabilities-entry-form__footer,
.capabilities-entry-editor__actions {
  margin-top: var(--bp-s-4);
  display: flex;
  gap: var(--bp-s-2);
  flex-wrap: wrap;
  align-items: center;
}

.capabilities-entry-editor__transition {
  display: inline;
  margin: 0;
}

.capabilities-entry-editor__status {
  display: flex;
  align-items: center;
  gap: var(--bp-s-2);
  margin-bottom: var(--bp-s-3);
  flex-wrap: wrap;
}

.capabilities-entry-editor__status-label {
  font-weight: 600;
  color: var(--bp-ink-muted);
}

.capabilities-entry-editor__status-note {
  color: var(--bp-ink-muted);
  font-size: 0.875rem;
}

.capabilities-entry-editor__shell-head {
  margin-bottom: var(--bp-s-3);
}

.capabilities-entry-editor__shell-title { margin: 0; }

.capabilities-entry-editor__shell-sub {
  margin: var(--bp-s-1) 0 0;
  color: var(--bp-ink-muted);
}

.capabilities-entry-editor__presentation {
  margin-top: var(--bp-s-4);
  padding: var(--bp-s-3);
  border: 1px dashed var(--bp-rule);
  border-radius: var(--bp-r-md);
}

.capabilities-entry-editor__presentation legend {
  padding: 0 var(--bp-s-2);
  font-weight: 600;
}

.capabilities-entry-editor__detail-row {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-1);
  margin-bottom: var(--bp-s-3);
}

.capabilities-entry-editor__detail-destroy {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-s-1);
  font-size: 0.875rem;
  color: var(--bp-ink-muted);
}

.capabilities-entry-editor__review {
  margin-top: var(--bp-s-4);
  padding: var(--bp-s-4);
}

.capabilities-entry-editor__review-meta {
  font-size: 0.875rem;
  color: var(--bp-ink-muted);
  margin: 0;
}

/* ---------- Refinement orientation (#1065) ---------- */

.capabilities-entry-editor__orientation {
  margin-top: var(--bp-s-4);
  padding: var(--bp-s-4);
}

.capabilities-entry-editor__orientation-tips {
  margin: var(--bp-s-2) 0 0;
  padding-left: var(--bp-s-4);
  color: var(--bp-ink-muted);
}

.capabilities-entry-editor__orientation-tips li {
  margin-bottom: var(--bp-s-1);
}

/* Library-level static key/value list — the design library had no
   read-only data-display pattern, so this extends it (per the Handoff
   contract) rather than one-offing inside the capabilities namespace. */
.bp-dl {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: var(--bp-s-1) var(--bp-s-3);
  margin: 0;
}

.bp-dl__pair {
  display: contents;
}

.bp-dl__term {
  margin: 0;
  align-self: baseline;
}

.bp-dl__value {
  margin: 0;
  color: var(--bp-ink);
}

@media (max-width: 32rem) {
  .bp-dl {
    grid-template-columns: 1fr;
    gap: 0 0;
  }

  .bp-dl__value {
    margin-bottom: var(--bp-s-2);
  }
}

/* ---------- Dynamic narrative add/remove (#1065) ---------- */

.capabilities-entry-editor__detail-group {
  margin-bottom: var(--bp-s-4);
}

.capabilities-entry-editor__detail-hint {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--bp-ink-muted);
}

.capabilities-entry-editor__detail-add {
  margin-top: var(--bp-s-1);
}

.capabilities-entry-editor__detail-remove {
  align-self: flex-start;
}

.capabilities-entry-editor__detail-row[hidden] {
  display: none;
}

/* ---------- Holistic review (#1065 anchors it at top; #1067 payload) ---------- */

.capabilities-entry-editor__review-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bp-s-2);
  margin-bottom: var(--bp-s-2);
}

.capabilities-entry-editor__review-summary {
  margin: 0 0 var(--bp-s-3);
}

.capabilities-entry-editor__review-section {
  margin-top: var(--bp-s-3);
}

.capabilities-entry-editor__review-section h3 {
  margin: 0 0 var(--bp-s-1);
}

.capabilities-entry-editor__review-list {
  margin: 0;
  padding-left: var(--bp-s-4);
}

/* Match the list items to the card's paragraph voice. The global `p` rule
   (typography.css) gives summary/Skills paragraphs line-height 1.75 + ink-2;
   <li>s don't inherit that, so without this they read tighter and darker —
   looking like a different font within the same writeup. */
.capabilities-entry-editor__review-list li {
  line-height: 1.75;
  color: var(--bp-ink-2);
}

.capabilities-entry-editor__review-list li + li {
  margin-top: var(--bp-s-1);
}

.capabilities-entry-editor__review-flags li + li {
  margin-top: var(--bp-s-2);
}

/* ─── bp-split — side-by-side / two-pane layout ──────────────────────────────
   The standard for any view whose job is working two columns at once
   (review | content, coach | canvas). Side-by-side is cross-column work, not
   single-column reading, so the consumer's page container uses the 1200px
   budget (Handoff §07 "Page max width") rather than the 760px reading
   measure — otherwise each column reads cramped. This primitive owns the grid
   structure + responsive collapse only; the page width sits on the consumer's
   container, and scroll behavior (sticky aside vs. bounded-height internal
   scroll) is layered on top. Default columns are equal; --5-7 / --7-5 bias one
   side. First consumer: the reviewed Capabilities entry (#1223). */
.bp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--bp-s-5);
  align-items: start;
}

.bp-split--5-7 {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.bp-split--7-5 {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

/* Pin the aside in view while the other pane scrolls. Works on a normally
   scrolling page; a bounded-height workspace (e.g. the interview canvas)
   layers its own internal scroll instead. */
.bp-split__aside--sticky {
  position: sticky;
  top: var(--bp-s-4);
  max-height: calc(100vh - var(--bp-s-7));
  overflow-y: auto;
  /* Grid item: without this, long/unbroken content forces the column wider
     than its track instead of wrapping (the min-width:auto grid gotcha). */
  min-width: 0;
}

.bp-split__main {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-4);
  min-width: 0;
}

/* Workspace variant — the second documented scroll mode of the split. Where the
   default split scrolls the whole page (and an aside can go sticky), a workspace
   is a BOUNDED-HEIGHT surface whose two panes scroll INTERNALLY, so the primary
   pane stays put instead of scrolling off the top. Used where an ancestor
   `overflow: auto` makes `position: sticky` unreliable (the interview canvas).
   The consumer caps the height on an ancestor flex column; this variant fills it
   (`flex: 1 1 auto` + `min-height: 0`) and stretches both columns to equal full
   height so each pane can own its scroll region — either the pane element itself
   (e.g. `.iv__fields`) or a scrollable child inside it (e.g. the interview's
   `.iv__thread`). Compose by putting both classes on the one element:
   `class="bp-split bp-split--workspace"`. */
.bp-split--workspace {
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 60rem) {
  .bp-split,
  .bp-split--5-7,
  .bp-split--7-5 {
    grid-template-columns: 1fr;
  }

  .bp-split__aside--sticky {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* ---------- Reviewed two-column layout (#1223) ----------
   Composes .bp-split. The 760px reading cap is a single-column spec; the
   reviewed surface is a review | content comparison, so it adopts the 1200px
   side-by-side budget. Other entry-editor states keep the reading width. */
.capabilities-entry-editor--review-layout {
  max-width: 1200px;
}

.capabilities-entry-editor__review-layout {
  margin-top: var(--bp-s-4);
  /* Equal-height columns (#1274) so the review and the narrative occupy the
     same vertical space side by side instead of a short review next to a tall
     narrative. With equal heights there's nothing to scroll past, so the
     review pane is no longer sticky here (overrides .bp-split__aside--sticky)
     and its card grows to fill the column. */
  align-items: stretch;
}

.capabilities-entry-editor__review-layout > .bp-split__aside--sticky {
  position: static;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.capabilities-entry-editor__review-layout > .bp-split__aside--sticky > * {
  flex: 1 1 auto;
}

/* ---------- Review-pane placeholder (#1223) ---------- */

.capabilities-entry-editor__review-placeholder-body {
  margin: var(--bp-s-2) 0 0;
  color: var(--bp-ink-muted);
}

/* ---------- Read-only narrative summary (#1223) ---------- */

.capabilities-entry-editor__narrative-group {
  margin-bottom: var(--bp-s-4);
}

.capabilities-entry-editor__narrative-group:last-child {
  margin-bottom: 0;
}

.capabilities-entry-editor__narrative-group h3 {
  margin: 0 0 var(--bp-s-2);
}

.capabilities-entry-editor__narrative-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
}

.capabilities-entry-editor__narrative-body {
  margin: 0;
  color: var(--bp-ink);
  /* EntryDetail bodies are free text and may contain the line breaks the
     user typed; preserve them so the read-only view is faithful to what was
     written (and still wraps long lines). */
  white-space: pre-wrap;
}

.capabilities-entry-editor__narrative-empty {
  margin: 0;
  color: var(--bp-ink-muted);
}

/* Inline element-level flag — pins a holistic-review flag to the specific
   captured element it references (#1223 AC3). */
.capabilities-entry-editor__narrative-flags {
  list-style: none;
  margin: var(--bp-s-2) 0 0;
  padding: var(--bp-s-2) var(--bp-s-3);
  border-left: 2px solid var(--bp-rule);
  border-radius: var(--bp-r-sm);
  background: var(--bp-surface-2);
}

.capabilities-entry-editor__narrative-flags li + li {
  margin-top: var(--bp-s-2);
}

.capabilities-entry-editor__narrative-flags strong {
  display: block;
  font-size: 0.85rem;
}

.capabilities-entry-editor__destroy {
  margin-top: var(--bp-s-5);
}

.capabilities-entry-editor[data-standalone] .capabilities-entry-editor__destroy {
  /* Deep-link contexts may not want destruction; hide for now. */
  display: none;
}

/* ---------- Capture-mode toggle (slice 1e) ---------- */

/* `.capabilities-entry-form__shell-head` mirrors the editor's
   `__shell-head` so new_entry and show_entry surface the toggle in
   visually identical positions, even though the surrounding card
   structures differ. */
.capabilities-entry-form__shell-head {
  margin-bottom: var(--bp-s-3);
}

.capabilities-capture-mode {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bp-s-2);
  margin-top: var(--bp-s-3);
  padding-top: var(--bp-s-3);
  border-top: 1px solid var(--bp-rule-soft);
}

.capabilities-capture-mode__label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--bp-s-2);
  margin: 0;
  font-size: 0.875rem;
}

.capabilities-capture-mode__label-text {
  font-family: var(--bp-mono-family);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
}

.capabilities-capture-mode__current {
  font-weight: 600;
  color: var(--bp-ink);
}

.capabilities-capture-mode__switch-form {
  margin: 0;
}

.capabilities-capture-mode__switch {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.875rem;
  color: var(--bp-accent);
  cursor: pointer;
}

.capabilities-capture-mode__switch:hover {
  color: var(--bp-ink);
  text-decoration: underline;
}

.capabilities-capture-mode__fallback-notice {
  margin: var(--bp-s-3) 0 0;
  padding: var(--bp-s-2) var(--bp-s-3);
  background: var(--bp-highlight-soft);
  color: var(--bp-ink-2);
  border-left: 3px solid var(--bp-highlight);
  border-radius: var(--bp-r-sm);
  font-size: 0.875rem;
}

/* Flow E — live conflict indicator (slice 1g, #840). A non-intrusive
   entry point between the dashboard summary row and the Flow D import
   card. In its quiet state (no conflicts — always, in Phase 1) it reads
   as a slim, low-contrast link; `data-has-conflicts="true"` lifts it to
   an attention treatment for Phase 2 when concrete checks register. */
.capabilities-dashboard__reconciliation {
  display: flex;
  align-items: baseline;
  gap: var(--bp-s-2);
  padding: var(--bp-s-2) var(--bp-s-3);
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-r-sm);
  color: var(--bp-ink-muted);
  text-decoration: none;
  font-size: 0.875rem;
}

.capabilities-dashboard__reconciliation:hover {
  border-color: var(--bp-rule);
  color: var(--bp-ink);
}

.capabilities-dashboard__reconciliation-label {
  font-family: var(--bp-mono-family);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.capabilities-dashboard__reconciliation-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bp-ink);
}

.capabilities-dashboard__reconciliation-state {
  color: var(--bp-ink-subtle);
}

.capabilities-dashboard__reconciliation[data-has-conflicts="true"] {
  border-color: var(--bp-highlight);
  background: var(--bp-highlight-soft);
  color: var(--bp-ink-2);
}

.capabilities-dashboard__reconciliation[data-has-conflicts="true"]
  .capabilities-dashboard__reconciliation-count {
  color: var(--bp-danger);
}

/* Flow E — reconciliation resolution UI (slice 1g #840; concrete
   per-check conflict cards added in slice 2e). */
.capabilities-reconciliation {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-5);
}

.capabilities-reconciliation__header {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

.capabilities-reconciliation__clear {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bp-s-3);
}

.capabilities-reconciliation__clear-title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--bp-ink);
}

.capabilities-reconciliation__clear-copy {
  margin: 0;
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

.capabilities-reconciliation__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
}

.capabilities-reconciliation__item {
  padding: var(--bp-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

.capabilities-reconciliation__item-title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--bp-ink);
}

.capabilities-reconciliation__item-summary {
  margin: 0;
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

.capabilities-reconciliation__item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bp-s-3);
  margin-top: var(--bp-s-2);
}

.capabilities-reconciliation__revise {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bp-s-2);
}

.capabilities-reconciliation__revise-label {
  margin: 0;
  font-size: 0.875rem;
  color: var(--bp-ink-muted);
}

/* Stage Closing — Role Readiness + extension shells (slice 1h, #841).
   Read-only reflection plus navigation; the three extension shells render
   placeholder copy until their AI population lands in Phase 2 (2g). */
.capabilities-closing {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-5);
}

.capabilities-closing__header {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

.capabilities-closing__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
}

.capabilities-closing__subhead {
  margin: 0;
  font-size: 1.05rem;
  color: var(--bp-ink);
}

/* Celebratory "two stages complete" opening banner. A soft completion
   tint + accent rule give it a warm, earned feel within Quiet Editorial —
   no confetti, just a clear positive moment that recognizes the work and
   points forward. */
.capabilities-closing__recognition {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
  background: var(--bp-tint-done);
  border-color: transparent;
  border-left: 3px solid var(--bp-success);
}

.capabilities-closing__recognition-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-tint-ink-done);
}

.capabilities-closing__recognition-headline {
  margin: 0;
  color: var(--bp-ink);
}

.capabilities-closing__recognition-body {
  margin: 0;
  line-height: 1.6;
  color: var(--bp-ink);
}

.capabilities-closing__recognition-next {
  margin: 0;
  padding-top: var(--bp-s-3);
  border-top: 1px solid var(--bp-rule-soft);
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

.capabilities-closing__recognition-next-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-tint-ink-done);
  margin-right: var(--bp-s-2);
}

.capabilities-closing__readiness {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bp-s-3);
}

.capabilities-closing__readiness-statement,
.capabilities-closing__readiness-pending {
  margin: 0;
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

.capabilities-closing__actions-block {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

.capabilities-closing__action-list {
  margin: 0;
  padding-left: var(--bp-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-1);
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

.capabilities-closing__extensions {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
}

.capabilities-closing__extension {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

.capabilities-closing__extension-title {
  margin: 0;
  font-size: 1rem;
  color: var(--bp-ink);
}

.capabilities-closing__extension-copy {
  margin: 0;
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

.capabilities-closing__extension-role {
  margin: 0;
  font-size: 1.05rem;
  color: var(--bp-ink);
}

.capabilities-closing__extension-footnote {
  margin: 0;
  color: var(--bp-ink-muted);
  font-style: italic;
}

.capabilities-closing__peer-roles {
  margin: 0;
  padding-left: var(--bp-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

.capabilities-closing__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-s-3);
}

/* ===================================================================
   Stage dashboard — shared shell for stage exercise-list landing pages
   (Stage 3 / Target Job Blueprint, slice 6). Mirrors the
   .capabilities-dashboard* spacing using the --bp-* tokens.
   =================================================================== */
.stage-dashboard {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--bp-s-6) var(--bp-s-5) var(--bp-s-7);
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-6);
}

.stage-dashboard__header {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

.stage-dashboard__intro {
  margin: 0;
  max-width: 60ch;
}

/* "What to do next" CTA (slice D, #1117) — a single directive card above the
   exercise grid so the user always has one obvious next action. Card chrome is
   .bp-card; this owns only the row layout (copy left, action right, stacking
   on narrow viewports). */
.stage-dashboard__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-4);
  flex-wrap: wrap;
}

.stage-dashboard__cta-body {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

.stage-dashboard__cta-title {
  margin: 0;
}

.stage-dashboard__cta-blurb {
  margin: 0;
  max-width: 60ch;
  color: var(--bp-ink-muted);
}

.stage-dashboard__exercises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bp-s-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.stage-dashboard__exercise {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
}

.stage-dashboard__exercise-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bp-s-2);
}

.stage-dashboard__exercise-head h2 {
  margin: 0;
}

.stage-dashboard__exercise-blurb {
  margin: 0;
  flex: 1;
}

.stage-dashboard__exercise-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--bp-s-3);
}

/* Soft "finish the others first" recommendation on the IVP card (D6). Advisory
   tone — muted, not an alert — because the card stays clickable. */
.stage-dashboard__exercise-note {
  margin: 0;
  color: var(--bp-ink-muted);
  font-style: italic;
}

.stage-dashboard__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bp-s-3);
  padding-top: var(--bp-s-3);
}

/* Names the missing step while the "Mark stage complete" button is disabled
   (D6 stage-floor gate). */
.stage-dashboard__complete-hint {
  margin: 0;
  color: var(--bp-ink-muted);
}

/* ===================================================================
   Stage closing — placeholder wrap-up shell (slice 6 stub)
   =================================================================== */
.stage-closing {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--bp-s-6) var(--bp-s-5) var(--bp-s-7);
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-4);
}

.stage-closing__body {
  margin: 0;
  line-height: 1.7;
}

.stage-closing__footer {
  display: flex;
  gap: var(--bp-s-3);
  flex-wrap: wrap;
}

/* Stage-3 (Target Job Blueprint) full closing — iteration 6, slice 3 (#1403).
   Mirrors the .capabilities-closing__* recognition/readiness/actions treatment
   using the shared --bp-* tokens so the two stage closings read as one family. */
.stage-closing__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
}

.stage-closing__subhead {
  margin: 0;
  font-size: 1.05rem;
  color: var(--bp-ink);
}

/* Celebratory recognition banner — a soft completion tint + accent rule give it
   a warm, earned feel within Quiet Editorial (no confetti). */
.stage-closing__recognition {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
  background: var(--bp-tint-done);
  border-color: transparent;
  border-left: 3px solid var(--bp-success);
}

.stage-closing__recognition-kicker,
.stage-closing__recognition-next-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-tint-ink-done);
}

.stage-closing__recognition-next-label {
  margin-right: var(--bp-s-2);
}

.stage-closing__recognition-headline {
  margin: 0;
  color: var(--bp-ink);
}

.stage-closing__recognition-body {
  margin: 0;
  line-height: 1.6;
  color: var(--bp-ink);
}

.stage-closing__recognition-next {
  margin: 0;
  padding-top: var(--bp-s-3);
  border-top: 1px solid var(--bp-rule-soft);
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

.stage-closing__readiness {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bp-s-3);
}

.stage-closing__readiness-statement,
.stage-closing__readiness-pending,
.stage-closing__readiness-note,
.stage-closing__commentary-pending {
  margin: 0;
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

/* The readiness rail sits above the note inside the readiness card; give it the
   full card width rather than the flex-start default the card applies. */
.stage-closing__readiness .jsr-rail {
  width: 100%;
}

.stage-closing__commentary {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
  width: 100%;
  padding-top: var(--bp-s-3);
  border-top: 1px solid var(--bp-rule-soft);
}

.stage-closing__commentary-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
}

.stage-closing__commentary-facet {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-1);
}

.stage-closing__commentary-facet dt {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
}

.stage-closing__commentary-facet dd {
  margin: 0;
  line-height: 1.6;
  color: var(--bp-ink);
}

/* Progressive disclosure for the résumé target-alignment facet (#1453 follow-up):
   the lead point renders inline; the remaining "why this draft" points expand
   from a quiet summary toggle. */
.stage-closing__commentary-more {
  margin-top: var(--bp-s-2);
}
.stage-closing__commentary-more > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--bp-ink-muted);
  list-style: none;
}
.stage-closing__commentary-more > summary::-webkit-details-marker {
  display: none;
}
.stage-closing__commentary-more > summary::before {
  content: "＋ ";
  color: var(--bp-ink-muted);
}
.stage-closing__commentary-more[open] > summary::before {
  content: "－ ";
}
.stage-closing__commentary-more-list {
  margin: var(--bp-s-2) 0 0;
  padding-left: var(--bp-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

.stage-closing__actions-block {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

.stage-closing__action-list {
  margin: 0;
  padding-left: var(--bp-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
  line-height: 1.6;
  color: var(--bp-ink-muted);
}

/* Stage-4 (Communication Plan) closing additions — iteration 1, slice 4
   (#1392). The commentary "thin source material" callout carries full ink
   weight (it is a real finding, not the muted "still preparing" fallback), and
   the elevator-pitch → Stage 6 handoff card mirrors the readiness card's
   kicker + body layout so the two read as one family. */
.stage-closing__commentary-thin {
  margin: 0;
  line-height: 1.6;
  color: var(--bp-ink);
}

.stage-closing__handoff {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}

.stage-closing__handoff-body {
  margin: 0;
  line-height: 1.6;
  color: var(--bp-ink);
}

/* "Go Deeper" — opt-in depth at the Stage-6 send-off (Design §4, #1648). A
   secondary, MUTED disclosure: collapsed by default with a button-styled summary
   (clearly an action, not a bare text link), expanding to the two tiers. The
   completion state above already reads as done, so this stays quiet — it never
   competes with the primary "See your journey" CTA in the footer. Mirrors the
   résumé-upload offer disclosure mechanics (list-marker off, chevron rotates on
   [open]). */
.interview-deeper {
  padding: var(--bp-s-3);
}
.interview-deeper > summary.interview-deeper__toggle {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--bp-s-2);
  width: fit-content;
  cursor: pointer;
}
.interview-deeper > summary.interview-deeper__toggle::-webkit-details-marker {
  display: none;
}
.interview-deeper__meta {
  font-weight: 400;
  color: var(--bp-ink-subtle);
}
.interview-deeper__chevron {
  font-size: 16px;
  line-height: 1;
  transition: transform var(--bp-dur-fast) var(--bp-easing);
}
.interview-deeper[open] > summary .interview-deeper__chevron {
  transform: rotate(90deg);
}
.interview-deeper__body {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-4);
  margin-top: var(--bp-s-4);
}
.interview-deeper__tier {
  border-top: 1px dashed var(--bp-rule);
  padding-top: var(--bp-s-4);
}
.interview-deeper__tier-title {
  margin: var(--bp-s-1) 0 var(--bp-s-2);
  font-size: var(--bp-fs-base);
}
.interview-deeper__tier-body {
  margin: 0 0 var(--bp-s-3);
  line-height: 1.6;
  color: var(--bp-ink-muted);
}
.interview-deeper__defer {
  margin: 0;
  font-style: italic;
  color: var(--bp-ink-muted);
}

/* ===================================================================
   Exercise chat — Stage 3 exercise conversation surface (slice 6).
   The transcript + composer reuse the canonical .chat-* primitives
   (ai_chat.css); these rules add the surrounding page chrome.
   =================================================================== */
.exercise-chat {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 220px);
  max-width: 760px;
  margin: 0 auto;
  padding: var(--bp-s-5) var(--bp-s-5) 0;
}

/* `.exercise-chat` owns the centered column + horizontal padding so the
   stage header and chat content share one inset. Neutralize the layout
   the shared `.chat-main` applies (ai_chat.css) when nested here, or the
   transcript/composer would be double-inset and gain extra top padding. */
.exercise-chat .chat-main {
  max-width: none;
  margin-inline: 0;
  padding: 0;
}

.exercise-chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-3);
  padding-bottom: var(--bp-s-3);
}

.exercise-chat__title {
  margin: 0;
}

.exercise-chat__back {
  font-family: var(--bp-mono-family);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Per-exercise "why you're doing this" reinforcement line (slice D, #1117).
   A quiet one-liner between the header and the transcript — muted ink, sharing
   the header's bottom inset so it reads as a caption on the exercise. */
.exercise-chat__reinforcement {
  margin: 0 0 var(--bp-s-3);
  color: var(--bp-ink-muted);
}

/* User-initiated save escape hatch beneath the composer (#1117 follow-up).
   Hidden via the `hidden` attribute until a draft exists; spacing only —
   the control itself is a .bp-btn. */
.exercise-chat__save-gate {
  margin-top: var(--bp-s-2);
}

/* ---------- Flow D — resume parse status (slice 2j, #884) ----------
   In-flow status surface the resume upload redirects to. Layout only;
   card chrome is .bp-card, the progress bar is .bp-progress, and the
   actions reuse .bp-btn — see the Component Library. */
.capabilities-data-import-status {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--bp-s-7) var(--bp-s-4);
}
.capabilities-data-import-status__header {
  margin-bottom: var(--bp-s-5);
}
.capabilities-data-import-status__header h1 {
  margin: var(--bp-s-2) 0 0;
}
.capabilities-data-import-status__panel {
  padding: var(--bp-s-6);
}
.capabilities-data-import-status__title {
  margin: 0 0 var(--bp-s-3);
}
.capabilities-data-import-status__copy {
  color: var(--bp-ink-muted);
  margin: 0 0 var(--bp-s-5);
}
.capabilities-data-import-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-s-3);
}

/* ============================================================
   Capabilities — Narrative interview side-by-side canvas
   (epic #1230, slice C, #1235). The primary refinement surface.
   Visual contract: docs/Design/mockups/capabilities-narrative-interview.html.
   The interview canvas asks for more horizontal room than the rest of the
   stage (design §2) — a wider container, reconciled here as a Direction-A
   width rather than a one-off.
   ============================================================ */
.capabilities-interview,
.ivp-interview {
  /* A bounded-height workspace: the surface fills the viewport below the page
     chrome (app bar ~56px + main padding) and only the two panes scroll
     INTERNALLY. Sticky was unreliable here because the ancestor `main` is
     `overflow: auto`, which broke pinning and let the page scroll the primary
     field off the top. Capping the height + internal pane scroll keeps the
     description fixed in place while the user works. */
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 120px);
  /* 1200px side-by-side budget (the .bp-split standard), reconciled from 1180. */
  max-width: 1200px;
  margin: 0 auto var(--bp-s-4);
  padding: var(--bp-s-5);
}
.capabilities-interview__nav,
.ivp-interview__nav {
  display: flex;
  gap: var(--bp-s-2);
  margin-bottom: var(--bp-s-4);
}

/* where you are */
.iv__head {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
  margin-bottom: var(--bp-s-5);
}
.iv__entry-title {
  font-family: var(--bp-display-family);
  font-weight: 500;
  font-size: 28px;
  margin: 0;
  line-height: 1.1;
}
.iv__entry-sub {
  color: var(--bp-ink-muted);
  margin: 0;
  font-size: 14px;
}

/* two persistent panes: coach LEFT (primary), fields RIGHT (artifact). Composes
   the .bp-split workspace variant (#1272) — grid structure, gap, equal-height
   stretch, bounded-height fill, and the 60rem responsive collapse all come from
   `.bp-split .bp-split--workspace` (applied in the markup). The only
   interview-specific bit is the column ratio: a fixed-min coach rail rather than
   a proportional --5-7/--7-5 bias, so the conversation doesn't grow unbounded. */
.iv__canvas {
  grid-template-columns: minmax(360px, 440px) 1fr;
}

/* ---------- LEFT: the coaching conversation ---------- */
.iv__coach {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-4);
  min-height: 0; /* let the inner thread scroll instead of growing the pane */
}
/* The coach header stacks: the section label on top, then a row holding the Coach
   badge and any per-exercise controls (the lite/full swap). Stacking keeps the
   label on its own line so it never has to share width with — and wrap around —
   the controls. Shared by every interview canvas (IVP, common titles, org
   placement, employer value, Capabilities). */
.iv__coach-head {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}
.iv__coach-kicker {
  font-family: var(--bp-mono-family);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
}
.iv__coach-head-row {
  display: flex;
  align-items: center;
  gap: var(--bp-s-2);
}
/* In-canvas full↔lite swap affordance (#1378) — pushed to the right of the head
   row; button_to wraps each control in its own <form>, so zero its default block
   margin to keep the row tight. */
.iv__mode-swap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--bp-s-2);
}
.iv__mode-swap form {
  margin: 0;
}
.iv__thread {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
  overflow-y: auto;
  padding-right: 4px;
  flex: 1;
  min-height: 200px;
}
.iv__msg {
  font-size: 14.5px;
  line-height: 1.55;
  padding: 11px 14px;
  border-radius: var(--bp-r-md);
  max-width: 92%;
  /* pre-line preserves the newlines in dynamically-rendered turns (a user's
     multi-line answer; a coach reply whose \n the JS turns into <br>). */
  white-space: pre-line;
}
/* The static opening greeting is authored as multi-line ERB prose, so its
   source newlines would render as hard breaks under pre-line. It carries no
   meaningful newlines, so let it wrap naturally. */
.iv__msg--intro {
  white-space: normal;
}
.iv__msg--coach {
  align-self: flex-start;
  background: var(--bp-paper);
  border: 1px solid var(--bp-rule-soft);
  color: var(--bp-ink);
}
.iv__msg--me {
  align-self: flex-end;
  background: var(--bp-accent);
  color: var(--bp-accent-ink);
}

/* answer area — the user always types in their own words */
.iv__answer {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
  border-top: 1px solid var(--bp-rule-soft);
  padding-top: var(--bp-s-3);
}
.iv__answer-hint {
  font-size: 12px;
  color: var(--bp-ink-subtle);
}
.iv__answer-form {
  display: flex;
  gap: var(--bp-s-2);
  align-items: flex-end;
}
.iv__answer-input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 46px;
}
.iv__answer-input:focus {
  outline: none;
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px var(--bp-accent-soft);
}

/* ---------- Interview-plan rehearsal coach (Stage 6, #1646) ---------- */
/* The rehearsal is chat-primary single column (no side-by-side artifact pane), so
   the coach card spans the column rather than sitting as a bp-split child. */
.iv__coach--solo {
  max-width: 44rem;
  margin: 0 auto;
}
/* Quick-reply chips (the confidence options, and post-Discuss "run again / move on").
   Advisory — the free-text box always works; chips are a convenience row. */
.iv__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-s-2);
  margin-top: var(--bp-s-3);
}
.iv__chips:empty { display: none; }
.iv__chip { white-space: normal; text-align: left; }
/* Bulleted lists inside a coach bubble (topic buckets, question stems) — tight,
   so a short list reads as a list, not a run-on. */
.iv__msg-list {
  margin: var(--bp-s-2) 0 0;
  padding-left: 1.25em;
}
.iv__msg-list li { margin: 2px 0; }

/* Completion CTA bar — one persistent control that promotes MUTED→BOLD once the rep
   is complete (mirrors .np-done). The CTA swaps ghost→primary (JS); the bar picks up
   an accent edge and the message darkens, so "done" reads as one control gaining
   emphasis, not a new element popping in. */
.ivr__done {
  max-width: 44rem;
  margin: var(--bp-s-4) auto 0;
  padding: 12px 16px;
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
  background: var(--bp-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-4);
  flex-wrap: wrap;
}
.ivr__done-msg {
  margin: 0;
  flex: 1 1 20rem;
  font-size: 13.5px;
  color: var(--bp-ink-muted);
}
.ivr__done.is-ready {
  border-color: var(--bp-accent, var(--bp-ink-1));
  background: var(--bp-paper);
}
.ivr__done.is-ready .ivr__done-msg {
  color: var(--bp-ink-2);
}
.ivr__done-cta {
  flex: none;
  white-space: nowrap;
}

/* ---------- RIGHT: the entry fields (durable artifact) ---------- */
/* Pinned to the viewport and independently scrollable, mirroring the coach, so
   the two panes sit side by side and the primary field (description, first in
   the list) stays visible next to the coach while the user is entering data
   rather than scrolling away with the page. */
.iv__fields {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-4);
  min-height: 0;
  /* min-width: 0 lets this 1fr grid child shrink below its content's intrinsic
     width instead of overflowing the canvas — this, with box-sizing on the
     children, is what fixes the overflow. No overflow-x clamp here: the
     textareas wrap their own content, and clamping would clip the .iv__body
     focus ring (a 3px box-shadow that sits just outside the textarea edge). */
  min-width: 0;
  overflow-y: auto;
}
.iv__field {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}
.iv__body-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}
.iv__field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-3);
  flex-wrap: wrap;
}
.iv__field-name {
  font-family: var(--bp-body-family);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--bp-ink-2);
  display: inline-flex;
  align-items: center;
  gap: var(--bp-s-2);
}
.iv__primary-tag {
  font-family: var(--bp-mono-family);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-tint-ink-info);
  background: var(--bp-accent-soft);
  padding: 2px 7px;
  border-radius: var(--bp-r-pill);
}

/* provisional / pinned marker */
.iv__marker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--bp-r-pill);
  border: 1px solid transparent;
}
.iv__marker--provisional {
  background: var(--bp-highlight-soft);
  color: var(--bp-tint-ink-warning);
}
.iv__marker--pinned {
  background: var(--bp-tint-done);
  color: var(--bp-tint-ink-done);
}

/* editable bodies */
.iv__body {
  width: 100%;
  /* border-box so the 13px/14px padding stays inside the 100% width instead of
     pushing the textarea past the column edge (no global box-sizing reset). */
  box-sizing: border-box;
  resize: vertical;
  font-family: var(--bp-serif-family);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bp-ink);
  padding: 13px 14px;
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
  background: var(--bp-paper);
  transition: border-color var(--bp-dur-fast) var(--bp-easing),
              box-shadow var(--bp-dur-fast) var(--bp-easing),
              background var(--bp-dur-med) var(--bp-easing);
}
.iv__body:focus {
  outline: none;
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px var(--bp-accent-soft);
}
.iv__body[data-status="empty"] {
  font-style: italic;
  color: var(--bp-ink-subtle);
  background: var(--bp-surface);
  border-style: dashed;
}
.iv__body[data-status="open"] {
  /* Faint warm tint marking a coach-drafted (provisional) field, derived from
     tokens so it tracks the palette instead of a hard-coded hex. */
  background: color-mix(in srgb, var(--bp-highlight-soft) 22%, var(--bp-paper));
  border-color: var(--bp-highlight-soft);
}
.iv__body[data-status="pinned"] {
  background: var(--bp-paper);
  border-color: var(--bp-rule);
}
.iv__body--single { min-height: 84px; }
.iv__body--item {
  min-height: 58px;
  font-size: 15px;
}

/* per-element grade (description & achievements only) */
.iv__grade {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border-radius: var(--bp-r-pill);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}
.iv__grade[data-tier="-1"] { display: none; }
.iv__grade[data-tier="0"] {
  background: var(--bp-surface-2);
  color: var(--bp-ink-muted);
}
.iv__grade[data-tier="1"] {
  background: var(--bp-tint-warning);
  color: var(--bp-tint-ink-warning);
}
.iv__grade[data-tier="2"] {
  background: var(--bp-tint-info);
  color: var(--bp-tint-ink-info);
}
.iv__grade[data-tier="3"] {
  background: var(--bp-tint-active);
  color: var(--bp-tint-ink-active);
}
.iv__grade[data-tier="4"] {
  background: var(--bp-tint-done);
  color: var(--bp-tint-ink-done);
}
.iv__grade-scale {
  display: flex;
  gap: 3px;
}
.iv__grade-pip {
  width: 15px;
  height: 5px;
  border-radius: var(--bp-r-pill);
  background: var(--bp-surface-2);
}
.iv__grade-pip[data-on="true"] { background: currentColor; }

/* the single highest-leverage comment — surfaces only on field engage (#1250) */
.iv__comment {
  font-family: var(--bp-serif-family);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bp-ink-2);
  background: var(--bp-surface);
  border-left: 2px solid var(--bp-accent);
  border-radius: 0 var(--bp-r-sm) var(--bp-r-sm) 0;
  padding: 8px 12px;
  margin: 0;
  display: none;
}
.iv__comment[data-shown="true"] { display: block; }
.iv__comment b {
  font-family: var(--bp-body-family);
  font-weight: 700;
  font-size: 12px;
  color: var(--bp-ink-muted);
  display: block;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}

/* achievements list */
.iv__items {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
}
.iv__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-r-md);
  background: var(--bp-surface);
  /* keep each achievement box inside the pane: border-box folds the 12px
     padding into the width, min-width:0 lets it shrink with the column. */
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.iv__item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-2);
  flex-wrap: wrap;
}
.iv__empty {
  font-size: 13.5px;
  color: var(--bp-ink-subtle);
  font-style: italic;
  padding: 10px 12px;
  border: 1px dashed var(--bp-rule);
  border-radius: var(--bp-r-md);
  background: var(--bp-surface);
}

/* skills — tag_input, whole-set assessment (no per-item grade) */
.iv__tags-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
}
.iv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-s-2);
}
.iv__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--bp-r-pill);
  background: var(--bp-accent-soft);
  color: var(--bp-tint-ink-info);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
}
.iv__tag button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
}
.iv__tag button:hover { opacity: 1; }

/* value dimensions — ranked_enum: an ordered, enum-constrained list with
   up/down reorder, remove, and an add-from-set picker. */
.iv__ranked-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
}
.iv__ranked-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}
.iv__ranked-item {
  display: flex;
  align-items: center;
  gap: var(--bp-s-2);
  padding: 6px 10px;
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-r-md);
  background: var(--bp-surface);
  box-sizing: border-box;
  min-width: 0;
}
.iv__ranked-rank {
  flex: 0 0 auto;
  min-width: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--bp-tint-ink-info);
}
.iv__ranked-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
}
.iv__ranked-controls {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.iv__ranked-btn {
  border: none;
  background: transparent;
  color: var(--bp-ink-subtle);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--bp-r-sm);
}
.iv__ranked-btn:hover:not(:disabled) {
  background: var(--bp-accent-soft);
  color: var(--bp-tint-ink-info);
}
.iv__ranked-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.iv__ranked-add {
  align-self: flex-start;
  padding: 6px 10px;
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-pill);
  background: var(--bp-surface);
  color: var(--bp-tint-ink-info);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.iv__set-assessment {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-r-md);
  background: var(--bp-tint-info);
}
.iv__set-assessment[data-shown="true"] { display: flex; }
.iv__set-assessment h4 {
  margin: 0;
  font-family: var(--bp-body-family);
  font-weight: 700;
  font-size: 14px;
  color: var(--bp-tint-ink-info);
}
.iv__set-assessment p {
  margin: 0;
  font-family: var(--bp-serif-family);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bp-ink-2);
}

/* IVP review / audit panel — the post-draft cross-exercise review of a
   single+draft field (#1305). Same shape as the batch set-assessment, with a
   left accent to read as a coach review attached to the statement. */
.iv__review {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--bp-s-1);
  padding: 12px 14px;
  border: 1px solid var(--bp-rule-soft);
  border-left: 3px solid var(--bp-tint-ink-info);
  border-radius: var(--bp-r-md);
  background: var(--bp-tint-info);
}
.iv__review h4 {
  margin: 0;
  font-family: var(--bp-body-family);
  font-weight: 700;
  font-size: 14px;
  color: var(--bp-tint-ink-info);
}
.iv__review p {
  margin: 0;
  font-family: var(--bp-serif-family);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bp-ink-2);
}

/* scratchpad — visible holding area for noted-but-unplaced material */
.iv__scratch {
  margin-top: var(--bp-s-2);
  border: 1px dashed var(--bp-rule);
  border-radius: var(--bp-r-md);
  background: var(--bp-surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
}
.iv__scratch-head {
  display: flex;
  align-items: center;
  gap: var(--bp-s-2);
}
.iv__scratch-title {
  font-family: var(--bp-body-family);
  font-weight: 700;
  font-size: 13px;
  color: var(--bp-ink-2);
}
.iv__scratch-sub {
  font-size: 12px;
  color: var(--bp-ink-muted);
}
.iv__scratch-empty {
  font-size: 13px;
  color: var(--bp-ink-subtle);
  font-style: italic;
}
.iv__scratch-list {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}
.iv__scratch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-3);
  padding: 8px 10px;
  border-radius: var(--bp-r-md);
  background: var(--bp-paper);
  border: 1px solid var(--bp-rule-soft);
  font-size: 13.5px;
}
.iv__scratch-item--note {
  font-style: italic;
  color: var(--bp-ink-muted);
}
.iv__scratch-cand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.iv__scratch-cand .iv__cand-kind {
  font-family: var(--bp-mono-family);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-highlight);
}
.iv__scratch-actions {
  display: flex;
  align-items: center;
  gap: var(--bp-s-1);
  flex-shrink: 0;
}
.iv__dismiss { color: var(--bp-ink-muted); }
.iv__dismiss:hover {
  color: var(--bp-danger);
  background: var(--bp-tint-danger);
}

/* One-shot pulse when a held submit points the user back to un-actioned
   candidates (skill/title proposals awaiting Confirm / Not-mine). */
.iv__scratch--alert {
  border-color: var(--bp-highlight);
  border-style: solid;
  animation: iv-scratch-pulse 1.1s ease-in-out 2;
}
@keyframes iv-scratch-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 4px var(--bp-highlight-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .iv__scratch--alert { animation: none; }
}

/* submit bar — holistic review, never grade-gated */
.iv__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-3);
  flex-wrap: wrap;
  margin-top: var(--bp-s-4);
  padding-top: var(--bp-s-4);
  border-top: 1px solid var(--bp-rule-soft);
}
.iv__submit-note {
  font-size: 12.5px;
  color: var(--bp-ink-subtle);
  max-width: 60%;
}

/* Close-the-loop "done for now" affordance (#1256) — advisory, dismissible.
   Shown only when a turn reports the category-aware `entry_sufficient` signal
   (#1255); it never gates Submit. The `hidden` attribute keeps it out until a
   turn surfaces it (and the explicit override beats the flex display). */
.iv__done {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-3);
  flex-wrap: wrap;
  margin-top: var(--bp-s-4);
  padding: var(--bp-s-3) var(--bp-s-4);
  background: var(--bp-tint-done);
  border: 1px solid color-mix(in srgb, var(--bp-success) 35%, transparent);
  border-radius: var(--bp-r-md);
}
.iv__done[hidden] { display: none; }
.iv__done-note {
  margin: 0;
  font-size: 13px;
  color: var(--bp-success);
  max-width: 70%;
}

/* "What's left" summary (#1306) — a multi-field single+draft canvas (org
   placement) names which facets are still open so the user sees the exercise
   isn't done before heading back. Sits at the top of the artifact pane;
   advisory, never blocks. */
.iv__progress {
  margin-bottom: var(--bp-s-3);
  padding: var(--bp-s-2) var(--bp-s-3);
  font-size: 13px;
  line-height: 1.4;
  color: var(--bp-ink-muted);
  background: var(--bp-surface-sunken, color-mix(in srgb, var(--bp-ink) 4%, transparent));
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-r-md);
}
.iv__progress[hidden] { display: none; }
.iv__progress[data-complete="true"] {
  color: var(--bp-success);
  background: var(--bp-tint-done);
  border-color: color-mix(in srgb, var(--bp-success) 35%, transparent);
}
.iv__progress-count { font-weight: 600; }
.iv__progress-remaining { color: inherit; }

/* Dev/staging-only grade-audit affordance (#1251); never rendered in prod. */
.iv__debug-tools {
  margin-top: var(--bp-s-3);
  padding-top: var(--bp-s-3);
  border-top: 1px dashed var(--bp-rule-soft);
}

/* mobile / narrow: panes stack, coach-primary (design §9.4) */
.iv__mobile-banner {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--bp-tint-ink-warning);
  background: var(--bp-highlight-soft);
  border-radius: var(--bp-r-md);
  padding: 8px 12px;
  margin-bottom: var(--bp-s-4);
}
@media (max-width: 60rem) {
  /* Collapse at the .bp-split breakpoint (60rem) so the workspace stacks in
     lockstep with the primitive. Panes stack and the page scrolls normally —
     drop the bounded-height workspace so the columns flow at their natural
     height. The explicit 1fr is needed because .iv__canvas's own column
     template (later in source) would otherwise win over the primitive's collapse. */
  .capabilities-interview,
  .ivp-interview { max-height: none; }
  .iv__canvas {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .iv__coach,
  .iv__fields {
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .iv__mobile-banner { display: flex; }
}

/* ─── Résumé document — inline click-to-edit (Stage 4, #1390) ──────────────
   The document-first résumé edit surface (COMMUNICATION_PLAN_DESIGN.md §2/§5.1).
   The résumé renders as a finished document; AI-authored prose (.doc-editable —
   summary + highlights) reads as plain text until clicked, then swaps to an
   inline editor (.doc-editor) and autosaves on blur. Captured facts render as
   plain document text with no edit affordance. */
.resume-doc {
  background: var(--bp-paper);
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-lg);
  padding: var(--bp-s-7) var(--bp-s-7) var(--bp-s-6);
  max-width: 760px;
}
.resume-doc__section + .resume-doc__section {
  margin-top: var(--bp-s-6);
  padding-top: var(--bp-s-5);
  border-top: 1px solid var(--bp-rule-soft);
}
.resume-doc__section-label { display: block; margin-bottom: var(--bp-s-3); }

/* Section head — label + the "Edit in Capabilities →" lineage link, for the
   captured-fact sections (Experience / Education / Skills). */
.resume-doc__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bp-s-3);
  margin-bottom: var(--bp-s-3);
}
.resume-doc__section-head .resume-doc__section-label { margin-bottom: 0; }
.resume-doc__source-link {
  font-family: var(--bp-mono-family);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--bp-ink-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--bp-dur-fast);
}
.resume-doc__source-link:hover,
.resume-doc__source-link:focus-visible { color: var(--bp-accent); }

/* Per-entry source link (#1446) — the precise "Edit in Capabilities →" door on a
   single experience/education entry, quieter than the section link and set on its
   own line beneath the entry head. Inherits .resume-doc__source-link styling. */
.resume-doc__entry-source-link {
  display: inline-block;
  margin-top: var(--bp-s-2);
}

/* Per-section / per-entry one-click copy button (#1509) — LinkedIn is filled in
   field-by-field, so each section and each experience entry copies on its own.
   Quiet mono affordance matching the source-link aesthetic; flips to "Copied!"
   transiently (JS). A button reset so it doesn't inherit the global .bp-btn box. */
.resume-doc__copy {
  font-family: var(--bp-mono-family);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--bp-ink-muted);
  background: transparent;
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-r-pill);
  padding: 2px 10px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--bp-dur-fast), border-color var(--bp-dur-fast);
}
.resume-doc__copy:hover,
.resume-doc__copy:focus-visible {
  color: var(--bp-accent);
  border-color: var(--bp-accent);
  outline: none;
}
/* Right-side action cluster in a section head (copy + Capabilities link). */
.resume-doc__section-actions { display: inline-flex; align-items: center; gap: var(--bp-s-3); }
/* Per-entry action row (source link + "Copy this role"), beneath the entry head. */
.resume-doc__entry-actions {
  display: flex;
  align-items: center;
  gap: var(--bp-s-3);
  flex-wrap: wrap;
  margin-top: var(--bp-s-2);
}
.resume-doc__entry-actions .resume-doc__entry-source-link { margin-top: 0; }

/* Enrich-source re-entry (#1470). The regenerate-on-return nudge (a soft card)
   and the always-available "add or refine your source →" affordance. */
.resume-enrich__regenerate { margin: var(--bp-s-4) 0; }
.resume-enrich__regenerate p { margin: 0 0 var(--bp-s-3); }
.resume-enrich__regenerate-actions { display: flex; align-items: center; gap: var(--bp-s-3); }
.resume-enrich__source { color: var(--bp-ink-muted); margin-top: var(--bp-s-2); }
.capabilities-dashboard__enrich-return { margin: 0 0 var(--bp-s-4); }

/* Captured facts — document headings, plain text, no edit affordance. A quiet
   lock (.resume-doc__lock) marks them read-only-here; hover surfaces the lineage
   tooltip, the section link is the actionable partner. */
.resume-doc__entry + .resume-doc__entry { margin-top: var(--bp-s-5); }
.resume-doc__entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bp-s-4);
}
.resume-doc__meta { display: inline-flex; align-items: center; gap: var(--bp-s-2); white-space: nowrap; }
.resume-doc__lock { display: inline-flex; align-items: center; color: var(--bp-ink-subtle); cursor: help; vertical-align: -1px; }
.resume-doc__entry-title {
  font-family: var(--bp-display-family);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  margin: 0;
}
.resume-doc__entry-dates {
  font-family: var(--bp-mono-family);
  font-size: 12px;
  color: var(--bp-ink-muted);
  white-space: nowrap;
}
.resume-doc__entry-detail { color: var(--bp-ink-2); font-size: 14px; margin: 2px 0 0; }
.resume-doc__skills { font-size: 14.5px; color: var(--bp-ink-2); line-height: 1.7; }

.resume-doc__bullets {
  list-style: none;
  margin: var(--bp-s-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}
.resume-doc__bullet { display: flex; gap: var(--bp-s-3); align-items: flex-start; }
.resume-doc__bullet::before {
  content: "•";
  color: var(--bp-accent);
  font-size: 18px;
  line-height: 1.5;
  flex: none;
}

/* "Why this draft" rationale — a list of discrete editorial choices, not a wall
   of prose (slice 1b, #1453). */
.resume-rationale__points {
  list-style: none;
  margin: var(--bp-s-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}
.resume-rationale__points li {
  position: relative;
  padding-left: var(--bp-s-4);
  color: var(--bp-ink-2);
}
.resume-rationale__points li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--bp-accent);
}

/* ── The click-to-edit region ──
   READ: rendered prose. Hover (fine pointer) tints it + reveals a ✎ so the user
   knows it's editable; captured facts get none of this. Coarse pointers (touch)
   show the ✎ persistently since there's no hover. Click / Enter / Space swaps to
   an editor (JS); it autosaves on blur. */
.doc-editable {
  position: relative;
  display: block;
  flex: 1;
  border-radius: var(--bp-r-sm);
  padding: 6px 38px 6px 8px;
  margin: 0 -8px;
  cursor: text;
  transition: background var(--bp-dur-fast) var(--bp-easing);
}
.doc-editable:hover,
.doc-editable:focus-visible { background: var(--bp-surface); outline: none; }
/* Affordance chip: a "✎ Edit" label (not a bare glyph) so the edit intent is
   legible. Revealed on hover/focus; shown persistently on touch (no hover). */
.doc-editable::after {
  content: "✎ Edit";
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: var(--bp-mono-family);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
  background: var(--bp-surface-2);
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-r-pill);
  padding: 1px 7px;
  opacity: 0;
  transition: opacity var(--bp-dur-fast);
  pointer-events: none;
}
.doc-editable:hover::after,
.doc-editable:focus-visible::after { opacity: 1; }
@media (hover: none) { .doc-editable::after { opacity: 0.7; } }
.doc-editable.is-empty { color: var(--bp-ink-subtle); font-style: italic; }

/* The summary is the most important block — serif reading type, sized to read as
   a unit (never a squished box). Both the read prose and its editor inherit it. */
.doc-editable--summary { font-family: var(--bp-serif-family); font-size: 18px; line-height: 1.65; }
.doc-editable--bullet { font-size: 14.5px; line-height: 1.55; }
/* LinkedIn headline reads as a lede; About is a multi-paragraph narrative, so it
   preserves the author's line breaks (pre-wrap) in both read and edit state. */
.doc-editable--headline { font-family: var(--bp-serif-family); font-size: 18px; line-height: 1.5; }
.doc-editable--about { font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; }
/* The elevator pitch is a single spoken block — serif reading type, sized to read
   as a unit; pre-wrap so any line breaks the user adds survive in read + edit. */
.doc-editable--pitch {
  font-family: var(--bp-serif-family);
  font-size: 18px;
  line-height: 1.65;
  white-space: pre-wrap;
}

/* EDIT state — the inline editor injected on click. */
.doc-editable.is-editing { background: transparent; padding: 0; margin: 0; cursor: auto; }
.doc-editable.is-editing::after { display: none; }
.doc-editor {
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--bp-paper);
  border: 1px solid var(--bp-accent);
  border-radius: var(--bp-r-sm);
  padding: 6px 8px;
  resize: none;
  overflow: hidden;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 15%, transparent);
}

/* Autosave state. */
.resume-doc__foot {
  display: flex;
  align-items: center;
  gap: var(--bp-s-3);
  margin-top: var(--bp-s-6);
  padding-top: var(--bp-s-4);
  border-top: 1px solid var(--bp-rule-soft);
}
.resume-doc__save {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-s-2);
  font-family: var(--bp-mono-family);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--bp-ink-muted);
}
.resume-doc__save .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bp-success);
  transition: background var(--bp-dur-fast);
}
.resume-doc__save.is-saving .dot { background: var(--bp-warning); }
.resume-doc__save.is-error .dot { background: var(--bp-danger); }

/* Copy-to-clipboard export (slice 3, #1391) sits at the right end of the foot. */
.resume-doc__export { margin-left: auto; }

/* Elevator-pitch deliverability length cue (slice 2, #1514): the approximate
   spoken duration, sitting quietly in the section head opposite the label. Mono +
   muted so it reads as metadata, not prose. Updated live by the editor. */
.resume-doc__length {
  font-family: var(--bp-mono-family);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--bp-ink-muted);
  white-space: nowrap;
}

/* Thin-artifact audit back-links: the section-level routes to strengthen the
   material (Capabilities) or revisit the target (Blueprint). */
.resume-thin__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-s-4);
  margin-top: var(--bp-s-4);
}

/* Round-trip / version-of-record panel (iter 5 slice 2, #1543 / DDR D5). The
   uploaded-state indicator (name + download + remove + replace) and the
   structured-state upload offer share the .resume-upload atom. */
.resume-upload { margin: var(--bp-s-4) 0; }
.resume-upload__body p { margin: var(--bp-s-2) 0 0; }
.resume-upload__filename {
  font-weight: 600;
  color: var(--bp-ink);
  word-break: break-word;
}
.resume-upload__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bp-s-3);
  margin-top: var(--bp-s-4);
}
.resume-upload__replace { margin-top: var(--bp-s-4); }
.resume-upload__replace > summary { cursor: pointer; }
.resume-upload__form { margin-top: var(--bp-s-3); }
.resume-upload__form p { margin: 0 0 var(--bp-s-3); color: var(--bp-ink-muted); }

/* The offer disclosure: a compact, button-styled summary (clearly an action,
   not a bare text link) that expands to the uploader. */
.resume-upload--offer > summary.resume-upload__toggle {
  list-style: none;
  width: fit-content;
}
.resume-upload--offer > summary.resume-upload__toggle::-webkit-details-marker {
  display: none;
}
.resume-upload__chevron {
  font-size: 16px;
  line-height: 1;
  transition: transform var(--bp-dur-fast) var(--bp-easing);
}
.resume-upload--offer[open] > summary .resume-upload__chevron {
  transform: rotate(90deg);
}

/* Download-template picker (slice 3, #1545 / DDR D13). A quiet, collapsed
   disclosure — a minor setting, not a headline control. Governs the look of the
   PDF + .docx downloads only (the on-screen document is the app's own CSS, not the
   print theme), so the copy says "downloads." Picking a template autosaves inline
   (resume-template controller); no page reload, no Apply button. */
.resume-template { margin: var(--bp-s-3) 0; }
.resume-template__toggle {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  gap: var(--bp-s-2);
}
.resume-template__toggle::-webkit-details-marker { display: none; }
.resume-template__current { font-weight: 600; color: var(--bp-ink); }
.resume-template__hint { color: var(--bp-ink-muted); }
/* Once the options are open, "click to change" is redundant — hide it. */
.resume-template[open] .resume-template__hint { display: none; }
.resume-template__status {
  font-family: var(--bp-mono-family);
  font-size: 12px;
  color: var(--bp-ink-muted);
}
.resume-template__status.is-error { color: var(--bp-danger); }
.resume-template__panel {
  margin-top: var(--bp-s-3);
  padding: var(--bp-s-4);
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-radius);
}
.resume-template__lede { margin: 0 0 var(--bp-s-3); color: var(--bp-ink-muted); }
.resume-template__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-s-3);
}
.resume-template__option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 2px var(--bp-s-2);
  flex: 1 1 14rem;
  padding: var(--bp-s-3);
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-radius);
  cursor: pointer;
  transition: border-color var(--bp-dur-fast), box-shadow var(--bp-dur-fast);
}
.resume-template__option:has(input:checked) {
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 15%, transparent);
}
.resume-template__option input { grid-row: 1 / span 2; }
.resume-template__name { font-weight: 600; color: var(--bp-ink); }
.resume-template__desc { grid-column: 2; color: var(--bp-ink-muted); font-size: 0.85em; }

@media (max-width: 40rem) {
  .resume-doc { padding: var(--bp-s-5) var(--bp-s-4); }
  .resume-doc__entry-head { flex-direction: column; gap: 2px; }
  .resume-doc__export { margin-left: 0; }
  .resume-doc__foot { flex-wrap: wrap; }
}

/* ============================================================================
   Networking discovery coach — captured network panel (Stage 5, slice 1, #1477)
   RIGHT-pane people / target-company lists on the discovery canvas. Reuses the
   interview canvas shell (.iv__*); these style the two capture sections. The
   live-rail polish (starter-set meter, in-chat planning) lands in slice 2.
   ============================================================================ */
/* The shared `.capabilities-interview` root shrink-to-fits inside the flex-column
   `main` (its `margin: 0 auto` overrides the flex stretch), so with a sparse right
   pane the 1fr column collapses and the whole canvas reads narrow. The discovery
   rail is deliberately light on content, so claim the full 1200px side-by-side
   budget explicitly (definite width beats shrink-to-fit) — the capabilities/IVP
   canvases don't need this only because their field cards fill the column. */
.networking-interview {
  width: 100%;
}
.np-capture {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
  margin-top: var(--bp-s-3);
}
.np-capture__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
}
.np-capture__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--bp-r-md);
  background: var(--bp-paper);
  border: 1px solid var(--bp-rule-soft);
  font-size: 13.5px;
}
.np-capture__name {
  font-weight: 600;
  color: var(--bp-ink-1);
}
.np-capture__meta {
  font-size: 12px;
  color: var(--bp-ink-muted);
}
/* The leave-the-coach control — a full-width bar BELOW both canvas panels (a flex
   child of the bounded-height .capabilities-interview column, so the canvas yields
   it height and it stays visible without forcing the rail to scroll). A horizontal
   bar: message left, CTA right, wrapping on narrow screens. */
.np-done {
  flex: none;
  margin-top: var(--bp-s-3);
  padding: 12px 16px;
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
  background: var(--bp-surface);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-4);
  flex-wrap: wrap;
}
.np-done__msg {
  margin: 0;
  flex: 1 1 20rem;
  font-size: 13.5px;
  color: var(--bp-ink-muted);
}
/* Promoted state — the starter set is met. The CTA itself swaps ghost→primary
   (JS); the bar picks up an accent edge and the message darkens so "done enough"
   reads as one control gaining emphasis, not a new element. */
.np-done.is-ready {
  border-color: var(--bp-accent, var(--bp-ink-1));
  background: var(--bp-paper);
}
.np-done.is-ready .np-done__msg {
  color: var(--bp-ink-2);
}
.np-done__cta {
  flex: none;
  white-space: nowrap;
}

/* Sources-covered box (slice 2, #1478) — the at-a-glance read on which of the six
   discovery domains have yielded a real person, and where the opportunity is. */
.np-sources {
  margin-top: var(--bp-s-4);
}
.np-sources__list {
  list-style: none;
  margin: var(--bp-s-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.np-sources__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--bp-ink-muted);
}
.np-sources__item.is-covered {
  color: var(--bp-ink-1);
}
.np-sources__mark {
  font-weight: 700;
  color: var(--bp-rule);
}
.np-sources__item.is-covered .np-sources__mark {
  color: var(--bp-accent, var(--bp-ink-1));
}

/* Starter-set progress (slice 2, #1478) — the familiarity floor as progress, not
   a quota. */
.np-progress {
  margin-top: var(--bp-s-4);
}
.np-progress__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-ink-muted);
}
.np-progress__list {
  list-style: none;
  margin: var(--bp-s-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.np-progress__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--bp-ink-muted);
}
.np-progress__item.is-met {
  color: var(--bp-ink-1);
}
.np-progress__mark {
  font-weight: 700;
  color: var(--bp-rule);
}
.np-progress__item.is-met .np-progress__mark {
  color: var(--bp-accent, var(--bp-ink-1));
}
.np-progress__count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--bp-ink-muted);
}