/* Ditty City — shared brand tokens & base · "Night Drive" (synthwave, dark-only) */

/* ---- self-hosted webfonts (SIL OFL — see /fonts/OFL.txt). Latin subset. ---- */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-display-600.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/playfair-display-700.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/playfair-display-600italic.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/playfair-display-700italic.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-400.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-500.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-600.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/manrope-700.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-mono-400.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-mono-700.woff2) format("woff2")}

/* Night Drive palette — Miami-neon synthwave. Unconditional (no light theme, no OS toggle). */
:root{
  --bg:#120A24; --bg2:#160D2B; --surface:#1C1136; --surface2:#251747;
  /* Brightened twice now, both times because the owner read the live page and found it dim — the
     second pass (2026-08-06) was aimed at BODY PROSE, which is --muted almost everywhere: the lede
     under an h1, every step paragraph, every table cell. On this background --muted was carrying
     most of the words on the site at the DIMMEST value in the palette, which is backwards.
     ⚠️ --muted is now close enough to --ink-soft that the two no longer separate much. That is the
     intended trade: the hierarchy was being paid for in legibility. If a surface needs a genuinely
     quieter tone, dim it there rather than dragging every paragraph on the site back down.
     Contrast on --bg #120A24: ink ~15.6:1, ink-soft ~11.5:1, muted ~9.4:1 (was ~7.3:1). */
  --ink:#F7F4FF; --ink-soft:#E4DDFA; --muted:#D0C6EE; /* was F3EEFF/D2C7F2/B6A8DD, before that EDE7FF/BCAEE6/9A8CCB */
  --line:#4C3C77; --line2:#65509C;   /* more prominent box outlines (was 2E1F52/3D2A6B) */
  --accent:#FF2E8B; --accent-ink:#FF5FA6; --accent2:#22E0E0; --sun:#FFB84D;
  /* 🔴 WHITE ON --accent IS 3.49:1 AND WCAG AA WANTS 4.5 for text this size. Lighthouse fails every
     pink button on the site for it. --accent stays exactly as it is — it is the brand, and as a GLOW,
     a border or coloured text on a dark ground it is fine. This token is only for a FILL that carries
     white text. Computed, not eyeballed: the same hue at 86% brightness, the first step that passes,
     so the buttons still read as the same pink. */
  --accent-btn:#DB2878;   /* 4.58:1 against #fff */
  --teal:#22E0E0; --gold:#FFC24D; --pink:#FF5C8A;
  --glow:rgba(255,46,139,.5);
  --card-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.45);
  --radius:14px;
  --skyTop:#140A2B; --skyBot:#3A1A5E; --sky-mode:"neon";
  --display:"Playfair Display"; --body:"Manrope"; --util:"Space Mono";
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark}
input[type=checkbox],input[type=radio],input[type=range],progress{accent-color:var(--accent)}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;}
.serif{font-family:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;}
.mono{font-family:"SF Mono",ui-monospace,"Cascadia Code","Segoe UI Mono",Consolas,monospace;}
/* Playfair Display = large display headings ONLY — keep Georgia (.serif) for small serif e.g. lyric bodies */
.hero h1,h2.big,.cta-band h2,.price-card .pprice,.display{font-family:var(--display),Georgia,"Times New Roman",serif}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
/* eyebrows = Space Mono signage ("every song has an address") */
.eyebrow{font-family:var(--util),ui-monospace,"Cascadia Code",monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:700}

.btn{display:inline-flex;align-items:center;gap:9px;font-weight:650;font-size:15.5px;font-family:inherit;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease;text-align:center}
.btn-primary{background:var(--accent-btn);color:#fff;box-shadow:0 6px 20px var(--glow)}
.btn-primary:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 12px 30px var(--glow)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:0 6px 20px var(--glow)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--accent)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 22px var(--glow);transform:translateY(-1px) scale(1.02)}
@media (prefers-reduced-motion:reduce){.btn:hover,.btn-primary:hover,.btn-ghost:hover{transform:none}}

/* 🔴 THE AFFILIATE BAR WAS THE PAGE'S LAYOUT SHIFT. refer-bar.js is deferred and did
   `document.body.insertBefore(a, document.body.firstChild)` — a sticky element inserted at the top of
   the body AFTER first paint, so the nav, the hero and everything under it dropped ~54px. Lighthouse
   attributed 0.0723 of 0.0858 CLS to `<header class="hero">` for exactly this, and on a phone it is a
   real defect, not just a number: the page jumps under your thumb a moment after it loads.
   The markup is served in the HTML now and the script is gone; these are its styles. */
@keyframes dcReferPulse{0%,100%{box-shadow:0 0 0 0 rgba(225,78,41,.55)}50%{box-shadow:0 0 0 6px rgba(225,78,41,0)}}
/* ⚠️ THE BAR IS A <div> WRAPPING THE LINK, NOT THE LINK ITSELF. The dismiss control is a <button>,
   and a button inside an anchor is invalid markup that navigates when you press it — so closing the
   bar would have taken the buyer to /earn, which is the one thing they were saying no to. The link
   keeps the colour and the weight; the wrapper keeps the background and the stickiness.
   ⚠️ Horizontal padding is symmetric so the sentence stays optically centred with the ✕ over it. */
.dc-refer{position:sticky;top:0;z-index:200;display:block;text-align:center;
  background:linear-gradient(90deg,#FF2E8B,#B98CFF);font-family:inherit;letter-spacing:.01em;
  padding:9px 42px}
.dc-refer a{color:#fff;text-decoration:none;font-weight:650;font-size:13.5px}
.dc-refer .pill{display:inline-block;margin-left:8px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:2px 10px;font-size:12px;
  animation:dcReferPulse 2s infinite}
.dc-refer a:hover .pill{background:rgba(255,255,255,.28)}
/* ⚠️ 28px, NOT the 15px the glyph needs. Lighthouse flags any control under 24px and this one sits
   in the corner a thumb reaches for; the ✕ stays small, the hit area does not. */
.dc-refer-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;
  background:none;color:#fff;opacity:.72;font-size:17px;line-height:1;cursor:pointer;font-family:inherit}
.dc-refer-x:hover,.dc-refer-x:focus-visible{opacity:1;background:rgba(255,255,255,.2)}
@media (prefers-reduced-motion:reduce){.dc-refer .pill{animation:none}}
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:20px;letter-spacing:-.02em}
.logo .c2{color:var(--accent)}
.logo-wm{font-family:var(--display),Georgia,"Times New Roman",serif;font-weight:700;font-size:22px;letter-spacing:-.005em}
.logo-wm .c2{margin-left:-.015em}
.logo-mark{filter:drop-shadow(0 0 5px var(--glow))}
/* the badge's equalizer bars gently bounce — a living logo (reduced-motion safe). nth-of-type
   targets the 4 <rect> bars (the two <circle>s are a different type, so they're skipped). */
.logo-mark rect{transform-box:fill-box;transform-origin:center bottom;animation:dclogoeq 1.5s ease-in-out infinite}
.logo-mark rect:nth-of-type(2){animation-delay:.2s}
.logo-mark rect:nth-of-type(3){animation-delay:.4s}
.logo-mark rect:nth-of-type(4){animation-delay:.6s}
@keyframes dclogoeq{0%,100%{transform:scaleY(.82)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.logo-mark rect{animation:none}}
.navlinks{display:flex;align-items:center;gap:28px;font-size:14.5px;font-weight:550;color:var(--ink-soft)}
/* "How it works" sat hard against the wordmark (owner, 2026-08-06). The gap between the logo and the
   first link is NOT .navlinks' own `gap` — that only separates the links from each other — so it has
   to come from the row's leading edge.
   🔴 AND THE FIRST VERSION (18px) BROKE THE HEADER. The row was already at its limit, so taking width
   away wrapped the labels themselves: "How it / works", "Hall of / Fame", "Log / on", "Write a / song".
   Two fixes, and the second is the one that was missing all along:
   ⚠️ A NAV LABEL MUST NEVER BREAK MID-PHRASE. `white-space:nowrap` was never set, so the header had
   always been one narrow viewport away from this — the padding only revealed it.
   ⚠️ AND SOMETHING HAS TO GIVE WHEN IT IS TIGHT. The search box is the only element on the row that
   can lose width without losing meaning, so it shrinks first (flex-shrink below); the links do not. */
.navlinks{padding-left:12px}
.navlinks a{white-space:nowrap}
/* 🔴 `flex-shrink:1` ALONE DOES NOT LET IT SHRINK. A flex item's default `min-width:auto` floors it at
   its intrinsic content width, and for an <input> that is the width implied by its `size` attribute —
   so the box stopped shrinking well before it needed to and the row overflowed instead. Renaming the
   two nav items to "Song Showcase" and "e-card Gallery" added ~70px of labels and pushed it 9px over
   at 1200px, which is where this surfaced. `min-width:0` is what actually makes flex-shrink work.
   ⚠️ Floored at 120px so it never shrinks into a box too small to type a word in — a search field
   that technically fits and cannot be used is not a fix. */
.navsearch{flex-shrink:1;min-width:0}
.navsearch input{flex:1 1 auto;min-width:120px}
/* ⚠️ OPTICAL, NOT GEOMETRIC. Every item in the row is already centred — measured, all on mid-76 — but
   the wordmark is 22px Playfair and the links 14.5px Manrope, so centring their BOXES lines up the
   middles and leaves the text sitting high, which is what the eye reads.
   🔴 MEASURED PROPERLY THE SECOND TIME: 3.8px, not the 0.8px I first reported. That first figure came
   from approximating the ascent as 0.75 of the font size; Playfair's real fontBoundingBoxAscent is
   far larger, so the wordmark's baseline is at 88.6 and the links were at 84.8. A 1px nudge was
   therefore almost nothing, which is why it still looked wrong. Read the font's own metrics, do not
   estimate them.
   ⚠️ The links only. The search box and the CTA are objects, not text on this line, and moving them
   would push their centres off the row. */
.navlinks > a:not(.btn){position:relative;top:4px}
.navlinks a:hover{color:var(--accent)}
.navlinks .btn{padding:9px 18px;font-size:14px}
/* The Showcase's star, moved out of the page heading and into the nav so the link we most want pressed
   carries a mark. Deliberately gentle — 2.6s, and it scales and dims rather than moving, because a
   control that jitters beside its own label is harder to hit, not easier.
   ⚠️ THE MARKUP FOR THIS LIVES IN SEVEN FILES (templates.js plus create/gift/index/privacy/terms and
   guides.js), which is why the rule is here and not beside any one of them — and why it must degrade
   to a plain star if this sheet is ever stale: the unversioned /brand.css that the static pages link
   is cached for 4 hours, so a returning visitor can briefly get the star with no animation. That is
   the right way round; the star is the message and the pulse is decoration. */
.navstar{display:inline-block;margin-right:5px;font-size:.92em;line-height:1;transform-origin:center;
  animation:navstarpulse 2.6s ease-in-out infinite}
@keyframes navstarpulse{0%,100%{transform:scale(1);opacity:.82}50%{transform:scale(1.15);opacity:1}}
/* ⚠️ A decorative animation that repeats FOR EVER is exactly what a reduced-motion setting is for. */
@media (prefers-reduced-motion: reduce){ .navstar{animation:none;opacity:1} }
/* 🔴 BELOW 760px EVERY NAV LINK WAS HIDDEN AND NOTHING REVEALED THEM. How it works, Pricing, Hall of
   Fame, Gallery and Log on were simply unreachable on a phone — the rule below used to end here.
   The search form is not an <a>, so it survived the hide and pushed the button off the right edge,
   which is what made the row overflow on an iPhone.
   ⚠️ CSS-ONLY, DELIBERATELY. The nav markup exists in SEVEN files (templates.js covers the ~1,400
   server-rendered pages; six static pages each carry their own copy), so any JavaScript here would be
   seven copies to keep in step. A checkbox has no such problem — and it still works if a script fails.
   ⚠️ The checkbox is visually hidden but NOT `display:none` and NOT `hidden`: it has to stay focusable
   so Space toggles the menu for a keyboard user. */
.navtog{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.navburger{display:none}
/* 🔴 760px WAS FAR TOO LOW AND THE ROW HAD BEEN SCROLLING SIDEWAYS ON EVERY LAPTOP AND TABLET WIDTH
   BETWEEN 760 AND ~1280 THE WHOLE TIME. Measured on a /p/ page: 800px viewport → 265px of horizontal
   overflow, 1000px → 107px, 1200px → 9px, and only 1280px and up were clean. The nav's content needs
   about 1210px; the search box shrinking (260px → 168px) never had enough to give.
   ⚠️ NOT CAUSED BY THE RENAME, THOUGH IT MADE IT WORSE. "Song Showcase" and "e-card Gallery" added
   ~70px, so at 800px the old row still wanted ~995px against 800 — this has been broken for a long
   time and nothing measured it, because the earlier nav work checked 412px and 390px where the burger
   was already doing its job.
   ✅ The burger is the fix and it already exists, works with a keyboard, and puts the search box in
   the open panel. Only the number was wrong. 1240px leaves headroom above the ~1210px the row needs,
   and the search can still shrink to cover the gap between 1240 and 1280. */
@media (max-width:1240px){
  .navrow{justify-content:flex-start}
  .logo{margin-right:auto}
  .navburger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    order:3;width:40px;height:40px;margin-left:10px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
  .navburger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
  .navtog:focus-visible + .navburger{outline:2px solid var(--accent);outline-offset:2px}
  .navlinks{order:2}
  .navlinks a:not(.btn){display:none}
  .navlinks .navsearch{display:none}          /* closed: it is what overflowed the row */
  /* open — the panel hangs off `nav`, which is position:sticky and so is the containing block */
  .navtog:checked ~ .navlinks{position:absolute;left:0;right:0;top:100%;display:flex;
    flex-direction:column;align-items:stretch;gap:0;padding:6px 18px 18px;
    background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.55)}
  .navtog:checked ~ .navlinks a:not(.btn){display:block;padding:14px 2px;border-bottom:1px solid var(--line)}
  .navtog:checked ~ .navlinks .navsearch{display:flex;margin:14px 0 2px}
  .navtog:checked ~ .navlinks .btn{margin-top:14px;text-align:center}
}

footer{padding:44px 0 60px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);margin-top:40px}
.footnote{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.trust{font-size:12px;color:var(--muted)}
/* Registered particulars — a UK limited company has to publish these on its website. Given a
   whole line rather than squeezed onto the copyright row: .footnote is a space-between flex
   row, so a third child there would fight the other two for width and wrap raggedly. */
.ftreg{flex-basis:100%;font-size:11.5px;line-height:1.6;color:var(--muted);opacity:.85;
  border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.ftreg b{color:var(--ink-soft);font-weight:600}
/* Terms / Privacy / hello@, inline on the copyright line rather than a stacked fifth column. Wraps
   as a group on a phone, where the footnote is already a wrapping flex row. */
.ftlegal{display:inline-flex;flex-wrap:wrap;gap:14px;margin-left:16px}
.ftlegal a{color:var(--muted);font-size:13px}
.ftlegal a:hover{color:var(--ink)}
@media (max-width:520px){.ftlegal{display:flex;margin-left:0;margin-top:8px}}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.logo-mark{flex:0 0 auto}

/* ---- On-brand tooltips (STANDING RULE: the only tooltip in the app; never native title=). ----
   Add data-tip="…" to any element. On icon-only controls also set aria-label for screen readers
   (data-tip is visual only). Auto-hidden on touch (no hover). */
[data-tip]{position:relative}
/* JS tooltip controller (tooltip.js) adds html.dc-jstip to disable this CSS fallback and drive
   tooltips from real hover events — no sticky-:hover. Pages without tooltip.js keep this CSS path. */
.dctip{position:fixed;z-index:9999;pointer-events:none;background:var(--surface2);color:var(--ink);border:1px solid var(--line2);border-radius:9px;padding:7px 11px;font:500 12px/1.4 var(--body),system-ui,sans-serif;max-width:230px;white-space:normal;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}
.dctip.on{opacity:1;transform:none}
html:not(.dc-jstip) [data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);z-index:200;pointer-events:none;background:var(--surface2);color:var(--ink);border:1px solid var(--line2);border-radius:9px;padding:7px 11px;font:500 12px/1.4 var(--body),system-ui,sans-serif;width:max-content;max-width:230px;white-space:normal;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.45)}
html:not(.dc-jstip) [data-tip]:hover::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--line2);z-index:200;pointer-events:none}
@media (hover:none){[data-tip]:hover::after,[data-tip]:hover::before{display:none}}
/* after clicking an action button (e.g. Magic helper) the cursor often rests on it while typing —
   .tipoff suppresses its hover tooltip until the mouse actually leaves and returns. */
[data-tip].tipoff:hover::after,[data-tip].tipoff:hover::before{display:none}
/* while the user is typing, hide hover tooltips even if the mouse happens to rest on a control
   (toggled by a tiny keydown/mousemove handler); restored the moment the mouse moves. */
html.dc-typing [data-tip]:hover::after,html.dc-typing [data-tip]:hover::before{display:none}

/* ---- Magic Helper button — a gentle, deterministic writing prompt beside a field label ---- */
.labrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.labrow .lab{margin-bottom:0}
.magicbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:12px;font-weight:650;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 13%,transparent);border:1px solid var(--accent);border-radius:999px;padding:6px 11px;cursor:pointer;transition:background .15s,transform .1s,opacity .15s}
.magicbtn:hover{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.magicbtn:hover{transform:scale(1.04);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 38%,transparent);background:color-mix(in srgb,var(--accent) 20%,transparent)}
.magicbtn:active{transform:scale(.95)}
@media (prefers-reduced-motion:reduce){.magicbtn:hover{transform:none}}
.magicbtn:disabled{opacity:.45;cursor:default}

/* ---- pronunciation rows (public/pron-rows.js): "say these right?" word -> sounds-like ---- */
.pr-rows{margin:6px 0 0}
.pr-head{display:grid;grid-template-columns:1fr 18px 1fr 30px;gap:8px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.pr-head span:nth-child(2){grid-column:3}
.pr-row{display:grid;grid-template-columns:1fr 18px 1fr 30px;gap:8px;align-items:center;margin-bottom:7px}
/* Fixed-word mode: we already know the word (it is the recipient), so there is one control, not a
   word/arrow/sound triplet. Overrides the grid rather than adding a second .pr-row rule elsewhere —
   a stray column definition here is what would leave a phantom 18px gutter where the arrow used to be. */
.pr-row--fixed{display:block;margin-bottom:6px}
.pr-fixed-q{display:block}
.pr-fixed-w{display:block;font-size:12.5px;letter-spacing:.02em;opacity:.85;margin:0 0 5px}
.pr-row--fixed .pr-p{width:100%}
.pr-cap{display:none;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pr-row input{width:100%;min-width:0;background:var(--surface2,#1c1136);border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:10px 12px;font:inherit;font-size:15px}
.pr-row input:focus{outline:none;border-color:var(--accent)}
.pr-arrow{text-align:center;color:var(--muted);font-size:13px}
.pr-x{background:transparent;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;border-radius:8px;width:30px;height:30px}
.pr-x:hover{color:var(--accent)}
.pr-hint{grid-column:1/-1;font-size:12.5px;color:var(--muted);margin:-2px 0 2px}
.pr-hint.bad{color:var(--accent)}
.pr-hint.ok{color:var(--teal,#4ecdc4)}
.pr-row.bad input.pr-p{border-color:var(--accent)}
.pr-add{background:transparent;border:1px dashed var(--line2);color:var(--ink-soft,#d2c7f2);border-radius:10px;padding:8px 14px;font:600 13px inherit;cursor:pointer}
.pr-add:hover{border-color:var(--accent);color:var(--accent)}
/* phone: stack each pair so the boxes stay tappable instead of squeezing to nothing */
@media(max-width:560px){
  .pr-head{display:none}
  /* stacked pair: caption, word, caption, sound - grouped by a left rule so one pair reads as one unit */
  .pr-row{grid-template-columns:1fr 30px;gap:4px 6px;border-left:2px solid var(--line2);padding-left:10px;margin-bottom:14px}
  .pr-row.bad{border-left-color:var(--accent)}
  .pr-arrow{display:none}
  .pr-cap{display:block;grid-column:1/-1;margin-top:2px}
  .pr-row input.pr-w{grid-column:1}
  .pr-row .pr-x{grid-column:2;grid-row:2}
  .pr-row input.pr-p{grid-column:1/-1}
  .pr-row input{font-size:16px}   /* under 16px makes iOS zoom the page on focus */
}

/* ---- in-place re-record strip (order.html): the song page stays usable while a take records ---- */
.recstrip{display:flex;align-items:flex-start;gap:14px;background:color-mix(in srgb,var(--accent) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line2));border-radius:14px;padding:14px 16px;margin:14px 0 4px}
.recstrip .rdot2{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--accent-btn);color:#fff;display:grid;place-items:center;font-size:13px;box-shadow:0 0 0 0 var(--glow);animation:rpulse2 1.4s ease-out infinite}
@keyframes rpulse2{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 12px rgba(255,46,139,0)}100%{box-shadow:0 0 0 0 rgba(255,46,139,0)}}
.recstrip .recmain{flex:1;min-width:0}
.recstrip .rectitle{font-weight:700;font-size:15px;color:var(--ink)}
.recstrip .recsub{font-size:13px;color:var(--muted);margin-top:2px}
.recstrip .compbar{width:100%;margin:10px 0 0}
.recstrip .recfoot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.recstrip .boothbars{display:inline-flex;align-items:flex-end;gap:3px;height:22px;align-self:center}
.recstrip .boothbars i{width:3px;height:100%;border-radius:2px;transform-origin:bottom;background:var(--accent);animation:eqb .9s ease-in-out infinite}
.recstrip .boothbars i:nth-child(2){animation-delay:.15s;background:var(--teal)}
.recstrip .boothbars i:nth-child(3){animation-delay:.3s;background:var(--gold)}
.recstrip .boothbars i:nth-child(4){animation-delay:.45s;background:var(--pink)}
.recstrip .boothbars i:nth-child(5){animation-delay:.6s;background:var(--teal)}
@media (prefers-reduced-motion:reduce){.recstrip .rdot2,.recstrip .boothbars i{animation:none}}
/* a take being auditioned while another records - distinct from the ACTIVE take (.on) */
.takepill.playing{border-color:var(--teal);color:var(--teal)}
@media(max-width:560px){.recstrip{padding:12px}.recstrip .boothbars{display:none}}
.pr-hint.soft{color:var(--muted)}   /* incomplete row: a quiet nudge, not an error */

/* ── Cookie consent, in our colours ───────────────────────────────────────────────────────────────
   The library ships a white card with grey buttons, which sits on our near-black purple looking like
   somebody else's website. It exposes a full --cc-* token set, so this themes it WITHOUT touching the
   vendored stylesheet — editing that file would be undone by the next library upgrade.
   ⚠️ SCOPED TO #cc-main, and that is load-bearing. The library declares its own defaults in a rule of
   the same shape, and cookieconsent.css now loads ASYNC (media=print), so it can arrive after this
   file. An id beats it on specificity whichever order they land in; a :root override would be a race.
   🔴 ACCEPT AND REJECT STAY IDENTICAL. `equalWeightButtons: true` is set on both modals and both
   render as "primary", so they share one fill here. Giving Accept the brand pink and leaving Reject
   grey is the exact dark pattern the UK/EU regulators act on — the styling must not undo the config.
   ⚠️ The fill is --accent-btn (#DB2878, 4.58:1 on white), never --accent (#FF2E8B, 3.49:1). That is
   the same distinction that had to be swept across 39 rules in 10 files: --accent is right as a glow,
   a border or coloured text on the dark ground, and fails only when white sits on top of it. */
#cc-main{
  --cc-font-family:var(--body),system-ui,sans-serif;
  --cc-bg:var(--surface);
  --cc-primary-color:var(--ink);
  --cc-secondary-color:var(--muted);
  --cc-link-color:var(--accent-ink);          /* pink TEXT on dark is fine; it is white ON pink that fails */
  --cc-modal-border-radius:var(--radius);
  --cc-btn-border-radius:10px;
  --cc-overlay-bg:rgba(9,5,20,.72);

  /* Accept all AND Reject all — one fill, deliberately */
  --cc-btn-primary-bg:var(--accent-btn);
  --cc-btn-primary-color:#fff;
  --cc-btn-primary-border-color:var(--accent-btn);
  --cc-btn-primary-hover-bg:var(--accent);
  --cc-btn-primary-hover-color:#fff;
  --cc-btn-primary-hover-border-color:var(--accent);

  /* "Choose what to allow" — quieter, because it opens a panel rather than deciding anything */
  --cc-btn-secondary-bg:transparent;
  --cc-btn-secondary-color:var(--ink-soft);
  --cc-btn-secondary-border-color:var(--line2);
  --cc-btn-secondary-hover-bg:var(--surface2);
  --cc-btn-secondary-hover-color:var(--ink);
  --cc-btn-secondary-hover-border-color:var(--accent);

  --cc-footer-bg:var(--bg2);
  --cc-footer-color:var(--muted);
  --cc-footer-border-color:var(--line);

  /* the per-category rows inside "Choose what to allow" */
  --cc-cookie-category-block-bg:var(--surface2);
  --cc-cookie-category-block-border:var(--line);
  --cc-cookie-category-block-hover-bg:var(--bg2);
  --cc-cookie-category-block-hover-border:var(--line2);
  --cc-cookie-category-expanded-block-bg:var(--bg2);
  --cc-cookie-category-expanded-block-hover-bg:var(--surface);
  --cc-pm-toggle-border-radius:12px;
}
/* The card needs an edge on a dark ground — without one it floats as a slightly lighter smudge.
   Border + glow, the same treatment the hero film needed when it "got lost in the background":
   a near-black page separates nothing with a black shadow, so the edge has to be LIT. */
#cc-main .cm,#cc-main .pm{border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.55)}
#cc-main .cm__title,#cc-main .pm__title{font-family:var(--display),Georgia,serif}
/* Smaller. The library's `box wide` is max-width:36em with generous padding, which on a laptop takes
   a real bite out of the page for a notice nobody came here to read.
   ⚠️ NARROWED RATHER THAN SWITCHED TO `box`. Plain `box` is 24rem — narrower, but it also stacks the
   three buttons vertically (`.cm--box.cm--wide .cm__btns{flex-direction:row}` is what the wide variant
   buys), so it comes out taller. Narrow the wide variant instead and keep the buttons on one row.
   ⚠️ Type is trimmed, not shrunk to nothing: this is a consent notice and it has to stay readable, so
   the description holds at .875em rather than going smaller. */
#cc-main .cm--box.cm--wide{max-width:30em}
#cc-main .cm__texts{padding-top:.7rem}
#cc-main .cm__title{font-size:1em;padding:0 1.1rem}
#cc-main .cm__desc{font-size:.875em;line-height:1.45;margin-top:.7em;padding:0 1.1rem 0}
#cc-main .cm__btns{padding:.7rem 1.1rem}
#cc-main .cm__footer{padding:.5rem 1.1rem;font-size:.8em}
#cc-main .cm__btn{padding:.55em .9em;font-size:.9em}
@media(max-width:560px){#cc-main .cm--box.cm--wide{max-width:none}#cc-main .cm__desc{font-size:.85em}}

/* Pronunciation suggestion chips — the buyer PICKS a respelling instead of authoring one.
   🔴 The old field asked for a phonetic transcription (syllables, hyphens, capitals on the stress),
   which is a linguistics task most people cannot do; a real buyer typed "hip hop" into it. A chip
   fills the same input, so nothing downstream changes and the answer stays editable. */
/* 🔴 THEY DID NOT READ AS PRESSABLE (owner, 2026-08-22). At 1px/.18 alpha on a dark ground a pill is
   indistinguishable from a static label, and the one control on the step that needs a single tap
   looked like decoration. Brighter border, more contrast, a real hover lift, and a visible focus ring
   so a keyboard user can see where they are. */
.pr-sugg{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 9px}
.pr-sugg-lab{font-size:12.5px;opacity:.8;margin-right:2px}
.pr-chip{font:inherit;font-size:14px;font-weight:600;line-height:1;padding:9px 15px;border-radius:999px;
  cursor:pointer;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.42);
  color:var(--ink);box-shadow:none;min-height:38px;transition:background .12s,border-color .12s,transform .08s}
.pr-chip:hover{background:rgba(255,255,255,.17);border-color:var(--accent-btn);transform:translateY(-1px)}
.pr-chip:active{transform:translateY(0)}
.pr-chip:focus-visible{outline:2px solid var(--accent-btn);outline-offset:2px}
/* ⚠️ --accent-btn, not --accent: white on --accent is 3.49:1 and fails WCAG AA. */
.pr-chip.on,.pr-chip[aria-pressed="true"]{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff}
/* ⚠️ The tick only appears on the CHOSEN one, so an unchosen chip keeps its full width for the sound
   itself — on a 390px phone three chips plus three ticks would wrap to three rows. */
.pr-chip.on::before{content:'✓ ';font-weight:700}