/* Unified Lesson & Reference Stylesheet — /teach Study Portal */
:root {
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", monospace;
  
  --c-bg: #fafaf8;
  --c-surface: #ffffff;
  --c-surface-hover: #f3f3f0;
  --c-fg: #1a1a1a;
  --c-muted: #666666;
  --c-subtle: #888888;
  --c-accent: #2563eb;
  --c-accent-hover: #1d4ed8;
  --c-accent-light: #eff6ff;
  --c-border: #e5e5e5;
  --c-code-bg: #f0f0ee;
  
  --c-success: #16a34a;
  --c-success-bg: #f0fdf4;
  --c-success-border: #86efac;
  
  --c-warn: #d97706;
  --c-warn-bg: #fffbeb;
  --c-warn-border: #fcd34d;
  
  --c-danger: #dc2626;
  --c-danger-bg: #fef2f2;
  --c-danger-border: #fca5a5;
  
  --c-info-bg: #eff6ff;
  --c-info-border: #93c5fd;
  
  --c-term-bg: #1e1e2e;
  --c-term-fg: #cdd6f4;
  --c-term-green: #a6e3a1;
  --c-term-yellow: #f9e2af;
  --c-term-blue: #89b4fa;
  --c-term-red: #f38ba8;
  --c-term-comment: #6c7086;
  
  --max-w: 48rem;
  --radius: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #13141c;
    --c-surface: #1a1b26;
    --c-surface-hover: #24283b;
    --c-fg: #c0caf5;
    --c-muted: #9aa5ce;
    --c-subtle: #7982a9;
    --c-accent: #7aa2f7;
    --c-accent-hover: #89b4fa;
    --c-accent-light: #1e2238;
    --c-border: #2f334d;
    --c-code-bg: #24283b;
    
    --c-success-bg: #16261f;
    --c-success-border: #4ade80;
    
    --c-info-bg: #1a1e36;
    --c-info-border: #7aa2f7;
    
    --c-warn-bg: #2d261e;
    --c-warn-border: #fbbf24;
    
    --c-danger-bg: #321c24;
    --c-danger-border: #f87171;
  }
}

[data-theme="dark"] {
  --c-bg: #13141c;
  --c-surface: #1a1b26;
  --c-surface-hover: #24283b;
  --c-fg: #c0caf5;
  --c-muted: #9aa5ce;
  --c-subtle: #7982a9;
  --c-accent: #7aa2f7;
  --c-accent-hover: #89b4fa;
  --c-accent-light: #1e2238;
  --c-border: #2f334d;
  --c-code-bg: #24283b;
  
  --c-success-bg: #16261f;
  --c-success-border: #4ade80;
  
  --c-info-bg: #1a1e36;
  --c-info-border: #7aa2f7;
  
  --c-warn-bg: #2d261e;
  --c-warn-border: #fbbf24;
  
  --c-danger-bg: #321c24;
  --c-danger-border: #f87171;
}

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

html {
  font-size: 16px;
  line-height: 1.7;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--c-fg);
  background: var(--c-bg);
  min-height: 100vh;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

/* Container wrapper support */
.container {
  width: 100%;
}

/* Top bar / Navigation */
.lesson-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.88rem;
}

.lesson-nav-top a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--c-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.lesson-nav-top a:hover {
  color: var(--c-accent);
}

/* Typography */
h1 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 0.75rem;
  letter-spacing: -0.025em;
  color: var(--c-fg);
}

h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--c-border);
  letter-spacing: -0.015em;
  color: var(--c-fg);
}

h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
  color: var(--c-fg);
}

p, ul, ol {
  margin: 0.85rem 0;
  line-height: 1.75;
}

ul, ol {
  padding-left: 1.5rem;
}

li {
  margin: 0.35rem 0;
}

a {
  color: var(--c-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--c-code-bg);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

pre {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  padding: 1.25rem;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 1.25rem 0;
  background: var(--c-term-bg);
  color: var(--c-term-fg);
  border: 1px solid #313244;
}

pre code {
  background: none;
  padding: 0;
}

/* Terminal syntax helper */
.terminal {
  background: var(--c-term-bg);
  color: var(--c-term-fg);
  border: 1px solid #313244;
}
.terminal .prompt { color: var(--c-term-green); font-weight: 600; }
.terminal .cmd { color: var(--c-term-fg); }
.terminal .comment { color: var(--c-term-comment); font-style: italic; }
.terminal .output { color: var(--c-term-comment); }
.terminal .highlight { color: var(--c-term-yellow); }
.terminal .flag { color: var(--c-term-blue); }
.terminal .string { color: var(--c-term-green); }
.terminal .error { color: var(--c-term-red); }

/* Lesson Metadata */
.lesson-meta, .meta {
  color: var(--c-muted);
  font-size: 0.88rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Callout Boxes */
.callout {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--c-accent);
  background: var(--c-info-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0;
}

.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

.callout.info {
  background: var(--c-info-bg);
  border-color: var(--c-info-border);
}

.callout.tip {
  background: var(--c-success-bg);
  border-color: var(--c-success-border);
}

.callout.warn, .callout-warning {
  background: var(--c-warn-bg);
  border-color: var(--c-warn-border);
}

.callout .label {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
}

/* Step Numbers */
.steps { counter-reset: step-counter; }
.step {
  counter-increment: step-counter;
  position: relative;
  padding-left: 2.75rem;
  margin: 2rem 0;
}

.step::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.85rem;
  height: 1.85rem;
  background: var(--c-accent);
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

th, td {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--c-border);
  text-align: left;
}

th {
  background: var(--c-code-bg);
  font-weight: 600;
}

/* Diagrams & Flow */
.flow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

.flow .box {
  background: var(--c-accent-light);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius);
  padding: 0.4rem 0.75rem;
  font-weight: 600;
  color: var(--c-fg);
}

.flow .arrow {
  color: var(--c-muted);
  font-size: 1.2rem;
}

/* Interactive Quiz */
.quiz-container {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 2rem 0;
}

.quiz-option {
  display: block;
  margin: 0.65rem 0;
  padding: 0.85rem 1rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.95rem;
}

.quiz-option:hover {
  background: var(--c-accent-light);
  border-color: var(--c-accent);
}

.explanation {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--radius);
  display: none;
  font-size: 0.92rem;
  line-height: 1.6;
}

.explanation.visible { display: block; }
.explanation.correct {
  background: var(--c-success-bg);
  border: 1px solid var(--c-success-border);
  color: var(--c-success);
}
.explanation.incorrect {
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-border);
  color: var(--c-danger);
}

/* Details & Summary */
details {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0.85rem 1.15rem;
  margin: 0.85rem 0;
}

details[open] {
  padding-bottom: 1.15rem;
}

summary {
  cursor: pointer;
  font-weight: 600;
}

summary:hover {
  color: var(--c-accent);
}

details p {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* Lesson Footer & Nav links */
.lesson-footer, .nav-links {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-border);
  color: var(--c-muted);
  font-size: 0.9rem;
}

.lesson-footer a, .nav-links a {
  color: var(--c-accent);
}

/* Print Styles */
@media print {
  body { max-width: 100%; font-size: 11pt; }
  .terminal { break-inside: avoid; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}