/* Study mode: the panel's second cut (2026-09-27, a founding member's tablet).
   The panel's first rules stay in style.css; everything added since is here.
   Every control is sized for a fingertip: nothing a player taps is under 28px. */

/* the head: the mode, where the segments are kept, and the way to the help */
#study-panel .sp-top {
  display: flex; align-items: center; gap: 8px;
  /* the head stays put while the panel scrolls under it */
  position: sticky; top: -12px; z-index: 1; margin: -12px -12px 0; padding: 12px 12px 6px;
  background: rgba(8, 10, 22, .96); border-radius: 14px 14px 0 0;
}
#study-panel .sp-top { flex-wrap: wrap; row-gap: 2px; }
#study-panel .sp-top .sp-head { flex: 1; white-space: nowrap; }
/* its own line under the title: "saved on this device" and a title do not share 200px */
.sp-saved { order: 3; flex-basis: 100%; font-size: 10.5px; font-weight: 800; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-saved.flash { animation: sp-saved-in .5s ease-out; }
@keyframes sp-saved-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.sp-help {
  flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 900; line-height: 1; color: #d7e0ea;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
}
.sp-help[aria-expanded="true"] { background: rgba(125, 255, 178, .22); border-color: rgba(125, 255, 178, .6); color: #fff; }

/* a segment: one line when it is not the one in hand, an editor when it is */
.sp-seg { flex-wrap: wrap; row-gap: 7px; }
.sp-seg .sp-x { font-weight: 800; color: var(--gold); }
.sp-edit { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; cursor: default; }
.sp-edit .sp-step { flex: 1 1 calc(50% - 3px); }
.sp-edit .sp-step.reps { flex: 0 0 88px; }
.sp-edit .sp-from { flex: 1 1 0; min-width: 0; }
.sp-step {
  display: flex; align-items: center; justify-content: space-between; gap: 2px; min-width: 0;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px; padding: 3px;
}
.sp-step button, .sp-from {
  font: inherit; font-weight: 900; cursor: pointer; color: #d7e0ea;
  background: rgba(255, 255, 255, .1); border: none; border-radius: 7px;
}
.sp-step button { flex: none; width: 28px; height: 28px; padding: 0; font-size: 15px; line-height: 1; }
.sp-step button:hover:not(:disabled), .sp-from:hover { background: rgba(255, 255, 255, .25); }
.sp-step button:disabled { opacity: .3; cursor: default; }
.sp-step label { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.05; cursor: text; }
.sp-step label small { font-size: 8.5px; letter-spacing: 1.5px; font-weight: 800; opacity: .65; }
.sp-step input {
  width: 100%; min-width: 0; padding: 0; border: none; border-bottom: 1px dashed rgba(255, 255, 255, .45);
  background: transparent; color: #fff; text-align: center; border-radius: 0;
  font: inherit; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.sp-step input:focus { outline: none; border-bottom: 1px solid #7dffb2; }
.sp-step b { flex: 1; text-align: center; font-weight: 800; color: var(--gold); white-space: nowrap; }
.sp-from { padding: 0 4px; height: 36px; font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 9px; background: rgba(255, 255, 255, .07); }
.sp-from.on { border-color: #7dffb2; color: #7dffb2; background: rgba(16, 185, 129, .16); }

/* the ✕ is a fingertip wide too (it was 14 by 15) */
#study-panel .sp-del { flex: none; width: 28px; height: 28px; padding: 0; font-size: 14px; line-height: 1; border-radius: 7px; }
#study-panel .sp-del:hover { background: rgba(255, 140, 158, .16); }
/* one scroll, the panel's own: a list scrolling inside a panel that scrolls
   is two thumbs' worth of trouble on a tablet */
#study-panel #sp-list { max-height: none; overflow: visible; }

/* hands: the Practice bar's three, at the panel's width */
#study-panel .sp-hands { flex-wrap: nowrap; }
#study-panel .sp-hands button { flex: 1; padding: 7px 2px; font-size: 12.5px; min-height: 30px; }
#study-panel .sp-hands.hidden { display: none; }

/* the bar counter's arrows */
.mb-row { display: inline-flex; align-items: center; gap: 8px; }
.mb-step {
  pointer-events: auto; flex: none; width: 34px; height: 34px; padding: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1; color: #fff;
  background: rgba(8, 10, 22, .7); border: 1px solid rgba(215, 224, 234, .35);
}
.mb-step:hover { background: rgba(52, 211, 255, .25); }
.mb-step:active { transform: scale(.94); }

/* the bar counter is a row of buttons now: the panel starts a little lower */
#study-panel { top: 138px; }
body.sheet-on #study-panel { top: calc(var(--sheet-h, 164px) + 86px); }

/* the panel never runs under the keys: it scrolls inside its own height.
   --kb-h is the renderer's real keyboard height; the panel's top is
   style.css's (128px, or 76px under the sheet) */
#study-panel {
  max-height: calc(100vh - 150px - var(--kb-h, 16vh)); max-height: calc(100dvh - 150px - var(--kb-h, 16dvh));
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
body.sheet-on #study-panel {
  max-height: calc(100vh - var(--sheet-h, 164px) - 98px - var(--kb-h, 16vh));
  max-height: calc(100dvh - var(--sheet-h, 164px) - 98px - var(--kb-h, 16dvh));
}

/* the auto-create picker: the piece's phrases first, a finished run's rough spots under them */
.sa-phr { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; margin: 0 0 12px;
  border-radius: 12px; background: rgba(52, 211, 255, .08); border: 1px solid rgba(52, 211, 255, .4); }
.sa-phr p { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.4; }
.sa-phr p b { color: var(--cyan); }
.sa-phr .small-btn { margin: 0; flex: none; }
.sa-none { font-size: 13px; opacity: .7; margin: 6px 0 0; }