/* ============================================================
   Music Stand — Eagle View Music

   The frame around two apps. Its own colours are deliberately
   neutral: the two panes carry the identities, each in its own
   app's accent — Rhythm Poetry's orange for the poem, Ostinato
   Builder's indigo for the ostinato — so a glance says which
   side is which. The brand mark is the one place the two meet.

   The FORMS are the apps' own, so that moving between the three
   feels like one family: the top bar's home link, centre switch
   and chip cluster; the toolbar's groups; the Songs sheet with
   its now-open card, its groups and its rows; the Share &
   backup cards. Where the apps use their accent, the stand uses
   its ink, which belongs to neither side.
   ============================================================ */

:root {
  --ground:      #EEEDF0;
  --ground-2:    #E4E3E9;
  --paper:       #F7F6F9;
  --surface:     #FFFFFF;
  --ink:         #1E2238;
  --ink-2:       #555A72;
  --ink-3:       #8A8EA3;
  --hairline:    #DCDBE3;
  --hairline-2:  #C9C8D3;

  /* the two sides, in their own apps' colours */
  --poem:        #E0642F;
  --poem-soft:   #FCE8DD;
  --ost:         #5B4BD6;
  --ost-soft:    #E6E3FA;

  --danger:      #C73A4E;
  --danger-soft: #FBE9EC;
  --good:        #2E8B6B;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-1: 0 1px 2px rgba(30,34,56,.06), 0 2px 8px rgba(30,34,56,.06);
  --shadow-2: 0 4px 12px rgba(30,34,56,.10), 0 12px 32px rgba(30,34,56,.12);
  --shadow-3: 0 12px 28px rgba(30,34,56,.16), 0 32px 64px rgba(30,34,56,.20);

  --topbar-h: 56px;
  --head-h: 44px;
  --divider: 10px;
  --gutter: 8px;

  /* what the shared Teacher Library shelf (lib/evm-shelf.css) calls the
     app's accent and its second paper — here, the stand's ink and ground */
  --accent:      var(--ink);
  --paper-2:     var(--ground);

  --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-round: 'Baloo 2', 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  font-family: var(--font);
  background: var(--ground);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
svg { display: block; }
svg[viewBox] { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

:focus-visible { outline: 2.5px solid var(--ost); outline-offset: 2px; }


/* ============================================================
   TOP BAR
   Three columns, as in Rhythm Poetry: the way home, the one
   switch in the middle, and where the work is going.
   ============================================================ */

.topbar {
  flex: 0 0 var(--topbar-h);
  display: grid;
  /* the two sides share what the switch leaves, and give way before
     they overlap it: the chip's name is the part that shortens */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  z-index: 5;
}

.topbar-left { justify-self: start; display: flex; align-items: center; gap: 6px; min-width: 0; }

.home-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.home-link svg { width: 17px; height: 17px; }
.home-link:hover, .home-link:active { background: var(--ground); color: var(--ink); }
html.in-iframe .home-link { display: none; }

.brand { display: flex; align-items: center; gap: 8px; flex: none; }
/* The mark is the two panes on one stand: the poem's sheet in Rhythm
   Poetry's orange, the ostinato's in Ostinato Builder's indigo. */
.brand-mark { width: 28px; height: 28px; flex: none; }
.brand-mark .sheet-poem { fill: var(--poem); }
.brand-mark .sheet-ost  { fill: var(--ost); }
.brand-mark .stand-line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark .staff-line { fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; opacity: .85; }
.brand-name {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  white-space: nowrap;
}

/* --- what is on the stand --- */
.show-switch {
  justify-self: center;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--ground);
  border-radius: 999px;
}
.show-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-round);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .18s;
}
.show-tab svg { width: 18px; height: 18px; }
.show-tab:hover, .show-tab:active { color: var(--ink); }
.show-tab.active { background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); }
.show-tab[data-show-tab="poem"].active { color: var(--poem); }
.show-tab[data-show-tab="ost"].active  { color: var(--ost); }
.show-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.show-dot.poem { background: var(--poem); }
.show-dot.ost  { background: var(--ost); }

/* --- where the work is going --- */
.chip-cluster {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
}

/* Auto-save, as in both apps. On, it is quiet; off, it is the one thing
   on the bar that is not normal, so it says so in the warning ink with a
   dashed edge. On a shared pairing it is not a warning but the way to
   keep your changes: Save my copy. */
.autosave-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 42px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--ground);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink-3);
  transition: background .15s, color .15s, border-color .15s;
}
.autosave-toggle:hover, .autosave-toggle:active { background: var(--ground-2); color: var(--ink-2); }
.autosave-icon { width: 15px; height: 15px; flex: none; }
.autosave-toggle.is-off {
  background: transparent;
  border-style: dashed;
  border-color: var(--danger);
  color: var(--danger);
}
.autosave-toggle.is-off.is-shared {
  border-style: solid;
  border-color: var(--ink);
  color: var(--ink);
}

/* Clear, only in the sandbox: quiet until reached for, then red. */
.sandbox-clear {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--ground);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-3);
  transition: background .15s, color .15s;
}
.sandbox-clear svg { width: 15px; height: 15px; flex: none; }
.sandbox-clear:hover, .sandbox-clear:active { background: var(--danger-soft); color: var(--danger); }

.pair-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 280px;
  min-height: 42px;
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  background: var(--ground);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  transition: background .15s;
}
.pair-chip:hover, .pair-chip:active { background: var(--ground-2); }
.pair-chip-dots { display: flex; flex-direction: column; gap: 3px; flex: none; }
.pair-chip-dots .dot { width: 8px; height: 8px; border-radius: 50%; }
.pair-chip-dots .dot.poem { background: var(--poem); }
.pair-chip-dots .dot.ost  { background: var(--ost); }
.pair-chip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; text-align: left; }
.pair-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* where the work is going: Sandbox, Pairings, Shared, or a book */
.pair-chip-kicker {
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* the sandbox reads as unfiled: a dashed edge and no fill */
.pair-chip.is-sandbox {
  background: transparent;
  border: 1.5px dashed var(--ink-2);
  padding: 4.5px 8.5px 4.5px 10.5px;
}
.caret { width: 15px; height: 15px; color: var(--ink-3); flex: none; }


/* ============================================================
   SHARED CONTROLS
   ============================================================ */

.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--ground);
  border: 1px solid var(--hairline);
}
.seg-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}
.seg-btn svg { width: 17px; height: 17px; }
.seg-btn:hover { color: var(--ink); }
.seg-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg-btn:disabled { opacity: .45; cursor: default; }
.seg-wide { display: flex; width: 100%; }
.seg-wide .seg-btn { flex: 1; }
/* three words with pictures: stacked in a column when the popover is narrow */
.seg-arrange .seg-btn { height: auto; min-height: 30px; padding: 6px 8px; flex-direction: column; gap: 3px; font-size: 12.5px; border-radius: 12px; }
.seg-arrange { border-radius: 16px; }
/* EASY is written the way both apps write it on their dots button:
   four letters in four of its colours, on dark once it is chosen. */
.seg-btn.easy-seg { gap: 0; letter-spacing: .04em; }
.seg-btn.easy-seg b { font-weight: 800; }
.seg-btn.easy-seg b:nth-child(1) { color: #FF6B6F; }
.seg-btn.easy-seg b:nth-child(2) { color: #FFB938; }
.seg-btn.easy-seg b:nth-child(3) { color: #4CD37F; }
.seg-btn.easy-seg b:nth-child(4) { color: #5DB2F5; }
.seg-btn.easy-seg.active { background: #1F2433; }

/* The toolbar's buttons, in the apps' outlined form. */
.tool-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--hairline-2);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.tool-btn svg { width: 19px; height: 19px; flex: none; }
.tool-btn:hover, .tool-btn.open { background: var(--ground); border-color: var(--ink-3); }
/* Present ends the row tinted, as it does in Rhythm Poetry and Ostinato
   Builder. The stand has no accent of its own, so the tint is its two
   sides, softly — the Play button's colours. */
.tool-btn.present-btn {
  background: linear-gradient(135deg, var(--poem-soft), var(--ost-soft));
  border-color: transparent;
}
.tool-btn.present-btn:hover {
  background: linear-gradient(135deg, var(--poem), var(--ost));
  border-color: transparent;
  color: #fff;
}
.tool-value {
  font-family: var(--font-round);
  font-weight: 700;
  color: var(--ink);
  background: var(--ground);
  border-radius: 6px;
  padding: 0 6px;
  line-height: 22px;
}
.tool-btn:hover .tool-value, .tool-btn.open .tool-value { background: var(--surface); }

/* Editing is a mode, not an errand, and its switch lives in the View
   popover — so while it is on, the View button says so. The stand has no
   accent of its own on purpose; the lit state is the ink, which belongs
   to neither side. */
.editing-flag {
  display: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase;
}
body.editing #view-btn { border-color: var(--ink); }
body.editing .editing-flag { display: inline-block; }

.icon-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  color: var(--ink-3);
  flex: none;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover, .icon-btn.open { background: var(--ground); color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline-2);
  background: var(--surface);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  transition: background .14s, border-color .14s;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover, .btn:active { background: var(--ground); border-color: var(--ink-3); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover, .btn-primary:active { background: #2E3350; border-color: #2E3350; }
.btn-danger { background: var(--danger-soft); border-color: #EBC3CA; color: var(--danger); }
.btn-danger:hover, .btn-danger:active { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn:disabled { opacity: .45; cursor: default; }

.text-field {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1.5px solid var(--hairline-2);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
}
.text-field:focus { border-color: var(--ink-2); }
.text-field.input-error { border-color: var(--danger); background: var(--danger-soft); }


/* ============================================================
   THE PANES
   Sizes come from one number, --split: the poem's share of the
   room. The ostinato takes what is left. Order and arrangement
   are attributes on #panes, so switching either is a restyle,
   never a rebuild — the frames are never reloaded.
   ============================================================ */

.panes {
  --split: .5;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  gap: 0;
}
.panes[data-arrange="side"] { flex-direction: row; }
.panes[data-first="ost"][data-arrange="stacked"] { flex-direction: column-reverse; }
.panes[data-first="ost"][data-arrange="side"]    { flex-direction: row-reverse; }

.pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  position: relative;
}
#pane-poem { flex: var(--split) 1 0; }
#pane-ost  { flex: calc(1 - var(--split)) 1 0; }
.pane[data-side="poem"] { --side: var(--poem); --side-soft: var(--poem-soft); }
.pane[data-side="ost"]  { --side: var(--ost);  --side-soft: var(--ost-soft); }
.pane::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--side);
  z-index: 1;
}

.panes[data-show="poem"] #pane-ost,
.panes[data-show="ost"] #pane-poem,
.panes:not([data-show="both"]) .divider { display: none; }
.panes[data-show="poem"] #pane-poem,
.panes[data-show="ost"] #pane-ost { flex: 1 1 0; }

.pane-head {
  flex: 0 0 var(--head-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px 0 12px;
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}
.pane-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--side); flex: none; }

/* The heading is the pane's song chip: which side, where the song came
   from, and its name — the same two lines as the chip in the apps. */
.pane-title {
  display: flex; align-items: center; gap: 4px;
  min-width: 0;
  padding: 3px 6px 3px 8px;
  border-radius: 10px;
  text-align: left;
}
.pane-title:hover { background: var(--ground); }
.pane-title > svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.pane-title-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.pane-kicker {
  display: flex; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pane-kind { color: var(--side); }
.pane-src { color: var(--ink-3); }
.pane-src:not(:empty)::before { content: '·'; margin-right: 5px; }
.pane-title-label {
  font-weight: 800;
  font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pane-meta {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
}
.pane-spacer { flex: 1; }
.meter-note {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--ground);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* where this side is, while it plays */
.pane-where {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--side);
  background: var(--side-soft);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pane-where:empty { display: none; }
/* while it plays, where it is matters more than the meters' note */
.pane-head:has(.pane-where:not(:empty)) .meter-note { display: none; }

/* This score is no longer the one in its own app. Said quietly, beside
   the meter, and only while it is true. Where there is a saved version to
   go back to it is also the way back; where there is not — a song that
   came by link, or in a pairing — it is only a label, and says so by not
   answering the pointer. */
.edited-chip {
  font-size: 12px;
  font-weight: 700;
  color: var(--side, var(--ink-2));
  background: var(--side-soft, var(--ground));
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
  flex: none;
  cursor: default;
}
.edited-chip.revertable { cursor: pointer; }
.edited-chip.revertable:hover { background: var(--side, var(--ink)); color: #fff; }
.edited-chip.confirm,
.edited-chip.confirm:hover { background: var(--danger); color: #fff; }
.pane-mute .i-off { display: none; }
.pane-mute[aria-pressed="true"] { color: var(--danger); }
.pane-mute[aria-pressed="true"] .i-on { display: none; }
.pane-mute[aria-pressed="true"] .i-off { display: block; }
.pane.muted .pane-body { opacity: .55; }

.pane-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  transition: opacity .2s;
}
.pane-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
/* While the line between the panes is dragged, the frames must not catch
   the pointer, or the drag stops dead the moment it crosses into one. */
body.dragging .pane-frame { pointer-events: none; }
body.dragging { cursor: row-resize; user-select: none; }
body.dragging.arrange-side { cursor: col-resize; }

.pane-empty {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: auto;
  background:
    radial-gradient(circle at 50% 0%, var(--side-soft), transparent 70%),
    var(--surface);
}
.empty-card { max-width: 380px; text-align: center; }
.empty-icon {
  width: 52px; height: 52px;
  margin: 0 auto 10px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--side-soft);
  color: var(--side);
}
.empty-icon svg { width: 26px; height: 26px; }
.empty-card h2 { font-family: var(--font-round); font-size: 22px; margin: 0 0 4px; }
.empty-card p { margin: 0 0 16px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pane[data-side] .empty-actions .btn-primary { background: var(--side); border-color: var(--side); }
.empty-make {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--side);
  text-decoration: none;
}
.empty-make:hover { text-decoration: underline; }
/* In a short pane the card keeps only what is needed to act on it. */
.pane-body { container-type: size; }
@container (max-height: 330px) {
  .empty-icon, .empty-card p { display: none; }
  .empty-card h2 { margin-bottom: 12px; }
  .empty-make { margin-top: 10px; }
}

/* a song is on its way — say so, rather than asking for one */
.pane-empty.opening .empty-card { display: none; }
.pane-empty.opening::after {
  content: 'Opening…';
  font-weight: 700;
  color: var(--ink-3);
}
body.booting .pane-frame { opacity: 0; }
.pane-frame { transition: opacity .25s; }

.empty-status {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
}

/* the line between them */
.divider {
  flex: 0 0 var(--divider);
  display: grid;
  place-items: center;
  cursor: row-resize;
  touch-action: none;
  outline: none;
}
.panes[data-arrange="side"] .divider { cursor: col-resize; }
.grip {
  width: 44px; height: 4px;
  border-radius: 4px;
  background: var(--hairline-2);
  transition: background .15s, transform .15s;
}
.panes[data-arrange="side"] .grip { width: 4px; height: 44px; }
.divider:hover .grip,
.divider:focus-visible .grip,
body.dragging .grip { background: var(--ink-2); transform: scale(1.15); }


/* ============================================================
   TOOLBAR
   One row, always: Play and Loop, the tempo, then Mixer, View and
   Present. The rest of the height belongs to the two scores.
   ============================================================ */

.transport {
  flex: 0 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  z-index: 5;
}
.transport-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  min-height: 64px;
  padding: 8px 14px;
}

.tool-group {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: 12px;
  border-left: 1px solid var(--hairline);
}

/* The one button that plays both, so it wears both colours. */
.play-btn {
  width: 50px; height: 50px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--poem), var(--ost));
  color: #fff;
  box-shadow: 0 3px 0 rgba(0,0,0,.13);
  transition: transform .12s, box-shadow .12s;
}
.play-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(0,0,0,.13); }
.play-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.13); }
.play-glyph { font-size: 20px; margin-left: 3px; line-height: 1; }
.play-btn.playing { background: var(--danger); }
.play-btn.playing .play-glyph { margin-left: 0; font-size: 18px; }

/* Round again, or stop at the end. Lit while it will go round. */
.loop-btn {
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ground);
  color: var(--ink-3);
  transition: background .15s, color .15s;
}
.loop-btn svg { width: 18px; height: 18px; }
.loop-btn:hover { color: var(--ink); }
.loop-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* The tempo, as Rhythm Poetry has it: the number, small; tap to type,
   hover for a slider. */
.bpm-btn { gap: 4px; padding: 0 13px; min-width: 88px; justify-content: center; }
.bpm-value { font-family: var(--font-round); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bpm-unit  { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--ink-3); }
.bpm-input {
  width: 58px;
  font-family: var(--font-round);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 8px;
  outline: none;
  padding: 2px 0;
}
.bpm-input::-webkit-outer-spin-button,
.bpm-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Rhythm Poetry's hover gauge: a small floating card above the button
   with a slider to drag, so the button's own tap still types. Mouse only. */
.hover-gauge {
  position: fixed;
  z-index: 65;
  display: none;
  align-items: center;
  gap: 12px;
  width: 260px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-3);
}
.hover-gauge.show { display: flex; }
.hover-gauge-label {
  flex: none;
  min-width: 58px;
  font-family: var(--font-round);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gauge-slider {
  flex: 1;
  min-width: 0;
  height: 6px;
  appearance: none;
  border-radius: 999px;
  background: var(--hairline);
  cursor: pointer;
}
.gauge-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 4px rgba(30,34,56,.3);
  cursor: pointer;
}
.gauge-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--surface);
  cursor: pointer;
}
@media (hover: none), (pointer: coarse) {
  .hover-gauge { display: none !important; }
}

.readout { display: none; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; min-width: 0; }
.readout-part {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.readout-part:empty { display: none; }
.readout-part.poem { background: var(--poem-soft); color: #9A3F16; }
.readout-part.ost  { background: var(--ost-soft);  color: #3B2FA0; }

.present-exit { display: none; }


/* ============================================================
   POPOVERS
   ============================================================ */

.popover {
  position: fixed;
  z-index: 40;
  width: 310px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 80px);
  overflow: auto;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  display: none;
}
.popover.open { display: block; }
.popover-wide { width: 560px; }
.mixer-top { padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.mixer-cols { display: flex; gap: 18px; }

.pop-section + .pop-section { margin-top: 14px; }
.pop-label {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.pop-label.small { margin-top: 12px; }
.pop-value { font-family: var(--font-round); font-size: 18px; color: var(--ink); letter-spacing: 0; }
.pop-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin: 8px 0 0; }
.popover input[type="range"] { width: 100%; accent-color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.slider-row + .chips { margin-top: 10px; }
.chip-btn {
  min-width: 40px; height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-2);
}
.chip-btn:hover { border-color: var(--hairline-2); color: var(--ink); }
.chip-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.slider-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
}
.slider-row input { flex: 1; }
.slider-val { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }

.switches { border-top: 1px solid var(--hairline); padding-top: 6px; }
.switch-row {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 2px;
  font-weight: 700;
  font-size: 14px;
  text-align: left;
}
.switch {
  width: 36px; height: 21px;
  border-radius: 999px;
  background: var(--hairline-2);
  position: relative;
  flex: none;
  transition: background .15s;
}
.switch::after {
  content: '';
  position: absolute; top: 2.5px; left: 2.5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .15s;
}
.switch-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.switch-text small { font-size: 12px; font-weight: 600; color: var(--ink-3); line-height: 1.35; }
.switch-row { gap: 12px; }
.switch-row.on .switch { background: var(--good); }
.switch-row.on .switch::after { transform: translateX(15px); }

/* mixer */
.mixer-col { flex: 1; min-width: 0; }
.mixer-col.poem { --side: var(--poem); --side-soft: var(--poem-soft); }
.mixer-col.ost  { --side: var(--ost);  --side-soft: var(--ost-soft); }
.mixer-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 15px;
  color: var(--side);
  margin-bottom: 8px;
}
.mixer-voices { display: flex; flex-direction: column; gap: 4px; }
/* The picture and the switch, in that order — the same pair, the same
   way round, as a track head in Ostinato Builder. */
.voice-row { display: flex; align-items: center; gap: 6px; }
.voice-pic {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 34px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
}
button.voice-pic { cursor: pointer; }
button.voice-pic:hover { border-color: var(--side); background: var(--side-soft); }
.voice-pic img { width: 26px; height: 26px; object-fit: contain; }
.voice-pic.muted img { opacity: .4; filter: grayscale(1); }
.voice-btn {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  font-weight: 700;
  font-size: 14px;
  text-align: left;
}
.voice-btn:hover { border-color: var(--hairline-2); }
.voice-btn .voice-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-btn .voice-state {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--good);
}
.voice-btn.muted { background: var(--ground); color: var(--ink-3); }
.voice-btn.muted .voice-state { color: var(--danger); }
.mixer-empty { font-size: 13px; color: var(--ink-3); padding: 6px 2px; }
.vol {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.mixer-col .vol input[type="range"] { flex: 1; accent-color: var(--side); }


/* ============================================================
   SHEETS
   The apps' sheets: a paper card that scrolls as a whole.
   ============================================================ */

.sheet-backdrop {
  position: fixed; inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(30,34,56,.38);
  backdrop-filter: blur(3px);
}
.sheet-backdrop.open { display: flex; }
.sheet {
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px;
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  animation: sheet-in .2s cubic-bezier(.2,.9,.3,1);
}
.sheet-sm { max-width: 420px; }
.sheet-md { max-width: 600px; }
.sheet-lg { max-width: 720px; }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sheet-head h2 { flex: 1; margin: 0; font-family: var(--font-round); font-size: 23px; font-weight: 700; }
.sheet .pane-dot { background: var(--side, var(--ink)); }
.sheet-close {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--ink-3);
  flex: none;
}
.sheet-close svg { width: 18px; height: 18px; }
.sheet-close:hover { background: var(--hairline); color: var(--ink); }
.sheet-sub { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.sheet-tabs { margin-bottom: 14px; }
.sheet-foot { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-top: 16px; }
.sheet-foot-split { justify-content: space-between; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.picker-pane { display: flex; flex-direction: column; gap: 12px; }
.picker-filter { margin-bottom: 2px; }
.picker-foot { margin: 4px 0 0; }

/* ---- the library: what is open ---- */
.now-open {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 12px 15px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  background: var(--ground);
}
.now-open-label {
  font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.now-open-title {
  flex: 1;
  min-width: 100px;
  font-family: var(--font-round);
  font-size: 17px; font-weight: 700;
}
.now-open-note { flex-basis: 100%; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.now-open-note:empty { display: none; }
.kind-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  white-space: nowrap;
}
.kind-badge.is-sandbox { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.kind-badge.is-shared { background: var(--ink-2); }

/* ---- the library: groups and rows ---- */
.library-groups { display: flex; flex-direction: column; gap: 20px; }
.library-group-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.library-group-head svg { width: 16px; height: 16px; color: var(--group, var(--ink-2)); flex: none; }
.library-group-title {
  font-size: 12px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--group, var(--ink-2));
}
.library-group-rule { flex: 1; height: 1px; background: var(--hairline); }
.book-head-btn {
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline-2);
  font-size: 12px; font-weight: 800;
  color: var(--ink-2);
}
.book-head-btn:hover { background: var(--ground); color: var(--ink); }

.lib-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  margin-bottom: 6px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  transition: border-color .14s, box-shadow .14s;
}
.lib-row:hover { border-color: var(--hairline-2); }
.lib-row.is-current { border-color: var(--row, var(--ink)); box-shadow: 0 0 0 3px var(--row-soft, var(--ground-2)); }
button.lib-row { width: 100%; text-align: left; cursor: pointer; }
.lib-row.sandbox-row { border-style: dashed; background: var(--paper); }
.lib-row.sandbox-row.is-current { border-style: solid; }

.meter-badge {
  flex: none;
  min-width: 46px;
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--ground);
  font-family: var(--font-round);
  font-size: 13px; font-weight: 700;
  text-align: center;
  color: var(--ink-2);
  white-space: nowrap;
}
/* a pairing's badge is its two sides, lit where it has something */
.pair-badge { display: flex; gap: 4px; align-items: center; justify-content: center; }
.pair-badge i { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline-2); }
.pair-badge i.poem.on { background: var(--poem); }
.pair-badge i.ost.on  { background: var(--ost); }

.lib-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lib-title {
  font-size: 15px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lib-sub {
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shared-tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline-2);
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  color: var(--ink-3);
  vertical-align: 2px;
}
.lib-actions { display: flex; gap: 5px; flex: none; }
.lib-btn {
  height: 33px;
  padding: 0 12px;
  border-radius: 9px;
  background: var(--ground);
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  white-space: nowrap;
  transition: background .13s, color .13s;
}
.lib-btn:hover { background: var(--hairline); color: var(--ink); }
.lib-btn.open-btn { background: var(--row, var(--ink)); color: #fff; }
.lib-btn.open-btn:hover { filter: brightness(1.1); }
.lib-btn.is-active { background: transparent; color: var(--row, var(--ink)); cursor: default; }
.lib-btn.delete-btn { width: 33px; padding: 0; font-size: 15px; }
.lib-btn.delete-btn:hover { background: var(--danger); color: #fff; }
.lib-btn.delete-btn.confirm { width: auto; padding: 0 10px; background: var(--danger); color: #fff; font-size: 12.5px; }
/* a whole-row button (the song pickers) shows its Open pill on hover */
button.lib-row .lib-btn.open-btn { opacity: 0; transition: opacity .12s; }
button.lib-row:hover .lib-btn.open-btn,
button.lib-row:focus-visible .lib-btn.open-btn { opacity: 1; }

.library-empty {
  padding: 22px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-3);
  background: var(--surface);
  border: 1.5px dashed var(--hairline-2);
  border-radius: var(--r-md);
}

/* the pickers colour their rows by the side they open on */
#picker-sheet .sheet { --row: var(--side); --row-soft: var(--side-soft); }

/* ---- share & backup cards ---- */
.card {
  padding: 17px;
  margin-bottom: 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.card:last-child { margin-bottom: 0; }
.card-danger { background: var(--danger-soft); border-color: #F0D3D8; }
.card-title {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 7px;
  font-family: var(--font-round);
  font-size: 16px; font-weight: 700;
}
.card-title svg { width: 17px; height: 17px; color: var(--ink-2); }
.card-danger .card-title, .card-danger .card-title svg { color: var(--danger); }
.card-desc { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.card-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.text-tools { display: flex; gap: 5px; }
.text-tool {
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 12px; font-weight: 800;
  color: var(--ink-2);
}
.text-tool:hover { background: var(--ground); color: var(--ink); }
.export-list {
  max-height: 210px;
  overflow-y: auto;
  padding: 5px;
  margin-bottom: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper);
}
.export-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px; font-weight: 600;
}
.export-item:hover { background: var(--ground); }
.export-item input { width: 17px; height: 17px; accent-color: var(--ink); flex: none; cursor: pointer; }
.export-item .lib-sub { margin-left: auto; }
.filename-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.filename-row .text-field { flex: 1; }
.filename-ext { font-size: 14px; font-weight: 700; color: var(--ink-3); }
.share-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.share-row .text-field { flex: 1; min-width: 200px; font-size: 12.5px; font-weight: 400; }

/* the instrument picker — the app's own grid, at the stand's size */
.instrument-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  padding: 2px;
}
.instrument-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
}
.instrument-card img { width: 46px; height: 46px; object-fit: contain; }
.instrument-card:hover { border-color: var(--ost); background: var(--ost-soft); }
.instrument-card.selected {
  border-color: var(--ost);
  background: var(--ost-soft);
  color: var(--ost);
}

textarea {
  width: 100%;
  border: 1.5px solid var(--hairline-2);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--surface);
  outline: none;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}
textarea:focus { border-color: var(--ink-2); }

.status-msg { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.status-msg.error { color: var(--danger); }
.status-msg.ok { color: var(--good); }

.toast {
  position: fixed;
  left: 50%; bottom: 96px;
  transform: translate(-50%, 12px);
  z-index: 60;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }


/* ============================================================
   PRESENT MODE
   The two scores and nothing else. The pane headings and the top
   bar go; the toolbar shrinks to a small bar that fades until
   it is wanted — Play, the tempo and where the music is. Layout
   is untouched: present shows what was set.
   ============================================================ */

body.present .topbar { display: none; }
body.present .pane-head { display: none; }
/* the floating toolbar gets a strip of its own, so it never sits on
   the last instrument's notes */
body.present .panes { padding: 8px 8px 74px; }
body.present .pane { border-radius: 10px; }
body.present .transport {
  position: fixed;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100vw - 24px);
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: var(--shadow-3);
  opacity: .3;
  transition: opacity .25s;
}
body.present .transport:hover,
body.present .transport:focus-within { opacity: 1; }
body.present .transport-inner { min-height: 0; padding: 7px 9px; }
/* Play and Exit, as in Rhythm Poetry's and Ostinato Builder's present
   bars. The tempo, Loop and where the music is stay in the ordinary
   toolbar. */
body.present .tool-group,
body.present .loop-btn,
body.present .bpm-btn,
body.present .readout { display: none; }
body.present .transport-inner { gap: 12px; }
body.present .play-btn { width: 44px; height: 44px; }
body.present .present-exit {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px;
  padding: 0 15px 0 12px;
  border-radius: 999px;
  background: var(--ground);
  font-size: 14px; font-weight: 700;
  color: var(--ink-2);
  transition: background .14s, color .14s;
}
body.present .present-exit:hover { background: var(--ink); color: #fff; }
body.present .present-exit svg { width: 17px; height: 17px; }


/* ============================================================
   SMALLER SCREENS
   Both bars stay one row at every width: words give way to icons
   before anything wraps.
   ============================================================ */

@media (max-width: 1100px) {
  .brand-name { display: none; }
  .show-tab { padding: 8px 14px; }
}

@media (max-width: 900px) {
  /* the switch keeps its dots and picture; the room goes to the chip */
  .show-label { display: none; }
  .show-tab { padding: 8px 13px; }
  .pane-meta { display: none; }
}

@media (max-width: 720px) {
  .home-link span { display: none; }
  .home-link { padding: 7px; }
  .autosave-label, .sandbox-clear-label { display: none; }
  .autosave-toggle, .sandbox-clear { width: 38px; height: 38px; min-height: 0; padding: 0; justify-content: center; }
  .tool-label { display: none; }
  .tool-btn { padding: 0 11px; }
  .bpm-btn { min-width: 0; }
}

@media (max-width: 640px) {
  :root { --gutter: 6px; --topbar-h: 52px; }
  /* no room for symmetry: the way home and the switch take what they
     need, and the chip takes the rest */
  .topbar { gap: 6px; padding: 0 8px; grid-template-columns: auto auto minmax(0, 1fr); }
  .brand { display: none; }
  .show-tab { padding: 7px 10px; }
  .pair-chip { max-width: none; }
  .meter-note, .edited-chip { display: none; }
  .transport-inner { gap: 6px; padding: 6px 8px; min-height: 58px; }
  .tool-group { padding-left: 6px; gap: 5px; }
  .play-btn { width: 46px; height: 46px; }
  .editing-flag { display: none !important; }
  .mixer-cols { flex-direction: column; }
  .sheet { padding: 18px; border-radius: var(--r-lg); }
  .sheet-backdrop { padding: 10px; }
  .lib-btn.rename-btn { display: none; }
  /* one screen too narrow for two scores side by side */
  #arrange-side { display: none; }

  /* ---- a phone is a column ----
     Sharing one short screen between two scores makes two scores nobody
     can read. So on a narrow screen the stand stops being a split view
     and becomes a page: each score is drawn as large as the WIDTH allows,
     is given exactly the height that takes, and the two of them scroll.
     Reading a stand on a phone means scrolling; reading two postage
     stamps does not mean anything.

     The heights come from the stand, which asks each score how tall it
     is at the size the width allows — see applyNarrow(). */
  body.narrow .panes {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--gutter);
  }
  body.narrow #pane-poem,
  body.narrow #pane-ost { flex: 0 0 auto; }
  /* nothing to drag when nothing is being shared */
  body.narrow .divider { display: none; }
  body.narrow.editing #view-btn::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
  }
}


/* ============================================================
   HOW THIS WORKS
   Rhythm Poetry's help sheet. The note is tinted in the stand's two
   sides, as its Present button is.
   ============================================================ */
.help-side-note {
  margin: 0 0 16px;
  padding: 12px 15px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--poem-soft), var(--ost-soft));
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.help-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.help-list b { color: var(--ink); }

.help-key {
  flex: none;
  min-width: 30px; height: 30px;
  /* inline-grid so the badges used mid-sentence do not become block-level */
  display: inline-grid; place-items: center;
  vertical-align: middle;
  padding: 0 7px;
  border-radius: 8px;
  background: var(--ground);
  border: 1px solid var(--hairline-2);
  font-size: 14px; font-weight: 800; color: var(--ink-2);
}
.help-list > li > .help-key { margin-top: 1px; }

/* The way to it, at the foot of the View popover, as in the two apps. */
.pop-foot { padding-top: 10px; border-top: 1px solid var(--hairline); }
.pop-link {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  text-align: left;
  transition: background .13s, color .13s;
}
.pop-link svg { width: 16px; height: 16px; flex: none; }
.pop-link:hover { background: var(--ground); color: var(--ink); }