/* Inokrate brand: deep blue-grey, warm off-white, clay accent under 10%.
   No gradients, no drop shadows, rectangles over circles, left-aligned. */
:root{
  --ground:#F4F3EF;
  --surface:#FAF9F6;
  --surface-sunk:#EEEDE7;
  --ink:#1F2A33;
  --ink-2:#24323C;
  --muted:#5D6A73;
  --rule:#DCD9D1;
  --rule-strong:#C7C3B9;
  --clay:#C6B8A6;
  --clay-ink:#7A6A55;
  --lapsed:#8C4A3F;
  --lapsed-soft:#EFE3DF;
  --clay-soft:#EDE6DC;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#1F2A33;
    --surface:#24323C;
    --surface-sunk:#1A242C;
    --ink:#F4F3EF;
    --ink-2:#E4E5E1;
    --muted:#A7B2BA;
    --rule:#35444F;
    --rule-strong:#465864;
    --clay:#C6B8A6;
    --clay-ink:#D8CCBB;
    --lapsed:#C99183;
    --lapsed-soft:#3A2A26;
    --clay-soft:#2E3A44;
  }
}
:root[data-theme="dark"]{
  --ground:#1F2A33; --surface:#24323C; --surface-sunk:#1A242C;
  --ink:#F4F3EF; --ink-2:#E4E5E1; --muted:#A7B2BA;
  --rule:#35444F; --rule-strong:#465864;
  --clay:#C6B8A6; --clay-ink:#D8CCBB;
  --lapsed:#C99183; --lapsed-soft:#3A2A26; --clay-soft:#2E3A44;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground);color:var(--ink);
  font-family:Inter,"IBM Plex Sans","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px;line-height:1.5;letter-spacing:.005em;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:600;line-height:1.2;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}

/* ── masthead ─────────────────────────────────────────── */
.topbar{border-bottom:1px solid var(--rule);background:var(--surface)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;min-height:52px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:.01em}
.brand .mark{width:13px;height:13px;background:var(--ink);display:block}
.brand:hover .mark{background:var(--clay)}
.topnav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px}
.topnav a{color:var(--muted);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.topnav a:hover{color:var(--ink);border-bottom-color:var(--clay)}

.masthead{background:var(--surface);border-bottom:1px solid var(--rule)}
.masthead .wrap{padding-top:44px;padding-bottom:38px;display:flex;flex-direction:column;gap:18px}
.masthead h1{font-size:34px;max-width:20ch}
.masthead .lede{max-width:64ch;color:var(--muted);font-size:16px;line-height:1.55}
.figures{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule);margin-top:12px}
.figure{padding:16px 26px 4px 0;margin-right:26px;border-right:1px solid var(--rule);flex:0 1 auto}
.figure:last-child{border-right:0}
.figure b{display:block;font-family:"IBM Plex Mono",monospace;font-size:25px;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}
.figure span{font-size:12.5px;color:var(--muted);display:block;margin-top:3px;max-width:22ch}

/* ── view tabs ────────────────────────────────────────── */
/* The three views are the primary navigation of the page, so they are built
   as a segmented control rather than a row of underlined words. */
.views{border-bottom:1px solid var(--rule);background:var(--ground);position:sticky;top:0;z-index:30}
.views .wrap{display:flex;gap:0;overflow-x:auto;padding-top:16px;padding-bottom:16px}
.viewtab{background:var(--surface);border:1px solid var(--rule-strong);border-right-width:0;
  font:inherit;font-size:15px;font-weight:500;color:var(--muted);
  padding:11px 20px;cursor:pointer;white-space:nowrap;display:flex;align-items:baseline;gap:9px}
.viewtab:first-child{border-right-width:0}
.viewtab:last-child{border-right-width:1px}
.viewtab:hover{color:var(--ink);background:var(--surface-sunk)}
.viewtab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground);font-weight:600}
.viewtab[aria-selected="true"]+.viewtab{border-left-color:var(--ink)}
.viewtab .n{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);font-weight:400}
.viewtab[aria-selected="true"] .n{color:var(--ground);opacity:.65}
@media (max-width:620px){
  .views .wrap{flex-direction:column;gap:0}
  .viewtab{border-right-width:1px;border-bottom-width:0;justify-content:space-between}
  .viewtab:last-child{border-bottom-width:1px}
}
/* Nothing may set a width wider than the screen; wide content scrolls inside
   its own box instead of dragging the page sideways. */
html,body{max-width:100%;overflow-x:hidden}

/* ── controls ─────────────────────────────────────────── */
.controls{padding:18px 0 0}
.viewnote{font-size:13.5px;color:var(--muted);max-width:70ch;margin-bottom:14px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
input[type=search],select{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-strong);border-radius:0;padding:9px 11px;height:38px}
input[type=search]{flex:1 1 280px;min-width:200px}
input[type=search]::placeholder{color:var(--muted)}

/* Native selects round their own corners on macOS, which fights the square
   search field beside them - so the chrome is reset and the chevron drawn. */
.selectwrap{position:relative;display:inline-flex}
.selectwrap select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:34px;cursor:pointer;width:100%}
.selectwrap::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;
  margin-top:-5px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);pointer-events:none}
.selectwrap:hover select{border-color:var(--ink)}
.selectwrap select:disabled{color:var(--muted);background:var(--surface-sunk);cursor:default}
.selectwrap:has(select:disabled)::after{opacity:.4}
:focus-visible{outline:2px solid var(--clay-ink);outline-offset:1px}

/* Topic filters are pills, and shaped like it. */
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.tagbtn{font:inherit;font-size:12.5px;line-height:1;background:var(--surface);
  border:1px solid var(--rule-strong);color:var(--muted);padding:7px 13px;
  border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tagbtn:hover{color:var(--ink);border-color:var(--ink)}
.tagbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.tagbtn[aria-pressed="true"] .n{color:var(--ground);opacity:.7}
.tagbtn .n{font-family:"IBM Plex Mono",monospace;font-size:11px;opacity:.6}
.resultline{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;
  margin:14px 0 0;padding-bottom:10px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--rule)}
.linkbtn{background:none;border:0;font:inherit;font-size:12.5px;color:var(--clay-ink);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:0}

/* ── rows ─────────────────────────────────────────────── */
.rows{margin-bottom:56px}
.row{border-bottom:1px solid var(--rule)}
.rowhead{width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;cursor:pointer;
  display:grid;grid-template-columns:3px 1fr auto;gap:0 16px;align-items:center;padding:0}
.rowhead:hover .rtitle{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--clay)}
.mark-state{align-self:stretch;background:transparent}
.mark-state.soon{background:var(--clay)}
.mark-state.lapsed{background:var(--lapsed)}
.rbody{padding:13px 0 13px 2px;min-width:0}
.rtitle{font-weight:500;font-size:15px;line-height:1.35;display:block}
.rmeta{font-size:12.5px;color:var(--muted);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rmeta .sep{color:var(--rule-strong)}
.rside{display:flex;align-items:center;gap:18px;padding:13px 0}
.when{font-family:"IBM Plex Mono",monospace;font-size:12.5px;text-align:right;min-width:92px;font-variant-numeric:tabular-nums}
.when small{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:Inter,sans-serif;letter-spacing:.12em}
.pts{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:500;text-align:right;min-width:46px;font-variant-numeric:tabular-nums}
.pts small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:Inter,sans-serif;font-weight:400}
.pts.unknown{color:var(--muted);font-size:11px;line-height:1.25;min-width:62px;letter-spacing:.02em;white-space:normal}
.chip{font-size:11px;padding:2px 7px;border:1px solid var(--rule-strong);color:var(--muted);white-space:nowrap}
.chip.clay{background:var(--clay-soft);border-color:transparent;color:var(--clay-ink)}
.chip.lapsed{background:var(--lapsed-soft);border-color:transparent;color:var(--lapsed)}
.chip.src{border-color:var(--rule-strong);letter-spacing:.06em;text-transform:uppercase;font-size:10px}

.detail{display:none;padding:2px 0 20px 19px;border-left:1px solid var(--rule);margin-left:1px}
.row.open .detail{display:block}
.row.open{background:var(--surface)}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 24px;margin:10px 0 0}
.dl>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.dl dt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.dl dd{margin:0;font-size:13.5px;word-break:break-word}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.act{font:inherit;font-size:12.5px;padding:7px 12px;border:1px solid var(--ink);background:none;color:var(--ink);
  cursor:pointer;text-decoration:none;display:inline-block;border-radius:0}
.act:hover{background:var(--ink);color:var(--ground)}
.act[data-on="1"]{background:var(--ink);color:var(--ground)}
.empty{padding:44px 0;color:var(--muted);max-width:60ch}

/* ── shortlist ────────────────────────────────────────── */
.shortlist{position:sticky;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--ink);display:none}
.shortlist.on{display:block}
.shortlist .wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.shortlist b{font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:500}
.shortlist .names{flex:1 1 240px;min-width:0;font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── footer ───────────────────────────────────────────── */
footer.site{background:var(--surface);border-top:1px solid var(--rule);margin-top:20px}
footer.site .wrap{padding-top:44px;padding-bottom:52px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px}
footer h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:12px}
footer p,footer li{font-size:13px;color:var(--muted);line-height:1.6}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
footer a:hover{border-bottom-color:var(--clay)}
.srclist li{display:flex;flex-direction:column;gap:1px}
.srclist .stale{color:var(--lapsed)}
.colophon{border-top:1px solid var(--rule)}
.colophon .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:16px;padding-bottom:26px;font-size:12px;color:var(--muted)}

/* ── small screens ───────────────────────────────────────
   A phone reads this standing on a site, so the row has to survive at 360px:
   the date and credit move under the title rather than fighting it for width,
   and the view switcher stops being sticky once it is a stack three deep. */
@media (max-width:760px){
  .wrap{padding:0 18px}
  .masthead .wrap{padding-top:30px;padding-bottom:26px}
  .masthead h1{font-size:26px}
  .masthead .lede{font-size:15px}
  .figures{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .figure{border-right:0;border-bottom:1px solid var(--rule);margin-right:0;padding:12px 12px 12px 0}
  .figure:nth-child(odd){border-right:1px solid var(--rule);padding-right:16px}
  .figure b{font-size:21px}
  .figure span{font-size:11.5px}
  .views{position:static}
  .views .wrap{padding-top:14px;padding-bottom:0;overflow:visible}
  .controls{padding-top:14px}
  input[type=search]{flex:1 1 100%}
  .selectwrap{flex:1 1 calc(50% - 4px)}
  .filters{gap:8px}

  .rowhead{grid-template-columns:3px 1fr;gap:0 12px}
  .rside{grid-column:2;padding:0 0 13px;justify-content:flex-start;gap:16px}
  .rbody{padding-bottom:7px}
  .when,.pts{text-align:left;min-width:0}
  .when small{display:inline;margin-right:6px}
  .pts small{display:inline;margin-left:5px}
  .pts{font-size:15px}
  .pts.unknown{min-width:0}
  .detail{padding-left:14px;margin-left:0}
  .shortlist .wrap{gap:10px 16px}
  .names{flex-basis:100%}
  footer.site .wrap{padding-top:32px;padding-bottom:36px;gap:26px}
}
@media (max-width:420px){
  .viewtab{padding:10px 14px;font-size:14px}
  .rtitle{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── static pages ─────────────────────────────────────────
   The generated discipline, body and course pages: no JavaScript, content in
   the HTML, same visual system as the tool it sits beside. */
.crumbbar{border-bottom:1px solid var(--rule);background:var(--surface)}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:9px 0;font-size:12.5px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.crumbs a:hover{color:var(--ink);border-bottom-color:var(--clay)}
.crumb-sep{color:var(--rule-strong)}

.article{padding-top:40px;padding-bottom:64px;max-width:820px}
.article h1{font-size:31px;margin:10px 0 0;max-width:20ch}
.article h2{font-size:19px;margin:40px 0 14px;display:flex;align-items:baseline;gap:10px}
.article .lede{font-size:17px;line-height:1.6;color:var(--muted);max-width:66ch;margin-top:14px}
.article .lede a,.article p a,.faq a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.article .lede a:hover,.article p a:hover,.faq a:hover{border-bottom-color:var(--clay)}
.article p{max-width:66ch;line-height:1.6}
.count{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:400;color:var(--muted)}
.note{font-size:13.5px;color:var(--muted);margin:-6px 0 12px}
.caveat{font-size:13.5px;color:var(--muted);border-left:2px solid var(--clay);padding-left:14px;margin-top:26px}

.slist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.srow{display:flex;gap:16px;align-items:baseline;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--rule)}
.srow-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.srow-title{font-size:15px;font-weight:500}
.srow-title a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.srow-title a:hover{border-bottom-color:var(--clay)}
.srow-meta{font-size:12.5px;color:var(--muted)}
.srow-credits{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);
  white-space:nowrap;font-variant-numeric:tabular-nums}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 26px;
  margin:26px 0 0;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.facts>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.facts dt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font-size:14px;word-break:break-word}
.cta{margin-top:24px}
.faq{margin-top:8px}
.faq h2{font-size:17px;margin-bottom:8px}
.cols{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 20px}
.cols a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.cols a:hover{border-bottom-color:var(--clay)}

/* Browse block on the index, which is also how a crawler reaches the hubs. */
.browse{border-top:1px solid var(--rule);padding:34px 0 10px;margin-top:10px}
.browse h2{font-size:17px;margin-bottom:6px}
.browse p{font-size:13.5px;color:var(--muted);max-width:66ch;margin-bottom:16px}

@media (max-width:760px){
  .article{padding-top:26px;padding-bottom:44px}
  .article h1{font-size:25px}
  .srow{flex-direction:column;gap:4px}
  .srow-credits{align-self:flex-start}
}