/* The static subject pages (build-pages.js). Same colours and type as the
   app in index.html, kept to what plain content pages need. */
:root{
  --bg:#0b0c0e; --panel:#141518; --panel2:#1c1e22; --line:#2b2e34; --line2:#18191d;
  --text:#f2f4f8; --dim:#a4aebd; --accent:#6ba7ff; --accent2:#2bd4a4; --row:#0e0f12;
  --action:#d7ff3f; --action-hover:#e2ff75; --action-ink:#172000;
}
*{box-sizing:border-box}
/* Dark scrollbars, as in the app; the default light ones cut through the theme. */
*{scrollbar-color:#2a2d33 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2a2d33;border-radius:0;border:2px solid var(--panel)}
::-webkit-scrollbar-thumb:hover{background:#3a3d44}
body{margin:0;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(91,157,255,.3)}

/* The header copies the app's (index.html): pinned, with the same tabs. */
header.top{position:sticky;top:0;z-index:30;background:rgba(0,0,0,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topin{max-width:1440px;margin:0 auto;padding:0 24px;height:48px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.tagline{color:var(--dim);font-size:12.5px;white-space:nowrap}
.tagline::before{content:'//';margin-right:8px;color:#4a4d55;font-weight:600}
@media(max-width:1100px){.tagline{display:none}}
.logo{font-size:16px;font-weight:650;letter-spacing:-.2px;color:var(--text);white-space:nowrap}
.logo span{color:var(--action)}
.logo:hover{text-decoration:none}
.tabs{display:flex;align-items:center;gap:18px;min-width:0;overflow-x:auto;scrollbar-width:none}
.tab{border-bottom:2px solid transparent;color:#c6c9d0;padding:3px 0;font-size:12.5px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tab:hover{text-decoration:none;border-bottom-color:#4a4d55;color:var(--text)}
.tab[aria-current="page"]{color:var(--text);border-bottom-color:var(--action)}
.tabsep{flex:none;width:1px;height:16px;background:#3a3d44}
.count{font-size:11px;line-height:16px;background:var(--panel2);border:1px solid var(--line);padding:0 5px;
  min-width:18px;text-align:center;font-variant-numeric:tabular-nums;color:var(--text)}
.yearpick{margin-left:auto;white-space:nowrap;font-size:12.5px;color:var(--dim)}
.yearpick b{color:var(--text);font-weight:600;margin-left:6px}

.page{width:100%;max-width:1440px;margin:0 auto;padding:0 24px}
main.page{padding-top:20px;padding-bottom:40px;flex:1}
.crumbs{font-size:13px;color:var(--dim);margin-bottom:10px}
.crumbs span[aria-hidden]{margin:0 4px;color:#5c6270}
h1{font-size:clamp(26px,4vw,36px);font-weight:650;letter-spacing:-1px;line-height:1.15;margin:0 0 12px}
h2{font-size:17px;font-weight:650;margin:32px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.lede{font-size:16.5px;color:#d8dce4;max-width:760px;margin:0 0 12px}
.facts{color:var(--dim);font-size:13.5px;margin:0 0 16px}
.facts b{color:var(--text);font-weight:600;margin-right:4px}
.hint{color:var(--dim);font-size:13px;margin:-4px 0 10px}
.cta{margin:18px 0 8px}
.go{display:inline-block;background:var(--action);color:var(--action-ink);font-weight:650;padding:10px 16px}
.go:hover{background:var(--action-hover);text-decoration:none}
.n{color:var(--dim);font-size:12.5px;font-variant-numeric:tabular-nums}
span.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;color:var(--text);
  background:var(--panel2);border:1px solid var(--line);padding:0 4px}
h1 span.code{font-size:.8em}
.cta .alt{margin-left:14px;font-size:14px}

/* Lists of subjects and universities flow down columns. */
.cols{list-style:none;padding:0;margin:0;columns:240px;column-gap:28px}
.cols li{break-inside:avoid;padding:3px 0}

/* The course table copies the app's results table (index.html): one-line
   rows, the header pinned under the top bar, fixed column widths, long text
   ending in an ellipsis. Columns drop on narrow screens rather than scroll. */
.tablewrap{border:1px solid var(--line)}
table.courses{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.courses th,.courses td{text-align:left}
.courses thead th{position:sticky;top:48px;z-index:5;background:var(--panel);font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.6px;color:var(--dim);padding:7px 10px;border-bottom:1px solid var(--line);
  white-space:nowrap}
.courses tbody td{padding:0 10px;height:30px;border-bottom:1px solid var(--line2);vertical-align:middle;
  font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.courses tbody tr:nth-child(even){background:var(--row)}
.courses tbody tr:hover{background:var(--panel)}
.courses .ttl{font-weight:550;color:var(--text)}
.courses .prov{color:#c3ccda}
.courses td.mini{font-size:12px;color:var(--dim)}
.courses .tar{font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:.2px;color:var(--accent2)}
.courses .tar.none{color:#4a5260;font-weight:400}
.courses .code{font:11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#8b97a8;letter-spacing:.4px;
  background:none;border:0;padding:0}
.courses tbody tr:hover .code{color:var(--text)}
col.w-code{width:58px}
col.w-title{width:38%}
col.w-award{width:92px}
col.w-prov{width:26%}
col.w-entry{width:150px}
col.w-link{width:104px}
td.c-link{text-align:center;padding:0}
a.ext{display:inline-flex;align-items:center;justify-content:center;height:18px;padding:0 7px;
  color:#8b97a8;background:var(--panel2);border:1px solid var(--line);font-size:10px;font-weight:600;
  letter-spacing:.5px;line-height:1;text-decoration:none;transition:all .12s}
.courses tbody tr:hover a.ext{color:var(--accent);border-color:#33506f;background:#1e2c42}
a.ext:hover{color:#07101f !important;background:var(--accent) !important;border-color:var(--accent) !important;
  text-decoration:none}
a.ext + a.ext{margin-left:4px}
@media(max-width:900px){
  col.w-code,.courses .c-code,col.w-award,.courses .c-award{display:none}
  col.w-title{width:44%}
  col.w-prov{width:30%}
}
@media(max-width:600px){
  col.w-entry{width:96px}
  col.w-link{width:58px}
  a.ext + a.ext{display:none}
}

/* The subject browser: a column per level, Finder-style. Fixed height, so
   the page below does not move as you click down through it. */
.browse{display:flex;width:max-content;max-width:100%;overflow-x:auto;background:var(--panel);border:1px solid var(--line);margin:4px 0 26px}
.colnav{flex:0 0 300px;min-width:0;border-right:1px solid var(--line)}
.colnav:last-child{border-right:0}
.colhead{margin:0;padding:8px 14px;font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;
  border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.colnav ul{list-style:none;margin:0;padding:4px 0;height:340px;overflow-y:auto;position:relative}
.colnav a,.colnav .self{display:flex;align-items:baseline;gap:8px;padding:4px 14px;font-size:13.5px;color:var(--text)}
.colnav .self{color:var(--dim)}
.colnav a:hover{background:var(--panel2);text-decoration:none}
.colnav .nm{flex:1;min-width:0}
.colnav .chev{color:var(--dim);width:8px}
.colnav li.on > a{background:var(--panel2);box-shadow:inset 2px 0 0 var(--accent)}
.colnav a[aria-current="page"]{box-shadow:inset 2px 0 0 var(--action)}

/* The type-to-filter box above the browser (browse.js), its matches dropping
   down over the columns. */
.finder{position:relative;max-width:560px;margin:4px 0 10px}
#find{width:100%;height:40px;background:var(--panel);border:1px solid var(--line);color:var(--text);
  padding:0 12px;font:inherit;font-size:15px;outline:none;border-radius:0}
#find:focus{border-color:var(--accent)}
#find::placeholder{color:#6b7280}
.finds{position:absolute;left:0;right:0;top:100%;z-index:20;list-style:none;margin:2px 0 0;padding:4px 0;
  background:var(--panel2);border:1px solid var(--line);max-height:420px;overflow-y:auto;box-shadow:0 10px 30px rgba(0,0,0,.55)}
.finds a{display:flex;align-items:baseline;gap:8px;padding:6px 12px;color:var(--text);font-size:14px}
.finds .nm{flex:1;min-width:0}
.finds a:hover,.finds [aria-selected="true"] a{background:#272a31;text-decoration:none}
.finds .none{padding:6px 12px;color:var(--dim);font-size:14px}

footer.foot{border-top:1px solid var(--line);color:var(--dim);font-size:12.5px}
footer.foot .page{padding-top:16px;padding-bottom:22px;display:flex;flex-direction:column;gap:4px}
footer.foot a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}

@media(max-width:760px){
  .page,.topin{padding-left:16px;padding-right:16px}
  /* Columns do not fit: the current level only, the breadcrumb above it. */
  .browse{width:auto}
  .colnav{display:none;flex:1 1 auto;border-right:0}
  .colnav.cur{display:block}
  .colnav ul{height:auto}
  .topin{gap:12px}
  .tabs{gap:14px}
}
/* As in the app: the tabs take their own row under the logo and year. */
@media(max-width:600px){
  .topin{flex-wrap:wrap;height:auto;padding-top:10px;row-gap:4px}
  .tabs{order:3;width:100%;height:40px;justify-content:space-between;gap:10px}
  .tab .tl{display:none}
  .tab.codes{display:none}
  .lede{font-size:15.5px}
}