/* ============================================================================
 * Compliance — landing page (cross-framework dashboard).
 *
 * The /compliance landing surface: framework-agnostic dashboard banner +
 * head, KPI tiles, dashboard cards (one per framework with its grade chip,
 * coverage ring, and last-update line), the catalog matrix (frameworks ×
 * Patitur LAF slots), and the cross-framework Tenants tab introduced in
 * Phase 14.5.2.  Class hooks all use the ``landing-*`` prefix.
 * ==========================================================================*/

/* ───────────────────────────── Landing banners + head ────────────────── */
.compliance-landing {
    /* Width + padding come from design-system.css :root variables —
       single source of truth shared with .fw-page (compliance) and
       .device-detail-page / .devices-page (analyze). */
    max-width: var(--page-max-width);
    margin: 0;
    padding: var(--page-padding);
}
.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: var(--danger-darkest-fg);
}
/* 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: var(--fg-body-strong);
}
.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: var(--bg-card);
    border: 1px solid var(--cp-red-border);
    border-radius: 0.5rem;
    color: var(--danger-strong-fg);
    font-weight: 500;
    text-decoration: none;
    font-size: 0.8125rem;
}
.landing-banner-cta:hover {
    background: var(--sev-high-bg);
}
.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: var(--coverage-strong-fg);
}
.landing-head {
    margin-bottom: 1.25rem;
}
.landing-title {
    /* Canonical page-title typography AND colour — same Ubuntu Sans Medium 30px
       NEAR-BLACK as ``.patitur-main-page-title`` / ``.dd-hero-title`` / ``.fw-name``
       (see design-tokens.css §h1). Not brand-green: a large green heading reads as
       a link. One type pattern across every page header — list pages (macro),
       detail pages (.dd-hero), compliance landings (here) + framework pages (.fw-name). */
    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);
    margin: 0;
}
/* Visually identical to .analytics-card-subtitle — same 14px, and
   --cp-gray-500 resolves to --fg-4 — differing only in margin. A
   candidate to collapse, which changes margins on two call sites and so
   is a judgement call rather than a sweep. */
.landing-subtitle {
    font-size: var(--fs-base);
    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: var(--color-brand-green-hover);
    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: var(--bg-card);
    border-color: var(--cp-green-border);
    color: var(--color-brand-green-hover);
}
.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: var(--bg-card);
    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: var(--danger-darkest-fg);
}
.fw-card-status-strip-warn {
    background: var(--cp-amber-bg);
    border-color: var(--cp-amber-border);
    color: var(--coverage-partial-fg);
}
.fw-card-status-strip-clear {
    background: var(--cp-green-soft-bg);
    border-color: var(--cp-green-border);
    color: var(--coverage-strong-fg);
}
.fw-card-status-strip-info {
    background: var(--sev-low-bg);
    border-color: var(--info-border);
    color: var(--info-strong-fg);
}
.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: var(--danger-deep-fg);
}
.fw-chip-low {
    background: var(--cp-amber-bg);
    color: var(--coverage-partial-fg);
}
.fw-chip-leading {
    background: var(--cp-amber-leading-bg);
    color: var(--coverage-partial-fg);
}
.fw-chip-clear {
    background: var(--cp-green-bg);
    color: var(--coverage-strong-fg);
}
.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: var(--sev-low-bg);
    border: 1px solid var(--info-border);
    border-radius: 0.5rem;
    color: var(--info-strong-fg);
    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: var(--info-border);
    color: var(--info-strong-fg);
    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: var(--bg-card);
    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: var(--info-border);
}
.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: var(--coverage-strong-fg);
}
.catalog-summary-card-scheduled .catalog-summary-label {
    color: var(--info-strong-fg);
}
.catalog-summary-card-future .catalog-summary-label {
    color: var(--pill-warning-fg);
}
.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: var(--coverage-strong-fg);
}
.catalog-summary-card-scheduled .catalog-summary-value {
    color: var(--info-strong-fg);
}
.catalog-summary-card-future .catalog-summary-value {
    color: var(--pill-warning-fg);
}
.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: var(--bg-card);
    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: var(--bg-card);
    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);
    outline-offset: -1px;
    border-color: var(--color-brand-green);
}
.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);
    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-500);
}
.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: var(--bg-card);
    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: var(--bg-page);
}
.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: var(--coverage-strong-bg);
    color: var(--coverage-strong-fg);
}
.landing-catalog-cell-scheduled .cov-badge {
    background: var(--info-bg);
    color: var(--info-strong-fg);
}
.landing-catalog-cell-secondary .cov-badge {
    background: var(--status-neutral-bg);
    color: var(--fg-5);
}
.landing-catalog-cell-empty {
    color: var(--border-base);
}

/* 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: var(--banner-warning-bg) !important;
}
.landing-catalog thead th.vert-highlight {
    background: var(--warning-soft-bg) !important;
    color: var(--pill-warning-fg) !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: var(--coverage-strong-fg);
}
.catalog-footer-stat-scheduled {
    color: var(--info-strong-fg);
}
.catalog-footer-stat-future {
    color: var(--pill-warning-fg);
}
.catalog-footer-empty {
    color: var(--pill-warning-fg);
    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: var(--coverage-strong-fg);
    border: 1px solid var(--cp-green-border);
}
.landing-status-badge-scheduled {
    background: var(--info-bg);
    color: var(--info-strong-fg);
    border: 1px solid var(--info-border);
}
.landing-status-badge-future {
    background: var(--cp-amber-bg);
    color: var(--coverage-partial-fg);
    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: var(--bg-card);
    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: var(--bg-card);
    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: var(--warning-mid);
}
.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: var(--color-brand-green-hover);
}
.landing-tenants-kpi-tile-partial .landing-tenants-kpi-label {
    color: var(--warning-strong-fg);
}
.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: var(--warning-fg);
}
.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: var(--color-brand-green-hover);
}
.landing-tenants-kpi-tile-partial .landing-tenants-kpi-value {
    color: var(--warning-strong-fg);
}
.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: var(--sev-low-bg);
    border: 1px solid var(--info-border);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: var(--info-strong-fg);
    align-items: flex-start;
}

.landing-tenants-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg-card);
    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: var(--bg-card);
}
.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: var(--bg-card);
    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: var(--bg-card);
    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: var(--bg-page);
}
.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: var(--warning-strong-fg);
    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: var(--coverage-strong-fg);
}
.landing-tenants-fw-chip-scheduled {
    background: var(--info-bg);
    color: var(--info-strong-fg);
}
.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: var(--warning-fg);
}
.landing-tenants-coverage-pct {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.landing-tenants-coverage-pct-full {
    color: var(--color-brand-green-hover);
}
.landing-tenants-coverage-pct-partial {
    color: var(--warning-strong-fg);
}

.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: var(--bg-card);
}
.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: var(--color-brand-green-hover);
    font-weight: 500;
}
.landing-tenants-footer-stat-partial {
    color: var(--warning-strong-fg);
    font-weight: 500;
}

.landing-tenant-frameworks {
    background: var(--bg-card);
    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: var(--bg-card);
    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: var(--bg-card);
    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: var(--lh-normal);
}
.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: var(--lh-normal);
    color: var(--pill-warning-fg);
    background: var(--banner-warning-bg);
    border: 1px solid var(--banner-warning-border);
    border-radius: 0.375rem;
}
.rail-modal-batch-notice strong {
    color: var(--coverage-partial-fg);
}
.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: var(--bg-card);
    color: var(--cp-gray-900);
    resize: vertical;
    min-height: 2.75rem;
}
.rail-modal-comment:focus {
    outline: none;
    border-color: var(--color-brand-green-hover);
    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: var(--bg-card);
    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: var(--color-brand-green-hover);
    border-color: var(--color-brand-green-hover);
    color: var(--fg-on-dark);
}
.rail-modal-btn-confirm:hover {
    background: var(--color-brand-green-deep);
    border-color: var(--color-brand-green-deep);
}
/* 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: var(--fg-on-dark);
    border-radius: 0.5rem 0.5rem 0 0;
}
.rail-modal-card[data-flash="success"] .rail-modal-title {
    background: var(--color-brand-green-deep);
}
.rail-modal-card[data-flash="error"] .rail-modal-title {
    background: var(--danger-strong-fg);
}

/* 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: var(--bg-card);
}
.rail-modal-devices-empty {
    padding: 0.5rem 0.75rem;
    color: var(--cp-gray-400);
    font-style: italic;
}