/* Tabs styles. Loaded by index.html; saved for offline use by sw.js. */
:root {
  /* text-safe accent; the light looks set a deeper one (4.14.2) */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* the tuner: the string you're tuning (green; brightens to --good in tune) */
  
  
  
  
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  
  
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); touch-action: pan-x pan-y; } /* 4.29.1 (Graham): no pinch or double-tap zoom on any page; Text size in Tools makes a sheet bigger, and the Tour Map zooms itself (touch-action: none, Leaflet) */
body {
  margin: 0; min-height: 100dvh; color: var(--fg); font-size: 16px;
  
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, textarea { outline: none; }
::placeholder { color: var(--muted); }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.app { max-width: 520px; margin: 0 auto; padding: calc(18px + var(--safe-t)) 20px calc(110px + var(--safe-b)); }

/* Surfaces */
.glass {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--rim);
  box-shadow: inset 0 1px 0 var(--rim-hi);
}

/* Header */
.head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 4px; }
.title { font-family: var(--serif); font-weight: 400; font-size: 40px; letter-spacing: -0.01em; line-height: 1.1; margin: 0; }
.ib { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding: 0; color: var(--fg-2); flex: none; position: relative; }
.ib::after { content: ""; position: absolute; inset: -4px; }
.row-btns { display: flex; align-items: center; gap: 10px; }
/* Compact song header: fades out scrolling down, fades in scrolling up */
.chead { position: fixed; z-index: 25; left: 0; right: 0; top: 0; padding-top: calc(10px + var(--safe-t)); opacity: 0; pointer-events: none; transition: opacity .12s linear; }
.chead::before { content: ""; position: absolute; inset: 0 0 -18px; background: var(--bar); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
.chead .in { position: relative; max-width: 520px; margin: 0 auto; padding: 0 20px 8px; display: flex; align-items: center; gap: 12px; height: 56px; }
.chead .ctitle { flex: 1; min-width: 0; border: 0; background: none; padding: 4px 0; text-align: left; color: var(--fg); }
.chead .ct { font-family: var(--serif); font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chead .cs { font-size: 12.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chead .cs b { color: var(--fg-2); font-weight: 500; }

/* Chips */
.chips { display: flex; gap: 4px; margin: 14px 0 0; }
.chips > * { flex: 1 1 auto; min-width: 0; }
.chip { height: 28px; padding: 0 12px; font-size: 13px; }

/* Sections and lists */
.label { margin: 22px 4px 8px; }
.label.lrow { display: flex; align-items: center; justify-content: space-between; }
.sortby { position: relative; display: inline-flex; align-items: center; gap: 3px; }
.sortby .chev { width: 13px; height: 13px; transform: rotate(90deg); opacity: .7; }
.sortby select { position: absolute; inset: 0; opacity: 0; font-size: 16px; }
.row .hit { font-style: italic; }
.row .hit mark { background: none; color: var(--accent-ink); font-style: normal; }
.list { border-radius: 16px; overflow: hidden; }
.row { display: flex; align-items: center; width: 100%; border: 0; background: none; text-align: left; color: var(--fg); }
.row .txt { flex: 1; min-width: 0; }
.row .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heart { width: 14px; height: 14px; fill: var(--accent); flex: none; }
.recent { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc { border-radius: 14px; padding: 12px 14px; text-align: left; color: var(--fg); min-width: 0; }
.rc .t { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc .a { font-size: 12.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { color: var(--muted); text-align: center; padding: 56px 24px; line-height: 1.6; font-size: 15px; }

/* Bottom bars */
.dock { position: fixed; left: 50%; bottom: calc(14px + var(--safe-b)); width: min(496px, calc(100% - 24px)); transform: translateX(-50%); z-index: 20; display: flex; gap: 10px; transition: transform .15s; }
.dock-fade { position: fixed; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10; }
.cmd { flex: 1; min-width: 0; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; }
.cmd svg { color: var(--accent-ink); }
.cmd input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; height: 100%; }
.cmd .clear[hidden] { display: none; }
.cmd .clear { width: 32px; height: 32px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; padding: 0; }
.add { display: grid; place-items: center; flex: none; }
.add svg { width: 20px; height: 20px; stroke-width: 2.2; }

/* Song view */

.keybtn { display: inline-flex; align-items: center; gap: 4px; font: inherit; }
.keybtn .kchev { width: 12px; height: 12px; transform: rotate(90deg); }
.song-title { font-size: 36px; letter-spacing: -0.01em; line-height: 1.1; margin: 18px 0 6px; overflow-wrap: anywhere; }
.metarow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.metarow .meta { margin-bottom: 0; }
.stat { display: inline-flex; align-items: center; gap: 6px; }
.stat .pl { color: var(--muted); }
.row .a .st.got { color: #7ac47f; }
.weekly { font-size: 13px; color: var(--muted); margin: 2px 4px 0; }
/* Today: streak dots and the nudge, under the title */
.today { margin: 2px 4px 0; display: flex; flex-direction: column; gap: 6px; }
.today .weekly { margin: 0; display: flex; align-items: center; gap: 8px; }
.today .weekly b { color: var(--fg-2); font-weight: 600; }
.t-dots { display: inline-flex; gap: 3px; flex: none; }
.t-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rim); }
.t-dots i.on { background: var(--accent); box-shadow: 0 0 5px var(--glow-c, rgba(255,150,70,.55)); }
.t-dots i.now { background: none; border: 1.3px dashed var(--accent); }
.nudge { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 2px 0; border: 0; background: none; color: var(--fg-2); text-align: left; }
.nudge > svg:first-child { width: 20px; height: 20px; color: var(--accent-ink); flex: none; }
.nudge span { flex: 1; min-width: 0; }
.nudge small { display: block; font-size: 12.5px; color: var(--muted); }
.nudge b { display: block; font-size: 15px; color: var(--fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nudge .chev { width: 14px; height: 14px; color: var(--muted); flex: none; }
.meta { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.meta b { color: var(--fg-2); font-weight: 500; }
.sheet { font-size: calc(var(--lyric-size, 17px) * var(--wide, 1)); line-height: 1.45; overflow-wrap: anywhere; overflow-x: clip; position: relative; }
.sheet .sec { margin: 18px 0 4px; }
.sheet .sec:first-child { margin-top: 4px; }
.sheet .gap { height: 0.7em; }
.sheet .ly { margin: 0 0 0.5em; }
/* Chord-over-word blocks: each word stays whole; lines wrap between words */
.sheet .pr { margin: 0 0 0.55em; }
.sheet .w { white-space: nowrap; }
.sheet .sg { display: inline-block; vertical-align: baseline; }
.sheet .sg > .c { display: block; line-height: 1.25; padding-right: 0.45em; min-height: 1.25em; }
.sheet .sg > .l { white-space: pre; }
.sheet .sg.free > .c { width: 0; overflow: visible; white-space: nowrap; padding-right: 0; }
/* 4.49.6: a chord played before the singing, with a short rest mark where the words would be */
.sheet .w.lead .sg > .l { display: block; background: linear-gradient(currentColor, currentColor) left 60% / calc(100% - .45em) 2px no-repeat; opacity: .35; }
.sheet .c[data-ch] { cursor: pointer; position: relative; }
.sheet .c[data-ch]::after { content: ""; position: absolute; inset: -6px -4px; }
.sheet .c.sel .ct { background: var(--accent-soft); border-radius: 4px; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent-line); }
/* Chord diagram cards */
.shapecard { position: fixed; right: 16px; z-index: 40; width: 164px; box-sizing: border-box; padding: 8px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--rim), 0 10px 28px rgba(0,0,0,.3); animation: pop .16s ease-out; }
.shapecard .sc-top { align-self: stretch; display: flex; align-items: center; justify-content: space-between; }
.shapecard .sc-top b { font: 700 24px var(--display); color: var(--accent-ink); }
.shapecard .sc-x { width: 32px; height: 32px; }
.shapecard svg { display: block; }
.shapecard .dn { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.96); } }
.dn { font: 600 10.5px var(--sans); fill: var(--fg); }
.dx { stroke: var(--muted); stroke-width: 1.1; stroke-linecap: round; fill: none; }
.do { fill: none; stroke: var(--fg-2); stroke-width: 1; }
.dnut { fill: var(--fg); }
.df { stroke: var(--fg); stroke-opacity: .38; stroke-width: .8; }
.ds { stroke: var(--fg); stroke-opacity: .55; stroke-width: .8; }
.dd { fill: var(--accent); }
.dk { font: 700 5.4px var(--sans); fill: var(--on-accent); }
.db { font: 7px var(--sans); fill: var(--muted); }
.sheet .c { color: var(--accent-ink); font-weight: 650; font-size: 0.88em; letter-spacing: 0.01em; }
.sheet .crow { display: flex; flex-wrap: wrap; column-gap: 1.1em; row-gap: 0.2em; margin: 0 0 0.55em; }
/* 4.56.0: a row of chords with no words is as tall as a sung line: the chord line, then the empty lyric line (so the band on it is the same height) */
.sheet .crow { padding-bottom: 1.45em; }
.sheet .crow > .c { line-height: 1.25; min-height: 1.25em; }
/* Tabs: all strings wrap together, a measure at a time */
.sheet .tab { font-family: var(--mono); font-size: calc(var(--tab-size, 14px) * var(--wide, 1)); line-height: 1.35; white-space: pre; margin: 0 0 1em; color: var(--fg); }
.sheet .tab + .tab { margin-top: -0.2em; }
.pw { flex: 1; min-width: 0; border-radius: var(--r-bar); overflow: hidden; }
.player { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 8px; }
/* Now and Next: a fixed panel in the dock while playing; only its contents change */
@keyframes nnin { from { opacity: 0; } }
@keyframes swap { from { opacity: .3; } }
/* Chords in this song */
.strip-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 8px; }
.strip-h .n { font-weight: 500; letter-spacing: 0; }
.strip { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px 10px; padding: 2px 20px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.scard { flex: none; width: 54px; height: 78px; padding: 0; border-radius: 10px; background: var(--solid); border: 1px solid var(--rim); display: grid; place-items: center; }
.scard svg { display: block; }
.scard.sel { border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent); }
/* AI help */
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: rot .7s linear infinite; flex: none; }
@keyframes rot { to { transform: rotate(360deg); } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; font-size: 15px; flex: 1; }
.btn svg { width: 16px; height: 16px; }
.btn:disabled { opacity: 1; }
.btn.sm { flex: none; }
.btn.sm.primary { flex: none; }
.chip.ai { display: inline-flex; align-items: center; gap: 6px; height: 32px; }
.chip.ai svg { width: 15px; height: 15px; }
.chip.ai:disabled { opacity: .55; }
.ai-note { font-size: 13px; color: var(--bad); margin: -4px 2px 10px; line-height: 1.4; }
.err { color: var(--bad); }
.link { border: 0; background: none; color: var(--accent-ink); font-size: 13px; padding: 4px 2px; text-decoration: underline; }
.seg.mini { flex: none; height: 28px; }
.seg.mini button { height: 24px; padding: 0 8px; font-size: 12px; border-radius: 6px; }
.key-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--hair); }
.ai-status { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.ai-status .dot, .s-keys .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rim); }
.ai-status .dot.on, .s-keys .dot.on { background: #7ac47f; }
/* Make it easier */
.strip-h .chip.easy { text-transform: none; letter-spacing: 0; height: 28px; font-size: 12.5px; }
.easy-wait { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; padding: 18px 2px 22px; }
.easy-note { font-size: 14px; color: var(--fg-2); line-height: 1.45; margin: 0 2px 12px; }
.elabel { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 2px 6px; }
.erow { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 2px; scrollbar-width: none; }
.erow::-webkit-scrollbar { display: none; }
.ecard { flex: none; border-radius: 9px; background: var(--card); border: 1px solid var(--rim); padding: 1px; }
.ecard svg { display: block; }
/* Backup banner */
.bk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: 14px; padding: 12px 14px; margin: 16px 0 0; }
.bk .tile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.bk .tile svg { width: 17px; height: 17px; }
.bk-t { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.bk-t b { font-size: 15px; font-weight: 600; color: var(--fg); }
.bk-b { display: flex; gap: 8px; margin-left: auto; }
.set .val.muted { color: var(--muted); }
.ib.aa { font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-2); }
.countin { position: fixed; left: 50%; transform: translateX(-50%); z-index: 15; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
  font: 300 64px var(--serif); background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.countin.pulse { animation: beat .35s ease-out; }
@keyframes beat { from { transform: translateX(-50%) scale(1.12); opacity: .6; } }
/* Sets */
.row.newset .t { color: var(--accent-ink); display: flex; align-items: center; gap: 8px; }
.row.newset svg { width: 16px; height: 16px; }
.row .chev { color: var(--muted); width: 16px; height: 16px; }
.settitle { border: 0; background: none; padding: 0; text-align: left; color: var(--fg); display: block; margin: 14px 2px 0; }
.cta svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.setrow { gap: 8px; }
.setrow .num { font: 500 13px var(--mono); color: var(--muted); width: 18px; text-align: right; }
.setrow .open { border: 0; background: none; padding: 0; text-align: left; color: inherit; flex: 1; min-width: 0; }
.setrow .sb:disabled { opacity: .3; }
.row.pick .check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--rim); display: grid; place-items: center; color: var(--on-accent); flex: none; }
.row.pick.on .check { background: var(--accent); border-color: var(--accent); }
.row.pick:disabled { opacity: .55; }
.row.pick:disabled .check { background: var(--card-2); color: var(--muted); }
.row.pick .check svg { width: 13px; height: 13px; stroke-width: 2.4; }
.setbar { display: flex; align-items: center; gap: 8px; margin: 14px 0 -8px; }
.setbar .setname { flex: 1; min-width: 0; border: 0; background: none; color: var(--accent-ink); font-size: 13px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setbar .sb:disabled { opacity: .3; }
.nextup { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + var(--safe-b)); z-index: 22; width: min(496px, calc(100% - 24px)); border-radius: 14px; padding: 12px 12px 12px 16px; display: flex; align-items: center; gap: 8px; animation: fade .25s; }
.nu-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: var(--muted); }
.nu-t .lab { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--accent-ink); }
.nu-t b { font-size: 16px; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Spark tone */
.panel.tone { max-height: calc(100dvh - 40px); overflow-y: auto; }
.ampname { font-size: 15px; font-weight: 500; margin: 0 2px 10px; }
.knobs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.knob { text-align: center; }
.kv { font: 600 15px var(--mono); color: var(--accent-ink); }
.kbar { height: 4px; border-radius: 2px; background: var(--card-2); margin: 4px 0 4px; overflow: hidden; }
.kbar i { display: block; height: 100%; background: var(--accent); }
.kl { font-size: 12px; color: var(--muted); }
.chain { display: flex; flex-direction: column; border-radius: var(--r); border: 1px solid var(--hair); margin-bottom: 12px; overflow: hidden; }
.fx { display: flex; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.fx:last-child { border-bottom: 0; }
.fxn { width: 50px; flex: none; font-weight: 600; color: var(--fg-2); }
.fxv { color: var(--fg); }
.fx.off .fxv, .fx.off .fxn { color: var(--muted); font-weight: 400; }
.tone-foot { font-size: 12px; color: var(--muted); margin: 0 2px 12px; }
/* Song menu */
.menu { position: fixed; z-index: 35; width: 272px; animation: pop .14s ease-out; }
.mrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; background: none; border-radius: 10px; color: var(--fg); font-size: 15px; text-align: left; }
button.mrow:active { background: var(--card-2); }
.mrow .mi { width: 20px; color: var(--fg-2); display: grid; place-items: center; }
.mrow .mi svg { width: 18px; height: 18px; }
.mrow .ml { flex: 1; white-space: nowrap; }
.mrow .mh { font-size: 12.5px; color: var(--accent-ink); }
.mrow.size { border-bottom: 1px solid var(--hair); border-radius: 10px 10px 0 0; margin-bottom: 4px; padding-bottom: 6px; }
.mrow.size .v { font: 600 13px var(--mono); min-width: 40px; text-align: center; }
/* Screen transitions */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease-out; }
::view-transition-group(song-title) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
::view-transition-old(song-title), ::view-transition-new(song-title) { height: 100%; width: auto; }
@media (prefers-reduced-motion: reduce) { *, ::view-transition-group(*) { animation-duration: 0s !important; transition-duration: 0s !important; } }
/* Practice a section */
.loopbanner { position: fixed; left: 50%; transform: translateX(-50%); top: calc(12px + var(--safe-t)); z-index: 40; width: min(480px, calc(100% - 24px)); border-radius: 14px; padding: 10px 8px 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 14px; animation: fade .2s; }
.loopbanner span { flex: 1; }
.sheet > .inloop { position: relative; padding-left: 12px; }
.sheet > .inloop::before { content: ""; position: absolute; left: 0; top: 0; bottom: -0.55em; width: 2px; background: var(--accent); opacity: .55; }
.sheet > .loopfirst::before { top: 4px; border-radius: 2px 2px 0 0; }
.sheet > .looplast::before { bottom: 2px; border-radius: 0 0 2px 2px; }
.sheet > .loopa { background: var(--accent-soft); border-radius: 6px; }
.looprow { display: none; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--muted); }
.looprow.on { display: flex; }
.imp-t { margin: 0 2px 14px; font-size: 15px; }
.linkbtn { background: none; border: 0; padding: 10px 6px; margin: -10px -6px; font: inherit; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.imp-list { margin-bottom: 12px; max-height: 40vh; overflow-y: auto; }
.looprow > svg { width: 16px; height: 16px; color: var(--accent-ink); flex: none; }
.looprow .lt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.looprow .lt b { color: var(--fg); font-weight: 500; }
.looprow .chip { height: 26px; font-size: 12px; padding: 0 10px; }
body.loop-on .app.viewer { padding-bottom: calc(160px + var(--safe-b)); }
/* Current line focus while playing: other lines dim in place (no motion) */
.sheet > * { transition: opacity .3s, transform .2s ease-out; }
/* Focus current line: heavier and 5% larger without changing how it wraps.
   The stroke thickens the letters without widening them, and the scale is a
   transform, so nothing below moves. Lines keep 5% spare width on the right
   so a scaled line never runs off the edge. */
.sheet > .pr, .sheet > .ly { margin-right: 5%; }
body:not(.staged) .sheet.focus > .cur:is(.pr, .ly) { font-weight: 800; } /* 4.61.1: bold, not grown and outlined: no more reaching the song map */
.sheet.focus > .cur .c { -webkit-text-stroke: 0; }
/* The next line is in focus too, a little softer, to read ahead. */
.sheet.focus > .cur2:is(.pr, .ly) { transform: none; }
body.playing .sheet.focus > .cur2:is(.pr, .ly) { opacity: .72; }
@media (prefers-reduced-motion: reduce) { .sheet > * { transition: opacity .3s; } }
/* Other lines dim only while playing; paused, you are reading the whole sheet (4.14.2). */
body.playing .sheet.focus > *:not(.cur) { opacity: .38; }
/* Daylight: dimmed lines stay readable on the light background. */
:root[data-theme="light"] body.playing .sheet.focus > *:not(.cur) { opacity: .5; }
.s-ver { text-align: center; margin-top: 18px; }
.sheet .c.now .ct { box-shadow: inset 0 -2px 0 var(--accent); }
/* While playing, the top of the song (header, title, chord strip) goes quiet */
.app.viewer > .head, .app.viewer > .meta, .app.viewer > #strip { transition: opacity .3s, filter .3s; }
body.playing .app.viewer > .head, body.playing .app.viewer > .meta, body.playing .app.viewer > #strip { opacity: .35; transition: opacity .5s, filter .5s; }
body.playing .app.viewer > #strip { filter: grayscale(1); }
/* Player controls fade after a few idle seconds while playing; play/pause stays */
.player .speed, .player .step { transition: opacity .3s; }
.player.idle .speed, .player.idle .step { opacity: .4; transition: opacity .6s; }
.play { width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; padding: 0; }
.play svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.speed { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.speed span { font: 500 13px var(--mono); color: var(--fg-2); width: 38px; text-align: right; }

.step { display: flex; align-items: center; gap: 4px; }
.sb { display: grid; place-items: center; padding: 0; }
.sb svg { width: 14px; height: 14px; }

.step .v { font: 600 13px var(--mono); color: var(--accent-ink); min-width: 28px; text-align: center; }
.step .v.zero { color: var(--muted); font-weight: 500; }

input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 28px; background: none; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--card-2) var(--fill, 50%)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--card-2) var(--fill, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #f6c3a8; border: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
:root[data-theme="light"] input[type=range]::-webkit-slider-thumb { background: var(--accent); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #f6c3a8; border: 0; }

/* Sheets (add / edit / paste) */
.scrim { position: fixed; inset: 0; z-index: 40; animation: fade .2s; }
.panel { position: fixed; left: 50%; transform: translateX(-50%); width: min(520px, 100%); z-index: 41; }
.panel.full { top: calc(10px + var(--safe-t)); bottom: 0; display: flex; flex-direction: column; animation: up .42s cubic-bezier(.2,1.15,.3,1); }
.panel.card { bottom: calc(12px + var(--safe-b)); width: min(496px, calc(100% - 24px)); padding: 16px; animation: up .36s cubic-bezier(.2,1.15,.3,1); }
@keyframes up { from { transform: translate(-50%, 40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.findcard { margin-top: 18px; border-radius: 16px; border: 1px solid var(--rim); background: var(--card); padding: 16px; }
.fc-t { font-size: 16px; font-weight: 600; color: var(--fg); }
.findcard.more { padding: 14px; }
.findcard.more .fc-t { font-size: 15px; margin-bottom: 10px; }
.fc-s { font-size: 14px; color: var(--muted); margin: 6px 0 12px; line-height: 1.4; }
.fc-b { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-b .chip { display: inline-flex; align-items: center; gap: 6px; }
.fc-b .chip svg { width: 14px; height: 14px; }
.fc-ai, .nextidea { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--fg); text-align: left; }
.fc-ai > svg:first-child, .nextidea > svg:first-child { width: 20px; height: 20px; color: var(--accent-ink); flex: none; }
.fc-ai span, .nextidea span { flex: 1; font-size: 13px; color: var(--muted); }
.fc-ai b, .nextidea b { display: block; font-size: 15px; color: var(--fg); font-weight: 600; margin-bottom: 2px; }
.fc-ai .chev, .nextidea .chev { width: 16px; height: 16px; color: var(--muted); }
.nextidea { margin: 0 0 18px; border-color: var(--rim); background: var(--card); }
.backpaste { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + var(--safe-b)); z-index: 30; width: min(496px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-radius: 14px; font-size: 14px; animation: fade .25s; }
.backpaste span { flex: 1; }
.cs-head b { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--fg); }
.cs-head span { font-size: 14px; color: var(--muted); }
.cs-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.cs-meta span { font-size: 12.5px; padding: 3px 9px; border-radius: 10px; border: 1px solid var(--rim); color: var(--fg-2); }
.cs-meta .cs-conf.high { color: #7ac47f; border-color: rgba(122,196,127,.4); }
.cs-meta .cs-conf.medium { color: var(--accent-ink); border-color: var(--accent-line); }
.cs-meta .cs-conf.low { color: var(--bad); border-color: var(--bad-line); }
.cs-chart { font: 14px/1.6 var(--mono); color: var(--accent-ink); background: var(--card); border: 1px solid var(--rim); border-radius: 12px; padding: 12px 14px; white-space: pre-wrap; margin: 0 0 8px; max-height: 42vh; overflow: auto; -webkit-text-size-adjust: 100%; }
.cs-src { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cs-src a { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-src svg { width: 13px; height: 13px; flex: none; color: var(--accent-ink); }
.nx .pbody > *, .cs .pbody > * { flex: none; }
/* Get the song */
.gs-rows { padding: 2px 14px; margin-top: 14px; }
.gs-row { min-height: 48px; font-size: 15px; }
.gs-row .muted { color: var(--muted); }
.gs-src { margin-left: auto; font-size: 12px; color: var(--muted); text-align: right; }

.gs-pick { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--muted); font-size: 14px; }
.gs-pick svg { width: 14px; height: 14px; }
.gs-pick.none { display: block; }
.cs-meta span.agree { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.cs-meta span svg { width: 12px; height: 12px; vertical-align: -1px; }
.cs-meta small { color: var(--muted); font-size: 12px; }
.gs-chart { color: var(--fg); }
.gs-vh { margin: 4px 2px 12px; } .gs-vh b { display: block; font-size: 17px; } .gs-vh span { font-size: 13px; color: var(--muted); }
.gs-ver { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; margin-bottom: 8px; border-radius: 14px; border: 1px solid var(--rim); background: var(--card); color: var(--fg); text-align: left; }
.gs-ver i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; }
.gs-ver.on { border-color: var(--accent-line); background: var(--accent-soft); } .gs-ver.on i { border: 5px solid var(--accent); }
.gs-ver b { display: block; font-size: 14.5px; font-weight: 500; } .gs-ver small { font-size: 12.5px; color: var(--muted); }
.foot.credit a, .foot a { color: var(--accent-ink); }
.nx .row.nx-row { align-items: flex-start; }
.nx-ch { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.nx-ch span { font: 600 12px var(--sans); padding: 2px 7px; border-radius: 7px; background: var(--card); border: 1px solid var(--rim); color: var(--fg-2); }
.nx-ch span.new { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); }
.nx-b { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.nx-ctl { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pfoot .nx-ctl { margin-top: 0; }
.nx-ctl > *, .nx-ctl > .btn.primary { flex: none; }
.nx-ctl .seg { width: 100%; }
.nx-err { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 12px 12px; }
.nx-err > svg { width: 28px; height: 28px; color: var(--accent-ink); opacity: .8; margin-bottom: 4px; }
.nx-err b { font-size: 17px; font-weight: 600; color: var(--fg); }
.nx-err p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg-2); max-width: 30ch; }
.nx-err details { margin-top: 10px; width: 100%; text-align: left; font-size: 13px; color: var(--muted); }
.nx-err summary { text-align: center; cursor: pointer; }
.nx-err pre { margin: 8px 0 0; padding: 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--rim); white-space: pre-wrap; word-break: break-word; font-size: 12px; max-height: 40vh; overflow: auto; }
.nx .pbody .nx-ctl .btn, .nx-ctl .btn { width: 100%; }
.nx-ctl .seg button { flex: 1; height: 36px; }
.nx-why { font-size: 13px; margin-top: 3px; line-height: 1.35; }

.stamp { position: absolute; right: 12px; top: 12px; transform: rotate(-8deg); font: 700 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #fff; border: 1.5px solid rgba(255,255,255,.85); border-radius: 6px; padding: 4px 7px; background: rgba(0,0,0,.28); }
.set-played { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }
.hist { display: flex; gap: 10px; margin: 10px 0 12px; }
.hist div { flex: 1; border-radius: 12px; border: 1px solid var(--rim); background: var(--card); padding: 10px 12px; text-align: center; }
.hist b { display: block; font-size: 18px; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.hist span { font-size: 12px; color: var(--muted); }
.set-note { display: block; margin: 0 0 14px; }
.set-note .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.set-note textarea { width: 100%; resize: none; border: 0; border-left: 2px solid var(--accent-line); background: none; color: var(--fg-2); font: 16px/1.45 var(--sans); padding: 4px 0 4px 12px; min-height: 30px; overflow: hidden; }
.set-note textarea::placeholder { color: var(--muted); }

.titlecard { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; background: radial-gradient(90% 60% at 50% 35%, var(--tint), transparent 75%), #08080a; color: #fff; animation: fade .35s ease-out; cursor: pointer; }
.titlecard.out { opacity: 0; transition: opacity .3s; }
.tc-cv { width: min(270px, 70vw); aspect-ratio: 1; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.7); animation: tcin .9s cubic-bezier(.2,.8,.2,1); }
.tc-cv .cover { border-radius: 22px; }
@keyframes tcin { from { transform: scale(.92); opacity: .4; } }
.tc-k { font: 600 12px var(--sans); letter-spacing: .18em; color: var(--accent-ink); text-transform: uppercase; margin-top: 30px; }
.titlecard h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; margin: 8px 0 6px; line-height: 1.1; }
.tc-m { font-size: 14px; color: rgba(255,255,255,.62); }
.tc-first { margin-top: 30px; font-size: 14.5px; color: rgba(255,255,255,.78); }
.tc-first b { color: #fff; font-weight: 600; }
.tc-bar { width: 160px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); margin-top: 16px; overflow: hidden; }
.tc-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; animation: tcbar linear forwards; }
@keyframes tcbar { from { transform: scaleX(0); } }
.tc-skip { margin-top: 14px; font-size: 12px; color: rgba(255,255,255,.4); }
@media (prefers-reduced-motion: reduce) { .tc-cv { animation: none; } }

.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.set-hero { position: relative; text-align: center; margin: 0 0 4px; }
.set-hero::before { content: ""; position: absolute; left: -20px; right: -20px; top: -120px; height: 520px; background: radial-gradient(110% 70% at 50% 18%, var(--tint), transparent 72%); pointer-events: none; z-index: -1; }
.sh-big { position: relative; width: min(250px, 66vw); aspect-ratio: 1; margin: 6px auto 0; }
.sh-cover { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden; background: none; }
.sh-cover .cover { border-radius: 20px; }
.sh-edc { display: inline-flex; align-items: center; gap: 6px; margin: 12px auto 0; height: 28px; padding: 0 10px; border: 0; background: none; color: var(--muted); font-size: 13px; }
.sh-edc svg { width: 14px; height: 14px; }
.cvopts { display: flex; gap: 8px; justify-content: center; margin: 14px 0 2px; animation: fade .2s; }
.cvopts[hidden] { display: none; }
.cvo { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); width: 68px; border: 0; background: none; padding: 0; }
.cvo i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 11px; overflow: hidden; border: 1px solid var(--rim); background: var(--card); color: var(--accent-ink); }
.cvo i > svg { width: 20px; height: 20px; }
.cvo i img { width: 100%; height: 100%; object-fit: cover; }
.cvo i .cover { border-radius: 0; place-self: stretch; width: 56px; height: 56px; }
.pk .cmd { flex: none; }
.cvo.on { color: var(--fg); }
.cvo.on i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.cvo[aria-disabled="true"] { opacity: .5; }
.set-hero .settitle { display: block; margin: 16px auto 4px; text-align: center; }
.set-hero .title { font-size: 32px; }
.set-hero .meta { justify-content: center; margin: 0 0 6px; }
.set-hero .set-when { justify-content: center; display: inline-flex; margin: 4px 0 12px; padding: 4px 11px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 13px; }
.crop { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; flex-direction: column; color: #fff; }
.cr-top { text-align: center; padding: calc(18px + var(--safe-t)) 0 12px; font-size: 16px; }
.cr-area { position: relative; flex: 1; overflow: hidden; touch-action: none; }
.cr-area img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; -webkit-user-select: none; max-width: none; }
.cr-frame { position: absolute; left: 20px; right: 20px; top: 50%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 18px; box-shadow: 0 0 0 2000px rgba(0,0,0,.62); border: 1.5px solid rgba(255,255,255,.85); pointer-events: none; max-height: calc(100% - 40px); }
.cr-hint { text-align: center; font-size: 14px; color: rgba(255,255,255,.7); padding: 10px 0; }
.cr-bar { display: flex; justify-content: space-between; padding: 6px 18px calc(18px + var(--safe-b)); }
.cr-bar .tb { color: #fff; font-size: 17px; }
.cr-bar .tb.go { color: var(--accent-ink); font-weight: 600; }

.pk-top { display: flex; gap: 14px; align-items: center; margin: 2px 0 14px; }
.pk-cv { width: 92px; height: 92px; overflow: hidden; flex: none; }
.pk-tt { min-width: 0; }
.pk-tt b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--fg); }
.pk-tt span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.pk-tt small { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; opacity: .85; }
.pk-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: 2px; }
.pk-n { font: 600 12px var(--sans); color: var(--accent-ink); width: 18px; text-align: center; flex: none; }
.set-when { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--accent-ink); margin: 0 2px 16px; }
.set-when svg { width: 15px; height: 15px; }
.set-when span { color: var(--muted); }
.cover { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.cover svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cv-t { position: absolute; left: 9%; right: 9%; bottom: 8%; color: #fff; line-height: 1.05; text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cv-k { position: absolute; left: 9%; top: 8%; font: 600 9px var(--sans); text-transform: uppercase; }
.upnext { display: flex; gap: 14px; align-items: center; padding: 12px; margin: 16px 0 2px; cursor: pointer; }
.un-cv { width: 88px; height: 88px; overflow: hidden; flex: none; }
.un-t { flex: 1; min-width: 0; }
.un-t .lab { text-transform: uppercase; }
.un-t b { display: block; color: var(--fg); margin: 3px 0 4px; }
.un-t span { font-size: 13px; color: var(--muted); }
.un-play { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; }
.un-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-left: 2px; }
.shelf-h .sh-all { text-decoration: none; }
.shelf { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 6px; scroll-padding-left: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.shelf::-webkit-scrollbar { display: none; }
.sh-it { flex: none; border: 0; background: none; padding: 0; text-align: left; scroll-snap-align: start; }
.sh-cv { overflow: hidden; }
.sh-t { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-s { margin: 1px 2px 0; }
.sh-new .sh-cv { display: grid; place-items: center; }
.sh-new .sh-cv svg { width: 26px; height: 26px; }
.row-cv { overflow: hidden; flex: none; margin-right: 2px; }
body.searching .upnext, body.searching .shelf, body.searching .shelf-h { display: none; }
.ns .ns-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; }
.ns .ns-head b { font-size: 16px; font-weight: 600; }
.ns-body { overflow-y: auto; padding: 4px 20px 30px; }
.ns-cover { width: 210px; height: 210px; margin: 6px auto 6px; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.ns-cap { text-align: center; font-size: 12.5px; color: var(--muted); margin: 8px 0 18px; }
.ns-f { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--rim); border-radius: 12px; padding: 0 14px; margin-bottom: 10px; min-height: 50px; }
.ns-f span { font-size: 14px; color: var(--muted); width: 54px; flex: none; }
.ns-f input { flex: 1; min-width: 0; border: 0; background: none; font-size: 17px; color: var(--fg); height: 48px; }
.ns-f input[type=datetime-local] { -webkit-appearance: none; appearance: none; text-align: left; }
.ns-x { border: 0; background: none; color: var(--muted); padding: 4px; }
.ns-x[hidden] { display: none; }
.ns-x svg { width: 16px; height: 16px; }
.ns-lab { font-size: 13px; color: var(--muted); margin: 14px 2px 8px; }
.ns-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ns-chips .n { color: var(--muted); font-size: 12px; margin-left: 2px; }

.seg.slide { position: relative; }
.seg.slide::before { content: ""; position: absolute; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.seg.slide.right::before { transform: translateX(100%); }
.seg.slide button { position: relative; transition: color .2s; }
.cebar .seg[hidden] { display: none; }
.cebar #ce-done { margin-left: auto; }

.ed-tx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ed-tx-in { position: relative; display: inline-block; min-width: 100%; vertical-align: top; }
/* iPhone enlarges wide blocks of text on its own; keep the editor at its set size. */
.ed-tx, .ed-tx * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* 16px: iPhone zooms into any text field set smaller than that when it gets focus. */
.ed-hl, .ed-tx textarea { font: 16px/1.55 var(--mono); padding: 12px 14px 40px; margin: 0; white-space: pre; tab-size: 4; letter-spacing: 0; box-sizing: border-box; }
.ed-hl { min-height: 50vh; }
.ed-hl div.hs { color: var(--muted); }
.ed-tx textarea { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; resize: none; overflow: hidden; color: transparent; -webkit-text-fill-color: transparent; outline: none; }
.ed-tx textarea::selection { background: var(--accent-soft); }

/* Writing mode (phone, typing in Text): the editor fills the space above the
   keyboard and the bar rides on the keyboard. --vv-* follow the visible area. */
body.writing::before { content: ""; position: fixed; inset: -50vh 0; z-index: 24; background: var(--bg); }
body.writing .ed-tx { position: fixed; z-index: 25; left: 8px; right: 8px; overflow: auto; overscroll-behavior: contain; }
body.writing .ed-tx-in { min-height: 100%; }
body.writing .cebar { bottom: auto; top: calc(var(--vv-top, 0px) + var(--vv-h, 100vh) - var(--bar-h, 56px) - 8px); box-shadow: none; }
body.writing .coach, body.writing .coach-dim { display: none; }

.qcancel { display: none; border: 0; background: none; color: var(--accent-ink); font-size: 16px; padding: 0 4px 0 6px; flex: none; }
body.searching .head, body.searching .weekly, body.searching .today, body.searching #chips, body.searching .lib-top, body.searching .bk, body.searching .dock-fade, body.searching .dock .add { display: none; }
body.searching .qcancel { display: block; }
body.searching .dock { top: calc(10px + var(--safe-t)); bottom: auto; transform: translateX(-50%) !important; animation: totop .28s cubic-bezier(.2,.8,.2,1); }
body.searching #list { padding-top: 96px; }
body.searching #list > .label:first-child { margin-top: 8px; }
@keyframes totop { from { opacity: 0; transform: translate(-50%, 24px); } }
@media (prefers-reduced-motion: reduce) { body.searching .dock { animation: none; } }

.cebar .seg { flex: 0 0 160px; }
.ed-title { width: 100%; font: inherit; padding: 4px 10px; letter-spacing: inherit; }
.ed-details { margin: 8px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.ed-artist { font-size: 16px; padding: 9px 10px; }
.ed-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 14px; }
.ed-chip b { font-weight: 600; }
.ed-tap { color: var(--accent-ink); font: inherit; font-size: 14px; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.ed-tap svg { width: 15px; height: 15px; }
.ed-tap.beat { animation: tapbeat .18s ease-out; }
@keyframes tapbeat { from { background: var(--accent-soft); border-color: var(--accent); } }
.ed-chip select { position: absolute; inset: 0; opacity: 0; font-size: 16px; }
.ed-chip input { width: 42px; border: 0; background: none; color: var(--fg); font: 600 16px var(--sans); text-align: right; padding: 0; }
.ed-hint { font-size: 13px; color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ed-hint svg, .ce-sec svg, .ce-pen svg { width: 14px; height: 14px; }
.ce-sec { display: flex; width: fit-content; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; text-align: left; }
.ce-sec svg { color: var(--muted); opacity: .7; }
.ce-pen { position: absolute; right: -6px; bottom: 0; border: 0; background: none; color: var(--muted); padding: 6px 8px; opacity: .8; }
.ce-input { width: 100%; font: inherit; font-size: max(16px, 1em); color: var(--fg); background: var(--card); border: 1px solid var(--accent-line); border-radius: 8px; padding: 6px 8px; }
.ce-add { display: flex; width: fit-content; align-items: center; gap: 6px; margin: 0 0 14px; }
.ce-add svg { width: 14px; height: 14px; }
.ed-end { margin-top: 6px; }

.empty-hint { font-size: 14px; color: var(--muted); line-height: 1.45; margin: 0 4px 12px; }
body.cedit .sheet > * { opacity: 1 !important; }
body.cedit .dock, body.cedit .dock-fade, body.cedit #strip, body.cedit .metarow, body.cedit .chead, body.cedit .smap { display: none; }
body.cedit .sheet { padding-bottom: 120px; }
.cebar { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--safe-b)); width: min(496px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 16px; font-size: 14px; color: var(--fg-2); justify-content: space-between; border: 1px solid var(--rim); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.cebar.glass { background: var(--solid); }
.cebar span { flex: 1; }
.ce-line { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: .3em; row-gap: 4px; margin: 0 0 .7em; padding-right: 30px; }
/* 4.65.4: a lyric line is plain words with a chord row above each row of words; chips are placed by layoutChips */
.ce-ly { display: block; padding-right: 48px; margin: 0 0 .4em; }
.ce-flow { line-height: 1.35; }
.ce-flow > .ce-w, .ce-flow > .ce-gap { vertical-align: top; margin-top: 50px; }
.ce-flow > .ce-gap { display: inline-block; height: calc(1.35em + 9px); }
.ce-flow > .ce-nob { margin-top: 6px; }
.ce-ly > .ce-ch { position: absolute; left: 0; top: 0; }
.ce-ly > .ce-pl { left: auto; right: 0; }
.ce-ly .ce-w.sel { background: none; box-shadow: none; }
.ce-ly .ce-w.sel .ce-t { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-line); border-radius: 4px; }
.ce-where { margin: 4px 0 2px; }
.ce-ch { min-width: 44px; min-height: 44px; padding: 0 10px; border: 2px solid var(--rim); border-radius: 12px; background: var(--card); color: var(--accent-ink); font: 800 .82em var(--display, inherit); }
.ce-ch.ce-pl { min-width: 44px; color: var(--muted); border-style: dashed; font-weight: 600; font-size: 1em; }
.ce-ch.sel { background: var(--accent-soft); border-color: var(--accent); }
.ce-cl { column-gap: 4px; }
.ce-addrow { display: flex; gap: 8px; margin: 0 0 14px; }
.ce-addrow .ce-add { margin: 0; }
.ce-w { display: inline-flex; flex-direction: column; align-items: flex-start; border: 0; background: none; padding: 4px 1px; font: inherit; color: var(--fg); border-radius: 6px; text-align: left; min-height: 32px; }
.ce-w .ce-t { border-bottom: 1px dashed color-mix(in srgb, var(--muted) 50%, transparent); line-height: 1.35; }
.ce-w.sel { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-line); }
.ce-other { color: var(--muted); font-size: .85em; white-space: pre-wrap; margin: 0 0 .6em; }
.ce-word { color: var(--accent-ink); font-weight: 500; }
.ce-lab { margin: 10px 0 6px; }
.ce-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-chips.q { margin-top: 6px; }
.ce-chip { min-width: 42px; height: 38px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--rim); background: var(--card); color: var(--fg); font-size: 15px; font-weight: 600; }
.ce-chips.q .ce-chip { font-weight: 500; color: var(--fg-2); font-size: 14px; }
.ce-chip.on, .ce-chips.q .ce-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.smap { position: fixed; right: 0; top: calc(118px + var(--safe-t)); bottom: calc(118px + var(--safe-b)); width: 22px; z-index: 18; touch-action: none; transition: opacity .3s; }
.smap .sm-track, .smap .sm-fill { position: absolute; right: 10px; top: 0; width: 2px; border-radius: 2px; }
.smap .sm-track { bottom: 0; background: var(--rim); }
.smap .sm-fill { background: var(--accent); opacity: .8; }
.smap .sm-m { position: absolute; right: 5px; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; }
.smap .sm-m i { width: 11px; height: 11px; border-radius: 50%; background: var(--solid); border: 2px solid var(--muted); display: block; box-sizing: border-box; }
.smap .sm-m.past i { border-color: var(--accent); }
.smap .sm-m.on i { background: var(--accent); border-color: var(--accent); transform: scale(1.2); }
.smap .sm-m b { display: none; font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); background: var(--solid); border: 1px solid var(--rim); padding: 5px 9px; border-radius: 9px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.smap .sm-m.on b { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.smap.active .sm-m b { display: block; }
body.playing .smap:not(.active) { opacity: .45; }
.smap.away { opacity: 0 !important; pointer-events: none; }

.nextline { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(92px + var(--safe-b)); z-index: 21; width: min(496px, calc(100% - 24px)); display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--solid) 92%, transparent); border: 1px solid var(--rim); font-size: 14px; color: var(--fg-2); animation: fade .6s; white-space: nowrap; overflow: hidden; }
.nextline .lab { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); flex: none; }
.nextline b { font-weight: 600; color: var(--fg); flex: none; }
.nextline .fl { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.nextline .tn { flex: none; color: var(--accent-ink); font-size: 12px; }

.ls-list { margin: 10px 0 6px; max-height: min(46dvh, 420px); overflow-y: auto; }
.ls-q { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--rim); margin: 2px 0 6px; }
.ls-qi svg { width: 16px; height: 16px; color: var(--muted); }
.ls-q input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; color: var(--fg); height: 40px; }
.ls-item { display: flex; align-items: center; }
.ls-item .ls-row { flex: 1; min-width: 0; }
.ls-pv { flex: none; margin: 0 10px 0 4px; width: 36px; height: 36px; border-radius: 50%; color: var(--accent-ink); border-color: var(--accent-line); }
.ls-pv svg { fill: currentColor; stroke: none; width: 13px; height: 13px; }
.ls-pv.on { background: var(--accent-soft); }
.ls-other { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.ls-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 4px; }
.ls-open svg { width: 18px; height: 18px; }
.ls-other .danger { margin: 0; }
.ls-row { gap: 12px; }
.ls-row img, .ls-art { width: 44px; height: 44px; border-radius: 8px; flex: none; object-fit: cover; background: var(--card); display: grid; place-items: center; color: var(--muted); }
.ls-more { display: block; margin: 8px auto 4px; font-size: 14px; }
.stat.listen svg, .stat.tunechip svg { width: 13px; height: 13px; color: var(--accent-ink); }

.tappause { position: fixed; left: 50%; top: 40%; z-index: 60; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--solid) 85%, transparent); border: 1px solid var(--rim); color: var(--fg); pointer-events: none; animation: tp .7s ease-out forwards; }
.tappause svg { width: 34px; height: 34px; fill: currentColor; stroke: none; }
@keyframes tp { 0% { opacity: 0; transform: scale(.85); } 20% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }
.endcard { margin: 22px 8px 88px; padding: 18px 14px 16px; border-radius: 22px; background: var(--card); text-align: center; }
.endcard h2 { margin: 4px 0 8px; font-size: 32px; }
.endcard .ec-k { margin: 8px 0 0; letter-spacing: .14em; font-size: 12px; font-weight: 700; color: var(--accent-ink); }
.endcard .ec-say { margin: 0 0 14px; font-style: italic; color: var(--muted); }
.endcard .ec-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.endcard .ec-stats div { background: var(--bg); border-radius: 14px; padding: 10px 4px; }
.endcard .ec-stats b { display: block; font-size: 22px; color: var(--accent-ink); }
.endcard .ec-stats small { color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.endcard .ec-secs { list-style: none; margin: 14px 0; padding: 0; text-align: left; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.endcard .ec-secs li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); }
.endcard .ec-secs li:first-child { border-top: 0; }
.endcard .ec-secs em { font-style: normal; color: var(--accent-ink); }
.endcard .ec-foot { color: var(--muted); font-size: 13px; }
.endcard .ec-acts { display: flex; gap: 10px; margin-top: 12px; }
.endcard .ec-acts .btn { flex: 1; }
.endnote { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 8px; font-size: 14px; color: var(--muted); animation: endin .9s ease-out both; }
.endnote svg { width: 16px; height: 16px; color: var(--accent-ink); }
@keyframes endin { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .endnote { animation: fade .3s; } }
.grab { margin: 8px auto 4px; flex: none; }
.ph { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 12px; flex: none; }
.ph h2 { margin: 0; }
.tb { border: 0; background: none; font-size: 16px; padding: 8px 10px; color: var(--fg-2); }
.tb.go { color: var(--accent-ink); font-weight: 600; }
.pbody { flex: 1; overflow-y: auto; padding: 0 16px calc(20px + var(--safe-b)); display: flex; flex-direction: column; }
.fields { border-radius: var(--r); margin-bottom: 12px; }
.fld { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-bottom: 1px solid var(--hair); }
.fld:last-child { border-bottom: 0; }
.fld .lab { width: 54px; font-size: 15px; color: var(--muted); flex: none; }
.fld input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; height: 44px; }

.seg { display: flex; flex: 1; }
.seg button { flex: 1; height: 28px; border: 0; background: none; font-size: 14px; }
.danger { margin-top: 18px; border: 0; background: none; color: var(--bad); font-size: 15px; padding: 10px; }
.pc-head { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-2); margin-bottom: 12px; }
.pc-head svg { color: var(--accent-ink); width: 16px; height: 16px; }
.preview { border-radius: var(--r); background: var(--card); border: 1px solid var(--hair); padding: 10px 14px; height: 96px; overflow: hidden; font: 13px/1.5 var(--mono); white-space: pre; margin-bottom: 12px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.preview .ch { color: var(--accent-ink); font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag { height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12.5px; display: inline-flex; align-items: center; border: 1px solid var(--accent-line); color: var(--accent-ink); background: var(--accent-soft); }
.actions { display: flex; gap: 10px; margin-top: 2px; }
.btn.primary { flex: 2; }

/* Settings */
.set-group { overflow: hidden; margin-top: 8px; }
.set { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--hair); background: none; text-align: left; color: var(--fg); font-size: 16px; }
.set:last-child { border-bottom: 0; }
.set .tile { width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
.set .tile svg { width: 17px; height: 17px; }
.set .name { flex: 1; }
.set .val { color: var(--accent-ink); font-size: 15px; }
.set .chev { color: var(--muted); width: 16px; height: 16px; }
.set select { position: absolute; inset: 0; opacity: 0; width: 100%; font-size: 16px; }
.toggle { width: 51px; height: 31px; border-radius: 16px; position: relative; flex: none; border: 0; padding: 0; transition: background .2s; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; transition: transform .2s; }
.toggle.on::after { transform: translateX(20px); }
.foot { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 14px 6px 0; }

.toast { position: fixed; left: 50%; top: calc(12px + var(--safe-t)); transform: translate(-50%, calc(-100% - 24px - var(--safe-t))); padding: 10px 16px; z-index: 60; transition: transform .25s; font-size: 14px; border: 1px solid var(--rim); display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); }
.toast.show { transform: translate(-50%, 0); }
.tact { border: 0; background: var(--bg); color: var(--fg); font: 700 14px var(--display, inherit); padding: 7px 12px; border-radius: 10px; min-height: 32px; flex: none; } /* 4.16.0: the toast is inverted, so its button is too: readable in every palette */
.toast.near { transform: translate(-50%, 6px); opacity: 0; transition: transform .18s ease-out, opacity .18s ease-out; padding: 8px 14px; font-size: 13px; white-space: nowrap; }
.toast.near.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Tuner ---------- */
body.tuning { overflow: hidden; }
.tuner2 { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; padding: calc(8px + var(--safe-t)) 18px calc(14px + var(--safe-b)); max-width: 520px; margin: 0 auto; animation: fade .2s; overflow: hidden; }
.tn-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.tn-top label[hidden] { visibility: hidden; display: inline-flex; }
.tn-chip { position: relative; height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--rim); background: var(--card); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fg-2); }
.tn-chip b { color: var(--fg); font-weight: 600; }
.tn-chip .chev { width: 12px; height: 12px; transform: rotate(90deg); color: var(--muted); }
.tn-chip select { position: absolute; inset: 0; opacity: 0; font-size: 16px; }
.tn-read { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; text-align: left; margin-top: 14px; }
.tn-read .tn-sayrow { justify-content: flex-start; grid-column: 2; }
.tn-read .tn-c { grid-column: 2; }
/* Strings show the advice only: the headstock already says which string.
   Chromatic and "All in tune" keep the big letter. */
.tn-note { grid-row: 1 / span 2; min-width: 96px; min-height: 104px; display: flex; align-items: baseline; justify-content: center; }
.tn-note b { font-family: var(--display, var(--serif)); font-weight: 700; font-size: 96px; line-height: 1; color: var(--fg); }
.tn-note sub { font-size: 22px; color: var(--muted); margin-left: 2px; vertical-align: baseline; }
.tn-note:not(.live):not(.done) b { color: var(--rim); }
.tn-note.done b { font-size: 40px; color: var(--good); }
.tn-sayrow { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 24px; }
.tn-say { font: 500 18px var(--sans); color: var(--fg); }
.tn-say.warn { font-weight: 400; font-size: 14px; color: var(--muted); padding: 0 10px; }
.tn-c { font: 500 12.5px var(--mono); color: var(--muted); min-height: 16px; margin-top: 3px; display: none; }
.tuner2.chrom .tn-c, .tn-note.done + .tn-sayrow + .tn-c { display: block; }
.tn-gauge { position: relative; margin: 14px 4px 0; flex: none; text-align: center; }
.tn-gauge[hidden] { display: block; visibility: hidden; }
.tuner2.chrom .tn-gauge { display: none; }
/* The meter window: a dark well with bronze piping, lit softly from behind. */
.tn-win { position: relative; height: 66px; border-radius: 14px; border: 1px solid var(--bronze-line);
  background: radial-gradient(60% 90% at 50% 50%, rgba(255,194,122,.1), transparent 70%), var(--recess);
  box-shadow: var(--recess-shadow), 0 0 0 3px rgba(0,0,0,.35); overflow: hidden; }
.tn-meter { position: absolute; inset: 0; }
.tn-meter[hidden] { display: none; }
.tn-tick { position: absolute; top: 22px; width: 3px; height: 24px; margin-left: -1.5px; border-radius: 2px; background: rgba(241,227,196,.5); }
.tn-tick.big { top: 16px; height: 36px; width: 4px; margin-left: -2px; background: rgba(241,227,196,.8); }
.tn-zone { position: absolute; top: 12px; bottom: 8px; border-radius: 5px; background: color-mix(in srgb, var(--good) 30%, transparent); }
.tn-mid { position: absolute; left: 50%; top: 8px; bottom: 4px; width: 2px; margin-left: -1px; background: var(--recess-fg); }
.tn-dot { position: absolute; top: 14px; width: 8px; height: 40px; margin-left: -4px; border-radius: 4px; --c: #e0a43a; background: var(--c); box-shadow: 0 0 10px var(--c); transition: left .12s ease-out, background .2s, opacity .3s; }
.tn-dot.far { --c: #d9534f; }
.tn-dot.good { --c: var(--good); }
.tn-dot.idle { opacity: 0; left: 50%; }
/* The label sits on the side toward the center, so it never runs off the window. */
.tn-dot span { position: absolute; top: -16px; right: 10px; font: 600 12px var(--sans); color: var(--c); white-space: nowrap; }
.tn-dot.flat span { right: auto; left: 10px; }
.tn-pill { display: inline-block; min-height: 26px; margin-top: 10px; padding: 0 12px; border-radius: 13px; font: 500 12.5px/26px var(--sans); font-variant-numeric: tabular-nums; color: var(--recess-dim); background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07); }
.tn-pill:empty { visibility: hidden; }
.tn-stage { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; padding: 8px 0; }
.tn-stage > svg { height: 100%; max-height: 380px; width: auto; max-width: 100%; }
.tn-stage .tn-key { cursor: pointer; }
.tn-stage svg text { font-family: var(--sans); }
.tn-dial { width: 100%; max-width: 320px; height: auto; }
#tn-needle line { stroke: var(--accent); stroke-width: 6; } #tn-needle circle { fill: var(--accent); }
#tn-needle.good line { stroke: var(--good); } #tn-needle.good circle { fill: var(--good); }
#tn-needle.idle { opacity: .25; }
#tn-needle { transform-box: view-box; transform-origin: 150px 176px; transition: transform .16s cubic-bezier(.3,.7,.4,1), opacity .3s; } /* glides between readings */
.tuner2.chrom .tn-note b { font-size: 96px; }
.tn-foot { display: flex; align-items: center; gap: 10px; min-height: 48px; flex: none; }
.tn-foot .btn { flex: 1; height: 46px; }
.tn-foot .btn.primary { flex: 1.4; }
.tn-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-2); position: relative; }
.tn-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tn-switch i { width: 40px; height: 24px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--rim); position: relative; transition: background .2s; }
.tn-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.tn-switch input:checked + i { background: var(--accent); border-color: var(--accent); }
.tn-switch input:checked + i::after { transform: translateX(16px); background: #fff; }
.tn-switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.tn-status, .tn-any { margin-left: auto; font-size: 13px; color: var(--muted); }
.tuner2.chrom .tn-foot { justify-content: center; }
.tuner2.chrom .tn-any { margin-left: 0; }

/* ---------- Coach: one-time captions ---------- */
.coach { position: fixed; z-index: 66; max-width: min(300px, calc(100vw - 24px)); padding: 10px 14px; font-size: 14.5px; line-height: 1.35; pointer-events: none; animation: coachin .28s cubic-bezier(.2,1.1,.3,1); }
.coach.out { opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.coach.above::after, .coach.below::after { content: ""; position: absolute; left: calc(var(--ax, 50%) - 7px); width: 12px; height: 12px; background: var(--solid); border: 1px solid var(--accent-line); transform: rotate(45deg); }
.coach.above::after { bottom: -7px; border-top: 0; border-left: 0; }
.coach.below::after { top: -7px; border-bottom: 0; border-right: 0; }
.coach.free { left: 50%; bottom: calc(110px + var(--safe-b)); transform: translateX(-50%); width: max-content; text-align: center; }
.coach.free.out { transform: translate(-50%, 4px); }
@keyframes coachin { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.coach.free { animation-name: coachinfree; }
@keyframes coachinfree { from { opacity: 0; transform: translate(-50%, 6px); } }
.coach-pulse { animation: coachpulse 1.4s ease-in-out infinite; border-radius: 8px; }
@keyframes coachpulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-line); } 50% { box-shadow: 0 0 0 8px transparent, 0 0 0 4px var(--accent-soft); } }

.tappause.ghost { animation: ghostpause 1.7s ease-in-out forwards; }
@keyframes ghostpause { 0% { opacity: 0; transform: scale(.9); } 25%, 70% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.04); } }
.newdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 7px; vertical-align: 2px; }
#more { position: relative; }
#more .newdot { position: absolute; top: 7px; right: 7px; margin: 0; }

@media (prefers-reduced-motion: reduce) { .coach-pulse, .tappause.ghost { animation: none; } .tappause.ghost { opacity: .85; } }

.coach b { display: block; font-weight: 600; }
.coach span { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.coach span svg { width: 15px; height: 15px; vertical-align: -3px; color: var(--accent-ink); }
.coach ul { margin: 6px 0 0; padding: 0 0 0 16px; color: var(--fg-2); font-size: 13.5px; }
.coach li { margin: 3px 0; }
.coach li::marker { color: var(--accent-ink); }
.coach-dim { position: fixed; inset: 0; z-index: 64; pointer-events: none; background: radial-gradient(var(--rx) var(--ry) at var(--cx) var(--cy), transparent 0 96%, rgba(0,0,0,.5) 100%); animation: fade .3s; }
:root[data-theme="light"] .coach-dim { background: radial-gradient(var(--rx) var(--ry) at var(--cx) var(--cy), transparent 0 96%, rgba(40,30,20,.3) 100%); }
.coach-dim.out { opacity: 0; transition: opacity .25s; }
.ed-tap.flash { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transition: none; }
.haptic { position: fixed; left: -100px; top: -100px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.gs-intro { color: var(--muted); font-size: 14.5px; line-height: 1.45; margin: 0 0 18px; }
.gs-intro b { color: var(--fg-2); }
.gs-list { margin-bottom: 16px; }
.gs-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.gs-ic { width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.gs-ic svg { width: 19px; height: 19px; }
.gs-t { flex: 1; min-width: 0; }
.gs-t b { display: block; font-weight: 500; font-size: 15px; color: var(--fg); }
.gs-t span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.gs-show { flex: none; }

/* ---------- Library: Key and Tuning filters, A–Z index ---------- */
.azx { position: fixed; z-index: 18; right: 2px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 12px; touch-action: none; -webkit-user-select: none; user-select: none; }
.azx button { width: 22px; height: min(19px, 2.6vh); padding: 0; border: 0; background: none; font: 600 12px var(--sans); color: var(--accent-ink); line-height: 1; }
.azx.on { background: var(--card-2); }
.azx-pop { position: absolute; right: 34px; width: 52px; height: 52px; margin-top: -26px; border-radius: 14px; display: grid; place-items: center; background: var(--solid); border: 1px solid var(--accent-line); color: var(--accent-ink); font: 600 26px var(--serif); box-shadow: var(--shadow); pointer-events: none; }
.azx-pop[hidden] { display: none; }
body.searching .azx { display: none; }

.set .seg.mini { margin-left: auto; }
/* Tuner: why it needs the microphone, before the phone asks */
.tuner2.asking .tn-gauge, .tuner2.asking .tn-stage, .tuner2.asking .tn-foot { display: none; }
.tuner2.asking .tn-note { display: none; }
.tn-mic { margin: auto 6px; padding: 26px 22px 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--rim); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tn-mic-ic { width: 54px; height: 54px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; }
.tn-mic-ic svg { width: 26px; height: 26px; }
.tn-mic b { font-size: 19px; font-weight: 600; color: var(--fg); }
.tn-mic p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.tn-mic .btn, .tn-mic .tb { flex: none; }
.tn-mic .btn { width: 100%; height: 46px; }
body.has-azx #list .list { margin-right: 22px; }

/* A screen that failed to draw */
.oops { margin: 22vh 24px 0; text-align: center; }
.oops b { display: block; font-size: 19px; margin-bottom: 8px; }
.oops p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0 0 20px; }
.oops .actions { justify-content: center; }
.oops .btn { flex: 1; white-space: nowrap; }

/* In-app questions (ask): above any open panel, below coach callouts */
.ask .scrim { z-index: 62; }
.ask .panel { z-index: 63; padding: 18px 16px 16px; }
.ask-t { display: block; font-size: 17px; font-weight: 600; color: var(--fg); margin: 0 2px 6px; }
.ask-p { color: var(--muted); font-size: 14px; line-height: 1.4; margin: 0 2px 12px; }
.ask-row { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; }
.ask-row .fields { flex: 1; min-width: 0; }
.ask-row input { font-size: 18px; font-weight: 500; }
.ask-pv { flex: none; width: 70px; height: 84px; border-radius: 14px; border: 1px solid var(--rim); background: var(--card); display: grid; place-items: center; }
.ask-pv:empty { display: none; }
.ask-pv svg { width: 58px; height: auto; }
.ask-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
.ask-picks .chip { height: 34px; font-size: 14px; }
.actions.stack { flex-direction: column; }
.actions.stack .btn { flex: none; width: 100%; }

/* Keyboard focus is always visible (touch doesn't show it) */
button:focus-visible, a:focus-visible, select:focus-visible, [tabindex]:focus-visible, label:has(> select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
[role=dialog]:focus-visible { outline: none; }
/* Bigger touch areas for small text controls, without moving them */
#sort { padding: 10px 0; margin: -10px 0; }

/* ---------- Wide screens: iPad and phone landscape ---------- */
.rail, .side { display: none; }
@media (min-width: 700px) {
  :root { --wide: 1.25; }
  .app { max-width: 680px; }
  .dock { width: min(640px, calc(100% - 48px)); }
}
@media (min-width: 1000px) {
  :root { --wide: 1.5; }
  body.wide .app.viewer { max-width: none; margin: 0; padding-left: 64px; padding-right: 372px; }
  body.wide .rail { display: block; position: fixed; top: calc(28px + var(--safe-t)); right: 36px; bottom: calc(100px + var(--safe-b)); width: 300px; overflow-y: auto; z-index: 6; scrollbar-width: none; }
  body.wide .rail::-webkit-scrollbar { display: none; }
  body.wide .rail .strip { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 10px; }
  body.wide .rail .scard { width: 64px; height: 92px; }
  body.wide .rail .scard svg { width: 60px; height: auto; }
  body.wide .smap { right: 340px; }
  body.wide .dock { left: calc((100% - 336px) / 2); width: min(720px, calc(100% - 440px)); }
  body.wide .dock-fade { right: 360px; }
  body.wide .chead { right: 360px; }
}
@media (min-width: 1150px) {
  body.wide .app.viewer { padding-left: 326px; }
  body.wide .side { display: block; position: fixed; left: 0; top: 0; bottom: 0; width: 290px; padding: calc(24px + var(--safe-t)) 12px calc(24px + var(--safe-b)); border-right: 1px solid var(--hair); background: var(--bg); overflow-y: auto; z-index: 26; }
  body.wide .dock { left: calc(290px + (100% - 290px - 360px) / 2); width: min(720px, calc(100% - 290px - 420px)); }
  body.wide .chead { left: 290px; }
}
/* Editing on a wide screen: the full width for the song, nothing to tap away to */
@media (min-width: 1000px) {
  body.wide.cedit .rail, body.wide.cedit .side { display: none; }
  body.wide.cedit .app.viewer { max-width: 760px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
  body.wide .dock-fade { left: 290px; }
}
.side-h { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 8px 12px 10px; }
.side-r { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--fg); }
.side-r b { display: block; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-r span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-r.on { background: var(--accent-soft); }
.side-r.on b { color: var(--accent-ink); }
/* Phone on its side: the controls become a slim column on the right, so the
   song gets the whole height. Now and Next and the loop bar need the height. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --wide: 1.25; }
  .app.viewer { max-width: none; padding-left: calc(40px + var(--safe-l, 0px)); padding-right: calc(124px + var(--safe-r, 0px)); padding-bottom: 40px; }
  .app.viewer .dock { left: auto; right: calc(10px + var(--safe-r, 0px)); top: calc(10px + var(--safe-t)); bottom: calc(10px + var(--safe-b)); width: 84px; transform: none; }
  .app.viewer .pw { display: flex; flex-direction: column; }
  .app.viewer .looprow.on { display: none; }
  .app.viewer .player { flex: 1; }
  .app.viewer .play { width: 56px; height: 56px; border-radius: 16px; }
  .app.viewer .speed { flex: 1; flex-direction: column-reverse; justify-content: center; gap: 6px; }
  .app.viewer .speed input { writing-mode: vertical-lr; direction: rtl; width: 28px; flex: 1; min-height: 60px; max-height: 140px; }
  .app.viewer .speed span { width: auto; text-align: center; }
  
  .app.viewer .step { flex-direction: column-reverse; }
  .app.viewer .dock-fade { display: none; }
  .smap { right: calc(100px + var(--safe-r, 0px)); }
}

/* ---------- Sketch: sing a song idea line by line ---------- */
.app:has(.skpad) { padding-bottom: calc(260px + var(--safe-b)); }
.app:has(.skpad.small) { padding-bottom: calc(190px + var(--safe-b)); }
.skh { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 6px; }
.skh .title { font-size: 32px; }
.skdots { display: flex; gap: 6px; }
.skdots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--accent); display: block; }
.skdots i.on { background: var(--accent); }
.skmeter { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--fg-2); margin: 0 2px; min-height: 20px; }
.skm-k { color: var(--accent-ink); font-weight: 600; }
.skm-bars { display: flex; gap: 3px; }
.skm-bars i { width: 14px; height: 5px; border-radius: 3px; background: var(--rim); display: block; transition: background .3s; }
.skm-bars i.on { background: var(--accent); }
.skwheel.big { display: flex; justify-content: center; margin: 6px 0 2px; }
.skwheel-row { display: flex; gap: 14px; align-items: center; margin: 10px 0 8px; }
.skwheel.small { flex: none; width: 116px; height: 116px; }
.skw path { fill: var(--card); stroke: var(--bg); stroke-width: 2; transition: fill .4s; cursor: pointer; }
.skw.m path { fill: transparent; stroke: var(--hair); stroke-width: 1; }
.skw text { text-anchor: middle; fill: var(--muted); font-weight: 500; pointer-events: none; transition: fill .4s; }
.skw.lit path { fill: color-mix(in srgb, var(--accent) calc(var(--s) * 18% + 2%), transparent); }
.skw.lit text { fill: var(--accent); }
.skw.on path { fill: color-mix(in srgb, var(--accent) calc(var(--s) * 85% + 10%), transparent); }
.skw.on text { fill: var(--fg); font-weight: 700; }
.skw.tap path { fill: var(--accent); }
.skw.tap text { fill: var(--on-accent); }
.skw-ring { fill: none; stroke: var(--hair); }
.skw-dot { fill: var(--rim); transition: r .3s; }
.skw-dot.on { fill: var(--accent); }
.skw-glow { fill: var(--accent); opacity: .15; }
.skw-c { text-anchor: middle; fill: var(--fg); font-family: var(--serif); }
.skw-s { text-anchor: middle; fill: var(--muted); }
.skfam span { font-size: 13px; color: var(--muted); }
.skfam div { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.skfam-c { height: 30px; min-width: 38px; padding: 0 9px; border-radius: 10px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); font: 600 14px var(--sans); }
.skfam small { font-size: 12px; color: var(--muted); }
.sk-lab { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.sk-lab.on { color: var(--accent-ink); }
.sklive { margin: 6px 2px 0; }
#sk-rib { display: block; width: 100%; height: 86px; }
.skg-a { stop-color: var(--accent); stop-opacity: .45; }
.skg-b { stop-color: var(--accent); stop-opacity: 0; }
.sk-line { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.sk-empty { font: 13px var(--sans); fill: var(--muted); }
.skwords { font: 500 19px var(--sans); color: var(--fg-2); margin-top: 4px; }
.skchips { display: flex; gap: 6px; align-items: center; margin-top: 8px; min-height: 28px; }
.skc { padding: 3px 10px; border-radius: 10px; font: 600 13px var(--sans); border: 1px solid var(--rim); color: var(--fg-2); }
.skc.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.skchips small { font-size: 12px; color: var(--muted); margin-left: 4px; }
.skintro { color: var(--muted); font-size: 15px; line-height: 1.5; text-align: center; margin: 8px 18px 0; }
/* Strum it */
.seg.skmode { display: flex; margin: 4px 0 10px; }
.seg.skmode button { flex: 1; min-height: 36px; border: 0; background: none; font-size: 14px; }
.seg.skmode button.on { font-weight: 600; }
.seg.skmode button:disabled { opacity: .5; }
.skear { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.skear .spin, .sknb-hear .spin { margin: 0; }
.sknb-hear { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 13px; color: var(--muted); }
.sknb-riff { display: block; margin: 6px 0 2px; font: 600 13px var(--mono); color: var(--accent-ink); }
.skcmp { display: flex; gap: 8px; margin: 8px 0 4px; }
.skcmp button { flex: 1; text-align: left; padding: 7px 10px; border-radius: 12px; border: 1px solid var(--rim); background: var(--card); color: var(--muted); font-size: 12px; }
.skcmp button.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--fg-2); }
.skcmp b { display: block; margin-top: 2px; font: 600 14px var(--mono); color: var(--accent-ink); }
.sknb { border-radius: 18px; background: var(--card); border: 1px solid var(--rim); padding: 2px 12px; }
.sknb-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.sknb-n { width: 14px; padding-top: 24px; font-size: 12px; color: var(--muted); flex: none; }
.sknb-txt { flex: 1; min-width: 0; }
.sknb-line { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 16px 0 2px; color: var(--fg); font: 18px/1.9 var(--serif); }
.sknb-w { position: relative; display: inline-block; }
.sknb-w b { position: absolute; left: 0; top: -1.05em; font: 700 13px var(--sans); color: var(--accent-ink); white-space: nowrap; }
.sknb-none { color: var(--muted); font-style: italic; }
.sknb-in { width: 100%; margin-top: 14px; height: 40px; border: 0; border-bottom: 1.5px solid var(--accent-line); background: none; font: 18px var(--serif); color: var(--fg); }
.sknb-hint { display: block; text-align: left; margin: 6px 0 4px; padding: 0 0 0 10px; border: 0; border-left: 2px solid var(--accent-line); background: none; font: italic 14px/1.4 var(--serif); color: var(--muted); }
.sknb-acts { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.sknb-next { padding: 12px 0 12px 22px; font: italic 16px var(--serif); color: var(--muted); }
/* The pad: a glowing half circle at the bottom */
.skpad { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(520px, 100%); height: calc(240px + var(--safe-b)); border-radius: 50% 50% 0 0 / 22% 22% 0 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: calc(28px + var(--safe-b)); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 100%, rgba(224,90,74,.32), rgba(224,90,74,.08) 55%, transparent 75%); transition: background .25s; }
.skpad.small { height: calc(170px + var(--safe-b)); }
.skpad.on { background: radial-gradient(120% 90% at 50% 100%, rgba(224,90,74,.6), rgba(224,90,74,.14) 55%, transparent 75%); }
.skpad.on.redo { background: radial-gradient(120% 90% at 50% 100%, rgba(140,140,140,.45), rgba(140,140,140,.1) 55%, transparent 75%); }
.skpad.up { background: radial-gradient(120% 90% at 50% 100%, rgba(237,162,127,.55), rgba(237,162,127,.12) 55%, transparent 75%); }
.skpad b { font: 600 16px var(--sans); color: var(--fg); position: relative; }
.skpad span { font-size: 12.5px; color: var(--fg-2); margin-top: 4px; position: relative; min-height: 1.2em; }
.skpad-ring { position: absolute; bottom: calc(58px + var(--safe-b)); width: 150px; height: 150px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--fg) 18%, transparent); display: none; }
.skpad-ring.r2 { width: 210px; height: 210px; bottom: calc(28px + var(--safe-b)); opacity: .5; }
.skpad.on .skpad-ring { display: block; transform: scale(calc(1 + var(--lv, 0) * .18)); border-color: color-mix(in srgb, var(--accent) calc(var(--lv, 0) * 80%), color-mix(in srgb, var(--fg) 18%, transparent)); transition: transform .1s, border-color .1s; }
.skpad-dot { position: absolute; bottom: calc(66px + var(--safe-b)); width: 64px; height: 64px; border-radius: 50%; background: #e05a4a; box-shadow: 0 0 0 6px rgba(224,90,74,.2); }
.skpad:not(.small) .skpad-dot { width: 84px; height: 84px; bottom: calc(80px + var(--safe-b)); }
.skpad.on .skpad-dot { width: 30px; height: 30px; border-radius: 9px; bottom: calc(118px + var(--safe-b)); box-shadow: none; }
.skpad:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) { .skpad.on .skpad-ring { transition: none; } }
/* A sketch song: hear it back with the words following; Simple or Rich chords */
.skrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.sk-hear { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); border-color: var(--accent-line); }
.sk-hear svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.sk-hear.on { background: var(--accent-soft); }
.sk-style { margin-left: auto; }
.sheet.skplay > .pr, .sheet.skplay > .ly, .sheet.skplay > .crow { opacity: .4; transition: opacity .3s; }
.sheet.skplay > .skcur { opacity: 1; }
.sheet .sg.skc > .l { color: var(--accent-ink); }
.sheet .sg.skc > .c .ct { box-shadow: inset 0 -2px 0 var(--accent); }
/* The chord picker on a sketch song: chords that fit the melody, and whole-line options */
.ce-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.ce-fitb { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 4px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--rim); background: var(--card); color: var(--fg); text-align: left; }
.ce-fitb.on { border-color: var(--accent-line); background: var(--accent-soft); }
.ce-fitb b { font-size: 16px; font-weight: 650; }
.ce-fitb span { font-size: 12px; color: var(--muted); justify-self: end; }
.ce-fitb i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--rim); overflow: hidden; display: block; }
.ce-fitb i i { height: 100%; background: var(--accent); }
.ce-alts { display: flex; flex-direction: column; gap: 6px; }
.ce-alt { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--rim); background: var(--card); color: var(--fg); font-size: 15px; font-weight: 500; text-align: left; }
.ce-alt.on { border-color: var(--accent-line); color: var(--accent-ink); }
.ce-alt small { font-size: 12px; color: var(--muted); font-weight: 400; }
#ce-panel { max-height: calc(100dvh - 24px - var(--safe-t) - var(--safe-b)); overflow-y: auto; }
/* Add the words */
.cs-words { width: 100%; margin-top: 12px; }
.ws-text { width: 100%; box-sizing: border-box; min-height: 180px; border-radius: 12px; border: 1px solid var(--rim); background: var(--card); color: var(--fg); font: 16px/1.5 var(--sans); padding: 12px 14px; resize: vertical; }
#ws-prev { white-space: pre; color: var(--fg-2); }

/* ---------- One hand: a phone held upright ----------
   Controls you use often sit at the bottom, in reach of the thumb. Same sizes
   and look as before; only the places change. iPad and landscape keep their
   layouts, so the bar's Back, favorite and ••• are hidden there. */

.sb.more { position: relative; }
@media (max-width: 699px) and (orientation: portrait) {
  /* Song page: the top is just the song; its buttons move into the bar. */
  body:not(.cedit) .app.viewer > .head { display: none; }

  .app.viewer .player { 
    grid-template-columns: auto auto minmax(0, auto) minmax(0, auto) 1fr auto auto;
    grid-template-areas: "back nn dial set . more play"; }
  .app.viewer .player .jewel { display: none; }
  .app.viewer .player .dialbtn, .app.viewer .player .setdial { min-width: 0; overflow: hidden; }
  
  .app.viewer .player .speed { display: none; }
  .app.viewer .player .dialbtn { grid-area: dial; }
  .app.viewer .player .setdial { grid-area: set; justify-self: start; }
  
  .app.viewer .player .play { grid-area: play; }
  
  .app.viewer .player .more { grid-area: more; }
  
  body.loop-on .app.viewer { padding-bottom: calc(162px + var(--safe-b)); }
  .app.viewer .dock-fade { height: calc(112px + var(--safe-b)); }
  /* Things that sit above the bar move up with it (one row since 3.20.0). */
  .nextup, .backpaste { bottom: calc(96px + var(--safe-b)); }
  .nextline { bottom: calc(102px + var(--safe-b)); }
  .smap { bottom: calc(102px + var(--safe-b)); }
  .coach.free { bottom: calc(102px + var(--safe-b)); }
  /* The ••• menu rises from the bottom: same rows, within reach. */
  .menu.msheet { left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); width: auto; animation: rise .22s cubic-bezier(.2,1,.3,1); transition: transform .12s; }
  .menu.msheet .grab { margin: 8px auto 6px; }
  .menu.msheet .mrow.size { border-bottom: 0; border-top: 1px solid var(--hair); border-radius: 0 0 10px 10px; margin: 4px 0 0; padding-top: 6px; padding-bottom: 0; }
}
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
/* One hand, full-height sheets: the main action is the lowest button. */
.pfoot { flex: none; padding: 10px 16px calc(12px + var(--safe-b)); }
.pfoot .btn { width: 100%; }
.panel.full:has(.pfoot) .pbody { padding-bottom: 12px; }
@media (max-width: 699px) and (orientation: portrait) {
  .cs .pbody .cs-act { order: 9; margin-top: auto; }
}

/* ---------- the corner dial and the glow ----------
   The glow is for values you glance at (a dial's reading, the count-in, the
   chord you're on, in tune, a gig countdown): one at a time, never on buttons
   or the words. */
:root { --glow-c: #ffd2a0; --glow: 0 0 4px rgba(255,170,90,.9), 0 0 12px rgba(255,140,60,.65), 0 0 28px rgba(255,120,40,.4); }
:root[data-theme="light"] { --glow-c: var(--accent-deep); --glow: 0 0 6px rgba(237,140,80,.45), 0 0 16px rgba(237,140,80,.25); }
.glow { color: var(--glow-c); text-shadow: var(--glow); }
.dialbtn { display: none; white-space: nowrap; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; border-radius: 8px; border: 1px solid var(--rim); background: var(--card); color: var(--fg-2); font: 500 13px var(--mono); touch-action: none; }
.dialbtn svg { width: 16px; height: 16px; color: var(--accent-ink); }
@media (max-width: 699px) and (orientation: portrait) {  }
.dial { position: fixed; inset: 0; z-index: 70; touch-action: none; opacity: 0; transition: opacity .15s; }
.dial.on { opacity: 1; }
.dial svg { position: absolute; inset: 0; transform-origin: 100% 100%; transform: scale(.82); transition: transform .2s cubic-bezier(.2,1,.3,1); }
.dial.on svg { transform: none; }
.dial-ticks line { stroke-linecap: round; }
.dial-labels text { font: 500 11px var(--sans); }
.dial-labels text.cur { font-size: 14px; }
.dial-big { font: 600 38px var(--sans); font-variant-numeric: tabular-nums; }
.dial.set .dial-big { font-size: 19px; }
.dial-small { font: 500 11px var(--sans); }
.dial-end { font: 500 10px var(--sans); }
@media (prefers-reduced-motion: reduce) { .dial, .dial svg { transition: none; } }
/* Count-in, the chord you're on, in tune: the glow */
.countin { color: var(--glow-c); text-shadow: var(--glow); }
.tn-note.glow b { color: var(--glow-c); text-shadow: var(--glow); transition: color .2s, text-shadow .2s; }
.un-cd { font: 600 26px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .01em; margin: 4px 0 2px; }

/* ---------- One hand (phone upright; fold.js, 3.19.0) ----------
   Paused, the whole bar is out. Playing, it folds into Play's corner and Play
   stays there alone, to pause. Paused at the top, pull down to go back. */
#fp { display: none; }
body.one #fp { display: block; position: fixed; inset: 0; z-index: 21; pointer-events: none; }
body.one #fp > * { pointer-events: auto; }
body.one:not(.fold) #fp > :not(.fp-pull) { display: none; }
body.one { overscroll-behavior: none; }
body.fold .fp #play { position: fixed; z-index: 22; width: 52px; height: 52px; border-radius: var(--r); right: 18px; bottom: calc(18px + var(--safe-b)); display: grid; place-items: center; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.fold .fp #play svg { width: 18px; height: 18px; }
.fp-nav { position: fixed; z-index: 22; right: 80px; bottom: calc(18px + var(--safe-b)); height: 52px; max-width: calc(100vw - 112px); display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--bronze-line, var(--rim)); background: color-mix(in srgb, var(--solid) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--fg); font: 600 14px var(--sans); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.fp-nav[hidden] { display: none; }
/* 4.43.0 (#83): the band, above Play while the song plays, and its short sheet (no scrim, the reading line stays in sight) */
.fp-band { position: fixed; z-index: 22; right: 22px; bottom: calc(86px + var(--safe-b)); width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r); border: 0; background: color-mix(in srgb, var(--solid) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--accent-ink); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.fp-band[hidden] { display: none; }
.fp-band svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.band-sheet { z-index: 45; display: flex; flex-direction: column; gap: 12px; }
.band-sheet .bs-top { display: flex; align-items: center; justify-content: space-between; font: 700 18px var(--display); }
.band-sheet .bs-row { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.band-sheet .bs-l { flex: 1; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.band-sheet .bs-l svg { width: 20px; height: 20px; color: var(--accent-ink); }
.band-sheet .bs-vol input { flex: 2; }
.band-sheet output { width: 48px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.band-sheet .bs-note { margin: 0; color: var(--fg-2); }
.fp-nav svg { width: 18px; height: 18px; flex: none; color: var(--accent-ink); }
.fp-nav .fn-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-nav small { flex: none; color: var(--muted); font-weight: 500; }
body.fold .app.viewer .player { display: none; }
body.fold:not(.loop-on) .app.viewer .dock { display: none; }
body.fold .app.viewer .dock { bottom: calc(84px + var(--safe-b)); }
body.fold .app.viewer { padding-bottom: calc(120px + var(--safe-b)); }
body.fold .app.viewer .dock-fade { height: calc(100px + var(--safe-b)); }
body.cedit #fp { display: none; }
body.one .app.viewer[style*="--pull"] > :not(.fp):not(.dock):not(.dock-fade):not(.chead):not(.smap) { transform: translateY(var(--pull)); }
.fp-pull { position: fixed; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); padding: 8px 14px; border-radius: 18px; background: var(--solid); border: 1px solid var(--rim); color: var(--fg-2); font: 500 13px var(--sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: color .12s, border-color .12s, box-shadow .12s; }
.fp-pull.go { color: var(--glow-c); border-color: var(--accent); box-shadow: 0 0 14px rgba(255,150,70,.4); text-shadow: var(--glow); }

/* no rubber-band bounce of the whole page on the song screen */
/* Not tuned in the last few hours: a solid dot on the fork's corner, with an
   outline so it stands off the button, and two rings that ripple out from it
   three times every 7 seconds, like a ringing fork. The dot itself never
   fades, so it's there whenever you look. */
.ib .dotmark, .add.tool .dotmark { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--card); pointer-events: none; }
.ib .dotmark { top: 2px; right: 2px; }
.add.tool .dotmark { top: 12px; right: 14px; }
.ib .dotmark::before, .ib .dotmark::after, .add.tool .dotmark::before, .add.tool .dotmark::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid var(--accent); pointer-events: none; opacity: 0; }
.ib .dotmark::before, .add.tool .dotmark::before { inset: -4px; animation: fork-ring 7s ease-out infinite; }
.ib .dotmark::after, .add.tool .dotmark::after { inset: -8px; animation: fork-ring 7s ease-out .12s infinite; }
@keyframes fork-ring {
  0% { transform: scale(.7); opacity: .9; } 15.9% { transform: scale(1.3); opacity: 0; }
  16% { transform: scale(.7); opacity: .9; } 31.9% { transform: scale(1.3); opacity: 0; }
  32% { transform: scale(.7); opacity: .9; } 47.9%, 100% { transform: scale(1.3); opacity: 0; }
}
/* Reduce Motion: the rings stay, still. */
@media (prefers-reduced-motion: reduce) {
  .ib .dotmark::before, .add.tool .dotmark::before, .ib .dotmark::after, .add.tool .dotmark::after { animation: none; }
  .ib .dotmark::before, .add.tool .dotmark::before { opacity: .7; } .ib .dotmark::after, .add.tool .dotmark::after { opacity: .4; }
}
/* the tuner's success: "All in tune" glows green */
.tn-note.done.glow b { color: var(--good); text-shadow: 0 0 6px color-mix(in srgb, var(--good) 80%, transparent), 0 0 18px color-mix(in srgb, var(--good) 50%, transparent); }
/* no iPhone text selection or callout on the dials */
.dial, .dial *, .dialbtn, .dialbtn * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }

/* German practice: German words in the sheet, gender by a dotted line
   (der blue, die rose, das green; other words copper), the level sheet and the word card. */
:root { --de-der: #6f9fd8; --de-die: #d27f90; --de-das: #5fae7c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --de-der: #8db8ec; --de-die: #eba1ae; --de-das: #8fd3a3; } }
:root[data-theme="dark"] { --de-der: #8db8ec; --de-die: #eba1ae; --de-das: #8fd3a3; }
.sheet .de { color: var(--accent-ink); font-weight: 600; border-bottom: 2px dotted currentColor; cursor: pointer; }
.de.g-der { color: var(--de-der); } .de.g-die { color: var(--de-die); } .de.g-das { color: var(--de-das); }
.de-sheet .de, .de-lv em .de { font-weight: 600; border-bottom: 2px dotted currentColor; }
.de-sheet .de:not(.g-der):not(.g-die):not(.g-das) { color: var(--accent-ink); }
.de-en { display: block; font-size: .72em; color: var(--muted); font-weight: 400; margin-top: 1px; }
.stat.dechip[hidden] { display: none; }
.stat.dechip b { font-size: 12px; color: var(--accent-ink); letter-spacing: .04em; }
.de-levels { display: flex; flex-direction: column; gap: 8px; }
.de-lv { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--rim); background: var(--card); color: var(--fg); text-align: left; }
.de-lv i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; margin-top: 2px; }
.de-lv.on { border-color: var(--accent-line); background: var(--accent-soft); } .de-lv.on i { border: 5px solid var(--accent); }
.de-lv b { display: block; font-size: 15px; font-weight: 600; } .de-lv small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.de-lv em { display: block; font-style: normal; font-size: 14px; color: var(--fg-2); margin-top: 5px; }
.de-row { display: flex; align-items: center; justify-content: space-between; margin: 12px 2px 4px; font-size: 14px; color: var(--fg-2); }
.panel.de-sheet { bottom: 0; max-height: calc(100dvh - 40px - var(--safe-t)); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; animation: up .42s cubic-bezier(.2,1.15,.3,1); }
.de-sheet .pbody { min-height: 0; }
.de-sheet .pbody > * { flex: none; }
.decard { box-shadow: 0 14px 40px rgba(0,0,0,.35); position: fixed; left: 12px; right: 12px; max-width: 480px; margin: 0 auto; z-index: 40; padding: 14px 16px; border-radius: 18px; animation: fade .2s; }
.dc-w { font: 400 24px var(--serif); color: var(--fg); }
.dc-w .art { font-weight: 600; }
.dc-w .art.g-der { color: var(--de-der); } .dc-w .art.g-die { color: var(--de-die); } .dc-w .art.g-das { color: var(--de-das); }
.dc-t { font-size: 14.5px; color: var(--fg-2); margin: 3px 0 8px; }
.dc-r { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rim); font-size: 13px; color: var(--fg-2); line-height: 1.4; }
.dc-r b { width: 76px; flex: none; color: var(--muted); font-weight: 500; }
.dc-b { display: flex; gap: 8px; margin-top: 10px; } .dc-b .btn { flex: 1; }

/* Settings menu: one row per page, Back up now in thumb reach. */
.set-group.s-gap { margin-top: 18px; }
.s-keys { display: inline-flex; align-items: center; gap: 5px; }
.s-keys .dot { margin-left: 6px; }
.s-keys .dot:first-child { margin-left: 0; }
.s-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px calc(12px + var(--safe-b)); border-top: 1px solid var(--hair); background: var(--bg); }
.s-dock .btn { flex: none; width: 100%; max-width: 560px; }
.s-dock span { font-size: 12px; color: var(--muted); }
#app:has(.s-dock) { padding-bottom: calc(110px + var(--safe-b)); }
details.s-why { margin-top: 4px; }
details.s-why summary { cursor: pointer; color: var(--muted); margin-bottom: 6px; }
#s-keymsg:empty { display: none; }

/* Changes: the Today line opens the week's chord changes. */
.today .t-stat { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; min-height: 32px; width: 100%; cursor: pointer; }
.today .t-stat .chev { width: 14px; height: 14px; color: var(--muted); margin-left: auto; flex: none; }
.chg-list { display: flex; flex-direction: column; margin: 2px 0 8px; }
.chg { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--hair); }
.chg:last-child { border-bottom: 0; }
.chg b { font: 600 15px var(--sans); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chg b em { font-style: normal; color: var(--muted); margin: 0 4px; }
.chg .bar { height: 6px; border-radius: 3px; background: var(--card-2); overflow: hidden; }
.chg .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.chg small { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.chg.work b { color: var(--accent-ink); }
.chg.work .bar i { background: var(--accent-line); }
.chg-lab { margin: 10px 2px 2px; }

/* Play together: a shared start time, a countdown on both phones. */
.duet-t { font: 600 17px var(--sans); color: var(--fg); margin: 2px 2px 4px; }
.duet-a { font-size: 13.5px; color: var(--muted); margin: 0 2px 10px; }
.duet-when { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 16px; }
.duet-when big { font: 600 40px var(--sans); color: var(--fg); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.duet-when span { font-size: 13px; color: var(--muted); text-align: center; }
.duet-seg { margin: 6px 0 4px; }
.duet-seg button { height: 36px; }
.duet-wait .actions .btn { flex: 1; }


/* Small shared pieces that used to be inline styles. */
.fld.fld-k { min-height: 52px; }
.tile.ftile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--rim); color: var(--fg-2); }
.foot.pn { margin: 0 2px 12px; }

/* ==========================================================================
   Amp theme
   Everything below draws from one set of materials, so a gold plate, a copper
   button or a lamp looks the same wherever it appears:
     piping     the thin bronze edge on bars, lists, cards, sheets and the ring
     plate      brushed gold, like an amp's front panel; holds recesses
     recess     dark wells set into a plate (Back, the time, Cancel, switches)
     copper     the main action (Play, Save, add, primary buttons)
     chrome     amp-control buttons (the ring, the editor's tool buttons)
     lamp       the amber jewel lamp: off, warming, or lit
     tolex      black pebbled covering for the ring and result cards
   Liquid Glass is kept for bars that float over the song or library, where
   seeing content slide underneath helps. Sheets are frosted; plates are solid.
   ========================================================================== */

/* ---- Piping and labels ---- */
.label, .sheet .sec, .strip-h, .ed-new { color: var(--bronze); }

/* ---- Liquid Glass: the bars that float over content ----
   Mostly see-through, a light blur that lifts the colour behind, a bright rim
   along the top and a faint one along the bottom. */
/* Sheets are frosted: the page shows softly through but text stays easy to read. */
.dock-fade { height: calc(76px + var(--safe-b)); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 80%, transparent) 85%); }
/* The library's search bar and add button sit on one line at the song bar's height. */
.dock { align-items: center; }
.dock > .cmd { height: 60px; }


/* ---- Buttons ----
   Two families. Everyday buttons (.btn) are quiet cards with a copper .primary
   for the main action. Amp controls (.chrome) are black with a chrome rim. */

/* ---- Plates and recesses ---- */
.ce-plate, .nx #nx-level, .gs #gs-level {
  
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ce-plate, .nx #nx-level, .gs #gs-level { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 6px; box-sizing: border-box; border-radius: 18px; }
.ce-rec, .cebar .ce-plate .seg, .nx #nx-level button, .gs #gs-level button {
  color: var(--recess-fg); 
}

/* The add button: copper set into a 6 px band of plate, exactly like Play on the song bar.
   The note is drawn filled in brushed silver, with a small + badge. */
.add { position: relative; box-sizing: border-box; width: 60px; height: 60px; margin: 0; border-radius: 18px; 
  
  }
.add .add-note { width: 28px; height: 28px; }
.add .add-bdg { position: absolute; right: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; 
  font: 800 13px/15px var(--sans); font-style: normal; text-align: center; pointer-events: none; }

/* ---- Lamps ----
   One lamp in four sizes. .on is lit, .warm pulses while something is working. */
.jewel, .gs-lamp, .nx-jewel, #chips .chip::before {
  border-radius: 50%; flex: none; background: var(--lamp-off); box-shadow: var(--lamp-ring); transition: background .3s, box-shadow .3s; }
body.playing .jewel, .gs-lamp.on, #chips .chip.on::before, .nx-jewel {
  background: var(--lamp-on); box-shadow: var(--lamp-ring), var(--lamp-glow); }
.gs-lamp.warm { background: var(--lamp-warm); animation: lampwarm 1.2s ease-in-out infinite alternate; }
.nx-jewel { animation: lampwarm 1.6s ease-in-out infinite alternate; }
@keyframes lampwarm { from { filter: brightness(.55); box-shadow: var(--lamp-ring); } }
@media (prefers-reduced-motion: reduce) { .gs-lamp.warm, .nx-jewel { animation: none; } }
.jewel { width: 12px; height: 12px; margin: 0 4px; align-self: center; }
.gs-lamp { width: 12px; height: 12px; }
.nx-jewel { width: 34px; height: 34px; }

/* ---- Tolex cards: the result cards in Play next and Get the song ---- */
.nx .nx-row, .gs .gs-rows.glass { 
  -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- Library ---- */
/* Filter chips: a lamp each, lit on the one you've picked. */
#chips .chip { display: inline-flex; align-items: center; gap: 7px; padding-left: 10px; }
#chips .chip::before { content: ""; width: 7px; height: 7px; }
/* Swipe a song: Delete on the left, Favorite on the right. The buttons sit
   behind the row and widen as it slides. */
.sw { position: relative; overflow: hidden; }
.sw .row { position: relative; z-index: 1; touch-action: pan-y; }
.sw.swiping .row { transition: transform .2s cubic-bezier(.2,1,.3,1); }
.sw .row:active { transition: none; }
.sw-act { position: absolute; top: 0; bottom: 0; width: 0; border: 0; padding: 0; display: grid; place-items: center; overflow: hidden; color: #fff; transition: width .2s cubic-bezier(.2,1,.3,1); }
.sw-act svg { width: 22px; height: 22px; flex: none; transition: transform .15s; }
.sw-del { right: 0; background: #c0392b; }
.sw-fav { left: 0; background: #a8653a; }
.sw-act.go svg { transform: scale(1.25); }
.sw:not(.swiping) .sw-act { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .sw .row, .sw-act, .sw.swiping .row { transition: none; } }

/* ---- Speed dial: a backlit amp meter (dial.js draws the parts) ---- */
.dial-ticks line, .dial-ticks line.lit, .dial-ticks line.cur, :root[data-theme="light"] .dial-ticks line.lit { stroke: #2a1d0c; stroke-opacity: .85; stroke-width: 1.5; }
.dial-ticks line.mj { stroke-width: 2.6; }
.dial-ticks line.hot { stroke-opacity: 1; }
.dial-needle { stroke-linecap: round; }
.dial-pivot { stroke-opacity: .7; }
.dial-big { font-size: 32px; }
.dial-small { letter-spacing: .14em; font-size: 10px; }
.dial.set .dial-small { letter-spacing: .04em; }
.dial-end { font-weight: 800; letter-spacing: .12em; font-size: 9px; }
.dial-labels text.cur { font-weight: 800; }
.dial-labels text.sc { font: 700 10px var(--sans); }

/* ---- The hold-Play menu: a tolex panel with a gold edge ----
   Each button is named in gold on the panel; a lamp in its corner shows what's on. */

/* ---- Editor ----
   The bottom bar is a gold plate: Cancel and Edit / Preview in recesses, Save
   in copper. Tools sit just above it once there's text. */
.ed-new { font: 400 15px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 10px 2px; }
.cebar.plate { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ce-rec, .cebar .ce-plate .seg { height: 48px; border-radius: 12px; font: 600 15px var(--sans); padding: 0 16px; flex: none; }
.cebar .ce-plate .seg { flex: 1; display: flex; box-sizing: border-box; }
.cebar .ce-plate .seg button { flex: 1; height: 38px; border: 0; background: none; font: 600 14px var(--sans); }
.cebar .ce-plate .seg[hidden] { display: none; }
.ce-save { margin-left: auto; height: 48px; padding: 0 22px; border-radius: 12px; font: 700 15px var(--sans); flex: none; }
.ed-toolrow { display: flex; gap: 8px; }
.ed-toolrow:empty { display: none; }
.ed-tl, .ed-tile { display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; flex: 1; font: 600 13px var(--sans); }
.ed-tl svg, .ed-tile svg { width: 18px; height: 18px; color: var(--accent-ink); flex: none; }
.ed-tile:disabled, .ed-tl:disabled { opacity: .55; }
/* Ways to start a new, empty song, under the pad. */
.ed-start { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; }
.ed-start[hidden] { display: none; }
.ed-tile { height: 72px; justify-content: flex-start; gap: 12px; padding: 0 14px; text-align: left; font-size: 15px; }
.ed-tile svg { width: 24px; height: 24px; }
.ed-tile small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ed-tile.wide { grid-column: 1 / 3; height: 52px; justify-content: center; }
/* Key, Tuning and Tempo folded into one line on a new song. */
.ed-sum { display: flex; align-items: center; gap: 6px; width: 100%; height: 40px; padding: 0 2px; font: 400 14px var(--sans); text-align: left; }
.ed-sum b { color: var(--fg); font-weight: 600; }
.ed-sum .found { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.ed-sum .more { margin-left: auto; color: var(--bronze); }
.ed-chips[hidden] { display: none; }
/* The writing area is a pad: dark ruled lines with a copper margin in the dark
   theme, a cream legal pad in the light theme. The rules repeat every line
   height (1.55em) from the top padding, so each line of text sits on one. */
.ed-hl, .ed-tx textarea { padding-left: 38px; }
.ed-hl { 
  background-position: 0 0, 0 12px; background-origin: border-box; }
:root[data-theme="light"] .ed-hl .hc, :root[data-theme="light"] .ed-hl div.hc { color: #a8522c; }
:root[data-theme="light"] .ed-tx textarea { caret-color: #2b2620; }
:root[data-theme="light"] .ed-tx textarea::placeholder { color: #8a7d66; -webkit-text-fill-color: #8a7d66; }
.sheet:has(.ed-tx) { padding-bottom: 150px; }
.ed-tx:has(~ .ed-start:not([hidden])) .ed-hl { min-height: 200px; }
/* Writing mode: a slim strip above the pad keeps the title, artist and key in view. */
.ed-strip { display: none; }
body.writing .ed-strip { display: flex; position: fixed; z-index: 26; left: 8px; right: 8px; top: calc(var(--vv-top, 0px) + var(--safe-t) + 8px); height: 40px; box-sizing: border-box;
  align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; color: var(--muted); font: 400 14px var(--sans); text-align: left; white-space: nowrap; overflow: hidden; }
.ed-strip b { color: var(--fg); font: 400 17px var(--serif); overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.ed-strip b.none { color: var(--muted); font-style: italic; }
.ed-strip i { font-style: normal; color: var(--muted); opacity: .7; }
.ed-strip span:not(.go) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ed-strip em { font-style: normal; font-weight: 600; color: var(--accent-ink); flex: none; }
.ed-strip .go { margin-left: auto; color: var(--bronze); flex: none; padding-left: 6px; }
body.writing .ed-tx { top: calc(var(--vv-top, 0px) + var(--safe-t) + 56px); height: calc(var(--vv-h, 100vh) - var(--safe-t) - var(--bar-h, 56px) - 72px); }

/* ---- Play next ----
   While the AI looks, a large lamp warms up. Each song is a tolex card; the
   level switch is a plate with a lamp lit on your pick. */
.nx-warm { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 90px 0 40px; text-align: center; color: var(--muted); font-size: 15px; }
.nx .list.glass { display: flex; flex-direction: column; gap: 10px; }
.nx .nx-row { height: auto; align-items: flex-start; padding: 14px 14px 14px 16px; }
.nx .nx-row .t { font-size: 17px; font-weight: 600; }
.nx-why { color: var(--gold-text); }
.nx .nx-ctl { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
.nx .nx-ctl > .btn { height: 46px; }
.nx #nx-level button, .gs #gs-level button { flex: 1; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 9px; font: 600 15px var(--sans); }
.nx #nx-level button.on, .gs #gs-level button.on { color: var(--recess-on); }
.gs #gs-level { margin: 12px 0; gap: 6px; }
.gs #gs-level button { font-size: 14px; gap: 7px; padding: 0 4px; }

/* ---- Get the song: a lamp per step, like a channel strip ---- */
.gs .gs-row { gap: 14px; }
.gs .gs-src { color: var(--muted); }
.gs .gs-row:has(.gs-lamp.on) .gs-src { color: var(--gold-text); }

/* ---- The library's title: "Library" in the phone's own script font (Snell
   Roundhand on iPhone), cream in the dark theme, dark bronze in the light theme. ---- */
.title.script { font-family: "Snell Roundhand", "Apple Chancery", "Brush Script MT", "Segoe Script", cursive; font-weight: 700; font-size: 46px; letter-spacing: 0; color: #efe2c2; text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 14px rgba(239,226,194,.12); }
:root[data-theme="light"] .title.script { color: #6e5128; text-shadow: none; }

/* ---- The tuner: an amp front ----
   Tolex behind everything, the instrument tiles as channel buttons with a
   lamp on the one in use, and a pilot lamp that lights while a note is heard. */
.tn-lamp { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--lamp-off); box-shadow: var(--lamp-ring); transition: background .3s, box-shadow .3s; }
.tn-lamp.on { background: var(--lamp-on); box-shadow: var(--lamp-ring), var(--lamp-glow); }
.tn-lamp { width: 10px; height: 10px; }
.tn-sayrow:has(.warn) .tn-lamp, .tuner2.chrom .tn-lamp { display: none; }
:root[data-theme="light"] .tn-pill { background: var(--card); border-color: var(--bronze-line); color: var(--fg-2); }
/* Settings > Playing: the metronome's volume sits beside its switch. */
.set .s-vol { flex: 0 0 110px; }

/* ---- Your playing (#/you) ----
   The headline sits in a gold plate like an amp's front panel, three readouts
   set into it. Each question gets a tolex card with a bronze title and a plain
   sentence; the pictures underneath stay small and quiet. */
.pf-since { margin: 0 2px 14px; font-size: 14px; color: var(--muted); }
.pf-empty { margin: 18px 2px; font-size: 16px; line-height: 1.5; color: var(--fg-2); }
.pf-plate { display: flex; gap: 8px; padding: 10px; border-radius: 20px; }
.pf-read { flex: 1; min-width: 0; padding: 12px 4px 10px; border-radius: 14px; text-align: center; }
.pf-read b { display: block; font: 700 34px/1.05 var(--mono); }
.pf-read span { display: block; margin-top: 4px; font: 700 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.pf-firsts { display: flex; gap: 8px; overflow-x: auto; margin: 14px -20px 4px; padding: 2px 20px 6px; scrollbar-width: none; }
.pf-firsts::-webkit-scrollbar { display: none; }
.pf-first { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; font-size: 14px; white-space: nowrap; }
.pf-first b { color: var(--fg); }
.pf-first small { color: var(--muted); font-size: 12px; }
.pf-card { margin-top: 14px; }
.pf-card h2 { margin: 0 0 6px; }
.pf-line { margin: 0 0 12px; font-size: 16px; line-height: 1.45; color: var(--fg); }
.pf-line:last-child { margin-bottom: 0; }
.pf-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.pf-stamp { display: flex; flex-direction: column; align-items: center; padding: 9px 2px 7px; border-radius: 50%; aspect-ratio: 1; justify-content: center; border: 1.5px solid var(--bronze-line); background: radial-gradient(circle, rgba(184,147,90,.08), transparent 70%); }
.pf-stamp b { font: 700 17px var(--sans); color: var(--fg); }
.pf-stamp span { font-size: 12px; color: var(--fg-2); }
.pf-stamp small { font-size: 12px; color: var(--muted); }
.pf-stamp.barre { border-color: var(--bronze); border-width: 2px; }
.pf-stamp.barre b { color: var(--accent-ink); }
.pf-stamp.next { border-style: dashed; opacity: .75; }
.pf-bars { display: flex; flex-direction: column; gap: 8px; }
.pf-bar { display: grid; grid-template-columns: 74px 1fr 52px; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-2); }
.pf-bar i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--w), var(--card-2) var(--w)); }
.pf-bar small { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.pf-grid { display: grid; grid-template-columns: 18px repeat(4, 1fr); gap: 5px; align-items: center; }
.pf-grid small { font-size: 12px; color: var(--muted); text-align: center; }
.pf-grid i { height: 18px; border-radius: 6px; background: var(--card-2); position: relative; overflow: hidden; }
.pf-grid i::after { content: ""; position: absolute; inset: 0; background: #ffb24a; opacity: var(--a); }
.pf-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-keys span { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 10px; border-radius: 10px; background: var(--card-2); font-size: 13px; color: var(--muted); }
.pf-keys b { font-size: 16px; color: var(--fg); }
.pf-spark { display: block; width: 100%; height: 44px; margin-top: 10px; }
.pf-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pf-cols13 { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; height: 76px; align-items: end; }
.pf-cols13 div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 4px; }
.pf-cols13 i { display: block; height: var(--h); min-height: 2px; border-radius: 3px; background: var(--accent); opacity: .85; }
.pf-cols13 small { font-size: 12px; color: var(--muted); text-align: center; }
.pf-cols { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pf-cols h3 { margin: 4px 0 6px; font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pf-song { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--hair); background: none; color: var(--fg); font-size: 15px; text-align: left; }
.pf-song span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-song small { color: var(--muted); font-size: 12px; }
.pf-song .chev { width: 14px; height: 14px; color: var(--muted); }
.app:has(.pf-dock) { padding-bottom: calc(100px + var(--safe-b)); }


/* Bass riff editor: a grid of sixteenth-note steps, a beat to a row. */

/* Tour Map: full screen. The page is locked while it is open; the map takes pinch and drag. */
body.tm-open { overflow: hidden; overscroll-behavior: none; }
body.tm-open .app { padding: 0; }
.tm-page { position: fixed; inset: 0; z-index: 3; touch-action: none; }
.tm-map, .tm-map.leaflet-container { position: absolute; inset: 0; z-index: 0; /* its own layer, so Leaflet's controls (z-index 800) stay under the sheet */ }
.tm-map .tm-tiles { filter: invert(1) hue-rotate(180deg) brightness(.78) contrast(.92) saturate(.55); }
.tm-map .tm-halo { filter: blur(3px); }
.tm-map .leaflet-control-attribution { font-size: 10px; }
.tm-map .leaflet-bottom { bottom: var(--dock-h, 150px); }
/* the same header as every other page: the title and a glass back button, no bar around them; a soft shade keeps the title readable over the map */
.tm-top { position: absolute; left: 0; right: 0; top: 0; z-index: 500; display: flex; align-items: center; gap: 8px; padding: calc(18px + var(--safe-t)) 20px 28px; pointer-events: none; }
.tm-top > * { pointer-events: auto; }
:root .tm-page .tm-top .title.script { color: #efe2c2; text-shadow: 0 1px 0 rgba(0,0,0,.55); }
.tm-top .title { font-size: 40px; line-height: 1.25; padding-bottom: 4px; }
.tm-ctl { position: absolute; right: 16px; bottom: calc(var(--dock-h, 180px) + 12px); z-index: 500; display: flex; flex-direction: column; gap: 10px; }
.tm-ctl .ib { width: 44px; height: 44px; }
.tm-flag { width: 100%; height: 48px; flex: none; }
.tm-flag svg { width: 18px; height: 18px; color: var(--accent-ink); }
.linkish { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; }
.tm-pin { display: grid; place-items: center; }
.tm-pin.badge { width: 30px; height: 30px; border-radius: 50%; font: 700 13px var(--mono); }
.tm-pin.badge svg { width: 16px; height: 16px; fill: none; stroke-width: 2; }
.tm-pin.dim { opacity: .5; }
.tm-lamp { display: block; width: 18px; height: 18px; border-radius: 50%; }
.tm-sheet-t { margin: 2px 0 8px; }
.tm-fine { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.tm-btns { display: flex; gap: 10px; }
.tm-btns .btn { height: 52px; }
.tm-btns .btn svg { width: 18px; height: 18px; }

/* Library: back to Tonight beside the title */
.head-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Tonight (home). New parts use the app's materials: tolex cards, recess, lamps, copper. */
.rd-say { margin: 10px 0 0; }
.rd-bubble { position: relative; flex: 1; margin: 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--bronze-line); background: var(--tolex-card); background-size: 120px 120px, auto; box-shadow: var(--tolex-inset); font-size: 15px; line-height: 1.4; color: var(--fg); }

.rd-song { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--fg); }
.rd-song b { flex: 1; min-width: 0; font: 400 30px/1.1 var(--serif); overflow-wrap: anywhere; }
.rd-song .k { font: 600 14px var(--mono); color: var(--muted); }

.rd-search { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; color: var(--muted); font: inherit; font-size: 16px; }
.rd-first { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 18px 10px 4px; }
.rd-first-t { margin: 8px 0 0; font: 400 30px/1.15 var(--serif); color: var(--fg); }
.rd-first .pf-line { margin-top: 6px; color: var(--fg-2); }
.louie .lv-body { transform-box: view-box; }
@keyframes lv-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-10px) scale(.96, 1.05); } 60% { transform: translateY(0) scale(1.06, .94); } }
.louie.cheer .lv-body, .louie.hornsUp .lv-body { animation: lv-hop .7s cubic-bezier(.3,1.4,.5,1) 2; transform-origin: 100px 180px; }
@keyframes lv-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.louie.happy .lv-eye { animation: lv-blink 5s infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .louie .lv-body, .louie .lv-eye { animation: none !important; } }
/* Tour Map: rival players and pressure */
.tm-rival { display: grid; place-items: center; }
.tm-rival b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #17181b; border: 2.5px solid var(--c); color: var(--c); font: 700 12px var(--sans); box-shadow: 0 3px 8px rgba(0,0,0,.6); }
.tm-rival.quiet b { opacity: .6; }
.tm-popwrap .leaflet-popup-content-wrapper { background: #17181b; color: #f1e3c4; border: 1px solid rgba(184,147,90,.42); border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.6); }
.tm-popwrap .leaflet-popup-tip { background: #17181b; }
.tm-popwrap .leaflet-popup-content { margin: 10px 14px; }
.tm-pop { display: flex; flex-direction: column; gap: 3px; font: 13px var(--sans); }
.tm-pop b { font: 400 18px var(--serif); color: #f1e3c4; }
.tm-pop span { color: #cbbfa6; }
.tm-pop small { margin-top: 4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8a7f70; }
.tm-push { margin: 0; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; }

/* No overflow lock here: on iPhone, any clipping box stops at the layout viewport, short of the screen's bottom edge, and cuts off the drawer. Tonight fits the screen, and road.js holds the page still. */
html:has(> body.is-home) { overscroll-behavior: none; }
/* iOS Home Screen apps keep fixed layers above the bottom strip where Safari's toolbar would be,
   so on Tonight the drawer, scrim and dock sit in the page instead, which runs the full screen
   height (--screen-h, set by road.js from the screen when the app is standalone). */
body.is-home { overscroll-behavior: none; position: relative; height: var(--screen-h, 100dvh); contain: paint; }
body.is-home .rd-drawer, body.is-home .dock { position: absolute; }
body.is-home .rd-drawer::after { display: none; }
body.is-home .app { height: var(--screen-h, 100dvh); box-sizing: border-box; display: flex; flex-direction: column; }
body.is-home .head .title.script { font-size: 40px; line-height: 1.25; padding: 0 0 4px; }
body.is-home .dock-fade { display: none; }
body.is-home .pf-card, body.is-home .rd-bubble { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi); border-radius: 16px; }

body.is-home .rd-say .louie { height: 84px; width: auto; }
body.is-home .rd-song b { font-size: 26px; }

@media (max-height: 740px) {
  body.is-home .rd-say, body.is-home .rd-first .louie { display: none; }
  
}

.rd-drawer { position: fixed; left: 50%; bottom: 0; width: min(560px, 100%); height: calc(var(--screen-h, 100dvh) - 44px - var(--safe-t)); z-index: 19; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 26px 26px 0 0; background-size: 120px 120px, auto; color: var(--fg); will-change: transform; touch-action: pan-y; transform: translate3d(-50%, calc(100% - var(--peek)), 0); }
.rd-drawer::after { content: ""; position: absolute; left: -1px; right: -1px; top: 100%; height: 400px; background: inherit; border-left: 1px solid var(--bronze-line); border-right: 1px solid var(--bronze-line); }

.rd-grab { display: block; margin: 0 auto 8px; }

/* Tour Map bottom (3.5): the venue line over the map and the scene sheet, a pull-up drawer in the
   app's glass with the copper Play. Pulled up: the takeover details and the scene in a recess. */
.tm-above { position: absolute; left: 12px; right: 12px; bottom: calc(var(--tm-peek, 90px) + 8px); z-index: 500; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tm-scrim { position: absolute; inset: 0; z-index: 600; opacity: 0; pointer-events: none; }
.tm-sheet { position: absolute; left: 50%; bottom: 0; width: min(560px, 100%); max-height: calc(100% - 96px - var(--safe-t)); z-index: 700; display: flex; flex-direction: column; box-sizing: border-box; padding: 0 0 calc(14px + var(--safe-b)); touch-action: pan-y; will-change: transform; transform: translate3d(-50%, 100%, 0); }
.tm-sizer { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; visibility: hidden; }
.tm-sh { flex: none; padding: 8px 14px 4px; }
.tm-sh .rd-grab { margin-bottom: 10px; cursor: pointer; }
.tm-sh-row { display: flex; align-items: center; gap: 12px; }
.tm-badge { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 2.5px solid var(--c); color: var(--c); font: 700 13px var(--sans); }
.tm-sh-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.tm-sh-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-sh-t span { font-size: 14px; color: var(--muted); }
.tm-sh-row .tm-go { flex: 0 0 auto; width: auto; min-width: 0; height: 46px; padding: 0 20px; font-size: 16px; }
.tm-go svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.tm-sbody { flex: 1; min-height: 0; overflow-y: hidden; overscroll-behavior: contain; padding: 6px 16px 4px; display: flex; flex-direction: column; gap: 12px; opacity: 0; }
.tm-line { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.tm-line b { color: var(--fg); font-weight: 600; }
.tm-lab { margin: 4px 0 -4px; }
.tm-board { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; }
.tm-bd { display: grid; grid-template-columns: 18px minmax(0, 120px) 1fr 30px; align-items: center; gap: 10px; font-size: 13px; }
.tm-bd > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e9dcc0; }
.tm-bd i { height: 8px; border-radius: 4px; background: var(--c); }
.tm-bd b { font: 700 13px var(--mono); color: var(--recess-on); text-align: right; }
.tm-bd.you > span:nth-child(2) { color: var(--recess-on); font-weight: 700; }
.tm-bd.you i { background: var(--lamp-on); box-shadow: 0 0 8px rgba(255,150,50,.5); }
.tm-bd.more i { display: none; }
.tm-sbody .tm-fine { margin: 0; font-size: 12px; color: var(--muted); }

/* ---- The neck (3.6.0): practice lessons ---- */

.pk-count { float: right; }
.pk-level.soon { border-style: dashed; }
.pk-board { display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px 4px; margin: 8px -2px 0; border-radius: 12px; scrollbar-width: none; }
.pk-board::-webkit-scrollbar { display: none; }
.pk-fret { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 62px; height: 72px; padding: 0; border: 0; background: none; font: inherit; }
.pk-fret b { font: 700 17px var(--sans); }
.pk-fret small { font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; min-height: 12px; }
.pk-fret.locked { border-right-style: dashed; }
.pk-inlay { flex: none; align-self: center; width: 22px; height: 22px; margin: 0 8px; padding: 0; border-radius: 50%; background: none; }
.pk-inlay.now { box-shadow: 0 0 12px rgba(255,178,74,.7); }
.pk-lesson { margin-top: 12px; }
.pk-chord { display: flex; justify-content: center; margin: 4px 0 10px; }
.pk-chord svg { height: 190px; width: auto; }
.pk-strings { display: flex; justify-content: space-between; gap: 4px; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; }
.pk-str { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pk-str small { font: 700 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--recess-dim); }
.pk-str.skip { opacity: .4; }
.pk-pair { display: flex; align-items: center; gap: 12px; }
.pk-now { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; border-radius: 16px; }
.pk-now b { font: 400 64px/1 var(--serif); color: var(--recess-on); }
.pk-now small { margin-top: 6px; font: 600 13px var(--sans); color: var(--recess-dim); }
.pk-diag { flex: none; width: 96px; opacity: .8; }
.pk-diag svg { width: 100%; height: auto; }
.pk-beats { display: flex; justify-content: center; gap: 18px; margin: 14px 0 6px; }
.pk-beats i { width: 14px; height: 14px; border-radius: 50%; background: var(--lamp-off); border: 1px solid var(--recess-edge); transition: background .06s; }
.pk-beats i.on { background: var(--lamp-on); box-shadow: 0 0 10px rgba(255,178,74,.8); }
.pk-lesson .rd-say { margin-top: 10px; }
.s-dock .btn:disabled { opacity: 1; }
/* 4.23.1: a hidden dock button really hides (.btn's display:flex beat the hidden attribute, so a
   lesson's Start listening sat there disabled and looked broken) */
.s-dock .btn[hidden] { display: none; }
.s-dock .btn.on { background: var(--card-2); color: var(--fg); box-shadow: 0 4px 0 var(--rim); }
.pk-rec { width: 10px; height: 10px; border-radius: 50%; background: var(--good); animation: pk-rec 1.2s ease-in-out infinite; }
@keyframes pk-rec { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pk-rec { animation: none; } }
.head .pk-tune { margin-left: auto; }

/* ---- What I hear (3.8.0): the microphone, live ---- */
.pk-hearcard { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; color: inherit; font: inherit; }
.pk-hearcard > svg:first-child { width: 26px; height: 26px; flex: none; color: var(--gold-text); }
.pk-hearcard > span { flex: 1; min-width: 0; }
.pk-hearcard b { display: block; font: 700 17px var(--sans); color: var(--fg); }
.pk-hearcard .pf-line { display: block; margin: 2px 0 0; font-size: 14px; }
.pk-hearcard .chev { width: 16px; height: 16px; color: var(--muted); flex: none; }
.pk-lesson .pf-plate { margin: 0 0 12px; }
.ph-lane { display: block; width: 100%; height: 110px; border-radius: 12px; background: var(--recess); border: 1px solid var(--recess-edge); box-shadow: var(--recess-shadow); }
.ph-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 2px 14px; font-size: 12px; color: var(--muted); }
.ph-k { display: inline-block; width: 12px; height: 3px; margin-right: -6px; border-radius: 2px; vertical-align: middle; }
.ph-k.lvl { background: #ffc27a; }
.ph-k.thr { background: repeating-linear-gradient(90deg, rgba(255,120,90,.9) 0 3px, transparent 3px 5px); }
.ph-k.on { width: 8px; height: 8px; border-radius: 50%; background: #ffb24a; }
.ph-k.beat { width: 2px; height: 12px; background: rgba(255,255,255,.35); }
.ph-h { margin: 0 0 8px; }
.ph-chords { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ph-chords button { min-width: 44px; height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--bronze-line); background: none; font: 700 14px var(--sans); color: var(--fg-2); }
.ph-chords button.on { border-color: var(--gold-text); color: var(--gold-text); box-shadow: 0 0 10px rgba(255,190,110,.25); }
.ph-say { margin: 4px 0 0; }
.ph-row { display: flex; justify-content: center; gap: 8px; }
.pk-str { border: 0; background: none; padding: 2px 4px; border-radius: 8px; }
.pk-str.cur small { color: var(--recess-on); }
.pk-str.cur { box-shadow: inset 0 0 0 1px rgba(255,194,122,.45); }
#ph-beats { margin: 10px 0 2px; }

/* The Recording chip and sheet (3.16.0). The cover leads; the album's own color tints only the sheet's header. */
.stat.listen.rec { gap: 7px; }
.rc-art { width: 22px; height: 22px; border-radius: 11px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--card-2); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.rc-art img { width: 100%; height: 100%; object-fit: cover; }
.rc-art svg { width: 12px; height: 12px; }
.rc-lit { width: 6px; height: 6px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.panel.rs { padding: 0; overflow: hidden; }
.rs-head { --album: var(--accent); display: flex; align-items: center; gap: 14px; padding: 18px 16px 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--album) 34%, transparent), transparent 80%); }
.rs-art { width: 72px; height: 72px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--card-2); color: var(--accent-ink); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.rs-art img { width: 100%; height: 100%; object-fit: cover; }
.rs-art svg { width: 28px; height: 28px; }
.rs-txt { flex: 1; min-width: 0; }
.rs-t { font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--fg); }
.rs-a { font-size: 14px; color: var(--fg-2); margin-top: 2px; }
.rs-d { font-size: 12px; line-height: 1.35; color: var(--muted); margin-top: 6px; }
.rs-listen { flex: none; width: 46px; height: 46px; border-radius: 23px; border: 1px solid var(--rim); background: var(--card); color: var(--fg); display: grid; place-items: center; }
.rs-listen svg { width: 18px; height: 18px; }
.rs-row { margin: 0 16px; padding: 12px 0; border-top: 1px solid var(--rim); }
.rs-row:first-of-type, .rs-head + .rs-row { border-top: 0; }
.rs-l { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rs-l b { display: inline-flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg); }
.rs-feel .rs-l { flex-direction: column; align-items: flex-start; gap: 4px; }
.rs-look { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 13px; line-height: 1.35; color: var(--fg); }
.rs-look span { flex: 1; }
.rs-look .btn { flex: none; }
.stat.listen.rec { position: relative; }
.rc-look { position: absolute; left: 18px; top: 0; width: 8px; height: 8px; border-radius: 4px; background: #e0a43a; box-shadow: 0 0 0 2px var(--solid); }
.rs-reset { border: 0; background: none; padding: 0; font: 600 13px var(--sans); color: var(--accent-ink); }
.rs-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.rs-row.off .seg { opacity: .45; }
.rs-track { position: relative; height: 6px; margin: 4px 6px; border-radius: 3px; background: var(--card-2); }
.rs-track b { position: absolute; top: -2px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: var(--fg-2); opacity: .45; }
.rs-note a { color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
.rs-track i { position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 6px; background: var(--accent); box-shadow: 0 0 0 3px var(--solid); }
.rs-done { display: block; width: calc(100% - 32px); height: 48px; margin: 6px 16px 16px; font-size: 16px; border-radius: 14px; }
.lp-rec { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; vertical-align: -3px; border-radius: 8px; overflow: hidden; background: var(--card-2); box-shadow: 0 0 0 1px var(--accent-line); }
.lp-rec img { width: 100%; height: 100%; object-fit: cover; }
.lp-rec svg { width: 10px; height: 10px; color: var(--accent-ink); }

/* ---------- Practice mode and the neck's Learning list and Scales (3.21.0) ---------- */
.stat.pchip { gap: 6px; }
.stat.pchip svg { width: 13px; height: 13px; color: var(--accent-ink); }
.pc-lit { width: 6px; height: 6px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.looprow .lp-lbl { flex: none; font: 700 12px var(--sans); letter-spacing: .14em; color: var(--accent-ink); }
.looprow .lp-sec { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.looprow .lp-sec svg { width: 13px; height: 13px; flex: none; }
.looprow .sb { margin-left: auto; }
.pk-learn h2 { display: flex; justify-content: space-between; }
.pk-song { display: flex; align-items: center; width: 100%; border: 0; background: none; color: inherit; text-align: left; }
.pk-song .chev { width: 16px; height: 16px; color: var(--muted); flex: none; }
.pk-cover { flex: none; overflow: hidden; display: grid; place-items: center; }
.pk-cover img { width: 100%; height: 100%; object-fit: cover; }
.pk-tx { flex: 1; min-width: 0; display: block; }
.pk-t { display: block; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-s { display: block; }
.pk-meter { display: block; overflow: hidden; }
.pk-meter i { display: block; height: 100%; }
.pk-skills { margin: 24px 2px 0; }
.pk-skills-note { margin-top: 4px; }
.pk-scalebox { margin: 4px 0 10px; }
.pk-scale { width: 100%; height: auto; }
.pk-scale .fr { stroke: var(--hair); stroke-width: 1.5; }
.pk-scale .nut { stroke: var(--fg-2); stroke-width: 4; }
.pk-scale .st { stroke: var(--muted); stroke-width: 1.2; }
.pk-scale .fn { fill: var(--muted); font: 600 9px var(--sans); text-anchor: middle; }
.pk-scale .sn circle { fill: var(--card-2); stroke: var(--accent-line); stroke-width: 1.5; }
.pk-scale .sn text { fill: var(--fg-2); font: 700 10px var(--sans); text-anchor: middle; }
.pk-scale .sn.lit circle { fill: var(--accent); stroke: var(--accent); }
.pk-scale .sn.lit text { fill: #fff; }
.pk-scale .sn.cur circle { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--accent)); }
.pk-scale .sn.cur text { fill: var(--accent); }
.pk-notes { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 10px; }
.pk-notes i { width: 8px; height: 8px; border-radius: 4px; background: var(--card-2); }
.pk-notes i.cur { background: var(--accent-soft); box-shadow: 0 0 0 1.5px var(--accent); }
.pk-notes i.on { background: var(--accent); }

/* The cover header on the Listen sheet and Get the song (3.23.0): edge to edge at the top. */
.panel.card > .cover-head { margin: -16px -16px 12px; border-radius: 22px 22px 0 0; }
.pbody > .cover-head { margin: 0 -16px 12px; }


/* ==========================================================================
   Version 4 look (4.0.0)
   Three palettes, one style: flat colour with no outlines, chunky buttons that
   sit on a darker lip, a soft gloss stripe, Fredoka for titles and Nunito for
   text. Light is Festival Poster, Dark is Neon Midnight, Green is Green Room.
   The amp materials above (copper, plate, recess, chrome, lamps, tolex, glass)
   are redrawn here from the palette, so every screen follows without its own
   colours. Game colours: --streak (the flame), --fans (the ticket), --strings.
   ========================================================================== */
@font-face { font-family: "Fredoka"; src: url("vendor/fonts/fredoka.woff") format("woff"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("vendor/fonts/nunito.woff") format("woff"); font-weight: 400 800; font-display: swap; }
:root, :root[data-look="neon"] {
  color-scheme: dark;
  --bg: #1D1640; --bg-glow: rgba(255,255,255,0); --fg: #F4F0FF; --fg-2: #DCD6F2; --muted: #A9A2CF;
  --accent: #B8F34A; --accent-ink: #B8F34A; --accent-deep: #7FB61F; --on-accent: #1D1640; --accent-soft: rgba(184,243,74,.14); --accent-line: rgba(184,243,74,.5);
  --bad: #FF6B5B; --bad-line: rgba(255,107,91,.45);
  --card: #2C2360; --card-2: #342A6E; --rim: #3A2F70; --hair: #31286A; --rim-hi: rgba(255,255,255,.06);
  --bar: #251C52; --solid: #251C52; --scrim: rgba(8,5,26,.62); --head: #F4F0FF;
  --good: #B8F34A; --tune: #3DE0FF; --tn-lit: #FF4FA3; --good-soft: rgba(184,243,74,.14); --shadow: 0 8px 24px rgba(0,0,0,.35);
  --streak: #FF4FA3; --streak-deep: #C42C7A; --fans: #FFD84D; --fans-deep: #C9A600; --fans-text: #FFD84D; --strings: #3DE0FF; --strings-deep: #1FA8C4;
  --banner: #3DE0FF; --banner-deep: #1FA8C4; --on-banner: #1D1640; --banner-sub: #0E4F5E;
  --locked: #3A2F70; --locked-deep: #2A2156; --locked-ic: #6E64A6; --tabs-on: rgba(61,224,255,.14); --tabs-ring: #3DE0FF;
  --lv-body: #3A86FF; --lv-shade: #2C6FE0; --lv-hi: #6BA4FF; --lv-face: #B8F34A; --lv-face-sh: #8FCF2A; --lv-grille: #1D1640; --lv-slat: #3A2F70; --lv-pupil: #1D1640; --lv-cheek: #FF4FA3; --lv-lamp: #FF4FA3; --lv-tongue: #FF4FA3; --lv-shadow: #000;
}
:root[data-theme="light"], :root[data-look="festival"] {
  color-scheme: light;
  --bg: #EAF3FF; --bg-glow: rgba(255,255,255,0); --fg: #14213D; --fg-2: #2A3A63; --muted: #4A5672;
  --accent: #FF3D7F; --accent-ink: #C21B57; --accent-deep: #C91F5C; --on-accent: #14213D; --accent-soft: rgba(255,61,127,.12); --accent-line: rgba(255,61,127,.5);
  --bad: #C42037; --bad-line: rgba(214,40,57,.4);
  --card: #FFFFFF; --card-2: #F4F8FE; --rim: #C9DCF5; --hair: #D9E6F7; --rim-hi: rgba(255,255,255,.9);
  --bar: #FFFFFF; --solid: #FFFFFF; --scrim: rgba(20,33,61,.35); --head: #14213D;
  --good: #12936F; --tune: #12936F; --tn-lit: #FFD23F; --good-soft: rgba(18,147,111,.12); --shadow: 0 8px 24px rgba(20,33,61,.12);
  --streak: #E8336E; --streak-deep: #B01E50; --fans: #FFD23F; --fans-deep: #F2B705; --fans-text: #8A6A00; --strings: #3A86FF; --strings-deep: #2C6FE0;
  --banner: #2C6FE0; --banner-deep: #1F56B8; --on-banner: #FFFFFF; --banner-sub: #FFFFFF;
  --locked: #D9E6F7; --locked-deep: #B9CCE6; --locked-ic: #8FA4C4; --tabs-on: #D6E7FF; --tabs-ring: #3A86FF;
  --lv-body: #3A86FF; --lv-shade: #2C6FE0; --lv-hi: #6BA4FF; --lv-face: #FFD23F; --lv-face-sh: #F2B705; --lv-grille: #14213D; --lv-slat: #2A3A63; --lv-pupil: #14213D; --lv-cheek: #FF3D7F; --lv-lamp: #FF3D7F; --lv-tongue: #FF3D7F; --lv-shadow: #14213D;
}
:root[data-look="green"] {
  color-scheme: light;
  --bg: #E6EFE7; --fg: #1B2B27; --fg-2: #2E4640; --muted: #4E615B;
  --accent: #FF5A4E; --accent-ink: #B03228; --accent-deep: #C93A30; --on-accent: #1B2B27; --accent-soft: rgba(255,90,78,.12); --accent-line: rgba(255,90,78,.5);
  --bad: #B83227; --bad-line: rgba(184,50,39,.4);
  --card: #FAFCF8; --card-2: #F1F6F0; --rim: #C6D6C8; --hair: #D5E2D6; --rim-hi: rgba(255,255,255,.9);
  --bar: #FAFCF8; --solid: #FAFCF8; --scrim: rgba(27,43,39,.35); --head: #1B2B27;
  --good: #0F8B8D; --tune: #0F8B8D; --tn-lit: #FFD23F; --good-soft: rgba(15,139,141,.12); --shadow: 0 8px 24px rgba(27,43,39,.12);
  --streak: #F2B705; --streak-deep: #B98C00; --fans: #0F8B8D; --fans-deep: #0B6F71; --fans-text: #0F7A7C; --strings: #7A2E8E; --strings-deep: #5C1F6C;
  --banner: #0F8B8D; --banner-deep: #0B6F71; --on-banner: #FFFFFF; --banner-sub: #CDEBEB;
  --locked: #CFDDD1; --locked-deep: #B3C6B6; --locked-ic: #8AA190; --tabs-on: #D3E6D6; --tabs-ring: #0F8B8D;
  --lv-body: #3A86FF; --lv-shade: #2C6FE0; --lv-hi: #6BA4FF; --lv-face: #F2B705; --lv-face-sh: #D29C00; --lv-grille: #1B2B27; --lv-slat: #2E4640; --lv-pupil: #1B2B27; --lv-cheek: #FF5A4E; --lv-lamp: #FF5A4E; --lv-tongue: #FF5A4E; --lv-shadow: #1B2B27;
}
:root[data-look="headliner"] {
  color-scheme: dark;
  --bg: #16171B; --bg-glow: rgba(255,255,255,0); --fg: #F3F1EE; --fg-2: #D2D5DA; --muted: #A3A9B2;
  --accent: #8A47F5; --accent-ink: #B98CFF; --accent-deep: #5E2BBE; --on-accent: #FFFFFF; --accent-soft: rgba(155,92,255,.18); --accent-line: rgba(155,92,255,.5);
  --bad: #FF6B5B; --bad-line: rgba(255,107,91,.45);
  --card: #24272D; --card-2: #2C3037; --rim: #34383F; --hair: #2A2D33; --rim-hi: rgba(255,255,255,.06);
  --bar: #1F2126; --solid: #1F2126; --scrim: rgba(5,5,8,.62); --head: #F3F1EE;
  --good: #5BE38F; --tune: #5BE38F; --tn-lit: #FF7A1A; --good-soft: rgba(91,227,143,.14); --shadow: 0 8px 24px rgba(0,0,0,.45);
  --streak: #FF7A1A; --streak-deep: #B34E00; --fans: #F5C542; --fans-deep: #A87F0C; --fans-text: #F5C542; --strings: #F5C542; --strings-deep: #A87F0C;
  --banner: #F5C542; --banner-deep: #A87F0C; --on-banner: #3D2A00; --banner-sub: #6B4E00;
  --locked: #2C3037; --locked-deep: #0E0F12; --locked-ic: #5E646D; --tabs-on: rgba(155,92,255,.2); --tabs-ring: #9B5CFF;
  --lv-body: #3A3E46; --lv-shade: #2C3037; --lv-hi: #50555E; --lv-face: #F5C542; --lv-face-sh: #D4A62A; --lv-grille: #16171B; --lv-slat: #34383F; --lv-pupil: #16171B; --lv-cheek: #B98CFF; --lv-lamp: #FF7A1A; --lv-tongue: #FF7A1A; --lv-shadow: #000;
}
/* the amp materials, redrawn from the palette */
:root, :root[data-theme="light"], :root[data-look] {
  --sans: "Nunito", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif: "Fredoka", "Nunito", system-ui, sans-serif;
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --r: 14px; --r-bar: 16px;
  --bronze: var(--muted); --bronze-line: var(--rim); --gold-text: var(--muted);
  --plate: var(--card); --plate-edge: var(--rim); --plate-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32);
  --recess: var(--card-2); --recess-edge: var(--rim); --recess-shadow: none; --recess-fg: var(--fg); --recess-dim: var(--muted); --recess-on: var(--accent);
  --copper: var(--accent); --copper-fg: var(--on-accent); --copper-hi: var(--copper-hi), var(--copper-glow); --copper-glow: var(--copper-hi), var(--copper-glow);
  --chrome: var(--card); --chrome-edge: var(--rim); --chrome-fg: var(--fg); --chrome-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32);
  --lamp-off: var(--rim); --lamp-warm: var(--accent); --lamp-on: var(--accent); --lamp-ring: 0 0 0 0 transparent; --lamp-glow: 0 0 0 3px var(--accent-soft);
  --tolex: none; --tolex-card: var(--card); --tolex-inset: none;
  --glass-tint: var(--bar); --glass-sheen: none; --glass-rim: var(--rim);
  --tabs: calc(66px + var(--safe-b));
}
body { background: var(--bg); font-family: var(--sans); }
:root[data-theme] .title, :root[data-theme] .title.script, :root[data-theme] .tm-page .tm-top .title.script { font-family: var(--display); font-weight: 700; letter-spacing: -.005em; color: var(--fg); text-shadow: none; }
:root[data-theme] .title.script { font-size: 34px; }
h2, .label, .sheet .sec { font-family: var(--display); }
/* bars: solid, with a lip instead of glass */
.cmd, .float { background: var(--bar); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.list.glass, .set-group, .set-group.glass, .pf-card { border-radius: 18px; }
/* buttons: chunky, on a darker lip, a gloss stripe on the main one */
.btn.primary { position: relative; }
.btn.primary, .ce-save, body.fold .fp #play { letter-spacing: .02em; }
.btn.primary::before { content: ""; position: absolute; left: 12px; right: 12px; top: 5px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.35); pointer-events: none; }
.btn.sm.primary::before { top: 3px; height: 3px; left: 8px; right: 8px; }
.add .add-note { filter: none; }
.add .add-note g { fill: var(--on-accent); stroke: none; }
.add .add-bdg { background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg); box-shadow: 0 0 0 2px var(--accent); }
.toast { background: var(--fg); color: var(--bg); font-family: var(--display); font-weight: 600; }

/* Louie's colours */
.louie .lv-b { fill: var(--lv-body); } .louie .lv-s { fill: var(--lv-shade); } .louie .lv-ss { stroke: var(--lv-shade); }
.louie .lv-hi { fill: var(--lv-hi); opacity: .9; } .louie .lv-f { fill: var(--lv-face); } .louie .lv-fs { fill: var(--lv-face-sh); }
.louie .lv-l { stroke: var(--lv-shade); } .louie .lv-c { fill: var(--lv-cheek); opacity: .6; } .louie .lv-p { fill: var(--lv-pupil); } .louie .lv-ps { stroke: var(--lv-pupil); }
.louie .lv-g { fill: var(--lv-grille); } .louie .lv-gs { fill: var(--lv-slat); } .louie .lv-m { fill: var(--lv-grille); } .louie .lv-ms { stroke: var(--lv-grille); }
/* 4.86.0: knobs and plate in chrome, and chrome corner bumpers with a highlight, in every look */
.louie .lv-fl { stroke: var(--lv-face-sh); } .louie .lv-cuff { fill: var(--lv-face-sh); } .louie .lv-k { fill: #DDE2EA; } .louie .lv-cn { stroke: #B9C0CB; } .louie .lv-cnh { stroke: #F2F4F7; }
.louie .lv-t { fill: var(--lv-tongue); } .louie .lv-lamp { fill: var(--lv-lamp); } .louie .lv-shadow { fill: var(--lv-shadow); opacity: .18; } .louie .lv-z { fill: var(--muted); }

/* The Library drawer on the Road: a flat card in the palette (was tolex) */
.rd-drawer { background-image: none; background-color: var(--card); border: 1px solid var(--bronze-line); border-bottom: 0; box-shadow: 0 -6px 0 var(--rim), 0 -14px 30px rgba(0,0,0,.12); }
.rd-drawer::after { background-color: var(--card); border-color: var(--rim); }

/* ---- The stat bar ---- */
.hud { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 48px; }
.hud button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none; font: 700 19px var(--display); color: var(--fg); }
.hud svg { flex: none; }
.hud .h-streak { color: var(--streak); }
.hud .h-streak.off { color: var(--muted); }
.hud .h-fans { color: var(--fans-text); }
.h-vb { fill: var(--accent); } .h-vbd { fill: var(--accent-deep); }
.h-fl1 { fill: var(--fans); } .h-fl2 { fill: var(--streak); } .h-streak.off .h-fl1, .h-streak.off .h-fl2 { fill: var(--locked-ic); }
.h-tk { fill: var(--fans); } .h-tkd { fill: var(--fans-deep); }
/* 4.70.0: tips */
.h-c { fill: #3DDBA0; } .h-cd { fill: #22A877; }
.hud .h-tips { color: var(--fg); }
.gc-tile.tips { background: #3DDBA0; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }

/* ---- The tab bar (4.0.0): Road, Tour, Charts, Band, Rehearse, More ---- */
#tabs { display: none; }
body.tabbed #tabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--tabs); box-sizing: border-box; padding: 6px max(10px, var(--safe-l)) var(--safe-b) max(10px, var(--safe-r)); background: var(--bg); border-top: 2px solid var(--rim); justify-content: space-around; align-items: center; }
#tabs a { position: relative; width: 54px; height: 50px; border-radius: 14px; display: grid; place-items: center; border: 2px solid transparent; -webkit-tap-highlight-color: transparent; }
#tabs a[aria-current="page"] { border-color: var(--tabs-ring); background: var(--tabs-on); }
#tabs .dotmark { position: absolute; top: 4px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 2px var(--bg); }
.tb-a { fill: var(--accent); } .tb-ad { fill: var(--accent-deep); } .tb-s { fill: var(--streak); } .tb-sd { fill: var(--streak-deep); }
.tb-f { fill: var(--fans); } .tb-fd { fill: var(--fans-deep); } .tb-b { fill: var(--strings); } .tb-bd { fill: var(--strings-deep); }
.tb-ink { fill: var(--fg); }  .tb-w { fill: #fff; } .tb-k { fill: #14213D; } .tb-kk { fill: #000; }
body.tabbed .app { padding-bottom: calc(var(--tabs) + 24px); }
body.tabbed .s-dock { bottom: var(--tabs); }

/* ---- More: a sheet of the other places ---- */
.more-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 6px; }
.more-list button { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; min-height: 60px; padding: 10px 14px; border: 1px solid var(--bronze-line); border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); font: 700 17px var(--display); text-align: left; }
.more-list button small { display: block; font: 600 13px var(--sans); color: var(--muted); margin-top: 1px; }
.more-ic { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.more-ic svg { width: 22px; height: 22px; }

/* ---- Coming soon (Tour, Charts, Band) ---- */

/* ---- The Road (4.0.0): home ---- */
body.is-home .app { padding-top: calc(16px + var(--safe-t)); /* 4.20.0: clear of the phone's frosted edge under the clock */ padding-bottom: calc(var(--peek) - var(--tabs) + 6px); gap: 8px; }
body.is-home .dock { bottom: calc(14px + var(--tabs)); }

.rd-top { flex: none; margin: 0 -4px; }
.rd-banner { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--copper); color: var(--on-banner); border-radius: 18px; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); padding: 12px 14px 12px 16px; }
.rd-banner small { display: block; font: 800 12px var(--sans); letter-spacing: .08em; color: var(--banner-sub); }
.rd-banner b { display: block; font: 700 21px var(--display); margin-top: 1px; }
.rd-book { flex: none; width: 46px; height: 46px; border-radius: 14px; border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.16); color: var(--on-banner); display: grid; place-items: center; }
.rd-book svg { width: 22px; height: 22px; }
.rd-chip { flex: none; align-self: center; margin-top: 4px; padding: 5px 14px; border-radius: 999px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); font: 700 14px var(--sans); color: var(--fg-2); text-align: center; }
.rd-chip b { color: var(--accent-deep); }
:root:is([data-look="neon"], [data-look="headliner"]) .rd-chip b { color: var(--accent-ink); }

.rd-path { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; position: relative; margin: 0 -16px; padding: 6px 16px 30px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.rd-legmark { width: 100%; display: flex; align-items: center; gap: 10px; color: var(--muted); font: 700 14px var(--display); margin: 6px 0 -4px; }
.rd-legmark::before, .rd-legmark::after { content: ""; flex: 1; height: 2px; background: var(--rim); border-radius: 1px; }
.rd-legmark:first-of-type { display: none; }
.rd-stop { position: relative; transform: translateX(var(--x)); display: flex; flex-direction: column; align-items: center; }
.rd-node { position: relative; width: 74px; height: 66px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--copper); box-shadow: var(--copper-hi), var(--copper-glow); overflow: hidden; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.rd-node::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(125deg, transparent 0 34%, rgba(255,255,255,.28) 34% 46%, transparent 46% 58%, rgba(255,255,255,.18) 58% 66%, transparent 66%); pointer-events: none; }
.rd-node:active { transform: translateY(5px); box-shadow: var(--copper-hi), var(--copper-glow); }
.rd-node svg { position: relative; width: 32px; height: 32px; }
.rd-node.big { width: 88px; height: 78px; }
.rd-node.big svg { width: 38px; height: 38px; }
.rd-node.now { background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32), 0 0 0 9px color-mix(in srgb, var(--streak) 28%, transparent); overflow: visible; }
.rd-node.now::after { overflow: hidden; }
.rd-node.open { background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.rd-node.locked { background: var(--locked); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.rd-node.locked::after { opacity: .5; }
.rd-node.box.done { background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.rd-lk { fill: var(--locked-ic); } .rd-lks { stroke: var(--locked-ic); }
.rd-pop { position: relative; z-index: 2; margin-top: 18px; width: 236px; box-sizing: border-box; padding: 14px; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); text-align: left; transform: translateX(calc(var(--x) * -1)); }
.rd-pop::before { content: ""; position: absolute; top: -9px; left: calc(50% + var(--x) - 8px); width: 14px; height: 14px; background: inherit; border-left: 2px solid var(--rim); border-top: 2px solid var(--rim); transform: rotate(45deg); }
.rd-pop.now { background: var(--copper); border-color: var(--streak); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .rd-pop.now { color: #14213D; }
.rd-pop b { display: block; font: 700 18px var(--display); }
.rd-pop p { margin: 2px 0 10px; font: 700 14px var(--sans); color: inherit; opacity: .85; }
.rd-pop.now p { opacity: 1; }
.rd-pop.locked p, .rd-pop.done.box p { margin-bottom: 0; }
.rd-pop .rd-start { width: 100%; height: 48px; }
.rd-pop.now .rd-start { background: #fff; color: var(--streak-deep); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 45%, #fff); }
.rd-pop.now .rd-start::before { display: none; }
.rd-say { align-self: stretch; display: flex; align-items: flex-end; gap: 6px; margin-bottom: -6px; }
.rd-say .louie { flex: none; width: 104px; height: auto; margin: 0 -8px -4px 0; }
.rd-sayt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 10px; }
.rd-say .rd-bubble { margin: 0; padding: 10px 12px; border-radius: 16px 16px 4px 16px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); font: 700 15px var(--sans); color: var(--fg); line-height: 1.35; box-shadow: none; }
.rd-tonight { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--bronze-line); background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); font: 700 15px var(--display); }
.rd-tonight span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-tonight svg { width: 16px; height: 16px; flex: none; color: var(--accent-deep); fill: currentColor; }
.rd-coming { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 2px dashed var(--rim); color: var(--muted); font: 700 14px var(--sans); }
.rd-coming svg { width: 18px; height: 18px; flex: none; }

.song-title { font-family: var(--display); font-weight: 700; }

/* ==========================================================================
   Version 4 components (4.0.1)
   One definition for each component, used everywhere. Every rule starts with
   :root[data-look] so it outranks the older per-screen styles above.
     primary button   go colour on a darker lip, gloss stripe, Fredoka
     button           card on a rim-coloured lip
     chip             small pill: card, 2px rim, small lip; .on/.learning in go colour
     icon button      round (.ib) or rounded square (.sb): card, 2px rim, small lip
     segmented        a card track; the chosen part in go colour
     toggle           rim when off, go colour when on, white knob
     sheet            card, 2px rim, rounded top, a grab handle, Fredoka title
     readout          a card-2 well with a Fredoka number in go colour (dials, stats)
   ========================================================================== */
/* ---- buttons ---- */
:root[data-look] .btn { border: 1px solid var(--bronze-line); background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); font-family: var(--display); font-weight: 600; border-radius: 16px; }
:root[data-look] .btn.primary, :root[data-look] .ce-save, :root[data-look] body.fold .fp #play, :root[data-look] .nx .nx-ch span.new { background: var(--copper); color: var(--on-accent); border: 0; box-shadow: var(--copper-hi), var(--copper-glow); font-family: var(--display); font-weight: 700; }
:root[data-look] .btn.bad, :root[data-look] .btn.danger, :root[data-look] button.danger { color: var(--bad); border-color: var(--bad-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .btn.primary:active:not(:disabled) { box-shadow: var(--copper-hi), var(--copper-glow); }
:root[data-look] .gs-show, :root[data-look] .ce-add, :root[data-look] .btn.sm { height: 34px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--bronze-line); background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); font: 600 13.5px var(--display); }
:root[data-look] .btn.sm.primary { border: 0; background: var(--copper); color: var(--on-accent); box-shadow: var(--copper-hi), var(--copper-glow); }
:root[data-look] .linkish { color: var(--accent-deep); font-weight: 700; }
:root:is([data-look="neon"], [data-look="headliner"]) .linkish { color: var(--accent-ink); }
/* the round Play in the song bar and the add button: go colour on its lip */
:root[data-look] #play, :root[data-look] .add, :root[data-look] .add.tool { background: var(--copper); color: var(--on-accent); border: 0; box-shadow: var(--copper-hi), var(--copper-glow); }
:root[data-look] #play svg { fill: var(--on-accent); color: var(--on-accent); }

/* ---- chips ---- */
:root[data-look] .chip, :root[data-look] .stat, :root[data-look] .keybtn, :root[data-look] .ed-chip, :root[data-look] .pf-first, :root[data-look] .looprow .chip {
  border: 1px solid var(--bronze-line); background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg-2); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); font-family: var(--display); font-weight: 600; border-radius: 999px; }
:root[data-look] .stat, :root[data-look] .keybtn { height: 30px; padding: 0 12px; font-size: 13.5px; }
:root[data-look] .ed-chip { height: 36px; }
:root[data-look] .chip.on, :root[data-look] #chips .chip.on, :root[data-look] .stat.learning, :root[data-look] .stat.on, :root[data-look] .stat.rec.on, :root[data-look] .pchip.on, :root[data-look] .keybtn, :root[data-look] .pf-first.big {
  border-color: var(--accent); background: var(--accent-soft); color: var(--fg); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .keybtn b, :root[data-look] .ed-chip b, :root[data-look] .stat b { color: var(--fg); }
:root[data-look] .stat.got { border-color: var(--good); background: var(--good-soft); color: var(--fg); box-shadow: 0 2px 0 var(--good-soft); }
:root[data-look] .stat svg, :root[data-look] .keybtn .kchev { color: var(--accent-deep); }
:root:is([data-look="neon"], [data-look="headliner"]) .stat svg, :root:is([data-look="neon"], [data-look="headliner"]) .keybtn .kchev { color: var(--accent-ink); }
:root[data-look] #chips .chip::before, :root[data-look] .chip::before { background: var(--rim); box-shadow: none; }
:root[data-look] #chips .chip.on::before { background: var(--copper); box-shadow: none; }

/* ---- icon buttons ---- */
:root[data-look] .ib.glass, :root[data-look] .sb, :root[data-look] .tm-top .ib, :root[data-look] .tm-ctl .ib {
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-look] .ib.glass { width: 40px; height: 40px; }
:root[data-look] .sb { width: 36px; height: 36px; border-radius: 12px; }
:root[data-look] .sb.on, :root[data-look] .ib.on { color: var(--fg); border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .sb.fav.on svg, :root[data-look] .ib.on svg { fill: var(--accent); color: var(--accent-ink); }
:root[data-look] .ib .dotmark { background: var(--copper); box-shadow: 0 0 0 2px var(--card); }
:root[data-look] .ib .dotmark::before, :root[data-look] .ib .dotmark::after { border-color: var(--streak); }

/* ---- segmented controls ---- */
:root[data-look] .seg, :root[data-look] .seg.skmode, :root[data-look] .cebar .ce-plate .seg { background: var(--card-2); border: 1px solid var(--bronze-line); border-radius: 14px; padding: 3px; box-shadow: none; }
:root[data-look] .seg button, :root[data-look] .seg.skmode button, :root[data-look] .cebar .ce-plate .seg button { color: var(--fg-2); font-family: var(--display); font-weight: 600; border-radius: 10px; }
:root[data-look] .seg button.on, :root[data-look] .seg.skmode button.on { background: var(--copper); color: var(--on-accent); box-shadow: var(--copper-hi), var(--copper-glow); }
:root[data-look] .seg.slide button.on, :root[data-look] .cebar .ce-plate .seg button.on { background: none; color: var(--on-accent); box-shadow: none; }
:root[data-look] .seg.slide::before, :root[data-look] .cebar .ce-plate .seg.slide::before { top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--copper); border-radius: 10px; box-shadow: var(--copper-hi), var(--copper-glow); }
:root[data-look] .seg.mini { border-width: 2px; }
:root[data-look] .ce-plate, :root[data-look] .nx #nx-level, :root[data-look] .gs #gs-level { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .ce-rec, :root[data-look] .nx #nx-level button, :root[data-look] .gs #gs-level button { background: var(--card-2); border: 1px solid var(--bronze-line); color: var(--fg); box-shadow: none; font-family: var(--display); font-weight: 600; }
:root[data-look] .nx #nx-level button.on, :root[data-look] .gs #gs-level button.on { background: var(--accent-soft); border-color: var(--accent); }

/* ---- toggles ---- */
:root[data-look] .toggle { background: var(--rim); box-shadow: none; }
:root[data-look] .toggle::after { background: #fff; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .toggle.on { background: var(--copper); }
:root[data-look] input[type="range"] { accent-color: var(--accent); }

/* ---- sheets, menus, dialogs, tips ---- */
:root[data-look] .scrim, :root[data-look] .tm-scrim { background: var(--scrim); }
:root[data-look] .panel, :root[data-look] .panel.card, :root[data-look] .menu, :root[data-look] .decard, :root[data-look] .tm-sheet {
  background: var(--solid); background-image: none; border: 1px solid var(--bronze-line); color: var(--fg); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-look] .panel.card { border-radius: 24px; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32), 0 18px 40px rgba(0,0,0,.18); }
:root[data-look] .panel.full, :root[data-look] .tm-sheet { border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -6px 0 var(--rim), 0 -14px 34px rgba(0,0,0,.14); }
:root[data-look] .menu { border-radius: 20px; padding: 8px; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32), 0 14px 34px rgba(0,0,0,.18); }
:root[data-look] .menu button, :root[data-look] .menu .mi { border-radius: 12px; font-family: var(--sans); font-weight: 700; color: var(--fg); }
:root[data-look] .menu button:active { background: var(--card-2); }
:root[data-look] .grab, :root[data-look] .rd-grab { width: 40px; height: 6px; border-radius: 3px; background: var(--rim); }
:root[data-look] .ph h2, :root[data-look] .nx .ph h2, :root[data-look] .gs .ph h2, :root[data-look] .pc-head span, :root[data-look] .tm-sheet-t, :root[data-look] .tm-sh-t b {
  font: 700 19px var(--display); letter-spacing: 0; text-transform: none; color: var(--fg); }
:root[data-look] .tm-sheet-t { font-size: 24px; }
:root[data-look] .pfoot { border-top: 2px solid var(--hair); }
:root[data-look] .coach { background: var(--fg); color: var(--bg); border: 0; border-radius: 16px; font-weight: 700; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
/* 4.73.1: the tip's list and second line are on the tip's own colours (they were the page's, faint on the light tip) */
:root[data-look] .coach ul, :root[data-look] .coach span { color: var(--bg); opacity: .85; font-weight: 600; }
:root[data-look] .coach li::marker { color: var(--bg); }
:root[data-look] .toast { border-radius: 16px; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
/* the result cards in Play next and Get the song */
:root[data-look] .nx .nx-row, :root[data-look] .gs .gs-rows.glass, :root[data-look] .gs-rows { background: linear-gradient(180deg, var(--card-2), var(--card)); background-image: none; border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); border-radius: 18px; }
:root[data-look] .gs-row { border-bottom: 2px solid var(--hair); }
/* section labels inside cards and sheets */
:root[data-look] .label, :root[data-look] .sheet .sec, :root[data-look] .strip-h, :root[data-look] .pf-card h2, :root[data-look] .tm-lab, :root[data-look] .chg-lab { font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---- text fields ---- */
:root[data-look] .cmd, :root[data-look] .ed-title, :root[data-look] .ask input, :root[data-look] .ask textarea, :root[data-look] .panel input[type="text"], :root[data-look] .panel input[type="search"], :root[data-look] .panel textarea {
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); border-radius: 16px; color: var(--fg); }
:root[data-look] input:focus-visible, :root[data-look] textarea:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 0; }

/* ---- cards and readouts ---- */
:root[data-look] .pf-card, :root[data-look] .list.glass, :root[data-look] .set-group, :root[data-look] .upnext, :root[data-look] .nextup, :root[data-look] .backpaste, :root[data-look] .loopbanner {
  background: linear-gradient(180deg, var(--card-2), var(--card)); background-image: none; border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-look] .pf-plate { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .pf-read, :root[data-look] .pk-strings, :root[data-look] .pk-now, :root[data-look] .tm-board, :root[data-look] .pk-board { background: var(--card-2); border: 1px solid var(--bronze-line); box-shadow: none; }
:root[data-look] .pf-read b { font-family: var(--display); color: var(--accent-deep); text-shadow: none; }
:root:is([data-look="neon"], [data-look="headliner"]) .pf-read b { color: var(--accent-ink); }
:root[data-look] .pf-read span, :root[data-look] .tm-bd { color: var(--muted); }
:root[data-look] :root[data-look] .gs-lamp.on, :root[data-look] .nx-jewel { background: var(--copper); box-shadow: none; }

/* ---- the neck's fretboard ---- */
:root[data-look] .pk-fret { border-right: 3px solid var(--rim); color: var(--muted); font-family: var(--display); }
:root[data-look] .pk-fret b { font-family: var(--display); }
:root[data-look] .pk-fret.done { color: var(--accent-deep); }
:root:is([data-look="neon"], [data-look="headliner"]) .pk-fret.done { color: var(--accent-ink); }
:root[data-look] .pk-fret.now { color: var(--on-accent); background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); border-radius: 12px; border-right-color: transparent; }
:root[data-look] .pk-inlay { border: 1px solid var(--bronze-line); }
:root[data-look] .pk-inlay.done, :root[data-look] .pk-inlay.on { background: var(--copper); border-color: var(--fans-deep); }

/* ---- dials (speed, key, sets): a card face, ink ticks, a go-colour needle and a Fredoka readout ---- */
:root[data-look] .dial-rim { fill: var(--card-2); stroke: var(--rim); stroke-opacity: 1; stroke-width: 2; }
:root[data-look] .dial-bg { fill: var(--card); fill-opacity: 1; stroke: var(--rim); stroke-width: 2; }
:root[data-look] .dial-ticks line, :root[data-look] .dial-ticks line.lit, :root[data-look] .dial-ticks line.cur { stroke: var(--fg); stroke-opacity: .55; }
:root[data-look] .dial-ticks line.mj { stroke-opacity: .9; }
:root[data-look] .dial-ticks line.hot { stroke: var(--bad); }
:root[data-look] .dial-needle { stroke: var(--accent); stroke-width: 4; }
:root[data-look] .dial-pivot { fill: var(--accent-deep); stroke: none; }
:root[data-look] .dial-win { fill: var(--card); stroke: var(--rim); stroke-width: 2; stroke-opacity: 1; }
:root[data-look] .dial-big { fill: var(--fg); font-family: var(--display); font-weight: 700; }
:root[data-look] .dial-small { fill: var(--muted); font-family: var(--sans); font-weight: 800; }
:root[data-look] .dial-end, :root[data-look] .dial-labels text, :root[data-look] .dial-labels text.sc { fill: var(--muted); font-family: var(--sans); }
:root[data-look] .dial-labels text.cur { fill: var(--fg); }

/* ---- the editor's pad: the palette's card, faint rules and a go-colour margin ---- */
:root[data-look] .ed-tx { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); border-radius: 18px; }
:root[data-look] .ed-hl { color: var(--fg); background-image: linear-gradient(90deg, transparent 27px, var(--accent-line) 27px 29px, transparent 29px),
  repeating-linear-gradient(180deg, transparent 0 calc(1.55em - 1px), var(--hair) calc(1.55em - 1px) 1.55em); }
:root[data-look] .ed-hl .hc, :root[data-look] .ed-hl div.hc { color: var(--accent-deep); }
:root:is([data-look="neon"], [data-look="headliner"]) .ed-hl .hc, :root:is([data-look="neon"], [data-look="headliner"]) .ed-hl div.hc { color: var(--accent-ink); }
:root[data-look] .ed-tx textarea { caret-color: var(--accent-deep); }
:root[data-look] .ed-tx textarea::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); }
:root[data-look] .ed-tile, :root[data-look] .ed-tl { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); border-radius: 18px; }
:root[data-look] .ed-strip { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); }

/* ---- tuner ---- */
:root[data-look] .tuner2 { background: var(--bg); background-image: none; }

/* ---- the Tour Map: the palette's ground, cards and go colour (the map draws its turf from these too) ---- */
:root[data-look] .tm-page, :root[data-look] .tm-map, :root[data-look] .tm-map.leaflet-container, :root[data-look] .tm-map.plain { background: var(--bg); background-image: none; }
:root[data-theme="light"] .tm-map .tm-tiles { filter: saturate(.7) brightness(1.02); }
:root[data-look] .tm-top { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 70%, transparent) 60%, transparent); }
:root[data-look] .tm-page .tm-top .title.script { color: var(--fg); text-shadow: none; }
:root[data-look] .tm-top .ib, :root[data-look] .tm-ctl .ib { color: var(--fg); }
:root[data-look] .tm-flag { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); color: var(--fg); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .tm-badge { background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .tm-pin.badge { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); color: var(--fg); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); font-family: var(--display); }
:root[data-look] .tm-pin.badge svg { stroke: var(--fg); }
:root[data-look] .tm-lamp { background: var(--copper); box-shadow: 0 0 0 5px color-mix(in srgb, var(--streak) 30%, transparent); }
:root[data-look] .tm-push { background: color-mix(in srgb, var(--bad) 12%, var(--card)); border: 2px solid var(--bad-line); color: var(--fg); }
:root[data-look] .tm-map .leaflet-control-attribution { background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--muted); }
:root[data-look] .tm-map .leaflet-control-attribution a { color: var(--muted); }
/* editing: the title and the heart on one line, the artist and details on their own line below (fixes a squeezed title) */

:root[data-look] .ed-artist, :root[data-look] .ed-sum { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); border-radius: 16px; color: var(--fg); }
:root[data-look] .dial-big { filter: none; }
:root[data-look] text.dk { fill: var(--on-accent); font-family: var(--display); font-weight: 700; }

/* ---- 4.0.1: rows, lists, shelves and the Learning list, sized and set like the mockup ---- */
/* song rows: Fredoka titles, a bold small line, the key in a small pill, 2px dividers */
:root[data-look] .row { min-height: 66px; height: auto; padding: 10px 16px; border-bottom: 2px solid var(--hair); gap: 12px; }
:root[data-look] .row .t { font: 600 17px/1.25 var(--display); color: var(--fg); }
:root[data-look] .row .a { font: 700 13.5px var(--sans); color: var(--muted); margin-top: 3px; }
:root[data-look] .row .a .st.learning { color: var(--accent-deep); }
:root:is([data-look="neon"], [data-look="headliner"]) .row .a .st.learning { color: var(--accent-ink); }
:root[data-look] .row .k { min-width: 0; padding: 3px 9px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--bronze-line); font: 700 13px var(--display); color: var(--fg-2); text-align: center; }
:root[data-look] .row .k:empty { display: none; }
:root[data-look] .row:active { background: var(--card-2); }
:root[data-look] .row-cv { width: 46px; height: 46px; border-radius: 12px; }
/* section heads: the same small label everywhere, links in Fredoka */
:root[data-look] .shelf-h, :root[data-look] .pk-skills { font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
:root[data-look] .shelf-h .sh-all, :root[data-look] .sortby { font: 700 15px var(--display); letter-spacing: 0; text-transform: none; color: var(--accent-deep); }
:root[data-look] .sortby { color: var(--fg); }
:root:is([data-look="neon"], [data-look="headliner"]) .shelf-h .sh-all { color: var(--accent-ink); }
/* set shelf: tiles with a lip instead of a shadow */
:root[data-look] .sh-it { width: 132px; }
:root[data-look] .sh-cv { width: 132px; height: 132px; border-radius: 20px; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 18%, transparent); }
:root[data-look] .sh-new .sh-cv { border: 2px dashed var(--rim); background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: none; color: var(--accent-deep); }
:root[data-look] .sh-t { font: 600 15px var(--display); margin: 9px 2px 0; }
:root[data-look] .sh-s { font: 700 12.5px var(--sans); color: var(--muted); }
:root[data-look] .cover { background: var(--card-2); }
:root[data-look] .cv-t { font-family: var(--display); font-weight: 700; text-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .cv-k { font-family: var(--sans); font-weight: 800; letter-spacing: .08em; color: rgba(255,255,255,.85); }
:root[data-look] .sh-big .sh-cover, :root[data-look] .sh-cover { box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 18%, transparent); border-radius: 24px; }
:root[data-look] .upnext { background: linear-gradient(180deg, var(--card-2), var(--card)); border-radius: 20px; }
:root[data-look] .un-cv, :root[data-look] .pk-cv { box-shadow: none; border-radius: 16px; }
:root[data-look] .un-t .lab { font: 800 12px var(--sans); letter-spacing: .08em; color: var(--muted); }
:root[data-look] .un-t b { font: 700 21px var(--display); }
:root[data-look] .un-t span { font-weight: 700; }
:root[data-look] .un-play { box-shadow: var(--copper-hi), var(--copper-glow); }
/* the neck's Learning list */
:root[data-look] .pk-learn h2, :root[data-look] .pk-count { font: 800 12px var(--sans); letter-spacing: .08em; color: var(--muted); }
:root[data-look] .pk-count { text-transform: uppercase; }
:root[data-look] .pk-song { padding: 12px 0; border-top: 2px solid var(--hair); gap: 14px; }
:root[data-look] .pk-cover { width: 52px; height: 52px; border-radius: 14px; box-shadow: none; border: 1px solid var(--bronze-line); background: var(--accent-soft); color: var(--accent-deep); font: 700 22px var(--display); }
:root[data-look] .pk-t { font: 600 17px var(--display); }
:root[data-look] .pk-s { font: 700 13.5px var(--sans); color: var(--muted); margin-top: 3px; }
:root[data-look] .pk-s b { color: var(--accent-deep); font-weight: 800; }
:root:is([data-look="neon"], [data-look="headliner"]) .pk-s b { color: var(--accent-ink); }
:root[data-look] .pk-meter { position: relative; height: 12px; border-radius: 6px; background: var(--card-2); margin-top: 8px; }
:root[data-look] .pk-meter i { position: relative; border-radius: 6px; background: var(--copper); box-shadow: inset 0 -3px 0 var(--fans-deep); }
:root[data-look] .pk-meter i::after { content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.55); }
/* every page's small print and line text in Nunito bold, like the mockup */
:root[data-look] .pf-line, :root[data-look] .pf-since, :root[data-look] .foot, :root[data-look] .gs-intro, :root[data-look] .tm-line, :root[data-look] .tm-fine { font-weight: 600; }
:root[data-look] .pf-card { padding: 16px; border-radius: 20px; }
:root[data-look] .set .name, :root[data-look] .set-group .set { font-family: var(--sans); font-weight: 700; }
:root[data-look] .set .val { font-family: var(--display); font-weight: 600; }
:root[data-look] .set .tile, :root[data-look] .gs-ic, :root[data-look] .more-ic { border-radius: 12px; background: var(--accent-soft); color: var(--accent-deep); border: 0; }
:root:is([data-look="neon"], [data-look="headliner"]) .set .tile, :root:is([data-look="neon"], [data-look="headliner"]) .gs-ic, :root:is([data-look="neon"], [data-look="headliner"]) .more-ic { color: var(--accent-ink); }

/* ==========================================================================
   The Gig (4.1.0): a song played as a scored show, over the song page.
   Stage Gels: each section's light, from the palette. The screen washes into
   the gel of the section you're in; the song map shows every section's gel.
   ========================================================================== */
:root, :root[data-look] { --g-verse: var(--strings); --g-chorus: var(--accent); --g-bridge: var(--streak); --g-solo: var(--fans); }
:root:is([data-look="neon"], [data-look="headliner"]) { --g-verse: #3DE0FF; --g-chorus: #FF4FA3; --g-bridge: #FFD84D; --g-solo: #B8F34A; }
:root[data-look="festival"] { --g-verse: #3A86FF; --g-chorus: #FF3D7F; --g-bridge: #FF8A00; --g-solo: #FFD23F; }
:root[data-look="green"] { --g-verse: #0B7A7C; --g-chorus: #FF5A4E; --g-bridge: #F2B705; --g-solo: #7A2E8E; }
body.gigging .fp, body.gigging .fp-nav, body.gigging .coach, body.gigging .coach-dim, body.gigging .nextup, body.gigging .countin, body.gigging #tabs { visibility: hidden; }
/* 4.51.0: the show is see-through in the middle: the song page under it is the lines (stage.js draws on it).
   A fade at the top and the bottom keeps the controls clear of the words scrolling under them. */
.gig { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; padding: calc(10px + var(--safe-t)) 16px calc(12px + var(--safe-b)); color: var(--fg); overflow: hidden; font-family: var(--sans); pointer-events: none; }
.gig > * { pointer-events: auto; }
.gig > .gg-bd { pointer-events: none; }
.gig::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(var(--safe-t) + 150px); background: linear-gradient(180deg, var(--bg) calc(var(--safe-t) + 96px), transparent); pointer-events: none; }
.gig::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: calc(var(--safe-b) + 110px); background: linear-gradient(180deg, transparent, var(--bg) 44px); pointer-events: none; }
.gig .gg-bottom { margin-top: auto; }
.gig.done { background: var(--bg); }
.gig > * { position: relative; }
.gg-top { display: flex; align-items: center; gap: 10px; flex: none; }
.gg-x { width: 44px; height: 44px; flex: none; border: 0; background: none; color: var(--muted); display: grid; place-items: center; }
.gg-x svg { width: 24px; height: 24px; }
.gl-verse { background: var(--g-verse); } .gl-chorus { background: var(--g-chorus); } .gl-bridge { background: var(--g-bridge); } .gl-solo { background: var(--g-solo); }
.gg-status { display: flex; align-items: center; justify-content: space-between; flex: none; min-height: 32px; }
.gg-sec { padding: 4px 14px; border-radius: 999px; background: var(--gel); color: #14213D; font: 700 15px var(--display); letter-spacing: .05em; transition: background .4s; }
.gg-combo { font: 700 18px var(--display); color: var(--streak); letter-spacing: .03em; }
.gg-crowd { flex: none; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); border-radius: 18px; padding: 8px 12px 6px; }
.gg-crowd-h, .gg-th { display: flex; justify-content: space-between; font: 800 12px var(--sans); letter-spacing: .08em; color: var(--muted); }
.gg-crowd-h b, .gg-th b { color: var(--good); font-weight: 800; }
.gg-fans { display: flex; justify-content: space-between; margin-top: 4px; height: 36px; }
.gg-side { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.gg-louie { display: grid; place-items: center; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); border-radius: 20px; height: 84px; }
.gg-louie .louie { height: 76px; width: auto; }
.gg-timing { flex: none; }
.gg-timing svg { display: block; width: 100%; height: 30px; }
.gg-nut { fill: var(--rim); }
.gg-string { fill: none; stroke: var(--fans); stroke-width: 5; stroke-linecap: round; }
.gg-string.wob { animation: gg-wob .14s linear infinite alternate; transform-origin: center; }
@keyframes gg-wob { to { transform: scaleY(-1); } }
.gg-bottom { flex: none; display: flex; align-items: center; gap: 10px; }
.gg-mic { flex: 1; min-width: 0; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--bronze-line); border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--good); font: 700 15px var(--sans); }
.gg-mic svg { width: 20px; height: 20px; flex: none; }
.gg-mic.off { color: var(--muted); }
.gg-lv { display: flex; align-items: center; gap: 3px; height: 22px; }
.gg-lv i { width: 4px; height: 6px; border-radius: 2px; background: currentColor; }
.gg-mic.off .gg-lv { display: none; }
.gg-mic span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gg-pause { flex: none; width: 66px; height: 60px; border: 0; border-radius: 18px; background: var(--fg); color: var(--bg); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 55%, transparent); display: grid; place-items: center; }
.gg-pause svg { width: 24px; height: 24px; fill: currentColor; }
.gig.paused .gg-pause { background: var(--copper); color: var(--on-accent); box-shadow: var(--copper-hi), var(--copper-glow); }
@media (prefers-reduced-motion: reduce) { .gg-string.wob { animation: none; } }
/* Show complete */
.gig.done { justify-content: center; }
.gc { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; height: 100%; padding-top: 30px; box-sizing: border-box; }
.gc .louie { width: 170px; height: auto; }
/* 4.66.0: Show complete under the backdrop you wear */
.gc-hero { position: relative; width: 100%; flex: none; display: flex; align-items: flex-end; justify-content: center; min-height: 190px; padding-top: 52px; box-sizing: border-box; border-radius: 22px; overflow: hidden; }
.gc-hero > .gc-bd { position: absolute; inset: 0; z-index: 0; }
.gc-bd svg { width: 100%; height: 100%; display: block; }
.gc-hero > :not(.gc-bd, .gc-conf, .gc-bdc) { position: relative; z-index: 1; }
.gc-hero > .gc-conf { z-index: 1; height: 100%; }
.gc-hero .gc-bdc { position: absolute; top: 8px; right: 8px; z-index: 2; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(20, 33, 61, .82); color: #fff; font: 700 14px var(--sans); }
.gc-bdc svg { width: 16px; height: 16px; }
.gc-bds { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gc-bds[hidden] { display: none; }
body.held .st-open { display: none; } /* 4.66.0: paused, the count-in card doesn't sit over the chord diagrams */
.gc-t { margin: 0; font: 700 34px var(--display); color: var(--streak); }
.gc-s { margin: -6px 0 0; font: 700 16px var(--sans); color: var(--fg-2); }
.gc-tiles { display: flex; gap: 8px; width: 100%; }
.gc-tile { flex: 1; border-radius: 18px; padding: 3px; }
.gc-tile small { display: block; padding: 5px 0 4px; font: 800 12px var(--sans); letter-spacing: .08em; color: #14213D; }
.gc-tile b { display: block; padding: 10px 0; border-radius: 15px; background: linear-gradient(180deg, var(--card-2), var(--card)); font: 700 22px var(--display); color: var(--fg); white-space: nowrap; }
.gc-tile.fans { background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.gc-tile.crowd { background: var(--copper); box-shadow: var(--copper-hi), var(--copper-glow); }
.gc-tile.beat { background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.gc-tile.beat small { color: #fff; }
.gc-list { width: 100%; box-sizing: border-box; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); border-radius: 18px; padding: 4px 14px; text-align: left; }
.gc-list p { margin: 10px 0; font: 700 15px var(--sans); color: var(--fg-2); }
.gc-list b { color: var(--fg); }
.gc-acts { margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.gc-acts .btn { width: 100%; height: 54px; flex: none; }
.gc-conf { position: absolute; inset: 0 0 auto 0; height: 260px; pointer-events: none; }
.gc-conf i { position: absolute; width: 10px; height: 16px; border-radius: 2px; animation: gc-fall 2.4s linear infinite; }
.gc-conf i:nth-child(1) { left: 10%; background: var(--g-verse); } .gc-conf i:nth-child(2) { left: 24%; background: var(--g-chorus); animation-delay: .4s; }
.gc-conf i:nth-child(3) { left: 40%; background: var(--copper); animation-delay: .9s; } .gc-conf i:nth-child(4) { left: 58%; background: var(--g-bridge); animation-delay: .2s; }
.gc-conf i:nth-child(5) { left: 72%; background: var(--g-verse); animation-delay: 1.2s; } .gc-conf i:nth-child(6) { left: 86%; background: var(--g-chorus); animation-delay: .7s; }
.gc-conf i:nth-child(7) { left: 50%; background: var(--g-solo); animation-delay: 1.6s; }
@keyframes gc-fall { from { transform: translateY(-20px) rotate(0); opacity: 1; } to { transform: translateY(260px) rotate(300deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gc-conf { display: none; } }

/* ==========================================================================
   One song screen (4.2.0): the song page built from the Gig's parts.
   Top: back, the title (artist, best show), favorite; the chips; the song map
   in Stage Gels; the chords. Bottom, in thumb reach: Tools and a big Play.
   ========================================================================== */
.app.viewer > .ehead { display: none; }
body.cedit .app.viewer > .ehead { display: flex; }
.shead { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; }
.sh-btn { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid var(--bronze-line); background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); display: grid; place-items: center; padding: 0; }
.sh-btn svg { width: 18px; height: 18px; }
.sh-btn.fav.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 3px 0 var(--accent-line, var(--accent)); color: var(--accent-ink); }
.sh-btn.fav.on svg { fill: currentColor; }
.sh-t { flex: 1; min-width: 0; }
.app.viewer .shead .song-title, body:not(.cedit) .app.viewer .shead .song-title { margin: 0; font: 700 26px/1.1 var(--display); letter-spacing: 0; }
.app.viewer .shead .meta { margin: 2px 0 0; font: 700 14px var(--sans); color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
.app.viewer .shead .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
.app.viewer .shead .meta:empty { display: none; }
body.cedit .shead .sh-btn, body.cedit .shead .meta { display: none; }
body.cedit .shead { align-items: flex-start; }
body.cedit .sh-t { display: flex; flex-direction: column; }
.app.viewer > .metarow { margin: 12px -16px 0; padding: 0 16px 3px; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.app.viewer > .metarow::-webkit-scrollbar { display: none; }
.app.viewer > .metarow > * { flex: none; }
.keyslot:empty { display: none; }
.app.viewer > .shead { transition: opacity .3s, filter .3s; }
body.playing .app.viewer > .shead { opacity: .35; }
/* the song map: tap a section to go there */
/* the chords (4.54.0): a shape tile each, NEW for one you haven't learned */
.app.viewer > #strip:not(:empty) { display: block; margin: 14px 0 8px; }
.app.viewer > #strip .strip-h { display: flex; justify-content: flex-start; gap: 6px; margin: 0 2px 8px; font-size: 12px; }
.app.viewer > #strip .strip-h .n::before { content: "\00b7\00a0"; }
.app.viewer > #strip .strip { gap: 8px; margin: 0 -20px; padding: 2px 20px 8px; scroll-padding-left: 20px; scroll-snap-type: x proximity; }
.app.viewer > #strip .strip.fits { overflow-x: visible; }
.app.viewer > #strip .strip.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.app.viewer > #strip .strip.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.app.viewer > #strip .strip.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.app.viewer .strip .scard { width: var(--tile, 76px); scroll-snap-align: start; min-height: 90px; padding: 7px 0 8px; border-radius: 16px; border: 1px solid var(--bronze-line); background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; font: 600 16px var(--display); color: var(--fg); }
.app.viewer .strip .scard svg { display: block; width: calc(var(--tile, 76px) - 18px); height: auto; }
.app.viewer .strip .scard.new { border-color: var(--streak); background: color-mix(in srgb, var(--streak) 12%, var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 40%, var(--card)); }
.sc-new { font: 800 12px var(--sans); color: var(--streak-deep, var(--streak)); }
.app.viewer .strip .scard.sel { border-color: var(--accent); box-shadow: var(--copper-hi), var(--copper-glow); }
body.wide .rail .strip .scard { width: 64px; height: 92px; padding: 0; border-radius: 10px; display: grid; box-shadow: none; }
body.wide .rail .strip .scard svg { display: block; }
body.wide .rail .strip .scard .sc-new { display: none; }
/* the bar: Tools, (in a set) 4 of 9, and Play */
.app.viewer .player .tl { width: 56px; height: 58px; flex: none; box-sizing: border-box; border-radius: 18px; border: 1px solid var(--bronze-line); background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); display: grid; place-items: center; padding: 0; position: relative; }
.app.viewer .player .tl svg { width: 24px; height: 24px; }
.app.viewer .player .tl .newdot { position: absolute; top: 6px; right: 6px; }
.app.viewer .player .setdial { width: auto; display: inline-flex; gap: 6px; padding: 0 12px; font: 700 14px var(--display); color: var(--fg); }
.app.viewer .player .setdial svg { width: 18px; height: 18px; color: var(--accent-deep); }
.app.viewer .player .play { flex: 1; width: auto; min-width: 0; height: 64px; border-radius: 18px; background: var(--copper); color: var(--on-accent); box-shadow: var(--copper-hi), var(--copper-glow); display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 19px var(--display); letter-spacing: .04em; position: relative; overflow: hidden; }
.app.viewer .player .play::before { content: ""; position: absolute; left: 14px; right: 14px; top: 6px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.35); }
.app.viewer .player .play svg { width: 20px; height: 20px; }
.app.viewer .player .play:active { transform: translateY(3px); box-shadow: var(--copper-hi), var(--copper-glow); }
.app.viewer .player { height: auto; display: flex; gap: 10px; padding: 10px; align-items: center; }
body.fold .fp #play span { display: none; }
@media (max-width: 699px) and (orientation: portrait) {
  .app.viewer .player { display: flex; padding: 10px; }
  .app.viewer { padding-bottom: calc(118px + var(--safe-b)); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .app.viewer .player { flex-direction: column; justify-content: flex-end; padding: 10px; }
  .app.viewer .player .play { flex: none; width: 60px; height: 60px; }
  .app.viewer .player .play span { display: none; }
}
/* Tools: one sheet from the bottom */
.menu.tools { width: min(380px, calc(100vw - 24px)); box-sizing: border-box; }
.menu.tools.msheet { padding: 2px 14px calc(14px + var(--safe-b)); bottom: 0; left: 0; right: 0; width: auto; border-radius: 26px 26px 0 0; } /* 4.19.1: full width (it kept the 380px cap and sat to the left) */
body.gigging .menu.tools { z-index: 60; }
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 2px 0; }
.tl-head > b { font: 700 21px var(--display); color: var(--fg); }
.menu.tools .mrow.size { width: auto; flex: none; border: 0 !important; margin: 0 !important; padding: 0 !important; gap: 8px; min-height: 0; }
.menu.tools .mrow.size .ml { font: 700 14px var(--sans); color: var(--muted); }
.menu.tools .mrow.size .v { font: 700 15px var(--display); color: var(--fg); min-width: 44px; text-align: center; }
.tl-lines { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 2px 0; font: 700 14px var(--sans); color: var(--muted); }
.tl-lines .seg button { min-width: 44px; }
.tl-h { font: 800 12px var(--sans); letter-spacing: .08em; color: var(--muted); margin: 16px 4px 8px; }
.tl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.menu.tools .mrow.tl { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 86px; margin: 0; padding: 4px; border-radius: 18px; border: 1px solid var(--bronze-line); background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); text-align: center; box-sizing: border-box; color: var(--fg); }
.menu.tools .mrow.tl:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.menu.tools .mrow.tl .mi { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); margin: 0; }
:root:is([data-look="neon"], [data-look="headliner"]) .menu.tools .mrow.tl .mi { color: var(--accent-ink); }
.menu.tools .mrow.tl .mi svg { width: 19px; height: 19px; }
.menu.tools .mrow.tl .ml { font: 600 13.5px var(--display); line-height: 1.1; flex: none; }
.menu.tools .mrow.tl .mh { font: 800 12px var(--sans); color: var(--muted); margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.menu.tools .mrow.tl .newdot { position: absolute; top: 8px; right: 8px; }
/* the Gig: Hearing you with what a tap does; paused, the show held in place */
.gg-mt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; min-width: 0; }
.gg-mt small { font: 800 12px var(--sans); letter-spacing: .04em; opacity: .8; }
.gg-mic:not(.off) { border-color: var(--good); background: var(--good-soft, var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 35%, transparent); }
/* 4.52.0: paused, the show steps aside and the song page is back (body.held) */
.gig.paused { display: none; }
.set .name small.sub { display: block; margin-top: 2px; font: 600 12.5px var(--sans); color: var(--muted); }
/* Tools on a shorter phone: the sheet scrolls inside itself (4.2.1) */
.menu.tools { max-height: calc(100dvh - 24px - var(--safe-t)); overflow-y: auto; overscroll-behavior: contain; }
/* ==========================================================================
   Full (4.4.0): Lines in a gig, Full. The song page shows whole and scrolls
   under your finger; the show is a strip at the top (the map, the section,
   Now and Next, the combo) and Hearing you and Pause at the bottom.
   ========================================================================== */
.gg-mini { display: none; }
/* ==========================================================================
   Tour quests (4.5.0): the month's tour, the request line, tonight's
   setlist and the duet quest (locked until Charts)
   ========================================================================== */
.tq { padding-bottom: calc(var(--tabs) + 24px); }
.tq-top { margin: -2px -4px 0; } /* 4.15.4: the stat bar sits where it does on the Road; 4.20.0: both 12px lower, clear of the frosted edge */
.tq-head { position: relative; margin: 10px -20px 0; padding: 16px 20px 18px; background: var(--copper); overflow: hidden; }
.tq-ht h1 { margin: 0; font: 700 28px var(--display); color: #14213D; }
.tq-ht small { display: block; margin-top: 2px; font: 800 13px var(--sans); letter-spacing: .06em; color: #14213D; }
/* 4.73.3: in the light looks the tour header is a deeper pink with white words (dark on the bright pink was 3.9:1) */
:root[data-look="festival"] .tq-head, :root[data-look="green"] .tq-head { background: #C21B57; }
:root[data-look="festival"] .tq-ht :is(h1, small), :root[data-look="green"] .tq-ht :is(h1, small) { color: #fff; }
.tq-louie { position: absolute; right: 10px; top: 4px; }
.tq-louie .louie { width: 104px; height: auto; }
.tq-goal { position: relative; z-index: 1; margin-top: 26px; background: #14213D; border-radius: 18px; padding: 14px; color: #fff; }
.tq-goal > b { font: 700 18px var(--display); }
.tq-goal > small { display: block; margin-top: 8px; font: 700 13px var(--sans); opacity: .75; }
.tq-big { position: relative; margin-top: 10px; }
.tq-big .tq-bar { height: 22px; border-radius: 11px; background: #2E3B5E; }
.tq-big .tq-bar i { background: var(--copper); }
.tq-big span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px var(--display); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.tq-bar { height: 10px; border-radius: 5px; background: var(--locked); overflow: hidden; margin-top: 6px; }
.tq-bar i { display: block; height: 100%; border-radius: inherit; background: var(--copper); min-width: 0; position: relative; }
.tq-bar.full i { background: var(--copper); }
.tq-req { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 12px 14px; border-radius: 18px; background: var(--copper); box-shadow: var(--copper-hi), var(--copper-glow); color: #14213D; }
.tq-req.done, .tq-req.empty { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); }
.tq-req svg { flex: none; }
.tq-phd { fill: var(--accent-deep); } .tq-ph { fill: var(--accent); }
.tq-rt { flex: 1; min-width: 0; }
.tq-rt small { font: 800 12px var(--sans); letter-spacing: .08em; }
.tq-rt p { margin: 2px 0 0; font: 700 16px/1.3 var(--sans); }
.tq-play { flex: none; border: 0; border-radius: 12px; padding: 12px 14px; background: #fff; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 35%, #fff); font: 700 15px var(--display); color: #14213D; }
.tq-play:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 35%, #fff); }
.tq-h { display: flex; justify-content: space-between; margin: 20px 2px 8px; font: 800 13px var(--sans); letter-spacing: .08em; color: var(--muted); }
.tq-hrs { color: var(--fg-2); }
.tq-card { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); border-radius: 18px; padding: 2px 14px; }
.tq-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.tq-row + .tq-row { border-top: 2px solid var(--hair); }
.tq-rg { flex: 1; min-width: 0; }
.tq-rg b { font: 700 15px var(--sans); color: var(--fg); }
.tq-rg small { display: block; margin-top: 4px; font: 700 12.5px var(--sans); color: var(--muted); }
.tq-foot { margin: 0; padding: 10px 0 12px; border-top: 2px solid var(--hair); font: 700 13.5px var(--sans); color: var(--fg-2); }
.tq-ckd { fill: var(--fans-deep); } .tq-ck { fill: var(--fans); }
.tq-bxd { fill: var(--streak-deep, var(--streak)); } .tq-bx { fill: var(--streak); } .tq-lid { fill: var(--fans); } .tq-rib { fill: var(--strings); }
.tq-lock { border-style: dashed; } /* 4.73.2: dashed says locked; no fading, so its words stay readable */
/* ==========================================================================
   Charts (4.6.0): the weekly chart at your tier, records, rival battles
   ========================================================================== */
.ch, .bt { padding-bottom: calc(var(--tabs) + 24px); }
.ch-last { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 10px 12px; border-radius: 16px; background: var(--copper); color: #14213D; }
.ch-last p { flex: 1; margin: 0; font: 700 14.5px/1.35 var(--sans); }
.ch-last .sb { flex: none; padding: 8px 12px; font: 700 14px var(--display); }
.ch-head { display: flex; align-items: center; gap: 10px; margin: 10px -20px 0; padding: 18px 20px; background: var(--copper); color: #14213D; }
:root[data-look="festival"] .ch-head, :root[data-look="green"] .ch-head { background: var(--strings-deep); color: #fff; } /* 4.73.2: readable on each look */
.ch-head > div:first-child { flex: 1; }
.ch-head h1 { margin: 0; font: 700 28px var(--display); }
.ch-head small { font: 800 13px var(--sans); letter-spacing: .06em; }
.ch-recs { display: flex; gap: 2px; }
.ch-vd { fill: #0B1226; } .ch-v { fill: #14213D; } .ch-lab { fill: var(--accent); } .ch-gold { fill: var(--fans); }
.ch-sub { margin: 12px 2px 6px; font: 700 14px var(--sans); color: var(--muted); }
.ch-list { list-style: none; margin: 0; padding: 0; }
.ch-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 16px; }
.ch-row.you { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 2px solid var(--strings); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 45%, transparent); }
.ch-rk { width: 24px; text-align: center; font: 700 17px var(--display); color: var(--muted); }
.ch-row.up .ch-rk { color: var(--good); }
.ch-av { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 18px var(--display); color: #14213D; overflow: hidden; }
.ch-av .louie { width: 34px; height: auto; }
.ch-nm { flex: 1; min-width: 0; font: 700 17px var(--sans); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-xp { font: 700 16px var(--display); color: var(--fg-2); white-space: nowrap; }
.ch-btl { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--copper); color: #14213D; font: 800 12px var(--sans); letter-spacing: .06em; }
.ch-zone { display: flex; align-items: center; gap: 10px; margin: 6px 0; font: 800 12px var(--sans); letter-spacing: .08em; color: var(--good-ink, var(--good)); }
.ch-zone::before, .ch-zone::after { content: ""; flex: 1; border-top: 2px dashed currentColor; opacity: .6; }
.ch-go { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 18px; background: var(--copper); box-shadow: var(--copper-hi), var(--copper-glow); color: #14213D; }
.ch-go.done { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); }
.ch-go p { flex: 1; margin: 0; font: 700 15px/1.35 var(--sans); }
.ch-gobtn { flex: none; border: 0; border-radius: 12px; padding: 12px 16px; background: #fff; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 35%, #fff); font: 700 16px var(--display); color: #14213D; }
.ch-how { margin: 16px 2px 0; font: 700 12.5px/1.45 var(--sans); color: var(--muted); }
/* the battle */
.bt { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 12px; }
.bt-x { position: absolute; left: 0; top: 8px; }
.bt-h { margin-top: 10px; font: 800 12px var(--sans); letter-spacing: .08em; color: var(--accent-ink); }
.bt h1 { margin: 0; font: 700 26px/1.15 var(--display); color: var(--fg); }
.bt-s { margin: 0; font: 700 15px/1.4 var(--sans); color: var(--fg-2); max-width: 320px; }
.bt-vs { display: flex; align-items: center; justify-content: space-around; width: 100%; margin-top: 6px; }
.bt-p { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 40%; }
.bt-p .louie { width: 104px; height: auto; }
.bt-p b { font: 700 17px var(--display); color: var(--fg); }
.bt-p small { font: 700 13px var(--sans); color: var(--muted); }
.bt-av { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--copper); font: 700 44px var(--display); color: #14213D; box-shadow: 0 5px 0 var(--streak-deep, var(--streak)); }
.bt-v { font: 700 26px var(--display); color: var(--accent-ink); }
.bt-song { width: 100%; box-sizing: border-box; padding: 12px; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); }
.bt-song b { display: block; font: 700 19px var(--display); color: var(--fg); }
.bt-song small { font: 700 13px var(--sans); color: var(--muted); }
.bt-tiles { display: flex; gap: 10px; width: 100%; }
.bt-t { flex: 1; border-radius: 16px; padding: 10px; text-align: left; }
.bt-t small { display: block; font: 800 12px var(--sans); letter-spacing: .08em; }
.bt-t b { font: 700 14.5px var(--sans); }
.bt-t.win { background: var(--good-soft, var(--card)); border: 2px solid var(--good); color: var(--fg); }
.bt-t.lose { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); color: var(--fg-2); }
.bt-note { margin: 0; font: 700 13px var(--sans); color: var(--muted); }
.bt-acts { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 4px; }
.bt-acts .btn { width: 100%; height: 56px; flex: none; }
/* ==========================================================================
   Your band (4.7.0): Louie's friends, joining as you play
   ========================================================================== */
.bd { padding-bottom: calc(var(--tabs) + 24px); }
.bd-head { display: flex; align-items: center; gap: 10px; margin: 10px -20px 0; padding: 14px 20px; background: var(--g-solo); color: #14213D; }
.bd-head > div { flex: 1; }
.bd-head h1 { margin: 0; font: 700 28px var(--display); }
.bd-head small { font: 800 13px var(--sans); letter-spacing: .06em; opacity: .75; }
.bd-head .louie { width: 92px; height: auto; }
.bd-next { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.bd-nt { flex: 1; min-width: 0; }
.bd-nt small { font: 800 12px var(--sans); letter-spacing: .08em; color: var(--muted); }
.bd-nt p { margin: 2px 0 0; font: 700 15px/1.35 var(--sans); color: var(--fg); }
.bd-sil { filter: brightness(0) opacity(.22); }
:root:is([data-look="neon"], [data-look="headliner"]) .bd-sil { filter: brightness(0) invert(1) opacity(.18); }
.bd-set { margin: 14px 0 0; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); display: flex; align-items: center; gap: 10px; }
.bd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bd-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); }
.bd-card b { font: 700 15px var(--display); }
.bd-card small { font: 800 12px var(--sans); letter-spacing: .06em; color: var(--muted); }
.bd-card .bd-part { color: var(--accent-deep); }
:root:is([data-look="neon"], [data-look="headliner"]) .bd-card .bd-part { color: var(--accent-ink); }
.bd-card.locked { border-style: dashed; box-shadow: none; background: transparent; }
.bd-card.fresh { border-color: var(--fans); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); animation: bd-pop .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes bd-pop { from { transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .bd-card.fresh { animation: none; } }
.gc-join { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.gc-join .louie { width: 120px; }
/* ==========================================================================
   Rehearse (4.8.0): the soundcheck and skill work
   ========================================================================== */
.rh { padding-bottom: calc(var(--tabs) + 24px); }
.rh-h1 { margin: 12px 2px 4px; font: 700 30px var(--display); color: var(--fg); }
.rh-sc { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 0; padding: 14px; border-radius: 20px; background: var(--copper); color: #fff; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.rh-sc.done { background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.rh-sct { flex: 1; min-width: 0; }
.rh-sct > b { font: 700 22px var(--display); }
.rh-sct p { margin: 4px 0 0; font: 700 15px/1.4 var(--sans); }
.rh-sct p b.ok { text-decoration: line-through; opacity: .7; }
.rh-sc .louie { width: 82px; height: auto; flex: none; }
.rh-sc .rh-go { flex: 1 0 100%; height: 52px; background: #fff !important; color: var(--strings-deep) !important; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 40%, #fff) !important; font: 700 16px var(--display); letter-spacing: .03em; }
.rh-list { display: flex; flex-direction: column; gap: 10px; }
.rh-item { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--bronze-line); background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); text-align: left; color: var(--fg); }
.rh-item:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.rh-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); }
:root:is([data-look="neon"], [data-look="headliner"]) .rh-ic { color: var(--accent-ink); }
.rh-ic svg { width: 22px; height: 22px; }
.rh-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rh-t b { font: 700 17px var(--display); }
.rh-t small { font: 700 13.5px var(--sans); color: var(--muted); margin-top: 1px; }
.rh-n { flex: none; min-width: 30px; height: 30px; padding: 0 8px; box-sizing: border-box; border-radius: 15px; background: var(--copper); color: #14213D; display: grid; place-items: center; font: 700 15px var(--display); }
.rh-item .chev { width: 16px; height: 16px; color: var(--muted); flex: none; }
.rh-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: -2px 0 4px; }
.rh-pairs[hidden] { display: none; }
.rh-pair { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--bronze-line); background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg); text-align: left; }
.rh-pair b { font: 700 16px var(--display); }
.rh-pair small { font: 700 12.5px var(--sans); color: var(--muted); }
/* ==========================================================================
   Songbook (4.9.0): a bar on the Road, and the Songbook page (the old Library)
   ========================================================================== */
.rd-sbk { position: absolute; left: 12px; right: 12px; bottom: calc(var(--tabs) + 12px); z-index: 6; display: flex; align-items: stretch; gap: 8px; height: 62px; box-sizing: border-box; } /* 4.48.0: two labelled buttons, Songbook and Search or add */
.rd-sbk-go { flex: none; width: 146px; display: flex; align-items: center; gap: 9px; height: 100%; padding: 0 10px 0 10px; border-radius: 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); box-sizing: border-box; text-align: left; color: var(--fg); }
.rd-sbk-ic { width: 38px; height: 38px; flex: none; border-radius: 13px; background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); display: grid; place-items: center; }
.rd-sbk-ic svg { width: 22px; height: 22px; fill: #fff; }
.rd-sbk-t { min-width: 0; display: flex; flex-direction: column; }
.rd-sbk-t b { font: 700 16px var(--display); }
.rd-sbk-t small { font: 700 13px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-sbk-q { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px; border-radius: 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); box-sizing: border-box; color: var(--fg); font: 800 14px var(--sans); text-align: left; }
.rd-sbk-q span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-sbk-go:active, .rd-sbk-q:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.rd-sbk-q svg { width: 22px; height: 22px; flex: none; color: var(--accent-ink); }
/* the page */
.app:not(.viewer) .head-l .sh-btn { margin-right: 10px; }
.upn { display: flex; gap: 10px; margin-bottom: 14px; }
.upn-c { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 12px; border: 0; border-radius: 18px; text-align: left; color: #14213D; }
.upn-c.one { background: var(--copper); box-shadow: 0 4px 0 var(--streak-deep, var(--streak)); }
.upn-c.req { background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: #14213D; } /* 4.73.2: dark ink on Neon's cyan; white on the deeper blue or plum in the light looks */
:root[data-look="festival"] .upn-c.req, :root[data-look="green"] .upn-c.req { background: var(--strings-deep); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 70%, #000); color: #fff; }
.upn-c.req small, .upn-c.req em, .today .upn-c.req .tdy-t small, .today .upn-c.req .tdy-t em { opacity: 1; }
.upn-c small { font: 800 12px var(--sans); letter-spacing: .08em; opacity: .8; }
.upn-c b { font: 700 16px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.upn-c span { font: 700 12.5px var(--sans); }
.upn-c:active { transform: translateY(3px); box-shadow: none; }
.row .fit { flex: none; margin-left: 6px; padding: 3px 9px; border-radius: 999px; font: 800 12px var(--sans); letter-spacing: .04em; white-space: nowrap; }
.row .fit.can { background: var(--good-soft, #E1F5EE); color: var(--good); }
.row .fit.one { background: color-mix(in srgb, var(--streak) 18%, var(--card)); color: var(--streak-deep, var(--streak)); }
.row .fit.learn { background: var(--accent-soft); color: var(--accent-deep); }
:root:is([data-look="neon"], [data-look="headliner"]) .row .fit.learn { color: var(--accent-ink); }
body.is-home { --peek: calc(84px + var(--tabs)); }
/* Cover requests (4.10.0): what you listen to becomes the request, or a cover quest */
.tq-cover { margin: 16px 0 0; padding: 14px; border-radius: 20px; background: #14213D; color: #fff; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.tq-cover > small { font: 800 12px var(--sans); letter-spacing: .08em; color: var(--fans); }
.tq-cvt { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.tq-cvt p { margin: 0; font: 700 14px/1.35 var(--sans); }
.tq-cvt p b { font: 700 18px var(--display); }
.tq-art { width: 56px; height: 56px; flex: none; border-radius: 12px; overflow: hidden; background: #2A3A63; display: grid; place-items: center; color: var(--fans); }
.tq-art img { width: 100%; height: 100%; object-fit: cover; }
.tq-steps { display: flex; gap: 6px; margin-top: 12px; }
.tq-steps span { flex: 1; padding: 7px 4px; border-radius: 10px; background: #2A3A63; font: 700 12.5px var(--sans); text-align: center; }
.tq-steps span.now { background: var(--copper); color: #14213D; }
.tq-steps span.done { background: var(--good); color: #fff; text-decoration: line-through; }
.tq-cover .btn { width: 100%; height: 52px; margin-top: 12px; }
/* Charts (4.11.0): what each player did today, and the move down zone */
.ch-nm { display: flex; flex-direction: column; line-height: 1.15; }
.ch-note { font: 700 12px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-note.hot { color: var(--good-ink, var(--good)); }
:root[data-look="festival"] { --good-ink: #0B7A5C; } :root[data-look="green"] { --good-ink: #0A6F6F; } /* 4.73.2: the green as text, dark enough to read */
.ch-zone.down { color: var(--accent-deep); }
:root:is([data-look="neon"], [data-look="headliner"]) .ch-zone.down { color: var(--accent-ink); }
/* ==========================================================================
   Song duels (4.12.0)
   ========================================================================== */
.gig.done .gc { overflow-y: auto; }
body.gigging .ask { z-index: 66; }
.gc-duel { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 18px; background: #14213D; color: #fff; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.gc-duel small { font: 800 12px var(--sans); letter-spacing: .08em; color: var(--fans); }
.gc-duel b { font: 700 16px var(--display); }
.gc-duel .btn { width: 100%; height: 48px; flex: none; margin-top: 4px; }
.dl-t { font: 700 18px/1.35 var(--sans); color: var(--fg); margin: 6px 0; }
.du { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 12px 0 calc(var(--safe-b) + 24px); min-height: calc(100dvh - 40px); box-sizing: border-box; }
.du-x { position: absolute; left: 0; top: 8px; }
.du-h { margin-top: 10px; font: 800 12px var(--sans); letter-spacing: .08em; color: var(--accent-ink); }
.du h1 { margin: 0; font: 700 26px/1.15 var(--display); color: var(--fg); max-width: 330px; }
.du-vs { display: flex; align-items: center; justify-content: space-around; width: 100%; margin-top: 8px; }
.du-p { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 42%; }
.du-av { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--copper); color: #14213D; font: 700 40px var(--display); flex: none; overflow: hidden; }
.du-av.me { background: var(--copper); }
.du-av.sm { width: 40px; height: 40px; font-size: 18px; }
.du-p b { font: 700 17px var(--display); color: var(--fg); margin-top: 4px; }
.du-p big { font: 700 34px var(--display); color: var(--fg); }
.du-p big.win { color: var(--good); }
.du-p small { font: 700 12.5px var(--sans); color: var(--muted); }
.du-v { font: 700 24px var(--display); color: var(--accent-ink); }
.du-rec { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); text-align: left; }
.du-rec small { font: 800 12px var(--sans); letter-spacing: .08em; color: var(--muted); }
.du-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.du-bar b { font: 700 26px var(--display); color: var(--fg); }
.du-bar span { flex: 1; height: 14px; border-radius: 7px; background: var(--copper); overflow: hidden; }
.du-bar i { display: block; height: 100%; background: var(--good); }
.du-lab { display: flex; justify-content: space-between; font: 700 12.5px var(--sans); color: var(--muted); }
.du-rec p { margin: 8px 0 0; font: 700 14px var(--sans); color: var(--fg); }
.du-rec b.w, .du-row small.w { color: var(--good); } .du-rec b.l, .du-row small.l { color: var(--streak-deep, var(--streak)); }
:root:is([data-look="neon"], [data-look="headliner"]) .du-rec b.l, :root:is([data-look="neon"], [data-look="headliner"]) .du-row small.l { color: var(--streak); }
.du-acts { margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.du-acts .btn { width: 100%; height: 54px; flex: none; }
.du-list { display: flex; flex-direction: column; gap: 8px; }
.du-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--bronze-line); background: linear-gradient(180deg, var(--card-2), var(--card)); text-align: left; color: var(--fg); }
.du-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.du-rt b { font: 700 15px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.du-rt small { font: 700 12.5px var(--sans); color: var(--muted); }
.du-row .chev { width: 16px; height: 16px; color: var(--muted); }
/* Friends (4.13.0): League | Friends on Charts, and the Friend quest */
.ch-pane { margin: 10px 0 0; width: 100%; }
.ch-pane button { flex: 1; }
.fr-list { margin-top: 12px; }
.fr-row { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
.fr-row.you { border: 2px solid var(--strings); background: linear-gradient(180deg, var(--card-2), var(--card)); }
.fr-empty { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 14px; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); }
.fr-empty p { margin: 0; font: 700 14.5px/1.4 var(--sans); color: var(--fg); }
.fr-empty .louie { width: 84px; height: auto; flex: none; }
.tq-bar.fq { display: flex; }
.tq-bar.fq i { border-radius: 0; }
.tq-bar.fq i:first-child { border-radius: 5px 0 0 5px; background: var(--copper); }
.tq-bar.fq i.th { background: var(--copper); }

/* ---- 4.14.0: the Merch table ---- */
.fin-pink .louie, body[data-wear="pink"] .louie:not(.fin .louie) { --lv-face: #FFD23F; --lv-face-sh: #F2B705; --lv-grille: #14213D; --lv-slat: #2A3A63; --lv-pupil: #14213D; --lv-shadow: #14213D; --lv-body: #FF4FA3; --lv-shade: #D93A8A; --lv-hi: #FF84C0; --lv-cheek: #FFD84D; --lv-lamp: #3DE0FF; --lv-tongue: #3DE0FF; }
.fin-teal .louie, body[data-wear="teal"] .louie:not(.fin .louie) { --lv-face: #FFD23F; --lv-face-sh: #F2B705; --lv-grille: #14213D; --lv-slat: #2A3A63; --lv-pupil: #14213D; --lv-shadow: #14213D; --lv-body: #0F8B8D; --lv-shade: #0B6F71; --lv-hi: #3BA7A9; --lv-cheek: #FF5A4E; --lv-lamp: #FF5A4E; --lv-tongue: #FF5A4E; }
.fin-tweed .louie, body[data-wear="tweed"] .louie:not(.fin .louie) { --lv-body: #D8B571; --lv-shade: #B08A48; --lv-hi: #EBD39C; --lv-face: #F4EBD6; --lv-face-sh: #DCCDA8; --lv-grille: #5A3A22; --lv-slat: #7A5434; --lv-pupil: #3A2414; --lv-cheek: #E07A5F; --lv-lamp: #E63946; --lv-tongue: #E07A5F; --lv-shadow: #3A2414; }
.fin-black .louie, body[data-wear="black"] .louie:not(.fin .louie) { --lv-body: #2A2B33; --lv-shade: #16171C; --lv-hi: #474956; --lv-face: #D5D8E0; --lv-face-sh: #A9AEBB; --lv-grille: #14151A; --lv-slat: #3A3D48; --lv-pupil: #14151A; --lv-cheek: #FF3D7F; --lv-lamp: #3A86FF; --lv-tongue: #FF3D7F; --lv-shadow: #000; }
.fin-mint .louie, body[data-wear="mint"] .louie:not(.fin .louie) { --lv-body: #6FD3B8; --lv-shade: #45B394; --lv-hi: #A6E8D6; --lv-face: #FFF4E2; --lv-face-sh: #F0DDBD; --lv-grille: #1E3A34; --lv-slat: #33584F; --lv-pupil: #1E3A34; --lv-cheek: #FF7A9C; --lv-lamp: #FF3D7F; --lv-tongue: #FF7A9C; --lv-shadow: #1E3A34; }
.fin-gold .louie, body[data-wear="gold"] .louie:not(.fin .louie) { --lv-body: #E8B828; --lv-shade: #C2961A; --lv-hi: #F6D96A; --lv-face: #FFF3C4; --lv-face-sh: #F2DD8C; --lv-grille: #3A2A10; --lv-slat: #5C4420; --lv-pupil: #3A2A10; --lv-cheek: #FF3D7F; --lv-lamp: #FF3D7F; --lv-tongue: #FF3D7F; --lv-shadow: #3A2A10; }
.fin-stock .louie { --lv-body: #3A86FF; --lv-shade: #2C6FE0; --lv-hi: #6BA4FF; --lv-face: #FFD23F; --lv-face-sh: #F2B705; --lv-grille: #14213D; --lv-slat: #2A3A63; --lv-pupil: #14213D; --lv-cheek: #FF3D7F; --lv-lamp: #FF3D7F; --lv-tongue: #FF3D7F; --lv-shadow: #14213D; }
body[data-wear="amp"] .louie:not(.fin .louie) .lv-b, .fin-amp .louie .lv-b { fill: url(#tolex); }
body[data-wear="amp"] .louie:not(.fin .louie), .fin-amp .louie { --lv-body: #0f0f11; --lv-shade: #0f0f11; --lv-hi: #b8935a; --lv-face: #d9bd85; --lv-face-sh: #b08b4f; --lv-grille: #2e2116; --lv-slat: #4a3524; --lv-pupil: #1a120d; --lv-cheek: #c8804f; --lv-tongue: #c8804f; --lv-lamp: #ffb24a; --lv-shadow: #0f0f11; }
.fin { display: inline-block; line-height: 0; }
/* Louie Lite: Settings > Look shows each finish as a small Louie */
.fin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.fin-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 92px; padding: 8px 2px 6px; border-radius: 14px; border: 1px solid var(--bronze-line, rgba(184,147,90,.42)); background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg-2); font: 500 12px/1.2 var(--sans); }
.fin-pick.on { color: var(--fg); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mc-tk { fill: var(--fans); } .mc-tkd { fill: var(--fans-deep); }
.mc { padding-bottom: calc(var(--tabs) + 24px); }
.mc-head { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.mc-head h1 { flex: 1; margin: 0; font: 700 26px var(--display); color: var(--fg); }
.mc-back, .mt-x { width: 40px; height: 40px; border-radius: 14px; border: 0; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); font: 700 24px var(--display); display: grid; place-items: center; padding: 0; }
.mc-fans { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 14px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); font: 700 18px var(--display); color: var(--fans-text); }
.mc-table { position: relative; height: 128px; margin: 6px -20px 0; color: var(--fg); overflow: hidden; }
.mc-line { position: absolute; left: 0; top: 0; width: 100%; height: 56px; }
.mc-lou { position: absolute; left: 50%; top: 22px; margin-left: -20px; }
.mc-lou .louie { width: 84px; height: auto; }
.mc-cloth { position: absolute; left: 30%; right: 6%; bottom: 0; height: 34px; border-radius: 6px 6px 0 0; background: var(--copper); box-shadow: inset 0 14px 0 color-mix(in srgb, var(--accent) 70%, #fff); }
.mc-say { position: absolute; left: 20px; top: 44px; width: 32%; margin: 0; padding: 8px 10px; border-radius: 14px; background: var(--fg); color: var(--bg); font: 700 12.5px/1.3 var(--sans); }
.mc-h { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 8px; }
.mc-h span { font: 700 19px var(--display); color: var(--fg); }
.mc-h small { font: 700 12.5px var(--sans); color: var(--muted); }
.mc-row { display: flex; gap: 8px; }
.mc-row.scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; }
.mc-row.scroll::-webkit-scrollbar { display: none; }
.mc-gear, .mc-fin, .mc-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid var(--bronze-line); border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg); padding: 8px 6px 10px; font-family: var(--sans); }
.mc-gear { flex: 1; min-width: 0; }
.mc-gear b, .mc-fin b, .mc-drop b { font: 700 15px var(--display); }
.mc-gear small { font: 700 12px/1.25 var(--sans); color: var(--muted); min-height: 29px; margin-bottom: 5px; text-align: center; }
.mc-fin { flex: 0 0 84px; } .mc-fin .louie { width: 54px; height: auto; }
.mc-fin b, .mc-drop b { margin: 2px 0 5px; font-size: 13.5px; }
.mc-drop { flex: 0 0 106px; padding: 6px; }
.mc-art { width: 100%; height: 54px; border-radius: 12px; display: block; }
.mc-fin.on, .mc-drop.on { border: 3px solid var(--strings); }
.mc-have { position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 9px; background: var(--fg); color: var(--bg); font: 700 12px var(--display); }
.mc-price { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 11px; background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: #14213D; font: 700 14px var(--display); }
.mc-price .mc-tk { fill: #14213D; opacity: .35; } .mc-price .mc-tkd { fill: #14213D; opacity: .2; }
.mc-price.short { background: var(--locked); box-shadow: none; color: var(--fg-2); } /* 4.73.1: readable while you save up */
.mc-on { display: inline-block; padding: 5px 9px; border-radius: 11px; background: var(--tabs-on); color: var(--fg); font: 800 12px var(--sans); letter-spacing: .06em; }
.mc-on.own { background: var(--card-2); color: var(--muted); }
.mc-note { margin: 14px 2px 0; font: 700 12.5px/1.4 var(--sans); color: var(--muted); }
/* try it on */
.mt { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #1D1640; animation: fade .2s; }
.mt-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; color: #fff; display: flex; flex-direction: column; align-items: center; padding: calc(10px + var(--safe-t)) 16px 14px; }
.mt-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.mt-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255,246,200,.3), transparent 70%); pointer-events: none; }
.mt-stage > :not(.mt-art) { position: relative; z-index: 1; }
.mt-top { align-self: stretch; display: flex; justify-content: space-between; align-items: center; }
.mt-x { background: rgba(255,255,255,.16); box-shadow: none; color: #fff; }
.mt-top .mc-fans { background: rgba(255,255,255,.16); box-shadow: none; color: #FFD23F; }
.mt-name { text-align: center; margin-top: 8px; }
.mt-name small { display: block; font: 800 12px var(--sans); letter-spacing: .08em; opacity: .75; }
.mt-name b { font: 700 30px var(--display); }
.mt-show { flex: 1; align-self: stretch; display: flex; align-items: center; justify-content: space-between; min-height: 0; }
.mt-it { display: grid; place-items: center; }
.mt-it .louie { width: min(190px, 46vw); height: auto; }
.mt-gear svg { width: 150px; height: auto; }
.mt-arr { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font: 700 26px var(--display); padding: 0; }
.mt-dots { display: flex; gap: 7px; }
.mt-dots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.3); }
.mt-dots i.on { width: 20px; background: #FFD23F; }
.mt-sheet { background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg); border-radius: 28px 28px 0 0; padding: 20px 18px calc(16px + var(--safe-b)); }
.mt-sheet h2 { margin: 0; font: 700 20px var(--display); }
.mt-sheet p { margin: 4px 0 0; font: 700 13.5px/1.4 var(--sans); color: var(--muted); }
.mt-tiles { display: flex; gap: 8px; margin-top: 12px; }
.mt-tiles div { flex: 1; padding: 8px 10px; border-radius: 14px; background: var(--card-2); }
.mt-tiles small { display: block; font: 800 12px var(--sans); letter-spacing: .08em; color: var(--muted); }
.mt-tiles b { display: inline-flex; align-items: center; gap: 5px; font: 700 18px var(--display); color: var(--fans-text); }
.mt-acts { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.mt-acts .btn { flex: none; width: 100%; height: 54px; font: 700 18px var(--display); }
.mt-acts .btn[disabled] { opacity: 1; }
.mt-not { border: 0; background: none; padding: 10px 0 0; min-height: 44px; font: 800 15px var(--sans); color: var(--fg-2); }
/* in the gig: the backdrop behind the top, fading into the stage */
.gig > .gg-bd { position: absolute; left: 0; right: 0; top: 0; height: 260px; pointer-events: none; opacity: .7; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
.gg-bd svg { width: 100%; height: 100%; display: block; }
.gc-merch { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 8px; padding: 8px 12px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--fans) 22%, var(--card)); color: var(--fg); text-align: left; font-family: var(--sans); }
.gc-merch > span:not(.fin):not(.gc-merch-ic) { flex: 1; display: flex; flex-direction: column; }
.gc-merch b { font: 700 15px var(--sans); } .gc-merch small { font: 700 12.5px var(--sans); color: var(--muted); }
.gc-merch .louie { width: 46px; height: auto; }
.gc-merch-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--copper); color: #14213D; }
.gc-merch-ic svg { width: 22px; height: 22px; }
.ch-takeget { display: block; margin-top: 8px; border: 0; background: none; padding: 0; font: 800 14px var(--sans); color: var(--strings); text-align: left; }

/* ---- 4.15.0: the streak moment, around Louie ----
   The streak colour floods the screen (Neon uses its cyan, so pink Louie shows),
   rays turn slowly, Louie drops in and squashes on landing (.55 s), the flame
   and confetti burst, the count rolls up and the week fills in. */
.sk { --sk-bg: var(--streak); --sk-deep: var(--streak-deep); --sk-ink: #14213D; position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: calc(28px + var(--safe-t)) 20px calc(16px + var(--safe-b)); background: var(--sk-bg); color: var(--sk-ink); overflow: hidden; font-family: var(--sans); animation: fade .2s; }
:root:is([data-look="neon"], [data-look="headliner"]) .sk { --sk-bg: #3DE0FF; --sk-deep: #1FA8C4; --sk-ink: #1D1640; }
.sk.out { opacity: 0; transition: opacity .25s; }
.sk-art { position: relative; width: 100%; max-width: 360px; height: 280px; flex: none; display: grid; place-items: end center; }
.sk-rays { position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.18) 0 11.25deg, transparent 11.25deg 22.5deg); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); animation: sk-spin 24s linear infinite; }
.sk-lou { position: relative; z-index: 1; transform-origin: 50% 100%; animation: sk-drop .55s cubic-bezier(.55,0,1,.45) .1s backwards, sk-land .45s ease-out .65s, sk-bob 1.6s ease-in-out 1.3s infinite; }
.sk-lou .louie { display: block; }
.sk-ping { position: absolute; left: 50%; bottom: 6px; width: 180px; height: 36px; margin-left: -90px; border-radius: 50%; border: 6px solid #fff; opacity: 0; animation: sk-ping .6s ease-out .62s; }
.sk-bits { position: absolute; inset: -40px -20px 0; pointer-events: none; }
.sk-bits i { position: absolute; left: var(--x); top: -20px; width: calc(6px + var(--s) * 3px); height: calc(10px + var(--s) * 3px); border-radius: 3px; background: var(--copper); opacity: 0; transform: rotate(var(--r)); animation: sk-fall 1.8s cubic-bezier(.3,.6,.6,1) var(--d) forwards; }
.sk-bits i:nth-child(4n+1) { background: #fff; } .sk-bits i:nth-child(4n+2) { background: var(--copper); } .sk-bits i:nth-child(4n+3) { background: var(--copper); border-radius: 50%; }
.sk-num { margin-top: 4px; font: 700 104px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; animation: sk-pop .45s cubic-bezier(.2,1.6,.4,1) .65s backwards; }
.sk-unit { margin-top: 4px; font: 700 15px var(--display); letter-spacing: .2em; text-transform: uppercase; animation: fade .3s ease .7s backwards; }
.sk-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: 100%; max-width: 340px; margin-top: 24px; text-align: center; }
.sk-week small { font: 600 13px var(--sans); opacity: .75; }
.sk-week small.now { opacity: 1; font-weight: 800; }
.sk-week i { justify-self: center; display: grid; place-items: center; width: 34px; height: 34px; margin-top: 8px; border-radius: 50%; background: color-mix(in srgb, var(--sk-ink) 16%, transparent); font: 700 12px var(--display); font-style: normal; }
.sk-week i.on { background: #fff; box-shadow: 0 3px 0 var(--sk-deep); animation: sk-pop .35s cubic-bezier(.2,1.6,.4,1) calc(.9s + var(--i) * .08s) backwards; }
.sk-week i.on::after { content: ""; width: 11px; height: 6px; border: solid var(--sk-deep); border-width: 0 0 3px 3px; transform: rotate(-45deg) translateY(-1px); animation: fade .2s ease calc(1s + var(--i) * .08s) backwards; }
.sk-week i.today.on { transform: scale(1.12); }
.sk-week i.goal:not(.on) { background: transparent; box-shadow: inset 0 0 0 3px #fff; }
.sk-say { margin: 22px 8px 0; max-width: 330px; text-align: center; font: 600 18px/1.4 var(--sans); animation: fade .4s ease 1.3s backwards; }
.sk-say b { font-weight: 800; }
.sk-best { margin-top: 6px; font-size: 14px; font-weight: 600; opacity: .8; animation: fade .4s ease 1.4s backwards; }
.sk-foot { margin-top: auto; display: flex; gap: 10px; width: 100%; max-width: 420px; }
.sk-foot .sb2 { flex: none; display: grid; place-items: center; width: 58px; height: 56px; border: 0; border-radius: 16px; background: rgba(255,255,255,.35); color: var(--sk-ink); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 70%, transparent); }
.sk-foot .sb2 svg { width: 22px; height: 22px; }
.sk .sk-foot #sk-ok { flex: 1; height: 56px; border: 0; border-radius: 16px; background: #fff; color: var(--sk-ink); font: 700 18px var(--display); box-shadow: 0 5px 0 var(--sk-deep); }
@keyframes sk-spin { to { transform: rotate(360deg); } }
@keyframes sk-drop { from { transform: translateY(-420px); } }
@keyframes sk-land { 0% { transform: scale(1.18, .78); } 45% { transform: scale(.94, 1.08) translateY(-14px); } 100% { transform: none; } }
@keyframes sk-bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
@keyframes sk-ping { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes sk-fall { 0% { opacity: 0; transform: translateY(0) rotate(var(--r)); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(340px) rotate(calc(var(--r) + 300deg)); } }
@keyframes sk-pop { from { opacity: 0; transform: scale(.4); } }
/* Reduce Motion: the final picture. */
.sk.still *, .sk.still, .sk.still *::after { animation: none !important; }

/* 4.16.0: the search field shows focus on its own rounded edge, not a square box around the text */
:root[data-look] .cmd #q:focus-visible { outline: none; }
.cmd:has(#q:focus-visible) { outline: 3px solid var(--accent-line, var(--accent)); outline-offset: 0; }
/* 4.16.0: the Songbook's tuner button in the version 4 style (profile and Settings live in the stat bar and More) */
.ib.chunky-tune { width: 46px; height: 46px; border: 0; border-radius: 14px; background: #FFD84D; color: #1B1838; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); display: grid; place-items: center; position: relative; }
.ib.chunky-tune svg { width: 24px; height: 24px; stroke-width: 2.6; }
.ib.chunky-tune:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }

/* ---------- Rock icons (4.16.0): the streak's guitar, stage light, horns and knob (rock.js) ---------- */
.ri { overflow: visible; display: block; }
.ri-guitar .ri-bd, .ri-guitar .ri-hd, .ri-guitar .ri-neck { fill: var(--streak, #FF4FA3); } .ri-guitar .ri-lip { fill: var(--streak-deep, #C2338A); }
.ri-guitar .ri-gl { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .75; } .ri-guitar .ri-gl2 { fill: #fff; opacity: .7; }
.ri-guitar .ri-ink { fill: #1B1838; } .ri-guitar .ri-dot { fill: #FFD84D; }
.ri-guitar .ri-waves path { fill: none; stroke: #3DE0FF; stroke-width: 2.4; stroke-linecap: round; }
.ri-guitar .ri-waves path + path { opacity: .6; }
.ri-tilt { transform-origin: 16px 24px; transform: rotate(-35deg); }
/* not played tonight: grey and upright, breathing to say "play" */
.ri-guitar:not(.on) .ri-tilt { transform: rotate(-8deg); }
.ri-guitar:not(.on) .ri-bd, .ri-guitar:not(.on) .ri-hd, .ri-guitar:not(.on) .ri-neck, .ri-guitar:not(.on) .ri-dot { fill: var(--locked-ic, #6E6898); }
.ri-guitar:not(.on) .ri-lip { fill: color-mix(in srgb, var(--locked-ic, #6E6898) 72%, #000); } .ri-guitar:not(.on) .ri-gl, .ri-guitar:not(.on) .ri-gl2 { opacity: .45; }
.ri-guitar:not(.on) .ri-waves { display: none; }
.ri-guitar:not(.on) { animation: ri-breathe 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
/* played tonight: it rocks back and forth, then rests, every few seconds; the sound waves pulse */
.ri-guitar.on .ri-tilt { animation: ri-rock 5s cubic-bezier(.3,1.5,.5,1) infinite; }
.ri-guitar.on .ri-waves path { animation: ri-wave 1.25s ease-out infinite; transform-box: fill-box; transform-origin: 0 50%; }
.ri-guitar.on .ri-waves path + path { animation-delay: .2s; }
/* tapped: one big rock and a hop */
.go .ri-guitar .ri-tilt, .ri-guitar.go .ri-tilt { animation: ri-bigrock .6s cubic-bezier(.3,1.6,.5,1); }
.go .ri-guitar, .ri-guitar.go { animation: ri-hop .6s cubic-bezier(.3,1.6,.5,1); transform-origin: 50% 100%; }
@keyframes ri-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes ri-rock { 0%, 70%, 100% { transform: rotate(-35deg); } 76% { transform: rotate(-52deg); } 82% { transform: rotate(-22deg); } 88% { transform: rotate(-44deg); } 94% { transform: rotate(-31deg); } }
@keyframes ri-bigrock { 0% { transform: rotate(-35deg); } 30% { transform: rotate(-65deg); } 60% { transform: rotate(-12deg); } 100% { transform: rotate(-35deg); } }
@keyframes ri-hop { 0%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-7px) scale(1.15); } 70% { transform: translateY(1px) scale(.95, 1.05); } }
@keyframes ri-wave { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }

/* the stage light: it drops in, the lens flickers, the beam comes on and keeps a slow pulse */
.ri-light .ri-can { fill: #8A7CFF; } .ri-light .ri-can-lip { fill: #5A4FB0; } .ri-light .ri-lens { fill: #FFD84D; }
.ri-light .ri-beam { fill: #FFD84D; opacity: .32; transform-origin: 50% 40%; }
.ri-light { animation: ri-drop .55s cubic-bezier(.3,1.6,.5,1) both; transform-origin: 50% 0; }
.ri-light .ri-lens { animation: ri-flick .7s steps(1) .45s both; }
.ri-light .ri-beam { animation: ri-flick .7s steps(1) .45s both, ri-glow 2.2s ease-in-out 1.2s infinite; }
@keyframes ri-drop { 0% { transform: translateY(-60%) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ri-flick { 0% { opacity: 0; } 20% { opacity: 1; } 35% { opacity: .1; } 55% { opacity: 1; } 70% { opacity: .2; } 85%, 100% { opacity: 1; } }
@keyframes ri-glow { 0%, 100% { opacity: .32; transform: scaleX(1); } 50% { opacity: .5; transform: scaleX(1.08); } }
.ri-light .ri-beam { opacity: .32; }

/* the horns: pop up with a big overshoot, then pump twice and keep a slow bounce */
.ri-horns .ri-hand { fill: #FFD84D; } .ri-horns .ri-hand-lip { fill: #E0B52E; }
.ri-horns { animation: ri-pop .6s cubic-bezier(.2,1.8,.4,1) both, ri-pump .5s ease-in-out .7s 2, ri-bob 1.6s ease-in-out 1.8s infinite; transform-origin: 50% 90%; }
@keyframes ri-pop { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ri-pump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14%) rotate(-6deg); } }
@keyframes ri-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%); } }

/* the knob: the ring fills and the knob turns to the level, with a little overshoot */
.ri-knob .ri-track, .ri-knob .ri-fill { fill: none; stroke-width: 3; stroke-linecap: round; }
.ri-knob .ri-track { stroke: rgba(184,147,90,.35); } .ri-knob .ri-fill { stroke: #ffb24a; animation: ri-fill 1.1s cubic-bezier(.3,1.2,.5,1) .2s both; }
.ri-knob .ri-cap { fill: #e9e9ec; } .ri-knob .ri-cap-lip { fill: #8e8e94; } .ri-knob .ri-ink { fill: #1a120d; }
.ri-knob .ri-dial { transform-origin: 16px 17px; transform: rotate(var(--a)); animation: ri-turn 1.1s cubic-bezier(.3,1.5,.5,1) .2s both; }
@keyframes ri-fill { from { stroke-dashoffset: 56.5; } }
@keyframes ri-turn { from { transform: rotate(-135deg); } }

@media (prefers-reduced-motion: reduce) {
  .ri, .ri * { animation: none !important; }
}

/* the stat bar's guitar (4.16.0) */
.hud .h-streak .ri-guitar { width: 36px; height: 36px; margin: -3px -2px; }

/* the streak moment: the stage light (and on milestone nights the horns) instead of the flame */
.sk-art .ri-light { position: absolute; left: 50%; top: 8px; width: 190px; height: 190px; margin-left: -95px; }
.sk-art .ri-horns { position: absolute; right: -6px; top: 6px; width: 92px; height: 92px; }

/* ---------- Your profile as a player card (4.17.0) ---------- */
.pf-player { margin: 14px 0 0; padding: 16px; border-radius: 24px; background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: #1B1838; position: relative; overflow: hidden; }
.pf-player::before { content: ""; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%; background: #fff; opacity: .16; }
.pf-pc-top { position: relative; display: flex; gap: 14px; align-items: center; }
.pf-pc-lou { flex: none; width: 112px; height: 112px; border-radius: 28px; background: var(--recess, #1f1910); display: grid; place-items: center; overflow: hidden; }
.pf-pc-lou .louie { width: 100px; height: auto; margin-top: 8px; }
.pf-pc-who { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pf-pc-who > small { font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .08em; opacity: .8; }
.pf-pc-venue { border: 0; background: none; padding: 0; color: inherit; text-align: left; display: flex; flex-direction: column; min-height: 44px; justify-content: center; }
.pf-pc-venue b { font: 700 26px/1.05 var(--display); }
.pf-pc-venue span { font: 700 14px var(--body, Nunito, sans-serif); display: inline-flex; align-items: center; gap: 2px; }
.pf-pc-venue .chev { width: 16px; height: 16px; }
.pf-pc-chart { margin-top: 4px; background: var(--recess, #1f1910); color: var(--recess-on, #ffc27a); border-radius: 999px; padding: 5px 11px; font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .06em; }
.pf-pc-level { position: relative; margin-top: 14px; background: var(--recess, #1f1910); border-radius: 14px; padding: 10px 12px; color: var(--recess-fg, #f1e3c4); }
.pf-pc-level > div { display: flex; justify-content: space-between; font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .06em; }
.pf-pc-level > div span { color: var(--recess-dim, #a99b80); }
.pf-pc-level > i { display: block; height: 10px; border-radius: 5px; margin-top: 6px; background: linear-gradient(90deg, #c8804f var(--w), rgba(0,0,0,.45) var(--w)); }
.pf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.pf-tile { background: linear-gradient(180deg, var(--card-2), var(--card)); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; justify-content: center; }
.pf-tile b { font: 700 26px var(--display); color: var(--fg); } .pf-tile b span { font-size: 16px; color: var(--muted); }
.pf-tile small { font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .06em; color: var(--muted); margin-top: 2px; }
.pf-tile .pf-fans { color: var(--fans-text); }
.pf-tile-streak { flex-direction: row; align-items: center; gap: 8px; }
.pf-tile-streak .pf-tn { display: flex; align-items: center; gap: 2px; } .pf-tile-streak .pf-tn b { color: var(--streak); }
.pf-tile-streak .ri-guitar { width: 28px; height: 28px; }
.pf-label { display: flex; justify-content: space-between; margin: 20px 2px 8px; font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .08em; color: var(--muted); }
.pf-label span + span { color: var(--accent-ink); }
.pf-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pf-badge { border-radius: 16px; padding: 10px 4px; text-align: center; color: #1B1838; min-height: 64px; display: flex; flex-direction: column; justify-content: center; }
.pf-badge b { font: 700 20px/1.1 var(--display); overflow-wrap: anywhere; } .pf-badge small { font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .04em; }
.pf-badge.k-song { background: #B8F34A; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); } .pf-badge.k-show { background: #FF4FA3; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.pf-badge.k-streak { background: #3DE0FF; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); } .pf-badge.k-chord { background: #FFD84D; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.pf-badge.k-venue { background: #8A7CFF; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); } .pf-badge.k-band { background: #FF8A3D; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); } .pf-badge.k-chart { background: #6BA4FF; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.pf-badge.locked { background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: none; color: var(--muted); }
.pf-allbadges { margin-top: 10px; } .pf-allbadges > summary { list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: center; font: 700 15px var(--display); color: var(--accent-ink); cursor: pointer; }
.pf-allbadges > summary::-webkit-details-marker { display: none; }
.pf-band { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 8px 12px; border: 0; border-radius: 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); color: inherit; min-height: 72px; }
.pf-band .friend { width: 52px; height: 52px; flex: none; }
.pf-band-more { width: 52px; height: 52px; border-radius: 16px; border: 3px dashed var(--muted); display: grid; place-items: center; font: 700 18px var(--display); color: var(--muted); flex: none; margin-left: auto; }
.pf-duel { display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, var(--card-2), var(--card)); border-radius: 18px; padding: 12px 14px; margin-bottom: 8px; }
.pf-duel > div { flex: 1; display: flex; flex-direction: column; } .pf-duel > div b { font: 700 17px var(--display); } .pf-duel small { color: var(--muted); font-weight: 700; }
.pf-duel > span { font: 700 24px var(--display); color: var(--muted); } .pf-duel > span b { color: var(--fg); } .pf-duel > span b.up { color: var(--accent-ink); }
.pf-more { margin-top: 16px; }
.pf-more > summary { list-style: none; display: flex; flex-direction: column; gap: 2px; padding: 14px 40px 14px 14px; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); cursor: pointer; position: relative; min-height: 44px; }
.pf-more > summary::-webkit-details-marker { display: none; }
.pf-more > summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; border-right: 3px solid var(--muted); border-bottom: 3px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.pf-more[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.pf-more > summary b { font: 700 17px var(--display); } .pf-more > summary small { color: var(--muted); font-weight: 700; font-size: 13px; }

/* 4.17.2: the lit tuner string wavers while the mic hears it, like a ringing string */
#tn-stage.ringing .tn-lit { animation: tn-ring .09s linear infinite alternate; }
@keyframes tn-ring { from { transform: translateX(-12px); } to { transform: translateX(12px); } } /* user units: about 3 px on screen */
@media (prefers-reduced-motion: reduce) { #tn-stage.ringing .tn-lit { animation: none; } }


/* ---------- Tour Map sheet (4.18.0): one goal, one unit, then pull up ---------- */
.tm-top .tm-info { margin-left: auto; }
#tm-take.tm-goalrow { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.tm-goal { display: flex; align-items: center; gap: 12px; }
.tm-goal .tm-badge { width: 50px; height: 50px; font-size: 15px; border-width: 3px; }
:root[data-look] .tm-badge { color: var(--fg); } /* 4.73.3: the rival's colour stays on the ring; the initials are in ink (a pale colour on white was 2.3:1) */
.tm-goal .tm-sh-t small { font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .08em; color: var(--muted); }
.tm-goal .tm-sh-t b { font: 700 21px/1.15 var(--display); white-space: normal; }
.tm-prog { cursor: pointer; } .tm-prog span { font-size: 15px; font-weight: 700; } .tm-prog b { color: var(--accent-ink); }
.tm-prog i { display: block; height: 14px; margin-top: 7px; border-radius: 7px; background: linear-gradient(90deg, var(--accent) var(--w), var(--card) var(--w)); box-shadow: inset 0 0 0 2px var(--rim); }
.tm-start { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); }
.tm-start > span { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-start > span small { display: block; font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .08em; }
.tm-start > span b { font: 700 18px var(--display); color: var(--fg); }
.tm-start .tm-go { flex: none; width: auto; height: 52px; padding: 0 22px; font-size: 18px; }
.tm-pull { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.tm-lab { display: flex; justify-content: space-between; }
.tm-bd { grid-template-columns: 18px 34px 1fr auto; min-height: 44px; font-size: 15px; }
.tm-bd > span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.tm-bd > span:nth-child(3) small { color: var(--streak); font-weight: 800; font-size: 12px; letter-spacing: .06em; }
.tm-av { width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--c); display: grid; place-items: center; font: 800 12px var(--body, Nunito, sans-serif); }
.tm-bd.you .tm-av { background: var(--copper); border-color: var(--accent); color: var(--on-accent); font-size: 12px; }
.tm-bd.you > span:nth-child(3), .tm-bd.you b { color: var(--accent-ink); }
.tm-bd.next { background: var(--accent-soft); border-radius: 12px; margin: 0 -8px; padding: 0 8px; }
.tm-bd b { font: 700 18px var(--display); }
.tm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tm-stats > div { background: linear-gradient(180deg, var(--card-2), var(--card)); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; }
.tm-stats b { font: 700 26px var(--display); } .tm-stats small { font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .06em; color: var(--muted); }
.tm-bd > span.tm-av { color: var(--fg); }
.tm-bd.you > span.tm-av { color: var(--on-accent); }
#tm-sheet[data-state="open"] .tm-pull { visibility: hidden; }

/* ---------- Chord passport and Your stats (4.19.0) ---------- */
.pf-passport { background: linear-gradient(180deg, var(--card-2), var(--card)); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.pf-ppage-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.pf-ppage-h b { font: 700 17px var(--display); } .pf-ppage-h span { font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .06em; color: var(--accent-ink); }
.pf-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pf-pstamp { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 700 18px var(--display); color: var(--muted); border: 3px dashed var(--rim); background: none; padding: 0; opacity: .7; }
.pf-pstamp.on { border: 0; opacity: 1; color: #1B1838; transform: rotate(var(--r)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32), inset 0 0 0 4px rgba(255,255,255,.35); }
.pf-pstamp.on.k-open { background: #B8F34A; } .pf-pstamp.on.k-seventh { background: #3DE0FF; } .pf-pstamp.on.k-color { background: #FFD84D; }
.pf-pstamp.on.k-barre { background: #FF4FA3; } .pf-pstamp.on.k-other { background: #8A7CFF; }
.pf-pstamp.next { opacity: 1; border-color: var(--accent); color: var(--accent-ink); animation: pf-next 1.6s ease-in-out infinite; }
@keyframes pf-next { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.pf-pnext { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--bg); }
.pf-pnext > span { flex: 1; display: flex; flex-direction: column; } .pf-pnext small { font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .08em; color: var(--muted); }
.pf-pnext b { font: 700 22px var(--display); } .pf-pnext .btn { flex: none; width: auto; padding: 0 20px; }
.pf-stampsheet { text-align: center; } .pf-ss-dg { display: grid; place-items: center; margin-bottom: 4px; }
.pf-stats { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pf-stat { background: linear-gradient(180deg, var(--card-2), var(--card)); border-radius: 20px; padding: 14px; }
.pf-stat-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-stat-h b { font: 700 30px var(--display); } .pf-stat-h span { font-weight: 700; color: var(--muted); }
.pf-stat > p { margin: 10px 0 0; font-weight: 700; color: var(--muted); font-size: 14px; }
.pf-wbars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 90px; align-items: end; }
.pf-wbars > div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.pf-wbars i { width: 100%; height: max(4px, var(--h)); border-radius: 8px; background: var(--copper); }
.pf-wbars small { font: 800 12px var(--body, Nunito, sans-serif); color: var(--muted); }
.pf-chg { display: grid; grid-template-columns: max-content 1fr auto; align-items: center; gap: 10px; min-height: 44px; }
.pf-chg span { font-weight: 800; white-space: nowrap; } .pf-chg i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--strings, var(--accent)) var(--w), var(--bg) var(--w)); }
.pf-drill { border: 0; border-radius: 12px; padding: 8px 12px; min-height: 36px; background: var(--copper); color: var(--on-accent); font: 700 14px var(--display); box-shadow: var(--copper-hi), var(--copper-glow); }
@media (prefers-reduced-motion: reduce) { .pf-pstamp.next { animation: none; } }
.upn-c.again { background: #8A7CFF; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: #1B1838; } /* 4.19.0 */

/* ---------- The song page, 4.20.0: one meta line, the recording beside Play, Play says what plays ---------- */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app.viewer > .metarow { flex-wrap: wrap; overflow: visible; margin-top: 8px; gap: 6px; }
.app.viewer > .metarow .stat { min-height: 32px; padding: 4px 12px; font-size: 13px; box-shadow: none; }
.play .pw-with { display: block; font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .08em; opacity: .8; margin-top: 1px; }
.tl-prac { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 2px 0; padding: 10px 12px; border-radius: 16px; background: linear-gradient(180deg, var(--card-2), var(--card)); }
.tl-prac .ml { display: flex; flex-direction: column; font: 700 15px var(--display); color: var(--fg); }
.tl-prac .ml small { font: 700 12px var(--body, Nunito, sans-serif); color: var(--muted); }

/* ---------- The Recording sheet (4.20.0) ---------- */
.panel.rs > .cover-head { margin: 0; border-radius: 0; padding-top: 22px; } /* the cover sat 16px outside the sheet */
/* 4.42.7: the handle sits on the header, so its gradient starts at the sheet's top edge and follows the rounded corners */
.panel.rs > .grab { position: absolute; top: 8px; left: 0; right: 0; margin: 0 auto; z-index: 1; }
.rs-head .rs-art { width: 84px; height: 84px; border-radius: 16px; }
.rs-head .rs-t { font: 700 20px/1.15 var(--display); } .rs-head .rs-a { font-weight: 700; }
.rs-x { flex: none; align-self: flex-start; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--card-2, var(--card)); color: var(--fg); display: grid; place-items: center; }
.rs-x svg { width: 18px; height: 18px; }
.rs-body { padding: 0 16px calc(16px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; }
.rs-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-facts span { padding: 6px 12px; border-radius: 999px; background: var(--card-2, var(--card)); font: 800 13px var(--body, Nunito, sans-serif); color: var(--fg); }
.rs-body .rs-look { margin-top: 0; }
.rs-h { font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .08em; color: var(--muted); margin-top: 4px; }
.rs-choice { display: flex; flex-direction: column; gap: 10px; }
.rs-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border-radius: 18px; border: 1px solid var(--bronze-line); background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg); text-align: left; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.rs-opt.on { border-color: var(--accent); box-shadow: var(--copper-hi), var(--copper-glow); background: var(--accent-soft); }
.rs-oi { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--card-2, var(--bg)); color: var(--accent-ink); }
.rs-oi svg { width: 20px; height: 20px; }
.rs-ot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rs-ot b { font: 700 16px var(--display); } .rs-ot small { font-weight: 700; color: var(--muted); font-size: 13px; }
.rs-ok { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--copper); color: var(--on-accent); visibility: hidden; }
.rs-opt.on .rs-ok { visibility: visible; } .rs-ok svg { width: 16px; height: 16px; }
.rs-opt:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.rs-hear { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.rs-hear svg { width: 16px; height: 16px; }
.rs-body .rs-row { margin: 0; padding: 0; border: 0; }
.rs-change { align-self: center; border: 0; background: none; min-height: 44px; font: 700 15px var(--display); color: var(--accent-ink); }

/* ---------- Songbook top (4.20.0): the nudge as a card; 4.20.1: filters as one segmented row ---------- */
.today { margin: 6px 0 12px; }
.today .nudge { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); text-align: left; }
.today .nudge.k-streak { background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: #1B1838; }
.today .nudge.k-streak .ri-guitar .ri-bd, .today .nudge.k-streak .ri-guitar .ri-hd { fill: #fff; }
.today .nudge.k-streak .ri-guitar .ri-neck { fill: #fff; } .today .nudge.k-streak .ri-guitar .ri-lip { fill: rgba(255,255,255,.55); }
.today .nudge .ng-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.18); color: var(--accent-ink); }
.today .nudge.k-streak .ng-ic { color: inherit; }
.today .nudge > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.today .nudge small { font: 800 12px var(--body, Nunito, sans-serif); letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.today .nudge b { font: 700 18px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today .nudge:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
/* 4.20.1: one segmented row that always fits; the chosen part is filled with its lip showing */
:root[data-look] #chips { background: linear-gradient(180deg, var(--card-2), var(--card)); border-radius: 16px; padding: 4px; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); margin-bottom: 4px; }
:root[data-look] #chips .chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 8px; border: 0; border-radius: 12px; background: none; box-shadow: none; color: var(--muted); font: 700 15px var(--display); white-space: nowrap; }
:root[data-look] #chips .chip::before { display: none; }
:root[data-look] #chips .chip[data-f="fav"] { flex: 0 0 52px; }
:root[data-look] #chips .chip .i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
:root[data-look] #chips .chip small { font: 800 12px var(--sans); background: var(--card-2); border-radius: 999px; padding: 1px 7px; }
:root[data-look] #chips .chip.on { background: var(--copper); color: var(--on-accent); box-shadow: var(--copper-hi), var(--copper-glow); }
:root[data-look] #chips .chip.on small { background: rgba(255,255,255,.35); }
.sets-btn { height: 44px; padding: 0 12px; border-radius: 14px; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.sets-btn .i { width: 20px; height: 20px; }
.sets-btn.on { background: var(--copper); color: var(--on-accent); box-shadow: var(--copper-hi), var(--copper-glow); }

/* ---------- The neck (4.21.0): the lesson of the day and your skills in three bars ---------- */
.ls-card { padding: 18px; margin-top: 14px; }
.ls-top { display: flex; gap: 10px; align-items: center; }
.ls-top > div { flex: 1; min-width: 0; }
.ls-top .louie { flex: none; }
.ls-cap { display: block; font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.ls-card.finished .ls-cap { color: var(--good); }
.ls-t { display: block; font: 700 24px/1.1 var(--display); margin-top: 4px; }
.ls-card .pf-line { margin-top: 4px; }
.ls-steps { margin-top: 10px; }
.ls-step { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 0; border: 0; border-bottom: 2px solid var(--hair); background: none; color: var(--fg); text-align: left; }
.ls-step:last-child { border-bottom: 0; }
.ls-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--sans); background: var(--card-2); color: var(--muted); box-shadow: inset 0 0 0 2px var(--rim); }
.ls-step.now .ls-n { background: var(--copper); color: var(--on-accent); box-shadow: none; }
.ls-step.done .ls-n { background: var(--good); color: #fff; box-shadow: none; }
.ls-step.done .ls-n .i { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 3; }
.ls-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ls-tx b { font: 700 17px var(--display); }
.ls-step.done .ls-tx b { color: var(--muted); text-decoration: line-through; }
.ls-tx small { font: 700 13px var(--sans); color: var(--muted); }
.ls-min { font: 800 12px var(--sans); color: var(--muted); white-space: nowrap; }
.ls-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ls-tags span { font: 800 13px var(--sans); border-radius: 999px; padding: 4px 10px; }
.ls-xp { background: var(--good-soft); color: var(--good); }
.ls-more { background: var(--accent-soft); color: var(--accent-ink); }
.ls-skills { display: block; width: 100%; padding: 14px 16px; margin-top: 14px; text-align: left; color: var(--fg); border: 0; }
.ls-sk-h { display: flex; align-items: center; }
.ls-sk-h .ls-cap { flex: 1; color: var(--muted); }
.ls-all { display: inline-flex; align-items: center; gap: 2px; font: 700 14px var(--sans); color: var(--accent-ink); }
.ls-all .chev { width: 14px; height: 14px; }
.ls-bars { display: flex; gap: 14px; margin-top: 10px; }
.ls-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ls-bar small { font: 800 12px var(--sans); color: var(--muted); }
.ls-bar > span { height: 8px; border-radius: 4px; background: var(--card-2); overflow: hidden; }
.ls-bar i { display: block; height: 100%; border-radius: 4px; }
.ls-bar b { font: 800 12px var(--sans); }

/* ---------- Search, focused (4.22.0): two big buttons, then your last songs as cards ---------- */

/* ---------- Your changes (4.23.0): in Rehearse ---------- */
.rh-yc { margin: 14px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.rh-yct { display: flex; gap: 12px; align-items: center; }
.rh-yct .louie { flex: none; }
.rh-yct b { display: block; font: 700 22px var(--display); }
.rh-yct small { font: 700 14px var(--sans); color: var(--muted); }
.rh-ycr { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.rh-ycx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rh-ycx b { font: 700 22px var(--display); white-space: nowrap; }
.rh-ycx b i { font-style: normal; color: var(--accent-ink); }
.rh-ycx small { font: 700 13px var(--sans); color: var(--muted); }
.rh-ycm { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.rh-ycm > span { flex: 1; height: 8px; border-radius: 4px; background: var(--card-2); overflow: hidden; }
.rh-ycm > span i { display: block; height: 100%; background: var(--copper); }
.rh-ycm em { font: 800 12px var(--sans); font-style: normal; color: var(--muted); white-space: nowrap; }
/* 4.29.2: these lost to the version 4 button rules (the Drill buttons stretched, Drill all three shrank) */
:root .rh-yc .btn.rh-ycd, :root[data-look] .rh-yc .btn.rh-ycd { flex: none; width: auto; min-width: 0; height: 42px; padding: 0 18px; font-size: 16px; }
.rh-ycs { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; padding: 12px 16px; border-radius: 16px; background: var(--card-2); font: 700 14px var(--sans); }
.rh-ycs .ls-n { background: var(--good); color: #fff; box-shadow: none; }
.rh-ycs .ls-n .i { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 3; }
:root .rh-yc .btn.rh-ycall, :root[data-look] .rh-yc .btn.rh-ycall { width: 100%; height: 56px; min-height: 56px; font-size: 18px; }

/* 4.24.0: the hidden switch that gives an iPhone its haptic tick */
.hap { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* 4.24.0: all six in tune, a small party over the headstock */
#tn-stage { position: relative; }
.tn-party { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }
.tn-party i { position: absolute; left: 50%; top: 55%; width: 10px; height: 14px; border-radius: 3px; opacity: 0; animation: tn-pop 1.4s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes tn-pop { 0% { opacity: 1; transform: translate(-50%, 0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(var(--y) + 120px)) rotate(var(--r)); } }
.tn-louie { position: absolute; bottom: 4px; right: 8px; animation: tn-louie .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes tn-louie { from { transform: translateY(40px) scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tn-party i { display: none; } .tn-louie { animation: none; } }

/* 4.25.0 Tuner: one pill with the instrument and tuning in a menu, the note big, the headstock in colour */
.tn-menubtn { height: 44px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--card-2); color: var(--fg); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); display: inline-flex; align-items: center; gap: 8px; font: 700 16px var(--display, var(--sans)); cursor: pointer; }
.tn-menubtn .chev { width: 12px; height: 12px; transform: rotate(90deg); color: var(--muted); }
.tn-top { position: relative; }
.tn-menu { position: absolute; z-index: 6; left: 0; right: 0; top: 100%; margin: 6px 0 0; padding: 12px; border-radius: 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32), 0 14px 30px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 10px; }
.tn-menu[hidden] { display: none; }
.tn-seg { display: flex; gap: 4px; background: var(--card-2); border-radius: 16px; padding: 4px; }
.tn-opt { flex: 1; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: 700 15px var(--display, var(--sans)); cursor: pointer; }
.tn-opt.on { background: var(--copper); color: var(--on-accent); box-shadow: var(--copper-hi), var(--copper-glow); }
.tn-menurow { position: relative; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 14px; background: var(--card-2); }
.tn-menurow[hidden] { display: none; }
.tn-menurow b { flex: 1; text-align: right; font: 700 16px var(--display, var(--sans)); }
.tn-menurow .chev { width: 12px; height: 12px; transform: rotate(90deg); color: var(--muted); }
.tn-menurow select { position: absolute; inset: 0; opacity: 0; font-size: 16px; width: 100%; }
.tuner2 { --tn-face: #9A5B34; --tn-side: #7A4426; --tn-vein: #5E3318; --tn-key: #F1E3C2; --tn-keylip: #C9B48A; --tn-post: #F1E3C2; --tn-ink: #2A1A0F; }
.tuner2[data-kind="electric"] { --tn-face: var(--lv-body); --tn-side: var(--lv-shade); --tn-key: #DDE2EA; --tn-keylip: #98A1B0; --tn-post: #EFEAD8; }
body[data-wear="pink"] .tuner2 { --lv-body: #FF4FA3; --lv-shade: #D93A8A; --lv-hi: #FF84C0; }
body[data-wear="teal"] .tuner2 { --lv-body: #0F8B8D; --lv-shade: #0B6F71; --lv-hi: #3BA7A9; }
body[data-wear="tweed"] .tuner2 { --lv-body: #D8B571; --lv-shade: #B08A48; --lv-hi: #EBD39C; }
body[data-wear="black"] .tuner2 { --lv-body: #2A2B33; --lv-shade: #16171C; --lv-hi: #474956; }
body[data-wear="mint"] .tuner2 { --lv-body: #6FD3B8; --lv-shade: #45B394; --lv-hi: #A6E8D6; }
body[data-wear="gold"] .tuner2 { --lv-body: #E8B828; --lv-shade: #C2961A; --lv-hi: #F6D96A; }

/* 4.26.0 Songbook, slimmer: one Today strip that pages sideways, no sets shelf, a count and sort line */
.today { margin: 6px 0 10px; position: relative; }
.tdy { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 0 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tdy::-webkit-scrollbar { display: none; }
.today .tdy-i { flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box; height: 58px; min-height: 0; padding: 0 14px; display: flex; flex-direction: row; align-items: center; gap: 12px; border: 0; border-radius: 18px; text-align: left; position: relative; }
.today .tdy-i .ng-ic, .tdy-ic { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,.2); }
.tdy-ic svg { width: 20px; height: 20px; }
.today .tdy-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font: inherit; }
.today .tdy-t small { font: 800 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today .tdy-t b { font: 700 17px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today .tdy-t em { font: 700 12.5px var(--sans); font-style: normal; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today .upn-c { max-width: none; }
.today .upn-c .tdy-t b { max-width: 100%; }
.today .upn-c.again { color: #1B1838; }
.today .nudge { padding: 0 14px; }
.today .upnext-i { background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); padding: 0; }
.tdy-open { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 64px 0 14px; border: 0; background: none; color: inherit; text-align: left; border-radius: 18px; }
.upnext-i .tdy-ic { color: var(--accent-ink); background: var(--accent-soft); }
.upnext-i .un-cd { margin: 0; font-size: 18px; flex: none; }
.upnext-i .un-play { position: absolute; right: 10px; top: 6px; width: 46px; height: 46px; }
.tdy-dots { display: flex; justify-content: center; gap: 0; margin-top: -2px; }
.tdy-dot { width: 26px; height: 22px; border: 0; background: none; display: grid; place-items: center; padding: 0; }
.tdy-dot i { width: 7px; height: 7px; border-radius: 4px; background: var(--rim); transition: width .2s, background .2s; }
.tdy-dot.on i { width: 18px; background: var(--copper); }
@media (prefers-reduced-motion: reduce) { .tdy-dot i { transition: none; } }
.lib-count { display: flex; align-items: center; justify-content: space-between; margin: 12px 4px 6px; font: 700 14px var(--sans); color: var(--muted); }
.lib-count .sortby { font: 700 15px var(--display); color: var(--fg); }

/* 4.27.0 Get the song: put aside instead of lost, Add in thumb reach, the recording as cards */
.gs .ph h2 { flex: 1; text-align: center; }
.gs-down svg { transform: rotate(90deg); }
.gs-dock { flex: none; padding: 12px 16px calc(14px + var(--safe-b)); background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: 0 -10px 20px color-mix(in srgb, var(--card) 85%, transparent); display: flex; flex-direction: column; gap: 8px; }
.gs-dock[hidden] { display: none; }
.gs-dock > .btn { width: 100%; height: 56px; font-size: 18px; }
.gs-dock2 { display: flex; justify-content: space-between; padding: 0 6px; }
.gs-dock2 .tb { min-height: 44px; }
.gs-dock2 #gs-no { color: var(--muted); }
.gs-dock-note { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.gs .pbody { padding-bottom: 16px; }
.gs-hear { width: 46px; height: 46px; flex: none; margin-left: auto; border: 0; border-radius: 50%; background: var(--card-2); color: var(--fg); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); display: grid; place-items: center; }
.gs-hear svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.gs-hear.on { background: var(--copper); color: var(--on-accent); box-shadow: var(--copper-hi), var(--copper-glow); }
.gs-can { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 16px; background: var(--card-2); }
.gs-can-ic { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--rim); color: var(--fg); }
.gs-can.ok .gs-can-ic { background: var(--good); color: var(--on-accent, #14110d); }
.gs-can-ic svg { width: 16px; height: 16px; }
.gs-can-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gs-can-t b { font: 700 16px var(--display); }
.gs-can-t small { font: 700 13px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-can-tag, .gs-best { flex: none; font: 800 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 9px; background: var(--good); color: var(--on-accent, #14110d); }
.gs .seg { margin-top: 12px; }
button.gs-pick { display: flex; width: 100%; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 0 14px; min-height: 48px; border-radius: 14px; background: var(--card-2); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); font-size: 14.5px; text-align: left; }
button.gs-pick > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.gs-pick b { font-family: var(--display); }
button.gs-pick em { font: 700 15px var(--display); font-style: normal; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 2px; }
button.gs-pick:disabled { opacity: 1; }
.gs-sheet { position: relative; }
p.gs-vh { margin: 2px 2px 14px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.gs .gs-ver { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 0 14px; margin-bottom: 12px; border: 0; border-radius: 18px; background: var(--card-2); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); text-align: left; }
.gs .gs-ver.on { background: var(--card-2); box-shadow: 0 0 0 3px var(--accent), inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.gs-ver-cv { width: 48px; height: 48px; border-radius: 14px; flex: none; }
.gs-ver-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gs .gs-ver-t b { font: 700 16px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-ver-t small { display: flex; align-items: center; gap: 8px; font: 700 13px var(--sans); color: var(--muted); }
.gs-ver-t em { font: 800 12px var(--sans); font-style: normal; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; background: var(--rim); color: var(--fg-2); }
.gs-ver-t em.timed { background: var(--good-soft); color: var(--good); }
.gs-none { align-self: flex-start; min-height: 44px; color: var(--fg); }
/* the bar above the search bar while a song waits to be added */
.gs-kept { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + var(--safe-b)); width: min(496px, calc(100% - 24px)); z-index: 19; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: 0 0 0 2px var(--accent), inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32), 0 10px 24px rgba(0,0,0,.18); animation: up .35s cubic-bezier(.2,1.15,.3,1); }
body.searching .gs-kept { display: none; }
.gs-kept-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: none; color: var(--fg); text-align: left; padding: 0; min-height: 44px; }
.gs-kept-art { width: 44px; height: 44px; border-radius: 12px; flex: none; overflow: hidden; display: grid; place-items: center; background: var(--card-2); color: var(--accent-ink); }
.gs-kept-art img { width: 100%; height: 100%; object-fit: cover; }
.gs-kept-art svg { width: 20px; height: 20px; }
.gs-kept-t { min-width: 0; display: flex; flex-direction: column; }
.gs-kept-t b { font: 700 16px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-kept-t small { font: 700 12.5px var(--sans); color: var(--muted); }
.gs-kept-add { flex: none; height: 44px; padding: 0 18px; }
@media (prefers-reduced-motion: reduce) { .gs-kept { animation: none; } }

/* 4.28.0 Play next: level on top, cards in between, Louie digging through a crate while it looks */
.nx-top { flex: none; padding: 0 16px 6px; }
.nx-top .seg { width: 100%; }
.nx-top .seg button { flex: 1; height: 40px; }
.nx-sub { margin: 8px 2px 0; font: 700 13px var(--sans); color: var(--muted); }
.nx-cards { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
.nx-card { background: linear-gradient(180deg, var(--card-2), var(--card)); border-radius: 20px; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); padding: 12px; animation: nx-in .45s cubic-bezier(.2,1.1,.3,1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes nx-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.nx-row1 { display: flex; align-items: center; gap: 12px; }
.nx-cv { position: relative; width: 56px; height: 56px; flex: none; padding: 0; border: 0; background: none; border-radius: 12px; }
.nx-cv img, .nx-tile { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; object-fit: cover; font: 700 23px var(--display); color: rgba(255,255,255,.92); }
.nx-play { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); display: grid; place-items: center; color: var(--fg); }
.nx-play svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.nx-play.on { background: var(--copper); color: var(--on-accent); }
.nx-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nx-tt b { font: 700 18px var(--display); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-tt span { font: 700 13px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-tt .nx-why { font: 600 12.5px var(--sans); color: var(--fg-2); margin-top: 2px; }
.nx .nx-learn { flex: 0 0 auto; width: auto; min-width: 0; height: 42px; padding: 0 16px; border-radius: 12px; font-size: 16px; }
.nx-strip { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 6px 10px; border-radius: 14px; background: var(--card-2); }
.nx-shape { flex: none; display: grid; place-items: center; }
.nx-shape svg { width: 46px; height: auto; }
.nx-st { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nx-strip .nx-ch { margin: 0; align-items: baseline; gap: 6px; }
.nx-strip .nx-ch small { font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.nx .nx-strip .nx-ch span, :root[data-look] .nx .nx-strip .nx-ch span.new { padding: 0; border: 0; background: none; box-shadow: none; font: 700 20px var(--display); color: var(--fg); }
.nx-strip em { font: 700 12px var(--sans); font-style: normal; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-opens { flex: none; font: 800 12px var(--sans); color: var(--good); background: var(--good-soft); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.gs-teach { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); font: 700 13.5px var(--sans); line-height: 1.4; color: var(--fg); }
/* the crate */
.nx .easy-wait.nx-dig { flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 6px; color: var(--fg); font-size: 17px; }
.nx-crate-art { position: relative; width: 300px; height: 190px; }
.nx-louie { position: absolute; right: 18px; top: 10px; }
.nx-louie .louie { animation: nx-bob .8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes nx-bob { 50% { transform: translateY(5px) rotate(-2deg); } }
.nx-recs { position: absolute; left: 44px; top: 54px; width: 96px; height: 96px; perspective: 400px; }
.nx-rec { position: absolute; inset: 0; border-radius: 8px; display: grid; place-items: center; font: 700 30px var(--display); font-style: normal; color: #fff; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); transform-origin: 50% 100%; animation: nx-flip 3.2s cubic-bezier(.5,0,.3,1) infinite; animation-delay: var(--d); }
@keyframes nx-flip { 0%, 8% { transform: rotateX(0) translateY(0); opacity: 1; } 22% { transform: rotateX(0) translateY(-46px); opacity: 1; } 34%, 100% { transform: rotateX(68deg) translateY(-6px); opacity: 0; } }
.nx-crate { position: absolute; left: 20px; top: 116px; width: 170px; height: 74px; border-radius: 12px; background: #B98C00; box-shadow: inset 0 -14px 0 #8f6c00; z-index: 20; }
.nx-line { font: 700 17px var(--sans); text-align: center; }
.nx-ghost { height: 118px; margin-top: 12px; border-radius: 20px; background: var(--card-2); position: relative; overflow: hidden; }
.nx-ghost + .nx-ghost { opacity: .6; }
.nx-ghost::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card) 70%, transparent), transparent); animation: nx-sh 1.6s infinite; }
@keyframes nx-sh { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .nx-card, .nx-louie .louie, .nx-ghost::after { animation: none; } .nx-rec { animation: none; } .nx-rec:not(:first-child) { display: none; } }

/* 4.29.0 Play together: your part, and one clap starts both phones */
.panel.pt { padding: 6px 20px calc(18px + var(--safe-b)); }
.pt-head { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.pt-head b { display: block; font: 700 24px var(--display); color: var(--fg); }
.pt-head span { font: 700 14px var(--sans); color: var(--muted); }
.pt-cap { margin-top: 16px; font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pt-parts { margin-top: 8px; width: 100%; }
.pt-parts button { flex: 1; height: 42px; }
.pt-note { margin: 6px 0 0; font: 700 13px var(--sans); color: var(--muted); line-height: 1.4; }
.pt-start { margin-top: 8px; padding: 14px; display: flex; gap: 12px; align-items: center; border-radius: 18px; background: var(--card-2); font: 700 14px/1.35 var(--sans); color: var(--fg); }
.pt-start svg { width: 40px; height: 40px; flex: none; fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; }
.pt-start .pt-halo { fill: var(--accent); opacity: .15; stroke: none; }
.pt-start.on .pt-halo { animation: pt-pulse 1.2s ease-in-out infinite; transform-origin: 20px 20px; }
@keyframes pt-pulse { 50% { opacity: .35; transform: scale(1.12); } }
.pt-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-top: 18px; }
.pt-btns .btn { height: 56px; font-size: 16px; }
.pt-btns .btn.primary { font-size: 18px; }
.pt-btns .btn.on { background: var(--card-2); color: var(--fg); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.mel-notes { display: block; margin-top: 2px; font: 700 13px var(--mono, monospace); letter-spacing: .04em; color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .pt-start.on .pt-halo { animation: none; opacity: .3; } }
/* 4.29.2 (Graham): no blurry glow on the tuner's note; in tune is a flat colour. All in tune is one
   centred line with a check, and the tuning under it in the normal font. */
.tn-note.glow b, .tn-note.done.glow b { text-shadow: none; }
.tn-note.glow b { color: var(--good); }
.tn-read:has(.tn-note.done) { grid-template-columns: 1fr; text-align: center; }
.tn-read:has(.tn-note.done) .tn-sayrow { display: none; }
.tn-read:has(.tn-note.done) .tn-note { grid-row: auto; min-height: 0; align-items: center; gap: 10px; }
.tn-note.done b { font: 700 34px var(--display); color: var(--good); }
.tn-note.done::before { content: ""; width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 70%, #000); }
.tn-read:has(.tn-note.done) .tn-c { grid-column: 1; font: 700 14px var(--sans); margin-top: 6px; }

/* ==========================================================================
   One button and control system (4.30.0)
   Buttons: main 56, row action 42, chip 32. Segmented: one look, two sizes.
   Outlines: flat card colour on a darker lip, no thin rules.
   ========================================================================== */
:root[data-look] .btn { height: 56px; min-height: 56px; font-size: 18px; }
:root[data-look] .btn.sm, :root[data-look] .gs-show, :root[data-look] .ce-add { height: 42px; min-height: 42px; padding: 0 16px; font-size: 16px; }
:root[data-look] .tn-chip, :root[data-look] .ce-chip, :root[data-look] .skc { height: 32px; min-height: 32px; }
/* segmented controls: full width 48 track, compact 36 track */
:root[data-look] .seg { min-height: 48px; box-sizing: border-box; align-items: stretch; }
:root[data-look] .seg button { min-height: 40px; height: auto; font-size: 15px; }
:root[data-look] .seg.mini { min-height: 36px; height: auto; }
:root[data-look] .seg.mini button { min-height: 28px; height: auto; font-size: 13px; padding: 0 12px; }
:root[data-look] .nx-top .seg button, :root[data-look] .nx-ctl .seg button, :root[data-look] .pt-parts button { height: auto; min-height: 40px; }
/* chips and small cards: flat card colour on a lip, no thin outline */
:root[data-look] .cs-meta span, :root[data-look] .nx-ch span, :root[data-look] .hist div, :root[data-look] .ce-alt,
:root[data-look] .de-lv, :root[data-look] .gs-ver, :root[data-look] .ce-fitb, :root[data-look] .skcmp button, :root[data-look] .sknb,
:root[data-look] .findcard, :root[data-look] .cs-chart, :root[data-look] .ns-f, :root[data-look] .tn-chip,
:root[data-look] .ce-chip, :root[data-look] .skc, :root[data-look] .ask-pv, :root[data-look] .cvo i, :root[data-look] .ecard,
:root[data-look] .tile.ftile, :root[data-look] .rs-listen {
  border: 0; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .cs-meta span { margin-bottom: 3px; }
:root[data-look] .ce-alt.on, :root[data-look] .de-lv.on, :root[data-look] .gs-ver.on { box-shadow: 0 0 0 3px var(--accent), inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); background: linear-gradient(180deg, var(--card-2), var(--card)); }
/* lists of places to go: one 56 tall row */
:root[data-look] .set { min-height: 56px; }

/* ==========================================================================
   The song screen, details from the title (4.31.0)
   ========================================================================== */
.shead .sh-cover { position: relative; flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: var(--tile, var(--accent)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 60%, #000); display: grid; place-items: center; }
.shead .sh-cover img { width: 100%; height: 100%; object-fit: cover; }
.shead .sh-cover.rec:not(.on) img { filter: saturate(.7); }
.shead .sh-l { font: 700 26px var(--display); color: #fff; text-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.shead .sh-cover .rc-look { position: absolute; top: 4px; right: 4px; left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 2px var(--card); }
.app.viewer .shead button.meta { display: flex; width: 100%; min-height: 24px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.shead .meta .sh-ab { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-ink); }
.shead .meta .sh-ab svg { width: 14px; height: 14px; }
.app.viewer .player .tl.tools { width: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; }
.app.viewer .player .tl.tools .tl-w { font: 700 13px var(--display); }
.app.viewer .player .tl.tools svg { width: 22px; height: 22px; }
/* About this song */
.ab .rs-body { padding-bottom: 8px; }
.ab-pv { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); display: grid; place-items: center; align-self: center; }
.ab-pv svg { width: 20px; height: 20px; }
.ab-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 12px; }
.ab-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--card-2); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); text-align: left; min-width: 0; }
.ab-cap { font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ab-tile b { font: 700 20px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-tile b small { font: 700 12px var(--sans); color: var(--muted); }
button.ab-tile b { color: var(--accent-ink); }
.ab-swing { margin: -4px 0 10px; font: 700 13px var(--sans); color: var(--muted); }
.ab .rs-look { margin-bottom: 12px; }
.ab .ab-mode { width: 100%; margin: 6px 0 8px; }
.ab-rows { display: flex; flex-direction: column; }
.ab-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 4px; border: 0; border-bottom: 2px solid var(--hair); background: none; color: var(--fg); text-align: left; width: 100%; }
.ab-row:last-child { border-bottom: 0; }
.ab-ic { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.ab-ic svg { width: 18px; height: 18px; }
.ab-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ab-rt b { font: 700 16px var(--display); } .ab-rt small { font: 700 13px var(--sans); color: var(--muted); }
.ab-chev { width: 16px; height: 16px; color: var(--muted); flex: none; }
.ab .rs-row { margin: 0 0 6px; }
.ab-foot .btn { flex: 1; }
.shead .meta .sh-ab { flex-basis: 100%; }
.rs-head .rs-art.ab-lt { background: var(--tile); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 60%, #000); }
.rs-head .rs-art.ab-lt span { font: 700 40px var(--display); color: #fff; }

/* ==========================================================================
   Tools in three tabs (4.32.0): rows, not tiles; the tabs at the bottom
   ========================================================================== */
.menu.tools3 { display: flex; flex-direction: column; max-height: min(86vh, 720px); }
.menu.tools3 .tl-head { padding: 4px 4px 0; }
.menu.tools3 .t3-song { font: 700 14px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.menu.tools3 .t3-panel { flex: 1; overflow-y: auto; min-height: 380px; }
.menu.tools3 .t3-panel[hidden] { display: none; }
.menu.tools3 .tl-h { margin: 12px 4px 4px; }
.menu.tools3 .mrow.t3 { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; height: auto; margin: 0; padding: 6px 4px; border: 0; border-bottom: 2px solid var(--hair); border-radius: 0; background: none; box-shadow: none; color: var(--fg); text-align: left; box-sizing: border-box; }
.menu.tools3 .mrow.t3:last-of-type { border-bottom: 0; }
.menu.tools3 .mrow.t3 .mi { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); margin: 0; }
:root:is([data-look="neon"], [data-look="headliner"]) .menu.tools3 .mrow.t3 .mi { color: var(--accent-ink); }
.menu.tools3 .mrow.t3 .mi svg { width: 18px; height: 18px; }
.menu.tools3 .mrow.t3 .ml { flex: 1; min-width: 0; display: flex; flex-direction: column; font: 700 16px var(--display); white-space: normal; position: relative; }
.menu.tools3 .mrow.t3 .ml small { font: 700 13px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu.tools3 .mrow.t3 .t3c { width: 16px; height: 16px; color: var(--muted); flex: none; }
.menu.tools3 .mrow.t3 .sb { flex: none; width: 36px; height: 36px; border-radius: 12px; border: 0; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); display: grid; place-items: center; }
.menu.tools3 .mrow.t3 .t3v { flex: none; min-width: 52px; text-align: center; font: 700 16px var(--display); color: var(--fg); border: 0; background: none; padding: 0; }
.menu.tools3 .mrow.t3.size { border-bottom: 0 !important; padding: 6px 4px !important; min-height: 58px; width: 100%; flex: none; gap: 12px; }
.menu.tools3 .mrow.t3.size .ml { font: 700 16px var(--display); color: var(--fg); }
.menu.tools3 .mrow.t3.tl-lines { margin: 0; font: inherit; justify-content: flex-start; }
.menu.tools3 .mrow.t3.tl-lines .seg.mini button { min-width: 40px; }
.menu.tools3 .toggle { pointer-events: none; }
.menu.tools3 .t3-note { margin: 10px 4px 0; font: 700 13px var(--sans); color: var(--muted); }
.menu.tools3 .t3-tabs { flex: none; width: 100%; margin: 10px 0 0; }
.menu.tools3 .t3-tabs button { position: relative; flex: 1; }
.menu.tools3 .t3-tabs .newdot { position: absolute; top: 6px; right: 10px; }
.menu.tools3 .t3l { display: inline-flex; align-items: center; gap: 6px; }
.menu.tools3 .t3l .newdot { position: static; margin: 0; }

/* ==========================================================================
   Rehearse as one page (4.33.0)
   ========================================================================== */
.rh-lesson { display: flex; flex-direction: column; gap: 12px; }
.rh-lesson .ls-top { align-items: flex-start; }
.rh-segs { display: flex; gap: 8px; }
.rh-seg { flex: 1; height: 22px; padding: 7px 0; border: 0; background: none; display: block; }
.rh-seg i { display: block; height: 8px; border-radius: 4px; background: var(--card-2); box-shadow: inset 0 0 0 2px var(--hair); }
.rh-seg.done i { background: var(--copper); box-shadow: none; }
.rh-seg.now i { background: color-mix(in srgb, var(--accent) 35%, var(--card-2)); box-shadow: none; }
.rh-lesson .rh-lgo { width: 100%; flex: none; }
.rh-yc .rh-yct small { display: block; }
.rh-ycr.ok { opacity: .7; }
.rh-scb { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font: 800 12px var(--sans); font-style: normal; letter-spacing: .05em; text-transform: uppercase; vertical-align: 4px; }
.rh-ycr.ok .rh-scb { background: var(--good-soft, var(--card-2)); color: var(--good); }
.rh-more { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 16px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); font: 700 15px var(--display); text-align: left; }
.rh-more .rh-n { margin-left: auto; min-width: 26px; height: 26px; border-radius: 13px; }
.rh-more .chev { width: 14px; height: 14px; color: var(--muted); flex: none; }
.rh-yc-none .rh-yct small { margin-top: 4px; }
.rh .ls-skills { margin-top: 14px; }
.rh-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.rh-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 104px; padding: 12px; border: 0; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); text-align: left; }
.rh-tile b { font: 700 15px/1.2 var(--display); }
.rh-tile .rh-ic { width: 38px; height: 38px; border-radius: 12px; }
.rh-tile .rh-ic svg { width: 20px; height: 20px; }
.rh-tile:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
/* Your changes as one card (the board): rows inside it, split by a line */
.rh .rh-yc { padding: 16px; border-radius: 22px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); gap: 0; }
.rh .rh-yc .rh-yct { margin-bottom: 6px; }
.rh .rh-yc .rh-yct b { font-size: 20px; }
.rh .rh-yc .rh-ycr { padding: 12px 0; border-radius: 0; background: none; box-shadow: none; border-bottom: 2px solid var(--hair); }
.rh .rh-yc .rh-ycr:last-of-type { border-bottom: 0; }
.rh .rh-yc .rh-ycs, .rh .rh-yc .rh-more { margin: 8px 0 0; }
.rh .rh-yc .rh-pairs { margin-top: 8px; }
.rh .rh-yc .rh-ycall { margin-top: 12px; }
.rh .rh-yc .btn.rh-ycd { min-height: 42px; height: 42px; }

/* ==========================================================================
   The Road's stops as guitar picks (4.34.0): flat colour on a darker lip, a shine,
   a halo behind the next one, and its flag beside it that starts it
   ========================================================================== */
.rd-path { gap: 18px; }
.rd-node, .rd-node.big, .rd-node.now, .rd-node.open, .rd-node.locked, .rd-node.box.done { width: 72px; height: 72px; border-radius: 0; background: none; box-shadow: none; overflow: visible; color: #fff; }
.rd-node.big { width: 84px; height: 84px; }
.rd-node.now { width: 88px; height: 88px; }
.rd-node::after { display: none; }
.rd-node:active, .rd-node.now:active { transform: translateY(4px); box-shadow: none; }
.rd-node .rd-pk { position: absolute; inset: -10%; width: 120%; height: 120%; overflow: visible; }
.rd-node { --pk: var(--accent); --pkd: var(--accent-deep); }
.rd-node.done { --pk: var(--good); --pkd: color-mix(in srgb, var(--good) 72%, #000); }
.rd-node.now { --pk: var(--streak); --pkd: var(--streak-deep); }
.rd-node.open { --pk: var(--strings); --pkd: var(--strings-deep); }
.rd-node.locked { --pk: var(--locked); --pkd: var(--locked-deep); }
.rd-node.box.done { --pk: var(--fans); --pkd: var(--fans-deep); }
.rd-pk .rd-body { fill: var(--pk); }
.rd-pk .rd-lip { fill: var(--pkd); }
.rd-pk .rd-halo { fill: var(--pk); opacity: .26; }
.rd-pk .rd-shine { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 7; stroke-linecap: round; }
.rd-node.locked .rd-shine { display: none; }
.rd-node .rd-ic { position: relative; display: grid; place-items: center; margin-top: -10px; }
.rd-node .rd-ic svg { width: 30px; height: 30px; }
.rd-node.now .rd-ic svg { width: 34px; height: 34px; }
:root:is([data-look="neon"], [data-look="headliner"]) .rd-node.done, :root:is([data-look="neon"], [data-look="headliner"]) .rd-node.box.done { color: #1D1640; }
:root:is([data-look="neon"], [data-look="headliner"]) .rd-node.headline:not(.locked) { color: #1D1640; }
.rd-node.locked.headline { color: var(--locked-ic); }
/* the flag beside the next pick */
.rd-stop.cur { align-items: flex-start; }
.rd-flag { position: absolute; left: calc(50% + 40px); top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; gap: 10px; max-width: 236px; padding: 6px 6px 6px 14px; box-sizing: border-box; border-radius: 18px; background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: #14213D; transition: opacity .15s; }
.rd-stop.cur { align-items: center; }
.rd-flag .rd-ft { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-flag .rd-ft small { font: 800 12px var(--sans); letter-spacing: .06em; opacity: .75; white-space: nowrap; }
.rd-flag .rd-ft b { font: 700 16px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-flag .rd-start { flex: none; display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border: 0; border-radius: 13px; background: var(--good); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 72%, #000); color: #14213D; font: 700 15px var(--display); }
:root[data-look="festival"] .rd-flag .rd-start, :root[data-look="green"] .rd-flag .rd-start { background: #fff; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--streak-deep); }
.rd-flag .rd-start svg { width: 11px; height: 13px; }
.rd-flag .rd-start:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 72%, #000); }
.rd-flag.head { flex-wrap: wrap; }
.rd-flag .rd-other { position: absolute; left: 14px; top: calc(100% + 12px); padding: 0; border: 0; background: none; color: var(--accent-ink); font: 700 14px var(--display); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
:root:is([data-look="neon"], [data-look="headliner"]) .rd-flag .rd-other { color: var(--strings); }
.rd-path.has-pop .rd-flag { opacity: .5; }
/* the bubble on any other pick */
.rd-pop { display: flex; align-items: center; gap: 10px; width: 236px; margin-top: 14px; padding: 10px 10px 10px 14px; border: 0; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.rd-pop::before { border: 0; background: linear-gradient(180deg, var(--card-2), var(--card)); }
.rd-pop .rd-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-pop .rd-pt small { font: 800 12px var(--sans); letter-spacing: .06em; color: var(--muted); }
.rd-pop.done .rd-pt small { color: var(--good); }
.rd-pop .rd-pt b { font: 700 17px var(--display); }
.rd-pop .rd-pt p { margin: 2px 0 0; font: 700 13px var(--sans); color: var(--muted); opacity: 1; }
.rd-pop .rd-start { width: auto; flex: none; }
.rd-others .list .row { min-height: 56px; }
.rd-pop { width: 264px; }
.rd-pop .rd-pt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 4.34.1: the pick drawing keeps its size on big stops (an older rule sized every svg in .big to 38px),
   and the headline flag stays one row */
.rd-node .rd-pk, .rd-node.big .rd-pk, .rd-node.now .rd-pk { position: absolute; inset: -10%; width: 120%; height: 120%; }
.rd-node.big .rd-ic svg { width: 34px; height: 34px; }
.rd-flag.head { flex-wrap: nowrap; }
.rd-node.big ~ .rd-flag { left: calc(50% + 46px); }
.rd-flag { max-width: 240px; }
.rd-flag { max-width: 226px; }
.rd-stop.cur:has(.rd-other) { margin-bottom: 26px; }

/* ==========================================================================
   The Road (4.35.0): no flag; a pick's card opens on a tap. The next pick's
   halo pulses and the pick wiggles now and then.
   ========================================================================== */
.rd-flag { display: none; }
.rd-pop { display: block; width: 268px; margin-top: 16px; padding: 14px 16px 16px; border-radius: 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); text-align: left; animation: rd-pop .22s cubic-bezier(.2,1.3,.4,1); }
.rd-pop b { display: block; font: 700 19px var(--display); white-space: normal; }
.rd-pop p { margin: 4px 0 12px; font: 700 14px var(--sans); color: var(--muted); }
.rd-pop.locked p, .rd-pop.box p { margin-bottom: 0; }
.rd-pop .rd-start { display: flex; width: 100%; height: 50px; min-height: 50px; font-size: 16px; }
.rd-pop.now { background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: #14213D; }
.rd-pop.now p { color: #14213D; opacity: .8; }
.rd-pop.now .rd-start { background: #fff; color: var(--streak-deep); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 45%, #fff); }
.rd-pop.now .rd-start::before { display: none; }
.rd-pop::before { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 0; }
.rd-pop.now::before { background: var(--copper); }
.rd-pop .rd-other { display: block; margin: 12px auto 0; padding: 0; border: 0; background: none; color: #14213D; font: 700 14px var(--display); text-decoration: underline; text-underline-offset: 3px; }
@keyframes rd-pop { from { opacity: 0; transform: translateX(calc(var(--x) * -1)) translateY(-6px) scale(.96); } }
/* the halo breathes, and the pick gives a small wiggle every few seconds */
.rd-node.now .rd-halo { transform-box: fill-box; transform-origin: center; animation: rd-halo 1.8s ease-in-out infinite; }
@keyframes rd-halo { 0%, 100% { transform: scale(1.22); opacity: .34; } 50% { transform: scale(1.4); opacity: .12; } }
.rd-node.now .rd-body, .rd-node.now .rd-lip, .rd-node.now .rd-shine, .rd-node.now .rd-ic { transform-origin: 50% 40%; animation: rd-wiggle 3.6s ease-in-out 1s infinite; }
.rd-node.now .rd-ic { display: grid; }
@keyframes rd-wiggle { 0%, 82%, 100% { transform: rotate(0); } 85% { transform: rotate(-7deg); } 88% { transform: rotate(6deg); } 91% { transform: rotate(-4deg); } 94% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .rd-node.now .rd-halo, .rd-node.now .rd-body, .rd-node.now .rd-lip, .rd-node.now .rd-shine, .rd-node.now .rd-ic { animation: none; } .rd-pop { animation: none; } }

/* ==========================================================================
   One language for every song (4.36.0): the picker, gender colours for
   Spanish (el, la) and Russian (m, f, n), and the sound of Russian lines
   ========================================================================== */
.de.g-el, .g-el.de, .dc-w .art.g-el { color: var(--de-der); } .de.g-la, .dc-w .art.g-la { color: var(--de-die); }
.de.g-m, .dc-w .g-m { color: var(--de-der); } .de.g-f, .dc-w .g-f { color: var(--de-die); } .de.g-n, .dc-w .g-n { color: var(--de-das); }
.de-sheet .de.g-el, .de-sheet .de.g-la, .de-sheet .de.g-m, .de-sheet .de.g-f, .de-sheet .de.g-n { color: inherit; }
.de-sheet .de.g-el, .de-sheet .de.g-m { color: var(--de-der); } .de-sheet .de.g-la, .de-sheet .de.g-f { color: var(--de-die); } .de-sheet .de.g-n { color: var(--de-das); }
.de-tr { display: block; font-size: .74em; font-style: italic; color: var(--muted); font-weight: 600; margin-top: 1px; }
.dc-tr { font: italic 600 15px var(--sans); color: var(--muted); margin-top: 1px; }
.dc-g { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--card-2); font: 800 12px var(--sans); letter-spacing: .04em; }
.lp-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; }
.lp-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 0 16px; box-sizing: border-box; border: 0; border-radius: 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); text-align: left; }
.lp-row.on { box-shadow: 0 0 0 3px var(--accent), inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.lp-em { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #fff; font: 700 16px var(--display); }
.lp-de { background: #3A86FF; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); } .lp-es { background: #FF8A00; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); } .lp-ru { background: #8B5CF6; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.lp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp-t b { font: 700 18px var(--display); } .lp-t small { font: 700 13px var(--sans); color: var(--muted); }
.lp-row i { width: 24px; height: 24px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--rim); }
.lp-row.on i { box-shadow: inset 0 0 0 7px var(--accent); }
.lp-h { margin: 6px 0 4px; font: 700 24px var(--display); }
.ls-ask .actions { display: flex; gap: 10px; margin-top: 14px; }
.ls-ask .actions .btn { flex: 1; }

/* Support The Road (4.39.0) */
.sp { padding-bottom: 40px; }
.sp-hero { display: grid; place-items: center; margin: 4px 0 6px; }
.sp-h { margin: 0 2px 10px; font: 700 30px/1.1 var(--display); text-align: center; }
.sp-p { margin: 0 6px 10px; font: 700 16px/1.45 var(--sans); color: var(--fg-2); text-align: center; }
.sp-acts { display: flex; flex-direction: column; gap: 14px; margin: 22px 0 14px; }
.sp-acts .btn { width: 100%; flex: none; text-decoration: none; gap: 10px; }
.sp-acts .btn svg { width: 20px; height: 20px; }
.sp-foot { text-align: center; }

/* ---- Opening night (4.40.0): the first leg teaches by doing ---- */
.rd-banner.on-night { background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: #14213D; }
.rd-banner.on-night small { color: rgba(20, 33, 61, .62); }
.on-skip { flex: none; height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .24); color: #14213D; font: 700 15px var(--display); }
.on-stop { margin-bottom: 4px; }
.on-lab { position: absolute; top: 10px; width: 132px; font: 700 15px var(--display); color: var(--fg); line-height: 1.15; pointer-events: none; }
.on-lab small { display: block; font: 700 12px var(--sans); color: var(--muted); margin-top: 2px; }
.on-lab.r { left: calc(50% + 50px); }
.on-lab.l { right: calc(50% + 50px); text-align: right; }
.on-lab.dim { opacity: .55; }
.on-stop .rd-node.locked .rd-ic { opacity: .5; }
.on-strip { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 104px); z-index: 70; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); pointer-events: none; animation: up .35s cubic-bezier(.2, 1.15, .3, 1); }
body.gigging .on-strip { bottom: calc(env(safe-area-inset-bottom) + 100px); }
.on-lv { flex: none; display: grid; }
.on-lv .louie { width: 46px; height: auto; }
.on-tx { flex: 1; min-width: 0; font: 700 14px var(--sans); line-height: 1.3; }
.on-tx small { display: block; font: 800 12px var(--sans); letter-spacing: .06em; color: var(--streak); }
.on-pips { flex: none; display: flex; flex-direction: column; gap: 4px; }
.on-pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--rim); }
.on-pips i.on { background: var(--copper); }
.on-pips i.done { background: var(--good); }
.on-pips.c { flex-direction: row; justify-content: center; gap: 6px; margin: 4px 0 2px; }
.sheet .c.on-pulse .ct { border-radius: 8px; animation: on-pulse 1.4s ease-in-out infinite; }
@keyframes on-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--streak) 70%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .sheet .c.on-pulse .ct { animation: none; box-shadow: 0 0 0 3px var(--streak); } .on-strip { animation: none; } }
.on-mic { padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); text-align: center; }
.on-mic-lv { display: flex; justify-content: center; }
.on-mic h2, .on-count-in h2 { margin: 6px 0; font: 700 26px var(--display); color: var(--fg); }
.on-mic p, .on-count-in p { margin: 0 0 16px; font: 700 15px var(--sans); color: var(--muted); line-height: 1.4; }
.on-mic .btn, .on-count-in .btn { width: 100%; }
.on-not { display: block; margin: 10px auto 0; height: 44px; border: 0; background: none; color: var(--muted); font: 700 16px var(--display); }
.on-count { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end; background: var(--scrim); }
.on-count-in { width: 100%; box-sizing: border-box; border-radius: 24px 24px 0 0; background: linear-gradient(180deg, var(--card-2), var(--card)); padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); text-align: center; animation: up .42s cubic-bezier(.2, 1.15, .3, 1); }
.hud .h-lab { font: 800 12px var(--sans); letter-spacing: .06em; color: var(--muted); }
.hud .h-lab::after { content: " \203A"; }

/* 4.42.1: while search is open the page doesn't bounce when pulled down: the bar is fixed, so a bounce
   slid the buttons away from it and iOS drew the text cursor in the gap. A long list still scrolls. */
html:has(> body.searching), body.searching { overscroll-behavior: none; }

/* 4.42.2: on a phone the slim title bar keeps its Back button, so you can leave a song from anywhere in it:
   scroll up a little and the bar (Back, the title) is there. */

/* 4.42.2: the Songbook header's three buttons are one size (46, like the tuner). 4.30.0 had taken Sets to 56,
   which crowded the cards under it. Back (and the song's heart) were still the outlined circle from before
   version 4: now a rounded square on a darker lip with no outline, with a bolder arrow. */
:root[data-look] .btn.sets-btn { height: 46px; min-height: 46px; font-size: 16px; padding: 0 12px; border: 0; border-radius: 14px; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .sh-btn { width: 46px; height: 46px; border: 0; border-radius: 14px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .sh-btn svg { width: 22px; height: 22px; stroke-width: 2.8; }
:root[data-look] .sh-btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .sh-btn.fav.on { box-shadow: 0 4px 0 var(--accent-line, var(--accent)); }
.app:not(.viewer) .head-l .sh-btn { margin-right: 4px; }
.app:not(.viewer) .head .row-btns { gap: 8px; }
@media (max-width: 379px) { :root[data-look] .btn.sets-btn .i, :root[data-look] .btn.sets-btn svg { display: none; } }
/* 4.42.2: a toast that has faded out no longer blocks taps where it was (a "near" toast stays in place, invisible) */
.toast:not(.show) { pointer-events: none; }

/* 4.42.3: room between the Songbook's top buttons (Back, Sets, Tuner, each on a 4px lip) and the card
   under them, so the buttons don't sit on it. */
.head:has(#libback) + .today, .head:has(#libback) + * { margin-top: 18px; }

/* 4.42.4: the last version 3 buttons (round frosted glass: Back, the heart and ••• on the song page,
   Settings, Sets, the Tour Map, Rehearse, Support, Your profile, tips) now match the Songbook's
   version 4 buttons: rounded squares on a lip. */
:root[data-look] .ib.glass { width: 46px; height: 46px; border: 0; border-radius: 14px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .ib.glass svg { width: 22px; height: 22px; stroke-width: 2.8; }
:root[data-look] .ib.glass.on { background: var(--accent-soft); box-shadow: 0 4px 0 var(--accent-line, var(--accent)); color: var(--accent-ink); }
:root[data-look] .ib.glass:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }

/* 4.42.5: top buttons drawn at 40px, like the Merch table's (Graham: a better height), with a 3px lip and a
   20px icon. Each still catches taps over 48px: an invisible margin around it, so one-handed taps land. */
:root[data-look] .ib.glass, :root[data-look] .sh-btn, :root[data-look] .ib.chunky-tune, .mc-back {
  width: 40px; height: 40px; border-radius: 13px; position: relative; }
:root[data-look] .ib.glass, :root[data-look] .sh-btn, .mc-back { box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .ib.glass.on { box-shadow: 0 3px 0 var(--accent-line, var(--accent)); }
:root[data-look] .ib.chunky-tune { box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-look] .ib.glass svg, :root[data-look] .sh-btn svg { width: 20px; height: 20px; }
:root[data-look] .ib.chunky-tune svg { width: 21px; height: 21px; }
:root[data-look] .btn.sets-btn { height: 40px; min-height: 40px; font-size: 15px; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); position: relative; }
:root[data-look] .btn.sets-btn.on { box-shadow: var(--copper-hi), var(--copper-glow); }
:root[data-look] .btn.sets-btn .i, :root[data-look] .btn.sets-btn svg { width: 18px; height: 18px; }
:root[data-look] .ib.glass::after, :root[data-look] .sh-btn::after, :root[data-look] .ib.chunky-tune::after, :root[data-look] .btn.sets-btn::after, .mc-back::after {
  content: ""; position: absolute; inset: -4px; }

/* ---- Achievement callouts (4.44.0, #77): callout.js. Takes no taps; only transform and opacity move. ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.co { position: fixed; z-index: 60; left: 0; right: 0; top: calc(var(--safe-t, 0px) + 13vh); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; animation: co-in .42s cubic-bezier(.2,1.5,.35,1) both; }
.co.out { animation: co-out .26s ease-in both; }
.co-badge { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 10px 26px 14px; border-radius: 26px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 55%, #000), 0 18px 40px rgba(0,0,0,.35); border: 3px solid var(--accent); }
.co-badge small { font: 800 15px var(--sans); letter-spacing: .12em; color: var(--accent-ink); text-transform: uppercase; }
.co-badge b { font: 700 58px/1 var(--display); color: #fff; -webkit-text-stroke: 3px var(--card); paint-order: stroke fill; text-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 70%, #000); }
.co-cast { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 2px; margin-top: -4px; }
.co-cast > svg, .co-cast .co-friend { animation: co-hop .5s .15s cubic-bezier(.3,1.6,.5,1) both; }
.co-cast .co-friend { animation-delay: .25s; }
.co-fx { position: absolute; z-index: 1; left: 50%; top: 50%; width: 0; height: 0; }
/* looks: bolt (a lightning bolt through the badge), rays (light turning behind it), burst (bits flying out),
   stamp (it lands like a passport stamp), light (a stage light from above), flip (it turns over like a badge) */
.co-bolt .co-fx svg { position: absolute; width: 120px; height: 220px; left: -110px; top: -150px; fill: var(--fans); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--fans) 70%, transparent)); animation: co-bolt .5s steps(3) both; }
.co-bolt .co-badge { border-color: var(--fans); }
.co-rays .co-fx { width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; background: repeating-conic-gradient(color-mix(in srgb, var(--accent) 34%, transparent) 0 12deg, transparent 12deg 30deg); mask: radial-gradient(circle, #000 30%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); animation: co-spin 2.4s linear both; }
.co-burst .co-fx i { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 3px; background: var(--copper); transform: rotate(var(--a)) translateY(0); animation: co-bit .7s var(--d) cubic-bezier(.1,.8,.3,1) both; }
.co-burst .co-fx i:nth-child(3n) { background: var(--copper); } .co-burst .co-fx i:nth-child(3n+1) { background: var(--copper); }
.co-stamp .co-badge { animation: co-stamp .38s cubic-bezier(.5,0,.6,1.4) both; border-style: dashed; }
.co-light .co-fx { width: 300px; height: 420px; margin: -330px 0 0 -150px; background: conic-gradient(from 160deg at 50% 0, transparent 0deg, color-mix(in srgb, #fff 30%, transparent) 20deg, transparent 40deg); animation: co-fade .5s both; }
.co-flip .co-badge { animation: co-flip .55s cubic-bezier(.3,1.3,.5,1) both; }
.co.still, .co.still * { animation: none !important; }
.co.still { animation: co-fade .3s both !important; }
.co.still.out { animation: co-out-still .3s both !important; }
@keyframes co-in { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes co-out { to { transform: translateY(-24px) scale(.9); opacity: 0; } }
@keyframes co-out-still { to { opacity: 0; } }
@keyframes co-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes co-hop { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes co-bolt { 0% { opacity: 0; transform: translateY(-30px); } 40% { opacity: 1; } 70% { opacity: .5; } 100% { opacity: 1; transform: none; } }
@keyframes co-spin { from { transform: rotate(0); opacity: 0; } 15% { opacity: 1; } to { transform: rotate(60deg); opacity: 1; } }
@keyframes co-bit { to { transform: rotate(var(--a)) translateY(-150px) rotate(200deg); opacity: 0; } }
@keyframes co-stamp { from { transform: scale(1.8) rotate(-12deg); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } }
@keyframes co-flip { from { transform: perspective(500px) rotateY(180deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- The Gig, words first (4.43.0): the words fill the screen, the game is one slim strip ---- */
.gig { gap: 8px; }
.gg-top .gg-combo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 8%, transparent); min-height: 32px; font: 700 17px var(--display); color: var(--got); }
.gg-top .gg-combo:empty { display: none; }
.gg-top .gg-combo svg { width: 18px; height: 18px; stroke-width: 3; }
.gg-combo.hit { animation: gg-pop .3s ease-out; }
@keyframes gg-pop { 50% { transform: scale(1.25); } }
.gg-status { justify-content: flex-start; gap: 10px; min-height: 56px; }
.gg-cap { font: 800 12px var(--sans); letter-spacing: .08em; color: var(--muted); }
.gg-status .gg-fans { flex: 1; display: flex; gap: 2px; align-items: flex-end; height: 56px; margin: 0; } /* a bigger crowd, on its own row (4.54.0) */
.gg-status .gg-fans i { flex: 1; }
/* The crowd (4.49.10): 12 fans; the ones on their feet stand up with their hands up */
.gg-status .gg-fans i { display: flex; align-items: flex-end; justify-content: center; background: none; color: var(--locked); }
.gg-status .gg-fans svg { width: 100%; max-width: 38px; height: auto; overflow: visible; fill: currentColor; transform: translateY(5px); transition: transform .25s, color .25s; }
.gg-status .gg-fans .arms { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .2s; }
.gg-status .gg-fans i.on svg { transform: none; }
.gg-status .gg-fans i.on .arms { opacity: 1; }
.gg-status .gg-fans i.on.c0 { color: var(--g-chorus); } .gg-status .gg-fans i.on.c1 { color: var(--g-verse); }
.gg-status .gg-fans i.on.c2 { color: var(--fans); } .gg-status .gg-fans i.on.c3 { color: var(--g-solo); }
@media (prefers-reduced-motion: reduce) { .gg-status .gg-fans svg { animation: none; transition: none; } }
.gg-shape { position: absolute !important; right: 14px; top: 34%; z-index: 2; width: 96px; box-sizing: border-box; padding: 8px 6px; border-radius: 14px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 2px solid var(--fans); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); text-align: center; }
.gg-shape[hidden] { display: none; }
.gg-shape small { display: block; font: 800 12px var(--sans); letter-spacing: .06em; color: var(--fans-text); }
.gg-shape b { display: block; font: 700 16px var(--display); color: var(--fg); }
.gg-shape svg { display: block; margin: 2px auto 0; max-width: 80px; height: auto; }
.gg-moment { position: absolute !important; left: 14px; right: 14px; top: calc(88px + var(--safe-t)); z-index: 3; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 20px; background: var(--copper); color: #14213D; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); font: 700 15px var(--sans); }
.gg-moment[hidden] { display: none; }
.gg-moment .louie { width: 54px; height: auto; flex: none; }
.gg-moment b { display: block; font: 700 18px var(--display); }
.gg-moment.go { animation: gg-moment 2.6s ease both; }
@keyframes gg-moment { 0% { opacity: 0; transform: translateY(-14px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .gg-combo.hit, .gg-moment.go { animation: none; } }
/* ---- Search screen (4.47.0): Browse, played lately, the ways to add a song; the bar folds into a magnifier ---- */
.sr-browse { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; margin: 14px 0 4px; padding: 8px 14px; border: 0; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); text-align: left; }
.sr-bic { flex: none; display: grid; place-items: center; }
.sr-bic .i { width: 24px; height: 24px; color: var(--accent-ink); }
.sr-browse > span:not(.sr-bic) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sr-browse b { font: 700 17px var(--display); }
.sr-browse small { font: 700 13px var(--sans); color: var(--fg-2); }
.sr-browse .chev { width: 18px; height: 18px; color: var(--muted); flex: none; }
.sr-browse:active, .sr-tool:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.sr-tools { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.sr-tool { height: 76px; border: 0; border-radius: 16px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); font: 800 13px var(--sans); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.sr-tool svg { width: 24px; height: 24px; fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sr-write, .sr-writeq { width: 100%; min-height: 48px; margin-top: 8px; border: 0; border-radius: 14px; background: none; color: var(--accent-ink); font: 800 15px var(--sans); display: flex; align-items: center; gap: 10px; padding: 0 4px; text-align: left; }
.sr-write .i, .sr-writeq .i { width: 20px; height: 20px; flex: none; }
.sr-writeq span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-note { margin: 10px 2px; color: var(--fg-2); font-size: 14px; }
/* 4.48.0: one labelled bar on the Songbook (+ inside it), and the "Not in your Songbook" rows say what they do */
.cmd-add { width: 40px; height: 40px; flex: none; border: 0; border-radius: 12px; background: none; color: var(--accent-ink); display: grid; place-items: center; padding: 0; }
.cmd-add .i { width: 22px; height: 22px; stroke-width: 2.6; }
body.searching .cmd-add { display: none; }
.sr-clist { border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); overflow: hidden; }
.sr-crow { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 12px 8px 16px; box-sizing: border-box; }
.sr-crow + .sr-crow { border-top: 1px solid var(--hair); }
.sr-ctx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sr-ctx b { font: 700 16px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-ctx small { font: 700 13px var(--sans); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-act { flex: none; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--copper); box-shadow: var(--copper-hi), var(--copper-glow); color: var(--on-accent); font: 800 13px var(--sans); white-space: nowrap; }
.sr-act:active { transform: translateY(2px); box-shadow: var(--copper-hi), var(--copper-glow); }
.sr-web { margin: 14px 2px 0; font-size: 14px; color: var(--fg-2); line-height: 1.6; }
.sr-web button { border: 0; background: none; padding: 4px 2px; color: var(--accent-ink); font: 800 14px var(--sans); text-decoration: underline; text-underline-offset: 3px; }
/* 4.49.0: Apple Music as one row with the ways to add, and its sheet */
.sr-am { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; margin-top: 14px; padding: 8px 14px 8px 10px; border: 0; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); text-align: left; }
.sr-am[hidden] { display: none; }
.sr-am:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.sr-amic { width: 42px; height: 42px; flex: none; border-radius: 11px; background: linear-gradient(180deg, #FB5C74, #FA233B); display: grid; place-items: center; }
.sr-amic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sr-amt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sr-amt b { font: 700 17px var(--display); }
.sr-amt small { font: 700 13px var(--sans); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-am .chev { width: 18px; height: 18px; color: var(--muted); flex: none; }
.panel.am-sheet { bottom: 0; display: flex; flex-direction: column; gap: 12px; max-height: calc(100dvh - 60px - var(--safe-t)); padding: 10px 16px calc(16px + var(--safe-b)); box-sizing: border-box; border-radius: 26px 26px 0 0; }
.am-sheet .sr-clist { overflow-y: auto; min-height: 0; }
.am-h { margin: 4px 2px 0; font: 700 24px var(--display); color: var(--fg); }
.sr-act.ghost { background: var(--card-2, var(--bg)); box-shadow: none; color: var(--fg-2); }
.am-done { height: 52px; flex: none; }
/* 4.49.1: the search screen doesn't scroll before you type */
html:has(body.searching.sr-lock), body.searching.sr-lock { overflow: hidden; overscroll-behavior: none; }
.sr-am + .sr-browse { margin-top: 10px; }
/* 4.49.4: Get the song shows the whole sheet (the page scrolls as one), and the album colour starts at the top edge */
.gs .gs-chart { max-height: none; overflow: visible; }
.panel.gs.washed, :root[data-look] .panel.gs.washed { background-image: linear-gradient(160deg, color-mix(in srgb, var(--album, var(--accent)) 34%, transparent), transparent 440px); background-repeat: no-repeat; }
.panel.gs.washed .pbody > .cover-head { background: none; }

/* ---- The stage on the song page (4.51.0, stage.js) ----
   While a show plays, the song page is the stage: the rest of the page steps back, the line you're on sits on
   a band in the section's colour from edge to edge, lines ahead stay readable (.7) and lines behind fade (.35).
   Nothing changes size or moves, so nothing rewraps. */
body.staged { --gel: var(--g-verse); background: transparent; }
body.staged[data-gel="chorus"] { --gel: var(--g-chorus); } body.staged[data-gel="bridge"] { --gel: var(--g-bridge); } body.staged[data-gel="solo"] { --gel: var(--g-solo); }
body.staged .app.viewer > :not(.sheet):not(.dock):not(.dock-fade):not(.fp), body.staged .chead, body.staged .shapecard { visibility: hidden; }
/* in a show the Gig's own controls replace the bar and the song map; unscored, the folded Play is the pause (4.52.0) */
body.gigging.staged .app.viewer > :is(.dock, .dock-fade), body.gigging.staged .smap { visibility: hidden; }
body.staged .app.viewer { overflow-x: clip; }
body.staged .sheet { overflow-x: visible; }
body.staged .sheet > * { position: relative; opacity: 1 !important; transform: none !important; -webkit-text-stroke: 0 !important; transition: color .25s; }
/* Bold words that fade by distance (4.58.0, Graham, 2026-10-24): the line you're on is white and boldest, the next
   one 65%, the ones after 45%, the ones played 30%. The words fade; chord letters stay brighter than the words
   around them, so the next change is always readable. Section names fade with opacity. */
body.staged .sheet > :is(.pr, .ly, .crow) { font-weight: 700; color: color-mix(in srgb, var(--fg) var(--dim-after), transparent); }
body.staged .sheet > .st-next:is(.pr, .ly, .crow) { color: color-mix(in srgb, var(--fg) var(--dim-next), transparent); }
body.staged .sheet > .st-past:is(.pr, .ly, .crow) { color: color-mix(in srgb, var(--fg) var(--dim-past), transparent); }
body.staged .sheet > .st-now:is(.pr, .ly, .crow) { font-weight: 800; color: var(--fg); }
/* the fade is capped so every word keeps 4.5:1 (4.61.1): the light palettes can't fade as far as the dark ones */
/* Louie Lite 3.1.1: back to 2.49's "Focus current line" strength. The line you're on and the next one
   stay easy to read; lines further ahead and lines played fade well back, so the eye stays on the middle. */
:root { --dim-next: 72%; --dim-after: 38%; --dim-past: 30%; }
:root[data-theme="light"], :root[data-look="festival"], :root[data-look="green"] { --dim-next: 80%; --dim-after: 50%; --dim-past: 42%; }
body.covered { --dim-next: 72%; --dim-after: 38%; --dim-past: 30%; }
body.staged .sheet > .sec { opacity: 1 !important; }
body.staged .sheet .c { font-weight: 800; transition: opacity .25s; }
body.staged .sheet > :is(.pr, .ly, .crow) .c { opacity: .92; }
body.staged .sheet > :is(.st-now, .st-next) .c { opacity: 1; }
body.staged .sheet > .st-past .c { opacity: .7; }
body.staged .sheet > :is(.pr, .ly, .crow) .c:is(.st-got, .st-wait) { opacity: 1; }
body.staged .sheet > .st-now:is(.pr, .ly, .crow) { isolation: isolate; }
body.staged .sheet > .st-now::before { content: ""; position: absolute; z-index: -1; top: -6px; bottom: -2px; left: -50vw; right: -50vw; background: color-mix(in srgb, var(--gel) 28%, transparent); box-shadow: inset inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 55%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--gel) 55%, transparent); pointer-events: none; transition: background-color .4s; }
body.staged .sheet .c { color: var(--gel); }
:root[data-theme="light"] body.staged .sheet .c, :root[data-look="festival"] body.staged .sheet .c { color: color-mix(in srgb, var(--gel) 72%, #14213D); }
body.staged .sheet .c.st-rep { visibility: hidden; }
/* Chord Catch (4.54.0): a chord you played turns green and stays green, with a bar under it (green is never alone);
   one that went by unplayed is plain; the one the song is waiting on has a soft ring */
:root { --got: #7EE6A0; }
:root[data-theme="light"], :root[data-look="festival"] { --got: #075E2D; }
:root[data-look="green"] { --got: #0A5C2E; }
:root { --miss-ink: var(--muted); }
:root[data-look="green"] { --miss-ink: #3F524C; }
:root body.staged .sheet .c.st-got { color: var(--got); }
:root body.staged .sheet .c.st-got .ct { text-decoration: underline 3px; text-underline-offset: 5px; text-decoration-color: var(--got); }
:root body.staged .sheet .c.st-miss { color: var(--miss-ink); }
:root body.staged .sheet .c.st-pop .ct { animation: catch-pop .55s ease-out; }
@keyframes catch-pop { 0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--got) 55%, transparent); } 35% { transform: scale(1.3); box-shadow: 0 0 0 8px color-mix(in srgb, var(--got) 30%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } }
:root body.staged .sheet .c.st-wait .ct { border-radius: 8px; background: var(--gel); color: #14213D; box-shadow: 0 0 0 5px color-mix(in srgb, var(--gel) 35%, transparent), 0 0 0 11px color-mix(in srgb, var(--gel) 14%, transparent); padding: 0 6px; margin-left: -6px; }
/* the waiting chord's label stays 4.5:1 on every section colour (checked for all three palettes) */
:root[data-look="green"] body.staged[data-gel="verse"] .sheet .c.st-wait .ct, :root[data-look="green"] body.staged[data-gel="solo"] .sheet .c.st-wait .ct { color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { :root body.staged .sheet .c.st-pop .ct { animation: none; } }
/* The stage light, quiet (Graham, 2026-10-24): behind the words, at most 12% of the section's colour, and gone
   before the band at the reading line, so it never sits on the words you're reading. */
.st-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.st-bg i { position: absolute; left: 50%; display: block; }
.st-bg .st-lamp { top: -22px; width: 56px; height: 44px; margin-left: -28px; border-radius: 0 0 28px 28px; background: color-mix(in srgb, var(--gel) 30%, #fff); box-shadow: 0 0 36px 14px color-mix(in srgb, var(--gel) 40%, transparent); }
/* one cone from the lamp down, ending above the band so it never sits on the words (4.54.0, Graham's mockup) */
.st-bg .st-beam { top: 0; width: 100vw; height: 40%; margin-left: -50vw; clip-path: polygon(41% 0, 59% 0, 96% 100%, 4% 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--gel) 26%, transparent), color-mix(in srgb, var(--gel) 9%, transparent) 60%, transparent 96%); transition: background .6s; }
/* A row of chords with no words (an intro, a solo) spreads across the width, so it reads as time going by
   (Graham, 2026-10-24); its chords are timed evenly along it too. */
.sheet .crow > * { flex: 1 1 0; min-width: max-content; }
/* Fitting the text (4.51.0): each line measured on one line, to find the size that fits the longest */
.sheet.measure > :is(.pr, .ly, .crow) { width: max-content; white-space: nowrap; flex-wrap: nowrap; }
/* measured at the boldest weight whatever the stage says (4.61.1: a redraw during the show measured the lines at 700) */
body .sheet.measure > :is(.pr, .ly, .crow) { font-weight: 800 !important; }
body .sheet.measure .c { font-weight: 800 !important; }
.sheet.measure .crow > * { flex: none; }
/* the new-chord card sits low on the right, in thumb reach, clear of the band at the reading line (4.51.0) */
.gig .gg-shape { top: auto; bottom: calc(96px + var(--safe-b)); }
/* Held (4.52.0): a show you paused. The song page is back as it always is, with a quiet band on the line you
   stopped on (no lit chord, no dots) and Play reading Resume. */
body:is(.staged, .held) { --gel: var(--g-verse); }
body.held[data-gel="chorus"] { --gel: var(--g-chorus); } body.held[data-gel="bridge"] { --gel: var(--g-bridge); } body.held[data-gel="solo"] { --gel: var(--g-solo); }
body.held { background: transparent; } /* so the quiet band, drawn under the words, shows */
body.held .st-bg { display: none; }
body.held .app.viewer { overflow-x: clip; }
body.held .sheet > .st-now { position: relative; }
body.held .sheet > .st-now::before { content: ""; position: absolute; z-index: -1; top: -6px; bottom: -2px; left: -50vw; right: -50vw; background: color-mix(in srgb, var(--gel) 10%, transparent); box-shadow: inset inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 30%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--gel) 30%, transparent); pointer-events: none; }
body.held .sheet.focus > .cur { transform: none; -webkit-text-stroke: 0; }
/* Louie's line on a held show, just above Play */
.held-say { position: fixed; left: 16px; right: 16px; z-index: 40; display: flex; align-items: center; gap: 12px; animation: pop .2s ease-out; }
.held-say .louie { width: 56px; height: auto; flex: none; }
.held-say p { flex: 1; margin: 0; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); border-radius: 16px 16px 16px 4px; padding: 10px 12px; font: 700 15px/1.35 var(--sans); color: var(--fg); }

/* Show complete (4.54.0): the song you played, and the change you missed most */
.gc-song { margin: 14px 0 6px; padding: 12px 12px 6px; border-radius: 18px; background: color-mix(in srgb, var(--fg) 6%, transparent); text-align: left; }
.gc-song h3 { margin: 0 0 8px; font: 700 17px var(--display); color: var(--fg); }
.gc-sec { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.gc-sec > b { flex: none; width: 66px; padding: 4px 0; border-radius: 8px; text-align: center; font: 800 12px var(--sans); letter-spacing: .06em; color: #14213D; }
.gc-sec ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.gc-ch { padding: 4px 9px; border-radius: 9px; font: 700 15px var(--display); }
.gc-ch.got { background: color-mix(in srgb, var(--got) 20%, transparent); color: var(--got); box-shadow: inset 0 -3px 0 var(--got); }
.gc-ch.miss { color: var(--fg); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fg) 50%, transparent); }
.gc-ch.skip { color: var(--muted); }
.gc-worst { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--fg) 8%, transparent); text-align: left; }
.gc-worst small { display: block; font: 800 12px var(--sans); letter-spacing: .08em; color: var(--muted); }
.gc-worst b { font: 700 18px var(--display); color: var(--fg); }

/* Wait for me (4.54.0): the song holds on a chord until you play it */
.gg-wpill { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); font: 800 12px var(--sans); letter-spacing: .06em; }
.gg-wpill[hidden], .gg-wait[hidden], .gg-skip[hidden] { display: none; }
.gg-wait { position: absolute; left: 16px; right: 16px; bottom: 112px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: color-mix(in srgb, var(--fg) 10%, var(--bg)); }
.gg-wait .gw-t { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gg-wait .gw-t b { font: 700 19px var(--display); }
.gg-wait .gw-t small { font: 600 14px/1.35 var(--sans); opacity: .8; }
.gg-wait .gw-s { flex: none; width: 112px; padding: 8px; border-radius: 14px; background: #F3F1FF; color: #1C1A3A;
  /* 4.78.2: the tile is light in every look, so the diagram draws in dark ink here (it used the look's text colour, white on the dark looks) */
  --fg: #1C1A3A; --fg-2: #3A3760; --muted: #5E5A80; }
.gg-wait .gw-s .df { stroke-opacity: .5; stroke-width: 1; } .gg-wait .gw-s .ds { stroke-opacity: .75; stroke-width: 1; }
.gg-wait .gw-s svg { width: 100%; height: auto; display: block; }
.gg-skip { flex: 1; min-height: 60px; border: 0; border-radius: 18px; background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); font: 700 18px var(--display); }
.gg-bottom:has(.gg-skip:not([hidden])) .gg-mic { display: none; }

/* The opening card (4.55.0): the song, its first two chords and the count, in the empty space above the first line */
.st-open { position: fixed; left: 16px; right: 16px; z-index: 56; display: grid; place-items: center; pointer-events: none; transition: opacity .35s; }
.st-open.go { opacity: 0; }
.st-open .so-in { display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 100%; }
.st-open .so-row { display: flex; align-items: center; gap: 18px; }
.st-open .so-lou { display: block; line-height: 0; }
/* 4.68.0: the class sits on .so-lou itself (the old rule looked for a child, so Louie never moved) */
.st-open .so-lou { transform-origin: 50% 100%; }
.st-open .so-lou.beat { animation: so-jump .4s cubic-bezier(.3,.7,.4,1); }
.st-open .so-lou.beat.bang { animation: so-jump .4s cubic-bezier(.3,.7,.4,1), so-bang .5s ease-in-out .05s; }
.gg-fans.bob > i { animation: so-bob .3s ease-out; }
@keyframes so-jump { 0% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(2px) scale(1.08, .9); } 45% { transform: translateY(-28px) scale(.96, 1.06); } 80% { transform: translateY(0) scale(1.06, .94); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes so-bang { 0%, 100% { rotate: 0deg; } 25% { rotate: -14deg; } 50% { rotate: 9deg; } 75% { rotate: -8deg; } }
@keyframes so-bob { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
.st-open .so-n { min-width: 1.1ch; text-align: center; font: 700 76px/1 var(--display); color: var(--fg); }
.st-open .so-n.beat { animation: so-pop .32s ease-out; }
.st-open .so-s { margin: 0; font: 700 14px var(--sans); letter-spacing: .03em; color: var(--muted); text-align: center; }
@keyframes so-bounce { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-10px) scale(1.06); } 100% { transform: translateY(0) scale(1); } }
@keyframes so-pop { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .st-open .so-lou.beat, .st-open .so-lou.beat.bang, .st-open .so-n.beat, .gg-fans.bob > i { animation: none; } }
.st-open.tight .so-in { gap: 4px; }
.st-open.tight .so-row { gap: 12px; }
.st-open.tight .so-n { font-size: 52px; }
body:has(#st-open:not(.go)) .gg-shape, body:has(#st-open:not(.go)) .countin { visibility: hidden; }

/* Get the song: the recording found (4.57.0) */
.gs-rec { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 8px 10px; border-radius: 16px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); }
.gs-rec.ok { border-color: var(--got); }
.gs-rec-art { flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--card-2); display: grid; place-items: center; color: var(--muted); }
.gs-rec-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-rec-art svg { width: 22px; height: 22px; }
.gs-rec-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gs-rec-t b { font: 700 15px var(--display); }
.gs-rec-t small { font: 600 13px var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-rec .tb { min-height: 44px; min-width: 44px; }

/* Get the song: one bar for the whole job, and rows you can read at a glance (4.57.0) */
.gs-prog { margin: 14px 2px 0; }
.gs-say { margin: 0 0 8px; font: 700 15px var(--display); color: var(--fg); }
.gs-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 14%, transparent); overflow: hidden; }
.gs-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--copper); transition: width .25s linear, background .3s; }
.gs-bar.done i { background: var(--got); }
.gs-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 6px; min-height: 28px; }
.gs-row .gs-lb { flex: 1; min-width: 0; }
.gs-row.working { margin: 0 -14px; padding: 12px 20px; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 45%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 700; }
.gs-st { flex: none; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; display: grid; place-items: center; }
.gs-st.ring { border: 3px solid color-mix(in srgb, var(--accent-ink) 30%, transparent); border-top-color: var(--accent-ink); animation: gs-spin .9s linear infinite; }
.gs-st.chk { background: var(--got); color: var(--bg); }
.gs-st.chk svg { width: 13px; height: 13px; stroke-width: 3.4; }
.gs-st.hol { border: 2px solid color-mix(in srgb, var(--fg) 30%, transparent); }
.gs-st.dash::before { content: ""; width: 12px; height: 3px; border-radius: 2px; background: var(--muted); }
@keyframes gs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gs-st.ring { animation: none; } .gs-bar i { transition: none; } }
.gs-kept-bar { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 14%, transparent); overflow: hidden; }
.gs-kept-bar i { display: block; height: 100%; background: var(--copper); }
/* Bold on the song page too (4.61.0, Graham, 2026-10-24): the page and the stage read the same, and the size is already measured at the boldest weight (4.58.0) so nothing jumps when Play starts */
.sheet > :is(.pr, .ly) { font-weight: 700; }
.sheet .c { font-weight: 800; }
/* The album cover behind the show (4.59.0, Graham, 2026-10-24): blown up, blurred, under a dark layer. The show
   then reads as dark in every palette: white words, a soft white band, no stage light. The section name keeps
   its colour. Plain Play and the paused sheet are unchanged. */
.gg-cover { position: fixed; inset: -10%; z-index: -1; pointer-events: none; background: #000 center / cover no-repeat; filter: blur(60px) saturate(1.4); opacity: 0; transition: opacity .6s; }
.gg-cover::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.gg-cover.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gg-cover { transition: none; } }
body.covered { --bg: #141218; --fg: #FFFFFF; --fg-2: rgba(255, 255, 255, .86); --muted: rgba(255, 255, 255, .64); --head: #FFFFFF; --card: rgba(255, 255, 255, .1); --card-2: rgba(255, 255, 255, .16); --rim: rgba(255, 255, 255, .2); --hair: rgba(255, 255, 255, .12); --rim-hi: rgba(255, 255, 255, .06); --bar: rgba(20, 18, 24, .72); --solid: #1C1A22; --scrim: rgba(0, 0, 0, .6); --shadow: 0 8px 24px rgba(0, 0, 0, .45); --accent-ink: var(--accent); --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent); --good-soft: color-mix(in srgb, var(--good) 18%, transparent); --got: #7EE6A0; --miss-ink: rgba(255, 255, 255, .55); color-scheme: dark; }
/* glass for controls over moving words (4.60.1): a nearly solid dark surface with a blur, never see-through */
body.covered .gg-mic { background: rgba(20, 18, 24, .82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-color: var(--rim); }
body.covered .gg-mic:not(.off) { border-color: var(--good); }
body.covered .gg-pause { box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
body.covered .st-bg { display: none; }
body.covered .gig::before { background: linear-gradient(180deg, rgba(0, 0, 0, .35) calc(var(--safe-t) + 60px), transparent); }
body.covered .gig::after { height: calc(var(--safe-b) + 150px); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .7) 70px); }
body.covered.staged .sheet > .st-now::before { background: rgba(255, 255, 255, .1); box-shadow: inset inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32), inset 0 -2px 0 rgba(255, 255, 255, .3); }
:root body.covered.staged .sheet .c:not(.st-got):not(.st-miss):not(.st-wait) { color: #FFFFFF; }
/* Controls that hide while the song plays (4.60.0): they fade after 3 s untouched and can't be pressed while hidden;
   the crowd, the combo, the section name and Skip stay. */
.gig :is(.gg-x, .gg-mic, .gg-pause) { transition: opacity .4s, visibility 0s; }
.gig.idle :is(.gg-x, .gg-mic, .gg-pause) { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
@media (prefers-reduced-motion: reduce) { .gig :is(.gg-x, .gg-mic, .gg-pause), .gig.idle :is(.gg-x, .gg-mic, .gg-pause) { transition: none; } }
/* the page itself lets the cover through (4.61.0): on the song screen the body no longer paints over it */
body.covered { background: transparent; }
html:has(body.covered) { background: #141218; }

/* Under a cover (4.61.1): the dock is real glass, the Tools icons are bright, the title bar fades into the glass */
body.covered .pw.glass { background: rgba(20, 18, 24, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
body.covered .dock-fade { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82) 70%); }
body.covered .menu .mrow .mi, body.covered .menu.tools .mrow.tl .mi, body.covered .menu.tools3 .mrow.t3 .mi { color: var(--accent-ink); }

/* The title as a banner (4.62.0): the text and a copy of it a gap behind, sliding one text-and-gap to the left, so the loop has no jump */
.song-title.banner { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); text-overflow: clip; }
.song-title .tt { display: inline-block; white-space: nowrap; }
.song-title .tt::after { content: attr(data-t); padding-left: 48px; }
.song-title .tt.go { animation: tt-scroll var(--tt-t, 6s) linear 1; }
@keyframes tt-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tt-d, 0px))); } }
@media (prefers-reduced-motion: reduce) { .song-title .tt.go { animation: none; } }
/* A bought backdrop is the show's picture when the song has no cover; with a cover, the cover is the backdrop (4.62.1) */
body.covered .gg-bd, body:has(#gg-cover) .gg-bd { display: none; }
/* 4.65.2: the editor's bars under a cover: glass and a dark fade, so words never show through a button */
:root body.covered .cebar .ed-tl, :root body.covered .cebar .ed-tile, :root body.covered .cebar .ce-rec, :root body.covered .cebar .ce-plate .seg { background: rgba(20, 18, 24, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-color: var(--rim); }
body.covered .cebar.plate { isolation: isolate; }
body.covered .cebar.plate::before { content: ""; position: absolute; z-index: -1; left: -24px; right: -24px; top: -28px; bottom: calc(-14px - var(--safe-b)); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78) 36px); pointer-events: none; }

/* 4.67.0: Get the chords (the chart Louie picked) and the paste sheet when you come back */
.panel.cl-sheet, .panel.backpaste { z-index: 41; bottom: 0; top: auto; left: 50%; transform: translateX(-50%); width: min(520px, 100%); display: flex; flex-direction: column; gap: 12px; max-height: calc(100dvh - 60px - var(--safe-t)); overflow-y: auto; padding: 10px 16px calc(18px + var(--safe-b)); box-sizing: border-box; border-radius: 26px 26px 0 0; font-size: 15px; }
.cl-head { display: flex; align-items: center; gap: 10px; }
.cl-tt { display: flex; flex-direction: column; }
.cl-tt b { font: 700 22px var(--display); color: var(--fg); }
.cl-tt small { font: 600 15px var(--sans); color: var(--fg-2); }
.cl-sheet .label { margin: 4px 0 -4px; }
.cl-lv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-lv button { min-height: 44px; }
.cl-found:empty { display: none; }
.cl-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--bronze-line); }
.cl-site { font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.cl-rate { display: inline-flex; align-items: center; gap: 6px; font: 700 20px var(--display); color: var(--fg); }
.cl-rate svg { width: 20px; height: 20px; fill: var(--fans); stroke: var(--fans-deep, var(--fans)); }
.cl-rate small { font: 600 14px var(--sans); color: var(--fg-2); }
.cl-why { font: 600 14px var(--sans); color: var(--fg-2); }
.cl-busy, .cl-none { margin: 0; font: 600 15px var(--sans); color: var(--fg-2); }
.cl-acts { display: flex; flex-direction: column; gap: 10px; }
.cl-acts:empty { display: none; }
.cl-acts .btn { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cl-acts .cl-open { min-height: 60px; font-size: 18px; }
.cl-acts .btn svg { width: 18px; height: 18px; }
.cl-other { align-self: center; min-height: 44px; }
.cl-how { margin: 0; font: 600 14px var(--sans); color: var(--fg-2); }
.panel.backpaste .bp-k { font: 800 12px var(--sans); letter-spacing: .1em; color: var(--fg-2); }
.panel.backpaste .bp-t { margin: -6px 0 0; font: 700 22px var(--display); color: var(--fg); }
.panel.backpaste .bp-s { margin: 0; color: var(--fg-2); font-weight: 600; }
.panel.backpaste .bp-go { min-height: 60px; font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.panel.backpaste .bp-go svg { width: 20px; height: 20px; }
.panel.backpaste .bp-x { min-height: 48px; }
/* 4.70.0: four doors in the stat bar (venue, streak, fans, tips) fit a phone */
.hud { gap: 2px; }
.hud button { gap: 4px; padding: 0 2px; font-size: 17px; }
.hud button > svg:not(.ri-guitar) { width: 24px; height: auto; }
.hud .h-streak .ri-guitar { width: 30px; height: 30px; }
.hud .h-lab { font-size: 12px; letter-spacing: .04em; }

/* 4.71.0: POW, what you earned, comic-book style, with Louie's speaker pumping to the beat */
.co-pow .co-fx svg { position: absolute; width: 280px; height: 280px; left: -140px; top: -150px; overflow: visible; animation: co-pow .5s cubic-bezier(.2,1.6,.4,1) both, co-wob 1.2s .5s ease-in-out infinite alternate; }
.co-pow .co-star2 { fill: #14213D; }
.co-pow .co-star { fill: #FFD23F; stroke: #14213D; stroke-width: 4; stroke-linejoin: round; }
.co.co-pow { top: calc(var(--safe-t, 0px) + 30vh); } /* below the title, over the tiles that say the same */
.co-pow .co-powt { position: absolute; left: -120px; top: -146px; white-space: nowrap; transform: rotate(-12deg); font: 700 34px/1 var(--display); color: #FF3D7F; -webkit-text-stroke: 4px #14213D; paint-order: stroke fill; text-shadow: 3px 3px 0 #14213D; animation: co-stampt .4s .12s cubic-bezier(.5,0,.6,1.5) both; }
.co-pow .co-badge { background: #fff; border: 4px solid #14213D; box-shadow: 6px 6px 0 #14213D; transform: rotate(-3deg); }
.co-pow .co-badge small { color: #14213D; }
.co-pow .co-badge b { color: #3DDBA0; -webkit-text-stroke: 4px #14213D; text-shadow: 3px 3px 0 #14213D; }
.co-amp { position: relative; display: block; line-height: 0; animation: co-pump .5s ease-in-out .2s 3 both; transform-origin: 50% 100%; }
.co-amp i { position: absolute; left: 50%; top: 62%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 3px solid #FF3D7F; opacity: 0; animation: co-ring 1s ease-out infinite; }
.co-amp i:nth-child(3) { animation-delay: .33s; border-color: #FFD23F; } .co-amp i:nth-child(4) { animation-delay: .66s; border-color: #3D8BFF; }
@keyframes co-pow { from { transform: scale(.1) rotate(-30deg); } to { transform: none; } }
@keyframes co-wob { from { transform: rotate(-4deg) scale(1); } to { transform: rotate(4deg) scale(1.04); } }
@keyframes co-stampt { from { transform: rotate(-12deg) scale(2.4); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: 1; } }
@keyframes co-pump { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.1, .92); } 60% { transform: scale(.96, 1.06); } }
@keyframes co-ring { from { transform: scale(.4); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
/* 4.72.0: Tune up first, above Tools and Play */
.tuneup { display: flex; flex-direction: column; gap: 12px; }
.tu-top { display: flex; align-items: center; gap: 12px; }
.tu-lou { flex: none; line-height: 0; }
.tu-top h2 { margin: 0; font: 700 22px var(--display); color: var(--fg); }
.tu-top p { margin: 2px 0 0; font: 600 15px var(--sans); color: var(--fg-2); }
.tu-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tu-tiles > div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 14px; background: var(--card-2); border: 2px solid var(--hair); }
.tu-tiles small { font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.tu-tiles b { font: 700 19px var(--display); color: var(--fg); }
.tu-tiles span { font: 700 14px var(--sans); color: var(--fg-2); }
.tu-acts { display: flex; gap: 10px; }
.tu-acts .btn { flex: 1; min-height: 52px; }
.tu-acts .btn.primary { flex: 1.4; }
body.playing .tuneup, body.playing #tu-scrim { display: none; }

/* 4.74.0: Sing it, redesigned. Louie and a mic to start, one take split at your breaths, lines as on the song page,
   real buttons in thumb reach (Redo, keep, Done), and Your song. Scoped to .sk2, so the old pad rules don't apply. */
.app:has(.sk2) { padding-bottom: 0; }
.sk2 { min-height: calc(100dvh - var(--safe-t) - 10px); display: flex; flex-direction: column; gap: 14px; padding-bottom: calc(18px + var(--safe-b)); box-sizing: border-box; }
.sk-head { display: flex; align-items: center; gap: 12px; padding-top: 6px; }
.sk-head .title { margin: 0; flex: 1; font: 700 28px var(--display); }
.sk-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--bronze-line); border-radius: 14px; background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.sk-x svg { width: 18px; height: 18px; }
.sk-key { padding: 8px 12px; border-radius: 999px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); font: 800 12px var(--sans); letter-spacing: .08em; color: var(--fg-2); white-space: nowrap; }
.sk-k { font: 800 12px var(--sans); letter-spacing: .1em; color: var(--fg-2); }
.seg.sk-mode, .seg.sk-feel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.seg.sk-mode button, .seg.sk-feel button { min-height: 44px; font: 700 15px var(--display); }
.sk-intro { display: flex; flex-direction: column; gap: 22px; padding-top: 18px; }
.sk2-lou { display: flex; align-items: flex-end; gap: 10px; }
.sk2-lou .louie { width: 120px; height: auto; flex: none; }
.sk2-say { flex: 1; margin: 0 0 54px; padding: 14px 16px; border-radius: 18px 18px 18px 4px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); font: 700 16px/1.35 var(--sans); color: var(--fg); }
.sk-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sk-steps li { display: flex; align-items: center; gap: 12px; font: 700 15px var(--sans); color: var(--fg); }
.sk-steps b { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); font: 700 15px var(--display); }
.sk2 > * { flex: none; }
.sk2 > .sk-space { flex: 1 1 auto; }
/* the mic: a round pink button (big to start, smaller in the dock); recording it shows a stop square and rings */
.sk2 .skpad { position: relative; left: auto; transform: none; bottom: auto; height: auto; padding: 0; justify-content: center; align-items: center; transition: none; width: 64px; aspect-ratio: 1; flex: none; border-radius: 50%; background: var(--copper); box-shadow: var(--copper-hi), var(--copper-glow); display: grid; place-items: center; z-index: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
.sk2 .skpad svg { width: 28px; height: 28px; fill: none; stroke: var(--on-accent); stroke-width: 2.4; stroke-linecap: round; }
.sk2 .skpad svg .skm-f { fill: var(--on-accent); }
.sk2 .skpad.big { width: 112px; box-shadow: var(--copper-hi), var(--copper-glow), 0 0 0 10px var(--accent-soft); }
.sk2 .skpad.big svg { width: 44px; height: 44px; }
.sk2 .skpad.on { width: 120px; background: var(--copper); }
.sk2 .skpad-stop { width: 34px; height: 34px; border-radius: 8px; background: var(--on-accent); }
.sk2 .skpad .skpad-ring { position: absolute; inset: -12px; bottom: auto; width: auto; height: auto; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--accent-line); display: block; transform: scale(calc(1 + var(--lv, 0) * .2)); transition: transform .1s; }
.sk2 .skpad .skpad-ring.r2 { inset: -26px; opacity: .5; }
.sk2 .skpad:focus-visible { outline: 3px solid var(--fg); outline-offset: 6px; }
.sk-start { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sk-start b { margin-top: 10px; font: 700 18px var(--display); letter-spacing: .04em; color: var(--fg); }
.sk-start span { font: 700 14px var(--sans); color: var(--fg-2); text-align: center; }
.sk-dock { position: sticky; bottom: calc(10px + var(--safe-b)); display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 22px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: 0 6px 18px rgba(0,0,0,.12); z-index: 5; }
.sk-dockt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sk-dockt b { font: 700 15px var(--display); color: var(--fg); }
.sk-dockt span { font: 700 13px var(--sans); color: var(--fg-2); }
.sk-dock .sk-done { min-height: 60px; padding: 0 14px; font: 700 16px var(--display); letter-spacing: .02em; white-space: nowrap; }
.sks-dock .sks-edit { min-height: 60px; flex: none; padding: 0 14px; }
.sks-dock .sk-done { flex: 1; }
/* recording */
.sk-rec { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.sk-reclab { display: flex; align-items: center; gap: 10px; }
.sk-reclab i { width: 12px; height: 12px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 5px var(--accent-soft); }
.sk-reclab b { font: 800 13px var(--sans); letter-spacing: .1em; color: var(--accent-ink); }
.sk-reclab span { margin-left: auto; font: 700 18px var(--display); color: var(--fg); }
.sk-recard { padding: 16px; border-radius: 22px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.sk-recard svg { display: block; width: 100%; height: 120px; }
.sk-recard p { margin: 10px 0 0; font: 700 15px var(--sans); color: var(--fg-2); }
.sk-fits small { font: 800 12px var(--sans); letter-spacing: .1em; color: var(--fg-2); }
.sk-fits div { display: flex; gap: 8px; margin-top: 8px; }
.sk-fits .skc { min-width: 52px; height: 44px; padding: 0 14px; box-sizing: border-box; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); font: 700 18px var(--display); color: var(--accent-ink); }
.sk-recbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; padding-top: 30px; }
.sk-side { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 800 13px var(--sans); color: var(--fg); }
.sk-round { width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid var(--bronze-line); border-radius: 50%; background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.sk-round svg { width: 24px; height: 24px; }
.sk-round:disabled { opacity: .45; }
.sk-mid { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.sk-mid b { font: 700 16px var(--display); letter-spacing: .04em; color: var(--fg); text-align: center; }
/* the key card */
.sk-keyc { padding: 12px 14px; border-radius: 18px; background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: #14213D; }
:root[data-look="festival"] .sk-keyc, :root[data-look="green"] .sk-keyc { background: var(--strings-deep); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 70%, #000); color: #fff; }
.sk-keyc > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.sk-keyc b { font: 700 22px var(--display); }
.sk-keyc span { font: 800 12px var(--sans); letter-spacing: .08em; }
.sk-keyc small { display: block; margin-top: 6px; font: 700 13px var(--sans); }
.sk-keych { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sk-keyc .skfam-c { min-width: 46px; height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: #fff; color: #14213D; font: 700 17px var(--display); }
/* your take */
.sk-take { padding: 14px; border-radius: 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.sk-take-top { display: flex; align-items: center; gap: 10px; }
.sk-take h2 { margin: 0; font: 700 18px var(--display); color: var(--fg); }
.sk-take-top span { font: 700 13px var(--sans); color: var(--fg-2); }
.sk-tplay { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--fg); color: var(--bg); }
.sk-tplay svg { width: 18px; height: 18px; }
.sk-strip { position: relative; margin-top: 14px; height: 76px; border-radius: 12px; background: var(--card-2); touch-action: none; }
.sk-strip svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-strip rect.a { fill: var(--accent); } .sk-strip rect.b { fill: var(--strings-deep); }
.sk-cut { position: absolute; top: -8px; width: 32px; height: 92px; margin-left: -16px; border: 0; background: none; padding: 0; display: flex; justify-content: center; touch-action: none; cursor: ew-resize; }
.sk-cut i { width: 4px; height: 100%; border-radius: 2px; background: var(--fg); }
.sk-cut::after { content: ""; position: absolute; top: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg); }
.sk-cut:focus-visible { outline: 2px solid var(--accent); }
.sk-take small { display: block; margin-top: 12px; font: 700 13px var(--sans); color: var(--fg-2); }
/* the lines */
.sk-lines { display: flex; flex-direction: column; gap: 10px; }
.skl { padding: 10px 6px 10px 12px; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); }
.skl.last { border-color: var(--accent); box-shadow: 0 4px 0 var(--accent-soft); }
.skl-top { display: flex; gap: 10px; align-items: center; }
.skl-n { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card-2); font: 700 14px var(--display); color: var(--fg); }
.skl.last .skl-n { background: var(--copper); color: var(--on-accent); }
.sk2 .sknb-line { padding: 16px 0 2px; font: 800 17px/1.9 var(--sans); }
.sk2 .sknb-w b { font: 800 14px var(--sans); }
.sk2 .sknb-in { font: 800 17px var(--sans); min-height: 44px; }
.skl-opt { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; }
.skl-opt svg { width: 22px; height: 22px; fill: var(--fg-2); }
.skl-hint { margin: 8px 0 2px 38px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--fans) 30%, var(--card)); color: var(--fg); font: 700 14px var(--sans); text-align: left; }
.skl-hint svg { width: 18px; height: 18px; flex: none; }
/* a line's options */
.panel.sk-sheet { bottom: 0; display: flex; flex-direction: column; gap: 14px; max-height: calc(100dvh - 60px - var(--safe-t)); overflow-y: auto; padding: 10px 18px calc(22px + var(--safe-b)); box-sizing: border-box; border-radius: 26px 26px 0 0; }
.sk-sheet h2 { margin: 2px 0 0; font: 700 20px var(--display); color: var(--fg); }
.sk-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sk-opts button { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border: 1px solid var(--bronze-line); border-radius: 14px; background: linear-gradient(180deg, var(--card-2), var(--card)); font: 700 17px var(--display); color: var(--fg); }
.sk-opts button.on { border-color: var(--accent); background: var(--accent-soft); }
.sk-opts small { font: 800 12px var(--sans); letter-spacing: .06em; color: var(--accent-ink); }
.sk-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sk-acts button { min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--bronze-line); border-radius: 16px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); font: 700 14px var(--display); color: var(--fg); }
.sk-acts svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.sk-acts svg .skm-f { fill: none; }
.sk-acts button:disabled { opacity: .45; }
.sk-join { min-height: 48px; }
.sk-rm { min-height: 48px; border: 0; background: none; color: var(--bad, #B42318); font: 800 15px var(--sans); }
/* Your song */
.sks-name input { width: 100%; box-sizing: border-box; min-height: 48px; border: 0; border-bottom: 2px dashed var(--rim); background: none; font: 700 30px var(--display); color: var(--fg); padding: 0; }
.sks-player { padding: 14px; border-radius: 22px; background: #14213D; color: #fff; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
.sks-top { display: flex; align-items: center; gap: 12px; }
.sks-play { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--copper); box-shadow: var(--copper-hi), var(--copper-glow); color: var(--on-accent); }
.sks-play svg { width: 22px; height: 22px; }
.sks-t { flex: 1; } .sks-t b { font: 700 16px var(--display); }
.sks-bar { margin-top: 8px; height: 6px; border-radius: 3px; background: #2A3A63; overflow: hidden; }
.sks-bar i { display: block; width: 0; height: 100%; background: var(--copper); }
.sks-lines { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sks-l { padding: 6px 10px; margin: 0 -10px; border-radius: 12px; opacity: .72; transition: opacity .2s, background .2s; }
.sks-l.on { opacity: 1; background: rgba(255,255,255,.1); }
.sks-c { font: 800 13px var(--sans); color: #FF9BBD; white-space: pre; }
.sks-w { font: 800 17px var(--sans); }
.sks-w i { font-weight: 600; opacity: .8; }
.sks-win { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--copper); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: #14213D; }
.sks-win b { display: block; font: 700 17px var(--display); }
.sks-win span { font: 700 14px var(--sans); }
.sks-badge { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2.5px solid #14213D; }
.sks-badge svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .sk2 .skpad .skpad-ring { transition: none; transform: none; } }

/* ---- 4.75.0: the Road's path, plan A: shows are tickets, the next stop names itself, the card says what you'd earn.
   All of this release's look is in this block (roll back: revert the 4.75.0 commit). ---- */
.rd-stop.cur { margin-top: 30px; }
.rd-tag { position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%); z-index: 2; padding: 5px 11px; border-radius: 12px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: var(--fg); font: 800 13px var(--sans); white-space: nowrap; pointer-events: none; animation: rd-tagbob 2.4s ease-in-out infinite; }
.rd-tag::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
@keyframes rd-tagbob { 50% { transform: translate(-50%, -3px); } }
.rd-path.has-pop .rd-tag { display: none; }
.rd-earn { display: flex; gap: 6px; margin: -2px 0 10px; }
.rd-earn span { height: 24px; padding: 0 9px; border-radius: 8px; background: color-mix(in srgb, currentColor 14%, transparent); font: 800 12.5px var(--sans); display: flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .rd-tag { animation: none; } }
/* 4.75.1: the next stop's Start is white on its card in every palette (the palette's primary-button rule
   was more specific and painted it in the card's own colour) */
:root[data-look] .rd-pop.now .rd-start { background: #fff; color: var(--streak-deep); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 45%, #fff); }
:root[data-look] .rd-pop.now .rd-start:active:not(:disabled) { box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32) 45%, #fff); }

/* 4.77.0: Headliner (black, gold and chrome under a blacklight: violet, gold and blaze orange). It is a dark
   look and shares Neon Midnight's dark fixes above; these are the places Neon names its own colours. */
:root[data-look="headliner"] { --g-verse: #F5C542; --g-chorus: #9B5CFF; --g-bridge: #FF7A1A; --g-solo: #CFD4DA; }
:root[data-look="headliner"] .sk { --sk-bg: #F5C542; --sk-deep: #A87F0C; --sk-ink: #3D2A00; }
:root[data-look="headliner"] .rd-node.done, :root[data-look="headliner"] .rd-node.box.done, :root[data-look="headliner"] .rd-node.headline:not(.locked) { color: #16171B; }
:root[data-look="headliner"] .rd-flag .rd-other { color: var(--accent-ink); }
/* 4.77.0: five looks don't fit beside the Theme label on a phone, so the choices take their own line */
.set:has(#s-theme) { flex-wrap: wrap; row-gap: 10px; }
.set #s-theme { margin-left: 0; flex: 1 0 100%; display: flex; }
.set #s-theme button { flex: 1 1 auto; padding: 0 6px; }
/* 4.77.1: played stops are chrome in Headliner, as in the mockup (they took the success green) */
:root[data-look="headliner"] .rd-node.done:not(.box) { --pk: #CFD4DA; --pkd: #7B8188; }
/* 4.78.0: a look you don't have yet, in Settings > Look: a lock, and a tap opens the Merch table */
.set #s-theme button.locked { color: var(--muted); gap: 3px; display: inline-flex; align-items: center; justify-content: center; }
.set #s-theme button.locked svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
/* 4.78.0: Looks on the Merch table: a strip of the palette's colours, ground first */
.mc-look { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 118px; border: 1px solid var(--bronze-line); border-radius: 18px; background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg); padding: 6px 6px 10px; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); font-family: var(--sans); }
.mc-look.on { border: 3px solid var(--strings); }
.mc-look b { margin: 2px 0 5px; font: 700 13.5px var(--display); text-align: center; }
.mc-sw, .mt-sw { display: flex; width: 100%; height: 54px; border-radius: 12px; overflow: hidden; }
.mc-sw i, .mt-sw i { flex: 1; display: block; } .mc-sw i:first-child, .mt-sw i:first-child { flex: 2.2; }
.mc-on.earn { display: inline-flex; align-items: center; gap: 4px; background: var(--card-2); color: var(--fg-2); }
.mc-on.earn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.mt-look { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mt-sw { width: 220px; height: 34px; border-radius: 10px; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
/* 4.78.0: Headliner earned, a sheet on the Road the first time a headline show is done */
.rd-hl .pbody { text-align: center; padding-bottom: calc(18px + var(--safe-b)); }
.rd-hl-lou { display: flex; justify-content: center; margin: 4px 0 6px; }
.rd-hl h2 { font: 700 26px var(--display); margin: 0 0 6px; }
.rd-hl p { color: var(--fg-2); margin: 0 0 16px; }
.rd-hl-acts { display: flex; flex-direction: column; gap: 8px; }
/* 4.78.3: the chord you tap shows on a solid light tile in every look, like Waiting for a chord. Over an album
   cover the card took the cover's see-through tint and its lines the look's white, so the shape was hard to read. */
:root .shapecard, :root[data-look] .shapecard { background: #F3F1FF; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32), 0 10px 28px rgba(0,0,0,.35); -webkit-backdrop-filter: none; backdrop-filter: none;
  --fg: #1C1A3A; --fg-2: #3A3760; --muted: #5E5A80; }
:root .shapecard .sc-top b, :root[data-look] .shapecard .sc-top b { color: #1C1A3A; }
.shapecard .df { stroke-opacity: .5; stroke-width: 1; } .shapecard .ds { stroke-opacity: .75; stroke-width: 1; }
.shapecard .sc-x { background: #1C1A3A; color: #fff; border: 0; }
/* 4.78.3: over an album cover the chords take the accent itself; Headliner's accent is the deep violet made for
   white button text, so its chords there use the light violet instead (5.9:1 on a dark red cover, not 3:1) */
:root[data-look="headliner"] body.covered { --accent-ink: #B98CFF; }
/* 4.80.4: iPhone enlarges long runs of text on its own ("text autosizing"). On a song with chords inside the
   words, the plain words of a long line grew while the words under a chord kept their size, so one line mixed
   two sizes. The app sets its own text size (from the phone's text size setting), so this is off everywhere. */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


/* ==========================================================================
   The fretboard Road (4.82.0): each leg is a guitar neck (fretboard.js). The woods and finishes keep the
   guitar's own colours in every look; the dots, rings, halos and tags take the look's colours. Everything is
   scoped to .rd-neck so Opening night (still picks) is untouched.
   ========================================================================== */
.rd-neck { position: relative; isolation: isolate; flex: none; width: min(100%, 390px); }
.rd-neck > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rd-neck > svg.rd-base.nano { overflow: hidden; }
.rd-neck .rd-strings { z-index: 2; pointer-events: none; }
.rd-neck .rd-stop { position: absolute; left: 0; right: 0; height: 0; display: block; transform: none; margin: 0; z-index: 1; }
.rd-neck .rd-stop.k-dot { z-index: 3; }
.rd-neck .rd-stop:has(.rd-pop) { z-index: 6; }
.rd-neck .rd-node:is(.chord, .switch, .scale, .box, .headline, .now, .open, .locked, .done, .big) {
  position: absolute; top: 0; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 0; border: 0; padding: 0;
  background: none; box-shadow: none; overflow: visible; display: block; color: #fff;
  --pk: var(--accent); --pkd: var(--accent-deep);
}
.rd-neck .rd-node:is(.box, .big) { width: 60px; }
.rd-neck .rd-node.headline { width: 112px; }
.rd-neck .rd-node.now:not(.box, .headline) { width: 60px; height: 60px; --pk: var(--streak); --pkd: var(--streak-deep); }
.rd-neck .rd-node.locked { --pk: var(--locked); --pkd: var(--locked-deep); }
:root[data-look="headliner"] .rd-neck .rd-node.done { --pk: var(--accent); --pkd: var(--accent-deep); }
.rd-neck .rd-node:is(.now, .done):active { transform: translate(-50%, -50%) scale(.94); box-shadow: none; }
.rd-neck .rd-node::after { display: none; }
.rd-neck .rd-node svg.rd-dot, .rd-neck .rd-node svg.rd-inlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rd-neck .rd-node .rd-dot .rd-body { fill: var(--pk); animation: none; }
.rd-neck .rd-node .rd-dot .rd-lip { fill: var(--pkd); animation: none; }
.rd-neck .rd-node .rd-dot .rd-shine { fill: rgba(255, 255, 255, .4); stroke: none; animation: none; }
.rd-neck .rd-node.locked .rd-dot .rd-shine { display: none; }
/* 4.82.1: locked dots read on the dark woods in the dark looks; an open stop is a ring, not a done dot */
:root[data-theme="dark"] .rd-neck .rd-node.locked { --pk: #8d93a8; --pkd: #5d6378; }
:root[data-theme="dark"] .rd-neck .rd-node.locked .rd-pin { background: #2c3042; }
.rd-neck .rd-node.open { --pk: #2c1f17; --pkd: #14100d; }
.rd-neck .rd-node.open .rd-dot .rd-body { stroke: var(--accent); stroke-width: 4; }
.rd-neck .rd-node .rd-ic { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #fff; pointer-events: none; animation: none; }
.rd-neck .rd-node .rd-ic svg { width: 22px; height: 22px; }
.rd-neck .rd-node.now .rd-ic svg { width: 28px; height: 28px; }
.rd-neck .rd-pin { width: 8px; height: 8px; border-radius: 50%; background: var(--locked-ic); }
/* the halo breathes on the next stop */
.rd-neck .rd-node .rd-halo { fill: var(--streak); opacity: .24; transform-box: fill-box; transform-origin: center; animation: rd-halof 1.8s ease-in-out infinite; }
@keyframes rd-halof { 0%, 100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.22); opacity: .12; } }
/* inlays: an empty pocket, set in pearl, lit when the headline show is next */
.rd-neck .rd-pit { fill: rgba(0, 0, 0, .5); stroke: rgba(255, 255, 255, .24); stroke-width: 1.5; stroke-linejoin: round; }
.rd-neck .rd-rec { fill: #14100d; stroke: #14100d; stroke-width: 6; stroke-linejoin: round; }
.rd-neck .rd-pearl { fill: #f4ecdc; }
.rd-neck .rd-pearl.abalone { fill: #7fd1c7; }
.rd-neck .rd-pearl.star { fill: #F5C542; }
.rd-neck .rd-sheen { fill: #fff; opacity: .9; }
.rd-neck .rd-sheen2 { fill: #ddd0ee; opacity: .8; }
.rd-neck .rd-ring { fill: none; stroke: var(--streak); stroke-width: 3; }
.rd-neck .rd-ring.dash { stroke: var(--fans); stroke-width: 2.4; stroke-dasharray: 4 5; }
.rd-neck .rd-node.opening .rd-pearl { transform-box: fill-box; transform-origin: center; animation: rd-set .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rd-set { from { transform: scale(1.5); opacity: 0; } }
/* the tag beside the next stop, in the margin */
.rd-neck .rd-tag { top: 0; bottom: auto; transform: translateY(-50%); max-width: 78px; padding: 5px 9px; font-size: 13px; line-height: 1.15; text-align: center; white-space: normal; animation: rd-tagbobf 2.4s ease-in-out infinite; }
.rd-neck .rd-tag.l { left: auto; }
.rd-neck .rd-tag::after { bottom: auto; top: 50%; margin: -5px 0 0; }
.rd-neck .rd-tag.l::after { left: auto; right: -5px; }
.rd-neck .rd-tag.r::after { left: -5px; }
@keyframes rd-tagbobf { 50% { transform: translateY(calc(-50% - 3px)); } }
/* a stop's card opens over the neck, centred, its point on the stop */
.rd-neck .rd-pop { position: absolute; left: 50%; top: 42px; margin: 0; transform: translateX(-50%); z-index: 7; animation: rd-popf .22s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes rd-popf { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.96); } }
.rd-neck .rd-earned { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 3; padding: 4px 12px; border-radius: 999px; background: var(--copper); color: #3D2A00; font: 800 12px var(--sans); white-space: nowrap; pointer-events: none; }
.rd-newg { align-self: center; margin: -6px 0 -4px; padding: 4px 12px; border-radius: 999px; background: var(--accent-deep); color: #fff; font: 800 12px var(--sans); letter-spacing: .04em; }
/* the new-guitar sheet */
.rd-gt-row { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin: 4px 0 8px; }
.rd-gt-art svg { display: block; height: 230px; width: auto; }
@media (prefers-reduced-motion: reduce) { .rd-neck .rd-node .rd-halo, .rd-neck .rd-tag, .rd-neck .rd-pop, .rd-neck .rd-node.opening .rd-pearl { animation: none; } }

/* ---- 4.83.0: the Gig and Show complete, from Graham's gig night (2026-10-29) ---- */
/* the words never show behind the section chip or the crowd: the band above them is solid down past the crowd,
   then fades; over a song's cover it is the controls' dark glass (4.60.1), blurred */
.gig::before { height: calc(var(--safe-t) + 176px); background: linear-gradient(180deg, var(--bg) calc(var(--safe-t) + 128px), transparent); }
body.covered .gig::before { background: rgba(20, 18, 24, .86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--safe-t) + 128px), transparent); mask-image: linear-gradient(180deg, #000 calc(var(--safe-t) + 128px), transparent); }
/* a note on a chord line, "(hold)": read, not played */
.c.cnote i { font-style: normal; font-weight: 600; font-size: .82em; color: var(--muted); }
/* Show complete scrolls to the screen's bottom edge, not to a line above it */
.gig.done { padding-bottom: 0; }
.gig.done .gc { padding-bottom: calc(28px + var(--safe-b)); }
.gc-worst { width: 100%; box-sizing: border-box; }
/* the tiles' numbers on a solid inside over a cover; the Chords label in dark ink on the light tile colours */
body.covered .gc-tile b { background: rgba(20, 18, 24, .82); color: #FFFFFF; }
:root[data-theme="dark"] .gc-tile.beat small { color: #14213D; }
/* section names fit their chip: INTERLUDE on one line, INTERLUDE 2 too */
.gc-sec > b { width: 80px; padding: 4px 3px; box-sizing: border-box; font-size: 12px; letter-spacing: .03em; overflow-wrap: anywhere; }
/* 4.83.0: a chord stop's card says how many more songs with it finish the stop */
.rd-pop p.rd-alt { margin: 12px 0 0; font: 700 13px var(--sans); }
/* 4.84.0: inlay materials, one per guitar; the crate's slats; a lesson's songs badge */
.rd-neck .rd-pearl.mat-pearl { fill: #f4ecdc; }
.rd-neck .rd-pearl.mat-black { fill: #1c1d22; }
.rd-neck .rd-pearl.mat-mop { fill: #eef1f4; }
.rd-neck .rd-pearl.mat-abalone { fill: #63c7b6; }
.rd-neck .rd-pearl.mat-gold { fill: #F5C542; }
.rd-neck .rd-node:has(.mat-black) .rd-sheen { fill: #6a6e78; }
.rd-neck .rd-node:has(.mat-black) .rd-sheen2 { fill: #3a3e48; }
.rd-neck .rd-node:has(.mat-mop) .rd-sheen { fill: #f7c9df; }
.rd-neck .rd-node:has(.mat-mop) .rd-sheen2 { fill: #bfeee6; }
.rd-neck .rd-node:has(.mat-abalone) .rd-sheen { fill: #b7f0e2; }
.rd-neck .rd-node:has(.mat-abalone) .rd-sheen2 { fill: #8a6fd8; }
.rd-neck .rd-node:has(.mat-gold) .rd-sheen { fill: #fff1b8; }
.rd-neck .rd-node:has(.mat-gold) .rd-sheen2 { fill: #d9a520; }
.rd-neck .rd-eng { fill: none; stroke: rgba(0, 0, 0, .28); stroke-width: 2.2; }
.rd-neck .rd-node:has(.mat-black) .rd-eng { stroke: rgba(255, 255, 255, .22); }
.rd-neck .rd-songs { position: absolute; right: -10px; top: -8px; z-index: 2; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 5px; border-radius: 999px; background: var(--copper); color: #3D2A00; font: 800 12px/1 var(--sans); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); pointer-events: none; }
.rd-neck .rd-songs svg { width: 9px; height: 11px; fill: currentColor; }

/* 4.85.0 your guitarist: the player drawn where the app means you (guitarist.js). Louie stays the mascot elsewhere. */
.ch-av svg, .du-av svg, .bt-av svg { display: block; width: 100%; height: auto; }
.bt-av { overflow: hidden; }
.pf-pc-lou svg { width: 108px; height: auto; margin-top: 4px; }
.gm .pbody h2 { font: 700 24px var(--display); margin: 0 0 4px; text-align: center; }
.gm .pbody h3 { font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.gm-prev { display: flex; justify-content: center; margin: 4px 0 2px; }
.gm-prev svg { height: 190px; width: auto; }
.gm-ask { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.gm-ask p { margin: 0; color: var(--fg-2, var(--muted)); font-weight: 700; }
.gm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-starts { display: grid; grid-template-columns: repeat(4, 1fr); }
.gm-c { min-width: 44px; min-height: 44px; border: 0; border-radius: 16px; background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--fg); font: 700 14px var(--sans); padding: 4px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 3px 0 var(--hair, rgba(0,0,0,.18)); }
.gm-c.on { background: var(--copper); color: var(--on-accent, #fff); box-shadow: 0 3px 0 var(--accent-deep, rgba(0,0,0,.25)); }
.gm-c svg { width: 52px; height: auto; display: block; }
.gm-starts .gm-c { padding: 4px; }
.gm-starts .gm-c svg { width: 100%; max-width: 64px; }
.gm-hair .gm-c { flex-direction: column; gap: 0; padding: 4px 6px 6px; }
.gm-hair .gm-c span { font-size: 12px; }
.gm-c i { width: 26px; height: 26px; border-radius: 50%; display: block; }
.gm-c[data-k="skin"], .gm-c[data-k="hairCol"], .gm-c[data-k="top"], .gm-c[data-k="extraCol"] { padding: 0; border-radius: 50%; width: 44px; height: 44px; }
.gm-c[data-k="skin"].on, .gm-c[data-k="hairCol"].on, .gm-c[data-k="top"].on, .gm-c[data-k="extraCol"].on { background: var(--fg); }
.gm-c.lock { opacity: .55; flex-direction: column; gap: 0; }
.gm-c.lock small { font: 700 12px var(--sans); }
.gm-c [style*="--pc"] { display: inline-flex; align-items: center; gap: 6px; }
.gm-c [style*="--pc"] i { width: 14px; height: 14px; background: var(--pc); }
.gm-note { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.gm .pfoot { display: flex; flex-direction: column; gap: 6px; }
.pf-pc-edit { margin-top: 8px; min-height: 40px; padding: 4px 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.22); color: inherit; font: 800 12px var(--sans); letter-spacing: .04em; }
.mt-wear svg { height: 230px; width: auto; display: block; }
.mc-fin svg { width: 54px; height: auto; display: block; margin: 0 auto; }

/* 4.85.1: contrast in Green Room and Headliner (axe). Ratios worked out, each at least 4.5:1:
   white on #0B6F71 5.95, #CDEBEB on #0B6F71 4.73, white on #7A2E8E 8.05, #E9D5F2 on #7A2E8E 5.85, white on #8A47F5 4.88. */
:root[data-look="green"] { --banner: #0B6F71; --banner-deep: #08585A; }
:root[data-look="green"] .mc-price:not(.short) { background: #0B6F71; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); color: #fff; }
:root[data-look="green"] .mc-price .mc-tk, :root[data-look="green"] .mc-price .mc-tkd { fill: #fff; }
:root[data-look="green"] .bd-head { color: #fff; }
:root[data-look="green"] .bd-head small { opacity: 1; color: #E9D5F2; }
:root[data-look="headliner"] .ch-btl, :root[data-look="headliner"] .ch-go:not(.done), :root[data-look="headliner"] .tq-req { color: #fff; }

/* ---------- Readability (4.89.0, docs/READABILITY-PLAN.md) ---------- */
/* Rule 1: nothing that floats is see-through. On a song with album art --card is 10% white on purpose for cards
   that sit on the page; the Gig's NOW card and the callout badge float over the words, so they stay solid. */
.gg-shape, .co-badge { background: var(--solid); }
/* Rule 6: the callout's big word in Light and Green Room: dark ink with a white edge and the accent's shadow,
   not white on a white card (the POW look has its own colours) */
:root[data-theme="light"] .co:not(.co-pow) .co-badge b, :root[data-look="festival"] .co:not(.co-pow) .co-badge b, :root[data-look="green"] .co:not(.co-pow) .co-badge b {
  color: var(--fg); -webkit-text-stroke: 3px var(--solid); text-shadow: 0 4px 0 var(--accent); }
:root[data-theme="light"] body.covered .co:not(.co-pow) .co-badge b, :root[data-look="festival"] body.covered .co:not(.co-pow) .co-badge b, :root[data-look="green"] body.covered .co:not(.co-pow) .co-badge b { color: #FFFFFF; }
/* Rule 4: locked or not yet is shown, not faded. A locked lesson keeps readable text with a small lock; a
   disabled button keeps its words on a muted fill instead of fading out. */
:root[data-look] .pk-fret.locked { color: var(--fg-2); }
.pk-fret.locked b::after { content: ""; display: inline-block; width: .62em; height: .62em; margin-left: 4px; vertical-align: .05em; background: currentColor; opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn:disabled, .btn.primary:disabled, :root[data-look] .btn.primary:disabled, :root[data-look] .btn:disabled {
  background: var(--card-2); background-image: none; color: var(--muted); border-color: var(--hair); box-shadow: none; text-shadow: none; }
/* Rule 5: wrap, don't cut */
.ch-nm, .ch-note { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.pk-board { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
.pf-goal { display: block; }
/* Step 5: a toast is full width at the bottom, above the bar, in thumb reach next to its Undo (a toast placed
   near a button keeps its own spot) */
.toast:not(.near) { top: auto; bottom: calc(104px + var(--safe-b)); width: min(496px, calc(100% - 24px)); box-sizing: border-box; justify-content: space-between; gap: 12px;
  padding: 12px 14px 12px 16px; font-size: 15px; line-height: 1.3; transform: translate(-50%, calc(100% + 120px + var(--safe-b))); }
.toast:not(.near).show { transform: translate(-50%, 0); }
.toast:not(.near) .tact { flex: none; }
/* Step 6: the rest of the list */
/* The Gig: the lines you've sung and the ones coming stay readable; chord letters in the light looks are dark
   enough to read on the lit band; the idle crowd shows */
/* 3.2.0: the Road's light-look values (94/86/80) are gone here; they undid the focus fade in light */
:root[data-theme="light"] body.staged .sheet .c, :root[data-look="festival"] body.staged .sheet .c, :root[data-look="green"] body.staged .sheet .c { color: color-mix(in srgb, var(--gel) 48%, var(--fg)); }
:root[data-theme="light"] body.covered.staged .sheet .c:not(.st-got):not(.st-miss), :root[data-look="festival"] body.covered.staged .sheet .c:not(.st-got):not(.st-miss), :root[data-look="green"] body.covered.staged .sheet .c:not(.st-got):not(.st-miss) { color: #FFFFFF; }
.gg-status .gg-fans i { color: color-mix(in srgb, var(--fg) 22%, var(--bg)); }
body.covered .gg-status .gg-fans i { color: rgba(255, 255, 255, .3); }
/* Show complete in Green Room: the gold title on pale green can't be read */
:root[data-look="green"] .gc-t { color: var(--accent-ink); }
/* the Crowd tile's label on the accent */
.gc-tile.crowd small { color: var(--on-accent); }
/* the streak celebration in Light: a deeper pink so the words read, and stronger day dots everywhere */
:root[data-theme="light"]:not([data-look="green"]) .sk, :root[data-look="festival"] .sk { --sk-bg: #C2185B; --sk-deep: #8E1240; --sk-ink: #FFFFFF; }
.sk-week i { background: color-mix(in srgb, var(--sk-ink) 28%, transparent); }
/* the paste card shows more of the sheet before it fades */
.preview { height: 120px; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent); }
/* the tuner with the microphone off: one message across the width, not squeezed beside an empty bar */
.tn-read .tn-sayrow:has(.tn-say.warn) { grid-column: 1 / -1; justify-content: center; text-align: center; }
.tn-say.warn { font-size: 15px; font-weight: 600; color: var(--fg-2); line-height: 1.45; }
/* the language badges: deeper colours so white letters read */
.lp-de { background: #1F56B8; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); } .lp-es { background: #B34E00; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); } .lp-ru { background: #6D28D9; box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
/* (rule 5) the Tools rows: the line under a name wraps instead of ending mid-word */
.menu.tools3 .mrow.t3 .ml small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
/* the streak's Keep playing keeps dark words on its white button when the ink is white */
:root[data-theme="light"]:not([data-look="green"]) .sk .sk-foot #sk-ok, :root[data-look="festival"] .sk .sk-foot #sk-ok { color: var(--sk-deep); }
/* (rule 7) Light's hot pink (#E8336E) is 3.9:1 under dark ink: the player card and the next lesson use the brighter
   accent pink there, and the card's small line keeps full strength */
:root[data-theme="light"]:not([data-look="green"]) .pf-player, :root[data-look="festival"] .pf-player { background: var(--copper); box-shadow: var(--copper-hi), var(--copper-glow); }
:root[data-theme="light"]:not([data-look="green"]) .pk-fret.now, :root[data-look="festival"] .pk-fret.now { background: var(--copper); box-shadow: var(--copper-hi), var(--copper-glow); }
.pf-pc-who > small { opacity: 1; }
/* Step 8: what the second simulation found */
.gg-mt small { opacity: 1; color: var(--fg-2); }
.gm-c.lock { opacity: 1; color: var(--fg-2); border-style: dashed; }
.gm-c.lock small { color: var(--fg-2); }
.gm-c.lock small::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: 3px; vertical-align: -.08em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat; }
body.staged .sheet > .sec.st-past { color: var(--muted); }
:root[data-look="green"] .gg-sec { color: #FFFFFF; }
.sk-best { opacity: 1; }
:root[data-look="headliner"] .pk-fret.now { color: #16171B; }
/* Show complete's Chords tile: white words on a deeper blue in Light, white on purple in Green Room */
:root[data-theme="light"]:not([data-look="green"]) .gc-tile.beat, :root[data-look="festival"] .gc-tile.beat { background: var(--strings-deep); box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px rgba(0,0,0,.32); }
:root[data-theme="light"]:not([data-look="green"]) .gc-tile.beat small, :root[data-look="festival"] .gc-tile.beat small, :root[data-look="green"] .gc-tile.beat small { color: #FFFFFF; }

/* Louie Lite: the amp look is the only theme. Dark is the default, Light keeps the same materials. */
:root[data-look="amp"] {
  --bg: #0c0d0f; --fg: #f3f1ee; --fg-2: #c9c7c3; --muted: #8f8e8c; --accent: #eda27f; --accent-ink: #eda27f;
  --accent-deep: #6e3a1e; --on-accent: #fff8f0; --accent-soft: rgba(237,162,127,.16); --accent-line: rgba(184,147,90,.5);
  --card: rgba(255,255,255,.045); --card-2: rgba(255,255,255,.08); --rim: rgba(184,147,90,.35); --line: rgba(255,255,255,.08);
  --hair: rgba(255,255,255,.08); --bar: #17171a; --solid: #17171a; --head: #efe7da;
  --good: #e7b56a; --good-soft: rgba(231,181,106,.16); --tune: #c8804f; --tn-lit: #ffb24a;
  --strings: #b8935a; --strings-deep: #6e3a1e; --streak: #c8804f; --streak-deep: #6e3a1e;
  --fans: #d9bd85; --fans-deep: #8a6a32; --fans-text: #d9bd85;
  --banner: #b8935a; --banner-deep: #6e3a1e; --on-banner: #1c140c; --banner-sub: #f1e3c4;
  --locked: #2a2a2e; --locked-deep: #161618; --locked-ic: #8f8e8c;
  --recess: linear-gradient(180deg, #1f1910, #2e2517); --recess-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(255,244,214,.5);
  --recess-fg: #f1e3c4; --recess-dim: #a99b80; --recess-on: #ffc27a; --recess-edge: rgba(184,147,90,.45);
  --chrome-fg: #e9e9ec; --chrome-edge: #8e8e94; --chrome-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 8px rgba(0,0,0,.5);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --serif: "New York", ui-serif, "Iowan Old Style", Charter, Georgia, serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --bronze: #b8935a; --bronze-line: rgba(184,147,90,.42);
  --plate: repeating-linear-gradient(90deg, rgba(255,250,230,.07) 0 1px, rgba(0,0,0,0) 1px 3px, rgba(90,60,20,.05) 3px 4px), linear-gradient(180deg, #e6cb92, #cfab6a 42%, #b08b4f);
  --plate-shadow: inset 0 1px 0 rgba(255,246,220,.75), inset 0 -1px 0 rgba(60,40,10,.35), 0 10px 28px rgba(0,0,0,.4);
  --copper: linear-gradient(180deg, #c8804f, #9c5631); --copper-fg: #fff3e6; --copper-hi: inset 0 1px 0 rgba(255,220,190,.45); --copper-glow: 0 8px 22px rgba(156,86,49,.45);
  --chrome: radial-gradient(circle at 50% 25%, #2b2b2f, #111113);
  --lamp-off: radial-gradient(circle at 35% 30%, rgba(255,230,190,.3) 0 14%, #6b3a12 45%, #2e1606 85%);
  --lamp-on: radial-gradient(circle at 35% 30%, #fff1c9 0 12%, #ffb24a 34%, #e2661c 70%, #8a2d08);
  --lamp-glow: 0 0 8px 2px rgba(255,140,40,.6);
  --glass-tint: rgba(28,28,31,.72);
  --rim-hi: rgba(255,255,255,.12); --bg-glow: rgba(255,255,255,.05);
  --tolex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cdefs%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='3' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' surfaceScale='2.4' lighting-color='%23fff' result='l'%3E%3CfeDistantLight azimuth='235' elevation='50'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='l' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.17 0.17 0.17 0 -0.36' result='hi'/%3E%3CfeColorMatrix in='l' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.16 -0.16 -0.16 0 0.36' result='lo'/%3E%3CfeMerge%3E%3CfeMergeNode in='lo'/%3E%3CfeMergeNode in='hi'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Crect width='220' height='220' filter='url(%23t)'/%3E%3C/svg%3E");
  --tolex-card: var(--tolex), radial-gradient(circle at 30% 0, #202023, #121214);
  --tolex-inset: inset 0 0 0 3px #0b0b0c, inset 0 0 0 4px rgba(184,147,90,.22);
  --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.03) 40%, rgba(255,255,255,0) 62%, rgba(255,255,255,.06)); --glass-rim: rgba(255,255,255,.3);
}
:root[data-look="amp"][data-theme="light"] {
  --bg: #f4f1ea; --fg: #1c1b19; --fg-2: #3a342c; --muted: #3e3933; --accent: #8a3f1c; --accent-ink: #6e3016;
  --accent-deep: #6e3016; --on-accent: #fff8f0; --good: #085c38; --good-ink: #085c38;
  --card: #fffdf8; --card-2: #fff; --rim: rgba(134,102,58,.35); --line: rgba(80,60,30,.12);
  --hair: rgba(80,60,30,.14); --bar: #fffdf8; --solid: #fffdf8;
  --strings: #8a5a2b; --strings-deep: #6e3016; --streak: #8a3f1c; --streak-deep: #6e3016;
  --recess: #efe6d6; --recess-fg: #1c1b19; --recess-dim: #5c5348; --recess-on: #6e3a1e;
  --glass-tint: rgba(255,252,246,.82);
  --rim-hi: rgba(255,255,255,.9); --bg-glow: rgba(255,255,255,.6);
  --tolex-card: var(--card); --tolex-inset: inset 0 0 0 3px var(--card), inset 0 0 0 4px rgba(134,102,58,.2);
  --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.15) 45%, rgba(255,255,255,0) 65%, rgba(255,255,255,.3)); --glass-rim: rgba(255,255,255,.9);
}
:root[data-look="amp"] body { background: radial-gradient(120% 50% at 50% -10%, var(--bg-glow), transparent 60%), var(--bg); background-attachment: fixed; color: var(--fg); font-family: var(--sans); }
:root[data-look="amp"] .app { background: none; color: var(--fg); font-family: var(--sans); }
:root[data-look="amp"] .title, :root[data-look="amp"] h1.title, :root[data-look="amp"] .song-title { font-family: var(--serif); font-weight: 600; letter-spacing: .2px; }
:root[data-look="amp"] .btn, :root[data-look="amp"] .btn.primary, :root[data-look="amp"] .chip, :root[data-look="amp"] .stat, :root[data-look="amp"] .seg button { font-family: var(--sans); }
:root[data-look="amp"] .set:has(#s-fin) { flex-wrap: wrap; }
:root[data-look="amp"] #s-fin { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; margin-left: 0; height: auto; }
:root[data-look="amp"] #s-fin button { flex: 1 1 22%; }
:root[data-look="amp"] .pf-player { background: var(--tolex-card, #161618); color: #fff8f0; border: 1px solid var(--bronze-line); box-shadow: var(--tolex-inset, none), 0 10px 28px rgba(0,0,0,.4); }
:root[data-look="amp"][data-theme="light"] .pf-player { background: var(--plate); color: #2a1d10; border-color: #6d5326; box-shadow: var(--plate-shadow); }
:root[data-look="amp"] .pf-pc-who > small, :root[data-look="amp"] .pf-pc-venue, :root[data-look="amp"] .pf-pc-venue b, :root[data-look="amp"] .pf-pc-venue span { color: #fff8f0; }
:root[data-look="amp"] .btn { min-height: 42px; border-radius: 16px; }
:root[data-look="amp"] .btn.primary { min-height: 56px; background: var(--copper); color: var(--copper-fg); border: 1px solid #6e3a1e; box-shadow: var(--copper-hi), var(--copper-glow); }
:root[data-look="amp"] .btn:not(.primary) { background: var(--chrome); color: #e9e9ec; border: 1px solid #3a3a40; }
:root[data-look="amp"] .chip { height: 32px; border: 1px solid var(--bronze-line); background: var(--card); }
:root[data-look="amp"] .chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lamp-off); box-shadow: 0 0 0 1.5px rgba(0,0,0,.45); flex: none; }
:root[data-look="amp"] .chip.on::before { background: var(--lamp-on); box-shadow: 0 0 0 1.5px rgba(0,0,0,.45), var(--lamp-glow); }
:root[data-look="amp"] .set-group, :root[data-look="amp"] .panel, :root[data-look="amp"] .card, :root[data-look="amp"] .endcard { border: 1px solid var(--bronze-line); }
:root[data-look="amp"] .app.viewer .dock { background: var(--plate); box-shadow: var(--plate-shadow); border: 1px solid #6d5326; border-radius: 22px; padding: 8px; }
:root[data-look="amp"] .app.viewer .pw, :root[data-look="amp"] .app.viewer .player { background: none; border: 0; box-shadow: none; }
:root[data-look="amp"] .app.viewer .player .tl { width: 52px; height: 52px; border: 0; border-radius: 14px; background: var(--recess); color: var(--recess-fg); box-shadow: var(--recess-shadow); }
:root[data-look="amp"] .app.viewer .player .tl.tools { width: auto; flex: 1; display: flex; gap: 8px; }
:root[data-look="amp"] .app.viewer .player .play { height: 52px; border-radius: 14px; background: var(--copper); color: var(--copper-fg); border: 1px solid #6e3a1e; box-shadow: var(--copper-hi); font: 600 16px var(--sans); letter-spacing: 0; text-transform: none; }
:root[data-look="amp"] .app.viewer .player .play::before { display: none; }
:root[data-look="amp"] .dock.kb { background: none; box-shadow: none; border: 0; padding: 0; gap: 10px; }
:root[data-look="amp"] .dock.kb .cmd { height: 52px; border-radius: 16px; background: var(--glass-tint); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--bronze-line); box-shadow: none; color: var(--fg); }
:root[data-look="amp"] .dock.kb .cmd input { color: var(--fg); }
:root[data-look="amp"] .dock.kb .cmd input::placeholder { color: #c9c7c3; }
:root[data-look="amp"][data-theme="light"] .dock.kb .cmd input::placeholder { color: #3e3933; }
:root[data-look="amp"] .qcancel { color: #f3f1ee; }
:root[data-look="amp"][data-theme="light"] .qcancel { color: #1c1b19; }
:root[data-look="amp"] .dock.kb .add { width: 56px; height: 56px; border-radius: 16px; background: var(--plate); color: #fff3e6; border: 1px solid #6d5326; box-shadow: var(--plate-shadow); padding: 0; }
:root[data-look="amp"] .dock.kb .add-in { width: 44px; height: 44px; border-radius: 11px; background: var(--copper); box-shadow: var(--copper-hi); display: grid; place-items: center; }
:root[data-look="amp"] .dock.kb .add-in .i { width: 22px; height: 22px; color: #fff3e6; }
:root[data-look="amp"] .dock .play { background: var(--copper); color: var(--copper-fg); border: 1px solid #6e3a1e; }
:root[data-look="amp"] .menu.tools, :root[data-look="amp"] .panel { background: var(--glass-tint); backdrop-filter: blur(18px); }
:root[data-look="amp"][data-theme="light"] .btn:not(.primary) { background: #fff; color: var(--fg); border: 1px solid var(--bronze-line); }
:root[data-look="amp"] .tuner2 { background: #121214; box-shadow: inset 0 0 0 1px rgba(184,147,90,.45); }
/* Neon Midnight used to leak through wherever a variable was left unset: lime lips, an indigo panel, teal covers. */
:root[data-look="amp"] #play,
:root[data-look="amp"] body.fold .fp #play {
  background: var(--copper); color: var(--copper-fg); border: 1px solid #6e3a1e; box-shadow: var(--copper-hi), var(--copper-glow);
}
:root[data-look="amp"] .cmd, :root[data-look="amp"] .float { border-color: var(--bronze-line); box-shadow: none; }
:root[data-look="amp"] .set .tile, :root[data-look="amp"] .gs-ic, :root[data-look="amp"] .more-ic,
:root[data-look="amp"] .menu.tools .mrow.tl .mi {
  background: var(--card); color: var(--accent); border: 1px solid var(--bronze-line);
}
:root[data-look="amp"] .fp-band { background: var(--chrome); color: var(--chrome-fg); }
:root[data-look="amp"] .row .a .st.learning { color: var(--accent); }
:root[data-look="amp"] .ls-step.done .ls-n, :root[data-look="amp"] .rh-ycs .ls-n { background: var(--copper); color: var(--copper-fg); box-shadow: var(--copper-hi); }
:root[data-look="amp"] #chips .chip.on, :root[data-look="amp"] .seg button.on {
  background: var(--copper); color: var(--copper-fg); box-shadow: var(--copper-hi), 0 4px 12px rgba(156,86,49,.35); border-color: #6e3a1e;
}
:root[data-look="amp"][data-theme="dark"] #chips .chip.on, :root[data-look="amp"][data-theme="dark"] .seg button.on,
:root[data-look="amp"] .pk-fret.now {
  background: var(--copper); color: var(--copper-fg); box-shadow: var(--copper-hi);
}
:root[data-look="amp"] .ch-head { background: var(--tolex-card, #161618); box-shadow: var(--tolex-inset, none); color: #fff8f0; } :root[data-look="amp"] .ch-head small, :root[data-look="amp"] .ch-head h1 { background: none; color: #fff8f0; }
.sp-hero .louie { --lv-body: #0f0f11; --lv-shade: #0f0f11; --lv-hi: #b8935a; --lv-face: #d9bd85; --lv-face-sh: #b08b4f; --lv-grille: #2e2116; --lv-slat: #4a3524; --lv-pupil: #1a120d; --lv-cheek: #c8804f; --lv-tongue: #c8804f; --lv-lamp: #ffb24a; }
.sp-hero .louie .lv-b { fill: url(#tolex); }

/* Louie Lite 3.0.1: 2.49's depth. Floating bars are liquid glass with a bright top rim; sheets are
   frosted; cards are glass gradients with a highlight edge; the main action is copper with a glow. */
:root[data-look="amp"] .dock.kb .cmd, :root[data-look="amp"] .float {
  background: var(--glass-sheen), var(--glass-tint);
  -webkit-backdrop-filter: blur(12px) saturate(190%) brightness(1.06); backdrop-filter: blur(12px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 rgba(255,255,255,.07), 0 10px 28px rgba(0,0,0,.35);
}
:root[data-look="amp"] .menu.tools, :root[data-look="amp"] .panel {
  background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  border-top: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi), 0 -18px 40px rgba(0,0,0,.45);
}
:root[data-look="amp"] .set-group, :root[data-look="amp"] .list, :root[data-look="amp"] .card {
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi);
}
:root[data-look="amp"] .btn:not(.primary) { background: var(--chrome); color: var(--chrome-fg); border: 1px solid var(--chrome-edge); box-shadow: var(--chrome-shadow); }
:root[data-look="amp"][data-theme="light"] .btn:not(.primary) { background: radial-gradient(circle at 50% 25%, #ffffff, #e6e6e9); color: #2a2a2d; border: 1px solid #a3a3a9; box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,.12); }
:root[data-look="amp"] .btn.primary, :root[data-look="amp"] .btn.sm.primary { background: var(--copper); color: var(--copper-fg); border: 1px solid #6e3a1e; box-shadow: var(--copper-hi), var(--copper-glow); }
:root[data-look="amp"] .btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.95); }
:root[data-look="amp"] #chips .chip { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px 0 var(--rim-hi); color: var(--fg-2); }
:root[data-look="amp"] #chips .chip.on { background: var(--accent-soft); color: var(--fg); border-color: rgba(237,162,127,.6); box-shadow: inset 0 1px 0 var(--rim-hi), 0 0 12px rgba(237,162,127,.18); }
:root[data-look="amp"] .seg { background: var(--recess); box-shadow: var(--recess-shadow); border: 1px solid var(--recess-edge); }
:root[data-look="amp"] .seg button { color: var(--recess-dim); background: none; box-shadow: none; }
:root[data-look="amp"] .seg button.on, :root[data-look="amp"][data-theme="dark"] .seg button.on { background: var(--copper); color: var(--copper-fg); box-shadow: var(--copper-hi); }
:root[data-look="amp"] .title, :root[data-look="amp"] h1.title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
:root[data-look="amp"] .title.script { font-family: var(--serif); font-weight: 400; font-style: normal; }
:root[data-look="amp"][data-theme="light"] .ch-head { background: var(--plate); box-shadow: var(--plate-shadow); border: 1px solid #6d5326; } :root[data-look="amp"][data-theme="light"] .ch-head, :root[data-look="amp"][data-theme="light"] .ch-head small, :root[data-look="amp"][data-theme="light"] .ch-head h1 { color: #2a1d10; }

/* Louie Lite 3.1.0: 2.49's sizes and quiet controls in place of version 4's chunky buttons.
   Buttons 46 px (small ones 34), chips 28 px pills with a lamp, switches 28 px, rows 52 to 60 px,
   settings tiles 30 px, header buttons 36 px round, the song bar a compact gold plate. */
:root[data-look="amp"] body .btn { height: 46px; min-height: 0; padding: 0 16px; border-radius: 12px; font: 500 15px var(--sans); letter-spacing: 0; text-transform: none; background: var(--card); color: var(--fg-2); border: 1px solid var(--rim); box-shadow: none; }
:root[data-look="amp"] body .btn::before, :root[data-look="amp"] body .btn::after { display: none; }
:root[data-look="amp"] body .btn.primary, :root[data-look="amp"] body .btn.sm.primary { background: var(--copper); color: var(--copper-fg); border: 0; box-shadow: var(--copper-hi); font-weight: 600; }
:root[data-look="amp"] body .btn.sm { height: 34px; padding: 0 12px; font-size: 14px; border-radius: 10px; flex: none; }
:root[data-look="amp"] body .btn:active:not(:disabled) { transform: none; filter: brightness(.92); }
:root[data-look="amp"] body .btn svg { width: 16px; height: 16px; }
:root[data-look="amp"] body .chip, :root[data-look="amp"] body #chips .chip { height: 28px; min-height: 0; padding: 0 12px; border-radius: 14px; font: 500 13px var(--sans); border: 1px solid var(--rim); background: var(--card); color: var(--muted); box-shadow: none; }
:root[data-look="amp"] body #chips .chip.on, :root[data-look="amp"] body .chip.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); box-shadow: none; }
:root[data-look="amp"] body #chips .chip::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--lamp-off); box-shadow: 0 0 0 1px rgba(0,0,0,.5); vertical-align: 1px; }
:root[data-look="amp"] body #chips .chip.on::before { background: var(--lamp-on); box-shadow: 0 0 0 1px rgba(0,0,0,.5), var(--lamp-glow); }
:root[data-look="amp"] body #chips .chip:has(svg)::before { display: none; }
:root[data-look="amp"] body .seg { min-height: 0; padding: 2px; border-radius: 9px; background: var(--card-2); border: 0; box-shadow: none; }
:root[data-look="amp"] body .seg button { height: 28px; min-height: 0; border-radius: 7px; font: 500 14px var(--sans); color: var(--muted); background: none; box-shadow: none; border: 0; }
:root[data-look="amp"] body .seg button.on, :root[data-look="amp"][data-theme="dark"] body .seg button.on { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
:root[data-look="amp"] body .set { min-height: 52px; padding: 0 14px; gap: 14px; font: 400 16px var(--sans); }
:root[data-look="amp"] body .set .tile { width: 30px; height: 30px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--rim); color: var(--fg-2); box-shadow: none; }
:root[data-look="amp"] body .set .tile svg { width: 17px; height: 17px; }
:root[data-look="amp"] body .set .val { font: 400 15px var(--sans); color: var(--accent); }
:root[data-look="amp"] body .set b, :root[data-look="amp"] body .set .name b { font-weight: 500; }
:root[data-look="amp"] body .set-group, :root[data-look="amp"] body .list, :root[data-look="amp"] body .card { border-radius: 16px; box-shadow: inset 0 1px 0 var(--rim-hi); }
:root[data-look="amp"] body .row { min-height: 60px; }
:root[data-look="amp"] body .row .t { font: 500 16px var(--sans); }
:root[data-look="amp"] body .row .k { font: 500 13px var(--mono, ui-monospace); color: var(--muted); background: none; border: 0; box-shadow: none; min-width: 30px; height: auto; }
:root[data-look="amp"] body .head .btn, :root[data-look="amp"] body .ib { height: 36px; min-width: 36px; border-radius: 18px; padding: 0 10px; font-size: 14px; }
:root[data-look="amp"] body input[type="text"], :root[data-look="amp"] body input[type="search"], :root[data-look="amp"] body input[type="password"], :root[data-look="amp"] body textarea { border-radius: 12px; border-width: 1px; box-shadow: none; font: 400 16px var(--sans); }
/* the song bar: 2.49's compact gold plate */
:root[data-look="amp"] .app.viewer .dock { border-radius: 18px; padding: 6px; }
:root[data-look="amp"] .app.viewer .player .tl { width: 40px; height: 40px; border-radius: 11px; }
:root[data-look="amp"] .app.viewer .player .tl.tools { width: auto; padding: 0 12px; font: 500 13px var(--sans); }
:root[data-look="amp"] .app.viewer .player .play { height: 40px; min-width: 64px; border-radius: 11px; font: 600 15px var(--sans); box-shadow: var(--copper-hi); }
:root[data-look="amp"] .dock.kb .cmd { height: 52px; border-radius: 16px; }
:root[data-look="amp"] .dock.kb .add { width: 52px; height: 52px; border-radius: 16px; }
:root[data-look="amp"] .dock.kb .add-in { width: 40px; height: 40px; border-radius: 11px; }
/* 3.1.0 continued: the song bar is 2.49's small gold plate at the right, in thumb reach */
:root[data-look="amp"] body:not(.cedit):not(.fold) .app.viewer .dock { display: flex; justify-content: flex-end; background: none; box-shadow: none; border: 0; padding: 0; }
:root[data-look="amp"] .app.viewer .dock .pw { width: auto; background: var(--plate); border: 1px solid #6d5326; box-shadow: var(--plate-shadow); border-radius: 16px; padding: 5px; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-look="amp"] .app.viewer .player { gap: 6px; }
:root[data-look="amp"] .app.viewer .player .tl { width: 38px; height: 38px; border-radius: 11px; }
:root[data-look="amp"] .app.viewer .player .tl.tools { flex: none; width: auto; padding: 0 12px; flex-direction: row; gap: 6px; font: 500 13px var(--sans); }
:root[data-look="amp"] .app.viewer .player .tl.tools .i { width: 16px; height: 16px; }
:root[data-look="amp"] .app.viewer .player .play { height: 38px; width: 56px; min-width: 0; padding: 0; border-radius: 11px; }
/* chord shapes and the add tools at 2.49's size */
:root[data-look="amp"] .app.viewer .strip .scard { width: 58px; min-height: 0; height: 72px; padding: 4px 0; border-radius: 10px; border: 1px solid var(--rim); background: var(--solid); box-shadow: none; }
:root[data-look="amp"] body .sr-tool { height: 60px; min-height: 0; border-radius: 12px; font: 500 13px var(--sans); background: var(--card); border: 1px solid var(--rim); box-shadow: none; gap: 4px; }
:root[data-look="amp"] body .sr-tool svg { width: 20px; height: 20px; }
/* Rehearse and the other pages: no big bars */
:root[data-look="amp"] body .rh-yc .btn.rh-ycall, :root[data-look="amp"] body .rh-lesson .rh-lgo { height: 46px; min-height: 0; font-size: 15px; }
:root[data-look="amp"] body .rh-yc .btn.rh-ycd { height: 34px; min-height: 0; padding: 0 12px; font-size: 14px; border-radius: 10px; }
:root[data-look="amp"] body h2, :root[data-look="amp"] body .rh-lesson h3, :root[data-look="amp"] body .rh h3 { font-weight: 600; }
:root[data-look="amp"] body .pf-tile, :root[data-look="amp"] body .pf-badge { box-shadow: none; border: 1px solid var(--rim); background: var(--card); }
:root[data-look="amp"] .app.viewer .dock .pw { flex: none; }
:root[data-look="amp"] .app.viewer .player .play, :root[data-look="amp"] .app.viewer #play { flex: none; width: auto; min-width: 56px; padding: 0 14px; gap: 6px; }
:root[data-look="amp"] body .rh-yc .btn.rh-ycall, :root[data-look="amp"] body .rh-lesson .rh-lgo { flex: none; }

/* 3.1.2: one corner for everything but chips, seg buttons and switches; no tall buttons anywhere */
:root[data-look="amp"] body .btn { height: 46px !important; min-height: 0 !important; border-radius: 12px; }
:root[data-look="amp"] body .btn.sm { height: 34px !important; border-radius: 10px; }
:root[data-look="amp"] body .head .btn, :root[data-look="amp"] body .ib,
:root[data-look="amp"] body #setsbtn, :root[data-look="amp"] body #libset { border-radius: 12px; }
:root[data-look="amp"] body #chips { background: none; box-shadow: none; border: 0; padding-left: 0; padding-right: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-look="amp"] body .sh-cover#about, :root[data-look="amp"] body .ed-tl { border-radius: 12px; }
:root[data-look="amp"] body .fp-band { width: 46px; height: 46px; border-radius: 12px; }
/* the compact song header: solid, so the big header never shows through it */
:root[data-look="amp"] .chead::before { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* 3.2.0: Louie in the Songbook header (opens Your playing, with your days in a row), Settings as a square icon */
:root[data-look="amp"] body #libset.ib-sq { width: 46px; padding: 0; justify-content: center; }
:root[data-look="amp"] body #libset.ib-sq .i { margin: 0; }
:root[data-look="amp"] body .you-btn { padding: 0 10px 0 6px; gap: 4px; display: inline-flex; align-items: center; }
.you-btn svg.louie, .you-btn > svg:first-child { width: 30px; height: 30px; flex: none; }
.you-n { display: inline-flex; align-items: center; gap: 2px; font: 600 15px var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.you-n .i { width: 15px; height: 15px; }
.you-n.lit { color: var(--accent-ink, var(--copper)); }
.you-n.lit .i { fill: currentColor; }
.head .row-btns { gap: 8px; }
/* Your playing: an odd last tile spans the row, so no empty slot where the fans tile was */
.pf-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.heard-i .tdy-ic { color: var(--copper); }
/* the Today strip as a card like the rest of the Songbook, a little below the header */
:root[data-look="amp"] body .today { margin: 12px 0 10px; }
:root[data-look="amp"] body .today .tdy-i { background: var(--card); border: 1px solid var(--rim); color: var(--fg); border-radius: 12px; box-shadow: none; }
:root[data-look="amp"] body .today .tdy-i small { color: var(--muted); }
:root[data-look="amp"] body .today .tdy-i em { color: var(--fg-2, var(--muted)); }
:root[data-look="amp"] body .today .tdy-ic, :root[data-look="amp"] body .today .tdy-i .ng-ic { background: var(--recess, rgba(0,0,0,.2)); color: var(--copper); }
/* earned badges read on the amp's cards (their old bright fills are gone) */
:root[data-look="amp"] body .pf-badge:not(.locked) { color: var(--fg); border-color: var(--copper); }
:root[data-look="amp"] body .pf-badge:not(.locked) b { color: var(--accent-ink, var(--copper)); }

/* 3.2.0: focus on the line you're on, as on the Road's stage. The lines further from it are dimmer, and the
   words fade into the page toward the top and bottom of the screen (the reading line sits 40% down).
   The right edge stays clear so the song map's dots don't fade. Over a song's cover only the dimming applies. */
:root { --dim-next: 72%; --dim-after: 40%; --dim-past: 32%; }
:root[data-theme="light"] { --dim-next: 80%; --dim-after: 52%; --dim-past: 44%; }
body.covered { --dim-next: 80%; --dim-after: 56%; --dim-past: 46%; }
.st-fade { position: fixed; left: 0; right: 40px; top: 0; bottom: 0; z-index: 14; pointer-events: none; }
.st-fade i { position: absolute; left: 0; right: 0; display: block; }
.st-fade i:first-child { top: 0; height: 30%; background: linear-gradient(180deg, var(--bg) calc(var(--safe-t, 0px) + 24px), color-mix(in srgb, var(--bg) 70%, transparent) 45%, transparent); }
.st-fade i:last-child { bottom: 0; height: 40%; background: linear-gradient(0deg, var(--bg) 18%, color-mix(in srgb, var(--bg) 75%, transparent) 50%, transparent); }
body.covered .st-fade, body.cedit .st-fade { display: none; }
/* 3.2.0: with Practice on, the song bar's gold plate spans the row and its words read on gold in both themes */
:root[data-look="amp"] .app.viewer .dock .pw:has(.looprow.on) { flex: 1; min-width: 0; }
:root[data-look="amp"] .app.viewer .dock .looprow { border-bottom-color: rgba(60, 38, 10, .25); color: #3b2610; }
:root[data-look="amp"] .app.viewer .dock .looprow .lp-lbl { color: #6a3d12; }
:root[data-look="amp"] .app.viewer .dock .looprow .chip { background: rgba(255, 250, 240, .82); color: #2b1c0c; border-color: rgba(60, 38, 10, .22); }
:root[data-look="amp"] .app.viewer .dock .looprow .chip.on { background: var(--copper); color: #fff; }
:root[data-look="amp"] .app.viewer .dock .looprow .sb { color: #3b2610; }
:root[data-look="amp"] body.fold .app.viewer .dock .pw:has(.looprow.on) { margin-right: 58px; }
:root[data-look="amp"] .app.viewer .dock .looprow .chip::before { display: none; }
:root[data-look="amp"] body .app.viewer .dock { background: none; box-shadow: none; border: 0; padding: 0; }
:root[data-look="amp"] body.fold .app.viewer .dock .looprow .lp-lbl { display: none; }
/* 3.3.0 contrast (axe in CI): the tuner's face is dark tolex in both looks, so its words use the dark look's ink */
:root[data-theme="light"] .tuner2, :root[data-theme="light"] .tuner2 * { --bg: #0c0d0f; --fg: #f3f1ee; --fg-2: #d9d6d0; --muted: #b4b1ab; --accent-ink: #eda27f; --head: #efe7da;
  --card: rgba(255,255,255,.045); --card-2: rgba(255,255,255,.08); --rim: rgba(184,147,90,.35); --line: rgba(255,255,255,.08); --hair: rgba(255,255,255,.08); --bar: #17171a; --solid: #17171a;
  --plate-bg: #17171a; --glass-tint: rgba(255,255,255,.04); --tolex-card: #1b1b1e; }
/* the choices you haven't picked in a segmented control read at AA on a dark card */
:root[data-look="amp"] .seg button:not(.on) { color: var(--fg-2); }
/* 3.3.0: the first-run card in the Songbook */
.welcome { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; margin: 12px 0 10px; padding: 14px 14px 12px; border-radius: 12px; }
.welcome .wl-louie { grid-row: 1; display: grid; place-items: center; }
.welcome .wl-t { display: flex; flex-direction: column; gap: 4px; padding-right: 24px; }
.welcome .wl-t b { font: 600 16px var(--sans); color: var(--fg); }
.welcome .wl-t span { font: 400 14px/1.4 var(--sans); color: var(--fg-2); }
.welcome .wl-b { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.welcome .wl-x { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; border-radius: 10px; }
.welcome .wl-x .i { width: 16px; height: 16px; }
:root[data-look="amp"] body .welcome { background: var(--card); border: 1px solid var(--rim); box-shadow: none; }
/* 3.3.0: left hand. Play, the band button and the song bar sit on the left */
body.lefty.fold .fp #play { right: auto; left: 18px; }
body.lefty .fp-nav { right: auto; left: 80px; }
body.lefty .fp-band { right: auto; left: 22px; }
:root[data-look="amp"] body.lefty:not(.cedit):not(.fold) .app.viewer .dock { justify-content: flex-start; }
:root[data-look="amp"] body.lefty.fold .app.viewer .dock .pw:has(.looprow.on) { margin-right: 0; margin-left: 58px; }
.stamp { font-size: 12px; } /* 3.3.0: nothing under 12px in the page text */