/* GENM free bar graphs (Phase 9C C6, V24)
/* ----------------------------------------------------------
Loaded by the four pages that show a bar graph: the homepage (partials/genm-home/head.hbs), the Yield
Curve, Debt Sphere and Live Debt Clock pages (their "head" parts). Markup:
partials/genm-tools/bar-graph.hbs. Every rule is scoped to .genm-bar. Colors and fonts come only from
genm-tokens.css, except the earlier bar's light blue, which matches the Yield Curve's comparison line.
The panel is navy like the other chart panels. Nothing here animates. Sizes are in px because Source
sets the root font size to 10px.
*/

.genm-bar {
    font-family: var(--genm-font-sans);
    line-height: 1.5;
    scroll-margin-top: 16px;
}

.genm-bar .genm-bar-lede {
    max-width: 760px;
}

.genm-bar .genm-bar-status[hidden],
.genm-bar .genm-bar-panel[hidden],
.genm-bar .genm-bar-notes[hidden],
.genm-bar .genm-bar-canvas[hidden] {
    display: none;
}

.genm-bar .genm-bar-panel {
    background: var(--genm-navy);
    color: var(--genm-cream);
    border-radius: 12px;
    padding: 20px clamp(16px, 3vw, 32px) 24px;
    font-size: 15px;
    max-width: 100%;
    overflow-wrap: break-word;
}

.genm-bar .genm-bar-panel p {
    margin: 0;
}

/* HISTORICAL stamp: the component's look (debt-sphere.css .genm-sphere-stamp), green for historical */
.genm-bar .genm-bar-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 14px;
}

.genm-bar .genm-bar-stamp {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 10px 5px;
    border: 2px solid var(--genm-positive-green);
    border-radius: 8px;
    color: var(--genm-positive-green);
    text-align: center;
}

.genm-bar .genm-bar-stamp b {
    display: block;
    font-size: 15px;
    letter-spacing: .08em;
    font-weight: 800;
    line-height: 1.1;
}

.genm-bar .genm-bar-stamp span {
    display: block;
    font-size: 12px;
    letter-spacing: .03em;
    font-weight: 600;
    line-height: 1.35;
}

.genm-bar .genm-bar-tag {
    padding: 0 6px;
    border: 1px solid var(--genm-muted);
    border-radius: 4px;
    color: var(--genm-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.6;
    white-space: nowrap;
}

.genm-bar .genm-bar-notes {
    margin: 0 0 12px;
}

.genm-bar .genm-bar-note {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--genm-cream);
}

/* The chart: its height is set by genm-bars.js from the number of bars */
.genm-bar .genm-bar-chart {
    margin: 0;
}

.genm-bar .genm-bar-canvas {
    width: 100%;
    min-height: 200px;
    touch-action: pan-y;
}

.genm-bar .genm-bar-summary {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--genm-cream);
}

.genm-bar .genm-bar-source {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--genm-muted);
}

/* The table of the same values and dates: scrolls sideways inside its own box on a phone */
.genm-bar .genm-bar-tablewrap {
    margin: 16px 0 0;
    container-type: inline-size;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.genm-bar .genm-bar-tablewrap:focus-visible {
    outline: 2px solid var(--genm-gold);
    outline-offset: 2px;
}

.genm-bar .genm-bar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--genm-cream);
}

.genm-bar .genm-bar-table caption {
    position: sticky;
    left: 0;
    box-sizing: border-box;
    width: 100cqw;
    max-width: 90vw;
    padding: 0 0 8px;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: var(--genm-cream);
}

.genm-bar .genm-bar-table th,
.genm-bar .genm-bar-table td {
    padding: 6px 10px 6px 0;
    border-bottom: 1px solid var(--genm-navy-track);
    text-align: left;
    font-weight: 400;
    white-space: nowrap;
}

.genm-bar .genm-bar-table thead th {
    color: var(--genm-muted);
    font-weight: 600;
    white-space: normal;
    vertical-align: bottom;
}

.genm-bar .genm-bar-table tbody th {
    font-weight: 600;
}

.genm-bar .genm-bar-table td {
    text-align: right;
    padding-right: 14px;
}

.genm-bar .genm-bar-table thead th:not(:first-child) {
    text-align: right;
    padding-right: 14px;
}

.genm-bar .genm-bar-rounding {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--genm-muted);
}

.genm-bar .genm-bar-affil,
.genm-bar .genm-bar-legal {
    margin-left: 0;
}