/* ── Floating bottom navigation bar — Motlong Charts ───────────────────────
   Loaded on every page via body.floating-ui (chart + hub pages). Reuses the
   app's existing material + tokens; the signature is the interaction, not a palette.
   ------------------------------------------------------------------------- */

/* 1 · Hide the old chrome. The control ELEMENTS inside still exist in the DOM
      (so app.js wires them); floating-bar.js borrows specific ones into the
      sheet, where they're no longer descendants of these hidden parents. */
.floating-ui header.top,
.floating-ui .bar { display: none !important; }
/* app.js's own mobile bar-sheet is unused here — keep it out of the way */
.floating-ui #bar-sheet,
.floating-ui #bar-sheet-scrim { display: none !important; }

/* 2 · Reserve room: top breathing space (no more sticky header) + bottom space
      so the chart never hides behind the floating bar. */
.floating-ui { padding-bottom: calc(var(--fbar-h) + var(--fbar-gap) + 1.25rem + env(safe-area-inset-bottom)); }   /* clears the (taller) bar + its bottom gap + breathing room */
.floating-ui .wrap { padding-top: calc(env(safe-area-inset-top) + 1rem); }
.floating-ui .hub { padding-top: calc(env(safe-area-inset-top) + 1rem); }   /* hub pages: nav.js header is hidden, so content needs its own top room */

/* Shared radius scale — one value for small controls, one for larger card/tiles.
   Every interactive cell pulls from these so radii can't drift apart again. */
.floating-ui { --r-control: .6rem; --r-card: .8rem; }

/* Concentric-corner system. The bar's BOTTOM corners are inset-parallel to the
   iPhone's screen corners — inner_radius = screen_radius − gap — so the bar nests
   into the device corner instead of fighting it with capsule ends. CSS can't read
   the device's corner radius (it's private to iOS), so --screen-radius is set per
   Josh's phone (iPhone 12–14 / 16e = 47.33pt). Retarget for other models:
   55px = iPhone 14 Pro–16 Plus, 62px = 16 Pro / 17.
   On phones these nest concentrically into the screen corner; desktop/tablet reuse the
   same radius + height for visual consistency (no device corner there — shared language). */
.floating-ui{
  --screen-radius: 47.33px;
  --fbar-gap: .75rem;                                              /* bottom + side inset (uniform → one radius is truly concentric) */
  --fbar-r-bottom: calc(var(--screen-radius) - var(--fbar-gap));  /* ≈35px — concentric with the screen corner */
  --fbar-r-top: var(--fbar-r-bottom);                            /* symmetric — top matches the concentric bottom (per Josh) */
  --fbtn-py: 1.05rem;                                             /* taller bar so the ~35px bottom radius can actually render */
  --fbtn-r: calc(var(--fbar-r-bottom) - .35rem);                 /* button highlight nests concentrically inside the bar's .35rem padding (≈30px) so the end buttons follow the bar corner */
  --fbar-h: 4.3rem;                                               /* nominal rendered height (.35+1.05+1.5+1.05+.35) — used by the content reserve */
}

/* ── The floating bar ─────────────────────────────────────────────────── */
.fbar {
  position: fixed; z-index: 65;          /* above the drawer, so the drawer emerges from behind it */
  left: max(env(safe-area-inset-left), .75rem);
  right: max(env(safe-area-inset-right), .75rem);
  bottom: .75rem;
  max-width: 30rem; margin-inline: auto;
  display: flex; align-items: stretch; gap: .15rem;
  padding: .35rem;
  border-radius: var(--fbar-r-top, 1.8rem) var(--fbar-r-top, 1.8rem) var(--fbar-r-bottom, 1.8rem) var(--fbar-r-bottom, 1.8rem);   /* top: gentle echo · bottom: concentric with the iPhone screen corner */
  background: var(--bar-bg); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 .1rem 0 rgba(255,255,255,.04) inset,
              0 1.2rem 2.4rem -.7rem rgba(0,0,0,.5),
              0 .3rem .8rem -.4rem var(--bar-shadow);
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease, max-width .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, border-radius .2s ease;
}
/* while a sheet is open, square the top corners so the sheet flows into the bar */
.fbar.sheet-open { border-radius: 0 0 var(--fbar-r-bottom, 1.4rem) var(--fbar-r-bottom, 1.4rem); }   /* square the top to merge with the sheet; keep the concentric bottom */
/* hide-on-scroll: slide off the bottom and shrink a little as it goes */
.fbar.fbar-hidden { transform: translateY(120%) scale(.9); opacity: 0; pointer-events: none; }

/* Desktop & tablet float the whole package a little higher off the bottom edge;
   phones keep the bar thumb-low. Width+height gate excludes phones in BOTH
   orientations (portrait too narrow, landscape too short). The sheet tracks the
   bar's live position (place() in floating-bar.js), so lifting the bar lifts it too. */
@media (min-width: 768px) and (min-height: 600px) {
  /* Desktop & tablet share the phone's rounded, taller treatment for consistency.
     There's no device corner to be concentric with in a browser window — the radius
     language is simply reused (all the radius/height vars inherit from .floating-ui).
     Only the vertical position differs: float the package a little higher. */
  .fbar { bottom: calc(env(safe-area-inset-bottom) + 1.2rem); }
}

/* Hub bar (Home + Search): a compact centred pill when closed; widens to full
   width and spreads the buttons to merge with a sheet when one opens. The buttons
   keep the base flex:1, so they fill (and shrink with) the animating max-width —
   no flex snap. Width is driven by .sheet-wide, which is removed PART-WAY through
   the close (see floating-bar.js) so the pill re-forms during the sheet's collapse
   instead of after it. Corner-rounding stays on .sheet-open (removed once fully
   closed), so the corners stay merged with the sheet the whole way down. */
.fbar--hub { max-width: 8rem; justify-content: center; }
.fbar--hub.sheet-wide { max-width: 30rem; }

.fbtn {
  position: relative;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--fbtn-py, .65rem) .15rem;
  border: 0; border-radius: var(--fbtn-r, 1.05rem); background: transparent; color: var(--muted);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .16s ease, background .16s ease, transform .1s ease;
}
.fbtn svg { width: 1.5rem; height: 1.5rem; display: block; }
.fbtn:hover { color: var(--text); }
.fbtn:active { transform: scale(.93); }
.fbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fbtn.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
/* Key button: the live key (G / NNS / 123) + a small grid glyph, in place of an icon */
.fbtn-keyrow { display: flex; align-items: center; justify-content: center; gap: .22rem; height: 1.5rem; }
.fbtn-keytext { font-family: var(--display); font-weight: 400; font-size: 1.4rem; line-height: 1; letter-spacing: .01em; transform: translateY(-.08em); }   /* sized to balance the icon-only bar; nudged up for optical centering (Oswald caps sit low) */
.fbtn-keyrow svg { width: 1rem; height: 1rem; }
.fbtn--wide { flex-grow: 1.25; }   /* the Key button gets a bit more room than the rest, for balance */
/* Transpose button: accent dot when a down-tuning or capo is engaged */
.fbtn--flagged::after {
  content: ""; position: absolute; top: .55rem; left: 50%; transform: translateX(.62rem);
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 .12rem var(--bar-bg);
}

/* ── The draggable sheet ──────────────────────────────────────────────── */
.fscrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.45); opacity: 0; pointer-events: none;
  touch-action: none;   /* block background scroll when scrim is active */
  transition: opacity .25s ease;
}
.fscrim.on { opacity: 1; pointer-events: auto; }

/* The drawer's base sits INSIDE the bar (JS sets `bottom` to the bar's vertical
   centre and `padding-bottom` so the content clears above the bar). It's behind
   the bar (z), and `justify-content:flex-end` keeps content pinned to the bottom
   so, as the height animates open, the content is revealed BOTTOM-UP — it appears
   to rise out of the bar rather than unfurl from the top. */
/* Outer = the animated CLIP window. No padding, so height:0 is truly 0 when closed
   (nothing shows above the bar). Its own bg/shadow render only while .open. */
.fsheet {
  position: fixed; z-index: 60;
  left: max(env(safe-area-inset-left), .75rem);
  right: max(env(safe-area-inset-right), .75rem);
  bottom: 5rem; max-width: 30rem; margin-inline: auto;   /* JS overrides bottom */
  height: 0; overflow: hidden;
  background: var(--bg-elev); border-radius: var(--fbar-r-top, 1.4rem) var(--fbar-r-top, 1.4rem) 0 0;   /* top corners match the bar so the open shape reads as one rounded container */
  transition: height .32s cubic-bezier(.22,.61,.36,1);
  will-change: height;
}
.fsheet.open { box-shadow: 0 -1.2rem 2.8rem -.7rem rgba(0,0,0,.5); }   /* shadow only while open */

/* Inner = the card. Full target height, pinned to the bottom of the clip, so as the
   clip's height animates open the content is revealed BOTTOM-UP (rises from the bar).
   Its padding-top reserves the grip; JS sets its height + padding-bottom. */
.fsheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  padding-top: 1.7rem;
}

.fgrip {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;   /* rides the top edge, always visible while dragging */
  height: 1.7rem; padding: 0; border: 0; background: transparent;
  cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.fgrip:active { cursor: grabbing; }
.fgrip::before {
  content: ""; position: absolute; top: .55rem; left: 50%; transform: translateX(-50%);
  width: 2.6rem; height: .3rem; border-radius: .3rem; background: var(--line);
  transition: background .16s ease;
}
.fgrip:hover::before { background: var(--accent); }
.fgrip:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: var(--fbar-r-top, 1.4rem) var(--fbar-r-top, 1.4rem) 0 0; }

.fsheet-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: 0 1.1rem .55rem;
}
.fsheet-title {
  font-family: var(--display); font-weight: 600; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.fsheet-x {
  width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center;
  border: 0; border-radius: .5rem; background: transparent; color: var(--muted);
  cursor: pointer; transition: color .15s ease, background .15s ease;
}
.fsheet-x:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.fsheet-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fsheet-x svg { width: 1.1rem; height: 1.1rem; }

.fsheet-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: .2rem 1.1rem .2rem;     /* fills the inner card's fixed height; scrolls if content is taller */
  overscroll-behavior: contain;
  touch-action: pan-y;             /* tell iOS this element owns vertical pan; prevents background scroll hijack */
}

/* ── Hosted (relocated) panels: neutralize their anchored/popover positioning
      so they lay out as plain blocks inside the sheet body. (Mirror of the
      app's own .bar-sheet-body > * rule.) !important beats inline styles
      (#song-search / #sgpop set inline top/right on open). */
.fsheet-body #capo-pop,
.fsheet-body #song-search,
.fsheet-body #sgpop {
  position: static !important; inset: auto !important; transform: none !important;
  width: 100% !important; min-width: 0 !important; max-width: none !important;
  box-shadow: none !important; border: 0 !important; background: transparent !important;
  padding: 0 !important; margin: 0 !important; display: block !important;
}
.fsheet-body #sgpop[hidden],
.fsheet-body #song-search[hidden],
.fsheet-body #capo-pop[hidden] { display: block !important; }   /* shown while hosted */
.fsheet-body .sgpop-h,
.fsheet-body .capo-pop-h { display: none; }                     /* sheet title already names it */

/* Hub Search (built from window.SONGS) — reuse the .ssr styling; the sheet body
   owns the scroll, and rows are links (no underline). */
.fsheet-body .fp-search .song-search-bar { padding-left: 0; padding-right: 0; }
.fsheet-body .fp-search .song-search-results { max-height: none; overflow: visible; padding-left: 0; padding-right: 0; }
.fsheet-body .fp-search .ssr { text-decoration: none; color: var(--text); }

/* The Display panel hosts the real toolbar buttons; force visible the ones
   styles.css hides at phone widths (theme normally lives in the menu; columns
   are hidden on phones). In the sheet they're available regardless. */
.fsheet-body #toggle-theme,
.fsheet-body #toggle-cols { display: inline-flex !important; }

/* ── Panel scaffolding (built by floating-bar.js) ─────────────────────── */
.fp-section { margin-top: .4rem; }
.fp-section + .fp-section { margin-top: 1.1rem; }   /* unified section gap (shared by all sheets) */

/* Tuning grid (rebuilt as a thin shell over setDowntune) */
.fp-tunegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }   /* 8 tunings → 2 rows */
.fp-tune {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
  min-height: 2.75rem; padding: .5rem .2rem; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--bg); color: var(--text); cursor: pointer; text-align: center;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.fp-tune:hover { border-color: var(--accent); color: var(--accent); }
.fp-tune:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fp-tune.on {                                   /* selected — same gradient as keys / chips / toggles */
  border-color: transparent; color: var(--accent-ink); font-weight: 700;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.fp-tune-k { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.fp-tune-s { font-size: .64rem; color: var(--muted); }
.fp-tune.on .fp-tune-s { color: var(--accent-ink); opacity: .8; }   /* readable on the gradient */

/* Capo — the real #capo-pop, hosted and restyled into a large stepper matching
   the tuning/key buttons: ↺ reset · − · big readout (N → shapes) · + · ✨ auto.
   Controls stay wired by id, so setCapo / updateCapoUI keep the readout live. */
.fsheet-body #capo-pop .capo-pop-row {
  display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .15rem 0;   /* outer buttons spaced .4rem like the tuning grid above (not stretched to the gutters) */
}
.fsheet-body #capo-pop .capo-btn,
.fsheet-body #capo-pop .capo-auto {
  width: 3rem; height: 3rem; margin: 0; border: 1px solid var(--line); border-radius: var(--r-control);   /* all four buttons same size */
  background: var(--bg); color: var(--text); display: grid; place-items: center; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease;
}
.fsheet-body #capo-pop .capo-btn { font-size: 1.5rem; line-height: 1; }   /* − / + glyphs */
.fsheet-body #capo-pop .capo-reset,
.fsheet-body #capo-pop .capo-auto { color: var(--muted); }                 /* utilities — same size, subtler colour */
.fsheet-body #capo-pop .capo-reset svg { width: 1.2rem; height: 1.2rem; }
.fsheet-body #capo-pop .capo-auto svg { width: 1.3rem; height: 1.3rem; }
.fsheet-body #capo-pop .capo-btn:hover,
.fsheet-body #capo-pop .capo-auto:hover { border-color: var(--accent); color: var(--accent); }
.fsheet-body #capo-pop .capo-btn:active,
.fsheet-body #capo-pop .capo-auto:active { transform: scale(.94); }
.fsheet-body #capo-pop .capo-btn:focus-visible,
.fsheet-body #capo-pop .capo-auto:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* readout: number + played-shape key the same large size; arrow kept subtle */
.fsheet-body #capo-pop .capo-readout { gap: .4rem; padding: 0 .6rem; }   /* extra left/right room for the number + key */
.fsheet-body #capo-pop .capo-n { font-size: 1.9rem; min-width: 2rem; color: var(--text); }
.fsheet-body #capo-pop .capo-shape { font-size: 1.9rem; gap: .3rem; }   /* key matches the number */
.fsheet-body #capo-pop .capo-shape-arrow { font-size: 1.1rem; }         /* connector stays small */
.fsheet-body #capo-pop .capo-shape-k { min-width: 2rem; }
/* Capo is meaningless in NNS / Numbers view — dim + lock it (mirrors #capo.disabled) */
.fp-capo-off { opacity: .4; pointer-events: none; transition: opacity .2s ease; }

/* ── Display panel — toggle tiles (Chords / Columns / Theme) + a text-size stepper ── */
.fp-dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.fp-dtile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
  padding: 1.05rem .5rem; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--bg); color: var(--text); cursor: pointer;
  font-family: var(--display); font-weight: 500; font-size: .92rem; letter-spacing: .01em;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .1s ease;
}
.fp-dtile svg { width: 1.55rem; height: 1.55rem; color: var(--muted); transition: color .15s ease; }
.fp-dtile:hover { border-color: var(--accent); color: var(--accent); }
.fp-dtile:hover svg { color: var(--accent); }
.fp-dtile:active { transform: scale(.96); }
.fp-dtile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fp-dtile.on { border-color: transparent; background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: var(--accent-ink); }
.fp-dtile.on svg { color: var(--accent-ink); }
/* Two-column layout is pointless on a phone-width chart — disable below landscape width */
@media (max-width: 600px) { .fp-dtile--cols { opacity: .4; pointer-events: none; } }
/* text-size stepper — labelled card with − / current% / + */
.fp-dsize { margin-top: 1.1rem; display: flex; justify-content: center; padding: .1rem .15rem; }
.fp-dsize-row { display: flex; align-items: center; gap: .4rem; }
.fp-dstep {                                   /* identical button to the capo stepper */
  width: 3rem; height: 3rem; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--bg); color: var(--text);
  font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.fp-dstep--val { width: 3.6rem; font-size: 1rem; color: var(--muted); }
.fp-dstep:hover { border-color: var(--accent); color: var(--accent); }
.fp-dstep:active { transform: scale(.94); }
.fp-dstep:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Key grid — NNS/123 live in the SAME grid at the SAME size as the keys; 5 cols → 4 rows */
.fp-keygrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.fp-key {
  display: grid; place-items: center; min-height: 2.75rem;
  padding: .3rem .1rem; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--bg); color: var(--text); cursor: pointer;
  font-family: var(--display); font-weight: 500; font-size: .95rem; letter-spacing: .01em;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease;
}
.fp-key--mode { font-weight: 700; letter-spacing: .03em; }   /* NNS / 123 — same size, slight weight */
.fp-key-nav { display: flex; gap: .15rem; }
.fp-key-nav__btn { flex: 1; font-size: 1rem; }
.fp-key-nav__btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.fp-key-nav__btn:last-child  { border-top-left-radius: 0;  border-bottom-left-radius: 0; }
.fp-key:hover { border-color: var(--accent); color: var(--accent); }
.fp-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fp-key.on {
  border-color: transparent; color: var(--accent-ink); font-weight: 700;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

/* Home — primary nav as 2×2 tiles; secondary actions 2×2, dimmed + smaller (not buttons) */
.fp-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.fp-tile {
  display: flex; align-items: center; gap: .6rem; padding: .85rem .85rem;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); color: var(--text);
  font-family: var(--display); font-weight: 500; font-size: 1.04rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .1s ease;
}
.fp-tile svg { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; color: var(--muted); }
.fp-tile:hover { border-color: var(--accent); color: var(--accent); }
.fp-tile:hover svg { color: var(--accent); }
.fp-tile:active { transform: scale(.97); }
.fp-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fp-sub { margin-top: 1.1rem; gap: .35rem .9rem; }
.fp-subitem {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .3rem;
  background: none; border: 0; text-align: left; cursor: pointer; text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: .86rem; letter-spacing: .01em;
  color: var(--muted); opacity: .82;
  transition: color .14s ease, opacity .14s ease;
}
.fp-subitem svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--faint); }
.fp-subitem:hover { color: var(--accent); opacity: 1; }
.fp-subitem:hover svg { color: var(--accent); }
.fp-subitem:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: .4rem; }
/* Editor entry points (Import a song / Edit this song) are admin-only: hidden
   unless signed in, using the app's reactive body.is-admin gate. editor.html
   itself also redirects non-admins, so this is the visible half of that gate. */
body:not(.is-admin) .fp-subitem.admin-only { display: none !important; }

/* Singers & Reference (hosted #sgpop) — key chips styled exactly like the main key buttons */
.fsheet-body #sgpop .sg-row { padding: .65rem .15rem; gap: .6rem; }
.fsheet-body #sgpop .sg-name { font-size: 1.15rem; }
.fsheet-body #sgpop .sg-chips { gap: .4rem; }
.fsheet-body #sgpop .sg-chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
  font-family: var(--display); font-weight: 500; font-size: 1.05rem; letter-spacing: .01em;
  min-width: 3.2rem; padding: .4rem .7rem; border-radius: var(--r-control);
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
.fsheet-body #sgpop .sg-chip:hover { border-color: var(--accent); color: var(--accent); }
.fsheet-body #sgpop .sg-chip.on {
  border-color: transparent; color: var(--accent-ink); font-weight: 700;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.fsheet-body #sgpop .sg-chip.on:hover { color: var(--accent-ink); }

/* Reference rows: artist name on the left — dimmer + a touch smaller than singer
   names, vertically centred with the key. The media links collapse behind a
   right-caret toggle that slides them out leftward; the key sits on the right.
   floating-bar.js wraps the media in .ref-reveal, injects .ref-caret, and orders
   the row [name][reveal][caret][key]. (Key inherits the general .sg-chip size, so
   singer + reference keys stay the same size.) */
.fsheet-body #sgpop .sg-row--ref {
  display: flex; align-items: center; gap: .5rem; padding: .55rem .15rem;
}
.fsheet-body #sgpop .sg-row--ref .sg-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 1rem; font-weight: 500; color: var(--muted);   /* less bright + a little smaller than singer names */
  line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fsheet-body #sgpop .sg-row--ref .sg-chips { flex: 0 0 auto; }
/* collapsible media — width animates open; clipped + faded when closed */
.fsheet-body #sgpop .ref-reveal {
  flex: 0 0 auto; overflow: hidden; max-width: 0; opacity: 0;
  transition: max-width .32s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.fsheet-body #sgpop .ref-reveal.open { max-width: 9rem; opacity: 1; }
.fsheet-body #sgpop .ref-ics { display: flex; gap: .4rem; padding-right: .1rem; }
.fsheet-body #sgpop .ref-ic { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: var(--r-control); }
.fsheet-body #sgpop .ref-ic svg { width: 1.15rem; height: 1.15rem; }
/* caret toggle — fixed anchor just left of the key; chevron flips on open */
.fsheet-body #sgpop .ref-caret {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--bg); color: var(--muted); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.fsheet-body #sgpop .ref-caret:hover { color: var(--accent); border-color: var(--accent); }
.fsheet-body #sgpop .ref-caret:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fsheet-body #sgpop .ref-caret svg { width: 1.05rem; height: 1.05rem; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.fsheet-body #sgpop .ref-caret.open svg { transform: rotate(180deg); }

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fsheet { transition: none; }
  .fscrim { transition: none; }
  .fbtn, .fp-key { transition: color .01s, background .01s; }
}