/* Certificate policies (/cert-policies). Monochrome chrome; colour only in
   severity pills. No card rails. */

.cpol-lede { color: var(--ink-3); font-size: 14px; line-height: 1.55; margin: 0 0 24px; max-width: 820px; }
.cpol-muted { color: var(--ink-4); }

.cpol-viol { margin-bottom: 34px; }
.cpol-viol-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cpol-viol-head h2, .cpol-policies h2 { font-size: 1.05rem; color: var(--ink); margin: 0; }

/* Tile + table chrome comes from table-kit.css; keep only the severity
   border highlight on hot tiles. */
.cpol-tile-critical.on { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.cpol-tile-high.on     { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }

/* Violations table content */
.cpol-detail { color: var(--ink-3); }
.cpol-link { color: var(--link); text-decoration: none; }
.cpol-link:hover { text-decoration: underline; }

/* Severity pill */
.cpol-sev { display: inline-flex; width: fit-content; padding: 4px 7px; border: 1px solid var(--border-color); border-radius: 999px; font: 800 0.64rem/1 var(--sans); text-transform: uppercase; white-space: nowrap; }
.cpol-sev-critical { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 44%, var(--border-color)); background: color-mix(in srgb, var(--danger) 8%, var(--bg-primary)); }
.cpol-sev-high,
.cpol-sev-medium   { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 42%, var(--border-color)); background: color-mix(in srgb, var(--warn) 8%, var(--bg-primary)); }
.cpol-sev-low      { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 32%, var(--border-color)); background: color-mix(in srgb, var(--ok) 8%, var(--bg-primary)); }

/* Policy cards */
.cpol-policies { display: block; }
#cpol-policy-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cpol-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: 14px 18px;
}
.cpol-card.on { border-color: var(--line-3); }
.cpol-card-main { flex: 1 1 260px; min-width: 0; }
.cpol-card-title { font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.cpol-card-desc { margin-top: 3px; font-size: 0.78rem; color: var(--ink-3); }
.cpol-card-controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cpol-field { display: flex; flex-direction: column; gap: 4px; }
.cpol-field > span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-4); }
.cpol-input {
    height: 34px; padding: 0 10px; min-width: 96px;
    border: 1px solid var(--line-2); border-radius: var(--r-md);
    background: var(--bg-1); color: var(--ink); font: 400 13px/1 var(--sans);
}
.cpol-input:focus { outline: none; border-color: var(--ink-3); }
.cpol-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ink-2); cursor: pointer; padding-bottom: 8px; }
.cpol-msg { font-size: 0.74rem; color: var(--ink-4); align-self: center; padding-bottom: 8px; }
.cpol-msg-err { color: var(--danger); }

@media (max-width: 720px) {
    .cpol-card { flex-direction: column; align-items: stretch; }
    .cpol-card-controls { align-items: stretch; }
}