/* duragit web UI (DESIGN.md). Tokens on :root, redefined for dark mode; components use tokens only.
   The token values are packages/shared/design.ts's (unit/design checks this file against it).
   Fonts: Inter and JetBrains Mono, self-hosted under /static/fonts (latin subset, variable weight,
   SIL Open Font License, see the OFL-*.txt files there; CSP font-src 'self'), with the system
   faces as fallback. */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"), url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/static/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations"), url(/static/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --page: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #f5f5f5;
  --fill-subtle: #fafafa;
  --fill-inverse: #151515;
  --on-inverse: #ffffff;
  --content-primary: #151515;
  --content-secondary: #757575;
  --content-muted: #a5a5a5;
  --line: #ededed;
  --accent: #1f78ff;
  --accent-fill: #e5f0ff;
  --ok: #16833a;
  --ok-text: #12702f;
  --warn: #a35a00;
  --bad: #d1322a;
  --sans: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Two radii (DESIGN.md): 12px for surfaces, 8px for controls. The app's content width. */
  --radius: 12px;
  --radius-sm: 8px;
  --page-max: 1120px;
  /* Two elevations (DESIGN.md): resting surfaces sit on the page; floating ones (a product picture,
     the invite form) lift off it. Nothing else casts a shadow. */
  --shadow-rest: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-float: 0 0 0 1px var(--line), 0 12px 32px -12px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.04);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0f0f0f;
    --surface: #171717;
    --surface-subtle: #1f1f1f;
    --fill-subtle: #1a1a1a;
    --fill-inverse: #f5f5f5;
    --on-inverse: #151515;
    --content-primary: #ededed;
    --content-secondary: #a1a1a1;
    --content-muted: #6b6b6b;
    --line: #2a2a2a;
    --accent: #5c9dff;
    --accent-fill: #13243d;
    --ok: #4cb26c;
    --ok-text: #4cb26c;
    --warn: #d99a3d;
    --bad: #f0645c;
    --shadow-rest: 0 0 0 1px var(--line);
    --shadow-float: 0 0 0 1px var(--line), 0 16px 40px -12px rgba(0, 0, 0, 0.7);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--content-primary);
  font: 400 14px/1.5 var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links are neutral (one accent per view, DESIGN.md): the text color with an underline at 40% of it,
   visible on every surface (a --line underline was 1.17:1, so links in README prose and messages
   read as plain text), that darkens on hover. */
a { color: inherit; text-decoration: underline; text-decoration-color: var(--content-muted); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a:focus-visible { border-radius: 4px; }

/* Type scale (DESIGN.md): 12, 13, 14 body, 16 card title, 20 section, 28 app page title, 36 document
   title. Headings 450 with slight negative tracking; nothing else changes letter-spacing. */
h1, h2, h3 { font-weight: 450; text-wrap: balance; margin: 0; }
h1 { font-size: 36px; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 12px; }
h2 { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 12px; }
h3 { font-size: 14px; margin-bottom: 8px; }
/* An identifier inside a heading keeps the heading's face and size (no mono headlines). */
h1 .mono, h2 .mono, h3 .mono { font-family: inherit; font-size: inherit; }
p { margin: 0 0 12px; text-wrap: pretty; max-width: 68ch; }
ul { margin: 0 0 12px; padding-left: 20px; max-width: 68ch; }
li { margin-bottom: 4px; }
small, .small { font-size: 12px; }
strong, b { font-weight: 600; }
.nowrap { white-space: nowrap; }
.muted { color: var(--content-secondary); }
.lede { color: var(--content-secondary); font-size: 15px; }
/* Commands and output exactly as typed: no ligatures (JetBrains Mono would draw -> as an arrow). */
code, pre, kbd, .mono { font-family: var(--mono); font-size: 13px; font-variant-ligatures: none; }
code { background: var(--surface-subtle); border-radius: 4px; padding: 1px 4px; }
pre {
  background: var(--surface-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0 0 12px;
  line-height: 1.55;
}
pre code { background: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* --- the app shell: header, context, account menu, main, footer --- */
.top { border-bottom: 1px solid var(--line); background: var(--page); }
.top-inner, .foot-inner, main {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.top-inner { display: flex; align-items: center; gap: 8px 12px; min-height: 56px; }
.brand-line { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; min-width: 0; }
.brand { display: inline-flex; align-items: center; height: 32px; color: var(--content-primary); font-weight: 600; font-size: 15px; text-decoration: none; }
.beta { font-size: 12px; color: var(--content-secondary); white-space: nowrap; }
.env-badge {
  font-size: 12px;
  color: var(--content-secondary);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 999px;
  padding: 0 8px;
  line-height: 20px;
}
/* Where the page is: the organization and repository, as links, after the brand. */
.ctx { display: flex; align-items: center; min-width: 0; font-size: 14px; }
.ctx-sep { color: var(--content-muted); padding: 0 2px; flex: none; }
.ctx a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--content-primary); text-decoration: none; font-weight: 500; padding: 4px 6px; border-radius: var(--radius-sm); white-space: nowrap; }
.ctx a span { overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.ctx a:hover { background: var(--fill-subtle); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
.nav-link { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--content-secondary); text-decoration: none; font-weight: 500; white-space: nowrap; }
.nav-link:hover { color: var(--content-primary); background: var(--fill-subtle); }
.nav-link[aria-current="page"] { color: var(--content-primary); }
.nav .btn { margin-left: 4px; }

/* Avatars: a person is a circle with initials, an agent a rounded square in the inverse fill, an
   organization a rounded square with its initial. Text, never pictures from elsewhere. */
.av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--surface-subtle); color: var(--content-primary); box-shadow: inset 0 0 0 1px var(--line); font-size: 10.5px; font-weight: 600; line-height: 1; }
.av-agent { border-radius: 6px; background: var(--fill-inverse); color: var(--on-inverse); box-shadow: none; }
.av-sm { width: 20px; height: 20px; font-size: 9.5px; }
.av-lg { width: 40px; height: 40px; font-size: 14px; }
.org-av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--line); color: var(--content-primary); font-size: 11px; font-weight: 600; line-height: 1; }
.org-av-lg { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }

/* The account menu: a disclosure (<details>), so it opens without script; copy.js closes it on a
   click outside or Escape. Its links are the account's pages; sign out is a form. */
.top .menu { position: relative; }
.top .menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; cursor: default; }
.top .menu > summary::-webkit-details-marker { display: none; }
.top .menu > summary .av { width: 28px; height: 28px; font-size: 11px; }
.top .menu > summary:hover .av, .top .menu[open] > summary .av { box-shadow: inset 0 0 0 1px var(--content-muted); }
.top .menu-panel { position: absolute; left: auto; right: 0; top: calc(100% + 6px); z-index: 20; width: 256px; padding: 6px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-float); }
.top .menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin: 0 0 6px; display: flex; flex-direction: column; min-width: 0; }
.top .menu-head strong { font-weight: 500; }
.top .menu-head .muted { font-size: 12px; overflow-wrap: anywhere; }
.top .menu-panel a, .top .menu-panel button { display: flex; align-items: center; width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--content-primary); font: 400 14px/1 var(--sans); text-decoration: none; text-align: left; cursor: default; }
.top .menu-panel a { cursor: pointer; }
.top .menu-panel a:hover, .top .menu-panel button:hover { background: var(--fill-subtle); }
.top .menu-panel a[aria-current="page"] { background: var(--surface-subtle); }
.top .menu-panel hr { margin: 6px 0; }
.top .menu-panel form { margin: 0; }
.top .menu-phone { display: none; }
.top .menu { display: block; }

main { flex: 1; padding-top: 32px; padding-bottom: 72px; }
.foot { border-top: 1px solid var(--line); }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 28px; font-size: 12px; }
.foot-brand { display: inline-flex; align-items: center; color: var(--content-secondary); font-weight: 600; font-size: 13px; }
.foot-links { display: flex; gap: 8px 16px; flex-wrap: wrap; }
.foot a { color: var(--content-secondary); text-decoration: none; }
.foot a:hover { color: var(--content-primary); }

/* --- page structure: the page header, cards, sections --- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 24px; }
.page-header > .page-intro { min-width: 0; flex: 1 1 320px; }
.page-header h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; margin: 0; overflow-wrap: anywhere; }
.page-header .page-desc { margin: 6px 0 0; color: var(--content-secondary); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
/* An org's identity above its tabs. */
.org-head { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; min-width: 0; }
.org-head .org-name { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 450; margin: 0; overflow-wrap: anywhere; }
.org-head .org-name a { text-decoration: none; }
.org-head p { margin: 0; }

/* A page's own title, where a page has no page header: the app's 28px title. Documents (the docs,
   the policy pages) keep the 36px document title. */
main > h1, main > .narrow > h1, main > div > h1:first-child, .page-head h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 8px; }
main > h1, main > div > h1:first-child { margin-bottom: 20px; }
main > h1:has(+ p), main > div > h1:first-child:has(+ p) { margin-bottom: 8px; }
main > h1 + p, main > .narrow > h1 + p { margin-bottom: 24px; }

/* Small cards side by side (the account's other pages). */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.tiles > .card { display: flex; flex-direction: column; }
.tiles > .card .actions { margin-top: auto; padding-top: 4px; }
.profile { display: flex; align-items: flex-start; gap: 16px; }
.profile p { margin: 0 0 2px; }
.profile-name { font-size: 16px; font-weight: 500; }

/* A form a person is asked to fill in on its own (sign in, step-up): a floating card. */
.auth { margin: 24px auto 0; padding: 32px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-float); }
main > .auth > h1 { font-size: 24px; }
.auth .actions { margin-top: 20px; }
@media (max-width: 640px) { .auth { padding: 20px; margin-top: 8px; } }

/* Layout helpers */
.narrow { max-width: 560px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* A heading row: the row keeps the heading's bottom margin, so a tag or button beside the h2 centers
   on the heading itself, not on the heading plus its margin. */
.row-between > h2 { margin-bottom: 0; }
.row-between:has(> h2) { margin-bottom: 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.narrow + .card, .narrow + section { margin-top: 32px; }
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
/* Two columns: the main column and a side column of facts and quick actions. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 24px; align-items: start; }
.split > * { min-width: 0; }

/* Surfaces: a 1px ring and at most a hairline shadow (--shadow-rest). */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-rest);
  padding: 20px 24px;
  margin: 0 0 16px;
}
.card > :last-child { margin-bottom: 0; }
.card h2 { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; }
.card h2 + p.muted { margin-top: -4px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 0 0 12px; }
.card-head h2 { margin: 0; }
.card-head + p.muted { margin-top: -4px; }
/* A card whose list or table runs edge to edge. */
.card-flush { padding: 0; overflow: hidden; }
.card-flush > .card-head { padding: 16px 24px 0; }
.card-flush > p, .card-flush > .empty-state { margin-left: 24px; margin-right: 24px; }
.card-flush > p:last-child, .card-flush > .empty-state:last-child { margin-bottom: 20px; }
.card-flush > .table-wrap { margin: 0; }
.card-flush > .table-wrap th:first-child, .card-flush > .table-wrap td:first-child { padding-left: 24px; }
.card-flush > .table-wrap th:last-child, .card-flush > .table-wrap td:last-child { padding-right: 24px; }
.card-flush > .table-wrap thead th { background: var(--fill-subtle); border-top: 1px solid var(--line); }
.card-flush > .list > li { padding-left: 24px; padding-right: 24px; }
.card-foot { padding: 12px 24px; border-top: 1px solid var(--line); background: var(--fill-subtle); font-size: 13px; color: var(--content-secondary); }
.card-foot p { margin: 0; max-width: none; }

/* Buttons: primary = inverse fill, secondary = surface with ring, ghost = text, danger = red text on
   the surface. Three heights: 28 (.btn-sm), 32, 40 (.btn-lg). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  font: 500 14px/1 var(--sans);
  /* The pointer is for links only (DESIGN.md); a button says what it does in its label. */
  cursor: default;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms, color 120ms, box-shadow 120ms;
}
.btn:hover { text-decoration: none; }
a.btn { cursor: pointer; }
.btn:disabled { cursor: not-allowed; opacity: 0.5; }
.btn svg { flex: none; }
.btn-primary { background: var(--fill-inverse); color: var(--on-inverse); }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--fill-inverse) 85%, var(--page)); }
.btn-secondary { background: var(--surface); color: var(--content-primary); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, 0.04); }
.btn-secondary:hover:not(:disabled) { background: var(--fill-subtle); box-shadow: inset 0 0 0 1px var(--content-muted); }
.btn-ghost { background: transparent; color: var(--content-secondary); padding: 0 8px; }
.btn-ghost:hover:not(:disabled) { color: var(--content-primary); background: var(--fill-subtle); }
/* The current item of a nav, such as the attempts of a job. */
.btn-ghost[aria-current] { color: var(--content-primary); background: var(--surface-subtle); }
.btn-danger { background: var(--surface); color: var(--bad); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, 0.04); }
.btn-danger:hover:not(:disabled) { background: var(--fill-subtle); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn-ghost.btn-sm { padding: 0 6px; }
.btn-lg, .btn-large { height: 40px; padding: 0 16px; }

/* Forms: labels above, hints under, a ring that darkens on hover and turns accent on focus. */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-width: 440px; }
.field label { font-weight: 500; }
.field input, .field select, .field textarea, td select, td input[type="number"] {
  font: inherit;
  color: inherit;
  background-color: var(--surface);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-sm);
  height: 36px;
  padding: 0 12px;
  transition: box-shadow 120ms;
}
.field select { padding: 0 8px; }
td select { height: 32px; padding: 0 8px; }
.field input:hover, .field select:hover, .field textarea:hover, td select:hover, td input[type="number"]:hover { box-shadow: inset 0 0 0 1px var(--content-muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, td select:focus-visible, td input[type="number"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; box-shadow: inset 0 0 0 1px var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--content-secondary); opacity: 0.75; }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--bad); }
.field-error { font-size: 12px; color: var(--bad); margin: 0; }
.hint { font-size: 12px; color: var(--content-secondary); margin: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.check input { margin: 2px 0 0; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; flex: none; accent-color: var(--fill-inverse); }
[role="group"] { margin-bottom: 16px; }
[role="group"] > h3 { font-size: 14px; margin-bottom: 4px; }
[role="group"] > .hint { margin-bottom: 10px; }

/* Tables: quiet headers, hairlines between rows, numbers in tabular figures. No row hover: rows are
   not links; their links and buttons are. */
.table-wrap { overflow-x: auto; margin: 0 0 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }
th { font-weight: 500; font-size: 12px; color: var(--content-secondary); padding-top: 8px; padding-bottom: 8px; white-space: nowrap; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tr:last-child td { border-bottom: 0; }
td.cell-actions { text-align: right; white-space: nowrap; }
td.cell-actions form.inline + form.inline, td.cell-actions .btn + form.inline { margin-left: 4px; }
/* Bordered tables (a README's) keep their cells' padding on both sides. */
.markdown th:first-child, .markdown td:first-child { padding-left: 12px; }
.markdown th:last-child, .markdown td:last-child { padding-right: 12px; }
/* A long table keeps its header in view (the audit log). */
.table-scroll { max-height: 70vh; overflow: auto; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; }

/* Notices: quiet, inline, no stripes: a small ringed mark (drawn in CSS, no image: the CSP allows
   none from data: URLs) and the text. */
.notice { display: flex; align-items: flex-start; gap: 10px; background: var(--surface-subtle); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 16px; max-width: none; }
.notice::before { content: "i"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-top: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font: 700 10px/1 var(--sans); }
.notice-ok { color: var(--ok-text); }
.notice-ok::before { content: "\2713"; font-size: 9px; }
.notice-error { color: var(--bad); }
.notice-error::before, .notice-warn::before { content: "!"; }
/* A warning that blocks an action until it is acknowledged (the CLI approval's other-network check). */
.notice-warn { color: var(--warn); }
.notice > p { margin: 0; }
/* Long identifiers (SSH fingerprints) wrap instead of widening the page on phones. */
.break { overflow-wrap: anywhere; }
/* A notice with the one action that resolves it (such as "Confirm it's you" before a sudo form). */
.notice-action { align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.notice-action::before { margin-top: 0; color: var(--content-secondary); }
.notice-action > p { flex: 1 1 240px; }
.notice-action .btn { flex: none; margin-left: auto; }

/* Tags and state pills. A tag is a neutral label; a pill with a state color says a state, always
   with its word. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--content-secondary);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 999px;
  padding: 0 8px;
  line-height: 20px;
  white-space: nowrap;
  vertical-align: middle;
}
.tag-accent { color: var(--content-primary); background: var(--accent-fill); box-shadow: none; }
.tag-ok { color: var(--ok-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); }
.tag-warn { color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); }
.tag-bad { color: var(--bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 40%, transparent); }
.tag .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.tag-accent .dot { background: var(--accent); }

/* Empty states: what is missing and the one next action. */
.empty-state { padding: 24px; border-radius: var(--radius); background: var(--fill-subtle); box-shadow: inset 0 0 0 1px var(--line); margin: 0 0 12px; }
.empty-state h3 { font-size: 15px; margin: 0 0 4px; }
.empty-state p { color: var(--content-secondary); margin: 0 0 12px; }
.empty-state > :last-child { margin-bottom: 0; }
.empty-state .actions { margin-top: 12px; }

/* Facts: a short label and value list, such as a repository's default branch */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0 0 12px; }
.facts dt { color: var(--content-secondary); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.num { font-variant-numeric: tabular-nums; }

/* A person in a table: the avatar, then the name over the email. */
.who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.who-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.who-text .tag { margin-left: 4px; }

/* A section's own pages (a repository's settings): a row of quiet links, the current one filled. */
.subnav { display: flex; gap: 4px; flex-wrap: wrap; margin: -8px 0 24px; }
.subnav a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; color: var(--content-secondary); text-decoration: none; font-weight: 500; font-size: 13px; box-shadow: inset 0 0 0 1px var(--line); }
.subnav a:hover { color: var(--content-primary); background: var(--fill-subtle); }
.subnav a[aria-current] { color: var(--content-primary); background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--content-muted); }

/* An agent's page: its avatar beside the page header. */
.agent-head { display: flex; align-items: flex-start; gap: 16px; }
.agent-head > .av { margin-top: 2px; }
.agent-head > .page-header { flex: 1; min-width: 0; }
.agent-list > li { align-items: flex-start; }
.agent-list .btn { margin-top: 4px; }

/* Stat tiles: a few numbers that sum a page up (the live branch, a run). */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 16px; }
.stat { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-rest); padding: 14px 16px; min-width: 0; margin: 0; }
.stat dt, .stat-label { font-size: 12px; color: var(--content-secondary); margin: 0 0 6px; }
.stat dd, .stat-value { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin: 0; overflow-wrap: anywhere; }
.stat dd .state, .stat dd .mono, .stat dd a { font-size: 15px; letter-spacing: 0; }
.stat dd > .muted { display: block; font-size: 12px; letter-spacing: 0; margin-top: 4px; }
/* Copy blocks in a side column: the commands wrap, and the button sits above them. */
.split aside .copy-block pre { white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 14px; padding-top: 40px; }
.stat-note { display: block; font-size: 12px; letter-spacing: 0; color: var(--content-secondary); margin: 4px 0 0; }

/* Lists of things: a title, a line under it, and what is on the right (repositories, keys). */
.list { list-style: none; padding: 0; margin: 0; max-width: none; }
.list > li { display: flex; align-items: center; gap: 12px 16px; padding: 12px 0; border-top: 1px solid var(--line); margin: 0; min-width: 0; }
.list > li:first-child { border-top: 0; }
.list-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-title { font-weight: 500; overflow-wrap: anywhere; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-title a { text-decoration: none; }
.list-title a:hover { text-decoration: underline; }
.list-sub { font-size: 13px; color: var(--content-secondary); overflow-wrap: anywhere; }
.list-side { flex: none; display: flex; align-items: center; gap: 8px; color: var(--content-secondary); font-size: 13px; white-space: nowrap; }

/* Repo and tree pages (design §5.14) */
.repo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.repo-head h1 { margin-bottom: 0; overflow-wrap: anywhere; }
.repo-head .row { min-width: 0; }
.repo-actions { gap: 8px; align-items: flex-start; }
.star-block { display: flex; flex-direction: column; gap: 6px; }
h1 a.plain { text-decoration: none; }
h1 a.plain:hover { text-decoration: underline; text-decoration-color: var(--line); }
.star { display: inline-flex; align-items: center; gap: 8px; }
.star-count { color: var(--content-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.star-error { margin: 0; max-width: 32ch; }
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; margin: 0 0 4px; overflow-wrap: anywhere; }
.crumbs .sep { color: var(--content-muted); padding: 0 4px; }
.crumbs [aria-current="page"] { color: var(--content-primary); }

/* A rendered README (repo/markdown.ts): the same quiet type, headings smaller than the page's own */
.markdown { overflow-wrap: anywhere; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { font-weight: 450; margin: 24px 0 8px; }
.markdown h1 { font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; }
.markdown h2 { font-size: 20px; }
.markdown h3 { font-size: 16px; }
.markdown h4, .markdown h5, .markdown h6 { font-size: 14px; }
.markdown img { max-width: 100%; height: auto; vertical-align: middle; }
.markdown ul, .markdown ol { padding-left: 24px; }
/* ol like ul: the same margins and measure; a nested list sits close to its item */
.markdown ol { margin: 0 0 12px; max-width: 68ch; }
.markdown li > ul, .markdown li > ol { margin: 4px 0 0; }
/* The subtle fill sets a quote apart; its text stays primary (secondary on --surface-subtle was 4.23:1). */
.markdown blockquote { margin: 0 0 12px; padding: 8px 12px; background: var(--surface-subtle); border-radius: 8px; color: var(--content-primary); }
.markdown blockquote > :last-child { margin-bottom: 0; }
.markdown hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.markdown table { width: auto; margin: 0 0 12px; display: block; overflow-x: auto; overflow-wrap: normal; }
.markdown th, .markdown td, .markdown tr:last-child td { border: 1px solid var(--line); }
/* The README's file name: a quiet label above its own headings. */
.readme-name { font-size: 14px; color: var(--content-secondary); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.ta-left { text-align: left; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }
.readme-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Tabs (the org's pages, your settings, a repository's sections): text links on one hairline, the
   current one in the primary text with an underline of it. One row; on phones it scrolls inside
   itself. */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; box-shadow: inset 0 -1px 0 var(--line); margin: 0 0 24px; }
.tabs > a { display: inline-flex; align-items: center; height: 40px; padding: 0 10px; margin: 0; border-radius: 0; background: none; color: var(--content-secondary); font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap; box-shadow: none; }
.tabs > a:hover { color: var(--content-primary); background: none; }
.tabs > a[aria-current] { color: var(--content-primary); background: none; box-shadow: inset 0 -2px 0 var(--content-primary); }
.tabs > a:focus-visible { outline-offset: -2px; border-radius: 6px; }

/* Actions (P4): runs, a run, a job's log, commit statuses, Actions settings. State is a glyph plus
   its label; semantic colors mark state only; nothing animates. */
.repo-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 24px; box-shadow: inset 0 -1px 0 var(--line); }
.repo-nav .tabs { box-shadow: none; margin: 0; }
.repo-crumb { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.page-head { margin-bottom: 20px; align-items: center; }
.page-head h1 { margin-bottom: 0; overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--content-primary); }
.state .glyph { flex: none; }
.state-ok { color: var(--ok-text); }
.state-bad { color: var(--bad); }
.state-warn { color: var(--warn); }
.state-muted { color: var(--content-secondary); }
.state-neutral { color: var(--content-primary); }
a.state { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
/* A state as a pill (a run's or a job's own state, beside its title). */
.state-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px; font-size: 13px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }
.state-pill .state { gap: 6px; }
.state-pill.tone-ok { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); }
.state-pill.tone-bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 40%, transparent); }
.state-pill.tone-warn { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); }
.tip-line { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--fill-subtle); box-shadow: inset 0 0 0 1px var(--line); max-width: none; margin: 0 0 16px; }
.tip-line .rollup { margin-left: auto; }
.filters { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters .field { margin-bottom: 0; min-width: 0; flex: 1 1 160px; max-width: 240px; }
.filters-actions { display: flex; gap: 6px; align-items: center; }
.field-wide { max-width: 560px; }
.field textarea { height: auto; padding: 8px 12px; resize: vertical; min-height: 72px; line-height: 1.5; }
.field textarea.mono, .field input.mono { font-family: var(--mono); font-size: 13px; }
/* Disclosures: the summary is a button-like row; the pointer stays for links (DESIGN.md). */
details > summary { cursor: default; }
details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.dispatch > summary, .add > summary { font-weight: 500; list-style: none; display: flex; align-items: center; gap: 8px; }
.dispatch > summary::-webkit-details-marker, .add > summary::-webkit-details-marker { display: none; }
.dispatch > summary::before, .add > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); flex: none; margin: 0 4px 0 2px; }
.dispatch[open] > summary::before, .add[open] > summary::before { transform: rotate(45deg); }
.dispatch[open] > summary, .add[open] > summary { margin-bottom: 12px; }
.add { margin: 12px 0 0; }
.empty { padding: 4px 0 0; }
.empty pre { max-width: 100%; }
.pager { margin: 12px 0 0; }
.runs td, .jobs td, .statuses td { vertical-align: top; }
.runs td:first-child, .jobs td:nth-child(2), .statuses td:first-child { white-space: nowrap; }
.annotations { list-style: none; padding: 0; margin: 0; max-width: none; }
.annotations li { padding: 10px 0; border-top: 1px solid var(--line); }
.annotations li:first-child { border-top: 0; padding-top: 0; }
.annotations p { margin: 4px 0 0; }
.approval { padding: 12px 0; border-top: 1px solid var(--line); }
.approval:first-of-type { border-top: 0; padding-top: 0; }
.approval .actions { margin-top: 8px; }
.attempts { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }

/* A run: the summary strip, then the jobs as a list of rows. */
.run-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 8px 0 0; color: var(--content-secondary); font-size: 13px; max-width: none; }
.run-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.run-meta .mono { font-size: 12.5px; color: var(--content-primary); }
.run-meta a { color: inherit; }
.job-list { list-style: none; padding: 0; margin: 0; max-width: none; }
.job-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--line); margin: 0; }
.job-list > li:first-child { border-top: 0; }
.job-title { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 500; }
.job-title a { text-decoration: none; overflow-wrap: anywhere; }
.job-title a:hover { text-decoration: underline; }
.job-title .state-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.job-side { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--content-secondary); white-space: nowrap; }
.job-note { grid-column: 1 / -1; padding-left: 24px; font-size: 13px; color: var(--content-secondary); }
.job-note p { margin: 0; }

/* A job: its steps, each with its log under it, in one panel with a toolbar. */
.log { padding: 0; overflow: hidden; }
.log-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 12px 16px 12px 24px; border-bottom: 1px solid var(--line); }
.log-bar h2 { margin: 0; }
.log-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.log-status { margin: 0; font-size: 12px; color: var(--content-secondary); display: inline-flex; align-items: center; gap: 6px; }
.log-tools .log-retry { margin-left: 4px; }
.steps { display: flex; flex-direction: column; padding: 6px 8px; }
.step { border-radius: var(--radius-sm); }
.step > summary { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: var(--radius-sm); list-style: none; }
.step > summary::-webkit-details-marker { display: none; }
.step > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--content-secondary); border-bottom: 1.5px solid var(--content-secondary); transform: rotate(-45deg); flex: none; margin-right: 2px; }
.step[open] > summary::before { transform: rotate(45deg); }
.step > summary:hover { background: var(--fill-subtle); }
.step[open] > summary { background: var(--fill-subtle); }
.step-state { flex: none; }
.step-state .state-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.step-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.step-time { flex: none; font-size: 12px; }
/* The log: one line each, numbered (numbers are not copied), wrapped unless the reader turns
   wrapping off. */
.log-text { margin: 4px 0 10px; padding: 10px 0; border-radius: var(--radius-sm); background: var(--surface-subtle); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.65; min-height: 0; counter-reset: ln; max-height: 640px; overflow: auto; }
.log-text:empty { display: none; }
.log-text .ll { display: block; padding: 0 14px 0 calc(5ch + 24px); text-indent: calc(-5ch - 12px); }
.log-text .ll::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 5ch; margin-right: 12px; text-align: right; text-indent: 0; color: var(--content-secondary); opacity: 0.7; user-select: none; -webkit-user-select: none; }
.log-nowrap .log-text { white-space: pre; overflow-wrap: normal; }
.log-nowrap .log-text .ll { display: block; width: max-content; min-width: 100%; }
.log-raw { margin: 0; }
.log-foot { padding: 12px 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.log-foot p { margin: 0; }
.log > .muted, .log > noscript p { margin: 16px 24px; }
.commit-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; margin: 12px 0 0; }
.host-binding, .members { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.host-binding legend, .members legend { font-weight: 500; padding: 0; margin-bottom: 6px; }
.env { padding: 16px 0; border-top: 1px solid var(--line); }
.env:first-of-type { border-top: 0; padding-top: 0; }
.env h3 { margin: 0; font-family: inherit; font-size: 15px; }
.env h4 { font-size: 14px; font-weight: 500; margin: 16px 0 8px; }
.crumbs a { color: var(--content-secondary); }
/* Phones: tables become stacked rows, each cell with its column's name, so nothing scrolls sideways.
   The first cell (the status or the name) leads the row without a label. */
@media (max-width: 640px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  /* tbody becomes a block after the hidden thead: the .stack layout helper's sibling margin is not for it. */
  table.stack > tbody { margin-top: 0; }
  /* Filter fields take the full row, so the form's right edge lines up. */
  .filters .field { max-width: none; flex-basis: 100%; }
  table.stack tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: 2px 0; white-space: normal; }
  table.stack td:first-child { font-weight: 500; padding-bottom: 6px; }
  table.stack td[data-label] { display: grid; grid-template-columns: max-content 1fr; column-gap: 12px; text-align: right; font-weight: 400; }
  table.stack td[data-label]::before { content: attr(data-label); color: var(--content-secondary); text-align: left; grid-row: 1 / span 3; }
  table.stack td[data-label] > * { grid-column: 2; min-width: 0; justify-self: end; }
  table.stack td.cell-actions { text-align: left; padding-top: 8px; }
  .card-flush > .table-wrap table.stack tr { padding-left: 16px; padding-right: 16px; }
  .card-flush > .table-wrap table.stack td { padding-left: 0; padding-right: 0; }
}

/* P7b: plans, trust and limits, usage. Plan cards are plain rings like every surface; the current
   plan is marked by its tag (the view's one accent), never by a colored edge. */
.plans { list-style: none; padding: 0; margin: 0 0 12px; max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.plan { margin: 0; padding: 16px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.plan-head h3 { font-size: 16px; margin: 0; }
.plan-facts { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); margin: 0; font-size: 13px; }
.plan-action { margin: auto 0 0; }
.plan-action .hint { margin-top: 6px; }
.status-line { margin: 0 0 8px; }
.caps td:first-child { white-space: nowrap; }
/* An agent's limits (PG1): number inputs in the table, wide enough for 1,000,000. */
.caps td input[type="number"] { width: 128px; }
.usage { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
/* A usage meter (<meter>, no inline styles under the CSP): neutral fill, warn past 80%, bad when used up. */
meter { display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--surface-subtle); -webkit-appearance: none; appearance: none; }
meter::-webkit-meter-bar { height: 6px; border: 0; border-radius: 3px; background: var(--surface-subtle); }
meter::-webkit-meter-optimum-value { border-radius: 3px; background: var(--content-secondary); }
meter::-webkit-meter-suboptimum-value { border-radius: 3px; background: var(--warn); }
meter::-webkit-meter-even-less-good-value { border-radius: 3px; background: var(--bad); }
meter::-moz-meter-bar { border-radius: 3px; background: var(--content-secondary); }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warn); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--bad); }
.month-nav { margin-top: 0; }
.usage-days td:first-child { white-space: nowrap; }
@media (max-width: 640px) {
  .usage { min-width: 0; align-items: flex-end; }
  .usage meter { width: 120px; }
}

/* PG5: live branches. The branch page: its numbers, then what changes (the feed and the files) beside
   who is here. The feed only gains rows; nothing animates. */
.live-status { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.live-beta { margin: -12px 0 20px; }
.card-flush > .empty { padding: 0 24px 20px; }
.live-feed { list-style: none; padding: 0; margin: 0; max-width: none; }
.live-feed li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; margin: 0; }
.live-feed li:first-child { border-top: 0; padding-top: 2px; }
.live-feed .live-summary { flex: 1 1 auto; min-width: 0; }
.live-feed time { color: var(--content-secondary); font-size: 12px; white-space: nowrap; flex: none; margin-left: auto; padding-top: 2px; }
.live-feed .tag { flex: none; }
.people { list-style: none; padding: 0; margin: 0; max-width: none; }
.people > li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); margin: 0; min-width: 0; }
.people > li:first-child { border-top: 0; padding-top: 2px; }
.person { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.person-name { font-weight: 500; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.person-name .mono { font-size: 12.5px; }
.person-where { font-size: 12.5px; color: var(--content-secondary); overflow-wrap: anywhere; }
.person-where .mono { font-size: 12px; color: var(--content-primary); }
.presence { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--content-secondary); white-space: nowrap; }
.presence::before { content: ""; width: 7px; height: 7px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; }
.presence-active { color: var(--ok-text); }
.presence-active::before { background: currentColor; box-shadow: none; }
.file-rows { list-style: none; padding: 0; margin: 0; max-width: none; }

/* Policy pages */
.prose h2 { margin-top: 28px; }
/* Only the article's own first heading: on /docs/errors every h2 is the first in its own section. */
.prose > h2:first-of-type { margin-top: 8px; }
/* Ordered steps (the DMCA notice and counter-notice): the same margins and measure as ul. */
.prose ol { margin: 0 0 12px; padding-left: 20px; max-width: 68ch; }

/* Status pages: 404 and the error pages. */
.status-page { max-width: 560px; padding: 32px 0 16px; }
.status-code { font: 500 13px/1 var(--mono); color: var(--content-secondary); margin: 0 0 12px; }
.status-page h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }

@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .nav .nav-wide { display: none; }
  .top .menu-phone { display: flex !important; }
  .ctx { display: none; }
}
@media (max-width: 640px) {
  h1 { font-size: 28px; }
  .page-header h1, .status-page h1 { font-size: 24px; }
  main { padding-top: 24px; }
  .top-inner, .foot-inner, main { padding-left: 16px; padding-right: 16px; }
  .card { padding: 16px; }
  .card-flush { padding: 0; }
  .card-flush > .card-head { padding: 14px 16px 0; }
  .card-flush > p, .card-flush > .empty-state { margin-left: 16px; margin-right: 16px; }
  .card-flush > .list > li, .job-list > li { padding-left: 16px; padding-right: 16px; }
  .log-bar { padding: 12px 12px 12px 16px; }
  .steps { padding: 4px; }
  .log-foot { padding: 12px 16px; }
  /* One header row on phones: the beta line goes under the wordmark (inside the brand's band); Home,
     Docs and Feedback are in the account menu. */
  .top-inner { flex-wrap: nowrap; gap: 8px; }
  .brand-line { column-gap: 8px; row-gap: 0; }
  .brand-line .beta { order: 3; flex-basis: 100%; font-size: 11px; line-height: 14px; }
  .nav { flex: none; }
  .page-header { margin-bottom: 20px; }
  .page-actions { width: 100%; }
}

/* Beta UX (docs/v2/ux-beta): the skip link, breadcrumbs, copy blocks, the first-run steps, the code
   pages (a file, commits, branches), the landing page and the docs index. */
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 30; background: var(--fill-inverse); color: var(--on-inverse); padding: 8px 12px; border-radius: var(--radius-sm); text-decoration: none; }
.skip-link:focus { top: 8px; }
.page-crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; margin: 0 0 8px; font-size: 13px; color: var(--content-secondary); overflow-wrap: anywhere; }
.page-crumbs a { color: var(--content-secondary); text-decoration: none; }
.page-crumbs a:hover { color: var(--content-primary); text-decoration: underline; }
.page-crumbs .sep { color: var(--content-muted); padding: 0 4px; }
.page-crumbs [aria-current="page"] { color: var(--content-primary); }

/* A command with its copy button (copy.js shows the button). */
.copy-block { position: relative; margin: 0 0 12px; }
.copy-block pre { margin: 0; padding-right: 76px; }
.copy-block .copy { position: absolute; top: 6px; right: 6px; height: 28px; padding: 0 10px; font-size: 13px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--content-primary); }
.copy-block .copy:hover { background: var(--fill-subtle); }
.copy-label { font-size: 13px; color: var(--content-secondary); margin: 0 0 6px; }

/* First-run steps: the order is real, so they are numbered. A done step says so in words. */
.steps-list { list-style: none; padding: 0; margin: 0; max-width: none; counter-reset: step; }
.steps-list > li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--line); margin: 0; }
.steps-list > li:first-child { border-top: 0; padding-top: 4px; }
.steps-list > li::before { content: counter(step); width: 24px; height: 24px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--content-secondary); font-variant-numeric: tabular-nums; }
.steps-list > li.done::before { content: "\2713"; color: var(--ok-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); }
.steps-list > li.next::before { background: var(--fill-inverse); color: var(--on-inverse); box-shadow: none; }
.steps-list h3 { margin: 2px 0 4px; font-size: 15px; }
.steps-list .step-body > :last-child { margin-bottom: 0; }
.steps-list .done h3 { color: var(--content-secondary); }
/* Progress of the first-run steps. */
.progress { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--content-secondary); }
.progress meter { width: 96px; }

/* The repo page's head and file box */
.repo-title { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.repo-title h1 { margin: 0; overflow-wrap: anywhere; }
.box-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 0 0 12px; }
.box-head h2 { margin: 0; }
.box-links { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
/* The code views (a file, commits, branches, the code box) are in the code views block at the end. */

.doc-list { list-style: none; padding: 0; margin: 0; max-width: none; }
.doc-list li { padding: 12px 0; border-top: 1px solid var(--line); margin: 0; }
.doc-list li:first-child { border-top: 0; padding-top: 0; }
.doc-list a { font-weight: 500; }
.doc-list p { margin: 2px 0 0; color: var(--content-secondary); }
.field textarea.feedback-text { min-height: 160px; }
.settings-head { margin-bottom: 16px; }
.settings-head h1 { margin-bottom: 8px; }

/* The signed-in home: your repositories and what happened in them, beside your organizations,
   quick actions and the CLI. */
.dash-repos .list-title .mono { font-size: 13.5px; }
.repo-av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--line); color: var(--content-secondary); }
.activity { list-style: none; padding: 0; margin: 0; max-width: none; }
.activity > li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); margin: 0; }
.activity > li:first-child { border-top: 0; padding-top: 2px; }
.activity .what { min-width: 0; overflow-wrap: anywhere; }
.activity .what .mono { font-size: 12.5px; }
.activity time, .activity .when { font-size: 12px; color: var(--content-secondary); white-space: nowrap; padding-top: 1px; }
.activity .glyph-cell { padding-top: 2px; color: var(--content-secondary); display: inline-flex; }
.quick { list-style: none; padding: 0; margin: 0; max-width: none; display: flex; flex-direction: column; gap: 2px; }
.quick > li { margin: 0; }
.quick a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--content-primary); font-weight: 500; }
.quick a:hover { background: var(--fill-subtle); }
.quick a svg { color: var(--content-secondary); flex: none; }
.org-list > li { padding: 10px 0; }
.setup-done > summary { list-style: none; display: flex; align-items: center; gap: 10px; }
.setup-done > summary::-webkit-details-marker { display: none; }
.setup-done > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--content-secondary); border-bottom: 1.5px solid var(--content-secondary); transform: rotate(45deg); margin-left: auto; }
.setup-done[open] > summary::after { transform: rotate(-135deg); }
.setup-done[open] > summary { margin-bottom: 12px; }

@media (max-width: 640px) {
  /* One row of tabs that scrolls sideways inside itself, not three rows of them. */
  .tabs, nav.org-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar, nav.org-tabs::-webkit-scrollbar { display: none; }
  .repo-nav { flex-direction: column; align-items: flex-start; }
  .copy-block pre { padding-right: 14px; padding-top: 40px; }
}

/* The .duragit pages (/docs/dot-duragit): Knowledge (a note beside the index) and Architecture (a
   server-drawn SVG). The diagram is neutral tokens through classes only; the selected component and
   its edges are the view's one accent. */
.kb { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; }
.kb-doc { margin: 0; min-width: 0; }
.kb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.kb-head h1 { font-size: 28px; margin: 0; overflow-wrap: anywhere; }
.kb-decision { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.kb-facts { font-size: 13px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.kb-side { position: sticky; top: 16px; min-width: 0; }
.kb-search { display: flex; gap: 6px; margin: 0 0 16px; }
.kb-search input { flex: 1; min-width: 0; font: inherit; color: inherit; background: var(--surface); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--radius-sm); height: 32px; padding: 0 10px; }
.kb-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.kb-index { font-size: 13px; }
.kb-index ul { list-style: none; padding: 0; margin: 0 0 16px; }
.kb-index li { margin: 0; }
.kb-index a, .kb-home a { display: block; padding: 4px 8px; border-radius: 6px; text-decoration: none; color: var(--content-primary); overflow-wrap: anywhere; }
.kb-index li { display: flex; align-items: baseline; gap: 4px; }
.kb-index li a { flex: 1; min-width: 0; }
.kb-index a:hover { background: var(--fill-subtle); }
.kb-index a[aria-current] { background: var(--surface-subtle); }
.kb-index .num { color: var(--content-secondary); font-variant-numeric: tabular-nums; }
.kb-home { margin: 0 0 12px; }
.kb-group { font-size: 13px; color: var(--content-secondary); margin: 0 0 4px; padding: 0 8px; }
.kb-backlinks { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.kb-backlinks h2 { font-size: 16px; }
.kb-backlinks ul { margin-bottom: 0; }
.kb-hits p { overflow-wrap: anywhere; }
.markdown .kb-missing { color: var(--content-secondary); text-decoration: underline dotted; text-underline-offset: 2px; }
.arch-views { margin: 0 0 8px; }
.arch-view-desc { margin-bottom: 12px; }
.arch-card { padding: 0; overflow: hidden; }
.arch-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.arch-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.arch-svg { display: block; margin: 0 auto; }
.arch-hint { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); max-width: none; }
.arch-node rect { fill: var(--surface); stroke: var(--content-muted); stroke-width: 1; }
.arch-node.g-store rect { fill: var(--surface-subtle); stroke: var(--line); }
.arch-node.g-library rect { fill: var(--fill-subtle); stroke: var(--line); }
.arch-node.g-external rect { fill: var(--page); stroke-dasharray: 4 3; }
.arch-node { text-decoration: none; }
.arch-node text { text-decoration: none; fill: var(--content-primary); font-family: var(--mono); font-size: 11.5px; font-variant-ligatures: none; }
.arch-node .arch-kind { fill: var(--content-secondary); font-family: var(--sans); font-size: 11px; }
.arch-node:hover rect { stroke: var(--content-secondary); }
.arch-node:focus { outline: none; }
.arch-node:focus-visible rect { stroke: var(--accent); stroke-width: 2; }
.arch-node.on rect { fill: var(--accent-fill); stroke: var(--accent); stroke-width: 1.5; }
.arch-node.near rect { stroke: var(--content-secondary); }
.arch-node.dim { opacity: 0.45; }
.arch-edge { fill: none; stroke: var(--content-muted); stroke-width: 1; }
.arch-edge.on { stroke: var(--accent); stroke-width: 1.5; }
.arch-edge.dim { opacity: 0.25; }
.arch-head { fill: var(--content-muted); }
.arch-head.on { fill: var(--accent); }
.arch-label { fill: var(--content-secondary); font-size: 10px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.arch-label.on { fill: var(--content-primary); }
.arch-label.dim { opacity: 0.3; }
.arch-list { list-style: none; padding: 0; margin: 0; max-width: none; }
.arch-list > li { padding: 14px 0; border-top: 1px solid var(--line); margin: 0; scroll-margin-top: 16px; }
.arch-list > li:first-child { border-top: 0; padding-top: 0; }
.arch-list > li.on { background: var(--fill-subtle); margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
.arch-list p { margin: 6px 0 8px; }
.arch-item-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.arch-item-head a { font-weight: 500; }
.arch-facts { font-size: 13px; margin: 0; }
.arch-selected h2 { margin: 0; }

@media (max-width: 760px) {
  .kb { grid-template-columns: minmax(0, 1fr); }
  .kb-side { position: static; order: 2; }
  .kb-head h1 { font-size: 24px; }
}

/* The landing page (ui/landing.ts, docs/v2/ux-beta/landing). Few sizes: headings 52/28/16, copy
   18/16/14/13/12. Resting surfaces use --shadow-rest, the hero picture and the invite form
   --shadow-float. Pictures are neutral, with the accent on the one thing each is about. */
body.page-wide main { padding-top: 56px; }
.ld .lede { font-size: 16px; max-width: 64ch; }
.ld-hero { max-width: 800px; }
.ld-hero h1 { font-size: 52px; line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 18px; }
.ld-sub { font-size: 18px; line-height: 1.5; color: var(--content-secondary); max-width: 62ch; margin: 0; }
.ld-hero .actions { margin-top: 28px; }
.ld-hero .actions .btn { height: 40px; padding: 0 16px; }
.ld-hero > .small { margin: 14px 0 0; }
.ld-hero-fig { margin: 48px 0 0; }
.ld-hero-fig figcaption { margin-top: 12px; max-width: 80ch; }

.ld-window { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-float); overflow: hidden; }
.ld-window-bar { display: flex; align-items: center; gap: 8px 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--fill-subtle); flex-wrap: wrap; font-size: 13px; }
.ld-crumb { display: inline-flex; gap: 6px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.ld-sep { color: var(--content-muted); }
.ld-presence { margin-left: auto; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.ld-who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; }
.ld-av { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; line-height: 1; }
.ld-av-person { border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--content-primary); color: var(--content-primary); }
.ld-av-agent { border-radius: 5px; background: var(--fill-inverse); color: var(--on-inverse); }
.ld-window-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ld-pane { padding: 16px 20px 20px; min-width: 0; }
.ld-commits { border-left: 1px solid var(--line); }
.ld-pane-title { font-size: 12px; color: var(--content-secondary); margin: 0 0 8px; }
.ld-feed { list-style: none; padding: 0; margin: 0; max-width: none; font-size: 13px; }
.ld-feed li { display: grid; grid-template-columns: 92px 118px minmax(0, 1fr) 64px 48px; grid-template-areas: "time who path diff via"; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); margin: 0; }
.ld-feed li:first-child { border-top: 0; }
.ld-time { grid-area: time; font-size: 12px; color: var(--content-secondary); }
.ld-feed .ld-who { grid-area: who; }
.ld-path { grid-area: path; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-diff { grid-area: diff; font-size: 12px; text-align: right; white-space: nowrap; }
.ld-del { color: var(--content-secondary); }
.ld-via { grid-area: via; font-size: 12px; color: var(--content-secondary); text-align: right; }
.ld-checkpoint { display: flex; gap: 10px; align-items: baseline; margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--accent-fill); font-size: 13px; max-width: none; }
.ld-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); flex: none; }
.ld-log { list-style: none; padding: 0; margin: 0; max-width: none; }
.ld-log li { position: relative; display: grid; grid-template-columns: 10px 58px minmax(0, 1fr); gap: 10px; padding: 0 0 16px; margin: 0; font-size: 13px; }
.ld-log li::before { content: ""; position: absolute; left: 4.5px; top: 14px; bottom: 0; width: 1px; background: var(--line); }
.ld-log li:last-child::before { display: none; }
.ld-node { width: 10px; height: 10px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--content-muted); margin-top: 4px; }
.ld-log-new .ld-node { background: var(--accent); box-shadow: none; }
.ld-sha { font-size: 12px; color: var(--content-secondary); padding-top: 1px; }
.ld-msg { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ld-msg .mono { font-size: 12px; }
.ld-meta { font-size: 12px; color: var(--content-secondary); }
.ld-mini { margin: 4px 0 0; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ld-prompt, .ld-out { color: var(--content-secondary); }
.ld-diff-title { margin: 16px 0 6px; }
.ld-code { padding: 8px 0; white-space: pre; overflow-x: auto; }
.ld-ln { display: block; padding: 0 12px; }
.ld-ln:first-child { color: var(--content-secondary); }
.ld-rm { color: var(--content-secondary); }
.ld-add { background: var(--surface); }
.ld-prompt { user-select: none; -webkit-user-select: none; }

/* The one motion on the page: the hero's edits arrive once, then the checkpoint, then its commit. */
@media (prefers-reduced-motion: no-preference) {
  .ld-reveal { animation: ld-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .ld-d0 { animation-delay: 250ms; }
  .ld-d1 { animation-delay: 430ms; }
  .ld-d2 { animation-delay: 610ms; }
  .ld-d3 { animation-delay: 950ms; }
  .ld-d4 { animation-delay: 1350ms; }
  .ld-d5 { animation-delay: 1550ms; }
}
@keyframes ld-in { from { opacity: 0; transform: translateY(4px); } }

.ld-section { margin-top: 104px; scroll-margin-top: 24px; }
.ld-section h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 12px; }
.ld-head { margin-bottom: 28px; }
.ld-head .lede { margin: 0; }

.ld-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ld-panel { margin: 0; padding: 20px 20px 24px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-rest); display: flex; flex-direction: column; gap: 16px; }
.ld-panel figcaption { display: flex; flex-direction: column; gap: 2px; }
.ld-panel-title { font-weight: 500; }
.ld-svg { display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto; }
.ld-svg-person { fill: var(--surface); stroke: var(--content-primary); stroke-width: 1.5; }
.ld-svg-agent { fill: var(--content-primary); }
.ld-svg-line { fill: none; stroke: var(--content-muted); stroke-width: 1; }
.ld-svg-line.on { stroke: var(--accent); stroke-width: 1.5; }
.ld-svg-box { fill: var(--surface-subtle); stroke: var(--content-muted); stroke-width: 1; }
.ld-svg-box.on { fill: var(--accent-fill); stroke: var(--accent); stroke-width: 1.5; }
.ld-svg-ext { fill: var(--surface); stroke-dasharray: 4 3; }
.ld-svg-queue rect { fill: var(--content-muted); }
.ld-svg-label { fill: var(--content-primary); font: 500 12px var(--sans); }
.ld-svg-sub { fill: var(--content-secondary); font: 400 10.5px var(--sans); }
.ld-svg-mono { fill: var(--content-primary); font: 400 11px var(--mono); font-variant-ligatures: none; }
.ld-svg-mono.on { font-weight: 600; }
.ld-facts { list-style: none; padding: 0; margin: 28px 0 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ld-facts li { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.ld-fact-num { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.ld-prims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ld-prim { padding: 20px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-rest); display: flex; flex-direction: column; min-width: 0; }
.ld-prim h3 { font-size: 16px; margin-bottom: 8px; }
.ld-prim pre { margin: auto 0 0; font-size: 12.5px; white-space: pre; overflow-x: auto; }
.ld-prim > p.muted { margin-bottom: 16px; }
.ld-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; max-width: none; }
.ld-tools + p { margin-top: 12px; }
.ld-tool { font-size: 12px; line-height: 20px; padding: 0 8px; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); background: var(--surface); }

.ld-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.ld-split-text { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: center; margin-bottom: 0; }
.ld-split-text h2 + .lede { margin-bottom: 16px; }
.ld-term { margin: 0; border-radius: 12px; background: var(--surface-subtle); overflow: hidden; display: flex; flex-direction: column; }
.ld-term figcaption { font-size: 12px; color: var(--content-secondary); padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ld-term pre { margin: 0; padding: 14px 16px 18px; border-radius: 0; background: transparent; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; }

.ld-tabs { gap: 4px; }
.ld-tabs span { font-size: 13px; color: var(--content-secondary); padding: 2px 8px; border-radius: 6px; }
.ld-tabs span.on { color: var(--content-primary); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.ld-kb-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); }
.ld-kb-index { grid-row: 1 / span 2; list-style: none; margin: 0; padding: 12px 8px; border-right: 1px solid var(--line); font: 12px var(--mono); font-variant-ligatures: none; max-width: none; }
.ld-kb-index li { margin: 0; padding: 4px 8px; border-radius: 6px; color: var(--content-secondary); overflow-wrap: anywhere; }
.ld-kb-index li.on { background: var(--surface-subtle); color: var(--content-primary); }
.ld-kb-note { padding: 16px 20px 8px; min-width: 0; }
.ld-kb-note p { font-size: 13px; }
.ld-kb-title { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 4px; }
.ld-kb-note u { text-decoration-color: var(--content-muted); text-underline-offset: 2px; }
.ld-kb-arch { border-top: 1px solid var(--line); padding: 12px 20px 14px; min-width: 0; }
.ld-arch { max-width: 280px; margin: 0; }

.ld-bars { max-width: 880px; }
.ld-bars dl { margin: 0; }
.ld-bar-row { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 6px 24px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.ld-bar-row:first-child { border-top: 0; padding-top: 0; }
.ld-bar-row dt { font-size: 14px; }
.ld-bar-row dd, .ld-axis-cell { margin: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; }
.ld-bar-ms { text-align: right; font: 13px var(--mono); font-variant-numeric: tabular-nums; }
.ld-bar, .ld-axis { display: block; overflow: visible; }
.ld-bar-track { fill: var(--surface-subtle); }
.ld-bar-fill { fill: var(--content-primary); }
.ld-bar-target { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ld-axis-row { border-top: 0; padding-top: 4px; }
.ld-axis-tick { stroke: var(--content-muted); stroke-width: 1; }
.ld-axis-label { fill: var(--content-secondary); font: 11px var(--sans); font-variant-numeric: tabular-nums; }
.ld-bars + .small { margin-top: 16px; }

.ld-trust { list-style: none; padding: 0; margin: 20px 0 16px; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ld-trust li { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.ld-trust h3 { font-size: 15px; margin-bottom: 6px; }
.ld-trust p { font-size: 13px; margin: 0; }

.ld-invite { padding: 40px; border-radius: 16px; background: var(--fill-subtle); box-shadow: 0 0 0 1px var(--line); }
.ld-invite .lede { margin-bottom: 16px; }
.ld-form { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-float); padding: 24px; margin: 0; min-width: 0; }
.ld-form .field { max-width: none; }
.ld-form .field input { height: 40px; }
.ld-form .field textarea { min-height: 88px; }
.ld-form .field input[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--bad); }
.ld-form .actions { margin-top: 4px; gap: 12px 16px; }
.ld-form .actions .btn { height: 40px; padding: 0 16px; }
.ld-form .notice { margin: 4px 0 12px; }
.ld-sent h3 { font-size: 20px; margin-bottom: 8px; }
.ld-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 960px) {
  .ld-prims { grid-template-columns: minmax(0, 1fr); }
  .ld-prim pre { margin-top: 0; }
  .ld-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-split-text { grid-template-columns: minmax(0, 1fr); }
  .ld-feed li { grid-template-columns: 118px minmax(0, 1fr) 64px 48px; grid-template-areas: "who path diff via"; }
  .ld-time { display: none; }
}
@media (max-width: 760px) {
  body.page-wide main { padding-top: 32px; }
  .ld-hero h1 { font-size: 36px; line-height: 1.1; }
  .ld-sub { font-size: 16px; }
  .ld-hero-fig { margin-top: 32px; }
  .ld-section { margin-top: 72px; }
  .ld-section h2 { font-size: 24px; }
  .ld-window-body, .ld-compare, .ld-split, .ld-facts { grid-template-columns: minmax(0, 1fr); }
  .ld-commits { border-left: 0; border-top: 1px solid var(--line); }
  .ld-presence { margin-left: 0; flex-basis: 100%; }
  .ld-feed li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who via" "path diff"; gap: 2px 12px; }
  .ld-pane { padding: 14px 16px 16px; }
  .ld-kb-body { grid-template-columns: minmax(0, 1fr); }
  .ld-kb-index { grid-row: auto; border-right: 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 2px; }
  .ld-bar-row { grid-template-columns: minmax(0, 1fr); }
  .ld-axis-row > :first-child { display: none; }
  .ld-trust { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ld-invite { padding: 20px 16px; border-radius: 12px; }
  .ld-form { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* --- code views (docs/v2/ux-beta/code): the repo home's code box, the branch switcher and clone menu,
   tree and file pages with highlighted code, the commit page's diff, commits and branches. Owned by the
   code views; keep code-view rules inside this block. Syntax colors are the one place hues appear, and
   only inside code (.hl); added and removed lines use the ok and bad state tokens as tints. --- */
:root {
  --syn-k: #7c3aad;
  --syn-s: #0f6e4a;
  --syn-c: #707070;
  --syn-n: #a24b00;
  --syn-t: #9b2f61;
  --syn-f: #1b5aa6;
  --diff-add: color-mix(in srgb, var(--ok) 9%, var(--surface));
  --diff-add-num: color-mix(in srgb, var(--ok) 17%, var(--surface));
  --diff-del: color-mix(in srgb, var(--bad) 8%, var(--surface));
  --diff-del-num: color-mix(in srgb, var(--bad) 15%, var(--surface));
}
@media (prefers-color-scheme: dark) {
  :root {
    --syn-k: #c9a2f5;
    --syn-s: #86d1a8;
    --syn-c: #8a8a8a;
    --syn-n: #e5a46a;
    --syn-t: #f09bc0;
    --syn-f: #8cbcf7;
    --diff-add: color-mix(in srgb, var(--ok) 13%, var(--surface));
    --diff-add-num: color-mix(in srgb, var(--ok) 22%, var(--surface));
    --diff-del: color-mix(in srgb, var(--bad) 12%, var(--surface));
    --diff-del-num: color-mix(in srgb, var(--bad) 20%, var(--surface));
  }
}

.icon { flex: none; vertical-align: -3px; }
.btn-sm { height: 28px; padding: 0 8px; font-size: 13px; gap: 6px; }
.btn-icon { width: 32px; padding: 0; }
.box-pad { padding: 16px; margin: 0; }
.sha { font-family: var(--mono); font-size: 12px; color: var(--content-secondary); text-decoration: none; white-space: nowrap; font-variant-ligatures: none; }
a.sha:hover { color: var(--content-primary); text-decoration: underline; }

/* Initials in a neutral disc: no images, no color. */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--surface-subtle); box-shadow: 0 0 0 1px var(--line); color: var(--content-secondary); font: 600 12px/1 var(--sans); user-select: none; }
.avatar-sm { width: 20px; height: 20px; font-size: 10px; }

/* Menus: <details> disclosures with a floating panel (copy.js closes them on Escape, outside clicks
   and focus leaving by keyboard). The panel takes focus (tabindex -1) for presses on its text. */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: default; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .icon-chevron { opacity: 0.7; transition: transform 120ms; }
.menu[open] > summary .icon-chevron { transform: rotate(180deg); }
.menu[open] > summary.btn-secondary { background: var(--fill-subtle); }
.menu-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 320px; max-width: calc(100vw - 32px); background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-float); padding: 8px; }
.menu-panel-end { left: auto; right: 0; width: 380px; }
.menu-title { font-size: 12px; color: var(--content-secondary); margin: 0; padding: 4px 8px 8px; }
.menu-filter { position: relative; margin: 0 0 6px; }
.menu-filter .icon { position: absolute; left: 10px; top: 8px; color: var(--content-muted); }
.menu-filter input { width: 100%; height: 32px; padding: 0 10px 0 32px; font: inherit; color: inherit; background: var(--surface); border: 0; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.menu-filter input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.menu-list { list-style: none; margin: 0; padding: 0; max-width: none; max-height: 288px; overflow-y: auto; }
.menu-list li { margin: 0; }
.menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--content-primary); text-decoration: none; font-size: 13px; }
.menu-item:hover { background: var(--fill-subtle); }
.menu-item[aria-current] { font-weight: 600; }
.menu-item .tag { font-family: var(--sans); font-weight: 400; }
.menu-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-check { display: inline-flex; width: 16px; flex: none; color: var(--content-primary); }
.menu-empty { padding: 6px 8px; margin: 0; }
.menu-foot { margin: 6px 0 0; padding: 8px 8px 2px; border-top: 1px solid var(--line); font-size: 13px; }
.menu-foot a { color: var(--content-secondary); }
.ref-btn { max-width: 260px; }
.ref-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 13px; }

/* The clone menu: HTTPS, SSH and CLI as a segmented control of radio buttons (no script needed).
   Each radio covers its label (the label's text lets presses through to it) and draws the pill;
   the picked radio's panel shows. Without :has(), every panel shows. */
.seg-wrap { display: flow-root; }
.seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 4px; }
.seg-option { position: relative; display: inline-flex; }
.seg-option .seg-input { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; cursor: default; }
.seg-input:hover { background: var(--fill-subtle); }
.seg-input:checked { background: var(--surface-subtle); }
.seg-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg-label { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; font-size: 13px; font-weight: 500; color: var(--content-secondary); pointer-events: none; user-select: none; }
.seg-input:hover + .seg-label, .seg-input:checked + .seg-label { color: var(--content-primary); }
.seg-panels { margin-top: 10px; padding: 0 4px; }
.seg-panel .copy-block { margin-bottom: 6px; }
.seg-panel pre { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px 72px 10px 12px; }
.seg-panel .hint { margin: 0 0 4px; }
@supports selector(:has(*)) {
  .seg-panel { display: none; }
  .seg-wrap:has(#clone-https:checked) .seg-panel-https, .seg-wrap:has(#clone-ssh:checked) .seg-panel-ssh, .seg-wrap:has(#clone-cli:checked) .seg-panel-cli { display: block; }
}
.clone-hint { padding: 8px 8px 2px; margin: 4px 0 0; border-top: 1px solid var(--line); max-width: none; }

/* The code box: toolbar, commit strip, file list. No overflow clipping: the menus float out of it. */
.code-box { padding: 0; }
.code-box > :last-child { margin-bottom: 0; }
.code-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.toolbar-title { font-size: 14px; margin: 0 0 0 4px; }
.toolbar-links { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.toolbar-end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.commit-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; background: var(--fill-subtle); border-bottom: 1px solid var(--line); font-size: 13px; }
.strip-who { display: flex; align-items: center; gap: 8px; flex: none; }
.strip-author { font-weight: 500; }
.strip-msg { flex: 1 1 200px; min-width: 0; margin: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--content-secondary); }
.strip-msg a { color: var(--content-primary); text-decoration: none; }
.strip-msg a:hover { text-decoration: underline; }
.strip-meta { display: flex; align-items: center; gap: 12px; flex: none; }
.strip-meta .rollup { font-size: 13px; }
.files td { padding: 7px 16px; }
.files td.name { padding-right: 8px; }
.files .size { text-align: right; white-space: nowrap; color: var(--content-secondary); width: 1%; font-size: 13px; }
.files .entry { display: inline-flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.files a.entry { text-decoration: none; color: var(--content-primary); }
.files a.entry:hover span { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.files .icon { color: var(--content-muted); }
.files .icon-folder { color: var(--content-secondary); }
.files tr.up a.entry { color: var(--content-secondary); }
.code-box .table-wrap, .file-box .table-wrap { margin: 0; }
.code-box tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.code-box tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }

/* The path above a tree or a file: the branch switcher, then the crumbs. */
.code-path { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; }
.code-path .crumbs { margin: 0; font-size: 14px; }
.code-path .crumbs [aria-current="page"] { font-weight: 600; }
.code-page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }

/* A file: its bar (language, lines, size, actions) and the code with linkable line numbers. */
.file-box { padding: 0; }
.file-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.file-meta { margin: 0; font-size: 13px; color: var(--content-secondary); font-variant-numeric: tabular-nums; max-width: none; }
.file-meta a.mono { font-size: 12px; }
.file-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.seg-links { display: inline-flex; gap: 2px; margin-right: 6px; padding: 2px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.seg-link { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--content-secondary); text-decoration: none; }
.seg-link:hover { color: var(--content-primary); background: var(--fill-subtle); }
.seg-link[aria-current] { color: var(--content-primary); background: var(--surface-subtle); }
.code-scroll { overflow-x: auto; border-radius: 0 0 var(--radius) var(--radius); }
pre.code { margin: 0; padding: 8px 0; background: var(--surface); border-radius: 0; font-size: 12.5px; line-height: 20px; tab-size: 4; overflow: visible; }
pre.code code { display: block; min-width: max-content; }
.code .line { display: flex; white-space: pre; scroll-margin-top: 96px; }
.code .lc { flex: 1; padding: 0 16px 0 0; }
.code .ln { position: sticky; left: 0; flex: none; width: 64px; padding-right: 16px; text-align: right; color: var(--content-muted); background: var(--surface); text-decoration: none; user-select: none; -webkit-user-select: none; }
.code .ln::before { content: attr(data-n); }
.code .ln:hover { color: var(--content-primary); }
.code .line:target, .code .line.hl, .code .line:target .ln, .code .line.hl .ln { background: var(--accent-fill); }
.code .line:target .ln, .code .line.hl .ln { color: var(--content-primary); }

/* Syntax colors, inside code only (repo/highlight.ts). */
.hl .k { color: var(--syn-k); }
.hl .s { color: var(--syn-s); }
.hl .c { color: var(--syn-c); font-style: italic; }
.hl .n, .hl .o, .hl .v, .hl .m { color: var(--syn-n); }
.hl .t, .hl .g { color: var(--syn-t); }
.hl .f, .hl .p { color: var(--syn-f); }
.hl .h { color: var(--content-primary); font-weight: 600; }

/* Commits: rows with initials, the title, who and when; checks, the short SHA and the files. */
.commits-card, .branches-card { padding: 0; }
.commits-card .day { font-size: 13px; color: var(--content-secondary); font-weight: 450; margin: 0; padding: 10px 16px; background: var(--fill-subtle); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.commits-card .day:first-child { border-top: 0; border-radius: var(--radius) var(--radius) 0 0; }
.commits-card > .pager { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); }
.commits-card > p.muted { padding: 16px; margin: 0; }
.commit-list, .branch-list { list-style: none; padding: 0; margin: 0; max-width: none; }
.commit-row, .branch-row { display: flex; align-items: center; gap: 8px 12px; padding: 12px 16px; margin: 0; border-top: 1px solid var(--line); }
.commit-row:first-child, .branch-row:first-child { border-top: 0; }
.commit-main, .branch-main { flex: 1; min-width: 0; }
.commit-title { display: block; font-weight: 500; color: var(--content-primary); text-decoration: none; overflow-wrap: anywhere; }
.commit-title:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.commit-meta { margin: 2px 0 0; font-size: 13px; color: var(--content-secondary); max-width: none; }
.commit-author { color: var(--content-primary); font-weight: 500; }
.commit-side, .branch-side { display: flex; align-items: center; gap: 10px; flex: none; }
.commit-side .rollup, .branch-side .rollup { font-size: 13px; }
.branch-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-weight: 500; max-width: none; }
.branch-name .icon { color: var(--content-secondary); }
.branch-name a { font-size: 13px; color: var(--content-primary); text-decoration: none; overflow-wrap: anywhere; }
.branch-name a:hover { text-decoration: underline; }
.branch-last { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 0; font-size: 13px; max-width: none; overflow-wrap: anywhere; }
.branch-last a { color: var(--content-primary); text-decoration: none; }
.branch-by::before { content: "\00B7"; margin-right: 8px; }
.branch-last a:hover { text-decoration: underline; }

/* A commit: its header, the changed files and their diffs. */
.commit-head h1 { font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; margin: 0; overflow-wrap: anywhere; }
.commit-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.commit-head-top .rollup { margin-top: 6px; }
.commit-head .commit-body { margin: 12px 0 0; font-size: 13px; }
.commit-byline { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.commit-byline p { margin: 0; color: var(--content-secondary); max-width: none; }
.commit-ids { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--content-secondary); }
.sha-copy { flex: 0 1 auto; min-width: 0; }
.sha-copy .copy-block { margin: 0; }
.sha-copy pre { padding: 6px 72px 6px 10px; font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
.sha-copy .copy-block .copy { top: 3px; right: 3px; height: 24px; font-size: 12px; }
.commit-links { display: flex; gap: 6px; margin-left: auto; }
.diff-summary h2 { margin-bottom: 6px; }
.diff-summary-line { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13px; max-width: none; font-variant-numeric: tabular-nums; }
.stat-add { color: var(--ok-text); }
.stat-del { color: var(--bad); }
.diff-stat { display: inline-flex; gap: 8px; font-size: 12px; font-family: var(--mono); white-space: nowrap; }
.diff-toc { list-style: none; padding: 0; margin: 12px 0 0; max-width: none; }
.diff-toc li { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.diff-toc a { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--content-primary); text-decoration: none; }
.diff-toc a:hover .toc-path { text-decoration: underline; }
.toc-path { overflow-wrap: anywhere; font-size: 12.5px; }
.diff-kind { flex: none; display: inline-block; min-width: 64px; font-size: 12px; color: var(--content-secondary); }
.diff-kind-added { color: var(--ok-text); }
.diff-kind-removed { color: var(--bad); }
.diff-old { color: var(--content-secondary); }
.diff-arrow { color: var(--content-muted); }
.diff-file { position: relative; padding: 0; overflow: hidden; scroll-margin-top: 16px; }
.diff-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 110px 10px 12px; list-style: none; cursor: default; user-select: none; background: var(--fill-subtle); }
.diff-head::-webkit-details-marker { display: none; }
.diff-head:focus-visible { outline-offset: -2px; border-radius: var(--radius); }
details[open] > .diff-head { border-bottom: 1px solid var(--line); }
.diff-head .icon-chevron { color: var(--content-secondary); transition: transform 120ms; }
details:not([open]) > .diff-head .icon-chevron { transform: rotate(-90deg); }
.diff-head .diff-kind { min-width: 0; }
.diff-path { flex: 1 1 200px; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.diff-mode { font-size: 12px; color: var(--content-secondary); }
.diff-open { position: absolute; top: 6px; right: 8px; }
.diff-note { margin: 0; padding: 14px 16px; color: var(--content-secondary); font-size: 13px; max-width: none; }
.diff-scroll { overflow-x: auto; }
table.diff { width: 100%; min-width: max-content; border-collapse: collapse; font: 12.5px/20px var(--mono); font-variant-ligatures: none; tab-size: 4; }
table.diff td { padding: 0; border: 0; vertical-align: top; }
table.diff tbody tr:hover { background: none; }
.diff .dn { width: 1%; min-width: 44px; padding: 0 8px; text-align: right; color: var(--content-muted); user-select: none; -webkit-user-select: none; white-space: nowrap; }
.diff .dn::before { content: attr(data-n); }
.diff .dc { white-space: pre; padding: 0 16px 0 6px; }
.diff .sign { display: inline-block; width: 2ch; color: var(--content-muted); user-select: none; -webkit-user-select: none; }
.diff .da .dc { background: var(--diff-add); }
.diff .da .dn { background: var(--diff-add-num); color: var(--content-secondary); }
.diff .da .sign { color: var(--ok-text); }
.diff .dd .dc { background: var(--diff-del); }
.diff .dd .dn { background: var(--diff-del-num); color: var(--content-secondary); }
.diff .dd .sign { color: var(--bad); }
.diff .dh td { background: var(--surface-subtle); color: var(--content-secondary); padding-top: 4px; padding-bottom: 4px; }
.diff .dh .dc { padding-left: 12px; }
.diff .deol .dc { color: var(--content-muted); font-style: italic; }
.readme-name { display: flex; align-items: center; gap: 8px; }
.readme-name .icon { color: var(--content-muted); }

@media (max-width: 640px) {
  .code-toolbar { padding: 10px; }
  .toolbar-links { order: 3; flex-basis: 100%; margin-left: -4px; }
  .ref-btn { max-width: 190px; }
  .commit-strip { padding: 10px 12px; }
  .strip-msg { flex-basis: 100%; order: 3; white-space: normal; }
  .strip-meta { order: 4; flex: 1 1 100%; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
  .strip-meta .btn { margin-left: auto; }
  .files td { padding: 7px 12px; }
  .file-bar { padding: 8px 8px 8px 12px; }
  .file-meta .file-at { display: none; }
  .code .ln { width: 48px; padding-right: 12px; }
  .commit-row { flex-wrap: wrap; align-items: flex-start; padding: 12px; }
  .commit-row .avatar { margin-top: 2px; }
  .commit-main { flex-basis: calc(100% - 40px); }
  .commit-side { margin-left: 40px; flex-wrap: wrap; }
  .branch-row { flex-wrap: wrap; padding: 12px; }
  .branch-side { flex-wrap: wrap; }
  .commit-links { margin-left: 0; }
  .sha-copy pre { padding: 6px 72px 6px 10px; }
  .diff-head { padding-right: 96px; }
}
/* --- end of the code views block --- */

/* --- pull requests (docs/v2/pull-requests.md §7; ui/pulls.ts): the list, compare, a pull request's
   conversation, commits and files with review threads, the merge box. State is a glyph and a word;
   the one accent is the page's primary button. Threads under diff lines stay in view while the diff
   scrolls sideways (sticky inside the diff's own scroll box, sized to it with container units). */
.ref { font-family: var(--mono); font-size: 12.5px; padding: 1px 6px; border-radius: 6px; background: var(--surface-subtle); color: var(--content-primary); overflow-wrap: anywhere; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--surface-subtle); color: var(--content-secondary); font-size: 12px; font-weight: 500; }
.pr-state .glyph { flex: none; }
.pr-head { margin: 0 0 16px; }
.pr-head h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; margin: 0; overflow-wrap: anywhere; }
.pr-num { color: var(--content-secondary); font-weight: 400; }
.pr-byline { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 10px 0 0; color: var(--content-secondary); max-width: none; }
.pr-byline > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.pr-who strong { font-weight: 500; color: var(--content-primary); }
.pr-edit-title { margin-top: 8px; }
.pr-edit-title form { align-items: flex-end; }
.pr-edit-title .field { margin: 0; flex: 1 1 320px; }
.pr-tabs .count { margin-left: 8px; }

/* The list: state tabs and search on one row, then the rows. */
.pr-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.pr-filters .subnav { margin: 0; }
.pr-filters .subnav .count { margin-left: 6px; background: transparent; padding: 0; min-width: 0; }
.pr-search { display: flex; gap: 6px; align-items: center; flex: 0 1 340px; min-width: 0; }
.pr-search input { flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: var(--surface); color: var(--content-primary); font: inherit; font-size: 13px; box-shadow: inset 0 0 0 1px var(--line); }
.pr-search input:hover { box-shadow: inset 0 0 0 1px var(--content-muted); }
.pr-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; box-shadow: inset 0 0 0 1px var(--accent); }
.pr-list > li { align-items: flex-start; }
.pr-row-state { flex: none; padding-top: 1px; }
.pr-row-state .state-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pr-row .list-sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pr-comments { display: inline-flex; align-items: center; gap: 4px; }
.pr-empty { padding: 20px 24px; }
.pr-empty .empty-state { margin: 0; }
.recent-pushes { list-style: none; padding: 0; margin: 0 0 16px; max-width: none; display: flex; flex-direction: column; gap: 8px; }
.recent-pushes .tip-line { margin: 0; justify-content: space-between; }
.recent-pushes .tip-line > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.recent-pushes .icon { color: var(--content-secondary); }

/* Compare: into ← from, then the form, the commits and the diff. */
.compare-form { align-items: flex-end; }
.compare-form .field { max-width: 280px; }
.compare-arrow { color: var(--content-secondary); padding-bottom: 6px; }
.pr-new .field-wide { max-width: none; }
.pr-new textarea { min-height: 160px; }
.pr-reviewer-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; margin: 0 0 16px; }
.pr-reviewer-pick legend { grid-column: 1 / -1; }
.pr-commits > li { padding: 10px 24px; }
.pr-commits .list-title a { font-weight: 500; }

/* A pull request: the timeline beside the reviewers. */
.pr-split { grid-template-columns: minmax(0, 1fr) 280px; }
.pr-side .card { padding: 16px 20px; }
.timeline { list-style: none; padding: 0; margin: 0 0 16px; max-width: none; position: relative; }
.timeline > li { margin: 0 0 12px; max-width: none; }
.tl-event { display: flex; align-items: flex-start; gap: 10px; padding: 2px 0 2px 14px; color: var(--content-secondary); font-size: 13px; }
.tl-event p { margin: 0; min-width: 0; overflow-wrap: anywhere; max-width: none; }
.tl-event .tl-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--surface-subtle); color: var(--content-secondary); margin-top: -2px; }
.tl-event del, .tl-event ins { text-decoration: none; color: var(--content-primary); }
.tl-event del { text-decoration: line-through; color: var(--content-secondary); }
.comment-card, .review-card { margin: 0; }
.comment-head { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; margin: 0 0 10px; color: var(--content-secondary); font-size: 13px; }
.comment-head .av { margin-right: 2px; }
.review-state { margin-left: auto; font-size: 13px; }
.review-foot { margin-top: 12px; display: flex; justify-content: flex-end; }
.pr-description .markdown, .comment .markdown { font-size: 14px; }
.pr-description details.add { margin-top: 16px; }
.comment-edit { margin: 8px 0 0; font-size: 13px; }
.comment-edit > summary { color: var(--content-secondary); font-weight: 500; font-size: 13px; }
.comment-delete { margin-top: 8px; }

/* Threads: the file and line, the comments, the reply box and Resolve, all visible. */
.thread { margin: 12px 0 0; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 400 14px/1.5 var(--sans); white-space: normal; }
.comment-card > .thread:first-child { margin-top: 0; }
/* A thread that is a timeline item of its own: the card's surface, no ring inside a ring. */
.thread.thread-card { margin: 0; border-radius: var(--radius); box-shadow: var(--shadow-rest); }
.thread-head { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 13px; margin: 0 0 8px; }
.thread-path { font-size: 12.5px; overflow-wrap: anywhere; }
.thread-done > summary { list-style: none; cursor: default; display: flex; align-items: center; gap: 8px; }
.thread-done > summary::-webkit-details-marker { display: none; }
/* the disclosure's chevron, as every .add disclosure has: a resolved thread shows that it opens */
.thread-done > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--content-secondary); border-bottom: 1.5px solid var(--content-secondary); transform: rotate(-45deg); flex: none; margin: 0 2px; }
.thread-done[open] > summary::before { transform: rotate(45deg); }
.thread-done > summary .thread-head { margin: 0; flex: 1 1 auto; min-width: 0; }
.thread-done[open] > summary .thread-head { margin-bottom: 8px; }
.thread-line { margin: 0 0 10px; padding: 6px 10px; border-radius: 6px; background: var(--surface-subtle); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.thread-n { display: inline-block; min-width: 3ch; margin-right: 10px; color: var(--content-muted); user-select: none; -webkit-user-select: none; }
.thread-comments { list-style: none; padding: 0; margin: 0; max-width: none; }
.thread-comments > .comment { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); max-width: none; }
.thread-comments > .comment:first-child { border-top: 0; padding-top: 0; }
.thread-comments > .comment:last-child { padding-bottom: 0; }
.thread-comments .comment-head { margin-bottom: 6px; }
.thread-reply { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.thread-reply .field { margin-bottom: 8px; }
.thread-reply .field label { font-size: 13px; }
.thread-reply textarea { min-height: 56px; }
.thread-reply .actions { margin-top: 0; }
.thread-foot { display: flex; justify-content: flex-end; margin-top: 8px; }

/* The merge box: what passed, what blocks, the method and the button. */
.merge-box { margin-bottom: 16px; }
.mb-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.mb-head h2 { margin: 0; }
.mb-head .state-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mb-checks { list-style: none; padding: 0; margin: 0 0 12px; max-width: none; }
.mb-check { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; grid-template-areas: "state name link" ". desc desc"; align-items: center; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--line); margin: 0; }
.mb-check:first-child { border-top: 0; padding-top: 0; }
.mb-check > .state { grid-area: state; min-width: 112px; font-size: 13px; }
.mb-check-name { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
.mb-check-desc { grid-area: desc; }
.mb-check > a { grid-area: link; }
.mb-conflicts { grid-column: 2 / -1; list-style: none; padding: 0; margin: 4px 0 2px; max-width: none; font-size: 12.5px; }
.mb-conflicts li { margin: 0; padding: 2px 0; overflow-wrap: anywhere; }
.mb-blockers { margin: 0 0 12px; padding-left: 18px; color: var(--content-secondary); font-size: 13px; }
.merge-form { border-top: 1px solid var(--line); padding-top: 16px; }
.merge-form .field { max-width: 320px; }
.mb-why { list-style: none; padding: 0; margin: 4px 0 0; }
.mb-why li { margin: 0; }
.mb-message { margin: 0 0 4px; }
.mb-draft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.mb-draft p { margin: 0; }

.pr-reviewers > li { align-items: center; }
.pr-reviewers .person-where .state { font-size: 12.5px; }
.pr-add-reviewer { margin-top: 12px; display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.pr-add-reviewer .field { margin: 0; flex: 1 1 140px; min-width: 0; }
.pr-side .copy-block pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Files changed: line numbers are links to a line's comment form; threads sit under their lines. */
.pr-files-bar .row-between { margin-bottom: 6px; }
.diff-scroll { container-type: inline-size; }
.diff .dn-c::before { content: none; }
.diff .dn-c a { display: block; color: inherit; text-decoration: none; }
.diff .dn-c a:hover { color: var(--content-primary); text-decoration: underline; }
.diff .dn-c a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.diff tr.dthread > td { padding: 0; background: var(--fill-subtle); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.thread-box { position: sticky; left: 0; width: 100cqw; max-width: 100%; padding: 4px 12px 12px; white-space: normal; font: 400 14px/1.5 var(--sans); }
.diff-file .thread-outside { position: static; width: auto; padding: 4px 12px 12px; background: var(--fill-subtle); border-bottom: 1px solid var(--line); }
.inline-comment { margin: 12px 0 0; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.inline-comment .field { max-width: none; margin-bottom: 8px; }
.inline-comment .actions { margin-top: 0; }
.review-box .field-wide { max-width: none; }
.review-kinds { margin: 0 0 4px; }
.review-discard { margin-top: 12px; }

@media (max-width: 900px) {
  .pr-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pr-head h1 { font-size: 22px; }
  .pr-search { flex-basis: 100%; }
  .pr-filters .subnav { flex-wrap: wrap; }
  .tl-event { padding-left: 0; }
  .mb-check { grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "state link" "name name" "desc desc"; }
  .mb-check > .state { min-width: 0; }
  .mb-conflicts { grid-column: 1 / -1; }
  .compare-form .field { max-width: none; flex-basis: 100%; }
  .compare-arrow { display: none; }
  .pr-commits > li { padding: 10px 16px; }
  .thread { padding: 10px 12px; }
  /* the branches page: a branch's name and last commit on their own line, its links under them */
  .branch-main { flex-basis: 100%; }
  .branch-side { flex: 1 1 100%; min-width: 0; row-gap: 4px; }
  /* the author and time on their own line, under the title, without a leading dot */
  .branch-by { flex-basis: 100%; padding-left: 28px; }
  .branch-by::before { content: none; }
}
/* A pull request's Architecture tab (ui/pr-arch.ts): the Architecture page's diagram with the PR's marks.
   Added takes the one accent; removed is dashed, dimmed and struck through; changed has a heavier
   neutral ring. Each mark also says its word (in the box, the list and the legend), never color alone. */
.pr-arch-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pr-arch-sum { margin: 0; max-width: none; }
.pr-arch-legend { list-style: none; display: flex; gap: 14px; flex-wrap: wrap; margin: 0; padding: 0; font-size: 13px; color: var(--content-secondary); }
.pr-arch-legend li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pr-arch-key { width: 14px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--content-muted); background: var(--surface); }
.pr-arch-key.k-added { background: var(--accent-fill); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pr-arch-key.k-changed { box-shadow: inset 0 0 0 2px var(--content-primary); }
.pr-arch-key.k-removed { background: transparent; box-shadow: none; border: 1px dashed var(--content-muted); }
.arch-node.d-added rect { fill: var(--accent-fill); stroke: var(--accent); stroke-width: 1.5; }
.arch-node.d-added .arch-kind { fill: var(--accent); }
.arch-node.d-changed rect { stroke: var(--content-primary); stroke-width: 2; }
.arch-node.d-removed { opacity: 0.55; }
.arch-node.d-removed rect { stroke-dasharray: 4 3; fill: var(--page); }
.arch-node.d-removed .arch-id { text-decoration: line-through; }
.arch-node.sel rect { stroke-width: 2.5; }
.arch-edge.d-added { stroke: var(--accent); stroke-width: 1.5; }
.arch-edge.d-changed { stroke: var(--content-primary); stroke-width: 1.25; }
.arch-edge.d-removed { stroke-dasharray: 4 3; opacity: 0.5; }
.arch-label.d-added { fill: var(--accent); }
.arch-label.d-removed { opacity: 0.5; text-decoration: line-through; }
.pr-arch-lines { list-style: none; padding: 0; margin: 0; max-width: none; }
.pr-arch-lines li { margin: 0; padding: 4px 0; border-top: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
.pr-arch-lines li:first-child { border-top: 0; }
.pr-arch-lines .l-removed .mono { color: var(--content-secondary); }
.pr-arch-changes { margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.pr-kb-list > li { padding: 10px 24px; }
.pr-kb-none { padding: 0 24px 16px; }
@media (max-width: 640px) {
  .pr-kb-list > li { padding: 10px 16px; }
}
/* Files changed's Code / Visual switch (ui/pulls.ts): a segmented control of two links, 28px high,
   the current one a white segment with the resting ring on a subtle track (no accent: the diagram's
   "added" is the view's one accent). The other pane is hidden; code.js switches in place. */
.pr-files-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--line); }
.seg > a { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 6px; color: var(--content-secondary); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.seg > a:hover { color: var(--content-primary); }
.seg > a[aria-current] { background: var(--surface); color: var(--content-primary); box-shadow: var(--shadow-rest); }
.seg > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
[data-diff-pane][hidden] { display: none !important; }
/* The Visual view (ui/pr-arch.ts): the diagram picker, then the chosen diagram with the marks above. */
.pr-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 16px; }
.pr-pick-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.pr-pick-head { font-size: 13px; color: var(--content-secondary); }
.pr-pick-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; max-width: none; }
.pr-pick-list li { margin: 0; min-width: 0; }
.pr-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 0 10px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--content-primary); font-size: 13px; text-decoration: none; }
.pr-chip:hover { background: var(--fill-subtle); }
.pr-chip[aria-current] { background: var(--fill-subtle); box-shadow: inset 0 0 0 1.5px var(--content-primary); }
.pr-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-chip-mark { color: var(--content-secondary); font-size: 12px; }
.pr-chip.s-removed .pr-chip-name { text-decoration: line-through; color: var(--content-secondary); }
.pr-arch-what { min-width: 0; }
.pr-arch-what h2 { font-size: 16px; margin: 0 0 2px; }
.pr-arch-desc { margin: 0; padding: 10px 16px 0; max-width: 80ch; }
.arch-head.strong { fill: var(--content-primary); }
/* A dataflow: lifelines under the participants, numbered rows of arrows. */
.flow-life { stroke: var(--line); stroke-width: 1; }
.flow-life.d-added { stroke: var(--accent); opacity: 0.5; }
.flow-life.d-removed { stroke-dasharray: 3 3; }
.flow-arrow { stroke-width: 1.25; }
.flow-arrow.d-changed { stroke-width: 2; }
.flow-arrow.d-added { stroke-width: 1.75; }
.flow-ghost { stroke-width: 1; }
.flow-label { font-size: 11px; fill: var(--content-primary); }
.flow-label.d-same { fill: var(--content-secondary); }
.flow-num circle { fill: var(--surface); stroke: var(--content-muted); stroke-width: 1; }
.flow-num text { fill: var(--content-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.flow-num.d-added circle { fill: var(--accent-fill); stroke: var(--accent); stroke-width: 1.5; }
.flow-num.d-added text { fill: var(--accent); }
.flow-num.d-changed circle { stroke: var(--content-primary); stroke-width: 2; }
.flow-num.d-changed text { fill: var(--content-primary); }
.flow-num.d-removed circle { stroke-dasharray: 3 2; fill: var(--page); }
.flow-step.d-removed { opacity: 0.6; }
.pr-flow-steps { list-style: none; padding: 0; margin: 0; max-width: none; }
.pr-flow-step { display: flex; gap: 12px; align-items: baseline; margin: 0; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.pr-flow-step:first-child { border-top: 0; }
.pr-flow-n { flex: 0 0 20px; text-align: right; color: var(--content-secondary); }
.pr-flow-body { min-width: 0; overflow-wrap: anywhere; }
.pr-flow-route { margin-right: 4px; }
.pr-flow-step.l-added .pr-flow-n { color: var(--accent); }
.pr-flow-step.l-removed .pr-flow-route, .pr-flow-step.l-removed .pr-flow-label { text-decoration: line-through; color: var(--content-secondary); }
/* --- end of the pull requests block --- */