/*
Theme Name: Truck Roll
Theme URI: (none - local only)
Author: (unassigned - no byline exists for this site)
Description: Editorial theme for a comparison utility. Implements ops/design/
  TRUCK_ROLL_DESIGN_SYSTEM.md: two typographic scales (one to read, one to scan), five
  declared card types with per-type `sizes`, a 1240 container, a 704 reading column and
  three first-class price states - published, quote-gated, unknown. No third-party code,
  no web fonts, no analytics, no embeds: a site whose argument is "you can check every
  number here" should not ship anything a reader cannot read.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: truckroll
*/

/* ========================================================================
   1. TOKENS

   ONE IDENTITY, AND IT IS THE DARK NAVY.

   These values used to live in a `@media (prefers-color-scheme: dark)`
   override sitting on top of a white palette. That meant the site had two
   appearances and the visitor's operating system chose between them - and
   only one of the two was ever reviewed. The approved one is this one, so
   it is now the default and there is no other.

   `color-scheme: dark` is declared with it. Without that, a visitor whose
   machine is set to light gets the browser's own LIGHT chrome painted into
   the cost calculator's number inputs, its select menus and the scrollbars,
   on top of this ground. The palette alone does not make the rendering
   identical under both preferences; the declaration is what does.

   Contrast is no longer asserted here. The old note in this position
   ("the tightest pair is --muted on --surface at 4,99:1") described the
   WHITE palette that has just been removed, and would have gone on reading
   as reassurance about a palette that no longer exists. Gate G16 computes
   every pair from these tokens on every run instead.
   ===================================================================== */
:root {
  color-scheme: dark;

  --bg:#101319; --surface:#171b23; --surface-2:#1e232d;
  --ink:#e9edf3; --ink-2:#c2cad6; --muted:#97a2b2;
  --line:#2a313d; --line-strong:#3b444f;
  --brand:#7fb3e0; --brand-soft:#1b2735;
  --ok:#6fd39b; --ok-soft:#16261e;
  --flag:#e39a6a; --flag-soft:#2a1d15;

  --shell:1240px; --pad:24px; --read:704px; --side:300px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --r-card:12px; --r-ui:8px; --r-chip:4px;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; animation:none !important; }
}
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.5 var(--sans);
  /* a price is data even inside a sentence */
  font-variant-numeric:tabular-nums;
  overflow-wrap:break-word;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-underline-offset:.16em; }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--brand); outline-offset:2px; border-radius:2px;
}
h1,h2,h3,h4 { font-family:var(--sans); letter-spacing:-.017em; margin:0; }
p { margin:0; }
ul,ol { margin:0; padding:0; }

.tr-shell { max-width:var(--shell); margin:0 auto; padding:0 var(--pad); }
@media (max-width:699px) { :root { --pad:16px; } }

/* The front page had NO <h1> at all - it is a set of module <h2>s. The page still needs one
   accessible top-level heading, and it must not be a visual element. */
.tr-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

.tr-skip { position:absolute; left:-9999px; }
.tr-skip:focus { left:.5rem; top:.5rem; z-index:20; background:var(--bg); color:var(--ink);
  padding:.6rem .9rem; border:1px solid var(--ink); border-radius:var(--r-ui); }

.tr-kicker { font:600 12.5px/1.3 var(--sans); letter-spacing:.06em;
  text-transform:uppercase; color:var(--brand); margin:0 0 8px; }
.tr-kicker a { text-decoration:none; }
.tr-kicker a:hover { text-decoration:underline; }

/* ========================================================================
   2. PREVIEW BANNER + MASTHEAD
   ===================================================================== */
.tr-banner { background:var(--flag-soft); color:var(--ink); border-bottom:1px solid var(--line);
  font:400 13px/1.5 var(--sans); padding:8px var(--pad); text-align:center; }
.tr-banner strong { color:var(--flag); }

.tr-masthead { border-bottom:1px solid var(--line); background:var(--bg); }
.tr-masthead-in { display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:92px; padding-top:14px; padding-bottom:14px; }

/* THE SITE NAME WAS LOSING TO ITS OWN NAVIGATION. At 20px, "Truck Roll" was smaller than
   the six category links beside it, so the masthead read as a nav bar with a label rather
   than a publication with sections. Three steps - 35 / 31 / 27 - and the tagline moves with
   it, because a name that grows away from a caption that stayed put looks like a mistake
   rather than a hierarchy. The extra 20px of masthead height is the minimum the taller
   two-line block needs; nothing else in the header moved. */
.tr-brand { font:700 35px/1.05 var(--sans); letter-spacing:-.03em; }
.tr-brand a { text-decoration:none; }
.tr-brand-sub { display:block; font:400 14px/1.35 var(--sans); letter-spacing:0;
  color:var(--muted); margin-top:6px; }
/* 1199 -> 1219, so the step-down lands on the SAME line as the navigation collapse.
   While they disagreed, 1200-1219px got the 35px name beside the collapsed menu button
   under flex-wrap:nowrap, and the masthead overflowed the viewport by 16px. The two
   breakpoints are one decision and are now one number. */
@media (max-width:1219px) {
  .tr-masthead-in { min-height:84px; }
  .tr-brand { font-size:31px; }
  .tr-brand-sub { font-size:13.5px; }
}
@media (max-width:699px) {
  .tr-masthead-in { min-height:76px; }
  .tr-brand { font-size:27px; }
  .tr-brand-sub { font-size:13px; }
}

/* THE DESKTOP NAVIGATION DID NOT EXIST.
   The nav lives inside <details>. Hiding the <summary> at >=700px hid the SUMMARY - it did
   not reveal the panel, because a closed <details> hides its own content. Chrome, Safari and
   Firefox now do that through `::details-content { content-visibility: hidden }`, so
   `display:block` alone is not enough either. Result: 1240px of empty masthead at every
   width above 699px, zero tab stops, and six links that existed in the DOM and were never
   painted - which is also why VG-NAV passed while counting them.
   Both UA hiding mechanisms are overridden here, which covers old and new engines without
   an `open` attribute - the panel must still start collapsed below the breakpoint. */
/* THE COLLAPSE MOVED FROM 700px TO 1100px, and the larger site name is why.
   Six category links plus a call-to-action need roughly 900px of bar. With a 20px name in
   front of them the row already overflowed its container below about 1030px and wrapped to
   two lines; at 31px it does so with room to spare. The owner's instruction was to use the
   existing responsive navigation or improve its collapse safely, so the fix is the
   breakpoint, not a redesign: below it the reader gets the same keyboard-operable
   <details> menu that has always served the phone, instead of a nav that wraps under
   itself.

   1100px WAS STILL TOO EARLY, and 2026-08-09 measured it rather than estimating it. The
   bar needs 849px for seven items at their real rendered widths. Available room is 782px
   at a 1100px viewport, 843px at 1180px, and reaches 849px only at 1200px - where it then
   stays, because --shell caps the masthead at 1240px whatever the window does. So between
   1100 and about 1195 the bar was revealed BEFORE there was room for it and wrapped
   "Cost calculator" onto a second line, overlapping the brand. It was doing this at 1152
   and 1176, which are ordinary laptop widths, and no canonical capture width (1440, 1024,
   390) sits in the band, so it had never been seen.
   The breakpoint is now 1220px: past the 1200px point where the row demonstrably fits,
   with margin for sub-pixel and font-fallback differences. This changes WHEN the existing
   collapsed menu is used and nothing else - no colour, type size, spacing or structure -
   and 1440px and 390px render exactly as approved. */
.tr-nav-wrap { position:relative; }
.tr-nav-wrap > summary { display:none; }
@media (min-width:1220px) {
  .tr-nav-wrap > .tr-nav { display:block; }
  .tr-nav-wrap::details-content { content-visibility:visible; block-size:auto; opacity:1; }
}
.tr-nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:4px 22px; align-items:center; }
.tr-nav a { display:inline-block; padding:8px 0; font:500 14.5px/1.2 var(--sans);
  color:var(--ink-2); text-decoration:none; border-bottom:2px solid transparent; }
.tr-nav a:hover { color:var(--ink); border-bottom-color:var(--line-strong); }
.tr-nav .tr-here > a { color:var(--brand); border-bottom-color:var(--brand); }
.tr-nav-cta a { color:var(--bg); background:var(--brand); border-radius:var(--r-ui);
  padding:8px 14px; border-bottom:0; }
.tr-nav-cta a:hover { color:var(--bg); border-bottom-color:transparent; filter:brightness(1.12); }

@media (max-width:1219px) {
  .tr-masthead-in { flex-wrap:nowrap; }
  .tr-nav-wrap > summary { display:flex; align-items:center; gap:8px; cursor:pointer;
    list-style:none; padding:9px 12px; border:1px solid var(--line-strong);
    border-radius:var(--r-ui); font:600 13.5px/1 var(--sans); color:var(--ink); }
  .tr-nav-wrap > summary::-webkit-details-marker { display:none; }
  .tr-nav-toggle-bars { width:16px; height:2px; background:currentColor; position:relative; }
  .tr-nav-toggle-bars::before,.tr-nav-toggle-bars::after { content:""; position:absolute;
    left:0; width:16px; height:2px; background:currentColor; }
  .tr-nav-toggle-bars::before { top:-5px; } .tr-nav-toggle-bars::after { top:5px; }
  .tr-nav-wrap[open] > summary { border-color:var(--brand); color:var(--brand); }
  .tr-nav { position:absolute; right:0; top:calc(100% + 8px); z-index:15; min-width:min(78vw,280px);
    background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--r-ui);
    box-shadow:0 10px 28px rgba(16,19,25,.14); padding:6px; }
  .tr-nav ul { flex-direction:column; align-items:stretch; gap:0; }
  .tr-nav li { border-bottom:1px solid var(--line); }
  .tr-nav li:last-child { border-bottom:0; }
  .tr-nav a { display:block; padding:13px 12px; font-size:15.5px; border-bottom:0; }
  .tr-nav-cta a { margin:6px; text-align:center; }
}

/* ========================================================================
   3. CARDS
   Budgets in TRUCK_ROLL_DESIGN_SYSTEM.md section 3. Cards in a row stretch
   to equal height, so the tallest is what VG-CARD measures.
   ===================================================================== */
.tr-card { display:flex; flex-direction:column; height:100%;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--bg);
  overflow:hidden; transition:border-color .15s ease, transform .15s ease; }
.tr-card:hover { border-color:var(--line-strong); }
.tr-card-media { display:block; background:var(--surface-2); }
.tr-card-media img { width:100%; object-fit:cover; object-position:center; }
.tr-card-body { display:flex; flex-direction:column; flex:1; padding:14px 18px 16px; }
.tr-card-title { margin:0 0 6px; font-weight:650; }
.tr-card-title a { text-decoration:none; }
.tr-card-title a:hover { text-decoration:underline; text-decoration-color:var(--line-strong); }
.tr-card-sum { font:400 14.5px/1.45 var(--serif); color:var(--ink-2); margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tr-meta { margin-top:auto; font:500 12.5px/1.4 var(--sans); color:var(--muted);
  letter-spacing:.02em; display:flex; flex-wrap:wrap; gap:0 7px; align-items:baseline; }
.tr-meta-cat { color:var(--brand); text-decoration:none; text-transform:uppercase;
  letter-spacing:.06em; font-weight:600; }
.tr-meta-cat:hover { text-decoration:underline; }

/* clamps: never hide the last word without an ellipsis */
.tr-card-title a { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.tr-card--featured  .tr-card-title { font-size:28px; line-height:1.2; }
.tr-card--featured  .tr-card-title a { -webkit-line-clamp:3; }
.tr-card--standard  .tr-card-title { font-size:19px; line-height:1.3; }
.tr-card--standard  .tr-card-title a { -webkit-line-clamp:3; }
.tr-card--horizontal .tr-card-title { font-size:22px; line-height:1.3; }
.tr-card--horizontal .tr-card-title a { -webkit-line-clamp:2; }
.tr-card--related   .tr-card-title { font-size:17px; line-height:1.3; }
.tr-card--related   .tr-card-title a { -webkit-line-clamp:3; }
.tr-card--compact   .tr-card-title { font-size:16px; line-height:1.35; margin:0 0 3px; }
.tr-card--compact   .tr-card-title a { -webkit-line-clamp:2; }

.tr-card--featured .tr-card-body { padding:18px 20px 20px; }
.tr-card--featured .tr-card-sum { font-size:16px; }
/* The lead image is capped against the VIEWPORT, not only by its ratio. At a correct 2,28:1
   a full-width lead still filled 55,6% of a 1024x768 laptop - the same complaint the
   reference audit makes at 68,1%, arriving by a different route. The cap keeps it under the
   45% VG-HERO allows at every width; object-fit absorbs the difference. */
.tr-card--featured .tr-card-media img { max-height:44vh; object-fit:cover; }

/* CARD_COMPACT: 112x63 thumbnail left, no excerpt, budget <=96px */
.tr-card--compact { flex-direction:row; gap:12px; align-items:flex-start;
  border:0; border-radius:0; border-bottom:1px solid var(--line); padding:10px 0; }
.tr-card--compact .tr-card-media { flex:0 0 112px; border-radius:6px; overflow:hidden; }
.tr-card--compact .tr-card-media img { width:112px; height:63px; }
.tr-card--compact .tr-card-body { padding:0; }
.tr-card--compact .tr-meta { font-size:12px; }
.tr-rail-list .tr-card--compact:last-child { border-bottom:0; }

/* CARD_HORIZONTAL: 3:2 image left, degrades to standard below 700 */
.tr-card--horizontal { flex-direction:row; }
.tr-card--horizontal .tr-card-media { flex:0 0 300px; }
.tr-card--horizontal .tr-card-media img { height:100%; }
.tr-card--horizontal .tr-card-body { padding:18px 20px; }
@media (max-width:699px) {
  .tr-card--horizontal { flex-direction:column; }
  .tr-card--horizontal .tr-card-media { flex:none; }
  .tr-card--horizontal .tr-card-title { font-size:19px; }
}

/* ========================================================================
   4. GRID
   >=1200: 3 columns.  700-1199: 2.  <700: 1.  Breakpoint at 700, not 768:
   at 768 a 3-column grid gives 256px cards with four-line titles.
   ===================================================================== */
.tr-grid { display:grid; gap:28px; }
.tr-grid--standard { grid-template-columns:repeat(3,1fr); }
.tr-grid--related  { grid-template-columns:repeat(3,1fr); gap:20px; }
.tr-grid--compact  { grid-template-columns:repeat(2,1fr); gap:0 40px; }
/* ONE DESKTOP BREAKPOINT, NOT TWO THAT DISAGREE. Every wide-layout rule below used to
   switch at 1199/1200 while the navigation switched at 1100. Measured on 2026-08-09:
   the home hero band needs 1216px of viewport, so between 1200 and 1215 the desktop grid
   applied and the hero rail hung 16px past the right edge of the page. The band is 16px
   wide, no canonical capture width falls inside it, and it had been there since the
   layout was written.
   All of them now switch at 1220, with the navigation. The change is confined to
   1200-1219px by construction: at 1024 these rules already applied and at 1440 they
   already did not, so both approved renderings are untouched. */
@media (max-width:1219px) {
  .tr-grid--standard { grid-template-columns:repeat(2,1fr); gap:24px; }
}
@media (max-width:699px) {
  .tr-grid--standard,.tr-grid--related,.tr-grid--compact { grid-template-columns:1fr; gap:0; }
  /* mobile rule: the first item of a module keeps its 16:9 image, the rest go compact */
  .tr-grid--standard .tr-card { border:0; border-radius:0; border-bottom:1px solid var(--line);
    padding-bottom:16px; margin-bottom:16px; }
  .tr-grid--standard .tr-card:first-child .tr-card-media { border-radius:var(--r-card); overflow:hidden; }
  .tr-grid--standard .tr-card:not(:first-child) { flex-direction:row; gap:12px; align-items:flex-start; }
  .tr-grid--standard .tr-card:not(:first-child) .tr-card-media { flex:0 0 112px; border-radius:6px; overflow:hidden; }
  .tr-grid--standard .tr-card:not(:first-child) .tr-card-media img { width:112px; height:63px; }
  .tr-grid--standard .tr-card:not(:first-child) .tr-card-body { padding:0; }
  .tr-grid--standard .tr-card:not(:first-child) .tr-card-sum { display:none; }
  .tr-grid--standard .tr-card:not(:first-child) .tr-card-title { font-size:16px; line-height:1.35; }
  .tr-grid--related .tr-card { flex-direction:row; gap:12px; border:0; border-radius:0;
    border-bottom:1px solid var(--line); padding:10px 0; }
  .tr-grid--related .tr-card-media { flex:0 0 112px; border-radius:6px; overflow:hidden; }
  .tr-grid--related .tr-card-media img { width:112px; height:63px; }
  .tr-grid--related .tr-card-body { padding:0; }
}

/* ========================================================================
   5. SECTION HEADS AND MODULES
   ===================================================================== */
.tr-module { padding-top:40px; }
.tr-sec-head { display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:0 0 20px; padding-bottom:12px;
  border-bottom:2px solid var(--ink); }
.tr-sec-head .tr-kicker { margin:0 0 4px; flex-basis:100%; }
.tr-sec-title { font-size:26px; line-height:1.2; font-weight:700; }
.tr-sec-all { font:600 13.5px/1 var(--sans); color:var(--brand); text-decoration:none;
  white-space:nowrap; }
.tr-sec-all:hover { text-decoration:underline; }

/* ========================================================================
   6. FRONT PAGE
   ===================================================================== */
.tr-hero-band { display:grid; grid-template-columns:776px 388px; gap:28px;
  padding-top:32px; padding-bottom:8px; align-items:start; }
.tr-hero-main .tr-card { border-width:1px; }
.tr-rail-title { font:700 15px/1.2 var(--sans); text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink); padding-bottom:10px; border-bottom:2px solid var(--ink); margin-bottom:4px; }
@media (max-width:1219px) {
  .tr-hero-band { grid-template-columns:1fr; gap:32px; padding-top:24px; }
  .tr-rail-list { display:grid; grid-template-columns:repeat(2,1fr); gap:0 32px; }
}
@media (max-width:699px) {
  .tr-hero-band { gap:26px; padding-top:16px; }
  .tr-rail-list { grid-template-columns:1fr; }
  .tr-card--featured .tr-card-title { font-size:22px; }
  .tr-card--featured .tr-card-body { padding:14px 16px 16px; }
}

.tr-calc-band { background:var(--brand-soft); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); margin-top:40px; }
.tr-calc-band-in { display:grid; grid-template-columns:1fr 388px; gap:40px;
  padding-top:32px; padding-bottom:32px; align-items:center; }
.tr-calc-copy h2 { font-size:27px; line-height:1.25; margin:0 0 12px; max-width:22em; }
.tr-calc-copy p { font:400 16px/1.55 var(--serif); color:var(--ink-2); margin:0 0 12px; max-width:52ch; }
.tr-hard-rule { border-left:3px solid var(--flag); padding-left:14px; }
.tr-hard-rule strong { color:var(--flag); }
.tr-calc-thumb { display:block; margin-top:16px; border-radius:var(--r-card); overflow:hidden;
  border:1px solid var(--line); }
@media (max-width:1219px) { .tr-calc-band-in { grid-template-columns:1fr; gap:24px; } }

.tr-btn { display:inline-block; background:var(--brand); color:var(--bg);
  font:600 15px/1 var(--sans); padding:14px 22px; border-radius:var(--r-ui);
  text-decoration:none; border:1px solid var(--brand); }
.tr-btn:hover { filter:brightness(1.12); }
.tr-btn--sm { padding:11px 16px; font-size:14px; }
.tr-btn--ghost { background:transparent; color:var(--brand); }

.tr-legend { list-style:none; display:grid; gap:10px; font:400 13.5px/1.45 var(--sans);
  color:var(--ink-2); }
/* Two children per row and no bare text node: see tr_state_legend() in inc/cards.php. */
.tr-legend li { display:grid; grid-template-columns:14px minmax(0,1fr); gap:10px; align-items:start; }
.tr-legend-text { min-width:0; }
.tr-legend strong { font-weight:700; color:var(--ink); letter-spacing:.02em; }
.tr-legend strong::after { content:" — "; color:var(--muted); font-weight:400; }
.tr-dot { width:12px; height:12px; border-radius:50%; margin-top:3px; }
.tr-dot--ok { background:var(--ok); }
.tr-dot--flag { border:2.5px dashed var(--flag); }
.tr-dot--muted { border:2px dotted var(--muted); }
.tr-legend--hero { margin-top:18px; }

.tr-method-band { background:var(--surface); border-top:1px solid var(--line); margin-top:48px; }
.tr-method-in { padding-top:40px; padding-bottom:44px; }
.tr-method-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.tr-method-cols h3 { font-size:17px; line-height:1.3; margin:0 0 8px; }
.tr-method-cols p { font:400 15.5px/1.6 var(--serif); color:var(--ink-2); }
@media (max-width:899px) { .tr-method-cols { grid-template-columns:1fr; gap:24px; } }

/* ========================================================================
   7. ARCHIVE
   Header capped at 170px before the first card.
   ===================================================================== */
.tr-archive { padding-top:24px; padding-bottom:48px; }
.tr-crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:0 8px;
  font:500 12.5px/1.5 var(--sans); color:var(--muted); }
.tr-crumbs li + li::before { content:"›"; margin-right:8px; color:var(--line-strong); }
.tr-crumbs a { color:var(--muted); text-decoration:none; }
.tr-crumbs a:hover { color:var(--brand); text-decoration:underline; }
/* The breadcrumb's current item truncates with an ellipsis, and its cap was a flat 52ch -
   about 361px at this font size, which is wider than a 320px viewport. Rendering the site at
   320 for the first time is what showed it: every article overflowed to 389px, and the single
   leaf offender was this span.
   Two things were needed, because either alone still overflows. `min-width:0` on the li,
   since a flex item's automatic minimum size is its min-content width and a nowrap span has
   no smaller min-content to offer - the li could not shrink no matter what the span said. And
   min(52ch, 100%) on the span, so the cap is whichever is narrower rather than always 52ch. */
.tr-crumbs li { min-width:0; }
.tr-crumbs [aria-current] { color:var(--ink-2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:min(52ch, 100%); display:inline-block; vertical-align:bottom; }
.tr-archive-head { max-height:170px; overflow:hidden; margin:14px 0 24px;
  padding-bottom:16px; border-bottom:2px solid var(--ink); }
.tr-archive-head h1 { font-size:32px; line-height:1.2; font-weight:700; margin:0 0 8px; }
.tr-archive-desc { font:400 16.5px/1.55 var(--serif); color:var(--ink-2); max-width:68ch; }
.tr-archive-count { font:600 12.5px/1.4 var(--sans); color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin-top:8px; }
.tr-empty { color:var(--muted); padding:32px 0; }

.navigation.pagination { margin-top:36px; }
.nav-links { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.nav-links .page-numbers { padding:9px 14px; border:1px solid var(--line-strong);
  border-radius:var(--r-ui); text-decoration:none; font:600 14px/1 var(--sans); color:var(--ink-2); }
.nav-links .page-numbers.current { background:var(--brand); border-color:var(--brand); color:var(--bg); }
.nav-links .page-numbers:hover { border-color:var(--brand); color:var(--brand); }
.nav-links .page-numbers.current:hover { color:var(--bg); }
.screen-reader-text { position:absolute; left:-9999px; }

/* ========================================================================
   8. ARTICLE
   704 reading column, 300 sidebar, hero <=34% of the viewport.
   ===================================================================== */
.tr-article-wrap { display:grid; grid-template-columns:var(--read) var(--side);
  justify-content:space-between; max-width:1100px; padding-top:24px; padding-bottom:56px; }
.tr-article { min-width:0; }
.tr-article-head { margin:14px 0 22px; }
.tr-article-head h1 { font-size:38px; line-height:1.16; font-weight:700; margin:0 0 12px; }
.tr-meta--article { font:500 12.5px/1.5 var(--sans); color:var(--muted); margin-top:0; }
.tr-meta--article a { color:var(--brand); }

.tr-hero { margin:0 0 26px; }
.tr-hero img { width:100%; aspect-ratio:704/310; max-height:34vh; object-fit:cover;
  border-radius:var(--r-card); }
.tr-hero figcaption { margin-top:8px; }
.tr-credit { font:400 12.5px/1.45 var(--sans); color:var(--muted); }
.tr-credit a { color:var(--muted); }

.tr-toc { border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:0 var(--r-ui) var(--r-ui) 0; background:var(--surface);
  padding:16px 20px; margin:0 0 26px; }
.tr-toc h2 { font:700 12.5px/1.3 var(--sans); text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin:0 0 10px; }
.tr-toc ol { list-style:decimal; padding-left:20px; font:500 15px/1.5 var(--sans); }
.tr-toc li { margin:5px 0; }
.tr-toc a { color:var(--ink-2); text-decoration:none; }
.tr-toc a:hover { color:var(--brand); text-decoration:underline; }

/* -------- reading matter: the OTHER typographic scale -------- */
.entry-content { font:400 17.5px/1.62 var(--serif); color:var(--ink); }
.entry-content > * + * { margin-top:1.05em; }
.entry-content h2 { font:650 23px/1.3 var(--sans); margin:2em 0 .55em; scroll-margin-top:16px; }
.entry-content h3 { font:650 18px/1.35 var(--sans); margin:1.6em 0 .4em; }
.entry-content p.tr-standfirst { font-size:20px; line-height:1.45; color:var(--ink-2);
  margin-bottom:1.3em; }
.entry-content a { color:var(--brand); text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--brand) 35%, transparent); }
.entry-content a:hover { text-decoration-color:var(--brand); }
.entry-content ul,.entry-content ol { padding-left:1.35em; }
.entry-content li + li { margin-top:.4em; }
.entry-content strong { font-weight:700; }

/* The run-in sidehead. 79 of these across all 27 bodies - `<p><strong>Tiers.</strong> ...`
   - and styling them is the one presentational change that reaches every piece without
   editing a byte. It is this corpus's equivalent of the reference's "style the table
   that already exists". */
.entry-content p > strong:first-child { font-family:var(--sans); font-weight:700;
  font-size:.93em; letter-spacing:-.005em; color:var(--ink); }

.entry-content table { width:100%; border-collapse:collapse; font:400 15px/1.45 var(--sans);
  display:block; overflow-x:auto; }
.entry-content th,.entry-content td { text-align:left; padding:9px 12px;
  border-bottom:1px solid var(--line); }
.entry-content th { font-weight:700; border-bottom:2px solid var(--line-strong); }

/* the three blocks every piece carries */
.tr-disclosure,.tr-experience { border:1px solid var(--line); border-radius:var(--r-ui);
  background:var(--surface); padding:16px 20px; font:400 14.5px/1.6 var(--sans);
  color:var(--ink-2); margin-top:2em !important; }
.tr-disclosure > * + *,.tr-experience > * + * { margin-top:.7em; }
.tr-disclosure h2,.tr-experience h2 { font:700 11.5px/1.3 var(--sans) !important;
  text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 4px !important; }
.tr-experience { border-left:3px solid var(--flag); }
.tr-experience strong { color:var(--ink); }

.tr-sources { margin-top:2.4em !important; border-top:2px solid var(--ink); padding-top:16px;
  font:400 14.5px/1.6 var(--sans); }
.tr-sources h2 { font:700 12.5px/1.3 var(--sans) !important; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); margin:0 0 12px !important; }
.tr-sources ol { list-style:none; padding:0; counter-reset:src; }
.tr-sources li { counter-increment:src; position:relative; padding:10px 0 10px 34px;
  border-bottom:1px solid var(--line); margin:0; }
.tr-sources li::before { content:counter(src); position:absolute; left:0; top:10px;
  width:22px; height:22px; border-radius:var(--r-chip); background:var(--surface-2);
  color:var(--muted); font:700 11.5px/22px var(--sans); text-align:center; }
.tr-sources a { color:var(--brand); }
.tr-class { color:var(--muted); }
/* A source with no retrievable URL. Printed rather than linked, and marked so the absence
   reads as a recorded fact instead of a missing link. */
.tr-nourl { color:var(--muted); font-style:italic; }
.tr-freshness { color:var(--muted); font-size:13px; margin-top:14px !important;
  background:var(--flag-soft); border-radius:var(--r-ui); padding:12px 14px; }

/* prev / next and related */
.tr-adjacent { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:40px;
  padding-top:24px; border-top:1px solid var(--line); }
.tr-adj { display:block; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--r-ui); text-decoration:none; }
.tr-adj:hover { border-color:var(--brand); }
.tr-adj--next { text-align:right; }
.tr-adj-label { display:block; font:600 11.5px/1.3 var(--sans); text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); margin-bottom:5px; }
.tr-adj-title { font:600 15px/1.35 var(--sans); color:var(--ink); }
@media (max-width:699px) { .tr-adjacent { grid-template-columns:1fr; }
  .tr-adj--next { text-align:left; } }

.tr-related { margin-top:44px; padding-top:24px; border-top:2px solid var(--ink); }
.tr-related > h2 { font:700 15px/1.2 var(--sans); text-transform:uppercase;
  letter-spacing:.07em; margin:0 0 18px; }

/* sidebar */
.tr-sidebar { display:flex; flex-direction:column; gap:24px; min-width:0; }
@media (min-width:1220px) { .tr-sidebar { position:sticky; top:24px; align-self:start; } }
.tr-side-mod { border:1px solid var(--line); border-radius:var(--r-card); padding:18px; }
.tr-side-mod > h2 { font:700 12.5px/1.3 var(--sans); text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); margin:0 0 12px; }
.tr-side-mod--calc { background:var(--brand-soft); border-color:transparent; }
.tr-side-mod--calc p { font:400 14.5px/1.55 var(--serif); color:var(--ink-2); margin-bottom:14px; }
.tr-side-all { font:600 13px/1.4 var(--sans); color:var(--brand); text-decoration:none; }
.tr-side-all:hover { text-decoration:underline; }
.tr-side-mod .tr-card--compact { padding:9px 0; }

@media (max-width:1219px) {
  .tr-article-wrap { grid-template-columns:1fr; max-width:var(--read); gap:40px; }
  .tr-article-head h1 { font-size:34px; }
  .tr-sidebar { flex-direction:row; flex-wrap:wrap; }
  .tr-sidebar > * { flex:1 1 300px; }
}
@media (max-width:699px) {
  .tr-article-wrap { padding-top:16px; }
  .tr-article-head h1 { font-size:30px; line-height:1.2; }
  .entry-content { font-size:17px; }
  .entry-content h2 { font-size:21px; }
  .entry-content p.tr-standfirst { font-size:18.5px; }
  .tr-hero img { aspect-ratio:16/9; max-height:32vh; }
  .tr-sidebar { flex-direction:column; }
}

/* ========================================================================
   9. CALCULATOR
   ===================================================================== */
.tr-calc-hero { background:var(--brand-soft); border-bottom:1px solid var(--line); }
.tr-calc-hero-in { display:grid; grid-template-columns:1fr 300px; gap:40px;
  padding-top:22px; padding-bottom:32px; align-items:center; }
.tr-calc-hero h1 { font-size:36px; line-height:1.18; font-weight:700; margin:0 0 14px; }
.tr-calc-promise { font:400 17px/1.55 var(--serif); color:var(--ink-2); max-width:56ch; }
.tr-calc-hero-fig img { border-radius:var(--r-card); border:1px solid var(--line); }
@media (max-width:899px) {
  .tr-calc-hero-in { grid-template-columns:1fr; gap:22px; }
  .tr-calc-hero-fig { display:none; }
  .tr-calc-hero h1 { font-size:29px; }
}
.tr-calc-page { padding-top:32px; padding-bottom:8px; }
.tr-calc-content { max-width:none; }
.tr-calc-content > p.tr-standfirst { max-width:72ch; }

.tr-calc { margin:26px 0; }
.tr-calc form { display:grid; grid-template-columns:1fr 1fr; gap:20px;
  align-items:start; }
.tr-calc fieldset { border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px 20px 20px; margin:0; background:var(--surface); }
.tr-calc legend { font:700 11.5px/1.3 var(--sans); text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); padding:0 8px; }
.tr-calc label { display:block; margin:14px 0 0; font:500 13.5px/1.4 var(--sans);
  color:var(--ink-2); }
.tr-calc label:first-of-type { margin-top:4px; }
.tr-calc input,.tr-calc select { display:block; margin-top:6px; width:100%; max-width:100%;
  padding:10px 12px; font:400 15px/1.3 var(--sans); color:var(--ink);
  background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--r-ui); }
.tr-calc button[type=submit] { grid-column:1 / -1; justify-self:start;
  background:var(--brand); color:var(--bg); border:1px solid var(--brand);
  font:600 15px/1 var(--sans); padding:14px 26px; border-radius:var(--r-ui); cursor:pointer; }
.tr-calc button[type=submit]:hover { filter:brightness(1.12); }
@media (max-width:699px) { .tr-calc form { grid-template-columns:1fr; } }

#tr-calc-out { margin-top:28px; }
#tr-calc-out h2 { font:700 20px/1.25 var(--sans); margin:26px 0 14px; }
.tr-platform { border:1px solid var(--line); border-left:4px solid var(--muted);
  border-radius:var(--r-card); padding:18px 20px; margin:14px 0; background:var(--bg);
  font:400 15px/1.55 var(--sans); }
.tr-platform h3 { font:700 17px/1.3 var(--sans); margin:0 0 8px; }
/* THE DEFAULT USED TO BE --ok. Any result the renderer did not classify fell through to
   "published", so a vendor whose price could NOT be computed was painted in the same green
   as one whose price was read at source - the single distinction this whole site exists to
   make, rendered backwards. The default is now the neutral UNKNOWN token; green must be
   earned by an explicit `published` status. */
.tr-platform.tr-published { border-left-color:var(--ok); }
.tr-platform.tr-quote_gated,.tr-platform.tr-quote-gated {
  border:1px dashed var(--flag); border-left:4px solid var(--flag);
  background:var(--flag-soft); }
.tr-platform.tr-unknown,.tr-platform.tr-not_offered,.tr-platform.tr-not-offered {
  border-left-color:var(--muted); border-left-style:dotted; background:var(--surface); }
/* Reading measure on the RESULT PANELS. Uncapped, they ran 170-185 characters per line -
   worse than the 120,6ch this rebuild was benchmarked against correcting. */
.tr-platform p,.tr-platform li,.tr-shortlist p,.tr-shortlist li,
.tr-caveats p,.tr-caveats li,#tr-calc-out > p { max-width:74ch; }
/* The three-year totals are what the reader came for; they were set at 15px inside bullets. */
.tr-platform li { font-size:15.5px; }
.tr-platform li strong,.tr-platform b { font-variant-numeric:tabular-nums; }
.tr-src { font:400 12.5px/1.45 var(--sans); color:var(--muted); }
.tr-flag { color:var(--flag); font-weight:600; }
.tr-error { color:var(--flag); font-weight:700; }
.tr-calc table { border-collapse:collapse; width:100%; max-width:34rem; margin:10px 0;
  font:400 14.5px/1.4 var(--sans); }
.tr-calc th,.tr-calc td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); }
.tr-calc td { text-align:right; font-variant-numeric:tabular-nums; }
.tr-calc tr.tr-total { font-weight:700; }
.tr-calc tr.tr-total td,.tr-calc tr.tr-total th { border-top:2px solid var(--line-strong);
  border-bottom:0; }
.tr-shortlist,.tr-caveats { border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px 20px; margin:20px 0; background:var(--surface);
  font:400 14.5px/1.6 var(--sans); }
.tr-shortlist h2,.tr-caveats h2 { font:700 12.5px/1.3 var(--sans) !important;
  text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:0 0 10px !important; }
.tr-shortlist ul,.tr-caveats ul { padding-left:1.2em; }

/* ========================================================================
   10. FOOTER
   ===================================================================== */
.tr-footer { background:var(--surface); border-top:1px solid var(--line); margin-top:56px; }
.tr-footer-top { display:grid; grid-template-columns:340px 1fr; gap:48px; padding:44px 0 32px; }
.tr-footer-brand .tr-brand { font-size:18px; margin-bottom:10px; }
.tr-footer-brand p { font:400 14.5px/1.6 var(--serif); color:var(--ink-2); margin-bottom:18px; }
.tr-footer-cols { display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }
.tr-footer-col h2 { font:700 12px/1.3 var(--sans); text-transform:uppercase;
  letter-spacing:.06em; margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line-strong); }
.tr-footer-col h2 a { text-decoration:none; }
.tr-footer-col h2 a:hover { color:var(--brand); }
.tr-count { color:var(--muted); font-weight:600; }
.tr-footer-col ul { list-style:none; }
.tr-footer-col li { margin:0 0 8px; }
.tr-footer-col a { font:400 13px/1.4 var(--sans); color:var(--ink-2); text-decoration:none; }
.tr-footer-col a:hover { color:var(--brand); text-decoration:underline; }
.tr-footer-bottom { border-top:1px solid var(--line-strong); padding:24px 0 44px;
  display:grid; gap:14px; }
.tr-footer-note { font:400 13px/1.6 var(--sans); color:var(--muted); max-width:92ch; }
.tr-footer-note strong { color:var(--ink-2); }
.tr-footer-trust { display:flex; flex-wrap:wrap; gap:8px 22px; }
.tr-footer-trust a { font:600 13px/1.5 var(--sans); color:var(--ink-2); text-decoration:none; }
.tr-footer-trust a:hover { color:var(--brand); text-decoration:underline; }

/* A fact the owner has not supplied yet. Styled to look unfinished ON PURPOSE: the whole point
   is that it cannot be mistaken for a real value at a glance, and that anyone looking at a build
   asks why it is there. The public-build gate refuses to ship while one exists. */
.tr-gap { background:var(--flag-soft); border-bottom:2px dotted var(--flag); color:var(--ink);
  font:600 .92em/1.4 var(--sans); padding:1px 5px; border-radius:2px; }
.entry-content .tr-callout--gap { border-left-color:var(--flag); background:var(--flag-soft); }

/* A PENDING FACT IS NOT A GAP. .tr-gap above marks a value nobody has supplied, and it blocks
   the build. This marks one that genuinely does not exist yet — a registry inscription in
   progress — which is a legitimate thing for a legal page to say. It is deliberately quieter:
   the two must not read alike, or "we are waiting on the registry" and "somebody forgot to fill
   this in" look like the same defect to a reader, and only one of them is. */
.tr-pending { color:var(--muted); font-style:italic; }

.tr-footer-publisher { font:400 12.5px/1.6 var(--sans); color:var(--muted); margin-top:10px; }
.tr-footer-publisher a { color:var(--muted); }

/* THE PROMOTIONAL LINES IN THE CALCULATOR.
   These had no styling at all — .tr-promo appeared in the generated body and nowhere in this
   file. That was survivable while the offer was live and a paragraph beginning "if this applies
   to you" could read as ordinary body copy. It stops being survivable the moment the same slot
   has to say a rate has LAPSED: an unstyled paragraph three lines under a total is exactly where
   a reader's eye does not go, and the entire reason for keeping the lapsed figure on the page is
   that it must be impossible to mistake for the live one. */
.tr-promo { border-left:3px solid var(--brand); background:var(--brand-soft);
  padding:10px 14px; border-radius:var(--r-ui); margin-top:12px; }
.tr-promo strong { color:var(--brand); }
.tr-promo--lapsed { border-left:3px dashed var(--flag); background:var(--flag-soft); }
.tr-promo--lapsed strong { color:var(--flag); }
.tr-promo-terms { font:400 12.5px/1.5 var(--sans); color:var(--muted); margin-top:8px; }

.tr-footer-legal { font:400 12.5px/1.6 var(--sans); color:var(--muted); }
.tr-footer-local { display:block; margin-top:6px; color:var(--brand); font-weight:600; }
@media (max-width:1219px) {
  .tr-footer-top { grid-template-columns:1fr; gap:32px; }
  .tr-footer-cols { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:699px) {
  .tr-footer-cols { grid-template-columns:1fr; gap:20px; }
  .tr-footer-top { padding-top:32px; }
}

/* ========================================================================
   11. EDITORIAL BLOCKS INSIDE A BODY
   Tables, callouts and lists. Added 2026-08-09 with the `trades` cluster:
   the corpus renderer previously emitted paragraphs only, and a buying guide
   that answers a comparison question in prose alone is avoiding the question.
   Every one of these lives inside the 704px reading column and is measured for
   horizontal overflow at 390 by VG-OVERFLOW.
   ===================================================================== */
.entry-content .tr-tablewrap { margin:26px 0; }
.entry-content .tr-tablewrap figcaption {
  font:600 13px/1.45 var(--sans); color:var(--muted); margin:0 0 10px;
  text-transform:uppercase; letter-spacing:.045em; }
/* The scroll container is what stops a four-column price table dragging the
   whole page sideways on a phone. The table scrolls; the document does not. */
.tr-tablescroll { overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--bg); }
.tr-table { width:100%; border-collapse:collapse; font:400 15px/1.5 var(--sans);
  min-width:520px; }
.tr-table caption { text-align:left; font:600 13px/1.45 var(--sans); color:var(--muted);
  padding:12px 14px 0; text-transform:uppercase; letter-spacing:.045em; }
.tr-table th, .tr-table td { padding:11px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); }
.tr-table thead th { background:var(--surface); font-weight:700; color:var(--ink);
  border-bottom:1px solid var(--line-strong); position:sticky; top:0; }
.tr-table tbody th { font-weight:700; color:var(--ink); }
.tr-table tbody tr:last-child th, .tr-table tbody tr:last-child td { border-bottom:0; }
.tr-table tbody tr:nth-child(even) { background:var(--surface); }
.tr-tablefoot { font:400 14px/1.6 var(--sans); color:var(--muted); margin:10px 0 0; }
.tr-tablefoot strong { color:var(--ink-2); }

.entry-content .tr-callout { margin:26px 0; padding:18px 20px; border-radius:var(--r-card);
  border:1px solid var(--line); border-left:4px solid var(--line-strong);
  background:var(--surface); }
.entry-content .tr-callout p { font:400 16px/1.65 var(--serif); color:var(--ink-2); }
.entry-content .tr-callout p + p { margin-top:12px; }
.tr-callout-title { font:700 15px/1.4 var(--sans) !important; color:var(--ink) !important;
  margin:0 0 8px !important; }
.tr-callout--key { border-left-color:var(--brand); background:var(--brand-soft); }
.tr-callout--warn { border-left-color:var(--flag); background:var(--flag-soft); }

.entry-content ul.tr-list, .entry-content ol.tr-list { margin:22px 0; padding-left:1.35em; }
.entry-content ul.tr-list { list-style:disc; }
.entry-content ol.tr-list { list-style:decimal; }
.entry-content .tr-list li { font:400 17px/1.7 var(--serif); color:var(--ink-2);
  margin:0 0 12px; padding-left:.3em; }
.entry-content .tr-list li strong { color:var(--ink); }

/* An in-body cross-reference. Underlined, because a link that is only a colour
   is not a link for a reader who cannot see the colour. */
.tr-xref { color:var(--brand); text-decoration:underline; text-decoration-thickness:1px;
  font-weight:600; }
.tr-xref:hover { text-decoration-thickness:2px; }

/* ========================================================================
   12. THE FIT FINDER
   ===================================================================== */
.tr-fit { margin:26px 0; }
.tr-fit-form { display:grid; gap:14px; }
.tr-fit-q { border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--bg); padding:16px 18px; margin:0; }
.tr-fit-q legend { font:700 16.5px/1.4 var(--sans); color:var(--ink); padding:0 6px; }
/* `color:#fff` here was the one hard-coded colour in the theme, and it was invisible while
   the white palette was the default - white on the light navy is 2,24:1, which is not a
   near miss, it is unreadable. It only ever rendered that way for a visitor whose machine
   was set to dark, which is nobody who reviewed it. Now that the dark palette IS the
   palette it takes --bg like every other reversed label, at 8,30:1. Found by gate G16. */
.tr-fit-n { display:inline-block; min-width:22px; height:22px; line-height:22px;
  text-align:center; border-radius:50%; background:var(--brand); color:var(--bg);
  font:700 12px/22px var(--sans); margin-right:8px; }
.tr-fit-help { font:400 14px/1.55 var(--sans); color:var(--muted); margin:2px 0 12px; }
.tr-fit-opt { display:flex; gap:10px; align-items:flex-start; padding:9px 10px;
  border:1px solid var(--line); border-radius:var(--r-ui); margin-bottom:8px;
  cursor:pointer; font:400 15.5px/1.45 var(--sans); color:var(--ink-2);
  transition:border-color .12s ease, background .12s ease; }
.tr-fit-opt:hover { border-color:var(--brand); background:var(--brand-soft); }
.tr-fit-opt:last-child { margin-bottom:0; }
.tr-fit-opt input { margin-top:.22em; accent-color:var(--brand); }
.tr-fit-opt:has(input:checked) { border-color:var(--brand); background:var(--brand-soft);
  color:var(--ink); font-weight:600; }

.tr-fit-out { display:block; margin-top:20px; }
.tr-fit-waiting { font:400 15.5px/1.6 var(--sans); color:var(--muted);
  border:1px dashed var(--line-strong); border-radius:var(--r-card); padding:16px 18px; }
.tr-fit-waiting strong { color:var(--ink-2); }
.tr-fit-verdict { border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:var(--r-card); background:var(--brand-soft); padding:20px 22px; }
.tr-fit-verdict h3 { font:700 22px/1.28 var(--sans); color:var(--ink); margin:0 0 10px; }
.tr-fit-verdict p { font:400 16.5px/1.65 var(--serif); color:var(--ink-2); }
.tr-fit-verdict--construction-takeoff { border-left-color:var(--ok); background:var(--ok-soft); }
.tr-fit-verdict--both-split-stack { border-left-color:var(--flag); background:var(--flag-soft); }
.tr-fit-score { font:600 13.5px/1.5 var(--sans) !important; color:var(--muted) !important;
  margin-top:12px !important; }
.tr-fit-why { margin-top:18px; min-width:0; }
.tr-side { display:inline-block; padding:2px 8px; border-radius:var(--r-chip);
  font:700 11.5px/1.6 var(--sans); text-transform:uppercase; letter-spacing:.04em; }
.tr-side--service { background:var(--brand-soft); color:var(--brand); }
.tr-side--construction { background:var(--ok-soft); color:var(--ok); }
.tr-side--both { background:var(--surface-2); color:var(--ink-2); }
.tr-fit-table .is-dim { opacity:.42; }
.tr-fit-table .is-dim th, .tr-fit-table .is-dim td { font-style:italic; }
.tr-state { display:inline-block; padding:2px 8px; border-radius:var(--r-chip);
  font:700 11.5px/1.6 var(--sans); text-transform:uppercase; letter-spacing:.04em;
  margin-bottom:6px; }
.tr-state--pub { background:var(--ok-soft); color:var(--ok); }
.tr-state--gated { background:var(--flag-soft); color:var(--flag); }
.tr-state--unknown { background:var(--surface-2); color:var(--ink-2); }
.tr-pricelines { list-style:none; margin:0; padding:0; }
.tr-pricelines li { font:400 14px/1.5 var(--sans); color:var(--ink-2); margin:0 0 4px; }

.tr-own { margin:20px 0; }
.tr-own-table input[type=number], .tr-own-table input[type=text] {
  width:100%; min-width:88px; padding:7px 9px; border:1px solid var(--line-strong);
  border-radius:var(--r-ui); background:var(--bg); color:var(--ink);
  font:400 15px/1.4 var(--sans); font-variant-numeric:tabular-nums; }
.tr-own-table input:hover { border-color:var(--brand); }
.tr-own-total { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tr-own-total.is-empty { color:var(--muted); font-weight:400; }
.tr-own-note { font:400 14px/1.6 var(--sans); color:var(--muted); margin:10px 0 0; }
@media (max-width:699px) {
  .tr-fit-verdict h3 { font-size:19.5px; }
  .tr-own-table { min-width:560px; }
}

/* ---- the vertical band (front page) ---------------------------------- */
.tr-vertical { margin-top:44px; }
.tr-vertical-in { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface);
  padding:22px; }
.tr-vertical-fig { display:block; border-radius:var(--r-ui); overflow:hidden; }
.tr-vertical-fig img { width:100%; }
.tr-vertical-copy h3 { font:700 27px/1.22 var(--sans); margin:0 0 12px; }
.tr-vertical-copy h3 a { text-decoration:none; }
.tr-vertical-copy h3 a:hover { color:var(--brand); text-decoration:underline; }
.tr-vertical-copy p { font:400 16.5px/1.62 var(--serif); color:var(--ink-2); margin:0 0 16px; }
@media (max-width:899px) {
  .tr-vertical-in { grid-template-columns:1fr; gap:20px; }
  .tr-vertical-copy h3 { font-size:23px; }
}

/* ========================================================================
   14. AD SLOTS - DECLARED, NOT ACTIVE

   There is no ad tag, no publisher id, no script and no external host anywhere in this
   theme. These rules style a PLACEHOLDER that only renders when tr_ad_preview_ok() is
   true, which requires the four-condition local gate AND an explicit ?ad-preview=1.

   An off slot carries `hidden` and reserves nothing: a box that will never be filled
   reserving 250px does not prevent a layout shift, it puts a hole in the page. The
   reservation below is what a filled slot would own from first paint.
   ===================================================================== */
.tr-ad[hidden] { display:none; }
.tr-ad--preview { display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:var(--ad-h,250px); margin:30px 0; padding:14px; text-align:center;
  background:repeating-linear-gradient(135deg,var(--surface) 0 10px,var(--bg) 10px 20px);
  border:2px dashed var(--line-strong); border-radius:var(--r-card); }
.tr-ad-label { font:700 12px/1.4 var(--sans); text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); }
.tr-ad-note { font:400 13px/1.5 var(--sans); color:var(--muted); margin-top:6px; }
@media (max-width:699px) { .tr-ad--preview { min-height:var(--ad-h-m,250px); } }
.tr-sidebar .tr-ad--preview { margin:0 0 24px; }