/* v3 family sheet: tools. Loaded after assets/v3/v3-site.css on every tools page (scripts/inject-chrome.js renderV3).

   The ten tool pages (the hub, eight tools under /tools and the SEIS and EIS calculator) were built on four different
   v2 sheets (flow.css, working.css, a per-tool sheet, an inline block). This sheet restyles the markup they already
   carry into the v3 form, results panel and table language (spec sections 17, 18 and 19), so the calculators keep their
   scripts and ids untouched. Everything is scoped under .v3-fam-tools, which only the tools sheet carries, so the
   first-year pages that share flow.css and working.css are not touched.

   Rules of thumb used throughout:
   - fields are paper with a 1px ink border and square corners, and focus presses them into the page (3px ink shadow)
   - result figures are Aleo Bold in ink; one key total per page carries the yellow stroke, never a fill
   - every orange letter is #D93200 (--v3-orange-text) and #FF5B00 only ever fills a shape
   - labels are Schibsted SemiBold in sentence case; the v2 mono caps labels are gone */

/* ---------------------------------------------------------------------------------------------------------
   1. Tokens. The v2 names the tool sheets use resolve to v3 values on the tools sheet only: the peach and orange
   washes that filled chosen cards become the card paper (yellow is never a fill), and rules become ink or black 40.
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools {
  --orange-pale: var(--v3-paper-note);
  --orange-wash: rgba(20, 20, 20, .05);
  --paper-card: var(--v3-paper);
  --paper-2: var(--v3-paper-note);
  --paper-3: var(--v3-paper-under);
  --paper-edge: var(--v3-ink);
  --rule: var(--v3-ink);
  --rule-soft: var(--v3-black-40);
  --ink-2: var(--v3-ink);
  --ink-muted: #3D3D3D;
  --ink-faded: #3D3D3D;
  --ink-working: #3D3D3D;
  --tools-hl: url("/assets/v3/marks/absolv-highlight-single-a-yellow.svg");
}
/* v3 corners are square. Radio rings and the chart key swatches are the only round things left. */
html.v3 .v3-fam-tools *:not([type="radio"]):not(.legend .sw) { border-radius: 0; }
html.v3 .v3-fam-tools ::selection { background: var(--v3-yellow); }

/* ---------------------------------------------------------------------------------------------------------
   2. Page frame. Each tool keeps its own column width, centred on the sheet, with room under the binding.
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools.v3-sheet > main { padding: 0 var(--v3-pad-x); min-height: 0; }
html.v3 .v3-fam-tools > main .wrap { padding-left: 0; padding-right: 0; padding-top: 0; }
html.v3 .v3-fam-tools .field .wrap { padding-top: 0; }
/* sticky columns and bars land under the fixed header and binding, not under the top of the window */
html.v3 .v3-fam-tools .results-col { top: calc(var(--v3-stick) + 16px); }
html.v3 .v3-fam-tools .controls { top: var(--v3-stick); background: var(--v3-paper); }
@media (min-width: 820px) { html.v3 .v3-fam-tools .rail { top: calc(var(--v3-stick) + 24px); max-height: calc(100vh - var(--v3-stick) - 40px); } }
@media (max-width: 819.98px) { html.v3 .v3-fam-tools .rail { top: var(--v3-stick); background: var(--v3-paper); } }
html.v3 .v3-fam-tools .packbar { background: var(--v3-paper); }

/* ---------------------------------------------------------------------------------------------------------
   3. Type. Headings are Aleo Bold (the bridge does that); here the tool pages' own heading sizes and the v2 mono
   caps labels are brought into the v3 roles.
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools.v3-sheet h1:not([class*="v3-"]) { font-size: clamp(34px, 3.75vw, 72px); line-height: 1.04; margin: 0 0 .4em; letter-spacing: 0; }
html.v3 .v3-fam-tools :is(.lede, p.sub, .title-block p, .card-sell, .audience, .headline-note, p.sect-sub, .cta-lede) {
  color: var(--v3-ink); font-size: max(16px, var(--v3-fs-text)); line-height: 1.35;
}
html.v3 .v3-fam-tools p.sub { max-width: 36ch; }
html.v3 .v3-fam-tools .audience { border-left: 1px solid var(--v3-ink); font-size: max(15px, var(--v3-fs-card)); }
/* the kicker over a heading: dark orange SemiBold, sentence case */
html.v3 .v3-fam-tools .eyebrow { font-family: var(--v3-font-body); font-weight: 600; font-size: max(14px, var(--v3-fs-card)); letter-spacing: .01em; text-transform: none; color: var(--v3-orange-text); }
/* every other small label: ink SemiBold, sentence case */
html.v3 .v3-fam-tools :is(.results-eyebrow, .table-label, .verdict-line, .card-kicker, .cn-head, .bl, .foot-label, .split .k,
  .card .lab, .guess-vs .k, .guess-vs .sep, .tally, .reveal-go, .why summary, .dial summary, .resumed, .searching, .co-meta,
  .trio .tl, .bar-mark span, .count, .pack-count, .test .n, .cat-head, .verdict, details.adv summary, .working summary, .tl-scale) {
  font-family: var(--v3-font-body); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--v3-ink);
  font-size: max(14px, var(--v3-fs-card));
}
html.v3 .v3-fam-tools :is(.table-label, .verdict-line, .results-eyebrow) { font-size: var(--v3-fs-descriptor); line-height: 1.15; }
html.v3 .v3-fam-tools :is(.card.win .card-kicker, .test .n, .cat-head) { color: var(--v3-orange-text); }
html.v3 .v3-fam-tools .cat.cannot .cat-head { color: var(--v3-ink); }
html.v3 .v3-fam-tools .resumed button.link { color: var(--v3-ink); }
/* hints and help: ink, never under 15px */
html.v3 .v3-fam-tools :is(.hint, .field .hint, .caveat, .dial-note, .plot-cap, .card-do, .bar-note, .guess-miss, .hl-sub, .item p, .test p, .remind-note, .cta-note, .send-msg) {
  color: var(--v3-ink); font-size: max(15px, var(--v3-fs-card)); line-height: 1.4;
}
html.v3 .v3-fam-tools .field label .hint { font-weight: 400; margin-top: .2em; }

/* the old orange marker wash becomes the yellow stroke under running text (.v3-hl-run), wherever a script still
   writes .highlight or .hl; the static pages carry .v3-hl-run in their own markup */
html.v3 .v3-fam-tools :is(.highlight, span.hl) {
  position: static; display: inline; z-index: auto; white-space: normal; color: inherit; padding: 0 .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: var(--tools-hl) 0 82% / 100% .62em no-repeat;
}
html.v3 .v3-fam-tools :is(.highlight, span.hl)::before, html.v3 .v3-fam-tools :is(.highlight, span.hl)::after { content: none; }

/* ---------------------------------------------------------------------------------------------------------
   4. The strip above every tool: All tools as the secondary button, and the one line saying what the tool does.
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools .tool-top { border-bottom: 1px solid var(--v3-black-40); gap: 12px 20px; margin-bottom: clamp(24px, 2.6vw, 44px); padding-bottom: clamp(16px, 1.4vw, 24px); }
html.v3 .v3-fam-tools .tool-back {
  min-height: 44px; padding: 0 18px; gap: .55em; border: 1px solid var(--v3-ink); background: transparent; color: var(--v3-ink);
  font-family: var(--v3-font-body); font-weight: var(--v3-w-ui); font-size: var(--v3-fs-nav); transform: none; transition: background-color .12s;
}
html.v3 .v3-fam-tools .tool-back:hover, html.v3 .v3-fam-tools .tool-back:focus-visible { background: rgba(20, 20, 20, .06); color: var(--v3-ink); transform: none; }
html.v3 .v3-fam-tools .tool-back:focus-visible { outline: 2px solid var(--v3-orange-text); outline-offset: 3px; }
html.v3 .v3-fam-tools .tool-what { font-family: var(--v3-font-body); font-size: max(15px, var(--v3-fs-card)); line-height: 1.35; color: var(--v3-ink); }
@media (max-width: 34rem) { html.v3 .v3-fam-tools .tool-back { width: auto; min-height: 44px; font-size: 16px; } }

/* ---------------------------------------------------------------------------------------------------------
   5. Form controls (spec 18), applied to the markup the tools already carry
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools :is(.field label, label.field__label, .remind-q, .apple-paste-q) {
  font-family: var(--v3-font-body); font-weight: 600; font-size: var(--v3-fs-field); line-height: 1.2; color: var(--v3-ink);
}
html.v3 .v3-fam-tools :is(input[type="number"], input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input:not([type]), select, textarea):where(:not(.v3-input):not(.v3-select):not(.hp):not([name="botcheck"])) {
  min-height: 50px; margin: 0; padding: .55em .75em; border: 1px solid var(--v3-ink); border-radius: 0;
  background-color: var(--v3-paper); color: var(--v3-ink); box-shadow: none; outline: none;
  font-family: var(--v3-font-body); font-size: var(--v3-fs-field); font-weight: 400; line-height: 1.25;
  -webkit-appearance: none; appearance: none; -moz-appearance: textfield;
  transition: box-shadow .12s var(--v3-ease);
}
html.v3 .v3-fam-tools input::placeholder { color: rgba(20, 20, 20, .55); }
html.v3 .v3-fam-tools :is(input, select, textarea):not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus { outline: none; border-color: var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-ink); }
html.v3 .v3-fam-tools :is(input, select, textarea):not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus-visible { outline: 2px solid var(--v3-orange-text); outline-offset: 2px; }
html.v3 .v3-fam-tools input[type="number"]::-webkit-outer-spin-button, html.v3 .v3-fam-tools input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* the select takes the ink chevron */
html.v3 .v3-fam-tools select:not(.v3-select) {
  padding-right: 2.4em; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--v3-ink) 50%), linear-gradient(135deg, var(--v3-ink) 50%, transparent 50%);
  background-position: calc(100% - 1.15em) 52%, calc(100% - .8em) 52%;
  background-size: .36em .36em, .36em .36em; background-repeat: no-repeat;
}
/* a select set inside a sentence (working from home) keeps the sentence's size */
html.v3 .v3-fam-tools .cn-controls select { min-height: 40px; padding: .2em 2.1em .2em .5em; font-size: max(16px, 1em); font-weight: 600; }
/* the flows draw the field box on .field .wrap with the input inside it, so the box carries the border */
html.v3 .v3-fam-tools .field .wrap { min-height: 50px; padding: 0 .75em; border: 1px solid var(--v3-ink); background: var(--v3-paper); transition: box-shadow .12s var(--v3-ease); }
html.v3 .v3-fam-tools .field .wrap:focus-within { border-color: var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-ink); }
html.v3 .v3-fam-tools .field .wrap input { min-height: 48px; border: 0 !important; box-shadow: none !important; background: transparent; padding-left: .3em; padding-right: .3em; }
html.v3 .v3-fam-tools .field .wrap input:focus-visible { outline: none !important; }
html.v3 .v3-fam-tools .field .wrap:has(input:focus-visible) { outline: 2px solid var(--v3-orange-text); outline-offset: 2px; }
html.v3 .v3-fam-tools .field .pre, html.v3 .v3-fam-tools .field .suf, html.v3 .v3-fam-tools .input-money::before { font-family: var(--v3-font-body); font-weight: 600; font-size: var(--v3-fs-field); color: var(--v3-ink); }
html.v3 .v3-fam-tools .input-money input[type="number"] { padding-left: 1.7em; }
/* checkbox and radio: a 1px ink square that takes the pencil tick, a ring that takes an orange dot */
html.v3 .v3-fam-tools input[type="checkbox"]:not(.tick), html.v3 .v3-fam-tools input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; width: 1.15em; height: 1.15em; min-height: 0; margin: .1em 0 0; padding: 0;
  font-size: var(--v3-fs-field); border: 1px solid var(--v3-ink); background: var(--v3-paper) center / 0 0 no-repeat; cursor: pointer;
  transition: background-size .15s var(--v3-ease), box-shadow .12s var(--v3-ease); accent-color: auto;
}
html.v3 .v3-fam-tools input[type="radio"] { border-radius: 50%; }
html.v3 .v3-fam-tools input[type="checkbox"]:not(.tick):checked { background-image: url("/assets/v3/marks/absolv-mark-tick-check-even.svg"); background-size: 82% 82%; background-position: 60% 30%; }
html.v3 .v3-fam-tools input[type="radio"]:checked { background-image: radial-gradient(circle, var(--v3-orange) 0 45%, transparent 47%); background-size: 100% 100%; }
html.v3 .v3-fam-tools input[type="checkbox"]:hover, html.v3 .v3-fam-tools input[type="radio"]:hover { box-shadow: 2px 2px 0 var(--v3-ink); }
html.v3 .v3-fam-tools input[type="checkbox"]:focus-visible, html.v3 .v3-fam-tools input[type="radio"]:focus-visible { outline: 2px solid var(--v3-orange-text); outline-offset: 3px; }
html.v3 .v3-fam-tools label.check { align-items: flex-start; gap: .6em; min-height: 44px; padding: 10px 0; font-size: max(15px, var(--v3-fs-card)); font-weight: 400; color: var(--v3-ink); line-height: 1.3; }
/* the allowable expenses pack box: the same ink square and pencil tick */
html.v3 .v3-fam-tools .box { width: 20px; height: 20px; border: 1px solid var(--v3-ink); background: var(--v3-paper) center / 0 0 no-repeat; color: transparent; }
html.v3 .v3-fam-tools .tick:checked ~ label .box, html.v3 .v3-fam-tools .tick:checked ~ h3 label .box { background: var(--v3-paper) url("/assets/v3/marks/absolv-mark-tick-check-even.svg") 60% 30% / 82% 82% no-repeat; border-color: var(--v3-ink); }
html.v3 .v3-fam-tools .tick:checked ~ label .box::before, html.v3 .v3-fam-tools .tick:checked ~ h3 label .box::before { content: none; }
html.v3 .v3-fam-tools .tick:focus-visible ~ label .box, html.v3 .v3-fam-tools .tick:focus-visible ~ h3 label .box { outline: 2px solid var(--v3-orange-text); }
/* range: an ink-bordered track and a square orange thumb with a small hard shadow */
html.v3 .v3-fam-tools input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; margin: 2px 0 0; background: transparent; cursor: pointer; accent-color: var(--v3-orange); }
html.v3 .v3-fam-tools input[type="range"]::-webkit-slider-runnable-track { height: 8px; border: 1px solid var(--v3-ink); background: var(--v3-paper); }
html.v3 .v3-fam-tools input[type="range"]::-moz-range-track { height: 8px; border: 1px solid var(--v3-ink); background: var(--v3-paper); }
html.v3 .v3-fam-tools input[type="range"]::-moz-range-progress { height: 8px; background: var(--v3-orange); }
html.v3 .v3-fam-tools input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 1px solid var(--v3-ink); border-radius: 0; background: var(--v3-orange); box-shadow: 2px 2px 0 var(--v3-ink); }
html.v3 .v3-fam-tools input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 1px solid var(--v3-ink); border-radius: 0; background: var(--v3-orange); box-shadow: 2px 2px 0 var(--v3-ink); }
html.v3 .v3-fam-tools input[type="range"]:focus-visible { outline: 2px solid var(--v3-orange-text); outline-offset: 2px; }

/* buttons that are not the primary: an ink outline with no fill and no shadow (the secondary button) */
html.v3 .v3-fam-tools :is(button.preset, .back, .co) { border: 1px solid var(--v3-ink); background: var(--v3-paper); color: var(--v3-ink); box-shadow: none; transform: none; transition: background-color .12s, box-shadow .12s; }
html.v3 .v3-fam-tools button.preset { min-height: 44px; padding: 8px 12px; font-family: var(--v3-font-body); font-weight: var(--v3-w-ui); font-size: max(15px, var(--v3-fs-card)); }
html.v3 .v3-fam-tools :is(button.preset, .back):hover { background: rgba(20, 20, 20, .06); color: var(--v3-ink); border-color: var(--v3-ink); transform: none; box-shadow: none; }
html.v3 .v3-fam-tools :is(button.preset, .back, .co):focus-visible { outline: 2px solid var(--v3-orange-text); outline-offset: 3px; }
/* a disclosure written as a button reads as a text link: ink, underlined */
html.v3 .v3-fam-tools button.disclosure { min-height: 44px; color: var(--v3-ink); font-family: var(--v3-font-body); font-weight: 600; font-size: max(15px, var(--v3-fs-card)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
html.v3 .v3-fam-tools button.disclosure:hover { text-decoration-thickness: 2px; text-decoration-color: var(--v3-orange-text); }
html.v3 .v3-fam-tools .fold { border-left: 1px solid var(--v3-ink); }
/* a choice of two (SEIS or EIS) as paper tiles: the chosen one lifts onto the hard shadow with a tick */
html.v3 .v3-fam-tools .scheme-toggle { border: 0; overflow: visible; gap: 12px; }
html.v3 .v3-fam-tools .scheme-toggle button { position: relative; min-height: 50px; border: 1px solid var(--v3-ink); background: var(--v3-paper); color: var(--v3-ink); font-family: var(--v3-font-body); font-weight: 600; font-size: var(--v3-fs-field); box-shadow: none; transition: transform .12s var(--v3-ease), box-shadow .12s var(--v3-ease); }
html.v3 .v3-fam-tools .scheme-toggle button + button { border-left: 1px solid var(--v3-ink); }
html.v3 .v3-fam-tools .scheme-toggle button:hover:not(.active) { background: var(--v3-paper); box-shadow: 2px 2px 0 var(--v3-ink); }
html.v3 .v3-fam-tools .scheme-toggle button.active { background: var(--v3-paper-note); box-shadow: var(--v3-shadow-hard); transform: translate(-2px, -2px); }
html.v3 .v3-fam-tools .scheme-toggle button.active::after { content: ""; position: absolute; right: .5em; top: 50%; width: 1.2em; height: 1.2em; margin-top: -.6em; background: url("/assets/v3/marks/absolv-mark-tick-check-even.svg") center / contain no-repeat; }

/* ---------------------------------------------------------------------------------------------------------
   6. Panels and the results panel (spec 19). Input panels are plain paper cards with the sheet shadow; the answer
   is a torn card (the pages that have one carry a .v3-paper layer in their markup), with the figure in Aleo Bold.
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools :is(.panel, .card-note, .test, .cta-block, .bar-block, .derived) {
  background: var(--v3-paper); border: 0; box-shadow: var(--v3-shadow-sheet-box);
}
html.v3 .v3-fam-tools .panel { padding: clamp(20px, 2vw, 32px); }
html.v3 .v3-fam-tools.v3-sheet .panel h2:not([class*="v3-"]) { font-family: var(--v3-font-display); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--v3-ink); font-size: clamp(20px, 1.6vw, 30px); line-height: 1.1; margin: 0 0 .7em; }
html.v3 .v3-fam-tools .panel p { color: var(--v3-ink); }
/* the torn result card: the panel is the card, so its own fill and shadow give way to the torn paper layer */
html.v3 .v3-fam-tools .v3-card--torn.panel, html.v3 .v3-fam-tools .v3-card--torn.headline { background: none; border: 0; box-shadow: none; padding: 58px calc(var(--v3-paper-pad) + 14px) calc(44px + clamp(18px, 1.7vw, 32px)); }
html.v3 .v3-fam-tools .v3-card--torn .v3-paper { border-radius: 0; }
/* the figure */
html.v3 .v3-fam-tools :is(.results-hero, .headline-num, .headline .big) {
  font-family: var(--v3-font-display); font-weight: var(--v3-w-display); color: var(--v3-ink);
  font-size: calc(var(--v3-fs-number) * 1.35); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
html.v3 .v3-fam-tools .headline-num { font-size: clamp(48px, 5.4vw, 104px); }
html.v3 .v3-fam-tools .headline-num.sm { font-size: clamp(40px, 4.2vw, 80px); }
/* the one key total on a page takes the yellow stroke, sitting low on the figure; the flows' result headings already
   carry their own highlight, so their figure does not take a second one */
html.v3 .v3-fam-tools :is(.results-hero, .headline .big) {
  width: fit-content; max-width: 100%; padding: 0 .06em;
  background: var(--tools-hl) 0 92% / 100% .42em no-repeat;
}
/* every other figure: Aleo, ink */
html.v3 .v3-fam-tools :is(.results-rows .row .val, .cost-strip .fig, .guess-vs .v, .foot-amt, .trio .tv, .split .v, .card .amt,
  .bar-val, .leaks .amt, .route .val, .legend .amt, .derived span:last-child, .tl-name b, .dl-date) {
  font-family: var(--v3-font-display); font-weight: var(--v3-w-display); color: var(--v3-ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
html.v3 .v3-fam-tools :is(.cost-strip .fig, .guess-vs .side.truth .v, .tally b, .guess-miss b, .why .cost) { color: var(--v3-orange-text); }
html.v3 .v3-fam-tools .guess-vs .side.you .v { color: var(--v3-ink); }
/* breakdown rows on hairlines, the total over an ink rule */
html.v3 .v3-fam-tools .results-rows .row { border-bottom: 0; border-top: 1px solid var(--v3-black-40); padding: .55em 0; font-size: max(15px, var(--v3-fs-card)); }
html.v3 .v3-fam-tools .results-rows .row:first-child { border-top-color: var(--v3-ink); }
html.v3 .v3-fam-tools .results-rows .row .val { font-size: 1.1em; }
html.v3 .v3-fam-tools .leaks li { border-color: var(--v3-black-40); }

/* ---------------------------------------------------------------------------------------------------------
   7. Tables (spec 17): black 40% hairlines, an ink rule under the head and over the total, tabular figures right
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools :is(.working-table, table.compare, table.calc, .working table) { width: 100%; border-collapse: collapse; font-family: var(--v3-font-body); font-size: max(15px, var(--v3-fs-card)); line-height: 1.3; font-variant-numeric: normal; }
html.v3 .v3-fam-tools :is(.working-table, table.compare, table.calc, .working table) :is(th, td) { padding: .62em .8em .62em 0; border: 0; border-bottom: 1px solid var(--v3-black-40); font-family: var(--v3-font-body); color: var(--v3-ink); text-align: left; vertical-align: top; }
html.v3 .v3-fam-tools :is(.working-table, table.compare, .working table) thead th, html.v3 .v3-fam-tools table.compare th { font-weight: 700; font-size: inherit; letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--v3-ink); vertical-align: bottom; color: var(--v3-ink); }
html.v3 .v3-fam-tools :is(table.calc td:last-child, .working td.n, table.compare td:not(:first-child), table.compare th:not(:first-child)) { text-align: right; white-space: nowrap; padding-right: 0; padding-left: .8em; }
html.v3 .v3-fam-tools table.compare th:not(:first-child) { white-space: normal; }
html.v3 .v3-fam-tools .calc-grid > * { min-width: 0; }
html.v3 .v3-fam-tools :is(table.calc tr.sum td, .working tr.tot td, .working-table tr.total td) { font-weight: 700; border-top: 1px solid var(--v3-ink); border-bottom: 1px solid var(--v3-ink); color: var(--v3-ink); }
html.v3 .v3-fam-tools table.calc td .wk { color: #3D3D3D; font-size: max(14px, .85em); }
html.v3 .v3-fam-tools table.calc tr:last-child td { border-bottom: 0; }
html.v3 .v3-fam-tools :is(.working-table-wrap, .tbl-wrap) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------------------------------------------------
   8. The working (scripts/inject-tool-working.js) and the FAQ folds: Schibsted SemiBold questions on hairlines,
   the hand-drawn cross that turns into an x when open (as the v3 FAQ), and the body at the prose size.
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools .tool-working { max-width: 46rem; margin-top: clamp(48px, 5vw, 96px); padding: 0; }
html.v3 .v3-fam-tools .working-head.v3-note, html.v3 .v3-fam-tools .related-head.v3-note { display: block; width: max-content; max-width: 100%; margin: 0 0 .5em -.1em; font-size: clamp(26px, 2.2vw, 42px); white-space: normal; }
html.v3 .v3-fam-tools .working-head:not(.v3-note) { font-family: var(--v3-font-body); font-weight: 600; font-size: var(--v3-fs-descriptor); line-height: 1.15; letter-spacing: 0; text-transform: none; color: var(--v3-ink); margin: 0 0 .7em; }
html.v3 .v3-fam-tools .tool-working details { border-top: 1px solid var(--v3-black-40); }
html.v3 .v3-fam-tools .tool-working details:last-of-type { border-bottom: 1px solid var(--v3-black-40); }
html.v3 .v3-fam-tools .tool-working summary {
  justify-content: space-between; align-items: center; gap: 1em; min-height: 44px; padding: .9em 0;
  font-family: var(--v3-font-body); font-weight: 600; font-size: max(16px, var(--v3-fs-descriptor)); line-height: 1.2; color: var(--v3-ink);
}
html.v3 .v3-fam-tools .tool-working summary::before { content: none; }
html.v3 .v3-fam-tools .tool-working summary::after { content: ""; flex: none; width: 1em; height: 1em; background: url("/assets/v3/marks/absolv-mark-cross.svg") center / contain no-repeat; transition: transform .3s ease; }
html.v3 .v3-fam-tools .tool-working details[open] > summary::after { transform: rotate(45deg); }
html.v3 .v3-fam-tools .tool-working summary:hover, html.v3 .v3-fam-tools .tool-working details[open] > summary { color: var(--v3-ink); }
html.v3 .v3-fam-tools .tool-working summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
html.v3 .v3-fam-tools .tool-working summary:focus-visible { outline: 2px solid var(--v3-orange-text); outline-offset: 3px; }
html.v3 .v3-fam-tools .working-body { padding: 0 0 1.4em; font-size: max(16px, var(--v3-fs-card)); line-height: 1.5; color: var(--v3-ink); }
html.v3 .v3-fam-tools .working-body :is(p, li) { font-size: inherit; line-height: inherit; }
html.v3 .v3-fam-tools .working-body ul { padding-left: 1.1em; list-style: none; }
html.v3 .v3-fam-tools .working-body ul > li { position: relative; }
html.v3 .v3-fam-tools .working-body ul > li::before { content: ""; position: absolute; left: -1.05em; top: .62em; width: .36em; height: .36em; background: var(--v3-orange); }
html.v3 .v3-fam-tools .working-body a { color: var(--v3-ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
html.v3 .v3-fam-tools .working-body a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--v3-orange-text); }
/* the formula is arithmetic, so system monospace on the card paper, as code in the article body */
html.v3 .v3-fam-tools .working-formula { font-family: var(--v3-font-code); font-size: .88em; line-height: 1.5; background: var(--v3-paper-note); border: 1px solid rgba(20, 20, 20, .14); border-left: 1px solid rgba(20, 20, 20, .14); padding: 1em 1.2em; }
html.v3 .v3-fam-tools .pull { font-family: var(--v3-font-body); font-weight: 600; border-left: 1px solid var(--v3-ink); }

/* the static FAQ lists (an h3 and a paragraph per question) on hairlines */
html.v3 .v3-fam-tools :is(.faq-section, .after) { max-width: 46rem; margin-left: auto; margin-right: auto; }
html.v3 .v3-fam-tools :is(.faq, .faq-item) { border-top: 1px solid var(--v3-black-40); padding-top: 1.1em; margin-top: 1.1em; }
html.v3 .v3-fam-tools.v3-sheet :is(.faq, .faq-item) h3 { font-family: var(--v3-font-body); font-weight: 600; font-size: max(17px, var(--v3-fs-descriptor)); line-height: 1.2; margin: 0 0 .45em; letter-spacing: 0; }
html.v3 .v3-fam-tools :is(.faq, .faq-item) p { color: var(--v3-ink); font-size: max(16px, var(--v3-fs-card)); line-height: 1.5; }
html.v3 .v3-fam-tools.v3-sheet :is(.after h2, h2.sect, .send h2, h3.sec, h2.section) { font-family: var(--v3-font-display); font-weight: 700; letter-spacing: 0; }
html.v3 .v3-fam-tools .after p { color: var(--v3-ink); font-size: max(16px, var(--v3-fs-card)); line-height: 1.5; }

/* ---------------------------------------------------------------------------------------------------------
   9. Related tools (scripts/inject-related-tools.js): the v3 related cards under a short hand note
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools .tool-related { max-width: 46rem; margin: clamp(48px, 5vw, 96px) auto 0; padding: 0; }
html.v3 .v3-fam-tools .tool-related .v3-related__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); }
html.v3 .v3-fam-tools .tool-related .v3-related__item a { min-height: 7em; }
html.v3 .v3-fam-tools .related-all { margin: 1.4em 0 0; font-size: max(15px, var(--v3-fs-card)); }
html.v3 .v3-fam-tools .related-all a { color: var(--v3-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
html.v3 .v3-fam-tools .related-all a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--v3-orange-text); }
/* the older hand-built related grid on salary, dividend or pension */
html.v3 .v3-fam-tools .rel a { position: relative; border: 1px solid var(--v3-ink); background: var(--v3-paper); padding: 16px 18px; transition: transform .12s var(--v3-ease), box-shadow .12s var(--v3-ease); }
html.v3 .v3-fam-tools .rel a:hover { border-color: var(--v3-ink); box-shadow: var(--v3-shadow-hard); transform: translate(-2px, -2px); }
html.v3 .v3-fam-tools .rel .rn { font-weight: 700; font-size: var(--v3-fs-keyline); line-height: 1.15; color: var(--v3-ink); }
html.v3 .v3-fam-tools .rel .rd { color: var(--v3-ink); font-size: max(15px, var(--v3-fs-card)); }
@media (prefers-reduced-motion: reduce) { html.v3 .v3-fam-tools .rel a:hover { transform: none; } }

/* ---------------------------------------------------------------------------------------------------------
   10. The email capture, the call to action and the contact line
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools :is(.capture-form, .send-row) { gap: 12px; align-items: stretch; }
html.v3 .v3-fam-tools .capture-form input[type="email"] { flex: 1 1 14em; min-width: 0; }
html.v3 .v3-fam-tools :is(.capture-form, .send-row, #email-form) .btn-drawn { flex: none; min-height: 50px; }
html.v3 .v3-fam-tools .send-msg.no, html.v3 .v3-fam-tools .cta-note.cta-bad, html.v3 .v3-fam-tools .pack-msg { color: var(--v3-orange-text); font-weight: 600; }
html.v3 .v3-fam-tools .cta { background: transparent; border: 0; border-top: 1px solid var(--v3-black-40); border-bottom: 1px solid var(--v3-black-40); padding: clamp(24px, 2.4vw, 40px) 0; box-shadow: none; }
html.v3 .v3-fam-tools .cta p { color: var(--v3-ink); font-size: max(16px, var(--v3-fs-text)); line-height: 1.4; margin: 0 0 1em; max-width: 40em; }
html.v3 .v3-fam-tools .cta .btn-drawn { width: var(--v3-btn-w); max-width: 100%; }
@media (max-width: 640px) { html.v3 .v3-fam-tools .cta .btn-drawn { width: 100%; } }
html.v3 .v3-fam-tools .tools-contact { max-width: 46rem; margin: clamp(40px, 4vw, 72px) auto 0; font-size: max(15px, var(--v3-fs-card)); line-height: 1.4; color: var(--v3-ink); }
html.v3 .v3-fam-tools .tools-caveat { max-width: 46rem; margin: clamp(40px, 4vw, 72px) auto 0; font-size: max(15px, var(--v3-fs-card)); line-height: 1.4; color: var(--v3-ink); }
html.v3 .v3-fam-tools .tools-caveat + .tools-contact { margin-top: .8em; }
html.v3 .v3-fam-tools .tools-contact a { color: var(--v3-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
html.v3 .v3-fam-tools .tools-contact a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--v3-orange-text); }

/* ---------------------------------------------------------------------------------------------------------
   11. The question flows (flow.css: can you afford to hire, the VAT threshold ambush, filing deadlines)
   --------------------------------------------------------------------------------------------------------- */
/* progress: ink-bordered segments that fill in orange */
html.v3 .v3-fam-tools .progress { gap: 6px; }
html.v3 .v3-fam-tools .seg { height: 10px; background: var(--v3-paper); border: 1px solid var(--v3-ink); }
html.v3 .v3-fam-tools .seg span, html.v3 .v3-fam-tools .seg.now span { background: var(--v3-orange); }
html.v3 .v3-fam-tools.v3-sheet .q { font-family: var(--v3-font-display); font-weight: 700; font-size: var(--v3-fs-h2); line-height: 1.05; letter-spacing: 0; }
/* the answer tiles (spec 18 .v3-tile): paper with an ink border; the chosen one lifts onto the hard shadow */
html.v3 .v3-fam-tools .opt { background: var(--v3-paper); border: 1px solid var(--v3-ink); box-shadow: none; color: var(--v3-ink); font-family: var(--v3-font-body); transition: transform .12s var(--v3-ease), box-shadow .12s var(--v3-ease), background-color .12s; }
html.v3 .v3-fam-tools .opt:hover:not(:disabled) { border-color: var(--v3-ink); transform: none; box-shadow: 2px 2px 0 var(--v3-ink); }
html.v3 .v3-fam-tools .opt:active:not(:disabled) { transform: translate(-2px, -2px); box-shadow: var(--v3-shadow-hard); }
html.v3 .v3-fam-tools .opt:focus-visible { outline: 2px solid var(--v3-orange-text); outline-offset: 3px; }
html.v3 .v3-fam-tools .opt .lab.big { font-family: var(--v3-font-display); font-weight: 700; letter-spacing: -0.01em; }
html.v3 .v3-fam-tools .opt .note { color: var(--v3-ink); font-size: max(14px, var(--v3-fs-card)); }
html.v3 .v3-fam-tools :is(.opt.picked, .opt.right, .opt.wrong) { background: var(--v3-paper-note); box-shadow: var(--v3-shadow-hard); transform: translate(-2px, -2px); }
html.v3 .v3-fam-tools .opt.picked { border-color: var(--v3-ink); }
html.v3 .v3-fam-tools .opt.right { border-color: var(--status-ok); }
html.v3 .v3-fam-tools .opt.wrong { border-color: var(--v3-orange-text); }
html.v3 .v3-fam-tools .opt.picked .mark, html.v3 .v3-fam-tools .opt.wrong .mark { color: var(--v3-orange-text); }
/* the revealed answer: a paper card on the sheet shadow that lifts onto the hard shadow, as a related card */
html.v3 .v3-fam-tools .reveal { background: var(--v3-paper); border: 1px solid var(--v3-ink); box-shadow: none; transition: transform .12s var(--v3-ease), box-shadow .12s var(--v3-ease); }
html.v3 .v3-fam-tools .reveal:hover { transform: translate(-2px, -2px); box-shadow: var(--v3-shadow-hard); }
html.v3 .v3-fam-tools .reveal:focus-visible { outline: 2px solid var(--v3-orange-text); outline-offset: 3px; }
html.v3 .v3-fam-tools .reveal-go { border-top-color: var(--v3-black-40); }
html.v3 .v3-fam-tools .punch { font-family: var(--v3-font-display); font-weight: 700; letter-spacing: 0; }
html.v3 .v3-fam-tools .verdict.no { color: var(--v3-orange-text); }
html.v3 .v3-fam-tools :is(.guess-vs, .why, .tally, .dial summary) { border-color: var(--v3-black-40); }
html.v3 .v3-fam-tools :is(.why summary, .dial summary, .working > summary) { list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: space-between; }
html.v3 .v3-fam-tools :is(.why summary, .dial summary, .working > summary)::after { content: ""; width: 1em; height: 1em; background: url("/assets/v3/marks/absolv-mark-cross.svg") center / contain no-repeat; transition: transform .3s ease; }
html.v3 .v3-fam-tools :is(.why[open], .dial[open], .working[open]) > summary::after { content: ""; transform: rotate(45deg); }
html.v3 .v3-fam-tools :is(.why summary, .dial summary):hover { color: var(--v3-ink); text-decoration: underline; }
html.v3 .v3-fam-tools .why p { color: var(--v3-ink); font-size: max(15px, var(--v3-fs-card)); }
/* charts: ink-bordered tracks, orange fills (shapes), Aleo values */
html.v3 .v3-fam-tools :is(.bar-track, .stack-track, .tl-track, .route .track) { background: var(--v3-paper); border: 1px solid var(--v3-ink); }
html.v3 .v3-fam-tools .bar-row .bar-track { height: 16px; }
html.v3 .v3-fam-tools .bar-row.muted .bar-fill { background: var(--v3-black-40); }
html.v3 .v3-fam-tools :is(.bar-name, .bars-title, .stack-key .k, .tl-name, .stack-key .n) { color: var(--v3-ink); font-size: max(14px, var(--v3-fs-card)); font-family: var(--v3-font-body); }
html.v3 .v3-fam-tools .tl-span.out { background: var(--v3-black-40); }
html.v3 .v3-fam-tools .plot .grid { stroke: var(--v3-ink); opacity: .11; }
html.v3 .v3-fam-tools .plot .line.ghost { stroke: var(--v3-black-40); }
html.v3 .v3-fam-tools .plot .dot { fill: var(--v3-ink); }
html.v3 .v3-fam-tools .plot :is(.tick, .note) { font-family: var(--v3-font-body); }
html.v3 .v3-fam-tools .plot .tick { fill: var(--v3-ink); }
html.v3 .v3-fam-tools .plot .note { fill: var(--v3-orange-text); }
html.v3 .v3-fam-tools .panel-warn { box-shadow: var(--v3-shadow-sheet-box), inset 3px 0 0 var(--v3-orange-text); }

/* ---------------------------------------------------------------------------------------------------------
   12. Filing deadlines (deadlines.css): the company search results and the calendar block
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools .co { width: 100%; padding: .85em 1em; text-align: left; }
html.v3 .v3-fam-tools .co:hover { background: var(--v3-paper); box-shadow: var(--v3-shadow-hard); transform: translate(-2px, -2px); }
html.v3 .v3-fam-tools .co-name { font-size: var(--v3-fs-field); }
html.v3 .v3-fam-tools .co-warn { color: var(--v3-orange-text); border-color: var(--v3-orange-text); font-family: var(--v3-font-body); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 14px; }
html.v3 .v3-fam-tools .cta-block { border-left: 0; }
html.v3 .v3-fam-tools :is(.cta-note code, .apple-paste-url code) { font-family: var(--v3-font-code); background: var(--v3-paper-note); border: 1px solid rgba(20, 20, 20, .14); }
html.v3 .v3-fam-tools :is(.apple-paste, .remind) { border-top-color: var(--v3-black-40); }
html.v3 .v3-fam-tools .remind-input { background: var(--v3-paper); }
html.v3 .v3-fam-tools :is(.tag, .tag-stat, .tag-read, .tag-calc) { font-family: var(--v3-font-body); letter-spacing: 0; text-transform: none; border-radius: 0; }

/* ---------------------------------------------------------------------------------------------------------
   13. Dividend tax and SEIS and EIS: two columns, inputs on a paper card, the answer on a torn card
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools .hero { max-width: 44rem; padding-top: 0; margin-left: 0; }
html.v3 .v3-fam-tools .caveat { margin-top: 1.1em; }
html.v3 .v3-fam-tools .badge { font-family: var(--v3-font-body); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 13px; border-radius: 0; }
html.v3 .v3-fam-tools #results .results-hero { margin-bottom: .6em; }
html.v3 .v3-fam-tools #email-copy-mount { margin-top: 1.6em; }

/* ---------------------------------------------------------------------------------------------------------
   14. Corporation tax: the one-field form and its answer
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools .tool-form { display: grid; gap: 8px; max-width: 36em; margin: clamp(24px, 2.4vw, 40px) 0; padding: 0; background: transparent; }
html.v3 .v3-fam-tools .tool-form label { font-weight: 600; font-size: var(--v3-fs-field); color: var(--v3-ink); margin: 0; }
html.v3 .v3-fam-tools .tool-form input[type="number"] { margin: 0 0 clamp(16px, 1.6vw, 28px); }
html.v3 .v3-fam-tools .tools-ct-result { max-width: none; }
/* the answer is one sentence, so the sentence is the figure: Aleo Bold, with the page's one yellow stroke under it */
html.v3 .v3-fam-tools .tools-ct-result #tool-output {
  margin: 0; padding: 0; color: var(--v3-ink); font-family: var(--v3-font-display); font-weight: var(--v3-w-display);
  font-size: clamp(24px, 2.2vw, 42px); line-height: 1.2; letter-spacing: -0.01em;
}
html.v3 .v3-fam-tools .tools-ct-result #tool-output { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: var(--tools-hl) 0 88% / 100% .42em no-repeat; }
html.v3 .v3-fam-tools .capture-form { max-width: 36em; }

/* ---------------------------------------------------------------------------------------------------------
   15. Working from home: two paper cards side by side, the winner lifted onto the hard shadow
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools .deck .card { background: var(--v3-paper); border: 1px solid var(--v3-ink); box-shadow: none; transition: box-shadow .2s var(--v3-ease), transform .2s var(--v3-ease); }
html.v3 .v3-fam-tools .deck .card.win { background: var(--v3-paper-note); border-color: var(--v3-ink); box-shadow: var(--v3-shadow-hard); }
html.v3 .v3-fam-tools .trio div, html.v3 .v3-fam-tools .card.win .trio div { background: transparent; border: 1px solid var(--v3-black-40); }
html.v3 .v3-fam-tools .card-note, html.v3 .v3-fam-tools .card.win .card-note { background: var(--v3-paper); box-shadow: none; border: 1px solid var(--v3-black-40); }
html.v3 .v3-fam-tools .card-foot, html.v3 .v3-fam-tools .card.win .card-foot { border-top-color: var(--v3-ink); }
html.v3 .v3-fam-tools .foot-amt { font-size: clamp(30px, 2.6vw, 50px); }
html.v3 .v3-fam-tools.v3-sheet h2.headline { font-family: var(--v3-font-display); font-weight: 700; font-size: var(--v3-fs-h2); line-height: 1.1; letter-spacing: 0; max-width: 24ch; }
/* the winning margin in the answer heading is the page's one yellow stroke */
html.v3 .v3-fam-tools h2.headline .fig { color: var(--v3-ink); padding: 0 .06em; background: var(--tools-hl) 0 92% / 100% .5em no-repeat; }
html.v3 .v3-fam-tools .bar-block { border-left: 0; padding: clamp(18px, 1.8vw, 30px); }
html.v3 .v3-fam-tools .bar-block .bar-track { background: var(--v3-paper); }
html.v3 .v3-fam-tools .bar-mark.soft { background: var(--v3-ink); }
html.v3 .v3-fam-tools .bar-mark span { font-size: 13px; }
html.v3 .v3-fam-tools .send { max-width: 46rem; }
html.v3 .v3-fam-tools .send p { color: var(--v3-ink); }

/* ---------------------------------------------------------------------------------------------------------
   16. Salary, dividend or pension: the inputs column, the answer card and the full calculation
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools header.top { border-bottom: 1px solid var(--v3-ink); align-items: flex-end; }
html.v3 .v3-fam-tools header.top .eyebrow { text-align: right; }
html.v3 .v3-fam-tools .grid { gap: clamp(20px, 2vw, 36px); }
@media (max-width: 920px) { html.v3 .v3-fam-tools .grid { grid-template-columns: minmax(0, 1fr); } }
html.v3 .v3-fam-tools .grid > * { min-width: 0; }
html.v3 .v3-fam-tools .panel + .panel { margin-top: clamp(16px, 1.6vw, 28px); }
html.v3 .v3-fam-tools .field-head { align-items: center; flex-wrap: wrap; }
html.v3 .v3-fam-tools .field-head label { flex: 1 1 10em; }
html.v3 .v3-fam-tools input.num, html.v3 .v3-fam-tools select.num { width: 7.5em; min-height: 44px; padding: .35em .6em; text-align: right; font-size: max(16px, var(--v3-fs-card)); }
html.v3 .v3-fam-tools select.num { text-align: left; padding-right: 2.2em; }
html.v3 .v3-fam-tools .driver { background: var(--v3-paper); border: 1px solid var(--v3-black-40); border-left: 1px solid var(--v3-black-40); }
html.v3 .v3-fam-tools .driver.lead { box-shadow: inset 3px 0 0 var(--v3-orange); }
html.v3 .v3-fam-tools .driver-name { font-family: var(--v3-font-display); font-weight: 700; letter-spacing: 0; }
html.v3 .v3-fam-tools details.adv { border-top-color: var(--v3-black-40); }
html.v3 .v3-fam-tools details.adv summary { min-height: 44px; display: flex; align-items: center; gap: .5em; }
html.v3 .v3-fam-tools details.adv summary::before { content: ""; width: .9em; height: .9em; background: url("/assets/v3/marks/absolv-mark-cross.svg") center / contain no-repeat; transition: transform .3s ease; }
html.v3 .v3-fam-tools details.adv[open] summary::before { content: ""; transform: rotate(45deg); }
html.v3 .v3-fam-tools .headline .big { margin-top: .15em; }
html.v3 .v3-fam-tools .headline .sub { color: var(--v3-ink); max-width: none; font-size: max(15px, var(--v3-fs-card)); }
html.v3 .v3-fam-tools .split { border-top-color: var(--v3-black-40); }
html.v3 .v3-fam-tools .split .v { font-size: clamp(20px, 1.6vw, 30px); }
html.v3 .v3-fam-tools .split #totalTax { color: var(--v3-orange-text) !important; }
html.v3 .v3-fam-tools .bar { border: 1px solid var(--v3-ink); }
/* the profit bar and its key: four segments that stay four colours (the bridge folds --orange into --orange-deep) */
html.v3 .v3-fam-tools :is(#bar, #legend) { --orange-deep: var(--v3-ink); --orange: var(--v3-orange-text); --orange-soft: var(--v3-orange); --orange-pale: rgba(20, 20, 20, .4); }
html.v3 .v3-fam-tools .route { border-bottom-color: var(--v3-black-40); }
html.v3 .v3-fam-tools .route .nm { font-size: max(15px, var(--v3-fs-card)); }
html.v3 .v3-fam-tools .route.win .nm::after { content: "BEST"; font-family: var(--v3-font-body); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--v3-paper); background: var(--v3-orange-text); border: 0; }
html.v3 .v3-fam-tools .legend .item { font-size: max(14px, var(--v3-fs-card)); }
html.v3 .v3-fam-tools .scen .card { background: var(--v3-paper); border: 1px solid var(--v3-black-40); box-shadow: none; }
html.v3 .v3-fam-tools .scen .card.best { border-color: var(--v3-ink); box-shadow: var(--v3-shadow-hard); background: var(--v3-paper-note); }
html.v3 .v3-fam-tools .card .amt { font-size: clamp(22px, 1.8vw, 34px); }
html.v3 .v3-fam-tools .card .delta.down { color: var(--v3-orange-text); }
html.v3 .v3-fam-tools .card .det { color: var(--v3-ink); border-top-color: var(--v3-black-40); font-size: 14px; }
html.v3 .v3-fam-tools .flag { background: var(--v3-paper); border: 1px solid var(--v3-black-40); border-left: 1px solid var(--v3-black-40); box-shadow: inset 3px 0 0 var(--v3-orange-text); font-size: max(15px, var(--v3-fs-card)); }
html.v3 .v3-fam-tools .flag.ok { box-shadow: inset 3px 0 0 var(--status-ok); }
html.v3 .v3-fam-tools .flag .ic { color: var(--v3-orange-text); }
html.v3 .v3-fam-tools .wrap > footer { border-top-color: var(--v3-black-40); color: var(--v3-ink); font-size: max(14px, var(--v3-fs-card)); line-height: 1.5; }
html.v3 .v3-fam-tools .wrap > footer b { color: var(--v3-ink); }

/* ---------------------------------------------------------------------------------------------------------
   17. What you can claim (allowable expenses)
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools .controls { border-bottom-color: var(--v3-black-40); }
html.v3 .v3-fam-tools .count b, html.v3 .v3-fam-tools .catch, html.v3 .v3-fam-tools .hl-tag { color: var(--v3-orange-text); }
html.v3 .v3-fam-tools .cat-head::before { background: var(--v3-orange); }
html.v3 .v3-fam-tools :is(.item, .hl-row) { border-color: var(--v3-black-40); }
html.v3 .v3-fam-tools.v3-sheet .item h3 { font-family: var(--v3-font-body); font-weight: 700; font-size: max(16px, var(--v3-fs-card)); letter-spacing: 0; }
html.v3 .v3-fam-tools .item p, html.v3 .v3-fam-tools .test p { color: var(--v3-ink); }
html.v3 .v3-fam-tools .trade-tag { font-family: var(--v3-font-body); font-weight: 600; letter-spacing: 0; text-transform: none; background: transparent; color: var(--v3-ink); border: 1px solid var(--v3-ink); font-size: 12px; }
html.v3 .v3-fam-tools .ref { font-family: var(--v3-font-body); font-size: 14px; }
html.v3 .v3-fam-tools .ref a { color: var(--v3-ink); border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
html.v3 .v3-fam-tools .ref a:hover { color: var(--v3-ink); text-decoration-thickness: 2px; text-decoration-color: var(--v3-orange-text); }
html.v3 .v3-fam-tools .rail a { color: var(--v3-ink); font-size: max(14px, var(--v3-fs-card)); }
html.v3 .v3-fam-tools .rail a:hover { color: var(--v3-ink); text-decoration: underline; }
html.v3 .v3-fam-tools .rail a .c { font-family: var(--v3-font-body); color: var(--v3-ink); font-size: 13px; }
html.v3 .v3-fam-tools .rail .star { color: var(--v3-orange-text); }
@media (min-width: 820px) { html.v3 .v3-fam-tools .rail a[aria-current="true"] { background: var(--v3-paper-note); border-left-color: var(--v3-orange); } }
@media (max-width: 819.98px) { html.v3 .v3-fam-tools .rail a[aria-current="true"] { border-bottom-color: var(--v3-orange); } }
html.v3 .v3-fam-tools .packbar { border-top-color: var(--v3-ink); }

/* ---------------------------------------------------------------------------------------------------------
   18. Card links carry no underline of their own: the whole card is the link and it lifts on hover
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools.v3-sheet :is(.v3-related__item a, .rel a, .co) { text-decoration: none; }
/* the "Better for you" stamp on the winning card: a small ink-bordered label (its drawn marks are hidden by the bridge) */
html.v3 .v3-fam-tools .badge-stamped { border: 1px solid var(--v3-ink); padding: 3px 8px; color: var(--v3-ink); background: var(--v3-paper); }
html.v3 .v3-fam-tools .hl-claim { font-family: var(--v3-font-body); font-weight: 500; font-size: var(--v3-fs-field); line-height: 1.3; color: var(--v3-ink); }
html.v3 .v3-fam-tools .hl-tag { font-family: var(--v3-font-body); font-size: 13px; }
html.v3 .v3-fam-tools.v3-sheet > main > h1 + p { font-size: max(16px, var(--v3-fs-text)); line-height: 1.35; color: var(--v3-ink); }

/* ---------------------------------------------------------------------------------------------------------
   19. The flows' closing actions (screens.js writes a.btn and .btn.ghost): one primary, then secondary buttons
   --------------------------------------------------------------------------------------------------------- */
html.v3 .v3-fam-tools .actions { gap: 12px 16px; margin-top: clamp(24px, 2.4vw, 40px); }
html.v3 .v3-fam-tools.v3-sheet .btn:not(.btn-drawn):not(.ghost) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px var(--v3-btn-pad);
  background: var(--v3-orange); color: var(--v3-paper); border: 1px solid var(--v3-ink); border-radius: 0; box-shadow: var(--v3-shadow-hard);
  font-family: var(--v3-font-display); font-weight: var(--v3-w-ui); font-size: var(--v3-fs-button); line-height: var(--v3-lh-ui); text-decoration: none; cursor: pointer;
  transition: transform .12s var(--v3-ease), box-shadow .12s var(--v3-ease), background-color .12s;
}
html.v3 .v3-fam-tools.v3-sheet .btn:not(.btn-drawn):not(.ghost):hover { background: var(--v3-orange-text); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--v3-ink); }
html.v3 .v3-fam-tools.v3-sheet .btn.ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px;
  background: transparent; color: var(--v3-ink); border: 1px solid var(--v3-ink); border-radius: 0; box-shadow: none;
  font-family: var(--v3-font-body); font-weight: var(--v3-w-ui); font-size: var(--v3-fs-nav); text-decoration: none; cursor: pointer;
}
html.v3 .v3-fam-tools.v3-sheet .btn.ghost:hover { background: rgba(20, 20, 20, .06); }
html.v3 .v3-fam-tools.v3-sheet .btn:focus-visible { outline: 2px solid var(--v3-orange-text); outline-offset: 3px; }
/* reduced motion: hover and press change colour only, nothing moves (spec rules) */
@media (prefers-reduced-motion: reduce) {
  html.v3 .v3-fam-tools.v3-sheet .btn:not(.btn-drawn):not(.ghost):is(:hover, :active) { transform: none; box-shadow: var(--v3-shadow-hard); }
  html.v3 .v3-fam-tools.v3-sheet :is(.co, .reveal, .opt, .rel a, .scheme-toggle button):is(:hover, :active) { transform: none; }
  html.v3 .v3-fam-tools.v3-sheet :is(.opt.picked, .opt.right, .opt.wrong, .scheme-toggle button.active) { transform: none; }
}
/* the flows' stacked bar keeps one colour per segment (flow.js paints them from these four names) */
html.v3 .v3-fam-tools :is(.stack, .stack-key) { --orange-deep: var(--v3-ink); --orange: var(--v3-orange-text); --orange-soft: var(--v3-orange); --orange-pale: rgba(20, 20, 20, .4); }
html.v3 .v3-fam-tools .working > summary::-webkit-details-marker { display: none; }
html.v3 .v3-fam-tools .dl-count { font-family: var(--v3-font-body); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--v3-orange-text); }
html.v3 .v3-fam-tools .tag { font-size: 13px; padding: .1em .5em; }
html.v3 .v3-fam-tools .tag-stat { color: var(--v3-ink); border-color: var(--v3-ink); }
html.v3 .v3-fam-tools.v3-sheet .dl-title { font-family: var(--v3-font-body); font-weight: 700; }