/* RaiseFM raise questionnaire (homepage section #raise-questionnaire; version 2, 2026-11-07)

   A radio receiver from Alex's asset pack (reference/questionnaire-asset-pack/) and his renderings of 2026-11-07:
   brushed blue-steel face in a copper rim, vent slots in the top corners, a knob on each side (Back and Next,
   which turn 45 degrees on hover), a tuner that shows the step, and a dark glass screen with a dot pattern.
   The answers are see-through buttons over that pattern; on hover, keyboard focus or once chosen they light up
   turquoise with dark text. Everything on the screen, the knob labels and the step count are live HTML. The
   knob and tuner glass are cut from the pack's receiver artwork (assets/images/questionnaire/), the metal grain
   is brushed-steel.svg, and the rest is CSS.

   Loaded only by index.html, after css/styles.css, and scoped to .rq-* classes.
   Fonts are the site's own: Inter Tight for the question, Inter for everything else.
   Contrast (WCAG AA) on the screen #040F16: answer text #EAF8FF 17.9:1, question #9ADCFF 11.9:1, muted #9FC0D2
   10.1:1, errors #FFE0AF 15.2:1, answer outlines #CDEBFA 15.1:1; lit answers #06113C on #96DDF8 11.6:1.
   The focus ring #FFE0AF is 15.2:1 on the screen and 6.6:1 on the metal. Knob labels are white on the knob's
   average #101D28 (17:1), with a dark shadow where they cross its bright streak. */

/* ---------- Homepage section ---------- */

/* Tighter than other homepage sections above and below (Alex, 2026-11-09): the platform row ends with its own padding */
.rq-section { padding: calc(var(--section-y) * 0.2) 0 calc(var(--section-y) * 0.45); }
.rq-section .section-lede { margin-bottom: 0; }
/* Subpages: the questionnaire is the last section above the footer (Alex, 2026-11-09) */
.rq-section.rq-shared { padding: calc(var(--section-y) * 0.5) 0 var(--section-y); }
.rq-section .rq-radio { margin-top: clamp(1.25rem, 0.9rem + 1vw, 1.75rem); }
.rq-noscript { margin: 0; padding: 1.5rem; background: #fff; border-radius: var(--radius-card); }

/* ---------- The radio ---------- */

.rq-radio {
  --rq-metal-top: #485E70;
  --rq-metal-mid: #36495C;
  --rq-metal-bottom: #27394B;

  --rq-screen: #040F16;
  --rq-text: #EAF8FF;
  --rq-heading: #9ADCFF;
  --rq-muted: #9FC0D2;
  --rq-outline: #CDEBFA;
  --rq-lit-top: #C9F1FF;
  --rq-lit: #96DDF8;
  --rq-lit-ink: #06113C;
  --rq-focus: #FFE0AF;
  --rq-error: #FFE0AF;
  --rq-needle: #FF4B12;

  --rq-knob: 130px;
  --rq-side: 146px;
  --rq-tuner-h: 46px;
  --rq-screen-min: 176px;   /* every question's height on a wide screen, so the knobs stay put between steps */

  position: relative;
  padding: 5px;   /* the copper rim */
  border-radius: 16px;
  background: linear-gradient(160deg, #F2A66A 0%, #C46F38 16%, #7A3A14 44%, #A65A27 70%, #E79457 100%);
  box-shadow: 0 0 0 1px rgba(70, 28, 6, 0.75), 0 0 20px rgba(255, 121, 0, 0.16), 0 26px 46px -22px rgba(3, 19, 62, 0.6);
  scroll-margin-top: 92px;   /* clears the sticky header when a new step scrolls into view */
}
/* Other finishes from the pack, for review only: set data-finish="midnight" or "champagne" on .rq-radio */
.rq-radio[data-finish="midnight"] { --rq-metal-top: #2D435B; --rq-metal-mid: #101F36; --rq-metal-bottom: #081323; }
.rq-radio[data-finish="champagne"] { --rq-metal-top: #DDD6C9; --rq-metal-mid: #B9B3A7; --rq-metal-bottom: #736E65; }

.rq-face {
  display: grid;
  grid-template-columns: var(--rq-side) minmax(0, 1fr) var(--rq-side);
  grid-template-rows: var(--rq-tuner-h) auto;
  grid-template-areas:
    "vents-back tuner  vents-next"
    "knob-back  screen knob-next";
  gap: 10px 12px;
  padding: 14px 16px 16px;
  border-radius: 11px;
  background:
    url("../assets/images/questionnaire/brushed-steel.svg") 0 0 / 600px 300px,
    radial-gradient(60% 120% at 84% -10%, rgba(255, 255, 255, 0.12), transparent 70%),
    linear-gradient(180deg, var(--rq-metal-top), var(--rq-metal-mid) 48%, var(--rq-metal-bottom));
  background-blend-mode: overlay, normal, normal;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 6px rgba(0, 0, 0, 0.35);
}

/* Vent slots in the top corners */
.rq-vents { display: grid; gap: 5px; width: 76%; align-self: center; justify-self: center; }
.rq-vents-back { grid-area: vents-back; }
.rq-vents-next { grid-area: vents-next; }
.rq-vents span {
  display: block;
  height: 5px;
  border-radius: 99px;
  background: #03080D;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Knobs: real buttons. ::before is the shadow and copper ring, ::after the knob, which turns; the label never does */
.rq-knob {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: var(--rq-knob);
  height: var(--rq-knob);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
  font: 600 1.19rem/1 var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rq-knob-back { grid-area: knob-back; }
.rq-knob-next { grid-area: knob-next; }
.rq-knob::before,
.rq-knob::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
}
.rq-knob::before {
  box-shadow: 0 0 0 2px rgba(196, 112, 52, 0.85), 0 0 0 3px rgba(40, 16, 4, 0.6), 0 9px 14px rgba(2, 8, 16, 0.55), 0 2px 3px rgba(2, 8, 16, 0.5);
}
.rq-knob::after {
  background: url("../assets/images/questionnaire/knob.webp") center / contain no-repeat;
  transition: transform 0.45s var(--ease), filter 0.2s;
}
.rq-knob-label { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.55); }
.rq-knob-back:is(:hover, :focus-visible):not(:disabled)::after { transform: rotate(-45deg); filter: brightness(1.15); }
.rq-knob-next:is(:hover, :focus-visible):not(:disabled)::after { transform: rotate(45deg); filter: brightness(1.15); }
.rq-knob:focus-visible { outline: 3px solid var(--rq-focus); outline-offset: 6px; }
.rq-knob:disabled { cursor: default; }
.rq-knob:disabled::after { filter: brightness(0.75); }
.rq-knob:disabled .rq-knob-label { opacity: 0.4; }

/* Tuner: the step count above a scale, and the orange needle */
.rq-tuner {
  grid-area: tuner;
  position: relative;
  border: 2px solid #0A0E11;
  border-radius: 7px;
  background: url("../assets/images/questionnaire/tuner-glass.webp") center / 100% 100% no-repeat, #121212;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 2px 6px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(200, 206, 218, 0.45);
}
.rq-tuner-label {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font: 600 0.78rem/1 var(--font-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rq-text);
  text-shadow: 0 0 8px rgba(120, 200, 255, 0.45);
  white-space: nowrap;
}
.rq-tuner-scale { position: absolute; top: 0; bottom: 0; left: 22px; right: 22px; }
.rq-tuner-scale::before,
.rq-tuner-scale::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
}
/* Fine marks every 2%, longer marks every 10% */
.rq-tuner-scale::before {
  height: 5px;
  background: repeating-linear-gradient(90deg, rgba(160, 200, 220, 0.5) 0 1px, transparent 1px calc((100% - 1px) / 50));
}
.rq-tuner-scale::after {
  height: 10px;
  background: repeating-linear-gradient(90deg, rgba(190, 220, 235, 0.85) 0 1px, transparent 1px calc((100% - 1px) / 10));
}
.rq-needle {
  position: absolute;
  z-index: 1;
  top: 21px;
  bottom: 3px;
  left: calc(var(--rq-progress, 0) * (100% - 1px) - 0.5px);
  width: 2px;
  border-radius: 1px;
  background: var(--rq-needle);
  box-shadow: 0 0 6px rgba(255, 75, 18, 0.8);
  transition: left 0.35s var(--ease);
}

/* Screen: smoked glass with a dot pattern that shows through the answers */
.rq-screen {
  grid-area: screen;
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: var(--rq-screen-min);
  padding: 12px 20px 14px;
  border: 2px solid #0A0E11;
  border-radius: 9px;
  background:
    radial-gradient(circle, rgba(150, 210, 245, 0.13) 0.8px, transparent 1.15px) 0 0 / 4px 4px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 40%),
    var(--rq-screen);
  box-shadow: inset 0 0 0 1px rgba(150, 190, 220, 0.16), inset 0 3px 14px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(180, 205, 225, 0.3), 0 1px 0 rgba(212, 221, 225, 0.45);
  color: var(--rq-text);
}
/* Decorations from the renderings: three dots at the top left; a tiny RaiseFM wordmark and signal bars at the top right */
.rq-screen-dots,
.rq-screen-logo,
.rq-screen-signal { position: absolute; top: 16px; opacity: 0.9; pointer-events: none; }
.rq-screen-dots {
  left: 18px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--rq-heading);
  box-shadow: 9px 0 0 var(--rq-heading), 18px 0 0 var(--rq-heading);
}
.rq-screen-logo {
  top: 12px;
  right: 44px;
  width: 48px;
  height: 10px;
  opacity: 1;
  background: url("../assets/brand/raisefm-vector.svg") right center / contain no-repeat;
}
.rq-screen-signal {
  top: 11px;
  right: 18px;
  width: 18px;
  height: 13px;
  background:
    linear-gradient(var(--rq-heading) 0 0) 0 100% / 3px 4px no-repeat,
    linear-gradient(var(--rq-heading) 0 0) 5px 100% / 3px 7px no-repeat,
    linear-gradient(var(--rq-heading) 0 0) 10px 100% / 3px 10px no-repeat,
    linear-gradient(var(--rq-heading) 0 0) 15px 100% / 3px 13px no-repeat;
}

.rq-heading {
  margin: 0 0 12px;
  padding: 0 74px;   /* clears the dots on the left and the wordmark and bars on the right */
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.05rem + 0.75vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--rq-heading);
  text-shadow: 0 0 16px rgba(120, 200, 255, 0.35);
}
.rq-heading:focus { outline: none; }
.rq-helper { margin: -6px 0 10px; text-align: center; font-size: 0.86rem; line-height: 1.4; color: var(--rq-muted); }

/* Answers fill each column top to bottom, so the reading and keyboard order is the order in the config */
.rq-options {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: repeat(var(--rq-rows, 2), auto);
  gap: 10px 12px;
}
.rq-option,
.rq-text-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.4em;
  min-width: 0;
  min-height: 46px;
  padding: 7px 10px;
  border: 1.5px solid var(--rq-outline);
  border-radius: 6px;
  background: transparent;
  color: var(--rq-text);
  font: 500 1.14rem/1.25 var(--font-body);
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 0 14px rgba(120, 200, 255, 0.07);
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.rq-option-more { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; }
.rq-option-dash { display: inline-block; width: 0.85em; height: 1.5px; background: currentColor; }

/* Lit: on hover, keyboard focus, or once chosen. The fill keeps a faint dot pattern like the screen's */
.rq-option[aria-pressed="true"],
.rq-option:focus-visible,
.rq-text-button:focus-visible {
  border-color: #E2F8FF;
  background:
    radial-gradient(circle, rgba(6, 17, 60, 0.13) 0.8px, transparent 1.15px) 0 0 / 4px 4px,
    linear-gradient(180deg, var(--rq-lit-top), var(--rq-lit));
  color: var(--rq-lit-ink);
  box-shadow: 0 0 16px rgba(140, 220, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
@media (hover: hover) {
  .rq-option:hover,
  .rq-text-button:hover {
    border-color: #E2F8FF;
    background:
      radial-gradient(circle, rgba(6, 17, 60, 0.13) 0.8px, transparent 1.15px) 0 0 / 4px 4px,
      linear-gradient(180deg, var(--rq-lit-top), var(--rq-lit));
    color: var(--rq-lit-ink);
    box-shadow: 0 0 16px rgba(140, 220, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
}
.rq-option:focus-visible,
.rq-text-button:focus-visible { outline: 3px solid var(--rq-focus); outline-offset: 3px; }

.rq-error { margin: 0; font-size: 0.8rem; font-weight: 500; line-height: 1.3; color: var(--rq-error); }
.rq-choice-error, .rq-error-summary, .rq-status { margin-top: 7px; text-align: center; }
.rq-status { font-size: 0.8rem; line-height: 1.3; color: var(--rq-text); }
.rq-error:empty, .rq-status:empty { display: none; }

/* Contact step: the label sits inside each box, at the left. Name and Email in the first column */
.rq-fields {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 10px 12px;
}
.rq-field { min-width: 0; }
.rq-field-box {
  display: flex;
  align-items: center;
  min-height: 46px;
  border: 1.5px solid var(--rq-outline);
  border-radius: 6px;
  box-shadow: inset 0 0 14px rgba(120, 200, 255, 0.07);
}
.rq-field-box label {
  flex: none;
  padding: 2px 12px 2px 14px;
  border-right: 1px solid rgba(205, 235, 250, 0.35);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--rq-text);
  white-space: nowrap;
}
.rq-field-box input {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  padding: 8px 12px;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: transparent;
  color: #fff;
  font: 400 1.02rem/1.3 var(--font-body);
  outline: none;
}
.rq-field-box input::placeholder { color: var(--rq-muted); opacity: 1; }
.rq-field-box:focus-within { outline: 3px solid var(--rq-focus); outline-offset: 2px; background: rgba(150, 220, 255, 0.06); }
.rq-field-box:has(input[aria-invalid="true"]) { border-color: var(--rq-error); box-shadow: inset 0 0 0 1px var(--rq-error); }
.rq-field-box input:disabled { opacity: 0.6; }
.rq-field-box input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  box-shadow: inset 0 0 0 100px var(--rq-screen);
}
.rq-field .rq-error { margin-top: 4px; }
/* Spam trap: off screen and out of the tab order; people never fill it in */
.rq-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Confirmation */
.rq-done-text { margin: -6px 0 12px; text-align: center; font-size: 0.95rem; color: var(--rq-text); }
.rq-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0 0 14px;
}
.rq-summary div { padding-top: 7px; border-top: 1px solid rgba(160, 205, 230, 0.3); }
.rq-summary dt {
  font: 600 0.66rem/1.3 var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rq-muted);
}
.rq-summary dd { margin: 3px 0 0; font-size: 0.95rem; line-height: 1.3; overflow-wrap: anywhere; color: var(--rq-text); }
.rq-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.rq-text-button { min-height: 44px; padding: 7px 22px; font-size: 1rem; }

/* ---------- Tablets ---------- */

@media (max-width: 900px) {
  /* Step 2, with its third row of answers, is the tallest question here */
  .rq-radio { --rq-knob: 100px; --rq-side: 112px; --rq-screen-min: 224px; }
  .rq-face { gap: 10px 10px; padding: 12px 12px 14px; }
  .rq-screen { padding: 12px 16px 14px; }
  .rq-heading { padding: 0 70px; font-size: 1.25rem; }
  .rq-option { padding: 7px 8px; font-size: 1.02rem; }
  .rq-screen-dots { left: 14px; }
  .rq-screen-signal { right: 14px; }
  .rq-screen-logo { right: 40px; }
  /* Three-column questions drop to two columns, still filled top to bottom */
  .rq-options { grid-template-rows: repeat(var(--rq-rows-2, 2), auto); }
  .rq-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Small tablets and phones: the knobs move up beside the tuner, the screen takes the full width ---------- */

@media (max-width: 820px) {
  .rq-radio { --rq-knob: 84px; --rq-tuner-h: 44px; --rq-screen-min: 0px; border-radius: 13px; padding: 4px; }
  .rq-face {
    grid-template-columns: var(--rq-knob) minmax(0, 1fr) var(--rq-knob);
    grid-template-areas:
      "knob-back tuner  knob-next"
      "screen    screen screen";
    grid-template-rows: auto auto;
    gap: 12px 12px;
    padding: 12px 12px 14px;
    border-radius: 9px;
  }
  .rq-vents { display: none; }
  .rq-tuner { align-self: center; height: var(--rq-tuner-h); }
  .rq-knob { font-size: 1rem; }
  .rq-option { font-size: 1.1rem; }
}

/* ---------- Phones: everything stacks ---------- */

@media (max-width: 560px) {
  .rq-radio { --rq-knob: 68px; }
  .rq-face { gap: 12px 10px; padding: 12px 10px 12px; }
  .rq-tuner-label { font-size: 0.7rem; letter-spacing: 0.12em; }
  .rq-tuner-scale { left: 14px; right: 14px; }
  .rq-knob { font-size: 0.86rem; letter-spacing: 0; }
  .rq-screen { padding: 14px 14px 16px; }
  .rq-screen-dots, .rq-screen-logo, .rq-screen-signal { display: none; }
  .rq-heading { padding: 0; }
  .rq-options,
  .rq-fields {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 10px;
  }
  .rq-option { font-size: 1.06rem; }
  .rq-summary { grid-template-columns: minmax(0, 1fr); }
}

/* The narrowest phones have no room for the scale; the step count stays */
@media (max-width: 400px) {
  .rq-tuner-label { top: 50%; transform: translateY(-50%); }
  .rq-tuner-scale { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rq-needle, .rq-knob::after, .rq-option, .rq-text-button { transition: none; }
  .rq-knob:is(:hover, :focus-visible):not(:disabled)::after { transform: none; }
}

@media (forced-colors: active) {
  .rq-knob { border: 1px solid ButtonText; }
  .rq-option[aria-pressed="true"] { border: 3px solid Highlight; }
  .rq-needle { background: Highlight; }
}