/* ==========================================================================
   QuantAim — lesson reader. Added 2026-09-11.

   Paces a lesson into steps, drops the lesson's own quiz questions into the
   reading flow, and offers the tutor per passage.

   THE RULE THIS FILE OBEYS
   ------------------------
   Collapsing is scoped to .qa-reader-on, a class the JavaScript puts on the
   root at runtime. Without it every step is fully visible. So if the script
   is blocked or throws, the lesson reads exactly as it did before: nothing is
   hidden by CSS that JavaScript is responsible for revealing. That failure
   mode is invisible to whoever built it, because their JavaScript always
   runs, and it silently costs a student the lesson.
   ========================================================================== */

.qa-reader { position: relative; }

/* --- progress ------------------------------------------------------------ */

.qa-reader-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 4px;
    border-radius: 3px;
    background: var(--line, #e2e8f0);
    overflow: hidden;
    margin: 0 0 6px;
}
.qa-reader-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #0ea5e9, #22d3ee);
    transition: width .45s cubic-bezier(.16, 1, .3, 1);
}
.qa-reader-count {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3, #64748b);
    margin: 0 0 18px;
}
/* Only meaningful once stepping is active. */
.qa-reader-bar, .qa-reader-count { display: none; }
.qa-reader-on .qa-reader-bar,
.qa-reader-on .qa-reader-count { display: block; }

/* --- steps --------------------------------------------------------------- */

.qa-step { margin: 0 0 4px; }

/* Everything below the open step is hidden ONLY when scripting is live. */
.qa-reader-on .qa-step { display: none; }
.qa-reader-on .qa-step[data-open] { display: block; }

.qa-reader-on .qa-step[data-open] > .qa-step-body {
    animation: qaStepIn .5s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes qaStepIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.qa-step-next {
    display: inline-block;
    margin: 18px 0 26px;
    padding: 11px 24px;
    border: 0;
    border-radius: 10px;
    background: #0369a1;
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}
.qa-step-next:hover { background: #075985; }
.qa-step-next:focus-visible { outline: 3px solid #38bdf8; outline-offset: 2px; }
/* Without scripting there is nothing to advance to. */
.qa-step-next { display: none; }
.qa-reader-on .qa-step-next { display: inline-block; }

/* --- ask the tutor about this passage ------------------------------------ */

.qa-step-ask {
    display: block;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #0369a1;
    font: inherit;
    font-size: 13.5px;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.qa-step-ask:hover { color: #075985; }

/* --- inline knowledge check ---------------------------------------------- */

.qa-check {
    border: 1px solid var(--line, #e2e8f0);
    border-left: 4px solid #0ea5e9;
    border-radius: 12px;
    padding: 20px 22px;
    margin: 24px 0 4px;
    background: var(--surface-accent, #f8fafc);
}
.qa-check-eyebrow {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0369a1;
}
.qa-check-q {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.55;
    color: var(--ink, #0f172a);
}
.qa-check-opts { display: flex; flex-direction: column; gap: 8px; }

.qa-check-opt {
    text-align: left;
    padding: 11px 14px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 9px;
    background: var(--surface, #fff);
    color: var(--ink, #0f172a);
    font: inherit;
    font-size: 14.5px;
    line-height: 1.5;
    cursor: pointer;
}
.qa-check-opt:hover:not([disabled]) { border-color: #0ea5e9; }
.qa-check-opt:focus-visible { outline: 3px solid #38bdf8; outline-offset: 2px; }
.qa-check-opt[disabled] { cursor: default; }

.qa-check-opt.is-right {
    border-color: #22c55e;
    background: #f0fdf4;
    font-weight: 700;
}
.qa-check-opt.is-wrong {
    border-color: #f87171;
    background: #fef2f2;
}

.qa-check-feedback { margin-top: 14px; }
.qa-check-verdict {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 800;
}
.qa-check-verdict.ok  { color: #047857; }
.qa-check-verdict.no  { color: #b91c1c; }
.qa-check-explain {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ink-2, #334155);
}

/* --- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .qa-reader-on .qa-step[data-open] > .qa-step-body { animation: none; }
    .qa-reader-bar span { transition: none; }
}

/* --- print: the whole lesson, never a single step ------------------------ */

@media print {
    .qa-reader-on .qa-step { display: block !important; }
    .qa-step-next, .qa-step-ask, .qa-reader-bar, .qa-reader-count { display: none !important; }
    .qa-check { break-inside: avoid; }
}

/* --- predict before you read --------------------------------------------
   The same component as an inline check, marked out as the opening move
   rather than a test. It is never scored and never says whether the guess was
   right; that happens later, when the reader has actually read something. */
.qa-check-predict{
    border-style: dashed;
}
.qa-check-predict .qa-check-eyebrow{
    color: #0369a1;
}
.qa-check-predict .qa-check-opt.is-picked{
    border-color: #0369a1;
    background: rgba(2, 132, 199, .08);
    font-weight: 700;
}
.qa-check-predict .qa-check-verdict{
    color: var(--ink-2, #334155);
    font-weight: 650;
}

/* --- line length ---------------------------------------------------------
   A measure of about 65 characters is the range typography has settled on for
   sustained reading, and it is the one thing that makes a paragraph feel
   shorter without removing a word from it. The container, not the words. */
.qa-step-body p,
.qa-step-body li,
.qa-check-q,
.qa-check-explain {
    max-width: 66ch;
}

/* --- a check you have not answered --------------------------------------
   The Continue button under an unanswered check is disabled, not hidden: a
   button that disappears looks broken, and one that is visibly waiting says
   what to do. Set by JavaScript at runtime, so a blocked script leaves every
   button working normally. */
.qa-step-next[data-wait] {
    opacity: .45;
    cursor: not-allowed;
}
.qa-step-wait {
    font-size: 13px;
    color: var(--ink-3, #64748b);
    margin: 8px 0 0;
}

.qa-check-after {
    font-size: 13px;
    font-weight: 700;
    color: #0369a1;
    margin: 22px 0 -6px;
}

/* Not until they have read it.

   The box sits after the last step, so with the steps collapsed it was
   appearing directly under the FIRST paragraph: a student was being asked to
   explain a lesson they had not read yet. Scoped to .qa-reader-on and to a
   class JavaScript adds when the final step is revealed, so a blocked script
   shows everything, as everywhere else here. */
.qa-reader-on .qa-reader:not(.is-finished) .qa-reflect { display: none; }

/* --- in your own words ---------------------------------------------------
   The last thing in a lesson, and the only part that asks a student to
   produce an answer rather than recognise one. Styled as a piece of the
   lesson rather than a form: no field labels, no required marks, nothing that
   makes it look like an assignment. */
.qa-reflect {
    margin: 32px 0 8px;
    padding: 20px 22px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
    background: var(--surface, #fff);
}
.qa-reflect-eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0369a1;
}
.qa-reflect-q {
    margin: 0 0 6px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.45;
    max-width: 62ch;
    color: var(--ink, #0f172a);
}
.qa-reflect-hint {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-3, #64748b);
    max-width: 62ch;
}
.qa-reflect-input {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink, #0f172a);
    background: var(--bg, #f8fafc);
    border: 1px solid var(--line, #cbd5e1);
    border-radius: 10px;
    padding: 12px 14px;
    resize: vertical;
}
.qa-reflect-input:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, .15);
}
.qa-reflect-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
.qa-reflect-send {
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #0369a1;
    border: 0;
    border-radius: 9px;
    padding: 10px 18px;
    cursor: pointer;
}
.qa-reflect-send:hover { background: #075985; }
.qa-reflect-send:disabled { background: #94a3b8; cursor: default; }
.qa-reflect-count { font-size: 12.5px; color: var(--ink-3, #64748b); }
.qa-reflect-answer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line, #e2e8f0);
}
.qa-reflect-answer-label {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3, #64748b);
}
.qa-reflect-answer-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2, #334155);
    max-width: 62ch;
    white-space: pre-wrap;
}
@media print { .qa-reflect-send, .qa-reflect-foot { display: none; } }

/* ==========================================================================
   REDESIGN, 2026-09-14 — definition first, one part at a time, less bland.
   The owner found lessons plain and the scroll-down reveal confusing. Rules
   here override the earlier ones above where they overlap. The ordering rule
   is unchanged: anything that hides is scoped to .qa-reader-on.
   ========================================================================== */

.qa-reader{ --qa-accent:#0369a1; --qa-accent-2:#0ea5e9; --qa-soft:#f0f9ff; --qa-card:#ffffff; --qa-edge:#e2e8f0; }
:root[data-theme="dark"] .qa-reader{ --qa-accent:#7dd3fc; --qa-accent-2:#38bdf8; --qa-soft:#0b1a2a; --qa-card:#16202b; --qa-edge:#334155; }

/* --- 1. what this lesson is about ---------------------------------------- */
.qa-intro{
    position:relative; overflow:hidden;
    margin:0 0 22px; padding:24px 26px 20px;
    border-radius:18px;
    background:linear-gradient(135deg, var(--qa-soft) 0%, var(--qa-card) 70%);
    border:1px solid var(--qa-edge);
    box-shadow:0 1px 2px rgba(15,23,42,.05), 0 10px 30px -18px rgba(3,105,161,.35);
}
.qa-intro::before{
    content:""; position:absolute; inset:0 auto 0 0; width:6px;
    background:linear-gradient(180deg, var(--qa-accent-2), #10b981);
}
.qa-intro-eyebrow{
    margin:0 0 8px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
    color:var(--qa-accent); display:flex; align-items:center; gap:8px;
}
.qa-intro-icon{ font-size:11px; color:#10b981; }
.qa-intro-def{
    margin:0 0 14px; font-size:clamp(18px,2.2vw,21px); line-height:1.5; font-weight:650;
    color:var(--ink, #0f172a); max-width:62ch;
}
:root[data-theme="dark"] .qa-intro-def{ color:#f1f5f9; }
.qa-intro-terms{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; }
.qa-intro-terms-label{ font-size:12px; font-weight:700; color:var(--ink-3,#64748b); margin-right:2px; }
.qa-intro-term{
    font-size:13px; font-weight:700; padding:5px 11px; border-radius:999px;
    background:var(--qa-card); border:1px solid var(--qa-edge); color:var(--qa-accent);
}
.qa-intro-meta{ margin:0; font-size:13px; color:var(--ink-3,#64748b); }

/* --- 2. the step tracker -------------------------------------------------- */
.qa-stepper{ display:none; margin:0 0 16px; }
.qa-reader-on .qa-stepper{ display:block; }
.qa-stepper ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.qa-stepper-dot{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px 6px 6px; border-radius:999px;
    border:1px solid var(--qa-edge); background:var(--qa-card); color:var(--ink-3,#64748b);
    font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
}
.qa-stepper-dot[disabled]{ cursor:default; opacity:.6; }
.qa-stepper-n{
    width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
    background:var(--qa-edge); color:var(--ink-2,#334155); font-size:12.5px; font-weight:800;
}
.qa-stepper-dot.is-seen .qa-stepper-n{ background:#10b981; color:#fff; }
.qa-stepper-dot[aria-current="step"]{ border-color:var(--qa-accent); color:var(--qa-accent); box-shadow:0 0 0 3px rgba(14,165,233,.15); }
.qa-stepper-dot[aria-current="step"] .qa-stepper-n{ background:var(--qa-accent); color:#fff; }
:root[data-theme="dark"] .qa-stepper-dot[aria-current="step"] .qa-stepper-n{ color:#0f172a; }
.qa-stepper-done{ cursor:default; }

/* The old thin bar and "Section 1 of 2" text are replaced by the tracker. */
.qa-reader-on .qa-reader-bar, .qa-reader-on .qa-reader-count{ display:none; }

/* --- 3. each part is a card ----------------------------------------------- */
.qa-step{
    background:var(--qa-card); border:1px solid var(--qa-edge); border-radius:18px;
    padding:24px 28px 22px; margin:0 0 18px;
    box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 32px -24px rgba(15,23,42,.25);
}
.qa-step-kicker{
    margin:0 0 12px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--qa-accent);
}
.qa-step-body{ font-size:17px; line-height:1.75; color:var(--ink-2,#1e293b); }
:root[data-theme="dark"] .qa-step-body{ color:#e2e8f0; }
.qa-step-body p{ margin:0 0 14px; }
.qa-step-body strong, .qa-step-body b{
    color:var(--ink,#0f172a);
    background:linear-gradient(transparent 62%, rgba(14,165,233,.22) 62%);
    padding:0 2px; border-radius:2px;
}
:root[data-theme="dark"] .qa-step-body strong, :root[data-theme="dark"] .qa-step-body b{ color:#fff; background:linear-gradient(transparent 62%, rgba(56,189,248,.28) 62%); }
.qa-step-figure{ margin:20px -6px 6px; }
.qa-step-figure .qa-viz{ margin:0; border-radius:14px; }

.qa-reader-on .qa-step[data-open]{ animation:qaPartIn .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes qaPartIn{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } }
.qa-reader-on .qa-step[data-open] > .qa-step-body{ animation:none; }

/* --- 4. the quick check --------------------------------------------------- */
.qa-check{
    border:1px solid var(--qa-edge); border-left:5px solid #10b981; border-radius:14px;
    background:linear-gradient(180deg, rgba(16,185,129,.06), transparent 60%), var(--qa-card);
    padding:20px 22px; margin:22px 0 6px;
}
.qa-check-eyebrow{ color:#047857; }
:root[data-theme="dark"] .qa-check-eyebrow{ color:#6ee7b7; }
.qa-check-opt{ border-radius:11px; padding:12px 16px; transition:border-color .15s, transform .15s, background .15s; }
.qa-check-opt:hover:not([disabled]){ transform:translateY(-1px); border-color:#10b981; }
:root[data-theme="dark"] .qa-check-opt{ background:#0f172a; color:#e2e8f0; border-color:#334155; }
:root[data-theme="dark"] .qa-check-opt.is-right{ background:rgba(16,185,129,.15); border-color:#34d399; color:#fff; }
:root[data-theme="dark"] .qa-check-opt.is-wrong{ background:rgba(239,68,68,.15); border-color:#f87171; color:#fff; }

/* --- 5. back / next ------------------------------------------------------- */
.qa-step-nav{ display:none; }
.qa-reader-on .qa-step-nav{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid var(--qa-edge); }
.qa-reader-on .qa-step-next{ display:inline-flex; margin:0 0 0 auto; border-radius:999px; padding:12px 24px; background:var(--qa-accent); }
/* DEAD SELECTOR, fixed 2026-09-30. .qa-reader-on is set on <html>, the same
   element that carries data-theme - so the descendant combinator below could
   never match and this override never applied. The button kept
   background:var(--qa-accent), which is #7dd3fc in dark, giving white text at
   1.67:1. The runtime contrast guard was quietly rescuing it on every load by
   flipping the text to #0f172a; the CSS was still wrong.
   Both forms are listed so it holds whether the class sits on the root or on
   a wrapper. White on #0369a1 is 5.93:1 in either theme. */
:root[data-theme="dark"].qa-reader-on .qa-step-next,
:root[data-theme="dark"] .qa-reader-on .qa-step-next{ background:#0369a1; color:#fff; }
.qa-step-back{
    border:1px solid var(--qa-edge); background:transparent; color:var(--ink-2,#334155);
    font:inherit; font-size:15px; font-weight:700; padding:11px 20px; border-radius:999px; cursor:pointer;
}
:root[data-theme="dark"] .qa-step-back{ color:#e2e8f0; }
.qa-step-back:hover{ border-color:var(--qa-accent); color:var(--qa-accent); }
.qa-step-wait{ width:100%; text-align:right; margin:4px 0 0; }
.qa-step-ask{ display:inline-block; margin:14px 0 0; }

@media (max-width:640px){
    .qa-step{ padding:18px 16px; border-radius:14px; }
    .qa-intro{ padding:20px 18px 16px; }
    .qa-stepper-label{ display:none; }
    .qa-stepper-dot{ padding:4px; }
    .qa-reader-on .qa-step-next{ width:100%; justify-content:center; margin-left:0; }
    .qa-step-back{ width:100%; }
}
@media (prefers-reduced-motion: reduce){ .qa-reader-on .qa-step[data-open]{ animation:none; } }
@media print{
    .qa-stepper, .qa-step-nav{ display:none !important; }
    .qa-step{ box-shadow:none; break-inside:avoid; }
}