/* Alternate Viewer — Dashboard layout */

/* Full-viewport container */
.av-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    overflow: hidden;
}

.av-placeholder-label {
    font-size: 12px;
    color: var(--theme-text-light);
    font-style: italic;
}

/* ── Boundary bar (sibling of .av-map-panel inside .av-map-column) ──
   Mirrors .av-panel-header so the viewer reads as three coordinated
   panels: this bar above the map, the summary header above the table,
   and the chart header above the charts. */
.av-boundary-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--theme-gradient-header);
    color: white;
    flex-shrink: 0;
    min-height: 44px;
    position: relative;
    z-index: 50;
}

/* Type-picker dropdown is anchored to the left edge of its toggle (not the
   right, which is the chart-header default) since the dropdown sits at the
   start of the boundary bar. */
.av-boundary-bar .av-layer-menu {
    right: auto;
    left: 0;
}

/* Single-display carousel: only one selector is in the track at a time.
   The track sizes to its content so the feature dropdown stays compact. */
.av-selector-viewport {
    flex: 0 1 auto;
    min-width: 0;
}

.av-selector-track {
    display: flex;
    min-width: 0;
}

/* Carousel arrows — paired before the type dropdown, same chip vocabulary
   as .av-chart-nav-prev/next but sized to 24px so every chip in this bar
   (arrows, type dropdown, feature dropdown) shares one height and the bar
   stays at its 44px min-height after the carousel un-hides post-VS init. */
.av-boundary-nav-prev,
.av-boundary-nav-next {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.av-boundary-nav-prev:hover:not(:disabled),
.av-boundary-nav-next:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
}

.av-boundary-nav-prev:disabled,
.av-boundary-nav-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Boundary feature dropdowns (Virtual Select) ──
   Sized to content with sensible min/max so the bar stays compact. The visible
   selector is whichever index the carousel is on; non-active selectors are
   display:none'd by BoundarySelectorManager. */
.av-boundary-selector {
    flex: 0 1 auto;
    width: auto;
    min-width: 140px;
    max-width: 320px;
    /* Flex wrapper kills the line-box that the inline-block .vscomp-ele
       would otherwise sit in — that line box adds descender space and
       grew the bar a few pixels past its 44px min-height post-VS init. */
    display: flex;
    align-items: center;
}

/* Re-skinned toggle: mirrors the chart-header layer chip (white text on
   translucent background) so the type dropdown and feature dropdown read
   as the same family. */
.av-boundary-bar .av-boundary-selector .vscomp-toggle-button {
    height: 24px;
    min-height: 24px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.av-boundary-bar .av-boundary-selector .vscomp-toggle-button:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
}

/* Selected/placeholder text — truncate long values with an ellipsis. */
.av-boundary-bar .vscomp-value {
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The arrow icon is rendered as a pseudo-glyph background on Virtual
   Select — tint it white to match the new chip palette. */
.av-boundary-bar .vscomp-arrow {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* ── Cropped badge ── */
.av-cropped-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

.av-cropped-label {
    font-size: 11px;
    font-weight: normal;
    font-style: italic;
    color: #fbbf24;
}

.av-cropped-badge .av-info-icon {
    font-size: 13px;
    color: #fbbf24;
    cursor: help;
}

/* ── Export dropdown ── */
.av-export-dropdown {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}

.av-export-toggle {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s;
}
.av-export-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
}

.av-export-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 100;
    min-width: 150px;
}
.av-export-menu.open { display: block; }

/* ── "Add to Report" toggle ──
   Sits to the left of the Export dropdown inside .av-panel-actions. Visual
   rhythm matches .av-export-toggle so the two buttons read as a pair; the
   is-added state swaps to a solid teal pill so the user can see at a glance
   which figures are queued for the next report. */
.av-add-to-report-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.av-add-to-report-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
}
.av-add-to-report-toggle.is-added {
    background: #2f8f8a;
    border-color: #2f8f8a;
    color: #fff;
}
.av-add-to-report-toggle.is-added:hover {
    background: #267572;
    border-color: #267572;
}
.av-add-to-report-toggle .av-atr-icon {
    font-weight: 700;
    line-height: 1;
}

.av-export-option {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 8px 14px;
    font-size: 12px;
    color: #333;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}
.av-export-option:hover {
    background: #f0f4f8;
}
.av-export-option + .av-export-option {
    border-top: 1px solid #eee;
}

/* Ensure Virtual Select dropdown overlay draws above map widgets and panels */
.vscomp-dropbox-container { z-index: 10000 !important; }

/* ── Open-menu sizing ──
   The chip stays at its natural compact width, but when the user opens it the
   menu expands to fit its widest option so full boundary names are readable
   (e.g. "Great Divide-Upper Green" in HUC 4). VS writes the menu width inline
   on .vscomp-dropbox-container from its dropboxWidth option; we pass
   'max-content' from BoundarySelectorManager, then clamp the result here so
   short-label types still get a usable baseline and very long names don't
   push the menu off-screen. */
.vscomp-dropbox-container {
    min-width: 200px;
    max-width: 80vw;
}

/* Drop the per-option ellipsis so the full label actually renders. VS keeps
   white-space: nowrap, so each option stays a single line and drives the
   container's max-content width above. */
.vscomp-dropbox-container .vscomp-option-text {
    overflow: visible;
    text-overflow: clip;
}

/* ── Main split: map left, figures right ── */
.av-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Map column — flex column wrapper around the boundary bar + map panel.
   Keeps .av-map-panel as the "just the map + overlays" positioning context
   so .av-toolbar-icons / .av-flyout / .av-hover-label stay 15px from the
   top of the map, not 15px from the top of the column. */
.av-map-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* Map panel — original form (no flex column). */
.av-map-panel {
    flex: 1;
    position: relative;
    min-width: 0;
    min-height: 0;
}

.av-map {
    width: 100%;
    height: 100%;
}

.av-hover-label {
    position: absolute;
    top: 15px;
    right: var(--av-hover-label-right, 15px);
    z-index: 5;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(14, 116, 144, 0.35);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    max-width: 320px;
    transition: right 0.2s ease;
}

/* Figures panel */
.av-figures-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-left: 2px solid var(--theme-border-dark);
    background: var(--theme-background);
    overflow: hidden;
}

/* Summary table section — constrained height, scrolls internally */
.av-summary {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    max-height: 35vh;
    min-height: 0;
    border-bottom: 1px solid var(--theme-border);
    overflow: hidden;
}

.av-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    color: white;
    background: var(--theme-gradient-header);
    flex-shrink: 0;
    min-height: 44px;
}

.av-panel-header-text {
    flex: 1;
    min-width: 0;
}

/* Chart-face left cluster: prev/next arrows + dropdown-as-title + trailing
   "— {shape label}". Wraps so the shape-label tail drops to a second line
   when the header gets narrow — keeps the full shape name (and acres /
   cropped badge) readable instead of ellipsizing it behind the right-side
   actions. The actions cluster stays vertically centered when the cluster
   grows to two lines. */
.av-panel-title-cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: 6px;
    flex: 1;
    min-width: 0;
}

.av-panel-title-tail {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.av-panel-title-label {
    font-weight: 700;
}

.av-panel-area {
    font-weight: 400;
    color: var(--theme-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.av-panel-header .av-panel-area {
    color: rgba(255, 255, 255, 0.78);
}

.av-panel-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.av-summary .av-panel-body {
    padding: 0;
}

/* Tabbed charts section */
.av-charts {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Legacy .av-tabs-bar / .av-tab-arrow / .av-tabs-viewport / .av-tabs /
   .av-tab styles removed — the tab strip has been replaced by a layer
   dropdown + prev/next arrows inside the chart panel-header. See
   StatsManager.renderChartHeader. */

/* Tab content area — scrollable so charts keep a readable height */
.av-tab-content {
    flex: 1;
    padding: 12px;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Placeholder text for empty states */
.av-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--theme-text-light);
    font-size: 14px;
    font-style: italic;
    min-height: 80px;
    text-align: center;
    padding: 16px;
}

/* Tour deep-link rendered below the empty-state copy — drops the italic so
   the call-to-action reads as actionable rather than another hint line. */
.av-placeholder-tour-link {
    color: var(--theme-secondary, #0e7490);
    text-decoration: underline;
    font-style: normal;
    font-weight: 600;
    cursor: pointer;
}
.av-placeholder-tour-link:hover,
.av-placeholder-tour-link:focus-visible {
    color: var(--theme-secondary-dark, #075568);
    outline: none;
}

/* ── Vertical Icon Toolbar (right edge of map) ── */
.av-toolbar-icons {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow: hidden;
    transition: opacity 0.2s;
}

/* Collapse button arrow direction per toolbar state */
.av-toolbar-collapse-btn svg {
    transition: transform 0.2s ease;
}

.av-toolbar-icons.icons-only .av-toolbar-collapse-btn svg {
    transform: rotate(-90deg);
}

.av-toolbar-icons.collapsed .av-toolbar-collapse-btn svg {
    transform: rotate(90deg);
}

/* Icons-only state: hide text labels, keep icons */
.av-toolbar-icons.icons-only .av-toolbar-icon-label {
    display: none;
}

.av-toolbar-icons.icons-only .av-toolbar-icon-btn {
    justify-content: center;
    padding: 10px;
}

/* Collapsed state: hide all buttons except the collapse/expand toggle */
.av-toolbar-icons.collapsed .av-toolbar-icon-btn:not(.av-toolbar-collapse-btn) {
    display: none;
}

.av-toolbar-icons.collapsed .av-toolbar-collapse-btn .av-toolbar-icon-label {
    display: none;
}

.av-toolbar-icons.collapsed .av-toolbar-collapse-btn {
    justify-content: center;
    padding: 10px;
}

.av-toolbar-icon-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--theme-dark);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    border-bottom: 1px solid var(--theme-border);
}

.av-toolbar-icon-btn:last-child {
    border-bottom: none;
}

/* ── Short-viewport compaction ─────────────────────────────────────
   The icon toolbar is ~9 buttons tall and at default rhythm (~38 px
   per button) it overflows the map panel on laptops with usable
   viewport heights around 600–650 px (1366×768 with browser chrome).
   These media rules tighten the toolbar so it stays inside the map
   panel without auto-collapsing (which would surprise the user). */
@media (max-height: 720px) {
    .av-toolbar-icon-btn {
        padding: 4px 12px;
        gap: 6px;
        font-size: 11px;
    }
    .av-toolbar-icon-btn svg {
        width: 16px;
        height: 16px;
    }
    /* Keep the icons-only / collapsed user-toggle paddings in sync so
       the toolbar stays compact whichever state the user picks. */
    .av-toolbar-icons.icons-only .av-toolbar-icon-btn,
    .av-toolbar-icons.collapsed .av-toolbar-collapse-btn {
        padding: 4px 8px;
    }
}

/* At very short heights, force icons-only behavior regardless of the
   user-toggle state — labels become cramped and the toolbar still
   needs to fit. The user can re-expand by widening the window. */
@media (max-height: 600px) {
    .av-toolbar-icons .av-toolbar-icon-label {
        display: none;
    }
    .av-toolbar-icons .av-toolbar-icon-btn {
        justify-content: center;
        padding: 4px 8px;
    }
}

.av-toolbar-icon-btn:hover {
    background: rgba(14, 116, 144, 0.06);
    color: var(--theme-secondary);
}

.av-toolbar-icon-btn.active {
    background: rgba(14, 116, 144, 0.1);
    color: var(--theme-secondary);
    font-weight: 600;
}

/* Inspect toggle — disabled while a sketch is in progress */
.av-toolbar-icon-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Map cursor turns to crosshair while inspect mode is live */
.av-inspect-cursor,
.av-inspect-cursor .esri-view-surface {
    cursor: crosshair !important;
}

.av-toolbar-icon-btn svg {
    flex-shrink: 0;
}

.av-toolbar-icon-label {
    font-size: 12px;
}

/* ── Flyout Panel (opens left of toolbar) ── */
.av-flyout {
    position: absolute;
    top: 15px;
    right: 160px; /* overridden by JS after toolbar renders */
    width: 300px;
    max-height: calc(100vh - 160px);
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    display: none;
    flex-direction: column;
    transition: right 0.2s ease;
    overflow: hidden;
}

.av-flyout.open {
    display: flex;
}

.av-flyout-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--theme-border);
    flex-shrink: 0;
}

.av-flyout-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--theme-dark);
    flex-shrink: 0;
}

/* Opacity + eye controls in flyout header */
.av-flyout-layer-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.av-flyout-eye-btn {
    background: none;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    cursor: pointer;
    padding: 3px 5px;
    line-height: 0;
    color: var(--theme-dark);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.av-flyout-eye-btn:hover {
    background: rgba(14, 116, 144, 0.08);
    color: var(--theme-secondary);
}

.av-flyout-eye-btn[data-visible="true"] .eye-closed,
.av-flyout-eye-btn[data-visible="false"] .eye-open {
    display: none;
}

.av-flyout-eye-btn[data-visible="false"] {
    color: var(--theme-text-muted);
    opacity: 0.6;
}

.av-flyout-opacity-slider {
    width: 80px;
    accent-color: var(--theme-secondary);
    flex-shrink: 0;
}

.av-flyout-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--theme-text-muted);
    padding: 0 2px;
    line-height: 1;
    transition: color 0.15s;
    flex-shrink: 0;
}

.av-flyout-close:hover {
    color: var(--theme-dark);
}

.av-flyout-body {
    padding: 10px 14px;
    overflow-y: auto;
    flex: 1;
}

/* Wyoming-extent disclaimer — hidden by default, shown only on the
   three layer-control flyouts (Layers / Boundaries / Protected) via
   the data-active-panel attribute set by openFlyout. */
.av-flyout-disclaimer {
    display: none;
    font-size: 11px;
    font-style: italic;
    color: var(--theme-text-muted);
    padding: 6px 10px;
    margin-bottom: 8px;
    background: rgba(14, 116, 144, 0.05);
    border-left: 3px solid var(--theme-secondary);
    border-radius: 2px;
    line-height: 1.4;
}

.av-flyout[data-active-panel="layers"] .av-flyout-disclaimer,
.av-flyout[data-active-panel="boundaries"] .av-flyout-disclaimer,
.av-flyout[data-active-panel="protected"] .av-flyout-disclaimer {
    display: block;
}

/* Legend panel: tighten body padding so the compact legend isn't swimming
   in whitespace. The flyout header shows the active layer name. */
.av-flyout[data-active-panel="legend"] .av-flyout-body {
    padding: 4px 8px 10px;
}
/* Legend content is narrow (thermometer or tight category list) — shrink
   the whole flyout so it hugs its content instead of leaving side gutters. */
.av-flyout[data-active-panel="legend"] {
    width: auto;
    min-width: 180px;
    max-width: 280px;
}

/* Layer list (radios + checkboxes) */
.av-cp-group-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-muted, #64748b);
    padding: 2px 6px;
    margin-top: 2px;
}

.av-cp-group-divider {
    border: none;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    margin: 6px 0 2px;
}

.av-cp-layer-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.av-cp-layer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--theme-dark);
    transition: background 0.1s;
}

.av-cp-layer-item:hover {
    background: rgba(14, 116, 144, 0.06);
}

.av-cp-layer-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    cursor: pointer;
    margin: 0;
    min-width: 0;
}

.av-cp-layer-item input[type="radio"],
.av-cp-layer-item input[type="checkbox"] {
    accent-color: var(--theme-secondary);
    margin: 0;
    flex-shrink: 0;
}

/* Legend inside control panel */
.av-cp-legend {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.av-cp-legend-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    width: 100%;
}

.av-cp-legend-header small {
    color: var(--theme-text-muted);
    font-size: 10px;
    flex: 1;
    min-width: 0;
}

.av-cp-legend .legend-gradient {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
}

.av-cp-legend .legend-gradient:not(.classified-legend) {
    align-items: center;
}

.av-cp-legend .thermometer {
    width: 18px;
    height: 100px;
    border-radius: 9px;
    border: 2px solid var(--theme-dark);
}

.av-cp-legend .max-value,
.av-cp-legend .min-value {
    font-size: 9px;
    font-weight: 600;
    color: var(--theme-dark);
}

/* Classified legend (class-breaks / colormap layers) */
.legend-gradient.classified-legend {
    background: none !important;
    height: auto !important;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 5px;
    display: block;
}

.legend-categories {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.legend-category-item {
    display: flex;
    align-items: flex-start;
    font-size: 11px;
    color: #333;
    padding: 2px 0;
}

.legend-color-box {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-right: 6px;
    border: 1px solid rgba(0,0,0,0.2);
    flex-shrink: 0;
    margin-top: 1px;
}

.legend-category-label {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.legend-range-label {
    font-size: 9px;
    color: #888;
    margin-top: 1px;
}

.legend-gradient.classified-legend::-webkit-scrollbar {
    width: 5px;
}

.legend-gradient.classified-legend::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.legend-gradient.classified-legend::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.legend-gradient.classified-legend::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

/* Placeholder text inside sections */
.av-cp-placeholder {
    font-size: 12px;
    color: var(--theme-text-light);
    font-style: italic;
    padding: 8px 0;
    text-align: center;
}

/* ── Drawing Tools flyout panel ── */
.av-cp-drawing {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.av-cp-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.av-cp-button-row {
    flex-direction: row;
    gap: 8px;
}

.av-cp-button-row .av-cp-btn {
    flex: 1;
}

.av-cp-btn {
    padding: 6px 10px;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: white;
    color: var(--theme-dark);
    transition: background 0.15s, color 0.15s;
}

.av-cp-btn:hover {
    background: rgba(14, 116, 144, 0.06);
    color: var(--theme-secondary);
}

.av-cp-btn-primary {
    background: var(--theme-secondary);
    color: white;
    border-color: var(--theme-secondary);
}

.av-cp-btn-primary:hover {
    background: var(--theme-dark);
    border-color: var(--theme-dark);
    color: white;
}

/* Disabled state — `disabled` attribute alone has no visual effect on
   custom-styled buttons. These rules win regardless of which variant
   (primary, is-active) the button also carries. */
.av-cp-btn:disabled,
.av-cp-btn:disabled:hover {
    background: var(--theme-border, #d1d5db);
    border-color: var(--theme-border, #d1d5db);
    color: var(--theme-text-muted, #6b7280);
    cursor: not-allowed;
    opacity: 0.75;
    box-shadow: none;
}

.av-cp-btn-primary:disabled,
.av-cp-btn-primary:disabled:hover {
    background: var(--theme-border, #d1d5db);
    border-color: var(--theme-border, #d1d5db);
    color: white;
}

.av-cp-btn.active-drawing {
    background: #b91c1c;
    border-color: #b91c1c;
    color: white;
}

.av-cp-btn.active-drawing:hover {
    background: #991b1b;
    border-color: #991b1b;
    color: white;
}

/* Compare button — pressed-in state while a comparison is on screen */
.av-cp-btn.is-active {
    background: var(--theme-dark);
    border-color: var(--theme-dark);
    color: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.av-cp-btn.is-active:hover {
    background: var(--theme-dark);
    border-color: var(--theme-dark);
    color: white;
}

/* Draw shape dropdown */
.draw-shape-dropdown {
    position: relative;
}

.draw-shape-btn {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.draw-shape-chevron {
    font-size: 10px;
    transition: transform 0.2s;
}

.draw-shape-dropdown.open .draw-shape-chevron {
    transform: rotate(180deg);
}

.draw-shape-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    overflow: hidden;
}

.draw-shape-menu[hidden] {
    display: none;
}

.draw-shape-option {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 12px;
    color: var(--theme-dark);
    cursor: pointer;
    transition: background 0.15s;
}

.draw-shape-option:hover {
    background: rgba(14, 116, 144, 0.08);
    color: var(--theme-secondary);
}

/* Buffer slider */
.av-cp-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-dark);
}

.av-cp-slider-value {
    font-weight: 500;
    color: var(--theme-text-muted);
}

.av-cp-slider {
    width: 100%;
    accent-color: var(--theme-secondary);
}

/* ── Compare flyout panel ── */
.av-cp-compare-current {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: var(--theme-dark);
}

.av-cp-compare-current-label {
    color: var(--theme-text-muted);
    flex-shrink: 0;
}

.av-cp-compare-current-value {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.av-cp-compare-add {
    width: 100%;
}

.av-cp-compare-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.av-cp-compare-slots {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.av-cp-compare-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: white;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    font-size: 12px;
    color: var(--theme-dark);
}

.av-cp-compare-slot-label {
    color: var(--theme-text-muted);
    font-weight: 600;
    flex-shrink: 0;
}

.av-cp-compare-slot-value {
    flex: 1;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.av-cp-compare-slot--empty .av-cp-compare-slot-value {
    font-weight: 400;
    color: var(--theme-text-muted);
    font-style: italic;
}

.av-cp-compare-slot-clear {
    background: none;
    border: none;
    color: var(--theme-text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.av-cp-compare-slot-clear:hover {
    color: #b91c1c;
}

/* Filled slot rows are clickable — clicking jumps the map to that shape.
   A second click on the active row (when both slots are filled and a
   comparison is being viewed) returns to the union view. */
.av-cp-compare-slot:not(.av-cp-compare-slot--empty) {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

/* Per-slot hover tint — pairs with the heavy compare-overlay map preview
   so row hover, persistent map outline, active row, and full compare
   overlay all read as one teal/amber visual language. Scoped to
   :not(.is-active) so the more-saturated active tint wins when both
   apply. */
#avCompareSlot0:not(.av-cp-compare-slot--empty):not(.is-active):hover {
    background: rgba(14, 116, 144, 0.06);
    border-color: rgba(14, 116, 144, 0.4);
}

#avCompareSlot1:not(.av-cp-compare-slot--empty):not(.is-active):hover {
    background: rgba(180, 83, 9, 0.06);
    border-color: rgba(180, 83, 9, 0.4);
}

/* Active row tint matches the compare overlay palette (teal for slot 1,
   amber for slot 2) so the flyout selection visually links to the
   highlighted shape on the map. */
#avCompareSlot0.is-active {
    background: rgba(14, 116, 144, 0.12);
    border-color: rgba(14, 116, 144, 0.6);
}

#avCompareSlot1.is-active {
    background: rgba(180, 83, 9, 0.12);
    border-color: rgba(180, 83, 9, 0.6);
}

/* Report button — fills with progress during generation */
.av-cp-report-btn {
    position: relative;
    overflow: hidden;
    padding: 8px 12px;
    text-align: center;
}

.av-cp-report-progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: rgba(255, 255, 255, 0.25);
    transition: width 0.3s ease;
    pointer-events: none;
}

.av-cp-report-text {
    position: relative;
    z-index: 1;
}

/* Animated spinner shown alongside the progress text while the report is
   generating. Sits to the left of the text and keeps moving regardless of
   which pipeline step is currently blocked — gives the user a heartbeat
   even when "Extracting pixel data" takes 20+ seconds. */
.av-cp-report-spinner {
    display: none;
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: middle;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: av-cp-report-spin 0.9s linear infinite;
}

.av-cp-report-btn:disabled .av-cp-report-spinner {
    display: inline-block;
}

@keyframes av-cp-report-spin {
    to { transform: rotate(360deg); }
}

/* Compare button spinner — same look as the report-button spinner, but
   gated by an explicit `.is-loading` class on the button rather than by
   the `:disabled` selector, because the Compare button is also disabled
   when slots aren't filled (a non-loading reason). Reuses the keyframes. */
.av-cp-compare-spinner {
    display: none;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: middle;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: av-cp-report-spin 0.9s linear infinite;
}

#avCompareGoBtn.is-loading .av-cp-compare-spinner {
    display: inline-block;
}

/* While loading, the `.av-cp-btn-primary:disabled` rule otherwise wins and
   the button background fades to pale gray with white text on top —
   exactly the contrast problem we fixed on the report button. Same fix
   here: keep the theme-secondary background, white text at full strength. */
#avCompareGoBtn.is-loading,
#avCompareGoBtn.is-loading:hover {
    background: var(--theme-secondary);
    border-color: var(--theme-secondary);
    color: #fff;
    opacity: 0.95;
    cursor: progress;
}

#avCompareGoBtn.is-loading .av-cp-compare-text {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* Override `.av-cp-btn-primary:disabled` which swaps the background to a
   pale gray — leaving the white progress text almost invisible. While the
   report is generating we keep the theme-secondary background and a
   readable white text color, only dimming slightly via opacity so the
   button still reads as "in progress" rather than fully active. */
.av-cp-report-btn:disabled,
.av-cp-report-btn:disabled:hover {
    background: var(--theme-secondary);
    border-color: var(--theme-secondary);
    color: #fff;
    opacity: 0.95;
    cursor: progress;
}

.av-cp-report-btn:disabled .av-cp-report-text {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* Drawing status + help */
.av-cp-drawing-status {
    font-size: 11px;
    color: var(--theme-text-muted);
    font-style: italic;
    text-align: center;
    padding: 4px;
}

.av-cp-help {
    font-size: 10px;
    color: var(--theme-text-muted);
    line-height: 1.4;
    padding: 6px 8px;
    background: rgba(14, 116, 144, 0.04);
    border-radius: 4px;
}

/* ── Summary Stats Table ── */
.av-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.av-stats-table {
    border-collapse: separate !important;
    border-spacing: 0;
}

.av-stats-table thead th,
.av-stats-table > thead > tr > th {
    position: sticky !important;
    top: 0;
    z-index: 5;
    background-color: #F8FAFC !important;
    background-clip: padding-box;
    box-shadow: inset 0 -2px 0 var(--theme-border);
}

.av-stats-table th {
    text-align: left;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: none;
}

.av-stats-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--theme-border);
    vertical-align: middle;
}

.av-stats-table tr:last-child td {
    border-bottom: none;
}

.av-stats-table tr:hover td {
    background: rgba(14, 116, 144, 0.04);
}

.av-layer-name {
    font-weight: 600;
    color: var(--theme-dark);
    white-space: nowrap;
}

.av-dominant-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-dark);
    background: var(--theme-bg, #f0f0f0);
    border: 1px solid #ccc;
}

.av-dominant-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #333;
    flex-shrink: 0;
}

.av-keystat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}

.av-keystat-label {
    display: inline-block;
    align-self: flex-start;
    position: relative;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(14, 116, 144, 0.12);
    font-size: 11px;
    font-weight: 500;
    color: var(--theme-secondary, #0E7490);
    cursor: help;
    transition: background-color 120ms ease, color 120ms ease;
}

.av-keystat-label:not(.av-keystat-label--static):hover {
    background: rgba(14, 116, 144, 0.20);
    color: var(--theme-primary, #0D5C6B);
}

.av-keystat-label--static {
    cursor: default;
}

.av-keystat-value {
    font-size: 13px;
    color: var(--theme-dark);
}

.av-legend-toggle {
    cursor: pointer;
    user-select: none;
}

.av-legend-arrow {
    font-size: 10px;
    color: var(--theme-text-muted, #94a3b8);
    margin-left: 4px;
    flex-shrink: 0;
}

.av-legend-collapsed {
    display: none !important;
}

.av-legend-divider {
    border: none;
    border-top: 2px solid var(--theme-text-muted, #94a3b8);
    margin: 10px 0 6px;
}

.av-boundary-legend-entry {
    margin-bottom: 8px;
    cursor: pointer;
    transition: opacity 120ms ease;
}

.av-boundary-legend-entry.av-legend-off {
    opacity: 0.4;
}

.av-cp-legend {
    cursor: pointer;
}

.av-cp-legend.av-legend-off {
    opacity: 0.4;
}

.av-flyout[data-active-panel="legend"] #avFlyoutTitle {
    cursor: pointer;
}

#avFlyoutTitle.av-legend-off {
    opacity: 0.5;
}

.av-boundary-legend-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--theme-dark);
    margin-bottom: 4px;
}

.av-boundary-legend-loading {
    font-size: 11px;
    color: var(--theme-text-muted, #94a3b8);
    font-style: italic;
}

.av-boundary-legend-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.av-boundary-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--theme-dark);
}

.av-boundary-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}

.av-boundary-legend-swatch.av-boundary-legend-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.av-state-outline-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 4px 2px;
    border-top: 1px solid var(--theme-border, #e0e0e0);
    cursor: pointer;
    user-select: none;
}

.av-state-outline-toggle:hover {
    opacity: 0.8;
}

.av-state-outline-toggle.av-state-outline-off {
    opacity: 0.4;
}

.av-state-outline-text {
    font-size: 12px;
    color: var(--theme-dark);
}

.av-state-outline-swatch {
    display: inline-block;
    width: 18px;
    height: 0;
    border-top: 2px dashed rgba(90, 90, 90, 0.7);
    flex-shrink: 0;
}

.av-no-data {
    color: var(--theme-text-muted, #94a3b8);
    font-style: italic;
    font-size: 12px;
}

/* Footnote under the Summary Statistics table — restates the same
   Wyoming-extent caveat so it's also visible alongside the numbers. */
.av-stats-footnote {
    font-size: 11px;
    font-style: italic;
    color: var(--theme-text-muted);
    padding: 8px 12px;
    border-top: 1px solid var(--theme-border);
    background: rgba(14, 116, 144, 0.03);
    line-height: 1.4;
}

/* ── Comparison table (right panel, after Compare button is pressed) ── */
.av-stats-compare-caption {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(14, 116, 144, 0.05);
    border-bottom: 1px solid var(--theme-border);
    font-size: 12px;
    color: var(--theme-dark);
}

.av-stats-compare-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
}

.av-stats-compare-tag > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.av-stats-compare-tag strong {
    color: var(--theme-text-muted);
    font-weight: 700;
    flex-shrink: 0;
}

.av-stats-compare-tag--1 strong { color: var(--theme-secondary); }
.av-stats-compare-tag--2 strong { color: #b45309; }

.av-stats-compare-delta {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.av-diff-pos { color: #15803d; font-weight: 600; }
.av-diff-neg { color: #b91c1c; font-weight: 600; }

/* ── Comparison charts (chart panel, when in compare mode) ── */

/* Caption strip when reused above charts (no header bar context, so add a
   subtle border to separate it from the chart content). */
.av-chart-compare-caption {
    margin: 6px 0 8px;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--theme-border);
    background: rgba(14, 116, 144, 0.04);
}

/* Paired stats grid above continuous (histogram) comparison */
.av-compare-stats-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 8px;
}

.av-compare-stats-grid th,
.av-compare-stats-grid td {
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid var(--theme-border);
}

.av-compare-stats-grid th {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--theme-text-muted);
}

.av-compare-stats-grid .av-compare-stat-label {
    font-weight: 600;
    color: var(--theme-text-muted);
    width: 30%;
}

.av-compare-stats-grid tr:last-child td {
    border-bottom: none;
}

/* Tall chart container for category-heavy butterfly charts (EVT etc.) */
.av-chart-container-tall {
    flex: 1 1 0;
    min-height: 280px;
    position: relative;
    overflow: hidden;
}

.av-chart-container-tall canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ── Community comparison metric panel (no Chart.js) ── */

.av-community-compare-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
}

.av-community-compare-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.av-community-compare-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--theme-dark);
}

.av-community-compare-bar-row {
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.av-community-compare-shape {
    color: var(--theme-text-muted);
    font-weight: 600;
    font-size: 11px;
}

.av-community-compare-bar-track {
    height: 14px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.av-community-compare-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s ease;
}

.av-community-compare-bar--1 { background: rgba(14, 116, 144, 0.85); }
.av-community-compare-bar--2 { background: rgba(180, 83, 9, 0.85); }

.av-community-compare-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--theme-dark);
    min-width: 50px;
    text-align: right;
}

.av-community-compare-delta {
    font-variant-numeric: tabular-nums;
    min-width: 60px;
    text-align: right;
    font-size: 11px;
}

.av-info-tooltip {
    position: relative;
    cursor: help;
    color: var(--theme-secondary);
    font-size: 13px;
    margin-left: 4px;
}

.av-info-tooltip-text {
    display: none;
    position: fixed;
    width: 260px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color: white;
    background: var(--theme-dark, #1e293b);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    white-space: normal;
    z-index: 100000;
    pointer-events: none;
}

/* ── Chart Area ── */
.av-chart-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.av-chart-stats {
    flex-shrink: 0;
}

.av-chart-container {
    flex: 1 1 0;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}

.av-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ── Continuous Stats Grid (histogram view) ── */
.av-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 4px;
}

.av-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: white;
    border-radius: 4px;
    border: 1px solid var(--theme-border);
    white-space: nowrap;
}

.av-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.av-stat-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--theme-dark);
}

/* ── Loading State ── */
.av-loading {
    color: var(--theme-secondary);
    font-weight: 500;
    font-style: normal;
}

.av-loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--theme-border);
    border-top-color: var(--theme-secondary);
    border-radius: 50%;
    animation: av-spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes av-spin {
    to { transform: rotate(360deg); }
}

/* Inline spinner for the Summary Statistics header — appears next to the
   "Analyzing X" text while analysis is running. White-on-teal tones tuned
   for the panel header's gradient background; shares the av-spin animation. */
.av-header-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: av-spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: -1px;
}

/* Italic "Analyzing {shape}" text shown in the header during loading —
   visually distinct from the final "Summary Statistics — {shape}" so the
   state transition reads clearly. */
.av-header-analyzing {
    font-style: italic;
    font-weight: 500;
}

/* Elapsed-seconds counter trailing the spinner. Tabular-nums keeps the
   digits from jittering as the count crosses single→double→triple digits. */
.av-header-timer {
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85em;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* ── Flip card wrappers ──
   On desktop the wrappers use display:contents so they're invisible to
   layout — the existing .av-summary (max-height: 35vh) on top of .av-charts
   (flex: 1) chain inside .av-figures-panel keeps behaving exactly as before.
   At <=1024px the mobile rules below promote the wrappers into a 3D flip
   surface and the two panels become front/back faces. */
.av-flip-card,
.av-flip-card-inner,
.av-flip-card-face {
    display: contents;
}

/* Right-side cluster inside every .av-panel-header — Export, layer nav,
   flip toggle all sit here as flex children with a consistent rhythm. */
.av-panel-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Flip toggle — flex chip inside .av-panel-actions. Hidden on desktop
   (the user can see both faces); revealed at <=1024px where the flip
   becomes the only way to reach the off-screen face. */
.av-flip-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.av-flip-toggle:hover,
.av-flip-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
    transform: scale(1.05);
    outline: none;
}
.av-flip-toggle svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* Chart-nav arrow buttons — match the flip toggle's chip vocabulary. */
.av-chart-nav-prev,
.av-chart-nav-next {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.av-chart-nav-prev:hover:not(:disabled),
.av-chart-nav-next:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
}
.av-chart-nav-prev:disabled,
.av-chart-nav-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Layer-picker dropdown — same visual rhythm as .av-export-dropdown so
   the action group reads as one cohesive row. Button shows the active
   layer's name; click opens a menu of all layers. */
.av-layer-dropdown { position: relative; }
.av-layer-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    max-width: 180px;
    white-space: nowrap;
}
.av-layer-toggle:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
}
.av-layer-toggle::after {
    content: "▾";
    font-size: 10px;
    margin-left: 2px;
}
.av-layer-toggle-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Title-mode override — used inside .av-panel-title-cluster. The dropdown
   doubles as the panel-header title, so it reads at title weight while still
   carrying a persistent outline so it's recognizable as a clickable control.
   Hover brightens the chip to match the prev/next nav-arrow vocabulary. */
.av-layer-toggle.is-title {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    padding: 0 8px;
    height: 24px;
    font-size: 14px;
    font-weight: 700;
    max-width: none;
    border-radius: 4px;
}
.av-layer-toggle.is-title:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
}
/* Anchor the menu to the dropdown's left edge in title position (right-edge
   anchoring would push the menu off the left side of the panel). */
.av-panel-title-cluster .av-layer-menu {
    right: auto;
    left: 0;
}
.av-layer-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    z-index: 20;
    padding: 4px 0;
    display: none;
}
.av-layer-dropdown.is-open .av-layer-menu { display: block; }
/* Portaled state: the menu is appended to <body> while open so it escapes
   the .av-flip-card transform/overflow context. The descendant rule above
   no longer matches in this case, so .is-floating drives display directly
   and bumps z-index above any sibling body-level overlays. */
.av-layer-menu.is-floating {
    display: block;
    z-index: 9999;
}
.av-layer-option {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--bs-dark);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.av-layer-option:hover,
.av-layer-option.is-active {
    background: rgba(14, 116, 144, 0.08);
    color: var(--theme-secondary);
    font-weight: 600;
}

/* ── Responsive: stack at narrow widths ── */
@media (max-width: 1024px) {
    .av-main {
        flex-direction: column;
    }

    /* Column basis is bumped by the boundary bar's height so the inner
       map keeps its original 50vh after the bar is added on top. */
    .av-map-column {
        flex: 0 0 calc(50vh + 44px);
    }

    .av-figures-panel {
        flex: 1;
        border-left: none;
        border-top: 2px solid var(--theme-border-dark);
    }

    /* Card-flip mode — both faces overlay one another and share the figures
       panel's full height. .is-flipped on the inner rotates the 3D plane to
       reveal the back face (charts). */
    .av-flip-card {
        display: block;
        position: relative;
        flex: 1;
        min-height: 0;
        perspective: 1500px;
    }
    .av-flip-card-inner {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: transform 0.55s cubic-bezier(0.4, 0.05, 0.2, 1);
    }
    .av-flip-card-inner.is-flipped {
        transform: rotateY(180deg);
    }
    .av-flip-card-face {
        position: absolute;
        inset: 0;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* Sever the preserve-3d ancestor's influence on the sticky-headed
           summary table's scroll hit-testing. Without isolation, scrolling
           the table required a click into it first. */
        isolation: isolate;
    }
    .av-flip-card-back {
        transform: rotateY(180deg);
    }

    /* backface-visibility hides the off-screen face VISUALLY but leaves it
       intercepting pointer events. Because both faces sit at `inset: 0` and
       the back is the later sibling, the back face was eating scroll wheel
       events on the (visible) summary table while unflipped. Disable pointer
       events on whichever face is currently facing away. */
    .av-flip-card-inner:not(.is-flipped) .av-flip-card-back {
        pointer-events: none;
    }
    .av-flip-card-inner.is-flipped .av-flip-card-front {
        pointer-events: none;
    }

    /* In flip mode the summary uncaps from its 35vh ceiling — it owns the
       whole figures-panel height for the moment it's the visible face. */
    .av-flip-card-face .av-summary {
        max-height: none;
        flex: 1;
        min-height: 0;
    }
    .av-flip-card-face .av-charts {
        flex: 1;
        min-height: 0;
    }

    /* Reveal the flip toggle buttons. */
    .av-flip-toggle {
        display: flex;
    }
}

/* ── Narrow viewport heights ──
   At short heights the figures panel shrinks below what a comfortable
   stats-grid + 200px-min canvas can fit, so .av-tab-content was becoming
   scrollable — and the Chart.js title (rendered inside the canvas) would
   scroll out of view first. At these heights we lock the panel as
   non-scrolling and let the canvas take whatever's left. Bars get shorter
   and harder to read precisely, but the title + structure stay visible
   and PNG export remains the precision fallback. */
@media (max-height: 720px) {
    .av-tab-content {
        overflow: hidden;
        padding: 8px;
    }
    .av-chart-wrapper {
        gap: 6px;
    }
    .av-chart-container,
    .av-chart-container-tall {
        min-height: 0;
    }
    /* Compact stat chips so the grid takes less vertical room when it
       wraps to a second row. */
    .av-stats-grid {
        gap: 3px;
        margin-top: 3px;
        margin-bottom: 2px;
    }
    .av-stat {
        padding: 2px 6px;
        gap: 3px;
    }
    .av-stat-label {
        font-size: 9px;
    }
    .av-stat-value {
        font-size: 11px;
    }
    /* Exception for stats-bearing charts (continuous histograms like CFL,
       and the comparison views that render Shape 1 / Shape 2 captions or
       tables above the canvas): let the panel scroll and keep a 200px
       canvas floor so the chart stays readable instead of squishing under
       the badge grid. The classified charts (BP / WHP / RPS / EVT) leave
       .av-chart-stats empty and keep the lock-to-fit behavior above.
       Chart.js's in-canvas title can still scroll out of view if the
       user scrolls all the way down, but that's a fair trade against an
       unreadable chart. */
    .av-tab-content:has(.av-chart-stats:not(:empty)) {
        overflow-y: auto;
    }
    .av-chart-wrapper:has(.av-chart-stats:not(:empty)) .av-chart-container {
        min-height: 200px;
    }
}

/* ── Print: hide the alternate-viewer shell when the report modal is open ──
   Mirrors viewer.css's rule for .viewer-container so the printed PDF only
   contains the report, not the live viewer behind it. */
@media print {
    body.report-open .av-container {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Boundary bar is still compact enough to fit at this width — only the
       stacked layout's basis tightens. Bar stays visible until the 480 px
       breakpoint below. */
    .av-map-column {
        flex: 0 0 40vh;
    }
}

/* True phone-territory widths: the bar can't comfortably host all four chips
   anymore, so hide it and let users fall back to map-click / drawn shapes. */
@media (max-width: 480px) {
    .av-boundary-bar {
        display: none;
    }
}

/* ── Compact docked popup card (Inspect mode) ──
   Overrides Esri's default popup chrome. The `!important` on width is needed
   because the SDK applies an inline width at runtime. */
.esri-view .esri-popup--is-docked.esri-popup--is-docked-bottom-left {
    margin: 0 0 12px 12px;
}

.esri-view .esri-popup__main-container {
    width: 280px !important;
    max-width: 280px;
    max-height: 280px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(14, 116, 144, 0.25);
    background: rgba(255, 255, 255, 0.96);
}

.esri-view .esri-popup__header {
    padding: 8px 10px;
    font-size: 13px;
}

.esri-view .esri-popup__header-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 13px;
}

.esri-view .esri-popup__content {
    padding: 6px 10px 10px;
    font-size: 12px;
    line-height: 1.35;
    color: #0f172a;
    max-height: 200px;
    overflow: auto;
}

.esri-view .esri-popup__footer {
    display: none;
}

.esri-view .esri-popup__pointer {
    display: none;
}

/* ── Welcome Tour ──────────────────────────────────────────────
   Dim overlay + a positionable modal card that walks first-time
   users through the alternate viewer's key tools. The body gets
   `tour-active` while the tour is open so we can scope rules
   that elevate spotlighted elements above the dim layer. */

.tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 2100;
    pointer-events: none;
    animation: fadeIn 0.25s ease;
}

.tour-modal {
    position: fixed;
    /* Default-center so the very first paint matches step 1's anchor and
       the modal doesn't flash at top-left before _positionModal runs.
       Non-center anchors override transform to 'none' inline. */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2300;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: white;
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    /* fadeIn (opacity-only) — slideUp's translateY would override the
       centering transform during the animation and cause a snap-to-center
       at the end. */
    animation: fadeIn 0.25s ease;
}

.tour-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--theme-gradient-header, linear-gradient(135deg, #2A363B 0%, #1a2429 100%));
    color: white;
    /* Explicit top-corner rounding so the jump menu can extend below the
       header without breaking the modal's rounded silhouette when its
       overflow flips to visible (see .tour-modal:has rule below). */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Jump-menu wrapper — positioned anchor for the absolute-positioned menu. */
.tour-modal-jump {
    position: relative;
    display: inline-flex;
}

.tour-modal-counter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: white;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 4px;
    transition: background 0.15s, opacity 0.15s;
    font-family: inherit;
}

.tour-modal-counter:hover,
.tour-modal-counter[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

.tour-modal-counter-caret {
    font-size: 9px;
    transition: transform 0.15s;
}

.tour-modal-counter[aria-expanded="true"] .tour-modal-counter-caret {
    transform: rotate(180deg);
}

.tour-modal-jump-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: white;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    z-index: 2400;
    max-height: 360px;
    overflow-y: auto;
    min-width: 280px;
}

.tour-modal-jump-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--theme-dark);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.tour-modal-jump-item:hover {
    background: rgba(14, 116, 144, 0.08);
}

.tour-modal-jump-item.is-current {
    background: rgba(14, 116, 144, 0.15);
    font-weight: 700;
}

.tour-modal-jump-num {
    flex: 0 0 18px;
    text-align: right;
    color: var(--theme-text-muted);
    font-variant-numeric: tabular-nums;
}

.tour-modal-jump-item.is-current .tour-modal-jump-num {
    color: var(--theme-secondary, #0e7490);
}

.tour-modal-jump-title {
    flex: 1;
    min-width: 0;
}

/* When the jump menu is open, let it escape the modal's rounded clipping.
   The header's explicit top-corner radius preserves the modal silhouette
   while overflow is visible. */
.tour-modal:has(.tour-modal-jump-menu:not([hidden])) {
    overflow: visible;
}

.tour-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.tour-modal-close:hover { opacity: 1; }

.tour-modal-body {
    padding: 16px 16px 12px;
}

.tour-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--theme-dark);
    margin: 0 0 8px;
}

.tour-modal-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--theme-dark);
    margin: 0;
}

/* Step bodies may contain <p>, <strong>, and <span class="tour-text-callout">
   for visual rhythm and emphasis. Bodies are hardcoded in WelcomeTour.STEPS
   (no user input interpolated), so HTML rendering is safe. */
.tour-modal-text p {
    margin: 0 0 8px;
}
.tour-modal-text p:last-child {
    margin-bottom: 0;
}

/* Bump <strong> weight to 600 — the modal body is 400, and browser-default
   bold (700) reads as too punchy against it. */
.tour-modal-text strong {
    font-weight: 600;
}

/* Soft yellow highlight for short inline emphasis. Harmonizes with the
   existing tour-input-pulse yellow used on dropdowns / flip toggle /
   Export button. Reserved for very short phrases — longer wraps read as
   cluttered; use the .tour-tip blockquote style below for multi-line
   asides instead. */
.tour-modal-text .tour-text-callout {
    background: rgba(250, 204, 21, 0.18);
    border-bottom: 2px solid rgba(250, 204, 21, 0.55);
    padding: 1px 4px;
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Quote-style callout for functional asides like "Quick tip: …". The
   left border + tinted background communicates "this is set apart from
   the main flow" without the marker-highlight noise. Resets browser
   defaults for <blockquote> (italic, indent). */
.tour-modal-text .tour-tip {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-left: 3px solid rgba(250, 204, 21, 0.7);
    background: rgba(250, 204, 21, 0.08);
    border-radius: 0 4px 4px 0;
    font-style: normal;
}
.tour-modal-text .tour-tip:last-child {
    margin-bottom: 0;
}

/* Inline icon helper for tour bodies — used to mirror an actual UI control
   (e.g. the Layers panel eye toggle) next to the word that names it, so
   the user can map "eye" to the icon at a glance. Sized to match the
   body's 13px font and nudged up 2px to align with x-height. */
.tour-modal-text .tour-inline-icon {
    vertical-align: middle;
    margin: -2px 1px 0 3px;
}

/* "See it in action" expandable video block. Hidden by default; the JS
   un-hides it when the step provides a videoSrc. Steps without video keep
   the standard 360px modal width — steps with a video expand to fit a
   wider clip (max-width clamp keeps it sane on small viewports). */
.tour-modal-video {
    margin-top: 12px;
}

.tour-modal:has(.tour-modal-video:not([hidden])) {
    width: 460px;
}

.tour-modal-video-details > summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-secondary, #0e7490);
    list-style: none;
    padding: 4px 0;
    user-select: none;
}

.tour-modal-video-details > summary::-webkit-details-marker { display: none; }

.tour-modal-video-details > summary::before {
    content: '\25B8'; /* right-pointing triangle */
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s ease;
}

.tour-modal-video-details[open] > summary::before {
    transform: rotate(90deg);
}

.tour-modal-video-details > summary:hover {
    text-decoration: underline;
}

.tour-modal-video-details video {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
    border-radius: 6px;
    background: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Inline collapsible inside tour body text (e.g. "Learn more about each
   layer type"). Mirrors the video-details disclosure visually so the
   pattern reads as part of the same system — same teal summary, same
   rotating triangle marker, same hover underline. */
.tour-modal-text .tour-modal-details {
    margin: 0 0 8px;
}
.tour-modal-text .tour-modal-details:last-child {
    margin-bottom: 0;
}
.tour-modal-text .tour-modal-details > summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-secondary, #0e7490);
    list-style: none;
    padding: 4px 0;
    user-select: none;
}
.tour-modal-text .tour-modal-details > summary::-webkit-details-marker { display: none; }
.tour-modal-text .tour-modal-details > summary::before {
    content: '\25B8'; /* right-pointing triangle */
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s ease;
}
.tour-modal-text .tour-modal-details[open] > summary::before {
    transform: rotate(90deg);
}
.tour-modal-text .tour-modal-details > summary:hover {
    text-decoration: underline;
}
.tour-modal-text .tour-modal-details > p {
    margin: 6px 0 0;
    padding-left: 18px;
}

.tour-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--theme-border);
    background: rgba(14, 116, 144, 0.03);
}

.tour-modal-skip {
    background: none;
    border: none;
    color: var(--theme-text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 6px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tour-modal-skip:hover { color: var(--theme-dark); }

.tour-modal-nav {
    display: flex;
    gap: 6px;
}

.tour-modal-nav .av-cp-btn {
    min-width: 80px;
}

/* Raise only the alt-viewer chrome belonging to the current step's
   focus zone above the dim overlay. The body's data-tour-focus
   attribute is set per-step by WelcomeTour._showStep:
     (none, step 1)    → everything dimmed
     "right-toolbar"   → vertical toolbar + open flyout (steps 2-8)
     "top-toolbar"     → boundary-dropdown bar (step 9)
     "figures-panel"   → right-side stats + charts panel (step 10)
   Overriding position on the absolute-positioned elements would
   drop them out of their anchor — don't. The figures panel has no
   base positioning so it gets one when raised. */
body.tour-active[data-tour-focus="right-toolbar"] .av-toolbar-icons,
body.tour-active[data-tour-focus="right-toolbar"] .av-flyout {
    z-index: 2200;
}

body.tour-active[data-tour-focus="top-toolbar"] .av-boundary-bar {
    z-index: 2200;
}

body.tour-active[data-tour-focus="figures-panel"] .av-figures-panel {
    z-index: 2200;
    position: relative;
}

/* Sub-zones of the figures panel: lift only the table, only the chart, or
   only the two Export buttons above the dim overlay. The other parts of
   the panel stay dimmed so the tour can call out one piece at a time.
   On desktop the flip-card wrappers use display:contents, so #avSummaryTable
   and #avCharts are effectively direct children of .av-figures-panel and
   their z-index lifts against the body-level stacking context.

   `background` here is load-bearing: .av-summary and .av-charts inherit no
   color (background isn't an inherited property), so when lifted above the
   overlay they would otherwise be transparent and the dim figures-panel
   behind them would bleed through anywhere a descendant lacks its own
   solid bg — table cell text, Chart.js axis labels, etc. Pin a solid
   color so the lifted container itself blocks the overlay tint. */
body.tour-active[data-tour-focus="summary-table"] #avSummaryTable {
    z-index: 2200;
    position: relative;
    background: var(--theme-background);
}

body.tour-active[data-tour-focus="charts-panel"] #avCharts {
    z-index: 2200;
    position: relative;
    background: var(--theme-background);
}

body.tour-active[data-tour-focus="export-buttons"] #avSummaryTable .av-add-to-report-toggle,
body.tour-active[data-tour-focus="export-buttons"] #avSummaryTable .av-export-toggle,
body.tour-active[data-tour-focus="export-buttons"] #avCharts .av-add-to-report-toggle,
body.tour-active[data-tour-focus="export-buttons"] #avCharts .av-export-toggle {
    z-index: 2200;
    position: relative;
}

/* Stacked-layout (<=1024px) handling for the Export step. Lift the whole
   figures-panel so the panel header (which carries the Export button) can
   paint above the dim overlay — the teal spotlight on the header and the
   yellow pulse on the Export button then both read as "in focus". The
   body content of each face would otherwise be lit alongside the header,
   so re-dim it with a pseudo-overlay that matches the natural tour-overlay
   darken (rather than opacity, which leaves table cells / chart canvas
   washed-out). Pseudo-element instead of opacity so the dim looks like a
   real overlay covering the content. */
@media (max-width: 1024px) {
    body.tour-active[data-tour-focus="export-buttons"] .av-figures-panel {
        z-index: 2200;
        position: relative;
    }
    body.tour-active[data-tour-focus="export-buttons"] .av-flip-card-face .av-panel-body,
    body.tour-active[data-tour-focus="export-buttons"] .av-flip-card-face .av-tab-content {
        position: relative;
    }
    body.tour-active[data-tour-focus="export-buttons"] .av-flip-card-face .av-panel-body::after,
    body.tour-active[data-tour-focus="export-buttons"] .av-flip-card-face .av-tab-content::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(2px);
        pointer-events: none;
        z-index: 10;
    }
}

/* The toolbar's base style clips its children with overflow:hidden
   to keep the rounded corners clean. That clipping eats the
   spotlight outline + pulse on whichever icon is active during the
   right-toolbar steps, so unclip just for those steps. */
body.tour-active[data-tour-focus="right-toolbar"] .av-toolbar-icons {
    overflow: visible;
}

body.tour-active .tour-spotlight {
    outline: 3px solid var(--theme-secondary, #0e7490);
    outline-offset: 2px;
    border-radius: 4px;
    animation: tourPulse 1.6s ease-in-out infinite;
}

@keyframes tourPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(14, 116, 144, 0.55);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(14, 116, 144, 0);
    }
}

/* "Waiting for input" pulse — soft-yellow halo overlaid on top of the
   regular teal spotlight outline. Used on the pick-area step's boundary
   bar to nudge the user toward picking a selection. Overrides the
   tour-spotlight box-shadow animation while keeping its solid outline. */
body.tour-active .tour-input-pulse {
    animation: tourInputPulse 1.4s ease-in-out infinite !important;
}

@keyframes tourInputPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.5);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(250, 204, 21, 0);
    }
}

/* "Take the Tour" button in the navbar (alternate viewer only) */
.av-tour-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 14px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.av-tour-nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.av-tour-nav-btn svg {
    flex-shrink: 0;
}

/* When the Bootstrap navbar collapses (<lg = <992px), the visible flex
   children of .container-fluid are: brand, tour button, navbar-toggler.
   The parent uses `justify-content: space-between`, which with three items
   centers the middle one — leaving the tour button drifting away from the
   brand. Anchor it back to the brand with `margin-right: auto`: that auto
   absorbs all the available space, pushing the toggler to the far right
   while the button stays flush against the brand. Scoped to the collapsed
   range so the lg+ layout (where the navbar-collapse handles spacing via
   ms-auto) is untouched. */
@media (max-width: 991.98px) {
    .av-tour-nav-btn {
        margin-right: auto;
    }
}