/* THE ✨ MAKE-A-TRACK SHEET — shared by the radio page and the app.
   Lifted out of radio.html on 2026-10-07, when Matt asked for the sparkle in
   the app as well: "Add the sparkle to the peeled app embedded radio." Two
   copies of a sheet this size would have drifted inside a week.

   EVERY SELECTOR IS SCOPED TO dialog.mk, deliberately. `.chip` and `.chips`
   are names a host page may already use for something else -- PEELED's own
   app.js has a bare <span class="chip"> on the Crew card -- and a shared
   stylesheet that reaches outside its own component is a trap for whoever
   loads it next.

   COLOURS COME FROM THE HOST. Nothing here is a hardcoded hex: --banana,
   --pink, --ink, --card, --text and --muted are the peel's own channels, so
   the sheet wears whichever of the ten peels is on. [session 89091303] */

dialog.mk {
  width: min(560px, calc(100vw - 24px)); max-height: 86vh; padding: 0;
  border: 1px solid rgba(var(--ink), .13); border-radius: 20px;
  background: var(--card); color: var(--text);
  /* a tall <dialog> is STUCK on iOS without this -- margin:auto plus an
     explicit max-height is what lets the body scroll inside it. Flex column
     so the header and footer take exactly their own content height and only
     .mk-bd eats the remainder -- Matt, 2026-10-10: "the button at the bottom
     won't scroll into view" -- the old layout guessed the header+footer
     height was always 148px and gave .mk-bd the rest; on a device where it
     wasn't, the footer sat past the dialog's own overflow:hidden edge with
     no way to reach it. [session 89091303] */
  margin: auto; overflow: hidden;
  display: flex; flex-direction: column;
}
dialog.mk::backdrop { background: rgba(8, 3, 16, .72); backdrop-filter: blur(3px); }
dialog.mk .mk-hd {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 14px 14px 10px; border-bottom: 1px solid rgba(var(--ink), .08);
}
dialog.mk .mk-hd h2 { margin: 0; font-size: 16px; font-weight: 850; letter-spacing: .04em; }
dialog.mk .mk-hd p { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }
dialog.mk .mk-x {
  margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid rgba(var(--ink), .12); background: rgba(var(--ink), .05);
  color: var(--text); font-size: 15px; cursor: pointer;
}
dialog.mk .mk-bd {
  padding: 12px 14px 4px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  flex: 1 1 auto; min-height: 0;
}
dialog.mk .mk-sec { margin: 0 0 14px; }
dialog.mk .mk-sec > label {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 7px;
}
dialog.mk .mk-sec > label .hint { font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .8; }
dialog.mk .mk-dice {
  float: right; font: inherit; font-size: 11.5px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; cursor: pointer; color: var(--muted);
  background: rgba(var(--ink), .07); border: 1px solid rgba(var(--ink), .11);
}
dialog.mk .mk-dice:active { transform: scale(.95); }
dialog.mk .chips { display: flex; flex-wrap: wrap; gap: 8px; }
dialog.mk .chip {
  min-height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(var(--ink), .14); background: rgba(var(--ink), .05);
  color: var(--text); font-size: 13.5px; font-weight: 650; line-height: 32px;
}
dialog.mk .chip:active { transform: scale(.96); }
dialog.mk .chip.on {
  background: linear-gradient(140deg, rgba(var(--banana-rgb), .9), rgba(var(--pink-rgb), .85));
  border-color: transparent; color: #2a1150; font-weight: 800;
}
dialog.mk .chip[disabled] { opacity: .35; cursor: default; }
/* The fold is a control, not one of the choices -- dashed, so a thumb reading
   the row at speed does not take it for a genre. */
dialog.mk .chip.mk-more {
  border-style: dashed; background: none;
  color: rgba(var(--ink), .55); font-weight: 600;
}
dialog.mk .mk-bd input[type=text], dialog.mk .mk-bd textarea {
  width: 100%; border-radius: 12px; padding: 10px 12px; color: var(--text);
  border: 1px solid rgba(var(--ink), .14); background: rgba(var(--ink), .05);
  /* 16px or iOS zooms the page when it focuses. And NOT the `font:` shorthand
     -- `font: 16px/1.4 inherit` is invalid and silently dropped whole, which
     leaves a <textarea> on the UA default, i.e. monospace. */
  font-size: 16px; line-height: 1.4; font-family: inherit; resize: vertical;
}
dialog.mk .mk-bd textarea { min-height: 64px; }
/* Matt, 2026-10-09: "not enough room to write in the anything else box." The
   shared rule above is still right for a one-liner; these two want to hold a
   real paragraph (or four verses) without scrolling every line. */
dialog.mk .mk-bd textarea#mkbrief { min-height: 88px; }
dialog.mk .mk-bd textarea#mklyrics { min-height: 180px; font-family: ui-monospace, monospace; font-size: 14.5px; }
dialog.mk .mk-lyrbar { display: flex; gap: 8px; margin: 0 0 8px; }
dialog.mk .mk-lyrgen {
  flex: 1; font: inherit; font-size: 12.5px; font-weight: 750; padding: 8px 10px;
  border-radius: 10px; cursor: pointer; color: var(--text);
  border: 1px solid rgba(var(--ink), .14); background: rgba(var(--ink), .05);
}
dialog.mk .mk-lyrgen:active { transform: scale(.97); }
dialog.mk .mk-lyrgen[disabled] { opacity: .55; cursor: default; }

/* The sections sub-editor. Matt, 2026-10-10: "a sub menu to visually tap or
   drag drop, copy paste sections, then tag style cues under that section,
   and specify lyrics under that section." [session 89091303] */
dialog.mk .mk-lyrtabs { display: flex; gap: 6px; margin: 0 0 8px; }
dialog.mk .mk-lyrtab {
  font: inherit; font-size: 12px; font-weight: 750; padding: 5px 11px;
  border-radius: 999px; cursor: pointer; color: var(--muted);
  border: 1px solid rgba(var(--ink), .14); background: rgba(var(--ink), .05);
}
dialog.mk .mk-lyrtab.on {
  background: linear-gradient(140deg, rgba(var(--banana-rgb), .9), rgba(var(--pink-rgb), .85));
  border-color: transparent; color: #2a1150;
}
dialog.mk .mk-secrows { display: flex; flex-direction: column; gap: 10px; margin: 0 0 10px; }
dialog.mk .mk-secempty { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
dialog.mk .mk-secrow {
  border: 1px solid rgba(var(--ink), .12); border-radius: 12px; padding: 9px;
  background: rgba(var(--ink), .03);
}
dialog.mk .mk-secrow-hd { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; }
dialog.mk .mk-secn {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: var(--muted);
  width: 18px; text-align: center;
}
dialog.mk .mk-sectag {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; font-weight: 700;
  padding: 6px 8px; border-radius: 8px; color: var(--text);
  border: 1px solid rgba(var(--ink), .14); background: rgba(var(--ink), .05);
}
dialog.mk .mk-secbtns { display: flex; gap: 4px; flex: 0 0 auto; }
dialog.mk .mk-secbtn {
  font: inherit; font-size: 13px; width: 30px; height: 30px; padding: 0;
  border-radius: 8px; cursor: pointer; color: var(--text);
  border: 1px solid rgba(var(--ink), .14); background: rgba(var(--ink), .05);
}
dialog.mk .mk-secbtn:active { transform: scale(.92); }
dialog.mk .mk-secbtn[disabled] { opacity: .3; cursor: default; }
dialog.mk .mk-secbtn.mk-secdel { color: #ff5f6d; }
dialog.mk .mk-seccue {
  width: 100%; margin: 0 0 7px; font-size: 13px !important; padding: 7px 9px !important;
}
dialog.mk .mk-seclyr { width: 100%; min-height: 70px; font-size: 14.5px; }
dialog.mk .mk-secadd {
  width: 100%; font: inherit; font-size: 13px; font-weight: 750; padding: 9px;
  border-radius: 10px; cursor: pointer; color: var(--text);
  border: 1px dashed rgba(var(--ink), .22); background: none;
}
dialog.mk .mk-secadd:active { transform: scale(.98); }
dialog.mk .mk-ft {
  display: flex; flex-direction: column; gap: 10px; flex: none;
  padding: 11px 14px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(var(--ink), .08);
}
dialog.mk .mk-ftrow { display: flex; align-items: center; gap: 10px; }
/* Shown only once a track has just finished, same timing as .mk-play --
   Matt, 2026-10-09: "In app feedback please." A tweak re-triages the spec on
   the server and resubmits; it does not touch the form behind it. */
dialog.mk .mk-fb { display: flex; gap: 8px; }
dialog.mk .mk-fb[hidden] { display: none; }
dialog.mk .mk-fb input {
  flex: 1; min-width: 0; border-radius: 10px; padding: 8px 10px;
  color: var(--text); border: 1px solid rgba(var(--ink), .14);
  background: rgba(var(--ink), .05);
  /* 16px or iOS zooms the page when it focuses. */
  font-size: 16px; font-family: inherit;
}
dialog.mk .mk-fbgo {
  flex: 0 0 auto; font: inherit; font-size: 12.5px; font-weight: 750;
  padding: 0 12px; border-radius: 10px; cursor: pointer; color: var(--text);
  border: 1px solid rgba(var(--ink), .14); background: rgba(var(--ink), .05);
}
dialog.mk .mk-fbgo[disabled] { opacity: .55; cursor: default; }
dialog.mk .mk-chain {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--muted); cursor: pointer;
}
dialog.mk .mk-chain input { accent-color: var(--banana); width: 16px; height: 16px; }
dialog.mk .mk-go {
  flex: 1; min-height: 46px; border: 0; border-radius: 14px; cursor: pointer;
  font-size: 15.5px; font-weight: 850; color: #2a1150;
  background: linear-gradient(140deg, var(--banana), var(--pink));
}
dialog.mk .mk-go[disabled] { filter: grayscale(.65) brightness(.75); cursor: default; }
/* Shown only once a track has just finished, next to "Make another" rather
   than instead of it -- Matt, 2026-10-09: "when the song finishes show a
   play button here." [session 89091303] */
dialog.mk .mk-play {
  flex: 1; min-height: 46px; border: 0; border-radius: 14px; cursor: pointer;
  font-size: 15.5px; font-weight: 850; color: #0d2b1f;
  background: linear-gradient(140deg, var(--lime), var(--banana));
}
dialog.mk .mk-play[hidden] { display: none; }
dialog.mk .mk-note { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; }
dialog.mk .mk-note b { color: var(--banana); font-weight: 750; }
dialog.mk .mk-note.bad b { color: var(--pink); }
dialog.mk .mk-prog {
  text-align: center; padding: 22px 6px 14px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
dialog.mk .mk-prog .big { font-size: 34px; }
dialog.mk .mk-prog h3 { margin: 8px 0 4px; font-size: 16px; font-weight: 800; }
dialog.mk .mk-prog p { margin: 0; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  dialog.mk .mk-prog .big { animation: mkspin 2.4s linear infinite; display: inline-block; }
  @keyframes mkspin { 0%,100% { transform: rotate(-9deg) scale(1); } 50% { transform: rotate(9deg) scale(1.12); } }
}
/* Out of the line. Deliberately quiet — it is a way out, not an offer. */
dialog.mk .mk-cancel {
  margin: 14px auto 0; display: block; font: inherit; font-size: 12.5px;
  font-weight: 700; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  color: var(--muted); background: rgba(var(--ink), .06);
  border: 1px solid rgba(var(--ink), .12);
}
dialog.mk .mk-cancel[disabled] { opacity: .5; cursor: default; }
/* display: block above beats the hidden attribute, which is how a cancel
   button that should not exist stays on screen. */
dialog.mk .mk-cancel[hidden] { display: none; }