/* GENM tool pages (custom-tool.hbs)
/* ----------------------------------------------------------
Loaded only by custom-tool.hbs, after genm-home.css (the page's main element
has both .genm-home and .genm-tool-page, so the homepage's section, prose,
tool card and source styles apply). Every rule here is scoped to
.genm-tool-page. Charts (genm-chart-defaults.js) use the .genm-chart rules.
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-tool-page {
    padding-top: 24px;
}

/* ---------- breadcrumb ---------- */
.genm-tool-page .genm-tool-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.4;
}

.genm-tool-page .genm-tool-crumbs li {
    margin: 0;
}

.genm-tool-page .genm-tool-crumbs li + li::before {
    content: "›";
    margin: 0 8px;
    color: color-mix(in srgb, var(--genm-navy) 60%, transparent);
}

.genm-tool-page .genm-tool-crumbs a {
    color: var(--genm-navy);
    text-decoration: underline;
    text-decoration-color: var(--genm-gold);
    text-underline-offset: 3px;
}

.genm-tool-page .genm-tool-crumbs [aria-current] {
    color: color-mix(in srgb, var(--genm-navy) 80%, transparent);
}

/* ---------- title and subtitle ---------- */
.genm-tool-page .genm-tool-header {
    margin-bottom: 24px;
}

.genm-tool-page .genm-tool-title {
    margin-bottom: 10px;
}

.genm-tool-page .genm-tool-subtitle {
    max-width: 760px;
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--genm-navy);
}

/* ---------- the tool (full width, same frame as the homepage's sphere band) ---------- */
.genm-tool-page .genm-tool-band {
    max-width: 1200px;
    margin: 0 auto 48px;
    padding: 0 max(4vw, 16px);
}

.genm-tool-page .genm-tool-frame {
    min-width: 0;
}

.genm-tool-page .genm-tool-noscript,
.genm-tool-page .genm-tool-missing {
    margin: 0;
    padding: 20px;
    border-radius: 12px;
    background: var(--genm-navy);
    color: var(--genm-cream);
    font-size: 16px;
    line-height: 1.5;
}

/* ---------- explanation ---------- */
.genm-tool-page .genm-home-prose ul {
    margin: 0 0 16px;
    padding-left: 22px;
}

.genm-tool-page .genm-home-prose li {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.6;
}

/* ---------- source line ---------- */
.genm-tool-page .genm-tool-source .genm-home-small {
    font-size: 13px;
}

.genm-tool-page .genm-tool-source a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--genm-gold);
    text-underline-offset: 3px;
}

/* ---------- charts (genm-chart-defaults.js) ---------- */
.genm-tool-page .genm-chart {
    margin: 0 0 32px;
}

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

.genm-tool-page .genm-chart-summary {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.55;
}

.genm-tool-page .genm-chart-source {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: color-mix(in srgb, var(--genm-navy) 80%, transparent);
}

/* ---------- Who holds the debt (V2, a section of the Debt Sphere page) ---------- */
.genm-tool-page .genm-who {
    scroll-margin-top: 16px;
}

.genm-tool-page .genm-who-intro {
    max-width: 760px;
}

.genm-tool-page .genm-who-grid {
    margin-bottom: 16px;
}

.genm-tool-page .genm-who-value {
    margin-top: 6px;
    font-size: clamp(20px, 4.5vw, 26px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--genm-gold);
    overflow-wrap: anywhere;
}

.genm-tool-page .genm-who-label {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--genm-cream);
}

.genm-tool-page .genm-who-toggle {
    display: inline-flex;
    margin: 0 0 12px;
    border: 1px solid var(--genm-navy);
    border-radius: 999px;
    overflow: hidden;
}

.genm-tool-page .genm-who-btn {
    margin: 0;
    padding: 8px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--genm-navy);
    font-family: var(--genm-font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
}

.genm-tool-page .genm-who-btn[aria-pressed="true"] {
    background: var(--genm-navy);
    color: var(--genm-gold);
}

.genm-tool-page .genm-who-btn:focus-visible {
    outline: 2px solid var(--genm-gold);
    outline-offset: -2px;
}

.genm-tool-page .genm-who-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.genm-tool-page .genm-who-source a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--genm-gold);
    text-underline-offset: 3px;
}