/* Energy Efficiency — Measure / Manage / Maintain.
 * Page-local refinement of v8. Every selector remains under .ee-tools and
 * tokens remain --ee-* so the shared nav, closing band and footer are untouched.
 * Noto Sans is inherited from the shared site; the native tile keeps its own
 * isolated CSS.
 */

/* ── Tokens ───────────────────────────────────────────── */
.ee-tools{
  --ee-paper:#F5F4EF;
  --ee-paper-2:#FCFBF7;
  --ee-paper-3:#EDEAE0;
  --ee-ink:#16202B;
  --ee-ink-2:#44515E;
  --ee-ink-3:#52606D;
  --ee-teal:#0E6E63;
  --ee-teal-deep:#0A5D57;
  --ee-teal-wash:#E3EEEC;
  --ee-ochre:#B0801F;
  --ee-rule:rgba(22,32,43,.16);
  --ee-rule-soft:rgba(22,32,43,.09);
  --ee-radius:10px;

  /* Light only. No theme toggle, no storage, no OS-preference switch: the
     document stays on paper even under a dark OS, and the native tile pins
     itself to light inside its own bootstrap. */
  color-scheme:light;

  color:var(--ee-ink);
  font-size:16px;
  line-height:1.55;
}

/* .btn and friends set display, which would otherwise outrank the UA rule. */
.ee-tools [hidden]{display:none !important}
.ee-tools img{max-width:100%}
.ee-tools h1,.ee-tools h2,.ee-tools h3{
  margin:0;line-height:1.12;letter-spacing:-.018em;font-weight:600;
}
.ee-tools p{margin:0}
/* The accent phrase inside a heading, matched to the live EMS product page:
   rgb(14,110,99), weight 700, upright. Colour and weight only — the heading
   typography follows the page-local hierarchy below. */
.ee-tools .hl{color:#0E6E63;font-weight:700;font-style:normal}
/* Screen-reader-only. Used by the schedule help text and the scene status, so
   neither returns as a visible paragraph. */
.ee-tools .vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.ee-tools a{color:var(--ee-teal-deep)}
.ee-tools :focus-visible{outline:2px solid var(--ee-teal);outline-offset:3px;border-radius:3px}
.ee-tools .note{font-size:14px;line-height:1.55;color:var(--ee-ink-3)}
.ee-tools .note b{color:var(--ee-ink-2);font-weight:600}

/* Incoming fragments from the page this replaced (#phases, #incentives,
   #phase-before / -during / -after) land on empty spans pinned to the top of
   the section they now correspond to. They add no box and no text; they only
   carry the offset for the fixed 56px header. */
.ee-tools .ee-anchor{display:block;height:0;scroll-margin-top:calc(var(--nav-h,56px) + 12px)}
.ee-tools [id]{scroll-margin-top:calc(var(--nav-h,56px) + 12px)}

/* ── Intro ────────────────────────────────────────────── */
/* Intentional breathing room below the fixed header, without a full-screen hero. */
.ee-tools .intro{
  padding:calc(var(--nav-h,56px) + clamp(36px,5vw,64px)) 0 clamp(28px,4vw,48px);
  max-width:52rem;
}
/* Match the EMS page-title and sec-title responsive heading treatment. */
.ee-tools .intro h1{font-size:clamp(34px,3.6vw,52px);font-weight:700;letter-spacing:-.02em}
.ee-tools .intro__lede{margin-top:20px;max-width:38rem;font-size:clamp(16px,1.6vw,18px);color:var(--ee-ink-2)}
.ee-tools .intro__lede b{color:var(--ee-ink);font-weight:600}

.ee-tools .noscript{
  margin-top:14px;padding:12px 14px;border:1px solid var(--ee-rule);
  border-left:3px solid var(--ee-ochre);border-radius:6px;
  font-size:14px;color:var(--ee-ink-2);background:var(--ee-paper-2);
}

/* ── Phases ───────────────────────────────────────────── */
.ee-tools .phases{list-style:none;margin:0;padding:0}
.ee-tools .phase{padding:clamp(32px,5vw,56px) 0;border-top:1px solid var(--ee-rule-soft)}
.ee-tools .phase__head{max-width:38rem}
.ee-tools .phase__head h2{font-size:clamp(28px,3.6vw,40px);font-weight:650;letter-spacing:-.02em}
.ee-tools .phase__lede{margin-top:12px;font-size:16px;color:var(--ee-ink-2)}
.ee-tools .phase__foot{margin-top:18px}
.ee-tools .link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;text-decoration:none;color:var(--ee-teal-deep);
  /* a 34px tap target without moving a pixel: the padding grows the hit box,
     the matching negative margin gives the space back (2026-09-26) */
  padding:6px 0;margin:-6px 0;
}
.ee-tools .link:hover{text-decoration:underline}
/* The registered mark must never be the only thing left on a wrapped line, and
   the arrow must stay welded to the last word of the label. */
.ee-tools .nowrap{white-space:nowrap}

.ee-tools .panel{
  margin-top:22px;padding:clamp(16px,2.4vw,24px);
  background:var(--ee-paper-2);border:1px solid var(--ee-rule-soft);border-radius:var(--ee-radius);
}

/* ── 1 · Fund ─────────────────────────────────────────── */
.ee-tools .panel--fund{display:grid;gap:clamp(18px,3vw,34px);grid-template-columns:1fr;align-items:start}
.ee-tools .budget{min-width:0}
.ee-tools .budget__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--ee-rule-soft);
}
.ee-tools .budget__row span{font-size:16px;color:var(--ee-ink-2)}
.ee-tools .budget__row b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.ee-tools .budget__row--incentive b{color:var(--ee-teal-deep)}
.ee-tools .budget__row--net{
  border-bottom:0;padding-top:11px;margin-top:3px;
  border-top:1.5px solid var(--ee-ink);align-items:center;
}
.ee-tools .budget__row--net span{color:var(--ee-ink);font-weight:600;font-size:16px}
.ee-tools .budget__row--net b{font-size:clamp(25px,3.4vw,31px);letter-spacing:-.02em}

/* The proposal estimate is fixed; the schedule model below stays interactive. */
.ee-tools .proposal-return{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--ee-rule-soft)}
.ee-tools .proposal-return > div{min-width:0;text-align:center}
.ee-tools .proposal-return__label{display:block;font-size:13px;color:var(--ee-ink-3)}
.ee-tools .proposal-return b{display:block;margin-top:4px;font-size:clamp(22px,2vw,27px);line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ee-teal-deep);white-space:nowrap}
.ee-tools .proposal-return small{display:block;margin-top:5px;font-size:11px;color:var(--ee-ink-3)}

/* Two equal, centred columns under the schedule bar (2026-09-26, John). */
.ee-tools .payback{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;text-align:center;
}
.ee-tools .payback__cell{min-width:0;overflow-wrap:anywhere}
.ee-tools .payback__lbl{display:block;font-size:14px;color:var(--ee-ink-3)}
/* Both money figures carry the same dark green at rest ($0 / —) and once the
   schedule makes them live, so the pair never changes identity mid-interaction.
   #175C38 on the paper surface is ~7.5:1, well past AA for this weight. */
.ee-tools .payback__val{
  display:block;margin-top:4px;font-size:clamp(22px,2.2vw,28px);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:#175C38;
}
.ee-tools .payback[data-live="yes"] .payback__val{color:#175C38}


/* Spans the whole fund tile and sits under both columns — it qualifies the
   panel, not the budget column. */
.ee-tools .fund__legal{
  grid-column:1/-1;margin:0;
  font-size:11px;line-height:1.5;color:var(--ee-ink-3);
}

.ee-tools .masssave{
  padding:0;
}
.ee-tools .masssave img{width:112px;height:auto;display:block;margin-inline:auto}
.ee-tools .masssave p{margin-top:12px;font-size:16px;line-height:1.55;color:var(--ee-ink-2)}
.ee-tools .masssave .link{margin-top:6px;font-size:14px} /* 6 + the 6px hit-box padding = the old 12 */

/* ── Disclosures ──────────────────────────────────────── */
.ee-tools .disc{margin-top:16px;border-top:1px solid var(--ee-rule-soft);padding-top:10px}
.ee-tools .disc summary{
  cursor:pointer;font-size:14px;font-weight:600;color:var(--ee-ink-2);
  min-height:44px;padding:8px 2px;list-style:none;display:flex;align-items:center;gap:8px;
}
.ee-tools .disc summary::-webkit-details-marker{display:none}
.ee-tools .disc summary::before{
  content:"";width:7px;height:7px;flex:0 0 auto;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg);transition:transform .16s ease;margin-left:2px;
}
.ee-tools .disc[open] summary::before{transform:rotate(45deg)}
.ee-tools .disc summary:hover{color:var(--ee-ink)}
.ee-tools .disc__body{padding:6px 2px 4px}
.ee-tools .disc__body>*+*{margin-top:11px}
.ee-tools .disc--wide{max-width:none}

/* ── Maintain · More information on BuildingPulse ─────── */
/* The real Usage, Emissions and Costs cards (2026-09-30, John), stepped like
   the homepage Service gallery by bp-tiles.js. Words and choices first, the
   card after them; from 1060 the disclosure spans both section columns with
   the words left and the card right (see "Split layout"). The card frame is
   the Live tile's: 560 wide at most, the card's own height, no surface of
   ours, and the same raised shadow (--tile-shadow) drawn in this document. */
.ee-tools .bpmore .disc__body{padding-top:12px}
.ee-tools .bpmore__deck{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;min-width:0}
.ee-tools .bpmore__copy{min-width:0;display:flex;flex-direction:column;gap:14px}
.ee-tools .bpmore__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ee-tools .bpmore__item{border-left:2px solid var(--ee-rule);padding:0 0 0 14px}
.ee-tools .bpmore__head{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em;color:var(--ee-ink)}
.ee-tools .bpmore__line{margin:4px 0 10px;font-size:15px;line-height:1.55;color:var(--ee-ink-2);max-width:34rem}
.ee-tools .bpmore__choice{
  appearance:none;font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;
  padding:8px 0;min-height:44px;width:100%;text-align:left;cursor:pointer;
}
.ee-tools .bpmore__choice:focus-visible{outline:2px solid var(--ee-teal);outline-offset:2px;border-radius:2px}
/* Enhanced: one description open at a time, the current card's. */
.ee-tools .bpmore__deck.is-enhanced .bpmore__line{display:none}
.ee-tools .bpmore__deck.is-enhanced .bpmore__choice{color:var(--ee-ink-2);font-weight:550}
.ee-tools .bpmore__deck.is-enhanced .bpmore__choice:hover{color:var(--ee-teal-deep)}
.ee-tools .bpmore__deck.is-enhanced .is-current{border-left-color:var(--ee-teal)}
.ee-tools .bpmore__deck.is-enhanced .is-current .bpmore__choice{color:var(--ee-ink);font-weight:650}
.ee-tools .bpmore__deck.is-enhanced .is-current .bpmore__line{display:block}
/* Card first, words below (under the split; DOM order is card then copy, so
   reading and tab order match): the choices share one row and every
   description sits in the same grid cell beneath them, only the current one
   visible, so the row is always the tallest description's height and the
   controls under it never move when the choice changes. */
@media (max-width:1059.98px){
  .ee-tools .bpmore__deck.is-enhanced .bpmore__list{display:grid;grid-template-columns:repeat(3,auto) minmax(0,1fr);column-gap:22px;row-gap:0}
  .ee-tools .bpmore__deck.is-enhanced .bpmore__item{display:contents}
  .ee-tools .bpmore__deck.is-enhanced .bpmore__head{grid-row:1;border-bottom:2px solid var(--ee-rule)}
  .ee-tools .bpmore__deck.is-enhanced .is-current .bpmore__head{border-bottom-color:var(--ee-teal)}
  .ee-tools .bpmore__deck.is-enhanced .bpmore__line{display:block;visibility:hidden;grid-row:2;grid-column:1/-1;margin:10px 0 0}
  .ee-tools .bpmore__deck.is-enhanced .is-current .bpmore__line{visibility:visible}
}
.ee-tools .bpmore__foot{display:flex;align-items:center;gap:12px;min-height:44px}
.ee-tools .bpmore__foot[hidden]{display:none}
.ee-tools .bpmore__timer{display:block;width:60px;height:2px;background:var(--ee-rule);overflow:hidden;border-radius:1px}
.ee-tools .bpmore__timer i{display:block;height:100%;width:100%;background:var(--ee-teal);transform:scaleX(0);transform-origin:left center}
.ee-tools .bpmore__deck.is-running .bpmore__timer i{transform:scaleX(1);transition:transform 5s linear}
.ee-tools .bpmore__nav{display:flex;align-items:center;gap:8px}
.ee-tools .bpmore__btn{
  width:44px;height:44px;border-radius:50%;padding:0;cursor:pointer;
  display:grid;place-items:center;border:1px solid var(--ee-rule);
  background:var(--ee-paper-2);color:var(--ee-ink-2);
}
.ee-tools .bpmore__btn[hidden]{display:none}
.ee-tools .bpmore__btn svg{width:16px;height:16px}
.ee-tools .bpmore__btn--play svg{fill:currentColor}
.ee-tools .bpmore__btn:hover{color:var(--ee-teal-deep);border-color:var(--ee-teal)}
.ee-tools .bpmore__btn:focus-visible{outline:2px solid var(--ee-teal);outline-offset:3px}
.ee-tools .bpmore__link{margin-top:2px}
.ee-tools .bpmore__stage{margin:0;min-width:0;width:560px;max-width:100%}
.ee-tools .bpmore__shell{position:relative;min-height:200px;--bpt-card-h:var(--tile-card-h,600px);--bpt-card-r:var(--tile-radius,20px)}
.ee-tools .bpmore__shell::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:var(--bpt-card-h);
  border-radius:var(--bpt-card-r);pointer-events:none;opacity:0;
  box-shadow:var(--tile-shadow);transition:opacity .4s ease;
}
.ee-tools .bpmore__shell[data-state="ready"]::before{opacity:1}
.ee-tools .bpmore__shell iframe{
  display:block;width:100%;height:600px;border:0;background:transparent;opacity:0;transition:opacity .2s ease;
}
.ee-tools .bpmore__shell:not([data-state="ready"]) iframe{height:0}
.ee-tools .bpmore__shell[data-state="ready"] iframe{opacity:1}
.ee-tools .bpmore__shell[data-state="ready"]{min-height:0}
.ee-tools .bpmore__msg{
  display:flex;align-items:center;justify-content:center;min-height:200px;
  padding:18px;text-align:center;font-size:14px;color:var(--ee-ink-3);margin:0;
}
.ee-tools .bpmore__shell[data-state="ready"] .bpmore__msg{display:none}
.ee-tools .bpmore__shell[data-state="error"]{min-height:0}
.ee-tools .bpmore__shell[data-state="error"] .bpmore__msg{
  display:block;min-height:0;text-align:left;
  border:1px solid var(--ee-rule);border-left:3px solid var(--ee-ochre);border-radius:6px;
  padding:12px 14px;background:var(--ee-paper-2);color:var(--ee-ink-2);
}
.ee-tools .bpmore__prov{margin-top:14px;font-size:13px;line-height:1.5;color:var(--ee-ink-3);max-width:34rem}

.ee-tools .field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.ee-tools .field label{font-size:14px;color:var(--ee-ink-2)}
.ee-tools .field input{
  width:130px;font:inherit;font-size:14px;text-align:right;
  font-variant-numeric:tabular-nums;padding:7px 9px;
  border:1px solid var(--ee-rule);border-radius:6px;
  background:var(--ee-paper);color:var(--ee-ink);min-height:38px;
}
.ee-tools .field select{
  font:inherit;font-size:14px;padding:7px 9px;min-height:44px;
  border:1px solid var(--ee-rule);border-radius:6px;
  background:var(--ee-paper);color:var(--ee-ink);
}
.ee-tools .field input:focus-visible,.ee-tools .field select:focus-visible{outline:2px solid var(--ee-teal);outline-offset:1px}
.ee-tools .field input:disabled,.ee-tools .field select:disabled{opacity:.55;cursor:not-allowed}

/* ── 2 · Build · schedule instrument ──────────────────── */
.ee-tools .panel--sched{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.ee-tools .sched{min-width:0}
.ee-tools .sched__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ee-tools .sched__hours{font-size:14px;color:var(--ee-ink-2)}
.ee-tools .sched__hours b{font-size:17px;font-weight:600;color:var(--ee-ink);font-variant-numeric:tabular-nums}
.ee-tools .sched__span{font-size:14px;color:var(--ee-ink-3);font-variant-numeric:tabular-nums}
.ee-tools .sched__axis{
  display:flex;justify-content:space-between;
  margin:14px 0 5px;font-size:13px;color:var(--ee-ink-3);
}
.ee-tools .sched__axis span:first-child{margin-left:-2px}
.ee-tools .sched__axis span:last-child{margin-right:-2px}

.ee-tools .track{
  position:relative;height:62px;border-radius:8px;
  background:var(--ee-paper-3);border:1px solid var(--ee-rule-soft);
  touch-action:pan-y;cursor:pointer;
}
/* Inert until model.js is confirmed present. */
.ee-tools .track[data-enabled="no"]{opacity:.5;pointer-events:none;cursor:default}
.ee-tools .track__grid{
  position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),var(--ee-rule-soft) calc(25% - 1px),var(--ee-rule-soft) 25%);
}
.ee-tools .track__band{
  position:absolute;top:0;bottom:0;
  background:var(--ee-teal-wash);border-left:2px solid var(--ee-teal);border-right:2px solid var(--ee-teal);
  pointer-events:none;
}
/* 44px wide × 58px tall. Crowded targets separate vertically at the minimum
   interval; both retain their own pointer target and full keyboard controls. */
.ee-tools .knob{
  position:absolute;top:50%;width:44px;height:58px;
  transform:translate(-50%,-50%);
  background:var(--ee-paper-2);border:1.5px solid var(--ee-teal);border-radius:7px;
  cursor:ew-resize;touch-action:none;
  display:flex;align-items:center;justify-content:center;
}
.ee-tools #knobEnd{z-index:2}
.ee-tools .knob:focus-visible,.ee-tools .knob[data-drag="1"]{z-index:3}
.ee-tools .track[data-tight="yes"]{height:132px}
.ee-tools .track[data-tight="yes"] #knobStart{top:33px}
.ee-tools .track[data-tight="yes"] #knobEnd{top:99px}
.ee-tools .knob::after{
  content:"";width:2px;height:18px;border-radius:2px;background:var(--ee-teal);
  box-shadow:-4px 0 0 var(--ee-teal),4px 0 0 var(--ee-teal);
}
.ee-tools .knob:hover,.ee-tools .knob[data-drag="1"]{background:var(--ee-teal-wash)}
.ee-tools .knob:focus-visible{outline:2px solid var(--ee-teal);outline-offset:3px}

/* Handle cue: a small chevron that nudges in the direction that handle moves.
   It lives inside the 44px knob (7px in from the inner edge, ~5px of travel),
   so it can never be clipped by the track at 320px and never covers the grip
   or shrinks the tap target — it is inert to the pointer either way. JS only
   flips data-cued on the track; every timing decision is here. */
.ee-tools .knob__cue{
  position:absolute;top:50%;width:7px;height:7px;
  border-right:2px solid var(--ee-teal);border-bottom:2px solid var(--ee-teal);
  border-radius:1px;opacity:0;pointer-events:none;
}
.ee-tools #knobStart .knob__cue{right:7px;transform:translate(0,-50%) rotate(-45deg)}
.ee-tools #knobEnd .knob__cue{left:7px;transform:translate(0,-50%) rotate(135deg)}
/* Finite: three passes, then it is gone for good. `forwards` is unnecessary —
   the keyframes land back on the resting opacity:0. */
.ee-tools .track[data-enabled="yes"][data-cued="idle"] #knobStart .knob__cue{
  animation:eeCueRight 1.5s ease-in-out .4s 3;
}
.ee-tools .track[data-enabled="yes"][data-cued="idle"] #knobEnd .knob__cue{
  animation:eeCueLeft 1.5s ease-in-out .4s 3;
}
@keyframes eeCueRight{
  0%,100%{opacity:0;transform:translate(0,-50%) rotate(-45deg)}
  35%{opacity:.95;transform:translate(4px,-50%) rotate(-45deg)}
  70%{opacity:.35;transform:translate(5px,-50%) rotate(-45deg)}
}
@keyframes eeCueLeft{
  0%,100%{opacity:0;transform:translate(0,-50%) rotate(135deg)}
  35%{opacity:.95;transform:translate(-4px,-50%) rotate(135deg)}
  70%{opacity:.35;transform:translate(-5px,-50%) rotate(135deg)}
}

.ee-tools .readout{
  padding-top:18px;border-top:1px solid var(--ee-rule);min-width:0;
}
.ee-tools .readout__sub{margin-top:12px;font-size:16px;line-height:1.55;color:var(--ee-ink-2)}
.ee-tools .readout__comparison{margin-top:12px;color:var(--ee-ink-2)}

.ee-tools .measures{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ee-tools .measures li{
  padding:13px 15px;border:1px solid var(--ee-rule-soft);border-radius:8px;background:var(--ee-paper);
}
.ee-tools .measures h3{font-size:16px;font-weight:600}
.ee-tools .measures p{margin-top:6px;font-size:16px;line-height:1.55;color:var(--ee-ink-2)}
.ee-tools .measures .m__fig{
  display:block;margin-top:9px;font-size:16px;font-weight:600;
  color:var(--ee-teal-deep);font-variant-numeric:tabular-nums;
}
.ee-tools .measures .m__qual{margin-top:4px;font-size:14px;color:var(--ee-ink-3)}

/* ── 3 · Measure · native tile ────────────────────────── */
.ee-tools .live__copy{min-width:0}
.ee-tools .live__copy{margin-top:20px}
.ee-tools .live__copy p+p{margin-top:10px}
.ee-tools .live__intro{font-size:16px;line-height:1.6;color:var(--ee-ink-2);max-width:38rem}

/* Stacked, the counter leads the Maintain column above the heading
   (2026-09-26, John). In the split layout it moves beside SHED LOAD; see the
   #measure rules under "Split layout". */
.ee-tools .shed{margin:0 0 clamp(24px,3vw,36px)}
.ee-tools .shed__hint{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 12px 0;min-height:44px;font-size:14px;line-height:1.5;
  color:var(--ee-ink-2);text-align:center;
}
.ee-tools .shed__hint[hidden]{display:none}
.ee-tools .shed__hint svg{flex:0 0 36px;margin-top:-28px;color:var(--ee-teal-deep)}
/* Desktop: the hint sits to the right of the tile, level with SHED LOAD and
   pointing at it (2026-09-23, John). maintain.js turns this on only when the
   right-hand column is clear at that height; otherwise, and on every narrower
   screen, the hint stays under the tile with the upward arrow. The tile is
   560px wide on wide desktops and fluid, narrower, on narrow split screens
   (from 1060px, until the copy's 440px minimum leaves it room for 560); its
   height does not follow its width. --hint-button-y is where the button's
   centre sits above its bottom edge: 99px, or 93px once the frame is 540px
   wide or narrower, where the tile's own stylesheet shortens SHED LOAD from
   104px to 92px. Declared on the section so the savings counter can align to
   it too; the tile's card is 600px tall with a 20px radius, the top of a 612px
   frame. These are the defaults for frames wider than 540px; maintain.js
   overrides both on #measure from the frame element's width. Since the counter took the place beside the button
   (2026-09-26), its column always reaches past the hint, so the hint stays
   under the tile. */
.ee-tools #measure{--hint-button-y:99px;--tile-card-h:600px;--tile-radius:20px;--shed-button-h:104px;
  /* One shadow for both card frames (Live and the BuildingPulse cards). */
  --tile-shadow:0 1px 2px rgba(22,32,43,.08),0 6px 14px -4px rgba(22,32,43,.10),0 22px 44px -14px rgba(22,32,43,.24)}
.ee-tools .shed__hint-side{display:none}
.ee-tools .live[data-hint-side="yes"]{position:relative}
.ee-tools .live[data-hint-side="yes"] .shed__hint{
  position:absolute;left:calc(100% + 12px);top:calc(100% - var(--hint-button-y));
  transform:translateY(-50%);justify-content:flex-start;padding:0;text-align:left;white-space:nowrap;
}
.ee-tools .live[data-hint-side="yes"] .shed__hint-side{display:block;flex:0 0 46px;margin-top:0}
.ee-tools .live[data-hint-side="yes"] .shed__hint-below{display:none}
/* The figure leads and its label reads to the right of it, the pair centred
   in the column and the label centred on the figure, with no box around
   either (2026-09-26, John). They never wrap onto two rows: the figure keeps
   its size and the label wraps inside what is left. The label stays first in
   the markup so a screen reader hears what the number is before the number;
   order:-1 only moves the figure visually. The figure reserves the width of
   its largest value (::after, never painted or read aloud) so the label does
   not shuffle right each time the counter gains a digit. */
.ee-tools .shed__meter{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;column-gap:clamp(14px,2vw,20px)}
.ee-tools .shed__lbl{
  flex:0 1 15rem;min-width:0;overflow-wrap:break-word;text-align:center;
  font-size:clamp(16px,1.5vw,19px);font-weight:500;line-height:1.35;color:var(--ee-ink-2);
}
.ee-tools .shed__val{
  order:-1;flex:0 0 auto;display:block;margin:0;text-align:center;white-space:nowrap;
  font-size:clamp(40px,calc(30px + 2vw),56px);font-weight:600;line-height:1.1;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--ee-teal-deep);
}
.ee-tools .shed__val::after{content:"$0,000";content:"$0,000"/"";display:block;height:0;overflow:hidden;visibility:hidden}

/* The tile carries its own card design. We contribute no surface: no border,
   background or padding. The one thing added is a raised shadow around the
   card itself (2026-09-26, John), drawn in this document so the frame cannot
   clip it. An outer box-shadow never paints inside its box, so this transparent
   layer shows nothing over the card and takes no pointer. It appears only once
   the tile is ready, so a loading or failed frame never looks like a card. */
.ee-tools .live{width:560px;max-width:100%;min-width:0}
.ee-tools .frameshell{
  position:relative;min-height:200px;
  border:0;background:transparent;border-radius:0;overflow:visible;
}
.ee-tools .frameshell::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:var(--tile-card-h);
  border-radius:var(--tile-radius);pointer-events:none;opacity:0;
  box-shadow:var(--tile-shadow);
  transition:opacity .4s ease;
}
.ee-tools .frameshell[data-state="ready"]::before{opacity:1}
.ee-tools .frameshell iframe{
  display:block;width:560px;max-width:100%;height:600px;border:0;
  background:transparent;opacity:0;transition:opacity .2s ease;
}
.ee-tools .frameshell[data-state="ready"] iframe{opacity:1}
.ee-tools .frameshell iframe:not([srcdoc]){height:200px}
.ee-tools .frameshell[data-state="ready"]{min-height:0}
.ee-tools .frameshell[data-state="ready"] .frameshell__msg{display:none}
.ee-tools .frameshell__msg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:18px;text-align:center;font-size:14px;color:var(--ee-ink-3);
}
/* Never display:none the frame — the load may still be in flight and we want it
   to be able to recover into the ready state. Collapse it visually instead.
   The failure text gets its own note box; that box is a message, not a frame
   drawn around a working tile. */
.ee-tools .frameshell[data-state="error"]{min-height:120px}
.ee-tools .frameshell[data-state="error"] iframe{height:0;opacity:0}
.ee-tools .frameshell[data-state="error"] .frameshell__msg{
  position:static;display:block;text-align:left;max-width:34rem;
  border:1px solid var(--ee-rule);border-left:3px solid var(--ee-ochre);border-radius:6px;
  padding:12px 14px;background:var(--ee-paper-2);color:var(--ee-ink-2);
}


.ee-tools .linkbtn{
  font:inherit;font-size:14px;font-weight:600;line-height:1.4;
  color:var(--ee-teal-deep);background:none;border:0;padding:4px 2px;
  /* Text-styled, but still a real tap target on touch. */
  min-height:44px;display:inline-flex;align-items:center;
  cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;flex:0 0 auto;
}
.ee-tools .linkbtn:hover{color:var(--ee-teal)}
.ee-tools .linkbtn:disabled{color:var(--ee-ink-3);cursor:not-allowed;text-decoration:none}

/* ── Split phases: media beside the content ───────────── */
.ee-tools .phase__media{margin:0 0 18px}
.ee-tools .phase__body{min-width:0}

/* ── 1 · Fund · the sample proposal ───────────────────── */
.ee-tools .proposal{margin:0}
.ee-tools .proposal__zoom{
  display:block;padding:0;margin:0;border:0;background:none;
  cursor:zoom-in;position:relative;line-height:0;
}
.ee-tools .proposal__zoom:disabled{cursor:default}
.ee-tools .proposal__zoom img{
  display:block;width:auto;height:var(--doc-h,200px);
  aspect-ratio:1530/1980;object-fit:contain;
  box-shadow:0 1px 2px rgba(22,32,43,.14),0 8px 22px rgba(22,32,43,.10);
}
.ee-tools .proposal__cue{
  position:absolute;right:8px;bottom:8px;
  font-size:14px;font-weight:600;line-height:1;
  padding:7px 9px;border-radius:5px;
  background:rgba(22,32,43,.78);color:#FCFBF7;
  opacity:1;
}
.ee-tools .proposal__zoom:hover .proposal__cue,
.ee-tools .proposal__zoom:focus-visible .proposal__cue{opacity:1}
.ee-tools .proposal__zoom:disabled .proposal__cue{display:none}
.ee-tools .proposal__cap{margin-top:9px}

/* The dialog is a child of .ee-tools in the DOM, so it keeps these tokens and
   this scope even while it is promoted into the top layer. */
.ee-tools .lightbox{
  width:min(96vw,1120px);max-width:96vw;height:min(94vh,1600px);max-height:94vh;
  padding:0;border:1px solid var(--ee-rule);border-radius:10px;
  background:var(--ee-paper-2);color:var(--ee-ink);overflow:hidden;
}
.ee-tools .lightbox::backdrop{background:rgba(10,14,18,.66)}
.ee-tools .lightbox[open]{display:flex;flex-direction:column}
.ee-tools .lightbox__bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-bottom:1px solid var(--ee-rule-soft);flex:0 0 auto;
}
.ee-tools .lightbox__title{font-size:14px;font-weight:600;color:var(--ee-ink-2)}
.ee-tools .lightbox__scroll{flex:1 1 auto;overflow:auto;padding:14px;background:var(--ee-paper-3)}
.ee-tools .lightbox__scroll img{
  display:block;margin:0 auto;width:100%;max-width:900px;height:auto;
  background:#fff;box-shadow:0 2px 10px rgba(22,32,43,.22);
}

/* ── 2 · Build · the building scene ───────────────────── */
.ee-tools .scene{margin:0}
.ee-tools .scene__svg{
  display:block;width:100%;height:auto;aspect-ratio:420/300;
  --b-wall:#EFEBE0;
  --b-wall-2:#DCD6C6;
  --b-slab:#C9C2AF;
  --b-glass:#D4E3E1;
  --b-glass-2:#C4D8D6;
  --b-equip:#C9CFD4;
  --b-equip-2:#A9B2BA;
  --b-wood:#C79A52;
  --b-wood-2:#B0801F;
  --b-screen:#47566A;
  --b-panel:#2B3946;
  --b-pipe:#8A939C;
  --b-teal-soft:#7FB3AC;
  --b-paper:#FCFBF7;
  --b-glow:#E7C873;
  --b-line:rgba(22,32,43,.62);
  --b-occ:#324352;
  --b-occ-op:1;
  --b-lit-op:0;
  --b-air:#1E7FB0;
  --b-blade:#5E6B77;
}
.ee-tools .fan__rotor path{fill:var(--b-blade);stroke:none;opacity:.92}
.ee-tools .fan__hub{fill:var(--b-line);stroke:none}
.ee-tools .flow{
  stroke:var(--b-air);stroke-width:2.1;
  opacity:0;visibility:hidden;
}
.ee-tools .flow__line{stroke-dasharray:9 11;stroke-dashoffset:0}
.ee-tools .flow__tips path{stroke-width:2.1}

/* Truthful states. Nothing animates unless JS has confirmed the schedule. */
.ee-tools .scene[data-running="yes"] .flow{opacity:.95;visibility:visible}
.ee-tools .scene[data-running="yes"][data-animate="yes"] .fan__rotor{
  animation:eeFanspin 1.25s linear infinite;
}
.ee-tools .scene[data-running="yes"][data-animate="yes"] .flow__line{
  animation:eeFlowdash 1.15s linear infinite;
}
.ee-tools .scene[data-running="yes"][data-animate="yes"] .flow__line--b{animation-delay:-.24s}
.ee-tools .scene[data-running="yes"][data-animate="yes"] .flow__line--c{animation-delay:-.48s}
.ee-tools .scene[data-running="yes"][data-animate="yes"] .flow__line--d{animation-delay:-.72s}
/* Must out-specify (and follow) the two rules above: the `animation` shorthand
   resets animation-play-state, so a lower-specificity pause rule is silently
   discarded. */
.ee-tools .scene[data-running="yes"][data-animate="yes"][data-paused="yes"] .fan__rotor,
.ee-tools .scene[data-running="yes"][data-animate="yes"][data-paused="yes"] .flow__line{
  animation-play-state:paused;
}
@keyframes eeFanspin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes eeFlowdash{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}

/* Only accessible scene state remains in the caption. Prose follows the H2. */
.ee-tools .scene__cap{margin:0}
.ee-tools .scene__status{margin:0}
.ee-tools .ba{display:grid;gap:18px;margin-top:24px;max-width:38rem}
.ee-tools .ba__block{min-width:0}
/* Plain title-case labels, not tracked-out eyebrows: they are the headings of
   two short blocks of prose, and should read at the same pitch as that prose. */
.ee-tools .ba__lbl{font-size:16px;font-weight:700;letter-spacing:-.01em;color:#0E6E63}
.ee-tools .ba__block p{margin-top:6px;font-size:16px;line-height:1.55;color:var(--ee-ink-2)}
.ee-tools .symboldefs{position:absolute;width:0;height:0;overflow:hidden}

.ee-tools .reads{margin:0;display:grid;gap:13px}
.ee-tools .reads dt{font-size:16px;font-weight:600}
.ee-tools .reads dd{margin:4px 0 0;font-size:16px;line-height:1.55;color:var(--ee-ink-2)}



/* ── Responsive ───────────────────────────────────────── */
/* Compact-first media. Below the split breakpoint the visual leads the section
   but stays a thumbnail: the reader should meet the heading without scrolling
   past a full-bleed picture. */
.ee-tools .proposal__zoom img{--doc-h:200px}
/* v8 draws the building ~10% larger than v7 at every size. The aspect ratio is
   unchanged (420/300), so this is a real scale-up of the artwork, not viewBox
   padding. 330px wide ⇒ 236px tall on phones (v7 ≈ 214px, ceiling 260px). */
.ee-tools .scene__svg{max-width:330px}

@media (min-width:680px){
  .ee-tools .payback{gap:10px 26px}

}
@media (min-width:760px){
  .ee-tools .proposal__zoom img{--doc-h:260px}
  .ee-tools .scene__svg{max-width:418px}
}
@media (min-width:860px){
  .ee-tools .panel--fund{grid-template-columns:minmax(0,1.55fr) minmax(230px,.9fr)}

  .ee-tools .measures{grid-template-columns:repeat(3,1fr);gap:15px}
  .ee-tools .reads{grid-template-columns:repeat(3,1fr);gap:22px}
}

/* ── Split layout: prominent visual left / right / left ── */
@media (min-width:1060px){
  .ee-tools .phase--split{
    display:grid;align-items:start;
    gap:clamp(28px,3.4vw,52px) clamp(28px,3.4vw,52px);
  }
  .ee-tools .phase--split .phase__media{grid-row:1;margin:0;min-width:0}
  .ee-tools .phase--split .phase__body{grid-row:1;min-width:0}
  .ee-tools .phase--media-left .phase__media{grid-column:1}
  .ee-tools .phase--media-left .phase__body{grid-column:2}
  .ee-tools .phase--media-right .phase__media{grid-column:2}
  .ee-tools .phase--media-right .phase__body{grid-column:1}

  .ee-tools #fund.phase--split{grid-template-columns:minmax(260px,360px) minmax(0,1fr)}
  /* 462px = v7's 420px + 10%; the drawing is the only thing in this column. */
  .ee-tools #build.phase--split{grid-template-columns:minmax(0,1fr) minmax(330px,462px)}
  /* The copy keeps at least 440px, so it stays short enough to end above the
     tile's button line and the counter can sit level with SHED LOAD from 1060
     up. The tile takes the rest, up to 560: fluid on narrow split screens, with
     the card still 600px tall and the button 99px above its bottom, 93px once
     the frame is 540px or narrower (set by maintain.js). */
  .ee-tools #measure.phase--split{grid-template-columns:minmax(0,560px) minmax(440px,1fr)}

  /* The proposal fills its column rather than a fixed height: this is the
     section's anchor image, so it should read as a page, not a chip. */
  .ee-tools .proposal__zoom,.ee-tools .proposal__zoom img{width:100%}
  .ee-tools .proposal__zoom img{height:auto}
  .ee-tools .scene__svg{max-width:none}
  .ee-tools .phase__media--live{justify-self:stretch}

  /* Inside a split, each panel gets roughly half the old width. Stacking the
     internals keeps the big tabular numbers from crowding their labels. */
  .ee-tools #fund .panel--fund,.ee-tools #build .panel--sched{grid-template-columns:minmax(0,1fr)}
  .ee-tools .live__copy{margin-top:22px}

  /* Maintain (2026-09-26, John): the savings counter sits to the right of
     SHED LOAD and the BuildingPulse disclosure under the tile. The body box
     steps aside so its children join the section grid; the DOM order, and so
     the reading order and the stacked layout, are unchanged.
       rows 1–2  heading, copy (right) · tile spans rows 1–3 (left)
       row 3     1fr: takes whatever the tile leaves, so the counter, pinned
                 to its bottom, lands level with the button; when the copy is
                 taller than that, the counter simply follows it, never on it
       row 4     the disclosure, left
     Under the tile a fixed slot holds the hint, shown or not, so the reveal
     and the first press never move the counter or the disclosure. */
  .ee-tools #measure{--hint-room:60px}
  .ee-tools #measure.phase--split{grid-template-rows:auto auto 1fr auto;row-gap:0}
  .ee-tools #measure .phase__media{grid-row:1/4}
  .ee-tools #measure .phase__body{display:contents}
  .ee-tools #measure .phase__head{grid-column:2;grid-row:1}
  .ee-tools #measure .live__copy{grid-column:2;grid-row:2}
  .ee-tools #measure .live{display:grid;grid-template-rows:auto minmax(var(--hint-room),auto)}
  .ee-tools #measure .shed{
    grid-column:2;grid-row:3;align-self:end;min-width:0;
    display:flex;align-items:center;height:var(--shed-button-h);
    margin:0 0 calc(var(--hint-room) + var(--hint-button-y) - var(--shed-button-h) / 2);
  }
  /* Read left to right from the button: the figure keeps its reserved width
     but sets against its label, so added digits grow towards SHED LOAD. */
  .ee-tools #measure .shed__meter{justify-content:flex-start}
  .ee-tools #measure .shed__val{text-align:right}
  .ee-tools #measure .shed__lbl{text-align:left}
  /* Open, the BuildingPulse cards span both columns: words left, card right. */
  .ee-tools #measure .bpmore{grid-column:1/-1;grid-row:4;min-width:0;margin-top:4px}
  .ee-tools #measure .bpmore__deck{grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:clamp(28px,3.4vw,52px);align-items:start}
  .ee-tools #measure .bpmore__copy{grid-column:1;grid-row:1;align-self:center}
  .ee-tools #measure .bpmore__stage{grid-column:2;grid-row:1}
}
@media (min-width:1280px){
  .ee-tools #fund .panel--fund{grid-template-columns:minmax(0,1.4fr) minmax(210px,.9fr)}

}

@media (max-width:520px){
  /* Knob centres sit exactly on the band edges, so at 12a/12a half the knob
     hangs past the track. Inset the track by more than that half-width to keep
     it clear of the panel edge without disturbing the time mapping. */
  .ee-tools .track{height:66px;margin-inline:12px}
  .ee-tools .sched__axis{margin-inline:12px}
  .ee-tools .knob{width:44px;height:62px}
  .ee-tools .field input{width:116px}

}

/* Reduced motion keeps the running/off distinction — the airflow and the fan
   are still drawn or still absent — it only stops them moving. Scoped to this
   subtree: the standalone's bare `*` selector would also have frozen the
   shared nav's glass transitions and the closing band's buttons. */
@media (prefers-reduced-motion:reduce){
  /* 0ms, not a tiny nonzero value: a .01ms duration is still a running
     transition, and WebKit will animate layout properties through it. */
  .ee-tools *{transition-duration:0ms !important}
  .ee-tools .scene .fan__rotor,.ee-tools .scene .flow__line{animation:none !important}
  /* The handle cue becomes a static chevron: the affordance survives, the
     motion does not. It still disappears the moment the cue is retired. */
  .ee-tools .knob__cue{animation:none !important}
  .ee-tools .frameshell::before{transition:none}
  .ee-tools .bpmore__shell::before,.ee-tools .bpmore__shell iframe{transition:none}
  .ee-tools .bpmore__timer{display:none}
  .ee-tools .track[data-enabled="yes"][data-cued="idle"] .knob__cue{opacity:.9}
}