/* Colocation builder on colocation-pricing.html. Everything is scoped to .cb
   because the drawing uses short class names (.rack, .tag, .wall) that would
   otherwise collide with site styles. The data hall uses the site hero's navy gradient, with the light blue, green
   and amber accents from styles.css. Specs only, never a price. */
.cb {
  --cb-panel: var(--surface, #fff); --cb-ink: var(--ink, #16181d); --cb-muted: var(--ink-2, #4b5160);
  --cb-line: var(--line, #e6e4df); --cb-accent: var(--accent, #003b5c); --cb-accent-soft: var(--accent-soft, #e5edf2);
  --cb-good: #2c7a4b; --cb-warn: #a86300; --cb-bad: #b23128;
  --hall: #00263c; --hall2: #00466a; --rack: #0c3550; --rack-edge: #2a5a7a;
  --feedA: #7fd4f0; --feedB: #43b763; --cool: #5ec8d8; --fiber: #f2b84b; --hot: #ea580c; --hall-ink: #cfe1ec;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  margin: 28px 0 8px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.45; color: var(--cb-ink);
}
.cb *, .cb *::before, .cb *::after { box-sizing: border-box; }
.cb .cb-build { display: flex; flex-direction: column; gap: 14px; }

/* drawing */
.cb .stagecard { background: var(--hall); border-radius: 14px; overflow: hidden; border: 1px solid var(--cb-line); }
.cb .hud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #164866; }
.cb .hud div { padding: 9px 12px; border-right: 1px solid #164866; min-width: 0; }
.cb .hud div:last-child { border-right: 0; }
.cb .hud b { display: block; font: 500 17px/1.3 var(--mono); color: #ffffff; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb .hud span { font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hall-ink); }
.cb .hud .fit-good { color: #5dc68a; } .cb .hud .fit-warn { color: #e3a43c; } .cb .hud .fit-bad { color: #ff6f5e; } .cb .hud .fit-neutral { color: #c7d2da; }

.cb .stage { position: relative; width: 100%; aspect-ratio: 16 / 9.4; overflow: hidden; container-type: inline-size;
  background: repeating-linear-gradient(90deg, #ffffff06 0 1px, transparent 1px 5%), radial-gradient(120% 140% at 50% 0%, #00587f 0%, #003b5c 46%, var(--hall) 100%);
  font-family: var(--mono); color: var(--hall-ink); }
.cb .stage * { position: absolute; }
.cb .tag { font-size: clamp(7px, 1.15cqw, 11px); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; position: absolute; }
.cb .floor { left: 0; right: 0; bottom: 0; height: 14%; background: repeating-linear-gradient(90deg, #1d4a68 0 1px, transparent 1px 4.2%), linear-gradient(#0b3049, #021f33); border-top: 2px solid #2f6283; }
.cb .perf { bottom: 14%; height: 1.2%; background: repeating-linear-gradient(90deg, #5ec8d855 0 3px, transparent 3px 6px); transition: left .8s cubic-bezier(.2,.8,.2,1), width .8s cubic-bezier(.2,.8,.2,1), opacity .5s; opacity: 0; }
.cb .stage[data-cooling="air"] .perf, .cb .stage[data-cooling="containment"] .perf { opacity: 1; }

.cb .tray { left: 0; right: 11%; top: 4.5%; height: 2.4%; background: repeating-linear-gradient(90deg, #f2b84b33 0 2px, transparent 2px 10px); border-top: 1px solid #f2b84b99; border-bottom: 1px solid #f2b84b99; transform-origin: right; transform: scaleX(0); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.cb .mmr { right: 2%; top: 2%; width: 9%; height: 9%; border: 1px solid #f2b84baa; background: #f2b84b14; border-radius: 3px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-40%); transition: opacity .4s, transform .5s; }
.cb .mmr .tag { position: static; color: #f2b84b; }
.cb .stage[data-fiber="on"] .tray { transform: scaleX(1); }
.cb .stage[data-fiber="on"] .mmr { opacity: 1; transform: none; }
.cb .bus { left: 0; right: 0; height: 1.3%; transform: scaleX(0); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.cb .bus.a { top: 11%; background: linear-gradient(90deg, #7fd4f044, var(--feedA)); transform-origin: left; }
.cb .bus.b { top: 14.6%; background: linear-gradient(270deg, #43b76344, var(--feedB)); transform-origin: right; }
.cb .bus .tag { top: -150%; transform: translateY(-100%); }
.cb .bus.a .tag { left: 1.5%; color: var(--feedA); }
.cb .bus.b .tag { right: 1.5%; color: var(--feedB); top: auto; bottom: -140%; transform: translateY(100%); }
.cb .stage[data-power="A"] .bus.a, .cb .stage[data-power="AB"] .bus.a, .cb .stage[data-power="AB"] .bus.b { transform: scaleX(1); }

.cb .ghost { bottom: 14%; height: 60%; width: 9%; border: 1px dashed #2f6283; border-radius: 2px; background: repeating-linear-gradient(135deg, #ffffff05 0 6px, transparent 6px 12px); transition: left .8s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.cb .ghost .tag { left: 0; right: 0; text-align: center; top: 44%; color: #6f97b3; white-space: normal; line-height: 1.3; }

.cb .rack { bottom: 14%; height: 60%; width: 9%; transition: left .85s cubic-bezier(.2,.8,.2,1), opacity .5s; opacity: 0; }
.cb .rack.in { opacity: 1; }
.cb .rbody { inset: 0; background: linear-gradient(90deg, #082c44, var(--rack) 30%, var(--rack) 70%, #082c44); border: 1px solid var(--rack-edge); border-radius: 2px; overflow: hidden; }
.cb .units { left: 9%; right: 14%; bottom: 3%; height: 40%; background: repeating-linear-gradient(to bottom, #2a5675 0 1px, #123d59 1px 6px); transition: height .7s cubic-bezier(.2,.8,.2,1); border-top: 1px solid #3d7090; }
.cb .units::after { content: ""; position: absolute; right: 6%; top: 2px; bottom: 2px; width: 7%; background: repeating-linear-gradient(to bottom, #43b763 0 2px, transparent 2px 6px); opacity: .8; animation: cb-blink 1.6s steps(2) infinite; }
.cb .rack:nth-child(2n) .units::after { animation-delay: .4s; } .cb .rack:nth-child(3n) .units::after { animation-delay: .9s; }
@keyframes cb-blink { 50% { opacity: .35; } }
.cb .heat { left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(#ea580c66, transparent); opacity: 0; transition: opacity .7s; }
.cb .stage.overheat .heat { animation: cb-pulse 1.4s ease-in-out infinite; }
@keyframes cb-pulse { 50% { opacity: 1; } }
.cb .tenant { left: 0; right: 0; top: 0; height: 0; background: repeating-linear-gradient(135deg, #ffffff0c 0 5px, transparent 5px 10px); border-bottom: 0 dashed var(--cool); transition: height .7s cubic-bezier(.2,.8,.2,1); }
.cb .tenant .tag { left: 0; right: 0; text-align: center; top: 40%; color: #7fa3bb; font-size: clamp(6px, .9cqw, 9px); white-space: normal; line-height: 1.3; }
.cb .tenant .tag { opacity: 0; transition: opacity .4s; }
.cb .stage[data-footprint="quarter"] .tenant .tag, .cb .stage[data-footprint="half"] .tenant .tag { opacity: 1; }
.cb .stage[data-footprint="quarter"] .tenant { height: 72%; border-bottom-width: 2px; }
.cb .stage[data-footprint="half"] .tenant { height: 48%; border-bottom-width: 2px; }
.cb .rlabel { top: 2%; left: 9%; font-size: clamp(6px, 1cqw, 10px); color: #8fb2c8; letter-spacing: .08em; }
.cb .stage[data-footprint="quarter"] .rlabel, .cb .stage[data-footprint="half"] .rlabel { opacity: 0; }
.cb .rdhx { top: 0; bottom: 0; right: 0; width: 15%; background: repeating-linear-gradient(to bottom, #5ec8d8 0 1px, #0c4a5c 1px 4px); border-left: 1px solid var(--cool); transform: translateX(110%); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.cb .stage[data-cooling="rdhx"] .rdhx { transform: none; }
.cb .hose { bottom: 0; left: 3%; width: 5%; height: 86%; background: linear-gradient(90deg, var(--cool) 0 40%, transparent 40% 60%, var(--hot) 60%); transform: scaleY(0); transform-origin: bottom; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.cb .stage[data-cooling="liquid"] .hose { transform: scaleY(1); }
.cb .lock { left: 50%; top: 50%; width: 22%; aspect-ratio: 1 / 1.1; margin-left: -11%; background: #d6e6f0; border-radius: 2px; opacity: 0; transform: translateY(-200%) scale(.6); transition: opacity .4s, transform .5s cubic-bezier(.3,1.4,.5,1); }
.cb .lock::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: 82%; height: 60%; border: 2px solid #d6e6f0; border-bottom: 0; border-radius: 99px 99px 0 0; }
.cb .stage[data-security="locked"] .lock { opacity: 1; transform: none; }
.cb .stage[data-footprint="quarter"] .lock { top: 80%; } .cb .stage[data-footprint="half"] .lock { top: 68%; }
.cb .whip { bottom: 100%; width: 2px; transform: scaleY(0); transform-origin: top; transition: transform .5s ease .35s; }
.cb .whip.a { left: 24%; height: 25%; background: var(--feedA); }
.cb .whip.b { left: 36%; height: 19%; background: var(--feedB); }
.cb .stage[data-power="A"] .whip.a, .cb .stage[data-power="AB"] .whip.a, .cb .stage[data-power="AB"] .whip.b { transform: scaleY(1); }
.cb .xc { bottom: 100%; width: 2px; height: 35%; background: var(--fiber); transform: scaleY(0); transform-origin: top; transition: transform .5s ease; }
.cb .xc.on { transform: scaleY(1); }
.cb .xc:nth-of-type(3) { left: 62%; } .cb .xc:nth-of-type(4) { left: 72%; } .cb .xc:nth-of-type(5) { left: 82%; }

.cb .air { bottom: 14%; height: 62%; transition: left .8s cubic-bezier(.2,.8,.2,1), width .8s cubic-bezier(.2,.8,.2,1), opacity .5s; opacity: 0; pointer-events: none; }
.cb .stage[data-cooling="air"] .air, .cb .stage[data-cooling="containment"] .air { opacity: 1; }
.cb .air i { bottom: 0; width: 1.5px; height: 22%; background: linear-gradient(to top, transparent, #5ec8d8aa, transparent); animation: cb-rise 2.6s linear infinite; }
@keyframes cb-rise { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-330%); opacity: 0; } }

.cb .contain-roof { height: 4.5%; top: 21%; background: linear-gradient(#4f86a6cc, #1f4f6ecc); border: 1px solid #7fb0cc; border-radius: 2px; transform: translateY(-560%); opacity: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .4s, left .8s, width .8s; display: flex; align-items: center; justify-content: center; }
.cb .contain-roof .tag { position: static; color: #d9e4ea; font-size: clamp(6px, .95cqw, 10px); }
.cb .contain-door { bottom: 14%; height: 61%; width: 1%; background: linear-gradient(90deg, #a9d6e633, #a9d6e666); border: 1px solid #7fb0cc; transform: translateY(-140%); opacity: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1) .15s, opacity .4s, left .8s; }
.cb .stage[data-cooling="containment"] .contain-roof, .cb .stage[data-cooling="containment"] .contain-door { transform: none; opacity: 1; }

.cb .cdu { bottom: 14%; height: 38%; width: 5.5%; background: linear-gradient(90deg, #0e3a52, #134761); border: 1px solid var(--cool); border-radius: 2px; opacity: 0; transform: translateX(-300%); transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .4s, left .8s; display: flex; align-items: flex-start; justify-content: center; }
.cb .cdu .tag { position: static; margin-top: 12%; color: var(--cool); }
.cb .cdu::after { content: ""; position: absolute; left: 20%; right: 20%; top: 40%; height: 40%; background: repeating-linear-gradient(to bottom, #5ec8d855 0 2px, transparent 2px 5px); }
.cb .manifold { bottom: 6.5%; height: 2.6%; background: linear-gradient(to bottom, var(--cool) 0 38%, transparent 38% 62%, var(--hot) 62%); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.8,.2,1) .2s, left .8s, width .8s; }
.cb .stage[data-cooling="liquid"] .cdu { transform: none; opacity: 1; }
.cb .stage[data-cooling="liquid"] .manifold { transform: scaleX(1); }

.cb .cage { bottom: 14%; height: 66%; border: 2px solid #a9c6d8; border-bottom: 0; background: repeating-linear-gradient(45deg, #a9c6d833 0 1px, transparent 1px 9px), repeating-linear-gradient(-45deg, #a9c6d833 0 1px, transparent 1px 9px); transform: translateY(-130%); transition: transform .8s cubic-bezier(.25,1.15,.4,1), left .8s, width .8s; pointer-events: none; }
.cb .cage .tag { left: 0; top: -1px; transform: translateY(-100%); background: #a9c6d8; color: #00263c; padding: 2px 6px; }
.cb .cage .gate { right: 6%; bottom: 0; width: 8%; height: 58%; border: 2px solid #d6e6f0; border-bottom: 0; }
.cb .cage .gate::after { content: ""; position: absolute; left: 12%; top: 45%; width: 22%; height: 12%; background: #43b763; border-radius: 1px; }
.cb .stage[data-security="cage"] .cage { transform: none; }
.cb .wall { bottom: 14%; top: 9%; width: 1.6%; background: linear-gradient(90deg, #2c5675, #4a7896); opacity: 0; transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .5s, left .8s; }
.cb .wall.l { transform: translateX(-500%); } .cb .wall.r { transform: translateX(500%); }
.cb .suite-head { top: 9%; height: 3%; background: #4a7896; transform: translateY(-400%); opacity: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1) .2s, opacity .5s, left .8s, width .8s; }
.cb .suite-head .tag { position: static; display: block; text-align: center; color: #e6f0f6; line-height: 1; padding-top: .3%; }
.cb .suite-tint { top: 12%; bottom: 14%; background: #5ec8d80a; opacity: 0; transition: opacity .6s, left .8s, width .8s; }
.cb .reader { width: 1%; height: 4%; top: 52%; background: #d6e6f0; border-radius: 1px; opacity: 0; transition: opacity .4s .6s, left .8s; }
.cb .reader::after { content: ""; position: absolute; left: 25%; right: 25%; top: 20%; height: 18%; background: #43b763; }
.cb .stage[data-security="suite"] .wall, .cb .stage[data-security="suite"] .suite-head { transform: none; opacity: 1; }
.cb .stage[data-security="suite"] .suite-tint, .cb .stage[data-security="suite"] .reader { opacity: 1; }

.cb .legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 9px 12px; border-top: 1px solid #164866; font: 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hall-ink); }
.cb .legend span { display: inline-flex; align-items: center; gap: 6px; }
.cb .legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.cb .replay { margin-left: auto; appearance: none; border: 1px solid #2f6283; background: transparent; color: #e6f0f6; font: inherit; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 5px; cursor: pointer; }
.cb .replay:hover { border-color: var(--cool); color: var(--cool); }

/* controls */
.cb .controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cb fieldset.group { border: 1px solid var(--cb-line); background: var(--cb-panel); border-radius: 12px; margin: 0; padding: 12px 12px 14px; min-width: 0; }
.cb fieldset.wide { grid-column: 1 / -1; }
.cb legend { display: contents; }
.cb .ghead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.cb .gname { font: 700 15px/1.2 var(--font-head); color: var(--cb-ink); }
.cb .opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cb .opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb .opts.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cb .opt { appearance: none; text-align: left; border: 1px solid var(--cb-line); background: transparent; color: var(--cb-ink); border-radius: 8px; padding: 8px 9px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 1px; transition: border-color .15s, background .15s, transform .1s; min-width: 0; }
.cb .opt:hover:not(:disabled) { border-color: var(--cb-accent); }
.cb .opt:active:not(:disabled) { transform: scale(.98); }
.cb .opt:focus-visible, .cb .step button:focus-visible, .cb .replay:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 2px; }
.cb .opt[aria-pressed="true"] { background: var(--cb-accent-soft); border-color: var(--cb-accent); box-shadow: inset 0 0 0 1px var(--cb-accent); }
.cb .opt:disabled { opacity: .38; cursor: not-allowed; }
.cb .opt .t { font-weight: 700; font-size: 13px; }
.cb .opt .s { font-size: 11.5px; color: var(--cb-muted); line-height: 1.3; }
.cb .opts.five .opt { align-items: center; text-align: center; padding: 8px 4px; }
.cb .step { display: flex; align-items: center; gap: 10px; flex: none; }
.cb .step button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--cb-line); background: transparent; color: var(--cb-ink); font-size: 18px; cursor: pointer; }
.cb .step button:disabled { opacity: .35; cursor: not-allowed; }
.cb .step output { font: 20px var(--mono); min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.cb .steprow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cb .hint { font-size: 12px; color: var(--cb-muted); margin: 0; }
.cb .pill { font: 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; }
.cb .pill.good { color: var(--cb-good); } .cb .pill.warn { color: var(--cb-warn); } .cb .pill.bad { color: var(--cb-bad); } .cb .pill.neutral { color: var(--cb-muted); }

/* summary and hand-off */
.cb .summary { background: var(--cb-accent-soft); border: 1px solid var(--cb-line); border-radius: 14px; padding: 16px 18px; }
.cb .summary h3 { margin: 0 0 10px; font: 700 18px/1.2 var(--font-head); }
.cb dl.req { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.cb dl.req dt { color: var(--cb-muted); font-size: 13px; }
.cb dl.req dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.cb .cb-send { margin-top: 16px; }
.cb .cb-send label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.cb .cb-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.cb .cb-actions input { flex: 1 1 220px; min-width: 0; border: 1px solid #cfd2d8; border-radius: 10px; padding: 12px 14px; font: 16px/1.4 var(--font-body); color: var(--cb-ink); background: var(--cb-panel); }
.cb .cb-actions input:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 2px; }
.cb .cb-actions .btn { flex: 0 0 auto; }
.cb .cb-send .hint { margin-top: 8px; }
.cb .cb-note { font-size: 12px; color: var(--cb-muted); margin: 10px 0 0; }

@media (max-width: 700px) {
  .cb .controls { grid-template-columns: 1fr; }
  .cb .stagecard { position: sticky; top: 76px; z-index: 5; box-shadow: 0 8px 20px -12px #0008; }
  .cb .hud div { padding: 6px 8px; }
  .cb .hud b { font-size: 14px; }
  .cb .legend { display: none; }
}
@media (max-width: 460px) {
  .cb .opts.three { grid-template-columns: 1fr; }
  .cb .opts.five .opt .s { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cb *, .cb *::before, .cb *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}