/* DAWJAY STUDIO — styles for the real studio (layered on daw.css tokens). 2026-11-06 */
.st-top { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; padding: 0 14px; background: var(--top); border-bottom: 1px solid var(--line); }
.st-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.st-brand .logo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, var(--vox), var(--keys)); font: 700 15px var(--display); color: #140a10; }
.st-brand .nm { font: 700 13px var(--display); letter-spacing: 0.04em; }
.st-brand .nm em { font: italic 400 12px var(--serif); color: var(--text-3); margin-left: 6px; }
.st-meta { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.st-chip { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); font: 11px var(--mono); color: var(--text-2); white-space: nowrap; }
.st-chip .l { color: var(--text-4); letter-spacing: 0.12em; font-size: 9px; }
.st-chip input { width: 46px; background: transparent; border: 0; color: var(--text); font: 12px var(--mono); outline: 0; text-align: right; }
.st-chip.name input { width: 150px; text-align: left; font-family: var(--display); font-weight: 600; }
.st-transport { display: flex; align-items: center; gap: 6px; }
.st-btn { height: 30px; min-width: 30px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: 11px var(--mono); letter-spacing: 0.06em; }
.st-btn:hover { background: var(--surface-3); color: var(--text); }
.st-btn.on { color: var(--text); border-color: var(--line-3); box-shadow: inset 0 0 0 1px var(--line-3); }
.st-btn.play { width: 40px; background: var(--text); color: #140a10; border-color: transparent; }
.st-btn.play.on { background: var(--ok); }
.st-btn.rec { width: 34px; } .st-btn.rec .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 0 rgba(255,58,68,0.4); }
.st-btn.rec.on .dot { animation: stRec 1s infinite; }
@keyframes stRec { 0%,100% { box-shadow: 0 0 0 0 rgba(255,58,68,0.5); } 50% { box-shadow: 0 0 0 7px rgba(255,58,68,0); } }
.st-btn.primary { background: var(--vox); color: #140a10; border-color: transparent; font-weight: 700; }
.st-btn.gold { background: var(--bass); color: #140a10; border-color: transparent; font-weight: 700; }
.st-btn.ghost { background: transparent; }
.st-btn:disabled { opacity: 0.45; cursor: default; }
.st-time { display: flex; flex-direction: column; align-items: flex-end; min-width: 108px; font: 700 15px var(--mono); color: var(--text); line-height: 1; }
.st-time .b { font: 10px var(--mono); color: var(--text-3); margin-top: 3px; letter-spacing: 0.08em; }
.st-actions { display: flex; align-items: center; gap: 8px; }
.st-lic { font: 9px var(--mono); letter-spacing: 0.14em; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-3); color: var(--text-3); text-decoration: none; }
.st-lic.pro { color: var(--bass); border-color: rgba(240,200,120,0.5); }

/* left rail */
.st-rail { display: flex; flex-direction: column; min-height: 0; background: var(--rail); border-right: 1px solid var(--line); }
.st-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.st-tabs button { height: 44px; background: transparent; border: 0; color: var(--text-3); font: 10px var(--mono); letter-spacing: 0.14em; cursor: pointer; border-bottom: 2px solid transparent; }
.st-tabs button.active { color: var(--text); border-bottom-color: var(--vox); }
.st-rail-body { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.st-drop { border: 1px dashed var(--line-3); border-radius: 12px; padding: 18px 12px; text-align: center; color: var(--text-3); font: 12px var(--sans); cursor: pointer; transition: all 0.15s var(--ease); }
.st-drop.over, .st-drop:hover { border-color: var(--vox); color: var(--text); background: rgba(255,92,176,0.06); }
.st-drop b { display: block; font: 600 13px var(--display); color: var(--text); margin-bottom: 4px; }
.st-h { font: 10px var(--mono); letter-spacing: 0.16em; color: var(--text-4); text-transform: uppercase; display: flex; justify-content: space-between; margin-top: 6px; }
.st-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; background: var(--surface-1); border: 1px solid var(--line); cursor: pointer; }
.st-row:hover { background: var(--surface-2); }
.st-row .t { font: 600 12px var(--display); color: var(--text); } .st-row .s { font: 10px var(--mono); color: var(--text-3); margin-top: 2px; }
.st-row .x { color: var(--text-4); font-size: 14px; padding: 2px 6px; } .st-row .x:hover { color: var(--rec); }
.st-card { padding: 12px; border-radius: 12px; background: var(--surface-1); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.st-card .t { font: 600 13px var(--display); color: var(--text); } .st-card .s { font: 12px var(--sans); color: var(--text-3); line-height: 1.45; }
.st-card .s b { color: var(--text-2); font-weight: 600; }
.st-fx-row { display: grid; grid-template-columns: 90px 1fr 46px; align-items: center; gap: 8px; font: 10px var(--mono); color: var(--text-3); }
.st-fx-row input[type=range] { width: 100%; accent-color: var(--vox); }
.st-fx-row .v { text-align: right; color: var(--text-2); }
.st-select { height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 11px var(--mono); padding: 0 8px; }
.st-input { height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 12px var(--mono); padding: 0 10px; outline: 0; }

/* timeline */
.st-tl { display: grid; grid-template-rows: 28px 1fr; min-height: 0; background: var(--bg); position: relative; }
.st-ruler { display: grid; grid-template-columns: var(--header-w) 1fr; border-bottom: 1px solid var(--line); background: var(--surface-1); }
.st-ruler .corner { display: flex; align-items: center; gap: 8px; padding: 0 10px; font: 9px var(--mono); letter-spacing: 0.14em; color: var(--text-4); border-right: 1px solid var(--line); }
.st-ruler .corner button { height: 20px; padding: 0 6px; font-size: 9px; }
.st-ruler .bars { position: relative; overflow: hidden; cursor: pointer; }
.st-ruler .bar-label { position: absolute; top: 7px; font: 9px var(--mono); color: var(--text-3); pointer-events: none; }
.st-ruler .loop { position: absolute; top: 0; bottom: 0; background: rgba(139,255,154,0.12); border-left: 1px solid var(--ok); border-right: 1px solid var(--ok); pointer-events: none; }
.st-ruler .loop.off { opacity: 0.35; }
.st-lanes { position: relative; overflow: auto; }
.st-lanes-inner { position: relative; min-width: 100%; }
.st-track { display: grid; grid-template-columns: var(--header-w) 1fr; height: var(--row-h); border-bottom: 1px solid var(--line-2); position: relative; }
.st-track.sel .st-th { background: var(--surface-2); }
.st-track.drums { height: calc(var(--row-h) * 2.1); }
.st-th { position: sticky; left: 0; z-index: 3; background: var(--surface-1); border-right: 1px solid var(--line); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; border-left: 3px solid var(--c); }
.st-th .r1 { display: flex; align-items: center; gap: 6px; }
.st-th .nm { flex: 1; font: 600 12px var(--display); color: var(--text); background: transparent; border: 0; outline: 0; min-width: 0; }
.st-th .kind { font: 9px var(--mono); color: var(--text-4); letter-spacing: 0.1em; }
.st-th .ctl { display: flex; gap: 4px; }
.st-tb { height: 20px; min-width: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-3); font: 9px var(--mono); cursor: pointer; }
.st-tb.on.m { background: #5b1f1f; color: #ffb4b4; border-color: #7a2a2a; }
.st-tb.on.s { background: #5b4a12; color: #ffe39a; border-color: #7a6418; }
.st-tb.on.r { background: #6b1420; color: #ffb4b4; border-color: var(--rec); }
.st-tb.on.a { color: var(--text); border-color: var(--line-3); }
.st-th .vol { display: grid; grid-template-columns: 1fr 42px; align-items: center; gap: 6px; }
.st-th .vol input { width: 100%; accent-color: var(--c); height: 14px; }
.st-th .vol span { font: 9px var(--mono); color: var(--text-3); text-align: right; }
.st-lane { position: relative; overflow: hidden; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px var(--tl-px-per-bar)); cursor: crosshair; }
.st-clip { position: absolute; top: 6px; bottom: 6px; border-radius: 7px; background: color-mix(in oklch, var(--c) 28%, var(--surface-2)); border: 1px solid color-mix(in oklch, var(--c) 60%, transparent); overflow: hidden; cursor: grab; user-select: none; }
.st-clip.sel { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.st-clip canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-clip .lbl { position: absolute; left: 6px; top: 4px; font: 9px var(--mono); letter-spacing: 0.08em; color: var(--text); text-shadow: 0 1px 2px #000; pointer-events: none; }
.st-clip .trim { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; } .st-clip .trim.l { left: 0; } .st-clip .trim.r { right: 0; }
.st-steps { position: absolute; inset: 4px 0; display: grid; grid-template-rows: repeat(7, 1fr); gap: 2px; padding: 0 2px; }
.st-steplane { display: grid; grid-auto-flow: column; gap: 2px; }
.st-step { border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line-2); cursor: pointer; }
.st-step.q { background: var(--surface-3); }
.st-step.v1 { background: color-mix(in oklch, var(--lc) 55%, #222); border-color: var(--lc); }
.st-step.v2 { background: var(--lc); border-color: var(--lc); box-shadow: 0 0 8px color-mix(in oklch, var(--lc) 60%, transparent); }
.st-step.cur { outline: 1px solid var(--text); }
.st-steplabel { position: absolute; left: 4px; font: 8px var(--mono); color: var(--text-4); letter-spacing: 0.08em; pointer-events: none; }
.st-playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text); box-shadow: 0 0 8px var(--text); pointer-events: none; z-index: 4; }
.st-playhead::before { content: ''; position: absolute; top: 0; left: -5px; border: 5px solid transparent; border-top: 7px solid var(--text); }
.st-add { display: flex; gap: 8px; padding: 10px; position: sticky; left: 0; }
.st-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--text-3); font: 13px var(--sans); pointer-events: none; }
.st-empty b { display: block; font: 600 20px var(--display); color: var(--text); margin-bottom: 6px; }

/* inspector */
.st-insp { display: flex; flex-direction: column; min-height: 0; background: var(--rail); border-left: 1px solid var(--line); }
.st-insp-hd { height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--line); font: 10px var(--mono); letter-spacing: 0.14em; color: var(--text-3); }
.st-insp-hd .pill { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-3); font-size: 9px; color: var(--text-2); }
.st-insp-body { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.st-sec { display: flex; flex-direction: column; gap: 8px; }
.st-sec .hd { font: 10px var(--mono); letter-spacing: 0.14em; color: var(--text-4); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.st-big { font: 600 17px var(--display); color: var(--text); } .st-sub { font: 10px var(--mono); color: var(--text-3); }
.st-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.st-stat { padding: 8px 10px; border-radius: 9px; background: var(--surface-1); border: 1px solid var(--line); }
.st-stat .l { font: 9px var(--mono); letter-spacing: 0.12em; color: var(--text-4); } .st-stat .v { font: 600 14px var(--mono); color: var(--text); margin-top: 2px; }
.st-stat .v.ok { color: var(--ok); } .st-stat .v.warn { color: var(--bass); } .st-stat .v.bad { color: var(--rec); }
.st-toggle { display: flex; align-items: center; gap: 8px; font: 11px var(--mono); color: var(--text-2); cursor: pointer; }
.st-bands { width: 100%; height: 120px; border-radius: 9px; background: var(--surface-1); border: 1px solid var(--line); }
.st-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .st-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--vox), var(--keys)); transition: width 0.3s; }
.st-grade { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--line-3); background: var(--surface-1); }
.st-grade .g { font: 800 26px var(--display); } .st-grade .g.PLATINUM { color: #dfe8ff; } .st-grade .g.GOLD { color: var(--bass); } .st-grade .g.SILVER { color: #c9c9c9; } .st-grade .g.NEEDS { color: var(--rec); }
.st-grade .d { font: 11px var(--mono); color: var(--text-3); line-height: 1.5; }
.st-log { font: 10px var(--mono); color: var(--text-3); max-height: 120px; overflow: auto; background: var(--surface-1); border-radius: 8px; padding: 8px; border: 1px solid var(--line); white-space: pre-wrap; }

/* mixer */
.st-mix { display: flex; flex-direction: column; min-height: 0; background: var(--surface-1); border-top: 1px solid var(--line); }
.st-mix-hd { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font: 10px var(--mono); letter-spacing: 0.14em; color: var(--text-3); border-bottom: 1px solid var(--line); }
.st-mix-body { flex: 1; display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; min-height: 0; }
.st-strip { width: 78px; flex: 0 0 78px; display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 6px; padding: 8px 6px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); border-top: 2px solid var(--c); cursor: pointer; min-height: 0; }
.st-strip.sel { border-color: var(--line-3); background: var(--surface-3); }
.st-strip.master { width: 110px; flex-basis: 110px; border-top-color: var(--ok); margin-left: auto; }
.st-strip .nm { font: 600 10px var(--display); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.st-strip .pan { width: 100%; accent-color: var(--c); height: 10px; }
.st-strip .meterrow { display: grid; grid-template-columns: 1fr 10px 10px; gap: 3px; min-height: 0; align-items: stretch; }
.st-strip .fader { writing-mode: vertical-lr; direction: rtl; width: 100%; accent-color: var(--c); min-height: 0; }
.st-vu { position: relative; background: #0a0806; border-radius: 3px; overflow: hidden; border: 1px solid var(--line-2); }
.st-vu i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, var(--ok) 0 62%, var(--bass) 62% 86%, var(--rec) 86%); transition: height 0.04s linear; }
.st-strip .db { font: 9px var(--mono); color: var(--text-3); text-align: center; }
.st-strip .lufs { font: 700 12px var(--mono); color: var(--text); text-align: center; } .st-strip .lufs small { display: block; font: 8px var(--mono); color: var(--text-4); letter-spacing: 0.12em; }

/* bottom bar */
.st-bottom { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 0 14px; background: var(--top); border-top: 1px solid var(--line); }
.st-status { display: flex; align-items: center; gap: 8px; font: 10px var(--mono); color: var(--text-3); letter-spacing: 0.06em; white-space: nowrap; }
.st-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); } .st-status .dot.pending { background: var(--bass); } .st-status .dot.error { background: var(--rec); }
.st-cmd { display: flex; align-items: center; gap: 8px; height: 34px; border-radius: 10px; background: var(--surface-1); border: 1px solid var(--line); padding: 0 10px; }
.st-cmd input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font: 12px var(--mono); }
.st-cmd .kbd { font: 9px var(--mono); color: var(--text-4); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; }
.st-cmd .reply { font: 10px var(--mono); color: var(--ok); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* modal */
.st-veil { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 50; }
.st-modal { width: min(560px, 94vw); max-height: 88vh; overflow: auto; background: var(--surface-1); border: 1px solid var(--line-3); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.st-modal h2 { font: 600 20px var(--display); color: var(--text); margin: 0; } .st-modal p { font: 13px var(--sans); color: var(--text-2); margin: 0; line-height: 1.5; }
.st-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.st-opt.on { border-color: var(--vox); } .st-opt .t { font: 600 12px var(--display); color: var(--text); } .st-opt .s { font: 10px var(--mono); color: var(--text-3); }

@media (max-width: 1500px) { .st-meta .st-chip:nth-child(4) { display: none; } .st-brand .nm em { display: none; } .st-chip.name input { width: 110px; } .st-top { gap: 10px; } }
@media (max-width: 1300px) { .st-meta .st-chip.key { display: none; } .st-btn.primary span, .st-btn.gold span { display: none; } }

/* mobile */
.st-mobtabs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: var(--top); }
.st-mobtabs button { height: 56px; background: transparent; border: 0; color: var(--text-3); font: 10px var(--mono); letter-spacing: 0.12em; }
.st-mobtabs button.active { color: var(--text); }
@media (max-width: 900px) {
  .daw.studio { grid-template-columns: 1fr; grid-template-rows: 56px 1fr 56px; grid-template-areas: "top" "timeline" "transport"; }
  .daw.studio .st-rail, .daw.studio .st-insp, .daw.studio .st-mix { grid-area: timeline; }
  .st-top { grid-template-columns: auto 1fr auto; } .st-meta .st-chip.name, .st-meta .st-chip.key, .st-actions .st-lic { display: none; }
  .st-time { min-width: 80px; font-size: 13px; }
}