/* ============================================================================
 * Compliance — AWIA-style article cards.
 *
 * The Coverage tab on parallel-measures framework pages renders one article
 * card per item (RRA / ERP / certification surface for AWIA, CPG functions
 * for CISA).  Cards group by statutory chapter, carry a coverage chip, and
 * surface the LAFs that supply evidence for each item.
 * ==========================================================================*/

/* ───────────────────────────── 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: var(--bg-card);
    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: var(--coverage-strong-fg);
}
.fw-article-legend-chip-partial {
    background: var(--cp-amber-bg);
    color: var(--coverage-partial-fg);
}
.fw-article-legend-chip-supportive {
    background: var(--status-neutral-bg);
    color: var(--fg-4);
}
.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: var(--bg-card);
    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: var(--bg-page);
}

.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: var(--row-highlight);
    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: var(--coverage-strong-fg);
}
.fw-article-chip-grade-partial {
    background: var(--cp-amber-bg);
    color: var(--coverage-partial-fg);
}
.fw-article-chip-grade-supportive {
    background: var(--info-bg);
    color: var(--info-strong-fg);
}
.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: var(--pill-warning-fg);
    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: var(--coverage-strong-fg);
}
.fw-article-tenant-coverage-chip-grade-partial {
    background: var(--cp-amber-bg);
    color: var(--coverage-partial-fg);
}
.fw-article-tenant-coverage-chip-grade-supportive,
.fw-article-tenant-coverage-chip-grade-none {
    background: var(--cp-gray-100);
    color: var(--cp-gray-700);
}