:root {
    --text-color: #000000;
    --main-color: #0091bc;
    --light-main-color: #cce9f2;
    --dark-main-color: #004366;
    --competitor-id-color: #FF4511;
    --competitor-remplan-color: #d33136;
    --dark-complementary-color: #BC2B00;
    --light-complementary-color: #FF9B7E;
    --dark-tertiary-color: #FA7098;
    --light-tertiary-color: #FDB8CC;
    --dark-second-tertiary-color: #faf070;
    --dark-grey-color: #999999;
    --light-grey-color: #E0E0E0;
    --diverging-neutral-color: #f4f4f4;
    --text-heading-color: #464646;
    /* Heading letter-spacing — now zero on all three lines. These used to carry a fractional
       compensation (title 1.7px, source 0.15px) so the DOM table heading would line up with the
       ECharts CANVAS chart heading beside it. That never held across browsers/displays: fractional
       letter-spacing renders differently per engine (sub-pixel letter-spacing is Blink-only; Safari
       rounds it differently) and per device pixel ratio, so a value tuned on one Retina Chrome drifted
       on Safari and on non-Retina displays. The real fix (Option 1, June 2026) renders chart headings
       as DOM too (installHtmlHeader), so heading and table now use the SAME natural tracking and match
       in every browser — no compensation needed. Kept as tokens (at 0) so the export path can find the
       lines. The html2canvas image export applies a tiny per-line nudge in onclone so word spaces do
       not collapse at exactly zero (see table_widget.html and compositeChartDownload). */
    --table-header-title-letter-spacing: 0;
    --table-header-subtitle-letter-spacing: 0;
    --table-header-source-letter-spacing: 0;
    /* Heading geometry shared by the ECharts canvas heading (createTitleConfig in charts_util.js
       reads these at load) and the HTML table heading (.table-header-* below). Single source of
       truth so the two surfaces can never drift apart — see style-guide §3.11. The gaps measure
       from the right edge of the accent bar to the start of each text line. */
    --heading-bar-width: 22px;
    --heading-title-gap: 8px;
    --heading-subtitle-gap: 9px;
    --heading-source-gap: 10px;
    --heading-title-font-size: 32px;
    --heading-title-line-height: 40px;
    --heading-subtitle-font-size: 16px;
    --heading-subtitle-line-height: 22px;
    --heading-source-font-size: 8px;
    --heading-source-line-height: 16px;
    /* Distance from a section bar to the content below it — for chart and table sections that is
       the accent-bar heading, which sits flush at the top of the content (chart titles render at
       top: 0; the table heading is the first in-flow element). Applied via .section-content-gap on
       every section collapse so the gap is identical across charts, tables, maps, and lists. */
    --section-heading-gap: 24px;
    --lga-color: #4C86F7;
    --sa1-color: #F74C86;
    --muted: #BBBBBB;
    --tooltip-highlight-color: rgba(0, 145, 188, 0.15);

    --text-primary: #000000;
    --text-muted: #6c757d;
    --text-on-dark: #ffffff;
    --areas-highlight-gold: #ffd700;

    --success: #198754;
    --success-bg: #d1e7dd;
    --success-text: #0f5132;
    --warning: #ffc107;
    --warning-bg: #fff3cd;
    --warning-text: #664d03;
    --danger: #dc3545;
    --danger-bg: #f8d7da;
    --danger-text: #842029;
    --info: #0dcaf0;
    --info-bg: #cff4fc;
    --info-text: #055160;

    --shadow-focus: 0 0 0 0.25rem rgba(0, 145, 188, 0.25);

    /* Tonal button — a quiet, brand-coloured solid action for workbench surfaces
       (style-guide §2.1). The middle rung between btn-primary (the one loud CTA)
       and btn-secondary (grey chrome): unmistakably a brand action, but it does
       not compete with the page's single loud primary. Dark-navy text on a
       light-cyan tint clears WCAG AA comfortably (~10:1). */
    --btn-tonal-bg: var(--light-main-color);
    --btn-tonal-text: var(--dark-main-color);
    --btn-tonal-hover-bg: #a8d9e8;
    --btn-tonal-active-bg: #8ccadf;

    --font-body: 1rem;
    --font-body-sm: 0.875rem;
    --font-body-xs: 0.75rem;
    --font-badge: 0.6rem;
    --font-heading-xl: 2rem;
    --font-heading-lg: 1.5rem;
    --font-heading-md: 1.25rem;
    --font-heading-sm: 1.125rem;

    /* Responsive Breakpoints */
    --desktop-breakpoint: 992px;

    /* Badge Colors */
    --badge-demo-color: var(--light-complementary-color);
    --badge-temporary-color: var(--light-complementary-color);
    --badge-development-color: var(--main-color);
    --badge-public-color: var(--main-color);
    --badge-internal-color: var(--main-color);
    --badge-active-color: var(--main-color);
    --badge-pending-color: var(--light-complementary-color);

    /* Badge Icons */
    --badge-demo-icon: "D";
    --badge-temporary-icon: "T";
    --badge-public-icon: "bi bi-globe";
    --badge-internal-icon: "bi bi-lock-fill";
    --badge-active-icon: "bi bi-patch-check-fill";
    --badge-pending-icon: "bi bi-patch-exclamation-fill";

    --badge-scenario-right-with-purpose: 200px;
    --badge-scenario-right-with-purpose-mobile: 155px;

    /* Responsive spacing */
    --block-spacing: 0.5rem;
}

html {
    font-size: 18px; /* looks better on small screens */
    color: var(--text-color);
}

a {
    color: var(--main-color);
}

a:hover {
    color: var(--dark-main-color);
}

/* START sticky footer desing */

html, body {
    height: 100%;
    margin: 0;
}

#page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content-wrap {
    flex: 1;
}

/* END sticky footer desing */

/* Larger screens */
@media (min-width: 1024px) {
    html {
        font-size: 18px; /* 18px = Bootstrap5 base size */
    }
}

.container-narrow {
    max-width: 500px;
}

.container-dataset {
    max-width: 750px;
}

.dataset-list .container-dataset {
    max-width: 500px;
}

.container-medium {
    max-width: 768px;
}

.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: var(--light-main-color) !important;
    white-space: nowrap;
    text-align: left;
}

.table {
    width: auto;
}

.data-table table tr:last-child {
    font-weight: bold;
}

.data-table.no-bold-last-row table tr:last-child {
    font-weight: normal;
}

.highlight-row {
    background-color: var(--light-complementary-color);
}

.map-container {
    position: relative;
    width: 100%;
    padding-bottom: 56%; /* 16:9 Aspect Ratio */
}

.leaflet-container { /* all maps */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

#map .leaflet-interactive:focus {
    outline: none; /* Remove the blue border */
}

body #map .leaflet-attribution-flag {
    display: none !important; /* hide the leaflet flag —no politcal messages on our platform */
}

.medium {
    font-size: 1rem;
}

.small {
    font-size: 0.75rem;
}

.extra-small {
    font-size: 0.5rem;
}

.title_tag {
    background-color: var(--main-color);
    font-size: 0.5rem;
    position: relative;
    top: -1rem;
}

/* Keeps the forecast/place name and its type pill on the same line — the pill must never wrap
   away from the place it labels. The title text before it (e.g. "Population of") still wraps. */
.title-place-tag {
    white-space: nowrap;
}

.title_tag.explainer-type-feature { background-color: #0091bc; }
.title_tag.explainer-type-concept { background-color: #BC2B00; }
.title_tag.explainer-type-glossary { background-color: #FA7098; }

.denden-role-tag {
    color: var(--text-on-dark);
    font-size: var(--font-badge);
    text-transform: uppercase;
    font-weight: 600;
    padding: 2px 6px;
    vertical-align: middle;
}
.denden-role-place_info { background-color: var(--main-color); }
.denden-role-council { background-color: var(--dark-main-color); }
.denden-role-external { background-color: var(--dark-tertiary-color); }
.denden-participants-bar { background-color: var(--main-color); }
.denden-pipeline-tag { background-color: var(--dark-complementary-color); color: var(--text-on-dark); }

.denden-competitor-product-tag {
    display: inline-block;
    background-color: var(--dark-tertiary-color);
    color: var(--text-on-dark);
    font-size: var(--font-badge);
    font-weight: 600;
    padding: 2px 6px;
    vertical-align: middle;
    margin-right: 0.25rem;
}
.denden-competitor-product-tag--id { background-color: var(--competitor-id-color); }
.denden-competitor-product-tag--remplan { background-color: var(--competitor-remplan-color); }

.denden-inline-edit-toggle {
    color: var(--dark-main-color);
    text-decoration: underline;
    margin-left: 0.25rem;
    vertical-align: baseline;
}
.denden-inline-edit-toggle:hover { text-decoration: none; }

.denden-pc-meta {
    margin: 0;
}
.denden-pc-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.15rem 0;
}
.denden-pc-meta-row dt {
    font-weight: normal;
    margin: 0;
    flex: 0 0 auto;
}
.denden-pc-meta-row dd {
    margin: 0;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.denden-inline-input { width: auto; }
.denden-inline-input[multiple] { min-width: 18rem; }

.denden-contact-status-pill {
    color: var(--text-on-dark);
    font-size: var(--font-badge);
    text-transform: uppercase;
    font-weight: 600;
    padding: 2px 6px;
    vertical-align: middle;
}
.denden-contact-status--established { background-color: var(--success); }
.denden-contact-status--undeliverable { background-color: var(--danger); }
.denden-contact-status--reached-out { background-color: var(--warning); color: var(--warning-text); }
.denden-contact-status--none { background-color: var(--dark-tertiary-color); }

.denden-departed-pill {
    color: var(--text-on-dark);
    font-size: var(--font-badge);
    text-transform: uppercase;
    font-weight: 600;
    padding: 2px 6px;
    vertical-align: middle;
    background-color: var(--dark-main-color);
}

.denden-do-not-contact-pill {
    color: var(--text-on-dark);
    font-size: var(--font-badge);
    text-transform: uppercase;
    font-weight: 600;
    padding: 2px 6px;
    vertical-align: middle;
    background-color: var(--danger);
}

.denden-freshness-dot {
    display: inline-block;
    margin-left: 0.3em;
    font-size: 0.8em;
    line-height: 1;
    cursor: default;
    border-radius: 50%;
    transition: box-shadow 120ms ease-in-out;
}
.denden-freshness-dot:hover {
    box-shadow: 0 0 0 0.15em var(--border-subtle);
}
.denden-freshness-dot:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.denden-freshness-dot--fresh { color: var(--success); }
.denden-freshness-dot--dated { color: var(--warning-text); }
.denden-freshness-dot--stale { color: var(--danger); }
@media (prefers-reduced-motion: no-preference) {
    @keyframes denden-claude-spin {
        to { transform: rotate(360deg); }
    }
    .denden-claude-spin {
        display: inline-block;
        animation: denden-claude-spin 1.2s linear infinite;
    }
}

.denden-timeline {
    position: relative;
    height: 32px;
    width: 100%;
    padding-right: 3rem;
}
.denden-timeline::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 3rem;
    height: 2px;
    background: var(--main-color);
    transform: translateY(-50%);
}
.denden-timeline-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 3rem;
}
.denden-timeline-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--main-color);
    cursor: help;
}
.denden-timeline-dot:hover {
    width: 16px;
    height: 16px;
    box-shadow: var(--shadow-focus);
}
.denden-timeline-now {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-body-xs);
    color: var(--main-color);
    font-weight: 600;
}

.denden-search-item {
    white-space: normal;
}
.denden-search-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.denden-search-results .denden-search-type-potential_customer {
    background-color: var(--main-color);
}
.denden-search-results .denden-search-type-person {
    background-color: var(--dark-main-color);
}

.denden-task-meta { font-size: var(--font-body-sm); color: var(--text-muted); margin-left: 8px; }
.denden-next-menu { min-width: 16rem; }
.denden-task-transitions-diagram { max-width: 100%; height: auto; cursor: zoom-in; }
.denden-prewrap { white-space: pre-wrap; }
.denden-task-notes { white-space: pre-wrap; }
.denden-task-history-current {
    padding-left: 8px;
    border-left: 3px solid var(--main-color);
    margin-left: -12px;
}
.denden-toast { z-index: 1080; transition: opacity 0.4s; }
.denden-toast.alert-danger { min-width: 18rem; }
.denden-lead-select { width: auto; }
.denden-council-type-select { width: auto; }
.denden-summary-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.denden-section-heading {
    font-size: var(--font-heading-md);
    font-weight: 500;
    margin-bottom: 8px;
}
.denden-subsection-heading {
    font-size: var(--font-body-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 16px;
    margin-bottom: 4px;
    font-weight: 600;
}
.denden-pc-status {
    display: inline-block;
    padding: 1px 8px;
    font-size: var(--font-badge);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 999px;
    font-weight: 600;
}
.denden-pc-status--active { background-color: var(--success-bg); color: var(--success-text); }
.denden-pc-status--waiting { background-color: var(--warning-bg); color: var(--warning-text); }
.denden-task-open-badge {
    display: inline-block;
    padding: 1px 8px;
    font-size: var(--font-badge);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 999px;
    background-color: var(--success-bg);
    color: var(--success-text);
    font-weight: 600;
}
.denden-task-type-badge {
    display: inline-block;
    padding: 1px 8px;
    font-size: var(--font-badge);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 999px;
    background-color: var(--light-main-color);
    color: var(--dark-main-color);
    font-weight: 600;
}
.denden-details-summary { cursor: pointer; }
.denden-details-summary:hover { text-decoration: underline; }
.denden-details-summary:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
    border-radius: 4px;
}
.denden-details-summary::marker { color: var(--text-muted); }
.denden-lightbox-img { max-width: 100%; max-height: 75vh; height: auto; display: block; margin: 0 auto; }
body.modal-open .popover { z-index: 1040; }
.denden-card-title-width { width: 14rem; }
.denden-past-council-badge { font-size: var(--font-badge); }
.denden-participants-progress { height: 4px; }

.badge-counter {
    background-color: var(--muted);
    color: #ffffff;
    padding: 0 0.5rem 0 0;
    margin-right: 0.25rem;
    white-space: nowrap;
    display: inline-block;
}

.badge-description {
    vertical-align: middle;
    background-color: var(--light-main-color);
    color: #111111;
    padding: 0.15rem;
    white-space: nowrap;
}

.progress-bar {
    height: 15px;
}

.hidden {
    display: none !important;
}

.responsive-images img {
    max-width: 100%;
    height: auto;
}

.small-superscript-icon {
    font-size: x-small;
    vertical-align: super;
}

.forecast-nav-bar {
    background-color: var(--dark-main-color);
}

.forecast-nav-bar .dropdown-menu {
    background-color: var(--dark-main-color);
}

.forecast-nav-bar .dropdown-item:hover {
    background-color: var(--main-color);
    color: #ffffff;
}

.forecast-nav-bar .nav-item,
.forecast-nav-bar .dropdown-item {
    color: var(--light-main-color);
}

.link-on-dark {
    color: var(--light-main-color);
}

.link-on-dark:hover,
.link-on-dark:focus {
    color: #ffffff;
}

.footer-acknowledgement {
    max-width: 50rem;
    margin: 0 auto;
    text-align: center;
}

.grouped_dropdown_item {
    padding-left: 2.5rem !important;
}

.forecast-nav-bar .nav-link {
    color: var(--light-main-color);
}

.forecast-nav-bar .nav-link:hover,
.forecast-nav-bar .nav-link:focus,
.forecast-nav-bar .nav-link:active {
    color: #ffffff;
}

.forecast-nav-bar .forecast-selector-item {
    flex-shrink: 0;
}

.forecast-nav-bar .forecast-selector-item .form-select {
    width: 9rem;
    min-width: 0;
    text-overflow: ellipsis;
}

.forecast-nav-bar .settings-cog {
    font-size: 1.15rem;
    line-height: 1;
}

.forecast-nav-bar .settings-cog::after {
    vertical-align: 0.15em;
}

.forecast-nav-bar .icon-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1rem;
    padding-right: 0.2rem;
}

.help_icon {
    color: var(--muted);
    cursor: pointer;
}

.company-name {
    color: var(--main-color);
    font-style: italic;
    font-family: "Calibri", sans-serif;
    font-size: 1.2em;
}

.pi-spinner {
    border: 4px solid var(--light-main-color); /* Lighter shade for the spinner background */
    border-top-color: var(--main-color); /* Main color for the spinner */
    animation: spin 1s linear infinite;
}

.hide-spinner {
    display: none !important; /* Ensure this rule takes precedence */
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.vertical-align-middle th,
.vertical-align-middle td {
    vertical-align: middle !important;
}

.hover-bg-light:hover {
    background-color: var(--bs-light) !important;
}

.chart {
    height: 500px;
}

.section-content-gap {
    margin-top: var(--section-heading-gap);
}

.comparison-chart,
.combo-chart,
.multi-series-chart,
.run-time-chart {
    height: 600px;
}

.choropleth-chart {
    height: 700px;
}

ul {
    list-style-type: square;
}

ul li::marker {
    color: var(--main-color);
}

.sorting-options ul,
#area_names ul {
    column-count: 1;
}

/* Forecast tree (Reddit-style expand/collapse) */
.forecast-list-page {
    max-width: 900px;
    --forecast-status-col-width: 7.5rem;
    --forecast-action-col-width: 15.625rem;
    --forecast-col-gap: 1.5rem;
    --forecast-tree-indent: 2.25rem;
    --forecast-tree-chevron-half: 0.925rem;
    --forecast-tree-radius: 0.25rem;
    --forecast-tree-transition: 0.15s ease;
    --tree-label-width: 12rem;
}

.forecast-section-heading h2 {
    margin-bottom: 0;
}

.forecast-tree {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.forecast-tree ul {
    list-style: none;
    margin: 0;
}

.forecast-tree li {
    list-style-type: none;
}

.forecast-tree details > summary {
    list-style: none;
}

.forecast-tree details > summary::-webkit-details-marker {
    display: none;
}

.forecast-tree-children {
    position: relative;
    padding-left: var(--forecast-tree-indent);
    margin-left: 0;
    cursor: pointer;
}

.forecast-tree-children > li {
    position: relative;
    cursor: auto;
}

.forecast-tree-children > li::before {
    content: '';
    position: absolute;
    left: calc(var(--forecast-tree-chevron-half) - var(--forecast-tree-indent) - 1px);
    top: 0;
    bottom: 0;
    border-left: 2px solid var(--dark-grey-color);
    pointer-events: none;
}

.forecast-tree-children > li:first-child::before {
    top: -0.5rem;
}

.forecast-tree-children > li:last-child::before {
    bottom: auto;
    height: 1rem;
}

.forecast-tree-children > li:first-child:last-child::before {
    top: -0.5rem;
    height: 1.5rem;
}

.forecast-tree-children > li::after {
    content: '';
    position: absolute;
    left: calc(var(--forecast-tree-chevron-half) - var(--forecast-tree-indent) - 1px);
    top: 1rem;
    width: calc(var(--forecast-tree-indent) - var(--forecast-tree-chevron-half) + 0.5rem - 1px);
    border-top: 2px solid var(--dark-grey-color);
    pointer-events: none;
}

.forecast-tree-children:hover > li::before,
.forecast-tree-children:hover > li::after {
    border-color: var(--main-color);
}

.forecast-tree-summary .forecast-status-combos {
    margin-right: calc(var(--forecast-action-col-width) + var(--forecast-col-gap) + 0.5rem) !important;
    justify-content: flex-end;
}

.forecast-tree > li > details > summary .forecast-tree-label {
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 0;
    width: var(--tree-label-width);
}

.forecast-tree > li > details > summary .forecast-status-combos,
.forecast-tree-children > li > details > summary .forecast-status-combos {
    margin-right: 0 !important;
    justify-content: flex-start;
}

.forecast-tree-children > li > details > summary .forecast-tree-label {
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 0;
    width: calc(var(--tree-label-width) - var(--forecast-tree-indent));
}

.forecast-status-combo {
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--light-grey-color);
    border-radius: var(--forecast-tree-radius);
    min-width: 5.5rem;
}

.forecast-tree-summary {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: var(--forecast-tree-radius);
    transition: background-color var(--forecast-tree-transition);
    list-style: none;
}

.forecast-tree-summary::-webkit-details-marker,
.forecast-tree-summary::marker {
    display: none;
    content: '';
}

.forecast-tree-summary:hover {
    background-color: var(--light-main-color);
}

.forecast-tree-summary:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.forecast-tree-toggle {
    display: inline-block;
    width: 0.85rem;
    text-align: center;
    color: var(--text-muted);
    transition: transform var(--forecast-tree-transition);
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1.5rem;
}

.forecast-tree-node[open] > .forecast-tree-summary .forecast-tree-toggle {
    transform: rotate(90deg);
}

.forecast-tree-node[open] > .forecast-tree-summary .forecast-status-combos {
    display: none !important;
}

.forecast-tree-label {
    flex-grow: 1;
}

.forecast-tree-leaf {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--forecast-tree-radius);
}

.forecast-tree-leaf:hover {
    background-color: var(--light-main-color);
}

.forecast-tree-leaf:focus-within {
    box-shadow: var(--shadow-focus);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .forecast-tree-summary,
    .forecast-tree-toggle {
        transition: none;
    }
}

/* 768px matches existing tablet breakpoint used elsewhere in base.css */
@media (min-width: 768px) {
    .sorting-options ul,
    #area_names ul {
        column-count: 2;
    }
}

/* 992px matches --desktop-breakpoint variable */
@media (min-width: 992px) {
    .sorting-options ul,
    #area_names ul {
        column-count: 3;
    }
}

ol li::marker {
    color: var(--text-color);
}

.slider::-webkit-slider-thumb {
    background: var(--main-color);
}

.slider::-moz-range-thumb {
    background: var(--main-color);
}

.slider::-ms-thumb {
    background: var(--main-color);
}

-webkit-slider-thumb:active {
    background-color: var(--light-main-color);
}

-webkit-slider-thumb,
.slider:focus::-webkit-slider-thumb,
.slider:focus::-moz-range-thumb,
.slider:focus::-ms-thumb {
    box-shadow: var(--light-main-color);
}

.pc-forecast, .pc-scenario, .pc-small-area-count {
    background-color: var(--light-main-color);
}

.pc-total-price {
    font-weight: bold;
}

/* View focus switcher dropdown */
.view-focus-switcher .dropdown-item.active {
    background-color: var(--main-color);
    color: #ffffff;
}

.view-focus-switcher .dropdown-item:hover {
    background-color: var(--main-color);
    color: #ffffff;
}

/* Equal width for Focus, Filter, and Explainer buttons when closed */
.filter-container .dropdown-toggle,
.view-focus-switcher > .dropdown-toggle,
.explainer-btn {
    min-width: 13rem;
    text-align: left;
}

/* Filter dropdown styles - used across different filter dropdowns */
.filter-container {
    margin-bottom: 1rem;
}

/* Dropdown menu items (active and hover states) */
.filter-container .dropdown-item.active,
.filter-container .dropdown-item:hover {
    background-color: var(--main-color);
    color: #ffffff;
}

/* Dropdown button when a filter is active */
.filter-container .dropdown-toggle.filter-active {
    background-color: var(--main-color);
    color: #ffffff;
    border-color: var(--main-color);
}

/* Dropdown button in hover and open states */
.filter-container .dropdown-toggle:hover,
.filter-container .dropdown-toggle.show {
    background-color: var(--main-color);
    color: #ffffff;
    border-color: var(--main-color);
}

/* Expand button to match dropdown width when open */
.filter-container .dropdown-toggle.show {
    min-width: 600px;
    text-align: left;
}

.filter-container .dropdown-toggle {
    color: var(--main-color);
    border-color: var(--main-color);
    padding-top: 0.05rem;
    padding-bottom: 0.05rem;
    text-align: left;
}

/* Hide default Bootstrap dropdown chevron */
.filter-container .dropdown-toggle::after {
    display: none;
}

/* Plus/dash icon toggle for filter */
.filter-container .dropdown-toggle .toggle-icon-dash {
    display: none;
}

.filter-container .dropdown-toggle.show .toggle-icon-plus {
    display: none;
}

.filter-container .dropdown-toggle.show .toggle-icon-dash {
    display: inline;
}

/* Ensure all list items have complete borders; otherwise, when filtered, border tops and bottoms are missing */
.dataset-list .list-group-item {
    border: 1px solid rgba(0, 0, 0, .125); /* Match Bootstrap's default border style */
}

.dataset-list .list-group-item .d-flex {
    flex-wrap: nowrap; /* Prevent badges from wrapping to new line */
}

.navbar-brand .logo-navbar {
    height: 35px;
    max-width: none;
}

.forecast-nav-bar .navbar-brand .logo-navbar {
    height: 33px;
}

/* Override Bootstrap 5 primary button colors using CSS variables */
.btn-primary {
    --bs-btn-bg: var(--main-color);
    --bs-btn-border-color: var(--main-color);
    --bs-btn-hover-bg: var(--dark-main-color);
    --bs-btn-hover-border-color: var(--dark-main-color);
    --bs-btn-active-bg: var(--dark-main-color);
    --bs-btn-active-border-color: var(--dark-main-color);
    --bs-btn-disabled-bg: var(--main-color);
    --bs-btn-disabled-border-color: var(--main-color);
}

.btn-outline-primary {
    --bs-btn-color: var(--main-color);
    --bs-btn-border-color: var(--main-color);
    --bs-btn-hover-bg: var(--main-color);
    --bs-btn-hover-border-color: var(--main-color);
    --bs-btn-active-bg: var(--main-color);
    --bs-btn-active-border-color: var(--main-color);
}

/* Tonal (quiet brand) button — see the --btn-tonal-* tokens and style-guide §2.1.
   Solid, brand-coloured, but quieter than .btn-primary so several can sit on a
   workbench page without competing with the one loud primary. */
.btn-tonal {
    --bs-btn-color: var(--btn-tonal-text);
    --bs-btn-bg: var(--btn-tonal-bg);
    --bs-btn-border-color: var(--btn-tonal-bg);
    --bs-btn-hover-color: var(--btn-tonal-text);
    --bs-btn-hover-bg: var(--btn-tonal-hover-bg);
    --bs-btn-hover-border-color: var(--btn-tonal-hover-bg);
    --bs-btn-active-color: var(--btn-tonal-text);
    --bs-btn-active-bg: var(--btn-tonal-active-bg);
    --bs-btn-active-border-color: var(--btn-tonal-active-bg);
    --bs-btn-disabled-color: var(--btn-tonal-text);
    --bs-btn-disabled-bg: var(--btn-tonal-bg);
    --bs-btn-disabled-border-color: var(--btn-tonal-bg);
    --bs-btn-focus-shadow-rgb: 0, 145, 188;
}

/* Override Bootstrap 5 radio button colors */
.form-check-input[type="radio"]:checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.form-check-input[type="radio"]:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 0.25rem rgba(0, 145, 188, 0.25); /* main-color with opacity */
}

/* Override Bootstrap 5 checkbox colors */
.form-check-input[type="checkbox"]:checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.form-check-input[type="checkbox"]:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 0.25rem rgba(0, 145, 188, 0.25); /* main-color with opacity */
}

/* Forecast Badge - Shared base style */
.forecast-badge {
    position: absolute;
    top: 0;
    border-radius: 0 0 8px 8px !important;
    z-index: 999;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 6px 10px !important;
    font-size: 16px !important;
    text-transform: uppercase;
}

/* Forecast Approval Badge */
.forecast-approval-badge {
    right: 20px;
}

.forecast-approval-badge.active {
    background-color: var(--light-main-color);
    color: var(--badge-active-color);
}

.forecast-approval-badge.pending {
    background-color: var(--light-main-color);
    color: var(--badge-pending-color);
}

.forecast-approval-badge i {
    font-size: 18px;
}

/* Forecast Access Badge */
.forecast-access-badge {
    right: 70px;
}

.forecast-access-badge.public {
    background-color: var(--light-main-color);
    color: var(--badge-public-color);
}

.forecast-access-badge.internal {
    background-color: var(--light-main-color);
    color: var(--badge-internal-color);
}

.forecast-access-badge i {
    font-size: 18px;
    margin-right: 2px;
}

/* Forecast Purpose Badge */
.forecast-purpose-badge {
    right: 120px;
    font-weight: bold;
    height: 30px;
    display: flex;
    align-items: center;
}

.forecast-purpose-badge.demonstration {
    background-color: var(--light-main-color);
    color: var(--badge-demo-color);
}

.forecast-purpose-badge.development {
    background-color: var(--light-main-color);
    color: var(--badge-development-color);
}

.forecast-purpose-badge.temporary {
    background-color: var(--light-main-color);
    color: var(--badge-temporary-color);
}

/* Forecast Scenario Badge */
.forecast-scenario-badge {
    right: 120px;
    text-transform: none;
    font-weight: bold;
    height: 30px;
    display: flex;
    align-items: center;
    background-color: var(--light-main-color);
    color: var(--main-color);
}

.forecast-purpose-badge ~ .forecast-scenario-badge {
    right: var(--badge-scenario-right-with-purpose);
}

.container:has(.forecast-badge) h1 {
    padding-top: 35px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .forecast-badge {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    .forecast-approval-badge {
        right: 10px;
    }

    .forecast-access-badge {
        right: 50px;
    }

    .forecast-purpose-badge,
    .forecast-scenario-badge {
        right: 90px;
        height: 24px;
    }

    .forecast-purpose-badge ~ .forecast-scenario-badge {
        right: var(--badge-scenario-right-with-purpose-mobile);
    }
}

/* Responsive block container for Wagtail content blocks */
.responsive-block-container {
    max-width: 100%;
}

@media (min-width: 992px) {
    :root {
        --block-spacing: 7rem;
    }

    .responsive-block-container {
        max-width: 50%;
    }

    .responsive-block-container.wide {
        max-width: 70%;
    }

    .responsive-block-container.first-block {
        max-width: 100%;
    }
}

/* Population Filter Widget Styles */
.age-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
}

.age-group-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.age-btn {
    padding: 2px 4px;
    font-size: 0.75rem;
    min-width: 32px;
    white-space: nowrap;
}

.age-group-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
    min-width: 58px !important;
    width: auto !important;
    white-space: nowrap;
}

.age-btn.active {
    background-color: var(--main-color);
    color: white;
    border-color: var(--main-color);
}

.age-btn:hover:not(.active) {
    background-color: var(--light-main-color);
    border-color: var(--main-color);
}

#ageGrid {
    transition: opacity 0.2s;
}

#ageGrid.disabled {
    opacity: 0.5;
}

.dw-section-disabled {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
    filter: grayscale(30%);
}

.filter-section-dw-occupancy,
.filter-section-dw-structure {
    transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.control-btn-container {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.control-btn {
    padding: 2px 12px;
    font-size: 0.7rem;
    min-width: 40px;
    font-weight: 500;
}

.control-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Sticky filter checkbox styling */
#make-filter-sticky:checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

#make-filter-sticky:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 145, 188, 0.25);
}

/* Dwelling sticky filter checkbox styling */
#dw-make-filter-sticky:checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

#dw-make-filter-sticky:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 145, 188, 0.25);
}

/* Small area filter styling */
.sa-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sa-btn,
.dw-sa-btn,
.ht-sa-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
    white-space: nowrap;
}

.sa-btn.active,
.dw-sa-btn.active,
.ht-sa-btn.active {
    background-color: var(--main-color);
    color: white;
    border-color: var(--main-color);
}

.sa-btn:hover:not(.active),
.dw-sa-btn:hover:not(.active),
.ht-sa-btn:hover:not(.active) {
    background-color: var(--light-main-color);
    border-color: var(--main-color);
}

.sa-btn.active:hover,
.dw-sa-btn.active:hover,
.ht-sa-btn.active:hover {
    background-color: var(--dark-main-color);
    border-color: var(--dark-main-color);
}

.ht-filter-dropdown-menu {
    min-width: 520px;
    position: relative;
}

.ht-filter-help-corner {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.ht-sa-specific-container {
    display: none;
}

.ht-sa-grid {
    max-height: 250px;
    overflow-y: auto;
}

.dropdown-detail-settings {
    min-width: 220px;
}

/* Small area filter map */
.sa-filter-map {
    width: 180px;
    min-width: 180px;
    height: 180px;
    border-radius: 4px;
    background: #ffffff;
}

.sa-map-area {
    fill: #ffffff;
    stroke: var(--main-color);
    stroke-width: 1;
    cursor: pointer;
    transition: fill 0.15s;
}

.sa-map-area:hover:not(.selected) {
    fill: var(--light-main-color);
}

.sa-map-area.selected:hover {
    fill: var(--dark-main-color);
}

.sa-map-area.hover:not(.selected) {
    fill: var(--light-main-color);
}

.sa-map-area.selected.hover {
    fill: var(--dark-main-color);
}

.sa-map-area.selected {
    fill: var(--main-color);
    stroke: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .sa-map-area {
        transition: none;
    }
}

.sa-btn.sa-hover-highlight:not(.active),
.dw-sa-btn.sa-hover-highlight:not(.active) {
    background-color: var(--light-main-color);
    border-color: var(--main-color);
}

.sa-btn.active.sa-hover-highlight,
.dw-sa-btn.active.sa-hover-highlight {
    background-color: var(--dark-main-color);
    border-color: var(--dark-main-color);
}

.filter-section-small-areas {
    border-top: 1px solid #dee2e6;
    padding-top: 0.75rem;
}

/* Year filter styling */
.year-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.year-btn {
    padding: 4px 6px;
    font-size: 0.75rem;
    min-width: 50px;
    white-space: nowrap;
}

.year-btn.active {
    background-color: var(--main-color);
    color: white;
    border-color: var(--main-color);
}

.year-btn:hover:not(.active) {
    background-color: var(--light-main-color);
    border-color: var(--main-color);
}

/* Dwelling year button styling */
.dw-year-btn {
    padding: 4px 6px;
    font-size: 0.75rem;
    min-width: 50px;
    white-space: nowrap;
}

.dw-year-btn.active {
    background-color: var(--main-color);
    color: white;
    border-color: var(--main-color);
}

.dw-year-btn:hover:not(.active) {
    background-color: var(--light-main-color);
    border-color: var(--main-color);
}

.year-range-container {
    margin: 8px 0;
    padding: 8px;
    background: transparent;
    border-radius: 4px;
}

.year-range-labels {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.year-range-slider {
    position: relative;
    width: 100%;
    height: 30px;
}

.year-range-slider input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    background: transparent;
    height: 30px;
}

.year-range-slider input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--main-color);
    cursor: pointer;
    margin-top: -6px;
}

.year-range-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 5px;
    background: #ddd;
    border-radius: 3px;
}

.year-range-slider input[type="range"]:last-child::-webkit-slider-runnable-track {
    background: transparent;
}

/* Filter sections - stacked vertically */
.filter-sections-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filter-section-age,
.filter-section-year {
    border-top: 1px solid #dee2e6;
    padding-top: 0.75rem;
}

/* Filter section fieldsets - remove default styling */
.filter-sections-row fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.filter-sections-row legend {
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 0.5rem;
}

/* Responsive filter dropdown */
@media (max-width: 768px) {
    .filter-container .dropdown-menu {
        min-width: auto !important;
        max-width: 100vw;
        width: 100vw;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        border-radius: 0;
        margin-top: 0.5rem;
    }

    .filter-container .dropdown-toggle.show {
        min-width: auto;
    }

    .filter-sections-row {
        flex-direction: column;
    }

    .age-grid,
    .year-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .age-group-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* Filter button text truncation */
.filter-container .dropdown-toggle {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Explainer button and section */
.explainer-btn {
    color: var(--main-color);
    border-color: var(--main-color);
    padding-top: 0.05rem;
    padding-bottom: 0.05rem;
}

.explainer-btn:hover {
    background-color: var(--main-color);
    color: #ffffff;
    border-color: var(--main-color);
}

.explainer-bar {
    margin-bottom: 0;
}

.explainer-bar .table-toggle-btn {
    padding-top: 0.16rem;
    padding-bottom: 0.16rem;
}

.explainer-bar .table-toggle-btn[aria-expanded="true"] {
    border-radius: 0.25rem 0 0 0.25rem;
}

.explainer-bar .chart-bar-download {
    margin: -1px -1px -1px 0;
}

[id^="explainer-"][id$="-collapse"].collapsing {
    transition: height 0.35s ease !important;
}

#view-mode, #edit-mode {
    transition: opacity 0.2s ease;
}

.explainer-panel {
    padding: 10px 0 0 0;
    margin-bottom: 3rem;
}

.explainer-panel h2 {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.2;
    color: var(--text-heading-color);
}

.explainer-panel p:last-child {
    margin-bottom: 0;
}

/* Secondary nav-bar — shared by library (`.explainer-nav-bar`) and denden (`.denden-nav-bar`). */
.explainer-nav-bar,
.denden-nav-bar {
    margin-bottom: 1rem;
}
.explainer-nav-bar { background-color: var(--light-main-color); }
.denden-nav-bar    { background-color: var(--light-tertiary-color); }

.explainer-nav-bar .container,
.denden-nav-bar .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.explainer-nav-bar .navbar-brand,
.denden-nav-bar .navbar-brand {
    font-family: "Calibri", sans-serif;
    font-size: 2rem;
    line-height: 1;
    color: var(--dark-main-color);
}
.explainer-nav-bar .navbar-brand:hover,
.denden-nav-bar .navbar-brand:hover {
    color: var(--dark-main-color);
}

.explainer-nav-link,
.denden-nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.25rem 0;
}
.explainer-nav-link { color: var(--dark-main-color) !important; }
.explainer-nav-link:hover { color: var(--main-color) !important; }
.denden-nav-link { color: var(--text-color) !important; }
.denden-nav-link:hover { color: var(--text-color) !important; text-decoration: underline; }

.explainer-nav-bar button.dropdown-toggle {
    background: none;
    border: none;
}
.explainer-nav-bar .dropdown-item.active {
    background-color: var(--light-main-color);
    color: var(--dark-main-color);
}
.explainer-nav-bar .small-superscript-icon {
    vertical-align: baseline;
    align-self: flex-start;
    display: inline-flex;
    margin-top: 0;
}

.explainer-type-select {
    width: auto;
    font-size: 0.85rem;
}

.explainer-library-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.explainer-search-wrapper,
.denden-search-wrapper {
    flex: 1 1 auto;
    min-width: 140px;
    max-width: 220px;
    width: 220px;
}

.explainer-search-input,
.denden-search-input {
    font-size: 0.9rem;
}

.explainer-search-results,
.denden-search-results {
    position: absolute;
    top: 100%;
    max-width: calc(100vw - 2rem);
    max-height: 420px;
    overflow-y: auto;
    padding: 0.25rem 0;
    display: none;
    list-style: none;
    margin: 0.125rem 0 0 0;
    z-index: 1050;
    width: 480px;
}
.explainer-search-results { left: 0; right: auto; }
.denden-search-results    { left: auto; right: 0; }

.explainer-search-results.show,
.denden-search-results.show {
    display: block;
}

.explainer-search-results li,
.denden-search-results li {
    padding: 0;
}

.explainer-search-results .dropdown-item,
.denden-search-results .dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    white-space: normal;
}

.explainer-search-name {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.explainer-search-results .badge,
.denden-search-results .badge {
    flex: 0 0 auto;
    font-size: 0.5rem;
    color: #ffffff;
}

.explainer-search-results .badge.explainer-type-feature { background-color: #0091bc; }
.explainer-search-results .badge.explainer-type-concept { background-color: #BC2B00; }
.explainer-search-results .badge.explainer-type-glossary { background-color: #FA7098; }

.explainer-search-results li.highlighted .dropdown-item,
.denden-search-results li.highlighted .dropdown-item {
    background-color: var(--light-main-color);
    color: var(--dark-main-color);
    border-left: 3px solid var(--dark-main-color);
}

[href="#explainer-backlinks"]:focus-visible {
    outline: 2px solid var(--dark-main-color);
    outline-offset: 2px;
}

.readability-seal {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
}

/* ========================================
   Demographic Table Styles
   ======================================== */

/* Section Bar Component */
.section-bar {
    display: flex;
    border: 1px solid var(--main-color);
    border-radius: 0.25rem;
    background-color: #ffffff;
    width: fit-content;
    transition: background-color 0.15s ease-in-out;
}

.section-bar:has(.table-toggle-btn[aria-expanded="true"]) {
    width: auto;
}

/* When the toggle button is blue (expanded or hovered), the bar's own background goes blue too.
   The bar and its blue children share the same 0.25rem corner radius, so the children's rounded
   corners cannot fill the bar's corners exactly and a sliver of the bar's background survives
   there; on a white bar that sliver reads as white crescent marks. Matching the background makes
   the sliver invisible. The transition above matches Bootstrap's .btn background transition so
   bar and button recolour in step. */
.section-bar:has(.table-toggle-btn[aria-expanded="true"]),
.section-bar:has(.table-toggle-btn:hover) {
    background-color: var(--main-color);
}

.table-toggle-btn {
    flex: 1;
    color: var(--main-color);
    border: none;
    border-radius: 0.25rem;
    padding-top: 0.05rem;
    padding-bottom: 0.05rem;
    text-align: left;
    background-color: #ffffff;
}

.table-toggle-btn:hover {
    background-color: var(--main-color);
    color: #ffffff;
}

.table-toggle-btn[aria-expanded="true"] {
    background-color: var(--main-color);
    color: #ffffff;
    border-radius: 0.25rem 0 0 0.25rem;
}

/* Plus/dash icon toggle for table bar */
.table-toggle-btn .toggle-icon-dash {
    display: none;
}

.table-toggle-btn[aria-expanded="true"] .toggle-icon-plus {
    display: none;
}

.table-toggle-btn[aria-expanded="true"] .toggle-icon-dash {
    display: inline;
}

.section-bar .dropdown,
.section-bar .table-bar-copy,
.section-bar .table-bar-download-dropdown {
    display: none;
}

.table-toggle-btn[aria-expanded="true"] ~ .dropdown,
.table-toggle-btn[aria-expanded="true"] ~ .table-bar-copy,
.table-toggle-btn[aria-expanded="true"] ~ .table-bar-download-dropdown {
    display: block;
}

.table-bar-settings {
    background-color: var(--main-color);
    color: #ffffff;
    border: none !important;
    border-radius: 0;
    padding: 0.05rem 0.5rem;
    outline: none !important;
    box-shadow: none !important;
}

.table-bar-settings:hover,
.table-bar-settings:focus,
.table-bar-settings:active,
.table-bar-settings.show,
.section-bar .dropdown.show .table-bar-settings {
    background-color: var(--main-color);
    color: #ffffff;
    opacity: 0.85;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.section-bar .dropdown {
    position: relative;
    background-color: var(--main-color);
}

.section-bar .dropdown-menu {
    z-index: 1050;
}

.dropdown-menu-narrow {
    min-width: auto;
}

.input-narrow-numeric {
    width: 5em;
}

.top-n-badge {
    font-size: 0.75em;
    font-weight: 600;
    margin-left: 0.15em;
}

.section-bar .table-bar-download-dropdown .table-bar-download {
    border-radius: 0 0.25rem 0.25rem 0;
}

.section-bar .table-bar-download-dropdown .dropdown-menu {
    padding: 0.5rem 0;
}

.section-bar .table-bar-download-dropdown .dropdown-item {
    color: var(--main-color);
}

.section-bar .table-bar-download-dropdown .dropdown-item:hover,
.section-bar .table-bar-download-dropdown .dropdown-item:focus {
    background-color: var(--main-color);
    color: #ffffff;
}

.settings-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-section + .settings-section {
    border-top: 1px solid #dee2e6;
    padding-top: 0.75rem;
}

.collapsing:not([id^="explainer-"]) {
    transition: none !important;
}

.section-bar.copy-flash {
    animation: copy-flash 0.3s ease;
}

@keyframes copy-flash {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.comparison-sections {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.chart-help-icon {
    float: right;
    margin-right: 0.25rem;
    position: relative;
    z-index: 10;
}

.section-bar .chart-bar-download {
    display: none;
}

.table-toggle-btn[aria-expanded="true"] ~ .chart-bar-download {
    display: block;
}

.chart-bar-download {
    background-color: var(--main-color);
    color: #ffffff;
    border: none !important;
    border-radius: 0 0.25rem 0.25rem 0;
    padding: 0.05rem 0.5rem;
    outline: none !important;
    box-shadow: none !important;
}

.chart-bar-download:hover {
    opacity: 0.85;
}

.section-bar .table-bar-download-dropdown .dropdown-item.active,
.section-bar .table-bar-download-dropdown .dropdown-item.active:hover,
.section-bar .table-bar-download-dropdown .dropdown-item.active:focus {
    background-color: var(--main-color);
    color: #ffffff;
}

/* ========================================
   New Table Container - Sticky Headers & Columns
   ======================================== */

.new-table-container {
    max-height: calc(100vh - 250px);
    overflow: auto;
    border: 1px solid #e0e0e0;
    width: fit-content;
    max-width: 100%;
}

.new-table-container table {
    border-collapse: separate;
    border-spacing: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    margin-bottom: 0;
    --bs-table-striped-bg: #fafafa;
}

.new-table-container table th,
.new-table-container table td {
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}

.new-table-container table thead th {
    font-weight: 700;
    color: #333;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
    border-bottom: 2px solid #e0e0e0;
    box-shadow: none !important;
}

.new-table-container table thead th .th-label {
    display: block;
    width: min-content;
    min-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

/* django_tables2 wraps sortable column headers in <a>. Inherit the header's
   dark colour rather than the global link teal so the header stays readable. */
.new-table-container table thead th a {
    color: inherit;
    text-decoration: none;
}

.new-table-container table thead th a:hover {
    color: var(--main-color);
}

.new-table-container table tbody tr:hover {
    background-color: #f0f0f0;
}

.new-table-container table td {
    color: #333;
}

/* Sticky first column */
.new-table-container table td:first-child,
.new-table-container table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    white-space: nowrap;
}

/* Border on first column only for single-column sticky tables (no .sticky-col class) */
.new-table-container table td:first-child:not(.sticky-col),
.new-table-container table thead th:first-child:not(.sticky-col) {
    border-right: 2px solid #e0e0e0;
}

.new-table-container table thead th:first-child {
    z-index: 3;
    background-color: #fff !important;
    color: #333 !important;
    box-shadow: none !important;
}

/* First column sortable header needs extra padding for sort indicator + border */
.new-table-container table thead th:first-child.sortable {
    padding-right: 26px;
}

.new-table-container table tbody td:first-child {
    background-color: #fafafa !important;
    color: #333 !important;
    box-shadow: none !important;
}

.new-table-container table tbody tr:nth-child(even) td:first-child {
    background-color: #fff !important;
}

/* Override table-primary in new-table-container to use alternating colors */
.new-table-container table tbody td.table-primary {
    background-color: #fff !important;
    --bs-table-bg-state: transparent !important;
    box-shadow: none !important;
}

.new-table-container table tbody tr:nth-child(odd) td.table-primary {
    background-color: #fafafa !important;
}

/* Multiple sticky columns support */
.new-table-container table td.sticky-col,
.new-table-container table th.sticky-col {
    position: sticky;
    z-index: 1;
}

.new-table-container table thead th.sticky-col {
    z-index: 3;
    background-color: #fff !important;
    color: #333 !important;
}

.new-table-container table tbody td.sticky-col {
    background-color: #fafafa !important;
}

.new-table-container table tbody tr:nth-child(even) td.sticky-col {
    background-color: #fff !important;
}

/* Override table-primary in sticky columns to use alternating colors */
.new-table-container table tbody td.sticky-col.table-primary {
    background-color: #fafafa !important;
    box-shadow: none !important;
}

.new-table-container table tbody tr:nth-child(even) td.sticky-col.table-primary {
    background-color: #fff !important;
    box-shadow: none !important;
}

/* Border on last sticky column */
.new-table-container table td.sticky-col-last,
.new-table-container table th.sticky-col-last {
    border-right: 2px solid #e0e0e0;
}

/* Row-total ("Total") column on marker comparison tables: an aggregate, so
   rendered bold like the footer Total row. Stickiness/background comes from
   .sticky-col (applied by initStickyColumns); right-alignment from .text-end. */
.new-table-container table th.marker-total-col,
.new-table-container table td.marker-total-col {
    font-weight: 600;
}

/* Hover highlighting for sticky columns - must match specificity of nth-child rules */
.new-table-container table tbody tr:hover td.sticky-col,
.new-table-container table tbody tr:hover td:first-child,
.new-table-container table tbody tr:hover td.table-primary,
.new-table-container table tbody tr:nth-child(odd):hover td.sticky-col,
.new-table-container table tbody tr:nth-child(even):hover td.sticky-col,
.new-table-container table tbody tr:nth-child(odd):hover td.sticky-col.table-primary,
.new-table-container table tbody tr:nth-child(even):hover td.sticky-col.table-primary {
    background-color: #f0f0f0 !important;
    box-shadow: none !important;
}

/* Table responsive override */
.new-table-container .table-container.table-responsive {
    overflow: visible;
}

/* Compact Table Mode */
.new-table-container.compact-table table {
    font-size: 12px;
}

.new-table-container.compact-table table th,
.new-table-container.compact-table table td {
    padding: 4px 8px;
    line-height: 1.2;
}

.new-table-container.compact-table table thead th.sortable {
    padding-right: 16px;
}

.new-table-container.compact-table table tbody td:not(:first-child) {
    padding-right: 16px;
}

.new-table-container.compact-table table thead th.sortable .sort-indicator {
    right: 3px;
    font-size: 10px;
}

/* Forced setting indicator */
.forced-setting-note {
    font-size: 0.85em;
    color: #6c757d;
    font-style: italic;
}

/* Column and Row Highlighting */
.new-table-container table thead th.column-highlight {
    background-color: #e8e8e8 !important;
}

.new-table-container table tbody td:first-child.row-header-highlight,
.new-table-container table tbody tr:nth-child(even) td:first-child.row-header-highlight {
    background-color: #e8e8e8 !important;
}

/* Sortable Column Headers */
.new-table-container table thead th.sortable {
    cursor: pointer;
    user-select: none;
    padding-right: 22px;
}

.new-table-container table tbody td:not(:first-child) {
    padding-right: 22px;
}

.new-table-container table thead th.sortable:hover {
    background-color: #e8e8e8;
}

/* Sort indicator icon */
.new-table-container table thead th.sortable .sort-indicator {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #bbb;
}

/* Highlight icon when sorted */
.new-table-container table thead th.sort-asc .sort-indicator,
.new-table-container table thead th.sort-desc .sort-indicator {
    color: var(--main-color);
    font-size: 14px;
    right: 4px;
}

.new-table-container.compact-table table thead th.sort-asc .sort-indicator,
.new-table-container.compact-table table thead th.sort-desc .sort-indicator {
    font-size: 12px;
    right: 0;
}

/* ========================================
   Table Header with Accent Bar
   ======================================== */

.table-header {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Chart heading rendered as HTML (Option 1): the .table-header sits flush above the chart canvas,
   replacing the old canvas-drawn title so the chart and table headings render identically.
   NOTE: a literal 0.5rem, NOT var(--block-spacing) — that token is the marketing content-block gap
   (7rem at >=992px), which here injects a ~126px gap between the heading and the chart. */
.chart-html-heading .table-header {
    margin-bottom: 0.5rem;
}

.table-header-line {
    display: flex;
    align-items: stretch;
}

.table-header-bar {
    width: var(--heading-bar-width);
    background-color: var(--main-color);
    flex-shrink: 0;
}

.table-header-title {
    min-height: var(--heading-title-line-height);
}

.table-header-title .table-header-text {
    font-size: var(--heading-title-font-size);
    font-weight: bold;
    line-height: 1.2;
    color: var(--text-heading-color);
    padding-left: var(--heading-title-gap);
    letter-spacing: var(--table-header-title-letter-spacing);
}

.table-header-subtitle {
    height: var(--heading-subtitle-line-height);
}

.table-header-subtitle .table-header-text {
    font-size: var(--heading-subtitle-font-size);
    font-weight: bold;
    line-height: var(--heading-subtitle-line-height);
    color: var(--text-heading-color);
    padding-left: var(--heading-subtitle-gap);
    letter-spacing: var(--table-header-subtitle-letter-spacing);
}

.table-header-source {
    height: var(--heading-source-line-height);
}

.table-header-source .table-header-text {
    font-size: var(--heading-source-font-size);
    color: var(--light-grey-color);
    line-height: var(--heading-source-line-height);
    padding-left: var(--heading-source-gap);
    letter-spacing: var(--table-header-source-letter-spacing);
}

/* Table Download Area */
.table-download-area {
    background-color: #ffffff;
}

/* ========================================
   Pricing Tier Cards
   ======================================== */

.pricing-tiers {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .pricing-tiers {
        flex-direction: row;
        justify-content: center;
    }
}

.pricing-card {
    flex: 1;
    max-width: 320px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background-color: #ffffff;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .pricing-card {
        margin: 0;
    }
}

.pricing-card-header {
    background-color: var(--main-color);
    color: #ffffff;
    padding: 1rem;
    text-align: center;
}

.pricing-card-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.pricing-card-body {
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    text-align: left;
    flex-grow: 1;
}

.pricing-card-features li {
    padding: 0.5rem 0 0.5rem 1.75rem;
    position: relative;
    color: #333;
}

.pricing-card-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--main-color);
    font-weight: bold;
}

.pricing-card-price {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--dark-main-color);
    margin-bottom: 0.5rem;
}

.pricing-card-note {
    font-size: 0.875rem;
    color: #666;
}

/* ========================================
   Pricing Table (Single Card with Price Columns)
   ======================================== */

.pricing-table {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background-color: #ffffff;
}

.pricing-table-header {
    background-color: var(--main-color);
    color: #ffffff;
    padding: 1.25rem 1.5rem;
    text-align: center;
}

.pricing-table-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.pricing-table-subtitle {
    margin-top: 0.25rem;
    font-size: 1rem;
    opacity: 0.9;
}

.pricing-table-body {
    padding: 1.5rem;
}

.pricing-table-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.pricing-table-features li {
    padding: 0.5rem 0 0.5rem 1.75rem;
    position: relative;
    color: #333;
}

.pricing-table-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--main-color);
    font-weight: bold;
}

.pricing-table-prices {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
    .pricing-table-prices {
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
    }
}

.pricing-table-price-column {
    flex: 1;
    text-align: center;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    max-width: 200px;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .pricing-table-price-column {
        margin: 0;
    }
}

.pricing-table-price-amount {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dark-main-color);
    margin-bottom: 0.25rem;
}

.pricing-table-price-label {
    font-size: 0.875rem;
    color: #666;
}

.pricing-table-note {
    text-align: center;
    font-size: 0.875rem;
    color: #666;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

/* ========================================
   Table provenance footnote (collapsible)
   ======================================== */

details.marker-table-notes > summary {
    cursor: pointer;
    user-select: none;
    color: var(--main-color);
}

details.marker-table-notes > summary:hover {
    text-decoration: underline;
}

details.marker-table-notes[open] > summary {
    margin-bottom: 0.25rem;
}

/* ========================================
   Explainer Contextual Links
   ======================================== */

a.explainer-link {
    text-decoration: underline dotted;
    text-decoration-color: var(--main-color);
    text-underline-offset: 3px;
    cursor: pointer;
}

.explainer-popover-content {
    font-size: 0.9rem;
}

.explainer-popover-content p {
    margin-bottom: 0.25rem;
}

.explainer-popover-readmore {
    color: var(--main-color);
}

.explainer-popover-datapage {
    display: block;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid #dee2e6;
    color: var(--main-color);
}

.explainer-related-pages {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.explainer-related-heading {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.explainer-related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.explainer-related-link {
    color: var(--main-color);
}

/* Pagination: tint active page link with brand colour */
.pagination .page-link {
    color: var(--main-color);
}

.pagination .page-item.active .page-link {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: var(--text-on-dark);
}

.pagination .page-link:focus {
    box-shadow: var(--shadow-focus);
}

.gmail-draft-preview {
    width: 100%;
    min-height: 14rem;
    background-color: var(--text-on-dark);
}

.dp-inline-number {
    width: 7rem;
}