/* Zero to SOC — in-browser lab styles.
   Follows the TechBridge design system (06_Design/Design_System_Guide.md).
   Tokens lifted verbatim from the DS contract (_ds/tokens/colors.css).
   DS extension (noted per guide §3): a monospace stack for code labs —
   the DS has no code-editor idiom; everything else derives from tokens. */

:root {
  --color-brand-50: #faf5ff;
  --color-brand-100: #f3e8ff;
  --color-brand-200: #e9d5ff;
  --color-brand-300: #d8b4fe;
  --color-brand-600: #6731a1;
  --color-brand-700: #5b2891;
  --color-accent-50: #fdf2f8;
  --color-accent-500: #db3586;
  --color-accent-600: #c42d77;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-900: #111827;
  --color-green-50: #f0fdf4;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-red-50: #fef2f2;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-yellow-100: #fef9c3;
  --color-yellow-700: #a16207;
  --gradient-brand: linear-gradient(135deg, #6731a1 0%, #db3586 100%);
  --font-sans: "Montserrat", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 8px;
  --radius-card: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: #ffffff;
  color: var(--color-gray-900);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
}

/* ---------- layout ---------- */
.wrap { max-width: 860px; margin: 0 auto; padding: 0 24px 96px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--color-gray-200);
}
.topbar-inner {
  max-width: 860px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.topbar .brand {
  font-weight: 700; font-size: 14px; color: var(--color-brand-600);
  text-decoration: none; letter-spacing: 0.02em;
}
.topbar .spacer { flex: 1; }
.topbar .runtime {
  font-size: 12px; color: var(--color-gray-500); display: inline-flex;
  align-items: center; gap: 6px;
}
.topbar .runtime .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-gray-300); transition: background-color 200ms;
}
.topbar .runtime.ready .dot { background: var(--color-green-600); }
.topbar .runtime.err .dot { background: var(--color-red-600); }

/* ---------- draft banner (stripped at public release) ---------- */
.draft-banner {
  background: var(--color-yellow-100); color: var(--color-yellow-700);
  font-size: 13px; font-weight: 600; text-align: center; padding: 6px 12px;
}

/* ---------- header ---------- */
.eyebrow {
  margin: 40px 0 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-brand-600);
}
h1 {
  margin: 0 0 16px;
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.1; font-weight: 700; letter-spacing: -0.01em;
}
h1 .grad {
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pills { margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-block; padding: 4px 14px;
  border: 1px solid var(--color-brand-200); border-radius: 999px;
  background: var(--color-brand-50); color: var(--color-brand-700);
  font-size: 13px; font-weight: 600;
}

/* lesson meta card (objectives / time / prereqs from the lesson header) */
.meta-card {
  background: #ffffff; border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-card); padding: 20px 24px; margin: 0 0 32px;
  font-size: 14.5px;
}
.meta-card p { margin: 6px 0; }
.meta-card ul { margin: 6px 0; padding-left: 22px; }

/* ---------- prose ---------- */
h2 {
  margin: 48px 0 12px; font-size: 27px; line-height: 1.2; font-weight: 700;
}
h3 { margin: 36px 0 10px; font-size: 20px; font-weight: 700; }
p { margin: 14px 0; color: var(--color-gray-700); }
strong { color: var(--color-gray-900); font-weight: 700; }
a { color: var(--color-brand-600); }
hr { border: none; border-top: 1px solid var(--color-gray-200); margin: 44px 0; }
blockquote {
  margin: 20px 0; padding: 12px 20px;
  border-left: 3px solid var(--color-brand-600);
  background: var(--color-brand-50); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-gray-700);
}
blockquote p { margin: 6px 0; }
ul, ol { color: var(--color-gray-700); }
li { margin: 6px 0; }
code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--color-gray-100); border-radius: 4px; padding: 1.5px 6px;
}
pre code { background: none; padding: 0; font-size: inherit; }

table { border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 14.5px; }
th, td { border: 1px solid var(--color-gray-200); padding: 8px 12px; text-align: left; }
th { background: var(--color-gray-50); font-weight: 700; }
tr.you-are-here td { background: var(--color-brand-50); font-weight: 600; }

details {
  margin: 20px 0; border: 1px solid var(--color-gray-200);
  border-radius: var(--radius); padding: 12px 18px; background: #ffffff;
}
details summary { cursor: pointer; font-weight: 700; color: var(--color-brand-600); }

/* ---------- static code / diagrams ---------- */
pre.static {
  background: var(--color-gray-50); border: 1px solid var(--color-gray-200);
  border-radius: var(--radius); padding: 14px 18px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55;
}

/* ---------- expected output ---------- */
.expected { margin: 14px 0; }
.expected .chip {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-gray-500); margin-bottom: 4px;
}
.expected pre {
  margin: 0; background: var(--color-gray-50);
  border: 1px dashed var(--color-gray-300); border-radius: var(--radius);
  padding: 12px 16px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55;
  color: var(--color-gray-600);
}

/* ---------- runnable cells ---------- */
.cell, .filecell {
  background: #ffffff; border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-card); margin: 20px 0; overflow: hidden;
  transition: border-color 200ms;
}
.cell:focus-within, .filecell:focus-within { border-color: var(--color-brand-300); }
.cell-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--color-gray-100);
}
.cell-head .label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-gray-500);
}
.cell-head .spacer { flex: 1; }
.cell-head .status { font-size: 12.5px; font-weight: 600; color: var(--color-gray-500); }
.cell-head .status.ok { color: var(--color-green-700); }
.cell-head .status.err { color: var(--color-red-700); }
.cell-head .restore {
  font-size: 12px; color: var(--color-gray-400); background: none; border: none;
  cursor: pointer; text-decoration: underline; padding: 0; font-family: var(--font-sans);
}
.restore:hover { color: var(--color-brand-600); }

button.run, button.savefile {
  font-family: var(--font-sans); font-weight: 700; font-size: 13.5px;
  color: #ffffff; background: var(--color-brand-600);
  border: none; border-radius: var(--radius); padding: 6px 18px;
  cursor: pointer; transition: background-color 200ms;
}
button.run:hover, button.savefile:hover { background: var(--color-brand-700); }
button.run:disabled, button.savefile:disabled {
  background: var(--color-gray-300); cursor: wait;
}

.CodeMirror {
  height: auto; font-family: var(--font-mono); font-size: 13.5px;
  line-height: 1.55; padding: 6px 4px;
}
.filecell textarea.filebody {
  width: 100%; border: none; resize: vertical; display: block;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.55;
  padding: 12px 16px; min-height: 120px; color: var(--color-gray-700);
  outline: none;
}

.cell-out { border-top: 1px solid var(--color-gray-100); }
.cell-out .chip {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-gray-500); padding: 8px 16px 0;
}
.cell-out pre {
  margin: 4px 0 0; padding: 8px 16px 14px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55;
}
.cell-out.err pre { color: var(--color-red-700); background: var(--color-red-50); }

/* ---------- action buttons (reset / download) ---------- */
.actions { display: flex; gap: 10px; align-items: center; }
.actions button {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  color: var(--color-gray-600); background: #ffffff;
  border: 1px solid var(--color-gray-200); border-radius: var(--radius);
  padding: 5px 12px; cursor: pointer; transition: border-color 200ms, color 200ms;
}
.actions button:hover { border-color: var(--color-brand-300); color: var(--color-brand-600); }

/* ---------- footer nav / CTA ---------- */
.lesson-nav {
  display: flex; justify-content: space-between; gap: 12px; margin: 56px 0 0;
}
.lesson-nav a {
  display: inline-block; padding: 10px 22px; border-radius: var(--radius);
  border: 1px solid var(--color-gray-200); background: #ffffff;
  color: var(--color-brand-600); font-weight: 700; font-size: 14.5px;
  text-decoration: none; transition: border-color 200ms;
}
.lesson-nav a:hover { border-color: var(--color-brand-300); }

.cta-band {
  margin: 64px 0 0; padding: 36px 32px; border-radius: var(--radius-card);
  background: var(--gradient-brand); color: #ffffff; text-align: center;
}
.cta-band h2 { margin: 0 0 8px; color: #ffffff; }
.cta-band p { color: rgba(255,255,255,0.92); margin: 0 0 18px; }
.cta-band a {
  display: inline-block; background: #ffffff; color: var(--color-brand-700);
  font-weight: 700; font-size: 15px; padding: 10px 26px;
  border-radius: var(--radius); text-decoration: none;
}

/* ---------- index (arc map) ---------- */
.arc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 32px 0; }
.arc-card {
  display: block; background: #ffffff; border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-card); padding: 18px 22px; text-decoration: none;
  color: var(--color-gray-900); transition: border-color 200ms;
}
.arc-card:hover { border-color: var(--color-brand-300); }
.arc-card .num {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-brand-600);
}
.arc-card h3 { margin: 2px 0 4px; }
.arc-card p { margin: 0; font-size: 14px; color: var(--color-gray-600); }

@media (max-width: 640px) {
  .wrap { padding: 0 16px 64px; }
  .topbar-inner { padding: 8px 16px; }
}