/* ============================================================================
 * Compliance — framework page chrome.
 *
 * Page shell, framework header (title / status pill / CTA), top-of-page
 * banners, KPI tile row (rectangular + ring variants), and the tab bar
 * shared between the per-framework page (``fw-*``) and the cross-framework
 * landing (``landing-*``).  Per-tab content lives in ``matrix.css``,
 * ``articles.css``, ``landing.css``, and ``rail.css``.
 * ==========================================================================*/

/* ───────────────────────────── Framework page shell ──────────────────── */
.fw-page {
    /* Width + padding come from design-system.css :root variables so
       compliance + analyze pages share one source of truth. */
    max-width: var(--page-max-width);
    margin: 0;
    padding: var(--page-padding);
    font-family: var(--font-base);
    color: var(--cp-gray-900);
}

.fw-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.fw-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--cp-gray-100);
}
.fw-header-title {
    flex: 1;
    /* Inline-baseline layout puts the framework name, version badge,
       and any secondary slot on the same row.  The h1 stays block-
       level for screen readers; ``display: flex; align-items: baseline``
       lifts the small grey ``v17`` next to the title instead of letting
       it wrap onto its own line as the default block flow would. */
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.fw-name {
    /* Canonical page-title typography AND colour — same as
       ``.patitur-main-page-title`` / ``.dd-hero-title`` (one type pattern across
       every page header; see design-tokens.css §h1). Near-black ``--fg-1``, NOT
       brand-green: a large green heading reads as a link (link green var(--link-internal-fg) is a
       near-identical shade). The parent .fw-page-header carries display:flex so the
       title sits inline with .fw-version + .fw-name-secondary. */
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: var(--fs-2xl);
    line-height: var(--lh-snug); /* 39px. Was a bare 28px — a line box SMALLER
       than the 30px text, so a wrapping title overlapped its own next line.
       Matches the h2 rule's --lh-snug and what the four `leading-tight` call
       sites were reaching for; those never applied, because this stylesheet
       loads after Tailwind's CDN and won on source order. */
    color: var(--fg-1);
    letter-spacing: normal;
    margin: 0;
}
.fw-version {
    font-size: 0.75rem;
    color: var(--cp-gray-500);
    font-weight: 500;
    /* ``gap`` on the parent handles spacing now — the legacy
       ``margin-left`` was a no-op when the h1 wrapped to its own line. */
}
/* Phase 14.5.3.a: secondary title slot ("— Org Coverage") + the
   expanded subtitle below the framework name. */
.fw-name-secondary {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cp-gray-500);
    margin-left: 0.375rem;
}
/* Phase 14.5.3.d: top-right CTA on the AWIA framework header.
   Same affordance pattern other compliance pages will use; uses
   the existing red/green/neutral palette to stay consistent. */
.fw-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.5rem;
    background: var(--bg-card);
    color: var(--cp-gray-700);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.fw-header-cta:hover {
    background: var(--cp-gray-50);
    color: var(--cp-gray-900);
}
.fw-status {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fw-status-supported {
    background: var(--cp-green-bg);
    color: var(--coverage-strong-fg);
    border: 1px solid var(--cp-green-border);
}
.fw-status-scheduled {
    background: var(--info-bg);
    color: var(--info-strong-fg);
    border: 1px solid var(--info-border);
}
.fw-status-future {
    background: var(--cp-amber-bg);
    color: var(--coverage-partial-fg);
    border: 1px solid var(--cp-amber-border);
}
.fw-status-planned {
    background: var(--cp-gray-100);
    color: var(--cp-gray-500);
    border: 1px solid var(--cp-gray-200);
}

/* ───────────────────────────── Framework banner ──────────────────────── */
.fw-banner {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}
.fw-banner-attack {
    background: var(--cp-red-soft-bg);
    border-color: var(--cp-red-border);
    color: var(--danger-darkest-fg);
}
.fw-banner-warn {
    background: var(--cp-amber-bg);
    border-color: var(--cp-amber-border);
    color: var(--coverage-partial-fg);
}
.fw-banner-info {
    background: var(--sev-low-bg);
    border-color: var(--info-border);
    color: var(--info-strong-fg);
}
.fw-banner-clear {
    background: var(--cp-green-soft-bg);
    border-color: var(--cp-green-border);
    color: var(--coverage-strong-fg);
}
.fw-banner-pending,
.fw-banner-idle,
.fw-banner-neutral {
    background: var(--cp-gray-50);
    border-color: var(--cp-gray-200);
    color: var(--cp-gray-700);
}
.fw-banner-title {
    font-weight: 600;
}

/* Alert-fetch-cap truncation notice — surfaces _ALERT_FETCH_CAP hits
   so a tenant whose alerts sort past the cap doesn't silently disappear
   from the matrix. Amber, not red — the data we have is correct, just
   incomplete. */
.fw-truncation-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0 0 1rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--cp-amber-border);
    border-left-width: 4px;
    border-radius: 0.375rem;
    background: var(--cp-amber-bg);
    color: var(--coverage-partial-fg);
    font-size: 0.8125rem;
    line-height: 1.4;
}
.fw-truncation-icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
    padding-top: 0.0625rem;
}
.fw-truncation-body strong {
    font-weight: 600;
}
.fw-banner-body {
    flex: 1;
}
.fw-banner-cta {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--coverage-strong-fg);
    text-decoration: none;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    background: var(--bg-card);
    border: 1px solid var(--cp-green-border);
}

/* ───────────────────────────── KPI tiles ─────────────────────────────── */
.kpi-grid,
.landing-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (max-width: 900px) {
    .kpi-grid,
    .landing-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.kpi-tile,
.landing-kpi-tile {
    background: var(--bg-card);
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
.kpi-tile:hover,
.landing-kpi-tile:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}
.kpi-tile-icon,
.landing-kpi-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.landing-kpi-icon-shield {
    background: var(--cp-green-bg);
    color: var(--coverage-strong-fg);
}
.landing-kpi-icon-bolt {
    background: var(--cp-red-bg);
    color: var(--danger-deep-fg);
}
.landing-kpi-icon-supported {
    background: var(--cp-green-bg);
    color: var(--coverage-strong-fg);
}
.landing-kpi-icon-tenants {
    background: var(--cp-red-bg);
    color: var(--danger-deep-fg);
}
.kpi-tile-label,
.landing-kpi-label {
    font-size: 0.6875rem;
    color: var(--cp-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.landing-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cp-gray-900);
    margin-top: 0.25rem;
}
/* Framework-page KPI value. Smaller than the landing KPI (1.75rem) because these
   tiles carry LONG TEXT values (Strongest / Weakest Function names, e.g.
   "Recover — Resilience, Backup, Continuity") as well as short numbers — 28px bold
   turned the phrases into giant headlines. 20px + wrapping reads the text as a
   phrase while numeric KPIs (Active Alerts) stay prominent. */
.kpi-tile-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cp-gray-900);
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}
.landing-kpi-frac {
    font-size: 1rem;
    color: var(--cp-gray-400);
    font-weight: 500;
}

/* Phase 14.5.3.a: coverage-ring KPI variant. Replaces the icon
   square on the left with a 48px SVG ring whose filled arc length
   = stroke-dasharray scaled to the percentage. The text sits in
   the centre via the SVG ``<text>`` element. */
.kpi-tile-ring {
    /* Inherits .kpi-tile layout; overrides icon-square slot only. */
}
.kpi-ring {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    overflow: visible;
    transform: rotate(-90deg); /* Start the arc at 12 o'clock. */
}
.kpi-ring-track {
    fill: none;
    stroke: var(--cp-gray-100);
    stroke-width: 4;
}
.kpi-ring-fill {
    fill: none;
    stroke: var(--cp-green);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dasharray 0.4s ease-out;
}
.kpi-ring-text {
    font-size: var(
        --fs-md
    ); /* was 16.5px -> 16px */ /* 50% larger than the prior 11px — the headline % reads clearly */
    font-weight: 700;
    fill: var(--cp-gray-900);
    transform: rotate(90deg); /* Counter the parent rotation. */
    transform-origin: 24px 24px;
}
.kpi-tile-sub {
    font-size: 0.6875rem;
    color: var(--cp-gray-500);
    margin-top: 0.125rem;
}