/* Little Pulse · the Sketch, as a doc (2026-10-24)
   Her picks across studies/sketch-doc-studies.html, -2 and -3: a white sheet
   on a whisper of desk, chips in sentences (figure, name, tempo), @ for a
   move, / under the line, a small bar above highlighted words, sizes in
   numbers, post-its anywhere, comments in the margin, another class beside.
   Its own file so it never collides with app.css; tokens only. */

.sd .sd-main { background: #FAFAF8; }
.sd-stage { position: relative; display: grid; grid-template-columns: minmax(0, 780px); justify-content: center; padding: 40px 40px 160px; min-height: 100%; }
.sd-stage:has(.with-cm) { padding-right: 280px; }
.sd-sheet { position: relative; background: #fff; border-radius: 6px; padding: 72px 88px 140px; min-height: calc(100vh - 220px); }
@container skmain (max-width: 900px) {
  .sd-stage { padding: 24px 20px 120px; }
  .sd-stage:has(.with-cm) { padding-right: 20px; }
  .sd-sheet { padding: 48px 44px 120px; }
}
.sd-title { font-family: var(--fd); font-weight: 800; font-size: 40px; line-height: 1.05; letter-spacing: -.028em; color: var(--lp-ink); }
.sd-meta { font-size: 14px; color: var(--lp-mut); margin: 10px 0 34px; }

/* the writing */
.sd-ed { outline: none; font-family: var(--fu); font-size: 17px; line-height: 1.75; color: var(--lp-ink); caret-color: var(--pink-deep); }
#sd-ed:focus-visible { box-shadow: none; }
.sd-ed ::selection { background: #D6E6F7; }
.sd-sec { position: relative; }
.sd-sec + .sd-sec { margin-top: 40px; }
.sd-sec > p { position: relative; margin: 0; min-height: 1.75em; }
.sd-sec > p + p, .sd-sec > ul + p, .sd-sec > p + ul, .sd-sec > ol + p, .sd-sec > p + ol { margin-top: 8px; }
.sd-sec ul, .sd-sec ol { margin: 0; padding-left: 26px; }
.sd-sec li { padding-left: 2px; }
.sd-sec ul > li { list-style: disc; }
.sd-sec ol > li { list-style: decimal; }
.sd-sec li::marker { color: var(--lp-mut); }
.sd-sec p.sd-self { background: var(--marigold-t); color: var(--marigold-deep); font-style: italic; border-radius: 8px; margin: 8px -12px; padding: 4px 12px; }
.sd-sec p.sd-ph::before { content: "Type @ for a move, / to add"; position: absolute; left: 0; top: 0; color: var(--lp-mut); font-style: italic; pointer-events: none; white-space: nowrap; }
.sd-sec p.sd-self.sd-ph::before { content: "A note to self, not printed"; left: 12px; top: 4px; color: var(--marigold-deep); }
.sd-ed span[data-cm] { background: var(--lilac-t); border-radius: 2px; }

/* a block's heading: its name written in place, never deleted by writing */
.sd-bh { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--fd); font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: -.012em; color: var(--lp-ink); user-select: none; }
.sd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--lp-line2)); flex: none; }
.sd-bn { outline: none; padding: 0 6px; margin-left: -6px; border-radius: 8px; user-select: text; cursor: text; min-width: 2ch; }
.sd-bn:hover { background: var(--lp-inset); }
.sd-bn:focus { background: var(--lp-inset); }
.sd-bn:focus-visible { box-shadow: var(--focus); }
.sd-bt { font-family: var(--fu); font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--lp-mut); font-variant-numeric: tabular-nums; }
.sd-sec.sd-new .sd-bh { animation: sd-in 260ms cubic-bezier(.2, .8, .2, 1); }
@keyframes sd-in { from { opacity: 0; transform: translateY(4px); } }

/* a move in a sentence */
.sd-chip { display: inline; white-space: nowrap; background: var(--ct, var(--lp-inset)); border-radius: 7px; padding: 3px 9px 3px 3px; margin: 0 1px; font-weight: 600; font-size: 16.5px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.sd-chip:hover { background: color-mix(in srgb, var(--ct, var(--lp-inset)) 82%, var(--lp-ink) 6%); }
.sd-cf { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; margin-right: 5px; }
.sd-cf svg { width: 100%; height: 100%; display: block; }
.sd-ct { display: inline-block; margin-left: 7px; padding: 0 8px; border-radius: 999px; background: #fff; color: var(--lp-mid); font-weight: 600; font-size: 12.5px; line-height: 19px; vertical-align: 1px; }
.sd-chip.sd-fresh { animation: sd-chip 220ms cubic-bezier(.2, .8, .2, 1); }
@keyframes sd-chip { from { opacity: 0; } }

/* the lists that float: @ and /, a chip's menu, the size steps */
.sd-pop, .sd-menu { position: fixed; z-index: 60; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--lp-line2); padding: 6px; display: grid; }
.sd-pop[hidden], .sd-menu[hidden], .sd-bub[hidden] { display: none; }
.sd-pop { width: 300px; max-height: 340px; overflow: auto; }
.sd-pop button, .sd-menu button { display: flex; align-items: center; gap: 10px; text-align: left; font-size: 15px; color: var(--lp-ink); padding: 7px 10px; border-radius: 8px; min-height: 40px; }
.sd-pop button svg { width: 18px; height: 18px; color: var(--lp-mut); flex: none; }
.sd-pop button.on, .sd-pop button:hover, .sd-menu button:hover, .sd-menu button:focus-visible, .sd-menu button.on { background: var(--lp-inset); }
.sd-menu button:focus-visible { box-shadow: none; }
.sd-pf { width: 28px; height: 28px; border-radius: 8px; background: var(--lp-inset); display: grid; place-items: center; flex: none; padding: 2px; }
.sd-pf svg { width: 100%; height: 100%; }
.sd-none { font-size: 14px; font-style: italic; color: var(--lp-mut); padding: 8px 10px; }
.sd-menu { width: 230px; }
.sd-menu .sd-mh { font-family: var(--fd); font-weight: 700; font-size: 15px; padding: 6px 10px 4px; }
.sd-menu .on { font-weight: 600; }
.sd-hr { height: 1px; background: var(--lp-line); margin: 4px 6px; }

/* the bar above what you highlight */
.sd-bub { position: fixed; z-index: 60; display: flex; align-items: center; gap: 2px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--lp-line2); padding: 4px; }
.sd-bub button { min-width: 34px; height: 34px; padding: 0 7px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; color: var(--lp-ink); }
.sd-bub button:hover, .sd-bub button[aria-pressed="true"] { background: var(--lp-inset); }
.sd-bub button svg { width: 17px; height: 17px; }
.sd-bub .b { font-weight: 800; }
.sd-bub .i { font-style: italic; font-weight: 600; }
.sd-sw { display: block; width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(26, 20, 16, .12); }
.sd-sw.none { background: #fff; box-shadow: inset 0 0 0 1.5px var(--lp-line2); }
.sd-sz { min-width: 26px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sd-div { width: 1px; height: 20px; background: var(--lp-line); margin: 0 3px; }

/* post-its, anywhere on the page */
.sd-pis { position: absolute; inset: 0; pointer-events: none; }
.sd-pi { position: absolute; z-index: 4; width: 172px; min-height: 100px; padding: 12px 14px 14px; background: var(--marigold-t); color: var(--marigold-deep); border-radius: 6px; font-size: 14.5px; line-height: 1.45; pointer-events: auto; cursor: grab; touch-action: none; }
.sd-pi.drag { cursor: grabbing; }
.sd-pi:focus-visible { box-shadow: var(--focus); }
.sd-pi-tx { outline: none; min-height: 64px; padding-right: 18px; cursor: text; white-space: pre-wrap; word-break: break-word; }
.sd-pi-tx:empty::before { content: "A post-it"; font-style: italic; opacity: .75; }
.sd-pi-x, .sd-cm-x { position: absolute; right: 4px; top: 4px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: inherit; opacity: 0; }
.sd-pi-x svg, .sd-cm-x svg { width: 12px; height: 12px; }
.sd-pi:hover .sd-pi-x, .sd-pi:focus-within .sd-pi-x, .sd-cm:hover .sd-cm-x, .sd-cm:focus-within .sd-cm-x, .sd-pi-x:focus-visible, .sd-cm-x:focus-visible { opacity: 1; }
.sd-pi-x:hover { background: rgba(255, 255, 255, .7); }

/* comments, in the margin level with their words */
.sd-cms { position: absolute; top: 0; left: calc(100% + 24px); width: 224px; }
.sd-cm { position: absolute; left: 0; right: 0; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--lp-line2); padding: 10px 34px 10px 12px; font-size: 14px; line-height: 1.45; color: var(--lp-ink); }
.sd-cm-tx { outline: none; min-height: 1.45em; white-space: pre-wrap; word-break: break-word; }
.sd-cm-tx:empty::before { content: "A comment"; color: var(--lp-mut); font-style: italic; }
.sd-cm-x { color: var(--lp-mid); }
.sd-cm-x:hover { background: var(--lp-inset); }
@container skmain (max-width: 900px) { .sd-cms { left: auto; right: 12px; } }

/* a block dragged in from another class: where it lands */
.sd-drop { position: absolute; left: 88px; right: 88px; height: 2px; border-radius: 2px; background: var(--lp-ink); opacity: 0; pointer-events: none; }
.sd-drop.on { opacity: 1; }
.sd-first { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 10px 16px; border-radius: 999px; background: var(--lp-inset); }
.sd-first svg { width: 16px; height: 16px; }

/* From another class, beside */
.sd-other .lib-head { display: flex; align-items: center; gap: 8px; }
.sd-oh { display: flex; align-items: center; gap: 6px; font-family: var(--fd); font-weight: 700; font-size: 17px; }
.sd-oback { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; margin-left: -6px; }
.sd-oback:hover { background: var(--lp-inset); }
.sd-oback svg { width: 16px; height: 16px; }
.sd-other .x svg { width: 14px; height: 14px; }
.sd-obody { display: grid; gap: 8px; padding: 6px 16px 24px; overflow: auto; }
.sd-ocls { display: flex; align-items: baseline; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--lp-inset); }
.sd-ocls b { font-weight: 600; font-size: 15px; }
.sd-ocls span { margin-left: auto; font-size: 13px; color: var(--lp-mut); white-space: nowrap; }
.sd-ocls:hover { background: #EEEEEB; }
.sd-ohint { font-size: 14px; color: var(--lp-mid); margin: 2px 0 4px; }
.sd-onone { font-size: 14px; color: var(--lp-mut); }
.sd-ob { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--ct); cursor: grab; }
.sd-ob-t { display: flex; align-items: center; gap: 8px; }
.sd-ob-t b { font-family: var(--fd); font-weight: 700; font-size: 16px; }
.sd-ob-m { margin-left: auto; font-size: 13px; color: var(--lp-mid); font-variant-numeric: tabular-nums; }
.sd-ob-f { display: flex; gap: 4px; }
.sd-ob-f span { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .7); padding: 2px; }
.sd-ob-f svg { width: 100%; height: 100%; display: block; }
.sd-ob .btn { justify-self: start; background: #fff; }

@media (prefers-reduced-motion: reduce) { .sd-chip.sd-fresh, .sd-sec.sd-new .sd-bh { animation: none; } }
@media print {
  .sd .sd-main { background: #fff; }
  .sd-stage, .sd-stage:has(.with-cm) { padding: 0; }
  .sd-sheet { padding: 0; min-height: 0; }
  .sd-pis, .sd-cms, .sd-bub, .sd-pop, .sd-menu, .sd-drop, .sd-other { display: none !important; }
  .sd-sec p.sd-self { display: none; }
  .sd-ed span[data-cm] { background: none; }
}

/* a move on a line of its own: its cue under it, light, not part of the writing */
.sd-sec > p[data-cue]::after { content: attr(data-cue); display: block; margin: 2px 0 4px 31px; font-size: 14.5px; line-height: 1.5; font-style: italic; color: var(--lp-mid); -webkit-user-select: none; user-select: none; pointer-events: none; }
@media print { .sd-sec > p[data-cue]::after { color: var(--lp-ink); } }
/* the card is the field: no ring inside it */
.sd-cm-tx:focus-visible, .sd-pi-tx:focus-visible { box-shadow: none; }
.sd-cm:focus-within { box-shadow: 0 0 0 1.5px var(--lp-ink); }

/* ---------- the Notebook: pages outside every class (2026-10-24) ---------- */
.nb { display: grid; grid-template-columns: 264px minmax(0, 1fr); height: calc(100vh - 60px); }
.nb > * { min-height: 0; }
.nb-list { display: flex; flex-direction: column; gap: 14px; padding: 22px 14px; border-right: 1px solid var(--lp-line); background: #fff; overflow: auto; }
.nb-new { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; }
.nb-new svg { width: 16px; height: 16px; }
.nb-pages { display: grid; gap: 2px; }
.nb-pg { display: grid; gap: 1px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--lp-ink); }
.nb-pg b { font-weight: 600; font-size: 15px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-pg b i { font-weight: 500; color: var(--lp-mid); }
.nb-pg small { font-size: 13px; color: var(--lp-mut); }
.nb-pg:hover { background: var(--lp-inset); }
.nb-pg.on { background: var(--lp-inset); }
.nb-main { height: 100%; overflow-x: hidden; container: skmain / inline-size; }
.nb-main.sd-main { background: #FAFAF8; }
.nb-sheet { padding-top: 40px; }
.nb-top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; margin-bottom: 18px; }
.nb-top .sd-meta { margin: 0; }
.nb .sd-sec p.sd-ph::before { content: "Write anything. / for bullets or a post-it"; }
.nb .sd-sec > p:first-child { font-family: var(--fd); font-weight: 700; font-size: 26px; line-height: 1.3; letter-spacing: -.015em; }
.nb .sd-sec > p:first-child.sd-ph::before { font-family: var(--fu); font-weight: 400; font-size: 17px; letter-spacing: 0; line-height: 2.1; }
@media (max-width: 760px) {
  .nb { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; min-height: calc(100vh - 60px); }
  .nb-list { border-right: 0; border-bottom: 1px solid var(--lp-line); max-height: 180px; padding: 14px 16px; }
  .nb-main { height: auto; }
  .nb .sd-stage { padding: 16px 16px 120px; }
  .nb .sd-sheet { padding: 28px 22px 100px; min-height: 60vh; }
}
@media print { .nb-list, .nb-top { display: none !important; } .nb { display: block; height: auto; } }

/* a fourth word in the top bar (Notebook): on a narrow phone the words scroll
   inside the bar, so the page never scrolls sideways */
@media (max-width: 480px) {
  .lp-bar nav { min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
  .lp-bar nav::-webkit-scrollbar { display: none; }
  .lp-bar > *:not(nav):not(.sp) { flex: none; }
}

/* ---------- the template grid (2026-10-28) ----------
   Her picks on studies/sketch-template-2/3/4-studies.html: a full grid,
   a row each, figures in their own column, simple like a Google Sheet.
   Hairlines only; a name is written over in place, its x shows on reach. */
.sd-meta .sd-from { color: var(--lp-ink); font-weight: 600; }
.tgrid { margin: 14px 0 18px; cursor: default; user-select: none; }
.tgrid table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.4; }
.tgrid th, .tgrid td { border: 1px solid var(--lp-line); padding: 0; text-align: left; vertical-align: middle; }
.tgrid th { background: var(--lp-inset); height: 36px; position: relative; }
.tgrid th.tg-h { cursor: grab; }
.tgrid .tg-hn { width: 100%; min-width: 64px; height: 36px; padding: 0 30px 0 10px; border: 0; background: none; font: 600 12.5px var(--fu); color: var(--lp-mid); border-radius: 0; }
.tgrid .tg-hn:focus { color: var(--lp-ink); background: #fff; outline: none; box-shadow: inset 0 -2px 0 var(--pink); }
/* the name lets the column drag; a click writes in it */
.tgrid th.tg-h .tg-hn { pointer-events: none; }
.tgrid th.tg-h .tg-hn:focus { pointer-events: auto; cursor: text; }
.tgrid th.tg-h.tg-drag { opacity: .45; }
.tgrid th.tg-h.tg-to-l { box-shadow: inset 2px 0 0 var(--lp-ink); }
.tgrid th.tg-h.tg-to-r { box-shadow: inset -2px 0 0 var(--lp-ink); }
.tgrid .tg-hx { position: absolute; right: 4px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 6px; display: grid; place-items: center; color: var(--lp-mut); opacity: 0; }
.tgrid .tg-hx::after { content: ""; position: absolute; inset: -10px -4px; }
.tgrid .tg-hx svg { width: 11px; height: 11px; }
.tgrid th:hover .tg-hx, .tgrid .tg-hx:focus-visible, .tgrid th:focus-within .tg-hx { opacity: 1; }
.tgrid .tg-hx:hover { background: #fff; color: var(--lp-ink); }
@media (hover: none) { .tgrid .tg-hx { opacity: 1; } }
.tgrid th.tg-h-fig { width: 44px; }
.tgrid th.tg-h-fig .tg-hx { right: 10px; }
.tgrid th.tg-plus { width: 40px; border-color: transparent; background: none; }
.tgrid th.tg-plus button { position: relative; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; margin: 0 auto; color: var(--lp-mid); background: var(--lp-inset); opacity: 0; }
.tgrid th.tg-plus button::after { content: ""; position: absolute; inset: -8px; }
.tgrid th.tg-plus svg { width: 11px; height: 11px; }
.tgrid thead:hover .tg-plus button, .tgrid .tg-plus button:focus-visible { opacity: 1; }
.tgrid .tg-plus button:hover { background: var(--lp-line); color: var(--lp-ink); }
@media (hover: none) { .tgrid th.tg-plus button { opacity: 1; } }
.tgrid td.tg-pad { border-color: transparent; }
/* the part's name is written in place; "Part" shows only on reach */
.tgrid td.tg-pt { width: 26%; padding: 0 0 9px; vertical-align: top; cursor: text; }
.tgrid td.tg-pt .tg-pn { font-weight: 600; }
.tgrid td.tg-pt .tg-pn::placeholder { color: transparent; font-weight: 400; }
.tgrid td.tg-pt:hover .tg-pn::placeholder, .tgrid td.tg-pt .tg-pn:focus::placeholder { color: var(--lp-mut); }
.tgrid td.tg-pt small { display: block; font-size: 13px; color: var(--lp-mid); margin-top: -6px; padding: 0 10px; }
.tgrid td.tg-fg { width: 44px; text-align: center; }
/* moves in order: drag by the figure; a thin line shows where it lands */
.tgrid td.tg-fg[draggable="true"] { cursor: grab; }
.tgrid tr.tg-lift > td:not([rowspan]) { opacity: .4; }
.tgrid tr.tg-ln-top > td:not([rowspan]) { box-shadow: inset 0 2px 0 var(--lp-ink); }
.tgrid tr.tg-ln-bot > td:not([rowspan]) { box-shadow: inset 0 -2px 0 var(--lp-ink); }
.tgrid .tg-f { display: inline-flex; width: 26px; height: 26px; color: var(--lp-mid); vertical-align: middle; }
.tgrid .tg-in { display: block; width: 100%; min-height: 40px; padding: 9px 10px; border: 0; background: none; font: inherit; color: var(--lp-ink); resize: none; field-sizing: content; border-radius: 0; user-select: text; }
.tgrid .tg-in:focus { outline: none; background: #FAFAF8; box-shadow: inset 0 -2px 0 var(--pink); }
.tgrid td.tg-mv { position: relative; }
.tgrid .tg-name { font-weight: 700; padding-right: 36px; }
/* the tempo, position and build tags under a move's name (2026-10-29) */
.tgrid .tg-tags { display: flex; margin: -6px 0 0; padding: 0 36px 9px 10px; gap: 4px; }
.tgrid .tg-new::placeholder { color: transparent; }
.tgrid .tg-new:focus::placeholder { color: var(--lp-mut); font-style: italic; }
.tgrid .tg-del { position: absolute; right: 6px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 8px; display: grid; place-items: center; color: var(--lp-mut); opacity: 0; }
.tgrid .tg-del::after { content: ""; position: absolute; inset: -8px; }
.tgrid .tg-del svg { width: 11px; height: 11px; }
.tgrid tr:hover .tg-del, .tgrid .tg-del:focus-visible, .tgrid td.tg-mv:focus-within .tg-del { opacity: 1; }
.tgrid .tg-del:hover { background: var(--lp-inset); color: var(--lp-ink); }
@media (hover: none) { .tgrid .tg-del { opacity: 1; } }
.tgrid td.tg-rp { width: 90px; }
.tgrid td.tg-cu, .tgrid td.tg-own { width: 28%; }
.tgrid td.tg-cu .tg-in, .tgrid td.tg-own .tg-in { font-size: 14.5px; color: var(--lp-mid); }
.tgrid .tg-hx:focus-visible, .tgrid .tg-plus button:focus-visible, .tgrid .tg-del:focus-visible { outline: none; box-shadow: var(--focus); }
@media print { .tgrid .tg-hx, .tgrid .tg-plus, .tgrid .tg-del { display: none; } }
.tgrid .tg-new::-webkit-calendar-picker-indicator { display: none !important; }
/* fixed columns: a long cue wraps in its cell, never widens the grid */
.tgrid table { table-layout: fixed; }
.tgrid th.tg-h-part { width: 26%; }
.tgrid th.tg-h-music { width: 24%; }
/* Music: the part's song, or Add a song; the search opens in a row under the part */
.tgrid td.tg-mu { padding: 8px 10px; vertical-align: top; }
.tgrid .tg-song { display: flex; align-items: flex-start; gap: 7px; line-height: 1.35; }
.tgrid .tg-song + .tg-song { margin-top: 8px; }
.tgrid .tg-song svg { width: 14px; height: 14px; margin-top: 3px; flex: none; color: var(--lp-mid); }
.tgrid .tg-song b { display: block; font-weight: 600; font-size: 14.5px; }
.tgrid .tg-song small { display: block; font-size: 13px; color: var(--lp-mid); }
/* the song's x shows on reach; taking it off asks in the cell, calmly */
.tgrid .tg-song { position: relative; padding-right: 30px; }
.tgrid .tg-song-x { position: absolute; right: -4px; top: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--lp-mut); opacity: 0; }
.tgrid .tg-song-x::after { content: ""; position: absolute; inset: -8px; }
.tgrid .tg-song-x svg { width: 11px; height: 11px; }
.tgrid td.tg-mu:hover .tg-song-x, .tgrid .tg-song-x:focus-visible { opacity: 1; }
.tgrid .tg-song-x:hover { background: var(--lp-inset); color: var(--lp-ink); }
.tgrid .tg-song-x:focus-visible { outline: none; box-shadow: var(--focus); }
@media (hover: none) { .tgrid .tg-song-x { opacity: 1; } }
.tgrid .tg-warn { margin-top: 10px; padding: 10px 12px 12px; border-radius: 10px; background: var(--lp-inset); }
.tgrid .tg-warn b { display: block; font-weight: 600; font-size: 14.5px; }
.tgrid .tg-warn small { display: block; margin-top: 2px; font-size: 13px; color: var(--lp-mid); }
.tgrid .tg-warn-b { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tgrid .tg-warn .btn.soft { background: #fff; }
@media print { .tgrid .tg-song-x, .tgrid .tg-warn { display: none; } }
.tgrid .tg-add-song { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--lp-inset); font: 600 14px var(--fu); color: var(--lp-ink); }
.tgrid .tg-add-song svg { width: 13px; height: 13px; color: var(--lp-mid); }
.tgrid .tg-add-song:hover { background: var(--lp-line); }
.tgrid .tg-add-song:focus-visible { outline: none; box-shadow: var(--focus); }
.tgrid tr.tg-srow > td:first-child { padding: 0 10px 10px; border-top: 0; }
/* a move dragged over a part: that part's rows fill, no outline */
.tgrid tr.tg-over > td, .tgrid tr.drop-on > td { background: var(--lp-inset); }
.tgrid tr.drop-on { box-shadow: none !important; }
.tgrid .tg-search { max-width: 460px; margin: 10px 0 0; user-select: text; }
/* Ask Claude about a move the library doesn't know (2026-10-28) */
.tgrid .tg-ask-b { display: flex; align-items: center; gap: 6px; width: calc(100% - 16px); min-height: 36px; margin: 10px 8px 8px; padding: 0 10px; border-radius: 10px; background: var(--pink-t); font: 600 13px var(--fu); color: var(--lp-ink); text-align: left; }
.tgrid .tg-ask-b:hover { background: color-mix(in srgb, var(--pink-t) 80%, var(--pink) 20%); }
.tgrid .tg-ask-b svg { width: 14px; height: 14px; flex: none; color: var(--pink-deep); }
.tgrid .tg-ask-b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgrid .tg-ask { max-width: 520px; margin: 10px 0 0; padding: 12px 14px 14px; border-radius: 16px; background: var(--lp-inset); user-select: text; }
.tgrid .tg-ask-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 15px; }
@media print { .tgrid .tg-ask-b, .tgrid .tg-ask { display: none; } }
@media print { .tgrid .tg-add-song, .tgrid tr.tg-srow { display: none; } }
/* a block with no parts: Music alone, as wide as a Music column */
.tgrid th.tg-h-reps { width: 96px; }
.tgrid th.tg-h-cue, .tgrid th.tg-h-own { width: 28%; }
.tgrid .tg-in { field-sizing: fixed; }
.tgrid textarea.tg-in { field-sizing: content; width: 100%; max-width: 100%; overflow-wrap: anywhere; }
/* one song over several parts (song-span-studies.html, her picks): a part
   the song carries on into says so, lighter; the song's last part has a
   small handle at the foot of its Music cell, on reach, to drag it down */
.tgrid .tg-song.cont { color: var(--lp-mid); font-size: 14.5px; }
.tgrid .tg-song.cont small { color: var(--lp-mut); }
.tgrid td.tg-mu { position: relative; }
.tgrid .tg-span-h { position: absolute; left: 50%; bottom: 0; width: 44px; height: 18px; margin-left: -22px; border-radius: 9px; cursor: ns-resize; opacity: 0; touch-action: none; }
.tgrid .tg-span-h::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 5px; margin: -2.5px 0 0 -11px; border-radius: 999px; background: var(--lp-mid); }
.tgrid td.tg-mu:hover .tg-span-h, .tgrid .tg-span-h:focus-visible, body.tg-spanning .tgrid .tg-span-h { opacity: 1; }
.tgrid .tg-span-h:hover::before { background: var(--lp-ink); }
.tgrid .tg-span-h:focus-visible { outline: none; box-shadow: var(--focus); }
.tgrid td.tg-span-to { box-shadow: inset 0 -2px 0 var(--lp-ink); }
body.tg-spanning, body.tg-spanning * { cursor: ns-resize !important; user-select: none; }
@media (hover: none) { .tgrid .tg-span-h { opacity: 1; } }
@media print { .tgrid .tg-span-h { display: none; } }

/* ---------- a wider page (2026-11-11) ----------
   Her words: "this is getting really vertical ... make it a wider screen so
   that that column can stretch out and we can see more at once." The sheet
   takes the room the window has, up to 1280px, and stays centred; in the
   grid Part, Music and Move take a smaller share so what's left goes to the
   Cue (about 65 characters a line at the cap, never past 90). Written lines
   keep the measure they had (604px). Under 760px of room nothing changes.
   The Notebook keeps its narrow sheet. */
.sk2.sd .sd-stage { grid-template-columns: minmax(0, 1280px); }
.sk2.sd .sd-sec > p, .sk2.sd .sd-sec > ul, .sk2.sd .sd-sec > ol { max-width: 604px; }
@container skmain (min-width: 761px) {
  .sk2.sd .tgrid th.tg-h-part, .sk2.sd .tgrid th.tg-h-music { width: 18%; }
  .sk2.sd .tgrid th.tg-h-move { width: 21%; }
  .sk2.sd .tgrid th.tg-h-cue { width: auto; }
}
@container skmain (min-width: 901px) {
  .sk2.sd .tgrid th.tg-h-part { width: 15%; }
  .sk2.sd .tgrid th.tg-h-music { width: 16%; }
  .sk2.sd .tgrid th.tg-h-move { width: 20%; }
  .sk2.sd .tgrid th.tg-h-cue { width: auto; }
}