/* ===================================================================
   /tools layer — loaded only on the hub and the seven tool pages
   (added 2026-09-27). Uses the tokens and geometry already defined in
   styles.css: 45deg and 90deg only, zero radius, one easing curve,
   colour encodes rather than decorates. Nothing here is interactive on
   its own; .tctl is revealed by the html.js class that app.js sets, so
   a reader with scripting off is never shown a dead input.
   =================================================================== */

/* --- on this page --- */
.ttoc{border-left:1px solid var(--line);padding-left:20px;align-self:start}
.ttoc .tmono{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);margin:0 0 12px}
.ttoc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.ttoc li{counter-increment:toc;margin-bottom:9px}
.ttoc a{color:var(--tx2);text-decoration:none;font-size:.875rem;line-height:1.4;display:block}
.ttoc a:before{content:"0" counter(toc);font-family:var(--m);font-size:10px;color:var(--tx3);margin-right:10px}
.ttoc a:hover{color:var(--acc)}
.ttoc a:visited{color:var(--tx2)}
.thgrid{display:grid;gap:34px}
@media(min-width:1040px){.thgrid{grid-template-columns:minmax(0,1fr) 260px;gap:56px}}
.thgrid>*{min-width:0}

/* --- the tool block --- */
.tool{border:1px solid var(--line);background:linear-gradient(170deg,var(--pnl),#0A0C0F);padding:30px 32px 26px}
@media(max-width:620px){.tool{padding:22px 18px 20px}}
.tnote2{margin:0 0 20px;font-size:.9062rem;line-height:1.6;color:var(--tx3);max-width:78ch}
.tnojs{margin:0 0 4px;padding:16px 18px;border:1px solid var(--line);border-left:2px solid var(--warm,#E8763A);background:rgba(232,118,58,.05);font-size:.9375rem;line-height:1.6;color:var(--tx2)}
.tnojs b{color:var(--tx);font-weight:600}

/* controls exist in the markup but are only shown once app.js has set html.js,
   so a page without scripting never presents an input that cannot work */
.tctl{display:none}
html.js .tctl{display:block}
.tfs{border:0;border-top:1px solid var(--line2);margin:0;padding:22px 0 4px}
.tfs:first-of-type{border-top:0;padding-top:0}
.tfs legend{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);padding:0 0 14px}
.tgrid{display:grid;gap:20px 30px}
@media(min-width:700px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.tgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tgrid>*{min-width:0}
.tf label,.tf .tfl{display:block;font-family:var(--m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3);margin:0 0 8px;line-height:1.5}
.tf label i,.tf .tfl i{font-style:normal;color:var(--acc);letter-spacing:.08em}
.tf input,.tf select,.tf textarea{width:100%}
.tf textarea{min-height:76px}
.tfh{margin:7px 0 0;font-size:.8125rem;line-height:1.5;color:var(--tx3)}
.tfm{grid-column:1/-1}
.tcbs{display:grid;gap:8px 22px}
@media(min-width:620px){.tcbs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.tcbs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tcb{display:flex;align-items:flex-start;gap:10px;min-width:0}
.tcb input{width:16px;height:16px;flex:none;margin:3px 0 0;accent-color:var(--acc)}
.tcb label{font-family:var(--d);font-size:.9062rem;letter-spacing:0;text-transform:none;color:var(--tx2);margin:0;line-height:1.45}
.tcb input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* --- repeating-row tools --- */
.trowlist{display:grid;gap:18px}
.trow{border:1px solid var(--line2);background:rgba(255,255,255,.015);padding:20px 22px}
.trowh{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line2)}
.trowh p{margin:0;font-family:var(--m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc)}
.trowacts{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.trowdel{background:none;border:1px solid var(--line);color:var(--tx3);font-family:var(--m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;cursor:pointer}
.trowdel:hover{color:var(--tx);border-color:rgba(255,255,255,.3)}
.trowdel:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media(max-width:620px){.trow{padding:16px 14px}}

/* --- results --- */
.tout:empty{display:none}
.tout{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.tout h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.018em;margin:0 0 16px}
.tout h4{font-family:var(--m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3);font-weight:500;margin:30px 0 14px}
.tout p{color:var(--tx2);font-size:.9375rem;line-height:1.6;margin:0 0 12px}
.tlive{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.terr{margin:16px 0 0;padding:12px 14px;border:1px solid rgba(229,131,122,.42);border-left:2px solid #E5837A;background:rgba(229,131,122,.06);color:#E5837A;font-size:.9062rem;line-height:1.55}
.terr:empty{display:none}

.tmetrics{display:grid;gap:0;margin:0 0 10px;border-top:1px solid var(--line2)}
@media(min-width:620px){.tmetrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.tmetrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:980px){.tmetrics.tm4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tmetric{padding:16px 20px 16px 0;border-bottom:1px solid var(--line2);min-width:0}
.tmetric dt{font-family:var(--m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin:0 0 8px;line-height:1.5}
.tmetric dd{margin:0}
.tmetric dd.v{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:var(--tx);line-height:1.1;font-variant-numeric:tabular-nums}
.tmetric dd.c{margin-top:7px;font-size:.8125rem;color:var(--tx3);line-height:1.45}
.tmetric.neg dd.v{color:#E5837A}
.tmetric.key dd.v{color:var(--acc)}

/* --- result actions --- */
.tacts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--line2)}
.tacts[hidden]{display:none}
.tacts .tact{padding:11px 18px;font-size:.875rem}
.tactm{margin:0;flex:1 1 220px;font-family:var(--m);font-size:11px;letter-spacing:.05em;color:var(--acc);line-height:1.5}
.tpriv{margin:20px 0 0;font-size:.8438rem;line-height:1.6;color:var(--tx3)}
.tpriv b{color:var(--tx2);font-weight:500}

/* --- shared prose furniture --- */
ol.notes,ul.notes{list-style:none;margin:8px 0 0;padding:0;counter-reset:nt}
ol.notes>li,ul.notes>li{counter-increment:nt;display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 4px;padding:14px 0;border-bottom:1px solid var(--line2);color:var(--tx2);font-size:.9375rem;line-height:1.6}
ol.notes>li:before{content:"0" counter(nt);font-family:var(--m);font-size:10.5px;color:var(--acc);padding-top:4px}
ul.notes>li:before{content:"+";font-family:var(--m);font-size:13px;color:var(--acc);padding-top:1px}
ol.notes>li>span,ul.notes>li>span{min-width:0}
ol.notes b,ul.notes b{color:var(--tx);font-weight:600}
ol.notes a,ul.notes a{color:var(--acc)}
.texl{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:0;border-top:1px solid var(--line2)}
@media(min-width:820px){.texl{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}}
.texl>li{padding:11px 0;border-bottom:1px solid var(--line2);font-size:.9062rem;line-height:1.55;color:var(--tx2);min-width:0}
.texl b{color:var(--tx);font-weight:600}
.tform{font-family:var(--m);font-size:.8125rem;letter-spacing:.02em;color:var(--tx);line-height:1.7;display:inline-block}
.tsrc>li{align-items:start}
.tnote{margin:34px 0 0;padding:24px 26px;border:1px solid var(--line);border-left:2px solid var(--warm,#E8763A);background:rgba(232,118,58,.04)}
.tnote b{display:block;font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm,#E8763A);margin-bottom:12px}
.tnote p{margin:0 0 12px;color:var(--tx2);font-size:.9062rem;line-height:1.62;max-width:82ch}
.tnote p:last-child{margin-bottom:0}
@media(max-width:560px){.tnote{padding:20px 18px}}
.dtbl.treg{min-width:1900px;font-size:.8438rem}
.dtbl.treg th,.dtbl.treg td{padding:12px 18px 12px 0}
.dtbl.treg tbody th{width:auto;min-width:200px}

/* --- contextual CTA --- */
.tcta{margin:40px 0 0;padding:30px 32px;border:1px solid var(--line);border-top:2px solid var(--acc);background:rgba(46,134,255,.045)}
.tcta .lbl{margin-bottom:16px}
.tcta p{margin:0 0 14px;color:var(--tx2);font-size:.9688rem;line-height:1.62;max-width:72ch}
.tcta .tctad{color:var(--tx3);font-size:.8938rem}
.tcta .btn{margin-top:6px}
.tctal{display:inline-block;margin:16px 0 0 22px;font-family:var(--m);font-size:11.5px;letter-spacing:.05em;color:var(--tx2);text-decoration:none;border-bottom:1px solid var(--line)}
.tctal:hover{color:var(--tx);border-bottom-color:var(--acc)}
.tctal:visited{color:var(--tx2)}
@media(max-width:620px){.tcta{padding:24px 18px}.tctal{margin-left:0;display:block}}

/* --- hub card grid reuses .offers/.ofc from styles.css --- */
.ofc h3 a:visited{color:var(--tx)}


/* ===================================================================
   Added 28 September 2026 after a clarity review: the tools now open
   empty, the example is something you ask for, and a result is
   generated rather than accumulating under the form.
   =================================================================== */

/* --- what this tool is for, above the fold --- */
.tfacts{display:grid;gap:0;margin:26px 0 0;border-top:1px solid var(--line2)}
@media(min-width:760px){.tfacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}}
.tfacts>div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:0 16px;padding:12px 0;
            border-bottom:1px solid var(--line2);min-width:0}
.tfacts dt{font-family:var(--m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
           color:var(--tx3);padding-top:3px}
.tfacts dd{margin:0;font-size:.9062rem;line-height:1.5;color:var(--tx2)}

/* --- hub cards carry the same four facts --- */
.tcard{display:grid;gap:0;margin:0 0 18px;border-top:1px solid var(--line2)}
.tcard>div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 14px;padding:9px 0;
           border-bottom:1px solid var(--line2);min-width:0}
.tcard dt{font-family:var(--m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
          color:var(--tx3);padding-top:2px}
.tcard dd{margin:0;font-size:.8438rem;line-height:1.5;color:var(--tx2)}

/* --- the example is something you ask for --- */
.texbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 24px;
        padding-bottom:20px;border-bottom:1px solid var(--line2)}
.texbar[hidden]{display:none}
.texbar .tex{padding:9px 16px;font-size:.8438rem}
.texnote{margin:0;flex:1 1 240px;font-family:var(--m);font-size:11px;letter-spacing:.04em;
         color:var(--acc);line-height:1.5}

/* --- required and optional, stated rather than implied --- */
.treq{font-family:var(--m);font-size:8.5px;letter-spacing:.14em;color:var(--acc);
      font-weight:500;margin-left:6px}
.topt{font-family:var(--m);font-size:8.5px;letter-spacing:.14em;color:var(--tx3);
      font-weight:400;margin-left:6px;text-transform:uppercase}

/* --- the deliberate moment --- */
.tgen{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:26px 0 0;padding-top:24px;
      border-top:1px solid var(--line)}
.tgen[hidden]{display:none}
.tgenm{margin:0;flex:1 1 240px;font-family:var(--m);font-size:11px;letter-spacing:.04em;
       color:var(--tx3);line-height:1.5}

/* --- what is wrong, and where --- */
.terrs:empty{display:none}
.terrs{margin:22px 0 0;padding:18px 20px;border:1px solid rgba(229,131,122,.42);
       border-left:2px solid #E5837A;background:rgba(229,131,122,.06)}
.terrh{margin:0 0 10px;color:#E5837A;font-size:.9375rem;font-weight:600}
.terrs ul{list-style:none;margin:0;padding:0}
.terrs li{padding:5px 0;font-size:.9062rem;line-height:1.5}
.terrs a{color:#E5837A;text-decoration:underline}
.terrf{margin:6px 0 0;font-size:.8125rem;line-height:1.45;color:#E5837A;display:none}
.terrf.on{display:block}
.tf [aria-invalid="true"]{border-color:#E5837A}

/* --- a result that no longer matches the form says so --- */
.tout.stale{opacity:.5}
.tout.stale:after{content:"These figures were generated from earlier values.";
  display:block;margin-top:18px;font-family:var(--m);font-size:11px;letter-spacing:.05em;
  color:var(--warm,#E8763A)}
.tlead{font-size:1.0625rem!important;line-height:1.55!important;color:var(--tx)!important;
       max-width:70ch;margin:0 0 18px!important}
.tacts .tact[disabled]{opacity:.4;cursor:not-allowed}

/* --- the register before it has anything in it --- */
.tempty{margin:0;padding:22px 0;color:var(--tx3);font-size:.9375rem;line-height:1.6}
.tempty[hidden]{display:none}
.timp{display:flex;flex-direction:column;gap:7px;min-width:0}
.timp label{font-family:var(--m);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
            color:var(--tx3);margin:0}
.timp input[type=file]{font-family:var(--m);font-size:11px;color:var(--tx2);background:none;
                       border:1px dashed var(--line);padding:9px 11px;max-width:340px}
.timp input[type=file]:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* --- weights the reader sets --- */
.twt{width:88px;padding:7px 9px;font-size:.875rem}
.twv{font-family:var(--m);font-size:11.5px;color:var(--tx3)}
.twtotal{font-family:var(--m);font-size:13px;color:var(--tx)}
tr.bad .twtotal{color:var(--warm,#E8763A)}

/* --- everything below the result collapses --- */
.tdet{border-bottom:1px solid var(--line2)}
.tdet>summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;gap:16px;
              align-items:baseline;justify-content:space-between}
.tdet>summary::-webkit-details-marker{display:none}
.tdet>summary h2,.tdet>summary h3{margin:0;font-size:1.1875rem;font-weight:600;
                                  letter-spacing:-.018em;max-width:none}
.tdet>summary:after{content:"+";font-family:var(--m);font-size:17px;color:var(--acc);
                    line-height:1;flex:none}
.tdet[open]>summary:after{content:"\2212"}
.tdet>summary:hover h2,.tdet>summary:hover h3{color:var(--acc)}
.tdet>summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.tdetb{padding:0 0 30px}
.tdets{border-top:1px solid var(--line2);margin-top:8px}
.tdsum{margin:0 0 4px;color:var(--tx3);font-size:.875rem;line-height:1.5;max-width:74ch}

/* --- print: only the generated artefact -----------------------------------------------
   The review found that "Print or save as PDF" printed the whole page: the worked example,
   the method, the tables, the limits and the questions all followed the result. Printing now
   emits the artefact and a one-line provenance header, and nothing else. */
@media print{
 :root{--bg:#fff;--bg2:#fff;--pnl:#fff;--tx:#111;--tx2:#333;--tx3:#555;
       --line:#bbb;--line2:#ddd;--acc:#0a4fa0}
 html,body{background:#fff!important;color:#111!important}
 /* everything is hidden, then the artefact and its ancestors are put back */
 body>*{display:none!important}
 body>main{display:block!important}
 /* every direct child of the page, not only the sections: the contextual CTA is an aside */
 main .page>*{display:none!important}
 main .page>section.tsec{display:block!important;border:0;padding:0}
 .tsec>.ct{padding:0;max-width:none}
 .tsec .shead,.tsec>.ct>p,.tsec .tnojs,.tsec .texbar,.tsec .tctl,.tsec .tgen,
 .tsec .terrs,.tsec .tacts,.tsec .tpriv,.tsec .tlive,.tsec .tintro,
 .tsec .tnote2{display:none!important}
 .tool{border:0;background:#fff!important;padding:0}
 .tprinthead{display:block!important;border-bottom:1px solid #bbb;padding-bottom:8pt;
             margin-bottom:14pt}
 .tprinthead p{margin:0;font-family:var(--m);font-size:9pt;color:#444}
 .tout{border-top:0;margin:0;padding:0;opacity:1!important}
 .tout.stale:after{content:"Generated from earlier values \2014 regenerate before relying on this."}
 .tout h3{font-size:16pt;color:#111;margin:0 0 10pt}
 .tout h4{font-size:10pt;color:#111;margin:16pt 0 6pt}
 .tout p,.tout li,.tout td,.tout th{font-size:10pt;color:#222}
 a{color:#111;text-decoration:none}
 .dtblw{overflow:visible!important;border:0}
 .dtbl{min-width:0!important;font-size:9pt;width:100%}
 .dtbl.treg{min-width:0!important;font-size:7.5pt}
 .tmetrics{grid-template-columns:repeat(3,minmax(0,1fr))}
 .tmetric dd.v,.tmetric.key dd.v{color:#111;font-size:14pt}
 .twt{border:1px solid #999;width:70px}
 ol.notes>li,ul.notes>li,.texl>li,.tmetric{break-inside:avoid}
 .tout h3,.tout h4{break-after:avoid}
}

/* the provenance header exists only for print */
.tprinthead{display:none}