/* gitbay stylesheet — Harbor: black and white ground, two accents with
   separate jobs. Blue is what you can do (links, buttons, focus); orange
   is where you are and what wants you (active nav, counts, pending state,
   unverified signatures). Orange is never a button, so the two never
   compete. One file, light and dark via prefers-color-scheme. Tokens
   first; components use tokens only. No external requests: Atkinson
   Hyperlegible is served from this origin. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/atkinson-next-roman.woff2) format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/atkinson-next-italic.woff2) format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/static/fonts/atkinson-mono-roman.woff2) format("woff2");
}

:root {
  /* declare native light+dark support: correct form controls and
     scrollbars per scheme, and opt out of browser auto-darkening */
  color-scheme: light dark;

  /* ground and ink */
  --bg: #ffffff;
  --fg: #0d0d0d;
  --muted: #595959;          /* 7.00:1 on white */
  --faint: #eaeaea;          /* hairlines, row separators */
  --line: #d4d4d4;           /* control borders, table edges */
  --surface: #ffffff;
  --hover: #f5f5f5;
  --code-bg: #f5f5f5;
  --fill-subtle: #ececec;    /* hunk headers, summary hover */
  --diff-add: #e4f6ea;       /* row grounds: tinted enough to scan, light
                                enough that syntax colors stay legible */
  --diff-del: #fdeaea;

  /* blue: what you can do */
  --accent: #0000f0;         /* links, focus — 9.30:1 on white */
  --accent-fg: #ffffff;
  --fill: #0000f0;           /* button grounds; white on it is 9.30:1 */

  /* orange: where you are, what wants you */
  --mark: #e4572e;           /* bars and underlines — non-text, 3.0 bar */
  --warn: #c2410c;           /* the same orange at text size — 5.18:1 */

  /* semantic */
  --ok: #0a7d3c;
  --bad: #c62828;
  --done: #6b21a8;           /* merged */
  --neutral: #595959;

  /* the rail is black in both schemes: the one brand constant */
  --shell-bg: #000000;
  --shell-fg: #f2f2f2;
  --shell-muted: #8f8f8f;
  --shell-line: #1c1c1c;
  --shell-hover: #141414;
  --shell-mark: #ff6b3d;     /* 7.42:1 on black, both schemes */

  /* type */
  --sans: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono",
          SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-0: 0.78rem;
  --fs-1: 0.85rem;
  --fs-2: 0.92rem;
  --fs-3: 1rem;
  --fs-4: 1.2rem;
  --fs-5: 1.6rem;

  /* spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2.5rem;

  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23595959' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* radii: 2px everywhere — chart plates, not pills */
  --r-sm: 2px;
  --r-md: 2px;
  --r-lg: 2px;
  --r-pill: 2px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --fg: #f2f2f2;
    --muted: #a1a1a1;        /* 7.66:1 on #0a0a0a */
    --faint: #1c1c1c;
    --line: #2e2e2e;
    --surface: #0f0f0f;
    --hover: #161616;
    --code-bg: #050505;
    --fill-subtle: #161616;
    --diff-add: #0d2a18;
    --diff-del: #2c1113;
    --accent: #5b6bff;       /* 4.71:1 — pure #0000f0 is 2.13:1 here */
    --accent-fg: #ffffff;
    --fill: #0000f0;         /* fills stay pure; white on it clears 9:1 */
    --mark: #ff6b3d;
    --warn: #ff6b3d;
    --ok: #3fce7a;
    --bad: #ff6b6b;
    --done: #c084fc;
    --neutral: #a1a1a1;
    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a1a1a1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

* { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--fs-3)/1.6 var(--sans);
  min-height: 100vh;
}

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

/* one authored focus ring, so keyboard position is never the browser's
   guess. Blue, because focus is an interactive state. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}
/* the shell is black in both schemes, and --accent is a dark blue in the
   light one — a ring nobody could see. The shell's own mark clears 7:1 on
   black either way. */
.rail :focus-visible { outline-color: var(--shell-mark); }

/* visually hidden, still read aloud: for headings a sighted reader gets
   from the layout but a screen reader would otherwise miss */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
/* the rail runs ahead of the content in source order, so give keyboard
   and screen-reader users a way past it */
a.skip {
  position: absolute;
  left: var(--sp-3); top: -3rem;
  z-index: 50;
  background: var(--fill);
  color: #ffffff;
  padding: var(--sp-2) var(--sp-4);
  font-weight: 600;
}
a.skip:focus { top: var(--sp-3); text-decoration: none; }

h1 { font-size: var(--fs-5); font-weight: 700; line-height: 1.18;
     margin: 0 0 var(--sp-3); letter-spacing: -0.025em; text-wrap: balance; }
h2 { font-size: var(--fs-4); font-weight: 700; line-height: 1.3;
     margin: var(--sp-5) 0 var(--sp-3); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-3); font-weight: 600; margin: var(--sp-5) 0 var(--sp-2); }

code, pre, .code, td.mode, td.size {
  font-family: var(--mono);
  font-size: var(--fs-1);
}

/* ---- shell: black rail, content pane ---- */
.shell { display: flex; align-items: stretch; min-height: 100vh; }

.rail {
  flex: none;
  width: 13rem;
  background: var(--shell-bg);
  color: var(--shell-fg);
  border-right: 1px solid var(--shell-line);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
a.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  color: var(--shell-fg);
  font-weight: 700;
  font-size: var(--fs-3);
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--shell-line);
}
a.brand:hover { text-decoration: none; color: #ffffff; }
a.brand svg.mark { display: block; flex: none; }
a.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.railbody { flex: 1; overflow-y: auto; padding: var(--sp-3) 0; }
ul.raillist { list-style: none; margin: 0; padding: 0; }
ul.raillist a {
  display: block;
  padding: 0.28rem var(--sp-4);
  color: var(--shell-fg);
  font-size: var(--fs-2);
  border-left: 3px solid transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
ul.raillist a:hover { background: var(--shell-hover); text-decoration: none; }
/* orange marks position — the rail's only accent */
ul.raillist a[aria-current] {
  border-left-color: var(--shell-mark);
  background: var(--shell-hover);
  font-weight: 600;
}
ul.raillist .owner { color: var(--shell-muted); }
ul.raillist.wide a { white-space: normal; padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
ul.raillist.wide b { display: block; font-weight: 500; font-size: var(--fs-1); }
ul.raillist.wide .owner { font-size: var(--fs-0); }

.raillabel {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-1);
  padding: 0 var(--sp-4);
  font-family: var(--mono);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--shell-muted);
}
.raillabel .count {
  font-family: var(--sans);
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: 0;
  background: var(--shell-mark);
  color: #000000;
  padding: 0 0.35rem;
  border-radius: var(--r-sm);
}
/* pinned above the account cell: always reachable, never scrolled away */
.railpinned {
  flex: none;
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--shell-line);
}
.railfoot {
  flex: none;
  border-top: 1px solid var(--shell-line);
  /* same vertical rhythm as the page footer, so the two rules line up
     when the page is scrolled to the bottom; horizontal padding stays on
     the rail's own grid so the avatar aligns with the nav items above */
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-2);
  line-height: 1.4;
}
.railfoot a { color: var(--shell-fg); }
a.railuser { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* a descendant cannot cancel an ancestor's underline, so the link carries
   none and the name draws its own — the avatar square stays undecorated */
a.railuser:hover { text-decoration: none; }
a.railuser:hover .uname { text-decoration: underline; }
.railfoot .railsettings { color: var(--shell-muted); display: inline-flex; }
.railfoot .railsettings:hover { color: var(--shell-fg); }
.railfoot form { margin-left: auto; }
.railfoot .linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--shell-muted); font: inherit; text-decoration: underline;
}
.railfoot .linklike:hover { color: var(--shell-fg); }
.avatar {
  width: 1.4rem; height: 1.4rem; flex: none;
  display: inline-grid; place-items: center;
  background: var(--fill);
  color: #ffffff;
  font-size: var(--fs-0);
  font-weight: 700;
  border-radius: var(--r-sm);
}

.pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content {
  flex: 1;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  width: 100%;
}

/* ---- repo header: identity and tabs on every page, the rest once ---- */
.repohead {
  padding: var(--sp-4) var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
}
.repohead .identity { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.repohead .identity .grow { flex: 1; }
/* h1 on the repo home, p elsewhere so each page keeps its own h1 — but
   identical in size, because the tabs sit below this and navigation must
   not move when you use it */
.repotitle {
  margin: 0;
  font-size: var(--fs-4);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.repotitle a { color: var(--fg); }
.repotitle a.owner { color: var(--muted); font-weight: 400; }
.repotitle a:hover { color: var(--accent); text-decoration: none; }
.repotitle .sep { color: var(--muted); margin: 0 0.12em; font-weight: 400; }
.repodesc { margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-2); max-width: 62ch; }
.repometa { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-1); }
.repohead .topics { margin: var(--sp-2) 0 0; }

button.btn {
  font: inherit;
  font-size: var(--fs-1);
  font-weight: 600;
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
}
button.btn:hover { border-color: var(--accent); color: var(--accent); }
button.btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
form.inline { display: inline; }

nav.tabs {
  display: flex;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
  overflow-x: auto;
  /* with overflow-y left visible the browser computes it to auto, which
     is a vertical drag on touch; the strip scrolls sideways only. */
  overflow-y: hidden;
  scrollbar-width: none;
}
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) 0.6rem;
  color: var(--muted);
  font-size: var(--fs-2);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
nav.tabs a:hover { color: var(--fg); text-decoration: none; }
/* orange marks position here too */
nav.tabs a[aria-current] {
  color: var(--fg);
  font-weight: 700;
  border-bottom-color: var(--mark);
}
nav.tabs a i {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--fs-0);
  background: var(--hover);
  border-radius: var(--r-sm);
  padding: 0 0.35rem;
}

/* ---- mobile: the rail becomes a single strip, not a wall of links ---- */
@media (max-width: 52rem) {
  .shell { display: block; }
  .rail {
    width: auto;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
    border-right: 0;
    border-bottom: 1px solid var(--shell-line);
    overflow-x: auto;
  }
  a.brand { border-bottom: 0; padding-right: var(--sp-2); }
  .railbody { flex: 1; overflow: visible; padding: 0; display: flex; align-items: center; }
  /* pinned repos and the review queue both live on the dashboard, so the
     strip keeps only what has nowhere else to go */
  .railgroup { display: none; }
  ul.raillist { display: flex; }
  ul.raillist a { border-left: 0; border-bottom: 2px solid transparent; padding: var(--sp-2) var(--sp-3); }
  ul.raillist a[aria-current] { border-left: 0; border-bottom-color: var(--shell-mark); }
  /* the rail is a horizontal strip here: keep the account cell compact */
  .railfoot { border-top: 0; padding: var(--sp-2); }
  .railpinned { border-top: 0; padding: 0; }
  .content { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
  .repohead { padding: var(--sp-3) var(--sp-4) 0; }
}

/* tables */
table { border-collapse: collapse; width: 100%; }
td {
  padding: var(--sp-2) var(--sp-4) var(--sp-2) 0;
  border-bottom: 1px solid var(--faint);
  vertical-align: top;
  font-size: var(--fs-2);
}
td:last-child { padding-right: 0; }
td.size, td.mode { color: var(--muted); white-space: nowrap; }

/* path bar on tree and blob pages */
.pathbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-3) 0;
  font-size: var(--fs-2);
}
.pathbar .spacer { flex: 1; }
.refchip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--faint);
  border-radius: var(--r-md);
  padding: 0.1rem 0.55rem;
  font-family: var(--mono);
  font-size: var(--fs-1);
  color: var(--fg);
}
.pathbar .crumbs strong { color: var(--fg); }
details.refmenu { position: relative; }
details.refmenu summary { cursor: pointer; list-style: none; }
details.refmenu summary::-webkit-details-marker { display: none; }
details.refmenu summary::after { content: " ▾"; color: var(--muted); }
details.refmenu .refdrop {
  position: absolute;
  z-index: 10;
  top: calc(100% + 4px);
  left: 0;
  min-width: 12rem;
  max-height: 20rem;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: var(--sp-1) 0;
}
details.refmenu .refdrop a {
  display: block;
  padding: var(--sp-1) var(--sp-3);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-1);
}
details.refmenu .refdrop a:hover { background: var(--hover); text-decoration: none; }
details.refmenu .refdrop a.allrefs { color: var(--accent); font-family: var(--sans); border-top: 1px solid var(--faint); margin-top: var(--sp-1); }

/* file and refs tables: bordered cards, rows inside */
/* wide listings scroll inside their own box; the page never does */
.tablewrap { overflow-x: auto; max-width: 100%; }

table.tree, table.refs {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
table.tree td, table.refs td {
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--faint);
}
table.tree tr:last-child td, table.refs tr:last-child td { border-bottom: none; }
table.tree tr:hover td, table.refs tr:hover td { background: var(--hover); }
tr.cols th {
  text-align: left;
  font-weight: 500;
  font-size: var(--fs-1);
  color: var(--muted);
  padding: var(--sp-1) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
tr.cols:hover th { background: var(--bg); }
/* right-aligned columns keep their header with their values; this needs to
   outrank the tr.cols th rule above, which is why it names both */
tr.cols th.age, tr.cols th.size { text-align: right; }
table.tree th.size { text-align: right; }
table.tree td.name { width: 100%; }
table.tree td.name a { color: var(--fg); }
table.tree td.name a:hover { color: var(--accent); }
table.tree td.size { text-align: right; }
table.tree td.empty, table.refs td.empty, li.empty, ul.loglist li.empty { color: var(--muted); }

/* refs page */
table.refs td.name { width: 100%; }
table.refs td.sha { color: var(--muted); }

/* card header (README) */
.cardhead {
  font-family: var(--mono);
  font-size: var(--fs-1);
  color: var(--muted);
  border-bottom: 1px solid var(--faint);
  margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)) var(--sp-4);
  padding: var(--sp-2) var(--sp-5);
  background: var(--bg);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* log */
ul.loglist {
  list-style: none;
  margin: var(--sp-3) 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
ul.loglist li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--faint);
}
ul.loglist li:last-child { border-bottom: none; }
ul.loglist li:hover { background: var(--hover); }
ul.loglist .commitmain { flex: 1; min-width: 0; }
ul.loglist p { margin: 0; }
ul.loglist .subject a { color: var(--fg); font-weight: 550; }
ul.loglist .subject a:hover { color: var(--accent); }
ul.loglist .commitside {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  white-space: nowrap;
}
p.pager { margin-top: var(--sp-4); }

/* commit page */
.commithead p { margin: var(--sp-1) 0; }
.commithead h2 { margin-bottom: var(--sp-1); }
code.fullsha { color: var(--muted); overflow-wrap: anywhere; }
.empty-note { color: var(--muted); }
.crumbs { color: var(--muted); font-size: var(--fs-2); }
.desc, td.desc { color: var(--muted); }
.error {
  color: var(--fg);
  border: 1px solid var(--bad);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
}
/* settings: one row per control, label then input then its own button */
form.setform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--faint);
}
form.setform label { min-width: 12rem; color: var(--muted); font-size: var(--fs-2); }
form.setform input[type="text"], form.setform select { flex: 1 1 16rem; }
form.setform input[type="number"] { width: 5rem; }
ul.protlist { list-style: none; padding: 0; margin: var(--sp-2) 0; }
ul.protlist li { padding: var(--sp-1) 0; display: flex; gap: var(--sp-3); align-items: baseline; }

/* branch picker on the new merge request form */
p.branchpick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
p.branchpick label { color: var(--muted); font-size: var(--fs-2); }
p.branchpick select { flex: 1 1 12rem; }

/* merge request actions in the aside: stacked controls, full width */
.aside form.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.aside form.actions button { flex: 1 1 auto; }
.aside form.actions select { width: 100%; }
form.threadact { margin: var(--sp-1) 0 0; padding: 0 var(--sp-3) var(--sp-2); }

.meta { color: var(--muted); font-size: var(--fs-1); }
svg.icon { vertical-align: -0.125em; }
.lede { font-size: var(--fs-3); margin: var(--sp-2) 0; }

/* repo listings (explore, owner pages, dashboard): one row per repo */
ul.repolist {
  list-style: none;
  margin: var(--sp-3) 0 var(--sp-5);
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
ul.repolist li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--faint); }
/* pinned repos: a compact wrap of name pills, no description or meta */
ul.pinlist {
  list-style: none;
  margin: var(--sp-3) 0 var(--sp-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
ul.pinlist li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-3);
}
ul.pinlist li:hover { background: var(--hover); }
ul.pinlist li a { color: var(--fg); }
ul.pinlist li a:hover { color: var(--accent); text-decoration: none; }
ul.pinlist .sep { color: var(--muted); margin: 0 0.15em; }
ul.repolist li:last-child { border-bottom: none; }
ul.repolist li:hover { background: var(--hover); }
ul.repolist li.empty { color: var(--muted); }
ul.repolist p { margin: 0; }
ul.repolist .reponame { font-size: var(--fs-3); }
ul.repolist .reponame a { color: var(--fg); }
ul.repolist .reponame a strong { color: var(--accent); font-weight: 600; }
ul.repolist .reponame .sep { color: var(--muted); margin: 0 0.1em; }
ul.repolist .desc { margin-top: 0.1rem; }
ul.repolist .topics { margin-top: var(--sp-1); }
ul.repolist .meta { margin-top: var(--sp-1); }

/* owner profile header */
.profilehead {
  border-bottom: 1px solid var(--faint);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.profilehead h1 { margin: var(--sp-4) 0 var(--sp-1); }
.profilehead .lede { margin: 0 0 var(--sp-1); }
.profilehead .meta { margin: var(--sp-1) 0 0; }
h2 .count { color: var(--muted); font-weight: 400; font-size: var(--fs-2); }

/* activity graph: 53 week columns x 7 day rows, accent-tinted levels */
.actgraph-scroll { overflow-x: auto; padding-bottom: var(--sp-1); }
.actgraph { display: flex; gap: 3px; width: max-content; }
.actweek { display: flex; flex-direction: column; gap: 3px; }
.actday {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--faint);
}
.actday.pad { background: transparent; }
.actday.l1 { background: color-mix(in srgb, var(--accent) 25%, var(--bg)); }
.actday.l2 { background: color-mix(in srgb, var(--accent) 50%, var(--bg)); }
.actday.l3 { background: color-mix(in srgb, var(--accent) 75%, var(--bg)); }
.actday.l4 { background: var(--accent); }

/* heading row with actions on the right */
.headrow {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.headrow .spacer { flex: 1; }

/* member and org chips on owner pages */
a.memberchip {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.05rem 0.6rem;
  color: var(--fg);
  font-size: var(--fs-1);
  margin: 0 0.15rem 0.15rem 0;
}
a.memberchip:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
a.memberchip .role { color: var(--muted); }

/* landing page */
.landing { max-width: 44rem; padding: var(--sp-6) 0; }
.landing h1 { font-size: 1.8rem; margin-bottom: var(--sp-3); }
.landing .lede { font-size: var(--fs-4); color: var(--muted); line-height: 1.7; margin: 0 0 var(--sp-4); }
pre.quickstart {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  overflow-x: auto;
  margin: 0 0 var(--sp-4);
}
.landing .explorelink { font-weight: 550; }

/* index toolbar */
p.toolbar { color: var(--muted); font-size: var(--fs-2); margin-top: var(--sp-4); }
form.inline { display: inline; }
button.linklike {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  font: inherit;
  font-size: var(--fs-2);
  cursor: pointer;
}
button.linklike:hover { text-decoration: underline; filter: none; }

/* cards: README, comments */
.readme, .code {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
  overflow-x: auto;
}
/* Highlighting is class-based with a palette per scheme, so code blocks
   follow the site's own colors. */
.code { background: var(--code-bg); color: var(--fg); padding: var(--sp-3) var(--sp-4); border-color: var(--line); }
.code pre { margin: 0; background: transparent !important; }
@media (prefers-color-scheme: dark) {
  .code { border-color: var(--line); }
}

/* rendered markdown / org / html */
.rendered { max-width: 100%; overflow-wrap: anywhere; }
/* line length is a reading constraint, so it applies to prose only —
   tables, code blocks and images keep the full column */
.rendered > p,
.rendered > ul,
.rendered > ol,
.rendered > blockquote { max-width: 78ch; }
.rendered pre {
  background: var(--code-bg);
  border: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.rendered code {
  background: var(--code-bg);
  border: 1px solid var(--line);
  padding: 0.05rem 0.3rem;
  border-radius: var(--r-sm);
}
.rendered pre code { background: transparent; border: none; padding: 0; }
.rendered blockquote {
  border-left: 3px solid var(--line);
  margin-left: 0;
  padding-left: var(--sp-4);
  color: var(--muted);
}
.rendered img { max-width: 100%; }
.rendered h1, .rendered h2 { border-bottom: 1px solid var(--faint); padding-bottom: var(--sp-1); }
.rendered table {
  border-collapse: collapse;
  margin: var(--sp-3) 0;
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.rendered th, .rendered td {
  border: 1px solid var(--line);
  padding: var(--sp-1) var(--sp-3);
  text-align: left;
  overflow-wrap: normal; /* scroll the table, don't shatter words */
}
.rendered th { background: var(--surface); font-weight: 600; }
.blobimage { text-align: center; }
.blobimage img {
  max-width: 100%;
  border: 1px solid var(--faint);
  border-radius: var(--r-md);
  background: var(--surface);
}

pre.message {
  background: var(--code-bg);
  border: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* repo facts: the counts a visitor sizes a project up with */
.teambody { padding: var(--sp-3); background: var(--bg); }
.teambody .memberchip { margin-right: var(--sp-2); }

form.logfilter {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-4); flex-wrap: wrap;
}
form.logfilter input { flex: 1; min-width: 12rem; max-width: 28rem; }

/* account settings */
table.keys td { padding: var(--sp-2) var(--sp-4) var(--sp-2) 0; }
/* these tables sit flush with the page text, so the header row drops the
   left padding the card-style listings use */
table.keys tr.cols th { padding-left: 0; background: transparent; }
table.keys td.mono, .mono { font-family: var(--mono); font-size: var(--fs-1); overflow-wrap: anywhere; }
table.keys td.act { text-align: right; }
ul.plain { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
ul.plain li { padding: var(--sp-1) 0; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
form.setform.stack { display: block; }
form.setform.stack textarea, form.setform.stack select { width: 100%; max-width: 48rem; display: block; margin-bottom: var(--sp-2); }
p.notice {
  border-left: 3px solid var(--ok);
  background: var(--hover);
  padding: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.facts { margin: 0 0 var(--sp-4); }
.facts .counts {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
  margin: 0 0 var(--sp-3); font-size: var(--fs-2);
}
.facts .counts a { color: var(--fg); text-decoration: none; }
.facts .counts a:hover { color: var(--accent); text-decoration: underline; }
.facts .counts .fact { color: var(--muted); }
.facts .counts strong { font-weight: 600; }

.langbar {
  display: flex; height: 0.5rem; margin: 0 0 var(--sp-2);
  border-radius: var(--r-sm); overflow: hidden; background: var(--faint);
}
.langbar .lang { display: block; min-width: 2px; }
.langs {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
  margin: 0 0 var(--sp-3); font-size: var(--fs-1);
}
.langs .lang-name { display: inline-flex; align-items: center; gap: var(--sp-1); }
.langs .muted { color: var(--muted); }
.langs .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; }
/* named where it reads as the language's own color, neutral otherwise */
.lang { background: var(--neutral); }
.lang-go { background: #00add8; }
.lang-rust { background: #dea584; }
.lang-c, .lang-c- { background: #555555; }
.lang-python { background: #3572a5; }
.lang-javascript { background: #f1e05a; }
.lang-typescript { background: #3178c6; }
.lang-shell { background: #89e051; }
.lang-ruby { background: #701516; }
.lang-java { background: #b07219; }
.lang-swift { background: #f05138; }
.lang-html { background: #e34c26; }
.lang-css { background: #563d7c; }
.lang-org { background: #77aa99; }
.lang-markdown { background: #083fa1; }
.lang-emacs-lisp { background: #c065db; }
.lang-nix { background: #7e7eff; }
.lang-sql { background: #e38c00; }

.contribs {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-1);
}
.contribs .label { color: var(--muted); }

/* diffs: one foldable section per file, a table so the line-number
   gutters stay put while the code scrolls */
details.difffold {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: 0 0 var(--sp-3);
  background: var(--code-bg);
}
details.difffold summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  list-style: none;
  font-size: var(--fs-2);
}
details.difffold[open] summary { border-bottom: 1px solid var(--line); }
details.difffold summary::-webkit-details-marker { display: none; }
/* flex summaries lose the native disclosure marker; draw our own */
details.difffold summary::before { content: "\25b8"; color: var(--muted); }
details.difffold[open] summary::before { content: "\25be"; }
details.difffold summary:hover { background: var(--fill-subtle); }
summary .fpath { font-family: var(--mono); overflow-wrap: anywhere; }
summary .fpath .was { color: var(--muted); }
summary .fstat { margin-left: auto; font-family: var(--mono); white-space: nowrap; }
details.difffold summary .add { color: var(--ok); }
details.difffold summary .del { color: var(--bad); }
details.difffold > .none { padding: var(--sp-3); margin: 0; }
details.difffold .tablewrap { border-radius: 0 0 var(--r-md) var(--r-md); }

table.difftable {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--mono);
  font-size: var(--fs-1);
  line-height: 1.5;
}
table.difftable td {
  border: 0;
  padding: 0;
  vertical-align: top;
  font-size: inherit;
}
table.difftable td.ln {
  width: 1%;
  min-width: 2.5rem;
  padding: 0 var(--sp-2);
  text-align: right;
  color: var(--muted);
  user-select: none;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
/* not .code: that class is the blob/code-block style and carries its own
   background, which painted over every row tint */
table.difftable td.src {
  padding: 0 var(--sp-3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* the marker is decoration, so it lives in CSS and stays out of a copied
   selection */
table.difftable tr.add td.src::before { content: "+"; color: var(--ok); }
table.difftable tr.del td.src::before { content: "\2212"; color: var(--bad); }
table.difftable tr.ctx td.src::before { content: " "; }
table.difftable tr.add { background: var(--diff-add); }
table.difftable tr.del { background: var(--diff-del); }
table.difftable tr.hunk td, table.difftable tr.dmeta td {
  color: var(--muted);
  padding: var(--sp-1) var(--sp-3);
  background: var(--fill-subtle);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
table.difftable tr.hunk td.src { color: var(--accent); }
table.difftable tr.threadrow td { padding: var(--sp-2) var(--sp-3); background: var(--bg); }

/* badges: signature and check states. Semantic colors stay distinct:
   green verified/success, amber pending/stale, red bad/failure, muted
   unsigned. */
.badge, .chip {
  --chip: var(--neutral);
  display: inline-block;
  padding: 0.05rem 0.55rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-0);
  font-weight: 500;
  line-height: 1.5;
  color: var(--chip);
  border: 1px solid color-mix(in srgb, var(--chip) 35%, transparent);
  background: color-mix(in srgb, var(--chip) 7%, transparent);
  white-space: nowrap;
  vertical-align: middle;
}
.chip-open { --chip: var(--ok); }
.chip-closed { --chip: var(--bad); }
.chip-merged, .chip-done { --chip: var(--done); }
.chip-neutral, .chip-source_gone { --chip: var(--neutral); }
.chip-stale { --chip: var(--warn); }
.chip.label { font-weight: 500; }
.chip.topic { --chip: var(--accent); }
.repohead .topics { margin: 0 0 var(--sp-2); }
.repohead .mirrorline { margin: 0 0 var(--sp-2); }
.mirrorerr { color: var(--bad); }
.badge-verified { --chip: var(--ok); }
.badge-unsigned { --chip: var(--neutral); }
.badge-signed_unknown_key { --chip: var(--warn); }
.badge-signed_email_mismatch { --chip: var(--bad); }
.badge-signed_key_expired { --chip: var(--warn); }
.badge-signed_key_revoked { --chip: var(--bad); }
.badge-bad_signature { --chip: var(--bad); }
.badge.check-success { --chip: var(--ok); }
.badge.check-pending { --chip: var(--warn); }
.badge.check-failure, .badge.check-error { --chip: var(--bad); }
.badge.check-running, .chip.check-running { --chip: var(--warn); }
.chip.check-success { --chip: var(--ok); }
.chip.check-pending { --chip: var(--warn); }
.chip.check-failure { --chip: var(--bad); }
pre.buildlog { max-height: 40rem; overflow: auto; }
span.check-success { color: var(--ok); }
span.check-pending { color: var(--warn); }
span.check-failure, span.check-error { color: var(--bad); }

/* issue and MR listings */
.listhead {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.listhead h2 { margin-bottom: var(--sp-2); }
nav.filters { display: flex; gap: var(--sp-1); }
nav.filters a {
  color: var(--muted);
  font-size: var(--fs-2);
  padding: 0.05rem var(--sp-2);
  border-radius: var(--r-pill);
}
nav.filters a:hover { color: var(--fg); background: var(--hover); text-decoration: none; }
nav.filters a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

ul.issuelist {
  list-style: none;
  margin: var(--sp-2) 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
ul.issuelist li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--faint);
}
ul.issuelist li:last-child { border-bottom: none; }
ul.issuelist li:hover { background: var(--hover); }
ul.issuelist li.empty { display: block; color: var(--muted); }
ul.issuelist .issuemain { flex: 1; min-width: 0; }
ul.issuelist p { margin: 0; }
ul.issuelist .title a { color: var(--fg); font-weight: 550; }
ul.issuelist .title a:hover { color: var(--accent); }

/* releases */
article.release {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
}
.releasehead { background: none; border: 0; padding: 0; }
.releasehead h3 { margin: 0 0 var(--sp-1); }
.releasehead .meta { margin: 0 0 var(--sp-2); }
table.assets { margin-top: var(--sp-2); }
table.assets td.size { color: var(--muted); white-space: nowrap; text-align: right; }
table.assets td.name { width: 100%; font-family: var(--mono); font-size: var(--fs-1); }

/* milestones */
ul.milestonelist {
  list-style: none;
  margin: var(--sp-2) 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
ul.milestonelist li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--faint); }
ul.milestonelist li:last-child { border-bottom: none; }
ul.milestonelist li.empty { color: var(--muted); }
ul.milestonelist p { margin: 0; }
ul.milestonelist .title { font-weight: 550; }
.progress {
  height: 6px;
  background: var(--faint);
  border-radius: var(--r-pill);
  margin-top: var(--sp-2);
  overflow: hidden;
  max-width: 24rem;
}
.progress .bar { height: 100%; background: var(--ok); }
.listhead .spacer { flex: 1; }

/* issue / MR detail */
h2.issuetitle { margin-bottom: var(--sp-1); font-size: var(--fs-5); }
.issuenumber { color: var(--muted); font-weight: 400; }
.issuemeta { color: var(--muted); font-size: var(--fs-2); margin-top: 0; }
.review { font-size: var(--fs-2); }

/* comment cards; discussion stays at a readable measure */
article.comment, form.commentform {
  max-width: 48rem;
}
article.comment {
  border: 1px solid var(--faint);
  border-radius: var(--r-lg);
  margin: var(--sp-4) 0;
}
article.comment .commenthead {
  background: var(--surface);
  border-bottom: 1px solid var(--faint);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-2);
}
article.comment .commenthead .when { color: var(--muted); }
article.comment .rendered { padding: 0 var(--sp-4); }
article.comment .rendered > :first-child { margin-top: var(--sp-3); }
article.comment .rendered > :last-child { margin-bottom: var(--sp-3); }
form.commentform { margin: var(--sp-4) 0; }
details.editbox { margin: var(--sp-2) 0; max-width: 48rem; }
details.editbox summary { cursor: pointer; color: var(--muted); font-size: var(--fs-2); }
details.editbox summary:hover { color: var(--accent); }
details.editbox input[type="text"] { width: 100%; }
.syscomment {
  max-width: 48rem;
  color: var(--muted);
  font-size: var(--fs-2);
  margin: var(--sp-3) 0;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--faint);
}
.syscomment p { display: inline; margin: 0; }

/* review threads under diff lines */
.thread {
  border: 1px solid var(--faint);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  margin: var(--sp-2) 0 var(--sp-2) var(--sp-6);
}
.thread.resolved { border-left-color: var(--ok); opacity: 0.75; }
.thread.stale { border-left-color: var(--warn); }
.thread p.commenthead { font-size: var(--fs-2); margin: var(--sp-2) 0 0; }
.thread .when { color: var(--muted); }
.thread .rendered p { margin: var(--sp-1) 0; }
.thread .threadstate { color: var(--muted); font-size: var(--fs-1); margin: var(--sp-1) 0 0; }

/* forms: every control shares one shell, so a select reads as a sibling
   of the text inputs beside it rather than as an OS control dropped in */
input, textarea, button, select { font: inherit; color: inherit; }
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input:not([type]), textarea, select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  line-height: 1.4;
}
textarea { width: 100%; resize: vertical; }
textarea[name="content"] { font-family: var(--mono); font-size: var(--fs-1); }
/* the native arrow cannot be restyled, so draw our own and match the
   inputs exactly; --chev carries the stroke colour per scheme */
select {
  appearance: none;
  padding-right: 1.9rem;
  background-image: var(--chev);
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.62rem;
  cursor: pointer;
}
input:hover, textarea:hover, select:hover { border-color: var(--muted); }
/* the global :focus-visible ring covers these; only the border moves */
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--fill); }
label:has(> input[type="radio"]), label:has(> input[type="checkbox"]),
label:has(> select) { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* Shape carries the meaning on these two and nothing else does: a circle
   takes one answer, a square takes any number. It survives colour being
   removed — greyscale, high contrast, colour blindness — so the native
   shapes stay and only the colour joins the system. Drawing them by hand
   would align the corners at the cost of the one cue that always works. */
input[type="radio"], input[type="checkbox"] { accent-color: var(--fill); }

/* a segmented control for a small, mutually exclusive set: real radios
   underneath, so arrow keys and screen readers behave as they always did */
fieldset.segmented { border: 0; margin: 0 0 var(--sp-4); padding: 0; }
fieldset.segmented legend {
  padding: 0;
  margin-bottom: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-2);
}
fieldset.segmented .options { display: inline-flex; }
fieldset.segmented label { gap: 0; }
fieldset.segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
fieldset.segmented span {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  font-size: var(--fs-2);
  cursor: pointer;
}
fieldset.segmented label + label span { border-left: 0; }
fieldset.segmented label:first-child span { border-radius: var(--r-sm) 0 0 var(--r-sm); }
fieldset.segmented label:last-child span { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
fieldset.segmented span:hover { border-color: var(--muted); }
fieldset.segmented input:checked + span {
  background: var(--fill);
  border-color: var(--fill);
  color: #ffffff;
  font-weight: 600;
}
fieldset.segmented input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* remaining input states */
::placeholder { color: var(--muted); opacity: 1; }
::selection { background: var(--fill); color: #ffffff; }
/* :user-invalid, not :invalid — a required field is invalid the moment
   the page loads, and colouring it red before anyone has typed is a
   scolding, not a hint */
input:user-invalid, textarea:user-invalid {
  border-color: var(--bad);
}
.hint { display: block; color: var(--muted); font-size: var(--fs-1); margin-top: var(--sp-1); }
button {
  background: var(--fill);
  color: #ffffff;
  border: none;
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.15); }

/* 404 */
.notfound { text-align: center; padding: var(--sp-6) 0; }
.notfound .bigcode {
  font-family: var(--mono);
  font-size: 4rem;
  color: var(--faint);
  -webkit-text-stroke: 1px var(--line);
  margin: 0;
  line-height: 1;
}
.notfound h1 { margin-top: var(--sp-3); }

/* footer */
footer {
  border-top: 1px solid var(--faint);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  width: 100%;
  color: var(--muted);
  font-size: var(--fs-1);
}
footer p { margin: 0; }
footer a { color: var(--muted); text-decoration: underline; }
footer a:hover { color: var(--accent); }

/* search */
form.searchform {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
}
form.searchform input[type="search"] { flex: 1; max-width: 32rem; }
form.searchform.compact { margin: 0; }
form.searchform.compact input[type="search"] {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-2);
  min-width: 18rem;
}
ul.matchlist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
ul.matchlist li { margin-bottom: var(--sp-3); }
ul.matchlist .matchpath { font-family: var(--mono); font-size: var(--fs-1); }
pre.matchline {
  background: var(--code-bg);
  border: 1px solid var(--faint);
  border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-3);
  margin: var(--sp-1) 0 0;
  overflow-x: auto;
}
pre.matchline mark {
  background: color-mix(in srgb, var(--warn) 25%, transparent);
  color: inherit;
  border-radius: 2px;
}

/* wiki */
.wikilayout { display: flex; gap: var(--sp-5); align-items: flex-start; }
.wikipage { flex: 1; min-width: 0; }
.wikinav { flex: none; width: 13rem; padding-top: var(--sp-4); }
.wikinav ul { list-style: none; margin: var(--sp-1) 0 var(--sp-4); padding: 0; }
.wikinav li a { display: block; padding: 0.15rem 0; color: var(--fg); }
.wikinav li a:hover { color: var(--accent); text-decoration: none; }
.wikinav li a.active { color: var(--accent); font-weight: 550; }
@media (max-width: 40rem) {
  /* Column direction + the desktop align-items:flex-start lets .wikipage
     take its content's intrinsic width, overflowing the viewport (and
     triggering iOS font inflation). Stretch pins it to the container. */
  .wikilayout { flex-direction: column; align-items: stretch; }
  .wikinav { width: auto; padding-top: 0; }
}

/* blame */
.blame {
  border: 1px solid var(--line);
  border-radius: var(--rad-2, 6px);
  overflow: hidden;
}
.blamehunk {
  display: flex;
  gap: var(--sp-3);
  border-top: 1px solid var(--line);
  align-items: flex-start;
}
.blamehunk:first-child { border-top: none; }
.blameinfo {
  flex: none;
  width: 17rem;
  padding: var(--sp-2) var(--sp-3);
  min-width: 0;
}
.blameinfo .subject {
  margin: 0;
  font-size: var(--fs-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blameinfo .meta { margin: 0; font-size: var(--fs-1); color: var(--muted); }
.blamecode {
  flex: 1;
  margin: 0;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
  overflow-x: auto;
  border-left: 1px solid var(--line);
  align-self: stretch;
}
.lineno {
  display: inline-block;
  min-width: 3.5em;
  padding-right: 1em;
  text-align: right;
  color: var(--muted);
  user-select: none;
}

/* mobile */
@media (max-width: 40rem) {
  .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  main.container { padding-top: var(--sp-2); }
  .repogrid { grid-template-columns: 1fr; }
  .thread { margin-left: var(--sp-3); }
  /* the commit subject is the widest thing in the listing and the one
     column a phone can do without: the tipbar above already names the
     latest commit. */
  table.tree td.lastcommit, table.tree th.lastcommit { display: none; }
  table.tree td.mode, table.tree th.mode { display: none; }
  .clone, .pathbar { overflow-wrap: anywhere; }
  .readme, .code { padding: var(--sp-3); }
  .blamehunk { flex-direction: column; gap: 0; }
  .blameinfo { width: auto; }
  .blamecode { border-left: none; padding-left: var(--sp-3); width: 100%; }
  .cardhead {
    margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
  }
}

/* tree listing: the last commit is what a file table is scanned for, so
   it leads. The file's own facts moved to the blob page. */
.tipbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--hover);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  font-size: var(--fs-2);
}
.tipbar .who { font-weight: 600; }
.tipbar .subject { color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tipbar .subject:hover { color: var(--accent); }
.tipbar .spacer { flex: 1; }
.tipbar .age { color: var(--muted); white-space: nowrap; }
.tipbar + table.tree { border-radius: 0 0 var(--r-lg) var(--r-lg); }
table.tree th.lastcommit, table.tree td.lastcommit { width: 55%; }
table.tree td.lastcommit a { color: var(--muted); display: block; overflow: hidden;
                             text-overflow: ellipsis; white-space: nowrap; }
table.tree td.lastcommit a:hover { color: var(--accent); }
table.tree th.age, table.tree td.age {
  text-align: right;
  white-space: nowrap;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
table.tree td.name { width: 25%; white-space: nowrap; }
table.tree td.name.dir a { color: var(--accent); }
p.clone { margin: 0 0 var(--sp-3); }
p.filefacts { color: var(--muted); font-size: var(--fs-1); margin: 0 0 var(--sp-3); }
.pathbar .act { font-size: var(--fs-1); }

/* merge request: a two-column split, so state has somewhere to live that
   is not a run-on sentence under the title */
.withaside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: var(--sp-5);
  align-items: start;
}
.withaside .mainside { min-width: 0; }
@media (max-width: 62rem) { .withaside { grid-template-columns: 1fr; } }

.aside { font-size: var(--fs-2); }
.aside .grp { border-top: 1px solid var(--line); padding: var(--sp-3) 0; }
.aside .grp:first-child { border-top: 0; padding-top: 0; }
.aside h2 {
  margin: 0 0 var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.aside .row { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-1); flex-wrap: wrap; }
.aside .row:last-child { margin-bottom: 0; }
.aside .none { color: var(--muted); }
.aside .dot { width: 0.45rem; height: 0.45rem; flex: none; border-radius: 50%; background: var(--muted); }
.aside .dot.ok { background: var(--ok); }
.aside .dot.bad { background: var(--bad); }
.aside .dot.pend { background: var(--mark); }

/* sub-navigation within an item; orange marks position as it does above */
nav.subtabs {
  display: flex;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--line);
  margin: 0 0 var(--sp-4);
}
nav.subtabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 0 var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
nav.subtabs a:hover { color: var(--fg); text-decoration: none; }
nav.subtabs a[aria-current] { color: var(--fg); font-weight: 700; border-bottom-color: var(--mark); }
nav.subtabs a i {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--fs-0);
  background: var(--hover);
  border-radius: var(--r-sm);
  padding: 0 0.35rem;
}
p.diffstat { color: var(--muted); font-size: var(--fs-2); margin: 0 0 var(--sp-3); }
p.diffstat .add { color: var(--ok); }
p.diffstat .del { color: var(--bad); }