@font-face{font-family:Manrope;src:url(manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Inter;src:url(inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{font-family:Inter,system-ui,sans-serif;color:var(--paper);background:var(--ink);color-scheme:dark;--ink:#101313;--paper:#f7f8f5;--muted:#a5adaa;--line:#ffffff24;--brand-gold:#f2b01c;--gold:var(--brand-gold);--display:Manrope,Inter,system-ui,sans-serif;--bridge:#ffc455;--ends:#a1e2d2}
*{box-sizing:border-box}
body{margin:0;line-height:1.5;background:radial-gradient(ellipse at 50% 0%,#181c1b,transparent 540px)}
main.wrap{padding-bottom:28px}
[hidden]{display:none!important}
.wrap{width:min(100% - 32px,920px);margin-inline:auto}
.masthead{background:#111614;color:var(--paper)}
.brand{display:flex;align-items:center;gap:12px;min-height:72px}
.brand strong,.brand div span{display:block}
.brand div span{font-size:.77rem;color:var(--muted)}
.choices,.guide-actions{display:flex;gap:8px}



.intro{margin:24px 0 18px}
h1,h2,h3,p,figure,dl{margin:0}
h1{font-family:var(--display);font-size:clamp(2rem,6vw,3.3rem);letter-spacing:-.065em;line-height:1.1}
.intro p{margin-top:8px;color:var(--muted)}
.layout{display:grid;gap:14px;align-items:start}
.card{min-width:0;padding:17px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#222626,#1c2020);box-shadow:0 12px 26px #0002}
h2{font-family:var(--display);font-size:1.15rem;letter-spacing:-.025em;margin-bottom:10px}
h3,label{font-size:.9rem;font-weight:750}
label{display:block;margin-top:13px;margin-bottom:5px}
.entry{display:flex;align-items:center;border:1px solid #5b665f;background:#101313;border-radius:9px}
.entry:focus-within{outline:2px solid var(--gold);outline-offset:1px}
.entry input{flex:1;width:0;min-height:48px;padding:7px 10px;border:0;background:transparent;font:inherit;font-size:1.2rem;font-weight:700;color:inherit;font-variant-numeric:tabular-nums;outline:none}
.entry span{padding-right:12px;color:var(--muted);font-size:.85rem}
.hint,figcaption,dt,.note,details p{color:var(--muted);font-size:.82rem}
.entry+.hint{margin:5px 0 12px}
.choices{margin-top:8px}
button{font:inherit;min-height:46px;border:1px solid #5b665f;border-radius:9px;background:#101313;color:var(--paper);font-weight:750;padding:6px 9px;cursor:pointer}
.choices button,.guide-actions button{flex:1}
button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
button:disabled{opacity:.48;cursor:default}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.intro h1[tabindex="-1"]:focus,#toolkit-title[tabindex="-1"]:focus,main h2[tabindex="-1"]:focus{outline:none}
details{margin-top:14px;border-top:1px solid var(--line)}
summary{cursor:pointer;padding-block:12px;font-size:.9rem;font-weight:750}
summary span{float:right;color:var(--muted)}
details p{margin-bottom:4px}
.big{font-family:var(--display);color:var(--gold);font-size:2.65rem;line-height:1.15;letter-spacing:-.045em;font-weight:800;font-variant-numeric:tabular-nums}
.big small{font-size:1rem;color:var(--muted);letter-spacing:0}
figure{margin:13px 0;background:radial-gradient(circle,#ffffff20 1px,transparent 1.5px) 0 0 / 16px 16px #121615;border:1px solid var(--line);color:#fff;border-radius:12px;overflow:hidden}
canvas{display:block;width:100%;height:auto}
figcaption{color:var(--muted);padding:0 12px 9px}
.note{padding-top:8px;border-top:1px solid var(--line)}
.error{background:#ffc45518;color:#ffe3aa;padding:10px;border-radius:8px;margin:8px 0}
#marks{position:relative;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:10px 0 5px;text-align:center}
#marks::before{content:"";position:absolute;inset:27px 0 auto;height:12px;border-radius:6px;background:#ad6d4d}
#marks li{position:relative;min-width:0;padding:0 2px;color:var(--paper);font-size:.8rem}
#marks li::before{content:"";position:absolute;top:23px;left:calc(50% - 1px);width:2px;height:20px;background:var(--ends)}
#marks li.inner::before{background:var(--bridge)}
#marks strong{display:block;margin-top:27px;color:var(--paper);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#marks small{font-size:.75rem}
.dimensions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
dd{margin:0;font-weight:750}
.guide{margin-top:14px}
#guide-content{margin:12px 0;background:#111816;border-radius:10px;padding:12px;min-height:122px}
#guide-content h3{font-size:1.03rem;margin-bottom:5px}
#guide-content p{font-size:.9rem}
#guide-content p+p{margin-top:6px}
.primary{background:var(--gold);color:var(--ink);border-color:var(--paper)}
@media(min-width:720px){.layout{grid-template-columns: 1fr 1.2fr}.card{padding:22px}.guide{max-width:100%}}

.result{background:linear-gradient(145deg,#222626,#1c2020);border-color:#d9af5647}
#crossover .card{background:#1c2020}
#crossover .result{background:#1c2020}
#crossover figure{background-color:#111816}
.intro h1 span,summary::marker{color:var(--gold)}

@media (max-width:719px) {
  .wrap{width:calc(100% - 24px)}
  .brand{min-height:52px;gap:9px}


  .intro{margin:12px 0 10px}
  h1{font-size:clamp(1.65rem,7.4vw,2rem)}
  .intro p{margin-top:4px;font-size:.85rem}
  .layout{gap:8px}
  .card{padding:11px;border-radius:12px}
  h2{margin-bottom:4px;font-size:1rem}
  .measurement-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}
  .field{min-width:0}
  @supports (grid-template-rows:subgrid){
    .field{display:grid;grid-row:span 3;grid-template-rows:subgrid}
  }
  .field label{display:flex;align-items:end;margin-top:4px;font-size:.79rem;line-height:1.2}
  .entry input{min-height:44px;padding-inline:8px}
  .entry span{padding-right:7px}
  .entry+.hint{margin:4px 0 6px;font-size:.74rem;line-height:1.35}
  .choices{gap:5px;margin-top:5px}
  .choices button{min-width:0;min-height:44px;padding-inline:3px;font-size:.83rem}
  details{margin-top:6px}
  summary{min-height:44px;padding-block:10px}
  #marks small{display:block}
  figure{margin:7px 0}
  figcaption{padding:0 7px 5px;font-size:.72rem}
  .dimensions{gap:7px;margin-bottom:5px}
  .note{padding-top:5px}
  .guide{margin-top:8px}
}

#install-button{margin-left:auto;min-height:44px;padding:4px 8px;color:var(--gold);font-size:.76rem;line-height:1.2;white-space:nowrap}
#install-dialog{width:min(420px,calc(100% - 32px));max-height:calc(100% - 32px);padding:18px;color:var(--paper);background:#202524;border:1px solid #5b665f;border-radius:14px}
#install-dialog::backdrop{background:#101313bf}
#install-dialog ol{padding-left:22px;margin:10px 0 14px}
#install-dialog li+li{margin-top:5px}
#install-dialog p{font-size:.88rem}
.install-status{margin:12px 0;color:var(--ends)}
#install-dialog button{width:100%}

.rad-temperatures,.rad-results{display:grid;gap:8px}
.rad-temperatures{grid-template-columns:repeat(3,minmax(0,1fr))}
.rad-results{grid-template-columns:repeat(2,minmax(0,1fr));margin:8px 0}
.rad-results .big{font-size:clamp(1.3rem,5.5vw,2.3rem);overflow-wrap:anywhere}
.rad-results small{display:block}
#rad-unit{min-height:44px;padding:0 5px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--paper);font:inherit}
@media(max-width:719px){}
.room-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}
.room-fields select{width:100%;min-height:44px;padding:4px;border:1px solid #5b665f;border-radius:9px;background:#101313;color:var(--paper);font:inherit;font-size:.82rem}
.room-hint{margin-top:7px}
.rad-catalogue{margin:12px 0;padding-top:8px;border-top:1px solid var(--line)}
.rad-catalogue strong{display:block}
@media(max-width:719px){.room-fields label{font-size:.77rem;margin-top:8px}.room-fields>div:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:719px){
  #room-inputs>.room-fields{grid-template-columns:repeat(6,minmax(0,1fr))}
  #room-inputs>.room-fields>div{grid-column:span 3}
  #room-inputs>.room-fields>div:nth-child(-n+3){grid-column:span 2}
  #room-inputs>.room-fields label{display:flex;align-items:end;min-height:2.4em;line-height:1.2}
}

.heat-house{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:10px}
.heat-wide{grid-column:1/-1}
.heat-wide:empty{display:none}
#house-settings label{margin-top:0}
#house-settings button,.heat-actions,#add-surface{margin-top:8px}
#house-settings p{margin-top:5px}
.heat-heading{display:flex;align-items:center;gap:6px}
.heat-heading>h2,.heat-heading>strong{flex:1;min-width:0;overflow-wrap:anywhere}
.heat-heading button{flex:none}
#saved-rooms{list-style:none;padding:0;margin:8px 0}
#saved-rooms li{padding:8px 0;border-top:1px solid var(--line)}
#saved-rooms li>p{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
.heat-surface{min-width:0;margin:8px 0;padding:8px;border:1px solid var(--line);border-radius:8px}
.heat-surface legend{padding-inline:4px;font-size:.83rem;color:var(--muted)}
.heat-surface label{font-size:.77rem}
.heat-surface .entry{margin-top:3px}
.heat-surface button{margin-top:8px}
.heat-breakdown{display:grid;gap:5px;margin:8px 0}
.heat-breakdown>div{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.heat-breakdown dd{text-align:right}
.heat-subheading{margin-top:12px}
.heat-method{margin-top:10px}
@media(min-width:720px){.heat-layout{grid-template-columns:1fr 1.45fr}}
@media(max-width:719px){.heat-house{gap:8px}.heat-house .big{font-size:1.9rem}.heat-heading button{font-size:.78rem}}

.boiler-link{display:inline-flex;align-items:center;min-height:44px;color:var(--gold);font-size:.85rem}
.water-note{margin-top:9px;margin-bottom:9px}
@media(max-width:719px){



}

.gas-switch{max-width:440px;margin:0 0 10px}
.gas-section-result,.gas-scope,.gas-limit{margin-top:7px}
#gas-rate-result,#gas-pipe-result{margin-bottom:9px}
@media(max-width:719px){

}

.flow-timer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1fr);align-items:stretch;gap:6px;margin-top:9px}
.flow-timer button{min-height:50px;padding-inline:5px;font-size:.85rem}
#flow-clock{display:grid;place-items:center;min-height:50px;padding:3px 5px;border:1px solid color-mix(in srgb,var(--gold) 60%,var(--line));border-radius:9px;background:#101313;color:var(--gold);font:800 clamp(1.15rem,5.8vw,1.65rem)/1.1 var(--display);font-variant-numeric:tabular-nums;text-align:center;overflow-wrap:anywhere}
#flow-result{margin-bottom:9px}
@media(max-width:719px){



}

.measure-select{width:100%;min-height:44px;padding:4px;border:1px solid #5b665f;border-radius:9px;background:#101313;color:var(--paper);font:inherit}
#site-tools .result .note{margin-top:8px}
#fall-context:empty{display:none}
@media(max-width:719px){

}

/* Toolkit home and category navigation */
.brand-home{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand-home strong{font:800 clamp(1.25rem,5.5vw,1.55rem)/1 var(--display);letter-spacing:-.045em}
.brand-home strong b{color:var(--gold)}
.brand-home div span{margin-top:3px;font-size:.74rem}
.toolkit-nav{display:flex;align-items:center;flex-wrap:wrap;gap:3px 12px;margin-top:6px}
.toolkit-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold);font-size:.84rem;font-weight:700;text-decoration:none}
.toolkit-nav a+a{color:var(--muted)}
.toolkit-nav a+a::before{content:"/";margin-right:12px;color:#858c85}
.toolkit-nav a:hover,.toolkit-nav a:focus-visible{text-decoration:underline}
.toolkit-hero{position:relative;isolation:isolate;overflow:hidden;margin:16px 0 13px;padding:clamp(17px,4vw,34px);min-height:172px;display:flex;flex-direction:column;justify-content:center;border:1px solid #ffffff30;border-radius:16px;background:linear-gradient(90deg,#0d1111 0%,#181c1b 74%,#222626 100%);box-shadow:inset 0 1px #ffffff0b,0 8px 20px #0003}
.toolkit-hero h1{max-width:100%;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(2.25rem,10vw,4.9rem);font-weight:400;letter-spacing:-.05em;line-height:.98}
.toolkit-hero h1 span{display:inline;color:var(--gold);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:1.04em;letter-spacing:-.045em}
.toolkit-hero p{max-width:35ch;margin-top:10px;color:#d3dad4;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.95rem;line-height:1.45}
.toolkit-groups,.toolkit-links{display:grid;gap:9px;grid-template-columns:repeat(2,minmax(0,1fr))}
.toolkit-groups a,.toolkit-links a{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:13px 29px 13px 13px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,#252a29,#1c2020 85%);color:var(--paper);text-decoration:none;box-shadow:0 8px 18px #0002;transition:border-color .16s,background-color .16s}
.toolkit-groups a{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;min-height:64px;padding:10px 25px 10px 11px}
.toolkit-groups .toolkit-icon{margin:0}
.toolkit-links a{min-height:78px}
.toolkit-groups a:hover,.toolkit-links a:hover{border-color:var(--topic,var(--gold));background:#303735}
.toolkit-groups strong,.toolkit-links strong{font-family:var(--display);font-size:1.03rem;font-weight:800;line-height:1.2;letter-spacing:-.025em}
.toolkit-groups a>span:not([aria-hidden]),.toolkit-links a>span:not([aria-hidden]){margin-top:5px;color:var(--muted);font-size:.79rem;line-height:1.34}
.toolkit-arrow{position:absolute;top:50%;right:13px;width:7px;height:7px;border-top:1.5px solid #eab54c;border-right:1.5px solid #eab54c;transform:translateY(-50%) rotate(45deg)}
.toolkit-groups .toolkit-arrow{top:50%}
.toolkit-icon{display:block;width:36px;height:36px;padding:7px;color:#ffd16e;background:#f2b01c13;border:1px solid #f2b01c39;border-radius:10px}








#tool-category .intro{margin-top:8px}
#tool-category h1{font-size:clamp(2rem,7vw,4rem)}
.toolkit-result .note{margin-top:10px}
.toolkit-detail{margin-top:6px}
.toolkit-detail strong{color:var(--paper)}
.invert-table{width:100%;border-collapse:collapse;font-size:.84rem;font-variant-numeric:tabular-nums}
.invert-table :is(th,td){padding:6px;text-align:left;border-bottom:1px solid var(--line)}
@media(max-width:719px){
  .toolkit-hero{margin-top:12px;min-height:150px}
  .toolkit-links{grid-template-columns:1fr}
  .toolkit-links a{min-height:64px}
}
@media(max-width:719px) and (max-height:545px){
  .toolkit-hero{min-height:124px;margin-block:8px 9px;padding:12px 15px}
  .toolkit-hero p{margin-top:6px;font-size:.82rem}
  .toolkit-groups a{min-height:58px}
}
@media(min-width:720px){
  .toolkit-hero{min-height:215px}
  .toolkit-groups{grid-template-columns:repeat(4,minmax(0,1fr))}
  .toolkit-groups a{min-height:76px;padding:12px 26px 12px 13px}
}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
main.wrap{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
main.wrap:has(#toolkit:not([hidden])){padding-bottom:calc(62px + env(safe-area-inset-bottom))}
.dock{position:fixed;inset:auto 0 0;z-index:3;background:#131917f7;border-top:1px solid #ffffff24;padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(12px)}
.dock .wrap{max-width:460px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding-block:4px}
.dock a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:10px;color:var(--muted);font-size:.81rem;font-weight:700;text-decoration:none}
.dock a[aria-current]{background:#f2b01c15;color:#f2b01c}
.dock-icon{display:block;width:17px;height:17px;flex:none}
.shortcut-section{margin:13px 0 15px}
.shortcut-section h2{margin-bottom:5px}
.quick-links{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding:3px}
.quick-links a{display:inline-flex;flex:none;align-items:center;gap:5px;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:0 10px;color:var(--paper);font-size:.79rem;text-decoration:none;background:#1c2020}
.quick-links a:hover{border-color:var(--gold)}
.quick-links a span{color:var(--gold)}
#toolkit-favourite{margin-left:auto;min-height:44px;font-size:.78rem}
.search-entry{max-width:540px}
.search-entry input{font-size:1rem}
.search-message{margin:9px 0}
.job-create,.job-work{margin-top:12px}
.job-create-fields,.job-actions,.result-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.job-create-fields .entry{flex:1;min-width:130px}
.job-actions a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold);font-size:.85rem}
.job-results{margin:8px 0;padding:0;list-style:none}
.job-results pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:.82rem;margin:6px 0;color:var(--muted)}
.result-actions{margin-top:11px;padding-top:9px;border-top:1px solid var(--line)}
.result-actions button,.room-radiator{font-size:.79rem;min-height:44px}
.result-actions button{flex:1}
.room-radiator{margin-top:5px}
.toolkit-feedback{position:fixed;z-index:4;left:50%;bottom:calc(66px + env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 26px);padding:10px 13px;border:1px solid var(--gold);border-radius:9px;background:#1b221e;color:var(--paper);font-size:.87rem}
#copy-dialog{width:min(460px,calc(100% - 28px));border:1px solid var(--line);border-radius:13px;background:#1b221e;color:var(--paper);padding:15px}
#copy-dialog::backdrop{background:#000a}
#copy-text{display:block;width:100%;font:inherit;font-size:.9rem;margin:7px 0 12px;resize:vertical}
.measure-figure{margin:0;background:#151d18}
.measure-figure figcaption{padding:9px}
.measure-sketch{height:86px;position:relative;color:#dbe0d9;font-size:.67rem;margin:8px 11px}
.measure-sketch i,.measure-sketch b{position:absolute;display:block}
.measure-sketch span{position:absolute}
.measure-sketch span:nth-of-type(1){top:0;left:6%}
.measure-sketch span:nth-of-type(2){bottom:0;right:6%}
.sketch-head i{top:22px;left:12%;width:45%;height:34px;border:2px solid #a1e2d2;border-top:3px solid #a1e2d2;background:#a1e2d222}
.sketch-head b{top:54px;left:50%;width:38%;height:14px;border-bottom:2px solid #f2b01c;border-left:2px solid var(--gold)}
.sketch-head::after{content:"";position:absolute;top:22px;right:4%;height:45px;border-right:1px dashed var(--gold)}
.sketch-invert i{top:40px;left:10%;width:80%;height:14px;border-block:2px solid #a1e2d2;transform:skewY(7deg)}
.sketch-invert b{top:48px;left:10%;width:80%;border-bottom:1px dashed var(--gold);transform:skewY(7deg)}
.sketch-cut i{left:14%;right:14%;top:33px;height:16px;border-block:2px solid #a1e2d2}
.sketch-cut b{left:10%;right:10%;top:24px;height:34px;border-inline:9px double var(--gold)}
.sketch-cut span:nth-of-type(2){top:0;bottom:auto}
#heat-loss .intro a{color:var(--gold);margin-left:6px}

html{scroll-padding-bottom:calc(65px + env(safe-area-inset-bottom))}
.job-delete{margin-top:8px}
@media(max-width:719px){
  .shortcut-section{margin:7px 0 8px}
  .toolkit-groups .toolkit-arrow{right:9px}
}


.fault-steps h3{margin:14px 0 4px;font-size:.93rem;color:var(--gold)}
.fault-steps p{line-height:1.55}
.result-method{margin-top:16px}

.pipe-figure{display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:center;margin:14px 0}
.pipe-figure figcaption,.pipe-matches li{font-size:.88rem;line-height:1.5}
.pipe-od{width:56px;height:56px;border:4px double var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold)}
.pipe-od span{font-size:1.8rem;line-height:1}
.joint-sketch{position:relative;height:34px;display:grid;place-items:center;color:#d1a74d}
.joint-sketch::before{content:"";position:absolute;width:100%;height:9px;border-block:2px solid currentColor}
.joint-sketch i{position:relative;display:block;width:40px;height:25px;border:2px solid currentColor;background:#1b201e}
.joint-compression i{background:repeating-linear-gradient(90deg,#433821 0 7px,#ac873c 7px 9px);clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%)}
.joint-push i{border-radius:5px;border-inline-width:7px}
.joint-socket i{height:18px;border-radius:3px}
.joint-thread i{height:15px;background:repeating-linear-gradient(70deg,#1b201e 0 4px,#ac873c 4px 6px)}
.pipe-matches{padding-left:1.15rem}
.pipe-matches li+li{margin-top:10px}
#balance-form .heat-surface{margin-block:12px}
#balance-form textarea{width:100%;resize:vertical}

.investigation{padding:12px;border:1px solid color-mix(in srgb,var(--gold) 48%,var(--panel));border-radius:10px;background:color-mix(in srgb,var(--gold) 8%,var(--panel))}
.investigation h3{color:var(--gold)}
.investigation p+p{margin-top:6px}
.investigation-before{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:.85rem}
#investigation-notes{width:100%;resize:vertical}
#investigation-save .guide-actions{align-items:center;flex-wrap:wrap;margin-top:8px}
#flow.is-investigation .result-actions{display:none}
.water-test-figure{margin-top:8px}
.water-test-sketch{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:76px;margin-bottom:8px;text-align:center;color:var(--gold);font-size:.8rem;background:#151b18;border-radius:8px}
.water-test-sketch::before{content:"";position:absolute;left:10%;right:10%;bottom:13px;border-top:3px solid #a1e2d2}
.water-test-sketch span{position:relative;padding-top:5px}
.water-test-sketch span::after{content:"";position:absolute;bottom:14px;left:50%;width:17px;height:17px;border:2px solid currentColor;border-bottom-width:5px;transform:translateX(-50%)}
.water-test-sketch span:first-child::after{border-radius:50%}
.water-test-sketch span:last-child::after{border-radius:4px 4px 0 0}
#tap-static,#tap-running{color:var(--gold)}

.worked-figures{margin-block:8px 12px;padding:10px 12px;border-inline-start:2px solid #d1a74d;background:#121814;border-radius:5px;overflow-wrap:anywhere}
.worked-figures p{margin:0;color:#e4e8e4;font-size:.9rem;line-height:1.55;font-variant-numeric:tabular-nums}
.worked-figures p+p{margin-top:8px}
.result-method h3{margin-top:8px;color:var(--gold)}

.brand-mark{display:block;flex:none;width:64px;height:64px;object-fit:contain;border-radius:50%}
.result{box-shadow:inset 0 1px #ffe9ab13,0 12px 26px #0002}
.result .big{overflow-wrap:anywhere}
.method-jump{margin-top:8px;min-height:44px;padding-inline:0;border:0;border-radius:4px;background:transparent;color:var(--gold);font-size:.84rem;text-align:left}
.method-jump::after{content:" ↓";margin-left:4px}
.method-jump:hover{text-decoration:underline}
.result-method{scroll-margin-top:12px}
.result-method summary{color:#f7f8f5}
.search-entry input::-webkit-search-cancel-button{display:none}
#clear-search{margin:3px;min-height:40px;padding-inline:10px;background:#202923;font-size:.85rem}
.quick-links{flex-wrap:wrap}
@media(max-width:719px){
  .brand-mark{width:54px;height:54px}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:1rem}
  .entry input{font-size:1.1rem}
}
@media(prefers-reduced-motion:reduce){
  .toolkit-groups a,.toolkit-links a{transition:none}
}

@media(max-width:359px){
  .brand-mark{width:48px;height:48px}
}

/* Shared surfaces and navigation for the Field Guide. */
:root{
  --panel:#1c2020;
  --panel-border:#ffffff24;
  --brass:var(--gold);
}
.masthead{--gold:var(--brand-gold);--brass:var(--brand-gold);background:#181c1b}
.brand-mark{box-shadow:0 0 0 1px #ca9f555c}
#install-button{border-color:#5b665f;background:#1c2020;color:var(--brass)}
#install-button:hover{border-color:var(--brass)}
.toolkit-hero::after{
  content:"";position:absolute;pointer-events:none;z-index:-1;
  top:-91px;right:-43px;width:clamp(125px,30vw,300px);height:202px;
  border-left:1px solid #f2b01c30;border-bottom:1px solid #f2b01c30;
  border-bottom-left-radius:92px;
  box-shadow:-13px 13px 0 -12px #f2b01c24;
  transform:rotate(-9deg);
}
.toolkit-groups a,.toolkit-links a{
  border-color:var(--panel-border);background:linear-gradient(145deg,#222626,var(--panel));
  box-shadow:inset 0 1px #ffffff08,0 5px 12px #0002;
}
.toolkit-groups a{
  grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:8px;border-radius:14px;
}
.toolkit-groups .toolkit-icon{grid-row:1 / span 2}
.toolkit-icon,.dock-icon{fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.toolkit-groups a>span:not([aria-hidden]){
  margin-top:3px;font-size:.72rem;color:#b8c1ba;
}
.toolkit-arrow{border-color:var(--brass)}
.category-intro,#fault-finder > .intro{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  min-height:104px;padding-block:12px;
}
.topic-heading-art{
  position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);
  width:clamp(92px,29%,152px);height:auto;z-index:-1;pointer-events:none;
  color:var(--topic);opacity:.30;fill:none;stroke:currentColor;stroke-width:.7;
  stroke-linejoin:round;stroke-linecap:round;
  mask-image:linear-gradient(90deg,transparent,black 62%);
}
.category-intro h1,#fault-finder > .intro h1{overflow-wrap:anywhere}
.category-intro p,#fault-finder > .intro p{max-width:72%}
.toolkit-groups a:focus-visible,.toolkit-links a:focus-visible,.dock a:focus-visible{outline:2px solid var(--topic,var(--gold));outline-offset:2px}
.toolkit-groups a:active,.toolkit-links a:active{background:color-mix(in srgb,var(--topic,var(--gold)) 14%,var(--panel));border-color:var(--topic,var(--gold))}
.toolkit-groups a[href="#fault-finder"] .toolkit-icon{background:#f2b01c2a;border-color:#f2b01c72}
.toolkit-links a>span:not([aria-hidden]){color:#b8c1ba}
@media(min-width:900px){.toolkit-groups{grid-template-columns:repeat(4,minmax(0,1fr))}}
.toolkit-nav{padding-bottom:4px}
.toolkit-nav #toolkit-favourite{border-color:#5b665f}
.card{background:linear-gradient(150deg,#222626,#1c2020);border-color:var(--panel-border)}
.result,#crossover .result{
  background:radial-gradient(ellipse at 85% 0%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 70%),linear-gradient(155deg,#222626,#1c2020);
  border-color:#786440;
}
.result .big{color:var(--brass)}
.entry,select,.measure-select{border-color:#5b665f;background-color:#101313}
.entry:focus-within{outline-color:var(--brass)}
button.primary{border-color:var(--gold);background:var(--gold);color:#151914}
button.primary:hover{background:#ffc34a}
.result-actions button{border-color:#5b665f;background:#181c1b}
.result-actions button:hover{border-color:var(--brass)}
.result-method{border-color:#ffffff30}
.worked-figures{border-inline-start-color:var(--brass);background:#101313}
.dock{background:#181c1bf5;border-top-color:#ffffff30}
.dock a[aria-current]{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold);box-shadow:inset 0 1px color-mix(in srgb,var(--gold) 26%,transparent)}
@media(min-width:720px){
  .toolkit-hero{padding-inline:38px}
  .toolkit-groups a{column-gap:10px}
}
@media(max-width:359px){
  .toolkit-groups a{grid-template-columns:30px minmax(0,1fr);column-gap:5px;padding-inline:7px 13px}
  .toolkit-groups .toolkit-icon{width:30px;height:30px;padding:5px}
  .toolkit-groups .toolkit-arrow{right:6px}
  .toolkit-groups strong{font-size:.94rem}
  .toolkit-groups a>span:not([aria-hidden]){font-size:.68rem}
}
@media(max-width:719px){
  .toolkit-groups a{padding-block:7px}
}
@media(max-width:719px) and (max-height:565px){
  .toolkit-hero{min-height:132px;margin-block:9px 10px}
}
@media(max-width:359px) and (max-height:545px){
  .toolkit-hero{min-height:119px}
}

.renewable-result .hint+.hint{margin-top:6px}
.renewable-rooms:not(:empty){margin-top:12px;padding-top:4px;border-top:1px solid var(--line)}
.renewable-diagram{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:8px 0 12px}
.renewable-diagram span{position:relative;display:grid;place-items:center;text-align:center;min-height:52px;padding:5px;border:1px solid color-mix(in srgb,var(--gold) 44%,var(--panel));border-radius:6px;background:#101313;color:var(--gold);font-size:.75rem}
.renewable-diagram span:not(:last-child)::after{content:"";position:absolute;left:100%;width:21px;border-top:1px solid var(--gold)}
.renewable-loop span:nth-child(4){grid-column:2;min-height:32px;border-style:dashed}
.renewable-loop span:nth-child(3)::after{display:none}
.renewable-loop span:nth-child(4)::before,.renewable-loop span:nth-child(4)::after{content:"";position:absolute;top:50%;width:calc(50% + 20px);border-top:1px dashed #a5adaa}
.renewable-loop span:nth-child(4)::before{right:100%}
.renewable-loop span:nth-child(4)::after{left:100%}

.brand-actions{margin-left:auto;display:flex;gap:5px;align-items:center}
#update-button{min-height:44px;padding:4px 7px;font-size:.76rem;color:var(--gold)}
#update-dialog{width:min(420px,calc(100% - 32px));padding:18px;color:var(--paper);background:#202524;border:1px solid #5b665f;border-radius:14px}
#update-dialog::backdrop{background:#101313bf}
#update-dialog p{font-size:.88rem}
#update-dialog .guide-actions{margin-top:12px}
#update-dialog .app-version{margin-block:4px 12px}
.app-version strong{color:var(--brass);font-variant-numeric:tabular-nums}
.release-notes{margin-block:8px 12px;border-block:1px solid var(--line)}
.release-notes summary{min-height:44px;padding-block:10px;cursor:pointer;font-weight:700}
.release-notes ul{margin:0 0 12px;padding-inline-start:22px;font-size:.88rem}
.release-notes li+li{margin-top:6px}


.toolkit-groups a[href="#fault-finder"]{border-color:#f2b01c75;background:linear-gradient(110deg,#38301e,#1c2020)}
@media(min-width:720px) and (max-width:899px){.toolkit-groups{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:719px){
  .toolkit-groups{gap:7px}
  .toolkit-groups a{min-height:57px;padding-block:5px}
  .toolkit-hero{min-height:125px}
}
@media(max-width:359px){
  .brand-home{gap:6px}
  .brand-home strong{font-size:1.04rem}
  .brand-actions button{padding-inline:5px}
  .toolkit-hero{min-height:114px}
}

#report-notes{width:100%;resize:vertical}
#restore-file{max-width:100%}
#print-handover{display:none}
@media(max-width:719px){
  .toolkit-groups a{min-height:48px}
}
@media(max-width:719px) and (max-height:550px){
  .toolkit-hero{min-height:0;margin-block:7px;padding:8px 12px}
  .toolkit-hero h1{font-size:clamp(1.7rem,7.5vw,2.1rem)}
  .toolkit-hero p{margin-top:4px}
  .toolkit-groups a>span:not([aria-hidden]){display:none}
  .toolkit-groups a{grid-template-rows:auto}
  .toolkit-groups .toolkit-icon{grid-row:1}
}
@media print{
  body{background:#fff;color:#111}
  body>*{display:none!important}
  #print-handover{display:block!important}
  #print-handover pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}
}

/* Homepage topic colours and artwork. */
#toolkit-groups a{--topic:#B8C1CB;isolation:isolate;overflow:hidden;border-color:color-mix(in srgb,var(--topic) 36%,#262b30);background:linear-gradient(115deg,#202629 36%,color-mix(in srgb,var(--topic) 15%,#171C21));box-shadow:inset 2px 0 var(--topic),0 5px 12px #0002}
body[data-topic="pipework"],.tool-list-row[data-topic="pipework"],#toolkit-groups [href="#pipework"]{--topic:#F5C542}
body[data-topic="heating"],.tool-list-row[data-topic="heating"],#toolkit-groups [href="#heating"]{--topic:#FF9234}
body[data-topic="drainage"],.tool-list-row[data-topic="drainage"],#toolkit-groups [href="#drainage"]{--topic:#21D4BD}
body[data-topic="design-tools"],.tool-list-row[data-topic="design-tools"],#toolkit-groups [href="#design-tools"]{--topic:#9CA8FF}
body[data-topic="renewables"],.tool-list-row[data-topic="renewables"],#toolkit-groups [href="#renewables"]{--topic:#E96FDB}
body[data-topic="energy-tools"],.tool-list-row[data-topic="energy-tools"],#toolkit-groups [href="#energy-tools"]{--topic:#D1DD75}
body[data-topic="gas-tools"],.tool-list-row[data-topic="gas-tools"],#toolkit-groups [href="#gas-tools"]{--topic:#DE8FB3}
body[data-topic="fault-finder"],.tool-list-row[data-topic="fault-finder"],#toolkit-groups [href="#fault-finder"]{--topic:#F2F2EF}
#toolkit-groups .toolkit-icon{background:none;border-color:transparent;color:#F2F2EF}
#toolkit-groups strong{text-shadow:0 1px 4px #000}
#toolkit-groups .toolkit-arrow{border-color:var(--topic)}
#toolkit-groups a::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background:radial-gradient(circle at 90% 70%,color-mix(in srgb,var(--topic) 28%,transparent),transparent 66%);
}
.toolkit-hero::after{content:none}
.toolkit-hero h1,.toolkit-hero p{text-shadow:0 1px 8px #101313}
.toolkit-watermark{
  position:absolute;z-index:-1;right:-6px;bottom:-15px;width:88px;height:88px;
  color:var(--topic);fill:none;stroke:currentColor;stroke-width:.85;
  stroke-linecap:round;stroke-linejoin:round;opacity:.27;
  transform:rotate(-13deg);pointer-events:none;
  mask-image:linear-gradient(110deg,transparent 6%,black 48%);
}
.toolkit-hero{border-color:transparent;box-shadow:none;background:linear-gradient(90deg,#171c21 8%,#171c21f5 35%,#171c21ab 62%,#171c216b),url(field-guide-isolation-valve.jpg) right 42%/max(75%, 400px) auto no-repeat,#171c21}

/* Carry the homepage accent into category pages and their tools. */
body[data-topic]:not([data-topic=""]) {
  --gold:var(--topic);
  --brass:var(--topic);
}
body[data-topic]:not([data-topic=""]) main .intro h1,
body[data-topic]:not([data-topic=""]) main .intro h1 span {
  color:var(--topic);
}
body[data-topic]:not([data-topic=""]) .result {
  border-color:color-mix(in srgb,var(--topic) 47%,var(--panel));
}
body[data-topic]:not([data-topic=""]) main button.primary:hover {
  background:color-mix(in srgb,var(--topic) 80%,white);
}

.home-links{display:flex;justify-content:center;gap:9px;margin-top:8px}
.home-links a{display:grid;place-items:center;width:44px;height:44px;color:var(--paper);border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.home-links svg{width:26px;height:26px;fill:currentColor}
.home-links .home-website img{display:block;width:100%;height:100%;min-width:0;object-fit:cover;border-radius:inherit}
@media(max-width:719px) and (max-height:550px){
  #toolkit .toolkit-hero{margin-block:4px;padding-block:5px}
  #toolkit .toolkit-groups{gap:5px}
  .home-links{margin-top:5px}
}
/* Brand colours identify external destinations at a glance. */
.home-links a{
  border-radius:12px;box-shadow:inset 0 1px #ffffff19,0 3px 8px #0003;
  background:radial-gradient(ellipse at 22% 8%,#51462c,#211e1a 80%);
}
.home-links a svg,.home-links a img{position:relative}
.home-links .home-youtube{color:#ff4545;background:radial-gradient(ellipse at 22% 8%,#54252c,#251719 80%);border-color:#ff454550}
.home-links .home-tiktok{background:linear-gradient(145deg,#184348,#191c24 58%,#3a202e);border-color:#25f4ee45}
.home-links .home-instagram{background:linear-gradient(145deg,#583349,#38253e 58%,#242038);border-color:#e978a758}
.home-links a:hover{border-color:var(--gold)}
.home-links .home-tiktok svg{filter:drop-shadow(-1px 0 #25f4ee) drop-shadow(1px 0 #fe2c55)}
.home-amazon{
  display:flex;align-items:center;gap:12px;max-width:420px;margin:8px auto 0;padding:10px 12px;
  border:1px solid #fbb25560;border-radius:12px;background:linear-gradient(110deg,#342719,var(--panel));
  color:var(--paper);text-decoration:none;
}
.home-amazon:hover{border-color:#ffb347}
.home-amazon .shop-icon{flex:none;width:25px;height:25px;fill:none;stroke:#ffb347;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.home-amazon strong,.home-amazon span span,.home-amazon small{display:block}
.home-amazon strong{font-size:.88rem;color:#ffc36f}
.home-amazon span span{margin-top:2px;font-size:.77rem}
.home-amazon small{margin-top:3px;font-size:.7rem;line-height:1.25;color:var(--muted)}
@media(max-width:719px) and (max-height:500px){
  #toolkit:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:4px}
  #toolkit .toolkit-hero{grid-row:1;padding-inline:2px}
  #toolkit .toolkit-hero h1{font-size:clamp(1.2rem,6vw,1.7rem)}
  #toolkit .toolkit-hero p{display:none}
  #toolkit .toolkit-groups{grid-column:1/-1;grid-row:2}
  #toolkit .toolkit-groups a{min-height:44px}
  .home-links{grid-column:2;grid-row:1;gap:2px;margin:3px 0}
  .home-amazon{grid-column:1/-1;width:100%;padding:7px 10px}
  main.wrap:has(#toolkit:not([hidden])){padding-bottom:calc(57px + env(safe-area-inset-bottom))}
}
@media(max-width:719px) and (max-height:740px){
  #toolkit .toolkit-hero{min-height:76px;padding-block:9px}
  .home-amazon{line-height:1.24;padding-block:6px}
  #toolkit .toolkit-groups a{padding-block:4px}
}
@media(max-width:719px) and (max-height:500px){
  #toolkit .toolkit-hero{min-height:0;padding-block:5px}
  #toolkit .toolkit-hero h1{font-size:1.15rem;white-space:nowrap}
  .home-amazon{margin-top:5px;gap:7px;padding-block:5px}
  .home-amazon strong{font-size:.78rem}
  .home-amazon span span{font-size:.71rem}
  .home-amazon small{font-size:.67rem}
}
@media(max-width:719px) and (min-height:501px) and (max-height:740px){
  #toolkit:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px}
  #toolkit .toolkit-hero{grid-row:1;padding-inline:4px}
  #toolkit .toolkit-hero h1{font-size:clamp(1.5rem,6vw,2rem)}
  #toolkit .toolkit-hero p{font-size:.74rem}
  #toolkit .toolkit-groups{grid-column:1/-1;grid-row:2}
  .home-links{grid-column:2;grid-row:1;gap:3px;margin:0}
  .home-amazon{grid-column:1/-1;width:100%}
}

.saddle-settings{margin-top:12px}
.saddle-size{max-width:220px}
.saddle-pipe{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:12px 0 16px;text-align:center}
.saddle-pipe::before{content:"";position:absolute;top:24px;left:0;right:0;height:12px;border-radius:6px;background:#ad6d4d}
.saddle-pipe li{position:relative;display:grid;grid-template-rows:50px auto}
.saddle-pipe li::before{content:"";position:absolute;top:20px;left:calc(50% - 1px);height:20px;width:2px;background:#fff4dc}
.saddle-pipe small{font-size:.82rem;color:var(--paper)}
.saddle-pipe strong{font-size:.9rem;font-variant-numeric:tabular-nums}
.big.saddle-dimensions{font-size:1rem;letter-spacing:normal;margin-top:8px}
#saddle-workings p{margin-block:5px}

.saddle-size{margin-bottom:14px}

.toolkit-links .tool-list-row{padding-inline-start:58px}
.tool-list-diagram{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:34px;height:34px;fill:none;stroke:var(--topic,var(--brass));stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

main > section:not(#toolkit) > .intro h1{font-size:clamp(2rem,6vw,3.65rem);line-height:1.06;text-wrap:balance}
main .layout h2{font-size:clamp(1rem,3.5vw,1.25rem);letter-spacing:-.015em}
main figure:has(canvas),.pipework-schematic{margin-block:10px}
main figure, .renewable-diagram{border-color:color-mix(in srgb,var(--gold) 28%,var(--line))}
.tool-list-row .toolkit-arrow{border-color:var(--topic,var(--brass))}
.tool-list-row strong{overflow-wrap:anywhere}
.category-intro,.topic-heading-art{min-width:0}
.renewable-diagram{gap:12px;margin:8px 0 12px;padding:8px;border:1px solid;border-color:color-mix(in srgb,var(--gold) 28%,var(--line));border-radius:12px;background:#121615}
.renewable-diagram span{overflow-wrap:anywhere;line-height:1.25}
.renewable-diagram span:not(:last-child)::after{width:13px}
.renewable-loop span:nth-child(4)::before,.renewable-loop span:nth-child(4)::after{width:calc(50% + 12px)}
.pipework-schematic svg{display:block;width:100%;max-height:92px;padding:8px 14px 0}
.pipework-schematic path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.schematic-pipe{stroke:#ba7654;stroke-width:9}
.schematic-marks{stroke:var(--paper);stroke-width:2}
.cut-measure-guide{margin-top:12px}

@media(max-width:719px) and (max-height:680px){
  #toolkit:not([hidden]){display:block}
  #toolkit .toolkit-hero{min-height:67px;margin-block:6px;padding:6px 12px}
  #toolkit .toolkit-hero h1{font-size:clamp(1.55rem,7vw,1.9rem);white-space:normal}
  #toolkit .toolkit-hero p{display:none}
  #toolkit .toolkit-groups{gap:5px}
  #toolkit .toolkit-groups a{min-height:44px;padding-block:3px}
  #toolkit .toolkit-groups a>span:not([aria-hidden]){display:none}
  #toolkit .toolkit-groups .toolkit-icon{grid-row:1}
  #toolkit .home-links{gap:5px;margin-top:6px}
  #toolkit .home-amazon{margin-top:5px;padding-block:5px}
}

#saddle-angle-label{margin-top:10px}
#saddle-angles button{white-space:nowrap}

.draft-recovery{align-self:start;margin-top:8px;min-height:44px;color:var(--brass);font-size:.84rem}
.result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.result-actions button:last-child{border-color:color-mix(in srgb,var(--brass) 42%,var(--line));background:color-mix(in srgb,var(--brass) 8%,var(--panel))}
main .card.result .big{font-variant-numeric:tabular-nums;text-wrap:balance}
.renewable-result .big{font-size:clamp(1.5rem,5.5vw,2.4rem)}

.result-save-job{grid-column:1/-1;overflow-wrap:anywhere}
#saddle-end{min-width:0}
#backup-last-export{margin-block:5px 9px}
#backup-preview{margin-block:12px;overflow-wrap:anywhere}
#backup-preview-list{padding-inline-start:20px}
#backup-preview-list li{margin-block:5px}

.bender-setup{flex-wrap:wrap;margin-top:8px}
.bender-setup p{flex-basis:100%}
.bender-setup p:empty{display:none}
.job-photo-list{list-style:none;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.job-photo-list li{min-width:0}
.job-photo-list figure{margin:0 0 4px}
.job-photo-list img{display:block;width:100%;max-height:250px;object-fit:contain}
.job-photo-list button,#job-photo-form button{margin-top:6px}
#job-photo-file{max-width:100%}
#report-photos label{display:flex;align-items:center;gap:8px;min-height:44px}
#handover-preview{max-width:min(92vw,680px);max-height:88vh;overflow:auto;background:var(--panel);color:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px}
#handover-preview::backdrop{background:#000a}
#handover-preview pre,#print-handover pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
#handover-preview img,#print-handover img{display:block;max-width:100%;height:auto}
.water-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0;overflow-wrap:anywhere}
.water-comparison section{padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.water-comparison section p{margin-top:4px;font-size:.8rem}
.water-change{grid-column:1/-1;font-weight:700}
.display-setting{display:flex;align-items:center;gap:6px;min-height:44px}
.site-contrast{--paper:#fff;--muted:#f0f0eb;--line:#8c9490;--panel:#101313;--panel-border:#8c9490}
.site-contrast :is(.card,.entry,select,.toolkit-links a){background:#111513;border-color:#9ba29e}
.site-contrast :is(.hint,figcaption,.note,.toolkit-links a>span:not([aria-hidden])){color:#f0f0eb}
.cut-measure-guide svg,.pipe-bore-guide svg{display:block;width:100%;max-height:118px;padding:6px}
.cut-measure-guide text,.pipe-bore-guide text{fill:var(--paper);font:12px system-ui}
.cut-pipe{fill:none;stroke:#ba7654;stroke-width:12}
.cut-fittings{fill:none;stroke:var(--brass);stroke-width:2}
.cut-datum{fill:none;stroke:var(--paper);stroke-width:1;stroke-dasharray:4 3}
@media print{#print-handover figure{break-inside:avoid;background:none;color:#111;border:0}#print-handover figcaption{color:#111}}

/* Reading and touch controls for the working screens. */
.large-text{font-size:112.5%}
main label,main legend{line-height:1.35}
main input:not([type]),main input[type="text"],main textarea{
  width:100%;min-width:0;min-height:44px;border:1px solid #66716a;border-radius:9px;
  background:#101313;color:var(--paper);padding:8px;font:inherit;font-size:1rem;
}
main .entry input:not([type]),main .entry input[type="text"]{border:0}
main select,main .room-fields select,main .measure-select{font-size:1rem}
main input::placeholder,main textarea::placeholder{color:var(--muted);opacity:1}
main .card :is(.hint,.note,figcaption){font-size:.88rem;line-height:1.45}
main .card .note{margin-top:8px}
main .card .field label,main .card .room-fields label{font-size:.91rem;line-height:1.35}
main .card .entry span{font-size:.88rem}
#marks small,.saddle-pipe small{font-size:.83rem}
#marks strong,.saddle-pipe strong{font-size:1rem}
#saddle-angles button{white-space:normal;overflow-wrap:anywhere}
.result-shortcut{display:none}
.job-shortcuts,.handover-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-block:10px}
.job-shortcuts button,.handover-actions button,.result-actions button{font-size:.9rem;min-height:44px}
#jobs :is(h2,summary),main .result{scroll-margin-top:12px}
#jobs :is(#job-handover,#job-backups,#job-photo-add){border-top-color:var(--line)}
#job-photo-add{margin-top:5px}
#handover-preview[open]{display:grid;grid-template-rows:auto auto auto minmax(0,1fr);overflow:hidden}
.handover-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
#handover-preview-content{overflow:auto;min-height:0}
#handover-status:not(:empty){margin-bottom:8px}
#handover-preview{width:min(92vw,680px)}
#handover-preview-content h1{font-size:1.45rem}
#handover-preview-content pre{line-height:1.55}
.water-comparison section p{font-size:.9rem}
.flow-timer{margin-top:5px}
.flow-quick-reading{background:color-mix(in srgb,var(--gold) 10%,var(--panel));color:var(--gold);margin-top:6px;padding:5px 8px;border-radius:8px;font-size:1.12rem;font-weight:800;font-variant-numeric:tabular-nums}
@media(max-width:719px){
  .result-shortcut{display:inline-flex;min-height:44px;align-items:center;margin-block:0 6px;padding:4px 10px;color:var(--brass);font-size:.88rem}
  .large-text .brand-home strong{font-size:1.03rem}
  .large-text .brand-mark{width:42px;height:42px}
  .large-text #toolkit .toolkit-groups a{min-height:52px}
  .large-text .toolkit-groups strong,.large-text .brand-home{overflow-wrap:anywhere}
}

.offset-size-label{margin-top:10px}

.bending-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-block:8px 14px}
.bending-tabs a{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;min-height:44px;padding:5px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--paper);text-decoration:none;font-size:.88rem;font-weight:750}
.bending-tabs [aria-current="page"]{color:var(--ink);background:var(--gold);border-color:var(--gold)}
#rad-modes,#water-modes{margin-block:8px 14px}
@media(max-width:419px){
  .bending-tabs a{flex-direction:column;gap:2px;padding:4px 2px;line-height:1.15;font-size:.76rem;min-height:56px}
  .bending-tabs .bending-tab-icon{width:21px;height:21px}
}

.bending-tab-icon{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.offset-preview{max-width:540px;margin:0 auto 12px}

#offset .offset-size-label{margin-top:6px}
#offset .offset-preview{margin-bottom:8px}
.offset-markout{margin:6px 0 8px;padding:5px 10px;text-align:center}
.offset-markout .big{font-size:clamp(1.4rem,6vw,2rem)}
.offset-blank{position:relative;margin:6px 4px 2px;height:10px;border-radius:5px;background:#ad6d4d}
.offset-blank::before,.offset-blank::after{content:"";position:absolute;top:-3px;height:16px;width:2px;background:#fff4dc}
.offset-blank::before{left:16%}
.offset-blank::after{right:16%}
.offset-markout figcaption{display:grid;grid-template-columns:1fr 1fr;padding:4px 0 1px}
.offset-markout figcaption span:first-child{justify-self:start;margin-left:14%}
.offset-markout figcaption span:last-child{justify-self:end;margin-right:14%}

@media (max-width:719px){
  html[data-edition="public"] #toolkit-groups a:last-child:nth-child(odd){grid-column:1/-1}
}
html[data-edition="tester"] .masthead{box-shadow:inset 0 -2px #8aa7ff}
.tester-label{display:inline-block;margin-inline-start:5px;padding:1px 5px;border-radius:4px;background:#293653;color:#d6e1ff;font:700 .62rem/1.4 Inter,sans-serif;letter-spacing:.08em;vertical-align:middle}
html[data-edition="tester"] .toolkit-hero::after{
  content:"TEST";position:absolute;inset-inline-end:5px;bottom:-.19em;z-index:-1;
  color:#a5baff;opacity:.25;font:900 clamp(2.5rem,9vw,6rem)/1 Inter,sans-serif;
  letter-spacing:.04em;transform:rotate(-12deg);pointer-events:none
}