/* ===========================================================================
   Oxford Quiz

   EVERY rule is scoped under #oxq. The supplied prototype styled `body`, `*`
   and `:root` directly, which would have restyled the whole thank-you page and
   the theme chrome around it.

   Fonts: this theme ships seven SINGLE-WEIGHT families, so weight is chosen by
   family name, not by font-weight. Plain "Red Hat Display" is not defined.

   Colours are the Oxford landing-page palette, replacing the prototype's
   placeholder hexes as its own comment asked.
   =========================================================================== */

#oxq{
  --oxq-deep:#0B4C60;
  --oxq-mid:#0C5E76;
  --oxq-accent:#E8791F;
  --oxq-accent-ink:#ffffff;
  --oxq-success:#2E7D52;
  --oxq-warn:#C25F10;

  --oxq-surface:#ffffff;
  --oxq-ink:#10242e;
  --oxq-ink-soft:#4d6270;
  --oxq-line:#dde4e9;
  --oxq-line-strong:#c3ced6;

  --oxq-reg:'Red Hat Display Regular',sans-serif;
  --oxq-med:'Red Hat Display Medium',sans-serif;
  --oxq-sb:'Red Hat Display SemiBold',sans-serif;
  --oxq-bold:'Red Hat Display Bold',sans-serif;

  --oxq-radius:14px;
  --oxq-radius-sm:10px;

  display:block;max-width:720px;margin:0 auto;text-align:left;
  font-family:var(--oxq-reg);font-size:16px;line-height:1.55;color:var(--oxq-ink);
  -webkit-font-smoothing:antialiased;
}
#oxq *,#oxq *::before,#oxq *::after{box-sizing:border-box}
#oxq p{margin:0}

/* --- progress chrome ------------------------------------------------------ */
#oxq .oxq-top{background:var(--oxq-deep);border-radius:var(--oxq-radius) var(--oxq-radius) 0 0;overflow:hidden}
#oxq .oxq-top-in{display:flex;justify-content:flex-end;padding:11px 18px}
#oxq .oxq-step{font-family:var(--oxq-med);font-size:12px;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
#oxq .oxq-progress{height:4px;background:rgba(255,255,255,.18)}
#oxq .oxq-progress > i{display:block;height:100%;width:0;background:var(--oxq-accent);transition:width .35s ease}

/* --- card ----------------------------------------------------------------- */
#oxq .oxq-card{
  background:var(--oxq-surface);border:1px solid var(--oxq-line);border-top:0;
  border-radius:0 0 var(--oxq-radius) var(--oxq-radius);padding:26px 24px;
  box-shadow:0 1px 2px rgba(6,24,32,.05)}
#oxq h2.oxq-h{
  font-family:var(--oxq-bold);font-size:clamp(20px,3.4vw,25px);line-height:1.25;
  margin:0 0 8px;color:var(--oxq-deep);letter-spacing:-.005em}
#oxq .oxq-lede{color:var(--oxq-ink-soft);margin:0 0 22px;font-size:15.5px}

#oxq .oxq-q{margin:0 0 26px}
#oxq .oxq-q:last-of-type{margin-bottom:8px}
#oxq .oxq-qlabel{font-family:var(--oxq-sb);margin:0 0 3px;color:var(--oxq-deep)}
#oxq .oxq-qhint{color:var(--oxq-ink-soft);font-size:13.5px;margin:0 0 12px}

/* --- options -------------------------------------------------------------- */
#oxq .oxq-opts{display:grid;gap:9px}
#oxq .oxq-opt{
  display:flex;align-items:center;gap:12px;width:100%;
  border:1.5px solid var(--oxq-line-strong);border-radius:var(--oxq-radius-sm);
  padding:13px 15px;cursor:pointer;background:transparent;text-align:left;
  font-family:var(--oxq-reg);font-size:15.5px;color:inherit;
  transition:border-color .14s,background .14s}
#oxq .oxq-opt:hover{border-color:var(--oxq-mid)}
#oxq .oxq-opt:focus-visible{outline:3px solid var(--oxq-mid);outline-offset:2px}
#oxq .oxq-box{
  flex:0 0 auto;width:21px;height:21px;border:2px solid var(--oxq-line-strong);
  border-radius:50%;display:grid;place-items:center;transition:.14s}
#oxq .oxq-opt[data-multi="1"] .oxq-box{border-radius:6px}
#oxq .oxq-box::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .14s}
#oxq .oxq-opt[data-multi="1"] .oxq-box::after{border-radius:2px}
#oxq .oxq-opt[aria-pressed="true"]{border-color:var(--oxq-mid);background:rgba(12,94,118,.08)}
#oxq .oxq-opt[aria-pressed="true"] .oxq-box{background:var(--oxq-mid);border-color:var(--oxq-mid)}
#oxq .oxq-opt[aria-pressed="true"] .oxq-box::after{transform:scale(1)}

/* --- buttons -------------------------------------------------------------- */
#oxq .oxq-actions{display:flex;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap}
#oxq .oxq-btn{
  font-family:var(--oxq-bold);font-size:16px;border-radius:var(--oxq-radius-sm);
  padding:13px 26px;border:0;cursor:pointer;transition:filter .14s}
#oxq .oxq-btn:focus-visible{outline:3px solid var(--oxq-mid);outline-offset:2px}
#oxq .oxq-primary{background:var(--oxq-accent);color:var(--oxq-accent-ink)}
#oxq .oxq-primary:hover{filter:brightness(1.06)}
#oxq .oxq-primary[disabled]{opacity:.55;cursor:default;filter:none}
#oxq .oxq-ghost{background:transparent;color:var(--oxq-ink-soft);padding:13px 8px;font-family:var(--oxq-med)}
#oxq .oxq-ghost:hover{color:var(--oxq-ink)}
#oxq .oxq-skip{margin-left:auto;font-size:14px}

/* --- saved pill ----------------------------------------------------------- */
#oxq .oxq-saved{
  display:inline-flex;align-items:center;gap:7px;margin:14px 0 0;
  font-family:var(--oxq-sb);font-size:12.5px;color:var(--oxq-success);
  opacity:0;transition:opacity .3s}
#oxq .oxq-saved.on{opacity:1}
#oxq .oxq-dot{width:7px;height:7px;border-radius:50%;background:var(--oxq-success)}
#oxq .oxq-saved.err{color:var(--oxq-warn)}
#oxq .oxq-saved.err .oxq-dot{background:var(--oxq-warn)}

/* --- report --------------------------------------------------------------- */
#oxq .oxq-dial{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:6px 0 22px}
#oxq .oxq-ring{position:relative;width:118px;height:118px;flex:0 0 auto}
#oxq .oxq-ring svg{transform:rotate(-90deg)}
#oxq .oxq-num{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--oxq-bold);font-size:27px;font-variant-numeric:tabular-nums;color:var(--oxq-deep)}
#oxq .oxq-band{font-family:var(--oxq-bold);font-size:18px;margin:0 0 3px;color:var(--oxq-deep)}
#oxq .oxq-bandsub{color:var(--oxq-ink-soft);font-size:14.5px}
#oxq .oxq-rsec{border-top:1px solid var(--oxq-line);padding-top:18px;margin-top:20px}
#oxq .oxq-rsec h3{font-family:var(--oxq-sb);font-size:13px;margin:0 0 10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--oxq-ink-soft)}
#oxq .oxq-rlist{margin:0;padding:0;list-style:none;display:grid;gap:11px}
#oxq .oxq-rlist li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
#oxq .oxq-ic{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--oxq-bold);font-size:12px;margin-top:1px}
#oxq .oxq-ic.good{background:rgba(46,125,82,.15);color:var(--oxq-success)}
#oxq .oxq-ic.todo{background:rgba(194,95,16,.15);color:var(--oxq-warn)}

@media (max-width:600px){
  #oxq .oxq-card{padding:22px 18px}
  #oxq .oxq-skip{margin-left:0}
}

/* --- test readout --------------------------------------------------------
   Shows the Gravity Forms entry id and the CampusLogin ContactID as it
   arrives, because the token is stripped from the URL on load and there is
   otherwise nowhere to watch it land. Off via oxq_show_ids. */
#oxq .oxq-ids{
  margin:12px 0 0;font-family:var(--oxq-reg);font-size:12.5px;color:var(--oxq-ink-soft);
  font-variant-numeric:tabular-nums}
#oxq .oxq-ids b{font-family:var(--oxq-sb);color:var(--oxq-deep)}
#oxq .oxq-ids .pend{color:var(--oxq-warn)}