/* ==========================================================================
   SaltsR 課程網站  —  共用樣式
   設計語彙沿用 tai-shengyeh.github.io：奶油紙底、teal 主色、coral/gold 輔色
   ========================================================================== */


:root{
  --paper:#FFFFFF;
  --paper2:#F5F2E9;
  --paper3:#FAF8F2;
  --ink:#1A1A1A;
  --ink-soft:#52493B;
  --ink-faint:#8A8070;
  --teal:#0E7C7B;
  --teal-dark:#0A5E5D;
  --cover:#119C9A;
  --coral:#E36414;
  --gold:#C8941F;
  --plum:#6A3D8F;
  --blue:#3D7EA6;
  --line:#E4DECC;
  --line-soft:#EFEBDD;
  --nav:#232323;
  --radius:16px;
  --shadow:0 1px 2px rgba(26,26,26,.05), 0 8px 24px -12px rgba(26,26,26,.18);
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:72px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Noto Sans TC', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:400; font-size:17px; line-height:1.85;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%; height:auto}
a{color:var(--teal); text-underline-offset:3px}
a:hover{color:var(--coral)}

/* ---------- 版面容器 ---------- */
.wrap{max-width:1120px; margin:0 auto; padding:0 22px}
.wrap-narrow{max-width:860px; margin:0 auto; padding:0 22px}

/* ---------- 導覽列 ---------- */
.nav{
  position:sticky; top:0; z-index:60; background:var(--nav);
  border-bottom:1px solid #000;
}
.nav .wrap{display:flex; align-items:center; gap:8px; min-height:56px; flex-wrap:wrap}
.nav .brand{
  color:#fff; font-weight:900; letter-spacing:.02em; margin-right:auto;
  text-decoration:none; font-size:1.02rem; display:flex; align-items:center; gap:9px;
}
.nav .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none}
.nav a.nlink{
  color:#D9D4C6; text-decoration:none; font-size:.9rem; font-weight:500;
  padding:6px 11px; border-radius:999px; white-space:nowrap;
}
.nav a.nlink:hover{background:#333; color:#fff}
.nav a.nlink.active{background:var(--teal); color:#fff}

/* ---------- Hero ---------- */
.hero{background:var(--cover); color:#fff; padding:52px 0 46px; position:relative; overflow:hidden}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, transparent 1px 44px);
}
.hero .wrap{position:relative; z-index:1}
.hero .kicker{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#FFE9C9; margin:0 0 10px;
}
.hero h1{font-size:clamp(1.9rem, 4.6vw, 3rem); line-height:1.22; margin:0 0 12px; font-weight:900}
.hero p.lead{font-size:1.06rem; max-width:56ch; margin:0 0 24px; color:#EAF7F6}
.hero .stats{display:flex; gap:34px; flex-wrap:wrap; margin-top:26px}
.hero .stats b{display:block; font-size:1.65rem; font-weight:900; line-height:1.2}
.hero .stats span{font-size:.82rem; color:#D3EFEE; letter-spacing:.04em}

/* ---------- 區段 ---------- */
section{padding:46px 0}
.sec-head{margin:0 0 22px}
.kicker{
  font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--coral); margin:0 0 6px;
}
h2{font-size:clamp(1.35rem,2.6vw,1.85rem); font-weight:900; margin:0 0 10px; line-height:1.35}
h3{font-size:1.16rem; font-weight:700; margin:1.9em 0 .5em; line-height:1.45}
h4{font-size:1.02rem; font-weight:700; margin:1.5em 0 .4em; color:var(--ink-soft)}
p{margin:0 0 1.05em}
.muted{color:var(--ink-soft)}
.small{font-size:.9rem}
.tiny{font-size:.82rem}

/* ---------- 卡片 ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:18px}
.card{
  background:var(--paper2); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 20px 17px; display:flex; flex-direction:column; gap:9px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  position:relative; overflow:hidden;
}
.card::before{content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--teal); opacity:0}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#D6CFB8}
.card:hover::before{opacity:1}
.card.c-teal::before{background:var(--teal)}
.card.c-coral::before{background:var(--coral)}
.card.c-gold::before{background:var(--gold)}
.card.c-plum::before{background:var(--plum)}
.card h3{margin:0; font-size:1.08rem; line-height:1.45}
.card p{margin:0; font-size:.93rem; color:var(--ink-soft); line-height:1.7}
.tag{
  align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  padding:3px 11px; border-radius:999px; background:var(--teal); color:#fff;
}
.tag.t-coral{background:var(--coral)} .tag.t-gold{background:var(--gold); color:#3B2C05}
.tag.t-plum{background:var(--plum)} .tag.t-grey{background:#7A7365}
.links{display:flex; gap:9px; flex-wrap:wrap; margin-top:auto; padding-top:11px}
.go,.repo{
  font-size:.85rem; font-weight:700; text-decoration:none; padding:7px 14px; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
.go{background:var(--teal); color:#fff}
.go:hover{background:var(--teal-dark); color:#fff}
.repo{background:transparent; color:var(--ink-soft); border-color:var(--line)}
.repo:hover{background:#fff; color:var(--ink)}

/* ---------- 程式碼 ---------- */
code{
  font-family:var(--mono); font-size:.88em; background:#EFEBDD;
  padding:.12em .42em; border-radius:5px; color:#0B4E4D;
}
pre{
  background:#1F2329; color:#E8E6E1; border-radius:12px; padding:16px 18px;
  overflow:auto; font-family:var(--mono); font-size:.86rem; line-height:1.68;
  margin:1.1em 0; border:1px solid #11141A;
}
pre code{background:none; color:inherit; padding:0; font-size:1em}

/* ---------- WebR 執行區塊 ---------- */
.runner{
  border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:1.4em 0;
  background:#1F2329;
}
.runner-bar{
  display:flex; align-items:center; gap:9px; padding:8px 12px;
  background:#171A1F; border-bottom:1px solid #2C3239; flex-wrap:wrap;
}
.runner-bar .rtitle{
  color:#9AA4AF; font-size:.78rem; font-family:var(--mono); margin-right:auto;
  display:flex; align-items:center; gap:7px;
}
.runner-bar .rtitle::before{
  content:'R'; background:#276DC3; color:#fff; font-weight:700; font-size:.68rem;
  padding:1px 6px; border-radius:4px; font-family:var(--mono);
}
.btn{
  font-family:'Noto Sans TC',sans-serif; font-size:.82rem; font-weight:700; cursor:pointer;
  border:none; border-radius:999px; padding:6px 15px; transition:filter .15s;
}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.45; cursor:not-allowed; filter:none}
.btn-run{background:#1F7A4D; color:#fff}
.btn-ghost{background:#2C3239; color:#C6CDD5}
.btn-teal{background:var(--teal); color:#fff}
.btn-coral{background:var(--coral); color:#fff}
.runner textarea{
  display:block; width:100%; border:none; outline:none; resize:vertical;
  background:#1F2329; color:#E8E6E1; font-family:var(--mono); font-size:.86rem;
  line-height:1.68; padding:14px 16px; min-height:80px; tab-size:2;
}
.runner-out{
  border-top:1px solid #2C3239; background:#14171B; color:#C9D1D9;
  font-family:var(--mono); font-size:.83rem; line-height:1.6;
  padding:12px 16px; white-space:pre-wrap; word-break:break-word; max-height:460px; overflow:auto;
}
.runner-out:empty{display:none}
.runner-out .err{color:#FF8A7A}
.runner-out .warn{color:#F0C674}
.runner-out .ok{color:#8BD5A0}
.runner-plot{border-top:1px solid #2C3239; background:#fff; padding:10px; text-align:center}
.runner-plot canvas{max-width:100%; height:auto; border-radius:6px}

#webr-status{
  position:fixed; right:14px; bottom:14px; z-index:200;
  background:var(--nav); color:#D9D4C6; font-size:.78rem; font-family:var(--mono);
  padding:8px 14px; border-radius:999px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:8px; max-width:min(92vw,420px);
}
#webr-status.ready{background:#1F7A4D; color:#fff}
#webr-status.err{background:#B3402C; color:#fff; border-radius:12px; align-items:flex-start}
#webr-status.err span{white-space:pre-wrap; line-height:1.5}

/* 載入失敗時的說明卡（例如用 file:// 直接開啟網頁） */
#webr-help{
  position:fixed; right:14px; bottom:64px; z-index:201;
  max-width:min(94vw,480px); background:#fff; color:var(--ink);
  border:1px solid #E3DCCB; border-top:4px solid #B3402C;
  border-radius:12px; box-shadow:var(--shadow); padding:16px 18px 14px;
  font-size:.88rem; line-height:1.65;
}
#webr-help h4{margin:0 0 6px; font-size:.98rem; color:#B3402C}
#webr-help p{margin:.5em 0}
#webr-help ol{margin:.5em 0 .2em; padding-left:1.3em}
#webr-help li{margin-bottom:.35em}
#webr-help code{
  font-family:var(--mono); font-size:.84em; background:var(--paper3);
  padding:1px 5px; border-radius:4px; word-break:break-all;
}
#webr-help .x{
  position:absolute; top:8px; right:10px; cursor:pointer; border:0; background:none;
  font-size:1.1rem; line-height:1; color:#9A9384;
}
#webr-help .x:hover{color:var(--ink)}
#webr-status .spin{
  width:11px;height:11px;border-radius:50%;border:2px solid #6B6B6B;border-top-color:var(--gold);
  animation:spin .8s linear infinite; flex:none;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 提示方塊 ---------- */
.callout{
  border-left:4px solid var(--teal); background:var(--paper3);
  border-radius:0 12px 12px 0; padding:14px 18px; margin:1.3em 0;
}
.callout > :last-child{margin-bottom:0}
.callout .ct{font-weight:700; display:block; margin-bottom:4px; color:var(--teal)}
.callout.warn{border-left-color:var(--coral); background:#FFF6EF}
.callout.warn .ct{color:var(--coral)}
.callout.note{border-left-color:var(--gold); background:#FFFBF0}
.callout.note .ct{color:#8A6410}
.callout.task{border-left-color:var(--plum); background:#F8F4FC}
.callout.task .ct{color:var(--plum)}

/* ---------- 步驟 ---------- */
.steps{counter-reset:st; list-style:none; padding:0; margin:1.2em 0}
.steps li{counter-increment:st; position:relative; padding-left:44px; margin-bottom:1em}
.steps li::before{
  content:counter(st); position:absolute; left:0; top:2px;
  width:29px; height:29px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.86rem;
}

/* ---------- 表格 ---------- */
.tbl-wrap{overflow-x:auto; margin:1.2em 0}
table{border-collapse:collapse; width:100%; font-size:.9rem}
th,td{padding:8px 12px; text-align:left; border-bottom:1px solid var(--line)}
thead th{background:var(--teal); color:#fff; font-weight:700; white-space:nowrap}
tbody tr:nth-child(even){background:var(--paper3)}
td.num,th.num{text-align:right; font-family:var(--mono); font-size:.86rem}
td.hi{background:#FFF3D6; font-weight:700}

/* ---------- 折疊 ---------- */
details{
  border:1px solid var(--line); border-radius:12px; padding:0 16px;
  background:var(--paper3); margin:1.1em 0;
}
details[open]{padding-bottom:6px}
summary{
  cursor:pointer; font-weight:700; padding:12px 0; list-style:none;
  display:flex; align-items:center; gap:8px; color:var(--teal);
}
summary::-webkit-details-marker{display:none}
summary::before{content:'▸'; transition:transform .18s}
details[open] summary::before{transform:rotate(90deg)}

/* ---------- 單元 ---------- */
.unit{
  border-top:1px solid var(--line); padding-top:34px; margin-top:44px;
  scroll-margin-top:70px;
}
.unit:first-of-type{border-top:none; margin-top:0}
.unit > h2{border-bottom:3px solid var(--teal); display:inline-block; padding-bottom:5px}
.unit-badge{
  display:inline-block; font-family:var(--mono); font-size:.74rem; font-weight:600;
  letter-spacing:.1em; color:#fff; background:var(--teal); padding:2px 9px;
  border-radius:5px; margin-bottom:8px;
}
.u-coral .unit-badge{background:var(--coral)} .u-coral > h2{border-color:var(--coral)}
.u-gold  .unit-badge{background:var(--gold); color:#3B2C05} .u-gold > h2{border-color:var(--gold)}
.u-plum  .unit-badge{background:var(--plum)} .u-plum > h2{border-color:var(--plum)}

.toc{
  background:var(--paper2); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 22px; margin:0 0 32px;
}
.toc ol{margin:0; padding-left:1.25em; columns:2; column-gap:32px}
.toc li{margin:.28em 0; font-size:.93rem; break-inside:avoid}
@media (max-width:640px){ .toc ol{columns:1} }

/* ---------- 互動實驗室 ---------- */
.lab{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  margin:1.6em 0; background:var(--paper);
}
.lab-head{
  background:var(--nav); color:#fff; padding:13px 20px;
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
}
.lab-head h3{margin:0; font-size:1.02rem; color:#fff}
.lab-head .lb{
  font-family:var(--mono); font-size:.72rem; background:var(--gold); color:#3B2C05;
  padding:2px 8px; border-radius:5px; font-weight:700;
}
.lab-body{padding:20px}
.ctrl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px 20px}
.ctrl{display:flex; flex-direction:column; gap:3px}
.ctrl label{font-size:.84rem; font-weight:700; display:flex; justify-content:space-between; gap:8px}
.ctrl label .v{font-family:var(--mono); font-weight:600; color:var(--teal)}
.ctrl input[type=range]{width:100%; accent-color:var(--teal); margin:0}
.ctrl input[type=number]{
  font-family:var(--mono); font-size:.88rem; padding:5px 8px;
  border:1px solid var(--line); border-radius:7px; width:100%;
}
.ion-an label .v{color:var(--coral)} .ion-an input[type=range]{accent-color:var(--coral)}
.ion-ca label .v{color:var(--blue)}  .ion-ca input[type=range]{accent-color:var(--blue)}

.readout{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:11px; margin:16px 0}
.ro{background:var(--paper2); border:1px solid var(--line); border-radius:11px; padding:10px 13px}
.ro .k{font-size:.75rem; color:var(--ink-soft); letter-spacing:.03em}
.ro .v{font-family:var(--mono); font-size:1.16rem; font-weight:600; line-height:1.35}
.ro.good .v{color:var(--teal)} .ro.bad .v{color:var(--coral)} .ro.warnv .v{color:var(--gold)}

.balbar{display:flex; height:34px; border-radius:9px; overflow:hidden; border:1px solid var(--line); margin:6px 0 4px}
.balbar div{display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:.78rem; font-weight:700; min-width:0; overflow:hidden; white-space:nowrap;
  transition:width .28s ease}
.balbar .b-an{background:var(--coral)} .balbar .b-cat{background:var(--blue)}
.balbar .b-gap{background:repeating-linear-gradient(45deg,#8A8070 0 6px,#6E6659 6px 12px)}

.pathbadge{
  display:inline-block; font-weight:900; font-size:.94rem; padding:5px 15px;
  border-radius:999px; color:#fff;
}
.pathbadge.p1{background:var(--teal)} .pathbadge.p2{background:var(--coral)}

.chartbox{position:relative; height:340px; margin:14px 0}
.chartbox.tall{height:420px}

/* ---------- 測驗 ---------- */
.stage{border:1px solid var(--line); border-radius:var(--radius); margin:0 0 22px; overflow:hidden}
.stage-head{background:var(--paper2); padding:14px 20px; border-bottom:1px solid var(--line)}
.stage-head h3{margin:0; font-size:1.05rem}
.stage-head .sm{font-size:.85rem; color:var(--ink-soft); margin-top:2px}
.q{padding:17px 20px; border-bottom:1px solid var(--line-soft)}
.q:last-child{border-bottom:none}
.q .qn{font-family:var(--mono); font-size:.78rem; color:var(--ink-faint); font-weight:600}
.q .qt{font-weight:700; margin:3px 0 11px; line-height:1.65}
.opts{display:flex; flex-direction:column; gap:7px}
.opt{
  display:flex; gap:10px; align-items:flex-start; padding:9px 13px;
  border:1px solid var(--line); border-radius:10px; cursor:pointer;
  font-size:.93rem; line-height:1.6; background:#fff; transition:background .13s,border-color .13s;
}
.opt:hover{background:var(--paper3)}
.opt input{margin-top:5px; accent-color:var(--teal); flex:none}
.opt.correct{background:#E9F7EF; border-color:#1F7A4D}
.opt.wrong{background:#FDEDE9; border-color:var(--coral)}
.opt.disabled{cursor:default; opacity:.85}
.fb{margin-top:10px; font-size:.9rem; padding:10px 14px; border-radius:9px; line-height:1.7; display:none}
.fb.show{display:block}
.fb.ok{background:#E9F7EF; border-left:4px solid #1F7A4D}
.fb.no{background:#FDEDE9; border-left:4px solid var(--coral)}
.fb a{font-weight:700}

.scorebox{
  position:sticky; bottom:0; background:var(--nav); color:#fff; padding:13px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; z-index:50;
  border-top:2px solid var(--gold);
}
.scorebox .big{font-size:1.5rem; font-weight:900; font-family:var(--mono)}
.scorebox .lbl{font-size:.82rem; color:#C4BFB2}
.progbar{flex:1; min-width:130px; height:9px; background:#3A3A3A; border-radius:999px; overflow:hidden}
.progbar i{display:block; height:100%; background:var(--gold); width:0; transition:width .3s}
.stagebars{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; margin:16px 0}
.sb{background:var(--paper2); border:1px solid var(--line); border-radius:11px; padding:10px 13px}
.sb .n{font-size:.8rem; font-weight:700}
.sb .bar{height:7px; background:#E0DACA; border-radius:999px; margin-top:6px; overflow:hidden}
.sb .bar i{display:block; height:100%; background:var(--teal); width:0; transition:width .35s}

/* ---------- 頁尾 ---------- */
footer{background:var(--ink); color:#B8B2A4; padding:38px 0 30px; margin-top:56px; font-size:.9rem}
footer h4{color:var(--gold); margin:0 0 8px; font-size:.9rem; letter-spacing:.06em}
footer a{color:#D9D4C6}
footer a:hover{color:var(--gold)}
footer .fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:26px}
footer .fbot{border-top:1px solid #333; margin-top:24px; padding-top:16px; font-size:.83rem; color:#8A8478}

/* ---------- 雜項 ---------- */
.pill-row{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.pill{
  font-size:.8rem; padding:4px 12px; border-radius:999px;
  background:var(--paper2); border:1px solid var(--line); color:var(--ink-soft);
}
.eq{
  background:var(--paper3); border:1px solid var(--line); border-radius:11px;
  padding:14px 18px; margin:1.1em 0; overflow-x:auto; text-align:center;
}
.eq .lbl{font-size:.78rem; color:var(--ink-faint); text-align:left; margin-bottom:4px; font-family:var(--mono)}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media (max-width:760px){ .two-col{grid-template-columns:1fr} }
.backlink{font-size:.88rem; font-weight:700; text-decoration:none}
hr.sep{border:none; border-top:1px solid var(--line); margin:34px 0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}
@media print{
  .nav,#webr-status,#webr-help,.scorebox,.runner-bar{display:none}
  body{font-size:12pt}
}

/* ---------- 離線準備面板 ---------- */
#offline-panel{
  max-width:1120px; margin:0 auto 34px; padding:18px 20px 16px;
  border:1px solid var(--line); border-left:4px solid var(--teal);
  border-radius:0 12px 12px 0; background:var(--paper3);
}
#offline-panel .op-head{display:flex; align-items:center; gap:10px; margin-bottom:4px}
#offline-panel .op-head b{font-size:1rem}
#offline-panel .op-state{
  font-size:.8rem; font-family:var(--mono); color:var(--ink-faint);
  padding:2px 9px; border-radius:999px; background:var(--line-soft);
}
#offline-panel .op-state.ok{background:#DFF3E8; color:#14653F}
#offline-panel .op-state.warn{background:#FFF1DC; color:#8A5B10}
#offline-panel .op-desc{font-size:.9rem; color:var(--ink-soft); margin:.4em 0 .8em}
#offline-panel .op-bar{
  height:7px; border-radius:999px; background:var(--line-soft); overflow:hidden; margin-bottom:12px;
}
#offline-panel .op-bar i{
  display:block; height:100%; width:0; background:var(--teal);
  transition:width .25s ease; border-radius:999px;
}
#offline-panel .op-actions{display:flex; gap:9px; flex-wrap:wrap}
@media print{ #offline-panel{display:none} }