/* ── Fingering mode ──────────────────────────────────────────
   Video hidden; the note itself is clickable (a burgundy notehead marks the
   selected note); a persistent bar on top of the tile row holds an L(o)R hand
   switch and a group of finger buttons; labels drag vertically. The
   notes/labels/toolbar only exist in the DOM while fingering mode is active
   (built/torn down by mode-fingering.js), so most rules need no scoping. Chrome
   colours all come from the Classic Grand Piano palette (theme.css). */

/* At 2× the enlarged tiles need the whole height, so the video is hidden and the
   strip fills it. At 1× (fg-1x) the layout stays study-like and the video shows. */
body.fingering-mode:not(.fg-1x) #player-col { display: none; }

/* Enlarge the tile row to 200% for precise fingering placement. We scale by real
   image height (not CSS `zoom`): WebKit/iOS resolve percentage-positioned
   overlays and getBoundingClientRect inconsistently under `zoom`, which offset
   the finger numbers / red dot and threw off tap hit-testing. Real px keeps
   labels, the dot and tap coordinates correct on every browser. The strip fills
   the freed height and scrolls; off-screen tiles keep content-visibility:auto
   (see the .bar-tile rule below), so toggling 1x/2x only reflows what's visible. */
body.fingering-mode:not(.fg-1x) #detail-layout #score-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.fingering-mode:not(.fg-1x) .bar-strip {
  flex: 1 1 auto;
  overflow: auto;
  align-items: flex-start;
  will-change: scroll-position;   /* keep the strip on its own scroll layer */
}
/* Reserve each skipped tile at its REAL 2x size (--tile-w is the 1x width ratio
   in px; the height doubles 240→480) so content-visibility:auto can keep tiles
   out of layout with no jump when they scroll in — and a 1x/2x toggle only
   reflows the handful of visible tiles instead of all 1000+. */
body.fingering-mode:not(.fg-1x) .bar-tile { contain-intrinsic-size: calc(var(--tile-w) * 2px) 480px; }
body.fingering-mode:not(.fg-1x) .bar-tile img { height: 480px; }

/* 2× keeps the selected tile-bg colour (like 1× / study), so the white-bg PNGs
   still multiply-blend onto it (see .bar-tile img in player.css) rather than
   being forced onto a flat white. This costs some scroll perf at 2×, but honours
   the chosen background colour in the fingering sub-mode. */
/* The stain tracks the tile zoom via a JS transform (see styleSelDot): full
   size on the 2x tile, half on 1x — the notehead is ~2× larger when enlarged. */

/* ── Zoom toggle (1x | 2x) ───────────────────────────────────
   The fingering button and this pill sit flush (no gap) and share a background
   in fingering mode, so the round button reads as the pill's left cap. Collapsed
   by default; slides open only in fingering mode. Same 3rem height as the button. */
#fg-zoom {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  border-radius: 0 1.5rem 1.5rem 0;      /* rounded right; flat left against the button */
  background: rgba(128, 128, 128, 0.26);  /* lighter tray; the button cap is darker */
  transition: max-width 0.22s ease, opacity 0.18s ease;
}
body.fingering-mode #fg-zoom { max-width: 96px; opacity: 1; }
body.fingering-mode #fingering-mode-btn {
  background: rgba(128, 128, 128, 0.12);  /* darker cap against the lighter tray */
  border-radius: 1.5rem 0 0 1.5rem;      /* left cap of the pill */
}
.fg-zoom-opt {
  padding: 0 11px;
  height: 100%;
  font: 700 13px var(--bs-font-monospace);
  color: #888;
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.fg-zoom-opt.fg-zoom-active { color: var(--gp-gold, #c8a96b); }
#control-bar.strip-dark .fg-zoom-opt { color: #aaa; }
#control-bar.strip-dark .fg-zoom-opt.fg-zoom-active { color: var(--gp-gold, #c8a96b); }

/* Playback is meaningless while annotating fingerings — disable the transport
   and the time readout so a stray Play can't start (or lazily load) the hidden
   video. Greyed out rather than hidden so the control bar keeps its shape. */
body.fingering-mode #transport-controls,
body.fingering-mode #current-time-display {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Pill palette (2×5 grid: 1-5 on top, mask+↙↖↘↗ below) over a clicked note ──
   Floating overlay in the Classic Grand Piano palette (see theme.css). Seamless
   charcoal block — no cell separators; hover / selected states delineate cells. */
.fg-pill {
  position: fixed;
  z-index: 1080;
  display: grid;
  grid-template-columns: repeat(5, 36px);
  background: var(--gp-charcoal, #353535);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.fg-pill-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  font-family: var(--bs-font-monospace);
  font-size: 16px;
  font-weight: 700;
  color: var(--gp-ivory, #f6f2e8);
  background: transparent;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.fg-pill-btn:hover { background: var(--gp-walnut, #84624a); }
.fg-pill-btn.sel { color: var(--gp-black, #101010); background: var(--gp-gold, #c8a96b); }

/* Selected note: a soft, semi-transparent burgundy WINE STAIN over the notehead
   — an irregular blob (randomized per selection in JS, see buildStain) with a
   few splatter droplets, sitting BELOW the finger label (z-index). The SVG box
   is fixed so every stain keeps the same overall footprint. */
.fg-seldot {
  position: absolute;
  transform: translate(-50%, -50%);   /* JS may add a random rotate() */
  color: var(--gp-burgundy, #800020); /* the SVG fills with currentColor */
  opacity: 0.5;
  pointer-events: none;
  z-index: 3;
  /* Kill inline text metrics: without this the SVG can inherit a baseline
     descender that makes its box taller than the graphic, so translate(-50%)
     centres the taller box and the stain rides a few px north (seen on tablets). */
  line-height: 0;
  font-size: 0;
}
.fg-seldot svg { display: block; overflow: visible; vertical-align: top; }

/* The finger number, horizontally locked to its note. Rendered in EVERY view
   mode (read-only overlay). Transparent background so the staff shows through
   around the digit; only the blank mask below paints a box. Display-only by
   default — no pointer events — so it never intercepts clicks in
   study/sheet/edit/performance modes. */
.fg-label {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 2px 6px;
  font-family: "TeX Gyre Schola", Georgia, serif;   /* classical engraving numerals */
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  /* Tabular figures give every digit the same 1ch advance, so a numbered label
     matches the blank mask's min-width: 1ch (below) — same box width for both. */
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: transparent;
  border-radius: 4px;
  color: var(--gp-black, #101010);
  pointer-events: none;
  z-index: 4;
  user-select: none;
}
/* A blank mask (finger 0): no visible digit, but a digit-sized opaque box in the
   tile colour to cover an engraved number underneath. This is the one label that
   keeps a background — its whole purpose is to hide what's behind it. Its width
   is reserved with a hidden "0" glyph (not the ch unit, which some browsers don't
   size to the tabular figure), so it exactly matches a numbered label's box. */
.fg-label.fg-mask {
  background: var(--tile-bg, #fff);
}
.fg-label.fg-mask::before {
  content: "0";
  visibility: hidden;
}

/* Editable only in fingering mode: a faint dashed outline so a label reads as an
   editable chip (and a blank mask, otherwise invisible, stays visible and
   grabbable); grabbable for vertical drag; click-to-select. touch-action:none
   lets a touch-drag on the label move it instead of scrolling the strip. Read-
   only modes drop all of this. */
body.fingering-mode .fg-label {
  outline: 1px dashed rgba(128, 0, 32, 0.55);
  outline-offset: -1px;
  pointer-events: auto;
  cursor: ns-resize;
  touch-action: none;
}
.fg-label.dragging { cursor: grabbing; z-index: 6; }
/* A clicked (selected) label — its finger button lights up so it can be removed. */
.fg-label.fg-sel { box-shadow: 0 0 0 2px var(--gp-gold, #c8a96b); }
/* While a label is selected (fg-can-drag, set in JS): show the drag cursor over
   the whole strip and lock its scroll (touch-action:none) so a drag from any
   clear spot nudges the label instead of panning. Cleared on deselect. */
body.fg-can-drag #bar-strip { touch-action: none; cursor: ns-resize; }
body.fg-can-drag #bar-strip * { cursor: ns-resize; }

/* Extend the placeable area vertically past the staff so a fingering can sit
   just above/below it, straddling the tile edge (pianists write fingerings in
   the margin, not only on the note). Tiles no longer clip labels (see .bar-tile
   in player.css); here the strip additionally gets a gutter painted in the tile
   background so there's room to place a label past the staff. The 3rem gutter
   matches the ±0.1 drag clamp at 2× (0.1 × 480px ≈ 48px), so a label can never
   be dragged past the padded, background-coloured band. */
body.fingering-mode .bar-strip {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* ── Unsaved-changes pill ────────────────────────────────────
   Appears on the first failed auto-save and stays until every pending change
   lands (see the outbox in mode-fingering.js). Tap to retry immediately.
   Rendered in every view mode — an unsaved fingering matters even after
   leaving fingering mode — hence body-level, above the control bar. */
#fg-save-status {
  position: fixed;
  bottom: 96px;                        /* clears the 84px control bar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1090;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gp-ivory, #f6f2e8);
  background: var(--gp-burgundy, #800020);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}