/* ============================================================
   115 代數學 · 11/05 考前總複習
   Academic lecture-note theme on top of html-ppt base.css
   ============================================================ */

:root{
  --bg:#f8f5ed;
  --bg-soft:#f1ecdf;
  --surface:#fffdf8;
  --surface-2:#f3eee2;
  --border:rgba(28,38,56,.14);
  --border-strong:rgba(28,38,56,.30);
  --text-1:#16202e;
  --text-2:#46505f;
  --text-3:#7c8492;
  --accent:#1f3a63;
  --accent-2:#a33a3a;
  --accent-3:#2f6b4f;
  --good:#2f6b4f;
  --warn:#9a6a19;
  --bad:#a33a3a;
  --grad:linear-gradient(135deg,#1f3a63,#4d6b96);
  --grad-soft:linear-gradient(135deg,#e9edf5,#f4efe4);
  --radius:5px;
  --radius-sm:3px;
  --radius-lg:8px;
  --shadow:none;
  --shadow-lg:0 2px 0 rgba(28,38,56,.08);
  --font-sans:'Inter','Noto Sans SC','PingFang TC','Helvetica Neue',sans-serif;
  --font-serif:'Noto Serif SC','Songti SC','STSong',Georgia,serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono',Menlo,monospace;
  --font-display:var(--font-serif);
  --letter-tight:-.01em;
  --letter-normal:0;
}

html,body{background:var(--bg)}
body{
  background:
    radial-gradient(circle at 12% 8%, rgba(31,58,99,.045), transparent 42%),
    radial-gradient(circle at 92% 88%, rgba(163,58,58,.035), transparent 38%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(31,58,99,.028) 31px 32px),
    var(--bg);
}
.deck{background:transparent}

/* ---------- MathJax: undo base.css svg{display:block} ---------- */
mjx-container{
  display:inline-block !important;
  max-width:100%;
  vertical-align:middle;
}
mjx-container svg{
  display:inline-block !important;
  max-width:none !important;
}

/* ---------- slide frame ---------- */
.slide{
  padding:48px 64px 58px;
  justify-content:flex-start;
  background:transparent;
}
.slide::before{
  content:"";
  position:absolute;
  top:22px; left:64px; right:64px;
  height:1px;
  background:linear-gradient(90deg,var(--border-strong),transparent 70%);
  pointer-events:none;
}
.slide.cover::before{display:none}
.slide.center{justify-content:center}

/* ---------- typography ---------- */
.h1,h1.title{
  font-family:var(--font-serif);
  font-size:62px;
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 14px;
  color:var(--text-1);
}
.h2,h2.title{
  font-family:var(--font-serif);
  font-size:40px;
  line-height:1.18;
  font-weight:700;
  letter-spacing:-.015em;
  margin:0 0 10px;
  color:var(--text-1);
}
.h3{font-size:25px;line-height:1.3;font-weight:700;margin:0 0 8px}
h4,.h4{font-size:18px;line-height:1.35;font-weight:700;margin:0 0 6px}
p{margin:0 0 10px}
.lede{font-size:18px;line-height:1.65;color:var(--text-2);max-width:66ch;font-weight:400}
.kicker{
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
}
.dim{color:var(--text-2)}
.dim2{color:var(--text-3)}
.small{font-size:14px;line-height:1.55;color:var(--text-2)}
.tiny{font-size:12px;line-height:1.45;color:var(--text-3)}
.mono{font-family:var(--font-mono)}
.accent{color:var(--accent-2)}
.navy{color:var(--accent)}
.green{color:var(--good)}
.center-text{text-align:center}

/* ---------- split layout ---------- */
.slide.split{
  display:grid;
  grid-template-columns:196px minmax(0,1fr);
  gap:36px;
  align-content:start;
  padding-top:54px;
}
.rail{
  border-right:1px solid var(--border);
  padding-right:22px;
  min-height:100%;
}
.rail .unit{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--accent-2);
  text-transform:uppercase;
}
.rail .num{
  font-family:var(--font-serif);
  font-size:56px;
  line-height:1;
  color:var(--accent);
  margin:4px 0 10px;
}
.rail h3{
  font-size:17px;
  line-height:1.4;
  margin:0 0 12px;
  color:var(--text-1);
}
.rail .rail-note{
  font-size:12px;
  line-height:1.55;
  color:var(--text-3);
  border-top:1px solid var(--border);
  padding-top:10px;
  margin-top:14px;
}
.rail .rail-list{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--text-2);
}
.rail .rail-list li{padding:5px 0;border-bottom:1px dotted var(--border)}
.rail .rail-list li.on{color:var(--accent);font-weight:700}
.main{min-width:0}

/* ---------- cover ---------- */
.slide.cover{
  justify-content:center;
  padding:72px 80px;
  overflow:hidden;
}
.slide.cover .watermark{
  position:absolute;
  right:48px;
  top:20px;
  font-family:var(--font-serif);
  font-size:260px;
  line-height:1;
  color:rgba(31,58,99,.055);
  letter-spacing:-.06em;
  pointer-events:none;
  user-select:none;
}
.slide.cover .h1{font-size:74px;max-width:12ch}
.slide.cover .lede{font-size:20px;max-width:52ch}
.slide.cover .rule{
  width:84px;height:3px;background:var(--accent-2);margin:22px 0 20px;
}
.slide.cover .meta{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;
}

/* ---------- tags, chips ---------- */
.tag{
  display:inline-block;
  padding:5px 11px;
  border:1px solid var(--border-strong);
  background:var(--surface);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-2);
  border-radius:2px;
}
.tag.red{border-color:rgba(163,58,58,.45);color:var(--accent-2);background:rgba(163,58,58,.04)}
.tag.navy{border-color:rgba(31,58,99,.4);color:var(--accent);background:rgba(31,58,99,.04)}
.tag.green{border-color:rgba(47,107,79,.4);color:var(--good);background:rgba(47,107,79,.04)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-block;padding:4px 9px;
  background:var(--surface-2);border:1px solid var(--border);
  font-size:12.5px;color:var(--text-2);border-radius:2px;
}
.chip b{color:var(--accent);font-weight:700}

/* ---------- cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:17px 19px;
  box-shadow:none;
}
.card h4{color:var(--accent);margin-bottom:5px}
.card p:last-child{margin-bottom:0}
.card.red{border-top:3px solid var(--accent-2)}
.card.green{border-top:3px solid var(--accent-3)}
.card.navy{border-top:3px solid var(--accent)}
.card.soft{background:var(--surface-2)}
.card .label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:5px;
}
.card .big-num{
  font-family:var(--font-serif);font-size:34px;line-height:1;color:var(--accent);
}

/* ---------- formula blocks ---------- */
.formula{
  background:var(--surface);
  border-left:3px solid var(--accent);
  padding:11px 15px;
  margin:10px 0;
  font-size:18px;
  line-height:1.55;
  color:var(--text-1);
}
.formula.center{text-align:center}
.formula.big{font-size:23px;padding:14px 18px}
.formula.red{border-left-color:var(--accent-2);background:rgba(163,58,58,.035)}
.formula.green{border-left-color:var(--accent-3);background:rgba(47,107,79,.035)}
.formula .why{display:block;font-size:12.5px;color:var(--text-3);margin-top:4px;font-family:var(--font-sans)}

/* ---------- callouts ---------- */
.trap,.okbox,.note{
  padding:12px 16px;
  margin:10px 0;
  font-size:15px;
  line-height:1.6;
  border-radius:2px;
}
.trap{background:rgba(163,58,58,.055);border-left:3px solid var(--accent-2);color:var(--text-1)}
.trap b{color:var(--accent-2)}
.okbox{background:rgba(47,107,79,.055);border-left:3px solid var(--accent-3);color:var(--text-1)}
.okbox b{color:var(--good)}
.note{background:var(--surface-2);border-left:3px solid var(--border-strong);color:var(--text-2)}

/* ---------- tables ---------- */
.table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.45}
.table th{
  text-align:left;font-family:var(--font-sans);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);font-weight:700;
  border-bottom:1px solid var(--border-strong);padding:7px 9px;
}
.table td{border-bottom:1px solid var(--border);padding:7px 9px;vertical-align:top;color:var(--text-2)}
.table tr:last-child td{border-bottom:none}
.table td b{color:var(--text-1)}
.table .em{color:var(--accent-2);font-weight:700}
.table.compact td,.table.compact th{padding:3px 6px;font-size:11.5px;line-height:1.35}

/* ---------- unit agenda cards ---------- */
.agenda{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.agenda .card{padding:14px 13px;min-height:146px}
.agenda .n{
  font-family:var(--font-serif);font-size:30px;line-height:1;color:var(--accent);
  margin-bottom:8px;
}
.agenda h4{font-size:14px;line-height:1.35;margin-bottom:4px}
.agenda p{font-size:11.5px;line-height:1.45;color:var(--text-2);margin:0}
.agenda .card.skip{opacity:.55;border-style:dashed}

/* ---------- two-column helpers ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.cols.wide-left{grid-template-columns:1.25fr .75fr}
.cols.wide-right{grid-template-columns:0.8fr 1.2fr}
.stack-sm > * + *{margin-top:8px}
.stack-md > * + *{margin-top:13px}
.mt-s{margin-top:8px}.mt-m{margin-top:14px}.mt-l{margin-top:20px}.mt-xl{margin-top:28px}

/* ---------- section number / rule ---------- */
.divider{height:1px;background:var(--border);margin:14px 0}
.divider-strong{height:2px;background:var(--accent);width:44px;margin:10px 0 14px}

/* ---------- Cayley SVG ---------- */
.cayley-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}
.cayley-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.cayley-fig{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px 6px;text-align:center}
.cayley-fig .cayley{max-height:190px;margin:0 auto}
.cayley-fig figcaption{font-size:11.5px;color:var(--text-2);margin-top:2px}
.cayley{width:100%;height:auto;max-height:250px}
.cayley .edge{stroke:var(--accent);stroke-width:1.5;fill:none}
.cayley .edge2{stroke:var(--accent-3);stroke-width:1.8;fill:none}
.cayley .node{fill:var(--surface);stroke:var(--accent);stroke-width:1.5}
.cayley .node2{fill:var(--surface);stroke:var(--accent-3);stroke-width:1.5}
.cayley .lbl{font-family:var(--font-mono);font-size:13px;fill:var(--text-1)}
.cayley .cap{font-family:var(--font-sans);font-size:10px;fill:var(--text-3);letter-spacing:.08em}

/* ---------- A4 link ---------- */
.btn-link{
  display:inline-block;
  margin-top:10px;
  margin-right:8px;
  padding:7px 13px;
  border:1px solid var(--accent);
  color:var(--accent);
  background:var(--surface);
  font-family:var(--font-mono);
  font-size:12px;
  text-decoration:none;
}
.btn-link:hover{background:var(--accent);color:#fff;text-decoration:none}

/* ---------- A4 mock ---------- */
.a4{
  background:#fffef9;
  border:1px solid var(--border-strong);
  box-shadow:5px 5px 0 rgba(28,38,56,.07);
  padding:16px 18px;
  font-size:11.5px;
  line-height:1.45;
  color:var(--text-2);
  position:relative;
}
.a4 .a4-title{
  font-family:var(--font-serif);font-size:15px;color:var(--accent);
  border-bottom:1px solid var(--border-strong);padding-bottom:5px;margin-bottom:8px;
}
.a4 .a4-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.a4 b{color:var(--text-1)}
.a4 .red{color:var(--accent-2)}

/* ---------- self-check ---------- */
.qlist{counter-reset:q;list-style:none;padding:0;margin:0}
.qlist li{
  counter-increment:q;
  position:relative;
  padding:7px 0 7px 28px;
  border-bottom:1px dotted var(--border);
  font-size:14.5px;
  line-height:1.45;
  color:var(--text-2);
}
.qlist li::before{
  content:counter(q,decimal-leading-zero);
  position:absolute;left:0;top:7px;
  font-family:var(--font-mono);font-size:11px;color:var(--accent-2);
}

/* ---------- footer / progress ---------- */
.deck-footer{
  left:64px;right:64px;bottom:20px;
  font-size:11px;color:var(--text-3);
  font-family:var(--font-mono);
}
.slide-number{font-family:var(--font-mono);color:var(--text-3)}
.progress-bar{height:2px}
.progress-bar > span{background:var(--accent-2)}

/* ---------- notes hidden ---------- */
.notes{display:none!important}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .slide{padding:36px 40px 52px}
  .slide.split{grid-template-columns:160px minmax(0,1fr);gap:24px}
  .slide.cover{padding:52px}
  .h1{font-size:50px}.slide.cover .h1{font-size:56px}
  .h2{font-size:33px}
  .agenda{grid-template-columns:repeat(3,1fr)}
  .deck-footer{left:40px;right:40px}
}