/* retention-reference.css
 * Sprint post-K (MIN-02): extracted from the inline <style> block
 * previously in retention-reference.html. Kept verbatim — any
 * formatting / ordering / specificity interactions remain intact.
 * The FOUC-prevention <style> in <head> is still inline (must load
 * synchronously before first paint). */

/* Phase 3f: the retention period is one ordinal dimension, so the badge
   rainbow collapses to a single neutral pill differentiated by its label
   text (DM Sans — it's data). Color is reserved for 'Permanent', which
   keeps the navy fill. */
.retention-badge {
            display: inline-block;
            padding: 0.4rem 0.8rem;
            border-radius: var(--radius-full, 16px);
            font-weight: 600;
            font-size: 0.8125rem;
            font-family: var(--font-mono, 'DM Sans', sans-serif);
            white-space: nowrap;
            background: var(--neutral-bg, #e9edf3);
            color: var(--neutral-ink, #55627a);
            border: 1px solid var(--line-strong, #c6cfdc);
        }

        .retention-badge.permanent {
            background: var(--accent, #2c5282);
            color: white;
            border-color: var(--accent, #2c5282);
        }

        .retention-badge.months-14,
        .retention-badge.months-12,
        .retention-badge.months-6,
        .retention-badge.years-3 {
            background: var(--neutral-bg, #e9edf3);
            color: var(--neutral-ink, #55627a);
        }

        .footnote-card {
            background: var(--bg-card);
            border: 1px solid var(--warm-border, #dfe5ee);
            border-radius: var(--radius-lg, 10px);
            box-shadow: var(--shadow-card, 0 1px 2px rgba(22, 32, 46, 0.05));
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .footnote-card h4 {
            margin: 0 0 0.75rem 0;
            color: var(--primary-color);
        }

        .example-box {
            background: var(--gray-50);
            border-left: 4px solid var(--primary-color);
            padding: 1rem;
            margin-top: 1rem;
            font-size: 0.875rem;
            line-height: 1.6;
        }

        .example-box code {
            background: var(--bg-card);
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-family: var(--font-mono, 'DM Sans', sans-serif);
            color: var(--primary-color);
            font-weight: 600;
        }

        .regulation-card {
            background: var(--bg-card);
            border: 1px solid var(--warm-border, #dfe5ee);
            border-radius: var(--radius-md, 8px);
            box-shadow: var(--shadow-card, 0 1px 2px rgba(22, 32, 46, 0.05));
            padding: 1rem;
            transition: all 0.2s;
        }

        .regulation-card:hover {
            border-color: var(--warm-accent, #2c5282);
            box-shadow: var(--shadow-md, 0 2px 6px rgba(22, 32, 46, 0.07));
        }

        .regulation-card h4 {
            margin: 0 0 0.5rem 0;
            color: var(--primary-color);
            font-family: var(--font-mono, 'DM Sans', sans-serif);
        }

        .regulation-card p {
            margin: 0;
            font-size: 0.875rem;
            color: var(--gray-600);
        }

        /* Phase 3f: container + table styling moved out of per-cell inline
           styles (the rows are JS-templated) into classes. Quiet header,
           token zebra, hairline dividers. */
        .retention-reference-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1.5rem;
        }

        .retention-table th {
            background: var(--bg-card-alt, #f8fafc);
            /* --ink-label is scoped to 11px labels; at this 12.8px it
               measured 3.37:1, under the 4.5:1 these headers need. */
            color: var(--text-secondary);
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.75rem 1rem;
            text-align: left;
            border-bottom: 1px solid var(--warm-border, #dfe5ee);
        }

        .retention-table th.th-center { text-align: center; }

        .retention-table td {
            padding: 1rem;
            border-bottom: 1px solid var(--warm-border, #dfe5ee);
        }

        .retention-table tr.row-alt { background: var(--bg-card-alt, #f8fafc); }

        .retention-table td.td-record { font-weight: 500; }
        .retention-table td.td-cfr {
            font-family: var(--font-mono, 'DM Sans', sans-serif);
            font-size: 0.875rem;
        }
        .retention-table td.td-badge { text-align: center; }
        .retention-table td.td-desc {
            font-size: 0.875rem;
            color: var(--text-secondary, #55627a);
        }
        .retention-table td.td-notes {
            padding: 0.5rem 1rem 0.75rem 2.25rem;
            font-size: 0.8125rem;
            color: var(--text-muted, #64748b);
            font-style: italic;
        }

        /* Quiet info callouts (replaces the page's only gradient banner) */
        .info-callout {
            background: var(--info-bg, #e4eefb);
            border-left: 4px solid var(--accent, #2c5282);
            border-radius: 4px;
            padding: 1rem;
            margin-top: 1rem;
        }