/* Component-specific styles extracted from layout */

/* 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;
}
.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-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; }

/* ─── 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);
}

/* ─── 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; }

/* ─── 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-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-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__row-control { flex-shrink: 0; }

.capabilities-filter__select {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--bp-r-md);
  border: 1px solid var(--bp-rule);
  background: var(--bp-paper);
  color: var(--bp-ink);
  cursor: pointer;
}

.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);
}

/* Designation grouping — Expected / Important / Nice to Have
   rendered as small-caps section headers above their category
   cards. Empty groups are hidden in the view; the visual
   treatment is intentionally light (label + count, no heavy
   chrome) so a 4-or-5-category dashboard still feels like one
   cohesive list rather than a stack of disjoint panels. */
.capabilities-dashboard__designation-group {
  margin-bottom: var(--bp-s-4);
}

.capabilities-dashboard__designation-group:last-of-type {
  margin-bottom: 0;
}

.capabilities-dashboard__designation-header {
  display: flex;
  align-items: baseline;
  gap: var(--bp-s-2);
  margin-bottom: var(--bp-s-2);
}

.capabilities-dashboard__designation-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bp-ink-muted);
}

.capabilities-dashboard__designation-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bp-ink-muted);
  font-variant-numeric: tabular-nums;
}

.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__remove-form {
  display: inline;
  margin: 0;
}

.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);
}

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

.capabilities-dashboard__rollup {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--bp-s-2);
}

@media (max-width: 720px) {
  .capabilities-dashboard__rollup {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.capabilities-dashboard__rollup-cell {
  background: var(--bp-surface);
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-r-md);
  padding: var(--bp-s-2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.capabilities-dashboard__rollup-cell[data-zero] { opacity: 0.5; }

/* Cells whose lifecycle state counts toward the category's
   advancement requirement get a soft "done" tint — Expected
   only counts `complete`; Important and Nice to Have count
   `data_complete` onward. Scoping to `:not([data-zero])` keeps
   empty buckets neutral so a row with no entries doesn't paint
   itself green for free. */
.capabilities-dashboard__rollup-cell[data-sufficient="true"]:not([data-zero]) {
  background: var(--bp-tint-done);
  border-color: var(--bp-tint-done);
}

.capabilities-dashboard__rollup-cell[data-sufficient="true"]:not([data-zero])
  .capabilities-dashboard__rollup-count,
.capabilities-dashboard__rollup-cell[data-sufficient="true"]:not([data-zero])
  .capabilities-dashboard__rollup-label {
  color: var(--bp-tint-ink-done);
}

.capabilities-dashboard__rollup-count {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bp-ink);
}

.capabilities-dashboard__rollup-label {
  font-size: 0.75rem;
  color: var(--bp-ink-muted);
}

/* 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-dashboard__na-prompt {
  font-size: 0.875rem;
  color: var(--bp-ink-muted);
}

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

/* Manage categories modal — passed as `custom_class:` on
   `shared/_modal`. */
.capabilities-dashboard__manage-modal .modal-content {
  max-width: 560px;
}

.capabilities-dashboard__manage-intro {
  margin: 0 0 var(--bp-s-4);
  font-size: 0.95rem;
  color: var(--bp-ink-muted);
}

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

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

.capabilities-dashboard__manage-row-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

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

.capabilities-dashboard__manage-form {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-s-2);
  margin: 0;
}

.capabilities-dashboard__manage-select {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--bp-r-md);
  border: 1px solid var(--bp-rule);
  background: var(--bp-paper);
  color: var(--bp-ink);
}

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

/* ============================================================
   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;
}

.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);
}

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

/* ===================================================================
   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;
}

/* ===================================================================
   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 */
}
.iv__coach-head {
  display: flex;
  align-items: center;
  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__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);
}

/* ---------- 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; }
.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);
}

/* 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);
}

/* 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%;
}

/* 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; }
}