/* ==========================================================================
   Weighted Pro/Con List — site theme
   Styles for tools/pros-cons.html.

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

   Same technique as the three sibling themes: the tool declares its OWN custom
   property names on the wrapper and maps each onto a site design token, so the
   markup and JS never reference a site token directly.

   NOTHING HERE NEEDS A DOUBLED CLASS IN PRINT. tool-base.css writes its print
   rules as `.tool-app.tool-app …` so they outrank screen rules; a tool only has
   to match that specificity where it wants to OVERRIDE the base. This tool uses
   the base's light palette, its grid gap and its masthead as-is, so a plain
   `.pc-app` prefix is correct throughout. If you ever add a rule here that
   fights one in tool-base.css, double the class on that rule ONLY — never
   wholesale, which is how the planner's savings headline flipped colour.

   The chart component is re-declared here rather than shared, matching the
   other three tools. That is not an oversight: measured across the theme files,
   `.chart-*` differs in every one of them, so there is no common version to
   inherit. See the header comment in tool-base.css.
   ========================================================================== */

.pc-app {
    /* ---- 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);
    --line-strong: var(--color-border-strong);
    --accent: var(--color-primary);
    --accent-soft: rgba(229, 163, 68, 0.12);

    /* ---- the two series ----
       DESIGN.md's one-hue rule asks that any new SERIES case be brought back to
       the doc before it is built; this is that case and it is logged there.
       Pros and cons are a fixed, opposed pair where the mix is the entire point,
       so hue carries something bar length cannot.

       Cons are steel, NOT red. Red is semantic (error) on this site and a con is
       not an error — it is a peer of a pro. Steel is reused from the estimator's
       existing series palette rather than inventing an eleventh colour, and grey
       is deliberately avoided because DESIGN.md reserves it for a row that is
       not a peer, which would read as "cons matter less". */
    --series-pro: var(--accent);
    --series-con: #7E8AA2;

    /* DESIGN.md: flat surfaces, hairline rules, no glow — structure, not effects */
    --shadow: none;

    color-scheme: dark;
    /* Firefox needs this explicitly — `color-scheme: dark` alone left scrollable
       regions drawing a solid white bar across a dark card in the sibling tools. */
    scrollbar-color: var(--line-strong) transparent;

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

/* Neutralize the site's editorial typography inside the tool. `color: inherit`
   is the load-bearing line: it is also what keeps the printed masthead h1 black,
   because styles.css's own h1 colour would otherwise win over the inherited
   #111 and print the heading pale grey on white. */
.pc-app h1,
.pc-app h2,
.pc-app h3,
.pc-app p {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: normal;
    color: inherit;
    margin: 0;
    max-width: none;
}

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

/* The `hidden` ATTRIBUTE is only a UA rule of `display: none`, so ANY author
   `display` declaration beats it. `.stat` and `.sharebar` are both flex, which
   silently made `node.hidden = true` do nothing — the blank-state share bar
   rendered as an empty track and the "not counted yet" row showed a bare 0.
   Caught by rendering the page, not by asserting on `.hidden`, which was true
   the whole time. Any new flex/grid element that JS hides needs this to hold. */
.pc-app [hidden] {
    display: none !important;
}

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

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

/* Visually hidden but reachable by assistive tech. `display:none` and
   `visibility:hidden` both suppress live-region announcements, so this has to be
   the clip-rect form. Not defined anywhere in styles.css — it lives here. */
.pc-app .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- tool header ---------- */
.pc-app header.app {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.25rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}

.pc-app .doc-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px dashed transparent;
    padding: 0 0 2px;
    width: min(560px, 100%);
}

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

/* Every :hover in this file is gated on (hover: hover) — see the block comment
   above `.pc-app button` for why. */
@media (hover: hover) {
    .pc-app .doc-title:hover {
        border-bottom-color: var(--line-strong);
    }
}

.pc-app .doc-title:focus {
    outline: none;
    border-bottom-color: var(--accent);
}

.pc-app header.app .sub {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: 0.6rem;
}

.pc-app .actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- buttons ---------- */
.pc-app button {
    font-family: var(--font-primary);
    font-size: 0.82rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--raised);
    color: var(--ink);
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    /* `manipulation` drops the legacy double-tap-zoom wait, so a tap acts on
       press rather than ~300ms later.
       CONTRACT: `.pc-app .pc-handle { touch-action: none }` further down MUST
       keep beating this — it is both more specific (0,2,0 vs 0,1,1) and later
       in the file, so it does. That rule is load-bearing: with anything other
       than `none`, a touch drag fires pointercancel the instant the browser
       guesses the gesture might be a scroll, and reordering by finger dies. */
    touch-action: manipulation;
    /* We draw our own press state (:active, below). Without this, Chrome
       Android paints a grey box over it as well. */
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

/* HOVER IS GATED ON (hover: hover) THROUGHOUT THIS FILE, and that is a bug fix,
   not tidiness. A touch browser fires the hover state on tap and then leaves it
   applied until you tap something else — so "Add a pro" kept an amber border
   after every press, and a `×` kept a red one, both pointing at a control the
   user was no longer touching. `:active` below is the deliberate replacement:
   feedback while the finger is down, nothing after it lifts. */
@media (hover: hover) {
    .pc-app button:hover {
        border-color: var(--accent);
    }
}

/* Press feedback, both pointer types. Not inside the hover gate: this is the
   only affordance a touch user gets that a press registered at all. */
.pc-app button:active {
    background: var(--card);
    border-color: var(--accent);
}

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

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

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

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

.pc-app button.mini {
    font-size: 0.78rem;
    padding: 0.4rem 0.7rem;
}

/* aria-disabled, not `disabled` — a disabled button cannot hold focus. The
   styling has to be driven off the class the JS sets, since :disabled will
   never match. */
.pc-app button.is-off {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (hover: hover) {
    .pc-app button.is-off:hover {
        border-color: var(--line);
    }
}

.pc-app button.is-off:active {
    background: var(--raised);
    border-color: var(--line);
}

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

/* ---------- layout ---------- */
.pc-app .grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
    align-items: start;
}

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

.pc-app .col-side .summary {
    position: sticky;
    top: 96px;
}

@media (max-width: 1000px) {
    .pc-app .col-side .summary {
        position: static;
    }
}

/* ---------- cards ---------- */
.pc-app .pc-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.pc-app .pc-card h2 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent);
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: var(--raised);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.pc-app .badge {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.45rem;
}

.pc-app .pc-card .body {
    padding: 1.25rem;
}

.pc-app .note {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    max-width: 68ch;
}

/* ---------- the list ---------- */
.pc-app .pc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-app .pc-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--series-pro);
    border-radius: var(--radius-md);
    /* Only transform is animated, and only for the reorder shuffle. The global
       prefers-reduced-motion rule in styles.css collapses this to 0.01ms — which
       is safe here because the JS always writes the FINAL transform and the
       transition merely interpolates towards it. Nothing is positioned by an
       animation, and nothing starts at opacity 0, so if the animation clock
       never advances the row is already where it belongs. Fail visible. */
    transition: transform 160ms ease-in-out;
}

.pc-app .pc-row[data-side="con"] {
    border-left-color: var(--series-con);
}

.pc-app .pc-row.is-grabbed {
    /* The grabbed row must track the pointer 1:1 — no easing on the thing under
       your finger. */
    transition: none;
    position: relative;
    /* Below the navbar's z-index of 1000, deliberately: a row lifted above it
       would float over the fixed header while dragging. */
    z-index: 5;
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.pc-app .pc-list.is-dragging {
    user-select: none;
}

.pc-app .pc-handle {
    /* Required, not cosmetic: without it a touch drag fires pointercancel the
       moment the browser decides the gesture might be a scroll. */
    touch-action: none;
    cursor: grab;
    padding: 4px 6px;
    background: transparent;
    border-color: transparent;
    color: var(--dim);
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: 0.02em;
}

@media (hover: hover) {
    .pc-app .pc-handle:hover {
        color: var(--ink);
        border-color: var(--line);
    }
}

.pc-app .pc-handle:active {
    cursor: grabbing;
}

/* Named .side / .side-btn, NEVER .seg — the estimator's print block hides .seg
   outright, and a shared class name across tools has already caused that defect
   once (the share bar printed as an empty track). */
.pc-app .side {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pc-app .side-btn {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.55rem;
}

@media (hover: hover) {
    .pc-app .side-btn:hover {
        color: var(--ink);
        background: var(--card);
    }
}

.pc-app .side-btn[data-k="pro"][aria-pressed="true"] {
    background: var(--series-pro);
    color: #14100a;
    font-weight: 600;
}

.pc-app .side-btn[data-k="con"][aria-pressed="true"] {
    background: var(--series-con);
    color: #0d1014;
    font-weight: 600;
}

.pc-app .pc-text {
    font-family: inherit;
    font-size: 0.9rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    padding: 0.4rem 0.55rem;
    min-width: 0;
    width: 100%;
}

.pc-app .pc-text::placeholder {
    color: var(--muted);
    opacity: 1;
}

.pc-app .pc-text:focus {
    outline: none;
    border-color: var(--accent);
}

.pc-app .pc-wrap-weight {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pc-app .pc-weight {
    /* One line, both engines, and it respects color-scheme — which is why this
       is a native range input rather than a hand-built slider that would need
       its own pointer handling and its own keyboard story. */
    accent-color: var(--accent);
    width: 108px;
    cursor: pointer;
}

/* Every value is also text (DESIGN.md): the slider is the control, this is the
   figure. */
.pc-app .pc-wval {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    min-width: 2ch;
    text-align: right;
}

.pc-app .pc-rowtools {
    display: flex;
    gap: 2px;
}

.pc-app .pc-move,
.pc-app .pc-del {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
    padding: 0.2rem 0.4rem;
    line-height: 1;
    font-size: 0.9rem;
}

@media (hover: hover) {

    .pc-app .pc-move:hover,
    .pc-app .pc-del:hover {
        color: var(--ink);
        border-color: var(--line);
    }

    .pc-app .pc-del:hover {
        color: var(--color-error);
        border-color: var(--color-error);
    }
}

/* Delete is the one destructive control in the row, so its press state names
   itself rather than borrowing the generic amber. */
.pc-app .pc-del:active {
    color: var(--color-error);
    border-color: var(--color-error);
}

/* The end-of-list state. These stay focusable — see the aria-disabled note in
   the JS — so they are dimmed rather than removed from the tab order. */
.pc-app .pc-move[aria-disabled="true"] {
    opacity: 0.3;
    cursor: not-allowed;
}

@media (hover: hover) {
    .pc-app .pc-move[aria-disabled="true"]:hover {
        color: var(--muted);
        border-color: transparent;
    }
}

/* Same reason as the hover case: at the end of the list the button is still
   focusable (aria-disabled, never disabled) but must not look pressable. */
.pc-app .pc-move[aria-disabled="true"]:active {
    background: transparent;
    color: var(--muted);
    border-color: transparent;
}

.pc-app .pc-empty {
    color: var(--muted);
    font-size: 0.82rem;
    padding: 1.25rem 0;
    text-align: center;
}

.pc-app .add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.pc-app .add-hint {
    color: var(--muted);
    font-size: 0.76rem;
}

/* ---------- touch layout ----------
   The row re-flows to four lines, so every control in it can be a real 44px
   target and the two things you actually manipulate — the label and the weight
   — each get the full row width:

       ⠿   [ PRO │ CON ]
       [ Something in favour                 ]
       [ ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ]  7
       [↑] [↓]                          [×]

   MEASURED BEFORE THIS BLOCK EXISTED, at 375px: grip 26.3×25.8, side buttons
   37.5×23.5, ↑/↓ 24×21.5, × 21×21.5 with 2px between them, slider 108×16. The
   delete button was under the WCAG 2.2 AA floor of 24×24, not merely under the
   44px platform guideline, and it sat 2px from "move down".

   WHY FOUR LINES AND NOT THREE — this was measured, not chosen. Putting the
   grip, the side toggle and the three row tools on one line needs 294px of
   content width at honest 44px sizes; a 320px viewport has 231px and a 375px
   one has 286px, so the fit only arrives at ~383px. Below that the tools
   overflowed their grid column and sat ON TOP of the PRO/CON toggle — and
   nothing showed it, because `body { overflow-x: hidden }` in styles.css eats
   the symptom and the overlap is leftward, so a right-edge check reads clean.
   The alternative was a second breakpoint at ~400px, which would have split
   real phones almost down the middle (390/393 one way, 412/430 the other) for
   two layouts to maintain. One layout that holds from 320px up is worth the
   extra ~50px of row height; height is scrolling, and scrolling is cheap next
   to mis-tapping delete.

   EVERY SIZE HERE IS px, NOT rem, AND THAT IS LOAD-BEARING. styles.css:1142
   drops `:root { font-size: 15px }` at 480px, so a rem-based 44px target would
   render at 41px on exactly the phones that need it most — the sizing would
   quietly shrink where it matters. Same reason `.pc-text` below is 16px and
   not 1rem.

   Grid placement is explicit for all five children rather than left to
   auto-flow, so the line each one lands on is stated here rather than being a
   consequence of DOM order. */
@media (max-width: 620px) {

    /* Buys back 7.5px of row width per side on a phone — it all goes to the
       text field and the slider. */
    .pc-app .pc-card .body {
        padding: 1rem;
    }

    .pc-app .pc-row {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 8px;
        row-gap: 8px;
        padding: 8px;
    }

    .pc-app .pc-handle {
        grid-row: 1;
        grid-column: 1;
    }

    .pc-app .side {
        grid-row: 1;
        grid-column: 2;
        justify-self: start;
    }

    .pc-app .pc-text {
        grid-row: 2;
        grid-column: 1 / -1;
        /* 16px LITERAL. iOS Safari zooms the viewport whenever a focused input
           computes below 16px and does not zoom back out afterwards, so every
           tap on an entry left the page magnified. This was 13.5px under the
           480px root step. */
        font-size: 16px;
        min-height: 44px;
    }

    .pc-app .pc-wrap-weight {
        grid-row: 3;
        grid-column: 1 / -1;
    }

    .pc-app .pc-rowtools {
        grid-row: 4;
        grid-column: 1 / -1;
        /* Up from 2px between three adjacent targets. */
        gap: 6px;
    }

    /* Delete is the only destructive control in the row and it was 2px from
       "move down". `.pc-rowtools` is a flex box, so an auto margin on the last
       child banks the whole remaining line width between them. */
    .pc-app .pc-del {
        margin-left: auto;
    }

    .pc-app .pc-weight {
        flex: 1 1 auto;
        /* Overrides the 108px desktop width — ten discrete steps across 108px
           is ~11px per step under a fingertip. */
        width: auto;
        /* The native track stays its own height and centres inside the box, so
           this takes the grab area from 16px to 44px without hand-building a
           thumb — which would cost `accent-color`, the keyboard story and the
           print treatment all at once. */
        height: 44px;
    }

    /* inline-flex + centring is required, not decorative: `min-height` alone
       leaves the glyph sitting against the top edge of a 44px box. */
    .pc-app .pc-handle,
    .pc-app .side-btn,
    .pc-app .pc-move,
    .pc-app .pc-del {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }

    /* These three are borderless on desktop, where they read as quiet icon
       buttons tucked at the end of a dense row. Given a 44px box on a line of
       their own that reading collapses — they become three glyphs adrift in an
       empty band, and nothing shows where the target actually is. The hairline
       is the affordance; it is the same border the rest of the system uses. */
    .pc-app .pc-handle,
    .pc-app .pc-move,
    .pc-app .pc-del {
        background: var(--card);
        border-color: var(--line);
    }

    /* Covers the header's Empty / Save as PDF and the two add buttons in one
       rule. Width is left alone — they size to their labels. */
    .pc-app button {
        min-height: 44px;
    }
}

/* ---------- summary stats ---------- */
.pc-app .stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
}

.pc-app .stat .k {
    color: var(--dim);
    font-size: 0.8rem;
}

.pc-app .stat .v {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.pc-app .stat.big {
    display: block;
    border-bottom: 0;
    padding: 0 0 10px;
}

.pc-app .stat.big .k {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
}

.pc-app .stat.big .v {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink);
    margin: 2px 0 1px;
}

.pc-app .stat.big .u {
    color: var(--muted);
    font-size: 0.78rem;
}

/* ---------- the tug-of-war share bar ----------
   The bar is decoration and is aria-hidden; the legend carries every figure as
   text, which is what keeps DESIGN.md's "every value is also text" rule true.
   Fill and swatch are bound by data-k so ONE selector paints both and they
   cannot drift apart — the failure mode the planner's paired .exp/.sav classes
   need a comment to guard against. */
.pc-app .sharebar {
    display: flex;
    height: 12px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--raised);
    margin: 4px 0 10px;
}

.pc-app .share-seg {
    display: block;
    height: 100%;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.pc-app .share-seg[data-k="pro"],
.pc-app .sw[data-k="pro"],
.pc-app .chart-fill[data-k="pro"] {
    background: var(--series-pro);
}

.pc-app .share-seg[data-k="con"],
.pc-app .sw[data-k="con"],
.pc-app .chart-fill[data-k="con"] {
    background: var(--series-con);
}

.pc-app .sharelegend {
    margin-bottom: 12px;
}

.pc-app .legend-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
}

.pc-app .sw {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.pc-app .legend-label {
    color: var(--dim);
    font-size: 0.8rem;
    flex: 1;
    min-width: 0;
}

.pc-app .legend-val,
.pc-app .legend-share {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.pc-app .legend-share {
    color: var(--muted);
    min-width: 4ch;
    text-align: right;
}

/* ---------- section headings ---------- */
.pc-app .sub-head {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin: 16px 0 8px;
}

/* ---------- the bar-list chart ----------
   Re-declared per tool, matching the three siblings; see the header comment. */
.pc-app .chart {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pc-app .chart-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

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

.pc-app .chart-label {
    color: var(--dim);
    font-size: 0.8rem;
    min-width: 0;
    /* wraps rather than truncating — DESIGN.md */
    overflow-wrap: anywhere;
}

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

.pc-app .chart-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pc-app .chart-track {
    background: var(--raised);
    border-radius: 3px;
    flex: 1;
    height: 6px;
    min-width: 0;
    overflow: hidden;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.pc-app .chart-fill {
    display: block;
    height: 100%;
    /* square at the baseline, rounded at the data end — DESIGN.md */
    border-radius: 0 3px 3px 0;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.pc-app .chart-share {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    min-width: 4ch;
    text-align: right;
    flex: none;
}

.pc-app .chart-empty {
    color: var(--muted);
    font-size: 0.78rem;
    padding: 2px 0 4px;
}

.pc-app .chart-note {
    color: var(--dim);
    font-size: 0.78rem;
    line-height: 1.6;
    margin-top: 14px;
}

.pc-app .footnote {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.55;
    margin-top: 16px;
    padding-top: 12px;
}

/* ---------- lead-in to the consulting CTA ---------- */
.pc-app .tool-cta {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
    max-width: 68ch;
}

.pc-app .tool-cta p {
    color: var(--dim);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* ==========================================================================
   PRINT — the report is the deliverable
   The editor column is hidden outright, which is what makes this tool need NO
   print mirrors: there are zero form controls in the printed area, so no
   <input> ever has to render a value on paper. If a future revision ever prints
   the editor, that changes and the print-mirror contract applies.

   The shared invariants — body reset, light palette, .wrap, the .print-only
   masthead, the .grid flex fix for Gecko, the page-break atoms and
   print-color-adjust on .chart-track/.chart-fill — all come from tool-base.css.
   Only this tool's own surfaces are below.
   ========================================================================== */
@media print {

    .pc-app .col-main {
        display: none !important;
    }

    .pc-app .pc-card {
        border: 1px solid var(--line);
        /* NOT break-inside: avoid. On the estimator that rule sent any card too
           tall for the remaining space to a fresh sheet and cost a page and a
           half of white space. Cards may split; the atoms may not. */
        break-inside: auto;
        /* Screen sets overflow:hidden for the rounded h2 band. On paper that
           silently amputates anything wider than the card. */
        overflow: visible;
    }

    .pc-app .pc-card h2 {
        color: #111;
        background: #f4f4f5;
    }

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

    .pc-app .stat.big .v {
        color: #111;
    }

    .pc-app .pc-card h2,
    .pc-app .sub-head {
        break-after: avoid;
    }

    .pc-app .legend-row {
        break-inside: avoid;
    }

    /* Paper counterparts of the two series. Darker than the screen set — these
       are inks on white, not light on a dark card. The legend carries every
       label, weight and share as text, so nothing depends on telling them
       apart, but they stay distinguishable in greyscale anyway. */
    .pc-app .share-seg[data-k="pro"],
    .pc-app .sw[data-k="pro"],
    .pc-app .chart-fill[data-k="pro"] {
        background: #8a6420;
    }

    .pc-app .share-seg[data-k="con"],
    .pc-app .sw[data-k="con"],
    .pc-app .chart-fill[data-k="con"] {
        background: #4a5568;
    }

    /* --raised is #f4f4f5 on paper, which is invisible against a white sheet;
       the track has to be a shade the eye can find the end of. */
    .pc-app .chart-track,
    .pc-app .sharebar {
        background: #e4e4e7;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .pc-app .footnote {
        color: #444;
    }

    /* Screen spacing put a full ten-entry list about 60px over one sheet, which
       spilled the footnote onto a page of its own — a two-line page 2 on a tool
       whose whole deliverable is a one-page summary. These rules and the four
       below reclaim ~130px, which lands the maximum case (10 entries, both
       charts, the note and the footnote) on ONE sheet in both engines, with
       61px to spare on Letter.

       Letter is the case that has to fit: Chromium defaults to it and it is
       ~50px shorter than the A4 Firefox assumes here, so a change that still
       fits in Firefox can already have broken Chromium. Every figure above was
       measured by rendering at the ten-entry cap and reading the last non-white
       row of the raster — not estimated. If a future revision adds a section to
       the report, re-measure the cap case rather than assuming it still fits. */
    .pc-app .chart {
        gap: 5px;
    }

    .pc-app .chart-row {
        gap: 1px;
    }

    .pc-app .sub-head {
        margin: 8px 0 4px;
    }

    .pc-app .stat {
        padding: 4px 0;
    }

    .pc-app .chart-note {
        margin-top: 10px;
    }

    .pc-app .footnote {
        margin-top: 10px;
        padding-top: 8px;
    }

    .pc-app .stat.big {
        padding-bottom: 6px;
    }

    /* 2.6rem is a screen size. On paper it is roughly 42px of headline for a
       two-character number, and those pixels are the difference between a
       one-page report and a page 2 carrying nothing but the footnote. Chromium
       defaults to Letter, which is ~50px shorter than the A4 that Firefox
       assumes here, so Letter is the case that has to fit. */
    .pc-app .stat.big .v {
        font-size: 2rem;
    }

    .pc-app .pc-card .body {
        padding: 12px 1.25rem;
    }

    /* Doubled class: tool-base.css sets `.tool-app.tool-app .print-only`, so a
       plain `.pc-app` prefix here would lose the tie and this margin would
       silently do nothing. The only rule in this file that needs it. */
    .pc-app.pc-app .print-only {
        margin-bottom: 10px;
    }
}