:root {
  color-scheme: light;
  --paper: #f3f7fb;
  --surface: #ffffff;
  --ink: #0b243d;
  --ink-2: #294760;
  --ink-3: #5f7690;
  --rule: #c8d7e6;
  --rule-2: #dce7f1;
  --you: #105f9f;
  --you-dark: #0b4c82;
  --you-soft: #e6f0fa;
  --other: #a95d2d;
  --other-soft: #f4e7dc;
  --map: #1463a8;
  --green: #0f766e;
  --plum: #7c3aed;
  /* Thunderbird primary brand colors per the Thunderbird-at-ASU brand guide
     (March 2025): Thunderbird Blue #002e5f, Gold #ffc627, Gray #999999.
     Identity touches only; the reading palette stays for charts and body UI. */
  --tbird-blue: #002e5f;
  --tbird-gold: #ffc627;
  --tbird-gray: #999999;
  --serif: "Newsreader", Georgia, serif;
  /* Public Sans is Thunderbird's primary brand typeface; Libre Franklin stays
     as the loaded fallback for the inline SVG chart labels. */
  --sans: "Public Sans", "Libre Franklin", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --shadow: 0 1px 2px rgba(11, 36, 61, 0.045), 0 14px 36px rgba(11, 36, 61, 0.075);
  --maxw: 1040px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(200, 215, 230, 0.34) 1px, transparent 1px),
    linear-gradient(180deg, rgba(200, 215, 230, 0.28) 1px, transparent 1px),
    var(--paper);
  background-size: 56px 56px, 56px 56px, auto;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#worldbg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 42%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 42%, transparent 78%);
}

#worldbg svg {
  position: absolute;
  top: -2vh;
  left: 50%;
  width: 118vw;
  height: auto;
  transform: translateX(-50%);
  opacity: 0.22;
}

#worldbg circle {
  fill: var(--map);
  opacity: 0.65;
}

button,
select,
textarea,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled,
textarea:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--you);
  outline-offset: 2px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--you);
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 95, 159, 0.14);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0;
}

.access-screen,
.app-shell,
.toast {
  position: relative;
  z-index: 1;
}

.access-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 30px;
}

.access-panel {
  width: min(1000px, 100%);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--you);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(247, 250, 253, 0.96), rgba(255, 255, 255, 0.96));
  box-shadow: var(--shadow);
  padding: 34px;
}
.landing-view {
  position: relative;
  display: grid;
  width: min(1120px, 100%);
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.78fr);
  gap: 42px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #bfd1e3;
  border-radius: 10px;
  background: linear-gradient(180deg, #f7fafd, #ffffff);
  padding: 50px 44px;
  box-shadow: 0 2px 4px rgba(11, 36, 61, 0.045), 0 22px 60px rgba(11, 36, 61, 0.09);
}

.landing-view::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-top: 4px solid var(--you);
  pointer-events: none;
}

.landing-view::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 52%, rgba(255, 255, 255, 0.66) 100%);
  pointer-events: none;
}

.landing-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.landing-map svg {
  position: absolute;
  top: 50%;
  right: -4%;
  height: 150%;
  transform: translateY(-50%);
  opacity: 0.42;
}

.landing-map .dot {
  fill: var(--map);
  opacity: 0.09;
}

.landing-map .arc {
  fill: none;
  stroke: var(--you);
  stroke-width: 1.4;
  opacity: 0.28;
}

.landing-map .node {
  fill: var(--other);
}

.landing-map .nodering {
  fill: none;
  stroke: var(--other);
  opacity: 0.28;
}

.landing-copy {
  position: relative;
  z-index: 2;
}

.landing-copy h1 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.1rem, 4.2vw, 2.6rem);
  line-height: 1.12;
}

.landing-lede {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--ink-2);
  font-size: 1.08rem;
  line-height: 1.65;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.link-button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  padding: 0 0 18px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.link-button:hover {
  color: var(--you);
}

.brand-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand-row.compact {
  margin-bottom: 0;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1.5px solid var(--tbird-blue);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 4px rgba(255, 198, 39, 0.28);
  color: transparent;
  font-size: 0;
}

.brand-mark::before,
.brand-mark::after {
  position: absolute;
  background: var(--tbird-blue);
  content: '';
}

.brand-mark::before {
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.brand-mark::after {
  top: 50%;
  left: 7px;
  right: 7px;
  height: 1px;
  transform: translateY(-50%) scaleX(0.78);
}

.brand-row h1 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1;
}

.brand-row p,
.session-card span,
.muted {
  color: var(--ink-2);
}

.brand-row p {
  margin: 5px 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 30px 0 22px;
}

.role-card {
  min-height: 112px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  padding: 20px;
  text-align: left;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.role-card:hover {
  border-color: var(--you);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.role-card strong,
.role-card span {
  display: block;
}

.role-card strong {
  font-family: var(--serif);
  font-size: 1.14rem;
  font-weight: 500;
}

.role-card span {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 0.92rem;
}

.role-card.is-active {
  border-color: var(--you);
  background: var(--you-soft);
}

.access-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
  border-top: 1px solid var(--you);
  padding-top: 18px;
}

.demo-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.demo-codes span,
.status-pill,
.form-status {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-2);
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.form-status {
  grid-column: 1 / -1;
  min-height: 28px;
  background: transparent;
  padding: 0;
}

.app-shell {
  display: block;
  min-height: 100vh;
}

.is-hidden {
  display: none !important;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  min-height: 66px;
  border-bottom: 1px solid var(--rule);
  background: rgba(243, 247, 251, 0.94);
  padding: 0 30px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(11, 36, 61, 0.04), 0 10px 26px rgba(11, 36, 61, 0.055);
}

.tabs {
  display: flex;
  gap: 24px;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
}

.tab {
  position: relative;
  width: auto;
  min-height: 64px;
  border-radius: 0;
  background: transparent;
  color: var(--ink-3);
  padding: 0;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

.tab:hover {
  color: var(--ink-2);
}

.tab.is-active {
  background: transparent;
  color: var(--ink);
  font-weight: 600;
}

.tab.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--you);
  content: '';
}

.session-card {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.session-card strong {
  font-weight: 600;
  white-space: nowrap;
}

.session-card span {
  display: none;
}

.main {
  width: min(var(--maxw), 100%);
  min-width: 0;
  margin: 0 auto;
  padding: 46px 30px 96px;
}

.page-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 1.05;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.primary,
.secondary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 5px;
  padding: 0 20px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.primary svg,
.secondary svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.primary {
  border: 1px solid var(--you);
  background: var(--you);
  color: white;
  box-shadow: 0 8px 18px rgba(16, 95, 159, 0.16);
}

.primary:hover:not(:disabled) {
  border-color: var(--you-dark);
  background: var(--you-dark);
}

.secondary {
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
}

.secondary:hover:not(:disabled) {
  border-color: var(--ink-3);
  background: #f7fafd;
  color: var(--you);
}

.full-width {
  width: 100%;
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

label {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

select,
textarea,
input {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

select,
input {
  min-height: 42px;
  padding: 0 12px;
}

/* The two rules above are for text fields, and they caught radios and
   checkboxes too: width 100% inside a flex pill stretched each survey radio
   into a large ring of a different size per option. :where() keeps this at the
   specificity of a bare element, so it undoes only the text-field sizing and
   any class-scoped control styling later in the cascade still wins. */
input:where([type="radio"], [type="checkbox"]) {
  width: auto;
  min-height: 0;
  padding: 0;
}

textarea {
  min-height: 90px;
  padding: 12px;
  resize: vertical;
}

.panel,
.story-band,
.metric,
.scenario-card,
.empty-state {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}

.panel,
.scenario-card,
.empty-state {
  padding: 24px 26px;
}

.story-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
  padding: 26px 28px;
  border-top: 4px solid var(--you);
  background: linear-gradient(180deg, #ffffff, #f6fafe);
}

.story-band strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--serif);
  font-size: 1.36rem;
  font-weight: 500;
}

.story-band p,
.scenario-card p,
.muted {
  color: var(--ink-2);
  line-height: 1.55;
}

.metric-grid,
.scenario-grid,
.two-column,
.results-story {
  display: grid;
  gap: 18px;
  margin-bottom: 24px;
}

.metric-grid {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.scenario-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Progressive disclosure keeps each page focused on its primary decision. */
.disclosure {
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.disclosure > summary {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.disclosure > summary::-webkit-details-marker {
  display: none;
}

.disclosure > summary::after {
  flex: 0 0 auto;
  color: var(--you);
  content: '+';
  font-family: var(--mono);
  font-size: 1.25rem;
}

.disclosure[open] > summary::after {
  content: '−';
}

.disclosure > summary:hover {
  background: #f7fafd;
}

.disclosure > summary:focus-visible {
  outline: 3px solid rgba(16, 95, 159, 0.24);
  outline-offset: -3px;
}

.disclosure > summary > span:first-child {
  display: grid;
  gap: 3px;
}

.disclosure > summary strong {
  font-size: 0.98rem;
}

.disclosure > summary small {
  color: var(--ink-3);
  font-size: 0.82rem;
  line-height: 1.35;
}

.disclosure-body {
  padding: 20px;
  border-top: 1px solid var(--rule-2);
}

.disclosure-body > :first-child {
  margin-top: 0;
}

.disclosure-body > :last-child,
.disclosure-body.two-column {
  margin-bottom: 0;
}

.disclosure-body > .panel,
.disclosure-body > .two-column .panel {
  box-shadow: none;
}

.week-plan {
  margin-top: 18px;
}

.week-plan .step-grid {
  margin-bottom: 0;
}

.result-focus {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

.result-focus > div:first-child {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--you);
  border-radius: 8px;
  background: var(--surface);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}

.result-focus h3 {
  max-width: 46ch;
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.35;
}

.result-focus .pullprompt {
  margin: 0;
}

@media (max-width: 860px) {
  .result-focus {
    grid-template-columns: 1fr;
  }

  .disclosure > summary {
    min-height: 62px;
    align-items: flex-start;
    padding: 15px 16px;
  }

  .disclosure-body {
    padding: 16px;
  }
}

.results-story {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.agenda-board {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

.agenda-step {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 86px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}

.agenda-step.is-active {
  border-color: var(--you);
  box-shadow: 0 0 0 3px rgba(16, 95, 159, 0.1), var(--shadow);
}

.agenda-step.is-complete .agenda-number {
  background: var(--you-soft);
  color: var(--you);
}

.agenda-number {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
}

.agenda-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.agenda-copy h3 {
  margin: 0;
  font-size: 1.14rem;
}

.agenda-copy p {
  margin: 0;
  color: var(--ink-2);
}

.agenda-action {
  display: flex;
  justify-content: flex-end;
}

.module-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.module-list li {
  display: grid;
  grid-template-columns: minmax(180px, 0.62fr) minmax(0, 1fr);
  gap: 16px;
  border-top: 1px solid var(--rule-2);
  padding: 13px 0;
}

.module-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.module-list strong {
  font-weight: 600;
}

.module-list span {
  color: var(--ink-2);
}

.scenario-card-top {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.scenario-card.is-selected {
  border-color: var(--you);
  box-shadow: 0 0 0 3px rgba(16, 95, 159, 0.1), var(--shadow);
}

.metric {
  border-top: 4px solid var(--you);
  background: linear-gradient(180deg, #ffffff, #f9fcfe);
  padding: 18px 16px 16px;
}

.metric span {
  display: block;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.metric strong {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
}

.scenario-card {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fafcfe 100%);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.scenario-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--other), var(--you));
}

.scenario-card:hover {
  border-color: var(--ink-3);
  transform: translateY(-1px);
}

.scenario-card h3,
.panel h3 {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.18;
}

.scenario-card p,
.panel p {
  margin: 0;
}

.module-label {
  color: var(--other);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mini-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.mini-tag {
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #f5f8fb;
  color: var(--ink-2);
  padding: 5px 8px;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.quote-stack {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.quote-stack blockquote {
  margin: 0;
  border-left: 3px solid var(--you);
  color: var(--ink-2);
  padding-left: 12px;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.35;
}
.mini-metrics span {
  border-radius: 999px;
  background: #f5f8fb;
  color: var(--ink-2);
  padding: 5px 8px;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.practice-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(360px, 1.48fr) minmax(220px, 0.76fr);
  gap: 18px;
  align-items: start;
}

.left-rail,
.right-rail {
  display: grid;
  gap: 14px;
}

.context-block {
  display: grid;
  gap: 5px;
}

.context-block span {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.context-block p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.45;
}

.conversation {
  display: flex;
  min-height: 620px;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.panel-header {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding: 0 18px;
}

.transcript {
  display: grid;
  align-content: start;
  gap: 12px;
  height: 420px;
  margin: 0;
  overflow: auto;
  padding: 20px 22px;
}

.turn {
  display: grid;
  gap: 6px;
  max-width: 86%;
  border: 1px solid rgba(220, 231, 241, 0.75);
  border-left: 3px solid var(--rule);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.66);
  padding: 12px 16px;
  list-style: none;
  animation: turn-in 0.3s ease both;
}

@keyframes turn-in {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: none; }
}

.turn strong {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.turn p {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink);
}

.turn.student {
  justify-self: end;
  border-left-color: var(--you);
  background: rgba(230, 240, 250, 0.62);
}

.turn.student strong {
  color: var(--you);
}

.turn.persona {
  border-left-color: var(--other);
  background: rgba(244, 231, 220, 0.5);
}

.turn.persona strong {
  color: var(--other);
}

.scene-line {
  max-width: 100%;
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-2);
  padding: 14px 16px;
  line-height: 1.6;
  list-style: none;
}

.persona {
  display: flex;
  gap: 11px;
  align-items: center;
  min-width: 0;
}

.pmark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--other);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(169, 93, 45, 0.22);
}

.persona .nm {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
}

.persona .sb {
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.starters {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--rule);
  padding: 12px 14px 0;
}

.starters .lab {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.starter {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink-2);
  padding: 10px 13px;
  text-align: left;
  font-size: 0.92rem;
  line-height: 1.5;
  transition: border-color 0.14s ease, color 0.14s ease;
  box-shadow: 0 1px 1px rgba(11, 36, 61, 0.025);
}

.starter:hover {
  border-color: var(--you);
  color: var(--ink);
}

.empty-line {
  color: var(--ink-3);
  list-style: none;
}

.typing-dots {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}

.typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--other);
  animation: typing-blink 1.2s infinite;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes typing-blink {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

.composer {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--rule);
  padding: 14px;
}

.compose-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.compose-actions {
  display: flex;
  gap: 8px;
  align-items: end;
}

.voice-btn {
  display: inline-flex;
  min-width: 92px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 700;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.voice-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.voice-btn:hover:not(:disabled) {
  border-color: var(--you);
  background: var(--you-soft);
  color: var(--you);
}

.voice-btn.is-listening {
  border-color: var(--other);
  background: var(--other-soft);
  color: var(--other);
  box-shadow: 0 0 0 3px rgba(169, 93, 45, 0.12);
}

.voice-btn.is-listening svg {
  animation: voice-pulse 1s ease-in-out infinite;
}

@keyframes voice-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.voice-btn:disabled {
  background: #f4f7fa;
  color: var(--ink-3);
}

.send-btn {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 6px;
  background: var(--you);
  color: #ffffff;
  transition: background 0.15s ease;
}

.send-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.send-btn:hover:not(:disabled) {
  background: var(--you-dark);
}

.send-btn:disabled {
  background: var(--rule-2);
  color: var(--ink-3);
}

.compfoot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  color: var(--ink-3);
  font-size: 0.82rem;
}

.voice-status {
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.ring-wrap {
  display: inline-grid;
  justify-items: center;
  gap: 8px;
  min-width: 120px;
}

.ring-wrap p {
  max-width: 190px;
  margin: 0;
  color: var(--ink-2);
  font-size: 0.82rem;
  text-align: center;
}

.ring {
  position: relative;
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--you) calc(var(--value) * 1%), #dce7f2 0);
}

.ring::before {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--surface);
  content: '';
}

.ring span {
  position: relative;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  text-align: center;
}

.bar-list {
  display: grid;
  gap: 12px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(120px, 1fr) 42px;
  gap: 12px;
  align-items: center;
}

.bar-copy {
  display: grid;
  gap: 2px;
}

.bar-copy span {
  color: var(--ink-2);
  font-size: 0.82rem;
}

.bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3edf6;
}

.bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--you);
}

.bar-row em {
  color: var(--ink-3);
  font-family: var(--mono);
  font-style: normal;
  text-align: right;
}

.heatmap-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.heat-cell {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(196, 112, 59, calc(var(--heat) * 0.55));
  border-radius: 8px;
  background: rgba(196, 112, 59, calc(var(--heat) * 0.12));
  padding: 12px;
}

.heat-cell span {
  font-family: var(--mono);
  font-weight: 500;
}

.clean-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.compact-list {
  gap: 5px;
}

.form-panel {
  display: grid;
  gap: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.full-span {
  grid-column: 1 / -1;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--rule);
  padding: 11px 8px;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.prompt-text {
  font-family: var(--serif);
  font-size: 1.34rem;
  font-weight: 400;
  line-height: 1.32;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  max-width: min(420px, calc(100vw - 36px));
  border-radius: 8px;
  background: var(--ink);
  color: white;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- components ported from the world-map edition ---- */

.label {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.keyline {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.keyline::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.viz-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.76fr) minmax(420px, 1.24fr);
  gap: 28px;
  align-items: stretch;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid #bfd1e3;
  border-radius: 10px;
  background: linear-gradient(180deg, #f7fafd, #ffffff);
  padding: 34px;
  box-shadow: 0 2px 4px rgba(11, 36, 61, 0.045), 0 22px 60px rgba(11, 36, 61, 0.09);
}

.viz-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-top: 4px solid var(--you);
  pointer-events: none;
}

.viz-hero .landing-map {
  z-index: 0;
  opacity: 0.7;
}

.viz-copy,
.viz-board {
  position: relative;
  z-index: 2;
}

.viz-copy {
  display: grid;
  align-content: center;
  min-width: 0;
}

.viz-copy h2 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.35rem, 5vw, 3.7rem);
  line-height: 1.04;
}

.viz-copy .lede {
  max-width: 52ch;
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: 1.03rem;
  line-height: 1.62;
}

.viz-board {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(240px, 1fr);
  gap: 14px;
  align-content: stretch;
  min-width: 0;
}

.instructor-viz-board {
  grid-template-columns: minmax(0, 1.1fr) minmax(190px, 0.58fr);
}

.compact-viz-hero .viz-board {
  grid-template-columns: 1fr;
}

.viz-ring-card,
.viz-stat,
.viz-panel-wide {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(11, 36, 61, 0.035);
}

.viz-ring-card {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: center;
  min-height: 210px;
  padding: 18px;
  text-align: center;
}

.viz-ring-card span,
.viz-stat span {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.viz-ring-card p,
.viz-stat em,
.scenario-signal p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.45;
}

.viz-ring-dial {
  position: relative;
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--you) calc(var(--value) * 1%), #dce7f2 0);
}

.viz-ring-dial::before {
  content: '';
  position: absolute;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #ffffff;
}

.viz-ring-dial strong {
  position: relative;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
}

.viz-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.viz-stat-grid.two-up {
  grid-template-columns: 1fr;
}

.viz-stat {
  display: grid;
  gap: 8px;
  align-content: center;
  min-height: 98px;
  padding: 16px;
}

.viz-stat strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 400;
  line-height: 1;
}

.viz-panel-wide {
  grid-column: 1 / -1;
  padding: 16px;
}

.viz-bars {
  display: flex;
  gap: 10px;
  align-items: end;
  min-height: 128px;
  padding-top: 8px;
}

.viz-bars span {
  display: grid;
  flex: 1;
  gap: 7px;
  align-items: end;
  min-width: 18px;
  height: 122px;
}

.viz-bars i {
  display: block;
  height: calc(var(--h) * 1%);
  min-height: 10px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--you), #77a9d2);
}

.viz-bars em {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-style: normal;
  text-align: center;
}

.scenario-signal {
  display: grid;
  gap: 6px;
}

.scenario-signal strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.24rem;
  font-weight: 500;
  line-height: 1.2;
}

.viz-funnel {
  display: grid;
  gap: 13px;
}

.viz-funnel-row {
  display: grid;
  grid-template-columns: minmax(105px, 0.58fr) minmax(130px, 1fr) 34px;
  gap: 12px;
  align-items: center;
}

.viz-funnel-row strong {
  display: block;
  font-size: 0.9rem;
}

.viz-funnel-row span {
  display: block;
  color: var(--ink-3);
  font-size: 0.75rem;
  line-height: 1.3;
}

.viz-funnel-row em {
  color: var(--ink);
  font-family: var(--mono);
  font-style: normal;
  text-align: right;
}

.viz-funnel-track {
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3edf6;
}

.viz-funnel-track i,
.viz-skill-bars i,
.viz-scenario-bars i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--you);
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--delay, 0s);
}

.viz-dotgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18px, 1fr));
  gap: 10px;
  align-items: center;
}

.viz-dotgrid span {
  display: block;
  aspect-ratio: 1;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: #edf3f8;
}

.viz-dotgrid .is-started {
  background: var(--you-soft);
  border-color: #a8c7e2;
}

.viz-dotgrid .is-complete {
  background: var(--you);
  border-color: var(--you);
}

.viz-dotgrid .is-reflected {
  background: var(--other);
  border-color: var(--other);
}

.viz-skill-bars,
.viz-scenario-bars {
  display: grid;
  gap: 12px;
}

.viz-skill-bars div,
.viz-scenario-bars div {
  display: grid;
  gap: 6px;
}

.viz-skill-bars div {
  grid-template-columns: minmax(110px, 0.7fr) minmax(44px, auto) minmax(140px, 1fr);
  align-items: center;
}

.viz-skill-bars span,
.viz-scenario-bars span {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.2;
}

.viz-skill-bars strong,
.viz-scenario-bars em {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-style: normal;
}

.viz-skill-bars i,
.viz-scenario-bars div div {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3edf6;
}

.viz-scenario-bars div div i {
  background: linear-gradient(90deg, var(--other), var(--you));
}

.viz-heatgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.viz-heatgrid span {
  display: grid;
  gap: 8px;
  min-height: 86px;
  align-content: center;
  border: 1px solid rgba(169, 93, 45, calc(var(--heat) * 0.55));
  border-radius: 8px;
  background: rgba(169, 93, 45, calc(var(--heat) * 0.15));
  padding: 12px;
}

.viz-heatgrid strong {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.25;
}

.viz-heatgrid em {
  color: var(--other);
  font-family: var(--mono);
  font-style: normal;
  font-weight: 700;
}

.viz-empty {
  display: grid;
  min-height: 110px;
  place-items: center;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-align: center;
}
.hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid #bfd1e3;
  border-radius: 10px;
  background: linear-gradient(180deg, #f7fafd, #ffffff);
  box-shadow: 0 2px 4px rgba(11, 36, 61, 0.045), 0 22px 60px rgba(11, 36, 61, 0.09);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-top: 4px solid var(--you);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 52%, rgba(255, 255, 255, 0.66) 100%);
  pointer-events: none;
}

.hero .inner {
  position: relative;
  z-index: 2;
  padding: 42px 38px;
}

.hero h2 {
  max-width: 20ch;
  margin: 0.1em 0 0;
  font-size: clamp(1.9rem, 3.6vw, 2.4rem);
  line-height: 1.12;
}

.hero .lede {
  max-width: 52ch;
  margin: 12px 0 0;
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 40px;
  align-items: end;
}

.meta-list {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--you);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px 16px 0;
  box-shadow: 0 1px 2px rgba(11, 36, 61, 0.035);
}

.meta-list .mi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding: 11px 0;
}

.meta-list .mi:last-child {
  border-bottom: none;
}

.meta-list .mk {
  color: var(--ink-2);
  font-size: 0.92rem;
}

.meta-list .mv {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.spark {
  display: inline-flex;
  gap: 2px;
  align-items: flex-end;
  height: 14px;
  margin-left: 8px;
  vertical-align: middle;
}

.spark i {
  display: inline-block;
  width: 3px;
  background: var(--you);
}

.assigned {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 68%, rgba(230, 240, 250, 0.62) 100%);
  padding: 20px 24px;
  box-shadow: var(--shadow);
}

.assigned::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--other);
}

.assigned h3 {
  margin: 6px 0 0;
  font-size: 1.35rem;
}

.assigned p {
  max-width: 62ch;
  margin: 7px 0 0;
  color: var(--ink-2);
}

.idx {
  color: var(--you);
  font-family: var(--serif);
  font-size: 2.9rem;
  font-weight: 400;
  line-height: 0.8;
  font-variant-numeric: tabular-nums;
  opacity: 0.62;
  padding-left: 8px;
}

.track-k {
  color: var(--other);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cast-row {
  display: flex;
  gap: 18px;
  align-items: center;
}

.cast-row p {
  max-width: 44ch;
  margin: 0;
  color: var(--ink-2);
  font-size: 0.92rem;
}

.cast {
  display: flex;
}

.cast .c {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 50%;
  margin-left: -8px;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px rgba(11, 36, 61, 0.14);
}

.cast .c:first-child {
  margin-left: 0;
}

.briefrow {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 18px;
  border-top: 1px solid var(--rule-2);
  padding: 18px 0;
}

.briefrow:first-child {
  border-top: none;
  padding-top: 0;
}

.briefrow .bn {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: #f7fafd;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.briefrow .rk {
  margin-bottom: 3px;
  color: var(--ink);
  font-weight: 600;
}

.briefrow .rv {
  color: var(--ink-2);
  line-height: 1.6;
}

.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 24px;
  border: 1px solid rgba(169, 93, 45, 0.24);
  border-left: 4px solid var(--other);
  border-radius: 8px;
  background: rgba(244, 231, 220, 0.52);
  color: var(--ink-2);
  padding: 15px 18px;
  line-height: 1.6;
}

.notice b {
  color: var(--ink);
}

.brief-cta {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 26px;
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--you);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.stat {
  flex: 1;
  min-width: 140px;
  border-right: 1px solid var(--rule);
  background: linear-gradient(180deg, #ffffff, #f9fcfe);
  padding: 20px 22px;
}

.stat:last-child {
  border-right: none;
}

.stat .n {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat .k {
  margin-top: 7px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.obs {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  border-top: 1px solid var(--rule-2);
  padding: 13px 0;
}

.obs:first-child {
  border-top: none;
}

.obs .mk {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  margin-top: 3px;
}

.obs .mk svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.obs p {
  margin: 0;
  line-height: 1.6;
}

.pullprompt {
  border: 1px solid var(--rule);
  border-top: 4px solid var(--other);
  border-radius: 8px;
  background: #ffffff;
  padding: 24px 26px;
  box-shadow: 0 12px 30px rgba(11, 36, 61, 0.06);
}

.pullprompt .q {
  max-width: 34ch;
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.36;
}

.pullprompt .primary {
  margin-top: 18px;
}

.figcap {
  margin: 14px 0 0;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.figcap b {
  color: var(--ink-2);
  font-weight: 500;
}

.reflection-report {
  display: grid;
  gap: 24px;
}

.reflection-hero {
  width: min(760px, 100%);
  margin: 0 auto 4px;
  padding: 12px 6px 0;
}

.reflection-hero h2 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(3rem, 7vw, 4.35rem);
  line-height: 1.02;
}

.reflection-hero .lede {
  max-width: 58ch;
  margin: 22px 0 0;
  color: var(--ink-2);
  font-size: 1.08rem;
  line-height: 1.65;
}

.reflection-stat-row {
  width: min(860px, 100%);
  margin: 18px auto 18px;
}

.reflection-stat-row .stat {
  min-height: 120px;
  padding: 25px 26px;
}

.reflection-stat-row .stat .n {
  font-size: clamp(2rem, 4vw, 2.55rem);
}

.reflection-figures {
  align-items: stretch;
  margin-bottom: 0;
}

.reflection-figure {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 330px;
}

.reflection-chart {
  display: grid;
  min-height: 164px;
  align-items: center;
  overflow-x: auto;
}

.reflection-observations,
.reflection-class-prompt,
.reflection-intake,
.reflection-form-card {
  width: min(860px, 100%);
  margin: 0 auto;
}

.reflection-intake {
  display: grid;
  gap: 16px;
  border-top: 4px solid var(--other);
  padding: 24px 28px;
}

.reflection-intake-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.reflection-intake-head .keyline {
  flex: 1;
  min-width: 0;
}

.reflection-intake-head .secondary {
  min-height: 36px;
  padding: 8px 12px;
}

.reflection-intake-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.reflection-intake-grid div {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.78);
  padding: 14px;
}

.reflection-intake-grid span {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reflection-intake-grid strong {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.reflection-class-prompt {
  padding: 28px 30px;
}

.reflection-class-prompt .q {
  max-width: 30ch;
  font-size: clamp(1.85rem, 4vw, 2.35rem);
}

.reflection-form-card {
  display: grid;
  gap: 22px;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--you);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  padding: 26px 30px 30px;
  box-shadow: var(--shadow);
}

.reflection-form-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.reflection-form-head h3 {
  margin: 6px 0 0;
  font-size: 1.55rem;
  line-height: 1.18;
}

.reflection-prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.reflection-question {
  display: grid;
  gap: 9px;
  min-width: 0;
  border-top: 1px solid var(--rule-2);
  padding-top: 14px;
}

.prompt-index {
  color: var(--other);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.reflection-question label {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.28;
  text-transform: none;
}

.reflection-question textarea {
  min-height: 116px;
  border-radius: 7px;
  line-height: 1.55;
}

.reflection-controls {
  display: grid;
  grid-template-columns: minmax(130px, 0.42fr) minmax(130px, 0.42fr) minmax(240px, 1fr);
  gap: 14px;
  align-items: end;
}

.reflection-controls textarea {
  min-height: 74px;
}

.reflection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.reflection-footnote {
  width: min(860px, 100%);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.pi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-bottom: 24px;
}

.pi-card {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.pi-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--you), rgba(16, 95, 159, 0.18));
}

.pi-card:hover {
  border-color: #afc4d9;
  transform: translateY(-2px);
}

.pi-card h3 {
  margin: 0;
  color: var(--you);
  font-size: 1.35rem;
}

.pi-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  line-height: 1.55;
}

.brief-empty {
  margin: 0;
  color: var(--ink-2);
}

/* Empty figure that carries the action which fills it. */
.figure-empty {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: 18px;
  border: 1px dashed var(--rule);
  border-radius: 10px;
  background: var(--you-soft);
}

.figure-empty p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.55;
}

.agenda-step {
  position: relative;
  overflow: hidden;
}

.agenda-step.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--other);
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.step-tile {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.step-tile:hover {
  border-color: #afc4d9;
  transform: translateY(-1px);
}

.step-tile::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--rule-2);
}

.step-tile.is-complete::before {
  background: var(--you);
}

.step-tile.is-active::before {
  background: var(--other);
}

.step-top {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.step-num {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--you-soft);
  color: var(--you);
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1;
}

.step-tile.is-complete .step-num {
  border-color: var(--you);
  background: var(--you);
  color: #ffffff;
}

.step-tile h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.2;
}

.step-tile p {
  min-height: 2.9em;
  margin: 0;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.5;
}

.step-tile .primary,
.step-tile .secondary {
  justify-self: start;
  min-height: 38px;
  padding: 0 14px;
}

.scenario-number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--you-soft);
  color: var(--you);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
}

.status-pill.is-selected {
  background: var(--you-soft);
  color: var(--you);
}

.status-pill.is-available {
  background: var(--other-soft);
  color: var(--other);
}

@media (max-width: 1120px) {
  .practice-layout,
  .scenario-grid,
  .results-story,
  .hero-grid,
  .landing-view {
    grid-template-columns: 1fr;
  }

  .metric-grid,
  .two-column,
  .step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .access-form,
  .role-grid,
  .metric-grid,
  .two-column,
  .form-grid,
  .agenda-step,
  .pi-grid,
  .assigned,
  .step-grid,
  .module-list li {
    grid-template-columns: 1fr;
  }

  .hero .inner {
    padding: 30px 22px;
  }

  .hero::after {
    background: rgba(255, 255, 255, 0.9);
  }

  .stat-row {
    flex-direction: column;
  }

  .stat {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }

  .stat:last-child {
    border-bottom: none;
  }

  .brief-cta {
    flex-wrap: wrap;
  }

  .sidebar {
    position: static;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }

  .tabs {
    gap: 18px;
  }

  .tab {
    min-height: 42px;
  }

  .session-card {
    justify-content: space-between;
  }

  .main,
  .access-screen,
  .access-panel {
    padding: 18px;
  }

  .page-head,
  .story-band {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .page-head {
    flex-direction: column;
  }
  .landing-view {
    padding: 34px 24px;
  }

  .landing-view::after {
    background: rgba(255, 255, 255, 0.9);
  }

  .agenda-action {
    justify-content: stretch;
  }

  .agenda-action .primary,
  .agenda-action .secondary {
    width: 100%;
  }

  .composer,
  .bar-row,
  .heatmap-list {
    grid-template-columns: 1fr;
  }

  .compose-row {
    grid-template-columns: 1fr;
  }

  .compose-actions {
    justify-content: stretch;
  }

  /* Scoped to the composer this was written for. As a bare class it also hit
     the conversation composer, where between 721 and 860px nothing overrode
     it: the voice button took the whole row and the message box collapsed to
     32px. A participant in the first class hit exactly that, narrowing the
     window to keep the case visible, and reported that only voice was offered
     and typing did not work. */
  .compose-actions .voice-btn,
  .compose-actions .send-btn {
    width: 100%;
  }

  .turn {
    max-width: 100%;
  }
}

@media (max-width: 860px) {
  .reflection-hero {
    padding-top: 0;
  }

  .reflection-hero h2 {
    font-size: clamp(2.55rem, 13vw, 3.25rem);
  }

  .reflection-prompt-grid,
  .reflection-controls {
    grid-template-columns: 1fr;
  }

  .reflection-intake-head,
  .reflection-intake-grid {
    grid-template-columns: 1fr;
  }

  .reflection-intake-head {
    display: grid;
  }

  .reflection-form-head {
    display: grid;
  }

  .reflection-form-card,
  .reflection-class-prompt,
  .reflection-intake {
    padding: 22px;
  }

  .reflection-stat-row .stat {
    min-height: auto;
  }

  .reflection-actions .primary,
  .reflection-actions .secondary {
    width: 100%;
  }
}
@media (max-width: 1120px) {
  .viz-hero,
  .viz-board,
  .instructor-viz-board {
    grid-template-columns: 1fr;
  }

  .viz-copy h2 {
    max-width: 18ch;
  }

  .viz-stat-grid.two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .viz-hero {
    padding: 24px 20px;
  }

  .viz-copy h2 {
    font-size: clamp(2.2rem, 12vw, 3rem);
  }

  .viz-stat-grid,
  .viz-stat-grid.two-up,
  .viz-funnel-row,
  .viz-skill-bars div {
    grid-template-columns: 1fr;
  }

  .viz-ring-card {
    min-height: 180px;
  }

  .viz-funnel-row em {
    text-align: left;
  }

  .viz-heatgrid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
/* wrap-up nudge + reflection gap figure */
.wrapup-nudge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 12px 14px 0;
  border: 1px solid rgba(169, 93, 45, 0.24);
  border-left: 4px solid var(--other);
  border-radius: 8px;
  background: rgba(244, 231, 220, 0.52);
  color: var(--ink-2);
  padding: 10px 14px;
  line-height: 1.5;
}

.wrapup-nudge span {
  flex: 1;
  min-width: 220px;
}

.wrapup-nudge .primary {
  min-height: 38px;
  padding: 0 14px;
}

.viz-legend {
  display: flex;
  gap: 20px;
  margin: 2px 0 14px;
}

.viz-legend .li {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
}

.viz-legend .li i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

/* communication snapshot */
.snapshot-grid {
  display: grid;
  gap: 4px;
}

.snapshot-row {
  border-top: 1px solid var(--rule-2);
  padding: 14px 0 12px;
}

.snapshot-row:first-child {
  border-top: none;
}

.snapshot-prompt {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.08rem;
}

.snapshot-scale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.snapshot-side {
  color: var(--ink-2);
  font-size: 0.85rem;
  line-height: 1.4;
}

.snapshot-side.is-right {
  text-align: right;
}

.snap-dots {
  display: flex;
  gap: 10px;
  align-items: center;
}

.snap-dot {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  padding: 0;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}

.snap-dot:nth-child(1),
.snap-dot:nth-child(5) {
  width: 22px;
  height: 22px;
}

.snap-dot:hover {
  border-color: var(--you);
  transform: scale(1.1);
}

.snap-dot.is-on {
  border-color: var(--you);
  background: var(--you);
  box-shadow: 0 0 0 3px rgba(16, 95, 159, 0.16);
}

@media (max-width: 860px) {
  .snapshot-scale {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .snapshot-side.is-right {
    text-align: left;
  }
}

/* past conversations */
.history-panel {
  padding: 8px 12px;
}

.history-list {
  display: grid;
}

.history-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 20px;
  gap: 14px;
  align-items: center;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--rule-2);
  background: transparent;
  color: var(--ink);
  padding: 13px 8px;
  text-align: left;
  transition: background 0.14s ease;
}

.history-row:first-child {
  border-top: none;
}

.history-row:hover {
  background: rgba(230, 240, 250, 0.45);
}

.history-row svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.history-idx {
  color: var(--you);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.62;
  font-variant-numeric: tabular-nums;
}

.history-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.history-main strong {
  font-weight: 600;
  line-height: 1.25;
}

.history-main span {
  color: var(--ink-2);
  font-size: 0.85rem;
}

@media (max-width: 860px) {
  .history-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .history-row svg {
    display: none;
  }
}

/* --- Thunderbird branding, PI weave, bonus challenge, intake voice, print --- */

.brand-school {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tbird-blue);
}

.sidebar-school {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-2);
  line-height: 1.6;
}

/* Official co-branded Thunderbird-ASU logo. Rendered unaltered from
   public/assets/thunderbird-asu-logo.png (download: thunderbird.asu.edu/brand);
   the img hides itself until that file is present. */
.brand-logo {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
  margin: 0 0 16px;
}

.brand-logo-sidebar {
  max-width: 180px;
  margin: 18px 0 0;
}

.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.label-row .voice-btn {
  flex: 0 0 auto;
}

.pi-woven {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--rule-2);
  color: var(--ink-3);
  font-size: 0.8rem;
  line-height: 1.55;
}

.pi-woven b {
  color: var(--ink-2);
  font-weight: 600;
}

.status-pill.bonus-pill {
  border-color: rgba(0, 46, 95, 0.35);
  background: rgba(255, 198, 39, 0.18);
  color: var(--tbird-blue);
}

.notice.bonus-notice {
  border-left-color: var(--tbird-blue);
  background: rgba(255, 198, 39, 0.12);
}

.print-only {
  display: none;
}

@media print {
  .disclosure > summary {
    display: none !important;
  }

  .disclosure > .disclosure-body {
    display: block !important;
    padding: 0;
    border-top: 0;
  }

  .disclosure {
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  @page {
    margin: 16mm 14mm;
  }

  body {
    background: #fff;
    font-size: 12px;
  }

  #worldbg,
  .sidebar,
  .toast,
  .toolbar-actions,
  .brief-cta,
  .reflection-actions,
  .starters,
  .wrapup-nudge,
  .composer,
  button {
    display: none !important;
  }

  .app-shell {
    display: block;
  }

  .main {
    max-width: none;
    padding: 0;
  }

  .print-only {
    display: block;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--tbird-blue);
  }

  #print-header strong {
    display: block;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tbird-blue);
  }

  #print-header span {
    display: block;
    margin-top: 4px;
    color: var(--ink-2);
    font-size: 0.78rem;
  }

  .panel,
  .stat-row,
  .pullprompt,
  .reflection-observations,
  .reflection-figure {
    box-shadow: none !important;
    break-inside: avoid;
  }

  .two-column {
    display: block;
  }

  .two-column > * {
    margin-bottom: 14px;
  }
}

/* ---- evidence-to-action product narrative ---- */
.page-intro {
  max-width: 68ch;
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.6;
}

.trust-pill {
  border: 1px solid rgba(16, 95, 159, 0.2);
  background: var(--you-soft);
  color: var(--you-dark);
}

.loop-panel {
  margin-bottom: 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 198, 39, 0.1), transparent 35%),
    rgba(255, 255, 255, 0.94);
}

.learning-loop {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #f7fafd;
}

.learning-loop-stage {
  position: relative;
  display: grid;
  min-height: 142px;
  gap: 5px;
  align-content: center;
  padding: 20px 22px;
  border-right: 1px solid var(--rule);
}

.learning-loop-stage:last-child {
  border-right: 0;
  background: linear-gradient(145deg, rgba(255, 198, 39, 0.14), rgba(255, 255, 255, 0.8));
}

.learning-loop-stage:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -8px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  background: #f7fafd;
  content: '';
  transform: translateY(-50%) rotate(45deg);
}

.learning-loop-stage > span,
.decision-story article > span {
  color: var(--you);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.learning-loop-stage strong {
  font-size: 0.94rem;
}

.learning-loop-stage em {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 2rem;
  font-style: normal;
  line-height: 1;
}

.learning-loop-stage small {
  color: var(--ink-3);
  line-height: 1.3;
}

.decision-story {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: white;
  box-shadow: var(--shadow);
}

.decision-story article {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 205px;
  padding: 24px;
  border-right: 1px solid var(--rule);
}

.decision-story article:last-child {
  border-right: 0;
}

.decision-story article:not(:last-child)::after {
  position: absolute;
  top: 32px;
  right: -17px;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: white;
  color: var(--you);
  content: '→';
}

.decision-story strong {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
}

.decision-story p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.5;
}

.decision-story .decision-action {
  background: linear-gradient(145deg, #f5f9fd, #ffffff);
}

.decision-story button {
  width: fit-content;
  margin-top: auto;
}

.review-section-head {
  display: flex;
  gap: 28px;
  align-items: end;
  justify-content: space-between;
  margin: 36px 0 18px;
}

.review-section-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 500;
}

.review-section-head > p {
  max-width: 48ch;
  margin: 0;
  color: var(--ink-2);
}

.review-grid {
  align-items: stretch;
}

.review-card {
  grid-template-rows: auto auto auto 1fr auto auto;
}

.review-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.review-card-top > strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 400;
}

.status-approved {
  background: #e3f3eb;
  color: #14613c;
}

.status-dismissed {
  background: #f1f2f4;
  color: #5c6873;
}

.status-pending_review,
.status-in_review {
  background: #fff4d5;
  color: #765300;
}

.human-gate {
  display: grid;
  gap: 3px;
  border-left: 3px solid var(--gold);
  background: rgba(255, 198, 39, 0.1);
  padding: 10px 12px;
}

.human-gate span {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.human-gate small {
  color: var(--ink-2);
}

.feedback-compose {
  align-items: start;
}

.form-step {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.submission-list li {
  gap: 7px;
  border-bottom: 1px solid var(--rule-2);
  padding: 12px 0;
}

.submission-list li:first-child {
  padding-top: 0;
}

.submission-list li > div {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.feedback-signal-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.feedback-score {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px;
}

.feedback-score strong {
  grid-row: 1 / 3;
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1;
}

.feedback-score span {
  color: var(--ink);
  font-weight: 600;
}

.feedback-score small {
  color: var(--ink-3);
}

.route-viz {
  display: grid;
  gap: 15px;
}

.route-viz > div {
  display: grid;
  grid-template-columns: minmax(92px, 0.6fr) minmax(100px, 1fr) minmax(110px, 0.72fr) 24px;
  gap: 10px;
  align-items: center;
}

.route-viz span,
.route-viz strong {
  font-size: 0.78rem;
}

.route-viz span {
  color: var(--ink-3);
}

.route-viz i {
  position: relative;
  height: 18px;
}

.route-viz i::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--rule);
  content: '';
}

.route-viz b {
  position: absolute;
  top: 4px;
  left: 0;
  width: calc(var(--route) * 1%);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--other), var(--you));
}

.route-viz em {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-style: normal;
  text-align: right;
}

@media (max-width: 900px) {
  .learning-loop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learning-loop-stage:nth-child(2) {
    border-right: 0;
  }

  .learning-loop-stage:nth-child(2)::after {
    display: none;
  }

  .decision-story,
  .feedback-signal-grid {
    grid-template-columns: 1fr;
  }

  .decision-story article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .decision-story article:last-child {
    border-bottom: 0;
  }

  .decision-story article::after {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .learning-loop {
    grid-template-columns: 1fr;
  }

  .learning-loop-stage {
    min-height: 112px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .learning-loop-stage:last-child {
    border-bottom: 0;
  }

  .learning-loop-stage::after {
    display: none !important;
  }

  .review-section-head {
    display: grid;
  }

  .route-viz > div {
    grid-template-columns: 1fr 24px;
  }

  .route-viz span,
  .route-viz i {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viz-funnel-track i,
  .viz-skill-bars i,
  .viz-scenario-bars i,
  .arc {
    transition: none !important;
  }
}
/* ---- Experience 2.0 shell: visible on every role and every page ---- */
:root {
  --maxw: 1240px;
}

.brand-logo-sidebar,
.sidebar-school {
  display: none;
}

.sidebar {
  min-height: 76px;
  border-top: 4px solid var(--tbird-gold);
  background: rgba(255, 255, 255, 0.97);
}

.sidebar .brand-mark {
  border-color: var(--tbird-blue);
  background: var(--tbird-blue);
  color: white;
}

.sidebar .brand-row h1 {
  color: var(--tbird-blue);
}

.tabs {
  gap: 20px;
}

.main {
  padding-top: 24px;
}

.experience-context {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.92fr) minmax(360px, 1fr) auto;
  gap: 28px;
  align-items: center;
  overflow: hidden;
  margin-bottom: 28px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 78% -40%, rgba(255, 198, 39, 0.28), transparent 34%),
    linear-gradient(120deg, #002e5f, #06477f);
  color: white;
  padding: 22px 26px;
  box-shadow: 0 18px 42px rgba(0, 46, 95, 0.2);
}

.experience-context::after {
  position: absolute;
  right: -42px;
  bottom: -58px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  content: '';
}

.experience-context > div:first-child {
  display: grid;
  gap: 5px;
}

.experience-context #experience-kicker {
  color: var(--tbird-gold);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.experience-context #experience-title {
  max-width: 38ch;
  color: white;
  font-family: var(--serif);
  font-size: clamp(1.24rem, 2vw, 1.65rem);
  font-weight: 500;
  line-height: 1.2;
}

.experience-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(74px, 1fr));
  gap: 4px;
}

.experience-path span {
  position: relative;
  display: grid;
  gap: 3px;
  border-top: 2px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  padding-top: 7px;
  font-size: 0.75rem;
  font-weight: 600;
}

.experience-path span:first-child {
  border-color: var(--tbird-gold);
}

.experience-path i {
  color: rgba(255, 255, 255, 0.56);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.06em;
}

.release-badge {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  color: white;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 0.75rem;
  white-space: nowrap;
}

@media (max-width: 1050px) {
  .experience-context {
    grid-template-columns: 1fr auto;
  }

  .experience-path {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 860px) {
  .sidebar {
    border-top-width: 3px;
  }

  .experience-context {
    grid-template-columns: 1fr;
    gap: 16px;
    border-radius: 9px;
    padding: 20px;
  }

  .release-badge {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .experience-context > div:first-child {
    padding-right: 118px;
  }
}

@media (max-width: 520px) {
  .experience-context > div:first-child {
    padding-right: 0;
  }

  .release-badge {
    position: static;
    width: fit-content;
  }

  .experience-path {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ---- Official co-brand lockup within the Experience 2.0 shell ---- */
.experience-context {
  grid-template-columns: 190px minmax(220px, 0.78fr) minmax(340px, 1fr) auto;
  gap: 24px;
  min-height: 154px;
  padding: 18px 24px;
}

.experience-brand {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 116px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  background: white;
  padding: 9px 12px;
  box-shadow: 0 10px 28px rgba(0, 20, 45, 0.22);
}

.experience-brand img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 98px;
  object-fit: contain;
}

.experience-copy {
  display: grid;
  gap: 7px;
  align-content: center;
}

.experience-context .experience-copy #experience-kicker {
  color: var(--tbird-gold);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.experience-context .experience-copy #experience-title {
  max-width: 34ch;
  color: white;
  font-family: var(--serif);
  font-size: clamp(1.18rem, 1.8vw, 1.55rem);
  font-weight: 500;
  line-height: 1.2;
}

@media (max-width: 1180px) {
  .experience-context {
    grid-template-columns: 170px 1fr auto;
  }

  .experience-path {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .experience-brand {
    grid-row: 1 / 3;
  }
}

@media (max-width: 820px) {
  .experience-context {
    grid-template-columns: 150px 1fr;
  }

  .experience-brand {
    grid-row: 1;
    min-height: 96px;
  }

  .experience-path {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .experience-copy {
    padding-right: 105px;
  }
}

@media (max-width: 560px) {
  .experience-context {
    grid-template-columns: 1fr;
  }

  .experience-brand {
    width: min(210px, 100%);
    min-height: 110px;
  }

  .experience-copy {
    padding-right: 0;
  }
}

/* ---- Studio design pass: the conversation route ----
   The landing map carries the visual identity. Working screens stay quiet so
   evidence, reflection, and next actions remain the loudest elements. */
:root {
  --paper: #eef3f7;
  --surface: #ffffff;
  --ink: #08243e;
  --ink-2: #29475f;
  --ink-3: #62768a;
  --rule: #bdccd8;
  --rule-2: #dce5ec;
  --you: #075f98;
  --you-dark: #003f6d;
  --you-soft: #dfedf5;
  --other: #b84f38;
  --other-soft: #f4e5df;
  --map: #1583a4;
  --shadow: 0 18px 50px rgba(8, 36, 62, 0.09);
  --maxw: 1180px;
}

body {
  background:
    linear-gradient(90deg, transparent 0, transparent calc(50% - 1px), rgba(0, 46, 95, 0.035) 50%, transparent calc(50% + 1px)),
    var(--paper);
  background-size: min(100%, 1180px) 100%, auto;
}

#worldbg {
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.26) 48%, transparent 76%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.26) 48%, transparent 76%);
}

#worldbg svg {
  opacity: 0.12;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--tbird-gold);
  outline-offset: 3px;
}

.access-screen {
  padding: clamp(18px, 4vw, 56px);
}

.landing-view {
  grid-template-columns: minmax(0, 1.14fr) minmax(340px, 0.86fr);
  gap: clamp(38px, 6vw, 88px);
  width: min(1180px, 100%);
  min-height: min(760px, calc(100vh - 72px));
  align-items: center;
  border: 1px solid rgba(0, 46, 95, 0.3);
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.94) 54%, rgba(0, 46, 95, 0.98) 54.1%, rgba(0, 46, 95, 0.94) 100%),
    #f9fbfc;
  padding: clamp(38px, 6vw, 78px);
  box-shadow: 0 28px 80px rgba(0, 46, 95, 0.14);
}

.landing-view::before {
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: 8px;
  height: auto;
  border: 0;
  background: var(--tbird-gold);
}

.landing-view::after {
  inset: 0 0 0 auto;
  width: 46%;
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 198, 39, 0.2), transparent 22%),
    radial-gradient(circle at 76% 72%, rgba(75, 172, 195, 0.2), transparent 28%),
    linear-gradient(135deg, rgba(0, 46, 95, 0.2), rgba(0, 46, 95, 0));
}

.landing-map {
  z-index: 1;
}

.landing-map svg {
  top: 50%;
  right: -14%;
  height: 124%;
  opacity: 0.64;
}

.landing-map .dot {
  fill: #4bacc3;
  opacity: 0.11;
}

.landing-map .arc {
  stroke: var(--tbird-gold);
  stroke-width: 1.2;
  opacity: 0.48;
}

.landing-map .node {
  fill: var(--tbird-gold);
}

.landing-map .nodering {
  stroke: var(--tbird-gold);
  opacity: 0.55;
}

.landing-copy {
  align-self: center;
  max-width: 700px;
}

.landing-copy .brand-logo {
  width: min(250px, 68%);
  margin: 0 0 clamp(52px, 8vh, 92px);
}

.landing-copy .eyebrow {
  margin-bottom: 16px;
  color: var(--you-dark);
}

.landing-copy h1 {
  max-width: 12.5ch;
  font-size: clamp(3.1rem, 6.2vw, 5.7rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.91;
}

.landing-lede {
  max-width: 54ch;
  margin-top: 28px;
  border-left: 1px solid var(--other);
  padding-left: 20px;
  font-size: clamp(1.12rem, 1.7vw, 1.32rem);
  line-height: 1.65;
}

.landing-actions {
  margin-top: 34px;
}

.landing-actions .primary {
  min-height: 52px;
  border-color: var(--tbird-gold);
  border-radius: 2px;
  background: var(--tbird-gold);
  box-shadow: none;
  color: var(--tbird-blue);
  padding-inline: 24px;
}

.landing-actions .primary:hover:not(:disabled) {
  border-color: var(--tbird-blue);
  background: var(--tbird-blue);
  color: white;
}

.access-panel {
  border: 1px solid var(--rule);
  border-top: 8px solid var(--tbird-gold);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 48px);
}

.role-card,
.panel,
.story-band,
.metric,
.scenario-card,
.empty-state,
.agenda-step,
.disclosure {
  border-radius: 2px;
  box-shadow: none;
}

.role-card {
  border-top: 3px solid var(--rule);
  background: var(--surface);
}

.role-card:hover,
.role-card.is-active {
  border-top-color: var(--tbird-gold);
  border-right-color: var(--you);
  border-bottom-color: var(--you);
  border-left-color: var(--you);
  background: var(--you-soft);
  box-shadow: none;
  transform: none;
}

.sidebar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 70px;
  gap: 30px;
  border-top: 5px solid var(--tbird-gold);
  border-bottom-color: rgba(0, 46, 95, 0.18);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 28px rgba(8, 36, 62, 0.06);
}

.sidebar .brand-mark {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--tbird-blue);
  box-shadow: 0 0 0 4px rgba(255, 198, 39, 0.3);
}

.sidebar .brand-row h1 {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tabs {
  gap: 28px;
}

.tab {
  min-height: 65px;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.tab.is-active::after {
  height: 4px;
  background: var(--tbird-gold);
}

.main {
  padding: 28px 30px 100px;
}

.experience-context {
  grid-template-columns: 136px minmax(220px, 0.8fr) minmax(360px, 1.25fr);
  gap: 26px;
  min-height: 112px;
  margin-bottom: 40px;
  border-radius: 2px;
  background:
    linear-gradient(105deg, rgba(0, 46, 95, 0.98), rgba(3, 73, 112, 0.95)),
    var(--tbird-blue);
  padding: 16px 22px;
  box-shadow: none;
}

.experience-context::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: var(--tbird-gold);
  content: '';
}

.experience-context::after {
  right: 18%;
  bottom: -126px;
  width: 230px;
  height: 230px;
  border-color: rgba(255, 198, 39, 0.22);
}

.experience-brand {
  min-height: 78px;
  border: 0;
  border-radius: 1px;
  padding: 8px;
  box-shadow: none;
}

.experience-brand img {
  max-height: 64px;
}

.experience-context .experience-copy #experience-title {
  font-size: clamp(1.1rem, 1.7vw, 1.38rem);
}

.experience-path {
  gap: 12px;
}

.experience-path span {
  border-top-width: 1px;
  font-size: 0.75rem;
}

.page-head {
  position: relative;
  margin-bottom: 30px;
  padding-left: 22px;
}

.page-head::before {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 4px;
  background: var(--tbird-gold);
  content: '';
}

.page-head h2 {
  max-width: 18ch;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.98;
}

.page-intro {
  max-width: 68ch;
  margin-top: 12px;
}

.primary,
.secondary {
  border-radius: 2px;
  box-shadow: none;
}

.primary {
  border-color: var(--tbird-blue);
  background: var(--tbird-blue);
}

.primary:hover:not(:disabled) {
  border-color: var(--you-dark);
  background: var(--you-dark);
}

select,
textarea,
input {
  border-radius: 2px;
}

.panel,
.scenario-card,
.empty-state {
  padding: 24px 26px;
}

.panel,
.scenario-card,
.empty-state,
.story-band {
  border-color: var(--rule);
  background: rgba(255, 255, 255, 0.96);
}

.story-band {
  border-top: 0;
  border-left: 6px solid var(--you);
  background: var(--surface);
}

.metric-grid {
  gap: 1px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--rule);
}

.metric {
  border: 0;
  background: var(--surface);
  padding: 20px;
}

.metric strong {
  color: var(--tbird-blue);
  font-size: 2.6rem;
}

.scenario-grid {
  gap: 14px;
}

.scenario-card {
  border-top: 1px solid var(--rule);
  transition: border-color 0.16s ease, background 0.16s ease;
}

.scenario-card::before {
  top: 20px;
  right: auto;
  bottom: 20px;
  left: 0;
  width: 4px;
  height: auto;
  background: var(--other);
}

.scenario-card:hover {
  border-color: var(--you);
  background: #f8fbfd;
  transform: none;
}

.scenario-card h3,
.panel h3 {
  font-size: 1.36rem;
}

.status-pill,
.mini-tag,
.form-status,
.demo-codes span {
  border-radius: 2px;
}

.agenda-step {
  border-left: 4px solid var(--rule);
}

.agenda-step.is-active {
  border-color: var(--you);
  background: var(--you-soft);
  box-shadow: none;
}

.agenda-number {
  border-radius: 2px;
}

.toast {
  border-radius: 2px;
}

@keyframes route-arrival {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.landing-copy > * {
  animation: route-arrival 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-copy > :nth-child(2) { animation-delay: 70ms; }
.landing-copy > :nth-child(3) { animation-delay: 140ms; }
.landing-copy > :nth-child(4) { animation-delay: 210ms; }
.landing-copy > :nth-child(5) { animation-delay: 280ms; }

@media (max-width: 960px) {
  .landing-view {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.86fr);
    gap: 38px;
    padding: 42px;
  }

  .landing-view::after {
    width: 45%;
  }

  .landing-copy h1 {
    font-size: clamp(3rem, 7vw, 4rem);
  }

  .landing-copy .brand-logo {
    margin-bottom: 36px;
  }

  .landing-lede {
    margin-top: 20px;
  }

  .landing-actions {
    margin-top: 24px;
  }

  .experience-context {
    grid-template-columns: 120px 1fr;
  }

  .experience-brand {
    grid-row: 1;
  }

  .experience-path {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .access-screen {
    display: block;
    min-height: 100vh;
    padding: 0;
  }

  .landing-view {
    grid-template-columns: 1fr;
    gap: 54px;
    width: 100%;
    min-height: 100vh;
    border: 0;
    padding: 34px 26px 52px 34px;
  }

  .landing-view::after {
    inset: auto 0 0;
    width: auto;
    height: 42%;
  }

  .landing-copy .brand-logo {
    margin-bottom: 54px;
  }

  .landing-copy h1 {
    max-width: 12ch;
    font-size: clamp(3rem, 14vw, 4.8rem);
  }

  .sidebar {
    gap: 14px;
  }

  .main {
    padding: 22px 18px 78px;
  }

  .experience-context {
    grid-template-columns: 104px 1fr;
    gap: 16px;
    margin-bottom: 30px;
    padding: 14px 16px;
  }

  .experience-brand {
    width: auto;
    min-height: 70px;
  }

  .experience-copy {
    padding-right: 0;
  }

  .page-head {
    padding-left: 16px;
  }
}

@media (max-width: 520px) {
  .landing-view::after {
    height: 43%;
  }

  .landing-copy .brand-logo {
    width: min(220px, 76%);
  }

  .landing-lede {
    padding-left: 14px;
  }

  .experience-context {
    grid-template-columns: 1fr;
  }

  .experience-brand {
    width: 132px;
  }

  .experience-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-grid {
    border-right: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-copy > * {
    animation: none;
  }
}

/* ---- Accessibility operating layer ---- */
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  margin: -1px !important;
  border: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 1000;
  min-height: 44px;
  transform: translateY(-150%);
  border: 3px solid var(--tbird-gold);
  border-radius: 2px;
  background: var(--tbird-blue);
  color: white;
  padding: 9px 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid white;
  outline-offset: 2px;
}

.product-name {
  display: block;
  color: var(--tbird-blue);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

#main-content,
#view-root [tabindex="-1"] {
  scroll-margin-top: 96px;
}

#main-content:focus,
#view-root [tabindex="-1"]:focus {
  outline: 0;
}

.form-status.is-error {
  color: #8f261f;
  font-weight: 700;
}

form[aria-busy="true"],
main[aria-busy="true"] {
  cursor: progress;
}

form[aria-busy="true"] button,
main[aria-busy="true"] button {
  pointer-events: none;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: #a6322a;
}

.primary,
.secondary,
.link-button,
.tab,
.role-card,
.send-btn,
.voice-btn,
summary {
  min-height: 44px;
}

@media (prefers-contrast: more) {
  :root {
    --ink: #00192d;
    --ink-2: #17364e;
    --ink-3: #3e566b;
    --rule: #6d8293;
    --you: #004e83;
  }

  .panel,
  .scenario-card,
  .metric,
  .role-card,
  input,
  select,
  textarea {
    border-width: 2px;
  }

  .tab.is-active::after {
    height: 5px;
  }
}

@media (forced-colors: active) {
  * {
    box-shadow: none !important;
  }

  body,
  .landing-view,
  .landing-view::after,
  .experience-context,
  .panel,
  .scenario-card,
  .metric,
  .story-band {
    background: Canvas;
    color: CanvasText;
  }

  .landing-copy h1,
  .experience-context .experience-copy #experience-kicker,
  .experience-context .experience-copy #experience-title {
    color: CanvasText;
  }

  .primary,
  .landing-actions .primary,
  .skip-link {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .tab.is-active,
  .role-card.is-active {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }

  .landing-map,
  #worldbg {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .skip-link,
  #route-announcer {
    display: none !important;
  }
}

.consent-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  color: var(--ink-2);
  font-size: 0.82rem;
  line-height: 1.45;
}

.consent-row input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  accent-color: var(--asu-maroon, #8c1d40);
}
/* Focused two-step pilot sign-in */
#login-view.access-panel {
  width: min(720px, 100%);
  overflow: visible;
  padding: clamp(24px, 4vw, 40px);
}

.login-topline {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.login-topline .link-button {
  padding: 0;
}

.login-logo {
  width: min(210px, 44vw);
  max-height: 48px;
  margin: 0;
  object-fit: contain;
  object-position: right center;
}

.login-header {
  max-width: 540px;
  margin-bottom: 30px;
}

.login-header h1 {
  margin: 4px 0 8px;
  color: var(--tbird-blue);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
}

.login-header p:last-child {
  margin: 0;
  color: var(--ink-2);
}

.login-step {
  margin-bottom: 26px;
}

.login-step-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.login-step-heading > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  background: var(--tbird-blue);
  color: white;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.login-step-heading h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
}

#login-view .role-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0;
}

#login-view .role-card {
  min-height: 76px;
  padding: 14px 16px;
}

#login-view .role-card strong {
  font-family: var(--sans);
  font-size: 0.96rem;
  font-weight: 700;
}

#login-view .role-card span {
  margin-top: 3px;
  font-size: 0.8rem;
}

#login-view .access-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}

.login-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.login-fields .full-span {
  grid-column: 1 / -1;
}

.login-fields label small {
  color: var(--ink-3);
  font-weight: 400;
}

#login-view .consent-row {
  border: 1px solid var(--rule-2);
  background: #f8fbfd;
  padding: 14px;
}

.login-submit {
  width: 100%;
  min-height: 48px;
}

#login-view .form-status {
  min-height: 20px;
  margin: -6px 0 0;
}

/* Weekly assignment and learner-owned objectives */
.assigned-learning-card,
.assigned-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-left: 5px solid var(--tbird-gold);
  background: var(--tbird-blue);
  color: white;
  padding: 20px 24px;
}

.assigned-learning-card {
  margin-bottom: 18px;
}

.assigned-learning-card .label,
.assigned-ribbon span {
  color: var(--tbird-gold);
}

.assigned-learning-card h3 {
  margin: 4px 0;
  color: white;
}

.assigned-learning-card p {
  max-width: 70ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.assigned-learning-card .secondary {
  flex: 0 0 auto;
  border-color: white;
  color: var(--tbird-blue);
}

.assigned-ribbon {
  justify-content: flex-start;
  margin-bottom: 12px;
  padding-block: 12px;
}

.objective-form {
  display: grid;
  gap: 22px;
}

.objective-fieldset {
  margin: 0;
  border: 0;
  padding: 0;
}

.objective-fieldset legend {
  color: var(--ink);
  font-weight: 700;
}

.field-help {
  margin: 4px 0 12px;
  color: var(--ink-3);
  font-size: 0.85rem;
}

.objective-options {
  display: grid;
  gap: 10px;
}

.objective-options label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--rule-2);
  background: #f8fbfd;
  padding: 13px 14px;
  cursor: pointer;
}

.objective-options input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--tbird-blue);
}

.profile-details {
  border-top: 1px solid var(--rule-2);
  padding-top: 16px;
}

.profile-details summary {
  cursor: pointer;
  color: var(--ink-2);
  font-weight: 700;
}

.profile-details .form-grid {
  margin-top: 14px;
}

.personal-objectives-row {
  background: var(--you-soft);
  margin-inline: -26px;
  padding-inline: 26px;
}

.inline-link {
  min-height: 28px;
  margin-top: 8px;
  padding: 0;
}

@media (max-width: 620px) {
  #login-view.access-panel {
    padding: 22px 18px;
  }

  .login-fields,
  #login-view .role-grid {
    grid-template-columns: 1fr;
  }

  .assigned-learning-card,
  .assigned-ribbon {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
}
/* Compact above-the-fold access experience */
@media (min-width: 821px) {
  .access-screen {
    min-height: 100dvh;
    padding: clamp(14px, 2.5vh, 28px) clamp(20px, 3vw, 44px);
  }

  .landing-view {
    width: min(1120px, 100%);
    min-height: 0;
    height: min(680px, calc(100dvh - clamp(28px, 5vh, 56px)));
    grid-template-columns: minmax(0, 1.4fr) minmax(290px, 0.72fr);
    gap: clamp(34px, 4vw, 58px);
    padding: clamp(30px, 4vw, 52px);
    overflow: hidden;
  }

  .landing-copy .brand-logo {
    width: min(220px, 58%);
    margin: 0 0 clamp(24px, 4vh, 38px);
  }

  .landing-copy .eyebrow {
    margin-bottom: 10px;
  }

  .landing-copy h1 {
    max-width: 13ch;
    font-size: clamp(3rem, 5.4vw, 4.8rem);
    line-height: 0.94;
  }

  .landing-lede {
    max-width: 50ch;
    margin-top: 18px;
    padding-left: 16px;
    font-size: clamp(0.92rem, 1.2vw, 1.05rem);
    line-height: 1.5;
  }

  .landing-actions {
    margin-top: 22px;
  }

  .landing-actions .primary {
    min-height: 48px;
  }

  #login-view.access-panel {
    max-height: calc(100dvh - 32px);
    overflow: auto;
    padding: clamp(20px, 3vh, 30px) clamp(24px, 3vw, 36px);
  }

  #login-view .login-topline,
  #login-view .login-header,
  #login-view .login-step {
    margin-bottom: 16px;
  }

  #login-view .login-header h1 {
    font-size: clamp(1.9rem, 4vh, 2.6rem);
  }

  #login-view .role-card {
    min-height: 64px;
    padding: 10px 14px;
  }

  #login-view .access-form {
    gap: 12px;
    padding-top: 16px;
  }

  #login-view .login-fields {
    gap: 10px 14px;
  }

  #login-view .consent-row {
    padding: 10px 12px;
  }
}

@media (min-width: 821px) and (max-height: 720px) {
  .landing-view {
    height: calc(100dvh - 24px);
    padding-block: 24px;
  }

  .landing-copy .brand-logo {
    width: 180px;
    margin-bottom: 18px;
  }

  .landing-copy h1 {
    font-size: clamp(2.55rem, 8vh, 3.75rem);
  }

  .landing-lede {
    margin-top: 12px;
    line-height: 1.4;
  }

  .landing-actions {
    margin-top: 16px;
  }
}

/* Instructor-created scenario studio */
.scenario-authoring-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 36px 0 14px;
  border-left: 5px solid var(--tbird-gold);
  padding-left: 18px;
}

.scenario-authoring-head h3,
.scenario-authoring-head p {
  margin: 0;
}

.scenario-authoring-head .eyebrow {
  margin-bottom: 5px;
}

.custom-scenario-form {
  display: grid;
  gap: 24px;
}

.custom-scenario-form fieldset {
  margin: 0;
  border: 1px solid var(--rule-2);
  background: #fbfdfe;
  padding: 20px;
}

.custom-scenario-form legend {
  padding: 0 8px;
  color: var(--tbird-blue);
  font-weight: 700;
}

.custom-scenario-form input[type="file"],
.scenario-studio input[type="file"] {
  min-height: 48px;
  border: 1px dashed var(--rule);
  background: white;
  padding: 10px;
}

.authoring-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-left: 5px solid var(--tbird-gold);
  background: var(--you-soft);
  padding: 16px 18px;
}

.authoring-submit p {
  max-width: 62ch;
  margin: 0;
}

.attachment-list {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.attachment-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  border: 1px solid var(--rule-2);
  background: #f8fbfd;
  padding: 11px 13px;
}

.attachment-list li p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-3);
  font-size: 0.82rem;
}

.attachment-list li > span {
  color: var(--ink-3);
  font-size: 0.78rem;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .authoring-submit {
    align-items: stretch;
    flex-direction: column;
  }

  .authoring-submit .primary {
    width: 100%;
  }
}
/* Multi-class instructor context */
.course-context-panel {
  margin-bottom: 28px;
  border: 1px solid var(--rule);
  border-top: 6px solid var(--tbird-gold);
  background: white;
  box-shadow: var(--shadow);
}

.course-context-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: 24px;
  align-items: end;
  padding: 20px 24px 16px;
}

.course-context-main h2,
.course-context-main p {
  margin: 0;
}

.course-context-main .eyebrow {
  margin-bottom: 4px;
}

.course-switch-field {
  margin: 0;
}

.course-context-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--rule-2);
  background: #f8fbfd;
}

.course-context-metrics span {
  display: grid;
  gap: 2px;
  border-right: 1px solid var(--rule-2);
  color: var(--ink-3);
  font-size: 0.75rem;
  padding: 12px 18px;
}

.course-context-metrics span:last-child {
  border-right: 0;
}

.course-context-metrics strong {
  color: var(--tbird-blue);
  font-size: 1.05rem;
}

.course-access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 24px;
}

.course-access-row code,
.class-created-notice code {
  border: 1px solid var(--rule);
  background: #eef5fa;
  color: var(--tbird-blue);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 7px;
}

.class-create-disclosure {
  border-top: 1px solid var(--rule-2);
  padding: 0 24px 18px;
}

.class-create-disclosure summary {
  cursor: pointer;
  color: var(--tbird-blue);
  font-weight: 700;
  padding: 14px 0 0;
}

.course-create-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  border-left: 4px solid var(--tbird-gold);
  background: #fbfdfe;
  padding: 18px;
}

.course-create-form .primary {
  justify-self: start;
}

.class-created-notice {
  margin: 0 24px 14px;
}

@media (max-width: 760px) {
  .course-context-main,
  .course-context-metrics {
    grid-template-columns: 1fr;
  }

  .course-context-metrics span {
    border-right: 0;
    border-bottom: 1px solid var(--rule-2);
  }

  .course-access-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ============================================================================
   Student journey design pass
   ----------------------------------------------------------------------------
   One system for the five weekly steps. Three rules govern everything below:

   1. Type carries hierarchy. This pass was written against a three-face system
      (Newsreader for statements, Public Sans for work, IBM Plex Mono for
      measurement); the visual style pass below collapsed all three onto Public
      Sans, so hierarchy here now comes from size and weight alone. Nothing is
      bold merely to be noticed.
   2. Spacing is a scale, not a guess. Every gap below is a --s* token, so the
      vertical rhythm holds as pages grow.
   3. Gold means "you are here". Thunderbird gold appears only on the current
      step and the page keyline; it never decorates.
   ========================================================================== */

:root {
  /* 4px base. Section rhythm is --s6; inside a card it is --s4. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 40px;
  --s8: 64px;

  /* Type scale, 1.25 ratio off a 15px body. */
  --t-micro: 0.6875rem;
  --t-small: 0.8125rem;
  --t-body: 0.9375rem;
  --t-lead: 1.0625rem;
  --t-title: 1.25rem;
  --t-section: 1.5rem;
  --t-display: clamp(2rem, 4vw, 3rem);

  --track-label: 0.14em;
  --ring-focus: 0 0 0 3px rgba(255, 198, 39, 0.5);
}

/* ---- Shared page rhythm ------------------------------------------------- */

#view-root > section,
#view-root > details,
#view-root > .task-callout,
#view-root > .assigned-learning-card,
#view-root > .brief-cta,
#view-root > .notice {
  margin-bottom: var(--s6);
}

#view-root > section:last-child,
#view-root > details:last-child {
  margin-bottom: 0;
}

.page-head {
  margin-bottom: var(--s5);
  padding-left: var(--s5);
}

.page-head h2 {
  font-family: var(--serif);
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.page-head .eyebrow,
.viz-hero .eyebrow {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.page-intro {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
}

/* ---- Return path -------------------------------------------------------- */

.page-back {
  margin-bottom: var(--s4);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) 0;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
}

.back-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-link:hover {
  color: var(--tbird-blue);
}

.back-link:hover svg {
  transform: translateX(-2px);
  transition: transform 0.14s ease;
}

/* ---- The task callout: what this page asks of you ----------------------- */

.task-callout {
  border-left: 4px solid var(--tbird-gold);
  background: var(--surface);
  padding: var(--s4) var(--s5);
  box-shadow: var(--shadow);
}

.task-callout strong {
  display: block;
  margin-bottom: var(--s1);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.task-callout p {
  margin: 0;
  max-width: 70ch;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink);
}

/* ---- Signature: the weekly path as one spine ---------------------------- */

.week-plan {
  /* A reading measure, so each step's action stays beside its own text. */
  max-width: 880px;
  margin-top: var(--s6);
}

.week-plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule-2);
}

.week-plan-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-section);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.week-plan-head p {
  margin: var(--s1) 0 0;
  font-size: var(--t-small);
  color: var(--ink-3);
}

.week-plan .step-grid {
  display: block;
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--s7);
  list-style: none;
}

/* The rail every step hangs from. It is the sequence, made visible. */
.week-plan .step-grid::before {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 15px;
  width: 2px;
  background: var(--rule-2);
  content: '';
}

.week-plan .step-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  position: relative;
  margin: 0;
  padding: var(--s4) 0;
  border: 0;
  border-bottom: 1px solid var(--rule-2);
  background: none;
  box-shadow: none;
  /* The card treatment this list replaced clipped its own overflow, which hid
     the markers hanging off the left edge. */
  overflow: visible;
}

.week-plan .step-tile:last-child {
  border-bottom: 0;
}

.week-plan .step-tile::before,
.week-plan .step-tile::after {
  content: none;
}

.week-plan .step-top {
  position: absolute;
  top: 50%;
  left: calc(var(--s7) * -1);
  transform: translateY(-50%);
  margin: 0;
}

/* Marker states: done is solid blue, current is gold, ahead is hollow. */
.week-plan .step-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.week-plan .is-complete .step-num {
  border-color: var(--tbird-blue);
  background: var(--tbird-blue);
  color: #fff;
}

.week-plan .is-active .step-num {
  border-color: var(--tbird-gold);
  background: var(--tbird-gold);
  color: var(--tbird-blue);
  box-shadow: 0 0 0 5px rgba(255, 198, 39, 0.22);
}

.week-plan .step-tile h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  margin: 0 0 var(--s1);
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* The marker colour says where you are; this says it in words too. */
.step-status {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.week-plan .is-active .step-status {
  color: var(--you-dark);
}

.week-plan .is-ready h4 {
  color: var(--ink-2);
}

.week-plan .step-tile p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-3);
}

.week-plan .step-tile button {
  justify-self: end;
  white-space: nowrap;
}

.week-plan-note {
  margin: var(--s5) 0 0;
  padding-left: var(--s7);
  font-size: var(--t-small);
  color: var(--ink-3);
}

/* ---- This Week hero: one action, one tracker ---------------------------- */

.learner-viz-hero .viz-copy h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.learner-viz-hero .lede {
  max-width: 52ch;
  font-size: var(--t-lead);
  color: var(--ink-2);
}

.learner-viz-board {
  display: grid;
  place-items: center;
}

/* ---- Practice: can I finish yet? ---------------------------------------- */

.readiness {
  border: 1px solid var(--rule-2);
  border-left: 4px solid var(--rule);
  padding: var(--s4);
  margin-bottom: var(--s4);
  background: var(--paper);
}

.readiness.is-ready {
  border-left-color: var(--tbird-gold);
  background: rgba(255, 198, 39, 0.08);
}

.readiness strong {
  display: block;
  margin-bottom: var(--s1);
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.readiness p {
  margin: 0 0 var(--s3);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-3);
}

.readiness p:last-child {
  margin-bottom: 0;
}

.practice-task {
  margin-bottom: var(--s5);
}

/* Practice is a working page, not a statement page: the scenario title steps
   down so the conversation itself holds the eye. */
.practice-layout {
  margin-top: var(--s5);
}

#view-root:has(.practice-layout) .page-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  max-width: 28ch;
}

/* ---- Optional, marked as such ------------------------------------------- */

.optional-tag {
  display: inline-block;
  margin-left: var(--s2);
  padding: 2px var(--s2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.profile-details summary,
.reflection-optional summary {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}

.reflection-optional {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-2);
}

/* ---- Forms -------------------------------------------------------------- */

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
}

.form-status.is-error {
  color: #9a3412;
}

.objective-form .field-help {
  font-size: var(--t-small);
  color: var(--ink-3);
}

/* The base label style is mono, tracked, and uppercase — right for a two-word
   field name, unreadable for a label that is a whole sentence. These labels
   carry sentences, so they read as prose. */
.objective-options label span,
.consent-row span,
.reflection-optional label {
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
  color: var(--ink);
}

.voice-status {
  font-family: var(--sans);
  font-size: var(--t-small);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-3);
}

.cta-note {
  max-width: 66ch;
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-3);
}

/* ---- Results and reflection hierarchy ----------------------------------- */

.observations-panel .obs:last-child {
  margin-bottom: 0;
}

/* Mono is for labels and measurements. These are sentences a student reads, so
   they take the body face even though they sit in a caption slot. */
.pi-woven,
.reflection-footnote,
.cta-note {
  font-family: var(--sans);
  font-size: var(--t-small);
  letter-spacing: normal;
  line-height: 1.55;
}

.stat .k em {
  display: block;
  margin-top: 2px;
  font-size: var(--t-micro);
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.result-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin: var(--s6) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.result-footer .link-button {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brief-footer {
  margin: var(--s5) 0 0;
}

.course-context-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s5);
}

.course-context-body .label {
  display: block;
  margin-bottom: var(--s2);
}

.reflection-form-card {
  margin-bottom: var(--s6);
}

.reflection-hero h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* The reflection page centres its own column; the back link follows it so the
   page keeps a single left edge. */
#view-root:has(.reflection-report) .page-back {
  width: min(760px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: 6px;
}

/* ---- Buttons: three tiers, one shape ------------------------------------ */

.primary,
.secondary {
  font-weight: 600;
  letter-spacing: 0.005em;
}

.link-button {
  border-bottom: 1px solid transparent;
  font-weight: 500;
  color: var(--tbird-blue);
}

.link-button:hover {
  border-bottom-color: var(--tbird-gold);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--tbird-blue);
  outline-offset: 2px;
  box-shadow: var(--ring-focus);
}

.primary:disabled,
.secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

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

@media (max-width: 720px) {
  .week-plan .step-tile {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
  }

  .week-plan .step-tile button {
    justify-self: start;
  }

  .page-head {
    padding-left: var(--s4);
  }

  .result-footer {
    gap: var(--s2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-link:hover svg {
    transition: none;
    transform: none;
  }
}

/* Landing reset: remove synthetic preview tile and return to a human, branded entry screen. */
.landing-view {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: min(1040px, 100%);
  min-height: min(720px, calc(100vh - 72px));
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 58%, rgba(247, 250, 253, 0.78) 100%),
    #ffffff;
  padding: clamp(42px, 7vw, 88px);
}

.landing-view::after {
  inset: 0;
  width: auto;
  background:
    linear-gradient(90deg, transparent 0%, transparent 68%, rgba(0, 46, 95, 0.08) 68.1%, rgba(0, 46, 95, 0.12) 100%);
}

.landing-map svg {
  right: -10%;
  height: 118%;
  opacity: 0.5;
}

.landing-map .dot {
  fill: #1583a4;
  opacity: 0.1;
}

.landing-map .arc {
  stroke: var(--tbird-gold);
  stroke-width: 1.35;
  opacity: 0.42;
}

.landing-copy {
  max-width: 760px;
}

.landing-copy .brand-logo {
  width: min(290px, 76%);
  margin-bottom: clamp(42px, 7vh, 72px);
}

.landing-copy .eyebrow {
  color: var(--tbird-blue);
  font-size: clamp(0.88rem, 1.2vw, 1rem);
  font-weight: 700;
}

.landing-copy h1 {
  max-width: 13ch;
  font-size: clamp(3.35rem, 6.5vw, 6rem);
  line-height: 0.96;
}

.landing-lede {
  max-width: 50ch;
  color: #29475f;
  font-size: clamp(1.18rem, 1.65vw, 1.36rem);
  font-weight: 500;
  line-height: 1.55;
}

.landing-stage {
  display: none;
}

@media (max-width: 760px) {
  .landing-view {
    min-height: 100vh;
    padding: 34px 26px 52px 34px;
  }

  .landing-view::after {
    background: linear-gradient(180deg, transparent 0%, transparent 72%, rgba(0, 46, 95, 0.08) 100%);
  }

  .landing-map svg {
    right: -42%;
    height: 112%;
  }
}

/* ============================================================================
   0730 Thunderbird Visual Style Pass
   ----------------------------------------------------------------------------
   Final override layer for the Friday MVP flow: professional academic surfaces,
   official Thunderbird color tokens, restrained emphasis, and clean workspaces.
   ========================================================================== */
:root {
  --navy: #002e5f;
  --navy-2: #0e3463;
  --blue: #0179b7;
  --dawn: #c0ddea;
  --gold: #ffc627;
  --gold-2: #f2b705;
  --ink: #172033;
  --muted: #5c667a;
  --grey: #999999;
  --line: #d9e0ea;
  --soft: #f5f8fc;
  --white: #ffffff;
  --green: #78be20;
  --red: #924813;
  --shadow: 0 18px 46px rgba(0, 46, 95, 0.12);
  --radius: 8px;
  --paper: var(--soft);
  --surface: var(--white);
  --ink-2: var(--muted);
  --ink-3: #6f7a8d;
  --rule: var(--line);
  --rule-2: #e7edf5;
  --you: var(--blue);
  --you-dark: var(--navy);
  --you-soft: #eef4fb;
  --other: var(--red);
  --other-soft: #fff1e8;
  --tbird-blue: var(--navy);
  --tbird-gold: var(--gold);
  --tbird-gray: var(--grey);
  --sans: "Public Sans", Aptos, "Segoe UI", Arial, sans-serif;
  --serif: "Public Sans", Aptos, "Segoe UI", Arial, sans-serif;

  /* One type stack for everything the reader reads. IBM Plex Mono predates
     this pass and was never in the approved design; 52 rules still asked for
     it, and two of them (`.page-head .eyebrow`, bare `th`) outranked the sans
     rule below on specificity, so mono was winning in places the design never
     intended. Rebinding the token retires the face everywhere at once. */
  --mono: var(--sans);

  /* The one job monospace still does is functional, not stylistic: access
     codes are transcribed by hand, and a fixed-width face is what keeps O/0
     and l/1 apart. System monospace covers it without a font download. */
  --code: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
}

/* Credentials: same treatment whether they are rendered as <code> or as the
   landing page's chips, so a code looks like a code wherever it appears. */
.demo-codes,
.demo-codes span,
.course-access-row code,
.class-created-notice code,
.class-strip code,
.class-strip-created code {
  font-family: var(--code);
}

/* `.page-head .eyebrow` also outranks the pass on size, weight, tracking and
   colour, so page-head eyebrows sat at 11px/500/0.14em grey while every other
   eyebrow sat at 12px/850/0.08em blue. Same component, same treatment. */
.page-head .eyebrow {
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    linear-gradient(180deg, rgba(0, 46, 95, 0.08) 0, rgba(0, 46, 95, 0.035) 150px, rgba(245, 248, 252, 0) 320px),
    var(--soft);
  color: var(--ink);
  font-family: var(--sans);
}

h1,
h2,
h3 {
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 850;
  letter-spacing: 0;
}

.main {
  width: min(1180px, calc(100vw - 36px));
  padding: 42px 0 96px;
}

.sidebar {
  min-height: 70px;
  border-bottom: 1px solid rgba(217, 224, 234, 0.92);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 30px rgba(0, 46, 95, 0.08);
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-color: rgba(255, 198, 39, 0.76);
  background: radial-gradient(circle at 50% 35%, #ffe28a, var(--gold));
  box-shadow: 0 0 0 5px rgba(255, 198, 39, 0.18), 0 10px 22px rgba(0, 46, 95, 0.16);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 900;
}

.brand-mark::before,
.brand-mark::after {
  content: none;
}

.product-name,
.session-card strong {
  color: var(--navy);
  font-weight: 850;
}

.tabs {
  gap: 8px;
}

.tab {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  padding: 0 16px;
  font-weight: 850;
}

.tab:hover {
  border-color: var(--line);
  background: var(--white);
  color: var(--navy);
}

.tab.is-active {
  border-color: rgba(1, 121, 183, 0.28);
  background: #eef4fb;
  color: var(--navy);
}

.tab.is-active::after {
  content: none;
}

.primary,
.secondary,
.link-button,
button {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.primary,
.secondary {
  min-height: 44px;
  border-radius: 6px;
  font-weight: 850;
}

.primary {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 12px 26px rgba(255, 198, 39, 0.3), 0 8px 20px rgba(0, 46, 95, 0.08);
}

.primary:hover:not(:disabled) {
  border-color: var(--gold-2);
  background: var(--gold-2);
  color: var(--navy);
  transform: translateY(-1px);
}

.secondary {
  border-color: var(--line);
  background: var(--white);
  color: var(--navy);
}

.secondary:hover:not(:disabled),
.link-button:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--navy);
  transform: translateY(-1px);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(255, 198, 39, 0.28);
}

.primary:disabled,
.secondary:disabled,
button:disabled {
  background: #edf1f6;
  border-color: #dce3ed;
  box-shadow: none;
  color: #7a8494;
  transform: none;
}

.panel,
.story-band,
.metric,
.scenario-card,
.empty-state,
.disclosure,
.task-callout,
.result-focus > div:first-child,
.pullprompt,
.left-rail,
.right-rail,
.conversation {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.page-head {
  margin-bottom: 26px;
  padding-left: 0;
}

.page-head h2,
.learner-viz-hero .viz-copy h2 {
  color: var(--navy);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 850;
  line-height: 1.06;
}

.landing-copy h1 {
  color: var(--navy);
  font-size: clamp(44px, 6vw, 78px);
  font-weight: 900;
  line-height: 0.98;
}

.eyebrow,
.label,
.module-label,
.metric span,
.stat .k,
.briefrow .rk,
.context-block span,
.week-plan-head p,
.step-status {
  color: var(--blue);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-intro,
.landing-lede,
.scenario-card p,
.panel p,
.muted,
.figcap {
  color: var(--muted);
}

.status-pill,
.mini-tag {
  border: 1px solid rgba(1, 121, 183, 0.18);
  border-radius: 999px;
  background: #eef4fb;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.status-pill.is-selected,
.status-pill.is-available {
  border-color: rgba(120, 190, 32, 0.34);
  background: rgba(120, 190, 32, 0.14);
  color: #335d0b;
}

.status-pill.bonus-pill,
.bonus-pill {
  border-color: rgba(255, 198, 39, 0.5);
  background: #fff6cf;
  color: var(--navy);
}

.viz-hero.learner-viz-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.62fr);
  gap: 30px;
  align-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 62%, #163f73 100%);
  color: var(--white);
  padding: clamp(28px, 4vw, 46px);
  box-shadow: 0 24px 60px rgba(0, 46, 95, 0.22);
}

.viz-hero.learner-viz-hero::before {
  background: linear-gradient(90deg, var(--gold), rgba(255, 198, 39, 0));
}

.viz-hero .landing-map {
  opacity: 0.2;
}

.viz-hero .eyebrow,
.viz-hero .lede,
.viz-hero h2,
.viz-hero .viz-copy h2 {
  color: var(--white);
}

.viz-hero .eyebrow {
  color: var(--gold);
}

.viz-ring-card {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.viz-ring-card span,
.viz-ring-card p {
  color: rgba(255, 255, 255, 0.84);
}

.viz-ring-dial {
  background: conic-gradient(var(--gold) calc(var(--value) * 1%), rgba(255,255,255,0.2) 0);
}

.week-plan {
  max-width: none;
}

.week-plan .step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
}

.week-plan .step-grid::before {
  content: none;
}

.week-plan .step-tile {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 18px;
  box-shadow: var(--shadow);
}

.week-plan .step-tile::before {
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--line);
  content: '';
}

.week-plan .step-tile.is-active::before {
  background: var(--blue);
}

.week-plan .step-tile.is-complete::before {
  background: var(--green);
}

.week-plan .step-top {
  position: static;
  transform: none;
}

.week-plan .step-num {
  border-color: var(--line);
  background: var(--white);
  color: var(--navy);
  font-weight: 900;
}

.week-plan .is-active .step-num {
  border-color: var(--blue);
  background: #eef4fb;
  color: var(--navy);
  box-shadow: inset 0 0 0 4px rgba(1, 121, 183, 0.08);
}

.week-plan .is-complete .step-num {
  border-color: var(--green);
  background: var(--green);
  color: var(--navy);
}

.week-plan .step-tile button {
  grid-column: 1 / -1;
  justify-self: start;
}

.scenario-card.course-card::before,
.scenario-card::before {
  background: var(--gold);
  height: 5px;
}

.scenario-card:hover,
.history-row:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.brief-panel {
  border-top: 0;
  overflow: hidden;
}

.brief-panel::before {
  display: block;
  height: 7px;
  margin: -24px -26px 22px;
  background: linear-gradient(90deg, var(--gold), rgba(255, 198, 39, 0));
  content: '';
}

.briefrow {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}

.briefrow:first-child {
  border-top: 0;
}

.briefrow .bn {
  border-color: rgba(255, 198, 39, 0.5);
  background: #fff6cf;
  color: var(--navy);
}

.stakes-strip {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  background: var(--white);
  padding: 18px;
  box-shadow: var(--shadow);
}

.stakes-strip .keyline {
  margin: 0;
}

.stakes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.stake-chip {
  display: grid;
  gap: 5px;
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fbfe;
  padding: 12px;
}

.stake-chip span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stake-chip strong {
  color: var(--navy);
  font-size: 0.92rem;
  line-height: 1.35;
}

.left-rail .stakes-strip {
  margin: 8px 0 14px;
  border-left-width: 4px;
  padding: 12px;
  box-shadow: none;
}

.left-rail .stakes-grid {
  grid-template-columns: 1fr;
}

.left-rail .stake-chip {
  min-height: 0;
  padding: 10px;
}

.notice,
.version-note,
.assigned-ribbon,
.task-callout {
  border-left: 5px solid var(--gold);
  background: var(--white);
}

.practice-layout {
  grid-template-columns: minmax(240px, 0.7fr) minmax(420px, 1.42fr) minmax(240px, 0.74fr);
}

.conversation .panel-header,
.panel-header {
  border-bottom-color: var(--line);
}

.pmark {
  background: var(--gold);
  color: var(--navy);
  font-weight: 900;
}

.transcript {
  background: linear-gradient(180deg, #f8fbfe, #f3f7fb);
}

.turn.student {
  align-self: flex-end;
}

.turn.student p,
.turn.student {
  background: var(--navy-2);
  color: var(--white);
}

.turn.persona,
.turn.ai,
.turn:not(.student) {
  align-self: flex-start;
}

.turn:not(.student) p {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}

.composer {
  border-top: 1px solid var(--line);
  background: var(--white);
}

.send-btn {
  background: var(--gold);
  color: var(--navy);
}

.readiness {
  border-color: var(--line);
  border-left-color: var(--blue);
  background: #f8fbfe;
}

.readiness.is-ready {
  border-left-color: var(--green);
  background: rgba(120, 190, 32, 0.1);
}

.result-focus > div:first-child {
  border-left: 5px solid var(--gold);
  background: linear-gradient(135deg, #fff6cf 0%, var(--white) 58%);
}

.observations-panel .obs {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdff;
  padding: 14px;
}

.observations-panel .mk {
  background: var(--blue) !important;
}

.stat {
  border-top: 5px solid var(--gold);
  background: var(--white);
}

.stat .n,
.metric strong {
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 900;
}

.history-row {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--white);
}

.history-idx {
  border-color: var(--gold);
  background: #fff6cf;
  color: var(--navy);
}

.course-entry-band {
  border-top: 0;
  border-left: 5px solid var(--gold);
}

@media (max-width: 920px) {
  .main {
    width: min(100% - 28px, 1180px);
  }

  .viz-hero.learner-viz-hero,
  .week-plan .step-grid,
  .practice-layout,
  .result-focus,
  .course-context-main {
    grid-template-columns: 1fr;
  }

  .sidebar {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 18px;
  }

  .session-card {
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  .main {
    width: min(100% - 22px, 1180px);
    padding-top: 28px;
  }

  .tabs {
    width: 100%;
  }

  .tab {
    min-height: 38px;
    padding: 0 12px;
  }

  .page-head h2,
  .learner-viz-hero .viz-copy h2 {
    font-size: 2rem;
  }

  .week-plan .step-tile {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 0730 accessibility and data-viz clarity pass */
.experience-context {
  min-height: 0;
  margin-bottom: 28px;
  padding: 18px 24px;
}

.experience-context .brand-lockup,
.experience-context img {
  max-height: 70px;
}

.experience-context .experience-copy #experience-title {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.12;
}

.learner-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.78fr);
  gap: 28px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-left: 7px solid var(--gold);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 38px);
}

.learner-summary .eyebrow {
  color: var(--blue);
}

.learner-summary h2 {
  max-width: 760px;
  margin: 10px 0 16px;
  color: var(--navy);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.08;
}

.learner-summary .lede {
  max-width: 760px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.04rem, 1.6vw, 1.22rem);
  line-height: 1.58;
}

.learner-summary .hero-actions {
  margin-top: 22px;
}

.weekly-status-summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  border: 1px solid #cbd9e6;
  border-radius: var(--radius);
  background: #f8fbfe;
  padding: 20px;
}

.weekly-status-summary .status-pill {
  align-self: flex-start;
  padding: 7px 12px;
}

.progress-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.progress-steps li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  border: 1px solid #d9e4ee;
  border-radius: 8px;
  background: var(--white);
  padding: 10px 12px;
}

.progress-steps span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #b9c9d9;
  border-radius: 999px;
  color: var(--navy);
  font-weight: 900;
}

.progress-steps strong {
  min-width: 0;
  color: var(--navy);
  font-size: 0.96rem;
}

.progress-steps em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.progress-steps .is-current {
  border-color: rgba(1, 121, 183, 0.42);
  background: #eef4fb;
}

.progress-steps .is-current span {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.progress-steps .is-current em {
  color: var(--blue);
}

.progress-steps .is-done {
  border-color: rgba(78, 120, 32, 0.34);
  background: rgba(120, 190, 32, 0.1);
}

.progress-steps .is-done span {
  border-color: var(--green);
  background: var(--green);
}

.progress-steps .is-done em {
  color: #335d0b;
}

.week-plan {
  margin-top: 28px;
}

.week-plan-head {
  margin-bottom: 16px;
}

.week-plan-head h3 {
  font-size: clamp(24px, 3vw, 34px);
}

.week-plan .step-tile {
  min-height: 132px;
}

@media (max-width: 920px) {
  .learner-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .experience-context {
    padding: 16px;
  }

  .learner-summary {
    padding: 20px;
  }

  .progress-steps li {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .progress-steps em {
    grid-column: 2;
  }
}

/* ============================================================================
   Instructor console design pass
   ----------------------------------------------------------------------------
   The learner journey and the instructor console are the same product but not
   the same register. A student is walked through a week, so their pages open
   with a statement and a gold "you are here". An instructor arrives twenty
   minutes before class and asks two questions — what happened, and what do I
   open with — so these pages open with the answer and stay quiet underneath.

   Three rules govern this layer:

   1. One blue, many magnitudes. Nothing here is a set of competing series, so
      nothing gets its own hue. Charts run on one ordinal Thunderbird blue ramp
      (validated light→dark against the white card and the page plane), and
      "not started" takes neutral grey because it is missing data, not a stage.
   2. Gold stays scarce. It marks the one thing to act on — the task callout —
      and the primary button. It never edges a heading or a form.
   3. Depth is a hairline, not a shadow. The class strip sits on the plane, the
      content sits on white with a 1px rule and the faintest lift. Only the
      signature is allowed any weight.
   ========================================================================== */

#view-root[data-console='instructor'] {
  /* Ordinal practice ramp. Monotone lightness, >=0.06 L per step, light end
     clears 2:1 on both the card and the plane. */
  --ic-stage-not-started: #c3cbd6;
  --ic-stage-practiced: #6fb2da;
  --ic-stage-completed: #0179b7;
  --ic-stage-reflected: #014c86;

  --ic-fill: #0179b7;
  --ic-track: #e4eef7;
  --ic-rule: #e3e9f1;
  --ic-wash: #f7fafd;
  --ic-lift: 0 1px 2px rgba(0, 46, 95, 0.05);
}

/* ---- Page rhythm --------------------------------------------------------- */

#view-root[data-console='instructor'] > * {
  margin-bottom: 22px;
}

#view-root[data-console='instructor'] > *:last-child {
  margin-bottom: 0;
}

/* A console headline is a finding, not a banner. It steps down from the
   learner journey's display size so the evidence below it can lead. */
#view-root[data-console='instructor'] .page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 18px 28px;
  margin-bottom: 20px;
}

#view-root[data-console='instructor'] .page-head h2 {
  max-width: 24ch;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.015em;
  line-height: 1.12;
}

#view-root[data-console='instructor'] .page-head .page-intro {
  max-width: 68ch;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
}

#view-root[data-console='instructor'] .toolbar-actions {
  flex-wrap: wrap;
  gap: 10px;
}

/* Many cards on one page: the heavy product shadow becomes noise, so console
   surfaces lift by a hairline instead. The task callout keeps the full one. */
#view-root[data-console='instructor'] .disclosure {
  border-color: var(--ic-rule);
  box-shadow: var(--ic-lift);
}

/* ---- The class strip: chrome, not content -------------------------------- */

.class-strip {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--ic-lift);
}

.class-strip-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
  align-items: end;
  gap: 20px;
  padding: 16px 22px 14px;
}

.class-strip .eyebrow {
  margin: 0 0 4px;
}

.class-strip-name {
  margin: 0;
  color: var(--navy);
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.class-strip-meta {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.class-strip-switch {
  margin: 0;
}

.class-strip-switch label {
  margin-bottom: 4px;
}

/* Four counts on one line, separated by the space between them rather than by
   four boxes — the board below is where these numbers get their picture. */
.class-strip-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  border-block: 1px solid var(--rule-2);
  background: var(--ic-wash);
  padding: 10px 22px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.class-strip-numbers span + span::before {
  margin-right: 22px;
  color: var(--grey);
  content: '·';
}

.class-strip-code {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  padding: 12px 22px;
  font-size: 13px;
}

.class-strip-code small,
.class-strip-created {
  color: var(--muted);
  font-size: 12.5px;
}

.class-strip code,
.class-strip-created code {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ic-wash);
  color: var(--navy);
  padding: 2px 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.class-strip-created {
  margin: 0 22px 12px;
  border-left: 3px solid var(--gold);
  background: #fffbeb;
  padding: 10px 14px;
  color: var(--ink-2);
}

.class-create-disclosure {
  border-top: 1px solid var(--rule-2);
  padding: 0 22px 16px;
}

.class-create-disclosure summary {
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}

.course-create-form {
  border-left: 0;
  border-radius: 6px;
  background: var(--ic-wash);
}

/* ---- What is open for learners ------------------------------------------- */

.assigned-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--ic-rule);
  border-left: 3px solid var(--ic-fill);
  border-radius: var(--radius);
  background: var(--white);
  padding: 18px 22px;
  box-shadow: var(--ic-lift);
}

.assigned-strip .eyebrow {
  margin: 0 0 5px;
}

.assigned-strip h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.assigned-strip p:last-of-type {
  max-width: 70ch;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ---- The chart card ------------------------------------------------------ */

.ic-chart {
  border: 1px solid var(--ic-rule);
  border-radius: var(--radius);
  background: var(--white);
  padding: 20px 24px 16px;
  box-shadow: var(--ic-lift);
}

.ic-chart-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.ic-chart-head p {
  max-width: 78ch;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.ic-chart-plot {
  margin-top: 18px;
}

/* ---- Signature: the roster laid out as the pipeline ----------------------
   Column depth is the funnel and a name sits in the furthest stage it reached,
   so "who do I nudge" is answered by reading right to left. It replaces a
   funnel chart, a dot grid, and half a table with one artifact.
   ------------------------------------------------------------------------ */

.ic-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ic-board-col {
  border-left: 1px solid var(--ic-rule);
  padding: 0 16px;
}

.ic-board-col:first-child {
  border-left: 0;
  padding-left: 0;
}

.ic-board-col:last-child {
  padding-right: 0;
}

.ic-board-col[data-stage='not_started'] { --stage: var(--ic-stage-not-started); }
.ic-board-col[data-stage='practiced'] { --stage: var(--ic-stage-practiced); }
.ic-board-col[data-stage='completed'] { --stage: var(--ic-stage-completed); }
.ic-board-col[data-stage='reflected'] { --stage: var(--ic-stage-reflected); }

.ic-board-head h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ic-board-head h4 i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--stage);
}

/* Proportional figures: a standalone count set in tabular digits reads loose. */
.ic-board-head strong {
  display: block;
  margin: 10px 0 3px;
  color: var(--navy);
  font-size: 30px;
  font-weight: 850;
  line-height: 1;
}

.ic-board-head p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* What the column means sits above; what to do about it sits here, set apart
   by the stage's own colour so the instruction reads as the column's, not as
   another line of description. Scoped through .ic-board-head to outrank the
   rule above on specificity rather than with !important. */
.ic-board-head .ic-board-action {
  margin: 0 0 14px;
  border-left: 2px solid var(--stage);
  padding-left: 9px;
  color: var(--ink);
  font-weight: 600;
}

.ic-board-stack {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ic-board-stack li {
  position: relative;
  border-left: 3px solid var(--stage);
  border-radius: 0 4px 4px 0;
  background: var(--ic-wash);
  padding: 8px 10px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}

.ic-board-stack li:hover,
.ic-board-stack li:focus-visible {
  background: #eaf2fa;
}

.ic-board-none {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

/* ---- Bars: one hue, value at the tip ------------------------------------- */

.ic-bars {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ic-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(110px, 0.6fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border-radius: 4px;
  padding: 7px 8px 7px 0;
}

/* The wash marks the row; the global gold focus ring is left intact on top of
   it so keyboard and pointer land in the same place. */
.ic-bar:hover,
.ic-bar:focus-visible {
  background: var(--ic-wash);
}

.ic-bar-label {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}

.ic-bar-plot {
  position: relative;
  height: 10px;
}

/* The zero line. A hairline is enough: the labels carry every value, so this
   chart never needs a gridded axis behind it. */
.ic-bar-plot::before {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: 0;
  width: 1px;
  background: var(--rule);
  content: '';
}

.ic-bar-plot i {
  display: block;
  height: 100%;
  /* 4px rounded data-end, square where it meets the baseline. */
  border-radius: 0 4px 4px 0;
  background: var(--ic-fill);
  transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ic-bar-plot b {
  position: absolute;
  top: 50%;
  transform: translate(10px, -50%);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- The hover layer ----------------------------------------------------- */

.ic-tip {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 0;
  z-index: 6;
  visibility: hidden;
  width: max-content;
  max-width: 300px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--white);
  padding: 8px 11px;
  box-shadow: 0 10px 24px rgba(0, 46, 95, 0.16);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* The rightmost column would push a left-anchored tip past the card edge. */
.ic-board-col:last-child .ic-tip {
  right: 0;
  left: auto;
}

.ic-bar:hover .ic-tip,
.ic-bar:focus-visible .ic-tip,
.ic-board-stack li:hover .ic-tip,
.ic-board-stack li:focus-visible .ic-tip {
  visibility: visible;
  opacity: 1;
}

/* ---- Meters: a share against a limit, never a two-slice dial -------------- */

.ic-meter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ic-meter-row .ic-meter {
  border: 1px solid var(--ic-rule);
  border-radius: var(--radius);
  background: var(--white);
  padding: 18px 20px;
  box-shadow: var(--ic-lift);
}

.ic-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ic-meter-head span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The board's stage counts are the loudest numbers on the Overview. These are
   the supporting pair, so they step down rather than compete. */
.ic-meter-head strong {
  color: var(--navy);
  font-size: 24px;
  font-weight: 850;
  line-height: 1;
}

/* The unfilled track is a lighter step of the fill's own ramp, so the whole
   bar reads as one scale rather than a bar sitting on a grey slab. */
.ic-meter-track {
  height: 10px;
  margin: 12px 0 10px;
  border-radius: 2px;
  background: var(--ic-track);
}

.ic-meter-track i {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--ic-fill);
  transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ic-meter p {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---- Stat tiles ---------------------------------------------------------- */

.ic-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--ic-rule);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--ic-lift);
}

.ic-stat {
  border-left: 1px solid var(--rule-2);
  padding: 18px 20px;
}

.ic-stat:first-child {
  border-left: 0;
}

.ic-stat span {
  display: block;
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ic-stat strong {
  display: block;
  margin: 12px 0 4px;
  color: var(--navy);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 850;
  line-height: 1;
}

.ic-stat em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

/* ---- Tables: the roster, and the twin behind every chart ------------------ */

.ic-roster {
  border: 1px solid var(--ic-rule);
  border-radius: var(--radius);
  background: var(--white);
  padding: 4px 22px 14px;
  box-shadow: var(--ic-lift);
}

.ic-roster-scroll {
  overflow-x: auto;
}

.ic-roster table,
.ic-table table {
  width: 100%;
  border-collapse: collapse;
}

.ic-roster table {
  min-width: 540px;
}

.ic-roster th,
.ic-roster td,
.ic-table th,
.ic-table td {
  border-bottom: 1px solid var(--rule-2);
  padding: 11px 14px 11px 0;
  text-align: left;
  font-size: 13px;
}

.ic-roster thead th,
.ic-table thead th {
  border-bottom-color: var(--rule);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ic-roster tbody th,
.ic-table tbody th {
  color: var(--ink);
  font-weight: 600;
}

.ic-roster .is-num,
.ic-table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ic-roster tbody tr:hover {
  background: var(--ic-wash);
}

.ic-roster tbody tr:last-child th,
.ic-roster tbody tr:last-child td,
.ic-table tbody tr:last-child th,
.ic-table tbody tr:last-child td {
  border-bottom: 0;
}

.ic-roster-empty {
  color: var(--muted);
  text-align: left;
}

.ic-roster .figcap {
  margin: 12px 0 0;
  font-size: 12px;
}

/* No value is reachable by hover alone: every chart carries this. */
.ic-table {
  margin-top: 16px;
  border: 0;
  border-top: 1px solid var(--rule-2);
  border-radius: 0;
  background: none;
  padding: 0;
  box-shadow: none;
}

.ic-table > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 0 0;
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.ic-table > summary::-webkit-details-marker {
  display: none;
}

.ic-table > summary::before {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1;
  content: '+';
}

.ic-table[open] > summary::before {
  content: '\2212';
}

.ic-table table {
  margin-top: 10px;
}

/* ---- Stage badge --------------------------------------------------------- */

.ic-stage {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
  font-size: 12.5px;
  white-space: nowrap;
}

.ic-stage i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--stage);
}

.ic-stage[data-stage='not_started'] { --stage: var(--ic-stage-not-started); }
.ic-stage[data-stage='practiced'] { --stage: var(--ic-stage-practiced); }
.ic-stage[data-stage='completed'] { --stage: var(--ic-stage-completed); }
.ic-stage[data-stage='reflected'] { --stage: var(--ic-stage-reflected); }

/* ---- Scenario detail ----------------------------------------------------- */

.ic-scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
}

.ic-scenario-card {
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--ic-rule);
  border-radius: var(--radius);
  background: var(--white);
  padding: 20px;
  box-shadow: var(--ic-lift);
}

.ic-scenario-card .eyebrow,
.ic-scenario-card h3 {
  margin: 0;
}

.ic-scenario-card h3 {
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.ic-scenario-card .ic-meter-head span {
  font-size: 12px;
}

.ic-scenario-card .ic-meter-head strong {
  font-size: 24px;
}

.ic-scenario-review {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* ---- Debrief: where the class split -------------------------------------- */

.ic-split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

/* The edge groups the three cards; it is chrome, so it takes the pale brand
   tint rather than a step off the data ramp, which would imply a value. */
.ic-split {
  border-left: 3px solid var(--dawn);
  border-radius: 0 6px 6px 0;
  background: var(--ic-wash);
  padding: 16px 18px;
}

.ic-split-count {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 12px;
}

.ic-split-count strong {
  margin-right: 5px;
  color: var(--navy);
  font-size: 22px;
  font-weight: 850;
}

.ic-split h4 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 14.5px;
  font-weight: 850;
  line-height: 1.35;
}

.ic-split blockquote {
  margin: 0 0 12px;
  border-left: 2px solid var(--dawn);
  padding-left: 12px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.55;
}

.ic-split-after {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.ic-split-after span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ic-brief-item {
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 16px;
}

.ic-brief-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.ic-brief-item .eyebrow {
  margin: 0 0 6px;
}

.ic-brief-item blockquote {
  margin: 0 0 8px;
  border-left: 2px solid var(--dawn);
  padding-left: 12px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.55;
}

.ic-brief-item p.muted {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.ic-evidence-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.ic-evidence-split h4 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ic-evidence-split h4 ~ h4 {
  margin-top: 22px;
}

.ic-boundary {
  max-width: 88ch;
  font-size: 12px;
  line-height: 1.55;
}

/* ---- Reflection evidence and revision advice ----------------------------- */

.ic-evidence-meta {
  max-width: 82ch;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.ic-advice-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ic-advice-list li {
  border-left: 2px solid var(--dawn);
  padding-left: 14px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}

.ic-empty {
  margin: 0;
  padding: 26px 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
}

/* ---- Scenario studio ------------------------------------------------------
   Gold marks the action, so it comes off the section heading and stays on the
   button that actually publishes the scenario. */

#view-root[data-console='instructor'] .scenario-authoring-head {
  margin: 34px 0 14px;
  border-left: 0;
  border-top: 1px solid var(--rule);
  padding: 22px 0 0;
}

#view-root[data-console='instructor'] .scenario-authoring-head h3 {
  font-size: 18px;
  font-weight: 850;
}

#view-root[data-console='instructor'] .scenario-authoring-head p {
  max-width: 70ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

#view-root[data-console='instructor'] .custom-scenario-form fieldset {
  border-color: var(--ic-rule);
  border-radius: 6px;
  background: var(--ic-wash);
}

#view-root[data-console='instructor'] .custom-scenario-form legend {
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#view-root[data-console='instructor'] .authoring-submit {
  border-left: 0;
  border-radius: 6px;
  background: var(--ic-wash);
}

#view-root[data-console='instructor'] .authoring-submit p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

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

@media (max-width: 900px) {
  .ic-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ic-board-col {
    border-left: 0;
    border-top: 1px solid var(--ic-rule);
    padding: 16px 0 0;
  }

  .ic-board-col:nth-child(odd) {
    padding-right: 12px;
  }

  .ic-board-col:nth-child(even) {
    padding-left: 12px;
  }

  .ic-board-col:first-child,
  .ic-board-col:nth-child(2) {
    border-top: 0;
    padding-top: 0;
  }

  .ic-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ic-stat:nth-child(odd) {
    border-left: 0;
  }

  .ic-stat:nth-child(n + 3) {
    border-top: 1px solid var(--rule-2);
  }
}

@media (max-width: 680px) {
  .class-strip-main,
  .assigned-strip,
  .ic-meter-row {
    grid-template-columns: 1fr;
  }

  .assigned-strip button {
    justify-self: start;
  }

  .ic-board,
  .ic-stats {
    grid-template-columns: 1fr;
  }

  .ic-board-col,
  .ic-board-col:nth-child(odd),
  .ic-board-col:nth-child(even) {
    border-left: 0;
    border-top: 1px solid var(--ic-rule);
    padding: 16px 0 0;
  }

  .ic-board-col:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .ic-stat {
    border-left: 0;
  }

  .ic-stat:not(:first-child) {
    border-top: 1px solid var(--rule-2);
  }

  .ic-bar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ic-tip {
    max-width: min(300px, 72vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ic-bar-plot i,
  .ic-meter-track i,
  .ic-tip {
    transition: none;
  }
}

/* 0730 learner flow simplification pass */
.experience-path:empty {
  display: none;
}

.course-context-card {
  cursor: pointer;
  text-align: left;
}

.course-context-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.week-scenario-head {
  align-items: end;
}

.week-assigned-ribbon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 22px;
}

.week-scenario-grid {
  margin-top: 0;
}

@media (max-width: 760px) {
  .week-assigned-ribbon {
    grid-template-columns: 1fr;
  }
}
.stakes-list,
.checkpoint-list,
.rubric-preview-list {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.stakes-list li {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.2fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fbff;
}

.stakes-list strong {
  color: var(--ink);
}

.stakes-list span,
.checkpoint-list li,
.rubric-preview-list li {
  color: var(--muted);
}

.checkpoint-list,
.rubric-preview-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.checkpoint-list li,
.rubric-preview-list li {
  padding: 8px 10px;
  border-left: 4px solid var(--accent);
  background: #fbfdff;
}

@media (max-width: 720px) {
  .stakes-list li {
    grid-template-columns: 1fr;
  }
}
/* 0731 calming front-end polish */
:root {
  --paper: #f6f9fc;
  --surface: #ffffff;
  --calm-surface: rgba(255, 255, 255, 0.92);
  --calm-wash: #eef5fb;
  --calm-line: #d8e5f0;
  --shadow: 0 1px 2px rgba(11, 36, 61, 0.035), 0 18px 46px rgba(11, 36, 61, 0.07);
  --maxw: 1180px;
}

body {
  background:
    radial-gradient(circle at top left, rgba(255, 198, 39, 0.08), transparent 32rem),
    linear-gradient(180deg, #f8fbfe 0%, #eef4fa 100%);
  color: #102a43;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(16, 95, 159, 0.055) 1px, transparent 1.5px);
  background-size: 30px 30px;
  opacity: 0.5;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 84px;
  border-bottom: 1px solid rgba(216, 229, 240, 0.9);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(11, 36, 61, 0.04);
}

.nav-tabs,
.topbar nav {
  gap: 10px;
}

.tab,
.secondary,
.primary,
.signout {
  min-height: 44px;
  border-radius: 10px;
}

#view-root {
  width: min(var(--maxw), calc(100vw - 48px));
  margin: 0 auto;
  padding: 36px 0 72px;
}

#view-root > section,
#view-root > details,
#view-root > .task-callout,
#view-root > .assigned-learning-card,
#view-root > .brief-cta,
#view-root > .notice {
  margin-top: 28px;
}

#view-root > section:first-child,
#view-root > .page-back + section {
  margin-top: 0;
}

.page-back {
  margin: 0 0 22px;
}

.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  min-height: auto;
  margin-bottom: 8px;
  border-left: 0;
  padding: 6px 0 4px;
}

.page-head::before {
  display: none;
}

.page-head h2,
.learner-viz-hero .viz-copy h2 {
  max-width: 24ch;
  margin: 0;
  color: #09294a;
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 1.08;
}

.page-intro,
.page-head p:not(.eyebrow) {
  max-width: 72ch;
  color: #52687f;
  font-size: 1.05rem;
  line-height: 1.7;
}

.viz-hero.learner-viz-hero {
  width: min(var(--maxw), calc(100vw - 48px));
  min-height: 220px;
  margin: 28px auto 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #053c66 0%, #075176 58%, #0f6f8f 100%);
  box-shadow: 0 20px 58px rgba(11, 36, 61, 0.16);
}

.viz-hero.learner-viz-hero .viz-copy h2 {
  max-width: 22ch;
  color: #ffffff;
  font-size: clamp(2rem, 3.6vw, 3.3rem);
}

.viz-hero .lede {
  color: rgba(255, 255, 255, 0.82);
}

.panel,
.story-band,
.disclosure,
.scenario-card,
.left-rail,
.right-rail,
.conversation {
  border: 1px solid var(--calm-line);
  border-radius: 10px;
  background: var(--calm-surface);
  box-shadow: var(--shadow);
}

.panel,
.story-band {
  padding: clamp(24px, 3vw, 38px);
}

.story-band {
  align-items: center;
  gap: 24px;
}

.scenario-grid,
.week-scenario-grid,
.course-entry-grid,
.review-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

.scenario-card {
  min-height: 260px;
  padding: 26px;
}

.scenario-card h3,
.panel h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.25;
}

.scenario-card p,
.panel p,
.briefrow .rv {
  color: #52687f;
  font-size: 1rem;
  line-height: 1.68;
}

.assigned-ribbon,
.week-assigned-ribbon,
.notice,
.task-callout {
  border-radius: 10px;
  border-color: #d9e7f2;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 34px rgba(11, 36, 61, 0.055);
}

.brief-panel {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.briefrow {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  padding: 24px clamp(22px, 3vw, 34px);
  border-bottom: 1px solid #e4edf5;
}

.briefrow:last-child {
  border-bottom: 0;
}

.briefrow .bn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #eef6fb;
  color: #0b4c82;
  font-size: 0.9rem;
}

.briefrow .rk {
  margin-bottom: 8px;
  color: #0d5f95;
}

.stakes-list,
.checkpoint-list,
.rubric-preview-list {
  gap: 12px;
}

.stakes-list li,
.checkpoint-list li,
.rubric-preview-list li {
  border-radius: 8px;
  background: #f8fbfd;
}

.practice-layout {
  grid-template-columns: minmax(220px, 0.78fr) minmax(420px, 1.6fr) minmax(240px, 0.82fr);
  gap: 24px;
  align-items: start;
}

.left-rail,
.right-rail,
.conversation {
  padding: 24px;
}

.transcript {
  min-height: 420px;
  padding: 20px;
  border-radius: 10px;
  background: #f7fafc;
}

.composer {
  margin-top: 18px;
}

.compose-row {
  border-radius: 10px;
}

@media (max-width: 1080px) {
  .practice-layout {
    grid-template-columns: 1fr;
  }

  .left-rail,
  .right-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
  }
}

@media (max-width: 760px) {
  #view-root {
    width: min(100% - 28px, var(--maxw));
    padding: 24px 0 54px;
  }

  .topbar {
    position: relative;
    min-height: auto;
  }

  .page-head,
  .story-band,
  .week-assigned-ribbon {
    grid-template-columns: 1fr;
  }

  .page-head h2,
  .learner-viz-hero .viz-copy h2 {
    max-width: none;
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .viz-hero.learner-viz-hero {
    width: min(100% - 28px, var(--maxw));
    min-height: 260px;
    margin: 18px auto 28px;
  }

  .panel,
  .story-band,
  .scenario-card,
  .left-rail,
  .right-rail,
  .conversation {
    padding: 22px;
  }

  .briefrow {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .scenario-grid,
  .week-scenario-grid,
  .course-entry-grid,
  .review-grid {
    gap: 18px;
  }
}
/* 0731 instructor teaching-story dashboard */
#view-root[data-console='instructor'] .ic-story-head h2 {
  max-width: 32ch;
}

.ic-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 22px;
}

.ic-teaching-questions {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 26px;
  align-items: start;
  border: 1px solid #d8e5f0;
  border-left: 4px solid #ffc627;
  border-radius: 10px;
  background: #ffffff;
  padding: 24px 26px;
  box-shadow: 0 1px 2px rgba(0, 46, 95, 0.04), 0 16px 42px rgba(0, 46, 95, 0.06);
}

.ic-teaching-questions h3 {
  margin: 0;
  color: #09294a;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 850;
  line-height: 1.2;
}

.ic-teaching-questions p {
  margin: 10px 0 0;
  color: #52687f;
  line-height: 1.6;
}

.ic-teaching-questions ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ic-teaching-questions li {
  position: relative;
  border: 1px solid #e1ebf3;
  border-radius: 8px;
  background: #f8fbfd;
  padding: 13px 14px 13px 42px;
  color: #102a43;
  line-height: 1.45;
}

.ic-teaching-questions li::before {
  content: '?';
  position: absolute;
  left: 12px;
  top: 12px;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 999px;
  background: #e6f0fa;
  color: #0b4c82;
  font-size: 13px;
  font-weight: 900;
}

.ic-readiness-funnel {
  display: grid;
  gap: 14px;
}

.ic-funnel-step {
  display: grid;
  gap: 8px;
}

.ic-funnel-label {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.ic-funnel-label span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: #eef5fb;
  color: #0b4c82;
  font-size: 12px;
  font-weight: 900;
}

.ic-funnel-label strong {
  color: #09294a;
  font-size: 14px;
}

.ic-funnel-label b {
  color: #09294a;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.ic-funnel-track {
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8f0f7;
}

.ic-funnel-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #75b8db, #0179b7);
}

.ic-funnel-step[data-stage='not_started'] .ic-funnel-track i { background: #b8c4d1; }
.ic-funnel-step[data-stage='started'] .ic-funnel-track i,
.ic-funnel-step[data-stage='practiced'] .ic-funnel-track i { background: #6fb2da; }
.ic-funnel-step[data-stage='finished'] .ic-funnel-track i,
.ic-funnel-step[data-stage='completed'] .ic-funnel-track i { background: #0179b7; }
.ic-funnel-step[data-stage='reflected'] .ic-funnel-track i { background: #014c86; }

.ic-funnel-step p {
  margin: 0 0 0 38px;
  color: #63788d;
  font-size: 12.5px;
  line-height: 1.45;
}

.ic-signal-matrix {
  display: grid;
  border: 1px solid #e1ebf3;
  border-radius: 10px;
  overflow: hidden;
}

.ic-signal-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(90px, 0.45fr);
  align-items: stretch;
  min-height: 68px;
  border-top: 1px solid #e1ebf3;
  background: #ffffff;
}

.ic-signal-row:first-child {
  border-top: 0;
}

.ic-signal-head {
  min-height: auto;
  background: #f5f9fc;
  color: #5f7690;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ic-signal-row > span {
  display: grid;
  align-content: center;
  gap: 4px;
  border-left: 1px solid #edf3f8;
  padding: 12px 14px;
}

.ic-signal-row > span:first-child {
  border-left: 0;
}

.ic-signal-row strong {
  color: #09294a;
  font-size: 13.5px;
  line-height: 1.25;
}

.ic-signal-row small {
  color: #63788d;
  font-size: 12px;
  line-height: 1.3;
}

.ic-matrix-cell {
  position: relative;
  overflow: hidden;
  background: #f8fbfd;
}

.ic-matrix-cell i {
  position: absolute;
  inset: 0 auto 0 0;
  opacity: 0.82;
}

.ic-matrix-cell[data-level='none'] i { background: #eef3f7; }
.ic-matrix-cell[data-level='low'] i { background: #d9ebf6; }
.ic-matrix-cell[data-level='mid'] i { background: #8fc4e2; }
.ic-matrix-cell[data-level='high'] i { background: #2d83b8; }

.ic-matrix-cell b,
.ic-matrix-cell small {
  position: relative;
  z-index: 1;
}

.ic-matrix-cell b,
.ic-turn-cell b {
  color: #09294a;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
  .ic-story-grid,
  .ic-teaching-questions {
    grid-template-columns: 1fr;
  }

  .ic-signal-row {
    grid-template-columns: minmax(190px, 1.2fr) repeat(3, minmax(92px, 0.8fr));
  }
}

@media (max-width: 680px) {
  .ic-signal-matrix {
    overflow-x: auto;
  }

  .ic-signal-row {
    min-width: 620px;
  }
}

/* 0803 plan implementation: calmer scenario-first participant and instructor views */
.week-scenario-head {
  margin-bottom: 18px;
}

.week-scenario-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.scenario-card.week-card {
  min-height: 0;
  padding: 24px;
}

.scenario-card.week-card h3 {
  font-size: clamp(1.28rem, 1.8vw, 1.62rem);
  line-height: 1.22;
}

.scenario-card.week-card p {
  min-height: 0;
  line-height: 1.58;
}

.scenario-role-line {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 0.92rem;
}

.scenario-role-line strong {
  color: var(--ink);
}

.rich-briefrow .rv {
  max-width: 86ch;
  font-size: 1rem;
  line-height: 1.68;
}

.brief-panel .checkpoint-list li,
.brief-panel .stakes-list li {
  line-height: 1.55;
}

.instructor-active-brief {
  margin-bottom: 20px;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 72%, #f4f8fb 100%);
}

.instructor-active-brief h3 {
  font-size: clamp(1.28rem, 1.9vw, 1.7rem);
}

.instructor-active-brief p {
  max-width: 88ch;
}

.ic-scenario-card.is-selected {
  border-color: #9fc5e4;
  box-shadow: inset 4px 0 0 var(--you), 0 1px 2px rgba(11, 36, 61, 0.04), 0 14px 34px rgba(11, 36, 61, 0.065);
}

.ic-scenario-card > p:not(.eyebrow):not(.ic-scenario-review):not(.scenario-role-line) {
  color: var(--ink-2);
  line-height: 1.58;
}

@media (max-width: 860px) {
  .scenario-card.week-card {
    padding: 20px;
  }

  .instructor-active-brief {
    align-items: stretch;
  }
}
/* --- 0803 classroom-prep simplification ---------------------------------- */
.practice-before-class,
.mission-brief,
.class-debrief-card {
  width: min(980px, 100%);
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 45px rgba(11, 36, 61, 0.07);
}

.practice-before-class {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  margin: 0 auto 22px;
  padding: 28px 32px;
}

.practice-before-class .eyebrow {
  grid-column: 1 / -1;
  margin: 0;
}

.practice-before-class h2,
.mission-brief h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.practice-before-class p {
  max-width: 58ch;
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.55;
}

.practice-before-class-actions,
.mission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.assignment-list {
  display: grid;
  gap: 12px;
  width: min(980px, 100%);
  margin: 0 auto;
}

.assignment-list > h3 {
  margin: 20px 0 2px;
  color: var(--ink-3);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scenario-row-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--rule);
  border-left: 4px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  padding: 18px 20px;
  box-shadow: 0 10px 28px rgba(11, 36, 61, 0.045);
}

.scenario-row-card.is-primary {
  border-left-color: var(--you);
}

.scenario-row-card.is-muted {
  opacity: 0.78;
}

.scenario-row-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.scenario-row-main h4 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.22;
}

.scenario-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
}

.scenario-row-meta div {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.scenario-row-meta dt {
  color: var(--ink-3);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.scenario-row-meta dd {
  margin: 0;
  color: var(--ink-2);
}

.mission-brief {
  display: grid;
  gap: 20px;
  margin: 0 auto 18px;
  padding: 30px 34px;
}

.mission-brief .eyebrow {
  margin: 0;
}

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

.mission-brief-grid div {
  border-top: 1px solid var(--rule-2);
  padding-top: 14px;
}

.mission-brief-grid span,
.class-debrief-card .label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mission-brief-grid p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.55;
}

.full-background,
.class-debrief-card,
.instructor-active-brief,
.assignment-list + .disclosure {
  width: min(980px, 100%);
  margin-inline: auto;
}

.mission-background-list {
  display: grid;
  gap: 18px;
}

.mission-background-list h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.mission-background-list p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.6;
}

.class-debrief-card {
  display: grid;
  gap: 18px;
  margin: 0 auto 18px;
  padding: 28px 32px;
  border-left: 4px solid var(--you);
}

.class-debrief-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.class-debrief-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  line-height: 1.1;
}

.debrief-discussion-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: 22px;
  align-items: start;
}

.debrief-discussion-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.debrief-discussion-list li {
  border-top: 1px solid var(--rule-2);
  padding-top: 10px;
  color: var(--ink-2);
  line-height: 1.5;
}

.debrief-discussion-grid blockquote {
  margin: 0;
  border-left: 4px solid var(--other);
  background: #f8fbfd;
  padding: 18px 20px;
}

.debrief-discussion-grid blockquote span {
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debrief-discussion-grid blockquote p {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .practice-before-class,
  .scenario-row-card,
  .mission-brief,
  .class-debrief-card,
  .debrief-discussion-grid {
    grid-template-columns: 1fr;
  }

  .practice-before-class-actions,
  .mission-actions,
  .scenario-row-card > button {
    justify-content: stretch;
    width: 100%;
  }

  .mission-brief-grid {
    grid-template-columns: 1fr;
  }
}
/* 0803 instructor story controls */
.instructor-snapshot {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) repeat(3, minmax(170px, 1fr));
  gap: 16px;
  align-items: stretch;
  border: 1px solid var(--ic-rule);
  border-radius: var(--radius);
  background: var(--white);
  padding: 20px;
  box-shadow: var(--ic-lift);
}

.instructor-snapshot-main {
  display: grid;
  align-content: center;
  border-right: 1px solid var(--rule-2);
  padding-right: 20px;
}

.instructor-snapshot-main .eyebrow,
.instructor-snapshot-main h3,
.instructor-snapshot-main p {
  margin: 0;
}

.instructor-snapshot-main h3 {
  margin-top: 6px;
  color: var(--navy);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.instructor-snapshot-main p {
  max-width: 46ch;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.instructor-snapshot .ic-meter {
  display: grid;
  align-content: center;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: var(--ic-wash);
  padding: 16px;
}

.instructor-nudges tbody td:nth-child(3) {
  max-width: 34ch;
  color: var(--ink-2);
  line-height: 1.45;
}

@media (max-width: 980px) {
  .instructor-snapshot {
    grid-template-columns: 1fr 1fr;
  }

  .instructor-snapshot-main {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid var(--rule-2);
    padding-right: 0;
    padding-bottom: 16px;
  }
}

@media (max-width: 680px) {
  .instructor-snapshot {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}
/* 0803 aggregate instructor results */
.aggregate-groups {
  display: grid;
  gap: 18px;
  border: 1px solid var(--ic-rule);
  border-radius: var(--radius);
  background: var(--white);
  padding: 24px;
  box-shadow: var(--ic-lift);
}

.aggregate-groups-head .eyebrow,
.aggregate-groups-head h3,
.aggregate-groups-head p {
  margin: 0;
}

.aggregate-groups-head h3 {
  margin-top: 6px;
  color: var(--navy);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.12;
}

.aggregate-groups-head p {
  max-width: 76ch;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.58;
}

.aggregate-group-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.aggregate-group {
  display: grid;
  gap: 12px;
  border: 1px solid var(--rule-2);
  border-top: 4px solid var(--blue);
  border-radius: 6px;
  background: #fbfdff;
  padding: 18px;
}

.aggregate-group[data-group='strong'] { border-top-color: #2f7d5b; }
.aggregate-group[data-group='developing'] { border-top-color: var(--gold); }
.aggregate-group[data-group='needs_attention'] { border-top-color: #b85b39; }

.aggregate-group-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.aggregate-group-top span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
}

.aggregate-group-top strong {
  color: var(--navy);
  font-size: 34px;
  font-weight: 850;
  line-height: 1;
}

.aggregate-track {
  height: 10px;
  border-radius: 2px;
  background: var(--ic-track);
}

.aggregate-track i {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--ic-fill);
}

.aggregate-group p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.aggregate-group ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aggregate-group li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--rule-2);
  padding-top: 7px;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.35;
}

.aggregate-group li span {
  color: var(--navy);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .aggregate-group-grid {
    grid-template-columns: 1fr;
  }
}
.aggregate-distribution {
  display: flex;
  min-height: 64px;
  overflow: hidden;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: var(--ic-track);
}

.aggregate-distribution span {
  display: grid;
  min-width: 42px;
  align-content: center;
  gap: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.7);
  padding: 10px 12px;
  color: #ffffff;
}

.aggregate-distribution span:first-child {
  border-left: 0;
}

.aggregate-distribution span[data-group='strong'] { background: #2f7d5b; }
.aggregate-distribution span[data-group='developing'] { background: #b88205; }
.aggregate-distribution span[data-group='needs_attention'] { background: #b85b39; }

.aggregate-distribution b,
.aggregate-distribution em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aggregate-distribution b {
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.aggregate-distribution em {
  font-size: 20px;
  font-style: normal;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.aggregate-group .aggregate-track {
  display: none;
}

/* 0803 instructor active case clarity */
.active-case-briefing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  gap: 20px;
  align-items: start;
  border: 1px solid var(--ic-rule);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: #ffffff;
  padding: 24px;
  box-shadow: var(--ic-lift);
}

.active-case-main {
  display: grid;
  gap: 14px;
}

.active-case-main .eyebrow,
.active-case-main h3,
.active-case-main p,
.active-case-facts {
  margin: 0;
}

.active-case-main h3 {
  color: var(--navy);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.12;
}

.active-case-main p {
  max-width: 78ch;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.58;
}

.active-case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.active-case-facts div {
  min-width: 170px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: var(--ic-wash);
  padding: 11px 13px;
}

.active-case-facts dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.active-case-facts dd {
  margin: 4px 0 0;
  color: var(--navy);
  font-weight: 850;
  line-height: 1.3;
}

.active-case-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.active-case-metric {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 6px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: var(--ic-wash);
  padding: 14px;
}

.active-case-metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.active-case-metric strong {
  color: var(--navy);
  font-size: 32px;
  font-weight: 850;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.active-case-metric small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
}

.active-case-briefing > .toolbar-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .active-case-briefing {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .active-case-briefing {
    padding: 18px;
  }

  .active-case-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .active-case-metrics,
  .active-case-facts {
    grid-template-columns: 1fr;
  }

  .active-case-facts {
    display: grid;
  }
}

/* 0804 visible instructor case loading */
.case-loader-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
  gap: 22px;
  align-items: start;
  border: 1px solid var(--ic-rule);
  border-left: 4px solid var(--you);
  border-radius: var(--radius);
  background: #ffffff;
  padding: 24px;
  box-shadow: var(--ic-lift);
}

.case-loader-intro .eyebrow,
.case-loader-intro h3,
.case-loader-intro p {
  margin: 0;
}

.case-loader-intro h3 {
  margin-top: 6px;
  color: var(--navy);
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.15;
}

.case-loader-intro p {
  max-width: 76ch;
  margin-top: 10px;
  color: var(--ink-2);
  line-height: 1.58;
}

.case-loader-intro ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-loader-intro li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: var(--ic-wash);
  padding: 12px 14px;
}

.case-loader-intro li::before {
  content: counter(list-item, decimal-leading-zero);
  grid-row: 1 / span 2;
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.case-loader-intro strong {
  color: var(--navy);
  font-weight: 850;
}

.case-loader-intro span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.35;
}

#view-root[data-console='instructor'] .scenario-creator[open] {
  border-color: var(--ic-rule);
  box-shadow: var(--ic-lift);
}

#view-root[data-console='instructor'] .scenario-creator[open] > summary {
  background: #f8fbfd;
}

@media (max-width: 860px) {
  .case-loader-intro {
    grid-template-columns: 1fr;
    padding: 18px;
  }
}

/* 0807 customized UX plan implementation */
.prototype-gate,
.practice-safety-note,
.case-governance-notice {
  border: 1px solid var(--ic-rule, var(--rule));
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--ic-lift, 0 12px 30px rgba(11, 36, 61, 0.06));
}

.prototype-gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
  gap: 20px;
  padding: 22px 24px;
}

.prototype-gate .eyebrow,
.prototype-gate h3,
.prototype-gate p,
.case-governance-notice .eyebrow,
.case-governance-notice h3,
.case-governance-notice p,
.practice-safety-note strong,
.practice-safety-note p {
  margin: 0;
}

.prototype-gate h3,
.case-governance-notice h3 {
  margin-top: 6px;
  color: var(--navy);
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.16;
}

.prototype-gate p,
.case-governance-notice p,
.practice-safety-note p {
  max-width: 78ch;
  margin-top: 10px;
  color: var(--ink-2);
  line-height: 1.58;
}

.prototype-gate ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prototype-gate li {
  display: grid;
  gap: 4px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: var(--ic-wash, #f8fbfd);
  padding: 12px 14px;
}

.prototype-gate li strong,
.practice-safety-note strong {
  color: var(--navy);
  font-weight: 850;
}

.prototype-gate li span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.4;
}

.practice-safety-note {
  display: grid;
  gap: 6px;
  width: min(980px, 100%);
  margin: 0 auto 18px;
  padding: 18px 22px;
  border-left-color: #2f7d5b;
}

.case-governance-notice {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-left-color: #b88205;
}

.case-governance-notice .status-pill {
  white-space: nowrap;
}

.demographic-context {
  display: grid;
  gap: 16px;
}

.leclerc-evidence {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  gap: 20px;
  align-items: stretch;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.leclerc-evidence-copy {
  display: grid;
  gap: 8px;
  align-content: start;
}

.leclerc-evidence-copy h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.leclerc-evidence-copy p,
.leclerc-evidence-copy small {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.5;
}

.leclerc-evidence-bars {
  min-width: 0;
}

.demographic-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.demographic-grid section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255,255,255,0.74);
}

.demographic-grid h4 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 0.9rem;
}

.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.consent-check input {
  margin-top: 3px;
}

@media (max-width: 860px) {
  .prototype-gate,
  .case-governance-notice {
    grid-template-columns: 1fr;
  }

  .case-governance-notice {
    display: grid;
    align-items: start;
  }

  .leclerc-evidence {
    grid-template-columns: 1fr;
  }
}