/* Feedback round r33 (David, 2 Nov): the request line's new pieces. Loaded after request-line.css, required-field.css
   and station-sound.css (06-night-shift-v3.html, 06-night-shift-v3-newmobile.html); everything sits inside #monitor.
   The mini-player's own look is in miniplayer.js (it is used off the request line too). */

/* ---- step 2, a whole-company message (Company event, Announcement): one guidance line, and their own words ---- */
#monitor .tz-yguide { margin: -2px 0 10px !important; }
#monitor .tz-c.tz-yownc { border-style: dashed; }
#monitor .tz-c.tz-yownc.on { border-style: solid; }
#monitor .tz-yown { margin: 10px 0 0; }
#monitor .tz-yown[hidden] { display: none; }

/* ---- step 3, the minimum and maximum: the counter under the box, the reason when Add is off ---- */
#monitor .tz-min { margin: 8px 0 0; font: 700 calc(var(--f) * .74)/1.25 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
#monitor .tz-min.ok { color: #7dff8f; }
#monitor .tz-min.full { color: #ffb347; }
#monitor .tz-hint.full { color: #ffb347; }

/* ---- Pronounce: a small button beside each name box, and the box it opens under the field ---- */
#monitor .tz-pron { --pc: var(--c, #3df0ff); flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px;
  border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--pc) 70%, transparent); background: rgba(255,255,255,.03); color: var(--pc);
  font: 700 calc(var(--f) * .7)/1 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
#monitor .tz-pron svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#monitor .tz-pron:hover, #monitor .tz-pron[aria-expanded="true"] { background: color-mix(in srgb, var(--pc) 16%, transparent); }
#monitor .tz-pron.set { background: var(--pc); border-color: var(--pc); color: #0b0918; }
#monitor .tz-pron:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#monitor .tz-pron[hidden] { display: none; }
/* a couple's two names share the row: the buttons go to the icon alone (the label says which name) */
#monitor .tz-names.pair .tz-pron { padding: 0; width: 32px; justify-content: center; }
#monitor .tz-names.pair .tz-pron span { display: none; }
#monitor .tz-fromrow { display: flex; align-items: center; gap: 8px; }
#monitor .tz-fromrow .tz-in { flex: 1 1 0; min-width: 0; }
/* r132: written "in your own words" sits as text until a double-click or a press-and-hold. A long press must not
   open the phone's selection menu or select the words (that is how a held finger wipes them). */
#monitor .tz-ownshow { box-sizing: border-box; min-height: 44px; margin: 0; padding: 10px 12px; border: 1.5px solid rgba(255,255,255,.16); border-radius: 12px; background: var(--surf); color: #fff; font: 500 calc(var(--f) * 1.02)/1.35 "Inter Tight", system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
#monitor .tz-ownshow.holding { border-color: var(--c, #3df0ff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #3df0ff) 22%, transparent); }
#monitor .tz-yown.parked > .tz-in { display: none !important; }
#monitor .tz-yown:not(.parked) > .tz-ownshow { display: none !important; }
#monitor .tz-pbox { margin: 10px 0 2px; padding: 10px 12px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c, #3df0ff) 45%, transparent);
  background: color-mix(in srgb, var(--c, #3df0ff) 6%, transparent); }
#monitor .tz-pbox[hidden] { display: none; }
#monitor .tz-pbox .tz-plab { display: block; margin: 0 0 8px; font: 600 calc(var(--f) * .86)/1.35 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #fff; }

/* ---- the station page: the own style is one full-width button with no pulse, and nothing on the own style pulses ---- */
#monitor .sd-ownbtn { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: -2px 0 14px; padding: 8px 14px;
  border-radius: 13px; border: 1.5px dashed rgba(255,255,255,.55); background: rgba(255,255,255,.04); color: #fff; text-align: left;
  font: 700 calc(var(--f) * .92)/1.25 "Inter Tight", system-ui, sans-serif; cursor: pointer; transition: background .2s, border-color .2s; }
#monitor .sd-ownbtn > span:first-child { flex: none; font-size: 1.15em; }
#monitor .sd-ownbtn > span:nth-child(2) { flex: 1; min-width: 0; }
#monitor .sd-ownbtn > i { flex: none; font-style: normal; opacity: .75; }
#monitor .sd-ownbtn:hover { background: rgba(255,255,255,.09); border-color: #fff; }
#monitor .sd-ownbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#monitor .sd-ownbtn[aria-pressed="true"] { border-style: solid; border-color: #fff; background: #fff; color: #0b0918; }
#monitor :is(.sd-ownbtn, .sd-ownbtn::after, .sd-ownbox, .sd-ownbox *, .sd-sbox) { animation: none !important; }
/* a whole track paused from the mini-player: the row keeps its bar, the play button shows it is waiting to resume */
#monitor .sd-row.held .sd-go { opacity: .7; }