/* BM4345 Study Hub — one design system, reused everywhere */

:root{
  --bg:#faf9f7; --card:#ffffff; --sunk:#f4f2ee;
  --ink:#1a1a1a; --mid:#57524c; --mute:#8a837b;
  --rule:#e3ded7; --rule2:#d3ccc2;
  --hot:#a8321f; --ok:#2f6b4f; --warn:#8a6a1f;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px; --s7:56px;
  --r:4px;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  padding:0 var(--s4) var(--s7);
}
.wrap{max-width:var(--maxw); margin:0 auto}
.narrow{max-width:780px}

/* ---------- masthead + nav ---------- */
.mast{padding:var(--s5) 0 var(--s3); border-bottom:2px solid var(--ink); margin-bottom:var(--s5)}
.mast h1{font-size:26px; line-height:1.1; letter-spacing:-.02em; font-weight:650}
.mast .sub{color:var(--mute); font-size:13px; margin-top:var(--s1)}
.mast .sub b{color:var(--hot); font-weight:650}

nav.tabs{display:flex; flex-wrap:wrap; gap:var(--s1); margin-top:var(--s4)}
nav.tabs a{
  font-size:13px; text-decoration:none; color:var(--mid);
  padding:6px 11px; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--card); white-space:nowrap;
}
nav.tabs a:hover{border-color:var(--rule2); color:var(--ink)}
nav.tabs a[aria-current="page"]{background:var(--ink); color:#f6f4f1; border-color:var(--ink)}

/* ---------- generic blocks ---------- */
h2{font-size:20px; font-weight:650; margin:var(--s6) 0 var(--s3); letter-spacing:-.01em}
h2:first-child{margin-top:0}
h3{font-size:15px; font-weight:650; margin:var(--s4) 0 var(--s2)}
p{margin:var(--s3) 0; color:var(--mid)}
p.lead{color:var(--ink); font-size:16px}
a{color:var(--hot)}

.eyebrow{font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mute); font-weight:650; margin-bottom:var(--s2)}

.card{background:var(--card); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s4)}
.grid{display:grid; gap:var(--s4)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.g2,.g3{grid-template-columns:1fr}}

pre, .pre{
  font-family:var(--mono); font-size:12.5px; line-height:1.7;
  white-space:pre-wrap; overflow-x:auto;
  background:var(--sunk); border-radius:var(--r); padding:var(--s3);
  margin:var(--s2) 0; color:var(--ink);
}
code{font-family:var(--mono); font-size:.92em; background:var(--sunk); padding:1px 4px; border-radius:3px}
.script{border-left:3px solid var(--ink); border-radius:0 var(--r) var(--r) 0; background:var(--card);
  border-top:1px solid var(--rule); border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)}

.hot{color:var(--hot); font-weight:650}
.ok{color:var(--ok); font-weight:650}
.note{font-size:13px; color:var(--mute); border-left:2px solid var(--rule); padding-left:var(--s3); margin:var(--s3) 0}
.rule{height:1px; background:var(--rule); margin:var(--s4) 0}

table{width:100%; border-collapse:collapse; font-size:14px; margin:var(--s3) 0}
th{text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute);
  font-weight:650; padding:0 var(--s3) var(--s2) 0; border-bottom:1px solid var(--ink)}
td{padding:var(--s2) var(--s3) var(--s2) 0; border-bottom:1px solid var(--rule); vertical-align:top}
tr:last-child td{border-bottom:none}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:650}

ul,ol{padding-left:1.2em; margin:var(--s3) 0; color:var(--mid)}
li{margin-bottom:var(--s2)}

/* ---------- buttons ---------- */
button, .btn{
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  background:var(--card); color:var(--ink); border:1px solid var(--rule2);
  border-radius:var(--r); padding:8px 15px; text-decoration:none; display:inline-block;
}
button:hover, .btn:hover{border-color:var(--ink)}
button:disabled{opacity:.4; cursor:default; border-color:var(--rule)}
.btn-primary{background:var(--ink); color:#f6f4f1; border-color:var(--ink)}
.btn-primary:hover{background:#000}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s3) 0}
.btn-sm{font-size:12.5px; padding:5px 10px}

/* ---------- day plan ---------- */
.day{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r);
  padding:var(--s4); display:grid; grid-template-columns:64px 1fr auto; gap:var(--s4);
  align-items:start; margin-bottom:var(--s3);
}
.day.today{border-color:var(--ink); border-width:2px; padding:15px}
.day.done{opacity:.62}
.day.exam{background:var(--ink); color:#f6f4f1; border-color:var(--ink)}
.day.exam .dnum, .day.exam .dmeta{color:#a49c92}
.day.exam h3{color:#f6f4f1}
.day.exam .chk{color:#d8d1c8; border-bottom-color:#3a352f}
.day.exam .chk.on{color:#8d867c}
.day.exam .chk input{accent-color:#f6f4f1}
.day.exam .badge{background:#332e29; color:#a49c92}
.dnum{font-family:var(--mono); font-size:12px; color:var(--mute); line-height:1.35; padding-top:2px}
.dnum b{display:block; font-size:17px; color:var(--ink); font-weight:650}
.day.exam .dnum b{color:#f6f4f1}
.day.today .dnum b{color:var(--hot)}
.dbody h3{margin:0 0 var(--s1)}
.dmeta{font-size:12px; color:var(--mute); margin-bottom:var(--s2)}
.dbody ul{margin:var(--s2) 0 0; font-size:13.5px}
.dbody li{margin-bottom:5px}
.dact{text-align:right; white-space:nowrap}
.badge{display:inline-block; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  font-weight:650; padding:3px 8px; border-radius:99px; background:var(--sunk); color:var(--mute)}
.badge.now{background:var(--hot); color:#fff}
.badge.ok{background:#e4efe8; color:var(--ok)}
@media(max-width:700px){
  .day{grid-template-columns:1fr; gap:var(--s2)}
  .dact{text-align:left}
}

/* ---------- progress ---------- */
.bar{height:6px; background:var(--rule); border-radius:99px; overflow:hidden; margin:var(--s2) 0}
.bar i{display:block; height:100%; background:var(--ink); border-radius:99px; transition:width .3s}
.stat{font-family:var(--mono); font-size:26px; font-weight:650; font-variant-numeric:tabular-nums}
.statlab{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--mute); font-weight:650}

/* ---------- quiz ---------- */
.qcard{background:var(--card); border:1px solid var(--rule); border-radius:var(--r); padding:var(--s5)}
.qtext{font-size:17px; line-height:1.45; margin-bottom:var(--s4); color:var(--ink)}
.opts{display:grid; gap:var(--s2)}
.opt{
  display:flex; gap:var(--s3); align-items:flex-start; text-align:left; width:100%;
  padding:var(--s3); border:1px solid var(--rule); border-radius:var(--r);
  background:var(--card); font-size:14.5px; font-weight:400; line-height:1.45; color:var(--ink);
}
.opt:hover:not(:disabled){border-color:var(--ink); background:var(--sunk)}
.opt .let{font-family:var(--mono); font-weight:650; color:var(--mute); flex:0 0 auto}
.opt.right{border-color:var(--ok); background:#eef5f0}
.opt.right .let{color:var(--ok)}
.opt.wrong{border-color:var(--hot); background:#fbefec}
.opt.wrong .let{color:var(--hot)}
.opt.reveal{border-color:var(--ok)}
.why{margin-top:var(--s4); padding:var(--s3); background:var(--sunk); border-radius:var(--r); font-size:14px; color:var(--mid)}
.why b{color:var(--ink)}
.qmeta{display:flex; justify-content:space-between; align-items:center; font-size:12px;
  color:var(--mute); margin-bottom:var(--s3); font-family:var(--mono)}

/* ---------- accordion (tutorials / papers) ---------- */
details{background:var(--card); border:1px solid var(--rule); border-radius:var(--r); margin-bottom:var(--s2)}
details[open]{border-color:var(--rule2)}
summary{padding:var(--s3) var(--s4); cursor:pointer; font-weight:600; font-size:14.5px; list-style:none;
  display:flex; gap:var(--s3); align-items:baseline}
summary::-webkit-details-marker{display:none}
summary:hover{background:var(--sunk)}
summary .tag{font-family:var(--mono); font-size:11.5px; color:var(--mute); flex:0 0 auto; min-width:52px}
summary .mk{margin-left:auto; font-size:11.5px; color:var(--mute); font-family:var(--mono); flex:0 0 auto}
.dbox{padding:0 var(--s4) var(--s4)}

/* ---------- filter chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:var(--s3) 0}
.chip{font-size:12.5px; padding:5px 11px; border:1px solid var(--rule); border-radius:99px;
  background:var(--card); cursor:pointer; font-weight:600; color:var(--mid)}
.chip[aria-pressed="true"]{background:var(--ink); color:#f6f4f1; border-color:var(--ink)}

/* ---------- player ---------- */
.stage{
  background:var(--ink); color:#f4f1ec; border-radius:var(--r); padding:var(--s6) var(--s5);
  min-height:340px; display:flex; flex-direction:column; justify-content:center;
}
.stage .kicker{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9d958b; font-weight:650; margin-bottom:var(--s3)}
.stage h3{font-size:24px; color:#fff; margin:0 0 var(--s3); font-weight:650; line-height:1.2}
.stage p{color:#ded8d0; font-size:15.5px; margin:var(--s2) 0}
.stage .big{font-family:var(--mono); font-size:38px; color:#fff; font-weight:650; margin:var(--s3) 0}
.stage pre{background:#2b2723; color:#f0ede8; border:none; font-size:13px}
.stage .hot{color:#e8836e}
.stage table{color:#ded8d0}
.stage th{color:#9d958b; border-bottom-color:#3a352f}
.stage td{border-bottom-color:#3a352f}
.stage .num{color:#fff}

.keys{display:flex; flex-wrap:wrap; gap:6px; margin:var(--s3) 0}
.key{font-family:var(--mono); font-size:13px; padding:7px 11px; border-radius:var(--r);
  background:#332e29; color:#cfc8bf; border:1px solid #45403a}
.key.lit{background:#f4f1ec; color:#1a1a1a; border-color:#f4f1ec; font-weight:650}
.readout{font-family:var(--mono); font-size:15px; background:#0f0d0b; color:#8ee08e;
  padding:var(--s3); border-radius:var(--r); margin-top:var(--s3); min-height:46px;
  display:flex; align-items:center; justify-content:flex-end; letter-spacing:.02em}

.ctrl{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s4); flex-wrap:wrap}
.dots{display:flex; gap:5px; flex-wrap:wrap; margin-left:auto}
.dot{width:8px; height:8px; border-radius:99px; background:var(--rule2); border:none; padding:0; cursor:pointer}
.dot[aria-current="true"]{background:var(--ink); transform:scale(1.35)}

/* ---------- checkbox list ---------- */
.chk{display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s2) 0;
  border-bottom:1px solid var(--rule); font-size:14px; color:var(--mid); cursor:pointer}
.chk:last-child{border-bottom:none}
.chk input{margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color:#1a1a1a; cursor:pointer}
.chk.on{color:var(--mute); text-decoration:line-through}

footer{margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--rule);
  font-size:12.5px; color:var(--mute)}
footer a{color:var(--mute)}

.hide{display:none !important}
@media print{ nav.tabs,.btn-row,footer{display:none} body{padding:0} }