/* =============================================================
   session.css
   Session header polish, segment frame, segment-type variants,
   and segment state indicators.
   ============================================================= */

.bpc-session-shell {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-10);
}

.bpc-session-header {
  border-bottom: 1px solid var(--bpc-color-border-soft);
  padding-bottom: var(--bpc-space-6);
}

.bpc-session-header-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);
  margin: 0 0 var(--bpc-space-3);
}

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

.bpc-session-header-meta {
  margin: var(--bpc-space-3) 0 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);
}

/* Session-level dominant Value Driver note (CPD Handover requirement).
   Rendered once at the top of the session header, below the duration
   meta and above the first segment. Visually mirrors the segment-level
   Institutional Value Driver note (`.bpc-value-lens`) so the two layers
   feel like a single design system: soft beige surface + thin gold
   left rule + small uppercase gold label + serif navy value. No card
   shadow, no rounded blob, no SaaS/dashboard look.
   The element carries the [hidden] attribute when
   session.dominantValueDriver is missing in course-data.js, so this
   rule is dormant for sessions that have not been mapped yet. */
.bpc-session-driver {
  display: block;
  margin: var(--bpc-space-5) 0 0;
  padding: var(--bpc-space-3) var(--bpc-space-5);
  background: var(--bpc-color-beige-surface);
  border-left: 2px solid var(--bpc-color-gold);
  border-radius: 0 var(--bpc-radius-sm) var(--bpc-radius-sm) 0;
  color: var(--bpc-color-navy);
}

.bpc-session-driver[hidden] { display: none; }

.bpc-session-driver-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-gold);
  font-weight: 600;
  margin-bottom: var(--bpc-space-2);
}

.bpc-session-driver-value {
  display: block;
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-navy);
}

/* =============================================================
   .bpc-session-guidance
   -------------------------------------------------------------
   Session-level learner guidance note. A single refined V3
   institutional line that sits below the session-header meta
   row and above the first segment. Populated by app.js from
   session.guidance in course-data.js. Currently authored for
   Session 1 only; any other session that omits the field stays
   visually unchanged because the <p> remains [hidden].
   Visual register intentionally mirrors the segment-level
   `.bpc-value-lens` callout: soft beige inset surface, thin
   gold leading rule, serif navy body, no shadow, no rounded
   pill, no SaaS-flavoured chip. No learner-facing copy ever
   names the LMS platform — phrasing is owned by course-data.js.
   ============================================================= */
.bpc-session-guidance {
  display: block;
  margin: var(--bpc-space-5) 0 0;
  padding: var(--bpc-space-4) var(--bpc-space-5);
  background: var(--bpc-color-beige-surface);
  border-left: 2px solid var(--bpc-color-gold);
  border-radius: 0 var(--bpc-radius-sm) var(--bpc-radius-sm) 0;
  font-family: var(--bpc-font-body);
  font-size: var(--bpc-text-base);
  line-height: var(--bpc-leading-body);
  color: var(--bpc-color-navy);
}

.bpc-session-guidance[hidden] { display: none; }

/* ---------- Segment frame ---------- */
.bpc-segment-frame {
  display: flex;
  flex-direction: column;
  gap: var(--bpc-space-5);
}

.bpc-segment-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--bpc-space-3);
  flex-wrap: wrap;
  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-segment-id-chip {
  /* Internal segment ID. Hidden from learners by default.
     The ID is still preserved on the segment frame via
     [data-segment-id] for SCORM, debugging, and packaging.
     Shown when <body data-bpc-debug="true"> (set by ?debug=1 URL). */
  display: none;
  align-items: center;
  padding: 2px var(--bpc-space-2);
  border: 1px solid var(--bpc-color-gold-muted);
  color: var(--bpc-color-gold);
  border-radius: var(--bpc-radius-sm);
  font-family: var(--bpc-font-ui);
  font-size: var(--bpc-text-xs);
  letter-spacing: var(--bpc-tracking-label);
}

[data-bpc-debug="true"] .bpc-segment-id-chip {
  display: inline-flex;
}

/* Generic helper: only render in developer/debug mode.
   Used by the footer "LMS Mode: ..." badge. */
.bpc-debug-only { display: none; }
[data-bpc-debug="true"] .bpc-debug-only { display: inline; }

.bpc-segment-duration,
.bpc-segment-speaker {
  color: var(--bpc-color-text-muted);
}

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

/* ---------- Segment state indicators ---------- */
.bpc-segment-state-current { color: var(--bpc-color-navy); }
.bpc-segment-state-completed { color: var(--bpc-color-success); }
.bpc-segment-state-locked { color: var(--bpc-color-text-muted); opacity: 0.6; }

/* ---------- Segment-type variants (rhythm tweaks) ---------- */
.bpc-segment-frame[data-segment-type="video-eve"],
.bpc-segment-frame[data-segment-type="video-maya"] { gap: var(--bpc-space-6); }
.bpc-segment-frame[data-segment-type="text-slide"] { gap: var(--bpc-space-4); }
.bpc-segment-frame[data-segment-type="self-assessment"] { gap: var(--bpc-space-6); }
.bpc-segment-frame[data-segment-type="download"] { gap: var(--bpc-space-5); }

@media (max-width: 768px) {
  .bpc-session-header-title { font-size: var(--bpc-text-2xl); }
  .bpc-segment-title { font-size: var(--bpc-text-xl); }
}