/* Certificate compliance (/cert-compliance). Score colour is semantic
   (good/ok/warn/bad); chrome stays monochrome. No card rails. */

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

.cc-frameworks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
.cc-card {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.cc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cc-card-title { font-weight: 600; color: var(--ink); font-size: 1rem; }
.cc-card-blurb { margin-top: 4px; font-size: 0.78rem; color: var(--ink-3); line-height: 1.45; max-width: 30ch; }
.cc-score {
    font: 700 2rem/1 var(--sans);
    letter-spacing: -0.02em;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.cc-score span { font-size: 0.9rem; font-weight: 600; margin-left: 1px; }
.cc-card-sub { margin: 12px 0 16px; font-size: 0.8rem; color: var(--ink-2); }

.cc-controls { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.cc-control-top { display: flex; align-items: center; justify-content: space-between; }
.cc-control-label { font-size: 0.84rem; font-weight: 600; color: var(--ink); }
.cc-control-count { font: 600 0.76rem/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cc-control-count.has-fail { color: var(--danger); }
.cc-control-req { margin: 2px 0 6px; font-size: 0.72rem; color: var(--ink-4); }
.cc-bar { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cc-bar-fill { height: 100%; border-radius: 999px; }

/* Semantic score colours */
.cc-good { color: var(--ok); }        .cc-bar-fill.cc-good { background: var(--ok); }
.cc-ok   { color: #3F9142; }          .cc-bar-fill.cc-ok   { background: #3F9142; }
.cc-warn { color: var(--warn); }      .cc-bar-fill.cc-warn { background: var(--warn); }
.cc-bad  { color: var(--danger); }    .cc-bar-fill.cc-bad  { background: var(--danger); }

/* Score trend (migration 090 gave the snapshot table real history).
   Sits at the foot of each framework card. Deliberately quiet: it is
   context for the score above it, not a second headline. */
.cc-trend {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line, var(--border-color));
    font-size: 12.5px;
    color: var(--ink-3);
}
.cc-trend-empty { color: var(--ink-3); opacity: .8; }
.cc-spark { color: var(--ink-3); flex: none; overflow: visible; }
.cc-delta { font-weight: 600; }
.cc-delta-up   { color: var(--ok); }
.cc-delta-down { color: var(--danger); }
.cc-delta-flat { color: var(--ink-3); }
.cc-trend-range { color: var(--ink-3); }

/* Not-assessed states. A control with no assessable certificates is not a pass
   and must not render as a full green bar, which is what an empty denominator
   defaulting to 100% used to do. */
.cc-control-meta { display: inline-flex; align-items: baseline; gap: 8px; }
.cc-control-na {
    color: var(--ink-3);
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}
.cc-control.is-unassessed .cc-control-label,
.cc-control.is-unassessed .cc-control-count { color: var(--ink-3); }
.cc-bar-fill.cc-unassessed {
    background: repeating-linear-gradient(
        45deg,
        var(--surface-2) 0 6px,
        transparent 6px 12px
    );
    border: 1px dashed var(--line, var(--border-color));
}