/* DynamicsOfWealth.com: the interactive tools (Path, Rent or Buy, Lease, Income Study).
   Loaded after site.css, whose tokens it uses. The markup is written by the React components in frontend/src. */

:root {
    /* one color per kind of Path module; the chart's highlight bands use the same ones */
    --tone-baseline:    #2563eb;
    --tone-add:         #047857;
    --tone-withdraw:    #cf2020;
    --tone-asset:       #a8500a;
    --tone-inflation:   #7c3aed;
    --tone-advisor:     #be185d;

    /* The site's original chart scheme (2012 to 2026), redrawn in cleaner, clearer shades at the owner's
       request (2026-11-14): steel-blue bars, a lighter blue for the highlighted middle class, a red median;
       segment bars in copper, red, purple, green, blue, pink, olive, brown, in that order. Fills are solid.
       Checked with the dataviz palette validator per theme:
         bars + median: lightness band, chroma, 3:1, colorblind delta E 16.5 by day
         segments, adjacent pairs: by night every check passes; by day two allowed warnings (pink beside blue
         at delta E 7.8 for protan readers, copper and olive under 3:1 against white), which the gaps between
         parts and the legend's values carry. Rerun it before reordering or adding a color. */
    --bar:              #3f72b5;
    --bar-middle:       #9cc3ea;
    --bar-median:       #c8364a;
    --seg-1: #ee8434;   --seg-2: #c8364a;   --seg-3: #9a64b4;   --seg-4: #4f9c48;
    --seg-5: #3f72b5;   --seg-6: #dc6a9c;   --seg-7: #b8a020;   --seg-8: #a5612f;

    /* Light from above (owner's request, 2026-11-14): every chart mark is lifted toward white at its top and
       pressed toward black at its base. The d3 marks use the SVG gradients in frontend/src/lighting.js, the
       segment bars a CSS sheen; both read these two numbers. The base color stays the token's own value at
       60% of the height, so the colors checked above are the colors you see in the body of each mark. */
    --lit-top:          26%;
    --lit-base:         14%;
    --gini-fill:        color-mix(in oklab, var(--bar-middle) 55%, var(--surface));
}

@media (prefers-color-scheme: dark) {
    :root {
        --tone-baseline:    #5b9cf9;
        --tone-add:         #10b981;
        --tone-withdraw:    #f25555;
        --tone-asset:       #f59e0b;
        --tone-inflation:   #9d7bfa;
        --tone-advisor:     #ec4899;

        --bar:              #4f86d8;
        --bar-middle:       #9cc3ea;
        --bar-median:       #e2525a;
        --seg-1: #cc7e18;   --seg-2: #d93a4c;   --seg-3: #a874c9;   --seg-4: #4fa34a;
        --seg-5: #4f86d8;   --seg-6: #d6609a;   --seg-7: #a8961e;   --seg-8: #a05a3e;
        --lit-top:          20%;
        --lit-base:         22%;
        --gini-fill:        color-mix(in oklab, var(--bar) 45%, var(--surface));    /* light blue on near-black went gray */
    }
}

/* ---------- Before the tool starts ---------- */
.app-fallback { max-width: 68ch; margin-inline: auto; text-align: center; }
.app-fallback__loading { color: var(--muted); }

/* ---------- The numbers and words you change by dragging ---------- */
.scrub-wrap { position: relative; display: inline-block; white-space: nowrap; }

.scrub {
    display: inline-block; padding: 0 .22em; margin: 0 .05em;
    font-family: var(--sans); font-weight: 650; line-height: 1.5;
    /* green words in a NEUTRAL well: a green tint behind green text is mud, by day or night */
    color: var(--accent); background: var(--sunken);
    border-radius: 5px; border-bottom: 2px solid var(--accent);
    cursor: ew-resize; touch-action: pan-y;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: background-color .12s ease, color .12s ease;
}
.scrub:hover, .scrub:focus-visible, .scrub.is-dragging { color: var(--accent-ink); background: var(--accent); }
.scrub--toggle { cursor: pointer; }
.scrub--choice { min-width: 3.2em; text-align: center; }

.scrub-hint, .scrub-error {
    position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 5;
    padding: 3px 8px; border-radius: 5px; white-space: nowrap; pointer-events: none;
    font: 500 .72rem/1.3 var(--sans); letter-spacing: .01em;
    color: var(--paper); background: var(--ink);
}
.scrub-error { top: calc(100% + 6px); bottom: auto; color: #fff; background: var(--danger); }
@media (prefers-color-scheme: dark) { .scrub-error { color: #1b0504; } }

.scrub-input {
    width: 7.5em; padding: 1px 6px;
    font: 650 1em/1.4 var(--sans); font-variant-numeric: tabular-nums; text-align: right;
    color: var(--ink); background: var(--surface);
    border: 2px solid var(--accent); border-radius: 5px;
}
.scrub-input[aria-invalid="true"] { border-color: var(--danger); }

.currency { margin-right: 1px; }

body.is-scrubbing { cursor: ew-resize; -webkit-user-select: none; user-select: none; }

/* ---------- Icons and buttons ---------- */
.icon { display: block; flex: none; }

.icon-btn {
    display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
    color: var(--muted); background: none; border: 0; border-radius: 7px; cursor: pointer;
}
.icon-btn:hover { color: var(--ink); background: var(--sunken); }
.icon-btn.is-on { color: var(--accent-ink); background: var(--accent); }
.icon-btn--hold { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: help; }
@media (pointer: coarse) { .icon-btn { width: 38px; height: 38px; } }

.btn {
    display: inline-block; padding: 11px 20px;
    font: 600 1rem/1.2 var(--sans); text-decoration: none;
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
}
.btn:hover { border-color: var(--ink); }
.btn:disabled { opacity: .6; cursor: default; }
.btn--save { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.btn--save:hover { filter: brightness(1.08); border-color: var(--accent); }
.btn--cancel { color: var(--muted); }

.link-btn {
    padding: 4px 6px; font: inherit; font-size: .9rem; color: var(--accent);
    background: none; border: 0; text-decoration: underline; cursor: pointer;
}

/* ---------- Dialogs ---------- */
.modal {
    position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
    background: rgb(0 0 0 / 55%);
}
.modal__panel {
    display: flex; flex-direction: column; width: min(100%, 560px); max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}
.modal__panel:focus { outline: none; }
.modal__panel--help { width: min(100%, 640px); }
.modal__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--rule);
}
.modal__title { margin: 0; font-size: 1.2rem; }
.modal__body { padding: 16px 20px; overflow-y: auto; overscroll-behavior: contain; }
.modal__body h3 { margin: 1.2em 0 .4em; font-size: 1.05rem; }
.modal__body h3:first-child { margin-top: 0; }
.modal__body p, .modal__body ol, .modal__body ul { margin: 0 0 .9em; }
.modal__actions {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    padding: 12px 20px 16px; border-top: 1px solid var(--rule);
}

.help__keys, .help__icons { padding: 0; list-style: none; }
.help__keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px 16px; }
.help__keys kbd {
    display: inline-block; min-width: 1.7em; padding: 1px 6px; margin-right: 4px; text-align: center;
    font: 600 .9em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--sunken); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 5px;
}
.help__icons li, .help__warning { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.help__icons .icon, .help__warning .icon { color: var(--muted); }
.help__warning .icon { color: var(--danger); }

/* ---------- Headline and description (the visitor's own words) ---------- */
.tool { display: grid; gap: clamp(16px, 3vw, 24px); }
.tool > * { min-width: 0; }

.tool-intro { display: grid; gap: 2px; justify-items: center; }

.tool-headline, .tool-desc__text, .module__title {
    width: 100%; padding: 4px 8px;
    color: var(--ink); background: transparent;
    border: 1px dashed transparent; border-radius: 6px;
    text-overflow: ellipsis;
}
.tool-headline:hover, .tool-desc__text:hover, .module__title:hover { border-color: var(--rule); }
.tool-headline:focus, .tool-desc__text:focus, .module__title:focus {
    background: var(--surface); border: 1px solid var(--accent); outline: none;
}

.tool-headline {
    max-width: 22em; text-align: center;
    font: 600 clamp(1.6rem, 1.1rem + 2.4vw, 2.5rem)/1.2 var(--serif);
}
.tool-desc { position: relative; width: 100%; max-width: 46em; }
.tool-desc__text {
    display: block; resize: none; overflow: hidden;
    font: 400 1.02rem/1.5 var(--sans); color: var(--muted);
}
.tool-desc__text:focus { color: var(--ink); }
.tool-desc__align {
    position: absolute; right: 0; bottom: 100%; z-index: 2; display: flex; gap: 2px; padding: 2px;
    background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow);
}
.tool-desc__align[hidden] { display: none; }
.textAlignLeft { text-align: left; }
.textAlignCenter { text-align: center; }
.textAlignRight { text-align: right; }

/* ---------- Panels, charts, totals ---------- */
.panel {
    padding: clamp(8px, 2vw, 16px);
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}

.chart { width: 100%; min-width: 0; }
.chart__svg { display: block; overflow: visible; touch-action: pan-y; }
.chart__frame { fill: none; }
.chart__title { font: 600 .95rem var(--serif); fill: var(--ink); }
.chart__label, .chart__readout { font: 500 .75rem var(--sans); fill: var(--muted); }
.chart__readout { white-space: pre; fill: var(--ink); }
.chart__axis text { font: 400 .72rem var(--sans); fill: var(--muted); }
.chart__axis line, .chart__axis path { stroke: var(--rule); shape-rendering: crispEdges; }
.chart__axis .chart__grid { stroke-dasharray: 2 3; }

/* Areas are solid, like the bars: the Path's balance, and the Gini area between the equal line and the
   Lorenz curve (its lower part is cut out with .chart__subarea). */
.chart__line { fill: none; stroke: var(--bar); stroke-width: 2; stroke-linejoin: round; }
.chart__area { fill: url(#lit-bar) var(--bar); }
.chart__area--negative { fill: var(--danger); }
.chart__subarea { fill: var(--surface); }
.chart__ghost-line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; }     /* ink: it crosses the solid area */
.chart__ghost-area { fill: var(--muted); fill-opacity: .12; }

.chart__band { fill-opacity: .14; }
.chart__band--baseline  { fill: var(--tone-baseline); }
.chart__band--add       { fill: var(--tone-add); }
.chart__band--withdraw  { fill: var(--tone-withdraw); }
.chart__band--asset     { fill: var(--tone-asset); }
.chart__band--inflation { fill: var(--tone-inflation); }
.chart__band--advisor   { fill: var(--tone-advisor); }

.chart__bar { fill: url(#lit-bar) var(--bar); shape-rendering: crispEdges; }
.chart__bar--middle { fill: url(#lit-middle) var(--bar-middle); }
.chart__bar--median { fill: url(#lit-median) var(--bar-median); }

.chart__overlay { fill: transparent; cursor: crosshair; }
.chart__cursor { pointer-events: none; }
.chart__cursor-line { fill: var(--muted); }
.chart__cursor-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }     /* ink: it sits on green bars and lines */
.chart__cursor-text {
    font: 600 .75rem var(--sans); fill: var(--ink);
    paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round;
}

.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(24px, 8vw, 96px); margin: 8px 0 4px; }
.stat { text-align: center; }
.stat__label {
    font: 600 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.stat__value { margin: 0; font: 600 clamp(1.4rem, 1rem + 2vw, 2rem)/1.2 var(--serif); }
.stat__change { font: 600 .55em var(--sans); color: var(--accent); white-space: nowrap; }
.stat__note { display: block; font: 400 .8rem/1.3 var(--sans); color: var(--muted); }

.warning-btn {
    display: flex; align-items: center; gap: 8px; margin: 10px auto 2px; padding: 8px 14px;
    font: 600 .9rem/1.2 var(--sans); color: var(--danger);
    background: none; border: 1px solid currentColor; border-radius: 999px; cursor: pointer;
}

/* ---------- Path modules ---------- */
.modules { display: grid; gap: 14px; }

.module {
    --tone: var(--accent);
    background: var(--surface);
    border: 1px solid var(--rule); border-left: 5px solid var(--tone); border-radius: var(--radius);
}
.module--baseline  { --tone: var(--tone-baseline); }
.module--add       { --tone: var(--tone-add); }
.module--withdraw  { --tone: var(--tone-withdraw); }
.module--asset     { --tone: var(--tone-asset); }
.module--inflation { --tone: var(--tone-inflation); }
.module--advisor   { --tone: var(--tone-advisor); }
.module.is-inactive { border-left-color: var(--rule); }
.module.is-inactive .module__kind, .module.is-inactive .module__title { color: var(--muted); }

.module__bar {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "kind title icons";
    align-items: center; gap: 2px 10px; padding: 6px 8px 6px 14px;
}
.module__kind {
    grid-area: kind;
    font: 700 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tone);
}
.module__title { grid-area: title; font: 600 1.1rem/1.3 var(--serif); text-align: center; }
.module__icons { grid-area: icons; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1px; }
.module__badge {
    margin-right: 6px; padding: 2px 8px; border-radius: 999px;
    font: 600 .7rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); background: var(--sunken);
}
.module__body {
    padding: 4px clamp(14px, 3vw, 24px) 10px; border-top: 1px solid var(--rule);
    font: 400 1.08rem/2 var(--serif);
}
.module__body p { margin: .7em 0; }

.scrub--currency {
    min-width: 2em; margin-right: 4px; text-align: center; line-height: 1.7;
    border: 1px solid var(--accent); border-radius: 999px;
}

@media (max-width: 860px) {
    .module__bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind icons" "title title"; }
    .module__title { text-align: left; padding-left: 0; }
}
@media (max-width: 520px) {
    .module__bar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kind" "title" "icons"; padding-left: 12px; }
    .module__icons { justify-content: space-between; }
    .module__body { line-height: 2.15; }
}

.add-modules { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.add-modules__label {
    flex-basis: 100%; text-align: center;
    font: 600 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.add-btn {
    --tone: var(--accent);
    padding: 10px 16px; font: 600 .95rem/1.2 var(--sans); color: var(--tone);
    background: var(--surface); border: 1px solid var(--tone); border-radius: 999px; cursor: pointer;
}
.add-btn:hover { color: var(--surface); background: var(--tone); }
.add-btn--add       { --tone: var(--tone-add); }
.add-btn--withdraw  { --tone: var(--tone-withdraw); }
.add-btn--asset     { --tone: var(--tone-asset); }
.add-btn--inflation { --tone: var(--tone-inflation); }
.add-btn--advisor   { --tone: var(--tone-advisor); }

/* ---------- Save ---------- */
.save { display: grid; gap: 8px; justify-items: center; }
.save__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; min-height: 44px; }
.save__form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.save__label { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.save__input {
    width: 12em; padding: 9px 12px; font: 500 1rem/1.2 var(--sans);
    color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
}
.save__input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; }
.save__status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); }
.save__error { margin: 0; font-weight: 600; color: var(--danger); text-align: center; }
.save__url { overflow-wrap: anywhere; font-weight: 600; }

/* ---------- Single-form tools (Lease, Rent or Buy) and the Income Study ---------- */
.tool-bar { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3vw, 24px); align-items: start; }
@media (min-width: 820px) { .split--figure { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); } }

.sentences { font: 400 1.08rem/2 var(--serif); }
.sentences p { margin: 0 0 .8em; }
.sentences h2 { margin: 0 0 .5em; font-size: 1.3rem; line-height: 1.3; }
.sentences h3 { margin: 1.1em 0 .2em; font: 700 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.sentences .result { font-weight: 700; color: var(--ink); white-space: nowrap; }
.sentences--plain { font: 400 1rem/1.65 var(--sans); }
.sentences--plain p { margin: 0 0 1em; }

.fine-print { font: 400 .9rem/1.6 var(--sans); color: var(--muted); }
.fine-print p { margin: 0 0 .8em; }

.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }

/* one bar cut into parts, each as long as its share (SegmentBar.jsx) */
.segments__tone--1 { --seg: var(--seg-1); } .segments__tone--2 { --seg: var(--seg-2); }
.segments__tone--3 { --seg: var(--seg-3); } .segments__tone--4 { --seg: var(--seg-4); }
.segments__tone--5 { --seg: var(--seg-5); } .segments__tone--6 { --seg: var(--seg-6); }
.segments__tone--7 { --seg: var(--seg-7); } .segments__tone--8 { --seg: var(--seg-8); }
/* The same light from above as the chart marks, plus a one-pixel highlight along the top edge. */
.segments__part, .segments__swatch {
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--seg), white var(--lit-top)) 0%,
        var(--seg) 60%,
        color-mix(in oklab, var(--seg), black var(--lit-base)) 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%);
}

.segments { margin: 0; min-width: 0; }
.segments__title { margin: 0 0 6px; font: 600 .95rem/1.3 var(--serif); }
.segments__bar {
    display: flex; gap: 2px; height: 22px; border-radius: 5px; overflow: hidden; background: var(--sunken);
    box-shadow: 0 1px 2px rgb(0 0 0 / 14%), 0 3px 10px -4px rgb(0 0 0 / 22%);     /* sits on the card, lit from above */
}
.segments__part { flex-basis: 0; min-width: 0; min-height: 0; transition: flex-grow .15s ease; }
.segments__legend {
    display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0 0; padding: 0; list-style: none;
    font-size: .82rem; color: var(--muted);
}
.segments__legend li { display: inline-flex; align-items: center; gap: 6px; }
.segments__legend b { color: var(--ink); font-weight: 650; }
.segments__swatch { flex: none; width: 10px; height: 10px; border-radius: 2px; }

.segments--column { display: grid; gap: 10px; align-content: start; }
.segments--column .segments__title { margin: 0; text-align: center; }
.segments--column .segments__bar { flex-direction: column-reverse; width: min(100%, 150px); height: 300px; margin-inline: auto; border-radius: 8px; }
.segments--column .segments__legend { display: grid; gap: 6px; font-size: .9rem; }
.segments--column .segments__legend li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; }
.segments--column .segments__swatch { width: 12px; height: 12px; }
@media (max-width: 819px) { .segments--column .segments__bar { height: 180px; } }

.shares { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px 32px; }
.panel__title { margin: 4px 0 14px; font-size: 1.2rem; text-align: center; }

/* label : value rows (the lease's terms) */
.fields { display: grid; grid-template-columns: minmax(0, auto) auto; gap: 2px 20px; justify-content: start; margin: .6em 0; }
.fields dt { font-family: var(--sans); font-size: .98rem; color: var(--muted); align-self: center; }
.fields dd { margin: 0; white-space: nowrap; }
.fields__note { font: 400 .85rem var(--sans); color: var(--muted); white-space: normal; }
@media (max-width: 520px) {
    .fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .fields dt { margin-top: .5em; line-height: 1.4; }
}

.stats--single { justify-content: flex-start; margin-top: 4px; }
.stats--single .stat { text-align: left; }
.stats--single .stat__value { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.8rem); }
.stats--single .scrub { font-family: var(--serif); font-weight: 600; }
.stats--single .stat__note { margin-top: 6px; }
.split__main { display: grid; gap: 14px; align-content: start; min-width: 0; }

/* dials (Rent or Buy) */
.gauges { display: grid; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.gauge { text-align: center; }
.gauge__svg { display: block; width: 100%; max-width: 280px; height: auto; margin-inline: auto; overflow: visible; }
.gauge { margin: 0; }
.gauge__zone { fill: none; stroke-width: 12; }
.gauge__zone--bad     { stroke: var(--danger); stroke-opacity: .8; }
.gauge__zone--neutral { stroke: var(--gold);   stroke-opacity: .8; }
.gauge__zone--good    { stroke: var(--accent); stroke-opacity: .8; }
.gauge__tick { stroke: var(--muted); stroke-width: 1.2; }
.gauge__tick-label { font: 500 9px var(--sans); fill: var(--muted); }
.gauge__needle { fill: var(--ink); transition: transform .25s ease; }
.gauge__hub { fill: var(--ink); }
.gauge__title { margin: 0; font: 700 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gauge__value { margin: 0; font: 600 clamp(1.3rem, 1rem + 1.6vw, 1.8rem)/1.2 var(--serif); }
.gauge__value.is-negative { color: var(--danger); }

.study-controls { font: 400 1.08rem/2 var(--serif); text-align: center; }
.study-controls p { margin: 0; }
.study-controls__lead { font: 400 .95rem/1.5 var(--sans); color: var(--muted); }
.control { display: inline-block; margin: 0 .7em; white-space: nowrap; }
.study-controls .scrub--toggle { white-space: normal; }
.study-subtitle { margin: 0; text-align: center; font: italic 400 1.15rem/1.4 var(--serif); color: var(--muted); }
.chart-pair { position: relative; }
.chart-inset {
    position: absolute; top: 34px; right: 30px; width: min(42%, 280px);
    background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
}.chart-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 8px 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--muted); }
.chart-key li { display: inline-flex; align-items: center; gap: 6px; }
.chart-key__swatch { width: 12px; height: 12px; border-radius: 2px; }
.chart-key__swatch--middle { background: var(--bar-middle); }
/* Gini inset, as the original drew it: both curves in the bar blue, the gap between them (the inequality)
   in a light blue. */
.chart-inset .chart__area { fill: url(#lit-gini) var(--gini-fill); }
.chart-inset .chart__line { stroke: var(--bar); stroke-width: 2; }
.chart-key__swatch--median { background: var(--bar-median); }
.source { margin: 0; text-align: center; font-size: .85rem; color: var(--muted); }

@media (max-width: 640px) {
    .chart-inset { position: static; width: 100%; margin-top: 10px; }
}

@media print {
    .module__icons, .add-modules, .save, .tool-bar, .scrub-hint { display: none; }
    .scrub { color: #000; background: none; border-bottom: 1px solid #000; }
}