/* Colours. This is the Full view (dark), the default. The Engineer view at the bottom of this file
   switches everything to black on white. */
:root{color-scheme:dark;--flame:linear-gradient(90deg,#2459E0 0%,#36C5F0 62%,#F2B705 100%);--enamel:#121B22;--surface:#1A2630;--tint-1:#1E2B35;--tint-2:#22313C;--tint-3:#22313C;--hover:#21303B;--ink:#E3E8EB;--on-ink:#121B22;--muted:#9AA8B1;--line:#2E3D49;--field-line:#6B7C88;--underline:#56666F;--placeholder:#84939C;--gas:#7EA6F4;--gas-fill:#2A63D4;--gas-fill-hover:#3A72E0;--gas-soft:#1C3155;--ring:rgba(126,166,244,.3);--band:#2B3B48;--band-text:#F2F4F5;--foot-bg:#1A2630;--foot-line:#2E3D49;--shadow:rgba(0,0,0,.6);--amber:#E6B866;--amber-soft:#382C15;--warn:#F29B9B;--warn-soft:#3B1E22;--ok:#7FCB94;--ok-soft:#163224;--cond:"Barlow Condensed","Arial Narrow","Roboto Condensed",Arial,sans-serif;--body:"Barlow","Helvetica Neue",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--enamel);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
img,svg{display:block;max-width:100%}
a{color:var(--gas);text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--gas);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;padding:10px 16px;background:var(--surface);color:var(--ink);z-index:10}
.skip:focus{left:12px;top:12px}
[hidden]{display:none !important}

/* Header and footer */
.site-head{background:var(--surface)}
.site-head::after{content:"";display:block;height:3px;background:var(--flame)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;min-height:64px;padding-top:10px;padding-bottom:10px}
.brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--cond);font-weight:700;font-size:1.45rem;line-height:1;color:var(--ink);text-decoration:none}
.brand-mark{width:22px;height:22px;fill:var(--gas)}
.head-end{display:flex;align-items:center;gap:22px}
.site-nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.site-nav a{font-family:var(--cond);font-weight:600;font-size:1.12rem;color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
.site-nav a:hover{color:var(--gas)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--gas)}
/* Full | Light | Dark switch, shown as layers | sun | moon. Light (sun) and Dark (moon) are both Engineer view. */
/* The switch is the same size in all three settings; only its colours change. */
.view-toggle{flex:none;display:inline-flex;align-items:stretch;gap:2px;padding:2px;border:2px solid var(--line);border-radius:999px;background:var(--enamel)}
.view-toggle button{display:inline-flex;align-items:center;justify-content:center;border:0;margin:0;border-radius:999px;background:transparent;color:var(--muted);font-family:var(--cond);font-weight:600;font-size:1.02rem;line-height:1;min-height:38px;padding:0 12px;cursor:pointer;white-space:nowrap}
.view-toggle .vt-icon{width:38px;padding:0}
.view-toggle button:hover{color:var(--ink)}
.view-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.view-toggle button:focus-visible{outline-offset:-3px}
.view-toggle svg{width:18px;height:18px;fill:currentColor;flex:none}
.vt-div{flex:none;width:2px;margin:8px 2px;background:var(--line)}
.site-foot{background:var(--foot-bg);border-top:1px solid var(--foot-line);padding:44px 0;margin-top:0}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
.site-foot p{font-size:.92rem;line-height:1.55;color:#C4CDD3;max-width:60ch}
.site-foot p+p{margin-top:10px}
.site-foot a{color:#fff}
.site-foot a:focus-visible{outline-color:#fff}

/* Shared type */
.h2{font-family:var(--cond);font-weight:700;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.1;color:var(--ink)}
.h3{font-family:var(--cond);font-weight:700;font-size:1.4rem;line-height:1.15;color:var(--ink)}
.page{padding:36px 0 64px}
.page-title{font-family:var(--cond);font-weight:700;font-size:clamp(2rem,4vw,2.8rem);line-height:1.05;color:var(--ink);margin-bottom:18px}
.lede{font-size:1.13rem;color:var(--muted);max-width:52ch}
.note{margin-top:18px;font-size:.95rem;color:var(--muted)}
.small{margin-top:14px;font-size:.9rem;color:var(--muted)}

/* Hero */
.hero{padding:64px 0 72px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.hero-title{font-family:var(--cond);font-weight:700;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.02;letter-spacing:-.01em;max-width:19ch}
.hero .lede{margin-top:20px}
.try{margin-top:14px;font-size:.95rem;color:var(--muted)}
.try a{color:var(--ink);text-decoration-color:var(--underline);text-underline-offset:3px}
.band-white{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0}
.make-row{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:22px;padding:0;list-style:none}
.make-row a{display:inline-flex;flex-direction:column;padding:10px 20px;border:1px solid var(--line);border-left:5px solid var(--gas);border-radius:6px;background:var(--enamel);color:var(--ink);font-family:var(--cond);font-weight:600;font-size:1.2rem;line-height:1.2;text-decoration:none}
.make-row a span{font-family:var(--body);font-weight:500;font-size:.82rem;color:var(--muted)}
.make-row a:hover{background:var(--gas-soft);border-color:var(--gas)}

/* Make colours. Each make's card on the home page, range box in the search and make filter button
   uses its own shade for the bar down the left, the highlight and the dot. A make that isn't listed
   here is grey (the first line). To add one: copy a line below and change the make name (as in "mk"
   in boiler.json) and the two colours: the first is the bar/text colour, the second the dark highlight. */
[class*="mk-"]{--gas:#97A3AE;--gas-soft:#27333D}
.mk-worcester{--gas:#4BA3E3;--gas-soft:#15304A}
.mk-baxi{--gas:#6B8CFF;--gas-soft:#18234A}
.mk-vaillant{--gas:#4CBB78;--gas-soft:#163626}
.mk-alpha{--gas:#F06464;--gas-soft:#381A1E}
.mk-glowworm{--gas:#F2913D;--gas-soft:#3A2516}
/* Worcester Bosch: the bar down the left is blue on top, a small grey slanted line, red underneath. The highlight stays blue (above). */
.make-row .mk-worcester a,.make-row .mk-worcester a:hover,.group.mk-worcester .group-card,.group.mk-worcester.is-match .group-card{border-left-color:transparent;background-image:linear-gradient(135deg,#4BA3E3 calc(50% - 1.5px),#B8C2CA calc(50% - 1.5px),#B8C2CA calc(50% + 1.5px),#E5483F calc(50% + 1.5px));background-size:5px 100%;background-repeat:no-repeat;background-origin:border-box;background-clip:border-box}

/* Search form */
.search-form{margin-top:32px}
.page .search-form{margin-top:0}
/* The search box outline is the flame gradient from under the header. */
.field{display:flex;border:2px solid transparent;border-radius:10px;overflow:hidden;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--flame) border-box}
.field:focus-within{box-shadow:0 0 0 4px var(--ring)}
.field input{flex:1;min-width:0;border:0;background:transparent;outline:none;-webkit-appearance:none;appearance:none;font-family:var(--body);font-weight:500;font-size:1.15rem;line-height:1.2;color:var(--ink);padding:16px 18px}
.field input::placeholder{color:var(--placeholder);opacity:1}
.field button{border:0;background:var(--gas-fill);color:#fff;font-family:var(--cond);font-weight:600;font-size:1.2rem;line-height:1;padding:0 28px;cursor:pointer}
.field button:hover{background:var(--gas-fill-hover)}
.field button:focus-visible{outline:3px solid #fff;outline-offset:-7px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-family:var(--cond);font-weight:600;font-size:1.02rem;line-height:1.2;color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--gas)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.chip[class*="mk-"]{display:inline-flex;align-items:center;gap:8px}
.chip[class*="mk-"]::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gas);flex:none}
.chip[class*="mk-"][aria-pressed="true"]{background:var(--gas-soft);border-color:var(--gas);color:var(--ink);box-shadow:inset 0 0 0 1px var(--gas)}
.count{margin-top:18px;font-size:.95rem;color:var(--muted)}

/* Results */
.results{list-style:none;padding:0;margin-top:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.group{display:flex}
.group-card{flex:1;padding:14px 16px 0;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--gas);border-radius:8px;overflow:hidden}
.group.is-match .group-card{border-color:var(--gas)}
.result-make{display:block;font-family:var(--cond);font-weight:600;font-size:.95rem;line-height:1.2;color:var(--gas)}
.result-range{display:block;margin-top:2px;font-family:var(--cond);font-weight:700;font-size:1.28rem;line-height:1.15}
.variants{list-style:none;padding:0;margin:10px -16px 0}
.variant{border-top:1px solid var(--line)}
.variant-link{display:block;padding:10px 16px;color:var(--ink);text-decoration:none}
.variant-link:hover{background:var(--hover)}
.variant-link:hover .variant-name{color:var(--gas)}
.variant.is-match .variant-link{background:var(--gas-soft)}
.variant-top{display:flex;align-items:center;gap:8px}
.variant-name{flex:1;min-width:0;font-family:var(--cond);font-weight:600;font-size:1.15rem;line-height:1.2}
.fuel{padding:2px 7px;border-radius:4px;background:var(--gas-soft);color:var(--gas);font-size:.75rem;font-weight:600;line-height:1.3;white-space:nowrap}
.variant.is-match .fuel{background:var(--surface)}
.fuels{display:inline-flex;gap:4px}
.fuel.fuel-ng,.variant.is-match .fuel.fuel-ng{background:#d4a017;color:#1f2937}
.fuel.fuel-lpg,.variant.is-match .fuel.fuel-lpg{background:#b91c1c;color:#fff}
.variant-count{font-size:.85rem;color:var(--muted);white-space:nowrap}
.chev{flex:none;width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.result-meta{display:block;margin-top:4px;font-size:.88rem;line-height:1.35;color:var(--muted)}
.result-meta strong{color:var(--ink);font-weight:600}
.result-meta .nw{white-space:nowrap}
.flag{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:4px;background:var(--amber-soft);color:var(--amber);font-size:.78rem;font-weight:600}
.empty{margin-top:12px;padding:18px;background:var(--surface);border:1px dashed var(--line);border-radius:8px;font-size:.95rem;color:var(--muted)}
.empty p+p{margin-top:6px}
.empty strong{color:var(--ink)}

/* Homepage preview card */
.preview{width:100%;max-width:440px;justify-self:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 14px 30px -20px var(--shadow)}
.preview-head{padding:12px 18px;background:var(--band);color:var(--band-text);font-family:var(--cond);font-weight:600;font-size:1.15rem}
.preview-head::after{content:"";display:block;height:3px;margin:12px -18px -12px;background:var(--flame)}
.preview-list{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:1fr}
.preview-list li{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--line)}
.preview-list li:first-child{border-top:0}
.preview-list strong{display:block;font-family:var(--cond);font-weight:600;font-size:1.15rem;line-height:1.2}
.preview-list .ftag{width:56px;height:28px;font-size:.94rem}
.preview-list .ftag.ftag-split{font-size:.8rem}

/* Figure tags: a coloured box for each kind of figure (CO2 blue, CO and ratio orange, O2 teal,
   pressures purple, gas rate pink, GC number green). The Engineer view shows them as plain black boxes. */
.ftag{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:52px;height:24px;border-radius:5px;font-family:var(--cond);font-weight:700;font-size:.875rem;line-height:1;color:#0B1424;white-space:nowrap}
.ftag-co2{background:#6EA0FF}
.ftag-co{background:#FF8B3D}
.ftag-o2{background:#2FD0B0}
.ftag-mbar{background:#B08CFF}
.ftag-rate{background:#F48FC8}
.ftag-gc{background:#A5D867}
.ftag-ng{background:#d4a017;color:#1f2937}
.ftag-lpg{background:#b91c1c;color:#fff}
.ftag-plain{border:1.5px solid var(--underline);color:var(--muted)}
.ftag-blank{visibility:hidden}
.ftag-split{overflow:hidden}
.ftag-split>span{flex:1;align-self:stretch;display:flex;align-items:center;justify-content:center}
.fig-lab{display:flex;align-items:flex-start;gap:12px}
.fig-lab-t{flex:1;min-width:0}

/* Combustion figures table */
.figs-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.figs-table{width:100%;border-collapse:collapse}
.figs-table thead th{padding:10px 16px;background:var(--band);color:var(--band-text);font-family:var(--cond);font-weight:600;font-size:1.05rem;text-align:left;border:0}
.figs-table tbody th,.figs-table tbody td{padding:14px 16px;vertical-align:top;text-align:left;border:0;border-bottom:1px solid var(--line);background:var(--surface)}
.figs-table tbody tr:last-child th,.figs-table tbody tr:last-child td{border-bottom:0}
.figs-table tbody th{width:40%;font-family:var(--body);font-weight:600;font-size:1.02rem;line-height:1.35;color:var(--ink)}
.fig-val{font-family:var(--body);font-weight:600;font-size:1.22rem;line-height:1.35;color:var(--ink);font-variant-numeric:tabular-nums}
.fig-note{display:block;margin-top:4px;font-weight:400;font-size:.88rem;line-height:1.4;color:var(--muted)}
.fig-na{font-size:.95rem;color:var(--muted)}
.fig-todo{font-size:.92rem;font-weight:600;line-height:1.35;color:var(--amber)}
.figs-src{padding:10px 16px;border-top:1px solid var(--line);background:var(--tint-1);font-size:.85rem;color:var(--muted)}

/* Boiler page */
.boiler{max-width:980px}
.crumb{margin-bottom:16px;font-family:var(--cond);font-weight:600;font-size:1.08rem}
.crumb a{text-decoration:none}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:4px 10px;border-radius:4px;background:var(--gas-soft);color:var(--gas);font-family:var(--cond);font-weight:600;font-size:.95rem;line-height:1.2}
.tag-ok{background:var(--ok-soft);color:var(--ok)}
.tag-part{background:var(--amber-soft);color:var(--amber)}
.boiler-title{margin-top:12px;font-family:var(--cond);font-weight:700;font-size:clamp(2rem,4.5vw,3rem);line-height:1.04}
.boiler-type{margin-top:6px;color:var(--muted)}
.match{margin-top:16px;padding:10px 14px;border-radius:6px;background:var(--gas-soft);font-size:.98rem}
.gaps{margin-top:16px;padding:12px 16px;border-left:4px solid var(--amber);background:var(--amber-soft);font-size:.95rem}
.gaps ul{margin-top:6px;padding-left:20px}
.gaps li{margin-top:3px}
.boiler .h2{margin-top:40px;margin-bottom:14px}
.rates{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rate{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.steps{list-style:none;counter-reset:st;margin-top:10px;padding:0}
.steps>li{counter-increment:st;position:relative;padding:11px 0 11px 46px;border-top:1px solid var(--line)}
.steps>li::before{content:counter(st);position:absolute;left:0;top:9px;width:32px;height:32px;border-radius:50%;background:var(--gas-fill);color:#fff;font-family:var(--cond);font-weight:700;font-size:1.05rem;line-height:32px;text-align:center}
.steps b,.notes b,.exit b{font-weight:600}
.exit{margin-top:16px;padding:12px 16px;border-radius:6px;background:var(--tint-3)}
.exit strong{font-family:var(--cond);font-weight:700;font-size:1.1rem}
.exit ul,.notes{margin-top:6px;padding-left:20px}
.exit li,.notes li{margin-top:6px}
.notes{max-width:75ch}
.todo-box{margin-top:12px;padding:12px 16px;border-left:4px solid var(--amber);background:var(--amber-soft);font-size:.95rem}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
th{font-family:var(--cond);font-weight:600;font-size:1rem;background:var(--tint-2)}
td.gc{font-variant-numeric:tabular-nums;white-space:nowrap}
tr.hit td{background:var(--gas-soft);font-weight:600}
.source{margin-top:32px;padding-top:14px;border-top:1px solid var(--line);font-size:.92rem;color:var(--muted)}
.source p+p{margin-top:6px}
.source strong{color:var(--ink);font-weight:600}
.verify{margin-top:18px;padding:12px 16px;border-left:4px solid var(--warn);background:var(--warn-soft);font-size:.92rem}

/* Text pages and forms */
.prose{max-width:760px}
.prose .h2{margin-top:32px;margin-bottom:8px}
.prose p+p{margin-top:12px}
.contact-form{margin-top:24px;display:grid;gap:6px;max-width:560px}
.contact-form label{font-family:var(--cond);font-weight:600;font-size:1.08rem;margin-top:10px}
.contact-form input,.contact-form textarea{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:8px;background:var(--surface);font-family:var(--body);font-size:1.02rem;color:var(--ink)}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--gas);outline:none;box-shadow:0 0 0 4px var(--ring)}
.contact-form button{justify-self:start;margin-top:16px;padding:14px 26px;border:0;border-radius:8px;background:var(--gas-fill);color:#fff;font-family:var(--cond);font-weight:600;font-size:1.2rem;cursor:pointer}
.contact-form button:hover{background:var(--gas-fill-hover)}
.about-boiler{padding:10px 14px;border-radius:6px;background:var(--gas-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{margin-top:18px;padding:14px 16px;border-radius:6px}
.notice p+p{margin-top:8px}
.notice-ok{background:var(--ok-soft);border-left:4px solid var(--ok)}
.notice-err{background:var(--warn-soft);border-left:4px solid var(--warn)}

@media (max-width:880px){
.hero{padding:40px 0 52px}
.hero-grid,.foot-grid,.rates{grid-template-columns:1fr;gap:28px}
.hero-grid{gap:40px}
}
@media (max-width:560px){
body{font-size:16px}
.field{flex-direction:column}
.field button{padding:14px 20px}
.figs-table thead{display:none}
.figs-table tbody tr{display:grid;grid-template-columns:1fr;gap:6px;padding:14px 16px;border-bottom:1px solid var(--line)}
.figs-two tbody tr{grid-template-columns:1fr 1fr;column-gap:16px}
.figs-table tbody tr:last-child{border-bottom:0}
.figs-table tbody th,.figs-table tbody td{display:block;width:auto;padding:0;border:0}
.figs-table tbody th{grid-column:1/-1}
.figs-two td::before{content:attr(data-label);display:block;font-size:.78rem;font-weight:600;color:var(--muted)}
.site-nav{gap:4px 16px}
.head-end{gap:16px}
/* Phones: the layers | sun | moon switch sits on the same line as the site name, menu links underneath */
.head-row{gap:10px 12px}
.head-end{display:contents}
.brand{order:1}
.view-toggle{order:2}
.site-nav{order:3;flex:1 0 100%}
.view-toggle button,:root[data-view="engineer"] .view-toggle button{min-height:36px}
.view-toggle .vt-icon,:root[data-view="engineer"] .view-toggle .vt-icon{width:36px}
}

/* ===================================================================================================
   ENGINEER VIEW
   Picked with the Full | Light | Dark buttons in the header. Light and Dark are both Engineer view:
   bold text, thick borders, no colour and no decoration.
     Light = black on white, best outdoors or in a bright room.
     Dark  = white on true black with yellow for whatever is picked, best in a loft or at night.
   Both use the same rules below. The only difference is the handful of colours in the next two
   lines (--e-fg is the text and borders, --e-bg the background, --e-on the "picked" colour).
   Everything below only applies while Engineer is picked. To hide something else in Engineer view,
   add its class to the "Hidden in Engineer view" list.
   =================================================================================================== */
:root[data-view="engineer"]{--e-fg:#000;--e-bg:#fff;--e-hover:#ececec;--e-fill-hover:#333;--e-placeholder:#4a4a4a;--e-ring:rgba(0,0,0,.3);--e-on:#000;--e-on-text:#fff;--e-band:#000;--e-band-text:#fff}
:root[data-view="engineer"][data-shade="dark"]{color-scheme:dark !important;--e-fg:#fff;--e-bg:#000;--e-hover:#222;--e-fill-hover:#e6c000;--e-placeholder:#b5b5b5;--e-ring:rgba(255,212,0,.4);--e-on:#FFD400;--e-on-text:#000;--e-band:#262626;--e-band-text:#fff}
:root[data-view="engineer"]{color-scheme:light;--flame:var(--e-on);--enamel:var(--e-bg);--surface:var(--e-bg);--tint-1:var(--e-bg);--tint-2:var(--e-bg);--tint-3:var(--e-bg);--hover:var(--e-hover);--ink:var(--e-fg);--on-ink:var(--e-bg);--muted:var(--e-fg);--line:var(--e-fg);--field-line:var(--e-fg);--underline:var(--e-fg);--placeholder:var(--e-placeholder);--gas:var(--e-fg);--gas-fill:var(--e-on);--gas-fill-hover:var(--e-fill-hover);--gas-soft:var(--e-bg);--ring:var(--e-ring);--band:var(--e-band);--band-text:var(--e-band-text);--foot-bg:var(--e-bg);--foot-line:var(--e-fg);--shadow:transparent;--amber:var(--e-fg);--amber-soft:var(--e-bg);--warn:var(--e-fg);--warn-soft:var(--e-bg);--ok:var(--e-fg);--ok-soft:var(--e-bg)}
:root[data-view="engineer"] [class*="mk-"]{--gas:var(--e-fg);--gas-soft:var(--e-bg)}
:root[data-view="engineer"] .chip[class*="mk-"]::before{display:none}
:root[data-view="engineer"] .make-row .mk-worcester a,:root[data-view="engineer"] .make-row .mk-worcester a:hover,:root[data-view="engineer"] .group.mk-worcester .group-card,:root[data-view="engineer"] .group.mk-worcester.is-match .group-card{border-left-color:var(--gas);background-image:none}
:root[data-view="engineer"] .chip[class*="mk-"][aria-pressed="true"],:root[data-view="engineer"] .chip[aria-pressed="true"]{background:var(--e-on);border-color:var(--e-on);color:var(--e-on-text);box-shadow:none}
:root[data-view="engineer"] .boiler[data-fuel]{--fuel:var(--e-fg)}
:root[data-view="engineer"] *,:root[data-view="engineer"] *::before{transition:none !important;animation:none !important;box-shadow:none !important}

/* Hidden in Engineer view */
:root[data-view="engineer"] .hero .lede,
:root[data-view="engineer"] .hero .try,
:root[data-view="engineer"] .preview,
:root[data-view="engineer"] .band-white .note{display:none}
/* The homepage headline is hidden from view but still read out by screen readers and search engines. */
:root[data-view="engineer"] .hero-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Shown only in Engineer view (e.g. the Keep screen on button on boiler pages) */
.eng-only{display:none !important}
:root[data-view="engineer"] .eng-only{display:flex !important}

/* Type: bigger and heavier everywhere */
:root[data-view="engineer"] body{font-size:18px;font-weight:500;-webkit-font-smoothing:auto}
:root[data-view="engineer"] a{color:var(--e-fg);text-decoration-thickness:2px}
:root[data-view="engineer"] a:focus-visible,:root[data-view="engineer"] button:focus-visible,:root[data-view="engineer"] input:focus-visible,:root[data-view="engineer"] textarea:focus-visible,:root[data-view="engineer"] summary:focus-visible{outline:4px solid var(--e-fg);outline-offset:2px}
:root[data-view="engineer"] .page-title,:root[data-view="engineer"] .boiler-title{font-weight:700}
:root[data-view="engineer"] .h2{border-bottom:3px solid var(--e-fg);padding-bottom:4px}
:root[data-view="engineer"] .lede{font-size:1.1rem;font-weight:500}
:root[data-view="engineer"] .note,:root[data-view="engineer"] .small,:root[data-view="engineer"] .count,:root[data-view="engineer"] .boiler-type{font-size:1rem;font-weight:600}

/* Header and footer */
/* The header (site name, menu links and switch) stays the same size in all three settings so nothing jumps
   when you switch. Only its colours change. */
:root[data-view="engineer"] .view-toggle{border-color:var(--e-fg)}
:root[data-view="engineer"] .view-toggle button{color:var(--e-fg)}
:root[data-view="engineer"] .view-toggle button[aria-pressed="true"]{background:var(--e-on);color:var(--e-on-text)}
:root[data-view="engineer"] .vt-div{width:2px;background:var(--e-fg);opacity:.4}
:root[data-view="engineer"] .site-foot{border-top:4px solid var(--e-fg);padding:32px 0}
:root[data-view="engineer"] .site-foot p{color:var(--e-fg);font-size:1rem;font-weight:500}
:root[data-view="engineer"] .site-foot a{color:var(--e-fg)}
:root[data-view="engineer"] .site-foot a:focus-visible{outline-color:var(--e-fg)}

/* Homepage */
:root[data-view="engineer"] .hero{padding:24px 0 32px}
:root[data-view="engineer"] .hero-grid{grid-template-columns:1fr}
:root[data-view="engineer"] .hero .search-form{margin-top:0;max-width:720px}
:root[data-view="engineer"] .band-white{border-top:3px solid var(--e-fg);border-bottom:0;padding:32px 0}
:root[data-view="engineer"] .make-row a{border:2px solid var(--e-fg);border-left-width:8px;font-weight:700}
:root[data-view="engineer"] .make-row a span{color:var(--e-fg);font-weight:600;font-size:.9rem}
:root[data-view="engineer"] .make-row a:hover{background:var(--e-hover)}

/* Search box, filters and results */
:root[data-view="engineer"] .field{border:3px solid var(--e-fg);background:var(--e-bg)}
:root[data-view="engineer"] .field input{font-size:1.2rem;font-weight:600}
:root[data-view="engineer"] .field button{background:var(--e-on);color:var(--e-on-text);font-weight:700;font-size:1.25rem}
:root[data-view="engineer"] .field button:hover{background:var(--e-fill-hover)}
:root[data-view="engineer"] .field button:focus-visible{outline-color:var(--e-on-text)}
:root[data-view="engineer"] .chip{border:2px solid var(--e-fg);font-weight:700;font-size:1.08rem;padding:9px 16px}
:root[data-view="engineer"] .group-card{border:2px solid var(--e-fg);border-left-width:8px}
:root[data-view="engineer"] .result-make{font-weight:700;color:var(--e-fg)}
:root[data-view="engineer"] .variant{border-top-width:2px}
:root[data-view="engineer"] .variant-name,:root[data-view="engineer"] .version-name{font-weight:700}
:root[data-view="engineer"] .variant-count,:root[data-view="engineer"] .result-meta,:root[data-view="engineer"] .version-mi,:root[data-view="engineer"] .versions-hint{font-size:.95rem;font-weight:600;color:var(--e-fg)}
:root[data-view="engineer"] .variant.is-match .variant-link,:root[data-view="engineer"] .version.is-match .version-link{box-shadow:inset 8px 0 0 var(--e-fg) !important;background:var(--e-bg)}
:root[data-view="engineer"] .chev{stroke:var(--e-fg);stroke-width:3}
:root[data-view="engineer"] .flag{border:2px solid var(--e-fg);font-weight:700;font-size:.85rem}
:root[data-view="engineer"] .empty{border:2px dashed var(--e-fg);color:var(--e-fg);font-weight:500}

/* Gas type badges: NG solid black, LPG outlined, so they differ without colour */
:root[data-view="engineer"] .fuel,:root[data-view="engineer"] .gas-tag{border:2px solid var(--e-fg);border-radius:4px;font-weight:800}
:root[data-view="engineer"] .fuel.fuel-ng,:root[data-view="engineer"] .variant.is-match .fuel.fuel-ng,:root[data-view="engineer"] .gas-tag-ng{background:var(--e-fg);color:var(--e-bg)}
:root[data-view="engineer"] .fuel.fuel-lpg,:root[data-view="engineer"] .variant.is-match .fuel.fuel-lpg,:root[data-view="engineer"] .gas-tag-lpg,:root[data-view="engineer"] .fuel{background:var(--e-bg);color:var(--e-fg)}

/* Figure tags (CO2, CO, O2 ...) as plain black outlined boxes */
:root[data-view="engineer"] .ftag{background:var(--e-bg);color:var(--e-fg);border:2px solid var(--e-fg);font-weight:800}
:root[data-view="engineer"] .ftag-blank{visibility:hidden}

/* Boiler page */
:root[data-view="engineer"] .crumb{font-weight:700}
:root[data-view="engineer"] .tag{border:2px solid var(--e-fg);font-weight:700}
:root[data-view="engineer"] .match,:root[data-view="engineer"] .about-boiler{border:2px solid var(--e-fg);font-weight:500}
:root[data-view="engineer"] .gaps,:root[data-view="engineer"] .todo-box{border:2px solid var(--e-fg);border-left-width:8px;font-weight:500}
:root[data-view="engineer"] .verify{border:3px solid var(--e-fg);border-left-width:8px;font-weight:600;font-size:1rem}
:root[data-view="engineer"] .source{border-top:3px solid var(--e-fg);font-size:1rem;color:var(--e-fg)}
:root[data-view="engineer"] .boiler .tabs{border-bottom:3px solid var(--e-fg);gap:6px}
:root[data-view="engineer"] .boiler .tabs button{opacity:1;font-weight:700;font-size:1.05rem;border:2px solid var(--e-fg);border-bottom:0;border-radius:8px 8px 0 0;margin-bottom:0;min-height:48px}
:root[data-view="engineer"] .boiler .tabs button[aria-selected="true"]{background:var(--e-on);border-color:var(--e-on);color:var(--e-on-text)}
:root[data-view="engineer"] .fuel-btns{border-width:3px}
:root[data-view="engineer"] .fuel-btns button{font-weight:700;min-height:48px}
:root[data-view="engineer"] .fuel-btns button[aria-pressed="true"]{background:var(--e-on);color:var(--e-on-text)}
:root[data-view="engineer"] .boiler[data-fuel] .figs-card{border-top-width:3px}
:root[data-view="engineer"] .figs-card,:root[data-view="engineer"] .table-wrap,:root[data-view="engineer"] .rate{border:3px solid var(--e-fg)}
:root[data-view="engineer"] .figs-table thead th{font-weight:700;font-size:1.1rem}
:root[data-view="engineer"] .figs-table tbody th,:root[data-view="engineer"] .figs-table tbody td{border-bottom-width:2px}
:root[data-view="engineer"] .figs-table tbody th{font-weight:700;font-size:1.08rem}
:root[data-view="engineer"] .fig-val{font-weight:800;font-size:1.5rem}
:root[data-view="engineer"] .fig-note,:root[data-view="engineer"] .fig-na,:root[data-view="engineer"] .fig-todo,:root[data-view="engineer"] .figs-src{color:var(--e-fg);font-size:1rem;font-weight:600}
:root[data-view="engineer"] .figs-src{border-top-width:2px}
:root[data-view="engineer"] .boiler .fig-line dt{opacity:1;font-size:.9em;font-weight:700}
:root[data-view="engineer"] .boiler .fig-more summary{opacity:1;font-size:.95em;text-decoration:underline;text-decoration-thickness:2px}
:root[data-view="engineer"] .boiler .rates .h3{font-size:1.3rem;font-weight:700}
:root[data-view="engineer"] .exit,:root[data-view="engineer"] .boiler .adj-before{background:var(--e-bg);border:2px solid var(--e-fg);border-radius:8px}
:root[data-view="engineer"] .boiler .adj-before{border-left-width:8px}
:root[data-view="engineer"] th{background:var(--e-bg);font-weight:700;border-bottom:3px solid var(--e-fg)}
:root[data-view="engineer"] td{border-bottom:2px solid var(--e-fg)}
:root[data-view="engineer"] tr.hit td{background:var(--e-on);color:var(--e-on-text)}
:root[data-view="engineer"] tr.hit .gas-tag{background:var(--e-on-text);color:var(--e-on);border-color:var(--e-on-text)}

/* Boiler page: steps become a tick-off list. Tap a step to tick it; ticks clear when you leave the page. */
:root[data-view="engineer"] .boiler .hl-steps{list-style:none;counter-reset:hs;padding:0;margin:0;font-size:1.05rem;line-height:1.45}
:root[data-view="engineer"] .boiler .hl-steps li{counter-increment:hs;position:relative;min-height:58px;margin:8px 0 0;padding:13px 12px 13px 58px;border:2px solid var(--e-fg);border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
:root[data-view="engineer"] .boiler .hl-steps li:first-child{margin-top:0}
:root[data-view="engineer"] .boiler .hl-steps li::before{content:counter(hs);position:absolute;left:11px;top:11px;width:34px;height:34px;border:3px solid var(--e-fg);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;line-height:1}
:root[data-view="engineer"] .boiler .hl-steps li.done{border-style:dashed;text-decoration:line-through;text-decoration-thickness:2px}
:root[data-view="engineer"] .boiler .hl-steps li.done::before{content:"\2713";background:var(--e-on);border-color:var(--e-on);color:var(--e-on-text)}
:root[data-view="engineer"] .boiler .hl-steps a{position:relative;z-index:1}

/* Boiler page: Keep screen on / Clear ticks buttons */
.eng-tools{flex-wrap:wrap;gap:8px;margin:0 0 14px}
.eng-tools button{flex:1 1 160px;max-width:320px;min-height:48px;padding:10px 14px;border:3px solid var(--e-fg);border-radius:8px;background:var(--e-bg);color:var(--e-fg);font-family:var(--body);font-weight:700;font-size:1rem;cursor:pointer}
.eng-tools button[aria-pressed="true"]{background:var(--e-on);border-color:var(--e-on);color:var(--e-on-text)}

/* Text pages and contact form */
:root[data-view="engineer"] .contact-form label{font-weight:700}
:root[data-view="engineer"] .contact-form input,:root[data-view="engineer"] .contact-form textarea{border:3px solid var(--e-fg);font-weight:500}
:root[data-view="engineer"] .contact-form input:focus,:root[data-view="engineer"] .contact-form textarea:focus{border-color:var(--e-fg);outline:3px solid var(--e-fg);outline-offset:2px}
:root[data-view="engineer"] .contact-form button{background:var(--e-on);color:var(--e-on-text);font-weight:700}
:root[data-view="engineer"] .contact-form button:hover{background:var(--e-fill-hover)}
:root[data-view="engineer"] .steps>li::before{color:var(--e-on-text)}
:root[data-view="engineer"] .notice{border:2px solid var(--e-fg);border-left-width:8px}

@media (max-width:560px){
:root[data-view="engineer"] body{font-size:17px}
:root[data-view="engineer"] .fig-val{font-size:1.4rem}
}
:root[data-view="engineer"] .field:focus-within{outline:4px solid var(--e-fg);outline-offset:2px}
:root[data-view="engineer"] .boiler[data-tab="figures"] #clear-ticks{display:none}
:root[data-view="engineer"] .figs-table thead th{background:var(--e-band);color:var(--e-band-text);border-bottom:0}
/* Narrowest phones: slightly smaller site name so the layers | sun | moon switch still fits beside it */
@media (max-width:380px){
.brand{font-size:1.3rem}
}