/* Required-field highlight (David, 2 Nov; req-hl-r23): the one class every must-fill field uses.
   Markup: <div class="rq-req rq-box|rq-line|rq-group [rq-need]"> field(s) <span class="rq-tag">Needed to continue</span></div>
   (required-field.js RQReq.set builds it on the static pages; src/components/RequiredField.tsx in the React flow).
   The highlight is an overlay on the wrapper (::after), never the field's own border, so it needs no specificity
   fight with the page's field styles and adds nothing to the layout: clearing it fades it out, nothing moves.
     rq-box    a boxed input: a ring over its border
     rq-line   an underlined input (the big name field): a glowing underline
     rq-group  a group of chips: a soft ring around the group
   Reduced motion: no pulse, a steady border. */
.rq-req { --rq: #ff4fbf; position: relative; }
/* polish-r28 (David, 2 Nov): the pulse takes the colour of the step the field is on, the four colours of the request
   line's first screen (TZ_STEPS in night-shift-v3.js, set on each step as --c): pink for the occasion, light blue for
   who it's for, yellow for tell us about them, green for the DJ and preview (station & sound and the summary are part
   of that step and carry its green). Off the request line the pink above stays. */
.tz-step .rq-req { --rq: var(--c, #ff4fbf); }
.rq-req.rq-box, .rq-req.rq-group { display: block; }
/* feedback-r33 (David, 2 Nov): the pulse was too faint to see. It is now clearly visible before anything is typed (a
   2px ring that never drops below 65% of the step's colour, a wider glow and a faint wash inside the field) and still
   soft: the same slow 2.6 s ease in and out, no flashing. It stops as soon as the field has text (night-shift-v3.js
   paintReq), and still takes the step's colour (the four colours above). */
.rq-req::after { content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  border: 2px solid color-mix(in srgb, var(--rq) 80%, transparent); border-radius: var(--rq-r, 12px);
  box-shadow: 0 0 14px color-mix(in srgb, var(--rq) 40%, transparent), inset 0 0 10px color-mix(in srgb, var(--rq) 18%, transparent); }
.rq-req.rq-box::after { inset: 0; }
.rq-req.rq-group::after { inset: -5px -6px; --rq-r: 15px; border-style: solid; border-color: color-mix(in srgb, var(--rq) 70%, transparent); }
.rq-req.rq-line::after { left: 0; right: 0; bottom: 0; height: 0; border-width: 0 0 3px; border-radius: 0; box-shadow: 0 10px 16px -8px color-mix(in srgb, var(--rq) 75%, transparent); }
.rq-req.rq-need::after { opacity: 1; animation: rqPulse 2.6s ease-in-out infinite; }
@keyframes rqPulse {
  0%, 100% { border-color: color-mix(in srgb, var(--rq) 65%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--rq) 32%, transparent), inset 0 0 8px color-mix(in srgb, var(--rq) 12%, transparent); background: color-mix(in srgb, var(--rq) 4%, transparent); }
  50% { border-color: var(--rq); box-shadow: 0 0 22px color-mix(in srgb, var(--rq) 62%, transparent), 0 0 4px color-mix(in srgb, var(--rq) 80%, transparent), inset 0 0 14px color-mix(in srgb, var(--rq) 26%, transparent); background: color-mix(in srgb, var(--rq) 9%, transparent); }
}
.rq-req.rq-line.rq-need::after { animation-name: rqPulseLine; }
@keyframes rqPulseLine {
  0%, 100% { border-color: color-mix(in srgb, var(--rq) 65%, transparent); box-shadow: 0 8px 12px -8px color-mix(in srgb, var(--rq) 50%, transparent); }
  50% { border-color: var(--rq); box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--rq) 90%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--rq) 80%, transparent); }
}
/* the small hint, absolutely placed: under a chip group, above an underlined field, inside a boxed one (right) */
.rq-tag { position: absolute; z-index: 2; right: 10px; top: 0; transform: translateY(-50%); padding: 1px 6px; border-radius: 6px;
  background: var(--surf, #0d0b1c); font: 600 9.5px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--rq) 75%, #fff); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.rq-req.rq-group > .rq-tag { top: auto; bottom: -5px; right: 14px; transform: translateY(50%); } /* under the chips: the question sits right above them */
.rq-req.rq-line > .rq-tag { right: 0; top: auto; bottom: 100%; transform: translateY(-3px); background: none; padding: 0; }
/* a boxed field: inside it, on the right (its label sits right above and its note right below); typed text keeps clear */
.rq-req.rq-box > .rq-tag { top: 50%; right: 12px; padding: 0; background: none; }
.rq-req.rq-box.rq-need > :is(input, textarea) { padding-right: 140px !important; }
.rq-req.rq-need > .rq-tag { opacity: 1; }
/* the asterisk after a required field's label (summary-r26: the email). Visual only (aria-hidden); the field itself
   carries aria-required (RQReq.set) */
.rq-star { margin-left: .25em; font-weight: 800; color: color-mix(in srgb, var(--rq, #ff4fbf) 85%, #fff); text-shadow: 0 0 6px color-mix(in srgb, var(--rq, #ff4fbf) 45%, transparent); }
/* when the page's own hint under the field is showing (Continue was pressed), it says it in words: the tag steps back */
.rq-req.rq-need:has(+ .fhint:not([hidden])) > .rq-tag { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .rq-req.rq-need::after { animation: none !important; border-color: color-mix(in srgb, var(--rq) 90%, transparent); }
  .rq-req::after, .rq-tag { transition: none !important; }
}
/* love-r25: rq-soft, the same pulse on a box that can be skipped (RQReq.pulse): no tag. rq-side, a short boxed field
   (a birthday's age): the tag sits just outside it, on the right, and the typed digits keep their own padding. */
.rq-req.rq-soft > .rq-tag { display: none; }
.rq-req.rq-side > .rq-tag { left: calc(100% + 10px); right: auto; top: 50%; transform: translateY(-50%); padding: 0; background: none; }
.rq-req.rq-box.rq-side.rq-need > input { padding-right: 10px !important; }