/* Phone Smarts AI — Song Gift. Same palette and type as Connect (gold on warm black). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  background:
    radial-gradient(ellipse at top, rgba(212, 175, 55, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #0a0a0c 0%, #1a1612 100%);
  color: #e8e6e3; min-height: 100vh; -webkit-font-smoothing: antialiased; line-height: 1.5;
}
a { color: #d4af37; text-decoration: none; } a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  background: #0a0a0c; position: sticky; top: 0; z-index: 10;
}
.app-header .brand { display: flex; align-items: center; gap: 0.6rem; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; letter-spacing: 0.5px; }
.app-header .brand img { height: 28px; width: 28px; border-radius: 6px; }
.app-header .brand strong { color: #d4af37; font-weight: 600; }
.brand-product { color: rgba(232,230,227,0.6); font-size: 0.95rem; }

main { max-width: 560px; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; }
footer { margin-top: 2.5rem; text-align: center; font-size: 0.75rem; color: rgba(232,230,227,0.4); }

.stepper { list-style: none; display: flex; gap: 0.35rem; padding: 0; margin: 0 0 1.2rem; }
.stepper li { flex: 1; font-size: 0.72rem; color: rgba(232,230,227,0.45); display: flex; align-items: center; gap: 0.35rem; border-top: 2px solid rgba(212,175,55,0.15); padding-top: 0.45rem; }
.stepper li span { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; background: rgba(212,175,55,0.12); color: rgba(212,175,55,0.7); flex-shrink: 0; }
.stepper li.active { color: #f0ead6; border-top-color: #d4af37; }
.stepper li.active span { background: #d4af37; color: #1a1612; font-weight: 600; }
.stepper li.done { color: rgba(232,230,227,0.7); border-top-color: rgba(212,175,55,0.5); }
.stepper li[role="button"] { cursor: pointer; -webkit-tap-highlight-color: rgba(212,175,55,0.2); }
.stepper li[role="button"]:hover, .stepper li[role="button"]:focus-visible { color: #f0ead6; outline: none; }

.section-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.7rem; margin: 0 0 0.3rem; color: #f0ead6; font-weight: 500; }
.section-sub { color: rgba(232,230,227,0.6); font-size: 0.92rem; margin: 0 0 1.1rem; }
.card { background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.18); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 0.9rem; }
.card.note { font-size: 0.88rem; color: rgba(232,230,227,0.72); }
.card.chosen { border-color: #d4af37; box-shadow: 0 0 0 1px rgba(212,175,55,0.4); }

label { display: block; font-size: 0.82rem; color: rgba(232,230,227,0.75); margin: 0.9rem 0 0.35rem; letter-spacing: 0.3px; }
label .hint { display: block; font-size: 0.76rem; color: rgba(232,230,227,0.45); margin-top: 0.1rem; font-weight: 300; }
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  width: 100%; padding: 0.75rem 0.9rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.25);
  border-radius: 8px; color: #f0ead6; font-size: 1rem; font-family: inherit; -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #d4af37; background: rgba(255,255,255,0.06); }
textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
/* a placeholder must never look like a filled-in answer (beta tester 2026-09-23 took grey "Emily" as already filled) */
input::placeholder, textarea::placeholder { color: rgba(232,230,227,0.3); font-style: italic; }
.need, .need:focus { border-color: #e0605a; box-shadow: 0 0 0 2px rgba(224,96,90,0.35); }
.need-msg { color: #f08a84; font-size: 0.82rem; margin: 0.35rem 0 0; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
/* 0.5.16: name + "say it like" on one line, even on a phone; every label says needed / optional */
.name-line { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0.6rem; }
.name-line > div { min-width: 0; }
.hint-line { font-size: 0.76rem; color: rgba(232,230,227,0.5); margin: 0.35rem 0 0; font-weight: 300; }
.req-tag { display: inline-block; font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.05rem 0.4rem; border-radius: 999px; background: rgba(212,175,55,0.2); color: #e8c860; vertical-align: 1px; }
.req-tag.opt { background: rgba(255,255,255,0.07); color: rgba(232,230,227,0.6); }
.jog { font-size: 0.9rem; }
.jog .jog-title { margin: 0 0 0.3rem; color: #d4af37; font-weight: 600; }
.jog ul { margin: 0; padding-left: 1.2rem; columns: 2 16rem; column-gap: 1.4rem; }
.jog li { margin: 0.12rem 0; break-inside: avoid; }
.jog summary { cursor: pointer; color: #d4af37; min-height: 44px; display: list-item; }
.jog[open] summary { margin-bottom: 0.5rem; }
.who-q .chip { min-height: 44px; }
.who-q .chip:focus-visible, #story-ideas summary:focus-visible, .sample-btn:focus-visible {
  outline: 2px solid #d4af37; outline-offset: 3px;
}
.story-card label { margin-top: 0; }
.story-box { min-height: 200px; }
.example-text { margin: 0; line-height: 1.55; }
/* 0.5.17: the two singers by name, each with its own Hear + Choose (Daryl 2026-09-24) */
.singers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 0.4rem; border-radius: 12px; }
.singer { border: 1px solid rgba(212,175,55,0.25); border-radius: 12px; padding: 0.8rem 0.7rem; text-align: center; background: rgba(255,255,255,0.02); display: flex; flex-direction: column; align-items: center; gap: 0.45rem; min-width: 0; }
.singer.on { border-color: #d4af37; box-shadow: 0 0 0 2px rgba(212,175,55,0.45); background: rgba(212,175,55,0.07); }
.singer img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(212,175,55,0.4); }
.singer-name { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; color: #f0ead6; line-height: 1; }
.singer-kind { font-size: 0.78rem; color: rgba(232,230,227,0.6); margin-top: -0.2rem; }
.singer .btn { width: 100%; }
/* the whole top of the card is the radio: tap the dot, the photo or the name */
.singer-pick { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 0; cursor: pointer; width: 100%; font-size: inherit; color: inherit; letter-spacing: 0; }
.singer-pick input[type="radio"] { width: 1.3rem; height: 1.3rem; accent-color: #d4af37; margin: 0; cursor: pointer; }
.singer.on .singer-name { color: #e8c860; }
@media (max-width: 420px) { .row-2 { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.3rem; }
.chip { border: 1px solid rgba(212,175,55,0.3); background: rgba(212,175,55,0.06); color: #f0ead6; border-radius: 999px; padding: 0.45rem 0.85rem; font-size: 0.88rem; }
.chip.on { background: linear-gradient(180deg, #d4af37, #b8932f); color: #1a1612; border-color: transparent; font-weight: 600; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.75rem 1.1rem; border: 1px solid rgba(212,175,55,0.3); border-radius: 8px; background: rgba(212,175,55,0.08); color: #f0ead6; font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
.btn:hover, .btn:active { background: rgba(212,175,55,0.18); text-decoration: none; }
.btn.primary { background: linear-gradient(180deg, #d4af37, #b8932f); border-color: transparent; color: #1a1612; font-weight: 600; }
.btn.primary:hover { background: linear-gradient(180deg, #e6c247, #c89c33); }
.btn[hidden] { display: none; }
/* 2026-10-01 "user always knows what is next": what a button does, right under it; where you are, at the top */
.card.song, #main-video, #choice, #decide { scroll-margin-top: 104px; }   /* a jump lands the card's title below the sticky header */
.with-help { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.with-help[hidden] { display: none; }
.what-next { margin: 0; font-size: 0.78rem; line-height: 1.35; color: rgba(232,230,227,0.6); }
.actions.sticky .what-next { font-size: 0.7rem; }
.decide-choices { display: grid; gap: 0.8rem; margin-top: 0.7rem; }
.lyr-tools .with-help { margin-bottom: 0.2rem; }
.end-actions { flex-direction: column; align-items: stretch; }
.where { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.8rem; margin: 0 0 1rem; border-left: 3px solid #d4af37; background: rgba(212,175,55,0.07); border-radius: 0 8px 8px 0; font-size: 0.85rem; }
.where b { color: #f0ead6; font-weight: 600; }
.where span { color: rgba(232,230,227,0.7); }
/* 7 steps on a phone: numbers for all, the name only for the step you are on */
.stepper li i { font-style: normal; }
@media (max-width: 640px) { .stepper li:not(.active) i { display: none; } .stepper li { flex: 0 0 auto; } .stepper li.active { flex: 1; } }   /* .btn's inline-flex beat the hidden attribute (2026-10-01) */
.btn.full { width: 100%; } .btn.big { padding: 1rem 1.2rem; font-size: 1.05rem; } .btn.tiny { padding: 0.4rem 0.7rem; font-size: 0.8rem; }
.btn.working { background: linear-gradient(180deg, #d4af37, #b8932f); color: #1a1612; border-color: transparent; opacity: 1; }
.btn:disabled { cursor: default; }
.btn.ghost { background: none; border-color: rgba(232,230,227,0.15); color: rgba(232,230,227,0.7); }
.actions { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.actions .btn { flex: 1; }
.intake-actions > .with-help { flex: 3; }
.intake-actions { align-items: flex-start; }
/* 📚 Your songs — 7-day history */
.hist-link { display: block; width: 100%; margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: 10px; border: 1px solid rgba(212,175,55,0.45);
  background: rgba(212,175,55,0.10); color: #f0ead6; font-size: 0.9rem; font-weight: 500; text-align: left; }
.hist-modal { max-height: 88vh; overflow-y: auto; max-width: 540px; }
.hist-modal .warn { background: rgba(224,96,90,0.12); border: 1px solid rgba(224,96,90,0.45); color: #f6c9c5; border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.86rem; margin: 0.4rem 0 0.9rem; }
.hist h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.hist-item { display: grid; gap: 0.35rem; margin-top: 0.7rem; }
.hist-item b { font-size: 0.86rem; font-weight: 500; }
.hist-item audio, .hist-item video { width: 100%; }
.hist-item video { max-height: 45vh; border-radius: 8px; background: #000; }
.hist-item .btn { justify-self: start; }
/* setup steps: Back / Next stay on screen — nobody scrolls around looking for what to do next */
.actions.sticky { position: sticky; bottom: 0; z-index: 20; margin-left: -1rem; margin-right: -1rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: #14110e; border-top: 1px solid rgba(212,175,55,0.25);
  box-shadow: 0 -8px 16px rgba(0,0,0,0.45); }
/* beta: keep clear of the feedback mic button in the bottom-right corner */
.has-widget .actions.sticky { padding-right: 5.2rem; }
.spinner { width: 14px; height: 14px; border: 2px solid rgba(26,22,18,0.35); border-top-color: #1a1612; border-radius: 50%; display: inline-block; animation: spin 0.8s linear infinite; }
.spinner.light { border-color: rgba(212,175,55,0.3); border-top-color: #d4af37; }
@keyframes spin { to { transform: rotate(360deg); } }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.5rem; margin-top: 0.8rem; }
.media-grid .tile { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.05); border: 1px solid rgba(212,175,55,0.2); }
.media-grid img, .media-grid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-grid .rm { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.65); color: #fff; border: 0; border-radius: 50%; width: 22px; height: 22px; font-size: 0.8rem; line-height: 1; }
.media-grid .badge { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.65rem; padding: 1px 5px; border-radius: 4px; }
.drop { border: 1px dashed rgba(212,175,55,0.4); border-radius: 12px; padding: 1.4rem 1rem; text-align: center; color: rgba(232,230,227,0.7); font-size: 0.92rem; cursor: pointer; }
/* file inputs: rendered but invisible — browsers hand files more reliably to an input that is not display:none */
.pick-inputs { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
button.drop { display: block; width: 100%; background: none; font: inherit; line-height: 1.5; }
.drop.over { border-style: solid; border-color: #d4af37; background: rgba(212,175,55,0.08); }
.drop:disabled { cursor: default; opacity: 0.8; }
.drop-row { display: flex; gap: 0.6rem; align-items: center; justify-content: center; margin-top: 0.6rem; flex-wrap: wrap; }
.drop.small { padding: 0.55rem 0.9rem; font-size: 0.82rem; display: inline-block; width: auto; }
.paste-box { min-height: 4.5rem; margin: 0.6rem 0; padding: 0.9rem; border: 2px dashed #d4af37; border-radius: 12px; color: #f0ead6; text-align: center; outline: none; -webkit-user-select: text; user-select: text; }
.paste-box:empty::before { content: attr(data-hint); opacity: 0.75; }
.paste-box[hidden] { display: none; }
.paste-steps { margin: 0.4rem 0 0.2rem 1.1rem; padding: 0; }

.song { padding: 1.1rem 1.2rem; }
.song h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.45rem; margin: 0 0 0.15rem; color: #f0ead6; font-weight: 500; }
.song .angle { font-size: 0.85rem; color: rgba(232,230,227,0.6); margin: 0 0 0.7rem; }
.song audio { width: 100%; margin: 0.4rem 0 0.6rem; }
.song .status { font-size: 0.85rem; color: rgba(212,175,55,0.85); display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
.song .status.err { color: #f5b8b8; }
.song .status.ok { color: #7fd99f; }
.song details { margin: 0.5rem 0 0.8rem; }
.song summary { cursor: pointer; font-size: 0.85rem; color: rgba(232,230,227,0.7); }
.song pre { white-space: pre-wrap; font-family: inherit; font-size: 0.95rem; line-height: 1.55; color: #f0ead6; background: rgba(0,0,0,0.25); border-radius: 8px; padding: 0.8rem 0.9rem; margin: 0.5rem 0 0; }
.song .pick { display: flex; gap: 0.5rem; }
.song .pick .btn { flex: 1; }
.meta { font-size: 0.78rem; color: rgba(232,230,227,0.5); }

.price-card { text-align: center; }
.video { margin-top: 0.9rem; }
.video video { width: 100%; max-height: 70vh; border-radius: 12px; background: #000; border: 1px solid rgba(212,175,55,0.3); }
.bar { height: 10px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; margin: 0.5rem 0 0.3rem; }
.bar .fill { height: 100%; background: linear-gradient(90deg, #b8932f, #d4af37); transition: width 0.6s; }
.price-card .big { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; color: #f0ead6; }
.toast { position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom)); pointer-events: none; transform: translateX(-50%); background: rgba(20,18,14,0.95); border: 1px solid rgba(212,175,55,0.4); color: #f0ead6; padding: 0.7rem 1rem; border-radius: 10px; font-size: 0.9rem; z-index: 50; max-width: 90vw; }

.quota { text-align: center; font-size: 0.78rem; color: rgba(240,234,214,0.85); background: rgba(212,175,55,0.10); border: 1px solid rgba(212,175,55,0.25); border-radius: 999px; padding: 0.35rem 0.8rem; margin: -0.4rem 0 1rem; }
.quota.low { border-color: rgba(212,175,55,0.6); }
.quota.out { color: #f0ead6; background: rgba(180,60,60,0.18); border-color: rgba(220,90,90,0.5); }
.quota[role="button"] { cursor: pointer; font-weight: 600; border-width: 2px; }
.quota[role="button"]:hover, .quota[role="button"]:focus { background: rgba(212,175,55,0.28); outline: none; }

.version { margin: 0.6rem 0 0.2rem; font-size: 0.85rem; }
.version summary { cursor: pointer; color: #d4af37; }
.version label { display: block; margin: 0.5rem 0 0.25rem; font-size: 0.75rem; color: rgba(232,230,227,0.6); }
.version .btn { margin-top: 0.6rem; }

.modal-back { position: fixed; inset: 0; background: rgba(4,4,6,0.78); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.modal { max-width: 420px; width: 100%; background: #17140f; max-height: calc(100vh - 2rem); overflow-y: auto; box-shadow: 0 18px 50px rgba(0,0,0,0.6); }   /* opaque: the page showed through every pop-up (0.5.22) */
.modal h3 { margin-top: 0; }

/* 7-day keep notice (2026-09-23) */
.keep-note { margin: 0.8rem 0 0; padding: 0.6rem 0.8rem; border: 1px solid rgba(212,175,55,0.45); border-radius: 10px; background: rgba(212,175,55,0.08); color: #e8e6e3; font-size: 0.9rem; }

/* 0.5.13 — Sher (beta, 2026-09-24): "on my computer the page showed up as a narrow column ... quite a bit of scrolling".
   Phones are unchanged; computers get the width. */
.example dl { margin: 0.4rem 0 0; }
.example dt { font-weight: 600; font-size: 0.85rem; margin-top: 0.55rem; color: #e8e6e3; }
.example dd { margin: 0.15rem 0 0; font-size: 0.88rem; color: rgba(232,230,227,0.78); }
.example summary { cursor: pointer; font-weight: 600; color: #d4af37; }
.photo-ideas ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.photo-ideas li { margin: 0.25rem 0; }
.quick-change { margin-bottom: 0.5rem; }
@media (min-width: 1000px) {
  main { max-width: 1040px; }
  .qgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.4rem; }
  .qgrid .q { min-width: 0; }
  .song-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; align-items: start; }
  .song-grid > .card { margin-bottom: 0; }
  .song-grid > .card:only-child { grid-column: 1 / -1; }
  .song-grid > .card:only-child pre { columns: 2; column-gap: 2rem; }
  .song-grid + * { margin-top: 0.9rem; }
  .example dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.4rem; }
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* 0.5.14 — one question per screen, voice samples, say-it-like, results layout */
.who-q .q-count { margin: 0 0 0.35rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(232,230,227,0.6); }
.q-dots { display: flex; gap: 0.3rem; margin-bottom: 0.9rem; }
.q-dots span { flex: 1; height: 4px; border-radius: 99px; background: rgba(212,175,55,0.18); }
.q-dots span.done { background: rgba(212,175,55,0.55); }
.q-dots span.on { background: #d4af37; }
.who-q label { font-size: 1.05rem; }
.say-as { margin-top: 0.9rem; }
.say-as summary { cursor: pointer; color: #d4af37; font-size: 0.9rem; }
.samples { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.sample-row audio { display: none; }
.optional-note { border-color: rgba(212,175,55,0.5); background: rgba(212,175,55,0.07); font-size: 0.95rem; }
.optional-note strong { color: #d4af37; }
.versions-title { margin: 1.1rem 0 0.5rem; font-size: 1.05rem; }
.card.song.compact h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.card.song.compact .status { font-size: 0.8rem; }


/* lyrics editor before singing (0.5.22) */
.lyrics-edit { width: 100%; min-height: 22rem; box-sizing: border-box; font: inherit; font-size: 1rem; line-height: 1.55; padding: 0.8rem; margin-top: 0.4rem; }
.lyr-tools { display: grid; grid-template-columns: 1fr; gap: 0.45rem; margin: 0.8rem 0; }
@media (min-width: 640px) { .lyr-tools { grid-template-columns: 1fr 1fr; } }
.lyr-tools .btn { white-space: normal; text-align: left; }

/* sound picks before singing (0.5.24) */
.sound-card { margin-top: 0.8rem; }
/* 0.7.0: the sound picks and the word tools are folded away — the main path is read the words, tap Sing.
   The summary line says what is picked, so nothing is hidden, only tucked. */
details.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; color: #d4af37; font-weight: 600; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: '▸'; font-size: 0.9em; transition: transform 0.15s; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary .meta { font-weight: 400; }
details.fold > summary:hover { filter: brightness(1.15); }
.beta-join input { width: 100%; }
.sound-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.55rem; }
.sound-row > .meta { min-width: 3.6rem; }
.sound-row .chips { margin: 0; }
/* 2026-10-01: each row = label + "Hear this sample" on one line, the choices under it */
.sound-row { display: block; padding-top: 0.55rem; border-top: 1px solid rgba(212,175,55,0.15); }
.sound-row-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
.btn.hear { white-space: nowrap; }
.btn.hear.on { border-color: #d4af37; color: #d4af37; }
/* 0.7.2: the sound choices sit in the change box on the song screen, as radio rows (○/●) */
.sound-change { margin-top: 0.6rem; padding: 0.7rem 0.85rem; }
.sound-change .sound-row:first-of-type { border-top: 0; padding-top: 0.2rem; }
.chip.radio { padding-left: 0.65rem; }
.sample-btn { margin-top: 0.1rem; }
.tuner > b { display: block; margin-bottom: 0.5rem; }

/* take them to what they picked (0.5.26) */
@keyframes justNew { 0% { box-shadow: 0 0 0 0 rgba(212,175,55,0.75); } 100% { box-shadow: 0 0 0 14px rgba(212,175,55,0); } }
.just-new { animation: justNew 1.2s ease-out 2; border-color: #d4af37 !important; }
.card.song.fresh { border-color: #d4af37; }
.new-badge { display: block; font-size: 0.8rem; color: #1a1612; background: #d4af37; border-radius: 999px; padding: 0.15rem 0.6rem; margin-bottom: 0.4rem; width: fit-content; }

/* speed & pitch sliders (0.5.28) */
.tuner { margin-top: 0.6rem; padding: 0.7rem; border: 1px solid rgba(212,175,55,0.3); border-radius: 10px; }
.tuner-row { display: block; margin-bottom: 0.7rem; }
.tuner-row > span { display: block; margin-bottom: 0.25rem; }
.tuner input[type=range] { width: 100%; accent-color: #d4af37; height: 2rem; }

/* 0.5.36 photo order: one row per picture, big ▲ ▼ targets (44 px — thumb-friendly on iPhone), drag on desktop. */
.media-grid.ordered { display: flex; flex-direction: column; gap: 0.5rem; }
.media-grid.ordered .tile { aspect-ratio: auto; display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; min-height: 72px; overflow: visible; }
.media-grid.ordered .tile[draggable="true"] { cursor: grab; }
.media-grid.ordered .pos { flex: 0 0 auto; min-width: 1.6rem; text-align: center; font-weight: 700; color: var(--gold, #d4af37); }
.media-grid.ordered .thumb { position: relative; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,0.05); }
.media-grid.ordered .what { flex: 1 1 auto; font-size: 0.85rem; opacity: 0.85; min-width: 0; }
.media-grid.ordered .mv-box { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.media-grid.ordered .mv { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(212,175,55,0.5); background: rgba(255,255,255,0.08); color: #fff; font-size: 1.1rem; line-height: 1; touch-action: manipulation; }
.media-grid.ordered .mv:disabled { opacity: 0.3; }
.media-grid.ordered .rm { position: static; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; font-size: 1.2rem; }
.order-help { text-align: center; margin-top: 0.5rem; }
/* 0.5.39 log in: the password box fills the row next to its Show button */
.signin-modal input[type="password"], .signin-modal input[type="text"] { flex: 1; min-width: 0; }

/* 0.7.4 — the change box opens on the words, plainly editable (Daryl 2026-10-29: "make it apparent that lyrics are editable") */
.words-card { margin-top: 0.6rem; padding: 0.75rem 0.85rem; }
.words-edit { border: 2px dashed #e9b949; border-radius: 10px; background: #fffdf6; color: #1d1a14; cursor: text; min-height: 18rem; }
.words-edit:focus { outline: none; border-style: solid; box-shadow: 0 0 0 3px rgba(233, 185, 73, 0.35); }
.words-note { margin: 0.2rem 0 0; }
/* 0.7.4 — the card screen's promise, said once and big */
.card-promise { font-size: 1.05rem; margin: 0.5rem 0 0.3rem; color: #f0ead6; }