/* MusicMin — freehand annotations. Loaded after the modern UI layer. */

/* The layers sit inside #live-content, which scrolls, so they translate with the
   content rather than being pinned to the viewport. Height is set in JS from
   scrollHeight: inset:0 would size them to the visible box and marks would be left
   behind the moment the page moved. */
#live-content { position: relative; }

#live-content .anno-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

/* Multiply keeps the lyric readable through a highlighter wash instead of painting
   over it. On the dark theme multiply against a near-black background would erase the
   wash entirely, so it lightens there instead.

   Opacity is on the LAYER rather than per stroke, deliberately: the whole wash composites
   as one group, so crossing two highlighter strokes tints once instead of leaving a dark
   blotch where they overlap. */
#live-content .anno-wash { mix-blend-mode: multiply; opacity: .38; z-index: 2; }
body.dark #live-content .anno-wash { mix-blend-mode: screen; opacity: .32; }

#live-content #anno-capture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 4;
}

/* touch-action:none is what stops iPad Safari treating the first millimetre of a
   stroke as a scroll gesture and swallowing it. It is applied only while armed, so
   an un-armed Live View scrolls exactly as it did before. */
/* body.mm-modern .floating-controls button (0,2,1) out-specifies .anno-btn[aria-pressed]
   (0,2,0) and paints every button the same blue, so on a phone the floating toggle looked
   identical armed or not. Matching that specificity is the whole fix. */
body.mm-modern #floating-controls .anno-toggle[aria-pressed="true"] {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

#live-content #anno-capture.is-armed {
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: crosshair;
}

/* ---------------------------------------------------------------- palette */

/* Above .live-controls (2001) and the floating toggles (2002) so the palette is never
   buried under the strip it was opened from, but below the chord popup (2200). */
.anno-palette {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Bottom offset is set from JS, because --live-controls-height describes the control
     strip whether or not it is on screen — it wraps to ~194px on a wide desktop — and
     reserving that while the strip is hidden strands the palette in mid-page. */
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 2050;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: min(680px, calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  /* A landscape phone is ~390px tall and the palette with the stamp tray open is ~364px.
     .live-controls guards itself the same way; without this the palette simply runs off
     the screen with nothing to scroll. */
  max-height: calc(100dvh - 120px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
  padding: 9px 11px;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .28);
}
body.dark .anno-palette { background: #101733; color: #e2e8f0; border-color: rgba(203, 213, 225, .22); }
.anno-palette[hidden] { display: none; }

.anno-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.anno-btn {
  min-width: 34px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
body.dark .anno-btn { background: #1c2547; border-color: rgba(203, 213, 225, .2); }
.anno-btn[aria-pressed="true"] { background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff; }
.anno-btn:disabled { opacity: .38; cursor: default; }
.anno-btn:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; }
.anno-done { background: #16a34a; border-color: #16a34a; color: #fff; }

/* Two rows of ten. The swatch IS the colour, so it carries no label — the accessible
   name comes from aria-label, and the pressed ring is what marks the selection. */
.anno-colors { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.anno-swatch {
  min-width: 0;
  width: 100%;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, .25);
}
/* Selection has to read on all twenty, from near-black to pale yellow, so it is two
   rings rather than one: a white one inside the swatch separating the colour from the
   ring around it, and the accent colour outside. A single thin outline sat in the gap
   between swatches and vanished against the dark end of the palette. box-shadow rather
   than outline so both rings can be drawn, and a slight lift so the selected chip is
   obvious at a glance rather than on inspection. */
.anno-swatch[aria-pressed="true"] {
  outline: none;
  border-color: transparent;
  box-shadow: inset 0 0 0 2px #fff,
              0 0 0 2px var(--primary, #2563eb),
              0 2px 5px rgba(15, 23, 42, .35);
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}
body.dark .anno-swatch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px #0b1020,
              0 0 0 2px var(--primary, #60a5fa),
              0 2px 5px rgba(0, 0, 0, .5);
}

/* Size — a slider for a quick change mid-song, and a number for an exact one. */
.anno-size { gap: 8px; }
.anno-size input[type="range"] { flex: 1 1 auto; min-width: 90px; accent-color: var(--primary, #2563eb); }
.anno-size input[type="number"] {
  width: 52px;
  padding: 3px 6px;
  border-radius: 7px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-align: center;
}
body.dark .anno-size input[type="number"] { background: #1c2547; border-color: rgba(203, 213, 225, .2); }
/* A live sample of what the current setting will actually lay down. */
.anno-size-preview { flex: 0 0 auto; width: 46px; height: 22px; display: grid; place-items: center; }
.anno-size-preview i { display: block; width: 100%; border-radius: 999px; background: currentColor; }

.anno-meta { justify-content: space-between; font-size: 12px; }
.anno-check { font-size: 12px; font-weight: 650; }
.anno-marking { opacity: .72; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anno-sync-status { opacity: .72; font-weight: 700; white-space: nowrap; }
.anno-sync-status[data-state="conflict"] { color: #dc2626; cursor: pointer; text-decoration: underline; }
.anno-sync-status:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; border-radius: 3px; }
body.mm-anno-review .anno-palette .anno-tools,
body.mm-anno-review .anno-palette .anno-actions,
body.mm-anno-review .anno-palette .anno-editing,
body.mm-anno-review .anno-palette .anno-size,
body.mm-anno-review .anno-palette .anno-colors,
body.mm-anno-review .anno-palette .anno-stamps,
body.mm-anno-review .anno-palette .anno-shapes { opacity: .45; pointer-events: none; }
.anno-btn[data-act="publish-band"] { background:#4f46e5; border-color:#4f46e5; color:#fff; font-weight:700; }

@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .anno-palette {
    max-width: calc(100vw - 12px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    padding: 8px;
    gap: 6px;
  }
  .anno-marking { display: none; }

  /* Tap targets to the project's own standard. app-ui.v1.6.css uses 40-44px throughout and
     .live-controls buttons are 42px; the palette was built at desktop sizes and shipped
     27x21px colour chips, which is a quarter of the area of everything around it.
     Twenty colours in ten columns cannot work on a 390px screen — five columns of four
     gives ~64x34 instead. The palette grows taller, which is the right trade: it scrolls,
     and a chart you cannot mark accurately is worse than one with less of it showing. */
  .anno-colors { grid-template-columns: repeat(5, 1fr); }
  .anno-swatch { height: 34px; }
  .anno-btn { min-height: 42px; min-width: 42px; }
  .anno-stamp { height: 44px; }
  .anno-size input[type="number"] { min-height: 38px; font-size: 16px; }
  .anno-size input[type="range"] { min-height: 38px; }
  /* 16px is the threshold below which iOS zooms the page on focus. */
  .anno-check, .anno-scope { min-height: 38px; }
}

/* Scope picker — present only when the chart was opened from a set or a service. */
.anno-scopes { font-size: 12px; }
.anno-scopes[hidden] { display: none; }
.anno-caption { font-size: 12px; font-weight: 700; opacity: .72; }
.anno-scope {
  font-size: 12px;
  font-weight: 650;
  min-width: 0;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anno-show { display: inline-flex; gap: 6px; align-items: center; }
.anno-show .anno-btn { font-size: 12px; font-weight: 650; }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  /* Scoped to the scope row it was written for. Unscoped it also hid the Size label,
     leaving a slider on a phone with nothing saying what it does. */
  .anno-scopes .anno-caption { display: none; }
}

/* Stamp tray — twelve symbols, two rows on a phone, one on a desktop. */
.anno-stamps { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.anno-stamps[hidden] { display: none; }
.anno-shapes { display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:6px; }
.anno-shapes[hidden] { display:none; }
.anno-stamp { min-width: 0; width: 100%; padding: 0; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.anno-stamp svg { pointer-events: none; }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .anno-stamps { grid-template-columns: repeat(6, 1fr); }
}

/* ------------------------------------------------------------ typed notes */

/* Pinned above the chart, styled like the band-instructions banner it sits beside so the
   two read as the same kind of thing — one shared, one yours. */
.anno-note-top {
  /* Inside the scroll flow at the top of the chart, above the first section. */
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 9px;
  border-left: 4px solid var(--primary, #2563eb);
  background: #eff6ff;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}
body.dark .anno-note-top { background: #16203f; color: #e2e8f0; }
.anno-note-top[hidden] { display: none; }

/* Shown once when the song opens, dismissed by hand. */
.anno-note-card {
  position: fixed;
  left: 50%;
  top: calc(22% + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 2060;
  max-width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 120px - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .32);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.dark .anno-note-card { background: #101733; color: #e2e8f0; border-color: rgba(203, 213, 225, .22); }
.anno-note-card p { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.anno-note-card .anno-btn { align-self: flex-end; }

.anno-note-editor,
.anno-sheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 2070;
  width: min(520px, calc(100vw - 20px));
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.dark .anno-note-editor,
body.dark .anno-sheet { background: #101733; color: #e2e8f0; border-color: rgba(203, 213, 225, .22); }
.anno-note-editor label,
.anno-sheet > label { font-size: 12px; font-weight: 750; }
.anno-note-editor textarea {
  width: 100%;
  resize: vertical;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 14px;
}
body.dark .anno-note-editor textarea { background: #1c2547; border-color: rgba(203, 213, 225, .2); }
.anno-note-actions { justify-content: flex-end; }

/* Sheets — the in-app replacement for the native prompts and confirms this feature used to
   lean on. Deliberately the note editor's shell: one panel shape over the chart, already
   solved for both themes and for a phone's safe area. */
.anno-sheet { max-height: min(70vh, 560px); overflow-y: auto; gap: 10px; }
.anno-sheet-note { margin: 0; font-size: 12.5px; line-height: 1.45; opacity: .78; }
.anno-sheet-field { display: flex; flex-direction: column; gap: 4px; }
.anno-sheet-field label { font-size: 12px; font-weight: 700; opacity: .8; }
.anno-sheet-field input[type="text"],
.anno-sheet-field select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: inherit;
  font: inherit;
  /* 16px is the threshold below which iOS zooms the page on focus. */
  font-size: 16px;
}
.anno-sheet-field input[type="color"] { width: 56px; height: 34px; padding: 2px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; }
body.dark .anno-sheet-field input[type="text"],
body.dark .anno-sheet-field select,
body.dark .anno-sheet-field input[type="color"] { background: #1c2547; border-color: rgba(203, 213, 225, .2); }
.anno-sheet-field select { padding: 4px; }

/* One tap picks a template, a revision or a layer — these lists replaced "type the number
   of the line you want", so the whole row is the target and it is a full-width one. */
.anno-sheet-list { display: flex; flex-direction: column; gap: 6px; }
.anno-sheet-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  text-align: left;
  font-weight: 650;
}
.anno-sheet-detail { font-size: 12px; font-weight: 500; opacity: .7; white-space: nowrap; }

/* Text tool — the input sits where the word will, so what you type is where it lands. */
#live-content .anno-text-input {
  position: absolute;
  z-index: 5;
  min-width: 70px;
  max-width: 60%;
  padding: 1px 5px;
  border: 1px dashed currentColor;
  border-radius: 5px;
  background: rgba(255, 255, 255, .94);
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
  outline: none;
}
body.dark #live-content .anno-text-input { background: rgba(16, 23, 51, .94); }

/* Select tool — the delete action appears only while something is selected, so it can
   never be mistaken for the bin, which clears the whole chart. */
.anno-delete { background: #dc2626; border-color: #dc2626; color: #fff; }
.anno-delete[hidden] { display: none; }
#live-content .anno-selection { pointer-events: none; }
#live-content #anno-capture.is-armed.is-selecting { cursor: default; }

/* Collapsed palette — the controls wanted mid-song, over a chart that stays readable.
   Tool, size, colour, undo and redo are all one tap from here; anything else is behind
   "Show tools". */
.anno-mini {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 2050;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  /* max-content, not shrink-to-fit. A fixed-position column has no width to inherit, so
     the bar inside it was handed a narrower box than its own contents and wrapped to two
     rows at any viewport — 673px included, nowhere near a phone. */
  width: max-content;
  max-width: calc(100vw - 16px);
  -webkit-tap-highlight-color: transparent;
}
.anno-mini[hidden] { display: none; }

.anno-mini-bar,
.anno-mini-drawer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .26);
}
body.dark .anno-mini-bar,
body.dark .anno-mini-drawer {
  background: #101733;
  color: #e2e8f0;
  border-color: rgba(203, 213, 225, .22);
}
/* Wraps rather than overflows: seven controls plus a word is a tight fit on a 390px
   phone, and a bar running off the edge would hide the way back to the tools. */
.anno-mini-bar { justify-content: center; flex-wrap: wrap; }
.anno-mini-drawer {
  border-radius: 18px;
  justify-content: center;
  width: min(420px, calc(100vw - 24px));
  box-sizing: border-box;
}
.anno-mini-drawer[hidden] { display: none; }
.anno-mini-panel { display: flex; align-items: center; gap: 8px; width: 100%; }
.anno-mini-panel[hidden] { display: none; }

/* The colour button is the current colour: no glyph, just the ink the next stroke lays
   down, which is the one thing a swatch says better than a word. */
.anno-mini-color { padding: 0 10px; }
.anno-mini-dot {
  display: block;   /* a bare span is inline, and an inline box ignores width entirely */
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, .28);
}
body.dark .anno-mini-dot { border-color: rgba(226, 232, 240, .35); }
.anno-mini-show { padding: 0 12px; font-weight: 700; }

.anno-mini-size input[type="range"] { flex: 1 1 150px; min-width: 110px; }
.anno-mini-size-value {
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  opacity: .75;
}
/* The same grid as the palette's swatches, for the same reason: twenty colours only fit
   ten to a row on a desktop, and on a phone five columns of four keeps each one a
   fingertip wide. */
.anno-mini-colors { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.anno-mini-colors .anno-swatch { height: 26px; }

/* These must sit after the rules above, not in the phone block near the top of the file:
   same specificity, so source order decides, and from up there they never applied at all. */
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .anno-mini-colors { grid-template-columns: repeat(5, 1fr); }
  .anno-mini-colors .anno-swatch { height: 34px; }
  /* Seven controls and a word on one row, down to a 360px phone. The icons give up a few
     pixels of width — they keep the full 42px of height, so the target stays a fingertip —
     because a second row costs 45px of chart, which is the thing the mini toolbar exists to
     give back. */
  .anno-mini-bar, .anno-mini-drawer { gap: 4px; padding: 5px 6px; }
  .anno-mini-bar .anno-btn { min-width: 38px; }
  .anno-mini-show { font-size: 12px; padding: 0 8px; min-width: 0; }
}

/* Width alone, deliberately, and not the canonical phone condition used everywhere else in
   this file: this is about how much room seven controls and a word have on one line, and a
   phone held in landscape has 700px of it. */
@media (max-width: 384px) {
  .anno-mini-bar { gap: 3px; padding: 5px 5px; }
  .anno-mini-bar .anno-btn { min-width: 36px; }
  .anno-mini-show { font-size: 11px; padding: 0 6px; }
}

/* Done is a word, and deliberately not green: a tick would say "confirm", implying marks are
   unsaved until it is pressed. They are written the moment the pen lifts. */
.anno-done { background: #475569; border-color: #475569; color: #fff; font-weight: 700; padding: 0 12px; }
body.dark .anno-done { background: #64748b; border-color: #64748b; }

/* Only present with ?annodebug=1. */
.anno-debug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  opacity: .8;
  word-break: break-word;
}

/* The bar carries the controls that dismiss the palette, ruled off from the ones that
   change what a mark looks like so the two cannot be confused by a thumb. */
.anno-bar {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, .14);
}
body.dark .anno-bar { border-top-color: rgba(203, 213, 225, .18); }
.anno-bar .anno-hide { margin-right: auto; }
.anno-hide, .anno-reset-zoom { font-size: 13px; font-weight: 700; padding: 0 14px; }
.anno-reset-zoom[hidden] { display: none; }

/* Which layer the tools write to. Distinct from the Show toggles below it — those control
   what is visible — so the two are not mistaken for each other at a glance. */
.anno-editing { gap: 6px; font-size: 12px; }
.anno-editing[hidden] { display: none; }
.anno-editing-btn { font-size: 12px; font-weight: 650; }
.anno-editing-btn[aria-pressed="true"] { background: #7c3aed; border-color: #7c3aed; color: #fff; }

/* A scope that holds marks for the layer being edited. The chart shows every scope at once,
   so without this the only way to find marks you can see but cannot erase is trial and error. */
.anno-scope.has-marks::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  opacity: .75;
}

/* Arrangements of this song that carry marks you are not currently looking at. Marks on
   another version are otherwise invisible and unreachable — nothing said they existed. */
.anno-versions {
  font-size: 11px;
  font-weight: 650;
  opacity: .78;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anno-versions[hidden] { display: none; }