/*
 * Fase L — Markdoc tag visual styling.
 *
 * Endpoint headers, parameter tables, error tables, callouts, retry
 * policy, examples, xor-rule, admin notes, field, try-it link.
 *
 * Callouts use Heroicons outline (MIT) as inline SVG data URLs — not
 * Unicode emoji. The stroke color is hardcoded per variant in the
 * light mode rule; a `[data-theme="dark"]` override swaps in a
 * lighter stroke for dark mode contrast.
 *
 * Badges read from the dual-variant tokens (-fg + -bg) so text on a
 * tinted bg meets WCAG AA 4.5:1.
 */

/* ====================================================================
 * Endpoint header
 * ==================================================================*/
.endpoint-header {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-6) 0;
  background: var(--color-bg-subtle);
}

.endpoint-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.endpoint-method {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

/* Dual-variant badge wiring: header[data-method] OR span[data-method] */
[data-method="get"] .endpoint-method,
.endpoint-method[data-method="get"] {
  color: var(--badge-get-fg);
  background: var(--badge-get-bg);
}

[data-method="post"] .endpoint-method,
.endpoint-method[data-method="post"] {
  color: var(--badge-post-fg);
  background: var(--badge-post-bg);
}

[data-method="put"] .endpoint-method,
.endpoint-method[data-method="put"] {
  color: var(--badge-put-fg);
  background: var(--badge-put-bg);
}

[data-method="patch"] .endpoint-method,
.endpoint-method[data-method="patch"] {
  color: var(--badge-patch-fg);
  background: var(--badge-patch-bg);
}

[data-method="delete"] .endpoint-method,
.endpoint-method[data-method="delete"] {
  color: var(--badge-delete-fg);
  background: var(--badge-delete-bg);
}

.endpoint-path {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-text);
  background: transparent;
  padding: 0;
}

/* Audience tier badge in the endpoint header — only renders when the
 * operation's x-audience is `system` (platform-internal). Today the
 * audience-rank filter already hides system endpoints from
 * visitor/m2m viewers, so this badge ships only to admin (and future
 * system-integrator) viewers. The visual cue tells them: this is not
 * an integration endpoint, it's a platform-internal surface.
 *
 * Purple matches the existing `--badge-patch-*` palette which is the
 * same color used for admin signaling elsewhere in the docs. */
.endpoint-audience-badge {
  margin-left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: help;
  user-select: none;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.endpoint-audience-system {
  color: var(--badge-patch-fg);
  background: var(--badge-patch-bg);
  border: 1px solid var(--badge-patch-base);
}

/* Auth-scheme badges in the metadata band. Replaces the previous
 * `x-channel: api_key | cookie | both` text after the 2026-05-20
 * cleanup; security schemes are now derived directly from
 * `op.security[]` (with global-default fallback). Cookie badge is
 * audience-filtered: only admin viewers see it (the Endpoint.astro
 * transform filters it out for visitor/m2m).
 */
.endpoint-auth-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
}

.auth-badge {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.025em;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
}

.auth-badge-apikeyauth {
  color: var(--badge-get-fg);
  background: var(--badge-get-bg);
  border: 1px solid var(--badge-get-base);
}

.auth-badge-cookieauth {
  color: var(--badge-patch-fg);
  background: var(--badge-patch-bg);
  border: 1px solid var(--badge-patch-base);
}

.endpoint-summary {
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  margin-bottom: 0;
  line-height: var(--leading-snug);
}

/* El propio <dl class="endpoint-meta"> es la lista; cada <div> es un par
   etiqueta+valor apilado (label arriba, valor abajo), y los pares se separan
   por el gap vertical del flex. */
.endpoint-meta {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.endpoint-meta > div {
  display: block;
}

.endpoint-meta dt {
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

.endpoint-meta dd {
  margin: 0;
  color: var(--color-text);
}

.endpoint-meta code {
  font-family: var(--font-display);
  font-size: var(--text-sm);
}

.endpoint-extdocs {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* ====================================================================
 * Tables (params-table + response-table + error-table)
 * ==================================================================*/
/* `.layout-main table:not([class])` catches plain Markdown tables in
 * prose (concepts, how-to) — they carry no class, so they inherit the
 * same look as the spec-derived reference tables. */
.params-table,
.response-table,
.error-table,
.layout-main table:not([class]) {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
}

.params-table caption,
.response-table caption,
.error-table caption,
.layout-main table:not([class]) caption {
  text-align: left;
  padding: var(--space-2) 0;
  font-weight: var(--weight-semibold);
  font-family: var(--font-display);
  color: var(--color-text);
  caption-side: top;
}

.params-table th,
.response-table th,
.error-table th,
.layout-main table:not([class]) th {
  background: var(--color-bg-subtle);
  text-align: left;
  padding: var(--space-3);
  border-bottom: 2px solid var(--color-border);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.params-table td,
.response-table td,
.error-table td,
.layout-main table:not([class]) td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text);
}

.params-table tbody tr:hover,
.response-table tbody tr:hover,
.error-table tbody tr:hover,
.layout-main table:not([class]) tbody tr:hover {
  background: var(--color-bg-hover);
}

.params-table .param-name,
.response-table .param-name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  background: transparent;
  padding: 0;
}

.params-table .param-type,
.response-table .param-type {
  font-family: var(--font-display);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Constraint hint (p.ej. "(?–100)") retirado: el rango se renderiza con
   mínimos/máximos desconocidos como "?", lo que resulta engañoso. Oculto
   en params-table y response-table. */
.params-table .param-constraint-hint,
.response-table .param-constraint-hint {
  display: none;
}

.params-table .param-description,
.response-table .param-description {
  margin: 0;
  line-height: var(--leading-snug);
}

.params-table .param-example,
.response-table .param-example {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.badge-required {
  color: var(--badge-delete-fg);
  background: var(--badge-delete-bg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-family: var(--font-display);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: lowercase;
}

/* Gray pill for non-required params. */
.badge-optional {
  display: inline-block;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: capitalize;
}

/* Orange pill for mutually-exclusive ("required unless X is sent")
 * params, derived from the parent schema's anyOf/oneOf. */
.badge-mutex {
  display: inline-block;
  color: var(--color-warning);
  background: var(--callout-warning-bg);
  border: 1px solid var(--color-warning);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

/* ====================================================================
 * Per-property slot badges — nullable / read-only / write-only /
 * deprecated. Painted by Param / Field / ResponseTable when the spec
 * carries the corresponding flag. Kept compact so 3-4 badges fit next
 * to the type label without breaking the row scan.
 * ==================================================================*/
.badge-slot {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  margin-left: var(--space-1);
  letter-spacing: 0.025em;
  vertical-align: baseline;
  border: 1px solid transparent;
}

.badge-slot-nullable {
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
}

.badge-slot-readonly {
  color: var(--badge-get-fg);
  background: var(--badge-get-bg);
}

.badge-slot-writeonly {
  color: var(--badge-post-fg);
  background: var(--badge-post-bg);
}

.badge-slot-deprecated {
  color: var(--badge-delete-fg);
  background: var(--badge-delete-bg);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
}

/* Strike-through deprecated names so the badge + visual carry the
 * signal redundantly (WCAG 1.4.1 — colour is not the sole indicator). */
.is-deprecated,
[data-deprecated="true"] .param-name,
[data-deprecated="true"] .field-name {
  text-decoration: line-through;
  text-decoration-color: var(--color-text-subtle);
}

/* "Default: <value>" line under the description. Reused by Param,
 * Field, and ResponseTable rows. */
.param-default,
.field-default {
  margin: var(--space-1) 0 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-display);
}

.param-default code,
.field-default code {
  font-size: var(--text-xs);
}

/* ====================================================================
 * Request-params — {% request-params %} location badge + figure reset
 * ==================================================================*/
/* The render wraps the table in a <figure>; cancel the UA margin so the
 * table aligns with surrounding prose (same treatment as other tags). */
.params-table-wrap {
  margin: 0;
}

/* Wide tables scroll inside their wrapper on narrow screens instead of
 * widening the page (which would force a whole-page zoom-out on phones). */
.response-table-wrap,
.status-codes-wrap,
.error-table-wrap,
.response-headers-wrap,
.params-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* Inside tables, code tokens (param/field names, inline code) stay whole
 * — the global `code { overflow-wrap: anywhere }` (a phone-overflow guard
 * for prose) would otherwise let the column squish and break a name like
 * `referencia_numerica` mid-word. The table keeps its structure and the
 * wrapper scrolls horizontally instead. */
.layout-main table code {
  overflow-wrap: normal;
}

@media (max-width: 768px) {
  /* Don't compact the param/response tables on phones: keep a comfortable
     width so columns stay readable, and let the wrapper scroll. */
  .params-table,
  .response-table,
  .status-codes,
  .error-table,
  .response-headers {
    min-width: 40rem;
  }

  /* Markdown prose tables have no figure wrapper — make the table itself
     the horizontal scroll box. They carry no caption, so block display is
     safe here. */
  .layout-main table:not([class]) {
    display: block;
    overflow-x: auto;
  }
}

/* "Ubicación" column chip — path / query / header. Mono, subtle, with a
 * per-location accent so the request shape reads at a glance. */
.param-in {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.param-in-path {
  color: var(--badge-put-fg, var(--color-link));
  background: var(--badge-put-bg, var(--color-bg-subtle));
}

.param-in-header {
  color: var(--color-text-subtle);
}

/* ====================================================================
 * Response-table — section subtitle + response headers subsection
 * ==================================================================*/
.response-table-subtitle {
  margin: var(--space-4) 0 var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.response-table-subtitle strong {
  font-family: var(--font-display);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.025em;
}

.response-table-subtitle-text {
  color: var(--color-text-muted);
}

/* Descripción del status DENTRO del caption (bajo "Respuesta 200 Schema"):
   propia línea, en prosa sans, no en el mono/semibold del caption. */
.response-table caption .response-table-subtitle-text {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  letter-spacing: normal;
  text-transform: none;
  line-height: var(--leading-snug);
}

.response-table-headers {
  margin: var(--space-3) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.response-table-headers > summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}

.response-table-headers > summary:hover {
  color: var(--color-text);
}

.response-table-headers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--color-bg);
}

.response-table-headers-table th {
  background: var(--color-bg-subtle);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.response-table-headers-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.response-table-headers-table tr:last-child td {
  border-bottom: 0;
}

.response-header-name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
}

.response-header-example {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.response-table-description {
  margin: 0;
  line-height: var(--leading-snug);
}

/* ====================================================================
 * Error table — status badges
 * ==================================================================*/
.error-table-wrap {
  margin: var(--space-6) 0;
}

/* Per-row error envelope expander. Shows title, source pointer,
 * meta keys, request_id, and response headers (e.g. Retry-After for
 * 429). Folded by default to keep the table scannable. */
.error-envelope {
  margin-top: var(--space-2);
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-3);
}

.error-envelope > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}

.error-envelope > summary:hover {
  color: var(--color-text);
}

.error-envelope-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0;
  font-size: var(--text-xs);
}

.error-envelope-dl > dt {
  color: var(--color-text-muted);
  font-family: var(--font-display);
}

.error-envelope-dl > dd {
  margin: 0;
  color: var(--color-text);
}

.error-envelope-headers {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}

.error-envelope-headers > strong {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.error-envelope-headers ul {
  margin: 0;
  padding-left: var(--space-4);
}

.error-envelope-header-type {
  color: var(--color-text-muted);
}

.error-envelope-header-desc {
  color: var(--color-text-muted);
}

.error-table-detail {
  margin: 0;
  line-height: var(--leading-snug);
}

.error-table .badge-status {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.025em;
  display: inline-block;
}

.error-table .badge-4xx {
  color: var(--badge-4xx-fg);
  background: var(--badge-4xx-bg);
}

.error-table .badge-5xx {
  color: var(--badge-5xx-fg);
  background: var(--badge-5xx-bg);
}

/* ====================================================================
 * Callouts — SVG icons via data: URL (Heroicons outline, MIT)
 * ==================================================================*/
.callout {
  border-left: 4px solid;
  padding: var(--space-4);
  margin: var(--space-6) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  align-items: start;
  color: var(--color-text);
}

.callout::before {
  content: '';
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-top: 2px;
}

.callout > * {
  margin: 0;
}

.callout > * + * {
  margin-top: var(--space-2);
}

.callout p:last-child {
  margin-bottom: 0;
}

/* Variant: info */
.callout-info {
  border-color: var(--callout-info-border);
  background: var(--callout-info-bg);
}

.callout-info::before {
  /* Heroicons outline "information-circle" — stroke #2563eb (blue-600) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232563eb'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z' /%3E%3C/svg%3E");
}

/* Variant: warning */
.callout-warning {
  border-color: var(--callout-warning-border);
  background: var(--callout-warning-bg);
}

.callout-warning::before {
  /* Heroicons outline "exclamation-triangle" — stroke #d97706 (amber-600) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23d97706'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z' /%3E%3C/svg%3E");
}

/* Variant: danger */
.callout-danger {
  border-color: var(--callout-danger-border);
  background: var(--callout-danger-bg);
}

.callout-danger::before {
  /* Heroicons outline "x-circle" — stroke #dc2626 (red-600) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23dc2626'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
}

/* Variant: success */
.callout-success {
  border-color: var(--callout-success-border);
  background: var(--callout-success-bg);
}

.callout-success::before {
  /* Heroicons outline "check-circle" — stroke #059669 (emerald-600) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23059669'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
}

/* Dark mode: lighter stroke colors for contrast */
[data-theme="dark"] .callout-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2360a5fa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z' /%3E%3C/svg%3E");
}

[data-theme="dark"] .callout-warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fbbf24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z' /%3E%3C/svg%3E");
}

[data-theme="dark"] .callout-danger::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23f87171'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
}

[data-theme="dark"] .callout-success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2334d399'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
}

/* ====================================================================
 * Try-it link — Stripe-style outlined button with hover lift
 * ==================================================================*/
.try-it,
.try-it-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

/* Footer bar fused to the bottom of the preceding code card — the
 * "Probar en el playground" CTA reads as that card's footer rather than
 * a free-floating link. The card drops its bottom radius/margin so the
 * two pieces meet seamlessly. */
.code-tabs.example:has(+ .try-it-footer) {
  margin-bottom: 0;
}

.code-tabs:has(+ .try-it-footer) .code-tabs__card {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.try-it-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-6) 0;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Small primary button. */
.try-it-footer .try-it-link {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.try-it-footer .try-it-link:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12));
  text-decoration: none;
}

/* ====================================================================
 * Retry policy — card with border + dl grid
 * ==================================================================*/
.retry-policy {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-6) 0;
  background: var(--color-bg-subtle);
}

.retry-policy h4,
.retry-policy h5 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.retry-policy dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
}

.retry-policy dl > div {
  display: contents;
}

.retry-policy dt {
  color: var(--color-text-muted);
  font-family: var(--font-display);
}

.retry-policy dd {
  margin: 0;
  color: var(--color-text);
}

/* ====================================================================
 * Example — figure + figcaption with Shiki code-block container
 * ==================================================================*/
.example {
  margin: var(--space-6) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Header bar for the manual / auto example branches. The code-tabs
 * branch uses `.example-caption` instead — a response-table-style title
 * above the card — so it is explicitly excluded here. */
.example figcaption:not(.example-caption) {
  background: var(--color-bg-subtle);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}

.example pre {
  margin: 0;
  border-radius: 0;
  border: 0;
  /* surface comes from /styles/shiki.css (pre.shiki) — github-dark */
}

/* ====================================================================
 * Xor-rule — aside with accent border-left
 * ==================================================================*/
.xor-rule {
  border-left: 3px solid var(--color-link);
  background: var(--color-bg-subtle);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.xor-rule strong {
  color: var(--color-link);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
}

/* ====================================================================
 * Admin notes — muted purple accent (admin-audience signal)
 * ==================================================================*/
.admin-notes {
  border-left: 3px solid hsl(280 65% 60%);
  background: hsl(280 65% 97%);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

[data-theme="dark"] .admin-notes {
  background: hsl(280 65% 14%);
}

.admin-notes::before {
  content: 'Admin';
  display: inline-block;
  padding: 2px var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--weight-bold);
  color: hsl(280 65% 40%);
  background: hsl(280 65% 95%);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

[data-theme="dark"] .admin-notes::before {
  color: hsl(280 65% 75%);
  background: hsl(280 65% 18%);
}

/* ====================================================================
 * Field — concept-page schema description block
 * ==================================================================*/
.field {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.field-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.field-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.field-type {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ====================================================================
 * Concept — wrapper for {% concept %} body
 * ==================================================================*/
.concept {
  margin: var(--space-6) 0;
}

/* ====================================================================
 * F1 — Deprecation banner (inside endpoint header)
 * ==================================================================*/
.endpoint-deprecated {
  display: block;
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--badge-delete-fg, hsl(0 84% 50%));
  background: var(--badge-delete-bg, hsl(0 84% 96%));
  color: var(--color-text);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
}

[data-theme="dark"] .endpoint-deprecated {
  background: hsl(0 30% 15%);
}

.endpoint-deprecated strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-xs);
  margin-right: var(--space-2);
  color: var(--badge-delete-fg, hsl(0 84% 35%));
}

.endpoint-deprecated-replacement {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
}

/* ====================================================================
 * F2 — Server selector (inside endpoint header)
 * ==================================================================*/
.endpoint-servers {
  display: inline-flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.endpoint-server-option {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.endpoint-server-option[aria-pressed="true"] {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

.endpoint-server-option:hover {
  color: var(--color-text);
}

.endpoint-server-prefix {
  color: var(--color-text-subtle);
  font-size: 0.9em;
}

/* ====================================================================
 * F6 — Operation-level admin notes (auto-pulled from x-admin-notes)
 * Inherits .admin-notes styling; this variant adds a top margin so it
 * floats below the endpoint header cleanly.
 * ==================================================================*/
.endpoint-admin-notes {
  margin-top: var(--space-3);
}

.endpoint-admin-notes p {
  margin: var(--space-2) 0 0 0;
}

/* ====================================================================
 * F3 — Schema cross-link (inline)
 * ==================================================================*/
.schema-link {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}

.schema-link:hover {
  color: var(--color-link-hover);
  border-bottom-style: solid;
}

.schema-link code {
  font-family: var(--font-display);
  background: transparent;
  padding: 0;
  color: inherit;
}

/* ====================================================================
 * F4 — XOR rule branch inventory
 * ==================================================================*/
.xor-rule-branches {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0 0;
}

/* Inline layout: all branches of the same anyOf/oneOf group live on
 * one line (wraps if narrow) with a small "o" / "or" between each
 * pair. Reads naturally as "X o Y o Z". The big-rule separator
 * (`.xor-rule-sep--block`) is reserved for FUTURE multi-group
 * support — when a schema declares more than one xor group, those
 * groups would be stacked with the block separator between them. */
.xor-rule-branches--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.xor-rule-branch {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
}

.xor-rule-sep--inline {
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  padding: 0 var(--space-1);
  user-select: none;
}

/* Big horizontal rule for separating multi-group xor rules (future).
 * Stays in the stylesheet so the renderer can opt in via a class
 * swap when group-bearing schemas land. */
.xor-rule-sep--block {
  display: flex;
  align-items: center;
  margin: var(--space-3) 0;
  height: 1px;
  background: var(--color-border);
  width: 100%;
}

.xor-rule-branch-name {
  display: inline-flex;
  gap: var(--space-2);
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
}

.xor-rule-branch-discriminator-value {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-normal);
}

.xor-rule-branch-snapshot {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: baseline;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.xor-rule-branch-type {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.xor-rule-branch code {
  font-family: var(--font-display);
}

.xor-rule-discriminator {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.xor-rule-discriminator summary {
  cursor: pointer;
  font-family: var(--font-display);
}

.xor-rule-discriminator summary strong {
  margin-right: var(--space-2);
}

.xor-rule-discriminator-table {
  width: auto;
  margin-top: var(--space-2);
  border-collapse: collapse;
}

.xor-rule-discriminator-table th,
.xor-rule-discriminator-table td {
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: var(--text-xs);
}

.xor-rule-discriminator-table th {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

/* ====================================================================
 * F5 — Auto-pulled examples list
 * ==================================================================*/
.example-auto-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.example-auto-entry {
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
}

.example-auto-entry:first-child {
  border-top: 0;
}

.example-auto-summary {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.example-auto-name {
  background: var(--color-bg-subtle);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.example-auto-summary-text {
  margin-left: var(--space-1);
}

.example-auto-description {
  margin: var(--space-2) 0 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.example-source-badge {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: lowercase;
}

/* ====================================================================
 * F8 — Response headers table (inherits params/response/error styling)
 * ==================================================================*/
.response-headers-wrap {
  margin: var(--space-6) 0;
}

.response-headers {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.response-headers caption {
  text-align: left;
  padding: var(--space-2) 0;
  font-weight: var(--weight-semibold);
  font-family: var(--font-display);
  color: var(--color-text);
  caption-side: top;
}

.response-headers-status {
  margin-left: var(--space-2);
  font-family: var(--font-display);
  color: var(--color-text-muted);
}

.response-headers th {
  background: var(--color-bg-subtle);
  text-align: left;
  padding: var(--space-3);
  border-bottom: 2px solid var(--color-border);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.response-headers td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text);
}

.response-headers tbody tr:hover {
  background: var(--color-bg-hover);
}

.response-headers code {
  font-family: var(--font-display);
}

/* ====================================================================
 * Status codes — overview matrix for `{% status-codes %}` (2xx-5xx)
 * ==================================================================*/
.status-codes-wrap {
  margin: var(--space-6) 0;
}

.status-codes {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.status-codes caption {
  text-align: left;
  padding: var(--space-2) 0;
  font-weight: var(--weight-semibold);
  font-family: var(--font-display);
  color: var(--color-text);
  caption-side: top;
}

.status-codes-source {
  margin-left: var(--space-2);
  font-family: var(--font-display);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.status-codes th {
  background: var(--color-bg-subtle);
  text-align: left;
  padding: var(--space-3);
  border-bottom: 2px solid var(--color-border);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.status-codes td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text);
}

.status-codes tbody tr:hover {
  background: var(--color-bg-hover);
}

.status-codes .badge-status {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.025em;
  display: inline-block;
}

.status-codes .badge-2xx {
  color: var(--badge-2xx-fg);
  background: var(--badge-2xx-bg);
}

.status-codes .badge-3xx {
  color: var(--badge-3xx-fg);
  background: var(--badge-3xx-bg);
}

.status-codes .badge-4xx {
  color: var(--badge-4xx-fg);
  background: var(--badge-4xx-bg);
}

.status-codes .badge-5xx {
  color: var(--badge-5xx-fg);
  background: var(--badge-5xx-bg);
}

.status-codes-klass {
  font-family: var(--font-display);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.status-codes-nobody {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--text-xs);
}

/* ====================================================================
 * Related operations — "where to next" card at the bottom of an
 * endpoint page. Surfaces `x-related` refs declared on the operation.
 * ==================================================================*/
.related {
  margin: var(--space-6) 0 var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-link);
}

.related-heading {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.related-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.related-row {
  margin: 0;
}

.related-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: border-color 120ms ease, background 120ms ease;
}

.related-link:hover,
.related-link:focus-visible {
  border-color: var(--color-link);
  background: var(--color-bg-hover);
}

.related-summary {
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: var(--leading-snug);
  min-width: 0;
  overflow-wrap: anywhere;
}

.related-path {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: transparent;
  padding: 0;
}

/* Method badge inside the related card — same token palette as the
 * endpoint header badge but scoped so it doesn't pull the larger
 * endpoint-method spacing. */
.related .badge-method {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

.related .badge-get   { color: var(--badge-get-fg);    background: var(--badge-get-bg); }
.related .badge-post  { color: var(--badge-post-fg);   background: var(--badge-post-bg); }
.related .badge-put   { color: var(--badge-put-fg);    background: var(--badge-put-bg); }
.related .badge-patch { color: var(--badge-patch-fg);  background: var(--badge-patch-bg); }
.related .badge-delete{ color: var(--badge-delete-fg); background: var(--badge-delete-bg); }

@media (max-width: 640px) {
  .related-link {
    grid-template-columns: auto 1fr;
  }
  .related-path {
    grid-column: 1 / -1;
    padding-left: var(--space-1);
  }
}

/* ====================================================================
 * Changelog Markdoc tags (v1.47.1.1 #21) — BEM scoped changelog-md-*
 * ==================================================================*/

/* ── Changelog callout (6 types: info/warning/breaking/deprecation/security/tip) ── */
.changelog-md-callout {
  border-left: 4px solid;
  padding: var(--space-4);
  margin: var(--space-6) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-text);
}

.changelog-md-callout > * {
  margin: 0;
}

.changelog-md-callout > * + * {
  margin-top: var(--space-2);
}

.changelog-md-callout--info {
  border-color: var(--callout-info-border);
  background: var(--callout-info-bg);
}

.changelog-md-callout--warning {
  border-color: var(--callout-warning-border);
  background: var(--callout-warning-bg);
}

.changelog-md-callout--breaking {
  border-color: var(--changelog-callout-breaking-border);
  background: var(--changelog-callout-breaking-bg);
}

.changelog-md-callout--deprecation {
  border-color: var(--changelog-callout-deprecation-border);
  background: var(--changelog-callout-deprecation-bg);
}

.changelog-md-callout--security {
  border-color: var(--changelog-callout-security-border);
  background: var(--changelog-callout-security-bg);
}

.changelog-md-callout--tip {
  border-color: var(--changelog-callout-tip-border);
  background: var(--changelog-callout-tip-bg);
}

/* ── Changelog code-tabs ── */
.changelog-md-code-sample {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
  overflow: hidden;
}

.changelog-md-code-sample__tabs {
  display: flex;
  gap: 0;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}

.changelog-md-code-sample__tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: lowercase;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.changelog-md-code-sample__tab:hover {
  color: var(--color-text);
}

.changelog-md-code-sample__tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-link);
}

.changelog-md-code-sample__panels {
  background: var(--color-code-bg);
}

.changelog-md-code-sample__panel {
  padding: var(--space-4);
}

.changelog-md-code-sample__panel pre {
  margin: 0;
  background: transparent;
}

.changelog-md-code-sample__panel code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* ── Changelog codecompare (side-by-side before/after) ── */
.changelog-md-codecompare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.changelog-md-codecompare__side {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.changelog-md-codecompare__heading {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}

.changelog-md-codecompare__side--before .changelog-md-codecompare__heading {
  color: var(--badge-delete-fg);
  background: var(--badge-delete-bg);
}

.changelog-md-codecompare__side--after .changelog-md-codecompare__heading {
  color: var(--badge-post-fg);
  background: var(--badge-post-bg);
}

.changelog-md-codecompare__side pre {
  margin: 0;
  border-radius: 0;
  border: 0;
  background: var(--color-code-bg);
}

/* ── Changelog schema-ref (inline link to OpenAPI schema) ── */
.changelog-md-schema-ref {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}

.changelog-md-schema-ref:hover {
  color: var(--color-link-hover);
  border-bottom-style: solid;
}

.changelog-md-schema-ref code {
  font-family: var(--font-display);
  background: transparent;
  padding: 0;
  color: inherit;
}

/* ── Changelog release-meta (footer card) ── */
.changelog-md-release-meta {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-6) 0;
  background: var(--color-bg-subtle);
}

.changelog-md-release-meta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-5) var(--space-6);
  margin: 0;
  font-size: var(--text-sm);
}

/* Cada metadato es un bloque vertical: label arriba, valor debajo */
.changelog-md-release-meta__grid > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.changelog-md-release-meta__grid dt {
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.changelog-md-release-meta__grid dd {
  margin: 0;
  color: var(--color-text);
}

.changelog-md-release-meta__permalink {
  margin: var(--space-4) 0 0 0;
  font-size: var(--text-sm);
}

.changelog-md-release-meta__permalink a {
  color: var(--color-link);
  text-decoration: underline;
}

/* ── Changelog category/severity/audience badges ── */
.changelog-md-category-badge,
.changelog-md-severity-badge,
.changelog-md-audience-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.025em;
  text-transform: lowercase;
  line-height: 1;
}

.changelog-md-audience-badge {
  margin-right: var(--space-1);
}

.changelog-md-category-badge--feat { color: var(--changelog-badge-feat-fg); background: var(--changelog-badge-feat-bg); }
.changelog-md-category-badge--fix { color: var(--changelog-badge-fix-fg); background: var(--changelog-badge-fix-bg); }
.changelog-md-category-badge--breaking { color: var(--changelog-badge-breaking-fg); background: var(--changelog-badge-breaking-bg); }
.changelog-md-category-badge--deprecation { color: var(--changelog-badge-deprecation-fg); background: var(--changelog-badge-deprecation-bg); }
.changelog-md-category-badge--security { color: var(--changelog-badge-security-fg); background: var(--changelog-badge-security-bg); }
.changelog-md-category-badge--docs,
.changelog-md-category-badge--infra,
.changelog-md-category-badge--refactor { color: var(--color-text-muted); background: var(--color-bg-subtle); }

.changelog-md-severity-badge--medium { color: var(--badge-put-fg); background: var(--badge-put-bg); }
.changelog-md-severity-badge--high { color: var(--badge-delete-fg); background: var(--badge-delete-bg); }
.changelog-md-severity-badge--critical { color: var(--badge-delete-fg); background: var(--badge-delete-bg); text-transform: uppercase; font-weight: var(--weight-bold); }

.changelog-md-audience-badge--visitor { color: var(--color-text-muted); background: var(--color-bg-subtle); border: 1px solid var(--color-border); }
.changelog-md-audience-badge--m2m { color: var(--badge-get-fg); background: var(--badge-get-bg); }
.changelog-md-audience-badge--dashboard { color: var(--badge-post-fg); background: var(--badge-post-bg); }
.changelog-md-audience-badge--admin { color: var(--badge-patch-fg); background: var(--badge-patch-bg); }

/* ── Changelog code (standalone block, used as child of code-sample) ── */
.changelog-md-code pre {
  margin: 0;
  background: var(--color-code-bg);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.changelog-md-code code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Responsive: stack codecompare sides on mobile */
@media (max-width: 767px) {
  .changelog-md-codecompare {
    grid-template-columns: 1fr;
  }
}