/* ===========================================================================
   theme.css — THE design system for mysongtovideo.com. ONE definition, every page.

   ⛔ WHY THIS FILE EXISTS (2026-10-02, C2). The owner: "The submit page is so bright
   compared to the homepage." It was: index/review/status each carried their own
   COPY of the same dark tokens inline, while submit.html and terms.html still
   linked the old light style.css. Four copies of a design system is not a design
   system. Change a value HERE and every page follows.

   Palette is "cinematic night", taken from the homepage he approved by not
   complaining about it: deep indigo for stage dark, warm gold for the key light,
   rose for the fill. ⚠️ docs/DESIGN.md originally proposed a LIGHT paper-and-ink
   palette; that direction was never built and is superseded by this file.
   =========================================================================== */

:root{
  --night:#0B0A1F;
  --night-mid:#15122E;
  --night-soft:#1E1A3C;
  --gold:#F0B254;
  --gold-glow:rgba(240,178,84,.14);
  --rose:#E8718D;
  --rose-glow:rgba(232,113,141,.12);
  --cream:#F6F2EA;
  --muted:rgba(246,242,234,.66);
  --faint:rgba(246,242,234,.42);
  --card-bg:rgba(246,242,234,.045);
  --card-border:rgba(240,178,84,.18);
  --hairline:rgba(246,242,234,.08);
  --ok:#8FCB9B;
  --bad:#FF9B8A;
  --maxw:1200px;
  --reading:760px;      /* measure cap for anything that is actually read */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{
  margin:0;background:var(--night);color:var(--cream);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2}
.container.reading{max-width:var(--reading)}
h1,h2,h3{font-family:Fraunces,Georgia,serif;line-height:1.1;margin:0}
a{color:var(--gold)}
a:hover{color:#FFD79A}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.eyebrow{
  font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 22px;
}
.quiet{color:var(--muted);font-size:15px}

/* ---------- site nav: the same bar on every page, so nobody is ever stranded ---- */
.sitenav{
  position:sticky;top:0;z-index:50;
  background:rgba(11,10,31,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.sitenav .container{display:flex;align-items:center;gap:22px;padding-top:14px;padding-bottom:14px}
.sitenav .wordmark{
  font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;
  color:var(--cream);text-decoration:none;margin-right:auto;letter-spacing:-.01em;
}
.sitenav .wordmark b{color:var(--gold);font-weight:600}
.sitenav a.navlink{
  color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;
  padding:10px 2px;transition:color .25s ease;
}
.sitenav a.navlink:hover,.sitenav a.navlink[aria-current="page"]{color:var(--cream)}
.sitenav .btn-primary{padding:11px 22px;font-size:15px;box-shadow:0 6px 20px rgba(240,178,84,.24)}
@media(max-width:580px){
  .sitenav .container{gap:14px}
  .sitenav a.navlink{display:none}
  .sitenav .btn-primary{padding:10px 18px}
}

/* ---------- buttons ---------- */
.btn-primary{
  display:inline-block;font-size:18px;font-weight:500;letter-spacing:.01em;
  padding:19px 38px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;
  font-family:inherit;
  color:var(--night);background:linear-gradient(135deg,var(--gold),#FFD79A);
  box-shadow:0 10px 34px rgba(240,178,84,.28);
  transition:transform .3s ease,box-shadow .3s ease,filter .3s ease;
}
.btn-primary:hover{transform:translateY(-3px);filter:brightness(1.07);box-shadow:0 16px 44px rgba(240,178,84,.4)}
.btn-primary[disabled],.btn-primary:disabled{
  background:rgba(246,242,234,.12);color:var(--faint);box-shadow:none;
  transform:none;filter:none;cursor:not-allowed;
}
.btn-ghost{
  display:inline-block;font-size:17px;font-weight:500;padding:18px 30px;border-radius:999px;
  text-decoration:none;color:var(--cream);border:1px solid rgba(246,242,234,.28);
  background:transparent;cursor:pointer;font-family:inherit;
  transition:border-color .3s ease,transform .3s ease,background .3s ease;
}
.btn-ghost:hover{border-color:var(--gold);transform:translateY(-3px);background:rgba(240,178,84,.07)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.cta-note{font-size:15px;color:var(--muted);margin:18px 0 0}

/* ---------- sections ---------- */
section{position:relative;padding:120px 0}
.band{background:var(--night-mid)}
.band-soft{background:linear-gradient(180deg,var(--night) 0%,var(--night-soft) 50%,var(--night) 100%)}
.sec-head{max-width:46ch;margin:0 0 56px}
.sec-head h2{font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-.015em}
.sec-head p{color:var(--muted);margin:18px 0 0;font-size:19px}

/* ---------- compact page header, for every page that is NOT the homepage ------- */
.pagehead{position:relative;padding:86px 0 56px;overflow:hidden;border-bottom:1px solid var(--hairline)}
.pagehead::before{
  content:"";position:absolute;left:-10%;top:-120%;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,var(--gold-glow) 0%,transparent 68%);filter:blur(30px);
  pointer-events:none;
}
.pagehead::after{
  content:"";position:absolute;right:-8%;bottom:-130%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,var(--rose-glow) 0%,transparent 70%);filter:blur(30px);
  pointer-events:none;
}
.pagehead h1{font-size:clamp(34px,5.2vw,56px);font-weight:800;letter-spacing:-.02em;max-width:20ch}
.pagehead h1 em{font-style:normal;color:var(--gold)}
.pagehead .subtitle{font-size:clamp(17px,1.8vw,20px);color:var(--muted);max-width:56ch;margin:20px 0 0}

/* ---------- cards ---------- */
.card{
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;padding:34px 30px;
}
.feature-card{
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;
  padding:34px 30px;transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.feature-card:hover{transform:translateY(-6px);border-color:var(--gold);background:rgba(240,178,84,.06)}
.feature-card .step{
  font-family:Fraunces,serif;font-size:15px;color:var(--gold);
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px;
}
.feature-card h3{font-size:23px;font-weight:600;margin:0 0 10px}
.feature-card p{font-size:16px;color:var(--muted);margin:0}

/* =========================================================================
   FORMS — the three guidance layers, kept separate on purpose:
     label  = what this is      .help = what to enter      .err = what went wrong
   ⛔ A placeholder is NEVER the label; it shows the FORMAT and nothing else.
   ========================================================================= */
.form{max-width:var(--reading)}
.field{display:block;margin:0 0 32px}
.field > .lab{
  display:block;font-size:16px;font-weight:600;color:var(--cream);margin:0 0 9px;padding:0;
}
/* ⛔ A GROUP HEADING MUST NOT LOOK LIKE A FIELD LABEL. They were both 16px/600 and the
   fieldsets read as one undifferentiated column of inputs. The legend now borrows the
   homepage's .eyebrow language, so the eye sees three groups before it sees ten fields. */
legend.lab{
  display:block;float:left;width:100%;padding:0;margin:0 0 20px;
  font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
}
legend.lab + *{clear:both}
fieldset{margin-bottom:52px}
fieldset + fieldset{padding-top:4px;border-top:1px solid var(--hairline)}
fieldset + fieldset legend.lab{margin-top:40px}
.field .optional{
  font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-left:9px;
}
.field .help{display:block;font-size:14.5px;color:var(--muted);margin:9px 0 0;max-width:62ch}
.field .err,.err{
  display:block;font-size:14.5px;color:var(--bad);margin:9px 0 0;font-weight:500;
}
.err[hidden]{display:none}

input[type=text],input[type=email],input[type=tel],input[type=url],
input[type=password],input[type=number],input[type=date],input[type=search],
textarea,select{
  display:block;width:100%;min-height:52px;
  font-family:inherit;font-size:17px;line-height:1.5;color:var(--cream);
  background:rgba(11,10,31,.55);
  border:1px solid rgba(246,242,234,.16);border-radius:12px;
  padding:14px 16px;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
textarea{min-height:200px;resize:vertical;line-height:1.6}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover,textarea:hover,select:hover{border-color:rgba(246,242,234,.3)}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--gold);background:rgba(11,10,31,.8);
  box-shadow:0 0 0 4px var(--gold-glow);
}
/* ⛔ :user-invalid, NOT :invalid — :invalid paints every required field red before
   the customer has typed one character, which reads as "you already failed". */
input:user-invalid,textarea:user-invalid{border-color:var(--bad)}
input:user-invalid:focus,textarea:user-invalid:focus{box-shadow:0 0 0 4px rgba(255,155,138,.16)}
.field.ok input,.field.ok textarea{border-color:rgba(143,203,155,.5)}

input[type=file]{
  display:block;width:100%;font-family:inherit;font-size:16px;color:var(--muted);
  background:rgba(11,10,31,.55);border:1px dashed rgba(246,242,234,.26);border-radius:12px;
  padding:18px 16px;cursor:pointer;transition:border-color .25s ease,background .25s ease;
}
input[type=file]:hover{border-color:var(--gold);background:rgba(240,178,84,.05)}
input[type=file]::file-selector-button{
  font-family:inherit;font-size:15px;font-weight:500;color:var(--night);
  background:linear-gradient(135deg,var(--gold),#FFD79A);
  border:0;border-radius:999px;padding:11px 20px;margin-right:16px;cursor:pointer;
}

fieldset{border:0;margin:0 0 32px;padding:0;min-width:0}

/* tick boxes — 44px target, and the whole row is clickable */
.tick{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;margin:0 0 12px;
  background:var(--card-bg);border:1px solid var(--hairline);border-radius:14px;
  font-size:15.5px;line-height:1.55;cursor:pointer;
  transition:border-color .25s ease,background .25s ease;
}
.tick:hover{border-color:rgba(240,178,84,.4);background:rgba(240,178,84,.045)}
.tick input[type=checkbox]{
  flex:0 0 auto;width:22px;height:22px;margin:2px 0 0;accent-color:var(--gold);cursor:pointer;
}
.tick:has(input:checked){border-color:var(--card-border);background:rgba(240,178,84,.06)}
.tick b{color:var(--cream)}

/* ---------- the style picker: same tile language as the homepage ---------- */
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:16px;margin:22px 0 0}
.pick .tile{
  position:relative;display:block;border-radius:16px;overflow:hidden;
  background:var(--night-soft);border:1px solid rgba(246,242,234,.08);cursor:pointer;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.pick .tile:hover{transform:translateY(-6px) scale(1.012);border-color:var(--gold);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.pick .tile img,.pick .tile .shot{display:block;width:100%;height:auto;aspect-ratio:760/434;object-fit:cover}
.pick .tile .shot.pending{
  background:
    radial-gradient(circle at 30% 35%,var(--rose-glow) 0%,transparent 60%),
    radial-gradient(circle at 70% 70%,var(--gold-glow) 0%,transparent 60%),
    var(--night-mid);
}
.pick .tile .name{
  position:absolute;left:0;right:0;bottom:0;padding:34px 14px 13px;
  font-size:14.5px;font-weight:500;
  background:linear-gradient(180deg,transparent,rgba(11,10,31,.9));
}
.pick .tile input[type=radio]{position:absolute;opacity:0;width:0;height:0}
/* selected: gold frame + a tick badge, so the choice survives a glance */
.pick .tile:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-glow),0 18px 44px rgba(0,0,0,.45)}
.pick .tile:has(input:checked)::after{
  content:"✓";position:absolute;top:11px;right:11px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--night);border-radius:50%;
  font-size:16px;font-weight:700;line-height:1;
}
.pick .tile:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:3px}

/* ---------- upload progress ----------
   ⚠️ MARKUP IS FIXED BY upload.js: it sets #bar.style.width and #pct.textContent,
   so #bar must be the FILL and the track must be its parent. Do not flatten these. */
.progress{display:flex;align-items:center;gap:14px;margin:20px 0 0;font-size:15px;color:var(--muted)}
.progress[hidden]{display:none}
.progress .track{flex:1;height:8px;border-radius:999px;background:rgba(246,242,234,.1);overflow:hidden}
.progress .track > div{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),#FFD79A);transition:width .3s ease;
}
.progress span{font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}

/* the attestation block, and what upload.js does to it when the boxes are not ticked */
.attest{
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:18px;
  padding:28px 26px;margin:0 0 32px;
}
.attest{margin-bottom:0}
.attest legend.lab{margin:0 0 16px;color:var(--gold)}
fieldset.attest{border-top:0;padding-top:28px}
fieldset + fieldset.attest legend.lab{margin-top:0}
.attest.missing{border-color:var(--bad);box-shadow:0 0 0 4px rgba(255,155,138,.12)}
.attest.missing .tick{border-color:rgba(255,155,138,.4)}

/* ---------- long-form reading (terms, policies) ---------- */
.prose{max-width:66ch}
.prose h2{font-size:clamp(26px,3vw,36px);font-weight:700;margin:52px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;font-weight:600;margin:34px 0 10px}
.prose p,.prose li{color:var(--muted);font-size:17px}
.prose li{margin:0 0 9px}
.prose strong,.prose b{color:var(--cream)}

/* ---------- footer ---------- */
footer{padding:56px 0;border-top:1px solid var(--hairline);color:var(--muted);font-size:15px}
footer .container{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}
footer a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--gold)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  section{padding:88px 0}
  .pick{grid-template-columns:repeat(3,1fr)}
  .pagehead{padding:64px 0 44px}
}
@media(max-width:580px){
  body{font-size:17px}
  .pick{grid-template-columns:repeat(2,1fr);gap:12px}
  .btn-primary,.btn-ghost{width:100%;text-align:center}
  .sitenav .btn-primary{width:auto}
  .field{margin-bottom:26px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}