/* CODELOG_ baseline design tokens + shell. Dark, minimal, technical (§2).
   The public-UI module owns and extends this file; admin/explorer CSS live in
   their own files and consume these variables. */

:root {
  --bg: #0d1117;
  --bg-raised: #141a22;
  --bg-hover: #1a212b;
  --border: #232b36;
  --text: #d6dde6;
  --text-dim: #8b96a5;
  --accent: #3fd68f;
  --accent-dim: #2a8f61;
  --danger: #e5534b;
  --warn: #d4a72c;
  --font-ui: 'SF Pro Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  --radius: 8px;
  --maxw: 46rem;

  /* --- public-UI additions; same vocabulary, one level finer --- */
  --bg-code: #090d13;
  --border-strong: #313b49;
  --text-soft: #c2cbd6;
  --radius-sm: 5px;
  --radius-pill: 999px;
  --ring: color-mix(in srgb, var(--accent) 45%, transparent);
  --ease: cubic-bezier(0.32, 0.72, 0.24, 1);

  /* highlight.js token palette (§ code blocks) — shipped here, not imported */
  --hl-comment: #63707f;
  --hl-keyword: #bb9af7;
  --hl-function: #7aa2f7;
  --hl-string: #9ece6a;
  --hl-number: #ff9e64;
  --hl-type: #2ac3de;
  --hl-attr: #73daca;
  --hl-variable: #f7768e;
  --hl-meta: #7dcfff;
  --hl-operator: #89ddff;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Atmosphere, not decoration: one soft accent wash behind the masthead and a
     near-invisible grid that reads as canvas rather than texture. */
  background-color: var(--bg);
  background-image:
    radial-gradient(58rem 26rem at 50% -10rem, color-mix(in srgb, var(--accent) 6%, transparent), transparent 72%),
    radial-gradient(circle at 1px 1px, rgb(214 221 230 / 2.2%) 1px, transparent 0);
  background-repeat: no-repeat, repeat;
  background-size: auto, 26px 26px;
  background-attachment: fixed, fixed;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---- top bar ---- */

.topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.logo {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.logo:hover {
  text-decoration: none;
  color: var(--accent);
}

.topnav {
  display: flex;
  gap: 1rem;
}

.topnav a {
  color: var(--text-dim);
  font-size: 0.9rem;
}

.topnav a.active,
.topnav a:hover {
  color: var(--text);
  text-decoration: none;
}

.topnav a.active {
  color: var(--accent);
}

.topsearch {
  margin-left: auto;
}

.topsearch input {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  width: 14rem;
  max-width: 40vw;
}

.topsearch input:focus {
  outline: none;
  border-color: var(--accent-dim);
}

.main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

/* ---- shared bits ---- */

code,
pre {
  font-family: var(--font-mono);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dot {
  color: var(--text-dim);
  margin: 0 0.5rem;
  opacity: 0.55;
}

/* ---- badges, pills, chips (§15) ---- */

.badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-raised) 70%, transparent);
  color: var(--text-dim);
  white-space: nowrap;
  cursor: default;
}

.badge-version {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.badge-hash {
  letter-spacing: 0.04em;
}

.badge-script {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 32%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
}

.pill {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.55rem;
  background: color-mix(in srgb, var(--bg-raised) 75%, transparent);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.pill::before {
  content: '#';
  opacity: 0.5;
  margin-right: 0.1rem;
}

.pill:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  text-decoration: none;
}

.pill.is-active {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.pill-lg {
  font-size: 0.85rem;
  padding: 0.28rem 0.7rem;
}

.pill-count {
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--border);
  font-size: 0.72rem;
  opacity: 0.85;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.14rem 0.25rem 0.14rem 0.6rem;
  background: var(--bg-raised);
}

.chip-key {
  color: var(--text-dim);
}

.chip-key::after {
  content: ':';
}

.chip-value {
  color: var(--accent);
}

.chip-clear {
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: var(--radius-pill);
  color: var(--text-dim);
  font-size: 0.62rem;
  line-height: 1;
}

.chip-clear:hover {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  color: var(--danger);
  text-decoration: none;
}

/* ---- section label: `// RELATED ————` ---- */

.section-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.section-label::before {
  content: '//';
  color: var(--accent-dim);
  letter-spacing: 0;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ---- landing (§9) ---- */

.lede {
  margin: 0 0 2.25rem;
}

.lede-title {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.caret {
  display: inline-block;
  width: 0.52rem;
  height: 1.05rem;
  margin-left: 0.35rem;
  background: var(--accent);
  border-radius: 1px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
  /* Boots, then rests — blinking that never stops fails WCAG 2.2.2. */
  animation: blink 1.15s step-end 4;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.lede-sub {
  margin: 0.6rem 0 0;
  max-width: 34rem;
  color: var(--text-dim);
  font-size: 0.92rem;
}

.listing-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}

.listing-count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.listing-scope {
  opacity: 0.7;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-raised);
}

.seg-item {
  padding: 0.24rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.seg-item + .seg-item {
  border-left: 1px solid var(--border);
}

.seg-item:hover {
  color: var(--text);
  background: var(--bg-hover);
  text-decoration: none;
}

.seg-item.is-active {
  color: #06120c;
  background: var(--accent);
  font-weight: 600;
}

.seg-item.is-active:hover {
  color: #06120c;
  background: var(--accent);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1.1rem;
}

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.post-row {
  position: relative;
  padding: 1rem 1.15rem 0.95rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

/* The gutter rail — an editor's changed-line marker, lit on hover. */
.post-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: color-mix(in srgb, var(--accent) 48%, transparent);
  transition: background-color 0.18s var(--ease), top 0.22s var(--ease), bottom 0.22s var(--ease),
    box-shadow 0.18s var(--ease);
}

.post-row:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.post-row:hover::before {
  top: 0.55rem;
  bottom: 0.55rem;
  background: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

.post-row:has(.row-title a:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--border-strong);
}

.row-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.006em;
}

.row-title a {
  color: var(--text);
}

.row-title a:hover {
  color: var(--accent);
  text-decoration: none;
}

.row-title a:focus-visible {
  outline: none;
}

/* Whole row is the hit target; pills sit above the overlay so they still link. */
.row-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.post-row .pills {
  position: relative;
  z-index: 1;
}

.row-summary {
  margin: 0.4rem 0 0;
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.row-meta,
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

.row-meta > .meta-item:not(:first-child)::before,
.post-meta > .meta-item:not(:first-child)::before {
  content: '·';
  margin-right: 0.45rem;
  opacity: 0.5;
}

.meta-updated {
  opacity: 0.8;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.pager-link {
  color: var(--text-dim);
}

.pager-link:hover {
  color: var(--accent);
  text-decoration: none;
}

.pager-link.is-disabled {
  opacity: 0.3;
}

.pager-pos {
  color: var(--text-dim);
  opacity: 0.7;
}

.listing-foot {
  margin-top: 2.25rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-dim);
}

.listing-foot a {
  color: var(--text-dim);
}

.listing-foot a:hover {
  color: var(--accent);
}

/* ---- generic page heads (tags, search) ---- */

.page-head {
  margin: 0 0 1.75rem;
}

.page-title {
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.hash-mark {
  color: var(--accent-dim);
  margin-right: 0.15rem;
}

.page-sub {
  margin: 0.45rem 0 0;
  color: var(--text-dim);
  font-size: 0.9rem;
  font-family: var(--font-mono);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- post page (§10) ---- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
}

.crumbs a {
  color: var(--text-dim);
}

.crumbs a:hover {
  color: var(--accent);
  text-decoration: none;
}

.crumb-sep {
  opacity: 0.4;
}

.crumb-current {
  color: var(--text-soft);
}

.post-head {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.post-title {
  margin: 0;
  font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.35rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.024em;
  color: #eef3f8;
}

.post-summary {
  margin: 0.85rem 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 38rem;
}

.notice {
  margin: 0 0 1.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--warn) 32%, var(--border));
  border-left-width: 3px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 7%, var(--bg-raised));
}

.notice-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warn);
}

.notice-body {
  margin: 0;
  font-size: 0.9rem;
}

.notice-body strong {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}

.notice-sep {
  margin: 0 0.5rem;
  color: var(--text-dim);
  opacity: 0.6;
}

/* ---- article typography ---- */

.article {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-soft);
  overflow-wrap: break-word;
}

.article > *:first-child {
  margin-top: 0;
}

.article p {
  margin: 0 0 1.15rem;
}

.article h2,
.article h3,
.article h4 {
  color: #eef3f8;
  line-height: 1.25;
  letter-spacing: -0.015em;
  scroll-margin-top: 4.5rem;
}

.article h2 {
  margin: 2.6rem 0 0.9rem;
  font-size: 1.32rem;
  font-weight: 650;
}

.article h3 {
  margin: 2.1rem 0 0.7rem;
  font-size: 1.1rem;
  font-weight: 620;
}

.article h4 {
  margin: 1.7rem 0 0.6rem;
  font-size: 0.98rem;
  font-weight: 600;
}

/* Markdown source markers in the margin — the file viewer showing through. */
@media (min-width: 74rem) {
  .article :is(h2, h3, h4) {
    position: relative;
  }

  .article :is(h2, h3, h4)::before {
    position: absolute;
    right: calc(100% + 0.9rem);
    top: 0.3em;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: -0.04em;
    color: var(--border-strong);
    white-space: nowrap;
    user-select: none;
  }

  .article h2::before {
    content: '##';
  }

  .article h3::before {
    content: '###';
  }

  .article h4::before {
    content: '####';
  }
}

.article a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
  transition: text-decoration-color 0.15s var(--ease);
}

.article a:hover {
  text-decoration-color: var(--accent);
}

.article strong {
  color: #eef3f8;
  font-weight: 620;
}

.article ul,
.article ol {
  margin: 0 0 1.15rem;
  padding-left: 1.35rem;
}

.article li {
  margin: 0.35rem 0;
}

.article li::marker {
  color: var(--text-dim);
}

.article blockquote {
  margin: 1.6rem 0;
  padding: 0.1rem 0 0.1rem 1.15rem;
  border-left: 2px solid var(--accent-dim);
  color: var(--text-dim);
}

.article blockquote p:last-child {
  margin-bottom: 0;
}

.article hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

.article img,
.article video,
.article canvas,
.article svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.6rem auto;
  border-radius: var(--radius);
}

.article img {
  border: 1px solid var(--border);
  background: var(--bg-raised);
}

.article figure {
  margin: 1.6rem 0;
}

.article figcaption {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.article table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.6rem 0;
  font-size: 0.92rem;
}

.article th,
.article td {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.article thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom-color: var(--border-strong);
}

/* ---- code ---- */

.article :not(pre) > code {
  font-size: 0.86em;
  padding: 0.1em 0.35em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-code) 70%, transparent);
  color: #b9e8cf;
  overflow-wrap: break-word;
}

.article pre {
  margin: 1.6rem 0;
  padding: 0.95rem 1.05rem;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.845rem;
  line-height: 1.65;
  tab-size: 2;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.article pre code {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-soft);
  font-size: inherit;
}

.article pre::-webkit-scrollbar {
  height: 8px;
}

.article pre::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

/* highlight.js tokens — dark palette defined locally, no vendor CSS import.
   The publish pipeline emits <pre><code class="hljs language-x">. */
.hljs {
  color: var(--text-soft);
  background: transparent;
}

.hljs-comment,
.hljs-quote {
  color: var(--hl-comment);
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-formula {
  color: var(--hl-keyword);
}

.hljs-title,
.hljs-title.function_,
.hljs-section,
.hljs-name {
  color: var(--hl-function);
}

.hljs-string,
.hljs-char,
.hljs-regexp,
.hljs-template-tag,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition {
  color: var(--hl-string);
}

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-link {
  color: var(--hl-number);
}

.hljs-type,
.hljs-built_in,
.hljs-class .hljs-title,
.hljs-title.class_,
.hljs-params {
  color: var(--hl-type);
}

.hljs-attr,
.hljs-attribute,
.hljs-property,
.hljs-selector-class,
.hljs-selector-id {
  color: var(--hl-attr);
}

.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-subst,
.hljs-deletion {
  color: var(--hl-variable);
}

.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-meta .hljs-string {
  color: var(--hl-meta);
}

.hljs-operator,
.hljs-punctuation {
  color: var(--hl-operator);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 600;
}

.hljs-addition {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  display: inline-block;
  width: 100%;
}

/* ---- post script mount (§7.3) ---- */

#post-root:not(:empty) {
  margin: 2rem 0;
}

/* ---- panels: dependencies, related ---- */

.panel {
  margin-top: 2.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--border);
}

.dep-list,
.rel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.dep-id {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.86rem;
}

.dep-name {
  color: var(--text);
}

.dep-name:hover {
  color: var(--accent);
  text-decoration: none;
}

.dep-version {
  color: var(--text-dim);
  font-size: 0.78rem;
}

.dep-version::before {
  content: '@';
  opacity: 0.55;
}

.dep-purpose {
  margin: 0.15rem 0 0;
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.55;
}

.rel-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
}

.rel-title {
  color: var(--text);
  font-weight: 560;
  font-size: 0.98rem;
}

.rel-title:hover {
  color: var(--accent);
  text-decoration: none;
}

.strength {
  flex: none;
  margin-left: auto;
  display: inline-block;
  width: 3.4rem;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.strength i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
}

.rel-summary {
  margin: 0.2rem 0 0;
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.55;
}

.rel-none {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.rel-more {
  margin: 1.35rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

/* ---- search (§12) ---- */

.searchbox {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.9rem;
}

.searchbox input {
  flex: 1;
  min-width: 0;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  padding: 0.55rem 0.8rem;
}

.searchbox input::placeholder {
  color: color-mix(in srgb, var(--text-dim) 75%, transparent);
}

.searchbox input:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.searchbox button {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 0 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent-dim);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.searchbox button:hover {
  background: var(--accent);
  color: #06120c;
}

.search-count {
  margin: 0 0 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}

.search-q {
  color: var(--accent);
}

.search-q::before,
.search-q::after {
  content: '"';
  opacity: 0.5;
}

.results + .results {
  margin-top: 2.25rem;
}

/* §12: semantic results are a separate surface, never interleaved. */
.results-semantic {
  margin-top: 2.75rem;
  padding: 1.3rem 1.2rem 1.4rem;
  border: 1px dashed var(--border-strong);
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--bg-raised) 45%, transparent);
}

.results-semantic .section-label::before {
  content: '~';
  font-size: 0.95rem;
  line-height: 0.6;
}

.results-note {
  margin: -0.4rem 0 1.1rem;
  color: var(--text-dim);
  font-size: 0.82rem;
}

.search-hint {
  padding: 1.25rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-raised) 60%, transparent);
}

.search-hint-title {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
}

.search-modes {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  color: var(--text-dim);
  font-size: 0.88rem;
}

.mode-key {
  display: inline-block;
  min-width: 4.75rem;
  margin-right: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
}

/* ---- empty states ---- */

.empty {
  padding: 2.25rem 1.25rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
  background: color-mix(in srgb, var(--bg-raised) 40%, transparent);
}

.empty-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--text);
}

.empty-body {
  margin-top: 0.5rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.empty-body p {
  margin: 0;
}

/* ---- 404 ---- */

.notfound {
  padding: 1.5rem 0 1rem;
}

.nf-code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 13vw, 5.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--border-strong);
}

.nf-title {
  margin: 1.1rem 0 0;
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.nf-path {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
}

.nf-path code {
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.4rem;
  background: var(--bg-raised);
  overflow-wrap: anywhere;
}

.nf-body {
  margin: 0.9rem 0 1.75rem;
  max-width: 34rem;
  color: var(--text-dim);
}

.nf-links {
  margin: 1.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.nf-links a {
  color: var(--text-dim);
}

.nf-links a:hover {
  color: var(--accent);
}

/* ---- responsive (§16): single column, search stays prominent ---- */

@media (max-width: 46rem) {
  .topbar {
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
    padding: 0.6rem 1rem;
  }

  .topsearch {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .topsearch input {
    width: 100%;
    max-width: none;
  }

  .main {
    padding: 1.6rem 1rem 3rem;
  }

  .listing-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }

  .post-row {
    padding: 0.9rem 1rem 0.85rem 1.15rem;
  }

  .article {
    font-size: 1rem;
  }

  .rel-head {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .strength {
    margin-left: 0;
    width: 2.75rem;
  }

  .pager {
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .caret {
    opacity: 1;
  }
}

/* ---- print ---- */

@media print {
  body {
    background: #fff;
    color: #111;
  }

  .topbar,
  .pager,
  .listing-foot,
  .searchbox,
  .rel-more,
  .caret {
    display: none;
  }

  .main {
    max-width: none;
    padding: 0;
  }

  .article,
  .post-title,
  .article :is(h2, h3, h4) {
    color: #111;
  }

  .article a {
    color: #111;
  }

  .article pre {
    background: #f6f8fa;
    border-color: #d0d7de;
    color: #111;
    white-space: pre-wrap;
  }
}

/* ---- about ---- */

.about-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 26rem;
}

.about-links a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-raised) 75%, transparent);
  color: var(--text);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.about-links a:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--bg-hover);
}

.about-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  min-width: 5.5rem;
}

.about-label::before {
  content: '// ';
  color: var(--accent-dim);
}

.about-handle {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.about-arrow {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.about-links a:hover .about-arrow {
  color: var(--accent);
}

/* ---- full-page post embed (§7 full-page mode) ---- */

.page-embed {
  /* Break out of the article measure: a full app deserves the screen. */
  width: min(96vw, 80rem);
  margin: 1.5rem 0 1.5rem calc(50% - min(48vw, 40rem));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
}

.page-embed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.8rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 55%, var(--bg-raised));
}

.page-embed-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-embed-open {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  white-space: nowrap;
}

.page-frame {
  display: block;
  width: 100%;
  height: clamp(480px, 75vh, 960px);
  border: 0;
  background: #fff; /* pages own their background; default to white while loading */
}

.page-notes {
  margin-top: 1.75rem;
}

@media (max-width: 46rem) {
  .page-embed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .page-frame {
    height: 70vh;
  }
}

/* ---- post-card thumbnails ---- */

.post-row.has-thumb {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

.post-row.has-thumb .row-main {
  flex: 1;
  min-width: 0;
}

.row-thumb {
  flex: 0 0 auto;
  align-self: center;
  width: 7.5rem;
  height: 5.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-code);
}

.row-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s var(--ease);
}

.post-row:hover .row-thumb img {
  transform: scale(1.04);
}

@media (max-width: 46rem) {
  .row-thumb {
    width: 5.25rem;
    height: 4rem;
  }
}

/* ---- keywords (LLM-derived; distinct from authored tags) ---- */

.post-keywords {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.55rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.post-keywords-label {
  color: var(--text-dim);
  opacity: 0.7;
}

.post-keywords-label::after {
  content: ':';
}

.keyword {
  color: var(--text-dim);
  border-bottom: 1px dotted var(--border-strong);
}

.keyword-sep {
  color: var(--text-dim);
  opacity: 0.5;
  user-select: none;
}

.keyword:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-dim);
  text-decoration: none;
}