/* ============================================================
   Comparative Report — "refined enterprise light" system.
   Light UI, tight density, hairline borders, flat shadows,
   4–10px radii, uppercase micro-labels, tabular numerals.
   Navy #004973 is the accent (not a fill), sky is the cool
   secondary, purple stays a sparing accent. UI face: Inter
   (loaded per-page; the site header/footer keep Poppins/Sora).
   --bb-radius-pill remains only for genuinely circular things
   (dots, spinners, swatches) — badges/chips are 4–6px now.
   ============================================================ */

:root {
    /* Brand */
    --bb-navy: #004973;
    --bb-navy-dark: #003052;
    --bb-navy-deeper: #001e35;
    --bb-purple: #6C37B8;
    --bb-purple-light: #8B5CD0;
    --bb-purple-dim: rgba(108, 55, 184, 0.12);
    --bb-sky: #7EC8E3;
    --bb-sky-light: #A8DCF0;
    --bb-sky-dim: rgba(126, 200, 227, 0.10);

    /* Neutrals */
    --bb-white: #ffffff;
    --bb-off-white: #f4f6f8;
    --bb-gray-50: #f7f9fc;
    --bb-gray-100: #eef2f7;
    --bb-gray-200: #e3e9ee;
    --bb-gray-300: #b8c7d6;
    --bb-gray-400: #8a9db5;
    --bb-gray-500: #5a7080;
    --bb-gray-700: #2d3e4f;
    --bb-gray-900: #111e2b;
    --bb-soft: #eef2f6;

    /* Semantic */
    --bb-success: #1a7a4e;
    --bb-success-bg: #e9f6ef;
    --bb-warning: #d9831f;
    --bb-danger: #b3362c;
    --bb-danger-bg: #fbeeec;
    --bb-text-body: var(--bb-gray-700);
    --bb-text-strong: var(--bb-gray-900);
    --bb-text-muted: var(--bb-gray-400);
    --bb-border: var(--bb-gray-200);
    --bb-border-strong: var(--bb-gray-300);
    --bb-accent: var(--bb-navy);
    --bb-accent-hover: #005f95;
    --bb-focus-ring: var(--bb-sky);

    /* Type — Inter for both roles; weight does the display duty */
    --bb-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bb-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fs-label: 10px;    /* uppercase micro-labels */
    --fs-meta: 11.5px;   /* captions, deltas, footnotes */
    --fs-body: 13px;     /* default UI/table text */
    --fs-title: 15px;    /* section titles */
    --fs-kpi: 21px;      /* KPI values */

    /* Radii / shadows / motion */
    --bb-radius-xs: 4px;
    --bb-radius-sm: 6px;
    --bb-radius-md: 8px;
    --bb-radius-lg: 10px;
    --bb-radius-pill: 999px;
    --bb-shadow-sm: 0 1px 2px rgba(16, 42, 60, 0.04);
    --bb-shadow-md: 0 1px 3px rgba(16, 42, 60, 0.07);
    --bb-shadow-lg: 0 4px 14px rgba(16, 42, 60, 0.10);
    --bb-shadow-xl: 0 12px 32px rgba(16, 42, 60, 0.16);

    /* Motion — the four durations and three curves from docs/STYLE-GUIDE.md §5.
       dur-1 state flips (colour/background), dur-2 the standard, dur-3
       entrances and larger moves, dur-4 full panels. Transition named
       properties only, never `all`. */
    --bb-dur-1: 120ms;
    --bb-dur-2: 180ms;
    --bb-dur-3: 240ms;
    --bb-dur-4: 340ms;
    --bb-ease: cubic-bezier(.4, 0, .2, 1);
    --bb-ease-entrance: cubic-bezier(.16, 1, .3, 1);
    --bb-ease-pill: cubic-bezier(.34, 1.35, .64, 1);
    /* Kept as the name ~30 existing rules already use; now carries the
       standard curve rather than plain `ease`. */
    --bb-transition-fast: var(--bb-dur-2) var(--bb-ease);
}

/* ---------------- Page frame ---------------- */

.cr-page {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    min-height: calc(100vh - var(--cr-header-offset, 71px));
    background: var(--bb-off-white);
    font-family: var(--bb-font-body);
    color: var(--bb-text-body);
}

/* The sidebar has always declared `position: sticky`, but it never stuck:
   css/new-global-styles.css sets `body { overflow-x: hidden }`, which makes
   body a scroll container, and a sticky child then sticks to *that* box rather
   than to the viewport — so it just rides down with the page.

   That sheet owns the shared header and footer for every page and is off-limits
   for page-level work, so this overrides it for this page only. `clip` suppresses
   horizontal overflow exactly like `hidden` but does NOT create a scroll
   container, which is what lets sticky work again. A browser without
   `overflow: clip` drops the declaration and simply keeps today's behaviour. */
body.cr-body {
    overflow-x: clip;
}

.cr-sidebar {
    background: var(--bb-white);
    border-right: 1px solid var(--bb-border);
    padding: 16px;
    display: flex;
    flex-direction: column;
    /* Sticky needs the item to be shorter than its grid row, and needs an
       explicit height rather than the grid's default stretch, or there is no
       travel for it to stick within.
       box-sizing matters here: as content-box the 16px padding was added on top
       of the height, making the box taller than `100vh - offset`. A sticky box
       that doesn't fit between its `top` offset and the bottom of the viewport
       can't pin at that offset — it slides until its own bottom shows, which
       looked exactly like sticky not working. */
    box-sizing: border-box;
    align-self: start;
    height: calc(100vh - var(--cr-header-offset, 71px));
    position: sticky;
    top: var(--cr-header-offset, 71px);
    overflow-y: auto;
}

.cr-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

/* Sidebar collapse toggle — a labeled pill sitting at the top-right of the
   sidebar so the collapse affordance is obvious, not a lone mystery chevron.
   Becomes the lone control on a slim rail when collapsed (see the desktop
   media query below). */
.cr-sidebar-collapse {
    appearance: none;
    align-self: flex-end;
    margin-bottom: 10px;
    height: 30px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    background: var(--bb-white);
    color: var(--bb-navy);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    flex: 0 0 auto;
    font-family: var(--bb-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color var(--bb-transition-fast), border-color var(--bb-transition-fast), background var(--bb-transition-fast);
}

.cr-sidebar-collapse:hover {
    color: var(--bb-navy);
    border-color: var(--bb-sky);
    background: var(--bb-sky-dim);
}

.cr-sidebar-collapse svg {
    transition: transform 0.2s ease;
}

.cr-sidebar-collapse-label {
    white-space: nowrap;
    line-height: 1;
}

.cr-sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-right: 6px;
}

/* Signature eyebrow: uppercase micro-label with a leading navy dash */
.cr-sidebar-heading {
    font-family: var(--bb-font-body);
    font-weight: 600;
    font-size: var(--fs-label);
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--bb-navy);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cr-sidebar-heading::before {
    content: '';
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: var(--bb-navy);
    flex: 0 0 auto;
}

.cr-sidebar-title {
    font-size: var(--fs-label);
}

.cr-toggle-filters {
    width: 100%;
    margin: 0 0 12px;
}

.cr-clear-filters {
    width: 100%;
    margin: 0 0 12px;
}

.cr-saved-row {
    width: 100%;
}

.cr-saved-row .cr-select {
    flex: 1;
    min-width: 0;
}

/* Closed state uses display:none so it reserves no space — the toggle JS
   leaves a stale inline max-height that otherwise held ~166px of invisible
   dead space at the top of the sidebar. */
.cr-advanced-filters {
    display: none;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 220ms ease, opacity 200ms ease;
}

.cr-advanced-filters.is-open {
    display: block;
    opacity: 1;
}

.cr-label {
    display: block;
    font-family: var(--bb-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--bb-gray-700);
    margin: 14px 0 8px;
}

/* ---------------- Inputs & buttons ---------------- */

.cr-search-row {
    display: flex;
    gap: 10px;
}

.cr-search {
    display: block;
}

/* Search bar: the panel's primary action — a clean white field that stays
   prominent through its navy border, not through heavy chrome. A leading
   magnifier says "search here" (and becomes a spinner while a lookup is in
   flight); an inline × appears once there's something to clear. */
.cr-search-bar {
    gap: 0;
    align-items: center;
    background: var(--bb-white);
    border: 1px solid var(--bb-navy);
    border-radius: var(--bb-radius-md);
    overflow: hidden;
    box-shadow: var(--bb-shadow-md);
    transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.cr-search-bar:focus-within {
    box-shadow: 0 0 0 3px var(--bb-sky-dim), var(--bb-shadow-md);
}

.cr-search-lead {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 12px;
    color: var(--bb-text-muted);
    transition: color var(--bb-transition-fast);
}

.cr-search-bar:focus-within .cr-search-lead {
    color: var(--bb-navy);
}

.cr-search-lead-icon {
    display: block;
}

/* While a search is in flight the magnifier yields to a small spinner. */
.cr-search-lead-spin {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid var(--bb-sky-dim);
    border-top-color: var(--bb-navy);
    border-radius: 50%;
    animation: cr-spin 0.7s linear infinite;
}

.cr-search-bar.is-searching .cr-search-lead-icon {
    display: none;
}

.cr-search-bar.is-searching .cr-search-lead-spin {
    display: block;
}

.cr-search-bar .cr-input {
    border: 0;
    border-radius: 0;
    height: 42px;
    font-family: var(--bb-font-body);
    font-weight: 400;
    line-height: 20px;
    padding: 0 8px 0 9px;
    min-width: 0;
}

.cr-search-bar .cr-input:focus {
    box-shadow: none;
}

/* The full prompt lives in the placeholder (the visible label was moved into
   the field). Slightly small so it fits the 340px sidebar width. */
.cr-search-bar .cr-input::placeholder {
    font-size: 11.5px;
}

/* Inline clear: only rendered once there's text to wipe (bar gets .has-text
   from JS). Escape does the same from the keyboard. */
.cr-search-reset {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--bb-gray-100);
    color: var(--bb-text-muted);
    cursor: pointer;
    transition: color var(--bb-transition-fast), background var(--bb-transition-fast);
}

.cr-search-bar.has-text .cr-search-reset {
    display: inline-flex;
}

.cr-search-reset:hover {
    background: var(--bb-sky-dim);
    color: var(--bb-navy);
}

.cr-search-reset:focus-visible {
    outline: 2px solid var(--bb-navy);
    outline-offset: 1px;
}

.cr-input {
    flex: 1;
    height: 34px;
    border: 1px solid var(--bb-border-strong);
    border-radius: var(--bb-radius-sm);
    padding: 0 10px;
    outline: none;
    font-family: var(--bb-font-body);
    font-size: var(--fs-body);
    color: var(--bb-text-strong);
    background: var(--bb-white);
}

.cr-input:focus {
    border-color: var(--bb-navy);
    box-shadow: 0 0 0 3px var(--bb-sky-dim);
}

/* Primary button: navy fill, flat — darkens on hover, no lift */
.cr-btn {
    height: 34px;
    padding: 0 14px;
    border-radius: var(--bb-radius-sm);
    border: 1px solid var(--bb-navy);
    background: var(--bb-navy);
    color: var(--bb-white);
    font-family: var(--bb-font-body);
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    cursor: pointer;
    transition: background var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.cr-btn:hover {
    background: var(--bb-accent-hover);
    border-color: var(--bb-accent-hover);
}

/* Secondary button: outline — subtle gray border, navy text */
.cr-btn-secondary,
.cr-sidebar #cr-toggle-filters,
.cr-sidebar #cr-saved-load,
.cr-sidebar #cr-saved-delete {
    background: var(--bb-white);
    border: 1px solid var(--bb-border-strong);
    color: var(--bb-navy);
    border-radius: var(--bb-radius-sm);
    font-family: var(--bb-font-body);
    font-weight: 600;
    line-height: 100%;
    text-align: center;
}

.cr-btn-secondary:hover,
.cr-sidebar #cr-toggle-filters:hover,
.cr-sidebar #cr-saved-load:hover,
.cr-sidebar #cr-saved-delete:hover {
    background: var(--bb-gray-50);
    border-color: var(--bb-sky);
}

.cr-select {
    height: 34px;
    border-radius: var(--bb-radius-sm);
    border: 1px solid var(--bb-border-strong);
    padding: 0 38px 0 10px;
    background: var(--bb-white);
    color: var(--bb-text-strong);
    font-family: var(--bb-font-body);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23004973' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 16px) 50%;
    background-size: 18px 18px;
    font-size: 13px;
}

/* ---------------- Sidebar results ---------------- */

.cr-section-title {
    margin: 14px 0 8px;
}

.cr-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cr-results-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bb-text-strong);
    user-select: none;
}

/* Selection tally + Clear, grouped on the right of the Select All row */
.cr-results-header-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cr-results-header-right[hidden] {
    display: none;
}

.cr-selected-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--bb-gray-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cr-clear-selected {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 2px 2px;
    font-family: var(--bb-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--bb-navy);
    cursor: pointer;
    border-radius: var(--bb-radius-xs);
    transition: color var(--bb-transition-fast);
}

.cr-clear-selected:hover {
    color: var(--bb-accent-hover);
    text-decoration: underline;
}

/* Custom checkboxes — rounded, navy-when-checked, shared by the drug
   result rows and the Select All control (which also uses indeterminate) */
.cr-results-select-all input[type="checkbox"],
.cr-result input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin: 0;
    border: 1.5px solid var(--bb-border-strong);
    border-radius: var(--bb-radius-xs);
    background: var(--bb-white);
    cursor: pointer;
    transition: background-color var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.cr-results-select-all input[type="checkbox"]:hover,
.cr-result input[type="checkbox"]:hover {
    border-color: var(--bb-navy);
}

.cr-results-select-all input[type="checkbox"]:checked,
.cr-results-select-all input[type="checkbox"]:indeterminate,
.cr-result input[type="checkbox"]:checked {
    background-color: var(--bb-navy);
    border-color: var(--bb-navy);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.cr-results-select-all input[type="checkbox"]:checked,
.cr-result input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 6.2l2.3 2.3 4.8-5'/%3E%3C/svg%3E");
}

.cr-results-select-all input[type="checkbox"]:indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2.5 6h7'/%3E%3C/svg%3E");
}

.cr-results-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: visible;
}

.cr-results {
    flex: 1;
    min-height: 0;
    margin-bottom: 20px;
}

/* Dense checklist rows; selection = sky tint + inset navy accent bar
   (inset shadow, not border, so the row doesn't shift) */
.cr-result {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 7px 10px;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    background: var(--bb-white);
    cursor: pointer;
    transition: background var(--bb-transition-fast), border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.cr-result input {
    margin-top: 2px;
}

.cr-result:hover {
    border-color: var(--bb-sky);
    background: var(--bb-gray-50);
}

.cr-result.is-selected,
.cr-result.is-selected:hover {
    background: var(--bb-sky-dim);
    border-color: #cfe4ef;
    box-shadow: inset 3px 0 0 var(--bb-navy);
}

.cr-result.is-selected .cr-result-title {
    color: var(--bb-navy-dark);
}

/* Flex child must allow shrinking below content width for the sub to ellipsize */
.cr-result-body {
    flex: 1;
    min-width: 0;
}

.cr-result-title {
    font-weight: 600;
    color: var(--bb-text-strong);
    font-size: 12.5px;
    line-height: 1.3;
}

/* One-line description with ellipsis; full text on hover via title attr —
   keeps rows compact so more drugs fit before scrolling */
.cr-result-sub {
    color: var(--bb-gray-500);
    font-size: var(--fs-meta);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cr-muted {
    margin-top: 8px;
    color: var(--bb-gray-500);
    font-size: 12px;
}

.cr-muted[data-loading="1"]::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: var(--bb-radius-pill);
    border: 2px solid var(--bb-gray-200);
    border-top-color: var(--bb-navy);
    animation: cr-spin 0.9s linear infinite;
    vertical-align: -2px;
}

.cr-sidebar-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--bb-gray-100);
    margin-bottom: 20px;
}

/* "Select a Category" — the sidebar's hero action. Bold navy fill with an
   icon so it reads as the standout entry point, sitting apart from the
   Saved Reports card below. */
.cr-feature-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 42px;
    padding: 0 16px;
    border-radius: var(--bb-radius-md);
    border: 1px solid var(--bb-navy);
    background: var(--bb-navy);
    color: var(--bb-white);
    font-family: var(--bb-font-body);
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--bb-shadow-md);
    transition: background var(--bb-transition-fast), border-color var(--bb-transition-fast), transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}

.cr-feature-btn:hover {
    background: var(--bb-accent-hover);
    border-color: var(--bb-accent-hover);
    box-shadow: var(--bb-shadow-lg);
}

.cr-feature-btn:active {
    transform: translateY(1px);
}

.cr-feature-btn-icon {
    flex: 0 0 auto;
    opacity: 0.95;
}

/* Saved Reports: the Save action and the load-a-report dropdown grouped into
   one bordered card so they read as a single, connected control. */
.cr-saved-panel {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    background: var(--bb-gray-50);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cr-saved-panel-head {
    margin-bottom: 1px;
}

/* Drop the little leading dash the sidebar-heading idiom adds elsewhere. */
.cr-saved-panel-head::before {
    display: none;
}

.cr-saved-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cr-saved-row .cr-select {
    flex: 1;
    min-width: 0;
}

.cr-saved-row #cr-saved-load {
    flex: 0 0 auto;
    width: 40px;
    padding: 0;
    font-size: 15px;
}

.cr-saved-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cr-saved-actions .cr-btn {
    width: 100%;
    height: 38px;
    font-size: 12.5px;
}

.cr-saved-panel #cr-saved-status:empty {
    display: none;
}

.cr-divider {
    display: none;
}

/* ---------------- Limit toast ---------------- */

.cr-limit-toast {
    display: none;
    align-items: center;
    background: #fdf3e2;
    border: 1px solid #ecd9b0;
    border-radius: var(--bb-radius-sm);
    color: #8a5000;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    position: fixed;
    top: calc(var(--cr-header-offset) + 75px);
    left: 16px;
    z-index: 1000;
    box-shadow: var(--bb-shadow-md);
    width: 260px;
}

.cr-limit-toast.is-visible {
    display: flex;
}

.cr-limit-toast-close {
    background: none;
    border: none;
    color: #8a5310;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    margin-left: auto;
    padding: 0 0 0 8px;
    opacity: 0.7;
}

.cr-limit-toast-close:hover {
    opacity: 1;
}

/* ---------------- Drug legend chips ---------------- */

.cr-drug-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px;
}

.cr-drug-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bb-white);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    padding: 4px 10px;
}

.cr-drug-legend-swatch {
    width: 8px;
    height: 8px;
    border-radius: var(--bb-radius-pill);
}

.cr-drug-legend-text {
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--bb-text-body);
}

/* ---------------- Main column ---------------- */

.cr-main {
    padding: 18px;
    position: relative;
    min-width: 0;
}

.cr-loading {
    position: absolute;
    inset: 0;
    background: rgba(245, 248, 251, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.cr-loading-spinner {
    width: 42px;
    height: 42px;
    border-radius: var(--bb-radius-pill);
    border: 4px solid var(--bb-gray-200);
    border-top-color: var(--bb-navy);
    animation: cr-spin 0.9s linear infinite;
}

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

/* ---------------- Benchmarks (KPI tiles) ---------------- */

.cr-benchmarks {
    background: var(--bb-white);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    box-shadow: var(--bb-shadow-sm);
    overflow: visible;
    position: relative;
    z-index: 40;
    margin-bottom: 14px;
}

.cr-benchmarks-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 16px 20px 0;
    cursor: pointer;
}

/* Collapse chevron toggle at the head of the strip */
.cr-bm-collapse {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 2px;
    margin: 0 1px 0 -4px;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bb-gray-400);
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.cr-bm-collapse:hover {
    color: var(--bb-gray-700);
    background: var(--bb-gray-50);
}

.cr-bm-chevron {
    display: block;
    transition: transform 0.18s ease;
}

.cr-benchmarks.is-collapsed .cr-bm-chevron {
    transform: rotate(-90deg);
}

/* Collapsed: hide the tile body and the (now-meaningless) metric switch,
   and restore the bottom padding the grid's own padding used to provide. */
.cr-benchmarks.is-collapsed .cr-benchmarks-body {
    display: none;
}

.cr-benchmarks.is-collapsed .cr-bm-metric-switch {
    display: none !important;
}

.cr-benchmarks.is-collapsed .cr-benchmarks-header {
    padding-bottom: 16px;
}

/* The metric switch is interactive; don't inherit the header's toggle cursor */
.cr-bm-metric-switch {
    cursor: default;
}

/* Single muted caption naming the change window (replaces the year
   range that used to repeat inside every delta pill) */
.cr-bm-caption {
    font-family: var(--bb-font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--bb-gray-400);
}

.cr-bm-caption strong {
    font-weight: 600;
    color: var(--bb-gray-500);
}

.cr-benchmarks-title {
    font-family: var(--bb-font-display);
    font-weight: 600;
    font-size: var(--fs-title);
    color: var(--bb-text-strong);
    letter-spacing: -0.01em;
    text-transform: none;
}

/* The benchmarks title is a real heading, not an eyebrow */
.cr-benchmarks-title.cr-sidebar-heading {
    display: block;
}

.cr-benchmarks-title.cr-sidebar-heading::before {
    display: none;
}

/* KPI strip: hairline-divided cells inside the one container, not
   individual boxed cards */
.cr-benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 10px 20px 16px;
    border-top: 1px solid var(--bb-soft);
    margin-top: 12px;
}

.cr-benchmark-card {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--bb-soft);
    border-radius: 0;
    padding: 6px 16px 2px;
}

.cr-benchmarks-grid .cr-benchmark-card:first-child {
    border-left: 0;
    padding-left: 0;
}

/* Single vaccine code: the ASP tile (first child) is hidden and the two CDC
   per-dose tiles join the row — five across, MPL becomes the leading card. */
.cr-benchmarks-grid.is-vaccine {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cr-benchmarks-grid.is-vaccine .cr-benchmark-card:nth-child(2) {
    border-left: 0;
    padding-left: 0;
}

/* Multi-drug ASP tiles — one card per selected drug. A single row that
   scrolls horizontally rather than wrapping onto multiple rows. */
.cr-benchmarks-multi {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}

.cr-benchmarks-multi .cr-benchmark-card {
    flex: 0 0 200px;
}

.cr-benchmark-drug {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bb-text-body);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cr-benchmark-drug-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--bb-radius-pill);
    flex: 0 0 auto;
}

.cr-benchmark-top {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
}

.cr-kpi-value {
    font-family: var(--bb-font-display);
    font-size: var(--fs-kpi);
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--bb-text-strong);
    font-variant-numeric: tabular-nums;
}

.cr-kpi-label {
    font-family: var(--bb-font-body);
    font-weight: 600;
    font-size: var(--fs-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bb-gray-400);
    margin-top: 5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Manufacturer sublabel on the multi-drug ASP tiles: names differ per drug
   and can run long, so clamp to one ellipsized line (full name via title). */
.cr-kpi-sublabel {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Manufacturer line under a benchmark tile. Deliberately NOT .cr-kpi-label:
   that style's uppercase + wide tracking is for three-letter metric names,
   and a full company name set that way is unreadable at 10px. */
.cr-benchmark-mfr {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 5px;
    font-family: var(--bb-font-body);
    font-size: var(--fs-meta);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bb-gray-500);
}

/* Delta as a small square-cornered tag */
.cr-benchmark-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    border-radius: var(--bb-radius-xs);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cr-benchmark-delta:empty {
    display: none;
}

.cr-benchmark-delta.is-up {
    color: var(--bb-success);
    background: var(--bb-success-bg);
}

.cr-benchmark-delta.is-down {
    color: var(--bb-danger);
    background: var(--bb-danger-bg);
}

/* Unchanged price: neutral, no direction implied. */
.cr-benchmark-delta.is-flat {
    color: var(--bb-gray-500);
    background: var(--bb-gray-100);
}

.cr-no-access .cr-kpi-value,
.cr-no-access .cr-benchmark-delta,
.cr-no-access .cr-mkt-v,
.cr-no-access .cr-mkt-chip {
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
}

/* ---------------- Tooltips ---------------- */

.cr-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--bb-radius-pill);
    border: 1px solid var(--bb-gray-300);
    background: var(--bb-white);
    color: var(--bb-gray-500);
    font-size: 10px;
    line-height: 1;
    flex: 0 0 auto;
    cursor: help;
    transition: background var(--bb-transition-fast), color var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.cr-tooltip:hover,
.cr-tooltip:focus-visible {
    background: var(--bb-navy);
    border-color: var(--bb-navy);
    color: var(--bb-white);
}

.cr-tooltip:focus-visible {
    outline: 2px solid var(--bb-navy);
    outline-offset: 2px;
}

.cr-tooltip::before {
    content: '?';
    font-weight: 700;
}

/* Navy tooltip bubble */
.cr-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 8px;
    width: 260px;
    max-width: min(260px, 80vw);
    background: var(--bb-navy-deeper);
    border: 0;
    border-radius: var(--bb-radius-md);
    padding: 12px 14px;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--bb-font-body);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    box-shadow: var(--bb-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
    z-index: 200;
}

.cr-tooltip[data-tooltip=""]::after {
    display: none;
}

.cr-tooltip:hover::after,
.cr-tooltip:focus-visible::after {
    opacity: 1;
}

.cr-portal-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;
    max-width: min(260px, 80vw);
    background: var(--bb-navy-deeper);
    border: 0;
    border-radius: var(--bb-radius-md);
    padding: 12px 14px;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--bb-font-body);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    box-shadow: var(--bb-shadow-lg);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.cr-portal-tooltip.is-visible {
    opacity: 1;
}

/* ---------------- Chart card & controls ---------------- */

.cr-chart-wrap {
    margin-bottom: 14px;
}

.cr-chart-card {
    position: relative;
    background: var(--bb-white);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    box-shadow: var(--bb-shadow-sm);
    overflow: hidden;
}

.controls-bar {
    border-bottom: 1px solid var(--bb-border);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bb-white);
}

.controls-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.row-label {
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--bb-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.11em;
    min-width: 44px;
    user-select: none;
}

.controls-divider {
    height: 1px;
    background: var(--bb-gray-100);
}

/* Series chip colors — kept in sync with metricColor() in
   comparative-report.js and the chart palette */
.pill--asp   { --series-color: #C2453E; --tint: rgba(194, 69, 62, 0.06); }
.pill--mpl   { --series-color: #7C2D33; --tint: rgba(124, 45, 51, 0.06); }
.pill--wac   { --series-color: #004973; --tint: rgba(0, 73, 115, 0.06); }
.pill--awp   { --series-color: #3E92BC; --tint: rgba(62, 146, 188, 0.08); }
.pill--ratio { --series-color: #6C37B8; --tint: rgba(108, 55, 184, 0.06); }
/* Vaccine codes (CDC price-list per-dose pair): drug-page vaccine embed, and
   the report page while a vaccine code is selected */
.pill--cdc   { --series-color: #1B8074; --tint: rgba(27, 128, 116, 0.06); }
.pill--ps    { --series-color: #C2701E; --tint: rgba(194, 112, 30, 0.07); }
.pill--index { --series-color: #2d3e4f; --tint: rgba(45, 62, 79, 0.06); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--bb-radius-sm);
    border: 1px solid var(--bb-border);
    background: var(--bb-white);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--bb-gray-500);
    white-space: nowrap;
    transition: background var(--bb-dur-1) var(--bb-ease), border-color var(--bb-dur-1) var(--bb-ease), color var(--bb-dur-1) var(--bb-ease), box-shadow var(--bb-dur-1) var(--bb-ease);
    user-select: none;
}

.pill input[type="checkbox"] {
    display: none;
}

.pill:hover {
    background: var(--bb-gray-50);
}

.pill.active {
    border-color: var(--series-color);
    color: var(--series-color);
    background: var(--tint);
}

.pill .swatch {
    width: 16px;
    height: 2.5px;
    border-radius: 1px;
    background: var(--bb-gray-300);
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.pill.active .swatch {
    background: var(--series-color);
}

.pill .swatch.dashed {
    background: transparent;
    border-top: 2px dotted var(--bb-gray-300);
    height: 0;
}

.pill.active .swatch.dashed {
    background: transparent;
    border-top-color: var(--series-color);
}

/* Segmented Monthly/Quarterly granularity toggle */
.cr-seg {
    display: inline-flex;
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bb-white);
}

/* Pushed to the top-right corner of the Series controls row. */
.cr-seg--corner {
    margin-left: auto;
}

/* Display-mode toggles (granularity + value scale) grouped at the right edge
   of the Filters row, away from the data-picking series pills above. */
.cr-view-controls {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cr-seg-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bb-gray-500);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--bb-dur-1) var(--bb-ease), color var(--bb-dur-1) var(--bb-ease);
}

.cr-seg-btn + .cr-seg-btn {
    border-left: 1px solid var(--bb-border);
}

.cr-seg-btn:hover {
    background: var(--bb-gray-50);
}

.cr-seg-btn.active {
    background: var(--bb-navy);
    color: var(--bb-white);
}

.cr-seg-btn:focus-visible {
    outline: 2px solid var(--bb-navy);
    outline-offset: -2px;
}

/* Benchmark metric switch (ASP/MPL/WAC/AWP) in the multi-drug tile header —
   mirrors the .cr-seg granularity toggle, pushed to the header's right edge. */
.cr-bm-metric-switch {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bb-white);
}

.cr-bm-metric-opt {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 3px 12px;
    font-family: var(--bb-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--bb-gray-500);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--bb-dur-1) var(--bb-ease), color var(--bb-dur-1) var(--bb-ease);
}

.cr-bm-metric-opt + .cr-bm-metric-opt {
    border-left: 1px solid var(--bb-border);
}

.cr-bm-metric-opt:hover {
    background: var(--bb-gray-50);
}

.cr-bm-metric-opt.is-active {
    background: var(--bb-navy);
    color: var(--bb-white);
}

.multi-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--bb-border);
    background: var(--bb-white);
    position: relative;
    transition: background var(--bb-dur-1) var(--bb-ease), border-color var(--bb-dur-1) var(--bb-ease), color var(--bb-dur-1) var(--bb-ease);
}

.multi-pill:hover {
    background: var(--bb-gray-50);
}

.multi-pill.has-active {
    background: var(--tint);
    border-color: var(--series-color);
}

.pill-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 9px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--bb-gray-500);
    white-space: nowrap;
    user-select: none;
}

.pill-label:focus {
    outline: none;
}

.pill-label:focus-visible {
    outline: 2px solid var(--bb-focus-ring);
    outline-offset: 1px;
    border-radius: 5px;
}

.pill-label input[type="checkbox"] {
    display: none;
}

.multi-pill.has-active .pill-label {
    color: var(--series-color);
}

.pill-label .swatch {
    width: 16px;
    height: 2.5px;
    border-radius: 1px;
    background: var(--bb-gray-300);
    flex-shrink: 0;
}

.multi-pill.has-active .pill-label .swatch {
    background: var(--series-color);
}

.pill-label .active-count {
    font-size: 11px;
    font-weight: 600;
    background: var(--series-color);
    color: var(--bb-white);
    border-radius: 3px;
    padding: 0 4px;
    min-width: 16px;
    text-align: center;
    line-height: 16px;
    display: none;
}

.multi-pill.has-active .pill-label .active-count {
    display: inline-block;
}

/* No badge for the default single (median) line — only when extra bands are on. */
.multi-pill.has-active .pill-label .active-count:empty {
    display: none;
}

.pill-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 7px 4px 4px;
    border: none;
    border-left: 1px solid var(--bb-border);
    background: transparent;
    cursor: pointer;
    color: var(--bb-gray-400);
    font-size: 8px;
    transition: transform var(--bb-dur-2) var(--bb-ease), color var(--bb-dur-1) var(--bb-ease);
}

.multi-pill.has-active .pill-chevron {
    border-left-color: color-mix(in srgb, var(--series-color) 30%, transparent);
    color: var(--series-color);
}

.pill-chevron:hover {
    background: rgba(0, 0, 0, 0.04);
}

.pill-chevron:focus {
    outline: none;
}

.pill-chevron:focus-visible {
    outline: 2px solid var(--bb-focus-ring);
    outline-offset: 1px;
    background: var(--bb-sky-dim);
}

.multi-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--bb-white);
    border-radius: var(--bb-radius-sm);
    box-shadow: var(--bb-shadow-md), 0 0 0 1px var(--bb-border);
    z-index: 200;
    overflow: hidden;
    min-width: 140px;
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
    transition: opacity var(--bb-dur-2) var(--bb-ease), transform var(--bb-dur-2) var(--bb-ease-entrance), visibility var(--bb-dur-2);
}

.multi-pill.is-open .multi-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.multi-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: var(--bb-white);
    cursor: pointer;
    font-family: var(--bb-font-body);
    font-size: 12px;
    font-weight: 400;
    color: var(--bb-gray-500);
    text-align: left;
    transition: background 0.1s ease;
}

.multi-option input[type="checkbox"] {
    display: none;
}

.multi-option:hover {
    background: var(--bb-gray-50);
}

/* Hint shown only inside the WAC/AWP menus while in compare view. */
.multi-hint {
    display: none;
    padding: 7px 12px;
    border-top: 1px solid var(--bb-gray-100);
    font-size: 11px;
    line-height: 1.35;
    color: var(--bb-gray-400);
}

body.cr-compare-on .multi-hint {
    display: block;
}

.multi-option .check-box {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1.5px solid var(--bb-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--bb-dur-1) var(--bb-ease), border-color var(--bb-dur-1) var(--bb-ease);
}

.multi-option .check-box svg {
    width: 9px;
    height: 9px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.multi-option.checked .check-box {
    background: var(--series-color);
    border-color: var(--series-color);
}

.multi-option.checked .check-box svg {
    opacity: 1;
}

.multi-option.checked {
    font-weight: 600;
    color: var(--series-color);
}

.filter-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.filter-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--bb-gray-500);
    white-space: nowrap;
    margin-right: 2px;
}

.filter-arrow {
    color: var(--bb-gray-300);
    font-size: 11px;
    padding: 0 2px;
}

.filter-select {
    font-family: var(--bb-font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-navy);
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    padding: 3px 22px 3px 8px;
    background: var(--bb-white);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238a9db5' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    outline: none;
}

.filter-select:hover {
    border-color: var(--bb-border-strong);
}

.filter-select:focus {
    border-color: var(--bb-navy);
}

.cr-units-input {
    width: 54px;
    font-family: var(--bb-font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-navy);
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    padding: 3px 4px;
    text-align: center;
    outline: none;
}

.cr-units-input:hover {
    border-color: var(--bb-border-strong);
}

.cr-units-input:focus {
    border-color: var(--bb-navy);
}

/* ---------------- Chart body, empty state, gate ---------------- */

.cr-chart-body {
    position: relative;
    min-height: 420px;
}

.cr-chart {
    min-height: 396px;
}

.cr-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    color: var(--bb-gray-500);
    font-size: 14px;
}

.cr-chart-watermark {
    width: 55%;
    max-width: 440px;
    height: auto;
    opacity: 0.5;
    margin-bottom: 14px;
}

.cr-chart-empty-text {
    max-width: 520px;
}

.cr-chart-gate {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(234, 243, 250, 0.75) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 80;
    padding: 18px;
    text-align: center;
}

.cr-chart-gate[aria-hidden="false"] {
    display: flex;
}

.cr-chart-gate-box {
    position: relative;
    width: min(520px, calc(100% - 20px));
    background: var(--bb-white);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    border-top: 2px solid var(--bb-navy);
    padding: 30px 32px 26px;
    box-shadow: var(--bb-shadow-xl);
    text-align: center;
    overflow: hidden;
}

.cr-chart-gate-logo {
    display: block;
    margin: 0 auto 16px;
    width: 200px;
    max-width: 70%;
    height: auto;
}

.cr-chart-gate-text {
    font-family: var(--bb-font-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--bb-text-strong);
    margin: 0;
}

.cr-chart-gate-sub {
    font-family: var(--bb-font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--bb-gray-500);
    margin: 8px auto 0;
    max-width: 400px;
}

.cr-chart-gate-note {
    font-family: var(--bb-font-body);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--bb-gray-400);
    margin-top: 14px;
}

.cr-chart-gate-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.cr-chart-gate-actions a.cr-btn,
.cr-chart-gate-actions a.cr-btn-secondary,
.cr-pro-modal-actions a.cr-btn,
.cr-pro-modal-actions a.cr-btn-secondary {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-width: 170px;
}

.cr-chart-gate-actions a:hover,
.cr-chart-gate-actions a:focus,
.cr-pro-modal-actions a:hover,
.cr-pro-modal-actions a:focus {
    text-decoration: none;
}

.cr-pro-modal-actions a.cr-btn,
.cr-pro-modal-actions a.cr-btn-secondary {
    min-width: 190px;
}

/* Teaser mode: the chart plots synthetic sample curves with masked axis
   values, so the lines stay crisp behind the gate card (only the card's own
   backdrop-filter softens what's directly beneath it). Tooltips are disabled
   in the ECharts option; pointer-events here is belt-and-braces. The legend
   stays interactive — it holds catalog names, not pricing. */
.cr-no-access.cr-has-selection #cr-chart {
    pointer-events: none;
    user-select: none;
}

/* Tiled SAMPLE DATA watermark over the teaser plot, so the synthetic curves
   can never be mistaken for real prices even if the gate card's note goes
   unread. Sits under the gate card (z 80) and only appears once a selection
   has drawn lines. */
.cr-no-access.cr-has-selection .cr-chart-body::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 60;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='180'><text x='140' y='90' font-family='Inter, sans-serif' font-size='18' font-weight='600' letter-spacing='2' fill='rgba(90, 112, 128, 0.28)' text-anchor='middle' transform='rotate(-18 140 90)'>SAMPLE DATA</text></svg>");
}

/* ---------------- Selected Drugs table ---------------- */

.cr-selected {
    margin-top: 14px;
    background: var(--bb-white);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    box-shadow: var(--bb-shadow-sm);
    padding: 16px 20px 18px;
}

.cr-selected-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* Title + the shared "per HCPCS unit" qualifier (stated once here instead
   of repeated on every WAC/AWP column header) */
.cr-selected-title-wrap {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.cr-selected-caption {
    font-family: var(--bb-font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--bb-gray-400);
}

.cr-selected-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cr-pdf-btn {
    height: 34px;
    font-size: 12px;
}

.cr-pdf-btn[disabled] {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.cr-selected .cr-section-title {
    font-family: var(--bb-font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--bb-navy);
    text-transform: none;
    margin: 0;
}

.cr-selected .cr-section-title.cr-sidebar-heading {
    display: block;
}

.cr-selected .cr-section-title.cr-sidebar-heading::before {
    display: none;
}

.cr-selected-header #cr-asof {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bb-sky-dim);
    border: 0;
    background: var(--bb-soft);
    border-radius: var(--bb-radius-xs);
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--bb-gray-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-top: 0;
}

.cr-table-wrap {
    width: 100%;
    display: block;
    position: relative;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
}

.cr-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
}

.cr-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    /* Collapsed (median-only) view fits without a horizontal scroll; the
       wrapper scrolls when the WAC/AWP detail columns are expanded. */
    min-width: 0;
}

/* WAC/AWP detail columns — collapsed by default, revealed by the
   "Show WAC / AWP detail" toggle. Kept in the DOM (display toggled) so
   the nth-child alignment rules and sort-column indices stay stable. */
.cr-col-wac-ext,
.cr-col-awp-ext {
    display: none;
}

.cr-table.cr-show-detail .cr-col-wac-ext,
.cr-table.cr-show-detail .cr-col-awp-ext {
    display: table-cell;
}

/* Toggle button: a compact chevron that flips when expanded */
.cr-detail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cr-detail-toggle-chev {
    font-size: 9px;
    line-height: 1;
    transition: transform var(--bb-transition-fast);
}

.cr-detail-toggle[aria-expanded="true"] .cr-detail-toggle-chev {
    transform: rotate(180deg);
}

/* Light header row: small uppercase gray labels over a 2px navy rule */
.cr-table th {
    position: relative;
    z-index: 60;
    background: var(--bb-white);
    color: var(--bb-gray-500);
    font-family: var(--bb-font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    white-space: normal;
    line-height: 1.25;
    vertical-align: top;
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid var(--bb-navy);
}

.cr-table thead {
    position: relative;
    z-index: 60;
}

.cr-table th.cr-th-sortable {
    cursor: pointer;
    user-select: none;
}

.cr-table th.cr-th-sortable:hover {
    background: var(--bb-gray-50);
    color: var(--bb-navy);
}

.cr-table th .cr-sort-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    color: var(--bb-navy);
}

.cr-table td {
    position: relative;
    z-index: 1;
    padding: 8px 10px;
    text-align: center;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--bb-text-strong);
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--bb-gray-100);
    border-right: 1px solid var(--bb-gray-100);
}

.cr-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Small vertical dividers between columns; the last column has no
   trailing divider. */
.cr-table th {
    border-right: 1px solid var(--bb-soft);
}

.cr-table th:last-child,
.cr-table td:last-child {
    border-right: 0;
}

/* Empty state — shown in the table body when no drugs are selected. Hide
   the column header, and drop the table to block layout so the single
   placeholder cell spans the full card width instead of collapsing to a
   column. */
.cr-selected .cr-table.cr-table-empty {
    display: block;
    min-width: 0;
}

.cr-selected .cr-table.cr-table-empty thead {
    display: none;
}

.cr-selected .cr-table.cr-table-empty tbody,
.cr-selected .cr-table.cr-table-empty .cr-table-empty-row,
.cr-selected .cr-table.cr-table-empty .cr-table-empty-row td {
    display: block;
    width: 100%;
}

/* Selector is specific enough to override the sticky first-column rules. */
.cr-selected .cr-table .cr-table-empty-row td {
    position: static;
    background: var(--bb-white);
    border: 0;
    box-shadow: none;
    padding: 0;
    white-space: normal;
    left: auto;
    z-index: 1;
}

.cr-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 46px 20px;
}

.cr-table-empty-icon {
    color: var(--bb-gray-300);
    margin-bottom: 12px;
}

.cr-table-empty-title {
    font-family: var(--bb-font-display);
    font-size: var(--fs-title);
    font-weight: 600;
    color: var(--bb-gray-700);
}

.cr-table-empty-sub {
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--bb-gray-500);
    max-width: 380px;
    margin-top: 4px;
}

/* Alternating white / very-light rows */
.cr-table tbody tr:nth-child(even) td {
    background: var(--bb-gray-50);
}

.cr-table tbody tr:nth-child(odd) td {
    background: var(--bb-white);
}

.cr-table tbody tr:hover td {
    background: var(--bb-sky-dim);
}

/* Sticky lead column (HCPCS code) */
.cr-table th:first-child,
.cr-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 70;
}

.cr-table td:first-child {
    z-index: 5;
    font-weight: 600;
    color: var(--bb-navy);
    box-shadow: inset -1px 0 0 var(--bb-border);
}

.cr-table th:first-child {
    box-shadow: inset -1px 0 0 var(--bb-border);
}

.cr-selected .cr-table th,
.cr-selected .cr-table td {
    min-width: 100px;
}

.cr-selected .cr-table th:nth-child(3),
.cr-selected .cr-table td:nth-child(3) {
    min-width: 300px;
    width: 300px;
    max-width: 520px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.cr-selected .cr-table td:nth-child(3) {
    color: var(--bb-gray-500);
    font-size: 12px;
    line-height: 1.45;
}

.cr-selected .cr-table th:last-child,
.cr-selected .cr-table td:last-child {
    min-width: 120px;
    width: 120px;
}

/* Currency columns read right-aligned — headers included. The header rule was
   missing, so every numeric column sat centred above right-aligned values and
   the table had no common edge to read down. */
.cr-selected .cr-table:not(.cr-cmp-table) td:nth-child(n+4):not(:nth-child(9)):not(:nth-child(13)):not(:last-child),
.cr-selected .cr-table:not(.cr-cmp-table) th:nth-child(n+4):not(:nth-child(9)):not(:nth-child(13)):not(:last-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The compare table aligns by column identity, not position. The positional
   rule above is written for the CLASSIC table's column order, where 9 and 13
   are the WAC/AWP effective-date columns; in the compare table those positions
   are Median WAC and Highest AWP, so those two currency columns were being
   centred while every other one was right-aligned. */
.cr-cmp-table thead th:not(.cr-cmp-left):not(.cr-cmp-pinth):not(:last-child),
.cr-cmp-table tbody td:not(.cr-cmp-left):not(.cr-cmp-pincell):not(:last-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Two-word benchmark labels broke across lines ("MEDIAN" / "WAC ?"), which made
   the header row taller than its neighbours and ragged against them. */
.cr-cmp-table thead th {
    white-space: nowrap;
}

/* Header tooltip dots sit at the top-right of their th */
/* The help badge sits inline after its label. It used to be lifted out of flow
   and pinned to the cell's top-right corner, where it landed on top of the
   label text — worst on the right-aligned numeric columns, whose labels reach
   that corner. In flow it can't collide with anything. */
.cr-table th .cr-tooltip {
    position: relative;
    z-index: 40;
    text-transform: none;
    letter-spacing: normal;
    vertical-align: middle;
    margin-left: 6px;
    transform: scale(0.85);
    transform-origin: center;
}

.cr-selected .cr-table th {
    padding-top: 9px;
    padding-bottom: 9px;
}

.cr-table th .cr-tooltip::after {
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--bb-font-body);
    z-index: 600;
    display: none;
}

/* :not(:last-child) — the last column is the Remove button in both the
   classic and compare tables; it must stay legible and clickable in teaser
   mode. */
.cr-no-access .cr-table tbody td:nth-child(n+4):not(:last-child),
/* The compare table's trend column (td 3) draws a sparkline from the same
   synthetic series — hide it with the rest of the locked cells in teaser. */
.cr-no-access .cr-cmp-table tbody td:nth-child(3) {
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
}

.cr-action-btn {
    border: 1px solid var(--bb-border-strong);
    background: var(--bb-white);
    color: var(--bb-navy);
    border-radius: var(--bb-radius-sm);
    height: 28px;
    padding: 0 10px;
    font-family: var(--bb-font-body);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.cr-action-btn:hover {
    background: var(--bb-gray-50);
    border-color: var(--bb-gray-400);
}

/* ---------------- Modals ---------------- */

.cr-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
}

.cr-modal[aria-hidden="false"] {
    display: block;
}

.cr-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 20, 45, 0.62);
}

/* The modal itself scrolls as a last resort, so a dialog that outgrows its cap
   (very small viewport, huge zoom) can still be reached rather than running off
   the bottom of the screen unreachable. */
.cr-modal[aria-hidden="false"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cr-modal-dialog {
    position: relative;
    /* This sheet has no global border-box, and max-height caps the CONTENT box:
       as content-box the dialog's 64px of vertical padding was added on top of
       the cap, so it still overflowed the viewport by exactly that much. */
    box-sizing: border-box;
    width: min(680px, calc(100vw - 32px));
    /* Was `margin: 160px auto 0` with no height cap: a long list simply ran off
       the bottom of the viewport with nothing to scroll. Now the dialog can
       never exceed the screen, and its list scrolls inside instead. */
    margin: min(160px, 6vh) auto max(24px, 6vh);
    max-height: calc(100vh - min(160px, 6vh) - max(24px, 6vh));
    display: flex;
    flex-direction: column;
    background: var(--bb-white);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    padding: 30px 32px;
    padding-top: 34px;
    box-shadow: var(--bb-shadow-xl);
}

.cr-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: var(--bb-radius-sm);
    border: 1px solid var(--bb-border);
    background: var(--bb-white);
    color: var(--bb-gray-500);
    cursor: pointer;
    line-height: 1;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--bb-transition-fast), color var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.cr-modal-close:hover {
    background: var(--bb-gray-50);
    color: var(--bb-text-strong);
    border-color: var(--bb-border-strong);
}

.cr-modal-title {
    margin: 0 36px 8px 0;
    font-family: var(--bb-font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bb-text-strong);
    text-transform: none;
}

.cr-modal-title.cr-sidebar-heading {
    display: block;
}

.cr-modal-title.cr-sidebar-heading::before {
    display: none;
}

#cr-pro-modal .cr-modal-title {
    margin-right: 0;
    text-align: center;
    font-size: 20px;
    line-height: 1.2;
}

.cr-modal-sub {
    color: var(--bb-gray-500);
    font-size: var(--fs-body);
    line-height: 1.55;
    margin-bottom: 16px;
}

.cr-modal-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cr-modal-input {
    flex: 1;
    height: 38px;
    border-radius: var(--bb-radius-sm);
    border: 1px solid var(--bb-border-strong);
    padding: 0 12px;
    font-family: var(--bb-font-body);
    font-size: var(--fs-body);
    background: var(--bb-gray-50);
    outline: none;
}

.cr-modal-input:focus {
    border-color: var(--bb-navy);
    box-shadow: 0 0 0 3px var(--bb-sky-dim);
    background: var(--bb-white);
}

.cr-modal-submit {
    height: 38px;
    border-radius: var(--bb-radius-sm);
    border: 1px solid transparent;
    background: var(--bb-navy);
    color: var(--bb-white);
    font-family: var(--bb-font-body);
    font-weight: 600;
    font-size: var(--fs-body);
    padding: 0 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--bb-transition-fast);
}

.cr-modal-submit:hover {
    background: var(--bb-accent-hover);
}

.cr-modal-status {
    margin-top: 10px;
    min-height: 18px;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--bb-danger);
}

.cr-pro-modal-actions {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.cr-prebuilt-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
    transition: opacity var(--bb-transition-fast);
}

/* While a search is active it spans every category, so the tabs aren't
   scoping anything — dim them to say so. */
.cr-prebuilt-tabs.is-muted {
    opacity: 0.45;
}

.cr-prebuilt-tab {
    padding: 5px 12px;
    border: 1px solid var(--bb-border-strong);
    border-radius: var(--bb-radius-sm);
    background: var(--bb-white);
    color: var(--bb-gray-500);
    font-family: var(--bb-font-body);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--bb-transition-fast), color var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

.cr-prebuilt-tab:hover {
    border-color: var(--bb-navy);
    color: var(--bb-navy);
}

.cr-prebuilt-tab.is-active {
    background: var(--bb-navy);
    border-color: var(--bb-navy);
    color: var(--bb-white);
}

.cr-prebuilt-list {
    margin-top: 12px;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    overflow: auto;
    max-height: 420px;
    background: var(--bb-white);
}

.cr-prebuilt-item {
    position: relative;
    width: 100%;
    /* Row is a <div> now (was a <button>, which defaulted to border-box);
       without this the 14px side padding is added to width:100% and the row
       overflows the list, clipping the "load ›" hint. */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    padding: 10px 14px;
    background: var(--bb-white);
    border: 0;
    border-bottom: 1px solid var(--bb-gray-100);
    cursor: pointer;
    font-family: var(--bb-font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--bb-text-strong);
    transition: background var(--bb-transition-fast), color var(--bb-transition-fast);
}

.cr-prebuilt-item:last-child {
    border-bottom: 0;
}

.cr-prebuilt-item:hover {
    background: var(--bb-sky-dim);
    color: var(--bb-navy);
}

/* A ticked group stays tinted so multi-select is visible while scrolling. */
.cr-prebuilt-item.is-checked {
    background: var(--bb-sky-dim);
}

.cr-prebuilt-check {
    flex-shrink: 0;
    align-self: center;
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--bb-navy);
    cursor: pointer;
}

/* The load target within a row: fills the space beside the checkbox and keeps
   the name/hint layout the row used to own directly. */
.cr-prebuilt-item-load {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* Name and count travel together on the left so the eye doesn't have to
   jump across the modal; the right side states what a click does. */
.cr-prebuilt-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cr-prebuilt-item-name {
    min-width: 0;
    /* Some class values are long (compound pharmacologic labels, verbose
       indications); keep rows scannable instead of letting one entry
       swallow the list. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.cr-prebuilt-item-count {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--bb-gray-500);
    white-space: nowrap;
    background: var(--bb-gray-100);
    border-radius: var(--bb-radius-xs);
    padding: 2px 7px;
    font-variant-numeric: tabular-nums;
}

.cr-prebuilt-item-hint {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--bb-gray-500);
    white-space: nowrap;
    /* Faintly visible at rest so every row reads as actionable, not just on
       hover; brightens to navy on hover/focus. */
    opacity: 0.4;
    transition: opacity var(--bb-transition-fast), color var(--bb-transition-fast);
}

/* Picking from a large group is a different interaction than an instant
   load — that hint stays fully visible. */
.cr-prebuilt-item-hint.is-picker {
    opacity: 1;
}

.cr-prebuilt-item:hover .cr-prebuilt-item-hint,
.cr-prebuilt-item:focus-visible .cr-prebuilt-item-hint {
    opacity: 1;
    color: var(--bb-navy);
}

/* Per-row loading spinner: shown in place of the hint while a group's codes
   are being fetched. */
.cr-prebuilt-item-spin {
    flex-shrink: 0;
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid var(--bb-gray-200);
    border-top-color: var(--bb-navy);
    border-radius: 50%;
    animation: cr-prebuilt-spin 0.6s linear infinite;
}

.cr-prebuilt-item.is-loading {
    cursor: default;
}

.cr-prebuilt-item.is-loading .cr-prebuilt-item-hint {
    display: none;
}

.cr-prebuilt-item.is-loading .cr-prebuilt-item-spin {
    display: block;
}

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

@media (prefers-reduced-motion: reduce) {
    .cr-prebuilt-item-spin {
        animation-duration: 1.6s;
    }
}

.cr-prebuilt-section {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 7px 14px;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bb-gray-500);
    background: var(--bb-gray-50);
    border-bottom: 1px solid var(--bb-gray-100);
}

.cr-prebuilt-empty {
    padding: 16px 14px;
}

.cr-prebuilt-foot {
    margin-top: 8px;
    min-height: 16px;
    font-size: 12.5px;
}

/* Sticky action bar for multi-select: appears once one or more groups are
   ticked, offering to load the combined set (replacing or adding). */
.cr-prebuilt-multi {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    background: var(--bb-sky-dim);
}

.cr-prebuilt-multi[hidden] {
    display: none;
}

.cr-prebuilt-multi-count {
    font-size: 12.5px;
    font-weight: 600;
    min-width: 0;
}

.cr-prebuilt-multi-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cr-prebuilt-back {
    display: inline-block;
    margin-bottom: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bb-navy);
    font-family: var(--bb-font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cr-prebuilt-back:hover {
    text-decoration: underline;
}

.cr-prebuilt-drill-list {
    margin-top: 0;
}

.cr-prebuilt-drill-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--bb-gray-100);
    cursor: pointer;
    font-family: var(--bb-font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--bb-text-strong);
    transition: background var(--bb-transition-fast);
}

.cr-prebuilt-drill-item:last-child {
    border-bottom: 0;
}

.cr-prebuilt-drill-item:hover {
    background: var(--bb-sky-dim);
}

.cr-prebuilt-drill-item input[type="checkbox"] {
    flex-shrink: 0;
    align-self: center;
    accent-color: var(--bb-navy);
}

.cr-prebuilt-drill-item input[type="checkbox"]:disabled + .cr-prebuilt-item-name {
    color: var(--bb-gray-500);
    opacity: 0.6;
}

.cr-prebuilt-drill-item .cr-prebuilt-item-name {
    flex: 1;
}

.cr-prebuilt-drill-actions {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cr-prebuilt-drill-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cr-prebuilt-confirm-actions {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.cr-prebuilt-drill-actions button:disabled,
.cr-prebuilt-confirm-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tighter vertical rhythm inside this modal only: less air between the
   search box, status line, and list. */
#cr-prebuilt-modal .cr-modal-status {
    margin-top: 6px;
    min-height: 16px;
}

/* Inside a viewport-capped dialog the list should take whatever height is
   left rather than claim a fixed slice: with `max-height: 56vh` plus the
   dialog's own chrome the total could exceed the screen on a short viewport,
   which is how the list ended up running off the bottom.
   Both panes become flex columns so the header, tabs and search stay put and
   only the list scrolls. `min-height: 0` is required — without it a flex item
   refuses to shrink below its content and the cap does nothing. */
#cr-prebuilt-modal #cr-prebuilt-browse,
#cr-prebuilt-modal #cr-prebuilt-drill {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Everything except the list holds its natural height. Without this the tabs
   row is a shrinkable flex item and gets squashed below its content height on a
   short viewport, clipping the category tabs behind the search box. */
#cr-prebuilt-modal #cr-prebuilt-browse > *,
#cr-prebuilt-modal #cr-prebuilt-drill > * {
    flex: 0 0 auto;
}

/* The list is the one thing that flexes, and the one thing that scrolls.
   Selector must out-specify the `> *` rule above (two IDs), hence the child
   combinator rather than a bare descendant class. */
#cr-prebuilt-modal #cr-prebuilt-browse > .cr-prebuilt-list,
#cr-prebuilt-modal #cr-prebuilt-drill > .cr-prebuilt-list {
    margin-top: 6px;
    flex: 1 1 auto;
    min-height: 120px;
    max-height: none;
}

/* ---------------- Saved-reports help modal ---------------- */

.cr-help-lead {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--bb-gray-500);
    margin: 0;
}

.cr-help-section {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--bb-gray-100);
}

.cr-help-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--bb-font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--bb-navy);
    margin: 0 0 14px;
}

/* Small navy step badge that leads each section eyebrow */
.cr-help-eyebrow-badge {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: var(--bb-radius-pill);
    background: var(--bb-navy);
    color: var(--bb-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cr-help-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cr-help-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--bb-gray-700);
}

.cr-help-step-num {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: var(--bb-radius-pill);
    background: var(--bb-sky-dim);
    color: var(--bb-navy);
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cr-help-text {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--bb-gray-500);
    margin: 0 0 8px;
}

.cr-help-text:last-child {
    margin-bottom: 0;
}

.cr-help-note {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bb-gray-500);
    background: var(--bb-gray-50);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    padding: 11px 13px;
}

/* Inline reference chip for UI element names (buttons, dropdowns) */
.cr-help-ref {
    font-weight: 600;
    color: var(--bb-navy);
    background: var(--bb-sky-dim);
    padding: 1px 6px;
    border-radius: var(--bb-radius-xs);
    white-space: nowrap;
}

/* ---------------- Utility ---------------- */

.cr-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;
}

/* ============================================================
   Responsive — 1023 / 980 / 767, matching the drug-page
   breakpoints. Desktop (>1023) is the layout above.
   ============================================================ */

/* Sidebar collapse is a desktop-only affordance — on stacked layouts the
   sidebar sits above the content, where a rail makes no sense. */
@media (min-width: 1024px) {
    .cr-page.is-sidebar-collapsed {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .cr-page.is-sidebar-collapsed .cr-sidebar {
        padding: 12px 0;
        align-items: center;
    }

    .cr-page.is-sidebar-collapsed .cr-sidebar > *:not(.cr-sidebar-collapse) {
        display: none;
    }

    .cr-page.is-sidebar-collapsed .cr-sidebar-collapse {
        align-self: center;
        margin-bottom: 0;
        width: 28px;
        height: 28px;
        padding: 0;
        gap: 0;
        justify-content: center;
    }

    .cr-page.is-sidebar-collapsed .cr-sidebar-collapse-label {
        display: none;
    }

    .cr-page.is-sidebar-collapsed .cr-sidebar-collapse svg {
        transform: rotate(180deg);
    }
}

@media (max-width: 1023px) {
    .cr-page {
        grid-template-columns: 1fr;
    }

    .cr-sidebar-collapse {
        display: none;
    }

    .cr-sidebar {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--bb-border);
    }

    .cr-sidebar-scroll {
        overflow: visible;
        padding-right: 0;
    }

    /* Keep the code list bounded when the sidebar stacks */
    .cr-results-list {
        max-height: 320px;
        overflow-y: auto;
    }

    .cr-limit-toast {
        top: calc(var(--cr-header-offset) + 79px);
        width: min(400px, calc(100vw - 32px));
    }
}

@media (max-width: 980px) {
    .cr-benchmarks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 10px;
    }

    /* 2-up strip: only the second column keeps a hairline divider */
    .cr-benchmarks-grid .cr-benchmark-card:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }

    /* Vaccine strip: ASP (first child) is hidden, so the parity flips */
    .cr-benchmarks-grid.is-vaccine {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cr-benchmarks-grid.is-vaccine .cr-benchmark-card:nth-child(odd) {
        border-left: 1px solid var(--bb-soft);
        padding-left: 16px;
    }
    .cr-benchmarks-grid.is-vaccine .cr-benchmark-card:nth-child(even) {
        border-left: 0;
        padding-left: 0;
    }

    .cr-chart-body {
        min-height: 360px;
    }

    .cr-chart {
        min-height: 336px;
    }
}

@media (max-width: 767px) {
    .cr-main {
        padding: 12px;
    }

    .cr-sidebar {
        padding: 12px;
    }

    .cr-benchmarks-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 6px 14px 12px;
    }

    .cr-benchmarks-header {
        padding: 14px 14px 0;
    }

    /* Stacked strip: hairline between rows instead of columns */
    .cr-benchmarks-grid .cr-benchmark-card,
    .cr-benchmarks-grid .cr-benchmark-card:first-child {
        border-left: 0;
        padding: 9px 0 7px;
        border-top: 1px solid var(--bb-soft);
    }

    .cr-benchmarks-grid .cr-benchmark-card:first-child {
        border-top: 0;
    }
    .cr-benchmarks-grid.is-vaccine {
        grid-template-columns: 1fr;
    }
    .cr-benchmarks-grid.is-vaccine .cr-benchmark-card:nth-child(odd),
    .cr-benchmarks-grid.is-vaccine .cr-benchmark-card:nth-child(even) {
        border-left: 0;
        padding: 9px 0 7px;
    }
    .cr-benchmarks-grid.is-vaccine .cr-benchmark-card:nth-child(2) {
        border-top: 0;
    }

    .cr-kpi-value {
        font-size: 19px;
    }

    .controls-bar {
        padding: 10px 12px;
    }

    .controls-row {
        gap: 10px;
    }

    .row-label {
        width: 100%;
        min-width: 0;
    }

    .cr-chart-body {
        min-height: 300px;
    }

    .cr-chart {
        min-height: 276px;
    }

    .cr-selected {
        padding: 12px 14px 14px;
    }

    .cr-selected-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cr-table {
        min-width: 900px;
    }

    .cr-modal-dialog {
        margin: 80px auto 0;
        padding: 28px 20px 24px;
        padding-top: 52px;
    }

    .cr-modal-title {
        font-size: 17px;
    }

    .cr-modal-row {
        flex-wrap: wrap;
    }

    .cr-modal-submit {
        width: 100%;
    }
}

/* ================= Compare view (6+ drugs) ================= */

/* --- market summary strip (replaces the per-drug ASP tile carousel) --- */
.cr-mkt-strip {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 2px 0;
}

.cr-mkt-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 128px;
    padding: 2px 22px;
    border-left: 1px solid var(--bb-border);
}

.cr-mkt-stat:first-child {
    border-left: 0;
    padding-left: 4px;
}

.cr-mkt-k {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bb-text-muted);
    white-space: nowrap;
}

.cr-mkt-v {
    font-family: var(--bb-font-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--bb-text-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cr-mkt-s {
    font-size: 12px;
    color: var(--bb-gray-500);
    white-space: nowrap;
}

.cr-mkt-chip {
    display: inline-block;
    vertical-align: 3px;
    padding: 1px 6px;
    border-radius: var(--bb-radius-xs);
    background: var(--bb-danger-bg);
    color: var(--bb-danger);
    font-family: var(--bb-font-body);
    font-weight: 600;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* --- compare-view series legend ---
   One chip per drug on the chart, each a toggle for its own line. The chip IS
   the button: a nested "highlight" link made the row read as a status label
   with an action bolted on, rather than as a legend you click. */
.cr-hlchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: var(--bb-radius-sm);
    border: 1px solid var(--bb-border);
    background: var(--bb-white);
    font-family: var(--bb-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--bb-text-strong);
    cursor: pointer;
    transition: border-color var(--bb-transition-fast), background var(--bb-transition-fast), color var(--bb-transition-fast);
}

.cr-hlchip:hover {
    border-color: var(--bb-border-strong);
    background: var(--bb-gray-50);
}

.cr-hlchip:focus-visible {
    outline: 2px solid var(--bb-focus-ring);
    outline-offset: 2px;
}

.cr-hlchip-name {
    white-space: nowrap;
}

.cr-hlchip-sw {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Off chips carry a hollow ring in the drug's colour, not a filled dot: that
   line is grey on the chart right now, and a solid swatch would claim
   otherwise. The dimmed label matches the de-emphasised line. */
.cr-hlchip-off {
    background: var(--bb-gray-50);
    color: var(--bb-text-muted);
    font-weight: 500;
}

.cr-hlchip-off .cr-hlchip-sw {
    background: transparent;
    border: 2px solid currentColor;
}

.cr-hlchip-off:hover {
    color: var(--bb-text-body);
    background: var(--bb-white);
}

/* ---------------- Compare-view focus bar ----------------
   Sits between the chart controls and the plot. Explains the auto-muting that
   compare view applies on entry (and offers the way out), so greyed lines never
   read as a glitch. */
.cr-focus-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* No wrap on the bar itself: the message flexes and wraps internally so the
       actions stay pinned right instead of dropping to a ragged second row. */
    gap: 10px 16px;
    margin: 0 12px 2px;
    padding: 9px 12px;
    border: 1px solid var(--bb-border);
    border-left: 3px solid var(--bb-sky);
    border-radius: var(--bb-radius-sm);
    background: var(--bb-gray-50);
}

.cr-focus-bar[hidden] {
    display: none;
}

.cr-fb-msg {
    flex: 1 1 auto;
    font-size: var(--fs-body);
    color: var(--bb-text-strong);
    line-height: 1.45;
    min-width: 0;
}

.cr-fb-msg strong {
    font-weight: 600;
}

.cr-fb-sub {
    color: var(--bb-text-body);
}

.cr-fb-why {
    color: var(--bb-gray-500);
    font-style: italic;
}

.cr-fb-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cr-fb-btn {
    border: 1px solid var(--bb-border-strong);
    background: var(--bb-white);
    color: var(--bb-text-body);
    font-family: var(--bb-font-body);
    font-size: var(--fs-meta);
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 11px;
    border-radius: var(--bb-radius-xs);
    cursor: pointer;
    transition: background var(--bb-transition-fast), border-color var(--bb-transition-fast), color var(--bb-transition-fast);
}

.cr-fb-btn:hover {
    border-color: var(--bb-accent);
    color: var(--bb-accent);
}

.cr-fb-btn-primary {
    background: var(--bb-accent);
    border-color: var(--bb-accent);
    color: var(--bb-white);
}

.cr-fb-btn-primary:hover {
    background: var(--bb-accent-hover);
    border-color: var(--bb-accent-hover);
    color: var(--bb-white);
}

.cr-fb-btn:focus-visible {
    outline: 2px solid var(--bb-focus-ring);
    outline-offset: 2px;
}

@media (max-width: 860px) {
    .cr-focus-bar {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* --- compare table --- */
.cr-cmp-table tbody tr.cr-cmp-row {
    cursor: pointer;
    transition: background var(--bb-transition-fast);
}

.cr-cmp-table tbody tr.cr-cmp-row:hover {
    background: var(--bb-sky-dim);
}

.cr-cmp-table th.cr-cmp-left,
.cr-cmp-table td.cr-cmp-left {
    text-align: left;
}

.cr-cmp-pinth {
    width: 34px;
}

.cr-cmp-pincell {
    width: 34px;
    padding-right: 0;
}

/* Small-selection (2–5 drug) table: the swatch column is a per-line show/hide
   toggle, so it's tightened up and gets an eye affordance in the header. */
#cr-cmp-wrap:not(.cr-cmp-single) th.cr-cmp-pinth,
#cr-cmp-wrap:not(.cr-cmp-single) td.cr-cmp-pincell {
    width: 30px;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
}

.cr-cmp-toggle-hdr {
    display: inline-flex;
    color: var(--bb-text-muted);
    opacity: 0.7;
    line-height: 0;
}

.cr-cmp-toggle {
    width: 13px;
    height: 13px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--cr-dot, var(--bb-navy));
    background: var(--cr-dot, var(--bb-navy));
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-fast), background var(--bb-transition-fast);
}

.cr-cmp-toggle:hover {
    transform: scale(1.18);
    box-shadow: 0 0 0 3px var(--bb-sky-dim);
}

.cr-cmp-toggle:focus-visible {
    outline: 2px solid var(--bb-navy);
    outline-offset: 2px;
}

/* Hollow ring = line hidden; filled = line shown. */
.cr-cmp-toggle.is-off {
    background: transparent;
}

/* Grey out the hidden drug's data, but keep its toggle crisp so it reads as
   "click to bring the line back". */
/* `.cr-cmp-line-hidden` deliberately has no dimming rule.
   A drug sent to the chart's background is still fully in the table — its
   prices are just as real and just as readable. The swatch carries the chart
   state (filled = highlighted, hollow = background); dimming the whole row
   made the data look stale or unavailable, which it isn't. */

.cr-cmp-pin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--bb-border-strong);
    background: transparent;
    display: inline-block;
    vertical-align: middle;
    transition: border-color var(--bb-transition-fast), background var(--bb-transition-fast);
}

.cr-cmp-row:hover .cr-cmp-pin {
    border-color: var(--bb-navy);
}

.cr-cmp-row.cr-cmp-pinned .cr-cmp-pin {
    border-color: transparent;
    background: var(--cr-pin-color, var(--bb-navy));
}

.cr-cmp-name {
    font-weight: 600;
    color: var(--bb-text-strong);
}

.cr-cmp-code {
    font-size: 12px;
    font-weight: 500;
    color: var(--bb-text-muted);
    margin-left: 7px;
}

.cr-cmp-refbadge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: var(--bb-radius-xs);
    background: var(--bb-navy);
    color: var(--bb-white);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    vertical-align: 1px;
}

.cr-cmp-desc {
    font-size: 11.5px;
    color: var(--bb-text-muted);
    margin-top: 1px;
    max-width: 330px;
    white-space: normal;
    line-height: 1.35;
}

/* Fixed layout so the declared column widths actually stick — an auto table
   ignores width and sprawls the sparkline/pin columns by handing every column
   a share of the leftover space. Percentages keep it responsive; the drug
   column takes the lion's share and the sparkline fills a tidy ~12%. */
.cr-cmp-table {
    table-layout: fixed;
}

.cr-cmp-table th.cr-cmp-pinth { width: 3%; }
.cr-cmp-table th[data-cmp-sort="name"] { width: 20%; }   /* drug */
.cr-cmp-table th#cr-cmp-trend-th { width: 12%; }         /* ASP trend */
.cr-cmp-table th[data-cmp-sort="asp"] { width: 12%; }
.cr-cmp-table th[data-cmp-sort="delta"] { width: 10%; }
.cr-cmp-table th[data-cmp-sort="vsref"] { width: 10%; }
.cr-cmp-table th[data-cmp-sort="mpl"] { width: 9%; }
.cr-cmp-table th[data-cmp-sort="wac"] { width: 10%; }
.cr-cmp-table th[data-cmp-sort="awp"] { width: 10%; }
.cr-cmp-table thead th:last-child { width: 6%; }         /* Remove */

/* The sparkline fills the column's full width (the auto table gives this
   column more room than a fixed 150px SVG would use), so no width goes to
   waste. preserveAspectRatio="none" lets it stretch; the line keeps a
   constant 1.5px weight via vector-effect. */
.cr-cmp-spark-wrap {
    position: relative;
    display: block;
}

.cr-cmp-spark {
    display: block;
    width: 100%;
    height: 30px;
}

/* Round end-of-line dot: drawn in CSS (not SVG) so the sparkline's horizontal
   stretch can't squash it into an ellipse. */
.cr-cmp-spark-endcap {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bb-navy);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cr-cmp-spark-line {
    fill: none;
    stroke: #9dbdd2;
    stroke-width: 1.5;
}

.cr-cmp-spark-area {
    fill: var(--bb-sky-dim);
    stroke: none;
}

.cr-cmp-spark-dot {
    fill: var(--bb-navy);
}

.cr-cmp-sparknote {
    font-size: 10.5px;
    color: var(--bb-text-muted);
    white-space: nowrap;
}

.cr-cmp-aspcell {
    min-width: 150px;
}

.cr-cmp-barrow {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.cr-cmp-bartrack {
    display: block;
    width: 84px;
    height: 6px;
    border-radius: 4px;
    background: var(--bb-gray-100);
    overflow: hidden;
    /* Give up width when the ASP column is tight rather than overflowing the
       flex row's left edge — an 84px fixed bar + gap + value can exceed the
       12% column at narrower viewports, and with justify-content:flex-end the
       excess would otherwise spill into the neighbouring ASP-trend sparkline. */
    flex-shrink: 1;
    min-width: 0;
}

.cr-cmp-barfill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: #9dbdd2;
    min-width: 2px;
}

.cr-cmp-val {
    font-weight: 600;
    min-width: 58px;
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.cr-cmp-dim {
    color: var(--bb-text-muted);
    font-weight: 400;
}

.cr-cmp-delta {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--bb-radius-xs);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cr-cmp-delta-dn {
    background: var(--bb-danger-bg);
    color: var(--bb-danger);
}

.cr-cmp-delta-up {
    background: var(--bb-success-bg);
    color: var(--bb-success);
}

.cr-cmp-delta-na {
    background: var(--bb-gray-100);
    color: var(--bb-text-muted);
    font-weight: 500;
}

/* Moved, but not enough to round to a tenth of a percent — neutral, and
   distinct from cr-cmp-delta-na, which means no data at all. */
.cr-cmp-delta-flat {
    background: var(--bb-gray-100);
    color: var(--bb-gray-500);
}

.cr-cmp-vsref {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cr-cmp-x {
    color: var(--bb-text-muted);
    font-weight: 500;
}

.cr-cmp-nodata .cr-cmp-name,
.cr-cmp-nodata .cr-cmp-desc,
.cr-cmp-nodata td {
    color: var(--bb-text-muted);
}

/* Small-selection table (1–5 drugs): the swatch is a static color bullet keyed
   to the drug's classic-chart line, so the row isn't a clickable pin. */
.cr-cmp-row.cr-cmp-static {
    cursor: default;
}

.cr-cmp-table tbody tr.cr-cmp-row.cr-cmp-static:hover {
    background: transparent;
}

/* One drug selected: there's nothing to compare against, so the vs Ref column
   (and its REF badge / reference selector, handled in JS) drops out, and the
   swatch column — a row-to-line key — has no second row to distinguish. */
#cr-cmp-wrap.cr-cmp-single th[data-cmp-sort="vsref"],
#cr-cmp-wrap.cr-cmp-single td.cr-cmp-vsref,
#cr-cmp-wrap.cr-cmp-single th.cr-cmp-pinth,
#cr-cmp-wrap.cr-cmp-single td.cr-cmp-pincell {
    display: none;
}

/* No reference picked yet: the vs Ref column has nothing to compare against,
   so it stays hidden until the user selects a reference drug. */
#cr-cmp-wrap.cr-cmp-noref th[data-cmp-sort="vsref"],
#cr-cmp-wrap.cr-cmp-noref td.cr-cmp-vsref {
    display: none;
}

/* Lowest/Highest WAC & AWP columns — collapsed behind the chevrons on the
   Median WAC / Median AWP headers; kept in the DOM (display toggled) so the
   row template and sort keys stay stable. */
.cr-cmp-table .cr-cmp-ext {
    display: none;
    /* The table is table-layout: fixed — without a width the revealed
       columns get none of the budget and crush to zero. */
    width: 8%;
}

#cr-cmp-wrap.cr-cmp-wac-open .cr-cmp-ext-wac,
#cr-cmp-wrap.cr-cmp-awp-open .cr-cmp-ext-awp {
    display: table-cell;
}

/* An open detail group widens the table past its wrapper, which scrolls
   horizontally — same behavior as the classic table's detail view. */
#cr-cmp-wrap.cr-cmp-wac-open .cr-cmp-table,
#cr-cmp-wrap.cr-cmp-awp-open .cr-cmp-table {
    min-width: 1460px;
}

#cr-cmp-wrap.cr-cmp-wac-open.cr-cmp-awp-open .cr-cmp-table {
    min-width: 1640px;
}

/* Low/high read as supporting detail beside the median. */
.cr-cmp-table td.cr-cmp-ext {
    color: var(--bb-text-muted);
}

/* Header chevron that expands a benchmark group into its Lowest/Highest
   columns; points right when collapsed, rotates down when open. */
.cr-cmp-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    padding: 0;
    border: 0;
    border-radius: var(--bb-radius-xs);
    background: transparent;
    color: var(--bb-text-muted);
    cursor: pointer;
    vertical-align: -3px;
}

.cr-cmp-expand:hover {
    color: var(--bb-navy);
    background: var(--bb-sky-dim);
}

.cr-cmp-expand:focus-visible {
    outline: 2px solid var(--bb-navy);
    outline-offset: 1px;
}

.cr-cmp-expand-chev {
    display: flex;
    line-height: 0;
    transition: transform var(--bb-transition-fast);
}

.cr-cmp-expand[aria-expanded="true"] .cr-cmp-expand-chev {
    transform: rotate(90deg);
}

.cr-cmp-foot {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 10px 4px 2px;
    font-size: 12px;
    color: var(--bb-text-muted);
}

.cr-cmp-foot-dash {
    color: var(--bb-gray-500);
    font-weight: 600;
}

/* --- reference selector in the table header --- */
.cr-cmp-ref {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cr-cmp-ref-label {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bb-text-muted);
    white-space: nowrap;
}

.cr-cmp-ref .cr-select {
    max-width: 240px;
}

/* --- controls that stand down in compare view --- */
body.cr-compare-on .pill--ratio {
    opacity: 0.45;
    pointer-events: none;
}

/* Compare view plots a single line per drug, but any WAC/AWP variant
   (Median/Lowest/Highest) is fair game — keep the variant dropdowns open so
   users can graph Lowest/Highest, not just Median. The change handler
   radio-selects a single metric in compare mode, and the menu hint says so. */

/* ============================================================
   Microinteractions
   ------------------------------------------------------------
   Durations and curves come from docs/STYLE-GUIDE.md §5:
   120/180/240/340ms, standard cubic-bezier(.4,0,.2,1), entrances
   cubic-bezier(.16,1,.3,1), a sliding pill cubic-bezier(.34,1.35,.64,1).

   Two mechanisms, chosen deliberately:

   - **Transitions** for persistent controls (hover, :active, focus). Buttons,
     pills and segments live for the life of the page, so a transition on them
     actually runs.
   - **Entrance animations** for anything rebuilt with innerHTML — tiles, chips,
     table rows. This page re-renders ~46 places that way, and a transition on a
     freshly created node never fires: there is no previous value to animate
     from. An animation does.

   Entrances fill `backwards`, never `both`: a forwards fill keeps the last
   keyframe applied for the life of the page, and an animation origin outranks
   author rules, so a `transform: none` at 100% would silently cancel the
   :active press below.
   ============================================================ */

/* ---- Press feedback -------------------------------------------------
   One consistent gesture for every clickable control: a 1px settle. Longhand
   so it composes with (rather than fights) each component's own transition. */
.cr-btn,
.cr-btn-secondary,
.cr-fb-btn,
.cr-hlchip,
.cr-seg-btn,
.cr-bm-metric-opt,
.pill,
.multi-pill,
.cr-result,
.cr-modal-close,
.cr-sidebar-collapse,
.cr-cmp-toggle {
    transition-property: background, background-color, border-color, color, box-shadow, transform, opacity;
    transition-duration: var(--bb-dur-1);
    transition-timing-function: var(--bb-ease);
}

.cr-btn:active:not(:disabled),
.cr-btn-secondary:active:not(:disabled),
.cr-fb-btn:active,
.cr-hlchip:active,
.cr-seg-btn:active,
.cr-bm-metric-opt:active,
.pill:active,
.multi-pill:active,
.cr-result:active,
.cr-modal-close:active,
.cr-sidebar-collapse:active {
    transform: translateY(1px);
}

/* Round dot toggles read better shrinking than sinking. */
.cr-cmp-toggle:active {
    transform: scale(0.86);
}

/* ---- Segmented controls: sliding indicator --------------------------
   The navy block moves between options instead of blinking from one to the
   other. `.has-indicator` is added by JS only once it has measured a live
   active button, so with JS off (or before first paint) the original
   per-button background is still what renders. */
.cr-seg,
.cr-bm-metric-switch {
    position: relative;
    isolation: isolate;
}

.cr-seg::before,
.cr-bm-metric-switch::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--seg-w, 0px);
    transform: translateX(var(--seg-x, 0px));
    background: var(--bb-navy);
    border-radius: var(--bb-radius-xs);
    opacity: 0;
    pointer-events: none;
    transition:
        transform var(--bb-dur-3) var(--bb-ease-pill),
        width var(--bb-dur-3) var(--bb-ease-pill),
        opacity var(--bb-dur-1) var(--bb-ease);
}

.cr-seg.has-indicator::before,
.cr-bm-metric-switch.has-indicator::before {
    opacity: 1;
}

.cr-seg-btn,
.cr-bm-metric-opt {
    position: relative;
    z-index: 1;
}

/* The indicator now paints the active background, and the divider would draw
   a line straight across it. */
.cr-seg.has-indicator .cr-seg-btn.active,
.cr-bm-metric-switch.has-indicator .cr-bm-metric-opt.is-active {
    background: transparent;
}

.cr-seg.has-indicator .cr-seg-btn + .cr-seg-btn,
.cr-bm-metric-switch.has-indicator .cr-bm-metric-opt + .cr-bm-metric-opt {
    border-left-color: transparent;
}

/* Hovering the option you're already on shouldn't grey out the navy. */
.cr-seg.has-indicator .cr-seg-btn.active:hover,
.cr-bm-metric-switch.has-indicator .cr-bm-metric-opt.is-active:hover {
    background: transparent;
}

/* ---- Entrances ------------------------------------------------------ */
@keyframes cr-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cr-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cr-pop-in {
    from { opacity: 0; transform: translateY(2px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cr-dialog-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Benchmark tiles — the page's headline numbers, so they get the most
   deliberate entrance. Stagger caps at the sixth tile; beyond that the tail
   would outlast the read. */
.cr-benchmark-card {
    animation: cr-rise var(--bb-dur-3) var(--bb-ease-entrance) backwards;
}

.cr-benchmark-card:nth-child(2) { animation-delay: 35ms; }
.cr-benchmark-card:nth-child(3) { animation-delay: 70ms; }
.cr-benchmark-card:nth-child(4) { animation-delay: 105ms; }
.cr-benchmark-card:nth-child(5) { animation-delay: 140ms; }
.cr-benchmark-card:nth-child(n+6) { animation-delay: 175ms; }

/* Legend chips — quicker and flatter than the tiles: there can be 15, and they
   sit under the chart rather than at the top of the read. */
.cr-hlchip {
    animation: cr-pop-in var(--bb-dur-2) var(--bb-ease-entrance) backwards;
}

.cr-hlchip:nth-child(2) { animation-delay: 18ms; }
.cr-hlchip:nth-child(3) { animation-delay: 36ms; }
.cr-hlchip:nth-child(4) { animation-delay: 54ms; }
.cr-hlchip:nth-child(5) { animation-delay: 72ms; }
.cr-hlchip:nth-child(n+6) { animation-delay: 90ms; }

/* Table rows — opacity only. These re-render on every sort and metric change,
   and rows sliding on each of those would read as noise, not polish. */
.cr-cmp-row {
    animation: cr-fade var(--bb-dur-2) var(--bb-ease) backwards;
}

.cr-cmp-row:nth-child(2) { animation-delay: 14ms; }
.cr-cmp-row:nth-child(3) { animation-delay: 28ms; }
.cr-cmp-row:nth-child(4) { animation-delay: 42ms; }
.cr-cmp-row:nth-child(5) { animation-delay: 56ms; }
.cr-cmp-row:nth-child(n+6) { animation-delay: 70ms; }

/* The focus bar appears the moment compare view takes over — the one thing on
   the page that should announce itself. */
.cr-focus-bar {
    animation: cr-rise var(--bb-dur-3) var(--bb-ease-entrance) backwards;
}

/* Modals and the selection-limit toast flip `display`, so a transition has
   nothing to run on; an animation fires when they're shown. */
.cr-modal[aria-hidden="false"] .cr-modal-overlay {
    animation: cr-fade var(--bb-dur-2) var(--bb-ease) backwards;
}

.cr-modal[aria-hidden="false"] .cr-modal-dialog {
    animation: cr-dialog-in var(--bb-dur-3) var(--bb-ease-entrance) backwards;
}

.cr-limit-toast.is-visible {
    animation: cr-rise var(--bb-dur-3) var(--bb-ease-entrance) backwards;
}

/* ---- Reduced motion -------------------------------------------------
   Every default state above IS the finished state, so zeroing motion lands
   exactly where the animation would have. Kept last in the file so it wins. */
@media (prefers-reduced-motion: reduce) {
    .cr-benchmark-card,
    .cr-hlchip,
    .cr-cmp-row,
    .cr-focus-bar,
    .cr-limit-toast.is-visible,
    .cr-modal[aria-hidden="false"] .cr-modal-overlay,
    .cr-modal[aria-hidden="false"] .cr-modal-dialog {
        animation: none;
    }

    .cr-btn:active:not(:disabled),
    .cr-btn-secondary:active:not(:disabled),
    .cr-fb-btn:active,
    .cr-hlchip:active,
    .cr-seg-btn:active,
    .cr-bm-metric-opt:active,
    .pill:active,
    .multi-pill:active,
    .cr-result:active,
    .cr-modal-close:active,
    .cr-sidebar-collapse:active,
    .cr-cmp-toggle:active {
        transform: none;
    }

    .cr-seg::before,
    .cr-bm-metric-switch::before {
        transition: none;
    }

    /* Spinners stay — they signal "still working", which is information, not
       decoration — but slow enough not to strobe. */
    .cr-spin,
    .cr-prebuilt-item-spin {
        animation-duration: 1.6s;
    }
}