/* ============================================================================
   Scene layer: the student loop as three moments with one job each.
   Brief (dossier) -> Conversation (chat) -> Debrief (how it went).

   Scoped to body[data-experience="scene"], which renderShell() sets for the
   student role only. Instructor and admin consoles keep the base stylesheet.
   Decisions behind this layer: no live climate band during the conversation,
   no timer, example openers only before the first message, prototype palette.
   ========================================================================== */

body[data-experience="scene"] {
  --porcelain: #EEF1F3;
  --paper: #F7F9FA;
  --surface: #FFFFFF;
  --ink: #18232C;
  --ink-2: #2F3E49;
  --ink-3: #4C5B66;
  --rule: #D7DEE3;
  --rule-2: #E3E8EC;
  --maroon: #6E1E3A;
  --maroon-press: #571630;
  --cool: #3A5A78;
  --warm: #E0A32E;
  --bubble-you: #20303C;
  --you: #6E1E3A;
  --you-dark: #571630;
  --you-soft: #F7ECF0;
  --other: #3A5A78;
  --other-soft: #E8EEF3;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-radius: 18px;
  --sc-shadow: 0 22px 60px -28px rgba(18, 35, 48, 0.55);
  /* Three steps, not the eight that had accumulated. Tight for anything that
     reads as typed or printed, medium for controls, wide for the surfaces the
     column sits on. */
  --r-tight: 4px;
  --r-control: 12px;
  --r-surface: 20px;
  background:
    radial-gradient(1200px 700px at 50% -10%, #F3F6F7 0%, var(--porcelain) 55%, #E4E9EC 100%);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---- The column ---------------------------------------------------------- */

.sc {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.sc-more {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.sc-more > * {
  width: 100%;
  max-width: 100%;
}

.sc-kicker {
  font-size: 12px;
  color: var(--maroon);
  font-weight: 600;
  margin: 6px 0 0;
  letter-spacing: 0.01em;
}

.sc-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 29px);
  line-height: 1.16;
  margin: 6px 0 2px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.sc-sub,
.sc-lead {
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 20px;
}

/* ---- Buttons: one primary, one ghost, one text ---------------------------- */

.sc-cta {
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: inherit;
  background: var(--maroon);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 15px;
  min-height: 44px;
  border-radius: var(--r-control);
  transition: background 0.18s ease, transform 0.05s ease;
}

.sc-cta:hover { background: var(--maroon-press); }
.sc-cta:active { transform: translateY(1px); }
.sc-cta:disabled { opacity: 0.45; cursor: default; transform: none; }
.sc-cta.ghost { background: #fff; color: var(--maroon); border: 1.5px solid var(--maroon); }
.sc-cta.ghost:hover { background: #FBF3F5; }
.sc-cta.sc-cta-sm { width: auto; padding: 10px 14px; font-size: 13.5px; border-radius: 11px; }

.sc-text-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-3);
  padding: 8px 6px;
  min-height: 44px;
  border-radius: 8px;
}

.sc-text-btn:hover { color: var(--maroon); background: #F2F5F6; }

body[data-experience="scene"] :focus-visible {
  outline: 3px solid rgba(110, 30, 58, 0.4);
  outline-offset: 2px;
}

/* ---- Brief: the dossier -------------------------------------------------- */

.sc-brief { padding-bottom: 8px; }

.sc-dossier {
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px 16px 6px;
  margin-bottom: 18px;
}

.sc-who {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 12px;
}

/* A monogram plate, not a tinted chip. Initials dropped into a filled gradient
   square is the house style of every AI chat product, and it told the student
   nothing about who Anna is. A hairline rule and serif initials on paper read
   the way the rest of the system already speaks: a personnel record. */
.sc-avatar,
.sc-av {
  border-radius: var(--r-tight);
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--cool);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  flex: 0 0 auto;
  position: relative;
}

/* The rule under the initials is the one mark that carries over from the
   dossier: the same serif-italic maroon label used for every fact. */
.sc-avatar::after,
.sc-av::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6px;
  width: 16px;
  height: 1px;
  background: var(--maroon);
  opacity: 0.55;
}

.sc-avatar { width: 50px; height: 50px; font-size: 18px; }
.sc-av { width: 40px; height: 40px; font-size: 14px; }
.sc-av::after { bottom: 5px; width: 12px; }

.sc-who h3 { margin: 0; font-size: 16px; font-weight: 600; }
.sc-who p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }

.sc-facts {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.sc-facts li {
  padding: 11px 2px;
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.45;
  display: flex;
  gap: 10px;
}

.sc-facts li:last-child { border-bottom: none; }

.sc-facts .lbl {
  font-family: var(--serif);
  font-style: italic;
  color: var(--maroon);
  flex: 0 0 96px;
  font-size: 13px;
}

.sc-facts .val { color: var(--ink); }

.sc-objective {
  background: #FBF6F3;
  border: 1px solid #EAD9D0;
  border-radius: 12px;
  padding: 13px 15px;
  margin-bottom: 18px;
}

.sc-objective .lbl,
.sc-two .lbl {
  font-size: 12px;
  color: var(--maroon);
  font-weight: 600;
  margin-bottom: 4px;
}

.sc-objective p { margin: 0; font-size: 14px; line-height: 1.5; }

.sc-objective-kind {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.sc-secondary-objective {
  border-top: 1px solid #EAD9D0;
  margin-top: 12px;
  padding-top: 11px;
}

/* The "Keep in view" facts, restyled as compact chips inside the column. */
.sc-brief .stakes-strip { margin: 0 0 18px; }
.sc-brief .stakes-strip .keyline { border: none; padding: 0; margin: 0 0 8px; }
.sc-brief .stakes-strip .label { font-size: 12px; color: var(--maroon); font-weight: 600; letter-spacing: 0; text-transform: none; font-family: var(--sans); }
.sc-brief .stakes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-brief .stake-chip {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 9px 11px;
  display: grid;
  gap: 2px;
  box-shadow: none;
}
.sc-brief .stake-chip span { font-size: 12px; color: var(--ink-3); }
.sc-brief .stake-chip strong { font-size: 13px; font-weight: 600; line-height: 1.35; }

.sc-brief .pi-woven { font-size: 12px; color: var(--ink-3); margin: 12px 0 0; text-align: center; }

/* ---- Conversation: the chat ----------------------------------------------- */

.sc-chat {
  background: var(--paper);
  border-radius: var(--r-surface);
  border: 1px solid rgba(24, 35, 44, 0.08);
  box-shadow: var(--sc-shadow), 0 0 0 1px rgba(24, 35, 44, 0.04);
  display: flex;
  flex-direction: column;
  height: min(78vh, 760px);
  min-height: 480px;
  overflow: hidden;
}

.sc-chat-head {
  flex: 0 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: 10px 14px 10px 16px;
}

/* The three goals, always visible above the conversation. Quiet enough to
   ignore once they are known, present enough that nobody has to remember
   them: two thirds of the first class never named the impact. One line on a
   laptop, wrapping to two on a phone, and it costs the message area nothing
   it was using. */
.sc-task-strip {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0;
  padding: 7px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  line-height: 1.35;
}

.sc-task-strip > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sc-task-strip strong {
  font-weight: 600;
  color: var(--ink-2);
}

.sc-task-strip strong + strong::before {
  content: '·';
  margin-right: 14px;
  color: var(--ink-3);
  font-weight: 400;
}

.sc-row { display: flex; align-items: center; gap: 11px; }
.sc-id { min-width: 0; }
.sc-name { margin: 0; font-size: 15px; font-weight: 600; font-family: var(--sans); line-height: 1.2; }
.sc-pres { font-size: 12px; color: var(--ink-3); margin-top: 1px; min-height: 14px; }
.sc-head-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.sc-finish {
  border: 1.5px solid var(--maroon);
  background: var(--surface);
  color: var(--maroon);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 13px;
  min-height: 44px;
  border-radius: var(--r-control);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.sc-finish:hover:not(:disabled) { background: var(--maroon); color: #fff; }
.sc-finish:disabled { opacity: 0.35; cursor: default; }

.sc-scenario-line { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
.sc-scenario-line .link-button { font-size: 12px; padding: 0; min-height: 0; color: var(--maroon); }

.sc-stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 16px 15px 6px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  scroll-behavior: smooth;
  background: linear-gradient(180deg, #F7F9FA, #F2F5F6);
}

.sc-msg {
  max-width: 82%;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: var(--r-control);
  position: relative;
  /* Was a 7px spring on every turn. A message arriving should be noticed once,
     not performed. */
  animation: sc-pop 0.2s ease-out both;
  overflow-wrap: anywhere;
}

@keyframes sc-pop {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* Anna's stage direction -- "(Pauses.)" -- is the most human thing in the
   transcript and was set at 72% opacity as an aside. Given its own line in
   serif italic it reads as what it is: her manner, before her words. */
.sc-msg .cue {
  display: block;
  font-style: italic;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--cool);
  margin-bottom: 4px;
}

.sc-anna {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--rule);
  /* The cool edge is where she speaks from. Squaring that corner lets the
     message read as a typed note rather than a chat bubble. */
  border-left: 2px solid var(--cool);
  border-top-left-radius: var(--r-tight);
  border-bottom-left-radius: var(--r-tight);
  color: var(--ink);
}

.sc-you {
  align-self: flex-end;
  background: var(--bubble-you);
  color: #EAF0F3;
  border-top-right-radius: var(--r-tight);
  border-bottom-right-radius: var(--r-tight);
}

.sc-cue-only {
  background: transparent;
  border: none;
  border-left: none;
  color: var(--ink-3);
  padding: 4px 2px;
  animation: none;
}

.sc-typing {
  padding: 12px 14px;
}

/* Three bouncing dots is the house signal of every assistant UI. These stay
   still and only surface, which reads as someone composing rather than a
   system working. */
.sc-typing span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cool);
  margin: 0 2px;
  opacity: 0.25;
  animation: sc-blink 1.6s ease-in-out infinite;
}

.sc-typing span:nth-child(2) { animation-delay: 0.22s; }
.sc-typing span:nth-child(3) { animation-delay: 0.44s; }

/* Shown only when a reply is taking unusually long, so it reads as an aside
   rather than as one of Anna's messages. */
.sc-wait-note {
  list-style: none;
  align-self: center;
  max-width: 46ch;
  margin: 2px 0 6px;
  padding: 0 8px;
  color: var(--ink-3);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

@keyframes sc-blink {
  0%, 70%, 100% { opacity: 0.2; }
  35% { opacity: 0.75; }
}

.sc-starters {
  flex: 0 0 auto;
  padding: 8px 13px 0;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 6px;
}

.sc-suggest { font-size: 12px; color: var(--ink-3); margin: 2px 2px 2px; }

.sc-chip {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  background: #F2F5F6;
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 11px 13px;
  min-height: 44px;
  border-radius: var(--r-control);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sc-chip:hover { background: #E9EEF0; border-color: #C4CDD3; }

.sc-nudge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 13px;
  background: #FBF7EE;
  border-top: 1px solid #EADFC4;
  font-size: 13px;
  line-height: 1.45;
}

.sc-pill {
  font-size: 12px;
  color: var(--ink-3);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}

.sc-composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding: 11px 13px 8px;
}

.sc-inputrow { display: flex; gap: 8px; align-items: flex-end; }

.sc-inputrow textarea {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 11px 15px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  background: var(--paper);
  color: var(--ink);
  resize: none;
  min-height: 44px;
  max-height: 140px;
}

.sc-inputrow textarea:focus { outline: none; border-color: #B7C2C9; background: #fff; }
.sc-inputrow textarea:disabled { opacity: 0.6; }

.sc-inputrow .voice-btn {
  flex: 0 0 auto;
  min-height: 44px;
  border-radius: 22px;
}

.sc-send {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--maroon);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.sc-send svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.sc-send:hover:not(:disabled) { background: var(--maroon-press); }
.sc-send:disabled { opacity: 0.4; cursor: default; }

.sc-compfoot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 6px;
  padding: 0 4px;
}

.sc-readiness {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  padding: 8px 15px 12px;
  background: var(--surface);
  font-size: 12px;
  color: var(--ink-3);
}

.sc-readiness strong { color: var(--ink); font-weight: 600; }
.sc-readiness.is-ready strong { color: var(--maroon); }
.sc-readiness .sc-cta-sm { margin-left: auto; }

/* ---- Debrief: how it went ------------------------------------------------- */

.sc-debrief { padding-bottom: 8px; }

.sc-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 15px;
}

.sc-card h4 { margin: 0 0 3px; font-size: 14px; font-weight: 600; font-family: var(--sans); }

.sc-note {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 8px 0 0;
}

/* Leclerc's rubric leads the report, so the score is the first and heaviest
   thing on the page. Each criterion carries the reason it scored what it did. */
.score-card { border-color: var(--maroon); }

.score-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.score-band { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); max-width: 34ch; }

.score-total {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--serif);
  color: var(--maroon);
  white-space: nowrap;
}

.score-total strong { font-size: 40px; font-weight: 500; line-height: 1; }
.score-total span { font-size: 15px; color: var(--ink-3); }

.score-rows { display: grid; gap: 16px; margin-top: 16px; }

.score-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.score-label { font-size: 14px; font-weight: 600; }
.score-value { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.score-value small { font-size: 12px; color: var(--ink-3); }

.score-track { height: 6px; margin: 6px 0 8px; border-radius: 4px; background: #EDF1F3; overflow: hidden; }
.score-track i { display: block; height: 100%; border-radius: 4px; background: var(--maroon); }

.score-question { margin: 0; font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.score-evidence { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; }

.score-summary {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.55;
}

.sc-spark { width: 100%; height: 74px; margin: 6px 0 2px; display: block; }
.sc-spark text { font-family: var(--sans); }

.sc-list {
  margin: 8px 0 12px;
  padding-left: 18px;
}

.sc-list li,
.sc-reflect li { font-size: 13.5px; line-height: 1.5; margin-bottom: 8px; }

.sc-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

.sc-two ul { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.45; }
.sc-two p { margin: 0; font-size: 13px; color: var(--ink-3); }

.sc-dim { margin: 11px 0; }
.sc-dim .top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 5px; }
.sc-dim .top .lv { color: var(--ink-3); white-space: nowrap; }
.sc-dim .track { height: 7px; background: #EDF1F3; border-radius: 5px; overflow: hidden; }
.sc-dim .track i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #3A5A78, #7D7A63 60%, var(--warm));
}

.sc-reflect { margin: 8px 0 0; padding-left: 18px; }

.sc-actions { display: flex; gap: 10px; margin-top: 6px; }
.sc-actions .sc-cta { flex: 1; }

.sc-secondary {
  display: flex;
  gap: 6px 14px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  color: var(--ink-3);
  margin: 14px 0 0;
}

.sc-secondary .link-button { font-size: 12px; padding: 0; min-height: 0; color: var(--maroon); }

/* Legacy panels that follow the scene share its column and lose their shadow. */
.sc-more .panel,
.sc-more .disclosure,
.sc-more .practice-safety-note,
.sc-more .result-footer {
  box-shadow: none;
  border-radius: 14px;
}

/* ---- Narrow screens -------------------------------------------------------- */

@media (max-width: 640px) {
  .sc-chat { height: min(80vh, 720px); border-radius: 18px; }
  .sc-msg { max-width: 88%; }
  .sc-two { grid-template-columns: 1fr; }
  .sc-brief .stakes-grid { grid-template-columns: 1fr; }
  .sc-facts .lbl { flex-basis: 84px; }
  .sc-head-actions .sc-text-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-msg,
  .sc-typing span { animation: none !important; }
  .sc-stream { scroll-behavior: auto; }
}


/* ============================================================================
   Debrief room: the section debrief for faculty. Lives inside the instructor
   console, so the scene palette is scoped to .sc-scope rather than <body>.
   ========================================================================== */

.sc-scope {
  --porcelain: #EDF0F2;
  --paper: #FFFFFF;
  --ink: #18232C;
  --ink-2: #2F3E49;
  --ink-3: #4C5B66;
  --ink-faint: #7B8791;
  --rule: #DCE2E6;
  --maroon: #6E1E3A;
  --maroon-press: #571630;
  --cool: #3A5A78;
  --mid: #8C8A6E;
  --warm: #E0A32E;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.5;
}

.dr-room { max-width: 1000px; margin: 0 auto; }

.dr-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.dr-kick { font-size: 12.5px; color: var(--maroon); font-weight: 600; margin: 0; }
.dr-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 31px);
  letter-spacing: -0.015em;
  margin: 6px 0 4px;
  line-height: 1.2;
}
.dr-sub { color: var(--ink-3); font-size: 14px; margin: 0; }
.dr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.dr-project {
  border: 1.5px solid var(--maroon);
  background: #fff;
  color: var(--maroon);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 11px;
  cursor: pointer;
}
.dr-project:hover, .dr-project[aria-pressed="true"] { background: #FBF3F5; }

.dr-section { margin-bottom: 34px; }
.dr-eyebrow { font-family: var(--serif); font-style: italic; color: var(--maroon); font-size: 15px; margin: 0 0 3px; }
.dr-lead { font-size: 20px; line-height: 1.4; font-weight: 400; margin: 0 0 16px; max-width: 64ch; }
.dr-lead b { font-weight: 600; }

/* The cohort on the stance axis */
.dr-axis-wrap { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 24px 24px 18px; }
.dr-axis { position: relative; height: 130px; margin: 6px 4px 0; }
.dr-axis .track { position: absolute; left: 0; right: 0; top: 58px; height: 8px; border-radius: 5px; background: linear-gradient(90deg, var(--cool), var(--mid) 52%, var(--warm)); }
.dr-dot {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
  transform: translate(-50%, -50%);
  cursor: default;
  transition: transform 0.12s ease;
}
.dr-dot:hover { transform: translate(-50%, -50%) scale(1.35); z-index: 3; }
.dr-axis .zone { position: absolute; top: 82px; font-size: 12px; color: var(--ink-faint); transform: translateX(-50%); text-align: center; width: 150px; }
.dr-axis .pole { position: absolute; top: 34px; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.dr-axis .pole.l { left: 0; }
.dr-axis .pole.r { right: 0; text-align: right; }
.dr-tally { display: flex; margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 16px; }
.dr-tally > div { flex: 1; padding: 0 4px; }
.dr-tally .n { font-family: var(--serif); font-size: 26px; font-weight: 500; }
.dr-tally .n.warm { color: #B9791A; }
.dr-tally .n.cool { color: var(--cool); }
.dr-tally .t { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }

/* The pattern */
.dr-pattern { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; }
.dr-curvebox { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 20px; }
.dr-curvebox svg { width: 100%; height: 150px; display: block; }
.dr-curvebox svg text { font-family: var(--sans); }
.dr-curve-cap { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; line-height: 1.5; }
.dr-q { background: var(--paper); border: 1px solid var(--rule); border-radius: 13px; padding: 14px 15px; margin-bottom: 12px; }
.dr-q .tag { font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.dr-q .tag.up { color: #B9791A; }
.dr-q .tag.down { color: var(--cool); }
.dr-q p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.dr-q .said { font-family: var(--serif); font-style: italic; }
.dr-q .why { color: var(--ink-3); margin-top: 6px; }

/* Group analysis */
.dr-seg { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 20px 22px; }
.dr-seg h3 { font-size: 14px; margin: 0 0 14px; font-weight: 600; font-family: var(--sans); }
.dr-segrow { display: flex; align-items: center; gap: 14px; margin: 0 0 13px; }
.dr-segrow .name { flex: 0 0 160px; font-size: 13.5px; }
.dr-segrow .name small { display: block; color: var(--ink-faint); font-size: 12px; }
.dr-segrow .bar { flex: 1; height: 22px; border-radius: 6px; background: #EEF1F3; position: relative; overflow: hidden; }
.dr-segrow .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, var(--cool), var(--warm)); }
.dr-segrow .bar b { position: absolute; right: 8px; top: 0; line-height: 22px; font-size: 12px; color: var(--ink); font-weight: 600; }
.dr-segrow.hidden .bar { background: repeating-linear-gradient(45deg, #F1F3F5, #F1F3F5 6px, #E9ECEF 6px, #E9ECEF 12px); }
.dr-segrow.hidden .bar span { position: absolute; left: 10px; top: 0; line-height: 22px; font-size: 12px; color: var(--ink-faint); }
.dr-disclaimer { font-size: 12px; color: var(--ink-faint); line-height: 1.5; margin: 14px 0 0; border-top: 1px solid var(--rule); padding-top: 12px; }

/* Drill-in */
.dr-list { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.dr-lr { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--rule); }
.dr-lr .cd { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; border: 2px solid var(--ink); }
.dr-lr .who { flex: 0 0 118px; font-size: 13.5px; font-weight: 500; }
.dr-lr .stance { flex: 0 0 108px; font-size: 12.5px; color: var(--ink-3); }
.dr-lr .oneline { flex: 1; font-size: 12.5px; color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-lr .open {
  flex: 0 0 auto;
  border: 1px solid var(--rule);
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 13px;
  min-height: 44px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--maroon);
  font-weight: 600;
}
.dr-lr .open:hover { background: #FBF3F5; border-color: #E4C9D2; }
.dr-transcript { border-bottom: 1px solid var(--rule); background: #F7F9FA; padding: 12px 18px 16px; }
.dr-transcript-line { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; }
.dr-stream { max-height: 420px; padding: 0; background: transparent; }
.dr-showall { width: 100%; background: #F7F9FA; border: none; font-family: inherit; font-size: 12.5px; color: var(--ink-3); padding: 12px; min-height: 44px; cursor: pointer; }
.dr-showall:hover { background: #F1F4F5; }

/* Cohort profile */
.dr-prof { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 20px 22px; }

.dr-more { margin-top: 10px; }
.dr-boundary { color: var(--ink-faint); font-size: 12px; text-align: center; margin-top: 30px; }

/* Projector view: larger type for the room. */
.dr-room.is-projector { font-size: 1.18em; }
.dr-room.is-projector .dr-lead { font-size: 26px; max-width: none; }
.dr-room.is-projector .dr-tally .n { font-size: 34px; }
.dr-room.is-projector .dr-tally .t, .dr-room.is-projector .dr-q p, .dr-room.is-projector .dr-lr .who, .dr-room.is-projector .dr-lr .stance { font-size: 16px; }
.dr-room.is-projector .dr-more, .dr-room.is-projector .dr-boundary { display: none; }

@media (max-width: 760px) {
  .dr-pattern { grid-template-columns: 1fr; }
  .dr-lr .oneline { display: none; }
  .dr-segrow .name { flex-basis: 120px; }
  .dr-axis .zone { width: 110px; }
}

/* Faculty views keep the decision visible and defer supporting evidence. */
.faculty-readout {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  padding: 22px;
}

.faculty-readout-head,
.faculty-section-label,
.faculty-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.faculty-readout-head h3,
.faculty-readout-head .eyebrow,
.faculty-next h3,
.faculty-next p {
  margin: 0;
}

.faculty-readout-head h3 {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 600;
}

.text-button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--maroon);
  padding: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.text-button:hover { text-decoration: underline; }

.faculty-pulse {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 20px 0;
  border-block: 1px solid var(--rule);
}

.faculty-pulse > div {
  display: grid;
  gap: 2px;
  padding: 16px;
  border-left: 1px solid var(--rule);
}

.faculty-pulse > div:first-child { border-left: 0; }
.faculty-pulse strong { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.faculty-pulse span { color: var(--ink-3); font-size: 12px; }

.faculty-section-label { margin-bottom: 10px; }
.faculty-section-label strong { font-size: 13px; font-weight: 600; }
.faculty-section-label span { color: var(--ink-faint); font-size: 12px; }
.faculty-readout .aggregate-distribution { min-height: 52px; }

.faculty-next {
  margin-top: 18px;
  border-left: 3px solid var(--maroon);
  background: #f7f9fa;
  padding: 20px 22px;
}

.faculty-next > div { max-width: 68ch; }
.faculty-next h3 { margin-top: 4px; font-size: 19px; line-height: 1.4; }
.faculty-next h3 + p { margin-top: 7px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }

.dr-opener {
  max-width: 64ch;
  margin: 5px 0 0;
  border-left: 3px solid var(--maroon);
  padding: 12px 0 12px 18px;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.45;
}

.dr-quotes-primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dr-quotes-primary .dr-q { margin: 0; border-radius: 8px; }
.dr-axis-wrap,
.dr-list,
.dr-seg,
.dr-prof { border-radius: 8px; }
.dr-evidence { margin-top: 12px; }
.dr-cohort-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dr-cohort-details h3 { margin: 0 0 10px; font-size: 14px; }

@media (max-width: 700px) {
  .faculty-readout-head,
  .faculty-next { align-items: flex-start; flex-direction: column; }
  .faculty-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faculty-pulse > div:nth-child(3) { border-left: 0; }
  .faculty-pulse > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .dr-quotes-primary,
  .dr-cohort-details { grid-template-columns: 1fr; }
  .dr-axis .zone { font-size: 12px; width: 86px; }
}


/* ============================================================================
   Landing and sign-in: the thesis.
   The product opens with the counterpart's refusal, verbatim, at the cool end
   of the stance line. That line is the one signature of the whole system:
   it appears only where it encodes Anna's stance (here, static; on the
   student debrief as the sparkline; on the faculty debrief as the axis).
   Tokens come from the prototypes: porcelain, paper, ink, maroon, cool, warm.
   ========================================================================== */

body[data-experience="scene"] .access-screen {
  padding: clamp(18px, 4vw, 48px) 16px;
}

body[data-experience="scene"] .landing-view {
  display: block;
  width: min(600px, 100%);
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: clamp(8px, 3vh, 24px) 0;
  overflow: visible;
}

body[data-experience="scene"] .landing-view::after { display: none; }

body[data-experience="scene"] .landing-map,
body[data-experience="scene"] #worldbg {
  display: none;
}

body[data-experience="scene"] .landing-copy { max-width: none; }

.ld-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(28px, 5vh, 44px);
}

body[data-experience="scene"] .landing-copy .brand-logo {
  width: min(200px, 52%);
  margin: 0;
}

.ld-pilot {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ld-scene { margin-bottom: 26px; }

.ld-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.3;
}

.ld-who strong { display: block; font-weight: 600; }
.ld-who small { display: block; color: var(--ink-3); font-size: 12px; }

.ld-av {
  width: 36px;
  height: 36px;
  border-radius: var(--r-tight);
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--cool);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 14px;
  flex: 0 0 auto;
}

.ld-bubble {
  margin: 0;
  max-width: 88%;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--cool);
  border-radius: 15px;
  border-top-left-radius: 5px;
  padding: 12px 15px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  animation: sc-pop 0.5s ease both;
}

.ld-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0 4px;
  font-size: 12px;
  color: var(--ink-3);
}

.ld-pole { flex: 0 0 auto; }
.ld-pole.r { text-align: right; }

.ld-track {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: #E3E8EC;
  overflow: hidden;
}

.ld-track i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--cool), #8C8A6E 55%, var(--warm));
  transform-origin: left;
  animation: ld-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.45s both;
}

@keyframes ld-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes ld-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

body[data-experience="scene"] .landing-copy h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: none;
  margin: 0 0 12px;
  color: var(--ink);
  animation: ld-rise 0.6s ease 0.9s both;
}

body[data-experience="scene"] .landing-copy h1 em {
  font-style: italic;
  color: var(--maroon);
}

body[data-experience="scene"] .landing-lede {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 56ch;
  margin: 0 0 20px;
  padding: 0;
  animation: ld-rise 0.6s ease 1s both;
}

body[data-experience="scene"] .landing-actions {
  margin: 0;
  animation: ld-rise 0.6s ease 1.1s both;
}

.ld-attribution {
  margin: 22px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* Primary actions take the maroon before sign-in too; the base sheet hardcodes blue. */
body[data-experience="scene"] .primary {
  border-color: var(--maroon);
  background: var(--maroon);
  box-shadow: none;
  border-radius: 13px;
}

body[data-experience="scene"] .primary:hover:not(:disabled) {
  border-color: var(--maroon-press);
  background: var(--maroon-press);
}

/* Sign-in: same structure, scene identity. */
body[data-experience="scene"] #login-view.access-panel {
  border: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--sc-shadow);
}

body[data-experience="scene"] .login-header .eyebrow,
body[data-experience="scene"] .login-step-heading > span {
  color: var(--maroon);
}

body[data-experience="scene"] .login-header h1 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
}

body[data-experience="scene"] .role-card {
  border: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
}

body[data-experience="scene"] .role-card:hover,
body[data-experience="scene"] .role-card.is-active {
  border-color: var(--maroon);
  background: #FBF3F5;
}

body[data-experience="scene"] .access-form { border-top-color: var(--rule); }

@media (max-width: 640px) {
  .ld-bubble { max-width: 100%; }
  .ld-top { margin-bottom: 22px; }
  body[data-experience="scene"] .landing-copy .brand-logo { width: min(170px, 60%); }
}

@media (prefers-reduced-motion: reduce) {
  .ld-bubble,
  .ld-track i,
  body[data-experience="scene"] .landing-copy h1,
  body[data-experience="scene"] .landing-lede,
  body[data-experience="scene"] .landing-actions {
    animation: none !important;
  }
}


/* ---- Corrections from the first render ------------------------------------
   Base-sheet rules that bled through the scene overrides. Each is named. */

/* The 8px gold bar down the left edge is .landing-view::before in the base sheet. */
body[data-experience="scene"] .landing-view::before { display: none; }

/* The co-brand lockup is stacked, so size it by height, not width. */
body[data-experience="scene"] .landing-copy .brand-logo,
body[data-experience="scene"] .login-logo {
  width: auto;
  max-width: none;
  height: clamp(44px, 6vh, 60px);
  margin: 0;
  object-fit: contain;
}

/* A later base pass paints .primary gold with navy text; the scene is maroon with white text. */
body[data-experience="scene"] .primary,
body[data-experience="scene"] .primary:hover:not(:disabled),
body[data-experience="scene"] .primary:focus-visible {
  color: #fff;
  transform: none;
}

/* Step badges: base sets a navy square; the scene reads maroon, white digit, rounded. */
body[data-experience="scene"] .login-step-heading > span {
  background: var(--maroon);
  color: #fff;
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
}

/* Form vocabulary: sentence-case sans labels, rounded fields, quiet focus. */
body[data-experience="scene"] #login-view label,
body[data-experience="scene"] #login-view .field label {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}

body[data-experience="scene"] #login-view label small {
  font-weight: 400;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}

body[data-experience="scene"] #login-view input:not([type="checkbox"]),
body[data-experience="scene"] #login-view select,
body[data-experience="scene"] #login-view textarea {
  border-radius: 10px;
  border-color: var(--rule);
  background: var(--paper);
}

body[data-experience="scene"] #login-view input:not([type="checkbox"]):focus,
body[data-experience="scene"] #login-view input:not([type="checkbox"]):focus-visible {
  border-color: #B7C2C9;
  background: #fff;
  outline: 3px solid rgba(110, 30, 58, 0.22);
  outline-offset: 1px;
}

body[data-experience="scene"] #login-view .consent-row {
  border-radius: 12px;
  background: #F7F9FA;
}

body[data-experience="scene"] #login-view .consent-row input { accent-color: var(--maroon); }

body[data-experience="scene"] .login-topline .link-button,
body[data-experience="scene"] .login-header p:last-child { color: var(--ink-3); }


/* ============================================================================
   The console: faculty and program pages in the same visual language.

   The instructor pages draw every colour, radius, and type face from their own
   token block (--navy, --muted, --ic-wash, --ic-fill, --radius, --tbird-*).
   Rebinding those tokens here reskins Overview, Participants, Scenarios, and
   every shared component at once, without editing a single component rule.

   The stance gradient stays the one signature: it appears only in the debrief
   room, where it encodes Anna's stance. Console bars use one flat hue.
   ========================================================================== */

body[data-experience="console"] {
  /* Scene palette */
  --porcelain: #EDF0F2;
  --paper: #F7F9FA;
  --surface: #FFFFFF;
  --white: #FFFFFF;
  --soft: #F7F9FA;
  --ink: #18232C;
  --ink-2: #2F3E49;
  --ink-3: #4C5B66;
  --ink-faint: #7B8791;
  --muted: #4C5B66;
  --grey: #7B8791;
  --rule: #DCE2E6;
  --rule-2: #E6EAEE;
  --line: #DCE2E6;
  --maroon: #6E1E3A;
  --maroon-press: #571630;
  --cool: #3A5A78;
  --warm: #E0A32E;

  /* The brand tokens resolve at :root, so each must be rebound by name. */
  --navy: #18232C;
  --navy-2: #2F3E49;
  --blue: #3A5A78;
  --gold: #6E1E3A;
  --gold-2: #571630;
  --tbird-blue: #18232C;
  --tbird-gold: #6E1E3A;
  --you: #6E1E3A;
  --you-dark: #571630;
  --you-soft: #F7ECF0;
  --other: #3A5A78;
  --other-soft: #E8EEF3;

  /* Console chrome */
  --ic-rule: #DCE2E6;
  --ic-wash: #F7F9FA;
  --ic-lift: 0 1px 0 rgba(24, 35, 44, 0.03);
  --ic-fill: #3A5A78;
  --ic-track: #EDF1F3;
  /* The four stages are a real progression, so they run the same cool-to-warm
     axis rather than four arbitrary blues. */
  --ic-stage-not-started: #C3CBD3;
  --ic-stage-practiced: #6E8CA6;
  --ic-stage-completed: #3A5A78;
  --ic-stage-reflected: #B9791A;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(24, 35, 44, 0.04), 0 14px 36px rgba(24, 35, 44, 0.06);
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  background:
    radial-gradient(1200px 500px at 80% -5%, #F4F7F8, var(--porcelain));
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---- The shell, shared by every role ------------------------------------- */

body[data-experience] .sidebar {
  border-top: 1px solid var(--rule);
  border-bottom-color: var(--rule);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1px 0 rgba(24, 35, 44, 0.03);
}

/* The mark reads like the persona avatars: dark slate, soft square, no ring. */
body[data-experience] .sidebar .brand-mark {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--r-tight);
  background: var(--surface);
  color: var(--cool);
  box-shadow: none;
  font-family: var(--serif);
  font-size: 13px;
}

body[data-experience] .sidebar .brand-mark::after { background: transparent; }

body[data-experience] .product-name,
body[data-experience] .sidebar .brand-row h1 {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
}

body[data-experience] .tab {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

body[data-experience] .tab.is-active {
  color: var(--maroon);
}

body[data-experience] .tab.is-active::after {
  height: 2px;
  background: var(--maroon);
}

/* The role band was a dark navy gradient with a gold kicker on every page.
   It is chrome, not content, so it steps back to a quiet card. */
body[data-experience] .experience-context {
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  padding: 16px 20px;
}

body[data-experience] .experience-context::before,
body[data-experience] .experience-context::after { display: none; }

body[data-experience] .experience-context #experience-kicker,
body[data-experience] .experience-context .experience-copy #experience-kicker {
  color: var(--maroon);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body[data-experience] .experience-context #experience-title {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}

body[data-experience] .experience-path span {
  border-color: var(--rule);
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

body[data-experience] .experience-path span:first-child { border-color: var(--maroon); }

body[data-role="instructor"] .experience-context { display: none; }

.faculty-classbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.65fr) auto;
  align-items: end;
  gap: 18px;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 16px;
}

.faculty-classbar-id {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.faculty-classbar-id span,
.faculty-classbar-switch label {
  color: var(--maroon);
  font-size: 12px;
  font-weight: 600;
}

.faculty-classbar-id strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.faculty-classbar-id small { color: var(--ink-3); font-size: 12px; }
.faculty-classbar-switch { margin: 0; }
.faculty-classbar-switch label { margin-bottom: 4px; }
.faculty-classbar-switch select { min-height: 42px; }

.faculty-classbar-manage { position: relative; }
.faculty-classbar-manage > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  color: var(--maroon);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.faculty-classbar-manage-body {
  grid-column: 1 / -1;
  margin-top: 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  padding: 18px;
}

.faculty-classbar-manage-body > p { margin: 0 0 14px; font-size: 13px; }
.faculty-classbar-manage-body code { padding: 2px 6px; border: 1px solid var(--rule); border-radius: 3px; }
.faculty-classbar-manage[open] { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .faculty-classbar { grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
  .faculty-classbar-id strong { white-space: normal; }
  .faculty-classbar-manage > summary { min-height: 32px; }
}

body[data-experience] .skip-link {
  border: 2px solid var(--maroon);
  background: var(--ink);
}

/* One primary treatment for every role. */
body[data-experience] .primary,
body[data-experience] .primary:hover:not(:disabled),
body[data-experience] .primary:focus-visible {
  color: #fff;
  transform: none;
  box-shadow: none;
}

body[data-experience] .primary {
  border-color: var(--maroon);
  background: var(--maroon);
  border-radius: 11px;
}

body[data-experience] .primary:hover:not(:disabled) {
  border-color: var(--maroon-press);
  background: var(--maroon-press);
}

body[data-experience] .secondary {
  border-radius: 11px;
  color: var(--ink-2);
}

/* ---- Console page rhythm -------------------------------------------------- */

/* The page title ran to 64px, which shouted on a page of findings. */
body[data-experience="console"] .page-head h2,
body[data-experience="console"] .ic-story-head h2 {
  max-width: 34ch;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 31px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

body[data-experience="console"] .page-head::before {
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--maroon);
}

body[data-experience="console"] .page-head .eyebrow,
body[data-experience="console"] .eyebrow {
  color: var(--maroon);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body[data-experience="console"] .page-intro {
  color: var(--ink-3);
  font-size: 14px;
}

/* Cards: hairline border, soft corner, no product shadow. */
body[data-experience="console"] .ic-chart,
body[data-experience="console"] .ic-stat,
body[data-experience="console"] .panel,
body[data-experience="console"] .ic-split,
body[data-experience="console"] .aggregate-groups,
body[data-experience="console"] .ic-board-col,
body[data-experience="console"] .task-callout,
body[data-experience="console"] .disclosure {
  border-color: var(--rule);
  border-radius: 14px;
  box-shadow: none;
}

body[data-experience="console"] .ic-chart-head h3,
body[data-experience="console"] .ic-split h4,
body[data-experience="console"] .aggregate-groups-head h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
}

body[data-experience="console"] .ic-chart-head p,
body[data-experience="console"] .ic-bar-label,
body[data-experience="console"] .ic-table {
  font-family: var(--sans);
}

body[data-experience="console"] .ic-stat strong,
body[data-experience="console"] .ic-board-head strong,
body[data-experience="console"] .metric strong {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
}

body[data-experience="console"] .status-pill {
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

body[data-experience="console"] blockquote {
  font-family: var(--serif);
  font-style: italic;
}

body[data-experience="console"] :focus-visible {
  outline: 3px solid rgba(110, 30, 58, 0.4);
  outline-offset: 2px;
}

/* The console token block outranks .sc-scope on specificity, so the room
   keeps white cards on the porcelain page by name. */
body[data-experience="console"] .sc-scope { --paper: #FFFFFF; }

/* Across product pass: one clear student journey and restrained brand framing. */
.landing-map { display: none; }
.landing-view {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background: #f7f9fb;
}
.landing-copy.ld {
  width: min(860px, 100%);
  margin: 0;
  padding: 0;
  text-align: left;
}
.landing-copy .ld-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(54px, 10vh, 110px);
}
.across-logo {
  display: block;
  width: min(290px, 62vw);
  height: auto;
  object-fit: contain;
}
.landing-copy .eyebrow { margin-bottom: 14px; color: var(--maroon); letter-spacing: 0; }
.landing-copy #landing-title {
  max-width: 14ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(42px, 7vw, 78px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
  animation: none;
  opacity: 1;
  transform: none;
}
body[data-experience="scene"] .landing-copy .landing-lede {
  max-width: 650px;
  margin: 24px 0 30px;
  color: var(--ink-2);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  animation: none;
  opacity: 1;
  transform: none;
}
body[data-experience="scene"] .landing-copy .landing-actions {
  justify-content: flex-start;
  animation: none;
  opacity: 1;
  transform: none;
}
.landing-copy .ld-attribution { max-width: 650px; margin-top: 48px; text-align: left; }
.ld-pilot { white-space: normal; text-align: right; }

.brand-mark-image {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
}
.brand-logo-sidebar { width: 156px; margin-top: auto; }
.experience-brand img { width: 150px; height: auto; }
.login-logo { width: min(230px, 55vw); }

.brief-person {
  margin: 28px 0 0;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--rule);
}
.brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--rule);
}
.brief-grid section {
  min-width: 0;
  padding: 22px 24px 22px 0;
  border-top: 1px solid var(--rule);
}
.brief-grid section:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--rule); }
.brief-grid .brief-wide { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
.brief-grid .brief-wide + .brief-wide { padding-left: 0; border-left: 0; }
.brief-grid .lbl { color: var(--maroon); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.brief-grid p { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.sc-brief > .sc-cta svg { width: 18px; height: 18px; }

.reflection-question-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.reflection-question-head .voice-btn { flex: 0 0 auto; }
.reflection-report { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.reflection-report > * { min-width: 0; max-width: 100%; }
.reflection-form-card { grid-template-columns: minmax(0, 1fr); }

.assessment-record {
  margin-top: 28px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.assessment-record h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: 0; }
.assessment-record h3:not(:first-child) { margin-top: 36px; }
.assessment-transcript { display: grid; gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
.assessment-transcript li { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr); gap: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.assessment-transcript strong { color: var(--maroon); font-size: 13px; }
.assessment-transcript p { margin: 0; white-space: pre-wrap; }
.assessment-reflection { display: grid; gap: 18px; margin: 18px 0 0; }
.assessment-reflection div { padding-top: 14px; border-top: 1px solid var(--rule); }
.assessment-reflection dt { font-weight: 700; }
.assessment-reflection dd { margin: 7px 0 0; color: var(--ink-2); line-height: 1.55; }
.sc-dim blockquote { margin: 8px 0 0; padding-left: 12px; border-left: 2px solid var(--rule); color: var(--ink-2); font-size: 13px; }
.about-across { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--rule); }
.about-across > div { padding-top: 20px; }
.about-across h3 { margin: 0 0 8px; font-size: 15px; }
.about-across p { margin: 0; color: var(--ink-2); line-height: 1.55; }

@media (max-width: 720px) {
  .landing-copy .ld-top { align-items: flex-start; margin-bottom: 56px; }
  .landing-copy #landing-title { font-size: 44px; }
  .brief-grid { grid-template-columns: 1fr; }
  .brief-grid section,
  .brief-grid section:nth-child(even) { grid-column: 1; padding: 19px 0; border-left: 0; }
  .reflection-question-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    min-width: 0;
    max-width: 100%;
  }
  .reflection-prompt-grid,
  .reflection-question { grid-template-columns: minmax(0, 1fr); }
  .reflection-question-head label { min-width: 0; overflow-wrap: anywhere; }
  .reflection-question-head .voice-btn {
    width: auto;
    max-width: 100%;
    justify-self: start;
  }
  .sc-inputrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .sc-inputrow .voice-btn { width: auto; }
}

/* Phones. The box a participant types into was getting 182px of a 390px
   screen because the voice button carried its text label and the row kept
   desktop spacing, and three lines of hints sat under it -- one of which,
   "Enter to send", is wrong on a phone, where Return makes a new line. */
@media (max-width: 560px) {
  /* The panel was 80vh on top of roughly 195px of header, so it ran past the
     bottom of the phone: the composer sat below the fold, and once the
     keyboard opened it was pushed off the screen entirely. dvh is the
     viewport actually left over, so it shrinks when the keyboard appears. */
  .sc-chat {
    height: min(72vh, 620px);
    height: min(72dvh, 620px);
    min-height: 300px;
  }

  .sc-composer { padding: 9px 10px 7px; }
  .sc-inputrow { gap: 6px; }
  .sc-inputrow textarea { padding: 10px 13px; }

  .sc-inputrow .voice-btn {
    width: 44px;
    /* The base button in styles.css reserves 92px for its text label. With
       the label hidden that is 48px of a 390px row spent on nothing. */
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }
  .sc-inputrow .voice-btn .voice-btn-label { display: none; }

  .sc-compfoot { font-size: 12px; gap: 6px; }
  .sc-compfoot .sc-keyhint { display: none; }
  .assessment-transcript li { grid-template-columns: 1fr; gap: 5px; }
  .about-across { grid-template-columns: 1fr; }
}

@media print {
  .assessment-disclosure { break-before: page; }
  .assessment-record { break-before: auto; margin-top: 0; }
  .sc-more details > summary { display: none; }
  .result-footer { break-inside: avoid; }
  .assessment-transcript li,
  .assessment-reflection div,
  .sc-dim { break-inside: avoid; }
}

/* Dr. Keller's learning: the faculty approval screen and its Overview
   callout. Same register as the debrief: paper cards, a maroon rule for the
   thing that needs a decision, and the directive quoted exactly as she would
   receive it, so the professor approves the words rather than a summary. */
body[data-experience="console"] .learning-callout { margin-top: 0; margin-bottom: 18px; }
body[data-experience="console"] .learning-quiet-link { margin: -6px 0 12px; }
body[data-experience="console"] .learning-group {
  margin-top: 22px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  padding: 20px 22px;
}
body[data-experience="console"] .learning-group > h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
body[data-experience="console"] .learning-group > .muted { margin: 0 0 14px; max-width: 68ch; }
body[data-experience="console"] .learning-card {
  margin-top: 12px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--maroon);
  border-radius: 6px;
  background: var(--surface);
  padding: 16px 18px;
}
body[data-experience="console"] .learning-card h4 { margin: 0 0 10px; font-size: 16px; font-weight: 600; line-height: 1.35; }
body[data-experience="console"] .learning-card p { margin: 0 0 10px; max-width: 72ch; font-size: 14px; line-height: 1.55; }
body[data-experience="console"] .learning-label {
  margin-bottom: 4px !important;
  color: var(--ink-3);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[data-experience="console"] .learning-card blockquote {
  margin: 0 0 12px;
  border-left: 2px solid var(--rule);
  padding: 2px 0 2px 12px;
  max-width: 72ch;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}
body[data-experience="console"] .learning-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
body[data-experience="console"] .learning-actions .primary,
body[data-experience="console"] .learning-actions .secondary { width: auto; }
body[data-experience="console"] .learning-status { color: var(--ink-2); font-size: 13px; font-weight: 600; }
body[data-experience="console"] .learning-status[data-status="approved"] { color: var(--maroon); }
body[data-experience="console"] .learning-clusters { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; }
body[data-experience="console"] .learning-clusters span { color: var(--ink-3); font-size: 13px; }
body[data-experience="console"] .learning-meta { margin-top: 16px; color: var(--ink-3); font-size: 13px; }