/* ===========================================================================
   TENANT WIDGET STYLE — ifcalc  (loaded AFTER calculator.css + site.css)
   The visual half of the tenant differences file. Re-skins the shared engine
   widget to the IFCALCULATOR homepage look: clean field grid, segmented
   controls, sharp tinted chips, a hero-style "Result" block, a distinct swap
   icon. Another network site would ship its own theme/<site>.css instead.
   =========================================================================== */
.calc .calc-body{padding:26px 28px}
@media(max-width:760px){.calc .calc-body{padding:20px 22px}}
#calcContainer{font-family:var(--font);color:var(--ink)}

/* ---- fields: side-by-side grid (homepage .fields look) ---- */
#calcContainer .calc-inputs{display:grid !important;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end;margin-bottom:20px}
#calcContainer .calc-inputs:has(> :nth-child(3)){grid-template-columns:1fr auto 1fr}
#calcContainer > div[style*="grid"]{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important;gap:16px !important;margin-bottom:20px !important}
@media(max-width:560px){
  #calcContainer .calc-inputs{grid-template-columns:1fr}
  #calcContainer .calc-inputs .swap-btn{justify-self:center}
  #calcContainer > div[style*="grid"]{grid-template-columns:1fr !important}
}
#calcContainer .calc-field{display:flex;flex-direction:column}
#calcContainer .calc-field label{font-size:.74rem;font-weight:600;color:var(--ink-2);margin-bottom:7px;letter-spacing:.005em;text-transform:none}
#calcContainer .input-wrap{position:relative}
#calcContainer .calc-field input,#calcContainer .input-wrap input{
  width:100%;height:46px;padding:0 13px;border:1px solid var(--line);border-radius:0;background:#fbfcfd;
  font:500 1.05rem var(--font);color:var(--ink);font-variant-numeric:tabular-nums;
  box-shadow:inset 0 1px 2px rgba(22,24,29,.03);transition:border-color .15s,box-shadow .15s,background .15s}
#calcContainer .calc-field input:hover,#calcContainer .input-wrap input:hover{border-color:var(--accent-line)}
#calcContainer .calc-field input:focus,#calcContainer .input-wrap input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(31,71,179,.10)}
#calcContainer .input-wrap .unit{color:var(--muted);font-weight:500;font-size:.85rem}

/* ---- selects ---- */
#calcContainer select,#calcContainer .calc-select,#calcContainer .input-wrap>select{
  border-radius:0;border:1px solid var(--line);background:#fbfcfd;font-family:var(--font);color:var(--ink);height:46px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%231f47b3'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
#calcContainer .control-group .precision-select{height:38px;background-color:#fff}
#calcContainer select:hover{border-color:var(--accent-line)}
#calcContainer select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,71,179,.10)}

/* ---- controls row + labels ---- */
#calcContainer .calc-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:6px 0 20px;padding-top:18px;border-top:1px solid var(--line-2)}
#calcContainer .control-group{display:flex;align-items:center;gap:8px}
#calcContainer .clabel{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.09em}

/* ---- toggles → homepage segmented control ---- */
#calcContainer .toggle-group,#calcContainer .input-wrap>.toggle-group{display:inline-flex;width:auto;max-width:100%;flex-wrap:nowrap;vertical-align:middle;border:1px solid var(--line);border-radius:0;min-height:38px;background:#fbfcfd}
#calcContainer .toggle-group button{flex:0 0 auto;white-space:nowrap;border-radius:0;font:600 .85rem var(--font);color:var(--muted);background:transparent;padding:0 14px}
#calcContainer .toggle-group button+button{border-left:1px solid var(--line)}
#calcContainer .toggle-group button.active{background:var(--accent);color:#fff}
#calcContainer .toggle-group button:hover:not(.active){background:var(--accent-tint);color:var(--accent)}

/* ---- quick examples → sharp tinted chips with a distinct leading mark ---- */
#calcContainer .quick-picks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;align-items:center}
#calcContainer .qp-label{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.09em}
#calcContainer .quick-pick{display:inline-flex;align-items:center;gap:7px;border-radius:0;border:1px solid var(--line);background:#fff;font:600 .82rem var(--font);color:var(--ink-2);padding:7px 12px;transition:.15s}
#calcContainer .quick-pick::before{content:"";width:7px;height:7px;background:var(--accent-line);flex:none;transition:background .15s}
#calcContainer .quick-pick:hover{background:var(--accent-tint);border-color:var(--accent-line);color:var(--accent)}
#calcContainer .quick-pick:hover::before{background:var(--accent)}

/* ---- distinct swap icon (clevercalc uses ⇌; ifcalc uses ⇄) ---- */
#calcContainer .swap-btn{border-radius:0;background:var(--accent);color:#fff;width:40px;height:40px;align-self:center;border:0;cursor:pointer;font-size:0;display:grid;place-items:center}
#calcContainer .swap-btn::after{content:"\21C4";font-size:1.1rem;line-height:1}
#calcContainer .swap-btn:hover{background:var(--accent-deep);transform:none}

/* ---- RESULT → homepage hero "result" block (eyebrow + big cobalt number) ---- */
#calcContainer .formula-display{
  display:flex;flex-direction:column;gap:6px;border:0;border-top:1px solid var(--line);border-radius:0;
  background:transparent;padding:20px 0 6px;margin-top:6px}
#calcContainer .formula-display::before{content:"Result";font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}
#calcContainer .formula-display .fd-result{order:2;font-size:2.3rem;font-weight:800;color:var(--accent);letter-spacing:-.02em;line-height:1}
#calcContainer .formula-display .fd-val{order:3;font-size:.85rem;color:var(--muted);font-weight:500}
#calcContainer .formula-display .fd-eq{display:none}

/* ---- custom-calc result blocks: give the big number / panels the ifcalc feel ---- */
#calcContainer [class*="result"]{font-variant-numeric:tabular-nums}
#calcContainer [class$="-result"]{border-radius:0}

/* ===========================================================================
   BESPOKE ifcalc WIDGETS (.wx-*) — built from scratch per calculator, NOT the
   shared engine. Compact, sharp, gradient result panel like the homepage hero.
   =========================================================================== */
.wx{display:flex;flex-direction:column;gap:18px}
.wx-modes{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.wx-modes .ml{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.wx-seg{display:inline-flex;border:1px solid var(--line);background:#fbfcfd;height:38px}
.wx-seg button{border:0;background:transparent;font:600 .82rem var(--font);color:var(--muted);padding:0 15px;cursor:pointer;transition:background .15s,color .15s}
.wx-seg button+button{border-left:1px solid var(--line)}
.wx-seg button:hover:not([aria-pressed="true"]){background:var(--accent-tint);color:var(--accent)}
.wx-seg button[aria-pressed="true"]{background:var(--accent);color:#fff}

.wx-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wx-grid.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:560px){.wx-grid,.wx-grid.three{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.wx-grid,.wx-grid.three{grid-template-columns:1fr}}
.wx-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.wx-field label{font-size:.72rem;font-weight:600;color:var(--ink-2);letter-spacing:.005em}
.wx-input{display:flex;align-items:stretch;border:1px solid var(--line);background:#fbfcfd;height:48px;
  box-shadow:inset 0 1px 2px rgba(22,24,29,.03);transition:border-color .15s,box-shadow .15s,background .15s}
.wx-input input{flex:1;min-width:0;width:100%;border:0;background:transparent;padding:0 13px;
  font:700 1.08rem var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.wx-input input:focus{outline:none}
.wx-input .suf{display:grid;place-items:center;padding:0 13px;background:#eef1f7;border-left:1px solid var(--line);
  font-size:.8rem;color:var(--muted);font-weight:600;white-space:nowrap}
.wx-input:hover{border-color:var(--accent-line)}
.wx-input:focus-within{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(31,71,179,.10)}

.wx-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wx-chips .lbl{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.wx-chip{border:1px solid var(--line);background:#fff;font:600 .8rem var(--font);color:var(--ink-2);padding:7px 12px;cursor:pointer;transition:.15s}
.wx-chip:hover{background:var(--accent-tint);border-color:var(--accent-line);color:var(--accent)}

/* result — gradient panel, big cobalt number (homepage-hero feel) */
.wx-out{background:linear-gradient(135deg,#f4f7fd 0%,#e6edfb 100%);border:1px solid var(--accent-line);padding:22px 24px}
.wx-out .o-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-deep)}
.wx-out .o-main{font-weight:800;font-size:clamp(2rem,4vw,2.6rem);color:var(--accent);letter-spacing:-.025em;line-height:1;margin-top:7px;font-variant-numeric:tabular-nums}
.wx-out .o-sub{font-size:.86rem;color:var(--ink-2);margin-top:8px}
.wx-metrics{display:flex;flex-wrap:wrap;margin-top:18px;border-top:1px solid rgba(31,71,179,.22);padding-top:15px}
.wx-metrics .m{flex:1 1 auto;min-width:110px;padding:0 18px;border-left:1px solid rgba(31,71,179,.18)}
.wx-metrics .m:first-child{padding-left:0;border-left:0}
.wx-metrics .m .mk{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.wx-metrics .m .mv{font-weight:700;font-size:1.1rem;margin-top:4px;font-variant-numeric:tabular-nums;color:var(--ink)}