/* ==========================================================================
   Global typography - bulding towards a theme-switcher   
   ========================================================================== */
:root { 
    /* chart.js rasterizes fonts to render in a <canvas> elelment so I need a 
    different font specifically for that purpose; bp_utils.js switches them */ 
    /* Note to self: chart.js uses defaults I overrode: 
    'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, 12px, Color: #666, Style: 'normal' */

    --font-base: 'Archivo', 'Segoe UI', 'Trebuchet MS', Tahoma, Verdana, sans-serif;
    --font-chart: 'Segoe UI', Tahoma, Verdana, sans-serif;

    --band-colour-dark: #212830;
    --color-text-dark: #64768c  ;      
    
    /* Charts: Dark. TODO: Gridlines and Backgrounds */
    --font-dark-axisLabel-color: #64768c;
    --font-dark-axisLabel-size: 9px; /*TODO: replace with rem*/ 
    --font-dark-axisLabel-weight: 100;
    --font-dark-axisTitle-size: 16px; /*TODO: replace with rem*/
    --font-dark-axisTitle-weight: 200;
    
    /* Charts: Light. TODO: Gridlines and Backgrounds */
    --color-text-light: #676767;
    --font-light-axisLabel-color: #676767;
    --font-light-axisLabel-size: 12px; /*TODO: replace with rem*/
    --font-light-axisLabel-weight: 100;
    --font-light-axisTitle-size: 16px; /*TODO: replace with rem*/
    --font-light-axisTitle-weight: 200;
    
    /* For tooltip documentation bullets TODO: Refactor bp_utils.js to pull from these vars instead of inline */
    --pp-narrow: #f0ad4e;
    --pp-normal: #5cb85c;
    --pp-widened: #d9534f;
    --pp-very-widened: #a94442;
}

/* ==========================================================================
   GLOBAL RESETS & BASE STYLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

h3 {
    font-size: .9rem;
    padding-bottom: 12px;
}

body {
    font-family: var(--font-base);
    color: var(--color-text-light);
    background-color: #f6f5f7;
}

/* canvas { outline: 2px dashed purple; } keep handy for debugging chart.js layout */

/* ==========================================================================
   HEADER, FOOTER & NAVIGATION
   ========================================================================== */
header {
    background-color: var(--band-colour-dark);
    /* position: fixed; I used to use this to stick to the top */
    position: sticky;
    top: 0;
    left: 0; /* may not need */
    width: 100%;
    z-index: 5002; /* High z-index to stay above charts and table headers */
}

.header__content {
    display: flex;  /* remember, flex and grid are about their parent element - this inside <header> */ 
    align-items: center;
    justify-content: space-between; /* with flex, could use 'center; or 'end' but this forces the children (that are themselves in a nested flex box) to opposite ends of the container */
    min-height: 70px;
    max-width: 1325px;
    margin: 0 auto; /* this centers the whole thing...don't use "align center" */
    padding: 0 20px; /* 0 is top and bottom, 20 is left and right.  This stops it from hitting the browser edge when you hit max width */
}

header h1 {
    font-size: 20px;
    font-weight: 85;
    color: #7f90a3;
}

header h1 span {
    color: #5e748c;
}

.last-reading{
    color: #7f90a3;
    font-size: 12px;
}

.header-title {
    margin-left: auto; /* Move the title out of center alignment in the flexbox and to the right against the .header-btnHelp div */
    text-align: right; /* Right-align the text children */
}

.header-btnHelp {
    display: block;
    background-color: #7f90a3;
    color: #081618;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin: 5px;
}

/* Wraps header-title and header-btnHelp together so they scroll away as one unit.
   On mobile, display:contents dissolves .header and .header__content, making this
   wrapper the real box that can paint the dark background behind both children. */
.header-scrolls {
    display: flex;
    align-items: center;
}

.nav__list {
    display: flex; /* they were in a column with the parent having flex, but having this here nests it, so now they sit on their own line too */
    gap: 30px; /* with flex, this or column-gap spaces the <li>s apart */
}

.date-pill {
    font-size: 20px;
    color: rgba(201, 201, 210, 0.75);
    transition: all 0.4s; /* study this property - it's used for animations */
    position: relative;
}

.date-pill:hover, 
.date-pill.active { 
    color: rgba(221,225,255,1); 
} 

.date-pill:hover { 
    color: rgba(255,255,255,1); 
}

.date-pill::after { /* this is called a pseudo element. */
    content: ''; /* Coooool - put text in there instead of an empty string and watch what happens */
    height: 2px; 
    width: 100%;
    background-color:rgba(43,71,100,0.75);
    position: absolute;
    left: 0; 
    bottom: -10px;
    transition: all 0.2s;
    opacity: 0;
    pointer-events: none;
}

.date-pill:hover::after {
    opacity: 1;
}

footer {
    text-align: center;
    padding: 40px 0;
    color: var(--color-text-dark);
    background-color: var(--band-colour-dark);
    font-size: 0.8rem;
}

#summary-band {
    background-color: var(--band-colour-dark);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    margin:auto; /* makes this section butt agains the header */
}

.nobgCard:has(.heatmap-wrapper) { height: 120px; min-height: 120px; max-height: 120px; } /* looks like a hack, but it works */
.nobgCard:has(#normalDonutChart) { height: 130px; min-height: 130px; max-height: 130px; } /* looks like a hack, but it works */
.nobgCard:has(#readingCategoriesSummaryCard) { height: 110px; min-height: 110px; max-height: 110px; } /* looks like a hack, but it works */

/* ==========================================================================
   LAYOUT & GRIDS
   ========================================================================== */
.container {
    max-width: 1325px;
    margin: 0 auto;
    padding: 10px;
}

section {
    margin: 10px 0px;
    /* outline: 1px solid orange; */
    height:auto; /* Remove !important so media queries can actually work */
}

/* This selectes the first child of this element and NOT grandchildren, in my case the first Card inside the row. */
/* Did this because Canvas/chart.js overflows in grid layouts - they tend to blow up grids. */
.two-col > *, .three-col > *, .five-col > * {
    min-width: 0; 
    overflow: hidden;
}

.two-col, .three-col, .five-col{
    display: grid;
    gap: 10px;
    align-items: stretch; /* CHANGED: Force equal heights in grid */
} 

.one-col,
.two-col,
.three-col,
.five-col {
    display: grid;
    gap: 20px;
}

.one-col {
    grid-template-columns: 1fr;
} 

.two-col { 
    grid-template-columns: 2fr 1fr; 
}

.three-col { 
    grid-template-columns: .95fr .4fr .15fr; 
    padding-top: 10px; 
}

.five-col { 
    grid-template-columns: 0.7fr 1fr 1fr 1fr 1fr; 
}

.card {
    background: white;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    /* outline: 2px solid blue; */
}

/* Titles don't stretch */
.card h3 {
    flex: 0 0 auto;
}

/* Chart and table wrappers fill remaining space */
.card .chart-wrapper,
.card .table-wrapper {
    flex: 1; /* Grow to fill available space */
    min-height: 0;
}

/* Table wrapper must not allow content to push it out */
.card .table-wrapper {
    overflow: hidden; /* Critical - prevents table from pushing wrapper */
}

/* Canvas fills wrapper */
.card canvas {
    width: 100% !important;
    height: 100% !important;
}

.nobgCard {
    display: flex; 
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Allow shrinking */
    overflow: hidden; /* Prevent blowout */
    /* outline: 2px solid blue; */
}

/* Selects the first child element of each - this fixed the donut canvas height from misbehaving */
.nobgCard > * {
    flex: 1 1 0; /* Equal distribution */
    min-height: 0; /* Critical for flex shrinking */
    overflow: hidden;
}

canvas {
    /* outline: 2px solid red; */
    width: 100% !important;
    height: 100% !important;
}

/* ==========================================================================
   SECTION HEIGHTS - Desktop Default TODO: remove class="chart-section" in html - there's no .css definition.
   ========================================================================== */

/* WORKS PERFECTLY IN DESKTOP.  DOESN'T AFFECT MOBILE - DO NOT TOUOCH */
#ReadingCategories .two-col {
    height: 350px;
    grid-template-rows: 1fr; /* WHY IS THERE A GRID-TEMPLATE-ROWS DEFINED HERE?? */
}

/* WORKS PERFECTLY IN DESKTOP.  DOESN'T AFFECT MOBILE - DO NOT TOUOCH */
#Pulse .two-col {
    height: 350px;
    grid-template-rows: 1fr; /* WHY IS THERE A GRID-TEMPLATE-ROWS DEFINED HERE?? */
}

/* WORKS IN DESKTOP.  DOESN'T AFFECT MOBILE - DO NOT TOUOCH   */
#PulsePressure .two-col {
    height: 350px;
    grid-template-rows: 1fr; /* WHY IS THERE A GRID-TEMPLATE-ROWS DEFINED HERE?? */
}

/* WORKS IN DESKTOP.  DOESN'T AFFECT MOBILE - DO NOT TOUOCH */
#SysAndDia .two-col {
    height: 400px;
    grid-template-rows: 1fr; /* WHY IS THERE A GRID-TEMPLATE-ROWS DEFINED HERE?? */ 
}

/* 7-Day Rolling Map section
   ROOT CAUSE: .card uses height:100% which requires an ancestor with a resolved
   px height. In .two-col the sibling columns give the grid row a natural height
   so 100% resolves fine. A .one-col grid with one child has nothing to measure —
   height:100% stays unresolved and Chart.js gets 0 at render time.
   FIX: Skip the height:100% chain entirely. Give .card a direct px height and
   let the chart-wrapper flex:1 fill it. No height needed on .one-col at all. */
#map7DayLineChart .card {
    height: 360px;
}

/* 7-Day Rolling combined section — same fix; taller to fit the controls bar */
#section-combined-rolling .card {
    height: 420px;
}

/* Raw Data table section */
#rawData .one-col {
    height: 450px; /* Note to self: The wrapper has its own independent height and toesn't stretch to fill its container */
    grid-template-rows: 1fr;
}

.measureName {
    font-size: 36px;
    line-height: 0.80;
    margin-bottom: 6px;
    grid-area: name;
}

.measureName small {
    display: block;
    font-size: 14px;
}

/* Fix: Removed display:flex to allow <br> to work. 
   Added vertical alignment for the High/Low labels. */
.measureHiLo { 
    font-size: 12px;
    grid-area: hilow; 
    text-align: right; 
    line-height: 1.2; /* Tighter line spacing for the Hi/Lo block */
    align-self: start;
}

/* Ensure the average number is large and aligned to the bottom right */
.measureAvg { 
    font-size: 35px;
    line-height: 1;
    grid-area: avg; 
    text-align: right;
    align-self: end;
}

    .measureAvg small { 
        font-size: 14px;
        grid-area: avg; 
        text-align: right; 
    }

/* Container for the 1st column of the 5-col grid */
.measureCardBadges {
    display: flex;
    gap: 10px;           /* Space between badges */
    height: 100%;        /* Fill the .five-col row height */
    width: 100%;
    align-items: stretch;
    /* outline: 2px solid magenta; <- in case I need it again. */
}

.badge-item {
    flex: 1; /* Force 50/50 split of the parent width */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    padding: 5px;
    color: #638eba;
    min-width: 0; /* Critical for flex-shrink */
}

/* Gradient backgrounds */
.badge-readings { background: linear-gradient(135deg, #0e161f, #1d3043); }
.badge-days { background: linear-gradient(135deg, #182737, #2a445f); }

/* .badge-readings { background: linear-gradient(135deg, #c1cbb5, #808f6e); } */
/* .badge-days { background: linear-gradient(135deg, #c1cbb5, #3a3845); } */

.badge-number {
    font-size: clamp(1.5rem, 4vw, 2.5rem); /* Responsive scaling font */
    font-weight: 700;
    line-height: 1;
}

.badge-label {
    font-size: clamp(0.6rem, 1.5vw, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-top: 4px;
}

.measureCard {
    background: #081618;
    border-radius: 4px;
    padding: 20px;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.08);*/
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name  hilow"
        "avg   avg";
    row-gap: 6px;
    position: relative; /* This keeps the warning icon "stuck" to this card */
    overflow: visible;
    color: #b2dfe5;
}

/* The warning badge */
.warning-badge {
    position: absolute;
    top: -10px;    /* Offsets it slightly above the top edge */
    right: -10px;  /* Offsets it slightly past the right edge */
    font-size: .9rem;
    display: none; /* Hidden by default */
    z-index: 10;   /* Ensures it stays on top of other elements */
}

/* Ensure the aggregate card doesn't wrap its numbers */
    #periodAggregateSummaryCard table {
        width: 100%;
        white-space: nowrap;
    }

/* Combined Rolling Controls - DESKTOP (Issue 1a) */
.rolling-controls-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.rolling-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    background: #f0f2f5;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.control-label {
    font-weight: 600;
    margin-right: 5px;
}

/* DESKTOP: Radio buttons in a horizontal row */
.radio-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.control-option {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.sys-text { color: #d32f2f; font-weight: 600; }
.dia-text { color: #1976d2; font-weight: 600; }


/* heatmap wrapper that respects the flex layout limits */
.heatmap-wrapper {
    height: 100%;
    overflow-x: auto; 
}

/* Keep the min-width - this activates the scrollbar in mobile. */
.heatmap-scroll-area {
    min-width: 700px;  
    height: 100%;
    overflow-y:hidden;
}


/* ==========================================================================
   RAW DATA TABLE STYLES
   ========================================================================== */

/* The table itself incl. the vertical scrollbar (not the card & not the section) */
.bp-raw-table-wrapper {
    max-height: 400px; 
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    /* outline: 1px dashed orange; */
}

.bp-raw-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    /* outline: 1px dashed blue; */
}

.bp-raw-table th {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 10;
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid #dee2e6;
}

.bp-raw-table td {
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
}

.bp-risk { background-color: #fff4f4; color: #d32f2f; font-weight: bold; }

/* All standard cells: Shrink to fit, No wrapping */
.bp-raw-table th,
.bp-raw-table td {
    white-space: nowrap;
    padding: 8px 10px;
    text-align: left;
    font-size: 0.8rem;
}

/* 3. The "Greedy" Column: Comments takes all leftover space */
.bp-raw-table .comments-col {
    width: auto !important;
    white-space: normal !important;
    word-break: break-word;
    text-align: left;
    min-width: 200px; /* Gives it room to be the primary 'text' column */
}


/* ==========================================================================
   MEDIA QUERIES 
   ========================================================================== */

/* TABLET VIEW (Under 1024px) */
@media (max-width: 1024px) {
    .five-col { grid-template-columns: 1fr 1fr; }
    .three-col { grid-template-columns: 1fr 1fr; }
}

/* MOBILE VIEW (Under 768px - Targets your TCL phone width) */
@media (max-width: 768px) {

    /* Dissolve the containers so the nav can stick to the whole page.
       display:contents removes the box — children become direct flow items,
       which is what lets .nav-container sticky-escape the header. */
    .header, 
    .header__content {
        display: contents; 
    }

    /* Style the nav to be the new top of the page — sticky independently */
    .nav-container {
        position: sticky;
        top: 0;
        z-index: 5003;
        background-color: var(--band-colour-dark);
        padding: 15px 0;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* .header-scrolls is a real box (not dissolved), so it CAN paint its own
       background. It wraps header-title and header-btnHelp together and scrolls
       away naturally while the nav above stays stuck. */
    .header-scrolls {
        background-color: var(--band-colour-dark);
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding: 10px 0 15px;
    }

    .header-title {
        text-align: center;
        margin-left: 0; /* Reset desktop margin-left: auto */
        padding: 3px 0;
    }

    /* Force all grid layouts to single column for a mobile phone */
    .two-col, .three-col, .five-col, .one-col {
        grid-template-columns: 1fr !important;
    }
    
    /* Mobile: Remove desktop section heights - let wrapper heights control */
    #ReadingCategories .two-col,
    #Pulse .two-col,
    #PulsePressure .two-col,
    #SysAndDia .two-col,
    #rawData .one-col {
        height: auto !important;
    }

    #map7DayLineChart .card { height: 300px; }

    
    #categoryChart { height: 250px !important; } /* WORKS ON MOBILE, DOES NOT AFFECT DESKTOP - DO NOT TOUCH */
    #bpScatterChart { height: 250px !important; }  /* WORKS ON MOBILE, DOES NOT AFFECT DESKTOP - DO NOT TOUCH */
    #pulseLineChart { height: 250px !important; } /* WORKS ON MOBILE, DOES NOT AFFECT DESKTOP - DO NOT TOUCH */
    #pulseHistogram { height: 200px !important; } /* WORKS ON MOBILE, DOES NOT AFFECT DESKTOP - DO NOT TOUCH */
    #pulsePressureLineChart { height: 250px !important; } /* WORKS ON MOBILE, DOES NOT AFFECT DESKTOP - DO NOT TOUCH */
    #pulsePressureHistogram { height: 200px !important; } /* WORKS ON MOBILE, DOES NOT AFFECT DESKTOP - DO NOT TOUCH */
    #sysAndDiaChart { height: 250px !important; } /* WORKS ON MOBILE, DOES NOT AFFECT DESKTOP - DO NOT TOUCH */
    #boxWhiskerChart { height: 300px !important; } /* WORKS ON MOBILE, DOES NOT AFFECT DESKTOP - DO NOT TOUCH */
    #map7DayChart { height: 250px !important; } /* WORKS ON MOBILE, DOES NOT AFFECT DESKTOP - DO NOT TOUCH */
    #combinedRollingChart { height: 250px !important; } /* TODO: double check - DO NOT TOUCH */


    /* Tighten up summary cards for small screens */
    #readingCategoriesSummaryCard {
        font-size: 11px !important;
        padding: 3px;
    }
    
    .nobgCard {
        border-radius: 8px;
        /* border: 1px solid #3D444D; */
    }

    /* MOBILE: 7 day rolling SD radio buttons - Stack everything vertically */
    /* 1. Force the heading and the control box to stack vertically */
    .rolling-controls-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        gap: 5px; /* Reduced from 10px for tighter spacing */
        text-align: center;
        flex: 0 0 auto !important; /* Don't grow, don't shrink, auto size */
    }

    /* 2. Remove any side-margins on the title so it centers perfectly */
    .rolling-controls-container h3 {
        margin: 0 0 5px 0 !important;
        text-align: center;
        width: 100%;
    }

    /* Stack the whole control box vertically */
    .rolling-controls {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    /* Center the "Standard Deviation Band:" text */
    .control-label {
        text-align: center;
        width: 100%;
        font-weight: bold;
        font-size: 13px;
        margin-bottom: 4px;
        margin-right: 0; /* Override desktop margin */
    }

    /* Make the buttons sit in a nice centered row underneath the text */
    .radio-group {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 15px; /* Plenty of space between Sys, Dia, No Band */
        width: 100%;
    }

    .control-option {
        font-size: 14px;
        white-space: nowrap;
    }

    .info-drawer {
        width: 100vw; /* Use Viewport Width to be explicit */
        max-width: 100%;
    }

    .nobgCard:has(#readingCategoriesSummaryCard) {
        height: 200px;
        min-height: 200px;
        max-height: 200px;
    }

    #readingCategoriesSummaryCard {
        height: 100%; /* Critical! */
    }

    /* Hide specific columns in the raw data table on mobile to keep things readable */
    .hide-mobile {
        display: none !important;
    }
}

/* Desktop: .three-col and Cards  TODO: Try and get rid of this hack @media*/
@media (min-width: 769px) {
    .three-col { 
        grid-template-columns: .95fr .4fr .15fr;
        height: 155px;
        align-items: stretch;
    }

    .nobgCard:has(.heatmap-wrapper),
    .nobgCard:has(#normalDonutChart),
    .nobgCard:has(#readingCategoriesSummaryCard) {
        height: 100%; /* Use grid height */
        min-height: unset;
        max-height: unset;
    }

    .nobgCard:has(#normalDonutChart) {
        width: 180px;
    }
}

/* ==========================================================================
   DOCUMENTATION SLIDING DRAWER
   ========================================================================== */

.info-icon{
    cursor: pointer;
}

.info-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 800px;
    background: #ffffff;
    box-shadow: -5px 0 15px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 5004;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: scroll;
    box-sizing: border-box;
}

.info-drawer.open {
    transform: translateX(0);
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 5003;
}

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

/* Drawer Header Layout */
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eeeeee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}


/* The "x" Button Styling */
.close-btn {
    background: #f5f5f5;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    color: #888;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Makes it a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.close-btn:hover {
    background: #e0e0e0;
    color: #333;
}

.close-btn:active {
    background: #d0d0d0;
}

/* Drawer Content Styling */
.drawer-content h3 {
    font-size: 1.1rem;
    border-bottom: 1px solid #ddd;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
}

.drawer-content p {
    font-size: 0.95rem;
    line-height: 1.2;
    color: #555;
}

.drawer-header h2 {
    margin: 0;
    font-size: 1.4rem;
    color: #333;
}

.drawer-content li {
    list-style: disc;
    margin-left: 10px;
}

/* Minimalist List for Drawer */
.doc-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.doc-list li {
    margin-bottom: 10px;
}



.accordion .doc-container {
    position: relative;
    margin: 5px 5px;
    background-color: #F6F5F7;
}

.accordion .label {
    position: relative;
    padding: 10px 0;
    font-size: 20px;
    color: black;
    cursor: pointer;
}

.accordion .label::before {
    content: "+";
    color: black;
    position: absolute;
    top: 50%;
    right: -0.1px;
    font-size: 30px;
    transform: translateY(-50%);
}

.accordion .doc-content {
    position: relative;
    max-height: 0;
    text-align: justify;
    overflow: hidden;
    transition: 0.5s;
}

.accordion .doc-container.active .doc-content {
    /* min-height: 150px; */
    max-height: 1000px;
    padding: 4px 4px;
    background-color: white;
}

.accordion .doc-container.active .label::before {
    content: "-";
    font-size: 30px;
}

/* TODO - add this to the root and rename the ids in docLibrary.js properly */
.doc-ReadingCategories { list-style: disc; padding-left: 15px; }
#normal::marker { color: #30693c; font-size: 30px }
#elevated::marker { color: #204929; font-size: 30px }
#hyper1::marker { color: #eeb649; font-size: 30px }
#hyper2::marker { color: #d95139; font-size: 30px }
#crisis::marker { color: #ad322d; font-size: 30px }

.doc-ul { list-style: disc; padding-left: 15px; }

.doc-pp { list-style: disc; padding-left: 15px; }
#narrowedpp::marker { color: #9be9a8; font-size: 30px }
#normalpp::marker { color: #216e39; font-size: 30px }
#widenedpp::marker { color: #ffcc00; font-size: 30px }
#verywidenedpp::marker { color: #c70000; font-size: 30px }

/* ==========================================================================
   EXCEPTION HANDLING VISUAL DIVs
   ========================================================================== */

.noscript-warning {
  background: #ffdddd;
  color: #900;
  padding: 15px;
  border: 1px solid #cc0000;
  margin: 20px;
  border-radius: 6px;
  font-weight: bold;
  text-align: center;
}

.global-error-banner {
    background: #fff3cd;
    color: #664d03;
    padding: 12px 20px;
    border-bottom: 2px solid #ffecb5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    position: relative; /* Stays above content but scrolls with page */
    z-index: 5001;
}

.chart-error {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    color: #a00;
    background: #fff0f0;
    border: 1px dashed #cc0000;
    border-radius: 6px;
    font-size: 13px;
    font-family: "Trebuchet MS", sans-serif;
}