/* Build Intelligence - the view's stylesheet.
 *
 * Shared, deliberately. Two pages render this view: the public showcase at
 * /build/, which is a native page in the Astro site, and the companion's own copy
 * at /app/demo.html. Both load this file, tower-data.js and tower.js, so there is
 * one implementation rather than two that drift.
 *
 * Extracted from demo.html's inline <style>, then scoped.
 *
 * ---- Why every selector is scoped to .buildview ----------------------------
 * Inline in demo.html this CSS owned the whole document, so generic names like
 * .hero, .note, .panel and .bar were free. It now also loads on a page of the main
 * site, which has its own .hero and its own .panel, and the two were quietly
 * fighting: the site's .hero padding was winning inside the view. Scoping settles
 * it by specificity rather than by load order, which is the only version that
 * stays settled.
 *
 * .shell and :root are left unscoped on purpose. .shell is the container element
 * that carries .buildview itself, and :root holds the chart palette.
 *
 * Colour and type come from /assets/brand.css. Nothing here redefines a token.
 */

  /* ---- Chart palette -------------------------------------------------------
     Checked with the dataviz validator against the card surface in dark mode:
     lightness band, chroma floor, colour-vision separation and contrast. The
     brand cyan is deliberately not a series colour. At full brightness on navy it
     glares and sits too close to its neighbours to survive a deuteranopia check,
     so it stays on the chrome. Everything else comes from /assets/brand.css.
     -------------------------------------------------------------------------- */
  :root{
    /* Surface aliases. app.css declares these too, identically, for the companion.
       They are repeated here so this file stands on its own: the public page at
       /build/ does not load app.css, and without these every panel using
       var(--card) fell back to transparent. */
    --card: var(--navy-2);
    --card-2: var(--navy-3);

    --cat-1:#1276ce; --cat-2:#c48800; --cat-3:#009e77; --cat-4:#a82e57;
    --rag-green:#36ac62; --rag-amber:#b27f00; --rag-red:#be2d39; --rag-none:#5b7186;
    --seq-1:#006e8e; --seq-2:#0089ac; --seq-3:#00a5c5; --seq-4:#00c0d8; --seq-5:#5ed9e5;
    --tone-good:#7fd6a0; --tone-bad:#f0909c; --tone-watch:#e2bb5a;
    /* Waiting on a person. Deliberately outside the RAG set: it is not a
       status, it is a queue, and it must never be mistaken for at-risk amber. */
    --tone-hold:#c9a9ff; --tone-hold-bg:rgba(139,92,246,.15); --tone-hold-line:rgba(139,92,246,.4);
  }

  /* Mission control: tabular numerals so figures line up column to column, and a
     faint horizontal grid so the surface reads as an instrument, not a document. */
  .buildview{
    font-variant-numeric:tabular-nums;
    background:
      linear-gradient(rgba(63,189,240,.028) 1px, transparent 1px) 0 0 / 100% 34px,
      var(--page-bg);
  }
  .buildview section{scroll-margin-top:112px}

  /* ---- Programme header --------------------------------------------------- */
  .buildview .prog{padding:16px 0 4px;position:relative}
  .buildview .prog h1{font-family:var(--font-display);font-weight:700;font-size:24px;
    letter-spacing:-.025em;line-height:1.12}
  .buildview .prog h1 em{font-style:normal;color:var(--cyan);display:block;font-size:12px;
    letter-spacing:.16em;text-transform:uppercase;margin-bottom:9px;font-weight:600}
  .buildview .prog .sub{color:var(--dim);font-size:13.5px;margin-top:9px;max-width:46em}
  .buildview .prog .asat{color:var(--faint);font-size:11.5px;margin-top:11px;display:flex;
    align-items:center;gap:10px;flex-wrap:wrap}
  .buildview .live{display:inline-flex;align-items:center;gap:6px;color:var(--tone-good)}
  .buildview .live i{width:6px;height:6px;border-radius:50%;background:currentColor;
    animation:ping 2.6s ease-out infinite}
  @keyframes ping{0%{box-shadow:0 0 0 0 rgba(127,214,160,.5)}70%,100%{box-shadow:0 0 0 7px rgba(127,214,160,0)}}

  /* The heritage motif, modernised: a horizon with something already past it.
     Seeing around the corner is what the page does, so it is drawn, not claimed. */
  .buildview .horizon{position:absolute;right:-4px;top:10px;width:96px;height:60px;opacity:.55;pointer-events:none}

  /* ---- Persona toggle ----------------------------------------------------- */
  .buildview .seats{position:sticky;top:calc(50px + env(safe-area-inset-top));z-index:19;
    display:flex;gap:4px;padding:4px;margin:18px 0 2px;background:var(--card);
    border:1px solid var(--line);border-radius:11px;overflow-x:auto;scrollbar-width:none}
  .buildview .seats::-webkit-scrollbar{display:none}
  .buildview .seats button{flex:1 0 auto;white-space:nowrap;background:none;border:0;cursor:pointer;
    font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.02em;
    color:var(--faint);padding:9px 12px;border-radius:8px;transition:background .16s,color .16s}
  .buildview .seats button.on{background:rgba(63,189,240,.15);color:var(--cyan);font-weight:600}
  .buildview .seat-question{color:var(--faint);font-size:11.5px;margin:10px 2px 0;line-height:1.55}

  /* ---- Lens switcher, secondary to the seat -------------------------------
     The seat chooses which question is being asked. The lens chooses how to look
     at the answer. Two rows, because five seats times three lenses would
     otherwise be fifteen top level tabs. */
  /* Visibly subordinate to the seat tabs: a single small segmented control
     rather than a second row of peers. The seat chooses the question; the lens
     only chooses how to look at the answer. */
  .buildview .lenses{display:inline-flex;gap:2px;margin-top:11px;padding:2px;
    background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:9px}
  .buildview .lenses::before{content:"View";align-self:center;font-size:9.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--faint);padding:0 8px 0 6px}
  .buildview .lenses button{background:none;border:0;border-radius:7px;cursor:pointer;
    font-family:var(--font-body);font-size:11px;font-weight:500;color:var(--faint);
    padding:5px 11px;transition:color .16s,background .16s}
  .buildview .lenses button.on{color:var(--cyan);background:rgba(63,189,240,.15);font-weight:600}

  /* ---- Provenance markers -------------------------------------------------
     Woven through every view. An agent marker means a machine reconciled or
     surfaced this. A human marker means a person decided it. */
  .buildview .prov{display:inline-flex;align-items:center;gap:4px;font-size:10px;letter-spacing:.04em;
    padding:2px 7px;border-radius:20px;white-space:nowrap;font-weight:600;vertical-align:1px}
  .buildview .prov.agent{color:#8fd6f5;background:rgba(63,189,240,.13);border:1px solid rgba(63,189,240,.24)}
  .buildview .prov.human{color:#bfead4;background:rgba(54,172,98,.12);border:1px solid rgba(54,172,98,.26)}
  .buildview .prov.pending{color:var(--tone-hold);background:var(--tone-hold-bg);
    border:1px dashed var(--tone-hold-line)}
  .buildview .prov svg{width:9px;height:9px;flex:none}

  /* ---- Generic surfaces --------------------------------------------------- */
  .buildview .panel{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:15px 15px 16px;margin-top:12px}
  .buildview .panel h3{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-.01em}
  .buildview .panel .why{color:var(--faint);font-size:12px;margin-top:5px;line-height:1.55}
  .buildview .chart-box{position:relative;margin-top:12px}
  .buildview .h200{height:200px}.buildview .h220{height:220px}.buildview .h240{height:240px}

  .buildview .lane-tag{display:inline-block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:2px 6px;white-space:nowrap}

  /* ---- Seat tag, used inside a chain to show which chair a step lands in --- */
  .buildview .seat-tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--cyan);background:rgba(63,189,240,.12);
    border:1px solid rgba(63,189,240,.3);border-radius:5px;padding:2px 7px;white-space:nowrap}
  .buildview .arrow{font-size:10px;color:var(--faint);margin:0 6px}
  .buildview .code{font-family:var(--font-display);font-weight:700;font-size:11px;color:var(--faint);letter-spacing:.06em}
  .buildview .when{font-size:11px;color:var(--faint);white-space:nowrap}
  .buildview .when.due{color:var(--tone-watch)}
  .buildview .miss{font-size:12.5px;color:var(--dim);line-height:1.6;margin-top:9px;padding-left:11px;
    border-left:2px solid rgba(178,127,0,.45)}
  .buildview .miss.blocks{border-left-color:rgba(190,45,57,.5)}
  .buildview .miss b{color:var(--white)}
  .buildview .why.hi{color:var(--tone-watch)}

  /* ---- Acceptance: what a gate still needs -------------------------------- */
  .buildview .needs{margin-top:12px;border-top:1px solid var(--line)}
  .buildview .need{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
  .buildview .need:last-child{border-bottom:0}
  .buildview .need .nn{font-size:13px;line-height:1.4}
  .buildview .need .nw{font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.5}

  /* ---- Availability ------------------------------------------------------- */
  .buildview .avrow{display:flex;gap:22px;flex-wrap:wrap}
  .buildview .avrow .k{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
  .buildview .av-big{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.02em;margin-top:5px}
  .buildview .av-big.amber{color:var(--tone-watch)}
  .buildview .av-big.good{color:var(--tone-good)}
  .buildview .av-big.small{font-size:20px;color:var(--dim)}

  /* The ramp. Bars are scaled across the 96 to 100 band rather than 0 to 100,
     because four figures a few percent apart look identical on a full axis and
     the whole point is that they climb. */
  .buildview .av-ramp{margin-top:14px;border-top:1px solid var(--line)}
  .buildview .av-step{padding:11px 0;border-bottom:1px solid var(--line)}
  .buildview .av-step:last-child{border-bottom:0}
  .buildview .av-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .buildview .av-when{font-size:13px;font-weight:500}
  .buildview .av-pct{font-family:var(--font-display);font-weight:700;font-size:13.5px;white-space:nowrap}
  .buildview .av-step.target .av-when,
.buildview .av-step.target .av-pct{color:var(--tone-good)}
  .buildview .av-step.threatened .av-pct{color:var(--tone-bad)}
  .buildview .av-gate{font-size:11.5px;color:var(--faint);margin-top:6px;line-height:1.5}
  .buildview .av-flag{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--tone-bad);border:1px solid rgba(240,144,156,.4);border-radius:20px;
    padding:1px 7px;white-space:nowrap}

  /* ---- Site plan, the beacon lens ----------------------------------------- */
  .buildview .siteplan{margin-top:12px;overflow-x:auto}
  .buildview .siteplan svg{width:100%;min-width:330px;height:auto;display:block}
  .buildview .sp-links line{stroke:rgba(255,255,255,.13);stroke-width:1;stroke-dasharray:3 4}
  .buildview .sp-el{cursor:pointer}
  .buildview .sp-el rect{fill:var(--navy-3);stroke:var(--line);stroke-width:1;transition:stroke .2s,fill .2s}
  .buildview .sp-el text{fill:rgba(255,255,255,.78);font-size:9px;font-family:var(--font-body);font-weight:500}
  .buildview .sp-el:hover rect,
.buildview .sp-el:focus-visible rect{stroke:rgba(63,189,240,.55)}
  .buildview .sp-el:focus{outline:none}
  .buildview .sp-el.lit rect{stroke:var(--cyan);stroke-width:2;fill:rgba(63,189,240,.14)}
  .buildview .sp-el.lit .beacon{animation:beacon 1.5s ease-out infinite}
  @keyframes beacon{0%{r:4.2;opacity:.9}70%{r:10;opacity:0}100%{r:10;opacity:0}}
  .buildview .sp-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--faint)}
  .buildview .sp-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
  .buildview .sp-note{margin-top:11px;font-size:12.5px;color:var(--dim);line-height:1.6;
    border-top:1px solid var(--line);padding-top:11px;min-height:36px}
  .buildview .sp-note b{color:var(--white)}

  /* ---- Platforms and systems ---------------------------------------------- */
  .buildview .platform h3{display:flex;align-items:center;gap:8px}
  .buildview .platform h3 .led,
.buildview .row-name .led{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
  .buildview .row-name .led{margin-right:8px;vertical-align:0}
  .buildview .readiness{font-family:var(--font-display);font-weight:700;font-size:20px;white-space:nowrap}
  .buildview .profile{display:grid;gap:7px;margin-top:12px;border-top:1px solid var(--line);padding-top:11px}
  .buildview .profile > div{display:flex;gap:12px;justify-content:space-between;font-size:12px}
  .buildview .profile .pk{color:var(--faint);text-transform:capitalize;white-space:nowrap}
  .buildview .profile .pv{color:var(--dim);text-align:right}

  /* ---- Team and sources, an info box rather than a seat ------------------- */
  .buildview .teambox{margin-top:28px;background:var(--card);border:1px solid var(--line);
    border-radius:14px;overflow:hidden}
  .buildview .tb-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    background:none;border:0;cursor:pointer;padding:14px 15px;text-align:left;
    font-family:var(--font-body);font-size:12.5px;color:var(--dim);line-height:1.55}
  .buildview .tb-toggle strong{color:var(--white);font-weight:600}
  .buildview .tb-toggle .chev{width:8px;height:8px;flex:none;border-right:1.6px solid var(--faint);
    border-bottom:1.6px solid var(--faint);transform:rotate(45deg);transition:transform .2s;margin-bottom:3px}
  .buildview .teambox.open .tb-toggle .chev{transform:rotate(-135deg);margin-bottom:-2px}
  .buildview .tb-body{display:none;padding:0 15px 16px}
  .buildview .teambox.open .tb-body{display:block}
  .buildview .tb-h{font-family:var(--font-display);font-weight:600;font-size:14px;margin-top:20px;
    padding-top:14px;border-top:1px solid var(--line)}
  .buildview .legend{display:grid;gap:12px;margin-top:12px}
  .buildview .legend > div{display:flex;gap:11px;align-items:flex-start}
  .buildview .legend p{font-size:12px;color:var(--dim);line-height:1.55}
  .buildview .people{display:grid;gap:8px}
  .buildview .member.compact{padding:11px 12px}
  .buildview .member.compact .owns{font-size:12px;margin-top:6px}

  /* ---- Hero: one number per seat, above everything else ------------------ */
  .buildview .hero{margin-top:16px;padding:16px;border-radius:15px;border:1px solid var(--line);
    background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
  .buildview .hero.red{border-color:rgba(190,45,57,.4);
    background:linear-gradient(135deg,rgba(190,45,57,.14),rgba(190,45,57,.02))}
  .buildview .hero.amber{border-color:rgba(178,127,0,.4);
    background:linear-gradient(135deg,rgba(178,127,0,.14),rgba(178,127,0,.02))}
  .buildview .hero .hv{font-family:var(--font-display);font-weight:700;font-size:40px;
    letter-spacing:-.035em;line-height:1}
  .buildview .hero.red .hv{color:var(--tone-bad)}
  .buildview .hero.amber .hv{color:var(--tone-watch)}
  .buildview .hero .hu{font-size:13px;color:var(--white);margin-top:7px;font-weight:500}
  .buildview .hero .hl-line{font-size:12.5px;color:var(--dim);margin-top:9px;line-height:1.6;max-width:44em}

  /* ---- Active cascade chip, one tap from anywhere ------------------------- */
  .buildview .cascade-chip{display:flex;align-items:center;gap:9px;width:100%;margin-top:10px;
    background:rgba(190,45,57,.1);border:1px solid rgba(190,45,57,.34);border-radius:11px;
    padding:10px 12px;cursor:pointer;font-family:var(--font-body);font-size:11.5px;
    color:var(--dim);text-align:left;line-height:1.45}
  .buildview .cascade-chip .cc-pulse{width:7px;height:7px;border-radius:50%;background:var(--tone-bad);
    flex:none;animation:ping 2.4s ease-out infinite}
  .buildview .cascade-chip .cc-sep{width:1px;height:12px;background:var(--line);flex:none}
  .buildview .cascade-chip .cc-go{margin-left:auto;color:var(--cyan);text-decoration:underline;flex:none}
  .buildview .cascade-chip:active{background:rgba(190,45,57,.16)}

  /* ---- Propagation swimlane ---------------------------------------------- */
  .buildview .swim{margin-top:14px;overflow-x:auto}
  .buildview .swim svg{width:100%;min-width:330px;height:auto;display:block}
  .buildview .sw-lane rect{fill:rgba(255,255,255,.028);stroke:var(--line);stroke-width:1}
  .buildview .sw-lane-label{fill:var(--faint);font-size:9px;font-family:var(--font-display);
    font-weight:700;letter-spacing:.1em}
  .buildview .sw-thread{fill:none;stroke:var(--cyan);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .buildview .sw-thread.stub{stroke-dasharray:4 4;opacity:.75}
  .buildview .sw-stop{stroke:var(--tone-hold);stroke-width:2.4;stroke-linecap:round}
  .buildview .sw-node circle{fill:var(--navy);stroke:var(--cyan);stroke-width:2.2}
  .buildview .sw-node.pending circle{stroke:var(--tone-hold);stroke-dasharray:3 2.5}
  .buildview .sw-num{fill:var(--white);font-size:8px;font-weight:700;text-anchor:middle;
    font-family:var(--font-display)}
  .buildview .sw-node.pending .sw-num{fill:var(--tone-hold)}
  .buildview .sw-cap{fill:var(--faint);font-size:7.5px;text-anchor:middle;font-family:var(--font-body)}
  .buildview .sw-node.pending .sw-cap{fill:var(--tone-hold)}
  .buildview .swim-note{font-size:11.5px;color:var(--tone-hold);line-height:1.6;margin-top:10px;
    padding-left:11px;border-left:2px dashed var(--tone-hold-line)}

  /* ---- Platform native capacity ------------------------------------------ */
  .buildview .cap-head{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px;
    padding-top:13px;border-top:1px solid var(--line)}
  .buildview .cap-head .cv{font-family:var(--font-display);font-weight:700;font-size:23px;
    letter-spacing:-.02em;color:var(--cyan);line-height:1}
  .buildview .cap-head .cu{font-size:11.5px;color:var(--white);margin-top:5px;font-weight:500}
  .buildview .cap-head .cn{font-size:10.5px;color:var(--faint);margin-top:4px;line-height:1.45}
  .buildview .cap-foot{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;padding-top:11px;
    border-top:1px solid var(--line)}
  .buildview .cap-foot span{font-size:12px;color:var(--dim);font-weight:500}
  .buildview .cap-foot em{display:block;font-style:normal;font-size:10.5px;color:var(--faint);margin-top:3px}
  .buildview .cap-foot .cap-mw{margin-left:auto;text-align:right}
  .buildview .platform .vend{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}

  /* ---- Unit toggle on the capacity chart ---------------------------------- */
  .buildview .unit-toggle{display:inline-flex;gap:2px;padding:2px;background:rgba(255,255,255,.05);
    border:1px solid var(--line);border-radius:9px}
  .buildview .unit-toggle button{background:none;border:0;cursor:pointer;font-family:var(--font-body);
    font-size:11px;font-weight:500;color:var(--faint);padding:5px 11px;border-radius:7px}
  .buildview .unit-toggle button.on{background:rgba(63,189,240,.16);color:var(--cyan);font-weight:600}

  /* ---- Vendor reference design -------------------------------------------
     Text chips, not logos. These are engineering choices, and a wall of marks
     would read as a sponsor board rather than a design. */
  .buildview .vend{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px}
  .buildview .vchip{font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--dim);
    background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;
    padding:3px 9px;white-space:nowrap}
  .buildview .vn{font-size:11px;color:var(--faint);line-height:1.5}
  .buildview .refnote{margin-top:14px;padding:12px 14px;border-radius:12px;
    background:rgba(63,189,240,.06);border:1px solid rgba(63,189,240,.22);
    font-size:11.5px;color:var(--dim);line-height:1.6}
  .buildview .refnote strong{color:var(--cyan);font-weight:600}
  .buildview .refnote em{font-style:normal;color:var(--faint);display:inline-block;margin-top:5px}

  /* ---- Subsystem control matrix ------------------------------------------ */
  .buildview .subsys h3{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-.01em}
  .buildview .ctrls{margin-top:13px;border-top:1px solid var(--line)}
  .buildview .ctrl{padding:10px 0;border-bottom:1px solid var(--line)}
  .buildview .ctrl:last-child{border-bottom:0}
  .buildview .ctrl-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .buildview .ctrl .fam{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
  .buildview .ctrl-note{font-size:12px;color:var(--dim);margin-top:6px;line-height:1.55}
  .buildview .ctrl.critical{margin:0 -10px;padding:10px;border-radius:9px;
    background:rgba(190,45,57,.09);border:1px solid rgba(190,45,57,.3)}
  .buildview .ctrl.test{background:rgba(255,255,255,.02);margin:0 -10px;padding:10px;border-radius:9px;border-bottom:0}
  .buildview .flowon{font-size:12px;color:var(--dim);line-height:1.6;margin-top:12px;
    padding-left:11px;border-left:2px solid rgba(63,189,240,.4)}
  .buildview .flowon b{color:var(--white)}

  /* ---- Digest ---------------------------------------------------------- */
  .buildview .digest{background:linear-gradient(180deg,rgba(63,189,240,.09),rgba(63,189,240,.02));
    border:1px solid rgba(63,189,240,.28);border-radius:15px;padding:15px;margin-top:16px}
  .buildview .digest .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .buildview .digest h2{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.015em}
  .buildview .digest .since{font-size:11px;color:var(--faint);white-space:nowrap}
  .buildview .dg-toggle{display:flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
    padding:2px 0;font-family:var(--font-body)}
  .buildview .dg-toggle .chev{width:8px;height:8px;border-right:1.6px solid var(--faint);
    border-bottom:1.6px solid var(--faint);transform:rotate(45deg);transition:transform .2s;margin-bottom:3px}
  .buildview .digest.closed .dg-toggle .chev{transform:rotate(-135deg);margin-bottom:-2px}
  .buildview .digest.closed .dg-body{display:none}
  .buildview .digest.closed .net{margin-bottom:2px}
  .buildview .digest .head{font-size:13.5px;margin-top:9px;line-height:1.55}
  .buildview .digest .net{font-size:12.5px;color:var(--cyan);margin-top:8px;line-height:1.5;font-weight:500}
  .buildview .dg-item{border-top:1px solid var(--line);padding:13px 0 2px;margin-top:13px}
  .buildview .dg-item .hd{display:flex;align-items:flex-start;gap:9px}
  .buildview .dg-item .dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px}
  .buildview .dg-item.good .dot{background:var(--tone-good)}
  .buildview .dg-item.bad .dot{background:var(--tone-bad)}
  .buildview .dg-item.watch .dot{background:var(--tone-watch)}
  .buildview .dg-item .t{font-size:13.5px;font-weight:500;line-height:1.4}
  .buildview .dg-item .d{font-size:12.5px;color:var(--dim);margin-top:6px;line-height:1.6}
  .buildview .dg-item .c{font-size:12.5px;margin-top:9px;line-height:1.6;padding-left:11px;
    border-left:2px solid rgba(63,189,240,.4)}
  .buildview .dg-item .meta{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
  .buildview .flow{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--faint)}
  .buildview .byline{margin-top:15px;padding-top:12px;border-top:1px solid var(--line);
    font-size:11.5px;color:var(--faint);line-height:1.6}

  /* ---- Propagation chains -------------------------------------------------- */
  .buildview .chain{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:14px;margin-top:12px;cursor:pointer;transition:border-color .2s,background .2s}
  .buildview .chain.open{border-color:rgba(63,189,240,.45);background:var(--card-2)}
  .buildview .chain .ct{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .buildview .chain h4{font-size:14px;font-weight:600;font-family:var(--font-display);letter-spacing:-.01em}
  .buildview .chain.headline{border-color:rgba(190,45,57,.42);
    background:linear-gradient(180deg,rgba(190,45,57,.1),rgba(190,45,57,.02))}
  .buildview .chain.headline.open{background:var(--card-2);border-color:rgba(63,189,240,.45)}
  .buildview .chain-flag{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--tone-bad);margin-bottom:9px}
  .buildview .spans{display:flex;align-items:center;flex-wrap:wrap;margin-top:10px}
  .buildview .chain-jump{background:none;border:0;cursor:pointer;font-family:var(--font-body);
    font-size:10.5px;color:var(--cyan);text-decoration:underline;padding:0}
  .buildview .chain .sum{font-size:12.5px;color:var(--dim);margin-top:7px;line-height:1.55}
  .buildview .delta{font-family:var(--font-display);font-weight:700;font-size:13px;padding:2px 9px;
    border-radius:20px;white-space:nowrap}
  .buildview .delta.good{color:var(--tone-good);background:rgba(54,172,98,.15)}
  .buildview .delta.bad{color:var(--tone-bad);background:rgba(190,45,57,.16)}
  .buildview .steps{display:none;margin-top:14px}
  .buildview .chain.open .steps{display:block}
  .buildview .step{display:flex;gap:11px}
  .buildview .step .rail{width:10px;flex:none;display:flex;flex-direction:column;align-items:center}
  .buildview .step .node{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:none;margin-top:5px}
  .buildview .step.pending .node{background:transparent;border:2px solid var(--tone-hold)}
  .buildview .step .line{flex:1;width:1px;background:var(--line);margin:3px 0}
  .buildview .step:last-child .line{opacity:0}
  .buildview .step .body{flex:1;min-width:0;padding-bottom:14px}
  .buildview .step .sl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .buildview .step .st{font-size:13px;font-weight:500}
  .buildview .step .sd{font-size:12px;color:var(--dim);margin-top:5px;line-height:1.55}
  .buildview .chain-hint{font-size:11px;color:var(--faint);margin-top:12px}
  .buildview .hl{box-shadow:0 0 0 2px rgba(63,189,240,.55);border-radius:10px}

  /* ---- Rows: milestones, seams, long lead --------------------------------- */
  .buildview .row-item{padding:12px 0;border-bottom:1px solid var(--line)}
  .buildview .row-item:last-child{border-bottom:0}
  .buildview .row-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  .buildview .row-name{font-size:13.5px;font-weight:500;line-height:1.4}
  .buildview .row-sub{font-size:11.5px;color:var(--faint);margin-top:5px;line-height:1.5}
  .buildview .row-meta{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
  .buildview .pill{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
    padding:2px 8px;border-radius:20px;white-space:nowrap}
  .buildview .pill.green{color:#7fd6a0;background:rgba(54,172,98,.16)}
  .buildview .pill.amber{color:#e2bb5a;background:rgba(178,127,0,.18)}
  .buildview .pill.red{color:#f0909c;background:rgba(190,45,57,.18)}
  .buildview .pill.none{color:#9db2c4;background:rgba(91,113,134,.18)}
  .buildview .pill.crit{color:#f0909c;background:transparent;border:1px solid rgba(240,144,156,.4)}
  .buildview .move{font-family:var(--font-display);font-weight:700;font-size:12px;white-space:nowrap}
  .buildview .move.good{color:var(--tone-good)}
  .buildview .move.bad{color:var(--tone-bad)}

  /* ---- Tiles -------------------------------------------------------------- */
  .buildview .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}
  .buildview .tile{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 14px}
  .buildview .tile .k{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);line-height:1.4}
  .buildview .tile .v{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.02em;
    margin-top:5px;line-height:1}
  .buildview .tile .n{font-size:11.5px;color:var(--dim);margin-top:6px;line-height:1.5}
  .buildview .tile .v.cyan{color:var(--cyan)}.buildview .tile .v.green{color:var(--tone-good)}
  .buildview .tile .v.amber{color:var(--tone-watch)}.buildview .tile .v.red{color:var(--tone-bad)}

  /* ---- Go / no-go --------------------------------------------------------- */
  .buildview .call{background:linear-gradient(135deg,rgba(54,172,98,.14),rgba(54,172,98,.03));
    border:1px solid rgba(54,172,98,.34);border-radius:15px;padding:16px;margin-top:14px}
  .buildview .call .lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tone-good)}
  .buildview .call .v{font-family:var(--font-display);font-weight:700;font-size:30px;margin-top:6px;letter-spacing:-.02em}
  .buildview .call .d{font-size:12.5px;color:var(--dim);margin-top:9px;line-height:1.6}

  .buildview .rag{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
  .buildview .rag div{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px 12px}
  .buildview .rag .l{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500}
  .buildview .rag .led{width:8px;height:8px;border-radius:50%;flex:none}
  .buildview .rag .n{font-size:11px;color:var(--faint);margin-top:6px;line-height:1.5}

  /* ---- Halls -------------------------------------------------------------- */
  .buildview .hall{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:10px}
  .buildview .hall.red{border-color:rgba(190,45,57,.35)}
  .buildview .hall .ht{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .buildview .hall h4{font-family:var(--font-display);font-weight:600;font-size:15px;
    display:flex;align-items:center;gap:8px}
  .buildview .hall h4 .led{width:8px;height:8px;border-radius:50%;flex:none}
  .buildview .hall .driver{font-size:11.5px;color:var(--faint);margin-top:10px}
  .buildview .hall .driver b{color:var(--white);font-weight:600}
  .buildview .hall .note{font-size:12.5px;color:var(--dim);margin-top:7px;line-height:1.55}
  .buildview .bar{margin-top:10px;height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
  .buildview .bar i{display:block;height:100%;border-radius:4px}
  .buildview .changed{font-size:9.5px;color:#f0909c;letter-spacing:.06em;text-transform:uppercase;
    border:1px solid rgba(240,144,156,.4);border-radius:20px;padding:2px 7px}

  /* ---- Team lens ---------------------------------------------------------- */
  .buildview .boundary{background:var(--card-2);border:1px solid rgba(63,189,240,.24);border-radius:14px;
    padding:16px;margin-top:14px}
  .buildview .boundary p{font-size:14px;line-height:1.65}
  .buildview .boundary p b{color:var(--cyan)}
  .buildview .boundary .fine{font-size:12.5px;color:var(--faint);margin-top:10px;line-height:1.6}
  .buildview .member{background:var(--card);border:1px solid var(--line);border-radius:13px;
    padding:13px 14px;margin-top:9px}
  .buildview .member .mt{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .buildview .member h4{font-size:14px;font-weight:600}
  .buildview .member .owns{font-size:12.5px;color:var(--dim);margin-top:8px;line-height:1.6}
  .buildview .member .cannot{font-size:12px;color:var(--tone-watch);margin-top:7px;line-height:1.55}

  /* ---- Source lanes ------------------------------------------------------- */
  .buildview .lanes{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
  .buildview .lane{display:flex;align-items:center;gap:11px;background:var(--card);
    border:1px solid var(--line);border-radius:11px;padding:11px 13px}
  .buildview .lane .led{width:7px;height:7px;border-radius:50%;background:var(--tone-good);flex:none}
  .buildview .lane .ln{font-size:13px;font-weight:500}
  .buildview .lane .ls{font-size:11px;color:var(--faint);margin-top:3px}

  /* ---- Timeline ----------------------------------------------------------- */
  .buildview .tl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:12px;padding-bottom:6px}
  .buildview .tl{min-width:680px;position:relative}
  .buildview .tl-months{display:flex;border-bottom:1px solid var(--line);padding-bottom:6px}
  .buildview .tl-mgrid{flex:1;display:flex}
  .buildview .tl-months .tl-mgrid span{flex:1;font-size:9.5px;color:var(--faint);text-align:center}
  .buildview .tl-row{display:flex;align-items:center;margin-top:9px}
  .buildview .tl-label,
.buildview .tl-spacer{width:152px;flex:none;position:sticky;left:0;z-index:4;
    background:var(--navy);padding-right:12px}
  .buildview .tl-label{font-size:12px;color:var(--dim);line-height:1.3}
  .buildview .tl-track{flex:1;position:relative;height:20px}
  .buildview .tl-bar{position:absolute;top:4px;height:12px;border-radius:6px;
    background:rgba(63,189,240,.22);border:1px solid rgba(63,189,240,.34)}
  .buildview .tl-bar.crit{background:rgba(190,45,57,.24);border-color:rgba(240,144,156,.55)}
  .buildview .tl-bar.done{background:rgba(54,172,98,.24);border-color:rgba(127,214,160,.45)}
  .buildview .tl-today{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--cyan);z-index:2}
  .buildview .tl-today::after{content:"now";position:absolute;top:-13px;left:-9px;font-size:9px;color:var(--cyan)}
  .buildview .tl-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:13px;font-size:11.5px;color:var(--faint)}
  .buildview .tl-legend i{display:inline-block;width:16px;height:9px;border-radius:5px;margin-right:6px;vertical-align:-1px}

  .buildview h2.sec{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.015em;
    margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
  .buildview h2.sec .lede{display:block;font-family:var(--font-body);font-weight:400;font-size:12.5px;
    color:var(--faint);margin-top:7px;line-height:1.6;letter-spacing:0}

  .buildview .note{color:var(--faint);font-size:11.5px;line-height:1.7;margin-top:24px;
    border-top:1px solid var(--line);padding-top:14px}

  .buildview [hidden]{display:none !important}

  @media (min-width:560px){
    .buildview .tiles{grid-template-columns:repeat(4,1fr)}
    .buildview .rag{grid-template-columns:repeat(4,1fr)}
    .buildview .lanes{grid-template-columns:repeat(2,1fr)}
  }
  @media (min-width:560px){
    .buildview .hero .hv{font-size:46px}
    .buildview .cap-head{grid-template-columns:repeat(2,1fr)}
  }
  @media (min-width:920px){ .shell{max-width:920px} }

  /* ================= Digital twin ==========================================
     The lifecycle is drawn, not labelled. A rack that does not exist yet is a
     dashed ghost, a live one is solid brand cyan, and the states in between step
     between those two so the floor reads as a build filling in. */
  .buildview .twinbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:14px;flex-wrap:wrap}
  .buildview .twinbar .tb-note{color:var(--faint);font-size:11.5px;line-height:1.5;flex:1;min-width:180px}
  .buildview .isobtn{font-family:inherit;font-size:11.5px;font-weight:500;color:var(--dim);
    background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:20px;
    padding:6px 13px;cursor:pointer;white-space:nowrap}
  .buildview .isobtn.on{color:var(--cyan);border-color:rgba(63,189,240,.4);background:rgba(63,189,240,.12)}

  .buildview .tstats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .buildview .tstat{background:var(--card-2);border:1px solid var(--line);border-radius:11px;padding:11px 12px}
  .buildview .tstat .k{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
  .buildview .tstat .v{font-family:'Sora',sans-serif;font-weight:600;font-size:21px;margin-top:3px;
    letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .buildview .tstat .v em{font-style:normal;font-size:12px;font-weight:500;color:var(--faint);margin-left:4px}
  .buildview .tstat .v.good{color:var(--rag-green)} .buildview .tstat .v.bad{color:var(--rag-red)}
  .buildview .tstat .v.none{color:var(--faint)}
  .buildview .tnote{color:var(--dim);font-size:12.5px;line-height:1.65;margin-top:12px}

  /* The floor. Rack marks are deliberately thin: 800 of them on one screen only
     works if each is a stroke rather than a box. */
  .buildview .floor{margin-top:13px;overflow-x:auto;scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.2) transparent}
  .buildview .floor::-webkit-scrollbar{height:7px}
  .buildview .floor::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
  .buildview .floor::-webkit-scrollbar-track{background:transparent}
  .buildview .floor svg{width:100%;height:auto;display:block}
  /* The preview is the point of the card, so let it have the width. Capping its
     height only letterboxed it into the middle of an empty box. */
  .buildview .floor.mini{margin-top:11px}
  .buildview .floor.big{padding:4px 0 2px}
  .buildview .rk rect{fill:none;stroke:none;transition:fill .18s,stroke .18s,opacity .18s}
  .buildview .rk.s-planned rect{fill:none;stroke:rgba(255,255,255,.26);stroke-width:.7;
    stroke-dasharray:2 1.6;opacity:.75}
  .buildview .rk.s-racked rect{fill:none;stroke:rgba(255,255,255,.5);stroke-width:.8}
  .buildview .rk.s-installed rect{fill:rgba(140,170,200,.34);stroke:rgba(160,190,215,.42);stroke-width:.6}
  .buildview .rk.s-connected rect{fill:rgba(120,175,215,.55);stroke:rgba(150,200,230,.5);stroke-width:.6}
  .buildview .rk.s-configured rect{fill:rgba(63,189,240,.62);stroke:rgba(63,189,240,.75);stroke-width:.6}
  .buildview .rk.s-operational rect{fill:var(--cyan);stroke:var(--cyan);stroke-width:.6}
  .buildview .rk.bl rect{stroke:var(--rag-red);stroke-width:.9;stroke-dasharray:none}
  .buildview .rk .bfl{fill:var(--rag-red);stroke:none;opacity:.95}
  .buildview .rk.lit rect{stroke:var(--rag-red);stroke-width:1.2}
  .buildview .rk.lit .bfl{animation:blkpulse 1.6s ease-in-out infinite}
  @keyframes blkpulse{0%,100%{opacity:.95}50%{opacity:.35}}
  .buildview text.rl{fill:var(--faint);font-size:5.4px;font-family:'Inter',sans-serif;
    letter-spacing:.04em;dominant-baseline:auto}
  .buildview .rowhit{fill:transparent;cursor:pointer}
  .buildview .rowhit:hover{fill:rgba(255,255,255,.045)}

  /* Floor view. A gentle rake for the ops-room feel. The rake makes the near
     rows wider than the box, so it is scaled back to fit and the container stops
     scrolling: a perspective transform must never produce a scrollbar. */
  .buildview .floor.iso{overflow:hidden;padding:10px 0 2px}
  .buildview .floor.iso svg{transform:perspective(1500px) rotateX(15deg) scale(.9);
    transform-origin:50% 50%}

  .buildview .lifel{display:flex;flex-wrap:wrap;gap:7px 13px;margin-top:13px;
    font-size:11px;color:var(--dim)}
  .buildview .lfi{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
  .buildview .sw{width:13px;height:8px;border-radius:2px;flex:none;display:inline-block}
  .buildview .sw.s-planned{border:1px dashed rgba(255,255,255,.4)}
  .buildview .sw.s-racked{border:1px solid rgba(255,255,255,.55)}
  .buildview .sw.s-installed{background:rgba(140,170,200,.34);border:1px solid rgba(160,190,215,.42)}
  .buildview .sw.s-connected{background:rgba(120,175,215,.55)}
  .buildview .sw.s-configured{background:rgba(63,189,240,.62)}
  .buildview .sw.s-operational{background:var(--cyan)}
  .buildview .sw.blkw{border:1px solid var(--rag-red);border-top:3px solid var(--rag-red)}

  .buildview .statecounts{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:12px;
    padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--dim)}
  .buildview .sc{display:inline-flex;align-items:center;gap:6px}
  .buildview .sc b{color:var(--white);font-variant-numeric:tabular-nums;font-weight:600}

  .buildview .hallgrid{display:grid;grid-template-columns:1fr;gap:11px;margin-top:13px}
  .buildview .hallcard{display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;
    color:var(--white);transition:border-color .16s,background .16s}
  .buildview .hallcard:hover{border-color:rgba(63,189,240,.34)}
  .buildview .hallcard.lit{border-color:rgba(190,45,57,.55);background:rgba(190,45,57,.07)}
  .buildview .hc-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .buildview .hc-name{font-family:'Sora',sans-serif;font-weight:600;font-size:15.5px;
    display:flex;align-items:center;gap:8px}
  .buildview .hc-mw{font-family:'Sora',sans-serif;font-weight:600;font-size:16px;color:var(--cyan);
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .buildview .hc-mw em{font-style:normal;font-size:11px;font-weight:500;color:var(--faint)}
  .buildview .hc-use{color:var(--faint);font-size:11.5px;margin-top:5px}
  .buildview .hc-sub{color:var(--dim);font-size:12.5px;line-height:1.6;margin-top:11px}
  .buildview .hc-blk{margin-top:9px;font-size:11.5px;color:#f0909c;
    background:rgba(190,45,57,.14);border:1px solid rgba(190,45,57,.32);
    border-radius:8px;padding:6px 10px;display:inline-block}
  .buildview .hc-go{display:inline-block;margin-top:11px;font-size:11.5px;color:var(--cyan)}
  .buildview .hc-go::after{content:" \203A"}

  .buildview .tback{font-family:inherit;font-size:12px;color:var(--cyan);background:none;
    border:none;cursor:pointer;padding:12px 0 0;display:inline-block}
  .buildview .tback::before{content:"\2039  "}

  .buildview .tblock{margin-top:14px;border-radius:12px;padding:12px 13px;
    background:rgba(190,45,57,.1);border:1px solid rgba(190,45,57,.3)}
  .buildview .tblock.lit{box-shadow:0 0 0 1px rgba(190,45,57,.5) inset}
  .buildview .tb-h{font-family:'Sora',sans-serif;font-weight:600;font-size:13.5px;color:#f0909c}
  .buildview .tblock p{color:var(--dim);font-size:12.5px;line-height:1.65;margin-top:7px}
  .buildview .tb-mw b{color:var(--white)}

  .buildview .rowlist{display:grid;grid-template-columns:1fr;gap:6px;margin-top:13px}
  .buildview .rowcard{display:flex;align-items:center;gap:10px;width:100%;font-family:inherit;
    text-align:left;cursor:pointer;color:var(--white);
    background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
  .buildview .rowcard:hover{border-color:rgba(63,189,240,.3)}
  .buildview .rowcard.on{border-color:rgba(63,189,240,.5);background:rgba(63,189,240,.08)}
  .buildview .rc-id{font-family:'Sora',sans-serif;font-weight:600;font-size:12px;color:var(--faint);
    flex:none;width:30px;font-variant-numeric:tabular-nums}
  .buildview .rc-strip{flex:1;min-width:60px;display:block}
  .buildview .rc-strip svg{width:100%;height:11px;display:block}
  .buildview .rc-state{font-size:11px;color:var(--dim);white-space:nowrap;flex:none}
  .buildview .rc-blk{font-size:10px;color:#f0909c;background:rgba(190,45,57,.16);
    border-radius:5px;padding:2px 6px;flex:none}
  .buildview .rc-mw{font-size:11px;color:var(--cyan);font-variant-numeric:tabular-nums;flex:none}

  .buildview .rowdetail{background:var(--card-2);border:1px solid var(--line);border-radius:10px;
    padding:11px;margin:-2px 0 4px}
  .buildview .rd-head{font-size:11.5px;color:var(--dim);line-height:1.6;margin-bottom:10px}
  .buildview .rackgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:5px}
  .buildview .rackcell{border-radius:6px;padding:6px 5px;text-align:center;border:1px solid transparent}
  .buildview .rackcell .rc-n{display:block;font-size:9.5px;font-variant-numeric:tabular-nums;
    letter-spacing:.02em}
  .buildview .rackcell .rc-s{display:block;font-size:9px;margin-top:2px;opacity:.72}
  .buildview .rackcell.s-planned{border:1px dashed rgba(255,255,255,.22);color:var(--faint)}
  .buildview .rackcell.s-racked{border:1px solid rgba(255,255,255,.34);color:var(--dim)}
  .buildview .rackcell.s-installed{background:rgba(140,170,200,.2);color:var(--dim)}
  .buildview .rackcell.s-connected{background:rgba(120,175,215,.28);color:var(--white)}
  .buildview .rackcell.s-configured{background:rgba(63,189,240,.3);color:var(--white)}
  .buildview .rackcell.s-operational{background:rgba(63,189,240,.62);color:#04202f}
  .buildview .rackcell.bl{box-shadow:inset 0 2px 0 var(--rag-red)}

  /* ---- Rack elevation -----------------------------------------------------
     Drawn as a real elevation: units run top to bottom the way a rack is
     labelled, block heights are proportional to U, and empty space is shown as
     empty rather than closed up. Small items get a floor height so their label
     still fits, which trades a little proportionality for being readable on a
     phone. */
  .buildview .elev{margin-top:4px}
  .buildview .elev-head{margin-top:12px}
  .buildview .eh-name{font-family:'Sora',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.015em}
  .buildview .eh-sub{color:var(--faint);font-size:12.5px;margin-top:4px}
  .buildview .eh-tags{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px}
  .buildview .eh-kw{font-size:11px;color:var(--dim);border:1px solid var(--line);
    border-radius:5px;padding:2px 7px}
  .buildview .eh-held{font-size:11px;color:#f0909c;background:rgba(190,45,57,.16);
    border:1px solid rgba(190,45,57,.34);border-radius:5px;padding:2px 7px}

  /* A planned rack is not a problem, so it must not borrow the red the held
     racks use. Same shape, neutral tone. */
  .buildview .elev-planned{margin-top:12px;border-radius:12px;padding:12px 13px;font-size:12.5px;
    line-height:1.65;color:var(--dim);
    background:rgba(255,255,255,.045);border:1px dashed var(--line)}
  .buildview .elev-planned b{color:var(--white);font-weight:600}

  .buildview .elev-issue{margin-top:12px;border-radius:12px;padding:12px 13px;font-size:12.5px;
    line-height:1.65;color:var(--dim);
    background:rgba(190,45,57,.1);border:1px solid rgba(190,45,57,.3)}
  .buildview .elev-issue b{color:#f0909c;font-weight:600}

  .buildview .elev-rack{margin-top:13px;border:1px solid var(--line);border-radius:10px;
    padding:7px;background:rgba(0,0,0,.22);display:flex;flex-direction:column;gap:3px}
  .buildview .eu{display:flex;align-items:stretch;gap:9px;border-radius:6px;padding:5px 9px;
    min-height:max(30px,calc(var(--h) * 15px));
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
  .buildview .eu-u{flex:none;width:52px;font-size:10px;color:var(--faint);align-self:center;
    font-variant-numeric:tabular-nums;letter-spacing:.02em}
  .buildview .eu-body{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
  .buildview .eu-name{font-size:12.5px;font-weight:500;line-height:1.35;
    display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .buildview .eu-detail{font-size:11px;color:var(--faint);line-height:1.5}
  .buildview .eu-flag{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:#f0909c;
    background:rgba(190,45,57,.2);border-radius:4px;padding:1px 6px}
  .buildview .eu-not{font-size:9.5px;font-weight:600;letter-spacing:.05em;color:var(--faint);
    border:1px dashed var(--line);border-radius:4px;padding:1px 6px}

  /* Colour says what kind of thing it is, not how it is doing. State is carried
     by the ghost treatment and the issue flag, so the two never compete. */
  .buildview .eu.k-compute{background:rgba(63,189,240,.15);border-color:rgba(63,189,240,.3)}
  .buildview .eu.k-fabric{background:rgba(0,158,119,.16);border-color:rgba(0,158,119,.32)}
  .buildview .eu.k-net{background:rgba(18,118,206,.18);border-color:rgba(18,118,206,.34)}
  .buildview .eu.k-store{background:rgba(168,46,87,.16);border-color:rgba(168,46,87,.32)}
  .buildview .eu.k-power{background:rgba(196,136,0,.15);border-color:rgba(196,136,0,.3)}
  .buildview .eu.k-cool{background:rgba(94,217,229,.13);border-color:rgba(94,217,229,.28)}
  .buildview .eu.k-passive{background:rgba(255,255,255,.04);border-color:var(--line)}

  .buildview .eu.ghost{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.18)}
  .buildview .eu.ghost .eu-name,
.buildview .eu.ghost .eu-detail{color:var(--faint)}
  .buildview .eu.issue{border-color:var(--rag-red);box-shadow:inset 3px 0 0 var(--rag-red)}
  .buildview .eu.gapu{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.09);
    min-height:max(22px,calc(var(--h) * 15px))}
  .buildview .eu-empty{align-self:center;font-size:10.5px;color:rgba(255,255,255,.3)}

  .buildview .asidegrid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:13px}
  .buildview .asidecard{display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
    color:var(--white);background:var(--card);border:1px solid var(--line);
    border-radius:13px;padding:13px;transition:border-color .16s}
  .buildview .asidecard:hover{border-color:rgba(63,189,240,.32)}
  .buildview .ac-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .buildview .ac-name{font-family:'Sora',sans-serif;font-weight:600;font-size:14.5px}
  .buildview .ac-kw{font-size:12px;color:var(--cyan);font-variant-numeric:tabular-nums}
  .buildview .ac-state{font-size:11.5px;color:var(--faint);margin-top:4px}
  .buildview .ac-note{font-size:12.5px;color:var(--dim);line-height:1.6;margin-top:9px}
  .buildview .ac-flag{margin-top:9px;font-size:11px;color:#f0909c;background:rgba(190,45,57,.14);
    border:1px solid rgba(190,45,57,.3);border-radius:7px;padding:5px 9px;display:inline-block}

  /* ================= World logistics ======================================= */
  /* A world map at 2:1 inside a phone card is 170px tall, which is not enough to
     read seven routes. It takes the panel padding back and runs to the edges. */
  .buildview .worldmap{margin:-15px -15px 0;overflow:hidden;
    border-radius:13px 13px 0 0;
    background:linear-gradient(180deg,rgba(8,20,34,.9),rgba(9,23,38,.9))}
  .buildview .worldmap svg{width:100%;height:auto;display:block}
  .buildview .land polygon{fill:rgba(30,58,88,.85);stroke:rgba(70,110,150,.4);stroke-width:.7}
  .buildview .zone polygon{fill:rgba(201,169,255,.1);stroke:rgba(201,169,255,.4);stroke-width:.9;
    stroke-dasharray:4 3}
  /* Hidden on a phone: at this scale the label renders around 3px and is noise.
     The legend and the Airspace section below both name the zones instead. */
  .buildview .zone text{display:none;fill:rgba(201,169,255,.8);font-size:12px;
    font-family:'Inter',sans-serif;text-anchor:middle;letter-spacing:.02em}

  .buildview .rt .lane{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
    opacity:.34;transition:opacity .2s,stroke-width .2s}
  .buildview .rt .road{fill:none;stroke:rgba(200,220,235,.5);stroke-width:1.1;stroke-dasharray:3 2.6;
    opacity:.5}
  .buildview .rt.m-sea .lane{stroke:var(--cyan)}
  .buildview .rt.m-air .lane{stroke:#c9a9ff;stroke-dasharray:6 4}
  .buildview .rt.st-delayed .lane{stroke:var(--rag-red)}
  .buildview .rt.st-atrisk .lane,
.buildview .rt.st-hold .lane{stroke:var(--rag-amber)}
  .buildview .rt.on .lane,
.buildview .rt.lit .lane{opacity:1;stroke-width:2.4;
    filter:drop-shadow(0 0 5px currentColor)}
  .buildview .rt.on .road,
.buildview .rt.lit .road{opacity:1}
  /* The lane flows in the direction of travel while it is the one being followed. */
  .buildview .rt.on.m-sea .lane{stroke-dasharray:9 5;animation:flow 2.4s linear infinite}
  .buildview .rt.on.m-air .lane{animation:flow 2s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-28}}

  .buildview .dest circle{fill:none;stroke:var(--mint);stroke-width:1.4;opacity:.75}
  .buildview .dest .dot{fill:var(--mint);stroke:none;opacity:1}
  .buildview .dest text{fill:var(--mint);font-size:14px;font-family:'Sora',sans-serif;font-weight:600;
    letter-spacing:.02em}
  .buildview .orig circle{fill:rgba(200,220,235,.65);stroke:none}
  .buildview .orig.on circle{fill:var(--white)}
  .buildview .orig text{fill:var(--white);font-size:13px;font-family:'Inter',sans-serif;
    paint-order:stroke;stroke:rgba(8,20,34,.85);stroke-width:3px}

  .buildview .shipm{cursor:pointer}
  /* Drawn back to the true position when a marker had to be nudged clear of
     another. Without it the de-stacking would be a small lie. */
  .buildview .shipm .tie{stroke:rgba(200,225,245,.4);stroke-width:1;stroke-dasharray:2 2}
  .buildview .shipm .halo{fill:rgba(63,189,240,.16);opacity:0;transition:opacity .2s}
  .buildview .shipm .gl path{fill:rgba(200,225,245,.85);stroke:none}
  .buildview .shipm.m-air .gl path{fill:#dcc9ff}
  .buildview .shipm.st-delayed .gl path{fill:#f0909c}
  .buildview .shipm.st-atrisk .gl path,
.buildview .shipm.st-hold .gl path{fill:#f0c76a}
  .buildview .shipm .gl{transform:scale(1.5);transition:transform .2s}
  .buildview .shipm.on .halo,
.buildview .shipm.lit .halo{opacity:1}
  .buildview .shipm.on .gl,
.buildview .shipm.lit .gl{transform:scale(2.1)}
  .buildview .shipm text{fill:var(--white);font-size:13px;font-family:'Inter',sans-serif;
    text-anchor:middle;paint-order:stroke;stroke:rgba(8,20,34,.9);stroke-width:3.4px}

  .buildview .wlegend{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:12px;
    font-size:11px;color:var(--dim)}
  .buildview .wlegend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .buildview .wl{width:16px;height:0;border-top-width:2px;border-top-style:solid;flex:none}
  .buildview .wl.sea{border-color:var(--cyan)}
  .buildview .wl.air{border-color:#c9a9ff;border-top-style:dashed}
  .buildview .wl.road{border-color:rgba(200,220,235,.6);border-top-style:dotted}
  .buildview .wl.zone{border-color:rgba(201,169,255,.6);border-top-style:dashed;height:9px;
    border:1px dashed rgba(201,169,255,.6);background:rgba(201,169,255,.12);width:16px}

  .buildview .shipgrid{display:grid;grid-template-columns:1fr;gap:9px;margin-top:13px}
  .buildview .shipc{display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
    color:var(--white);background:var(--card);border:1px solid var(--line);
    border-radius:13px;padding:13px;transition:border-color .16s,background .16s}
  .buildview .shipc:hover{border-color:rgba(63,189,240,.3)}
  .buildview .shipc.on{border-color:rgba(63,189,240,.5);background:rgba(63,189,240,.07)}
  .buildview .shipc.lit{border-color:rgba(190,45,57,.5);background:rgba(190,45,57,.07)}
  .buildview .sc-top{display:flex;align-items:center;justify-content:space-between;gap:9px}
  .buildview .sc-name{font-family:'Sora',sans-serif;font-weight:600;font-size:14px;
    display:flex;align-items:center;gap:8px}
  .buildview .sc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;
    font-size:11.5px;color:var(--dim)}
  .buildview .sc-mode{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    border-radius:5px;padding:2px 6px;background:rgba(63,189,240,.14);color:var(--cyan)}
  .buildview .sc-mode.m-air{background:rgba(201,169,255,.16);color:#c9a9ff}
  .buildview .sc-arrow{color:var(--faint)}
  .buildview .sc-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.09);
    overflow:hidden;margin-top:10px}
  .buildview .sc-bar i{display:block;height:100%;border-radius:3px}
  .buildview .sc-line{display:flex;justify-content:space-between;gap:10px;margin-top:7px;
    font-size:11px;color:var(--faint)}
  .buildview .sc-eta{color:var(--dim);white-space:nowrap}
  .buildview .sc-note{color:var(--dim);font-size:12.5px;line-height:1.6;margin-top:9px}
  .buildview .zonelist .row-item + .row-item{margin-top:10px;padding-top:10px;
    border-top:1px solid var(--line)}

  /* ================= Tablet and desktop ====================================
     The demo is given on a Galaxy Tab S8, 800px portrait and 1280px landscape,
     so both are real target widths rather than "some tablet". Card stacks that
     are a long thumb-scroll on a phone become columns here. The phone layout
     above is untouched. */
  @media (min-width:700px){
    .shell{max-width:720px}
    .buildview .tstats{grid-template-columns:repeat(4,1fr)}
    .buildview .hallgrid{grid-template-columns:repeat(2,1fr)}
    .buildview .shipgrid{grid-template-columns:repeat(2,1fr)}
    .buildview .zone text{display:block}
    .buildview .subsys-grid,
.buildview .estate-grid{display:grid;grid-template-columns:repeat(2,1fr);
      gap:11px;align-items:start}
    .buildview .subsys-grid > .panel,
.buildview .estate-grid > .panel{margin-top:0}
    /* Stacked, each item is separated by a rule. In columns a rule between them
       reads as a table edge, so the cards get their own border instead. */
    .buildview .digest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;
      align-items:start;margin-top:11px}
    .buildview .digest-grid .dg-item{border-top:none;border:1px solid var(--line);
      border-radius:11px;padding:12px;margin-top:0;background:rgba(255,255,255,.025)}
    .buildview .rackgrid{grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}
    .buildview .asidegrid{grid-template-columns:repeat(2,1fr)}
    /* A 48U rack is tall. Given width, run it beside its own notes rather than
       making the reader scroll past the whole thing to reach them. */
    .buildview .elev-rack{max-width:640px}
  }
  /* Tab S8 portrait. */
  @media (min-width:800px){
    .shell{max-width:860px}
    .buildview h2.sec{font-size:19px;margin-top:34px}
    .buildview .hero .hv{font-size:52px}
  }
  /* Tab S8 landscape, and any desktop. */
  @media (min-width:1100px){
    .shell{max-width:1180px}
    .buildview .hallgrid{grid-template-columns:repeat(3,1fr)}
    .buildview .shipgrid{grid-template-columns:repeat(3,1fr)}
    .buildview .subsys-grid{grid-template-columns:repeat(3,1fr)}
    .buildview .digest-grid{grid-template-columns:repeat(3,1fr)}
    .buildview .rowlist{grid-template-columns:repeat(2,1fr)}
    .buildview .asidegrid{grid-template-columns:repeat(3,1fr)}
    /* A row that is open takes the full width, because its rack grid needs it. */
    .buildview .rowlist .rowdetail{grid-column:1 / -1}
    .buildview .lanes{grid-template-columns:repeat(3,1fr)}
    /* Once there is width, the map is comfortably tall on its own and can sit
       inside the panel like any other figure. */
    .buildview .worldmap{margin:0;border-radius:11px}
  }
  @media (min-width:700px) and (max-width:1099px){
    .buildview .rowlist .rowdetail{grid-column:1 / -1}
  }