:root {
  /* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);

  /* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);

  /* Fonts */
  --font-humanist: "iA Writer Quattro", "iA Writer Quattro V", -apple-system, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Light palette */
  --bg: #f8f4ea;
  --ink: #1d1a15;
  --muted: #6b6257;
  --mutedFaint: #9a9184;
  --rule: #ddd4c1;
  --rule2: #c7bfae;
  --code: #efe8d6;
  --accent: #3a3a3a;
  --ok: #4a7a3a;
  --bad: #9a3a28;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-humanist);
  font-size: var(--step-0);
  line-height: 1.6;
}

a { color: var(--accent); }
pre { white-space: pre-wrap; word-break: break-word; }

/* Layout */

.page-nav {
  padding: var(--space-xs) var(--space-xl);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: -0.2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-nav .nav-bar { display: flex; align-items: center; gap: var(--space-3xs); }
.page-nav .nav-wordmark,
.page-nav .nav-repo { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-3xs); }
.page-nav .q-mark { color: var(--ink); display: block; }
.page-nav .nav-crumb { color: var(--muted); }
.page-nav a.nav-crumb { text-decoration: none; }
.page-nav a.nav-crumb:hover { color: var(--accent); }
.page-nav .sep { color: var(--rule2); }

.page-main { padding: var(--space-m) var(--space-xl) var(--space-l); }

.page-footer {
  padding: var(--space-s) var(--space-xl) var(--space-m);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--mutedFaint);
  letter-spacing: 0.2px;
  display: flex;
  justify-content: space-between;
}

/* CI run list */

.ci-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: currentColor;
}

.ci-state-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}

.ci-commit-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule2);
}

/* CI jobs */

.ci-job {
  margin: var(--space-m) 0 0;
}

.ci-job-header {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid var(--rule2);
}

.ci-sh {
  margin: var(--space-2xs) 0;
}

.ci-sh-meta {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--mutedFaint);
  margin-bottom: var(--space-3xs);
}

.ci-sh-cmd {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
  margin-bottom: var(--space-3xs);
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
}

.ci-sh-log {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.65;
  background: var(--code);
  color: var(--ink);
  padding: var(--space-2xs) var(--space-xs);
  border-left: 2px solid var(--accent);
  overflow: auto;
  margin: 0 0 var(--space-2xs);
}

.ci-empty { padding: var(--space-s) 0; color: var(--muted); }

/* Error page */

.error-title {
  color: var(--bad);
  font-family: var(--font-mono);
}

.error-detail {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  background: var(--code);
  padding: var(--space-xs) var(--space-s);
  overflow: auto;
}

/* Color tokens */

.c-ok { color: var(--ok); }
.c-bad { color: var(--bad); }
.c-muted { color: var(--muted); }
.c-accent { color: var(--accent); }

/* Dark palette — OS preference or .dark class toggle via Alpine. */

@media (prefers-color-scheme: dark) {
  :root:not(.dark-override-light) {
    --bg: #14120f;
    --ink: #e8e2d2;
    --muted: #8a8173;
    --mutedFaint: #5a5347;
    --rule: #2a2721;
    --rule2: #1f1d18;
    --code: #1b1915;
    --accent: #c9c2b0;
    --ok: #8ab378;
    --bad: #d47a65;
  }
}

html.dark {
  --bg: #14120f;
  --ink: #e8e2d2;
  --muted: #8a8173;
  --mutedFaint: #5a5347;
  --rule: #2a2721;
  --rule2: #1f1d18;
  --code: #1b1915;
  --accent: #c9c2b0;
  --ok: #8ab378;
  --bad: #d47a65;
}

@media (prefers-color-scheme: dark) {
  html.dark { /* already applied above */ }
}

/* ── Footer enhancements ───────────────────────────────────────── */

.dark-toggle {
  background: none;
  border: 1px solid var(--rule2);
  border-radius: 3px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  cursor: pointer;
  padding: 1px 5px;
  margin-right: var(--space-2xs);
  line-height: 1;
}

.dark-toggle:hover { color: var(--ink); border-color: var(--rule); }

.footer-hint {
  font-size: var(--step--2);
}

.footer-hint kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border: 1px solid var(--rule2);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--muted);
}

/* ── Repo Home ─────────────────────────────────────────────────── */

.repo-meta-sep { color: var(--rule2); }
.repo-meta-dot { color: var(--rule2); }
.ci-inline { display: inline-flex; align-items: baseline; gap: var(--space-3xs); }

.bookmark-glyph { color: var(--mutedFaint); }
.bookmark-name { color: var(--accent); }

.commit-id-secondary {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mutedFaint);
}

/* change-id: first 4 chars accent, next 4 muted */
.change-id {
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-decoration: none;
}

.change-head { color: var(--accent); font-weight: 500; }
.change-tail { color: var(--muted); }

/* ── Section nav ───────────────────────────────────────────────── */

.repo-section-nav {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: 0 var(--space-xl);
  font-family: var(--font-mono);
  font-size: 13px;
  border-bottom: 1px solid var(--rule);
}

.repo-position {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3xs);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.repo-position-age { color: var(--muted); }
.repo-position-path { color: var(--ink); }

.section-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3xs);
  padding: var(--space-2xs) 0;
  margin-bottom: -1px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.section-link:hover { color: var(--ink); }

.section-link--active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.section-count {
  color: var(--mutedFaint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ── Repo body (two-column) ────────────────────────────────────── */

.repo-body {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
}

.repo-readme {
  padding: var(--space-l) var(--space-xl) var(--space-xl) var(--space-xl);
  border-right: 1px solid var(--rule);
  font-family: var(--font-humanist);
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink);
  min-width: 0;
}

.readme-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-xs);
}

.readme-empty {
  color: var(--mutedFaint);
  font-style: italic;
  margin: 0;
}

/* README rendered content */
.readme-content h1 {
  font-family: var(--font-humanist);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.readme-content h2 {
  font-family: var(--font-humanist);
  font-size: 22px;
  font-weight: 600;
  margin: var(--space-m) 0 var(--space-2xs);
  line-height: 1.3;
}

.readme-content h3 {
  font-family: var(--font-humanist);
  font-size: 18px;
  font-weight: 600;
  margin: var(--space-s) 0 var(--space-2xs);
}

.readme-content p { margin: 0 0 var(--space-xs); }

.readme-content p:last-child { margin-bottom: 0; }

.readme-content ul,
.readme-content ol {
  margin: 0 0 var(--space-s);
  padding-left: var(--space-s);
}

.readme-content li { margin: var(--space-3xs) 0; }

.readme-content code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--code);
  padding: 1px 5px;
}

.readme-content pre {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  background: var(--code);
  color: var(--ink);
  padding: var(--space-xs) var(--space-s);
  margin: 0 0 var(--space-s);
  border-left: 2px solid var(--accent);
  overflow: auto;
  white-space: pre;
}

.readme-content pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

.readme-content a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule2);
}

.readme-content a:hover { border-bottom-color: var(--accent); }

.readme-content blockquote {
  border-left: 2px solid var(--rule2);
  margin: 0 0 var(--space-xs);
  padding: 4px var(--space-xs);
  color: var(--muted);
}

/* ── Sidebar ───────────────────────────────────────────────────── */

.repo-sidebar {
  padding: var(--space-l) var(--space-xl) var(--space-xl) var(--space-xl);
  font-family: var(--font-mono);
  font-size: 12.5px;
  min-width: 0;
}

.side-block {
  margin-bottom: var(--space-m);
}

.side-block--last { margin-bottom: 0; }

.side-block-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2xs);
  padding-bottom: var(--space-3xs);
  border-bottom: 1px solid var(--rule2);
}

/* Clone block */
.clone-label {
  color: var(--mutedFaint);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 3px;
  margin-top: var(--space-2xs);
}

.clone-label:first-of-type { margin-top: 0; }

.clone-url {
  color: var(--ink);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
  margin-bottom: 4px;
}

/* Bookmark list */
.bookmark-list { line-height: 1.8; }

.bookmark-row {
  display: flex;
  align-items: baseline;
  gap: 0;
}

.bookmark-kind {
  display: inline-block;
  width: 44px;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--mutedFaint);
  flex-shrink: 0;
}

.bookmark-kind--trunk { color: var(--accent); }

.bookmark-glyph-sm {
  color: var(--mutedFaint);
  font-size: 9px;
  margin-right: 4px;
}

.bookmark-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule2);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark-link:hover { color: var(--accent); }

.bookmark-age {
  color: var(--muted);
  font-size: 11.5px;
  margin-left: var(--space-2xs);
  white-space: nowrap;
}

.side-more {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

.side-more:hover { color: var(--ink); }

/* CI mini list */
.ci-mini-list {
  font-family: var(--font-mono);
  font-size: 12.5px;
  display: grid;
  grid-template-columns: 10px 64px 1fr auto auto;
  column-gap: var(--space-2xs);
  row-gap: 0;
  align-items: baseline;
  line-height: 1.85;
}

.ci-mini-row { display: contents; }

.ci-mini-link {
  color: var(--ink);
  text-decoration: none;
}

.ci-mini-branch {
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-mini-age {
  color: var(--mutedFaint);
  white-space: nowrap;
}

.ci-mini-dur {
  color: var(--muted);
  white-space: nowrap;
}

/* Recent changes list */
.change-mini-list { }

.change-mini-row {
  padding: var(--space-3xs) 0;
  border-bottom: 1px dotted var(--rule2);
}

.change-mini-row:last-child { border-bottom: none; }

.change-mini-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  margin-bottom: 2px;
}

.change-mini-age {
  color: var(--mutedFaint);
  font-size: 11.5px;
}

.change-mini-desc {
  color: var(--ink);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-desc {
  font-style: italic;
  color: var(--mutedFaint);
}

.change-mini-desc-link {
  color: inherit;
  text-decoration: none;
}

.change-mini-desc-link:hover {
  color: var(--accent);
}

/* ── CI run list (full page) ───────────────────────────────────── */

.ci-run-list {
  padding: var(--space-l) var(--space-xl);
  min-width: 0;
}

.ci-run-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 2;
}

.ci-run-row .ci-status-dot {
  flex-shrink: 0;
}

.ci-run-branch {
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-run-age {
  color: var(--mutedFaint);
  white-space: nowrap;
}

.ci-run-dur {
  color: var(--muted);
  white-space: nowrap;
  margin-left: auto;
}

/* ── CI run detail ─────────────────────────────────────────────── */

.ci-detail {
  padding: var(--space-l) var(--space-xl);
  min-width: 0;
}

.ci-detail .ci-meta {
  padding: 0 0 var(--space-s);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}

/* ── Config ────────────────────────────────────────────────────── */

.config-table {
  padding: var(--space-l) var(--space-xl);
  min-width: 0;
}

.config-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 2;
}

.config-key {
  color: var(--muted);
  min-width: 200px;
}

.config-val {
  color: var(--ink);
}

.config-val--empty {
  color: var(--mutedFaint);
  font-style: italic;
}

/* ── File view ─────────────────────────────────────────────────── */

.file-code-col {
  min-width: 0;
  border-right: 1px solid var(--rule);
}

/* File info sidebar blocks */

.file-info-list {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
}

.file-info-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.file-info-key {
  color: var(--mutedFaint);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  min-width: 70px;
}

.file-info-val {
  color: var(--muted);
}

/* Last change sidebar block */

.file-last-change-side {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
}

.file-last-change-side .change-id {
  display: inline-block;
  margin-bottom: 6px;
}

.file-last-change-msg {
  color: var(--ink);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-last-change-meta {
  display: flex;
  gap: 10px;
  font-size: 11.5px;
}

.file-last-change-author {
  color: var(--mutedFaint);
}

.file-last-change-age {
  color: var(--muted);
}

/* Actions sidebar block */

.file-actions-list {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
}

.file-action-row {
  display: block;
  color: var(--accent);
  text-decoration: none;
}

/* Code surface */

.code-surface {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  display: grid;
  grid-template-columns: auto 1fr;
  background: var(--bg);
  /* Override arborium's theme background variables so they don't clash. */
  --arb-bg-light: transparent;
  --arb-bg-dark: transparent;
}

.code-gutter {
  padding: 16px 10px 16px 12px;
  color: var(--mutedFaint);
  text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none;
  border-right: 1px solid var(--rule);
}

.code-line-num {
  white-space: pre;
}

.code-body {
  padding: 16px 16px 16px 12px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: var(--bg);
}

/* ── Arborium syntax highlighting integration ──────────────────── */

/* Left-rail accent only for standalone code blocks, not the file view grid. */
pre:not(.code-body):has(code[class*="language-"]),
pre:not(.code-body):has(code[data-lang]) {
  border-left: 2px solid var(--accent) !important;
  background: var(--bg) !important;
  border-radius: 0 !important;
}

/* Arborium injects its own <style> for theme colors; let it control text
   colors but keep our font stack and size. */
pre code[class*="language-"],
pre code[data-lang] {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
}

/* ── Tree browser ──────────────────────────────────────────────── */

.tree-path-crumb {
  padding: var(--space-2xs) var(--space-xl);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.tree-breadcrumb {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.tree-breadcrumb-seg {
  color: var(--ink);
  font-weight: 500;
}

.tree-breadcrumb-link {
  text-decoration: none;
  font-weight: 400;
  color: var(--ink);
}

.tree-breadcrumb-link:hover { color: var(--accent); }

.tree-breadcrumb-sep {
  color: var(--rule2);
  padding: 0 4px;
}

.tree-meta-row {
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
  align-items: center;
}

.tree-meta-label {
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--mutedFaint);
  margin-right: var(--space-3xs);
}

.tree-ref-name {
  color: var(--ink);
  border-bottom: 1px dotted var(--rule2);
}

.tree-meta-sha { font-size: 12.5px; }

.tree-meta-dot { color: var(--rule2); }

.tree-meta-spacer { flex: 1; }

.tree-meta-links { display: inline-flex; gap: var(--space-2xs); }

.tree-meta-link {
  color: var(--muted);
  text-decoration: none;
}

.tree-meta-link:hover { color: var(--ink); }

.tree-meta-link--active { color: var(--accent); }

/* Commit strip */

.tree-commit-strip {
  padding: var(--space-2xs) var(--space-xl);
  font-family: var(--font-mono);
  font-size: 12.5px;
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
}

.tree-commit-id { font-size: 12.5px; }

.tree-commit-desc {
  color: var(--ink);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-commit-author { color: var(--mutedFaint); }

.tree-commit-age { color: var(--muted); }

/* Two-column layout */

.tree-body {
  display: grid;
  grid-template-columns: minmax(0, 2.7fr) minmax(0, 1fr);
}

/* Tree table — left column */

.tree-table-col {
  border-right: 1px solid var(--rule);
  min-width: 0;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.tree-row {
  display: grid;
  grid-template-columns: 18px 240px minmax(0, 1fr) max-content;
  gap: var(--space-xs);
  padding: var(--space-3xs) var(--space-xl);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 13px;
}

.tree-icon {
  display: flex;
  align-items: center;
  color: var(--muted);
  transform: translateY(2px);
}

.tree-row--sub .tree-icon { color: var(--accent); }
.tree-row--up .tree-icon { opacity: 0.5; }

.tree-name {
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-name--dir {
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.tree-name--dir:hover { color: var(--accent); }

.tree-name--up {
  color: var(--muted);
  text-decoration: none;
}

.tree-name--up:hover { color: var(--ink); }

.tree-row--sub .tree-name { font-style: italic; }

.tree-msg {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.tree-age {
  color: var(--mutedFaint);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

/* Tree sidebar — right column, recent commit log */

.tree-sidebar {
  padding: var(--space-2xs) var(--space-s) var(--space-2xs) var(--space-s);
  font-family: var(--font-mono);
  font-size: 12.5px;
  min-width: 0;
}

.tree-log-item {
  display: block;
  padding: var(--space-2xs) 0;
  text-decoration: none;
}

.tree-log-subject {
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tree-log-meta {
  margin-top: 4px;
  font-size: 11px;
  display: flex;
  gap: var(--space-2xs);
  align-items: baseline;
}

.tree-log-sha { color: var(--muted); }

.tree-log-age { color: var(--mutedFaint); }

.tree-log-more {
  display: block;
  margin-top: var(--space-2xs);
  color: var(--mutedFaint);
  text-decoration: none;
  font-size: 12px;
}

/* README preview */

.tree-readme-preview {
  font-family: var(--font-humanist);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--code);
  border-left: 2px solid var(--accent);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  max-height: 160px;
}

/* Keyboard hint footer */

.tree-footer {
  padding: var(--space-xs) var(--space-xl) var(--space-m);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mutedFaint);
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.2px;
}

.tree-footer-hints {
  display: inline-flex;
  gap: var(--space-xs);
}

.tree-footer kbd,
.tree-footer-hints kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border: 1px solid var(--rule2);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--muted);
}

/* Collapse to single column on narrow viewports */

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

  .tree-table-col {
    border-right: none;
  }

  .tree-sidebar {
    border-top: 1px solid var(--rule);
    padding: var(--space-s) var(--space-s) var(--space-s);
  }

  .tree-path-crumb,
  .tree-commit-strip,
  .tree-footer {
    padding-left: var(--space-s);
    padding-right: var(--space-s);
  }

  .tree-row {
    grid-template-columns: 18px minmax(0, 1fr) max-content;
    padding-left: var(--space-s);
    padding-right: var(--space-s);
  }

  .tree-msg { display: none; }
}

/* ── Commit log ────────────────────────────────────────────────── */

.log-body {
  max-width: 820px;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.log-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-xs);
  padding: var(--space-3xs) var(--space-xl);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 13px;
}

.log-subject {
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-subject:hover {
  color: var(--accent);
}

.log-sha {
  text-decoration: none;
  font-size: 12px;
}

.log-age {
  color: var(--mutedFaint);
  font-size: 12px;
  white-space: nowrap;
}

.log-empty {
  padding: var(--space-l) var(--space-xl);
  color: var(--muted);
}

/* ── Commit detail ─────────────────────────────────────────────── */

.commit-detail {
  padding: var(--space-l) var(--space-xl);
  min-width: 0;
}

.commit-message {
  margin-bottom: var(--space-m);
}

.commit-subject {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: var(--space-s);
}

.commit-body {
  font-family: var(--font-humanist);
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.commit-meta-list {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 2;
  margin-bottom: var(--space-l);
}

.commit-meta-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
}

.commit-meta-key {
  color: var(--mutedFaint);
  min-width: 70px;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.commit-meta-val {
  color: var(--ink);
}

.commit-meta-val--secondary {
  color: var(--muted);
}

.change-id-full {
  font-family: var(--font-mono);
}

.change-id-head {
  color: var(--accent);
  font-weight: 500;
}

.change-id-tail {
  color: var(--muted);
}

.commit-meta-val .change-id {
  margin-right: var(--space-2xs);
}

.commit-diff {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  background: var(--code);
  padding: var(--space-s) var(--space-m);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  border-left: 2px solid var(--accent);
}

/* ── Repo list ──────────────────────────────────────────────────── */

.repo-list-page {
  padding: var(--space-l) var(--space-xl);
  max-width: 820px;
}

.repo-list-heading {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 var(--space-m);
  color: var(--ink);
}

.repo-list {
  border-top: 1px solid var(--rule);
}

.repo-list-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
}

.repo-list-item:hover {
  color: var(--accent);
}

.repo-list-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.repo-list-item:hover .repo-list-name {
  color: var(--accent);
}

.repo-list-desc {
  font-size: 14px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repo-list-empty {
  color: var(--muted);
  font-style: italic;
  padding: var(--space-l) 0;
}

/* ── Mobile (≤768px) ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .page-nav {
    padding-left: var(--space-s);
    padding-right: var(--space-s);
  }

  .page-main {
    padding-left: var(--space-s);
    padding-right: var(--space-s);
  }

  .page-footer {
    padding-left: var(--space-s);
    padding-right: var(--space-s);
  }

  .repo-section-nav {
    padding-left: var(--space-s);
    padding-right: var(--space-s);
    gap: var(--space-m);
    overflow-x: auto;
  }

  .repo-position {
    display: none;
  }

  .repo-body {
    grid-template-columns: 1fr;
  }

  .repo-sidebar {
    display: none;
  }

  .repo-readme {
    padding: var(--space-m) var(--space-s) var(--space-l);
    border-right: none;
  }
}