/* ========================================
   [pt_cost_calculator] — "What retyping costs you"
   A work order on a whiteprint sheet: numbered boxes on the left, a ruled ledger of results on the right.
   The annual cost is the one big orange figure (the bold-numbers treatment); the half bar shows what could come back.
   Uses the whiteprint tokens (--paper, --ink ...) from style.css.
   ======================================== */

.pt-calc {
    container-type: inline-size;
    container-name: ptcalc;
    font-family: var(--ui);
    color: var(--ink);
}
.pt-calc [hidden] { display: none !important; }   /* grid/flex rules below must not un-hide */

/* Plain heading (only when the shortcode is used without a sheet number) */
.pt-calc-head { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.pt-calc-eyebrow { margin: 0; font: 600 var(--text-label)/1.25 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pt-calc .pt-calc-title { margin: 0; max-width: 14em; font: 700 var(--text-h2)/.95 var(--display); text-transform: uppercase; }

/* ---------- The sheet ---------- */
.pt-calc-body {
    display: grid; grid-template-columns: minmax(0, 1fr);
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px oklch(0.29 0.075 254 / .22), 0 30px 60px -30px oklch(0.12 0.05 256 / .5);
    margin: 7px;
}
.pt-calc-form, .pt-calc-results { padding: clamp(18px, 3vw, 36px); min-width: 0; }
.pt-calc-form { border-bottom: 1px solid var(--ink); }
.pt-calc:not(.is-live) .pt-calc-results { max-width: 44rem; }

@container ptcalc (min-width: 56rem) {
    .pt-calc.is-live .pt-calc-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    .pt-calc.is-live .pt-calc-form { border-bottom: 0; border-right: 1px solid var(--ink); }
}

/* ---------- Inputs: numbered work-order boxes ---------- */
.pt-calc-form { display: grid; align-content: start; }
.pt-calc-field {
    display: grid; grid-template-columns: 44px minmax(0, 1fr);
    row-gap: 8px; padding: 14px 0;
    border-top: 1px solid var(--rule);
}
.pt-calc-form > .pt-calc-field:first-child { border-top: 0; padding-top: 0; }
.pt-calc-field > :not(.pt-calc-n) { grid-column: 2; }
.pt-calc-n { grid-row: 1 / span 3; padding-top: 2px; font: 700 1.2rem/1 var(--display); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pt-calc-label { font: 600 1rem/1.3 var(--ui); color: var(--ink); }
.pt-calc-opt { margin-left: .35rem; font: italic 400 .9rem/1.3 var(--body); color: var(--ink-2); }
.pt-calc .pt-calc-hint { margin: 0; font: 400 .92rem/1.45 var(--body); color: var(--ink-2); }

.pt-calc-input {
    display: inline-flex; align-items: stretch; justify-self: start; max-width: 100%;
    min-height: 3rem; background: var(--paper); border: 1px solid var(--ink);
}
.pt-calc-input:focus-within { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
.pt-calc-input input {
    width: 6.5ch; min-width: 0; margin: 0; padding: 0 .3rem 0 .6rem;
    border: 0; border-radius: 0; background: transparent; color: var(--ink);
    font: 600 1.5rem/1 var(--display); font-variant-numeric: tabular-nums lining-nums; text-align: right;
    appearance: textfield; -moz-appearance: textfield;
}
.pt-calc-input input:focus { outline: none; }
.pt-calc-input input::-webkit-outer-spin-button,
.pt-calc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pt-calc-input input:placeholder-shown + .pt-calc-unit { opacity: .55; }
.pt-calc-unit { display: flex; align-items: center; padding: 0 .6rem 0 .1rem; font: 500 .82rem/1 var(--ui); color: var(--ink-2); white-space: nowrap; }
.pt-calc-step:first-child + .pt-calc-unit { padding: 0 0 0 .7rem; }
.pt-calc-step {
    flex: none; width: 44px; display: flex; align-items: center; justify-content: center;
    margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink);
    font: 500 1.3rem/1 var(--ui); cursor: pointer; touch-action: manipulation;
    transition: background-color .15s var(--ease-out), color .15s var(--ease-out);
}
.pt-calc-step:first-child { border-right: 1px solid var(--rule); }
.pt-calc-step:last-child { border-left: 1px solid var(--rule); }
.pt-calc-step:hover { background: var(--ink); color: var(--paper); }
.pt-calc-step:active { background: var(--orange-ink); color: var(--paper); }

.pt-calc-kind select {
    justify-self: start; width: auto; min-width: 12rem; max-width: 100%; min-height: 3rem;
    padding: 0 40px 0 14px; border: 1px solid var(--ink); border-radius: 0; appearance: none; cursor: pointer;
    font: 600 1rem/1 var(--ui); color: var(--ink);
    background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23233a6b' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
}

.pt-calc-billing { margin: 4px 0 0; border-top: 1px solid var(--rule); }
.pt-calc-billing summary {
    list-style: none; cursor: pointer;
    display: grid; grid-template-columns: 44px minmax(0, 1fr); row-gap: 2px; align-items: center;
    min-height: var(--tap); padding: 14px 0;
}
.pt-calc-billing summary::-webkit-details-marker { display: none; }
.pt-calc-billing summary::before {
    content: "+"; grid-row: 1 / span 2; align-self: start;
    width: 22px; height: 22px; display: grid; place-items: center;
    border: 1px solid var(--ink); font: 600 1rem/1 var(--ui);
}
.pt-calc-billing[open] summary::before { content: "\2212"; }
.pt-calc-billing summary:hover::before { background: var(--ink); color: var(--paper); }
.pt-calc-sum-t { font: 600 1rem/1.3 var(--ui); }
.pt-calc-sum-d { grid-column: 2; font: 400 .92rem/1.4 var(--body); color: var(--ink-2); }
.pt-calc-billing-body > .pt-calc-field:first-child { border-top: 0; padding-top: 0; }

/* ---------- Results: a ruled ledger with one big figure ---------- */
.pt-calc-results { display: flex; flex-direction: column; }
.pt-calc .pt-calc-caption { margin: 0 0 10px; font: 600 var(--text-label)/1.4 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pt-calc:not(.is-live) .pt-calc-caption { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink-2); }

.pt-calc-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "how v";
    column-gap: 16px; row-gap: 2px; align-items: baseline;
    padding: 14px 0; border-top: 1px solid var(--rule);
}
.pt-calc-caption + .pt-calc-row { border-top: 0; padding-top: 4px; }
.pt-calc .pt-calc-row p { margin: 0; }
.pt-calc .pt-calc-k { grid-area: k; font: 600 .78rem/1.3 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.pt-calc .pt-calc-v {
    grid-area: v; align-self: center; text-align: right;
    font: 700 clamp(1.9rem, 1.5rem + 1.4vw, 2.8rem)/1 var(--display); color: var(--ink);
    font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.005em; overflow-wrap: anywhere;
}
.pt-calc .pt-calc-how { grid-area: how; font: italic 400 .92rem/1.4 var(--body); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* The key figure: B's big number, the only orange in the results. */
.pt-calc-row-key {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "v" "how";
    margin: 8px 0; padding: 18px 18px 16px;
    border: 1px solid var(--orange-ink); background: oklch(0.72 0.185 47 / .08);
}
.pt-calc-row-key + .pt-calc-row { border-top: 0; }
.pt-calc .pt-calc-row-key .pt-calc-k { color: var(--orange-ink); }
.pt-calc .pt-calc-row-key .pt-calc-v {
    text-align: left; justify-self: start; margin: 6px 0 4px;
    font-size: clamp(3.8rem, 2rem + 7vw, 7.2rem); line-height: .86; letter-spacing: -.015em; color: var(--orange-ink);
}

/* Half bar: what stays, and what could go away */
.pt-calc-half { display: grid; grid-template-columns: 1fr 1fr; margin: 2px 0 10px; border: 1px solid var(--ink); min-height: 44px; }
.pt-calc-half span { display: flex; align-items: center; padding: 6px 10px; font: 700 .78rem/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.pt-calc-half span:first-child { background: var(--ink); color: var(--paper); }
.pt-calc-half span:last-child { color: var(--ink); background: repeating-linear-gradient(-45deg, oklch(0.54 0.17 42 / .45) 0 1.5px, transparent 1.5px 7px); border-left: 1px solid var(--ink); }

.pt-calc-row.is-empty .pt-calc-v { color: var(--muted); }
.pt-calc-row-cash .pt-calc-v { color: var(--ink); }

.pt-calc .pt-calc-honest { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--ink); font: 400 .98rem/1.45 var(--body); color: var(--ink-2); }
.pt-calc .pt-calc-honest a { color: var(--ink); }
.pt-calc .pt-calc-cta { margin: 14px 0 0; }
.pt-calc-cta .btn { text-wrap: balance; }

@container ptcalc (max-width: 26rem) {
    .pt-calc-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "v" "how"; }
    .pt-calc .pt-calc-v { text-align: left; }
    .pt-calc-cta .btn { display: flex; width: 100%; justify-content: space-between; }
    .pt-calc-half span { font-size: .7rem; padding: 6px 8px; }
}

.pt-calc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Motion: a quick settle on figures that changed ---------- */
@media (prefers-reduced-motion: no-preference) {
    .pt-calc-v.is-changed { animation: pt-calc-tick .28s var(--ease-out); }
    @keyframes pt-calc-tick { from { opacity: .35; transform: translateY(.12em); } to { opacity: 1; transform: none; } }
}

/* Visible keyboard focus on every calculator control */
.pt-calc :is(input, select, button, summary, a):focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
.pt-calc-input input:focus-visible { outline: none; }