/* music — page-scoped styles. Owned by this page only.
   Shared primitives live in planner/planner.css and are READ-ONLY from here.
   Scope every rule under [data-view="music"] so it cannot leak to another page.

   Three shapes on one page, and the layout is what tells them apart:
     .moments   — the singular slots. Cards, one song each, never a row.
     .reqs      — the incoming queue. A plain list, multi-column when there's room.
     .song      — the long tail. A dense grid row, labelled once at the top.
   The do-not-play panel is the same .song row inside a panel that reads as a
   prohibition: its own heading, a solid --bad edge, and struck-through titles.  */

[data-view="music"]{display:flex;flex-direction:column;gap:var(--s6)}

/* ── the key moments ────────────────────────────────────────────────────── */
/* Six slots, so the column count is chosen rather than auto-fitted — auto-fit
   lands on 5+1 and 4+2, and an orphan card reads as a mistake. */
[data-view="music"] .moments{
  display:grid;gap:var(--s3);grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch}
@media (min-width:1440px){
  [data-view="music"] .moments{grid-template-columns:repeat(6,minmax(0,1fr))}
}
[data-view="music"] .moment{
  display:flex;flex-direction:column;gap:.35rem;min-width:0;
  padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:3px;
  background:var(--surface-2)}
[data-view="music"] .moment[data-state="set"]{background:var(--surface);border-color:var(--line-strong)}
[data-view="music"] .moment[data-state="unset"]{border-style:dashed}
[data-view="music"] .moment[data-state="clash"]{background:var(--surface);border-color:var(--gold)}
[data-view="music"] .moment__slot{
  font-size:var(--ft-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
[data-view="music"] .moment__pick{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
[data-view="music"] .moment__pick li{display:grid;gap:.05rem;min-width:0}
[data-view="music"] .moment__pick b{
  font-family:var(--display);font-weight:400;font-size:var(--ft-name);line-height:1.25;
  color:var(--ink);overflow-wrap:anywhere}
[data-view="music"] .moment__pick span{font-size:var(--ft-meta);color:var(--muted);overflow-wrap:anywhere}
[data-view="music"] .moment__pick em{
  font-style:normal;font-size:var(--ft-label);letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-ink);margin-top:.15rem}
[data-view="music"] .moment__none{
  font-size:var(--ft-body);color:var(--muted);font-style:italic;margin-top:auto}
[data-view="music"] .moment__warn{font-size:var(--ft-meta);color:var(--gold-ink)}

/* ── the request queue ──────────────────────────────────────────────────── */
/* The count is the point of this panel, so it sits in the heading. */
[data-view="music"] .queue{
  display:inline-block;vertical-align:.12em;margin-left:.5rem;
  font-family:var(--ui);font-size:var(--ft-label);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.15rem .45rem;border-radius:2px;
  border:1px solid var(--good-line);background:#F3F8F3;color:var(--good)}
[data-view="music"] .queue[data-waiting="true"]{
  border-color:var(--rust);background:var(--rust);color:#fff}

[data-view="music"] .reqs{
  list-style:none;margin:0;padding:0;display:grid;
  /* 25rem is what "song — artist / who asked / Add" needs to stay on one line;
     narrower columns fit more per row but every row then costs two */
  grid-template-columns:repeat(auto-fill,minmax(min(25rem,100%),1fr))}
/* separators are drawn by the rows, not by a gap over a tinted backdrop — an
   under-filled last grid row would otherwise leave a block of bare colour */
[data-view="music"] .reqs li{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;
  padding:var(--s2) var(--s5);background:var(--surface);min-height:var(--row-dense);
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);margin-right:-1px}
[data-view="music"] .reqs li[data-added="true"]{background:var(--surface-2)}
[data-view="music"] .reqs__song{
  flex:1 1 12rem;min-width:0;font-size:var(--ft-body);color:var(--ink);overflow-wrap:anywhere}
[data-view="music"] .reqs li[data-added="true"] .reqs__song{color:var(--muted)}
[data-view="music"] .reqs__who{font-size:var(--ft-meta);color:var(--muted);white-space:nowrap}
[data-view="music"] .reqs__done{
  font-size:var(--ft-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;padding:0 .2rem}
[data-view="music"] .reqs .btn{margin-left:auto}

/* ── the setlist: one grid, three shapes ────────────────────────────────── */
/* --cols / --areas are redefined per breakpoint below; the column head and the
   rows read the same two properties so they can never drift apart. */
[data-view="music"]{
  --cols:minmax(0,1.5fr) minmax(0,1.2fr) 9rem 7.5rem 2.25rem;
  --areas:"title artist slot status del" "notes notes source requestedBy del";
}

[data-view="music"] .songhead,
[data-view="music"] .rec.song{
  display:grid;grid-template-columns:var(--cols);grid-template-areas:var(--areas);
  gap:var(--s2) var(--s3);align-items:end}

[data-view="music"] .songhead{
  padding:var(--s2) var(--s5);background:var(--sand);
  border-bottom:1px solid var(--line-strong);
  font-size:var(--ft-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:700;align-items:center}

[data-view="music"] .slotgroup__head{
  font-family:var(--ui);font-size:var(--ft-label);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mocha);
  padding:var(--s3) var(--s5) var(--s2);background:var(--surface-2);
  border-bottom:1px solid var(--line);display:flex;gap:var(--s2);align-items:baseline}
[data-view="music"] .slotgroup__head small{
  font-weight:400;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}

[data-view="music"] .rec.song{
  padding:var(--s2) var(--s5);border-left:3px solid transparent}
[data-view="music"] .rec.song[data-status="approved"]{border-left-color:var(--good-line)}
[data-view="music"] .rec.song[data-status="rejected"]{border-left-color:var(--bad-line)}
/* Shape, not just colour: a rejected title reads as struck out. */
[data-view="music"] .rec.song[data-status="rejected"] input[data-k="title"]{
  text-decoration:line-through;text-decoration-thickness:1px}

[data-view="music"] .song .field{grid-area:var(--a)}
[data-view="music"] .song .field[data-col="title"]{--a:title}
[data-view="music"] .song .field[data-col="artist"]{--a:artist}
[data-view="music"] .song .field[data-col="slot"]{--a:slot}
[data-view="music"] .song .field[data-col="status"]{--a:status}
[data-view="music"] .song .field[data-col="source"]{--a:source}
[data-view="music"] .song .field[data-col="requestedBy"]{--a:requestedBy}
[data-view="music"] .song .field[data-col="notes"]{--a:notes}
[data-view="music"] .songhead span[data-col="title"]{grid-area:title}
[data-view="music"] .songhead span[data-col="artist"]{grid-area:artist}
[data-view="music"] .songhead span[data-col="slot"]{grid-area:slot}
[data-view="music"] .songhead span[data-col="status"]{grid-area:status}
[data-view="music"] .songhead span[data-col="source"]{grid-area:source}
[data-view="music"] .songhead span[data-col="requestedBy"]{grid-area:requestedBy}
[data-view="music"] .songhead span[data-col="notes"]{grid-area:notes}
[data-view="music"] .songhead span[data-col="del"]{grid-area:del}
[data-view="music"] .song .x{grid-area:del;margin:0;justify-self:center;align-self:center}

/* The label is announced, not drawn: the column head above the rows carries it
   for sighted users. Below 640 the head is gone and the labels come back as
   placeholders on the fields that need them. */
[data-view="music"] .song .field > span{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

[data-view="music"] .song input,
[data-view="music"] .song select{height:var(--h-ctl);font-size:var(--ft-body)}
[data-view="music"] .song input:focus-visible,
[data-view="music"] .song select:focus-visible{outline-offset:0}
/* Wherever the column head is drawn, the placeholder is repeating it thirty
   times. It comes back on a phone, where the head is gone. */
@media (min-width:640px){
  [data-view="music"] .song input::placeholder{color:transparent}
  [data-view="music"] .song input:focus::placeholder{color:var(--muted)}
}

/* ── do not play: a prohibition, not a selection ────────────────────────── */
[data-view="music"] .panel--ban{border-color:var(--bad-line)}
[data-view="music"] .panel--ban .panel__head{background:#FDF4F0;border-bottom-color:var(--bad-line)}
[data-view="music"] .panel--ban .panel__head h2{color:var(--bad)}
[data-view="music"] .panel--ban .songhead{background:#FDF4F0;border-bottom-color:var(--bad-line)}
/* the whole panel is tinted, rather than each row wearing an accent tab —
   the prohibition is a property of the list, not of any one song */
[data-view="music"] .panel--ban .rec.song{background:#FDF4F0}
[data-view="music"] .panel--ban .rec.song:hover{background:#FBEBE4}
[data-view="music"] .panel--ban .rec.song input[data-k="title"]{
  text-decoration:line-through;text-decoration-thickness:1px}

/* three panels can be empty at once on a fresh wedding; the shared .empty
   reserves 48px above and below, which stacks into a page of nothing */
[data-view="music"] .empty{padding:var(--s5) var(--s4)}
[data-view="music"] .empty small{display:block;margin-top:.35rem;color:var(--muted)}

/* ── wide: the whole row on one line ────────────────────────────────────── */
@media (min-width:1440px){
  [data-view="music"]{
    --cols:minmax(9rem,1.5fr) minmax(7rem,1.1fr) 9rem 7.5rem 8rem minmax(7rem,1fr)
           minmax(9rem,1.5fr) 2.25rem;
    --areas:"title artist slot status source requestedBy notes del";
  }
}

/* Deliberately NOT sticky. --h-topbar is 56px but the topbar's real height is
   ~77px once the title and its summary line stack, so anything pinned to
   var(--h-topbar) parks itself underneath the topbar and disappears. Make it
   sticky again the day the shell publishes its measured height. */

/* ── phone: the row becomes a card ──────────────────────────────────────── */
@media (max-width:639px){
  [data-view="music"]{
    --cols:minmax(0,1fr) minmax(0,1fr);
    --areas:"title title" "artist artist" "slot status" "source requestedBy" "notes notes";
  }
  [data-view="music"] .songhead{display:none}
  [data-view="music"] .rec.song{
    position:relative;padding:var(--s3) var(--s4);gap:var(--s2);
    border-bottom:1px solid var(--line-strong)}
  /* the delete target sits out of the grid so the five field rows stay full width */
  [data-view="music"] .song .field[data-col="title"]{padding-right:2.75rem}
  [data-view="music"] .song .x{
    position:absolute;top:var(--s2);right:var(--s2);width:var(--h-ctl-lg);height:var(--h-ctl-lg);
    display:flex;align-items:center;justify-content:center}
  [data-view="music"] .song input,
  [data-view="music"] .song select{height:var(--h-ctl-lg)}
  [data-view="music"] .reqs li{padding:var(--s2) var(--s4);gap:var(--s2)}
  [data-view="music"] .reqs__song{flex:1 1 100%}
  [data-view="music"] .reqs .btn{min-height:var(--h-ctl-lg);padding-inline:1.1rem}
  [data-view="music"] .slotgroup__head{padding:var(--s3) var(--s4) var(--s2)}
  [data-view="music"] .moments{grid-template-columns:1fr;gap:var(--s2)}
}

/* ── the sheet the DJ actually receives ─────────────────────────────────── */
@media print{
  /* Slot and From come off the sheet: the group heading already says the slot,
     and a DJ does not need to know whether the couple or a cousin asked —
     `requested by` is the version of that a human can act on. Dropping two
     columns is what stops the remaining five from clipping their values. */
  [data-view="music"]{
    --cols:1.35fr 1.05fr 7ch .8fr 1.7fr;
    --areas:"title artist status requestedBy notes";
    gap:var(--s5)}
  [data-view="music"] .stats,
  [data-view="music"] .panel--queue,
  [data-view="music"] .song .x,
  [data-view="music"] .song .field[data-col="slot"],
  [data-view="music"] .song .field[data-col="source"],
  [data-view="music"] .songhead span[data-col="slot"],
  [data-view="music"] .songhead span[data-col="source"],
  [data-view="music"] .songhead span[data-col="del"]{display:none}
  [data-view="music"] .panel{border:1px solid #000;box-shadow:none}
  /* it is taller than a page; forcing it whole just leaves page 1 blank */
  [data-view="music"] .panel--setlist{break-inside:auto}
  [data-view="music"] .panel--ban{border:2px solid #000}
  [data-view="music"] .panel--ban .panel__head,
  [data-view="music"] .panel--ban .songhead{background:#eee}
  /* boxes are for typing into; on paper this is a list */
  [data-view="music"] .song input,
  [data-view="music"] .song select{
    border:0;background:none;padding:0;height:auto;appearance:none;color:#000}
  [data-view="music"] .rec.song{
    padding:.15rem var(--s4);border-left:0;break-inside:avoid;
    border-bottom:1px dotted rgba(0,0,0,.35)}
  [data-view="music"] .panel--ban .rec.song{background:none}
  [data-view="music"] .slotgroup{break-inside:avoid}
  [data-view="music"] .moments{grid-template-columns:repeat(3,1fr)}
}