/* SEISAN STUDIO — full-screen flow-editor app. No site chrome: max board space.
   Tiles keep the concept board's anatomy; tokens come from style.css. */
:root{ --red:#ef7d7d; }

body.app{height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
body.app .scanlines{display:none}

/* ---------- App bar ---------- */
.appbar{flex:none;display:flex;align-items:center;gap:14px;padding:7px 12px;z-index:20;
  background:rgba(4,6,11,.94);border-bottom:1px solid var(--line)}
.app-home{display:flex;align-items:center;gap:10px;color:var(--ink)}
.app-home .glyph-mini{font-size:19px}
.app-title{font-weight:700;letter-spacing:4px;font-size:15px}
.app-jp{font-family:var(--jp);letter-spacing:1px;color:var(--cyan)}
.app-template{font-size:10px;letter-spacing:2px;color:var(--faint)}
.app-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:nowrap;flex:none;align-items:center}
.tbtn{background:rgba(16,24,40,.85);border:1px solid var(--line);color:var(--dim);padding:7px 13px;border-radius:8px;
  font:500 13px var(--disp);cursor:pointer}
.tbtn:hover:not(:disabled){color:var(--ink);border-color:var(--line-bright)}
.tbtn:disabled{opacity:.38;cursor:default}
.tbtn.fs{color:#031018;background:var(--cyan);border-color:var(--cyan);font-weight:700}
.tbtn.fs:hover{color:#031018;box-shadow:0 0 18px rgba(62,230,255,.5)}
@media(max-width:760px){.app-template{display:none}}

/* ---------- Full-screen hint ---------- */
.fs-hint{flex:none;display:none;align-items:center;gap:12px;padding:7px 12px;font-size:10.5px;letter-spacing:1.5px;
  color:var(--amber);background:rgba(240,178,74,.08);border-bottom:1px solid #54431f}
.fs-hint.show{display:flex}
.fs-hint span{flex:1}
.fs-hint button{margin-left:auto;background:transparent;color:var(--amber);border:1px solid #54431f;border-radius:6px;
  font:600 15px/1 var(--disp);padding:4px 10px;cursor:pointer;flex:none}

/* ---------- Workbench ---------- */
.workbench{flex:1;display:flex;min-height:0;position:relative}

/* ---------- Library ---------- */
.library{width:200px;flex:none;overflow-y:auto;background:rgba(10,15,26,.92);border-right:1px solid var(--line);padding:14px 12px}
.lib-group{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--faint);margin:14px 0 7px}
.lib-group:first-child{margin-top:0}
.lib-item{display:flex;align-items:center;gap:9px;background:rgba(62,230,255,.04);border:1px solid var(--line);
  border-radius:9px;padding:10px 11px;font-size:13.5px;font-weight:600;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;margin-bottom:8px}
.lib-item:hover{border-color:var(--line-bright)}
.lib-item em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.4px;color:var(--faint);text-align:right}
.lib-item.maxed{opacity:.4;cursor:not-allowed}
.lib-dot{width:10px;height:10px;border-radius:50%;flex:none}
.lib-dot.brain{background:var(--cyan);box-shadow:0 0 9px rgba(62,230,255,.8)}
.lib-dot.lane{background:var(--amber);box-shadow:0 0 9px rgba(240,178,74,.8)}
.lib-dot.audit{background:var(--green);box-shadow:0 0 9px rgba(95,214,138,.8)}
.lib-dot.appeals{background:#c792ff;box-shadow:0 0 9px rgba(199,146,255,.8)}
.lib-dot.release{background:var(--faint)}
.lib-dot.intake{background:#7dd3fc;box-shadow:0 0 9px rgba(125,211,252,.8)}
.lib-dot.design{background:#fda4af;box-shadow:0 0 9px rgba(253,164,175,.8)}
.lib-dot.ci{background:#facc15;box-shadow:0 0 9px rgba(250,204,21,.8)}
.lib-dot.staging{background:#2dd4bf;box-shadow:0 0 9px rgba(45,212,191,.8)}
.lib-dot.observe{background:#a5b4fc;box-shadow:0 0 9px rgba(165,180,252,.8)}
.lib-note{margin-top:12px;font-size:12px;color:var(--faint);line-height:1.55}
.lib-ghost{position:fixed;z-index:99;pointer-events:none;background:rgba(18,26,42,.96);border:1px solid var(--line-bright);
  border-radius:10px;padding:9px 14px;font:600 13.5px var(--disp);color:var(--ink);box-shadow:0 14px 34px rgba(0,0,0,.6)}

/* ---------- Canvas ---------- */
.canvasbox{flex:1;min-width:0;overflow:hidden;overscroll-behavior:contain;touch-action:none;user-select:none;-webkit-user-select:none;
  background:radial-gradient(circle,#1c2946 1px,transparent 1.2px) 0 0/22px 22px, linear-gradient(180deg,rgba(10,16,28,.97),rgba(6,9,16,.97))}
.canvas{position:relative;width:1180px;transform-origin:0 0;will-change:transform}
.canvas.anim{transition:transform .32s ease}
.canvas svg{position:absolute;inset:0;overflow:visible}
#wireGroup path{cursor:pointer;pointer-events:stroke}
#wireGroup path.sel{stroke-width:3.5;filter:drop-shadow(0 0 7px rgba(62,230,255,.65))}
.flowlabel{position:absolute;font-size:12px;color:var(--dim);background:#0b111f;padding:1px 8px;border-radius:6px;
  border:1px solid var(--line);white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none;z-index:2}
.flowlabel.sel{color:#031018;background:var(--cyan);border-color:var(--cyan);font-weight:600}
.flowlabel.good{color:var(--green);border-color:#24503a}
.flowlabel.warn{color:var(--amber);border-color:#54431f}

/* ---------- Nodes (concept anatomy) ---------- */
.node{position:absolute;width:250px;background:rgba(18,26,42,.97);border:1px solid var(--line-bright);border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.5);z-index:3}
.node .head{padding:10px 14px 8px;border-bottom:1px solid var(--line);cursor:grab;position:relative;touch-action:none}
.node .head:active{cursor:grabbing}
.node .role{font-size:10.5px;letter-spacing:2px;color:var(--faint);text-transform:uppercase}
.node h3{font-size:17px;margin-top:1px;font-weight:600}
.node .body{padding:11px 14px 13px}
.node label.lab{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:1px;display:block}
.node.brain{border-top:3px solid var(--cyan)}
.node.lane{border-top:3px solid var(--amber)}
.node.audit{border-top:3px solid var(--green)}
.node.appeals{border-top:3px solid #c792ff}
.node.release{border-top:3px solid var(--faint);opacity:.94}
.node.intake{border-top:3px solid #7dd3fc}
.node.design{border-top:3px solid #fda4af}
.node.ci{border-top:3px solid #facc15}
.node.staging{border-top:3px solid #2dd4bf}
.node.observe{border-top:3px solid #a5b4fc}
.node .x{position:absolute;top:7px;right:9px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--faint);font-size:13px;line-height:1;cursor:pointer;touch-action:manipulation}
.node .x:hover{color:var(--ink);border-color:var(--faint)}
.node .tagq{position:absolute;top:9px;right:40px;font-family:var(--mono);font-size:9px;letter-spacing:1.5px;color:#04060b;
  background:var(--amber);border-radius:4px;padding:2px 6px;font-weight:600}
.modelsel{margin-top:5px;width:100%;appearance:none;-webkit-appearance:none;cursor:pointer;
  background:rgba(62,230,255,.055) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%233ee6ff' stroke-width='1.6' fill='none'/></svg>") no-repeat right 11px center;
  border:1px solid var(--line);border-radius:8px;color:var(--ink);font:600 14.5px var(--disp);padding:8px 28px 8px 11px}
.modelsel:focus{outline:none;border-color:var(--cyan)}
.modelsel option{background:#0b111f;color:var(--ink);font-weight:500}
.modelsub{display:block;font-size:12.5px;color:var(--dim);margin-top:5px}
.cost{margin-top:9px;font-size:13px;color:var(--dim)}
.cost b{color:var(--ink)}
.cost .shared{color:var(--amber)}
.altline{margin-top:7px;font-size:12.5px;color:var(--amber)}
.node p.desc{font-size:13px;color:var(--dim);line-height:1.5}
.port{position:absolute;width:18px;height:18px;border-radius:50%;background:#0b111f;border:2px solid var(--faint);
  top:50%;margin-top:-9px;z-index:4;cursor:crosshair;touch-action:none}
.port.in{left:-10px}
.port.out{right:-10px;border-color:var(--cyan)}
.port.out:hover,.port.hot{border-color:var(--ink);background:var(--cyan);box-shadow:0 0 12px rgba(62,230,255,.8)}
.node.dragging{box-shadow:0 24px 50px rgba(0,0,0,.7),0 0 0 1px var(--line-bright);z-index:9}

/* ---------- Side panel ---------- */
.side{width:324px;flex:none;overflow-y:auto;background:rgba(8,12,22,.96);border-left:1px solid var(--line);padding:16px 14px}
.side-h{font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--faint);margin:18px 0 12px}
.side-foot{margin-top:14px;font-size:12px;color:var(--faint);line-height:1.55}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.card .k{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;color:var(--cyan)}
.card p{font-size:13.5px;color:var(--dim);line-height:1.55}
.card p b{color:var(--ink)}
.card.good .k{color:var(--green)}
.card.warn .k{color:var(--amber)}
.card.bad{border-color:#5f2b2b;background:rgba(50,16,16,.5)}
.card.bad .k{color:var(--red)}
.card.total .big{font-size:25px;font-weight:700;color:var(--ink);margin:2px 0 5px}
.card.machine .k{color:var(--ink)}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--dim);margin-top:9px}
.mrow select{background:#0b111f;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 7px;font:500 12.5px var(--disp);max-width:180px}
.rambar{height:8px;border:1px solid var(--line-bright);border-radius:5px;margin:13px 0 9px;overflow:hidden;background:rgba(255,255,255,.03)}
.rambar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1d7f96,var(--cyan));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.rambar.full i{background:linear-gradient(90deg,#96691d,var(--amber))}

/* ---------- Small screens: library becomes a top strip, panel a drawer ---------- */
@media(max-width:900px){
  .app-title{font-size:14px;letter-spacing:2px}
  .app-actions{gap:6px}
  .fs-hint{font-size:9.5px;letter-spacing:1px}
  .workbench{flex-direction:column}
  .library{width:100%;flex:none;display:flex;flex-wrap:nowrap;gap:7px;align-items:center;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    border-right:none;border-bottom:1px solid var(--line);padding:9px 10px}
  .library::-webkit-scrollbar{display:none}
  .lib-group{margin:0 2px 0 6px;flex:none;align-self:center}
  .lib-item{margin-bottom:0;padding:8px 10px;flex:none;touch-action:pan-x}
  .lib-note{display:none}
  .canvasbox{flex:1}
  .linestat{bottom:64px}
  .side{position:fixed;top:0;right:0;bottom:0;width:min(330px,88vw);z-index:50;transform:translateX(105%);
    transition:transform .3s ease;box-shadow:-18px 0 44px rgba(0,0,0,.55)}
  .side.open{transform:none}
}


/* ---------- Collapsible panes ---------- */
.library{transition:margin-left .3s ease,opacity .3s ease}
.workbench.lib-closed .library{margin-left:-200px;opacity:0;pointer-events:none}
.side{transition:margin-right .3s ease,opacity .3s ease}
.workbench.side-closed .side{margin-right:-324px;opacity:0;pointer-events:none}
@media(max-width:900px){
  /* Portrait law (owner): the stations strip is ALWAYS present in
     portrait, never hidden — collapsing is a wide-board affordance,
     so the collapsed state is ignored here and the edge tabs (which
     exist to collapse) are not offered. Rotate back to landscape and
     the collapsed state is still exactly as it was left. */
  .workbench.lib-closed .library{display:flex;margin-left:0;opacity:1;pointer-events:auto}
  /* Same law for the panel: in portrait it is a drawer worked by the
     hamburger, so a collapsed state carried over from landscape must
     not apply — it pushed the drawer off-screen and invisible. */
  .workbench.side-closed .side{margin-right:0;opacity:1;pointer-events:auto}
  .pane-tab{display:none}
}

/* ---------- Pane edge tabs (the pulsing "click me" toggles) ---------- */
.pane-tab{position:absolute;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:7px;
  background:rgba(14,22,38,.95);border:1px solid var(--line-bright);color:var(--dim);cursor:pointer;
  padding:15px 8px;font:600 10px var(--disp);letter-spacing:2px;
  animation:tabpulse 2.4s ease-out infinite}
.pane-tab .pt-label{writing-mode:vertical-rl}
.pane-tab .pt-chev{font-size:11px;color:var(--cyan);transition:transform .3s}
.pane-tab.left{left:200px;border-left:none;border-radius:0 11px 11px 0;transition:left .3s ease}
.pane-tab.right{right:324px;border-right:none;border-radius:11px 0 0 11px;transition:right .3s ease}
.workbench.lib-closed .pane-tab.left{left:0}
.workbench.lib-closed .pane-tab.left .pt-chev{transform:scaleX(-1)}
.workbench.side-closed .pane-tab.right{right:0}
.workbench.side-closed .pane-tab.right .pt-chev{transform:scaleX(-1)}
.pane-tab.seen{animation:none}
.pane-tab:hover{color:var(--ink)}
@keyframes tabpulse{
  0%{box-shadow:0 0 0 0 rgba(62,230,255,.45)}
  70%{box-shadow:0 0 0 17px rgba(62,230,255,0)}
  100%{box-shadow:0 0 0 0 rgba(62,230,255,0)}
}
@media(max-width:900px){.pane-tab{display:none}}

/* ---------- Zoom controls ---------- */
.zoomctl{position:absolute;right:14px;bottom:14px;z-index:35;display:flex;gap:6px}
.zoomctl button{background:rgba(10,16,28,.94);border:1px solid var(--line-bright);color:var(--dim);
  min-width:40px;height:38px;padding:0 10px;border-radius:9px;font:600 14px var(--mono);cursor:pointer}
.zoomctl button:hover{color:var(--ink)}
#zoomPct{min-width:64px;font-size:12px}

@media (prefers-reduced-motion: reduce){
  .pane-tab{animation:none}
  #wireGroup path.flow{animation:none}
  .linestat.running .lsdot{animation:none}
}
.tbtn.run{color:var(--green);border-color:#24503a}
.tbtn.run.on{color:#04140a;background:var(--green);border-color:var(--green);font-weight:700}
.canvasbox{position:relative}
.linestat{position:fixed;left:214px;bottom:12px;z-index:30;display:flex;align-items:center;gap:9px;
  background:rgba(6,10,18,.92);border:1px solid var(--line-bright);border-radius:9px;padding:8px 13px;
  font-size:10.5px;letter-spacing:1.6px;color:var(--dim);pointer-events:none}
.workbench.lib-closed .linestat{left:12px}
@media(max-width:900px){.linestat{left:10px;right:10px;bottom:66px}}
.lsdot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.linestat.running .lsdot{background:var(--green);box-shadow:0 0 10px rgba(95,214,138,.9);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
#wireGroup path.flow{stroke-dasharray:7 7;animation:march 1s linear infinite}
@keyframes march{to{stroke-dashoffset:-28}}
.node .led{position:absolute;top:12px;right:40px;width:8px;height:8px;border-radius:50%;background:#3a4a6b}
.node .led.work{background:var(--cyan);box-shadow:0 0 9px rgba(62,230,255,.95)}
.node .led.done{background:var(--green);box-shadow:0 0 9px rgba(95,214,138,.95)}
.node.working{box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 1px var(--line-bright),0 0 26px rgba(62,230,255,.28)}
.node.hasq .tagq{display:block}
.node .tagq{display:none}
.telelog{font-size:11px;line-height:1.75;color:var(--dim);min-height:96px;word-break:break-word}
.telelog b{color:var(--ink);font-weight:600}
.telelog .ok{color:var(--green)}
.telelog .warn{color:var(--amber)}

/* ---------- v9: drawer close + floating link chip ---------- */
.side-head{display:none}
#sideScrim{position:fixed;inset:0;background:rgba(2,6,14,.55);z-index:45;opacity:0;pointer-events:none;transition:opacity .3s ease}
#sideScrim.on{opacity:1;pointer-events:auto}
@media(max-width:900px){
  .side-head{display:flex;justify-content:space-between;align-items:center;margin:-2px 0 12px;
    font:600 11px var(--disp);letter-spacing:3px;color:var(--dim);text-transform:uppercase}
  #sideX{background:#0b111f;border:1px solid var(--line-bright);color:var(--ink);border-radius:9px;
    width:42px;height:42px;font-size:17px;cursor:pointer;line-height:1}
}
#linkChip{position:absolute;z-index:6;display:none;transform:translate(-50%,16px);pointer-events:auto;
  background:#0b111f;border:1px solid var(--cyan);color:var(--cyan);border-radius:50%;
  width:52px;height:52px;padding:0;font-size:21px;line-height:1;cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.55),0 0 14px rgba(62,230,255,.25)}
#linkChip.on{display:flex;align-items:center;justify-content:center;animation:chipPop .16s ease-out}
@keyframes chipPop{from{scale:.5}to{scale:1}}

/* ---------- v11: one-line icon toolbar ---------- */
.tbtn.icon{width:40px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none}
.tbtn.icon svg{width:20px;height:20px;display:block}
@media(max-width:640px){
  .run-long{display:none}
  .appbar{gap:8px;padding:7px 9px}
  .app-home{gap:7px}
  .app-home .glyph-mini{font-size:17px}
}

/* ---------- v16: the page itself never zooms ---------- */
/* The builder is an app shell: the BROWSER's page zoom (double-tap
   zoom, rotation font-boosting) must never fire — it magnifies the
   menu and stations along with everything else and sticks after a
   rotation. The board's own pinch zoom is pointer-driven and is
   unaffected. The viewport meta locks the scale; these rules cover
   the rest. */
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{touch-action:manipulation}

/* ---------- v20: STUDIO in the site's aqua ---------- */
.app-studio{color:var(--cyan)}

/* ---------- v21: forgiving ports — invisible halo enlarges every dot's
   touch area; a magnetized target dot swells so the join is visible ---------- */
.port::after{content:'';position:absolute;inset:-14px;border-radius:50%}
.port.hot{transform:scale(1.3)}

/* ---------- v23: the Run/Stop toggle can never resize the app bar —
   both labels live in one grid stack and the (always longer) Stop
   label sits hidden inside it reserving the width; the logo lockup
   is nowrap and unshrinkable, so nothing can knock it to two lines. - */
.app-home{flex:none}
.app-title{white-space:nowrap}
.run-stack{display:inline-grid;vertical-align:top}
.run-stack>*{grid-area:1/1;white-space:nowrap}
.run-ghost{visibility:hidden}