/* The lock-in panel (fragments/_lock_in.html), styled once for both sides of
   the purchase: the free calculator result (main.css's pages) and v3's Home.
   Both pages wear the same palette since 16 October; the two names for the
   rule colour (v3's --line, the public site's --border) are read in turn so
   the line is the same grey on either. Label left, amount right, the last
   line under a rule, so the three read as a sum. */
.lock-in-lead { margin: 0.75rem 0 0; line-height: 1.55; }
.lock-in-sentence { margin: 0.75rem 0 0; line-height: 1.55; }
.lock-in-sentence strong { font-variant-numeric: tabular-nums; }
.lock-in {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 0;
    max-width: 24rem;
    margin: 0.75rem 0 0;
}
.lock-in > div { display: contents; }
.lock-in dt { font-size: 1rem; color: var(--dim, var(--muted)); }
.lock-in dd {
    margin: 0;
    padding-left: 1rem;
    text-align: right;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.lock-in > div:last-child dt,
.lock-in > div:last-child dd {
    border-top: 1px solid var(--line, var(--border));
    padding-top: 0.35rem;
}
/* The last figure says which way the plan falls: green left over, red still
   to find, in v3's inks with the public site's names as the fallback. */
.lock-in > .good dd, .lock-in-sentence .good { color: var(--good-fg, var(--status-funded-solid)); }
.lock-in > .short dd, .lock-in-sentence .short { color: var(--danger-fg, var(--status-under-solid)); }
.lock-in-note { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--dim, var(--muted)); }

/* The years (fragments/_years.html), the same bars on both sides. v3's
   token names are read first; the public site defines the same names since
   16 October. */
.years-link { display: block; }
.years { display: block; width: 100%; height: 9.5rem; margin: 1.25rem 0 0.25rem; }
.years .paid { fill: var(--accent-muted); }
.years .unpaid { fill: var(--line); }
.years-tones { list-style: none; padding: 0; margin: 0.35rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: 0.8125rem; font-weight: 600; color: var(--dim); }
.years-tones li { display: inline-flex; align-items: center; gap: 0.4rem; }
.years-tones .paid { background: var(--accent-muted); }
.years-tones .unpaid { background: var(--line); }
.years .edge { fill: var(--text); }
.years-ends { display: flex; justify-content: space-between; color: var(--dim); font-size: 0.8125rem; }
.years-key { font-weight: 600; margin: 0.6rem 0 0.25rem; }
.swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; }