/* Selection-led Documentation Blueprint report.
   Page-specific so report layout changes can be cache-busted independently. */

.bp-canvas {
  --bp-motion-fast: 180ms;
  --bp-motion-change: 280ms;
  --bp-motion-ease: cubic-bezier(.22, .61, .36, 1);
}
.bp-pain-points { margin-bottom: 44px; }
.bp-canvas .bp-step-label { margin: 0 0 10px; color: var(--bp-muted); font-size: .75rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.bp-pain-points h2, .bp-benefits h2 { margin: 0 0 22px; color: var(--bp-ink, #f3f7fb); font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.2; }
.bp-pain-points__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.bp-pain-point { position: relative; display: flex; min-width: 0; cursor: pointer; }
.bp-pain-point input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bp-pain-point span { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid var(--bp-line-soft, #344254); border-radius: var(--radius-md); color: #c7d2e1; font-size: .85rem; line-height: 1.5; transition: background-color var(--bp-motion-fast) ease, border-color var(--bp-motion-fast) ease, color var(--bp-motion-fast) ease; }
.bp-pain-point input:checked + span { border-color: #6cb6ff; background: rgba(0, 123, 255, .12); color: #f3f7fb; }
.bp-pain-point input:focus-visible + span { outline: 3px solid #6cb6ff; outline-offset: 3px; }
.bp-pain-points__explanation { min-height: 3em; margin: 18px 0 0; color: var(--bp-muted); font-size: .88rem; line-height: 1.6; }
.bp-benefits { margin-top: 42px; }
.bp-benefits__context { margin: -10px 0 18px; color: #6cb6ff; font-size: .9rem; }
.bp-benefits__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.bp-benefits__list li { min-width: 0; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--bp-line-soft, #344254); color: #dbe5f1; list-style: none; font-size: .97rem; line-height: 1.6; }
.bp-benefit-visual { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 20 / 11; margin: 0 auto 18px; overflow: visible; font-family: inherit; }
.bp-benefit-copy { display: block; max-width: 35ch; }
.bp-canvas .bp-show-benefits { min-height: 44px; margin-top: 28px; padding: 11px 18px; border-color: #44627f; background: transparent; color: #b9dbff; transition: border-color var(--bp-motion-fast) ease, background-color var(--bp-motion-fast) ease, color var(--bp-motion-fast) ease; }
.bp-canvas .bp-show-benefits:hover { border-color: #6cb6ff; color: #fff; background: rgba(0, 123, 255, .1); }
.bp-canvas .bp-show-benefits:focus-visible { outline: 3px solid #6cb6ff; outline-offset: 3px; }
/* Later steps stay out of the layout and keyboard order until revealed. */
.bp-canvas [hidden] { display: none !important; }
.bp-stage-reveal { animation: bp-stage-enter 320ms cubic-bezier(.22, .61, .36, 1) both; }
@keyframes bp-stage-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (min-width: 901px) {
  .bp-canvas .bp-spider__grid { grid-template-columns: minmax(0, 1fr) clamp(128px, 14vw, 172px) minmax(0, 1fr); }
  .bp-canvas .bp-spider__col--in { grid-column: 1; grid-row: 1; }
  .bp-canvas .bp-spider__hub { grid-column: 2; grid-row: 1; }
  .bp-canvas .bp-spider__col--out { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-stage-reveal { animation: none; transform: none; }
}
/* Only paint properties change here: measured connector anchors never move. */
.bp-canvas .bp-node {
  transition: border-color var(--bp-motion-change) ease, background-color var(--bp-motion-change) ease, box-shadow var(--bp-motion-change) ease, opacity var(--bp-motion-change) ease, outline-color var(--bp-motion-change) ease;
}
.bp-canvas .bp-node--out { outline: 2px solid transparent; outline-offset: 3px; }
.bp-canvas .bp-node__label,
.bp-canvas .bp-node__hint,
.bp-canvas .bp-node__relevance { transition: color var(--bp-motion-fast) ease; }
.bp-canvas .bp-node .bp-icon { transition: stroke var(--bp-motion-fast) ease; }
.bp-canvas .bp-edge--rail { transition: stroke var(--bp-motion-change) ease, opacity var(--bp-motion-change) ease; }
.bp-canvas .bp-edge--beam { transition: stroke-dashoffset 700ms var(--bp-motion-ease), opacity var(--bp-motion-change) ease, stroke var(--bp-motion-change) ease; }
.bp-canvas .bp-node__relevance { display: block; margin: 5px 0; color: #c3ddff; font-size: .7rem; line-height: 1.4; }
.bp-canvas .bp-node__relevance[hidden] { display: none; }
.bp-canvas .bp-edge--rail.is-downstream { stroke-dasharray: 4 7; opacity: .65; }
.bp-canvas .bp-node--out .bp-node__toggle { min-height: 72px; }
@media (prefers-reduced-motion: reduce) {
  .bp-canvas .bp-pain-point span,
  .bp-canvas .bp-show-benefits,
  .bp-canvas .bp-node,
  .bp-canvas .bp-node__label,
  .bp-canvas .bp-node__hint,
  .bp-canvas .bp-node__relevance,
  .bp-canvas .bp-node .bp-icon,
  .bp-canvas .bp-edge--rail,
  .bp-canvas .bp-edge--beam { transition: none; }
}
.bp-capability-list, .bp-delivery-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 20px 0 28px; padding: 0; }
.bp-capability-list li, .bp-delivery-list li { min-width: 0; list-style: none; color: var(--ink-2); font-size: .87rem; line-height: 1.6; }
.bp-example-settings label[hidden] { display: none; }
.bp-output-list__copy p { margin: 0 0 14px; color: var(--ink-2); font-size: .98rem; line-height: 1.75; }
.bp-output-list__copy .intent-microcopy { color: var(--ink-3); font-size: .82rem; }
.bp-full-taxonomy { margin-top: 24px; }
.bp-full-taxonomy summary { min-height: 44px; padding: 12px 4px; cursor: pointer; }
.bp-full-taxonomy summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bp-taxonomy-group { margin: 20px 0; }
.bp-taxonomy-section { border-top: 1px solid var(--line); }
.bp-taxonomy-rows { margin: 0; padding: 0; }
.bp-taxonomy-rows .bp-taxonomy-row { margin: 0; padding: 18px 8px; border-top: 1px solid var(--line); list-style: none; overflow-wrap: anywhere; }
.bp-taxonomy-row p { margin: 8px 0 0; color: var(--ink-2); font-size: .8rem; line-height: 1.6; }
.bp-taxonomy-row .bp-taxonomy-requirements { color: var(--ink-3); }
/* Keep example controls in place while their authored preview changes. */
:is(#blueprint-report, .bp-example-standalone) :is(.bp-example-settings select, .bp-example-actions button, .bp-example-actions .button-secondary, .bp-modelless-icon-button, .bp-modelless-tool-button, .bp-modelless-restart, .bp-requirement-summary, .bp-requirement-support, .bp-blueprint-badge, .bp-source-chip) {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}
:is(#blueprint-report, .bp-example-standalone) .bp-example-display > .bp-output-anatomy {
  animation: bp-example-enter 280ms cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes bp-example-enter {
  from { opacity: .35; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#blueprint-report, .bp-example-standalone) :is(.bp-example-settings select, .bp-example-actions button, .bp-example-actions .button-secondary, .bp-modelless-icon-button, .bp-modelless-tool-button, .bp-modelless-restart, .bp-requirement-summary, .bp-requirement-support, .bp-blueprint-badge, .bp-source-chip) { transition: none; }
  :is(#blueprint-report, .bp-example-standalone) .bp-example-display > .bp-output-anatomy { animation: none; }
}
@media (max-width: 900px) {
  .bp-pain-points__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-canvas .bp-spider__col, .bp-canvas .bp-spider__hub { grid-column: auto; grid-row: auto; }
}
@media (max-width: 720px) {
  .bp-benefits__list { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .bp-benefit-visual { max-width: 300px; margin-left: 0; }
  .bp-benefit-copy { max-width: 42ch; }
}
@media (max-width: 480px) {
  .bp-pain-points__choices, .bp-capability-list, .bp-delivery-list { grid-template-columns: minmax(0, 1fr); }
  .bp-pain-points { margin-bottom: 32px; }
}

.bp-blueprint-outcomes {
  margin-top: 22px;
  border-top: 1px solid var(--line);
}

.bp-blueprint-outcome {
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
}

.bp-blueprint-outcome__summary {
  display: flex;
  min-height: 54px;
  padding: 13px 16px;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s ease;
}

.bp-blueprint-outcome__summary::-webkit-details-marker { display: none; }
.bp-blueprint-outcome__summary:hover,
.bp-blueprint-outcome.is-expanded > .bp-blueprint-outcome__summary { background: var(--paper-2); }
.bp-blueprint-outcome__summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.bp-blueprint-outcome__chevron {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.bp-blueprint-outcome.is-expanded > .bp-blueprint-outcome__summary .bp-blueprint-outcome__chevron {
  transform: rotate(45deg) translate(-2px, -2px);
}

.bp-blueprint-outcome__heading {
  display: flex;
  min-width: 0;
  gap: 9px;
  align-items: center;
}

.bp-blueprint-outcome__heading .bp-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: var(--ink-3);
}

.bp-blueprint-outcome__title {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-blueprint-outcome__meta {
  display: flex;
  margin-left: auto;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.bp-blueprint-outcome__count {
  display: inline-flex;
  align-items: center;
  color: var(--ink-3);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.bp-blueprint-badge {
  display: inline-flex;
  min-height: 22px;
  padding: 3px 8px;
  align-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink-3);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.bp-blueprint-badge--linked {
  background: rgba(0, 105, 216, 0.08);
  color: var(--accent);
}

.bp-blueprint-badge--conditional {
  background: #fff9e8;
  color: #785b13;
}

.bp-blueprint-badge--generated {
  background: var(--paper-2);
  color: var(--ink-2);
}

.bp-blueprint-outcome__reveal {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bp-blueprint-outcome.is-expanded > .bp-blueprint-outcome__reveal {
  opacity: 1;
}

.bp-blueprint-outcome__content { padding: 0 14px 16px; }

.bp-blueprint-outcome__boundary {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--line-strong);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 0.82rem;
  line-height: 1.5;
}

.bp-blueprint-tree {
  background: transparent;
}

.bp-blueprint-tree__columns,
.bp-blueprint-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem minmax(10rem, 0.62fr);
  gap: 12px;
  align-items: center;
}

.bp-blueprint-tree__columns {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 600;
}

.bp-blueprint-tree__sections,
.bp-blueprint-section__outputs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-blueprint-section { list-style: none; }

.bp-blueprint-section + .bp-blueprint-section > .bp-blueprint-row--section {
  border-top: 1px solid var(--line);
}

.bp-blueprint-row {
  min-height: 42px;
  padding: 8px 12px;
  color: var(--ink-2);
  font-size: 0.84rem;
  line-height: 1.4;
  transition: background-color 0.15s ease;
}

.bp-blueprint-row:hover { background: var(--paper-2); }
.bp-blueprint-row--section { background: var(--paper-2); font-weight: 650; }

.bp-blueprint-row__main {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
}

.bp-blueprint-row--output .bp-blueprint-row__main { padding-left: 20px; }

.bp-blueprint-row__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: var(--ink-3);
}

.bp-blueprint-row__number {
  flex: 0 0 auto;
  color: var(--ink-3);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.bp-blueprint-row__copy { min-width: 0; }

.bp-blueprint-row__title {
  display: block;
  min-width: 0;
  white-space: normal;
}

.bp-blueprint-row__description {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-blueprint-row__status,
.bp-blueprint-row__source {
  min-width: 0;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 500;
}

.bp-blueprint-row__source {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .bp-blueprint-outcome__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .bp-blueprint-outcome__chevron { margin-top: 6px; }
  .bp-blueprint-outcome__meta {
    grid-column: 2;
    margin-left: 0;
    justify-content: flex-start;
  }
  .bp-blueprint-outcome__title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .bp-blueprint-outcome__content { padding-inline: 10px; }
  .bp-blueprint-tree__columns { display: none; }
  .bp-blueprint-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
    align-items: start;
  }
  .bp-blueprint-row--output .bp-blueprint-row__main { padding-left: 14px; }
  .bp-blueprint-row__source {
    grid-column: 1 / -1;
    padding-left: 40px;
    white-space: normal;
  }
  .bp-blueprint-row__source::before { content: attr(data-label) ": "; font-weight: 700; }
  .bp-blueprint-row__title,
  .bp-blueprint-row__description { white-space: normal; }
}

@media (prefers-color-scheme: dark) {
  .bp-blueprint-badge--linked {
    background: rgba(108, 182, 255, 0.1);
  }

  .bp-blueprint-badge--conditional {
    background: rgba(245, 185, 66, 0.09);
    color: #f3d28b;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bp-blueprint-outcome__summary,
  .bp-blueprint-outcome__chevron,
  .bp-blueprint-outcome__reveal {
    transition: none;
  }
}

/* Readable examples inside the existing result accordion. These selectors do
   not alter the builder, page layout, navigation or shared design tokens. */
.bp-examples { color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
.bp-examples > p { margin: 12px 0 16px; }
.bp-example-settings { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.bp-example-settings label { display: flex; flex: 1 1 240px; min-width: 0; gap: 8px; align-items: center; font-size: 0.84rem; color: var(--ink-3); }
.bp-example-settings select { min-width: 0; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: inherit; }
.bp-example-display { min-width: 0; }
.bp-example-sheet { padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; overflow-wrap: anywhere; }
.bp-example-sheet h4 { margin: 0 0 8px; color: var(--ink); font-size: 1.25rem; line-height: 1.35; }
.bp-example-sheet h5, .bp-example-details h5 { margin: 20px 0 8px; color: var(--ink); font-size: 1rem; line-height: 1.4; }
.bp-example-sheet p { margin: 12px 0; }
.bp-example-sheet ul, .bp-example-sheet ol, .bp-example-details ul { padding-left: 22px; margin: 12px 0; }
.bp-example-sheet li, .bp-example-details li { margin: 6px 0; }
.bp-example-sheet .bp-example-label { margin: 0 0 8px; color: var(--ink-3); font-size: 0.75rem; font-weight: 650; }
.bp-example-sheet .bp-example-subtitle, .bp-example-note { color: var(--ink-3); font-size: 0.84rem; }
.bp-example-drawing { max-width: 440px; margin: 12px auto; }
.bp-example-drawing svg { display: block; width: 100%; height: auto; }
.bp-example-table { max-width: 100%; overflow-x: auto; margin: 16px 0; }
.bp-example-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.5; text-align: left; }
.bp-example-table caption { text-align: left; color: var(--ink); font-weight: 650; padding: 0 0 8px; }
.bp-example-table th, .bp-example-table td { min-width: 90px; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bp-example-table th { background: var(--paper-2); color: var(--ink); font-weight: 650; }
.bp-example-table td:first-child { color: var(--ink); }
.bp-example-figure { margin: 16px 0; }
.bp-example-figure img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--radius-sm); }
.bp-example-figure img[src$="so101-qr.svg"] { width: 232px; border-radius: 0; }
.bp-example-figure figcaption, .bp-example-photo figcaption { margin-top: 8px; font-size: 0.84rem; color: var(--ink-3); }
.bp-example-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0 0; }
.bp-example-actions .button-secondary, .bp-example-sheet > .button-secondary { min-height: 44px; font: inherit; font-size: 0.84rem; }
.bp-example-actions button:disabled { opacity: 0.5; cursor: default; }
.bp-example-progress { color: var(--ink-3); font-size: 0.84rem; }
.bp-example-frame { display: block; width: 100%; height: 640px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: 16px; background: var(--paper-2); }
.bp-example-video { display: block; width: 100%; height: auto; margin: 16px 0; border-radius: var(--radius-sm); background: var(--paper-2); }
.bp-example-photo { margin: 16px 0; }
.bp-example-photo__image { position: relative; max-width: 440px; margin: auto; }
.bp-example-photo__image .bp-example-figure { margin: 0; }
.bp-example-callout { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; transform: translate(-50%, -50%); border: 2px solid var(--accent); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink); font-size: 0.84rem; font-weight: 650; }
.bp-example-diff { border-left: 3px solid var(--line-strong); padding: 8px 16px; background: var(--paper-2); }
.bp-example-diff del { color: var(--danger); }
.bp-example-diff ins { color: var(--accent); text-decoration-thickness: 2px; }
.bp-example-host { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 16px 0; }
.bp-example-included { margin: 16px 0; }
.bp-example-details { padding: 12px 0; border-top: 1px solid var(--line); }
.bp-example-details summary { cursor: pointer; color: var(--ink); font-size: 0.9rem; font-weight: 600; }
.bp-example-details > div { padding: 0 12px; font-size: 0.9rem; line-height: 1.6; }
.bp-example-details p { margin: 12px 0; }
.bp-examples :is(a, button, select, summary, .bp-example-table):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bp-example-standalone { max-width: 960px; margin: 32px auto; padding: 0 16px; }
.bp-example-standalone > p { margin: 16px 0; }
@media (max-width: 720px) {
  .bp-example-sheet { padding: 16px; }
  .bp-example-settings label { flex-wrap: wrap; }
  .bp-example-frame { height: 620px; }
  .bp-example-host { padding: 8px; }
  .bp-example-table th, .bp-example-table td { padding: 8px; }
  .bp-blueprint-outcome__count { white-space: normal; }
}
@media print {
  .bp-example-standalone { max-width: none; margin: 0; padding: 0; }
  .bp-example-standalone > p, .bp-example-actions, .bp-example-viewer button, .bp-example-sheet > a { display: none; }
  .bp-example-sheet { border: none; padding: 0; font-size: 11pt; background: white; color: black; }
  .bp-example-sheet h4 { font-size: 20pt; }
  .bp-example-table { overflow: visible; }
  .bp-example-table tr, .bp-example-drawing { break-inside: avoid; }
  .bp-example-figure img { max-height: 350px; width: auto; }
  .bp-example-frame { display: none; }
}
.bp-example-table-hint { display: none; }
@media screen and (max-width: 720px) {
  .bp-example-table-hint { display: block; color: var(--ink-3); font-size: 0.75rem; }
}
.bp-example-mobile-note { display: none; }
@media (max-width: 720px) {
  .bp-example-viewer > .bp-example-actions > button { display: none; }
  .bp-example-mobile-note { display: block; }
}

/* Diagram: an outcome the selection can only inform, or that follows authoring.
   Readable and slightly forward of an unrelated outcome, without the blue accent
   that marks material the selection could actually contribute. */
.bp-node--out.is-reference { opacity: 0.9; }
.bp-node--out.is-reference .bp-node__hint { color: var(--bp-muted); font-weight: 600; }

/* Personalised report framing; the source-selection canvas retains its styles. */
.bp-report-sources { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.bp-source-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0; list-style: none; }
.bp-source-chip { padding: 7px 11px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink-2); font-size: .78rem; }
.bp-source-chips > li { list-style: none; }
.bp-modify-sources, .bp-starting-point__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: .88rem; font-weight: 600; }
.bp-report-qualification { margin: 10px 0 8px; color: var(--ink-3); font-size: .84rem; }
.bp-booking h3 { margin: 0; color: var(--on-surface-inverse); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; }
.bp-booking p { color: var(--on-surface-inverse-2); }
.bp-starting-point { margin-top: 28px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.bp-starting-point h3 { margin: 0 0 12px; color: var(--ink-3); font-size: .8rem; font-weight: 600; }
.bp-starting-point .bp-first { margin: 0 0 12px; font-size: clamp(1.2rem, 2.5vw, 1.7rem); }
.bp-starting-point > p { max-width: 80ch; color: var(--ink-2); }
.bp-starting-point__gaps { margin: 12px 0 0; padding-left: 18px; color: var(--ink-3); font-size: .85rem; }
.bp-starting-point__gaps li + li { margin-top: 7px; }
.bp-report-group { margin-top: 36px; }
.bp-report-group .bp-blueprint-outcome__summary { flex-wrap: wrap; gap: 10px; }
.bp-report-group .bp-blueprint-outcome__heading { flex: 1 1 230px; }
.bp-report-group .bp-blueprint-outcome__title { white-space: normal; }
.bp-report-group .bp-blueprint-outcome__meta { flex: 1 1 220px; }
.bp-report-group .bp-blueprint-badge { white-space: normal; }
.bp-report-group .bp-blueprint-badge--conditional { background: var(--paper-2); color: var(--ink-2); }

/* Three follow-on stages share one quiet list, without individual section
   containers. The source-dependent examples still open inside each row. */
.bp-report-follow-through { margin: 48px 0; padding: 0 32px; }
.bp-report-follow-through > h3 { margin: 0 0 22px; color: var(--ink); font-size: 1.5rem; line-height: 1.3; }
.bp-report-follow-through > p { max-width: 70ch; margin: 0 0 22px; color: var(--ink-3); font-size: .95rem; line-height: 1.6; }
.bp-follow-through-list { border-top: 1px solid var(--line); }
.bp-follow-through-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.bp-follow-through-item > .bp-blueprint-outcome__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 10px; min-height: 104px; gap: 24px; padding: 22px 4px 22px 0; }
.bp-follow-through-item > .bp-blueprint-outcome__summary:hover,
.bp-follow-through-item.is-expanded > .bp-blueprint-outcome__summary { background: transparent; }
.bp-follow-through-item .bp-blueprint-outcome__heading { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; }
.bp-follow-through-item .bp-blueprint-outcome__heading .bp-icon { box-sizing: border-box; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--paper-2); stroke: var(--accent); }
.bp-follow-through-item .bp-blueprint-outcome__copy { display: block; min-width: 0; }
.bp-follow-through-item .bp-blueprint-outcome__title { display: block; overflow: visible; font-size: 1.05rem; font-weight: 600; line-height: 1.4; white-space: normal; }
.bp-follow-through-description { display: block; margin-top: 5px; color: var(--ink-3); font-size: .9rem; font-weight: 400; line-height: 1.55; }
.bp-follow-through-item > .bp-blueprint-outcome__summary:hover .bp-blueprint-outcome__title,
.bp-follow-through-item.is-expanded .bp-blueprint-outcome__title { color: var(--accent); }
.bp-follow-through-item .bp-blueprint-outcome__meta { display: block; margin: 0; }
.bp-follow-through-item .bp-blueprint-badge { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-3); font-size: .8rem; font-weight: 400; line-height: 1.5; }
.bp-follow-through-item .bp-blueprint-outcome__chevron { margin: 0; justify-self: end; }
.bp-follow-through-item .bp-blueprint-outcome__content { padding: 0 0 28px 60px; }
.bp-report-follow-through :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bp-follow-through-item > .bp-blueprint-outcome__summary:focus-visible { outline-offset: -3px; }
.bp-missing-information { margin: 48px 0; padding: 0 32px; }
.bp-missing-information > h3 { margin: 0 0 24px; color: var(--ink); font-size: 1.5rem; line-height: 1.3; }
.bp-missing-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 32px; list-style: none; padding: 0; margin: 0; }
.bp-missing-list > li { min-width: 0; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.bp-missing-summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) 10px; gap: 16px; align-items: center; min-height: 100px; padding: 16px 4px 16px 0; box-sizing: border-box; cursor: pointer; list-style: none; }
.bp-missing-summary::-webkit-details-marker { display: none; }
.bp-missing-summary::marker { content: ""; }
.bp-missing-summary > .bp-icon { box-sizing: border-box; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: #eaf2ff; stroke: #2563eb; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bp-missing-copy { min-width: 0; }
.bp-missing-copy strong { display: block; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.45; }
.bp-missing-purpose { display: block; margin-top: 4px; color: var(--ink-2); font-size: .88rem; line-height: 1.55; }
.bp-missing-chevron { width: 7px; height: 7px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); }
.bp-missing-item[open] .bp-missing-chevron { transform: rotate(45deg); }
.bp-missing-summary:hover .bp-missing-copy strong { color: var(--accent); }
.bp-missing-summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bp-missing-detail { padding: 0 24px 20px 60px; color: var(--ink-2); font-size: .88rem; line-height: 1.65; }
.bp-missing-detail p { margin: 0 0 10px; }
.bp-missing-detail p:last-child { margin-bottom: 0; }
.bp-report-sections :focus-visible, .bp-modify-sources:focus-visible, .bp-starting-point__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 720px) {
  .bp-report-follow-through { margin: 36px 0; padding-inline: 12px; }
  .bp-report-follow-through > h3 { margin-bottom: 18px; }
  .bp-follow-through-item > .bp-blueprint-outcome__summary { grid-template-columns: minmax(0, 1fr) 10px; gap: 8px 16px; min-height: 104px; padding-block: 20px; }
  .bp-follow-through-item .bp-blueprint-outcome__heading { grid-column: 1; grid-row: 1; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
  .bp-follow-through-item .bp-blueprint-outcome__heading .bp-icon { width: 36px; height: 36px; padding: 8px; }
  .bp-follow-through-item .bp-blueprint-outcome__meta { grid-column: 1; grid-row: 2; padding-left: 48px; }
  .bp-follow-through-item .bp-blueprint-outcome__chevron { grid-column: 2; grid-row: 1; align-self: center; }
  .bp-follow-through-item .bp-blueprint-outcome__content { padding: 0 0 24px; }
  .bp-report-group .bp-blueprint-outcome__meta { justify-content: flex-start; }
  .bp-missing-information { margin: 36px 0; padding-inline: 12px; }
  .bp-missing-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bp-missing-summary { grid-template-columns: 36px minmax(0, 1fr) 10px; gap: 12px; min-height: 96px; }
  .bp-missing-summary > .bp-icon { width: 36px; height: 36px; padding: 8px; }
  .bp-missing-copy strong { font-size: .95rem; }
  .bp-missing-detail { padding-left: 48px; padding-right: 0; }
  .bp-report-group.bp-block { padding: 24px 12px; }
  .bp-report-group .bp-blueprint-outcome__content { padding: 0 0 16px; }
}

/* Focused output previews. Source mappings and prerequisites sit in one
   optional disclosure beneath the example, rather than beside it. */
.bp-examples--simple { max-width: 960px; margin-inline: auto; padding-top: 8px; }
.bp-examples--simple > p { max-width: 72ch; margin: 4px 0 20px; }
.bp-examples--simple > .bp-example-settings { margin: 0 0 24px; }
.bp-examples--simple .bp-example-settings label { flex: 0 1 440px; font-size: .9rem; }
.bp-output-anatomy { display: block; min-width: 0; }
.bp-output-blueprint, .bp-output-preview { min-width: 0; overflow-wrap: anywhere; }
.bp-output-details { margin-top: 24px; padding: 8px 0; }
.bp-output-details > div { padding: 0; }
.bp-output-blueprint { padding: 8px 0; color: var(--ink-2); font-size: .95rem; line-height: 1.65; }
.bp-output-blueprint h5 { margin: 24px 0 8px; color: var(--ink); font-size: 1rem; }
.bp-output-blueprint p { margin: 10px 0; }
.bp-output-blueprint ul { margin: 12px 0; padding-left: 20px; }
.bp-output-blueprint li { margin: 7px 0; }
.bp-output-blueprint .bp-example-details > div { padding: 0; font-size: .9rem; }
.bp-source-contribution strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: .9rem; }
.bp-preview-status { display: block; margin: 8px 0 16px; color: var(--ink-3); font-size: .85rem; line-height: 1.6; }
.bp-output-details .bp-source-chips { gap: 6px 18px; margin: 12px 0; }
.bp-output-details .bp-source-chip { padding: 0; border: 0; border-radius: 0; background: transparent; font-size: .85rem; overflow-wrap: anywhere; }
.bp-preview-callout { margin: 20px 0; padding: 0 0 0 14px; border-left: 2px solid var(--line-strong); font-size: .9rem; line-height: 1.65; }
.bp-preview-callout p { margin: 6px 0; }
.bp-output-preview > .bp-example-note { margin: 12px 0; font-size: .85rem; }
.bp-output-preview .bp-example-sheet { padding: 24px; font-size: .95rem; }
.bp-output-preview .bp-example-sheet h4 { font-size: 1.2rem; }
.bp-output-preview .bp-example-label { margin: 0 0 12px; color: var(--ink-3); font-size: .85rem; font-weight: 400; }
.bp-output-preview .bp-example-host { padding: 0; border: 0; margin: 16px 0; }
.bp-examples :is(button, select, summary) { min-height: 44px; }
.bp-examples a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; max-width: 100%; overflow-wrap: anywhere; }
.bp-example-details summary { display: list-item; padding: 10px 0; box-sizing: border-box; list-style: disclosure-closed inside; }
.bp-example-details[open] > summary { list-style-type: disclosure-open; }
.bp-examples :is(button, select) { max-width: 100%; }
.bp-examples button { cursor: pointer; }
.bp-app-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: center; padding: 12px 24px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: .8rem; }
.bp-app-bar .bp-preview-status { margin: 0; font-size: inherit; }
.bp-app-brand { color: var(--ink-2); font-weight: 600; }
/* Documentation purpose and requirements, following FoundationPanel and
   RequirementsTree. Source support describes declarations, not coverage. */
.bp-publication-requirements { min-width: 0; overflow: hidden; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; color: #171717; }
.bp-publication-context { padding: 22px 20px 20px; border-bottom: 1px solid #e5e5e5; }
.bp-publication-context .bp-publication-location { margin: 0 0 12px; color: #737373; font-size: .75rem; line-height: 1.5; }
.bp-publication-context h4 { margin: 0 0 8px; color: #171717; font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
.bp-publication-context .bp-publication-purpose { max-width: 76ch; margin: 0; color: #525252; font-size: .875rem; line-height: 1.65; }
.bp-publication-context .bp-publication-audience { margin: 12px 0 0; color: #737373; font-size: .75rem; line-height: 1.5; }
.bp-requirements-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 20px; }
.bp-requirements-header h5 { margin: 0; color: #525252; font-size: .8rem; font-weight: 500; line-height: 1.4; }
.bp-requirements-count { color: #737373; font-size: .75rem; line-height: 1.5; }
.bp-requirements-columns { display: grid; grid-template-columns: minmax(0, 1fr) 140px 16px; gap: 16px; padding: 9px 20px; border-block: 1px solid #e5e5e5; background: #fafafa; color: #737373; font-size: .75rem; line-height: 1.5; }
.bp-requirements-list { margin: 0; padding: 0; list-style: none; }
.bp-requirements-list > li { margin: 0; list-style: none; }
.bp-requirement { margin: 0; border: 0; border-radius: 0; background: #fff; }
.bp-requirements-list > li + li > .bp-requirement { border-top: 1px solid #ededed; }
.bp-requirement-summary { display: grid; box-sizing: border-box; grid-template-columns: minmax(0, 1fr) 140px 16px; align-items: center; gap: 16px; min-height: 76px; padding: 14px 20px; cursor: pointer; list-style: none; }
.bp-requirement-summary::-webkit-details-marker { display: none; }
.bp-requirement-summary::marker { content: ""; }
.bp-requirement-summary:hover, .bp-requirement[open] > .bp-requirement-summary { background: #fafafa; }
.bp-requirement-summary:focus-visible { outline: 3px solid #3b82f6; outline-offset: -3px; }
.bp-requirement-name { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.bp-requirement-icon { display: inline-flex; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; color: #737373; }
.bp-requirement-icon svg { display: block; width: 100%; height: 100%; stroke: currentColor; }
.bp-requirement-number { flex: 0 0 16px; color: #737373; font-size: .75rem; font-variant-numeric: tabular-nums; line-height: 1.75; }
.bp-requirement-copy { min-width: 0; }
.bp-requirement-title { display: block; color: #171717; font-size: .875rem; font-weight: 500; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.bp-requirement-abstract { display: block; margin-top: 3px; color: #737373; font-size: .75rem; font-weight: 400; line-height: 1.5; }
.bp-requirement-support { justify-self: start; max-width: 100%; padding: 3px 7px; border-radius: 4px; color: #525252; background: #f5f5f5; font-size: .75rem; font-weight: 400; line-height: 1.5; }
.bp-requirement-support[data-support="content"] { color: #1d4ed8; background: #eff6ff; }
.bp-requirement-support[data-support="reference"] { color: #525252; background: #f5f5f5; }
.bp-requirement-support[data-support="missing"] { color: #92400e; background: #fffbeb; }
.bp-requirement-chevron { display: inline-flex; width: 16px; height: 16px; color: #737373; transition: transform .18s ease; }
.bp-requirement-chevron svg { display: block; width: 100%; height: 100%; stroke: currentColor; }
.bp-requirement[open] > .bp-requirement-summary .bp-requirement-chevron { transform: rotate(90deg); }
.bp-requirement-detail { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; min-width: 0; padding: 18px 20px 24px 68px; border-top: 1px solid #f0f0f0; color: #404040; font-size: .875rem; line-height: 1.65; overflow-wrap: anywhere; }
.bp-requirement-detail > div { min-width: 0; }
.bp-requirement-evidence { padding-left: 24px; border-left: 1px solid #e5e5e5; }
.bp-requirement-detail h6 { margin: 20px 0 6px; color: #171717; font-size: .75rem; font-weight: 600; line-height: 1.5; }
.bp-requirement-detail h6:first-child { margin-top: 0; }
.bp-requirement-detail p { margin: 0; color: #525252; font-size: .8125rem; line-height: 1.7; }
.bp-requirement-detail .bp-requirement-status { margin-bottom: 6px; color: #404040; font-size: .75rem; font-weight: 500; }
.bp-requirement-detail .bp-source-chips { gap: 6px; margin: 0; }
.bp-requirement-detail .bp-source-chip { padding: 3px 6px; font-size: .75rem; line-height: 1.5; }
@media (max-width: 720px) {
  .bp-publication-context { padding: 18px 14px; }
  .bp-publication-context h4 { font-size: 1.125rem; }
  .bp-requirements-header { padding: 12px 14px; border-bottom: 1px solid #e5e5e5; }
  .bp-requirements-columns { display: none; }
  .bp-requirement-summary { grid-template-columns: minmax(0, 1fr) 16px; gap: 8px 10px; padding: 14px; }
  .bp-requirement-name { grid-column: 1; grid-row: 1; }
  .bp-requirement-support { grid-column: 1; grid-row: 2; margin-left: 48px; }
  .bp-requirement-chevron { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .bp-requirement-detail { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 14px; }
  .bp-requirement-evidence { padding: 18px 0 0; border: 0; border-top: 1px solid #e5e5e5; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-requirement-chevron { transition: none; }
}
.bp-visual-workspace, .bp-learning-reader { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.bp-learning-reader { padding: 24px; }
.bp-learning-reader > .bp-example-label { margin: 0 0 16px; }
.bp-learning-reader > h4 { margin: 0 0 16px; color: var(--ink); font-size: 1.2rem; line-height: 1.4; }
.bp-learning-reader > p { margin: 12px 0; }
.bp-learning-reader .bp-example-figure { max-width: 720px; margin: 20px auto; }
.bp-visual-workspace > .bp-example-sheet { border: 0; border-radius: 0; }
.bp-visual-workspace > .bp-example-note, .bp-visual-workspace > .bp-preview-callout { margin-inline: 24px; }
.bp-visual-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; padding: 20px 24px; }
.bp-visual-mode { min-width: 0; line-height: 1.6; }
.bp-visual-mode strong { display: block; color: var(--ink-2); font-size: .9rem; }
.bp-visual-mode small { display: block; margin-top: 4px; color: var(--ink-3); font-size: .85rem; }
.bp-learning-reader > h5 { margin: 24px 24px 0; color: var(--ink); font-size: 1.2rem; }
.bp-learning-layout { display: block; }
.bp-lesson-outline { margin: 0; padding: 8px 0; border-top: 1px solid var(--line); }
.bp-lesson-outline summary { box-sizing: border-box; min-height: 44px; padding: 12px 0; color: var(--ink-2); cursor: pointer; font-size: .9rem; font-weight: 600; }
.bp-lesson-link { display: block; width: 100%; padding: 10px 0; border: 0; background: transparent; color: var(--ink-2); text-align: left; font: inherit; font-size: .9rem; line-height: 1.6; }
.bp-lesson-link[aria-current="step"] { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.bp-active-lesson { min-width: 0; padding: 20px 0 0; font-size: .95rem; }
.bp-active-lesson h4, .bp-active-lesson h5 { margin: 0 0 16px; color: var(--ink); font-size: 1.1rem; line-height: 1.4; }
.bp-active-lesson h6 { margin: 20px 0 8px; color: var(--ink); font-size: .95rem; }
.bp-active-lesson ol, .bp-active-lesson ul { padding-left: 20px; }
.bp-active-lesson li { margin: 7px 0; }
.bp-active-lesson > .button-secondary { min-height: 44px; margin: 16px 0 0; font-size: .9rem; }
.bp-active-lesson .bp-example-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; max-width: 420px; }
.bp-active-lesson .bp-example-actions .button-secondary { min-width: 0; padding-inline: 8px; white-space: nowrap; }
.bp-active-lesson .bp-example-progress { text-align: center; overflow-wrap: normal; word-break: normal; }
.bp-grounded-answer { margin: 24px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.bp-grounded-answer h6 { margin-top: 0; }
.bp-grounded-answer p { margin: 8px 0; }
.bp-grounded-answer .bp-example-note { font-size: .85rem; }
.bp-spatial-device { max-width: 360px; margin: 24px auto; border: 7px solid #202427; border-radius: 28px; overflow: hidden; background: #202427; }
.bp-spatial-toolbar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; color: #f4f5f6; font-size: .8rem; }
.bp-spatial-viewport { position: relative; aspect-ratio: 1 / 1.1; overflow: hidden; background: #cbd2d4; }
.bp-spatial-viewport .bp-example-figure { width: 100%; height: 100%; margin: 0; }
.bp-spatial-viewport .bp-example-figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.bp-spatial-alignment { position: absolute; top: 10px; left: 10px; padding: 6px 8px; border: 1px solid #cdd6dc; border-radius: 5px; background: rgba(255,255,255,0.95); color: #242a30; font-size: .7rem; }
.bp-spatial-highlight { position: absolute; top: 14%; left: 21%; width: 45%; height: 36%; border: 3px solid #0069d8; border-radius: 12px; background: rgba(0,105,216,0.1); transform: rotate(5deg); }
.bp-spatial-cue { position: absolute; top: 13%; left: 34%; background: #fff; border: 1px solid #0069d8; border-radius: 4px; color: #0751a1; padding: 6px 9px; font-size: .8rem; font-weight: 650; }
.bp-spatial-instruction { padding: 14px; background: var(--paper); font-size: .9rem; }
.bp-spatial-instruction strong { color: var(--ink); line-height: 1.5; }
.bp-spatial-instruction p { margin: 8px 0 0; }
.bp-capability-grid { display: block; margin-top: 24px; }
.bp-capability-panel { min-width: 0; margin: 24px 0; font-size: .95rem; }
.bp-capability-panel + .bp-capability-panel { padding-top: 24px; border-top: 1px solid var(--line); }
.bp-capability-panel h5 { margin: 0 0 16px; color: var(--ink); font-size: 1.05rem; }
.bp-capability-panel ul { padding-left: 20px; }
.bp-capability-panel li { margin: 8px 0; }
.bp-capability-panel .bp-example-diff > * { display: block; margin: 8px 0; }
.bp-capability-panel .bp-example-note { font-size: .85rem; }
.bp-output-preview .bp-example-diff { padding: 0 0 0 14px; border-left-width: 2px; background: transparent; }
.bp-delivery-flow { margin: 24px 0; }
.bp-delivery-flow h5 { margin: 0 0 16px; color: var(--ink); font-size: 1.05rem; }
.bp-delivery-destinations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
.bp-delivery-destination { min-width: 0; }
.bp-delivery-destination strong { display: block; color: var(--ink-2); font-size: .9rem; }
.bp-delivery-destination span { display: block; margin-top: 5px; font-size: .85rem; line-height: 1.6; }
.bp-example-video { aspect-ratio: 4 / 3; }
.bp-viewer-media > .bp-example-figure { aspect-ratio: 1440 / 1000; }
.bp-viewer-media > .bp-example-figure img { width: 100%; height: auto; }
@media (max-width: 720px) {
  .bp-examples--simple { padding-top: 4px; }
  .bp-examples--simple .bp-example-settings label { flex-basis: 100%; }
  .bp-output-preview .bp-example-sheet, .bp-learning-reader { padding: 16px; }
  .bp-active-lesson { padding: 16px 0 0; }
  .bp-app-bar { padding: 12px 16px; }
  .bp-lesson-outline { margin-inline: 0; }
  .bp-learning-reader > h5 { margin: 16px 16px 0; }
  .bp-visual-workspace > .bp-example-note, .bp-visual-workspace > .bp-preview-callout { margin-inline: 16px; }
  .bp-visual-modes { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .bp-delivery-destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-spatial-device { border-width: 5px; border-radius: 20px; }
  .bp-spatial-alignment { top: 7px; left: 7px; }
  .bp-spatial-cue { top: 19%; }
}
@media (max-width: 390px) {
  .bp-active-lesson .bp-example-actions { grid-template-columns: minmax(0, 1fr) min-content minmax(0, 1fr); }
  .bp-spatial-toolbar, .bp-spatial-instruction { padding: 10px; }
  .bp-delivery-destinations { grid-template-columns: minmax(0, 1fr); }
}

/* Representative model-less viewer, following the product's ViewerBar and
   StepProgress layout. These rules do not affect the interactive 3D example. */
.bp-modelless-viewer.bp-example-sheet { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 0; border-radius: 16px; background: #f8f8f8; color: #171717; box-shadow: none; }
.bp-modelless-toolbar { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 0; border-radius: 16px; background: #fff; }
.bp-modelless-viewer .bp-modelless-toolbar h4 { flex: 1; min-width: 0; margin: 0; color: #171717; font-size: 1rem; font-weight: 500; line-height: 1.4; }
.bp-modelless-toolbar > div { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.bp-modelless-language { color: #737373; font-size: .85rem; line-height: 1.5; white-space: nowrap; }
.bp-modelless-panel { display: flex; flex-direction: column; min-width: 0; min-height: 360px; padding: 24px; border: 0; border-radius: 16px; background: #fff; }
.bp-modelless-step-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bp-modelless-number { display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #3b82f6; color: #fff; font-size: .85rem; line-height: 1; }
.bp-modelless-viewer .bp-modelless-step-heading h5 { flex: 1; min-width: 0; margin: 0; color: #171717; font-size: 1.2rem; font-weight: 500; line-height: 1.4; }
.bp-modelless-body { flex: 1; min-width: 0; margin: 16px 0 24px; color: #404040; font-size: .95rem; line-height: 1.65; }
.bp-modelless-viewer .bp-modelless-body p { margin: 0 0 12px; }
.bp-modelless-viewer .bp-modelless-body .bp-example-note { color: #737373; font-size: .85rem; }
.bp-modelless-step-video { margin: 20px 0 0; }
.bp-modelless-step-video > h6 { margin: 0 0 8px; color: #404040; font-size: .9rem; font-weight: 500; }
.bp-modelless-step-video .bp-example-video { max-height: 45vh; margin: 0; aspect-ratio: auto; object-fit: contain; border-radius: 8px; background: #f1f5f9; }
.bp-modelless-step-video .bp-example-video:focus-visible { outline: 3px solid #3b82f6; outline-offset: 3px; }
.bp-modelless-step-video > .bp-example-details { margin: 12px 0 0; font-size: .85rem; }
.bp-modelless-step-video .bp-example-details > div { padding: 0; }
.bp-modelless-video-fallback { padding: 16px; border-radius: 8px; background: #f8f8f8; }
.bp-modelless-resources { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding: 12px 14px; border-radius: 8px; background: #f8f8f8; color: #404040; font-size: .85rem; }
.bp-modelless-resources > strong { flex-basis: 100%; }
.bp-modelless-resources > span { padding: 3px 7px; border: 1px solid #cbdcf8; border-radius: 6px; background: #fff; }
.bp-modelless-restart { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 8px; background: #3b82f6; color: #fff; font: inherit; }
.bp-modelless-resources[hidden] { display: none; }
.bp-modelless-viewer [hidden] { display: none; }
.bp-modelless-viewer .bp-modelless-resources p:last-child { margin-bottom: 0; }
.bp-modelless-icon-button, .bp-modelless-tool-button { display: inline-flex; flex: 0 0 44px; box-sizing: border-box; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #171717; cursor: pointer; }
.bp-modelless-toolbar .bp-modelless-icon-button, .bp-modelless-tool-button { border-color: transparent; background: transparent; }
.bp-modelless-icon-button svg, .bp-modelless-tool-button svg { flex-shrink: 0; width: 20px; height: 20px; stroke: currentColor; }
.bp-modelless-icon-button:hover:not(:disabled), .bp-modelless-tool-button:hover:not(:disabled), .bp-modelless-tool-button[aria-expanded="true"] { background: #f3f4f6; }
.bp-modelless-icon-button:disabled, .bp-modelless-tool-button:disabled { opacity: .5; cursor: default; }
.bp-modelless-viewer :is(button, select):focus-visible { outline: 3px solid #3b82f6; outline-offset: 3px; }
.bp-modelless-navigation { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: auto; }
.bp-modelless-progress { flex: 1; min-width: 12px; height: 8px; overflow: hidden; border-radius: 999px; background: #e5e7eb; }
.bp-modelless-progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #3b82f6; transition: width .18s ease-out; }
.bp-modelless-viewer .bp-modelless-footer { margin: 12px 0 0; color: #737373; font-size: .72rem; line-height: 1.5; text-align: center; }
.bp-modelless-footer .bp-example-progress { color: inherit; font-size: inherit; }
@media (max-width: 720px) {
  .bp-modelless-viewer.bp-example-sheet { gap: 10px; padding: 10px; }
  .bp-modelless-panel { min-height: 280px; padding: 16px; }
  .bp-modelless-viewer .bp-modelless-step-heading h5 { font-size: 1rem; }
  .bp-modelless-navigation { gap: 8px; }
}
@media (max-width: 480px) {
  .bp-modelless-viewer.bp-example-sheet { padding: 8px; }
  .bp-modelless-toolbar { gap: 8px; padding: 8px; }
  .bp-modelless-panel { min-height: 260px; padding: 12px; }
  .bp-modelless-step-heading { gap: 8px; }
  .bp-modelless-body { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-modelless-progress > span { transition: none; }
}

/* Public abstract overview, before the email gate. */
.bp-output-list {
  width: min(900px, 100%);
  margin: 28px auto 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.bp-output-list > li {
  border-top: 1px solid var(--line);
  list-style: none;
}
.bp-output-list summary {
  position: relative;
  padding: 22px 48px 22px 0;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 650;
  list-style: none;
}
.bp-output-list summary::-webkit-details-marker { display: none; }
.bp-output-list summary::before,
.bp-output-list summary::after {
  position: absolute;
  top: 50%;
  right: 2px;
  width: 15px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--ink-3);
  content: "";
  transform: translateY(-50%);
  transition: background-color 0.25s ease, opacity 0.25s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.bp-output-list summary::after { transform: translateY(-50%) rotate(90deg); }
.bp-output-list details:not(.is-enhanced)[open] summary::before,
.bp-output-list details.is-expanded summary::before { transform: translateY(-50%) rotate(180deg); }
.bp-output-list details:not(.is-enhanced)[open] summary::after,
.bp-output-list details.is-expanded summary::after {
  opacity: 0;
  transform: translateY(-50%) rotate(180deg);
}
.bp-output-list__reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}
.bp-output-list__body {
  min-height: 0;
  overflow: hidden;
  transform: translateY(-7px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.bp-output-list details[open] .bp-output-list__reveal {
  grid-template-rows: 1fr;
  opacity: 1;
}
.bp-output-list details[open] .bp-output-list__body { transform: translateY(0); }
.bp-output-list details.is-enhanced .bp-output-list__reveal {
  display: block;
  overflow: hidden;
  opacity: 1;
  transition: none;
}
.bp-output-list details.is-enhanced .bp-output-list__body { transform: none; transition: none; }
.bp-output-list p { max-width: 760px; margin: 0 0 22px; }
.bp-output-list__content {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  padding: 4px 0 30px;
}
.bp-output-list__content > p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.75;
}
.bp-output-list__visual { min-width: 0; margin: 0; }
.bp-output-list__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  border-radius: 16px;
  background: #f8fafc;
}
.bp-output-list__visual figcaption {
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 0.76rem;
  line-height: 1.55;
  text-align: center;
}
@media (max-width: 620px) {
  .bp-output-list__content { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 26px; }
  .bp-output-list__content > p { font-size: 0.94rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-output-list summary,
  .bp-output-list summary::before,
  .bp-output-list summary::after,
  .bp-output-list__reveal,
  .bp-output-list__body {
    transition: none;
  }
}

.bp-output-list summary:focus:not(:focus-visible) { outline: none; }
.bp-output-list summary:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 4px; }

/* Visual scope guide: source choices, human review and the recorded-work flow. */
.bp-scope {
  background: radial-gradient(ellipse at 85% 0, rgba(37, 99, 185, .16), transparent 60%), var(--surface-inverse);
}
.bp-scope__header { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.bp-scope__header h2 { margin: 0; color: #f3f7fb; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.15; letter-spacing: -.04em; }
.bp-scope__rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin: 0; padding: 0; list-style: none; }
.bp-scope__rules > li { min-width: 0; padding: 0; text-align: center; list-style: none; }
.bp-scope__visual { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 16 / 9; margin: 0 auto 22px; }
.bp-scope__rules h3 { margin: 0 0 8px; color: #f3f7fb; font-size: 1.1rem; line-height: 1.4; }
.bp-scope__rules p { max-width: 30ch; margin: 0 auto; color: #a6b3c7; font-size: .95rem; line-height: 1.6; }
.bp-scope__execution { margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(166, 179, 199, .2); text-align: center; }
.bp-scope__execution h3 { margin: 0; color: #f3f7fb; font-size: 1.1rem; line-height: 1.4; }
.bp-scope__path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 28px 0 24px; padding: 0; list-style: none; }
.bp-scope__path > li { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 14px; padding: 0 8px; color: #e7edf7; font-size: .9rem; line-height: 1.5; list-style: none; }
.bp-scope__step-icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border: 1px solid #37516a; border-radius: 50%; background: #111d2b; color: #67b0ff; }
.bp-scope__step-icon svg { width: 25px; height: 25px; }
.bp-scope__path > li:not(:last-child)::after { position: absolute; top: 28px; left: calc(50% + 36px); width: calc(100% - 72px); border-top: 1px solid #37516a; content: ""; }
.bp-scope__path > li:not(:last-child)::before { position: absolute; top: 25px; left: calc(150% - 41px); width: 6px; height: 6px; border-top: 1px solid #67b0ff; border-right: 1px solid #67b0ff; transform: rotate(45deg); content: ""; }
.bp-scope__execution > p { margin: 0; color: #a6b3c7; font-size: .88rem; line-height: 1.6; }
@media (max-width: 720px) {
  .bp-scope__header { margin-bottom: 32px; }
  .bp-scope__rules { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .bp-scope__visual { max-width: 260px; margin-bottom: 14px; }
  .bp-scope__execution { margin-top: 36px; padding-top: 28px; }
  .bp-scope__path { grid-template-columns: minmax(0, 1fr); max-width: 340px; margin: 20px auto; }
  .bp-scope__path > li { min-height: 88px; flex-direction: row; gap: 20px; padding: 0; text-align: left; }
  .bp-scope__path > li:not(:last-child)::after { top: 80px; left: 28px; width: 0; height: 16px; border-top: 0; border-left: 1px solid #37516a; }
  .bp-scope__path > li:not(:last-child)::before { top: 89px; left: 25px; transform: rotate(135deg); }
}

.bp-starting-point__details { margin-top: 8px; }
.bp-starting-point__details summary { min-height: 44px; padding: 11px 0; width: fit-content; cursor: pointer; color: var(--ink-3); font-size: .85rem; }
.bp-starting-point__details summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bp-starting-point__details p { max-width: 75ch; margin: 8px 0 0; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }