/* GENM Yield Curve tool page (/tools/yield-curve/)
/* ----------------------------------------------------------
Loaded only by partials/genm-tools/yield-curve.hbs. Every rule is scoped to
.genm-yc or .genm-yc-then. Colors and fonts come only from genm-tokens.css,
except the comparison line's light blue, which matches the chart. Panels are
navy like the Live Debt Clock and the What if projector. Nothing here
animates. Sizes are in px because Source sets the root font size to 10px.
*/

.genm-yc,
.genm-yc-then {
    font-family: var(--genm-font-sans);
    line-height: 1.5;
}

.genm-yc-then {
    scroll-margin-top: 16px;
}

.genm-yc-then .genm-yc-intro {
    max-width: 760px;
}

.genm-yc-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-yc-panel[hidden],
.genm-yc-status[hidden],
.genm-yc-note[hidden],
.genm-yc-saved[hidden] {
    display: none;
}

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

.genm-yc-status {
    margin: 0 0 12px;
    font-size: 14px;
}

.genm-yc-h3 {
    margin: 0 0 12px;
    font-family: var(--genm-font-serif);
    font-size: clamp(19px, 3.6vw, 22px);
    font-weight: 600;
    color: var(--genm-cream);
}

.genm-yc-panel .genm-yc-h3 + .genm-yc-saved {
    margin-bottom: 12px;
}

.genm-yc-h3:not(:first-child) {
    margin-top: 28px;
}

.genm-yc-h4 {
    margin: 18px 0 8px;
    font-family: var(--genm-font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--genm-cream);
}

.genm-yc-saved,
.genm-yc-panel .genm-yc-fallback {
    padding: 8px 12px;
    border: 1px solid var(--genm-gold);
    border-radius: 8px;
    font-size: 14px;
}

.genm-yc-panel .genm-yc-fallback {
    margin-bottom: 14px;
}

.genm-yc-muted {
    color: var(--genm-muted);
    font-size: 13px;
}

.genm-yc-panel .genm-yc-note {
    margin-top: 8px;
    font-size: 14px;
    color: var(--genm-muted);
}

/* Public label for calculated figures */
.genm-yc-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border: 1px solid var(--genm-muted);
    border-radius: 4px;
    color: var(--genm-muted);
    font-family: var(--genm-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.6;
    vertical-align: middle;
    white-space: nowrap;
}

/* ---------- charts ---------- */
.genm-tool-page .genm-yc-chart {
    margin: 0;
}

.genm-tool-page .genm-yc-canvas {
    height: clamp(260px, 52vw, 380px);
}

.genm-tool-page .genm-yc-chart .genm-chart-summary {
    color: var(--genm-cream);
    font-size: 14px;
}

.genm-tool-page .genm-yc-chart .genm-chart-source,
.genm-yc-panel .genm-yc-source {
    color: var(--genm-muted);
    font-size: 13px;
}

.genm-yc-panel .genm-yc-source-line {
    margin-top: 16px;
}

/* ---------- sliders and buttons ---------- */
.genm-yc-scrub {
    margin: 18px 0 0;
}

.genm-yc-scrub label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--genm-cream);
}

.genm-yc-scrub output {
    color: var(--genm-gold);
    font-weight: 600;
}

/* Touch-friendly: a tall hit area on phones; the page still scrolls vertically */
.genm-yc-scrub input[type=range] {
    display: block;
    width: 100%;
    min-height: 36px;
    margin: 0;
    accent-color: var(--genm-gold);
    touch-action: pan-y;
}

.genm-yc-ends {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--genm-muted);
}

.genm-yc-buttons,
.genm-yc-presets,
.genm-yc-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
}

.genm-yc-btn,
.genm-yc-preset {
    margin: 0;
    min-height: 40px;
    padding: 6px 14px;
    border: 1px solid var(--genm-navy-track);
    border-radius: 999px;
    background: transparent;
    color: var(--genm-cream);
    font-family: var(--genm-font-sans);
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.genm-yc-preset {
    border-radius: 10px;
    font-size: 13px;
}

.genm-yc-btn[aria-pressed="true"],
.genm-yc-preset[aria-pressed="true"] {
    border-color: var(--genm-gold);
    background: var(--genm-gold);
    color: var(--genm-navy);
}

.genm-yc-scrub input[type=range]:focus-visible,
.genm-yc-btn:focus-visible,
.genm-yc-preset:focus-visible {
    outline: 2px solid var(--genm-gold);
    outline-offset: 2px;
}

.genm-yc-panel .genm-yc-preset-sources {
    margin-top: 10px;
}

.genm-yc-preset-sources[hidden] {
    display: none;
}

.genm-yc-preset-sources a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--genm-gold);
    text-underline-offset: 3px;
}

.genm-yc-share p {
    overflow-wrap: anywhere;
}

/* ---------- readouts ---------- */
.genm-yc-yields,
.genm-yc-spreads {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr));
    gap: 8px;
    margin: 0;
}

.genm-yc-spreads {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.genm-yc-yields > div,
.genm-yc-spreads > div {
    padding-top: 6px;
    border-top: 1px solid var(--genm-navy-track);
}

.genm-yc-yields dt,
.genm-yc-spreads dt {
    font-size: 13px;
    color: var(--genm-muted);
}

.genm-yc-yields dd,
.genm-yc-spreads dd {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--genm-cream);
}

.genm-yc-spreads dd {
    color: var(--genm-gold);
}

/* ---------- Then and Now ---------- */
.genm-yc-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.genm-yc-key {
    display: inline-block;
    width: 22px;
    margin-right: 8px;
    vertical-align: middle;
    border-top: 3px solid var(--genm-gold);
}

.genm-yc-key-then {
    border-top: 3px dashed #A9C1E3;
}

.genm-yc-table {
    width: 100%;
    margin: 20px 0 0;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--genm-cream);
}

.genm-yc-table caption {
    margin-bottom: 6px;
    text-align: left;
    font-weight: 600;
}

.genm-yc-table th,
.genm-yc-table td {
    padding: 8px 6px;
    border-top: 1px solid var(--genm-navy-track);
    text-align: left;
    vertical-align: top;
}

.genm-yc-table thead th {
    color: var(--genm-muted);
    font-weight: 500;
}

.genm-yc-table tbody th {
    font-weight: 500;
}

.genm-yc-panel .genm-yc-caption {
    margin-top: 8px;
}

/* ---------- disclaimer, directly beneath each section ---------- */
.genm-yc-disclaimer {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--genm-navy);
}