/* GENM debt charts (Phase 10, Batches 1 to 3: CL5, CL6, CL3, CL8 and the Cash section)
/* ----------------------------------------------------------
Loaded by the Debt Sphere, Yield Curve and cash pages (their "head" parts). Markup: partials/genm-tools/chart-section.hbs. The panel,
stamp, table and text look come from genm-bars.css (the classes .genm-bar and .genm-bar-*); this file adds only
what the two charts need: their heights and the donut's room for labels. Colors and fonts come only from
genm-tokens.css. Nothing here animates. Sizes are in px because Source sets the root font size to 10px.
*/

.genm-dc .genm-dc-area {
    width: 100%;
    height: clamp(260px, 50vw, 420px);
    touch-action: pan-y;
}

.genm-dc .genm-dc-donut {
    width: 100%;
    height: clamp(390px, 100vw, 440px);
    touch-action: pan-y;
}

.genm-dc .genm-dc-area[hidden],
.genm-dc .genm-dc-donut[hidden] {
    display: none;
}

/* The table's row names may wrap, so three columns fit a phone without sideways scrolling */
.genm-dc .genm-bar-table tbody th {
    min-width: 7em;
    white-space: normal;
}

@media (max-width: 480px) {
    .genm-dc .genm-bar-table {
        font-size: 12px;
    }

    .genm-dc .genm-bar-table td,
    .genm-dc .genm-bar-table thead th:not(:first-child) {
        padding-right: 8px;
    }
}

.genm-dc .genm-dc-donut + .genm-bar-summary {
    margin-top: 20px;
}

/* Phase 10 Batch 2: CL3 the yield change histogram and CL8 the foreign holders treemap */
.genm-dc .genm-dc-histogram {
    width: 100%;
    height: clamp(360px, 70vw, 440px);
    touch-action: pan-y;
}

.genm-dc .genm-dc-treemap {
    width: 100%;
    height: clamp(420px, 110vw, 560px);
    touch-action: pan-y;
}

.genm-dc .genm-dc-histogram[hidden],
.genm-dc .genm-dc-treemap[hidden],
.genm-dc .genm-dc-list[hidden] {
    display: none;
}

.genm-dc .genm-dc-key {
    margin-top: 8px;
}

.genm-dc .genm-dc-histogram + .genm-bar-summary,
.genm-dc .genm-dc-key + .genm-bar-summary {
    margin-top: 16px;
}

/* CL8 sits inside the Who holds the debt section, which already has the page margins */
.genm-dc.genm-dc-nested {
    margin: 48px 0 0;
}

.genm-dc.genm-dc-nested > .genm-home-inner {
    max-width: none;
    padding: 0;
}

.genm-dc .genm-home-h3 {
    margin: 0 0 10px;
}

.genm-dc .genm-dc-list {
    margin: 16px 0 0;
}

.genm-dc .genm-dc-list-title,
.genm-dc .genm-dc-how-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--genm-cream);
}

.genm-dc .genm-dc-ol {
    margin: 0;
    padding-left: 24px;
    font-size: 14px;
    line-height: 1.6;
}

.genm-dc .genm-dc-ol li {
    margin: 0;
}

.genm-dc .genm-dc-how {
    margin: 16px 0 0;
}

.genm-dc .genm-dc-how p {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--genm-muted);
}

/* CL8: the custody and revision sentences sit directly under the lede, on the page, so they travel with the chart */
.genm-dc .genm-dc-custody {
    max-width: 760px;
    margin: -10px 0 8px;
}

.genm-dc .genm-dc-custody + .genm-dc-custody {
    margin-top: 0;
}

/* Phase 10 Batch 3: the Cash section (V3 the cash balance area, V7 the plain range bar). One hue (the gold chart token); no zones,
   no thresholds, no color that means good or bad. The bar is HTML and CSS, so it reads without the chart library. */
.genm-dc .genm-dc-range {
    margin: 28px 0 0;
}

.genm-dc .genm-dc-range-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: var(--genm-cream);
}

.genm-dc .genm-dc-range-bar {
    position: relative;
    height: 12px;
    margin: 22px 8px 0;
    border-radius: 6px;
    background: var(--genm-navy-track);
}

.genm-dc .genm-dc-range-marker {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 3px solid var(--genm-cream);
    background: var(--genm-gold);
}

.genm-dc .genm-dc-range-marker[hidden] {
    display: none;
}

.genm-dc .genm-dc-range-ends {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--genm-muted);
}

.genm-dc .genm-dc-range-list {
    margin: 16px 0 0;
    display: grid;
    gap: 10px;
}

.genm-dc .genm-dc-range-list div {
    margin: 0;
}

.genm-dc .genm-dc-range-list dt {
    margin: 0;
    font-size: 13px;
    color: var(--genm-muted);
}

.genm-dc .genm-dc-range-list dd {
    margin: 2px 0 0;
    font-size: 16px;
    line-height: 1.4;
    color: var(--genm-cream);
}

.genm-dc .genm-dc-range-position[hidden],
.genm-dc [data-dc="range-position"][hidden],
.genm-dc [data-dc="range-tag"][hidden] {
    display: none;
}

@media (min-width: 640px) {
    .genm-dc .genm-dc-range-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.genm-dc .genm-dc-range-list + .genm-bar-summary {
    margin-top: 16px;
}