/* ==========================================================================
   Doing More with Less — Clean, High-Contrast Editorial Stylesheet
   ========================================================================== */

:root {
    --mwl-font-display: 'Inter', system-ui, -apple-system, sans-serif;

    /* Light Mode WCAG AA/AAA High-Contrast Tokens */
    --mwl-surface: #ffffff;
    --mwl-surface-2: #f8fafc;
    --mwl-border: #cbd5e1;
    --mwl-text-muted: #475569; /* 7.5:1 on white */
    --mwl-amber-text: #b45309; /* 5.0:1 on white */
    --mwl-amber-bg: rgba(245, 158, 11, 0.14);
    --mwl-blue-text: #1d4ed8;  /* 6.7:1 on white */
    --mwl-blue-bg: rgba(37, 99, 235, 0.12);
    --mwl-red-text: #b91c1c;   /* 6.4:1 on white */
    --mwl-red-bg: rgba(220, 38, 38, 0.12);
    --mwl-mid-text: #e0e7ff;   /* midnight-shift chip */
    --mwl-mid-bg: #312e81;
}

[data-bs-theme="dark"] {
    /* Dark Mode WCAG AA/AAA High-Contrast Tokens */
    --mwl-surface: #111827;
    --mwl-surface-2: #1e293b;
    --mwl-border: #334155;
    --mwl-text-muted: #cbd5e1; /* 9.8:1 on #111827 */
    --mwl-amber-text: #fcd34d; /* 11.4:1 on #111827 */
    --mwl-amber-bg: rgba(251, 191, 36, 0.18);
    --mwl-blue-text: #93c5fd;  /* 9.2:1 on #111827 */
    --mwl-blue-bg: rgba(96, 165, 250, 0.18);
    --mwl-red-text: #fca5a5;   /* 8.4:1 on #111827 */
    --mwl-red-bg: rgba(248, 113, 113, 0.18);
    --mwl-mid-text: #e0e7ff;
    --mwl-mid-bg: #3730a3;
}

/* Modern Web Guidance: Typographic Wrap & Measure Rules */
.mwl-hero-title,
#overview h2,
#overview h3,
.safety-card-title {
    text-wrap: balance;
}

.mwl-hero-lead,
#overview p,
.mwl-stat-sub,
.safety-card-body {
    text-wrap: pretty;
    line-height: 1.6;
}

.mwl-muted {
    color: var(--mwl-text-muted);
}

.val-amber {
    color: var(--mwl-amber-text);
}

.val-blue {
    color: var(--mwl-blue-text);
}

.val-red {
    color: var(--mwl-red-text);
}

.text-xxs {
    font-size: 0.75rem;
}

/* ==========================================================================
   1. CENTERED HERO SECTION
   ========================================================================== */
.hero-section.bg-more-with-less,
[data-bs-theme="dark"] .hero-section.bg-more-with-less {
    background:
        radial-gradient(circle at 78% 20%, rgba(245, 158, 11, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 22% 80%, rgba(220, 38, 38, 0.16) 0%, transparent 50%),
        linear-gradient(rgba(9, 13, 22, 0.40), rgba(9, 13, 22, 0.65)),
        url('/images/atc_more_with_less_hero.svg') center/960px 560px repeat;
    color: #ffffff;
}

.mwl-hero-title {
    font-family: var(--mwl-font-display);
    font-size: clamp(2.35rem, 4.5vw + 0.75rem, 3.75rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.text-amber-glow {
    color: #fcd34d; /* 13.6:1 contrast on #0f172a */
}

.text-red-glow {
    color: #fca5a5; /* 9.8:1 contrast on #0f172a */
}

.mwl-hero-lead {
    font-size: clamp(1.05rem, 0.45vw + 0.95rem, 1.25rem);
    max-width: 64ch;
    color: #e2e8f0; /* 13.9:1 contrast on #0f172a */
}

.mwl-hero-lead strong {
    color: #ffffff;
    font-weight: 700;
}

/* ==========================================================================
   1b. THE 2.8% RAISE (OPENING BLOCK)
   ========================================================================== */
.mwl-raise-kicker {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mwl-red-text);
    margin-bottom: 0.3rem;
}

/* One bar: the share of the raise inflation takes, then what's left */
.mwl-raise-meter {
    background: var(--mwl-surface);
    border: 1px solid var(--mwl-border);
    border-radius: 0.9rem;
    padding: 1rem 1.2rem 0.9rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.mwl-raise-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--mwl-text-muted);
    margin-bottom: 0.4rem;
}

.mwl-raise-meter-head strong {
    font-family: var(--mwl-font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mwl-amber-text);
    font-variant-numeric: tabular-nums;
}

.mwl-raise-track {
    display: flex;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--mwl-border);
    background: var(--mwl-surface-2);
}

.mwl-raise-track .seg-eaten {
    display: flex;
    align-items: center;
    padding-left: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
    background: repeating-linear-gradient(135deg, var(--mwl-red-bg) 0 8px, transparent 8px 14px), var(--mwl-surface-2);
}

.mwl-raise-track .seg-gain { background: linear-gradient(90deg, #f59e0b, #d97706); }
.mwl-raise-track .seg-loss { background: linear-gradient(90deg, #ef4444, #b91c1c); }

.mwl-raise-meter-net {
    margin-top: 0.35rem;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--mwl-amber-text);
}

#overview .mwl-raise-verdict {
    padding: 0.75rem 1rem;
    border-left: 4px solid #dc2626;
    border-radius: 0.5rem;
    background: var(--mwl-red-bg);
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

/* ==========================================================================
   2. THREE-PILLAR SCORECARD & BOTTOM-LINE VERDICT STRIP
   ========================================================================== */
.mwl-stat-card {
    background: var(--mwl-surface);
    border-radius: 0.9rem;
    border: 1px solid var(--mwl-border);
    padding: 1.4rem 1.5rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.mwl-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.mwl-stat-card.accent-amber::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.mwl-stat-card.accent-blue::before {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.mwl-stat-card.accent-red::before {
    background: linear-gradient(90deg, #ef4444, #b91c1c);
}

.mwl-stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mwl-text-muted);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mwl-stat-value {
    font-family: var(--mwl-font-display);
    font-size: clamp(2rem, 2.2vw + 0.8rem, 2.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.mwl-stat-unit {
    font-family: var(--bs-body-font-family);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mwl-text-muted);
    letter-spacing: 0;
}

.mwl-stat-sub {
    font-size: 0.88rem;
    color: var(--mwl-text-muted);
    font-variant-numeric: tabular-nums;
}

.mwl-stat-sub strong {
    color: var(--bs-emphasis-color);
}

.delta-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.delta-badge.badge-up {
    background: var(--mwl-amber-bg);
    color: var(--mwl-amber-text);
}

.delta-badge.badge-down {
    background: var(--mwl-red-bg);
    color: var(--mwl-red-text);
}


/* ==========================================================================
   3. SECTION HEADERS & DIVERGENCE CHART CARD
   ========================================================================== */
.mwl-section-lead {
    font-size: 0.98rem;
    color: var(--mwl-text-muted);
    max-width: 68ch;
}

.mwl-section-lead strong {
    color: var(--bs-emphasis-color);
}

.mwl-chart-card {
    background: var(--mwl-surface);
    border-radius: 1rem;
    border: 1px solid var(--mwl-border);
    padding: 1.5rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.mwl-chart-sub {
    font-size: 0.86rem;
    color: var(--mwl-text-muted);
    max-width: 72ch;
}

.mwl-canvas-wrap {
    height: 430px;
    position: relative;
}

@media (max-width: 767.98px) {
    .mwl-canvas-wrap {
        height: 330px;
    }
}

/* ==========================================================================
   4. MOVING THE GOALPOSTS (2026 TARGET CUT)
   ========================================================================== */
.mwl-panel-card {
    background: var(--mwl-surface);
    border: 1px solid var(--mwl-border);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.035);
}

.mwl-target-canvas-wrap {
    height: 310px;
    position: relative;
}

@media (max-width: 767.98px) {
    .mwl-target-canvas-wrap {
        height: 260px;
    }
}

.mwl-gp-metric-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mwl-text-muted);
    margin-bottom: 0.25rem;
}

.mwl-gp-metric-val {
    font-family: var(--mwl-font-display);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.mwl-gp-metric-sub {
    font-family: var(--bs-body-font-family);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mwl-text-muted);
}

/* ==========================================================================
   5. ERODING THE MARGIN OF SAFETY & METHODOLOGY
   ========================================================================== */
#overview h2,
#overview h3,
#overview h4 {
    margin-top: 0;
}

/* The review team's verdict, set as a pull quote */
.mwl-pullquote {
    margin: 0 0 1.25rem;
    padding: 1.35rem 1.5rem 1.2rem 1.6rem;
    background: var(--mwl-surface-2);
    border: 1px solid var(--mwl-border);
    border-left: 5px solid #dc2626;
    border-radius: 0.9rem;
}

#overview .mwl-pullquote p {
    font-family: var(--mwl-font-display);
    font-size: clamp(1.2rem, 1.1vw + 0.95rem, 1.6rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--bs-emphasis-color);
    margin: 0;
    text-wrap: balance;
}

.mwl-pullquote figcaption {
    margin-top: 0.65rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mwl-text-muted);
}

.mwl-pullquote figcaption::before {
    content: '\2014\00a0';
}

.safety-card {
    background: var(--mwl-surface);
    border-radius: 0.9rem;
    border: 1px solid var(--mwl-border);
    padding: 1.1rem 1.25rem 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* Small diagram at the top of each card */
.safety-visual {
    background: var(--mwl-surface-2);
    border-radius: 0.65rem;
    padding: 0.85rem 0.75rem 0.6rem;
    margin-bottom: 0.9rem;
    display: flex;
    justify-content: center;
}

.safety-visual svg {
    width: 100%;
    max-width: 260px;
    height: auto;
    overflow: visible;
}

.safety-visual text {
    font-family: var(--bs-body-font-family);
}

.sv-box { fill: var(--mwl-surface); stroke: var(--mwl-border); stroke-width: 1.5; }
.sv-box-hot { stroke: var(--mwl-red-text); }
.sv-person { fill: var(--mwl-text-muted); }
.sv-person-hot { fill: var(--mwl-red-text); }
.sv-arrow { fill: none; stroke: var(--mwl-text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-label { fill: var(--mwl-text-muted); font-size: 11px; font-weight: 600; }
.sv-label-hot { fill: var(--mwl-red-text); }

.sv-day { fill: var(--mwl-red-bg); stroke: var(--mwl-red-text); stroke-width: 1.25; }
.sv-off { fill: none; stroke: var(--mwl-text-muted); stroke-width: 1.25; stroke-dasharray: 4 3; }
.sv-eve { fill: var(--mwl-amber-bg); }
.sv-dayshift { fill: var(--mwl-blue-bg); }
.sv-mid { fill: var(--mwl-mid-bg); }

.sv-day-text, .sv-off-text, .sv-eve-text, .sv-dayshift-text, .sv-mid-text {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.sv-day-text { fill: var(--mwl-red-text); }
.sv-off-text { fill: var(--mwl-text-muted); }
.sv-eve-text { fill: var(--mwl-amber-text); }
.sv-dayshift-text { fill: var(--mwl-blue-text); }
.sv-mid-text { fill: var(--mwl-mid-text); }

/* The report's own words, set at the foot of each card */
.safety-card-quote {
    margin: auto 0 0;
    padding: 0.15rem 0 0.15rem 0.75rem;
    border-left: 3px solid var(--mwl-red-text);
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--bs-emphasis-color);
}

.safety-card-kicker {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mwl-red-text);
    margin-bottom: 0.35rem;
}

.safety-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--bs-emphasis-color);
    margin: 0 0 0.5rem 0;
}

.safety-card-body {
    font-size: 0.88rem;
    color: var(--mwl-text-muted);
    margin-bottom: 0.85rem;
}

.safety-card-body strong {
    color: var(--bs-emphasis-color);
}

/* ==========================================================================
   7. REFERENCES / CITATION SECTION
   ========================================================================== */
.mwl-references {
    border-top: 1px solid var(--mwl-border);
}

.mwl-references-heading {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mwl-text-muted);
}

.mwl-citation-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--mwl-text-muted);
    font-variant-numeric: tabular-nums;
}

.mwl-citation-list li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: baseline;
}

.mwl-cite-num {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--mwl-text-muted);
    user-select: none;
}

.mwl-citation-list strong {
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

.mwl-citation-list a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mwl-citation-list a:hover {
    color: var(--bs-emphasis-color);
}