:root {
    --primary-bg-color: #f6f8fb;
    --primary-bg-grey: #eeeeee;
    --primary-bg-lt: #f6f8fb;
    --primary-text-color: #111827;
    --title-text-color: #1565C0;
    --muted-text-color: #434343;
    --card-bg-color: #ffffff;
    --card-text-color: #111827;
    --common-border: #e5e7eb;
    --common-shadow: 0 1px 2px rgba(0,0,0,0.04);
    --common-shadow-hover: 0 6px 18px rgba(0,0,0,0.08);
    --common-radius: 12px;
}

body {
    font-family: "proxima-nova", sans-serif;
    text-align: center;
    font-size: 100%;
    font-weight: 100;
}

h1 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

h2 {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

h3 {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

h4 {
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

/*
 * ****************************************************** GENERICS
*/

.label {
    font-size: 0.75rem;
    color: var(--muted-text-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.value {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

/*
 * **************************************************************** WRAPPER
*/

.wrapper{
    background-color: #fff;
    border: 1px solid #f0f3f7;
    -webkit-transition: -webkit-transform .25s cubic-bezier(.215,.61,.355,1),-webkit-box-shadow .25s cubic-bezier(.215,.61,.355,1);
    transition: -webkit-transform .25s cubic-bezier(.215,.61,.355,1),-webkit-box-shadow .25s cubic-bezier(.215,.61,.355,1);
    transition: transform .25s cubic-bezier(.215,.61,.355,1),box-shadow .25s cubic-bezier(.215,.61,.355,1);
    transition: transform .25s cubic-bezier(.215,.61,.355,1),box-shadow .25s cubic-bezier(.215,.61,.355,1),-webkit-transform .25s cubic-bezier(.215,.61,.355,1),-webkit-box-shadow .25s cubic-bezier(.215,.61,.355,1);
    padding:  30px;

    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));

    max-width: 90%;

    margin-top:  5%;
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    padding-top:  2%;

    border-radius:  0.25em;

    background-image: url("../img/ux/swatch_ur.png");
    background-position: top right;
    background-repeat: no-repeat;
}

/*
 * **************************************************************** BORDERS
*/

.bottom-border {border-bottom: 1px solid #a8dade}
.top-border {border-top: 1px solid #a8dade;}

/*
 * **************************************************************** HEADER
*/

.header {
    margin: 15px;
    margin-bottom: 40px;
}

.header .feature-img {
    height: 200px;
}

.header .top-left {}
.header .top-center {}
.header .top-center .pfp {margin:15px;}
.header .top-center .title {font-size : 2.5em;}
.header .top-center .subtitle {font-size : 1.5em;}

.header .top-right {
    display: inline-table;
    width: 100%;
    vertical-align: middle;
}

.header .top-right p {
    float: right;
    text-align: right;
    width: 90%;
}

/*
 * **************************************************************** CONTENT
*/

.content {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
}
.content .middle-left {}
.content .middle-center {}
.content .middle-right {}

/*
 * ****************************************************** FOOTER LAYOUT
*/

.footer {
    min-height: 100px;
    /*
    background-image: url("../img/branding/powered_by_nimble.png");
    background-size:   225px;
    background-repeat: no-repeat;
    background-position: right bottom;
    */
}

.footer img.powered_by {
    display: inline-flex;
    margin-top: 125px;
    margin-right: 225px;
    width: 275px;
    height: auto;
}

.footer .bottom-left {}
.footer .bottom-center {}
.footer .bottom-right {}

/*
 * **************************************************************** SUBSECTION
*/

.subsection {
    margin: 15px;
    text-align: left;
}

.subsection div.title {
    font-size : 1.5em;
    padding: 15px;
    padding-left: 55px;
    border-bottom: 1px solid #a8dade;
    background-repeat: no-repeat;
    background-position: left center;
}

.subsection .body {
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 10px;
}

/*
 * ****************************************************** POST LAYOUT
*/

.post {}

h1.post-title {
    font-size: 1.5rem;
    text-align: left;
    color: var(--title-text-color);
    padding-top: 15px;
    padding-bottom: 5px;
    padding-left: 20px;
}

h3.post-date {
    font-size: 1rem;
    text-align: left;
    color: var(--muted-text-color);
    padding-top: 5px;
    padding-bottom: 15px;
    padding-left: 20px;
}

.post .date {}
.post .body {}


/*
 * **************************************************************** LISTS
*/

ul.checklist li {
    list-style: none;
    padding: 10px;
    padding-left: 30px;
    margin-left: -30px;
    background-image: url("../img/icons/checkbox.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
}

ul.arrowlist li {
    list-style: none;
    padding: 10px;
    padding-left: 30px;
    margin-left: -30px;
    background-image: url("../img/icons/arrow_rt.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
}

/*
 * **************************************************************** BUTTONS
*/


* {box-sizing: border-box;}

*:focus,
*:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.button-wrapper {
    display: inline-flex;
    list-style: none;
}

.button-wrapper.top {
    margin-top: 100px;
}

.button-wrapper.bottom {
    margin-top: 25px;
}

.button-wrapper img.icon-img {
    width: 20px;
}

.button-wrapper .icon {
    position: relative;
    background: #ffffff;
    border-radius: 50%;
    padding: 15px;
    margin: 10px;
    border: 1px solid #a8dade;
    width: 60px;
    height: 60px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.button-wrapper .tooltip {
    position: absolute;
    top: 0;
    font-size: 14px;
    background: #ffffff;
    color: #303030;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    text-align: center;
    border: 2px solid #fff;
    width: 150px;
    background: #fff;
}

.button-wrapper .tooltip::before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    background: #ffffff;
    bottom: -3px;
    left: 50%;
    transform: translate(-50%) rotate(45deg);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.button-wrapper .icon:hover {border: 2px solid #fff;}

.button-wrapper .icon:hover .tooltip {
    top: -45px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.button-wrapper .icon:hover span,
.button-wrapper .icon:hover .tooltip {
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.button-wrapper .contact:hover {
    background: #f1fbf0;
    color: #303030;
}


.button-wrapper .contact:hover .tooltip::before {
    background: #f1fbf0;
    color: #303030;
}

.button-wrapper .contact:hover .tooltip {
    background: #f1fbf0;
    color: #303030;
    border: 2px solid #f1fbf0;
}


.button-wrapper .readme:hover {
    background: #f1fbf0;
    color: #303030;
}


.button-wrapper .readme:hover .tooltip::before {
    background: #f1fbf0;
    color: #303030;
}

.button-wrapper .readme:hover .tooltip {
    background: #f1fbf0;
    color: #303030;
    border: 2px solid #f1fbf0;
}


/*
 * ****************************************************** CONTENT CONTAINERS
*/

.container.main {
    padding: 1.5rem 1rem;
}

.report-row {}
.report-col-12 {}
.report-col-9 {}
.report-col-3 {}
.text-container {}
.lead {}

.sidebar {}
.sidebar-body {}
.sidebar-table {
    width: 95%;
    margin-top: 35px;
    margin-bottom: 15px;
}

/*
 * ****************************************************** CARDS
*/

.card-row {}

.kpi-row {
    min-height: 50px;
    margin-top: 45px;
    margin-bottom: 25px;
}
.card-col-3 {}

.card {
    color: var(--card-text-color);
    background: var(--card-bg-color);
    border: 1px solid var(--common-border);
    border-radius: var(--common-radius);
    box-shadow: var(--common-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    padding: 5px;
    width: 95%;
    margin-bottom: 5px;
    margin-top: 5px;
}

.card-header {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--card-text-color);
    background: transparent;
    border-bottom: 1px solid var(--common-border);
}

.card-body {}

/*
 * ****************************************************** YEAR ROWS
*/

.year-row {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 15px;
    text-align: left;
}

h2.year-title {
    color: var(--title-text-color);
    padding-top: 15px;
    padding-bottom: 15px;
}

h4.year-subtitle {
    padding-top: 5px;
    padding-bottom: 5px;
    color: var(--muted-text-color);
    font-weight: 400;
}

.year-description {
    padding-top: 5px;
    padding-bottom: 5px;
}

.year-date {
    background-image: url("../img/icons/calendar.png");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 0 -2px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 25px;
}

table.year-table {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

table.year-table td.year-label {
    font-size: 85%;
    font-weight: bold;
    border-bottom: 1px solid var(--common-border);
}

table.year-table td.year-name {
    padding-bottom: 25px;
}

.year-metrics {
    padding-top: 15px;
    padding-bottom: 15px;
}


/*
 * **************************************************************** WRAP IT
*/

.wrap-it-up {
    text-align: center;
    font-weight: bold;
}


/*
 * ====================================================================
 * Keystone Ledger Lens additions below.
 * Everything in this section is new for the PA Treasury Checkbook
 * report and follows the color/spacing/radius tokens defined at the
 * top of this file (--title-text-color, --muted-text-color,
 * --common-border, --common-radius, --common-shadow, etc.) rather than
 * introducing a second, competing visual language.
 * ====================================================================
*/

/*
 * ------------------------------------------------------------- LINKS
*/

.pal-link {
    color: var(--title-text-color);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-bottom-color 0.15s ease, color 0.15s ease;
}

.pal-open-link {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--title-text-color);
    cursor: pointer;
    margin-left: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.pal-open-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.pal-link:hover,
.pal-link:focus-visible {
    border-bottom-color: var(--title-text-color);
}

.pal-link:focus-visible {
    outline: 2px solid var(--title-text-color);
    outline-offset: 2px;
    border-radius: 2px;
}

.pal-hint {
    color: var(--muted-text-color);
    font-size: 0.85rem;
}

/*
 * --------------------------------------------------------- KPI EXTRAS
*/

.pal-subvalue {
    font-size: 0.8rem;
    color: var(--muted-text-color);
    margin-top: 0.15rem;
}

.pal-positive { color: #1d7a4c; }
.pal-negative { color: #b3261e; }

.pal-asof {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.pal-amount-cell {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/*
 * ------------------------------------------------------ REPORT DATE PANEL
*/

.card-report-date {
    background: linear-gradient(135deg, #ffffff 0%, var(--primary-bg-lt) 100%);
}

/* Forces the card to actually use the full width of its column, rather
   than the generic .card rule's width:95% -- needed once the redundant
   nested .container was removed from this row (see template comment),
   since that container's own auto-centering had been masking the
   95%-vs-100% gap on one side. */
.pal-card-full-width {
    width: 100%;
}

.pal-report-date-heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--card-text-color);
    margin-bottom: 0.75rem;
}

.pal-report-date-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.pal-stat {
    min-width: 120px;
}

.pal-stat-payee {
    font-size: 1.1rem;
    word-break: break-word;
}

/*
 * ------------------------------------------------------------- CHARTS
*/

.pal-chart-card {
    background: var(--card-bg-color);
    border: 1px solid var(--common-border);
    border-radius: var(--common-radius);
    box-shadow: var(--common-shadow);
    padding: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    height: 300px;
    position: relative;
}

/*
 * --------------------------------------------------- PRIOR YEARS TABLE
*/

.pal-prior-years-table {
    margin-top: 0.5rem;
}

.pal-prior-years-table th {
    font-size: 0.75rem;
    color: var(--muted-text-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--common-border);
}

.pal-prior-years-table td {
    padding: 0.5rem 0.5rem 0.5rem 0;
    border-bottom: 1px solid var(--common-border);
}

/*
 * ----------------------------------------------------- SIDEBAR TABLES
*/

.sidebar-table table.pal-table td {
    font-size: 0.85rem;
    vertical-align: top;
}

.sidebar-table table.pal-table td:first-child {
    word-break: break-word;
    max-width: 140px;
}

/*
 * --------------------------------------------------------------- MODAL
*/

.pal-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    z-index: 1000;
    padding: 2rem 1rem;
    overflow-y: auto;
}

.pal-modal-overlay.pal-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

body.pal-modal-active {
    overflow: hidden;
}

.pal-modal {
    background: var(--card-bg-color);
    border-radius: var(--common-radius);
    box-shadow: var(--common-shadow-hover);
    width: 100%;
    max-width: 880px;
    margin-top: 2rem;
    overflow: hidden;
}

.pal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--common-border);
}

.pal-modal-title {
    margin: 0;
    color: var(--title-text-color);
    font-size: 1.25rem;
}

.pal-modal-close {
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--muted-text-color);
    cursor: pointer;
    padding: 0 0.25rem;
}

.pal-modal-close:hover,
.pal-modal-close:focus-visible {
    color: var(--card-text-color);
}

.pal-modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
    max-height: 75vh;
    overflow-y: auto;
}

.pal-modal-chart-wrap {
    position: relative;
    height: 240px;
    margin-bottom: 1.25rem;
}

.pal-modal-table-wrap {
    text-align: left;
}

/*
 * ----------------------------------------------- SORTABLE / PAGED TABLE
*/

table.pal-table {
    width: 100%;
    border-collapse: collapse;
}

table.pal-table th,
table.pal-table td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--common-border);
    font-size: 0.9rem;
}

table.pal-table thead th {
    font-size: 0.75rem;
    color: var(--muted-text-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

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

th.pal-sortable:hover {
    color: var(--title-text-color);
}

th.pal-sortable::after {
    content: "\2195";
    display: inline-block;
    margin-left: 0.3rem;
    opacity: 0.35;
    font-size: 0.75rem;
}

th.pal-sort-asc::after {
    content: "\2191";
    opacity: 1;
}

th.pal-sort-desc::after {
    content: "\2193";
    opacity: 1;
}

td.pal-empty {
    text-align: center;
    color: var(--muted-text-color);
    padding: 2rem 0;
}

.pal-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 1rem;
}

.pal-pagination button {
    border: 1px solid var(--common-border);
    background: var(--card-bg-color);
    color: var(--card-text-color);
    border-radius: 6px;
    padding: 0.3rem 0.65rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.pal-pagination button:hover:not(:disabled) {
    border-color: var(--title-text-color);
    color: var(--title-text-color);
}

.pal-pagination button:disabled {
    opacity: 0.4;
    cursor: default;
}

.pal-pagination button.pal-page-active {
    background: var(--title-text-color);
    border-color: var(--title-text-color);
    color: #fff;
}

.pal-page-summary {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--muted-text-color);
    white-space: nowrap;
}

/*
 * -------------------------------------------------- RESPONSIVE / MOBILE
*/

@media (max-width: 768px) {
    .pal-report-date-stats {
        gap: 1rem;
        justify-content: flex-start;
    }

    .pal-modal {
        margin-top: 0.5rem;
    }

    .pal-page-summary {
        margin-left: 0;
        width: 100%;
        order: 99;
    }
}

/*
 * ------------------------------------------------------------ RADAR CHART
*/

.pal-radar-card {
    margin-top: 1rem;
}

.pal-radar-wrap {
    position: relative;
    height: 320px;
    margin-top: 0.5rem;
}

.pal-kpi-timeline-row {
    min-height: 0;
}

.pal-timeline-card {
    width: 100%;
    padding: 0.75rem 1rem 0.5rem;
}

.pal-timeline-wrap {
    position: relative;
    height: 240px;
    margin-top: 0.5rem;
}

/* The mobile horizontal-bar version of the timeline scrolls vertically
   rather than compressing every month into limited width -- a fixed
   container height with overflow-y:auto, tall enough to show several
   months at once without being unusably short. Hidden by default;
   .pal-timeline-mobile-only flips this on below the breakpoint (see
   the mobile section near the end of this file), and
   .pal-timeline-desktop-only does the reverse for the line chart. */
.pal-timeline-bar-wrap {
    position: relative;
    height: 480px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.pal-timeline-mobile-only {
    display: none;
}

/*
 * -------------------------------------------------- REDUCED MOTION
*/

@media (prefers-reduced-motion: reduce) {
    .card,
    .pal-link {
        transition: none;
    }
}


/*
 * ====================================================================
 * Additions: Rolling 30 Days, combined info card, current-year pie
 * charts, ACH/Grant + Common Descriptions sections.
 * ====================================================================
*/

/*
 * ------------------------------------------------------- 4, 6 & 8 COLUMN GRID
 * The existing grid only defined 3/9/12-column helpers (card-col-3,
 * report-col-9, report-col-12). The 2nd summary row needs a 66%/33%
 * split (card-col-8 + card-col-4); the new ACH-by-description/
 * ACH-by-account pie cards need an even 50/50 split (card-col-6).
*/

.card-col-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding-right: 8px;
    padding-left: 8px;
}

.card-col-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 8px;
    padding-left: 8px;
}

.card-col-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
    padding-right: 8px;
    padding-left: 8px;
}

@media (max-width: 900px) {
    .card-col-4,
    .card-col-6,
    .card-col-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*
 * ------------------------------------------------------- BLUE AMOUNT
 * Used for the rolling-30-days total and the "$X through {date}"
 * subtitle above the trailing-12-month trend chart, per the
 * "highlight Total Spend in blue, matching" requirement.
*/

.pal-blue-amount {
    color: var(--title-text-color);
    font-weight: 700;
}

/*
 * ----------------------------------------------------- ROLLING 30 DAYS
*/

.pal-rolling-30-table {
    margin-top: 1rem;
}

/*
 * ------------------------------------------------------ STACKED CARD
 * The combined Grand Total / Total Records / Direct Vendor / ACH /
 * Unparsed-Date / Data As Of card -- one card, six items stacked
 * vertically with a light divider between each.
*/

.pal-stacked-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: 100%;
}

.pal-stacked-item {
    padding: 0.15rem 0;
}

.pal-stacked-divider {
    border-top: 1px solid var(--common-border);
    margin: 0;
}

/*
 * --------------------------------------------------------- PIE CARDS
 * Each pie card (.pal-pie-card) is split into two halves via a nested
 * .row: a legend table on the left (.pal-pie-legend-col) and the titled
 * chart on the right (.pal-pie-chart-col). The .pal-swatch color dots in
 * the legend MUST visually match the chart's slice colors -- both sides
 * draw from the same palette (chart_palette in the template, exactly
 * mirroring CHART_PALETTE in dashboard.js -- see the template comment
 * for why that's duplicated rather than shared).
*/

.pal-pie-card {
    margin-bottom: 16px;
}

.pal-pie-card-row {
    align-items: center;
}

.pal-pie-legend-col {
    border-right: 1px solid var(--common-border);
}

@media (max-width: 700px) {
    .pal-pie-legend-col {
        border-right: none;
        border-bottom: 1px solid var(--common-border);
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
}

.pal-pie-legend-table th,
.pal-pie-legend-table td {
    font-size: 0.82rem;
    padding: 0.35rem 0.5rem;
}

.pal-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.pal-pie-chart-col .label {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--title-text-color);
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}

.pal-pie-legend-row td.pal-link-cell {
    color: var(--title-text-color);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-bottom-color 0.15s ease;
}

.pal-pie-legend-row:hover td.pal-link-cell {
    border-bottom-color: var(--title-text-color);
}

.pal-pie-card-wrap {
    position: relative;
    height: 220px;
    margin-top: 0.5rem;
}

.pal-pie-legend-row {
    cursor: pointer;
}

.pal-pie-legend-row:hover {
    background-color: var(--primary-bg-lt);
}

/*
 * ----------------------------------------------------- HORIZONTAL BARS
 * Used by the 4th column of Prior Years and the 3rd column of ACH /
 * Grant Disbursements by Year -- each <td class="pal-bar-col"> contains
 * one .pal-hbar div whose inline width (set per-row by the template,
 * scaled to that table's own max value) turns the column into a simple
 * horizontal bar chart.
*/

.pal-bar-col {
    width: 30%;
    min-width: 120px;
}

/* Below ~430px (large-phone breakpoint) a 120px-minimum bar column
   forces the remaining text columns (Year/Total/YoY, or
   Description/Total) into an unreadably narrow space on Prior Years,
   ACH/Grant Disbursements, and Most Common Descriptions. All three
   tables share the .pal-bar-col class, so one rule covers all three --
   the bar is decorative (the number next to it already conveys the
   same information), so hiding it loses no data. */
.pal-hbar {
    height: 20px;
    background-color: #fd8d9e;
    border-radius: 3px;
    min-width: 2px;
}

/* Rolling 30 Days table bars use a complementary teal rather than the
   same pink used in Prior Years / ACH / Descriptions, so the two
   contexts are visually distinct at a glance. #9ddfd4 is a soft
   teal-green that sits opposite #fd8d9e on the color wheel without
   clashing with any other palette color on the page. */
.pal-hbar-rolling {
    background-color: #16365b;
}

/*
 * ----------------------------------------------- ACH / DESCRIPTIONS
 * Both new full-width sections reuse .year-row/.year-title/.pal-table
 * styling already defined above (same look/feel as Prior Years, per
 * the requirement), so only the hint paragraph needs its own rule.
*/

.pal-ach-row .pal-hint,
.pal-descriptions-row .pal-hint {
    margin-bottom: 1rem;
    max-width: 65ch;
}

/*
 * ----------------------------------------------- README
*/

.pal-readme-loading,
.pal-readme-error {
    color: var(--muted-text-color);
    padding: 1.5rem 0;
    text-align: center;
}

.pal-readme-error a {
    color: var(--title-text-color);
}

.pal-readme-body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--card-text-color);
}

.pal-readme-body h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--title-text-color);
    margin: 0 0 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--common-border);
}

.pal-readme-body h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--card-text-color);
    margin: 1.75rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--common-border);
}

.pal-readme-body h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--card-text-color);
    margin: 1.25rem 0 0.35rem;
}

.pal-readme-body p {
    margin: 0 0 0.9rem;
}

.pal-readme-body ul,
.pal-readme-body ol {
    margin: 0 0 0.9rem 1.4rem;
    padding: 0;
}

.pal-readme-body li {
    margin-bottom: 0.35rem;
}

.pal-readme-body a {
    color: var(--title-text-color);
}

.pal-readme-body a:hover {
    text-decoration: underline;
}

.pal-readme-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.75rem 0 1rem;
    font-size: 0.88rem;
}

.pal-readme-body th {
    background: var(--primary-bg-grey);
    font-weight: 600;
    text-align: left;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--common-border);
}

.pal-readme-body td {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--common-border);
    vertical-align: top;
}

.pal-readme-body tr:nth-child(even) td {
    background: var(--primary-bg-lt);
}

.pal-readme-body hr {
    border: none;
    border-top: 1px solid var(--common-border);
    margin: 1.5rem 0;
}

.pal-readme-body code {
    background: var(--primary-bg-grey);
    border-radius: 3px;
    padding: 0.1em 0.35em;
    font-size: 0.88em;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.pal-readme-body strong {
    font-weight: 700;
}

/*
 * ------------------------------------------------------------ WIR CARD
 * The sidebar WIR Payee card stacks three visuals vertically (radar,
 * then two pie+legend blocks) inside the narrow ~25%-width sidebar
 * column, per the requirement that it stay within that column rather
 * than spanning the full row like the ACH breakdown cards.
*/

.pal-wir-card {
    text-align: left;
}

/* The card title was previously just .label -- the same small, muted,
   uppercase style used for KPI card labels everywhere else ("GRAND
   TOTAL", "TOTAL RECORDS", etc.), which reads as a minor field label
   rather than a section heading. This gives it its own larger, bolder,
   title-cased treatment so it actually reads as the heading for the
   whole card, similar in weight to h2.year-title used elsewhere on the
   page (but sized for the narrower sidebar column it lives in). */
.pal-wir-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--title-text-color);
    text-transform: capitalize;
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}

.pal-wir-card .pal-hint {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}

.pal-wir-pie-block {
    margin-top: 1.5rem;
}

.pal-wir-pie-block .label {
    margin-bottom: 0.25rem;
}

/* The WIR legend tables (#pal-wir-description-legend,
   #pal-wir-account-legend) inherit table.pal-table's default cell
   padding (0.5rem 0.6rem) and table-hover's bootstrap padding, which
   together inset the table's visible content from the card's edges.
   Zeroing the table's own margin and tightening cell horizontal
   padding lets it run flush to the card boundary instead, and a
   smaller font-size (vs. the page-wide 0.9rem table.pal-table default)
   keeps the slim 2-column layout from feeling cramped at that width.
   Scoped to these two specific tables by ID rather than changing
   table.pal-table globally, since every other table on the page should
   keep its current spacing/size. */
#pal-wir-description-legend,
#pal-wir-account-legend {
    margin: 0;
}

#pal-wir-description-legend th,
#pal-wir-description-legend td,
#pal-wir-account-legend th,
#pal-wir-account-legend td {
    padding-left: 0;
    padding-right: 0;
    font-size: 0.82rem;
}

/*
 * ------------------------------------------------- DESCRIPTION BREAKDOWNS
 * 10 per-description payee pie cards arranged as 5 rows × 2 cards.
 * Each card: title, pie chart stacked on top, legend table below.
*/

.pal-desc-breakdown-row {
    margin-top: 1.5rem;
}

.pal-desc-card {
    height: 100%;
}

.pal-desc-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--title-text-color);
    margin-bottom: 0.35rem;
}

.pal-desc-legend {
    margin-top: 0.75rem;
}

.pal-desc-legend th,
.pal-desc-legend td {
    font-size: 0.82rem;
    padding: 0.3rem 0.4rem;
}

.pal-wir-recent-card {
    margin-top: 1rem;
    text-align: left;
}

/* =================================================================
 * EXPANDABLE INVOICE ROWS
 * ================================================================= */

.pal-invoice-trigger {
    cursor: pointer;
    text-decoration: underline dotted;
}

.pal-invoice-trigger:hover {
    text-decoration: underline;
}

tr.pal-invoice-row-open td {
    background-color: var(--primary-bg-color);
}

tr.pal-invoice-row {
    background-color: var(--card-bg-color);
}

td.pal-invoice-row-cell {
    padding: 0 !important;
    border-bottom: 2px solid var(--title-text-color);
}

.pal-invoice-row-close {
    display: block;
    margin-left: auto;
    margin-right: 0.75rem;
    margin-top: 0.5rem;
    background: none;
    border: 1px solid var(--common-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.1rem 0.5rem;
    color: var(--muted-text-color);
}

.pal-invoice-row-close:hover {
    color: var(--title-text-color);
    border-color: var(--title-text-color);
}

td.pal-invoice-row-cell .pal-invoice-content {
    padding: 0.75rem 1rem 1rem;
}

/* =================================================================
 * MODAL FOOTER — mirrors .pal-modal-header, sticky at bottom
 * ================================================================= */

.pal-modal-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--common-border);
    background: var(--card-bg-color);
    flex-wrap: wrap;
    font-size: 0.88rem;
    text-align: left;
}

.pal-modal-footer-label {
    color: var(--muted-text-color);
    font-weight: 600;
    white-space: nowrap;
    min-width: 5rem;
    transition: color 0.2s;
}

.pal-modal-footer-url {
    color: var(--title-text-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    cursor: pointer;
    font-size: 0.85rem;
}

.pal-modal-footer-url:hover {
    text-decoration: underline;
}

.pal-modal-footer-copy {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

.pal-modal-footer-copy img {
    width: 1rem;
    height: 1rem;
    display: block;
    opacity: 0.6;
}

.pal-modal-footer-copy:hover img {
    opacity: 1;
}

/* =================================================================
 * PERMALINK PAGE
 * ================================================================= */

.pal-permalink-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.pal-permalink-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--common-border);
}

.pal-permalink-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--title-text-color);
    margin: 0 0 0.2rem 0;
}

.pal-permalink-subtitle {
    font-size: 0.9rem;
    color: var(--muted-text-color);
    margin: 0;
}

.pal-permalink-back {
    font-size: 0.85rem;
    color: var(--muted-text-color);
    text-decoration: none;
}

.pal-permalink-back:hover {
    color: var(--title-text-color);
    text-decoration: underline;
}

.pal-permalink-chart-wrap {
    position: relative;
    height: 320px;
    margin-bottom: 2rem;
    background: var(--card-bg-color);
    border: 1px solid var(--common-border);
    border-radius: var(--common-radius);
    padding: 1rem;
    box-sizing: border-box;
}

.pal-permalink-invoice-wrap {
    margin-bottom: 2rem;
}

.pal-permalink-table-wrap {
    overflow-x: auto;
}

.pal-permalink-fallback-note {
    margin-top: 1rem;
    font-size: 0.82rem;
    color: var(--muted-text-color);
    font-style: italic;
}

.pal-permalink-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted-text-color);
}

.pal-permalink-empty a {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--title-text-color);
    text-decoration: none;
    font-weight: 600;
}

.pal-permalink-loading {
    color: var(--muted-text-color);
    font-style: italic;
    padding: 1rem 0;
}

/* =================================================================
 * INVOICE CONTENT — PA Treasury voucher HTML styled via their own
 * class names, scoped under .pal-invoice-content.
 * ================================================================= */

.pal-invoice-content {
    width: 100%;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--card-text-color);
}

/* Hide PA Treasury's own modal chrome */
.pal-invoice-content .modal-header { display: none !important; }
.pal-invoice-content .modal-body   { padding: 0 !important; }
.pal-invoice-content .modal-content { border: none; box-shadow: none; background: transparent; }

/* Status banner */
.pal-invoice-content .callout {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: var(--common-radius);
    margin-bottom: 1rem;
    font-size: 0.85rem;
    font-weight: 500;
}
.pal-invoice-content .callout.paid {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.pal-invoice-content .callout:not(.paid) {
    background-color: #fff8e1;
    color: #5d4037;
    border: 1px solid #ffe082;
}

/* Section headings */
.pal-invoice-content h4.title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--title-text-color);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--title-text-color);
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Payee + amount overview row */
/* overview rules moved to Step 4 below */

/* Suppress disclaimers only */
.pal-invoice-content em.small {
    display: none !important;
}

/* check-holder-payment visible but separated from check-holder-request */
.pal-invoice-content .check-holder-payment {
    display: block !important;
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid var(--common-border);
}

/* Step 1: Neutralise ALL Bootstrap/float layout helpers.
   Excludes .overview, .overview__addressee, .overview__charge since
   those need flex layout and are handled explicitly in Step 4 below. */
.pal-invoice-content .row {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    width: 100% !important;
}
.pal-invoice-content .fl,
.pal-invoice-content .fl-r,
.pal-invoice-content .fr {
    float: none !important;
}
.pal-invoice-content .p-0 { padding: 0 !important; }
.pal-invoice-content .mb-0 { margin-bottom: 0; }
.pal-invoice-content .col-md-3,
.pal-invoice-content .col-md-5,
.pal-invoice-content .col-md-6,
.pal-invoice-content .col-md-7,
.pal-invoice-content .col-sm-12,
.pal-invoice-content .col-sm-6,
.pal-invoice-content .col-6 {
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Step 2: Grid container override — after Step 1 so it wins */
.pal-invoice-content .pad-left .col-sm-12,
.pal-invoice-content .pad-left .col-sm-12.fl,
.pal-invoice-content .pad-left .col-sm-12.p-0,
.pal-invoice-content .pad-left .col-sm-12.p-0.fl {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Step 3: Grid cell padding — after .p-0 reset in Step 1 */
.pal-invoice-content .invoice-issued {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--common-border);
    border-right: 1px solid var(--common-border);
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: left;
    box-sizing: border-box;
}
.pal-invoice-content .invoice-issued:nth-child(even) { border-right: none; }
.pal-invoice-content .invoice-issued__title {
    font-size: 0.70rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-text-color);
    margin: 0 0 0.15rem 0;
}
.pal-invoice-content .invoice-issued__value {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--card-text-color);
    margin: 0;
}


/* Step 4: Overview two-column flex layout.
   MUST come after Step 1 because .overview, .overview__addressee and
   .overview__charge all carry col-sm-12 which Step 1 sets to
   display:block. These rules restore flex/two-column layout. */
.pal-invoice-content .overview,
.pal-invoice-content .col-sm-12.overview {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    margin-bottom: 1rem;
    background: var(--primary-bg-color);
    border: 1px solid var(--common-border);
    border-radius: var(--common-radius);
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
.pal-invoice-content .overview__addressee,
.pal-invoice-content .overview .col-md-7,
.pal-invoice-content .overview .col-sm-12.overview__addressee {
    display: block !important;
    flex: 1 1 50% !important;
    max-width: 50% !important;
    width: auto !important;
    padding: 10px 12px !important;
    border-right: 1px solid var(--common-border);
    text-align: left;
    overflow-wrap: break-word;
    box-sizing: border-box;
    float: none !important;
}
.pal-invoice-content .overview__charge,
.pal-invoice-content .overview .col-md-5,
.pal-invoice-content .overview .col-sm-12.overview__charge {
    display: block !important;
    flex: 1 1 50% !important;
    max-width: 50% !important;
    width: auto !important;
    padding: 10px 12px !important;
    text-align: left;
    box-sizing: border-box;
    float: none !important;
}
.pal-invoice-content .overview__addressee__title,
.pal-invoice-content .overview__charge__title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-text-color);
    margin: 0 0 0.3rem 0;
}
.pal-invoice-content .overview__addressee__value {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--card-text-color);
    line-height: 1.6;
}
.pal-invoice-content .overview__charge__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--title-text-color);
    line-height: 1.2;
}

/* Payment section */
.pal-invoice-content .invoice-number__title {
    font-size: 0.70rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-text-color);
    margin: 0 0 0.15rem 0;
}
.pal-invoice-content .invoice-number__value {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--card-text-color);
    margin: 0;
}

/* Misc */
.pal-invoice-content .page-border { padding: 0; border: none; }
.pal-invoice-content .small { font-size: 0.78rem; color: var(--muted-text-color); }


/*
 * ====================================================================
 * MOBILE BREAKPOINTS -- intentionally placed at the very end of this
 * file. Several of the rules below (.pal-pie-card-wrap, .pal-radar-wrap,
 * .pal-chart-card, .pal-timeline-wrap, .pal-modal-chart-wrap) override
 * base rules defined earlier in this file with equal selector
 * specificity (a single class each) -- CSS resolves equal-specificity
 * conflicts by source order, so these overrides MUST come after every
 * base rule they're meant to override, or the base rule silently wins
 * regardless of viewport width. (This bit during development: an
 * earlier version of these media queries sat mid-file, before the base
 * .pal-pie-card-wrap rule, and the mobile height reduction never took
 * effect as a result.) Keep all mobile overrides consolidated here
 * rather than scattered near each feature's base rules.
 * ====================================================================
*/

@media (max-width: 700px) {
    /* Chart-first, legend-below on mobile: the chart is the visual the
       reader opened the card to see, so it should appear before the
       legend table once the two pie-card columns stack vertically.
       Both columns are flex children of .pal-pie-card-row (.row is
       already display:flex), so reordering via the `order` property is
       enough -- no markup/DOM changes needed. */
    .pal-pie-chart-col {
        order: -1;
    }

    /* Fixed chart-container heights below are sized for desktop. On a
       narrow phone the same heights make every chart look unusually
       tall and thin relative to its (now much narrower) width. Reduce
       each proportionally so charts keep a readable aspect ratio. */
    .pal-chart-card {
        height: 220px;
    }

    .pal-timeline-wrap {
        height: 200px;
    }

    .pal-pie-card-wrap {
        height: 200px;
    }

    .pal-modal-chart-wrap {
        height: 200px;
    }

    /* The radar chart specifically needs roughly equal width/height to
       keep its 12 monthly spokes legible -- a short, wide radar reads
       poorly. Constrain it to a centered, roughly square box rather
       than letting it stretch full-width like the other (rectangular)
       charts. */
    .pal-radar-wrap {
        height: auto;
        aspect-ratio: 1 / 1;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 430px) {
    .pal-chart-card {
        height: 200px;
    }

    .pal-timeline-wrap {
        height: 180px;
    }

    .pal-pie-card-wrap {
        height: 180px;
    }

    .pal-modal-chart-wrap {
        height: 180px;
    }

    .pal-radar-wrap {
        max-width: 260px;
    }

    /* Pagination buttons (modal table pager + descriptions pager) are
       sized with small padding/font for a dense desktop look. At
       0.3rem/0.65rem padding + 0.85rem font the actual tap target is
       roughly 28-30px tall -- below the ~44px minimum both Apple's HIG
       and Google's Material guidelines recommend for comfortable touch
       targets. min-height/min-width here don't change the visual size
       much (padding still controls that on most buttons) but guarantee
       a minimum hit area even for single-character page-number buttons. */
    .pal-pagination button {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.75rem;
    }

    /* A 120px-minimum bar column forces the remaining text columns
       (Year/Total/YoY, or Description/Total) into an unreadably narrow
       space on Prior Years, ACH/Grant Disbursements, and Most Common
       Descriptions -- all three share .pal-bar-col, so one rule covers
       all three. The bar is decorative (the adjacent number already
       conveys the same information), so hiding it loses no data. */
    .pal-bar-col {
        display: none;
    }

    /* The modal's record table (Date/Payee/Amount/Category/Account) has
       no bar column to hide, but 5 text columns is still too many for a
       375-430px phone. Category is the least essential of the five --
       Date/Payee/Amount are the core transaction facts, and Account is
       often the reason the modal was opened in the first place (e.g.
       clicking an account code) -- so it's the one hidden here. */
    .pal-col-category {
        display: none;
    }

    /* Mobile text was inheriting the browser's default text color
       rather than this site's intended --primary-text-color (#111827,
       defined at the top of this file but never actually applied
       anywhere, including on desktop) -- on phones in particular this
       rendered noticeably lighter/harder to read, in both data tables
       and the README modal. Scoped to mobile only, per the request, to
       avoid an unrequested desktop appearance change. */
    body {
        color: var(--primary-text-color);
    }

    /* .wrapper (max-width:90% + 30px padding), .container.main (1rem
       padding), and .card (width:95%) each shave usable width off the
       page independently -- on a 375-430px phone those three
       restrictions compound into roughly 64% of the actual screen
       width being usable, which is why cards look cramped. Loosen each
       layer specifically on mobile: wrapper goes nearly edge-to-edge
       with much smaller padding, and cards go to the full width of
       their (now wider) column. */
    .wrapper {
        max-width: 100%;
        padding: 12px;
        padding-top: 12px;
    }

    .container.main {
        padding: 1rem 0.25rem;
    }

    .card {
        width: 100%;
    }

    /* .header .top-right p is float:right/text-align:right, sized for
       a desktop two-column header layout -- on mobile this leaves the
       text pinned to one edge rather than centered, which is the
       requested fix. */
    .header .top-right p {
        float: none;
        text-align: center;
        width: 100%;
    }

    /* Swap which timeline chart is visible: the line-chart canvas
       (desktop/tablet) hides, the horizontal-bar canvas (mobile) shows.
       Both canvases exist in the DOM at all times -- dashboard.js
       decides which one to actually render into via matchMedia, so the
       hidden one never gets a Chart.js instance created for it at all,
       not just hidden after the fact. */
    .pal-timeline-desktop-only {
        display: none;
    }

    .pal-timeline-mobile-only {
        display: block;
    }

    /* --muted-text-color (#434343) text inherits body's font-weight:100
       site-wide -- none of the rules using this variable set their own
       weight. At small sizes (0.75-0.8rem, the size most of these are
       set at) combined with that ultra-thin weight, this text is hard
       to read on a phone even though the color itself (#434343) isn't
       actually that light in isolation. Bumped to full weight (600) on
       mobile and darkened slightly, covering every selector that uses
       --muted-text-color for genuinely readable body content: KPI card
       labels (.label, used everywhere -- "TOP PAYEES", "GRAND TOTAL",
       etc.), table column headers (.pal-prior-years-table th and the
       generic table.pal-table thead th), hint/explanatory text
       (.pal-hint), the "% of total" sub-values (.pal-subvalue), the
       pagination summary ("12 records"), README loading/error states,
       and the report date line. Deliberately excludes
       .pal-modal-close (the X icon) and h4.year-subtitle (currently
       unused, leftover from a removed section) -- neither is
       readability-sensitive body text. */
    .label,
    h3.post-date,
    .pal-hint,
    .pal-subvalue,
    .pal-prior-years-table th,
    table.pal-table thead th,
    td.pal-empty,
    .pal-page-summary,
    .pal-readme-loading,
    .pal-readme-error {
        font-weight: 600;
        color: #2d2d2d;
    }

    /* table.pal-table td (and th) is the actual VALUE in every table on
       the page -- payee names, dates, dollar amounts, descriptions,
       account codes -- in Prior Years, ACH/Grant, Descriptions, the
       sidebar Top Payees/Accounts, the Rolling 30 Days table, and the
       modal's record table. The previous mobile-readability pass only
       targeted selectors using --muted-text-color (headers, labels,
       hints), which never included plain table cells -- td was never
       muted-colored, it was simply inheriting body's font-weight:100
       with no color of its own, so the earlier body{color:...} mobile
       fix darkened it but never addressed the weight. That's the bug:
       data cells were dark AND thin, which still reads as faint at
       small sizes. Slightly lighter than the header weight above (500
       vs 600) so headers still visually lead the data, but a decisive
       jump from 100. */
    table.pal-table th,
    table.pal-table td {
        font-weight: 500;
    }
}