/* ========================================
   CACHE MANAGEMENT REMINDER
   ======================================== */
/*
   IMPORTANT: When this CSS file is updated, you MUST increment
   the version number in the following HTML files:

   - /index.html (line ~26 and ~32): /css/style.css?vers=00X
   - /survey.html (line ~21 and ~27): /css/style.css?vers=00X

   Current version: 029

   This forces browsers to reload the updated stylesheet and
   prevents users from seeing cached/outdated styles.
*/

/* ========================================
   COLOR PALETTE
   Balanced Dark Mode - AAA Accessible
   ======================================== */
/*
   Primary Colors:
   - Deep Slate: #1a2332 (primary background)
   - Medium Slate: #2a3444 (secondary background)
   - Bright Cyan: #A8D5E2 (primary text)
   - Soft Blue: #D4E8F0 (headings h2)
   - Pale Blue: #E8F4F8 (h1)
   - Muted Teal: #5A93AC (accents, links)
   
   Contrast Ratios (AAA = 7:1+):
   - #E8F4F8 on #1a2332: 13.1:1 ✓
   - #D4E8F0 on #1a2332: 11.8:1 ✓
   - #A8D5E2 on #1a2332: 9.2:1 ✓
   - #5A93AC on #1a2332: 7.1:1 ✓
*/

/* applies border-box to entire site */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* color applied when user highlights text on a page */ 
/* adapted from HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
::selection {
    color: #1a2332;
    background: #A8D5E2;
    text-shadow: none;
}

/* ========================================
   LAYOUT & SPACING
   ======================================== */

/* styles for entire site */
:root {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    line-height: 1.8;
    color: #D4E8F0;
}

/* main container for html pages */
html {
    background: #1a2332;
    min-height: 100vh;
    scroll-padding-top: 6.5rem;
    overflow-x: hidden;
}

/* main container for body of html pages */
body {
    margin: 0 auto;
    padding: 1.5rem 1rem;
    width: 100%;
    max-width: 1366px;
    overflow-x: hidden;
    text-align: center;
    font-size: 1.3rem;
}

/* Small devices (phones, 480px and up) */
@media (min-width: 480px) {
    body {
        padding: 1.5rem 1.5rem;
    }
}

/* Small to medium devices (large phones/small tablets, 600px and up) */
@media (min-width: 600px) {
    body {
        padding: 1.5rem 2rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body {
        padding: 1.5rem 2.5rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
        padding: 1.5rem 3rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    body {
        padding: 1.5rem 4rem;
    }
}

/* align header and main content to left */
header,
main,
figure {
    text-align: left;
    max-width: 1366px;
    margin-left: auto;
    margin-right: auto;
}

figure {
    margin: 0 auto;
}

/* Add top margin to all figures except the header figure */
figure:not(#header) {
    margin-top: 2.8rem;
}

/* Ensure images don't overflow their containers */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Clickable images - show cursor and hover effect */
figure a {
    display: block;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

figure a:hover {
    opacity: 0.85;
}

figure a:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Links inside a figure caption stay in the text flow (the block rule above is for clickable images) */
figcaption a {
    display: inline;
}

/* Figure caption styling */
.caption {
    font-size: 1.1rem;
    line-height: 1.5;
    text-align: left;
    margin-top: 0.75rem;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

/* headings use Noto Serif font */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Serif', serif;
    text-align: center;
}

h1 {
    font-size: 2.3rem;
    line-height: 1.2;
    color: #E8F4F8;
    border-bottom: 3px solid #5A93AC;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
    margin-top: 3.5rem; /* spacing for fixed nav */
    width: 100%;
}

/* Extra small devices (phones, up to 400px) */
@media (max-width: 400px) {
    h1 {
        font-size: 1.85rem;
    }
}

h2 {
    font-size: 2.0rem;
    color: #D4E8F0;
    margin-top: 3rem;
    margin-bottom: 2rem;
    position: relative;
}

/* Extra small devices (phones, up to 400px) */
@media (max-width: 400px) {
    h2 {
        font-size: 1.4rem;
    }
}

h2::after {
    content: '';
    display: block;
    width: 240px;
    height: 3px;
    background: #5A93AC;
    margin: 0.5rem auto 0;
}

h3 {
    font-size: 1.65rem;
    font-style: italic;
    color: #D4E8F0;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    position: relative;
}

/* Extra small devices (phones, up to 400px) */
@media (max-width: 400px) {
    h3 {
        font-size: 1.25rem;
    }
}

h3::after {
    content: '';
    display: block;
    width: 80px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 6 Q 20 0, 40 6 Q 60 12, 80 6' stroke='%235A93AC' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    margin: 0.5rem auto 0;
}

h4 {
    font-size: 1.4rem;
    color: #D4E8F0;
    margin-top: 3rem;
    margin-bottom: 1rem;
    text-align: left;
}

/* Extra small devices (phones, up to 400px) */
@media (max-width: 400px) {
    h4 {
        font-size: 1.05rem;
    }
}

/* horizontal rule styling */
hr {
    border: none;
    border-top: 2px solid #5A93AC;
    margin: 3rem auto;
    max-width: 850px;
}

section {
    margin-bottom: 3.5rem;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

/* Extra small devices (phones, up to 400px) */
@media (max-width: 400px) {
    section {
        padding: 0;
    }
}

/* Mobile devices (max-width: 767px) */
@media (max-width: 767px) {
    section {
        padding: 0;
    }
}

section[aria-labelledby="survey"],
section[aria-labelledby="survey-box"] {
    border: 2px solid #5A93AC;
    padding: 1.25rem 2rem;
    border-radius: 8px;
    background: rgba(90, 147, 172, 0.05);
}

section[aria-labelledby="survey"] h2,
section[aria-labelledby="survey-box"] h2 {
    margin-top: 0;
}

section[aria-labelledby="survey"] h3,
section[aria-labelledby="survey-box"] h3 {
    margin-top: 1rem;
}

/* ========================================
   COMPONENTS
   ======================================== */

/* Table styling */
table {
    font-size: 1.1rem;
    width: 100%;
    border-collapse: collapse;
    margin: 2rem auto;
    max-width: 850px;
}

th, td {
    padding: .5rem 1rem;
    text-align: left;
    border: 1px solid #5A93AC;
}

th {
    background: rgba(90, 147, 172, 0.15);
    color: #E8F4F8;
    font-weight: 600;
}

td {
    background: rgba(90, 147, 172, 0.05);
}

/* Narrow phones: keep table inside the viewport */
@media (max-width: 400px) {
    table {
        table-layout: fixed;
        font-size: 1rem;
    }

    th, td {
        padding: .4rem .5rem;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* Contents box styling */
.contents-box {
    border: 2px solid #5A93AC;
    padding: 1.25rem 2rem;
    border-radius: 8px;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.2rem;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .contents-box {
        max-width: 425px;
    }

    .contents-box:has(#results-brief) {
        max-width: 75%;
    }

    /* Project developers list: center based on longest item */
    #project-developers + ul {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
}

.contents-box h3 {
    margin-top: 0;
    font-size: 1.4rem;
}

.contents-box h3::after {
    width: 50px;
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 6 Q 12.5 0, 25 6 Q 37.5 12, 50 6' stroke='%235A93AC' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

.contents-box ol {
    text-align: left;
    margin: 0;
    padding-left: 1.5rem;
}

/* Menu-specific styling: reduce spacing between items and center list */
.contents-box:has(#menu) {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

#menu {
    font-style: normal;
    text-transform: uppercase;
    margin-bottom: 0;
    /* On the homepage the Menu heading is an h2 (peer of the other section headings); these two properties and the ::after rule below keep it rendering exactly like the h3 it replaced. On pages where it remains an h3 they are no-ops (the .contents-box h3 rules already set the same values). */
    font-size: 1.4rem;
    margin-top: 0;
}

#menu::after {
    width: 50px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg width='50' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 6 Q 12.5 0, 25 6 Q 37.5 12, 50 6' stroke='%235A93AC' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat;
}

#menu + ol {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Results brief specific styling */

.contents-box:has(#results-brief) {
    margin-top: 2.8rem;
}

#results-brief {
    font-style: normal;
}

#results-brief + ol {
    margin-bottom: 0.5rem;
}

/* navigation styling */
[data-include="nav"] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #1a2332;
    z-index: 100;
    padding: 0.75rem 2.5rem;
    width: 100%;
    max-width: 1366px;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.3s ease;
}

[data-include="nav"].scrolled {
    border-bottom-color: white;
}

nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    gap: 1rem;
}

nav .page-title {
    text-align: left;
    color: #E8F4F8;
    font-weight: 700;
    font-size: 1.1rem;
    flex: 0 1 auto;
}

nav ul,
.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    align-items: center;
    flex: 0 0 auto;
}

nav ul li,
.nav-menu li {
    text-align: center;
}

nav ul li a,
.nav-menu li a {
    font-weight: 500;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    display: block;
}

/* Hamburger button - hidden on desktop */
.hamburger {
    display: none;
    background: #2a3444;
    border: 1px solid #5A93AC;
    border-radius: 5px;
    color: #E8F4F8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 0.5rem;
    line-height: 1;
    z-index: 200;
    box-sizing: border-box;
    height: 30px;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 2px; /* optical alignment with the boxed nav logo */
}

.hamburger:hover {
    color: #A8D5E2;
    border-color: #A8D5E2;
}

.hamburger:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Mobile menu clone and overlay - hidden on desktop */
.nav-menu-mobile {
    display: none;
}

.nav-menu-close {
    display: none;
}

.nav-overlay {
    display: none;
}

/* Lock page scrolling while the mobile menu is open (class toggled by js/includes.js on both html and body, since some mobile browsers ignore overflow on body alone) */
.nav-open {
    overflow: hidden;
}

/* Mobile nav (below 992px) */
@media (max-width: 991px) {
    [data-include="nav"] {
        padding: 0.75rem 1rem;
    }

    .hamburger {
        display: flex;
    }

    nav .nav-menu {
        display: none;
    }

    .nav-menu-mobile {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -260px;
        width: 260px;
        height: 100vh;
        background: #2a3444;
        padding: 4rem 1.5rem 2rem;
        margin: 0;
        gap: 0;
        transition: right 0.3s ease;
        z-index: 150;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
    }

    .nav-menu-mobile.open {
        right: 0;
    }

    .nav-menu-mobile li {
        text-align: left;
        padding: 0;
    }

    .nav-menu-mobile li a {
        font-size: 1.2rem;
        padding: 0.75rem 0;
        display: block;
    }

    .nav-menu-close {
        display: block;
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        background: none;
        border: none;
        color: #E8F4F8;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.25rem 0.5rem;
        line-height: 1;
    }

    .nav-menu-close:focus {
        outline: 2px solid white;
        outline-offset: 2px;
    }

    .nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(200, 200, 210, 0.92);
        z-index: 140;
    }

    .nav-overlay.open {
        display: block;
    }
}

/* footer styling */
footer ul {
    list-style: none;
    padding: 0 1rem;
    margin: 0;
    margin-top: 4rem;
    padding-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0;
    border-top: 1px solid rgba(90, 147, 172, 0.2);
    font-size: 1.1rem;
    text-align: center;
}

footer ul li {
    display: inline;
}

footer ul li:not(:last-child)::after {
    content: ' | ';
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

/* Extra small devices (phones, up to 400px) */
@media (max-width: 400px) {
    footer ul {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }
}

/* paragraph spacing */
p {
    margin-bottom: 1.25rem;
    line-height: 1.8;
    color: #D4E8F0;
}

/* list styling */
ul, ol {
    padding-left: 1.5rem;
    padding-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Add spacing for nested lists */
li > ul,
li > ol {
    margin-top: .25rem;
}

/* Style nested unordered lists with hollow circles */
li > ul {
    list-style-type: circle;
}

li {
    padding: .25rem 0;
}

/* Remove top padding only for lists directly following headings */
h1 + ul > li:first-child,
h1 + ol > li:first-child,
h2 + ul > li:first-child,
h2 + ol > li:first-child,
h3 + ul > li:first-child,
h3 + ol > li:first-child,
h4 + ul > li:first-child,
h4 + ol > li:first-child {
    padding-top: 0;
}

/* Remove top padding from list item that follows a list item containing a nested list */
li:has(> ul) + li,
li:has(> ol) + li {
    padding-top: 0;
}

/* Remove bottom padding from last item in nested lists */
li > ul > li:last-child,
li > ol > li:last-child {
    padding-bottom: 0;
}

/* bibliography and organizations description lists: each entry has a hanging indent, its description is indented beneath it */
.bibliography-list,
.organizations-list {
    margin: 0;
}

.bibliography-list dt,
.organizations-list dt,
.bibliography-list dd,
.organizations-list dd {
    color: #D4E8F0;
    line-height: 1.8;
}

.bibliography-list dt,
.organizations-list dt {
    margin-top: 1.75rem;
    padding-left: 2rem;
    text-indent: -2rem;
}

.bibliography-list dt:first-child,
.organizations-list dt:first-child {
    margin-top: 0;
}

.bibliography-list dd,
.organizations-list dd {
    margin: .5rem 0 0 2rem;
    padding-left: 1rem;
    text-indent: -1rem;
}

/* bullet at the start of each annotation, in a 1rem box so wrapped lines align with the first line of text; the second content declaration gives it empty alt text so screen readers skip it */
.bibliography-list dd::before,
.organizations-list dd::before {
    content: "•";
    content: "•" / "";
    display: inline-block;
    width: 1rem;
    text-indent: 0;
}

/* bibliography category tag: keeps the bullet from the rule above, in italics like the note at the top of the list */
.bibliography-category {
    font-style: italic;
}

/* organizations list: a CSS counter numbers each entry, so items can be inserted without renumbering by hand */
.organizations-list {
    counter-reset: org-item;
}

.organizations-list dt::before {
    counter-increment: org-item;
    content: counter(org-item) ". ";
}

/* Extra small devices (phones, up to 400px) */
@media (max-width: 400px) {
    .bibliography-list dt,
    .organizations-list dt {
        padding-left: 1.5rem;
        text-indent: -1.5rem;
    }

    .bibliography-list dd,
    .organizations-list dd {
        margin-left: 1.5rem;
    }
}

/* works cited list: no bullets, each entry has a hanging indent */
.works-cited-list {
    list-style: none;
    padding-left: 0;
}

.works-cited-list li {
    margin-top: 1rem;
    padding: 0 0 0 2rem;
    text-indent: -2rem;
}

.works-cited-list li:first-child {
    margin-top: 0;
}

/* Extra small devices (phones, up to 400px) */
@media (max-width: 400px) {
    .works-cited-list li {
        padding-left: 1.5rem;
        text-indent: -1.5rem;
    }
}

/* center utility class */
.center {
    text-align: center;
}

/* ========================================
   INTERACTIVE ELEMENTS & LINKS
   ======================================== */

/* link styling */
a {
    color: #5A93AC;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.3s ease;
}

a:link,
a:visited {
    color: #5A93AC;
}

a:hover {
    color: #A8D5E2;
    outline: 2px solid white;
    outline-offset: 2px;
}

a:active {
    color: #D4E8F0;
}

/* page title link styling */
.page-title a {
    /* text-decoration: none; */
    color: inherit;
    font-weight: 600;
}

/* hover effects for navigation and footer links */
nav ul li a:hover,
.nav-menu li a:hover,
footer ul li a:hover {
    color: #A8D5E2;
}

/* screen-reader-only utility */
.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;
}

/* NOTE: .sr-only does not work directly on <table> elements — tables ignore
   width/height:1px and blow out the page (horizontal or vertical overflow on
   mobile). Wrap hidden tables in <div class="sr-only"> instead. */

/* "Show data table on screen" toggle for the visually hidden chart tables */
.data-table-btn {
    display: block;
    margin: 1rem auto 0;
    padding: .5rem 1rem;
    font: inherit;
    font-size: 1.1rem;
    color: #E8F4F8;
    background: rgba(90, 147, 172, 0.15);
    border: 1px solid #5A93AC;
    border-radius: 6px;
    cursor: pointer;
}

.data-table-btn:hover {
    background: rgba(90, 147, 172, 0.3);
}

/* Revealed table: caption stays outside the table, so it never scrolls away */
.data-table-visible {
    max-width: 100%;
}

.data-table-caption {
    max-width: 850px;
    margin: 1.5rem auto 1rem;
    font-size: 1.1rem;
    font-style: italic;
    text-align: center;
}

.data-table-visible table {
    table-layout: auto;
}

.data-table-scroll table {
    margin: 0 auto;
}

/* The table scrolls inside .data-table-scroll (native bar hidden). Two bars drawn by the page, above and
   below the table, mirror it, so they stay visible. The block's margin merges with the next element's
   margin (graph 2rem, h4 3rem, next caption 1.5rem). */
.data-table-block {
    max-width: 100%;
    margin-bottom: 2rem;
}

.data-table-scroll {
    overflow-x: auto;
    scrollbar-width: none;
}

.data-table-scroll::-webkit-scrollbar {
    display: none;
}

.data-table-bar {
    display: none;
    position: relative;
    height: 9px;
    background: #2A3B52;
    border-radius: 4.5px;
}

.data-table-bar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #FFFFFF;
    border-radius: 4.5px;
    cursor: grab;
    touch-action: none;
}

/* Narrow screens: let cells wrap (with logical, hyphenated breaks) and tighten padding so wide tables fit without sideways scrolling */
@media (max-width: 767px) {
    .data-table-caption {
        line-height: normal;
    }

    .data-table-visible th,
    .data-table-visible td {
        padding: .4rem .5rem;
        /* Break long words at syllables and add a hyphen; break-word only catches strings with no break point, such as "Q15" */
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 7 3 3;
        overflow-wrap: break-word;
    }

    /* Tables with many columns (Q14, heatmap): keep each column readable and scroll sideways instead of squeezing */
    .data-table-wide th,
    .data-table-wide td {
        min-width: 7rem;
    }
}

/* custom focus styles for accessibility */
*:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* email link styling */
a.email {
    font-size: 1.0rem;
    text-transform: uppercase;
    margin-left: 0.35rem;
    font-weight: 600;
}

a.email::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0e0";
    margin-left: 0.5rem;
}

/* skip to content link for accessibility */
.skip-link {
    position: absolute;
    top: -100px;
    left: 6px;
    background: #1a2332;
    color: white;
    padding: 10px 16px;
    z-index: 1000;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid white;
}

.skip-link:focus {
    top: 6px;
    outline: 3px solid white;
    outline-offset: 2px;
}

/* ========================================
   SPECIALIZED COMPONENTS
   ======================================== */

/* Sankey Diagram (homepage) — always interactive, CSS-scaled on narrow viewports */
#sankey-chart {
    display: block;
}

#sankey-chart .hoverlayer .hovertext path {
    fill: white !important;
    stroke: #333 !important;
    fill-opacity: 1 !important;
}

#sankey-chart .hoverlayer .hovertext text {
    fill: black !important;
}

/* Tighten gap between h1 and Sankey on homepage */
h1#introduction {
    margin-bottom: 1.5rem;
}

.sankey-chart-container-home {
    width: 100%;
}

.sankey-chart-scaler-home {
    overflow: hidden;
}

@media (max-width: 767px) {
    #sankey-chart {
        width: 768px !important;
        max-width: none !important;
        transform-origin: top left;
    }
}

/* Gradual fade for hover tooltips on all Plotly charts */
.hoverlayer .hovertext {
    transition: opacity 0.3s ease;
}

/* ========================================
   Q8 NETWORK GRAPH
   ======================================== */

.q8-chart-container {
    width: 100%;
    max-width: 1000px;
    margin: 2rem auto;
    text-align: center;
}

@media (min-width: 1000px) {
    .q8-chart-container {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

.q8-chart-scaler {
    overflow: hidden;
}

#q8-chart {
    width: 1000px;
    max-width: 100%;
    height: 680px;
    margin: 0 auto;
    background-color: #f5f5f5;
    border-radius: 8px;
}

@media (max-width: 991px) {
    #q8-chart {
        height: 550px;
    }
}

@media (max-width: 767px) {
    #q8-chart {
        width: 768px;
        max-width: none;
        height: 550px;
        transform-origin: top left;
    }
}

.q8-touch-info {
    display: none;
    margin: 0.75rem auto;
    padding: 0.75rem 1rem;
    max-width: 600px;
    background: rgba(90, 147, 172, 0.12);
    border: 1px solid rgba(90, 147, 172, 0.3);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

.q8-legend {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: rgba(90, 147, 172, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(90, 147, 172, 0.2);
    text-align: left;
}

.q8-legend h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: center;
}

.q8-legend-items {
    columns: 2;
    column-gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 600px) {
    .q8-legend-items {
        columns: 1;
    }
}

.q8-legend-items li {
    display: flex;
    align-items: flex-start;
    font-size: 1.1rem;
    padding: 0.15rem 0.4rem;
    break-inside: avoid;
}

.q8-legend-color {
    margin-top: 0.3rem;
}

.q8-legend-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* ========================================
   Q6 DISTRIBUTION CHART
   ======================================== */

.q6-filter-container {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.q6-filter-row {
    margin-bottom: 1rem;
}

@media (min-width: 860px) {
    .q6-filter-container {
        display: flex;
        justify-content: center;
        gap: 2rem;
    }

    .q6-filter-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0;
    }
}

@media (min-width: 600px) and (max-width: 859px) {
    .q6-filter-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: -1rem;
    }

    .q6-filter-row {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 1.4rem;
    }

    .q6-filter-row label {
        position: absolute;
        right: calc(100% + 1rem);
        white-space: nowrap;
    }
}

@media (max-width: 599px) {
    .q6-filter-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: -1rem;
    }

    .q6-filter-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .q6-filter-row label {
        position: static;
    }
}

.q6-filter-row label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #A8D5E2;
    margin: 0;
    white-space: nowrap;
}

.q6-filter-row select {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.4;
    border: 2px solid #ddd;
    border-radius: 4px;
    background-color: white;
    color: #333;
    cursor: pointer;
    font-family: 'Source Sans Pro', sans-serif;
    transition: border-color 0.2s;
    min-width: 250px;
}

.q6-filter-row select:hover {
    border-color: #5A93AC;
}

.q6-filter-row select:focus {
    outline: none;
    border-color: #5A93AC;
}

.q6-filter-row select option {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.85rem;
    color: #333;
    line-height: 1.8;
}

.q6-chart-container {
    width: 100%;
    max-width: 1000px;
    margin: 2rem auto;
    text-align: center;
    overflow: hidden;
}

@media (min-width: 1000px) {
    .q6-chart-container {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

.q6-chart-scaler {
    overflow: hidden;
}

#q6-chart {
    width: 1000px;
    max-width: 100%;
    height: 540px;
    margin: 0 auto;
    background-color: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
}

@media (max-width: 991px) {
    #q6-chart {
        height: 500px;
    }
}

@media (max-width: 767px) {
    #q6-chart {
        width: 768px;
        max-width: none;
        height: 500px;
        transform-origin: top left;
    }
}

.q6-touch-info {
    display: none;
    margin: 0.75rem auto;
    padding: 0.75rem 1rem;
    max-width: 600px;
    background: rgba(90, 147, 172, 0.12);
    border: 1px solid rgba(90, 147, 172, 0.3);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

/* ============================================================
   Q13/Q14 CONTEXT CHARTS (graphs-analysis)
   ============================================================ */

.q13-filter-container {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.q13-filter-row {
    margin-bottom: 1rem;
}

@media (min-width: 860px) {
    .q13-filter-container {
        display: flex;
        justify-content: center;
        gap: 2rem;
    }

    .q13-filter-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0;
    }
}

@media (min-width: 600px) and (max-width: 859px) {
    .q13-filter-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: -1em;
    }

    .q13-filter-row {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 1.4rem;
    }

    .q13-filter-row label {
        position: absolute;
        right: calc(100% + 1rem);
        white-space: nowrap;
    }
}

@media (max-width: 599px) {
    .q13-filter-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: -1.5rem;
    }

    .q13-filter-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .q13-filter-row label {
        position: static;
    }
}

.q13-filter-row label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #A8D5E2;
    margin: 0;
    white-space: nowrap;
}

.q13-filter-row select {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.4;
    border: 2px solid #ddd;
    border-radius: 4px;
    background-color: white;
    color: #333;
    cursor: pointer;
    font-family: 'Source Sans Pro', sans-serif;
    transition: border-color 0.2s;
    min-width: 250px;
}

.q13-filter-row select:hover {
    border-color: #5A93AC;
}

.q13-filter-row select:focus {
    outline: none;
    border-color: #5A93AC;
}

.q13-filter-row select option {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.85rem;
    color: #333;
    line-height: 1.8;
}

.q13-chart-container {
    width: 100%;
    max-width: 1000px;
    margin: 2rem auto;
    text-align: center;
    overflow: hidden;
}

@media (min-width: 1000px) {
    .q13-chart-container {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

.q13-chart-scaler {
    width: 1000px;
    overflow: visible;
    position: relative;
    transform-origin: top left;
}

.q13-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 170px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.q13-legend li {
    display: flex;
    align-items: center;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    color: black;
    padding: 0.35rem 0;
}

.q13-legend-color {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

#q13-chart {
    width: 1000px;
    height: 540px;
    margin: 0 auto;
    background-color: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
}

/* Custom HTML hover tooltip for Q13 pie chart */
.q13-hover-tooltip {
    display: none;
    position: fixed;
    background: white;
    color: black;
    border: 1px solid #5AAFE0;
    border-radius: 4px;
    padding: 8px 12px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    white-space: nowrap;
}

.q13-touch-info {
    display: none;
    margin: 0.75rem auto;
    padding: 0.75rem 1rem;
    max-width: 600px;
    background: rgba(90, 147, 172, 0.12);
    border: 1px solid rgba(90, 147, 172, 0.3);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

.q14-chart-container {
    width: 100%;
    max-width: 1000px;
    margin: 2rem auto;
    text-align: center;
    overflow: hidden;
}

@media (min-width: 1000px) {
    .q14-chart-container {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

.q14-chart-scaler {
    width: 1000px;
    overflow: visible;
    position: relative;
    transform-origin: top left;
}

#q14-chart {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    background-color: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
}

.q14-touch-info {
    display: none;
    margin: 0.75rem auto;
    padding: 0.75rem 1rem;
    max-width: 600px;
    background: rgba(90, 147, 172, 0.12);
    border: 1px solid rgba(90, 147, 172, 0.3);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

/* ========================================
   Q15 DISTRIBUTION CHART (Activities)
   ======================================== */

.q15-filter-container {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.q15-filter-row {
    margin-bottom: 1rem;
}

@media (min-width: 860px) {
    .q15-filter-container {
        display: flex;
        justify-content: center;
        gap: 2rem;
    }

    .q15-filter-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0;
    }
}

@media (min-width: 600px) and (max-width: 859px) {
    .q15-filter-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: -1rem;
    }

    .q15-filter-row {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 1.4rem;
    }

    .q15-filter-row label {
        position: absolute;
        right: calc(100% + 1rem);
        white-space: nowrap;
    }
}

@media (max-width: 599px) {
    .q15-filter-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: -1rem;
    }

    .q15-filter-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .q15-filter-row label {
        position: static;
    }
}

.q15-filter-row label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #A8D5E2;
    margin: 0;
    white-space: nowrap;
}

.q15-filter-row select {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.4;
    border: 2px solid #ddd;
    border-radius: 4px;
    background-color: white;
    color: #333;
    cursor: pointer;
    font-family: 'Source Sans Pro', sans-serif;
    transition: border-color 0.2s;
    min-width: 250px;
}

.q15-filter-row select:hover {
    border-color: #5A93AC;
}

.q15-filter-row select:focus {
    outline: none;
    border-color: #5A93AC;
}

.q15-filter-row select option {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.85rem;
    color: #333;
    line-height: 1.8;
}

.q15-chart-container {
    width: 100%;
    max-width: 1000px;
    margin: 2rem auto;
    text-align: center;
    overflow: hidden;
}

.q15-chart-scaler {
    width: 1000px;
    overflow: visible;
    position: relative;
    transform-origin: top left;
}

#q15-chart {
    width: 1000px;
    height: 930px;
    margin: 0 auto;
    background-color: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
}

@media (min-width: 1000px) {
    .q15-chart-container {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

.q15-touch-info {
    display: none;
    margin: 0.75rem auto;
    padding: 0.75rem 1rem;
    max-width: 600px;
    background: rgba(90, 147, 172, 0.12);
    border: 1px solid rgba(90, 147, 172, 0.3);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

/* ============================================================
   SANKEY DIAGRAM (graphs-analysis)
   ============================================================ */

.sankey-chart-container {
    width: 100%;
    max-width: 1000px;
    margin: 2rem auto;
    text-align: center;
}

@media (min-width: 1000px) {
    .sankey-chart-container {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

.sankey-chart-scaler {
    overflow: hidden;
}

#sankey-chart-ga {
    width: 1000px;
    max-width: 100%;
    height: 600px;
    margin: 0 auto;
    background-color: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
}

#sankey-chart-ga .hoverlayer .hovertext path {
    fill: white !important;
    stroke: #333 !important;
    fill-opacity: 1 !important;
}

#sankey-chart-ga .hoverlayer .hovertext text {
    fill: black !important;
}

@media (max-width: 991px) {
    #sankey-chart-ga {
        height: 550px;
    }
}

@media (max-width: 767px) {
    #sankey-chart-ga {
        width: 768px;
        max-width: none;
        height: 550px;
        transform-origin: top left;
    }
}

.sankey-touch-info {
    display: none;
    margin: 0.75rem auto;
    padding: 0.75rem 1rem;
    max-width: 600px;
    background: rgba(90, 147, 172, 0.12);
    border: 1px solid rgba(90, 147, 172, 0.3);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

/* ========================================
   Q15 / Q21 HEATMAP CHART
   ======================================== */

.heatmap-filter-container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 1rem;
}

@media (min-width: 631px) {
    .heatmap-filter-container {
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
    }
}

@media (min-width: 631px) and (max-width: 859px) {
    .heatmap-filter-group legend {
        font-size: 0.85rem; /* Reduced further to ensure it fits on one line */
        padding: 0 0.25rem; /* Shaved down the padding to buy extra horizontal space */
        letter-spacing: -0.02em; /* Very slightly tightens the character spacing */
    }
}

@media (max-width: 630px) {
    .heatmap-filter-container {
        gap: 2rem; /* Creates equal spacing between the two stacked fieldsets */
        margin-bottom: 0; /* Resets the negative margin to balance space above the chart */
    }
    
    .heatmap-filter-group legend {
        margin: 0 auto;
    }
    
    .heatmap-checkbox-container {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    
    .heatmap-button-group {
        justify-content: center;
    }
}

.heatmap-filter-group {
    flex: 1;
    text-align: left;
}

.heatmap-filter-group fieldset {
    border: 1px solid #5A93AC;
    border-radius: 8px;
    padding: 1rem;
    background: rgba(90, 147, 172, 0.05);
    height: 100%; /* Forces both boxes to be the same height */
    display: flex;
    flex-direction: column;
}

.heatmap-filter-group legend {
    font-size: 1.1rem;
    font-weight: 600;
    color: #A8D5E2;
    padding: 0 0.5rem;
}

.heatmap-checkbox-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    max-height: 175px;
    overflow-y: auto;
    margin-bottom: 1rem;
    padding-right: 0.5rem;
}

.heatmap-checkbox-item {
    display: flex;
    align-items: flex-start;
}

.heatmap-checkbox-item input {
    margin-top: 0.35rem;
    margin-right: 0.5rem;
    cursor: pointer;
}

.heatmap-checkbox-item label {
    font-size: 1.1rem;
    color: #D4E8F0;
    cursor: pointer;
    line-height: 1.4;
}

.heatmap-button-group {
    display: flex;
    gap: 0.75rem;
    margin-top: auto; /* Anchors buttons to the bottom */
}

.heatmap-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s;
}

.heatmap-btn.select-all {
    background-color: #5A93AC;
    color: #1a2332;
}

.heatmap-btn.select-all:hover {
    background-color: #A8D5E2;
}

.heatmap-btn.clear-all {
    background-color: transparent;
    color: #A8D5E2;
    border: 1px solid #5A93AC;
}

.heatmap-btn.clear-all:hover {
    background-color: rgba(90, 147, 172, 0.1);
}

.heatmap-chart-container {
    width: 100%;
    max-width: 1000px;
    margin: 2rem auto;
    text-align: center;
    overflow: hidden;
}

.heatmap-chart-scaler {
    width: 1000px;
    overflow: visible;
    position: relative;
    transform-origin: top left;
}

#heatmap-chart {
    width: 1000px;
    height: 800px;
    margin: 0 auto;
    background-color: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
}

@media (min-width: 1000px) {
    .heatmap-chart-container {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

.heatmap-touch-info {
    display: none;
    margin: 0.75rem auto;
    padding: 0.75rem 1rem;
    max-width: 600px;
    background: rgba(90, 147, 172, 0.12);
    border: 1px solid rgba(90, 147, 172, 0.3);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

/* Site Accessibility section */
[aria-labelledby="page-overview"] ul {
    list-style: none;
    padding-left: 1.5rem;
}

[aria-labelledby="page-overview"] ul > li::before {
    content: "– ";
    margin-left: -1.25rem;
}

[aria-labelledby="page-overview"] code {
    font-size: 0.75em;
}