/* 正心高三 AI 課程教材站 — 共用樣式（零外部資源，系統字型） */

:root{
  --ink:#111418;
  --muted:#4b5563;
  --paper:#ffffff;
  --card:#ffffff;
  --line:#d6dbe2;
  --soft:#f3f5f8;
  --accent:#0f5fae;
  --accent-ink:#0a3f73;
  --accent-soft:#e4f0fc;
  --ok:#106b3f;
  --ok-soft:#e1f4ea;
  --warn:#8a5b00;
  --warn-soft:#fdf1d8;
  --code-bg:#151a21;
  --code-ink:#eef1f5;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",system-ui,-apple-system,sans-serif;
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  line-height:1.3;
  margin:0 0 .5em;
  font-weight:700;
}
h1{font-size:clamp(28px,5vw,38px)}
h2{font-size:clamp(22px,3.6vw,28px)}
h3{font-size:20px;margin-top:1.1em}
p{margin:0 0 14px}
a{color:var(--accent-ink)}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}

/* 頁頂 */
header.hero{background:var(--soft);border-bottom:1px solid var(--line);padding:28px 0 20px}
.top-meta{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.top-meta li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.idfields{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.idfields label{display:flex;flex-direction:column;gap:4px;font-size:15px;color:var(--muted);flex:1 1 240px}
.idfields input{
  font:inherit;font-size:17px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:9px 10px;
}
.idfields input:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.progress{
  margin-top:14px;display:inline-block;background:var(--accent-soft);color:var(--accent-ink);
  border-radius:999px;padding:8px 16px;font-weight:700;font-size:16px;
}

/* 迷你導覽 */
nav.stepnav{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
nav.stepnav .navrow{display:flex;gap:4px;overflow-x:auto;padding:8px 20px;scrollbar-width:thin}
nav.stepnav a{
  white-space:nowrap;font-size:15px;color:var(--muted);text-decoration:none;
  padding:7px 12px;border-radius:999px;font-weight:600;
}
nav.stepnav a:hover,nav.stepnav a:focus-visible{background:var(--soft);color:var(--ink);outline:none}

main{padding:8px 0 40px}
section.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px 20px;margin:22px 20px;max-width:820px;margin-left:auto;margin-right:auto;
}
section.card + section.card{margin-top:22px}

/* 行內代碼／強調 */
code{
  font-family:"SF Mono","Menlo","Consolas","IBM Plex Mono",monospace;
  font-size:.92em;background:var(--soft);border-radius:5px;padding:.1em .35em;
}
strong{font-weight:700}

/* 程式碼區塊 + 複製鈕 */
.codebox{margin:14px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--code-bg)}
.codebox-head{display:flex;justify-content:flex-end;padding:6px 8px;background:#0c1015;border-bottom:1px solid #2a323d}
button.copybtn{
  font:inherit;font-size:14px;font-weight:700;color:var(--code-ink);cursor:pointer;
  border:1px solid #3a4453;background:#1d2530;border-radius:8px;padding:6px 12px;
}
button.copybtn:hover{border-color:var(--accent)}
button.copybtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.codebox pre{margin:0;padding:14px 16px;overflow-x:auto}
.codebox pre code{
  background:none;padding:0;color:var(--code-ink);font-size:16px;line-height:1.6;
  display:block;white-space:pre;
}
/* 關 2 prompt／commit 框裡「要自己打」的字面（＿＿、主題）：黃底標示，
   複製仍複製純文字（textContent 本來就不含標籤） */
.codebox pre code mark.blank{
  background:#ffd400;color:#151a21;padding:0 2px;border-radius:3px;font-weight:700;
}

/* 看到這個就對了 */
.expect{margin:14px 0;border:1px solid var(--ok);background:var(--ok-soft);border-radius:10px;padding:12px 14px}
.expect-label{font-weight:700;color:var(--ok);font-size:15px;margin-bottom:4px}
.expect-body code{background:rgba(255,255,255,.6)}

/* 卡住了（提示階梯） */
details.hint{margin:10px 0;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
details.hint summary{cursor:pointer;padding:10px 14px;font-weight:700;list-style:revert}
details.hint summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
details.hint[open] summary{border-bottom:1px solid var(--line)}
details.hint p,details.hint div.hintbody{margin:0;padding:10px 14px}

/* 自檢 checkbox */
label.checkline{
  display:flex;gap:10px;align-items:flex-start;margin:12px 0;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;font-size:17px;
}
label.checkline input{margin-top:5px;accent-color:var(--ok);width:20px;height:20px;flex:none}
label.checkline.done{background:var(--ok-soft);border-color:var(--ok)}
.checklist{display:flex;flex-direction:column;gap:10px}

/* 表格 */
.tablewrap{overflow-x:auto;margin:14px 0}
table{border-collapse:collapse;width:100%;font-size:16px;min-width:420px}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--soft)}

/* 清單 */
ol,ul{padding-left:1.4em;margin:0 0 14px}
li{margin:6px 0}

/* 首頁 */
.home-cards{display:flex;flex-direction:column;gap:14px;margin-top:20px}
a.home-card{
  display:block;background:var(--card);border:2px solid var(--accent);border-radius:14px;
  padding:18px 20px;text-decoration:none;color:var(--ink);
}
a.home-card:hover,a.home-card:focus-visible{background:var(--accent-soft)}
a.home-card .tag{color:var(--accent-ink);font-weight:700;font-size:14px}
a.home-card h2{margin:6px 0 0}
.home-card.disabled{
  border-color:var(--line);color:var(--muted);pointer-events:none;
  background:var(--soft);
}
.home-card.disabled .tag{color:var(--muted)}
footer.sitefoot{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--muted);font-size:15px}
footer.sitefoot a{color:var(--accent-ink)}

/* var 佔位（尚未填帳號/信箱） */
.var{border-radius:4px;padding:0 2px}
.var.empty{background:var(--warn-soft);color:var(--warn)}
.var.filled{background:none}

/* 手機：375px 不橫向捲動，表格與程式碼各自 overflow-x:auto（上面已處理） */
@media (max-width:480px){
  .wrap{padding:0 14px}
  section.card{margin-left:10px;margin-right:10px;padding:18px 14px}
  h1{font-size:26px}
}

/* 列印：隱藏複製鈕與導覽、details 全展開 */
@media print{
  nav.stepnav{display:none}
  button.copybtn{display:none}
  .codebox-head{display:none}
  details.hint{border:none;background:none}
  details.hint summary{list-style:none}
  details.hint[open] summary{border-bottom:none}
  a.home-card{border:1px solid #000}
}