/* ACS Surgery Workforce Map — Styles */
/* All classes prefixed with acs- to avoid conflicts */

/* ===== Reset & Container ===== */
#acs-surgery-map {
    position: relative;
    /* Establish a stacking context so the map's internal z-indexed chrome (draft
       banner z-20, cobrand header z-18, etc.) stays contained inside the embed.
       Without this, those absolutely-positioned elements escape into the host
       page's root stacking context and can render OVER a host sticky header
       (e.g. the ACS site header at z-index 2), causing visual overlap on scroll. */
    isolation: isolate;
    z-index: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    /* Isolate inheritable typography from the host page when embedded. Without
       these, a host's global line-height/letter-spacing/etc. bleed into the
       legend and summary, inflating their spacing (and, via html2canvas, the
       PNG export panel). These values match the standalone defaults, so the
       standalone look is unchanged. */
    line-height: normal;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-align: left;
    text-indent: 0;
    white-space: normal;
}
#acs-surgery-map *, #acs-surgery-map *::before, #acs-surgery-map *::after {
    box-sizing: border-box;
}

/* ===== Draft Banner ===== */
.acs-draft-banner {
    position: absolute; top: 0; left: 0; right: 0; z-index: 20;
    background: #ea580c; color: #fff; text-align: center;
    font-size: 13px; font-weight: 700; padding: 7px 8px;
    letter-spacing: 0.5px; text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* ===== Co-branding header strip (always visible) =====
   Sits below the draft banner (if any) and above the sidebar+map. The
   `top` offset is set dynamically in JS so the banner and header stack
   correctly. Height varies by breakpoint; JS measures offsetHeight and
   pads the layout accordingly. */
.acs-cobrand-header {
    position: absolute;
    top: 0;            /* set by JS based on draft banner height */
    left: 0;
    right: 0;
    z-index: 18;
    height: 80px;
    background: #fff;
    border-bottom: 1px solid #d9d9e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    gap: 24px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.acs-cobrand-link {
    display: inline-flex;
    align-items: center;
    height: 100%;
    line-height: 0;
    text-decoration: none;
    border-radius: 4px;
    flex-shrink: 0;
}
.acs-cobrand-link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.acs-cobrand-logo {
    max-height: 60px;
    width: auto;
    display: block;
}
.acs-cobrand-logo-acs {
    max-height: 60px;
}
.acs-cobrand-logo-sheps {
    max-height: 60px;
}
.acs-cobrand-tagline {
    flex: 1 1 auto;
    text-align: center;
    font-size: 12px;
    color: #444;
    line-height: 1.3;
    padding: 0 12px;
}
@media (max-width: 900px) {
    .acs-cobrand-tagline {
        display: none; /* logos carry the message on narrow screens */
    }
}
@media (max-width: 768px) {
    .acs-cobrand-header {
        height: 56px;
        padding: 6px 12px;
        gap: 12px;
    }
    .acs-cobrand-logo,
    .acs-cobrand-logo-acs,
    .acs-cobrand-logo-sheps {
        max-height: 40px;
    }
}

/* ===== Layout ===== */
.acs-layout {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
}
/* Draft padding-top is set dynamically in JS based on banner height */

/* ===== Sidebar ===== */
.acs-sidebar {
    width: 280px;
    min-width: 280px;
    background: #fff;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 2;
}
.acs-sidebar-section {
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}
.acs-sidebar-section h3 {
    font-size: 11px;
    text-transform: uppercase;
    color: #666;
    margin: 0 0 6px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Static heading shown when an embed is locked to a single specialty.
   Replaces the dropdown; sized to read like a section title, not body text. */
.acs-specialty-heading {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: #111;
    line-height: 1.25;
}

/* ===== Dropdowns ===== */
.acs-select {
    width: 100%;
    padding: 6px 28px 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    color: #333;
    /* Own the control rendering completely. The facs.org host theme sets
       select { appearance: none } (removing the native arrow and leaving
       painting at the mercy of host styles — the intermittent "zigzag" paint
       artifact). Setting appearance:none ourselves and drawing our own chevron
       makes rendering deterministic in any host page. */
    -webkit-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
    background-size: 12px 8px;
    outline: none;
    cursor: pointer;
    min-height: 32px;
}
.acs-select:focus-visible {
    border-color: #2563eb;
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ===== Taxonomy Codes ===== */
.acs-taxonomy-details {
    margin-top: 6px;
}
.acs-taxonomy-details summary {
    font-size: 11px;
    color: #555;
    cursor: pointer;
    user-select: none;
}
.acs-taxonomy-details summary:hover {
    color: #333;
}
.acs-taxonomy-list {
    margin-top: 4px;
    font-size: 11px;
    color: #555;
    line-height: 1.6;
}
.acs-taxonomy-list .acs-tax-code {
    font-family: 'Consolas', 'Monaco', monospace;
}

/* ===== Geography Toggle ===== */
.acs-geo-toggle {
    display: flex;
    gap: 4px;
}
.acs-geo-btn {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    text-align: center;
    transition: all 0.15s;
    min-height: 32px;
}
.acs-geo-btn.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.acs-geo-btn:hover:not(.active) {
    background: #f0f4ff;
}
.acs-geo-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ===== Facility Overlay Checkboxes ===== */
.acs-overlay-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.acs-overlay-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    min-height: 28px;
}
.acs-overlay-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
}
.acs-overlay-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.15);
}
.acs-overlay-swatch-hospital {
    background: #dc2626;
    border-radius: 1px;
}
.acs-overlay-swatch-asc {
    background: #16a34a;
    border-radius: 50%;
}

/* Surgical-flag sub-filters (shown only when the parent overlay is on) */
.acs-overlay-sub {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 4px 24px;
    padding-left: 8px;
    border-left: 2px solid #e2e8f0;
}
.acs-overlay-sub.visible {
    display: flex;
}
.acs-overlay-sub-header {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    margin-bottom: 2px;
}
.acs-overlay-sub-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #444;
    cursor: pointer;
    user-select: none;
    min-height: 22px;
}
.acs-overlay-sub-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ===== Reference Layers ===== */
.acs-ref-label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    min-height: 28px;
}
.acs-ref-label input[type="checkbox"] {
    margin: 2px 0 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
}
.acs-ref-sub {
    display: block;
    font-size: 10px;
    color: #888;
}

/* ===== Summary Statistics ===== */
/* Unified type system (mirrors the PNG export): two colors only — Navy for the
   title/section headings, Ink (#333) for everything else. Hierarchy comes from
   size (12 body / 11 caption) and weight (400/700), not extra colors or italics. */
.acs-summary-header {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    margin-bottom: 1px;
}
.acs-summary-scope {
    font-size: 12px;
    color: #333;
    margin-bottom: 8px;
}
.acs-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    line-height: 1.7;
}
.acs-summary-label {
    color: #333;
    white-space: nowrap;
}
.acs-summary-value {
    font-weight: 700;
    color: #333;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ===== Legend ===== */
.acs-legend-subtitle {
    font-size: 11px;
    color: #333;
    margin-bottom: 4px;
    font-weight: 400;
}
.acs-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0;
}
.acs-legend-swatch {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.12);
}
.acs-legend-label {
    font-size: 12px;
    color: #333;
    /* Roomier line box so descenders (g, y) aren't clipped when the legend is
       rasterized via html2canvas for the PNG export. */
    line-height: 1.4;
}
.acs-legend-note {
    font-size: 11px;
    color: #333;
    margin-top: 4px;
}
.acs-legend-overlay-title {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    margin-top: 8px;
    margin-bottom: 2px;
}
.acs-legend-overlay-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0;
}
.acs-legend-overlay-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.15);
}
/* Hospitals render as squares on the map; match that in the legend. */
.acs-legend-overlay-dot.is-square {
    border-radius: 1px;
}
/* Active surgery-type filter for an overlay, shown under its legend row.
   Indented to align with the label text (8px dot + 6px gap). */
.acs-legend-overlay-filter {
    margin: 0 0 2px 14px;
    font-size: 11px;
    color: #333;
    /* Extra line box + bottom padding so the last row's descenders (g, y)
       aren't clipped in the html2canvas raster used for the PNG export. */
    line-height: 1.4;
    padding-bottom: 1px;
}

/* ===== About & How to Use ===== */
.acs-sidebar-section details summary {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}
.acs-about-content {
    font-size: 11px;
    color: #555;
    line-height: 1.6;
    padding: 6px 0;
}
.acs-about-content h4 {
    font-size: 11px;
    color: #333;
    margin: 8px 0 4px;
    font-weight: 600;
}
.acs-about-content ul {
    margin: 0;
    padding-left: 16px;
}
.acs-about-content li {
    margin-bottom: 3px;
}
.acs-help-list {
    margin: 0;
    padding-left: 18px;
    font-size: 11px;
    color: #555;
    line-height: 1.7;
}
.acs-help-list b {
    color: #333;
}

/* ===== Map Container ===== */
.acs-map-container {
    flex: 1;
    position: relative;
    min-width: 0;
}
.acs-map-container .maplibregl-map {
    width: 100%;
    height: 100%;
}

/* ===== Tooltip ===== */
.acs-tooltip {
    position: absolute;
    display: none;
    pointer-events: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    max-width: 280px;
    z-index: 10;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.acs-tooltip .tt-title {
    font-weight: 700;
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
}
.acs-tooltip .tt-field {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.acs-tooltip .tt-label {
    color: #555;
    white-space: nowrap;
}
.acs-tooltip .tt-value {
    font-weight: 600;
    color: #333;
    text-align: right;
}
.acs-tooltip .tt-cd {
    margin-top: 6px;
    font-size: 11px;
    color: #666;
    font-style: italic;
    border-top: 1px solid #eee;
    padding-top: 4px;
}

/* ===== Loading Overlay ===== */
.acs-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.acs-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: acs-spin 0.8s linear infinite;
}
@keyframes acs-spin {
    to { transform: rotate(360deg); }
}
.acs-loading-text {
    margin-top: 12px;
    font-size: 14px;
    color: #666;
}

/* ===== Error Banner ===== */
.acs-error-banner {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 10px 40px 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 50;
    display: none;
    max-width: 90%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.acs-error-banner.visible {
    display: block;
}
.acs-error-dismiss {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #991b1b;
    padding: 4px;
}

/* ===== Accessibility ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.acs-skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1000;
    width: auto;
    height: auto;
    padding: 8px 16px;
    background: #fff;
    border: 2px solid #2563eb;
    clip: auto;
    overflow: visible;
    white-space: normal;
    font-size: 14px;
    color: #2563eb;
    text-decoration: none;
    border-radius: 4px;
}
*:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ===== Mobile ===== */
.acs-mobile-header {
    display: none;
    height: 44px;
    min-height: 44px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    align-items: center;
    padding: 0 12px;
    z-index: 15;
    position: relative;
}
.acs-mobile-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-left: 8px;
}
.acs-hamburger {
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.acs-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #333;
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}
.acs-hamburger.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.acs-hamburger.open span:nth-child(2) {
    opacity: 0;
}
.acs-hamburger.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 767px) {
    .acs-mobile-header { display: flex; }
    .acs-layout {
        flex-direction: column;
    }
    .acs-sidebar {
        position: absolute;
        top: 44px; /* overridden by JS to account for draft banner */
        bottom: 0;
        left: -100%;
        width: min(85vw, 320px);
        min-width: 0;
        transition: left 0.25s ease;
        z-index: 10;
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .acs-sidebar.open { left: 0; }
    .acs-map-container {
        flex: 1;
        position: relative;
    }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .acs-spinner { animation: none; }
    .acs-sidebar { transition: none; }
}

/* ===== Export PNG Button ===== */
.acs-export-btn {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #1A3875;
    border-radius: 4px;
    background: #1A3875;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    font-weight: 600;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
    min-height: 36px;
}
.acs-export-btn:hover:not(:disabled) {
    background: #122a5a;
    border-color: #122a5a;
}
.acs-export-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.acs-export-btn:disabled {
    background: #94a3b8;
    border-color: #94a3b8;
    cursor: not-allowed;
}
.acs-export-btn.is-exporting {
    background: #475569;
    border-color: #475569;
}
.acs-export-btn.is-success {
    background: #047857;
    border-color: #047857;
}

/* ===== Accessible Data Table ===== */
.acs-table-toggle-btn {
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid #1A3875;
    border-radius: 4px;
    background: #fff;
    color: #1A3875;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    font-weight: 600;
    text-align: center;
    transition: background 0.15s, color 0.15s;
    min-height: 36px;
}
.acs-table-toggle-btn:hover {
    background: #eef2fa;
}
.acs-table-toggle-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.acs-data-table-panel {
    padding: 16px 20px 24px;
    border-top: 2px solid #1A3875;
    background: #fff;
}
.acs-table-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
}
.acs-table-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.acs-table-filter {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    min-width: 220px;
}
.acs-table-filter:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}
.acs-table-rowcount {
    font-size: 12px;
    color: #64748b;
    margin-left: auto;
}
.acs-table-scroll {
    max-height: 50vh;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}
.acs-table-scroll:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.acs-data-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}
.acs-data-table caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    color: #1A3875;
    padding: 4px 8px 10px;
}
.acs-data-table caption:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.acs-data-table thead th {
    position: sticky;
    top: 0;
    background: #f1f5f9;
    z-index: 1;
    border-bottom: 2px solid #cbd5e1;
    padding: 0;
    text-align: left;
}
.acs-data-table thead th.acs-th-numeric { text-align: right; }
.acs-th-sort {
    width: 100%;
    display: block;
    padding: 8px 10px;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    text-align: inherit;
}
.acs-th-sort:hover { background: #e2e8f0; }
.acs-th-sort:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}
.acs-th-arrow { margin-left: 4px; font-size: 11px; color: #64748b; }
.acs-data-table thead th[aria-sort="ascending"] .acs-th-arrow::after { content: "\2191"; }
.acs-data-table thead th[aria-sort="descending"] .acs-th-arrow::after { content: "\2193"; }
.acs-data-table tbody th,
.acs-data-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #eef2f7;
    font-weight: 400;
}
.acs-data-table tbody th {
    text-align: left;
    font-weight: 500;
    color: #1e293b;
}
.acs-data-table td.acs-td-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.acs-data-table tbody tr:hover { background: #f8fafc; }
.acs-table-empty {
    text-align: center;
    color: #64748b;
    padding: 16px;
}