@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Google Sans everywhere — the internship design system's face. Kept as
     four variables so existing var(--font-display/body/mono/serif) usages all
     resolve without touching each declaration. The reference resolves even
     its "mono" role to Google Sans (mono-look comes from size / uppercase /
     letter-spacing, not the face). KaTeX keeps its own Computer Modern for
     math, same as the internship pages. */
  --font-display: 'Google Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Google Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Google Sans', ui-sans-serif, system-ui, sans-serif;
  --font-serif:   'Google Sans', ui-sans-serif, system-ui, sans-serif;

  /* Editorial lab-notebook palette (from the sample): warm-paper ground,
     deep-ink text, one teal accent, rust highlight, warm hairline rules. */
  --bg:           #FBFAF7;   /* warm paper ground */
  --surface:      #FBFAF7;   /* cards sit on the paper, defined by their rule */
  --surface-hi:   #FFF1DD;   /* warm cream — insets / eq blocks / panels */
  --surface-hover:#FFFDF9;   /* barely-there warm lift */
  --track:        #FFF1DD;
  --border:       #ECDAC9;   /* warm hairline */
  --border-hi:    #DEC7AC;   /* stronger warm rule */

  --fg:           #14132E;   /* deep ink — titles/text */
  --fg-2:         #56546B;   /* secondary text */
  --fg-3:         #7C7A90;   /* muted labels */
  --fg-dim:       #9B97AD;

  --accent:       #0F7A8F;   /* teal: headings, links, idx codes, buttons */
  --accent-soft:  rgba(15, 122, 143, 0.10);
  --link:         #0F7A8F;

  --green:        #2F7A6B;   /* personal projects/tasks accent (harmonised) */
  --green-soft:   rgba(47, 122, 107, 0.10);

  /* Rust inline-code / highlight on warm cream */
  --code-fg:      #C2410C;
  /* Python token colours for plan snippets, drawn from the palette above so
     the block reads as part of the page rather than a pasted terminal. */
  --code-kw:      #0F7A8F;   /* teal, same as the accent */
  --code-str:     #2F7A6B;   /* green */
  --code-com:     #9B97AD;   /* dim, italic */
  --code-num:     #C2410C;   /* rust */
  --code-fn:      #3D3A7A;   /* indigo ink */
  --code-bg:      #FFF1DD;
  --code-border:  #ECDAC9;

  --status-active:  #0F7A8F;
  --status-done:    #56546B;
  --status-blocked: #C2410C;
  --status-idle:    #9B97AD;

  --radius:    7px;
  --radius-sm: 4px;
  /* Fluid: tracks the viewport on regular monitors (less dead space on the
     sides), caps out on very wide ones so lines never run away. */
  --max-w:   min(92vw, 1500px);
  --gutter:    32px;

  --shadow:       0 1px 2px rgba(20, 19, 46, 0.03), 0 1px 3px rgba(20, 19, 46, 0.05);
  --shadow-hover: 0 8px 26px -16px rgba(20, 19, 46, 0.40);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 19.5px;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tabular { font-variant-numeric: tabular-nums; }

a { color: var(--link); }

.shell {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 32px var(--gutter) 96px;
}
/* Prose pages (wiki article, task plan/results) read as a single column, so
   they get a narrower centred shell instead of the wide grid width — nav and
   body share one column, centred on the page. */
.shell.wiki-skin,
.shell.prose {
  max-width: min(92vw, 900px);
}

/* ---------- Top nav ---------- */
.nav {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.nav a {
  text-decoration: none;
  color: var(--fg-3);
  font-size: 15px;
  font-weight: 500;
  padding: 4px 0 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav a:hover {
  color: var(--fg);
  border-bottom-color: var(--border-hi);
}
.nav a.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

/* ---------- Breadcrumb ---------- */
.crumbs {
  display: flex;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 18px;
}
.crumbs .accent { color: var(--accent); }
.crumbs span + span::before {
  content: "·";
  padding: 0 8px;
  color: var(--fg-dim);
}

/* ---------- Page title + meta ---------- */
.page-title {
  font-family: var(--font-display);
  font-size: 35px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--fg);
  margin: 0 0 14px;
}
.page-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 15px;
  color: var(--fg-2);
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.page-meta::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-soft);
  flex-shrink: 0;
}

/* ---------- Callout (Now block) ---------- */
.callout {
  background: linear-gradient(135deg, var(--accent-soft), transparent 60%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 28px;
}
.callout .head {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  font-weight: 600;
}
.callout ul {
  margin: 0;
  padding-left: 18px;
  color: var(--fg);
}
.callout li {
  margin-bottom: 6px;
  font-size: 16px;
}
.callout li:last-child { margin-bottom: 0; }

/* ---------- Stats strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.stat .num {
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.stat .label {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
}

/* ---------- Section header ---------- */
.section-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 40px 0 16px;
}
.section-h .title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.section-h .sub {
  font-size: 14px;
  color: var(--fg-3);
}

/* ---------- Card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-hi);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}
.card:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow-hover);
}
.card.s-active   { border-left-color: var(--status-active); }
.card.s-done     { border-left-color: var(--status-done); }
.card.s-blocked  { border-left-color: var(--status-blocked); }
.card.s-idle     { border-left-color: var(--status-idle); }
.card:hover.s-active  { border-left-color: var(--status-active); }
.card:hover.s-done    { border-left-color: var(--status-done); }
.card:hover.s-blocked { border-left-color: var(--status-blocked); }
.card:hover.s-idle    { border-left-color: var(--status-idle); }

.card .head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.card .ttl {
  font-weight: 600;
  font-size: 17px;
  color: var(--fg);
}
.card .body {
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-2);
}
.card .body p { margin: 6px 0; }
.card .body p.authors {
  color: var(--fg-3);
  font-size: 15px;
}
.card .meta {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: var(--fg-3);
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ---------- Project code chip ---------- */
.pcode {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* ---------- Status pill (outlined) ---------- */
.pill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid var(--border-hi);
  color: var(--fg-2);
  background: transparent;
  letter-spacing: 0.06em;
  line-height: 1;
}
.pill.s-active  { border-color: var(--accent); color: #fff; background: var(--accent); }
.pill.s-done    { border-color: var(--border-hi); color: var(--fg-3); }
.pill.s-blocked { border-color: var(--status-blocked); color: var(--status-blocked); }
.pill.s-idle    { border-color: var(--border-hi); color: var(--fg-3); }

/* ---------- Priority chip ---------- */
.chip {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--fg-2);
  line-height: 1.4;
}
.chip.high { color: var(--fg);   border-color: var(--border-hi); font-weight: 600; }
.chip.med  { color: var(--fg-2); }
.chip.low  { color: var(--fg-3); }

/* ---------- Empty placeholder ---------- */
.empty {
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--fg-3);
  font-size: 15px;
}

/* ---------- Article (progress log, notes) ---------- */
.article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 16px;
}
.article h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--fg);
}
.article h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 18px 0 8px;
}
.article .ameta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--fg-3);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.article .tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tag {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 100px;
  color: var(--fg-2);
}
.article p { margin: 0 0 10px; color: var(--fg); font-size: 16.5px; font-weight: 500; }
.article p:last-child { margin-bottom: 0; }
.article ul, .article ol { margin: 8px 0 12px; padding-left: 22px; color: var(--fg); }
.article li { margin-bottom: 5px; font-size: 16.5px; font-weight: 500; }
.article code,
.board-card .body code,
.work-card .wc-blurb code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--code-fg);
}
.article a { color: var(--link); }
.article strong { color: var(--fg); font-weight: 600; }

/* ---------- Wiki article extras (TOC, equations, references) ---------- */
.toc {
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  margin: 8px 0 18px;
  max-width: 360px;
  font-size: 15px;
}
.toc .toc-h {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
  margin-bottom: 6px;
}
.toc ol { margin: 0; padding-left: 22px; color: var(--fg-2); }
.toc li { margin-bottom: 3px; font-size: 15px; }
.toc a { color: var(--fg-2); text-decoration: none; }
.toc a:hover { color: var(--link); }

.eq {
  display: block;
  margin: 14px 0;
  padding: 4px 0;
  color: var(--fg);
  overflow-x: auto;
  font-size: 1em;
  text-align: center;
}
.eq .katex-display {
  margin: 0;
}
.eq .katex {
  color: var(--fg);
  font-size: 1.05em;
}

/* Theorem / corollary boxes (wiki articles) */
.thm {
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-left: 3px solid var(--link);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 14px 0 16px;
}
.thm .thm-h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 6px;
}
.wiki-skin .thm {
  font-family: var(--font-body);
  background: var(--surface);
  border-radius: 2px;
}

/* Results tables. Editorial, not spreadsheet: horizontal rules only, no
   vertical lines, and the header carries its weight with a rule rather than
   a fill. Scrolls sideways rather than pushing the page wide. */
.rt-wrap { overflow-x: auto; margin: 20px 0 26px; }
.rt-caption {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-3);
  margin: 0 auto 10px;
  max-width: 78ch;
  text-align: center;
}
table.rtable {
  border-collapse: collapse;
  font-size: 15px;
  margin-left: auto;
  margin-right: auto;
}
table.rtable th,
table.rtable td {
  padding: 8px 20px 8px 0;
  text-align: right;
  white-space: nowrap;
  border: 0;
}
/* Figures flush right, prose flush left and allowed to wrap. */
table.rtable .rt-fig  { text-align: right; }
table.rtable .rt-text {
  text-align: left;
  white-space: normal;
  color: var(--fg-2);
  max-width: 40ch;
}
table.rtable thead th.rt-text { color: var(--fg-2); }
table.rtable th:last-child,
table.rtable td:last-child { padding-right: 0; }

/* Header: small and letter-spaced, over a firm rule. No fill, so it cannot
   disappear into the paper ground. Case is NEVER transformed -- these labels
   carry notation, and uppercase turns q(z*) into Q(Z*) and beta into B. */
table.rtable thead th {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-2);
  padding-bottom: 7px;
  border-bottom: 1.5px solid var(--border-hi);
  vertical-align: bottom;
}
table.rtable tbody td {
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}
table.rtable tbody tr:last-child td { border-bottom: 1.5px solid var(--border-hi); }
table.rtable tbody tr:hover td { background: var(--surface-hi); }

/* First column names the row, so it is ink and left-aligned. */
table.rtable td.rt-name,
table.rtable thead th:first-child { text-align: left; }
table.rtable td.rt-name {
  font-weight: 500;
  color: var(--fg);
  padding-right: 32px;
  white-space: normal;
}
/* A bolded cell is the one to read. Teal, so the eye lands on it. */
table.rtable td strong {
  color: var(--accent);
  font-weight: 600;
}

/* The short notes under the tables. At most three. Plain round bullets,
   body text weight -- readable ink, not a footnote. */
ul.r-notes {
  list-style: disc;
  margin: 22px 0 26px;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 82ch;
}
ul.r-notes li { margin: 0 0 10px; }
ul.r-notes li:last-child { margin-bottom: 0; }
ul.r-notes strong { color: var(--fg); font-weight: 600; }

/* Small data tables (wiki articles) */
.article table.wtable {
  border-collapse: collapse;
  margin: 12px 0 16px;
  font-size: 15.5px;
}
.article table.wtable th,
.article table.wtable td {
  border: 1px solid var(--border);
  padding: 4px 10px;
  text-align: right;
}
.article table.wtable th {
  background: var(--surface);
  font-weight: 600;
}
.article table.wtable td:first-child,
.article table.wtable th:first-child { text-align: left; }
.wiki-skin .article table.wtable { font-family: var(--font-body); }

.article .cite {
  text-decoration: none;
  color: var(--link);
}
.article .cite::before { content: "["; }
.article .cite::after  { content: "]"; }

.refs {
  border-top: 1px solid var(--border);
  margin-top: 22px;
  padding-top: 14px;
}
.refs .refs-h {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 10px;
}
.refs ol { margin: 0; padding-left: 22px; color: var(--fg-2); }
.refs li { margin-bottom: 6px; font-size: 15px; }
.refs li a { word-break: break-word; }

.article h4 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-2);
  margin: 14px 0 6px;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  margin-top: 64px;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--fg-dim);
}

/* =====================================================
   Wikipedia-style article skin (.wiki-skin)
   ===================================================== */
.wiki-skin {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
}

/* Page header: thin underline like Wikipedia */
.wiki-skin .page-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.wiki-skin .page-meta {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-3);
  margin-bottom: 28px;
}
.wiki-skin .page-meta::before { display: none; }

/* Article container: drop the card chrome. Width is handled by the narrower
   prose shell (.shell.wiki-skin) so nav and article share one centred column. */
.wiki-skin .article {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 48px;
}

/* Wikipedia-style H2/H3: serif, thin underline on H2 */
.wiki-skin .article h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin: 28px 0 12px;
  color: var(--fg);
}
.wiki-skin .article h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  margin: 22px 0 8px;
}
.wiki-skin .article h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0;
  color: var(--fg);
  margin: 16px 0 6px;
}

/* Article body text */
.wiki-skin .article p,
.wiki-skin .article li {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.65;
}
.wiki-skin .article strong {
  font-weight: 700;
}
.wiki-skin .article em {
  font-style: italic;
  font-weight: 500;
}
.wiki-skin .article ul,
.wiki-skin .article ol { padding-left: 26px; }

/* Article meta row: small sans-serif row under H2 */
.wiki-skin .ameta {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-3);
}
.wiki-skin .tag {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Wikipedia-style TOC */
.wiki-skin .toc {
  font-family: var(--font-body);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 10px 16px 12px;
  max-width: 360px;
  font-size: 15.5px;
  margin: 14px 0 22px;
}
.wiki-skin .toc .toc-h {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  color: var(--fg);
  text-align: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.wiki-skin .toc ol { padding-left: 22px; color: var(--fg); }
.wiki-skin .toc li { font-size: 15.5px; margin-bottom: 2px; }
.wiki-skin .toc a { color: var(--link); text-decoration: none; }
.wiki-skin .toc a:hover { text-decoration: underline; }

/* Inline citations: Wikipedia [1] superscript style */
.wiki-skin .article .cite {
  color: var(--link);
  text-decoration: none;
  font-size: 0.85em;
}
.wiki-skin .article a { color: var(--link); text-decoration: none; }
.wiki-skin .article a:hover { text-decoration: underline; }

/* References section: smaller font, hanging indent */
.wiki-skin .refs {
  border-top: none;
  margin-top: 18px;
  padding-top: 0;
}
.wiki-skin .refs .refs-h {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: 10px;
}
.wiki-skin .refs ol {
  padding-left: 24px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--fg);
  line-height: 1.55;
}
.wiki-skin .refs li {
  font-size: 14.5px;
  margin-bottom: 4px;
  padding-left: 4px;
}

/* Code/inline-tt in wiki articles: orange highlight */
.wiki-skin .article code {
  font-family: var(--font-mono);
  font-size: 14.5px;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  color: var(--code-fg);
}

/* Crumbs row above the title */
.wiki-skin .crumbs { font-family: var(--font-body); }

/* Subtitle under page-title, Wikipedia-style "From ..." line */
.subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: var(--fg-3);
  margin: -4px 0 14px;
}

/* ---------- Article tab bar ---------- */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin: 18px 0 28px;
  flex-wrap: wrap;
}
.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--fg-3);
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: -1px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.tab-btn:hover {
  color: var(--fg);
  background: var(--surface-hi);
}
.tab-btn.active {
  color: var(--fg);
  background: var(--bg);
  border-color: var(--border);
  border-bottom-color: var(--bg);
  font-weight: 600;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* =====================================================
   Kanban board (Projects, Progress)
   ===================================================== */


/* =====================================================
   Work grid (landing — curated pieces of work)
   ===================================================== */
/* Projects section heading with a trailing divider line */
.proj-h {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 16px;
}
.proj-h + .work-grid { margin-top: 0; }
.work-grid + .proj-h { margin-top: 34px; }
.proj-h .lbl {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.proj-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
/* Priority-tier headings (P0 / P1 / P2) read as accented markers, distinct
   from the muted grey of the Active/Complete section labels. */
.proj-h.tier .lbl {
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.08em;
}

/* Code snippets inside a task plan. --font-mono is a sans stack in this
   theme, so a genuine monospace family is named explicitly. */
.snip {
  margin: 0;
  padding: 12px 14px;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg);
  white-space: pre;
  tab-size: 4;
}
.snip code {
  font: inherit;
  background: none;
  color: inherit;
  padding: 0;
}
.snip .c-kw  { color: var(--code-kw); font-weight: 600; }
.snip .c-str { color: var(--code-str); }
.snip .c-com { color: var(--code-com); font-style: italic; }
.snip .c-num { color: var(--code-num); }
.snip .c-fn  { color: var(--code-fn); font-weight: 600; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 18px;
  margin: 8px 0 28px;
}
.work-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.work-card:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.work-card .wc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.work-card .wc-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--fg);
}
.work-card .wc-blurb {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--fg);
}
.work-card .wc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.work-card .wc-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.work-card .wc-note {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.work-card .wc-arrow {
  font-size: 18px;
  color: var(--fg-dim);
  transition: transform 0.18s, color 0.18s;
  flex-shrink: 0;
}
.work-card:hover .wc-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* =====================================================
   Top-level tabs (Tasks / Wiki) + panels
   ===================================================== */
.toptabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 4px 0 28px;
}
.toptab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-3);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 8px 14px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.toptab-btn:hover { color: var(--fg); }
.toptab-btn.active { color: var(--fg); border-bottom-color: var(--accent); }

.top-panel { display: none; }
.top-panel.active { display: block; }

/* =====================================================
   Board card extras (tags row, link-buttons, highlights)
   ===================================================== */
.lnk {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  padding: 4px 11px;
  line-height: 1.5;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lnk:hover {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}
.board-card .body .hl,
.work-card .wc-blurb .hl {
  color: var(--fg);
  font-weight: 600;
}
.board-card .body strong,
.work-card .wc-blurb strong { color: var(--fg); font-weight: 600; }
.board-card .body em,
.work-card .wc-blurb em { font-style: italic; color: var(--fg); font-weight: 600; }

/* In-card display equations */
.board-card .eq,
.work-card .eq {
  margin: 11px 0 2px;
  padding: 9px 10px;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  text-align: center;
}
.board-card .eq .katex,
.work-card .eq .katex { font-size: 0.98em; color: var(--fg); }
.board-card .eq .katex-display,
.work-card .eq .katex-display { margin: 0; }
.work-card .eq { background: var(--surface-hi); }

/* =====================================================
   Personal projects/tasks — green accent (.cat-personal)
   ===================================================== */
/* Project (work) cards */
.work-card.cat-personal .wc-title { color: var(--green); }
.work-card.cat-personal .wc-note  { color: var(--green); }
.work-card.cat-personal .pill.s-active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.work-card.cat-personal .pill.s-done {
  border-color: var(--green);
  color: var(--green);
  background: transparent;
}
/* Task (board) cards */

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 900px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  :root { --gutter: 18px; }
  .shell { padding-top: 22px; }
  .page-title { font-size: 32px; }
  .nav { gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav a { white-space: nowrap; }
  .toptabs { gap: 2px; }
  .work-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   Motion — entrance, stagger, micro-interactions.
   Self-contained: this whole block can be removed to
   revert to the static site. Fully disabled under
   prefers-reduced-motion (see the query at the end).
   ===================================================== */
:root {
  /* easeOutQuint — decisive settle, no bounce */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion:      0.5s;
  --motion-fast: 0.22s;
}

/* Smooth-scroll for wiki deep-links (#if-3, #llm-2, …) */
html { scroll-behavior: smooth; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-in-sm {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Page load: header + tabs ease in on first paint ---- */
.backlink    { animation: rise-in var(--motion) var(--ease-out) both; }
.page-title  { animation: rise-in var(--motion) 0.04s var(--ease-out) both; }
.pnav        { animation: rise-in var(--motion) 0.09s var(--ease-out) both; }

/* ---- Tab switch: the active panel fades-and-rises. Because
   panels toggle display:none <-> block, this replays on every
   switch, not just first load. ---- */
#mount { animation: fade-in var(--motion-fast) var(--ease-out) both; }

/* ---- Staggered card cascade inside the active panel ----
   Newly shown/injected cards animate; nth-child gives the stagger. */
.work-grid .work-card,
.task-group {
  animation: rise-in var(--motion) var(--ease-out) both;
}
.work-grid .work-card:nth-child(1),
.task-group:nth-child(1) { animation-delay: 0.02s; }
.work-grid .work-card:nth-child(2),
.task-group:nth-child(2) { animation-delay: 0.03s; }
.work-grid .work-card:nth-child(3),
.task-group:nth-child(3) { animation-delay: 0.08s; }
.work-grid .work-card:nth-child(4) { animation-delay: 0.011s; }
.work-grid .work-card:nth-child(5) { animation-delay: 0.014s; }
.work-grid .work-card:nth-child(6) { animation-delay: 0.017s; }
.work-grid .work-card:nth-child(n+7) { animation-delay: 0.02s; }

/* Cards within a kanban column stagger after their column settles */
.task-group .task-row {
  animation: rise-in-sm var(--motion) var(--ease-out) both;
}
.task-group .task-row:nth-child(2) { animation-delay: 0.07s; }
.task-group .task-row:nth-child(3) { animation-delay: 0.10s; }
.task-group .task-row:nth-child(4) { animation-delay: 0.13s; }
.task-group .task-row:nth-child(n+5) { animation-delay: 0.16s; }

/* ---- Wiki: selected article eases in ---- */
.article { animation: rise-in var(--motion) var(--ease-out) both; }

/* ---- Micro-interactions ---- */
/* Refine the existing card lift with the shared easing + faster feel */
.work-card, .board-card {
  transition: box-shadow var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.work-card:active { transform: translateY(-1px) scale(0.995); }

/* Tactile press on all tab buttons */
.toptab-btn, .tab-btn { transition: color 0.15s, border-color 0.15s, transform var(--motion-fast) var(--ease-out); }
.toptab-btn:active, .tab-btn:active { transform: translateY(1px); }

/* Link buttons + wiki arrow already animate; give the arrow a touch more travel */
.work-card:hover .wc-arrow { transform: translateX(4px); }

/* ---- Accessibility: honour reduced-motion. Kill every
   animation/transition and disable smooth-scroll. ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* =====================================================
   Multi-page overhaul: vertical task lists, task detail
   ===================================================== */

/* ---------- breadcrumbs / page chrome ---------- */
.page-sub {
  margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--fg-2);
  max-width: 62ch;
}
.page-links { display: flex; gap: 10px; margin: 14px 0 26px; }

/* ---------- task group (replaces the kanban column) ---------- */
.task-group { margin: 0 0 34px; }
.tg-head {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 2px 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.tg-head .name {
  font-size: 13px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-3);
}
.tg-head .count {
  font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums;
}
.expand-all {
  margin-left: auto; font: inherit; font-size: 12px; cursor: pointer;
  background: none; border: 1px solid var(--border); border-radius: 5px;
  padding: 3px 9px; color: var(--fg-2);
}
.expand-all:hover { border-color: var(--fg-3); color: var(--fg); }

/* ---------- the digest row ---------- */
.task-row {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 10px; background: var(--surface);
  border-left: 3px solid var(--border);
}
.task-row.s-active { border-left-color: var(--accent); }
.task-row.v-pass   { border-left-color: #2f9e5e; }
.task-row.v-fail   { border-left-color: #c0503f; }
.task-row.v-mixed  { border-left-color: #c08a2e; }

.tr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tr-date { margin-left: auto; font-size: 12px; color: var(--fg-3); }
.tr-title { font-size: 16px; font-weight: 600; line-height: 1.35; margin-bottom: 5px; }
.tr-summary {
  margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--fg-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tr-foot { display: flex; gap: 10px; }

/* ---------- verdict tag ---------- */
.verdict {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  padding: 2px 6px; border-radius: 4px; border: 1px solid currentColor;
}
.verdict.v-pass  { color: #2f9e5e; }
.verdict.v-fail  { color: #c0503f; }
.verdict.v-mixed { color: #c08a2e; }

/* ---------- metric chips ---------- */
.metrics { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.metric {
  display: inline-flex; align-items: baseline; gap: 5px;
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px;
  font-size: 12px; background: var(--bg);
}
.metric .m-label { color: var(--fg-3); }
.metric .m-value { font-weight: 600; color: var(--fg); }

/* ---------- collapsed done rows ---------- */
details.task-row { padding: 0; }
details.task-row > summary {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px; cursor: pointer; list-style: none;
}
details.task-row > summary::-webkit-details-marker { display: none; }
details.task-row > summary::before {
  content: "\25B8"; color: var(--fg-3); font-size: 11px; transition: transform .12s;
}
details.task-row[open] > summary::before { transform: rotate(90deg); }
details.task-row > summary:hover { background: var(--surface-hi); }
.sm-title {
  font-size: 14px; font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.sm-metric { margin-left: auto; font-size: 12px; color: var(--fg-3); flex: none; }
details.task-row .tr-body { padding: 0 16px 14px; border-top: 1px solid var(--border); }
details.task-row .tr-body .tr-head { padding-top: 12px; }

/* ---------- task detail page ---------- */
.task-head { margin-bottom: 20px; }
.th-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

.detail-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px;
}
.dtab {
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 9px 14px; color: var(--fg-3); margin-bottom: -1px;
}
.dtab:hover:not([disabled]) { color: var(--fg); }
.dtab.active { color: var(--fg); border-bottom-color: var(--accent); }
.dtab[disabled] { cursor: default; opacity: .55; }
.dtab .pending {
  font-size: 10px; margin-left: 6px; padding: 1px 5px;
  border: 1px solid var(--border); border-radius: 4px;
}

.dpanel { display: none; }
.dpanel.active { display: block; }

.dblock { margin: 0 0 26px; }
.dblock-h {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px;
}
.dblock .lead { font-size: 16px; line-height: 1.6; margin: 0; max-width: 68ch; }
.dblock ul { margin: 0; padding-left: 20px; max-width: 68ch; }
.dblock ul li { margin-bottom: 9px; line-height: 1.55; }

/* results */
.headline {
  border-left: 3px solid var(--border); padding: 12px 16px; margin-bottom: 20px;
  background: var(--surface-hi); border-radius: 0 6px 6px 0;
  display: flex; align-items: flex-start; gap: 10px;
}
.headline.v-pass  { border-left-color: #2f9e5e; }
.headline.v-fail  { border-left-color: #c0503f; }
.headline.v-mixed { border-left-color: #c08a2e; }
.headline p { margin: 0; font-size: 16px; line-height: 1.55; }

.findings { margin: 22px 0; }
.finding { padding: 15px 0; border-top: 1px solid var(--border); }
.finding .f-label {
  font-size: 14px; font-weight: 650; color: var(--fg-2);
  line-height: 1.45; margin-bottom: 7px;
}
.finding .f-text { font-size: 14px; line-height: 1.6; max-width: 70ch; }
.finding .f-points { margin: 0; padding-left: 20px; max-width: 70ch; }
.finding .f-points li { font-size: 14px; line-height: 1.6; margin-bottom: 5px; }
.finding .f-points li:last-child { margin-bottom: 0; }

.artifacts { list-style: none; padding: 0; }
.artifacts li { margin-bottom: 7px; font-size: 13px; }
.artifacts .a-note { color: var(--fg-3); margin-left: 9px; }

/* project card counts */
.wc-counts { display: flex; gap: 12px; font-size: 12px; color: var(--fg-3); margin: 10px 0 0; }
.wc-counts .c-doing { color: var(--accent); }
.lnk.primary { font-weight: 600; }

@media (max-width: 640px) {
  .sm-metric { display: none; }
}

/* ---------- project / task two-bar nav ---------- */
.pnav {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border); margin: 0 0 28px;
}
.pnav-tab {
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  color: var(--fg-3); text-decoration: none;
  padding: 9px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pnav-tab:hover { color: var(--fg); }
.pnav-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.pnav-tab.is-disabled { opacity: .5; cursor: default; }
.pnav-tab .pending {
  font-size: 11px; margin-left: 7px; padding: 1px 6px;
  border: 1px solid var(--border); border-radius: 4px;
}

/* whole project card is a link again */
a.work-card { display: block; text-decoration: none; color: inherit; }
.tr-foot { display: flex; gap: 8px; }

/* ---------- fixes: grid overflow + label font ---------- */
/* Grid items default to min-width:auto, so a wide KaTeX block forces the
   column wider than its track and breaks the row. Let cards shrink, and
   scroll the equation inside the card instead. */
.work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-grid > * { min-width: 0; }
.work-card .eq {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.work-card .eq .katex-display { margin: 0; }

/* card footer label reads as prose, not a mono code.
   Must match .work-card .wc-note's specificity (0,2,0) to win. */
.work-card .wc-note {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--accent);
}

/* ---------- back link (replaces the breadcrumb trail) ---------- */
.owner {
  font-family: var(--font-body);
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 10px;
}
.backlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 15px;
  color: var(--fg-3); text-decoration: none;
  margin-bottom: 18px;
  transition: color .15s;
}
.backlink .ba { font-size: 17px; transition: transform .15s; }
.backlink:hover { color: var(--accent); }
.backlink:hover .ba { transform: translateX(-3px); }

/* =====================================================
   Typography scale-up + polish
   ===================================================== */

/* --- task rows read as documents, not database rows --- */
.task-row { padding: 20px 22px; margin-bottom: 14px; border-radius: 10px; }
.task-row .tr-title  { font-size: 20px; line-height: 1.3; margin-bottom: 8px; }
.task-row .tr-summary{ font-size: 16.5px; line-height: 1.6; margin-bottom: 14px; }
.task-row .pcode     { font-size: 13px; }
.tr-date             { font-size: 13px; }

/* a quiet lift on hover so rows feel handleable */
.task-row { transition: border-color .16s, box-shadow .16s, transform .16s; }
.task-row:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* --- metric chips: roomier, tabular, quietly framed --- */
.metrics { gap: 8px; margin-bottom: 14px; }
.metric {
  font-size: 13.5px; padding: 4px 10px; border-radius: 6px;
  background: var(--surface-hi); border-color: transparent;
}
.metric .m-label { font-size: 12.5px; letter-spacing: .02em; }

/* --- group headers --- */
.tg-head { padding-bottom: 14px; margin-bottom: 18px; }
.tg-head .name { font-size: 14px; }
.tg-head .count {
  font-size: 12px; background: var(--surface-hi); color: var(--fg-2);
  border-radius: 20px; padding: 2px 9px; margin-left: 2px;
}
.task-group { margin-bottom: 46px; }

/* --- collapsed done rows keep the larger scale --- */
details.task-row > summary { padding: 15px 22px; gap: 11px; }
.sm-title  { font-size: 16px; }
.sm-metric { font-size: 13px; }

/* --- detail pages: longer measure, larger body --- */
.dblock .lead { font-size: 18px; line-height: 1.65; }
.dblock ul li { font-size: 16.5px; line-height: 1.65; margin-bottom: 12px; }
.dblock-h { font-size: 13px; margin-bottom: 12px; }
.headline p { font-size: 18px; }
.finding .f-label { font-size: 14.5px; }
.finding .f-text  { font-size: 16.5px; line-height: 1.65; }
.finding { padding: 16px 0; }
.artifacts li { font-size: 14.5px; margin-bottom: 9px; }
.page-sub { font-size: 17px; }

/* --- project cards: hover lift + completion bar --- */
a.work-card { transition: border-color .16s, box-shadow .16s, transform .16s; }
a.work-card:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
a.work-card:hover .wc-arrow { transform: translateX(3px); }
.work-card .wc-arrow { transition: transform .16s; }
.wc-title { font-size: 19px; }
.wc-blurb { font-size: 15.5px; line-height: 1.6; }

/* thin progress rule showing how much of a project is done */
.wc-bar {
  height: 3px; border-radius: 2px; background: var(--surface-hi);
  margin: 14px 0 0; overflow: hidden;
}
.wc-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.wc-counts { margin-top: 9px; font-size: 12.5px; }

/* Card equations are decorative — scale them to fit the column rather than
   clipping mid-symbol. Full-size math lives on the wiki and task pages. */
.work-card .eq { padding: 10px 12px; }
.work-card .eq .katex { font-size: 0.92em; }
.work-card .eq .katex-display > .katex { white-space: normal; }

/* ---------- another step up in scale on the task list ---------- */
.task-row .tr-title   { font-size: 22px; }
.task-row .tr-summary { font-size: 17.5px; }
.dblock ul li, .finding .f-text { font-size: 17px; }
.dblock .lead, .headline p { font-size: 19px; }

/* ---------- cross-references between tasks ---------- */
.tref {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tref:hover { background: var(--accent-soft); border-bottom-style: solid; }

/* ---------- "in flight" callout ---------- */
.callout ul { list-style: none; padding-left: 0; }
.callout li { font-size: 16.5px; line-height: 1.6; }
.callout li a {
  font-weight: 600; color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.callout li a:hover { color: var(--accent); }

/* =====================================================
   Print: the whole design is a paper — let it print like one
   ===================================================== */
@media print {
  .backlink, .pnav, .expand-all, .tr-foot, .lnks, .footer { display: none; }
  body { background: #fff; }
  .task-row, .work-card, .stat {
    border: 1px solid #ccc; box-shadow: none; transform: none;
    break-inside: avoid; page-break-inside: avoid;
  }
  details.task-row > summary { display: none; }
  details.task-row > .tr-body { display: block; }
  details.task-row .tr-body { border-top: none; }
  .tref { color: inherit; border-bottom: none; }
  a { color: inherit; text-decoration: none; }
  .article { max-width: none; }
}

@media (max-width: 720px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* ---------- highlight, everywhere the new pages render prose ----------
   .hl was only ever scoped to the old board/work cards, so ==highlights==
   rendered as plain text in task rows, findings, plans and callouts. */
.tr-summary .hl, .f-text .hl, .f-label .hl,
.dblock .hl, .headline .hl, .callout .hl, .page-sub .hl {
  color: var(--fg);
  font-weight: 600;
}

/* =====================================================
   Declutter: let type and space do the work, not boxes
   ===================================================== */

/* metrics: plain figures, not filled pills */
.metrics { gap: 22px; margin-bottom: 16px; }
.metric {
  background: none; border: none; padding: 0; border-radius: 0;
  gap: 7px; font-size: 14px;
}
.metric .m-label {
  font-size: 13px; color: var(--fg-3); font-weight: 400;
  letter-spacing: 0.01em;
}
.metric .m-value { font-weight: 600; color: var(--fg); }

/* actions: text links, not outlined buttons */
.tr-foot .lnk, .lnks .lnk {
  border: none; padding: 0; border-radius: 0;
  background: none; color: var(--accent);
  font-size: 14.5px; font-weight: 500;
}
.tr-foot { gap: 20px; }
.tr-foot .lnk:hover, .lnks .lnk:hover {
  background: none; color: var(--accent); text-decoration: underline;
  text-underline-offset: 3px;
}
.tr-foot .lnk::after { content: " \2192"; }

/* priority: a quiet mark, only when it's high */
.prio {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #b0793a; font-weight: 600;
}

/* verdict: no outline box, just the word */
.verdict {
  border: none; padding: 0; font-size: 11.5px; letter-spacing: 0.11em;
}

/* group headers: plain count, no pill */
.tg-head .count {
  background: none; padding: 0; color: var(--fg-3);
  font-size: 13px; margin-left: 4px;
}
.expand-all { border: none; padding: 0; color: var(--fg-3); font-size: 13px; }
.expand-all:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* rows: keep the verdict edge, drop the full outline */
.task-row {
  border: none; border-left: 2px solid var(--border);
  border-radius: 0; background: none;
  padding: 4px 0 4px 20px; margin-bottom: 30px;
}
.task-row:hover { box-shadow: none; transform: none; border-left-color: var(--accent); }
details.task-row { padding: 0 0 0 20px; }
details.task-row > summary { padding: 7px 0; }
details.task-row > summary:hover { background: none; }
details.task-row > summary:hover .sm-title { color: var(--accent); }
details.task-row .tr-body { border-top: none; padding: 4px 0 14px; }
details.task-row .tr-body .tr-head { padding-top: 6px; }
.task-group { margin-bottom: 54px; }

/* project cards: quieter footer, no counts row clutter */
.wc-counts { gap: 16px; color: var(--fg-3); }

/* done rows are one-liners — they should read as a tight index, not a list
   of paragraphs, so they get their own much smaller rhythm */
details.task-row { margin-bottom: 0; }
details.task-row[open] { margin: 14px 0; }
details.task-row > summary { padding: 6px 0; }

/* card footer is a single quiet line now */
.work-card .wc-note { font-size: 13.5px; color: var(--fg-3); font-weight: 400; }
.work-card .wc-foot { margin-top: 14px; }

/* =====================================================
   Cards restored — the de-boxing went too far.
   Keep the card as a container; keep the quiet interior.
   ===================================================== */
.task-row {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.task-row.s-active { border-left-color: var(--accent); }
.task-row.v-pass   { border-left-color: #2f9e5e; }
.task-row.v-fail   { border-left-color: #c0503f; }
.task-row.v-mixed  { border-left-color: #c08a2e; }
.task-row:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.task-row.v-pass:hover  { border-left-color: #2f9e5e; }
.task-row.v-fail:hover  { border-left-color: #c0503f; }
.task-row.v-mixed:hover { border-left-color: #c08a2e; }

/* done rows: cards too, just compact ones */
details.task-row { padding: 0; margin-bottom: 8px; }
details.task-row[open] { margin: 8px 0 16px; }
details.task-row > summary { padding: 13px 22px; }
details.task-row > summary:hover { background: var(--surface-hover); border-radius: 8px; }
details.task-row .tr-body { padding: 0 22px 18px; border-top: 1px solid var(--border); }
details.task-row .tr-body .tr-head { padding-top: 14px; }
.task-group { margin-bottom: 48px; }

/* KaTeX inside a metric should sit on the text baseline, not tower over it */
.metric .katex { font-size: 1em; }
.metrics { align-items: baseline; }

/* =====================================================
   Cross-document view transitions (MPA morphing)
   ===================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 180ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in  260ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(6px); } }

/* the morphing pair (card -> page title) gets a longer, smoother beat */
::view-transition-group(*) { animation-duration: 320ms; }

/* =====================================================
   Recently rail
   ===================================================== */
.recently { margin-top: 46px; }
.rec-list { display: flex; flex-direction: column; }
.rec {
  display: grid;
  grid-template-columns: 96px 62px 1fr auto auto;
  align-items: baseline;
  gap: 16px;
  padding: 13px 8px 13px 12px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  border-left: 2px solid transparent;
  transition: border-left-color .16s, background .16s, padding-left .16s;
}
.rec:first-child { border-top: 1px solid var(--border); }
.rec:hover {
  background: var(--surface-hover);
  border-left-color: var(--accent);
  padding-left: 18px;
}
.rec-date  { font-size: 13px; color: var(--fg-3); }
.rec-code  { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); }
.rec-title { font-size: 16px; color: var(--fg); }
.rec:hover .rec-title { color: var(--accent); }
.rec-proj  { font-size: 13px; color: var(--fg-3); text-align: right; }

@media (max-width: 720px) {
  .rec { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .rec-date, .rec-proj { grid-column: 1 / -1; text-align: left; }
}

/* Motion is decoration — never inflict it on people who opted out. */
@media (prefers-reduced-motion: reduce) {
  *, ::view-transition-group(*),
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  @view-transition { navigation: none; }
}

/* ============================================================
   Wiki figures — inline SVG diagrams and plots.
   The dg-* classes are carried by the SVG elements themselves;
   without these rules every shape falls back to solid black
   fill and every connector loses its stroke.
   ============================================================ */

.diagram {
  margin: 26px 0;
  padding: 18px 16px 4px;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.diagram svg { max-width: 100%; height: auto; display: inline-block; }
.diagram figcaption,
figure.plot figcaption {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
  text-align: left;
}

/* boxes */
.dg-img    { fill: var(--bg);      stroke: var(--border-hi); stroke-width: 1.1; }
.dg-box    { fill: var(--bg);      stroke: var(--border-hi); stroke-width: 1.1; }
.dg-net    { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.dg-frozen { fill: var(--bg);      stroke: var(--fg-dim); stroke-width: 1.1; stroke-dasharray: 4 3; }
.dg-atk    { fill: rgba(194, 65, 12, 0.10); stroke: var(--code-fg); stroke-width: 1.2; }
.dg-acc2   { fill: var(--green-soft); stroke: var(--green); stroke-width: 1.2; }
.dg-bar-i  { fill: var(--accent); }
.dg-bar-o  { fill: var(--border-hi); }

/* text */
.dg-ti    { font-family: var(--font-body); font-size: 13.5px; fill: var(--fg); }
.dg-small { font-family: var(--font-body); font-size: 10.8px; fill: var(--fg-3); }
.dg-t     { font-family: var(--font-body); font-size: 12.5px; fill: var(--fg-2); }
.dg-mono  { font-family: var(--font-mono); font-size: 11.5px; fill: var(--fg-2); }
.dg-loss  { font-family: var(--font-body); font-size: 11.5px; fill: var(--fg-3); font-style: italic; }

/* lines */
.dg-line      { stroke: var(--fg-dim);  stroke-width: 1.2; fill: none; }
.dg-line-soft { stroke: var(--border-hi); stroke-width: 1.1; fill: none; stroke-dasharray: 4 3; }
.dg-arrowhead { fill: var(--fg-dim); stroke: none; }

/* data plots rendered from the experiments */
figure.plot {
  margin: 26px 0;
  padding: 16px 14px 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
figure.plot svg,
figure.plot img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
figure.plot.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
figure.plot.pair figcaption { grid-column: 1 / -1; }
@media (max-width: 720px) { figure.plot.pair { grid-template-columns: 1fr; } }
.pl-axis   { stroke: var(--border-hi); stroke-width: 1; fill: none; }
.pl-grid   { stroke: var(--border); stroke-width: 0.8; fill: none; stroke-dasharray: 2 3; }
.pl-tick   { font-family: var(--font-body); font-size: 10.5px; fill: var(--fg-3); }
.pl-lab    { font-family: var(--font-body); font-size: 12px; fill: var(--fg-2); }
.pl-title  { font-family: var(--font-body); font-size: 13.5px; fill: var(--fg); }
.pl-a      { fill: var(--accent); stroke: var(--accent); }
.pl-b      { fill: var(--code-fg); stroke: var(--code-fg); }
.pl-c      { fill: var(--green); stroke: var(--green); }
.pl-dim    { fill: var(--fg-dim); stroke: var(--fg-dim); }
.pl-line   { fill: none; stroke-width: 1.6; }
.pl-thresh { stroke: var(--code-fg); stroke-width: 1.1; fill: none; stroke-dasharray: 5 3; }

/* =====================================================
   Tasks page — internship grid cards (.cards / .card).
   Task groups are a 3-column grid of small cards, exactly
   the internship landing grid: idx line, 21.8px title,
   soft desc, links pinned to a hairline-separated bottom
   row. Done rows stay a compact full-width index.
   ===================================================== */

/* group = the .cards grid; its header spans the row like .group-label */
.task-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 24px;
}
@media (max-width: 980px) { .task-group { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .task-group { grid-template-columns: 1fr; } }

.tg-head {
  grid-column: 1 / -1;
  gap: 12px;
  padding: 0 0 6px;
  margin: 16px 0 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.tg-head .name {
  font-size: 13.8px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--accent);
}
.tg-head .count {
  font-size: 13.8px; font-weight: 500; color: var(--fg-3);
  margin-left: auto; background: none; padding: 0;
}
.expand-all { font-size: 13.8px; margin-left: 0; }

/* the small card */
.task-row,
.task-row.s-active, .task-row.v-pass, .task-row.v-fail, .task-row.v-mixed {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px 18px 20px;
  margin: 0;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.task-row:hover,
.task-row.s-active:hover, .task-row.v-pass:hover,
.task-row.v-fail:hover,  .task-row.v-mixed:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* idx line */
.tr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.task-row .pcode { font-size: 13.8px; font-weight: 700; letter-spacing: 0.1em; }
.tr-date { font-size: 12.5px; color: var(--fg-3); }

/* title + desc, reference sizes */
.task-row .tr-title {
  font-size: 21.8px; font-weight: 700; letter-spacing: -0.01em;
  line-height: 1.25; margin: 4px 0 6px;
}
.task-row .tr-summary {
  font-size: 16.1px; font-weight: 500; line-height: 1.45; color: var(--fg-2);
  margin: 0 0 14px;
  display: block; -webkit-line-clamp: unset;
}

.task-row .metrics { margin-bottom: 14px; gap: 10px 16px; }
.task-row .metric  { font-size: 13px; }

/* links pinned to the bottom = .card-links */
.tr-foot {
  margin-top: auto; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.tr-foot .lnk, .lnks .lnk {
  font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 12px; background: none; text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tr-foot .lnk:hover, .lnks .lnk:hover {
  background: var(--accent); border-color: var(--accent);
  color: #fff; text-decoration: none;
}
.tr-foot .lnk::after { content: none; }

/* done rows: full-width compact index lines, not grid cards */
details.task-row,
details.task-row.v-pass, details.task-row.v-fail, details.task-row.v-mixed,
details.task-row.s-done {
  grid-column: 1 / -1;
  display: block;
  padding: 0; margin: 0;
}
details.task-row:hover,
details.task-row.v-pass:hover, details.task-row.v-fail:hover,
details.task-row.v-mixed:hover, details.task-row.s-done:hover {
  border-color: var(--border);
  transform: none; box-shadow: none;
}
details.task-row .tr-body { padding: 0 22px 18px; border-top: 1px solid var(--border); }
details.task-row .tr-body .tr-head { padding-top: 14px; }
details.task-row .tr-body .tr-foot { padding-bottom: 0; }

/* ---- Dropped tasks -------------------------------------------------------
   A direction we abandoned. Kept visible because the measurement that closed
   it is a result; muted because it is not work in progress. */
.pill.s-dropped { border-color: var(--status-blocked); color: var(--status-blocked); }
.task-row.s-dropped { border-left-color: var(--status-blocked); opacity: .72; }
.task-row.s-dropped:hover { opacity: 1; }
.task-row.s-dropped .sm-title { text-decoration: line-through; text-decoration-thickness: 1px; }
.task-group[data-group="dropped"] .tg-head .name { color: var(--status-blocked); }

/* ---- Plan steps with sub-bullets ---------------------------------------- */
.steps li.has-sub, .criteria li.has-sub { font-weight: 600; margin-top: 12px; }
.steps li.has-sub:first-child, .criteria li.has-sub:first-child { margin-top: 0; }
.steps li.has-sub > ul, .criteria li.has-sub > ul {
  margin: 6px 0 0; padding-left: 20px; font-weight: 400;
}
.steps li.has-sub > ul > li, .criteria li.has-sub > ul > li { margin-bottom: 4px; }

/* =====================================================
   Wikipedia layout: Contents in a left pane, two columns
   (font family unchanged; only sizes/structure match WP)
   ===================================================== */
.shell.wiki-skin { max-width: min(94vw, 1080px); }

.wiki-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

/* left Contents pane — sticky, plain text, no box */
.wiki-toc {
  position: sticky;
  top: 24px;
  align-self: start;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.wiki-toc .toc-h {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
  margin-bottom: 10px;
  border: none;
  text-align: left;
  padding: 0;
}
.wiki-toc ul { list-style: none; margin: 0; padding: 0; }
.wiki-toc li { margin: 0 0 8px; }
.wiki-toc a {
  color: var(--link);
  text-decoration: none;
  display: block;
  padding: 1px 0 1px 12px;
  margin-left: -12px;
  border-left: 2px solid transparent;
}
.wiki-toc a:hover { text-decoration: underline; }
.wiki-toc a.active {
  color: var(--fg);
  font-weight: 600;
  border-left-color: var(--fg-3);
}
.wiki-toc li.top a { color: var(--fg); }

.wiki-main .article { margin-bottom: 40px; }

/* the old inline TOC box is replaced by the left pane */
.wiki-skin .article .toc { display: none; }

/* --- font sizes to Wikipedia proportions (family stays our serif) --- */
.wiki-skin .article h2 {           /* page title */
  font-size: 28px;
  margin-top: 0;
}
.wiki-skin .ameta {                /* "From Wikipedia…" subtitle line */
  font-size: 14px;
  font-style: italic;
  margin-bottom: 18px;
}
.wiki-skin .article h3 {           /* section heading: WP rule + normal weight */
  font-weight: 400;
  font-size: 22px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin: 28px 0 12px;
}
.wiki-skin .article h4 { font-size: 16px; }
.wiki-skin .article p,
.wiki-skin .article li {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
}

@media (max-width: 900px) {
  .wiki-layout { grid-template-columns: 1fr; gap: 0; }
  .wiki-toc { position: static; max-height: none; margin-bottom: 26px; }
}

/* Narrative experiment plans. */
.research-notes { margin: 28px 0 40px; }
.research-notes p { font-size: 16px; line-height: 1.7; margin: 12px 0; }
.research-notes .notes-lead { font-size: 18px; }
.research-notes h2 {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  margin: 36px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.research-notes .rt-wrap { margin: 18px 0; }
.research-notes table.rtable { width: 100%; }
.research-notes table.rtable td { vertical-align: top; line-height: 1.6; }
.research-notes .notes-reference { font-size: 14px; color: var(--fg-2); margin-top: 28px; }