/* The savings calculator (/calculator) and its section on the home page (Docs/Calculator.md). Served by the site from
   /_content/Opposable.AI.Tools.Calculator/calculator.css. On top of site.css and app.css, using their :root tokens (no hard-coded colours except
   the border colour the site's own fields use). Moves into the site's calculator package with calculator.js. */

/* The jobs: a list of rows, the name and its hint on the left, the hours box on the right */
.calc-rows { list-style: none; margin: 0; padding: 0; }
.calc-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.calc-row:first-child { border-top: 0; padding-top: 0; }
.calc-row label { display: grid; gap: 2px; }
.calc-row label strong { color: var(--navy); }
/* A slider and its value beside it ("4 hours", "£29") */
.calc-hours { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.calc-hours input[type=range] { width: 220px; }
.calc-hours output { min-width: 5.5em; text-align: right; font-weight: 600; color: var(--muted); }
/* grey until they've moved it (the starting figure is our guess), then theirs */
.calc-row.is-touched output { color: var(--navy); }
.calc-start-note { margin: 4px 0 0; max-width: 40em; color: var(--muted); }
.calc-other { display: grid; gap: 6px; }
.calc-other input {
    font: inherit; padding: 10px 12px; border: 1px solid #CFCABF; border-radius: var(--radius-sm); background: var(--white); min-height: 48px;
    width: 100%; max-width: 320px;
}

/* The sliders, drawn the same in every browser: a thick track, and a thumb big enough for a thumb (28px, inside a
   44px touch area). The track's filled part isn't drawn: that needs an inline style per slider, which the security
   policy blocks, and the value beside it says the same */
input[type=range] { -webkit-appearance: none; appearance: none; height: 44px; margin: 0; background: transparent; cursor: pointer; accent-color: var(--blue); }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--line); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--line); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--blue); border: 3px solid var(--white); box-shadow: 0 1px 4px rgba(19,35,63,.35); }
input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); border: 3px solid var(--white); box-shadow: 0 1px 4px rgba(19,35,63,.35); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--spark); outline-offset: 2px; }
input[type=range]:focus-visible::-moz-range-thumb { outline: 3px solid var(--spark); outline-offset: 2px; }

/* On a phone the slider goes under the name, the whole width, with its value at the end */
@media (max-width: 560px) {
    .calc-row { grid-template-columns: 1fr; }
    .calc-hours input[type=range] { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* The result, beside the jobs on a wide screen, and kept in view while they type */
.calc-results { position: sticky; top: 92px; }
/* The cost a year: the biggest thing on the page after the heading, on navy so it can't be missed */
.calc-cost { margin: -24px -24px 20px; padding: 24px; background: var(--navy); color: var(--white); border-radius: var(--radius) var(--radius) 0 0; }
.calc-cost p { margin: 0; }
.calc-cost-label { font-size: var(--step-0); color: #C7D1E0; }
.calc-cost .calc-cost-figure { font: 700 var(--step-4)/1.05 var(--font-head); letter-spacing: -0.02em; margin: 6px 0 12px; overflow-wrap: anywhere; }
.calc-cost-per { font-size: var(--step-1); font-weight: 600; letter-spacing: 0; color: #C7D1E0; }
.calc-cost-hours { font-size: var(--step--1); color: #C7D1E0; }
.calc-cost-hours strong { color: var(--white); }
.calc-cost-weeks { white-space: nowrap; }
.calc-worth { margin: 16px 0 8px; display: grid; gap: 2px; }
.calc-worth label { font-weight: 600; color: var(--navy); font-size: var(--step--1); }
.calc-worth .calc-hours input[type=range] { flex: 1 1 auto; width: auto; min-width: 0; }
.calc-worth output { color: var(--navy); min-width: 3em; }
.calc-salary { margin: 0; }
.calc-biggest ol { padding-left: 20px; margin: 0 0 12px; }
.calc-biggest li { margin: 4px 0; }
.calc-next { font-size: var(--step--1); }
.calc-biggest .actions { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }

/* On a wide screen the email box sits under the jobs, with the result beside both; on a phone (one column) it
   follows the result, as in the page's order */
.calc-results { grid-column: 2; grid-row: 1 / span 2; }
.calc-keep { grid-column: 1; }
.calc-keep h2 { font-size: var(--step-1); }
.calc-keep .field { max-width: 420px; }

/* The bar at the foot of a phone's screen: only where the result is below the jobs (the booking grid's breakpoint) */
.calc-bar { display: none; }
@media (max-width: 960px) {
    .calc-results, .calc-keep { grid-column: auto; grid-row: auto; }
    .calc-results { position: static; }
    .calc-bar:not([hidden]) {
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        position: sticky; bottom: 0; z-index: 10; margin-top: 16px; padding: 12px var(--gutter);
        background: var(--navy); color: var(--white); text-decoration: none; box-shadow: var(--shadow);
    }
    .calc-bar:hover { color: var(--white); }
    .calc-bar-go { font-weight: 600; text-decoration: underline; white-space: nowrap; }
}

/* the bar's cost, big enough to read at a glance */
.calc-bar-cost { font: 700 var(--step-2)/1 var(--font-head); }

/* With AI, under each job's slider (Ben, 2026-10-13): the whole width of the row, quieter than the job itself, with
   what their hours become in the site's blue */
.calc-ai-row { grid-column: 1 / -1; margin: 6px 0 0; font-size: var(--step--1); color: var(--muted); }
.calc-ai-row:empty { display: none; }
.calc-ai-row strong { color: var(--navy); }
/* what their hours become, on a line of its own under the per-task figure */
.calc-ai-change { display: block; margin-top: 2px; color: var(--blue); font-weight: 600; }
.calc-ai-note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
/* the result box's With AI part: under a line, the time it frees, then the turnover gain as the figure to take away */
.calc-cost .calc-cost-with-ai { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); }
.calc-cost-with-ai p { font-size: var(--step--1); color: #C7D1E0; }
.calc-cost-with-ai p + p { margin-top: 6px; }
.calc-cost-with-ai strong { color: var(--white); }
.calc-cost .calc-cost-subhead { font: 700 var(--step-0)/1.2 var(--font-head); color: var(--white); margin-bottom: 4px; }
.calc-cost-with-ai a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); }
.calc-cost-with-ai a:hover { color: var(--white); }
/* How I'll use the savings: the question again, above the result, in a white box of its own so it's clearly a choice
   (Ben, 2026-10-13), one answer a line */
.calc-use-short { margin: 0 0 12px; padding: 14px 20px 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.calc-use-short legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font: 600 var(--step-1)/1.25 var(--font-head); color: var(--navy); }
.calc-use-short .check { display: flex; clear: both; padding: 4px 0; font-size: var(--step-0); font-weight: 500; color: var(--navy); }

/* Your working week: two doughnuts side by side, admin in orange against jobs in the site's blue (a blue/orange pair,
   which colour-blind readers can still tell apart), the numbers beside them so colour is never the only key */
.calc-week { --calc-admin: #C2410C; --calc-jobs: var(--blue); }
.calc-pies { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 12px; }
.calc-pie { margin: 0; display: grid; gap: 8px; justify-items: center; text-align: center; }
.calc-pie svg { width: 100%; max-width: 180px; height: auto; }
.calc-pie-track { fill: none; stroke: var(--line); stroke-width: 16; }
.calc-pie-arc { fill: none; stroke-width: 16; transition: stroke-dasharray .2s ease, stroke-dashoffset .2s ease; }
.calc-pie-arc--admin { stroke: var(--calc-admin); }
.calc-pie-arc--jobs { stroke: var(--calc-jobs); }
.calc-pie-share { font: 700 26px var(--font-head); fill: var(--navy); text-anchor: middle; dominant-baseline: middle; }
.calc-pie-share-label { font: 500 10px var(--font-body); fill: var(--muted); text-anchor: middle; }
.calc-pie figcaption { display: grid; gap: 2px; font-size: var(--step--1); color: var(--ink); }
.calc-pie figcaption strong { color: var(--navy); font-size: var(--step-0); }
/* each key on one line ("On jobs: 33.5 hours"), its swatch in front */
.calc-key { display: block; white-space: nowrap; }
.calc-key::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: 0; }
@media (max-width: 420px) { .calc-pie figcaption { font-size: 0.8125rem; } }
.calc-key--admin::before { background: var(--calc-admin); }
.calc-key--jobs::before { background: var(--calc-jobs); }
.calc-week-gain { margin: 0; font-size: var(--step-1); color: var(--navy); text-align: center; }
.calc-week .notice { margin: 12px 0 0; }
@media (prefers-reduced-motion: reduce) { .calc-pie-arc { transition: none; } }

/* Your turnover: two bars on one scale from £0, now in grey-blue and with AI in the site's blue, the values above
   them on the right, so nothing depends on the colour */
.calc-turnover-rate { margin: 4px 0 12px; }
.calc-bars { margin: 0 0 12px; }
.calc-bar-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px; font-size: var(--step--1); font-weight: 600; color: var(--navy); }
.calc-bar-head span:last-child { font-weight: 700; color: var(--ink); }
.calc-bar-head--ai { margin-top: 10px; }
.calc-bar-head--ai span:last-child { color: var(--navy); font-size: var(--step-0); }
/* a 22px bar, rounded at the ends by its box (the SVG is stretched, so its own corners would go oval) */
.calc-bar-svg { display: block; width: 100%; height: 22px; border-radius: 4px; overflow: hidden; }
.calc-bar-track { fill: var(--blue-soft); }
.calc-bar-fill { transition: width .2s ease; }
.calc-bar-fill--now { fill: #8FA6C4; }
.calc-bar-fill--ai { fill: var(--blue); }
.calc-turnover-gain { margin: 0 0 4px; font-size: var(--step-1); color: var(--navy); }
.calc-turnover-note { margin: 0; }
@media (prefers-reduced-motion: reduce) { .calc-bar-fill { transition: none; } }

/* the turnover gain and the time saved in the headline box, the same size (Ben): the biggest figures after the cost */
.calc-cost .calc-cost-turnover { margin-top: 10px; font-size: var(--step-0); color: #C7D1E0; }
.calc-cost .calc-cost-turnover a { color: inherit; text-decoration: none; }
.calc-cost-turnover a:hover { color: #C7D1E0; }
.calc-cost-turnover-figure { display: block; font: 700 var(--step-3)/1.1 var(--font-head); color: var(--brand-blue); margin: 2px 0; }

/* the growth question: set apart, since it's their view rather than a fact */
.calc-growth { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.calc-growth p.small { margin: 4px 0 0; }
.calc-turnover .calc-bars { margin-top: 20px; }
/* the result box's two totals: time saved, and turnover increased, each under a small label */
.calc-cost .calc-cost-total-label { margin-top: 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8FA6C4; }
.calc-cost .calc-cost-total { font-size: var(--step-0); color: #C7D1E0; }
.calc-cost .calc-cost-total-label + .calc-cost-turnover { margin-top: 2px; }

/* The home page's section: three figures side by side, the turnover one on navy as the figure to take away,
   one under another on a phone */
.home-calc { background: var(--blue-soft); }
.home-calc h2 { margin-bottom: 24px; }
.home-calc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.home-stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.home-stat p { margin: 0; }
.home-stat-label { font-size: 0.75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.home-stat .home-stat-figure { margin: 8px 0; font: 700 var(--step-4)/1.05 var(--font-head); letter-spacing: -0.02em; color: var(--navy); overflow-wrap: anywhere; }
/* "a year" on its own line under the figure, so a long figure ("528 hours") never leaves it stranded */
.home-stat-per { display: block; margin-top: 2px; font-size: var(--step-0); font-weight: 600; letter-spacing: 0; color: var(--muted); }
.home-stat-note { font-size: var(--step--1); color: var(--ink); }
.home-stat--lead { background: var(--navy); border-color: var(--navy); }
.home-stat--lead .home-stat-label, .home-stat--lead .home-stat-per, .home-stat--lead .home-stat-note { color: #C7D1E0; }
.home-stat--lead .home-stat-figure { color: var(--brand-blue); }
.home-calc-basis { margin: 16px 0 0; }
.home-calc .actions { margin-top: 20px; }
@media (max-width: 860px) { .home-calc-grid { grid-template-columns: 1fr; } }

/* Total value added, at the foot of the result box: the biggest figure after the cost, on a lighter panel */
.calc-cost .calc-cost-sum { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .08); }
.calc-cost .calc-cost-sum .calc-cost-total-label { margin-top: 0; color: #C7D1E0; }
.calc-cost .calc-cost-sum-figure { margin: 4px 0; font: 700 var(--step-3)/1.1 var(--font-head); color: var(--white); overflow-wrap: anywhere; }
/* the home page's total: full width under the three figures */
.home-total { margin-top: 16px; }
.home-calc-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .home-calc-grid--two { grid-template-columns: 1fr; } }

/* and less space above the section's heading, so its figures come up with it */
.home-calc.section { padding-top: 40px; }
.home-calc h2 { margin-bottom: 16px; }

/* Book a call, under Email me this result: on navy like the site's Book a call band */
.calc-book { grid-column: 1; background: var(--navy); border-color: var(--navy); color: var(--white); }
.calc-book h2 { color: var(--white); font-size: var(--step-2); }
.calc-book p { color: #C7D1E0; }
.calc-book .actions { margin: 16px 0 0; }
@media (max-width: 960px) { .calc-book { grid-column: auto; } }

/* How do you keep your records now? Above the jobs (it changes their With AI figures), set apart from them */
.calc-systems { margin: 0 0 8px; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--line); }
.calc-systems legend { padding: 0; margin-bottom: 10px; font-weight: 600; color: var(--navy); }
.calc-systems .check { font-size: var(--step-0); }
.calc-systems .check strong { color: var(--navy); }
.calc-systems .check input { accent-color: var(--blue); }

/* Your two biggest jobs, under the title: a white panel, the jobs beside what the day is for and the buttons */
.calc-biggest:not([hidden]) { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px 32px; align-items: center; margin-top: 20px; padding: 16px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.calc-biggest h2 { margin: 0 0 6px; }
.calc-biggest ol { margin-bottom: 0; }
.calc-biggest .calc-next { margin: 0 0 10px; }
@media (max-width: 760px) { .calc-biggest:not([hidden]) { grid-template-columns: 1fr; } }
/* Which copy shows (Ben, 2026-10-13): under the title on a wide screen; on a phone or tablet (one column, the booking
   grid's breakpoint) above Email me this result, so the sliders come straight after the title */
.calc-biggest--below:not([hidden]) { display: none; }
@media (max-width: 960px) {
    .calc-biggest--top:not([hidden]) { display: none; }
    .calc-biggest--below:not([hidden]) { display: block; margin-top: 0; }
}
.calc-start-again { margin: 12px 0 0; }
.calc-biggest li strong { display: block; color: var(--navy); }
.calc-biggest-hours { display: block; font-size: var(--step--1); color: var(--muted); }

/* The result is now only the navy box (the hour's worth and the two biggest jobs moved out), so the white panel round
   it goes: no empty strip under it */
.calc-results.panel { padding: 0; background: none; border: 0; }
.calc-results .calc-cost { margin: 0; border-radius: var(--radius); }
/* too tall for the window to stay in view: scroll with the page, so the foot of it can be read */
.calc-results.is-tall { position: static; }

/* who the figures are for, under Time saving and growth */
.home-calc h2 + .home-calc-for { margin: -8px 0 16px; font-size: var(--step-1); color: var(--muted); }


/* the hidden field only robots fill in: off the screen, not display:none (some robots skip those) */
.calc-keep-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* About your business (request 26): two optional dropdowns after the turnover, as wide as is useful */
.calc-business .field { max-width: 420px; }
/* .field is a grid, which would otherwise show Something else's box while it's hidden */
.calc-business .field[hidden] { display: none; }

/* Download as PDF, under Email me this result */
.calc-pdf { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.calc-pdf p { margin-bottom: 10px; }