/* Priority details (David, 5 Nov, priority-details-r74): the numbered, reorderable list in the Your words card
   ("Tell us about them" on step 3, "DJ priority details" on Pick your DJ, "Lyrics priority details" on Pick your
   station and sound), built by priority-details.js. The card's button keeps its height whatever its label says, so
   nothing under it (or the radio beside it) moves when the label changes. */
#monitor .tz-wbtn b { white-space: nowrap; }
#monitor .tz .tray[hidden] { display: none; } /* the old chip tray: the list below replaces it */
#monitor .pd { padding: 2px 10px 10px; }
#monitor .pd-h { margin: 2px 0 2px; font: 700 calc(var(--f) * .7)/1.3 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: #ffd23f; }
#monitor .pd[data-kind="dj"] .pd-h, #monitor .pd[data-kind="lyrics"] .pd-h { color: #7dff8f; }
#monitor .pd-help { margin: 0 0 6px; font: 500 calc(var(--f) * .8)/1.35 "Inter Tight", sans-serif; color: var(--g1); }
#monitor .pd-list { list-style: none; margin: 0; padding: 0 2px 0 0; display: flex; flex-direction: column; gap: 4px; max-height: 216px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; }
#monitor .pd-list[hidden] { display: none; }
#monitor .pd-row { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 2px 2px 2px 4px; border-radius: 10px; border: 1px solid rgba(255,210,63,.32); background: rgba(13,11,28,.88); color: #fff; font: 500 calc(var(--f) * .86)/1.3 "Inter Tight", sans-serif; transition: transform .16s var(--tz-ease), box-shadow .16s, border-color .16s; }
#monitor .pd-row.occ { border-color: rgba(255,45,170,.55); }
#monitor .pd-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ffd23f; color: #1a1400; font: 700 calc(var(--f) * .8)/1 "JetBrains Mono", monospace; }
#monitor .pd-row.occ .pd-n { background: #ff2daa; color: #fff; }
#monitor .pd-t { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 4px 0; }
#monitor .pd-t { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#monitor .pd-row .tk.edit { flex: 1; min-width: 0; }
#monitor .pd-row .tk.edit input { width: 100%; box-sizing: border-box; min-height: 36px; padding: 4px 8px; border-radius: 8px; border: 1px solid #ffd23f; background: #0d0b1c; color: #fff; font: inherit; -webkit-user-select: text; user-select: text; }
#monitor .pd-row.pd-holding { border-color: #3df0ff; box-shadow: 0 0 0 1px #3df0ff; }
#monitor .pd-t small { font: 700 calc(var(--f) * .64)/1.2 "JetBrains Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: #ffd23f; margin-right: 4px; }
#monitor .pd-row.occ .pd-t small { color: #ff6ad5; }
#monitor .pd-mv { flex: none; display: flex; gap: 2px; }
#monitor .pd-mv button, #monitor .pd-x { display: grid; place-items: center; width: 34px; height: 36px; border-radius: 8px; color: #fff; font-size: 12px; background: rgba(255,255,255,.06); }
#monitor .pd-mv button:hover:not([disabled]), #monitor .pd-x:hover { background: rgba(255,255,255,.14); }
#monitor .pd-mv button[disabled] { opacity: .25; cursor: default; }
#monitor .pd-mv button:focus-visible, #monitor .pd-x:focus-visible { outline: 2px solid #3df0ff; outline-offset: 1px; }
#monitor .pd-x { width: 30px; opacity: .7; background: none; }
/* the handle: six dots, a 40 px target; touch-action none, so a finger on it drags the row instead of the page */
#monitor .pd-grip { flex: none; box-sizing: border-box; width: 36px; height: 40px; padding: 9px 11px; border-radius: 8px; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  background: radial-gradient(circle, rgba(255,255,255,.78) 1.5px, transparent 2px) 0 0 / 7px 7px content-box; }
#monitor .pd-grip:hover { background-color: rgba(255,255,255,.08); }
#monitor .pd-list.pd-dragging { cursor: grabbing; }
#monitor .pd-list.pd-dragging .pd-row { -webkit-user-select: none; user-select: none; }
#monitor .pd-row.pd-drag { z-index: 2; transition: box-shadow .16s, border-color .16s; border-color: #ffd23f; box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 0 1px #ffd23f, 0 0 16px rgba(255,210,63,.35); }
#monitor .pd-row.pd-drag .pd-grip { cursor: grabbing; }
#monitor .pd-row.pd-landed { animation: pdLand .5s ease-out; }
@keyframes pdLand { from { box-shadow: 0 0 0 2px #ffd23f, 0 0 18px rgba(255,210,63,.5); } to { box-shadow: none; } }
#monitor .pd-empty { margin: 4px 0; color: var(--g2); font: 500 calc(var(--f) * .86)/1.3 "Inter Tight"; }
#monitor .pd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font: 500 calc(var(--f) * .76)/1.3 "Inter Tight"; color: var(--g1); }
#monitor .pd-foot[hidden] { display: none; }
#monitor .pd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
/* the zoomed desktop has the room */
.tz-full #monitor .pd-list { max-height: 260px; }
/* a landscape phone has about 200 px under the card for the list and the steps, and Continue must stay on screen: the
   help line goes (the numbers, arrows and handles say it), the rows are a little shorter and the list shows three and
   a bit, then scrolls */
html.phone-landscape #monitor .pd-help { display: none; }
html.phone-landscape #monitor .pd-h { margin-bottom: 4px; }
html.phone-landscape #monitor .pd-row { min-height: 40px; }
html.phone-landscape #monitor .pd-mv button { height: 34px; }
html.phone-landscape #monitor .pd-list { max-height: 144px; gap: 3px; }
/* summary-r84: once the order is the buyer's own, its reset line shows under the list; the list gives up that room
   (two rows and a bit, then scrolls) so Continue (Back to summary) is still on screen */
html.phone-landscape #monitor .pd:has(> .pd-foot:not([hidden])) .pd-list { max-height: 92px; }
@media (prefers-reduced-motion: reduce) { #monitor .pd-row { transition: none; } #monitor .pd-row.pd-landed { animation: none; } }
/* the summary page: the two orders, numbered */
#monitor .sm-prio { counter-reset: pd; }
#monitor .sm-prio li { counter-increment: pd; padding-left: 20px; }
#monitor .sm-prio li::before { content: counter(pd) "."; width: auto; height: auto; top: 0; border-radius: 0; background: none; color: #7dff8f; font: 700 .9em/1.35 "JetBrains Mono", monospace; }
/* about-them-r177 (David, 12 Nov, iPhone): on a phone the arrows, cross and handle took most of each row, so the text was
   squeezed into a sliver, the label ("WHAT YOU'D THANK HIM FOR") wrapped a word a line and printed over the next row, and
   the open card swallowed the panel so the "Tell us about" heading and Continue were pushed out of sight. Now the text has
   the whole row (label on its own line above it, nothing cut) and the controls sit on a line under it. The open card takes
   at most about half the panel and scrolls inside itself, so the heading and Continue always keep their room. The order,
   the numbers, the arrows and the handle are unchanged. */
@media (max-width: 640px) {
  #monitor .pd-list { max-height: none; overflow: visible; padding-right: 0; }
  #monitor .pd-row { flex-wrap: wrap; align-items: flex-start; row-gap: 2px; }
  #monitor .pd-t { flex: 1 1 calc(100% - 40px); min-width: 0; }
  #monitor .pd-t small { display: block; margin: 0 0 2px; letter-spacing: .03em; overflow-wrap: anywhere; }
  #monitor .pd-mv { margin-left: auto; }
  #monitor .pd-mv button { height: 32px; }
  #monitor .pd-x { height: 32px; }
  #monitor .tz-words.open { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 6rem; }
  /* the card gives way, never the heading: the step below keeps room for its heading and the first line under it, and the
     small print (summary line, What you get) steps aside while the card is open so the list has the room */
  #monitor .tz-panel:has(.tz-words.open) .tz-steps { min-height: 4.4rem; flex-shrink: 0; }
  #monitor .tz-panel:has(.tz-words.open) :is(.tz-sum, .tz-get, .tz-kick) { display: none; }
  #monitor .pd-help, #monitor .pd-h { display: none; } /* the numbers and handles say it; the card's own button says Your words */
  #monitor .tz-words.open .tz-wbtn { flex: none; }
  #monitor .tz-words.open .tz-wbody { flex: 1 1 auto; min-height: 0; }
  #monitor .tz-words.open .tz-wbody > div { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}