/* ============ LILT PLAYER — in TradBuddy's 8-bit skin ============
   Lilt's layout and ergonomics (big play button, speed stepper, tap-a-note), dressed in
   TradBuddy's greens, gold and pixel borders. The music sits on the parchment scroll.
   Every rule is scoped under .lilt so neither app's styles leak into the other. */

.lilt {
  --l-paper-ink: #2a1f0a;
  --l-hot: #b8322a;                    /* the sounding note, on parchment */
  --l-hot-glow: rgba(184, 50, 42, .38);
  --l-now: rgba(255, 210, 74, .34);    /* the sounding bar, on parchment */
  --l-hover: rgba(46, 139, 80, .16);
  --l-loop: rgba(184, 134, 11, .20);
  --l-loop-ink: #8a5a00;
  --l-ease: cubic-bezier(.32, .72, 0, 1);
  font-family: var(--font-body);
  color: var(--bright);
}
.lilt button, .lilt input, .lilt output { font: inherit; color: inherit; }
.lilt button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lilt svg.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; flex: none; }

/* ---------- the sheet (TradBuddy's parchment) ---------- */
.lilt .lt-sheet { position: relative; }
.lilt .lt-sheet > *:not(.notecard) { position: relative; }
#lt-paper { width: 100%; min-height: 160px; color: var(--l-paper-ink); }
#lt-paper svg { display: block; max-width: 100%; overflow: visible; color: var(--l-paper-ink); }
#lt-paper .abcjs-note, #lt-paper .abcjs-rest { cursor: pointer; }
#lt-paper .abcjs-note, #lt-paper .abcjs-note * { transition: fill .9s ease, filter .9s ease; }
#lt-paper .hov, #lt-paper .hov * { fill: #1e6b3a; transition: fill .12s ease; }
#lt-paper .hl, #lt-paper .hl * { fill: var(--l-hot) !important; transition: none; }
#lt-paper .hl { filter: drop-shadow(0 0 4px var(--l-hot-glow)); }
#lt-paper .lt-hide { visibility: hidden; } /* tab only: the staff's still laid out (taps use it), just not drawn */
#lt-paper .start-mark, #lt-paper .start-mark * { fill: var(--l-hot) !important; }
#lt-paper .in-loop, #lt-paper .in-loop * { fill: var(--l-loop-ink); }
.lilt .ov-hover { fill: var(--l-hover); stroke: none; opacity: 0; transition: opacity .25s ease, transform .22s var(--l-ease); }
.lilt .ov-hover.on { opacity: 1; }
.lilt .ov-hover.pick { fill: var(--l-loop); }
.lilt .ov-now { fill: var(--l-now); stroke: none; transition: transform .32s var(--l-ease); }
.lilt .ov-head { fill: var(--l-hot); opacity: .6; }
.lilt .ov-loop { fill: var(--l-loop); stroke: none; }
.lilt .ov-pick { fill: var(--l-loop); stroke: var(--l-loop-ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.lilt .ripple { fill: var(--l-hot); opacity: 0; transform-box: fill-box; transform-origin: center; animation: lt-ripple .75s cubic-bezier(.2, .7, .3, 1); }
@keyframes lt-ripple { 0% { opacity: .32; transform: scale(.45); } 100% { opacity: 0; transform: scale(1.9); } }
.lilt .ov-loop.flash { animation: lt-loopflash .7s ease; }
@keyframes lt-loopflash { 0% { fill: var(--l-loop); } 25% { fill: var(--l-loop-ink); fill-opacity: .32; } 100% { fill: var(--l-loop); } }
.lilt .lt-sheet.enter #lt-paper { animation: lt-enter .45s var(--l-ease); }
@keyframes lt-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lilt .hint { margin: 10px 6px 0; font-size: 19px; color: #8a6f3c; text-align: center; }
.lilt .parse-err { padding: 30px 16px; text-align: center; font-size: 22px; color: #6b5a2e; }

/* the banner at the top of the sheet: choosing bars, looping, the set's progress */
.lilt .banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 4px 10px; padding: 8px 8px 8px 14px; background: #efd98c; border: 3px solid #8a6f3c; color: var(--l-paper-ink); font-size: 21px; line-height: 1.15; }
.lilt .banner b { color: #6b3f00; font-weight: normal; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lilt .banner.set { background: #d9ecc9; border-color: #2e8b50; }

/* the note pop-up: tap (or hover) a note to see its name */
.lilt .notecard { position: absolute; z-index: 5; left: 0; top: 0; padding: 6px 12px 7px; background: var(--panel); border: 3px solid var(--line-bright); box-shadow: 0 4px 0 rgba(0, 0, 0, .45); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .2s var(--l-ease); }
.lilt .notecard.below { transform: translateY(-4px); }
.lilt .notecard.show { opacity: 1; transform: none; }
.lilt .nc-name { font-family: var(--font-px); font-size: 16px; line-height: 1; color: var(--gold); }

/* ---------- the dock ---------- */
.lilt .dock { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: min(760px, calc(100% - 16px)); background: var(--panel); border: 3px solid var(--line-bright); box-shadow: 0 0 0 3px var(--bg), 0 8px 0 3px rgba(0, 0, 0, .5); padding: 8px 10px 10px; }
.lilt .scrub { padding: 6px 10px 12px; margin-top: -2px; cursor: pointer; touch-action: none; }
.lilt .progress { height: 8px; background: #051509; border: 2px solid var(--line); position: relative; }
.lilt .progress i { display: block; height: 100%; width: 0; background: var(--green); position: relative; }
.lilt .progress i::after { content: ""; position: absolute; right: -8px; top: 50%; width: 14px; height: 14px; background: var(--bright); border: 2px solid #04200e; transform: translateY(-50%) scale(0); transition: transform .2s var(--l-ease); }
.lilt .scrub:hover .progress i::after, .lilt .scrub.drag .progress i::after, .lilt .scrub:focus-visible .progress i::after { transform: translateY(-50%) scale(1); }
.lilt .progress.loop i, .lilt .progress.loop i::after { background: var(--gold); }
.lilt .drow { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 6px; }
.lilt .drow > .dgroup:first-child { justify-self: start; }
.lilt .drow > .dgroup-r { justify-self: end; }
.lilt .tb[aria-pressed="true"] { color: var(--gold); }
.lilt .drow .play { grid-column: 3; }
.lilt .drow .speed { grid-column: 4; justify-self: center; }
.lilt .dgroup { display: flex; align-items: center; gap: 4px; }
.lilt .tb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 62px; height: 60px; border: 0; background: transparent; font-size: 19px; line-height: 1; color: var(--dim); padding: 0 6px; }
.lilt .tb:hover { color: var(--bright); background: rgba(46, 139, 80, .18); }
.lilt .tb.loopon { color: var(--gold); }
.lilt .tb span { white-space: nowrap; }
.lilt .play { width: 68px; height: 68px; border: 3px solid #ffe9a0; background: var(--gold); color: #2a1f00; display: grid; place-items: center; box-shadow: 0 5px 0 var(--gold-dk); flex: none; transition: transform .1s; }
.lilt .play:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gold-dk); }
.lilt .play svg { width: 32px; height: 32px; fill: currentColor; stroke: none; }
.lilt .play.beat { animation: lt-beat .45s ease-out; }
.lilt .play.beat.down { animation: lt-beatdown .55s ease-out; }
@keyframes lt-beat { 0% { box-shadow: 0 5px 0 var(--gold-dk), 0 0 0 0 rgba(255, 210, 74, .55); } 100% { box-shadow: 0 5px 0 var(--gold-dk), 0 0 0 10px rgba(255, 210, 74, 0); } }
@keyframes lt-beatdown { 0% { box-shadow: 0 5px 0 var(--gold-dk), 0 0 0 0 rgba(255, 210, 74, .7); } 100% { box-shadow: 0 5px 0 var(--gold-dk), 0 0 0 18px rgba(255, 210, 74, 0); } }
.lilt #lt-playIco { transform-origin: center; }
.lilt #lt-playIco.swap { animation: lt-icoswap .28s var(--l-ease); }
@keyframes lt-icoswap { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
.lilt .speed { display: flex; align-items: center; gap: 2px; background: #051509; border: 3px solid var(--line); padding: 3px; }
.lilt .speed .step { width: 48px; height: 48px; border: 0; background: transparent; color: var(--bright); display: grid; place-items: center; touch-action: manipulation; }
.lilt .speed .step:hover { background: rgba(46, 139, 80, .25); }
.lilt .speed .step:active { transform: scale(.92); }
.lilt .speed .val { min-width: 84px; height: 48px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: .95; padding: 0 4px; }
.lilt .speed .num { font-size: 32px; color: var(--gold); display: flex; align-items: center; gap: 3px; }
.lilt .speed .num svg { width: 12px; height: 18px; fill: currentColor; stroke: none; opacity: .8; }
.lilt .speed .lbl { font-size: 17px; color: var(--dim); }
.lilt #lt-bpm { display: inline-block; }
.lilt #lt-bpm.bump { animation: lt-bump .28s var(--l-ease); }
@keyframes lt-bump { 0% { transform: scale(1.18); } 100% { transform: none; } }
@media (max-width: 599px) {
  .lilt .drow { grid-template-columns: 1fr auto 1fr; row-gap: 8px; }
  .lilt .drow .speed { grid-column: 1 / -1; grid-row: 1; justify-content: space-between; justify-self: stretch; }
  .lilt .drow .play { grid-column: 2; grid-row: 2; }
  .lilt .drow > .dgroup:first-child { grid-column: 1; grid-row: 2; }
  .lilt .drow > .dgroup-r { grid-column: 3; grid-row: 2; }
  .lilt .speed .val { flex: 1; }
  .lilt .tb { min-width: 56px; }
}

/* ---------- popovers (loop, speed) ---------- */
.lilt .pop { position: absolute; z-index: 45; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 8px); opacity: 0; pointer-events: none; width: min(520px, calc(100% - 24px)); background: var(--panel); border: 3px solid var(--line-bright); box-shadow: 0 0 0 3px var(--bg), 0 8px 0 3px rgba(0, 0, 0, .5); padding: 14px; transition: opacity .2s, transform .28s var(--l-ease); }
.lilt .pop.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.lilt .pop h3, .lilt .lt-panel h3 { margin: 0 0 12px; font-family: var(--font-px); font-size: 10px; font-weight: normal; color: var(--gold); letter-spacing: .04em; }
.lilt .optgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.lilt .opt { min-height: 48px; padding: 0 16px; border: 3px solid var(--line-bright); background: var(--panel2); font-size: 22px; line-height: 1; color: var(--bright); box-shadow: 0 3px 0 #04200e; }
.lilt .opt:hover { background: #17472a; }
.lilt .opt:active { transform: translateY(3px); box-shadow: none; }
.lilt .opt[aria-pressed="true"] { background: var(--gold); color: #2a1f00; border-color: #ffe9a0; box-shadow: 0 3px 0 var(--gold-dk); }
.lilt .slider-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.lilt .slider-row small { color: var(--dim); font-size: 18px; min-width: 50px; }
.lilt .slider-row small.r { text-align: right; }

/* ---------- Sound & practice ---------- */
.lilt .lt-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .3s; }
.lilt .lt-scrim.show { opacity: 1; pointer-events: auto; }
.lilt .lt-panel { position: fixed; z-index: 58; left: 0; right: 0; bottom: 0; max-height: 88vh; max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--panel); border-top: 3px solid var(--line-bright); box-shadow: 0 -6px 0 rgba(0, 0, 0, .35); padding: 10px 18px calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateY(104%); transition: transform .42s var(--l-ease); }
.lilt .lt-panel.open { transform: none; }
.lilt .grabber { width: 44px; height: 6px; background: var(--line-bright); margin: 0 auto 10px; }
@media (min-width: 700px) {
  .lilt .lt-panel { left: auto; right: 24px; bottom: 24px; width: 430px; border: 3px solid var(--line-bright); box-shadow: 0 0 0 3px var(--bg), 0 8px 0 3px rgba(0, 0, 0, .5); max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); transform: translateY(12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--l-ease); padding-top: 16px; }
  .lilt .lt-panel.open { opacity: 1; transform: none; pointer-events: auto; }
  .lilt .grabber { display: none; }
}
.lilt .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.lilt .panel-head h2 { margin: 0; font-family: var(--font-px); font-size: 12px; font-weight: normal; color: var(--bright); line-height: 1.5; }
.lilt .sec { padding: 14px 0; border-top: 2px dashed var(--line); }
.lilt .sec:first-of-type { border-top: 0; }
.lilt .c { font-size: 19px; color: var(--dim); line-height: 1.2; }
.lilt .inst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lilt .inst button { min-height: 68px; border: 3px solid var(--line-bright); background: var(--panel2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; box-shadow: 0 3px 0 #04200e; }
.lilt .inst button:active { transform: translateY(3px); box-shadow: none; }
.lilt .inst b { font-size: 23px; font-weight: normal; line-height: 1; }
.lilt .inst small { font-size: 17px; color: var(--dim); }
.lilt .inst button[aria-pressed="true"] { background: var(--gold); border-color: #ffe9a0; color: #2a1f00; box-shadow: 0 3px 0 var(--gold-dk); }
.lilt .inst button[aria-pressed="true"] small { color: inherit; opacity: .75; }
.lilt .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; cursor: pointer; }
.lilt .row > span { line-height: 1.05; }
.lilt .row .t { font-size: 23px; color: var(--bright); line-height: 1.1; }
/* pixel on/off switch */
.lilt .switch { appearance: none; -webkit-appearance: none; width: 58px; height: 32px; background: #051509; border: 3px solid var(--line); position: relative; flex: none; margin: 0; cursor: pointer; transition: background .15s, border-color .15s; }
.lilt .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--dim); transition: transform .2s var(--l-ease), background .15s; }
.lilt .switch:checked { background: #1e6b3a; border-color: var(--green); }
.lilt .switch:checked::after { transform: translateX(26px); background: var(--bright); }
.lilt .seg { display: flex; background: #051509; border: 3px solid var(--line); padding: 3px; gap: 3px; }
.lilt .seg button { flex: 1; min-height: 44px; border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--dim); padding: 0 6px; }
.lilt .seg button[aria-pressed="true"] { background: var(--gold); color: #2a1f00; }
/* four tab choices: two rows of two, so the labels stay readable on a phone */
.lilt .seg.seg-2x2 { display: grid; grid-template-columns: 1fr 1fr; }
.lilt .lt-stepper { display: flex; align-items: center; gap: 6px; }
.lilt .lt-stepper button { width: 46px; height: 46px; border: 3px solid var(--line-bright); background: var(--panel2); color: var(--bright); display: grid; place-items: center; box-shadow: 0 3px 0 #04200e; }
.lilt .lt-stepper button:active { transform: translateY(3px); box-shadow: none; }
.lilt .lt-stepper button:disabled { opacity: .35; cursor: default; box-shadow: none; transform: none; }
.lilt .lt-stepper output { min-width: 112px; text-align: center; font-size: 23px; color: var(--gold); }
.lilt .lt-sub { margin-top: 8px; padding: 10px 12px; background: #051509; border: 2px solid var(--line); }
.lilt .lt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 3px solid var(--line-bright); background: var(--panel2); color: var(--bright); font-size: 21px; line-height: 1; box-shadow: 0 3px 0 #04200e; }
.lilt .lt-btn:active { transform: translateY(3px); box-shadow: none; }
.lilt .banner .lt-btn { background: #fff6d8; color: var(--l-paper-ink); border-color: #8a6f3c; box-shadow: 0 3px 0 #8a6f3c; }
.lilt .lt-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--gold); }
.lilt .lt-btn.small { min-height: 38px; font-size: 19px; padding: 0 10px; }

/* ---------- count-in digits ---------- */
.lilt .lt-count { position: fixed; z-index: 50; left: 50%; top: 40%; transform: translate(-50%, -50%); font-family: var(--font-px); font-size: 88px; line-height: 1; color: var(--gold); text-shadow: 5px 5px 0 #04200e; pointer-events: none; opacity: 0; }
.lilt .lt-count.one { font-size: 104px; }
.lilt .lt-count.weak { font-size: 52px; color: var(--dim); }
.lilt .lt-count.pop-in { animation: lt-countpop .5s var(--l-ease); }
@keyframes lt-countpop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); } }

/* ---------- the tune strip: this tune, or the set being built ---------- */
.lilt .lt-setbar { margin: 0 0 14px; }
.lilt .sb-track { list-style: none; margin: 0; padding: 2px 2px 6px; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.lilt .sb-track::-webkit-scrollbar { display: none; }
.lilt .sb-track li { flex: none; }
.lilt .sc-wrap { display: flex; align-items: stretch; }
.lilt .sc { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px 6px 6px; border: 3px solid var(--line); background: var(--panel2); color: var(--bright); text-align: left; max-width: 220px; }
.lilt span.sc { cursor: default; }
.lilt .sc[aria-current="true"] { border-color: var(--gold); }
.lilt .sc-n { width: 28px; height: 28px; display: grid; place-items: center; background: #051509; font-size: 20px; color: var(--dim); flex: none; }
.lilt .sc[aria-current="true"] .sc-n { background: var(--gold); color: #2a1f00; }
.lilt .sc-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lilt .sc-name { font-size: 21px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lilt .sc-dots { display: flex; align-items: center; gap: 4px; }
.lilt .sc-dots .d { width: 7px; height: 7px; background: var(--line); }
.lilt .sc-dots .d.done { background: var(--green); }
.lilt .sc-dots .d.now { background: var(--gold); animation: lt-dotpulse 1.1s ease-in-out infinite; }
@keyframes lt-dotpulse { 50% { opacity: .35; } }
/* times through (tap to cycle 1-2-3) and take-out, joined to the chip */
.lilt .sc-reps, .lilt .sc-x { min-width: 44px; border: 3px solid var(--line); border-left: 0; background: var(--panel2); font-size: 21px; line-height: 1; color: var(--gold); padding: 0 8px; }
.lilt .sc-x { color: var(--dim); font-size: 18px; }
.lilt .sc-x:hover { color: var(--red); }
.lilt .sc-wrap:has(.sc[aria-current="true"]) .sc-reps, .lilt .sc-wrap:has(.sc[aria-current="true"]) .sc-x { border-color: var(--gold); }
.lilt .conn button { width: 40px; height: 40px; border: 2px dashed var(--line-bright); background: transparent; display: grid; place-items: center; color: var(--dim); }
.lilt .conn button svg { width: 18px; height: 18px; }
.lilt .conn button:hover, .lilt .conn button.on { border-style: solid; border-color: var(--gold); color: var(--gold); }
.lilt .add button { display: flex; align-items: center; gap: 6px; min-height: 52px; min-width: 52px; justify-content: center; padding: 0 14px; border: 3px dashed var(--line-bright); background: transparent; color: var(--bright); font-size: 21px; }
.lilt .add button:hover { border-style: solid; color: var(--gold); border-color: var(--gold); }

/* the tune's shape, beside TradBuddy's badges */
.badge-form { color: var(--dim); border-style: dashed; }

@media (prefers-reduced-motion: reduce) {
  .lilt *, .lilt *::before, .lilt *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* the music scrolls above the pinned bar — leave room for it at the bottom */
.detail-inner { padding-bottom: calc(var(--lt-dock-h, 90px) + 32px); }

/* the small bar: Loop · Play · speed · More (and a thin progress line) */
.lilt .lt-more { display: none; }
.lilt .dock.mini { padding: 4px 8px 6px; }
.lilt .dock.mini .scrub { padding: 2px 6px 6px; }
.lilt .dock.mini .progress { height: 5px; }
.lilt .dock.mini .drow { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.lilt .dock.mini #lt-restartBtn,
.lilt .dock.mini #lt-focusBtn,
.lilt .dock.mini #lt-soundBtn,
.lilt .dock.mini .speed .lbl { display: none; }
.lilt .dock.mini .play { width: 56px; height: 56px; order: 2; }
.lilt .dock.mini .play svg { width: 26px; height: 26px; }
.lilt .dock.mini .dgroup:first-child { order: 1; }
.lilt .dock.mini .speed { order: 3; padding: 2px; }
.lilt .dock.mini .speed .step { width: 42px; height: 42px; }
.lilt .dock.mini .speed .val { min-width: 54px; height: 42px; }
.lilt .dock.mini .speed .num { font-size: 26px; }
.lilt .dock.mini .lt-more { display: flex; order: 4; color: var(--bright); }
.lilt .dock.mini .tb { height: 52px; min-width: 54px; }
@media (max-width: 360px) { /* iPhone SE 1st gen / small Androids: keep More on screen */
  .lilt .dock.mini .drow { gap: 2px; }
  .lilt .dock.mini .play { width: 50px; height: 50px; }
  .lilt .dock.mini .speed .step { width: 36px; }
  .lilt .dock.mini .speed .val { min-width: 44px; }
  .lilt .dock.mini .speed .num { font-size: 22px; }
  .lilt .dock.mini .tb { min-width: 44px; }
}
/* the full bar: everything, with a small Less tab on its top edge */
.lilt .dock:not(.mini) .lt-more { display: flex; flex-direction: row; gap: 4px; position: absolute; top: -40px; right: 14px; height: 38px; min-width: 0; padding: 0 10px; background: var(--panel); border: 3px solid var(--line-bright); border-bottom: 0; font-size: 18px; color: var(--bright); }
.lilt .dock:not(.mini) .lt-more svg { width: 18px; height: 18px; }

/* ---------- Focus: just the music ---------- */
.detail.focus .detail-head,
.detail.focus #lt-setbar,
.detail.focus .version-bar,
.detail.focus .detail-actions,
.detail.focus .btn-bottom-close,
.detail.focus #detail-back { display: none !important; }
.detail.focus .detail-inner { padding-top: 8px; }

.lilt .lt-keyreset { display: block; margin: 4px 0 0 auto; min-height: 44px; }

/* blind sets: the tunes still to come */
.lilt .sc.sc-hidden { opacity: .7; border-style: dashed; cursor: default; }
.lilt .sc.sc-hidden .sc-name { letter-spacing: 4px; color: var(--gold); }

/* the full player bar on the smallest phones (320px): tighter speed row and buttons */
@media (max-width: 360px) {
  .lilt .dock { padding-left: 6px; padding-right: 6px; }
  .lilt .dock:not(.mini) .speed .step { width: 40px; }
  .lilt .dock:not(.mini) .speed .val { min-width: 56px; }
  .lilt .dock:not(.mini) .tb { min-width: 46px; padding: 0 3px; }
}