/* Base element styles over the token layer (E14-1). Semantic HTML first
 * (7.13): components style elements, not div soups. */

* { box-sizing: border-box; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-bg);
  padding: var(--space-2) var(--space-3);
  z-index: 10;
}
.skip-link:focus { left: 0; }

html { font-family: var(--font-sans); }

/* Inline SVG icons (the {{icon}} helper): sized to the text they sit
 * with, colored by inheritance. */
.icon { width: 1em; height: 1em; vertical-align: -0.125em; }
.file-icon .icon { color: var(--color-fg-muted); }
.branch-chip .icon, .nav-bell .icon { vertical-align: -0.1875em; }
.issue-open .issue-state .icon { color: var(--color-success); }
.issue-closed .issue-state .icon { color: var(--color-emphasis); }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  line-height: var(--leading-normal);
}

/* Monochrome chrome: links share the foreground color, so position
 * marks chrome links (nav, tables, toolbars) and underlines mark links
 * inside prose — always on there, not just on hover. */
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
.markdown-body a, .readme a, .comment-card .markdown-body a,
.timeline-event a, .empty-note a, .empty-state a, .notice-banner a {
  text-decoration: underline;
  text-decoration-color: var(--color-fg-muted);
}
.markdown-body a:hover, .readme a:hover { text-decoration-color: var(--color-fg); }

code, pre { font-family: var(--font-mono); font-size: 0.9em; }
pre {
  background: var(--color-bg-subtle);
  /* Passive containers use the fainter hairline; --color-border is
   * reserved for interactive edges (inputs, chips, tables). */
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-1);
  padding: var(--space-3);
  overflow-x: auto;
}

/* Signature focus ring: crisp violet line + soft violet halo. */
:focus-visible {
  outline: 2px solid var(--color-emphasis);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px var(--color-accent-muted);
  border-radius: var(--radius-1);
}

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}
.site-header > nav {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* The brand mark: the "commit route" glyph beside the wordmark — the
 * one place identity concentrates in monochrome chrome. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-bold);
  font-size: var(--text-3);
  color: var(--color-fg);
  text-decoration: none;
}
.brand .icon { width: 1.25em; height: 1.25em; }
.brand:hover { text-decoration: none; }
/* Header nav reads as chrome, not content: foreground color, quiet. */
.site-header > nav > a:not(.brand) { color: var(--color-fg); }

.breadcrumbs {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-2) var(--space-3) 0;
  font-size: var(--text-2);
}
.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.breadcrumbs li + li::before {
  content: "/";
  color: var(--color-fg-muted);
  margin-right: var(--space-1);
}
.breadcrumbs [aria-current="page"] { color: var(--color-fg-muted); }

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
}

/* Responsive baseline (8.1): mobile-first, content never forces the page
 * to scroll sideways — wide artifacts (tables, code) scroll in their own
 * container. */
img { max-width: 100%; }
/* Tables fill their container at desktop widths; at narrow widths they
 * fall back to a block scroll container so wide artifacts never force
 * the page to scroll sideways. */
table { max-width: 100%; border-collapse: collapse; }
@media (max-width: 48rem) {
  table { display: block; overflow-x: auto; }
}

@media (max-width: 40rem) {
  main { padding: var(--space-3) var(--space-2); }
  .site-header > nav { flex-wrap: wrap; gap: var(--space-2); }
}

.site-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-3);
  color: var(--color-fg-muted);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-2);
}

.nav-end { margin-left: auto; }
.nav-user { color: var(--color-fg-muted); }
.nav-button {
  font: inherit;
  background: none;
  border: none;
  color: var(--color-fg);
  cursor: pointer;
  padding: 0;
}
.nav-button:hover { text-decoration: underline; }

/* Header quick links (Explore, Search) read as chrome: icon + label. */
.nav-link, .nav-search { display: inline-flex; align-items: center; gap: var(--space-1); text-decoration: none; }

/* Header dropdowns (New, account) — dependency-free <details> popovers,
 * mirroring the repo toolbar menus. Closed <details> hides the panel, so
 * no JS is needed; the panel overlays via absolute positioning. */
.nav-menu { position: relative; display: inline-flex; }
.nav-menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--color-fg);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu[open] > summary > .icon:last-child { transform: rotate(180deg); }
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 12rem; padding: var(--space-1);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column;
}
.nav-menu-panel a {
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-1);
  color: var(--color-fg); text-decoration: none;
}
.nav-menu-panel a:hover { background: var(--color-bg-subtle); color: var(--color-fg); }
.nav-menu-signout {
  font: inherit; text-align: left; cursor: pointer;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-1);
  background: none; border: none; color: var(--color-fg);
  border-top: 1px solid var(--color-border-muted); margin-top: var(--space-1);
}
.nav-menu-signout:hover { background: var(--color-bg-subtle); }

.auth-card {
  max-width: 24rem;
  margin: var(--space-5) auto;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background: var(--color-bg-subtle);
}
.auth-card h1 { font-size: var(--text-4); margin-top: 0; }
.auth-card label { display: block; margin-top: var(--space-3); font-weight: var(--weight-semibold); }
.auth-card label.check { font-weight: var(--weight-normal); }
.auth-card input[type="text"], .auth-card input[type="password"] {
  width: 100%;
  padding: var(--space-2);
  margin-top: var(--space-1);
  font: inherit;
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
}
forge-webauthn-login, forge-webauthn-register { display: block; margin-top: var(--space-2); }
.auth-card forge-webauthn-login button { width: 100%; padding: var(--space-2); }
.auth-card button[type="submit"] {
  margin-top: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  font: inherit;
  font-weight: var(--weight-semibold);
  color: var(--color-on-emphasis);
  background: var(--color-emphasis);
  border: none;
  border-radius: var(--radius-1);
  cursor: pointer;
}
.form-error { color: var(--color-danger); }
.form-hint { color: var(--color-fg-muted); font-size: var(--text-2); }

.theme-toggle {
  font: inherit;
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--color-bg-subtle); }

/* Home page repository list */
.home-repos { margin-top: var(--space-4); }
.home-repos h2 { font-size: var(--text-4); margin-bottom: var(--space-2); }
.repo-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-1); }
.repo-list li { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border); }
.repo-list li:first-child { border-top: 0; }
.repo-list-head { display: flex; align-items: center; gap: var(--space-2); }
.repo-list-head a { text-decoration: none; }
.repo-list-head a:hover { text-decoration: underline; }
.repo-list-desc { color: var(--color-fg-muted); font-size: var(--text-2); margin-top: var(--space-1); }
/* .home-empty styled with the shared empty-state family below. */

/* Repository views */
.repo-head { margin-bottom: var(--space-3); }
.repo-title { font-size: var(--text-5); font-weight: var(--weight-normal); margin: 0 0 var(--space-2); }
.repo-title strong { font-weight: var(--weight-semibold); }
/* Masthead row: title on the left, star/watch controls pushed right. */
.repo-head-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-2); }
.repo-head-row .repo-title { flex: 1; min-width: 12rem; }
.repo-social { display: flex; gap: var(--space-2); }
.repo-social form { margin: 0; }
.social-button {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font: inherit; cursor: pointer; text-decoration: none;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-subtle); color: var(--color-fg);
  border: 1px solid var(--color-border); border-radius: var(--radius-1);
}
.social-button:hover { background: var(--color-accent-subtle); text-decoration: none; }
.social-count {
  font-size: var(--text-1); font-weight: var(--weight-semibold);
  padding: 0 var(--space-1); border-radius: 999px;
  background: var(--color-bg); border: 1px solid var(--color-border-muted); color: var(--color-fg-muted);
}
.repo-desc { color: var(--color-fg-muted); margin-top: var(--space-1); }
.repo-title a { color: inherit; text-decoration: none; }
.repo-title a:hover { text-decoration: underline; }
/* User profile masthead. */
.profile-head { margin-bottom: var(--space-3); }
.profile-name { font-size: var(--text-5); font-weight: var(--weight-semibold); margin: 0 0 var(--space-1); }
.profile-meta { color: var(--color-fg-muted); font-size: var(--text-2); margin: 0; }
/* Page heading under the repo masthead: clearly subordinate to the
 * repo-title above it. */
.page-title { font-size: var(--text-4); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
.repo-head .repo-tabs { margin: 0; }
.repo-meta { color: var(--color-fg-muted); font-size: var(--text-2); }
/* .repo-empty styled with the shared empty-state family below. */
.badge {
  font-size: var(--text-1);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-fg-muted);
}

/* Latest-commit bar: sits flush on top of the file table like a header
 * row (GitHub-style). */
.latest-commit {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-1) var(--radius-1) 0 0;
  font-size: var(--text-2);
  min-width: 0;
}
.latest-commit + .file-table { border-top-left-radius: 0; border-top-right-radius: 0; }
.latest-author { font-weight: var(--weight-semibold); white-space: nowrap; }
.latest-subject {
  color: var(--color-fg); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.latest-subject:hover { color: var(--color-link); }
.latest-meta { color: var(--color-fg-muted); white-space: nowrap; }
.latest-meta a { color: var(--color-fg-muted); }
.latest-meta a:hover { color: var(--color-link); }

/* Language split under the file list: an SVG bar (CSP forbids inline
 * styles, SVG attributes it can't) plus a dot legend. */
.lang-bar-wrap { margin: var(--space-3) 0; }
.lang-bar { display: block; border-radius: 999px; }
.lang-legend {
  list-style: none; margin: var(--space-2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  font-size: var(--text-2); color: var(--color-fg-muted);
}
.lang-legend li { display: inline-flex; align-items: center; gap: 6px; }
.lang-legend strong { color: var(--color-fg); font-weight: var(--weight-semibold); }

.file-table, .commit-table {
  /* Real table layout (the global block-display rule is for wide
   * artifacts): name column takes the slack, size hugs the right. */
  display: table;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
}
.file-table td.file-name { white-space: nowrap; }
/* The commit column absorbs the slack and ellipsizes (max-width: 0 is
 * what makes text-overflow work inside an auto-layout table). */
.file-table td.file-commit {
  width: 100%; max-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-fg-muted);
}
.file-table td.file-commit a { color: var(--color-fg-muted); }
.file-table td.file-commit a:hover { color: var(--color-link); }
.file-table td.file-when { white-space: nowrap; text-align: right; color: var(--color-fg-muted); font-size: var(--text-2); }
.latest-count { white-space: nowrap; }
.file-table td, .commit-table td {
  padding: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.file-table tr:first-child td, .commit-table tr:first-child td { border-top: 0; }
.file-table tbody tr:hover, .commit-table tbody tr:hover { background: var(--color-bg-subtle); }
/* File names read as content (foreground) and light up as links on hover. */
.file-table td a { color: var(--color-fg); }
.file-table td a:hover { color: var(--color-link); }
.file-icon { width: 1.5rem; }
.file-size { text-align: right; color: var(--color-fg-muted); white-space: nowrap; }
.commit-sha { width: 7rem; }
.commit-date, .commit-author { white-space: nowrap; color: var(--color-fg-muted); }

.readme {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-1);
}
.readme :first-child { margin-top: 0; }

/* Repo toolbar: branch chip + quick links above the file listing. */
.repo-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  font-size: var(--text-2);
}
/* Code page toolbar menus (Add new, Clone): dependency-free details
 * popovers. Go to file carries the auto margin, so the right cluster
 * reads search → Add new → Clone. */
.repo-toolbar .goto-file { margin-left: auto; }
.toolbar-menu { position: relative; }
.toolbar-menu summary { list-style: none; cursor: pointer; }
.toolbar-menu summary::-webkit-details-marker { display: none; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 10rem; padding: var(--space-1);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column;
}
.menu-pop a { padding: var(--space-1) var(--space-2); border-radius: var(--radius-1); color: var(--color-fg); }
.menu-pop a:hover { background: var(--color-bg-subtle); color: var(--color-fg); }
.clone-pop {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 24rem; padding: var(--space-3);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.clone-label { font-weight: var(--weight-semibold); font-size: var(--text-1); color: var(--color-fg-muted); }
.clone-row { display: flex; align-items: center; gap: var(--space-1); margin-top: 2px; }
.clone-row input {
  flex: 1; font-family: var(--font-mono); font-size: var(--text-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-subtle); color: var(--color-fg);
  border: 1px solid var(--color-border); border-radius: var(--radius-1);
}

.branch-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  color: var(--color-fg-muted);
}
.branch-chip code { color: var(--color-fg); }
.toolbar-link { color: var(--color-fg-muted); }
.toolbar-link:hover { color: var(--color-link); }
/* "Go to file": reads as a quiet search input, opens the palette's
 * file mode (no-JS falls through to global search). */
.goto-file {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-left: auto;
  min-width: 14rem;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  color: var(--color-fg-muted);
}
.goto-file:hover { color: var(--color-fg); text-decoration: none; border-color: var(--color-fg-muted); }
.goto-file kbd {
  margin-left: auto;
  padding: 0 6px;
  font: inherit; font-size: var(--text-1); font-family: var(--font-mono);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
}

/* Code card: the blob view — header bar, then rendered markdown or the
 * numbered source listing. */
.code-card {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  overflow: hidden;
}
.code-card-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}
.blob-title { font-size: var(--text-3); margin: 0; }
.code-card-meta { color: var(--color-fg-muted); font-size: var(--text-2); }
.code-card-actions {
  margin-left: auto;
  display: inline-flex; align-items: baseline; gap: var(--space-3);
}
.find-file-btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font: inherit; font-size: var(--text-2);
  padding: 2px var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  color: var(--color-fg-muted);
  cursor: pointer;
}
.find-file-btn:hover { color: var(--color-fg); border-color: var(--color-fg-muted); background: var(--color-bg); }
.find-file-btn kbd {
  padding: 0 5px;
  font-size: var(--text-1); font-family: var(--font-mono);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
}
.code-card-notice { padding: var(--space-4); margin: 0; }
.code-card-rendered { margin: 0; border: 0; border-radius: 0; }
.blob-content { margin: 0; border: 0; border-radius: 0; background: var(--color-bg); }
/* Line numbers: CSS counters on per-line spans — no inline styles, so
 * the strict CSP holds; numbers stay out of copied text (::before). */
.blob-content code { counter-reset: line; }
.code-line { counter-increment: line; }
.code-line::before {
  content: counter(line);
  display: inline-block;
  width: 3ch;
  margin-right: var(--space-3);
  text-align: right;
  color: var(--color-fg-muted);
}
/* Line deep-links: #L42 works no-JS via :target; the code-lines island
 * adds .line-hl ranges and makes the number gutter clickable. */
.code-line { scroll-margin-top: var(--space-5); }
.code-line:target, .code-line.line-hl { background: var(--color-warning-subtle); }
forge-code-lines[data-live] .code-line::before { cursor: pointer; }
forge-code-lines[data-live] .code-line:hover::before { color: var(--color-link); }

/* Copy buttons (copy island; JS-injected). */
forge-copy { display: inline-flex; }
.copy-btn {
  display: inline-flex; align-items: center;
  font: inherit; font-size: var(--text-1); line-height: 1;
  padding: 3px var(--space-1);
  background: none;
  color: var(--color-fg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-1), background var(--dur-1) var(--ease-1);
}
.copy-btn:hover { color: var(--color-fg); background: var(--color-bg-subtle); }
.copy-btn.copied { color: var(--color-success); border-color: var(--color-success); }
.copy-wrap { position: relative; }
.copy-wrap > pre { margin: 0; }
.copy-wrap .copy-btn {
  position: absolute; top: var(--space-2); right: var(--space-2);
  background: var(--color-bg);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-1);
}
.copy-wrap:hover .copy-btn, .copy-wrap:focus-within .copy-btn, .copy-btn.copied { opacity: 1; }

/* Wiki: article + page sidebar. */
.wiki-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: var(--space-4);
  align-items: start;
}
.wiki-page { margin-top: 0; }
.wiki-nav {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  font-size: var(--text-2);
}
.wiki-nav h3 { margin: 0 0 var(--space-2); font-size: var(--text-2); }
.wiki-nav ul { list-style: none; margin: 0; padding: 0; }
.wiki-nav li { margin: var(--space-1) 0; }
@media (max-width: 48rem) {
  .wiki-layout { grid-template-columns: 1fr; }
}

.error-page { text-align: center; padding: var(--space-5) 0; }
.error-page h1 { font-size: var(--text-6); margin: 0 0 var(--space-2); }
.error-page p { color: var(--color-fg-muted); }

/* Pull requests + merge box (E8-7) */
.state-badge {
  display: inline-block; font-size: var(--text-1); font-weight: var(--weight-semibold);
  padding: 2px 8px; border-radius: 999px; text-transform: lowercase;
  background: var(--color-neutral-subtle); color: var(--color-fg-muted);
}
.state-badge.state-draft { background: var(--color-fg-muted); color: var(--color-bg); }
.state-badge.state-merged { background: var(--color-emphasis); color: var(--color-on-emphasis); }
.notice-banner {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-fg-muted);
  border-radius: var(--radius-1);
  background: var(--color-bg-subtle);
}
.merge-box {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
}
.merge-box.merge-ready { border-left: 4px solid var(--color-success); }
.merge-box.merge-blocked { border-left: 4px solid var(--color-danger); }
.merge-box.merge-merged { border-left: 4px solid var(--color-emphasis); }
.merge-headline { font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
.merge-line { margin: var(--space-1) 0; color: var(--color-fg-muted); }
.blocker-list li { color: var(--color-danger); }
.conflict-list li, .checks-list li, .review-roll li { color: var(--color-fg-muted); }
.check-passing { color: var(--color-success); }
.check-failing { color: var(--color-danger); }
.merge-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); }
.merge-form input[name="subject"] { flex: 1 1 16rem; min-width: 0; }
.automerge-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }
.review-thread {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  padding: var(--space-2) var(--space-3);
}
.review-thread.resolved, .review-thread.outdated { opacity: 0.75; }
.thread-anchor { color: var(--color-fg-muted); margin-bottom: var(--space-2); }
.thread-flag {
  font-size: var(--text-1);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0 var(--space-2);
  margin-left: var(--space-1);
}
.suggestion-block { border: 1px solid var(--color-border); border-radius: var(--radius-1); margin-top: var(--space-2); }
.suggestion-label { margin: 0; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border); color: var(--color-fg-muted); font-size: var(--text-2); }
.suggestion-block pre { margin: 0; padding: var(--space-2); }

/* CI job log viewer (4.7, E9-11): a scrolling terminal-style pane with
 * the eight ANSI base colors mapped to accessible tokens. */
.job-log {
  max-height: 32rem;
  overflow: auto;
  background: var(--color-log-bg);
  color: var(--color-log-fg);
  padding: var(--space-3);
  border-radius: var(--radius-1);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: var(--leading-code);
}
forge-joblog { display: block; }
forge-joblog[data-state="retrying"] { outline: 1px solid var(--color-attention); }
.ansi-black { color: var(--color-ansi-black); }
.ansi-red { color: var(--color-ansi-red); }
.ansi-green { color: var(--color-ansi-green); }
.ansi-yellow { color: var(--color-ansi-yellow); }
.ansi-blue { color: var(--color-ansi-blue); }
.ansi-magenta { color: var(--color-ansi-magenta); }
.ansi-cyan { color: var(--color-ansi-cyan); }
.ansi-white { color: var(--color-ansi-white); }

/* Notification inbox + nav badge (3.3, E10-3). */
.nav-bell { text-decoration: none; position: relative; margin-right: var(--space-2); }
.notify-badge { display: none; }
.notify-badge.has-unread {
  display: inline-block;
  background: var(--color-danger-subtle);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: 999px;
  font-size: var(--text-1);
  line-height: 1;
  padding: 2px 5px;
  vertical-align: top;
  margin-left: -0.4em;
}
.notify-count { color: var(--color-fg-muted); font-size: var(--text-2); font-weight: var(--weight-normal); }
.notify-list { list-style: none; margin: 0; padding: 0; }
.notify-item {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.notify-item.unread { font-weight: var(--weight-semibold); }
.notify-item.unread .notify-meta { font-weight: var(--weight-normal); }
.notify-type { color: var(--color-fg-muted); font-size: var(--text-1); min-width: 4.5em; }
.notify-link { flex: 1; min-width: 0; }
.notify-meta { color: var(--color-fg-muted); font-size: var(--text-2); white-space: nowrap; }
.notify-actions { display: flex; gap: var(--space-1); }
.notify-empty { color: var(--color-fg-muted); }

/* Instance admin (8.2, E12-1/3). */
.admin-meta { color: var(--color-fg-muted); }
.admin-table { border-collapse: collapse; width: 100%; margin: var(--space-2) 0 var(--space-4); }
.admin-table th, .admin-table td {
  text-align: left;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-2);
}
.admin-table th { color: var(--color-fg-muted); font-weight: var(--weight-semibold); }
.admin-warn td { color: var(--color-danger); }
.admin-empty { color: var(--color-fg-muted); }
.admin-filter { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; flex-wrap: wrap; }
.admin-filter label { color: var(--color-fg-muted); font-size: var(--text-2); }
.admin-reqid { font-family: var(--font-mono); font-size: var(--text-1); }

/* CI pipeline pages (4.7, E9 web). */
.pipeline-table { border-collapse: collapse; width: 100%; margin: var(--space-3) 0; }
.pipeline-table th, .pipeline-table td {
  text-align: left;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-2);
}
.pipeline-table th { color: var(--color-fg-muted); font-weight: var(--weight-semibold); }
.ci-ref, .ci-sha, .ci-needs { font-family: var(--font-mono); font-size: var(--text-2); }
.ci-when { color: var(--color-fg-muted); white-space: nowrap; }
.ci-meta { color: var(--color-fg-muted); }
.ci-reason { color: var(--color-fg-muted); }
.ci-trust {
  display: inline-block; font-size: var(--text-1); padding: 1px 6px; border-radius: 999px;
  background: var(--color-warning-subtle); color: var(--color-warning);
}
.ci-state {
  display: inline-block; font-size: var(--text-1); font-weight: var(--weight-semibold);
  padding: 2px 8px; border-radius: 999px; text-transform: lowercase;
  background: var(--color-neutral-subtle); color: var(--color-fg-muted);
}
.ci-success { background: var(--color-success-subtle); color: var(--color-success); }
.ci-failed  { background: var(--color-danger-subtle); color: var(--color-danger); }
.ci-running, .ci-pending { background: var(--color-warning-subtle); color: var(--color-warning); }
.ci-queued  { background: var(--color-accent-subtle); color: var(--color-link); }
.ci-canceled, .ci-superseded, .ci-skipped, .ci-lost { background: var(--color-neutral-subtle); color: var(--color-neutral); }
.ci-awaiting_approval { background: var(--color-attention-subtle); color: var(--color-attention); }
.ci-approval .approve-button {
  background: var(--color-emphasis); color: var(--color-on-emphasis);
  border: 0; border-radius: var(--radius-1);
  padding: var(--space-1) var(--space-3); cursor: pointer;
}
.back-link { margin-bottom: var(--space-2); }
.back-link a { color: var(--color-fg-muted); text-decoration: none; }

/* Pipeline DAG (viewer island + editor preview). Node fills mirror the
 * .ci-state badge palette; "preview" is the editor's neutral state. */
.list-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.dag-scroll { overflow-x: auto; margin: var(--space-3) 0; }
.dag-edge { fill: none; stroke: var(--color-border); stroke-width: 1.5; }
.dag-node rect { fill: var(--color-neutral-subtle); stroke: var(--color-border); }
.dag-node .dag-label { fill: var(--color-fg); font-size: var(--text-2); font-family: var(--font-mono); }
.dag-node .dag-legs { fill: var(--color-fg-muted); font-size: var(--text-1); }
.dag-node.ci-success rect { fill: var(--color-success-subtle); stroke: var(--color-success); }
.dag-node.ci-failed rect { fill: var(--color-danger-subtle); stroke: var(--color-danger); }
.dag-node.ci-running rect, .dag-node.ci-pending rect { fill: var(--color-warning-subtle); stroke: var(--color-warning); }
.dag-node.ci-queued rect { fill: var(--color-accent-subtle); stroke: var(--color-link); }
.dag-node.ci-awaiting_approval rect { fill: var(--color-attention-subtle); stroke: var(--color-attention); }
a.dag-node:hover rect { stroke: var(--color-fg); }

/* Workflow editor (gutter + diagnostics + preview). */
.wf-editor-grid { display: grid; grid-template-columns: auto 1fr; border: 1px solid var(--color-border); border-radius: var(--radius-1); overflow: hidden; }
.wf-gutter {
  font-family: var(--font-mono); font-size: var(--text-2); line-height: 1.4;
  color: var(--color-fg-muted); background: var(--color-bg-subtle);
  text-align: right; padding: var(--space-2) var(--space-1); overflow: hidden;
  user-select: none; max-height: 60vh;
}
.wf-editor-grid .workflow-source { border: 0; border-radius: 0; margin: 0; }
/* Outranks the `.issue-form textarea { font: inherit }` reset — the
 * gutter's numbers only line up if both sides share these metrics. */
.workflow-editor-form textarea.workflow-source {
  font-family: var(--font-mono); font-size: var(--text-2); line-height: 1.4;
  width: 100%; max-height: 60vh; padding: var(--space-2); tab-size: 2;
  background: var(--color-bg); color: var(--color-fg);
}
.wf-diagnostics { margin: var(--space-2) 0; }
.wf-diag { margin: 2px 0; font-family: var(--font-mono); font-size: var(--text-2); }
[data-diagnostics] .wf-diag[data-line] { cursor: pointer; }
.wf-error { color: var(--color-danger); }
.wf-warning { color: var(--color-warning); }
.wf-ok { color: var(--color-success); }
.wf-preview-stale { opacity: 0.5; }

/* Admin management pages (8.2, E12 web). */
.form-notice { color: var(--color-fg-muted); background: var(--color-neutral-subtle); padding: var(--space-2); border-radius: var(--radius-1); }
.admin-invite { margin: var(--space-3) 0; }
.admin-invite summary { cursor: pointer; color: var(--color-link); }
.admin-invite-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }
.admin-check { display: inline-flex; gap: 4px; align-items: center; }
.invite-link { word-break: break-all; }
.user-state { display: inline-block; font-size: var(--text-1); padding: 2px 8px; border-radius: 999px; background: var(--color-neutral-subtle); color: var(--color-fg-muted); }
.user-active { background: var(--color-success-subtle); color: var(--color-success); }
.user-suspended { background: var(--color-danger-subtle); color: var(--color-danger); }
.user-pending_verification { background: var(--color-warning-subtle); color: var(--color-warning); }
.admin-flag-doc { color: var(--color-fg-muted); }
.flag-value { display: inline-block; font-size: var(--text-1); font-weight: var(--weight-semibold); padding: 2px 8px; border-radius: 999px; }
.flag-on { background: var(--color-success-subtle); color: var(--color-success); }
.flag-off { background: var(--color-neutral-subtle); color: var(--color-neutral); }
.flag-actions form { display: inline-flex; gap: 4px; }

/* Repository settings (2.4/5.4 web, E6-8). */
.settings-section {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-1);
}
.settings-section h2 { margin-top: 0; font-size: var(--text-4); }
.settings-form { display: flex; flex-direction: column; gap: var(--space-2); }
.settings-form label { font-weight: var(--weight-semibold); }
.settings-form label.admin-check { font-weight: var(--weight-normal); }
.settings-form input, .settings-form textarea, .settings-form select {
  font: inherit;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
}
.settings-form fieldset {
  display: flex; flex-direction: column; gap: var(--space-1);
  border: 1px solid var(--color-border); border-radius: var(--radius-1);
  padding: var(--space-2) var(--space-3);
}
.settings-form legend { font-weight: var(--weight-semibold); padding: 0 var(--space-1); }

/* Settings hub: a list of sections, each a bold link over a muted hint. */
.settings-hub { list-style: none; padding: 0; margin: var(--space-3) 0 0; border: 1px solid var(--color-border); border-radius: var(--radius-1); }
.settings-hub li { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 2px; }
.settings-hub li:first-child { border-top: 0; }
.settings-hub li a { font-weight: var(--weight-semibold); text-decoration: none; }
.settings-hub li a:hover { text-decoration: underline; }
.settings-hub li span { color: var(--color-fg-muted); font-size: var(--text-2); }

/* PAT scope picker: one label per family with its select pushed right. */
.admin-form .scope-row { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-normal); }
.admin-form .scope-row select { margin-left: auto; }
.settings-form button[type="submit"] {
  align-self: flex-start;
  font: inherit; font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-3);
  color: var(--color-on-emphasis);
  background: var(--color-emphasis);
  border: none; border-radius: var(--radius-1);
  cursor: pointer;
}
.danger-zone { border-color: var(--color-danger); }
.danger-zone h2 { color: var(--color-danger); }
.danger-zone form { margin: var(--space-3) 0; }
.danger-zone button[type="submit"] { background: var(--color-danger); color: var(--color-bg); }
.hook-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.inline-form { display: inline; }
.inline-form button {
  font: inherit; font-size: var(--text-2);
  padding: 2px var(--space-2);
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  cursor: pointer;
}
.state-badge.org-owner { background: var(--color-accent-subtle); color: var(--color-link); }
.state-badge.hook-disabled { background: var(--color-danger-subtle); color: var(--color-danger); }
.state-badge.delivery-success { background: var(--color-success-subtle); color: var(--color-success); }
.state-badge.delivery-failed { background: var(--color-danger-subtle); color: var(--color-danger); }
.state-badge.delivery-pending { background: var(--color-warning-subtle); color: var(--color-warning); }

/* Repository AI agents (ADR-021, 8.2). */
.settings-form .form-help { margin: calc(-1 * var(--space-1)) 0 var(--space-1); }
.agent-actions { white-space: nowrap; }
.agent-actions .inline-form + .inline-form { margin-left: var(--space-1); }
.settings-form textarea.agent-template { font-family: var(--font-mono); font-size: var(--text-2); }
.settings-form input.agent-number { max-width: 8rem; }
.agent-run {
  margin: var(--space-2) 0;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-1);
}
.agent-run summary {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.agent-run[open] summary { border-bottom: 1px solid var(--color-border-muted); }
.agent-run-subject { color: var(--color-fg-muted); }
.agent-run-meta { margin-left: auto; color: var(--color-fg-muted); font-size: var(--text-2); }
.agent-run .form-error, .agent-run .markdown-body { margin: var(--space-2) var(--space-3); }
.state-badge.run-succeeded { background: var(--color-success-subtle); color: var(--color-success); }
.state-badge.run-failed { background: var(--color-danger-subtle); color: var(--color-danger); }
.state-badge.run-pending { background: var(--color-warning-subtle); color: var(--color-warning); }

/* Command palette + shortcut overlay (E14-4, 8.1). */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.palette-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: var(--overlay);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.palette-dialog {
  width: min(38rem, 92vw);
  max-height: 70vh; overflow-y: auto;
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  padding: var(--space-3);
  box-shadow: var(--shadow-2);
}
.palette-dialog input {
  width: 100%; font: inherit;
  padding: var(--space-2);
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
}
.palette-dialog ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.palette-dialog li {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-1);
  cursor: pointer;
}
.palette-dialog li:hover { background: var(--color-bg-subtle); }
.palette-dialog li.palette-active { background: var(--color-emphasis); color: var(--color-on-emphasis); }
.palette-dialog h2 { margin-top: 0; font-size: var(--text-4); }
.palette-help { border-collapse: collapse; }
.palette-help td { padding: var(--space-1) var(--space-3) var(--space-1) 0; }
.palette-help kbd {
  font-family: var(--font-mono); font-size: var(--text-2);
  padding: 1px 6px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
}

/* Onboarding checklists (E14-7, 8.1). */
.checklist {
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-1);
  background: var(--color-bg-subtle);
}
.checklist h2 { margin: 0 0 var(--space-2); font-size: var(--text-4); }
.checklist ul { list-style: none; margin: 0; padding: 0; }
.checklist li { margin: var(--space-1) 0; }
.checklist .check-done { color: var(--color-fg-muted); }
.checklist .check-done span { color: var(--color-success); }
.checklist .check-pending span { color: var(--color-fg-muted); }

/* Project boards (3.2). Columns scroll horizontally as a set; cards are
   the drag unit (the island toggles .board-card-dragging). */
.project-list { list-style: none; margin: var(--space-3) 0; padding: 0; }
.project-row { display: flex; gap: var(--space-2); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.project-row small { color: var(--color-fg-muted); }
.project-closed-badge { font-size: var(--text-1); color: var(--color-fg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-1); padding: 1px 6px; vertical-align: middle; }
.project-desc { color: var(--color-fg-muted); }
.project-new-form, .project-add-form, .project-autoadd-form, .project-field-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; }
.board-lane-title { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-4); margin: var(--space-4) 0 var(--space-1); }
.project-title { font-weight: var(--weight-semibold); color: var(--color-fg); }
.project-title:hover { color: var(--color-link); }
.project-open .project-state { color: var(--color-success); }
.project-closed .project-state { color: var(--color-fg-muted); }
.form-or { color: var(--color-fg-muted); }
.project-board { display: flex; gap: var(--space-3); align-items: flex-start; overflow-x: auto; margin: var(--space-3) 0; padding-bottom: var(--space-2); }
.board-column { flex: 0 0 260px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-1); padding: var(--space-2); }
.board-column-title { font-size: var(--text-3); margin: 0 0 var(--space-2); display: flex; gap: var(--space-1); align-items: baseline; }
.board-count { color: var(--color-fg-muted); font-weight: var(--weight-normal); }
.board-wip { color: var(--color-fg-muted); }
.board-wip-over { color: var(--color-attention); font-weight: var(--weight-bold); }
.board-wip-banner { margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-2); background: var(--color-warning-subtle); border: 1px solid var(--color-warning); border-radius: var(--radius-1); font-size: var(--text-2); color: var(--color-warning); }
.board-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--color-fg-muted); }
.board-dot-green { background: var(--color-success); }
.board-dot-yellow { background: var(--color-warning); }
.board-dot-red { background: var(--color-danger); }
.board-dot-orange { background: var(--color-attention); }
.board-dot-blue { background: var(--color-dot-blue); }
.board-dot-purple { background: var(--color-dot-purple); }
.board-cards { list-style: none; margin: 0; padding: 0; min-height: var(--space-4); }
.board-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-1); padding: var(--space-2); margin: 0 0 var(--space-2); }
.board-card[draggable="true"] { cursor: grab; }
.board-card-dragging { opacity: 0.5; }
.board-card-title { display: block; font-weight: var(--weight-semibold); }
.board-card-meta { display: block; color: var(--color-fg-muted); }
.board-card-restricted { opacity: 0.7; font-style: italic; }
.board-move-form { margin-top: var(--space-1); display: flex; gap: var(--space-1); }
.iteration-list { list-style: none; margin: var(--space-2) 0; padding: 0; }
.iteration-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; padding: var(--space-1) 0; }
.iteration-row small { color: var(--color-fg-muted); }
.iteration-closed a { color: var(--color-fg-muted); }
.iteration-close-form { display: flex; gap: var(--space-1); }
.project-settings, .project-iterations { margin-top: var(--space-4); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.project-automation-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-2) 0; }
.project-state-form { margin-top: var(--space-2); }

/* Packages tab (4.6). */
.package-list { list-style: none; margin: var(--space-3) 0; padding: 0; }
.package-row { display: flex; gap: var(--space-2); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.package-row small, .package-meta { color: var(--color-fg-muted); }
.package-format { font-size: var(--text-1); color: var(--color-fg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-1); padding: 1px 6px; vertical-align: middle; }
.package-pull { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-1); padding: var(--space-2); overflow-x: auto; }
.package-versions { list-style: none; margin: var(--space-3) 0; padding: 0; }
.package-version { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.package-version-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.package-version-head small { color: var(--color-fg-muted); }
.package-files { list-style: none; margin: var(--space-1) 0 0; padding: 0 0 0 var(--space-3); }
.package-files small { color: var(--color-fg-muted); }
.package-settings { margin-top: var(--space-4); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }

/* Deploy tokens (1.3, 4.6). */
.deploy-token-new { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-warning); border-radius: var(--radius-1); background: var(--color-warning-subtle); color: var(--color-warning); }
.deploy-token-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; }
.deploy-token-expired td { color: var(--color-fg-muted); }
.package-retention-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-2) 0; }

/* ------------------------------------------------------------------ */
/* Shared components: the classes every page family composes from.    */
/* ------------------------------------------------------------------ */

.tagline { color: var(--color-fg-muted); font-size: var(--text-3); margin-top: 0; }

/* Empty/teach states — one look everywhere: centered inside a dashed
 * hairline, optional violet icon coin, one obvious next action. */
.empty-note, .empty-state, .home-empty, .repo-empty {
  text-align: center;
  padding: var(--space-5) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-2);
  color: var(--color-fg-muted);
}
.empty-icon {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: 999px;
  background: var(--color-accent-subtle);
  color: var(--color-emphasis);
}
.empty-icon .icon { width: 1.5em; height: 1.5em; }
/* Command snippets inside centered empty states read left-aligned. */
.repo-empty-cmds { text-align: left; display: inline-block; margin: var(--space-2) auto 0; }

/* MFA grace-period banner (base layout). */
.banner-warn {
  padding: var(--space-2) var(--space-3);
  background: var(--color-warning-subtle);
  color: var(--color-warning);
  border-bottom: 1px solid var(--color-warning);
  font-size: var(--text-2);
}
.banner-warn a { color: inherit; font-weight: var(--weight-semibold); text-decoration: underline; }

/* Buttons: primary (emphasis), quiet (bordered), danger. Bare submit
 * buttons inside the common form families pick these up by scope so
 * templates stay classless. */
.button,
.comment-form button, .issue-form button,
.auth-form button[type="submit"] {
  display: inline-block;
  font: inherit; font-weight: var(--weight-semibold); font-size: var(--text-2);
  padding: var(--space-1) var(--space-3);
  color: var(--color-on-emphasis);
  background: var(--color-emphasis);
  border: 1px solid transparent; border-radius: var(--radius-1);
  cursor: pointer;
  text-decoration: none;
}
.button, .comment-form button, .issue-form button,
.auth-form button[type="submit"], .new-issue, .theme-toggle {
  transition: box-shadow var(--dur-1) var(--ease-1), background var(--dur-1) var(--ease-1);
}
.button:hover, .comment-form button:hover, .issue-form button:hover,
.new-issue:hover { text-decoration: none; box-shadow: var(--shadow-1); filter: brightness(1.08); }
.issue-filter-form button, .search-form button, .save-filter-form button,
.board-group-form button, .prefs-form button, .inline-form button, button.danger {
  font: inherit; font-size: var(--text-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-subtle);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  cursor: pointer;
}
.issue-filter-form button:hover, .search-form button:hover,
.save-filter-form button:hover, .inline-form button:hover { background: var(--color-bg); }
button.danger { color: var(--color-danger); border-color: var(--color-danger); background: transparent; }

/* Underline tab rows — ONE system for every tab-shaped nav: repo
 * sections, search types, pull states, issue open/closed, notification
 * views, settings sub-nav, the admin directory. Same container line,
 * same emphasis underline on the current tab. */
.repo-tabs, .tab-nav, .state-tabs, .issue-tabs,
.notify-tabs, .settings-nav, .admin-nav {
  display: flex; flex-wrap: nowrap; gap: var(--space-1);
  align-items: center;
  margin: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  /* Chrome never scrolls the page: at narrow widths the tab row itself
   * scrolls, edge-to-edge, no wrap. */
  overflow-x: auto;
  scrollbar-width: none;
}
.repo-tabs a, .tab-nav a, .state-tabs a, .issue-tabs a,
.notify-tabs a, .settings-nav a, .admin-nav a {
  position: relative;
  padding: var(--space-1) var(--space-2);
  padding-bottom: calc(var(--space-1) + 2px);
  color: var(--color-fg);
  white-space: nowrap;
  border-radius: var(--radius-1) var(--radius-1) 0 0;
  transition: background var(--dur-1) var(--ease-1);
}
.repo-tabs a:hover, .tab-nav a:hover, .state-tabs a:hover, .issue-tabs a:hover,
.notify-tabs a:hover, .settings-nav a:hover, .admin-nav a:hover {
  text-decoration: none; background: var(--color-accent-subtle);
}
.repo-tabs a[aria-current="page"], .tab-nav a[aria-current="page"],
.state-tabs a.active, .issue-tabs a[aria-current="page"],
.notify-tabs a[aria-current="page"], .settings-nav a[aria-current="page"] {
  font-weight: var(--weight-semibold);
}
/* Signature: the active tab carries a short violet "notch" — a rounded
 * pill underline inset from the tab edges, overlapping the container
 * hairline. One rule, every tab-shaped nav in the product. */
.repo-tabs a[aria-current="page"]::after, .tab-nav a[aria-current="page"]::after,
.state-tabs a.active::after, .issue-tabs a[aria-current="page"]::after,
.notify-tabs a[aria-current="page"]::after, .settings-nav a[aria-current="page"]::after,
.admin-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--space-2); right: var(--space-2); bottom: -1px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--color-emphasis);
}

/* ------------------------------------------------------------------ */
/* Issue & PR tracker (3.2/3.1 web).                                  */
/* ------------------------------------------------------------------ */

.new-issue {
  display: inline-block;
  font-weight: var(--weight-semibold); font-size: var(--text-2);
  padding: var(--space-1) var(--space-3);
  color: var(--color-on-emphasis);
  background: var(--color-emphasis);
  border-radius: var(--radius-1);
}
/* .new-issue hover handled with the primary button family. */

.issue-filter-form { display: flex; gap: var(--space-2); margin: var(--space-3) 0; }
.issue-filter-form input[type="search"] {
  flex: 1;
  font: inherit;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-subtle);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
}
.save-filter-form {
  display: flex; gap: var(--space-2); align-items: center;
  margin: var(--space-2) 0; font-size: var(--text-2); color: var(--color-fg-muted);
}
.save-filter-form input {
  font: inherit; font-size: var(--text-2);
  padding: 2px var(--space-2);
  background: var(--color-bg); color: var(--color-fg);
  border: 1px solid var(--color-border); border-radius: var(--radius-1);
}
.saved-filters {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-2) 0; padding: 0; font-size: var(--text-2);
}
.saved-filters li {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border); border-radius: 999px;
}
.saved-filters .inline-form button { border: 0; background: none; padding: 0 2px; color: var(--color-fg-muted); }
.saved-filters .inline-form button:hover { color: var(--color-danger); }

.issue-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-1); }
.issue-row {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
}
.issue-row:first-child { border-top: 0; }
.issue-row:hover { background: var(--color-bg-subtle); }
.issue-state { line-height: var(--leading-normal); }
.issue-open .issue-state { color: var(--color-success); }
.issue-closed .issue-state { color: var(--color-emphasis); }
.issue-merged .issue-state { color: var(--color-emphasis); }
.issue-main { flex: 1; min-width: 0; }
.issue-title { font-weight: var(--weight-semibold); color: var(--color-fg); }
.issue-title:hover { color: var(--color-link); }
.issue-main small { color: var(--color-fg-muted); }
.issue-comments { color: var(--color-fg-muted); font-size: var(--text-2); white-space: nowrap; }

.label-chip {
  display: inline-block;
  font-size: var(--text-1); font-weight: var(--weight-semibold);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-subtle);
  color: var(--color-fg-muted);
}

/* Explore visibility filter chips: a row of label-chips, the active one
 * inverted so the current filter reads at a glance. */
.explore-filters { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0 var(--space-3); }
.explore-filters .label-chip { text-decoration: none; }
.explore-filters .label-chip.active {
  background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg);
}

/* Detail pages. */
.issue-header { font-size: var(--text-5); font-weight: var(--weight-normal); margin-bottom: var(--space-1); overflow-wrap: anywhere; }
.issue-number { color: var(--color-fg-muted); font-weight: var(--weight-normal); }
.issue-status { margin-top: 0; color: var(--color-fg-muted); }
.issue-meta { color: var(--color-fg-muted); font-size: var(--text-2); }

.comment-card {
  margin: var(--space-3) 0;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-1);
}
.comment-card > header {
  display: flex; gap: var(--space-2); align-items: baseline;
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-1) var(--radius-1) 0 0;
  font-size: var(--text-2);
}
.comment-card > header time, .comment-card > header small { color: var(--color-fg-muted); }
.comment-card .markdown-body { padding: var(--space-3); }
.comment-card .markdown-body > :first-child { margin-top: 0; }
.comment-card .markdown-body > :last-child { margin-bottom: 0; }
.comment-card .reactions { padding: 0 var(--space-3) var(--space-2); margin: 0; }

.timeline-event {
  margin: var(--space-2) 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border);
  color: var(--color-fg-muted);
  font-size: var(--text-2);
}
.timeline-event time { font-size: 0.85em; }

.reactions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.reaction {
  display: inline-block;
  font-size: var(--text-1);
  padding: 1px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-subtle);
}
.reaction.mine { border-color: var(--color-emphasis); }

.comment-form { margin-top: var(--space-4); }
.comment-form textarea, .issue-form textarea {
  display: block; width: 100%;
  font: inherit;
  padding: var(--space-2);
  background: var(--color-bg); color: var(--color-fg);
  border: 1px solid var(--color-border); border-radius: var(--radius-1);
  margin-bottom: var(--space-2);
  resize: vertical;
}
.issue-form input[type="text"], .issue-form input:not([type]) {
  font: inherit;
  width: 100%; max-width: 40rem;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg); color: var(--color-fg);
  border: 1px solid var(--color-border); border-radius: var(--radius-1);
}
.issue-form label { font-weight: var(--weight-semibold); }

.template-chooser { list-style: none; margin: var(--space-3) 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-1); }
.template-chooser li { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border); }
.template-chooser li:first-child { border-top: 0; }
.template-chooser li:hover { background: var(--color-bg-subtle); }
.template-chooser small { color: var(--color-fg-muted); }

/* Rendered markdown (comments + readme share the look). */
.markdown-body pre, .readme pre {
  background: var(--color-bg-subtle);
}
.markdown-body blockquote, .readme blockquote {
  margin: var(--space-2) 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-border);
  color: var(--color-fg-muted);
}
/* User-authored tables can be arbitrarily wide: keep them shrink-wrapped
 * in their own scroll container at every viewport width. */
.markdown-body table, .readme table { display: block; overflow-x: auto; border-collapse: collapse; }
.markdown-body th, .markdown-body td, .readme th, .readme td {
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-2);
}

/* ------------------------------------------------------------------ */
/* Search results (5.3 web).                                          */
/* ------------------------------------------------------------------ */

.search-form { display: flex; gap: var(--space-2); margin: var(--space-3) 0; }
.search-form input[type="search"] {
  flex: 1;
  font: inherit;
  padding: var(--space-2);
  background: var(--color-bg-subtle); color: var(--color-fg);
  border: 1px solid var(--color-border); border-radius: var(--radius-1);
}
.search-results { list-style: none; margin: var(--space-3) 0; padding: 0; }
.search-hit {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-1);
  margin-bottom: var(--space-2);
}
.hit-type {
  display: inline-block;
  font-size: var(--text-1); font-weight: var(--weight-semibold);
  padding: 0 var(--space-2); margin-right: var(--space-1);
  border-radius: 999px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.hit-context { color: var(--color-fg-muted); font-size: var(--text-2); margin-left: var(--space-1); }
.hit-snippet {
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  font-size: var(--text-1);
  max-height: 8rem; overflow: hidden;
}

/* Code-hit match fragments (P1-6): line-numbered rows, match marked. */
.search-facets { margin: var(--space-2) 0 0; font-size: var(--text-2); color: var(--color-fg-muted); }
.hit-fragments .frag-row { margin: var(--space-1) 0 0; max-height: none; overflow-x: auto; }
.frag-line {
  display: inline-block;
  min-width: 2.5em; margin-right: var(--space-2);
  text-align: right;
  color: var(--color-fg-muted);
}
.hit-fragments mark { background: var(--color-attention-subtle); color: inherit; border-radius: 2px; }
.frag-more { margin: var(--space-1) 0 0; font-size: var(--text-1); color: var(--color-fg-muted); }

/* ------------------------------------------------------------------ */
/* Auth extras: SSO buttons, TOTP enrollment, recovery codes.         */
/* ------------------------------------------------------------------ */

.sso-providers { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.sso-button {
  display: block; text-align: center;
  font-weight: var(--weight-semibold);
  padding: var(--space-2);
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
}
.sso-button:hover { background: var(--color-bg-subtle); text-decoration: none; }
.auth-form label { display: block; margin-top: var(--space-3); font-weight: var(--weight-semibold); }
.auth-form input[type="text"], .auth-form input:not([type]) {
  font: inherit;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg); color: var(--color-fg);
  border: 1px solid var(--color-border); border-radius: var(--radius-1);
}
.auth-form button[type="submit"] { margin-top: var(--space-2); }
.totp-url { display: block; word-break: break-all; padding: var(--space-2); background: var(--color-bg-subtle); border-radius: var(--radius-1); }
.recovery-codes {
  list-style: none; margin: var(--space-2) 0; padding: var(--space-3);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-1);
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-border); border-radius: var(--radius-1);
}
.wan-codes { margin: var(--space-3) 0; }

/* ------------------------------------------------------------------ */
/* Projects roadmap (3.2 v1.x).                                       */
/* ------------------------------------------------------------------ */

.roadmap-scroll { overflow-x: auto; margin: var(--space-3) 0; }
.roadmap-table { border-collapse: collapse; min-width: 100%; }
.roadmap-table th, .roadmap-table td {
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}
.roadmap-table thead th { background: var(--color-bg-subtle); color: var(--color-fg-muted); font-weight: var(--weight-semibold); }
.roadmap-item-col { text-align: left; min-width: 14rem; white-space: normal; }
.roadmap-cell { min-width: 4.5rem; }
.roadmap-cell.roadmap-on { background: var(--color-emphasis); opacity: 0.85; }

/* ------------------------------------------------------------------ */
/* Packages list (4.6 web).                                           */
/* ------------------------------------------------------------------ */

.package-name { font-weight: var(--weight-semibold); }
.package-version-id { color: var(--color-fg-muted); font-family: var(--font-mono); font-size: var(--text-2); }

/* API reference (/-/api). */
.api-group { margin: var(--space-4) 0; }
.api-group h2 { font-size: var(--text-4); }
.api-table { border-collapse: collapse; width: 100%; }
.api-table th, .api-table td {
  text-align: left;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-muted);
  font-size: var(--text-2);
  vertical-align: top;
}
.api-table th { color: var(--color-fg-muted); font-weight: var(--weight-semibold); }
.api-method {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-1);
  font-weight: var(--weight-semibold);
  padding: 0 var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  background: var(--color-bg-subtle);
  min-width: 4.5em;
  text-align: center;
}
.api-method-DELETE { color: var(--color-danger); border-color: var(--color-danger); }
.api-pattern { overflow-wrap: anywhere; }
.api-auth { color: var(--color-fg-muted); white-space: nowrap; }

/* Misc leftovers. */
.admin-help, .form-help { color: var(--color-fg-muted); font-size: var(--text-2); }
.prefs-form { display: flex; flex-direction: column; gap: var(--space-2); max-width: 40rem; }

/* Element-level default for otherwise-unstyled buttons (lowest
 * specificity — any class rule above wins): the quiet bordered look. */
button {
  font: inherit; font-size: var(--text-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-subtle);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  cursor: pointer;
}
button:hover { background: var(--color-bg); }

/* Same idea for text-entry controls: the element-level default keeps
 * bare inputs/selects on brand; any scoped rule (settings-form,
 * auth-card, filter forms) still wins on specificity. */
input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"])),
select, textarea {
  font: inherit; font-size: var(--text-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
}

/* Tracker state chips: open green, closed quiet, merged brand violet. */
.state-badge.state-open { background: var(--color-success-subtle); color: var(--color-success); }
.state-badge.state-closed { background: var(--color-neutral-subtle); color: var(--color-neutral); }

/* Syntax highlighting (2.1, server-side): the lexer's small hl-* class
 * set over the --color-hl-* tokens, which live in tokens.css with the
 * rest of the palette and are contrast-checked there. */
.hl-k { color: var(--color-hl-k); }
.hl-f { color: var(--color-hl-f); }
.hl-s { color: var(--color-hl-s); }
.hl-n { color: var(--color-hl-n); }
.hl-c { color: var(--color-hl-c); font-style: italic; }
.hl-a { color: var(--color-hl-a); }
.hl-o { color: var(--color-hl-o); }
.hl-ins { color: var(--color-hl-ins); }
.hl-del { color: var(--color-hl-del); }

/* ------------------------------------------------------------------ */
/* Diff view (2.1 web): SSR unified rows; the diff-view island builds
 * the split layout from the same rows.                               */
/* ------------------------------------------------------------------ */

/* The heading on the commit detail page; the commits-list table reuses
 * the class name for its subject cell, which stays at body size. */
h2.commit-subject { font-size: var(--text-4); margin-bottom: var(--space-1); }
.commit-subject { overflow-wrap: anywhere; }
td.commit-subject { width: 100%; font-weight: var(--weight-semibold); }
.commit-meta { color: var(--color-fg-muted); margin-top: 0; }
.commit-body { font-size: var(--text-2); }

.diff-summary {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-1);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  font-size: var(--text-2);
}
.diff-summary ul { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto; }
.diff-summary li { display: flex; align-items: baseline; gap: var(--space-2); padding: 1px 0; }
.diff-summary li small { color: var(--color-fg-muted); white-space: nowrap; }
.diff-totals { margin: 0 0 var(--space-1); }
.diff-adds { color: var(--color-success); }
.diff-dels { color: var(--color-danger); }
.diff-stat {
  display: inline-block; height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--color-success) 50%, var(--color-danger) 50%);
  opacity: 0.7;
}
.diff-stat-1 { width: 8px; } .diff-stat-2 { width: 16px; } .diff-stat-3 { width: 28px; }
.diff-stat-4 { width: 44px; } .diff-stat-5 { width: 64px; }

.diff-file {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  margin: var(--space-3) 0;
  overflow: hidden;
}
.diff-file > summary {
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  cursor: pointer;
  font-size: var(--text-2);
}
.diff-file[open] > summary { border-bottom: 1px solid var(--color-border); }
.diff-path { overflow-wrap: anywhere; }
.diff-file-status {
  font-size: var(--text-1); text-transform: lowercase;
  padding: 0 var(--space-2); border-radius: 999px;
  background: var(--color-neutral-subtle); color: var(--color-neutral);
}
.diff-status-added { background: var(--color-success-subtle); color: var(--color-success); }
.diff-status-deleted { background: var(--color-danger-subtle); color: var(--color-danger); }
.diff-file-stat { margin-left: auto; white-space: nowrap; }
.diff-note { padding: var(--space-2) var(--space-3); margin: 0; color: var(--color-fg-muted); }

.diff-body {
  font-family: var(--font-mono);
  font-size: var(--text-1);
  line-height: var(--leading-code);
  overflow-x: auto;
}
.dl { display: flex; white-space: pre; }
.dl-no {
  flex: 0 0 3.5ch;
  padding: 0 var(--space-1);
  text-align: right;
  color: var(--color-fg-muted);
  user-select: none;
}
.dl-txt { padding: 0 var(--space-2); flex: 1; min-width: 0; }
.dl-hunk, .dl-meta { background: var(--color-accent-subtle); color: var(--color-fg-muted); padding: 0 var(--space-2); }
.dl-add { background: var(--color-success-subtle); }
.dl-del { background: var(--color-danger-subtle); }
.dl-add .dl-em { background: var(--color-success-muted); border-radius: 2px; }
.dl-del .dl-em { background: var(--color-danger-muted); border-radius: 2px; }
.dl-empty { background: var(--color-bg-subtle); }

/* Split mode (island-built): unified body hides, pairs grid in. */
.diff-body-split { display: none; }
.diff-mode-split .diff-body-split { display: block; }
.diff-mode-split .diff-body:not(.diff-body-split) { display: none; }
.dl-pair { display: grid; grid-template-columns: 1fr 1fr; }
.dl-pair > .dl { overflow-x: auto; }
.dl-pair > .dl:first-child { border-right: 1px solid var(--color-border-muted); }
.dl-span { display: flex; }

.diff-toggle {
  display: flex; gap: 0;
  margin: var(--space-2) 0;
  width: fit-content;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  overflow: hidden;
}
.diff-toggle button { border: 0; border-radius: 0; }
.diff-toggle button[aria-pressed="true"] {
  background: var(--color-accent-subtle);
  color: var(--color-link);
  font-weight: var(--weight-semibold);
}

/* Blame view: hunk gutter beside the highlighted source. */
.blame-body { font-size: var(--text-2); }
.blame-hunk {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  border-top: 1px solid var(--color-border-muted);
}
.blame-hunk:first-child { border-top: 0; }
.blame-gutter {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-subtle);
  border-right: 1px solid var(--color-border-muted);
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
  align-content: start; align-items: baseline;
  font-size: var(--text-1);
}
.blame-gutter time, .blame-author { color: var(--color-fg-muted); }
.blame-drill { color: var(--color-fg-muted); }
.blame-drill:hover { color: var(--color-link); }
.blame-code { margin: 0; border: 0; border-radius: 0; background: var(--color-bg); padding: var(--space-1) 0; }
.blame-line::before { content: none; } /* numbers are real spans here */
.blame-no {
  display: inline-block; width: 3ch; margin-right: var(--space-3);
  text-align: right; color: var(--color-fg-muted); user-select: none;
}
@media (max-width: 48rem) {
  .blame-hunk { grid-template-columns: 8rem minmax(0, 1fr); }
}

/* Commit activity heatmap (SSR SVG, violet ramp). */
.heatmap { margin: var(--space-3) 0; }
.heatmap-scroll { overflow-x: auto; }
.heat-0 { fill: var(--color-neutral-subtle); }
.heat-1 { fill: var(--color-heat-1); }
.heat-2 { fill: var(--color-heat-2); }
.heat-3 { fill: var(--color-heat-3); }
.heat-4 { fill: var(--color-heat-4); }

/* Find-in-file overlay (blob pages). */
.find-panel {
  position: fixed;
  top: var(--space-3); right: var(--space-3);
  z-index: 150;
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-1);
}
.find-panel input {
  font: inherit; font-size: var(--text-2);
  padding: 2px var(--space-1);
  background: var(--color-bg); color: var(--color-fg);
  border: 1px solid var(--color-border); border-radius: var(--radius-1);
  width: 14rem;
}
.find-count { color: var(--color-fg-muted); font-size: var(--text-1); min-width: 3.5em; text-align: center; }
.find-nav { border: 0; background: none; padding: 0 var(--space-1); font-size: var(--text-3); line-height: 1; color: var(--color-fg-muted); cursor: pointer; }
.find-nav:hover { color: var(--color-fg); background: none; }
::highlight(find-match) { background: var(--color-warning-subtle); color: var(--color-warning); }

/* Mermaid diagrams render inside a sandboxed iframe; the pre stays as
 * the no-JS fallback until the frame reports in. */
.mermaid-frame {
  display: block;
  width: 100%;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-1);
  background: var(--color-bg);
  margin: var(--space-2) 0;
}

/* Toast queue (toast island): fixed bottom-right, aria-live. */
.toast-region {
  position: fixed;
  right: var(--space-3); bottom: var(--space-3);
  z-index: 200;
  display: flex; flex-direction: column; gap: var(--space-2);
  max-width: min(24rem, calc(100vw - 2 * var(--space-3)));
}
.toast {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-emphasis);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-1);
  font-size: var(--text-2);
}
.toast-error { border-left-color: var(--color-danger); }
.toast-close {
  margin-left: auto;
  border: 0; background: none; padding: 0 var(--space-1);
  color: var(--color-fg-muted); cursor: pointer;
  font-size: var(--text-3); line-height: 1;
}
.toast-close:hover { color: var(--color-fg); background: none; }

/* Loading shimmer for the few genuinely async surfaces (palette file
 * mode, tree sidebar). Reduced motion zeroes the durations, leaving a
 * static placeholder tint. */
.loading-shimmer {
  background: linear-gradient(100deg,
    var(--color-bg-subtle) 40%, var(--color-neutral-subtle) 50%, var(--color-bg-subtle) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.2s var(--ease-1) infinite;
  border-radius: var(--radius-1);
  color: var(--color-fg-muted);
}
@keyframes shimmer {
  from { background-position: 120% 0; }
  to { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-shimmer { animation: none; }
}
.palette-status { color: var(--color-fg-muted); padding: var(--space-1) var(--space-2); }
.palette-dialog li a { color: inherit; display: block; }
.palette-dialog li a:hover { text-decoration: none; }

/* Code layout: single column no-JS; the tree island adds .has-tree once
 * it has content, and the sidebar only occupies space on wide screens. */
.code-layout > forge-tree-nav { display: none; }
@media (min-width: 64rem) {
  .code-layout.has-tree {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }
  .code-layout.has-tree > forge-tree-nav { display: block; }
}
.tree-nav {
  font-size: var(--text-2);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-1);
  padding: var(--space-2);
  max-height: 80vh;
  overflow: auto;
  position: sticky;
  top: var(--space-3);
}
.tree-nav ul { list-style: none; margin: 0; padding: 0 0 0 var(--space-2); }
.tree-nav > nav > ul { padding-left: 0; }
.tree-nav summary {
  cursor: pointer;
  padding: 2px var(--space-1);
  border-radius: var(--radius-1);
  color: var(--color-fg);
}
.tree-nav summary:hover, .tree-nav a:hover { background: var(--color-accent-subtle); text-decoration: none; }
.tree-nav a {
  display: block;
  padding: 2px var(--space-1);
  border-radius: var(--radius-1);
  color: var(--color-fg);
}
.tree-nav a[aria-current="page"] {
  background: var(--color-accent-subtle);
  color: var(--color-link);
  font-weight: var(--weight-semibold);
}

/* ------------------------------------------------------------------ */
/* Narrow screens (down to 360px). Chrome never scrolls the page; the
 * tab rows and code scroll in their own boxes.                       */
/* ------------------------------------------------------------------ */

@media (max-width: 30rem) {
  main { padding: var(--space-2); }
  .site-header > nav { gap: var(--space-2); }
  /* Search collapses to its icon; the label stays for screen readers. */
  .nav-search span {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  .nav-user { display: none; }
  .file-size, .commit-date { display: none; }
  .blob-content { font-size: var(--text-1); }
  .code-line::before { width: 2ch; margin-right: var(--space-2); }
  .code-card-head { flex-wrap: wrap; }
  .board-column { flex-basis: 240px; }
  .palette-backdrop { padding-top: 6vh; }
}