/* Little Pulse · the app's styles. Tokens come from ../brand/tokens.css. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { background: #fff; color: var(--lp-ink); font-family: var(--fu); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
::selection { background: var(--pink-t); }
/* scroll bars: a thin hairline thumb on no track, so a column's edge stays
   seamless ("I also don't love the look of this gray bar", 2026-10-24) */
* { scrollbar-width: thin; scrollbar-color: var(--lp-line2) transparent; }

/* section colors */
.c-warm { --c: var(--marigold); --ct: var(--marigold-t); --cd: var(--marigold-deep); }
.c-legs { --c: var(--coral); --ct: var(--coral-t); --cd: var(--coral-deep); }
.c-arms { --c: var(--purple); --ct: var(--purple-t); --cd: var(--purple-deep); }
.c-core { --c: var(--teal); --ct: var(--teal-t); --cd: var(--teal-deep); }
.c-burn { --c: var(--pink); --ct: var(--pink-t); --cd: var(--pink-deep); }
.c-str  { --c: var(--blue); --ct: var(--blue-t); --cd: var(--blue-deep); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; background: var(--lp-ink); color: #fff; border-radius: var(--r-pill); padding: 9px 17px; white-space: nowrap; }
.btn.pink { background: var(--pink); color: var(--lp-ink); }
.btn.soft { background: var(--lp-inset); color: var(--lp-ink); }
.btn.plain { background: none; color: var(--lp-ink); padding: 9px 10px; }
.btn.small { font-size: 13.5px; padding: 6px 13px; }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn:disabled { opacity: .5; cursor: default; }
.seg { display: inline-flex; background: var(--lp-inset); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.seg button, .seg a { font-weight: 600; font-size: 14px; color: var(--lp-mid); padding: 7px 15px; border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; }
.seg .on { background: #fff; color: var(--lp-ink); box-shadow: 0 0 0 1px var(--lp-line2); }
.seg.small button { font-size: 13.5px; padding: 6px 12px; }
.switch { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; }
.switch i { width: 36px; height: 21px; border-radius: 999px; background: var(--lp-line2); position: relative; flex: none; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: left .12s; }
.switch.on i { background: var(--lp-ink); }
.switch.on i::after { left: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; background: var(--lp-inset); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }

/* ---------- the top bar ---------- */
.lp-bar { position: sticky; top: 0; z-index: 30; background: #fff; display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 22px; border-bottom: 1px solid var(--lp-line); }
.lp-bar .brand { display: flex; align-items: center; gap: 9px; margin-right: 22px; text-decoration: none; }
.lp-bar .brand [data-lp-mark] { width: 32px; height: 32px; }
.lp-bar .brand .lp-wm { font-size: 21px; }
.lp-bar nav { display: flex; gap: 4px; }
.lp-bar nav a { font-weight: 600; font-size: 15px; color: var(--lp-mid); padding: 8px 15px; border-radius: var(--r-pill); text-decoration: none; }
.lp-bar nav a.on { background: var(--lp-ink); color: #fff; }
.lp-bar .sp { flex: 1; }
.lp-bar .saved { font-size: 13.5px; color: var(--lp-mut); }
/* on Classes it opens a small menu: Save a copy, Bring back a copy */
.lp-bar .svc-b { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; margin-right: -12px; border-radius: var(--r-pill); }
.lp-bar .svc-b:hover, .lp-bar .svc-b[aria-expanded="true"] { background: var(--lp-inset); color: var(--lp-ink); }
.lp-bar .svc-b svg { width: 14px; height: 14px; flex: none; }
.pop.svc-pop { width: 240px; top: calc(100% + 4px); right: -12px; }
.svc-pop .it { min-height: 44px; }
.svc .svc-list { display: grid; gap: 2px; margin: 4px 0 2px; max-width: 520px; }
.svc-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; text-align: left; padding: 8px 14px; border-radius: 12px; font-size: 15px; }
.svc-row:hover { background: #fff; }
.svc-row b { font-weight: 600; }
.svc-row small { font-size: 13px; color: var(--lp-mut); }
.svc-row .r { margin-left: auto; font-size: 14px; color: var(--lp-mid); white-space: nowrap; }
.svc-row svg { width: 13px; height: 13px; flex: none; color: var(--lp-mut); }
.svc-sum { font-size: 16px; color: var(--lp-mid); }
.svc-sum b { color: var(--lp-ink); font-weight: 700; }
.svc-names { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.svc-names li { background: #fff; border-radius: var(--r-pill); padding: 5px 12px; font-size: 14px; }
.svc-names li.more { background: none; color: var(--lp-mid); padding-left: 4px; }
.svc h3:focus { outline: none; }
.svc-file { position: relative; cursor: pointer; min-height: 44px; }
.imp .btn.soft.svc-file { background: #fff; }
.svc-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.svc-file:focus-within { box-shadow: var(--focus); }
.svc .imp-foot .btn { min-height: 44px; }

/* ---------- classes page ---------- */
.page { max-width: 1100px; margin: 0 auto; padding: 40px 32px 80px; }
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.page-head h1 { font-family: var(--fd); font-weight: 800; font-size: 36px; letter-spacing: -.02em; line-height: 1.05; }
.page-head p { font-size: 15px; color: var(--lp-mid); margin-top: 4px; }
.page-head .sp { flex: 1; }
.cl-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 280px 90px 40px; gap: 18px; align-items: center; padding: 16px 14px; border-bottom: 1px solid var(--lp-line); border-radius: 12px; cursor: pointer; }
.cl-row:hover { background: var(--lp-inset); }
.cl-date { text-align: center; line-height: 1.1; }
.cl-date b { display: block; font-family: var(--fd); font-weight: 800; font-size: 22px; }
.cl-date span { font-size: 13px; color: var(--lp-mut); }
.cl-name { font-weight: 700; font-size: 17px; line-height: 1.25; }
.cl-sub { font-size: 14px; color: var(--lp-mut); }
.cl-bar { display: flex; gap: 3px; height: 10px; }
.cl-bar span { border-radius: 3px; background: var(--c); }
.cl-len { font-weight: 600; font-size: 14.5px; color: var(--lp-mid); text-align: right; }
.cl-del { width: 34px; height: 34px; border-radius: 50%; color: var(--lp-mut); display: flex; align-items: center; justify-content: center; opacity: 0; }
.cl-row:hover .cl-del, .cl-del:focus-visible, .cl-row:focus-within .cl-del { opacity: 1; }
.cl-del:hover { background: #fff; color: var(--lp-ink); }
.cl-del svg { width: 16px; height: 16px; }
.empty { padding: 50px 0; text-align: center; color: var(--lp-mid); font-size: 16px; }

/* ---------- moves page ---------- */
.mv-search { display: flex; align-items: center; gap: 10px; background: var(--lp-inset); border-radius: var(--r-pill); padding: 10px 18px; margin-bottom: 14px; }
.mv-search svg { width: 17px; height: 17px; color: var(--lp-mut); flex: none; }
.mv-search input { border: 0; background: none; outline: none; font-size: 16px; flex: 1; }
.mv-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.mv-filters button { font-weight: 600; font-size: 14px; background: var(--lp-inset); border-radius: 999px; padding: 6px 14px; }
.mv-filters button.on { background: var(--lp-ink); color: #fff; }
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.mv-card { background: #fff; border-radius: 16px; box-shadow: var(--ring); padding: 14px; cursor: pointer; }
.mv-card .fig { height: 110px; border-radius: 12px; background: var(--lp-inset); display: flex; align-items: center; justify-content: center; }
.mv-card .fig svg { width: 100px; height: 100px; }
.mv-card b { display: block; font-size: 16px; margin-top: 10px; line-height: 1.25; }
.mv-card small { display: block; font-size: 13.5px; color: var(--lp-mut); margin-top: 2px; text-transform: none; }
.mv-card p { font-size: 14px; color: var(--lp-mid); margin-top: 6px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mv-card.open p { -webkit-line-clamp: unset; display: block; }

/* ---------- a class ---------- */
.cp-head { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--lp-line); background: #fff; }
.cp-back { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mid); flex: none; }
.cp-back:hover { background: var(--lp-inset); }
.cp-back svg { width: 18px; height: 18px; }
.cp-title input.name { font-family: var(--fd); font-weight: 800; font-size: 23px; letter-spacing: -.015em; border: 0; outline: none; background: none; width: 340px; padding: 2px 6px; margin-left: -6px; border-radius: 8px; }
.cp-title input.name:hover { background: var(--lp-inset); }
.cp-meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lp-mut); }
.cp-meta input { border: 0; background: none; color: var(--lp-mid); font-size: 14px; padding: 1px 4px; border-radius: 6px; }
.cp-meta input:hover { background: var(--lp-inset); }
.cp-head .sp { flex: 1; }

.mins { display: inline-flex; align-items: center; gap: 1px; background: var(--lp-inset); border-radius: 999px; padding: 3px; flex: none; }
.mins button { width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: 15px; color: var(--lp-mid); }
.mins button:hover { background: #fff; }
.mins input { width: 34px; border: 0; background: none; text-align: right; font-weight: 700; font-size: 14.5px; outline: none; -moz-appearance: textfield; }
.mins input::-webkit-outer-spin-button, .mins input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mins span { font-weight: 700; font-size: 14.5px; padding: 0 6px 0 3px; }

/* ---------- the plan: rail + one scroll ---------- */
.plan { display: grid; grid-template-columns: 270px minmax(0, 1fr); height: calc(100vh - var(--barH, 60px) - var(--headH, 69px)); }
.rail { border-right: 1px solid var(--lp-line); padding: 18px 14px; overflow-y: auto; }
.rail h4 { font-family: var(--fd); font-weight: 700; font-size: 17px; padding: 0 10px; }
.rail .len { font-size: 14px; color: var(--lp-mut); padding: 2px 10px 0; }
.wbar { display: flex; gap: 3px; height: 10px; margin: 14px 10px 14px; }
.wbar span { border-radius: 3px; background: var(--c); }
.r-sec { display: grid; grid-template-columns: 14px 10px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 10px 10px 10px 4px; border-radius: 12px; cursor: pointer; }
.r-sec + .r-sec { margin-top: 2px; }
.r-sec:hover { background: var(--lp-inset); }
.r-sec.on { background: var(--ct); }
.r-sec.drop { box-shadow: inset 0 3px 0 -1px var(--lp-ink); }
.r-sec .grip { width: 14px; height: 14px; color: var(--lp-mut); opacity: 0; cursor: grab; }
.r-sec:hover .grip { opacity: 1; }
.r-sec .nm { font-weight: 700; font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-sec .sub { font-size: 13px; color: var(--lp-mut); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-sec .mn { font-weight: 600; font-size: 14px; color: var(--lp-mid); white-space: nowrap; }
.r-sec .mn .r-set { display: block; font-weight: 500; font-size: 12.5px; color: var(--lp-mut); text-align: right; }
.r-sec .mn:has(.r-set) { text-align: right; line-height: 1.25; }
.r-add { display: flex; align-items: center; gap: 8px; margin: 10px 10px 0; font-weight: 700; font-size: 14.5px; }
.r-add svg { width: 16px; height: 16px; }
.r-ends { margin: 20px 10px 0; padding-top: 14px; border-top: 1px solid var(--lp-line); font-size: 14px; color: var(--lp-mid); }
.r-ends b { color: var(--lp-ink); }
.r-tip { margin: 14px 10px 0; font-size: 13.5px; font-style: italic; color: var(--lp-mut); line-height: 1.45; }

.scroll { overflow-y: auto; position: relative; }
.sec { padding: 0 30px 30px; position: relative; }
.sec + .sec { border-top: 6px solid var(--lp-inset); }
.sec-head { position: sticky; top: 0; z-index: 12; background: #fff; display: flex; align-items: center; gap: 12px; padding: 14px 0 12px; border-bottom: 1px solid var(--lp-line); }
.sec-head .dotbtn { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.sec-head .dotbtn:hover { background: var(--lp-inset); }
.sec-head .dotbtn .dot { width: 13px; height: 13px; }
.sec-head input.sname { font-family: var(--fd); font-weight: 800; font-size: 23px; letter-spacing: -.015em; border: 0; outline: none; background: none; padding: 2px 6px; margin-left: -6px; border-radius: 8px; width: 220px; min-width: 120px; }
.sec-head input.sname:hover { background: var(--lp-inset); }
.s-song { display: flex; align-items: center; gap: 10px; margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--lp-line); min-width: 0; }
.s-song .cov { width: 38px; height: 38px; border-radius: 9px; background: var(--ct); color: var(--cd); display: flex; align-items: center; justify-content: center; flex: none; }
.s-song .cov svg { width: 18px; height: 18px; }
.s-song b { display: block; font-weight: 700; font-size: 15.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.s-song small { display: block; font-size: 13px; color: var(--lp-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.sec-head .sp { flex: 1; }
.menu-wrap { position: relative; }
.pop { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; width: 320px; background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 0 0 1px var(--lp-line2); }
.pop .it { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; }
.pop .it:hover { background: var(--lp-inset); }
.pop .it small { display: block; font-weight: 500; font-size: 13px; color: var(--lp-mut); }
.pop .it svg { width: 17px; height: 17px; flex: none; color: var(--lp-mid); }
.pop .hr { height: 1px; background: var(--lp-line); margin: 6px 0; }
.pop h5 { font-family: var(--fd); font-weight: 700; font-size: 16px; padding: 6px 10px 2px; }
.pop p.lead { font-size: 13.5px; color: var(--lp-mid); line-height: 1.45; padding: 0 10px 8px; }
.pop .row { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 10px 8px; align-items: center; }
.pop .big { font-family: var(--fd); font-weight: 800; font-size: 30px; line-height: 1; }
.pop input.bpm { width: 90px; font-family: var(--fd); font-weight: 800; font-size: 28px; border: 0; background: var(--lp-inset); border-radius: 10px; padding: 4px 10px; outline: none; }
.pop .colors { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pop.left { right: auto; left: 0; width: 240px; }

/* the song search, under the section's heading */
.search { margin: 14px 0 6px; background: var(--lp-inset); border-radius: 16px; padding: 14px; }
.search .in { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 9px 16px; box-shadow: var(--ring); }
.search .in svg { width: 17px; height: 17px; color: var(--lp-mut); flex: none; }
.search .in input { border: 0; outline: none; background: none; font-size: 16px; flex: 1; }
.search .note { font-size: 14px; color: var(--lp-mid); padding: 10px 6px 2px; font-style: italic; }
.search .res { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 10px; border-radius: 10px; margin-top: 4px; }
.search .res:hover { background: #fff; }
.search .res b { display: block; font-size: 15.5px; }
.search .res small { display: block; font-size: 13.5px; color: var(--lp-mid); }
.search .res .r { margin-left: auto; font-size: 13.5px; color: var(--lp-mut); white-space: nowrap; }
/* a song she's used before: the same song, with that class's sequence (2026-10-28) */
.search .res-seqs { display: flex; align-items: center; gap: 4px; }
.search .res.seq { margin-top: 0; padding-left: 30px; gap: 8px; }
.search .res.seq > svg { width: 15px; height: 15px; flex: none; color: var(--pink-deep); }
.search .res.seq b { font-weight: 600; font-size: 15px; }
.search .res.seq b em { font-style: normal; font-weight: 500; font-size: 13px; color: var(--lp-mut); margin-left: 6px; }
.search .res.seq small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search .res.seq > span { min-width: 0; }
.search .seq-more { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--lp-mid); }
.search .seq-more:hover { background: #fff; color: var(--lp-ink); }
.search .seq-more svg { width: 16px; height: 16px; transition: transform .16s ease-out; }
.search .seq-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.search .seq-list { margin-left: 30px; padding-left: 0; }
.search .seq-list .res.seq { padding-left: 12px; }
@media (prefers-reduced-motion: reduce) { .search .seq-more svg { transition: none; } }

.cols { display: grid; grid-template-columns: 118px minmax(0, 1fr) 340px; gap: 0 22px; font-size: 13px; color: var(--lp-mut); padding: 12px 0 6px; }
.grid { display: grid; grid-template-columns: 118px minmax(0, 1fr) 340px; column-gap: 22px; position: relative; user-select: none; }
.sep { grid-column: 1 / -1; border-top: 1px solid var(--lp-line); pointer-events: none; }
.gut { display: flex; flex-direction: column; padding: 6px 0; }
.gut .pn { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14.5px; line-height: 1.2; margin-bottom: 2px; white-space: nowrap; }
.gut .t { font-size: 13px; color: var(--lp-mut); font-variant-numeric: tabular-nums; line-height: 1.6; }
.gut .pe { font-size: 12.5px; color: var(--lp-mut); }
.pdot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.pdot.verse { background: #A39A91; } .pdot.pre { background: var(--marigold); } .pdot.chorus { background: var(--coral); } .pdot.bridge { background: var(--purple); } .pdot.none { background: #fff; box-shadow: inset 0 0 0 2px #A39A91; }
.wc { display: flex; flex-direction: column; }
.ln { padding: 5px 12px; margin: 1px 0; border-radius: 8px; font-size: 17px; line-height: 1.5; cursor: text; }
.ln:hover { background: var(--lp-inset); }
.ln.inst { font-size: 15px; font-style: italic; color: var(--lp-mut); }
.ln.first { margin-top: 6px; }
.ln.cov { background: var(--tint); flex: 1; margin: 0; border-radius: 0; }
.ln.cov.rs { margin-top: 6px; border-radius: 8px 8px 0 0; }
.ln.cov.re { margin-bottom: 6px; border-radius: 0 0 8px 8px; }
.ln.cov.rs.re { border-radius: 8px; }
.ln.sel, .ln.cov.sel { background: #D6E6F7; }
.mchip { display: flex; width: max-content; align-items: center; gap: 6px; background: #fff; border-radius: 7px; padding: 2px 9px 2px 4px; font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--lp-ink); margin: 2px 0 4px -2px; box-shadow: 0 0 0 1px var(--lp-line2); }
.mchip svg { width: 20px; height: 20px; }
.hint { font-size: 14px; font-style: italic; color: var(--lp-mut); padding: 10px 0 0; }

/* the cue card, level with its lines */
.cue { position: relative; align-self: stretch; background: #fff; border-radius: 14px; padding: 12px 14px; margin: 6px 0; box-shadow: 0 0 0 1px var(--lp-line2); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px; align-content: start; }
.cue .f { width: 44px; height: 44px; border-radius: 10px; background: var(--tint); padding: 6px; grid-row: 1 / span 3; }
.cue .f svg { width: 100%; height: 100%; }
.cue input.mname { font-weight: 700; font-size: 15.5px; border: 0; outline: none; background: none; padding: 1px 4px; margin-left: -4px; border-radius: 6px; width: 100%; }
.cue input.mname:hover { background: var(--lp-inset); }
.cue .how { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13.5px; color: var(--lp-mid); }
.cue .how button { font-weight: 600; font-size: 13.5px; color: var(--lp-mid); padding: 1px 6px; border-radius: 6px; margin-left: -6px; }
.cue .how button:hover { background: var(--lp-inset); color: var(--lp-ink); }
.cue .at { font-size: 13.5px; color: var(--lp-mid); line-height: 1.4; }
.cue .at b { color: var(--lp-ink); font-weight: 700; }
.cue textarea { grid-column: 1 / -1; font-size: 14.5px; color: var(--lp-mid); line-height: 1.5; margin-top: 6px; border: 0; outline: none; resize: none; background: none; padding: 4px 6px; margin-left: -6px; border-radius: 8px; overflow: hidden; min-height: 28px; }
.cue textarea:hover, .cue textarea:focus { background: var(--lp-inset); color: var(--lp-ink); }
.cue .off { position: absolute; top: 8px; right: 8px; font-size: 12.5px; font-weight: 600; color: var(--lp-mut); padding: 2px 8px; border-radius: 999px; opacity: 0; }
.cue:hover .off, .cue:focus-within .off { opacity: 1; }
.cue .off:hover { background: var(--lp-inset); color: var(--lp-ink); }
.cue input.mname { padding-right: 70px; }
.cue .pop { top: auto; }

/* parts only */
.part { padding: 7px 12px; margin: 6px 0; border-radius: 8px; cursor: pointer; }
.part .first { font-size: 15.5px; }
.part .more { font-size: 13.5px; color: var(--lp-mut); margin-top: 1px; }
.part.cov { background: var(--tint); }
.stack { display: grid; gap: 0; }

/* the highlight bar */
.selbar { position: absolute; z-index: 20; left: 140px; width: min(600px, calc(100% - 160px)); background: #fff; border-radius: 16px; padding: 14px 16px 16px; box-shadow: 0 0 0 1px var(--lp-line2); user-select: none; }
.selbar .h { font-size: 14px; color: var(--lp-mid); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.selbar .h b { color: var(--lp-ink); }
.selbar .h .sp { flex: 1; }
.selbar .h .x { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); }
.selbar .h .x:hover { background: var(--lp-inset); }
.selbar .h .x svg { width: 15px; height: 15px; }
.selbar .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.selbar .row > span:first-child { font-weight: 600; font-size: 14px; margin-right: 4px; min-width: 150px; }
.selbar .opt { font-weight: 600; font-size: 13.5px; background: var(--lp-inset); border-radius: 999px; padding: 5px 12px; }
.selbar .opt:hover { background: var(--lp-line2); }
.selbar .opt.on { background: var(--lp-ink); color: #fff; }
.selbar .main { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lp-line); display: flex; align-items: center; gap: 10px; }

/* the composer (adding a move) */
.composer { position: absolute; z-index: 21; left: 140px; width: min(640px, calc(100% - 160px)); background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 0 0 1px var(--lp-line2); }
.composer.inline { position: static; width: auto; margin-top: 12px; }
.composer h5 { font-family: var(--fd); font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.composer .lead { font-size: 13.5px; color: var(--lp-mid); margin-bottom: 10px; }
.composer label { display: block; font-weight: 600; font-size: 14px; margin: 12px 0 6px; }
.composer input.q { width: 100%; border: 0; background: var(--lp-inset); border-radius: 12px; padding: 10px 14px; font-size: 16px; outline: none; }
.composer .sugs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; max-height: 214px; overflow-y: auto; }
.composer .sug { display: flex; align-items: center; gap: 10px; text-align: left; padding: 6px 8px; border-radius: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.composer .sug:hover { background: var(--lp-inset); }
.composer .sug.on { background: var(--pink-t); }
.composer .sug .f { width: 34px; height: 34px; border-radius: 8px; background: var(--lp-inset); padding: 4px; flex: none; }
.composer .sug .f svg { width: 100%; height: 100%; }
.composer .sug small { display: block; font-weight: 500; font-size: 12.5px; color: var(--lp-mut); text-transform: capitalize; }
.composer .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.composer .opts button { font-weight: 600; font-size: 13.5px; background: var(--lp-inset); border-radius: 999px; padding: 5px 12px; }
.composer .opts button.on { background: var(--lp-ink); color: #fff; }
.composer textarea { width: 100%; border: 0; background: var(--lp-inset); border-radius: 12px; padding: 10px 14px; font-size: 15px; line-height: 1.5; outline: none; resize: vertical; min-height: 80px; }
.composer input.reps { border: 0; background: var(--lp-inset); border-radius: 12px; padding: 8px 14px; font-size: 15px; outline: none; width: 260px; }
.composer .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 14px; }
.composer .foot .btn { min-height: 44px; }
/* a move the library doesn't know: What is it?, then the guess (2026-10-16) */
.composer .c-new { grid-column: 1 / -1; font-size: 13.5px; font-weight: 600; color: var(--lp-mid); padding: 2px 2px 0; margin: 0; }
.composer label.c-what { margin: 10px 0 6px; }
.composer textarea.c-desc { min-height: 0; resize: none; overflow: hidden; font-size: 15px; }
.composer textarea.c-desc:focus { box-shadow: var(--focus); }
.cp-g { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 12px; }
.cp-fig { width: 84px; height: 84px; border-radius: 14px; background: var(--lp-inset); display: flex; align-items: center; justify-content: center; }
.cp-fig:hover { box-shadow: inset 0 0 0 2px var(--lp-line2); }
.cp-say { min-width: 0; }
.cp-say .mus-tag { background: var(--lp-inset); }
.cp-works { font-size: 14.5px; line-height: 1.4; color: var(--lp-ink); margin: 6px 0 0; }
.cp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; }
.cp-acts .btn { min-height: 44px; }
.cp-acts .btn.plain { padding: 6px 10px; }
.c-fold { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 0 10px; margin: 6px 0 0 -10px; border-radius: 10px; font-size: 14px; color: var(--lp-ink); text-align: left; touch-action: manipulation; }
.c-fold b { font-weight: 600; }
.c-fold span { font-size: 13px; color: var(--lp-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.c-fold svg { width: 12px; height: 12px; flex: none; }
.c-fold:hover { background: var(--lp-inset); }
.c-fold:focus-visible { box-shadow: var(--focus); outline: none; }
.composer [data-cpguess] .mus-ed { margin-top: 4px; }
.composer .cp-hh { font-weight: 600; font-size: 14px; margin: 12px 0 6px; }
.cp-hits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cp-hit { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px 6px 6px; border-radius: 12px; background: var(--lp-inset); text-align: left; font-size: 14px; font-weight: 600; line-height: 1.2; touch-action: manipulation; }
.cp-hit:hover { background: var(--lp-line); }
.cp-hit .f { width: 40px; height: 40px; flex: none; border-radius: 9px; background: #fff; display: flex; align-items: center; justify-content: center; }
.cp-hit .nm { min-width: 0; }
.cp-hit small { display: block; font-weight: 500; font-size: 12.5px; color: var(--lp-mut); margin-top: 2px; }
.c-more-body { padding-bottom: 2px; }
/* a move just added, where it waits: a brief fill */
.wchip.landed, .fm.landed { position: relative; }
.wchip.landed::after, .fm.landed::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--pink-t); mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .wchip.landed { animation: lw-land 260ms cubic-bezier(.2, .8, .2, 1); }
  .wchip.landed::after, .fm.landed::after { animation: lw-fill 280ms ease-out; }
}
@keyframes lw-land { from { transform: scale(.94); } to { transform: none; } }
@keyframes lw-fill { from { opacity: 1; } to { opacity: 0; } }

/* moves with no song under them (music off, or not placed yet) */
.free { margin-top: 14px; }
.free h6 { font-size: 14px; font-weight: 600; color: var(--lp-mid); margin-bottom: 4px; }
.fm { display: grid; grid-template-columns: 52px minmax(0, 240px) 190px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 14px 6px; border-bottom: 1px solid var(--lp-line); }
.fm .f { width: 52px; height: 52px; border-radius: 12px; background: var(--lp-inset); padding: 7px; }
.fm .f svg { width: 100%; height: 100%; }
.fm input.mname { font-weight: 700; font-size: 16px; border: 0; outline: none; background: none; width: 100%; padding: 1px 4px; margin-left: -4px; border-radius: 6px; }
.fm input.mname:hover { background: var(--lp-inset); }
.fm input.reps { font-family: var(--fd); font-weight: 700; font-size: 17px; border: 0; outline: none; background: none; width: 100%; padding: 1px 4px; margin-left: -4px; border-radius: 6px; }
.fm input.reps:hover { background: var(--lp-inset); }
.fm .how { font-size: 13.5px; color: var(--lp-mid); }
.fm textarea { font-size: 15px; color: var(--lp-mid); line-height: 1.5; border: 0; outline: none; resize: none; background: none; padding: 2px 6px; margin-left: -6px; border-radius: 8px; width: 100%; overflow: hidden; }
.fm textarea:hover, .fm textarea:focus { background: var(--lp-inset); color: var(--lp-ink); }
.fm .off { font-size: 12.5px; font-weight: 600; color: var(--lp-mut); padding: 2px 8px; border-radius: 999px; opacity: 0; }
.fm:hover .off { opacity: 1; }
.fm .off:hover { background: var(--lp-inset); color: var(--lp-ink); }
.addmove { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 700; font-size: 14.5px; color: var(--lp-ink); padding: 6px 4px; }
.addmove svg { width: 15px; height: 15px; }
.nosong { margin-top: 14px; display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--lp-mid); }

/* ---------- the guide ---------- */
.guide { max-width: 1120px; margin: 0 auto; padding: 22px 32px 60px; }
.g-view { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; font-size: 14px; color: var(--lp-mid); }
.g-view .sp { flex: 1; }
.g-sec { margin-top: 26px; }
.g-sec:first-of-type { margin-top: 0; }
.g-band { display: flex; align-items: center; gap: 12px; background: var(--ct); border-radius: 14px; padding: 12px 18px; }
.g-band b { font-family: var(--fd); font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.g-band .song { font-size: 14.5px; color: var(--lp-mid); }
.g-band .song em { font-style: normal; font-weight: 700; color: var(--lp-ink); }
.g-band .sp { flex: 1; }
.g-band .mn { font-weight: 700; font-size: 15px; }
.g-hd, .g-row { display: grid; grid-template-columns: 96px 60px minmax(0, 1.2fr) 104px minmax(0, 1fr); gap: 18px; align-items: start; }
.g-hd { font-size: 13px; color: var(--lp-mut); padding: 12px 18px 6px; }
.g-row { padding: 16px 18px; border-bottom: 1px solid var(--lp-line); break-inside: avoid; }
.g-row .when { font-family: var(--fd); font-weight: 800; font-size: 21px; line-height: 1; font-variant-numeric: tabular-nums; }
.g-row .part { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--lp-mid); margin-top: 6px; white-space: nowrap; }
.g-row .fig { width: 60px; height: 60px; border-radius: 12px; background: var(--tint, var(--lp-inset)); padding: 8px; }
.g-row .fig svg { width: 100%; height: 100%; }
.g-row .lyr { font-size: 15px; color: var(--lp-mid); line-height: 1.4; }
.g-row .lyr b { font-weight: 700; color: var(--lp-ink); }
.g-row .lyr i { color: var(--lp-mut); }
/* the move is the biggest thing on the row (her note, 2026-10-13: "It shouldn't be in a pill. It should be something larger here.") */
.g-row .n { font-family: var(--fd); font-weight: 800; font-size: 24px; letter-spacing: -.015em; line-height: 1.1; margin-top: 4px; }
.g-row .tempo { font-size: 16px; font-weight: 600; color: var(--lp-ink); margin-top: 4px; }
.g-row .tempo span { color: var(--lp-mid); font-weight: 500; }
.g-row .len { font-size: 14px; color: var(--lp-mid); line-height: 1.4; }
.g-row .len b { display: block; font-weight: 700; color: var(--lp-ink); font-size: 15px; }
.g-row .g-cue { font-size: 15px; color: var(--lp-mid); line-height: 1.5; }
.guide.compact .g-row .g-cue, .guide.compact .g-hd .ch { visibility: hidden; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--lp-ink); color: #fff; border-radius: 999px; padding: 10px 14px 10px 18px; font-size: 14.5px; display: flex; align-items: center; gap: 12px; }
.toast button { color: #fff; font-weight: 700; background: rgba(255,255,255,.14); border-radius: 999px; padding: 4px 12px; }
.toast[hidden] { display: none; }

/* ---------- print: the guide, one section to a page ---------- */
@media print {
  .lp-bar, .cp-head, .g-view, .toast { display: none !important; }
  /* the Guide's scroll box keeps its screen height on paper unless let go:
     only the first page printed (2026-10-18) */
  .scroll:has(> .guide) { height: auto !important; overflow: visible !important; }
  body { font-size: 12pt; }
  .guide { max-width: none; padding: 0; }
  .g-sec { break-before: page; margin-top: 0; }
  .g-sec:first-of-type { break-before: auto; }
  .g-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .g-row .fig { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* narrower desktops: the rail and the cue column give a little */
@media (max-width: 1200px) {
  .plan { grid-template-columns: 220px minmax(0, 1fr); }
  .grid, .cols { grid-template-columns: 96px minmax(0, 1fr) 290px; column-gap: 16px; }
  .sec { padding: 0 20px 26px; }
  .s-song small { max-width: 200px; }
  .selbar, .composer { left: 100px; width: calc(100% - 110px); }
  .g-hd, .g-row { grid-template-columns: 80px 56px minmax(0, 1.2fr) 96px minmax(0, 1fr); gap: 14px; }
}

/* bringing classes in from the Guild */
.page-head .btn + .btn { margin-left: 8px; }
.imp { background: var(--lp-inset); border-radius: 18px; padding: 22px 24px; margin-bottom: 22px; }
.imp h3 { font-family: var(--fd); font-weight: 700; font-size: 19px; margin-bottom: 8px; }
.imp ol { padding-left: 20px; display: grid; gap: 4px; font-size: 15px; color: var(--lp-mid); }
.imp ol b { color: var(--lp-ink); }
.imp textarea { width: 100%; height: 110px; margin-top: 14px; border: 0; background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 14px; outline: none; box-shadow: var(--ring); resize: vertical; }
.imp-note { font-size: 14.5px; color: var(--lp-mid); font-style: italic; margin-top: 8px; }
.imp-foot { display: flex; gap: 8px; margin-top: 12px; }

/* moving a move on the words: its name moves it, its edges stretch it */
.ln { position: relative; }
.mchip[data-mdrag] { cursor: grab; }
.mchip[data-mdrag]:hover { box-shadow: 0 0 0 1px #C9C3BC; }
.grip-start, .grip-end { position: absolute; left: 50%; width: 44px; height: 6px; margin-left: -22px; border-radius: 999px; background: var(--lp-ink); opacity: 0; cursor: ns-resize; }
.grip-start::before, .grip-end::before { content: ""; position: absolute; left: -10px; right: -10px; top: -5px; bottom: -5px; }
.grip-start { top: 2px; }
.grip-end { bottom: 2px; }
.ln.cov:hover .grip-start, .ln.cov:hover .grip-end, .grip-start:focus, .grip-end:focus { opacity: .35; }
.grip-start:hover, .grip-end:hover { opacity: .7 !important; }
.ln.drag, .ln.cov.drag { background: #D6E6F7; }
body.dragging-move, body.dragging-move * { cursor: grabbing !important; }
body.dragging-edge, body.dragging-edge * { cursor: ns-resize !important; }

/* the highlight bar: moves first; the song's parts behind a link */
.selbar .main.first { margin-top: 4px; padding-top: 0; border-top: 0; }
.selbar .foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lp-line); }
.selbar .link { font-size: 14px; font-weight: 600; color: var(--lp-mid); text-decoration: underline; text-underline-offset: 3px; }
.selbar .link:hover { color: var(--lp-ink); }
.fixing-note { display: flex; align-items: center; gap: 14px; margin: 12px 0 2px; background: var(--lp-inset); border-radius: 12px; padding: 10px 14px; font-size: 14.5px; color: var(--lp-mid); }
.fixing-note b { color: var(--lp-ink); }
.fixing-note span { flex: 1; }
button.pn { background: none; border-radius: 6px; padding: 1px 4px; margin-left: -4px; text-decoration: underline; text-decoration-color: var(--lp-line2); text-underline-offset: 3px; }
button.pn:hover { background: var(--lp-inset); }

/* a block by the song: its songs inside it, A, B */
.bysong { font-weight: 700; font-size: 15px; white-space: nowrap; }
.bysong em { font-weight: 500; color: var(--lp-mut); }
.slot { margin-top: 14px; }
.slot + .slot { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--lp-line2); }
.slot-head { display: flex; align-items: center; gap: 12px; }
.slot-head .s-song { margin-left: 0; padding-left: 0; border-left: 0; }
.slot-name { font-family: var(--fd); font-weight: 700; font-size: 17px; white-space: nowrap; padding-right: 12px; border-right: 1px solid var(--lp-line); }
.r-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 4px 10px 4px 38px; border-radius: 10px; cursor: pointer; }
.r-slot:hover { background: var(--lp-inset); }
.r-slot .nm { font-weight: 600; font-size: 14px; }
.r-slot .sub { grid-column: 1; font-size: 13px; color: var(--lp-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-slot .mn { grid-column: 2; grid-row: 1; font-size: 13.5px; color: var(--lp-mid); font-weight: 600; }
.g-song { font-size: 14.5px; color: var(--lp-mid); padding: 14px 18px 0; }
.g-song em { font-style: normal; font-weight: 700; color: var(--lp-ink); }
.g-song b { color: var(--lp-ink); }

/* rename a block from the Plan's left bar */
.r-sec { position: relative; }
.r-pen { position: absolute; right: 54px; top: 50%; margin-top: -13px; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); background: #fff; opacity: 0; box-shadow: var(--ring); }
.r-pen svg { width: 13px; height: 13px; }
.r-sec:hover .r-pen, .r-pen:focus-visible { opacity: 1; }
.r-pen:hover { color: var(--lp-ink); }
.r-name { width: 100%; font: inherit; font-weight: 700; font-size: 15px; border: 0; outline: none; background: #fff; border-radius: 6px; padding: 1px 4px; margin-left: -4px; box-shadow: var(--focus); }

/* phases inside a block, and songs A, B: indented under the block */
.slot, .phase { margin-left: 26px; }
.phase { margin-top: 16px; }
.ph-head { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--lp-line); }
.ph-name { font-family: var(--fd); font-weight: 700; font-size: 17px; border: 0; outline: none; background: none; padding: 2px 6px; margin-left: -6px; border-radius: 8px; min-width: 60px; }
.ph-name:hover { background: var(--lp-inset); }
.g-phase, .guide .g-song { padding-left: 42px; }
.g-sec .g-hd, .g-sec .g-row { margin-left: 0; }
.r-slot { padding-left: 46px; }

/* Cues off: the move, large, beside its words */
.cols2 { display: grid; grid-template-columns: 250px 74px minmax(0, 1fr); column-gap: 12px; font-size: 13px; color: var(--lp-mut); padding: 12px 0 6px; }
.grid.big { grid-template-columns: 250px 74px minmax(0, 1fr); column-gap: 12px; }
.grid.big .selbar, .grid.big .composer { left: 340px; width: min(600px, calc(100% - 350px)); }
.mv2 { background: var(--tint); border-radius: 12px; margin: 3px 0; padding: 12px 14px; cursor: grab; }
.mv2 .in { position: sticky; top: 78px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; align-items: start; }
.mv2 .bf { width: 44px; height: 44px; border-radius: 10px; background: #fff; padding: 5px; grid-row: 1 / span 2; }
.mv2 .bf svg { width: 100%; height: 100%; }
.mv2 .bn { font-family: var(--fd); font-weight: 800; font-size: 25px; letter-spacing: -.02em; line-height: 1.05; }
.mv2 .bt { font-size: 14.5px; font-weight: 600; color: var(--lp-mid); margin-top: 4px; line-height: 1.35; }
.b2-gut { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; padding: 6px 2px; }
.b2-gut .e { font-family: var(--fd); font-weight: 800; font-size: 18px; color: var(--pink-deep); line-height: 1.4; }
.b2-gut .t { font-size: 14px; color: var(--lp-mut); font-variant-numeric: tabular-nums; }
.b2-pt { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; padding: 14px 0 2px; }
.b2-pt span { font-weight: 500; color: var(--lp-mut); }
.grid.big .ln { font-size: 18px; }

/* the Blocks step */
.bk-page { max-width: 980px; margin: 0 auto; padding: 24px 32px 60px; }
.bk-top { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.bk-bar { flex: 1; }
.bk-bar .wbar { height: 12px; }
.bk-bar p { font-size: 14px; color: var(--lp-mid); margin-top: 8px; }
.bk-bar p b { color: var(--lp-ink); }
.bk-list { border-top: 1px solid var(--lp-line); }
.bl-row { display: grid; grid-template-columns: 16px 22px minmax(0, 1fr) auto 40px; gap: 12px; align-items: start; padding: 14px 8px; border-bottom: 1px solid var(--lp-line); border-radius: 10px; }
.bl-row .grip { width: 16px; height: 16px; color: var(--lp-mut); margin-top: 8px; cursor: grab; }
.bl-row .dotbtn { margin-top: 5px; }
.bl-row.drop, .r-sec.drop { box-shadow: inset 0 3px 0 -1px var(--lp-ink); }
.dotbtn { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dotbtn:hover { background: var(--lp-inset); }
.dotbtn .dot { width: 12px; height: 12px; }
.bl-name { font-family: var(--fd); font-weight: 800; font-size: 20px; letter-spacing: -.01em; border: 0; outline: none; background: none; padding: 2px 6px; margin-left: -6px; border-radius: 8px; width: 100%; }
.bl-name:hover { background: var(--lp-inset); }
.bl-phases { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bk-ph { display: inline-flex; align-items: center; gap: 4px; background: var(--ct); border-radius: 999px; padding: 2px 4px 2px 6px; }
.bk-ph .ph-name { font-family: var(--fu); font-weight: 600; font-size: 14px; padding: 2px 4px; min-width: 0; }
.bk-ph .mins { background: #fff; }
.bk-ph .mins button { width: 22px; height: 22px; font-size: 13px; }
.bk-ph .mins input { width: 26px; font-size: 13.5px; }
.bk-ph .mins span { font-size: 13.5px; }
.bk-ph.song { padding: 5px 12px; font-size: 14px; font-weight: 600; }
.bk-ph.song em { font-style: normal; color: var(--lp-mid); font-weight: 500; }
.ph-x { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); }
.ph-x:hover { background: #fff; color: var(--lp-ink); }
.ph-x svg { width: 12px; height: 12px; }
.bk-addph { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--lp-mid); padding: 4px 8px; border-radius: 999px; }
.bk-addph:hover { background: var(--lp-inset); color: var(--lp-ink); }
.bk-addph svg { width: 13px; height: 13px; }
.bl-time { padding-top: 4px; }
.tl { display: grid; gap: 6px; }
.tl-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; }
.tl-clock { font-size: 13.5px; color: var(--lp-mut); font-variant-numeric: tabular-nums; padding-top: 12px; text-align: right; }
.tl-band { background: var(--ct); border-radius: 14px; padding: 10px 14px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.tl-head { display: flex; align-items: center; gap: 10px; }
.tl-head .bl-name { width: auto; flex: 1; }
.tl-head .sp { flex: 0; }
.tl-head .mins { background: #fff; }
.tl-stripes { display: flex; flex-direction: column; gap: 4px; flex: 1; margin-left: 32px; }
.tl-st { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.7); border-radius: 9px; padding: 4px 10px; min-height: 34px; font-size: 14.5px; }
.tl-st span { flex: 1; }
.tl-st em { font-style: normal; color: var(--lp-mid); font-weight: 600; }
.tl-st .ph-name { font-family: var(--fu); font-weight: 600; font-size: 14.5px; flex: 1; }
.tl-st .mins { background: #fff; }
.tl-band .bk-addph { align-self: flex-start; margin-left: 28px; }
.tl-end { font-size: 14.5px; color: var(--lp-mid); padding-top: 10px; font-style: italic; }

/* templates */
.tpl-save { background: var(--lp-inset); border-radius: 18px; padding: 20px 22px; margin-bottom: 20px; }
.tpl-save h3, .nc h3 { font-family: var(--fd); font-weight: 700; font-size: 19px; }
.tpl-save .lead, .nc .lead { font-size: 14.5px; color: var(--lp-mid); }
.tpl-save label, .nc label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
.tpl-save input, .nc input { width: 100%; max-width: 420px; border: 0; background: #fff; border-radius: 12px; padding: 9px 14px; font-size: 15px; outline: none; box-shadow: var(--ring); }
.tpl-save .opts { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tpl-save .tp-rep { margin: 10px 0 0; }
.tpl-save .opts button { font-weight: 600; font-size: 14px; background: #fff; border-radius: 999px; padding: 6px 14px; box-shadow: var(--ring); }
.tpl-save .opts button.on { background: var(--lp-ink); color: #fff; box-shadow: none; }
.tpl-save .keeps { font-size: 14.5px; color: var(--lp-mid); margin-bottom: 8px; }
.tpl-save .foot { display: flex; gap: 8px; margin-top: 16px; }
.tpl-studio { font-family: var(--fd); font-weight: 700; font-size: 22px; margin: 26px 0 12px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tpl-card { background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 0 0 1px var(--lp-line2); }
.tpl-card[data-act] { cursor: pointer; }
.tpl-card.on { background: var(--pink-t); box-shadow: none; }
.tpl-top .tpl-tick { flex: none; align-self: center; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--lp-line2); color: transparent; transition: background-color .15s ease-out, color .15s ease-out; }
.tpl-tick svg { width: 14px; height: 14px; }
.tpl-card.on .tpl-top .tpl-tick { background: var(--lp-ink); color: #fff; box-shadow: none; }
.tpl-card[data-act]:focus-visible { outline: none; box-shadow: var(--focus); }
@media (prefers-reduced-motion: reduce) { .tpl-tick { transition: none; } }
.tpl-top { display: flex; align-items: baseline; gap: 10px; }
.tpl-top b { font-family: var(--fd); font-weight: 700; font-size: 17px; flex: 1; }
.tpl-top span { font-weight: 600; font-size: 14px; color: var(--lp-mid); }
.tpl-card ul { list-style: none; display: grid; gap: 5px; }
.tpl-card li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 14px; }
.tpl-card li em { font-style: normal; color: var(--lp-mut); font-size: 13px; display: block; }
.tpl-card li .m { color: var(--lp-mid); font-weight: 600; }
.tpl-act { display: flex; gap: 6px; margin-top: 12px; }
.nc .tpl-grid { margin-top: 4px; align-items: start; }
.nc .tpl-card.blank .lead { margin-top: 6px; }

/* pasting moves */
.c-tabs { margin: 2px 0 6px; }
.composer textarea#c-paste { min-height: 120px; }
.pr-rows { display: grid; gap: 2px; margin-top: 8px; max-height: 340px; overflow-y: auto; }
.pr-row { display: grid; grid-template-columns: 26px 40px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 6px; border-radius: 10px; }
.pr-row:hover { background: var(--lp-inset); }
.pr-row.off { opacity: .55; }
.pr-tick { width: 22px; height: 22px; border-radius: 6px; background: var(--lp-line2); color: #fff; display: flex; align-items: center; justify-content: center; margin-top: 8px; }
.pr-tick.on { background: var(--lp-ink); }
.pr-tick svg { width: 14px; height: 14px; }
.pr-row .f { width: 40px; height: 40px; border-radius: 9px; background: var(--lp-inset); padding: 5px; }
.pr-row .f svg { width: 100%; height: 100%; }
.pr-main b { display: block; font-size: 15.5px; }
.pr-main span { display: block; font-size: 14px; color: var(--lp-mid); }
.pr-main small { display: block; font-size: 13px; color: var(--lp-mut); font-style: italic; margin-top: 2px; }
.pr-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.pr-opts button { font-weight: 600; font-size: 13px; background: var(--lp-inset); border-radius: 999px; padding: 3px 10px; }
.pr-opts button.on { background: var(--lp-ink); color: #fff; }

/* the part's own heading row, so lyric rows stay even */
.pt-row { grid-column: 1 / 3; display: flex; align-items: baseline; gap: 10px; padding: 12px 0 4px; }
.pt-row.sepd { border-top: 1px solid var(--lp-line); margin-top: 6px; }
.pt-row .pn { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.pt-row .pe { font-size: 13px; color: var(--lp-mut); }
.grid .gut { padding: 6px 0; }
.grid .ln.cov.rs { margin-top: 2px; }
.grid .ln.cov.re { margin-bottom: 2px; }

/* a move's lines together in one cell; extra room under them, not between */
.grp { grid-column: 1 / 3; position: relative; display: flex; flex-direction: column; padding: 1px 0; }
.grp.run { padding: 3px 0; }
.lrow { display: grid; grid-template-columns: 118px minmax(0, 1fr); column-gap: 22px; align-items: baseline; position: relative; z-index: 1; }
.lrow .t { font-size: 13px; color: var(--lp-mut); font-variant-numeric: tabular-nums; padding-top: 7px; }
.run-bg { position: absolute; left: 140px; right: 0; top: 0; bottom: 0; background: var(--tint); z-index: 0; }
.run-bg.top { border-top-left-radius: 8px; border-top-right-radius: 8px; top: 3px; }
.run-bg.bot { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; bottom: 3px; }
.ln.on-run { background: transparent; }
.ln.on-run:hover { background: rgba(255,255,255,.35); }
.ln.on-run.sel, .ln.on-run.drag { background: #D6E6F7; }
.grp .grip-end { position: absolute; left: calc(140px + (100% - 140px) / 2); bottom: 5px; margin-left: -22px; z-index: 2; }
.grp.run:hover .grip-end, .grp.run:hover .grip-start, .ln.on-run:hover .grip-start { opacity: .35; }
@media (max-width: 1200px) {
  .lrow { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; }
  .run-bg { left: 112px; }
  .grp .grip-end { left: calc(112px + (100% - 112px) / 2); }
}

/* the library on the right of Blocks and Plan */
.plan.with-lib { grid-template-columns: 270px minmax(0, 1fr) 340px; }
.bk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.libpanel { border-left: 1px solid var(--lp-line); background: #fff; display: flex; flex-direction: column; height: calc(100vh - var(--barH, 60px) - var(--headH, 69px)); padding: 14px 14px 0; min-width: 0; }
.plan .libpanel { height: 100%; }
.lib-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lib-head b { font-family: var(--fd); font-weight: 700; font-size: 18px; }
.lib-head .sp { flex: 1; }
.lib-head .x { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); }
.lib-head .x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.lib-head .x svg { width: 15px; height: 15px; }
.lib-q { display: flex; align-items: center; gap: 8px; background: var(--lp-inset); border-radius: 999px; padding: 8px 14px; }
.lib-q svg { width: 15px; height: 15px; color: var(--lp-mut); flex: none; }
.lib-q input { border: 0; background: none; outline: none; font-size: 15px; flex: 1; min-width: 0; }
.lib-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 6px; }
.lib-chips button { font-weight: 600; font-size: 13.5px; background: var(--lp-inset); border-radius: 999px; padding: 4px 11px; }
.lib-chips button.on { background: var(--lp-ink); color: #fff; }
.lib-where { font-size: 13.5px; color: var(--lp-mut); margin: 2px 2px 8px; line-height: 1.4; }
.lib-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; padding-bottom: 20px; }
.lib-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; background: var(--lp-inset); border-radius: 12px; padding: 8px 6px 9px; cursor: grab; }
.lib-card:hover { background: #EDEDEA; }
.lib-card .f { width: 46px; height: 46px; }
.lib-card .f svg { width: 100%; height: 100%; }
.lib-card .nm { font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.lib-card .nm small { display: block; font-weight: 500; font-size: 12.5px; color: var(--lp-mut); margin-top: 2px; }
.lib-add { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; box-shadow: var(--ring); }
.lib-card:hover .lib-add, .lib-add:focus-visible { opacity: 1; }
.lib-add svg { width: 12px; height: 12px; }
.lib-none { grid-column: 1 / -1; font-size: 14px; color: var(--lp-mut); padding: 10px 4px; }
.drop-on { box-shadow: inset 0 0 0 2px var(--lp-ink) !important; }
.ln.drop-on { background: #D6E6F7 !important; box-shadow: none !important; }
/* a Library move over a placed card: the card fills, no outline (2026-10-29) */
.mv2.drop-on { background: var(--pink-t) !important; box-shadow: none !important; }
.fm[draggable] { cursor: grab; }

/* a block's moves on the Blocks step */
.bk-moves { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; min-height: 30px; border-radius: 10px; }
.bk-mv { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 2px 4px 2px 4px; font-weight: 600; font-size: 13.5px; box-shadow: var(--ring); cursor: grab; }
.bk-mv .f { width: 22px; height: 22px; }
.bk-mv .f svg { width: 100%; height: 100%; }
.bk-mv em { font-style: normal; font-weight: 500; color: var(--lp-mut); }
.bk-onsong { font-size: 13.5px; color: var(--lp-mid); font-weight: 600; padding: 0 6px; }
.bk-hint { font-size: 13.5px; color: var(--lp-mut); }
.bl-row .bk-mv, .bl-row .bk-onsong { background: var(--lp-inset); box-shadow: none; }
.tl-band .bk-moves { margin-left: 28px; }

/* the highlight bar: the block's own moves first */
.sel-lead { font-size: 14px; font-weight: 600; margin: 2px 0 8px; }
.sel-lead em { font-weight: 500; color: var(--lp-mut); }
.sel-moves { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.sel-mv { display: flex; align-items: center; gap: 8px; text-align: left; background: var(--lp-inset); border-radius: 12px; padding: 6px 10px 6px 6px; }
.sel-mv:hover { background: #EDEDEA; }
.sel-mv .f { width: 34px; height: 34px; background: #fff; border-radius: 8px; padding: 3px; flex: none; }
.sel-mv .f svg { width: 100%; height: 100%; }
.sel-mv b { display: block; font-size: 14px; line-height: 1.2; }
.sel-mv small { display: block; font-size: 12.5px; color: var(--lp-mid); }
.selbar .main.first { margin-top: 12px; }

/* Sketch: the class as a doc */
.sk-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 6px; padding: 8px 24px; background: #fff; border-bottom: 1px solid var(--lp-line); }
.sk-bar .sp { flex: 1; }
.sk-page { max-width: 780px; margin: 30px auto 80px; padding: 48px 64px 60px; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px var(--lp-line2); }
.sk-title { font-family: var(--fd); font-weight: 800; font-size: 32px; letter-spacing: -.02em; line-height: 1.1; }
.sk-meta { font-size: 15px; color: var(--lp-mid); margin: 6px 0 22px; }
.sk-block { margin-top: 26px; border-radius: 10px; }
.sk-h { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--lp-line); margin-bottom: 6px; }
.sk-h .dot { width: 12px; height: 12px; }
.sk-bname { font-family: var(--fd); font-weight: 800; font-size: 22px; letter-spacing: -.01em; border: 0; outline: none; background: none; flex: 1; padding: 2px 6px; margin-left: -6px; border-radius: 8px; }
.sk-bname:hover { background: var(--lp-inset); }
.sk-time { font-weight: 600; font-size: 14.5px; color: var(--lp-mid); white-space: nowrap; }
.sk-ph { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 2px 26px; }
.sk-ph .ph-name { font-size: 16px; }
.sk-ph span { font-size: 14px; color: var(--lp-mut); }
.sk-line { position: relative; display: grid; grid-template-columns: 20px 40px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 4px 0; border-radius: 8px; }
.sk-line.note { grid-template-columns: 20px minmax(0, 1fr) auto; }
.sk-line:hover { background: #FAFAF9; }
.sk-grip { width: 20px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); opacity: 0; cursor: grab; margin-top: 4px; }
.sk-grip svg { width: 13px; height: 13px; }
.sk-grip.off { cursor: default; }
.sk-line:hover .sk-grip:not(.off) { opacity: 1; }
.sk-line .f { width: 40px; height: 40px; border-radius: 9px; background: var(--ct, var(--lp-inset)); padding: 5px; }
.sk-line .f svg { width: 100%; height: 100%; }
.sk-body { min-width: 0; }
.sk-text, .sk-cue { width: 100%; border: 0; outline: none; resize: none; background: none; font-size: 16.5px; line-height: 1.55; padding: 4px 6px; margin-left: -6px; border-radius: 6px; overflow: hidden; color: var(--lp-ink); }
.sk-cue { font-size: 15px; color: var(--lp-mid); padding-top: 0; }
.sk-text:focus, .sk-cue:focus { background: var(--lp-inset); }
.sk-line.self { background: var(--marigold-t); }
.sk-selflab { display: block; font-size: 12.5px; font-weight: 600; font-style: italic; color: var(--marigold-deep); padding: 4px 0 0; }
.sk-mrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sk-mname { font-weight: 700; font-size: 17px; border: 0; outline: none; background: none; padding: 2px 6px; margin-left: -6px; border-radius: 6px; min-width: 120px; flex: 1; }
.sk-mname:hover, .sk-reps:hover { background: var(--lp-inset); }
.sk-how { font-weight: 600; font-size: 14px; background: var(--ct, var(--lp-inset)); border-radius: 999px; padding: 3px 11px; }
.sk-reps { width: 120px; border: 0; outline: none; background: none; font-size: 14.5px; color: var(--lp-mid); padding: 2px 6px; border-radius: 6px; }
.sk-at { display: block; font-size: 13.5px; color: var(--lp-mut); margin-top: 2px; }
.sk-tools { display: flex; gap: 4px; opacity: 0; padding-top: 4px; }
.sk-line:hover .sk-tools, .sk-line:focus-within .sk-tools { opacity: 1; }
.sk-tools button { font-size: 12.5px; font-weight: 600; color: var(--lp-mut); padding: 3px 8px; border-radius: 999px; }
.sk-tools button:hover { background: var(--lp-inset); color: var(--lp-ink); }
.sk-x { width: 26px; height: 26px; padding: 0 !important; display: flex; align-items: center; justify-content: center; }
.sk-x svg { width: 12px; height: 12px; }
.sk-sug { display: inline-block; font-size: 13.5px; color: var(--lp-mid); background: var(--lp-inset); border-radius: 999px; padding: 3px 12px; margin: 2px 0 4px; }
.sk-sug:hover { background: var(--pink-t); color: var(--lp-ink); }
.sk-new { position: relative; padding-left: 28px; }
.sk-new .sk-text { color: var(--lp-ink); }
.sk-new .sk-text::placeholder { color: var(--lp-mut); font-style: italic; }
.sk-pick { position: relative; z-index: 15; width: 420px; background: #fff; border-radius: 14px; padding: 10px; margin: 4px 0 8px 28px; box-shadow: 0 0 0 1px var(--lp-line2); }
.sk-picks { display: grid; gap: 2px; margin-top: 8px; max-height: 300px; overflow-y: auto; }
.sk-pick .sug { display: flex; align-items: center; gap: 10px; text-align: left; padding: 6px 8px; border-radius: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.sk-pick .sug:hover, .sk-pick .sug.on { background: var(--lp-inset); }
.sk-pick .sug .f { width: 32px; height: 32px; border-radius: 8px; background: var(--lp-inset); padding: 4px; flex: none; }
.sk-pick .sug .f svg { width: 100%; height: 100%; }
.sk-pick .sug small { display: block; font-weight: 500; font-size: 12.5px; color: var(--lp-mut); text-transform: capitalize; }
.sk-song { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px 26px; font-size: 14.5px; color: var(--lp-mid); }
.sk-song svg { width: 15px; height: 15px; color: var(--cd); }
.sk-song b { color: var(--lp-ink); }
.sk-song ~ .sk-line { margin-left: 26px; }
.sk-copy { margin: 16px auto 0; max-width: 780px; }
.sk-cp { margin-top: 10px; }
.sk-cp b { font-size: 15px; }
.sk-cpb { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sk-cpb .opt { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; background: #fff; border-radius: 999px; padding: 5px 12px; box-shadow: var(--ring); }
.sk-cpb .opt .dot { width: 9px; height: 9px; }
.sk-line.drop-on, .sk-block.drop-on { box-shadow: inset 0 3px 0 -1px var(--lp-ink) !important; }
@media print {
  body.printing-sketch .sk-bar, body.printing-sketch .libpanel, body.printing-sketch .r-add, body.printing-sketch .sk-new, body.printing-sketch .sk-tools, body.printing-sketch .sk-grip, body.printing-sketch .sk-sug, body.printing-sketch .sk-pick { display: none !important; }
  body.printing-sketch .scroll { height: auto !important; overflow: visible !important; }
  body.printing-sketch .sk-page { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  body.printing-sketch:not(.print-self) .sk-line.self { display: none; }
  body.printing-sketch .sk-line.self, body.printing-sketch .sk-line .f { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing-sketch .bk-wrap { display: block; }
}

/* the paste review: rewrite a line, or add it to your library */
.pr-edit { width: 100%; font: inherit; font-weight: 700; font-size: 15.5px; border: 0; outline: none; background: #fff; border-radius: 8px; padding: 4px 8px; margin-left: -8px; box-shadow: var(--ring); }
.pr-opts .mylib { display: inline-flex; align-items: center; gap: 5px; background: #fff; box-shadow: var(--ring); }
.pr-opts .mylib svg { width: 11px; height: 11px; }

/* combos: two moves done as one */
.pr-combo { font-size: 13.5px; font-weight: 700; margin: 10px 0 0 6px; }
.pr-combo em { font-weight: 500; color: var(--lp-mut); }
.pr-then { display: block; font-size: 12.5px; font-weight: 600; font-style: italic; color: var(--lp-mut); }
.combo-tag { display: inline-block; font-size: 12px; font-weight: 700; background: var(--lilac-t); color: var(--lilac-deep); border-radius: 999px; padding: 1px 8px; margin-right: 4px; vertical-align: middle; }

/* the paste review: what's in the library, what's new, and changing the extras */
.pr-st { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; margin-bottom: 3px; }
.pr-st.lib { background: var(--teal-t); color: var(--teal-deep); }
.pr-st.new { background: var(--marigold-t); color: var(--marigold-deep); }
.pr-how { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lp-mid); padding: 2px 8px; margin: 2px 0 0 -8px; border-radius: 8px; text-align: left; }
.pr-how:hover { background: #fff; color: var(--lp-ink); }
.pr-how .ed { font-size: 12.5px; font-weight: 600; color: var(--lp-mut); text-decoration: underline; text-underline-offset: 2px; }
.pr-hed { background: #fff; border-radius: 12px; padding: 8px 10px; margin: 6px 0; box-shadow: var(--ring); }
.pr-hed .row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 4px 0; }
.pr-hed .row > span { font-size: 13px; font-weight: 600; min-width: 64px; }
.pr-hed button { font-weight: 600; font-size: 13px; background: var(--lp-inset); border-radius: 999px; padding: 3px 10px; }
.pr-hed button.on { background: var(--lp-ink); color: #fff; }
.pr-hed button.done { background: var(--lp-ink); color: #fff; margin-left: auto; }
.pr-hed input { border: 0; background: var(--lp-inset); border-radius: 8px; padding: 4px 10px; font-size: 14px; outline: none; width: 200px; }
.pr-figbtn { border-radius: 9px; background: #fff !important; box-shadow: var(--ring); cursor: pointer; }
.pr-figbtn:hover { box-shadow: 0 0 0 1px var(--lp-line2); }
.pr-figs { display: grid; grid-template-columns: repeat(10, 34px); gap: 4px; background: #fff; border-radius: 12px; padding: 8px; margin: 6px 0; box-shadow: var(--ring); }
.pr-figs button { width: 34px; height: 34px; border-radius: 8px; padding: 3px; }
.pr-figs button:hover { background: var(--lp-inset); }
.pr-figs button.on { background: var(--lp-inset); box-shadow: inset 0 0 0 1.5px var(--lp-ink); }
.pr-figs svg { width: 100%; height: 100%; }
.pr-dym { display: block; font-size: 12.5px; font-weight: 600; color: var(--lp-mut); margin-top: 6px; }

/* the library scrolls inside itself; it never stretches the page */
.plan { grid-template-rows: minmax(0, 1fr); }
.plan > * { min-height: 0; }
.libpanel { overflow: hidden; min-height: 0; }
.lib-grid { min-height: 0; }
.bk-wrap { height: calc(100vh - var(--barH, 60px) - var(--headH, 69px)); grid-template-rows: minmax(0, 1fr); }
.bk-wrap > * { min-height: 0; }

/* a combo in the composer */
.c-steps { margin-top: 12px; }
.c-combo { font-size: 14px; font-weight: 700; }
.c-combo em { font-weight: 500; color: var(--lp-mut); }
.c-step { display: grid; grid-template-columns: 34px 34px minmax(0, 1fr) 170px 28px; gap: 8px; align-items: center; margin-top: 6px; }
.c-step .pr-then { display: inline; }
.c-step .f { width: 34px; height: 34px; border-radius: 8px; background: var(--lp-inset); padding: 4px; }
.c-step .f svg { width: 100%; height: 100%; }
.c-step input, .c-step select { border: 0; background: var(--lp-inset); border-radius: 10px; padding: 8px 12px; font-size: 15px; outline: none; font-family: inherit; }

/* combos from the highlight bar */
.sel-mv { position: relative; }
.sel-mv.combo { background: var(--lilac-t); }
.sel-mv.combo:hover { background: #EFE2F3; }
.sel-mv .ct { display: block; font-size: 11.5px; font-weight: 700; color: var(--lilac-deep); }
.sel-mv.picked { background: var(--lp-ink); color: #fff; }
.sel-mv.picked small { color: #E8E4DF; }
.sel-mv .pk { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--pink); color: var(--lp-ink); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.selbar .main.first { flex-wrap: wrap; }

.sel-mv.picked .f { color: var(--lp-ink); }

.sel-mv.here { background: var(--lilac-t); }
.sel-mv.here.picked { background: var(--lp-ink); }
.sel-mv.picked .ct { color: #F0D9F7; }

/* the tempo and the side as tags */
.tgs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.tg { display: inline-block; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; line-height: 1.5; white-space: nowrap; }
.tg.pulse { background: var(--pink-t); color: var(--pink-deep); }
.tg.hold { background: var(--teal-t); color: var(--teal-deep); }
.tg.tempo { background: var(--lp-inset); color: var(--lp-ink); }
.tg.side { background: var(--blue-t); color: var(--blue-deep); }
.tg.then { background: none; color: var(--lp-mut); font-style: italic; font-weight: 600; padding: 1px 2px; }
.mchip { max-width: 100%; flex-wrap: wrap; row-gap: 3px; cursor: pointer; }
.mchip .combo-tag { margin: 0 2px 0 0; }
.mv2 .bt .tgs { margin-left: 0; margin-top: 4px; }
.ln.cov, .ln.on-run { cursor: pointer; }

/* the move editor, where the move is */
.medit { position: absolute; z-index: 22; left: 140px; width: min(600px, calc(100% - 160px)); background: #fff; border-radius: 16px; padding: 14px 16px 16px; box-shadow: 0 0 0 1px var(--lp-line2); }
.grid.big .medit { left: 340px; width: min(600px, calc(100% - 350px)); }
.medit .h { display: flex; align-items: center; gap: 10px; }
.medit .h .f { width: 40px; height: 40px; border-radius: 9px; background: var(--lp-inset); padding: 5px; flex: none; }
.medit .h .f svg { width: 100%; height: 100%; }
.me-name { flex: 1; font-family: var(--fd); font-weight: 800; font-size: 19px; border: 0; outline: none; background: none; padding: 3px 6px; border-radius: 8px; }
.me-name:hover, .me-name:focus { background: var(--lp-inset); }
.medit .x { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); }
.medit .x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.medit .x svg { width: 15px; height: 15px; }
.me-lab { font-size: 13.5px; font-weight: 600; margin: 12px 0 6px; }
.medit .row { display: flex; flex-wrap: wrap; gap: 5px; }
.medit .row button { font-weight: 600; font-size: 13.5px; background: var(--lp-inset); border-radius: 999px; padding: 5px 12px; }
.medit .row button.on { background: var(--lp-ink); color: #fff; }
.me-part { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lp-line); display: grid; gap: 5px; }
.me-part b { font-size: 14.5px; }
.me-reps { width: 260px; border: 0; background: var(--lp-inset); border-radius: 10px; padding: 8px 12px; font-size: 15px; outline: none; }
.medit textarea { width: 100%; border: 0; background: var(--lp-inset); border-radius: 10px; padding: 8px 12px; font-size: 15px; line-height: 1.5; outline: none; resize: vertical; font-family: inherit; }
.medit .foot { display: flex; gap: 8px; margin-top: 14px; }

/* even spacing: the label on its own row, times level with their words, the cue card in two columns */
.lrow { align-items: baseline; }
.lrow .t { padding-top: 0; margin-top: 0; font-size: 13px; }
.chiprow { align-items: start; }
.chiprow { padding-top: 6px; }
.chipcell .mchip { margin: 0 0 0 10px; }
.grp .ln { margin: 0; }
.cue { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; }
.cue .f { grid-row: auto; align-self: start; }
.cue .cm { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cue .cm .combo-tag { align-self: flex-start; }
.cue .cm input.mname { margin-left: -4px; }

/* the words never get squeezed out: the cue column gives way first */
.grid, .cols { grid-template-columns: 96px minmax(220px, 1fr) minmax(220px, 340px); }
.lrow { grid-template-columns: 96px minmax(0, 1fr); column-gap: 22px; }
.run-bg { left: 118px; }
.grp .grip-end { left: calc(118px + (100% - 118px) / 2); }
.selbar, .composer, .medit { left: 118px; width: min(600px, calc(100% - 128px)); }
@media (max-width: 1400px) { .plan.with-lib { grid-template-columns: 220px minmax(0, 1fr) 290px; } .bk-wrap { grid-template-columns: minmax(0, 1fr) 290px; } }

.selbar .foot { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* repeat an earlier part, or copy one move */
.sel-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.sel-parts .opt { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; background: var(--lp-inset); border-radius: 999px; padding: 5px 12px; }
.sel-parts .opt:hover { background: #EDEDEA; }
.sel-parts .opt em { font-style: normal; font-weight: 500; color: var(--lp-mut); }
.sel-sub { font-size: 13px; font-weight: 600; color: var(--lp-mid); margin: 10px 0 6px; }
.selbar { max-height: 60vh; overflow-y: auto; }

.tempo-note { margin: 10px 0 0 0; }

.sel-count { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding: 10px 12px; background: var(--lp-inset); border-radius: 12px; }
.sel-count span { font-size: 13.5px; font-weight: 600; margin-right: 4px; }
.sel-count .opt { font-weight: 600; font-size: 13.5px; background: #fff; border-radius: 999px; padding: 5px 12px; box-shadow: var(--ring); }

/* the count on each line, set by her */
.cnt { font-family: var(--fd); font-weight: 800; font-size: 17px; color: var(--pink-deep); min-width: 22px; height: 24px; border-radius: 6px; padding: 0 4px; line-height: 24px; }
.cnt:hover, .cnt.on { background: var(--pink-t); }
.cnt.guess { color: var(--lp-mut); font-weight: 700; }
.lrow .t .cnt { font-size: 14px; height: 20px; line-height: 20px; min-width: 18px; margin-right: 6px; }
.lrow .t { white-space: nowrap; position: relative; }
.b2-gut { position: relative; }
.cnt-pick { position: absolute; z-index: 25; left: 0; top: 100%; display: flex; gap: 4px; background: #fff; border-radius: 12px; padding: 6px; box-shadow: 0 0 0 1px var(--lp-line2); white-space: nowrap; }
.cnt-pick button { font-family: var(--fd); font-weight: 800; font-size: 15px; min-width: 32px; height: 32px; border-radius: 8px; background: var(--lp-inset); color: var(--lp-ink); }
.cnt-pick button.wide { font-family: var(--fu); font-weight: 600; font-size: 13px; padding: 0 10px; }
.cnt-pick button.on { background: var(--lp-ink); color: #fff; }
.cnt-pick button:hover { background: var(--pink-t); }

/* Sketch: names never cut off, combos show their parts, lines can be chosen */
.sk-nrow { display: flex; align-items: flex-start; gap: 8px; }
.sk-nrow .combo-tag { margin-top: 6px; }
textarea.sk-mname { flex: 1; resize: none; overflow: hidden; font-family: inherit; font-weight: 700; font-size: 17px; line-height: 1.35; border: 0; outline: none; background: none; padding: 2px 6px; margin-left: -6px; border-radius: 6px; min-width: 0; }
.sk-mrow { margin-top: 2px; }
.sk-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sk-part { display: inline-flex; align-items: center; gap: 6px; }
.sk-part .then { font-size: 13px; font-style: italic; font-weight: 600; color: var(--lp-mut); }
.sk-part .sk-how b { font-weight: 700; }
.sk-line.chosen { background: #D6E6F7 !important; }
.sk-line.chosen .sk-grip { opacity: 1; color: var(--lp-ink); }
.sk-tip { font-size: 13px; color: var(--lp-mut); font-style: italic; margin-left: 8px; }
.sk-bar .btn svg { width: 14px; height: 14px; }
.sk-selbar { position: sticky; top: 45px; z-index: 11; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px auto 0; max-width: 780px; background: #fff; border-radius: 14px; padding: 8px 12px; box-shadow: 0 0 0 1px var(--lp-line2); }
.sk-selbar b { font-size: 14px; margin-right: 6px; }
.sk-openlib { background: var(--lp-inset) !important; margin-bottom: 4px; }
.sk-openlib .f { display: flex; align-items: center; justify-content: center; }
.sk-openlib .f svg { width: 16px; height: 16px; }

/* ---------- options under a move: Easier, Harder, If ----------
   Study 01 of studies/sketch-helpers-studies.html, "Options, folded under
   the move". Grey fills only; the pink ring is focus. */
.opts { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.opt-box { align-self: stretch; }
.opt-fold { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 8px; text-align: left; font-size: 13.5px; line-height: 1.35; color: var(--lp-mid); padding: 3px 11px 3px 7px; border-radius: 999px; background: var(--lp-inset); }
.opt-fold:hover { background: var(--lp-line); color: var(--lp-ink); }
.opt-fold svg { width: 12px; height: 12px; flex: none; color: var(--lp-ink); }
.opt-fold b { color: var(--lp-ink); font-weight: 700; margin-right: 2px; }
.opt-sum:empty { display: none; }
.opt-box { margin-top: 8px; background: var(--lp-inset); border-radius: 12px; padding: 6px 14px 10px; }
.opt-r { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: start; padding: 7px 0; }
.opt-r + .opt-r { border-top: 1px solid var(--lp-line2); }
.opt-l { font-weight: 700; font-size: 13.5px; line-height: 21px; padding-top: 2px; color: var(--lp-ink); }
.opts textarea.opt-t, .opts textarea.opt-l { display: block; width: 100%; min-height: 0; margin: 0 0 0 -6px; padding: 2px 6px; border: 0; border-radius: 6px; outline: none; resize: none; overflow: hidden; background: none; font-family: inherit; color: var(--lp-ink); }
.opts textarea.opt-t { font-size: 14.5px; line-height: 21px; font-weight: 400; }
.opts textarea.opt-l { font-size: 13.5px; line-height: 21px; font-weight: 700; width: calc(100% + 6px); }
.opt-if { display: flex; align-items: flex-start; gap: 0; min-width: 0; }
.opt-if > .opt-l { flex: none; }
.opts .opt-if > textarea.opt-l { flex: 1; min-width: 0; width: auto; margin-left: 0; padding-left: 4px; }
.opts textarea.opt-t:placeholder-shown, .opts textarea.opt-l:placeholder-shown { background: #fff; }
.opts textarea.opt-t:hover, .opts textarea.opt-l:hover { background: #fff; color: var(--lp-ink); }
.opts textarea.opt-t:focus, .opts textarea.opt-l:focus { background: #fff; color: var(--lp-ink); box-shadow: var(--focus); }
.opt-more { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding-top: 6px; }
.opt-more button { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 13px; color: var(--lp-ink); padding: 3px 8px; margin-left: -8px; border-radius: 999px; }
.opt-more button:hover { background: #fff; }
.opt-more button svg { width: 12px; height: 12px; }
.opt-more i { font-size: 13px; color: var(--lp-mut); }
/* the cue card is narrow: a label over its words */
.sk-line .opt-fold { margin-top: 2px; }
.cue .opts { grid-column: 1 / -1; }
.cue .opt-fold { margin-top: 2px; }
.cue .opt-box { padding: 4px 10px 8px; }
.cue .opt-r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.medit .opts { margin-top: 12px; }
.medit .opt-fold { margin-top: 0; }
.medit .opt-r { grid-template-columns: minmax(80px, 30%) minmax(0, 1fr); }
/* the Guide: small, under the cue */
.g-opt { margin-top: 6px; display: grid; gap: 1px; font-size: 13px; line-height: 1.45; color: var(--lp-mid); }
.g-opt.solo { margin-top: 0; }
.g-opt b { color: var(--lp-ink); font-weight: 700; }
@media print {
  body.printing-sketch .opt-more { display: none !important; }
}

/* ---------- the body figure ----------
   Her picks on studies/body-coverage-2-studies.html (2026-10-14): the figure
   in the right panel (Body, beside Library), tiny figures in the block
   list, What it works on a new move. Color as fills only; a guess is
   hatched; the words always carry the meaning. */
svg.body { display: block; }
svg.body .sil { fill: #F0F0ED; }
svg.body .rg { fill: #DFDFDA; stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; transition: fill .35s cubic-bezier(.16,1,.3,1); }
svg.body .rg.l1 { fill: color-mix(in srgb, var(--c) 45%, #fff); }
svg.body .rg.l2 { fill: color-mix(in srgb, var(--c) 72%, #fff); }
svg.body .rg.l3 { fill: var(--c); }
svg.body .rg.hi { stroke: var(--lp-ink); stroke-width: 1.4; }
svg.body.edit .rg { cursor: pointer; }
svg.body.edit .rg.l0:hover { fill: #CFCFCA; }
svg.body text { font-family: var(--fu); font-size: 11px; fill: var(--lp-mut); }
.tiny svg.body .sil, .tiny svg.body .rg.l0 { fill: #E6E6E2; }
.tiny svg.body .rg.l0 { stroke: none; }
.tiny svg.body .rg { stroke-width: 2.4; }
@media (prefers-reduced-motion: reduce) { svg.body .rg { transition: none; } }

/* a tiny figure in the Plan's list and on the Blocks step */
button.tf { border-radius: 9px; padding: 2px; display: flex; align-items: center; justify-content: center; }
button.tf:hover { background: #fff; }
.r-sec.th { grid-template-columns: 14px 10px minmax(0, 1fr) 32px auto; gap: 0 9px; }
.r-sec .tf { width: 32px; height: 36px; }
.r-sec .tf svg { height: 32px; width: auto; }
.r-sec.th .r-pen { right: 98px; }
/* beside a tiny figure a name wraps to two lines rather than losing its end */
.r-sec.th .nm { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* a narrow window keeps the names; the Body tab still has the figure */
@media (max-width: 1200px) { .r-sec.th { grid-template-columns: 14px 10px minmax(0, 1fr) auto; } .r-sec.th .tf { display: none; } .r-sec.th .r-pen { right: 54px; } }
.tl-head .tf { width: 50px; height: 48px; flex: none; }
.tl-head .tf svg { height: 44px; width: auto; }
.tl-band button.tf:hover { background: rgba(255,255,255,.75); }
.bl-row { grid-template-columns: 16px 22px minmax(0, 1fr) 56px auto 40px; }
.bl-row .tf { width: 56px; height: 54px; }
.bl-row .tf svg { height: 50px; width: auto; }
.bk-say { font-size: 14px; line-height: 1.45; color: var(--lp-mid); margin: 0 0 0 32px; text-wrap: pretty; }
.bl-main .bk-say { margin: 2px 0 0; }

/* the panel's two tabs, and the Body tab */
.pn-tabs button { padding: 5px 16px; }
.body-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 4px 28px; }
.bd-who { display: flex; align-items: center; gap: 9px; font-family: var(--fd); font-weight: 700; font-size: 18px; letter-spacing: -.01em; line-height: 1.25; margin-top: 4px; }
.bd-who .dot { width: 11px; height: 11px; }
.bd-fig { margin: 16px 0 14px; }
.bd-fig svg { width: 100%; max-width: 236px; height: auto; margin: 0 auto; }
.bd-say { font-size: 16px; line-height: 1.5; color: var(--lp-ink); text-wrap: pretty; }
.bd-none { font-size: 15px; color: var(--lp-mut); margin-top: 14px; }
.bd-sug { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.bd-sug .f { width: 40px; height: 40px; border-radius: 10px; background: var(--lp-inset); padding: 5px; flex: none; }
.bd-sug .f svg { width: 100%; height: 100%; }
.bd-sug .t { flex: 1; min-width: 0; }
.bd-sug .t b { display: block; font-size: 14.5px; line-height: 1.25; }
.bd-sug .t small { display: block; font-size: 13px; color: var(--lp-mut); }
.bd-sug .btn { min-height: 44px; }
.bd-more { display: inline-flex; align-items: center; min-height: 44px; margin: 6px 0 0 -10px; font-weight: 600; font-size: 13.5px; color: var(--lp-ink); padding: 0 10px; border-radius: 999px; }
.bd-more:hover { background: var(--lp-inset); }
.bd-key { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; font-size: 12.5px; color: var(--lp-mid); }
.bd-key span { display: inline-flex; align-items: center; gap: 5px; }
.bd-key i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bd-key i.l0 { background: #DFDFDA; }
.bd-key i.l1 { background: color-mix(in srgb, var(--c) 45%, #fff); }
.bd-key i.l2 { background: color-mix(in srgb, var(--c) 72%, #fff); }
.bd-key i.l3 { background: var(--c); }
.bd-key i.lg { background: repeating-linear-gradient(45deg, var(--c) 0 2px, color-mix(in srgb, var(--c) 35%, #fff) 2px 4px); }

/* the Body tab, focused (studies/body-focus-studies.html): So far / This
   block, the zoom she chooses, the block that worked each part, the words */
.bd-top { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.bd-top .bd-who { flex: 1; min-width: 0; margin: 0; }
.bd-top .bd-who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-thumb { flex: none; display: block; }
.bd-thumb svg.body { height: 56px; width: auto; }
.bd-thumb svg.body .rg.l0 { stroke: none; }
svg.body rect.dim { fill: #fff; opacity: .7; }
.bd-scope { display: flex; width: 100%; margin-top: 10px; }
.bd-scope button { flex: 1; min-height: 38px; position: relative; }
.bd-scope button::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
.bd-scope button[aria-pressed="true"] { background: #fff; color: var(--lp-ink); box-shadow: 0 0 0 1px var(--lp-line2); }
.bd-ctx { font-size: 13px; color: var(--lp-mut); margin-top: 8px; line-height: 1.4; }
.bd-zoom { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.bd-zoom button { position: relative; font-weight: 600; font-size: 13px; color: var(--lp-mid); background: var(--lp-inset); border-radius: 999px; padding: 0 11px; min-height: 32px; white-space: nowrap; }
.bd-zoom button::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.bd-zoom button:hover { color: var(--lp-ink); background: #EDEDEA; }
.bd-zoom button[aria-pressed="true"] { background: var(--lp-ink); color: #fff; }
.bd-fig { margin: 14px 0 0; }
.bd-fig.whole svg { width: 100%; max-width: 236px; height: auto; margin: 0 auto; }
.bd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bd-two figure { margin: 0; min-width: 0; }
.bd-two svg.body { width: 100%; height: auto; }
.bd-two figcaption { text-align: center; font-size: 12px; color: var(--lp-mut); margin-top: 2px; }
.bd-fig.a-upper .bd-two svg.body, .bd-fig.a-core .bd-two svg.body { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.bd-fig.a-lower .bd-two svg.body { -webkit-mask-image: linear-gradient(transparent, #000 10%); mask-image: linear-gradient(transparent, #000 10%); }
.bd-fig.a-lower .bd-two { max-width: 250px; margin: 0 auto; }
.bd-two svg.body .rg { vector-effect: non-scaling-stroke; stroke-width: 1.6; }
svg.body .rg.off { fill: #F0F0ED; }
.bd-fig svg.body .rg:not(.off) { cursor: pointer; }
.bd-fig svg.body .rg { transition: opacity .15s ease-out; }
.bd-fig.has-sel svg.body .rg:not(.off):not(.sel) { opacity: .34; }
.bd-fig svg.body .rg:focus { outline: none; }
.bd-fig svg.body .rg:focus-visible { stroke: var(--lp-ink); stroke-width: 2.4; }
@media (prefers-reduced-motion: reduce) { .bd-fig svg.body .rg { transition: none; } }
.bd-key i.l0 { background: #DFDFDA; }
.bd-det { margin-top: 14px; border-top: 1px solid var(--lp-line); padding-top: 6px; min-height: 52px; }
.bd-hint { font-size: 14px; color: var(--lp-mut); padding: 8px 0 2px; }
.bd-dh { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.bd-dh b { font-family: var(--fd); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.bd-dh span { font-size: 13px; font-weight: 600; color: var(--lp-mid); }
.bd-dh .x { margin-left: auto; width: 44px; height: 44px; margin-right: -4px; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); border-radius: 999px; }
.bd-dh .x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.bd-dh .x svg { width: 14px; height: 14px; }
.bd-det ul { list-style: none; display: grid; gap: 10px; margin: 2px 0 4px; }
.bd-det li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.35; }
.bd-det li i { width: 10px; height: 10px; border-radius: 50%; transform: translateY(1px); background: var(--c); }
.bd-det li b { font-weight: 600; }
.bd-det li p:first-child { color: var(--lp-mid); }
.bd-det li .mv { color: var(--lp-ink); margin-top: 1px; }
.bd-det li em { font-style: italic; color: var(--lp-mut); }
.bd-det li.one { display: block; }
.bd-det li.one > i { display: none; }
.bd-words { margin-top: 10px; border-top: 1px solid var(--lp-line); }
.bd-wr { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: start; padding: 2px 0; border-bottom: 1px solid var(--lp-line); }
.bd-wr dt { display: flex; align-items: center; gap: 7px; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--lp-mid); }
.bd-wr dt i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bd-wr dt i.l0 { background: #DFDFDA; }
.bd-wr dt i.l1 { background: color-mix(in srgb, var(--c) 45%, #fff); }
.bd-wr dt i.l2 { background: color-mix(in srgb, var(--c) 72%, #fff); }
.bd-wr dt i.l3 { background: var(--c); }
.bd-wr dd { display: flex; flex-wrap: wrap; column-gap: 2px; margin: 0 0 0 -8px; }
.bd-wr dd button { min-height: 40px; min-width: 44px; margin: 2px 0; padding: 0 8px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--lp-mid); text-align: left; position: relative; }
.bd-wr dd button::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.bd-wr.lead dd button { font-weight: 600; color: var(--lp-ink); }
.bd-wr dd button:hover { background: var(--lp-inset); color: var(--lp-ink); }
.bd-wr dd button[aria-pressed="true"] { background: #E9E9E5; color: var(--lp-ink); font-weight: 700; }
.bd-all { font-size: 15px; color: var(--lp-ink); padding: 12px 0 0; }
.body-pane button, .bd-fig svg.body .rg { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* on a phone the panel covers the page from the bar down; the Sketch's own
   full height pushed its foot below the screen */
@media (max-width: 900px) { body .sk2 .libpanel { height: auto; } }

/* More ideas: the library, filtered, with a chip that clears it */
.lib-works { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; background: var(--lp-ink); color: #fff; border-radius: 999px; padding: 4px 4px 4px 12px; font-weight: 600; font-size: 13px; margin: 0 0 6px; }
.lib-works span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-works button { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); color: #fff; flex: none; }
.lib-works button:hover { background: rgba(255,255,255,.3); }
.lib-works button svg { width: 11px; height: 11px; }

/* What this block works on */
.pop .it.on { background: var(--lp-inset); }
.pop .it.on::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-ink); flex: none; }

/* the hover card */
.lp-tip { position: fixed; z-index: 200; max-width: 280px; background: var(--lp-ink); color: #fff; border-radius: 12px; padding: 10px 13px; font-size: 13.5px; line-height: 1.45; pointer-events: none; }
.lp-tip[hidden] { display: none; }
.lp-tip b { display: block; font-size: 14px; margin-bottom: 2px; }
.lp-tip ul { list-style: none; }
.lp-tip li { display: flex; gap: 14px; justify-content: space-between; }
.lp-tip li em { font-style: normal; color: #D6CFC8; white-space: nowrap; }
.lp-tip .no { color: #D6CFC8; }

/* What it works: describe it, a guess and why, the twenty muscles */
.mus-top { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
.composer label.mus-top { margin: 14px 0 6px; }
.mus-ed { background: var(--lp-inset); border-radius: 14px; padding: 12px 14px; }
.composer .mus-ed label.mus-lab, .mus-lab { display: block; font-weight: 600; font-size: 13.5px; color: var(--lp-ink); margin: 0 0 1px; }
.mus-help { font-size: 13px; font-style: italic; color: var(--lp-mut); margin: 0 0 6px; line-height: 1.4; }
.mus-ed textarea.mus-desc { display: block; width: 100%; min-height: 0; border: 0; outline: none; resize: none; overflow: hidden; background: #fff; border-radius: 10px; padding: 8px 12px; margin: 0; font-size: 14.5px; line-height: 1.45; font-family: inherit; color: var(--lp-ink); }
.mus-ed textarea.mus-desc:focus { box-shadow: var(--focus); }
.mus-res { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; align-items: start; margin: 12px 0; }
.mus-res svg.body { width: 116px; height: auto; }
.mus-say { min-width: 0; }
.mus-tag { display: inline-block; font-weight: 600; font-size: 12.5px; color: var(--lp-mid); background: #fff; border-radius: 999px; padding: 2px 10px; }
.mus-tag.ok, .mus-tag.lib { background: var(--teal-t); color: var(--teal-deep); }
.mus-tag.own { background: var(--purple-t); color: var(--purple-deep); }
.mus-why { font-size: 14.5px; line-height: 1.5; color: var(--lp-ink); margin-top: 8px; text-wrap: pretty; }
.mus-say .mus-help { margin-top: 8px; }
.mus-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.mus-acts .btn.plain { margin-left: -10px; }
.mus-chips { display: grid; gap: 8px; }
.mus-ed { container-type: inline-size; }
.mus-g { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 4px 8px; align-items: start; }
.mus-gn { font-size: 12.5px; font-weight: 600; color: var(--lp-mid); padding-top: 4px; }
.mus-gc { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
@container (max-width: 440px) { .mus-g { grid-template-columns: minmax(0, 1fr); } .mus-gn { padding-top: 0; } }
.mchp { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600; font-size: 12.5px; color: var(--lp-ink); background: #fff; border-radius: 999px; padding: 4px 10px 4px 8px; }
.mchp:hover { background: #FBFBFA; box-shadow: 0 0 0 1px var(--lp-line2); }
.mchp i { width: 9px; height: 9px; border-radius: 50%; background: #DFDFDA; flex: none; }
.mchp.main { background: var(--ct); }
.mchp.main i { background: var(--c); }
.mchp.helps i { background: color-mix(in srgb, var(--c) 45%, #fff); }
.mchp em { font-style: normal; font-weight: 500; color: var(--lp-mid); }
.mus-tap { margin: 10px 0 0; }
/* the fold on the move editor and the Sketch */
.mus-fold { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mus-fold .mus-ed { align-self: stretch; margin-top: 8px; }
.mus-part { font-weight: 700; font-size: 13.5px; margin: 12px 0 0; }
.medit .mus-fold { margin-top: 10px; }
.sk-line .mus-fold .opt-fold { margin-top: 4px; }
.sk-musdoor { font-size: 12.5px; font-weight: 600; color: var(--lp-mut); padding: 3px 9px; border-radius: 999px; opacity: 0; }
.sk-musdoor:hover { background: var(--lp-inset); color: var(--lp-ink); }
.sk-line:hover .sk-musdoor, .sk-line:focus-within .sk-musdoor, .sk-musdoor:focus-visible { opacity: 1; }
/* on a pasted line that's new to the library */
.pr-mus { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--lp-mid); padding: 2px 8px; margin: 2px 0 0 -8px; border-radius: 8px; text-align: left; }
.pr-mus:hover { background: #fff; color: var(--lp-ink); }
.pr-mus b { color: var(--lp-ink); font-weight: 700; }
.pr-mus svg { width: 12px; height: 12px; flex: none; }
.pr-row .mus-ed { background: #fff; box-shadow: var(--ring); margin: 6px 0; }
.pr-row .mus-ed textarea.mus-desc, .pr-row .mchp { background: var(--lp-inset); }
.pr-row .mchp.main { background: var(--ct); }
.pr-row .mus-tag:not(.ok):not(.lib):not(.own) { background: var(--lp-inset); }
.pr-row .mus-res { grid-template-columns: 96px minmax(0, 1fr); }
.pr-row .mus-res svg.body { width: 96px; }
@media print { .lp-tip, .sk-musdoor { display: none !important; } }

/* ---------- a template, edited in place (studies/templates-studies.html, Study 01) ---------- */
.tp-head { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--lp-line); background: #fff; }
.tp-head .sp { flex: 1; }
.tp-title { min-width: 0; flex: 0 1 560px; }
.tp-head input, .tp input { font: inherit; color: inherit; border: 0; outline: none; background: none; border-radius: 7px; }
.tp-head input:hover, .tp input:hover { background: var(--lp-inset); }
.tp-head input:focus, .tp input:focus { background: #fff; box-shadow: var(--focus); }
.tp-name { width: 100%; font-family: var(--fd) !important; font-weight: 800; font-size: 25px; letter-spacing: -.015em; line-height: 1.15; padding: 1px 6px; margin-left: -6px; }
.tp-meta { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--lp-mut); }
.tp-studio { font-weight: 600; color: var(--lp-mid) !important; padding: 1px 5px; margin-left: -5px; field-sizing: content; min-width: 5ch; max-width: 30ch; }
.tp { max-width: 920px; margin: 0 auto; padding: 26px 28px 80px; }
.tp-wbar { margin: 0 0 22px; }
.tb { position: relative; border-top: 1px solid var(--lp-line); }
.tp-list > .tb:last-child { border-bottom: 1px solid var(--lp-line); }
.tb-row { display: grid; grid-template-columns: 22px 22px minmax(0, 1fr) 150px 150px 34px; gap: 10px; align-items: center; padding: 12px 4px; }
.tb-grip { width: 22px; height: 30px; display: flex; align-items: center; justify-content: center; color: #A39B93; cursor: grab; border-radius: 6px; opacity: 0; transition: opacity .15s; }
.tb-grip svg { width: 14px; height: 14px; }
.tb-row:hover > .tb-grip, .tb-grip:focus-visible { opacity: 1; }
.tb-main { min-width: 0; }
.tb-nrow { display: flex; align-items: center; gap: 2px; min-width: 0; }
.tb-name { font-family: var(--fd) !important; font-weight: 800; font-size: 19px; letter-spacing: -.01em; line-height: 1.25; padding: 1px 5px; margin-left: -5px; field-sizing: content; min-width: 4ch; max-width: 100%; }
.tp-part .tb-name { font-family: var(--fu) !important; font-weight: 700; font-size: 15.5px; letter-spacing: 0; }
.tb-tg { flex: none; width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); }
.tb-tg:hover { background: var(--lp-inset); color: var(--lp-ink); }
.tb-tg svg { width: 15px; height: 15px; transition: transform .2s cubic-bezier(.16,1,.3,1); }
.tb-tg[aria-expanded="true"] svg { transform: rotate(180deg); }
.tb-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; color: var(--lp-mut); margin-top: 1px; }
.tb-bits { white-space: nowrap; }
.tb-rule { font-size: 13.5px; color: var(--lp-mid) !important; padding: 1px 5px; margin-left: -5px; field-sizing: content; min-width: 2ch; max-width: 100%; }
.tb-sub:not(.has) .tb-bits + .tb-rule { margin-left: 4px; }
.tb-rule::placeholder { color: transparent; }
.tb-row:hover .tb-rule::placeholder, .tb-rule:focus::placeholder { color: var(--lp-mut); }
.tb-time { width: 100%; text-align: right; font-weight: 600; font-size: 14.5px; padding: 4px 8px; }
.tp-part .tb-time { font-weight: 500; font-size: 14px; color: var(--lp-mid) !important; }
.tb-mu { justify-self: end; }
.mu-btn { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; color: var(--lp-ink); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }
.mu-btn:hover { background: var(--lp-inset); }
.mu-btn svg { width: 14px; height: 14px; color: var(--lp-mut); flex: none; }
.mu-btn.soft { color: var(--lp-mid); }
.mu-btn.unset { color: var(--lp-mut); opacity: 0; }
.tb-row:hover .mu-btn.unset, .mu-btn.unset:focus-visible, .mu-btn.unset[aria-expanded="true"] { opacity: 1; }
.tb-more { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); }
.tb-more:hover { background: var(--lp-inset); color: var(--lp-ink); }
.tb-more svg { width: 16px; height: 16px; }
.tb-open { padding: 0 0 18px 64px; }
.tp-part { border-top: 1px solid var(--lp-line); margin-left: -64px; }
.tp-part .tb-row { padding: 9px 4px; }
.tp-part > .tf { margin-left: 64px; }
.addline { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--lp-mid); padding: 8px 10px; border-radius: 999px; }
.addline:hover { color: var(--lp-ink); background: var(--lp-inset); }
.addline svg { width: 14px; height: 14px; flex: none; }
.addline.small { font-size: 13.5px; padding: 5px 9px; margin-left: -9px; }
.tb-open > .addline { margin: 8px 0 0 -10px; }
.tp-foot { padding-top: 14px; margin-left: -6px; }
.tb.dragging, .tp-part.dragging { opacity: .35; }
.tb.over-top::before, .tb.over-bot::after, .tp-part.over-top::before, .tp-part.over-bot::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--lp-ink); border-radius: 2px; z-index: 2; }
.tp-part { position: relative; }
.tb.over-top::before, .tp-part.over-top::before { top: -1px; }
.tb.over-bot::after, .tp-part.over-bot::after { bottom: -1px; }
.fresh > .tb-row { animation: tpfresh 1.6s cubic-bezier(.16,1,.3,1); border-radius: 10px; }
@keyframes tpfresh { 0% { background: var(--lp-inset); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .fresh > .tb-row { animation: none; } .tb-tg svg { transition: none; } }
.tp-pop .tp-bpm { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--lp-mid); padding: 2px 10px 8px 37px; }
.tp-pop .tp-bpm input { width: 74px; font-family: var(--fd); font-weight: 800; font-size: 20px; border: 0; background: var(--lp-inset); border-radius: 9px; padding: 3px 9px; outline: none; color: var(--lp-ink); }
.tp-pop .tp-bpm input:focus { background: #fff; box-shadow: var(--focus); }
.pop .ck { margin-left: auto; color: var(--lp-ink); display: flex; }
.pop .ck svg { width: 15px !important; height: 15px !important; color: var(--lp-ink) !important; }
.tp-must { width: 470px; }
.tp-must .mus-g { padding: 4px 10px; }
.tp-must .mchp { background: var(--lp-inset); }
.tp-must .mchp.main { background: var(--ct); }

/* what a block or a part holds */
.tf { background: var(--lp-inset); border-radius: 14px; padding: 6px 16px; margin: 2px 0 12px; }
.tf-r { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid #EAEAE7; }
.tf-r:first-child { border-top: 0; }
.tf-l { font-size: 13.5px; font-weight: 600; color: var(--lp-mid); padding-top: 6px; }
.tf-c { min-width: 0; }
.tf .seg { background: #EDEDEA; }
.tf .mins { background: #fff; }
.tf .mins b { font-weight: 700; font-size: 14px; padding: 0 8px; min-width: 64px; text-align: center; }
.tf .mins button:hover { background: var(--lp-inset); }
.tf .mins button:disabled { opacity: .35; cursor: default; background: none; }
.tf-moves { margin-top: 8px; }
.tf-mv { display: grid; grid-template-columns: 34px minmax(0, 1fr) 140px 26px; gap: 10px; align-items: center; padding: 4px 0; }
.tf-mv .f { width: 34px; height: 34px; border-radius: 8px; background: #fff; padding: 4px; }
.tf-mv .f svg { width: 100%; height: 100%; }
.tf-mn { width: 100%; font-weight: 700; font-size: 14.5px; padding: 3px 6px; }
.tf-reps { width: 100%; font-size: 14px; color: var(--lp-mid) !important; padding: 3px 6px; }
.tf-reps::placeholder { color: transparent; }
.tf-mv:hover .tf-reps::placeholder, .tf-reps:focus::placeholder { color: var(--lp-mut); }
.tf .tp-head input:hover, .tf input:hover { background: #fff; }
.tf-add { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--lp-mid); padding-left: 10px; }
.tf-add svg { width: 14px; height: 14px; flex: none; }
.tf-add input { flex: 1; font-size: 14px; font-weight: 600; padding: 5px 6px; max-width: 340px; }
.tf-add input::placeholder { color: var(--lp-mid); }
.tf-help { font-size: 13.5px; color: var(--lp-mut); margin-top: 8px; }
.tf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tf-chips .chip { background: #fff; padding: 3px 4px 3px 11px; gap: 2px; }
.chip-x { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); }
.chip-x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.chip-x svg { width: 10px; height: 10px; }
.tf-note { display: flex; align-items: center; gap: 8px; }
.tf-note > svg { width: 16px; height: 16px; flex: none; color: var(--lp-mid); }
.tf-note input { flex: 1; min-width: 0; font-size: 14.5px; font-style: italic; padding: 4px 6px; }
.tf-note + .tf-note { margin-top: 2px; }
.tf-notes, .tf-r .tf-note:first-child { margin-top: 0; }
.fr-x { width: 26px; height: 26px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--lp-mut); opacity: 0; }
.fr-x svg { width: 11px; height: 11px; }
.fr-x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.fr-x:focus-visible, .tf-mv:hover .fr-x, .tf-note:hover .fr-x, .fr-sub:hover .fr-x, .fr-note:hover .fr-x, .hits:hover .fr-x, .spot:hover .fr-x, .sk-ph:hover .fr-x, .fr-note:focus-within .fr-x { opacity: 1; }
.tf .fr-x:hover { background: #fff; }

/* ---------- a studio's frame, in a class (Study 03), on the Sketch and the Plan ---------- */
.fr-top { display: grid; gap: 2px; margin: 4px 0 8px; }
.sk-block > .fr-top, .sk-ph + .fr-top { margin-left: 28px; }
.fr-sub { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--lp-mut); min-height: 26px; }
.fr-note { display: flex; align-items: flex-start; gap: 8px; }
.fr-note > svg { width: 16px; height: 16px; flex: none; color: var(--lp-mid); margin-top: 5px; }
.fr-note textarea { flex: 1; min-width: 0; font-size: 14.5px; font-style: italic; line-height: 1.45; color: var(--lp-ink); border: 0; outline: none; resize: none; background: none; padding: 2px 6px; margin-left: -6px; border-radius: 7px; overflow: hidden; }
.fr-note textarea:hover { background: var(--lp-inset); }
.fr-note textarea:focus { background: #fff; box-shadow: var(--focus); }
.hits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.hits-l { font-size: 13px; color: var(--lp-mut); margin-right: 2px; }
.hit { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 4px 11px 4px 7px; background: var(--lp-inset); color: var(--lp-mid); transition: background .4s, color .4s; }
.hit em { font-style: normal; font-weight: 500; color: var(--lp-mut); }
.hit i { width: 15px; height: 15px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .4s; }
.hit i svg { width: 9px; height: 9px; opacity: 0; color: #fff; }
.hit.on { background: var(--teal-t); color: var(--teal-deep); }
.hit.on i { background: var(--teal-deep); }
.hit.on i svg { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hit, .hit i { transition: none; } }
.chg-tag { display: inline-block; flex: none; font-size: 12px; font-weight: 700; background: var(--marigold-t); color: var(--marigold-deep); border-radius: 999px; padding: 1px 8px; margin: 6px 0 0 4px; vertical-align: middle; }
.was .chg-tag { margin: 0 4px 0 0; }
.was { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; color: var(--lp-mut); margin: 1px 0 2px; }
.was b { font-weight: 600; color: var(--lp-mid); }
.was button { font-weight: 700; font-size: 13px; color: var(--lp-ink); padding: 1px 8px; border-radius: 999px; margin-left: 2px; }
.was button:hover { background: var(--lp-inset); }
.spots { display: grid; gap: 0; margin: 2px 0 4px; }
.sk-block .spots { margin-left: 28px; }
.spot { display: flex; align-items: center; gap: 6px; border-radius: 10px; }
.spot-b { flex: 1; display: flex; align-items: center; gap: 12px; text-align: left; padding: 5px 6px; border-radius: 10px; }
.spot-b .num { width: 40px; height: 40px; border-radius: 9px; background: var(--lp-inset); display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-weight: 700; font-size: 15px; color: var(--lp-mut); flex: none; }
.spot-b .wd { font-size: 14.5px; color: var(--lp-mut); }
.spot-b:hover .wd, .spot.open .wd { color: var(--lp-ink); }
.spot-b:hover .num, .spot.open .num { background: #EDEDEA; }
.spot-sugs { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 10px 58px; max-width: 520px; }
.spot-sugs .why { font-size: 13px; color: var(--lp-mut); font-style: italic; padding: 2px 0 2px 2px; }
.spot-sugs .sug { display: flex; align-items: center; gap: 10px; text-align: left; padding: 5px 10px 5px 5px; border-radius: 12px; background: #fff; box-shadow: var(--ring); font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.spot-sugs .sug:hover { background: var(--lp-inset); }
.spot-sugs .sug .f { width: 34px; height: 34px; border-radius: 8px; background: var(--lp-inset); padding: 4px; flex: none; color: var(--lp-ink); }
.spot-sugs .sug .f svg { width: 100%; height: 100%; }
.spot-sugs .sug small { display: block; font-weight: 500; font-size: 12.5px; color: var(--lp-mut); }
.swap-sugs { padding: 6px 0 8px 0; }
.again { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--lp-mid); padding: 8px 6px 6px; margin-top: 4px; border-top: 1px solid var(--lp-line); }
.sk-block .again { margin-left: 28px; }
.again > svg { width: 20px; height: 20px; flex: none; color: var(--lp-mid); margin: 0 10px; }
.again b { color: var(--lp-ink); font-weight: 700; }
.again em { font-style: normal; color: var(--lp-mut); }
.again-n { width: 44px; font-family: var(--fd); font-weight: 800; font-size: 16px; color: var(--lp-ink); text-align: center; border: 0; outline: none; background: var(--lp-inset); border-radius: 8px; padding: 2px 4px; -moz-appearance: textfield; }
.again-n::-webkit-outer-spin-button, .again-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.again-n:focus { background: #fff; box-shadow: var(--focus); }
.sk-ph .sk-ph-x { align-self: center; margin-left: auto; }
.pop .it-rounds { cursor: default; }
.pop .it-rounds:hover { background: none; }
.pop .it-rounds .mins { margin-left: auto; }
.pop .it-rounds .mins b { font-size: 14px; min-width: 42px; text-align: center; }
.pop .it-rounds .mins button:disabled { opacity: .35; cursor: default; }

/* ---------- in the Guide: notes between the moves (Study 05), rounds (Study 04) ---------- */
.g-note { display: flex; align-items: center; gap: 12px; background: var(--lp-inset); border-radius: 12px; padding: 10px 16px; margin: 8px 18px 2px; font-size: 15.5px; font-style: italic; color: var(--lp-ink); break-inside: avoid; }
.g-note svg { width: 17px; height: 17px; flex: none; color: var(--lp-mid); }
.combo-tag.say { background: var(--lp-ink); color: #fff; }
.g-rounds { display: flex; gap: 6px; margin: 10px 18px 2px; }
.g-rounds button { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: var(--lp-inset); border-radius: 12px; padding: 8px 12px; text-align: left; max-width: 220px; }
.g-rounds button b { font-size: 13.5px; }
.g-rounds button span { font-size: 12.5px; color: var(--lp-mut); font-variant-numeric: tabular-nums; }
.g-rounds button.on { background: var(--lp-ink); color: #fff; }
.g-rounds button.on span { color: rgba(255,255,255,.78); }
@media print {
  .fr-x, .spots, .swap-door, .spot-sugs, .mu-btn.unset { display: none !important; }
  .again-n { background: none; width: auto; }
  .g-rounds button.on { background: var(--lp-inset); color: var(--lp-ink); }
  .g-rounds button.on span { color: var(--lp-mut); }
}
@media (max-width: 900px) {
  .tb-row { grid-template-columns: 22px 22px minmax(0, 1fr) 104px auto 34px; }
  .tb-open { padding-left: 24px; }
  .tp-part { margin-left: -24px; }
  .tp-part > .tf { margin-left: 24px; }
  .tf-r { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tf-mv { grid-template-columns: 34px minmax(0, 1fr) 90px 26px; }
}

/* ---------- a move and the changes inside it (studies/moves-within-moves-studies.html) ----------
   The base position is the move's name; its changes sit in a light well
   under it. No shadows: fills and hairlines only. */
.lib-of { display: inline-block; font-size: 13px; font-weight: 600; color: var(--lp-mut); white-space: nowrap; }
.sk-nrow .lib-of { margin-top: 6px; }
.sk-nch { font-size: 13.5px; color: var(--lp-mut); white-space: nowrap; }
.sk-tools.menu-on { opacity: 1; }
.chg-well { margin: 4px 0 6px -6px; background: var(--lp-inset); border-radius: 12px; padding: 4px; }
.chg { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 84px 28px; gap: 6px; align-items: center; padding: 2px 2px 2px 0; border-radius: 9px; }
.chg + .chg { margin-top: 1px; }
.chg:hover, .chg:focus-within, .chg.menu-on { background: #fff; }
.chg.dragging { opacity: .35; }
.chg.ch-over-top { box-shadow: inset 0 2px 0 var(--lp-ink); }
.chg.ch-over-bot { box-shadow: inset 0 -2px 0 var(--lp-ink); }
.chg-grip { width: 20px; height: 26px; display: flex; align-items: center; justify-content: center; color: #A39A91; cursor: grab; border-radius: 6px; opacity: 0; }
.chg-grip svg { width: 12px; height: 12px; }
.chg:hover .chg-grip, .chg-grip:focus-visible { opacity: 1; }
.chg-tx { display: block; width: 100%; min-width: 0; border: 0; outline: none; background: none; font-weight: 600; font-size: 15px; line-height: 1.4; padding: 3px 6px; border-radius: 6px; color: var(--lp-ink); resize: none; overflow: hidden; }
.chg-tx::placeholder { color: var(--lp-mut); font-style: italic; font-weight: 500; }
.chg-tx:focus { background: var(--lp-inset); }
.chg-how .pop { width: 330px; }
.chg-hb { display: inline-flex; gap: 4px; align-items: center; border-radius: 999px; padding: 2px; }
.chg-hb:hover { background: var(--lp-inset); }
.chg-well .tg.tempo { background: #fff; }
.chg:hover .tg.tempo, .chg:focus-within .tg.tempo, .chg.menu-on .tg.tempo { background: var(--lp-inset); }
.chg-hb.ghost { font-size: 12.5px; font-weight: 600; color: var(--lp-mut); padding: 2px 9px; opacity: 0; }
.chg:hover .chg-hb.ghost, .chg:focus-within .chg-hb.ghost, .chg.menu-on .chg-hb.ghost { opacity: 1; }
.chg-reps { width: 100%; min-width: 0; border: 0; outline: none; background: none; font-size: 13.5px; color: var(--lp-mid); text-align: right; padding: 3px 6px; border-radius: 6px; }
.chg-reps::placeholder { color: transparent; }
.chg:hover .chg-reps::placeholder, .chg-reps:focus::placeholder { color: var(--lp-mut); }
.chg-reps:focus { background: var(--lp-inset); text-align: left; }
.chg-more { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); opacity: 0; }
.chg-more svg { width: 15px; height: 15px; }
.chg:hover .chg-more, .chg:focus-within .chg-more, .chg.menu-on .chg-more { opacity: 1; }
.chg-more:hover { background: var(--lp-inset); color: var(--lp-ink); }
.chg-add { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--lp-mid); padding: 5px 10px; margin: 2px 0 0 18px; border-radius: 999px; }
.chg-add:hover { background: #fff; color: var(--lp-ink); }
.chg-add svg { width: 12px; height: 12px; }
.chg-add.solo { margin: 0 0 0 -10px; }
.chg-add.solo:hover { background: var(--lp-inset); }
/* Simplify: the changes as numbered steps, on a line or two */
.chg-steps { display: flex; flex-wrap: wrap; gap: 3px 16px; margin: 2px 0 6px -8px; padding: 5px 8px; border-radius: 10px; text-align: left; font-size: 14.5px; font-weight: 600; color: var(--lp-ink); line-height: 1.45; }
.chg-steps:hover { background: var(--lp-inset); }
.chg-steps .st { display: inline-flex; align-items: baseline; gap: 6px; }
.chg-steps i { font-style: normal; font-family: var(--fd); font-weight: 700; font-size: 13px; color: var(--lp-mut); }
/* the transition into a move, on its own line between moves (Q2 A) */
.sk-from { display: flex; align-items: center; gap: 8px; margin: 2px 0 2px 28px; padding: 3px 0 3px 8px; color: var(--lp-mid); }
.sk-from > svg { width: 17px; height: 17px; color: var(--lp-mut); flex: none; }
.sk-from-in { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-weight: 600; font-size: 15px; color: var(--lp-ink); padding: 3px 6px; border-radius: 6px; }
.sk-from-in:hover, .sk-from-in:focus { background: var(--lp-inset); }
.sk-from small { font-size: 13px; color: var(--lp-mut); white-space: nowrap; }
.sk-from .sk-x { opacity: 0; color: var(--lp-mut); border-radius: 999px; }
.sk-from:hover .sk-x, .sk-from:focus-within .sk-x { opacity: 1; }
.sk-from .sk-x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.medit .chg-well { margin: 0; }
.medit .h .lib-of { flex: none; }
.cue .how .lib-of { margin-left: 2px; }

/* the Plan: a change's name on the lyric it starts on (Study 02, Q3 A) */
.ln.has-ch { display: flex; align-items: center; gap: 10px; }
.ln.has-ch .w { flex: 1; min-width: 0; }
.ln.in-ch:not(.lead) .w { color: var(--lp-mid); }
.ln.lead .w { color: var(--lp-ink); font-weight: 600; }
.ln.lit, .ln.on-run.lit { background: rgba(255,255,255,.6); }
.ch-labs { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 4px; max-width: 58%; }
.ch-lab { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 6px 2px 8px; cursor: pointer; font-style: normal; line-height: 1.4; }
.ch-lab:hover { background: rgba(255,255,255,.75); }
.ch-lab > svg { width: 15px; height: 15px; color: var(--lp-mid); flex: none; }
.ch-lab .nm { font-weight: 700; font-size: 13.5px; color: var(--lp-ink); }
.ch-lab .nm.none { font-style: italic; font-weight: 600; color: var(--lp-mut); }
.ch-lab .tgs { margin-left: 0; }
.ch-lab .tg { font-size: 12px; }
.ch-lab .tg.tempo { background: rgba(255,255,255,.75); }
.ch-here { flex: none; font-weight: 600; font-size: 12.5px; color: var(--lp-ink); background: #fff; border-radius: 999px; padding: 3px 10px; white-space: nowrap; opacity: 0; transition: opacity .12s; font-style: normal; }
.ln:hover .ch-here, .ch-here:focus-visible { opacity: 1; }
.ch-here:hover { background: var(--lp-ink); color: #fff; }
.ln.sel .ch-here, .ln.drag .ch-here, body.dragging-move .ch-here, body.dragging-edge .ch-here { opacity: 0; }

/* the Guide: the base position large, its changes small (Study 03) */
.g-row .lib-of { display: block; margin-top: 2px; }
.g-chs { margin-top: 10px; display: grid; gap: 1px; }
.g-ch { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 4px 0; }
.g-ch .t { font-size: 13px; color: var(--lp-mut); font-variant-numeric: tabular-nums; }
.g-ch .on-l { display: block; font-size: 13px; color: var(--lp-mut); line-height: 1.35; }
.g-ch .nm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--lp-ink); }
.g-ch .nm small { font-weight: 500; font-size: 13.5px; color: var(--lp-mid); }
.g-tr { display: grid; grid-template-columns: 96px 60px minmax(0, 1fr); gap: 18px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--lp-line); break-inside: avoid; }
.g-tr .t { font-family: var(--fd); font-weight: 700; font-size: 16px; color: var(--lp-mid); font-variant-numeric: tabular-nums; }
.g-tr .ic { justify-self: center; display: flex; color: var(--lp-mut); }
.g-tr .ic svg { width: 22px; height: 22px; }
.g-tr .x { font-weight: 700; font-size: 16px; }
.g-tr .x small { font-weight: 500; font-size: 13.5px; color: var(--lp-mut); margin-left: 8px; }

/* ---------- pasting a studio's words: the words beside the reading (Study 04) ---------- */
body.rv-on { overflow: hidden; }
.rv-wrap { position: fixed; z-index: 45; top: 60px; left: 0; right: 0; bottom: 0; background: #fff; display: flex; flex-direction: column; }
.rv-head { display: flex; align-items: center; gap: 12px; padding: 14px 28px 12px; border-bottom: 1px solid var(--lp-line); }
.rv-head h2 { font-family: var(--fd); font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.rv-into { font-size: 14.5px; color: var(--lp-mid); }
.rv-head .sp { flex: 1; }
.rv-head .x { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); }
.rv-head .x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.rv-head .x svg { width: 16px; height: 16px; }
.rv { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); max-width: 1320px; width: 100%; margin: 0 auto; }
.rv-src { border-right: 1px solid var(--lp-line); display: flex; flex-direction: column; min-height: 0; padding: 18px 22px 22px 28px; }
.rv-out { display: flex; flex-direction: column; min-height: 0; padding: 18px 28px 0 26px; }
.rv-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-height: 32px; }
.rv-top h3 { font-family: var(--fd); font-weight: 700; font-size: 16px; }
.rv-top .sp, .rv-foot .sp { flex: 1; }
.rv .sum { font-size: 13.5px; color: var(--lp-mut); }
.rv-words { position: relative; flex: 1; min-height: 0; overflow-y: auto; background: var(--lp-inset); border-radius: 14px; padding: 18px 20px; font-size: 15px; line-height: 1.75; color: var(--lp-mid); }
.rv-words p + p { margin-top: 12px; }
.rv-words .sn { border-radius: 4px; padding: 1px 0; transition: background .15s, color .15s; }
.rv-words.has-lit .sn { color: var(--lp-mut); }
.rv-words .sn.lit, .rv-words.has-lit .sn.lit { background: #FFE88A; color: var(--lp-ink); }
.rv-paste { flex: 1; min-height: 240px; resize: none; border: 0; background: var(--lp-inset); border-radius: 14px; padding: 18px 20px; font-size: 15px; line-height: 1.65; color: var(--lp-ink); outline: none; }
.rv-paste:focus { background: #fff; box-shadow: var(--focus); }
.rv-paste::placeholder { color: var(--lp-mut); font-style: italic; }
.rv-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.rv-hint { font-size: 13.5px; color: var(--lp-mut); font-style: italic; }
.rv-empty { justify-content: center; align-items: center; color: var(--lp-mut); font-size: 15px; }
.rv-scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -10px; padding: 0 10px 16px; }
.rv-foot { display: flex; align-items: center; gap: 10px; padding: 14px 0 18px; border-top: 1px solid var(--lp-line); }
.rv-none { padding: 16px 6px; color: var(--lp-mut); }
.rv-part { display: flex; align-items: center; gap: 10px; padding: 16px 6px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--lp-line); border-radius: 0; }
.rv-part:first-child { padding-top: 2px; }
.rv-pl { font-size: 12px; font-weight: 700; color: var(--lp-mid); background: var(--lp-inset); border-radius: 999px; padding: 1px 9px; }
.rv-part b { font-family: var(--fd); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.rv-part small { font-size: 13px; color: var(--lp-mut); }
.rv-part .sp, .rv-note .sp { flex: 1; }
.rv-mv { padding: 8px 6px; border-radius: 12px; }
.rv-mv.lit, .rv-mv:hover, .rv-note.lit, .rv-note:hover, .rv-tr.lit, .rv-tr:hover { background: var(--lp-inset); }
.rv-part.lit { background: var(--lp-inset); border-radius: 10px; }
.rv-mv:hover .rv-well, .rv-mv.lit .rv-well, .rv-mv:hover .rv-h .f, .rv-mv.lit .rv-h .f { background: #fff; }
.rv-h { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 28px; gap: 12px; align-items: start; }
.rv-h .f { width: 40px; height: 40px; border-radius: 9px; background: var(--lp-inset); padding: 5px; }
.rv-h .f svg { width: 100%; height: 100%; }
.rv-mn .nm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 700; font-size: 16px; line-height: 1.3; }
.rv-mn .mh { font-size: 13px; color: var(--lp-mut); }
.rv-cue { font-size: 13.5px; color: var(--lp-mid); font-style: italic; margin-top: 2px; line-height: 1.45; }
.rv-tg { align-self: center; display: flex; }
.rv-chk { font-weight: 700; font-size: 12px; background: var(--marigold-t); color: var(--marigold-deep); border-radius: 999px; padding: 2px 9px; white-space: nowrap; font-style: normal; }
.rv-x { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); opacity: 0; flex: none; align-self: center; }
.rv-x svg { width: 13px; height: 13px; }
.rv-mv:hover .rv-x, .rv-part:hover .rv-x, .rv-note:hover .rv-x, .rv-x:focus-visible, .rv-mv.off .rv-x, .rv-part.off .rv-x, .rv-note.off .rv-x { opacity: 1; }
.rv-x:hover { background: #fff; color: var(--lp-ink); }
.rv-mv.off, .rv-part.off, .rv-note.off, .rv-tr.off { opacity: .5; }
.rv-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px 52px; }
.rv-ask .q { font-size: 13.5px; color: var(--lp-mid); font-style: italic; margin-right: 4px; }
.rv-ask button { font-weight: 600; font-size: 13px; background: #fff; box-shadow: 0 0 0 1px var(--lp-line2); border-radius: 999px; padding: 5px 12px; }
.rv-ask button:hover { background: var(--lp-ink); color: #fff; box-shadow: none; }
.rv-well { margin: 8px 0 2px 52px; background: var(--lp-inset); border-radius: 12px; padding: 4px; }
.rv-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 10px; border-radius: 9px; }
.rv-ch .tx { font-weight: 600; font-size: 14.5px; }
.rv-ch .tgs { margin-left: auto; }
.rv-ch .rv-ask { margin: 2px 0; flex-basis: 100%; }
.rv-ch.split .tx { color: var(--lp-mut); }
.rv-well .tg.tempo { background: #fff; }
.rv-mv:hover .rv-well .tg.tempo, .rv-mv.lit .rv-well .tg.tempo { background: var(--lp-inset); }
.rv-tr { display: flex; align-items: center; gap: 10px; padding: 7px 6px 7px 18px; border-radius: 10px; }
.rv-tr svg { width: 17px; height: 17px; color: var(--lp-mut); flex: none; }
.rv-tr span { font-weight: 600; font-size: 14.5px; color: var(--lp-ink); }
.rv-tr small { font-size: 13px; color: var(--lp-mut); }
.rv-note { display: flex; align-items: center; gap: 10px; padding: 7px 6px 7px 10px; border-radius: 10px; font-size: 14px; font-style: italic; color: var(--lp-mid); }
.rv-note > svg { width: 16px; height: 16px; flex: none; color: var(--lp-mut); }
.rv-note small { font-style: normal; font-size: 12.5px; color: var(--lp-mut); white-space: nowrap; }
@media (max-width: 900px) {
  .rv { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(140px, 32%) minmax(0, 1fr); }
  .rv-src { border-right: 0; border-bottom: 1px solid var(--lp-line); padding: 14px 18px; }
  .rv-out { padding: 14px 18px 0; }
  .rv-head { padding: 12px 18px 10px; }
  .rv-ask, .rv-well { margin-left: 0; }
}

/* the template: the paste door; a move's changes and transition, small */
.tb-doors { display: flex; flex-wrap: wrap; gap: 2px; margin: 8px 0 0 -10px; }
.tf-chs { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--lp-mid); padding: 0 6px 2px; }
.tf-chs i, .pr-chs i { font-style: normal; font-weight: 700; color: var(--lp-mut); margin-right: 5px; }
.tf-from { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--lp-mid); padding: 6px 0 0 44px; }
.tf-from svg { width: 15px; height: 15px; color: var(--lp-mut); flex: none; }
.pr-main .pr-chs { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; margin-top: 2px; }
.pr-main .pr-chs span { display: inline; font-size: 13px; color: var(--lp-mid); }

/* Also called (Study 05): on an open card in Moves, and where a search found it */
.mv-card small em, .lib-card small em, .sug small em, .sk-pick small em { font-style: normal; font-weight: 700; color: var(--lp-ink); }
.mv-card .aka { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lp-line); cursor: default; }
.aka h6 { font-size: 12.5px; font-weight: 700; color: var(--lp-mut); margin-bottom: 6px; }
.aka-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.aka-row > span { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13px; background: var(--lp-inset); border-radius: 999px; padding: 3px 10px; }
.aka-row > span.yours { background: var(--lilac-t); color: var(--lilac-deep); padding-right: 4px; }
.aka-row > span button { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: inherit; }
.aka-row > span button:hover { background: #fff; }
.aka-row svg { width: 10px; height: 10px; }
.aka-add { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 13px; color: var(--lp-mid); padding: 3px 8px; border-radius: 999px; }
.aka-add:hover { background: var(--lp-inset); color: var(--lp-ink); }
.aka-add svg { width: 11px !important; height: 11px !important; }
.aka-row input { width: 150px; font-size: 13.5px; border: 0; border-radius: 999px; padding: 4px 11px; background: #fff; box-shadow: var(--focus); outline: none; }
.aka-help { font-size: 12.5px; color: var(--lp-mut); margin-top: 6px; }
@media print {
  .ch-here, .chg-grip, .chg-add, .chg-more, .chg-hb.ghost, .sk-from .sk-x, .rv-wrap { display: none !important; }
  .chg-reps::placeholder { color: transparent !important; }
}
@media (max-width: 900px) {
  .chg { grid-template-columns: 20px minmax(0, 1fr) auto 76px 28px; }
}

.sk-line.has-ch .sk-cue { display: block; }
.fm-chs { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--lp-mid); margin: 2px 0; }
.fm-chs i { font-style: normal; font-weight: 700; color: var(--lp-mut); margin-right: 5px; }
.fm .lib-of { display: block; margin: -2px 0 2px; }

/* ---------- the Sketch, rounds 2 and 3: Make these moves, Missing left side, props ----------
   No shadows: white fills on hairline rings, inset fills, one thin ink line. */
.sk-page { position: relative; }
/* writing highlighted across lines: the same pale blue as a chosen line */
.sk-line.mk-hl { background: #D6E6F7 !important; }
.sk-line.mk-hl .sk-text { background: none; }
body.mk-dragging .sk-page { -webkit-user-select: none; user-select: none; }
.mk-menu { position: absolute; z-index: 16; }
.mk-menu.inline { position: relative; margin: 2px 0 4px 28px; }
.mk-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--lp-ink); background: #fff; border-radius: 999px; padding: 5px 11px 5px 9px; white-space: nowrap; box-shadow: 0 0 0 1px var(--lp-line2); transition: background .15s; animation: mk-in .16s cubic-bezier(.2, .8, .2, 1); }
.mk-btn:hover { background: var(--lp-inset); }
.mk-btn svg { width: 13px; height: 13px; color: var(--pink-deep); }
@keyframes mk-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.sk-line.mk-fresh { animation: mk-fresh 1.6s ease-out; }
@keyframes mk-fresh { from { background: var(--lp-inset); } to { background: transparent; } }
.look-up { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 2px; font-weight: 600; font-size: 12.5px; color: var(--lp-ink); background: var(--lp-inset); border-radius: 999px; padding: 2px 10px 2px 8px; }
.look-up:hover { background: var(--lp-line); }
.look-up svg { width: 12px; height: 12px; }

/* Missing left side: one line under the block's name, then the tray */
.ls-note { display: flex; align-items: center; gap: 8px; background: var(--lp-inset); border-radius: 10px; padding: 4px 4px 4px 10px; margin: 4px 0 6px 28px; font-size: 13.5px; color: var(--lp-mid); }
.sec > .ls-note, .sec > .ls-tray { margin-left: 0; margin-top: 10px; }
.ls-note > svg { width: 15px; height: 15px; color: var(--lp-ink); flex: none; }
.ls-note .t { flex: 1; min-width: 0; line-height: 1.35; }
.ls-note .t b { color: var(--lp-ink); font-weight: 700; }
.ls-add { font-weight: 700; font-size: 12.5px; color: var(--lp-ink); background: #fff; border-radius: 999px; padding: 3px 11px; box-shadow: 0 0 0 1px var(--lp-line2); white-space: nowrap; }
.ls-add:hover { background: var(--lp-line); box-shadow: none; }
.ls-x { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--lp-mid); flex: none; }
.ls-x:hover { background: #fff; color: var(--lp-ink); }
.ls-x svg { width: 11px; height: 11px; }
.ls-tray { display: flex; flex-wrap: wrap; gap: 6px; background: var(--lp-inset); border-radius: 10px; padding: 6px; margin: -2px 0 8px 28px; }
.ls-copy { display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 9px; padding: 3px 10px 3px 4px; font-size: 13px; cursor: grab; box-shadow: 0 0 0 1px var(--lp-line); -webkit-user-select: none; user-select: none; touch-action: none; }
.ls-copy:hover { box-shadow: 0 0 0 1px var(--lp-line2); }
.ls-copy:focus-visible { outline: none; box-shadow: var(--focus); }
.ls-copy .g { width: 13px; height: 13px; color: var(--lp-mut); display: inline-flex; }
.ls-copy .g svg { width: 100%; height: 100%; }
.ls-copy .f { width: 24px; height: 24px; border-radius: 6px; background: var(--ct, var(--lp-inset)); padding: 3px; flex: none; }
.ls-copy .f svg { width: 100%; height: 100%; }
.ls-copy b { font-weight: 700; }
.ls-copy small { font-size: 12px; color: var(--lp-mut); }
.ls-copy.lifted { opacity: .35; }
.ls-ghost { position: fixed; z-index: 70; margin: 0; pointer-events: none; cursor: grabbing; opacity: .96; }
body.ls-dragging, body.ls-dragging * { cursor: grabbing !important; }
.ls-line { position: fixed; z-index: 69; height: 2px; border-radius: 2px; background: rgba(26, 20, 16, .4); pointer-events: none; }
.ls-line[hidden] { display: none; }

/* props: the class's list under its title; each block's on its heading */
.sk-props, .cp-props, .g-props { font-size: 13.5px; color: var(--lp-mid); }
.sk-props { margin: -14px 0 20px; }
.cp-props { padding: 0 0 0 2px; font-size: 13px; }
.g-props { margin: -8px 0 18px; }
.bprops { display: inline-flex; flex-wrap: wrap; gap: 4px; flex: 0 1 auto; min-width: 48px; }
.bprop { font-weight: 600; font-size: 12.5px; color: var(--lp-ink); background: var(--lp-inset); border-radius: 999px; padding: 2px 9px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.prop-wrap { flex: none; }
.prop-door { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 12.5px; color: var(--lp-mid); padding: 3px 9px 3px 7px; border-radius: 999px; opacity: 0; white-space: nowrap; }
.prop-door svg { width: 11px; height: 11px; }
.prop-door:hover, .prop-wrap.on .prop-door { background: var(--lp-inset); color: var(--lp-ink); }
.sk-h:hover .prop-door, .sk-h:focus-within .prop-door, .sec-head:hover .prop-door, .sec-head:focus-within .prop-door, .prop-wrap.on .prop-door, .prop-door:focus-visible { opacity: 1; }
.prop-pop { left: 0; right: auto; width: 260px; }
.prop-pop .pk { font-weight: 500; }
.prop-pop .pk .ck { margin-left: auto; display: inline-flex; opacity: 0; }
.prop-pop .pk .ck svg { width: 14px; height: 14px; color: var(--lp-ink); }
.prop-pop .pk[aria-pressed="true"] .ck { opacity: 1; }
.prop-new { display: flex; gap: 6px; padding: 4px 4px 2px; }
.prop-new input { flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--lp-ink); background: var(--lp-inset); border: 0; border-radius: 9px; padding: 6px 10px; outline: none; }
.prop-new input:focus { background: #fff; box-shadow: var(--focus); }
.g-bprops { font-size: 14px; color: var(--lp-mid); }
@media print {
  .mk-menu, .look-up, .ls-note, .ls-tray, .ls-line, .prop-door { display: none !important; }
  .g-props { margin: 0 0 12px; }
}

/* ---------- View: a dropdown menu over the Sketch (studies/view-and-effort-studies.html Study 01 A) ----------
   A menu, not a panel: it floats above the page and nothing moves. White,
   12px corners, a hairline edge, no shadow. Rows like the Guild's: bold
   name, one italic line, an ink switch. */
.vw-wrap { position: relative; flex: none; }
.vw-btn svg { width: 13px !important; height: 13px !important; margin-left: -2px; transition: transform .16s ease; }
.vw-btn.on { background: var(--lp-inset); }
.vw-btn.on svg { transform: rotate(180deg); }
.vw-menu { position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; width: min(290px, calc(100vw - 32px)); background: #fff; border-radius: var(--r-m); box-shadow: 0 0 0 1px var(--lp-line2); padding: 6px; }
.vw-menu.fresh { animation: vwIn .14s cubic-bezier(.2, .8, .2, 1); transform-origin: top left; }
@keyframes vwIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.vw-row { touch-action: manipulation; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 7px 10px; border-radius: var(--r-s); text-align: left; color: var(--lp-ink); }
.vw-row:hover { background: var(--lp-inset); }
.vw-row:focus-visible { box-shadow: var(--focus); }
.vw-tx { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.vw-tx b { font-weight: 600; font-size: 14px; line-height: 1.3; }
.vw-tx small { font-style: italic; font-size: 12.5px; line-height: 1.35; color: var(--lp-mid); }
.vw-row.all .vw-tx b { font-weight: 700; }
.vw-hr { height: 1px; background: var(--lp-line); margin: 4px 8px; }
/* Figures: Classic | People | Bean, a pill under Moving figures */
.vw-fig { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 4px 6px 4px 10px; }
.vw-fig-l { font-weight: 600; font-size: 14px; color: var(--lp-ink); }
.vw-fig .seg button { min-height: 32px; }
.vw-fig .seg button:focus-visible { box-shadow: var(--focus); }
/* the switch: off is white with a grey edge, on is ink; mixed sits halfway */
.vw-sw { position: relative; width: 34px; height: 20px; flex: none; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #8A8178; }
.vw-sw::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--lp-ink); opacity: 0; transition: opacity .16s ease; }
.vw-sw::after { content: ""; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #8A8178; transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.vw-row[aria-checked="true"] .vw-sw::before { opacity: 1; }
.vw-row[aria-checked="true"] .vw-sw::after { transform: translateX(14px); background: #fff; }
.vw-row[aria-checked="mixed"] .vw-sw::after { transform: translateX(7px); background: var(--lp-ink); }
.vw-row[aria-disabled="true"] { cursor: default; }
.vw-row[aria-disabled="true"]:hover { background: none; }
.vw-row[aria-disabled="true"] .vw-tx b { color: var(--lp-mut); }
.vw-row[aria-disabled="true"] .vw-sw { box-shadow: inset 0 0 0 1.5px var(--lp-line2); }
.vw-row[aria-disabled="true"] .vw-sw::after { background: var(--lp-line2); }
@media (prefers-reduced-motion: reduce) { .vw-menu.fresh { animation: none; } .vw-sw::before, .vw-sw::after, .vw-btn svg { transition: none; } }

/* Watch for: one line under the move, for the teacher */
.sk-watch { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 2px; font-size: 14px; color: var(--lp-mid); }
.sk-watch > svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--lp-ink); }
.sk-watch > b { flex: none; font-weight: 700; font-size: 13.5px; color: var(--lp-ink); line-height: 23px; }
.sk-wt { flex: 1; min-width: 0; border: 0; outline: none; resize: none; overflow: hidden; background: none; font: inherit; font-size: 14.5px; line-height: 21px; color: var(--lp-ink); padding: 1px 6px; border-radius: 6px; }
.sk-wt::placeholder { color: var(--lp-mut); font-style: italic; }
.sk-wt:hover { background: var(--lp-inset); }
.sk-wt:focus { background: var(--lp-inset); }
.g-watch { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--lp-mid); }
.g-watch b { color: var(--lp-ink); font-weight: 700; }
/* the library's adjustments, modifications and amplifications under the
   cue on the Guide (2026-10-25): one small line each */
.g-adj { margin-top: 4px; display: grid; gap: 1px; font-size: 13px; line-height: 1.45; color: var(--lp-mid); }
.g-adj b { color: var(--lp-ink); font-weight: 700; }
.g-opt + .g-adj { margin-top: 1px; }
@media print { .vw-wrap, .watch-door { display: none !important; } }
/* the Watch for door takes its own row under the move's tools, so the
   writing column keeps its width */
.sk-line.move .sk-tools:has(.watch-door) { flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; max-width: 124px; }
.sk-tools .watch-door { white-space: nowrap; }
/* the Sketch's bar on a narrow window: its controls wrap instead of
   squeezing, and the how-to line (the handles say it) steps aside */
@media (max-width: 1100px) { .sk-tip { display: none; } }
@media (max-width: 700px) {
  .sk-bar { flex-wrap: wrap; row-gap: 2px; padding: 6px 12px; }
  .sk-bar .sp { flex-basis: 100%; height: 0; }
  .sk-bar .switch { white-space: nowrap; }
  .sk-page { margin: 12px 0 60px; padding: 28px 18px 40px; }
}

/* ---------- the Sketch, calmer (2026-10-14) ----------
   "Can we make the margins of the doc a little wider? There's too much text
   happening." The song's timing is a Plan thing, not a sketch thing; empty
   fields (tempo and side, how many, what to cue) wait until you reach for the
   move, like every other door; a block's name gets room above its first move. */
.sk-page { max-width: 880px; padding: 64px 112px 72px; }
.sk-line.move .sk-how.unset, .sk-line.move .sk-reps.empty, .sk-line.move .sk-cue.empty { opacity: 0; transition: opacity .15s ease; }
.sk-line.move:hover .sk-how.unset, .sk-line.move:hover .sk-reps.empty, .sk-line.move:hover .sk-cue.empty,
.sk-line.move:focus-within .sk-how.unset, .sk-line.move:focus-within .sk-reps.empty, .sk-line.move:focus-within .sk-cue.empty { opacity: 1; }
.sk-h { margin-bottom: 18px; }
.sk-song { margin: 22px 0 18px 26px; }
@media (max-width: 760px) { .sk-page { padding: 28px 18px 40px; } }
@media (prefers-reduced-motion: reduce) { .sk-line.move .sk-how.unset, .sk-line.move .sk-reps.empty, .sk-line.move .sk-cue.empty { transition: none; } }

/* ---------- Use a template on this class (2026-10-14) ----------
   A white panel on a hairline, no shadow; one pink button. Ticked blocks
   say what will happen to them in one line. */
.ut { background: #fff; border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--lp-line2); padding: 16px 20px 18px; margin: 0 0 20px; max-width: 640px; }
.sk-bar + .ut, .sk-copy + .ut, .selbar + .ut { margin: 16px auto 0; }
.ut-head { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.ut-head h3 { flex: 1; min-width: 0; font-family: var(--fd); font-weight: 700; font-size: 19px; line-height: 1.25; }
.ut-head h3 small { display: block; font-family: var(--fu); font-weight: 600; font-size: 13.5px; color: var(--lp-mid); }
.ut-x, .ut-back { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--lp-mid); }
.ut-back { margin-left: -12px; }
.ut-x { margin-right: -12px; }
.ut-x:hover, .ut-back:hover { background: var(--lp-inset); color: var(--lp-ink); }
.ut-x svg, .ut-back svg { width: 18px; height: 18px; }
.ut-lead { font-size: 14.5px; color: var(--lp-mid); margin: 2px 0 10px; }
.ut-studio { font-family: var(--fu); font-weight: 700; font-size: 14px; color: var(--lp-mid); margin: 14px 0 6px; }
.ut-tpls { display: grid; gap: 2px; }
.ut-tpl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--r-m); text-align: left; }
.ut-tpl:hover { background: var(--lp-inset); }
.ut-tn { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.ut-tm { font-weight: 600; font-size: 13.5px; color: var(--lp-mid); white-space: nowrap; }
.ut-tpl .wbar { grid-column: 1 / -1; height: 6px; margin: 6px 0 0; gap: 2px; }
.ut-tpl .wbar span { border-radius: 2px; }
.ut-blocks { list-style: none; border-top: 1px solid var(--lp-line); }
.ut-b { border-bottom: 1px solid var(--lp-line); padding: 2px 0; }
.ut-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 4px; cursor: pointer; border-radius: var(--r-s); }
.ut-check:hover { background: var(--lp-inset); }
.ut-check input { width: 18px; height: 18px; flex: none; margin: 0 2px 0 4px; accent-color: var(--lp-ink); cursor: pointer; }
.ut-check input:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
.ut-bn { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.ut-bn em { display: block; font-weight: 400; font-size: 13.5px; color: var(--lp-mid); }
.ut-bt { font-weight: 600; font-size: 13.5px; color: var(--lp-mid); white-space: nowrap; }
.ut-what { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; padding: 0 4px 6px 54px; font-size: 14px; color: var(--lp-mid); }
.ut-what > span { flex: 1 1 180px; min-width: 0; }
.ut-what b { color: var(--lp-ink); font-weight: 700; }
.ut-what em { font-size: 13.5px; }
.ut-what .switch { min-height: 44px; font-size: 13.5px; color: var(--lp-ink); }
.ut-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ut-foot .btn { min-height: 44px; }
.bk-top .btn { flex: none; }
@media (max-width: 700px) {
  .bk-page { padding: 18px 16px 48px; }
  .bk-top { flex-wrap: wrap; gap: 10px 12px; }
  .bk-bar { flex-basis: 100%; }
  .ut { padding: 12px 14px 16px; }
  .ut-what { padding-left: 4px; }
}
@media print { .ut { display: none !important; } }
/* the button stays small; its reach is 44px tall */
.bk-top .btn[data-act="ut-open"] { position: relative; }
.bk-top .btn[data-act="ut-open"]::after { content: ""; position: absolute; inset: -6px 0; }

/* ---------- a template takes a studio's words (2026-10-14) ---------- */
/* Paste words: on every block row, small and plain */
.tb-paste { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 4px 10px; min-height: 30px; border-radius: var(--r-pill); font-weight: 600; font-size: 13px; color: var(--lp-mid); white-space: nowrap; position: relative; }
.tb-paste::after { content: ""; position: absolute; inset: -7px 0; }
.tb-paste:hover { background: var(--lp-inset); color: var(--lp-ink); }
.tb-paste svg { width: 13px; height: 13px; }
/* a template's move: name, how many, then its cue and changes under it */
.tf-mv { grid-template-columns: 34px minmax(0, 1fr) 140px 26px 26px; align-items: start; }
.tf-mv > .f, .tf-mv > .tf-mn, .tf-mv > .tf-reps, .tf-mv > .menu-wrap, .tf-mv > .fr-x { margin-top: 2px; }
.tf-mbody { grid-column: 2 / -1; min-width: 0; margin-top: -4px; }
.tf-cue { font-size: 14px; margin: 0; }
.tf-cue.empty { opacity: 0; }
.tf-mv:hover .tf-cue.empty, .tf-mv:focus-within .tf-cue.empty { opacity: 1; }
.tf-mv:hover .fr-x, .tf-mv:focus-within .fr-x, .tf-mv.menu-on .fr-x { opacity: 1; }
.tf .chg-well { background: #fff; margin-left: 0; }
.tf .chg-well .tg.tempo { background: var(--lp-inset); }
.tf .sk-from { margin: 4px 0 0 44px; }
.tf-mv + .tf-mv { border-top: 1px solid #EAEAE7; padding-top: 6px; margin-top: 2px; }
/* the review: what a sentence sets on its part */
.rv-set { flex: none; font-weight: 600; font-size: 12.5px; background: var(--lp-inset); border-radius: 999px; padding: 2px 9px; margin-right: 6px; color: var(--lp-ink); white-space: nowrap; }
.rv-bname input { font: inherit; color: var(--lp-ink); font-weight: 600; border: 0; outline: none; background: var(--lp-inset); border-radius: 8px; padding: 4px 10px; margin-left: 6px; width: 200px; max-width: 50vw; }
.rv-bname input:focus { box-shadow: var(--focus); }
/* New template */
.nt { max-width: 640px; }
@media (max-width: 700px) { .tb-paste { padding: 4px 8px; } .tp-head { flex-wrap: wrap; } }
/* the template on a phone: the name gets the row, time and music go under it */
@media (max-width: 700px) {
  .tp { padding: 18px 16px 60px; }
  .tb-row, .tp-part .tb-row { grid-template-columns: 22px 22px minmax(0, 1fr) auto 34px; row-gap: 2px; }
  .tb-row > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .tb-row > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .tb-row > .tb-main { grid-column: 3 / 5; grid-row: 1; }
  .tb-row > .tb-time { grid-column: 3; grid-row: 2; text-align: left; justify-self: start; width: auto; }
  .tb-row > .tb-mu { grid-column: 4; grid-row: 2; }
  .tb-row > .menu-wrap:last-child { grid-column: 5; grid-row: 1; }
  .tb-nrow { flex-wrap: wrap; }
  .tp-part { margin-left: 0; }
  .tp-part > .tf { margin-left: 0; }
  .tf { padding: 6px 10px; }
  .tf-r { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tf-mv { grid-template-columns: 34px minmax(0, 1fr) 26px 26px; }
  .tf-mv > .tf-reps { grid-column: 2; grid-row: 2; }
  .tf .sk-from { margin-left: 0; }
}
/* the paste review on a narrow window: the box to paste in gets the room */
@media (max-width: 900px) {
  .rv:has(> .rv-empty) { grid-template-rows: minmax(0, 1fr) auto; }
  .rv-out.rv-empty { padding: 10px 18px; }
  .rv-src { min-height: 0; }
  .rv-paste { min-height: 120px; }
}
/* guidelines pass: taps don't wait, the head wraps evenly, a set tag reads upright */
.ut button, .ut-check, .tb-paste, .nt button { touch-action: manipulation; }
.ut-head h3 { text-wrap: balance; }
.rv-set { font-style: normal; }

/* ---------- combos, on the Library tab and the Moves page ----------
   The Guild's combos (app/combos.js). A card is a fill, never an outline:
   tiny figures, the name, its moves as one line. Drag it onto a block, or
   press Add. */
.lib-kind { display: flex; gap: 18px; margin: 0 2px 10px; border-bottom: 1px solid var(--lp-line); }
.lib-kind button { position: relative; font-weight: 600; font-size: 14px; color: var(--lp-mut); padding: 6px 0 9px; min-height: 36px; }
.lib-kind button.on { color: var(--lp-ink); }
.lib-kind button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--lp-ink); }
.lib-kind button:hover { color: var(--lp-ink); }
.lib-grid.cb-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
/* Sequences: yours by song, one click copies one in (2026-10-29), then the library's (2026-11-07) */
.seq-h { font-family: var(--fd); font-weight: 600; font-size: 17px; margin: 12px 2px 0; }
.seq-h:first-child { margin-top: 2px; }
.seq-more { justify-self: start; min-height: 44px; padding: 0 4px; font-size: 15px; }
.libpanel .prt-go { display: none; }
.libpanel .prt-row:hover .prt-go, .libpanel .prt-row:focus-visible .prt-go { display: block; }
.prt-g + .prt-g { margin-top: 10px; }
.prt-song { display: flex; align-items: baseline; gap: 7px; padding: 6px 4px 4px; font-size: 14px; }
.prt-song svg { width: 14px; height: 14px; flex: none; color: var(--purple-deep); align-self: center; }
.prt-song b { font-family: var(--fd); font-weight: 600; }
.prt-song small { font-size: 13px; color: var(--lp-mut); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prt-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 7px 10px 7px 25px; border-radius: 10px; text-align: left; }
.prt-row:hover, .prt-row:focus-visible { background: var(--lp-inset); }
.prt-row:focus-visible { box-shadow: var(--focus); outline: none; }
.prt-t { flex: 1; min-width: 0; }
.prt-t b { display: block; font-weight: 600; font-size: 15px; }
.prt-t small { display: block; font-size: 13px; color: var(--lp-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prt-go { flex: none; font-size: 13px; font-weight: 600; color: var(--lp-ink); background: #fff; border-radius: 999px; padding: 4px 10px; box-shadow: 0 0 0 1px var(--lp-line2); opacity: 0; }
.prt-row:hover .prt-go, .prt-row:focus-visible .prt-go { opacity: 1; }
.cb-shelf { grid-column: 1 / -1; font-family: var(--fd); font-weight: 700; font-size: 15px; margin: 10px 2px 2px; }
.cb-shelf:first-child { margin-top: 2px; }
.cb-card { position: relative; background: var(--lp-inset); border-radius: 12px; padding: 8px 10px 10px 12px; cursor: grab; }
.cb-card:hover { background: #EDEDEA; }
.cb-card:active { cursor: grabbing; }
.cb-top { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.cb-figs { display: flex; gap: 2px; color: var(--lp-ink); flex: 0 1 auto; min-width: 0; overflow: hidden; }
.cb-r { flex: none; }
.cb-f { width: 24px; height: 24px; display: block; }
.cb-f svg { width: 100%; height: 100%; display: block; }
.cb-r { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--lp-mid); white-space: nowrap; }
.cb-r svg { width: 12px; height: 12px; }
.cb-add { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; color: var(--lp-ink); background: #fff; border-radius: 999px; padding: 5px 11px 5px 9px; box-shadow: var(--ring); touch-action: manipulation; }
.cb-add::before { content: ""; position: absolute; inset: -9px -6px; }
.cb-add svg { width: 12px; height: 12px; }
.cb-add:hover { background: var(--lp-ink); color: #fff; box-shadow: none; }
.cb-add:focus-visible { box-shadow: var(--focus); }
.cb-nm { display: block; font-weight: 700; font-size: 14px; line-height: 1.25; margin-top: 4px; }
.cb-line { font-size: 13px; color: var(--lp-mid); line-height: 1.4; margin-top: 2px; }
.cb-line em, .cb-ol .hit, .cb-also em { font-style: normal; font-weight: 700; color: var(--lp-ink); }
.cb-also { display: block; font-size: 12.5px; color: var(--lp-mut); margin-top: 3px; }
.pop.cb-pop { position: static; width: auto; margin-top: 8px; padding: 6px; border-radius: 12px; cursor: default; }
.cb-pop h5 { font-size: 14px; padding: 4px 8px 2px; }
.cb-pop .it { min-height: 40px; }
.cb-pop .it .dot { background: var(--c); }
/* the Moves page: the same combos, larger, each move with its reps */
.mv-grid.cb-browse { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cb-browse .cb-shelf { font-size: 20px; margin: 18px 0 0; }
.cb-browse .cb-shelf:first-child { margin-top: 0; }
.cb-big { cursor: default; }
.cb-big .cb-top { background: var(--lp-inset); border-radius: 12px; padding: 12px 14px; min-height: 64px; }
.cb-big .cb-f { width: 36px; height: 36px; }
.cb-big .cb-r { margin-left: auto; }
.cb-ol { list-style: none; margin-top: 6px; display: grid; gap: 6px; }
.cb-ol li { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.cb-ol li small { display: block; font-weight: 500; font-size: 13px; color: var(--lp-mut); }
.cb-ol li small.cb-ch { color: var(--lp-mid); font-style: italic; }
.page-head .seg { flex: none; }

/* ---------- the header on a narrower window ----------
   One row on a wide screen. Narrower, the tabs take a row of their own
   under the name; on a phone the name, the tabs and the tools stack, and
   the Cues and Music switches fold into More. Never a sideways scroll. */
.cp-tabs { margin-left: 14px; flex: none; }
.cp-tools { display: flex; align-items: center; gap: 16px; flex: none; }
.cp-title { min-width: 0; }
.cp-title input.name { width: min(340px, 100%); max-width: 100%; text-overflow: ellipsis; }
.cp-more { display: none; }
.cp-more-b { min-height: 44px; padding: 0 12px; }
.cp-more-b svg { width: 14px; height: 14px; }
.cp-more-pop { width: 200px; display: grid; gap: 4px; padding: 8px 12px; }
.cp-more-pop .switch { min-height: 44px; }
.saved-s { display: none; }
@media (max-width: 1280px) {
  .cp-head { flex-wrap: wrap; row-gap: 10px; column-gap: 14px; }
  .cp-title { flex: 1 1 280px; }
  .cp-head .sp { display: none; }
  .cp-tools { margin-left: auto; }
  .cp-tabs { order: 5; margin-left: 50px; }
}
@media (max-width: 700px) {
  .lp-bar { padding: 0 16px; gap: 4px; }
  .lp-bar .brand { margin-right: 6px; min-height: 44px; min-width: 44px; justify-content: center; }
  .lp-bar nav a { display: flex; align-items: center; min-height: 44px; padding: 0 13px; }
  .saved-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .saved-s { display: inline; }
  .cp-head { padding: 10px 16px 12px; column-gap: 8px; row-gap: 10px; }
  .cp-back { width: 44px; height: 44px; margin-left: -8px; align-self: flex-start; }
  .cp-title { flex: 1 1 0; }
  .cp-title input.name { width: 100%; font-size: 21px; }
  .cp-meta { flex-wrap: wrap; row-gap: 4px; }
  .cp-meta .cp-dot { display: none; }
  .cp-meta input { min-height: 44px; }
  .cp-head .mins button { min-width: 44px; min-height: 44px; }
  .cp-tabs { order: 5; margin-left: 0; width: 100%; display: flex; }
  .cp-tabs a { flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; }
  .cp-tools { order: 6; width: 100%; margin-left: 0; gap: 8px; }
  .cp-tools > .switch { display: none; }
  .cp-tools .btn { min-height: 44px; }
  .cp-tools > .btn:last-child, .cp-tools > a.btn:last-child { margin-left: auto; }
  .cp-more { display: block; }
  .cp-more .pop { right: auto; left: 0; }
}
@media (max-width: 480px) {
  .lp-bar .brand .lp-wm, .lp-bar .brand [data-lp-wm] { display: none; }
}

/* ---------- the class's pages on a narrower window ----------
   Under 900px the Library opens over the page on the right instead of
   squeezing a third column in. On a phone the Plan drops its list (the
   Blocks tab does that job), and the words and the cues share the width. */
@media (max-width: 1100px) {
  .scroll { overflow-x: hidden; }
  .plan.with-lib { grid-template-columns: minmax(0, 1fr) 290px; }
  .plan.with-lib > .rail { display: none; }
}
@media (max-width: 900px) {
  .plan { grid-template-columns: 200px minmax(0, 1fr); }
  .plan.with-lib { grid-template-columns: minmax(0, 1fr); }
  .grid, .cols { grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; }
  .lrow { grid-template-columns: 60px minmax(0, 1fr); column-gap: 10px; }
  .run-bg { left: 70px; }
  .grp .grip-end { left: calc(70px + (100% - 70px) / 2); }
  .sec { padding: 0 18px 26px; }
  .sec-head { flex-wrap: wrap; row-gap: 6px; }
  .sec-head input.sname { width: auto; flex: 1 1 140px; }
  .sec-head .sp { display: none; }
  .slot-head { flex-wrap: wrap; row-gap: 8px; }
  .bk-wrap { grid-template-columns: minmax(0, 1fr); }
  .libpanel, .plan .libpanel { position: fixed; z-index: 35; right: 0; top: 60px; bottom: 0; width: min(360px, 100%); height: auto; }
}
@media (max-width: 700px) {
  .page { padding: 24px 16px 60px; }
  .page-head { flex-wrap: wrap; row-gap: 12px; }
  .page-head > div:first-child { flex: 1 1 100%; }
  .page-head .sp { display: none; }
  .page-head h1 { font-size: 30px; }
  .page-head .seg { margin-right: auto !important; }
  .page-head .btn { min-height: 44px; }
  .page-head .seg button { min-height: 44px; }
  .mv-filters button { min-height: 44px; }
  .cl-row { grid-template-columns: 52px minmax(0, 1fr) auto 44px; gap: 6px 12px; padding: 12px 6px; }
  .cl-bar { grid-column: 2 / 4; grid-row: 2; }
  .cl-del { grid-column: 4; grid-row: 1; width: 44px; height: 44px; opacity: 1; }
  .plan, .plan.with-lib { grid-template-columns: minmax(0, 1fr); }
  .plan > .rail { display: none; }
  .sec { padding: 0 14px 24px; }
  .sec-head input.sname { font-size: 20px; }
  .s-song { margin-left: 0; padding-left: 0; border-left: 0; flex: 1 1 100%; }
  .s-song b, .s-song small { max-width: 100%; }
  .grid, .cols { grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; }
  .cols2, .grid.big { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); column-gap: 8px; }
  .lrow { grid-template-columns: 50px minmax(0, 1fr); column-gap: 8px; }
  .run-bg { left: 58px; }
  .grp .grip-end { left: calc(58px + (100% - 58px) / 2); }
  .selbar, .composer, .medit, .grid.big .selbar, .grid.big .composer { left: 0; width: 100%; }
}
@media (max-width: 700px) {
  .bk-page { padding: 18px 14px 50px; }
  .bk-top { flex-wrap: wrap; row-gap: 10px; }
  .tl-row { grid-template-columns: 46px minmax(0, 1fr); gap: 8px; }
  .tl-head { flex-wrap: wrap; row-gap: 4px; }
  .tl-head .bl-name { flex: 1 1 120px; min-width: 0; }
  .bl-row { grid-template-columns: 16px 22px minmax(0, 1fr) 40px; }
  .bl-row > :nth-child(4) { grid-column: 3; grid-row: 2; }
  .sk-h { flex-wrap: wrap; row-gap: 4px; }
  .sk-h .sk-bname { flex: 1 1 140px; min-width: 0; }
  .sk-h .sk-time { margin-left: auto; }
  .guide { padding: 16px 14px 50px; }
  .g-hd { display: none; }
  .g-row { grid-template-columns: 52px minmax(0, 1fr); gap: 8px 12px; padding: 14px 6px; }
  .g-row > :first-child { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; }
  .g-row > :first-child:empty { display: none; }
  .g-row .fig { width: 52px; height: 52px; }
  .g-row > .len, .g-row > .g-cue { grid-column: 2; }
  .g-phase, .guide .g-song { padding-left: 0; }
  .libpanel, .plan .libpanel { width: 100%; border-left: 0; }
}
/* guidelines pass on the combos and the narrow header: taps don't wait */
.lib-kind button, .cb-pop .it, .cp-tabs a, .cp-more-b, .cp-more-pop .switch { touch-action: manipulation; }

/* ---------- the Plan, placing on the music (2026-10-14) ----------
   Every Plan pop-up docks in the room to the left of the words, level with
   the line it is about; it never covers a lyric, a move or the cue column.
   .room: the words give up the room for good (the waiting moves live there).
   .fold: the block list folds away while a pop-up is open, and its width is
   the room, so the words never move. .sheet: a phone, or no list to fold:
   the pop-up rises from the bottom. White, hairlines, no shadows. */
.plan { --zone: 0px; }
.plan.zoned .sec { padding-left: calc(30px + var(--zone)); }
.plan.fold > .rail { display: none; }
.plan.fold > .scroll { grid-column: 1 / 3; grid-row: 1; }
.plan.fold > .libpanel { grid-column: 3; grid-row: 1; }
@media (max-width: 1200px) {
  .plan { grid-template-columns: 240px minmax(0, 1fr); }
  .plan.zoned .sec { padding-left: calc(20px + var(--zone)); }
}
@media (max-width: 1400px) { .plan.with-lib { grid-template-columns: 240px minmax(0, 1fr) 290px; } }
@media (max-width: 1100px) { .plan.with-lib { grid-template-columns: minmax(0, 1fr) 290px; } }
@media (max-width: 900px) { .plan { grid-template-columns: 200px minmax(0, 1fr); } .plan.zoned .sec { padding-left: calc(18px + var(--zone)); } .plan.with-lib { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .plan, .plan.with-lib { grid-template-columns: minmax(0, 1fr); } }
.slot { position: relative; }
.slot-zone { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--zone)); width: var(--zone); }
.plan:not(.zoned) .slot-zone { width: 0; overflow: visible; }
.dock-pop { position: absolute; z-index: 20; left: 0; right: 18px; top: 0; background: #fff; border-radius: 14px; padding: 12px 12px 12px; box-shadow: 0 0 0 1px var(--lp-line2); user-select: none; font-size: 14px; }
.plan.sheet .dock-pop { position: fixed; z-index: 40; left: 0; right: 0; top: auto !important; bottom: 0; max-height: 42vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: 14px 16px 18px; }
.plan.sheet .scroll { padding-bottom: 42vh; }
.dock-pop .dp-h { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.dock-pop .dp-h .f { width: 34px; height: 34px; flex: none; border-radius: 8px; background: var(--lp-inset); padding: 4px; }
.dock-pop .dp-h .f svg { width: 100%; height: 100%; }
.dock-pop .dp-t { flex: 1; min-width: 0; line-height: 1.3; }
.dock-pop .dp-t b { display: block; font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
.dock-pop .dp-t small { display: block; font-size: 12.5px; color: var(--lp-mut); }
.dock-pop .x { width: 32px; height: 32px; flex: none; margin: -4px -4px 0 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); touch-action: manipulation; }
.dock-pop .x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.dock-pop .x svg { width: 14px; height: 14px; }
.dp-lab { font-size: 12.5px; font-weight: 600; color: var(--lp-mut); margin: 10px 0 5px; }
.dp-lab:empty { margin: 4px 0 0; }
.dp-lead { font-size: 14.5px; margin: 2px 0 2px; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dp-chips + .dp-chips { margin-top: 4px; }
.dp-chips button { font-weight: 600; font-size: 13px; background: var(--lp-inset); border-radius: 999px; padding: 5px 10px; min-height: 30px; text-align: left; touch-action: manipulation; }
.dp-chips button small { display: block; font-weight: 500; font-size: 11.5px; color: var(--lp-mut); }
.dp-chips button:hover { background: var(--lp-line2); }
.dp-chips button.on { background: var(--lp-ink); color: #fff; }
.dp-chips button.on small { color: #fff; }
.dp-chips button.mine { background: var(--pink-t); }
.dp-chips .pdot { margin-right: 6px; }
.dp-chips.cnt-n button { min-width: 40px; min-height: 36px; text-align: center; font-family: var(--fd); font-weight: 800; font-size: 16px; color: var(--pink-deep); }
.dp-chips.cnt-n button.on { color: #fff; }
.dp-acts { display: flex; flex-direction: column; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--lp-line); }
.dp-act { display: flex; align-items: flex-start; gap: 8px; text-align: left; font-weight: 600; font-size: 13.5px; padding: 8px 6px; min-height: 36px; border-radius: 8px; touch-action: manipulation; }
.dp-act svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--lp-mid); }
.dp-act small { display: block; font-weight: 500; font-size: 12px; color: var(--lp-mut); overflow-wrap: anywhere; }
.dp-act:hover { background: var(--lp-inset); }
.dp-note { font-size: 13px; color: var(--lp-mut); padding: 6px 6px 2px; }
.dp-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.dp-foot.col { flex-direction: column; align-items: flex-start; }
.dock-pop .link { font-size: 13px; font-weight: 600; color: var(--lp-mid); text-decoration: underline; text-underline-offset: 3px; min-height: 28px; }
.dock-pop .link:hover { color: var(--lp-ink); }
.dp-stay { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; background: var(--lp-inset); border-radius: 10px; padding: 9px 10px; margin: 4px 0 2px; font-size: 14px; touch-action: manipulation; }
.dp-stay svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--pink-deep); }
.dp-stay small { display: block; font-size: 12px; color: var(--lp-mut); }
.dp-stay:hover { background: var(--lp-line2); }
.dp-q { display: flex; align-items: center; gap: 6px; background: var(--lp-inset); border-radius: 10px; padding: 0 10px; margin-top: 8px; }
.dp-q svg { width: 15px; height: 15px; color: var(--lp-mut); flex: none; }
.dp-q input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 14.5px; padding: 9px 0; }
.dp-q:focus-within { box-shadow: var(--focus); }
.dp-res { max-height: 300px; overflow-y: auto; margin: 2px -4px 0; padding: 0 4px; }
.dp-res:empty { display: none; }
.dp-list { display: flex; flex-direction: column; gap: 2px; }
.dp-mv { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 5px 6px; border-radius: 8px; min-height: 40px; touch-action: manipulation; }
.dp-mv .f { width: 30px; height: 30px; flex: none; border-radius: 7px; background: var(--lp-inset); padding: 3px; color: var(--lp-ink); }
.dp-mv .f svg { width: 100%; height: 100%; }
.dp-mv .nm { min-width: 0; line-height: 1.25; }
.dp-mv b { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.dp-mv small { display: block; font-size: 12px; color: var(--lp-mut); }
.dp-mv:hover, .dp-mv.on { background: var(--lp-inset); }
.dp-mv.on .f { background: #fff; }
.dp-mv.picked { background: var(--pink-t); }
.dp-mv .pk { font-weight: 800; font-size: 12px; width: 18px; text-align: center; color: var(--pink-deep); }
.dp-own { display: block; margin-top: 8px; }
.dp-own input { width: 100%; border: 0; background: var(--lp-inset); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; outline: none; }
.dp-own input:focus { box-shadow: var(--focus); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dp-parts { display: flex; flex-direction: column; }
.dp-parts button { display: flex; align-items: center; gap: 8px; text-align: left; font-weight: 600; font-size: 13.5px; padding: 7px 6px; border-radius: 8px; min-height: 36px; touch-action: manipulation; }
.dp-parts button small { margin-left: auto; font-weight: 500; color: var(--lp-mut); font-size: 12.5px; }
.dp-parts button:hover { background: var(--lp-inset); }
.dock-pop.composer { width: auto; }
.dock-pop.composer .sugs { grid-template-columns: 1fr; }
.dock-pop.composer .opts { flex-wrap: wrap; }
.cnt-pick { display: none; }
/* moves waiting under a song: small chips, dragged onto a line or clicked */
.wait { margin: 10px 0 2px; }
.wait-h { font-size: 12.5px; font-weight: 600; color: var(--lp-mut); margin-bottom: 5px; }
.wait-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wchip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; background: var(--lp-inset); border-radius: 999px; padding: 3px 11px 3px 4px; min-height: 32px; cursor: grab; touch-action: manipulation; max-width: 100%; }
.wchip svg { width: 24px; height: 24px; flex: none; background: #fff; border-radius: 50%; padding: 2px; }
.wchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wchip:hover { background: var(--lp-line2); }
.wait.zone { position: sticky; top: 8px; padding-right: 18px; margin-top: 0; }
.wait.zone .wait-chips { flex-direction: column; align-items: flex-start; }
.plan.room .wait.flow { display: none; }
.plan:not(.room) .wait.zone { display: none; }
/* the cue column reads the move; Details opens it in the side panel */
.cue button.mname { font-weight: 700; font-size: 15.5px; text-align: left; padding: 1px 4px; margin-left: -4px; border-radius: 6px; padding-right: 70px; overflow-wrap: anywhere; }
.cue button.mname:hover { background: var(--lp-inset); }
.cue .cue-tx { grid-column: 1 / -1; text-align: left; font-size: 14.5px; color: var(--lp-mid); line-height: 1.5; margin-top: 6px; padding: 4px 6px; margin-left: -6px; border-radius: 8px; white-space: pre-wrap; }
.cue .cue-tx:hover { background: var(--lp-inset); color: var(--lp-ink); }
.cue .g-opt { grid-column: 1 / -1; }
/* the side panel's Move tab */
.mv-pane { flex: 1; overflow-y: auto; padding: 4px 2px 24px; }
.mvp-h { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 6px; }
.mvp-h .f { width: 46px; height: 46px; flex: none; border-radius: 10px; background: var(--lp-inset); padding: 5px; }
.mvp-h .f svg { width: 100%; height: 100%; }
.mvp-t { flex: 1; min-width: 0; }
.mvp-name { width: 100%; font-family: var(--fd); font-weight: 700; font-size: 19px; border: 0; outline: none; background: none; padding: 2px 6px; margin-left: -6px; border-radius: 8px; }
.mvp-name:hover, .mvp-name:focus { background: var(--lp-inset); }
.mvp-t small { display: block; font-size: 13px; color: var(--lp-mid); margin-bottom: 4px; }
.mv-pane .me-lab { display: block; font-size: 13px; font-weight: 600; color: var(--lp-mut); margin: 14px 0 5px; }
.mv-pane textarea, .mv-pane .me-reps { width: 100%; border: 0; background: var(--lp-inset); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 15px; line-height: 1.5; outline: none; resize: vertical; }
.mv-pane textarea:focus, .mv-pane .me-reps:focus { box-shadow: var(--focus); }
.mv-pane .opts, .mv-pane .mus-fold { margin-top: 12px; }
.mvp-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--lp-line); }
/* library cards: with lines highlighted the card is the button */
.lib-card { cursor: grab; }
.lib-card.picks { cursor: pointer; }
.lib-card.picks:hover { background: var(--pink-t); }
.lib-card:focus-visible { box-shadow: var(--focus); outline: none; }
.lib-add { width: auto; max-width: calc(100% - 10px); left: auto; height: 26px; padding: 0 9px 0 7px; gap: 4px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.lib-add span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-add .cb-to-n { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .dock-pop { animation: dp-in 140ms ease-out; } }
@keyframes dp-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media print { .slot-zone, .wait { display: none !important; } }
.dock-pop.selbar, .dock-pop.medit, .dock-pop.composer, .grid.big .dock-pop { left: 0; right: 18px; width: auto; }
.plan.sheet .dock-pop.selbar, .plan.sheet .dock-pop.medit, .plan.sheet .dock-pop.composer { left: 0; right: 0; width: auto; }
.dp-q input:focus, .dp-q input:focus-visible { box-shadow: none; outline: none; }
/* a change inside a move reads as its own step: a hairline across the run
   where it starts, its name on that lyric, and the card lists each with its time */
.ln.ch-start { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tint, #ECECEA) 40%, #1A1410 30%); }
.grid.big .ln.has-ch { display: flex; align-items: center; gap: 8px; }
.grid.big .ln.has-ch .w { flex: 1; min-width: 0; }
.ch-list { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.ch-it { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; text-align: left; font-size: 13.5px; padding: 3px 6px; margin-left: -6px; border-radius: 6px; color: var(--lp-mid); }
.ch-it em { font-style: normal; font-weight: 700; font-size: 12.5px; color: var(--lp-mut); min-width: 30px; }
.ch-it b { font-weight: 700; color: var(--lp-ink); }
.ch-it:hover { background: rgba(255,255,255,.7); }
.mv2 .ch-list { grid-column: 2; }
.mv2 .ch-it { font-size: 14.5px; }
.cue .ch-list { margin-top: 4px; }
@media (max-width: 900px) {
  .cue button.mname { padding-right: 0; }
  .cue .off { position: static; opacity: 1; grid-column: 1 / -1; justify-self: start; margin-top: 6px; padding: 6px 10px; background: var(--lp-inset); }
}
/* blocks: the whole row drags; a thin line shows where it lands; Add a block between two */
.r-sec, .bl-row, .tl-band { position: relative; }
.bl-row, .tl-band { cursor: grab; }
.bl-row:focus-visible, .tl-band:focus-visible, .r-sec:focus-visible { box-shadow: var(--focus); outline: none; }
.bk-dragging { opacity: .45; }
.bk-over-top::after, .bk-over-bot::after { content: ""; position: absolute; left: 4px; right: 4px; height: 2px; border-radius: 2px; background: rgba(26, 20, 16, .4); pointer-events: none; z-index: 3; }
.bk-over-top::after { top: -6px; }
.bk-over-bot::after { bottom: -6px; }
.bk-gap { position: relative; height: 12px; }
.bk-gap.bg-tl { margin-left: 86px; }
.bk-gap::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: var(--lp-line2); opacity: 0; }
.bk-ins { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 12px; color: var(--lp-mid); background: #fff; border-radius: 999px; padding: 2px 9px 2px 7px; box-shadow: 0 0 0 1px var(--lp-line2); white-space: nowrap; opacity: 0; touch-action: manipulation; }
.bk-ins svg { width: 11px; height: 11px; }
.bk-gap:hover::before, .bk-gap:focus-within::before { opacity: 1; }
.bk-gap:hover .bk-ins, .bk-ins:focus-visible { opacity: 1; }
.bk-ins:hover { color: var(--lp-ink); }
.bk-ins:focus-visible { box-shadow: var(--focus); }
.tl { gap: 0; }
.bl-row.drop, .r-sec.drop { box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .bk-ins, .bk-gap::before { transition: opacity 120ms ease-out; } }
@media print { .bk-gap { display: none; } }
/* a block's songs in the Plan's list: letter, title, time, and Take this song off */
.r-slot.sg { grid-template-columns: 14px minmax(0, 1fr) auto 28px; align-items: center; gap: 0 8px; padding-right: 4px; }
.r-slot.sg .lt { font-size: 11.5px; font-weight: 700; color: var(--lp-mut); }
.r-slot.sg .nm { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-slot.sg .mn { grid-column: 3; grid-row: 1; }
.r-slot-x { grid-column: 4; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); opacity: 0; touch-action: manipulation; }
.r-slot-x svg { width: 12px; height: 12px; }
.r-slot:hover .r-slot-x, .r-slot-x:focus-visible { opacity: 1; }
.r-slot-x:hover { background: #fff; color: var(--lp-ink); }
.r-slot-x:focus-visible { box-shadow: var(--focus); }
@media (hover: none) { .r-slot-x { opacity: 1; } }
/* the paste review: her words stay editable (a mirror lights the words a
   translated line came from), and every translated line is written in place */
.rv-ed { position: relative; flex: 1; min-height: 0; overflow-y: auto; background: var(--lp-inset); border-radius: 14px; }
.rv-ed:focus-within { background: #fff; box-shadow: var(--focus); }
.rv-ed .rv-mirror, .rv-ed .rv-live { display: block; width: 100%; margin: 0; padding: 18px 20px; font: inherit; font-size: 15px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: break-word; letter-spacing: normal; }
.rv-ed .rv-mirror { position: absolute; inset: 0; height: auto; min-height: 100%; overflow: visible; background: none; border-radius: 0; color: transparent; pointer-events: none; }
.rv-ed .rv-mirror .sn { color: transparent; }
.rv-ed .rv-mirror .sn.lit { background: #FFE88A; color: transparent; }
.rv-ed .rv-live { position: relative; z-index: 1; min-height: 100%; resize: none; border: 0; outline: none; background: transparent; color: var(--lp-ink); overflow: hidden; }
.rv-in { font: inherit; color: inherit; border: 0; background: transparent; border-radius: 6px; padding: 2px 6px; margin-left: -6px; min-width: 0; outline: none; }
.rv-in:hover { background: #fff; box-shadow: 0 0 0 1px var(--lp-line2); }
.rv-in:focus { background: #fff; box-shadow: var(--focus); }
.rv-in::placeholder { color: var(--lp-mut); font-weight: 500; }
.rv-mvn { font-weight: 700; font-size: 16px; width: 100%; max-width: 360px; }
.rv-pn { flex: 1; font-family: var(--fd); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.rv-how { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; font-size: 13px; color: var(--lp-mid); }
.rv-sel { font-size: 13px; font-weight: 600; color: var(--lp-mid); margin-left: 0; padding: 3px 4px; background: var(--lp-inset); cursor: pointer; }
.rv-rp { width: 110px; font-size: 13px; }
.rv-ch .rv-ct { flex: 1 1 140px; font-weight: 600; font-size: 14.5px; }
.rv-ch .rv-x { opacity: .7; }
.rv-tr .rv-fr { flex: 1; font-weight: 600; font-size: 14.5px; }
.rv-tr .rv-x { opacity: .7; margin-left: 2px; }
.rv-note .rv-nt { flex: 1; font-style: italic; resize: none; overflow: hidden; line-height: 1.5; }
.rv-sets { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rv-set { display: inline-flex; align-items: center; gap: 2px; }
.rv-num { width: 48px; font-weight: 700; padding: 0 2px; margin-left: 0; }
.rv-tm { width: 92px; font-weight: 700; margin-left: 0; }
.rv-set-x { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--lp-mut); }
.rv-set-x svg { width: 10px; height: 10px; }
.rv-set-x:hover { background: #fff; color: var(--lp-ink); }
/* squeeze: the Library open on a narrow window, a pop-up open: the column
   beside the words steps aside so the room on the left never covers them */
.plan.squeeze .grid:not(.big), .plan.squeeze .cols { grid-template-columns: 96px minmax(0, 1fr) 0; }
.plan.squeeze .grid:not(.big) > .cue, .plan.squeeze .grid > .stack, .plan.squeeze .cols > span:last-child { display: none; }
.plan.squeeze .grid.big, .plan.squeeze .cols2 { grid-template-columns: 0 74px minmax(0, 1fr); }
.plan.squeeze .grid.big > .mv2, .plan.squeeze .cols2 > span:first-child { display: none; }
.join-up { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--lp-mid); padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.7); touch-action: manipulation; }
.join-up svg { width: 13px; height: 13px; }
.join-up:hover { background: #fff; color: var(--lp-ink); }
/* a block without a song on the Plan: one compact line per move, one even
   rhythm (8px between rows, 24px before a part, about 48px before a block) */
.plan .free { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.plan .free h6 { margin: 0; }
.plan .fm { grid-template-columns: 36px minmax(0, 1fr) 170px 110px 96px; gap: 12px; align-items: center; padding: 4px 6px; border-bottom: 0; border-radius: 10px; }
.plan .fm .fm-how { justify-self: start; }
.fm-hb { white-space: normal; text-align: left; margin-left: -8px; }
.plan .fm:hover, .plan .fm:focus-within { background: var(--lp-inset); }
.plan .fm .f { width: 36px; height: 36px; border-radius: 9px; padding: 4px; }
.plan .fm:hover .f, .plan .fm:focus-within .f { background: #fff; }
.fm-main { min-width: 0; }
.fm-n { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.fm-name { font-weight: 700; font-size: 15.5px; line-height: 1.3; text-align: left; overflow-wrap: break-word; word-break: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding: 1px 4px; margin-left: -4px; border-radius: 6px; }
.fm-name:hover { background: #fff; }
.plan .fm .fm-chs { margin: 1px 0 0; }
.fm-hb { font-weight: 600; font-size: 13.5px; color: var(--lp-mid); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.fm-hb:hover { background: #fff; color: var(--lp-ink); }
.fm-hb.unset, .plan .fm input.reps.empty { opacity: 0; }
.plan .fm:hover .fm-hb.unset, .plan .fm:focus-within .fm-hb.unset, .plan .fm:hover input.reps.empty, .plan .fm:focus-within input.reps.empty { opacity: 1; }
.plan .fm input.reps { font-size: 15px; }
.plan .fm input.reps:hover, .plan .fm input.reps:focus { background: #fff; }
.fm-acts { display: flex; align-items: center; gap: 2px; }
.plan .fm .off { opacity: 0; }
.plan .fm:hover .off, .plan .fm:focus-within .off { opacity: 1; }
.plan .fm .off.ic { width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; }
.plan .fm .off.ic svg { width: 15px; height: 15px; }
.plan .phase { margin-top: 24px; }
.plan .sec { padding-bottom: 34px; }
@media (max-width: 700px) {
  .plan .fm { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 2px; }
  .plan .fm input.reps { grid-column: 2; }
  .plan .fm .fm-acts { grid-column: 3; grid-row: 2; }
  .fm-hb.unset, .plan .fm input.reps.empty, .plan .fm .off { opacity: 1; }
}

/* ===================================================================
   THE SKETCH, LAID OUT; EFFORT; BLOCKS AS CONTAINERS (2026-10-14)
   sketch-layout-studies.html (02 one rhythm, 03 bigger names, 04 the
   outline, Q1 A columns, Q2 dots, Q3 the name stays, Q4 a dropdown);
   effort-delicate-studies.html (A, a numeral is the handle, 1 to 10).
   One rhythm: 4 inside a move, 8 between moves, 24 before a song or a
   part, 48 before a block. No drop shadows; rings are fills or hairlines.
   =================================================================== */
.sk2 { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: calc(100vh - var(--barH, 60px) - var(--headH, 69px)); }
.sk2.with-lib { grid-template-columns: auto minmax(0, 1fr) 340px; }
@media (max-width: 1400px) { .sk2.with-lib { grid-template-columns: auto minmax(0, 1fr) 290px; } }
.sk2 > * { min-height: 0; }
.sk2 .libpanel { height: 100%; }
.sk-main { height: 100%; overflow-x: hidden; container: skmain / inline-size; }
/* a narrow middle (the outline and the Library both open): the bar wraps, the margin narrows */
@container skmain (max-width: 760px) {
  .sk2 .sk-bar { flex-wrap: wrap; row-gap: 2px; padding: 6px 12px; }
  .sk2 .sk-bar .sp { flex-basis: 100%; height: 0; }
  .sk2 .sk-stage { padding: 0 20px 0 76px; }
}

/* ---------- the outline: folded to dots, or open ---------- */
.sk-ol { width: 272px; overflow-y: auto; border-right: 1px solid var(--lp-line); background: #fff; padding: 12px 10px 28px; }
.sk-ol.mini { width: 56px; padding: 8px 6px 24px; display: flex; flex-direction: column; align-items: center; }
.ol-tog { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--lp-mid); touch-action: manipulation; }
.ol-tog:hover { background: var(--lp-inset); color: var(--lp-ink); }
.ol-tog svg { width: 18px; height: 18px; }
.ol-dots { display: flex; flex-direction: column; margin-top: 8px; }
.ol-dot { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; touch-action: manipulation; }
.ol-dot .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); transition: transform .16s cubic-bezier(.2, .8, .2, 1); }
.ol-dot:hover { background: var(--lp-inset); }
.ol-dot.on { background: var(--ct); }
.ol-dot.on .dot { transform: scale(1.25); }
.ol-h { display: flex; align-items: center; padding-left: 10px; }
.ol-h b { flex: 1; font-family: var(--fd); font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.ol-sub { font-size: 13px; color: var(--lp-mut); padding: 0 10px; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.ol-list { display: flex; flex-direction: column; }
.ol-b, .ol-s, .ol-p, .ol-add { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; text-align: left; border-radius: 10px; touch-action: manipulation; }
.ol-b { padding: 0 10px; margin-top: 6px; }
.ol-b:first-child { margin-top: 0; }
.ol-b .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.ol-b .nm { flex: 1; min-width: 0; font-family: var(--fd); font-weight: 700; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-b .mn, .ol-p .mn { flex: none; font-size: 13px; font-weight: 600; color: var(--lp-mid); font-variant-numeric: tabular-nums; }
.ol-b:hover { background: var(--lp-inset); }
.ol-b.on, .ol-b.on:hover { background: var(--ct); }
.ol-b.on .mn { color: var(--lp-ink); }
.ol-s, .ol-p { gap: 8px; padding: 0 10px 0 30px; font-size: 14px; color: var(--lp-mid); }
.ol-s svg { width: 14px; height: 14px; flex: none; }
.ol-s .nm, .ol-p .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-s:hover, .ol-p:hover { background: var(--lp-inset); color: var(--lp-ink); }
.ol-plan { font-size: 13px; font-style: italic; line-height: 1.4; color: var(--lp-mid); padding: 0 10px 6px 52px; }
.ol-plan a { color: var(--lp-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; border-radius: 4px; }
.ol-add { gap: 8px; padding: 0 10px 0 30px; font-size: 14px; font-weight: 600; color: var(--lp-ink); }
.ol-add svg { width: 13px; height: 13px; flex: none; }
.ol-add:hover { background: var(--lp-inset); }
.ol-add.ol-addb { padding-left: 10px; margin-top: 16px; color: var(--lp-mid); }
.ol-add.ol-addb:hover { color: var(--lp-ink); }
@media (pointer: fine) { .ol-s, .ol-p, .ol-add { min-height: 38px; } .ol-b { min-height: 42px; } }
/* Add a block at the top of the outline (2026-10-16: "i also need that to be easier to see") */
.ol-add.ol-addt { padding-left: 10px; margin: 6px 0 8px; min-height: 44px; }

/* on a phone: a dropdown at the top, in the block's color */
.ol-drop { display: none; }
@media (max-width: 700px) {
  .sk2, .sk2.with-lib { grid-template-columns: minmax(0, 1fr); }
  .sk2 > .sk-ol { display: none; }
  .ol-drop { display: block; position: sticky; top: var(--skbarH, 0px); z-index: 9; background: #fff; padding: 8px 16px; border-bottom: 1px solid var(--lp-line); }
  .ol-drop-b { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px; background: var(--ct); border-radius: 12px; text-align: left; touch-action: manipulation; }
  .ol-drop-b .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
  .ol-drop-b .tx { flex: 1; min-width: 0; }
  .ol-drop-b b { display: block; font-family: var(--fd); font-weight: 800; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ol-drop-b small { display: block; font-size: 12.5px; color: var(--lp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ol-drop-b > svg { width: 16px; height: 16px; flex: none; transition: transform .16s ease-out; }
  .ol-drop.open .ol-drop-b > svg { transform: rotate(180deg); }
  .ol-drop-pop { position: absolute; left: 16px; right: 16px; top: calc(100% - 4px); background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--lp-line2); padding: 12px 6px 8px; max-height: min(64vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- the stage: the effort line's room, then the page ---------- */
.sk-stage { position: relative; padding: 0 32px 0 136px; }
.sk2 .sk-page { max-width: 940px; margin: 0 auto; padding: 48px 0 96px; background: none; box-shadow: none; border-radius: 0; container-type: inline-size; }
.sk2 .sk-title { font-size: 32px; }
.sk2 .sk-meta { margin: 4px 0 0; }
.sk2 .sk-props { margin: 8px 0 0; }
@media (max-width: 700px) {
  .sk2 .sk-stage { padding: 0 16px; }
  .sk2.eff-on .sk-stage { padding-left: 60px; }
  .sk2 .sk-page { padding: 24px 0 72px; }
  .sk2 .sk-title { font-size: 26px; }
}

/* ---------- a block: a pale band of its color that stays at the top ---------- */
.sk2 .sk-block { margin-top: 48px; border-radius: 0; }
.sk2 .sk-h.sk-band { position: sticky; top: var(--sktopH, 0px); z-index: 6; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; min-height: 60px; padding: 8px 18px; margin: 0 0 8px; background: var(--ct); border: 0; border-radius: 12px; box-shadow: 0 0 0 6px #fff; }
.sk-band .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.sk2 .sk-band .sk-bname { flex: 0 1 auto; field-sizing: content; min-width: 3ch; max-width: 100%; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; padding: 2px 6px; margin-left: -6px; border-radius: 8px; background: none; }
.sk2 .sk-band .sk-bname:hover, .sk2 .sk-band .sk-bname:focus { background: rgba(255, 255, 255, .7); }
.sk-when { font-size: 15px; font-weight: 500; color: var(--lp-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-when b { font-weight: 700; }
.sk-bsong { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; color: var(--lp-ink); }
.sk-bsong svg { width: 15px; height: 15px; flex: none; }
.sk-bsong span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk2 .sk-band .prop-wrap { margin-left: auto; }
@media (max-width: 700px) {
  .sk2 .sk-block { margin-top: 32px; }
  .sk2 .sk-h.sk-band { min-height: 52px; padding: 6px 12px; gap: 0 10px; }
  .sk2 .sk-band .sk-bname { font-size: 22px; }
  .sk-when, .sk-bsong { font-size: 13.5px; }
}
.sk2 .sk-search { margin: 8px 0 16px 30px; }

/* songs and parts inside a block: 24 above, a hairline under */
.sk2 .sk-song { display: flex; align-items: center; gap: 8px; margin: 24px 0 8px; padding: 0 0 8px 18px; border-bottom: 1px solid var(--lp-line); font-size: 14.5px; color: var(--lp-mid); }
.sk2 .sk-band + .sk-song, .sk2 .sk-band + .sk-search + .sk-song { margin-top: 8px; }
.sk2 .sk-song.one { display: block; height: 0; margin: 0; padding: 0; border: 0; }
.sk2 .sk-song .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.sk2 .sk-song b { font-family: var(--fd); font-weight: 700; font-size: 17px; color: var(--lp-ink); }
.sk2 .sk-song svg { width: 14px; height: 14px; color: var(--lp-mid); }
.sk2 .sk-song span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk2 .sk-song ~ .sk-line { margin-left: 0; }
.sk2 .sk-ph { display: flex; align-items: center; gap: 10px; margin: 24px 0 8px; padding: 0 0 6px 18px; border-bottom: 1px solid var(--lp-line); }
.sk2 .sk-ph .ph-name { font-family: var(--fd); font-weight: 700; font-size: 17px; }
.sk2 .sk-ph span { font-size: 14px; color: var(--lp-mid); white-space: nowrap; }

/* ---------- one line per move, in columns (Q1 A) ---------- */
.sk2 .sk-line { grid-template-columns: 20px 36px minmax(0, 1fr); gap: 0 10px; padding: 4px 0; align-items: start; }
.sk2 .sk-line.note { grid-template-columns: 20px minmax(0, 1fr) auto; }
.sk2 .sk-line.note .sk-body { padding-left: 46px; }
.sk2 .sk-grip { height: 28px; margin-top: 4px; }
.sk2 .sk-line .f { width: 36px; height: 36px; padding: 4px; border-radius: 9px; }
.sk-row { display: grid; grid-template-columns: minmax(0, 1fr) 188px 84px 92px 36px; column-gap: 12px; align-items: center; min-height: 36px; }
.sk-c-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sk-c-name .combo-tag, .sk-c-name .lib-of, .sk-c-name .chg-tag { margin: 0; flex: none; }
.sk2 textarea.sk-mname { flex: 1; min-width: 0; font-size: 16px; line-height: 1.35; padding: 4px 6px; margin-left: -6px; }
.sk-c-how, .sk-c-side, .sk-c-reps { min-width: 0; }
.sk2 .sk-c-how .sk-how { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; padding: 4px 11px; }
.sk-c-parts { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.sk-c-parts .sk-how { white-space: normal !important; }
.sk-side { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--lp-mid); padding: 4px 6px; border-radius: 6px; min-height: 28px; }
.sk-side:hover { background: var(--lp-inset); color: var(--lp-ink); }
.sk2 .sk-reps { width: 100%; font-size: 14px; color: var(--lp-ink); padding: 4px 6px; margin-left: -6px; }
.sk2 .sk-line.move .sk-side.unset { opacity: 0; transition: opacity .15s ease; }
.sk2 .sk-line.move:hover .sk-side.unset, .sk2 .sk-line.move:focus-within .sk-side.unset { opacity: 1; }
.sk-side.unset, .sk2 .sk-how.unset { color: var(--lp-mut); font-weight: 500; }
.sk-c-more { position: relative; display: flex; justify-content: flex-end; }
.sk-more { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mut); opacity: 0; touch-action: manipulation; }
.sk-more svg { width: 16px; height: 16px; }
.sk-more:hover { background: var(--lp-inset); color: var(--lp-ink); }
.sk-line:hover .sk-more, .sk-line:focus-within .sk-more, .sk-c-more.menu-on .sk-more, .sk-more:focus-visible { opacity: 1; }
.sk-more-pop { width: 290px; right: 0; left: auto; top: calc(100% + 4px); }
.sk-more-pop .it svg { width: 16px; height: 16px; flex: none; color: var(--lp-mid); }
.sk-more-pop .it small { display: block; font-weight: 500; font-size: 12.5px; color: var(--lp-mut); }
.sk-more-pop .vw-hr { height: 1px; background: var(--lp-line); margin: 6px 4px; }
@media (hover: none) {
  .sk-more, .sk2 .sk-line.move .sk-side.unset, .sk2 .sk-line.move .sk-how.unset, .sk2 .sk-line.move .sk-reps.empty { opacity: 1; }
}

/* the cue: one line under the name; click it to read it all and change it */
.sk-cue-w.none:not(.open) { display: none; }
.sk-cue-w:not(.open) .sk-cue { display: none !important; }
.sk-cue-w.open .sk-cue-1 { display: none; }
.sk-cue-1 { display: block; max-width: calc(100% - 48px); text-align: left; font-size: 14.5px; line-height: 1.5; color: var(--lp-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; margin: 0 0 0 -6px; border-radius: 6px; cursor: text; }
.sk-cue-1:hover { background: var(--lp-inset); color: var(--lp-ink); }
.sk2 .sk-cue { font-size: 14.5px; line-height: 1.5; padding: 2px 6px; max-width: calc(100% - 48px); }

/* changes underneath, in the same columns as the move */
.sk2 .chg-well { margin: 4px 0 0; padding: 0; background: none; border-radius: 0; }
.sk2 .chg { grid-template-columns: 20px 28px minmax(0, 1fr) 284px 92px 36px; column-gap: 12px; padding: 0; }
.sk2 .chg:hover, .sk2 .chg:focus-within, .sk2 .chg.menu-on { background: #FAFAF9; }
.sk2 .chg-well .tg.tempo { background: var(--lp-inset); }
.sk2 .chg-reps { text-align: left; font-size: 14px; }
.sk2 .chg-more { width: 36px; height: 32px; }
.sk2 .chg-add { margin-left: 26px; }
.sk2 .chg-steps { margin-top: 2px; }

/* everything else on a line lines up with the name */
.sk2 .sk-new { padding-left: 76px; }
.sk2 .sk-block .spots { margin-left: 30px; margin-top: 0; }
.sk2 .spot-b { gap: 10px; padding: 4px 0; min-height: 44px; }
.sk2 .spot-b .num { width: 36px; height: 36px; font-size: 14px; }
.sk2 .spot-b .wd { font-style: italic; }
.sk2 .spot-sugs { padding-left: 46px; }
.sk2 .sk-block .again, .sk2 .sk-block > .fr-top, .sk2 .sk-ph + .fr-top { margin-left: 30px; }
.sk2 .sk-from { margin-left: 76px; }
.sk2 .r-add { margin: 48px 0 0; }

/* narrow pages: the name on its line, tempo, side and how many under it */
@container (max-width: 620px) {
  .sk-row { grid-template-columns: max-content max-content minmax(0, 1fr) 36px; row-gap: 2px; column-gap: 10px; }
  .sk-c-name { grid-column: 1 / 4; grid-row: 1; }
  .sk-c-more { grid-column: 4; grid-row: 1; }
  .sk-c-how { grid-column: 1; grid-row: 2; }
  .sk-c-parts { grid-column: 1 / 4; grid-row: 2; }
  .sk-c-side { grid-column: 2; grid-row: 2; }
  .sk-c-reps { grid-column: 3; grid-row: 2; }
  .sk2 .sk-reps { max-width: 120px; }
  .sk2 .chg { grid-template-columns: 20px 28px minmax(0, 1fr) auto 64px 32px; column-gap: 6px; }
  .sk2 .sk-new { padding-left: 66px; }
  .sk2 .sk-line.note .sk-body { padding-left: 36px; }
}
@media (max-width: 700px) {
  .sk2 .sk-line { grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; }
  .sk2 .sk-line.note { grid-template-columns: minmax(0, 1fr) auto; }
  .sk2 .sk-grip { display: none; }
  .sk2 .sk-line .f { width: 32px; height: 32px; }
  .sk2 .sk-block .spots, .sk2 .sk-block .again, .sk2 .sk-block > .fr-top { margin-left: 0; }
  .sk2 .sk-new { padding-left: 42px; }
  .sk2 .sk-from { margin-left: 42px; }
  .sk2 .sk-line.note .sk-body { padding-left: 42px; }
  .sk-cue-1, .sk2 .sk-cue { max-width: 100%; }
}

/* ---------- effort: the line, and a numeral for a handle ---------- */
.ef-lane { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.ef-lane .ln { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ef-lane .lg-t { font: 600 11.5px var(--fu); fill: var(--lp-mut); }
.ef-lane .lg-l { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.ef-lane g.h { pointer-events: all; cursor: grab; outline: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ef-lane.dragging g.h { cursor: grabbing; }
.ef-lane .hit { fill: transparent; pointer-events: all; }
.ef-lane .fr { fill: none; stroke: #FF5FAE; stroke-opacity: .35; stroke-width: 3; opacity: 0; }
.ef-lane g.h:focus-visible .fr { opacity: 1; }
.ef-lane .in { transform-box: fill-box; transform-origin: center; transition: transform .16s cubic-bezier(.2, .8, .2, 1); }
.ef-lane .plate { fill: #fff; }
.ef-lane .nt { font: 700 13px var(--fd); font-variant-numeric: tabular-nums; }
.ef-lane .unset { display: none; fill: #fff; stroke: #8C847C; stroke-width: 1.5; }
.ef-lane g.h.is-unset .unset { display: inline; }
.ef-lane g.h.is-unset .plate { display: none; }
.ef-lane g.h.held .in { transform: scale(1.2); }
@media (hover: hover) and (pointer: fine) { .ef-lane g.h:hover .in { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .ef-lane .in, .ol-dot .dot, .ol-drop-b > svg { transition: none; }
  .ef-lane g.h:hover .in, .ef-lane g.h.held .in { transform: none; }
}
html.ef-drag, html.ef-drag * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

@media print {
  body.printing-sketch .sk2 { display: block; height: auto; }
  body.printing-sketch .sk-ol, body.printing-sketch .ol-drop, body.printing-sketch .ef-lane, body.printing-sketch .sk-more, body.printing-sketch .sk-side.unset, body.printing-sketch .sk-how.unset { display: none !important; }
  body.printing-sketch .sk-stage { padding: 0; }
  body.printing-sketch .sk-h.sk-band { position: static; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing-sketch .sk-cue-1 { white-space: normal; max-width: none; }
}

/* ---------- the Blocks step: the skeleton only ---------- */
.bl-row { grid-template-columns: 16px 22px minmax(0, 1fr) auto 40px; }
.bk-rows { display: flex; flex-direction: column; gap: 4px; margin-left: 32px; }
.bk-r { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 6px 2px 12px; border-radius: 9px; background: rgba(255, 255, 255, .7); font-size: 14.5px; }
.bk-r.song > svg { width: 14px; height: 14px; flex: none; }
.bk-r .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bk-r .nm em { font-style: normal; font-weight: 500; }
.bk-r .mn { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; padding-right: 6px; }
.bk-r.part .ph-name { flex: 1 1 120px; min-width: 0; font-family: var(--fu); font-weight: 600; font-size: 14.5px; border: 0; outline: none; background: none; padding: 4px 6px; margin-left: -6px; border-radius: 6px; }
.bk-r.part .ph-name:hover, .bk-r.part .ph-name:focus { background: #fff; }
.bk-r .mins { background: #fff; flex: none; }
.bk-r .ph-x { flex: none; }
.bk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-left: 32px; }
.tl-band .bk-addph { margin-left: 0; color: var(--lp-ink); min-height: 36px; }
.shp { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 14.5px; font-weight: 600; color: var(--lp-ink); white-space: nowrap; }
.shp > svg { width: 16px; height: 16px; flex: none; }
.shp-n { width: 44px; height: 36px; text-align: center; font-family: var(--fd); font-weight: 800; font-size: 16px; color: var(--lp-ink); border: 0; outline: none; border-radius: 8px; background: #fff; -moz-appearance: textfield; appearance: textfield; }
.shp-n::-webkit-outer-spin-button, .shp-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shp-n:focus-visible, .shp-n:focus { box-shadow: var(--focus); }
.shp-x { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--lp-ink); opacity: 0; }
.shp-x svg { width: 12px; height: 12px; }
.shp-x:hover { background: rgba(255, 255, 255, .8); }
.shp:hover .shp-x, .shp:focus-within .shp-x { opacity: 1; }
.shp-door { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 999px; font-weight: 600; font-size: 13.5px; color: var(--lp-ink); opacity: 0; white-space: nowrap; }
.shp-door svg { width: 12px; height: 12px; }
.shp-door:hover { background: rgba(255, 255, 255, .75); }
.tl-band:hover .shp-door, .tl-band:focus-within .shp-door, .bl-row:hover .shp-door, .bl-row:focus-within .shp-door, .shp-door:focus-visible { opacity: 1; }
.bl-row .bk-rows, .bl-row .bk-foot { margin-left: 0; }
.bl-row .bk-rows { margin-top: 6px; }
.bl-row .bk-r { background: var(--lp-inset); }
.bl-row .shp-n, .bl-row .bk-r .mins { background: #fff; }
.bl-row .bk-foot .shp-n { background: var(--lp-inset); }
.bl-row .shp-door:hover, .bl-row .shp-x:hover { background: var(--lp-inset); }
@media (hover: none) { .shp-door, .shp-x { opacity: 1; } }
@media (max-width: 700px) {
  .bl-row { grid-template-columns: 16px 22px minmax(0, 1fr) 40px; }
  .bk-rows, .bk-foot { margin-left: 0; }
  .bk-r.part { flex-wrap: wrap; padding: 6px 6px 6px 10px; }
  .bk-r.part .ph-name { flex-basis: 100%; }
}
/* the gap between two blocks holds its Add a block button whole (it sat on the bands' edges) */
.bk-gap.bg-tl, .bk-gap.bg-list { height: 22px; }
.sk2 .sk-ph .ph-name { field-sizing: content; min-width: 3ch; max-width: 100%; padding: 2px 6px; margin-left: -6px; border-radius: 6px; }
/* Tab never lands a field under the bar or a block's band */
.sk-main { scroll-padding-top: calc(var(--sktopH, 52px) + 76px); }

/* ---------- the Plan: the block's bar, each song's slim bar (2026-10-15) ----------
   Her picks on studies/plan-header-studies.html: Study 02 (a slim bar per
   song), 05 (both bars stay at the top; the next song's bar pushes the last
   away, the browser's own sticky), 06 (move names in full), 07 (all of it,
   phone too); Q1 Lyrics in View, Q2 the title opens the song's menu, Q3 one
   light row of column names. And her note: the part names and their
   8-counts sit on the left, level with the part's first line; each line
   keeps its 8-count and time. No big empty gutter on the left. */
.plan { --pw: 94px; --tw: 58px; --lg: 10px; --left: calc(var(--pw) + var(--tw) + var(--lg) * 2); }
.sec-head { z-index: 24; }
.slot, .slot + .slot { margin: 0; padding: 0; border: 0; }
.slot + .slot { margin-top: 18px; }
/* tucked 1px under the block's bar so no half-pixel of a lyric shows between them */
.slot-head { position: sticky; top: var(--bkH, 0px); z-index: 23; background: #fff; display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 0; }
.slot-head .cov { width: 32px; height: 32px; border-radius: 8px; background: var(--ct); color: var(--cd); display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--fd); font-weight: 800; font-size: 15px; }
.slot-head .cov svg { width: 16px; height: 16px; }
.s-menu { min-width: 0; flex: 0 1 auto; }
.s-tbtn { display: block; max-width: 100%; text-align: left; min-height: 44px; padding: 3px 8px; margin-left: -6px; border-radius: 10px; touch-action: manipulation; }
.s-tbtn:hover, .s-tbtn[aria-expanded="true"] { background: var(--lp-inset); }
.s-tl { display: flex; align-items: center; gap: 4px; min-width: 0; }
.s-tl b { font-weight: 700; font-size: 15.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.s-tl svg { width: 14px; height: 14px; flex: none; color: var(--lp-mid); }
.s-tbtn small { display: block; font-size: 13px; line-height: 1.35; color: var(--lp-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-menu .pop { left: 0; right: auto; }
.slot > .search, .slot > .fixing-note { margin-top: 10px; }
.wait.zone { top: calc(var(--bkH, 0px) + var(--sgH, 0px) + 8px); }
.mv2 .in { top: calc(var(--bkH, 0px) + var(--sgH, 0px) + 10px); }

/* one light row of column names, lined up with what it names */
.cols, .cols.big, .cols.parts { display: grid; column-gap: 0; font-size: 12.5px; color: var(--lp-mut); padding: 10px 0 4px; }
.cols { grid-template-columns: calc(var(--pw) + var(--lg)) calc(var(--tw) + var(--lg)) minmax(0, 1fr) minmax(242px, 322px); }
.cols.big { grid-template-columns: 250px calc(var(--pw) + var(--lg)) calc(var(--tw) + var(--lg)) minmax(0, 1fr); }
.cols.parts { grid-template-columns: calc(var(--pw) + var(--lg) * 2 + var(--tw)) minmax(0, 1fr) minmax(232px, 312px); }
.cols .c-ly { padding-left: 12px; }
.cols .c-cue { padding-left: 22px; }
.cols.parts .c-ly { padding-left: 0; }
.cols.parts .c-cue { padding-left: 12px; }

/* the lines: [part] [8-count and time] [lyric], with the card beside */
.grid { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); column-gap: 22px; }
.grid > .grp { grid-column: 1; }
.grid.big { grid-template-columns: 236px minmax(0, 1fr); column-gap: 14px; }
.grid.big > .grp { grid-column: 2; }
.grid.parts { grid-template-columns: calc(var(--pw) + var(--lg) + var(--tw)) minmax(0, 1fr) minmax(220px, 300px); column-gap: 12px; }
.lrow, .lrow.chiprow { grid-template-columns: var(--pw) var(--tw) minmax(0, 1fr); column-gap: var(--lg); }
.chiprow .chipcell { grid-column: 3; min-width: 0; }
.chipcell .mchip { margin: 0 0 0 8px; }
.run-bg { left: var(--left); }
.grp .grip-end { left: calc(var(--left) + (100% - var(--left)) / 2); }
.grp.sepd { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--lp-line); }
.pl-ph { display: none; }
.lrow .pl { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
.lrow .pl .pn { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--lp-ink); }
.lrow .pl .pn span { overflow-wrap: break-word; min-width: 0; }
.lrow .pl small, .pl-ph small { font-size: 12.5px; color: var(--lp-mut); padding-left: 15px; }
.lrow .pl button.pn { min-height: 28px; }
.grid.parts .gut .pn { white-space: normal; }

/* Study 06: a move's name in full, up to two lines, never cut mid-word; the
   tempo and side as chips under it, never inside it */
.mchip { display: inline-flex; align-items: flex-start; width: auto; max-width: 100%; flex-wrap: nowrap; gap: 6px; padding: 4px 10px 4px 4px; }
.mchip svg { flex: none; margin-top: 1px; }
.mc-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.mc-n, .mv2 .bn { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.mc-n { line-height: 1.3; }
.mc-tx .tgs { margin-left: 0; }
.mc-tx .combo-tag { margin: 0; }
.mv2 .bn { font-size: 22px; line-height: 1.12; }
.cue button.mname { overflow-wrap: break-word; }

/* squeezed (a pop-up open on a narrow window): the card column steps aside */
.plan.squeeze .grid:not(.big):not(.parts) { grid-template-columns: minmax(0, 1fr) 0; }
.plan.squeeze .grid.parts { grid-template-columns: calc(var(--pw) + var(--lg) + var(--tw)) minmax(0, 1fr) 0; }
.plan.squeeze .grid.big { grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }
.plan.squeeze .cols .c-cue, .plan.squeeze .cols.big > span:first-child { visibility: hidden; }

/* the Block menu carries Add another song on a phone (Study 07) */
.pop .it.bm-song { display: none; }

@media (max-width: 1200px) {
  .plan { --pw: 88px; --tw: 56px; }
  .grid { grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); column-gap: 16px; }
  .cols { grid-template-columns: calc(var(--pw) + var(--lg)) calc(var(--tw) + var(--lg)) minmax(0, 1fr) minmax(216px, 296px); }
  .cols .c-cue { padding-left: 16px; }
  .grid.big { grid-template-columns: 210px minmax(0, 1fr); }
  .cols.big { grid-template-columns: 224px calc(var(--pw) + var(--lg)) calc(var(--tw) + var(--lg)) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .plan { --pw: 70px; --tw: 52px; --lg: 8px; }
  .grid { grid-template-columns: minmax(0, 1.25fr) minmax(170px, 1fr); }
  .cols { grid-template-columns: calc(var(--pw) + var(--lg)) calc(var(--tw) + var(--lg)) minmax(0, 1.25fr) minmax(186px, 1fr); }
  .grid.parts, .cols.parts { grid-template-columns: calc(var(--pw) + var(--lg) + var(--tw)) minmax(0, 1fr) minmax(170px, 1fr); }
}
/* a phone: one column, top to bottom. The part's name is a heading over its
   lines; Cues on, the cue follows its lines; Cues off, the move sits on top
   of its lines in one tinted box */
@media (max-width: 700px) {
  .plan { --tw: 50px; --lg: 8px; --left: calc(var(--tw) + var(--lg)); }
  .grid, .grid.big, .grid.parts { display: flex; flex-direction: column; }
  .cols, .cols.big, .cols.parts { display: none; }
  .lrow, .lrow.chiprow { grid-template-columns: var(--tw) minmax(0, 1fr); }
  .lrow .pl { display: none; }
  .chiprow .chipcell { grid-column: 2; }
  .pl-ph { display: block; padding: 12px 0 4px; }
  .pl-ph .pl { display: flex; align-items: baseline; gap: 8px; }
  .pl-ph .pn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
  .pl-ph small { padding-left: 0; }
  .grp.sepd { margin-top: 0; padding-top: 0; border-top: 0; }
  .grid > .cue { margin: 6px 0 12px; }
  .grid.big > .mv2 { margin: 6px 0 0; border-radius: 12px 12px 0 0; padding-bottom: 6px; cursor: grab; }
  .grid.big .run-bg { left: 0; }
  .grid.big .run-bg.top { top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
  .grid.big .grp .grip-end { left: 50%; }
  .mv2 .in { position: static; }
  .grid.parts .gut { padding-top: 12px; }
  .grid.parts .stack { margin-bottom: 8px; }
  .bk-addsong { display: none !important; }
  .pop .it.bm-song { display: flex; }
  .slot-head { flex-wrap: nowrap; }
}
/* the Plan's header on a phone: View joins Library and More, so the row
   tightens; on the narrowest phones See the guide steps aside (the Guide
   tab sits right above it) */
@media (max-width: 700px) {
  .cp-tools { gap: 6px; }
  .sec-head .bysong em { display: none; }
  .sec-head input.sname { flex: 1 1 0; width: 0; min-width: 0; }
}
@media (max-width: 400px) { .cp-tools > a.btn[href$="/guide"] { display: none; } }
/* the lyrics keep their room when the middle is narrow (the Library open,
   a smaller window): the cue column and the left columns give first.
   dockLayout sets .narrow from the middle's width with the list in place */
.plan.narrow .sec { --pw: 84px; --tw: 54px; --lg: 8px; --left: calc(var(--pw) + var(--tw) + var(--lg) * 2); padding-right: 20px; }
.plan.narrow .sec, .plan.narrow.zoned .sec { padding-left: calc(20px + var(--zone)); }
.plan.narrow .grid { grid-template-columns: minmax(0, 1fr) minmax(190px, 236px); column-gap: 16px; }
.plan.narrow .cols { grid-template-columns: calc(var(--pw) + var(--lg)) calc(var(--tw) + var(--lg)) minmax(0, 1fr) minmax(206px, 252px); }
.plan.narrow .cols .c-cue { padding-left: 16px; }
.plan.narrow .grid.big { grid-template-columns: 196px minmax(0, 1fr); column-gap: 12px; }
.plan.narrow .cols.big { grid-template-columns: 208px calc(var(--pw) + var(--lg)) calc(var(--tw) + var(--lg)) minmax(0, 1fr); }
.plan.narrow .grid.parts, .plan.narrow .cols.parts { grid-template-columns: calc(var(--pw) + var(--lg) + var(--tw)) minmax(0, 1fr) minmax(190px, 236px); }
.plan.narrow .cue { padding: 10px 12px; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 10px; }
.plan.narrow .cue .f { width: 36px; height: 36px; padding: 4px; }
.plan.narrow.squeeze .grid:not(.big):not(.parts) { grid-template-columns: minmax(0, 1fr) 0; }
.plan.narrow.squeeze .grid.parts { grid-template-columns: calc(var(--pw) + var(--lg) + var(--tw)) minmax(0, 1fr) 0; }
.plan.narrow.squeeze .grid.big { grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }
/* the move's name in the cue card stops short of Details, so the two never share a spot */
@media (min-width: 901px) { .cue button.mname { padding-right: 4px; align-self: flex-start; max-width: calc(100% - 70px); } }
.cue .how button { text-align: left; }
/* a narrow card: Details sits under the card's words, as on smaller windows, so the name keeps the width */
.plan.narrow .cue button.mname { max-width: 100%; padding-right: 4px; }
.plan.narrow .cue .off { position: static; opacity: 1; grid-column: 1 / -1; justify-self: start; margin-top: 6px; padding: 6px 10px; background: var(--lp-inset); }

/* ---------- the Plan's columns, in her order (2026-10-15) ----------
   "let's make it so i can customize it; i can move the columns where i
   want. default should be part, move, 8 count, lyrics." Each column is a
   named grid line (cp Part, cm Move, ct 8-count, cl Lyrics, cc Cues) and the
   template (--pcols) is written in her order by app.js; every cell finds its
   column by name. Each block's lines are subgrids of the song's grid, so a
   move's card and its cue span their lines in any order.
   And: "When I add cues, I still want the part to stay." Every column keeps
   its own width with Cues on or off; when room is short the lyrics and the
   cues give first, and a part's name wraps to two lines. */
.pc { --w-cp: var(--pw); --w-ct: var(--tw); --w-cm: minmax(140px, 200px); --w-cl: minmax(150px, 3fr); --w-cc: minmax(130px, 2fr); --pcgap: 12px; }
.pc.cues-off { --w-cm: minmax(150px, 236px); --w-cl: minmax(0, 1fr); }
.plan.narrow .pc { --w-cm: minmax(120px, 170px); --w-cl: minmax(140px, 3fr); --w-cc: minmax(110px, 2fr); --pcgap: 8px; }
.plan.narrow .pc.cues-off { --w-cm: minmax(140px, 196px); --w-cl: minmax(0, 1fr); }
/* a pop-up on a narrow window: the cues (or the moves, Cues off) step aside while it is open */
.plan.squeeze .pc.cues-on { --w-cc: 0px; }
.plan.squeeze .pc.cues-off { --w-cm: 0px; }
@media (min-width: 701px) {
  .grid.pc, .cols.pc { grid-template-columns: var(--pcols) !important; column-gap: var(--pcgap) !important; }
  .grid.pc > .grp { display: grid; grid-template-columns: subgrid; column-gap: normal; align-content: start; }
  .grid.pc .lrow { grid-column: 1 / -1; grid-template-columns: subgrid !important; column-gap: normal !important; }
  /* one row each: placed by name, so the browser never wraps a cell to a second row */
  .grid.pc .lrow > *, .grid.pc .prow > * { grid-row: 1; }
  .pc .lrow > .pl { grid-column: cp; }
  .pc .lrow > .t { grid-column: ct; }
  .pc .lrow > .ln { grid-column: cl; }
  /* the move's tint sits under the lyrics, wherever the lyrics are */
  .grid.pc .run-bg { grid-column: cl; left: 0; right: 0; }
  .grid.pc .grp .grip-end { grid-column: cl; left: 50%; }
  .grid.pc > .mv2, .grid.pc > .cue { position: relative; z-index: 2; min-width: 0; }
  .pc.cues-on .mv2 .bn { font-size: 18px; }
  /* Lyrics off: one row per part, the same columns */
  .grid.pc > .prow { align-items: start; padding: 0; }
  .pc .prow > .pc-p { grid-column: cp; }
  .pc .prow > .pc-t { grid-column: ct; }
  .pc .prow > .pc-m { grid-column: cm; }
  .pc .prow > .pc-l { grid-column: cl; min-width: 0; }
  .pc .prow > .pc-c { grid-column: cc; min-width: 0; }
  .pc .prow.sepd { margin-top: 0; padding-top: 0; }
  .pc .prow .ph-t { display: none; }
  .plan.squeeze .pc.cues-on .pc-c, .plan.squeeze .pc.cues-off .pc-m { display: none; }
}
.pc-m { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 0; min-width: 0; }
.pc-m .mchip { background: var(--tint); box-shadow: none; margin: 0; }
.pc .pc-t .t { line-height: 1.6; }
.plan .pc .cue.slim { grid-template-columns: minmax(0, 1fr); }
.plan.narrow .mv2 { padding: 10px; }
.plan.narrow .mv2 .in { grid-template-columns: 32px minmax(0, 1fr); gap: 0 8px; }
.plan.narrow .mv2 .bf { width: 32px; height: 32px; padding: 3px; border-radius: 8px; }
.plan.narrow .mv2 .bn { font-size: 17px; }
.plan.narrow .mv2 .ch-list { grid-column: 1 / -1; }

/* the names: one light row; each name is a 44px door (drag it, or open its menu) */
.cols.pc { padding: 4px 0 2px; align-items: center; user-select: none; -webkit-user-select: none; }
.plan.squeeze .cols.pc > .pc-hw { display: block; }
.plan.squeeze .cols.pc.cues-on > .pc-hw[data-col="cues"], .plan.squeeze .cols.pc.cues-off > .pc-hw[data-col="move"] { display: none; }
.pc-hw { min-width: 0; display: flex; align-items: center; }
/* View at the end of the column names (2026-10-28); the menu opens from its right edge */
.cols.pc { position: relative; }
.pc-vw { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.pc-vw .vw-btn { color: var(--lp-mid); font-weight: 500; }
.pc-vw .vw-menu { left: auto; right: 0; transform-origin: top right; }
.vw-alt { display: contents; }
@media (min-width: 701px) { .vw-alt { display: none; } }
/* hide a column from its name: the x shows on reach (2026-10-24, "I don't
   know how to close the cues if I don't want them up") */
.pc-x { position: relative; flex: none; width: 28px; height: 28px; margin-left: 2px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--lp-mut); }
.pc-x::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.pc-x svg { width: 13px; height: 13px; }
.pc-x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.pc-h { display: inline-flex; align-items: center; min-height: 44px; max-width: calc(100% + 8px); padding: 0 8px; margin-left: -8px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--lp-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; touch-action: manipulation; }
.pc-hw[data-col="lyrics"] .pc-h, .pc-hw[data-col="move"] .pc-h, .pc-hw[data-col="cues"] .pc-h { margin-left: 4px; max-width: calc(100% - 4px); }
.pc-h:hover, .pc-h[aria-expanded="true"] { background: var(--lp-inset); color: var(--lp-ink); }
.pc-h:focus-visible { box-shadow: var(--focus); color: var(--lp-ink); }
.pc-h.pc-lift { opacity: .45; }
body.pc-dragging, body.pc-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.pc-line { position: fixed; z-index: 70; width: 2px; border-radius: 1px; background: rgba(26, 20, 16, .4); pointer-events: none; }
.pc-pop { left: 0; right: auto; width: 200px; top: calc(100% + 2px); }
.pc-hw:last-child .pc-pop { left: auto; right: 0; }
.pc-pop .it { min-height: 44px; }
.pc-pop .it[disabled] { opacity: .4; cursor: default; }
.pc-pop .it[disabled]:hover { background: none; }
.vw-row.vw-act { justify-content: space-between; }
.vw-row.vw-act[aria-disabled="true"] { opacity: .5; cursor: default; }
.vw-row.vw-act[aria-disabled="true"]:hover { background: none; }

/* a phone: one column top to bottom, the move on top of its lines, Cues on or off */
@media (max-width: 700px) {
  .grid.pc > .mv2 { margin: 6px 0 0; border-radius: 12px 12px 0 0; padding-bottom: 6px; }
  .grid.pc .run-bg { left: 0; }
  .grid.pc .run-bg.top { top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
  .grid.pc .grp .grip-end { left: 50%; }
  .pc .prow .pc-t { display: none; }
  .pc .prow .pc-m:empty { display: none; }
  .pc .prow .pc-m { flex-direction: row; flex-wrap: wrap; padding: 0; }
}
@media (prefers-reduced-motion: no-preference) { .pc-h { transition: background-color 120ms ease-out, color 120ms ease-out; } }
@media print { .pc-line { display: none !important; } }

/* hidden columns (2026-10-15: "we should also be able to hide them if we
   want"): the cells go, nothing is deleted, the rest take the room */
.pc.hide-part .lrow > .pl, .pc.hide-part .pl-ph, .pc.hide-part .pc-p,
.pc.hide-count .lrow > .t, .pc.hide-count .pc-t,
.pc.hide-lyrics .lrow > .ln, .pc.hide-lyrics .run-bg, .pc.hide-lyrics .grip-end, .pc.hide-lyrics .pc-l,
.grid.pc.hide-move > .mv2, .pc.hide-move .pc-m { display: none; }
.plan .pc.hide-lyrics.cues-off { --w-cm: minmax(150px, 1fr); }
.plan .pc.hide-lyrics .pc-t, .pc.hide-lyrics .lrow > .t { min-height: 30px; }
.vw-h { font-size: 12.5px; font-weight: 600; color: var(--lp-mut); padding: 6px 10px 2px; }
@media (max-width: 700px) {
  .pc.hide-count .lrow { grid-template-columns: minmax(0, 1fr); }
  .pc.hide-lyrics .grp.run { min-height: 8px; }
}
.plan.squeeze2 .pc.cues-on { --w-cm: 0px; }
@media (min-width: 701px) {
  .plan.squeeze2 .grid.pc.cues-on > .mv2, .plan.squeeze2 .pc.cues-on .pc-m, .plan.squeeze2 .cols.pc.cues-on > .pc-hw[data-col="move"] { display: none; }
}

/* ===============================================================
   2026-10-15 · sizes she sets, a side panel that is always there,
   blocks that move from anywhere, the time in words, combos and
   changes as their own cards, the Body leading to the moves
   =============================================================== */

/* ---------- the columns: the left one and the side panel take her widths ---------- */
.plan, .sk2, .bk-wrap { position: relative; --railD: 270px; --panD: 340px; --mini: 48px; }
@media (max-width: 1400px) { .plan, .sk2, .bk-wrap { --panD: 290px; } .plan.with-lib { --railD: 240px; } }
@media (max-width: 1200px) { .plan { --railD: 240px; } }
@media (min-width: 901px) {
  .plan { grid-template-columns: var(--railW, var(--railD)) minmax(0, 1fr) var(--mini); }
  .plan.with-lib { grid-template-columns: var(--railW, var(--railD)) minmax(0, 1fr) var(--panW, var(--panD)); }
  .sk2 { grid-template-columns: auto minmax(0, 1fr) var(--mini); }
  .sk2.with-lib { grid-template-columns: auto minmax(0, 1fr) var(--panW, var(--panD)); }
  .bk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) var(--mini); }
  .bk-wrap.with-lib { grid-template-columns: minmax(0, 1fr) var(--panW, var(--panD)); }
  .sk2 > .sk-ol:not(.mini) { width: var(--olW, 272px); }
  .plan.fold > .pn-mini { grid-column: 3; grid-row: 1; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .plan.with-lib { grid-template-columns: minmax(0, 1fr) var(--panW, var(--panD)); }
  .plan.with-lib > .lw-edge.e-rail { display: none; }
}
.bk-wrap:not(.with-lib) > .scroll { grid-column: 1; }
@media (max-width: 900px) {
  .pn-mini, .lw-edge { display: none !important; }
  .bk-wrap { display: block; }
}

/* the folded panel: a slim rail, one click opens a tab */
.pn-mini { grid-column: -2 / -1; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-left: 1px solid var(--lp-line); background: #fff; min-height: 0; overflow: hidden; }
.pn-mini button { width: 44px; border-radius: 10px; color: var(--lp-mid); display: flex; align-items: center; justify-content: center; touch-action: manipulation; }
.pn-mini .pn-open { height: 44px; }
.pn-mini .pn-open svg { width: 20px; height: 20px; }
.pn-mini .pn-tab { writing-mode: vertical-rl; min-height: 88px; padding: 12px 0; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; }
.pn-mini button:hover { background: var(--lp-inset); color: var(--lp-ink); }
.pn-mini button:focus-visible { box-shadow: var(--focus); outline: none; }
.libpanel .pn-fold svg { width: 18px; height: 18px; }

/* an edge to drag: the thinnest line that reads, on reach */
.lw-edge { position: absolute; top: 0; bottom: 0; width: 12px; z-index: 30; cursor: col-resize; touch-action: none; }
.lw-edge::before { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; border-radius: 1px; background: rgba(26, 20, 16, .28); opacity: 0; }
.lw-edge:hover::before, .lw-edge.on::before { opacity: 1; }
.lw-edge.on::before { background: rgba(26, 20, 16, .4); }
.lw-edge:focus-visible { outline: none; }
.lw-edge:focus-visible::before { opacity: 1; width: 4px; left: 4px; background: var(--pink); box-shadow: var(--focus); }
.lw-edge.e-rail { left: calc(var(--railW, var(--railD)) - 6px); }
.lw-edge.e-ol { left: calc(var(--olW, 272px) - 6px); }
.lw-edge.e-pan { right: calc(var(--panW, var(--panD)) - 6px); }
.plan.fold > .lw-edge.e-rail { display: none; }
body.lw-dragging, body.lw-dragging * { cursor: col-resize !important; user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: no-preference) { .lw-edge::before { transition: opacity 120ms ease-out; } }
@media print { .pn-mini, .lw-edge { display: none !important; } }

/* names wrap in a narrow list instead of being cut */
.r-sec .nm, .r-sec.th .nm { white-space: normal; overflow: visible; display: block; -webkit-line-clamp: unset; line-clamp: none; overflow-wrap: anywhere; }
.r-sec .sub { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.r-slot.sg .nm { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.3; }
.ol-b .nm { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.25; padding: 6px 0; }
.ol-s .nm, .ol-p .nm { white-space: normal; overflow-wrap: anywhere; }

/* ---------- a block's time, in words ---------- */
.btime { display: inline-flex; align-items: center; gap: 4px 8px; flex-wrap: nowrap; flex: 0 1 auto; min-width: 0; font-size: 14.5px; color: var(--lp-mid); }
.btime .bt-w { min-width: 0; }
.tl-head .btime, .bl-time .btime { justify-content: flex-end; text-align: right; }
.btime .bt-w b { color: var(--lp-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.btime .bt-w { line-height: 1.3; }
.btime.on .mins { flex: none; }
.bt-set { min-height: 44px; padding: 0 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--lp-mid); opacity: 0; touch-action: manipulation; }
.bt-set:hover { background: var(--lp-inset); color: var(--lp-ink); }
.bt-set:focus-visible { opacity: 1; box-shadow: var(--focus); outline: none; }
.sec-head:hover .bt-set, .sec-head:focus-within .bt-set, .tl-band:hover .bt-set, .tl-band:focus-within .bt-set, .bl-row:hover .bt-set, .bl-row:focus-within .bt-set { opacity: 1; }
@media (hover: none) { .bt-set { opacity: 1; } }
.bt-x { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--lp-mut); flex: none; touch-action: manipulation; }
.bt-x svg { width: 12px; height: 12px; }
.bt-x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.sk-when b { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .bt-set { transition: opacity 120ms ease-out; } }

/* ---------- blocks move from anywhere ---------- */
.sec-head[draggable="true"], .sk-band[draggable="true"] { cursor: grab; }
.sec-head input, .sec-head button, .sk-band input, .sk-band button { cursor: auto; }
.sec-head button, .sk-band button { cursor: pointer; }
.sk2 .sk-block, .ol-b, .ol-dot { position: relative; }
.sec.bk-over-top::after, .sk-block.bk-over-top::after { top: 0; }
.sec.bk-over-bot::after, .sk-block.bk-over-bot::after { bottom: 0; }
.sec.bk-dragging, .sk-block.bk-dragging { opacity: 1; }
.sk-band .sk-bmenu { margin-left: auto; }
.sk-band .prop-wrap ~ .sk-bmenu { margin-left: 0; }
.sk-band .sk-bmenu-b { min-height: 44px; background: none; }
.sk-band .sk-bmenu-b:hover { background: rgba(255, 255, 255, .7); }
.sk-band .sk-bmenu > .pop { right: 0; left: auto; top: calc(100% + 4px); }
@media print { .sk-bmenu { display: none !important; } }

/* ---------- moves on the Plan: names in full; changes and combo parts as their own cards ---------- */
.mv2 .bn { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; overflow-wrap: break-word; }
.mv2 .cont { display: block; grid-column: 2; font-size: 12.5px; font-weight: 600; color: var(--lp-mid); line-height: 1.3; margin-bottom: 2px; }
.mv2.sgx .in { grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; }
.mv2 .bf.sm { width: 28px; height: 28px; padding: 3px; border-radius: 8px; grid-row: 1 / span 2; }
.mv2.sgx .bn, .mv2.sgx .bt { grid-column: 2; }
.mv2 .sg-chs { grid-column: 2; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--lp-ink); }
.mv2 .sg-chs span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-parts { grid-column: 2; list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.35; color: var(--lp-ink); }
.cb-parts b { font-weight: 700; }
.cb-parts .how, .cb-parts .then { color: var(--lp-mid); font-weight: 600; }
.mv2.cb .bt { margin-top: 6px; }
/* the name of a change (or a part) on its lyric: only when the Move column is hidden */
.pc:not(.hide-move) .ch-labs.own { display: none; }
.cb-lab { cursor: default; }
.cb-lab:hover { background: none; }
.cb-lab .then { font-weight: 600; color: var(--lp-mid); }

/* Jump to it: a brief pale glow where it landed */
.jump-hi { position: relative; }
.jump-hi::after { content: ""; position: absolute; inset: -4px; border-radius: 14px; background: rgba(255, 95, 174, .2); pointer-events: none; z-index: 5; animation: jump-hi 1.8s ease-out forwards; }
@keyframes jump-hi { 0%, 35% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jump-hi::after { animation: none; opacity: .8; } }

/* ---------- the Body's words lead to the moves ---------- */
.bd-wr dt .bd-lv { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 8px; margin-left: -8px; border-radius: 8px; font: inherit; color: inherit; touch-action: manipulation; }
.bd-wr dt .bd-lv:hover, .bd-wr dt .bd-lv[aria-pressed="true"] { background: var(--lp-inset); color: var(--lp-ink); }
.bd-wr dt .bd-lv:focus-visible { box-shadow: var(--focus); outline: none; }
.bd-det .bd-list > li { align-items: start; }
.bd-det .bd-list > li > i { transform: translateY(5px); }
.bd-det ul.bd-mvs { gap: 0; margin: 2px 0 0; }
.bd-det ul.bd-mvs li.bd-mv { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; padding: 4px 0; border-top: 1px solid var(--lp-line); }
.bd-det ul.bd-mvs li.bd-mv:first-child { border-top: 0; }
.bd-mv .nm { flex: 1 1 100%; min-width: 0; font-weight: 600; color: var(--lp-ink); overflow-wrap: anywhere; }
.bd-mv .nm small { display: block; font-size: 12.5px; font-weight: 500; color: var(--lp-mut); }
.bd-mv .acts { display: flex; gap: 2px; margin: -6px 0 -4px -10px; }
.bd-mv .acts button { min-height: 44px; padding: 0 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--lp-mid); white-space: nowrap; touch-action: manipulation; }
.bd-mv .acts button:hover { background: var(--lp-inset); color: var(--lp-ink); }
.bd-mv .acts button:focus-visible { box-shadow: var(--focus); outline: none; }

/* the column names stay at the top too, under the block's and the song's bars */
@media (min-width: 701px) {
  .cols.pc { position: sticky; top: calc(var(--bkH, 0px) + var(--sgH, 0px) - 1px); z-index: 22; background: #fff; border-bottom: 1px solid var(--lp-line); }
  .mv2 .in { top: calc(var(--bkH, 0px) + var(--sgH, 0px) + var(--pcH, 0px) + 10px); }
  .wait.zone { top: calc(var(--bkH, 0px) + var(--sgH, 0px) + var(--pcH, 0px) + 8px); }
}
.bd-whole { margin-top: 10px; min-height: 44px; }
/* the block's time: a small clock and tabular numbers (2026-10-15) */
.btime .bt-w, .sk-when, .ol-b .mn { font-variant-numeric: tabular-nums; }
.btime .bt-w { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
svg.ck { width: 14px; height: 14px; flex: none; vertical-align: -2px; color: var(--lp-mid); margin-right: 5px; }
.btime .bt-w svg.ck { margin-right: 0; }
.ol-b .mn { display: inline-flex; align-items: center; }
.ol-b .mn svg.ck { width: 12px; height: 12px; margin-right: 3px; }
.btime.on { flex: 0 0 auto; }
.tl-head .btime.on, .bl-time .btime.on { flex-wrap: wrap; justify-content: flex-end; }
/* a long time line goes to its own row rather than squeezing the name */
.tl-head { flex-wrap: wrap; row-gap: 2px; }
.tl-head .bl-name { flex: 1 1 140px; min-width: 0; }
/* an intended time on the timeline: its own row under the name */
.tl-head .btime.on { order: 9; flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; padding-left: 28px; }
.sec-head input.sname { flex: 0 1 220px; min-width: 120px; }
/* an intended time on the Plan's bar: its own row under the name when room is short */
.sec-head:has(.btime.on) { flex-wrap: wrap; row-gap: 2px; }
.sec-head .btime.on { order: 9; flex: 1 1 100%; padding-left: 34px; }
/* a picked card on the Plan: Delete takes off just its lines */
.mv2.picked { box-shadow: inset 0 0 0 1.5px rgba(26, 20, 16, .4); }
.sec.bk-over-top::after, .sk-block.bk-over-top::after, .sec.bk-over-bot::after, .sk-block.bk-over-bot::after { z-index: 30; }
/* a combo on a narrow Sketch page: its parts on their own row, How many under them (never on top) */
@container (max-width: 620px) {
  .sk-row:has(.sk-c-parts) .sk-c-reps { grid-column: 1 / 4; grid-row: 3; }
}

/* moves waiting for a place, at the top of the Library (2026-10-15) */
.lib-wait { flex: none; padding: 10px 0 8px; border-bottom: 1px solid var(--lp-line); margin-bottom: 8px; max-height: 40%; overflow-y: auto; }
.lib-wait:empty { display: none; }
.lib-wait .lw-h { font-size: 13px; font-weight: 600; color: var(--lp-mid); margin: 0 0 6px; }
.lib-wait .lw-h span { font-weight: 500; color: var(--lp-mut); }
.lib-wait .wait-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-wait .wchip { min-height: 44px; }
.lw-add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; margin: 4px 0 0 -10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--lp-ink); touch-action: manipulation; }
.lw-add svg { width: 14px; height: 14px; }
.lw-add small { font-weight: 500; color: var(--lp-mut); font-size: 12.5px; }
.lw-add:hover { background: var(--lp-inset); }
.lw-add:focus-visible { box-shadow: var(--focus); outline: none; }
.lib-wait .composer.inline { margin-top: 8px; }
.lib-wait .wchip span { white-space: normal; overflow: visible; text-align: left; line-height: 1.25; }
.lib-wait .wchip { border-radius: 14px; }

.bt-btn { min-height: 44px; padding: 0 8px; margin: 0 -8px; border-radius: 10px; color: var(--lp-mid); touch-action: manipulation; }
.bt-btn:hover { background: var(--lp-inset); }
.tl-band .bt-btn:hover, .bl-row .bt-btn:hover { background: rgba(255, 255, 255, .7); }
.bt-btn:focus-visible { box-shadow: var(--focus); outline: none; }
.pop .it svg.ck { width: 18px; height: 18px; margin-right: 0; }

/* ===============================================================
   2026-10-15 · adding moves, and the Library as the place for choosing
   Her words: "When I click on a move, it makes the whole left bar go away.
   I don't love that. I wonder if, instead, it's what brings up the
   library?" The Plan's choices sit at the top of the side panel's Library:
   highlighted lines, a move picked (with the quick bar), a line's 8-count.
   Nothing docks over the words and the class list never folds away.
   White, hairlines, no shadows; ink for what is picked.
   =============================================================== */
.libpanel .pn-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -14px; padding: 0 14px 24px; overscroll-behavior: contain; }
.libpanel .pn-body .lib-grid { flex: none; overflow: visible; min-height: 0; padding-bottom: 0; }
.libpanel .pn-body .lib-wait { max-height: none; overflow: visible; }
/* the context: a section at the top, not a floating box */
.libpanel .dock-pop.pn-ctx { position: static; left: auto; right: auto; top: auto; width: auto; max-height: none; overflow: visible; box-shadow: none; border-radius: 0; background: none; padding: 2px 0 14px; margin: 0 0 10px; border-bottom: 1px solid var(--lp-line); user-select: auto; animation: none; font-size: 14px; }
.libpanel .pn-ctx .dp-h { margin-bottom: 4px; }
.libpanel .pn-ctx .dp-t b { font-family: var(--fd); font-weight: 700; font-size: 18px; line-height: 1.2; }
.libpanel .pn-ctx .dp-t .dp-of { font-size: 13px; font-weight: 600; color: var(--lp-mid); }
.libpanel .pn-ctx .dp-t .combo-tag { margin: 0 0 3px; }
.libpanel .pn-ctx .dp-h .f { width: 40px; height: 40px; }
.libpanel .pn-ctx .x { width: 44px; height: 44px; margin: -6px -8px 0 0; }
.libpanel .pn-ctx .dp-res { max-height: none; }
.libpanel .pn-ctx .dp-q input { padding: 11px 0; font-size: 15px; }
.libpanel .pn-ctx .dp-mv { min-height: 44px; }
.libpanel .pn-ctx .dp-act { min-height: 44px; align-items: center; }
.libpanel .pn-ctx .dp-act svg { margin-top: 0; }
.libpanel .pn-ctx .dp-stay { min-height: 44px; }
.libpanel .pn-ctx .link { min-height: 44px; }
.libpanel .composer.pn-ctx { padding: 2px 0 14px; }
@media (prefers-reduced-motion: no-preference) { .libpanel .pn-ctx { animation: ctx-in 160ms ease-out; } }
@keyframes ctx-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dp-note { font-size: 13px; color: var(--lp-mut); padding: 4px 0 2px; font-style: italic; }
.dp-note b { font-style: normal; color: var(--lp-mid); }
/* the quick bar: big friendly chips, a letter on each (her picks, Q2 and Q3) */
.qk-then { font-size: 13.5px; font-weight: 600; color: var(--lp-ink); margin: 12px 0 8px; line-height: 1.35; }
.qk-then span { font-weight: 500; color: var(--lp-mid); }
.qbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.qk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 15px; border-radius: 999px; background: var(--lp-inset); font-weight: 600; font-size: 15px; color: var(--lp-ink); touch-action: manipulation; }
.qk:not([aria-keyshortcuts]) { padding-right: 15px; }
.qk:hover { background: var(--lp-line2); }
.qk:focus-visible { box-shadow: var(--focus); outline: none; }
.qk-key { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--lp-line2); font-size: 12px; font-weight: 700; color: var(--lp-mid); }
.qk-new { background: #fff; box-shadow: 0 0 0 1px var(--lp-line2); padding-left: 11px; }
.qk-new:hover { background: var(--lp-inset); }
.qk svg { width: 15px; height: 15px; }
/* tempo and side, compact */
.dp-chips.sm button { font-size: 12.5px; padding: 4px 10px; min-height: 34px; }
@media (pointer: coarse) { .dp-chips.sm button, .dp-chips button { min-height: 44px; } }
.dp-round em { font-style: normal; font-weight: 600; color: var(--lp-mid); }
.pl-tx { width: 100%; border: 0; background: var(--lp-inset); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 15px; font-style: italic; line-height: 1.5; outline: none; resize: vertical; margin-top: 6px; }
.pl-tx:focus { box-shadow: var(--focus); }
.pn-ctx .dp-foot .btn svg { width: 15px; height: 15px; }
/* Waiting for a place, when nothing waits: one small line, not a heading */
.lib-wait.none { border-bottom: 0; padding: 0; margin: 0 0 4px; }
.lib-wait.none .lw-add { font-size: 13px; font-weight: 500; color: var(--lp-mid); }
.lib-wait.none .lw-add small { display: none; }

/* the class list stays beside the panel down to 900px wide */
@media (min-width: 901px) and (max-width: 1100px) {
  .plan.with-lib { --railD: 220px; grid-template-columns: var(--railW, var(--railD)) minmax(0, 1fr) var(--panW, var(--panD)); }
  .plan.with-lib > .rail { display: block; }
  .plan.with-lib > .lw-edge.e-rail { display: block; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .plan.with-lib { grid-template-columns: 200px minmax(0, 1fr); }
  .plan.with-lib > .rail { display: block; }
}
/* a tablet or a phone: the choices rise from the bottom, the line stays in sight */
@media (max-width: 900px) {
  .plan.ctx-on .libpanel { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: min(54vh, 560px); border-left: 0; border-top: 1px solid var(--lp-line2); border-radius: 16px 16px 0 0; z-index: 40; }
  .plan.ctx-on .scroll { padding-bottom: 56vh; }
}

/* a picked move card, and a loose plan: an ink hairline, never a color */
.mv2:focus-visible, .lplan:focus-visible { box-shadow: var(--focus); outline: none; }
/* written loosely: a light card, its words in italic, a dashed grey edge */
.lplan { position: relative; z-index: 2; min-width: 0; margin: 3px 0; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1.5px dashed var(--lp-line2); font-size: 15px; font-style: italic; line-height: 1.45; color: var(--lp-mid); cursor: pointer; overflow-wrap: break-word; }
.lplan:hover { background: var(--lp-inset); }
.lplan.picked { box-shadow: inset 0 0 0 1.5px rgba(26, 20, 16, .4); }
.lplan .lp-tx { display: block; position: sticky; top: calc(var(--bkH, 0px) + var(--sgH, 0px) + var(--pcH, 0px) + 10px); }
.grid.pc.hide-move > .lplan { display: none; }
.ln.on-plan { background: var(--lp-inset); }
.ln.on-plan:hover { background: #EDEDEA; }
.ln.on-plan.sel, .ln.on-plan.drag { background: #D6E6F7; }
.ln.gen { font-size: 14px; padding-top: 3px; padding-bottom: 3px; }
.lpchip { display: inline-flex; max-width: 100%; text-align: left; font-size: 13.5px; font-style: italic; color: var(--lp-mid); border: 1.5px dashed var(--lp-line2); border-radius: 10px; padding: 4px 10px; min-height: 32px; }
@media (max-width: 700px) { .grid.pc > .lplan { margin: 6px 0 0; } }
@media print { .lplan { border-color: #BBB; } }

/* the Library: what it works, the likely ones first, a star */
.lib-gh { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--lp-mid); margin: 12px 0 2px; }
.lib-gh:first-child { margin-top: 2px; }
.lib-fav { position: absolute; top: 1px; left: 1px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--lp-mut); opacity: 0; touch-action: manipulation; }
.lib-fav svg { width: 17px; height: 17px; fill: none; }
.lib-fav:hover { color: var(--lp-ink); }
.lib-fav.on { opacity: 1; color: var(--lp-ink); }
.lib-fav.on svg { fill: currentColor; }
.lib-card:hover .lib-fav, .lib-fav:focus-visible { opacity: 1; }
.lib-fav:focus-visible { box-shadow: var(--focus); outline: none; }
@media (hover: none) { .lib-fav { opacity: 1; } }
.lib-card .nm small { overflow-wrap: break-word; }

/* click a block, then Delete: its pale fill, and a small bin */
.bk-bin { display: none; flex: none; width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center; color: var(--lp-mid); touch-action: manipulation; }
.bk-bin svg { width: 18px; height: 18px; }
.bk-bin:hover { background: var(--lp-inset); color: var(--lp-ink); }
.sk-band .bk-bin:hover, .tl-band .bk-bin:hover, .bl-row .bk-bin:hover { background: rgba(255, 255, 255, .7); }
.bk-bin:focus-visible { box-shadow: var(--focus); outline: none; }
.sec.bk-sel .bk-bin, .sk-block.bk-sel .bk-bin, .tl-band.bk-sel .bk-bin, .bl-row.bk-sel .bk-bin { display: inline-flex; }
/* picked is a fill, never a box (2026-10-15, her note on the outline: "the lines are weird"):
   white bars take the block's pale tint; bars already on the tint go one step deeper */
.r-sec.bk-sel, .ol-b.bk-sel, .bl-row.bk-sel { background: var(--ct); }
.sk-block.bk-sel > .sk-band, .tl-band.bk-sel, .r-sec.on.bk-sel, .ol-b.on.bk-sel, .ol-b.on.bk-sel:hover { background: color-mix(in srgb, var(--c) 18%, var(--ct)); }
.sec.bk-sel > .sec-head::before { content: ""; position: absolute; z-index: -1; top: 6px; bottom: 6px; left: -12px; right: -12px; border-radius: 12px; background: var(--ct); pointer-events: none; }
/* the sticky bars cover the 1px card edges that poke out under them, so no stray line runs down their ends */
.sec-head, .slot-head, .cols.pc { box-shadow: 2px 0 0 #fff, -2px 0 0 #fff; }
.bl-acts { display: flex; align-items: flex-start; gap: 2px; }
@media (min-width: 701px) { .bl-row { grid-template-columns: 16px 22px minmax(0, 1fr) auto auto; } }
@media print { .bk-bin { display: none !important; } }

/* write anywhere, like a doc: a thin place between lines, a hairline and a caret on reach, no words */
.sk-gap { position: relative; z-index: 3; height: 12px; margin: -6px 48px -6px 28px; cursor: text; }
.sk-gap::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--lp-line2); opacity: 0; }
.sk-gap::after { content: ""; position: absolute; left: 0; top: calc(50% - 8px); width: 1.5px; height: 16px; border-radius: 1px; background: var(--lp-ink); opacity: 0; }
.sk-gap:hover::before { opacity: 1; }
.sk-gap:hover::after { opacity: 1; animation: lp-caret 1.1s steps(1) 120ms infinite; }
@keyframes lp-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .sk-gap::before { transition: opacity 120ms ease-out; } }
@media (prefers-reduced-motion: reduce) { .sk-gap:hover::after { animation: none; } }
.plan .free > .fm-gap { margin: -10px 48px -10px 48px; }
@media print { .sk-gap { display: none !important; } }
/* loose lines on the Sketch, and a song's loose plan among its moves */
.sk-line.loose .sk-text { font-style: italic; color: var(--lp-mid); }
.sk-line.loose { box-shadow: inset 0 0 0 1.5px transparent; }
.sk-line.loose .sk-body { border: 1.5px dashed var(--lp-line2); border-radius: 10px; padding: 4px 10px; }
.sk-line .sk-pt { display: block; font-size: 12.5px; color: var(--lp-mut); font-variant-numeric: tabular-nums; }
.sk-sug svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; color: var(--pink-deep); }
/* a combo on the Sketch: each part on its own line */
.sk-cb-parts { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 2px; }
.sk-cb-part { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 36px; }
.sk-cb-part .f { width: 30px; height: 30px; border-radius: 8px; background: var(--lp-inset); padding: 3px; }
.sk-cb-part .f svg { width: 100%; height: 100%; }
.sk-cb-part .cb-pn { font-weight: 600; font-size: 15.5px; overflow-wrap: break-word; min-width: 0; }
.sk-cb-part .cb-pn i, .fm-parts i { font-style: normal; font-weight: 500; color: var(--lp-mid); }
.sk-cb-part .sk-how { min-height: 32px; }
/* the Plan's list for a block with no song: notes, loose plans, a combo's parts */
.fm-parts { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 2px; }
.fm-parts li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.fm-parts .f { width: 26px !important; height: 26px !important; padding: 2px !important; border-radius: 7px; background: var(--lp-inset); flex: none; }
.fm-parts small { color: var(--lp-mid); font-size: 12.5px; }
.fm-note { display: flex; align-items: flex-start; gap: 8px; padding: 2px 6px 2px 54px; border-radius: 10px; }
.fm-note .fm-tx { flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: none; font: inherit; font-size: 15px; line-height: 1.5; color: var(--lp-ink); padding: 5px 8px; border-radius: 8px; overflow: hidden; }
.fm-note .fm-tx:focus { background: var(--lp-inset); }
.fm-note.loose .fm-tx { font-style: italic; color: var(--lp-mid); border: 1.5px dashed var(--lp-line2); }
.fm-note.self { background: var(--marigold-t); }
.fm-note .off { opacity: 0; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--lp-mut); }
.fm-note:hover .off, .fm-note:focus-within .off { opacity: 1; }
.fm-note .off svg { width: 15px; height: 15px; }
.fm-make { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: 13px; font-weight: 600; color: var(--lp-mid); background: var(--lp-inset); border-radius: 999px; padding: 0 12px; }
.fm-make svg { width: 13px; height: 13px; color: var(--pink-deep); }
.fm-adds { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.addmove.loose-b { font-weight: 600; color: var(--lp-mid); }
.addmove { min-height: 44px; }
/* the Guide: a loose plan as a plain line */
.g-plan .g-pl { font-style: italic; color: var(--lp-mid); font-size: 16px; line-height: 1.45; }
.sk-cb-part { grid-template-columns: 30px auto auto; justify-content: start; }
/* the last place to write in a run reaches up into the line above, never down onto what follows */
.sk-gap.end { margin-bottom: 0; }
.plan .free > .fm-gap.end { margin-bottom: -8px; }
/* the class's date, time and minutes never run under the tools beside them */
@media (min-width: 701px) { .cp-title { flex-shrink: 0; min-width: max-content; } .cp-meta { flex-wrap: nowrap; } }
@media (max-width: 700px) {
  .plan.ctx-on .libpanel { height: min(44vh, 420px); padding-top: 8px; }
  .plan.ctx-on .libpanel .lib-head { margin-bottom: 4px; }
}
/* a phone with the sheet up: the block's and the song's bars scroll away, so the line stays in sight */
@media (max-width: 700px) {
  .plan.ctx-on .sec-head, .plan.ctx-on .slot-head, .plan.ctx-on .cols.pc { position: static; }
}
.fm-make, .lplan, .lpchip, .sk-gap, .fm-note .off { touch-action: manipulation; }
/* Add to <block> on a card leaves the star its own corner */
.lib-card .lib-add { max-width: calc(100% - 52px); }
/* 901 to 1100 wide with the panel open: the class list stays; the cues step
   aside (the panel holds the move's words) so the lyrics keep their room */
@media (min-width: 901px) and (max-width: 1100px) {
  .plan.with-lib .pc.cues-on { --w-cc: 0px; }
  .plan.with-lib .grid.pc.cues-on > .cue, .plan.with-lib .grid.pc .stack.pc-c, .plan.with-lib .cols.pc.cues-on > .pc-hw[data-col="cues"] { display: none; }
  .plan.with-lib .sec-head { flex-wrap: wrap; row-gap: 4px; }
  .plan.with-lib .sec-head input.sname { flex: 1 1 140px; min-width: 0; }
  .plan.with-lib .sec-head .sp { display: none; }
}

/* ===============================================================
   2026-10-15 · Fewer menus, fewer words (flow-review-studies.html)
   =============================================================== */
.c-glutes { --c: var(--lilac); --ct: var(--lilac-t); --cd: var(--lilac-deep); }
.c-back { --c: var(--blue); --ct: var(--blue-t); --cd: var(--blue-deep); }

/* the block's dot says what it works on; pressed, a row of words */
.bk-aw { flex: none; }
.bk-area { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 8px 4px 9px; border-radius: 999px; font-weight: 600; font-size: 13.5px; color: var(--lp-ink); background: rgba(255, 255, 255, .72); white-space: nowrap; touch-action: manipulation; position: relative; }
.bk-area::before { content: ""; position: absolute; inset: -6px -2px; }
.bk-area .dot { width: 10px; height: 10px; }
.bk-area svg { width: 12px; height: 12px; color: var(--lp-mid); flex: none; }
.bk-area:hover, .bk-area[aria-expanded="true"] { background: #fff; box-shadow: 0 0 0 1px var(--lp-line2); }
.bk-area.none { padding: 4px 6px 4px 8px; gap: 4px; }
.bk-area.rest { background: none; padding: 0 4px; min-height: 0; }
.bk-area.rest .dot { width: 12px; height: 12px; }
.sec-head .bk-area, .bl-row .bk-area, .tl-head .bk-area { background: var(--ct); }
.sec-head .bk-area.rest, .bl-row .bk-area.rest, .tl-head .bk-area.rest { background: none; }
.bl-row .bk-aw, .bl-row .bk-area.rest { margin-top: 4px; }
.bl-row { grid-template-columns: 16px auto minmax(0, 1fr) 56px auto 40px; }
.pop.area-pop { left: 0; right: auto; width: max-content; max-width: min(340px, calc(100vw - 32px)); display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
.area-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 13.5px; background: var(--lp-inset); color: var(--lp-ink); touch-action: manipulation; }
.area-chip .dot { width: 9px; height: 9px; }
.area-chip:hover { background: var(--ct); }
.area-chip.on { background: var(--lp-ink); color: #fff; }
/* a menu open in a bar sits over the next bar (it opened under it) */
.sec-head:has(.pop), .sk2 .sk-h.sk-band:has(.pop), .slot-head:has(.pop), .tl-band:has(.pop), .bl-row:has(.pop) { z-index: 35; }
.tl-band:has(.pop), .bl-row:has(.pop) { position: relative; }

/* menus: one line each, icons on one edge */
.pop .it > span { flex: 1; min-width: 0; }
/* a block's color dot in a menu keeps its size (Move to <block>) */
.pop .it > span.dot { flex: none; width: 10px; height: 10px; min-width: 0; }
.pop.bk-menu { width: 240px; }
.pop .it svg { margin: 0; }

/* a block's time she set: the time, and one short phrase with its dot */
.bt-gap { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.bt-gap i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.bt-gap.ok { color: var(--teal-deep); }
.bt-gap.near { color: var(--lp-mut); }
.bt-gap.far { color: var(--coral-deep); }
.btime.on .bt-w:empty { display: none; }

/* a studio move she changed: a tiny dot */
.chg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--marigold-deep); margin: 0 0 0 6px; vertical-align: middle; flex: none; cursor: help; }
.sk-c-name .chg-dot { align-self: center; }

/* the song's bar: the title, then icons that say what they are */
.s-tl2 { min-width: 0; flex: 0 1 auto; padding: 2px 0; }
.s-tl2 b { display: block; font-weight: 700; font-size: 15.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-tl2 small { display: block; font-size: 13px; line-height: 1.35; color: var(--lp-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-acts { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.ic-btn { position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--lp-mid); touch-action: manipulation; flex: none; }
.ic-btn::before { content: ""; position: absolute; inset: -2px; }
.ic-btn svg { width: 17px; height: 17px; }
.ic-btn:hover, .ic-btn[aria-pressed="true"] { background: var(--lp-inset); color: var(--lp-ink); }
.ic-btn[data-label]::after, .s-bpm[data-label]::after, .s-tap[data-label]::after { content: attr(data-label); position: absolute; z-index: 60; top: calc(100% + 4px); right: 0; background: var(--lp-ink); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3; padding: 4px 8px; border-radius: 7px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(-2px); transition: opacity .12s ease, transform .12s ease; }
.ic-btn:hover::after, .ic-btn:focus-visible::after, .s-bpm:hover::after, .s-bpm:focus-visible::after, .s-tap:hover::after, .s-tap:focus-visible::after { opacity: 1; transform: none; }
.s-bpm { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; background: var(--lp-inset); font-weight: 600; font-size: 13.5px; color: var(--lp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; touch-action: manipulation; margin-right: 4px; }
.s-bpm svg { width: 15px; height: 15px; color: var(--lp-mid); }
.s-bpm:hover { background: var(--lp-line2); }
.s-tempo-ed { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.s-bpm-in { display: inline-flex; align-items: center; gap: 6px; background: var(--lp-inset); border-radius: 999px; padding: 0 12px 0 10px; min-height: 40px; font-size: 13.5px; font-weight: 600; }
.s-bpm-in svg { width: 15px; height: 15px; color: var(--lp-mid); }
.s-bpm-in input.bpm { width: 64px; border: 0; background: #fff; border-radius: 8px; padding: 4px 6px; font: inherit; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px var(--lp-line2); }
.s-bpm-in input.bpm:focus { outline: none; box-shadow: var(--focus); }
.s-tap { position: relative; min-height: 40px; }
.s-tap em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--lp-mid); }
.s-tempo-ed .btn:not(.soft) { min-height: 40px; }
@media (prefers-reduced-motion: reduce) { .ic-btn[data-label]::after, .s-bpm[data-label]::after, .s-tap[data-label]::after { transition: none; } }
@media (max-width: 700px) {
  .slot-head { flex-wrap: wrap; }
  .s-tl2 { flex: 1 1 0; }
  .s-acts { width: 100%; justify-content: flex-start; margin-left: 0; }
  .ic-btn { width: 44px; height: 44px; }
  .s-bpm, .s-bpm-in, .s-tap, .s-tempo-ed .btn { min-height: 44px; }
  .ic-btn[data-label]::after { right: auto; left: 0; }
}

/* the move picked, at the top of the Library: tempos, the side, one line of actions */
.pn-ctx .dp-tempo { margin-top: 12px; }
.pn-ctx .dp-side { display: flex; flex-wrap: wrap; width: 100%; margin-top: 8px; border-radius: 20px; }
.pn-ctx .dp-side button { flex: 1 1 auto; min-height: 36px; padding: 6px 8px; }
.pn-ctx .dp-lab + .dp-tempo { margin-top: 4px; }
.dp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--lp-line); }
.dp-line .sp { flex: 1; }
.dp-line .dp-det { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; color: var(--lp-ink); }
.dp-line .dp-det svg { width: 13px; height: 13px; }
.dock-pop .dp-line .link { min-height: 44px; }

/* a tempo and side menu on the Sketch: the same row, the same switch */
.pop.how-pop { width: 330px; padding: 10px; display: grid; gap: 8px; }
.pop.how-pop .dp-side { display: flex; }
.pop.how-pop .dp-side button { flex: 1; }
.pop.how-pop .dp-chips button { min-height: 34px; }

/* the class header: tabs, View and Print; the Class menu by the name */
.cp-name { display: flex; align-items: center; gap: 2px; min-width: 0; }
.cp-cls { flex: none; }
.cp-cls-b { min-height: 36px; color: var(--lp-mid); font-weight: 600; }
.cp-cls-b svg { width: 13px; height: 13px; }
.pop.cls-pop { left: 0; right: auto; width: 230px; padding: 6px; }
.cp-tools { gap: 10px; }
.vw-radio .vw-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #8A8178; flex: none; margin-left: auto; position: relative; }
.vw-radio[aria-checked="true"] .vw-dot { box-shadow: inset 0 0 0 5px var(--lp-ink); }
.vw-row .vw-tx { flex: 1; }
@media (max-width: 700px) {
  .cp-title input.name { width: auto; flex: 1 1 0; min-width: 0; }
  .cp-tools { width: auto; order: 2; margin-left: auto; }
  .cp-tools > .btn:last-child { margin-left: 0; }
  .cp-cls-b { min-height: 44px; }
}
/* the guide's top line keeps only the class's words (its switches are in View) */
.g-view { min-height: 0; }
/* the Sketch band stays one line on a wide window: the song's name gives first */
@media (min-width: 701px) {
  .sk2 .sk-h.sk-band { flex-wrap: nowrap; }
  .sk2 .sk-band .sk-bsong { flex: 0 1 auto; overflow: hidden; }
  .sk2 .sk-band .sk-bname, .sk2 .sk-band .sk-when, .sk2 .sk-band .bk-aw, .sk2 .sk-band .sk-bmenu { flex-shrink: 0; }
  .sk2 .sk-band .prop-wrap { flex-shrink: 0; }
}
.cp-name input.name { field-sizing: content; width: auto; min-width: 6ch; max-width: 420px; }
/* the class header on a phone: one row (back, name, Class, View, Print),
   then the tabs; the date, start and minutes sit in the Class menu */
.cls-meta { display: none; }
@media (max-width: 700px) {
  .cp-head { flex-wrap: wrap; align-items: center; }
  .cp-title { flex: 1 1 0; min-width: 0; }
  .cp-title .cp-meta { display: none; }
  .cp-name input.name { max-width: 100%; field-sizing: fixed; width: 100%; }
  .cp-tools { order: 2; width: auto; margin-left: 0; gap: 2px; }
  .cp-tools .btn .pt { display: none; }
  .cp-tools .btn[aria-label="Print"] { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .cp-tools .vw-btn { min-height: 44px; padding: 0 8px; }
  .cp-tabs { order: 5; }
  .pop.cls-pop { position: fixed; left: 16px; right: 16px; top: auto; width: auto; margin-top: 6px; }
  .cls-meta { display: grid; gap: 6px; padding: 8px 10px 6px; border-top: 1px solid var(--lp-line); margin-top: 6px; }
  .cls-meta label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; min-height: 44px; }
  .cls-meta input { border: 0; background: var(--lp-inset); border-radius: 8px; padding: 6px 10px; min-height: 40px; font-size: 15px; }
  .cls-meta .mins { justify-self: start; }
  .cls-meta .mins button { min-width: 44px; min-height: 44px; }
  .sk-page > .sk-title, .sk-page > .sk-meta { display: none; }
}
@media print { .sk-page > .sk-title, .sk-page > .sk-meta { display: block !important; } }
.cls-meta .mins input { width: 52px; }
/* Options: the library's easier and harder ways, one tap each */
.opt-sugs { display: flex; flex-wrap: wrap; gap: 4px; margin: -2px 0 6px 144px; }
.opt-sug { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--lp-inset); font-size: 13px; font-weight: 600; color: var(--lp-ink); touch-action: manipulation; }
.opt-sug svg { width: 12px; height: 12px; color: var(--lp-mid); }
.opt-sug:hover { background: var(--lp-line2); }
@media (max-width: 700px) { .opt-sugs { margin-left: 0; } .opt-sug { min-height: 44px; } }

/* ---------------------------------------------------------------
   The move figures, still (2026-10-15): app/figures.js draws every
   figure with a thin gap round each limb in --fig-bg, so the gap must
   be the color of the tile the figure sits on. White is the default.
   --------------------------------------------------------------- */
svg.lpf { display: block; overflow: visible; }
.mv-card .fig, .composer .sug .f, .fm .f, .pr-row .f, .lib-card, .sk-pick .sug .f, .c-step .f,
.medit .h .f, .bd-sug .f, .spot-sugs .sug .f, .rv-h .f, .dock-pop .dp-h .f, .dp-mv .f, .mvp-h .f,
.sk-cb-part .f, .fm-parts .f, .cb-card { --fig-bg: var(--lp-inset); }
.lib-card:hover, .cb-card:hover { --fig-bg: #EDEDEA; }
.cue .f, .g-row .fig, .pc-m .mchip { --fig-bg: var(--tint, var(--lp-inset)); }
.sk-line .f, .ls-copy .f { --fig-bg: var(--ct, var(--lp-inset)); }
.mv2 .bf, .sel-mv .f, .tf-mv .f, .pr-figbtn, .bk-mv, .mchip, .wchip svg { --fig-bg: #fff; }
.cb-big .cb-top { --fig-bg: var(--lp-inset); }
.cb-big .cb-f { width: 40px; height: 40px; }
.cb-big .cb-figs { flex-wrap: wrap; }
.plan .fm:hover .f, .plan .fm:focus-within .f, .rv-mv:hover .rv-h .f, .rv-mv.lit .rv-h .f, .dp-mv.on .f { --fig-bg: #fff; }
.pr-figs button { --fig-bg: #fff; }
.pr-figs button:hover, .pr-figs button.on { --fig-bg: var(--lp-inset); }

/* ---------- library card: a plus that says where it goes on hover (2026-10-15) ----------
   "what does this add for?": the truncated "Add to W..." pill read as nothing.
   A round plus, with an instant label naming the block; no native cue tooltip
   over the card. */
.lib-add { width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.lib-add span { display: none; }
.lib-add[data-tip]::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 6px); white-space: nowrap; background: var(--lp-ink); color: #fff; font: 600 12px/1 var(--fu); padding: 6px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.lib-add[data-tip]:hover::after, .lib-add[data-tip]:focus-visible::after { opacity: 1; }
@media (hover: none) { .lib-add { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lib-add[data-tip]::after { transition: none; } }

/* ---------- placing, round two (2026-10-15) ----------
   The highlight's results are the Library's cards; tempo and side are
   pills; Replace asks in a small bar at the top of the panel; What's that
   move? is one row. No outlines, no shadows: fills only. */
.libpanel .pn-ctx .sel-res { margin-top: 2px; }
.libpanel .pn-ctx .sel-res:empty { display: none; }
.libpanel .pn-ctx .sel-grid, .libpanel .pn-body .sel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; flex: none; overflow: visible; padding-bottom: 0; }
.sel-res > .lib-gh:first-child { margin-top: 10px; }
/* a part's name over its waiting moves, numbered as in the Library panel */
.lib-gp { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--lp-ink); margin: 8px 0 0; }
.lib-gp:first-child { margin-top: 0; }
.lib-gp span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--pink-t); color: var(--pink-deep); font-family: var(--fd); font-weight: 800; font-size: 12px; }
.sel-card { cursor: pointer; min-height: 44px; touch-action: manipulation; }
.sel-card.on { background: var(--pink-t); }
.sel-card.picked { background: var(--pink-t); }
.sel-card .pk { position: absolute; top: 6px; left: 8px; font-weight: 800; font-size: 12px; color: var(--pink-deep); }
.lib-card .nm .tgs { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px; margin: 4px 0 1px; }
.lib-card .nm .tg { font-size: 11.5px; padding: 0 7px; }
.res-new { width: 100%; margin-top: 6px; }
.res-new.on { background: var(--lp-inset); }
.dp-rows { display: flex; flex-direction: column; margin-top: 6px; }
.dp-rows .dp-act { min-height: 44px; align-items: center; }
.dp-rows .dp-act b { font-weight: 700; }
.dp-rows .dp-act em { font-style: normal; color: var(--lp-mut); font-weight: 500; }
/* Same as before, other side: a long song name stays on one line */
.os-go .os-l { display: flex; min-width: 0; white-space: nowrap; }
.os-go .os-l > * { flex: none; }
.os-go .os-l b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-left: .28em; }
.os-ask { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 8px 8px; background: var(--lp-inset); border-radius: var(--r-m); }
.os-ask span { grid-column: 1 / -1; font-size: 13.5px; font-weight: 600; padding: 0 4px; }
.os-ask button:only-of-type { grid-column: 1 / -1; }
.os-ask button { font-weight: 600; font-size: 13.5px; min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); background: var(--lp-paper); touch-action: manipulation; }
.os-ask button:hover { background: var(--lp-line2); }
.wtm-row { margin-top: 4px; }
.wtm { margin-top: 8px; }
.wtm .lib-gh { margin-top: 12px; }
.wtm .wtm-new { width: 100%; margin-top: 6px; min-height: 44px; align-items: center; }
.rep-bar { background: var(--lp-inset); border-radius: 12px; padding: 10px 12px 10px; margin: 0 0 10px; }
.rep-bar p { font-size: 14px; line-height: 1.35; margin: 0 0 8px; }
.rep-bar p b { font-weight: 700; }
.rep-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-acts .btn { min-height: 44px; }
.rep-acts .btn.soft { background: #fff; }
.wchip .tgs { margin-left: 2px; flex: none; }
.wchip .tg { font-size: 11.5px; padding: 0 7px; }
/* the Sketch's side, a pill once it is set */
.sk-side:not(.unset) { background: var(--blue-t); color: var(--blue-deep); border-radius: 999px; font-weight: 700; font-size: 13px; padding: 4px 11px; }
.sk-side:not(.unset):hover { background: var(--blue-t); color: var(--lp-ink); }
/* the Guide's tempo and side, as pills that print */
.g-row .tempo.g-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.g-row .tempo.g-tags .tgs { margin-left: 0; }
.g-row .tempo.g-tags .tg { font-size: 13.5px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cb-parts .tgs, .fm-parts .tgs { margin-left: 4px; }
@media (max-width: 700px) { .rep-acts .btn { flex: 1 1 auto; justify-content: center; } }
.lib-card .tg.tempo, .wchip .tg.tempo { background: var(--lp-line); }
.cue .how .cue-tags .tgs { margin-left: 0; }
/* a combo on the Plan: one card, its parts as one short line */
.cb-line { grid-column: 2; margin: 5px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--lp-ink); }
.cb-line .cb-p { font-weight: 600; }
.cb-line .arr { color: var(--lp-mut); font-weight: 600; margin: 0 1px; }
.cb-line .tgs { margin-left: 2px; vertical-align: baseline; }
.cb-line .tg { font-size: 11.5px; padding: 0 7px; }

/* ---------- the class header, one row (2026-10-15) ----------
   Back, name, date, minutes, the tabs, View, Print: one row from 1280px;
   below that it wraps (the tabs drop under); on a phone the name and the
   tools, then the date and minutes, then the tabs. No start time. */
.cp-head.one { flex-wrap: nowrap; column-gap: 14px; row-gap: 10px; padding: 12px 24px; }
.cp-head.one .cp-title { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
.cp-head.one .cp-name { min-width: 0; flex: 0 1 auto; }
.cp-head.one .cp-name input.name { font-size: 22px; max-width: 320px; text-overflow: ellipsis; }
.cp-head.one .cp-meta { display: flex; flex-wrap: nowrap; gap: 8px; flex: none; }
.cp-head.one .cp-meta input[type="date"] { min-height: 36px; }
.cp-head.one .cp-props { flex: 0 1 auto; min-width: 0; }
.cp-head.one .cp-tabs { order: 0; margin-left: 4px; width: auto; flex: none; }
.cp-head.one .sp { display: block; flex: 1 1 0; }
.cp-head.one .cp-tools { order: 0; margin-left: 0; width: auto; flex: none; }
@media (max-width: 1279px) {
  .cp-head.one { flex-wrap: wrap; }
  .cp-head.one .cp-tabs { order: 5; margin-left: 50px; }
  .cp-head.one .sp { display: block; }
  .cp-head.one .cp-tools { order: 2; }
}
@media (max-width: 700px) {
  .cp-head.one { padding: 10px 16px 12px; column-gap: 8px; }
  .cp-head.one .cp-title { flex: 1 1 0; flex-wrap: wrap; row-gap: 6px; }
  .cp-head.one .cp-name { flex: 1 1 100%; }
  .cp-head.one .cp-name input.name { max-width: 100%; font-size: 21px; }
  .cp-head.one .cp-title .cp-meta { display: flex; flex-wrap: wrap; row-gap: 4px; }
  .cp-head.one .cp-meta input { min-height: 44px; }
  .cp-head.one .mins button { min-width: 44px; min-height: 44px; }
  .cp-head.one .sp { display: none; }
  .cp-head.one .cp-tools { order: 2; align-self: flex-start; }
  .cp-head.one .cp-tabs { order: 5; margin-left: 0; width: 100%; }
}
.tl-row { grid-template-columns: 0 minmax(0, 1fr); gap: 0; }
.tl-clock { padding: 0; overflow: hidden; }
.bk-tpl { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.bk-tpl .btn { min-height: 44px; }
.cl-row { grid-template-columns: 74px minmax(0, 1fr) 280px 90px auto; }
.cl-acts { display: flex; align-items: center; gap: 2px; }
.cl-tpl { position: relative; width: 34px; height: 34px; border-radius: 50%; color: var(--lp-mut); display: flex; align-items: center; justify-content: center; opacity: 0; }
.cl-tpl svg { width: 16px; height: 16px; }
.cl-row:hover .cl-tpl, .cl-tpl:focus-visible, .cl-row:focus-within .cl-tpl { opacity: 1; }
.cl-tpl:hover { background: #fff; color: var(--lp-ink); }
.cl-tpl[data-tip]::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 6px); white-space: nowrap; background: var(--lp-ink); color: #fff; font: 600 12px/1 var(--fu); padding: 6px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.cl-tpl[data-tip]:hover::after, .cl-tpl[data-tip]:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cl-tpl[data-tip]::after { transition: none; } }
@media (max-width: 700px) {
  .cl-row { grid-template-columns: 52px minmax(0, 1fr) auto auto; }
  .cl-acts { grid-column: 4; grid-row: 1; }
  .cl-tpl, .cl-del { width: 44px; height: 44px; opacity: 1; }
}
@media (hover: none) { .cl-tpl { opacity: 1; } }

/* ---------- a move's page (2026-10-15) ----------
   "When I click on something in the library, i want to be able to learn
   more about it + how can I edit a move?" In the side panel (a sheet on a
   phone) or on the Moves page. Fills and hairlines only; pills are fills;
   one pink button. Edit turns the same page into fields in place. */
.mp-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pink-deep); margin: 0 0 2px 6px; vertical-align: middle; flex: none; }
.lib-info { position: absolute; top: 1px; right: 1px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--lp-mut); touch-action: manipulation; }
.lib-info svg { width: 18px; height: 18px; }
.lib-info:hover { color: var(--lp-ink); }
.lib-info:focus-visible { box-shadow: var(--focus); outline: none; }
.mp-i { flex: none; width: 44px; height: 44px; margin: -4px 0 0 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--lp-mut); touch-action: manipulation; }
.mp-i svg { width: 19px; height: 19px; }
.mp-i:hover { color: var(--lp-ink); background: var(--lp-inset); }
.mp-i:focus-visible { box-shadow: var(--focus); outline: none; }

.libpanel .pn-body.mp-body { padding-top: 2px; }
.mp { padding-bottom: 8px; }
.mp-top { display: flex; align-items: center; gap: 2px; margin: 0 -8px 6px; }
.mp-top .sp { flex: 1; }
.mp-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--lp-ink); touch-action: manipulation; }
.mp-back svg { width: 18px; height: 18px; }
.mp-back:hover { background: var(--lp-inset); }
.mp-fav { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--lp-mut); touch-action: manipulation; }
.mp-fav svg { width: 19px; height: 19px; fill: none; }
.mp-fav:hover { color: var(--lp-ink); background: var(--lp-inset); }
.mp-fav.on { color: var(--lp-ink); }
.mp-fav.on svg { fill: currentColor; }
.mp-edit { min-height: 44px; margin-right: 8px; }
.mp-back:focus-visible, .mp-fav:focus-visible, .mp-link:focus-visible, .mp-pick button:focus-visible, .mp-rm:focus-visible { box-shadow: var(--focus); outline: none; }
.mp-fig { --fig-bg: var(--lp-inset); background: var(--lp-inset); border-radius: 14px; height: 176px; display: flex; align-items: center; justify-content: center; }
.mp-fig svg { width: 150px; height: 150px; }
.mp-h { font-family: var(--fd); font-weight: 700; font-size: 22px; line-height: 1.2; margin: 14px 0 0; }
.mp-also { font-size: 13.5px; color: var(--lp-mid); margin: 4px 0 0; line-height: 1.4; }
.mp-also b { font-weight: 600; color: var(--lp-ink); }
.mp-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.mp-pills .tg { font-size: 12.5px; padding: 2px 10px; background: var(--lp-inset); color: var(--lp-ink); font-weight: 600; }
.mp-pills .tg.mp-kit { background: var(--teal-t); color: var(--teal-deep); }
.mp-go { width: 100%; justify-content: center; min-height: 44px; margin-top: 14px; }
.mp-go svg { width: 16px; height: 16px; }
.mp-sec { margin-top: 18px; }
.mp-sec h4 { font-size: 13px; font-weight: 600; color: var(--lp-mut); margin: 0 0 6px; }
.mp-works { display: flex; gap: 14px; align-items: center; }
.mp-bd { flex: none; width: 104px; }
.mp-bd svg { width: 100%; height: auto; }
.mp-ww p { font-size: 14.5px; line-height: 1.45; margin: 0 0 2px; }
.mp-k { display: inline-block; min-width: 48px; font-size: 13px; font-weight: 600; color: var(--lp-mut); }
.mp-cue-r { font-size: 15px; line-height: 1.55; margin: 0; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.mp-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--lp-inset); border-radius: 999px; padding: 4px 11px; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.mp-rm { width: 28px; height: 28px; margin: -4px -9px -4px 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--lp-mut); touch-action: manipulation; }
.mp-rm svg { width: 12px; height: 12px; }
.mp-rm:hover { color: var(--lp-ink); background: var(--lp-line2); }
.mp-ln { font-size: 14.5px; line-height: 1.5; margin: 0; }
.mp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.mp-flag { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--lp-line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mp-link { min-height: 44px; padding: 0 2px; font-size: 13.5px; font-weight: 600; color: var(--lp-mid); text-decoration: underline; text-decoration-color: var(--lp-line2); text-underline-offset: 3px; touch-action: manipulation; }
.mp-link:hover { color: var(--lp-ink); text-decoration-color: currentColor; }
.mp-sent { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--teal-deep); }
.mp-sent svg { width: 13px; height: 13px; }
.mp-sent.wait { color: var(--lp-mid); font-weight: 500; font-style: italic; }
.mp-fl { flex: 1 1 100%; font-size: 13px; font-weight: 600; color: var(--lp-mut); }
.mp-flag textarea { flex: 1 1 100%; border: 0; background: var(--lp-inset); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 15px; line-height: 1.45; outline: none; resize: none; }
.mp-flag textarea:focus { box-shadow: var(--focus); }
.mp-fa { display: flex; gap: 6px; }
.mp-fa .btn, .mp-foot .btn { min-height: 44px; }

/* editing, in place */
.mp-name { display: block; width: 100%; margin: 14px 0 0; font-family: var(--fd); font-weight: 700; font-size: 22px; line-height: 1.2; border: 0; outline: none; background: var(--lp-inset); border-radius: 10px; padding: 7px 10px; }
.mp-cue, .mp-add { border: 0; outline: none; background: var(--lp-inset); font: inherit; color: var(--lp-ink); }
.mp-cue { display: block; width: 100%; border-radius: 10px; padding: 8px 12px; font-size: 15px; line-height: 1.5; resize: none; overflow: hidden; }
.mp-name:focus, .mp-cue:focus, .mp-add:focus { box-shadow: var(--focus); }
.mp-add { width: 108px; min-height: 30px; border-radius: 999px; padding: 4px 12px; font-size: 13.5px; }
.mp-add::placeholder, .mp-cue::placeholder { color: var(--lp-mut); }
.mp-pick { display: flex; flex-wrap: wrap; gap: 5px; }
.mp-pick button { font-weight: 600; font-size: 13.5px; background: var(--lp-inset); border-radius: 999px; padding: 5px 12px; min-height: 32px; touch-action: manipulation; }
.mp-pick button:hover { background: var(--lp-line2); }
.mp-pick button.on { background: var(--lp-ink); color: #fff; }
.mp.editing .mus-ed { padding: 10px 12px; }
.mp-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--lp-line); }

/* the Moves page: the move's page in a reading column */
.mp-page .mp { max-width: 560px; margin: 0 auto; }
.mp-page .mp-fig { height: 240px; }
.mp-page .mp-fig svg { width: 200px; height: 200px; }
.mp-page .mp-h, .mp-page .mp-name { font-size: 28px; }
.mv-card:focus-visible { box-shadow: var(--focus); outline: none; }
@media (max-width: 700px) {
  .mp-pick button, .mp-add { min-height: 44px; }
  .mp-rm { width: 44px; height: 44px; margin: -12px -14px -12px -4px; }
  .mp-page .mp-fig { height: 200px; }
  .mp-page .mp-fig svg { width: 170px; height: 170px; }
}
.mp [hidden] { display: none !important; }

/* a card that starts on a part's first line starts under the part's hairline,
   level with its lyric run (margin 8 + hairline 1 + the run's 3px inset) */
@media (min-width: 701px) {
  .grid > .mv2.on-sep, .grid > .lplan.on-sep { margin-top: 12px; }
  .grid > .cue.on-sep { margin-top: 15px; }
}

/* ---------- a move's figure is a button: click it to choose another (2026-10-15) ---------- */
.fig-btn { display: block; flex: none; cursor: pointer; touch-action: manipulation; }
.fig-btn:hover { box-shadow: 0 0 0 2px var(--lp-line2); }
.fig-btn:focus-visible { box-shadow: var(--focus); outline: none; }
.fig-btn svg { pointer-events: none; }
.mp-fig .fig-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 14px; }
.mp-fig .fig-btn:hover { box-shadow: inset 0 0 0 2px var(--lp-line2); }
/* the chooser: right where the figure is */
.fch { --fig-bg: var(--lp-inset); background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--lp-line2); padding: 10px; margin: 10px 0 6px; font-size: 14px; }
.fch-top { display: flex; align-items: center; gap: 6px; }
.fch-q { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--lp-inset); border-radius: 999px; padding: 0 14px; min-height: 44px; }
.fch-q svg { width: 16px; height: 16px; flex: none; color: var(--lp-mut); }
.fch-q input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 15px; }
.fch-q:focus-within { box-shadow: var(--focus); }
.fch .x { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--lp-mut); flex: none; }
.fch .x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.fch .x svg { width: 15px; height: 15px; }
.fch-list { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; margin-top: 4px; padding: 2px; }
.fch-h { font-size: 12.5px; font-weight: 600; color: var(--lp-mut); margin: 10px 0 5px; }
.fch-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; }
.fch-t { aspect-ratio: 1; min-height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--lp-inset); padding: 3px; touch-action: manipulation; }
.fch-t svg { width: 100%; height: 100%; max-width: 56px; max-height: 56px; }
.fch-t:hover { box-shadow: 0 0 0 2px var(--lp-line2); }
.fch-t:focus-visible { box-shadow: var(--focus); outline: none; }
.fch-t.on { --fig-bg: #E4E1DC; background: #E4E1DC; }
.fch-none { font-size: 13.5px; color: var(--lp-mut); padding: 14px 4px; }
.fch-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--lp-line); }
.fch-lib { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--lp-inset); font-size: 13.5px; font-weight: 600; touch-action: manipulation; }
.fch-lib svg { width: 15px; height: 15px; }
.fch-lib[aria-pressed="true"] { background: var(--lp-ink); color: #fff; }
.fch-lib:focus-visible { box-shadow: var(--focus); outline: none; }
.fch-ask { font-size: 13px; color: var(--lp-mut); display: flex; align-items: center; gap: 4px; }
.fch-foot .mp-fl { flex: 1 1 100%; margin-top: 4px; }
.fch-foot textarea { flex: 1 1 100%; border: 0; background: var(--lp-inset); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 15px; line-height: 1.45; outline: none; resize: none; }
.fch-foot textarea:focus { box-shadow: var(--focus); }
.fch-foot .mp-fa { display: flex; gap: 6px; }
.sk-line .fch { margin: 8px 0 4px; }

/* ---------- the move picked: its own pale fill, the block's color (2026-10-15) ---------- */
.libpanel .dock-pop.pn-ctx.medit { background: var(--ct); border-radius: 12px; padding: 12px 14px 14px; margin: 0 0 18px; border-bottom: 0; }
.medit.pn-ctx .dp-h .f { background: #fff; --fig-bg: #fff; border-radius: 9px; }
.medit.pn-ctx .qk, .medit.pn-ctx .dp-chips button:not(.on), .medit.pn-ctx .seg { background: #fff; }
.medit.pn-ctx .qk:hover, .medit.pn-ctx .dp-chips button:not(.on):hover { background: rgba(255, 255, 255, .6); }
.medit.pn-ctx .qk-new { box-shadow: none; }
.medit.pn-ctx .qk-key { background: var(--lp-inset); box-shadow: none; }
.medit .me-acts { border-top-color: rgba(26, 20, 16, .09); }
.medit .me-acts .dp-act { font-size: 14px; }
.medit .me-acts .dp-act svg { width: 17px; height: 17px; color: var(--lp-ink); }
.medit .me-acts .dp-act:hover { background: rgba(255, 255, 255, .6); }
.medit .me-acts .dp-act small { font-style: italic; font-weight: 500; font-size: 12.5px; color: var(--lp-mid); margin-top: 1px; }
.medit .me-acts .dp-act:focus-visible { box-shadow: var(--focus); outline: none; }
.me-det { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(26, 20, 16, .09); }
.me-det-h { display: flex; align-items: center; justify-content: space-between; }
.me-det-h h4 { font-family: var(--fd); font-weight: 700; font-size: 15px; margin: 0; }
.me-det-h .ic-btn { width: 44px; height: 44px; margin-right: -8px; }
.me-det-h .ic-btn svg { width: 14px; height: 14px; }
.me-det-h .ic-btn:hover { background: rgba(255, 255, 255, .6); color: var(--lp-ink); }
.me-det .me-lab { margin: 6px 0 4px; font-size: 13px; color: var(--lp-mid); }
.me-det textarea, .me-det .me-reps { display: block; width: 100%; border: 0; background: #fff; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 15px; line-height: 1.5; outline: none; resize: vertical; }
.me-det textarea:focus, .me-det .me-reps:focus { box-shadow: var(--focus); }
/* a combo's parts: one compact row each */
.me-parts { display: flex; flex-direction: column; margin-top: 8px; }
.me-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px; min-height: 44px; }
.me-prow .pn { font-weight: 600; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; padding-right: 4px; }
.me-prow .pn i { font-style: normal; font-weight: 500; color: var(--lp-mid); }
.me-pill { min-height: 44px; display: inline-flex; align-items: center; padding: 0 2px; touch-action: manipulation; }
.me-pill span { display: inline-block; background: #fff; border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.me-pill.unset span { color: var(--lp-mid); font-weight: 500; }
.me-pill:hover span { background: rgba(255, 255, 255, .6); }
.me-pill:focus-visible { outline: none; }
.me-pill:focus-visible span { box-shadow: var(--focus); }
/* Paste "<move>" here, at the top of the highlighted lines */
.pn-ctx .dp-paste { width: 100%; margin: 2px 0 6px; padding: 8px 10px; background: var(--lp-inset); }
.pn-ctx .dp-paste:hover { background: var(--lp-line); }
.pn-ctx .dp-paste b { font-weight: 700; }
.cb-card:focus-visible { box-shadow: var(--focus); outline: none; }
.fch-q input:focus, .fch-q input:focus-visible { box-shadow: none; outline: none; }

/* ===============================================================
   BLOCKS AS A CLASS BUILDER (2026-10-15)
   blocks-builder-studies.html + block-structure-studies.html: the
   outline on the left, the strip on top, body parts for today, each
   block's parts as rows with tiny figures and open rings, and a quiet
   column on the right. Fills and hairlines; no shadows, no colored edges.
   =============================================================== */
@media (min-width: 901px) {
  .bk-wrap.bb { grid-template-columns: auto minmax(0, 1fr) var(--mini); }
  .bk-wrap.bb.with-lib { grid-template-columns: auto minmax(0, 1fr) var(--panW, var(--panD)); }
  .bk-wrap.bb > .sk-ol:not(.mini) { width: var(--olW, 272px); }
}
.bk-wrap.bb > .scroll, .bk-wrap.bb:not(.with-lib) > .scroll { grid-column: 2; grid-row: 1; height: 100%; }
@media (max-width: 900px) { .bk-wrap.bb > .sk-ol { display: none; } .bk-wrap.bb > .scroll { height: calc(100vh - var(--barH, 60px) - var(--headH, 69px)); } }
/* on a phone Blocks scrolls as one page, so the top bar and the class's
   head scroll away and the blocks get the screen (2026-10-23, her words:
   "Home, Classes, Move Library, and then Blocks Sketches are blocking
   everything, so I can't really see anything") */
@media (max-width: 700px) {
  .bk-wrap.bb > .scroll, .bk-wrap.bb:not(.with-lib) > .scroll { height: auto; overflow: visible; }
  body:has(.bb-main) .lp-bar { position: static; }
  body:has(.bb-main) .libpanel { top: 0; }
  /* the Guide the same way (2026-10-23, her words: "make the Guide on a phone scroll as one page too, like Blocks") */
  .scroll:has(> .guide) { height: auto !important; overflow: visible; }
  body:has(.scroll > .guide) .lp-bar { position: static; }
}
/* on a phone, no Sketch and no Plan tab for now (2026-10-23) */
@media (max-width: 860px) and (pointer: coarse) { .cp-tabs > a[data-v="sketch"], .cp-tabs > a[data-v="plan"] { display: none; } }

/* the outline, shared with the Sketch */
.ol-h { gap: 8px; }
.ol-h b { flex: none; }
.ol-len { margin-left: auto; font-size: 13px; color: var(--lp-mid); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ol-mini { display: flex; gap: 2px; height: 5px; margin: 10px 10px 14px; }
.ol-mini i { min-width: 3px; border-radius: 3px; background: var(--c); }
.ol-mini i.sp { background: var(--lp-line); }
.ol-p svg { width: 13px; height: 13px; flex: none; }
.ol-s .mn { flex: none; font-size: 13px; font-weight: 600; color: var(--lp-mid); font-variant-numeric: tabular-nums; }
.ol-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--lp-line); }
.ol-foot .ol-add.ol-addb { margin-top: 0; width: auto; flex: 1; }
.ol-spare { flex: none; padding-right: 10px; font-size: 13px; color: var(--lp-mid); font-variant-numeric: tabular-nums; white-space: nowrap; }

.bb-page { max-width: 1040px; padding: 22px 32px 72px; }
.bb-reach { opacity: 0; transition: opacity 120ms ease-out; }
.bc:hover > .bc-foot.bb-reach, .bc:focus-within > .bc-foot.bb-reach, .bb-strip:hover .bb-reach, .bb-strip:focus-within .bb-reach, .bb-reach:focus-within, .bb-reach.open { opacity: 1; }
.bb-row:hover .bb-reach, .bb-row:focus-within .bb-reach, .bb-row .bb-reach.open { opacity: 1; }
@media (hover: none) { .bb-reach, .bb-row .bb-reach { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bb-reach { transition: none; } }

/* ---------- the strip ---------- */
.bb-strip { position: relative; margin-bottom: 18px; }
.bb-st-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 44px; margin-bottom: 14px; }
.bb-len { font-size: 14.5px; color: var(--lp-mid); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-len b { color: var(--lp-ink); font-weight: 700; }
.bb-st-top .sp { flex: 1; }
.bb-layers button { padding: 6px 13px; font-size: 13.5px; position: relative; }
.bb-st { display: flex; align-items: flex-end; gap: 3px; height: 12px; }
.bb-strip[data-layer="body"] .bb-st { height: 30px; }
.bb-strip[data-layer="effort"] .bb-st { height: 40px; }
.bb-sg { position: relative; min-width: 6px; height: 100%; padding: 0; border-radius: 3px; display: flex; flex-direction: column; justify-content: flex-end; touch-action: manipulation; }
.bb-sg::after { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -14px; }
.bb-sg .fill { display: block; width: 100%; height: 100%; border-radius: 3px; background: var(--c); }
.bb-sg.spare .fill { background: var(--lp-line); }
.bb-strip[data-layer="effort"] .bb-sg.spare .fill, .bb-strip[data-layer="body"] .bb-sg.spare .fill { height: 4px; }
.bb-sg .fill.none { height: 4px; background: var(--lp-line); }
.bb-sg.on::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 1px; background: var(--lp-ink); }
.bb-sg:focus-visible { outline: none; box-shadow: var(--focus); }
.bb-cap { display: block; height: 4px; border-radius: 2px; background: var(--c); margin-bottom: 2px; }
.bb-rg { display: grid; gap: 2px; width: 100%; }
.bb-rg i { display: block; height: 4px; border-radius: 2px; background: #EEEDEA; }
.bb-rg i.on { background: var(--rc); }
.bb-names { display: flex; gap: 3px; margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--lp-ink); }
.bb-names span { min-width: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-names .sp { color: var(--lp-mid); font-weight: 500; }
.bb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 10px; font-size: 12.5px; color: var(--lp-mid); }
.bb-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bb-ramp { display: inline-block; width: 120px; height: 6px; border-radius: 3px; }
.bb-tip { position: absolute; z-index: 30; width: 280px; background: #fff; border-radius: 14px; padding: 12px 14px 13px; box-shadow: 0 0 0 1px var(--lp-line2); pointer-events: none; }
.bb-tip h5 { display: flex; align-items: center; gap: 8px; font-family: var(--fd); font-weight: 800; font-size: 16px; }
.bb-tip h5 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.bb-tip h5 b { margin-left: auto; font-family: var(--fu); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.bb-tip ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.35; }
.bb-tip li { display: flex; align-items: flex-start; gap: 8px; }
.bb-tip li svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--lp-mid); }
.bb-tip em { font-style: normal; color: var(--lp-mut); }
.bb-ef { width: 10px; height: 10px; border-radius: 50%; flex: none; margin: 3px 2px 0; }

/* up and down */
.bb-lv { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 10px; }
.bb-lv-k { position: relative; height: 92px; font-size: 12.5px; color: var(--lp-mid); }
.bb-lv-k span { position: absolute; left: 0; white-space: nowrap; }
.bb-lv-k span:nth-child(1) { top: 5px; } .bb-lv-k span:nth-child(2) { top: 37px; } .bb-lv-k span:nth-child(3) { top: 69px; }
.bb-lv-c { position: relative; min-width: 0; }
.bb-lv-c svg { display: block; width: 100%; height: 92px; overflow: visible; }
.bb-lv-g { fill: none; stroke: var(--lp-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bb-lv-l { fill: none; stroke: var(--lp-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bb-lvd { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--lp-ink); }
.bb-lv-bars { position: relative; height: 10px; margin-top: 6px; }
.bb-lv-bars i { position: absolute; top: 0; height: 10px; border-radius: 3px; background: var(--c); }
.bb-lv-names { position: relative; height: 18px; margin-top: 6px; font-size: 12.5px; font-weight: 600; }
.bb-lv-names span { position: absolute; top: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 4px; }
.bb-sug { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; padding: 6px 6px 6px 12px; background: var(--lp-inset); border-radius: 12px; font-size: 14px; min-height: 48px; }
.bb-sug-n { font-weight: 600; font-size: 12.5px; background: #fff; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.bb-act { position: relative; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; font-weight: 600; font-size: 13.5px; color: var(--lp-ink); white-space: nowrap; touch-action: manipulation; }
.bb-act::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.bb-act:hover { background: var(--lp-line); }

/* ---------- body parts for today ---------- */
.bb-today { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 4px; }
.bb-k { font-family: var(--fd); font-weight: 800; font-size: 16px; }
.bb-tchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bb-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--lp-inset); font-weight: 600; font-size: 13.5px; color: var(--lp-ink); white-space: nowrap; touch-action: manipulation; }
.bb-chip::after { content: ""; position: absolute; left: -2px; right: -2px; top: -6px; bottom: -6px; }
.bb-chip.on, .bb-chip.goal { background: var(--lp-ink); color: #fff; }
.bb-chip svg { width: 12px; height: 12px; flex: none; }
.bb-chip.on svg { opacity: .8; }
.bb-chip.add { color: var(--lp-mid); }
.bb-chip.add:hover { color: var(--lp-ink); }
.bb-cov { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 0 14px; align-items: center; margin: 6px 0 24px; }
.bb-cr { display: contents; }
.bb-cr > * { min-height: 44px; display: flex; align-items: center; border-top: 1px solid var(--lp-line); }
.bb-cn { font-weight: 600; font-size: 13.5px; }
.bb-ct { gap: 3px; }
.bb-ct i { height: 10px; min-width: 4px; border-radius: 3px; background: var(--lp-inset); }
.bb-ct i.on { background: var(--c); }
.bb-ct i.sp { background: transparent; }
.bb-cw { font-size: 13.5px; color: var(--lp-mid); }
.bb-cw b { color: var(--lp-ink); font-weight: 600; margin-left: 4px; }
.bb-cw .bb-act { background: var(--lp-inset); }

/* ---------- a block ---------- */
.bk-gap.bg-bb { margin-left: 0; }
.bc.tl-band { display: block; background: var(--ct); border-radius: 16px; padding: 8px 10px 10px 12px; }
.bc-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 52px; }
.bc .bc-name { width: auto; min-width: 3ch; max-width: 100%; font-size: 22px; letter-spacing: -.015em; padding: 4px 6px; margin-left: -2px; }
.bc .bc-name:hover, .bc .bc-name:focus { background: rgba(255, 255, 255, .7); }
.bc-h .sp { flex: 1; }
.bc-h .mins, .bb-time .mins { background: #fff; }
.bb-ic { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--lp-ink); flex: none; touch-action: manipulation; }
.bb-ic:hover { background: rgba(255, 255, 255, .7); }
.bb-ic svg { width: 16px; height: 16px; }
.bb-fold svg { transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.bc.folded .bb-fold svg { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .bb-fold svg { transition: none; } }
.bb-bt { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; padding: 0 4px; }
.bb-bt .ck { width: 14px; height: 14px; color: var(--cd); }
.bb-pill { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: #fff; font-weight: 600; font-size: 12.5px; color: var(--lp-ink); white-space: nowrap; font-variant-numeric: tabular-nums; touch-action: manipulation; }
.bb-pill::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.bb-pill svg { width: 12px; height: 12px; color: var(--cd); }
.bb-row .bb-pill { background: var(--ct); }
.bc-fl { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 4px 32px; font-size: 13.5px; color: var(--lp-mid); }
.bc-fl b { font-family: var(--fd); font-weight: 800; color: var(--cd); margin-right: 5px; }
.bc-fl svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
.bc-body { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 10px 16px; margin-top: 2px; }
.bc-main { min-width: 0; }
.bb-rows { display: grid; gap: 3px; }
.bb-row { --fig-bg: color-mix(in srgb, #fff 74%, var(--ct)); display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, max-content) max-content 44px; grid-template-areas: "n top song time more" ". mv mv mv ."; gap: 0 8px; align-items: center; min-height: 52px; padding: 4px 2px 4px 10px; border-radius: 11px; background: rgba(255, 255, 255, .74); }
.bb-row[draggable="true"] { cursor: grab; }
.bb-row.one { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mv"; min-height: 44px; padding: 6px 12px; }
.bb-row.one .bb-mv { padding: 0; }
.bb-n { grid-area: n; font-family: var(--fd); font-weight: 800; font-size: 15px; color: var(--cd); text-align: center; font-variant-numeric: tabular-nums; }
.bb-n svg { width: 14px; height: 14px; vertical-align: -2px; }
.bb-top { grid-area: top; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.bb-row .bb-name { font-family: var(--fu); font-weight: 700; font-size: 15px; color: var(--lp-ink); min-width: 4ch; max-width: 100%; padding: 4px 6px; margin-left: -6px; border-radius: 6px; }
.bb-row .bb-name:hover, .bb-row .bb-name:focus { background: #fff; }
.bb-title { font-weight: 700; font-size: 15px; min-width: 0; }
.bb-title em { font-style: normal; font-weight: 500; color: var(--cd); }
.bb-song { grid-area: song; min-width: 0; display: flex; justify-content: flex-end; }
.bb-songb { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; max-width: 240px; padding: 0 8px; border-radius: 8px; font-weight: 600; font-size: 13.5px; color: var(--lp-ink); }
.bb-songb span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-songb svg { width: 13px; height: 13px; flex: none; color: var(--cd); }
.bb-songb:hover { background: #fff; }
.bb-time { grid-area: time; display: flex; justify-content: flex-end; }
.bb-tm { font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; padding: 0 8px; }
.bb-more { grid-area: more; }
.bb-row > .bb-more:empty, .bb-row > span:empty { display: none; }
.bb-mv { grid-area: mv; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 3px; padding: 0 0 4px; min-width: 0; }
.bb-f { position: relative; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.bb-f svg { width: 26px; height: 26px; }
button.bb-f:hover { background: #fff; }
button.bb-f::before { content: ""; position: absolute; inset: -7px -1px; }
.bb-f[data-tip]:hover::after, .bb-f[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; z-index: 35; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); background: var(--lp-ink); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 3px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.bb-chg { position: absolute; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--pink-deep); }
.bb-ring { display: inline-block; width: 12px; height: 12px; margin: 0 5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #857C73; }
.bb-fc { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bb-word { position: relative; display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--ct); font-weight: 600; font-size: 12.5px; color: var(--lp-ink); white-space: nowrap; }
.bb-word::after { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
.bb-word.goal { background: var(--lp-ink); color: #fff; }
.bb-door { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 10px; font-weight: 600; font-size: 13.5px; color: var(--lp-ink); white-space: nowrap; touch-action: manipulation; }
.bb-door::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.bb-door:hover { background: rgba(255, 255, 255, .75); }
.bb-door svg { width: 13px; height: 13px; flex: none; }
.bb-door.sm { min-height: 30px; padding: 0 8px; font-size: 13px; color: var(--lp-mid); }
.bb-door.sm:hover { color: var(--lp-ink); background: #fff; }
.bb-strip .bb-door:hover { background: var(--lp-inset); }
.bc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 44px; margin: 4px 0 0 24px; }
.bc.blank .bc-foot { margin: 0 0 0 22px; }
.bc-foot > .menu-wrap { display: inline-flex; }
.bc-seeds { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
.bb-sd-k { font-size: 12.5px; font-weight: 600; color: var(--cd); margin-top: 6px; }
.bb-sd-k:first-child { margin-top: 0; }
.bb-sd-v { display: flex; flex-wrap: wrap; gap: 4px; }
.bb-sd-v .bb-chip { background: rgba(255, 255, 255, .82); }
.bb-sd-v .bb-chip.goal { background: var(--lp-ink); color: #fff; }
.bb-chip.soft { font-weight: 500; color: var(--lp-mid); }
.bb-chip svg { width: 14px; height: 14px; }
.bb-chip.mv { --fig-bg: #fff; padding: 0 2px 0 4px; gap: 4px; }
.bb-chip.mv .f { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.bb-chip.mv .f svg { width: 20px; height: 20px; }
.bb-chip-x { position: relative; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--lp-mid); }
.bb-chip-x::after { content: ""; position: absolute; inset: -9px -4px; }
.bb-chip-x svg { width: 10px; height: 10px; }
.bb-chip-x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.bb-sd-doors { display: flex; flex-direction: column; align-items: flex-start; }
.bb-sd-doors > .menu-wrap { display: inline-flex; }
.bb-loose { margin-top: 8px; display: grid; gap: 3px; }
.bb-ll { font-size: 12.5px; font-weight: 600; color: var(--cd); margin: 0 0 2px 10px; }
.bb-loose .bb-row { background: rgba(255, 255, 255, .5); }
.bb-search { margin: 6px 0 0; }

/* menus and choosers */
.bb-strip .pop, .bb-today .pop, .bb-top .pop, .bc-foot .pop, .bb-song .pop { left: 0; right: auto; }
.bb-song .pop, .bb-more .pop { left: auto; right: 0; }
.bb-mp { width: 340px; padding: 8px 10px 12px; }
.bb-mp-h { font-size: 12.5px; font-weight: 600; color: var(--lp-mid); margin: 8px 2px 6px; }
.bb-mp-h:first-child { margin-top: 2px; }
.bb-mp-r { display: flex; flex-wrap: wrap; gap: 4px; }
.bb-mp .bb-chip { background: var(--lp-inset); }
.bb-mp .bb-chip.on { background: var(--lp-ink); color: #fff; }
.bb-pmenu { width: 270px; }
.bb-pmenu .it.on { background: var(--lp-inset); }
.bb-pmenu .it small { font-weight: 500; }
.bb-pmenu .it > span { flex: 1; min-width: 0; }
.bb-it-t { flex: none; font-style: normal; font-weight: 500; font-size: 13px; color: var(--lp-mut); font-variant-numeric: tabular-nums; }
.bb-pmenu .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; margin: 0 4px; }
.bb-fpop { width: 230px; left: 50%; right: auto; transform: translateX(-50%); }
.bb-fpn { font-weight: 700; font-size: 14px; padding: 4px 10px 6px; }
.bb-find { width: 300px; right: 0; }
.bb-find-in { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 999px; background: var(--lp-inset); }
.bb-find-in svg { width: 15px; height: 15px; color: var(--lp-mut); flex: none; }
.bb-find-in input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 500 14px var(--fu); color: var(--lp-ink); }
.bb-find-res { margin-top: 6px; }
.bb-find-res .it { --fig-bg: #fff; }
.bb-find-res .it .f { display: inline-flex; width: 26px; justify-content: center; }
.bb-find-res .it .f svg { width: 24px; height: 24px; color: inherit; }

/* writing a new part */
.bb-new { display: grid; gap: 10px; margin-top: 3px; padding: 10px 12px 12px; border-radius: 12px; background: #fff; }
.bb-new-h { display: flex; align-items: center; gap: 10px; }
.bb-new-h .bb-n { width: 24px; }
.bb-new-name { flex: 1; min-width: 0; padding: 6px 0; border: 0; border-bottom: 1px solid var(--lp-line2); background: none; outline: none; font: 700 15px var(--fu); color: var(--lp-ink); }
.bb-new-name::placeholder { color: var(--lp-mut); font-weight: 500; }
.bb-new-name:focus { border-bottom-color: var(--lp-ink); }
.bb-new-r { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-left: 34px; }
.bb-new-k { width: 58px; font-size: 13px; font-weight: 600; color: var(--lp-mid); }
.bb-new-c { display: flex; flex-wrap: wrap; gap: 4px; }
.bb-ch { position: relative; min-width: 34px; height: 34px; padding: 0 11px; border-radius: 999px; background: var(--lp-inset); display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-weight: 600; font-size: 13.5px; color: var(--lp-ink); white-space: nowrap; }
.bb-ch::after { content: ""; position: absolute; left: -2px; right: -2px; top: -5px; bottom: -5px; }
.bb-ch:hover { background: var(--lp-line); }
.bb-ch[aria-pressed="true"] { background: var(--lp-ink); color: #fff; }
.bb-ch svg { width: 12px; height: 12px; flex: none; }
.bb-new-a { display: flex; align-items: center; gap: 10px; margin-left: 34px; }
.bb-new-a .btn { position: relative; min-height: 36px; }
.bb-new-a .btn::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.bb-new-a .btn.plain { margin-left: auto; }
.bb-hint { font-size: 12.5px; font-style: italic; color: var(--lp-mut); }

/* dragging a part or a song: the thinnest mark that reads */
.bb-row.bb-over-top { box-shadow: inset 0 2px 0 0 rgba(26, 20, 16, .4); }
.bb-row.bb-over-bot { box-shadow: inset 0 -2px 0 0 rgba(26, 20, 16, .4); }
.bb-row.bb-over-join { background: #fff; }
.bc.bb-over-card { background: color-mix(in srgb, var(--c) 18%, var(--ct)); }
.bb-dragging { opacity: .45; }

.bb-end { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.bb-end .r-add { margin: 0; min-height: 44px; }
.bb-end .sp { flex: 1; }
.bb-end .btn { position: relative; min-height: 36px; }
.bb-end .btn::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }

@media (max-width: 760px) {
  .bb-page { padding: 16px 16px 56px; }
  .bc-body { grid-template-columns: minmax(0, 1fr); }
  .bb-row { grid-template-columns: 22px minmax(0, 1fr) max-content 44px; grid-template-areas: "n top time more" ". song song song" ". mv mv mv"; }
  .bb-song { justify-content: flex-start; }
  .bb-song:empty { display: none; }
  .bc .bc-name { font-size: 19px; }
  .bb-cov { grid-template-columns: minmax(0, 1fr); }
  .bb-cr { display: grid; grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "n w" "t t"; border-top: 1px solid var(--lp-line); padding: 6px 0 10px; }
  .bb-cr > * { border-top: 0; min-height: 36px; }
  .bb-cn { grid-area: n; } .bb-cw { grid-area: w; } .bb-ct { grid-area: t; min-height: 10px; }
  .bb-lv { grid-template-columns: 64px minmax(0, 1fr); }
  .bb-lv-k { font-size: 11.5px; }
  .bb-new-r, .bb-new-a { margin-left: 0; }
  .bb-new-k { width: 100%; }
  .bb-mp { width: min(340px, calc(100vw - 32px)); }
  .bb-layers button { padding: 6px 10px; }
}
@media print { .bb-reach, .bb-strip, .bb-today, .bb-cov { display: none; } }
.bc-body.one { grid-template-columns: minmax(0, 1fr); }
.bb-f { width: 34px; height: 34px; }
.bb-f svg { width: 30px; height: 30px; }
.bc-foot { margin-top: 2px; }
.bc-foot .bb-door { padding: 0 9px; gap: 5px; }

/* the Body tab's moves and a combo's parts carry their figures (2026-10-15) */
.bd-det ul.bd-mvs li.bd-mv { flex-wrap: nowrap; gap: 0 8px; padding: 2px 0; min-height: 48px; }
.bd-f { --fig-bg: #fff; flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.bd-f svg { width: 40px; height: 40px; }
.bd-mv .nm { flex: 1 1 auto; line-height: 1.3; }
.bd-mv .acts { margin: 0; flex: none; gap: 0; }
.bd-mv .acts .ic-btn { position: relative; width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.bd-mv .acts .ic-btn svg { width: 15px; height: 15px; }
.me-prow .me-pf { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.me-prow .me-pf svg { width: 28px; height: 28px; }

/* the 8-count, picked at its number */
.cnt-pop { position: absolute; z-index: 45; display: flex; align-items: center; gap: 3px; padding: 4px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--lp-line2); white-space: nowrap; }
.cnt-pop button { position: relative; height: 36px; border-radius: 8px; font-weight: 700; color: var(--lp-ink); touch-action: manipulation; }
.cnt-pop button::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.cnt-pop .cn { min-width: 36px; font-family: var(--fd); font-weight: 800; font-size: 16px; color: var(--pink-deep); background: var(--lp-inset); }
.cnt-pop .cn.guess { box-shadow: inset 0 0 0 1.5px var(--lp-line2); background: #fff; }
.cnt-pop .cn.on { background: var(--lp-ink); color: #fff; }
.cnt-pop .cw { padding: 0 10px; font-size: 13px; font-weight: 600; background: var(--lp-inset); }
.cnt-pop .cw.on { background: var(--lp-ink); color: #fff; }
.cnt-pop button:hover:not(.on) { background: var(--pink-t); }
.cnt-pop button:focus-visible { outline: none; box-shadow: var(--focus); }
.me-prow { grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 2px 6px; }
.bb-lv-n { margin: 8px 0 0 94px; font-size: 12.5px; color: var(--lp-mid); }
@media (max-width: 760px) { .bb-lv-n { margin-left: 74px; } }
.cnt-pop { flex-direction: column; align-items: stretch; gap: 3px; }
.cnt-pop-r { display: flex; gap: 3px; }
.cnt-pop-r .cw { flex: 1; }
.bd-mv .nm { min-width: 0; }
.bd-mv .nm small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-row:not(.one) { align-items: start; }
.bb-row:not(.one) > .bb-n, .bb-row:not(.one) > .bb-song, .bb-row:not(.one) > .bb-time, .bb-row:not(.one) > .bb-more { min-height: 44px; display: flex; align-items: center; }
.bb-row:not(.one) > .bb-n { justify-content: center; }
.bb-row:not(.one) > .bb-top { min-height: 44px; }
@media (max-width: 760px) {
  .bb-row { grid-template-columns: 22px minmax(0, 1fr) 44px; grid-template-areas: "n top more" ". song time" ". mv mv"; }
  .bb-row:not(.one) > .bb-song, .bb-row:not(.one) > .bb-time { min-height: 40px; }
  .bb-row > .bb-song:empty { display: block; min-height: 0; }
}

/* ===============================================================
   Visual audit picks (2026-10-16, studies/visual-audit-studies.html)
   Plan: Words lead · Guide: Bigger · Move Library: Figure and name ·
   Top bar: Lighter · Plan on a phone: Class first.
   Only sizes, weights and fills change; every column, menu and undo
   works as before.
   =============================================================== */

/* ---------- Top bar: Lighter ----------
   Ink words; where you are has a 2px ink line under it, sitting on the
   bar's hairline. The pink button is the loudest thing on the page. */
.lp-bar nav { align-self: stretch; gap: 6px; }
.lp-bar nav a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 0; color: var(--lp-ink); background: none; }
.lp-bar nav a.on { background: none; color: var(--lp-ink); }
.lp-bar nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; }
.lp-bar nav a.on::after { background: var(--lp-ink); }
.lp-bar nav a:hover:not(.on)::after { background: var(--lp-line2); }
.lp-bar nav a:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
@media (max-width: 700px) {
  .lp-bar nav { gap: 2px; }
  .lp-bar nav a { padding: 0 8px; }
  .lp-bar nav a::after { left: 8px; right: 8px; }
}

/* ---------- Guide: Bigger ----------
   No column names. Per change: a small line (time, 8-counts, seconds),
   the part large, the lyric you change on, the move large with its
   figure, its pills, the cue. */
.guide { max-width: 880px; }
.g-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 20px 18px; }
.g-row > * { min-width: 0; }
.g-row .g-meta { font-size: 14px; color: var(--lp-mut); font-variant-numeric: tabular-nums; line-height: 1.3; }
.g-row .g-part { display: flex; align-items: center; gap: 8px; font-family: var(--fd); font-weight: 700; font-size: 19px; line-height: 1.2; color: var(--lp-ink); }
.g-row .g-part .pdot { width: 11px; height: 11px; }
.g-row .g-lyr { font-family: var(--fd); font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--lp-ink); }
.g-row .g-lyr.inst { font-family: var(--fu); font-weight: 500; font-style: italic; font-size: 17px; color: var(--lp-mut); }
.g-row .g-mv { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.g-row .g-mv .fig { width: 56px; height: 56px; flex: none; padding: 6px; }
.g-row .g-mv .n { font-family: var(--fd); font-weight: 800; font-size: 30px; letter-spacing: -.015em; line-height: 1.05; margin: 0; }
.g-row .combo-tag { align-self: flex-start; }
.g-row .lib-of { margin-top: 0; }
.g-row .tempo.g-tags { margin-top: 0; }
.g-row .tempo.g-tags .tg { font-size: 14px; }
.g-row .g-chs { margin-top: 2px; }
.g-row .g-cue { font-size: 17px; line-height: 1.45; color: var(--lp-mid); max-width: 62ch; margin-top: 2px; }
.g-row .g-cue:empty { display: none; }
.guide.compact .g-row .g-cue { display: none; }
.g-plan .g-pl { font-size: 17px; }
.g-tr { grid-template-columns: 56px 30px minmax(0, 1fr); gap: 12px; padding: 12px 18px; }
.g-phase, .guide .g-song { padding-left: 18px; }
@media (max-width: 700px) {
  .g-row { display: flex; padding: 16px 6px; gap: 5px; }
  .g-row > :first-child { display: block; }
  .g-row .g-part { font-size: 18px; }
  .g-row .g-lyr { font-size: 20px; }
  .g-row .g-mv .fig { width: 48px; height: 48px; }
  .g-row .g-mv .n { font-size: 26px; }
  .g-row .g-cue { font-size: 16px; }
  .g-tr { padding: 10px 6px; }
}
@media print {
  .guide { max-width: none; }
  .g-row { padding: 10px 4px; gap: 3px; }
  .g-row .g-meta { font-size: 11px; }
  .g-row .g-part { font-size: 14px; }
  .g-row .g-lyr { font-size: 15px; }
  .g-row .g-lyr.inst { font-size: 13px; }
  .g-row .g-mv .fig { width: 36px; height: 36px; padding: 4px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .g-row .g-mv .n { font-size: 20px; }
  .g-row .g-cue { font-size: 12.5px; max-width: none; }
}

/* ---------- Move Library: Figure and name ----------
   Figure, name, one short line; the cue lives on the move's page. As
   many across as the window holds; two on a phone. */
.mv-page { max-width: 1600px; }
.mv-page .mv-search { max-width: 640px; }
.mv-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mv-card { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; background: var(--lp-inset); box-shadow: none; border-radius: 14px; padding: 10px 8px 12px; }
.mv-card:hover { background: #EDEDEA; }
.mv-card:hover .fig { --fig-bg: #EDEDEA; }
.mv-card .fig { width: 100%; height: 88px; background: none; border-radius: 0; }
.mv-card .fig svg { width: 80px; height: 80px; }
.mv-card b { font-size: 15px; line-height: 1.25; margin-top: 4px; }
.mv-card small { font-size: 13px; color: var(--lp-mid); margin-top: 0; }
.mv-card { --fig-bg: var(--lp-inset); }
/* the Library panel: the same card */
.libpanel .lib-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.lib-card { padding: 10px 6px 10px; gap: 2px; border-radius: 14px; }
.lib-card .f { width: 56px; height: 56px; }
.lib-card .nm { font-size: 14px; }
.lib-card .nm small { font-size: 12.5px; color: var(--lp-mid); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }

/* ---------- a phone: the class first ----------
   One row: back, name, View, Print, ···. Date and minutes in ···. The
   tabs, then the class. The Library is a bar at the bottom. */
.cp-dm { display: none; }
.pn-sheet { display: none; }
@media (max-width: 767px) {
  .cp-head.one { position: relative; flex-wrap: wrap; align-items: center; }
  .cp-head.one .cp-title { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; }
  .cp-head.one .cp-name { flex: 1 1 auto; }
  .cp-head.one .cp-title .cp-meta, .cp-head.one .cp-props { display: none; }
  .cp-head.one .cp-title .cp-meta.cp-dm-pop { display: flex; flex-direction: column; align-items: stretch; gap: 8px; position: absolute; top: 58px; right: 16px; left: auto; width: auto; min-width: 220px; padding: 12px; z-index: 45; }
  .cp-head.one .cp-meta.cp-dm-pop input[type="date"] { min-height: 44px; background: var(--lp-inset); border-radius: 10px; padding: 0 10px; font-size: 16px; color: var(--lp-ink); }
  .cp-head.one .cp-meta.cp-dm-pop .mins { justify-content: space-between; }
  .cp-head.one .cp-tools { order: 2; align-self: center; }
  .cp-dm { display: flex; order: 3; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; font-weight: 800; font-size: 16px; letter-spacing: 1px; color: var(--lp-ink); flex: none; touch-action: manipulation; }
  .cp-dm:hover, .cp-dm[aria-expanded="true"] { background: var(--lp-inset); }
  .cp-dm:focus-visible { outline: none; box-shadow: var(--focus); }
  .cp-head.one .cp-tabs { order: 5; margin-left: 0; width: 100%; }
  .pn-sheet { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 34; align-items: center; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--lp-line2); border-radius: 18px 18px 0 0; }
  .pn-sheet::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--lp-line2); }
  .pn-sheet-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; padding-top: 6px; }
  .pn-sheet-t b { font-size: 15px; }
  .pn-sheet-t span { font-size: 13.5px; color: var(--lp-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pn-sheet .btn { min-height: 44px; margin-top: 6px; }
  .plan:not(.with-lib) > .scroll { padding-bottom: 84px; }
  /* opened, the Library is the whole panel over the page */
  .plan.with-lib:not(.ctx-on) .libpanel { top: 0; z-index: 41; }
}
@media print { .pn-sheet, .cp-dm { display: none !important; } }

/* ===============================================================
   A BLOCK: ALONG THE SONG, THE BODY, DRAG IN, LEVEL ON THE LINE (2026-10-16)
   Her picks on block-figures-studies.html. Fills and hairlines only.
   =============================================================== */
/* along the song: each move as wide as its time, figure over its name */
.bb-lane { grid-area: mv; display: flex; align-items: flex-start; gap: 3px; min-width: 0; padding: 2px 8px 8px 0; overflow-x: auto; scrollbar-width: thin; }
.bb-lane.empty { min-height: 24px; }
.bb-lt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bb-segs { display: flex; gap: 3px; min-height: 66px; }
.bb-seg, .bb-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; border-radius: 10px; background: rgba(255, 255, 255, .75); }
.bb-row .bb-seg, .bb-row .bb-cell { background: color-mix(in srgb, var(--ct) 55%, #fff); }
.bb-seg { flex-basis: 0; }
.bb-cell { flex: none; width: 72px; }
.bb-lane.plain { flex-wrap: wrap; overflow: visible; gap: 6px; }
.bb-lane.plain .bb-cell { background: none; }
.bb-seg > .lf, .bb-cell > .lf, .bb-cb > .lf { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: 4px; }
.bb-seg .lf svg, .bb-cell .lf svg { width: min(40px, calc(100% - 4px)); height: 40px; }
.bb-seg small, .bb-cell small { display: block; max-width: 100%; padding: 0 4px 6px; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--lp-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.bb-fw { display: flex; width: 100%; }
.bb-cb { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; min-height: 44px; border-radius: 10px; color: inherit; }
.bb-cb:hover { background: #fff; }
.bb-cb:focus-visible { outline: none; box-shadow: var(--focus); }
.bb-seg .bb-chg, .bb-cell .bb-chg { right: 5px; top: 5px; }
.bb-gap { flex-basis: 0; min-width: 4px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(26, 20, 16, .14); }
.bb-rc { flex: none; width: 48px; min-height: 66px; display: inline-flex; align-items: center; justify-content: center; }
.bb-gap .bb-rc { min-height: 0; width: auto; }
.bb-ring2 { display: block; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #857C73; }
.bb-ring2.on { box-shadow: inset 0 0 0 2.5px var(--lp-ink); background: #fff; }
.bb-lu { flex: none; display: flex; gap: 3px; padding-left: 6px; }
.bb-ticks { position: relative; height: 15px; font-size: 11.5px; color: var(--lp-mut); font-variant-numeric: tabular-nums; }
.bb-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.bb-ticks span:first-child { transform: none; left: 0; }
.bb-ticks span.end { left: auto; right: 0; transform: none; }
.bb-row .bb-fpop { top: calc(100% - 4px); }

/* the body on the right */
.bc-body { grid-template-columns: minmax(0, 1fr) 220px; }
.bc-body.one { grid-template-columns: minmax(0, 1fr); }
.bb-bodyw { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .74); }
.bb-bodyw svg.body { width: 100%; height: auto; max-height: 190px; }
.bb-works { font-size: 13.5px; line-height: 1.4; color: var(--lp-ink); }
.bb-works b { font-weight: 700; margin-right: 2px; }
.bb-goals { display: flex; flex-wrap: wrap; gap: 4px; }
.bb-goal { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; background: var(--lp-inset); font-weight: 600; font-size: 13px; color: var(--lp-ink); white-space: nowrap; touch-action: manipulation; }
.bb-goal::after { content: ""; position: absolute; left: -2px; right: -2px; top: -7px; bottom: -7px; }
.bb-goal i { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--lp-mut); }
.bb-goal.hit i { background: var(--teal); box-shadow: none; }
.bb-goal.today { background: var(--lp-ink); color: #fff; }
.bb-goal.today:not(.hit) i { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }
.bb-goal.add { padding: 0 9px; color: var(--lp-mid); }
.bb-goal.add svg { width: 12px; height: 12px; }
.bb-goal:hover { background: var(--lp-line); }
.bb-goal.today:hover { background: #3a322c; }
.bb-goal:focus-visible { outline: none; box-shadow: var(--focus); }
.bb-goals .pop { left: auto; right: 0; }
.bc-seeds { gap: 6px; }
.bc-seeds .bb-sd-k { margin-top: 4px; }

/* moves to use: a chip you drag, or click for "Put it in" */
.bb-chip.mv { padding: 0 2px 0 0; }
.bb-chip-b { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 2px 0 4px; border-radius: 999px; font: inherit; color: inherit; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.bb-chip-b::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.bb-chip-b:focus-visible { outline: none; box-shadow: var(--focus); }
.bb-chip.mv:hover { background: #fff; }
.bb-chip.lift { opacity: .4; }
.bb-putm { width: 250px; left: 0; right: auto; }
.bb-pn { flex: none; width: 17px; text-align: center; font-family: var(--fd); font-weight: 800; font-size: 14px; color: var(--cd, var(--lp-mid)); }
.bb-ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--lp-line2); font-weight: 600; font-size: 13.5px; color: var(--lp-ink); --fig-bg: #fff; }
.bb-ghost .f { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.bb-ghost .f svg { width: 20px; height: 20px; }
.bb-insl { position: fixed; z-index: 89; width: 3px; border-radius: 2px; background: var(--lp-ink); pointer-events: none; }
body.bb-indragging, body.bb-indragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* level on the line: dashed is read from the moves, solid is hers */
.bb-lv-l.read { stroke: var(--lp-mid); stroke-dasharray: 5 5; }
.bb-lv-k { height: 92px; }
.bb-lv-k span { display: inline-flex; align-items: center; gap: 5px; }
.bb-lv-k span:nth-child(1) { top: 4px; } .bb-lv-k span:nth-child(2) { top: 36px; } .bb-lv-k span:nth-child(3) { top: 68px; }
.bb-lv-k svg { width: 15px; height: 15px; flex: none; color: var(--lp-mid); }
.bb-lv { grid-template-columns: 104px minmax(0, 1fr); }
.bb-lv-n { margin-left: 114px; }
.bb-lvhs { position: absolute; left: 0; right: 0; top: 0; height: 92px; }
.bb-lvh { position: absolute; top: 0; height: 92px; border-radius: 8px; cursor: ns-resize; touch-action: none; }
.bb-lvh:hover, .bb-lvh[aria-expanded="true"] { background: rgba(26, 20, 16, .045); }
.bb-lvh:focus-visible { outline: none; box-shadow: var(--focus); }
.bb-lvm { position: absolute; top: 70px; width: 240px; }
.bb-lvm .it svg { width: 17px; height: 17px; }
.bb-lvm .it.on::after { display: none; }
.bb-lvm .it.on { font-weight: 700; }
body.bb-lvdragging, body.bb-lvdragging * { cursor: ns-resize !important; -webkit-user-select: none; user-select: none; }
@media (max-width: 760px) {
  .bc-body { grid-template-columns: minmax(0, 1fr); }
  .bb-bodyw { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .bb-bodyw svg.body { width: 150px; max-height: 150px; }
  .bb-bodyw .bb-works, .bb-bodyw .bb-goals { flex: 1 1 140px; }
  .bb-lv { grid-template-columns: 82px minmax(0, 1fr); }
  .bb-lv-k { font-size: 11px; }
  .bb-lv-k svg { width: 13px; height: 13px; }
  .bb-lv-n { margin-left: 92px; }
  .bb-lane { padding-right: 4px; }
}
@media print { .bb-ticks, .bb-lvhs { display: none; } }
.bb-row .bb-lane { grid-column: 2 / -1; }
.bb-row.one .bb-lane { grid-column: 1 / -1; }
.bb-seg { container-type: inline-size; min-width: 28px; }
@container (max-width: 45px) { .bb-seg small { display: none; } .bb-seg .lf, .bb-seg .bb-cb > .lf { margin-top: 6px; } }
.bb-chip.mv::after { display: none; }
.bb-putm { width: 214px; }
.bb-putm .it > .bb-pn { flex: none; }

/* waiting for a place: the heading folds the chips away (2026-10-16) */
.lib-wait .lw-hh { margin: 0 0 2px; font: inherit; }
.lib-wait .lw-h { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 0 10px 0 6px; margin: -8px 0 0 -6px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--lp-mid); text-align: left; touch-action: manipulation; }
.lib-wait .lw-h:hover { background: var(--lp-inset); color: var(--lp-ink); }
.lib-wait .lw-h:focus-visible { outline: none; box-shadow: var(--focus); }
.lib-wait .lw-h svg { width: 14px; height: 14px; flex: none; transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.lib-wait .lw-h[aria-expanded="false"] svg { transform: rotate(-90deg); }
.lib-wait .lw-h span { font-weight: 500; color: var(--lp-mut); }
@media (prefers-reduced-motion: reduce) { .lib-wait .lw-h svg { transition: none; } }

/* ===============================================================
   PRACTICE (2026-10-16): her pick on practice-studio-studies.html.
   The move on its color, the cue large on the white side with the
   words running, the transport under. The first number stays pink.
   =============================================================== */
.pr-page { display: flex; flex-direction: column; min-height: calc(100vh - var(--barH, 60px)); max-width: 1280px; margin: 0 auto; padding: 0 32px 24px; }
.pr-head { display: flex; align-items: center; gap: 14px; min-height: 68px; }
.pr-back { margin-left: -10px; min-height: 44px; color: var(--lp-mid); }
.pr-back svg { width: 16px; height: 16px; }
.pr-back:hover { color: var(--lp-ink); background: var(--lp-inset); }
.pr-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pr-title b { font-family: var(--fd); font-weight: 800; font-size: 22px; letter-spacing: -.015em; }
.pr-title span { font-size: 15px; color: var(--lp-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pr-head .sp { flex: 1; }
.pr-views button { min-height: 38px; }
.pr-stage { flex: 1; display: flex; min-height: 0; }
.pr-card { flex: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--lp-line2); background: #fff; min-height: 540px; }
.pr-now { --tint: var(--lp-inset); display: flex; flex-direction: column; gap: 12px; padding: 28px 32px 26px; background: var(--tint); transition: background-color 220ms cubic-bezier(.23, 1, .32, 1); min-width: 0; }
.pr-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--lp-mid); font-variant-numeric: tabular-nums; }
.pr-part { font-family: var(--fd); font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; }
.pr-lyr { font-family: var(--fd); font-weight: 700; font-size: 26px; line-height: 1.25; text-wrap: balance; }
.pr-lyr.inst { font-family: var(--fu); font-style: italic; font-weight: 500; font-size: 21px; color: var(--lp-mid); }
.pr-mv { display: flex; align-items: center; gap: 18px; margin-top: 4px; min-width: 0; }
.pr-fig { --fig-bg: #fff; flex: none; display: inline-flex; padding: 6px; border-radius: 18px; background: #fff; }
.pr-fig svg { width: 160px; height: 160px; }
.pr-mv b { font-family: var(--fd); font-weight: 800; font-size: 46px; line-height: 1.02; letter-spacing: -.02em; min-width: 0; overflow-wrap: anywhere; }
.pr-pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* Adjust · Modify · Amplify under the Practice cue: a small line that
   opens in place (2026-10-25) */
.pr-adj { margin-top: 10px; }
.pr-adjb { display: inline-flex; align-items: center; min-height: 44px; margin-left: -10px; padding: 0 10px; border: 0; border-radius: var(--r-pill, 999px); background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--lp-ink); cursor: pointer; }
.pr-adjb:hover { background: #fff; }
.pr-adjb:focus-visible { outline: none; box-shadow: var(--focus); }
.pr-adj.open .pr-adjb { color: var(--lp-ink); }
.pr-adjl { display: grid; gap: 6px; margin-top: 2px; font-size: 16px; line-height: 1.4; color: var(--lp-ink); }
.pr-adjl > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; }
.pr-adjl b { font-weight: 700; font-size: 13.5px; line-height: 22px; color: var(--lp-ink); }
@media (max-width: 700px) { .pr-adjl > div { grid-template-columns: 1fr; gap: 0; } }
.pr-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; font-weight: 600; font-size: 15px; }
.pr-pill.side { background: var(--blue-t); color: var(--blue-deep); }
.pr-pill.chg { background: var(--lp-ink); color: #fff; }
.pr-count { margin-top: auto; padding-top: 10px; }
.pr-eight { display: flex; gap: 6px; font-family: var(--fd); font-weight: 800; font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.pr-eight span { width: .68em; text-align: center; padding-bottom: 6px; color: color-mix(in srgb, var(--lp-ink) 24%, transparent); }
.pr-eight span.past { color: var(--lp-mid); }
.pr-eight span.on { color: var(--lp-ink); box-shadow: inset 0 -5px 0 var(--lp-ink); border-radius: 2px; }
.pr-eight span.n, .pr-eight span.n.past, .pr-eight span.n.on { color: var(--pink-deep); }
.pr-eight span.n.on { box-shadow: inset 0 -5px 0 var(--pink-deep); }
.pr-left { margin-top: 6px; font-size: 15px; color: var(--lp-mid); font-variant-numeric: tabular-nums; }
.pr-side { display: flex; flex-direction: column; gap: 20px; padding: 28px 28px 24px; min-width: 0; border-left: 1px solid var(--lp-line); }
.pr-cue { font-size: 24px; line-height: 1.4; color: var(--lp-ink); text-wrap: pretty; }
.pr-lys { position: relative; height: 196px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.pr-lys.none { display: none; }
.pr-ly { transition: transform 250ms cubic-bezier(.23, 1, .32, 1); }
.pr-ly p { margin: 0 0 6px; font-size: 16px; line-height: 1.35; color: var(--lp-mut); opacity: 0; transition: opacity 200ms ease-out, color 200ms ease-out; }
.pr-ly p.inst { font-style: italic; }
.pr-ly p.pv, .pr-ly p.nx { opacity: 1; color: var(--lp-mut); }
.pr-ly p.on { opacity: 1; color: var(--lp-ink); font-family: var(--fd); font-weight: 700; font-size: 22px; line-height: 1.25; }
.pr-next { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--lp-line); }
.pr-next h4 { font-size: 14px; font-weight: 600; color: var(--lp-mut); }
.pr-nx { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pr-nf { --fig-bg: var(--lp-inset); flex: none; display: inline-flex; border-radius: 12px; background: var(--lp-inset); padding: 2px; }
.pr-nf svg { width: 48px; height: 48px; }
.pr-nx b { display: block; font-family: var(--fd); font-weight: 800; font-size: 20px; line-height: 1.15; }
.pr-nx b em { font-style: normal; font-weight: 600; font-family: var(--fu); font-size: 15px; color: var(--lp-mid); }
.pr-nx small { display: block; margin-top: 2px; font-size: 14px; color: var(--lp-mid); }
.pr-end { font-size: 15px; color: var(--lp-mid); }
/* the list: the Guide, rolling */
.pr-list { flex: 1; position: relative; height: 560px; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0 1px var(--lp-line2); background: #fff; }
.pr-roll { position: absolute; left: 0; right: 0; top: 0; transition: transform 400ms cubic-bezier(.23, 1, .32, 1); }
.pr-row { --tint: var(--lp-inset); display: grid; grid-template-columns: 96px 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 84px; padding: 12px 24px; border-bottom: 1px solid var(--lp-line); opacity: .5; transition: opacity 200ms ease-out, background-color 220ms ease-out; }
.pr-row.on { opacity: 1; background: var(--tint); }
.pr-row.done { opacity: .35; }
.pr-rt b { display: block; font-family: var(--fd); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.pr-rt span { display: block; font-size: 14px; color: var(--lp-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-rf { --fig-bg: #fff; display: inline-flex; }
.pr-rf svg { width: 44px; height: 44px; }
.pr-rn b { display: block; font-family: var(--fd); font-weight: 800; font-size: 22px; line-height: 1.15; }
.pr-row.on .pr-rn b { font-size: 30px; }
.pr-rn b em { font-style: normal; font-family: var(--fu); font-weight: 600; font-size: 15px; color: var(--lp-mid); }
.pr-rn small { display: block; margin-top: 3px; font-size: 14.5px; color: var(--lp-mid); }
.pr-rc .pr-eight { font-size: 30px; gap: 3px; }
.pr-rc .pr-eight span { padding-bottom: 3px; }
.pr-rc .pr-eight span.on, .pr-rc .pr-eight span.n.on { box-shadow: inset 0 -3px 0 currentColor; }
/* the transport */
.pr-trans { margin-top: 14px; }
.pr-strip { display: flex; gap: 2px; height: 10px; }
.pr-strip button { position: relative; min-width: 3px; height: 10px; padding: 0; border-radius: 3px; background: var(--lp-line2); }
.pr-strip button::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.pr-strip button.done { background: color-mix(in srgb, var(--tint) 70%, var(--lp-line2)); }
.pr-strip button.now { background: var(--lp-ink); }
.pr-strip button:hover { background: var(--lp-mid); }
.pr-tp { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding-top: 14px; }
.pr-tp .sp { flex: 1; }
.pr-play { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: var(--lp-ink); touch-action: manipulation; }
.pr-play:hover { background: #FF4AA3; }
.pr-play svg { width: 24px; height: 24px; }
.pr-ib { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--lp-ink); touch-action: manipulation; }
.pr-ib:hover { background: var(--lp-inset); }
.pr-ib svg { width: 20px; height: 20px; }
.pr-ib[aria-pressed="false"] { color: var(--lp-mid); }
.pr-time { min-width: 104px; font-size: 15px; color: var(--lp-mid); font-variant-numeric: tabular-nums; }
.pr-time b { font-size: 17px; font-weight: 700; color: var(--lp-ink); }
.pr-speed button { min-height: 44px; min-width: 44px; }
.pr-song { font-size: 14px; color: var(--lp-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* the song picker and Start this song over (2026-10-16) */
.pr-strip button.gs { margin-left: 6px; }
.pr-pick { position: relative; min-width: 0; display: flex; }
.pr-pick-b { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; min-width: 0; padding: 0 10px 0 14px; border-radius: 999px; color: var(--lp-ink); }
.pr-pick-b:hover, .pr-pick-b[aria-expanded="true"] { background: var(--lp-inset); }
.pr-pick-b .pr-song { font-size: 14.5px; font-weight: 600; color: var(--lp-ink); }
.pr-pick-b svg { width: 14px; height: 14px; flex: none; color: var(--lp-mid); }
.pr-menu { top: auto; bottom: calc(100% + 8px); right: 0; width: 300px; max-height: min(420px, 60vh); overflow-y: auto; }
.pr-mh { font-size: 13px; font-weight: 600; color: var(--lp-mut); padding: 12px 10px 4px; }
.pr-mh:first-child { padding-top: 4px; }
.pr-menu .it { justify-content: space-between; min-height: 44px; }
.pr-menu .it span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-menu .it small { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.pr-menu .it.on { background: var(--lp-inset); }
.pr-menu .it em { font-weight: 500; color: var(--lp-mid); }
.pr-mnone { font-size: 14px; font-style: italic; color: var(--lp-mut); padding: 4px 10px 8px; }
.pr-over { position: relative; }
.pr-over::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); white-space: nowrap; background: var(--lp-ink); color: #fff; font-size: 13px; font-weight: 600; padding: 5px 9px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity 150ms ease-out; }
.pr-over:hover::after, .pr-over:focus-visible::after { opacity: 1; }
.pr-pick-b:focus-visible, .pr-menu .it:focus-visible { outline: none; box-shadow: var(--focus); }
@media (hover: none) { .pr-over::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .pr-over::after { transition: none; } }
.pr-play:focus-visible, .pr-ib:focus-visible, .pr-strip button:focus-visible, .pr-back:focus-visible, .pr-views button:focus-visible, .pr-speed button:focus-visible { outline: none; box-shadow: var(--focus); }
.pr-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px 0; font-size: 16px; color: var(--lp-mid); }
.cp-prac { margin-right: 6px; }
@media (max-width: 860px) {
  .pr-page { padding: 0 16px 20px; }
  .pr-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pr-now { padding: 20px 18px 18px; gap: 10px; }
  .pr-part { font-size: 24px; }
  .pr-lyr { font-size: 21px; }
  .pr-fig svg { width: 112px; height: 112px; }
  .pr-mv b { font-size: 32px; }
  .pr-eight { font-size: 44px; gap: 2px; }
  .pr-side { border-left: 0; border-top: 1px solid var(--lp-line); padding: 18px; gap: 14px; }
  .pr-cue { font-size: 19px; }
  .pr-lys { height: 140px; }
  .pr-ly p.on { font-size: 19px; }
  .pr-list { height: 460px; }
  .pr-row { grid-template-columns: 64px minmax(0, 1fr); padding: 12px 16px; }
  .pr-rf, .pr-rc { display: none; }
  .pr-row.on .pr-rc { display: block; grid-column: 2; }
  .pr-row.on .pr-rn b { font-size: 24px; }
  .pr-title span { display: none; }
  .pr-pick { flex-basis: 100%; order: 9; }
  .pr-menu { left: 0; right: auto; width: min(300px, calc(100vw - 32px)); }
  .pr-time { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .pr-now, .pr-ly, .pr-ly p, .pr-roll, .pr-row { transition: none; } }
@media print { .pr-trans { display: none; } }
.pr-back { text-decoration: none; }
.pr-list { height: auto; min-height: 460px; }
@media (max-width: 860px) {
  .pr-trans { position: sticky; bottom: 0; z-index: 5; margin: 10px -16px 0; padding: 10px 16px 12px; background: #fff; border-top: 1px solid var(--lp-line); }
  .pr-tp { padding-top: 10px; gap: 6px 8px; }
  .pr-speed button { padding: 6px 10px; font-size: 13.5px; }
}
.cp-prac { text-decoration: none; }

/* the quick bar: what comes next on the line after the move (2026-10-16) */
.qk-head { margin: 14px 0 8px; }
.qk-h { font-family: var(--fd); font-weight: 700; font-size: 18px; line-height: 1.2; margin: 0; font-variant-numeric: tabular-nums; }
.qk-after { margin: 2px 0 0; font-size: 13px; color: var(--lp-mid); }
.qk-own { display: inline-flex; align-items: center; border-radius: 999px; background: var(--lp-inset); }
.qk-own .qk { padding-right: 4px; background: none; }
.qk-x { position: relative; width: 32px; height: 32px; margin-right: 6px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--lp-mid); touch-action: manipulation; }
.qk-x::after { content: ""; position: absolute; inset: -6px -3px; }
.qk-x svg { width: 11px; height: 11px; }
.qk-x:hover { background: #fff; color: var(--lp-ink); }
.qk-x:focus-visible { outline: none; box-shadow: var(--focus); }
.medit.pn-ctx .qk-own { background: #fff; }
.qk-in { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--lp-line2); }
.qk-in input { width: 168px; border: 0; background: none; outline: none; font: 600 15px var(--fu); color: var(--lp-ink); }
.qk-in input::placeholder { color: var(--lp-mut); font-weight: 500; }
.qk-in:focus-within { box-shadow: var(--focus); }
.medit .wtm { margin-top: 10px; }
/* critique pass: names can take two lines in a move's piece; Practice text
   off the current move keeps AA (no opacity on words) */
.bb-seg small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11.5px; line-height: 1.2; padding-bottom: 5px; }
.pr-row, .pr-row.done { opacity: 1; }
.pr-ly p.pv, .pr-ly p.nx { color: var(--lp-mut); }
.pr-eight span { color: color-mix(in srgb, var(--lp-ink) 42%, transparent); }

/* ---------- Ask Claude (2026-10-16) ----------
   "it should be super easy on people": a quiet line while Claude thinks,
   then one card. No outlines in color, no shadows; fills and hairlines. */
.ask-st { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; font-size: 14px; font-style: italic; color: var(--lp-mid); margin: 10px 0 6px; min-height: 20px; }
.ask-dots { display: inline-flex; gap: 3px; margin-left: 1px; }
.ask-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .25; animation: ask-dot 1.2s ease-in-out infinite; }
.ask-dots i:nth-child(2) { animation-delay: .2s; }
.ask-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ask-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ask-dots i { animation: none; opacity: .6; } }
.ask-again { font: inherit; font-style: normal; font-weight: 600; color: var(--lp-ink); text-decoration: underline; text-underline-offset: 3px; padding: 12px 2px; margin: -12px 0; touch-action: manipulation; }
.ask-again:hover { text-decoration-thickness: 2px; }
/* It's <a library move>: one card, one tap */
.ask-it { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; margin-top: 12px; padding: 6px 14px 6px 6px; border-radius: 18px; background: var(--lp-inset); text-align: left; touch-action: manipulation; }
.ask-it:hover { background: var(--lp-line); }
.ask-it .f { width: 84px; height: 84px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; }
.ask-it-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ask-it-t small { font-size: 13px; color: var(--lp-mid); }
.ask-it-t b { font-family: var(--fd); font-weight: 700; font-size: 19px; line-height: 1.15; color: var(--lp-ink); letter-spacing: -.01em; }
.ask-it-t span { font-size: 13.5px; color: var(--lp-mid); }
.ask-go { font-size: 14px; font-weight: 700; color: var(--lp-ink); white-space: nowrap; }
.ask-aka { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; padding: 0 16px; border-radius: var(--r-pill); background: var(--lp-inset); font-size: 14px; font-weight: 600; color: var(--lp-ink); touch-action: manipulation; }
.ask-aka svg { width: 14px; height: 14px; }
.ask-aka[aria-pressed="true"] { background: var(--lp-ink); color: #fff; }
.ask-or { font-weight: 600; font-size: 14px; color: var(--lp-ink); margin: 14px 0 6px; }
/* a new move: its figure moving, its name to write over, what it works, the cue */
.ask-new { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 12px; }
.ask-fig { --fig-bg: #F5F5F3; width: 84px; height: 84px; border-radius: 14px; background: var(--lp-inset); display: flex; align-items: center; justify-content: center; }
.ask-fig:hover { box-shadow: inset 0 0 0 2px var(--lp-line2); }
.ask-b { min-width: 0; }
.ask-nm, .ask-nmr { display: block; width: 100%; font-family: var(--fd); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; color: var(--lp-ink); }
.ask-nm { border: 0; background: none; border-radius: 8px; padding: 4px 8px; margin: -4px 0 0 -8px; width: calc(100% + 8px); min-height: 36px; outline: none; }
.ask-nm:hover { background: var(--lp-inset); }
.ask-nm:focus { background: #fff; box-shadow: var(--focus); }
.ask-meta { font-size: 14px; color: var(--lp-mid); margin-top: 4px; }
.ask-cue { font-size: 14.5px; line-height: 1.45; color: var(--lp-ink); margin-top: 6px; }
.ask-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.ask-acts .btn { min-height: 44px; }
.ask-hits { margin-bottom: 4px; }
/* the Move Library's Add a move */
.page-head .ml-addb { min-height: 44px; }
.ml-add { max-width: 640px; margin: 0 0 18px; padding: 14px 18px 18px; border-radius: 18px; background: #fff; box-shadow: var(--ring); }
.ml-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ml-lab { font-family: var(--fd); font-weight: 700; font-size: 18px; }
.ml-add .x { width: 44px; height: 44px; margin-right: -10px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--lp-mid); }
.ml-add .x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.ml-add .x svg { width: 16px; height: 16px; }
.ml-tx { display: block; width: 100%; margin-top: 6px; border: 0; background: var(--lp-inset); border-radius: 12px; padding: 10px 14px; font-size: 16px; line-height: 1.5; resize: none; outline: none; }
.ml-tx:focus { box-shadow: var(--focus); }
.ml-add .fch { margin-top: 12px; }
/* in the side panel the card is narrower: a smaller figure, the same one tap */
.libpanel .ask-it, .composer .ask-it { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
.libpanel .ask-it .f, .composer .ask-it .f { width: 64px; height: 64px; }
.libpanel .ask-it-t b, .composer .ask-it-t b { font-size: 17px; }
@media (max-width: 600px) {
  .ask-it { grid-template-columns: 72px minmax(0, 1fr); padding-right: 12px; }
  .ask-it .f { width: 72px; height: 72px; }
  .ask-go { display: none; }
  .ask-new { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .ask-fig { width: 72px; height: 72px; }
}

/* ---------- Ask Claude: what goes on these lines (2026-10-16) ---------- */
.pl-ai { margin: 8px 0 4px; }
/* Claude's answer stands alone: the list of matches steps aside until she types again */
.selbar:has(.pl-claude) #sel-res { display: none; }
.pl-ask { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); background: var(--lp-inset); font-size: 14px; font-weight: 600; color: var(--lp-ink); touch-action: manipulation; }
.pl-ask:hover { background: var(--lp-line); }
.pl-ask svg { width: 14px; height: 14px; color: var(--pink-deep); }
.pl-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; transition: opacity .2s ease; }
.pl-list.quiet { opacity: .55; }
.pl-it { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 12px; background: var(--lp-inset); }
.pl-it .f { width: 44px; height: 44px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; }
.pl-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pl-t b { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--lp-ink); }
.pl-new { font-style: normal; font-weight: 600; font-size: 12px; color: var(--pink-deep); margin-left: 6px; }
.pl-ps { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pl-p { font-size: 12.5px; font-weight: 600; color: var(--lp-mid); background: #fff; border-radius: 999px; padding: 1px 8px; }
.pl-r { font-size: 12.5px; color: var(--lp-mid); }
.pl-t small { font-size: 13px; color: var(--lp-mid); line-height: 1.3; }
.pl-at { font-size: 12.5px; color: var(--lp-mut); white-space: nowrap; align-self: start; padding-top: 4px; }
.pl-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.pl-foot .btn { min-height: 44px; }
.pl-foot .btn.pink { min-width: 88px; justify-content: center; }
.pl-q { font-size: 15px; font-weight: 600; color: var(--lp-ink); margin: 6px 0 8px; line-height: 1.35; }
.pl-ch { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-c { min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); background: var(--lp-inset); font-size: 14px; font-weight: 600; color: var(--lp-ink); text-align: left; touch-action: manipulation; }
.pl-c:hover { background: var(--lp-line); }
@media (prefers-reduced-motion: reduce) { .pl-list { transition: none; } }

/* ---------- the part in the song's tile (studies/plan-part-studies.html, 2026-10-16) ----------
   Her pick, "The part in the tile", with her note "maybe it can say what the
   part is?": a song on a Blocks part shows the part's number in the tile
   and its name first on the line under the title. The tile goes to the part
   on Blocks, where its row lights for a moment. */
.slot-head .cov.pt { position: relative; font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; transition: background-color .15s; }
.slot-head .cov.pt::before { content: ""; position: absolute; inset: -6px; }
.slot-head .cov.pt:hover { background: color-mix(in srgb, var(--ct) 70%, var(--cd) 14%); }
.slot-head .cov.pt:focus-visible { box-shadow: var(--focus); outline: none; }
.slot-head .cov.pt[data-tip]::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); white-space: nowrap; background: var(--lp-ink); color: #fff; font: 600 12px/1 var(--fu); padding: 6px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.slot-head .cov.pt:hover::after, .slot-head .cov.pt:focus-visible::after { opacity: 1; }
@media (hover: none) { .slot-head .cov.pt[data-tip]::after { display: none; } }
.s-tl2 .s-pt { font-weight: 600; color: var(--lp-ink); }
.bb-row.part { transition: background-color .3s; }
.bb-row.part.bb-lit { background: #fff; background: color-mix(in srgb, var(--ct) 55%, #fff); }
@media (prefers-reduced-motion: reduce) { .slot-head .cov.pt, .slot-head .cov.pt[data-tip]::after, .bb-row.part { transition: none; } }

/* ---------- combos: the Combo pill, the new combo, Your combos (studies/combo-build-studies.html) ----------
   Her picks 2026-10-15/16: a Combo pill by Moves | Combos, an empty ring
   on each card that fills with its number, a slim bar to make it; the new
   combo named "A → B" with each part's tempo and side, reorder, rounds;
   sorting with several areas and styles; every combo card says all its
   parts. Fills and hairlines only, no shadows, no colored outlines. */
.lib-kind { align-items: center; }
.lib-kind .sp { flex: 1; }
.lib-kind .cb-tog { margin-left: auto; }
.cb-tog { position: relative; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--lp-ink); background: var(--lp-inset); border-radius: 999px; padding: 6px 12px 6px 10px; margin: 0 0 4px; min-height: 32px; touch-action: manipulation; transition: background-color .15s, color .15s; }
.cb-tog::before { content: ""; position: absolute; inset: -6px -2px; }
.cb-tog svg { width: 14px; height: 14px; }
.cb-tog:hover { background: #EDEDEA; }
.cb-tog[aria-pressed="true"] { background: var(--lp-ink); color: #fff; }
.cb-tog:focus-visible { box-shadow: var(--focus); outline: none; }
.cb-tog[data-tip]::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 6px); white-space: nowrap; background: var(--lp-ink); color: #fff; font: 600 12px/1 var(--fu); padding: 6px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 6; }
.cb-tog:hover::after, .cb-tog:focus-visible::after { opacity: 1; }
@media (hover: none) { .cb-tog[data-tip]::after { display: none; } }

/* picking: each card's ring, the order in it */
.libpanel.cb-picking .lib-fav, .libpanel.cb-picking .lib-add, .libpanel.cb-picking .lib-info,
.libpanel.cb-editing .lib-fav, .libpanel.cb-editing .lib-add, .libpanel.cb-editing .lib-info { display: none; }
.lib-card.cb-pk { cursor: pointer; transition: background-color .15s, transform .16s cubic-bezier(.23, 1, .32, 1); }
.lib-card.cb-pk:active { transform: scale(.97); }
.lib-card.cb-pk.on, .lib-card.cb-pk.on:hover { background: var(--lilac-t); }
.cb-no { position: absolute; top: 7px; left: 7px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; background: #fff; box-shadow: inset 0 0 0 1.5px #A79F97; color: transparent; transition: background-color .14s, transform .2s cubic-bezier(.23, 1, .32, 1); }
.lib-card.cb-pk.on .cb-no { background: var(--lilac-deep); color: #fff; box-shadow: none; transform: scale(1.06); }
.cb-bar { flex: none; margin: 0 -14px; padding: 10px 14px 12px; background: #fff; border-top: 1px solid var(--lp-line2); display: flex; flex-direction: column; gap: 8px; animation: cbUp .2s cubic-bezier(.23, 1, .32, 1); }
@keyframes cbUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.libpanel.cb-picking .pn-body { padding-bottom: 24px; }
.cb-seq { font-size: 14px; font-weight: 600; line-height: 1.35; min-height: 19px; overflow-wrap: anywhere; }
.cb-seq .arr { color: var(--lp-mid); font-weight: 500; }
.cb-seq em { font-weight: 500; color: var(--lp-mut); }
.cb-bar-b { display: flex; align-items: center; gap: 6px; }
.cb-bar-b .btn { min-height: 44px; justify-content: center; }
.cb-bar-b .btn.pink { flex: 1; }

/* the new combo, at the top of the panel */
.cb-ed { background: var(--lilac-t); border-radius: 14px; padding: 10px 12px 12px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; animation: cbIn .2s cubic-bezier(.23, 1, .32, 1); }
@keyframes cbIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.cbe-top { display: flex; align-items: center; gap: 8px; }
.cbe-top .combo-tag { background: #fff; }
.cbe-x { position: relative; margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lp-mid); }
.cbe-x::before { content: ""; position: absolute; inset: -6px; }
.cbe-x:hover { background: rgba(255, 255, 255, .7); color: var(--lp-ink); }
.cbe-x svg { width: 14px; height: 14px; }
.cbe-x:focus-visible { box-shadow: var(--focus); outline: none; }
.cbe-name { display: block; width: calc(100% + 16px); margin: 0 -8px; resize: none; overflow: hidden; min-height: 0; font: inherit; font-family: var(--fd); font-weight: 700; font-size: 18px; letter-spacing: -.01em; line-height: 1.2; color: var(--lp-ink); background: transparent; border: 0; border-radius: 8px; padding: 6px 8px; }
.cbe-name:hover { background: rgba(255, 255, 255, .6); }
.cbe-name:focus { outline: none; background: #fff; box-shadow: var(--focus); }
.cbe-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.cbe-parts li { display: grid; grid-template-columns: 32px 32px minmax(0, 1fr) 40px; align-items: center; gap: 4px; background: #fff; border-radius: 10px; padding: 2px 2px 2px 0; min-height: 52px; transition: transform .16s cubic-bezier(.23, 1, .32, 1); }
.cbe-parts li.lift { transform: scale(1.02); position: relative; z-index: 2; }
.cbe-grip { width: 32px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #8A8178; cursor: grab; touch-action: none; }
.cbe-grip:hover { color: var(--lp-ink); background: var(--lp-inset); }
.cbe-grip:active { cursor: grabbing; }
.cbe-grip svg { width: 14px; height: 14px; }
.cbe-grip:focus-visible, .cbe-more:focus-visible, .cbe-pill:focus-visible, .cbe-rounds button:focus-visible { box-shadow: var(--focus); outline: none; }
.cbe-f { width: 32px; height: 32px; --fig-bg: #fff; }
.cbe-f svg { width: 100%; height: 100%; display: block; }
.cbe-t { min-width: 0; padding: 4px 0; }
.cbe-t b { display: block; font-size: 14px; line-height: 1.25; overflow-wrap: break-word; }
.cbe-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cbe-pw { position: relative; display: inline-flex; }
.cbe-pill { position: relative; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; line-height: 1.4; background: var(--lp-inset); color: var(--lp-ink); touch-action: manipulation; }
.cbe-pill::before { content: ""; position: absolute; inset: -8px -2px; }
.cbe-pill:hover { background: #EDEDEA; }
.cbe-pill.pulse { background: var(--pink-t); color: var(--pink-deep); }
.cbe-pill.hold { background: var(--teal-t); color: var(--teal-deep); }
.cbe-pill.side { background: var(--blue-t); color: var(--blue-deep); }
.cbe-pill.add { background: none; color: var(--lp-mut); font-weight: 600; opacity: 0; }
.cbe-parts li:hover .cbe-pill.add, .cbe-parts li:focus-within .cbe-pill.add, .cbe-pill.add[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .cbe-pill.add { opacity: 1; } }
.cbe-more { width: 40px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--lp-mid); }
.cbe-more:hover, .cbe-more[aria-expanded="true"] { background: var(--lp-inset); color: var(--lp-ink); }
.cbe-more svg { width: 16px; height: 16px; }
.pop.cbe-pop { top: calc(100% + 4px); left: 0; right: auto; width: auto; min-width: 190px; padding: 5px; border-radius: 12px; z-index: 45; }
.cbe-pw:last-child > .pop.cbe-pop { left: auto; right: 0; }
.pop.cbe-pop .it { min-height: 40px; font-size: 14px; }
.pop.cbe-pop .it:disabled { opacity: .45; cursor: default; }
.pop.cbe-pop .it:disabled:hover { background: none; }
.pop.cbe-pop .cbe-dn svg { transform: rotate(180deg); }
.cbe-row { display: flex; align-items: center; gap: 8px; }
.cbe-rounds { display: inline-flex; align-items: center; background: #fff; border-radius: 999px; }
.cbe-rounds button { width: 44px; height: 44px; border-radius: 50%; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.cbe-rounds button:hover:not(:disabled) { background: var(--lp-inset); }
.cbe-rounds button:disabled { opacity: .35; cursor: default; }
.cbe-rounds span { font-size: 13.5px; font-weight: 700; min-width: 66px; text-align: center; font-variant-numeric: tabular-nums; }
.cbe-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cbe-foot .btn { min-height: 44px; justify-content: center; }
.cbe-foot .btn.pink { flex: 1 1 auto; }
.cbe-foot .sp { flex: 1; }
.cbe-del { color: var(--lp-mid); }

/* sorting: area chips take several; one Style pill with its list */
.lib-chips.cb-chips { align-items: center; }
.cb-chips button { min-height: 32px; position: relative; }
.cb-stw { position: relative; display: inline-flex; }
.cb-stp { display: inline-flex; align-items: center; gap: 4px; }
.cb-stp svg { width: 12px; height: 12px; }
.cb-stp.on { background: var(--lp-ink); color: #fff; }
.pop.cb-stpop { top: calc(100% + 6px); right: auto; left: 0; width: auto; min-width: 170px; padding: 5px; border-radius: 12px; }
.lib-chips .pop.cb-stpop .it { background: none; color: var(--lp-ink); border-radius: 8px; padding: 10px 12px; min-height: 40px; font-size: 14px; font-weight: 600; }
.lib-chips .pop.cb-stpop .it:hover { background: var(--lp-inset); }
.lib-chips .pop.cb-stpop .it[aria-checked="true"]::after { content: ""; margin-left: auto; width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -2px); border-radius: 0; background: none; }
.lib-chips .pop.cb-stpop .it.on { background: none; }
.lib-chips .pop.cb-stpop .it.on:hover { background: var(--lp-inset); }
.lib-chips .pop.cb-stpop .cb-any { color: var(--lp-mid); border-top: 1px solid var(--lp-line); border-radius: 0 0 8px 8px; margin-top: 4px; }

/* a combo card: figures, its own name, every part in order */
.cb-card { padding: 6px 10px 10px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; transition: background-color .15s; }
.cb-card.mine { background: var(--lilac-t); }
.cb-card.mine:hover { background: color-mix(in srgb, var(--lilac-t) 80%, var(--lilac) 20%); }
.cb-card .cb-figs, .cb-res .cb-figs { display: flex; flex-wrap: wrap; gap: 2px; min-height: 32px; align-items: center; padding-right: 40px; }
.cb-card .cb-f, .cb-res .cb-f { width: 24px; height: 24px; }
.cb-card .cb-nm, .cb-res .cb-nm { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; margin: 0; overflow-wrap: break-word; color: var(--lp-ink); }
.cb-card .cb-line, .cb-res .cb-line { grid-column: auto; font-size: 14px; color: var(--lp-mid); line-height: 1.4; margin: 0; font-weight: 500; overflow-wrap: break-word; }
.cb-card .arr, .cb-res .arr { color: var(--lp-mid); font-weight: 500; }
.cb-card .cb-nm.cb-auto, .cb-res .cb-nm.cb-auto { font-weight: 600; }
.cb-card .cb-nm em, .cb-card .cb-line em, .cb-res .cb-nm em, .cb-res .cb-line em { font-style: normal; font-weight: 700; color: var(--lp-ink); }
.cb-card .cb-r { margin-top: 2px; }
.cb-card .cb-add { position: absolute; top: 6px; right: 6px; margin: 0; width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; background: #fff; box-shadow: var(--ring); }
.cb-card .cb-add::before { content: ""; position: absolute; inset: -6px; }
.cb-card .cb-add svg { width: 13px; height: 13px; }
.cb-card .cb-add[data-tip]::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 6px); white-space: nowrap; background: var(--lp-ink); color: #fff; font: 600 12px/1 var(--fu); padding: 6px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.cb-card .cb-add:hover::after, .cb-card .cb-add:focus-visible::after { opacity: 1; }
@media (hover: none) { .cb-card .cb-add[data-tip]::after { display: none; } }
.cb-card .pop.cb-pop { align-self: stretch; }
.cb-card.lit { background: color-mix(in srgb, var(--lilac-t) 60%, var(--lilac) 40%); }
.cb-make { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; border-radius: 12px; background: none; box-shadow: inset 0 0 0 1px var(--lp-line2); font-weight: 700; font-size: 14px; color: var(--lp-ink); touch-action: manipulation; transition: background-color .15s; }
.cb-make svg { width: 14px; height: 14px; }
.cb-make:hover { background: var(--lp-inset); box-shadow: none; }
.cb-make:focus-visible { box-shadow: var(--focus); outline: none; }

/* a combo among the results while lines are highlighted */
.lib-card.cb-res { grid-column: 1 / -1; align-items: flex-start; text-align: left; gap: 2px; padding: 6px 12px 10px; }
.lib-card.cb-res .cb-figs { padding-right: 0; }
.lib-card.cb-res.mine { background: var(--lilac-t); }
.lib-card.cb-res.on, .lib-card.cb-res:hover { background: var(--pink-t); }

/* the combo's card on the Plan: read at a glance */
.mv2.cb2 .in { display: block; }
.mv2.cb2 .cb-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mv2.cb2 .cb-hd .bf { width: 34px; height: 34px; padding: 3px; border-radius: 8px; grid-row: auto; flex: none; }
.mv2.cb2 .cb-hd .combo-tag { background: #fff; margin: 0; }
.mv2.cb2 .cb-hd .cb-rd { background: #fff; color: var(--lp-ink); font-size: 11.5px; padding: 0 7px; }
.mv2.cb2 .bn { font-size: 20px; margin-bottom: 6px; }
.cb-pl { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cb-pl li { min-width: 0; }
.cb-pl .cb-pn { display: block; font-family: var(--fd); font-weight: 800; font-size: 19px; letter-spacing: -.01em; line-height: 1.15; overflow-wrap: break-word; hyphens: manual; }
.cb-pl .arr { color: var(--lp-mid); font-weight: 700; }
.cb-pl .tgs { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0 0; }
.cb-pl .tg { font-size: 11.5px; padding: 0 7px; }
.cb-pl.sub .cb-pn { font-family: var(--fu); font-weight: 700; font-size: 15px; letter-spacing: 0; line-height: 1.25; }
.pc.cues-on .cb-pl .cb-pn { font-size: 17px; }
.pc.cues-on .cb-pl.sub .cb-pn, .plan.narrow .cb-pl.sub .cb-pn { font-size: 14px; }
.plan.narrow .cb-pl .cb-pn { font-size: 17px; }
.plan.narrow .mv2.cb2 .cb-hd .bf { width: 30px; height: 30px; }
@media (prefers-reduced-motion: reduce) { .cb-bar, .cb-ed { animation: none; } .lib-card.cb-pk, .cb-no, .cbe-parts li { transition: none; } .lib-card.cb-pk:active, .lib-card.cb-pk.on .cb-no { transform: none; } }
.libpanel .lib-grid.cb-list { grid-template-columns: minmax(0, 1fr); }
.lib-kind .cb-tog { margin-bottom: 6px; }
.lib-kind .cb-tog { margin-right: 2px; }
/* a combo in Claude's answer: one card, its figures and every part */
.pl-it.pl-cb { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 10px 10px 12px; align-items: start; }
.pl-cb .pl-t { display: block; }
.pl-cb .pl-t .combo-tag { background: #fff; margin: 0 4px 0 0; }
.pl-cb .pl-new { margin-left: 0; }
.pl-cb .cb-figs { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px 0 2px; }
.pl-cb .cb-f { width: 24px; height: 24px; }
.pl-cb .cb-nm { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; overflow-wrap: break-word; }
.pl-cb .cb-nm.cb-auto { font-weight: 600; }
.pl-cb .cb-line { font-size: 14px; color: var(--lp-mid); line-height: 1.4; margin: 0; overflow-wrap: break-word; }
.pl-cb .arr { color: var(--lp-mid); font-weight: 500; }
.pl-cb small { display: block; margin-top: 3px; }
.ask-cb .ask-it-t .cb-figs { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 2px; }
.ask-cb .ask-it-t .cb-f { width: 28px; height: 28px; }
.ask-cb .cb-nm { display: block; font-weight: 700; font-size: 16px; line-height: 1.25; }
.ask-cb .cb-line { font-size: 14px; color: var(--lp-mid); line-height: 1.4; margin: 0; font-weight: 500; }
.ask-cb .arr { color: var(--lp-mid); font-weight: 500; }
.ask-it.ask-cb, .libpanel .ask-it.ask-cb, .composer .ask-it.ask-cb { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 14px; }
.ask-cb .ask-it-t .cb-figs, .ask-cb .ask-it-t .cb-line { display: flex; }
.ask-cb .ask-it-t .cb-line { display: block; }
.ask-cb .ask-it-t .cb-nm { font-family: var(--fu); font-weight: 700; font-size: 16px; letter-spacing: 0; }
.ask-cb .ask-it-t .cb-figs span { font-size: inherit; }

/* Not quite? Say what to change: under every answer from Claude (2026-10-16) */
.ask-fix { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 2px; }
.ask-fix span { font-size: 13px; font-style: italic; color: var(--lp-mid); }
.ask-fix input { width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: var(--lp-inset); padding: 10px 12px; font: inherit; font-size: 14.5px; color: var(--lp-ink); }
.ask-fix input::placeholder { color: var(--lp-mut); }
.ask-fix input:focus { outline: none; box-shadow: var(--focus); background: #fff; }
.ask-fix input:disabled { opacity: .6; }
/* combos polish after the critique: pills reach 44px, repeats said once */
.cbe-pill { padding: 5px 10px; }
.cbe-pill::before { inset: -9px -2px; }
.cb-x { color: var(--lp-mut); font-weight: 600; white-space: nowrap; }

/* ---------- what a block's time adds up to (2026-10-16, "something weird happening with warmup math") ---------- */
.bt-gap-b { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 8px; margin: -4px -4px; border-radius: 999px; color: inherit; font: inherit; position: relative; touch-action: manipulation; }
.bt-gap-b::before { content: ""; position: absolute; inset: -4px 0; }
.bt-gap-b:hover, .bt-gap-b[aria-expanded="true"] { background: var(--lp-inset); }
.bt-gap-b svg { width: 12px; height: 12px; color: var(--lp-mid); transition: transform .15s; }
.bt-gap-b[aria-expanded="true"] svg { transform: rotate(180deg); }
.bt-gap-b:focus-visible { box-shadow: var(--focus); outline: none; }
.bt-break { margin: 6px 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--lp-inset); font-size: 14px; }
.bt-break ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bt-break li { display: flex; align-items: center; gap: 10px; min-height: 36px; flex-wrap: wrap; }
.btb-k { width: 24px; height: 24px; border-radius: 7px; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; color: var(--lp-ink); flex: none; font-variant-numeric: tabular-nums; }
.btb-k svg { width: 12px; height: 12px; color: var(--lp-mid); }
.btb-n { flex: 1 1 160px; min-width: 0; color: var(--lp-ink); overflow-wrap: anywhere; }
.btb-n em { font-style: normal; color: var(--lp-mid); }
.btb-t { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lp-ink); }
.btb-acts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.btb-acts .btn { min-height: 44px; }
.btb-acts .btn svg { width: 13px; height: 13px; }
.btb-sum { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--lp-line2); color: var(--lp-mid); }
.btb-sum b { color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.pt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; margin: 10px 0; border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); font-size: 14px; color: var(--lp-mid); }
.pt-row .cov.pt-k { width: 32px; height: 32px; border-radius: 8px; background: var(--ct); color: var(--cd); display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--fd); font-weight: 800; font-size: 15px; }
.pt-row .pt-tx { flex: 1 1 180px; min-width: 0; }
.pt-row .pt-tx b { color: var(--lp-ink); font-weight: 700; }
.pt-row .btn { min-height: 44px; }
.pt-row .btn svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .bt-gap-b svg { transition: none; } }

/* draw this figure, in the figure chooser (2026-10-16) */
.fch-draw { margin: 0 0 8px; }
.fch-draw .fch-say { margin-top: 2px; }
.fch-draw textarea { width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: var(--lp-inset); padding: 10px 12px; font: inherit; font-size: 14.5px; line-height: 1.35; color: var(--lp-ink); resize: vertical; }
.fch-draw textarea::placeholder { color: var(--lp-mut); }
.fch-draw textarea:focus { outline: none; box-shadow: var(--focus); background: #fff; }
.fch-cand { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; background: var(--lp-inset); margin-top: 6px; }
.fch-cf { width: 96px; height: 96px; flex: none; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; --fig-bg: #fff; }
.fch-cf svg { width: 100%; height: 100%; }
.fch-cb { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fch-cb p { font-size: 13.5px; font-style: italic; color: var(--lp-mid); line-height: 1.35; overflow-wrap: anywhere; }
.fch-cb .btn { min-height: 44px; }

/* ---------- one song, several parts (her picks on studies/song-parts-studies.html, 2026-10-16) ----------
   Blocks: "The song, split into parts", one row with its parts as
   stretches and a thin ink handle between two. The Plan: "Part lines in
   the lyrics", a thin heading where each part starts. */
.bb-set { --fig-bg: color-mix(in srgb, #fff 74%, var(--ct)); min-width: 0; border-radius: 11px; background: rgba(255, 255, 255, .74); padding: 4px 2px 8px 10px; }
.bb-set-h { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.bb-set-h .bb-n { width: 24px; flex: none; }
.bb-set-h .bb-title { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-set-h .bb-title em { font-style: normal; font-weight: 500; color: var(--lp-mid); }
.bb-set-h .bb-more .pop { left: auto; right: 0; }
.bb-set-lane { min-width: 0; overflow-x: auto; scrollbar-width: thin; padding: 0 8px 2px 0; }
.bb-set-in { display: flex; flex-direction: column; align-items: stretch; min-width: 100%; }
.bb-sp { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 4px 14px 6px; border-radius: 10px; background: color-mix(in srgb, var(--ct) 30%, #fff); transition: background-color .3s; }
.bb-sp.bb-lit { background: color-mix(in srgb, var(--ct) 60%, #fff); }
.bb-sp-h { display: flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -6px; }
.bb-sp-h .bb-n { flex: none; min-width: 18px; }
.bb-sp .bb-name { flex: 0 1 auto; font-family: var(--fu); font-weight: 700; font-size: 15px; color: var(--lp-ink); min-width: 4ch; max-width: 100%; min-height: 36px; padding: 4px 6px; border-radius: 6px; background: none; border: 0; }
.bb-sp .bb-name:hover, .bb-sp .bb-name:focus { background: #fff; outline: none; }
.bb-sp-h .bb-more { margin-left: auto; }
.bb-sp-h .bb-more .pop { left: auto; right: 0; }
.bb-sp-t { margin-right: 4px; font-size: 13px; color: var(--lp-mid); font-variant-numeric: tabular-nums; }
.bb-sp-b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.bb-sp-b .bb-pill { background: var(--ct); }
.bb-sp:hover .bb-reach, .bb-sp:focus-within .bb-reach, .bb-sp .bb-reach.open { opacity: 1; }
.bb-sp .bb-lane { flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 0 0; overflow: visible; }
.bb-sp .bb-lt { flex: none; width: 100%; }
.bb-sp .bb-lu { flex-wrap: wrap; padding-left: 0; }
.bb-sp .bb-seg, .bb-sp .bb-cell { background: color-mix(in srgb, var(--ct) 55%, #fff); }
.bb-sp .bb-segs { min-height: 66px; }
/* the handle: a thin ink line, 44px to grab */
.bb-grip { flex: none; display: block; width: 100%; height: 20px; position: relative; cursor: ns-resize; touch-action: none; border-radius: 8px; }
.bb-grip::before { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; margin-left: -20px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--lp-ink); transition: height .12s, margin-top .12s; }
.bb-grip::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.bb-grip:hover::before, .bb-grip:focus-visible::before { height: 5px; margin-top: -2.5px; }
.bb-grip:focus-visible { outline: none; box-shadow: var(--focus); }
body.bb-gripping, body.bb-gripping * { cursor: ns-resize !important; -webkit-user-select: none; user-select: none; }
.bb-ends { max-height: 340px; overflow-y: auto; }
.bb-ends .it { align-items: baseline; }
.bb-ends .it .bb-it-t { width: 38px; color: var(--lp-ink); font-weight: 700; }
.bb-ends .it span { font-weight: 500; overflow-wrap: anywhere; }
/* a part's move not on lines yet: faint, on a dashed hairline */
.bb-seg.wait, .bb-cell.wait, .bb-row .bb-cell.wait, .bb-sp .bb-cell.wait { background: transparent; border: 1px dashed rgba(26, 20, 16, .3); }
.bb-cell.wait .lf { opacity: .5; }
/* a waiting move's x: in its top corner, shown on reach */
.bb-cell .bb-wx { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--lp-paper, #fff); color: var(--lp-mid); opacity: 0; transition: opacity .15s ease-out; cursor: pointer; }
.bb-cell .bb-wx svg { width: 14px; height: 14px; }
.bb-cell:hover .bb-wx, .bb-cell:focus-within .bb-wx { opacity: 1; }
.bb-cell .bb-wx:hover { color: var(--lp-ink); background: var(--lp-inset); }
.bb-cell .bb-wx:focus-visible { opacity: 1; outline: none; box-shadow: var(--focus); }
@media (hover: none) { .bb-cell .bb-wx { opacity: 1; } }

/* the Plan: a part's heading where it starts in the song */
.sph { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px; padding-top: 8px; }
.sph-n { width: 26px; height: 26px; border-radius: 7px; background: var(--ct); color: var(--cd); display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--fd); font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sph-name { flex: 0 1 auto; min-width: 4ch; max-width: 100%; min-height: 36px; padding: 4px 6px; border: 0; border-radius: 6px; background: none; font: 700 15px/1.2 var(--fu); color: var(--lp-ink); }
.sph-name:hover, .sph-name:focus { background: var(--lp-inset); outline: none; }
.sph-name:focus-visible { box-shadow: var(--focus); }
.sph small { font-size: 13px; color: var(--lp-mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sph-ic { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--lp-mid); flex: none; touch-action: manipulation; }
.sph-ic:hover, .sph-ic[aria-expanded="true"] { background: var(--lp-inset); }
.sph-ic svg { width: 16px; height: 16px; }
.sph-ic:focus-visible { outline: none; box-shadow: var(--focus); }
.sph-more .pop { left: 0; right: auto; width: 260px; }
.sph-rule { display: block; align-self: start; height: 0; border-top: 1px solid var(--lp-line2); margin-top: 6px; pointer-events: none; }
@media (max-width: 700px) {
  .sph-rule { display: none; }
  .sph { border-top: 1px solid var(--lp-line2); margin-top: 10px; }
  .sph-more .pop { left: auto; right: 0; }
}
.give-pop { left: auto; right: 0; width: 300px; max-width: calc(100vw - 32px); }
.give-pop .it span small { font-variant-numeric: tabular-nums; }
/* a song with no lyrics: one small line under its bar */
.nolyr { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; margin: 6px 0 0; font-size: 13.5px; color: var(--lp-mut); }
.nolyr .link { min-height: 44px; padding: 0 2px; font-size: 13.5px; font-weight: 600; color: var(--lp-mid); text-decoration: underline; text-underline-offset: 3px; }
/* Guide and Practice: where a part starts in a song */
.guide .g-sp b { font-family: var(--fd); font-weight: 800; }
.pr-ph { padding: 16px 24px 6px; font-family: var(--fd); font-weight: 800; font-size: 15px; color: var(--lp-ink); }
@media (prefers-reduced-motion: reduce) { .bb-sp, .bb-grip::before { transition: none; } }
/* "to spare" is longer than "short": on a phone the time's words wrap, never under the clear button */
@media (max-width: 700px) { .sec-head .btime.on { flex-wrap: wrap; } .sec-head .btime.on .bt-gap-b { min-width: 0; } }
@media (max-width: 700px) { .bc-h .btime.on { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; } }

/* ---------- This move, then Next (2026-10-16, studies/picked-move-studies.html) ----------
   The picked move's panel: this move on top (moving figure, tempo, side,
   Swap it, Details, ···), a hairline, then Next. No shadows; hairlines and
   fills only. */
.libpanel .pn-ctx.medit .dp-h.me-h { align-items: center; gap: 12px; margin-bottom: 10px; }
.libpanel .pn-ctx.medit .dp-h .me-f { width: 64px; height: 64px; padding: 4px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; }
.libpanel .pn-ctx.medit .dp-h .me-f svg { width: 56px; height: 56px; }
.libpanel .pn-ctx.medit .me-h .dp-t b { font-size: 20px; }
.libpanel .pn-ctx.medit .me-h .dp-t small { font-size: 13.5px; color: var(--lp-mid); }
.me-this { display: flex; flex-direction: column; }
.me-l { font-size: 12.5px; font-weight: 600; color: var(--lp-mid); margin: 10px 0 4px; }
.me-this .me-l:first-child { margin-top: 2px; }
.pn-ctx .me-this .dp-tempo, .pn-ctx .me-this .dp-side { margin-top: 0; }
.me-quiet { display: flex; align-items: center; gap: 2px; margin: 10px -8px 0; }
.me-q { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--lp-ink); touch-action: manipulation; }
.me-q svg { width: 15px; height: 15px; color: var(--lp-mid); }
.me-q.ic { width: 44px; justify-content: center; padding: 0; margin-left: auto; }
.me-q.ic svg { width: 18px; height: 18px; }
.me-q:hover, .me-q[aria-expanded="true"] { background: rgba(255, 255, 255, .6); }
.me-q:focus-visible { box-shadow: var(--focus); outline: none; }
.me-mw { position: relative; margin-left: auto; display: inline-flex; }
.me-pop { width: 250px; }
.me-pop .hr { height: 1px; background: var(--lp-line); margin: 6px 4px; }
.me-pop .it { min-height: 44px; }
.me-next { margin: 12px -14px -14px; padding: 12px 14px 14px; border-top: 1px solid rgba(26, 20, 16, .1); }
.me-next .qk-head { margin-top: 0; }
/* naming a change in one tap: the move's ways, each with the figure it gets */
.me-ways { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.me-way { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 6px; border-radius: 999px; background: #fff; font-weight: 600; font-size: 14.5px; color: var(--lp-ink); touch-action: manipulation; }
.me-way .f { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; --fig-bg: #fff; }
.me-way .f svg { width: 26px; height: 26px; }
.me-way:hover { background: rgba(255, 255, 255, .6); }
.me-way:focus-visible { box-shadow: var(--focus); outline: none; }
.me-wr { display: block; margin: 0 0 4px; }
.me-wr input { width: 100%; min-height: 44px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .6); padding: 0 16px; font: inherit; font-size: 15px; color: var(--lp-ink); outline: none; }
.me-wr input::placeholder { color: var(--lp-mid); font-style: italic; }
.me-wr input:focus { background: #fff; box-shadow: var(--focus); }
/* an unnamed change, in place: "Name this change", italic */
.ch-ph { font-style: italic; font-weight: 500; color: var(--lp-mid); }
.mv2 .bn .ch-ph { font-family: var(--fu); font-size: .85em; }
/* a change's card: its own figure, a touch bigger so it can move */
.mv2.sgx .in { grid-template-columns: 38px minmax(0, 1fr); }
.mv2.sgx .bf.sm { width: 38px; height: 38px; padding: 4px; display: flex; align-items: center; justify-content: center; --fig-bg: #fff; }
.mv2.sgx .bf.sm svg { width: 30px; height: 30px; }
.plan.narrow .mv2.sgx .in { grid-template-columns: 32px minmax(0, 1fr); }
.plan.narrow .mv2.sgx .bf.sm { width: 32px; height: 32px; padding: 3px; }
.plan.narrow .mv2.sgx .bf.sm svg { width: 26px; height: 26px; }
/* where else a change shows: the Guide, the Sketch line, the change rows */
.g-ch .g-chf { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.g-ch .g-chf svg { width: 30px; height: 30px; }
.fm-chs > span { display: inline-flex; align-items: center; gap: 4px; }
.fm-chs .f { width: 20px; height: 20px; display: inline-flex; flex: none; }
.fm-chs .f svg { width: 20px; height: 20px; }
/* the change's figure shows where the row has room (the Sketch page); the
   narrow Details panel keeps its words wide */
.chg-f { display: none; }
.sk2 .chg-f { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.chg-f svg { width: 26px; height: 26px; }
.g-ch { grid-template-columns: 42px 34px minmax(0, 1fr); align-items: center; }
.medit .me-this .dp-chips.sm button, .medit .me-this .dp-side button { min-height: 44px; }

/* ---------- the Library's search: Ask Claude when nothing matches (2026-10-16) ---------- */
.lib-ask { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--lp-inset); font-weight: 600; font-size: 14.5px; color: var(--lp-ink); text-align: left; touch-action: manipulation; }
.lib-ask svg { width: 16px; height: 16px; flex: none; color: var(--pink-deep); }
.lib-ask:hover { background: var(--lp-line); }
/* nothing found: Ask Claude stands out in the pink tint, with room above it
   (her words, 2026-10-28: "It shouldn't kiss things ... if it's not found
   maybe we can make it a different color so it stands out more") */
.lib-ask:not(.cp-note) { margin-top: 16px; background: var(--pink-t); }
.lib-ask:not(.cp-note):hover { background: color-mix(in srgb, var(--pink-t) 80%, var(--pink) 20%); }
.lib-ask:focus-visible { box-shadow: var(--focus); outline: none; }
.lib-asked { grid-column: 1 / -1; min-width: 0; }
.mv-ask { margin-top: 16px; max-width: 420px; }
/* Something wrong? Tell Claude, on a move's page in Edit (2026-10-16) */
.mp-ask { margin: 0 0 14px; }
.mp-ask .mp-askf { margin-top: 0; }
.mp-diff { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--lp-line); }
.mp-diff li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; align-items: center; gap: 8px; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--lp-line); }
.mp-dk { font-size: 13px; font-weight: 600; color: var(--lp-mut); }
.mp-dv { font-size: 14.5px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.mp-dv b { font-weight: 700; }
.mp-dv small { display: block; font-size: 13px; color: var(--lp-mid); }
.mp-dfig { --fig-bg: var(--lp-inset); display: inline-flex; vertical-align: middle; margin-right: 8px; border-radius: 10px; background: var(--lp-inset); }
.mp-dfig svg { width: 44px; height: 44px; }
.mp-diff .mp-rm { width: 44px; height: 44px; margin: 0; }
.mp-ask-use { width: 100%; justify-content: center; min-height: 44px; margin-top: 12px; }
/* along the song, or wrapped; never sideways (2026-10-16, her words:
   "this looks off and i want to be able to see all moves") */
.bb-lane { flex-direction: column; align-items: stretch; gap: 6px; overflow: visible; }
.bb-lane.plain { flex-direction: row; }
.bb-lane .bb-lt { flex: none; width: 100%; }
.bb-lane .bb-lu { flex-wrap: wrap; align-items: flex-start; gap: 3px; padding-left: 0; }
.bb-wl { flex: 1 0 100%; font-size: 12px; font-weight: 600; color: var(--lp-mut); margin: 2px 0 1px; }
.bb-lu .bb-cell { width: 84px; }
.bb-lu .bb-cell small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11.5px; line-height: 1.2; padding-bottom: 5px; }
.bb-gap { box-shadow: none; border-radius: 0; background: linear-gradient(var(--lp-line2), var(--lp-line2)) center / 100% 1px no-repeat; }
/* the start time under a move in a wrapped lane (not the strip, which is div.bb-st) */
em.bb-st { display: none; font-style: normal; font-size: 11px; line-height: 1.2; color: var(--lp-mut); font-variant-numeric: tabular-nums; padding: 0 4px 6px; margin-top: -2px; text-align: center; }
.bb-lane.wrap .bb-segs { flex-wrap: wrap; }
.bb-lane.wrap .bb-seg { flex: 0 0 96px !important; }
.bb-lane.wrap .bb-gap, .bb-lane.wrap .bb-ticks { display: none; }
.bb-lane.wrap em.bb-st { display: block; }
.bb-ticks span[hidden] { display: none; }
.bb-lu .bb-cell, .bb-lane.wrap .bb-seg { width: 88px; }
.bb-lane.wrap .bb-seg { flex: 0 0 88px !important; }
.bb-seg small, .bb-lu .bb-cell small { padding-bottom: 0; margin-bottom: 6px; max-height: 2.4em; }
/* a part that repeats another: its waiting moves, and Place like A (2026-10-16) */
.bb-wl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.bb-wl small { font-size: 12px; font-weight: 600; color: var(--lp-mut); }
.like-go { min-height: 36px; gap: 6px; }
.like-go svg { width: 15px; height: 15px; }
.like-bar { margin: 4px 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--lp-inset); }
.like-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 36px; }
.like-n { font-size: 13.5px; font-weight: 600; color: var(--lp-mid); }
.like-n b { color: var(--lp-ink); }
.like-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.like-chips .wchip { background: #fff; }
.like-chips .wchip:hover { background: var(--lp-line); }
.like-go:focus-visible, .like-chips .wchip:focus-visible { outline: none; box-shadow: var(--focus); }
.like-bar .like-go { background: #fff; }

/* ---------- Ask Claude: blocks without a song, and the Sketch (2026-10-17) ----------
   Fills and hairlines, no shadows, no colored outlines; the spark is the
   only pink, and the one pink button is the answer's Add. */
.addmove.bq-b { font-weight: 600; color: var(--lp-mid); }
.addmove.bq-b svg, .bq-tidy-b svg, .bq-ask svg { color: var(--pink-deep); }
.bq-in { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--lp-inset); }
.bq-in svg { width: 15px; height: 15px; flex: none; color: var(--pink-deep); }
.bq-in input { flex: 1; min-width: 0; min-height: 44px; border: 0; outline: none; background: none; font: inherit; font-size: 15px; color: var(--lp-ink); }
.bq-in input::placeholder { color: var(--lp-mut); }
.bq-in:focus-within { box-shadow: var(--focus); }
.bq-fm { margin-top: 12px; max-width: 640px; }
.bq-top { display: flex; align-items: center; gap: 4px; }
.bq-top .bq-in { flex: 1; min-width: 0; }
.bq-x { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--lp-mid); }
.bq-x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.bq-x svg { width: 15px; height: 15px; }
.bq-spot { margin-top: 4px; }
.bq-spot .pl-it, .bq-fm .pl-it { background: var(--lp-inset); }
.bq-note { margin: 4px 0 8px; max-width: 620px; }
/* a written line's way in: on reach, like the line's other tools */
.bq-ask { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; white-space: nowrap; }
.bq-ask svg { width: 13px; height: 13px; }
.fm-note .bq-ask { font-size: 12.5px; font-weight: 600; color: var(--lp-mut); padding: 3px 8px; border-radius: 999px; opacity: 0; transition: opacity .15s ease; }
.fm-note .bq-ask:hover { background: var(--lp-inset); color: var(--lp-ink); }
.fm-note:hover .bq-ask, .fm-note:focus-within .bq-ask { opacity: 1; }
@media (hover: none) { .fm-note .bq-ask { opacity: 1; } }
@media (pointer: coarse) { .bq-ask { min-height: 44px; } }
/* Tidy with Claude: the page's written lines, read into moves */
.sk-copy.bq-tidy { background: #fff; box-shadow: var(--ring); border-radius: 18px; padding: 14px 18px 18px; margin-bottom: 20px; }
.bq-th h3 { font-family: var(--fd); font-weight: 700; font-size: 19px; }
.bq-th { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bq-th .bq-x { margin-right: -10px; }
.bq-reads { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.bq-said { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font-size: 14px; color: var(--lp-mid); margin-bottom: 6px; }
.bq-said .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; align-self: center; }
.bq-bn { font-weight: 600; color: var(--lp-ink); }
.bq-said q { font-style: italic; }
.bq-rl { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: start; }
.bq-tg { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: var(--ring); color: transparent; }
.bq-tg svg { width: 16px; height: 16px; }
.bq-tg[aria-pressed="true"] { background: var(--lp-ink); color: #fff; box-shadow: none; }
.bq-stays { font-size: 13.5px; font-style: italic; color: var(--lp-mut); }
.bq-read.keep .bq-said { margin-bottom: 0; }
@media print { .bq, .bq-ask, .bq-b, .bq-tidy-b, .bq-tidy { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .fm-note .bq-ask { transition: none; } }
.sk-bar .bq-tidy-b { min-height: 44px; margin: -6px 0; }

/* ---------- moving moves on Blocks (2026-10-17, her picks on block-moves-studies.html) ----------
   A spot is "+ Pick", a soft square you click; Not on the song yet with
   one small white pill; picked figures go ink; the bar sits at the bottom.
   Hairlines and fills only, no shadows, no colored outlines. */
.bb-rc.menu-wrap { position: relative; width: auto; min-height: 0; display: inline-flex; }
.bb-spot { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 84px; min-height: 66px; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--lp-line2); font: 600 13px var(--fu); color: var(--lp-mid); }
.bb-lane.plain .bb-spot, .bb-lu .bb-spot { width: 88px; }
.bb-spot:hover, .bb-spot[aria-expanded="true"] { background: var(--lp-paper); color: var(--lp-ink); }
.bb-spot:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--lp-line2), var(--focus); }
.bb-spot.on { background: var(--lp-paper); color: var(--lp-ink); box-shadow: none; }
.bb-sp-pl { display: inline-flex; }
.bb-sp-pl svg { width: 16px; height: 16px; }
.bb-spick { left: 0; right: auto; width: 296px; top: calc(100% + 6px); display: flex; flex-direction: column; gap: 6px; --fig-bg: var(--lp-paper); }
.bb-spick .bb-fpn { padding: 2px 10px 0; font-size: 13px; color: var(--lp-mut); font-weight: 600; }
.bb-spick .it { min-height: 44px; padding: 6px 10px; }
.bb-spick .it .f { display: inline-flex; width: 28px; justify-content: center; flex: none; }
.bb-spick .it .f svg { width: 26px; height: 26px; color: inherit; }
.bb-spw { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; }
.bb-spot-res:empty { display: none; }
.bb-spick .bq-spot { margin: 2px 0 0; }
/* the right edge of a narrow row: the picker opens leftward */
.bb-lu > .bb-rc:last-child .bb-spick, .bb-lane.plain > .bb-rc:last-child .bb-spick { left: auto; right: 0; }

.bb-wla { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; max-width: 100%; }
.bb-puton { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--lp-paper); color: var(--lp-ink); font: 600 13.5px var(--fu); white-space: nowrap; }
.bb-puton::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.bb-puton:hover { background: var(--lp-inset); }
.bb-sp .bb-puton, .bb-lane .bb-puton { max-width: 100%; }
.bb-sp .bb-puton { white-space: normal; height: auto; min-height: 32px; padding: 6px 12px; line-height: 1.25; text-align: left; }
.bb-puton:focus-visible { outline: none; box-shadow: var(--focus); }
.bb-wl { min-height: 44px; justify-content: flex-start; gap: 4px 12px; }
.bb-wl small { font-size: 13px; color: var(--lp-mid); }
.bb-mvm .it.here { cursor: default; color: var(--lp-mut); }
.bb-mvm .it.here:hover { background: none; }
.bb-mvm .it.here small { margin-left: auto; }

/* picked: an ink fill, the words white; the figure keeps its pale disc */
.bb-seg.picked, .bb-cell.picked, .bb-row .bb-seg.picked, .bb-row .bb-cell.picked, .bb-sp .bb-seg.picked, .bb-sp .bb-cell.picked { background: var(--lp-ink); border-color: var(--lp-ink); }
.bb-seg.picked small, .bb-cell.picked small, .bb-seg.picked .bb-st, .bb-cell.picked .bb-st { color: var(--lp-paper); }
.bb-seg.picked .bb-cb:hover, .bb-cell.picked .bb-cb:hover { background: none; }
.bb-seg.picked .lf, .bb-cell.picked .lf { opacity: 1; }
.bb-seg .bb-cb, .bb-cell .bb-cb { cursor: pointer; }
.bb-seg.lift, .bb-cell.lift { opacity: .35; }
.bb-row.bb-over-in, .bb-sp.bb-over-in, .bc-body.bb-over-in { background: var(--lp-paper); }

/* the bar: N picked · Move to … · Cancel, or the one question */
.bb-pbar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 61; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: calc(100vw - 32px); padding: 6px 6px 6px 18px; border-radius: 18px; background: var(--lp-ink); color: var(--lp-paper); font-size: 14.5px; font-weight: 600; }
.bb-pbar.ask { max-width: min(640px, calc(100vw - 32px)); }
.bb-pq { flex: 1 1 220px; min-width: 0; line-height: 1.35; padding: 6px 0; font-weight: 500; }
.bb-pbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bb-pb { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: var(--lp-paper); font: 600 14px var(--fu); white-space: nowrap; }
.bb-pb:hover { background: rgba(255, 255, 255, .24); }
.bb-pb.main { background: var(--lp-paper); color: var(--lp-ink); }
.bb-pb.main:hover { background: var(--lp-inset); }
.bb-pb svg { width: 16px; height: 16px; }
.bb-pb:focus-visible { outline: none; box-shadow: var(--focus); }
.bb-pbar .menu-wrap { position: relative; }
.bb-mvm { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; width: 280px; max-height: min(60vh, 440px); overflow-y: auto; color: var(--lp-ink); }
.bb-mvm .bb-fpn { display: flex; align-items: center; gap: 8px; padding: 10px 10px 4px; font-size: 13px; color: var(--lp-mut); font-weight: 600; }
.bb-mvm .bb-fpn:first-child { padding-top: 4px; }
.bb-mvm .bb-fpn .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.bb-mvm .it { min-height: 44px; }
.bb-mvm .it > .bb-pn { flex: none; }
body:has(.bb-pbar) .toast { bottom: 96px; }
body:has(.bb-pbar) .bb-page { padding-bottom: 120px; }
@media (max-width: 600px) {
  .bb-pbar { left: 16px; right: 16px; transform: none; bottom: 12px; max-width: none; padding-left: 14px; }
  .bb-pbs { flex: 1 1 auto; }
  .bb-pb { padding: 0 13px; }
  .bb-mvm { position: fixed; left: 16px; right: 16px; bottom: 84px; width: auto; }
  .bb-spick { width: min(296px, calc(100vw - 48px)); }
  body:has(.bb-pbar) .toast { bottom: 150px; }
}
.bb-spick .bb-find-in { min-height: 44px; }
.bb-spick .bb-find-in input { align-self: stretch; min-height: 44px; }

/* ---------------------------------------------------------------
   THE MOVE LIBRARY (her picks on studies/library-studies.html, 2026-10-17):
   a rail of ticks and a figure grid; combos read down as a numbered list;
   a move opens in a drawer (a bottom sheet on a phone). Hairlines and
   fills, no shadows; the filter colors are the figures' working limbs.
   --------------------------------------------------------------- */
.mlc-coral { --a: var(--coral-deep); --at: var(--coral-t); --c: var(--coral-deep); }
.mlc-pink { --a: var(--pink-deep); --at: var(--pink-t); --c: var(--pink-deep); }
.mlc-purple { --a: var(--purple-deep); --at: var(--purple-t); --c: var(--purple-deep); }
.mlc-teal { --a: var(--teal-deep); --at: var(--teal-t); --c: var(--teal-deep); }
.mlc-ink { --a: var(--lp-ink); --at: #EDEDEA; --c: var(--lp-ink); }
.mlc-marigold { --a: var(--marigold-deep); --at: var(--marigold-t); --c: var(--marigold-deep); }
.mlc-blue { --a: var(--blue-deep); --at: var(--blue-t); --c: var(--blue-deep); }

.page.ml { max-width: 1280px; padding-top: 30px; }
.ml-head { margin-bottom: 0; }
.ml-head h1 { font-size: 34px; line-height: 1; }
.ml-head .seg button { min-height: 44px; }
.ml-head .btn { min-height: 44px; }
.ml .ml-add { margin-top: 18px; }
.ml-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 36px; margin-top: 26px; }
.ml-main { min-width: 0; }

/* the rail: ticks that stack, a count on each, Clear beside them */
.ml-rail { position: sticky; top: 86px; align-self: start; display: flex; flex-direction: column; }
.ml-rh { display: flex; align-items: center; justify-content: space-between; height: 44px; margin-top: 12px; font: 600 13px var(--fu); color: var(--lp-mut); }
.ml-rh:first-child { margin-top: 0; }
.ml-clr { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px; margin-right: -10px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--lp-mid); touch-action: manipulation; }
.ml-clr svg { width: 13px; height: 13px; }
.ml-clr:hover { color: var(--lp-ink); background: var(--lp-inset); }
.ml-rr { display: flex; align-items: center; gap: 11px; width: calc(100% + 20px); min-height: 44px; padding: 0 10px; margin: 0 -10px; border-radius: 10px; font-weight: 500; font-size: 15px; color: var(--lp-ink); text-align: left; touch-action: manipulation; }
.ml-rr:hover { background: var(--lp-inset); }
/* the areas of the arms, under Arms */
.ml-sub { padding-left: 31px; }
.ml-rr .sw { width: 20px; height: 20px; border-radius: 6px; background: var(--at, #EDEDEA); display: flex; align-items: center; justify-content: center; flex: none; transition: background-color .15s ease-out; }
.ml-rr .sw svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s ease-out, transform .15s ease-out; }
.ml-rr .w { flex: 1; min-width: 0; }
.ml-rr[aria-pressed="true"] { font-weight: 700; }
.ml-rr[aria-pressed="true"] .sw { background: var(--a, var(--lp-ink)); }
.ml-rr[aria-pressed="true"] .sw svg { opacity: 1; transform: none; }
.ml-rr .ct { font-size: 13px; color: var(--lp-mut); font-weight: 500; font-variant-numeric: tabular-nums; }
.ml-sep { height: 1px; background: var(--lp-line); margin: 8px 0; }
.ml-rr:focus-visible, .ml-clr:focus-visible, .ml-fb:focus-visible, .ml-ch:focus-visible, .ml-ib:focus-visible { outline: none; box-shadow: var(--focus); }

/* search, then (on a phone) Filters and the chips */
.ml .ml-q { margin-bottom: 0; height: 46px; padding: 0 18px; max-width: none; width: 100%; }
.ml-q input { font-size: 15px; }
.ml-q input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.ml-q input:focus-visible { box-shadow: none; }
.ml-qx { width: 44px; height: 44px; margin-right: -14px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--lp-mid); }
.ml-qx svg { width: 15px; height: 15px; }
.ml-qx:hover { color: var(--lp-ink); background: var(--lp-line); }
.ml-q:focus-within { background: #fff; box-shadow: var(--focus); }
.ml-chips { display: none; }
.ml-res { margin-top: 4px; }
.ml-sh { display: flex; align-items: baseline; gap: 10px; font-family: var(--fd); font-weight: 700; font-size: 18px; letter-spacing: -.01em; margin: 30px 0 14px; }
.ml-sh small { font-family: var(--fu); font-weight: 500; font-size: 14px; color: var(--lp-mut); }
.ml-res > .mv-ask { margin: 22px 0 -6px; }
.ml-more { margin-top: 22px; min-height: 44px; }
.ml-empty { padding: 56px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ml-empty p { font-size: 16px; color: var(--lp-mid); }
.ml-empty .btn { min-height: 44px; }
.ml-empty .lib-ask { width: auto; }

/* a move card: the figure on a soft tile, the name on white below */
.ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 22px 16px; }
.mc { display: flex; flex-direction: column; align-items: stretch; text-align: left; border-radius: 14px; min-width: 0; color: var(--lp-ink); touch-action: manipulation; }
.mc-fig { --fig-bg: var(--lp-inset); display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--lp-inset); border-radius: 14px; transition: background-color .18s ease-out; }
.mc-fig svg { width: 104px; height: 104px; max-width: 80%; max-height: 90%; }
.mc:hover .mc-fig { --fig-bg: #EFEFEC; background: #EFEFEC; }
.mc.mine .mc-fig { --fig-bg: var(--lilac-t); background: var(--lilac-t); }
.mc.mine:hover .mc-fig { --fig-bg: color-mix(in srgb, var(--lilac-t) 80%, var(--lilac) 20%); background: color-mix(in srgb, var(--lilac-t) 80%, var(--lilac) 20%); }
.mc-n { font-weight: 600; font-size: 15px; line-height: 1.3; margin-top: 10px; overflow-wrap: break-word; }
.mc-m { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--lp-mut); margin-top: 3px; line-height: 1.35; }
.mc-m .dot { width: 8px; height: 8px; }
.mc-m em { font-style: normal; font-weight: 700; color: var(--lp-ink); }
.mc:focus-visible { outline: none; box-shadow: var(--focus); }

/* combos, read down: number, figure, the move, how many on the right */
.ml-cbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ml-cb { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--lp-line); padding: 16px 16px 10px; display: flex; flex-direction: column; min-width: 0; }
.ml-cb.mine { background: var(--lilac-t); box-shadow: none; }
.ml-cb-h { display: flex; align-items: baseline; gap: 8px; }
.ml-cb-h h3 { font-family: var(--fd); font-weight: 700; font-size: 18px; letter-spacing: -.01em; line-height: 1.2; min-width: 0; overflow-wrap: break-word; }
.ml-cb-h .rd { margin-left: auto; font-size: 12.5px; font-weight: 600; background: var(--lp-inset); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.ml-cb.mine .ml-cb-h .rd { background: #fff; }
.ml-cb-m { font-size: 13px; color: var(--lp-mut); margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.ml-cb-m .dot { width: 8px; height: 8px; }
.ml-cb .cb-also { font-size: 13px; color: var(--lp-mut); margin: 2px 0 4px; }
.cb-num { list-style: none; margin: 10px 0 0; padding: 0; }
.cb-num li + li { border-top: 1px solid var(--lp-line); }
.ml-cb.mine .cb-num li + li, .cb-card.mine .cb-num li + li { border-top-color: rgba(26, 20, 16, .08); }
.cb-num .pr { display: grid; grid-template-columns: 16px 44px minmax(0, 1fr) minmax(0, max-content); align-items: center; gap: 10px; width: 100%; min-height: 50px; text-align: left; padding: 6px 0; border-radius: 8px; color: var(--lp-ink); }
button.pr:hover .pn { text-decoration: underline; text-decoration-color: var(--lp-line2); text-underline-offset: 3px; }
button.pr:focus-visible { outline: none; box-shadow: var(--focus); }
.cb-num .nu { font-weight: 600; font-size: 13px; color: var(--lp-mut); font-variant-numeric: tabular-nums; text-align: right; }
.cb-num .pf { display: flex; align-items: center; justify-content: center; width: 44px; height: 36px; }
.cb-num .pf svg { width: 40px; height: 40px; }
.cb-num .pn { font-weight: 600; font-size: 14.5px; line-height: 1.25; min-width: 0; overflow-wrap: break-word; }
.cb-num .pn em { font-style: normal; font-weight: 800; }
.cb-num .pn small { display: block; font-weight: 500; font-size: 12.5px; color: var(--lp-mut); margin-top: 1px; }
.cb-num .pc { font-size: 13.5px; line-height: 1.3; color: var(--lp-mid); text-align: right; max-width: 130px; font-variant-numeric: tabular-nums; }
/* the same list, small, in a class's Library panel (the card is the button) */
.cb-card .cb-hd { display: flex; align-items: center; gap: 8px; min-height: 32px; padding-right: 40px; width: 100%; }
.cb-card .cb-hd .cb-nm { flex: 0 1 auto; }
.cb-card .cb-hd .cb-r { margin: 0 0 0 auto; }
.cb-card .cb-num { margin: 2px 0 0; width: 100%; }
.cb-card .cb-num li + li { border-top-color: rgba(26, 20, 16, .07); }
.cb-card .cb-num .pr { grid-template-columns: 12px 30px minmax(0, 1fr) minmax(0, max-content); gap: 8px; min-height: 36px; padding: 3px 0; }
.cb-card .cb-num .pf { width: 30px; height: 28px; }
.cb-card .cb-num .pf svg { width: 28px; height: 28px; }
.cb-card .cb-num .pn { font-size: 13.5px; }
.cb-card .cb-num .pn small { font-size: 12px; }
.cb-card .cb-num .pc { font-size: 12.5px; max-width: 72px; }

/* the move drawer: over the right, the page a little dimmer behind it */
html.dz-lock { overflow: hidden; }
.dz { position: fixed; inset: 0; z-index: 55; }
.dz-scrim { position: absolute; inset: 0; background: rgba(26, 20, 16, .10); }
.dz-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(540px, 100vw); background: #fff; box-shadow: -1px 0 0 var(--lp-line2); display: flex; flex-direction: column; }
.dz-grab { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .dz-in .dz-scrim { animation: dzf .2s ease-out; }
  .dz-in .dz-panel { animation: dzi .24s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes dzi { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dzu { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dzf { from { opacity: 0; } to { opacity: 1; } }
.dw-top { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--lp-line); flex: none; }
.dw-top .sp { flex: 1; }
.dw-top .btn { min-height: 44px; }
.dw-top .btn svg { width: 15px; height: 15px; }
.dw-top > * { flex: none; }
.dw-top > .sp { flex: 1 1 0; min-width: 0; }
.dw-top > .dw-add, .dw-top > .dw-addw { flex: 0 1 auto; min-width: 0; }
.dw-add { max-width: 100%; }
.dw-add .t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dw-addw { position: relative; display: flex; }
.dw-of { font-size: 13px; color: var(--lp-mut); font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: 2px; }
.dw-ib { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--lp-ink); flex: none; touch-action: manipulation; }
.dw-ib svg { width: 18px; height: 18px; }
.dw-ib:hover { background: var(--lp-inset); }
.dw-ib:disabled { color: var(--lp-line2); cursor: default; background: none; }
.dw-ib:focus-visible, .dw-top .btn:focus-visible, .dw-lk:focus-visible, .dw-cb:focus-visible { outline: none; box-shadow: var(--focus); }
.pop.dw-pop { left: 0; right: auto; width: 290px; max-height: min(60vh, 420px); overflow-y: auto; }
.dw-pop .it { min-height: 48px; }
.dw-pop .it > .dw-chev { margin-left: auto; color: var(--lp-mut); }
.dw-it { display: flex; flex-direction: column; min-width: 0; }
.dw-it b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-pop-back { color: var(--lp-mid); }
.dw-pop .it.dw-pop-back svg { width: 16px; height: 16px; }
.dw-pop .it .dot { background: var(--c); }
.dw-none { padding: 8px 10px; font-size: 14px; color: var(--lp-mid); }
.dw-body { flex: 1; overflow-y: auto; padding: 22px 28px 40px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--lp-line2) transparent; }
.dz .mp-fig { height: 250px; border-radius: 18px; }
.dz .mp-fig.mine { --fig-bg: var(--lilac-t); background: var(--lilac-t); }
.dz .mp-fig svg { width: 210px; height: 210px; }
.dz .mp-fig .fig-btn { border-radius: 18px; }
.dz .mp.editing .mp-fig { height: 196px; }
.dz .mp.editing .mp-fig svg { width: 170px; height: 170px; }
.dw-nr { display: flex; align-items: flex-start; gap: 6px; margin-top: 22px; }
.dz .mp-h { font-family: var(--fd); font-weight: 800; font-size: 30px; letter-spacing: -.02em; line-height: 1.08; margin: 0; flex: 1; min-width: 0; overflow-wrap: break-word; }
.dw-nr .mp-fav { margin: -6px -10px 0 0; }
.dz .mp-name { font-size: 26px; }
.dz .mp-also { font-size: 14.5px; margin-top: 6px; }
.dz .mp-pills { gap: 6px; margin-top: 14px; }
.dz .mp-pills .tg { font-size: 13px; padding: 4px 11px; font-weight: 600; background: var(--lp-inset); color: var(--lp-ink); }
.dz .mp-pills .tg.mp-ar { background: var(--at); color: var(--a); }
.dz .mp-pills .tg.mp-yours { background: var(--lilac-t); color: var(--lilac-deep); }
.dz .mp-sec { margin-top: 26px; }
.dz .mp-sec h4 { margin-bottom: 8px; }
.dz .mp-works { gap: 22px; }
.dz .mp-bd { width: 132px; }
.dz .mp-cue-r { font-size: 16px; line-height: 1.6; }
.dz .mp-two { gap: 0 20px; }
.dz .mp-ln { font-size: 15px; line-height: 1.55; }
.dw-lk { display: block; text-align: left; font-weight: 500; color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-line2); text-underline-offset: 3px; padding: 0; min-height: 44px; }
.dw-lk:hover { text-decoration-color: var(--lp-ink); }
.dz .mp-ln > span { display: block; padding: 4px 0; }
.dw-cbs { display: flex; flex-direction: column; }
.dw-cb { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; border-top: 1px solid var(--lp-line); text-align: left; color: var(--lp-ink); border-radius: 0; }
.dw-cb:first-child { border-top: 0; }
button.dw-cb:hover b { text-decoration: underline; text-decoration-color: var(--lp-line2); text-underline-offset: 3px; }
.dw-cb .strip { display: flex; gap: 2px; flex: none; }
.dw-cb .strip span { display: flex; width: 38px; height: 32px; align-items: center; justify-content: center; background: var(--lp-inset); border-radius: 8px; --fig-bg: var(--lp-inset); }
.dw-cb .strip span.me { background: var(--pink-t); --fig-bg: var(--pink-t); }
.dw-cb .strip svg { width: 28px; height: 28px; }
.dw-cbt { min-width: 0; }
.dw-cb b { display: block; font-weight: 600; font-size: 14.5px; }
.dw-cb small { display: block; font-size: 13px; color: var(--lp-mut); }

/* a phone: Filters and chips; the full Filters screen; the sheet */
@media (max-width: 720px) {
  .page.ml { padding-top: 22px; }
  .ml-head h1 { font-size: 28px; flex: 1 1 100%; }
  .ml-head .seg { flex: 1 1 auto; }
  .ml-head .seg button { flex: 1; min-height: 44px; }
  .ml-head .btn { min-height: 44px; }
  .ml-body { grid-template-columns: minmax(0, 1fr); margin-top: 16px; gap: 0; }
  .ml-rail { display: none; }
  .ml-q { height: 44px; }
  .ml-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
  .ml-fb { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--lp-ink); color: #fff; font-weight: 600; font-size: 14px; touch-action: manipulation; }
  .ml-fb svg { width: 15px; height: 15px; }
  .ml-ch { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--at, var(--lp-inset)); color: var(--a, var(--lp-ink)); font-weight: 600; font-size: 14px; touch-action: manipulation; }
  .ml-ch.st { background: var(--lp-ink); color: #fff; }
  .ml-ch svg { width: 12px; height: 12px; }
  .ml-chips .ml-clr { height: 44px; margin: 0; padding: 0 12px; font-size: 14px; }
  .ml-sh { font-size: 16px; margin: 22px 0 10px; }
  .ml-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .mc-fig svg { width: 84px; height: 84px; }
  .ml-cbs { grid-template-columns: minmax(0, 1fr); }
  .ml-fs { position: fixed; inset: 0; z-index: 50; background: #fff; display: flex; flex-direction: column; }
  .ml-fs-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex: none; }
  .ml-fs-top b { font-family: var(--fd); font-size: 19px; }
  .ml-fs-top .sp { flex: 1; }
  .ml-fs-top .ml-clr { height: 44px; margin: 0; font-size: 14px; }
  .ml-ib { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--lp-ink); }
  .ml-ib svg { width: 18px; height: 18px; }
  .ml-fs-b { flex: 1; overflow-y: auto; padding: 4px 26px 20px; }
  .ml-fs-b .ml-rh { margin-top: 20px; }
  .ml-fs-b .ml-rh:first-child { margin-top: 6px; }
  .ml-fs-b .ml-rh .ml-clr { display: none; }
  .ml-fs-f { display: flex; padding: 12px 16px 24px; border-top: 1px solid var(--lp-line); flex: none; }
  .ml-fs-go { flex: 1; justify-content: center; min-height: 48px; font-size: 15px; }
  html:has(.ml-fs) { overflow: hidden; }
  /* the drawer is a sheet from the bottom */
  .dz-panel { top: 52px; left: 0; width: 100%; border-radius: 22px 22px 0 0; box-shadow: 0 -1px 0 var(--lp-line2); overflow: hidden; }
  .dz-scrim { background: rgba(26, 20, 16, .14); }
  .dz-grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--lp-line2); margin: 8px auto 0; flex: none; }
  .dw-top { padding: 6px 10px 8px; gap: 4px; }
  .dw-of { display: none; }
  .dw-edit { width: 44px; padding: 0; justify-content: center; }
  .dw-edit .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dw-body { padding: 16px 18px 30px; }
  .dz .mp-fig { height: 200px; }
  .dz .mp-fig svg { width: 170px; height: 170px; }
  .dz .mp-h { font-size: 26px; }
  .dz .mp-bd { width: 120px; }
  .pop.dw-pop { position: fixed; left: 16px; right: 16px; top: 120px; width: auto; }
}
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .dz-in .dz-panel { animation: dzu .26s cubic-bezier(.16, 1, .3, 1); }
}
@media print { .dz, .ml-rail, .ml-chips { display: none !important; } }

/* several blocks picked (2026-10-17): the picked look of the Blocks page's moves */
.r-sec.bk-pk, .r-sec.bk-pk:hover, .ol-b.bk-pk, .ol-b.bk-pk:hover { background: var(--lp-ink); color: var(--lp-paper); }
.r-sec.bk-pk .sub, .r-sec.bk-pk .mn, .ol-b.bk-pk .mn { color: #E8E4DF; }
.r-sec.bk-pk .grip { color: #E8E4DF; }
.r-sec.bk-pk .r-pen { color: var(--lp-paper); }
.r-sec.bk-pk .tf { background: var(--lp-paper); border-radius: 8px; }
.ol-dot.bk-pk .dot { box-shadow: 0 0 0 2px var(--lp-paper), 0 0 0 4px var(--lp-ink); }
body:has(.bk-pbar) .toast { bottom: 96px; }
/* the round, ticked: a short scroll when it's long */
.rd-grid { max-height: min(52vh, 460px); overflow-y: auto; }
/* several moves picked on the Plan */
.mv2.mv-pk { box-shadow: inset 0 0 0 2px var(--lp-ink); }
body:has(.mv-pbar) .toast { bottom: 96px; }

/* the box: a move per line (2026-10-17) */
.dp-box { align-items: flex-start; }
.dp-box svg { margin-top: 12px; }
.dp-box textarea { flex: 1; min-width: 0; border: 0; background: none; outline: none; resize: none; font: inherit; font-size: 15px; line-height: 1.5; padding: 9px 0; field-sizing: content; min-height: 42px; max-height: 220px; color: var(--lp-ink); }
.dp-box textarea::placeholder { color: var(--lp-mut); }
.dp-box textarea:focus, .dp-box textarea:focus-visible { box-shadow: none; outline: none; }
/* the rare ones, small */
.dp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lp-line); }
.dp-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--lp-inset); color: var(--lp-mid); font: 600 13.5px var(--fu); }
.dp-pill:hover { background: var(--lp-line); color: var(--lp-ink); }
.dp-pill svg { width: 14px; height: 14px; }
.dp-pill[aria-expanded="true"] { background: var(--lp-line); color: var(--lp-ink); }
@media (pointer: coarse) { .dp-pill { min-height: 44px; } }
/* the Move Library in sections (2026-10-17) */
.ml-shr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 30px 0 4px; }
.ml-shr .ml-sh { margin: 0; }
.ml-shr .ml-by { margin-left: auto; }
.ml-grp { margin-top: 18px; }
.ml-gh { display: flex; align-items: center; gap: 8px; font-family: var(--fd); font-weight: 700; font-size: 16px; margin: 0 0 12px; }
.ml-gh small { font-family: var(--fu); font-weight: 500; font-size: 13.5px; color: var(--lp-mut); }
.ml-gh svg { width: 20px; height: 20px; color: var(--lp-mid); flex: none; }
.ml-grp .ml-more { margin-top: 14px; }
@media (max-width: 600px) { .ml-shr { margin-top: 22px; } }

/* a card's edges, on the card (2026-10-18): a small handle, dainty */
.mv2 { position: relative; }
.cgrip { position: absolute; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 999px; background: var(--lp-ink); opacity: 0; cursor: ns-resize; z-index: 2; transition: opacity .12s ease-out; }
.cgrip::before { content: ""; position: absolute; left: -14px; right: -14px; top: -8px; bottom: -8px; }
.cgrip.top { top: 3px; }
.cgrip.bot { bottom: 3px; }
.mv2:hover > .cgrip, .mv2:focus-visible > .cgrip, .mv2.picked > .cgrip { opacity: .3; }
.mv2 > .cgrip:hover, body.dragging-edge .cgrip { opacity: .65; }
@media (prefers-reduced-motion: reduce) { .cgrip { transition: none; } }
/* a line she made bold that no move covers */
.ln.lead > .w { color: var(--lp-ink); font-weight: 600; }
/* waiting moves, by part, in the side panel (2026-10-18) */
.lib-wait .lw-ph { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--lp-ink); margin: 10px 0 6px; }
.lib-wait .lw-ph:first-child { margin-top: 2px; }
.lib-wait .lw-ph small { font-weight: 500; color: var(--lp-mut); font-size: 12.5px; }
.lib-wait .lw-pn { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--pink-t); color: var(--pink-deep); font-family: var(--fd); font-weight: 800; font-size: 12px; }
.lib-wait { max-height: 50%; }
/* Effort, set on the strip (2026-10-18) */
.bb-strip[data-layer="effort"] .bb-sg[data-bbseg] { cursor: ns-resize; touch-action: none; }
.bb-strip[data-layer="effort"] .bb-sg .fill { transition: height .12s ease-out; }
.bb-strip[data-layer="effort"] .bb-sg[data-bbseg]:hover .fill.none { background: var(--lp-line2); }
@media (prefers-reduced-motion: reduce) { .bb-strip[data-layer="effort"] .bb-sg .fill { transition: none; } }
/* the panel's filters, several at once (2026-10-18) */
.lib-chips:empty { display: none; }
.lib-chips.lib-fs { margin: 6px 0 0; }
.lib-chips.lib-fs + .lib-chips.lib-fs { margin-top: 5px; }
.lib-chips.lib-fs:last-of-type { margin-bottom: 8px; }
/* room between the filters and the cards (her words, 2026-10-28: "The icons are touching the filters") */
.lib-chips.lib-fs.lib-fs-last { margin-bottom: 16px; }
.lib-grid > .lib-ask:first-child { margin-top: 0; }
/* the areas of the arms: smaller pills, just under Arms */

.lib-chips.lib-fs.lib-sub button:not(.on) { background: color-mix(in srgb, var(--purple-t) 70%, #fff); }
.lib-chips.lib-fs button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; }
.lib-chips.lib-fs button svg { width: 15px; height: 15px; flex: none; }
.lib-card .lv-i { display: inline-flex; vertical-align: -2px; margin-right: 3px; color: var(--lp-mid); }
.lib-card .lv-i svg { width: 13px; height: 13px; }
/* her own tempo pills (2026-10-18) */
.dp-tempo .tp-add { background: none; color: var(--lp-mid); display: inline-flex; align-items: center; gap: 5px; }
.dp-tempo .tp-add:hover { color: var(--lp-ink); background: var(--lp-inset); }
.dp-tempo .tp-add svg { width: 13px; height: 13px; }
.dp-tempo .tp-x { width: 24px; min-width: 24px; padding: 0; margin-left: -4px; background: none; color: var(--lp-mut); display: inline-grid; place-items: center; }
.dp-tempo .tp-x:hover { color: var(--lp-ink); }
.dp-tempo .tp-x svg { width: 12px; height: 12px; }
.dp-tempo .tp-in { font: 600 14px var(--fu); border: 0; border-radius: 999px; padding: 8px 14px; min-width: 150px; background: #fff; box-shadow: inset 0 0 0 1px var(--lp-ink); color: var(--lp-ink); }
.dp-tempo .tp-in:focus { outline: none; }
.dp-tempo .tp-mine { display: inline-flex; align-items: center; white-space: nowrap; }
/* the Move Library's Position ticks (2026-10-18) */
.ml-rr .ml-lv { display: inline-flex; vertical-align: -3px; margin-right: 6px; color: var(--lp-mid); }
.ml-rr .ml-lv svg { width: 16px; height: 16px; }
/* Practice is a tab (2026-10-18): it fits under the class header */
.cp-head + .pr-page { min-height: calc(100vh - var(--barH, 60px) - var(--headH, 69px)); }
.cp-head + .pr-page { padding-top: 14px; padding-bottom: 12px; }
/* Tap on the beat (2026-10-18) */
.pr-tap { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--lp-inset); color: var(--lp-ink); font: 700 14px var(--fu); }
.pr-tap:hover { background: var(--lp-line); }
.pr-tap:focus-visible { outline: none; box-shadow: var(--focus); }
.pr-tap.hit { animation: prHit .18s ease-out; }
@keyframes prHit { from { transform: scale(.94); background: var(--pink-t); } }
@media (prefers-reduced-motion: reduce) { .pr-tap.hit { animation: none; } }
/* the Practice list scrolls; a row starts it there (2026-10-18) */
.pr-list { overflow-y: auto; overscroll-behavior: contain; }
.pr-list .pr-roll { position: relative; transform: none !important; transition: none; }
.pr-row[data-act] { cursor: pointer; }
.pr-row[data-act]:hover { opacity: .85; background: var(--lp-inset); }
.pr-row.on[data-act]:hover { background: var(--tint); opacity: 1; }
.pr-row[data-act]:focus-visible { outline: none; box-shadow: var(--focus); position: relative; z-index: 1; }
/* the list scrolls inside the page, which fits the window under the tabs */
.cp-head + .pr-page.is-list { height: calc(100vh - var(--barH, 60px) - var(--headH, 69px)); min-height: 520px; }
.cp-head + .pr-page.is-list .pr-list { height: auto; min-height: 0; flex: 1; }
@media (max-width: 860px) { .cp-head + .pr-page.is-list { height: auto; } .cp-head + .pr-page.is-list .pr-list { height: 62vh; flex: none; } }
/* Tap, and the beat it is */
.pr-tapw { display: inline-flex; align-items: center; background: var(--lp-inset); border-radius: 999px; }
.pr-tapw .pr-tap { background: none; padding-right: 8px; }
.pr-tapw .pr-tap:hover { background: var(--lp-line); }
/* the whole phrase to tap on (2026-10-18) */
.pr-tapw { position: relative; }
.pr-tapg { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 20; display: grid; gap: 4px; padding: 10px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--lp-line2); }
.pr-tapr { display: grid; grid-template-columns: repeat(8, 38px); gap: 4px; }
.pr-tapg button { height: 38px; border-radius: 10px; background: var(--lp-inset); font: 700 15px var(--fd); color: var(--lp-mid); font-variant-numeric: tabular-nums; }
.pr-tapg button.n { color: var(--pink-deep); }
.pr-tapg button:hover { background: var(--lp-line); color: var(--lp-ink); }
.pr-tapg button.cur { background: var(--lp-ink); color: #fff; }
.pr-tapg button:focus-visible { outline: none; box-shadow: var(--focus); }
.pr-tapg button.hit { animation: prHit .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .pr-tapg button.hit { animation: none; } }
@media (max-width: 600px) { .pr-tapg { left: 0; transform: none; } .pr-tapr { grid-template-columns: repeat(8, 34px); } }
/* Find my place: the song's lines, then the count (2026-10-18) */
.pr-sync { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 20; width: min(420px, calc(100vw - 32px)); padding: 12px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--lp-line2); display: flex; flex-direction: column; gap: 8px; }
.pr-sync .pr-tapg { position: static; transform: none; box-shadow: none; padding: 0; justify-content: center; }
.pr-syl { font-size: 12.5px; font-weight: 600; color: var(--lp-mid); }
.pr-lines { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; }
.pr-line { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: baseline; text-align: left; padding: 8px 10px; border-radius: 10px; font-size: 14.5px; line-height: 1.3; color: var(--lp-ink); }
.pr-line em { font-style: normal; font-size: 12px; color: var(--lp-mut); font-variant-numeric: tabular-nums; }
.pr-line i { color: var(--lp-mut); }
.pr-line:hover { background: var(--lp-inset); }
.pr-line.cur { background: var(--pink-t); font-weight: 600; }
.pr-line:focus-visible { outline: none; box-shadow: var(--focus); }
@media (max-width: 600px) { .pr-sync { left: 0; transform: none; } }
/* the Plan's class list folds to dots (2026-10-18) */
.plan.rail-mini { --railW: 56px; }
.rail.mini { width: 56px; padding: 8px 6px 24px; display: flex; flex-direction: column; align-items: center; }
.rail .r-h { display: flex; align-items: center; gap: 4px; }
.rail .r-h h4 { flex: 1; }
.rail .r-h .ol-tog { margin-right: -4px; }
/* rounds on Blocks (2026-10-18): a group, its name over a hairline */
.bb-rg { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bb-rgl { font-size: 12px; font-weight: 700; color: var(--lp-mid); padding: 0 2px 3px; border-bottom: 1px solid var(--lp-line2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-rgc { display: flex; gap: 3px; flex: 1; min-width: 0; }
.bb-segs { align-items: flex-end; }
.bb-lane.wrap .bb-rg { flex: 0 0 auto !important; max-width: 100%; }
.bb-lane.wrap .bb-rgc { flex-wrap: wrap; }
.bb-lane.plain .bb-rg { flex: 0 0 auto !important; }
.bb-lane.plain .bb-rgc { flex-wrap: wrap; }
.bb-rndm { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; width: 240px; color: var(--lp-ink); }
.bb-rndm .it { min-height: 44px; }
/* rounds on the Plan, the Guide and Practice (2026-10-18) */
.tg.rd { background: var(--lp-ink); color: #fff; }
.g-round { font-family: var(--fd); font-weight: 800; font-size: 15px; padding: 14px 0 6px; border-bottom: 1px solid var(--lp-line2); margin-bottom: 4px; }
.pr-meta .pr-rd { color: var(--lp-ink); font-weight: 700; }
/* the tempo and side under the move's name, large (2026-10-18, her words:
   "the right side and pulse are actually really important information") */
.pr-mvt { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pr-mvt .pr-pills { gap: 8px; }
.pr-mvt .pr-pill { min-height: 44px; padding: 0 18px; font-size: 22px; font-weight: 700; }
@media (max-width: 860px) { .pr-mvt .pr-pill { min-height: 36px; padding: 0 14px; font-size: 17px; } }
/* the cue in bullets */
ul.pr-cue { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.pr-cue li { position: relative; padding-left: 22px; }
ul.pr-cue li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-ink); }
/* the Practice card, her pick (2026-10-18): the move and its cue on the
   left; Next, then the lyrics, on the right; the count across the bottom */
.pr-card { grid-template-rows: minmax(0, 1fr) auto; }
.pr-now ul.pr-cue li { font-size: 21px; line-height: 1.4; }
.pr-under { grid-column: 1 / -1; margin-top: 0; padding: 14px 32px 16px; border-top: 1px solid var(--lp-line); background: #fff; display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.pr-under .pr-left { margin: 0 0 12px; }
.pr-next.top { margin-top: 0; padding-top: 0; border-top: 0; }
.pr-nx.big { background: var(--ntint, var(--lp-inset)); border-radius: 18px; padding: 14px 16px; gap: 14px; align-items: center; }
.pr-nx.big .pr-nf { width: 92px; height: 92px; border-radius: 14px; background: #fff; display: grid; place-items: center; flex: none; }
.pr-nx.big b { font-size: 30px; line-height: 1.05; letter-spacing: -.01em; }
.pr-nx.big small { font-size: 15px; margin-top: 4px; }
.pr-nx.big .pr-pills { margin-top: 10px; }
.pr-nx.big .pr-pill { min-height: 34px; font-size: 16px; padding: 0 13px; }
.pr-lyw { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.pr-lpart { font-family: var(--fd); font-weight: 800; font-size: 18px; color: var(--lp-ink); }
@media (max-width: 860px) { .pr-under { padding: 12px 16px 14px; } .pr-nx.big b { font-size: 22px; } .pr-nx.big .pr-nf { width: 64px; height: 64px; } .pr-now ul.pr-cue li { font-size: 18px; } }
.pr-nx.big .pr-nf { --fig-bg: #fff; padding: 0; }
.pr-nx.big .pr-nf svg { width: 80px; height: 80px; }
@media (max-width: 860px) { .pr-nx.big .pr-nf svg { width: 56px; height: 56px; } }
/* the count, centred under the card (2026-10-18: "but it should be centred :)") */
.pr-under { justify-content: center; text-align: center; }
.pr-under .pr-eight { justify-content: center; }
/* the count band in white and pink on black (2026-10-18, her words: "and
   maybe white and pink on black?"). Bubblegum on ink is 6.5:1 */
.pr-under { background: var(--lp-ink); border-top: 0; color: #fff; }
.pr-under .pr-eight span { color: rgba(255, 255, 255, .42); }
.pr-under .pr-eight span.past { color: rgba(255, 255, 255, .7); }
.pr-under .pr-eight span.on { color: #fff; box-shadow: inset 0 -5px 0 #fff; }
.pr-under .pr-eight span.n, .pr-under .pr-eight span.n.past, .pr-under .pr-eight span.n.on { color: var(--pink); }
.pr-under .pr-eight span.n.on { box-shadow: inset 0 -5px 0 var(--pink); }
.pr-under .pr-left { color: #E8E4DF; }
/* the song picker reads as something to choose (2026-10-18, her words: "can
   this be grey so we know it can be clicked on to chose") */
.pr-pick-b { background: var(--lp-inset); }
.pr-pick-b:hover, .pr-pick-b[aria-expanded="true"] { background: var(--lp-line); }
/* Find my place: an even pill, like Half speed and the song picker
   (2026-10-18, her words: "the button is not properly shaped") */
.pr-tapw { background: none; border-radius: 0; }
.pr-tapw .pr-tap, .pr-tap { background: var(--lp-inset); padding: 0 18px; min-height: 44px; border-radius: 999px; font: 600 14.5px var(--fu); white-space: nowrap; }
.pr-tapw .pr-tap:hover, .pr-tap[aria-expanded="true"] { background: var(--lp-line); }

/* ---------- The printed Guide: With the figures ----------
   Her pick on studies/guide-print-studies.html (2026-10-18), the Guild's
   print brought over: "I like how we had it when it was printed in the
   Guild version for the fitness class." The song as a title, each part a
   colored band (named too), then per change: the figure on the left with
   how long under it; the time and the lyric you change on; the move large
   with its tempo in its own color, bold; the cue. Same on screen and paper. */
.guide .g-stitle { padding: 26px 0 4px; }
.guide .g-stitle .g-sl { display: block; font-weight: 700; font-size: 14px; color: var(--lp-mid); margin-bottom: 2px; }
.guide .g-stitle h3 { font-family: var(--fd); font-weight: 800; font-size: 40px; line-height: 1.02; letter-spacing: -.025em; }
.guide .g-stitle p { font-size: 15px; color: var(--lp-mid); margin-top: 6px; }
.guide .g-pband { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; padding: 10px 16px; border-radius: 10px; background: var(--bt, var(--lp-inset)); color: var(--bk, var(--lp-mid)); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; break-after: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.guide .g-pband b { font-family: var(--fd); font-weight: 800; font-size: 18px; color: var(--lp-ink); }
.guide .g-pband.k-none { background: #fff; box-shadow: inset 0 0 0 1px var(--lp-line2); }
.guide .g-pband.k-pre { --bt: var(--marigold-t); --bk: var(--marigold-deep); }
.guide .g-pband.k-chorus { --bt: var(--coral-t); --bk: var(--coral-deep); }
.guide .g-pband.k-bridge { --bt: var(--purple-t); --bk: var(--purple-deep); }
.guide .g-row.g-fr { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 16px 0; }
.guide .g-fr .g-gut { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.guide .g-fr .g-gut .fig { width: 72px; height: 72px; padding: 6px; border-radius: 14px; background: var(--tint, var(--lp-inset)); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.guide .g-fr .g-gut .fig svg { width: 100%; height: 100%; }
.guide .g-fr .g-len { font-size: 12.5px; color: var(--lp-mut); text-align: center; line-height: 1.25; }
.guide .g-fr .g-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.guide .g-fr .g-at { font-size: 16px; font-weight: 500; color: var(--lp-mid); line-height: 1.35; }
.guide .g-fr .g-at b { font-weight: 700; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.guide .g-fr .g-at i { color: var(--lp-mut); }
.guide .g-fr .g-mv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.guide .g-fr .g-mv .n { font-family: var(--fd); font-weight: 800; font-size: 28px; letter-spacing: -.015em; line-height: 1.1; }
.guide .g-fr .g-mv .tgs { margin-left: 0; gap: 6px; }
.guide .g-fr .tg { display: inline-block; margin: 0; line-height: 1.5; font-size: 14.5px; font-weight: 700; padding: 2px 11px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.guide .g-fr .g-cue { font-size: 17px; line-height: 1.45; color: var(--lp-ink); max-width: 62ch; }
.guide .g-fr .combo-tag { align-self: flex-start; }
/* each tempo its own color, bold (Study 03); the side stays blue */
.guide .tg.tp-1 { background: var(--teal-t); color: var(--teal-deep); }
.guide .tg.tp-2 { background: var(--purple-t); color: var(--purple-deep); }
.guide .tg.tp-3 { background: var(--lilac-t); color: var(--lilac-deep); }
.guide .tg.tp-own { background: var(--marigold-t); color: var(--marigold-deep); }
.guide .tg.pulse { background: var(--pink-t); color: var(--pink-deep); }
.guide .tg.hold { background: var(--coral-t); color: var(--coral-deep); }
@media (max-width: 700px) {
  .guide .g-stitle h3 { font-size: 32px; }
  .guide .g-row.g-fr { grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; padding: 14px 0; }
  .guide .g-row.g-fr > .g-gut { grid-column: 1; display: flex; }
  .guide .g-row.g-fr > .g-gut:empty { display: flex; }
  .guide .g-fr .g-len { font-size: 11px; white-space: nowrap; }
  .guide .g-fr .g-gut .fig { width: 52px; height: 52px; border-radius: 11px; padding: 4px; }
  .guide .g-fr .g-mv .n { font-size: 23px; }
  .guide .g-fr .g-cue { font-size: 16px; }
  .guide .g-pband { padding: 9px 12px; }
}
@media print {
  .guide .g-stitle { padding-top: 14px; }
  .guide .g-stitle h3 { font-size: 34px; }
  .guide .g-stitle p { font-size: 12px; }
  .guide .g-pband { margin-top: 12px; padding: 6px 12px; font-size: 11px; }
  .guide .g-pband b { font-size: 14px; }
  .guide .g-row.g-fr { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; padding: 9px 0; break-inside: avoid; }
  .guide .g-fr .g-gut .fig { width: 52px; height: 52px; padding: 4px; border-radius: 10px; }
  .guide .g-fr .g-len { font-size: 9.5px; }
  .guide .g-fr .g-at { font-size: 13px; }
  .guide .g-fr .g-mv .n { font-size: 22px; }
  .guide .g-fr .tg { font-size: 12px; padding: 1px 9px; }
  .guide .g-fr .g-cue { font-size: 14.5px; }
}
/* the move picked on Blocks: its place in the row (2026-10-19) */
.bb-ctx .bb-ord { display: inline-flex; align-items: center; gap: 2px; margin-right: auto; }
.bb-ctx .me-q:disabled { opacity: .4; cursor: default; }
/* the bar never covers the panel's last chips */
body:has(.bb-pbar) .libpanel .pn-body { padding-bottom: 120px; }
@media (max-width: 640px) { body:has(.bb-pbar) .libpanel .pn-body { padding-bottom: 170px; } }
/* the moves not on the words yet, all at once (2026-10-20): side by side,
   each on its own color, on the plain card */
.pr-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 4px; align-content: start; }
.pr-am { display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: 20px; background: var(--tint, #fff); min-width: 0; }
.pr-af { --fig-bg: #fff; flex: none; display: inline-flex; padding: 6px; border-radius: 14px; background: #fff; }
.pr-af svg { width: 112px; height: 112px; }
.pr-amt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.pr-amt b { font-family: var(--fd); font-weight: 800; font-size: 32px; line-height: 1.04; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pr-amt .pr-pill { min-height: 36px; font-size: 17px; font-weight: 700; padding: 0 14px; }
@media (max-width: 860px) { .pr-all { grid-template-columns: minmax(0, 1fr); } .pr-af svg { width: 72px; height: 72px; } .pr-amt b { font-size: 22px; } }
/* the sound by the count, on the black bar */
.pr-under .pr-ib { align-self: center; color: #fff; }
.pr-under .pr-ib:hover { background: rgba(255, 255, 255, .14); }
.pr-under .pr-ib[aria-pressed="false"] { color: rgba(255, 255, 255, .62); }
/* moving a move on the lyrics asks first (2026-10-20) */
.bb-ctx .bb-swq { margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .7); display: flex; flex-direction: column; gap: 6px; }
.bb-ctx .bb-swq p { font-size: 14px; line-height: 1.4; }
.bb-ctx .bb-swq span { display: flex; gap: 6px; }
.bb-ctx .bb-swq .me-q.on { background: var(--lp-ink); color: #fff; }
.bb-ctx .bb-swq .me-q.on:hover { background: var(--lp-ink); }
/* the song's time by its words, in both modes (2026-10-20) */
.pr-lhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pr-stime { font-size: 15px; color: var(--lp-mid); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-stime b { color: var(--lp-ink); font-weight: 700; }

/* STUDIO: the card, full screen (her pick, study 01, 2026-10-20). Sizes
   follow the screen so it reads across the room; the lyrics and Next are
   larger than the mock, as she asked */
.pr-page.is-studio { position: fixed; inset: 0; z-index: 300; max-width: none; min-height: 0; margin: 0; padding: 0; background: #fff; overflow: auto; }
.is-studio .pr-stage { flex: 1; min-height: 100%; }
.is-studio .pr-card { border-radius: 0; box-shadow: none; min-height: 100%; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.is-studio .pr-now { padding: 2.6vw 3vw; gap: 1.4vw; }
.is-studio .pr-meta, .is-studio .pr-next h4 { font-size: clamp(15px, 1.15vw, 24px); }
.is-studio .pr-mv { gap: 2vw; }
.is-studio .pr-fig svg { width: clamp(140px, 15vw, 320px); height: clamp(140px, 15vw, 320px); }
.is-studio .pr-mv b { font-size: clamp(40px, 5vw, 110px); }
.is-studio .pr-mvt .pr-pill { min-height: clamp(40px, 2.8vw, 64px); font-size: clamp(20px, 1.5vw, 32px); padding: 0 1.2vw; }
.is-studio .pr-now ul.pr-cue li { font-size: clamp(20px, 2vw, 44px); }
.is-studio .pr-all { grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 26vw, 560px), 1fr)); gap: 1vw; }
.is-studio .pr-am { padding: 1vw; gap: 1.2vw; border-radius: 1.4vw; }
.is-studio .pr-af svg { width: clamp(100px, 9vw, 200px); height: clamp(100px, 9vw, 200px); }
.is-studio .pr-amt b { font-size: clamp(30px, 3.3vw, 72px); }
.is-studio .pr-side { padding: 2.6vw; gap: 2vw; }
.is-studio .pr-nx.big { padding: 1.2vw 1.4vw; gap: 1.4vw; border-radius: 1.6vw; }
.is-studio .pr-nx.big .pr-nf { width: clamp(92px, 10vw, 220px); height: clamp(92px, 10vw, 220px); border-radius: 1.2vw; }
.is-studio .pr-nx.big .pr-nf svg { width: 88%; height: 88%; }
.is-studio .pr-nx.big b { font-size: clamp(30px, 3.3vw, 72px); }
.is-studio .pr-nx.big small { font-size: clamp(15px, 1.4vw, 30px); }
.is-studio .pr-nx.big .pr-pill { min-height: clamp(34px, 2.6vw, 56px); font-size: clamp(16px, 1.3vw, 28px); }
.is-studio .pr-lpart { font-size: clamp(18px, 2vw, 44px); }
.is-studio .pr-stime { font-size: clamp(15px, 1.5vw, 32px); }
.is-studio .pr-lys { height: clamp(196px, 30vh, 560px); }
.is-studio .pr-ly p { font-size: clamp(16px, 1.7vw, 36px); margin-bottom: .4vw; }
.is-studio .pr-ly p.on { font-size: clamp(22px, 2.6vw, 56px); }
.is-studio .pr-under { justify-content: flex-start; padding: 1.2vw 3vw; gap: 10px 1.4vw; flex-wrap: wrap; align-items: center; }
.is-studio .pr-under .pr-eight { font-size: clamp(56px, 5vw, 128px); }
.is-studio .pr-under .pr-left { margin: 0; font-size: clamp(15px, 1.2vw, 26px); white-space: nowrap; }
.is-studio .pr-under .sp { flex: 1; }
/* the controls in the bar: up while the mouse moves, while paused, or
   while the keyboard is in them */
.is-studio .pr-under .pr-tp { flex-wrap: nowrap; padding: 0; gap: 6px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 180ms cubic-bezier(.23, 1, .32, 1), transform 180ms cubic-bezier(.23, 1, .32, 1); }
.is-studio.wake .pr-under .pr-tp, .is-studio.paused .pr-under .pr-tp, .is-studio .pr-under .pr-tp:has(:focus-visible), .is-studio .pr-under .pr-tp:has([aria-expanded="true"]) { opacity: 1; transform: none; pointer-events: auto; }
.is-studio:not(.wake):not(.paused) { cursor: none; }
.is-studio .pr-tp .pr-ib { color: #fff; }
.is-studio .pr-tp .pr-ib:hover { background: rgba(255, 255, 255, .14); }
.is-studio .pr-tp .pr-tapw .pr-tap, .is-studio .pr-tp .pr-pick-b { background: rgba(255, 255, 255, .12); color: #fff; }
.is-studio .pr-tp .pr-tapw .pr-tap:hover, .is-studio .pr-tp .pr-tap[aria-expanded="true"], .is-studio .pr-tp .pr-pick-b:hover, .is-studio .pr-tp .pr-pick-b[aria-expanded="true"] { background: rgba(255, 255, 255, .22); }
.is-studio .pr-tp .pr-pick-b .pr-song { color: #fff; max-width: 220px; }
.is-studio .pr-tp .pr-pick-b svg { color: #E8E4DF; }
.is-studio .pr-tp .pr-time { color: #E8E4DF; min-width: 0; white-space: nowrap; }
.is-studio .pr-tp .pr-time b { color: #fff; }
.is-studio .pr-tp .pr-speed { background: rgba(255, 255, 255, .12); }
.is-studio .pr-tp .pr-speed button { color: #E8E4DF; }
.is-studio .pr-tp .pr-speed button.on { background: #fff; color: var(--lp-ink); box-shadow: none; }
.is-studio .pr-tp .pr-stb { background: rgba(255, 255, 255, .12); }
.is-studio .pr-menu, .is-studio .pr-sync { color: var(--lp-ink); text-align: left; }
@media (max-width: 860px) {
  .is-studio .pr-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .is-studio .pr-under { align-self: end; }
  .is-studio .pr-under { flex-wrap: wrap; padding: 12px 16px; }
  .is-studio .pr-under .pr-tp { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .is-studio .pr-under .pr-tp { transition: opacity 120ms linear; transform: none; } }
/* a song in the list moves by drag or the arrow keys (2026-10-21) */
.r-slot.sg { position: relative; }
.r-slot.sg[draggable="true"]:active { cursor: grabbing; }
.r-slot.sg:focus-visible { outline: none; box-shadow: var(--focus); }
/* Repeat the round in the side panel (2026-10-21, her words: "error here in
   repeating the round. no way to actually apply selection"): the picks were
   held to a height but not scrolled, so they spilled over Repeat and the
   tabs. Now they take the room they need, and Repeat stays in view at the
   bottom while the round is on screen */
.libpanel .pn-ctx .sel-grid.rd-grid { max-height: none; overflow: visible; }
.libpanel .pn-ctx .rd-foot { position: sticky; bottom: 0; z-index: 2; margin-top: 8px; padding: 10px 0; background: #fff; border-top: 1px solid var(--lp-line); }
/* Practice · Lyrics (2026-10-21, her picks on lyrics-view-studies): the move
   left, every lyric right, level, like the Plan; a Cues pill; it scrolls */
.prl { padding-bottom: 40vh; min-width: 0; width: 100%; }
.prl-song { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--lp-line); margin-bottom: 6px; }
.prl-song + .prl-grp { margin-top: 4px; }
.prl-bn { font-weight: 700; font-size: 14px; color: var(--lp-mid); }
.prl-song b { font-family: var(--fd); font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.prl-ar { font-size: 14px; color: var(--lp-mid); }
.prl-song .sp { flex: 1; }
.prl-cp { min-height: 36px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 14px; background: #fff; box-shadow: 0 0 0 1px var(--lp-line2); }
.prl-cp:hover { background: var(--lp-inset); }
.prl-cp[aria-pressed="true"] { background: var(--lp-ink); color: #fff; box-shadow: none; }
.prl-grp { --tint: var(--lp-inset); display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0 12px; padding: 5px 24px; }
.prl-mv { background: var(--tint); border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; align-self: start; cursor: pointer; transition: background-color 200ms ease-out; }
.prl-mv:focus-visible { outline: none; box-shadow: var(--focus); }
.prl-fg { --fig-bg: #fff; flex: none; display: inline-flex; border-radius: 10px; background: #fff; }
.prl-fg svg { width: 46px; height: 46px; }
.prl-mt { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.prl-grp > * { min-width: 0; }
.prl-mt b { font-family: var(--fd); font-weight: 800; font-size: 19px; line-height: 1.12; letter-spacing: -.01em; }
.prl-mt small { font-size: 13px; font-weight: 600; color: var(--lp-mid); }
.prl-mt .pr-pill { min-height: 26px; padding: 0 10px; font-size: 13px; font-weight: 700; }
.prl.cues .prl-grp { grid-template-columns: 280px minmax(0, 1fr) minmax(220px, 340px); }
.prl-cue { padding: 10px 4px 0 6px; }
.prl-cue .pr-cue { font-size: 15px; line-height: 1.45; gap: 5px; font-style: italic; }
/* more room for the words (2026-10-21, her words: "the whole point of this view is that there's just more space for the lyrics and the moves") */
.pr-page.is-lyr, .pr-page.is-sq { max-width: none; }
@media (max-width: 1000px) {
  .prl.cues .prl-grp { grid-template-columns: 240px minmax(0, 1fr); }
  .prl.cues .prl-ly { grid-row: span 2; }
  .prl-cue { grid-column: 1; padding-top: 6px; }
}
.prl-ly { background: var(--tint); border-radius: 12px; padding: 6px; transition: background-color 200ms ease-out; }
.prl-pt { font-size: 13px; font-weight: 700; color: var(--lp-mid); padding: 8px 10px 2px; }
.prl-ln { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 5px 10px; border-radius: 8px; font-size: 18px; line-height: 1.35; cursor: pointer; }
.prl-ln:hover { background: color-mix(in srgb, #fff 55%, transparent); }
.prl-ln em { font-style: normal; font-size: 13px; color: var(--lp-mid); font-variant-numeric: tabular-nums; }
.prl-ln i { color: var(--lp-mid); }
.prl-ln.first { font-weight: 700; }
.prl-ln.on { background: #fff; font-weight: 700; }
.prl-none { font-size: 15px; font-style: italic; color: var(--lp-mid); padding: 10px; }
/* a move you've done goes grey, so how far you are reads without reading */
.prl-grp.done { --tint: var(--lp-inset); }
.prl-grp.done .prl-fg { opacity: .55; }
@media (max-width: 640px) {
  .prl-song { padding: 10px 14px; }
  .prl-ar { display: none; }
  .prl-song b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .prl-grp, .prl.cues .prl-grp { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 6px 12px; }
  .prl.cues .prl-ly { grid-row: auto; }
  .prl-cue { grid-column: auto; }
  .prl-ln { font-size: 17px; grid-template-columns: 42px minmax(0, 1fr); }
}
/* Practice List (2026-10-21, her words: "let's not actually gray these
   out"): every row stays dark, the one you're on keeps its color; the tempo
   and side sit beside the name as bold pills, "just as important" */
.pr-row, .pr-row.done { opacity: 1; }
.pr-row[data-act]:hover { opacity: 1; }
.pr-rnt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.pr-rnt .pr-pills { gap: 6px; }
.pr-row .pr-pill { min-height: 32px; padding: 0 13px; font-size: 16px; font-weight: 700; background: var(--lp-inset); }
.pr-row .pr-pill.side { background: var(--blue-t); }
.pr-row.on .pr-pill { min-height: 38px; padding: 0 15px; font-size: 19px; background: #fff; }
.pr-row.on .pr-pill.side { background: var(--blue-t); }
/* Lyrics: jump to a part (2026-10-21, her pick: the color strip on top,
   with names); each piece as wide as its time, the part you're on dark */
.prl-wrap { flex: 1; display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; min-height: 0; }
.prl-strip { display: flex; gap: 3px; flex: none; }
.prl-strip button { --tint: var(--lp-inset); min-width: 12px; min-height: 36px; padding: 0 8px; border-radius: 8px; background: var(--tint); color: var(--lp-ink); font: 700 13px var(--fu); text-align: left; overflow: hidden; transition: background-color 160ms ease-out; }
.prl-strip button span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prl-strip button:hover { background: color-mix(in srgb, var(--tint) 70%, var(--lp-line2)); }
.prl-strip button.now { background: var(--lp-ink); color: #fff; }
.prl-strip button:focus-visible { outline: none; box-shadow: var(--focus); }
.cp-head + .pr-page.is-lyr .prl-wrap .pr-list { flex: 1; min-height: 0; }
@media (max-width: 860px) { .prl-wrap { flex: none; } .prl-strip { overflow-x: auto; scrollbar-width: none; } .prl-strip button { min-width: 44px; min-height: 44px; font-size: 12px; padding: 0 6px; } }
/* Practice · Squares (2026-10-21, her picks on move-squares-studies): every
   move once, large; white squares, the move's color behind its figure; the
   tempo pills in their own colors, the side small; nothing cut off */
.prs { width: 100%; min-width: 0; }
.prs-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; align-items: start; padding: 18px 24px 40px; }
.prs-bh { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; padding-top: 6px; }
.prs-bh b { font-family: var(--fd); font-weight: 800; font-size: 19px; }
.prs-bh span { font-size: 14px; color: var(--lp-mid); }
.prs-sq { --tint: var(--lp-inset); display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--lp-line2); text-align: left; color: var(--lp-ink); }
.prs-sq:hover { background: var(--lp-inset); }
.prs-sq:focus-visible { outline: none; box-shadow: var(--focus); }
.prs-fg { --fig-bg: transparent; position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 10%; border-radius: 10px; background: var(--tint); }
.prs-fg svg { width: 100%; height: 100%; display: block; }
.prs-sq b { font-family: var(--fd); font-weight: 800; font-size: 17px; line-height: 1.15; overflow-wrap: anywhere; }
.prs-tps { display: flex; flex-wrap: wrap; gap: 5px; }
.prs-tp { font-size: 13px; font-weight: 700; line-height: 1.25; padding: 3px 10px; border-radius: 999px; background: var(--marigold-t); color: var(--marigold-deep); }
.prs-tp.tp-1 { background: var(--teal-t); color: var(--teal-deep); }
.prs-tp.tp-2 { background: var(--purple-t); color: var(--purple-deep); }
.prs-tp.tp-3 { background: var(--lilac-t); color: var(--lilac-deep); }
.prs-tp.pulse { background: var(--pink-t); color: var(--pink-deep); }
.prs-tp.hold { background: var(--coral-t); color: var(--coral-deep); }
.prs-sq small { font-size: 13px; color: var(--lp-mid); }
/* cues beside the squares (her picks on studies/square-cues-studies.html, 2026-11-06): the square as today on the left, its cue down the right, a line a sentence */
.prs-a { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.prs.cues .prs-in { grid-template-columns: repeat(auto-fill, minmax(356px, 1fr)); }
.prs.cues .prs-sq { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 16px; align-items: start; }
.prs-cue { display: grid; gap: 4px; padding-top: 4px; min-width: 0; font-family: var(--fu); font-weight: 400; font-size: 15px; line-height: 1.4; color: var(--lp-ink); text-wrap: pretty; }
.prs-cue span { position: relative; padding-left: 16px; }
.prs-cue span::before { content: ""; position: absolute; left: 3px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--lp-mut); }
.pr-cp { margin-left: 2px; }
.prs-now { position: absolute; top: 8px; left: 8px; font-size: 12px; font-weight: 800; color: var(--lp-ink); background: var(--pink); border-radius: 999px; padding: 2px 9px; }
@media (max-width: 640px) { .prs-in { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 12px; } .prs-sq b { font-size: 15px; } }
/* Squares on a phone (2026-10-21, her words: "the scrolling is werid ...
   don't need it to "play" things so take that part off; the goal is to be
   albe to see al hte moves from just looking at the screen"): no playing
   bar, one scroll (the page's), more squares across */
@media (max-width: 860px) {
  .pr-page.is-sq .pr-trans { display: none; }
  .cp-head + .pr-page.is-sq { height: auto; min-height: 0; }
  .cp-head + .pr-page.is-sq .pr-list.prs, .pr-page.is-sq .pr-list.prs { height: auto; min-height: 0; flex: none; overflow: visible; box-shadow: none; border-radius: 0; background: none; }
  .pr-page.is-sq .prs-in { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 4px 0 24px; }
}
@media (max-width: 640px) {
  .pr-page.is-sq .prs-in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pr-page.is-sq .prs-sq { padding: 6px; gap: 5px; border-radius: 12px; }
  .pr-page.is-sq .prs-fg { padding: 6%; border-radius: 8px; }
  .pr-page.is-sq .prs-sq b { font-size: 13px; }
  .pr-page.is-sq .prs-tp { font-size: 11px; padding: 2px 7px; border-radius: 8px; }
  .pr-page.is-sq .prs-sq small { font-size: 11px; }
  .pr-page.is-sq .prs-bh b { font-size: 16px; }
}
/* Practice on a phone: Card · List · Lyrics · Squares get their own row, so
   the class name isn't cut to a few letters */
@media (max-width: 700px) {
  .cp-head.one:has(.pr-views) .cp-tools { order: 6; width: 100%; align-self: auto; }
  .cp-head.one:has(.pr-views) .pr-views { width: 100%; display: flex; }
  .cp-head.one:has(.pr-views) .pr-views button { flex: 1; }
}
/* Squares on a phone held sideways (2026-10-21, her words: "sideways still
   too large"): smaller squares, more across, so more moves show at once */
@media (orientation: landscape) and (max-height: 500px) {
  .pr-page.is-sq .prs-in { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .pr-page.is-sq .prs-sq { padding: 6px; gap: 4px; border-radius: 12px; }
  .pr-page.is-sq .prs-fg { padding: 6%; border-radius: 8px; }
  .pr-page.is-sq .prs-sq b { font-size: 13px; }
  .pr-page.is-sq .prs-tp { font-size: 11px; padding: 2px 7px; border-radius: 8px; }
  .pr-page.is-sq .prs-sq small { font-size: 11px; }
  .pr-page.is-sq .prs-bh { padding-top: 2px; }
  .pr-page.is-sq .prs-bh b { font-size: 15px; }
}
/* Practice on a phone: the List, to read, not to play (2026-10-22, her
   words: "for phone it woould be helpful to see lyrics, and move and verse
   for one view. maybe make it the list view again?"): no playing bar, the
   page scrolls, each row the time and part, the figure, the move with its
   tempo and side, and the lyric you change on */
@media (max-width: 860px) {
  .pr-page.is-ph .pr-trans { display: none; }
  .cp-head + .pr-page.is-ph { height: auto; min-height: 0; }
  .cp-head + .pr-page.is-ph .pr-list, .pr-page.is-ph .pr-list { height: auto; min-height: 0; flex: none; overflow: visible; }
  .pr-page.is-ph .pr-row { grid-template-columns: 62px 44px minmax(0, 1fr); gap: 10px; min-height: 0; padding: 12px 14px; align-items: start; }
  .pr-page.is-ph .pr-rc { display: none; }
  .pr-page.is-ph .pr-rt b { font-size: 16px; }
  .pr-page.is-ph .pr-rt span { font-size: 13px; white-space: normal; }
  .pr-page.is-ph .pr-rf svg { width: 44px; height: 44px; }
  .pr-page.is-ph .pr-rn b, .pr-page.is-ph .pr-row.on .pr-rn b { font-size: 18px; }
  .pr-page.is-ph .pr-row .pr-pill, .pr-page.is-ph .pr-row.on .pr-pill { min-height: 28px; padding: 0 10px; font-size: 14px; }
  .pr-page.is-ph .pr-rn small { font-size: 15px; color: var(--lp-ink); margin-top: 6px; }
  .pr-page.is-ph .pr-row.on { background: none; }
  .pr-page.is-ph .pr-rf { display: inline-flex; background: var(--tint); border-radius: 10px; padding: 2px; }
  .pr-page.is-ph .pr-list { width: 100%; }
  .pr-page.is-ph .pr-row.on .pr-pill { background: var(--lp-inset); }
  .pr-page.is-ph .pr-row.on .pr-pill.side { background: var(--blue-t); }
}
/* Practice List: a song heads its moves (2026-10-22) */
.pr-sh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 18px 24px 8px; border-bottom: 1px solid var(--lp-line); background: #fff; }
.pr-sh b { font-family: var(--fd); font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.pr-sh span { font-size: 14px; color: var(--lp-mid); }
@media (max-width: 860px) { .pr-sh { padding: 16px 14px 8px; } .pr-sh b { font-size: 18px; } }

/* ---------- the home (her pick on studies/welcome-3-studies.html, 2026-10-23):
   "What would you like to do?" as a large list, a moving figure on each row.
   Big words on hairlines; no cards. ---------- */
.home { max-width: 820px; padding-top: 64px; }
.hm-q { font-family: var(--fd); font-weight: 800; font-size: 40px; letter-spacing: -.025em; line-height: 1.08; margin-bottom: 26px; }
.hm-list { list-style: none; margin: 0; padding: 0; }
.hm-list li + li { border-top: 1px solid var(--lp-line); }
.hm-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 24px; gap: 22px; align-items: center; width: 100%; padding: 16px 14px; margin: 0 -14px; border-radius: 16px; text-align: left; cursor: pointer; transition: background-color .15s; box-sizing: content-box; }
.hm-row:hover { background: var(--lp-inset); }
.hm-fig { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; padding: 8px; box-sizing: border-box; }
.hm-fig svg { width: 100%; height: 100%; display: block; }
.hm-w b { display: block; font-family: var(--fd); font-weight: 700; font-size: 27px; letter-spacing: -.015em; line-height: 1.15; color: var(--lp-ink); }
.hm-w span { display: block; font-size: 15px; color: var(--lp-mut); margin-top: 3px; }
.hm-ar { width: 22px; height: 22px; color: var(--lp-mut); transition: transform .15s, color .15s; }
.hm-ar svg { width: 100%; height: 100%; display: block; }
.hm-row:hover .hm-ar { color: var(--lp-ink); transform: translateX(3px); }
.hm-ex { margin-top: 26px; font-size: 15px; color: var(--lp-mut); }
.hm-ex a { color: var(--lp-ink); text-underline-offset: 3px; text-decoration-color: var(--lp-line2); }
.hm-ex a:hover { text-decoration-color: var(--pink); }
@media (prefers-reduced-motion: reduce) { .hm-row, .hm-ar { transition: none; } .hm-row:hover .hm-ar { transform: none; } }
@media (max-width: 600px) {
  .home { padding-top: 32px; }
  .hm-q { font-size: 30px; margin-bottom: 14px; }
  .hm-row { grid-template-columns: 58px minmax(0, 1fr) 18px; gap: 14px; padding: 12px 10px; margin: 0 -10px; }
  .hm-fig { width: 58px; height: 58px; padding: 6px; }
  .hm-w b { font-size: 21px; }
  .hm-w span { font-size: 13.5px; }
}
/* three places in the bar now (Home, Classes, Move Library): on a phone they
   stay on one line */
@media (max-width: 600px) {
  .lp-bar nav a { white-space: nowrap; padding-left: 7px; padding-right: 7px; font-size: 14px; }
}

/* ---------- the settled home (studies/page-direction-3-studies.html, "No icons", 2026-10-23) ---------- */
/* full width to the right (2026-10-26: "lets make sure its full width to the right") */
.hm { display: grid; grid-template-columns: minmax(0, 1fr) 540px; max-width: none; padding: 0; }
.hm-l { padding: 44px 48px 80px 32px; min-width: 0; }
.hm-r { border-left: 1px solid var(--lp-line); padding: 40px 28px 80px; display: grid; align-content: start; gap: 40px; }
.hm-kick { font-size: 14px; font-weight: 700; color: var(--pink-deep); margin: 0; }
.hm-name { font-family: var(--fd); font-weight: 800; font-size: 54px; line-height: 1.02; letter-spacing: -.035em; margin: 10px 0 10px; overflow-wrap: anywhere; }
.hm-meta { font-size: 15px; font-weight: 600; color: var(--lp-mid); margin: 0; }
.hm-rib { display: flex; gap: 3px; height: 26px; margin-top: 24px; }
.hm-rib i, .hm-crow .rb i { background: var(--c, var(--lp-inset)); border-radius: 7px; min-width: 4px; }
.hm-rib i.pale, .hm-crow .rb i.pale { background: var(--lp-inset); }
.hm-acts { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.hm-btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; border-radius: var(--r-pill); font-weight: 700; font-size: 16px; background: var(--lp-inset); color: var(--lp-ink); text-decoration: none; transition: background-color .15s, transform .12s; }
.hm-btn.pk { background: var(--pink); }
.hm-btn:hover { background: var(--lp-line); } .hm-btn.pk:hover { background: #FF77BA; }
.hm-btn:active { transform: scale(.98); }
.hm-classes { margin-top: 48px; }
.hm-lh { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.hm-lh h2 { font-family: var(--fd); font-weight: 700; font-size: 24px; margin: 0; }
.hm-sort { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 14px; border-radius: var(--r-pill); background: var(--lp-inset); font-size: 13.5px; font-weight: 600; color: var(--lp-mid); cursor: pointer; }
.hm-sort select { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; color: var(--lp-ink); padding: 0 16px 0 0; margin-right: -16px; cursor: pointer; height: 100%; }
.hm-sort select:focus-visible { outline: none; box-shadow: none; }
.hm-sort:has(select:focus-visible) { box-shadow: var(--focus); }
.hm-sort svg { width: 12px; height: 12px; pointer-events: none; }
.hm-crow { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 4px; align-items: center; margin: 0 -12px; padding-right: 4px; border-bottom: 1px solid var(--lp-line); transition: background-color .15s; }
.hm-crow .go { display: grid; grid-template-columns: minmax(0, 1fr) 200px 64px; gap: 18px; align-items: center; min-height: 68px; padding: 8px 4px 8px 12px; color: var(--lp-ink); text-decoration: none; }
.hm-crow .pn svg { width: 15px; height: 15px; margin-right: 6px; vertical-align: -1px; color: var(--pink-deep); }
.hm-crow.arch b, .hm-crow.arch .m { color: var(--lp-mid); }
.hm-more { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--lp-mid); opacity: 0; transition: opacity .15s, background-color .15s; }
.hm-more svg { width: 18px; height: 18px; }
.hm-more:hover { background: var(--lp-line); color: var(--lp-ink); }
.hm-crow:hover .hm-more, .hm-more:focus-visible, .hm-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .hm-more { opacity: 1; } }
.hm-pop { width: 220px; }
.hm-arch-b { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; min-height: 40px; padding: 0 2px; font-size: 14px; font-weight: 700; color: var(--lp-mid); }
.hm-arch-b svg { width: 12px; height: 12px; transition: transform .15s; }
.hm-arch-b[aria-expanded="true"] svg { transform: rotate(180deg); }
.hm-arch-b:hover { color: var(--lp-ink); }
.cl-row.arch .cl-name { color: var(--lp-mid); }
.hm-crow:hover { background: var(--lp-inset); }
.hm-crow .nm { min-width: 0; }
.hm-crow b { display: block; font-family: var(--fd); font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-crow small { display: block; font-size: 13px; font-weight: 600; color: var(--lp-mid); margin-top: 2px; }
.hm-crow .rb { display: flex; gap: 3px; height: 9px; }
.hm-crow .rb i { border-radius: 3px; min-width: 3px; }
.hm-crow .m { font-size: 13.5px; font-weight: 600; color: var(--lp-mid); text-align: right; }
.hm-all { display: inline-block; margin-top: 16px; font-weight: 700; font-size: 14px; color: var(--lp-ink); }
.hm-hh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.hm-hh h2 { font-family: var(--fd); font-weight: 700; font-size: 22px; margin: 0; white-space: nowrap; }
.hm-hh > span { font-size: 13.5px; font-weight: 600; color: var(--lp-mid); }
.hm-none { font-style: italic; font-size: 14.5px; line-height: 1.5; color: var(--lp-mid); margin: 10px 0 0; }
.hm-deck { position: relative; perspective: 900px; margin-top: 14px; }
.hm-deck .under { position: absolute; inset: 10px 10px -10px; border-radius: 18px; background: var(--lp-inset); }
/* the front wears its block's color, the next card's peeks under it (her
   pick, studies/flashcard-color-studies.html, 2026-10-24: "might be hard to
   read so just be mindful"). Ink words on every fill (4.58:1 or better);
   purple a shade lighter for that; pink stays a tint, never a big fill */
.hm-card .front[class*=" c-"], .hm-deck .under[class*=" c-"] { background: var(--c); }
.hm-card .front[class*=" c-"] { box-shadow: none; }
.hm-card .front.c-arms, .hm-deck .under.c-arms { --c: var(--purple-fill); }
.hm-card .front.c-burn, .hm-deck .under.c-burn { --c: var(--pink-t); }
/* round 2, her pick C: the card's own deep shade as its thickness, and the
   next card (never the same color) under that. Solid fills, no blur */
.hm-deck .under { inset: 20px 16px -20px; }
.hm-deck .edge { position: absolute; inset: 7px 0 -7px; border-radius: 18px; background: var(--lp-line2); }
.hm-deck .edge[class*=" c-"] { background: var(--cd); }
.hm-deck .edge.c-burn { background: var(--pink); }
.hm-deck.flipped .edge { background: var(--lp-mid); }
.hm-card .front[class*=" c-"] .fg { background: #fff; }
.hm-card .front[class*=" c-"] .ask, .hm-card .front[class*=" c-"] .tap { color: var(--lp-ink); font-weight: 600; }
/* where the cards come from: one pill, a short list (her pick) */
.fc-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; max-width: 220px; padding: 0 12px 0 14px; border-radius: var(--r-pill); background: var(--lp-inset); font-size: 13.5px; font-weight: 600; color: var(--lp-ink); }
.fc-pill::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.fc-pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-pill svg { flex: none; width: 12px; height: 12px; }
.fc-pill:hover, .fc-pill[aria-expanded="true"] { background: #EDEDEA; }
.fc-pop { width: 280px; max-height: min(380px, 60vh); overflow-y: auto; padding: 6px; }
.fc-pop .it { min-height: 40px; font-weight: 500; }
.fc-pop .it span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-conf { gap: 8px; padding: 0 12px 0 14px; }
.fc-conf i { flex: none; position: relative; width: 28px; height: 17px; border-radius: 999px; background: var(--lp-line2); }
.fc-conf i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform .12s ease-out; }
.fc-conf[aria-pressed="true"] i { background: var(--lp-ink); }
.fc-conf[aria-pressed="true"] i::after { transform: translateX(11px); }
.fc-conf:hover { background: #EDEDEA; }
.fc-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.fc-tg { position: relative; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--lp-inset); font-size: 13.5px; font-weight: 600; color: var(--lp-mid); }
.fc-tg::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
.fc-tg:hover { background: #EDEDEA; color: var(--lp-ink); }
.fc-tg[aria-pressed="true"] { background: var(--lp-ink); color: #fff; }
@media (prefers-reduced-motion: reduce) { .fc-conf i::after { transition: none; } }
.fc-pop .it i { flex: none; width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--lp-mut); }
.fc-pop .it[aria-checked="true"] i { background: var(--lp-ink); box-shadow: none; }
.fc-pop .it.sub { padding-left: 34px; }
/* not the right move: a ? in the card's corner, its own 44px spot above the
   card (her pick); it never flips the card */
.fc-help { position: absolute; z-index: 3; top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.fc-help span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--lp-mid); font-weight: 700; font-size: 14px; }
.hm-deck:not(.tinted):not(.flipped) .fc-help span { background: var(--lp-inset); }
.fc-help:hover span, .fc-help[aria-expanded="true"] span { color: var(--lp-ink); }
.fc-help:focus-visible { box-shadow: none; }
.fc-help:focus-visible span { box-shadow: var(--focus); }
.fc-hbox { margin-top: 34px; background: var(--lp-inset); border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.fc-hq { font-size: 14px; font-weight: 700; }
.fc-hch { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-hch button { font-size: 13.5px; font-weight: 600; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: #fff; color: var(--lp-mid); }
.fc-hch button[aria-pressed="true"] { background: var(--lp-ink); color: #fff; }
.fc-hbox textarea { width: 100%; border: 0; background: #fff; border-radius: 10px; padding: 9px 12px; font-size: 15px; line-height: 1.45; resize: vertical; min-height: 60px; }
.fc-ha { display: flex; gap: 8px; }
.hm-card { position: relative; display: grid; width: 100%; min-height: 250px; padding: 0; border: 0; background: none; text-align: left; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.23, 1, .32, 1); cursor: pointer; border-radius: 18px; }
.hm-card.flip { transform: rotateY(180deg); }
.hm-card .face { grid-area: 1 / 1; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 18px 20px; }
.hm-card .front { background: #fff; box-shadow: inset 0 0 0 1px var(--lp-line2); display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: center; }
.hm-card .fg { width: 110px; height: 130px; border-radius: 14px; background: var(--teal-t); display: grid; place-items: center; }
.hm-card .fw { display: grid; gap: 6px; min-width: 0; }
.hm-card .fw b { font-family: var(--fd); font-weight: 700; font-size: 22px; line-height: 1.12; overflow-wrap: anywhere; }
.hm-card .ask { font-size: 15px; color: var(--lp-mid); }
.hm-card .tap { font-size: 12.5px; color: var(--lp-mut); }
.hm-card .back { background: var(--lp-ink); color: #fff; transform: rotateY(180deg); display: grid; align-content: safe center; gap: 8px; max-height: 620px; overflow: auto; padding: 22px 22px; }
.hm-card .back small { font-size: 12.5px; font-weight: 700; color: #FF9ACB; }
.hm-card .back .q { font-family: var(--fd); font-weight: 700; font-size: 20px; line-height: 1.28; white-space: pre-line; overflow-wrap: anywhere; }
.hm-card .back .q.m { font-size: 17px; line-height: 1.38; }
.hm-card .back .pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 15.5px; font-weight: 500; line-height: 1.45; }
.hm-card .back .pts li { position: relative; padding-left: 16px; }
.hm-card .back .pts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #FF9ACB; }
.lp-confetti { position: fixed; z-index: 300; width: 0; height: 0; pointer-events: none; }
.lp-confetti i { position: absolute; left: -3px; top: -4px; width: 6px; height: 9px; border-radius: 2px; }
.hm-card .back .w { font-size: 13px; color: #CFCAC4; }
.hm-deckbar { display: flex; align-items: center; gap: 8px; margin-top: 38px; }
.hm-deckbar .btn { min-height: 40px; }
.hm-deckbar .prog { flex: 1 1 0; min-width: 0; height: 4px; border-radius: 4px; background: var(--lp-line); overflow: hidden; margin-left: 4px; }
.hm-deckbar .prog i { display: block; height: 100%; background: var(--lp-ink); transform-origin: left; transition: transform .25s cubic-bezier(.23, 1, .32, 1); }
.hm-deckbar small { font-size: 12.5px; font-weight: 600; color: var(--lp-mid); white-space: nowrap; }
/* back and forth through the deck, beside where you are in it */
.fc-nav { display: inline-flex; align-items: center; gap: 2px; }
.fc-nav small { min-width: 52px; text-align: center; }
.fc-nav button { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--lp-ink); }
.fc-nav button::after { content: ""; position: absolute; inset: -4px; }
.fc-nav button svg { width: 14px; height: 14px; }
.fc-nav button:hover { background: var(--lp-inset); }
.fc-nav button:disabled { color: var(--lp-mut); background: none; cursor: default; }
/* the key for each, a step lighter than its word */
.fc-key { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 8px; margin-right: -4px; padding: 0 4px; border-radius: 6px; background: #fff; font-size: 11.5px; font-weight: 700; color: var(--lp-mid); }
.fc-set { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* no keyboard, no key letters */
@media (hover: none) { .fc-key { display: none; } }
.fc-fun svg { width: 13px; height: 13px; color: var(--lp-mut); }
.fc-fun[aria-pressed="true"] svg { color: var(--pink); }
.fc-fun[aria-pressed="false"] span { color: var(--lp-mid); }
.fc-fun:hover { background: #EDEDEA; }
.hm-done { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 22px 20px; border-radius: 18px; background: var(--lp-inset); }
.hm-done b { font-family: var(--fd); font-size: 18px; }
.lp-bar .hm-new svg { width: 13px; height: 13px; }
.lp-bar .hm-bring, .lp-bar .hm-new { margin-right: 6px; }
.hm-card .back small.lib { color: #CFCAC4; }
@media (prefers-reduced-motion: reduce) { .hm-card { transition: none; } .hm-more, .hm-arch-b svg { transition: none; } .hm-deckbar .prog i, .hm-btn, .hm-crow { transition: none; } }
@media (max-width: 960px) {
  .hm { grid-template-columns: minmax(0, 1fr); }
  .hm-r { border-left: 0; border-top: 1px solid var(--lp-line); padding: 36px 32px 72px; }
  .hm-l { padding-bottom: 40px; }
}
@media (max-width: 600px) {
  .hm-l { padding: 28px 16px 32px; }
  .hm-r { padding: 32px 16px 64px; }
  .hm-name { font-size: 40px; }
  .hm-crow .go { grid-template-columns: minmax(0, 1fr) 56px; row-gap: 8px; }
  .hm-crow .rb { grid-column: 1 / -1; grid-row: 2; }
  .hm-btn { flex: 1; }
  .lp-bar .hm-bring, .lp-bar .hm-new { display: none; }
}

/* a long move name wraps inside its chip instead of running past the panel (2026-10-24, her screenshot: "also errors here") */
.bb-sd-v { min-width: 0; }
.bb-sd-v .bb-chip.mv { max-width: 100%; white-space: normal; border-radius: 16px; }
.bb-sd-v .bb-chip.mv .bb-chip-b { min-width: 0; text-align: left; line-height: 1.25; padding-top: 5px; padding-bottom: 5px; border-radius: 14px; }
.bb-sd-v .bb-chip.mv .f, .bb-sd-v .bb-chip.mv .bb-chip-x { flex: none; align-self: center; }

/* the flashcard's words on the figure (studies/flashcard-diagram-studies.html, 2026-10-24) */
.hm-dia { position: relative; display: block; height: 150px; border-radius: 14px; background: var(--teal-t); overflow: hidden; }
.hm-dia > svg.lpf { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-dia .dl { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-dia .dl line { stroke: var(--lp-ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .45; }
.hm-dia .jd { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px #fff; }
.hm-dia .jl { position: absolute; transform: translateY(-50%); font-size: 11.5px; font-weight: 700; line-height: 1.2; color: var(--lp-ink); background: #fff; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

/* A phone inside a class: the class gets the screen (2026-10-24, her words,
   again: "the whole Home, Classes, Move Library, and then Block Sketches are
   blocking everything, so I can't really see anything"). The top bar goes
   (the back arrow still returns to Classes), Print goes (nobody prints from
   a phone), the head is tighter, and Blocks and the Guide scroll as one page
   sideways too. Laptop unchanged. */
@media (max-width: 860px) and (pointer: coarse) {
  body:has(.cp-head) .lp-bar { display: none; }
  .cp-tools [data-act="print"], .cp-tools [data-act="print-guide"], .cp-tools [data-act="sk-print"] { display: none; }
  .cp-head.one { padding: 6px 12px 10px; row-gap: 6px; }
  .bk-wrap.bb > .scroll, .bk-wrap.bb:not(.with-lib) > .scroll { height: auto; overflow: visible; }
  body:has(.bb-main) .libpanel { top: 0; }
  .scroll:has(> .guide) { height: auto !important; overflow: visible; }
}

/* adjustments, modifications, amplifications on the cue card: each its own
   lighter panel on the ink face (her pick "A lighter panel", 2026-10-25) */
.hm-card .back .adj { display: grid; gap: 4px; background: #2C2622; border-radius: 12px; padding: 10px 14px 11px; }
.hm-card .back .adj .al { font-size: 12.5px; font-weight: 700; color: #BDB6F0; }
.hm-card .back .adj .aw { display: grid; gap: 3px; }
.hm-card .back .adj .ai { position: relative; padding-left: 18px; font-size: 15px; font-weight: 500; line-height: 1.4; color: #fff; }
.hm-card .back .adj .ai::before { content: ""; position: absolute; left: 2px; top: .66em; width: 9px; height: 1.5px; background: #BDB6F0; }
.hm-card .back .adj .ai::after { content: ""; position: absolute; left: 6px; top: calc(.66em - 3px); width: 5px; height: 5px; border-right: 1.5px solid #BDB6F0; border-bottom: 1.5px solid #BDB6F0; transform: rotate(-45deg); }
.hm-card .back:has(.adj) { max-height: 600px; }
.hm-card .back .adj + .adj { margin-top: 2px; }

/* Watch for on the cue card: what goes wrong, the fix, and a small picture
   when the figure can show it (her pick "Watch for", 2026-10-25) */
.hm-card .back .adj.wf .al { color: #F5C800; }
.hm-card .back .adj.wf .aw { gap: 8px; }
.hm-card .back .wr { display: grid; gap: 1px; }
.hm-card .back .wr.pic { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.hm-card .back .wt { position: relative; width: 52px; height: 52px; border-radius: 9px; background: #fff; overflow: hidden; }
.hm-card .back .wt svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-card .back .wt .lpf-ghost { display: none; }
.hm-card .back .wm { display: grid; gap: 1px; min-width: 0; }
.hm-card .back .wm b { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.hm-card .back .wm span { font-size: 14px; line-height: 1.35; color: #CFCAC4; }

/* the card's figures as a fine line drawing on white, thinner limbs, no
   colored part (her pick "Line drawing", studies/flashcard-figure-look-studies.html,
   2026-10-25: "the little dude is kind of ugly with the background color;
   the red leg; can we make the dude lines lighter?"). The card only */
.hm-card .fg { background: var(--lp-inset); }
.hm-card .hm-dia { background: #fff; }
.hm-card .hm-dia .jl { background: var(--lp-inset); }
/* (a People or Bean skin keeps its own fills: the line drawing is the Classic figure's) */
.hm-card svg.lpf:not([data-lpf-skin]) .lpf-body path { fill: #fff !important; stroke: var(--lp-ink) !important; stroke-width: 1.3px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hm-card svg.lpf:not([data-lpf-skin]) .lpf-body path[fill="#9A918A"], .hm-card svg.lpf:not([data-lpf-skin]) .lpf-body path[fill="#BDB6AF"], .hm-card svg.lpf:not([data-lpf-skin]) .lpf-body path[fill*="-far,"] { stroke: #A8A098 !important; }
.hm-card .lpf-ghost path { fill: none !important; stroke: var(--lp-line2) !important; stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* ---------- Practice: Count me in and Tap the 1 (her pick B on
   studies/practice-tap-studies.html, 2026-10-25): Play stays pink, the two
   taps soft beside it, Find my place a small link ---------- */
.pr-tp .pr-tap { padding: 0 18px; }
.pr-tp .pr-cin.hit { animation: prHit .18s ease-out; }
.pr-tapw .pr-fmp { min-height: 44px; padding: 0 6px; border-radius: 8px; font: 600 14px var(--fu); color: var(--lp-mid); text-decoration: underline; text-decoration-color: var(--lp-line2); text-underline-offset: 4px; white-space: nowrap; }
.pr-tapw .pr-fmp:hover, .pr-tapw .pr-fmp[aria-expanded="true"] { color: var(--lp-ink); text-decoration-color: currentColor; }
.pr-tapw .pr-fmp:focus-visible { outline: none; box-shadow: var(--focus); }
/* counting in: one light runs 8 to 2, the rest faint, the 1 not yet pink */
.pr-eight.cin span, .pr-eight.cin span.n { color: color-mix(in srgb, var(--lp-ink) 24%, transparent); box-shadow: none; }
.pr-eight.cin span.on { color: var(--lp-ink); box-shadow: inset 0 -5px 0 var(--lp-ink); }
.pr-under .pr-eight.cin span, .pr-under .pr-eight.cin span.n { color: rgba(255, 255, 255, .28); box-shadow: none; }
.pr-under .pr-eight.cin span.on { color: #fff; box-shadow: inset 0 -5px 0 #fff; }
.is-studio .pr-tp .pr-tap { background: rgba(255, 255, 255, .12); color: #fff; }
.is-studio .pr-tp .pr-tap:hover { background: rgba(255, 255, 255, .22); }
.is-studio .pr-tp .pr-tapw .pr-fmp { color: #E8E4DF; text-decoration-color: rgba(255, 255, 255, .35); }
.is-studio .pr-tp .pr-tapw .pr-fmp:hover, .is-studio .pr-tp .pr-tapw .pr-fmp[aria-expanded="true"] { color: #fff; }
@media (prefers-reduced-motion: reduce) { .pr-tp .pr-cin.hit { animation: none; } }

/* the card's extras fold up and unfold on a press (2026-10-25: "maybe it unfolds?") */

@keyframes fc-unfold { from { opacity: 0; transform: translateY(-4px); } }
.fc-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 26px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--lp-inset); font-size: 13.5px; font-weight: 600; color: var(--lp-ink); }
.fc-more[hidden] { display: none; }
.fc-more svg { width: 12px; height: 12px; transition: transform .18s ease-out; }
.fc-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.fc-more:hover { background: #EDEDEA; }
@media (prefers-reduced-motion: reduce) { .hm-card.more .back .adj { animation: none; } .fc-more svg { transition: none; } }

/* Practice's transport, her pick A (studies/practice-tap-studies.html,
   2026-10-28): Count me in is the pink; Play turns soft and keeps its place.
   And the 3 and 4 of the 8-count in blue, as she chose in welcome round 5
   ("Remember the 3 and 4 are different colors") */
.pr-play.soft { width: 48px; height: 48px; background: var(--lp-inset); }
.pr-play.soft:hover { background: var(--lp-line); }
.pr-play.soft svg { width: 21px; height: 21px; }
.pr-tap.pr-cin.pink, .pr-tapw .pr-tap.pr-cin.pink { background: var(--pink); color: var(--lp-ink); font-weight: 700; }
.pr-tap.pr-cin.pink:hover { background: #FF4AA3; }
.is-studio .pr-tp .pr-play.soft { background: rgba(255, 255, 255, .12); color: #fff; }
.is-studio .pr-tp .pr-play.soft:hover { background: rgba(255, 255, 255, .22); }
.is-studio .pr-tp .pr-tap.pr-cin.pink { background: var(--pink); color: var(--lp-ink); }
.pr-eight span.b34, .pr-eight span.b34.past, .pr-eight span.b34.on { color: var(--blue-deep); }
.pr-eight span.b34.on { box-shadow: inset 0 -5px 0 var(--blue-deep); }
.pr-under .pr-eight span.b34, .pr-under .pr-eight span.b34.past, .pr-under .pr-eight span.b34.on { color: color-mix(in srgb, var(--blue) 65%, #fff); }
.pr-under .pr-eight span.b34.on { box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--blue) 65%, #fff); }
/* on the 3 or the 4 (2026-10-30, her words: "when it goes ON the 3 is when it turns a bright blue") */
.pr-under .pr-eight span.b34.on { color: #5CB2FF; box-shadow: inset 0 -5px 0 #5CB2FF; }
.pr-rc .pr-eight span.b34.on { box-shadow: inset 0 -3px 0 currentColor; }
.lib-ask.cp-note { margin-top: 6px; background: none; box-shadow: inset 0 0 0 1px var(--lp-line); }
.lib-ask.cp-note:hover { background: var(--lp-inset); }
.lib-ask.cp-note svg { color: var(--lp-mid); }
/* an empty block on Lyrics leads with Add a song (2026-10-28, her words: "I
   need to make it clear here that it's 'Add a song'"): a soft pill, Add a
   move plain beside it */
.fm-adds .addmove.fm-song { min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--lp-inset); color: var(--lp-ink); font-weight: 700; }
.fm-adds .addmove.fm-song:hover { background: var(--lp-line); }

/* ---------- where a move is done (2026-10-28, move-positions-studies) ----------
   A move's ways side by side on its page; the Position pills on the picked
   move; the tag beside the tempo */
.mp-ways { display: flex; gap: 6px; margin: 4px 0 14px; }
.mp-way { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 14px; font-weight: 600; font-size: 13px; color: var(--lp-mid); }
.mp-way:hover { background: var(--lp-inset); }
.mp-way.on { background: var(--lp-inset); color: var(--lp-ink); }
.mp-way .f { line-height: 0; }
.dp-pos button { display: inline-flex; align-items: center; gap: 5px; }
.dp-pos button svg { width: 15px; height: 15px; flex: none; color: var(--lp-mid); }
.dp-pos button.on svg { color: #fff; }
.tg.pos { background: var(--lp-inset); color: var(--lp-ink); }
/* a way to build on it, as a tag (2026-10-29) */
.tg.bld { background: var(--lilac-t); color: var(--lilac-deep); }
/* the move's page in a class: Add it as, Build on it. A + comes in on reach;
   the words step aside by transform only */
.mp-asr { gap: 6px; }
.mp-as { position: relative; display: inline-flex; align-items: center; background: var(--lp-inset); border-radius: 999px; padding: 4px 14px 4px 11px; min-height: 34px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--lp-ink); touch-action: manipulation; }
.mp-as svg { position: absolute; left: 8px; top: 50%; width: 10px; height: 10px; margin-top: -5px; opacity: 0; }
.mp-as:hover, .mp-as:focus-visible { background: var(--pink-t); }
.mp-as:hover svg, .mp-as:focus-visible svg { opacity: 1; }
.mp-as:hover span, .mp-as:focus-visible span { transform: translateX(6px); }
@media (prefers-reduced-motion: no-preference) { .mp-as svg { transition: opacity .15s ease-out; } .mp-as span { transition: transform .15s ease-out; } }
@media (hover: none) { .mp-as svg { opacity: 1; } .mp-as span { transform: translateX(6px); } }
@media (pointer: coarse) { .mp-as { min-height: 44px; } }
.mp-asr .tp-add { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 4px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--lp-mid); }
.mp-asr .tp-add:hover { color: var(--lp-ink); background: var(--lp-inset); }
.mp-asr .tp-add svg { width: 12px; height: 12px; }
.mp-asr .tp-in { font: 600 14px var(--fu); border: 0; border-radius: 999px; padding: 8px 14px; min-width: 170px; background: #fff; box-shadow: inset 0 0 0 1px var(--lp-ink); color: var(--lp-ink); }
.mp-asr .tp-in:focus { outline: none; }

/* her own words on a song with no lyrics (write-lyrics-studies.html, Both):
   click them to write, in place; paste the whole song from the nolyr line */
.ln .ly-w { cursor: text; }
.ln .ly-w:hover { text-decoration: underline; text-decoration-color: var(--lp-line2); text-underline-offset: 5px; }
.ln.writing { background: #fff; box-shadow: var(--focus); }
.ln .ly-in { display: block; width: 100%; font: inherit; font-style: normal; color: var(--lp-ink); line-height: inherit; background: none; border: 0; padding: 0; margin: 0; resize: none; overflow: hidden; outline: none; }
.ln .ly-in::placeholder { color: var(--lp-mut); font-style: italic; }
.ly-paste { margin: 8px 0 12px; background: var(--lp-inset); border-radius: 12px; padding: 12px; max-width: 560px; }
.ly-paste textarea { display: block; width: 100%; min-height: 140px; font: inherit; font-size: 15px; line-height: 1.55; color: var(--lp-ink); background: #fff; border: 0; border-radius: 8px; padding: 10px 12px; resize: vertical; }
.ly-paste textarea::placeholder { color: var(--lp-mut); font-style: italic; }
.ly-paste-b { display: flex; gap: 8px; margin-top: 10px; }
@media print { .ly-paste, .nolyr { display: none; } }

/* Focus: the top rows fold (studies/focus-studies.html; her picks: one slim
   row, beside Print, the arrows alone). html.lp-focus is set on class pages
   while it's on. The app bar goes; the class row keeps its name, tabs and
   View; on Lyrics a block's row joins its first song's (.slot-head.fx). */
:root { --barH: 60px; }
html.lp-focus { --barH: 0px; }
html.lp-focus .lp-bar { display: none; }
html.lp-focus .cp-head.one { padding-top: 6px; padding-bottom: 6px; }
html.lp-focus .cp-head.one .cp-name input.name { font-size: 17px; }
html.lp-focus .cp-head .cp-meta, html.lp-focus .cp-head .cp-props, html.lp-focus .cp-head .cp-dm,
html.lp-focus .cp-tools > .btn[data-act="print"], html.lp-focus .cp-tools > .btn[data-act="sk-print"], html.lp-focus .cp-tools > .btn[data-act="print-guide"] { display: none !important; }
.cp-fold { color: var(--lp-ink); }
.cp-fold[aria-pressed="true"], .cp-fold[aria-pressed="true"]:hover { background: var(--lp-ink); color: #fff; }
.cp-fold svg { width: 18px; height: 18px; }
.cp-fold[data-label]::after { right: 0; left: auto; }
html.lp-fx-anim .cp-head, html.lp-fx-anim .scroll { animation: lp-fx-in .18s ease-out; }
@keyframes lp-fx-in { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.lp-fx-anim .cp-head, html.lp-fx-anim .scroll { animation: none; } }

/* Lyrics, folded: the block and its first song on one line */
.slot-head.fx { top: 0; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--lp-line); min-width: 0; }
.slot-head.fx .fx-bk { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.slot-head.fx input.sname { font-family: var(--fd); font-weight: 700; font-size: 17px; letter-spacing: -.01em; border: 0; outline: none; background: none; padding: 2px 6px; margin-left: -6px; border-radius: 8px; field-sizing: content; min-width: 60px; max-width: 220px; color: var(--lp-ink); }
.slot-head.fx input.sname:hover { background: var(--lp-inset); }
.slot-head.fx input.sname:focus-visible { box-shadow: var(--focus); }
.slot-head.fx .btime { font-size: 13.5px; flex: none; }
.slot-head.fx .fx-sep { width: 1px; height: 22px; background: var(--lp-line2); flex: none; }
.slot-head.fx .cov { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; }
.slot-head.fx .s-tl2 { min-width: 0; flex: 0 1 auto; }
.slot-head.fx .s-tl2 small { display: none; }
.slot-head.fx .s-acts { gap: 2px; }
.slot-head.fx .s-reach { order: -1; }
/* the song's tools and the block's come on reach; a keyboard reaches them too */
.slot-head.fx .s-reach { display: inline-flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .12s ease-out; }
.slot-head.fx:hover .s-reach, .slot-head.fx:focus-within .s-reach, .slot-head.fx .s-reach:has(.pop, [aria-expanded="true"], [aria-pressed="true"]) { opacity: 1; }
@media (hover: none) { .slot-head.fx .s-reach { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .slot-head.fx .s-reach { transition: none; } }
.slot-head .s-reach { display: inline-flex; align-items: center; gap: 2px; }
.cp-saved { font-size: 13.5px; color: var(--lp-mut); white-space: nowrap; }
/* a move's versions on the picked move (2026-10-29, bear-versions-studies) */
.dp-ver .tp-add { background: none; color: var(--lp-mid); display: inline-flex; align-items: center; gap: 5px; }
.dp-ver .tp-add:hover { color: var(--lp-ink); background: var(--lp-inset); }
.dp-ver .tp-add svg { width: 13px; height: 13px; }
.dp-ver .tp-in { font: 600 14px var(--fu); border: 0; border-radius: 999px; padding: 8px 14px; min-width: 150px; background: #fff; box-shadow: inset 0 0 0 1px var(--lp-ink); color: var(--lp-ink); }
.dp-ver .tp-in:focus { outline: none; }
.dp-ver-add { margin-top: 6px; }

/* checking the song: the part choices sit in the highlighted lines' blue,
   and the Library steps aside until Done */
.libpanel.checking .dock-pop.pn-ctx.fixing { background: #D6E6F7; border-radius: 14px; padding: 14px 14px 16px; border-bottom: 0; }
.libpanel.checking .pn-ctx.fixing .dp-chips button { background: #fff; }
.libpanel.checking .pn-ctx.fixing .dp-chips button:hover { background: var(--blue-t); }
.libpanel.checking .pn-ctx.fixing .dp-chips button.on { background: var(--lp-ink); color: #fff; }
.libpanel.checking .chk-empty { margin: 8px 2px; font-size: 14.5px; color: var(--lp-mid); }
/* muted grey is just under AA on the blue: a step darker there */
.libpanel.checking .pn-ctx.fixing .dp-t small, .libpanel.checking .pn-ctx.fixing .dp-lab { color: var(--lp-mid); }

/* ---------- spooky (2026-10-30) ----------
   Her picks on studies/spooky-guide-*-studies.html: the Spooky pill and
   Light | Dark beside View; on the Guide and Practice; ghosts, squiggle
   dudes, bats, webs, a spider and sparkles only at the sides and in empty
   corners (app.js spkGuard leaves out any that would touch a word); Pumpkin
   bands; the beat you're on in pumpkin. Screen only: the printed Guide is
   the Guide as always. Motion is transform and opacity; reduced motion
   stills it. */
.spk-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-weight: 700; font-size: 14px; color: var(--lp-ink); background: var(--lp-inset); border-radius: var(--r-pill); padding: 7px 14px 7px 11px; white-space: nowrap; }
.spk-pill svg { width: 16px; height: 16px; flex: none; }
.spk-pill:hover { background: var(--lp-line); }
.spk-pill.on { background: var(--lp-ink); color: #fff; }
.spk-mode button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; }
.spk-mode .spk-i { display: none; width: 16px; height: 16px; }
@media (max-width: 1399px) {
  .spk-pill.on { padding: 0; width: 36px; justify-content: center; }
  .spk-pill.on .spk-w, .spk-mode .spk-w { display: none; }
  .spk-mode button { padding: 7px 9px; }
  .spk-mode .spk-i { display: block; }
}
@media screen {
  .spk .pr-card { position: relative; }
  .spk main.scroll > .guide { position: relative; z-index: 1; }
  .spk-fx { position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .pr-card > .spk-fx { bottom: 0; z-index: 2; }
  /* Practice's night sits behind the card, still in the window as it scrolls */
  .spk-bg { position: fixed; top: calc(var(--barH, 60px) + var(--headH, 69px)); bottom: 0; }
  .spk .pr-page > .pr-stage { position: relative; z-index: 1; }
  @media (min-width: 861px) { .spk .pr-page > .pr-trans { position: relative; z-index: 1; } }
  .spk-x { position: absolute; }
  .spk-night { display: none; }
  .spk-dark .spk-night { display: block; }
  .spk-x { transition: opacity .2s ease-out; }
  .spk-x.spk-off { opacity: 0; }
  .spk-moving .spk-fx { visibility: hidden; }
  .spk-x svg { display: block; overflow: visible; }
  .spk-web path { stroke: #CFCAD6; }
  .spk-face { animation: spk-bob var(--dur, 3.6s) ease-in-out var(--d, 0s) infinite alternate; }
  .spk-squig svg { animation: spk-wig 1.9s ease-in-out infinite alternate; transform-origin: 50% 18%; }
  .spk-eye { transform-box: fill-box; transform-origin: center; animation: spk-blink var(--bl, 5.5s) var(--bd, 0s) infinite; }
  .spk-pupil { transition: transform .12s ease-out; }
  .spk-bat { color: #2A2140; animation: spk-flit var(--dur, 7s) ease-in-out var(--d, 0s) infinite; }
  .spk-bat svg { animation: spk-flap .22s ease-in-out infinite alternate; transform-origin: 50% 40%; }
  .spk-spark { width: var(--s, 12px); height: var(--s, 12px); animation: spk-sparkle var(--dur, 2.8s) ease-in-out var(--d, 0s) infinite; }
  .spk-spark svg { width: 100%; height: 100%; }
  .spk-spider { animation: spk-dangle 3.6s ease-in-out infinite alternate; }
  .spk-spider i { display: block; width: 1px; height: 150px; margin: 0 auto; background: #B8B0A8; }
  .spk-spider svg { margin: -2px auto 0; }
  .spk-crawl { position: absolute; z-index: 3; pointer-events: none; color: #2A2140; will-change: transform; }
  .spk-dark .spk-crawl { color: #B7A8E0; }
  .spk-crawl svg { display: block; }
  .spk-legs-b { opacity: 0; }
  .spk-crawl .spk-legs-a { animation: spk-step .32s steps(1) infinite; }
  .spk-crawl .spk-legs-b { animation: spk-step .32s steps(1) -.16s infinite; }
  @keyframes spk-step { 0% { opacity: 1; } 50% { opacity: 0; } }
  .spk-star { width: 3px; height: 3px; border-radius: 50%; background: #FFF6DA; animation: spk-twinkle var(--dur, 2.4s) ease-in-out var(--d, 0s) infinite alternate; }
  .spk-moon { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #FFF9E6, #F1DD9E 72%); }
  .spk-moon i { position: absolute; border-radius: 50%; background: rgba(120, 96, 40, .12); }
  .spk-fog { position: fixed; left: 0; right: 0; bottom: -60px; height: 220px; background: radial-gradient(50% 50% at 30% 50%, rgba(196, 184, 232, .2), rgba(196, 184, 232, 0)), radial-gradient(45% 50% at 75% 60%, rgba(196, 184, 232, .16), rgba(196, 184, 232, 0)); animation: spk-drift 9s ease-in-out infinite alternate; }
  @keyframes spk-bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
  @keyframes spk-wig { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
  @keyframes spk-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
  @keyframes spk-flit { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(44px, -22px); } 50% { transform: translate(78px, 6px); } 75% { transform: translate(34px, 24px); } }
  @keyframes spk-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
  @keyframes spk-sparkle { 0%, 100% { transform: scale(.3) rotate(0deg); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
  @keyframes spk-dangle { from { transform: translateY(-40px); } to { transform: translateY(14px); } }
  @keyframes spk-twinkle { from { opacity: .25; } to { opacity: 1; } }
  @keyframes spk-drift { from { transform: translateX(-50px); } to { transform: translateX(50px); } }

  /* the Guide's bands: a pumpkin on the block, a ghost on each part */
  .spk .g-band .dot { width: 20px; height: 20px; background: none; }
  .spk .g-pband .spk-ic { display: inline-flex; vertical-align: -4px; margin-right: 8px; }
  .spk .g-pband .spk-ic svg { width: 22px; height: auto; }
  /* Pumpkin bands: warmer toward the Chorus, ink words */
  .spk .guide .g-pband { --bt: #FFE6D1; --bk: #4A2A12; background: var(--bt); box-shadow: none; }
  .spk .guide .g-pband.k-none { --bt: #FFF3E8; }
  .spk .guide .g-pband.k-pre { --bt: #FFCB9C; }
  .spk .guide .g-pband.k-bridge { --bt: #FFB877; }
  .spk .guide .g-pband.k-chorus { --bt: #FF8A3D; }
  .spk .guide .g-pband b { color: #1A1410; }
  /* pink turns pumpkin (2026-10-30, her words: "lets turn everything taht's
     pink into this orange in spooky mode"); the logo keeps its own pink.
     As text it's a deep pumpkin, 5.8:1 on white, 4.8:1 on its pale fill */
  html.spk { --pink: #FF8A3D; --pink-deep: #A84A08; --pink-t: #FFE6D1; --focus: 0 0 0 1px #fff, 0 0 0 3px #A84A08; }
  .spk .pr-play:hover, .spk .pr-tap.pr-cin.pink:hover { background: #F2782F; }
  /* Practice: the beat you're on, in pumpkin, the 3 and 4 too (bright on
     the ink band; on white the large digits take #E0620A, 3.6:1) */
  html.spk .pr-eight span.on:not(.b34), html.spk .pr-eight span.n.on:not(.b34) { color: #E0620A; box-shadow: inset 0 -5px 0 #E0620A; }
  html.spk .pr-under .pr-eight span.on:not(.b34), html.spk .pr-under .pr-eight span.n.on:not(.b34) { color: #FF8A3D; box-shadow: inset 0 -5px 0 #FF8A3D; }

  /* ---- Dark: the night ---- */
  html.spk-dark { --lp-ink: #F7F2FF; --lp-mid: #CFC6E0; --lp-mut: #ADA2C4; --lp-paper: #17112A; --lp-inset: #261E3C; --lp-line: rgba(255, 255, 255, .09); --lp-line2: rgba(255, 255, 255, .16); }
  html.spk-dark { --pink-deep: #FF9A4D; --pink-t: #3E2A1E; --focus: 0 0 0 1px #17112A, 0 0 0 3px #FF9A4D; }
  html.spk-dark .pr-eight span.on:not(.b34), html.spk-dark .pr-eight span.n.on:not(.b34) { color: #FF8A3D; box-shadow: inset 0 -5px 0 #FF8A3D; }
  html.spk-dark, html.spk-dark body { background: #17112A; }
  .spk-dark .lp-bar, .spk-dark .cp-head { background: #17112A; }
  .spk-dark .spk-pill.on { background: #F7F2FF; color: #1A1410; }
  .spk-dark .btn.pink { color: #1A1410; }
  .spk-dark .seg .on { background: #2E2546; box-shadow: none; }
  .spk-dark .spk-web path { stroke: rgba(255, 255, 255, .24); }
  .spk-dark .spk-bat { color: #6A5A96; }
  .spk-dark .spk-spider i { background: rgba(255, 255, 255, .35); }
  .spk-dark .g-band { background: #2A2140; }
  .spk-dark .guide .g-pband, .spk-dark .guide .g-pband.k-pre, .spk-dark .guide .g-pband.k-bridge { --bt: rgba(255, 255, 255, .06); --bk: var(--lp-mid); }
  .spk-dark .guide .g-pband.k-none { --bt: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
  .spk-dark .guide .g-pband.k-chorus { --bt: rgba(255, 138, 61, .2); }
  .spk-dark .guide .g-pband b { color: #FF9A4D; }
  .spk-dark .guide .g-at { color: #FFB676; }
  .spk-dark .guide .g-at b { color: var(--lp-ink); }
  .spk-dark .pr-card { background: #17112A; }
  .spk-dark .pr-now { background: #2A2140; }
  .spk-dark .pr-under { background: #0E0A1A; }
  .spk-dark .pr-nx.big { background: #23324A; }
  .spk-dark .pr-pill { background: #3A2E52; color: #FFC58A; }
  .spk-dark .pr-pill.side { background: #222F4A; color: #AFCDF0; }
  .spk-dark .pr-pill.chg { background: #F7F2FF; color: #1A1410; }
  .spk-dark .pr-tap.pr-cin.pink { color: #1A1410; }
}
@media screen and (prefers-reduced-motion: reduce) {
  .spk-fx, .spk-fx *, .spk-ic *, .spk-crawl * { animation: none !important; transition: none !important; }
}

/* 2026-11-01 audit: the search's placeholder reads AA on the inset fill (5.2:1) */
.ml-q input::placeholder, .lib-q input::placeholder { color: var(--lp-mut); }
/* a lyric line the keyboard is on */
.ln:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------- The cue card: person first (her pick on
   studies/flashcards-top-studies.html, 2026-11-07: "There's a lot of big space
   and not a lot of person right now"). The tile is most of the card, the words
   under it. The front no longer takes the back's height: the back only joins
   the layout once flipped, and grows to fit (her pick "The card grows") ---------- */
.hm-card { min-height: 0; }
.hm-card .front { align-self: start; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; }
.hm-card .fg { width: 100%; height: auto; aspect-ratio: 520 / 372; grid-template-rows: minmax(0, 1fr); border-radius: 8px; overflow: hidden; }
.hm-card .fg svg { display: block; width: auto; height: 86%; max-width: 100%; }
.hm-card .fw { gap: 4px; padding: 14px 52px 8px 10px; }
.hm-card .fw b { font-size: 28px; }
.hm-card .back, .hm-card .back:has(.adj) { max-height: none; overflow: visible; }
.hm-card .back .pts { font-size: 17px; gap: 9px; }
.hm-card:not(.flip) .back { position: absolute; inset: 0; overflow: hidden; }
/* the ? sits level with the name; on the back, in the corner, clear of the cue */
.hm-deck:not(.flipped) .fc-help { top: auto; bottom: 25px; right: 14px; }
@media (max-width: 480px) { .hm-card .fw b { font-size: 21px; } .hm-deck:not(.flipped) .fc-help { bottom: 20px; } }
/* the class's Flashcards tab: the deck alone, in the middle */
.fc-pg { box-sizing: border-box; width: 100%; max-width: 572px; margin: 0 auto; padding: 24px 16px 80px; }
.fc-pg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fc-pg-top .fc-from { min-width: 0; }
/* on the tab, the tile gives way so Got it stays on the screen */
.fc-pg .hm-card .fg { aspect-ratio: auto; height: clamp(240px, calc(100vh - 452px), 372px); }

/* the top bar on a phone (fresh-eyes audit, 2026-11-10): at 375 wide
   Notebook was cut off under Saved. Up to 420 wide the sock mark steps out
   (Home is the same door), the four places sit a little closer and Saved
   is tighter, so all four read on one line. Desktop unchanged. */
@media (max-width: 420px) {
  .lp-bar { padding: 0 12px; gap: 2px; }
  .lp-bar .brand { display: none; }
  .lp-bar nav { gap: 0; min-width: 0; }
  .lp-bar nav a { padding-left: 5px; padding-right: 5px; font-size: 13.5px; }
  .lp-bar nav a::after { left: 5px; right: 5px; }
  .lp-bar .svc-b { padding: 0 6px; margin-right: -6px; gap: 3px; }
}

/* the tabs in two groups, Plan and Practice (2026-11-10, fresh-path 01):
   a small word, then its tabs; the groups sit apart, no rule between */
.cp-tabs.cp-2g { display: flex; align-items: center; gap: 14px; }
.cp-tg { display: inline-flex; align-items: center; gap: 6px; }
.cp-tg .seg a { padding-left: 12px; padding-right: 12px; }
.cp-tl { font-size: 13px; color: var(--lp-mut); }
@media (max-width: 860px) and (pointer: coarse) { .cp-tabs a[data-v="sketch"], .cp-tabs a[data-v="plan"] { display: none; } }
@media (max-width: 700px) {
  .cp-tabs.cp-2g { flex-direction: column; align-items: stretch; gap: 8px; }
  .cp-tg { display: flex; }
  .cp-tl { flex: none; width: 64px; }
  .cp-tg .seg { flex: 1; display: flex; }
}

/* Build your own template, beside the starters (2026-11-10) */
.nc .nc-own { align-self: stretch; }
.nc-own-l { margin-top: 8px; font-size: 15px; font-style: italic; line-height: 1.45; color: var(--lp-mid); max-width: 34ch; }

/* an empty block shows its doors (2026-11-10, her pick on audit-studies 01):
   a first-timer sees where to begin; once a move lands they go back to
   showing on reach */
.bc.blank > .bc-foot.bb-reach { opacity: 1; }

/* the cue under the moves in a block (2026-11-10, audit-studies 03);
   View's Cues turns it off */
.bb-cues { list-style: none; margin: 10px 0 2px; padding: 0 2px; display: grid; gap: 8px; max-width: 70ch; }
.bb-cues li { font-size: 15px; line-height: 1.45; color: var(--lp-mid); }
.bb-cues b { font-weight: 600; color: var(--lp-ink); margin-right: 6px; }
@media print { .bb-cues { display: none; } }
.bb-row > .bb-cues { grid-column: 1 / -1; }
.bb-row.song > .bb-cues, .bb-row.part > .bb-cues { grid-column: 2 / -1; }

/* the Sketch's own suggestion row for a move being typed (2026-11-10,
   audit-studies 05): a hairline list under the field, no shadow */
.tgrid td.tg-mv { position: relative; }
.tgrid ul.tg-sug { position: absolute; left: 0; top: 100%; z-index: 30; min-width: 240px; margin: 2px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--lp-line2); border-radius: 10px; }
.tgrid .tg-sug li { list-style: none; margin: 0; padding: 8px 10px; border-radius: 6px; font-size: 15px; color: var(--lp-ink); cursor: pointer; white-space: nowrap; }
.tgrid .tg-sug li::marker { content: none; }
.tgrid .tg-sug li:hover { background: var(--lp-inset); }
.tgrid .tg-sug li[aria-selected="true"] { background: var(--pink-t); }
/* with the Cue column on, the Move column keeps room for a name */
.tgrid th.tg-h-move { width: 24%; }
.tgrid th.tg-h-cue { width: 24%; }

/* the move's card on Lyrics (2026-11-10, her pick on audit-studies 08):
   the title she settled, Gabarito 800 at 21; the cue plain text; no ring
   and no white card, so the move's colored block is the one filled shape.
   The figure stays on the move (her note: "i like having the image") */
.plan .pc .cue { background: none; box-shadow: none; padding-left: 4px; padding-right: 4px; }
.plan .pc .cue .mname { font-family: var(--fd); font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; color: var(--lp-ink); }
.plan .pc .cue .cue-tx { font-size: 15px; color: var(--lp-ink); background: none; }

/* the outline's type (2026-11-10, her pick on audit-studies 09, "Names 15,
   times 13"): on the scale, nothing you read under 15 */
.ol-b .nm { font-size: 15px; }
.ol-s, .ol-p, .ol-add { font-size: 15px; }
.ol-b .mn, .ol-p .mn, .ol-s .mn, .ol-len, .ol-spare { font-size: 13px; }

/* buttons under the pointer (2026-11-10, her pick on audit-studies 10 with
   her note on the darker shade, "it gets hard to read...."): hover is a
   lighter step and the text stays ink; a press is a touch smaller.
   120ms ease-out; with reduced motion the press doesn't move */
.btn { transition: background-color 120ms ease-out, transform 120ms ease-out; }
@media (hover: hover) {
  .btn.pink:hover:not(:disabled) { background: color-mix(in srgb, var(--pink) 72%, #fff); color: var(--lp-ink); }
  .btn.soft:hover:not(:disabled) { background: color-mix(in srgb, var(--lp-inset) 50%, #fff); color: var(--lp-ink); box-shadow: inset 0 0 0 1px var(--lp-line2); }
  .btn.plain:hover:not(:disabled) { background: var(--lp-inset); color: var(--lp-ink); }
  .btn:not(.pink):not(.soft):not(.plain):hover:not(:disabled) { background: color-mix(in srgb, var(--lp-ink) 80%, #fff); }
}
.btn:active:not(:disabled) { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color 120ms ease-out; } .btn:active:not(:disabled) { transform: none; } }

/* the Practice band, lightened (2026-11-10, her pick on fresh-audit-studies,
   "Lighten it": no big ink surfaces). A pale fill, ink numbers; the first
   number pink-deep, blue-deep on the 3rd and 4th 8-count. Studio's full
   screen and the spooky look keep their dark stage */
html:not(.spk) .pr-page:not(.is-studio) .pr-under { background: var(--lp-inset); color: var(--lp-ink); border-top: 0; }
html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-eight span { color: color-mix(in srgb, var(--lp-mut) 75%, var(--lp-inset)); }
html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-eight span.past { color: var(--lp-mid); }
html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-eight span.on { color: var(--lp-ink); box-shadow: inset 0 -5px 0 var(--lp-ink); }
html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-eight span.n, html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-eight span.n.past, html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-eight span.n.on { color: var(--pink-deep); }
html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-eight span.n.on { box-shadow: inset 0 -5px 0 var(--pink-deep); }
html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-eight span.b34, html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-eight span.b34.past, html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-eight span.b34.on { color: var(--blue-deep); }
html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-eight span.b34.on { box-shadow: inset 0 -5px 0 var(--blue-deep); }
html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-eight.cin span { color: color-mix(in srgb, var(--lp-mut) 40%, var(--lp-inset)); box-shadow: none; }
html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-eight.cin span.on { color: var(--lp-ink); box-shadow: inset 0 -5px 0 var(--lp-ink); }
html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-left { color: var(--lp-mid); }
html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-ib { color: var(--lp-ink); }
html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-ib:hover { background: #fff; }
html:not(.spk) .pr-page:not(.is-studio) .pr-under .pr-ib[aria-pressed="false"] { color: var(--lp-mut); }

/* when the class name can't be read in full, the tabs take their own row
   (cpFit measures; 2026-11-11, was Practice only) */
@media (min-width: 701px) {
  .cp-head.one.cp-wrap { flex-wrap: wrap; }
  .cp-head.one.cp-wrap .cp-tabs { order: 5; margin-left: 50px; }
  .cp-head.one.cp-wrap .cp-tools { order: 2; }
}

/* Cues, on or off, beside Time · Level · Effort (2026-11-11) */
.bb-cue-pill { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--lp-inset); font-weight: 600; font-size: 14px; color: var(--lp-mid); }
.bb-cue-pill i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.bb-cue-pill[aria-pressed="true"] { background: #fff; color: var(--lp-ink); box-shadow: 0 0 0 1px var(--lp-line2); }
.bb-cue-pill[aria-pressed="true"] i { background: var(--pink); box-shadow: none; }
.bb-cue-pill:hover { color: var(--lp-ink); }
.bb-cue-pill:focus-visible { outline: none; box-shadow: var(--focus); }
/* the Library button in the class bar; filled while the panel is out */
.cp-lib svg { width: 15px; height: 15px; }
.cp-lib[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1px var(--lp-line2); }

/* Paste a sequence or a class (2026-11-11): in the review a combo's name
   leads its moves, smaller than a part and with no line of its own */
.rv-part.rv-cb { padding: 14px 6px 0; margin-bottom: 0; border-bottom: 0; }
.rv-part.rv-cb b { font-size: 15px; font-weight: 700; }
/* the Combo pill is a switch: on, in a combo with the move beside it; off,
   its own move. Off shows on reach (hover, or the keyboard) */
button.combo-tag.rv-cbt { cursor: pointer; margin: 0; padding: 4px 11px; font-family: inherit; line-height: 1.4; }
button.combo-tag.rv-cbt:hover { background: var(--lilac-deep); color: #fff; }
button.combo-tag.rv-cbt.off { background: var(--lp-inset); color: var(--lp-mid); opacity: 0; }
.rv-mv:hover button.combo-tag.rv-cbt.off, .rv-mv:focus-within button.combo-tag.rv-cbt.off { opacity: 1; }
button.combo-tag.rv-cbt.off:hover { background: var(--lilac-t); color: var(--lilac-deep); }
@media (hover: none) { button.combo-tag.rv-cbt.off { opacity: 1; } }

/* the Sketch table: the tempo under a move's name is a button (2026-11-11);
   with no tempo yet it is a grey pill that shows on reach */
.tgrid .tg-tags { flex-wrap: wrap; align-items: center; }
.tgrid .tg-tp { display: inline-flex; align-items: center; gap: 5px; padding: 0; border-radius: 999px; cursor: pointer; }
.tgrid .tg-tp::after { content: none; }
.tgrid .tg-tp .tg { cursor: pointer; }
.tgrid .tg-tp.none .tg { background: var(--lp-inset); color: var(--lp-mid); }
.tgrid .tg-tp.none { opacity: 0; }
.tgrid tr:hover .tg-tp.none, .tgrid td.tg-mv:focus-within .tg-tp.none, .tgrid .tg-tp.none:focus-visible { opacity: 1; }
.tgrid .tg-tp:hover .tg { background: var(--lp-ink); color: #fff; }
.tgrid .tg-tp:focus-visible { outline: none; box-shadow: var(--focus); }
.tgrid .tg-tpn { font-size: 12px; color: var(--lp-mut); margin-right: 4px; }
@media (hover: none) { .tgrid .tg-tp.none { opacity: 1; } }
@media print { .tgrid .tg-tp.none { display: none; } }

/* inside a combo (2026-11-11): the mark before a move is a small button,
   + together with the move above, an arrow after it; the pills sit in one
   group at the end of the row and wrap under each other when it is narrow */
.me-prow { grid-template-columns: 30px minmax(0, 1fr) auto; }
.me-pp { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.me-jn { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%; background: #fff; color: var(--lp-ink); font-weight: 700; font-size: 14px; line-height: 1; vertical-align: 1px; position: relative; touch-action: manipulation; }
.me-jn::after { content: ""; position: absolute; inset: -10px; }
.me-jn:hover { background: rgba(255, 255, 255, .6); }
.me-jn:focus-visible { outline: none; box-shadow: var(--focus); }
.me-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.me-prow .pn { flex: 1 1 96px; min-width: 96px; overflow-wrap: break-word; }
.me-prow .me-pp { flex: 0 1 auto; margin-left: auto; }