/* ============================================================================
 * Compliance surface — one stylesheet for every compliance page.
 *
 * Covers the class hooks emitted by:
 *   - ``data/compliance/_shared/`` (shared base + macros)
 *   - ``data/compliance/<fw>/presentation/*.html`` (per-framework)
 *   - ``flask_app/templates/compliance/*.html`` (landing org + tenant)
 *
 * The mockups at ``memory-bank/tasks/feature-v0.8.0-stage-1/compliance/*.html``
 * shipped inline ``<style>`` blocks; this file is the production port, with
 * class names renamed from the mockup's loose names to BEM-ish ``fw-*`` /
 * ``landing-*`` prefixes so conflicts with the rest of the app stay zero.
 * ==========================================================================*/

/* ───────────────────────────── Colour tokens ──────────────────────────── */
:root {
    --cp-red: #dc2626;
    --cp-red-bg: #fee2e2;
    --cp-red-border: #fca5a5;
    --cp-red-soft-bg: #fef2f2;
    --cp-amber: #d97706;
    --cp-amber-bg: #fef3c7;
    --cp-amber-border: #fde68a;
    --cp-amber-leading-bg: #fffbeb;
    --cp-amber-leading-border: #fcd34d;
    --cp-green: #10b981;
    --cp-green-bg: #d1fae5;
    --cp-green-border: #a7f3d0;
    --cp-green-soft-bg: #f0fdf4;
    --cp-gray-900: #111827;
    --cp-gray-700: #374151;
    --cp-gray-500: #6b7280;
    --cp-gray-400: #9ca3af;
    --cp-gray-300: #d1d5db;
    --cp-gray-200: #e5e7eb;
    --cp-gray-100: #f3f4f6;
    --cp-gray-50: #f9fafb;
    --cp-blue: #3b82f6;
    --cp-sky-700: #0369a1;
}

/* ───────────────────────────── Framework page shell ──────────────────── */
.fw-page {
    max-width: 88rem;
    margin: 0;
    padding: 1rem 1.25rem;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    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 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.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;
}
.fw-subtitle {
    font-size: 0.75rem;
    color: var(--cp-gray-500);
    margin-top: 0.25rem;
    line-height: 1.4;
}
/* 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: #fff;
    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: #065f46;
    border: 1px solid var(--cp-green-border);
}
.fw-status-scheduled {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
.fw-status-future {
    background: var(--cp-amber-bg);
    color: #78350f;
    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: #7f1d1d;
}
.fw-banner-warn {
    background: var(--cp-amber-bg);
    border-color: var(--cp-amber-border);
    color: #78350f;
}
.fw-banner-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}
.fw-banner-clear {
    background: var(--cp-green-soft-bg);
    border-color: var(--cp-green-border);
    color: #065f46;
}
.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: #78350f;
    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: #065f46;
    text-decoration: none;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    background: #fff;
    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: #fff;
    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: #065f46;
}
.landing-kpi-icon-bolt {
    background: var(--cp-red-bg);
    color: #991b1b;
}
.landing-kpi-icon-supported {
    background: var(--cp-green-bg);
    color: #065f46;
}
.landing-kpi-icon-tenants {
    background: var(--cp-red-bg);
    color: #991b1b;
}
.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;
}
.kpi-tile-value,
.landing-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cp-gray-900);
    margin-top: 0.25rem;
}
.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: 11px;
    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;
}

/* ───────────────────────────── Tabs ──────────────────────────────────── */
.fw-tabs,
.landing-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--cp-gray-200);
    margin-bottom: 1.25rem;
}
.fw-tab,
.landing-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cp-gray-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
    font-family: inherit;
}
.fw-tab:hover,
.landing-tab:hover {
    color: var(--cp-gray-900);
    background: var(--cp-gray-50);
}
.fw-tab-active,
.landing-tab-active {
    color: #059669;
    border-bottom-color: var(--cp-green);
    background: #fff;
}
.fw-tab-panel-hidden,
.landing-panel-hidden {
    display: none;
}
/* Phase 14.5.2: tab count pill (right-of-label). Matches v2 mockup
   (index-v2.html:40-43) — grey default, green when active, red when
   the tab owns an attacking framework. */
.landing-tab-count {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--cp-gray-500);
    padding: 2px 8px;
    background: var(--cp-gray-100);
    border-radius: 9999px;
    margin-left: 0.25rem;
}
.landing-tab-active .landing-tab-count {
    background: var(--cp-green-bg);
    color: #065f46;
}
.landing-tab-attack .landing-tab-count {
    background: var(--cp-red-bg);
    color: #991b1b;
}
.landing-tab-active.landing-tab-attack .landing-tab-count {
    background: #fecaca;
    color: #7f1d1d;
}

/* ───────────────────────────── Kill-chain layout (cascade + rail) ───── */
/* Two-column grid: phase cascade on the left, drilldown rail on the
   right, matching the v2 mockup's ``grid-cols-[1fr_340px]``. At narrow
   viewports the rail stacks under the cascade so nothing clips. */
.fw-killchain-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 1024px) {
    .fw-killchain-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}
.fw-killchain-grid > .fw-rail {
    margin-top: 0;
    align-self: start;
    position: sticky;
    top: 1rem;
}

/* Tab label + secondary count pill (e.g. "Kill Chain · 3 phases active"). */
.fw-tab-count {
    display: inline-flex;
    align-items: center;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--cp-gray-500);
    background: var(--cp-gray-100);
    padding: 2px 8px;
    border-radius: 9999px;
    margin-left: 0.375rem;
}
.fw-tab-active .fw-tab-count {
    background: var(--cp-green-bg);
    color: #065f46;
}
.fw-tab-count-attack {
    background: var(--cp-red-bg);
    color: #991b1b;
}
.fw-tab-active .fw-tab-count-attack {
    background: #fecaca;
    color: #7f1d1d;
}

/* ───────────────────────────── Kill-chain cascade ────────────────────── */
.fw-cascade {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.fw-cascade-tenant {
    gap: 0.75rem;
}

.fw-phase {
    position: relative;
    padding-left: 3rem;
}
.fw-phase-marker {
    position: absolute;
    left: 0;
    top: 0.875rem;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    z-index: 2;
}
.fw-phase::before {
    content: "";
    position: absolute;
    left: 0.9375rem;
    top: 2.875rem;
    bottom: -0.75rem;
    width: 2px;
    background: var(--cp-gray-200);
    z-index: 1;
}
.fw-phase:last-child::before {
    display: none;
}

.fw-phase-card {
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.75rem;
    overflow: hidden;
    transition:
        box-shadow 0.15s,
        border-color 0.15s;
}
.fw-phase-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.fw-phase-active .fw-phase-card,
.fw-phase-active.fw-phase-card {
    border-color: var(--cp-red-border);
}
.fw-phase-active .fw-phase-head {
    background: linear-gradient(90deg, var(--cp-red-soft-bg), #fff 70%);
}
.fw-phase-active .fw-phase-marker {
    background: var(--cp-red);
}

.fw-phase-leading .fw-phase-card {
    border-color: var(--cp-amber-leading-border);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}
.fw-phase-leading .fw-phase-head {
    background: linear-gradient(90deg, var(--cp-amber-bg), #fff 70%);
}
.fw-phase-leading .fw-phase-marker {
    background: var(--cp-amber);
}

.fw-phase-clear .fw-phase-card {
    border-color: var(--cp-green-border);
}
.fw-phase-clear .fw-phase-head {
    background: linear-gradient(90deg, var(--cp-green-soft-bg), #fff 70%);
}
.fw-phase-clear .fw-phase-marker {
    background: var(--cp-green);
}

.fw-phase-idle .fw-phase-card {
    border-color: var(--cp-gray-200);
    opacity: 0.85;
}
.fw-phase-idle .fw-phase-head {
    background: #fafafa;
}
.fw-phase-idle .fw-phase-marker {
    background: var(--cp-gray-400);
}

.fw-phase-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px dashed var(--cp-gray-200);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cp-gray-500);
}
.fw-phase-kicker {
    color: var(--cp-gray-500);
}
.fw-phase-name {
    color: var(--cp-gray-900);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    flex: 1;
}

.fw-phase-pill {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.fw-phase-pill-active {
    background: var(--cp-red-bg);
    color: #991b1b;
}
.fw-phase-pill-active::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: var(--cp-red);
}
.fw-phase-pill-clear {
    background: var(--cp-green-bg);
    color: #065f46;
}

.fw-phase-summary {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--cp-gray-100);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.75rem;
    color: var(--cp-gray-500);
}
.fw-phase-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--cp-gray-400);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 0.25rem;
}
.fw-phase-empty {
    color: var(--cp-gray-500);
    font-style: italic;
}

/* ───────────────────────────── Tenant strip / chips ──────────────────── */
.fw-tenant-strip {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    background: #fafafa;
}
.fw-tenant-strip-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--cp-gray-400);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 0.25rem;
}
.fw-tenant-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.15s;
}
.fw-tenant-chip:hover {
    transform: translateY(-1px);
}
.fw-tenant-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 9999px;
}
.fw-tenant-chip-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.6875rem;
    padding: 0 0.3125rem;
    border-radius: 9999px;
}
.fw-tenant-chip-high {
    background: var(--cp-red-bg);
    color: #991b1b;
    border-color: var(--cp-red-border);
}
.fw-tenant-chip-high .fw-tenant-chip-dot {
    background: var(--cp-red);
}
.fw-tenant-chip-high .fw-tenant-chip-count {
    background: rgba(220, 38, 38, 0.15);
}
.fw-tenant-chip-low {
    background: var(--cp-amber-bg);
    color: #78350f;
    border-color: var(--cp-amber-border);
}
.fw-tenant-chip-low .fw-tenant-chip-dot {
    background: var(--cp-amber);
}
.fw-tenant-chip-low .fw-tenant-chip-count {
    background: rgba(217, 119, 6, 0.15);
}
.fw-tenant-chip-leading {
    background: var(--cp-amber-leading-bg);
    color: #78350f;
    border-color: var(--cp-amber-leading-border);
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.15);
}
.fw-tenant-strip-more {
    font-size: 0.6875rem;
    color: var(--cp-gray-400);
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    background: var(--cp-gray-100);
}

/* ───────────────────────────── Tactic rows (tenant cascade) ─────────── */
.fw-tactic-rows {
    padding: 0.5rem 0;
}
.fw-tactic-row {
    display: grid;
    grid-template-columns: 2fr 0.75fr 2fr 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--cp-gray-100);
    font-size: 0.8125rem;
}
.fw-tactic-row:last-child {
    border-bottom: 0;
}
.fw-tactic-name {
    font-weight: 500;
    color: var(--cp-gray-900);
}
.fw-tactic-code {
    font-family: monospace;
    font-size: 0.6875rem;
    color: var(--cp-gray-500);
    background: var(--cp-gray-100);
    padding: 2px 6px;
    border-radius: 0.25rem;
    justify-self: start;
}
.fw-tactic-progress {
    height: 0.5rem;
    background: var(--cp-gray-100);
    border-radius: 9999px;
    overflow: hidden;
}
.fw-tactic-progress-fill {
    height: 100%;
    transition: width 0.3s ease;
}
.fw-tactic-progress-fill-high {
    background: var(--cp-red);
}
.fw-tactic-progress-fill-low {
    background: var(--cp-amber);
}
.fw-tactic-progress-fill-leading {
    background: var(--cp-amber);
}
.fw-tactic-progress-fill-clear,
.fw-tactic-progress-fill-idle {
    background: var(--cp-gray-300);
}
.fw-tactic-count {
    font-size: 0.75rem;
    color: var(--cp-gray-500);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.fw-tactic-count strong {
    color: var(--cp-gray-900);
    font-weight: 600;
}

/* ───────────────────────────── Tenant x Axis matrix ─────────────────── */
.fw-matrix-wrapper {
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.75rem;
    overflow: hidden;
    overflow-x: auto;
    margin-bottom: 1rem;
}
.fw-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.fw-matrix thead th {
    background: var(--cp-gray-50);
    color: var(--cp-gray-700);
    font-weight: 600;
    text-align: left;
    padding: 0.625rem 0.75rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--cp-gray-200);
}
.fw-matrix-tenant-col {
    text-align: left;
    /* Tenant name + industry subtitle — compact so the phase columns
       and totals row can breathe. Long names wrap; they don't push
       the matrix wider. */
    min-width: 11rem;
    max-width: 16rem;
    width: 14rem;
}
.fw-matrix-phase-col,
.fw-matrix-item-col {
    text-align: center;
    width: 5rem;
}
.fw-matrix-phase-sub {
    display: block;
    font-size: 0.625rem;
    color: var(--cp-gray-400);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 2px;
}
.fw-matrix-item-code {
    font-family: monospace;
    font-weight: 700;
    font-size: 0.6875rem;
    color: var(--cp-sky-700);
}
.fw-matrix-worst-col {
    width: 11rem;
}
.fw-matrix-total-col {
    width: 5.625rem;
    text-align: center;
}

.fw-matrix tbody tr {
    border-bottom: 1px solid var(--cp-gray-100);
    transition: background 0.15s;
}
.fw-matrix tbody tr:last-child {
    border-bottom: 0;
}
.fw-matrix tbody tr:hover {
    background: #fafafa;
    cursor: pointer;
}

.fw-matrix-row-high {
    border-left: 3px solid var(--cp-red);
}
.fw-matrix-row-low {
    border-left: 3px solid var(--cp-amber);
}
.fw-matrix-row-leading {
    border-left: 3px solid var(--cp-amber);
}
.fw-matrix-row-clear {
    border-left: 3px solid var(--cp-green-border);
}
.fw-matrix-row-idle {
    border-left: 3px solid transparent;
}

.fw-matrix td,
.fw-matrix th[scope="row"] {
    padding: 0.75rem;
    vertical-align: middle;
}
.fw-matrix-tenant {
    font-weight: 600;
    text-align: left;
    /* Row-header cell matches the column width we set in thead so the
       tenant name never dominates the row. Anchor inherits those
       bounds and wraps cleanly on long display names. */
    line-height: 1.3;
}
.fw-matrix-tenant a {
    font-size: 0.8125rem;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Footer row — one "Org totals" row that mirrors the headers: column
   sums, worst-reached label spelled out, total alerts across all
   tenants. Visually heavier than body rows so eyes land on it last. */
.fw-matrix tfoot td,
.fw-matrix tfoot th {
    background: var(--cp-gray-50);
    border-top: 2px solid var(--cp-gray-200);
    padding: 0.625rem 0.75rem;
    font-weight: 700;
    color: var(--cp-gray-900);
    font-size: 0.75rem;
}
.fw-matrix tfoot .fw-matrix-tenant {
    font-weight: 700;
    color: var(--cp-gray-900);
}
.fw-matrix-cell-total {
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.fw-matrix-totals-row:hover {
    /* Totals aren't a clickable tenant row; no hover cursor. */
    background: var(--cp-gray-50) !important;
    cursor: default;
}
.fw-matrix-cell {
    text-align: center;
}
.fw-matrix-total {
    text-align: center;
    font-weight: 600;
    color: var(--cp-gray-900);
    font-variant-numeric: tabular-nums;
}

.fw-cell-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 3px 0.5625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.fw-cell-pill-idle {
    color: var(--cp-gray-300);
    font-weight: 400;
}
.fw-cell-pill-low {
    background: var(--cp-amber-bg);
    color: #78350f;
    border: 1px solid var(--cp-amber-border);
}
.fw-cell-pill-high {
    background: var(--cp-red-bg);
    color: #991b1b;
    border: 1px solid var(--cp-red-border);
}
.fw-cell-pill-leading {
    background: var(--cp-amber-leading-bg);
    color: #78350f;
    border: 1px solid var(--cp-amber-leading-border);
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
}

.fw-worst-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 3px 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
}
.fw-worst-badge-p3 {
    background: var(--cp-amber-leading-bg);
    color: #78350f;
    border: 1px solid var(--cp-amber-leading-border);
}
.fw-worst-badge-p2 {
    background: var(--cp-red-soft-bg);
    color: #991b1b;
    border: 1px solid var(--cp-red-border);
}
.fw-worst-badge-p1 {
    background: var(--cp-amber-bg);
    color: #78350f;
    border: 1px solid var(--cp-amber-border);
}
.fw-worst-badge-clear {
    background: var(--cp-green-soft-bg);
    color: #065f46;
    border: 1px solid var(--cp-green-border);
}

/* Phase 14.5.3 polish: catalog-style coloured BADGE inside the cell
   rather than colouring the whole ``<td>``. Matches the dashboard
   Catalog matrix convention (✓ on a green pill, ~ on amber, · on
   grey) so the visual language is identical across compliance
   surfaces. The empty-state em-dash is rendered without a box. */
.fw-matrix-cell-parallel {
    text-align: center;
}
.fw-matrix-cell-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    font-weight: 700;
    line-height: 1;
}
.fw-matrix-cell-empty {
    color: var(--cp-gray-300);
    font-weight: 700;
}
.fw-matrix-parallel
    .fw-matrix-cell-parallel.grade-strong
    .fw-matrix-cell-badge {
    background: var(--cp-green-bg);
    color: #065f46;
}
.fw-matrix-parallel
    .fw-matrix-cell-parallel.grade-partial
    .fw-matrix-cell-badge {
    background: var(--cp-amber-bg);
    color: #78350f;
}
.fw-matrix-parallel
    .fw-matrix-cell-parallel.grade-supportive
    .fw-matrix-cell-badge {
    background: var(--cp-gray-100);
    color: var(--cp-gray-700);
}

.fw-matrix-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--cp-gray-500);
    font-style: italic;
}

/* ───────────────────────────── Rail (drilldown) ──────────────────────── */
.fw-rail {
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.75rem;
    padding: 1.125rem;
    margin-top: 1.5rem;
}
.fw-rail-head {
    margin-bottom: 0.75rem;
}
.fw-rail-kicker {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--cp-gray-400);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.fw-rail-title {
    /* 0.875rem matches ``.section-h2``-ish weight elsewhere; a 16px
       title inside a 340px rail feels heavy next to the 14-ish body
       copy, especially for short names like "NEIKER". */
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cp-gray-900);
    margin: 0.25rem 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
a.fw-rail-title {
    /* Override the .table-cell-link-external default — same compact
       size, still clickable. */
    font-size: 0.875rem;
}
/* Restore the ``.link-internal`` green colour on the anchor variant
   of the rail title.  ``.fw-rail-title``'s gray-900 colour was winning
   over ``.link-internal`` because both are single-class selectors and
   compliance.css loads after design-system.css; raising the
   specificity here (element + two classes) puts the green back. */
a.fw-rail-title.link-internal {
    color: #0e9f6e;
}
a.fw-rail-title.link-internal:hover {
    color: #047857;
    text-decoration: underline;
}
.fw-rail-subtitle {
    font-size: 0.75rem;
    color: var(--cp-gray-500);
}
.fw-rail-section {
    margin-top: 1rem;
}
.fw-rail-section-head {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--cp-gray-500);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.625rem;
}
.fw-rail-note {
    font-size: 0.75rem;
    color: var(--cp-gray-500);
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.fw-mini-cascade {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.875rem;
}
.fw-mini-phase {
    background: var(--cp-gray-50);
    border: 1px solid var(--cp-gray-100);
    border-radius: 0.375rem;
    padding: 0.5rem 0.25rem;
    text-align: center;
}
.fw-mini-phase-active {
    background: var(--cp-red-soft-bg);
    border-color: var(--cp-red-border);
}
.fw-mini-phase-clear {
    background: var(--cp-green-soft-bg);
    border-color: var(--cp-green-border);
}
.fw-mini-phase-name {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--cp-gray-500);
}
.fw-mini-phase-count {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cp-gray-900);
    margin-top: 2px;
}
/* Phase chips with non-zero counts deep-link to the alerts page —
   render the chip as a clickable card without losing the .fw-mini-phase
   look.  On hover/focus we strengthen the border and surface a small
   ``↗`` arrow in the top-right corner so the affordance reads as
   "this opens out of the page" rather than just a clickable region. */
.fw-mini-phase-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition:
        border-color 100ms ease,
        box-shadow 100ms ease,
        transform 100ms ease;
}
.fw-mini-phase-link::after {
    content: "↗";
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.625rem;
    line-height: 1;
    color: var(--cp-gray-500);
    opacity: 0;
    transition: opacity 100ms ease;
    pointer-events: none;
}
.fw-mini-phase-link:hover,
.fw-mini-phase-link:focus-visible {
    transform: translateY(-1px);
    border-color: var(--cp-gray-500);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}
.fw-mini-phase-link:hover::after,
.fw-mini-phase-link:focus-visible::after {
    opacity: 1;
}
.fw-mini-phase-link:focus-visible {
    outline: 2px solid var(--cp-blue-500, #3b82f6);
    outline-offset: 1px;
}

/* Status banner — red / amber / clear strip under the rail header. */
.fw-rail-status-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    margin: 0.75rem 0;
    font-size: 0.75rem;
}
.fw-rail-status-banner-high,
.fw-rail-status-banner-attack {
    background: var(--cp-red-soft-bg);
    border-color: var(--cp-red-border);
    color: #7f1d1d;
}
.fw-rail-status-banner-low,
.fw-rail-status-banner-warn {
    background: var(--cp-amber-bg);
    border-color: var(--cp-amber-border);
    color: #78350f;
}
.fw-rail-status-banner-leading {
    background: var(--cp-amber-leading-bg);
    border-color: var(--cp-amber-leading-border);
    color: #78350f;
}
.fw-rail-status-banner-clear {
    background: var(--cp-green-soft-bg);
    border-color: var(--cp-green-border);
    color: #065f46;
}
.fw-rail-status-dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: currentColor;
    margin-top: 0.3125rem;
    animation: fw-rail-pulse 2s ease-in-out infinite;
}
@keyframes fw-rail-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}
.fw-rail-status-body {
    flex: 1;
    min-width: 0;
}
.fw-rail-status-title {
    font-weight: 600;
    line-height: 1.25;
}
.fw-rail-status-sub {
    font-size: 0.6875rem;
    opacity: 0.85;
    margin-top: 0.125rem;
}

/* Rail alert list — "Recent alerts" / "Firing alerts in this phase". */
.fw-rail-alert-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.fw-rail-alert-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    border-top: 1px solid var(--cp-gray-100);
    font-size: 0.75rem;
}
.fw-rail-alert-row:first-child {
    border-top: 0;
}
.fw-rail-alert-dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    margin-top: 0.375rem;
}
.fw-rail-alert-dot-recent {
    background: #10b981;
}
.fw-rail-alert-dot-old {
    background: var(--cp-gray-300);
}
.fw-rail-alert-body {
    flex: 1;
    min-width: 0;
}
.fw-rail-alert-head {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.fw-rail-alert-code {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #92400e;
    background: var(--cp-amber-bg);
    padding: 1px 5px;
    border-radius: 0.25rem;
}
.fw-rail-alert-name {
    font-weight: 600;
    color: var(--cp-gray-900);
}
.fw-rail-alert-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 2px;
    font-size: 0.6875rem;
    color: var(--cp-gray-500);
}
.fw-rail-alert-device {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    color: var(--cp-gray-400);
}
.fw-rail-alert-phase {
    font-weight: 500;
}
.fw-rail-alert-ago {
    flex-shrink: 0;
    font-size: 0.6875rem;
    color: var(--cp-gray-400);
    white-space: nowrap;
    margin-top: 0.125rem;
}
/* "View" affordance — a ``<button>`` for rows that have an alert_id
   (htmx-loads the alert details modal in-place) or an ``<a>`` for
   legacy rows without one (deep-links to the filtered alerts page).
   Both variants share the same chip look, so both selectors apply. */
.fw-rail-alert-view {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--cp-gray-700);
    background: #fff;
    text-decoration: none;
    margin-top: 0.0625rem;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    transition:
        background-color 100ms ease,
        border-color 100ms ease;
}
.fw-rail-alert-view:hover,
.fw-rail-alert-view:focus-visible {
    background: var(--cp-gray-50);
    border-color: var(--cp-gray-300);
    color: var(--cp-gray-900);
    text-decoration: none;
}
.fw-rail-alert-view:focus-visible {
    outline: 2px solid var(--cp-blue-500, #3b82f6);
    outline-offset: 1px;
}
.fw-rail-alert-more {
    font-size: 0.6875rem;
    color: var(--cp-gray-500);
    padding: 0.5rem 0.25rem 0;
    margin: 0;
}

/* Rail action buttons — thin inline CTAs. */
.fw-rail-actions {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.fw-rail-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.375rem;
    border: 1px solid var(--cp-gray-200);
    background: #fff;
    color: var(--cp-gray-700);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition:
        background 0.12s,
        border-color 0.12s;
}
.fw-rail-btn:hover {
    background: var(--cp-gray-50);
    border-color: var(--cp-gray-300);
    color: var(--cp-gray-900);
}
.fw-rail-btn-primary {
    background: var(--cp-green-bg);
    color: #065f46;
    border-color: var(--cp-green-border);
}
.fw-rail-btn-primary:hover {
    background: #a7f3d0;
}
.fw-rail-btn-danger {
    color: #991b1b;
    border-color: var(--cp-red-border);
    background: var(--cp-red-soft-bg);
}
.fw-rail-btn-danger:hover {
    background: var(--cp-red-bg);
}

/* Hint line at the bottom of the rail. */
.fw-rail-hint {
    border-top: 1px solid var(--cp-gray-100);
    padding-top: 0.625rem;
    margin-top: 0.875rem;
}

/* Sparkline — 6 hourly bars inside the tenant rail. */
.fw-rail-spark {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    height: 2.5rem;
    padding: 0.125rem 0;
}
.fw-rail-spark-bar {
    flex: 1;
    min-height: 2px;
    background: linear-gradient(180deg, #d97706 0%, #fcd34d 100%);
    border-radius: 0.125rem 0.125rem 0 0;
}

/* Phase-card click-to-drill affordance (tenant scope only — the card
   gets role="button" so the cursor hints it's interactive). */
.fw-phase[role="button"] {
    cursor: pointer;
    transition:
        transform 0.12s,
        box-shadow 0.12s;
}
.fw-phase[role="button"]:hover .fw-phase-card {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.fw-phase[role="button"]:focus-visible {
    outline: 2px solid var(--color-brand-green, #25af88);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* Selected slice highlights — driven by compliance_mitre_rail.js. */
.fw-tenant-chip-selected {
    outline: 2px solid var(--color-brand-green, #25af88);
    outline-offset: 1px;
}
.fw-phase-selected .fw-phase-card {
    outline: 2px solid var(--color-brand-green, #25af88);
    outline-offset: -2px;
}

/* Chip cursor — chip is htmx-trigger, not a page-anchor link. */
.fw-tenant-chip[hx-get] {
    cursor: pointer;
}

/* Phase 14.5.3 polish: legend strip above the AWIA Tenants matrix.
   Mirrors the article-list legend on the Coverage tab so the same
   four-grade language decodes the cell glyphs (✓ / ~ / · / —). */
.fw-matrix-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.6875rem;
}
.fw-matrix-legend-label {
    color: var(--cp-gray-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fw-matrix-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 2px 8px;
    border-radius: 9999px;
    font-weight: 500;
}
.fw-matrix-legend-glyph {
    font-weight: 700;
}
.fw-matrix-legend-chip-strong {
    background: var(--cp-green-bg);
    color: #065f46;
}
.fw-matrix-legend-chip-partial {
    background: var(--cp-amber-bg);
    color: #78350f;
}
.fw-matrix-legend-chip-supportive {
    background: #f3f4f6;
    color: #6b7280;
}
.fw-matrix-legend-chip-none {
    background: var(--cp-gray-100);
    color: var(--cp-gray-500);
}

/* ───────────────────────────── AWIA article cards ────────────────────── */
/* Phase 14.5.3.b: legend strip above the article list — four chips
   in a row with the grade colour each renders elsewhere on the page
   (article chips, matrix cells). */
.fw-article-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.6875rem;
}
.fw-article-legend-label {
    color: var(--cp-gray-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fw-article-legend-chip {
    padding: 2px 8px;
    border-radius: 9999px;
    font-weight: 500;
}
.fw-article-legend-chip-strong {
    background: var(--cp-green-bg);
    color: #065f46;
}
.fw-article-legend-chip-partial {
    background: var(--cp-amber-bg);
    color: #78350f;
}
.fw-article-legend-chip-supportive {
    background: #f3f4f6;
    color: #6b7280;
}
.fw-article-legend-chip-audit {
    background: var(--cp-gray-100);
    color: var(--cp-gray-500);
    border: 1px dashed var(--cp-gray-200);
}
.fw-article-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.fw-article-group {
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.75rem;
    overflow: hidden;
}
.fw-article-group-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cp-gray-100);
    background: var(--cp-gray-50);
}
.fw-article-group-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cp-gray-900);
    margin-bottom: 0.25rem;
}
.fw-article-group-desc {
    font-size: 0.8125rem;
    color: var(--cp-gray-500);
    margin-bottom: 0.25rem;
}
.fw-article-group-meta {
    font-size: 0.75rem;
    color: var(--cp-gray-500);
}

.fw-article-card {
    border-bottom: 1px solid var(--cp-gray-100);
    transition: background 0.15s;
}
.fw-article-card:last-child {
    border-bottom: 0;
}
.fw-article-card > summary {
    cursor: pointer;
    list-style: none;
}
.fw-article-card > summary::-webkit-details-marker {
    display: none;
}
.fw-article-card[open] {
    background: #fafafa;
}

.fw-article-head {
    display: grid;
    /* code | name | grade-chip | LAF count | chevron — five columns
       so the chevron sits at the upper-right edge of the row instead
       of overflowing into a second visual line. */
    grid-template-columns: 6rem 1fr auto auto auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
}
.fw-article-code {
    font-family: monospace;
    font-weight: 700;
    color: var(--cp-sky-700);
    background: #e0f2fe;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    text-align: center;
}
.fw-article-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cp-gray-900);
}
.fw-article-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--cp-gray-500);
    font-weight: 400;
    margin-top: 2px;
}
.fw-article-chip {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.fw-article-chip-grade-strong {
    background: var(--cp-green-bg);
    color: #065f46;
}
.fw-article-chip-grade-partial {
    background: var(--cp-amber-bg);
    color: #78350f;
}
.fw-article-chip-grade-supportive {
    background: #dbeafe;
    color: #1e40af;
}
.fw-article-chip-grade-audit {
    background: var(--cp-gray-100);
    color: var(--cp-gray-700);
}
.fw-article-chip-grade-none {
    background: var(--cp-gray-100);
    color: var(--cp-gray-400);
}
.fw-article-laf-count {
    font-size: 0.75rem;
    color: var(--cp-gray-500);
}

.fw-article-body {
    padding: 0.25rem 1.25rem 1.125rem;
    border-top: 1px dashed var(--cp-gray-100);
}
.fw-article-prose {
    font-size: 0.8125rem;
    color: var(--cp-gray-700);
    line-height: 1.55;
    margin-bottom: 0.75rem;
}
.fw-article-laf-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.625rem;
}
.fw-article-laf-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--cp-gray-400);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 0.25rem;
}
.fw-laf-pill {
    background: var(--cp-amber-bg);
    color: #92400e;
    border: 1px solid var(--cp-amber-border);
    padding: 2px 6px;
    border-radius: 0.25rem;
    font-family: monospace;
    font-size: 0.625rem;
    font-weight: 600;
    text-decoration: none;
}
.fw-article-glossary-link {
    margin-top: 0.75rem;
    font-size: 0.6875rem;
}
/* Phase 14.5.3.b: chevron-down in the article summary. Default
   state (collapsed) points right (-90°); expanded points down (0°).
   Matches the affordance the glossary's ``<details>`` surfaces
   already use, and uses pure CSS on ``details[open]`` — no JS. */
.fw-article-chevron {
    margin-left: 0.5rem;
    color: var(--cp-gray-400);
    transform: rotate(-90deg);
    transition: transform 0.15s ease-out;
    display: inline-flex;
}
.fw-article-card[open] .fw-article-chevron {
    transform: rotate(0deg);
    color: var(--cp-gray-700);
}
/* Phase 14.5.3.b: per-item tenant-coverage chip in the article
   body. Same colour grades as the summary chip but rendered as a
   thin pill below the LAF row. */
.fw-article-tenant-coverage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
    font-size: 0.6875rem;
}
.fw-article-tenant-coverage-label {
    color: var(--cp-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.fw-article-tenant-coverage-chip {
    padding: 2px 10px;
    border-radius: 9999px;
    font-weight: 500;
}
.fw-article-tenant-coverage-chip-grade-strong {
    background: var(--cp-green-bg);
    color: #065f46;
}
.fw-article-tenant-coverage-chip-grade-partial {
    background: var(--cp-amber-bg);
    color: #78350f;
}
.fw-article-tenant-coverage-chip-grade-supportive,
.fw-article-tenant-coverage-chip-grade-none {
    background: var(--cp-gray-100);
    color: var(--cp-gray-700);
}

/* ───────────────────────────── Landing banners + head ────────────────── */
.compliance-landing {
    max-width: 88rem;
    margin: 0;
    padding: 1rem 1.25rem;
}
.landing-banner {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}
.landing-banner-attack {
    background: var(--cp-red-soft-bg);
    border: 1px solid var(--cp-red-border);
    color: #7f1d1d;
}
/* Phase 14.5.2: attack banner sub-parts. Pulse dot on the left, title,
   body description, right-aligned CTA that links to the worst-tone
   framework's detail page. */
.landing-banner-pulse {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--cp-red);
    flex-shrink: 0;
    animation: landing-banner-pulse 2s ease-in-out infinite;
}
@keyframes landing-banner-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.85);
    }
}
.landing-banner-title {
    color: var(--cp-red);
    font-weight: 600;
}
.landing-banner-sep {
    color: var(--cp-gray-500);
}
.landing-banner-body {
    color: #374151;
}
.landing-banner-body strong {
    color: var(--cp-gray-900);
}
.landing-banner-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #fff;
    border: 1px solid var(--cp-red-border);
    border-radius: 0.5rem;
    color: #b91c1c;
    font-weight: 500;
    text-decoration: none;
    font-size: 0.8125rem;
}
.landing-banner-cta:hover {
    background: #fef2f2;
}
.landing-tenant-banner {
    padding: 0.625rem 1rem;
    background: var(--cp-green-soft-bg);
    border: 1px solid var(--cp-green-border);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #065f46;
}
.landing-head {
    margin-bottom: 1.25rem;
}
.landing-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cp-gray-900);
}
.landing-subtitle {
    font-size: 0.875rem;
    color: var(--cp-gray-500);
    margin-top: 0.25rem;
}
.landing-tenant-code {
    font-family: monospace;
    background: var(--cp-gray-100);
    padding: 2px 6px;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

/* ───────────────────────────── Landing cards (Dashboard tab) ─────────── */
.landing-panel {
    min-height: 20rem;
}
/* Phase 14.5.2.d: section header above the card grid, with a
   "Subscribe to more" link aligned right that hands focus to the
   Catalog tab. */
.landing-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.landing-section-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cp-gray-900);
}
.landing-section-sub {
    font-size: 0.75rem;
    color: var(--cp-gray-500);
    margin-top: 0.125rem;
}
.landing-section-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #059669;
    text-decoration: none;
    white-space: nowrap;
}
.landing-section-cta:hover {
    text-decoration: underline;
}
.landing-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 900px) {
    .landing-card-grid {
        grid-template-columns: 1fr;
    }
}
/* Phase 14.5.2.d: dashed CTA card at the end of the grid — routes
   to the Catalog tab. Plain anchor styled to look like a card. */
.landing-add-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--cp-gray-50);
    border: 1px dashed var(--cp-gray-300);
    border-radius: 0.75rem;
    padding: 1.25rem;
    color: var(--cp-gray-700);
    text-decoration: none;
    text-align: left;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.landing-add-more:hover {
    background: #fff;
    border-color: var(--cp-green-border);
    color: #059669;
}
.landing-add-more-title {
    font-size: 0.875rem;
    font-weight: 600;
}
.landing-add-more-sub {
    font-size: 0.6875rem;
    color: var(--cp-gray-500);
    margin-top: 0.125rem;
}
.fw-card {
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.fw-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.fw-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fw-card-name {
    flex: 1;
    font-weight: 700;
    color: var(--cp-gray-900);
    text-decoration: none;
}
.fw-card-status {
    font-size: 0.6875rem;
}
/* Phase 14.5.2: "Detail page pending" — plugin has loaded but no
   per-framework route exists, so the name is plain text + an inline
   hint chip. */
.fw-card-name-disabled {
    flex: 1;
    font-weight: 700;
    color: var(--cp-gray-500);
    cursor: default;
}
.fw-card-pending-chip {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--cp-gray-500);
    padding: 2px 6px;
    border-radius: 9999px;
    background: var(--cp-gray-100);
    border: 1px dashed var(--cp-gray-200);
    white-space: nowrap;
}
/* Phase 14.5.2: article-level "pending" tone — plugin output still
   renders but chrome is muted so the card doesn't look like an
   active emergency. */
.fw-card.fw-card-pending {
    background: var(--cp-gray-50);
    border-color: var(--cp-gray-200);
}
.fw-card.fw-card-pending .fw-card-headline {
    color: var(--cp-gray-500);
}
.fw-card-meta {
    font-size: 0.6875rem;
    color: var(--cp-gray-500);
    margin-top: -0.375rem;
    margin-bottom: -0.25rem;
}
.fw-card-headline {
    font-size: 0.8125rem;
    color: var(--cp-gray-700);
}
/* Phase 14.5.2.c: tone-bordered status strip on dashboard cards.
   Replaces the plain headline div with a bordered block carrying a
   pulse dot — operators scan tone at a glance instead of reading. */
.fw-card-status-strip {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: 0.8125rem;
    line-height: 1.4;
}
.fw-card-status-strip-attack {
    background: var(--cp-red-soft-bg);
    border-color: var(--cp-red-border);
    color: #7f1d1d;
}
.fw-card-status-strip-warn {
    background: var(--cp-amber-bg);
    border-color: var(--cp-amber-border);
    color: #78350f;
}
.fw-card-status-strip-clear {
    background: var(--cp-green-soft-bg);
    border-color: var(--cp-green-border);
    color: #065f46;
}
.fw-card-status-strip-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}
.fw-card-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
    margin-top: 0.3125rem;
}
.fw-card-status-strip-attack .fw-card-status-dot {
    background: var(--cp-red);
    animation: fw-card-status-pulse 2s ease-in-out infinite;
}
.fw-card-status-strip-warn .fw-card-status-dot {
    background: var(--cp-amber);
}
.fw-card-status-strip-clear .fw-card-status-dot {
    background: var(--cp-green);
}
.fw-card-status-strip-info .fw-card-status-dot {
    background: var(--cp-blue);
}
.fw-card-status-body {
    flex: 1;
}
@keyframes fw-card-status-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.55;
        transform: scale(0.85);
    }
}
.fw-card-bar {
    height: 0.375rem;
    background: var(--cp-gray-100);
    border-radius: 9999px;
    overflow: hidden;
}
.fw-card-bar-fill {
    height: 100%;
}
.fw-card-bar-fill.tone-attack {
    background: var(--cp-red);
}
.fw-card-bar-fill.tone-warn {
    background: var(--cp-amber);
}
.fw-card-bar-fill.tone-clear {
    background: var(--cp-green);
}
.fw-card-bar-fill.tone-info {
    background: var(--cp-blue);
}
.fw-card-bar-fill.tone-pending,
.fw-card-bar-fill.tone-idle,
.fw-card-bar-fill.tone-neutral {
    background: var(--cp-gray-400);
}
.fw-card-bar-label {
    font-size: 0.75rem;
    color: var(--cp-gray-500);
}
.fw-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.fw-chip {
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: var(--cp-gray-100);
    color: var(--cp-gray-700);
}
.fw-chip-high {
    background: var(--cp-red-bg);
    color: #991b1b;
}
.fw-chip-low {
    background: var(--cp-amber-bg);
    color: #78350f;
}
.fw-chip-leading {
    background: var(--cp-amber-leading-bg);
    color: #78350f;
}
.fw-chip-clear {
    background: var(--cp-green-bg);
    color: #065f46;
}
.fw-chip-idle {
    background: var(--cp-gray-100);
    color: var(--cp-gray-400);
}
.fw-chip-summary {
    background: var(--cp-gray-100);
    color: var(--cp-gray-500);
    font-style: italic;
}

/* ───────────────────────────── Landing catalog / tenants / frameworks ── */
.landing-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--cp-gray-500);
}

/* Catalog explainer — blue info pill at the top of the tab. */
.catalog-explainer {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    color: #1e40af;
    font-size: 0.8125rem;
    line-height: 1.45;
}
.catalog-explainer-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #bfdbfe;
    color: #1e40af;
    font-weight: 700;
    font-size: 0.75rem;
}

/* Summary cards — top row of the tab, one per status + total. */
.catalog-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.625rem;
    margin-bottom: 1rem;
}
@media (max-width: 900px) {
    .catalog-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.catalog-summary-card {
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.catalog-summary-card-supported {
    border-color: var(--cp-green-border);
}
.catalog-summary-card-scheduled {
    border-color: #bfdbfe;
}
.catalog-summary-card-future {
    border-color: var(--cp-amber-border);
}
.catalog-summary-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--cp-gray-500);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.catalog-summary-card-supported .catalog-summary-label {
    color: #065f46;
}
.catalog-summary-card-scheduled .catalog-summary-label {
    color: #1e40af;
}
.catalog-summary-card-future .catalog-summary-label {
    color: #92400e;
}
.catalog-summary-dot {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: currentColor;
}
.catalog-summary-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cp-gray-900);
    margin-top: 0.125rem;
    line-height: 1.15;
}
.catalog-summary-card-supported .catalog-summary-value {
    color: #065f46;
}
.catalog-summary-card-scheduled .catalog-summary-value {
    color: #1e40af;
}
.catalog-summary-card-future .catalog-summary-value {
    color: #92400e;
}
.catalog-summary-sub {
    font-size: 0.625rem;
    color: var(--cp-gray-400);
    margin-top: 0.125rem;
}

/* Filter bar — search + two selects + reset. */
.catalog-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.5rem;
}
.catalog-filters label {
    display: inline-flex;
    align-items: center;
}
.catalog-search {
    flex: 1 1 220px;
    min-width: 180px;
}
.catalog-search input,
.catalog-filters select {
    font-size: 0.8125rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--cp-gray-300);
    border-radius: 0.375rem;
    background: #fff;
    color: var(--cp-gray-900);
}
.catalog-search input {
    width: 100%;
}
.catalog-search input:focus,
.catalog-filters select:focus {
    outline: 2px solid var(--color-brand-green, #25af88);
    outline-offset: -1px;
    border-color: var(--color-brand-green, #25af88);
}
.catalog-reset {
    font-size: 0.75rem;
    color: var(--cp-gray-500);
    background: transparent;
    border: 0;
    padding: 0.375rem 0.5rem;
    cursor: pointer;
}
.catalog-reset:hover {
    color: var(--color-brand-green, #25af88);
    text-decoration: underline;
}

/* Legend — ✓ / · / — explanation. */
.catalog-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.5rem 0.875rem;
    margin-bottom: 0.75rem;
    background: var(--cp-gray-50);
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: var(--cp-gray-600);
}
.catalog-legend-label {
    font-weight: 600;
    color: var(--cp-gray-700);
}
.catalog-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.catalog-legend-item .landing-catalog-cell {
    padding: 0;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.landing-catalog-wrapper {
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
    overflow-x: auto;
}
/* Compact matrix — 27 frameworks x 10-ish verticals must fit without
   horizontal scroll on a typical 1440px screen. Mockup trick: render
   each cell as a tiny 22x22 rounded-square badge (block style) rather
   than padded text — much denser, reads at-a-glance. */
.landing-catalog {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    table-layout: auto;
}
.landing-catalog thead th {
    background: var(--cp-gray-50);
    color: var(--cp-gray-700);
    font-weight: 600;
    text-align: center;
    padding: 0.5rem 0.375rem;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--cp-gray-200);
    white-space: nowrap;
    vertical-align: bottom;
}
.landing-catalog-fw-col {
    text-align: left;
    min-width: 10rem;
    padding: 0.5rem 0.625rem;
}
.landing-catalog-vertical-col {
    text-align: center;
    min-width: 2.25rem;
    width: auto;
}
.landing-catalog-status-col {
    text-align: center;
    min-width: 4.5rem;
}
.landing-catalog-row {
    border-bottom: 1px solid var(--cp-gray-100);
}
.landing-catalog-row:hover {
    background: #fafafa;
}
.landing-catalog-row[hidden] {
    display: none;
}
.landing-catalog-fw {
    padding: 0.5rem 0.625rem;
    text-align: left;
    font-weight: 500;
}
.landing-catalog-short {
    display: block;
    font-size: 0.625rem;
    color: var(--cp-gray-400);
    margin-top: 1px;
}
.landing-catalog-status {
    padding: 0.375rem 0.25rem;
    text-align: center;
}
/* Cell = small centred badge. The 22×22 rounded-square, 11px bold
   glyph matches the mockup `.cov` so every vertical squeezes in
   horizontally without the label-text width of the old style. */
.landing-catalog-cell {
    padding: 0.375rem 0.25rem;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 700;
}
.landing-catalog-cell > .cov-badge,
.landing-catalog-cell {
    vertical-align: middle;
}
.landing-catalog-cell .cov-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.375rem;
    line-height: 1;
}
.landing-catalog-cell-primary .cov-badge {
    background: #d1fae5;
    color: #065f46;
}
.landing-catalog-cell-scheduled .cov-badge {
    background: #dbeafe;
    color: #1e40af;
}
.landing-catalog-cell-secondary .cov-badge {
    background: #f3f4f6;
    color: #9ca3af;
}
.landing-catalog-cell-empty {
    color: #e5e7eb;
}

/* Phase 14.5.2: catalog row for a framework without a detail page —
   name is plain (greyed) text, not a link. */
.landing-catalog-fw-disabled {
    color: var(--cp-gray-500);
    cursor: default;
}

/* Vertical-column highlight — driven by ``.vert-highlight`` classes
   the client-side filter adds to thead/tbody cells when the user
   picks a vertical from the dropdown. Matches the mockup's soft
   amber column bar (index.html:47-48). ``!important`` mirrors the
   mockup and defeats the per-cell / per-header backgrounds that
   otherwise win on specificity. */
.landing-catalog .vert-highlight {
    background: #fffbeb !important;
}
.landing-catalog thead th.vert-highlight {
    background: #fef3c7 !important;
    color: #92400e !important;
}

/* Row-counter footer — mirrors mockup's "Showing N of M" + totals. */
.catalog-footer {
    padding: 0.5rem 0.875rem;
    border-top: 1px solid var(--cp-gray-200);
    background: var(--cp-gray-50);
    font-size: 0.75rem;
    color: var(--cp-gray-500);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}
.catalog-footer-sep {
    color: var(--cp-gray-300);
}
.catalog-footer-stat {
    font-weight: 500;
}
.catalog-footer-stat-supported {
    color: #065f46;
}
.catalog-footer-stat-scheduled {
    color: #1e40af;
}
.catalog-footer-stat-future {
    color: #92400e;
}
.catalog-footer-empty {
    color: #92400e;
    margin-left: auto;
}
.catalog-footer-empty[hidden] {
    display: none;
}

.landing-status-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.landing-status-badge-supported {
    background: var(--cp-green-bg);
    color: #065f46;
    border: 1px solid var(--cp-green-border);
}
.landing-status-badge-scheduled {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
.landing-status-badge-future {
    background: var(--cp-amber-bg);
    color: #78350f;
    border: 1px solid var(--cp-amber-border);
}
.landing-status-badge-planned {
    background: var(--cp-gray-100);
    color: var(--cp-gray-500);
    border: 1px solid var(--cp-gray-200);
}

.landing-tenants-empty {
    display: flex;
    gap: 0.75rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.75rem;
}
.landing-tenants-empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cp-gray-900);
    margin-bottom: 0.375rem;
}
.landing-tenants-empty-body {
    font-size: 0.8125rem;
    color: var(--cp-gray-500);
    line-height: 1.55;
}
.landing-tenants-empty-meta {
    font-size: 0.75rem;
    color: var(--cp-gray-500);
    margin-top: 0.75rem;
}

/* ────────────────────────────────────── Phase 14.5.2 Tenants tab ── */

.landing-tenants {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.landing-tenants-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.landing-tenants-kpi-tile {
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.5rem;
    padding: 0.75rem 0.875rem;
}
.landing-tenants-kpi-tile-clear {
    border-color: var(--cp-green-border);
}
.landing-tenants-kpi-tile-partial {
    border-color: #fcd34d;
}
.landing-tenants-kpi-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cp-gray-500);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.landing-tenants-kpi-tile-clear .landing-tenants-kpi-label {
    color: #059669;
}
.landing-tenants-kpi-tile-partial .landing-tenants-kpi-label {
    color: #b45309;
}
.landing-tenants-kpi-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    display: inline-block;
}
.landing-tenants-kpi-dot-clear {
    background: var(--cp-green);
}
.landing-tenants-kpi-dot-partial {
    background: #f59e0b;
}
.landing-tenants-kpi-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cp-gray-900);
    margin-top: 0.25rem;
}
.landing-tenants-kpi-tile-clear .landing-tenants-kpi-value {
    color: #059669;
}
.landing-tenants-kpi-tile-partial .landing-tenants-kpi-value {
    color: #b45309;
}
.landing-tenants-kpi-sub {
    font-size: 0.6875rem;
    color: var(--cp-gray-500);
    margin-top: 0.125rem;
}

.landing-tenants-explainer {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: #1e40af;
    align-items: flex-start;
}

.landing-tenants-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.5rem;
    align-items: center;
}
.landing-tenants-search {
    flex: 1;
    min-width: 12rem;
}
.landing-tenants-search input,
.landing-tenants-filters select {
    width: 100%;
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    background: #fff;
}
.landing-tenants-filters select {
    width: auto;
}
.landing-tenants-reset {
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.375rem;
    background: #fff;
    font-size: 0.75rem;
    color: var(--cp-gray-700);
    cursor: pointer;
}
.landing-tenants-reset:hover {
    background: var(--cp-gray-50);
}

.landing-tenants-table-wrapper {
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
}
.landing-tenants-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    text-align: left;
}
.landing-tenants-table thead th {
    background: var(--cp-gray-50);
    color: var(--cp-gray-700);
    font-weight: 600;
    padding: 0.625rem 0.75rem;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--cp-gray-200);
}
.landing-tenants-col-coverage {
    width: 12rem;
}
.landing-tenants-col-actions {
    width: 6rem;
    text-align: right;
}
.landing-tenants-row {
    border-bottom: 1px solid var(--cp-gray-100);
}
.landing-tenants-row:hover {
    background: #fafafa;
}
.landing-tenants-row > th,
.landing-tenants-row > td {
    padding: 0.625rem 0.75rem;
    vertical-align: top;
}
.landing-tenants-name {
    font-weight: 500;
    text-align: left;
}
.landing-tenants-name-sub {
    font-size: 0.6875rem;
    color: #b45309;
    margin-top: 0.125rem;
}

.landing-tenants-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.landing-tenants-fw-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
}
.landing-tenants-fw-chip-supported {
    background: var(--cp-green-bg);
    color: #065f46;
}
.landing-tenants-fw-chip-scheduled {
    background: #dbeafe;
    color: #1e40af;
}
.landing-tenants-fw-chip-future,
.landing-tenants-fw-chip-planned {
    background: var(--cp-gray-100);
    color: var(--cp-gray-700);
}
.landing-tenants-frameworks-meta {
    font-size: 0.6875rem;
    color: var(--cp-gray-500);
    margin-top: 0.375rem;
}

.landing-tenants-coverage-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.landing-tenants-coverage-track {
    flex: 1;
    height: 0.375rem;
    background: var(--cp-gray-100);
    border-radius: 9999px;
    overflow: hidden;
}
.landing-tenants-coverage-fill {
    height: 100%;
    transition: width 0.2s ease;
}
.landing-tenants-coverage-fill-full {
    background: var(--cp-green);
}
.landing-tenants-coverage-fill-partial {
    background: #f59e0b;
}
.landing-tenants-coverage-pct {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.landing-tenants-coverage-pct-full {
    color: #059669;
}
.landing-tenants-coverage-pct-partial {
    color: #b45309;
}

.landing-tenants-actions {
    text-align: right;
}
.landing-tenants-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3125rem 0.625rem;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cp-gray-700);
    text-decoration: none;
    background: #fff;
}
.landing-tenants-action-btn:hover {
    background: var(--cp-gray-50);
}

.landing-tenants-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--cp-gray-200);
    background: var(--cp-gray-50);
    font-size: 0.75rem;
    color: var(--cp-gray-500);
    display: flex;
    gap: 0.375rem;
    align-items: center;
    flex-wrap: wrap;
}
.landing-tenants-footer-sep {
    color: var(--cp-gray-500);
}
.landing-tenants-footer-stat-clear {
    color: #059669;
    font-weight: 500;
}
.landing-tenants-footer-stat-partial {
    color: #b45309;
    font-weight: 500;
}

.landing-tenant-frameworks {
    background: #fff;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.75rem;
    padding: 1.125rem;
    margin-bottom: 1rem;
}
.landing-tenant-section-head {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cp-gray-900);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.landing-tenant-section-count {
    font-size: 0.6875rem;
    color: var(--cp-gray-500);
    background: var(--cp-gray-100);
    padding: 2px 8px;
    border-radius: 9999px;
    font-weight: 500;
}
.landing-tenant-fw-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.landing-tenant-fw-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 0.75rem;
    background: var(--cp-gray-50);
    border-radius: 0.5rem;
}
.landing-tenant-fw-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.landing-tenant-fw-body {
    flex: 1;
}
.landing-tenant-fw-name {
    font-weight: 600;
    color: var(--cp-gray-900);
    text-decoration: none;
}
.landing-tenant-fw-short {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--cp-gray-500);
    font-weight: 400;
}
.landing-tenant-fw-name-disabled {
    color: var(--cp-gray-500);
    cursor: default;
}
.landing-tenant-fw-pending {
    margin-left: 0.5rem;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--cp-gray-500);
    padding: 2px 6px;
    border-radius: 9999px;
    background: var(--cp-gray-100);
    border: 1px dashed var(--cp-gray-200);
}
.landing-tenant-available {
    background: #fff;
    border: 1px dashed var(--cp-gray-300);
    border-radius: 0.75rem;
    padding: 1.125rem;
}
.landing-tenant-available-note {
    font-size: 0.8125rem;
    color: var(--cp-gray-500);
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

/* ============================================================
   Rail action modals — Acknowledge bulk + Not Implemented Yet
   ----------------------------------------------------------
   Triggered by buttons in the tenant-scope rail's actions
   section (rail_detail_tenant.html).  Mirrors the alerts-page
   bulk-confirm modal's chrome so the two rail-side modals feel
   consistent.  Hidden by default; ``compliance-rail-actions.js``
   sets ``data-open="true"`` on click.
   ============================================================ */
.rail-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    align-items: center;
    justify-content: center;
}
.rail-modal[data-open="true"] {
    display: flex;
}
.rail-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    cursor: pointer;
}
.rail-modal-card {
    position: relative;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    max-width: 30rem;
    width: calc(100% - 2rem);
    padding: 1.25rem 1.5rem;
}
.rail-modal-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-gray-900);
}
.rail-modal-summary {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--cp-gray-700);
    line-height: 1.5;
}
.rail-modal-summary strong {
    color: var(--cp-gray-900);
}
/* Inline notice surfaced when the rail slice exceeds the SDK's batch
   cap and the modal truncates to the most recent N.  The amber chrome
   communicates "this is the operator's expectation-setter, not an
   error" — read alongside .rail-modal-summary which stays neutral. */
.rail-modal-batch-notice {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.375rem;
}
.rail-modal-batch-notice strong {
    color: #78350f;
}
.rail-modal-comment-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cp-gray-700);
}
.rail-modal-comment-hint {
    font-weight: 400;
    color: var(--cp-gray-400);
}
.rail-modal-comment {
    width: 100%;
    padding: 0.4375rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    border: 1px solid var(--cp-gray-300);
    border-radius: 0.375rem;
    background: #fff;
    color: var(--cp-gray-900);
    resize: vertical;
    min-height: 2.75rem;
}
.rail-modal-comment:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
}
.rail-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.875rem;
}
.rail-modal-btn {
    padding: 0.4375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 0.375rem;
    cursor: pointer;
    border: 1px solid transparent;
}
.rail-modal-btn-cancel {
    background: #fff;
    border-color: var(--cp-gray-300);
    color: var(--cp-gray-700);
}
.rail-modal-btn-cancel:hover {
    background: var(--cp-gray-50);
}
.rail-modal-btn-confirm {
    background: #059669;
    border-color: #059669;
    color: #fff;
}
.rail-modal-btn-confirm:hover {
    background: #047857;
    border-color: #047857;
}
/* Flash banner — replaces the modal title with a full-bleed coloured
   banner so the result of the bulk action is unmissable.  Negative
   horizontal margin pulls the banner to the card edges (the card has
   1.25rem 1.5rem padding) so it visually reads as a header strip. */
.rail-modal-card[data-flash] .rail-modal-title {
    margin: -1.25rem -1.5rem 0.75rem;
    padding: 0.625rem 1rem;
    color: #fff;
    border-radius: 0.5rem 0.5rem 0 0;
}
.rail-modal-card[data-flash="success"] .rail-modal-title {
    background: #047857;
}
.rail-modal-card[data-flash="error"] .rail-modal-title {
    background: #b91c1c;
}

/* Device list inside the bulk-acknowledge modal — mirrors the
   alerts-page bulk-confirm modal's chrome so the two are
   recognisable as the same affordance. */
.rail-modal-devices {
    margin: 0 0 0.75rem;
    border: 1px solid var(--cp-gray-200);
    border-radius: 0.375rem;
    background: var(--cp-gray-50);
    font-size: 0.8125rem;
}
.rail-modal-devices-head {
    padding: 0.4375rem 0.625rem;
    border-bottom: 1px solid var(--cp-gray-200);
    color: var(--cp-gray-700);
}
.rail-modal-device-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 12rem;
    overflow-y: auto;
}
.rail-modal-device-item {
    padding: 0.3125rem 0.625rem;
    border-bottom: 1px solid var(--cp-gray-100);
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--cp-gray-700);
    word-break: break-all;
}
.rail-modal-device-item:last-child {
    border-bottom: 0;
}
.rail-modal-scroll-hint {
    padding: 0.3125rem 0.625rem;
    border-top: 1px solid var(--cp-gray-200);
    font-size: 0.6875rem;
    color: var(--cp-gray-500);
    background: #fff;
}
.rail-modal-devices-empty {
    padding: 0.5rem 0.75rem;
    color: var(--cp-gray-400);
    font-style: italic;
}