/* Manage is a dark, full-width chapter; all styling remains page-local.
   The surrounding paper sections and isolated native Live tile stay unchanged. */
.ee-tools #build{
  --ee-paper:#0b1625;--ee-paper-2:#132337;--ee-paper-3:#1e3448;
  --ee-ink:#f3f6f9;--ee-ink-2:#cbd5e1;--ee-ink-3:#adbccc;
  --ee-teal:#4ecdbb;--ee-teal-deep:#83e3d3;--ee-teal-wash:rgba(78,205,187,.15);
  --ee-rule:rgba(219,232,240,.23);--ee-rule-soft:rgba(219,232,240,.13);
  position:relative;isolation:isolate;background:var(--ee-paper);color:var(--ee-ink);
  border-top:0;box-shadow:0 0 0 100vmax var(--ee-paper);clip-path:inset(0 -100vmax);
}
/* The building's width (2026-09-21, John: "at least twice as wide"). Two
   ceilings, lowest wins: the column, and the viewport's height, because the
   heading, the drawing, Before/After and the card pin together and the card
   has to stay on screen while the schedule animates. 690px is that group
   without the drawing (margins, Before/After and the card) plus the header
   and the pin offset; 1.4 is the drawing's 420/300 aspect. Never below the
   300px it was drawn at before, so a short window is never worse than today,
   and schedule-story.js drops to pinning only the card when the group still
   does not fit. */
.ee-tools #build{--scene-max:max(300px,min(660px,calc((100svh - 690px) * 1.4)))}
/* The drawing sits centred in the open space between the heading and the
   card's right edge (2026-09-23, John). The text column ends where the
   heading's own box ends (38rem, the .phase__head cap in page.css), so the
   second column IS that open space; 55% less the gap is the text column's
   old width on narrower windows, so the heading wraps exactly as before. The
   two columns touch, and --manage-gap is spent as equal air on both sides of
   the drawing instead, which keeps its centre on the true midpoint rather
   than half a gap to the right. A wrapped heading ends short of its box, so
   schedule-story.js measures where the text really stops and --scene-shift
   pulls the drawing back by half the difference. Without script the box edge
   stands in for the text edge, which is within a few pixels on a desktop. */
.ee-tools #build .manage-top{--manage-gap:clamp(24px,3vw,48px);display:grid;grid-template-columns:minmax(0,min(38rem,calc(55% - var(--manage-gap)))) minmax(240px,1fr);align-items:center;column-gap:0;margin-bottom:28px}
.ee-tools #build .phase__head{margin-bottom:0;min-width:0}
/* Before and After are the heading's highlight colour. page.css hard-codes
   #0E6E63 for .ba__lbl, which is the paper-section teal and nearly vanishes
   on this chapter's navy. */
.ee-tools #build .hl,.ee-tools #build .ba__lbl{color:var(--ee-teal)}
.ee-tools #build .payback__val,.ee-tools #build .payback[data-live="yes"] .payback__val{color:var(--ee-teal-deep)}
.ee-tools #build .phase__media--scene{margin:0;justify-self:center;width:100%;max-width:min(var(--scene-max),calc(100% - 2 * var(--manage-gap)));translate:var(--scene-shift,0px) 0}
/* page.css caps .scene__svg at 330/418px below the split breakpoint; here the
   figure above is the only thing that sizes the drawing. */
.ee-tools #build .scene__svg{width:100%;max-width:none;max-height:none}
.ee-tools #build .scene__cap{margin:0;padding:0}
.ee-tools #build .ba{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:center;gap:24px;margin:0 0 24px;max-width:none}
.ee-tools #build .ba__block{min-width:0;will-change:auto}
.ee-tools #build .ba__block p{color:var(--ee-ink-2);font-size:16px;line-height:1.5}
.ee-tools #build .ba__arrow{display:block;width:64px;color:var(--ee-teal);justify-self:center}
.ee-tools #build .panel--sched{width:100%;max-width:none;margin:0;gap:16px}
.ee-tools #build .readout__sub{font-size:13px;line-height:1.5;margin-top:10px}
/* .schedule-pin wraps the heading, the drawing and the stage. It has no box
   of its own (display:contents) so the stage can still pin on its own inside
   #scheduleStory on viewports too short for the whole group; it becomes a
   real sticky block only when schedule-story.js finds the group fits. */
.ee-tools #build .schedule-pin{display:contents}
.ee-tools #build{--pin-top:calc(var(--nav-h,56px) + 24px)}
.ee-tools #build .schedule-stage{top:var(--pin-top)}
.ee-tools #build .schedule-travel{height:0;pointer-events:none}
.ee-tools #build #measuresDetails{margin-top:28px}
/* Default/no-JS/reduced-motion: both states remain readable in normal flow. */
@media (prefers-reduced-motion:no-preference){
  .ee-tools #build [data-schedule-pin="yes"] .schedule-stage{position:sticky}
  /* --pin-skip (schedule-story.js) is the stacked heading's height on phones,
     so the drawing, not the heading, stops at the pin line. */
  .ee-tools #build [data-schedule-pin="group"] .schedule-pin{display:block;position:sticky;top:calc(var(--pin-top) - var(--pin-skip,0px))}
  /* The scroll run. Shorter than the old clamp(300px,48svh,560px): the run
     is dead dark space under the card until the "More ways controls save"
     line catches up, and 2026-09-21 John asked for less of it. */
  .ee-tools #build [data-schedule-pin="yes"] .schedule-travel,
  .ee-tools #build [data-schedule-pin="group"] .schedule-travel{height:clamp(240px,34svh,400px)}
  .ee-tools #build [data-schedule-motion="ready"] .ba__before{opacity:var(--before-opacity,1)}
  .ee-tools #build [data-schedule-motion="ready"] .ba__after{opacity:var(--after-opacity,0);transform:translateY(var(--after-offset,12px))}
  .ee-tools #build [data-schedule-motion="ready"] .ba__arrow{opacity:var(--arrow-opacity,0)}
  .ee-tools #build [data-schedule-motion="ready"][data-schedule-pin="group"] .phase__head{opacity:var(--head-opacity,1)}
  .ee-tools #build [data-schedule-motion="ready"][data-schedule-owner="scroll"] .track__band{transition:left 80ms linear,width 80ms linear}
  .ee-tools #build [data-schedule-motion="ready"][data-schedule-owner="scroll"] .knob{transition:left 80ms linear}
}
@media(max-width:700px){
  .ee-tools #build .manage-top{--manage-gap:0px;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:16px}
  .ee-tools #build .phase__media--scene{translate:none}
  /* One column: the drawing sits under the heading at the width of the text
     it belongs to. On phones the heading scrolls away and the drawing,
     Before/After and the card latch together (2026-09-26, John), so the
     drawing also has a height ceiling: 420px is that stage (~390px at 390
     wide) plus the 16px kept below it; 1.4 is the drawing's aspect. The
     floor keeps it a readable drawing; where even that does not fit,
     schedule-story.js pins the card alone or nothing. */
  .ee-tools #build{--scene-max:min(100%,380px,max(220px,calc((100svh - var(--pin-top) - 420px) * 1.4)))}
  .ee-tools #build .phase__media--scene{justify-self:center}
  .ee-tools #build .ba{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:10px;margin-bottom:14px;align-items:start}
  .ee-tools #build .ba__arrow{width:24px;margin-top:30px}
  .ee-tools #build .ba__lbl{margin-bottom:4px}
  .ee-tools #build .ba__block p{font-size:14px;line-height:1.45}
  .ee-tools #build .panel--sched{padding:14px 18px;gap:12px}
  .ee-tools #build .readout{padding-top:12px}
  .ee-tools #build .payback__lbl{font-size:13px}
  .ee-tools #build{--pin-top:calc(var(--nav-h,56px) + 16px)}
}
/* Narrow phones: "24 hours a day" and "12:00 AM – 12:00 AM" do not share a
   line but "10 hours a day" and "8:00 AM – 6:00 PM" do, so a wrapping row
   would change the card's height mid-run. Two lines always. */
@media(max-width:360px){
  .ee-tools #build .sched__head{display:grid;gap:2px}
  .ee-tools #build .payback__lbl{min-height:2lh}
}