@import url('/design-tokens.css');

/*
 * Exam deepdive v2 keeps the v1 layout and interaction contract while
 * sourcing every color from the sitewide semantic token endpoint.
 * Legacy --color-* aliases remain only for static page compatibility.
 */
:root {
  --color-surface: var(--bg-page);
  --color-surface-muted: var(--bg-muted);
  --color-content: var(--text-primary);
  --color-content-muted: var(--text-secondary);
  --color-divider: var(--border-soft);
  --color-accent: var(--accent-warm);
  --color-ink-faint: var(--text-muted);
  --color-bg-elev: var(--bg-elevated);
  --color-bg-code: var(--bg-muted);
  --color-line-soft: var(--border-soft);
  --color-bg-success: var(--status-success-bg);
  --color-line-success: var(--status-success-border);
  --color-bg-warn: var(--alert-warn-bg);
  --color-line-warn: var(--alert-warn-border);

  /* B design: one warm accent plus neutral section hierarchy. */
  --color-sec-summary: var(--accent-warm);
  --color-sec-summary-line: var(--border-soft);
  --color-sec-feel: var(--text-secondary);
  --color-sec-feel-line: var(--border-soft);
  --color-sec-old: var(--text-secondary);
  --color-sec-old-line: var(--border-soft);
  --color-sec-new: var(--text-secondary);
  --color-sec-new-line: var(--border-soft);
  --color-sec-tech: var(--text-secondary);
  --color-sec-tech-line: var(--border-soft);
  --color-sec-wrong: var(--text-secondary);
  --color-sec-wrong-line: var(--border-soft);
  --color-sec-wrong-card-bg: var(--bg-card);
  --color-sec-wrong-card-bd: var(--border-soft);
  --color-sec-var: var(--text-secondary);
  --color-sec-var-line: var(--border-soft);
  --color-sec-var-card-bg: var(--bg-card);
  --color-sec-var-card-bd: var(--border-soft);
  --color-sec-know: var(--text-secondary);
  --color-sec-know-line: var(--border-soft);
}

*{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:background-color .12s,border-color .12s,color .12s,transform .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:44px;height:44px;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:44px;height:44px}}