/* DanceGrove — Practice Studio. Colors/fonts from active skin --dg-* only. */

.pr-studio{margin:18px 0 60px}

/* tabs */
.pr-tabs{display:flex;gap:6px;border-bottom:1px solid var(--dg-line);margin-bottom:26px;flex-wrap:wrap}
.pr-tab{appearance:none;background:none;border:none;cursor:pointer;font:inherit;
  padding:12px 20px;font-size:15px;font-weight:600;color:var(--dg-ink-soft);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.2s;letter-spacing:.01em}
.pr-tab:hover{color:var(--dg-ink)}
.pr-tab.on{color:var(--dg-ink);border-bottom-color:var(--dg-clay)}
.pr-tab:focus-visible{outline:2px solid var(--dg-clay);outline-offset:3px;border-radius:6px}

.pr-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:24px;align-items:start}
.pr-stage{display:flex;flex-direction:column;gap:18px}

.pr-loadrow{display:flex;gap:10px}
.pr-loadrow .inp{flex:1}

/* media */
.pr-media-audio{width:100%;margin:4px 0;display:none}
.pr-videowrap{background:var(--dg-obsidian);border-radius:16px;overflow:hidden;
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--dg-line)}
.pr-media-video{width:100%;height:100%;object-fit:contain;background:#000;display:block}

/* transport */
.pr-transport{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pr-bigbtn{width:58px;height:58px;border-radius:50%;border:1.5px solid var(--dg-clay);
  background:var(--dg-clay);color:#fff;cursor:pointer;display:grid;place-items:center;
  flex:0 0 auto;transition:.25s;box-shadow:0 12px 24px -12px var(--dg-clay)}
.pr-bigbtn:hover:not(:disabled){background:var(--dg-clay-2);border-color:var(--dg-clay-2);transform:scale(1.04)}
.pr-bigbtn:disabled{opacity:.4;cursor:not-allowed}
.pr-bigbtn:focus-visible{outline:2px solid var(--dg-ink);outline-offset:3px}
.pr-ico-play{width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;margin-left:3px}
.pr-bigbtn.playing .pr-ico-play{width:14px;height:16px;border:none;margin:0;
  background:linear-gradient(to right,#fff 0 38%,transparent 38% 62%,#fff 62% 100%)}
.pr-time{font-family:var(--dg-font-display);font-size:18px;font-weight:380;font-variant-numeric:tabular-nums}
.pr-seek{flex:1 1 180px;min-width:140px;accent-color:var(--dg-clay);height:6px;cursor:pointer}

/* controls */
.pr-control{padding:16px 18px;border:1px solid var(--dg-line);border-radius:14px;background:var(--dg-linen)}
.pr-control .lbl{margin-bottom:10px}
.pr-control .lbl b{color:var(--dg-clay-2);font-weight:700}
.pr-range{width:100%;accent-color:var(--dg-clay);height:6px;cursor:pointer}
.pr-range:focus-visible{outline:2px solid var(--dg-clay);outline-offset:4px}

.pr-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--dg-ink-soft);
  margin-top:12px;cursor:pointer}
.pr-toggle input{accent-color:var(--dg-sage);width:16px;height:16px}

.pr-loop-row,.pr-metro-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pr-loop-row .pr-toggle{margin-top:0}
.pr-mini{display:inline-flex;flex-direction:column;gap:4px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dg-ink-soft)}
.pr-num{width:90px;padding:8px 10px}

/* notes */
.pr-note-add{display:flex;gap:10px;margin-bottom:12px}
.pr-note-add .inp{flex:1}
.pr-note-list{list-style:none;display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
.pr-note-list li{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border:1px solid var(--dg-line);border-radius:10px;background:var(--dg-paper);font-size:14px}
.pr-note-list .pr-note-t{font-family:var(--dg-font-display);font-weight:600;color:var(--dg-clay-2);
  cursor:pointer;flex:0 0 auto;font-variant-numeric:tabular-nums}
.pr-note-list .pr-note-t:hover{text-decoration:underline}
.pr-note-list .pr-note-x{margin-left:auto;border:none;background:none;cursor:pointer;
  color:var(--dg-ink-soft);font-size:18px;line-height:1;padding:0 4px}
.pr-note-list .pr-note-x:hover{color:var(--dg-clay)}

/* saved rail */
.pr-saved{position:sticky;top:96px}
.pr-saved-h{font-family:var(--dg-font-display);font-weight:440;font-size:22px;margin-bottom:14px}
.pr-saved-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:16px}
.pr-saved-list li{display:flex;align-items:center;gap:8px;padding:11px 13px;
  border:1px solid var(--dg-line);border-radius:12px;background:var(--dg-linen);transition:.2s}
.pr-saved-list li:hover{border-color:var(--dg-clay-soft)}
.pr-saved-list .pr-st-name{flex:1;font-weight:600;font-size:14px;cursor:pointer;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-saved-list .pr-st-name:hover{color:var(--dg-clay-2)}
.pr-saved-list .pr-st-tempo{font-size:12px;color:var(--dg-ink-soft);flex:0 0 auto}
.pr-saved-list .pr-st-x{border:none;background:none;cursor:pointer;color:var(--dg-ink-soft);font-size:18px;line-height:1;padding:0 4px}
.pr-saved-list .pr-st-x:hover{color:var(--dg-clay)}
.pr-saved-empty{font-size:13px;margin-top:14px}

.pr-signin-note{margin-top:22px;text-align:center;font-size:14px}
.pr-signin-note .brass-text{font-weight:700}

@media(max-width:920px){
  .pr-grid{grid-template-columns:1fr}
  .pr-saved{position:static}
}

/* Practice tools strip (hub nav) */
.pr-tools{margin:18px 0 6px}
.pr-tool-card{display:block;transition:border-color .15s ease, box-shadow .15s ease}
.pr-tool-card.on{border-color:var(--dg-clay);box-shadow:0 0 0 1px var(--dg-clay) inset}
.pr-tool-card.on h3{color:var(--dg-clay)}

/* Tempo Tap */
#tt .tt-bpm{font-family:var(--dg-font-display);font-size:46px;line-height:1;color:var(--dg-clay)}
#tt .tt-bpm b{font-size:46px}
#tt-tap.tt-pulse{transform:scale(.97);filter:brightness(1.05)}
#tt-tap{transition:transform .08s ease, filter .08s ease}