/* @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 {
  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-row:hover {
  background: var(--bgColor-muted);
}

.Label {
  display: inline-block;
  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--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: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--fgColor-accent);
  background: var(--bgColor-accent-muted);
  border-radius: 6px;
}
.markdown-body {
  max-width: 860px;
}
.markdown-body table {
  border-collapse: collapse;
  margin: 16px 0;
  display: block;
  overflow-x: auto;
}
.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;
}
.markdown-body h2 {
  margin-top: 32px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borderColor-muted);
}