/* The summary page (summary-r26, David 2 Nov), built by summary.js: the last page before Make my free preview.
   Phones: the kind of song as a short neon exclamation in the station's colour, the request as the big headline, the
   email, then everything entered (summary-r84: always open, each row with a Change). Desktop: the same page, plus the occasion and the kind of song as the top
   row of the request-so-far panel (and on the zoomed desktop's stage), in that panel's own row style.
   Calm: no pulse here; the email's soft pulse is the shared required-field one. Reduced motion: no transitions. */
#monitor .tz-summ { --sc: #7dff8f; }
/* the one-line summary at the top of the phone panel says the same as the headline: not on this page */
#monitor .tz.sm-on .tz-sum { display: none; }

/* the exclamation: two or three words, in the station's colour with a soft glow */
#monitor .sm-ex { margin: 6px 0 6px; font: 800 calc(var(--f) * 1.05)/1.1 "Inter Tight"; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--sc) 88%, #fff); text-shadow: 0 0 10px color-mix(in srgb, var(--sc) 55%, transparent), 0 0 22px color-mix(in srgb, var(--sc) 25%, transparent); }
#monitor .sm-ex:empty { display: none; }
/* the headline: the request in words */
#monitor .tz-summ .sm-head { margin: 0 0 16px; font-size: calc(var(--f) * 2.3); line-height: 1.06; overflow-wrap: anywhere; }

/* summary-r84 (David, 5 Nov): the details are always open, under the email: no button, no collapse; the steps box
   scrolls them. Your words is gone from this page: the card over the steps (night-shift-v3.js paintTz) and the lines on
   the zoomed desktop's stage */
#monitor .tz.sm-on .tz-quote { display: none; }
#monitor .sm-all { margin: 14px 0 4px; padding: 4px 12px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
#monitor .sm-allh { margin: 8px 0 2px; font: 700 calc(var(--f) * .68)/1.3 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--g2); }
/* everything entered: label / value rows, the request-so-far look */
#monitor .sm-dl { margin: 0; }
#monitor .sm-r { display: grid; grid-template-columns: minmax(84px, 30%) minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
#monitor .sm-r:last-child { border-bottom: 0; }
#monitor .sm-r dt { font: 700 calc(var(--f) * .68)/1.3 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--g1); }
#monitor .sm-r dd { margin: 0; min-width: 0; font: 500 calc(var(--f) * .92)/1.35 "Inter Tight"; color: #fff; overflow-wrap: anywhere; }
#monitor .sm-words { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#monitor .sm-words li { position: relative; padding-left: 12px; }
#monitor .sm-words li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: #ffd23f; }
#monitor .sm-none { color: var(--g2); }
#monitor .sm-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 7px var(--dc); vertical-align: .08em; }
#monitor .tz-summ .tz-email { margin-top: 6px; }
/* Change: small, beside each row, in the colour of the step it goes back to. The pill is small; the button round it is
   the finger's target (phones give every button 44px, night-shift-phone.css) and reaches into the row's padding, so the
   rows stay their size */
#monitor .tz-summ .sm-chg { all: unset; box-sizing: border-box; align-self: start; display: flex; align-items: center; justify-content: flex-end; min-height: 32px; margin: -4px -4px -4px 0; padding: 0 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.phone-panels #monitor .tz-summ .sm-chg { min-height: 44px; margin: -8px -4px -8px 0; }
#monitor .tz-summ .sm-chg span { display: block; padding: 5px 9px 4px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--c) 70%, transparent); color: var(--c);
  font: 700 calc(var(--f) * .62)/1 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; transition: background .2s, color .2s; }
#monitor .tz-summ .sm-chg:hover span, #monitor .tz-summ .sm-chg:active span { background: var(--c); color: #0b0614; }
#monitor .tz-summ .sm-chg:focus-visible span { outline: 2px solid var(--c); outline-offset: 2px; }
/* back from a Change: the row just changed glows once */
#monitor .sm-r.sm-back { animation: smBack 1.5s var(--tz-ease2) both; }
@keyframes smBack { 0%, 20% { background: transparent; } 45% { background: color-mix(in srgb, var(--sc) 16%, transparent); } 100% { background: transparent; } }

/* the line itself, wherever it shows: the occasion in its step colour, the kind of song in the station's */
.sm-occ { font-weight: 800; color: #ff7ccc; }
.sm-kind { font-weight: 700; color: color-mix(in srgb, var(--kc, #fff) 80%, #fff); }

/* the request-so-far panel beside the request line: the top row, a little larger than the rows under it */
:is(#rlside.rlside) .rs .rs-row.sm-lead { padding-top: 10px; padding-bottom: 11px; }
:is(#rlside.rlside) .rs .rs-row.sm-lead[hidden] { display: none; }
:is(#rlside.rlside) .rs .rs-row.sm-lead dd { font-size: 1.08em; line-height: 1.35; }

/* the zoomed desktop's stage (left column): the same line under the headline, in the timeline's label / value style */
#monitor .sm-stage { margin: 22px 0 0; max-width: 34em; }
#monitor .sm-stage[hidden] { display: none; }
#monitor .sm-stage > div { position: relative; padding: 2px 0 2px 14px; }
#monitor .sm-stage > div::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: #7dff8f; box-shadow: 0 0 8px #7dff8f; }
#monitor .sm-stage dt { font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--g2); }
#monitor .sm-stage dd { margin: 6px 0 0; font: 500 19px/1.4 "Inter Tight"; color: #fff; }

/* the zoomed desktop's form column has room: the headline a touch smaller than a phone's, relative to its own --f */
.tz-full #monitor .tz-summ .sm-head { font-size: 36px; }
html.phone-landscape #monitor .tz-summ .sm-head { font-size: calc(var(--f) * 1.7); margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  #monitor .tz-summ .sm-chg span { transition: none !important; }
  #monitor .sm-r.sm-back { animation: none !important; }
}