/* YBN Studio. Colours: tokens only (css/tokens.css is synced from /site). */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
body{font-family:var(--font-body);font-size:1rem;line-height:1.5;background:var(--bg);color:var(--text);min-height:100vh}
svg{display:block}
.icon{width:1.4em;height:1.4em;flex:none}
.display{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1}
:focus-visible{outline:3px solid var(--text);outline-offset:2px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--secondary);color:var(--on-secondary);padding:.75rem 1rem;z-index:100}
.skip:focus{top:1rem}
kbd{font-family:inherit;font-weight:700;font-size:.85em;border:2px solid currentColor;border-bottom-width:4px;border-radius:.4rem;padding:.05rem .45rem;display:inline-block;min-width:1.8rem;text-align:center}
.hint{color:var(--text-muted);font-size:.9rem}
.hint--wide{flex-basis:100%}
.pill{display:inline-flex;align-items:center;min-height:2rem;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:0 .8rem;border-radius:3rem}

/* buttons: 44px minimum */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;min-width:2.75rem;padding:.4rem 1.1rem;border:0;border-radius:3rem;font:inherit;font-weight:700;cursor:pointer;background:var(--secondary);color:var(--on-secondary);text-decoration:none}
.btn:hover:not(:disabled){transform:translate(-1px,-1px)}
.btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--text)}
.btn--accent{background:var(--accent);color:var(--on-accent)}
.btn--icon{padding:0;font-size:1.3rem}
.btn--play{background:var(--accent);color:var(--on-accent);min-width:7rem}
.btn--rec[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.btn--toggle[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn--ghost:disabled{box-shadow:inset 0 0 0 2px var(--line)}

/* header */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.5rem 1rem;border-bottom:2px solid var(--text)}
.brand{display:flex;align-items:center;gap:.6rem;color:inherit;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;min-height:2.75rem}
.brand svg{width:2.3rem;height:2.3rem}.brand .bub{color:var(--accent)}.brand .mic{color:var(--on-accent)}
.brand b{background:var(--accent);color:var(--on-accent);padding:0 .45rem;border-radius:.4rem;margin-left:.15rem}
.bar__right{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}
.lang-toggle{letter-spacing:.06em}
.onair{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.8rem;letter-spacing:.14em;padding:.4rem .9rem;border-radius:3rem}
.onair[hidden]{display:none}
.onair i{width:.7rem;height:.7rem;border-radius:50%;background:var(--on-accent);animation:blink 1s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.2}}
.phone-note{display:none;background:var(--accent);color:var(--on-accent);font-weight:600;padding:.75rem 1rem}
@media (max-width:760px){.phone-note{display:block}}

.studio{max-width:90rem;margin:0 auto;padding:1rem;display:grid;gap:1rem}

/* transport */
.transport>*{min-width:0;max-width:100%}
.transport{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;background:var(--surface);padding:1rem;border-radius:.5rem}
.transport__btns{display:flex;gap:.5rem;flex-wrap:wrap}
.lcd{display:flex;flex-wrap:wrap;max-width:100%;gap:.6rem 1.5rem;align-items:flex-end;background:var(--secondary);color:var(--on-secondary);padding:.6rem 1.1rem;border-radius:.5rem}
.lcd small{display:block;font-size:.7rem;letter-spacing:.12em;opacity:.9}
.lcd output{font-family:var(--font-display);font-weight:800;font-size:1.8rem;line-height:1;font-variant-numeric:tabular-nums}
.bpm input{display:block;width:5.5rem;min-height:2.75rem;font-family:var(--font-display);font-weight:800;font-size:1.6rem;text-align:center;border:3px solid var(--on-secondary);border-radius:.5rem;background:var(--bg);color:var(--text)}
.bpm input:disabled{opacity:.6}
.bpm input:focus-visible{outline-color:var(--on-secondary)}
.transport__opts{display:flex;gap:1rem;align-items:center;margin-left:auto}
.transport__opts label{display:flex;gap:.5rem;align-items:center;font-weight:700}
select{min-height:2.75rem;padding:0 .8rem;border:2px solid var(--text);border-radius:.5rem;background:var(--bg);color:var(--text);font:inherit}
.zoom{display:flex;gap:.25rem}
.transport .hint{flex-basis:100%;min-height:1.3em}

/* layout */
.layout{display:grid;grid-template-columns:15rem minmax(0,1fr) 16.5rem;gap:1rem;align-items:start}
@media (max-width:1100px){.layout{grid-template-columns:13rem minmax(0,1fr)}.mixer{grid-column:1/-1}}
@media (max-width:760px){.layout{grid-template-columns:1fr}}
.library,.mixer{background:var(--surface);border-radius:.5rem;padding:1rem}
.library h2,.mixer h2{font-size:1.6rem;margin-bottom:.75rem}
.group h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:.9rem 0 .4rem}
.beat{display:grid;grid-template-columns:1fr auto;gap:.25rem .5rem;align-items:center;padding:.6rem;border-radius:.5rem;border:2px solid var(--line);margin-bottom:.5rem}
.beat b{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.beat small{grid-column:1;color:var(--text-muted)}
.beat .btn{grid-row:1/3;grid-column:2;padding:.3rem .9rem}
.upload{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1.25rem;padding-top:1rem;border-top:2px solid var(--line)}

/* timeline */
.timeline{position:relative;background:var(--surface);border-radius:.5rem;min-height:18rem;overflow:hidden;outline:none}
.scroller{overflow-x:auto;overflow-y:hidden}
.tl{position:relative;--ppb:24px;--label:0px}
.ruler{position:relative;height:2.75rem;border-bottom:2px solid var(--text);cursor:pointer;touch-action:none;background:var(--bg)}
.ruler .tick{position:absolute;top:0;bottom:0;border-left:1px solid var(--line)}
.ruler .tick--bar{border-left:2px solid var(--text)}
.ruler .tick span{position:absolute;left:.3rem;top:.2rem;font-size:.72rem;font-weight:700;color:var(--text-muted)}
.lane{position:relative;height:6.5rem;border-bottom:2px solid var(--line);background:
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(var(--ppb)*4))}
.lane__label{position:sticky;left:.5rem;z-index:3;display:inline-flex;gap:.4rem;align-items:center;margin:.4rem 0 0 .5rem;background:var(--bg);color:var(--text);font-size:.8rem;font-weight:700;padding:.15rem .6rem;border-radius:3rem}
.lane__label .icon{width:1rem;height:1rem}
.lane__body{position:absolute;inset:0}
.clip{position:absolute;top:1.9rem;bottom:.5rem;border-radius:.4rem;overflow:hidden;cursor:grab;touch-action:none;display:flex;align-items:flex-start;border:3px solid transparent}
.clip[data-kind="beat"]{background:var(--secondary);color:var(--on-secondary)}
.clip[data-kind="mic"]{background:var(--accent);color:var(--on-accent)}
.clip[aria-selected="true"]{border-color:var(--text);box-shadow:0 0 0 3px var(--bg)}
.clip canvas{position:absolute;inset:0;width:100%;height:100%}
.clip span{position:relative;z-index:1;font-size:.75rem;font-weight:700;padding:.15rem .5rem;pointer-events:none}
.clip:active{cursor:grabbing}
.playhead{position:absolute;top:0;bottom:0;left:0;width:0;z-index:5;pointer-events:none;border-left:3px solid var(--accent)}
.playhead::before{content:"";position:absolute;top:0;left:-9px;border:8px solid transparent;border-top:12px solid var(--accent)}
.empty{position:absolute;left:0;right:0;top:55%;text-align:center;color:var(--text-muted);font-weight:600;pointer-events:none}
.empty[hidden]{display:none}
.rec-msg{padding:.75rem 1rem;font-weight:600;min-height:1rem}
.rec-msg.is-error{background:var(--accent);color:var(--on-accent)}

/* mixer */
.ch{margin-bottom:1rem}
.ch label{display:flex;justify-content:space-between;font-weight:700;margin-bottom:.15rem}
.fader{display:flex;gap:.6rem;align-items:center}
.fader input[type=range]{flex:1;min-height:2.75rem;accent-color:var(--accent);background:transparent}
.fader input[type=range]::-webkit-slider-runnable-track{height:.7rem;background:var(--line);border-radius:1rem}
.fader input[type=range]::-moz-range-track{height:.7rem;background:var(--line);border-radius:1rem}
.fader input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.9rem;height:1.9rem;margin-top:-.6rem;border-radius:50%;background:var(--accent);border:3px solid var(--text)}
.fader input[type=range]::-moz-range-thumb{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--accent);border:3px solid var(--text)}
.meter{width:.6rem;height:2.4rem;flex:none;border-radius:.2rem;background:var(--bg)}
.meter--wide{width:100%;height:.7rem;display:block}
.ch--fx{border-top:2px solid var(--line);padding-top:.8rem}
.fx-note{font-size:.85rem;color:var(--text-muted)}
.lab{font-weight:700;display:block;margin-bottom:.3rem}

/* actions */
.actions{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;background:var(--surface);padding:1rem;border-radius:.5rem}
.spacer{flex:1}

/* help dialog */
dialog{margin:auto;border:3px solid var(--text);border-radius:.8rem;background:var(--bg);color:var(--text);padding:1.5rem;max-width:30rem;width:calc(100% - 2rem);box-shadow:.6rem .6rem 0 var(--accent)}
dialog::backdrop{background:color-mix(in srgb,var(--bg) 70%,transparent)}
dialog h2{font-size:2rem;margin-bottom:1rem}
dl{display:grid;gap:.5rem;margin-bottom:1rem}
dl>div{display:grid;grid-template-columns:7rem 1fr;gap:.5rem;align-items:center}
dd small{color:var(--text-muted)}


@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}