/* Draft-calculation page — inherits tokens from styles.css */
.fpage{padding:48px 0 90px;min-height:70vh;
background:linear-gradient(180deg,#eef1f1 0%,var(--paper) 200px,var(--paper) 100%)}
.fpage__head{padding-bottom:26px}
.fpage__h1{font-size:clamp(28px,4vw,46px);letter-spacing:-.03em;margin-bottom:14px}
.fpage__lead{color:var(--slate);max-width:64ch;font-size:17px;font-weight:300}
.fcard{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:22px 18px 26px;
box-shadow:0 1px 2px rgba(6,59,73,.05),0 12px 34px -18px rgba(6,59,73,.28)}
@media(min-width:760px){.fcard{padding:30px 32px 34px}}
/* stepper */
.steps{display:flex;gap:6px;margin-bottom:8px}
.steps__i{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.steps__i b{display:block;height:100%;width:0;background:var(--accent);transition:width .45s var(--ease)}
.steps__i.done b,.steps__i.now b{width:100%}
.steps__i.now b{background:var(--accent)}
.fstep__meta{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 22px}
.fstep__name{font-size:15px;font-weight:700;letter-spacing:-.01em}
.fstep__count{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--slate-2);text-transform:uppercase}
/* fields */
.fgrid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:720px){.fgrid{grid-template-columns:1fr 1fr}.fgrid .col-2{grid-column:1/-1}}
.f{display:flex;flex-direction:column}
.f__label{font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink)}
.f__label .req{color:#C0453F;margin-left:3px}
.f__opt{font-weight:400;color:var(--slate-2);font-size:11.5px;margin-left:4px}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=number],.f select,.f textarea{
font:inherit;font-size:14.5px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r);
background:var(--white);color:var(--ink);transition:border-color .2s,box-shadow .2s;width:100%}
.f textarea{min-height:110px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 2px rgba(240,169,30,.35)}
.f.err input,.f.err select,.f.err textarea,.f.err .opts{border-color:#C0453F;background:#fff6f5}
.f__err{color:#C0453F;font-size:11.5px;margin-top:5px}
/* radio / checkbox groups */
.opts{display:grid;grid-template-columns:1fr;gap:8px;border:1px solid transparent;border-radius:var(--r)}
@media(min-width:620px){.opts--2{grid-template-columns:1fr 1fr}}
.opt{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid var(--line);
border-radius:var(--r);cursor:pointer;background:var(--white);transition:.18s var(--ease);font-size:14px;line-height:1.4}
.opt:hover{border-color:rgba(6,59,73,.35);background:var(--paper)}
.opt input{accent-color:var(--ink);width:16px;height:16px;margin-top:1px;flex:0 0 auto}
.opt.on{border-color:var(--ink);background:rgba(6,59,73,.045);font-weight:500}
/* nav */
.fnav{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.fbtn{font:inherit;font-size:15px;font-weight:600;padding:13px 26px;border-radius:var(--r);border:1.5px solid transparent;cursor:pointer;transition:.22s var(--ease)}
.fbtn--primary{background:var(--ink);color:var(--paper)}
.fbtn--primary:hover{background:var(--ink-2);transform:translateY(-1px)}
.fbtn--accent{background:var(--accent);color:var(--ink)}
.fbtn--accent:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:0 10px 22px rgba(240,169,30,.3)}
.fbtn--ghost{background:transparent;border-color:var(--line);color:var(--slate)}
.fbtn--ghost:hover{border-color:var(--ink);color:var(--ink)}
.fbtn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
/* facade calculator */
.fc__head{margin-bottom:16px}
.fc__title{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);font-weight:600}
.fc__sub{font-size:13.5px;color:var(--slate);margin-top:4px}
.fsec{border:1px solid var(--line);border-radius:var(--r);background:var(--white);margin-bottom:10px;transition:.2s}
.fsec.over{border-color:var(--accent);box-shadow:0 0 0 2px rgba(240,169,30,.3)}
.fsec.dragging{opacity:.45}
.fsec__bar{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 8px}
.grip{cursor:grab;color:#b9c3c8;font-size:15px;line-height:1;padding:2px 3px;user-select:none;touch-action:none}
.grip:active{cursor:grabbing}
.fsec__n{font-family:var(--mono);font-size:10px;color:var(--slate-2);width:14px;flex:0 0 auto}
.fsec__toggle{flex:1;display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;text-align:left;min-width:0;font:inherit}
.fsec__name{font-size:14px;font-weight:600;color:var(--ink);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsec__name.none{font-weight:400;color:var(--slate-2);font-style:italic}
.fsec__meta{display:block;font-family:var(--mono);font-size:10.5px;color:var(--slate-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsec__sum{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.iconbtn{background:none;border:0;cursor:pointer;color:#b9c3c8;padding:3px;line-height:1;font-size:14px;transition:color .2s}
.iconbtn:hover{color:var(--ink)} .iconbtn--del:hover{color:#C0453F}
.iconbtn[disabled]{opacity:.3;cursor:not-allowed}
.fsec__body{padding:14px}
.fsec__note{font-size:12.5px;color:var(--slate);font-style:italic;margin-top:7px}
.layers{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.layer{display:flex;align-items:flex-start;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);cursor:pointer;transition:.15s}
.layer:hover{background:var(--paper)}
.layer.off{opacity:.45}
.layer input{accent-color:var(--ink);width:16px;height:16px;margin-top:2px;flex:0 0 auto}
.layer__name{flex:1;font-size:13.5px;line-height:1.4;color:var(--ink)}
.layer__p{text-align:right;flex:0 0 auto}
.layer__unit{display:block;font-family:var(--mono);font-size:10.5px;color:var(--slate-2)}
.layer__tot{display:block;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.fsec__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;background:rgba(6,59,73,.04);border-top:1px solid var(--line);flex-wrap:wrap}
.fsec__foot b{font-size:15px;font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.grand{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding:16px 18px;
border:2px solid rgba(6,59,73,.2);border-radius:var(--r);background:var(--white);flex-wrap:wrap}
.grand span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2)}
.grand b{font-size:clamp(20px,3vw,28px);color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums}
.caveats{list-style:none;padding:0;margin:14px 0 0}
.fempty{border:1px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;color:var(--slate-2);font-size:13.5px}
.fmsg{padding:12px 14px;border-radius:var(--r);font-size:13.5px;margin-bottom:14px}
.fmsg--err{background:#fdf3f2;border:1px solid #f0c9c5;color:#9a3b36}
.fmsg--info{background:var(--paper);border:1px solid var(--line);color:var(--slate)}
.fdone{text-align:center;padding:40px 10px}
.fdone__t{font-size:clamp(24px,3.4vw,34px);margin-bottom:12px}
.fdone__m{color:var(--slate);max-width:52ch;margin:0 auto 22px;font-size:16px;font-weight:300}
/* ---------- 2026 refresh: warmer, clearer, grouped ---------- */
.onlyreq{font-size:12.5px;color:var(--slate);background:rgba(240,169,30,.12);
border-left:3px solid var(--accent);padding:9px 12px;border-radius:0 var(--r) var(--r) 0;margin:0 0 22px}
/* grouped sections */
.grp{margin:0 0 26px;padding:18px 16px 20px;background:var(--paper);
border:1px solid var(--line);border-radius:8px;position:relative}
.grp:last-of-type{margin-bottom:6px}
.grp__t{font-size:14px;font-weight:700;letter-spacing:-.01em;margin:0 0 3px;color:var(--ink);
display:flex;align-items:center;gap:8px}
.grp__t::before{content:"";width:14px;height:2px;background:var(--accent);border-radius:2px;flex:0 0 auto}
.grp__h{font-size:12.5px;color:var(--slate-2);margin:0 0 14px}
.grp__t + .fgrid{margin-top:14px}
@media(min-width:760px){.grp{padding:20px 20px 22px}}
/* inputs feel less bare */
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=number],.f select,.f textarea{
background:var(--white);border-color:#d8e0e2}
.f input::placeholder,.f textarea::placeholder{color:#a9b6bb}
.f select{appearance:none;background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;background-size:11px;padding-right:34px}
.f__label{letter-spacing:-.005em}
/* option cards */
.opt{background:var(--white);border-color:#d8e0e2}
.opt.on{border-color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.opt:hover{border-color:var(--slate)}
/* stepper */
.steps__i{height:4px;background:#dbe3e5;border-radius:3px}
.fstep__name{font-size:16px}
.fstep__meta{margin:16px 0 18px}
/* file upload */
.drop{border:1.5px dashed #c3ced2;border-radius:8px;background:var(--white);
padding:22px 16px;text-align:center;transition:.2s var(--ease);cursor:pointer}
.drop:hover,.drop.over{border-color:var(--accent);background:rgba(240,169,30,.06)}
.drop svg{width:26px;height:26px;stroke:var(--slate-2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.drop p{font-size:13.5px;color:var(--slate);margin:0 0 3px}
.drop small{font-size:11.5px;color:var(--slate-2)}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ink);
text-decoration:underline;cursor:pointer}
.upfiles{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.upfile{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);
border-radius:var(--r);padding:8px 10px;font-size:13px}
.upfile__i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;
background:#e6ecec;color:var(--slate);flex:0 0 auto}
.upfile.done .upfile__i{background:rgba(46,140,102,.15);color:#2E8C66}
.upfile.error .upfile__i{background:rgba(192,69,63,.14);color:#C0453F}
.upfile__n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.upfile__n em{display:block;font-style:normal;font-size:11px;color:var(--slate-2)}
.upfile.error .upfile__n em{color:#C0453F}
.upfile__x{background:none;border:0;color:#b9c3c8;cursor:pointer;font-size:13px;padding:2px 4px}
.upfile__x:hover{color:#C0453F}
/* calculator sits on a tinted panel so it reads as a tool, not a form field */
.fc{background:linear-gradient(180deg,rgba(6,59,73,.045),rgba(6,59,73,.02));
border:1px solid rgba(6,59,73,.13);border-radius:8px;padding:18px 16px 20px;margin-bottom:4px}
@media(min-width:760px){.fc{padding:22px 20px 24px}}
.fc__title{font-size:12px}
.fc__sub{font-size:13px}
.fsec{box-shadow:0 1px 2px rgba(6,59,73,.05)}
.grand{background:var(--ink);border-color:var(--ink)}
.grand span{color:rgba(247,248,247,.62)}
.grand b{color:#fff}
/* ================= calculator refinements ================= */
/* 2 — containers are tinted so the white inputs read as inputs */
.grp{background:#e8eef0;border-color:#cfdadd}
.fc{background:linear-gradient(180deg,#e3ebed,#e9eff1);border:1px solid #c8d5d9}
.fsec{background:#eef3f4;border:1px solid #ccd8db;border-radius:8px;overflow:hidden}
.fsec__body{background:transparent}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=number],.f select,.f textarea,
.fsec input,.fsec select{background:#fff;border:1px solid #b9c8cc}
.f input:focus,.f select:focus,.f textarea:focus,.fsec input:focus,.fsec select:focus{
border-color:var(--ink);box-shadow:0 0 0 3px rgba(240,169,30,.35)}
.drop{background:#fff}
/* 1 — Add facade in brand gold */
.fadd{width:100%;padding:13px;border:1.5px dashed var(--accent);border-radius:var(--r);
background:rgba(240,169,30,.12);color:#7a5406;font:inherit;font-weight:700;font-size:14.5px;
cursor:pointer;transition:.2s var(--ease);letter-spacing:.01em}
.fadd:hover{background:var(--accent);color:var(--ink);border-style:solid;
box-shadow:0 8px 20px -8px rgba(240,169,30,.75);transform:translateY(-1px)}
.fadd:active{transform:none}
/* 3 — type and area sit side by side */
.fsec__pick{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.fsec__pick{grid-template-columns:minmax(0,1fr) 150px}}
/* 5 — one static header; only the chevron moves and the body slides */
.fsec__bar{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 8px;
background:#e2eaec;border-bottom:1px solid transparent;transition:background .18s var(--ease)}
.fsec__bar:hover{background:#dce6e9}
.fsec__toggle{flex:1;display:flex;align-items:center;gap:9px;background:none;border:0;padding:0;
cursor:pointer;text-align:left;min-width:0;font:inherit;color:inherit}
.fsec__chev{flex:0 0 auto;width:16px;text-align:center;color:var(--slate);font-size:17px;line-height:1;
transform:rotate(90deg);transition:transform .22s var(--ease)}
.fsec.is-collapsed .fsec__chev{transform:rotate(0deg)}
.fsec__id{min-width:0;flex:1;display:block}
.fsec__name{font-size:14px;font-weight:600;color:var(--ink);display:block;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsec__name.none{font-weight:400;color:var(--slate-2);font-style:italic}
.fsec__meta{display:block;font-family:var(--mono);font-size:10.5px;color:var(--slate-2);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:14px}
.fsec__sum{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--ink);
white-space:nowrap;font-variant-numeric:tabular-nums;flex:0 0 auto}
.fsec__tools{display:flex;flex:0 0 auto}
/* Collapse: grid 0fr trick. Requirements for the height to truly reach zero:
the track has ONE child, and that child carries no padding or border
(with border-box, padding puts a floor under height even at 0fr). */
.fsec__wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s var(--ease)}
.fsec__in{min-height:0;overflow:hidden;visibility:visible;transition:visibility .28s}
.fsec.is-collapsed .fsec__wrap{grid-template-rows:0fr}
.fsec.is-collapsed .fsec__in{visibility:hidden} /* also unreachable by Tab */
.fsec__bar{cursor:pointer}
.fsec:not(.is-collapsed) .fsec__bar{border-bottom-color:#ccd8db}
/* 4 — layers read as sub-parts of the facade above them */
.layers{margin:0;padding:0 12px 0 0;border-top:0;background:transparent;position:relative}
.layer{margin-left:26px;padding:9px 4px 9px 14px;border-bottom:1px solid #dde5e7;position:relative;
background:transparent}
.layer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#c6d3d7}
.layer:first-child::before{top:8px}
.layer:last-child::before{bottom:auto;height:18px}
.layer::after{content:"";position:absolute;left:2px;top:18px;width:9px;height:2px;background:#c6d3d7}
.layer:hover{background:rgba(255,255,255,.6)}
.layer__name{font-size:13.5px}
.layers + .fsec__foot{margin-top:2px}
.fsec__foot{background:#dfe8ea;border-top:1px solid #ccd8db}
/* 6 — footnotes: red asterisk, a touch larger */
.caveats{margin-top:16px}
.caveats li{font-size:12.5px;color:var(--slate);line-height:1.55;padding-left:18px;
position:relative;margin-bottom:6px}
.caveats li::before{content:"*";position:absolute;left:2px;top:1px;color:#C0453F;
font-size:16px;font-weight:700;line-height:1}
/* ---------- openings: sills & fire barriers (whole project) ---------- */
.opn{background:#eef3f4;border:1px solid var(--line);border-radius:8px;margin-bottom:12px;overflow:hidden}
.opn__h{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;background:#e2eaec;border-bottom:1px solid var(--line)}
.opn__n{width:23px;height:23px;border-radius:50%;background:var(--accent);color:var(--ink);
font-family:var(--mono);font-weight:700;font-size:12.5px;display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.opn__id{min-width:0}
.opn__t{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.opn__w{display:block;font-size:12px;color:var(--slate);margin-top:2px;line-height:1.45}
.opn__b{display:grid;grid-template-columns:1fr;gap:13px;padding:13px}
@media(min-width:700px){.opn__b{grid-template-columns:1.3fr 1fr;align-items:center}}
.opn__dia{background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px}
.opn__dia img{width:100%;height:auto;display:block}
.opn__ask{font-size:13px;color:var(--ink);line-height:1.5;margin:0 0 11px}
.siginp{display:flex;align-items:stretch;max-width:240px}
.siginp__s{display:grid;place-items:center;padding:0 12px;background:var(--accent);color:var(--ink);
font-family:var(--mono);font-size:16px;font-weight:700;border-radius:var(--r) 0 0 var(--r)}
.siginp input{flex:1;min-width:0;font:inherit;font-size:15px;padding:10px 12px;
border:1px solid #b9c8cc;border-left:0;border-right:0;border-radius:0;background:#fff}
.siginp input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(240,169,30,.35)}
.siginp__u{display:grid;place-items:center;padding:0 13px;background:var(--ink);color:#fff;
font-family:var(--mono);font-size:13px;border-radius:0 var(--r) var(--r) 0}
/* openings: add buttons + removable cards */
.opns__add{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.opns__addlbl{font-size:12.5px;color:var(--slate);font-weight:600}
.opnadd{font:inherit;font-size:13.5px;font-weight:700;color:#7a5406;background:rgba(240,169,30,.12);
border:1.5px dashed var(--accent);border-radius:var(--r);padding:9px 14px;cursor:pointer;transition:.2s var(--ease)}
.opnadd:hover{background:var(--accent);color:var(--ink);border-style:solid;transform:translateY(-1px);
box-shadow:0 8px 18px -8px rgba(240,169,30,.7)}
.opn__h{position:relative}
.opn__x{margin-left:auto;flex:0 0 auto}
/* facade-area help */
.qbtn{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:6px;padding:0;
border:1.5px solid var(--slate-2);border-radius:50%;background:#fff;color:var(--slate);
font:700 11px/1 var(--mono);cursor:pointer;vertical-align:-3px;transition:.18s}
.qbtn:hover,.qbtn[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.ahelp{background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 8px 2px;margin-top:12px}
.ahelp img{width:100%;height:auto;display:block;max-width:520px;margin:0 auto}
.ahelp p{font-size:12px;color:var(--slate);text-align:center;margin:6px 0 8px}
/* per-facade window sills + fire-barrier maths */
.sillzone{padding:10px 12px;border-top:1px dashed #ccd8db;background:rgba(240,169,30,.04)}
.sillbtn{font:inherit;font-size:12.5px;font-weight:700;color:#7a5406;background:rgba(240,169,30,.12);
border:1.5px dashed var(--accent);border-radius:var(--r);padding:7px 12px;cursor:pointer;transition:.2s var(--ease)}
.sillbtn:hover{background:var(--accent);color:var(--ink);border-style:solid}
.sillrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sillrow__t{font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;flex:0 0 auto}
.siginp--sm{max-width:150px}
.siginp--sm input{font-size:14px;padding:8px 10px}
.siginp--sm .siginp__s{font-size:14px;padding:0 10px}
.siginp--sm .siginp__u{font-size:12px;padding:0 10px}
.sillmath{font-family:var(--mono);font-size:11.5px;color:var(--slate);flex:1;min-width:180px}
.sillmath b{color:var(--ink);font-size:13px}
.sillrow .iconbtn{margin-left:auto}
.firemath{font-family:var(--mono);font-size:12px;color:var(--slate);margin:10px 0 0}
.firemath b{color:var(--ink);font-size:14px}
/* ================= round 3 refinements ================= */
/* 2 — each facade section is unmistakably its own card: strong outline,
gold spine, floating shadow, clear breathing room from the rest of the form */
.fsec{background:#fff;border:1.5px solid #94aab2;border-left:5px solid var(--accent);
border-radius:10px;margin-bottom:18px;
box-shadow:0 2px 4px rgba(6,59,73,.08),0 14px 30px -16px rgba(6,59,73,.4)}
.fsec__bar{background:linear-gradient(180deg,#dce8ea,#d0dfe3)}
.fsec__bar:hover{background:linear-gradient(180deg,#d5e3e6,#c9dade)}
.fsec:not(.is-collapsed) .fsec__bar{border-bottom-color:#b7c9ce}
.fsec__n{width:20px;height:20px;flex:0 0 auto;border-radius:50%;background:var(--ink);color:#fff;
display:grid;place-items:center;font-size:10.5px;font-weight:700}
.fsec__body{background:#fff}
.fsec .layers{background:#f4f7f8}
.fsec__foot{background:#e6edef}
.fempty{background:rgba(255,255,255,.55)}
/* 6 — unticked layers: dim the text, but keep the checkbox crisp and white
so it still reads as clickable */
.layer.off{opacity:1}
.layer.off .layer__name,.layer.off .layer__p{opacity:.45}
.layer input{accent-color:var(--ink);background:#fff;border:1px solid #b9c8cc;border-radius:3px;cursor:pointer}
/* 1 — "Example" links replace the ? bubbles */
.exlink{background:none;border:0;padding:0;margin-left:8px;font:600 12px/1.3 inherit;
font-family:inherit;color:var(--slate);text-decoration:underline;text-underline-offset:2px;
cursor:pointer;transition:color .18s;vertical-align:baseline}
.exlink:hover{color:var(--accent-ink)}
.exlink[aria-expanded="true"]{color:var(--accent-ink);font-weight:700}
/* 3+4 — window pieces (sills / П-trims) inside a facade card */
.piece{padding:10px 0 4px}
.piece + .piece{border-top:1px dashed #ccd8db}
.piece__top{display:flex;align-items:center;gap:4px}
.piece__t{font-size:13px;font-weight:700;color:var(--ink)}
.piece__top .iconbtn{margin-left:auto}
.piece__ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:9px}
.piece__m{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--slate);
font-weight:600;flex:1 1 240px;min-width:0}
.piece__m select{flex:1;min-width:0;font:inherit;font-size:13px;padding:8px 30px 8px 10px;
border:1px solid #b9c8cc;border-radius:var(--r);background:#fff;color:var(--ink);
appearance:none;background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 10px center;background-size:10px}
.piece__m select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(240,169,30,.35)}
.piecemath{font-family:var(--mono);font-size:11.5px;color:var(--slate);margin:8px 0 2px}
.piecemath b{color:var(--ink);font-size:13px}
.piecebtns{display:flex;gap:8px;flex-wrap:wrap}
.piece + .piecebtns,.piece ~ .piecebtns{margin-top:10px;padding-top:10px;border-top:1px dashed #ccd8db}
/* Gold CTAs read as filled buttons from the start — the pale wash made them
look disabled. Hover just deepens the fill and lifts. */
.fadd,.opnadd,.sillbtn{background:var(--accent);color:var(--ink);border-style:solid;
border-color:var(--accent);box-shadow:0 2px 6px rgba(240,169,30,.35)}
.fadd:hover,.opnadd:hover,.sillbtn:hover{background:var(--accent-2);border-color:var(--accent-2);
color:var(--ink);box-shadow:0 10px 22px -6px rgba(240,169,30,.8);transform:translateY(-1px)}
.fadd:active,.opnadd:active,.sillbtn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(240,169,30,.35)}
.fadd{font-size:15px;letter-spacing:.01em}
/* the calculator's own heading, at twice its old size */
.fc__title{font-size:24px;letter-spacing:.06em;line-height:1.2;color:var(--ink)}
.fc__sub{font-size:14px;margin-top:6px}
/* 5 — the big red approximation caveat, right under the grand total */
.approx{margin:12px 0 0;padding:13px 16px;border:2px solid #C0453F;border-radius:var(--r);
background:#fdf3f2;color:#a03832;font-weight:700;font-size:14px;line-height:1.5;text-align:center}