/*
 * music.gonglogic.com/custom — sheet music to order (SheetMusicOrderController).
 *
 * Only what the page has that the music site did not: the hero's "comes with" card, the
 * price list, numbered steps, and the form fields its other forms never needed (select,
 * number, date, file, a set of boxes to tick). Everything else is music.css: the hero,
 * section heads, piece cards, the form frame. The tokens are music.css's, so dark mode
 * comes with them. Scoped to [data-area="music"] and loaded after music.css, as that file's
 * rules ask; hovers change paint only (music.css, "THE HOVER RULE").
 */

/* ── hero ─────────────────────────────────────────────────────────────────── */
[data-area="music"] .so-hero__go { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
[data-area="music"] .so-hero__card {
  min-width: 0;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-2);
}
[data-area="music"] .so-hero__card-head {
  margin: 0 0 0.75rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
[data-area="music"] .so-hero__card-foot { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; }

/* ── prices ───────────────────────────────────────────────────────────────── */
[data-area="music"] .section-head__note { margin-top: 0.35rem; color: var(--ink-3); line-height: 1.5; }
[data-area="music"] .so-services { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) {
  [data-area="music"] .so-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  [data-area="music"] .so-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
[data-area="music"] .so-service {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brand);
  border-radius: var(--r-l);
}
[data-area="music"] .so-service__name { font-family: var(--display); font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
[data-area="music"] .so-service__price { margin: 0; font-weight: 700; color: var(--accent-ink); font-variant-numeric: lining-nums; }
[data-area="music"] .so-service__what { margin: 0; color: var(--ink-2); line-height: 1.55; font-size: 0.95rem; }

/* ── steps ────────────────────────────────────────────────────────────────── */
[data-area="music"] .so-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) {
  [data-area="music"] .so-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}
[data-area="music"] .so-step { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; align-items: baseline; min-width: 0; }
[data-area="music"] .so-step__n {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--paper);
  font-weight: 700;
  font-size: 0.95rem;
}
[data-area="music"] .so-step__head { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
[data-area="music"] .so-step__text { margin: 0; color: var(--ink-2); line-height: 1.55; font-size: 0.95rem; }

/* ── samples and rights ───────────────────────────────────────────────────── */
[data-area="music"] .so-note { margin-top: 1rem; color: var(--ink-3); font-size: 0.92rem; line-height: 1.55; }
[data-area="music"] .so-rights .section-head__title { margin-bottom: 0.9rem; }
[data-area="music"] .so-rights .ticks li { color: var(--ink-2); }

/* ── the form ─────────────────────────────────────────────────────────────── */
[data-area="music"] .so-form__title { margin-bottom: 1rem; }
[data-area="music"] .cm-form .field select,
[data-area="music"] .cm-form .field input[type=number],
[data-area="music"] .cm-form .field input[type=date],
[data-area="music"] .cm-form .field input[type=file] {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  box-shadow: none;
}
[data-area="music"] .cm-form .field input[type=file] { padding: 0.5rem 0.6rem; font-size: 0.92rem; }
[data-area="music"] .cm-form .field select:hover { border-color: var(--ink-3); }
[data-area="music"] .cm-form .field select:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); box-shadow: none; }
[data-area="music"] .cm-form .field input[type=checkbox] { accent-color: var(--brand); width: 1.05rem; height: 1.05rem; }

/* Boxes to tick: two to a row where there is room. */
@media (min-width: 40rem) {
  [data-area="music"] .so-form .checkboxset ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
[data-area="music"] .so-form .checkboxset li:has(input:checked) { border-color: var(--brand); background: var(--brand-wash); }

/* The short fields side by side on a wide screen; the long ones keep the full width. */
@media (min-width: 48rem) {
  [data-area="music"] .so-form fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
  [data-area="music"] .so-form fieldset > * { grid-column: 1 / -1; }
  [data-area="music"] .so-form fieldset > :is(#Form_OrderForm_Name_Holder, #Form_OrderForm_Email_Holder,
    #Form_OrderForm_PieceTitle_Holder, #Form_OrderForm_Composer_Holder,
    #Form_OrderForm_MusicKey_Holder, #Form_OrderForm_Difficulty_Holder,
    #Form_OrderForm_Pages_Holder, #Form_OrderForm_Deadline_Holder) { grid-column: auto; }
}
/* Side by side, a field with a description is taller than its neighbour: keep both boxes at the top. */
[data-area="music"] .so-form .field { align-content: start; }
/* The theme paints option labels in its own (light-scheme) ink; in the dark scheme they vanished. */
[data-area="music"] .so-form .optionset li label { color: var(--ink); }