/* Bridge: re-skins the existing tool pages (built by build/site2.py with theme.css + ledger.css) in the showroom
   direction without touching their markup or scripts. It works by redefining the old theme's own tokens.
   Loaded last on re-shelled pages only. The page is pinned to the light theme (data-theme="light"). */
:root, :root[data-theme="light"] {
  --paper: #ffffff; --paper-2: #f2f2f3; --surface: #fafafb; --surface-2: #f2f2f3;
  --ink: #17191c; --ink-2: #3b3e45; --muted: #5d616c; --line: #e3e4e7; --edge: #e3e4e7;
  --accent: #17191c; --accent-ink: #ffffff; --acc: #17191c;
  --navy: #fafafb; --navy-2: #f2f2f3; --night: #f2f2f3; --navy-line: #e3e4e7;
  --brass: #17191c; --brass-2: #3b3e45; --brass-deep: #17191c; --on-navy: #17191c; --on-navy-2: #5d616c;
  --hl: #fbe1d1; --hl-ink: #5d2a1a;
  --home: #17191c; --drive: #17191c; --land: #17191c; --tax: #17191c; --pack: #17191c; --site: #17191c;
  --display: "RM Display", "RM Display Fallback", Georgia, serif;
  --body: "RM Text", "RM Text Fallback", Arial, system-ui, sans-serif;
  --mono: "RM Text", "RM Text Fallback", Arial, system-ui, sans-serif;
  --r: 14px;
  color-scheme: light;
}
/* the old navy scope becomes a quiet fog band with ink type */
.top, .hero, .cx-hero, .phero, .band, .thx, .nf {
  --paper: #fafafb; --paper-2: #f2f2f3; --surface: #ffffff; --line: #e3e4e7;
  --ink: #17191c; --ink-2: #3b3e45; --muted: #5d616c;
  --accent: #17191c; --accent-ink: #ffffff;
  --ok-bg: #e3f2e8; --ok: #1c6b3b; --warn-bg: #fbefd4; --warn: #7a4a00; --over-bg: #f9e1df; --over: #b3261e;
  --site: #17191c; --land: #17191c; --tax: #17191c; --drive: #17191c; --pack: #17191c; --home: #17191c; --c: #17191c; --vc: #17191c;
  color: var(--ink);
}
:is(.band, .hero, .cx-hero, .phero, .thx, .nf)::after { background: #fafafb !important; }
:is(.hero, .cx-hero, .phero, .thx, .nf)::before { background: #e3e4e7 !important; }
/* engravings belong to the old identity; the new direction is product-first */
.hero-art, .stage-art { display: none !important; }

/* type: serif light for headings, neutral sans for everything else */
body { font-family: var(--body); font-weight: 400; letter-spacing: 0; color: var(--ink); background: #fff; }
h1, h2 { font-family: var(--display); font-weight: 300; letter-spacing: -0.018em; line-height: 1.06; }
h1 { letter-spacing: -0.025em; }
h3, h4 { font-family: var(--body); font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.kicker, .eyebrow { font: 500 14px/1.3 var(--body) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--muted) !important; }
.kicker::before, .eyebrow::before { display: none !important; }
th { font: 500 13px var(--body); letter-spacing: 0; text-transform: none; }
.blk { border-top-color: var(--line); }
.blk > h2::after { display: none; }
a { text-decoration-color: color-mix(in srgb, var(--ink) 45%, transparent); }
a:hover { color: var(--ink); text-decoration-color: currentColor; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* controls: pill buttons, quiet fields */
.btn { border-radius: 999px !important; font-family: var(--body); font-weight: 500; letter-spacing: 0; }
.btn:hover { background: #2b2e33; border-color: #2b2e33; color: #fff; }
.btn.ghost:hover, .btn.alt:hover, .btn.plain:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
:is(.hero, .cx-hero, .phero, .thx, .nf) .btn:not(.alt):not(.plain):not(.ghost):not(.secondary) { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
:is(.hero, .cx-hero, .phero, .thx, .nf) :is(.btn.alt, .btn.plain, .btn.ghost, .btn.secondary) { color: var(--ink) !important; border-color: var(--ink) !important; }
input, select, textarea { border-radius: 10px; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent); }
.save { background: var(--ink); color: #fff; }
.bundle:last-child { background: #fbe1d1; border-color: #fbe1d1; color: #5d2a1a; }
.bundle:last-child > .btn { background: #5d2a1a !important; border-color: #5d2a1a !important; }
.bundle:last-child > .btn, .bundle:last-child > .btn * { color: #fff !important; }
.xsell { border-left-color: var(--line); }
.ticks li::before { color: var(--ink); }
/* cards and panels: softer radius, no heavy rules */
:is(.card, .tool, .mn-res, .lres, .panel) { border-radius: 20px; }

/* the old theme states heading weights in several places; this layer is final */
h1, h2 { font-weight: 300 !important; }
:is(.hero, .cx-hero, .band, .phero, .thx, .nf) h1 { font-weight: 300 !important; letter-spacing: -0.025em; }
h3, h4 { font-weight: 500 !important; }
.mn-res h2, .lres h2, .lhead h2, .tool h3, .card h3 { font-family: var(--display); font-weight: 350 !important; letter-spacing: -0.01em; }
.crumbs, .band .crumbs { font: 400 14px/1.4 var(--body) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--muted); }
/* line the shell up with the old 1320px content column */
/* one content column for the whole site: the old pages narrow to the new 1160px measure */
:root { --maxw: 1160px; }

/* Free-tool pages: the category's photograph in the head, where the old engraving was (1 Oct 2026 refinement).
   It drifts a little with the scroll (--rm from showroom.js) unless reduced motion is on. */
.hero-pic { display: block; position: relative; overflow: hidden; border-radius: 24px; background: #e9e4dd; aspect-ratio: 16 / 9; margin-top: 24px; }
.hero-pic img { position: absolute; inset: -8% 0; width: 100%; height: 116%; max-width: none; object-fit: cover; }
.hero-pic--wide { aspect-ratio: 4 / 1; }
@media (min-width: 980px) {
  .hero:has(> .hero-pic:not(.hero-pic--wide)) { position: relative; }
  .hero:has(> .hero-pic:not(.hero-pic--wide)) > :not(.hero-pic) { max-width: 54%; }
  .hero > .hero-pic:not(.hero-pic--wide) { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 40%; aspect-ratio: 4 / 3; margin: 0; }
}
@media (prefers-reduced-motion: no-preference) { html.rm-live .hero-pic img { translate: 0 calc((var(--rm, 0.5) - 0.5) * -14%); } }

/* ------------------------------------------------------------ third pass, 1 Oct 2026 --
   At a glance card in every charge page's head: the car price (or the status), hours, deadline, fine, who is free. */
.hero .glance { margin: 20px 0 4px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 24px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(4, 23, 43, 0.03), 0 20px 25px -5px rgba(17, 20, 28, 0.08); }
.glance__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.glance__head span:first-child { font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.glance__list { margin: 0; display: grid; }
.glance__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.glance__row:last-child { border-bottom: 0; padding-bottom: 2px; }
@media (min-width: 700px) { /* the page column is 860px wide, so the card sits under the buttons with its facts in two columns */
  .glance__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .glance__row:first-child { grid-column: 1 / -1; } }
.glance__row dt { color: var(--muted); font-size: 15px; }
.glance__row dd { margin: 0; font-weight: 500; font-size: 15.5px; line-height: 1.45; }
.glance__big { font: 300 32px/1 var(--display); letter-spacing: -0.01em; }
.glance__basis { font-size: 14px; color: var(--muted); font-weight: 400; }
.glance__note { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.dir-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 11px; border-radius: 999px; font: 500 13px/1 var(--body); white-space: nowrap; }
.dir-tag--ok { background: #e3f2e8; color: #1c6b3b; }
.dir-tag--warn { background: #fbefd4; color: #7a4a00; }
.dir-tag--quiet { background: #f2f2f3; color: #5d616c; }
@media (max-width: 560px) { .glance__row { grid-template-columns: 1fr; gap: 2px; } .glance__row dt { font-size: 13px; } }
/* About: five category cards instead of the three old audiences */
.grid5 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid5 .hub { padding: 20px 18px; border-top-width: 2px; }
.grid5 .hub h2 { font-size: 22px; }
.grid5 .hub p { font-size: 14.5px; }
.grid5 .hub p b { font-weight: 500; color: var(--ink); }
.grid5 .hub ul { margin: 12px 0 0; padding: 0; list-style: none; }

/* Phones (2 Oct 2026, Ade: nothing may sit over anything on small screens; under 600px only): the driving page's
   filter chips scroll away with the page instead of covering a quarter of the list, and a worked-out amount never
   breaks across two lines ("£6,000." / "00"): its label wraps instead. */
@media (max-width: 599px) {
  .tabs.sticky, .filters.sticky { position: static; }
}
/* A worked-out amount never breaks across two lines, at any width (2 Oct 2026, evening: the result labels are longer
   and more explicit now, so on the two-column tool cards the label must be the part that wraps). */
.kv b { white-space: nowrap; flex-shrink: 0; min-width: auto; }
.kv > span { min-width: 0; }

/* ---- one page per free tool (Oct 2026) ---- */
.hero .checked { margin: 12px 0 0; font-size: .95rem; color: var(--ink-2); }
.tools.tools1 { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
.toolcta { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); line-height: 1.55; }
.toolmore { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.toolmore a { display: inline-flex; min-height: 44px; align-items: center; }
.toolgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.toolcard { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; min-height: 44px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.toolcard b { font-size: 1.05rem; }
.toolcard b::after { content: " \2192"; }
.toolcard span { color: var(--ink-2); line-height: 1.5; }
.toolcard:hover { border-color: var(--ink); }
.toolcard:active { transform: scale(.99); }
@media (max-width: 720px) { .toolgrid { grid-template-columns: minmax(0, 1fr); } }
/* tax deadlines table on phones: date, tax year and type on one line, what it is underneath */
@media (max-width: 560px) {
  #tdates, #tdates tbody { display: block; }
  #tdates tr:first-child { display: none; }
  #tdates tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  #tdates td { border: 0; padding: 0; }
  #tdates td:nth-child(3) { color: var(--ink-2); font-size: .92rem; }
  #tdates td:nth-child(4) { grid-column: 1 / -1; margin-top: 6px; }
}