/* ============================================================
   Whoa! Community — Direction B, "Workbench"
   Drop-in replacement for whoa.css. Tabler v1.4.0 underneath.

   Thesis: this is a working system that also writes things down.
   Persistent site tree, dense activity, monospace structure.

   Themes: light and dark, both first-class. The theme lives in
   [data-theme] on <html>; everything below is driven by tokens.
   ============================================================ */

/* ---------- Tokens: dark ---------- */

:root,
[data-theme="dark"] {
  --whoa-bg:      #0e1014;
  --whoa-panel:   #151920;
  --whoa-panel-2: #1a1f28;
  --whoa-line:    #262c38;
  --whoa-line-2:  #1f242e;
  --whoa-text:    #ccd3df;
  --whoa-bright:  #f2f5f9;
  --whoa-muted:   #838c9b;
  --whoa-dim:     #5f6874;
  --whoa-accent:  #7ee0b8;
  --whoa-accent-fg: #08120e;
  --whoa-accent-soft: rgba(126, 224, 184, .1);
  --whoa-accent-line: rgba(126, 224, 184, .22);
  --whoa-warn:    #f0a35e;
  --whoa-code-bg: #090b0e;
  --whoa-hover:   #1a1f28;
  --whoa-tag-bg:  #212734;

  --tblr-primary: #7ee0b8;
  --tblr-primary-rgb: 126, 224, 184;
  --tblr-primary-fg: #08120e;
  --tblr-link-color: #7ee0b8;
  --tblr-link-color-rgb: 126, 224, 184;
  --tblr-link-hover-color: #a6ecd0;
  --tblr-border-color: #262c38;
  --tblr-body-color: #ccd3df;
  --tblr-body-bg: #0e1014;
  --tblr-font-sans-serif: "Inter", system-ui, sans-serif;
}

/* ---------- Tokens: light ---------- */

[data-theme="light"] {
  --whoa-bg:      #f3f4f6;
  --whoa-panel:   #ffffff;
  --whoa-panel-2: #f7f8fa;
  --whoa-line:    #e0e3e9;
  --whoa-line-2:  #eceef2;
  --whoa-text:    #3a414d;
  --whoa-bright:  #11141a;
  --whoa-muted:   #6c7482;
  --whoa-dim:     #98a0ad;
  --whoa-accent:  #0d9268;
  --whoa-accent-fg: #ffffff;
  --whoa-accent-soft: rgba(13, 146, 104, .08);
  --whoa-accent-line: rgba(13, 146, 104, .22);
  --whoa-warn:    #b4661f;
  --whoa-code-bg: #11141a;
  --whoa-hover:   #f7f8fa;
  --whoa-tag-bg:  #eef0f4;

  --tblr-primary: #0d9268;
  --tblr-primary-rgb: 13, 146, 104;
  --tblr-primary-fg: #ffffff;
  --tblr-link-color: #0d9268;
  --tblr-link-color-rgb: 13, 146, 104;
  --tblr-link-hover-color: #11141a;
  --tblr-border-color: #e0e3e9;
  --tblr-body-color: #3a414d;
  --tblr-body-bg: #f3f4f6;
}

/* Base size. Everything below is in rem, but Tabler's body is .875rem (14px),
   which made the whole scale tiny. Pin the root and give the body a full rem. */
html { font-size: 17px; }

body {
  background: var(--whoa-bg);
  color: var(--whoa-text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--whoa-accent); }
a:hover { color: var(--whoa-accent); }

.mono { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; }

/* ---------- Shell ---------- */

.whoa-shell { display: flex; min-height: 100vh; align-items: stretch; }

.whoa-aside {
  flex: 0 0 244px;
  width: 244px;
  background: var(--whoa-panel);
  border-right: 1px solid var(--whoa-line);
  padding: 1.1rem 0 2rem;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
}

.whoa-main { flex: 1; min-width: 0; }

.whoa-aside-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.whoa-menu-toggle { display: none; }

/* Small screens: the aside collapses to the wordmark and a Menu button; the tree opens as a drawer */
@media (max-width: 899.98px) {
  .whoa-shell { display: block; }
  .whoa-aside { width: auto; max-height: none; position: static; border-right: 0; border-bottom: 1px solid var(--whoa-line); padding: .7rem 0 .7rem; }
  .whoa-aside-head { padding-right: 1rem; }
  .whoa-menu-toggle {
    display: inline-flex; align-items: center;
    font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--whoa-muted); background: transparent; border: 1px solid var(--whoa-line); border-radius: 5px; padding: .4rem .7rem; cursor: pointer;
  }
  .whoa-menu-toggle:hover { color: var(--whoa-bright); border-color: var(--whoa-dim); }
  .whoa-aside .whoa-tree, .whoa-aside .whoa-powered { display: none; }
  .whoa-aside.is-open .whoa-tree { display: block; margin-top: .6rem; }
  .whoa-aside.is-open .whoa-powered { display: flex; }
}

/* ---------- Brand ---------- */

.whoa-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0 1.1rem 1.05rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--whoa-line);
  text-decoration: none;
}

.whoa-brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: var(--whoa-accent);
  color: var(--whoa-accent-fg);
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: -0.05em;
  flex: 0 0 auto;
}

.whoa-brand-text {
  font-family: "JetBrains Mono", monospace;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--whoa-bright);
  line-height: 1.1;
}

.whoa-brand-sub { display: block; font-size: .61rem; letter-spacing: .12em; text-transform: uppercase; color: var(--whoa-dim); margin-top: 3px; }

/* ---------- Site tree ---------- */

.whoa-tree { font-size: .82rem; }

.whoa-tree-head {
  font-family: "JetBrains Mono", monospace;
  font-size: .61rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--whoa-dim);
  padding: 1.05rem 1.1rem .35rem;
}

.whoa-tree a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 1.1rem .3rem 1rem;
  color: var(--whoa-text);
  text-decoration: none;
  border-left: 2px solid transparent;
  line-height: 1.35;
}

.whoa-tree a:hover { background: var(--whoa-hover); color: var(--whoa-bright); }
.whoa-tree a.is-current { color: var(--whoa-bright); background: var(--whoa-panel-2); border-left-color: var(--whoa-accent); font-weight: 500; }
.whoa-tree a.is-sub { padding-left: 2.4rem; font-size: .78rem; color: var(--whoa-muted); }
.whoa-tree a.is-sub:hover, .whoa-tree a.is-sub.is-current { color: var(--whoa-bright); }
.whoa-tree .tree-emoji { flex: 0 0 auto; width: 1.15em; font-size: .85em; text-align: center; }
.whoa-tree .tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whoa-tree .tree-tag:empty { display: none; }
.whoa-tree .tree-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: .59rem;
  color: var(--whoa-dim);
  background: var(--whoa-tag-bg);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ---------- Top bar ---------- */

.whoa-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 46px;
  padding: 0 1.6rem;
  border-bottom: 1px solid var(--whoa-line);
  background: var(--whoa-bg);
  position: sticky;
  top: 0;
  z-index: 20;
}

.whoa-crumbs {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem;
  color: var(--whoa-muted);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.whoa-crumbs a { color: var(--whoa-muted); text-decoration: none; }
.whoa-crumbs a:hover { color: var(--whoa-accent); }
.whoa-crumbs .sep { color: var(--whoa-dim); opacity: .6; }
.whoa-crumbs .current { color: var(--whoa-bright); overflow: hidden; text-overflow: ellipsis; }

.whoa-topbar-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

.whoa-search {
  background: var(--whoa-panel);
  border: 1px solid var(--whoa-line);
  border-radius: 5px;
  color: var(--whoa-muted);
  font-size: .74rem;
  padding: .28rem .6rem;
  width: 190px;
  display: flex;
  align-items: center;
  gap: .45rem;
  cursor: text;
}

.whoa-search .kbd { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: .62rem; color: var(--whoa-dim); border: 1px solid var(--whoa-line); border-radius: 3px; padding: 0 4px; }

.whoa-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid var(--whoa-line);
  background: var(--whoa-panel);
  color: var(--whoa-muted);
  cursor: pointer;
  padding: 0;
}

.whoa-theme-toggle:hover { color: var(--whoa-bright); border-color: var(--whoa-dim); }

/* ---------- Content area ---------- */

.whoa-content { padding: 1.9rem 1.6rem 4rem; max-width: 1420px; }
.whoa-grid { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 2.4rem; }
/* Breakpoints sit 100px under a half-width 2560px window (1280px), so a tiled browser keeps the two-column layout */
@media (max-width: 1179.98px) { .whoa-grid { grid-template-columns: minmax(0,1fr); } }

/* ---------- Status strip ---------- */

.whoa-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  background: var(--whoa-line);
  border: 1px solid var(--whoa-line);
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 2.2rem;
}

.whoa-status > div, .whoa-status > a { background: var(--whoa-panel); padding: .9rem 1.1rem; }
.whoa-status > a { display: block; text-decoration: none; color: inherit; }
.whoa-status > a:hover { background: var(--whoa-panel-2); text-decoration: none; }
.whoa-status > a:hover .v { color: var(--whoa-accent); }
.whoa-status .k { font-family: "JetBrains Mono", monospace; font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: var(--whoa-dim); margin-bottom: .4rem; }
.whoa-status .v { font-family: "JetBrains Mono", monospace; font-size: 1.05rem; color: var(--whoa-bright); letter-spacing: -0.015em; }
.whoa-status .v .unit { color: var(--whoa-accent); }
.whoa-status .s { font-size: .7rem; color: var(--whoa-muted); margin-top: .3rem; }
@media (max-width: 767.98px) { .whoa-status { grid-template-columns: minmax(0,1fr); } }

/* ---------- Section headings ---------- */

.whoa-section {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--whoa-dim);
  margin: 0 0 1rem;
}

.whoa-section::after { content: ""; flex: 1; height: 1px; background: var(--whoa-line); }
.whoa-section a { color: var(--whoa-muted); text-decoration: none; letter-spacing: .04em; text-transform: none; font-size: .7rem; }
.whoa-section a:hover { color: var(--whoa-accent); }

/* ---------- Lead article on the front page ---------- */

.lead {
  background: var(--whoa-panel);
  border: 1px solid var(--whoa-line);
  border-radius: 8px;
  padding: 1.7rem 1.8rem 1.5rem;
  margin-bottom: 1.6rem;
}

.lead-top { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .55rem; flex-wrap: wrap; }
.lead-title { font-size: 1.62rem; font-weight: 600; letter-spacing: -0.028em; line-height: 1.18; color: var(--whoa-bright); margin: 0 0 .9rem; }
.lead-title a { color: inherit; text-decoration: none; }
.lead-title a:hover { color: var(--whoa-accent); }
.lead-foot { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--whoa-line); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.lead-more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--whoa-accent);
  text-decoration: none;
}

.lead-more .arrow { transition: transform .16s ease; }
.lead-more:hover .arrow { transform: translateX(3px); }
.lead-comments { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: .68rem; color: var(--whoa-dim); text-decoration: none; }
.lead-comments:hover { color: var(--whoa-accent); }

/* ---------- Post list ---------- */

.post {
  display: block;
  text-decoration: none;
  background: var(--whoa-panel);
  border: 1px solid var(--whoa-line);
  border-radius: 7px;
  padding: 1rem 1.2rem;
  margin-bottom: .6rem;
  transition: border-color .14s ease, background .14s ease;
}

.post:hover { border-color: var(--whoa-dim); background: var(--whoa-panel-2); }
.post-top { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .35rem; }
.post-date { font-family: "JetBrains Mono", monospace; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--whoa-dim); white-space: nowrap; }
.post-comments { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: .64rem; color: var(--whoa-dim); }
.post-title { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.018em; color: var(--whoa-bright); line-height: 1.3; margin-bottom: .3rem; }
.post:hover .post-title { color: var(--whoa-accent); }
.post-teaser { font-size: .87rem; line-height: 1.55; color: var(--whoa-muted); margin: 0; max-width: 78ch; }

.post-tag { font-family: "JetBrains Mono", monospace; font-size: .62rem; color: var(--whoa-accent); background: var(--whoa-accent-soft); border: 1px solid var(--whoa-accent-line); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }

/* ---------- Activity rail ---------- */

/* The stream badge above the rail: a door into the merged activity feed */
.rail-badge { display: flex; align-items: center; gap: .7rem; padding: .7rem .95rem; margin-bottom: 1rem; background: var(--whoa-accent-soft); border: 1px solid var(--whoa-accent-line); border-radius: 7px; text-decoration: none; color: var(--whoa-text); }
.rail-badge:hover { background: var(--whoa-panel-2); border-color: var(--whoa-accent); text-decoration: none; }
.rail-badge .rail-badge-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rail-badge .k { font-family: "JetBrains Mono", monospace; font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: var(--whoa-accent); }
.rail-badge .v { font-size: .82rem; color: var(--whoa-bright); }
.rail-badge:hover .v { color: var(--whoa-accent); }

.rail-block {
  background: var(--whoa-panel);
  border: 1px solid var(--whoa-line);
  border-radius: 7px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.rail-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--whoa-line);
  font-family: "JetBrains Mono", monospace;
  font-size: .61rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--whoa-muted);
}

.rail-head .live, .rail-badge .live { width: 6px; height: 6px; border-radius: 50%; background: var(--whoa-accent); animation: whoa-pulse 2.6s infinite; }
@keyframes whoa-pulse { 0% { box-shadow: 0 0 0 0 var(--whoa-accent-line); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.rail-head a { margin-left: auto; text-transform: none; letter-spacing: .03em; font-size: .66rem; color: var(--whoa-dim); text-decoration: none; }
.rail-head a:hover { color: var(--whoa-accent); }

.rail-row {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .4rem .9rem;
  border-bottom: 1px solid var(--whoa-line-2);
  font-size: .78rem;
  line-height: 1.35;
  color: var(--whoa-text);
  text-decoration: none;
}

.rail-row:last-child { border-bottom: 0; }
.rail-row:hover { background: var(--whoa-hover); color: var(--whoa-bright); }

.rail-repo { flex: 0 0 auto; font-family: "JetBrains Mono", monospace; font-size: .66rem; color: var(--whoa-dim); width: 5.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-text-wrap { flex: 1; min-width: 0; }
.rail-when { flex: 0 0 auto; font-family: "JetBrains Mono", monospace; font-size: .64rem; color: var(--whoa-dim); font-variant-numeric: tabular-nums; }
.rail-version { font-family: "JetBrains Mono", monospace; color: var(--whoa-accent); }

/* ---------- Dev feed ---------- */

.feed-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 2rem; align-items: start; }
@media (max-width: 1099.98px) { .feed-layout { grid-template-columns: minmax(0,1fr); } }

.feed-table-wrap { background: var(--whoa-panel); border: 1px solid var(--whoa-line); border-radius: 8px; overflow: hidden; }

.feed-tabs { display: flex; gap: .25rem; padding: .35rem .6rem 0; border-bottom: 1px solid var(--whoa-line); background: var(--whoa-panel-2); }
.feed-tabs a {
  font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--whoa-muted); text-decoration: none; padding: .5rem .7rem .55rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.feed-tabs a:hover { color: var(--whoa-bright); }
.feed-tabs a.is-on { color: var(--whoa-bright); border-bottom-color: var(--whoa-accent); }

.feed-filter {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .95rem;
  border-bottom: 1px solid var(--whoa-line);
  font-size: .78rem;
  color: var(--whoa-muted);
}

.feed-filter .clear { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: .68rem; color: var(--whoa-accent); text-decoration: none; }

.feed-table { width: 100%; border-collapse: collapse; }
.feed-table th {
  font-family: "JetBrains Mono", monospace;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--whoa-dim);
  text-align: left;
  padding: .55rem .95rem;
  border-bottom: 1px solid var(--whoa-line);
  background: var(--whoa-panel-2);
}

.feed-table td { padding: .42rem .95rem; border-bottom: 1px solid var(--whoa-line-2); font-size: .82rem; vertical-align: baseline; color: var(--whoa-text); }
.feed-table tr:last-child td { border-bottom: 0; }
/* A heavier line where one day ends and the next begins */
.feed-table tr.day-start td { border-top: 2px solid var(--whoa-line); }
.feed-table tbody tr:hover td { background: var(--whoa-hover); }
.feed-table .c-repo { font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--whoa-muted); white-space: nowrap; width: 1%; }
.feed-table .c-when { font-family: "JetBrains Mono", monospace; font-size: .7rem; color: var(--whoa-dim); white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; }
.feed-table .c-who { font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--whoa-dim); white-space: nowrap; width: 1%; }
.feed-table .c-msg a { color: var(--whoa-text); text-decoration: none; }
/* The merged stream: releases are the markers, issues the asides, commits the quiet majority */
.feed-all .kind { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: .62rem; letter-spacing: .04em; padding: 1px 6px; border-radius: 3px; margin-right: .5rem; vertical-align: 1px; white-space: nowrap; }
.feed-all .kind-release { color: var(--whoa-accent); background: var(--whoa-accent-soft); border: 1px solid var(--whoa-accent-line); }
.feed-all .kind-issue { color: var(--whoa-muted); border: 1px solid var(--whoa-line); }
.feed-all tr.row-release td { background: var(--whoa-accent-soft); border-top: 1px solid var(--whoa-accent-line); border-bottom: 1px solid var(--whoa-accent-line); }
.feed-all tr.row-release .c-msg a { color: var(--whoa-bright); font-weight: 500; }
.feed-all tr.row-issue .c-msg a { color: var(--whoa-muted); }
.feed-table tbody tr:hover .c-msg a { color: var(--whoa-accent); }

.rail-subhead-link { display: flex; align-items: baseline; gap: .5rem; text-decoration: none; }
.rail-subhead-link:hover { color: var(--whoa-accent); }
.rail-subhead-hint { margin-left: auto; margin-right: 1.4rem; font-size: .62rem; letter-spacing: .04em; text-transform: none; color: var(--whoa-dim); opacity: 0; transition: opacity .12s; }
.rail-subhead-link:hover .rail-subhead-hint { opacity: 1; }
@media (hover: none) { .rail-subhead-hint { opacity: 1; } }
.repo-filter { list-style: none; margin: 0; padding: .4rem 0; }
.repo-filter li { display: flex; align-items: stretch; }
.repo-filter li .repo-toggle {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: .5rem;
  padding: .28rem .5rem .28rem .9rem;
  font-size: .8rem; color: var(--whoa-text); text-decoration: none;
}
.repo-filter li:hover .repo-toggle { background: var(--whoa-hover); color: var(--whoa-bright); }
.repo-filter .repo-mark { flex: 0 0 auto; width: .9em; text-align: center; font-size: .6rem; color: var(--whoa-accent); }
.repo-filter li.is-off .repo-mark { color: var(--whoa-line); }
.repo-filter li.is-off .repo-toggle { color: var(--whoa-dim); }
.repo-filter .n { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: .66rem; color: var(--whoa-dim); }
.repo-filter .repo-only {
  flex: 0 0 auto; align-self: center;
  margin-right: .6rem; padding: 1px 6px;
  font-family: "JetBrains Mono", monospace; font-size: .62rem; letter-spacing: .04em;
  color: var(--whoa-dim); border: 1px solid transparent; border-radius: 3px; text-decoration: none;
  opacity: 0; transition: opacity .12s;
}
.repo-filter li:hover .repo-only, .repo-filter .repo-only:focus { opacity: 1; }
.repo-filter .repo-only:hover { color: var(--whoa-accent); border-color: var(--whoa-accent-line); background: var(--whoa-accent-soft); }
@media (hover: none) { .repo-filter .repo-only { opacity: 1; } }

.note {
  background: var(--whoa-accent-soft);
  border: 1px solid var(--whoa-accent-line);
  border-radius: 7px;
  padding: .8rem .95rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--whoa-muted);
  margin-top: 1rem;
}

/* ---------- Article ---------- */

.article-head { margin-bottom: 1.8rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--whoa-line); }
.article-title { font-size: 2.05rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.14; color: var(--whoa-bright); margin: 0 0 .6rem; }
.article-meta { display: flex; align-items: center; gap: .7rem; font-family: "JetBrains Mono", monospace; font-size: .7rem; color: var(--whoa-dim); flex-wrap: wrap; }
.article-meta .sep { opacity: .5; }

.article-body { font-size: 1rem; line-height: 1.72; color: var(--whoa-text); }
/* Markdown tables: bordered, in the feed-table idiom, scrolling sideways when wider than the column */
.article-body table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; font-size: .9rem; line-height: 1.5; display: block; overflow-x: auto; }
.article-body table thead th { text-align: left; font-family: "JetBrains Mono", monospace; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--whoa-dim); background: var(--whoa-panel-2); border: 1px solid var(--whoa-line); padding: .5rem .75rem; }
.article-body table td { border: 1px solid var(--whoa-line); padding: .45rem .75rem; vertical-align: top; }
.article-body table tbody tr:nth-child(even) td { background: var(--whoa-panel-2); }
.article-body table code { white-space: nowrap; }
.article-body > * { max-width: 74ch; }
.article-body > pre { max-width: none; }
.article-body p { margin-bottom: 1.15rem; }

.article-body h1, .article-body h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.018em; color: var(--whoa-bright); margin: 2.3rem 0 .6rem; }
.article-body h3 { font-family: "JetBrains Mono", monospace; font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--whoa-accent); margin: 2rem 0 .55rem; }
.article-body h4 { font-size: .95rem; font-weight: 600; color: var(--whoa-bright); margin: 1.4rem 0 .3rem; }
.article-body > h1:first-child, .article-body > h2:first-child, .article-body > h3:first-child { margin-top: 0; }

.article-body ul, .article-body ol { padding-left: 1.3rem; margin-bottom: 1.15rem; }
.article-body li { margin-bottom: .35rem; }
.article-body li::marker { color: var(--whoa-dim); }
.article-body strong { color: var(--whoa-bright); font-weight: 600; }

.article-body a { color: var(--whoa-accent); text-decoration: none; border-bottom: 1px solid var(--whoa-accent-line); }
.article-body a:hover { border-bottom-color: var(--whoa-accent); }

.article-body code { font-family: "JetBrains Mono", monospace; font-size: .82em; background: var(--whoa-panel-2); color: var(--whoa-bright); border: 1px solid var(--whoa-line); border-radius: 3px; padding: .08em .34em; }
.article-body pre, .article-body pre[class*="language-"] { font-family: "JetBrains Mono", monospace; background: var(--whoa-code-bg); border: 1px solid var(--whoa-line); color: #cfd6e2; border-radius: 6px; padding: 1rem 1.1rem; font-size: .8rem; line-height: 1.6; margin: 1.4rem 0; }
.article-body pre code { background: transparent; border: 0; padding: 0; color: inherit; font-size: 1em; }
.article-body blockquote { border-left: 2px solid var(--whoa-warn); padding-left: 1rem; margin: 1.3rem 0; color: var(--whoa-muted); }
.article-body hr { border: 0; border-top: 1px solid var(--whoa-line); margin: 1.8rem 0; }
.article-body img { max-width: 100%; border-radius: 6px; border: 1px solid var(--whoa-line); }

/* ---------- Comments ---------- */

.comments-card { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--whoa-line); max-width: 74ch; }
.comments-title { font-family: "JetBrains Mono", monospace; font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: var(--whoa-dim); margin-bottom: 1.1rem; }
.comments-empty { color: var(--whoa-muted); font-size: .92rem; margin-bottom: 1.8rem; }
/* Scoped to the thread: a bare .comment would also style Prism's "token comment" spans in code samples */
.comments-card .comment { padding: 1rem 0; border-bottom: 1px solid var(--whoa-line-2); }
.comment-meta { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .3rem; }
.comment-name { font-size: .85rem; font-weight: 600; color: var(--whoa-bright); }
.comment-date { font-family: "JetBrains Mono", monospace; font-size: .68rem; color: var(--whoa-dim); }
.comment-content { font-size: .93rem; line-height: 1.65; overflow-wrap: anywhere; }
.comment-content > :last-child { margin-bottom: 0; }

.comment-form .form-label { font-family: "JetBrains Mono", monospace; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--whoa-dim); }
.comment-form .form-control { background: var(--whoa-panel); border-color: var(--whoa-line); color: var(--whoa-bright); border-radius: 5px; }
.comment-form .form-control::placeholder { color: var(--whoa-dim); }
.comment-form .form-control:focus { background: var(--whoa-panel); border-color: var(--whoa-accent); box-shadow: none; color: var(--whoa-bright); }
.comment-form .form-hint { color: var(--whoa-dim); }
.comment-answer { max-width: 12rem; }

.btn-primary { border-radius: 5px; font-weight: 600; }

/* Honeypot */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Project ---------- */

.project-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--whoa-line); }
.project-emoji { font-size: 1.9rem; line-height: 1; flex: 0 0 auto; }
.project-name { font-family: "JetBrains Mono", monospace; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.035em; color: var(--whoa-bright); margin: 0 0 .3rem; }
.project-blurb { font-size: .9rem; color: var(--whoa-muted); margin: 0; max-width: 60ch; }
.project-facts { margin-left: auto; display: flex; gap: 1.6rem; flex: 0 0 auto; }
.project-facts .k { font-family: "JetBrains Mono", monospace; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--whoa-dim); }
.project-facts .v { font-family: "JetBrains Mono", monospace; font-size: .9rem; color: var(--whoa-bright); margin-top: .2rem; }
.project-facts .v a { color: var(--whoa-accent); text-decoration: none; }
@media (max-width: 767.98px) { .project-head { flex-wrap: wrap; } .project-facts { margin-left: 0; } }

/* ---------- On this page ---------- */

.toc { position: sticky; top: 4.2rem; }
.toc-head { font-family: "JetBrains Mono", monospace; font-size: .61rem; letter-spacing: .14em; text-transform: uppercase; color: var(--whoa-dim); padding-bottom: .5rem; margin-bottom: .45rem; border-bottom: 1px solid var(--whoa-line); }
.toc a { display: block; font-size: .79rem; line-height: 1.4; padding: .28rem 0 .28rem .7rem; color: var(--whoa-muted); text-decoration: none; border-left: 2px solid var(--whoa-line); }
.toc a:hover { color: var(--whoa-accent); border-left-color: var(--whoa-accent); }
.toc a.is-current { color: var(--whoa-bright); font-weight: 500; border-left-color: var(--whoa-accent); }
.toc a.is-deep { padding-left: 1.5rem; font-size: .75rem; }
.toc .toc-note { margin-top: 1.4rem; }
.toc a .toc-when { float: right; font-family: "JetBrains Mono", monospace; font-size: .66rem; color: var(--whoa-dim); font-variant-numeric: tabular-nums; }

/* Repository listing on a project's overview: one row per top-level entry */
.tree-entry { padding-top: .3rem; padding-bottom: .3rem; }
.tree-entry .rail-text { font-family: "JetBrains Mono", monospace; font-size: .74rem; }
.tree-entry-glyph { flex: 0 0 auto; width: 1em; text-align: center; font-family: "JetBrains Mono", monospace; font-size: .74rem; color: var(--whoa-dim); }
.tree-entry.is-dir .tree-entry-glyph { color: var(--whoa-accent); }
.tree-entry.is-dir .rail-text { color: var(--whoa-bright); }

/* Element reference: one panel per element, bindings as a table, direction arrows as in the playground */
.elref-tabs { margin-bottom: 1rem; background: transparent; border-bottom: 1px solid var(--whoa-line); padding-left: 0; }
.elref-lead { margin-bottom: 1.1rem; }
.elref-lead p { margin: 0 0 .6rem; font-size: .92rem; line-height: 1.6; }
.elref-lead p:last-child { margin-bottom: 0; }
.elref-legend { font-size: .82rem; color: var(--whoa-muted); }
.elref-el { margin-bottom: 1rem; scroll-margin-top: 4.2rem; }
.elref-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.elref-name { font-family: "JetBrains Mono", monospace; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.02em; color: var(--whoa-bright); margin: 0; }
.elref-pill, .elref-tag { font-family: "JetBrains Mono", monospace; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--whoa-line); color: var(--whoa-muted); white-space: nowrap; }
.elref-tag-update { color: var(--whoa-accent); border-color: var(--whoa-accent-line); background: var(--whoa-accent-soft); }
.elref-tag-widget { color: #2f6b4f; border-color: rgba(47,107,79,.4); background: rgba(47,107,79,.08); }
.elref-tag-server { color: #5b3aa3; border-color: rgba(91,58,163,.35); background: rgba(91,58,163,.08); }
.elref-tag-trigger { color: #b45309; border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.12); }
.elref-doc { font-size: .95rem; margin-bottom: .6rem; }
.elref-doc > :last-child { margin-bottom: 0; }
.elref-deprecated { margin: .2rem 0 .8rem; }
.elref-deprecated p { display: inline; margin: 0; }
.elref-el .tw { overflow-x: auto; border: 1px solid var(--whoa-line); border-radius: 6px; margin: .4rem 0 0; }
.elref-bindings td { font-size: .86rem; vertical-align: top; }
.elref-bname { white-space: nowrap; width: 1%; }
.elref-btype { white-space: nowrap; width: 1%; font-family: "JetBrains Mono", monospace; font-size: .74rem; color: var(--whoa-muted); }
.elref-bdoc p { margin: 0; } .elref-bdoc p + p { margin-top: .4rem; }
.elref-req { color: var(--whoa-accent); font-size: .6rem; vertical-align: 1px; }
.dir { font-weight: 700; margin-right: .15rem; cursor: help; }
.dir-pull { color: var(--whoa-dim); font-weight: 400; }
.dir-push { color: #d97706; }
.dir-both { color: #c2410c; }
.elref-default { white-space: nowrap; font-size: .74rem; color: var(--whoa-dim); margin-left: .3rem; }
.elref-bdeprecated { margin-top: .35rem; font-size: .82rem; color: var(--whoa-muted); }
.elref-bdeprecated p { display: inline; }
.elref-nobindings { margin: .4rem 0 0; font-family: "JetBrains Mono", monospace; font-size: .74rem; color: var(--whoa-dim); }
.elref-constraints { margin-top: .7rem; display: flex; flex-direction: column; gap: .3rem; }
.elref-constraint { background: rgba(245, 158, 11, .1); border-left: 3px solid #d97706; border-radius: 0 5px 5px 0; padding: .45rem .8rem; font-size: .84rem; }
.elref-toc { max-height: calc(100vh - 6rem); overflow-y: auto; }

/* Stack roadmap: the board's columns as sections, each a set of theme panels */
.roadmap-page { max-width: none; }
.rail-prose p { margin: 0; padding: .55rem .95rem; font-size: .8rem; line-height: 1.55; color: var(--whoa-muted); border-bottom: 1px solid var(--whoa-line-2); }
.rail-prose p:last-child { border-bottom: 0; padding-bottom: .8rem; }
.rail-prose strong { color: var(--whoa-bright); font-weight: 600; }
.rail-prose em { font-style: normal; color: var(--whoa-text); }
.roadmap-intro { margin-bottom: 1.4rem; }
.roadmap-intro p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--whoa-muted); }
.roadmap-section { margin-top: 1.6rem; }
.roadmap-now .roadmap-section { color: var(--whoa-accent); }
.roadmap-table .c-kind, .roadmap-table .c-effort { white-space: nowrap; width: 1%; }
.roadmap-theme-row td { padding: .7rem .95rem .35rem; font-family: "JetBrains Mono", monospace; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--whoa-dim); background: var(--whoa-panel-2); border-bottom: 1px solid var(--whoa-line); }
.roadmap-theme-row .n { margin-left: .6rem; letter-spacing: 0; color: var(--whoa-muted); }
.roadmap-table tbody tr.roadmap-theme-row:hover td { background: var(--whoa-panel-2); }
.roadmap-kind, .roadmap-effort { font-family: "JetBrains Mono", monospace; font-size: .6rem; letter-spacing: .04em; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--whoa-line); color: var(--whoa-dim); white-space: nowrap; }
.roadmap-kind-bug, .roadmap-kind-security { color: #b45309; border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.12); }
.roadmap-kind-feature { color: var(--whoa-accent); border-color: var(--whoa-accent-line); background: var(--whoa-accent-soft); }
.roadmap-kind-decision { color: #5b3aa3; border-color: rgba(91,58,163,.35); background: rgba(91,58,163,.08); }

/* Release notes on a project's releases page */
.release-list { display: flex; flex-direction: column; gap: 1.1rem; }
.release { scroll-margin-top: 4.2rem; }
.release-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; margin-bottom: .4rem; }
.release-title { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.018em; color: var(--whoa-bright); margin: 0; }
.release-date { font-family: "JetBrains Mono", monospace; font-size: .7rem; color: var(--whoa-dim); font-variant-numeric: tabular-nums; }
.release-link { margin-left: auto; font-size: .78rem; color: var(--whoa-muted); text-decoration: none; }
.release-link:hover { color: var(--whoa-accent); }
.release-empty { margin: 0; font-size: .9rem; color: var(--whoa-dim); }
/* headings inside release notes sit under the release title, so they step down a level */
.release-body h1, .release-body h2 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
.release-body h3 { margin-top: 1.2rem; }
.release-body > :first-child { margin-top: 0; }
.release-body > :last-child { margin-bottom: 0; }

/* ---------- Doc source badge ---------- */

.doc-source {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .64rem;
  letter-spacing: .04em;
  color: var(--whoa-dim);
  background: var(--whoa-panel-2);
  border: 1px solid var(--whoa-line);
  border-radius: 4px;
  padding: .15rem .5rem;
  text-decoration: none;
}

.doc-source:hover { color: var(--whoa-accent); border-color: var(--whoa-accent-line); }

/* ---------- Doc index (articles written in the system) ---------- */

.doc-list { display: flex; flex-direction: column; gap: .5rem; }

.doc-item {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .8rem 1rem;
  background: var(--whoa-panel);
  border: 1px solid var(--whoa-line);
  border-radius: 6px;
  text-decoration: none;
}

.doc-item:hover { border-color: var(--whoa-dim); background: var(--whoa-panel-2); }
.doc-item .t { flex: 1; min-width: 0; font-size: .92rem; font-weight: 500; color: var(--whoa-bright); }
.doc-item:hover .t { color: var(--whoa-accent); }
.doc-item .d { font-family: "JetBrains Mono", monospace; font-size: .66rem; color: var(--whoa-dim); }

/* ---------- Footer ---------- */

.footer { background: transparent; border-top: 1px solid var(--whoa-line); padding: 1.3rem 1.6rem 2.5rem; color: var(--whoa-dim); font-family: "JetBrains Mono", monospace; font-size: .68rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; }
.footer p { margin: 0; }
.footer a { color: inherit; }

/* The Góður kóði credit, as on engifer.com: the company's knot, navy on light, its reversed light loop on dark */
.footer .maker { display: inline-flex; margin-left: auto; align-items: center; gap: .5rem; text-decoration: none; white-space: nowrap; }
.maker strong { color: var(--whoa-bright); font-weight: 600; }
.maker-mark { display: block; }
.maker-loop { fill: #e3e9f2; }
[data-theme="light"] .maker-loop { fill: #1e3a5f; }
.maker:hover strong { color: var(--whoa-accent); }

/* ============================================================
   Site additions on top of the handoff stylesheet
   ============================================================ */

/* Short pages: keep the sidebar panel running the full viewport height, and
   push the footer to the bottom of the viewport instead of mid-screen. */
@media (min-width: 900px) {
  .whoa-aside { min-height: 100vh; }
  .whoa-main { display: flex; flex-direction: column; min-height: 100vh; }
  .whoa-content { flex: 1 0 auto; }
  .whoa-main > .footer { margin-top: auto; }
}

/* Activity rail rows: repo emoji in front of the repo name, as the old tables had */
.rail-emoji { flex: 0 0 auto; width: 1.25em; text-align: center; font-size: .9em; line-height: 1; }
.rail-row .rail-repo { width: 7rem; }
/* Wrapped rows: date stays on the first line, wrapped text keeps a readable measure */
.rail-row .rail-text-wrap { line-height: 1.4; }

/* Content panel: long-form content (article, README, guides) sits on a raised
   surface like the front page's lead article, not on the bare background. */
.whoa-panel {
  background: var(--whoa-panel);
  border: 1px solid var(--whoa-line);
  border-radius: 8px;
  padding: 1.8rem 2rem 2rem;
}
.whoa-panel > .article-head { margin-top: 0; }
.whoa-panel > .comments-card { margin-top: 2.2rem; }
@media (max-width: 767.98px) { .whoa-panel { padding: 1.2rem 1.1rem 1.4rem; } }

/* "Powered by engifer" — an 88×31 web badge, the classic proportions of the
   old "Powered by WebObjects" button every WO site once wore. */
.whoa-powered {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 104px;
  height: 36px;
  margin: 1.6rem auto 0;
  padding: 0 8px 0 7px;
  box-sizing: border-box;
  border: 1px solid var(--whoa-line);
  border-radius: 3px;
  background: var(--whoa-panel-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(0,0,0,.25);
  text-decoration: none;
  line-height: 1;
}
.whoa-powered:hover { border-color: var(--whoa-accent-line); background: var(--whoa-accent-soft); text-decoration: none; }
.whoa-powered-mark { flex: 0 0 auto; width: 20px; height: 20px; }
.whoa-powered-text { display: flex; flex-direction: column; gap: 2px; font-family: "JetBrains Mono", monospace; min-width: 0; }
.whoa-powered-text .k { font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--whoa-dim); }
.whoa-powered-text .v { font-size: 11px; font-weight: 700; letter-spacing: -0.02em; color: var(--whoa-bright); white-space: nowrap; }
.whoa-powered:hover .v { color: var(--whoa-accent); }
/* The ng is coloured as in the engifer logo: turmeric on dark, torch red on light */
.whoa-powered-text .ng { color: #ffb320; }
[data-theme="light"] .whoa-powered-text .ng { color: #c41e4a; }

/* "draft" pill on unpublished articles (only ever rendered in development) */
.writing-row .post-tag, .rail-row .post-tag, .article-meta .post-tag { flex: 0 0 auto; align-self: center; }
.beta-tag { color: #b45309; background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .5); }
/* An amber caveat box: work in progress, things that may change under the reader */
.caveat { background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .45); border-left: 3px solid #d97706; border-radius: 0 7px 7px 0; padding: .8rem 1rem; margin: 1rem 0 1.6rem; font-size: .88rem; line-height: 1.55; }
.caveat p { margin: 0 0 .5rem; color: var(--whoa-text) !important; }
.caveat p:last-child { margin-bottom: 0; }
.caveat a { color: #b45309; }
:root[data-theme="dark"] .caveat a { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .caveat a { color: #fbbf24; } }
:root[data-theme="dark"] .beta-tag { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .beta-tag { color: #fbbf24; } }
.writing-drafts-section { margin-top: 2.6rem; }

/* Projects overview: a grid of cards, one per project */
.project-section + .project-grid { margin-bottom: 2.2rem; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 1100px; }
@media (max-width: 899.98px) { .project-grid { grid-template-columns: minmax(0, 1fr); } }
.project-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
@media (max-width: 1179.98px) { .project-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899.98px) { .project-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.guides-section { margin-top: .4rem; }
.project-grid + .guides-section { margin-top: 2.4rem; }
.guide-panel { max-width: 80ch; }
/* Code is shown as typed: no ligatures turning -> into an arrow or != into ≠ */
.article-body pre, .article-body code { font-variant-ligatures: none; }
.guide-panel .article-body h2 { font-size: 1.05rem; margin-top: 2rem; }
.guide-panel .article-body > :first-child { margin-top: 0; }
.deployment-intro { margin-top: 1.25rem; }

/* The little topology chain in each deployment card: edge → (proxy) → apps */
.topo { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; margin: .1rem 0 .2rem; }
.topo-node { position: relative; display: flex; flex-direction: column; gap: .1rem; padding: .35rem .55rem; border: 1px solid var(--whoa-line); border-radius: 5px; background: var(--whoa-panel-2); min-width: 0; }
.topo-node + .topo-node { margin-left: 1.15rem; }
.topo-node + .topo-node::before { content: "→"; position: absolute; left: -1rem; top: 50%; transform: translateY(-50%); width: .85rem; text-align: center; font-family: "JetBrains Mono", monospace; font-size: .75rem; color: var(--whoa-dim); }
.topo-label { font-family: "JetBrains Mono", monospace; font-size: .7rem; font-weight: 500; color: var(--whoa-bright); white-space: nowrap; }
.topo-caption { font-family: "JetBrains Mono", monospace; font-size: .58rem; letter-spacing: .02em; color: var(--whoa-dim); white-space: nowrap; }
.topo-edge { border-color: var(--whoa-accent-line); background: var(--whoa-accent-soft); }
.topo-edge .topo-label { color: var(--whoa-accent); }
.topo-apps { border-style: dashed; }
.deployment-intro p { margin: 0 0 .7rem; font-size: .88rem; line-height: 1.6; color: var(--whoa-muted); }
.deployment-intro p:last-child { margin-bottom: 0; }
.project-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.1rem 1.25rem 1.2rem;
  background: var(--whoa-panel);
  border: 1px solid var(--whoa-line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--whoa-text);
  transition: border-color .14s ease, background .14s ease;
}
.project-card:hover { border-color: var(--whoa-dim); background: var(--whoa-panel-2); color: var(--whoa-text); }
.project-card-head { display: flex; align-items: center; gap: .6rem; }
.project-card-emoji { font-size: 1.35rem; line-height: 1; flex: 0 0 auto; }
.project-card-name { font-family: "JetBrains Mono", monospace; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.03em; color: var(--whoa-bright); flex: 1; min-width: 0; }
.project-card:hover .project-card-name { color: var(--whoa-accent); }
.project-card-blurb { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--whoa-muted); }

/* Real search field for logged-in users (the handoff's .whoa-search is a
   non-functional placeholder; this styles the actual <input>). */
.whoa-search-input {
  background: var(--whoa-panel);
  border: 1px solid var(--whoa-line);
  border-radius: 5px;
  color: var(--whoa-bright);
  font-size: .74rem;
  padding: .28rem .6rem;
  width: 190px;
  outline: none;
}
.whoa-search-input::placeholder { color: var(--whoa-muted); }
.whoa-search-input:focus { border-color: var(--whoa-accent); }

/* Second-level heading inside a rail block (org names in the repo filter) */
.rail-subhead {
  display: flex;
  align-items: center;
  padding: .55rem .9rem .15rem;
  border-top: 1px solid var(--whoa-line-2);
  font-family: "JetBrains Mono", monospace;
  font-size: .61rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--whoa-muted);
}
.rail-subhead:first-of-type { border-top: 0; }

/* Admin-only edit affordance on the lead article */
.lead-edit { font-family: "JetBrains Mono", monospace; font-size: .68rem; color: var(--whoa-dim); text-decoration: none; }
.lead-edit:hover { color: var(--whoa-accent); }

/* Alerts inside the comment form, in the token palette */
.comment-form .alert { border-radius: 5px; font-size: .85rem; padding: .6rem .8rem; margin-bottom: 1rem; }

/* Writing archive */
.writing-list { display: flex; flex-direction: column; gap: 0; background: var(--whoa-panel); border: 1px solid var(--whoa-line); border-radius: 8px; overflow: hidden; }
.writing-row { display: flex; align-items: baseline; gap: 1rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--whoa-line-2); text-decoration: none; color: var(--whoa-text); }
.writing-row:last-child { border-bottom: 0; }
.writing-row:hover { background: var(--whoa-hover); }
.writing-row .t { flex: 1; min-width: 0; font-size: .95rem; font-weight: 500; color: var(--whoa-bright); }
.writing-row:hover .t { color: var(--whoa-accent); }
.writing-row .d, .writing-row .c { font-family: "JetBrains Mono", monospace; font-size: .66rem; color: var(--whoa-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Fixed date column so the titles line up ("September 30, 2026" is the widest) */
.writing-row .d { flex: 0 0 150px; width: 150px; }
.writing-row .c { flex: 0 0 auto; min-width: 7ch; text-align: right; }

/* Prism on the dark code background: Prism's default theme assumes a light
   page (black text, dark purples/blues). Re-colour the tokens so they read on
   --whoa-code-bg in both themes, and stop it overriding inline code colour. */
.article-body code[class*="language-"],
.article-body pre[class*="language-"] { color: #cfd6e2; text-shadow: none; }
.article-body :not(pre) > code[class*="language-"] { background: var(--whoa-panel-2); color: var(--whoa-bright); }
.article-body .token.comment, .article-body .token.prolog, .article-body .token.doctype, .article-body .token.cdata { color: #6b7684; }
.article-body .token.punctuation { color: #8b95a5; }
.article-body .token.property, .article-body .token.tag, .article-body .token.boolean, .article-body .token.number, .article-body .token.constant, .article-body .token.symbol, .article-body .token.deleted { color: #e8b3ff; }
.article-body .token.selector, .article-body .token.attr-name, .article-body .token.string, .article-body .token.char, .article-body .token.builtin, .article-body .token.inserted { color: #b5e0a0; }
.article-body .token.operator, .article-body .token.entity, .article-body .token.url { color: #cfd6e2; background: transparent; }
.article-body .token.atrule, .article-body .token.attr-value, .article-body .token.keyword { color: #8fb4ff; }
.article-body .token.function, .article-body .token.class-name { color: #f0a35e; }
/* Prism marks markup tags with class "token tag" — which collides with Tabler's .tag
   pill component. Strip that styling inside code so XML/HTML samples read as text. */
.article-body pre .token.tag {
  display: inline;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  height: auto;
  min-height: 0;
  line-height: inherit;
  font: inherit;
  letter-spacing: inherit;
  box-shadow: none;
  gap: 0;
  color: #e8b3ff;
}
.article-body pre .token.tag .token.punctuation { color: #8b95a5; }
.article-body .token.regex, .article-body .token.important, .article-body .token.variable { color: #f6d67a; }

/* ============================================================
   LEGACY — awaiting a design pass (videos, deployment guides, search, admin).
   Old class names kept alive on the new tokens so those pages stay usable.
   Delete each group when its page gets its real design.
   ============================================================ */

.card { background: var(--whoa-panel); border: 1px solid var(--whoa-line); border-radius: 8px; box-shadow: none; }
.dark-card-header { background: var(--whoa-panel-2); color: var(--whoa-bright); border-bottom: 1px solid var(--whoa-line); padding: .9rem 1.2rem; display: flex; align-items: center; gap: .75rem; }
.dark-card-header h3.card-title { font-family: "JetBrains Mono", monospace; font-size: .95rem; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.dark-card-header h3.card-title a { color: inherit; text-decoration: none; }
.dark-card-header .card-actions { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.dark-card-header .card-actions small { font-family: "JetBrains Mono", monospace; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--whoa-dim); }
.article-list .article-card { margin-bottom: 1.5rem; }

/* Videos (list + detail) */
.video-page { max-width: 900px; }
.dark-card-header .card-actions .playlist-youtube-link { color: var(--whoa-muted); font-size: .78rem; text-decoration: none; }
.dark-card-header .card-actions .playlist-youtube-link:hover { color: var(--whoa-accent); }
.video-list { display: flex; flex-direction: column; }
.video-row { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.2rem; border-bottom: 1px solid var(--whoa-line-2); color: var(--whoa-text); text-decoration: none; }
.video-row:last-child { border-bottom: 0; }
.video-row:hover { background: var(--whoa-hover); color: var(--whoa-bright); }
.video-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.video-title { font-size: .95rem; font-weight: 500; line-height: 1.3; color: var(--whoa-bright); }
.video-row:hover .video-title { color: var(--whoa-accent); }
.video-date { font-family: "JetBrains Mono", monospace; font-size: .66rem; color: var(--whoa-dim); font-variant-numeric: tabular-nums; }
.video-play { flex: 0 0 auto; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--whoa-line); color: var(--whoa-muted); font-size: .7rem; padding-left: 2px; }
.video-row:hover .video-play { background: var(--whoa-accent); border-color: var(--whoa-accent); color: var(--whoa-accent-fg); }
.video-embed { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--whoa-muted); padding: 1rem 1.2rem; }
.video-youtube-link { color: var(--whoa-accent); text-decoration: none; }
.project-empty { color: var(--whoa-muted); font-style: italic; font-size: .9rem; margin: 0; }

/* Old sidebar tables, still used by pages that haven't moved to rail blocks */
.card-table.feed-table td { font-size: .78rem; }

/* ---------- WOWODC 2026 banner ----------
   Top of the front page until the conference is over. Fixed brand colours
   (the conference site's navy and blues), the same in both themes. */
.wowodc-banner {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #191c5a 0%, #1f2470 55%, #262c82 100%);
  border: 1px solid rgba(120, 150, 255, .22);
  border-radius: 10px;
  padding: 1.9rem 1.5rem 1.6rem;
  margin-bottom: 2rem;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.wowodc-banner:hover { color: #fff; text-decoration: none; border-color: rgba(130, 170, 255, .5); box-shadow: 0 10px 36px rgba(25, 35, 130, .35); }
.wowodc-eyebrow { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #5b9cff; margin-bottom: .9rem; }
.wowodc-title { display: block; font-weight: 800; font-size: clamp(2.7rem, 5.2vw, 4.2rem); line-height: 1; letter-spacing: -.035em; color: #fff; white-space: nowrap; }
.wowodc-year { background: linear-gradient(90deg, #3d7dff 0%, #5fb8ff 60%, #74e0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wowodc-sub { display: block; margin-top: 1.1rem; font-size: 1.12rem; line-height: 1.45; color: #e2e8ff; }
.wowodc-meta { display: block; margin-top: 1.15rem; font-family: "JetBrains Mono", monospace; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #8aa3ea; }
.wowodc-meta em { font-style: normal; color: #74e0ff; }
@media (max-width: 767.98px) {
  .wowodc-banner { padding: 1.7rem 1rem 1.5rem; border-radius: 8px; }
  .wowodc-title { font-size: clamp(2.3rem, 11.5vw, 3rem); }
  .wowodc-sub { font-size: .98rem; }
  .wowodc-sub br { display: none; }
  .wowodc-meta { letter-spacing: .08em; line-height: 1.7; }
}

/* ---------- Traffic card (Plausible) ---------- */
.rail-head-hint { margin-left: .2rem; text-transform: none; letter-spacing: .03em; font-size: .62rem; color: var(--whoa-dim); }
.rail-chart { padding: .8rem .9rem .3rem; }
.rail-chart-svg { display: block; width: 100%; height: 44px; }
.rail-chart-svg rect { fill: var(--whoa-accent); opacity: .85; }
.rail-chart-svg rect:hover { opacity: 1; }
.rail-traffic-totals { display: flex; gap: 1rem; flex-wrap: wrap; padding: .35rem .9rem .75rem; font-size: .74rem; color: var(--whoa-muted); }
.rail-traffic-totals strong { font-family: "JetBrains Mono", monospace; font-weight: 500; color: var(--whoa-bright); }
.rail-traffic-now { margin-left: auto; color: var(--whoa-accent); }