/* css/cert-common.css
 * Shared canonical certificate-section components. Normalises how cert names,
 * domain sublines, grade chips, and signal badges look across the cert pages to
 * the /certificates ("Cyera-style") reference: monochrome chrome, bold sans-serif
 * names, semantic colour only in rounded chips/pills. Built solely from
 * redesign.css tokens (--ink, --ink-2, --ink-4, --line-2, --surface-2, --warn,
 * --danger, --sans, --mono).
 *
 * Loaded AFTER each page's own stylesheet, so for the page-local selectors below
 * these rules win on cascade order. Only cert-name typography, domain sublines,
 * grade chips, and signal badges are normalised - each page keeps its own layout
 * (tables vs cards). /certificates itself is the source of truth and does NOT load
 * this file. cert-threats and cert-compliance already conform and are untouched.
 */

/* Cert name: bold sans, --ink (was monospace on cert-search, link-blue on
   cert-crypto / cert-policies). Keep each page's font-size; only fix family,
   weight, colour, and drop the link underline. */
.cs-row-cn,
a.cc-cert-link,
.cpol-link {
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 600;
    text-decoration: none;
}
.cs-row-cn:hover,
a.cc-cert-link:hover,
.cpol-link:hover { color: var(--ink-2); text-decoration: none; }

/* cert-posture row identifier is a host link (navigates to /asset); already --ink,
   so only bump the weight to match the bold canonical name. Link hover kept. */
.cp-link { font-weight: 600; }

/* Domain / issuer subline: small muted sans (was monospace). */
.cs-row-issuer,
.cp-domain {
    font-family: var(--sans);
    color: var(--ink-4);
}

/* Grade chip: rounded pill matching .ci-chip (cert-posture drew a 4px rectangle).
   Per-grade colour stays inline from each page's gradeChip(). */
.cp-chip {
    min-width: 26px;
    text-align: center;
    padding: 3px 8px;
    border-radius: 999px;
    font: 700 0.72rem/1 var(--mono);
}

/* Signal badge: rounded semantic pill matching .ci-pill (cert-search drew a square
   hard-coded-red box). Keeps the uppercase treatment. */
.cs-row-alert {
    padding: 3px 9px;
    border-radius: 999px;
    font: 600 0.7rem/1.3 var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
}