/* ============================================================
   .ref-table-next — proposed canonical reference-table content layer (loaded only on /docs/ui-kit)
   ============================================================
   Small companion to `.table-next + .table-next--ref` (tables.css) that
   adds the *content* helpers a reference table needs — highlighted
   port cells, auto-styled inline `<code>` pills, protocol-tone badges
   that fall outside the standard 8-tone `.badge-next` palette.

   `.table-next + .table-next--ref` already provides the chassis
   (sticky uppercase header, primary-tinted hover, density modifiers)
   so this file only ships the small extras that the legacy
   `.tools-ref-table` carried inline:

     .tools-ref-table code            -> .table-next--ref code   (auto-styled inline code-pill)
                                         OR compose with `.badge-next --mono`
     .tools-ref-table-port            -> .ref-table-next-port    (highlighted port-number cell helper)
     .tools-ref-badge                 -> compose with `.badge-next` (badges.css)
     .tools-ref-badge-tcp             -> .badge-next .badge-next--primary
     .tools-ref-badge-both            -> .ref-table-next-badge--both   (purple — not in standard tones; lives here until Tier 7 adds purple to badges.css)

   Composes with: `.table-next + .table-next--ref` (tables.css) — the
   chassis. `.badge-next` (badges.css) — for protocol pills using
   standard tones.

   When badges.css gains a `--ipv6` / purple tone in Tier 7, the
   `.ref-table-next-badge--both` rule below collapses onto that.
   ============================================================ */

/* ============================================
   Inline code-pill — auto-styled inside ref tables
   ============================================
   Bare `<code>` elements inside `.table-next--ref` cells get the
   mono primary-tinted pill treatment without needing a class on every
   one. Matches `.badge-next --mono --primary` visually but applied as
   a content-layer rule so consumers can write idiomatic HTML.
   ============================================ */
.table-next--ref code {
    padding: 2px 6px;
    background: rgba(var(--color-primary-rgb), 0.1);
    border-radius: var(--radius-sm);
    color: var(--color-primary-light);
    font-family: var(--font-mono);
    font-size: 0.85em;
}

/* ============================================
   Port column helper — mono primary-tinted plain text
   ============================================
   For columns where the value is a port number that should pop
   visually but doesn't warrant the full code-pill chrome (no bg,
   no border — just typography).
   ============================================ */
.ref-table-next-port {
    color: var(--color-primary-light);
    font-family: var(--font-mono);
    font-weight: 600;
}

/* ============================================
   Protocol badges — compose with .badge-next
   ============================================
   Standard tones from badges.css cover protocol indicators directly:
     TCP        -> .badge-next .badge-next--primary
     UDP        -> .badge-next .badge-next--accent
     HTTPS      -> .badge-next .badge-next--success
     deprecated -> .badge-next .badge-next--error
     TCP + UDP  -> .badge-next .badge-next--ipv6        (purple, Tier 7)
     IPv6       -> .badge-next .badge-next--ipv6

   `.ref-table-next-badge--both` remains as a deprecated alias for
   pages still on the legacy markup; new code should use
   `.badge-next --ipv6` directly. Once production migrations land
   (Phase 3), this rule comes out.
   ============================================ */
.ref-table-next-badge--both {
    background: rgba(var(--color-ipv6-rgb), 0.2);
    color: var(--color-ipv6);
}