/* ============================================================
   Design tokens — mirrored from src/styles/global.css
   NOTE: token values mirrored from src/styles/global.css.
   Single source of truth conceptually in global.css; this file is
   standalone for static HTML deepdive pages that don't go through
   Astro build. Keep values in sync with global.css when changing.
   After Phase 2.4 (deepdive moved into Astro), this file retires.
   ============================================================ */

/* USE ACCENT COLOR (--color-accent) ONLY FOR:
 *   - Primary CTA buttons
 *   - Active state (current page tab, selected option)
 *   - Correct answer indicator
 *   - Important inline link hover
 *
 * USE SEMANTIC COLORS (--color-bg-success, --color-bg-warn) ONLY FOR:
 *   - Quiz verdict feedback
 *
 * DO NOT USE COLOR FOR:
 *   - Section dividers (use --color-divider / --color-line-soft)
 *   - Text emphasis (use font-weight)
 *   - Decorative borders or backgrounds
 *   - Trust badge labels
 */

:root {
  /* base content / surface / divider */
  --color-surface: #ffffff;
  --color-surface-muted: #f9fafb;
  --color-content: #111827;
  --color-content-muted: #374151;
  --color-divider: #e5e7eb;
  /* deepdive tokens — light defaults */
  --color-accent: #d97757;
  --color-ink-faint: #8a8a8a;
  --color-bg-elev: #fafafa;
  --color-bg-code: #f7f7f5;
  --color-line-soft: #f0f0f0;
  --color-bg-success: #f0fdfa;
  --color-line-success: #99f6e4;
  --color-bg-warn: #fff7ed;
  --color-line-warn: #fed7aa;
  /* per-section light colors */
  --color-sec-summary: #0f766e;  --color-sec-summary-line: #99f6e4;
  --color-sec-feel: #b45309;     --color-sec-feel-line: #fcd34d;
  --color-sec-old: #475569;      --color-sec-old-line: #cbd5e1;
  --color-sec-new: #1d4ed8;      --color-sec-new-line: #bfdbfe;
  --color-sec-tech: #4b5563;     --color-sec-tech-line: #d1d5db;
  --color-sec-wrong: #be123c;    --color-sec-wrong-line: #fecaca;
  --color-sec-wrong-card-bg: #fff5f5; --color-sec-wrong-card-bd: #fecdd3;
  --color-sec-var: #6d28d9;      --color-sec-var-line: #ddd6fe;
  --color-sec-var-card-bg: #faf5ff;   --color-sec-var-card-bd: #e9d5ff;
  --color-sec-know: #15803d;     --color-sec-know-line: #bbf7d0;
}

/* class-forced dark (from ThemeToggle on Astro pages — has no effect here,
   kept for forward-compat when this file eventually runs inside Astro) */
.dark {
  --color-surface: #111827;
  --color-surface-muted: #1f2937;
  --color-content: #f3f4f6;
  --color-content-muted: #e5e7eb;
  --color-divider: #374151;
  --color-accent: #e8a07e;
  --color-ink-faint: #7a7a7a;
  --color-bg-elev: #1a1a1c;
  --color-bg-code: #161618;
  --color-line-soft: #1f1f21;
  --color-bg-success: #062f2c;
  --color-line-success: #115e59;
  --color-bg-warn: #2a1a08;
  --color-line-warn: #92400e;
  --color-sec-summary: #2dd4bf;  --color-sec-summary-line: #115e59;
  --color-sec-feel: #fbbf24;     --color-sec-feel-line: #78350f;
  --color-sec-old: #94a3b8;      --color-sec-old-line: #475569;
  --color-sec-new: #60a5fa;      --color-sec-new-line: #1e3a8a;
  --color-sec-tech: #9ca3af;     --color-sec-tech-line: #374151;
  --color-sec-wrong: #fb7185;    --color-sec-wrong-line: #7f1d1d;
  --color-sec-wrong-card-bg: #220a0d; --color-sec-wrong-card-bd: #5d1722;
  --color-sec-var: #a78bfa;      --color-sec-var-line: #4c1d95;
  --color-sec-var-card-bg: #160a26;   --color-sec-var-card-bd: #3b1d6a;
  --color-sec-know: #4ade80;     --color-sec-know-line: #14532d;
}

/* system dark preference — suppressed when user forces light (.theme-light) or dark (.dark) via toggle */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(.dark) {
    --color-surface: #111827;
    --color-surface-muted: #1f2937;
    --color-content: #f3f4f6;
    --color-content-muted: #e5e7eb;
    --color-divider: #374151;
    --color-accent: #e8a07e;
    --color-ink-faint: #7a7a7a;
    --color-bg-elev: #1a1a1c;
    --color-bg-code: #161618;
    --color-line-soft: #1f1f21;
    --color-bg-success: #062f2c;
    --color-line-success: #115e59;
    --color-bg-warn: #2a1a08;
    --color-line-warn: #92400e;
    --color-sec-summary: #2dd4bf;  --color-sec-summary-line: #115e59;
    --color-sec-feel: #fbbf24;     --color-sec-feel-line: #78350f;
    --color-sec-old: #94a3b8;      --color-sec-old-line: #475569;
    --color-sec-new: #60a5fa;      --color-sec-new-line: #1e3a8a;
    --color-sec-tech: #9ca3af;     --color-sec-tech-line: #374151;
    --color-sec-wrong: #fb7185;    --color-sec-wrong-line: #7f1d1d;
    --color-sec-wrong-card-bg: #220a0d; --color-sec-wrong-card-bd: #5d1722;
    --color-sec-var: #a78bfa;      --color-sec-var-line: #4c1d95;
    --color-sec-var-card-bg: #160a26;   --color-sec-var-card-bd: #3b1d6a;
    --color-sec-know: #4ade80;     --color-sec-know-line: #14532d;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light dark}
body{
  margin:0;
  background:var(--color-surface);
  color:var(--color-content);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  font-size:17px;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern","ss01";
}

.wrap{max-width:680px;margin:0 auto;padding:64px 24px 120px}

/* progress */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--color-accent);z-index:100;transition:width .08s linear;pointer-events:none}

/* header */
.crumb{font-size:13px;color:var(--color-ink-faint);letter-spacing:.02em;margin-bottom:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.title{font-size:38px;font-weight:600;line-height:1.22;letter-spacing:-0.022em;margin:0 0 56px}

/* bottom nav */
.qnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:48px 0 0;padding:24px 0 0;border-top:1px solid var(--color-divider)}
.qnav a,.qnav span{font-size:14px;color:var(--color-content);text-decoration:none;padding:10px 16px;border:1px solid var(--color-divider);border-radius:8px;transition:border-color .12s,color .12s;white-space:nowrap;display:inline-block;background:transparent}
.qnav a:hover{border-color:var(--color-content)}
.qnav .qnav-hub{color:var(--color-content-muted);font-size:13px}
.qnav .qnav-disabled{color:var(--color-ink-faint);border-color:var(--color-line-soft);cursor:not-allowed;background:var(--color-bg-elev)}
@media (max-width:520px){
  .qnav{gap:6px}
  .qnav a,.qnav span{padding:8px 10px;font-size:13px}
  .qnav .qnav-hub{font-size:12px;padding:8px 8px}
}
.qnav-back{margin:18px 0 0;text-align:center}
.qnav-back a{font-size:13px;color:var(--color-ink-faint);text-decoration:none;letter-spacing:.02em}
.qnav-back a:hover{color:var(--color-content);text-decoration:underline}
.qnav-back-sep{font-size:13px;color:var(--color-ink-faint);margin:0 8px}

/* question */
.q-original{font-size:14px;color:var(--color-content-muted);line-height:1.78;padding-bottom:20px;border-bottom:1px solid var(--color-divider);margin-bottom:24px}
.q-original .lab{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-faint);font-weight:600;margin-bottom:10px}
.q-original .q-stem{margin:0 0 12px;font-size:14px;line-height:1.78}
.q-original .q-choices{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.q-original .q-choices li{font-size:14px;line-height:1.7}
.q-plain{margin-bottom:32px}
.q-plain .lab{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-faint);font-weight:600;margin-bottom:10px}
.q-plain p{margin:0 0 14px;font-size:18px;line-height:1.75}
.q-plain p:last-child{margin-bottom:0}

/* options */
.options{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.opt{
  width:100%;text-align:left;background:transparent;
  border:1px solid var(--color-divider);border-radius:8px;
  padding:14px 18px;font:inherit;color:var(--color-content);
  cursor:pointer;line-height:1.6;
  display:flex;align-items:flex-start;gap:14px;
  transition:border-color .12s,color .12s;
}
.opt:hover,.opt:focus{border-color:var(--color-content);outline:none}
.opt .letter{font-weight:600;width:18px;flex-shrink:0;color:var(--color-content-muted)}
.opt .text{flex:1}
.opt .mark{margin-left:auto;flex-shrink:0;display:none;font-size:14px;color:var(--color-ink-faint);font-weight:600}
.opt.is-correct{border-color:var(--color-accent)}
.opt.is-correct .mark{display:inline;color:var(--color-accent)}
.opt.is-correct .letter{color:var(--color-accent)}
.opt.is-wrong-pick{border-color:var(--color-divider);color:var(--color-ink-faint)}
.opt.is-wrong-pick .letter{color:var(--color-ink-faint)}
.opt.is-wrong-pick .mark{display:inline}
.opt:disabled{cursor:default}
.q-hint{font-size:13px;color:var(--color-ink-faint);text-align:center;margin-top:6px}

/* verdict */
.verdict{font-size:16px;color:var(--color-content);margin:32px 0 0;padding:18px 22px;background:var(--color-bg-code);border:1px solid var(--color-divider);border-radius:8px;line-height:1.65}
.verdict.right{background:var(--color-bg-success);border-color:var(--color-line-success)}
.verdict.wrong{background:var(--color-bg-warn);border-color:var(--color-line-warn)}
.verdict strong{color:var(--color-content);font-weight:700}

/* reveal */
.reveal{display:none}
.reveal.on{display:block}

/* TOC */
.toc{position:sticky;top:0;background:var(--color-surface);padding:18px 0 16px;margin:36px 0 16px;border-bottom:1px solid var(--color-divider);z-index:50}
.toc-label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-ink-faint);font-weight:700;margin-bottom:12px}
.toc-list{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
.toc a{display:inline-block;color:var(--color-content);text-decoration:none;white-space:nowrap;padding:7px 13px;border:1px solid var(--color-divider);border-radius:6px;background:var(--color-bg-elev);transition:all .12s;font-weight:500}
.toc a:hover{border-color:var(--color-content);background:var(--color-surface)}
.toc a.active{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-surface)}

/* sections */
.sec{margin:72px 0;scroll-margin-top:80px;padding-top:48px;border-top:3px solid var(--sec-line,var(--color-divider))}
.sec:first-of-type{padding-top:0;border-top:none;margin-top:24px}
.sec-eyebrow{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sec-c,var(--color-content-muted));font-weight:700;margin-bottom:14px}
.sec-title{font-size:26px;font-weight:600;line-height:1.32;letter-spacing:-0.012em;margin:0 0 24px}

/* per-section color themes (token-driven, dark-aware) */
#sec-summary    { --sec-c:var(--color-sec-summary); --sec-line:var(--color-sec-summary-line) }
#sec-feel       { --sec-c:var(--color-sec-feel);    --sec-line:var(--color-sec-feel-line) }
#sec-old        { --sec-c:var(--color-sec-old);     --sec-line:var(--color-sec-old-line) }
#sec-new        { --sec-c:var(--color-sec-new);     --sec-line:var(--color-sec-new-line) }
#sec-tech       { --sec-c:var(--color-sec-tech);    --sec-line:var(--color-sec-tech-line) }
#sec-wrong      { --sec-c:var(--color-sec-wrong);   --sec-line:var(--color-sec-wrong-line); --sec-card-bg:var(--color-sec-wrong-card-bg); --sec-card-bd:var(--color-sec-wrong-card-bd) }
#sec-variations { --sec-c:var(--color-sec-var);     --sec-line:var(--color-sec-var-line);   --sec-card-bg:var(--color-sec-var-card-bg);   --sec-card-bd:var(--color-sec-var-card-bd) }
#sec-knowledge  { --sec-c:var(--color-sec-know);    --sec-line:var(--color-sec-know-line) }
.sec p{margin:0 0 18px;line-height:1.78}
.sec p:last-child{margin-bottom:0}
.sec ul,.sec ol{padding-left:22px;margin:0 0 18px}
.sec li{margin:6px 0;line-height:1.78}
.sec strong{font-weight:600}

/* quoted block (light bg, no left bar) */
.quoted{background:var(--color-bg-code);padding:18px 20px;border-radius:6px;margin:18px 0;font-size:16px;line-height:1.95}

/* code */
pre,code{font-family:"SF Mono","JetBrains Mono","Menlo","Consolas",monospace}
pre{background:var(--color-bg-code);padding:18px 20px;border-radius:6px;overflow-x:auto;font-size:14px;line-height:1.7;margin:18px 0;-webkit-overflow-scrolling:touch}
code{background:var(--color-bg-code);padding:2px 5px;border-radius:3px;font-size:.92em}
pre code{background:none;padding:0}

/* technical (collapsed details) */
.tech{border-top:3px solid var(--sec-line,var(--color-divider));border-bottom:1px solid var(--color-divider);margin:72px 0;scroll-margin-top:80px}
.tech summary{color:var(--sec-c,var(--color-content))}
.tech summary{cursor:pointer;list-style:none;padding:24px 0;font-size:18px;font-weight:600;display:flex;align-items:center;gap:12px;color:var(--color-content)}
.tech summary::-webkit-details-marker{display:none}
.tech summary::after{content:"＋";margin-left:auto;color:var(--color-ink-faint);font-weight:300;font-size:22px;line-height:1}
.tech[open] summary::after{content:"−"}
.tech-body{padding:0 0 36px}
.tech-disclaimer{font-size:14px;color:var(--color-content-muted);background:var(--color-bg-code);padding:14px 16px;border-radius:6px;margin:0 0 28px;line-height:1.75}

/* practice steps */
.step{margin:32px 0}
.step-head{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.step-num{font-size:11px;letter-spacing:.16em;color:var(--color-ink-faint);font-weight:600;text-transform:uppercase}
.step-title{font-size:17px;font-weight:600}
.step ol{padding-left:22px;margin:8px 0}

/* parallel table */
.parallel{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:14px;line-height:1.6}
.parallel th,.parallel td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--color-line-soft);vertical-align:top}
.parallel th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-faint);font-weight:600;border-bottom-color:var(--color-divider)}
.parallel td.cn{width:42%;padding-right:18px}
.parallel td.code-cell{font-family:"SF Mono","Menlo",monospace;font-size:13px;color:var(--color-content)}

/* symbols */
.symbols{margin:8px 0 0}
.symbols dt{font-family:"SF Mono","Menlo",monospace;font-weight:600;margin-top:16px;font-size:14px;color:var(--color-content)}
.symbols dt:first-child{margin-top:0}
.symbols dd{margin:5px 0 0;line-height:1.75;color:var(--color-content-muted)}

/* wrong options */
.wrong{margin:20px 0;padding:24px 26px;background:var(--sec-card-bg,var(--color-bg-elev));border:1px solid var(--sec-card-bd,var(--color-line-soft));border-radius:8px}
.wrong:last-child{margin-bottom:0}
.wrong-head{font-size:18px;font-weight:600;margin:0 0 18px;line-height:1.45;letter-spacing:-0.005em;display:flex;align-items:baseline;gap:10px}
.wrong-head .letter{color:var(--color-ink-faint);font-weight:700;font-family:"SF Mono","Menlo",monospace;font-size:15px;flex-shrink:0}
.wrong-row{margin:14px 0}
.wrong-row .lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-faint);font-weight:600;display:block;margin-bottom:5px}
.wrong-row p{margin:0;line-height:1.78}

/* variations */
.var{margin:20px 0;padding:24px 26px;background:var(--sec-card-bg,var(--color-bg-elev));border:1px solid var(--sec-card-bd,var(--color-line-soft));border-radius:8px}
.var:last-child{margin-bottom:0}
.var-num{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-content-muted);font-weight:700;margin-bottom:10px;font-family:"SF Mono","Menlo",monospace}
.var-q{font-size:18px;font-weight:600;margin:0 0 18px;line-height:1.5;letter-spacing:-0.005em}
.var-row{margin:12px 0}
.var-row .lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-faint);font-weight:600;display:block;margin-bottom:4px}
.var-row p{margin:0;line-height:1.78}

/* knowledge */
.know{margin:0;padding:0;list-style:none}
.know li{padding:18px 0;border-bottom:1px solid var(--color-line-soft)}
.know li:last-child{border-bottom:none}
.know strong{font-size:16px;font-weight:600;display:block;margin-bottom:5px}
.know span{color:var(--color-content-muted);font-size:15px}
.know a{color:inherit;text-decoration:none;display:block}
.know a:hover strong{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
.know a:hover{cursor:pointer}

/* source footer */
.source{margin-top:96px;padding-top:32px;border-top:1px solid var(--color-divider);font-size:14px;color:var(--color-content-muted);line-height:1.75}
.source .lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-ink-faint);font-weight:600;display:block;margin-bottom:12px}
.source p{margin:0 0 8px}
.source a{color:var(--color-content);text-decoration:underline;text-decoration-color:var(--color-divider);text-underline-offset:3px;transition:text-decoration-color .12s}
.source a:hover{text-decoration-color:var(--color-content)}
.source .copyright{font-size:12px;color:var(--color-ink-faint);margin-top:18px}

/* mobile */
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:40px 20px 100px}
  .title{font-size:28px;letter-spacing:-0.018em;margin-bottom:44px}
  .q-plain p{font-size:17px}
  .sec{margin:56px 0;padding-top:36px}
  .sec-title{font-size:21px}
  .toc{padding:16px 0 14px}
  .toc-list{gap:8px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .toc a{flex-shrink:0;padding:7px 12px}
  .opt{padding:13px 16px}
  .tech{margin:56px 0}
  .tech summary{font-size:16px;padding:20px 0}
  pre{font-size:13px;padding:14px 16px}
  .quoted{padding:14px 16px}
  .parallel td.cn{width:46%;padding-right:12px}
  .parallel td.code-cell{font-size:12px}
  .wrong,.var{padding:20px}
  .wrong-head,.var-q{font-size:17px}
  .verdict{padding:16px 18px;font-size:15px}
  .source{margin-top:72px}
}

/* theme toggle button */
.theme-toggle{position:fixed;top:14px;right:14px;z-index:200;width:36px;height:36px;border-radius:50%;border:1px solid var(--color-divider);background:var(--color-surface);color:var(--color-content);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .12s,background .12s}
.theme-toggle:hover{border-color:var(--color-content)}
.theme-toggle svg{width:18px;height:18px}
@media (max-width:520px){.theme-toggle{top:10px;right:10px;width:32px;height:32px}}