/* 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);
  overflow-wrap: anywhere;
}
.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-list a[aria-current] {
  font-weight: 600;
  box-shadow: inset 2px 0 0
    var(--underlineNav-borderColor-active, var(--fgColor-accent));
  background: var(--bgColor-muted);
}
.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 !important;
  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;
}
.needs-item:focus,
.needs-item.needs-sel {
  outline: 2px solid var(--focus-outlineColor);
  outline-offset: -2px;
  background: var(--bgColor-accent-muted);
}
.needs-keys kbd {
  display: inline-block;
  padding: 0 4px;
  font: 11px var(--fontStack-monospace);
  line-height: 16px;
  border: 1px solid var(--borderColor-default);
  border-radius: 4px;
}
/* Keys need a keyboard: a phone shows no hint. */
@media (max-width: 543px) {
  .needs-keys {
    display: none;
  }
}

.decide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  border-top: 1px solid var(--borderColor-muted);
}
.decide-block {
  min-width: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borderColor-muted);
  overflow-wrap: anywhere;
}
.decide-wide {
  grid-column: 1 / -1;
  border-bottom: 0;
}
.decide-title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fgColor-muted);
}
.decide-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.decide-list li + li {
  margin-top: 2px;
}
.decide-label {
  font-weight: 600;
  margin-right: 4px;
}
.decide-list summary {
  padding: 4px 0;
  cursor: pointer;
}

/* side-by-side blocks wrap on a phone instead of squeezing: a table
   block wants 280px, a number card 140px; min-width 0 then lets a
   table scroll inside its own box; Primer utilities are !important */
.d-flex.flex-wrap > .flex-1 {
  flex: 1 1 280px !important;
  min-width: 0;
}
.d-flex.flex-wrap > .Box.flex-1 {
  flex-basis: 140px !important;
}
.color-fg-attention {
  overflow-wrap: anywhere;
}