/* Daily Quiz (/daily-quiz) - every rule is scoped under body.dqz or .dqz-* so no other page is affected. */
body.dqz { background: #f5f7fb; color: #1d2433; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; }
body.dqz:not(.dash) { min-height: 100vh; }

/* public header (non-jobseeker visitors) */
.dqz-top { background: #fff; border-bottom: 1px solid #e3e8f0; position: sticky; top: 0; z-index: 20; }
.dqz-in { max-width: 860px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.dqz-logo { display: flex; align-items: center; gap: 8px; color: #1d2433; text-decoration: none; font-weight: 800; font-size: 16px; line-height: 1.1; }
.dqz-logo small { display: block; font-weight: 500; font-size: 11px; color: #5b6578; }
.dqz-tag { background: #eef3ff; color: #2952cc; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.dqz-sp { flex: 1; }

/* layout */
.dqz-main { max-width: 860px; margin: 0 auto; padding: 18px 16px 120px; }
body.dash .dqz-main { padding-top: 6px; }
.dqz-h1 { font-size: 26px; line-height: 1.25; margin: 6px 0 6px; }
.dqz-sub { color: #5b6578; margin: 0 0 10px; font-size: 14px; }
.dqz-topics { background: #fff; border: 1px solid #e3e8f0; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 0 0 16px; }
.dqz-note { background: #fff8e1; border: 1px solid #f2d27a; color: #6b5000; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.dqz-muted { color: #6b7385; font-size: 13px; }
.dqz-datenav { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.dqz-datenav a { color: #2952cc; text-decoration: none; font-weight: 600; }

/* buttons */
.dqz-btn { display: inline-block; background: #2952cc; color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; font: inherit; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; }
.dqz-btn:hover { background: #1f40a8; }
.dqz-btn.ghost { background: #fff; color: #2952cc; border: 1px solid #c9d5f5; }
.dqz-btn.big { padding: 12px 26px; font-size: 16px; }

/* questions */
.dqz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dqz-q fieldset { margin: 0; background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; padding: 14px 16px 16px; min-width: 0; }
.dqz-q legend { display: flex; gap: 8px; align-items: center; padding: 0; float: left; width: 100%; margin-bottom: 8px; }
.dqz-n { font-weight: 800; color: #2952cc; }
.dqz-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5b6578; background: #f0f2f7; padding: 3px 8px; border-radius: 999px; }
.dqz-stem { clear: both; font-size: 15.5px; line-height: 1.55; margin-bottom: 12px; overflow-wrap: anywhere; }
.dqz-stem u { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dqz-opts { display: grid; gap: 8px; }
.dqz-opt { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #dfe5ef; border-radius: 9px; padding: 10px 12px; font-size: 15px; line-height: 1.45; background: #fff; }
label.dqz-opt { cursor: pointer; }
label.dqz-opt:hover { border-color: #9fb4ea; background: #f8faff; }
.dqz-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dqz-l { flex: 0 0 26px; height: 26px; border-radius: 50%; border: 1.5px solid #b9c4d8; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #4a5468; }
.dqz-t { flex: 1; overflow-wrap: anywhere; }
label.dqz-opt:has(input:checked) { border-color: #2952cc; background: #eef3ff; }
label.dqz-opt:has(input:checked) .dqz-l { background: #2952cc; border-color: #2952cc; color: #fff; }
label.dqz-opt:has(input:focus-visible) { outline: 2px solid #2952cc; outline-offset: 2px; }

/* results */
.dqz-result { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid #e3e8f0; border-radius: 14px; padding: 16px; margin-bottom: 18px; }
.dqz-score { flex: 0 0 auto; text-align: center; background: #2952cc; color: #fff; border-radius: 12px; padding: 12px 18px; }
.dqz-score b { font-size: 34px; display: block; line-height: 1; }
.dqz-score span { font-size: 13px; opacity: .9; }
.dqz-restitle { font-weight: 700; font-size: 17px; margin: 0 0 4px; }
.dqz-resinfo p { margin: 4px 0; }
.dqz-streak { font-size: 14px; }
.dqz-q.is-ok fieldset { border-left: 4px solid #1e9e57; }
.dqz-q.is-bad fieldset { border-left: 4px solid #d14343; }
.dqz-q.is-void fieldset { border-left: 4px solid #a0a7b5; opacity: .85; }
.dqz-opt.right { border-color: #1e9e57; background: #ecf9f1; }
.dqz-opt.right .dqz-l { background: #1e9e57; border-color: #1e9e57; color: #fff; }
.dqz-opt.wrong { border-color: #d14343; background: #fdeeee; }
.dqz-opt.wrong .dqz-l { background: #d14343; border-color: #d14343; color: #fff; }
.dqz-tick, .dqz-cross { font-size: 11px; font-weight: 700; white-space: nowrap; align-self: center; }
.dqz-tick { color: #157a42; }
.dqz-cross { color: #b02f2f; }
.dqz-exp { margin-top: 10px; background: #f7f9fc; border-radius: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.5; }
.dqz-void { color: #5b6578; font-size: 13px; font-style: italic; }
.dqz-report { margin-top: 8px; font-size: 13px; }
.dqz-report summary { cursor: pointer; color: #6b7385; }
.dqz-report form { display: grid; gap: 8px; margin-top: 8px; }
.dqz-report label { display: grid; gap: 4px; }
.dqz-report select, .dqz-report textarea { font: inherit; border: 1px solid #cfd7e6; border-radius: 6px; padding: 6px 8px; }
.dqz-report .dqz-btn { justify-self: start; padding: 6px 12px; font-size: 13px; }

/* submit bar */
.dqz-submitbar { position: sticky; bottom: 0; z-index: 10; margin-top: 18px; background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -4px 18px rgba(20, 30, 60, .06); }
.dqz-progress { font-size: 14px; color: #4a5468; }

/* about + archive */
.dqz-about, .dqz-archive { margin-top: 26px; }
.dqz-about h2, .dqz-archive h2 { font-size: 17px; margin: 0 0 6px; }
.dqz-about p { color: #4a5468; font-size: 14px; line-height: 1.6; margin: 0; }
.dqz-archive ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dqz-archive li a, .dqz-archive li b { display: inline-block; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid #e3e8f0; color: #2952cc; text-decoration: none; }
.dqz-archive li b { background: #2952cc; color: #fff; border-color: #2952cc; }

@media (max-width: 600px) {
  .dqz-h1 { font-size: 21px; }
  .dqz-logo small, .dqz-tag { display: none; }
  .dqz-result { flex-direction: column; align-items: flex-start; }
  .dqz-submitbar { flex-direction: column; align-items: stretch; text-align: center; }
  .dqz-stem { font-size: 15px; }
}
/* DQ-10 share bar */
.dqz-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.dqz-share-l { font-size: 14px; font-weight: 600; color: #4b5563; }
.dqz-share .dqz-btn { padding: 6px 12px; font-size: 13px; }
.dqz-share [hidden] { display: none; }
.dqz-result .dqz-share { margin: 10px 0 6px; }
/* DQ-11 bottom sticky AdX for guests/Students (Job Seekers get it from the dashboard
   chrome, whose shell carries fja-adx-on). While an ad shows the Submit bar is NOT
   sticky - no tap target right next to the ad - and the answered count sits in the header. */
.fja-adx-anchor { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: center; align-items: center; background: #fff; box-shadow: 0 -4px 16px rgba(15, 23, 42, .10); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); max-width: 100vw; overflow: hidden; }
.fja-adx-q .dqz-main { padding-bottom: 118px; }
@media (max-width: 767px) { .fja-adx-q .dqz-main { padding-bottom: 76px; } }
.fja-adx-q .dqz-submitbar, .fja-adx-on .dqz-submitbar { position: static; box-shadow: none; }
.dqz-count { display: none; font-size: 13px; font-weight: 700; color: #2952cc; background: #eef3ff; border: 1px solid #c9d5f5; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.fja-adx-q .dqz-count, .fja-adx-on .dqz-count { display: inline-block; }

/* ===== DQ-12: colours and layout polish ===== */
/* section colours: --sc = strong (white text on it >= 4.5:1), --sb = tint (--sc text on it >= 4.5:1) */
.dqz-s-ca        { --sc: #b54708; --sb: #fff4e5; }
.dqz-s-gk        { --sc: #0f7a4f; --sb: #e8f7ef; }
.dqz-s-reasoning { --sc: #6b3fd4; --sb: #f1ecff; }
.dqz-s-quant     { --sc: #1864ab; --sb: #e7f1fb; }
.dqz-s-english   { --sc: #b0245a; --sb: #fdebf2; }

/* 2. header banner + section chips (the colour key) */
.dqz-hero { background: linear-gradient(135deg, #eef3ff 0%, #f6f0ff 100%); border: 1px solid #dde4f6; border-radius: 14px; padding: 14px 18px 16px; margin: 6px 0 14px; }
.dqz-hero .dqz-h1 { margin: 0 0 4px; }
.dqz-hero .dqz-sub { margin: 0 0 10px; color: #4a5468; }
.dqz-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dqz-chip { background: var(--sb); color: var(--sc); border: 1px solid color-mix(in srgb, var(--sc) 25%, transparent); font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.dqz-chip b { font-weight: 800; margin-left: 2px; }

/* 1. question cards in their section colour (left edge stays free for the right/wrong stripe) */
.dqz-q fieldset { border-top: 3px solid var(--sc, #e3e8f0); }
.dqz-q .dqz-n { background: var(--sc, #2952cc); color: #fff; font-size: 13px; min-width: 34px; height: 24px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; box-sizing: border-box; }
.dqz-q .dqz-sec { background: var(--sb, #f0f2f7); color: var(--sc, #5b6578); }

/* 3. answered state (CSS only) + progress bar under the sticky top bar (added by daily-quiz.js) */
.dqz-q:has(input:checked) fieldset { background: #fbfcff; }
.dqz-q:has(input:checked) legend::after { content: "\2713  Answered"; margin-left: auto; font-size: 12px; font-weight: 700; color: #157a42; }
.dqz-pbar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; pointer-events: none; }
.dqz-pbar span { display: block; height: 3px; width: 0; background: linear-gradient(90deg, #2952cc, #6b3fd4); transition: width .25s ease; }

/* 4. result: score colour by band + score by section */
.dqz-score.dqz-band-a { background: #1e7e4a; }
.dqz-score.dqz-band-b { background: #2952cc; }
.dqz-score.dqz-band-c { background: #a15c07; }
.dqz-score.dqz-band-d { background: #c53030; }
.dqz-secscore { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 6px; max-width: 460px; }
.dqz-secscore li { display: grid; grid-template-columns: 170px 1fr 40px; align-items: center; gap: 10px; font-size: 13px; }
.dqz-ss-name { color: var(--sc); font-weight: 700; }
.dqz-ss-bar { height: 8px; background: var(--sb); border-radius: 999px; overflow: hidden; }
.dqz-ss-bar span { display: block; height: 8px; background: var(--sc); border-radius: 999px; }
.dqz-secscore b { text-align: right; }

/* 5. phones */
@media (max-width: 600px) {
  .dqz-hero { padding: 12px 14px 14px; border-radius: 12px; }
  .dqz-q fieldset { padding: 12px 12px 14px; }
  .dqz-opt { padding: 9px 10px; }
  .dqz-secscore li { grid-template-columns: 120px 1fr 36px; }
  .dqz-share .dqz-btn { flex: 1 1 auto; text-align: center; }
}

/* ===== DQ-13: "unanswered questions" dialog (replaces the browser confirm box) ===== */
.dqz-modal { position: fixed; inset: 0; z-index: 100; background: rgba(17, 24, 39, .55); display: flex; align-items: center; justify-content: center; padding: 16px; animation: dqzFade .15s ease; }
.dqz-dialog { background: #fff; border-radius: 16px; max-width: 420px; width: 100%; padding: 22px 22px 18px; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); border-top: 4px solid #2952cc; }
.dqz-dialog h2 { margin: 0 0 6px; font-size: 19px; color: #1d2433; }
.dqz-dialog p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: #4a5468; }
.dqz-dlg-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.dqz-dialog .dqz-btn:focus-visible { outline: 2px solid #2952cc; outline-offset: 2px; }
.dqz-modal-open, .dqz-modal-open body { overflow: hidden; }
.dqz-q.dqz-flash fieldset { animation: dqzFlash 1.6s ease; }
@keyframes dqzFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dqzFlash { 0%, 60% { box-shadow: 0 0 0 3px #f59f00; } 100% { box-shadow: 0 0 0 3px rgba(245, 159, 0, 0); } }
@keyframes dqzUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 600px) {
  .dqz-modal { align-items: flex-end; padding: 0; }
  .dqz-dialog { max-width: none; border-radius: 18px 18px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); animation: dqzUp .2s ease; }
  .dqz-dlg-btns { flex-direction: column-reverse; }
  .dqz-dlg-btns .dqz-btn { width: 100%; padding: 12px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .dqz-modal, .dqz-dialog, .dqz-q.dqz-flash fieldset { animation: none; } }