/* GoConqr redesign · quiz.css · the quiz pages (area B2). Copied from goconqr-design/full-site/study/quiz.css (14 Oct 2026);
   Rails additions at the end (marked). Tokens only; every class starts with quiz-. */

/* Signed-in / signed-out parts of the same page (quiz-page.js sets body[data-logged-in] from ?sesion=1) */

body:not([data-logged-in]) .quiz-only-in, body[data-logged-in] .quiz-only-out { display: none !important; }
body[data-owner] .quiz-not-owner { display: none !important; }
/* Premium-only parts (quiz-stats.html?plan=gratis shows the free state) */
body:not([data-plan="premium"]) .quiz-only-premium, body[data-plan="premium"] .quiz-only-free { display: none !important; }
.quiz-create { margin-top: 20px; color: var(--ink-2); }
.quiz-create .tap { margin-left: 4px; }


/* Question list: the question's own image inside its answers */
.quiz-ql-img { width: auto; max-width: min(320px, calc(100% - 2.25em - 8px)); max-height: 220px; -o-object-fit: contain; object-fit: contain; margin: 0 0 12px calc(2.25em + 8px); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }

/* Question list: answer images (small, after the answer text) */
.quiz-ql-opt-img { display: block; width: auto; max-width: 120px; max-height: 72px; margin-top: 6px; border: 1px solid var(--rule); border-radius: var(--r-in); background: #fff; }

/* Embed button card (/p/:id/embed_button, 82 px tall inside other sites' pages) */
.quiz-eb { min-height: 0; padding: 6px; background: transparent; }   /* fits today's 82-px iframe */
.quiz-eb-card { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 14px 8px 8px; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--paper); color: var(--ink); }
a.quiz-eb-card:hover { border-color: var(--rule-3); background: var(--paper-2); }
a.quiz-eb-card:hover .quiz-eb-title { text-decoration: underline; text-underline-offset: 3px; }
.quiz-eb-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r); background: var(--paper-2); color: var(--c-quiz); }
.quiz-eb-ic .i { width: 26px; height: 26px; }
.quiz-eb-txt { display: grid; min-width: 0; flex: 1; gap: 2px; }
.quiz-eb-title { font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-eb-by { font-size: var(--fs-1); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-eb-go { flex: none; color: var(--ink-3); }
.quiz-eb-card.is-gone { color: var(--ink-2); }
.quiz-eb-card.is-gone .quiz-eb-ic { color: var(--ink-3); }

/* Your attempts (last 5) */
.quiz-att > li + li { border-top: 1px solid var(--rule); }
.quiz-att a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 52px; padding: 8px 10px; margin-inline: -10px; border-radius: var(--r); }
.quiz-att a:hover { background: var(--paper-2); }
.quiz-att a:hover .quiz-att-when { text-decoration: underline; text-underline-offset: 3px; }
.quiz-att-when { color: var(--ink); }
.quiz-att-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.quiz-att-pct.is-low { color: var(--bad); }
.quiz-att-pct.is-ok { color: var(--ok); }
.quiz-att-time { grid-column: 1; font-size: var(--fs-1); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.quiz-side-more { margin-top: 8px; }

/* Star rating input: a radio group, 44 px targets, the label says the value */
.quiz-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.quiz-rate > .stars { flex-basis: 100%; }   /* the average on its own line, the stars below it are your own rating */
.quiz-rate fieldset { display: flex; margin: 0; padding: 0; border: 0; }
.quiz-rate legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.quiz-star { position: relative; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; color: var(--rule-3); }
.quiz-star input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.quiz-star .i { width: 26px; height: 26px; transition: color var(--t), fill var(--t); }
.quiz-star.is-on { color: #a86a12; }
.quiz-star.is-on .i { fill: #a86a12; }
.quiz-star:has(input:focus-visible) { outline: var(--ring); outline-offset: -4px; border-radius: var(--r); }
.quiz-rate-note { font-size: var(--fs-1); color: var(--ink-3); }


/* ---------- Results (B's marked exam) ---------- */
.quiz-res-title { margin-top: 6px; }
.quiz-res-sub { margin-top: 10px; color: var(--ink-2); }
.quiz-res-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.quiz-res .grade { margin-top: 8px; }
.quiz-res .stats { margin-top: 28px; }
.quiz-rate-row { display: grid; gap: 4px; margin-top: 28px; }
.quiz-rate-row .h3 { font-weight: 700; }
.quiz-save { display: grid; gap: 12px; }
.quiz-save p { color: var(--ink-2); }
.quiz-save .btn { justify-self: start; }
.quiz-save-alt { justify-self: start; font-size: var(--fs-1); }
.quiz-limit { margin-top: 24px; }
.quiz-hidden-note { margin-top: 32px; }

/* Review toolbar: filter, seek strip, previous / next */
.quiz-rv-bar > * { min-width: 0; }
.quiz-rv-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-2); }
.quiz-rv-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.quiz-seek { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
.quiz-seek a { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule-2); border-radius: var(--r); font-size: var(--fs-1); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.quiz-seek a::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--ok); }
.quiz-seek a.is-bad::after { background: var(--bad); height: 3px; }
.quiz-seek a.is-part::after { background: var(--warn); }
.quiz-seek a.is-skip::after { background: var(--rule-2); }
.quiz-seek a:hover { background: var(--paper-2); color: var(--ink); }
.quiz-seek a[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
@media (pointer: coarse) { .quiz-seek a { width: 44px; height: 44px; } }
@media (min-width: 900px) { .quiz-seek { flex-wrap: wrap; overflow: visible; } }
.quiz-step { display: flex; align-items: center; gap: 4px; }
.quiz-step-n { min-width: 7.5em; text-align: center; font-size: var(--fs-1); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.review > li { scroll-margin-top: 16px; transition: background-color var(--t); }
.review > li.quiz-is-current { background: linear-gradient(var(--paper-2), var(--paper-2)) no-repeat 0 0 / 100% 100%; box-shadow: -10px 0 0 var(--paper-2), 10px 0 0 var(--paper-2); }
.quiz-rv-img { width: auto; max-width: min(280px, 100%); max-height: 200px; -o-object-fit: contain; object-fit: contain; margin-top: 10px; border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }
.quiz-rv-opt-img { display: block; width: auto; max-width: 120px; max-height: 72px; margin-top: 6px; border-radius: var(--r-in); background: #fff; }
s.rv-ans .quiz-rv-opt-img { opacity: .8; }
.quiz-rv-skip { font-style: italic; color: var(--ink-3); }
.quiz-rv-empty { padding: 24px 0; color: var(--ink-2); }

/* ---------- Stats ---------- */
.quiz-stats-head .h1 { margin-top: 6px; }
.quiz-chart { margin-top: 20px; }
.quiz-chart .line { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.quiz-chart .dot { fill: var(--paper); stroke: var(--accent); stroke-width: 2.25; }
.quiz-chart .dot--last { fill: var(--accent); }
.quiz-chart .avg { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.quiz-chart-cap { margin-top: 8px; font-size: var(--fs-1); color: var(--ink-3); }
.quiz-tab-note { margin-top: 20px; }
.quiz-switch-row { margin-top: 12px; }

/* ---------- Owner view ---------- */
.quiz-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 10px; }
.quiz-status .status .i { width: 16px; height: 16px; }
.quiz-status .status--live { color: var(--ok); font-weight: 600; }

/* ---------- Old player inside the new frame (Release 1a) ---------- */
.quiz-old { margin-top: 24px; overflow: hidden; background: #ededed; border: 1px solid var(--rule); border-top: 3px solid var(--c-quiz); border-radius: var(--r); }
.quiz-old picture, .quiz-old img { display: block; width: 100%; height: auto; }
.quiz-old-cap { padding: 10px 14px; background: var(--paper); border-top: 1px solid var(--rule); font-size: var(--fs-1); color: var(--ink-2); }

/* ---------- Embed frame (inside other sites' iframes, 400–800 px) ---------- */
.quiz-embed { background: var(--paper); }
.quiz-embed-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 8px 4px 12px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.quiz-embed-logo { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r); }
.quiz-embed-logo img { width: 26px; height: 26px; }
.quiz-embed-logo:hover { background: var(--paper-2); }
.quiz-embed-title { flex: 1; min-width: 0; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-embed-main { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 16px 24px; }
.quiz-embed-main .player { margin-top: 16px; }
.quiz-embed-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; max-width: 800px; margin: 0 auto; padding: 8px 16px 16px; font-size: var(--fs-1); color: var(--ink-3); }
.quiz-embed-foot a { gap: 4px; color: var(--accent); }
.quiz-embed-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) {
  .quiz-embed-bar .logo { width: 44px; }
  .quiz-embed-bar .logo img { clip-path: inset(0 83.6% 0 0); }
  .quiz-embed-bar .quiz-share-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .quiz-embed-bar [data-embed-share] { width: var(--h-sm); padding: 0; }
}
@media (max-width: 640px) { .quiz-embed-main { padding: 0 16px 16px; } .quiz-embed-main .player { margin-top: 8px; } }

/* Stats charts: hover/focus targets and the tooltip */
.quiz-chart { position: relative; }
.quiz-chart svg { display: block; overflow: visible; }
.quiz-hit { fill: transparent; cursor: default; outline: none; }
.quiz-hit:focus-visible { stroke: var(--accent); stroke-width: 2; }
.quiz-hit:hover { fill: rgb(21 34 43 / .04); }
.quiz-tip { position: absolute; z-index: 5; padding: 6px 10px; border-radius: var(--r-in); background: var(--ink); color: #fff; font-size: var(--fs-1); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.quiz-tip b { font-weight: 700; }
.facts .quiz-rate fieldset { margin-left: -9px; }
body:not([data-logged-in]) .study > .aside > .quiz-only-in:first-child + .sec { margin-top: 0; }
.ql--own-n .quiz-ql-img { margin-left: 0; max-width: min(320px, 100%); }
/* Review seek strip: wrong and partly right answers carry a mark, not only a colour (V12) */
.quiz-seek a.is-bad::before, .quiz-seek a.is-part::before { position: absolute; top: 2px; right: 4px; font-size: 10px; line-height: 1; font-weight: 700; }
.quiz-seek a.is-bad::before { content: "✕"; color: var(--bad); }
.quiz-seek a.is-part::before { content: "½"; color: var(--warn); }
/* The author doesn't report their own quiz */
.quiz-embed-foot .ftr-btn::before { content: "·"; margin-right: 12px; color: var(--ink-3); }

/* ---------- Rich content outside the player (R10): the review and the question list use the player's renderer
   (js/quiz-core.js GCQuiz.rich/img/audio), so maths, code, images and audio look the same as in play ---------- */
.review .p-code, .ql .p-code { margin: 8px 0 0; padding: 8px 10px; overflow-x: auto; border-radius: var(--r); background: var(--paper-2); font: 400 .875rem/1.5 ui-monospace, Consolas, monospace; white-space: pre; }
.review code, .ql code { padding: 1px 4px; border-radius: var(--r-in); background: var(--paper-2); font: .9em/1.4 ui-monospace, Consolas, monospace; }
.review .p-code code, .ql .p-code code { padding: 0; background: none; }
.review .p-audio { margin-top: 10px; }
.review .opt-audio { vertical-align: middle; margin-left: 2px; }
.quiz-rv-expl b { display: inline; font-size: inherit; color: inherit; }
.quiz-ql-audio { margin: 0 0 12px calc(2.25em + 8px); }
.ql .opt-audio { vertical-align: middle; }
@media print { .quiz-ql-audio, .ql .opt-audio, .review .p-audio, .review .opt-audio { display: none !important; } }
/* Print: the whole question list (the folded rest too; usability checks 21 Oct, item 2), without the unfold button */
@media print { ol.ql[hidden] { display: block !important; } .ql-more { display: none !important; } }
/* Results: unsaved (offline "Ignorar"), practice and "can't show this attempt" notes */
.quiz-res-note { margin-top: 24px; }
/* The author's own result, signed in: no save prompt and no rating, so no empty side column (R08) */
body[data-owner][data-logged-in] .quiz-res > .side { display: none; }

/* ---------- Rails additions (area B2) ---------- */
/* the tool-page link under Related (as study.css) */
.aside > .study-more { margin-top: 12px; }
/* Today's player in the new frame (rare question types, timers, attempt limits): a live iframe, full width. Its height
   fits the screen under the page's header (sizes fix 5, 20 Oct; as the study frames, plus the note under it), up to
   today's 760 px; CSS only, so nothing moves after load. */
.quiz-old { --study-above: 342px; }
@media (min-width: 900px) { .quiz-old { --study-above: 366px; } }
@media (min-width: 1100px) { .quiz-old { --study-above: 290px; } }
.quiz-old-frame { display: block; width: 100%; height: clamp(440px, calc(100vh - var(--study-above)), 760px); height: clamp(440px, calc(100dvh - var(--study-above)), 760px); border: 0; background: #fff; }
@media (max-width: 639px) { .quiz-old-frame { height: min(760px, 82vh); min-height: 480px; } }
.quiz-old .quiz-old-cap { margin: 0; }
/* Full screen (sizes fix 3): the frame is the whole screen, as today's player in full screen */
.quiz-old:fullscreen, .quiz-old.is-full { display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 0; }
.quiz-old:fullscreen .quiz-old-frame, .quiz-old.is-full .quiz-old-frame { flex: 1 1 auto; height: auto; min-height: 0; }
.quiz-old:fullscreen .quiz-old-cap, .quiz-old.is-full .quiz-old-cap { display: none; }

/* The new player as a window on the page from 900 px (22 Oct, Dan: "on the old site it's clear what the player window
   is"): a tinted stage with the quiz colour's top line, like today's player frame and the other study frames, and the
   question card in the middle at a reading width. Full screen, the embed and phones keep their own layouts. */
@media (min-width: 900px) {
  .study > .player[data-quiz-player]:not(:fullscreen, .is-full) { padding: 12px 24px; background: var(--paper-2); border: 1px solid var(--rule); border-top: 3px solid var(--c-quiz); border-radius: var(--r); }
  .study > .player[data-quiz-player]:not(:fullscreen, .is-full) > .p-surface { max-width: 860px; margin-inline: auto; padding: 10px 32px 6px; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: 0 1px 2px rgb(21 34 43 / .05), 0 4px 12px rgb(21 34 43 / .05); }
  /* the window costs ~60 px of height, so its rows are a little tighter (still well over 44 px) and Next stays on screen */
  .study > .player[data-quiz-player]:not(:fullscreen, .is-full) .p-form legend { margin-top: 18px; }
  .study > .player[data-quiz-player]:not(:fullscreen, .is-full) .p-opts:not(.p-opts--tf) .opt { min-height: 52px; padding-block: 10px; }
}
@media print { .study > .player[data-quiz-player], .study > .player[data-quiz-player] > .p-surface { padding: 0; background: none; border: 0; box-shadow: none; } }

/* The new player in full screen (sizes fix 2): the screen's width up to 1120 px (today's card is 1110), the answers'
   bar at the bottom of the screen. Phones keep their focus mode. */
.player:fullscreen, .player.is-full { display: flex; flex-direction: column; overflow: auto; padding: 28px max(16px, calc(50vw - 560px)) 20px; background: var(--paper); }
.player:fullscreen > .p-surface, .player.is-full > .p-surface { flex: 1 0 auto; }
/* button_to wraps the Google button in a form; the "create a quiz" link is a POST button */
.quiz-save form { display: contents; }
form.quiz-create { display: block; }
.quiz-create button.link { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* the review filter hides rows and seek links with [hidden] */
.review > li[hidden], .quiz-seek a[hidden] { display: none; }
/* the owner sees the question list even when the summary is hidden from visitors */
.study-text .notice + .ql { margin-top: 12px; }

/* ---------- Fixes after the 16 Oct critique (agent Y) ---------- */
/* Jump grid: the counter plus a chevron is the visible trigger; the track stays a mouse shortcut (aria-hidden) */
.p-jumpbtn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -8px; padding: 0 8px; border: 0; border-radius: var(--r); background: none; font: inherit; font-size: var(--fs-1); font-weight: 700; color: var(--p-text-2); cursor: pointer; }
.p-jumpbtn:hover { background: var(--p-hover); color: var(--p-text); }
.p-jumpbtn:disabled { cursor: default; background: none; }
.p-jumpbtn .p-chev { width: 16px; height: 16px; color: var(--p-muted); transition: rotate var(--t); }
.p-jumpbtn[aria-expanded="true"] .p-chev { rotate: 180deg; }
span.p-progress { cursor: pointer; }
/* answered questions: a corner tick (not tint only); its key next to the grid's heading */
.p-jump-btn { position: relative; }
.p-jump-btn.is-done::after { content: "✓"; position: absolute; top: 2px; right: 4px; font-size: 11px; line-height: 1; font-weight: 700; color: var(--p-sel); }
.p-jump-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.p-jump-key { font-weight: 400; }
.p-jump-tick { font-weight: 700; color: var(--p-sel); }
/* exam mode (answers at the end): the line on question 1 */
.p-examnote { font-size: var(--fs-1); color: var(--p-text-2); }
.p-examnote::before { content: "·"; margin-right: 10px; color: var(--p-muted); }
/* a narrow player (phones): the note takes its own line, so no line starts with "·" (23 Oct) */
@container player (max-width: 560px) { .p-examnote { flex-basis: 100%; } .p-examnote::before { content: none; } }
/* the phone player's progress track: visible against the dark surface */
@container player (max-width: 640px) { .p-surface { --p-track: var(--f-line); } }

/* Results: the review bar stays on screen while stepping (compact on phones); rows stop below it */
.quiz-rv-bar { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--paper); padding-top: 8px; }
.review > li { scroll-margin-top: calc(var(--rv-bar-h, 120px) + 12px); }
@media (max-width: 640px) {
  .quiz-rv-bar { gap: 6px; margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 6px; }
  .quiz-rv-row { flex-wrap: nowrap; gap: 8px; }
  .quiz-rv-bar .seg label > span { padding: 0 10px; }
  .quiz-step-n { min-width: 0; white-space: nowrap; }
  .quiz-seek { flex-wrap: nowrap; padding-bottom: 2px; }
}
/* Gate (16 Oct): "Todas (25) | Incorrectas (15)" + "‹ Pregunta 1 de 15 ›" needs ~470 px, so on narrow phones the
   stepper moves to its own line (right-aligned) instead of pushing the page sideways. results.js re-measures the bar. */
@media (max-width: 520px) {
  .quiz-rv-row { flex-wrap: wrap; row-gap: 6px; }
  .quiz-rv-row .seg { max-width: 100%; }
  .quiz-step { margin-left: auto; }
}
.quiz-res-end { display: flex; flex-wrap: wrap; gap: 8px; }

/* Gate (16 Oct, CLS): the new player is built by redesign-quiz.js after the HTML arrives, which pushed the question list
   down (CLS 0.14–0.40 at tablet/desktop widths). Reserve a typical question card's height until it is built. */
.player[data-quiz-player]:empty { min-height: 640px; } /* phones: the built card is ~675 px (CLS 0.54 in Lighthouse mobile) */
@media (min-width: 641px) { .player[data-quiz-player]:empty { min-height: 600px; } } /* = player.js FIT_FLOOR: the window is never smaller, so building it moves nothing (26 Oct) */
/*
 * Redesign, area B2: the quiz pages (page parts, player additions, results, statistics, embed), loaded after redesign.css.
 * redesign/quiz.css is the mock-up's study/quiz.css plus the player parts coverage/quiz.md asked to promote.
 *

 */