/*
 * Code-reference badges.
 *
 * Rendered by the CodeRefsMixin (shadcn/plugins/mixins/code_refs.py) from
 * authored markdown links using the custom `repo:` / `endpoint:` URI schemes.
 * Two-cell inline pills with a subtle outer boundary and an inner divider,
 * split into a left cell (icon + label or method) and a right cell (line range
 * or path).
 *
 * Loaded only when `theme.code_refs` is set (head.html gates the <link>), so
 * sites that don't use code refs never fetch it.
 *
 * Colour fidelity: every surface is bound to the theme's design tokens
 * (`--muted`, `--foreground`, `--border`, …), which the theme redefines under
 * `.dark`. So the badge inherits the page's exact warm light/dark surfaces and
 * border colour automatically — no hardcoded greys, no separate `.dark` block
 * (except the method accent, which flips to its brighter dark-mode variant).
 * The second tone is derived from `--muted` via `color-mix`, so the right cell
 * stays a consistent step away from the left in both themes.
 *
 * Class contract (kept in lockstep with the mixin):
 *   .md-coderef                 base pill (anchor)
 *   .md-coderef--file           file-reference variant
 *   .md-coderef--endpoint       endpoint-reference variant
 *   .md-coderef--<method>       get|post|put|patch|delete (endpoint tint)
 *   .md-coderef__icon           GitHub octicon (file variant)
 *   .md-coderef__label          label cell (filename / path)
 *   .md-coderef__lines          right-cell line range (file variant)
 *   .md-coderef__method         left method cell (endpoint variant)
 */

.md-coderef {
  display: inline-flex;
  align-items: stretch;
  vertical-align: baseline;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.75rem; /* text-xs */
  line-height: 1.2;
  border: 1px solid var(--border);
  /* Sharp, near-square corners — a crisp technical pill, not a lozenge. */
  border-radius: 0.25rem;
  overflow: hidden;
  text-decoration: none !important;
  white-space: nowrap;
  /* `overflow: hidden` clips the CONTENTS; it does not cap the BOX. An
     inline-flex with nowrap children sizes to max-content, so a long path
     made the pill wider than the column and scrolled the whole page — 350px
     of pill in a 238px list item. This is the cap; the label cell below is
     what gives up the space. */
  max-width: 100%;
  /* Breathing room against the prose. A badge carries a border and a filled
     second cell, so it reads as an OBJECT in the sentence rather than as a
     run of words — and at zero margin its border sat directly against the
     next character, which looked like a typesetting mistake. The only
     separation was the space in the source markdown (~0.25em at this size),
     so the sentence "see repo:action.yml for details" had its border almost
     touching the "f".

     0.25em per side doubles that to ~0.5em. In `em` rather than `rem` so it
     tracks the badge's own 0.75rem type: the gap stays proportional wherever
     a consumer resizes the pill. Inline margins collapse with neither each
     other nor the surrounding text, so two adjacent badges get the full
     0.5em between them, which is the intent.

     Vertical margin stays 0 — this is an inline element inside a line of
     prose, and adding block margin would perturb the line box. */
  margin-inline: 0.25em;
  transition: border-color 0.12s ease;
  /* Second tone: one consistent step away from --muted, in both themes. */
  --cr-base: var(--muted);
  --cr-step: color-mix(in srgb, var(--muted) 84%, var(--foreground) 16%);
}

.md-coderef:hover {
  border-color: color-mix(in srgb, var(--border), var(--foreground) 30%);
}

.md-coderef__label,
.md-coderef__lines,
.md-coderef__method {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
}

/* The label is the cell that yields when the pill hits its cap: the line
   range and the method are short and fixed, and truncating either would
   destroy the reference. A path truncates legibly — the tail is still there
   to read once there is room, and the title attribute carries the whole of
   it. */
.md-coderef__label {
  gap: 0.34rem;
  color: var(--foreground);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-coderef__lines,
.md-coderef__method {
  flex: 0 0 auto;
}

.md-coderef__icon {
  flex: 0 0 auto;
  opacity: 0.5;
}

/* ── File variant ─────────────────────────────────────────────────────── */

.md-coderef--file .md-coderef__label {
  background: var(--cr-base);
}

.md-coderef--file .md-coderef__lines {
  background: var(--cr-step);
  color: var(--muted-foreground);
  border-left: 1px solid var(--border);
}

/* ── Endpoint variant ─────────────────────────────────────────────────── */

/* The method cell (left) carries the tint; the path cell (right) is the neutral
 * theme surface. A divider separates them; the outer boundary frames the pill. */
.md-coderef--endpoint .md-coderef__method {
  background: color-mix(
    in srgb,
    var(--cr-accent, var(--muted-foreground)) 16%,
    var(--cr-base)
  );
  color: var(--cr-accent, var(--foreground));
  font-weight: 600;
  letter-spacing: 0.02em;
  border-right: 1px solid var(--border);
}

.md-coderef--endpoint .md-coderef__label {
  background: var(--cr-base);
  color: var(--foreground);
}

/* Method accents — GitHub's semantic palette (matches the theme's admonition
 * accents); flips to the brighter set under .dark for contrast on dark
 * surfaces. The `--cr-accent` token feeds both the text and the tinted cell. */
.md-coderef--get {
  --cr-accent: #1a7f37;
}
.md-coderef--post {
  --cr-accent: #0969da;
}
.md-coderef--put,
.md-coderef--patch {
  --cr-accent: #9a6700;
}
.md-coderef--delete {
  --cr-accent: #cf222e;
}

.dark .md-coderef--get {
  --cr-accent: #3fb950;
}
.dark .md-coderef--post {
  --cr-accent: #58a6ff;
}
.dark .md-coderef--put,
.dark .md-coderef--patch {
  --cr-accent: #d29922;
}
.dark .md-coderef--delete {
  --cr-accent: #f85149;
}