/* ============================================================
   Showcase: shared design tokens + components
   Namespaced with an `sc` prefix throughout so nothing here can
   collide with the existing site stylesheet.
   ============================================================ */

:root {
    /* spacing scale, 8px base unit */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
    --space-9: 48px;  --space-10: 64px; --space-11: 80px; --space-12: 96px;

    /* neutrals */
    --sc-bg: #F5F7F5;
    --sc-surface: #FFFFFF;
    --sc-surface-2: #FBFCFB;
    --sc-border: rgba(15, 23, 42, .09);
    --sc-border-strong: rgba(15, 23, 42, .16);
    --sc-text: #14213B;
    --sc-text-muted: #5B6B7C;
    --sc-text-faint: #8B98A6;

    /* brand */
    --sc-blue: #004877;
    --sc-dblue: #003558;
    --sc-gold: #C9A84C;

    /* pillar accents */
    --sc-data: #0C8599;
    --sc-research: #B8863E;
    --sc-media: #7C5CFC;
    --sc-creative: #E15B43;
    --sc-warroom: #E23744;
    --sc-legislative: #0B5FA5;

    /* semantic roles, consistent everywhere */
    --sc-positive: #0EA37A;
    --sc-negative: #E0533F;
    --sc-neutral: #94A3B8;

    /* party fill/text pairs: fill is used for bars/dots/backgrounds, text is a
       separate, AA-safe token for anywhere the color labels a party code as text.
       Never reuse a fill hex directly as text color; bright fills like JSP's
       yellow fail contrast on light surfaces. */
    --sc-jsp-fill: #F5C400;
    --sc-jsp-text: #8A6A00;
    --sc-led-fill: #7A1F2B;
    --sc-led-text: #7A1F2B;

    /* dark theme surface (War Room) */
    --sc-dark-bg: #0A0E14;
    --sc-dark-surface: #12161F;
    --sc-dark-border: rgba(255, 255, 255, .09);
    --sc-dark-text: #E7EBF3;
    --sc-dark-text-muted: #8B96A8;

    --sc-radius-sm: 8px;
    --sc-radius: 14px;
    --sc-radius-lg: 22px;
    --sc-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.14);
    --sc-shadow-lg: 0 4px 8px rgba(15,23,42,.04), 0 24px 48px -16px rgba(15,23,42,.22);

    --sc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --sc-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

.scPage { background: var(--sc-bg); }
.scPage.scDark { background: var(--sc-dark-bg); color: var(--sc-dark-text); }
.scPage.scDark .pageMain { color: var(--sc-dark-text); }

.numFont {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'ss01' 1;
    letter-spacing: -0.02em;
}

/* ---- illustrative-demo badge, appears on every synthetic chart/demo ---- */
.scIllustrativeTag {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--sc-text-muted);
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border);
    border-radius: 999px;
    padding: var(--space-1) var(--space-4);
}
.scIllustrativeTag::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--sc-accent, var(--sc-data));
}
.scDark .scIllustrativeTag { background: rgba(255,255,255,.05); border-color: var(--sc-dark-border); color: var(--sc-dark-text-muted); }

/* ---- eyebrow / chip ---- */
.scEyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--sc-accent, var(--sc-blue));
}
.scEyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }

/* ---- fluid typography ---- */
.scH1 {
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.75rem);
    font-weight: 700; line-height: 1.08; letter-spacing: -0.03em;
    color: var(--sc-text);
}
.scDark .scH1 { color: var(--sc-dark-text); }
.scH2 {
    font-size: clamp(1.3rem, 1.15rem + 0.7vw, 2rem);
    font-weight: 700; line-height: 1.15; letter-spacing: -0.025em;
    color: var(--sc-text);
}
.scDark .scH2 { color: var(--sc-dark-text); }
.scLede {
    font-size: clamp(0.95rem, 0.89rem + 0.28vw, 1.1rem);
    line-height: 1.55; color: var(--sc-text-muted); max-width: 46em;
}
.scDark .scLede { color: var(--sc-dark-text-muted); }

.scSection { padding-block: var(--space-7); position: relative; }
.scSectionTight { padding-block: var(--space-5); }

/* ---- panel / card base ---- */
.scPanel {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow);
}
.scDark .scPanel { background: var(--sc-dark-surface); border-color: var(--sc-dark-border); box-shadow: none; }

/* nested/repeated cards inside a dense grid use the smaller radius so the grid doesn't look bubbly */
.scPanel .scPanel, .scCardSm {
    border-radius: var(--sc-radius-sm);
}

/* ---- spotlight card (ported from design-resource-library/reactbits) ---- */
.spotCard {
    --spot-x: 50%; --spot-y: 50%;
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: var(--sc-radius-lg);
}
.spotCard::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(360px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.5), transparent 70%);
    opacity: 0; transition: opacity 220ms var(--sc-ease-out);
}
.scDark .spotCard::before {
    background: radial-gradient(360px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.08), transparent 70%);
}
.spotCard:hover::before, .spotCard:focus-within::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .spotCard::before { transition: none; } }

/* ---- stat block (count-up numbers) ---- */
.scStat { display: flex; flex-direction: column; gap: 2px; }
.scStatValue {
    font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
    font-weight: 700; letter-spacing: -0.02em; color: var(--sc-text);
    font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.scDark .scStatValue { color: var(--sc-dark-text); }
/* true hero numbers (hub, page headers) keep the larger scale */
.scStatValueHero {
    font-size: clamp(1.75rem, 1.5rem + 1vw, 2.75rem);
}
.scStatLabel { font-size: 10.5px; color: var(--sc-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.scDark .scStatLabel { color: var(--sc-dark-text-muted); }

.scStatStrip {
    display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7);
    padding-top: var(--space-5); margin-top: var(--space-5);
    border-top: 1px solid var(--sc-border);
}
.scDark .scStatStrip { border-color: var(--sc-dark-border); }

/* ---- buttons ---- */
.scBtn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 46px; padding: 0 var(--space-6);
    border-radius: 999px; font-size: 15px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
    transition: transform 200ms var(--sc-ease-spring), background 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out);
}
.scBtn:active { transform: scale(0.97); }
.scBtnPrimary { background: var(--sc-accent, var(--sc-blue)); color: #fff; }
.scBtnPrimary:hover { filter: brightness(0.92); }
.scBtnGhost { background: transparent; border-color: var(--sc-border-strong); color: var(--sc-text); }
.scBtnGhost:hover { border-color: var(--sc-accent, var(--sc-blue)); color: var(--sc-accent, var(--sc-blue)); }
.scDark .scBtnGhost { border-color: var(--sc-dark-border); color: var(--sc-dark-text); }
.scBtn:focus-visible { outline: 2px solid var(--sc-accent, var(--sc-blue)); outline-offset: 2px; }

/* ---- chips / pills (selectors: wards, tabs, toggles) ---- */
.scChip {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; padding: 0 var(--space-4);
    border-radius: 999px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--sc-border-strong); background: var(--sc-surface);
    color: var(--sc-text-muted); cursor: pointer; white-space: nowrap;
    transition: background 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out), border-color 150ms var(--sc-ease-out), transform 150ms var(--sc-ease-spring);
}
.scChip:hover { border-color: var(--sc-accent, var(--sc-blue)); color: var(--sc-text); }
.scChip.isActive {
    background: var(--sc-accent, var(--sc-blue)); border-color: var(--sc-accent, var(--sc-blue)); color: #fff;
}
.scChip:focus-visible { outline: 2px solid var(--sc-accent, var(--sc-blue)); outline-offset: 2px; }
.scDark .scChip { background: rgba(255,255,255,.03); border-color: var(--sc-dark-border); color: var(--sc-dark-text-muted); }
.scDark .scChip.isActive { background: var(--sc-accent, var(--sc-warroom)); border-color: var(--sc-accent, var(--sc-warroom)); color: #fff; }

/* ---- generic bar (CSS-var driven width, animated via JS growBars) ---- */
@property --bar-current {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}
.scBar {
    --bar-current: 0%;
    position: relative; height: 10px; border-radius: 999px;
    background: rgba(15,23,42,.06); overflow: hidden;
}
.scDark .scBar { background: rgba(255,255,255,.08); }
.scBarFill {
    position: absolute; inset: 0 auto 0 0; width: var(--bar-current);
    border-radius: inherit; background: var(--bar-color, var(--sc-accent, var(--sc-blue)));
}

/* ---- insight callout: one-line analyst read, attached under a chart in place of a lede paragraph ---- */
.scInsight {
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    border-radius: var(--sc-radius-sm);
    background: color-mix(in srgb, var(--sc-accent, var(--sc-blue)) 8%, var(--sc-surface));
}
.scInsight::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
    border-radius: var(--sc-radius-sm) var(--sc-radius-sm) 0 0;
    background: var(--sc-accent, var(--sc-blue));
}
.scDark .scInsight { background: color-mix(in srgb, var(--sc-accent, var(--sc-warroom)) 12%, var(--sc-dark-surface)); }
.scInsightEyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--sc-accent, var(--sc-blue));
}
.scInsightText { font-size: 12.5px; line-height: 1.5; color: var(--sc-text); }
.scDark .scInsightText { color: var(--sc-dark-text); }

/* ---- sticky readout strip: 3-4 key numbers pinned above the page content on longer pages.
   Static in normal flow on mobile (the pill nav already owns the sticky-top slot there);
   promoted to sticky only on desktop, where the floating rail is fixed and off to the side. ---- */
.scReadout {
    background: rgba(245,247,245,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sc-border);
}
.scDark .scReadout { background: rgba(10,14,20,.92); border-color: var(--sc-dark-border); }
@media (min-width: 1024px) {
    .scReadout { position: sticky; top: 0; z-index: 700; }
}
/* Content is inset to the same max-width and padding as .scContainer, so the
   numbers line up with the rest of the page instead of hugging the true
   viewport edge (the readout bar itself stays full-bleed for its background). */
.scReadoutInner {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6);
    max-width: 1240px; margin-inline: auto; padding: var(--space-3) var(--space-5);
}
.scReadoutItem { display: flex; align-items: baseline; gap: 6px; }
.scReadoutValue {
    font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--sc-text);
    font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.scDark .scReadoutValue { color: var(--sc-dark-text); }
.scReadoutLabel { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sc-text-muted); }
.scDark .scReadoutLabel { color: var(--sc-dark-text-muted); }

/* ---- small color-swatch legend row, reused anywhere a chart or grid needs
   to explain what its colors mean (war room booth status, media bar bands) ---- */
.scLegendRow { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 11px; color: var(--sc-text-muted); }
.scLegendRow span { display: inline-flex; align-items: center; gap: 6px; }
.scLegendRow i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.scHeatLegendBar { width: 56px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #E0533F, #F0B429, #0EA37A); }

/* ---- Chart.js canvas wrapper: a sized, position:relative box the canvas fills.
   min-width:0 protects against CSS Grid's default min-content sizing blowing out
   the grid track when a canvas's intrinsic size exceeds the container (a real bug
   hit building this: a chart card would refuse to shrink below ~590px on mobile). ---- */
.scChartCanvasWrap { position: relative; width: 100%; min-width: 0; }
.scChartCanvasWrapSm { height: 190px; }
.scChartCanvasWrapMd { height: 240px; }

/* ---- reveal (used by showcase.js initScrollReveal) ---- */
[data-reveal] { will-change: opacity, transform; }

/* ---- responsive helpers ---- */
.scGrid { display: grid; gap: var(--space-4); }
.scContainer { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--space-5); }

@media (min-width: 768px) {
    .scGrid2 { grid-template-columns: repeat(2, 1fr); }
    .scGrid3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .scGrid3 { grid-template-columns: repeat(3, 1fr); }
    .scGrid4 { grid-template-columns: repeat(4, 1fr); }
    .scGrid6 { grid-template-columns: repeat(6, 1fr); }
}

/* ---- scrollbar styling for horizontally-scrollable demo strips ---- */
.scScrollX { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--sc-border-strong) transparent; }
.scScrollX::-webkit-scrollbar { height: 6px; }
.scScrollX::-webkit-scrollbar-thumb { background: var(--sc-border-strong); border-radius: 4px; }

/* ---- CTA band (closes hub + every pillar page) ---- */
.scCtaBand {
    background: linear-gradient(135deg, var(--sc-blue), var(--sc-dblue));
    border-radius: var(--sc-radius-lg);
    padding: var(--space-10) var(--space-8);
    text-align: center; color: #fff; position: relative; overflow: hidden;
}
.scCtaBand .scH2 { color: #fff; }
.scCtaBand .scLede { color: rgba(255,255,255,.78); margin-inline: auto; }
.scCtaBand .scBtnPrimary { background: #fff; color: var(--sc-blue); }
.scCtaBand .scBtnPrimary:hover { filter: none; background: #F0F4F8; }

/* ---- floating pillar rail, persistent cross-page nav ---- */
/* Desktop: fixed vertical rail, always reachable regardless of scroll
   position. Space for it is reserved on scPage via padding-left so it
   never overlaps the centered container. */
@media (min-width: 1024px) {
    body.scPage { padding-left: 76px; }
}

.scRail {
    position: fixed; left: 20px; top: 50%; transform: translateY(-50%);
    z-index: 900;
    display: none;
    flex-direction: column; align-items: center; gap: var(--space-3);
    padding: var(--space-3) 0;
}
@media (min-width: 1024px) { .scRail { display: flex; } }

.scRailHome {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--sc-surface); border: 1.5px solid var(--sc-border-strong);
    box-shadow: var(--sc-shadow); margin-bottom: var(--space-2);
    transition: transform 200ms var(--sc-ease-spring), border-color 200ms var(--sc-ease-out);
}
.scRailHome:hover { transform: scale(1.08); border-color: var(--sc-blue); }
.scRailHome svg { width: 15px; height: 15px; }

.scRailDivider { width: 18px; height: 1px; background: var(--sc-border-strong); margin: 2px 0 4px; }

.scRailItem {
    position: relative;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
    background: var(--sc-surface); border: 1.5px solid var(--sc-border-strong);
    color: var(--sc-text-muted); box-shadow: var(--sc-shadow);
    transition: transform 200ms var(--sc-ease-spring), border-color 200ms var(--sc-ease-out), background 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out);
}
.scRailItem:hover { transform: scale(1.1); border-color: var(--ri-color); color: var(--ri-color); }
.scRailItem:focus-visible { outline: 2px solid var(--ri-color); outline-offset: 2px; }
.scRailItem.isActive { background: var(--ri-color); border-color: var(--ri-color); color: #fff; }
.scRailItem.isPending { opacity: .5; }
.scRailItem.isPending:hover { transform: none; border-color: var(--sc-border-strong); color: var(--sc-text-muted); }

.scRailTooltip {
    position: absolute; left: 52px; top: 50%; transform: translateY(-50%) translateX(-6px);
    white-space: nowrap; font-size: 12.5px; font-weight: 600;
    background: var(--sc-text); color: #fff; padding: 6px 10px; border-radius: 8px;
    opacity: 0; pointer-events: none;
    transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
}
.scRailItem:hover .scRailTooltip, .scRailItem:focus-visible .scRailTooltip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Mobile / tablet: sticky horizontal pill bar under the header, same jump-anywhere job */
.scPillNav {
    position: sticky; top: 0; z-index: 800;
    display: flex; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: rgba(245,247,245,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sc-border);
    overflow-x: auto; scrollbar-width: none;
}
.scPillNav::-webkit-scrollbar { display: none; }
.scDark .scPillNav { background: rgba(10,14,20,.92); border-color: var(--sc-dark-border); }
.scPillNavItem {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: var(--space-2) var(--space-4); border-radius: 999px; font-size: 13px; font-weight: 600;
    background: var(--sc-surface); border: 1.5px solid var(--sc-border-strong); color: var(--sc-text-muted);
}
.scPillNavItem.isActive { background: var(--ri-color); border-color: var(--ri-color); color: #fff; }
.scPillNavItem.isPending { opacity: .5; }
@media (min-width: 1024px) { .scPillNav { display: none; } }

@media (max-width: 639.98px) {
    .scSection { padding-block: var(--space-6); }
    .scCtaBand { padding: var(--space-8) var(--space-5); }
}