/* The page singers use anywhere, and the seed page: a broadside around a lit stage for the words.
   The tokens, masthead, cards, buttons, fields and links are identity.css's (docs/IDENTITY.md), loaded first. */
:root { --dim: var(--ink-3); --line: var(--rule); --ok: var(--green); --warn: var(--ochre); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { font: 17px/1.55 var(--serif); }
main { max-width: var(--measure); margin: 0 auto; padding: 20px var(--gutter) calc(64px + env(safe-area-inset-bottom)); }
header { margin: 8px 0 20px; }
.preview { margin-top: 14px; }
.preview audio { margin-top: 8px; }
h2 { font: 600 21px/1.25 var(--serif); margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; }
h3 { font: 600 17px/1.3 var(--serif); margin: 0 0 10px; }
/* a step's number: a red numeral, as a hymnal numbers its verses */
.n { color: var(--red); font: 600 22px/1 var(--serif); flex: none; font-variant-numeric: oldstyle-nums; }
p { margin: 0 0 10px; }
.hint { color: var(--dim); font-size: 15px; }
.status { min-height: 1.5em; color: var(--dim); }
.warn { color: var(--warn); }

.step, .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; }
.step > h2, .card > h2 { padding-bottom: 8px; border-bottom: 1px solid var(--red-rule); }
.step.waiting { opacity: .45; }
.step.waiting button, .step.waiting input, .step.waiting textarea { pointer-events: none; }
.closed { padding-top: 40px; }

/* the releases: a document set into the page, in the double rule of a notice */
.consent { border: 3px double var(--ink-3); padding: 12px 14px; margin-bottom: 12px; background: var(--paper); font-size: 15px; }
.consent h2, .consent h3 { font-size: 16px; border: 0; padding: 0; }
.consent ul { padding-left: 20px; margin: 6px 0 10px; }
.consent li { margin: 4px 0; }
label.agree { display: flex; gap: 10px; align-items: center; font-weight: 600; margin: 6px 0 10px; }
label.check { display: flex; gap: 10px; align-items: center; margin: 12px 0 4px; }
label.field { display: block; font-weight: 600; margin: 12px 0 0; }
label.field:first-child { margin-top: 0; }
.choices { display: grid; gap: 8px; margin-top: 10px; }
.choices label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.choices label small { display: block; color: var(--dim); font-size: 14px; }
.choices label:has(input:checked) { border-color: var(--ink); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; flex: none; margin-top: 2px; }
input#name, input#email, textarea { display: block; width: 100%; margin: 6px 0 4px; }
input.missing { border-color: var(--red); outline: 1px solid var(--red); }
textarea { resize: vertical; min-height: 7em; line-height: 1.45; }

/* the pitch: the first thing anyone reads, set as a short lead */
.pitch { margin: 0 0 10px; }
.pitch p { margin: 0 0 8px; }
.pitch .lead { font-size: 22px; line-height: 1.35; font-weight: 400; font-style: italic; }
.closes { font-size: 15px; font-weight: 600; color: var(--red); margin: 4px 0 12px; }
.howto { margin: 14px 0 0; }
footer { margin: 28px 0 0; text-align: center; }

/* their own page's link, to keep: a slip tucked into the page */
.link { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 12px; margin: 8px 0;
        border: 1px dashed var(--rule-strong); border-radius: var(--radius); background: var(--paper); }
.link a { flex: 1 1 200px; overflow-wrap: anywhere; font-weight: 600; }
.leaf .link button { min-height: 40px; padding: 6px 14px; }
.leaf button.plain { border: 0; background: none; padding: 0; min-height: 0; color: var(--ink); font: inherit; font-weight: inherit;
                     text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .2em; display: inline; }
.leaf button.plain:hover { color: var(--red); background: none; }

/* what you'll hear */
.pick { margin: 14px 0 0; }
.pick:first-of-type { margin-top: 4px; }
.pick h3 { margin: 0 0 6px; font-size: 16px; }
.badge { display: inline-block; margin-left: 6px; color: var(--red); font: 600 14px/1 var(--serif);
         font-variant-caps: all-small-caps; letter-spacing: .08em; vertical-align: 1px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper span { flex: 1; text-align: center; font-weight: 600; }
.leaf .stepper button { flex: none; min-width: 96px; }
.segmented { display: flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.segmented label { flex: 1; position: relative; text-align: center; }
.segmented input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmented span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 8px; font: 15px/1.2 var(--sans); }
.segmented label + label span { border-left: 1px solid var(--rule-strong); }
.segmented input:checked + span { background: var(--ink); color: var(--card); font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--hand); outline-offset: -4px; }
.segmented input:disabled + span { opacity: .5; }
.segmented strong { font-weight: inherit; }

/* what to sing: each section, or the whole song */
.parts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.leaf button.chip { min-height: 40px; padding: 6px 14px; font-size: 15px; }
.leaf button.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--card); font-weight: 600; }
.partLabel { min-height: 1.5em; font-weight: 600; margin: 4px 0 10px; }

/* words for the song: what they write is in the second hand */
.plain { font-weight: 600; }
.count { margin: 0; text-align: right; font-size: 13px; min-height: 1.2em; }
#wordsRelease { max-height: 40vh; overflow: auto; }
.wordsSent { list-style: none; padding: 0; margin: 10px 0 0; }
.wordsSent li { white-space: pre-wrap; border-left: 2px solid var(--hand); padding: 4px 12px; margin: 8px 0; color: var(--hand); font-size: 16px; }

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.leaf button { min-height: 44px; }
.meter { display: inline-block; width: 140px; height: 8px; background: var(--wash); border: 1px solid var(--rule); overflow: hidden; vertical-align: middle; }
.meter > span { display: block; height: 100%; width: 0; background: var(--green); }
.slide input[type=range] { flex: 1 1 160px; }

/* ---------------------------------------------------------------- the stage: a page lit in the dark */
.stage { position: relative; background: var(--stage); border: 3px double rgba(239, 230, 218, .28); padding: 10px; color: var(--stage-ink); }
.leaf button.full { position: absolute; top: 16px; right: 16px; z-index: 2; min-height: 32px; padding: 4px 10px; font-size: 13px;
                    border: 1px solid rgba(239, 230, 218, .35); background: var(--stage); color: var(--stage-ink); }
.leaf button.full:hover { border-color: var(--stage-ink); background: var(--stage); color: var(--stage-ink); }
/* a phone: the stage runs the full width of the screen (past the card's padding and border, and the page's) */
@media (max-width: 600px) {
  #sing .stage { margin: 0 calc(-1 * (var(--gutter) + 19px)); border-width: 3px 0; padding: 8px 0; }
}
/* full screen: the browser's own (:fullscreen), or the page's own on an iPhone (.fs) */
#sing:fullscreen, #sing.fs { margin: 0; border: 0; border-radius: 0; overflow-y: auto; background: var(--card);
                             padding: max(8px, env(safe-area-inset-top)) 10px calc(16px + env(safe-area-inset-bottom)); }
#sing.fs { position: fixed; inset: 0; z-index: 100; }
body.fs-on { overflow: hidden; }
#sing:fullscreen > h2, #sing.fs > h2, #sing:fullscreen > .hint, #sing.fs > .hint { display: none; }
#sing:fullscreen .stage, #sing.fs .stage { margin: 0 -10px; border-width: 3px 0; padding: 6px 0; }
#sing:fullscreen canvas.lane, #sing.fs canvas.lane { height: 42vh; }
#sing:fullscreen .words, #sing.fs .words { font-size: clamp(26px, 4.6vw, 52px); }
#sing:fullscreen .scroller, #sing.fs .scroller { height: 30vh; }
#sing:fullscreen .parts, #sing.fs .parts { margin-top: 4px; }
canvas.lane { display: block; width: 100%; height: clamp(150px, 28vh, 340px); background: var(--stage-panel); }
.scroller { position: relative; height: clamp(210px, 26vh, 320px); overflow: hidden; margin-top: 8px; background: var(--stage-panel);
            color: var(--stage-ink); }
.reel { position: absolute; left: 0; right: 0; top: 0; padding: 0 18px; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.item { padding: 6px 0; transform-origin: left center; transform: scale(.74); opacity: .42; transition: transform .5s, opacity .5s; }
.item.current { transform: scale(1); opacity: 1; }
.item.past { opacity: .18; }
.label { color: var(--stage-red); font: 600 15px/1.2 var(--serif); font-variant-caps: all-small-caps; letter-spacing: .1em; margin-bottom: 3px; }
.words { font: 600 clamp(22px, 5.4vw, 35px)/1.22 var(--serif); }
/* the sung part of a syllable, filled as it is sung (a hard edge, not a fade) */
.syl { background: linear-gradient(90deg, var(--sung) var(--p, 0%), var(--stage-ink) var(--p, 0%));
       -webkit-background-clip: text; background-clip: text; color: transparent; }
.gap { display: flex; align-items: center; gap: 12px; margin: 2px 0 6px; color: var(--stage-dim); font: 13px var(--sans); transition: opacity .6s; }
.gap.spent { opacity: 0; }
.track { flex: 0 1 140px; height: 3px; background: #3a322c; overflow: hidden; }
.fill { display: block; height: 100%; width: 0; background: var(--stage-dim); }
.dots i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #3a322c; }
.dots i.on { background: var(--sung); }
.done { font: italic 20px var(--serif); color: var(--stage-dim); padding: 16px 0; }
.bar { height: 3px; margin-top: 8px; background: #2e2722; overflow: hidden; }
.bar > div { height: 100%; width: 0; background: var(--stage-red); }

.controls button { flex: 1 1 auto; }
ol#takes { padding-left: 22px; margin: 6px 0; }
ol#takes li { margin: 6px 0; }
ol#takes li.none { list-style: none; margin-left: -22px; }
.sending { color: var(--dim); }
.sent { color: var(--ok); }
.failed { color: var(--red); }

/* what you sing to, in a line that opens to the choices; the optional microphone check */
details.version { margin: 10px 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
details.version > summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: space-between;
                            padding: 10px 12px; cursor: pointer; list-style: none; }
details.version > summary::-webkit-details-marker { display: none; }
details.version > summary #versionSummary { font-weight: 600; }
details.version > summary .change { color: var(--ink); font-size: 15px; text-decoration: underline; text-decoration-color: var(--red);
                                    text-underline-offset: .2em; }
details.version[open] > summary .change { text-decoration: none; }
details.version > .pick { padding: 0 12px 10px; }
details.version > #versionNote { padding: 0 12px 10px; margin: 0; }
p.mic { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 8px 0 0; }
details.step > summary { cursor: pointer; font-weight: 600; }
details.step[open] > summary { margin-bottom: 8px; }
/* a big window: the singing takes more of its width than the page's text column */
@media (min-width: 1100px) {
  #sing:not(.fs):not(:fullscreen) { width: 1040px; margin-left: calc(50% - 520px); }
  #sing .words { font-size: 36px; }
}
/* the pitch's promise, where the eye lands: set bold, not underlined (an underline is a link here) */
.promise { font-weight: 600; color: var(--ink); }
details.listen { margin: 6px 0 10px; font-size: 15px; color: var(--dim); }
details.listen > summary { cursor: pointer; list-style: none; }
details.listen > summary::-webkit-details-marker { display: none; }
details.listen > summary .change { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .2em; margin-left: 4px; }
details.listen ol { margin: 8px 0 0; padding-left: 22px; }
details.listen li { margin: 4px 0; }
details.listen label.speaker { display: flex; gap: 8px; align-items: center; margin-top: 6px; color: var(--ink); }
/* the AI disclosure: a notice, in the double rule */
.card.disclosure { border: 3px double var(--ink-3); background: var(--card); }
.disclosure > h2 { font-size: 17px; margin: 0 0 8px; }
.disclosure > p { margin: 0; font-size: 16px; }

/* the seed page: how to run it, set in the typewriter face of a field recordist's card; the page a little wider
   than the singing one so the three commands sit on their lines without scrolling */
body.seed main { max-width: 820px; }
pre, code { font-family: var(--mono); font-size: 13.5px; }
pre { margin: 0 0 10px; padding: 10px 12px; overflow-x: auto; background: var(--paper); border-left: 2px solid var(--red-rule); line-height: 1.5; }

/* the seed page's word that the song is an AI Song Contest finalist and the way to vote (2026-11-11): a thin dark
   bar across the top of the page, in the masthead's spaced capitals, set in the stage's colours */
.contest { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 12px;
           padding: calc(.75em + env(safe-area-inset-top)) var(--gutter) .75em; background: var(--stage); color: var(--stage-ink);
           border-bottom: 1px solid var(--stage-panel); text-align: center;
           font: 600 14.5px/1.4 var(--serif); text-transform: uppercase; letter-spacing: .12em; }
.contest a { color: inherit; text-decoration: underline 1px; text-decoration-color: var(--stage-dim); text-underline-offset: .3em; }
.contest a.vote { color: var(--sung); text-decoration-color: currentColor; }
.contest a:hover { color: var(--sung); text-decoration-color: currentColor; }
.contest .sep { color: var(--stage-dim); }
/* on a phone the two halves stack, without the dash between them */
@media (max-width: 540px) { .contest { flex-direction: column; align-items: center; font-size: 13px; letter-spacing: .05em; }
                            .contest .sep { display: none; } }

/* the seed page's sleeve: the cover beside the pitch, above it on a phone */
.sleeve { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: 22px; align-items: start; }
.cover { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: var(--radius);
         background: var(--wash); }
@media (max-width: 640px) {
  .sleeve { grid-template-columns: 1fr; gap: 16px; }
  .cover { max-width: 420px; }
}
/* the words under the player: a slim strip of the stage, the line being sung and the next, dimmed */
.lyric { margin-top: 8px; padding: 10px 16px 12px; background: var(--stage); border: 3px double rgba(239, 230, 218, .28);
         color: var(--stage-ink); }
.lyric p { margin: 0; }
.lyric .now { font: 600 clamp(18px, 4.6vw, 24px)/1.3 var(--serif); min-height: 1.3em; }
.lyric .next { font: 16px/1.4 var(--serif); color: var(--stage-dim); min-height: 1.4em; margin-top: 2px;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a phone: the line being sung may take two lines; room for both, so the strip never jumps */
@media (max-width: 640px) { .lyric .now { min-height: 2.6em; } }
/* which edition plays, under the player, and the way to the others */
.which { margin: 8px 0 0; }
.which:empty { display: none; }

/* the history: every edition, newest first, each on a card of its own, numbered as a hymnal numbers its verses;
   what identifies it behind a disclosure, the hashes free to break anywhere on a phone */
.kicker a { color: inherit; }
.editions { list-style: none; margin: 0; padding: 0; }
.edition .when { margin: -2px 0 8px; color: var(--dim); font-size: 15px; }
.edition audio { margin: 12px 0 8px; }
.edition > p.hint { margin: 0; }

.facts { margin-top: 10px; font-size: 15px; }
.facts > summary { cursor: pointer; color: var(--ink-2); }
.facts dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 0; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; }
.facts code { font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .facts dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .facts dd { margin-bottom: 6px; } }

/* the studio, as it opens: a picture of it in a hairline, as the cover is; a phone's on a phone */
.shot { display: block; width: 100%; height: auto; margin: 4px 0 14px; border: 1px solid var(--rule); border-radius: var(--radius);
        background: var(--wash); }
.leaf .button { min-height: 44px; }

/* about: the artist's statement first, quoted in a red margin rule as a copybook's, then who sang */
.statement { margin: 0 0 14px; }
.statement blockquote { margin: 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--red-rule); }
.statement blockquote p { margin: 0; }
.statement figcaption { margin: 8px 0 0 18px; color: var(--dim); font-size: 15px; }
.about h3 { margin-top: 18px; }

/* the home page: the statement beside the cover, then one card to make your own (the studio's four views, then
   the file's own commands), then who made it */
.pitch .lead cite { font-style: normal; }
.studio .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 12px 0 14px; }
.studio .tabs figure { margin: 0; }
.studio .tabs img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; }
.studio .tabs figcaption { margin-top: 6px; font-size: 15px; line-height: 1.35; color: var(--dim); }
.studio .tabs figcaption b { color: var(--ink); font-weight: 600; margin-right: 2px; }
.studio .button.primary { font-size: 18px; font-weight: 600; padding: 12px 28px; min-height: 52px; }
.studio h3 { margin: 22px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.card.disclosure > p + p { margin-top: 10px; }
@media (min-width: 641px) {
  /* on a wide screen: the four views in one row, each a slanted stripe of its picture, a seam's width apart */
  .studio .tabs { --slant: 44px; --seam: 6px; grid-template-columns: repeat(4, 1fr); gap: 0; }
  .studio .tabs figure { min-width: 0; margin-right: calc(-1 * var(--slant)); }
  .studio .tabs figure:last-child { margin-right: 0; }
  .studio .tabs img { height: 210px; object-fit: cover; object-position: left top; border: 0; border-radius: 0;
                      clip-path: polygon(calc(var(--slant) + var(--seam)) 0, 100% 0, calc(100% - var(--slant)) 100%, var(--seam) 100%); }
  .studio .tabs figure:first-child img { clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
  .studio .tabs figure:last-child img { clip-path: polygon(calc(var(--slant) + var(--seam)) 0, 100% 0, 100% 100%, var(--seam) 100%); }
  .studio .tabs figure:nth-child(2) img { object-position: 30% top; }    /* Arrange: the refrain set to hard */
  .studio .tabs figure:nth-child(3) img { object-position: right top; }  /* Mix: the voice's strip, at its right */
  .studio .tabs figcaption { margin-left: calc(var(--seam) + 2px); }
  .studio .tabs figure:first-child figcaption { margin-left: 0; }
}
@media (max-width: 640px) {
  /* on a phone: the cover small beside the statement, so the player is near the first screen; the four views a
     row to swipe through, each nearly the card's width, rather than a long column */
  .sleeve { display: block; }
  .sleeve .cover { float: left; width: 42%; margin: 4px 14px 6px 0; }
  .sleeve::after { content: ""; display: block; clear: both; }
  .pitch .lead { font-size: 19px; }
  .studio .tabs { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -18px;
                  padding-right: 18px; padding-bottom: 6px; overscroll-behavior-x: contain; }
  .studio .tabs figure { flex: 0 0 84%; scroll-snap-align: start; }
}