/* States Hub Page Styles - Fixed Design System */

/* ==========================================================================
   SAFE DESIGN TOKENS - No collision with ultra/gov system
   ========================================================================== */
:root {
    /* Critical: NEVER define generic --primary/--accent/--text here */
    --hub-container: 1100px;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font-sans);
    line-height: 1.6;
}

/* Light theme critical (only page bg + base text if needed) */
:root[data-theme="light"] body {
    background: #f8fafc;
    color: #0f172a;
}

/* ============================
   STATES HUB — FINAL POLISH
   Scope everything to this page
============================ */
.states-hub-page {
    --hub-radius: 16px;
    --hub-border: #E5E7EB;
    --hub-text: #0f172a;
    --hub-muted: #475569;
    --hub-muted2: #64748b;
    --hub-green: #059669;
    --hub-green-dark: #047857;
    --hub-shadow-sm: 0 6px 18px rgba(15,23,42,.08);
    --hub-shadow-md: 0 14px 40px rgba(15,23,42,.12);
}

/* Prevent anchor targets from being hidden under the fixed header */
#state-grid { scroll-margin-top: 120px; }
.gov-section { scroll-margin-top: 120px; }

/* Remove footer gray band/shadow */
.ultra-footer {
    box-shadow: none !important;
    border-top: 1px solid var(--hub-border) !important;
}

/* ---------- Container ---------- */
.states-hub-page .gov-container {
    max-width: var(--hub-container) !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ---------- Hero: fix the "missing CTA" + spacing ---------- */
.states-hub-page .gov-section.pt-header {
    padding-top: 64px !important;
    padding-bottom: 48px !important;
}

.states-hub-page .gov-h1 {
    color: var(--hub-text);
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.states-hub-page .gov-body {
    color: var(--hub-muted);
    max-width: 64ch;
}

.states-hub-page .gov-body-small {
    color: var(--hub-muted2);
    font-size: 13px;
}

.states-hub-page .states-hero { max-width: 920px; }

.states-hub-page .states-eyebrow {
    font-size: 12px !important;
    letter-spacing: .10em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    opacity: .75 !important;
    margin-bottom: 12px !important;
}

.states-hub-page .states-hero-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.states-hub-page .states-microcopy {
    margin-top: 10px;
    color: #526175;
}

.states-hub-page .states-hero-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.states-hub-page .states-hero-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 6px;
    color: var(--hub-muted);
}

.states-hub-page .states-hero-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--hub-green);
    font-weight: 700;
}

.states-hub-page .states-hero-tagline {
    color: var(--hub-text);
    font-weight: 600;
    font-style: italic;
}

/* Buttons: make sure "primary" is actually primary */
.states-hub-page .gov-btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    font-weight: 650;
    line-height: 1;
    transition: all 0.2s ease;
}

.states-hub-page .gov-btn-primary {
    background: var(--hub-green) !important;
    border: 1px solid var(--hub-green) !important;
    color: #fff !important;
}

.states-hub-page .gov-btn-primary:hover {
    background: var(--hub-green-dark) !important;
    border-color: var(--hub-green-dark) !important;
    transform: translateY(-1px);
}

.states-hub-page .gov-btn-secondary {
    background: #fff !important;
    border: 1px solid #D1D5DB !important;
    color: var(--hub-text) !important;
}

.states-hub-page .gov-btn-secondary:hover {
    border-color: #94A3B8 !important;
    background: #F9FAFB !important;
}

/* ---------- Multi-state callout: LIGHT style (consistent with page) ---------- */
.states-hub-page .multi-state-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-radius: var(--hub-radius);
    border: 1px solid var(--hub-border);
    background: #fff;
    color: var(--hub-text);
    box-shadow: var(--hub-shadow-sm);
    padding: 20px 24px;
}

.states-hub-page .multi-state-callout--light {
    background: #fff;
    border-color: var(--hub-border);
}

.states-hub-page .multi-state-callout__icon {
    width: 48px;
    height: 48px;
    background: rgba(5, 150, 105, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.states-hub-page .multi-state-callout__icon i {
    font-size: 20px;
    color: var(--hub-green);
}

.states-hub-page .multi-state-callout__content {
    flex: 1;
}

.states-hub-page .multi-state-callout__content strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--hub-text);
    display: block;
    margin-bottom: 4px;
}

.states-hub-page .multi-state-callout__content p {
    color: var(--hub-muted) !important;
    margin: 0;
    font-size: 15px !important;
    line-height: 1.5;
}

.states-hub-page .multi-state-callout .gov-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .states-hub-page .multi-state-callout {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .states-hub-page .multi-state-callout__icon {
        width: 40px;
        height: 40px;
    }

    .states-hub-page .multi-state-callout .gov-btn {
        width: 100%;
    }
}

/* ---------- Disclaimer Block (Info/Neutral Style) ---------- */
.states-hub-page .states-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #475569;
}

.states-hub-page .states-disclaimer i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #64748B;
}

.states-hub-page .states-disclaimer--compact {
    justify-content: center;
    text-align: center;
    margin-bottom: 24px;
    margin-top: 0;
}

/* ---------- What's Inside Micro-block ---------- */
.states-hub-page .whats-inside-block {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 24px auto;
    padding: 16px 24px;
    background: rgba(5, 150, 105, 0.04);
    border: 1px solid rgba(5, 150, 105, 0.15);
    border-radius: 12px;
    font-size: 14px;
    color: var(--hub-muted);
    line-height: 1.5;
}

.states-hub-page .whats-inside-block strong {
    color: var(--hub-text);
    font-weight: 700;
}


/* ---------- Map controls: deliberate control bar ---------- */
.states-hub-page .map-controls-bar {
    border: 1px solid var(--hub-border);
    background: rgba(248,250,252,.95);
    border-radius: var(--hub-radius);
    padding: 14px 14px 10px 14px;
    box-shadow: var(--hub-shadow-sm);
    margin-bottom: 18px;
    transition: all 0.2s ease;
}

/* Sticky behavior */
.states-hub-page .map-controls-bar--sticky.is-stuck {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    max-width: var(--hub-container);
    z-index: 100;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
    .states-hub-page .map-controls-bar--sticky.is-stuck {
        top: 64px;
        width: calc(100% - 32px);
        border-radius: 0 0 12px 12px;
    }
}

.states-hub-page .map-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.states-hub-page .map-helper {
    margin-top: 10px;
    font-size: 13px;
    color: #55657a;
}

/* Touch vs Desktop helper text */
.states-hub-page .map-helper--touch {
    display: none;
}

.states-hub-page .map-search {
    position: relative;
}

.states-hub-page .map-search input {
    height: 44px;
    min-width: 240px;
    padding: 0 48px 0 14px;
    border-radius: 999px;
    border: 1px solid #D1D5DB;
    background: #fff;
    color: var(--hub-text);
    outline: none;
    font-size: 15px;
    transition: all 0.2s ease;
}

.states-hub-page .map-search input:focus {
    border-color: rgba(5,150,105,.55);
    box-shadow: 0 0 0 4px rgba(5,150,105,.15);
}

.states-hub-page .map-search::before {
    content: "🔍";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.5;
}

.states-hub-page .filter-pill {
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #D1D5DB;
    background: #fff;
    color: var(--hub-text);
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    transition: all 0.2s ease;
}

.states-hub-page .filter-pill:hover {
    border-color: var(--hub-green);
    color: var(--hub-green);
}

.states-hub-page .filter-pill.active {
    background: var(--hub-green);
    border-color: var(--hub-green);
    color: #fff;
}

/* Filter wrapper with tooltip */
.states-hub-page .map-filters-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.states-hub-page .filter-help-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #D1D5DB;
    background: #fff;
    color: var(--hub-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.states-hub-page .filter-help-btn:hover {
    border-color: var(--hub-green);
    color: var(--hub-green);
}

.states-hub-page .filter-help-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid var(--hub-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    font-size: 13px;
    color: var(--hub-text);
    line-height: 1.5;
    min-width: 280px;
    z-index: 200;
}

.states-hub-page .filter-help-tooltip strong {
    color: var(--hub-green);
}

/* ---------- Map container + legend header row ---------- */
.states-hub-page .us-map-container {
    max-width: none;
    margin: 0 0 18px 0;
}

.states-hub-page .us-map-wrapper {
    position: relative;
    background: linear-gradient(135deg,#F8FAFC 0%, #F1F5F9 100%);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow-sm);
    padding: 14px;
}

.states-hub-page .us-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 6px 12px 6px;
}

.states-hub-page .us-map-title {
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.states-hub-page .us-map-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.states-hub-page .legend-pill {
    height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #D1D5DB;
    background: #fff;
    font-size: 13px;
    font-weight: 650;
    color: var(--hub-text);
    white-space: nowrap;
}

.states-hub-page .legend-pill--state {
    border-color: rgba(5,150,105,.35);
    color: var(--hub-green-dark);
    background: rgba(5,150,105,.06);
}

.states-hub-page .legend-pill--naic {
    border-color: rgba(22,163,74,.30);
    color: #14532D;
    background: rgba(22,163,74,.08);
}

/* ---------- Map Legend Bar (below map) ---------- */
.states-hub-page .map-legend-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--hub-border);
    border-radius: 12px;
    margin-bottom: 18px;
}

.states-hub-page .map-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hub-muted);
}

.states-hub-page .map-legend-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
}

.states-hub-page .map-legend-item--naic .map-legend-swatch {
    background: #DCFCE7;
    border-color: #16A34A;
}

.states-hub-page .map-legend-item--state .map-legend-swatch {
    background: rgba(14, 165, 233, 0.18);
    border-color: #0EA5E9;
}

.states-hub-page .map-legend-item--baseline .map-legend-swatch {
    background: #E2E8F0;
    border-color: #CBD5E1;
}

.states-hub-page .map-legend-updated {
    font-size: 12px;
    color: var(--hub-muted2);
    margin-left: auto;
    padding-left: 16px;
    border-left: 1px solid var(--hub-border);
}

.states-hub-page .map-legend-report {
    color: var(--hub-green);
    text-decoration: none;
    font-weight: 600;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--hub-border);
}

.states-hub-page .map-legend-report:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .states-hub-page .map-legend-bar {
        gap: 12px;
    }

    .states-hub-page .map-legend-updated {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        text-align: center;
        padding-top: 12px;
        border-top: 1px solid var(--hub-border);
    }
}

.states-hub-page .us-map { width: 100%; height: auto; display: block; }

.states-hub-page .us-map .state {
    fill: #E2E8F0;
    stroke: #CBD5E1;
    stroke-width: 0.5;
    cursor: default;
    transition: all 0.2s ease;
}

.states-hub-page .us-map .state--active {
    cursor: pointer;
}

.states-hub-page .us-map .state--naic {
    fill: #DCFCE7;
    stroke: #16A34A;
    stroke-width: 0.9;
    cursor: pointer;
}

.states-hub-page .us-map .state--stateonly {
    fill: rgba(14, 165, 233, 0.18);
    stroke: #0EA5E9;
    stroke-width: 0.9;
    cursor: pointer;
}

.states-hub-page .us-map .state--baseline {
    fill: #E2E8F0;
    stroke: #CBD5E1;
    stroke-width: 0.6;
    cursor: pointer;
}

.states-hub-page .us-map .state--naic:hover,
.states-hub-page .us-map .state--naic.state--highlight {
    fill: #16A34A;
    stroke: #15803D;
    stroke-width: 2;
    filter: drop-shadow(0 4px 8px rgba(22, 163, 74, 0.25));
}

.states-hub-page .us-map .state--stateonly:hover,
.states-hub-page .us-map .state--stateonly.state--highlight {
    fill: rgba(14, 165, 233, 0.35);
    stroke: #0284C7;
    stroke-width: 2;
    filter: drop-shadow(0 4px 8px rgba(14, 165, 233, 0.25));
}

.states-hub-page .us-map .state--baseline:hover,
.states-hub-page .us-map .state--baseline.state--highlight {
    fill: #CBD5E1;
    stroke: #94A3B8;
    stroke-width: 2;
    filter: drop-shadow(0 4px 8px rgba(148, 163, 184, 0.18));
}

.states-hub-page .us-map .state--selected {
    stroke-width: 2.5 !important;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.22)) !important;
}

.states-hub-page .us-map .state--active:focus,
.states-hub-page .us-map .state--baseline:focus,
.states-hub-page .us-map .state--naic:focus,
.states-hub-page .us-map .state--stateonly:focus {
    outline: none;
    stroke-width: 2 !important;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.24)) !important;
}

/* Tooltip */
.states-hub-page .us-map-tooltip {
    position: absolute;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 100;
    min-width: 220px;
}

.states-hub-page .us-map-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.states-hub-page .us-map-tooltip .tooltip-badge {
    display: inline-block;
    background: #059669;
    color: white;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.states-hub-page .us-map-tooltip .tooltip-name {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 4px;
}

.states-hub-page .us-map-tooltip .tooltip-law {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 10px;
}

.states-hub-page .us-map-tooltip .tooltip-cta {
    font-size: 13px;
    color: var(--hub-green);
    font-weight: 700;
}

/* ---------- Selection bar ---------- */
.states-hub-page .state-selection {
    margin: 16px 0 18px 0;
    border-radius: var(--hub-radius);
    border: 1px solid var(--hub-border);
    background: #fff;
    box-shadow: var(--hub-shadow-sm);
    padding: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.states-hub-page .state-selection__left {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--hub-text);
}

.states-hub-page .state-selection__label {
    font-size: 13px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.states-hub-page .state-selection__value {
    font-weight: 800;
    color: var(--hub-text);
}

.states-hub-page .state-selection__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.states-hub-page .state-selection__clear {
    height: 40px;
    width: 40px;
    border-radius: 999px;
    border: 1px solid #D1D5DB;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: all .15s ease;
}

.states-hub-page .state-selection__clear:hover {
    border-color: #94A3B8;
    color: #0f172a;
    background: #F9FAFB;
}

.states-hub-page .state-selection__clear:focus-visible {
    outline: 2px solid rgba(5,150,105,.55);
    outline-offset: 2px;
}

/* ---------- Map card: remove the "random blue SaaS gradient" vibe ---------- */
/* (Map card styles moved to .us-map-* section above.) */

/* ---------- State tiles: too tall + too faint right now ---------- */
.states-hub-page .state-tiles-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 900px) {
    .states-hub-page .state-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .states-hub-page .state-tiles-grid { grid-template-columns: 1fr; }
}

.states-hub-page .state-tile {
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    background: #fff;
    box-shadow: var(--hub-shadow-sm);
    padding: 18px 18px 16px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    min-height: 206px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.states-hub-page .state-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--hub-shadow-md);
    border-color: #CBD5E1;
}

.states-hub-page .state-tile:focus-visible {
    outline: 2px solid var(--hub-green);
    outline-offset: 2px;
}

.states-hub-page .state-tile__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 12px;
    background: transparent;
    border-bottom: none;
}

.states-hub-page .state-tile__abbr {
    font-size: 13px;
    font-weight: 800;
    color: var(--hub-green);
    letter-spacing: 0.02em;
    background: rgba(5, 150, 105, 0.10);
    padding: 6px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
}

.states-hub-page .state-tile__badge {
    font-size: 11px;
    font-weight: 800;
    padding: 6px 10px;
    background: rgba(5, 150, 105, 0.10);
    color: var(--hub-green);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    height: 24px;
    display: inline-flex;
    align-items: center;
}

.states-hub-page .state-tile__body {
    padding: 0;
    flex-grow: 1;
}

.states-hub-page .state-tile__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--hub-text);
    margin: 0 0 8px 0;
}

.states-hub-page .state-tile__law {
    font-size: 13px;
    color: var(--hub-muted);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.states-hub-page .state-tile__hint {
    font-size: 14px;
    color: var(--hub-muted);
    margin: 0;
    line-height: 1.38;
}

.states-hub-page .state-tile__footer {
    margin-top: auto;
    padding-top: 14px;
    padding-bottom: 0;
    border-top: 1px solid var(--hub-border);
    background: transparent;
}

.states-hub-page .state-tile__cta {
    color: var(--hub-green);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    padding: 10px 0;
    min-height: 44px;
}

.states-hub-page .state-tile__cta:after {
    content: "→";
    transition: transform 0.2s ease;
}

.states-hub-page .state-tile__cta:hover {
    color: var(--hub-green-dark);
    text-decoration: underline;
}

.states-hub-page .state-tile__cta:hover:after {
    transform: translateX(4px);
}

/* Make the baseline requirements tile feel intentional, not another state */
.states-hub-page .state-tile--baseline {
    background: linear-gradient(135deg,#ECFDF5 0%, #FFFFFF 70%);
    border-color: #BBF7D0;
}

.states-hub-page .state-tile--baseline .state-tile__abbr,
.states-hub-page .state-tile--baseline .state-tile__badge {
    background: rgba(22, 163, 74, 0.12);
    color: #14532D;
}

/* Map <-> Card coupling */
.states-hub-page .state-tile--map-hover,
.states-hub-page .state-tile:hover.state-tile--map-hover {
    border-color: rgba(5,150,105,.45);
    box-shadow: var(--hub-shadow-md);
}

.states-hub-page .state-tile--selected {
    border-color: rgba(5,150,105,.65);
    box-shadow: 0 16px 44px rgba(5,150,105,.12);
}

/* ---------- Bottom CTA section ---------- */
.states-hub-page .gov-bg-neutral:last-of-type {
    background: #F8FAFC !important;
    border-top: 1px solid var(--hub-border) !important;
    padding: 64px 0 !important;
}

.states-hub-page .gov-bg-neutral:last-of-type .gov-h2 {
    margin-bottom: 16px !important;
}

.states-hub-page .gov-bg-neutral:last-of-type .gov-body {
    margin-bottom: 32px !important;
}

.states-hub-page .states-bottom-cta {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---------- A-Z Jump Index ---------- */
.states-hub-page .az-jump-index {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--hub-border);
    border-radius: 12px;
    margin-bottom: 18px;
    transition: all 0.2s ease;
}

/* Sticky A-Z Index */
.states-hub-page .az-jump-index--sticky {
    position: fixed;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    max-width: var(--hub-container);
    z-index: 99;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .states-hub-page .az-jump-index--sticky {
        top: 120px;
        width: calc(100% - 32px);
        padding: 10px;
    }
}

.states-hub-page .az-jump-letter {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--hub-green);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.states-hub-page .az-jump-letter:hover {
    background: rgba(5, 150, 105, 0.08);
}

.states-hub-page .az-jump-letter--inactive {
    color: #CBD5E1;
    pointer-events: none;
    display: none; /* Hide letters with no entries */
}

/* Active letter highlight on scroll */
.states-hub-page .az-jump-letter--active {
    background: var(--hub-green);
    color: #fff;
}

.states-hub-page .az-jump-letter--active:hover {
    background: var(--hub-green-dark);
}

/* ---------- Letter Dividers ---------- */
.states-hub-page .letter-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 8px 0;
    scroll-margin-top: 180px;
}

.states-hub-page .letter-divider span {
    font-size: 20px;
    font-weight: 800;
    color: var(--hub-green);
    background: rgba(5, 150, 105, 0.08);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.states-hub-page .letter-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hub-border);
}

/* ---------- Featured/Baseline State Tile ---------- */
.states-hub-page .state-tile--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    min-height: auto;
    padding: 24px;
    background: linear-gradient(135deg, #ECFDF5 0%, #FFFFFF 100%);
    border-color: #BBF7D0;
}

.states-hub-page .state-tile--featured .state-tile__header {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}

.states-hub-page .state-tile--featured .state-tile__body {
    flex-grow: 0;
}

.states-hub-page .state-tile--featured .state-tile__footer {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

@media (max-width: 768px) {
    .states-hub-page .state-tile--featured {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .states-hub-page .state-tile--featured .state-tile__header {
        flex-direction: row;
    }
}

/* Baseline badge styling */
.states-hub-page .state-tile__badge--baseline {
    background: #FEF3C7 !important;
    color: #92400E !important;
    border: 1px solid #FDE68A;
}

/* Baseline state cards (in grid) */
.states-hub-page .state-tile--is-baseline {
    border-color: #FDE68A;
    background: linear-gradient(135deg, #FFFBEB 0%, #FFFFFF 100%);
}

.states-hub-page .state-tile--is-baseline .state-tile__abbr {
    background: #FEF3C7;
    color: #92400E;
}

/* Hint text clamping */
.states-hub-page .state-tile__hint {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Bottom CTA Section ---------- */
.states-hub-page .states-bottom-section {
    background: linear-gradient(180deg, #F1F5F9 0%, #E2E8F0 100%) !important;
    border-top: 1px solid var(--hub-border) !important;
    padding: 72px 0 !important;
}

.states-hub-page .states-bottom-content {
    max-width: 640px;
    margin: 0 auto;
}

.states-hub-page .states-bottom-icon {
    width: 64px;
    height: 64px;
    background: rgba(5, 150, 105, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
}

.states-hub-page .states-bottom-icon i {
    font-size: 28px;
    color: var(--hub-green);
}

.states-hub-page .states-bottom-content .gov-h2 {
    margin-bottom: 16px !important;
}

.states-hub-page .states-bottom-content .gov-body {
    margin-bottom: 24px !important;
}

.states-hub-page .states-bottom-cta {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---------- Mobile responsiveness ---------- */
@media (max-width: 768px) {
    .states-hub-page .gov-h1 {
        font-size: 32px !important;
    }

    .states-hub-page .gov-h2 {
        font-size: 26px !important;
    }

    .states-hub-page .map-search input {
        min-width: 100%;
    }

    .states-hub-page .az-jump-index {
        gap: 2px;
        padding: 12px;
    }

    .states-hub-page .az-jump-letter {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .states-hub-page .map-filters {
        flex-wrap: wrap;
        gap: 8px;
    }

    .states-hub-page .filter-pill {
        font-size: 12px;
        padding: 0 10px;
        height: 32px;
    }

    .states-hub-page .states-bottom-cta .gov-btn {
        width: 100%;
    }
}

/* ==========================================================================
   INDUSTRY FILTER BAR
   ========================================================================== */
.states-hub-page .industry-filter-bar {
    text-align: center;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--hub-border);
    border-radius: 12px;
}

.states-hub-page .industry-filter-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--hub-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.states-hub-page .industry-filter-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.states-hub-page .industry-filter-pill {
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid #D1D5DB;
    background: #fff;
    color: var(--hub-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.states-hub-page .industry-filter-pill:hover {
    border-color: var(--hub-green);
    color: var(--hub-green);
}

.states-hub-page .industry-filter-pill--active {
    background: var(--hub-green);
    border-color: var(--hub-green);
    color: #fff;
}

.states-hub-page .industry-filter-pill--active:hover {
    background: var(--hub-green-dark);
    border-color: var(--hub-green-dark);
    color: #fff;
}

.states-hub-page .industry-filter-note {
    margin-top: 12px;
    margin-bottom: 0 !important;
    font-size: 12px !important;
    color: var(--hub-muted2) !important;
}

/* Map legend note */
.states-hub-page .map-legend-note {
    text-align: center;
    margin-bottom: 24px !important;
    font-style: italic;
}

/* ==========================================================================
   STATE DETAIL PANEL - Compact Design
   Use ID selector (#state-detail-panel) for maximum specificity (100 points)
   to override aggressive !important rules from agency-governance.css
   ========================================================================== */

/* Nuclear reset: ID selector + !important = unbeatable specificity */
#state-detail-panel,
#state-detail-panel *,
#state-detail-panel *::before,
#state-detail-panel *::after {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
}

/* Now add back only the spacing we want */
#state-detail-panel {
    padding: 0 !important;
    margin-bottom: 24px !important;
}

#state-detail-panel h3,
#state-detail-panel h4,
#state-detail-panel h5 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: 1.3 !important;
}

#state-detail-panel p,
#state-detail-panel .gov-body,
#state-detail-panel .gov-body-small {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

#state-detail-panel ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#state-detail-panel li {
    margin: 0 !important;
    padding: 2px 0 2px 16px !important;
    position: relative !important;
}

/* Panel container */
#state-detail-panel {
    background: #fff !important;
    border: 1px solid var(--hub-border) !important;
    border-radius: var(--hub-radius) !important;
    box-shadow: var(--hub-shadow-sm) !important;
    scroll-margin-top: 120px !important;
    overflow: hidden !important;
}

/* Default state (no selection) */
#state-detail-panel .state-detail-panel__default {
    text-align: center !important;
    padding: 24px !important;
    background: #F8FAFC !important;
}

#state-detail-panel .state-detail-panel__default .gov-h3 {
    margin-bottom: 8px !important;
    color: var(--hub-text) !important;
    font-size: 16px !important;
}

#state-detail-panel .state-detail-panel__default .gov-body {
    margin-bottom: 8px !important;
}

#state-detail-panel .state-detail-panel__prompt-list {
    list-style: none !important;
    padding: 12px 16px !important;
    margin: 0 auto !important;
    display: inline-block !important;
    text-align: left !important;
    background: #fff !important;
    border-radius: 6px !important;
    border: 1px solid var(--hub-border) !important;
}

#state-detail-panel .state-detail-panel__prompt-list li {
    padding: 3px 0 3px 20px !important;
    position: relative !important;
    color: var(--hub-muted) !important;
    font-size: 13px !important;
}

#state-detail-panel .state-detail-panel__prompt-list li::before {
    content: "→" !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--hub-green) !important;
    font-weight: 700 !important;
}

/* Panel content container */
#state-detail-panel .state-detail-panel__content {
    padding: 0 !important;
}

/* Panel header with state name */
#state-detail-panel .state-detail-panel__header {
    background: var(--hub-green) !important;
    padding: 12px 20px !important;
    color: #fff !important;
}

#state-detail-panel .state-detail-panel__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

/* Badge row */
#state-detail-panel .state-detail-panel__badges {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    padding: 10px 20px !important;
    background: #F8FAFC !important;
    border-bottom: 1px solid var(--hub-border) !important;
}

#state-detail-panel .state-detail-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

#state-detail-panel .state-detail-badge--breach {
    background: #FEF3C7 !important;
    color: #92400E !important;
}

#state-detail-panel .state-detail-badge--naic {
    background: #DCFCE7 !important;
    color: #14532D !important;
}

#state-detail-panel .state-detail-badge--state {
    background: #E0F2FE !important;
    color: #0369A1 !important;
}

#state-detail-panel .state-detail-badge--baseline {
    background: #F1F5F9 !important;
    color: #475569 !important;
}

#state-detail-panel .state-detail-badge--ftc {
    background: #EDE9FE !important;
    color: #5B21B6 !important;
}

/* Panel body with sections */
#state-detail-panel .state-detail-panel__body {
    padding: 16px 20px 12px 20px !important;
}

/* State Detail Sections */
#state-detail-panel .state-detail-section {
    padding: 10px 0 !important;
    border-bottom: 1px solid #E5E7EB !important;
}

#state-detail-panel .state-detail-section:first-child {
    padding-top: 0 !important;
}

#state-detail-panel .state-detail-section:last-of-type {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

#state-detail-panel .state-detail-section__heading {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--hub-text) !important;
    margin-bottom: 4px !important;
}

#state-detail-panel .state-detail-section__subheading {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--hub-muted) !important;
    margin: 6px 0 3px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

#state-detail-panel .state-detail-section__intro {
    margin-bottom: 4px !important;
    color: var(--hub-muted) !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
}

#state-detail-panel .state-detail-section__bullets {
    list-style: none !important;
}

#state-detail-panel .state-detail-section__bullets li {
    padding: 2px 0 2px 16px !important;
    position: relative !important;
    color: #374151 !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
}

#state-detail-panel .state-detail-section__bullets li::before {
    content: "•" !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--hub-green) !important;
    font-weight: 900 !important;
    font-size: 12px !important;
}

#state-detail-panel .state-detail-section__bullets li strong {
    color: var(--hub-text) !important;
    font-weight: 600 !important;
}

#state-detail-panel .state-detail-section__note {
    margin-top: 6px !important;
    font-size: 11px !important;
    color: #6B7280 !important;
    padding: 5px 10px !important;
    background: #FEF3C7 !important;
    border-radius: 3px !important;
    font-style: italic !important;
}

/* Insurance overlay content styling */
#state-detail-panel .state-detail-section__insurance-content p {
    margin-bottom: 4px !important;
    color: var(--hub-muted) !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
}

#state-detail-panel .state-detail-section__insurance-fallback {
    padding: 10px 12px !important;
    background: #F8FAFC !important;
    border-radius: 4px !important;
    border: 1px dashed #CBD5E1 !important;
}

#state-detail-panel .state-detail-section__insurance-fallback p {
    margin-bottom: 4px !important;
    color: var(--hub-muted) !important;
    font-size: 13px !important;
}

#state-detail-panel .state-detail-section__insurance-fallback p:last-child {
    margin-bottom: 0 !important;
}

/* Panel CTAs */
#state-detail-panel .state-detail-panel__ctas {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding: 12px 20px !important;
    background: #F8FAFC !important;
    border-top: 1px solid var(--hub-border) !important;
}

#state-detail-panel .state-detail-panel__ctas .gov-btn {
    height: 36px !important;
    font-size: 13px !important;
    padding: 0 16px !important;
}

/* Select button in tiles */
.states-hub-page .state-tile__select-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px 0;
    min-height: 44px;
}

/* Selected state tile */
.states-hub-page .state-tile--selected {
    border-color: var(--hub-green) !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15), var(--hub-shadow-md) !important;
}

/* Map selected state */
.states-hub-page .us-map .state--selected {
    stroke: var(--hub-green) !important;
    stroke-width: 3 !important;
    filter: drop-shadow(0 4px 12px rgba(5, 150, 105, 0.35)) !important;
}

@media (max-width: 768px) {
    .states-hub-page .industry-filter-pills {
        gap: 6px;
    }

    .states-hub-page .industry-filter-pill {
        height: 36px;
        padding: 0 14px;
        font-size: 13px;
    }

    #state-detail-panel {
        border-radius: 12px !important;
    }

    #state-detail-panel .state-detail-panel__default {
        padding: 20px 16px !important;
    }

    #state-detail-panel .state-detail-panel__prompt-list {
        padding: 10px 14px !important;
    }

    #state-detail-panel .state-detail-panel__header {
        padding: 10px 16px !important;
    }

    #state-detail-panel .state-detail-panel__title {
        font-size: 15px !important;
    }

    #state-detail-panel .state-detail-panel__badges {
        padding: 8px 16px !important;
        gap: 5px !important;
    }

    #state-detail-panel .state-detail-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    #state-detail-panel .state-detail-panel__body {
        padding: 12px 16px 10px 16px !important;
    }

    #state-detail-panel .state-detail-section {
        padding: 8px 0 !important;
    }

    #state-detail-panel .state-detail-section__heading {
        font-size: 13px !important;
    }

    #state-detail-panel .state-detail-section__bullets li {
        padding: 2px 0 2px 14px !important;
        font-size: 12px !important;
    }

    #state-detail-panel .state-detail-panel__ctas {
        padding: 10px 16px !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    #state-detail-panel .state-detail-panel__ctas .gov-btn {
        width: 100% !important;
        height: 36px !important;
    }
}

/* ==========================================================================
   NEW TABBED STATE PANEL DESIGN
   Premium "regulator-ready" UI with STRONG visual hierarchy
   Typography scale: 28 > 20 > 16 > 14 > 12 > 11
   ========================================================================== */

/* Panel Header */
#state-detail-panel .state-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 28px 32px !important;
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    gap: 20px !important;
}

#state-detail-panel .state-panel-header__title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}

#state-detail-panel .state-panel-header__subtitle {
    font-size: 15px !important;
    color: rgba(255,255,255,0.9) !important;
    margin: 6px 0 0 0 !important;
    font-weight: 500 !important;
}

#state-detail-panel .state-panel-header__cta .gov-btn-sm {
    height: 40px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    background: #fff !important;
    color: #059669 !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
}

#state-detail-panel .state-panel-header__cta .gov-btn-sm:hover {
    background: #F0FDF4 !important;
    transform: translateY(-1px) !important;
}

/* Summary Tiles (3-up) */
#state-detail-panel .state-summary-tiles {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    padding: 20px 24px !important;
    background: #F8FAFC !important;
    border-bottom: 1px solid var(--hub-border) !important;
}

#state-detail-panel .state-summary-tile {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    background: #fff !important;
    border: 2px solid var(--hub-border) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

#state-detail-panel .state-summary-tile:hover {
    border-color: var(--hub-green) !important;
    box-shadow: 0 4px 12px rgba(5,150,105,0.12) !important;
    transform: translateY(-1px) !important;
}

#state-detail-panel .state-summary-tile--active {
    border-color: var(--hub-green) !important;
    background: #F0FDF4 !important;
    box-shadow: 0 2px 8px rgba(5,150,105,0.1) !important;
}

#state-detail-panel .state-summary-tile__icon {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(5,150,105,0.1) !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
}

#state-detail-panel .state-summary-tile__icon i {
    font-size: 20px !important;
    color: var(--hub-green) !important;
}

#state-detail-panel .state-summary-tile__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

#state-detail-panel .state-summary-tile__content strong {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--hub-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#state-detail-panel .state-summary-tile__content span {
    font-size: 13px !important;
    color: var(--hub-muted) !important;
    line-height: 1.35 !important;
}

/* Tab Navigation */
#state-detail-panel .state-tabs {
    display: flex !important;
    gap: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border-bottom: 3px solid #E5E7EB !important;
}

#state-detail-panel .state-tab {
    flex: 1 !important;
    padding: 16px 20px !important;
    background: transparent !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--hub-muted) !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.15s ease !important;
}

#state-detail-panel .state-tab:hover {
    color: var(--hub-text) !important;
    background: #F8FAFC !important;
}

#state-detail-panel .state-tab--active {
    color: var(--hub-green) !important;
    background: #fff !important;
    font-weight: 700 !important;
}

#state-detail-panel .state-tab--active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -3px !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: var(--hub-green) !important;
}

/* Tab Panels */
#state-detail-panel .state-tab-panels {
    padding: 0 !important;
}

#state-detail-panel .state-tab-panel {
    display: none !important;
    padding: 28px 32px !important;
}

#state-detail-panel .state-tab-panel--active {
    display: block !important;
}

/* Rule Block (Applies to / Trigger) - ENHANCED */
#state-detail-panel .rule-block {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%) !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

#state-detail-panel .rule-block__row {
    display: flex !important;
    padding: 18px 22px !important;
    border-bottom: 1px solid #E2E8F0 !important;
    gap: 16px !important;
}

#state-detail-panel .rule-block__row:last-child {
    border-bottom: none !important;
}

#state-detail-panel .rule-block__label {
    width: 110px !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #64748B !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding-top: 3px !important;
}

#state-detail-panel .rule-block__value {
    flex: 1 !important;
    font-size: 15px !important;
    color: #1E293B !important;
    line-height: 1.6 !important;
    font-weight: 450 !important;
}

/* Deadline Strip with Pills */
#state-detail-panel .deadline-strip {
    background: #FFFBEB !important;
    border: 2px solid #FDE68A !important;
    border-radius: 14px !important;
    padding: 20px 24px !important;
    margin-bottom: 24px !important;
}

#state-detail-panel .deadline-strip__label {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #92400E !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 16px !important;
}

#state-detail-panel .deadline-pills {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

#state-detail-panel .deadline-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 16px 24px !important;
    background: #fff !important;
    border: 2px solid #FDE68A !important;
    border-radius: 10px !important;
    min-width: 120px !important;
    box-shadow: 0 2px 4px rgba(146,64,14,0.08) !important;
}

#state-detail-panel .deadline-pill__number {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #92400E !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
}

#state-detail-panel .deadline-pill__label {
    font-size: 12px !important;
    color: #B45309 !important;
    text-align: center !important;
    font-weight: 600 !important;
}

#state-detail-panel .deadline-pill--insurance {
    border-color: #86EFAC !important;
    background: #F0FDF4 !important;
}

#state-detail-panel .deadline-pill--insurance .deadline-pill__number {
    color: #14532D !important;
}

#state-detail-panel .deadline-pill--insurance .deadline-pill__label {
    color: #166534 !important;
}

#state-detail-panel .deadline-pill--federal {
    border-color: #A78BFA !important;
    background: #F5F3FF !important;
}

#state-detail-panel .deadline-pill--federal .deadline-pill__number {
    color: #5B21B6 !important;
}

#state-detail-panel .deadline-pill--federal .deadline-pill__label {
    color: #6D28D9 !important;
}

/* Rule Section - CONSISTENT TYPOGRAPHY */
#state-detail-panel .rule-section {
    margin-bottom: 24px !important;
    padding: 0 !important;
}

#state-detail-panel .rule-section__heading {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    margin: 0 0 12px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

/* Rule Checklist - ALL 15px CONSISTENT */
#state-detail-panel .rule-checklist {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#state-detail-panel .rule-checklist li {
    padding: 6px 0 6px 24px !important;
    position: relative !important;
    font-size: 15px !important;
    color: #374151 !important;
    line-height: 1.5 !important;
    border-bottom: none !important;
}

#state-detail-panel .rule-checklist li:last-child {
    border-bottom: none !important;
}

#state-detail-panel .rule-checklist li::before {
    content: '•' !important;
    position: absolute !important;
    left: 8px !important;
    color: var(--hub-green) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

#state-detail-panel .rule-checklist li strong {
    color: #1E293B !important;
    font-weight: 600 !important;
}

#state-detail-panel .rule-checklist--check li::before {
    content: '✓' !important;
    color: var(--hub-green) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    left: 6px !important;
}

#state-detail-panel .rule-checklist--doc li::before {
    content: '📄' !important;
    font-size: 13px !important;
    left: 4px !important;
}

#state-detail-panel .rule-checklist--focus li::before {
    content: '🎯' !important;
    font-size: 13px !important;
    left: 4px !important;
}

/* Obligation Icons - PREMIUM GRID */
#state-detail-panel .obligation-icons {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding: 8px 0 !important;
}

#state-detail-panel .obligation-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 18px 14px !important;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%) !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 12px !important;
    min-width: 90px !important;
    flex: 1 !important;
    max-width: 120px !important;
    transition: all 0.15s ease !important;
}

#state-detail-panel .obligation-icon:hover {
    border-color: var(--hub-green) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(5,150,105,0.1) !important;
}

#state-detail-panel .obligation-icon i {
    font-size: 24px !important;
    color: var(--hub-green) !important;
}

#state-detail-panel .obligation-icon span {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

/* Annual Requirements - CARD STYLE */
#state-detail-panel .annual-requirements {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
}

#state-detail-panel .annual-req {
    padding: 18px 20px !important;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%) !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 12px !important;
    transition: all 0.15s ease !important;
}

#state-detail-panel .annual-req:hover {
    border-color: var(--hub-green) !important;
}

#state-detail-panel .annual-req__type {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #64748B !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

#state-detail-panel .annual-req__date {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--hub-green) !important;
    line-height: 1.2 !important;
}

#state-detail-panel .annual-req__note {
    font-size: 13px !important;
    color: #64748B !important;
    margin-top: 8px !important;
    line-height: 1.4 !important;
}

/* Rule Callouts - ENHANCED */
#state-detail-panel .rule-callout {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 22px !important;
    border-radius: 12px !important;
    margin-top: 20px !important;
}

#state-detail-panel .rule-callout i {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    font-size: 18px !important;
}

#state-detail-panel .rule-callout span {
    font-size: 15px !important;
    line-height: 1.55 !important;
}

#state-detail-panel .rule-callout--info {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
    border: 2px solid #93C5FD !important;
}

#state-detail-panel .rule-callout--info i {
    color: #2563EB !important;
}

#state-detail-panel .rule-callout--info span {
    color: #1E40AF !important;
}

#state-detail-panel .rule-callout--neutral {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    margin-bottom: 20px !important;
}

#state-detail-panel .rule-callout--neutral i {
    color: #64748B !important;
}

#state-detail-panel .rule-callout--neutral span {
    color: #475569 !important;
}

#state-detail-panel .rule-callout--questions {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
    border: 2px solid #F59E0B !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px 24px !important;
}

#state-detail-panel .rule-callout--questions h4 {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #92400E !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

#state-detail-panel .rule-callout--questions ul {
    margin: 0 !important;
    padding: 0 0 0 20px !important;
    list-style: disc !important;
}

#state-detail-panel .rule-callout--questions li {
    font-size: 14px !important;
    color: #78350F !important;
    padding: 4px 0 !important;
    line-height: 1.5 !important;
}

/* Panel Disclaimer - CLEAR LEGAL NOTE */
#state-detail-panel .state-panel-disclaimer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 24px !important;
    background: #F8FAFC !important;
    border-top: 1px solid var(--hub-border) !important;
    font-size: 13px !important;
    color: #64748B !important;
    font-style: italic !important;
}

#state-detail-panel .state-panel-disclaimer i {
    color: #94A3B8 !important;
    font-size: 14px !important;
}

/* Panel CTAs - PROMINENT */
#state-detail-panel .state-panel-ctas {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 24px !important;
    background: linear-gradient(135deg, #fff 0%, #F8FAFC 100%) !important;
    border-top: 2px solid #E2E8F0 !important;
}

#state-detail-panel .state-panel-ctas .gov-btn {
    height: 48px !important;
    font-size: 15px !important;
    padding: 0 28px !important;
    font-weight: 700 !important;
}

#state-detail-panel .state-panel-ctas .gov-btn-primary {
    box-shadow: 0 4px 12px rgba(5,150,105,0.25) !important;
}

#state-detail-panel .state-panel-ctas .gov-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(5,150,105,0.3) !important;
}

/* Panel Footer */
#state-detail-panel .state-panel-footer {
    background: #F8FAFC !important;
    border-top: 2px solid #E2E8F0 !important;
}

/* Helper text under tiles */
#state-detail-panel .state-tiles-helper {
    text-align: center !important;
    font-size: 13px !important;
    color: #64748B !important;
    padding: 0 24px 16px 24px !important;
    margin: 0 !important;
    background: #F8FAFC !important;
    font-style: italic !important;
}

/* 2-Column Deadline Grid - PREMIUM LAYOUT */
#state-detail-panel .deadline-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 28px !important;
    padding: 24px !important;
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%) !important;
    border: 2px solid #FDE68A !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(146,64,14,0.08) !important;
}

#state-detail-panel .deadline-grid__cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

#state-detail-panel .deadline-card {
    background: #fff !important;
    border: 2px solid #FDE68A !important;
    border-radius: 12px !important;
    padding: 20px 22px !important;
    box-shadow: 0 2px 6px rgba(146,64,14,0.06) !important;
}

#state-detail-panel .deadline-card--federal {
    border-color: #A78BFA !important;
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%) !important;
}

#state-detail-panel .deadline-card__label {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #92400E !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 8px !important;
}

#state-detail-panel .deadline-card--federal .deadline-card__label {
    color: #5B21B6 !important;
}

#state-detail-panel .deadline-card__timing {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #78350F !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

#state-detail-panel .deadline-card--federal .deadline-card__timing {
    color: #4C1D95 !important;
}

#state-detail-panel .deadline-card__note {
    font-size: 14px !important;
    color: #92400E !important;
    line-height: 1.5 !important;
}

#state-detail-panel .deadline-card--federal .deadline-card__note {
    color: #6D28D9 !important;
}

#state-detail-panel .deadline-grid__notes {
    background: #FFFBEB !important;
    border: 1px solid #FDE68A !important;
    border-left: 3px solid #F59E0B !important;
    border-radius: 6px !important;
    padding: 16px 16px 16px 16px !important;
}

#state-detail-panel .deadline-notes__heading {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #92400E !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

#state-detail-panel .deadline-notes__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#state-detail-panel .deadline-notes__list li {
    padding: 4px 0 4px 18px !important;
    position: relative !important;
    font-size: 14px !important;
    color: #78350F !important;
    line-height: 1.45 !important;
    border-bottom: none !important;
}

#state-detail-panel .deadline-notes__list li:last-child {
    border-bottom: none !important;
}

#state-detail-panel .deadline-notes__list li::before {
    content: '•' !important;
    position: absolute !important;
    left: 4px !important;
    color: #F59E0B !important;
    font-weight: 900 !important;
    font-size: 14px !important;
}

/* ============================================
   RULE SUBSECTIONS - PREMIUM CARD GRID LAYOUT
   ============================================ */

/* Container for subsection cards - 2-column grid */
#state-detail-panel .rule-section--notify,
#state-detail-panel .rule-section--ready,
#state-detail-panel .rule-section--export {
    margin-bottom: 28px !important;
}

#state-detail-panel .rule-section--notify .rule-subsection-grid,
#state-detail-panel .rule-section--ready .rule-subsection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin-top: 16px !important;
}

@media (max-width: 640px) {
    #state-detail-panel .rule-section--notify .rule-subsection-grid,
    #state-detail-panel .rule-section--ready .rule-subsection-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Subsection Cards - Premium Styled */
#state-detail-panel .rule-subsection {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 0 !important;
    transition: all 0.2s ease !important;
}

#state-detail-panel .rule-subsection:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

/* Full-width subsection for single cards */
#state-detail-panel .rule-subsection--full {
    grid-column: 1 / -1 !important;
}

/* Subsection label - Badge style */
#state-detail-panel .rule-subsection__label {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    background: var(--hub-green) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    margin-bottom: 14px !important;
}

/* Different label colors by type */
#state-detail-panel .rule-subsection--primary .rule-subsection__label {
    background: var(--hub-green) !important;
}

#state-detail-panel .rule-subsection--conditional .rule-subsection__label {
    background: #F59E0B !important;
}

#state-detail-panel .rule-subsection--coordination .rule-subsection__label {
    background: #6366F1 !important;
}

#state-detail-panel .rule-subsection--prepare .rule-subsection__label {
    background: #0EA5E9 !important;
}

#state-detail-panel .rule-subsection--incident .rule-subsection__label {
    background: #EF4444 !important;
}

/* Checklists inside cards */
#state-detail-panel .rule-subsection .rule-checklist {
    margin: 0 !important;
    padding: 0 !important;
}

#state-detail-panel .rule-subsection .rule-checklist li {
    padding: 10px 0 10px 28px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    font-size: 14px !important;
}

#state-detail-panel .rule-subsection .rule-checklist li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

#state-detail-panel .rule-subsection .rule-checklist li::before {
    left: 4px !important;
    top: 12px !important;
}

/* Export Package - Special Card Grid */
#state-detail-panel .export-package-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

@media (max-width: 640px) {
    #state-detail-panel .export-package-grid {
        grid-template-columns: 1fr !important;
    }
}

#state-detail-panel .export-package-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 18px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    transition: all 0.2s ease !important;
}

#state-detail-panel .export-package-card:hover {
    border-color: var(--hub-green) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.1) !important;
}

#state-detail-panel .export-package-card__icon {
    width: 40px !important;
    height: 40px !important;
    background: rgba(5, 150, 105, 0.1) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#state-detail-panel .export-package-card__icon i {
    font-size: 18px !important;
    color: var(--hub-green) !important;
}

#state-detail-panel .export-package-card__content strong {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    margin-bottom: 4px !important;
}

#state-detail-panel .export-package-card__content span {
    font-size: 13px !important;
    color: #64748B !important;
    line-height: 1.4 !important;
}

/* Legacy package list fallback */
#state-detail-panel .rule-checklist--package li {
    padding: 12px 16px 12px 48px !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

#state-detail-panel .rule-checklist--package li:hover {
    border-color: var(--hub-green) !important;
    transform: translateX(4px) !important;
}

#state-detail-panel .rule-checklist--package li:last-child {
    margin-bottom: 0 !important;
}

#state-detail-panel .rule-checklist--package li::before {
    content: '📦' !important;
    font-size: 18px !important;
    left: 14px !important;
    top: 12px !important;
}

#state-detail-panel .rule-checklist--package li strong {
    color: #1E293B !important;
    font-weight: 600 !important;
}

/* Rule tooltip */
#state-detail-panel .rule-tooltip {
    color: #94A3B8 !important;
    cursor: help !important;
    margin-left: 4px !important;
}

#state-detail-panel .rule-tooltip:hover {
    color: var(--hub-green) !important;
}

/* Mobile Responsive for New Components - PREMIUM MOBILE */
@media (max-width: 768px) {
    #state-detail-panel .deadline-grid {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
        gap: 16px !important;
    }

    #state-detail-panel .state-panel-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 24px 20px !important;
    }

    #state-detail-panel .state-panel-header__title {
        font-size: 24px !important;
    }

    #state-detail-panel .state-panel-header__cta {
        width: 100% !important;
    }

    #state-detail-panel .state-panel-header__cta .gov-btn-sm {
        width: 100% !important;
        height: 44px !important;
    }

    #state-detail-panel .state-summary-tiles {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
        gap: 12px !important;
    }

    #state-detail-panel .state-summary-tile {
        padding: 14px 16px !important;
    }

    #state-detail-panel .state-tabs {
        overflow-x: auto !important;
    }

    #state-detail-panel .state-tab {
        padding: 14px 16px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    #state-detail-panel .state-tab-panel {
        padding: 24px 20px !important;
    }

    #state-detail-panel .rule-block__row {
        flex-direction: column !important;
        gap: 6px !important;
        padding: 16px !important;
    }

    #state-detail-panel .rule-block__label {
        width: auto !important;
        padding-top: 0 !important;
    }

    #state-detail-panel .rule-section__heading {
        font-size: 16px !important;
    }

    #state-detail-panel .rule-checklist li {
        padding: 10px 0 10px 28px !important;
        font-size: 14px !important;
    }

    #state-detail-panel .deadline-pills {
        flex-direction: column !important;
    }

    #state-detail-panel .deadline-pill {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 14px 18px !important;
    }

    #state-detail-panel .deadline-pill__number {
        font-size: 24px !important;
    }

    #state-detail-panel .deadline-card__timing {
        font-size: 18px !important;
    }

    #state-detail-panel .obligation-icons {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    #state-detail-panel .obligation-icon {
        max-width: none !important;
        padding: 14px 10px !important;
    }

    #state-detail-panel .obligation-icon i {
        font-size: 20px !important;
    }

    #state-detail-panel .annual-requirements {
        grid-template-columns: 1fr !important;
    }

    #state-detail-panel .annual-req {
        min-width: 0 !important;
    }

    #state-detail-panel .rule-subsection-grid {
        grid-template-columns: 1fr !important;
    }

    #state-detail-panel .rule-subsection {
        padding: 16px !important;
    }

    #state-detail-panel .rule-subsection--full {
        grid-column: 1 !important;
    }

    #state-detail-panel .export-package-grid {
        grid-template-columns: 1fr !important;
    }

    #state-detail-panel .export-package-card {
        padding: 16px !important;
    }

    #state-detail-panel .rule-checklist--recipient li {
        padding: 10px 0 10px 28px !important;
    }

    #state-detail-panel .rule-checklist--package li {
        padding: 14px 16px 14px 48px !important;
    }

    #state-detail-panel .state-panel-ctas {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 12px !important;
    }

    #state-detail-panel .state-panel-ctas .gov-btn {
        width: 100% !important;
        height: 48px !important;
    }

    #state-detail-panel .rule-callout {
        padding: 16px 18px !important;
    }
}

/* ==========================================================================
   ADDITIONAL POLISH - Sticky Header, Subline, Recipient List
   ========================================================================== */

/* Sticky State Panel Header on Scroll */
#state-detail-panel .state-panel-sticky-nav {
    position: sticky !important;
    top: 64px !important;
    z-index: 50 !important;
    background: #fff !important;
    border-bottom: 1px solid var(--hub-border) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    display: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 20px !important;
    gap: 12px !important;
}

#state-detail-panel .state-panel-sticky-nav.is-visible {
    display: flex !important;
}

#state-detail-panel .state-panel-sticky-nav__state {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--hub-text) !important;
}

#state-detail-panel .state-panel-sticky-nav__tabs {
    display: flex !important;
    gap: 4px !important;
}

#state-detail-panel .state-panel-sticky-nav__tab {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--hub-muted) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

#state-detail-panel .state-panel-sticky-nav__tab:hover {
    background: #F1F5F9 !important;
    color: var(--hub-text) !important;
}

#state-detail-panel .state-panel-sticky-nav__tab--active {
    background: rgba(5,150,105,0.1) !important;
    color: var(--hub-green) !important;
}

#state-detail-panel .state-panel-sticky-nav .gov-btn-sm {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
}

/* Subline under section headings - SAME SIZE AS BODY */
#state-detail-panel .rule-section__subline {
    font-size: 15px !important;
    color: #64748B !important;
    margin: -4px 0 12px 0 !important;
    font-style: italic !important;
    line-height: 1.5 !important;
}

/* Recipient checklist styling - CARD-FRIENDLY */
#state-detail-panel .rule-checklist--recipient {
    margin: 0 !important;
    padding: 0 !important;
}

#state-detail-panel .rule-checklist--recipient li {
    padding: 10px 0 10px 28px !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

#state-detail-panel .rule-checklist--recipient li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

#state-detail-panel .rule-checklist--recipient li::before {
    content: '→' !important;
    color: var(--hub-green) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    left: 4px !important;
    top: 12px !important;
}

#state-detail-panel .rule-checklist--recipient li strong {
    color: #1E293B !important;
    font-weight: 600 !important;
    display: inline !important;
    margin-bottom: 0 !important;
}

/* Federal Deadline Grid styling - PURPLE THEME */
#state-detail-panel .deadline-grid--federal {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%) !important;
    border-color: #A78BFA !important;
    box-shadow: 0 4px 12px rgba(91,33,182,0.08) !important;
}

#state-detail-panel .deadline-grid__notes--federal {
    border-color: #A78BFA !important;
}

#state-detail-panel .deadline-grid--federal .deadline-notes__heading {
    color: #4C1D95 !important;
    border-bottom-color: #A78BFA !important;
}

#state-detail-panel .deadline-grid--federal .deadline-notes__list li {
    color: #5B21B6 !important;
    border-bottom-color: rgba(167,139,250,0.3) !important;
}

#state-detail-panel .deadline-grid--federal .deadline-notes__list li::before {
    color: #7C3AED !important;
}

/* Better tooltip styling - DARK THEME */
#state-detail-panel .rule-tooltip {
    position: relative !important;
}

#state-detail-panel .rule-tooltip::after {
    content: attr(title) !important;
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #1E293B !important;
    color: #F8FAFC !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 450 !important;
    font-style: normal !important;
    white-space: normal !important;
    width: 280px !important;
    max-width: 90vw !important;
    text-align: left !important;
    line-height: 1.5 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.15s ease !important;
    z-index: 100 !important;
    pointer-events: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}

#state-detail-panel .rule-tooltip:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Improve tab active state visibility - BOLDER */
#state-detail-panel .state-tab--active {
    color: var(--hub-green) !important;
    font-weight: 700 !important;
    background: rgba(5,150,105,0.04) !important;
}

@media (max-width: 768px) {
    #state-detail-panel .state-panel-sticky-nav {
        top: 56px !important;
        padding: 8px 12px !important;
    }

    #state-detail-panel .state-panel-sticky-nav__state {
        font-size: 14px !important;
    }

    #state-detail-panel .state-panel-sticky-nav__tabs {
        display: none !important;
    }
}