/* =============================================================
   components.css
   Reusable refined components used across all segment types.
   ============================================================= */

/* ---------- Meta labels ---------- */
.bpc-meta-label {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-gold);
  font-weight: 600;
}

.bpc-meta-label-muted { color: var(--bpc-color-text-muted); }

/* ---------- Gold divider ---------- */
.bpc-gold-divider {
  width: 64px;
  height: 1px;
  background: var(--bpc-color-gold);
  border: none;
  margin: var(--bpc-space-4) 0 var(--bpc-space-2);
}

.bpc-gold-divider-center {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Buttons ---------- */
.bpc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bpc-space-2);
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--bpc-space-3) var(--bpc-space-6);
  min-width: 180px;
  background: transparent;
  color: var(--bpc-color-navy);
  border: 1px solid var(--bpc-color-navy);
  border-radius: var(--bpc-radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--bpc-transition-base), color var(--bpc-transition-base), border-color var(--bpc-transition-base);
}

.bpc-button:hover,
.bpc-button:focus-visible {
  background: var(--bpc-color-navy);
  color: var(--bpc-color-ivory);
}

.bpc-button-primary {
  background: var(--bpc-color-gold);
  color: var(--bpc-color-navy);
  border-color: var(--bpc-color-gold);
}

.bpc-button-primary:hover,
.bpc-button-primary:focus-visible {
  background: transparent;
  color: var(--bpc-color-gold);
  border-color: var(--bpc-color-gold);
}

.bpc-button-ghost {
  background: transparent;
  color: var(--bpc-color-navy);
  border-color: var(--bpc-color-border-soft);
}

.bpc-button-ghost:hover,
.bpc-button-ghost:focus-visible {
  background: var(--bpc-color-beige);
  color: var(--bpc-color-navy);
  border-color: var(--bpc-color-navy);
}

.bpc-button[disabled],
.bpc-button[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--bpc-color-beige-surface);
  color: var(--bpc-color-text-muted);
  border-color: var(--bpc-color-border-soft);
  box-shadow: none;
}

.bpc-button[disabled]:hover,
.bpc-button[disabled]:focus-visible,
.bpc-button[aria-disabled="true"]:hover,
.bpc-button[aria-disabled="true"]:focus-visible {
  background: var(--bpc-color-beige-surface);
  color: var(--bpc-color-text-muted);
  border-color: var(--bpc-color-border-soft);
}

/* ---------- Progress bar ---------- */
.bpc-progress-bar {
  flex: 1;
  height: 2px;
  background: var(--bpc-color-border-on-navy);
  position: relative;
  overflow: hidden;
}

.bpc-progress-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--bpc-color-gold);
  width: 0%;
  transition: width var(--bpc-transition-slow);
}

.bpc-progress-bar-label {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-gold);
  white-space: nowrap;
}

/* ---------- Navigation controls ---------- */
.bpc-nav-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bpc-space-4);
  margin-top: var(--bpc-space-12);
  padding-top: var(--bpc-space-8);
  border-top: 1px solid var(--bpc-color-border-soft);
}

/* Honor the standard HTML `hidden` attribute. The base
   `.bpc-nav-controls { display: flex }` rule above has the same
   specificity as the UA stylesheet's `[hidden] { display: none }`,
   and author rules win cascade ties — so without this explicit
   override, setting `navControls.hidden = true` from app.js would
   appear to do nothing. This rule's class+attribute selector
   (specificity 0,2,0) cleanly defeats the bare class rule, so the
   pre-course module (S0) and any future preCourseModule sessions
   correctly suppress the global Previous / Next / Complete Session
   bar. The pattern matches `.bpc-session-driver[hidden]` and
   `.bpc-transcript-panel-body[hidden]` elsewhere in the codebase. */
.bpc-nav-controls[hidden] {
  display: none;
}

.bpc-nav-controls-end {
  display: flex;
  gap: var(--bpc-space-3);
  flex-wrap: wrap;
}

/* Inline status note that sits between the segment mount and the
   nav-controls bar. Used by app.js updateNavControls() to surface
   the EXACT remaining requirement (e.g. "Complete the Executive
   Presence Self-Assessment before completing this session.") when
   the learner is on the final segment with all segments viewed
   but the required-activity gate is still open. The element
   itself ships with `hidden` so it is invisible until needed.
   Refined V3 institutional treatment: navy soft surface, ivory
   text, gold accent rule on the leading edge — same visual
   language as other learner-facing notes in the course. */
.bpc-nav-status-note {
  margin: var(--bpc-space-6) 0 0 0;
  padding: var(--bpc-space-4) var(--bpc-space-5);
  background: var(--bpc-color-navy-soft);
  border: 1px solid var(--bpc-color-border-on-navy);
  border-left: 3px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-ivory);
}

.bpc-nav-status-note[hidden] {
  display: none;
}

/* ---------- Video frame ---------- */
.bpc-video-frame {
  width: 100%;
  background: var(--bpc-color-navy-darker);
  border: 1px solid var(--bpc-color-gold-muted);
  border-radius: var(--bpc-radius-sm);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
}

.bpc-video-frame iframe,
.bpc-video-frame video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.bpc-video-frame-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--bpc-space-8);
  background:
    radial-gradient(circle at 50% 35%, rgba(212, 175, 55, 0.06), transparent 60%),
    var(--bpc-color-navy-darker);
}

.bpc-video-frame-placeholder-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bpc-space-2);
  padding: var(--bpc-space-6) var(--bpc-space-8);
  border: 1px solid var(--bpc-color-border-on-navy);
  border-radius: var(--bpc-radius-sm);
  max-width: 480px;
}

.bpc-video-frame-placeholder-eyebrow {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-gold);
}

.bpc-video-frame-placeholder-speaker {
  font-family: var(--bpc-font-display);
  font-size: var(--bpc-text-lg);
  color: var(--bpc-color-ivory);
  letter-spacing: var(--bpc-tracking-heading);
  margin-top: var(--bpc-space-1);
}

.bpc-video-frame-placeholder-meta {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: rgba(248, 245, 239, 0.72);
}

.bpc-video-frame-placeholder-rule {
  width: 36px;
  height: 1px;
  background: var(--bpc-color-gold);
  border: 0;
  margin: var(--bpc-space-3) 0 var(--bpc-space-2);
}

.bpc-video-frame-placeholder-status {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-gold-hairline);
}

.bpc-video-caption-note {
  margin: 0 0 var(--bpc-space-4);
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-text-muted);
}

/* ---------- Transcript panel ---------- */
.bpc-transcript-panel {
  margin-top: var(--bpc-space-6);
  border: 1px solid var(--bpc-color-border-soft);
  background: var(--bpc-color-ivory-surface);
  border-radius: var(--bpc-radius-sm);
}

.bpc-transcript-panel-toggle {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  padding: var(--bpc-space-4) var(--bpc-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bpc-space-4);
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-sm);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-navy);
  cursor: pointer;
}

.bpc-transcript-panel-toggle::after {
  content: "+";
  font-size: var(--bpc-text-lg);
  color: var(--bpc-color-gold);
  transition: transform var(--bpc-transition-base);
}

.bpc-transcript-panel-toggle[aria-expanded="true"]::after {
  content: "\2013";
}

.bpc-transcript-panel-body {
  padding: 0 var(--bpc-space-5) var(--bpc-space-5);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
  max-width: var(--bpc-reading-width);
}

.bpc-transcript-panel-body[hidden] { display: none; }

.bpc-transcript-panel-body p { margin: 0; }
.bpc-transcript-panel-body p + p { margin-top: var(--bpc-space-4); }

/* ---------- Action block ---------- */
.bpc-action-block {
  margin-top: var(--bpc-space-8);
  padding: var(--bpc-space-6) var(--bpc-space-8);
  background: var(--bpc-color-beige);
  border-left: 2px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
}

.bpc-action-block-label {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-gold);
  margin-bottom: var(--bpc-space-3);
}

.bpc-action-block-title {
  font-family: var(--bpc-font-heading);
  font-size: var(--bpc-text-lg);
  font-weight: 400;
  color: var(--bpc-color-navy);
  margin: 0 0 var(--bpc-space-3);
  letter-spacing: var(--bpc-tracking-heading);
}

.bpc-action-block-text {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
  margin: 0;
  max-width: var(--bpc-reading-width);
}

/* ---------- Text slide ---------- */
.bpc-text-slide {
  background: var(--bpc-color-ivory-surface);
  border: 1px solid var(--bpc-color-border-soft);
  padding: var(--bpc-space-12) var(--bpc-space-10);
  border-radius: var(--bpc-radius-sm);
}

.bpc-text-slide-title {
  font-family: var(--bpc-font-display);
  font-size: var(--bpc-text-2xl);
  font-weight: 400;
  color: var(--bpc-color-navy);
  margin: 0 0 var(--bpc-space-4);
  letter-spacing: var(--bpc-tracking-heading);
  line-height: var(--bpc-leading-heading);
}

.bpc-text-slide-body {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-md);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
  max-width: var(--bpc-reading-width);
}

.bpc-text-slide-body p + p { margin-top: var(--bpc-space-4); }

/* ---------- Evidence note ---------- */
.bpc-evidence-note {
  margin-top: var(--bpc-space-6);
  padding: var(--bpc-space-5) var(--bpc-space-6);
  background: var(--bpc-color-navy);
  color: var(--bpc-color-ivory);
  border-left: 2px solid var(--bpc-color-gold);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
}

/* ---------- Self-assessment panel ---------- */
.bpc-self-assessment {
  background: var(--bpc-color-beige);
  border: 1px solid var(--bpc-color-border-soft);
  border-top: 2px solid var(--bpc-color-gold);
  padding: var(--bpc-space-10);
  border-radius: var(--bpc-radius-sm);
}

.bpc-self-assessment-title {
  font-family: var(--bpc-font-heading);
  font-size: var(--bpc-text-xl);
  font-weight: 400;
  color: var(--bpc-color-navy);
  margin: 0 0 var(--bpc-space-4);
  letter-spacing: var(--bpc-tracking-heading);
}

.bpc-self-assessment-intro {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
  margin: 0 0 var(--bpc-space-5);
  max-width: var(--bpc-reading-width);
}

.bpc-self-assessment-instruction {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-gold);
  margin: 0 0 var(--bpc-space-5);
}

.bpc-self-assessment-items {
  list-style: none;
  margin: 0 0 var(--bpc-space-6);
  padding: 0;
  counter-reset: bpc-sa-item;
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-4);
  max-width: var(--bpc-reading-width);
}

.bpc-self-assessment-item {
  counter-increment: bpc-sa-item;
  position: relative;
  padding: var(--bpc-space-4) var(--bpc-space-5) var(--bpc-space-4) var(--bpc-space-12);
  background: var(--bpc-color-ivory-surface);
  border: 1px solid var(--bpc-color-border-soft);
  border-left: 2px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
}

.bpc-self-assessment-item::before {
  content: counter(bpc-sa-item, decimal-leading-zero);
  position: absolute;
  left: var(--bpc-space-5);
  top: var(--bpc-space-4);
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  color: var(--bpc-color-gold);
  font-weight: 600;
}

.bpc-self-assessment-item-label {
  display: block;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-navy);
  font-weight: 600;
  margin-bottom: var(--bpc-space-2);
}

.bpc-self-assessment-item-text {
  display: block;
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
}

.bpc-self-assessment-closing {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
  margin: 0;
  padding-top: var(--bpc-space-4);
  border-top: 1px solid var(--bpc-color-border-soft);
  max-width: var(--bpc-reading-width);
}

/* =============================================================
   Interactive rating exercise — formative, not graded.
   Source : segment-renderer.js renderRatingExercise()
   Opt-in : segment.exercise.type === 'rating-1-to-10' in course-data.js.
   Status : LIVE for S1-08. Reusable for S2-11 / S3-11 / S4-13 / S5-11
            once they adopt their own exercise blocks.
   Visual : Brookville Protocol Private Academy. No bright color, no
            generic SaaS / Rise quiz look, no childish styling. Each
            item is a refined institutional card with a small numeral
            badge, a gold uppercase category label, a navy serif
            question, and a row of 1–10 rating buttons that respond
            to keyboard and mouse with a quiet selected state.
   ============================================================= */

.bpc-self-assessment-exercise {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-6);
  margin-top: var(--bpc-space-3);
}

.bpc-self-assessment-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-5);
}

.bpc-self-assessment-card {
  position: relative;
  margin: 0;
  padding: var(--bpc-space-5) var(--bpc-space-6);
  background: var(--bpc-color-beige);
  border-left: 2px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
}

.bpc-self-assessment-card-meta {
  display: flex;
  align-items: center;
  gap: var(--bpc-space-3);
  margin-bottom: var(--bpc-space-3);
}

/* Small navy numeral badge for the item number. */
.bpc-self-assessment-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--bpc-color-navy);
  border-radius: 50%;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  font-weight: 600;
  color: var(--bpc-color-navy);
  flex: 0 0 auto;
}

.bpc-self-assessment-card-label {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-gold);
  font-weight: 600;
}

.bpc-self-assessment-card-question {
  margin: 0 0 var(--bpc-space-4);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-navy);
}

/* Row of rating buttons. */
.bpc-self-assessment-rating-scale {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bpc-space-2);
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--bpc-space-3);
}

.bpc-self-assessment-rating-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bpc-color-navy);
  border-radius: var(--bpc-radius-sm);
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-sm);
  font-weight: 600;
  color: var(--bpc-color-navy);
  cursor: pointer;
  transition: background var(--bpc-transition-fast),
              color var(--bpc-transition-fast),
              border-color var(--bpc-transition-fast),
              box-shadow var(--bpc-transition-fast);
}

.bpc-self-assessment-rating-button:hover {
  background: rgba(10, 15, 44, 0.08);
}

.bpc-self-assessment-rating-button:focus-visible {
  outline: 2px solid var(--bpc-color-gold);
  outline-offset: 2px;
}

.bpc-self-assessment-rating-button.is-selected,
.bpc-self-assessment-rating-button[aria-pressed="true"] {
  background: var(--bpc-color-navy);
  color: var(--bpc-color-ivory);
  border-color: var(--bpc-color-navy);
  box-shadow: 0 0 0 1px var(--bpc-color-gold-hairline);
}

/* "1 · needs significant work / 10 · excellent" small ends. */
.bpc-self-assessment-scale-bounds {
  display: flex;
  justify-content: space-between;
  gap: var(--bpc-space-3);
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-text-muted);
}

.bpc-self-assessment-scale-bound--max {
  text-align: right;
}

/* Live total panel. Quiet institutional-note feel. */
.bpc-self-assessment-total {
  margin-top: var(--bpc-space-2);
  padding: var(--bpc-space-4) var(--bpc-space-5);
  background: var(--bpc-color-ivory-surface);
  border-left: 2px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
}

.bpc-self-assessment-total-value {
  margin: 0;
  font-family: var(--bpc-font-display);
  font-size: var(--bpc-text-xl);
  letter-spacing: var(--bpc-tracking-heading);
  color: var(--bpc-color-navy);
  line-height: var(--bpc-leading-heading);
}

.bpc-self-assessment-total-status {
  margin: var(--bpc-space-2) 0 0;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-sm);
  color: var(--bpc-color-text-muted);
}

.bpc-self-assessment-total-note {
  margin: var(--bpc-space-2) 0 0;
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
}

/* Optional reflection notes textarea. */
.bpc-self-assessment-reflection {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-2);
}

.bpc-self-assessment-reflection-label {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-gold);
  font-weight: 600;
}

.bpc-self-assessment-reflection-input {
  width: 100%;
  min-height: 90px;
  padding: var(--bpc-space-3) var(--bpc-space-4);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
  background: var(--bpc-color-ivory-surface);
  border: 1px solid var(--bpc-color-border-soft);
  border-radius: var(--bpc-radius-sm);
  resize: vertical;
  transition: border-color var(--bpc-transition-fast), box-shadow var(--bpc-transition-fast);
}

.bpc-self-assessment-reflection-input:focus {
  outline: none;
  border-color: var(--bpc-color-gold);
  box-shadow: 0 0 0 1px var(--bpc-color-gold-hairline);
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
  .bpc-self-assessment-card {
    padding: var(--bpc-space-4) var(--bpc-space-5);
  }
  .bpc-self-assessment-rating-button {
    width: 36px;
    height: 36px;
    font-size: var(--bpc-text-sm);
  }
  .bpc-self-assessment-rating-scale {
    gap: var(--bpc-space-1);
  }
}

/* ---------- Small mobile (≤ 480px) ---------- */
@media (max-width: 480px) {
  .bpc-self-assessment-rating-scale {
    /* Two rows of 5 on small screens, evenly spaced, still tappable. */
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--bpc-space-2);
  }
  .bpc-self-assessment-rating-button {
    width: 100%;
    height: 40px;
  }
  .bpc-self-assessment-scale-bounds {
    flex-wrap: wrap;
  }
  .bpc-self-assessment-total-value {
    font-size: var(--bpc-text-lg);
  }
}

/* ---------- Download panel ---------- */
.bpc-download-panel {
  background: var(--bpc-color-ivory-surface);
  border: 1px solid var(--bpc-color-border-soft);
  border-top: 2px solid var(--bpc-color-gold);
  padding: var(--bpc-space-8) var(--bpc-space-10);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--bpc-space-8);
  border-radius: var(--bpc-radius-sm);
}

.bpc-download-panel-copy {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-3);
  max-width: var(--bpc-reading-width);
}

.bpc-download-panel-title {
  font-family: var(--bpc-font-heading);
  font-size: var(--bpc-text-lg);
  font-weight: 400;
  color: var(--bpc-color-navy);
  margin: 0;
  letter-spacing: var(--bpc-tracking-heading);
}

.bpc-download-panel-text {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
  margin: 0;
  max-width: var(--bpc-reading-width);
}

.bpc-download-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-2);
}

.bpc-download-panel-list-item {
  position: relative;
  padding-left: var(--bpc-space-5);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
}

.bpc-download-panel-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 1px;
  background: var(--bpc-color-gold);
}

.bpc-download-panel-closing {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text-muted);
  margin: var(--bpc-space-2) 0 0;
  font-style: italic;
}

/* =============================================================
   Download-panel — LearnWorlds-style ACTIVITY variant (S5-12)
   -------------------------------------------------------------
   Opted into per segment by adding any of activityLabel /
   subheading / instruction in course-data.js. The base panel
   surface (ivory ground, gold top hairline, navy text) is kept
   intact so the activity sits in the same institutional palette
   as the standard download panels — only the inner copy block
   gains a refined activity treatment.

   No bright colors, no childish radii, no heavy shadows. Pure
   V3 register: deep navy, ivory, soft beige, restrained gold.
   ============================================================= */

/* Slightly heavier gold top hairline + a calm extra hairline at
   the foot of the copy block, so the activity reads as a more
   authoritative LearnWorlds activity rather than a plain
   download. Padding stays in line with base panel rhythm. */
.bpc-download-panel--activity {
  border-top-width: 3px;
}

/* Activity eyebrow chip ("DOWNLOAD LEARNWORLDS ACTIVITY").
   Refined uppercase tracking in restrained gold, matching the
   rail tag and other V3 institutional eyebrows in the course. */
.bpc-download-panel-activity-label {
  margin: 0;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  font-weight: 600;
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-gold);
}

/* Activity subheading ("Nonverbal Presence Self-Assessment").
   Sits between the title and the instruction callout. Navy ink
   on the ivory ground, with a calm gold leading rule that signals
   "this is the formal activity name" without raising visual
   weight above the title. */
.bpc-download-panel-subheading {
  margin: 0;
  padding-left: var(--bpc-space-3);
  border-left: 2px solid var(--bpc-color-gold);
  font-family: var(--bpc-font-heading);
  font-size: var(--bpc-text-base);
  font-weight: 500;
  letter-spacing: var(--bpc-tracking-heading);
  color: var(--bpc-color-navy);
}

/* Instruction callout — surfaces the LearnWorlds-side activity
   prompt verbatim. Soft beige surface (a token quieter than the
   panel's ivory ground), gold leading rule, navy serif body. The
   block is intentionally calm: no shadows, no rounded chrome
   beyond the 4px V3 radius, no heavy borders. */
.bpc-download-panel-instruction {
  margin: var(--bpc-space-2) 0 0;
  padding: var(--bpc-space-4) var(--bpc-space-5);
  background: var(--bpc-color-beige);
  border: 1px solid var(--bpc-color-border-soft);
  border-left: 3px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-navy);
}

.bpc-download-panel-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--bpc-space-3);
  min-width: 220px;
}

/* Dual-action group: holds one button per group (no visible
   helper text beneath). Only emitted by the renderer when
   segment.toolHref is a real http(s) URL — legacy single-button
   download segments (S2-12, S3-12, S4-14, S5-12) bypass this
   wrapper and emit the bare button directly inside
   .bpc-download-panel-actions. */
.bpc-download-panel-action-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.bpc-download-panel-action-group + .bpc-download-panel-action-group {
  margin-top: var(--bpc-space-3);
  /* Calm vertical rhythm between primary tool button and
     secondary workbook button. */
}

/* Optional learner-confirmation block (currently S5-12). Sits
   below the action buttons and provides a single checkbox the
   learner ticks to attest "I have completed and saved my
   Nonverbal Presence Self-Assessment." The component reads /
   writes via BPC.SessionConfirmGate (localStorage-only; no SCORM
   writes). Visual language matches the S0 confirmation block:
   navy soft surface, ivory text, gold accent — so the two
   confirmation patterns feel like one institutional system. */
.bpc-download-panel-confirm {
  margin-top: var(--bpc-space-6);
  padding: var(--bpc-space-4) var(--bpc-space-5);
  background: var(--bpc-color-navy-soft);
  border: 1px solid var(--bpc-color-border-on-navy);
  border-radius: var(--bpc-radius-sm);
}

.bpc-download-panel-confirm-row {
  display: flex;
  align-items: flex-start;
  gap: var(--bpc-space-3);
  cursor: pointer;
}

.bpc-download-panel-confirm-input {
  appearance: auto;
  accent-color: var(--bpc-color-gold);
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.bpc-download-panel-confirm-label {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-ivory);
}

/* Outlined-secondary workbook button used in dual-action mode.
   Inherits .bpc-button base treatment (transparent ground, navy
   border, navy text) — visually quieter than the gold-filled
   primary tool button while preserving the institutional look.
   Class declared as an extension hook; no overrides today. */
.bpc-download-panel-download {
  /* Reserved for future refinement (icon, hairline) without
     changing the inherited bpc-button surface. */
}

.bpc-download-panel-tool {
  /* Reserved for future external-tool indicator (e.g. small
     up-right arrow). Today the textContent + aria-label cover
     the affordance. */
}

/* =============================================================
   LearnWorlds-native activity panel (S6-11)
   Used by segment-renderer.js renderLearnWorldsActivity() for the
   CPD Knowledge Quiz handoff card. The actual graded quiz is
   administered by LearnWorlds OUTSIDE this SCORM module. This
   panel is a SCORM-safe informational handoff only: no quiz, no
   scoring, no pass/fail, no certificate logic.
   Visual system reuses existing BPC tokens (ivory surface, gold
   accent, navy text) so it sits naturally alongside download
   and self-assessment panels.
   ============================================================= */
.bpc-learnworlds-activity {
  background: var(--bpc-color-ivory-surface);
  border: 1px solid var(--bpc-color-border-soft);
  border-top: 2px solid var(--bpc-color-gold);
  padding: var(--bpc-space-8) var(--bpc-space-10);
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-6);
  border-radius: var(--bpc-radius-sm);
}

/* Optional activity-label eyebrow chip ("GRADED ACTIVITY" on
   S6-12). Same refined V3 register as the download panel's
   activity-label chip on S5-12: small, uppercase, gold tracking,
   sitting calmly above the intro copy. The chip is opt-in per
   segment via segment.activityLabel — older payloads that omit
   the field render unchanged. */
.bpc-learnworlds-activity-label {
  margin: 0;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  font-weight: 600;
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-gold);
}

.bpc-learnworlds-activity-intro {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-4);
  max-width: var(--bpc-reading-width);
}

.bpc-learnworlds-activity-text {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
  margin: 0;
  max-width: var(--bpc-reading-width);
}

.bpc-learnworlds-activity-specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--bpc-space-6);
  row-gap: var(--bpc-space-3);
  margin: 0;
  padding: var(--bpc-space-5) var(--bpc-space-6);
  background: var(--bpc-color-ivory);
  border: 1px solid var(--bpc-color-border-soft);
  border-left: 2px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
}

.bpc-learnworlds-activity-spec-label {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-navy);
  font-weight: 600;
  margin: 0;
}

.bpc-learnworlds-activity-spec-value {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
  margin: 0;
}

.bpc-learnworlds-activity-prep {
  padding: var(--bpc-space-4) var(--bpc-space-5);
  background: var(--bpc-color-beige);
  border: 1px solid var(--bpc-color-border-soft);
  border-left: 2px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-2);
}

.bpc-learnworlds-activity-prep-title {
  color: var(--bpc-color-gold);
}

/* ---------- LearnWorlds activity CTA handoff ----------
   Institutional academy handoff panel for the final exam,
   rendered at the bottom of the S6-11 segment. Navy ground,
   ivory text, gold top accent + short gold rule under the
   headline. The CTA control is a button-like element that is
   semantically disabled by default (aria-disabled + disabled,
   no href, no handler, no SCORM write) and switches to a real
   <a target="_blank" rel="noopener"> when segment.cta.href is
   set to a real URL. Disabled-state styling overrides the
   generic .bpc-button "broken disabled" beige look with a
   gold-bordered beacon that reads as a clear destination
   indicator on navy.

   Layout uses an outer panel for breathable padding (40-56px
   adaptive) and an inner wrapper that constrains the readable
   text column to ~720px while letting the navy ground span the
   full segment width. */
.bpc-learnworlds-activity-cta {
  margin-top: var(--bpc-space-4);
  padding: clamp(2.5rem, 4vw, 3.5rem);
  background: var(--bpc-color-navy);
  color: var(--bpc-color-ivory);
  border-radius: var(--bpc-radius-sm);
  border-top: 2px solid var(--bpc-color-gold);
}

.bpc-learnworlds-activity-cta-inner {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bpc-space-6);
}

.bpc-learnworlds-activity-cta-headline {
  font-family: var(--bpc-font-heading);
  font-size: clamp(var(--bpc-text-xl), 2.4vw, var(--bpc-text-2xl));
  font-weight: 400;
  letter-spacing: var(--bpc-tracking-heading);
  line-height: var(--bpc-leading-heading);
  margin: 0;
  color: var(--bpc-color-ivory);
  max-width: 100%;
}

.bpc-learnworlds-activity-cta-divider {
  width: 56px;
  height: 1px;
  background: var(--bpc-color-gold);
  border: none;
  margin: 0;
  /* Sits between headline and body, anchoring the gold accent
     without competing with the panel's top rule. */
}

.bpc-learnworlds-activity-cta-body {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-5);
  width: 100%;
}

.bpc-learnworlds-activity-cta-text {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-ivory);
  margin: 0;
}

.bpc-learnworlds-activity-cta-prep-note {
  /* Composure Protocol reminder, set apart as a subtle inset
     line: gold-hairline left rule + italic body text. No new
     color or shadow introduced; reads as a quiet supporting
     cue, not a third paragraph. */
  width: 100%;
  padding-left: var(--bpc-space-5);
  border-left: 1px solid var(--bpc-color-gold-hairline);
}

.bpc-learnworlds-activity-cta-prep-note .bpc-learnworlds-activity-cta-text {
  font-style: italic;
  opacity: 0.92;
}

.bpc-learnworlds-activity-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bpc-space-3);
  margin-top: var(--bpc-space-4);
  width: 100%;
}

.bpc-learnworlds-activity-cta-button {
  background: transparent;
  color: var(--bpc-color-ivory);
  border-color: var(--bpc-color-gold);
  /* More substantial padding so the CTA feels intentional and
     anchored rather than incidental. Overrides the generic
     .bpc-button compact padding. */
  padding: var(--bpc-space-4) var(--bpc-space-8);
  min-width: 280px;
  letter-spacing: 0.12em;
}

.bpc-learnworlds-activity-cta-button:hover,
.bpc-learnworlds-activity-cta-button:focus-visible {
  background: var(--bpc-color-gold);
  color: var(--bpc-color-navy);
  border-color: var(--bpc-color-gold);
}

/* Disabled / aria-disabled state for the CTA button. This
   overrides the global .bpc-button[disabled] beige washout
   so the institutional CTA still reads as a destination
   beacon (gold border on navy) while signalling non-
   interactivity through cursor:not-allowed and removal of
   hover/focus state changes. */
.bpc-learnworlds-activity-cta-button[disabled],
.bpc-learnworlds-activity-cta-button[aria-disabled="true"] {
  background: transparent;
  color: var(--bpc-color-ivory);
  border-color: var(--bpc-color-gold);
  cursor: not-allowed;
  opacity: 0.92;
}

.bpc-learnworlds-activity-cta-button[disabled]:hover,
.bpc-learnworlds-activity-cta-button[disabled]:focus-visible,
.bpc-learnworlds-activity-cta-button[aria-disabled="true"]:hover,
.bpc-learnworlds-activity-cta-button[aria-disabled="true"]:focus-visible {
  background: transparent;
  color: var(--bpc-color-ivory);
  border-color: var(--bpc-color-gold);
}

.bpc-learnworlds-activity-cta-label {
  /* Override .bpc-meta-label-muted (text-muted) so the small
     "Administered in LearnWorlds" label remains readable on
     the navy CTA panel. Flush-left under the button so it
     reads as an attribute of the button rather than a
     floating note. */
  color: var(--bpc-color-gold);
}

/* Tablet — slightly tighter padding, full reading column. */
@media (max-width: 960px) {
  .bpc-learnworlds-activity-cta {
    padding: var(--bpc-space-10);
  }
  .bpc-learnworlds-activity-cta-inner {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .bpc-learnworlds-activity {
    padding: var(--bpc-space-6);
  }
  .bpc-learnworlds-activity-specs {
    grid-template-columns: 1fr;
    row-gap: var(--bpc-space-2);
  }
  .bpc-learnworlds-activity-spec-value {
    margin-bottom: var(--bpc-space-3);
  }
  .bpc-learnworlds-activity-cta {
    padding: var(--bpc-space-8) var(--bpc-space-6);
  }
  .bpc-learnworlds-activity-cta-inner {
    gap: var(--bpc-space-5);
  }
  .bpc-learnworlds-activity-cta-prep-note {
    padding-left: var(--bpc-space-4);
  }
  .bpc-learnworlds-activity-cta-button {
    min-width: 0;
    width: 100%;
    padding: var(--bpc-space-4) var(--bpc-space-5);
  }
}

/* =============================================================
   Pre-Course Module (S0) — Behavioral Excellence Baseline
   Assessment gateway
   -------------------------------------------------------------
   Visual system: V3 Institutional Seal feel. Deep navy ground,
   ivory text (never pure white), refined gold accents and
   divider, generous breathable padding (40–56px adaptive on
   desktop), 720px inner reading column.

   Reuses the existing .bpc-download-panel-action-group +
   .bpc-button + .bpc-button-primary classes for the dual-action
   footer, with one scoped override: on the navy ground, the
   outlined secondary "Download Workbook" button needs an ivory/
   gold treatment instead of the default navy-on-transparent
   which would be invisible.

   No quiz, no scoring, no certificate logic, no SCORM writes
   are emitted from this panel. The confirmation checkbox
   persists in localStorage via BPC.PreCourseGate.
   ============================================================= */
.bpc-pre-course-module {
  background: var(--bpc-color-navy);
  color: var(--bpc-color-ivory);
  border: 1px solid var(--bpc-color-border-on-navy);
  border-top: 2px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
  padding: clamp(2.75rem, 4vw, 3.75rem);
}

.bpc-pre-course-module-inner {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bpc-space-6);
}

/* 1. Top meta row: tag (gold uppercase label) + secondary label
   pill ("Complete Before Beginning Session 1"). The secondary
   label is the headline visual cue that this is a pre-Session-1
   gateway; copy never references CPD hours, file format, or
   platform mechanics. */
.bpc-pre-course-module-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bpc-space-4);
  width: 100%;
}

.bpc-pre-course-module-tag {
  color: var(--bpc-color-gold);
}

.bpc-pre-course-module-secondary-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-ivory);
  padding: 0.45rem var(--bpc-space-3);
  border: 1px solid var(--bpc-color-gold);
  border-radius: 999px;
  background: transparent;
  white-space: nowrap;
}

/* 2. Headline + gold divider. */
.bpc-pre-course-module-headline {
  font-family: var(--bpc-font-heading);
  font-size: clamp(var(--bpc-text-xl), 2.6vw, var(--bpc-text-2xl));
  font-weight: 400;
  letter-spacing: var(--bpc-tracking-heading);
  line-height: var(--bpc-leading-heading);
  color: var(--bpc-color-ivory);
  margin: 0;
}

.bpc-pre-course-module-divider {
  /* Inherits .bpc-gold-divider styling (64px × 1px gold rule).
     Declared as a hook for per-segment tweaks. */
}

/* 3. Material callout: gold uppercase kicker + serif italic
   material name. Quiet, no border. */
.bpc-pre-course-module-material {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-2);
  width: 100%;
}

.bpc-pre-course-module-material-kicker {
  color: var(--bpc-color-gold);
}

.bpc-pre-course-module-material-name {
  font-family: var(--bpc-font-heading);
  font-size: var(--bpc-text-lg);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--bpc-tracking-heading);
  line-height: var(--bpc-leading-heading);
  color: var(--bpc-color-ivory);
  margin: 0;
}

/* =============================================================
   .bpc-info-tooltip
   -------------------------------------------------------------
   Refined inline information glyph used to clarify abbreviations
   without breaking the line's reading rhythm. Today this is wired
   to the S0 material name to expand "ROI" → "ROI = Return On
   Investment". The visual register intentionally matches the rest
   of the V3 system: gold hairline, ivory glyph, navy ground.
   No emoji, no SaaS-flavoured circle, no shadow.

   Behavior:
     - Hover (desktop)     : tooltip shows.
     - Keyboard focus      : tooltip shows.
     - Tap (touch)         : trigger toggles `.is-open`. A second
                             tap, blur, or Escape key closes it.
   The trigger is a real <button type="button"> so it is fully
   keyboard accessible and uses no `href="#"` and no
   `javascript:void(0)` anywhere. The tooltip text node carries
   role="tooltip" and is the trigger's `aria-describedby` target,
   so assistive tech announces the expansion automatically.
   ============================================================= */
.bpc-info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-inline: 0.25em;
  vertical-align: 0.05em;
  font-style: normal;
  /* Reset any inherited italic/serif styling from the material
     name so the tooltip glyph and bubble read as a quiet meta
     element rather than continuing the headline cadence. */
  letter-spacing: 0;
  line-height: 1;
}

.bpc-info-tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--bpc-color-gold);
  background: transparent;
  border-radius: 999px;
  color: var(--bpc-color-gold);
  font-family: var(--bpc-font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  cursor: pointer;
  transition: background var(--bpc-transition-fast),
              color var(--bpc-transition-fast),
              border-color var(--bpc-transition-fast);
}

.bpc-info-tooltip-trigger:hover,
.bpc-info-tooltip-trigger:focus-visible {
  background: var(--bpc-color-gold);
  color: var(--bpc-color-navy);
  outline: none;
}

.bpc-info-tooltip-trigger:focus-visible {
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35);
}

.bpc-info-tooltip-glyph {
  display: inline-block;
  font-style: italic;
  font-family: var(--bpc-font-heading);
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-0.02em);
}

.bpc-info-tooltip-text {
  position: absolute;
  bottom: calc(100% + 0.55rem);
  left: 50%;
  transform: translate(-50%, 4px);
  z-index: 5;
  white-space: nowrap;
  max-width: min(18rem, 80vw);
  padding: 0.45rem 0.7rem;
  background: var(--bpc-color-navy-darker);
  color: var(--bpc-color-ivory);
  border: 1px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: var(--bpc-leading-ui);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--bpc-transition-fast),
              transform var(--bpc-transition-fast),
              visibility 0s linear var(--bpc-transition-fast);
}

.bpc-info-tooltip:hover .bpc-info-tooltip-text,
.bpc-info-tooltip:focus-within .bpc-info-tooltip-text,
.bpc-info-tooltip.is-open .bpc-info-tooltip-text {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--bpc-transition-fast),
              transform var(--bpc-transition-fast),
              visibility 0s;
}

/* Refined arrow pointing down from the tooltip to the trigger. */
.bpc-info-tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--bpc-color-gold);
}
.bpc-info-tooltip-text::before {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--bpc-color-navy-darker);
  z-index: 1;
}

/* Mobile: clamp tooltip width so it never exceeds the viewport,
   and let it wrap if the abbreviation/definition pair is long. */
@media (max-width: 480px) {
  .bpc-info-tooltip-text {
    white-space: normal;
    max-width: min(16rem, calc(100vw - 2.5rem));
  }
}

/* 4. Important callout: gold-bordered inset banner. */
.bpc-pre-course-module-important {
  display: block;
  width: 100%;
  padding: var(--bpc-space-3) var(--bpc-space-5);
  border: 1px solid var(--bpc-color-gold);
  border-left-width: 3px;
  border-radius: var(--bpc-radius-sm);
  background: rgba(212, 175, 55, 0.06);
}

.bpc-pre-course-module-important-text {
  color: var(--bpc-color-gold);
}

/* 5. Workbook purpose paragraph. */
.bpc-pre-course-module-intro {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-ivory);
  margin: 0;
  max-width: 100%;
}

/* 6. Structured Part A / Part B sections. Each section is a
   gold-hairline left-rule article with a serif heading, a quiet
   uppercase meta line, and a body paragraph. */
.bpc-pre-course-module-sections {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-5);
  width: 100%;
}

.bpc-pre-course-module-section {
  padding-left: var(--bpc-space-5);
  border-left: 1px solid var(--bpc-color-gold-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-2);
}

.bpc-pre-course-module-section-heading {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-sm);
  font-weight: 600;
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-gold);
  margin: 0;
}

.bpc-pre-course-module-section-meta {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-ivory);
  opacity: 0.7;
  margin: 0;
}

.bpc-pre-course-module-section-body {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-ivory);
  margin: 0;
}

/* 7. Closing narrative paragraphs. Plain body text, generous
   vertical rhythm. */
.bpc-pre-course-module-narrative {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-4);
  width: 100%;
}

.bpc-pre-course-module-narrative-text {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-ivory);
  margin: 0;
}

/* 8. Final diagnostic note — italic gold-hairline inset. */
.bpc-pre-course-module-final-note {
  width: 100%;
  padding-left: var(--bpc-space-5);
  border-left: 1px solid var(--bpc-color-gold-hairline);
}

.bpc-pre-course-module-final-note-text {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-ivory);
  font-style: italic;
  opacity: 0.92;
  margin: 0;
}

/* 9. Dual-action footer overrides on navy ground.
   Reuses .bpc-download-panel-actions / .bpc-download-panel-
   action-group from the shared dual-button refactor. The default
   .bpc-button outlined treatment is invisible on navy; the
   secondary workbook button is re-skinned ivory-on-navy with a
   gold border to match the LearnWorlds CTA institutional feel. */
.bpc-pre-course-module-actions {
  width: 100%;
  min-width: 0;
  margin-top: var(--bpc-space-2);
}

.bpc-pre-course-module .bpc-download-panel-download {
  background: transparent;
  color: var(--bpc-color-ivory);
  border-color: var(--bpc-color-gold);
}

.bpc-pre-course-module .bpc-download-panel-download:hover,
.bpc-pre-course-module .bpc-download-panel-download:focus-visible {
  background: var(--bpc-color-gold);
  color: var(--bpc-color-navy);
  border-color: var(--bpc-color-gold);
}

/* 10. Confirmation checkbox. Custom-styled for institutional
   feel: ivory border on navy ground, gold accent. Real
   <input type="checkbox"> retained for native keyboard / screen-
   reader support — no fake aria checkbox. */
.bpc-pre-course-module-confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--bpc-space-3);
  width: 100%;
  padding: var(--bpc-space-4) var(--bpc-space-5);
  background: var(--bpc-color-navy-soft);
  border: 1px solid var(--bpc-color-border-on-navy);
  border-radius: var(--bpc-radius-sm);
}

.bpc-pre-course-module-confirm-input {
  /* Native checkbox repainted in the brand palette. accent-color
     is widely supported and avoids the need for custom JS. */
  appearance: auto;
  accent-color: var(--bpc-color-gold);
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.bpc-pre-course-module-confirm-label {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-ivory);
  cursor: pointer;
}

/* 11. Begin The Program CTA — final gate-locked button. Disabled
   until the confirmation checkbox is ticked. Filled gold-on-navy
   when enabled; quiet ivory-on-transparent with cursor not-allowed
   when disabled (matches the LearnWorlds CTA disabled treatment).
   The button does NOT carry visible helper text; tooltip is set
   in JS. */
.bpc-pre-course-module-cta {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: var(--bpc-space-2);
}

.bpc-pre-course-module-cta-button {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-sm);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  padding: var(--bpc-space-4) var(--bpc-space-8);
  min-width: 240px;
}

.bpc-pre-course-module-cta-button[disabled],
.bpc-pre-course-module-cta-button[aria-disabled="true"] {
  background: transparent;
  color: var(--bpc-color-ivory);
  border: 1px solid var(--bpc-color-gold-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.bpc-pre-course-module-cta-button[disabled]:hover,
.bpc-pre-course-module-cta-button[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--bpc-color-ivory);
  border-color: var(--bpc-color-gold-muted);
}

@media (max-width: 960px) {
  .bpc-pre-course-module {
    padding: var(--bpc-space-10);
  }
  .bpc-pre-course-module-inner {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .bpc-pre-course-module {
    padding: var(--bpc-space-8) var(--bpc-space-6);
  }
  .bpc-pre-course-module-inner {
    gap: var(--bpc-space-5);
  }
  .bpc-pre-course-module-meta-row {
    gap: var(--bpc-space-3);
  }
  .bpc-pre-course-module-actions .bpc-button {
    width: 100%;
    min-width: 0;
  }
  .bpc-pre-course-module-confirm {
    padding: var(--bpc-space-4);
  }
  .bpc-pre-course-module-cta {
    justify-content: stretch;
  }
  .bpc-pre-course-module-cta-button {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- Pre-Course Module — Brookville ornament overrides ----
   Reuses the V3 .bpc-slide-ornament + .bpc-slide-ornament-img
   structure (same helper, same image, same fallback glyph). The
   .bpc-pre-course-module-inner column is align-items:flex-start,
   so we explicitly center the ornament with align-self instead of
   relying on the default 0-auto margin used by V3 slides. The
   ornament reads at ~54-72px desktop / ~44-56px mobile and at
   0.85 opacity so it presents as a refined institutional seal
   rather than a loud logo. */
.bpc-pre-course-module .bpc-slide-ornament--centerpiece {
  align-self: center;
  margin: 0;
}

.bpc-pre-course-module .bpc-slide-ornament--centerpiece .bpc-slide-ornament-img {
  width: clamp(54px, 6vw, 72px);
  opacity: 0.85;
}

.bpc-pre-course-module .bpc-slide-ornament--centerpiece .bpc-slide-ornament-fallback {
  font-size: clamp(2rem, 5vw, 3rem);
  opacity: 0.85;
  color: var(--bpc-color-gold);
}

@media (max-width: 720px) {
  .bpc-pre-course-module .bpc-slide-ornament--centerpiece .bpc-slide-ornament-img {
    width: clamp(44px, 12vw, 56px);
  }
  .bpc-pre-course-module .bpc-slide-ornament--centerpiece .bpc-slide-ornament-fallback {
    font-size: clamp(1.5rem, 8vw, 2.25rem);
  }
}

/* ---------- Pre-Course Module animation choreography ----------
   Reuses the V3 text-slide animation language. The keyframes
   themselves (bpc-slide-title-in, bpc-slide-body-in,
   bpc-slide-line-grow, bpc-slide-ornament-in) are defined later
   in the V3 slide block — we only add the per-element delay
   staircase scoped to .bpc-pre-course-module so the same motion
   vocabulary is reused without duplicating keyframes.

   Choreography (calm, refined, single 0–2.6s staircase):
     0ms     meta row (tag + secondary pill)
     200ms   Brookville ornament (fade + subtle scale 0.92→1)
     350ms   headline
     700ms   gold divider (line-grow, left origin)
     900ms   material callout
     1050ms  important callout
     1250ms  intro paragraph
     1400ms  Part A section
     1540ms  Part B section
     1680ms  narrative #1 (before snapshot)
     1820ms  narrative #2 (post-course reassessment)
     1960ms  narrative #3 (90-day pulse)
     2120ms  final diagnostic note
     2280ms  action buttons row
     2430ms  confirmation block
     2580ms  Begin The Program CTA

   The panel itself does NOT animate — it appears immediately,
   matching the V3 text-slide rule that the slide stage is
   present from frame 0. Re-entry to S0 from another session
   re-mounts the entire panel (the segment renderer creates fresh
   DOM nodes), so the staircase plays from the start every time
   the learner navigates back to S0.

   The ornament arrives BEFORE the headline because the seal sits
   above the headline in the visual stack — fading in the seal
   first reads as "institutional seal lands → official heading
   lands underneath", consistent with the V3 Institutional Seal
   choreography even though V3 text-slides position the
   centerpiece between the title and divider rather than above
   the title. */

.bpc-pre-course-module .bpc-slide-anim {
  opacity: 0;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
  will-change: opacity, transform;
}

.bpc-pre-course-module .bpc-pcm-anim--meta {
  animation: bpc-slide-body-in 700ms ease-out 0ms both;
}

.bpc-pre-course-module .bpc-pcm-anim--ornament {
  /* Same fade + scale as V3 ornament arrival, slightly earlier
     in the staircase so the seal lands before the heading. */
  animation: bpc-slide-ornament-in 900ms ease-out 200ms both;
}

.bpc-pre-course-module .bpc-pcm-anim--headline {
  animation: bpc-slide-title-in 800ms ease-out 350ms both;
}

.bpc-pre-course-module .bpc-pcm-anim--divider {
  /* Left-origin line grow — reads as a refined pen-stroke under
     the headline. The V3 slide divider uses center origin; here
     left origin matches the left-aligned reading column. */
  transform-origin: left center;
  animation: bpc-slide-line-grow 700ms ease-out 700ms both;
}

.bpc-pre-course-module .bpc-pcm-anim--material {
  animation: bpc-slide-body-in 700ms ease-out 900ms both;
}

.bpc-pre-course-module .bpc-pcm-anim--important {
  animation: bpc-slide-body-in 700ms ease-out 1050ms both;
}

.bpc-pre-course-module .bpc-pcm-anim--intro {
  animation: bpc-slide-body-in 700ms ease-out 1250ms both;
}

/* Part A / Part B sections — staggered via :nth-of-type. Each
   article is a direct child of .bpc-pre-course-module-sections,
   so :nth-of-type counts the article siblings. */
.bpc-pre-course-module .bpc-pcm-anim--section {
  animation: bpc-slide-body-in 700ms ease-out 1400ms both;
}
.bpc-pre-course-module .bpc-pcm-anim--section:nth-of-type(2) {
  animation-delay: 1540ms;
}

/* Three narrative paragraphs — staggered via :nth-of-type within
   .bpc-pre-course-module-narrative. */
.bpc-pre-course-module .bpc-pcm-anim--narrative {
  animation: bpc-slide-body-in 700ms ease-out 1680ms both;
}
.bpc-pre-course-module .bpc-pcm-anim--narrative:nth-of-type(2) {
  animation-delay: 1820ms;
}
.bpc-pre-course-module .bpc-pcm-anim--narrative:nth-of-type(3) {
  animation-delay: 1960ms;
}
/* Defensive fallback: any 4th+ narrative paragraph holds at the
   :nth(3) delay so future content additions never collide with
   the action-row reveal. */
.bpc-pre-course-module .bpc-pcm-anim--narrative:nth-of-type(n+4) {
  animation-delay: 1960ms;
}

.bpc-pre-course-module .bpc-pcm-anim--final-note {
  animation: bpc-slide-body-in 700ms ease-out 2120ms both;
}

.bpc-pre-course-module .bpc-pcm-anim--actions {
  animation: bpc-slide-body-in 700ms ease-out 2280ms both;
}

.bpc-pre-course-module .bpc-pcm-anim--confirm {
  animation: bpc-slide-body-in 700ms ease-out 2430ms both;
}

.bpc-pre-course-module .bpc-pcm-anim--cta {
  animation: bpc-slide-body-in 700ms ease-out 2580ms both;
}

/* Reduced-motion guard — mirrors the V3 slide guard. Skips the
   entire staircase, snaps every element to its resting state
   (opacity 1, no transform) with no animation. The ornament,
   which uses the V3 fade + scale 0.92→1 keyframe, also resolves
   to opacity:1 / transform:none here. */
@media (prefers-reduced-motion: reduce) {
  .bpc-pre-course-module .bpc-slide-anim {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Completion panel ---------- */
.bpc-completion-panel {
  margin-top: var(--bpc-space-12);
  padding: var(--bpc-space-10);
  background: var(--bpc-color-navy);
  color: var(--bpc-color-ivory);
  border-radius: var(--bpc-radius-sm);
  text-align: center;
}

.bpc-completion-panel-title {
  font-family: var(--bpc-font-heading);
  font-size: var(--bpc-text-xl);
  font-weight: 400;
  margin: 0 0 var(--bpc-space-3);
  letter-spacing: var(--bpc-tracking-heading);
}

.bpc-completion-panel-text {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  margin: 0 auto var(--bpc-space-6);
  max-width: var(--bpc-reading-width);
}

/* ---------- Institutional Value Driver (Volume 2 Appendix A) ----------
   Source : course-data.js segment.valueLens
            ({ valueDriver, primaryMetric, secondaryMetric })
   Render : segment-renderer.js renderValueLens(segment)
   Flag   : BPC.SHOW_VALUE_LENS (currently TRUE)
   Status : LIVE for learner-facing release. The renderer emits the
            kicker + value-driver headline, then a small "Develops:"
            tail line listing the primary and secondary metrics with
            their full institutional names + abbreviations. The
            .bpc-value-lens-grid, .bpc-value-lens-item, and
            .bpc-value-lens-term classes below are kept for potential
            future re-activation of the full metric panel; they are
            not rendered today.
   Visual direction:
     - restrained institutional note (NOT a panel-of-three)
     - ivory / soft beige surface
     - thin gold left rule
     - small uppercase sans-serif kicker
     - serif value text in navy
     - quiet "Develops:" metric tail line, lower visual weight than
       the value driver itself
     - no dashboard / metric cards / gamification / bright colors
   Placement (video segments): after the video frame and BEFORE the
   Executive Briefing (transcript) accordion.
   Placement (non-video segments): after the main segment content. */
.bpc-value-lens {
  display: block;
  background: var(--bpc-color-beige-surface);
  border-left: 2px solid var(--bpc-color-gold);
  /* Vertical padding reduced ~20% (space-5 -> space-4) to make the
     panel sit more quietly under the Executive Briefing. */
  padding: var(--bpc-space-4) var(--bpc-space-6);
  border-radius: 0 var(--bpc-radius-sm) var(--bpc-radius-sm) 0;
  color: var(--bpc-color-navy);
}

.bpc-value-lens-kicker {
  display: block;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-gold);
  font-weight: 600;
  margin-bottom: var(--bpc-space-3);
}

.bpc-value-lens-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bpc-space-2);
  margin: 0;
}

.bpc-value-lens-item {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  align-items: baseline;
  gap: var(--bpc-space-4);
}

.bpc-value-lens-term {
  margin: 0;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-text-muted);
  font-weight: 600;
}

.bpc-value-lens-value {
  margin: 0;
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-navy);
}

/* "Develops:" tail line under the value driver. Quiet, lower visual
   weight than the headline. The label is rendered as a small uppercase
   gold marker; the metric list reads as muted body text. */
.bpc-value-lens-metrics {
  margin: var(--bpc-space-2) 0 0;
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-sm);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text-muted);
}

.bpc-value-lens-metrics-label {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  color: var(--bpc-color-gold);
  font-weight: 600;
  margin-right: var(--bpc-space-1);
}

.bpc-value-lens-metrics-list {
  font-family: var(--bpc-font-body);
  color: var(--bpc-color-text);
}

/* ===========================================================
   Metric info chip + tooltip (BPC.MetricInfo)
   -----------------------------------------------------------
   A reusable inline chip used wherever a BPC performance
   metric (BFI, DPR, ECS, TVS) is displayed. Renders the metric
   name followed by a small circular "i" button. Hovering,
   focusing, or tapping the button reveals a refined tooltip
   above the icon with the canonical metric definition.

   Visibility is driven by three CSS conditions on the wrapper:
     :hover                 — pointer users
     :focus-within          — keyboard users
     [data-bpc-tooltip-open]— click / touch toggle (managed by
                              metric-info.js)
   This keeps pointer + keyboard interactions purely CSS-driven
   for a fast, native feel; JS only owns the click-toggle path,
   the Escape handler, and the outside-tap close.

   Tooltip styling matches the institutional register: ivory
   surface, navy text, gold top accent, hairline soft border,
   no SaaS-tooltip vibe and no heavy animation.
   =========================================================== */

.bpc-metric-with-info {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  position: relative;
  white-space: nowrap;
}

.bpc-metric-name {
  /* Inherit color and font from the parent context (e.g. the
     value-lens metrics list) so the chip blends seamlessly into
     existing typographic hierarchies. */
}

.bpc-metric-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0 0 0 6px;
  padding: 0;
  border: 1px solid var(--bpc-color-navy);
  border-radius: 50%;
  background: var(--bpc-color-ivory-surface);
  color: var(--bpc-color-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  flex: 0 0 auto;
  vertical-align: baseline;
  position: relative;
  top: 1px;
}

.bpc-metric-info-glyph {
  display: inline-block;
  line-height: 1;
  pointer-events: none;
}

.bpc-metric-info:hover {
  border-color: var(--bpc-color-gold);
  color: var(--bpc-color-gold);
}

.bpc-metric-info:focus-visible {
  outline: none;
  border-color: var(--bpc-color-gold);
  color: var(--bpc-color-gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.30);
}

.bpc-metric-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 50;
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 10px 14px;
  background: var(--bpc-color-ivory-surface);
  color: var(--bpc-color-navy);
  border: 1px solid var(--bpc-color-border-soft);
  border-top: 2px solid var(--bpc-color-gold);
  border-radius: 2px;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(10, 15, 44, 0.10);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}

/* Small triangle pointing down from the tooltip toward the icon. */
.bpc-metric-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: var(--bpc-color-ivory-surface) transparent transparent transparent;
}

.bpc-metric-tooltip-title {
  display: block;
  font-family: var(--bpc-font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--bpc-color-navy);
  font-weight: 700;
  margin: 0 0 4px;
}

.bpc-metric-tooltip-body {
  display: block;
  font-family: var(--bpc-font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--bpc-color-text);
  font-weight: 400;
}

/* Visibility — pointer hover, keyboard focus, or click-toggle. */
.bpc-metric-with-info:hover > .bpc-metric-tooltip,
.bpc-metric-with-info:focus-within > .bpc-metric-tooltip,
.bpc-metric-with-info[data-bpc-tooltip-open="true"] > .bpc-metric-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 0s;
}

@media (max-width: 480px) {
  .bpc-metric-tooltip {
    max-width: min(240px, calc(100vw - 24px));
    font-size: 12px;
    padding: 9px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bpc-metric-tooltip {
    transition: none;
    transform: translateX(-50%);
  }
  .bpc-metric-with-info:hover > .bpc-metric-tooltip,
  .bpc-metric-with-info:focus-within > .bpc-metric-tooltip,
  .bpc-metric-with-info[data-bpc-tooltip-open="true"] > .bpc-metric-tooltip {
    transform: translateX(-50%);
  }
  .bpc-metric-info { transition: none; }
}

/* ===========================================================
   Institutional Value Driver kicker row + Framework Key trigger
   -----------------------------------------------------------
   The "INSTITUTIONAL VALUE DRIVER" label sits inline with a
   refined circular "i" trigger button. The icon must stay
   directly after the word DRIVER — never floating to the
   right edge of the value-lens block. To achieve that the
   row is set to inline-flex with width: auto so it collapses
   to its content; the inner kicker span drops its standalone
   block display + bottom margin (those move up to the row);
   and a small negative margin compensates for the kicker's
   letter-spacing right-bearing so the gap reads consistently
   ~6–7 px in print-quality output.

   This row is the locked reusable system for every Course 1A
   Institutional Value Driver block (Sessions 1–6). All future
   value-lens blocks in course-data.js get the same icon and
   the same Brookville Framework Key modal automatically via
   segment-renderer.js > renderValueLens(); no per-block setup
   is required.
   =========================================================== */

.bpc-value-lens-kicker-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: auto;
  margin-bottom: var(--bpc-space-3);
  flex-wrap: wrap;
  max-width: 100%;
}

/* Override the standalone kicker styles when the kicker is a
   child of the row. The block + margin-bottom belonged to the
   pre-row layout where the kicker was the only first-line
   element; they are now owned by the row. */
.bpc-value-lens-kicker-row > .bpc-value-lens-kicker {
  display: inline-block;
  margin: 0;
  /* Pull the icon back by the kicker's trailing letter-spacing
     "ghost" so the visual gap between the final R in DRIVER
     and the icon matches the intended ~6–7 px design value
     instead of reading as a stretched gap on letter-spaced
     uppercase labels. */
  margin-right: calc(var(--bpc-tracking-label) * -1);
}

.bpc-framework-info-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bpc-color-navy);
  border-radius: 50%;
  background: var(--bpc-color-ivory-surface);
  color: var(--bpc-color-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  flex: 0 0 auto;
  vertical-align: baseline;
}

.bpc-framework-info-trigger-glyph {
  display: inline-block;
  line-height: 1;
  pointer-events: none;
}

.bpc-framework-info-trigger:hover {
  border-color: var(--bpc-color-gold);
  color: var(--bpc-color-gold);
}

.bpc-framework-info-trigger:focus-visible {
  outline: none;
  border-color: var(--bpc-color-gold);
  color: var(--bpc-color-gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.30);
}

/* ===========================================================
   Brookville Framework Key — modal panel
   -----------------------------------------------------------
   A single shared overlay rendered into <body> by metric-info.js
   on first open. The panel is centered on desktop and stretches
   responsively on mobile, with an ivory surface, gold top accent,
   and hairline section dividers. The two definition sections
   render as two-column grids on desktop (term left, definition
   right) and stack on mobile.
   =========================================================== */

.bpc-framework-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  overflow-y: auto;
}

.bpc-framework-overlay[hidden] {
  display: none !important;
}

.bpc-framework-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 44, 0.45);
  cursor: pointer;
}

.bpc-framework-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  margin: auto;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3.2vw, 36px);
  background: var(--bpc-color-ivory);
  border: 1px solid var(--bpc-color-border-soft);
  border-top: 3px solid var(--bpc-color-gold);
  border-radius: 2px;
  box-shadow: 0 18px 60px rgba(10, 15, 44, 0.20);
  font-family: var(--bpc-font-body);
  color: var(--bpc-color-text);
  text-align: left;
  outline: none;
  animation: bpc-framework-fade-in 200ms ease;
}

@keyframes bpc-framework-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bpc-framework-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
  margin-bottom: 14px;
}

.bpc-framework-titleblock {
  min-width: 0;
}

.bpc-framework-eyebrow {
  display: block;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bpc-color-gold);
  font-weight: 700;
  margin-bottom: 4px;
}

.bpc-framework-title {
  margin: 0;
  font-family: var(--bpc-font-body);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 600;
  color: var(--bpc-color-navy);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.bpc-framework-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--bpc-color-border-soft);
  background: transparent;
  color: var(--bpc-color-text-muted);
  border-radius: 50%;
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  flex: 0 0 auto;
}

.bpc-framework-close-glyph { display: inline-block; line-height: 1; pointer-events: none; }

.bpc-framework-close:hover {
  border-color: var(--bpc-color-gold);
  color: var(--bpc-color-navy);
}

.bpc-framework-close:focus-visible {
  outline: none;
  border-color: var(--bpc-color-gold);
  color: var(--bpc-color-navy);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.30);
}

.bpc-framework-divider {
  border: 0;
  border-top: 1px solid var(--bpc-color-gold-hairline);
  margin: 0 0 22px;
}

.bpc-framework-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.bpc-framework-section-title {
  margin: 0 0 14px;
  font-family: var(--bpc-font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--bpc-color-navy);
  letter-spacing: 0.01em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bpc-color-gold-hairline);
}

.bpc-framework-section-sub {
  font-style: italic;
  font-weight: 400;
  color: var(--bpc-color-text-muted);
  font-size: 0.92rem;
}

/* Two-column definition list: term left, definition right. The
   row uses display: contents so its <dt>/<dd> children become
   direct grid children, which lets us draw a clean per-row
   dotted hairline by giving each cell a matching bottom border. */
.bpc-framework-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) 1fr;
  column-gap: 24px;
  row-gap: 0;
}

.bpc-framework-row {
  display: contents;
}

.bpc-framework-term,
.bpc-framework-def {
  margin: 0;
  padding: 12px 0;
  font-family: var(--bpc-font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  border-bottom: 1px dotted rgba(10, 15, 44, 0.14);
}

.bpc-framework-term {
  font-weight: 700;
  color: var(--bpc-color-navy);
  letter-spacing: 0.01em;
}

.bpc-framework-def {
  color: var(--bpc-color-text);
}

.bpc-framework-row:last-child .bpc-framework-term,
.bpc-framework-row:last-child .bpc-framework-def {
  border-bottom: 0;
}

.bpc-framework-ornament {
  text-align: center;
  font-size: 14px;
  color: var(--bpc-color-gold);
  margin-top: 6px;
  letter-spacing: 0.4em;
  user-select: none;
}

@media (max-width: 640px) {
  .bpc-framework-overlay {
    padding: 12px 10px;
  }
  .bpc-framework-panel {
    padding: 22px 20px 24px;
  }
  .bpc-framework-list {
    display: block;
  }
  .bpc-framework-row {
    display: block;
    padding: 10px 0;
    border-bottom: 1px dotted rgba(10, 15, 44, 0.14);
  }
  .bpc-framework-row:last-child { border-bottom: 0; }
  .bpc-framework-term,
  .bpc-framework-def {
    display: block;
    border-bottom: 0;
    padding: 0;
  }
  .bpc-framework-term { padding-bottom: 4px; }
  .bpc-framework-section-title { font-size: 1rem; }
  .bpc-framework-body { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .bpc-framework-panel { animation: none; }
  .bpc-framework-info-trigger,
  .bpc-framework-close { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .bpc-text-slide { padding: var(--bpc-space-8) var(--bpc-space-5); }
  .bpc-action-block { padding: var(--bpc-space-5); }
  .bpc-self-assessment { padding: var(--bpc-space-6); }
  .bpc-self-assessment-item {
    padding-left: var(--bpc-space-10);
  }
  .bpc-self-assessment-item::before {
    left: var(--bpc-space-4);
  }
  .bpc-download-panel {
    grid-template-columns: 1fr;
    padding: var(--bpc-space-6) var(--bpc-space-5);
  }
  .bpc-download-panel-actions {
    min-width: 0;
  }
  .bpc-completion-panel { padding: var(--bpc-space-8) var(--bpc-space-5); }
  .bpc-button { width: 100%; min-width: 0; }
  .bpc-nav-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .bpc-nav-controls-end {
    flex-direction: column;
  }
  .bpc-value-lens {
    padding: var(--bpc-space-3) var(--bpc-space-5);
  }
  .bpc-value-lens-item {
    grid-template-columns: 1fr;
    gap: var(--bpc-space-1);
  }
}

/* =============================================================
   Coded animated text-slide — Brookville Institutional Seal.
   Source           : segment-renderer.js renderInstitutionalSlide()
   Activation gate  : isInstitutionalSlide(segment) === true
   Scope            : type === 'text-slide' (all sessions).
                      Session 1: S1-02, S1-04, S1-06, S1-09.
                      Session 2: S2-01, S2-03, S2-05, S2-07, S2-09.
                      Future sessions (S3, S4, S5) pick this design
                      up automatically as their text slides are added.
   Status           : canonical text-slide design for the entire course.
                      The earlier 3-version prototype review (V1 Eve
                      Reference, V2 Academy Editorial, V3 Institutional
                      Seal) was retired after Eve approved V3.
   Visual standard  : Brookville Protocol Private Academy.
                      Deep navy panel, oversized brand watermark behind
                      the type, visible centerpiece ornament between
                      title and divider, large uppercase serif title in
                      ivory with wide letter-spacing, thin gold divider,
                      ivory centered body. No card shadow, no SaaS
                      gradient, no playful motion.
   Animation        : staged fade-in choreography defined below; auto-
                      replays whenever a slide mounts (segment-renderer
                      rebuilds DOM on every navigation), and is fully
                      disabled by the prefers-reduced-motion guard.
   ============================================================= */

/* Outer slide panel. */
.bpc-slide {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--bpc-radius-sm);
  isolation: isolate;
  background: var(--bpc-color-navy-darker);
}

/* The slide stage — content is centered. */
.bpc-slide-stage {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(var(--bpc-space-10), 8vw, var(--bpc-space-20)) clamp(var(--bpc-space-6), 6vw, var(--bpc-space-16));
  min-height: clamp(360px, 56vw, 560px);
}

.bpc-slide-title {
  margin: 0 0 var(--bpc-space-6);
  color: var(--bpc-color-ivory);
  font-family: var(--bpc-font-heading);
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: var(--bpc-leading-heading);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.bpc-slide-ornament {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.bpc-slide-ornament-img {
  display: block;
  height: auto;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.bpc-slide-ornament-fallback {
  font-family: var(--bpc-font-display);
  color: var(--bpc-color-gold);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
}

/* Oversized brand watermark behind everything. */
.bpc-slide-ornament--seal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: -1;
}

.bpc-slide-ornament--seal .bpc-slide-ornament-img {
  width: clamp(260px, 42vw, 440px);
  height: auto;
  opacity: 0.08;
  filter: drop-shadow(0 0 1px rgba(212, 175, 55, 0.3));
}

.bpc-slide-ornament--seal .bpc-slide-ornament-fallback {
  font-size: clamp(8rem, 22vw, 14rem);
  opacity: 0.08;
  color: var(--bpc-color-gold);
}

/* Visible centerpiece seal — sits between the title and the divider. */
.bpc-slide-ornament--centerpiece {
  margin: 0 auto var(--bpc-space-5);
}

.bpc-slide-ornament--centerpiece .bpc-slide-ornament-img {
  width: clamp(72px, 8vw, 96px);
  height: auto;
}

.bpc-slide-divider {
  display: block;
  width: clamp(56px, 9vw, 112px);
  height: 1px;
  background: var(--bpc-color-gold);
  margin: 0 auto var(--bpc-space-6);
  transform-origin: center;
}

.bpc-slide-body {
  margin: 0 auto;
  max-width: var(--bpc-reading-width);
  font-family: var(--bpc-font-body);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-ivory);
  font-size: clamp(var(--bpc-text-base), 1.5vw, var(--bpc-text-md));
}

.bpc-slide-body-p {
  margin: 0 0 var(--bpc-space-4);
}

.bpc-slide-body-p:last-child {
  margin-bottom: 0;
}

/* ---------- Animation primitives ----------
   Each animated sub-element starts hidden and fades to its resting
   state via a per-element animation declaration below. Resting
   styles live on the elements themselves so nothing in the wider
   stylesheet can override the choreography (no display:none, no
   transition shortcuts, no opacity collisions).

   Sequence (approved):
     1. slide panel appears immediately (no panel-level animation)
     2. title          800ms ease-out 0ms      both  (fade + slight upward translate)
     3. ornament       900ms ease-out 450ms    both  (fade + scale 0.92 -> 1)
     4. divider        700ms ease-out 600ms    both  (scaleX 0 -> 1, center origin)
     5. body p1        700ms ease-out 900ms    both
     6. body p2        700ms ease-out 1050ms   both
     7. body p3        700ms ease-out 1200ms   both
   The watermark seal also fades in slowly (1.4s) from the moment the
   slide mounts, behind everything else. */

.bpc-slide-anim {
  opacity: 0;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
  will-change: opacity, transform;
}

/* =============================================================
   Closing-message panel (S6-11)
   -------------------------------------------------------------
   Long-form V3 institutional close. Deep navy ground, ivory
   body (NEVER pure white), restrained gold divider, generous
   reading rhythm. Reuses the V3 entrance keyframes so the visual
   language matches the canonical text-slide system, with a
   calmer cascade appropriate for a multi-paragraph close. The
   prefers-reduced-motion guard at the foot of this block snaps
   every animated element to its resting state.
   ============================================================= */
.bpc-closing-message {
  background: var(--bpc-color-navy-darker);
  border: 1px solid var(--bpc-color-gold-muted);
  border-top: 2px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
  padding: clamp(var(--bpc-space-10), 5vw, var(--bpc-space-16))
           clamp(var(--bpc-space-6), 4vw, var(--bpc-space-12));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bpc-closing-message-stage {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-6);
}

.bpc-closing-message-title {
  font-family: var(--bpc-font-heading);
  font-size: clamp(var(--bpc-text-lg), 2.4vw, 1.5rem);
  font-weight: 400;
  letter-spacing: var(--bpc-tracking-heading);
  color: var(--bpc-color-ivory);
  margin: 0;
  line-height: 1.25;
}

.bpc-closing-message-divider {
  border: 0;
  height: 1px;
  width: 64px;
  background: var(--bpc-color-gold);
  margin: 0;
  opacity: 0.85;
  transform-origin: left;
}

.bpc-closing-message-body {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-5);
  margin-top: var(--bpc-space-2);
}

.bpc-closing-message-text {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: 1.7;
  color: var(--bpc-color-ivory);
  margin: 0;
}

/* Learner Action block on the closing message — refined inset
   with a gold leading rule on the dark ground. Inherits the
   shared .bpc-action-block label / multi-paragraph treatment
   (uppercase LEARNER ACTION label, no visible "What to Do Now"
   subtitle, paragraph splitter) from renderActionBlock(). Only
   the colors and the leading rule are overridden here so the
   block reads correctly against navy. */
.bpc-closing-message-action.bpc-action-block {
  margin-top: var(--bpc-space-6);
  background: var(--bpc-color-navy-soft);
  border: 1px solid var(--bpc-color-border-on-navy);
  border-left: 3px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
  padding: var(--bpc-space-6) var(--bpc-space-6);
}

.bpc-closing-message-action .bpc-action-block-label {
  color: var(--bpc-color-gold);
}

.bpc-closing-message-action .bpc-action-block-text {
  color: var(--bpc-color-ivory);
  line-height: 1.7;
}

/* V3 entrance choreography for the closing-message panel.
   Calm staircase: title -> divider -> body paragraphs (cascading
   delay) -> learner action. Same keyframes as the canonical
   text-slide system so the visual language stays consistent. */
.bpc-closing-message .bpc-slide-anim--title {
  animation: bpc-slide-title-in 800ms ease-out 0ms both;
}

.bpc-closing-message .bpc-slide-anim--divider {
  animation: bpc-slide-line-grow 700ms ease-out 250ms both;
}

.bpc-closing-message .bpc-slide-anim--body-p {
  animation: bpc-slide-body-in 700ms ease-out 450ms both;
}
.bpc-closing-message .bpc-slide-anim--body-p:nth-of-type(2) { animation-delay: 600ms; }
.bpc-closing-message .bpc-slide-anim--body-p:nth-of-type(3) { animation-delay: 750ms; }
.bpc-closing-message .bpc-slide-anim--body-p:nth-of-type(4) { animation-delay: 900ms; }
.bpc-closing-message .bpc-slide-anim--body-p:nth-of-type(n+5) { animation-delay: 1050ms; }

.bpc-closing-message-action.bpc-slide-anim {
  animation: bpc-slide-body-in 700ms ease-out 1200ms both;
}

@media (prefers-reduced-motion: reduce) {
  .bpc-closing-message .bpc-slide-anim,
  .bpc-closing-message-action.bpc-slide-anim {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@keyframes bpc-slide-title-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bpc-slide-body-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bpc-slide-ornament-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes bpc-slide-line-grow {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@keyframes bpc-slide-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Per-element choreography. */
.bpc-slide .bpc-slide-anim--title {
  animation: bpc-slide-title-in 800ms ease-out 0ms both;
}

.bpc-slide .bpc-slide-anim--ornament {
  animation: bpc-slide-ornament-in 900ms ease-out 450ms both;
}

.bpc-slide .bpc-slide-anim--divider {
  transform-origin: center;
  animation: bpc-slide-line-grow 700ms ease-out 600ms both;
}

.bpc-slide .bpc-slide-anim--body-p {
  animation: bpc-slide-body-in 700ms ease-out 900ms both;
}

.bpc-slide .bpc-slide-anim--body-p:nth-child(2) {
  animation-delay: 1050ms;
}

.bpc-slide .bpc-slide-anim--body-p:nth-child(3) {
  animation-delay: 1200ms;
}

/* Defensive fallback for slides with > 3 body paragraphs — anything
   past the third paragraph stays at 1350ms so it never collides with
   the ornament reveal. */
.bpc-slide .bpc-slide-anim--body-p:nth-child(n+4) {
  animation-delay: 1350ms;
}

/* Watermark fade-in (separate from the staged sequence). */
.bpc-slide .bpc-slide-ornament--seal {
  opacity: 0;
  animation: bpc-slide-fade-in 1400ms ease-out 0ms forwards;
}

/* ---------- Reduced motion guard ----------
   When the OS prefers reduced motion, skip the entire staged
   choreography. Animated elements snap to their resting state with
   no transform and no fade. The watermark seal resolves to its
   resting low opacity instantly. */
@media (prefers-reduced-motion: reduce) {
  .bpc-slide .bpc-slide-anim,
  .bpc-slide .bpc-slide-ornament--seal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .bpc-slide .bpc-slide-ornament--seal {
    opacity: 0.08 !important;
  }
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
  .bpc-slide-stage {
    padding: var(--bpc-space-10) var(--bpc-space-5);
    min-height: 320px;
  }
  .bpc-slide-ornament--seal .bpc-slide-ornament-img {
    width: clamp(200px, 56vw, 280px);
  }
  .bpc-slide-ornament--centerpiece .bpc-slide-ornament-img {
    width: clamp(64px, 14vw, 84px);
  }
}

/* ---------- Small mobile (≤ 480px) ---------- */
@media (max-width: 480px) {
  .bpc-slide-stage {
    padding: var(--bpc-space-8) var(--bpc-space-4);
    min-height: 280px;
  }
  .bpc-slide-title {
    font-size: 1.5rem;
    letter-spacing: 0.10em;
  }
}

/* =============================================================
   Interactive guided-audit exercise — formative, not graded.
   Source : segment-renderer.js renderGuidedAudit()
   Opt-in : segment.exercise.type === 'guided-audit' in
            course-data.js (see S2-11).
   Status : LIVE for S2-11. Reusable for any future workbook-style
            audit exercise that opts in with the same exercise
            data shape (contexts, subsystems, scaleMin/Max,
            protocolFields, etc.).
   Visual contract — match S1-08 polish exactly:
     The S1-08 rating exercise renders one beige card per question
     (.bpc-self-assessment-card) with a 2px gold left rule, a small
     navy numeral badge, a gold uppercase item label, and a row of
     1-10 rating buttons. To make S2-11 read as the same family,
     the guided-audit follows the same pattern at the STEP level:
     each step is one beige card with a 2px gold left rule and an
     identical badge + label header.
     CRITICAL: do NOT nest ivory cards inside the beige step card.
     Step 1, Step 2, Step 3 and Step 5 use HAIRLINE-DIVIDED
     SECTIONS inside the step card, not inner ivory cards. This
     matches S1-08's "one card, clean content inside" rhythm and
     prevents the cards-within-cards visual noise that made the
     previous revision feel like a raw form.
     The reference example (.bpc-guided-audit-example) is the one
     intentional sub-panel — it is informational content, not part
     of the form, so a contrasting ivory surface is the correct
     visual signal.
     The closing note reuses .bpc-self-assessment-total /
     .bpc-self-assessment-total-note from S1-08 (no new classes).
   What this section does NOT do:
     - No SCORM scoring, no completion gate, no certificate hook.
     - No bright colors, no heavy shadows, no SaaS dashboard
       chrome, no childish quiz styling, no pure-white text.
   ============================================================= */

/* ---------- Outer wrapper ---------- */
.bpc-guided-audit {
  display: block;
  margin-top: var(--bpc-space-2);
}

.bpc-guided-audit-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-6);
}

/* ---------- Step card ----------
   One beige card per step with a 2px gold left rule, dimensions
   and surface treatment chosen to read as a sibling of the
   .bpc-self-assessment-card used by S1-08. The padding scale
   matches S1-08's --bpc-space-5 / --bpc-space-6 register. */
.bpc-guided-audit-step {
  position: relative;
  margin: 0;
  padding: var(--bpc-space-6);
  background: var(--bpc-color-beige);
  border-left: 2px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
}

.bpc-guided-audit-step-header {
  display: flex;
  align-items: center;
  gap: var(--bpc-space-3);
  margin-bottom: var(--bpc-space-4);
}

/* Navy outlined numeric badge — pixel-identical to S1-08's
   .bpc-self-assessment-card-num so the two exercises read as a
   matched set. */
.bpc-guided-audit-step-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--bpc-color-navy);
  border-radius: 50%;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  font-weight: 600;
  color: var(--bpc-color-navy);
  background: transparent;
}

/* Gold uppercase step label — matches .bpc-self-assessment-card-
   label exactly. */
.bpc-guided-audit-step-label {
  margin: 0;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bpc-color-gold);
  line-height: var(--bpc-leading-ui);
}

/* Step description — matches .bpc-self-assessment-card-question
   typography (navy serif body). */
.bpc-guided-audit-step-description {
  display: block;
  margin: 0 0 var(--bpc-space-5);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-navy);
}

.bpc-guided-audit-step-body {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-5);
}

/* Block-level prompt label (Step 4). Real <label for=...> for
   accessibility; visually a paragraph at the same scale as the
   step description. */
.bpc-guided-audit-prompt-label {
  display: block;
  margin: 0 0 var(--bpc-space-3);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-navy);
}

/* ---------- Shared input + textarea surface ----------
   Uses --bpc-color-ivory-surface against the beige step card so
   the input visibly reads as an input. Border, focus and
   placeholder treatment mirror S1-08's
   .bpc-self-assessment-reflection-input contract. */
.bpc-guided-audit-field-input,
.bpc-guided-audit-subsystem-input,
.bpc-guided-audit-priority-input,
.bpc-guided-audit-protocol-input {
  display: block;
  width: 100%;
  padding: var(--bpc-space-3) var(--bpc-space-4);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
  background: var(--bpc-color-ivory-surface);
  border: 1px solid var(--bpc-color-border-soft);
  border-radius: var(--bpc-radius-sm);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--bpc-transition-fast), box-shadow var(--bpc-transition-fast);
}

.bpc-guided-audit-subsystem-input,
.bpc-guided-audit-priority-input,
.bpc-guided-audit-protocol-input {
  resize: none;
}

.bpc-guided-audit-field-input:focus,
.bpc-guided-audit-subsystem-input:focus,
.bpc-guided-audit-priority-input:focus,
.bpc-guided-audit-protocol-input:focus {
  outline: none;
  border-color: var(--bpc-color-gold);
  box-shadow: 0 0 0 1px var(--bpc-color-gold-hairline);
}

.bpc-guided-audit-field-input::placeholder,
.bpc-guided-audit-subsystem-input::placeholder,
.bpc-guided-audit-priority-input::placeholder,
.bpc-guided-audit-protocol-input::placeholder {
  color: var(--bpc-color-text-muted);
  opacity: 0.7;
  font-style: normal;
}

/* ---------- Step 1 — context sections ----------
   Each context (A, B, C) is a HAIRLINE-DIVIDED SECTION inside the
   step card, NOT a nested ivory card. The gold "CONTEXT A"
   eyebrow + navy serif prompt + ivory input read as a clean
   row, with a thin border-top hairline tying each context to the
   next. */
.bpc-guided-audit-field {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-2);
  padding: var(--bpc-space-4) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--bpc-color-border-soft);
  border-radius: 0;
}

.bpc-guided-audit-field:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.bpc-guided-audit-field:last-of-type {
  padding-bottom: 0;
}

.bpc-guided-audit-field-label {
  display: inline-block;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bpc-color-gold);
}

.bpc-guided-audit-field-prompt {
  margin: 0;
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-navy);
}

/* ---------- Steps 2 + 3 — context sections ----------
   Same hairline-divided-section approach as Step 1. The "context
   card" classnames are kept for backward DOM compatibility but
   their visual treatment is now SECTION, not card. */
.bpc-guided-audit-context-stack {
  display: flex;
  flex-direction: column;
}

.bpc-guided-audit-context-card,
.bpc-guided-audit-rating-context {
  padding: var(--bpc-space-5) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--bpc-color-border-soft);
  border-radius: 0;
}

.bpc-guided-audit-context-stack > .bpc-guided-audit-context-card:first-of-type,
.bpc-guided-audit-context-stack > .bpc-guided-audit-rating-context:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.bpc-guided-audit-context-stack > .bpc-guided-audit-context-card:last-of-type,
.bpc-guided-audit-context-stack > .bpc-guided-audit-rating-context:last-of-type {
  padding-bottom: 0;
}

/* "CONTEXT A" gold uppercase eyebrow — same scale as the step
   label so all gold uppercase text in the audit reads as one
   typographic system. */
.bpc-guided-audit-context-card-title {
  margin: 0 0 var(--bpc-space-2);
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bpc-color-gold);
}

/* Optional saved-context subtitle: shows whatever the learner
   typed for that context in Step 1, so they can rate against
   their own definition. Restrained italic-muted line. */
.bpc-guided-audit-context-card-subtitle {
  margin: 0 0 var(--bpc-space-4);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-sm);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text-muted);
  font-style: italic;
}

/* Step 2 subsystem rows: label-left + textarea-right on desktop,
   stacked on mobile. Wider label column so longer labels like
   "ORAL PRESENCE" never wrap. */
.bpc-guided-audit-subsystem-field {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: start;
  column-gap: var(--bpc-space-5);
  row-gap: var(--bpc-space-2);
  padding-top: var(--bpc-space-3);
  padding-bottom: var(--bpc-space-3);
}

.bpc-guided-audit-subsystem-field + .bpc-guided-audit-subsystem-field {
  border-top: 1px dashed var(--bpc-color-border-soft);
}

.bpc-guided-audit-subsystem-label {
  align-self: center;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bpc-color-navy);
}

.bpc-guided-audit-subsystem-input {
  min-height: 56px;
}

/* ---------- Step 3 rating rows ---------- */

.bpc-guided-audit-rating-row {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-3);
  padding-top: var(--bpc-space-4);
  padding-bottom: var(--bpc-space-4);
}

.bpc-guided-audit-rating-row + .bpc-guided-audit-rating-row {
  border-top: 1px dashed var(--bpc-color-border-soft);
}

.bpc-guided-audit-rating-row-label {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bpc-color-navy);
}

/* The rating buttons are unchanged from S1-08
   (.bpc-self-assessment-rating-button); only spacing tweaks
   live here. */
.bpc-guided-audit-rating-scale {
  margin-bottom: 0;
}

/* ---------- Progress note ----------
   Two-line institutional note. The kicker line uses the same
   gold uppercase token as every other label in the audit; the
   value line uses navy serif. Same surface treatment as
   .bpc-self-assessment-total. */
.bpc-guided-audit-progress {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-1);
  margin-top: var(--bpc-space-2);
  padding: var(--bpc-space-4) var(--bpc-space-5);
  background: var(--bpc-color-ivory-surface);
  border-left: 2px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
}

.bpc-guided-audit-progress-label {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bpc-color-gold);
}

.bpc-guided-audit-progress-value {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-navy);
}

/* ---------- Step 4 priority gap ----------
   Full-width, comfortable height, no resize handle. */
.bpc-guided-audit-priority-input {
  min-height: 110px;
}

/* ---------- Step 5 protocol builder ----------
   The protocol builder is a single hairline-divided section
   inside the step card (NOT a nested ivory card) so it follows
   the same visual rhythm as Steps 1, 2, and 3. All 4 fields
   stack full-width; the 30-day plan textarea is taller. */
.bpc-guided-audit-protocol {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-4);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.bpc-guided-audit-protocol-field {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-2);
  min-width: 0;
  padding-bottom: var(--bpc-space-4);
  border-bottom: 1px dashed var(--bpc-color-border-soft);
}

.bpc-guided-audit-protocol-field:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* The wide modifier is kept for renderer compatibility but no
   longer triggers a column-spanning grid; in the stacked layout
   every field is full-width by default. */
.bpc-guided-audit-protocol-field--wide {
  /* nothing required */
}

.bpc-guided-audit-protocol-label {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bpc-color-gold);
}

.bpc-guided-audit-protocol-input--tall {
  min-height: 140px;
}

/* ---------- Reference example sub-panel ----------
   This IS an inner ivory panel — intentionally distinct from the
   editable form. Same surface treatment and gold left rule as
   the closing note (.bpc-self-assessment-total). */
.bpc-guided-audit-example {
  margin: var(--bpc-space-4) 0 0;
  padding: var(--bpc-space-4) var(--bpc-space-5);
  background: var(--bpc-color-ivory-surface);
  border-left: 2px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
}

.bpc-guided-audit-example-kicker {
  display: block;
  margin-bottom: var(--bpc-space-2);
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bpc-color-gold);
}

.bpc-guided-audit-example-context {
  margin: 0 0 var(--bpc-space-3);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-sm);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text-muted);
}

.bpc-guided-audit-example-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.bpc-guided-audit-example-list li {
  position: relative;
  padding-left: var(--bpc-space-5);
  margin-bottom: var(--bpc-space-2);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-sm);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-navy);
}

.bpc-guided-audit-example-list li::before {
  content: '\25C6';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--bpc-color-gold);
  font-size: 0.75em;
  line-height: var(--bpc-leading-body);
}

.bpc-guided-audit-example-list li:last-child {
  margin-bottom: 0;
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
  .bpc-guided-audit-step {
    padding: var(--bpc-space-5);
  }
  .bpc-guided-audit-example {
    padding: var(--bpc-space-4);
  }
  /* Stack subsystem label above its textarea. */
  .bpc-guided-audit-subsystem-field {
    grid-template-columns: 1fr;
    row-gap: var(--bpc-space-2);
  }
  .bpc-guided-audit-subsystem-label {
    align-self: start;
  }
}

/* ---------- Small mobile (≤ 480px) ---------- */
@media (max-width: 480px) {
  .bpc-guided-audit-step {
    padding: var(--bpc-space-4);
  }
  .bpc-guided-audit-step-num {
    width: 24px;
    height: 24px;
    font-size: 0.6875rem;
  }
  .bpc-guided-audit-step-description,
  .bpc-guided-audit-prompt-label {
    font-size: var(--bpc-text-sm);
  }
  .bpc-guided-audit-priority-input {
    min-height: 100px;
  }
  .bpc-guided-audit-protocol-input--tall {
    min-height: 120px;
  }
}

/* =============================================================
   Wardrobe Architecture (S3-11)
   -------------------------------------------------------------
   Source: segment-renderer.js renderWardrobeArchitecture().
   Visual contract: shares the polished S2-11 guided-audit
   language for step shells, context cards, protocol fields and
   the progress bar. Only the Step 0 "context mapping" percent
   rows and Step 4 "priority card" tweaks are unique to S3-11
   and live in this block. Palette, typography, focus states,
   and motion all come from existing tokens — no new values are
   introduced. The .bpc-wardrobe-architecture wrapper class is
   added by the renderer so future overrides can scope cleanly
   without affecting S2-11.
   ============================================================= */

/* ---------- Step 0 — context percentage rows ----------
   Each row places the context label + sublabel on the left and
   the small numeric input + % suffix on the right. On mobile
   the row stacks so the input never feels cramped. */
.bpc-wardrobe-percent-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-3);
  padding: var(--bpc-space-4) 0;
  border-top: 1px solid var(--bpc-color-border-soft);
  border-bottom: 1px solid var(--bpc-color-border-soft);
}

.bpc-wardrobe-percent-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--bpc-space-4);
  padding: var(--bpc-space-2) 0;
}

.bpc-wardrobe-percent-row + .bpc-wardrobe-percent-row {
  border-top: 1px dashed var(--bpc-color-border-soft);
}

.bpc-wardrobe-percent-label-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bpc-wardrobe-percent-sublabel {
  margin: 0;
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-sm);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text-muted);
}

.bpc-wardrobe-percent-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--bpc-space-1);
}

.bpc-wardrobe-percent-input {
  width: 5.5rem;
  padding: var(--bpc-space-2) var(--bpc-space-3);
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text);
  background: var(--bpc-color-ivory-surface);
  border: 1px solid var(--bpc-color-border-soft);
  border-radius: var(--bpc-radius-sm);
  text-align: right;
  transition: border-color var(--bpc-transition-fast), box-shadow var(--bpc-transition-fast);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.bpc-wardrobe-percent-input::-webkit-outer-spin-button,
.bpc-wardrobe-percent-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bpc-wardrobe-percent-input:focus {
  outline: none;
  border-color: var(--bpc-color-gold);
  box-shadow: 0 0 0 1px var(--bpc-color-gold-hairline);
}

.bpc-wardrobe-percent-input::placeholder {
  color: var(--bpc-color-text-muted);
  opacity: 0.7;
  font-style: normal;
}

.bpc-wardrobe-percent-suffix {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-sm);
  color: var(--bpc-color-text-muted);
  font-weight: 500;
}

.bpc-wardrobe-percent-total {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-1);
  margin-top: var(--bpc-space-3);
  padding: var(--bpc-space-3) var(--bpc-space-5);
  background: var(--bpc-color-ivory-surface);
  border-left: 2px solid var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
}

.bpc-wardrobe-percent-total-label {
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bpc-color-gold);
}

.bpc-wardrobe-percent-total-value {
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-navy);
}

/* Off-target nudge — appears only when the live total is not 100. */
.bpc-wardrobe-percent-notice {
  margin: var(--bpc-space-2) 0 0;
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-sm);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-text-muted);
  font-style: italic;
}

/* ---------- Step 4 — priority cards ----------
   Reuse the audit context-card chrome but tighten interior
   spacing because each priority card carries five fields rather
   than three subsystem rows. */
.bpc-wardrobe-priority-stack {
  /* No deviation from .bpc-guided-audit-context-stack today; the
     class exists so future spacing tweaks remain scoped to S3-11
     priority cards without touching S2-11 audit cards. */
}

.bpc-wardrobe-priority-card .bpc-guided-audit-context-card-title {
  /* Slightly tighter title margin so the field stack reads as
     part of one visual unit. */
  margin-bottom: var(--bpc-space-3);
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
  .bpc-wardrobe-percent-row {
    grid-template-columns: 1fr;
    row-gap: var(--bpc-space-2);
    align-items: stretch;
  }
  .bpc-wardrobe-percent-input-wrap {
    justify-content: flex-start;
  }
  .bpc-wardrobe-percent-input {
    width: 100%;
    text-align: left;
  }
}

/* =============================================================
   Exercise summary download — formative learner-owned record.
   Source : segment-renderer.js renderExerciseDownloadButton()
   Module : exercise-summary.js openPrintableSummary()
   Status : LIVE for S1-08 (rating-1-to-10) and S2-11 (guided-
            audit). Reusable for any future formative exercise
            (S3-11, S4-13, S5-11) — the renderer appends this
            block to every interactive exercise.
   Visual : Refined institutional outline button. Restrained
            navy-on-ivory rest state, navy fill on hover, gold
            focus ring. Matches the BPC academic register and
            does not compete with the .bpc-button navigation
            controls in the segment frame.
   Contract : This button never submits data, never writes to
              SCORM, never contacts LearnWorlds. See
              exercise-summary.js for the full contract.
   ============================================================= */

.bpc-exercise-download {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bpc-space-2);
  margin-top: var(--bpc-space-6);
  padding-top: var(--bpc-space-5);
  border-top: 1px solid var(--bpc-color-border-soft);
}

.bpc-exercise-download-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--bpc-space-2);
  padding: 0.625rem 1.25rem;
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bpc-color-navy);
  background: var(--bpc-color-ivory-surface);
  border: 1px solid var(--bpc-color-navy);
  border-radius: var(--bpc-radius-sm);
  cursor: pointer;
  transition: background var(--bpc-transition-fast),
              color var(--bpc-transition-fast),
              border-color var(--bpc-transition-fast),
              box-shadow var(--bpc-transition-fast);
}

.bpc-exercise-download-button:hover {
  background: var(--bpc-color-navy);
  color: var(--bpc-color-ivory);
  border-color: var(--bpc-color-navy);
}

.bpc-exercise-download-button:focus-visible {
  outline: none;
  border-color: var(--bpc-color-gold);
  box-shadow: 0 0 0 2px var(--bpc-color-gold-hairline);
}

.bpc-exercise-download-button::before {
  content: '\2913'; /* downwards arrow to bar — print/save indicator */
  display: inline-block;
  font-size: 0.95em;
  line-height: 1;
}

.bpc-exercise-download-hint {
  margin: 0;
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-sm);
  font-style: italic;
  color: var(--bpc-color-text-muted);
  line-height: var(--bpc-leading-body);
}

/* ---------- Mobile (≤ 480px) ---------- */
@media (max-width: 480px) {
  .bpc-exercise-download-button {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
  }
}