/* Fix round r36 (David, 3 Nov): the request line's changes. Loaded after feedback-r33.css (06-night-shift-v3.html,
   06-night-shift-v3-newmobile.html); everything sits inside #monitor. */

/* ---- the zoomed desktop's stage: "Your words" (the lines from Tell us about them) is no longer cut at four lines.
   Its size steps down as it grows (fitStage in night-shift-v3.js), so the text stays inside; at the smallest size, if
   it still cannot fit, it scrolls inside its own box (fit-scroll) ---- */
#monitor .tz-quote { flex: none; display: block; -webkit-line-clamp: unset; overflow: visible; }
#monitor .tz-quote.fit-scroll { flex: 0 1 auto; min-height: 3em; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; }

/* ---- Pick your DJ: the chosen DJ in a "Ready to talk" box at the top of the list, the other DJs under it ---- */
#monitor .tz-djlist > .tz-djready, #monitor .tz-djlist > .tz-djol { grid-column: 1 / -1; }
#monitor .tz-djrest { display: contents; }
#monitor .tz-djc.tz-djready { margin: 0 0 4px; padding: 10px 10px 12px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "st eq" "row row" "btn btn"; gap: 8px 12px;
  border-width: 1.5px; border-color: color-mix(in srgb, var(--c) 70%, transparent); }
#monitor .tz-djready .tz-djst { grid-area: st; margin: 0 !important; font-size: calc(var(--f) * .8); letter-spacing: .14em; }
#monitor .tz-djready .tz-djst small { min-width: 0; font: 600 calc(var(--f) * .7)/1.2 "JetBrains Mono", monospace; letter-spacing: .06em; color: var(--g1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#monitor .tz-djready .tz-djeq { grid-area: eq; }
#monitor .tz-djtop { grid-area: row; min-width: 0; }
#monitor .tz-djtop .tz-dj { min-height: 66px; padding: 8px 10px 8px 8px; }
#monitor .tz-djtop .tz-djp { width: 52px; height: 52px; }
#monitor .tz-djtop .tz-djt b { font-size: calc(var(--f) * 1.12); }
#monitor .tz-djalone { display: block; padding: 8px 10px; }
#monitor .tz-djready .tz-play { grid-area: btn; justify-content: center; width: 100%; }
#monitor .tz-djol { margin: 8px 0 0 !important; }

/* ---- Pick your station and sound: "⇄ Pick your station / song" and "…or describe a song in your own words." side by
   side in one row, sharing it equally (their words wrap inside them if they must). Each needs at least 200px, so on a
   phone too narrow for two of those the second goes under the first (and both fill the row). !important: the phone
   panels give every button a 44px minimum width with !important (night-shift-phone.css) ---- */
#monitor .sd-acts.sd-two { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0 0 14px; }
#monitor .sd-two > .sd-tobtn, #monitor .sd-two > .sd-ownbtn { flex: 1 1 0; min-width: 200px !important; width: auto; min-height: 46px; margin: 0; border-radius: 13px; }
#monitor .sd-two > .sd-tobtn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; line-height: 1.25 !important; white-space: normal; text-align: center; }
#monitor .sd-two > .sd-ownbtn { padding: 6px 12px; gap: 8px; font-size: calc(var(--f) * .88); }
#monitor #sd-acts2:has(> #sd-home[hidden]) { display: none; }

/* ---- the zoomed desktop's timeline: each step's answer wraps to two lines and steps its size down (fitTimeline),
   instead of being cut with an ellipsis ---- */
#monitor .tz-line .v { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }

/* ---- Your words (the card over the steps on phones and the column): the count and the newest line wrap to two lines
   and step their size down (fitWords), instead of being cut with an ellipsis ---- */
#monitor .tz-wbtn > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }