/* ==========================================================================
   AI and Machine Learning — shared course stylesheet
   Design tokens ported from the sjtu course pages, repalette to the Oxford
   navy / Worcester crimson pair used by the printed course outline.
   Palette: warm paper, Oxford navy accent, crimson secondary.
   Bricolage / Hanken / JetBrains.
   ========================================================================== */
:root{
  --paper:#f6f5f1;--paper-2:#edebe3;--paper-3:#e6e3da;
  --ink:#1a1a17;--ink-soft:#4e4a43;--ink-faint:#8b867b;
  --accent:#002147;--accent-strong:#001730;--accent-soft:#e7ecf2;--accent-hair:rgba(0,33,71,.4);
  --crimson:#9e1b30;--crimson-soft:#f8edef;--crimson-hair:rgba(158,27,48,.35);
  --line:rgba(26,26,23,.12);--line-strong:rgba(26,26,23,.2);
  --good:#2e7d54;--good-soft:#e4f0e9;
  --warn:#9a6a18;--warn-soft:#f5ecdb;
  --serif:'Bricolage Grotesque','Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Monaco,monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--sans);color:var(--ink);min-height:100vh;background-color:var(--paper);background:radial-gradient(circle 840px at 50% -16%, #ffffff 0%, transparent 52%),linear-gradient(180deg,#faf9f6 0%,var(--paper) 100%);-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---- shell ---- */
.page{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:1.6rem 1rem 1.6rem;gap:1.1rem}
.card{position:relative;width:min(100%,1020px);min-width:0;background:#fff;border:1px solid var(--line-strong);border-radius:5px;box-shadow:0 1px 2px rgba(26,26,23,.05),0 30px 64px rgba(26,26,23,.1);overflow:hidden}
.card::before{content:"";display:block;height:3px;background:var(--accent)}
.pg{max-width:none;margin:0;padding:2.2rem 2rem 1.9rem}
@media (max-width:760px){.pg{padding:1.35rem .95rem 1.25rem}}

/* ---- top navigation bar ---- */
.sitenav{position:sticky;top:.6rem;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(10px);border:1px solid var(--line-strong);box-shadow:0 1px 2px rgba(26,26,23,.05),0 12px 30px rgba(26,26,23,.07);width:min(100%,1020px);border-radius:6px}
.sitenav .nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.2rem}
.sitenav .brand{display:flex;flex-direction:column;line-height:1.05}
.sitenav .brand .code{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.sitenav .brand .name{font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.sitenav ul{list-style:none;display:flex;gap:.2rem;align-items:center}
.sitenav ul a{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);padding:.5rem .7rem;border-radius:4px;transition:background-color .15s,color .15s;white-space:nowrap}
.sitenav ul a:hover{color:var(--accent);background:var(--accent-soft)}
.sitenav ul a.active{color:var(--accent-strong);background:var(--accent-soft);font-weight:500}
@media (max-width:720px){
  .sitenav .nav-in{flex-direction:column;align-items:stretch;gap:.55rem;padding:.6rem .8rem}
  .sitenav ul{overflow-x:auto;-webkit-overflow-scrolling:touch;gap:.15rem;padding-bottom:.1rem}
  .sitenav ul::-webkit-scrollbar{height:0}
}

/* ---- headings / type ---- */
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.kicker::before{content:"";width:28px;height:1px;background:var(--accent)}
h1.page-title{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,4.2vw,3.15rem);line-height:1.04;letter-spacing:-.035em;color:var(--ink);font-variation-settings:'opsz' 72;hyphens:none;overflow-wrap:normal;word-break:normal;text-wrap:balance}
h1.page-title::before{content:"";display:block;width:34px;height:3px;background:var(--accent);border-radius:2px;margin-bottom:1rem}
h1.page-title em{font-style:normal;color:var(--accent);font-weight:700}
.lead{margin-top:1.05rem;font-family:var(--sans);font-size:1.16rem;line-height:1.6;color:var(--ink-soft);max-width:none;text-wrap:pretty}
.h2{font-family:var(--serif);font-weight:500;font-size:1.4rem;letter-spacing:-.01em;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--line-strong)}
.h2:first-of-type{margin-top:1.6rem}
.h2 em{font-style:normal;color:var(--accent);font-weight:500}
.h3{font-family:var(--serif);font-weight:500;font-size:1.12rem;letter-spacing:-.01em;margin:1.6rem 0 .7rem}
.prose p{font-family:var(--sans);font-size:1.04rem;line-height:1.72;color:var(--ink-soft);margin-bottom:1rem;max-width:none;font-variation-settings:'opsz' 18}
.prose p strong{color:var(--ink);font-weight:600}
.prose a,.inline-a{color:var(--accent);border-bottom:1px solid var(--accent-hair);transition:border-color .15s,color .15s}
.prose a:hover,.inline-a:hover{color:var(--accent-strong);border-bottom-color:var(--accent-strong)}
.muted{color:var(--ink-faint)}

/* ---- course meta strip ---- */
.course-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin:1.9rem 0 .4rem;padding:1.3rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:680px){.course-meta{grid-template-columns:repeat(2,1fr);gap:1rem}}
.course-meta .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.34rem;font-weight:500;display:block}
.course-meta .v{font-family:var(--serif);font-size:1rem;color:var(--ink);font-variation-settings:'opsz' 18;line-height:1.3}
.course-meta .v em{font-style:italic;color:var(--ink-soft)}

/* ---- learning outcomes ---- */
.lo{list-style:none;display:grid;gap:.7rem;margin:.2rem 0 0}
.lo li{position:relative;padding-left:1.5rem;font-size:1.02rem;line-height:1.6;color:var(--ink)}
.lo li::before{content:"";position:absolute;left:0;top:.56em;width:.5rem;height:.5rem;background:var(--accent);border-radius:1px}
.lo li em{font-style:italic;color:var(--ink-soft)}

/* ---- schedule / generic table ---- */
table.schedule{width:100%;border-collapse:collapse;margin:.6rem 0;font-family:var(--sans);font-size:.92rem}
table.schedule th{text-align:left;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;padding:.7rem .8rem;border-bottom:1px solid var(--line-strong)}
table.schedule td{padding:.8rem .8rem;vertical-align:top;border-bottom:1px solid var(--line)}
table.schedule td.wk{font-family:var(--mono);font-size:.74rem;color:var(--accent);white-space:nowrap;width:104px}
table.schedule td.topic{font-family:var(--serif);font-size:1rem;font-weight:500;color:var(--ink);font-variation-settings:'opsz' 18}
table.schedule td.focus{color:var(--ink-soft);font-size:.84rem;line-height:1.5;font-family:var(--mono);white-space:nowrap}
table.schedule tr.band td{background:var(--paper-2);font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-strong);font-weight:500;padding:.55rem .8rem;border-bottom:1px solid var(--line-strong)}
table.schedule tr.assess td{background:var(--accent-soft)}
table.schedule tr.assess td.wk,table.schedule tr.assess td.topic{color:var(--accent-strong)}
table.schedule tr:hover td{background:color-mix(in srgb,var(--paper) 55%,white)}
table.schedule tr.assess:hover td{background:var(--accent-soft)}
table.schedule tr.band:hover td{background:var(--paper-2)}
@media (max-width:680px){table.schedule td.focus{white-space:normal}.hide-sm{display:none}}

/* ---- software pills ---- */
.pills{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0}
.pill{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-strong);background:var(--accent-soft);border:1px solid var(--accent-hair);border-radius:999px;padding:.28rem .65rem}

/* ---- resource grid (home hub) ---- */
.resource-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin:.4rem 0}
@media (max-width:620px){.resource-grid{grid-template-columns:1fr}}
.resource-card{display:flex;align-items:flex-start;gap:.95rem;padding:1.1rem 1.15rem;border:1px solid var(--line-strong);border-radius:5px;background:#fff;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.resource-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(26,26,23,.1);border-color:var(--accent-hair)}
.resource-card .ic{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:7px;background:var(--accent-soft);color:var(--accent);font-size:1rem}
.resource-card .rc-t{font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:center;gap:.4rem}
.resource-card .rc-t i{font-size:.72rem;color:var(--accent);transition:transform .16s ease}
.resource-card:hover .rc-t i{transform:translateX(3px)}
.resource-card .rc-d{font-size:.9rem;color:var(--ink-soft);line-height:1.5;margin-top:.18rem}

/* ---- spotlight (interactive-companion promo, home hub) ---- */
.spotlight{display:grid;grid-template-columns:1fr 1.1fr;gap:2rem;align-items:center;margin:1.5rem 0 .3rem;padding:1.7rem 1.8rem;border:1px solid var(--line-strong);border-radius:8px;background:linear-gradient(155deg,#fff 0%,var(--accent-soft) 155%)}
@media (max-width:820px){.spotlight{grid-template-columns:1fr;padding:1.3rem 1.15rem 1.5rem;gap:1.3rem}}
.spotlight-kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--warn);display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem}
.spotlight-kicker::before{content:"";width:22px;height:1px;background:var(--warn)}
.spotlight-copy h3{font-family:var(--serif);font-weight:600;font-size:1.44rem;letter-spacing:-.015em;color:var(--ink);line-height:1.18;margin-bottom:.65rem}
.spotlight-copy h3 em{font-style:normal;color:var(--accent)}
.spotlight-copy p{font-size:.98rem;line-height:1.62;color:var(--ink-soft)}
.spotlight-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.spotlight-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.87rem;font-weight:600;border-radius:6px;padding:.62rem 1.05rem;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
.spotlight-btn.primary{background:var(--accent);color:#fff}
.spotlight-btn.primary:hover{background:var(--accent-strong);transform:translateY(-1px);box-shadow:0 10px 20px rgba(21,80,126,.22)}
.spotlight-btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line-strong)}
.spotlight-btn.ghost:hover{border-color:var(--accent-hair);transform:translateY(-1px);box-shadow:0 8px 18px rgba(26,26,23,.08)}
.spotlight-btn i{font-size:.76rem}
.spotlight-note{margin-top:.85rem;font-size:.78rem;color:var(--ink-faint);line-height:1.5}

/* browser-chrome mockup previewing the interactive page's own palette */
.sl-window{border-radius:9px;overflow:hidden;border:1px solid rgba(26,26,23,.14);box-shadow:0 22px 46px rgba(26,26,23,.16),0 3px 8px rgba(26,26,23,.06);background:#fff;transition:transform .2s ease}
.spotlight:hover .sl-window{transform:translateY(-2px)}
.sl-bar{display:flex;align-items:center;gap:.32rem;padding:.5rem .7rem;background:#ece9e1;border-bottom:1px solid rgba(26,26,23,.08)}
.sl-dot{width:7px;height:7px;border-radius:50%;background:#d3cfc4}
.sl-url{margin-left:.5rem;font-family:var(--mono);font-size:.6rem;color:#9c968a;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-body{padding:.85rem .9rem 1rem;background:var(--paper)}
.sl-stagebar{display:flex;gap:.4rem;padding-bottom:.55rem;margin-bottom:.55rem;border-bottom:1px solid rgba(26,26,23,.1)}
.sl-stage-dot{width:6px;height:6px;border-radius:50%;background:#fff;border:1.5px solid #8b867b}
.sl-stage-dot.active{background:#002147;border-color:#002147}
.sl-cap{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#8b867b;margin-bottom:.5rem}
.sl-chart{width:100%;height:auto;display:block}
.sl-readout{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.75rem;padding-top:.6rem;border-top:1px solid rgba(26,26,23,.1)}
.sl-ro-k{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:#8b867b}
.sl-ro-v{display:block;font-family:var(--serif);font-size:.86rem;color:#1a1a17;margin-top:.12rem;font-weight:600}

/* ---- module accordion (the modules page) ---- */
.legend{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:.4rem 0 1.3rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:5px;background:var(--paper)}
.legend .lg{display:inline-flex;align-items:center;gap:.42rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.legend .dot{width:.6rem;height:.6rem;border-radius:50%}
.dot.lecture{background:var(--accent)}.dot.lab{background:var(--good)}.dot.assess{background:var(--warn)}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:.2rem 0 1rem;flex-wrap:wrap}
.toolbar .count{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.btn-ghost{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:none;border:1px solid var(--accent-hair);border-radius:4px;padding:.42rem .7rem;cursor:pointer;transition:background-color .15s,color .15s}
.btn-ghost:hover{background:var(--accent);color:#fff}

.modules{display:grid;gap:.75rem}
.module{border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;background:#fff;transition:box-shadow .16s ease}
.module:hover{box-shadow:0 8px 22px rgba(26,26,23,.07)}
.module.lab{border-left:3px solid var(--good)}
.module.lecture{border-left:3px solid var(--accent)}
.m-head{display:flex;align-items:center;gap:.9rem;padding:.95rem 1.05rem;cursor:pointer;user-select:none;background:#fff;transition:background-color .15s}
.m-head:hover{background:var(--paper)}
.m-num{flex:none;width:2.05rem;height:2.05rem;display:grid;place-items:center;border-radius:6px;background:var(--accent-soft);color:var(--accent-strong);font-family:var(--mono);font-size:.78rem;font-weight:600}
.module.lab .m-num{background:var(--good-soft);color:var(--good)}
.m-meta{flex:1;min-width:0}
.m-title{font-family:var(--serif);font-weight:600;font-size:1.06rem;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.m-sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:.22rem;display:flex;flex-wrap:wrap;gap:.35rem .7rem}
.m-sub .ch{color:var(--accent)}
.m-badges{display:flex;gap:.35rem;flex:none}
.badge{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .5rem;border-radius:4px;font-weight:500;white-space:nowrap}
.badge.lecture{background:var(--accent-soft);color:var(--accent-strong)}
.badge.lab{background:var(--good-soft);color:var(--good)}
.m-chev{flex:none;color:var(--ink-faint);font-size:.85rem;transition:transform .2s ease;margin-left:.2rem}
.module[open] .m-chev,.module.open .m-chev{transform:rotate(180deg)}

.m-body{padding:0 1.05rem;max-height:0;overflow:hidden;transition:max-height .28s ease,padding .28s ease}
.module.open .m-body{max-height:2600px;padding:.2rem 1.05rem 1.15rem}
.m-summary{font-size:.96rem;line-height:1.6;color:var(--ink-soft);margin:.3rem 0 1rem;padding-left:.1rem}
.m-summary b{color:var(--ink);font-weight:600}

/* interactive-companion strip (independent of the lecture release gate) */
.interactive-strip{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:0 0 1rem;padding:.85rem .95rem;border:1px solid rgba(154,106,24,.28);border-radius:6px;background:var(--warn-soft)}
.interactive-strip .int-ic{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:6px;background:#fff;color:var(--warn);font-size:.92rem}
.interactive-strip .int-meta{flex:1 1 180px;min-width:160px}
.interactive-strip .int-title{font-family:var(--serif);font-weight:600;font-size:.98rem;color:var(--ink);letter-spacing:-.01em}
.interactive-strip .int-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:flex-start}
@media (max-width:560px){.interactive-strip{padding:.8rem}.interactive-strip .int-actions{width:100%}.interactive-strip .int-actions .mat-btn{flex:1;justify-content:center}}

.mat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
@media (max-width:680px){.mat-grid{grid-template-columns:1fr}}
.mat-group{border:1px solid var(--line);border-radius:5px;padding:.8rem .85rem;background:var(--paper)}
.mat-group h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;margin-bottom:.6rem;display:flex;align-items:center;gap:.45rem}
.mat-group h4 i{color:var(--accent);font-size:.7rem}
.mat-row{display:flex;flex-wrap:wrap;gap:.4rem}

/* asset buttons */
.mat-btn{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);font-size:.82rem;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:5px;padding:.42rem .68rem;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background-color .14s ease;line-height:1.1}
.mat-btn i,.mat-btn svg{font-size:.85rem;flex:none}
.mat-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(26,26,23,.1);border-color:var(--accent-hair)}
.mat-btn .sz{font-family:var(--mono);font-size:.62rem;color:var(--ink-faint);letter-spacing:.04em}
.mat-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.mat-btn.primary:hover{background:var(--accent-strong)}
.mat-btn.primary .sz{color:rgba(255,255,255,.7)}
.mat-btn .i-colab{color:#e8710a}
.mat-btn .i-python{color:#3776ab}
.mat-btn .i-stata{color:#1a5276}
.mat-btn .i-data{color:var(--good)}
.mat-btn .i-pdf{color:#b23b3b}
.mat-btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none;background:var(--paper-2)}
.mat-note{font-size:.74rem;color:var(--ink-faint);margin-top:.5rem;font-style:italic}

/* ---- result lookup ---- */
.result-cta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.95rem;margin:1.35rem 0 .35rem;padding:1rem 1.1rem;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;box-shadow:0 12px 28px rgba(21,80,126,.18);transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}
.result-cta:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(21,80,126,.24);background:var(--accent-strong)}
.result-cta-ic{width:42px;height:42px;display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.14);font-size:1.05rem;flex:none}
.result-cta-title{display:block;font-family:var(--serif);font-weight:700;font-size:1.18rem;letter-spacing:-.01em;line-height:1.2}
.result-cta-text{display:block;margin-top:.16rem;font-size:.9rem;color:rgba(255,255,255,.78);line-height:1.35}
.result-cta-arrow{font-size:.9rem;color:rgba(255,255,255,.78)}
.result-panel{margin:1.5rem 0 .8rem;border:1px solid var(--line-strong);border-radius:6px;background:var(--paper);padding:1.1rem}
.result-form label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.45rem}
.result-search-row{display:grid;grid-template-columns:1fr auto;gap:.55rem;align-items:center}
.result-search-row input{width:100%;min-height:42px;border:1px solid var(--line-strong);border-radius:5px;background:#fff;color:var(--ink);font-family:var(--sans);font-size:1rem;padding:.52rem .7rem;outline:none;transition:border-color .15s,box-shadow .15s}
.result-search-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.result-output{margin-top:.9rem;border:1px solid var(--line);border-radius:5px;background:#fff;padding:.9rem 1rem;display:grid;gap:.2rem}
.result-output .result-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.result-output .result-score{font-family:var(--serif);font-weight:700;font-size:2.3rem;line-height:1.05;color:var(--accent-strong)}
.result-output .result-empty,.result-output .result-message{font-size:.95rem;color:var(--ink-soft)}
.result-output.error{border-color:rgba(154,106,24,.35);background:var(--warn-soft)}
.result-output.error .result-message{color:var(--warn)}
@media (max-width:620px){
  .result-cta{grid-template-columns:auto 1fr;padding:.9rem}
  .result-cta-arrow{display:none}
  .result-search-row{grid-template-columns:1fr}
  .result-search-row .mat-btn{justify-content:center}
}

/* ---- problem-set list ---- */
.ps-list{display:grid;gap:.7rem;margin:.4rem 0}
.ps-item{border:1px solid var(--line-strong);border-radius:6px;padding:.95rem 1.05rem;background:#fff;display:grid;grid-template-columns:1fr auto;gap:.7rem 1rem;align-items:center;transition:box-shadow .16s ease,border-color .16s ease}
.ps-item:hover{box-shadow:0 8px 20px rgba(26,26,23,.07);border-color:var(--accent-hair)}
.ps-item .ps-meta{min-width:0}
.ps-item .ps-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ps-item .ps-t{font-family:var(--serif);font-weight:600;font-size:1.04rem;color:var(--ink);letter-spacing:-.01em;margin:.18rem 0 .12rem}
.ps-item .ps-d{font-size:.86rem;color:var(--ink-soft);line-height:1.45}
.ps-item .ps-d code{font-family:var(--mono);font-size:.8em;color:var(--accent-strong);background:var(--accent-soft);padding:.05rem .3rem;border-radius:3px}
.ps-item .ps-act{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end}
@media (max-width:620px){.ps-item{grid-template-columns:1fr}.ps-item .ps-act{justify-content:flex-start}}

/* ---- callout / notice ---- */
.notice{padding:.85rem 1rem;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 4px 4px 0;font-size:.92rem;line-height:1.55;color:var(--ink);margin:1rem 0}
.notice b{color:var(--accent-strong)}
.notice.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.notice.warn b{color:var(--warn)}

/* ---- two-column cards (exams topics) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:.4rem 0}
@media (max-width:680px){.split{grid-template-columns:1fr}}
.panel{border:1px solid var(--line-strong);border-radius:6px;padding:1.05rem 1.1rem;background:#fff}
.panel h4{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:.55rem;letter-spacing:-.01em}
.panel ul{list-style:none;display:grid;gap:.42rem}
.panel ul li{position:relative;padding-left:1.2rem;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.panel ul li::before{content:"";position:absolute;left:0;top:.55em;width:.4rem;height:.4rem;background:var(--accent);border-radius:50%}

/* ---- lecture session cards (syllabus) ---- */
.session{padding:1.25rem 0;border-bottom:1px solid var(--line)}
.session:last-child{border-bottom:none}
.session .s-num{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.session h3{font-family:var(--serif);font-weight:500;font-size:1.18rem;margin:.3rem 0 .5rem;letter-spacing:-.01em;font-variation-settings:'opsz' 24}
.session p{font-size:1rem;line-height:1.65;color:var(--ink-soft)}
.session .key{margin-top:.75rem;padding:.7rem .95rem;border-left:2px solid var(--accent);background:var(--accent-soft);font-size:.95rem;line-height:1.55;color:var(--ink);border-radius:0 3px 3px 0}
.session .key b{color:var(--accent-strong);font-weight:600}
.session em{font-style:italic;color:var(--ink-soft)}

/* ---- grading scale grid ---- */
.grades{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin:.4rem 0}
@media (max-width:560px){.grades{grid-template-columns:repeat(3,1fr)}}
.grade{border:1px solid var(--line-strong);border-radius:5px;padding:.6rem .5rem;text-align:center;background:#fff}
.grade .g{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--accent-strong)}
.grade .r{font-family:var(--mono);font-size:.62rem;color:var(--ink-faint);letter-spacing:.04em;margin-top:.15rem}

/* ---- reading list ---- */
.reading{list-style:none;counter-reset:r;display:grid;gap:.75rem;margin-top:.4rem}
.reading li{position:relative;padding-left:2.2rem;font-size:.93rem;line-height:1.55;color:var(--ink-soft)}
.reading li::before{counter-increment:r;content:counter(r);position:absolute;left:0;top:.04rem;font-family:var(--mono);font-size:.72rem;color:var(--accent);font-weight:500;border:1px solid var(--accent-hair);border-radius:3px;width:1.55rem;height:1.55rem;display:flex;align-items:center;justify-content:center}
.reading li cite{font-style:italic;color:var(--ink)}
.reading li .note{color:var(--ink-faint)}
.reading li code{font-family:var(--mono);font-size:.82em;color:var(--ink)}
.reading li a{color:var(--accent);border-bottom:1px solid var(--accent-hair);word-break:break-word}
.reading li a:hover{color:var(--accent-strong)}

/* ---- bottom section nav (footer-nav.js targets this) ---- */
.index-nav{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.index-card{display:flex;flex-direction:column;gap:1.3rem;padding:1.15rem 1.25rem 1.1rem;border-left:1px solid var(--line);color:var(--ink);transition:background-color .16s ease,color .16s ease}
.index-card:first-child{border-left:0}
.idx-top{display:flex;align-items:center;justify-content:space-between}
.idx-num{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;color:var(--ink-faint)}
.idx-arrow{font-size:.78rem;color:var(--accent);transition:transform .16s ease,color .16s ease}
.idx-label{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.idx-label i{font-size:.86rem;color:var(--accent);transition:color .16s ease}
.index-card:hover{background:var(--accent);color:#fff}
.index-card:hover .idx-num,.index-card:hover .idx-arrow,.index-card:hover .idx-label,.index-card:hover .idx-label i{color:#fff}
.index-card:hover .idx-arrow{transform:translateX(4px)}
@media (max-width:620px){.index-nav{grid-template-columns:1fr}.index-card{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-left:0;border-top:1px solid var(--line)}.index-card:first-child{border-top:0}.idx-top{order:2}.idx-arrow{display:none}.idx-label{font-size:1.08rem}}

/* ---- footer ---- */
.foot{display:flex;align-items:center;justify-content:space-between;gap:.7rem 1rem;padding:.95rem 2rem 1.05rem;background:#e6e3da}
.foot-loc{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.foot-links{display:flex;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.foot-links a:hover{color:var(--accent)}
@media (max-width:620px){.foot{flex-direction:column;align-items:flex-start;gap:.6rem;padding:.85rem 1rem .95rem}}
.oxford-stamp{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .5rem;border-radius:4px;line-height:0}
.oxford-stamp img{width:124px;opacity:.42;filter:grayscale(.2);transition:opacity .18s ease}
.oxford-stamp:hover img{opacity:.78}

@media (max-width:620px){
  .page{padding:.7rem .45rem 1rem}
  h1.page-title{font-size:1.7rem;line-height:1.08;letter-spacing:-.02em}
  .lead{font-size:1rem;line-height:1.55}
  .prose p,.lo li{font-size:.96rem;line-height:1.58}
}

/* ==========================================================================
   Case Studies section (casestudies/) -- namespaced .cs- additions
   ========================================================================== */

/* ---- stat row (hub hero) ---- */
.cs-stat-row{display:flex;flex-wrap:wrap;gap:1.6rem;margin:1.3rem 0 .3rem;padding:1.1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cs-stat{display:flex;flex-direction:column;gap:.15rem}
.cs-stat .n{font-family:var(--serif);font-weight:700;font-size:1.7rem;color:var(--accent-strong);line-height:1}
.cs-stat .l{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* ---- chips / tags (shared by hub tables and case-page headers) ---- */
.cs-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 0}
.cs-chip{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:.24rem .55rem;border-radius:4px;background:var(--paper-2);color:var(--ink-soft);white-space:nowrap}
.cs-chip--yr{background:none;color:var(--ink-faint);padding-left:0}
.cs-chip--topic{background:var(--accent-soft);color:var(--accent-strong)}
a.cs-chip--topic:hover{background:var(--accent);color:#fff}
.cs-chip--cn{background:var(--warn-soft);color:var(--warn);font-weight:600}
.cs-chip--tier2{background:var(--paper-2);color:var(--ink-faint)}
.cs-chip--theme{background:#fff;border:1px solid var(--line-strong);color:var(--ink-soft)}
.cs-chip--inst{background:var(--good-soft);color:var(--good)}

/* ---- filter bar ---- */
.cs-filters{margin:1.4rem 0;padding:1.15rem 1.25rem;border:1px solid var(--line-strong);border-radius:8px;background:var(--paper);display:grid;gap:.95rem}
.cs-filter-row--main{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}
.cs-search{position:relative;flex:1 1 220px;display:flex;align-items:center}
.cs-search i{position:absolute;left:.85rem;color:var(--ink-faint);font-size:.82rem;pointer-events:none}
.cs-search input{width:100%;padding:.58rem .8rem .58rem 2.3rem;border:1px solid var(--line-strong);border-radius:999px;font-family:var(--sans);font-size:.9rem;background:#fff;color:var(--ink)}
.cs-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cs-search input::placeholder{color:var(--ink-faint)}
.cs-china-toggle{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-weight:600;font-size:.86rem;color:var(--warn);background:var(--warn-soft);border:1.5px solid rgba(154,106,24,.35);border-radius:999px;padding:.55rem 1.1rem;cursor:pointer;transition:background-color .15s ease,color .15s ease;white-space:nowrap}
.cs-china-toggle i{font-size:.82rem}
.cs-china-toggle .cs-china-count{font-family:var(--mono);font-size:.68rem;background:rgba(154,106,24,.15);padding:.1rem .45rem;border-radius:999px}
.cs-china-toggle:hover{background:rgba(154,106,24,.16)}
.cs-china-toggle.active{background:var(--warn);color:#fff;border-color:var(--warn)}
.cs-china-toggle.active .cs-china-count{background:rgba(255,255,255,.25)}
.cs-clear-btn{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);background:none;border:1px solid var(--line-strong);border-radius:999px;padding:.5rem .85rem;cursor:pointer;transition:all .15s ease;white-space:nowrap}
.cs-clear-btn:hover{color:var(--accent);border-color:var(--accent-hair);background:var(--accent-soft)}
.cs-clear-btn:disabled{opacity:.4;cursor:not-allowed}
.cs-filter-group{display:flex;align-items:flex-start;gap:.75rem;flex-wrap:wrap}
.cs-filter-label{flex:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);padding-top:.55rem;width:64px}
.cs-chip-row{display:flex;flex-wrap:wrap;gap:.4rem;flex:1;min-width:0}
.cs-filter-btn{font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--ink-soft);background:#fff;border:1px solid var(--line-strong);border-radius:999px;padding:.36rem .8rem;cursor:pointer;transition:all .15s ease}
.cs-filter-btn:hover{border-color:var(--accent-hair);color:var(--accent)}
.cs-filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.cs-filter-btn--lecture{border-radius:50%;width:2.05rem;height:2.05rem;padding:0;display:inline-flex;align-items:center;justify-content:center;font-weight:600}

/* ---- results bar ---- */
.cs-results-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.7rem;margin:1.3rem 0 .9rem}
.cs-results-count{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.cs-view-toggle{display:flex;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden}
.cs-view-btn{font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);background:#fff;border:none;padding:.5rem .9rem;cursor:pointer}
.cs-view-btn:not(:last-child){border-right:1px solid var(--line-strong)}
.cs-view-btn.active{background:var(--accent);color:#fff}
.cs-expand-all{font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);background:none;border:1px solid var(--accent-hair);border-radius:6px;padding:.5rem .8rem;cursor:pointer}
.cs-expand-all:hover{background:var(--accent-soft)}
.cs-no-results{padding:2rem 1rem;text-align:center;color:var(--ink-faint);font-size:.94rem}

/* ---- case cards ---- */
.cs-card-grid{display:flex;flex-direction:column;gap:.55rem;margin:.2rem 0}
.cs-card{display:grid;grid-template-columns:2.6rem 1fr;gap:.9rem;padding:.8rem 1.05rem;border:1px solid var(--line-strong);border-radius:6px;background:#fff;transition:box-shadow .15s ease,border-color .15s ease}
.cs-card:hover{box-shadow:0 8px 20px rgba(26,26,23,.07);border-color:var(--accent-hair)}
.cs-card-yr{font-family:var(--mono);font-size:.74rem;color:var(--accent);letter-spacing:.02em;padding-top:.15rem}
.cs-card-main{min-width:0}
.cs-card-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cs-card-cn{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--warn);background:var(--warn-soft);padding:.16rem .5rem;border-radius:999px;font-weight:600;flex:none}
.cs-card-title{font-family:var(--serif);font-weight:600;font-size:.98rem;color:var(--ink);letter-spacing:-.008em;line-height:1.3}
.cs-card:hover .cs-card-title{color:var(--accent)}
.cs-card-desc{font-size:.84rem;color:var(--ink-soft);line-height:1.5;margin-top:.25rem}
.cs-card-tags{display:flex;flex-wrap:wrap;gap:.32rem;margin-top:.5rem}
.cs-card-tags .cs-chip{font-size:.58rem;padding:.16rem .5rem}
@media (max-width:560px){.cs-card{grid-template-columns:1fr;gap:.3rem}.cs-card-yr{padding-top:0}}

.cs-card--compact{align-items:center;gap:.8rem;padding:.65rem .9rem}
.cs-card--compact .cs-card-yr{padding-top:0}
.cs-card--compact .cs-card-main{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.cs-card--compact .cs-card-title{font-size:.9rem}
.cs-card--compact .cs-card-note{font-size:.68rem;color:var(--ink-faint);font-family:var(--mono);white-space:nowrap;flex:none}

/* ---- lecture accordion group ---- */
.cs-lecture-group{border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;background:#fff;margin-bottom:.75rem;transition:box-shadow .15s ease}
.cs-lecture-group:hover{box-shadow:0 6px 16px rgba(26,26,23,.06)}
.cs-lg-head{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.1rem;cursor:pointer;user-select:none;background:var(--paper-2);transition:background-color .15s}
.cs-lg-head:hover{background:var(--paper-3)}
.cs-lg-num{flex:none;width:2rem;height:2rem;display:grid;place-items:center;border-radius:6px;background:var(--accent-soft);color:var(--accent-strong);font-family:var(--mono);font-size:.76rem;font-weight:600}
.cs-lg-meta{flex:1;min-width:0}
.cs-lg-title{font-family:var(--serif);font-weight:600;font-size:.98rem;color:var(--ink)}
.cs-lg-count{font-family:var(--mono);font-size:.62rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;margin-top:.1rem;display:block}
.cs-lg-chev{flex:none;color:var(--ink-faint);transition:transform .2s ease}
.cs-lecture-group.open .cs-lg-chev{transform:rotate(180deg)}
.cs-lg-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.cs-lecture-group.open .cs-lg-body{max-height:5000px}
.cs-lg-inner{padding:1.05rem}
.cs-lg-also{margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--line);display:grid;gap:.4rem}
.cs-lg-also-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.15rem;display:block}

/* ---- timeline strip (hub, added value) ---- */
.cs-timeline-wrap{position:relative}
.cs-timeline-outer{margin:1rem 0 2rem;border:1px solid var(--line-strong);border-radius:6px;background:var(--paper);padding:1.2rem 1.2rem 1rem;overflow-x:auto;overflow-y:hidden}
.cs-tl-popover{position:absolute;top:.6rem;right:.6rem;width:min(320px,calc(100% - 1.2rem));background:#fff;border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 16px 36px rgba(26,26,23,.18);padding:1rem 1.2rem 1.05rem;z-index:20}
.cs-tl-popover[hidden]{display:none}
.cs-tl-popover-close{position:absolute;top:.5rem;right:.55rem;background:none;border:none;font-size:1.2rem;line-height:1;color:var(--ink-faint);cursor:pointer;padding:.2rem;font-family:var(--sans)}
.cs-tl-popover-close:hover{color:var(--accent)}
.cs-tl-popover-yr{font-family:var(--mono);font-size:.68rem;color:var(--accent);letter-spacing:.06em}
.cs-tl-popover-cn{margin-left:.5rem;display:inline-flex;align-items:center;gap:.3rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--warn);background:var(--warn-soft);padding:.14rem .45rem;border-radius:999px;font-weight:600}
.cs-tl-popover-title{font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--ink);margin:.35rem 1rem .45rem 0;line-height:1.3}
.cs-tl-popover-desc{font-size:.85rem;color:var(--ink-soft);line-height:1.5;margin-bottom:.7rem}
.cs-tl-popover-link{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
.cs-tl-popover-link:hover{color:var(--accent-strong)}
@media (max-width:620px){.cs-tl-popover{right:.6rem;left:.6rem;width:auto}}
.cs-timeline{position:relative;min-width:1400px;margin:0 1rem}
.cs-tl-track{position:absolute;left:0;right:0;height:2px;background:var(--line-strong)}
.cs-tl-item{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.2rem;transform:translate(-50%,-50%);text-decoration:none;width:2.6rem}
.cs-tl-item .dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--accent);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--accent);flex:none;transition:transform .12s ease}
.cs-tl-item.cn .dot{background:var(--warn);box-shadow:0 0 0 1px var(--warn)}
.cs-tl-item .yr{font-family:var(--mono);font-size:.6rem;color:var(--ink-faint);white-space:nowrap;transition:color .12s ease}
.cs-tl-item:hover .dot,.cs-tl-item:focus-visible .dot{transform:scale(1.5)}
.cs-tl-item:hover .yr,.cs-tl-item:focus-visible .yr{color:var(--accent);font-weight:600}
.cs-tl-item.cs-tl-dim{opacity:.2}
.cs-tl-item.cs-tl-dim:hover{opacity:.55}
.cs-timeline-legend{display:flex;gap:1.1rem;margin-top:.6rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.cs-timeline-legend .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.35rem;vertical-align:middle}
.cs-timeline-legend .dot.cn{background:var(--warn)}
.cs-timeline-legend .dot.g{background:var(--accent)}

/* ---- case detail page: header chips already covered by .cs-chips above ---- */

/* ---- at-a-glance (plain label/value rows, small inline icons, no boxes) ---- */
.cs-glance{margin:1.35rem 0 1.5rem}
.cs-glance-row{display:grid;grid-template-columns:150px 1fr;gap:1.1rem;padding:.65rem 0;border-bottom:1px solid var(--line)}
.cs-glance-row:first-child{padding-top:0}
.cs-glance-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:.5rem;line-height:1.4}
.cs-glance-k i{color:var(--accent);font-size:.8rem;width:1rem;text-align:center;flex:none}
.cs-glance-v{font-size:.96rem;color:var(--ink);line-height:1.55}
.cs-glance-row.cs-glance-size{border-bottom:2px solid var(--line-strong)}
.cs-glance-row.cs-glance-size .cs-glance-k,.cs-glance-row.cs-glance-size .cs-glance-k i{color:var(--warn)}
.cs-glance-row.cs-glance-size .cs-glance-v{font-family:var(--serif);font-weight:600;font-size:1.04rem;color:var(--ink);font-variation-settings:'opsz' 18}
.cs-glance-lesson{margin-top:1rem}
.cs-glance-lesson i{margin-right:.3rem}
@media (max-width:640px){
  .cs-glance-row{grid-template-columns:1fr;gap:.25rem;padding:.8rem 0}
}

/* ---- figure card ---- */
.cs-fig{margin:1.3rem 0;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;background:#fff}
.cs-fig img{width:100%;display:block}
.cs-fig figcaption{font-family:var(--mono);font-size:.7rem;color:var(--ink-faint);padding:.65rem 1rem;border-top:1px solid var(--line);line-height:1.5}

/* ---- maths block ---- */
.cs-maths{margin:1.1rem 0;padding:1.1rem 1.2rem;border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;background:var(--paper);overflow-x:auto}
.cs-maths + .cs-maths-note{font-size:.86rem;color:var(--ink-faint);margin-top:-.6rem;margin-bottom:1rem;font-style:italic}

/* ---- verification code (Prism.js syntax highlighting) ---- */
/* ---- data and facts table (source column always visible) ---- */
table.cs-facts{width:100%;border-collapse:collapse;margin:.6rem 0 1.6rem;font-family:var(--sans);font-size:.88rem;table-layout:fixed}
table.cs-facts th{text-align:left;font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;padding:.6rem .7rem;border-bottom:1px solid var(--line-strong)}
table.cs-facts td{padding:.65rem .7rem;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:break-word}
table.cs-facts th:nth-child(1),table.cs-facts td.cs-fq{width:32%}
table.cs-facts th:nth-child(2),table.cs-facts td.cs-fv{width:20%}
table.cs-facts th:nth-child(3),table.cs-facts td.cs-fs{width:48%}
table.cs-facts td.cs-fq{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:.92rem;line-height:1.4}
table.cs-facts td.cs-fv{font-family:var(--mono);font-size:.87rem;color:var(--accent-strong);font-weight:600}
table.cs-facts td.cs-fs{color:var(--ink-faint);font-size:.78rem;line-height:1.45}
table.cs-facts tr:hover td{background:color-mix(in srgb,var(--paper) 55%,white)}
@media (max-width:680px){
  table.cs-facts thead{display:none}
  table.cs-facts,table.cs-facts tbody,table.cs-facts tr,table.cs-facts td{display:block;width:auto!important}
  table.cs-facts tr{padding:.7rem 0;border-bottom:1px solid var(--line-strong)}
  table.cs-facts td{padding:.15rem 0;border-bottom:none}
  table.cs-facts td.cs-fq{font-weight:600;font-size:.94rem}
  table.cs-facts td.cs-fv{font-size:.95rem}
  table.cs-facts td.cs-fs::before{content:"Source: ";font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
}

.cs-code-label{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:1.1rem 0 .5rem}
.cs-code-output-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:.8rem 0 .4rem}
pre.cs-code-output{border-style:dashed;background:var(--paper-2)!important}
pre.cs-code-output code{color:var(--ink-soft);font-family:var(--mono);font-size:.82rem}
.cs-code-label i{color:var(--accent)}
pre.cs-code{margin:0 0 .3rem;border:1px solid var(--line-strong);border-radius:6px;overflow-x:auto;background:#faf9f6 !important}
pre.cs-code,pre.cs-code[class*="language-"]{font-family:var(--mono);font-size:.82rem;line-height:1.65;padding:1rem 1.2rem;text-shadow:none}
pre.cs-code code[class*="language-"]{font-family:var(--mono);text-shadow:none}
.token.comment{color:var(--ink-faint) !important;font-style:italic}
.token.number{color:var(--accent-strong) !important}
.token.operator{color:var(--ink-soft) !important;background:none !important}
.token.keyword{color:var(--warn) !important}
.token.string{color:var(--good) !important}
.token.builtin,.token.function{color:var(--accent) !important}

/* ---- think-about-it callout ---- */
.cs-think{margin:1.3rem 0;padding:1rem 1.15rem;border:1px dashed var(--accent-hair);border-radius:6px;background:#fff}
.cs-think h4{font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--accent-strong);margin-bottom:.5rem}
.cs-think ol{padding-left:1.2rem;display:grid;gap:.5rem}
.cs-think li{font-size:.94rem;line-height:1.5;color:var(--ink-soft)}

/* ---- case cross-link row (where it appears) ---- */
.cs-links{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 0}

/* ---- per-page table of contents ---- */
.cs-toc{margin:1.3rem 0 1.6rem;padding:1.05rem 1.2rem;border:1px solid var(--line-strong);border-radius:8px;background:var(--paper)}
.cs-toc-label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.7rem}
.cs-toc ol{list-style:none;counter-reset:toc;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem 1.6rem;padding:0}
.cs-toc li{counter-increment:toc;position:relative;padding-left:1.7rem}
.cs-toc li::before{content:counter(toc);position:absolute;left:0;top:.1rem;font-family:var(--mono);font-size:.68rem;color:var(--accent);font-weight:500}
.cs-toc a{font-size:.92rem;color:var(--ink);border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease}
.cs-toc a:hover{color:var(--accent);border-bottom-color:var(--accent-hair)}
@media (max-width:640px){.cs-toc ol{grid-template-columns:1fr}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- noscript fallback list ---- */
.cs-noscript-list{list-style:none;display:grid;gap:.4rem;padding-left:0}
.cs-noscript-list a{color:var(--accent);border-bottom:1px solid var(--accent-hair)}

@media (max-width:620px){
  .cs-stat-row{gap:1.1rem}
  .cs-stat .n{font-size:1.4rem}
}

/* ==========================================================================
   AI & Machine Learning — course-specific components
   Adds a crimson third track (concept studios), the day-page furniture,
   and the figure-library gallery. Everything else is inherited above.
   ========================================================================== */

/* ---- crimson track: concept studios ---- */
.dot.studio{background:var(--crimson)}
.badge.studio{background:var(--crimson-soft);color:var(--crimson)}
.badge.assess{background:var(--warn-soft);color:var(--warn)}
.module.studio{border-left:3px solid var(--crimson)}
.module.studio .m-num{background:var(--crimson-soft);color:var(--crimson)}
.pill.crimson{color:var(--crimson);background:var(--crimson-soft);border-color:var(--crimson-hair)}
.notice.studio{border-left-color:var(--crimson);background:var(--crimson-soft)}
.notice.studio b{color:var(--crimson)}
.h2 em.cr{color:var(--crimson)}

/* ---- day rhythm strip (home page) ---- */
.rhythm{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;margin:.4rem 0}
@media (max-width:820px){.rhythm{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.rhythm{grid-template-columns:1fr}}
.rh-card{display:block;border:1px solid var(--line-strong);border-radius:6px;background:#fff;padding:1rem 1.05rem 1.05rem;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.rh-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(26,26,23,.1);border-color:var(--accent-hair)}
.rh-day{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;justify-content:space-between}
.rh-day .n{color:var(--accent);font-weight:600}
.rh-t{display:block;font-family:var(--serif);font-weight:600;font-size:1.04rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink);margin:.55rem 0 .35rem}
.rh-d{display:block;font-size:.87rem;line-height:1.5;color:var(--ink-soft)}
.rh-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.7rem}
.rh-tags span{font-family:var(--mono);font-size:.57rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--line);border-radius:3px;padding:.16rem .38rem}

/* ---- narrative arc callout (day pages) ---- */
.arc{margin:1.4rem 0;padding:1.15rem 1.3rem;border:1px solid var(--line-strong);border-left:3px solid var(--crimson);border-radius:0 6px 6px 0;background:var(--paper)}
.arc .arc-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson);margin-bottom:.5rem;display:block}
.arc p{font-size:1rem;line-height:1.65;color:var(--ink-soft)}
.arc p+p{margin-top:.6rem}

/* ---- key-number strip ---- */
.numstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:1.5rem 0;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;background:#fff}
@media (max-width:780px){.numstrip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.numstrip{grid-template-columns:1fr}}
.numstrip .ns{padding:.95rem 1rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.numstrip .ns:last-child{border-right:0}
.numstrip .ns-v{font-family:var(--serif);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;color:var(--accent);line-height:1.1}
.numstrip .ns-m{font-size:.82rem;line-height:1.45;color:var(--ink-soft);margin-top:.32rem}

/* ---- lecture block outline ---- */
.blocks{list-style:none;display:grid;gap:0;margin:.3rem 0;border-top:1px solid var(--line)}
.blocks li{display:grid;grid-template-columns:5.4rem 1fr;gap:1rem;padding:.9rem .2rem;border-bottom:1px solid var(--line)}
@media (max-width:600px){.blocks li{grid-template-columns:1fr;gap:.3rem}}
.blocks .bk-span{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);padding-top:.24rem}
.blocks .bk-h{display:block;font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--ink);letter-spacing:-.01em}
.blocks .bk-s{display:block;font-size:.92rem;line-height:1.58;color:var(--ink-soft);margin-top:.25rem}

/* ---- numbered review questions ---- */
.qlist{list-style:none;counter-reset:q;display:grid;gap:.65rem;margin:.3rem 0}
.qlist li{counter-increment:q;position:relative;padding-left:2.1rem;font-size:.98rem;line-height:1.6;color:var(--ink)}
.qlist li::before{content:"Q" counter(q);position:absolute;left:0;top:.12em;font-family:var(--mono);font-size:.66rem;font-weight:600;color:var(--crimson);background:var(--crimson-soft);border-radius:3px;padding:.14rem .32rem}

/* ---- provenance / data honesty note ---- */
.prov{margin:.8rem 0;padding:.7rem .9rem;border:1px dashed var(--line-strong);border-radius:5px;background:var(--paper);font-size:.86rem;line-height:1.55;color:var(--ink-soft)}
.prov b{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:.28rem;font-weight:500}

/* ---- figure library gallery ---- */
.fig-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 1.2rem}
.fig-filters button{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);background:#fff;border:1px solid var(--line-strong);border-radius:4px;padding:.4rem .7rem;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.fig-filters button:hover{border-color:var(--accent-hair);color:var(--accent)}
.fig-filters button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.fig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:.4rem 0}
@media (max-width:900px){.fig-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fig-grid{grid-template-columns:1fr}}
.fig-card{display:flex;flex-direction:column;border:1px solid var(--line-strong);border-radius:6px;background:#fff;overflow:hidden;cursor:zoom-in;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;text-align:left;padding:0;font:inherit;color:inherit}
.fig-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(26,26,23,.1);border-color:var(--accent-hair)}
.fig-shot{background:#fff;border-bottom:1px solid var(--line);padding:.55rem;display:grid;place-items:center;min-height:132px}
.fig-shot img{width:100%;height:auto;object-fit:contain;max-height:180px}
.fig-body{display:block;padding:.7rem .8rem .85rem}
.fig-id{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--accent);font-weight:600}
.fig-t{display:block;font-family:var(--serif);font-weight:600;font-size:.94rem;line-height:1.3;color:var(--ink);margin:.3rem 0 .28rem;letter-spacing:-.01em}
.fig-d{display:block;font-size:.82rem;line-height:1.5;color:var(--ink-soft)}

/* ---- lightbox ---- */
.figbox{position:fixed;inset:0;z-index:200;background:rgba(26,26,23,.82);display:none;align-items:center;justify-content:center;padding:2rem 1.2rem}
.figbox.on{display:flex}
.figbox-in{background:#fff;border-radius:6px;max-width:min(1100px,94vw);max-height:92vh;overflow:auto;padding:1.1rem 1.2rem 1.3rem;position:relative}
.figbox-in img{width:100%;height:auto;border:1px solid var(--line)}
.figbox-cap{margin-top:.8rem}
.figbox-cap .fig-id{font-size:.64rem}
.figbox-cap h4{font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--ink);margin:.25rem 0 .3rem}
.figbox-cap p{font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.figbox-close{position:absolute;top:.6rem;right:.7rem;background:none;border:0;font-size:1.15rem;color:var(--ink-faint);cursor:pointer;padding:.3rem .45rem;line-height:1}
.figbox-close:hover{color:var(--crimson)}
.figbox-dl{display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-hair);border-radius:4px;padding:.36rem .6rem}
.figbox-dl:hover{background:var(--accent);color:#fff}

/* ---- schedule table: this course puts prose in the focus column ----
   The inherited rule assumed a short reading reference ("Hull 1") and set
   white-space:nowrap, which starved the topic column and overflowed the card.
   Here the focus column carries a sentence, so it wraps and the widths are
   declared rather than left to the browser's content-based guess. */
table.schedule{table-layout:fixed}
table.schedule td.wk,table.schedule th:first-child{width:7.5rem}
/* Only the day/topic/focus tables get an asymmetric second column. The depth
   table's two columns are parallel, so it is left to split the space evenly. */
table.schedule:has(td.topic) th:nth-child(2){width:34%}
table.schedule td.topic{width:34%}
table.schedule td.focus{font-family:var(--sans);white-space:normal;font-size:.88rem;line-height:1.55}
@media (max-width:680px){
  table.schedule{table-layout:auto}
  table.schedule td.wk,table.schedule th:first-child,
  table.schedule td.topic,table.schedule:has(td.topic) th:nth-child(2){width:auto}
}

/* ==========================================================================
   Coursework documents (pre-class briefs, studios, problem sets)
   These pages are generated from the LaTeX handouts, so the components below
   mirror the mlcourse.sty environments: callouts, staged phases, question
   cards, dataset panels and fill-in blanks.
   ========================================================================== */

/* ---- document header ---- */
.dochead{margin:.2rem 0 1.4rem;padding-bottom:1rem;border-bottom:1px solid var(--line-strong)}
.dochead .dh-meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:.7rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.dochead .dh-when{color:var(--crimson)}

/* ---- callouts (keyidea / warningbox / activity / dataset / rubric) ---- */
.callout{margin:1.2rem 0;padding:1rem 1.15rem;border-radius:0 6px 6px 0;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--paper)}
.callout .co-k{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;font-weight:500}
.callout p{font-size:.97rem;line-height:1.65;color:var(--ink-soft)}
.callout p+p{margin-top:.6rem}
.callout.remember{border-left-color:var(--accent);background:var(--accent-soft)}
.callout.important{border-left-color:var(--crimson);background:var(--crimson-soft)}
.callout.important .co-k{color:var(--crimson)}
.callout.activity{border-left-color:var(--accent);background:#fff}
.callout.dataset{border-left-color:var(--warn);background:var(--warn-soft)}
.callout.dataset .co-k{color:var(--warn)}
.callout .ds-note{font-size:.85rem;font-style:italic;color:var(--ink-faint);margin-bottom:.5rem}

/* ---- staged phase divider (Sheet A / Sheet B / Main activity) ---- */
.phase{margin:1.9rem 0 1rem;padding:.75rem 0 .6rem;border-top:1.5px solid var(--accent);border-bottom:1px solid var(--line)}
.phase .ph-n{font-family:var(--serif);font-weight:600;font-size:1.08rem;color:var(--accent);letter-spacing:-.01em}
.phase .ph-t{float:right;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);padding-top:.3rem}
.phase .ph-d{display:block;clear:both;font-size:.88rem;line-height:1.5;color:var(--ink-soft);margin-top:.3rem}

/* ---- question / step cards ---- */
/* One counter for the whole document: the printed handouts number their
   questions continuously across sheets, so the web page must match. */
.pg{counter-reset:qc}
/* minmax(0,1fr) + min-width:0 let a card shrink below the intrinsic width of
   a wide table or formula inside it, so .tablewrap can scroll instead of the
   card overflowing and being clipped on narrow screens. */
ol.qlist-cards{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;margin:1.1rem 0;padding:0}
.qcard{counter-increment:qc;min-width:0;border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;background:#fff;padding:.95rem 1.1rem}
.qcard.step{border-left-color:var(--crimson)}
.q-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.55rem}
.q-t{font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.qcard .q-t::before{content:counter(qc) ". ";color:var(--accent);font-family:var(--mono);font-size:.8rem;font-weight:600}
.qcard.step .q-t::before{color:var(--crimson)}
.q-meta{margin-left:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.q-body{min-width:0}
.q-body p{font-size:.95rem;line-height:1.65;color:var(--ink-soft)}
.q-body p+p{margin-top:.55rem}
.q-body ul,.q-body ol{margin:.5rem 0 .5rem 1.2rem}
.q-body li{font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin-bottom:.3rem}

/* ---- written-response marker (replaces the printed answer space) ---- */
.writein{margin:.6rem 0 .2rem;padding:.42rem .7rem;border:1px dashed var(--line-strong);border-radius:4px;background:var(--paper);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* ---- inline fill-in blank ---- */
.blank{display:inline-block;min-width:3.2rem;border-bottom:1px solid var(--ink-faint);margin:0 .18rem;vertical-align:baseline}

/* ---- semantic inline helpers ---- */
b.term{color:var(--accent);font-weight:600}
b.caution{color:var(--crimson);font-weight:600}
.q-body code,.callout code,.prose code{font-family:var(--mono);font-size:.86em;color:var(--accent-strong);background:var(--accent-soft);padding:.06em .32em;border-radius:3px}
.src{font-size:.82rem;color:var(--ink-faint);font-style:italic;margin-top:.35rem}

/* ---- definition list of terms ---- */
dl.terms{margin:.8rem 0;display:grid;gap:.6rem}
dl.terms dt{font-family:var(--serif);font-weight:600;font-size:.98rem;color:var(--accent)}
dl.terms dd{font-size:.94rem;line-height:1.6;color:var(--ink-soft);margin-left:0;margin-top:.15rem}

/* ---- tables inside documents ---- */
.tablewrap{overflow-x:auto;margin:1rem 0}
table.doc{width:100%;border-collapse:collapse;font-size:.88rem;min-width:min(100%,420px)}
table.doc th{text-align:left;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;padding:.55rem .6rem;border-bottom:1px solid var(--line-strong);white-space:nowrap}
table.doc td{padding:.55rem .6rem;vertical-align:top;border-bottom:1px solid var(--line);color:var(--ink-soft);line-height:1.5}
table.doc tbody tr:hover td{background:var(--paper)}

/* ---- display maths ---- */
.mathblock{margin:1rem 0;padding:.6rem 0;overflow-x:auto;text-align:center}

/* ---- variable rows in the dataset panels ---- */
.varrow{display:grid;grid-template-columns:minmax(7rem,.22fr) minmax(5rem,.18fr) 1fr;gap:.7rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:4px;background:#fff;margin:.4rem 0;font-size:.88rem;align-items:baseline}
.varrow .v-role{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.varrow .v-def{color:var(--ink-soft);line-height:1.5}
@media (max-width:620px){.varrow{grid-template-columns:1fr;gap:.2rem}}

/* ---- per-day coursework nav ---- */
.docnav{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin:1.2rem 0}
@media (max-width:760px){.docnav{grid-template-columns:repeat(2,1fr)}}
.docnav a{display:block;padding:.6rem .7rem;border:1px solid var(--line-strong);border-radius:5px;background:#fff;transition:border-color .15s,transform .15s,box-shadow .15s}
.docnav a:hover{border-color:var(--accent-hair);transform:translateY(-1px);box-shadow:0 6px 14px rgba(26,26,23,.08)}
.docnav a.on{background:var(--accent-soft);border-color:var(--accent-hair)}
.docnav .dn-k{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.docnav .dn-t{display:block;font-family:var(--serif);font-weight:600;font-size:.92rem;color:var(--ink);margin-top:.18rem;line-height:1.25}

/* Two-column card grid used by the studios and problem-set index pages.
   A class rather than an inline style, so the narrow-screen rule can still
   collapse it to a single column. */
.rhythm.pairs{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){.rhythm.pairs{grid-template-columns:1fr}}

/* ==========================================================================
   Multiple-choice questions and answer keys
   ========================================================================== */

/* ---- an MCQ card ---- */
.qcard.mcq{border-left-color:var(--accent)}
.qcard.mcq .q-t::before{content:"Q" counter(qc) ". "}

/* ---- the four options: an empty box, then A/B/C/D ---- */
ol.choices{list-style:none;counter-reset:opt;margin:.7rem 0 .2rem;padding:0;display:grid;gap:.4rem}
ol.choices li{counter-increment:opt;position:relative;padding-left:2.9rem;min-width:0}
ol.choices li::before{
  content:counter(opt,upper-alpha);
  position:absolute;left:0;top:.05em;
  width:1.85rem;height:1.5rem;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:.7rem;font-weight:600;
  color:var(--accent);background:#fff;
  border:1px solid var(--line-strong);border-radius:3px;
}
ol.choices li p{font-size:.93rem;line-height:1.55;color:var(--ink-soft);margin:0}
ol.choices li+li p{margin:0}

/* ---- answer-key pages ---- */
.keynote{margin:1.1rem 0 1.4rem;padding:1rem 1.15rem;border:1px solid var(--crimson-hair);
  border-left:3px solid var(--crimson);border-radius:0 6px 6px 0;background:var(--crimson-soft)}
.keynote b{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--crimson);margin-bottom:.4rem}
.keynote p{font-size:.95rem;line-height:1.6;color:var(--ink-soft)}

/* keyed explanation list: P1 / C1 / E1 / S1 tie an answer to its question */
ol.keyed{list-style:none;margin:.8rem 0;padding:0;display:grid;gap:.55rem}
ol.keyed li{display:grid;grid-template-columns:2.6rem 1fr;gap:.7rem;align-items:baseline;
  padding:.5rem .6rem;border:1px solid var(--line);border-radius:5px;background:#fff;min-width:0}
ol.keyed li p{font-size:.93rem;line-height:1.55;color:var(--ink-soft);margin:0}
.ansref{font-family:var(--mono);font-size:.68rem;font-weight:600;color:var(--crimson);
  background:var(--crimson-soft);border-radius:3px;padding:.2rem .3rem;text-align:center}
@media (max-width:520px){
  ol.keyed li{grid-template-columns:1fr;gap:.25rem}
  .ansref{justify-self:start}
}

/* an always-visible worked answer block (mcsolution) */
.callout.answerkey{border-left-color:var(--crimson);background:var(--crimson-soft)}
.callout.answerkey .co-k{color:var(--crimson)}

/* Anchor targets must clear the sticky course nav, otherwise a #dayN link
   lands with its heading hidden behind the bar. */
[id]{scroll-margin-top:5.5rem}

/* ==========================================================================
   Two courses, one programme
   Week 1 is AI and Machine Learning, Week 2 is AI and Deep Learning. They
   share this stylesheet and differ only in the accent, so a student can tell
   at a glance which week they are looking at without the pages feeling
   unrelated. Week 2 is set with data-course="dl" on the <html> element.
   ========================================================================== */
:root[data-course="dl"]{
  --accent:#0e4749;--accent-strong:#082e2f;--accent-soft:#e4eeed;
  --accent-hair:rgba(14,71,73,.4);
}

/* ---- programme strip: which week you are in, and the way to the other ---- */
.programme{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;margin:0 0 1.4rem;
  padding:.7rem .95rem;border:1px solid var(--line-strong);border-radius:6px;background:var(--paper)}
.programme .pr-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.programme .pr-here{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-strong);background:var(--accent-soft);border:1px solid var(--accent-hair);border-radius:999px;padding:.24rem .6rem}
.programme .pr-to{margin-left:auto;font-size:.92rem;color:var(--ink);border-bottom:1px solid var(--line-strong);transition:color .15s,border-color .15s}
.programme .pr-to:hover{color:var(--accent);border-bottom-color:var(--accent-hair)}
.programme .pr-to i{font-size:.7rem;margin-left:.3rem}
@media (max-width:560px){.programme .pr-to{margin-left:0;width:100%}}

/* On a narrow screen the badges leave almost no room for the day title, which
   then wraps one word per line. The same information is repeated by the group
   headings inside the open module, so drop the badges instead. */
@media (max-width:620px){
  .m-badges{display:none}
  .m-head{gap:.65rem;padding:.85rem .8rem}
  .m-title{font-size:1rem}
}

/* ==========================================================================
   Day cards: every paper for a day visible at once, one click to each
   Replaces the accordion, which hid the papers behind an expand step.
   ========================================================================== */
.daycard{border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;
  background:#fff;padding:1.1rem 1.15rem 1.15rem;margin:0 0 1rem}
.dc-head{display:flex;align-items:flex-start;gap:.9rem}
.dc-meta{flex:1;min-width:0}
.dc-t{display:block;font-family:var(--serif);font-weight:600;font-size:1.1rem;line-height:1.25;
  letter-spacing:-.01em;color:var(--ink)}
.dc-sub{display:flex;flex-wrap:wrap;gap:.3rem .8rem;margin-top:.28rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.dc-sub .ch{color:var(--accent)}
.dc-summary{font-size:.94rem;line-height:1.6;color:var(--ink-soft);margin:.75rem 0 .9rem}

/* the four papers, side by side, each labelled with when it is used */
.paper-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;margin-bottom:.8rem}
@media (max-width:820px){.paper-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.paper-grid{grid-template-columns:minmax(0,1fr)}}
.paper-cell{display:flex;flex-direction:column;gap:.3rem;min-width:0;padding:.6rem .65rem;
  border:1px solid var(--line);border-radius:5px;background:var(--paper)}
.pc-when{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.pc-q{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--accent)}
.paper-cell .mat-btn{width:100%;justify-content:flex-start;background:#fff}

/* slides, dataset and the locked key sit under the papers */
.dc-extra{display:flex;flex-wrap:wrap;gap:.45rem;padding-top:.85rem;border-top:1px solid var(--line)}

/* ---- day-card groups: labelled rows of documents ---- */
.daygroups{grid-template-columns:1fr;gap:.7rem;margin-top:.9rem}
.daygroups .mat-group{background:var(--paper);border:1px solid var(--line)}
.daygroups .mat-group h4{display:flex;align-items:center;gap:.45rem}
.daygroups .mat-group h4 i{color:var(--accent)}
.daygroups .mat-group h4 .fa-lock{color:var(--ink-faint)}
.grp-note{margin-left:.5rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:none;color:var(--ink-faint);font-weight:400}
.daygroups .mat-btn .i-python{color:#2b6cb0}

/* ---- locked day cards (materials not yet released) ---- */
.daycard.locked{opacity:.72;background:var(--paper)}
.daycard.locked .dc-t{color:var(--ink-soft)}
.dc-lock{margin-left:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;display:inline-flex;
  align-items:center;gap:.35rem;padding-top:.2rem}
.daycard.locked .dc-head{align-items:flex-start}

/* Unreleased material: the structure stays visible, the file does not open.
   Used by the deep learning site while the week is still locked. */
.resource-card.is-locked{cursor:default;opacity:.6}
.resource-card.is-locked:hover{transform:none;box-shadow:none;border-color:var(--rule)}
.resource-card.is-locked .rc-t::after{content:" · to be released";font-family:var(--mono);
  font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.badge:not(.lecture):not(.lab){background:var(--rule-soft,#eceff3);color:var(--muted)}