*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* The HTML `hidden` attribute must beat author display rules. */
[hidden] { display: none !important; }

/* Map background: real USGS topo from the AZ Tuckayou Spring quad (vicinity of
   Camp Urga). Revealed only after the gatekeeper accepts the passphrase. */
body.stage-map::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    /* Parchment tint overlay. Dropped 0.62 → 0.50 → 0.32 → 0.18 → 0.10 —
       R2 wants the topo near-fully present on the map page. */
    linear-gradient(rgba(245,239,224,0.10), rgba(245,239,224,0.10)),
    url("dojo-bg.jpg?v=1");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

body.stage-map > * {
  position: relative;
  z-index: 1;
}

/* Deeper stage: drops the parchment overlay so the topo terrain reads
   more prominently. Used on the diagnostic and reveal pages — the seeker
   has moved further in and the ground itself becomes more present. */
body.stage-map.stage-deeper::before {
  background-image:
    linear-gradient(rgba(245,239,224,0.06), rgba(245,239,224,0.06)),
    url("dojo-bg.jpg?v=1");
}

:root {
  /* Coherent Dojo — parchment palette (aged paper, choose-your-own-adventure book) */
  --bg: #F5EFE0;
  --surface: #FBF7EB;
  --border: #D9CDB1;
  --text: #2C2418;
  --text-muted: #7A6F58;
  --user-bg: #E8DEC4;
  --user-text: #2C2418;
  --ce-bg: #FBF7EB;
  --ce-text: #2C2418;
  --accent: #D14037;
  --accent-hover: #B73430;
  --error-bg: #F3DCD0;
  --error-text: #8C2A1F;
  --gate-bg: #EAE0CB;
  --gate-text: #2C2418;
  --gate-border: #C8B991;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 760px;
  margin: 0 auto;
}

/* Header */
header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.wordmark {
  font-family: var(--font-sans);
  font-size: 24px;
  letter-spacing: 0.03em;
  color: var(--text);
  font-weight: 500;
}

.kanji {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: 16px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-right: 4px;
}

.header-copy {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  font-weight: 300;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  margin-left: 2px;
  position: relative;
  top: -1px;
}

.status-dot.offline {
  background: var(--error-text);
}

.clear-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 4px 8px;
  text-transform: uppercase;
  transition: color 0.15s;
}

.clear-btn:hover {
  color: var(--text);
}

/* Chat area */
#chat {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  scroll-behavior: smooth;
}

#chat::-webkit-scrollbar {
  width: 4px;
}

#chat::-webkit-scrollbar-track {
  background: transparent;
}

#chat::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* Empty state */
.empty-state {
  margin: auto;
  text-align: center;
  user-select: none;
}

.empty-title {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.empty-subtitle {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* Message rows */
.msg-row {
  display: flex;
  margin-bottom: 6px;
  animation: fadeIn 0.18s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg-row.user {
  justify-content: flex-end;
}

.msg-row.ce {
  justify-content: flex-start;
}

/* Sender label */
.msg-label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.msg-row.user .msg-label {
  text-align: right;
}

.msg-wrapper {
  max-width: 78%;
  display: flex;
  flex-direction: column;
}

.msg-row.user .msg-wrapper {
  align-items: flex-end;
}

/* Bubble */
.bubble {
  padding: 10px 14px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.msg-row.user .bubble {
  background: var(--user-bg);
  color: var(--user-text);
  border: 1px solid #F4D9D9;
}

.msg-row.ce .bubble {
  background: var(--ce-bg);
  color: var(--ce-text);
  border: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
}

/* Markdown rendered content */
.msg-row.ce .bubble p { margin: 0 0 0.75em; }
.msg-row.ce .bubble p:last-child { margin-bottom: 0; }
.msg-row.ce .bubble h1,
.msg-row.ce .bubble h2,
.msg-row.ce .bubble h3 {
  font-weight: 500;
  margin: 1em 0 0.4em;
  color: var(--text);
  font-size: 1em;
  letter-spacing: 0.02em;
}
.msg-row.ce .bubble h1:first-child,
.msg-row.ce .bubble h2:first-child,
.msg-row.ce .bubble h3:first-child { margin-top: 0; }
.msg-row.ce .bubble ul,
.msg-row.ce .bubble ol {
  padding-left: 1.4em;
  margin: 0 0 0.75em;
}
.msg-row.ce .bubble li { margin-bottom: 0; }
.msg-row.ce .bubble li p { margin: 0; }
.msg-row.ce .bubble code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: #F5F0E8;
  border: 1px solid #E5DED2;
  border-radius: 2px;
  padding: 0.1em 0.35em;
  color: #6B4226;
}
.msg-row.ce .bubble pre {
  background: #FBF8F2;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0.5em 0;
}
.msg-row.ce .bubble pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #4A3A26;
}
.msg-row.ce .bubble strong { font-weight: 500; color: var(--text); }
.msg-row.ce .bubble em { font-style: italic; opacity: 0.85; }
.msg-row.ce .bubble a { color: var(--accent); text-decoration: none; }
.msg-row.ce .bubble a:hover { text-decoration: underline; }
.msg-row.ce .bubble hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.75em 0;
}
.msg-row.ce .bubble blockquote {
  border-left: 2px solid var(--border);
  padding-left: 12px;
  color: var(--text-muted);
  margin: 0.5em 0;
}

.msg-row.error .bubble {
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid #F0CECE;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Welcome and gate states */
.welcome-state,
.gate-state {
  margin: auto;
  text-align: center;
  user-select: none;
  max-width: 460px;
  padding: 0 24px;
}

.welcome-title {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin-bottom: 12px;
}

.welcome-subtitle {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 24px;
}

.welcome-hint {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  font-style: italic;
}

.gate-state {
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 6px;
  padding: 28px 32px;
}

.gate-hero {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gate-border);
}

.gate-hero-title {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 300;
  color: var(--gate-text);
  margin-bottom: 12px;
  letter-spacing: 0.03em;
}

.gate-hero-tagline {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--gate-text);
  line-height: 1.55;
  margin-bottom: 14px;
  font-style: italic;
  opacity: 0.92;
}

.gate-hero-body {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--gate-text);
  line-height: 1.65;
  opacity: 0.85;
}

.gate-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 300;
  color: var(--gate-text);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.gate-body {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--gate-text);
  line-height: 1.6;
  margin-bottom: 14px;
}

.gate-email {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.gate-email:hover {
  text-decoration: underline;
}

/* ----- Threshold (the arrival page) ----- */
.threshold-state {
  margin: auto;
  text-align: center;
  user-select: none;
  max-width: 520px;
  padding: 56px 32px 64px;
  animation: fadeIn 0.5s ease;
}

.threshold-title {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-bottom: 24px;
}

.threshold-body {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 12px;
}

.threshold-body.subtle {
  color: var(--text-muted);
  font-size: 15px;
  margin-top: 28px;
  margin-bottom: 20px;
}

.knock-btn {
  background: var(--accent);
  color: #FFF;
  border: none;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 36px;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 6px 14px rgba(209,64,55,0.12);
}

.knock-btn:hover {
  background: var(--accent-hover);
}

.knock-btn:active {
  transform: translateY(1px);
}

/* ----- Passphrase gate (after knock) ----- */
.passphrase-state {
  margin: auto;
  text-align: center;
  user-select: none;
  max-width: 460px;
  padding: 56px 24px 64px;
  animation: fadeIn 0.4s ease;
}

.passphrase-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.passphrase-body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 24px;
  font-style: italic;
}

.passphrase-input-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
  margin-bottom: 14px;
}

.passphrase-input {
  flex: 1;
  max-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 12px 14px;
  outline: none;
  text-align: center;
  letter-spacing: 0.04em;
  transition: border-color 0.18s;
}

.passphrase-input:focus {
  border-color: var(--accent);
}

.passphrase-error {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--error-text);
  min-height: 18px;
  font-style: italic;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.passphrase-input.shake {
  animation: shake 0.4s ease;
  border-color: var(--error-text);
}

/* ----- Voice screens (Welcome · Setting · Map) -----
   Three voice-first parchment beats before assessment. Shared styling via
   .voice-state; modifiers (.is-welcome / .is-setting / .is-map) reserved
   for per-beat tweaks but not currently used. Sits on the stage-deeper
   overlay so the parchment terrain is present without distracting.
   The .voice-bridge block holds the Wayne Dyer contemplation line — used
   on the Map beat as the bridge into the assessment. */
.voice-state {
  margin: auto;
  max-width: 640px;
  width: 100%;
  padding: 56px 28px 64px;
  text-align: left;
  position: relative;
  animation: fadeIn 0.6s ease;
}

.voice-body {
  background: rgba(255, 244, 200, 0.88);
  border: 1px solid rgba(180, 140, 60, 0.35);
  border-radius: 6px;
  padding: 28px 32px;
  box-shadow: 0 1px 0 rgba(139, 122, 85, 0.10), 0 8px 22px rgba(44, 36, 24, 0.08);
}

.voice-body p {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.75;
  margin: 0 0 20px 0;
}

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

.voice-body p:first-child {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 28px;
}

.voice-body em {
  font-style: italic;
  color: var(--text);
}

.voice-body strong {
  font-weight: 500;
}

.voice-bridge {
  margin: 36px auto 32px;
  max-width: 520px;
  padding: 24px 28px;
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 1px 0 rgba(139,122,85,0.08), 0 6px 14px rgba(44,36,24,0.05);
}

.voice-quote {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 10px;
}

.voice-attrib {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.voice-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .voice-state {
    padding: 56px 18px 48px;
  }
  .voice-body p {
    font-size: 16px;
    line-height: 1.7;
  }
  .voice-body p:first-child {
    font-size: 20px;
  }
  .voice-bridge {
    padding: 20px 22px;
  }
}

/* ----- Nav back button -----
   Persistent quiet affordance to re-walk the prior step. Sits top-left of
   the active screen. Visible across all post-entry surfaces (voice beats,
   diagnostic, reveal, class menu, lesson, quiz, completion). Threshold,
   gate, and passphrase deliberately omit it — they're auth, not flow. */
.nav-back {
  position: absolute;
  top: 14px;
  left: 14px;
  background: transparent;
  border: 1px solid var(--gate-border);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  padding: 6px 10px;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  z-index: 5;
}

.nav-back:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--gate-bg);
}

.nav-back:active {
  transform: translateY(1px);
}

/* Position relative on every state container so .nav-back can absolute-position
   from the top-left of the screen rather than the viewport. */
.diagnostic-state,
.reveal-state,
.yellow-door-state,
.class-menu-state,
.lesson-state,
.quiz-state,
.quiz-complete-state {
  position: relative;
}

@media (max-width: 600px) {
  .nav-back {
    top: 10px;
    left: 10px;
    font-size: 10px;
    padding: 5px 8px;
  }
}

/* ----- Map (the placeholder dojo map) ----- */
.map-state {
  margin: auto;
  max-width: 740px;
  width: 100%;
  padding: 28px 20px 32px;
  position: relative;
  animation: fadeIn 0.5s ease;
  /* The topographic dojo-mountain background lives on body.stage-map. */
}

.map-header {
  text-align: center;
  margin-bottom: 36px;
}

.map-title {
  font-family: var(--font-sans);
  font-size: 88px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.0;
  /* Right padding keeps the centered title clear of the absolute compass rose. */
  padding-right: 80px;
}

.map-subtitle {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
  font-style: italic;
}

.compass-rose {
  position: absolute;
  top: 24px;
  right: 22px;
  width: 64px;
  height: 76px;
  /* Black instead of warm gray — R2 wants more weight on the compass. */
  color: var(--text);
  opacity: 1;
  cursor: help;
}

.compass-rose svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.map-paths {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.map-path {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px 20px 20px;
  text-align: center;
  position: relative;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 1px 0 rgba(139,122,85,0.08), 0 6px 14px rgba(44,36,24,0.04);
}

.map-path:hover,
.map-path:active {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(139,122,85,0.10), 0 10px 22px rgba(44,36,24,0.08);
}

.path-glyph {
  font-size: 36px;
  margin-bottom: 10px;
  filter: grayscale(0.2);
  line-height: 1;
}

.path-name {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.path-hint {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
  font-style: italic;
}

.path-status {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  opacity: 0.65;
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 2px;
  background: rgba(255,255,255,0.4);
}

.map-footer {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
  line-height: 1.6;
  padding: 0 16px;
}

.map-footer em {
  font-style: italic;
  color: var(--text);
}

@media (max-width: 600px) {
  .compass-rose {
    top: 12px;
    right: 12px;
    width: 50px;
    height: 60px;
  }
  .map-state {
    padding: 70px 14px 28px;
    max-width: 100%;
  }
  .threshold-state {
    padding: 40px 20px 48px;
  }
  .threshold-title {
    font-size: 24px;
  }
  .map-title {
    font-size: 60px;
    padding-right: 56px;
    line-height: 1.0;
  }
}

/* ----- Diagnostic (one scene, four chairs) ----- */
.diagnostic-state {
  margin: auto;
  max-width: 520px;
  width: 100%;
  padding: 48px 24px 56px;
  text-align: center;
  user-select: none;
  animation: fadeIn 0.5s ease;
}

.diagnostic-scene {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.7;
  margin: 0 auto 32px;
  max-width: 460px;
  /* Warmer parchment so the question reads distinct from the option cards
     (which sit on the lighter --surface cream). */
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 6px;
  padding: 22px 26px;
  text-align: left;
  box-shadow: 0 1px 0 rgba(139,122,85,0.08), 0 6px 14px rgba(44,36,24,0.05);
}

.diagnostic-scene em {
  color: var(--text);
  font-style: italic;
}

.diagnostic-chairs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.chair {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--text);
  transition: border-color 0.18s, transform 0.12s, box-shadow 0.18s, background 0.18s;
  box-shadow: 0 1px 0 rgba(139,122,85,0.06);
}

.chair:hover,
.chair:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
  background: #FDF9EE;
  box-shadow: 0 1px 0 rgba(139,122,85,0.10), 0 8px 18px rgba(44,36,24,0.06);
  outline: none;
}

.chair:active {
  transform: translateY(0);
}

.chair-label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}

.chair-hint {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
}

.diagnostic-footer {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ----- Reveal (all four houses, assigned highlighted) ----- */
.reveal-state {
  margin: auto;
  max-width: 580px;
  width: 100%;
  padding: 36px 20px 48px;
  user-select: none;
  animation: fadeIn 0.5s ease;
}

.reveal-header {
  text-align: center;
  margin-bottom: 14px;
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 6px;
  padding: 18px 22px;
}

.reveal-header-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.reveal-header-name {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.reveal-header-name strong {
  font-weight: 500;
}

.reveal-openness {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
}

.reveal-openness strong {
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.reveal-prompt {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.6;
  text-align: center;
  margin: 0 auto 24px;
  max-width: 480px;
}

.house-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

/* House-reveal quadrant: 2x2 grid with axis labels (independent ↔
   relational horizontally; extrovert ↔ introvert vertically). The
   diagnostic axes are the same axes the houses were assigned on, so
   the grid is the reveal ~ the student sees their placement at a
   glance. Per S077 R2 lock; "Independent ↔ Relational" pairs equal
   weight without political baggage. */
.house-quadrant {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  grid-template-areas:
    ".         ax-l    ax-r"
    "ax-top    tl      tr"
    "ax-bot    bl      br";
  gap: 10px 14px;
  margin-bottom: 28px;
  align-items: stretch;
}

.house-axis-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  user-select: none;
}
.house-axis-x-left  { grid-area: ax-l; text-align: center; padding-bottom: 2px; }
.house-axis-x-right { grid-area: ax-r; text-align: center; padding-bottom: 2px; }
.house-axis-y-top   { grid-area: ax-top; align-self: center; text-align: right; padding-right: 6px; }
.house-axis-y-bot   { grid-area: ax-bot; align-self: center; text-align: right; padding-right: 6px; }

.house-cell-tl { grid-area: tl; }
.house-cell-tr { grid-area: tr; }
.house-cell-bl { grid-area: bl; }
.house-cell-br { grid-area: br; }

/* Quadrant-cell variant of the existing house-card. Stacks vertically
   (glyph+name on top, description below) so the cell renders as a
   readable square rather than a wide row. */
.house-card-quad {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 14px;
}
.house-card-quad-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.house-card-quad .house-card-glyph {
  font-size: 22px;
  padding-top: 0;
}
.house-card-quad .house-card-name {
  font-size: 16px;
  margin-bottom: 0;
}
.house-card-quad .house-card-desc {
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .house-quadrant {
    gap: 8px 8px;
    grid-template-columns: auto 1fr 1fr;
  }
  .house-axis-label { font-size: 10px; letter-spacing: 0.12em; }
  .house-card-quad { padding: 12px; }
  .house-card-quad .house-card-desc { font-size: 12.5px; }
}

.house-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--text);
  transition: border-color 0.18s, background 0.18s, transform 0.12s, box-shadow 0.18s;
  box-shadow: 0 1px 0 rgba(139,122,85,0.06);
  /* Subtle de-emphasis on unselected so the chosen one reads first. */
  opacity: 0.78;
}

.house-card:hover,
.house-card:focus-visible {
  opacity: 1;
  border-color: var(--accent);
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 1px 0 rgba(139,122,85,0.10), 0 8px 18px rgba(44,36,24,0.06);
}

.house-card.is-selected {
  opacity: 1;
  background: var(--gate-bg);
  border: 2px solid var(--text);
  /* offset the extra border so layout doesn't shift */
  padding: 15px 17px;
  box-shadow: 0 1px 0 rgba(139,122,85,0.14), 0 10px 22px rgba(44,36,24,0.10);
}

.house-card-glyph {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}

.house-card-body {
  flex: 1;
}

.house-card-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  color: var(--text);
}

.house-card-mark {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(209, 64, 55, 0.08);
  border: 1px solid rgba(209, 64, 55, 0.30);
  border-radius: 3px;
  padding: 2px 8px;
  margin-left: 8px;
  font-weight: 500;
  vertical-align: 2px;
}

.house-card-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.55;
}

.reveal-cta-row {
  text-align: center;
}

@media (max-width: 600px) {
  .reveal-state {
    padding: 24px 14px 40px;
  }
  .reveal-header-name {
    font-size: 19px;
  }
  .house-card {
    padding: 14px 16px;
    gap: 14px;
  }
  .house-card.is-selected {
    padding: 13px 15px;
  }
  .house-card-glyph {
    font-size: 28px;
  }
  .house-card-name {
    font-size: 15px;
  }
  .house-card-desc {
    font-size: 13px;
  }
}

/* ----- Yellow Door (transition between reveal and lesson) ----- */
.yellow-door-state {
  margin: auto;
  max-width: 460px;
  width: 100%;
  padding: 56px 24px 64px;
  text-align: center;
  user-select: none;
  animation: fadeIn 0.6s ease;
}

.yellow-door-house-line {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
}

/* Belt glyph — CSS square so the shape is deterministic across renderers
   (the 🟨 emoji can fall back to a circle on some systems).
   Houses use circle emojis (🔴🟢🔵🟡); belts use these CSS squares. */
.belt-glyph {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  margin: 0 auto 22px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.10);
}

.belt-glyph-yellow {
  background: #E5B30E;
  border: 2px solid #B8900B;
}

/* Legacy emoji-based glyph (no longer used for Yellow Belt; kept so
   any future caller falling back to .yellow-door-glyph still renders). */
.yellow-door-glyph {
  font-size: 56px;
  margin-bottom: 18px;
  line-height: 1;
}

.yellow-door-title {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.02em;
  margin-bottom: 22px;
}

.yellow-door-body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.yellow-door-body strong {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--text);
}

.yellow-door-meta {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ----- Lesson (101-lexicon: list view with clickable words) ----- */
.lesson-state {
  margin: auto;
  max-width: 540px;
  width: 100%;
  padding: 40px 20px 56px;
  animation: fadeIn 0.5s ease;
}

.lesson-greeting {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 16px;
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 6px;
  padding: 18px 22px;
  text-align: center;
}

.lesson-intro {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.7;
  margin: 0 auto 24px;
  max-width: 460px;
  text-align: center;
}

.lesson-intro strong {
  font-weight: 500;
}

.lesson-words {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(139,122,85,0.08), 0 6px 14px rgba(44,36,24,0.05);
}

.lesson-words li {
  border-bottom: 1px solid var(--border);
}
.lesson-words li:last-child {
  border-bottom: none;
}

.lex-word {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 14px 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  line-height: 1.5;
  transition: background 0.15s, padding-left 0.15s;
}

.lex-word:hover,
.lex-word:focus-visible {
  background: #FDF9EE;
  padding-left: 26px;
  outline: none;
}

.lex-word-name {
  font-weight: 600;
  color: var(--text);
}

.lex-word-hint {
  font-weight: 400;
  color: var(--text);
  font-style: italic;
  opacity: 0.85;
}

.lesson-cta-row {
  text-align: center;
  margin-top: 8px;
}

.lesson-cta-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 10px;
}

/* ----- Lexicon modal (overlay over the lesson) ----- */
.lexicon-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  /* Push card high on the viewport, not vertically centered. */
  align-items: flex-start;
  justify-content: center;
  padding-top: 6vh;
  animation: fadeIn 0.18s ease;
}

.lexicon-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 8, 0.55);
  cursor: pointer;
}

.lexicon-modal-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 520px;
  width: calc(100% - 40px);
  max-height: 80vh;
  overflow-y: auto;
  padding: 48px 32px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 1px 0 rgba(139,122,85,0.10);
}

.lexicon-modal-back {
  position: absolute;
  top: 14px;
  left: 14px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: lowercase;
  padding: 6px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lexicon-modal-back:hover,
.lexicon-modal-back:focus-visible {
  color: var(--text);
  border-color: var(--accent);
  background: #FDF9EE;
  outline: none;
}

.lexicon-modal-name {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  line-height: 1.2;
}

.lexicon-modal-draft {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 3px;
  padding: 3px 8px;
  margin-bottom: 14px;
}

.lexicon-modal-def {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 22px;
}

.lexicon-modal-def strong { font-weight: 500; }
.lexicon-modal-def em { font-style: italic; opacity: 0.88; }
.lexicon-modal-def code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: #F5F0E8;
  border: 1px solid #E5DED2;
  border-radius: 2px;
  padding: 0.1em 0.35em;
  color: #6B4226;
}

.lexicon-modal-example {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.65;
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.lexicon-modal-example-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-style: normal;
  margin-right: 8px;
  vertical-align: 1px;
}

@media (max-width: 600px) {
  .lesson-state {
    padding: 28px 14px 40px;
  }
  .lesson-greeting {
    font-size: 16px;
    padding: 16px 18px;
  }
  .lex-word {
    padding: 14px 16px;
    font-size: 14px;
  }
  .lex-word:hover,
  .lex-word:focus-visible {
    padding-left: 22px;
  }
  .lexicon-modal-card {
    padding: 44px 22px 26px;
  }
  .lexicon-modal-name {
    font-size: 24px;
  }
}

/* ----- Quiz (5 questions, no failure mode) ----- */
.quiz-state {
  margin: auto;
  max-width: 520px;
  width: 100%;
  padding: 36px 20px 48px;
  animation: fadeIn 0.4s ease;
  text-align: center;
}

.quiz-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}

.quiz-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: 1px solid var(--text-muted);
  transition: background 0.15s;
}

.quiz-dot.is-done {
  background: var(--text);
  border-color: var(--text);
}

.quiz-dot.is-current {
  background: var(--accent);
  border-color: var(--accent);
}

.quiz-progress-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  margin-left: 6px;
}

.quiz-prompt {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 28px;
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 6px;
  padding: 22px 26px;
}

.quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.quiz-choice {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.5;
  transition: border-color 0.18s, background 0.18s, transform 0.12s, box-shadow 0.18s;
  box-shadow: 0 1px 0 rgba(139,122,85,0.06);
}

.quiz-choice:hover,
.quiz-choice:focus-visible {
  border-color: var(--accent);
  background: #FDF9EE;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(139,122,85,0.10), 0 8px 18px rgba(44,36,24,0.06);
  outline: none;
}

.quiz-footer {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}

/* Reveal phase (after a choice is made) */
.quiz-mark {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.quiz-mark.right {
  color: #2C7A2C;
}

.quiz-mark.gentle {
  color: var(--text);
}

.quiz-mark.gentle strong {
  color: var(--accent);
  font-weight: 700;
}

.quiz-reveal-text {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.65;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px 22px;
  margin-bottom: 28px;
  text-align: left;
}

.quiz-reveal-text strong {
  font-weight: 600;
}

.quiz-cta-row {
  text-align: center;
}

/* ----- Quiz completion ----- */
.quiz-complete-state {
  margin: auto;
  max-width: 480px;
  width: 100%;
  padding: 48px 20px 64px;
  text-align: center;
  animation: fadeIn 0.6s ease;
}

.quiz-complete-house {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.quiz-complete-title {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
  line-height: 1.25;
}

.quiz-complete-body {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 32px;
}

.quiz-complete-score {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 600px) {
  .quiz-state {
    padding: 28px 14px 40px;
  }
  .quiz-prompt {
    font-size: 18px;
    padding: 18px 20px;
  }
  .quiz-choice {
    font-size: 14px;
    padding: 14px 16px;
  }
  .quiz-complete-title {
    font-size: 24px;
  }
}

/* ----- Class menu (3×3 grid of Yellow Belt classes) ----- */
.class-menu-state {
  margin: auto;
  max-width: 720px;
  width: 100%;
  padding: 32px 20px 48px;
  animation: fadeIn 0.5s ease;
}

.class-menu-header {
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 6px;
  padding: 18px 22px 22px;
  text-align: center;
  margin-bottom: 22px;
}

.class-menu-house-line {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.class-menu-title {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  line-height: 1.25;
}

.class-menu-prompt {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
}

.class-menu-prompt strong {
  font-weight: 600;
}

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

.class-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 14px 38px;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s, transform 0.12s, box-shadow 0.18s, opacity 0.18s;
  box-shadow: 0 1px 0 rgba(139,122,85,0.06);
  min-height: 140px;
  display: flex;
  flex-direction: column;
}

.class-card.is-active {
  border-color: #B8900B;
  border-width: 2px;
  padding: 15px 13px 37px;
  background: #FBF4D8;
  box-shadow: 0 1px 0 rgba(139,122,85,0.12), 0 8px 18px rgba(184,144,11,0.18);
}

.class-card.is-active:hover,
.class-card.is-active:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(139,122,85,0.14), 0 12px 26px rgba(184,144,11,0.25);
  outline: none;
}

.class-card.is-locked {
  opacity: 0.6;
  cursor: pointer;
}

.class-card.is-locked:hover,
.class-card.is-locked:focus-visible {
  opacity: 0.8;
  outline: none;
}

.class-card-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 8px;
}

.class-card-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin-bottom: 4px;
}

.class-card-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  font-style: italic;
  line-height: 1.4;
  flex: 1;
}

.class-card-tag {
  position: absolute;
  bottom: 12px;
  left: 14px;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 500;
}

.tag-gateway {
  color: #6B4D08;
  background: rgba(184, 144, 11, 0.18);
  border: 1px solid rgba(184, 144, 11, 0.40);
}

.tag-locked {
  color: var(--text-muted);
  background: rgba(122, 111, 88, 0.10);
  border: 1px solid rgba(122, 111, 88, 0.25);
}

/* "open" ~ class is active and available to begin (not gateway, not locked).
   Green to read as available without psychology-of-enrollment baggage. */
.tag-open {
  color: #2F6B3A;
  background: rgba(63, 142, 76, 0.16);
  border: 1px solid rgba(63, 142, 76, 0.40);
}

/* "certified" ~ student has a chain block for this class. Gold register
   mirroring the certificate aesthetic. Replaces "begin here" / "open"
   after `updateClassMenuStatesFromCreds` lands. */
.tag-certified {
  color: #6B4D08;
  background: rgba(184, 144, 11, 0.22);
  border: 1px solid rgba(184, 144, 11, 0.55);
  font-weight: 500;
}

/* Action row inside the certified-class modal (view cert + re-walk). */
.certified-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  justify-content: center;
}
.certified-modal-actions .knock-btn {
  text-decoration: none;
  text-align: center;
}

/* "pending" ~ a mint candidate exists but no chain block yet (R2B3
   approval gate). Soft blue so it reads as in-flight without urgency. */
.tag-pending {
  color: #335a7d;
  background: rgba(70, 120, 170, 0.14);
  border: 1px solid rgba(70, 120, 170, 0.40);
}

@media (max-width: 700px) {
  .class-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .class-card {
    min-height: 120px;
    padding: 14px 12px 36px;
  }
  .class-card.is-active {
    padding: 13px 11px 35px;
  }
  .class-card-name {
    font-size: 15px;
  }
  .class-menu-title {
    font-size: 20px;
  }
}

/* House badge on the map subtitle when house is assigned */
.house-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 8px;
  margin-left: 6px;
  font-style: normal;
  vertical-align: 1px;
}

@media (max-width: 600px) {
  .diagnostic-state {
    padding: 32px 16px 40px;
  }
  .diagnostic-scene {
    font-size: 16px;
  }
  .reveal-state {
    padding: 48px 16px 56px;
  }
  .reveal-title {
    font-size: 22px;
  }
  .reveal-glyph {
    font-size: 48px;
  }
}

/* Thinking indicator */
.thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--ce-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.thinking-dots {
  display: flex;
  gap: 3px;
}

.thinking-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: blink 1.2s infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%, 80%, 100% { opacity: 0.2; }
  40% { opacity: 1; }
}

/* Input area */
footer {
  border-top: 1px solid var(--border);
  padding: 16px 24px 20px;
  flex-shrink: 0;
}

.input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

#input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  resize: none;
  outline: none;
  min-height: 42px;
  max-height: 160px;
  transition: border-color 0.15s;
}

#input::placeholder {
  color: var(--text-muted);
}

#input:focus {
  border-color: var(--accent);
}

#input:disabled {
  opacity: 0.5;
}

#send {
  background: var(--accent);
  border: none;
  border-radius: 3px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 18px;
  height: 42px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}

#send:hover:not(:disabled) {
  background: var(--accent-hover);
}

#send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.footer-copy {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.02em;
  font-weight: 400;
  opacity: 0.7;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
}

.footer-left,
.footer-right {
  flex: 0 0 auto;
}

.footer-sep {
  margin: 0 0.4em;
  opacity: 0.45;
  user-select: none;
}

.footer-center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.footer-build {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  opacity: 0.7;
}

.page-indicator {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--text);
  opacity: 0.55;
  text-transform: lowercase;
  font-variant-numeric: tabular-nums;
}

.header-center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-btn {
  background: transparent;
  border: 1px solid var(--gate-border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}

.header-btn:hover {
  background: var(--gate-bg);
  border-color: var(--text-muted);
}

.header-btn:active {
  transform: translateY(1px);
}

.threshold-load-row {
  margin-top: 36px;
}

.threshold-load {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
  padding-bottom: 1px;
}

.threshold-load:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

.footer-feedback {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
  text-transform: lowercase;
  border-bottom: 1px dotted var(--text);
  padding-bottom: 1px;
  opacity: 0.9;
  transition: opacity 0.18s;
}

.footer-feedback:hover {
  opacity: 1;
}

@media (max-width: 600px) {
  .footer-row {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .footer-center {
    order: 1;
  }
  .footer-left, .footer-right {
    order: 2;
  }
}

/* Responsive */
@media (max-width: 600px) {
  #chat { padding: 16px; }
  footer { padding: 12px 16px 16px; }
  header { padding: 16px; }
  .msg-wrapper { max-width: 90%; }
}

/* ----- Awareness Assessment (v0.1.0) -----
   29-item three-section assessment. Section A/B/C each render as one
   screen with all items vertical + 1–5 scale buttons per item, progress
   count, continue CTA. */
.awareness-state {
  margin: auto;
  max-width: 720px;
  width: 100%;
  padding: 56px 24px 64px;
  position: relative;
  animation: fadeIn 0.5s ease;
}

.awareness-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.awareness-section-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.01em;
}

.awareness-section-title em {
  font-style: italic;
  color: var(--text);
}

.awareness-section-progress {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text);
  padding: 6px 12px;
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 4px;
}

.awareness-scale-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 14px 16px;
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 6px;
  margin-bottom: 12px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 300;
  color: var(--text);
}

.scale-anchor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.anchor-num {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  font-weight: 500;
  color: var(--text);
}

.awareness-section-note {
  font-family: var(--font-sans);
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 22px;
  padding: 0 4px;
  line-height: 1.5;
}

.awareness-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.awareness-item {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.18s, background 0.18s;
}

.awareness-item-text {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 10px;
}

.awareness-item-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-right: 6px;
}

.awareness-item-scale {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.scale-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 64px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.10s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  text-align: center;
}

.scale-btn-num {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.scale-btn-label {
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

.scale-btn:hover {
  border-color: var(--text-muted);
  background: var(--gate-bg);
}

.scale-btn:active {
  transform: translateY(1px);
}

.scale-btn.is-selected {
  background: var(--accent);
  color: #FFF;
  border-color: var(--accent);
}

.scale-btn.is-selected .scale-btn-label {
  color: rgba(255, 255, 255, 0.92);
}

.awareness-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.awareness-continue:disabled,
.tech-continue:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.awareness-continue.is-ready,
.tech-continue.is-ready {
  /* Active state — inherits from .knock-btn */
}

@media (max-width: 600px) {
  .awareness-state {
    padding: 48px 14px 56px;
  }
  .awareness-section-title {
    font-size: 17px;
  }
  .awareness-item-text {
    font-size: 14px;
  }
  .scale-btn {
    min-height: 60px;
  }
  .scale-btn-num {
    font-size: 15px;
  }
  .scale-btn-label {
    font-size: 9.5px;
  }
  .awareness-section-progress {
    font-size: 13px;
  }
}

/* ----- Tech Competency landscape (Yellow Belt) -----
   9 × 3 grid: nine classes × three levels (Low / Medium / High). */
.tech-state {
  margin: auto;
  max-width: 680px;
  width: 100%;
  padding: 56px 24px 64px;
  position: relative;
  animation: fadeIn 0.5s ease;
}

.tech-header {
  margin-bottom: 22px;
}

.tech-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}

.tech-prompt {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.55;
}

.tech-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}

.tech-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.tech-row-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.tech-row-label {
  flex: 1 1 auto;
  min-width: 0;
}

.tech-row-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  min-width: 200px;
}

.tech-row-name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

.tech-row-subtitle {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.4;
  margin-top: 2px;
  opacity: 0.85;
}

.tech-row-anchors {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.45;
  opacity: 0.85;
}

.tech-anchor-low,
.tech-anchor-high {
  display: block;
}

.tech-row-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.5;
  padding-top: 2px;
  border-top: 1px dashed var(--gate-border);
  padding-top: 10px;
}

.tech-preview-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px;
}

.tech-preview-term {
  display: inline-block;
  padding: 2px 8px;
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 10px;
  color: var(--text);
  font-weight: 400;
  font-size: 11px;
}

.tech-row-anchors strong {
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.tech-row-cells {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.tech-cell {
  min-width: 64px;
  min-height: 38px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.10s;
}

.tech-cell:hover {
  border-color: var(--text-muted);
  background: var(--gate-bg);
}

.tech-cell:active {
  transform: translateY(1px);
}

.tech-cell.is-selected {
  background: var(--accent);
  color: #FFF;
  border-color: var(--accent);
}

.tech-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .tech-state {
    padding: 48px 14px 56px;
  }
  .tech-row-top {
    flex-direction: column;
    gap: 10px;
  }
  .tech-row-right {
    min-width: 0;
  }
  .tech-row-cells {
    justify-content: stretch;
  }
  .tech-cell {
    flex: 1 1 auto;
    min-width: 0;
  }
  .tech-title {
    font-size: 19px;
  }
}

/* ----- 101-Lexicon lesson groupings -----
   The 29 lexicon words shown grouped by theme (The AI moment, The risks,
   What we offer instead, The landscape, The card, The foundations,
   The Echoes, The dojo). Each word is clickable to open a modal with
   the canonical definition. */
.lesson-groups {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 28px;
}

.lesson-group-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gate-border);
}

.lesson-groups .lesson-words {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ----- 101-Lexicon self-assessment quiz -----
   29-row Low/Medium/High self-assessment grouped by theme. Replaces the
   prior 5-question multiple-choice. Parallel structure to the tech
   landscape; result persisted to sessionStorage.dojoLexiconSelfAssessment. */
.lex-quiz-state {
  margin: auto;
  max-width: 720px;
  width: 100%;
  padding: 56px 24px 64px;
  position: relative;
  animation: fadeIn 0.5s ease;
}

.lex-quiz-header {
  margin-bottom: 22px;
}

.lex-quiz-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}

.lex-quiz-prompt {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 14px;
}

.lex-quiz-prompt em {
  font-style: italic;
  color: var(--text);
}

.lex-quiz-progress {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text);
  padding: 6px 12px;
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 4px;
}

.lex-quiz-groups {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 28px;
}

.lex-quiz-group-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gate-border);
}

.lex-quiz-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
}

.lex-quiz-row-label {
  flex: 1 1 auto;
  min-width: 0;
}

.lex-quiz-row-name {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

.lex-quiz-row-hint {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}

.lex-quiz-row-cells {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.lex-quiz-cell {
  min-width: 56px;
  min-height: 34px;
  padding: 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.10s;
}

.lex-quiz-cell:hover {
  border-color: var(--text-muted);
  background: var(--gate-bg);
}

.lex-quiz-cell:active {
  transform: translateY(1px);
}

.lex-quiz-cell.is-selected {
  background: var(--accent);
  color: #FFF;
  border-color: var(--accent);
}

.lex-quiz-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.lex-quiz-continue:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 600px) {
  .lex-quiz-state {
    padding: 48px 14px 56px;
  }
  .lex-quiz-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .lex-quiz-row-cells {
    justify-content: stretch;
  }
  .lex-quiz-cell {
    flex: 1 1 auto;
    min-width: 0;
  }
  .lex-quiz-title {
    font-size: 19px;
  }
  .lex-quiz-progress {
    font-size: 13px;
  }
}

/* ----- Charlie's Readout (the first agentic moment) -----
   Voice-state with an async loaded response from the API. */
.voice-state.is-readout {
  max-width: 680px;
}

.readout-header {
  margin-bottom: 18px;
  text-align: center;
}

.readout-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.01em;
}

.readout-subtitle {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  font-style: italic;
  color: var(--text-muted);
}

.readout-body {
  background: rgba(255, 244, 200, 0.88);
  border: 1px solid rgba(180, 140, 60, 0.35);
  border-radius: 6px;
  padding: 28px 32px;
  box-shadow: 0 1px 0 rgba(139, 122, 85, 0.10), 0 8px 22px rgba(44, 36, 24, 0.08);
  margin-bottom: 22px;
  min-height: 160px;
  display: flex;
  align-items: center;
}

.readout-content {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.7;
  width: 100%;
}

.readout-content p { margin: 0 0 16px 0; }
.readout-content p:last-child { margin-bottom: 0; }
.readout-content strong { font-weight: 500; }
.readout-content em { font-style: italic; }

.readout-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  padding: 32px 0;
  font-family: var(--font-sans);
  color: var(--text);
}

.readout-loading .orienting-text {
  order: -1;
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.04em;
  animation: charlie-breath 2.4s ease-in-out infinite;
}

/* Orienting compass ~ rings stay still, needle rotates.
   Used in chat is-thinking bubble, readout-loading, and CTA button
   pressed state. Single source of styling so the vocabulary is unified. */
.orienting-compass {
  display: inline-block;
  vertical-align: middle;
  color: var(--text);
}

.orienting-compass-needle {
  transform-origin: 50px 50px;
  animation: orienting-needle 2.8s linear infinite;
}

@keyframes orienting-needle {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pressed / orienting state for CTA buttons ~ instant visual feedback
   on click, so the practitioner knows the click was received even
   when the next view takes a beat to render. */
.knock-btn.is-orienting {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
  opacity: 0.85;
  cursor: progress;
}

.knock-btn.is-orienting .orienting-text {
  order: -1;
  font-style: italic;
  letter-spacing: 0.04em;
  animation: charlie-breath 2.4s ease-in-out infinite;
}

.readout-error {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: italic;
  color: var(--error-text);
  line-height: 1.6;
}

/* ----- Foundation Flagstone reveal -----
   v0.1.0 completion screen. Shows compass rose with pulsing Polaris,
   3×3 grid card with student's dot positioned by distance + altitude,
   inner circle for Openness, outer dotted circle for Circle of Influence. */
.flagstone-state {
  margin: auto;
  max-width: 680px;
  width: 100%;
  padding: 56px 24px 64px;
  position: relative;
  text-align: center;
  animation: fadeIn 0.6s ease;
}

.flagstone-header {
  margin-bottom: 14px;
}

.flagstone-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

.flagstone-house {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.flagstone-narration {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  line-height: 1.6;
  margin: 18px auto 22px;
  max-width: 480px;
}

.flagstone-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 12px auto 22px;
  padding: 24px 12px;
  background: rgba(255, 244, 200, 0.88);
  border: 1px solid rgba(180, 140, 60, 0.35);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(139, 122, 85, 0.10), 0 8px 22px rgba(44, 36, 24, 0.08);
}

.flagstone-compass {
  width: 130px;
  height: 170px;
  color: var(--text);
}

.flagstone-card {
  width: 100%;
  max-width: 420px;
  height: auto;
  color: var(--text);
}

@keyframes polaris-pulse {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 0.45; }
}

.flagstone-polaris {
  animation: polaris-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
}

.flagstone-stats {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 18px auto 16px;
}

.flagstone-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 120px;
}

.flagstone-stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.flagstone-stat-value {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  text-transform: capitalize;
  letter-spacing: 0.01em;
}

.flagstone-lexicon-summary {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.5;
  margin: 14px auto 22px;
  max-width: 460px;
}

.flagstone-charlie {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.65;
  margin: 16px auto 24px;
  max-width: 480px;
  padding: 18px 22px;
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 6px;
  text-align: left;
  font-style: italic;
}

.flagstone-charlie p {
  margin: 0;
}

.flagstone-back {
  margin-top: 10px;
}

@media (max-width: 600px) {
  .flagstone-state {
    padding: 48px 14px 56px;
  }
  .flagstone-title {
    font-size: 19px;
  }
  .flagstone-card {
    width: 100%;
  }
  .flagstone-stats {
    gap: 10px;
  }
  .flagstone-stat {
    min-width: 90px;
    padding: 8px 12px;
  }
}

/* ── Legal / Terms-of-Service modal ── */

.legal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(40, 30, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.legal-modal {
  background: var(--surface);
  color: var(--text);
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.legal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.02);
}

.legal-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--text);
}

.legal-close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 10px;
  color: var(--text-muted);
  transition: color 120ms ease;
}

.legal-close:hover {
  color: var(--accent);
}

.legal-body {
  padding: 18px 22px 22px;
  overflow-y: auto;
  font-family: var(--font-sans);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text);
}

.legal-body h2 {
  font-size: 1.02rem;
  margin-top: 18px;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text);
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body p {
  margin: 0 0 10px 0;
}

.legal-body a {
  color: var(--accent);
  text-decoration: underline;
}

.legal-body a:hover {
  color: var(--accent-hover);
}

.legal-body strong {
  color: var(--text);
  font-weight: 600;
}

.legal-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}

.legal-body hr + p {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ── Waitlist CTA on the gate page ── */

.gate-cta-row {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.gate-waitlist-btn {
  text-decoration: none;
  display: inline-block;
}

@media (max-width: 600px) {
  .legal-modal {
    max-height: 92vh;
  }
  .legal-body {
    padding: 14px 16px 18px;
    font-size: 0.92rem;
  }
}

/* "Revisit welcome ~ setting ~ map" link on the class menu, for returning
   students who loaded progress and want to re-walk the opening voice beats. */
.class-menu-revisit {
  margin-top: 10px;
  font-size: 0.82rem;
}
.class-menu-revisit a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: rgba(122, 111, 88, 0.35);
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
.class-menu-revisit a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ── Flagstone CTA row (Ask Charlie + back) ── */

.flagstone-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

.flagstone-ask-charlie {
  background: var(--accent);
  color: var(--surface);
  border-color: var(--accent);
}
.flagstone-ask-charlie:hover {
  filter: brightness(1.08);
}

/* ── Charlie chat (interactive Q&A) ── */

.charlie-chat-state {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 24px 48px;
  display: flex;
  flex-direction: column;
  min-height: 88vh;
  box-sizing: border-box;
}

.charlie-chat-header {
  text-align: center;
  margin-bottom: 18px;
}

.charlie-chat-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.charlie-chat-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

.charlie-chat-transcript {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  background: rgba(0, 0, 0, 0.015);
  margin-bottom: 14px;
  min-height: 480px;
  max-height: 72vh;
}

.charlie-msg {
  display: flex;
  margin-bottom: 12px;
}

.charlie-msg-user {
  justify-content: flex-end;
}

.charlie-msg-assistant {
  justify-content: flex-start;
}

.charlie-msg-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.charlie-msg-user .charlie-msg-bubble {
  background: var(--accent);
  color: var(--surface);
}

.charlie-msg-assistant .charlie-msg-bubble {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.charlie-msg.is-thinking {
  justify-content: center;
}

.charlie-msg.is-thinking .charlie-msg-bubble {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 8px 0;
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  color: var(--text);
  background: transparent;
  border: none;
}

.charlie-msg.is-thinking .orienting-text {
  order: -1;
  animation: charlie-breath 2.4s ease-in-out infinite;
}

@keyframes charlie-breath {
  0%, 100% { opacity: 0.35; letter-spacing: 0.02em; }
  50%      { opacity: 1.0;  letter-spacing: 0.14em; }
}

.charlie-chat-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.charlie-chat-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  resize: vertical;
  min-height: 48px;
}

.charlie-chat-input:focus {
  outline: none;
  border-color: var(--accent);
}

.charlie-chat-send {
  align-self: stretch;
  padding: 0 20px;
}

@media (max-width: 600px) {
  .charlie-chat-state {
    padding: 32px 12px 40px;
  }
  .charlie-msg-bubble {
    max-width: 88%;
    font-size: 14px;
  }
}

/* ── Class menu: Ask Charlie button ── */

.class-menu-ask-charlie-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.class-menu-ask-charlie {
  background: var(--accent);
  color: var(--surface);
  border-color: var(--accent);
  padding: 8px 22px;
  font-size: 0.95rem;
}

.class-menu-ask-charlie:hover {
  filter: brightness(1.08);
}

/* ─── Dashboard (role >= coach) ──────────────────────────────────────────── */

.class-menu-dashboard {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.class-menu-dashboard a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.class-menu-dashboard a:hover {
  opacity: 1;
  text-decoration: none;
}

.dashboard-state {
  background: var(--gate-bg);
  border: 1px solid var(--gate-border);
  border-radius: 6px;
  padding: 28px 32px;
  max-width: 1100px;
  margin: 20px auto;
  font-family: var(--font-sans);
  color: var(--gate-text);
}

.dashboard-header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gate-border);
}

.dashboard-title {
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.dashboard-subtitle {
  font-size: 14px;
  opacity: 0.7;
  font-style: italic;
  margin-bottom: 14px;
}

.dashboard-back {
  font-size: 12px;
  padding: 6px 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.dashboard-loading {
  text-align: center;
  padding: 40px 0;
  opacity: 0.5;
  font-style: italic;
}

.dashboard-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.stat-card {
  flex: 1 1 140px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--gate-border);
  border-radius: 4px;
  padding: 14px 16px;
  text-align: center;
}

.stat-num {
  font-size: 28px;
  font-weight: 300;
  color: var(--accent);
}

.stat-label {
  font-size: 11px;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.dashboard-houses {
  margin-bottom: 18px;
  font-size: 13px;
  opacity: 0.85;
  padding: 8px 0;
}
.dashboard-houses .dim { opacity: 0.4; }

.roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 14px;
}

.roster-table th {
  text-align: left;
  font-weight: 500;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gate-border);
  opacity: 0.7;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.roster-table th[title] {
  cursor: help;
}

.roster-row {
  cursor: pointer;
  transition: background 120ms;
}
.roster-row:hover, .roster-row:focus {
  background: rgba(255,255,255,0.04);
  outline: none;
}

.roster-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}

.col-num { text-align: right; }
.col-last { white-space: nowrap; opacity: 0.85; }
.mono { font-family: var(--font-mono); font-size: 12px; opacity: 0.7; }
.dim { opacity: 0.35; }

.role-tag {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.role-admin { background: rgba(255,180,40,0.18); color: #ffc24d; }
.role-coach { background: rgba(80,170,220,0.18); color: #6ec3e8; }

.dashboard-footer {
  font-size: 11px;
  opacity: 0.5;
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}