/* EOD Science & Technology — course theme (docsify vue.css overrides).
   Visual language: engineering simulator / technical training software. */
:root {
  --theme-color: #c2410c;          /* hazard orange */
  --ink: #1d2430;
  --muted: #5b6574;
  --panel: #f5f7fa;
  --panel-border: #dfe4ea;
  --code-bg: #f3f5f8;
  --c-physics: #1d4ed8;
  --c-chem: #7c3aed;
  --c-hazard: #c2410c;
  --c-safety: #b91c1c;
  --c-key: #15803d;
  --c-sim: #0e7490;
  --c-exercise: #a16207;
  --c-boundary: #475569;
}
@media (prefers-color-scheme: dark) {
  :root {
    --theme-color: #fb923c;
    --ink: #d8dee9;
    --muted: #97a3b6;
    --panel: #161b22;
    --panel-border: #2b3340;
    --code-bg: #11161d;
    --c-physics: #60a5fa;
    --c-chem: #a78bfa;
    --c-hazard: #fb923c;
    --c-safety: #f87171;
    --c-key: #4ade80;
    --c-sim: #22d3ee;
    --c-exercise: #facc15;
    --c-boundary: #94a3b8;
  }
  body, .sidebar, .markdown-section { background: #0d1117; color: var(--ink); }
  .sidebar { border-right: 1px solid #1f2630; }
  .sidebar ul li a { color: #aab4c3; }
  .markdown-section h1, .markdown-section h2, .markdown-section h3,
  .markdown-section h4, .markdown-section strong { color: #e6edf3; }
  .markdown-section p, .markdown-section li, .markdown-section td { color: var(--ink); }
  .markdown-section pre, .markdown-section code { background: var(--code-bg) !important; color: #d1d9e0; }
  .markdown-section tr:nth-child(2n) { background: #131922; }
  .markdown-section td, .markdown-section th { border-color: #2b3340; }
  .markdown-section blockquote { color: var(--muted); }
  .search input { background: #11161d; color: var(--ink); border-color: #2b3340; }
  .sidebar-toggle { background: rgba(13,17,23,.8); }
  .app-name-link { color: var(--theme-color) !important; }
  .katex { color: #e6edf3; }
}

.sidebar { padding-top: 20px; }
.sidebar > h1 { margin: 0 20px 10px; font-size: 1.05em; letter-spacing: .02em; }
.markdown-section { max-width: 960px; }
.markdown-section h1 { letter-spacing: -.01em; }
.markdown-section h2 { border-bottom: 1px solid var(--panel-border); padding-bottom: .25em; }
table { display: table; width: 100%; }
.katex { font-size: 1.05em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: .3em 0; }

/* ---------- lesson header card ---------- */
.module-card { background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 8px; padding: .7em 1.1em; margin-bottom: 1.6em; font-size: .93em; }
.module-card p { margin: .35em 0; }
.module-card .tags span { display: inline-block; font-size: .78em; font-weight: 600;
  padding: 1px 9px; border-radius: 10px; margin-right: 6px; border: 1px solid var(--panel-border); }

/* ---------- callouts ---------- */
.callout { border-left: 4px solid var(--theme-color); background: var(--panel);
  padding: .8em 1em; margin: 1.2em 0; border-radius: 0 6px 6px 0; }
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.callout.physics  { border-left-color: var(--c-physics); }
.callout.chem     { border-left-color: var(--c-chem); }
.callout.hazard   { border-left-color: var(--c-hazard); }
.callout.safety   { border-left-color: var(--c-safety); }
.callout.key      { border-left-color: var(--c-key); }
.callout.sim      { border-left-color: var(--c-sim); }
.callout.exercise { border-left-color: var(--c-exercise); }
.callout.boundary { border-left-color: var(--c-boundary); font-size: .92em; }
.callout.eq       { border-left-color: var(--c-physics); }

/* ---------- hidden answers ---------- */
details.answer { background: var(--panel); border: 1px dashed var(--panel-border);
  border-radius: 6px; padding: .4em .9em; margin: .8em 0; }
details.answer summary { cursor: pointer; font-weight: 600; color: var(--muted); }

/* ---------- embedded simulators ---------- */
.sim-frame { width: 100%; border: 1px solid var(--panel-border); border-radius: 8px;
  background: #0b0f14; margin: 1em 0; }
.sim-link { display: inline-block; font-weight: 600; padding: .35em .9em; border-radius: 6px;
  border: 1px solid var(--c-sim); color: var(--c-sim) !important; text-decoration: none !important; }

/* ---------- progress widget ---------- */
.eod-progress { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 2.5em 0 1em; padding: .8em 1em; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--panel-border); font-size: .9em; }
.eod-progress label { cursor: pointer; user-select: none; }
.eod-progress .spacer { flex: 1; }
.eod-progress select { padding: 2px 6px; }
.eod-badge { display: inline-block; font-size: .72em; font-weight: 700; padding: 1px 8px;
  border-radius: 10px; margin-left: 6px; vertical-align: middle;
  background: var(--c-key); color: #fff; }
.sidebar li.eod-done > a::after { content: " ✓"; color: var(--c-key); font-weight: 700; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dash-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px; padding: .7em 1em; }
.dash-bar { height: 8px; background: var(--panel-border); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.dash-bar > div { height: 100%; background: var(--theme-color); }