/* NixOS brand palette, OKLCH, from NixOS/branding
   package-sets/top-level/nixos-branding/nixos-color-palette/colors.toml.
   Primer keeps its neutrals; these replace its hues. Primer's dark theme
   rule has three attribute selectors, so these need the extra `html` to win;
   the dark block must stay after the light one. */
html[data-color-mode][data-light-theme][data-dark-theme] {
  --fgColor-accent: oklch(0.45 0.09 264);
  --bgColor-accent-emphasis: oklch(0.55 0.12 264);
  --bgColor-accent-muted: oklch(0.95 0.02 264);
  --borderColor-accent-emphasis: oklch(0.55 0.12 264);
  --borderColor-accent-muted: oklch(0.85 0.07 264);
  --fgColor-success: oklch(0.45 0.09 152);
  --bgColor-success-emphasis: oklch(0.55 0.11 152);
  --borderColor-success-emphasis: oklch(0.55 0.11 152);
  --fgColor-attention: oklch(0.45 0.09 90);
  --bgColor-attention-muted: oklch(0.95 0.03 90);
  --borderColor-attention-emphasis: oklch(0.55 0.11 90);
  --fgColor-danger: oklch(0.45 0.09 16);
  --borderColor-danger-emphasis: oklch(0.55 0.11 16);
  --fgColor-done: oklch(0.45 0.09 288);
  --underlineNav-borderColor-active: oklch(0.75 0.12 240);
  --header-bgColor: oklch(0.35 0.07 264);
  --button-primary-bgColor-rest: oklch(0.55 0.12 264);
  --button-primary-bgColor-hover: oklch(0.5 0.12 264);
  --button-primary-bgColor-active: oklch(0.45 0.09 264);
  /* at least 3:1 on white */
  --focus-outlineColor: oklch(0.5 0.12 264);
  --fontStack-monospace:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "DejaVu Sans Mono", "Liberation Mono", "Noto Sans Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  html[data-color-mode][data-light-theme][data-dark-theme] {
    --fgColor-accent: oklch(0.75 0.12 240);
    --bgColor-accent-muted: oklch(0.55 0.12 264 / 0.2);
    --borderColor-accent-muted: oklch(0.75 0.12 240 / 0.4);
    --fgColor-success: oklch(0.75 0.12 152);
    --fgColor-attention: oklch(0.75 0.12 90);
    --bgColor-attention-muted: oklch(0.75 0.12 90 / 0.15);
    --fgColor-danger: oklch(0.75 0.12 16);
    --fgColor-done: oklch(0.75 0.12 288);
    --header-bgColor: oklch(0.25 0.05 264);
    --focus-outlineColor: oklch(0.75 0.12 240);
  }
}

/* @primer/css 22 ships tokens, utilities, Header, btn and Counter, but no
   longer Box, Label, UnderlineNav, Subhead or flash. These rebuild the few we
   use on Primer's own tokens, so both color modes follow. */
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica,
    Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.octicon {
  vertical-align: text-bottom;
}
a {
  color: var(--fgColor-accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.Link--primary {
  color: var(--fgColor-default) !important;
}
.Link--primary:hover {
  color: var(--fgColor-accent) !important;
}
.Header-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: #fff;
  font-weight: 600;
}

.UnderlineNav {
  border-bottom: 1px solid var(--borderColor-muted);
  overflow-x: auto;
}
.UnderlineNav-body {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.UnderlineNav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  color: var(--fgColor-default);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.UnderlineNav-item:hover {
  text-decoration: none;
  border-bottom-color: var(--borderColor-muted);
}
.UnderlineNav-item[aria-current] {
  font-weight: 600;
  border-bottom-color: var(--underlineNav-borderColor-active);
}

.Subhead {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borderColor-muted);
}
.Subhead-heading {
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}
.Subhead-description {
  color: var(--fgColor-muted);
}

.Box {
  border: 1px solid var(--borderColor-default);
  border-radius: 6px;
  background: var(--bgColor-default);
}
.Box-header,
.Box-footer {
  padding: 12px 16px;
  background: var(--bgColor-muted);
}
.Box-header {
  border-bottom: 1px solid var(--borderColor-default);
  border-radius: 6px 6px 0 0;
}
.Box-footer {
  border-top: 1px solid var(--borderColor-default);
}
.Box-row {
  padding: 12px 16px;
  border-top: 1px solid var(--borderColor-muted);
}
.Box-header + .Box-row,
.Box > .Box-row:first-child {
  border-top: 0;
}
.Box-body {
  padding: 16px;
}
.Box-row:hover {
  background: var(--bgColor-muted);
}

.Label {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  border: 1px solid var(--borderColor-default);
  border-radius: 2em;
  color: var(--fgColor-muted);
  vertical-align: middle;
}
.Label--accent {
  color: var(--fgColor-accent);
  border-color: var(--borderColor-accent-emphasis);
}
.Label--success {
  color: var(--fgColor-success);
  border-color: var(--borderColor-success-emphasis);
}
.Label--attention {
  color: var(--fgColor-attention);
  border-color: var(--borderColor-attention-emphasis);
}
.Label--danger {
  color: var(--fgColor-danger);
  border-color: var(--borderColor-danger-emphasis);
}

.flash {
  padding: 16px;
  border: 1px solid var(--borderColor-attention-emphasis);
  border-radius: 6px;
  background: var(--bgColor-attention-muted);
}
.blankslate {
  padding: 32px;
  text-align: center;
  color: var(--fgColor-muted);
}
.SegmentedControl-item.selected {
  background: var(--bgColor-accent-muted);
  border-color: var(--borderColor-accent-emphasis);
}
.branch-name {
  padding: 0 6px;
  font-family: var(--fontStack-monospace);
  font-size: 12px;
  color: var(--fgColor-accent);
  background: var(--bgColor-accent-muted);
  border-radius: 6px;
}
/* Prose stays narrow to read well; a table may use the full width and
   scrolls inside its own border when it is wider. */
.markdown-body > :not(table) {
  max-width: 860px;
}
.markdown-body table {
  border-collapse: collapse;
  margin: 16px 0;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--borderColor-default);
  border-radius: 6px;
}
.markdown-body tr > :first-child {
  border-left: 0;
}
.markdown-body tr > :last-child {
  border-right: 0;
}
.markdown-body thead tr:first-child > *,
.markdown-body tbody:first-child tr:first-child > * {
  border-top: 0;
}
.markdown-body tbody tr:last-child > * {
  border-bottom: 0;
}
.markdown-body .numbers td {
  white-space: nowrap;
}
.markdown-body details {
  margin-bottom: 16px;
}
.markdown-body summary {
  cursor: pointer;
}
.Header :focus-visible {
  outline-color: oklch(0.75 0.12 240);
}
.markdown-body th,
.markdown-body td {
  border: 1px solid var(--borderColor-default);
  padding: 6px 13px;
}
.markdown-body code {
  background: var(--bgColor-neutral-muted);
  padding: 0.2em 0.4em;
  border-radius: 6px;
  font-size: 85%;
}
.markdown-body pre {
  background: var(--bgColor-muted);
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
}
.markdown-body pre code {
  background: none;
  padding: 0;
}
.diff {
  margin: 0;
  padding: 8px 0;
  overflow-x: auto;
  font-family: var(--fontStack-monospace);
  font-size: 12px;
  line-height: 20px;
}
.diff span {
  display: block;
  min-width: max-content;
  padding: 0 16px;
  white-space: pre;
}
.diff .diff-add {
  background: var(--bgColor-success-muted);
}
.diff .diff-del {
  background: var(--bgColor-danger-muted);
}
.diff .diff-hunk {
  color: var(--fgColor-muted);
  background: var(--bgColor-accent-muted);
}
.diff .diff-note {
  color: var(--fgColor-muted);
}
.markdown-body h2 {
  margin-top: 32px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borderColor-muted);
}
.flux {
  background: var(--bgColor-attention-muted);
  border-bottom: 1px solid var(--borderColor-attention-emphasis);
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.page-head-main {
  flex: 1 1 320px;
  min-width: 0;
}
.page-actions,
.subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
section.Box > .Box-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.Box-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.kv {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.kv-label {
  min-width: 140px;
  font-weight: 600;
}
.callout {
  padding: 16px;
  border: 1px solid var(--borderColor-default);
  border-radius: 6px;
  background: var(--bgColor-muted);
}
.gap-1 {
  gap: 4px;
}
.gap-2 {
  gap: 8px;
}
.gap-3 {
  gap: 16px;
}
.gap-4 {
  gap: 24px;
}
.inline-form {
  display: flex;
  gap: 8px;
  max-width: 560px;
}
.pre-wrap {
  white-space: pre-wrap;
}
.input-narrow {
  max-width: 140px;
}

.menu {
  position: relative;
}
.menu > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu-login {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 10;
  min-width: 180px;
  padding: 4px 0;
  background: var(--overlay-bgColor, var(--bgColor-default));
  border: 1px solid var(--borderColor-default);
  border-radius: 6px;
  box-shadow: var(--shadow-floating-small);
}
.menu-list a,
.menu-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 16px;
  color: var(--fgColor-default);
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-list a:hover,
.menu-list button:hover {
  background: var(--bgColor-muted);
  text-decoration: none;
}
.menu-sep {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--borderColor-muted);
}

/* Four tabs must fit a 390px phone. */
@media (max-width: 420px) {
  .UnderlineNav-item .octicon {
    display: none;
  }
  .UnderlineNav-body {
    gap: 4px;
  }
}
.text-nowrap {
  white-space: nowrap;
}
.Subhead-heading {
  overflow-wrap: anywhere;
}
@media (max-width: 543px) {
  .Subhead-heading {
    font-size: 20px;
  }
  .page-actions {
    width: 100%;
  }
  .page-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}
.col-grow {
  flex: 1 1 280px;
  min-width: 0;
}
/* Primer's clearfix on .subnav becomes a flex item and shifts the first
   row by one gap. */
.subnav::before,
.subnav::after {
  display: none;
}