/* SeatLayer diagram library — shared product-faithful compositions.
   Tokens mirror the live app (src/theme/brand.css) dark cockpit. v20260719b */

/* ---- window chrome ---- */
.dgw{border:1px solid #212a3d;border-radius:16px;background:#0b0f18;box-shadow:0 34px 80px -34px rgba(0,0,0,.55);overflow:hidden;color:#e9edf6}
.dgw-top{height:40px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#0d1220;border-bottom:1px solid #1c2536}
.dgw-top i{width:8px;height:8px;border-radius:50%;background:#28324a}
.dgw-title{margin-left:6px;font:9px var(--mono,ui-monospace);letter-spacing:.1em;color:#5b6478}
.dgw-live{margin-left:auto;display:flex;align-items:center;gap:6px;font:9px var(--mono,ui-monospace);letter-spacing:.12em;color:#3fbf86}
.dgw-live i{width:6px;height:6px;background:#3fbf86;box-shadow:0 0 8px #3fbf86}
.dgw-cap{display:flex;justify-content:space-between;gap:14px;padding:10px 16px;border-top:1px solid #1c2536;font:9.5px var(--mono,ui-monospace);letter-spacing:.06em;color:#5b6478}
.dg-canvas{position:relative;background:radial-gradient(120% 100% at 50% 0,#121826,#0a0e16 72%);display:flex;align-items:center;justify-content:center;padding:10px}
.dg-canvas svg{width:100%;height:auto;display:block}

/* ---- control room (cockpit) ---- */
.cr{color:#e9edf6}
.cr-top{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid #1c2536;background:#0d1220}
.cr-modes{display:flex;background:#141b2b;border:1px solid #232e46;border-radius:999px;padding:3px;gap:2px}
.cr-modes button{padding:6px 15px;border-radius:999px;font-size:12.5px;font-weight:600;color:#8a93a8;transition:background .15s,color .15s;cursor:pointer}
.cr-modes button.on{background:#6e7bff;color:#fff}
.cr-live{display:flex;align-items:center;gap:6px;font:9.5px var(--mono,ui-monospace);letter-spacing:.14em;color:#3fbf86}
.cr-live i{width:6px;height:6px;border-radius:50%;background:#3fbf86;box-shadow:0 0 8px #3fbf86}
.cr-actions{margin-left:auto;display:flex;gap:16px}
.cr-actions button{font-size:12px;font-weight:600;color:#8a93a8;cursor:pointer}
.cr-actions button:hover{color:#e9edf6}
.cr-actions button.on{color:#f4b740}
.cr-stats{display:grid;grid-template-columns:repeat(8,1fr);border-bottom:1px solid #1c2536;background:#0d1220}
.cr-stats .st{padding:13px 6px 11px;text-align:center;border-right:1px solid rgba(28,37,54,.6)}
.cr-stats .st:last-child{border-right:0}
.cr-stats b{display:flex;align-items:center;justify-content:center;gap:6px;font-size:19px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cr-stats b i{width:7px;height:7px;border-radius:50%;flex:none}
.cr-stats .st>span{display:block;font:8.5px var(--mono,ui-monospace);letter-spacing:.11em;color:#5b6478;margin-top:4px;text-transform:uppercase}
.cr-main{display:grid;grid-template-columns:minmax(0,1fr) 296px}
.cr-map{position:relative;background:radial-gradient(120% 100% at 50% 0,#121826,#0a0e16 72%);padding:8px 10px;display:flex;align-items:center;justify-content:center}
.cr-map svg{width:100%;height:auto;display:block}
.cr-zoom{position:absolute;left:16px;bottom:10px;font-size:11.5px;color:#5b6478}
.cr-rail{border-left:1px solid #1c2536;background:#0d1220;padding:15px;display:flex;flex-direction:column;gap:13px}
.crr-h{font:9px var(--mono,ui-monospace);letter-spacing:.15em;color:#8a93a8}
.crr-p{font-size:11.5px;color:#8a93a8;line-height:1.55;margin-top:7px}
.crr-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.crr-tile{background:#121828;border:1px solid #232e46;border-radius:10px;padding:9px 11px}
.crr-tile b{font-size:15.5px;font-weight:800;font-variant-numeric:tabular-nums}
.crr-tile span{display:block;font:7.5px var(--mono,ui-monospace);letter-spacing:.09em;color:#5b6478;text-transform:uppercase;margin-top:3px}
.crr-leg{margin-top:11px}
.crr-leg div{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#c6cddc;padding:3.5px 0}
.crr-leg i{width:8px;height:8px;border-radius:50%;flex:none}
.crr-leg b{margin-left:auto;font-variant-numeric:tabular-nums;font-size:12.5px}
.crr-sechead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.crr-win{display:flex;gap:3px}
.crr-win button{font:9.5px var(--mono,ui-monospace);padding:3px 7px;border-radius:6px;color:#8a93a8;cursor:pointer}
.crr-win button.on{background:#6e7bff;color:#fff}
.crr-sec{background:#121828;border:1px solid #232e46;border-radius:10px;padding:9px 11px;margin-bottom:8px;transition:border-color .3s}
.crr-sec.hot{border-color:#6e7bff}
.crr-sec .s1{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700}
.crr-sec .s1 .rev{font-variant-numeric:tabular-nums}
.crr-sec .s2{display:flex;align-items:center;gap:8px;margin-top:4px;font:10px var(--mono,ui-monospace);color:#5b6478}
.crr-sec .s2 em{font-style:normal;letter-spacing:.08em}
.crr-sec .s2 em.up{color:#3fbf86}
.crr-sec .s2 a{margin-left:auto;color:#f4b740;cursor:pointer}
.crr-feed{font:10px var(--mono,ui-monospace);color:#8a93a8;display:flex;flex-direction:column;gap:5px;min-height:74px}
.crr-feed div{display:flex;gap:8px;animation:dgTickIn .3s ease both}
.crr-feed .t{color:#5b6478}
.crr-feed .up{color:#3fbf86}
.crr-seat{background:#121828;border:1px solid #232e46;border-radius:10px;padding:11px;margin-top:9px}
.crr-seat>b{font-size:13.5px}
.crr-seat .cspRow{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12px;color:#c6cddc}
.crr-seat .cspRow i{width:8px;height:8px;border-radius:50%;flex:none}
.crr-seat .cspRow b{margin-left:auto;font-variant-numeric:tabular-nums}
.crr-seat .cspStat{margin-top:7px;font:9.5px var(--mono,ui-monospace);letter-spacing:.1em;color:#8a93a8;text-transform:uppercase}
@keyframes dgTickIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:1020px){.cr-stats{grid-template-columns:repeat(4,1fr)}.cr-stats .st{border-bottom:1px solid rgba(28,37,54,.6)}.cr-main{grid-template-columns:1fr}.cr-rail{border-left:0;border-top:1px solid #1c2536}}
@media(max-width:600px){.cr-stats{grid-template-columns:repeat(2,1fr)}.cr-actions{display:none}}

/* ---- designer frame ---- */
.dgz{display:grid;grid-template-columns:46px minmax(0,1fr) 200px}
.dgz-rail{background:#0d1220;border-right:1px solid #1c2536;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 0}
.dgz-rail i{width:26px;height:26px;border-radius:7px;background:#141b2b;display:flex;align-items:center;justify-content:center;color:#5b6d96;font:11px var(--mono,ui-monospace);cursor:pointer}
.dgz-rail i.on{background:#f4b740;color:#1a1200}
.dgz-stage{background:radial-gradient(120% 100% at 50% 0,#121826,#0a0e16 72%);display:flex;flex-direction:column;justify-content:center;padding:16px}
.dgz-stage svg{width:100%;height:auto;display:block}
.dgz-side{border-left:1px solid #1c2536;background:#0d1220;padding:14px;display:flex;flex-direction:column;gap:12px}
.dgz-tabs{display:flex;gap:2px;background:#141b2b;border:1px solid #232e46;border-radius:8px;padding:2px}
.dgz-tabs b{flex:1;text-align:center;font-size:10px;font-weight:600;color:#8a93a8;padding:5px 2px;border-radius:6px}
.dgz-tabs b.on{background:#232e46;color:#e9edf6}
.dgz-field{font-size:11px;color:#8a93a8}
.dgz-field b{display:block;color:#e9edf6;font-size:12.5px;font-variant-numeric:tabular-nums;margin-top:2px}
.dgz-cats{display:flex;flex-direction:column;gap:6px}
.dgz-cat{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#c6cddc;background:#121828;border:1px solid #232e46;border-radius:8px;padding:6px 9px;cursor:pointer}
.dgz-cat i{width:9px;height:9px;border-radius:50%;flex:none}
.dgz-cat.on{border-color:#f4b740}
.dgz-cat b{margin-left:auto;font-variant-numeric:tabular-nums;font-size:11px}
.dgz-ctrl{display:flex;align-items:center;gap:12px;padding:10px 4px 2px}
.dgz-ctrl label{font:9.5px var(--mono,ui-monospace);letter-spacing:.08em;color:#8a93a8;white-space:nowrap}
.dgz-ctrl input[type=range]{flex:1;accent-color:#f4b740;height:4px}
.dgz-ctrl .val{font:11.5px var(--mono,ui-monospace);font-weight:700;color:#f4b740;min-width:66px;text-align:right}
@media(max-width:760px){.dgz{grid-template-columns:40px minmax(0,1fr)}.dgz-side{display:none}}

/* ---- buyer picker widget ---- */
.dgp{position:relative}
.dgp-tip{position:absolute;pointer-events:none;z-index:5;background:#10151f;border:1px solid #2e3950;border-radius:10px;padding:9px 11px;box-shadow:0 14px 34px -12px rgba(0,0,0,.7);min-width:150px;opacity:0;transition:opacity .12s}
.dgp-tip.show{opacity:1}
.dgp-tip .r1{font-size:12px;font-weight:700;color:#e9edf6}
.dgp-tip .r2{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11px;color:#c6cddc}
.dgp-tip .r2 i{width:8px;height:8px;border-radius:50%}
.dgp-tip .r2 b{margin-left:auto}
.dgp-tip .r3{margin-top:5px;font:8.5px var(--mono,ui-monospace);letter-spacing:.1em;color:#5b6478;text-transform:uppercase}
.dgp-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid #1c2536;background:#0d1220}
.dgp-cart{font:11.5px var(--mono,ui-monospace);color:#8a93a8}
.dgp-cart b{color:#e9edf6}
.dgp-hold{font:10px var(--mono,ui-monospace);color:#f4b740}
.dgp-cta{margin-left:auto;font-size:12px;font-weight:700;color:#1a1200;background:#f4b740;padding:8px 14px;border-radius:8px;opacity:.45;cursor:pointer}
.dgp-cta.ready{opacity:1}

/* ---- generic node-flow (keys / race / trust) ---- */
.dgf{padding:20px 18px}
.dgf-row{display:flex;align-items:stretch;gap:0;justify-content:center}
.dgf-node{background:#121828;border:1px solid #232e46;border-radius:12px;padding:12px 14px;min-width:128px;transition:border-color .25s, box-shadow .25s}
.dgf-node.on{border-color:#f4b740;box-shadow:0 0 0 3px rgba(244,183,64,.12)}
.dgf-node small{display:block;font:8px var(--mono,ui-monospace);letter-spacing:.11em;color:#5b6478;text-transform:uppercase}
.dgf-node b{display:block;font-size:12.5px;margin-top:4px;color:#e9edf6}
.dgf-node code{display:block;font:9.5px var(--mono,ui-monospace);color:#f4b740;margin-top:5px}
.dgf-arrow{position:relative;flex:0 0 46px;display:flex;align-items:center;justify-content:center;color:#33405e}
.dgf-arrow:before{content:"";position:absolute;left:4px;right:4px;top:50%;border-top:1px dashed #2e3950}
.dgf-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#f4b740;box-shadow:0 0 10px #f4b740;opacity:0}
.dgf-cap2{margin-top:14px;text-align:center;font:10px var(--mono,ui-monospace);color:#8a93a8;min-height:16px}
@media(max-width:760px){.dgf-row{flex-direction:column;gap:8px}.dgf-arrow{flex:none;height:22px}.dgf-arrow:before{left:50%;right:auto;top:2px;bottom:2px;border-top:0;border-left:1px dashed #2e3950}}

/* ---- webhook ledger ---- */
.dgl{display:grid;grid-template-columns:1fr 1.3fr}
.dgl-left{padding:18px;border-right:1px solid #1c2536}
.dgl-chips{display:flex;flex-wrap:wrap;gap:7px}
.dgl-chip{font:10.5px var(--mono,ui-monospace);color:#e9edf6;background:#121828;border:1px solid #232e46;border-radius:6px;padding:5px 9px}
.dgl-chip.on{border-color:#f4b740;color:#f4b740;background:rgba(244,183,64,.07)}
.dgl-secret{margin-top:16px;font:11px var(--mono,ui-monospace);color:#8a93a8;background:#121828;border:1px solid #232e46;border-radius:8px;padding:9px 11px;display:flex;justify-content:space-between;align-items:center}
.dgl-secret span:last-child{color:#f4b740;font-size:10px}
.dgl-right{padding:14px 18px;font:11px var(--mono,ui-monospace)}
.dgl-row{display:grid;grid-template-columns:64px 1fr 48px auto;gap:10px;padding:7px 0;border-bottom:1px dashed rgba(139,148,172,.14);color:#8a93a8;align-items:center;animation:dgTickIn .3s ease both}
.dgl-row .ev{color:#e9edf6}
.dgl-row .ok{color:#3fbf86;text-align:right}
.dgl-row .err{color:#e5695d;text-align:right}
@media(max-width:760px){.dgl{grid-template-columns:1fr}.dgl-left{border-right:0;border-bottom:1px solid #1c2536}}

/* ---- floor pills (multi-floor) ---- */
.dg-pills{display:flex;gap:4px;justify-content:center;padding:0 0 6px}
.dg-pills button{font-size:11.5px;font-weight:600;color:#8a93a8;padding:6px 13px;border-radius:999px;border:1px solid #232e46;background:#141b2b;cursor:pointer}
.dg-pills button.on{background:#6e7bff;border-color:#6e7bff;color:#fff}

/* ---- capacity / progress ---- */
.dg-meter{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid #1c2536;background:#0d1220}
.dg-meter label{font:9px var(--mono,ui-monospace);letter-spacing:.1em;color:#5b6478;white-space:nowrap}
.dg-meter .tr{flex:1;height:6px;border-radius:4px;background:#141b2b;overflow:hidden}
.dg-meter .tr i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#f4b740,#f7c766);border-radius:4px;transition:width .5s}
.dg-meter b{font:11px var(--mono,ui-monospace);color:#f4b740;min-width:38px;text-align:right}

/* ---------- CLS guard: reserve the space SLD.render() will fill ----------
   diagrams.js runs at end of <body>, so these hosts paint collapsed and then
   inflate, shifting everything below them. Heights are the measured
   post-render heights per breakpoint (audit 2026-07-23). Keep in sync if a
   diagram's rendered size changes. NOTE: #whyHeroPicker (why-seatlayer) renders
   pickerWidget, NOT the cockpit that #heroCockpit renders elsewhere. */
#heroPicker,#migPicker,#whyHeroPicker{min-height:384px}
#heroMaker,#heroDesigner{min-height:304px}
#viewsViz,#arenaHeroHost{min-height:429px}
#engineViz,#makerPoster{min-height:361px}
#raceViz{min-height:205px}
#scanViz{min-height:295px}
#vPano,#aPano{min-height:347px}
#shiftMapHost{min-height:350px}
#proofCockpit,#heroCockpit{min-height:888px}

@media(max-width:1100px){
  #heroPicker,#migPicker,#whyHeroPicker{min-height:343px}#viewsViz,#arenaHeroHost{min-height:403px}
  #engineViz,#makerPoster{min-height:315px}#raceViz{min-height:231px}#scanViz{min-height:276px}
}
@media(max-width:900px){
  #heroPicker,#migPicker,#whyHeroPicker{min-height:490px}#viewsViz,#arenaHeroHost{min-height:560px}
  #engineViz,#makerPoster{min-height:478px}#heroMaker,#heroDesigner{min-height:310px}
  #proofCockpit,#heroCockpit{min-height:1392px}#scanViz{min-height:392px}
}
@media(max-width:560px){
  #heroPicker,#migPicker,#whyHeroPicker,#heroMaker,#heroDesigner{min-height:267px}
  #viewsViz,#arenaHeroHost{min-height:288px}#engineViz,#makerPoster{min-height:230px}
  #raceViz{min-height:309px}#scanViz{min-height:222px}
  #proofCockpit,#heroCockpit{min-height:1331px}#vPano,#aPano{min-height:360px}
}