/* Layout: one mobile column following the FW Line workflow (5 setup steps), sticky Calculate bar, report below */
:root{
 --bg:#eef1f5;--panel:#fff;--sunk:#f6f8fb;--fg:#13203a;--mu:#5d6a80;--line:#d4dbe5;
 --navy:#16284a;--navyfg:#fff;--acc:#f2a516;--accfg:#16284a;
 --ok:#1d7a3e;--okb:#e2f4e8;--bad:#b42323;--badb:#fbe6e6;--warn:#8a5a00;--warnb:#fff3d6;
 --f-d:"Barlow Condensed","Arial Narrow",sans-serif;--f-b:"Barlow",system-ui,sans-serif;--f-m:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d1422;--panel:#152035;--sunk:#0f1829;--fg:#e8edf5;--mu:#93a0b6;--line:#26344d;--navy:#0a1222;--navyfg:#e8edf5;--acc:#f5b23a;--accfg:#14213a;--ok:#5cc983;--okb:#11301d;--bad:#ff8585;--badb:#3a1616;--warn:#f5c86a;--warnb:#33270b;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0d1422;--panel:#152035;--sunk:#0f1829;--fg:#e8edf5;--mu:#93a0b6;--line:#26344d;--navy:#0a1222;--navyfg:#e8edf5;--acc:#f5b23a;--accfg:#14213a;--ok:#5cc983;--okb:#11301d;--bad:#ff8585;--badb:#3a1616;--warn:#f5c86a;--warnb:#33270b;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:16px/1.45 var(--f-b);margin:0}
header{background:var(--navy);color:var(--navyfg);padding:14px 16px 16px}
:root{--pagew:max(720px,48vw)}
main{max-width:var(--pagew);margin:0 auto}
header .in{max-width:calc(var(--pagew) - 32px);margin:0 auto}
.brand{font:700 13px var(--f-b);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);display:flex;align-items:center;gap:10px}
.brand .blogo{height:30px;width:auto;display:block}
h1{font:700 30px/1.05 var(--f-d);margin:4px 0 6px;text-wrap:balance}
.stds{font:12px var(--f-m);opacity:.8}
main{padding:14px 16px 120px;display:flex;flex-direction:column;gap:14px}
.warn{background:var(--warnb);color:var(--warn);border-radius:10px;padding:10px 12px;font-size:13px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.step>h2{display:flex;align-items:center;gap:10px;margin:0;padding:11px 14px;background:var(--sunk);border-bottom:1px solid var(--line);font:700 19px var(--f-d);letter-spacing:.02em}
.step>h2 b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--navy);color:var(--acc);font:600 13px var(--f-m)}
.body{padding:12px 14px 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.full{grid-column:1/-1}
@media(max-width:520px){.body{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
label{font-size:13px;font-weight:600;color:var(--mu)}
input,select{width:100%;font:16px var(--f-b);color:var(--fg);background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:9px 10px;min-height:44px}
input[type=number]{font-family:var(--f-m);font-variant-numeric:tabular-nums}
input[readonly]{background:transparent;border-style:dashed}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.u{position:relative}.u input{padding-right:44px}.u span{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:13px var(--f-m);color:var(--mu);pointer-events:none}
.hint{font-size:12px;color:var(--mu)}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;min-height:44px}
.seg button{flex:1;border:0;border-left:1px solid var(--line);background:var(--sunk);color:var(--fg);font:600 16px var(--f-m);cursor:pointer}
.seg button:first-child{border-left:0}.seg button.on{background:var(--navy);color:var(--acc)}
.seg button:disabled{opacity:.35;cursor:not-allowed}
.secs{display:flex;flex-direction:column;gap:8px}
.sec{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:8px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--sunk)}
.sec .tag{font:700 18px var(--f-d);align-self:center;min-width:28px}
.sec input{background:var(--panel)}
@media(max-width:520px){.sec{grid-template-columns:1fr 1fr}.sec .tag{grid-column:1/-1}}
.sum{font:14px var(--f-m);color:var(--mu)}.sum strong{color:var(--fg)}
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.bar .in{max-width:calc(var(--pagew) - 32px);margin:0 auto;display:flex;gap:8px}
.btn{flex:1;min-height:48px;border-radius:10px;border:1px solid var(--line);background:var(--sunk);color:var(--fg);font:700 17px var(--f-b);cursor:pointer}
.btn.pri{flex:2;background:var(--acc);color:var(--accfg);border-color:var(--acc)}
#report{scroll-margin-top:12px}
.verdict{border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:2px}
.verdict.ok{background:var(--okb);color:var(--ok)}.verdict.bad{background:var(--badb);color:var(--bad)}
.verdict b{font:700 24px var(--f-d);letter-spacing:.02em}
.verdict span{font-size:14px;color:var(--fg)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 14px;font-size:13px}
.meta div{display:flex;flex-direction:column;min-width:0}.meta i{font-style:normal;color:var(--mu);font-size:12px}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font:14px var(--f-m);font-variant-numeric:tabular-nums}
th{font:600 12px var(--f-b);color:var(--mu);text-align:right;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{text-align:right;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
.pill{display:inline-block;font:600 11px var(--f-b);padding:2px 7px;border-radius:99px;letter-spacing:.04em}
.pill.ok{background:var(--okb);color:var(--ok)}.pill.bad{background:var(--badb);color:var(--bad)}
h3{font:700 18px var(--f-d);margin:8px 0 6px}
details{font-size:13px}details summary{cursor:pointer;color:var(--mu);font-weight:600;padding:4px 0}
svg text{font-family:var(--f-m);fill:var(--mu)}
.note{font-size:12px;color:var(--mu)}
.link{border:0;background:none;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--navy);color:var(--navyfg);padding:8px 14px;border-radius:8px;font-size:14px}
[hidden]{display:none!important}
td.bad{color:var(--bad);font-weight:600}
.hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.out{color:var(--navyfg);opacity:.8;font-size:14px;white-space:nowrap}
.step>h2 .sp{flex:1}
.mini{border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:7px;padding:6px 10px;font:600 13px var(--f-b);cursor:pointer;min-height:34px}
.mini.ghost{background:transparent;color:var(--mu);margin-left:4px}
td.acts{white-space:nowrap}tr.cur td{background:var(--warnb)}
#saved td{font-family:var(--f-b);font-size:14px}
.login{max-width:380px;margin:60px auto;padding-inline:16px}
.login form{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.err{color:var(--bad);font-size:14px}
/* admin, account and login pages */
.nav{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.nav a{color:var(--navyfg);opacity:.8;font-size:14px;text-decoration:none;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{opacity:1;text-decoration:underline}
.btn.inline{flex:none;min-height:44px;padding:0 18px}
.okmsg{background:var(--okb);color:var(--ok);border-radius:10px;padding:10px 12px;font-size:14px}
.errmsg{background:var(--badb);color:var(--bad);border-radius:10px;padding:10px 12px;font-size:14px}
.chk{display:flex;gap:8px;align-items:center;font-size:14px}.chk input{width:auto;min-height:0}
.role{display:inline-block;font:600 11px var(--f-b);padding:2px 7px;border-radius:99px;background:var(--sunk);border:1px solid var(--line);letter-spacing:.04em;text-transform:uppercase}
.off{opacity:.55}
.actions{display:flex;gap:6px;flex-wrap:wrap}
form.inline{display:inline}
.body table td{font-family:var(--f-b)}

#saved th,#saved td{text-align:left}
.crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crumbs .sp{flex:1}
a.mini{display:inline-flex;align-items:center;text-decoration:none}
.listhead{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.listhead .fld{flex:1;min-width:220px}
#saved tbody tr{cursor:pointer}
#saved tbody tr:hover td{background:var(--sunk)}
.nav a.lang,a.lang{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:28px;padding:0 8px;border:1px solid currentColor;border-radius:6px;font:700 13px var(--f-b);letter-spacing:.06em;text-decoration:none;opacity:.9}
.hd .lang:hover{opacity:1;text-decoration:none}
.loginlang{position:absolute;top:16px;right:16px;color:var(--navyfg)}
header{position:relative}
.btn:disabled{opacity:.45;cursor:not-allowed}
.foot{max-width:var(--pagew);margin:0 auto;padding:6px 16px 20px;font-size:12px;color:var(--mu);text-align:center}
main .foot{padding:4px 0 0}
.docgrp h3{margin:6px 0 2px;font:700 17px var(--f-d);letter-spacing:.02em}
.docs td{vertical-align:middle}.docs td.dt{white-space:normal;width:100%;font-family:var(--f-b)}
.docs .pill{font-size:11px}
dialog{border:1px solid var(--line);border-radius:14px;padding:0;max-width:min(520px,calc(100vw - 32px));width:100%;background:var(--panel);color:var(--fg)}
dialog::backdrop{background:rgba(10,18,34,.55)}
dialog form{padding:18px;display:flex;flex-direction:column;gap:12px}dialog h3{margin:0;font:700 22px var(--f-d)}
@media(max-width:620px){.bar .in{gap:5px}.bar .btn{font-size:14px;min-width:0;padding:0 4px}}
/* field inspection */
textarea{width:100%;font:16px var(--f-b);color:var(--fg);background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:9px 10px}
.item{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--panel)}
.item.def{border-color:var(--bad);background:var(--badb)}.item.miss{outline:3px solid var(--acc)}
.item .it{font-size:16px;line-height:1.35}.item .code{font:600 12px var(--f-m);color:var(--mu);margin-right:8px}
.seg.st button,.seg.res button{font:700 15px var(--f-b);min-height:46px}
.seg.st button.on.ok,.seg.res button.on[data-v=pass]{background:var(--ok);color:#fff}
.seg.st button.on.no,.seg.res button.on[data-v=fail]{background:var(--bad);color:#fff}
.seg.st button.on.na{background:var(--mu);color:#fff}
.item .cm{min-height:40px;font-size:15px}
.ph{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ph label{cursor:pointer}
.thumbs{display:flex;gap:6px;flex-wrap:wrap}.th{position:relative}.th img{width:64px;height:64px;object-fit:cover;border-radius:6px;display:block}
.th button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:var(--bad);color:#fff;font-weight:700;cursor:pointer;line-height:1}
canvas.sig{width:100%;height:180px;border:1px dashed var(--line);border-radius:8px;background:#fff;touch-action:none}
.sigimg{max-width:320px;width:100%;background:#fff;border:1px solid var(--line);border-radius:8px}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.photos figure{margin:0}.photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
.photos figcaption{font:12px var(--f-m);color:var(--mu)}
tr.bad td{color:var(--bad)}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
:root{--bar:#2a5bb5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bar:#5b8de8}}:root[data-theme="dark"]{--bar:#5b8de8}
/* dashboard */
main.dash{max-width:max(1100px,70vw)}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:560px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.k-v{font-size:28px!important}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;color:var(--fg);text-decoration:none;min-width:0}
a.kpi:hover{border-color:var(--acc)}
.k-l{font-size:13px;font-weight:600;color:var(--mu)}.k-v{font:600 34px/1.1 var(--f-b)}.k-s{font-size:13px;color:var(--mu)}
.dl{font-weight:600}.dl.up{color:var(--ok)}.dl.down{color:var(--bad)}
.attn{grid-template-columns:repeat(3,1fr)!important}
@media(max-width:820px){.attn{grid-template-columns:1fr!important}}
.ac{border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:0}
.ah{display:flex;align-items:baseline;gap:8px;padding:10px 12px}.ah b{font:600 28px var(--f-b)}.ah span:last-child{font-weight:600}
.ac-bad .ah{background:var(--badb);color:var(--bad)}.ac-warn .ah{background:var(--warnb);color:var(--warn)}.ac-info .ah{background:var(--sunk);color:var(--fg)}
.ac ul,.rl{list-style:none;margin:0;padding:0}
.ac li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--line);font-size:14px}
figure.chart{margin:0;min-width:0}figure.chart figcaption{font-weight:600;font-size:14px;margin-bottom:4px}
figure.chart svg{width:100%;height:200px;display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}.chart .ax{fill:var(--mu);font:11px var(--f-b)}.chart .dv{fill:var(--fg);font:600 12px var(--f-b)}
.chart .bar{fill:var(--bar)}.chart .hit{fill:transparent;cursor:default;outline:none}.chart .hit.on,.chart .hit:focus{fill:var(--fg);fill-opacity:.06}
.tip{position:absolute;z-index:20;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.15);pointer-events:none;white-space:nowrap}
.tip b{font-size:15px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:820px){.two{grid-template-columns:1fr}}
.rl li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}.rl li:first-child{border-top:0}
.rl a{color:var(--fg);text-decoration:none;min-width:0}.rl a:hover b{text-decoration:underline}
.hb{display:grid;grid-template-columns:minmax(0,2fr) 3fr auto;gap:10px;align-items:center;padding:5px 0;font-size:14px}
.hb-t{height:10px;background:var(--sunk);border-radius:5px;overflow:hidden}.hb-f{display:block;height:100%;background:var(--bar);border-radius:0 4px 4px 0}
.hb-v{font-variant-numeric:tabular-nums;font-weight:600;min-width:3ch;text-align:right}
.cotree td{text-align:left;white-space:normal}.cotree tr.d1 td{padding-left:28px}.cotree .tree{color:var(--mu);font-weight:700}
.cotree td{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.cotree td>form.actions{flex:1;min-width:0}
.langs{display:inline-flex;gap:6px}
.cobox{display:flex;flex-wrap:wrap;gap:6px 18px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--sunk)}
.inspco[hidden]{display:none}
@media(max-width:620px){.bar .in{flex-wrap:wrap}.bar .btn{flex:1 1 22%;min-height:42px;font-size:14px}.bar .btn.pri{flex:1 1 100%}main{padding-bottom:170px}.toast{bottom:calc(160px + env(safe-area-inset-bottom,0px))}}
.sagrow{display:grid;grid-template-columns:auto 1fr 130px auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.sagrow .sagt{font-size:14px}.sagrow .sagv{min-width:120px}
@media(max-width:620px){.sagrow{grid-template-columns:auto 1fr;}.sagrow .u,.sagrow .sagv{grid-column:2}}
.turn{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;margin:-4px 0 8px 24px;border-left:3px solid var(--acc);background:var(--sunk);border-radius:0 8px 8px 0}
.turn label{font-size:14px;font-weight:600}.turn .u{width:110px}.turn .tdir{width:auto;flex:0 0 auto}.turn .tdir button{padding:0 14px}
.planbox{border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--fg);padding:4px}
.plan{width:100%;height:auto;display:block;max-height:460px}
.plan .pl-l{font:600 11px var(--f-b);fill:currentColor}.plan .pl-t{font:600 11px var(--f-b);fill:#c8102e}.plan .pl-s{font:700 11px var(--f-b);fill:currentColor;letter-spacing:.06em}
.plan .pl-a{fill:none;stroke:#c8102e;stroke-width:1.5}.plan .pl-e{fill:var(--acc);stroke:currentColor;stroke-width:2}.plan .pl-c{fill:var(--panel);stroke:currentColor;stroke-width:2.5}
/* partner licences (2026-10-19) */
.brand .byl{font-weight:500;letter-spacing:.04em;text-transform:none;opacity:.85}
details.lic{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--sunk)}
details.lic summary{color:var(--fg);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
details.lic summary .note{font-weight:400}
.licform{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:10px}
.licform input[type=color]{height:38px;padding:2px;width:100%}
.chks{display:flex;flex-wrap:wrap;gap:6px 18px}
.licrm{margin-top:8px}
@media(max-width:520px){.licform{grid-template-columns:1fr}}

/* Site plan: the line layout on a roof photo (optional) */
.opt{font-weight:500;color:var(--mu);font-size:12px}
.sitedrop{border:2px dashed var(--line);border-radius:10px;background:var(--sunk);padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.sitedrop span{max-width:560px;color:var(--mu);font-size:14px}
#site.drop .sitedrop{border-color:var(--acc);background:var(--panel)}
.sitepick{position:relative;cursor:pointer}.sitepick input{display:none}
.sitebox{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#5f655f;margin-top:8px}
.sitebox svg{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.sitebox.picking svg{cursor:crosshair}#siteov{cursor:move}
.sitectl{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-top:10px}
.sitectl .fld{flex:1 1 200px;min-width:0}
.sitectl input[type=range]{padding:0;min-height:32px;background:none;border:0;accent-color:var(--navy)}
.sitetabs{margin-bottom:6px}.btn.danger{color:var(--bad)}
#sitesvg text{fill:#fff;font-family:Helvetica,Arial,sans-serif}
/* Calculations list: wider page so Open, Duplicate and Delete fit (English and Spanish); long text columns wrap */
main.wide{max-width:max(1240px,80vw)}
#saved{width:100%}
#saved td:nth-child(-n+3){white-space:normal;min-width:90px}
#saved td:nth-child(1){min-width:130px}
#saved td.acts{width:1%;text-align:right}
#saved td.acts .mini{margin-left:4px}
/* Connected lines (a project of several lines sharing posts) */
.projrow{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:8px 0 2px}.projrow>b{flex:1 1 100%;font-size:14px}
.projrow .fld{flex:1 1 170px;min-width:0}.projplan{margin-top:10px;padding:8px;text-align:center}
.projlines{margin:8px 0;display:flex;gap:6px;flex-wrap:wrap}.projt th,.projt td{text-align:left;white-space:normal}
.addline{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}.addline .btn{font-weight:700}