/* Shared studio shell — one input, mode tabs, shared result, loop bar.
   Used by every consolidated studio page (originality has its own inline copy).
   Pairs with studio-kit.js and the standard module.css. */
/* macOS-style action DOCK — fixed vertical side, icons magnify & lift, no tabs */
.os-tabs{ position:fixed; left:20px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:.8rem .6rem; width:fit-content;
  background:color-mix(in srgb, var(--card,#fff) 82%, transparent);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--line); border-radius:24px;
  box-shadow:0 26px 60px -26px rgba(20,30,80,.5), inset 0 1px 0 rgba(255,255,255,.55); }
.os-tab{ display:flex; flex-direction:column; align-items:center; gap:.34rem;
  border:0; background:transparent; cursor:pointer; padding:.2rem .4rem;
  color:var(--ink-soft); font-family:var(--disp); font-weight:600; font-size:.68rem;
  transform-origin:left center; transition:transform .3s cubic-bezier(.34,1.5,.5,1), color .2s; }
.os-tab .ti{ display:grid; place-items:center; width:50px; height:50px; font-size:1.5rem;
  border-radius:15px; background:var(--line); color:var(--ink-soft);
  box-shadow:0 5px 12px -5px rgba(20,30,80,.32);
  transition:transform .3s cubic-bezier(.34,1.5,.5,1), box-shadow .3s, background .3s, color .3s; }
.os-tab:hover{ transform:translateX(10px) scale(1.08); color:var(--ink); z-index:2; }
.os-tab:hover .ti{ box-shadow:0 16px 34px -10px rgba(20,30,80,.5); }
.os-tab.on{ color:var(--ac); }
.os-tab.on .ti{ background:linear-gradient(150deg, var(--ac), color-mix(in srgb, var(--ac) 55%, #000));
  color:#fff; box-shadow:0 14px 28px -8px var(--ac); }
[data-theme="dark"] .os-tab .ti{ background:#1b1b23; }
@media(max-width:1180px){
  .os-tabs{ position:fixed; left:50%; top:auto; bottom:18px; transform:translateX(-50%);
    flex-direction:row; align-items:flex-end; }
  .os-tab:hover{ transform:translateY(-12px) scale(1.08); } }
.os-ctl{ animation:ossheet .38s cubic-bezier(.22,.9,.24,1); border:1px solid var(--line);
  border-radius:20px; background:var(--panel); padding:1.4rem clamp(1rem,2.5vw,1.6rem);
  box-shadow:0 24px 60px -30px rgba(20,30,80,.45); margin-top:.5rem; }
@keyframes ossheet{ from{opacity:0;transform:translateY(22px) scale(.985)} to{opacity:1;transform:none} }
.os-desc{ font-size:.82rem; color:var(--muted); margin:.1rem 0 .8rem; line-height:1.45; }
.os-mini{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; font-size:.75rem;
  color:var(--muted); margin-top:.6rem; }
.os-mini .k{ padding:.16rem .5rem; border:1px solid var(--line); border-radius:999px; }

/* loop banner — pipe a result back as input / cross to another mode */
.os-loop{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  background:var(--ac-soft); border:1px solid color-mix(in srgb,var(--ac) 34%,transparent);
  border-radius:14px; padding:.8rem 1rem; margin:.2rem 0 1rem; }
.os-loop .oll{ font-size:.86rem; color:var(--ink); font-weight:600; }
.os-loop .oll small{ display:block; font-weight:400; color:var(--ink-soft); font-size:.76rem; margin-top:.1rem; }
.os-loop .osp{ margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; }
.os-chip-btn{ border:1px solid var(--ac); background:transparent; color:var(--ac);
  font-family:var(--disp); font-weight:600; font-size:.8rem; padding:.45rem .85rem;
  border-radius:999px; cursor:pointer; transition:.18s ease; }
.os-chip-btn:hover{ background:var(--ac); color:#fff; }
.os-chip-btn.solid{ background:var(--ac); color:#fff; }
.os-chip-btn.solid:hover{ filter:brightness(1.08); }
.os-chip-btn:disabled{ opacity:.5; cursor:wait; }

/* result render bits reused across studios */
.heatmap{ line-height:2; }
.reasons{ list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.reasons li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--ink); }
.reasons li .rk{ flex:none; width:20px; height:20px; border-radius:6px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--good) 18%,transparent); color:var(--good); font-size:.7rem; }
.os-diff{ background:var(--bg,#fff); border:1px solid var(--line); border-radius:10px;
  padding:.9rem 1rem; line-height:1.8; white-space:pre-wrap; }
.os-add{ background:color-mix(in srgb,var(--good) 18%,transparent); color:var(--good); border-radius:3px; padding:0 .1em; }
.os-del{ background:color-mix(in srgb,var(--bad) 16%,transparent); color:var(--bad); border-radius:3px; padding:0 .1em; text-decoration:line-through; opacity:.85; }
.os-chg{ background:color-mix(in srgb,var(--navy,#5b5bf0) 16%,transparent); border-radius:3px; padding:0 .1em; }
.os-kv{ display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; font-size:.9rem; }
.os-kv .k{ color:var(--muted); }
.sbs{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.sbs .simple{ background:color-mix(in srgb,var(--good) 8%,transparent); border-radius:10px; padding:.7rem .85rem; }
.sbs-h{ font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; }