@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

/* The demo's chrome mirrors the build_tool's chrome directly: same
   palette, same viewer borders + bracket-glyph corners, same .qc-body
   grid, same per-row legend/controls/note shape, same bracketed button
   look. Each stage section in the demo renders the same UI the tool
   would render at that stage, with the Creole Frost data filled in.
   The reader scrolls vertically through all five stages plus framing
   and closing. */
:root {
  --bg: #000000;
  --bg-elevated: #0a0a0a;
  --phosphor: #00FF41;
  --phosphor-dim: #00aa2a;
  --phosphor-glow: rgba(0, 255, 65, 0.4);
  --warning: #ffd93d;
  --warning-dim: #b89a2a;
  --warning-glow: rgba(255, 217, 61, 0.4);
  --scanline: rgba(0, 255, 65, 0.03);

  --user-input:      #00ddff;
  --user-input-dim:  #0088aa;
  --user-input-glow: rgba(0, 221, 255, 0.4);

  --font-mono: "JetBrains Mono", "Fira Code", "IBM Plex Mono", ui-monospace, monospace;
  --fs-base: 14px;
  --fs-chrome: 11px;
  --fs-title: 18px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

html, body {
  background: var(--bg);
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: 1.6;
  text-shadow: 0 0 1px var(--phosphor-glow);
  overflow-x: hidden;
}

/* Scanlines + vignette match the tool. Body flicker animation is
   intentionally omitted - this page is read, not glanced at. */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, transparent 0, transparent 2px,
    var(--scanline) 2px, var(--scanline) 3px
  );
  z-index: 9000;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  border-radius: 2vmin;
  box-shadow: inset 0 0 12vmin rgba(0,0,0,0.65);
  z-index: 9001;
}

/* ---------- Sticky header (mirrors .app-header in the tool) ---------- */
.app-header {
  position: sticky;
  top: 0;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(4px);
  z-index: 50;
  border-bottom: 1px solid var(--phosphor-dim);
  padding: 12px 28px 0;
}
.app-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  font-size: var(--fs-chrome);
  letter-spacing: 0.1em;
}
.logo { font-size: var(--fs-title); letter-spacing: 0.2em; color: var(--phosphor); }
.meta { color: var(--phosphor-dim); display: flex; align-items: center; gap: 14px; }
.meta-link {
  color: var(--phosphor-dim);
  text-decoration: none;
  letter-spacing: 0.1em;
  font-size: var(--fs-chrome);
}
.meta-link:hover {
  color: var(--phosphor);
  text-shadow: 0 0 4px var(--phosphor);
}

/* Mode toggle (the demo always shows SDD selected; the toggle is
   visual evidence that vibecode mode exists too). */
.mode-toggle {
  display: inline-flex;
  gap: 2px;
  margin-right: 6px;
}
.mode-tab {
  background: none;
  border: none;
  color: var(--phosphor-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-chrome);
  letter-spacing: 0.1em;
  padding: 2px 6px;
}
.mode-tab[aria-selected="true"] {
  color: var(--phosphor);
  text-shadow: 0 0 4px var(--phosphor);
  background: rgba(0, 255, 65, 0.08);
}

/* Stage progress strip (mirrors the tool's .stage-progress). */
.stage-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-chrome);
  letter-spacing: 0.1em;
  padding: 4px 0 8px;
  border-top: 1px solid var(--phosphor-dim);
  overflow-x: auto;
}
.stage-list {
  list-style: none;
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.stage-list a {
  display: inline-block;
  padding: 3px 8px;
  color: var(--phosphor-dim);
  text-decoration: none;
  letter-spacing: 0.1em;
}
.stage-list a:hover {
  color: var(--phosphor);
  text-shadow: 0 0 4px var(--phosphor);
}
.stage-step.is-active a {
  color: var(--phosphor);
  text-shadow: 0 0 4px var(--phosphor);
  background: rgba(0, 255, 65, 0.08);
}
.stage-step.is-past a { color: var(--phosphor-dim); text-decoration: line-through; }
.stage-sep { color: var(--phosphor-dim); }

/* ---------- Main column ---------- */
.demo-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 28px 24px;
  position: relative;
}

/* Click-through: only the current stage is visible. Each section
   replaces the previous one in place; the viewer never scrolls
   through stages, they click NEXT to advance. */
.stage-section {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.stage-section.is-current { display: flex; }

/* Demo nav (sticky footer): previous / position / next. This is the
   demo's only chrome above what the tool itself shows - the tool view
   between the sticky header and this footer is exact. */
.demo-nav {
  position: sticky;
  bottom: 0;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(4px);
  border-top: 1px solid var(--phosphor-dim);
  padding: 10px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-chrome);
  letter-spacing: 0.1em;
  z-index: 40;
}
.demo-nav-position {
  color: var(--phosphor-dim);
}
.demo-nav-position strong { color: var(--phosphor); font-weight: 700; }
.demo-nav-btn {
  background: none;
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: var(--fs-chrome);
  letter-spacing: 0.12em;
  padding: 6px 14px;
  cursor: pointer;
  text-shadow: 0 0 1px var(--phosphor-glow);
}
.demo-nav-btn:hover:not(:disabled) {
  border-color: var(--phosphor);
  text-shadow: 0 0 6px var(--phosphor);
  background: rgba(0, 255, 65, 0.06);
}
.demo-nav-btn:disabled {
  color: var(--phosphor-dim);
  border-color: rgba(0, 170, 42, 0.4);
  cursor: not-allowed;
  opacity: 0.5;
}

/* Per-stage narration: small italic chrome that sits above/below the
   tool view. Subordinate to the tool view itself - the demo's main
   work is showing what the platform looks like in action, not lecturing
   around it. */
.stage-intro {
  font-size: 12.5px;
  color: var(--phosphor-dim);
  font-style: italic;
  line-height: 1.6;
  padding: 0 4px;
}
.stage-takeaway {
  font-size: 12.5px;
  color: var(--phosphor-dim);
  font-style: italic;
  line-height: 1.6;
  border-left: 2px solid var(--phosphor-dim);
  padding: 4px 0 4px 14px;
}
/* In click-through, the per-stage section header (STAGE N — Title) is
   redundant - the stage-progress strip at the top and the demo-nav
   footer both already say where you are. Hide it. */
.stage-section-header { display: none; }

/* ---------- Stage 0: framing card ---------- */
.framing-card {
  border: 1px solid var(--phosphor);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.framing-card h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--phosphor);
}
.framing-card .lede {
  color: var(--phosphor);
  font-size: 15px;
  line-height: 1.7;
}
.framing-card .lede strong { font-weight: 700; }

/* ---------- The Client Brief: external content card ----------
   The brief is the OWNER's voice, not the student's. Styled as a
   bordered note that reads like incoming context, not as a viewer
   in the tool sense. */
.client-brief {
  border: 1px solid var(--phosphor-dim);
  background: rgba(0, 255, 65, 0.02);
}
.client-brief-label {
  display: block;
  font-size: var(--fs-chrome);
  letter-spacing: 0.2em;
  color: var(--phosphor-dim);
  padding: 6px 16px;
  border-bottom: 1px dashed var(--phosphor-dim);
}
.client-brief-body {
  padding: 20px 24px;
  color: var(--phosphor);
  line-height: 1.75;
}
.client-brief-body p { margin-bottom: 12px; }
.client-brief-body p:last-child { margin-bottom: 0; }
.client-brief-body strong { color: var(--phosphor); font-weight: 700; }
.client-brief-body em { color: var(--phosphor); font-style: italic; }
.client-brief-body .signoff { color: var(--phosphor-dim); font-style: italic; }

/* ====================================================================
   Tool viewer chrome (copied from the build_tool's styles.css so the
   demo's stage views look identical to what the student sees in the
   actual tool).
==================================================================== */
.viewer {
  position: relative;
  border: 1px solid var(--phosphor);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-height: 0;
}
.viewer::before, .viewer::after {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--fs-chrome);
  color: var(--phosphor);
  background: var(--bg);
  padding: 0 2px;
  pointer-events: none;
}
.viewer::before { content: '┘'; bottom: -7px; left: -3px; }
.viewer::after  { content: '└'; top: -7px; right: -3px; }

.viewer-title {
  position: absolute;
  top: -10px;
  left: 12px;
  background: var(--bg);
  padding: 0 8px;
  font-size: var(--fs-chrome);
  letter-spacing: 0.15em;
  color: var(--phosphor);
  z-index: 2;
}
.viewer-title::before { content: '┌─[ '; color: var(--phosphor-dim); }
.viewer-title::after  { content: ' ]─'; color: var(--phosphor-dim); }

.viewer-body {
  flex: 1;
  position: relative;
  padding: 16px 12px 8px 12px;
  min-height: 0;
}

.viewer-footer {
  display: flex;
  gap: 16px;
  padding: 6px 12px 10px;
  align-items: center;
  border-top: 1px dashed var(--phosphor-dim);
}

/* Bracketed buttons (visual only in the demo - no click handlers). */
.btn {
  background: none;
  border: none;
  color: var(--phosphor);
  font-family: var(--font-mono);
  font-size: var(--fs-chrome);
  letter-spacing: 0.12em;
  padding: 2px 4px;
  text-shadow: 0 0 1px var(--phosphor-glow);
}
.btn::before { content: '[ '; color: var(--phosphor-dim); }
.btn::after  { content: ' ]'; color: var(--phosphor-dim); }
.btn--secondary { color: var(--phosphor-dim); font-size: 10px; }
.btn--mini { font-size: 9px; padding: 0 4px; letter-spacing: 0.08em; color: var(--phosphor-dim); }
.btn--mini::before, .btn--mini::after { color: var(--phosphor-dim); opacity: 0.7; }
.btn.btn--ai { color: var(--warning); text-shadow: 0 0 1px var(--warning); }
.btn.btn--ai::before, .btn.btn--ai::after { color: var(--warning-dim); }

/* ---------- Markdown viewer (stages 1 and 3) ---------- */
.markdown-sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 4px 4px;
}
.md-toolbar {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0 4px;
  font-size: var(--fs-chrome);
}
.md-template-label { color: var(--phosphor-dim); letter-spacing: 0.18em; }
.md-template-select {
  background: var(--bg);
  color: var(--phosphor-dim);
  border: 1px solid var(--phosphor-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-chrome);
  padding: 2px 8px;
  letter-spacing: 0.08em;
}
.md-section { display: flex; flex-direction: column; gap: 6px; }
.md-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 2px;
  border-bottom: 1px dashed var(--phosphor-dim);
}
.md-section-label {
  font-size: var(--fs-chrome);
  letter-spacing: 0.2em;
  color: var(--phosphor);
}
.md-section-content {
  background: var(--bg);
  color: var(--user-input);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  padding: 6px 0;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 0 1px var(--user-input-glow);
  margin: 0;
}

/* ---------- QC view layout (stages 2 and 5) ---------- */
.qc-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 4px 4px 4px;
}
.qc-body--three {
  grid-template-columns: 1fr 1.1fr 1.1fr;
}
@media (max-width: 980px) {
  .qc-body,
  .qc-body--three { grid-template-columns: 1fr; }
}
.qc-pane {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px dashed var(--phosphor-dim);
  padding: 10px 12px;
  min-width: 0;
}
.qc-pane-label {
  font-size: var(--fs-chrome);
  letter-spacing: 0.15em;
  color: var(--phosphor-dim);
}
.qc-spec-display {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--user-input);
  text-shadow: 0 0 1px var(--user-input-glow);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  max-height: 580px;
  overflow-y: auto;
}

/* ---------- QC checklist rows (mirror the build_tool) ---------- */
.qc-panel-group {
  border-bottom: 1px solid var(--phosphor-dim);
  padding-bottom: 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qc-panel-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.qc-panel-heading {
  font-size: var(--fs-chrome);
  letter-spacing: 0.2em;
  color: var(--phosphor);
  font-weight: 700;
}
.qc-row {
  border: 1px dashed var(--phosphor-dim);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qc-row.is-flagged {
  background: rgba(255, 217, 61, 0.04);
  border-color: var(--warning-dim);
}
.qc-row-legend {
  font-size: var(--fs-base);
  line-height: 1.45;
  padding: 0;
}
.qc-row-category {
  color: var(--phosphor);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.qc-row-question {
  color: var(--phosphor);
  text-shadow: 0 0 1px var(--phosphor-glow);
}
.qc-row-controls {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-chrome);
  letter-spacing: 0.08em;
}
.qc-row-answer {
  color: var(--phosphor-dim);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.qc-row-answer input[type="radio"] {
  accent-color: var(--phosphor);
  cursor: default;
  pointer-events: none;
}
.qc-row-answer input:checked + span { color: var(--phosphor); text-shadow: 0 0 1px var(--phosphor-glow); }
.qc-row-note-label {
  font-size: var(--fs-chrome);
  letter-spacing: 0.15em;
  color: var(--phosphor-dim);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qc-row-note {
  background: var(--bg);
  color: var(--user-input);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  border: 1px solid var(--phosphor-dim);
  padding: 6px 8px;
  line-height: 1.5;
  text-shadow: 0 0 1px var(--user-input-glow);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* ---------- Synth stage (Stage 4): spec | streaming code ---------- */
.synth-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .synth-grid { grid-template-columns: 1fr; }
}
.synth-grid .viewer { min-height: 480px; }

/* The code viewer's editor area - same shadow-textarea pattern as the
   real tool: a <pre> with syntax highlighting underneath; in the demo
   we just show the Prism-highlighted <pre> directly since the code is
   static and read-only. VS Code Dark+ palette overrides below. */
.code-editor {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}
.code-editor pre[class*="language-"] {
  margin: 0;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  background: #1e1e1e;
  color: #d4d4d4;
  text-shadow: none;
  overflow: auto;
  max-height: 640px;
}

/* ---------- Code QC artifact pane (Stage 5) ---------- */
.qc-artifact-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 6px;
}
.qc-artifact-tab {
  background: none;
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-chrome);
  letter-spacing: 0.1em;
  padding: 3px 10px;
}
.qc-artifact-tab[aria-selected="true"] {
  color: var(--phosphor);
  border-color: var(--phosphor);
  background: rgba(0, 255, 65, 0.08);
  text-shadow: 0 0 4px var(--phosphor);
}
.qc-code-frame {
  width: 100%;
  border: 1px solid var(--phosphor-dim);
  background: white;
  min-height: 360px;
  flex: 1 1 auto;
}
.qc-code-display {
  background: #1e1e1e;
  color: #d4d4d4;
  text-shadow: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  border: 1px solid var(--phosphor-dim);
  padding: 8px 10px;
  margin: 0;
  overflow: auto;
  max-height: 420px;
  white-space: pre;
}

/* ---------- Render stage (Stage 6) ---------- */
.render-frame-wrap {
  border: 1px solid var(--phosphor);
  background: white;
  height: 640px;
  position: relative;
}
.render-frame-wrap::before {
  content: '┘'; position: absolute; bottom: -7px; left: -3px;
  font-size: var(--fs-chrome); color: var(--phosphor); background: var(--bg); padding: 0 2px;
}
.render-frame-wrap::after {
  content: '└'; position: absolute; top: -7px; right: -3px;
  font-size: var(--fs-chrome); color: var(--phosphor); background: var(--bg); padding: 0 2px;
}
.render-frame {
  width: 100%;
  height: 100%;
  border: none;
}

/* ---------- Stage 3: revised spec + 7-changes sidebar ---------- */
.revision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 980px) {
  .revision-grid { grid-template-columns: 1fr; }
}
.revision-changes {
  border: 1px solid var(--phosphor-dim);
  padding: 16px 18px;
  position: sticky;
  top: 120px;
  align-self: start;
}
.revision-changes h3 {
  font-size: var(--fs-chrome);
  letter-spacing: 0.2em;
  color: var(--phosphor);
  margin-bottom: 12px;
}
.revision-changes ol {
  list-style: none;
  padding: 0;
  counter-reset: change;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.revision-changes li {
  position: relative;
  padding-left: 26px;
  counter-increment: change;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--phosphor);
}
.revision-changes li::before {
  content: counter(change, decimal-leading-zero) '.';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--phosphor-dim);
  font-weight: 700;
}
.revision-changes li strong { color: var(--phosphor); font-weight: 700; }
.revision-changes .honest-note {
  margin-top: 14px;
  font-size: 12px;
  font-style: italic;
  color: var(--phosphor-dim);
  border-top: 1px dashed var(--phosphor-dim);
  padding-top: 10px;
}

/* ---------- Stage 4 hint sidebar ---------- */
.code-hints {
  border: 1px solid var(--warning-dim);
  padding: 14px 16px;
  margin-top: 14px;
}
.code-hints h3 {
  font-size: var(--fs-chrome);
  letter-spacing: 0.2em;
  color: var(--warning);
  margin-bottom: 8px;
}
.code-hints p, .code-hints li {
  color: var(--phosphor);
  font-size: 12.5px;
  line-height: 1.55;
}
.code-hints ul { list-style: none; padding: 0; margin-top: 6px; }
.code-hints ul li {
  padding-left: 14px;
  position: relative;
  margin-bottom: 6px;
}
.code-hints ul li::before {
  content: '\25CF';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--warning-dim);
  font-size: 8px;
}
.code-hints code {
  background: var(--bg-elevated);
  border: 1px solid var(--phosphor-dim);
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--user-input);
}

/* ---------- Closing ---------- */
.demo-closing {
  border-top: 1px solid var(--phosphor-dim);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.demo-closing h2 {
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--phosphor);
}
.demo-closing p { color: var(--phosphor); line-height: 1.7; }
.demo-closing .closing-cta {
  margin-top: 8px;
  padding: 14px 18px;
  border: 1px solid var(--phosphor);
  background: rgba(0, 255, 65, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.demo-closing .closing-cta a { color: var(--user-input); text-decoration: none; }
.demo-closing .closing-cta a:hover { text-shadow: 0 0 4px var(--user-input-glow); text-decoration: underline; }

.back-to-top {
  text-align: center;
  margin-top: 16px;
}
.back-to-top a {
  color: var(--phosphor-dim);
  text-decoration: none;
  font-size: var(--fs-chrome);
  letter-spacing: 0.2em;
}
.back-to-top a:hover { color: var(--phosphor); text-shadow: 0 0 4px var(--phosphor); }

/* ---------- VS Code Dark+ Prism palette ----------
   Matches the build_tool's code viewer (the tool also uses Prism with
   a dark theme on the synthesized HTML). */
pre[class*="language-"],
code[class*="language-"] {
  background: #1e1e1e;
  color: #d4d4d4;
  text-shadow: none;
  font-family: var(--font-mono);
}
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6a9955; font-style: italic; }
.token.punctuation { color: #d4d4d4; }
.token.tag, .token.tag .token.punctuation { color: #569cd6; }
.token.attr-name { color: #9cdcfe; }
.token.attr-value, .token.string { color: #ce9178; }
.token.property, .token.boolean, .token.number { color: #b5cea8; }
.token.selector, .token.class-name { color: #4ec9b0; }
.token.keyword, .token.atrule { color: #c586c0; }
.token.function { color: #dcdcaa; }
.token.operator { color: #d4d4d4; }
.token.variable { color: #9cdcfe; }

/* ---------- Disabled state for visual-only buttons ---------- */
.btn:disabled { color: var(--phosphor-dim); cursor: default; opacity: 0.6; }
.btn:disabled::before, .btn:disabled::after { color: var(--phosphor-dim); opacity: 0.6; }