/* ==========================================================================
   Cost-of-Living Planner — site theme
   Dark/amber restyle of the standalone tool (../../cost-of-living/index.html).

   Loaded AFTER styles.css. Every rule is scoped under `.col-app` so the tool's
   dense 14px UI cannot leak into the navbar, hero or footer — and so the site's
   h1–h6 / p / a rules cannot blow up the tool's compact typography.

   The tool's OWN custom-property names (--bg, --card, --ink, --accent …) are
   preserved from the source file; only their values are remapped onto the site
   design tokens. That is what lets the 230 lines of markup and 490 lines of JS
   port over unchanged. Do not rename them here — see CLAUDE.md Boundary
   Contracts.
   ========================================================================== */

.col-app {
    /* ---- source tool vars → site design tokens ---- */
    --bg: var(--color-bg-primary);
    --card: var(--color-surface);
    --raised: var(--color-raised);
    --ink: var(--color-text-primary);
    --dim: var(--color-text-secondary);
    --muted: var(--color-text-muted);
    --line: var(--color-border);
    --accent: var(--color-primary);
    --accent-soft: rgba(229, 163, 68, 0.12);
    --pos: var(--color-text-primary);
    --neg: var(--color-error);
    --neg-soft: rgba(229, 72, 77, 0.12);
    --good: var(--color-success);
    --good-soft: rgba(95, 185, 138, 0.12);
    --warn: var(--color-warning);
    --warn-soft: rgba(224, 184, 75, 0.12);
    /* DESIGN.md: flat surfaces, hairline rules, no glow — structure, not effects */
    --shadow: none;

    /* Native widgets (the select popup above all) are drawn by the OS, not by
       these rules. Without this the popup renders light-mode while inheriting the
       near-white `color` off the select — white text on a white menu. Declaring
       the scheme is what actually fixes it; the explicit option colours below are
       the belt-and-braces for engines that ignore it. */
    color-scheme: dark;
    /* Same Firefox white-scrollbar fix as it-budget.theme.css — keep in sync.
       The planner has no --line-strong of its own, so it borrows the site token
       directly here rather than adding a var used in exactly one place. */
    scrollbar-color: var(--color-border-strong) var(--card);

    font-family: var(--font-primary);
    font-size: 14px; /* dense data tool: deliberately below the site's 1.0625rem body */
    line-height: 1.45;
    color: var(--ink);
}

/* Neutralize the site's editorial typography inside the tool */
.col-app h1,
.col-app h2,
.col-app h3,
.col-app p {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: normal;
    color: inherit;
    margin: 0;
    max-width: none;
}

.col-app * {
    box-sizing: border-box;
}

.col-app .wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 112px 2rem 96px; /* 112px clears the fixed navbar */
}

@media (max-width: 768px) {
    .col-app .wrap {
        padding: 96px 1.25rem 64px;
    }
}

/* ---------- Tool header ---------- */
.col-app header.app {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.col-app .title h1 {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 3px;
}

.col-app .title .sub {
    color: var(--muted);
    font-size: 12.5px;
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
}

.col-app .title input.doc-title {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    border-radius: var(--radius-md);
    padding: 2px 8px;
    margin: -2px -8px 4px;
    width: min(560px, 72vw);
}

.col-app .title input.doc-title::placeholder {
    color: var(--muted);
    opacity: 1;
}

.col-app .title input.doc-title:hover {
    border-color: var(--line);
}

.col-app .title input.doc-title:focus {
    border-color: var(--accent);
    outline: none;
    background: var(--raised);
}

.col-app .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.col-app button {
    font: inherit;
    font-family: var(--font-primary);
    cursor: pointer;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--raised);
    color: var(--ink);
    padding: 8px 14px;
    box-shadow: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.col-app button:hover {
    border-color: var(--color-border-strong);
    background: #202024;
}

.col-app button.primary {
    background: var(--accent);
    color: #14100a;
    border-color: var(--accent);
    font-weight: 600;
}

.col-app button.primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.col-app button.ghost {
    background: transparent;
}

.col-app button.ghost:hover {
    background: var(--raised);
}

.col-app button.mini {
    padding: 4px 9px;
    font-size: 12px;
}

.col-app button.danger {
    color: var(--neg);
    background: transparent;
    border-color: transparent;
    padding: 3px 8px;
}

.col-app button.danger:hover {
    background: var(--neg-soft);
    border-color: transparent;
}

.col-app button:focus-visible,
.col-app input:focus-visible,
.col-app select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Layout ---------- */
.col-app .grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 18px;
    align-items: start;
}

@media (max-width: 960px) {
    .col-app .grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Cards (renamed from .card to avoid the site's .card component) ---------- */
.col-app .col-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
    overflow: hidden;
}

.col-app .col-card > h2 {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--dim);
    margin: 0;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--raised);
    display: flex;
    align-items: center;
    gap: 9px;
}

.col-app .col-card > h2 .badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 3px 9px;
    border-radius: var(--radius-full);
}

.col-app .col-card .body {
    padding: 16px;
}

.col-app .note {
    color: var(--muted);
    font-size: 12px;
    margin: 2px 0 12px;
}

/* ---------- Field rows ---------- */
.col-app .field {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
}

/* Three segmented buttons need ~230px and the control column above is 150px, so
   "Weekly" was pushed out of sight. Let a field holding a seg size to it. */
.col-app .field:has(.seg) {
    grid-template-columns: 1fr auto;
}

.col-app .field .seg {
    justify-self: end;
}

.col-app .field label {
    color: var(--dim);
}

.col-app .field .hint {
    grid-column: 1/-1;
    color: var(--muted);
    font-size: 11.5px;
    margin-top: -2px;
}

.col-app .field .ro {
    text-align: right;
    font-weight: 600;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.col-app input[type=number],
.col-app input[type=text],
.col-app select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--ink);
    font: inherit;
    font-family: var(--font-mono);
}

.col-app select {
    font-family: var(--font-primary);
}

.col-app input:focus,
.col-app select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(229, 163, 68, 0.15);
}

/* The popup is a separate surface from the closed control: give it the raised
   tone so it reads as sitting above the card, and an opaque background — a
   translucent one composites against the OS menu, not against the page. */
.col-app select option,
.col-app select optgroup {
    background-color: var(--raised);
    color: var(--ink);
}

.col-app select optgroup {
    color: var(--dim);
    font-style: normal;
    font-weight: 600;
}

/* Mirrors the same rule in it-budget.theme.css — see the long comment there.
   Short version: the highlighted row's background is the DESKTOP's selection
   colour while its text is ours, so the pair is chosen by two different parties.
   Pin both to the site amber. Keep the two files in sync. */
.col-app select option:checked,
.col-app select option:hover {
    background: linear-gradient(0deg, var(--accent) 0%, var(--accent) 100%);
    background-color: var(--accent);
    color: #14100A;
}

.col-app .money-in {
    position: relative;
}

.col-app .money-in::before {
    content: "$";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
}

.col-app .money-in input {
    padding-left: 20px;
}

.col-app .inline {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ---------- Editable tables ---------- */
.col-app table {
    width: 100%;
    border-collapse: collapse;
}

.col-app thead th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    font-weight: 500;
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
}

.col-app thead th.num,
.col-app td.num {
    text-align: right;
}

.col-app tbody td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.col-app tbody tr:last-child td {
    border-bottom: none;
}

.col-app td input[type=text] {
    border-color: transparent;
    background: transparent;
    padding: 6px;
    font-family: var(--font-primary);
}

.col-app td input[type=text]:hover {
    border-color: var(--line);
}

.col-app td input[type=number] {
    text-align: right;
    width: 104px;
}

.col-app td select {
    width: auto;
    padding: 5px 6px;
}

.col-app .row-annual {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 11.5px;
    white-space: nowrap;
}

.col-app tfoot td {
    padding: 9px 8px;
    border-top: 1px solid var(--line);
    font-weight: 600;
    font-family: var(--font-mono);
}

.col-app tfoot tr.grand td {
    border-top: 1px solid var(--color-border-strong);
    font-weight: 700;
    color: var(--ink);
}

.col-app tfoot tr.calc td {
    font-weight: 400;
    color: var(--dim);
}

.col-app .add-row {
    margin-top: 12px;
}

/* ---------- Segmented control ---------- */
.col-app .seg {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.col-app .seg button {
    border: none;
    border-radius: 0;
    padding: 6px 12px;
    background: transparent;
    color: var(--muted);
    font-size: 12.5px;
}

.col-app .seg button:hover {
    background: var(--raised);
    color: var(--ink);
}

.col-app .seg button.on {
    background: var(--accent);
    color: #14100a;
    font-weight: 600;
}

.col-app .seg button + button {
    border-left: 1px solid var(--line);
}

/* ---------- Summary sidebar ---------- */
.col-app .summary {
    position: sticky;
    top: 92px; /* clears the fixed navbar */
}

.col-app .sum-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    align-items: baseline;
}

.col-app .sum-line .k {
    color: var(--dim);
}

.col-app .sum-line .k small {
    color: var(--muted);
    font-size: 11px;
    margin-left: 4px;
}

.col-app .sum-line .k .sub {
    color: var(--muted);
    display: block;
    font-size: 11px;
    line-height: 1.2;
}

.col-app .sum-line .v {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    white-space: nowrap;
}

.col-app .sum-sub {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 14px 0 4px;
    font-weight: 500;
}

.col-app .divider {
    height: 1px;
    background: var(--line);
    margin: 12px 0;
}

.col-app .headline {
    padding: 13px 14px;
    border-radius: var(--radius-md);
    margin: 4px 0 2px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft);
}

.col-app .headline.pos {
    background: var(--good-soft);
    border-color: rgba(95, 185, 138, 0.25);
}

.col-app .headline.neg-bg {
    background: var(--neg-soft);
    border-color: rgba(229, 72, 77, 0.25);
}

.col-app .headline .lbl {
    font-size: 12px;
    color: var(--dim);
}

.col-app .headline .amt {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.col-app .headline .amt small {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
}

/* Numbers: default ink for ≥0, red for <0 (the source tool's rule, dark-adapted) */
.col-app .pos {
    color: var(--pos);
}

.col-app .neg {
    color: var(--neg);
}

/* ---------- Verdict / bars ---------- */
.col-app .verdict {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    margin-top: 12px;
    border: 1px solid transparent;
}

.col-app .verdict.ok {
    background: var(--good-soft);
    border-color: rgba(95, 185, 138, 0.25);
    color: var(--good);
}

.col-app .verdict.warn {
    background: var(--warn-soft);
    border-color: rgba(224, 184, 75, 0.25);
    color: var(--warn);
}

.col-app .verdict.bad {
    background: var(--neg-soft);
    border-color: rgba(229, 72, 77, 0.25);
    color: var(--neg);
}

/* Nothing entered yet — neutral, makes no affordability claim */
.col-app .verdict.empty {
    background: var(--raised);
    border-color: var(--line);
    color: var(--muted);
}

.col-app .verdict .ico {
    font-weight: 800;
}

.col-app .bar {
    height: 10px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-primary);
    border: 1px solid var(--line);
    overflow: hidden;
    display: flex;
    margin: 4px 0 2px;
}

.col-app .bar > span {
    display: block;
    height: 100%;
}

/* Bar fill and its legend swatch share a colour — keep these selectors paired.
   Expenses use the dimmed accent rather than a red: DESIGN.md reserves red for
   semantic error, and "you have expenses" is not an error. */
.col-app .bar .exp,
.col-app .barlegend i.sw-exp {
    background: var(--color-primary-dark);
}

.col-app .bar .sav,
.col-app .barlegend i.sw-sav {
    background: var(--good);
}

.col-app .barlegend {
    display: flex;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted);
    margin-bottom: 6px;
}

.col-app .barlegend i {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}

/* ---------- Grouped expense rows ---------- */
.col-app tbody tr.cat-head td {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    background: var(--raised);
    padding: 6px 8px;
}

.col-app tbody tr.cat-sub td {
    font-weight: 600;
    color: var(--dim);
}

.col-app .name-cell .cat-pick {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--muted);
    padding: 2px 5px;
    width: auto;
}

/* ---------- Breakdown chart -------------------------------------------------
   A bar list. Every bar is the one accent: these categories are nominal, so
   colour would re-encode what bar length already shows — and eight hues would
   break the site's one-accent rule to say nothing new. The label carries
   identity, which is why there is no legend. Deliberately duplicated from
   it-budget.theme.css rather than shared: per the boundary contract the two
   tool themes stay independent so a change to one cannot restyle the other.
   ---------------------------------------------------------------------------- */
.col-app .chart {
    margin: 2px 0 4px;
}

.col-app .chart-row {
    padding: 5px 0;
    break-inside: avoid;
}

.col-app .chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.col-app .chart-label {
    color: var(--dim);
    font-size: 12px;
    /* wraps rather than truncating — a clipped category name is worse than two
       lines in a 320px sidebar */
    min-width: 0;
}

.col-app .chart-val {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--ink);
    white-space: nowrap;
    flex: none;
}

.col-app .chart-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.col-app .chart-track {
    flex: 1;
    min-width: 0;
    height: 8px;
    background: var(--raised);
    border-radius: 2px;
}

.col-app .chart-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    /* square at the baseline, rounded at the data end */
    border-radius: 0 3px 3px 0;
}

.col-app .chart-share {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--muted);
    width: 34px;
    text-align: right;
    flex: none;
}

.col-app .chart-empty {
    color: var(--muted);
    font-size: 12px;
    margin: 2px 0 0;
}

.col-app .chart-note {
    color: var(--muted);
    font-size: 11.5px;
    margin: 2px 0 4px;
}

/* Print-only mirrors of controls that cannot render their own value on paper.
   `.print-mirror` is the generic one, written for every control by
   syncPrintMirrors(); the other two are hand-placed. See the print block. */
.col-app .print-name,
.col-app .print-value,
.col-app .print-mirror {
    display: none;
}

/* ---------- Small print ---------- */
.col-app .stress {
    font-size: 12px;
    color: var(--muted);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

.col-app .stress b,
.col-app .breakdown b {
    color: var(--ink);
    font-weight: 600;
}

.col-app .breakdown {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.55;
}

.col-app .footnote {
    color: var(--muted);
    font-size: 11.5px;
    margin-top: 6px;
}

.col-app .print-only {
    display: none;
}

/* ==========================================================================
   PRINT — force the light layout back.
   The screen theme is dark; a dark PDF would be unreadable and burn toner, so
   every colour is overridden to the original light values here. Site chrome
   (navbar, footer, grain overlay) is removed entirely.
   ========================================================================== */
@media print {

    body {
        background: #fff !important;
        color: #161a20 !important;
    }

    body::after,
    .navbar,
    .footer,
    .scroll-to-top {
        display: none !important;
    }

    /* Doubled class, and it is load-bearing. tool-base.css sets the shared light
       palette on `.tool-app.tool-app` so its print rules outrank screen rules; a
       single `.col-app` here would lose to it and this tool would print in the
       other tools' warmer, smaller style. The planner deliberately keeps its own
       cooler ramp and 11px body — see the header comment in tool-base.css. */
    .col-app.col-app {
        /* Paper is light. Leaving the screen's dark scheme on makes the engine
           draw native widget chrome for a dark UI onto a white sheet. */
        color-scheme: light;
        --bg: #fff;
        --card: #fff;
        --raised: #fff;
        --ink: #161a20;
        --dim: #374151;
        --muted: #6b7280;
        --line: #d7dce3;
        /* The site's amber, darkened for paper — NOT the standalone planner's
           blue (#0f4c81), which is what used to print here. Two tools on the
           same site were handing clients reports in two different brand
           colours; the estimator's print accent is this same value. The
           standalone offline planner keeps its own blue — that file is its own
           product with its own identity. */
        --accent: #8a6420;
        --accent-soft: #f7f1e4;
        --pos: #111418;
        --neg: #c0392b;
        --good: #1f7a4d;
        --good-soft: #eef7f1;
        --warn: #b7791f;
        --warn-soft: #fdf4e3;
        --neg-soft: #fdecea;
        color: #161a20;
        font-size: 11px;
    }

    /* `.wrap`, the `.print-only` masthead, its h1 and its `.meta` line are all
       in tool-base.css at exactly these values.

       The planner deliberately keeps its OWN light-variable block, body colour
       and font size below: it prints a cooler, slightly larger document than
       the other tools (Tailwind's cool grey ramp, inherited from the standalone
       offline planner this page is generated from). Its file loads after the
       base, so those overrides win. Converging them is a visible change to a
       shipped tool's output and belongs in its own change. */

    .col-app .no-print {
        display: none !important;
    }

    /* NOT `display: grid` with one column, which is what this was. Gecko does not
       fragment grid containers across pages at all, so the whole plan was one
       unbreakable box: it did not fit after the masthead, moved wholesale to
       sheet 2, and then overflowed — an entirely blank first page and a line of
       text sliced in half at every page boundary after it. Chromium fragments
       grid fine, which is why Chromium-only print QA never saw it. A column flex
       box fragments in both engines. The estimator carries the same fix. */
    /* Doubled class: this collides with the same rule in tool-base.css, which is
       written `.tool-app.tool-app .grid` so it can outrank screen rules. Only
       the gap actually differs — this tool packs its cards tight on paper. */
    .col-app.col-app .grid {
        display: flex;
        flex-direction: column;
        /* The screen rule sets `align-items: start` so the sticky sidebar hugs its
           content. On a COLUMN flex box that same declaration is the cross axis —
           it shrink-wraps every card horizontally, which printed the summary at
           two thirds the width of the sheet. */
        align-items: stretch;
        gap: 0;
    }

    .col-app .summary {
        position: static;
    }

    /* NOT break-inside: avoid. Any card too tall for the space left on the sheet
       jumped to a fresh page and left the previous one half empty. Cards may
       split; the atoms below are what must never be cut. */
    .col-app .col-card {
        break-inside: auto;
        border-color: #ccc;
        background: #fff;
    }

    .col-app tr,
    .col-app .chart-row,
    .col-app .sum-line,
    .col-app .field {
        break-inside: avoid;
    }

    .col-app .col-card > h2,
    .col-app .sum-sub {
        break-after: avoid;
    }

    .col-app thead {
        display: table-header-group;
    }

    /* But NOT the footer. A tfoot defaults to table-footer-group and repeats on
       every fragment, so once the expense table split it printed "Total expenses
       (incl. mortgage & tax)" at the foot of each page as if that fragment were
       the whole thing. */
    .col-app tfoot {
        display: table-row-group;
    }

    .col-app .col-card > h2 {
        background: #f7f8fa;
        color: #374151;
    }

    .col-app header.app {
        display: none;
    }

    .col-app button {
        display: none;
    }

    /* Hiding the buttons left the segmented control's empty bordered box behind,
       reading as a blank field. The chosen value prints from #payFreqPrint. */
    .col-app .seg {
        display: none;
    }

    /* The "+ Add …" pickers are actions, not values — left visible they printed
       a stray "+ Add expense type…" row under the expense table. */
    .col-app .add-row {
        display: none;
    }

    /* ---- every value prints as text, never as a control --------------------
       A control cannot wrap and cannot size to itself, so printing one means
       fixing a width in advance and clipping anything longer — silently, with
       no ellipsis and no cue. It also carried a real overlap: this block used to
       zero the input's left padding while `.money-in::before` stayed absolutely
       positioned at left:10px, and planner number inputs are left-aligned
       outside tables, so every money field in Property / Taxes & fees / Upfront
       printed its digits directly underneath its own "$".

       syncPrintMirrors() writes a `.print-mirror` span beside every control in
       `.wrap`, which is what makes hiding them outright safe — nothing can
       vanish without a replacement, and the "$" is now real text in the mirror.
       There is deliberately not one control width left in this stylesheet. */
    .col-app input[type=number],
    .col-app input[type=text],
    .col-app select {
        display: none !important;
    }

    .col-app .print-mirror {
        display: inline;
        color: #161a20;
        font-family: var(--font-mono);
        white-space: nowrap;
    }

    .col-app .money-in::before {
        display: none;
    }

    .col-app .money-in {
        display: inline;
    }

    /* A mirror lands in the same 150px control column as the computed `.ro`
       figures, so it has to share their alignment and weight — otherwise the
       spec sheet reads ragged, with "0.092" hard left one line above "$442,000"
       hard right. */
    .col-app .field .money-in,
    .col-app .field .print-mirror {
        text-align: right;
        font-weight: 600;
    }

    /* Down payment and amortization wrap their control in `.inline`, a flex row,
       so the rule above cannot reach them — the flex box itself has to move. */
    .col-app .field .inline {
        justify-content: flex-end;
    }

    .col-app tbody td {
        border-bottom-color: #eceef2;
    }

    .col-app tbody tr.cat-head td {
        color: #111;
        background: #f4f4f5;
    }

    .col-app .print-name {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Nine columns compete for width in the comparison table, which squeezed the
       address into a three-line stack ("1442 rue / des / Cèdres"). Not clipped,
       but not readable either. */
    .col-app #cmpTable .name-cell {
        min-width: 104px;
    }

    .col-app .print-value {
        display: inline;
    }

    /* print-color-adjust is load-bearing, not polish: with "Background graphics"
       unticked in the print dialog every bar would render as an empty track. The
       amount and share are printed as text beside each bar either way, so the
       chart still reads — but it should not have to fall back. */
    .col-app .chart-track,
    .col-app .chart-fill,
    .col-app .bar,
    .col-app .bar > span,
    .col-app .headline {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* --raised is #fff on paper, which leaves no track to see the end of. */
    .col-app .chart-track {
        background: #e4e4e7;
        height: 6px;
    }

    /* The screen rhythm is tuned for a narrow sidebar, where rows need air to
       stay legible. On paper the same chart runs the full width of the sheet,
       so that air is just pages of gap. */
    .col-app .chart {
        margin: 1px 0 8px;
    }

    .col-app .chart-row {
        padding: 2px 0;
    }

    .col-app .chart-line {
        margin-top: 2px;
    }

    .col-app .chart-note {
        color: #555;
    }

    /* ---- structural colour ---------------------------------------------------
       The sheet was black text, grey bands and a single brown rule. These give it
       a spine without spending another hue — the accent already earned its place
       in the masthead, so repeat it where the eye needs to find structure. The
       estimator carries the matching block; keep the two sheets recognisably the
       same document family. */
    .col-app .sum-sub {
        border-bottom: 1px solid var(--accent);
        padding-bottom: 2px;
        color: var(--accent);
    }

    /* The two figures the whole plan exists to deliver. */
    .col-app .headline {
        background: var(--accent-soft);
        border: 1px solid #e8d9b8;
        border-radius: 3px;
        padding: 8px 10px;
    }

    .col-app tbody tr.cat-head td {
        border-left: 3px solid var(--accent);
        padding-left: 6px;
    }

    .col-app tfoot tr:last-child td {
        border-top: 2px solid var(--accent);
    }
}