/* ============================================================================
   studio-skin.css · Split-Dose Records Studio — shared premium glass skin
   Linked AFTER each surface's own <style> so its premium tokens + glass win.
   One home for: obsidian palette, aurora, frosted panels, custom controls,
   cursor-follow specular (paired with studio-skin.js), and the responsive base.
   ========================================================================== */

:root{
  --bg:#0A0710; --bg2:#0E0A18;
  --card:rgba(255,255,255,.05); --card2:rgba(255,255,255,.028); --panel:#140F22;
  --line:rgba(214,196,255,.15); --line2:rgba(214,196,255,.075);
  --text:#F6F1FB; --ink:#F6F1FB; --dim:#B6A9D0; --muted:#9A8EAF;
  --accent:#FF2E88; --accent-2:#5B21B6; --cyan:#0E7490; --gold:#F5B301;
  --accent-dim:rgba(255,46,136,.17);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --disp:'Montserrat','Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --glass:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 46%,rgba(0,0,0,.10));
  --glass-sh:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.28),0 16px 44px rgba(0,0,0,.42);
  --r:14px;
}
html{overflow-x:hidden}
body{background:var(--bg, #0A0710)!important;color:var(--text, #F6F1FB);-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw}

/* operator preference: no I-beam anywhere except real text inputs (arrow default, pointer on clickables) */
*{cursor:default}
a,button,select,summary,label[for],[role=button],[onclick],[data-magnet]{cursor:pointer}
input:not([type=button]):not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]),
textarea,[contenteditable=""],[contenteditable="true"]{cursor:text}
:disabled,button:disabled,a[aria-disabled="true"]{cursor:default}

/* aurora glow + fine grain, fixed behind everything (no HTML needed) */
body::before{content:'';position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42vw 42vw at 10% 4%,rgba(255,46,136,.13),transparent 60%),
    radial-gradient(48vw 48vw at 94% 8%,rgba(124,58,237,.12),transparent 62%),
    radial-gradient(40vw 40vw at 74% 98%,rgba(8,145,178,.055),transparent 64%);
  filter:blur(46px);animation:sk-aurora 34s ease-in-out infinite alternate}
@keyframes sk-aurora{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){ body::before{animation:none} }

/* frosted glass on the common panel classes across all studio surfaces */
.card,.stat,.pill,.note,.win,.res,.tpl,.sec,.field,.mini,.status,.bar,.warn,.loading,
.glass,.panel,.box{
  background:var(--glass)!important;
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid var(--line, rgba(214,196,255,.15))!important;border-radius:var(--r, 14px);box-shadow:var(--glass-sh)}

/* form controls — custom, on-brand, never native-default */
input,select,textarea,button{font-family:var(--sans)}
input[type=text],input[type=search],input[type=number],textarea,select{
  background:var(--glass);border:1px solid var(--line, rgba(214,196,255,.15));color:var(--text, #F6F1FB);border-radius:10px;
  padding:14px 13px;outline:none;box-shadow:var(--glass-sh)}
input::placeholder,textarea::placeholder{color:var(--muted, #7C6E9A)}
input:focus,select:focus,textarea:focus{border-color:var(--accent, #FF2E88);box-shadow:var(--glass-sh),0 0 0 3px rgba(255,46,136,.18)}
select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B6A9D0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),var(--glass);
  background-repeat:no-repeat,repeat;background-position:right 13px center,0 0}
select option{background:var(--panel, #140F22);color:var(--text, #F6F1FB)}

/* primary buttons / pills read as glowing glass */
button.pri,.btn-pri,button.prim,.pri{text-shadow:0 1px 2px rgba(0,0,0,0.5);background:linear-gradient(160deg,var(--accent, #FF2E88),var(--accent-2, #A855F7))!important;
  border:none!important;color:#fff!important;box-shadow:0 0 22px rgba(255,46,136,.3)!important;
  border-radius:10px;font-weight:600;cursor:pointer;transition:transform .18s,box-shadow .25s}
button.pri:hover,.pri:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(255,46,136,.42)!important}

/* custom scrollbar */
*{scrollbar-width:thin;scrollbar-color:rgba(255,46,136,.35) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent, #FF2E88),var(--accent-2, #A855F7));border:3px solid var(--bg, #0A0710);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--accent-2, #A855F7),var(--accent, #FF2E88))}

/* cursor-follow specular sheen on cards/tiles (studio-skin.js feeds --mx/--my/--lit) */
.card,.stat,.tpl,.win,.res{position:relative;isolation:isolate}
.card::after,.stat::after,.tpl::after,.win::after,.res::after{content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:2;background:radial-gradient(220px 220px at var(--mx,50%) var(--my,-20%),rgba(230,220,255,.16),transparent 60%);
  opacity:var(--lit,0);transition:opacity .35s;mix-blend-mode:screen}

/* display headings + gradient wordmark accent */
h1{font-family:var(--disp);font-weight:800;letter-spacing:-.02em}
.mag,.accent-text{background:linear-gradient(100deg,var(--accent, #FF2E88),var(--accent-2, #7C3AED) 55%,var(--cyan, #0891B2) 90%,var(--accent, #FF2E88));
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:sk-wm 11s ease-in-out infinite}
@keyframes sk-wm{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.mag,.accent-text{animation:none}}

/* on-brand accent links */
a{color:var(--accent, #FF2E88)}
a:hover{color:var(--accent-2, #7C3AED)}

/* numerics: tabular + tight */
.num,.stat .n,.val{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* crafted entrance for top-of-page chrome (fires once; content re-renders don't re-trigger) */
@keyframes sk-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
header,.wrap>h1,.topbar,.bar{animation:sk-rise .5s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){header,.wrap>h1,.topbar,.bar{animation:none}}

/* ============================================================================
   RESPONSIVE BASE — every surface adapts across phone / tablet / desktop.
   Surfaces keep their own layout; this guarantees no overflow + fluid chrome.
   ========================================================================== */
img,canvas,svg,video{max-width:100%;height:auto}
*{min-width:0}                                   /* let flex/grid children shrink, never overflow */

@media (max-width:900px){
  .grid,.g3,.g2,.row2{grid-template-columns:1fr!important;display:grid!important;gap:14px}
  .wrap{padding-left:16px!important;padding-right:16px!important}
}
@media (max-width:640px){
  h1{font-size:clamp(22px,7vw,30px)!important}
  body{font-size:14px}
  .card,.win,.note,.res,.tpl,.sec{padding:14px!important}
  /* comfortable tap targets on touch */
  button,select,.pill,.tab,input[type=submit]{min-height:44px}
  /* horizontal control rows scroll instead of overflowing */
  .controls,.toolbar,.tabs,.filters{flex-wrap:wrap}
}
/* honor notch/home-bar safe areas where a surface pins to the edges */
@supports (padding:max(0px)){
  body{padding-bottom:max(0px,env(safe-area-inset-bottom))}
}

/* ============================================================================
   SHARED STUDIO NAV — every surface can always get home + switch tools.
   ========================================================================== */
.studio-nav{display:flex;gap:3px;align-items:center;flex-wrap:wrap;
  min-height:48px;height:auto;box-sizing:border-box;padding:4px clamp(14px,3vw,26px);background:rgba(10,7,16,.72);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line, rgba(214,196,255,.15));font-family:var(--mono);font-size:12px;
  position:relative;z-index:60}
.studio-nav a{color:var(--dim, #B6A9D0);text-decoration:none;padding:13px 12px;border-radius:8px;transition:color .2s,background .2s;white-space:nowrap}
.studio-nav a:hover{color:var(--text, #F6F1FB);background:rgba(255,255,255,.05)}
.studio-nav .sn-home{font-family:var(--disp);color:rgba(255,255,255,0.75);margin-right:8px;transition:color .25s}
.studio-nav .sn-home:hover{color:#fff;background:none!important}
.studio-nav a[aria-current="page"]{color:#fff;background:linear-gradient(160deg,rgba(255,46,136,.30),rgba(168,85,247,.18))}
@media(max-width:640px){ .studio-nav{gap:1px;font-size:11px} .studio-nav a{padding:13px 9px} }

/* Handoff context when embedded inside an iframe (e.g. inside Workshop) */
html.in-iframe .studio-nav {
  display: none !important;
}
html.in-iframe body {
  background: transparent !important;
  height: 100vh !important;
  overflow: hidden !important;
}
html.in-iframe .wrap {
  height: 100vh !important;
  padding: 12px 16px !important;
  max-width: 100% !important;
  overflow-y: auto !important;
}

/* ─── THE SEAL ──────────────────────────────────────────────────────────────
   The label's mark. It is a RECORD — so it turns only when something is really
   happening (a track playing, a job running), never ambiently. Motion with no
   meaning is what actually distracts; motion that reports state doesn't.
   Stopping is handled in studio-skin.js (sealSpin) — it eases back to upright,
   because the seal has a canonical orientation (the score is vertical) and
   freezing at a random angle reads as broken rather than as a stopped record. */
.sd-seal{ display:block; user-select:none; -webkit-user-drag:none }
.sd-seal.spin{ animation:sd-spin 14s linear infinite }
@keyframes sd-spin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@media (prefers-reduced-motion:reduce){ .sd-seal.spin{ animation:none } }
/* page watermark: signs the workspace, never competes with content */
.sd-seal-wm{ position:fixed; right:-120px; bottom:-160px; width:min(680px,52vw); opacity:.03;
             pointer-events:none; z-index:0 }
@media (max-width:700px){ .sd-seal-wm{ width:min(420px,80vw); right:-80px; bottom:-100px } }