/* gitbay stylesheet. Tokens first, on :root and again in the dark media
   query; components use tokens only. Two accents with separate jobs:
   blue is what you can do (links, primary buttons, focus, pressed
   toggles), orange is where you are and what wants you (current tab,
   rail counts, pending state, unverified signatures). Orange is never a
   button ground. internal/web/tokens_test.go measures every token;
   internal/web/classes_test.go checks every template class has a rule.
   No external requests: fonts are 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;

  /* grounds: canvas, surface and inset are three steps, not one */
  --canvas: #ffffff;
  --surface: #ebedf1;
  --inset: #ffffff;
  --hover: #e1e4ea;
  --line: #8d939c;           /* 3.09:1 on canvas — a border you can see */
  --faint: #d8dce2;

  /* ink */
  --fg: #1c1f24;
  --muted: #5a6270;
  --neutral: var(--muted);

  /* blue: what you can do. --link is text, --fill is a ground; one blue
     cannot clear 4.5:1 as text and 3:1 as a ground in both schemes. */
  --link: #0033d6;
  --fill: #0000f0;
  --fill-fg: #ffffff;
  --focus: var(--link);

  /* orange: where you are, what wants you. Two cuts because the floor
     differs by size: --mark for bars, --warn at text size. */
  --mark: #e4572e;
  --warn: #b8400f;

  /* state */
  --ok: #0a7536;
  --bad: #c62828;
  --done: #6b21a8;

  /* diff row tints: enough to scan, light enough that the syntax
     palette stays legible on them (TestSyntaxPaletteContrast) */
  --diff-add: #e4f6ea;
  --diff-del: #fdeaea;

  /* 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;

  /* the languages' own colours; the same in both schemes */
  --lang-go: #00add8;
  --lang-rust: #dea584;
  --lang-c: #555555;
  --lang-python: #3572a5;
  --lang-javascript: #f1e05a;
  --lang-typescript: #3178c6;
  --lang-shell: #89e051;
  --lang-ruby: #701516;
  --lang-java: #b07219;
  --lang-swift: #f05138;
  --lang-html: #e34c26;
  --lang-css: #563d7c;
  --lang-org: #77aa99;
  --lang-markdown: #083fa1;
  --lang-emacs-lisp: #c065db;
  --lang-nix: #7e7eff;
  --lang-sql: #e38c00;

  --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;

  /* 12, 13, 14, 16, 20, 24, 32 */
  --fs-0: 0.75rem;
  --fs-1: 0.8125rem;
  --fs-2: 0.875rem;
  --fs-3: 1rem;
  --fs-4: 1.25rem;
  --fs-5: 1.5rem;
  --fs-6: 2rem;

  /* 4, 8, 12, 16, 24, 32, 48 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* the rail: a column the width of one hit target, a row one tall */
  --rail-hit: 44px;
  --rail-strip-h: 48px;
  --rail-mark: 24px;
  --rail-mark-box: 32px;

  /* the one page container: header content, main and footer align on it */
  --container: 100rem;

  --r-ctl: 4px;   /* controls and chips */
  --r-card: 6px;  /* cards, lists, code blocks */
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* the native select arrow cannot be restyled, so draw our own;
     --chev carries the stroke colour per scheme */
  --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='%235a6270' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    /* the scheme in force, not just the tokens: light-dark() reads it,
       and themedCSS repeats this block for a page stamped dark */
    color-scheme: dark;

    --canvas: #101114;
    --surface: #212429;
    --inset: #0b0c0e;
    --hover: #2b2f36;
    --line: #61666f;
    --faint: #2f333a;

    --fg: #e9eaec;
    --muted: #a3a9b3;
    --neutral: var(--muted);

    --link: #8b9bff;
    --fill: #4d61f0;
    --fill-fg: #ffffff;
    --focus: var(--link);

    --mark: #ff6b3d;
    --warn: #ff8a63;

    --ok: #3fce7a;
    --bad: #ff6b6b;
    --done: #c084fc;

    --diff-add: #0d2a18;
    --diff-del: #2c1113;

    --shell-bg: #000000;
    --shell-fg: #f2f2f2;
    --shell-muted: #8f8f8f;
    --shell-line: #1c1c1c;
    --shell-hover: #141414;
    --shell-mark: #ff6b3d;

    /* the languages' own colours; the same in both schemes */
    --lang-go: #00add8;
    --lang-rust: #dea584;
    --lang-c: #555555;
    --lang-python: #3572a5;
    --lang-javascript: #f1e05a;
    --lang-typescript: #3178c6;
    --lang-shell: #89e051;
    --lang-ruby: #701516;
    --lang-java: #b07219;
    --lang-swift: #f05138;
    --lang-html: #e34c26;
    --lang-css: #563d7c;
    --lang-org: #77aa99;
    --lang-markdown: #083fa1;
    --lang-emacs-lisp: #c065db;
    --lang-nix: #7e7eff;
    --lang-sql: #e38c00;

    --shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    --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='%23a3a9b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* a page stamped light keeps the light scheme under a dark OS: the token
   block above is guarded for it, and this is the other half of that */
:root[data-theme="light"] { color-scheme: light; }

/* ---- base ---- */
* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--fg);
  font: var(--fs-3)/1.5 var(--sans);
  min-height: 100vh;
}
h1, h2, h3 { line-height: 1.25; font-weight: 600; }
h1 { font-size: var(--fs-5); margin: 0 0 var(--sp-3); text-wrap: balance; }
h2 { font-size: var(--fs-4); margin: var(--sp-6) 0 var(--sp-3); }
h3 { font-size: var(--fs-3); margin: var(--sp-5) 0 var(--sp-2); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* a link inside running text is told apart by its underline: link and
   muted text are 1.07:1 apart in dark, and colour alone is not a cue
   (#232). Navigation, chips and buttons keep position as their cue. */
p a, .syscomment a { text-decoration: underline; }
/* a title or a path is the whole line: position is the cue */
p a.button, p a.btn, p a.chip, .repotitle a, p.title a, .pathbar a, .pager a { text-decoration: none; }
/* where a link shares its line with other text the underline is the cue
   again, path bar or not: a crumb beside the file name, a heading that
   names an owner, an empty-state note (#226) */
.crumbs a, h1 a, li.empty a { text-decoration: underline; }
a.xref { color: var(--link); text-decoration: none; }

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

/* ---- focus: one authored ring, so keyboard position is never the
   browser's guess ---- */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}
/* the rail is black in both schemes and --focus is a dark blue in the
   light one — a ring nobody could see there */
.rail :focus-visible { outline-color: var(--shell-mark); }

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

/* ---- skip link: the rail runs ahead of the content in source order ---- */
a.skip {
  position: absolute;
  left: var(--sp-3); top: -3rem;
  z-index: 50;
  display: flex;
  align-items: center;
  min-height: var(--rail-hit);
  background: var(--fill);
  color: var(--fill-fg);
  padding: var(--sp-2) var(--sp-4);
  font-weight: 600;
}
a.skip:focus { top: var(--sp-3); text-decoration: none; }

/* ---- rail: one row of glyphs across the top, no labels ----
   One strip the height of a hit target, at every width: fixed squares,
   no wrapping and no scrolling. Every item is a square link carrying an
   inline svg, its name in an aria-label and in a visually hidden span, so
   the nav reads the same to a screen reader as the old text list did. */
.rail {
  height: var(--rail-strip-h);
  background: var(--shell-bg);
  color: var(--shell-fg);
  border-bottom: 1px solid var(--shell-line);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 var(--sp-1);
}
a.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--rail-mark-box);
  height: var(--rail-strip-h);
  color: var(--shell-fg);
}
a.brand:hover { text-decoration: none; }
a.brand svg.mark { display: block; flex: none; width: var(--rail-mark); height: var(--rail-mark); }

ul.raillist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  min-width: 0;
}
/* the spacer that holds settings, admin and the account cell at the far
   end of the row */
.railgap { flex: 1; }
.railicon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--rail-hit);
  height: var(--rail-strip-h);
  padding: 0;
  border: 0;
  background: none;
  color: var(--shell-fg);
  cursor: pointer;
}
.railicon:hover { background: var(--shell-hover); text-decoration: none; }
/* orange marks position along the bottom edge — the rail's only accent */
.railicon[aria-current] {
  background: var(--shell-hover);
  box-shadow: inset 0 -2px 0 var(--shell-mark);
}
.count {
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: 0;
  background: var(--shell-mark);
  color: var(--shell-bg);
  padding: 0 5px;
  border-radius: var(--r-ctl);
  margin-left: auto;
}
/* the unread count is a badge on the bell's corner, not a trailing number */
.railicon .count {
  position: absolute;
  top: 2px;
  right: 2px;
  margin: 0;
  padding: 0 3px;
  line-height: 1.35;
}
.railfoot {
  flex: none;
  display: flex;
  align-items: center;
  min-width: 0;
}
.railfoot a { color: var(--shell-fg); }
.railfoot form { margin: 0; }
a.railuser {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--rail-hit);
  height: var(--rail-strip-h);
}
a.railuser:hover { text-decoration: none; }
/* the phone rail's overflow: every square .railopt hides, and log out,
   as a labelled list under the rail. Shown only below 34rem. */
.railmore { display: none; position: relative; }
.railmore > summary { list-style: none; cursor: pointer; }
.railmore > summary::-webkit-details-marker { display: none; }
.railmore[open] > summary { background: var(--shell-hover); }
.raildrop {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  min-width: 12rem;
  padding: var(--sp-1) 0;
  background: var(--shell-bg);
  border: 1px solid var(--shell-line);
  border-radius: var(--r-card);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.35);
}
.raildrop a, .raildrop button {
  display: flex;
  align-items: center;
  /* a button's own default is centred; the rows read as one list */
  justify-content: flex-start;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--rail-hit);
  padding: 0 var(--sp-4);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-2);
  text-align: left;
  color: var(--shell-fg);
  cursor: pointer;
}
.raildrop a:hover, .raildrop button:hover { background: var(--shell-hover); text-decoration: none; }
.raildrop form { margin: 0; }
.raildrop svg { flex: none; }
a.railuser .avatar { width: var(--rail-mark); height: var(--rail-mark); }
.avatar {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--fill-fg);
  font-size: var(--fs-0);
  font-weight: 600;
}

/* ---- shell: the rail above, then the pane, which fills the rest of the
   viewport so the footer sits at the bottom of a short page ---- */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main.content {
  flex: 1;
  width: 100%;
  padding: var(--sp-5) var(--sp-6) var(--sp-7);
}
/* the container is the default width and what `wide` names; reading and
   bounded follow, so equal specificity gives them the cascade */
main.content, main.wide, footer { max-width: calc(var(--container) + 2 * var(--sp-6)); margin: 0 auto; }
main.reading { max-width: calc(72rem + 2 * var(--sp-6)); margin: 0 auto; }
main.bounded { max-width: calc(48rem + 2 * var(--sp-6)); margin: 0 auto; }
footer {
  width: 100%;
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--faint);
  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(--link); }

/* ---- repository header ---- */
.repohead {
  padding: var(--sp-4) 0 0;
  border-bottom: 1px solid var(--line);
}
.repohead .wrap { max-width: calc(var(--container) + 2 * var(--sp-6)); margin: 0 auto; padding: 0 var(--sp-6); }
.identity { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.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 and navigation must not
   move when you use it */
.repotitle {
  margin: 0;
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.25;
}
.repotitle a { color: var(--fg); }
.repotitle a.owner { color: var(--muted); font-weight: 400; }
.repotitle a:hover { color: var(--link); text-decoration: none; }
.repotitle .sep { color: var(--muted); margin: 0 2px; font-weight: 400; }
.repodesc {
  margin: 0 0 0 var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-2);
  display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  min-width: 0;
}
.repodesc a.site { color: var(--muted); }
.repodesc a.site:hover { color: var(--link); }
.repometa { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-1); }

nav.tabs {
  display: flex;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
  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-1);
  padding: var(--sp-2) var(--sp-3) 10px;
  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; }
nav.tabs a[aria-current] { color: var(--fg); font-weight: 600; border-bottom-color: var(--mark); }
/* a count in a tab is plain metadata, not a badge */
nav.tabs a i { font-style: normal; color: var(--muted); margin-left: 4px; }

/* ---- page heads ---- */
.pagehead, .listhead, .headrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.pagehead h1, .listhead h1, .headrow h1, .listhead h2, .headrow h2 { margin: 0; }
.pagehead .grow, .listhead .spacer, .headrow .spacer { flex: 1; }
.issuetitle { margin: 0 0 var(--sp-2); font-size: var(--fs-5); }
.issuenumber { color: var(--muted); font-weight: 400; }
.issuemeta { color: var(--muted); font-size: var(--fs-2); margin: 0 0 var(--sp-4); }
.commithead p { margin: var(--sp-1) 0; }
.commithead h2 { margin-top: 0; margin-bottom: var(--sp-1); }

nav.filters { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }
nav.filters a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--sp-3);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  color: var(--fg);
  font-size: var(--fs-2);
  font-weight: 500;
}
nav.filters a:hover { background: var(--hover); text-decoration: none; }
nav.filters a.active { background: var(--surface); border-color: var(--link); color: var(--link); }

form.searchform, form.logfilter, form.compareform {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
}
form.searchform input[type="search"], form.searchform input[type="text"], form.logfilter input { flex: 1; min-width: 12rem; max-width: 32rem; }
form.searchform.compact { margin: 0; }
form.searchform.compact input[type="search"], form.searchform.compact input[type="text"] { min-width: 18rem; }
form.compareform label { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; }

/* ---- buttons: one family, 32px tall, so a row of them lines up ---- */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--sp-3);
  font: inherit;
  font-size: var(--fs-2);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  /* a bare <button> is the primary action of its form group */
  background: var(--fill);
  color: var(--fill-fg);
}
button:hover, .button.primary:hover { filter: brightness(1.12); text-decoration: none; }
button.btn, .button.btn {
  background: var(--canvas);
  color: var(--fg);
  border-color: var(--line);
  filter: none;
}
button.btn:hover, .button.btn:hover { background: var(--hover); filter: none; text-decoration: none; }
button.btn[aria-pressed="true"] { background: var(--surface); color: var(--link); border-color: var(--link); }
button.linklike {
  background: none;
  border: 0;
  padding: 0;
  height: auto;
  color: var(--link);
  font-weight: 400;
  filter: none;
}
button.linklike:hover { text-decoration: underline; filter: none; }
button.danger, .button.danger {
  background: var(--canvas);
  color: var(--bad);
  border-color: var(--bad);
  filter: none;
}
/* --canvas, not --fill-fg: white on the dark scheme's --bad is 2.3:1 */
button.danger:hover, .button.danger:hover { background: var(--bad); color: var(--canvas); filter: none; }
button:disabled { opacity: 0.55; cursor: default; filter: none; }
.btngroup { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }
form.inline { display: inline; }
.act { text-align: right; }

/* ---- forms ---- */
/* not button: it sets its own colour above, and this rule comes later at
   the same specificity */
input, textarea, select { font: inherit; color: inherit; }
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], input:not([type]), textarea, select {
  background: var(--inset);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 0 10px;
  height: 32px;
  font-size: var(--fs-2);
  line-height: 1.4;
}
textarea {
  width: 100%;
  height: auto;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.5;
}
textarea[name="content"] { font-family: var(--mono); font-size: var(--fs-1); }
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); }
input[type="radio"] { accent-color: var(--fill); }
label { display: block; font-weight: 500; font-size: var(--fs-2); margin-bottom: 4px; }
label:has(> input[type="radio"]), label:has(> input[type="checkbox"]),
label:has(> select) { display: inline-flex; align-items: center; gap: var(--sp-2); }
.fieldname { display: block; font-size: var(--fs-2); font-weight: 500; }
.hint { display: block; color: var(--muted); font-size: var(--fs-1); font-weight: 400; margin: 0 0 6px; }
.field { margin-bottom: var(--sp-4); }
.field input[type="text"], .field input[type="email"], .field select { width: 100%; }
.check { display: flex; align-items: center; gap: var(--sp-2); font-weight: 400; }
::placeholder { color: var(--muted); opacity: 1; }
::selection { background: var(--fill); color: var(--fill-fg); }
/* :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); }
input[name="confirm"] { width: auto; margin-right: var(--sp-2); }

/* A radio keeps the native control: a circle takes one answer, a square
   takes any number, and that shape survives greyscale and colour
   blindness. The checkbox is drawn so it matches the rest of the family. */
input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  /* an empty box has nothing but its border to announce it */
  border: 1px solid var(--muted);
  border-radius: var(--r-ctl);
  background: var(--inset);
  cursor: pointer;
}
input[type="checkbox"]:not(:checked):hover { border-color: var(--fg); }
input[type="checkbox"]:checked {
  background: var(--fill);
  border-color: var(--fill);
  /* the mark sits on the blue ground, so it is white in both schemes */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

/* 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; margin: 0; }
fieldset.segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
fieldset.segmented span {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 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-ctl) 0 0 var(--r-ctl); }
fieldset.segmented label:last-child span { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
fieldset.segmented span:hover { border-color: var(--muted); }
fieldset.segmented input:checked + span {
  background: var(--fill);
  border-color: var(--fill);
  color: var(--fill-fg);
  font-weight: 600;
}
fieldset.segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

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); margin: 0; }
p.branchpick select { flex: 1 1 12rem; }

form.signupform, form.editform { max-width: 40rem; }
form.signupform label, form.editform label { margin-bottom: 4px; }
.editform textarea { width: 100%; }
.editform input[name="message"] { width: 100%; }

/* A previewed draft, above the textarea it came from. The orange edge is
   "where you are and what wants you": this is not saved yet. */
.preview {
  margin: var(--sp-4) 0;
  max-width: 48rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mark);
  border-radius: var(--r-card);
}
.preview > .previewmark {
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line);
  color: var(--warn);
  font-size: var(--fs-1);
}
.preview > .rendered { padding: var(--sp-3) var(--sp-4); }
.preview > .rendered > :first-child { margin-top: 0; }
.preview > .rendered > :last-child { margin-bottom: 0; }
.preview > .rendered:empty::before { content: "nothing to preview"; color: var(--muted); }

form.commentform { margin: var(--sp-4) 0; max-width: 48rem; }
form.commentform p:last-child { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 0; }

details.editbox { margin: var(--sp-2) 0; max-width: 48rem; }
details.editbox > summary {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--sp-3);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  color: var(--fg);
  font-size: var(--fs-2);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
details.editbox > summary::-webkit-details-marker { display: none; }
details.editbox > summary:hover { background: var(--hover); }
details.editbox[open] > summary { margin-bottom: var(--sp-2); }
details.editbox input[type="text"] { width: 100%; }

/* ---- settings: one row per control, label then input then its own
   button. The name stays setform because the templates carry it. ---- */
form.setform {
  display: grid;
  grid-template-columns: 14rem minmax(0, 28rem) auto;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--faint);
}
form.setform label { margin-top: 6px; }
form.setform .hint { margin: 2px 0 0; }
form.setform input[type="text"], form.setform input[type="number"], form.setform select { width: 100%; }
/* the third column takes the leftover width; the button keeps its own */
form.setform > button, form.setform > .btngroup { justify-self: start; }
form.setform.stack { grid-template-columns: 1fr; }
form.setform.stack textarea, form.setform.stack select { width: 100%; max-width: 48rem; }
ul.protlist { list-style: none; margin: var(--sp-2) 0; padding: 0; }
ul.protlist li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--faint);
}
ul.protlist li:last-child { border-bottom: 0; }
ul.protlist form { margin-left: auto; }
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; }

/* ---- messages: .error and .notice are one family. The names stay
   because e2e tests match class="error". ---- */
.error, .notice {
  border-left: 3px solid var(--bad);
  background: color-mix(in srgb, var(--bad) 6%, transparent);
  color: var(--fg);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  padding: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-2);
}
.notice { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 6%, transparent); }
.empty-note, .none, .empty, li.empty, td.empty { color: var(--muted); }

/* ---- containers: one recipe for cards, lists and tables ---- */
.card, ul.list, ul.loglist, ul.repolist, ul.issuelist,
ul.milestonelist, .readme, .code, article.release, .blame, .teambody {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.cardhead {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-1);
  color: var(--muted);
}
.cardhead b { color: var(--fg); font-weight: 500; }
.cardbody { padding: var(--sp-4) var(--sp-5); }
ul.list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
ul.list li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--faint); }
ul.list li:last-child { border-bottom: 0; }
ul.list li:hover { background: var(--hover); }

table { border-collapse: collapse; width: 100%; font-size: var(--fs-2); }
th {
  text-align: left;
  font-weight: 500;
  font-size: var(--fs-1);
  color: var(--muted);
  padding: 6px var(--sp-4);
  border-bottom: 1px solid var(--line);
}
td { padding: 7px var(--sp-4); border-bottom: 1px solid var(--faint); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover); }
/* every header row a template writes, by the class it or its table
   carries: TestHeaderRowsAreLeftAligned reads these selectors */
tr.cols th, table.tree th, table.refs th, table.keys th, table.assets th { text-align: left; }
tr.cols th { background: var(--canvas); }
/* right-aligned columns keep their header with their values */
tr.cols th.age, tr.cols th.size { text-align: right; }
/* wide listings scroll inside their own box; the page never does. The
   wrapper is the scroller only — the table inside carries the card. */
.tablewrap { overflow-x: auto; max-width: 100%; }

table.tree, table.refs {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  /* collapsed borders defeat a radius on the table itself */
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
table.tree tr:last-child td, table.refs tr:last-child td { border-bottom: 0; }
table.tree tr:hover td, table.refs tr:hover td { background: var(--hover); }
td.name a { color: var(--fg); }
td.name a:hover { color: var(--link); }
table.tree td.name { width: 25%; white-space: nowrap; }
table.tree td.name.dir a { color: var(--link); }
table.tree th.lastcommit, table.tree td.lastcommit { width: 55%; }
table.tree td.lastcommit {
  max-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
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(--link); }
table.tree th.age, table.tree td.age { width: 20%; }
td.age, th.age { text-align: right; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
td.size, td.mode { color: var(--muted); white-space: nowrap; }
table.tree th.size, table.tree td.size { text-align: right; }
table.refs td.name { width: 100%; }
table.refs td.sha, td.sha { color: var(--muted); }

/* these tables sit flush with the page text: no outer border, and the
   header row drops the ground and the left padding */
table.keys, table.assets { background: none; border: 0; border-radius: 0; }
table.keys th, table.assets th, table.keys tr.cols th { background: transparent; padding-left: 0; }
table.keys td { padding-left: 0; }
table.keys td.act, table.assets td.size { text-align: right; }
/* a fingerprint or an account row is read across, not down: the cells
   keep one line each and .tablewrap scrolls what does not fit */
table.keys.nowrap th, table.keys.nowrap td { white-space: nowrap; }
/* The account list types a username to confirm, which is longer than
   the key prefixes the confirm field is sized for elsewhere. */
table.accounts input[name="confirm"] { width: 11rem; }
table.accounts form.actions { display: inline-flex; gap: var(--sp-2); margin: 0 var(--sp-2) var(--sp-2) 0; }
table.assets td.name { width: 100%; font-family: var(--mono); font-size: var(--fs-1); }
table.assets { margin-top: var(--sp-2); }

/* the tip commit is the first row of the file table */
tr.tipbar td {
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  max-width: 0;
}
.tipbar .tip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-width: 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(--link); }
.tipbar .spacer { flex: 1; }
.tipbar .age { color: var(--muted); white-space: nowrap; }

.readme { margin-top: var(--sp-5); }
.readme .cardbody { max-width: 78ch; }
/* the overview README caps as a card, so prose and code share an edge */
.overview .readme { max-width: 88ch; }
/* until every card wraps its body in .cardbody, the rendered block is
   the body */
.readme > .rendered { padding: var(--sp-4) var(--sp-5); }
.code { background: var(--inset); padding: var(--sp-3) var(--sp-4); overflow-x: auto; }
.code pre { margin: 0; background: transparent !important; border: 0; padding: 0; }
pre.bigcode, .bigcode {
  font-family: var(--mono);
  /* the 404 numeral is a picture of a number, not body type */
  font-size: 4rem;
  color: var(--faint);
  -webkit-text-stroke: 1px var(--line);
  margin: 0;
  line-height: 1;
}
.notfound { text-align: center; padding: var(--sp-6) 0; }
.notfound h1 { margin-top: var(--sp-3); }

ul.loglist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
ul.loglist li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--faint);
}
ul.loglist li:last-child { border-bottom: 0; }
ul.loglist li:hover { background: var(--hover); }
ul.loglist p { margin: 0; }
ul.loglist .commitmain { flex: 1 1 auto; min-width: 0; }
ul.loglist .subject a { color: var(--fg); font-weight: 500; }
ul.loglist .subject a:hover { color: var(--link); }
ul.loglist .commitside { flex: none; display: flex; gap: var(--sp-2); align-items: center; white-space: nowrap; }

ul.loglist.rows li { align-items: center; padding: var(--sp-2) var(--sp-4); }
ul.loglist.rows .commitmain { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
ul.loglist.rows .meta { flex: none; color: var(--muted); font-size: var(--fs-1); white-space: nowrap; }

ul.repolist { list-style: none; margin: var(--sp-3) 0 var(--sp-5); padding: 0; }
ul.repolist li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--faint); }
ul.repolist li:last-child { border-bottom: 0; }
ul.repolist li:hover { background: var(--hover); }
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(--link); font-weight: 600; }
ul.repolist .reponame .sep { color: var(--muted); margin: 0 2px; }
ul.repolist .desc { margin-top: 2px; }
ul.repolist .topics, ul.repolist .meta { margin-top: var(--sp-1); }

ul.repolist.rows li { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); }
ul.repolist.rows .reponame { flex: none; font-size: var(--fs-2); }
ul.repolist.rows .desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-2); margin: 0; }
ul.repolist.rows .topics, ul.repolist.rows .meta { flex: none; margin: 0; white-space: nowrap; }
ul.repolist.rows .meta { font-size: var(--fs-1); }

/* pinned repos: a compact wrap of names, 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-ctl);
  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(--link); text-decoration: none; }
ul.pinlist .sep { color: var(--muted); margin: 0 2px; }

ul.issuelist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
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: 0; }
ul.issuelist li:hover { background: var(--hover); }
ul.issuelist li.empty { display: block; }
ul.issuelist p { margin: 0; }
ul.issuelist .issuemain { flex: 1 1 auto; min-width: 0; }
ul.issuelist .issueside { display: flex; gap: var(--sp-2); align-items: center; flex: none; }
ul.issuelist .title a { color: var(--fg); font-weight: 500; }
ul.issuelist .title a:hover { color: var(--link); }

/* one-line rows: title, labels, then the meta pushed right. Above 64rem
   a list is a table, not prose (desktop layout spec). */
ul.issuelist.rows li { align-items: center; padding: var(--sp-2) var(--sp-4); }
ul.issuelist.rows .issuemain { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
ul.issuelist.rows .title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.issuelist.rows .title .chip { margin-left: var(--sp-1); }
ul.issuelist.rows .meta { flex: none; color: var(--muted); font-size: var(--fs-1); white-space: nowrap; }
ul.issuelist.rows .meta .repo { color: var(--fg); }

ul.milestonelist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
ul.milestonelist li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--faint); }
ul.milestonelist li:last-child { border-bottom: 0; }
ul.milestonelist li:hover { background: var(--hover); }
ul.milestonelist p { margin: 0; }
ul.milestonelist .msmain { min-width: 0; }
ul.milestonelist .title { font-weight: 500; }
.progress {
  height: 6px;
  max-width: 24rem;
  margin-top: var(--sp-2);
  background: var(--faint);
  border-radius: var(--r-ctl);
  overflow: hidden;
}
.progress .bar { height: 100%; background: var(--ok); }

article.release { padding: var(--sp-4); margin: var(--sp-4) 0; }
.releasehead { background: none; border: 0; padding: 0; }
.releasehead h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-3); }
.releasehead .meta { margin: 0 0 var(--sp-2); }

ul.matchlist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
ul.matchlist li { margin-bottom: var(--sp-3); }
.matchpath { font-family: var(--mono); font-size: var(--fs-1); }
pre.matchline {
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  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(--mark) 25%, transparent); color: inherit; border-radius: 2px; }
p.pager { margin-top: var(--sp-4); }
.snippetfile { margin-bottom: var(--sp-5); }
p.filefacts { color: var(--muted); font-size: var(--fs-1); margin: 0 0 var(--sp-3); }
pre.buildlog { max-height: 40rem; overflow: auto; }

/* ---- rendered prose ---- */
pre {
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
  overflow-x: auto;
  font-size: var(--fs-2);
  line-height: 1.6;
}
code {
  background: var(--inset);
  border: 1px solid var(--faint);
  border-radius: var(--r-ctl);
  padding: 0 0.3em;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
code.fullsha { color: var(--muted); overflow-wrap: anywhere; }
pre.message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rendered { max-width: 100%; overflow-wrap: anywhere; }
.rendered a { text-decoration: underline; }
.prose, .rendered > p, .rendered > ul, .rendered > ol, .rendered > blockquote { max-width: 78ch; }
.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; }
.rendered tr:last-child td { border-bottom: 1px solid var(--line); }
/* GFM task lists: the box sits in the line, sized to the prose */
.rendered li input[type="checkbox"] { width: 0.9em; height: 0.9em; margin: 0 0.35em 0 0; vertical-align: -0.05em; background-size: 0.7em; }
.rendered li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.2em; }
.blobimage { text-align: center; }
.blobimage img { max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }

/* ---- dashboard: pinned column, tiles and queues, feed ---- */
.dashgrid { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 20rem; gap: var(--sp-6); align-items: start; }
.dashgrid h1 { margin-top: 0; }
.dashgrid > aside { position: sticky; top: var(--sp-5); }
.dashgrid .dashmain h2 { margin-top: var(--sp-5); }
.dashgrid .dashmain .tiles + h2 { margin-top: 0; }
.colhead {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pins { list-style: none; margin: 0; padding: 0; font-size: var(--fs-2); }
.pins li { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 0; border-bottom: 1px solid var(--faint); }
.pins li:last-child { border-bottom: 0; }
.pins a { color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pins a:hover { color: var(--link); }
.pins .owner { color: var(--muted); }
.pins .n { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); color: var(--muted); font-variant-numeric: tabular-nums; }
.pins .n b { font-weight: 600; color: var(--fg); }
.pins .n b.wants { color: var(--warn); }
.pins .dot { margin: 0; }
/* count tiles: the queues' sizes in one strip; a non-zero count is orange,
   what wants you */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-5); }
.tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-4);
  color: var(--fg);
}
a.tile:hover { background: var(--hover); text-decoration: none; }
.tile b { display: block; font-size: var(--fs-5); font-weight: 600; line-height: 1.2; }
.tile.wants b { color: var(--warn); }
.tile span { font-size: var(--fs-1); color: var(--muted); }
.feedcol .feedline { font-size: var(--fs-2); margin-bottom: var(--sp-2); }
.feedcol .feedline .none { font-size: var(--fs-1); }

/* ---- two-column: conversation and aside ---- */
.withaside { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-6); align-items: start; }
.withaside .mainside { min-width: 0; }
aside.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-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.aside .row { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--sp-1); flex-wrap: wrap; }
.aside .row:last-child { margin-bottom: 0; }
/* a row's second line: when it happened, under what it happened to */
.aside .row .sub { flex-basis: 100%; padding-left: 14px; color: var(--muted); font-size: var(--fs-1); }
.aside .row:has(.sub) { margin-bottom: var(--sp-2); }
.aside .none { color: var(--muted); }
.dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--neutral); margin-right: 2px; vertical-align: middle; }
.dot.ok { background: var(--ok); }
.dot.bad { background: var(--bad); }
.dot.pend { background: var(--mark); }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
form.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
form.actions button { flex: 1 1 auto; }
form.actions select, form.actions textarea { width: 100%; }
.feedline { margin-bottom: var(--sp-2); }

/* ---- comments and threads ---- */
article.comment {
  max-width: 48rem;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  margin: var(--sp-4) 0;
  overflow: hidden;
}
article.comment .commenthead {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-4);
  margin: 0;
  font-size: var(--fs-1);
  color: var(--muted);
}
article.comment .commenthead b { color: var(--fg); font-weight: 500; }
article.comment .commenthead .when { color: var(--muted); }
article.comment .rendered { padding: var(--sp-3) var(--sp-4); }
article.comment .rendered > :first-child { margin-top: 0; }
article.comment .rendered > :last-child { margin-bottom: 0; }
a.authorlink { color: var(--fg); font-weight: 500; }
a.authorlink:hover { color: var(--link); }

.syscomment {
  max-width: 48rem;
  color: var(--muted);
  font-size: var(--fs-1);
  margin: 0 0 var(--sp-4) var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  border-left: 2px solid var(--faint);
}
.syscomment p { display: inline; margin: 0; }

.thread {
  border: 1px solid var(--faint);
  border-left: 3px solid var(--link);
  border-radius: var(--r-ctl);
  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; }
/* an unsubmitted comment is the viewer's own note, not the conversation */
.thread.pending { border-left-color: var(--neutral); border-left-style: dashed; }
.thread.stale { border-left-color: var(--warn); }
.thread.composing { border-left-color: var(--mark); }
.thread:target { outline: 2px solid var(--mark); outline-offset: 2px; }
.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; }
.thread details.threadreply { margin: var(--sp-2) 0 0; }
.thread details.threadreply > summary { color: var(--link); font-size: var(--fs-1); cursor: pointer; }
.thread textarea { width: 100%; }
.thread.composing p, .thread details.threadreply p { margin: var(--sp-2) 0 0; }
form.threadact { margin: var(--sp-1) 0 0; padding: 0 var(--sp-3) var(--sp-2); }

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-1);
  padding: var(--sp-2) 0 10px;
  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: 600; border-bottom-color: var(--mark); }
nav.subtabs a i { font-style: normal; color: var(--muted); margin-left: 4px; }

/* ---- diffs and code ---- */
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); }

details.difffold {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  margin: 0 0 var(--sp-3);
  background: var(--inset);
  overflow: hidden;
}
details.difffold summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  font-size: var(--fs-2);
  cursor: pointer;
  list-style: none;
}
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(--hover); }
details.difffold summary .fpath { font-family: var(--mono); overflow-wrap: anywhere; }
details.difffold summary .fpath .was { color: var(--muted); }
details.difffold 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 { background: none; border: 0; border-radius: 0; }

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 tbody tr:hover td { background: none; }
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 carries its own ground, which painted over the
   row tints */
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(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
table.difftable tr.hunk td.src { color: var(--link); }
table.difftable tr.threadrow td { padding: var(--sp-2) var(--sp-3); background: var(--canvas); }
/* a line number is the handle for commenting on that line; it stays a
   plain number until pointed at, so the gutter is not a wall of links */
table.difftable td.ln a.cmt { color: inherit; text-decoration: none; }
table.difftable td.ln a.cmt:hover,
table.difftable td.ln a.cmt:focus { color: var(--link); text-decoration: underline; }
/* A linked line: f2-n17 on a diff, L17 on a file (see issue 118). */
.difftable tr:target td, .code .line:has(a:target) { background: color-mix(in srgb, var(--mark) 18%, transparent); }
.difftable tr:target td.ln, .code .line:has(a:target) .ln { border-left: 3px solid var(--mark); }
/* chroma writes the highlighted spans; the container only supplies the
   ground and the face */
.chroma { font-family: var(--mono); background: none; }
/* chroma's own LineLink rule is dropped from the served palette: it set
   outline: none and hid the focus ring. This is that rule without it, on
   a 24px box so a line number is a target and not a glyph (#232) */
.chroma .lnlinks { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; text-decoration: none; color: inherit; }
.chroma .line { line-height: 24px; }

.blamehunk { display: flex; gap: var(--sp-3); border-top: 1px solid var(--line); align-items: flex-start; }
.blamehunk:first-child { border-top: 0; }
.blameinfo { flex: none; width: 17rem; min-width: 0; padding: var(--sp-2) var(--sp-3); }
.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;
  background: var(--inset);
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  overflow-x: auto;
  align-self: stretch;
}
.lineno {
  display: inline-block;
  min-width: 3.5em;
  padding-right: 1em;
  text-align: right;
  color: var(--muted);
  user-select: none;
}

/* ---- chips and badges ---- */
.chip, .badge {
  --chip: var(--neutral);
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-ctl);
  font-size: var(--fs-0);
  font-weight: 500;
  line-height: 1.5;
  color: var(--chip);
  border: 1px solid color-mix(in srgb, var(--chip) 40%, transparent);
  background: color-mix(in srgb, var(--chip) 10%, var(--canvas));
  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.topic { --chip: var(--link); }
.chip.topic:hover { text-decoration: none; background: color-mix(in srgb, var(--chip) 18%, transparent); }
/* A label carries its own colour inline, from the label's hex, as one
   tone per scheme: chip text is 12px, so it needs 4.5:1 against its own
   ground, and no single colour clears that on both canvases (#226). An
   old browser without light-dark() drops the declaration and the chip
   falls back to the neutral above. */
.chip.label {
  --chip: light-dark(var(--chip-l, var(--neutral)), var(--chip-d, var(--neutral)));
  font-weight: 500;
}
.badge-verified { --chip: var(--ok); }
.badge-unsigned { --chip: var(--neutral); }
.badge-signed_unknown_key, .badge-signed_key_expired { --chip: var(--warn); }
.badge-signed_email_mismatch, .badge-signed_key_revoked, .badge-bad_signature { --chip: var(--bad); }
.badge.check-success, .chip.check-success { --chip: var(--ok); }
.badge.check-pending, .chip.check-pending,
.badge.check-running, .chip.check-running { --chip: var(--warn); }
.badge.check-failure, .chip.check-failure,
.badge.check-error, .chip.check-error { --chip: var(--bad); }
.badge.check-cancelled, .chip.check-cancelled,
.badge.check-skipped, .chip.check-skipped { --chip: var(--neutral); }
span.check-success { color: var(--ok); }
span.check-pending, span.check-running { color: var(--warn); }
span.check-failure, span.check-error { color: var(--bad); }

a.memberchip {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 1px 8px;
  margin: 0 2px 2px 0;
  color: var(--fg);
  font-size: var(--fs-1);
}
a.memberchip:hover { text-decoration: none; border-color: var(--link); color: var(--link); }
a.memberchip .role { color: var(--muted); }

.pathbar { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); flex-wrap: wrap; font-size: var(--fs-2); }
.pathbar .spacer { flex: 1; }
.pathbar .actions { display: flex; align-items: center; gap: var(--sp-2); }
/* history · blame · raw were 21px tall and "raw" 22px wide (#232) */
.pathbar .actions a { display: inline-block; padding: 6px 4px; }
.pathbar .acts { display: flex; gap: var(--sp-2); }
.crumbs { color: var(--muted); }
.crumbs a { color: var(--link); }
.crumbs strong { color: var(--fg); }

/* ---- file navigator: the directory beside a file ---- */
.blobgrid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.blobmain { min-width: 0; }
.filenav { position: sticky; top: var(--sp-4); font-size: var(--fs-2); }
.filenav ul { list-style: none; margin: 0; padding: 0; }
.filenav li a {
  display: block;
  padding: 3px var(--sp-2);
  border-radius: var(--r-ctl);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filenav li a:hover { background: var(--hover); text-decoration: none; }
.filenav li a[aria-current] { background: var(--surface); box-shadow: inset 2px 0 0 var(--mark); font-weight: 600; }
.filenav li a.dir { color: var(--link); }
.filenav li a.up { color: var(--muted); }

/* ---- side column: facets or sections beside a list or a form ---- */
.withcol { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.withcol.narrow { grid-template-columns: 15rem minmax(0, 56rem); }
.colmain { min-width: 0; }
.sidecol { position: sticky; top: var(--sp-4); font-size: var(--fs-2); }
.sidecol .grp { margin-bottom: var(--sp-4); }
.sidecol ul { list-style: none; margin: 0; padding: 0; }
.sidecol li a {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: 4px var(--sp-2);
  border-radius: var(--r-ctl);
  color: var(--fg);
}
.sidecol li a:hover { background: var(--hover); text-decoration: none; }
.sidecol li a[aria-current] { background: var(--surface); box-shadow: inset 2px 0 0 var(--mark); font-weight: 500; }
.sidecol li a i { margin-left: auto; font-style: normal; color: var(--muted); font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.sidecol form.searchform { margin-top: var(--sp-2); }
.sidecol form.searchform input[type="text"] { min-width: 0; width: 100%; }

/* The column's groups sit in a disclosure. Below 62rem that is all the
   reader sees of the column: one closed line before the list, because a
   repository with two dozen labels stacked the whole vocabulary under
   the content it filters. Above 62rem the summary is hidden and the
   content shown whatever the open state, so the column is what it
   always was. The @supports guard is the fail-safe: an engine without
   ::details-content keeps a working toggle at every width instead of
   losing the column (#237). */
.sidedrop > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 32px;
  padding: 0 var(--sp-3);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  color: var(--fg);
  font-size: var(--fs-2);
  cursor: pointer;
  list-style: none;
}
.sidedrop[open] > summary { margin-bottom: var(--sp-3); }
.sidedrop > summary::-webkit-details-marker { display: none; }
.sidedrop > summary:hover { background: var(--hover); }
.sidedrop > summary::after { content: "\25be"; color: var(--muted); }
.sidedrop[open] > summary::after { content: "\25b4"; }
.sideword { font-weight: 600; }
/* the filters in force: where you are */
.sideon { color: var(--warn); }
/* every group came out empty, so there is nothing to open */
.sidedrop:not(:has(.grp)) { display: none; }

@media (min-width: 62.01rem) {
  @supports selector(::details-content) {
    .sidedrop > summary { display: none; }
    .sidedrop::details-content { content-visibility: visible; }
  }
}

/* a sticky column taller than the viewport scrolls inside itself, or its
   tail is unreachable once the page scrolls. Above 62rem only: below it
   .filenav is hidden and the other two are static. .dashpins stops being
   a column at 80rem and resets both properties there. */
@media (min-width: 62.01rem) {
  .filenav, .sidecol, .dashgrid > aside { max-height: calc(100vh - 2 * var(--sp-4)); overflow-y: auto; }
}

.refchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font-family: var(--mono);
  font-size: var(--fs-2);
  font-weight: 500;
  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: " \25be"; 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(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  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(--link);
  font-family: var(--sans);
  border-top: 1px solid var(--faint);
  margin-top: var(--sp-1);
}

/* ---- repository overview layout ---- */
.overview { display: block; }
.overviewmain { min-width: 0; }
/* the side column exists only above 62rem; below it .facts keeps its
   own two-up layout and the 40rem factgrid rule applies untouched */
@media (min-width: 62.01rem) {
  .overview.withfacts { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-6); align-items: start; }
  .overview.withfacts .facts { display: block; margin-top: 0; max-width: none; }
  .overview.withfacts .facts .factgrid { grid-template-columns: repeat(2, auto); }
  .overview.withfacts .clone pre { white-space: pre-wrap; word-break: break-all; }
}

/* ---- repository facts ---- */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin: var(--sp-5) 0 var(--sp-4); max-width: 72rem; }
.facts h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.clone { margin: 0 0 var(--sp-3); }
.facts .about { min-width: 0; margin-bottom: var(--sp-5); }
.clone .fieldname { font-size: var(--fs-1); color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.clone pre { margin-bottom: var(--sp-3); user-select: all; }
.factgrid { display: grid; grid-template-columns: repeat(4, auto); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-2); margin-bottom: var(--sp-3); }
.factgrid b { font-weight: 600; }
.factgrid a { color: var(--fg); }
.factgrid a:hover { color: var(--link); }
.counts { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-3); font-size: var(--fs-2); }
.counts a { color: var(--fg); }
.counts a:hover { color: var(--link); }
.counts strong { font-weight: 600; }
.fact { color: var(--muted); }
.langbar { display: flex; height: 8px; margin: 0 0 var(--sp-2); border-radius: var(--r-ctl); overflow: hidden; gap: 1px; background: var(--faint); }
.langbar .lang { display: block; height: 100%; min-width: 2px; }
.langs { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-1); color: var(--muted); }
.langs .lang-name { display: inline-flex; align-items: center; gap: var(--sp-1); }
.langs .dot { width: 8px; height: 8px; }
/* named where it reads as the language's own colour, neutral otherwise */
.lang { background: var(--neutral); }
.lang-go { background: var(--lang-go); }
.lang-rust { background: var(--lang-rust); }
.lang-c, .lang-c- { background: var(--lang-c); }
.lang-python { background: var(--lang-python); }
.lang-javascript { background: var(--lang-javascript); }
.lang-typescript { background: var(--lang-typescript); }
.lang-shell { background: var(--lang-shell); }
.lang-ruby { background: var(--lang-ruby); }
.lang-java { background: var(--lang-java); }
.lang-swift { background: var(--lang-swift); }
.lang-html { background: var(--lang-html); }
.lang-css { background: var(--lang-css); }
.lang-org { background: var(--lang-org); }
.lang-markdown { background: var(--lang-markdown); }
.lang-emacs-lisp { background: var(--lang-emacs-lisp); }
.lang-nix { background: var(--lang-nix); }
.lang-sql { background: var(--lang-sql); }
.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); }
.teambody { padding: var(--sp-3); }
.teambody .memberchip { margin-right: var(--sp-2); }

/* ---- landing ---- */
/* the width class on main carries this too; the cap here keeps the page
   readable on the templates that do not set one yet */
.landing { max-width: 48rem; padding: var(--sp-6) 0; }
.landing h1 { font-size: var(--fs-6); display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.landing h1 .mark { width: 32px; height: 32px; }
.lede { font-size: var(--fs-4); color: var(--muted); line-height: 1.5; max-width: 40rem; margin: 0 0 var(--sp-5); }
pre.quickstart { margin: 0 0 var(--sp-4); }
.shot { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin: var(--sp-5) 0; }
.shot img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; object-position: top; }
.facets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin: var(--sp-5) 0; }
.facets h2 { font-size: var(--fs-3); margin: 0 0 var(--sp-1); }
.facets p { color: var(--muted); font-size: var(--fs-2); margin: 0; }
.routes { display: flex; gap: var(--sp-3); align-items: center; margin: var(--sp-4) 0 0; }

/* ---- profile ---- */
.profilehead { border-bottom: 1px solid var(--faint); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); }
.profilehead h1 { margin: 0 0 var(--sp-1); }
.profilehead .lede { font-size: var(--fs-3); margin: 0 0 var(--sp-1); }
.profilehead .meta { margin: var(--sp-1) 0 0; }
.activity { margin-bottom: var(--sp-5); }
h2 .count { background: none; color: var(--muted); font-weight: 400; font-size: var(--fs-2); margin-left: var(--sp-2); padding: 0; }
/* 53 week columns x 7 day rows, tinted with the link blue */
.actgraph-scroll { overflow-x: auto; padding-bottom: var(--sp-1); }
.actgraph { display: flex; gap: 3px; width: max-content; padding-top: 18px; }
.actweek { display: flex; flex-direction: column; gap: 3px; position: relative; }
.actmonth { position: absolute; top: -16px; left: 0; font-size: var(--fs-0); color: var(--muted); }
.actday { width: 11px; height: 11px; border-radius: 2px; background: var(--faint); }
.actday.pad { background: transparent; }
.actday.l0 { background: var(--faint); }
.actday.l1 { background: color-mix(in srgb, var(--link) 25%, var(--canvas)); }
.actday.l2 { background: color-mix(in srgb, var(--link) 50%, var(--canvas)); }
.actday.l3 { background: color-mix(in srgb, var(--link) 75%, var(--canvas)); }
.actday.l4 { background: var(--link); }
.actlegend { display: flex; align-items: center; gap: 3px; margin-top: var(--sp-2); font-size: var(--fs-0); color: var(--muted); }
.actlegend span:first-child { margin-right: var(--sp-1); }
.actlegend span:last-child { margin-left: var(--sp-1); }

/* ---- wiki ---- */
.wikilayout { display: flex; gap: var(--sp-5); align-items: flex-start; }
.wikipage { flex: 1; min-width: 0; }
.wikinav { flex: none; width: 15rem; }
.wikinav ul { list-style: none; margin: var(--sp-1) 0 var(--sp-4); padding: 0; }
.wikinav li a {
  display: block;
  padding: 5px var(--sp-2);
  border-radius: var(--r-ctl);
  color: var(--fg);
  font-size: var(--fs-2);
}
.wikinav li a:hover { background: var(--hover); color: var(--fg); text-decoration: none; }
.wikinav li a.active { background: var(--surface); color: var(--link); font-weight: 500; }

/* ---- misc ---- */
.meta { color: var(--muted); font-size: var(--fs-1); }
.muted { color: var(--muted); }
.desc, td.desc { color: var(--muted); }
.spacer { flex: 1; }
.compact { margin: 0; }
.name { min-width: 0; }
svg.icon { vertical-align: -0.125em; }
.sep { color: var(--muted); }
.owner { color: var(--muted); }
.title { margin: 0; }
.subject { min-width: 0; }
.sha { font-family: var(--mono); }
.when { color: var(--muted); }
.who { font-weight: 500; }
.was { color: var(--muted); }
.role { color: var(--muted); }
.age { color: var(--muted); }
.size { color: var(--muted); }
.review { font-size: var(--fs-2); }

/* ---- breakpoints ---- */
@media (max-width: 80rem) {
  .dashgrid { grid-template-columns: minmax(0, 1fr) 20rem; }
  /* not a column any more, so it neither sticks nor scrolls in itself */
  .dashgrid > .dashpins { grid-column: 1 / -1; position: static; max-height: none; overflow: visible; }
  /* a pinned block that is not a column is the chip row (spec rule 7) */
  .pins { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  /* the shorthand loses to .pins li:last-child, which drops the bottom
     border of the last chip -- and so of the second row */
  .pins li, .pins li:last-child { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--sp-1) var(--sp-3); }
  .pins .n, .dashpins .meta { display: none; }
}

@media (max-width: 62rem) {
  /* one column, the aside after the thread: a phone shows the
     description first, checks and reviewers after it (#232) */
  .withaside { grid-template-columns: 1fr; }

  /* rows go back to two lines where one does not fit */
  ul.issuelist.rows .issuemain, ul.repolist.rows li, ul.loglist.rows .commitmain { display: block; }
  ul.issuelist.rows .title, ul.repolist.rows .desc { white-space: normal; }
  /* a nowrap meta or topic line on one of these rows forces horizontal
     page scroll on a phone: a long branch name, a long owner/repo#N */
  ul.issuelist.rows .meta, ul.loglist.rows .meta,
  ul.repolist.rows .meta, ul.repolist.rows .topics { white-space: normal; }

  .dashgrid { grid-template-columns: 1fr; }
  .dashgrid > aside { position: static; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the tree page is the navigator on a phone */
  .blobgrid { grid-template-columns: 1fr; }
  .filenav { display: none; }

  /* the column is a closed disclosure before the content: a filter you
     reach without scrolling the list, and nothing to scroll past when
     you do not want it. It leads rather than follows because it is what
     the list is narrowed by, not a note on one row (#237) */
  .withcol, .withcol.narrow { grid-template-columns: 1fr; }
  .sidecol { position: static; margin-bottom: var(--sp-3); }
  .sidecol .grp { display: inline-block; vertical-align: top; margin-right: var(--sp-5); }
}

@media (max-width: 52rem) {
  main.content { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
  footer { padding: var(--sp-4); }
  .repohead { padding: var(--sp-3) 0 0; }
  .repohead .wrap { padding: 0 var(--sp-4); }
  /* seven tabs do not fit a phone in one row; a hidden scrollbar made the
     ones past the edge look absent. Two rows show all of them. */
  nav.tabs { flex-wrap: wrap; overflow: visible; }
  .facts { grid-template-columns: 1fr; }
  /* a phone shows the description under the name, not beside it */
  .repodesc { flex-basis: 100%; margin-left: 0; }
}

@media (max-width: 40rem) {
  .facets { grid-template-columns: 1fr; gap: var(--sp-4); }
  .wikilayout { flex-direction: column; align-items: stretch; }
  .wikinav { width: auto; }
  form.setform { grid-template-columns: 1fr; gap: var(--sp-2); }
  form.setform label { margin-top: 0; }
  /* the commit subject is the widest thing in a file table 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; }
  /* at 320px a nowrap name plus the age column overran the card by the
     cell padding and the card clipped the age; a long name wraps (#232) */
  table.tree td.name { white-space: normal; overflow-wrap: anywhere; }
  .clone pre { white-space: pre-wrap; word-break: break-all; }
  .pathbar { overflow-wrap: anywhere; }
  .readme .cardbody, .code { padding: var(--sp-3); }
  .thread { margin-left: var(--sp-3); }
  .blamehunk { flex-direction: column; gap: 0; }
  .blameinfo { width: auto; }
  .blamecode { border-left: 0; padding-left: var(--sp-3); width: 100%; }
  .factgrid { grid-template-columns: repeat(2, auto); }
  ul.loglist li { flex-wrap: wrap; }
  ul.loglist .commitside { width: 100%; justify-content: flex-start; }
}

/* Eleven 44px squares and the mark are 524px, so below 34rem the rail
   keeps five — dashboard, search, notifications, More, your avatar — and
   the More menu holds the rest. Shrinking the squares instead is what
   this replaces: 32px was under the target every phone guideline asks
   for, and the count only grows. */
@media (max-width: 34rem) {
  .railopt { display: none; }
  .railmore { display: block; }
  .railicon svg { width: 20px; height: 20px; }
  /* the mark is a link home too, so it is a target like the rest */
  a.brand { width: var(--rail-hit); }
}