/*
 * Course-only rules for the TEF Canada pages (Spanish and Portuguese). Loaded AFTER the site's theme.css
 * (or after standalone.css in a standalone build). Everything generic (.wrap .band .display .btn .steps .qa ...)
 * comes from the theme. Colours are theme tokens only (no hex, rgb or hsl in this file); the few course tokens
 * below are mixed from them. Sizes use rem so zoom works. Motion: transform and opacity only, once, and nothing
 * moves under prefers-reduced-motion (state changes still show).
 *
 * Landing: hero with a live.tc-sample question on the accent panel, answer-first sections, fact tables tied to
 * their sources, a contents list, the planned course + waitlist in the one dark band, Q&A.
 * Check: exam-style reading (segments, optional clock), writing meter, speaking timers, per-part results,
 * the report with its study plan, and a print layout for the report.
 */
:root, [data-accent] {
  --bad: var(--c-english);
  --warn: var(--c-citizenship);
  --good: color-mix(in srgb, var(--ok) 85%, black); /* darker than --ok so text on white and wash reaches 4.5:1 */
  --bad-soft: color-mix(in srgb, var(--bad) 9%, var(--page));
  --warn-soft: color-mix(in srgb, var(--warn) 11%, var(--page));
  --good-soft: color-mix(in srgb, var(--good) 11%, var(--page));
  --tc-panel-1: color-mix(in srgb, var(--accent) 70%, white);
  --tc-panel-2: var(--accent);
  --tc-panel-3: color-mix(in srgb, var(--accent) 50%, black);
  --tc-hl: color-mix(in srgb, var(--accent) 20%, white);
  --tc-line-light: color-mix(in srgb, white 14%, transparent);
  --tc-shadow: var(--sh-3, 0 24px 48px -20px color-mix(in srgb, var(--ink) 45%, transparent));
  --tc-shadow-soft: var(--sh-1, 0 6px 16px -6px color-mix(in srgb, var(--ink) 20%, transparent));
  --measure: 46rem;
}

/* ---------- language bar under the site header ---------- */
.coursebar { background: var(--wash); border-bottom: 1px solid var(--line); }
.coursebar-in { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; min-height: 3.25rem; padding-block: 0.4rem; }
.coursenav { display: flex; align-items: center; gap: 0.25rem 1rem; flex-wrap: wrap; }
.coursename { font-weight: 800; letter-spacing: -0.01em; }
.coursenav a { font-weight: 600; text-decoration-color: var(--accent); }
.langsw { display: inline-flex; padding: 0.2rem; border-radius: 999px; background: var(--page); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.lang-opt { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; text-decoration: none; color: var(--ink); }
a.lang-opt:hover { background: var(--wash); }
.lang-opt.is-current { background: var(--accent); color: var(--accent-ink); }

/* ---------- chooser ---------- */
.lang-chooser { display: grid; gap: 1rem; margin-top: 2rem; max-width: 40rem; }
.lang-chooser .btn { flex-direction: column; gap: 0.15rem; padding-block: 0.9rem; min-height: 4.5rem; white-space: normal; }
.lang-chooser .btn small { font-weight: 500; font-size: 0.9rem; opacity: 1; }
.hero .small { margin-top: 1rem; max-width: 40rem; }
@media (min-width: 640px) { .lang-chooser { grid-template-columns: 1fr 1fr; } }

/* ---------- landing: hero ---------- */
/* The theme re-orders its own home hero on phones; this hero keeps its reading order: headline, answer, button, the three promises, then the sample question. */
@media (max-width: 999px) {
  .tc-hero .hero-copy { display: block; }
  .tc-hero .hero-vis { margin-top: clamp(1.75rem, 6vw, 2.5rem); }
}
.hero .hero-copy { max-width: 44rem; }
.hero-answer { color: var(--ink-2); }
.hero-answer .src { color: var(--ink-2); }
.tc-trust { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: 0.95rem; font-weight: 600; color: var(--ink-2); }
.tc-trust li { display: flex; align-items: center; gap: 0.55rem; }
.tc-trust li::before { content: ""; flex: none; width: 0.7rem; height: 0.38rem; margin-top: -0.2rem; border-left: 2.5px solid var(--good); border-bottom: 2.5px solid var(--good); transform: rotate(-45deg); }

/* The one authored moment: pick an answer, the right option fills like a highlighter, the sentence that
   proves it lights up in the French text, and the explanation opens. CSS reads the open <details>, so it
   also works without JavaScript. */
.hero-vis { min-width: 0; }
.tc-sample { position: relative; isolation: isolate; padding: clamp(12px, 3.2vw, 30px); border-radius: clamp(22px, 4vw, 34px); background: linear-gradient(160deg, var(--tc-panel-1) 0%, var(--tc-panel-2) 55%, var(--tc-panel-3) 100%); box-shadow: var(--tc-shadow); animation: tc-rise 900ms 180ms var(--ease) both; }
.tc-sample::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: linear-gradient(var(--tc-line-light) 1px, transparent 1px), linear-gradient(90deg, var(--tc-line-light) 1px, transparent 1px); background-size: 2.6rem 2.6rem; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 90% 0%, var(--mask, black), transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 90% 0%, var(--mask, black), transparent 80%); }
.tc-sample-card { background: var(--page); border-radius: clamp(14px, 2.6vw, 22px); padding: clamp(16px, 3.4vw, 28px); box-shadow: var(--tc-shadow-soft); }
.tc-sample-card > * + * { margin-top: 0.9rem; }
.tc-sample-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.tc-sample-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.tc-sample-meta { font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.tc-sample-intro { color: var(--ink-2); font-size: 0.95rem; }
.tc-sample-doc { padding: 1rem 1.1rem; border-radius: 14px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); font-size: 1rem; line-height: 1.6; }
.tc-sample-doc p + p { margin-top: 0.45rem; }
mark.hl { color: inherit; background-color: transparent; background-image: linear-gradient(var(--tc-hl), var(--tc-hl)); background-repeat: no-repeat; background-size: 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0; border-radius: 2px; transition: background-size 700ms 150ms var(--ease); }
.tc-sample:has(details[open]) mark.hl { background-size: 100% 100%; }
fieldset.tc-sample-q { border: 0; padding: 0; margin: 1.1rem 0 0; min-width: 0; }
.tc-sample-q legend { padding: 0; margin-bottom: 0.6rem; font-weight: 800; font-size: 1.08rem; line-height: 1.35; letter-spacing: -0.01em; }
.tc-sopt { position: relative; margin-top: 0.5rem; border-radius: 14px; background: var(--page); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow 150ms var(--ease); }
.tc-sopt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--good-soft); transform: scaleX(0); transform-origin: left center; transition: transform 500ms var(--ease); }
.tc-sopt input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.tc-sopt label { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.75rem; min-height: 48px; margin: 0; padding: 0.55rem 0.9rem; font-weight: 500; line-height: 1.35; cursor: pointer; }
.tc-sopt b { flex: none; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--wash-2); font-size: 0.9rem; font-weight: 800; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.tc-sopt:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tc-sopt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.tc-sopt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.tc-sopt:has(input:checked) b { background: var(--ink); color: var(--page); }
.tc-sample:has(details[open]) .tc-sopt.is-key { box-shadow: inset 0 0 0 2px var(--good); }
.tc-sample:has(details[open]) .tc-sopt.is-key::before { transform: scaleX(1); }
.tc-sample:has(details[open]) .tc-sopt.is-key b { background: var(--good); color: var(--page); }
.tc-sample:has(details[open]) .tc-sopt.is-key label { font-weight: 700; }
.tc-sample:has(details[open]) .tc-sopt:not(.is-key):has(input:checked) { box-shadow: inset 0 0 0 2px var(--bad); background: var(--bad-soft); }
.tc-sample:has(details[open]) .tc-sopt:not(.is-key):has(input:checked) b { background: var(--bad); color: var(--page); }
.tc-sample-status { font-weight: 700; }
.tc-sample-status:empty { display: none; }
.tc-sample-ans > summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; cursor: pointer; }
.tc-sample-ans[open] > summary { color: var(--ink-2); text-decoration-color: var(--line-2); }
.tc-sample-ans > * + * { margin-top: 0.7rem; }
.tc-sample-ans[open] > :not(summary) { animation: tc-rise 380ms var(--ease) both; }
.tc-sample-key { font-size: 1.02rem; }
.tc-sample-ans .notes { padding-left: 1.1em; }
.tc-sample-ans .notes li + li { margin-top: 0.35rem; }
.tc-sample-ans .notes li:first-child { color: var(--ink); font-weight: 600; }
.tc-sample-more { padding-top: 0.9rem; border-top: 1px solid var(--line); font-weight: 600; }
.tc-sample-more a { color: var(--accent-deep); text-decoration-color: var(--accent); font-weight: 800; white-space: nowrap; }
.tc-sample-note { font-size: 0.85rem; color: var(--ink-2); }
@keyframes tc-rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- landing: sections ---------- */
.tc-answer { margin-top: 1.1rem; max-width: 40rem; font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.sec-head .small { margin-top: 0.9rem; max-width: 40rem; }
.tc-split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  .tc-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .tc-split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.tc-split-title { margin-bottom: 0.4rem; }
.steps + .tc-split { margin-top: clamp(2rem, 4vw, 3rem); }
.note-after { margin-top: 1.5rem; max-width: 46rem; }
.facts { list-style: none; padding: 0; max-width: 46rem; }
.facts li { padding: 0.95rem 0; border-top: 1px solid var(--line); }
.facts li:last-child { border-bottom: 1px solid var(--line); }
.plainlist { padding-left: 1.2em; max-width: 46rem; }
.plainlist li + li { margin-top: 0.75rem; }
.src { font-size: 0.85rem; font-weight: 700; white-space: nowrap; margin-left: 0.2rem; text-decoration-color: var(--accent); }
.sources { padding-left: 1.4rem; font-size: 0.95rem; max-width: 52rem; }
.sources li { margin-bottom: 0.9rem; overflow-wrap: anywhere; }

/* fact tables: a white sheet, the number column in the accent, every row ends with its [S#] */
.tc-sheet { background: var(--page); border-radius: 22px; padding: clamp(1rem, 3vw, 1.6rem); box-shadow: var(--tc-shadow-soft), inset 0 0 0 1px var(--line); min-width: 0; }
.tc-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.tc-table caption { caption-side: top; text-align: left; font-weight: 800; font-size: 1.12rem; letter-spacing: -0.01em; padding-bottom: 0.8rem; }
.tc-table thead th { padding: 0 0.75rem 0.55rem 0; border-bottom: 1.5px solid var(--ink); text-align: left; font-size: 0.875rem; font-weight: 700; color: var(--ink-2); vertical-align: bottom; }
.tc-table thead th:last-child { text-align: right; padding-right: 0; }
.tc-table tbody th, .tc-table tbody td, .tc-table tfoot th, .tc-table tfoot td { padding: 0.85rem 0.75rem 0.85rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tc-table tbody th { font-weight: 700; }
.tc-table td.num { padding-right: 0; text-align: right; font-weight: 800; font-size: 1.08rem; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.tc-table td.num .src { color: var(--ink-2); }
.tc-sub { display: block; margin-top: 0.15rem; font-weight: 500; font-size: 0.92rem; color: var(--ink-2); }
thead .tc-sub { display: inline; margin: 0; font-size: inherit; font-weight: inherit; }
thead .tc-sub::before { content: " · "; }
.tc-table tfoot th, .tc-table tfoot td { border-bottom: 0; font-weight: 800; }
.tc-table tfoot td.num { color: var(--ink); }

/* what is inside the check: one row per part, three columns on wide screens */
.tc-spec { list-style: none; padding: 0; margin: 0; border-top: 1.5px solid var(--ink); }
.tc-spec-head { display: none; }
.tc-spec-row { display: grid; gap: 0.45rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.tc-spec-part { display: flex; align-items: center; gap: 0.65rem; font-size: 1.22rem; font-weight: 800; letter-spacing: -0.015em; }
.tc-spec-part::before { content: ""; flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--accent); }
.tc-spec-row.is-off .tc-spec-part { color: var(--ink-2); }
.tc-spec-row.is-off .tc-spec-part::before { background: var(--line-2); }
.tc-spec-label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink-2); }
.tc-spec-get { color: var(--ink-2); }
@media (min-width: 900px) {
  .tc-spec { border-top: 0; }
  .tc-spec-head { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.19fr) minmax(0, 1.19fr); gap: 2rem; padding: 0 0 0.6rem; border-bottom: 1.5px solid var(--ink); font-size: 0.875rem; font-weight: 700; color: var(--ink-2); }
  .tc-spec-row { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.19fr) minmax(0, 1.19fr); gap: 2rem; align-items: start; padding: 1.4rem 0; }
  .tc-spec-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* lists with a drawn tick, and the honest "what this is not" box */
.tc-ticks { list-style: none; padding: 0; display: grid; gap: 0.9rem; max-width: 40rem; }
.tc-ticks li { position: relative; padding-left: 2rem; }
.tc-ticks li::before { content: ""; position: absolute; left: 0.2rem; top: 0.42rem; width: 0.8rem; height: 0.42rem; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }
.tc-ticks-night li::before { border-color: var(--on-night); }
.tc-ticks-small { gap: 0.45rem; font-size: 0.95rem; margin: 1rem 0 1.4rem; }
.fact-box ul { padding-left: 1.2em; margin-top: 0.75rem; }
.fact-box li + li { margin-top: 0.5rem; }
.fact-box.disclaimer { margin: 0; background: var(--page); box-shadow: var(--tc-shadow-soft), inset 0 0 0 1.5px var(--line-2); }

/* how we make it: question and answer side by side */
.tc-method { margin: 0; border-top: 1.5px solid var(--ink); max-width: 64rem; }
.tc-method-row { display: grid; gap: 0.35rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.tc-method dt { font-weight: 800; font-size: 1.08rem; letter-spacing: -0.01em; }
.tc-method dd { margin: 0; color: var(--ink-2); }
@media (min-width: 900px) { .tc-method-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2.5rem; } }

/* the planned course and the waitlist: the page's one dark band */
.band-night a:not(.btn) { color: var(--on-night); text-decoration-color: var(--on-night-2); }
.band-night .h3 { color: var(--on-night); }
.course.tc-split { align-items: start; }
.tc-course-lead { margin-top: 1.75rem; font-weight: 700; }
.band-night .tc-ticks { margin-top: 0.9rem; }
.tc-price { margin-top: 1.6rem; font-weight: 800; }
.tc-wl-lead { margin-top: 0.6rem; color: var(--on-night-2); }
/* the 14-day money-back line under the landing's buy button, on the dark band (2026-10-31) */
.tc-course-buy .tc-refund { margin-top: 0.8rem; color: var(--on-night-2); }
.tc-course-buy .tc-refund a { color: var(--on-night); }
.band-night form.waitlist { background: var(--page); color: var(--ink); box-shadow: var(--tc-shadow); }
.band-night form.waitlist a { color: var(--ink); }
.qa details p.tc-faq-fact { padding-bottom: 16px; font-size: 0.97rem; }
.legal-note { background: var(--wash); border-top: 1px solid var(--line); padding-block: 2rem; font-size: 0.95rem; color: var(--ink-2); }
.legal-note p + p { margin-top: 0.6rem; }
.legal-note .wrap { max-width: 1200px; }
.legal-note .wrap > * { max-width: 52rem; }

/* ---------- forms (waitlist) ---------- */
form.waitlist { max-width: 34rem; padding: 1.5rem; border-radius: 1.5rem; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
.field { margin-bottom: 1.1rem; }
label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.optional { font-weight: 400; color: var(--ink-2); }
input[type="email"], input[type="text"], select, textarea { width: 100%; min-height: 48px; padding: 0.65rem 0.9rem; color: var(--ink); background: var(--page); border: 0; border-radius: 0.9rem; box-shadow: inset 0 0 0 1.5px var(--line-2); }
input[type="email"]:focus-visible, input[type="text"]:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
textarea { min-height: 12rem; resize: vertical; line-height: 1.55; font: inherit; }
.check { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1rem; }
.check input[type="checkbox"], .check-row input[type="checkbox"] { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--accent); }
.check label, .check-row label { font-weight: 400; margin: 0; }
.status { min-height: 1.5rem; margin-top: 0.75rem; font-weight: 600; }
.status-ok { color: var(--good); }
.status-error { color: var(--bad); }
.status-info { color: var(--ink); background: var(--wash); padding: 0.6rem 0.85rem; border-radius: 0.9rem; }
.help { color: var(--ink-2); font-size: 0.95rem; margin: 0.5rem 0; }
.hint { color: var(--ink-2); font-size: 0.92rem; }

/* ---------- buttons inside the check: labels can be long ---------- */
.stage-inner .btn, form.waitlist .btn, .actions .btn { white-space: normal; text-align: center; padding-block: 0.6rem; height: auto; }
.actions { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; }
.actions .btn { width: 100%; }
@media (min-width: 640px) { .actions { flex-direction: row; flex-wrap: wrap; } .actions .btn { width: auto; } }
/* step navigation: the next step on top on phones (full width), Back left and Next right on wider screens */
.actions-nav { flex-direction: column-reverse; }
@media (min-width: 640px) { .actions-nav { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-timer { min-height: 44px; padding: 0 1.1rem; font-size: 0.95rem; }
.btn-quiet { font-size: 0.95rem; }

/* ---------- the check: frame ---------- */
.check-area { padding-block: clamp(1.25rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.stage-inner { max-width: var(--measure); }
.stage-inner.enter { animation: tc-view 260ms var(--ease) both; }
@keyframes tc-view { from { opacity: 0; transform: translateY(8px); } }
.stage-inner > * + * { margin-top: 1rem; }
.view-title { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; font-size: clamp(1.9rem, 5.5vw, 2.9rem); }
.stage-inner h2:not(.view-title), .stage-inner h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-top: 2rem; }
.stage-inner h4 { font-weight: 700; font-size: 1.1rem; margin-top: 1.5rem; }
.stage-inner ul:not(.areas):not(.sum-rows), .stage-inner ol:not(.parts):not(.task-cards):not(.plan) { padding-left: 1.2em; }
.stage-inner li + li { margin-top: 0.4rem; }
.lead { font-size: 1.08rem; }
.tag-critical { background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); margin-left: 0.5rem; vertical-align: middle; }
.meta { color: var(--ink-2); font-weight: 600; }
.disclaimer:not(.fact-box) { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--line-2); border-radius: 1.25rem; padding: 1rem 1.25rem; font-size: 0.95rem; }

/* hub */
.hub-notes li + li { margin-top: 0.5rem; }
.hub-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-top: 2.2rem; }
.hub-head h2 { margin: 0 !important; }
.hub-progress { margin: 0; font-weight: 700; color: var(--ink-2); }
.parts, .task-cards { list-style: none; padding: 0; display: grid; gap: 0; }
.parts { border-bottom: 1px solid var(--line); }
.part-card { padding: 1.4rem 0; border-top: 1px solid var(--line); margin: 0; }
.part-card + .part-card { margin-top: 0; }
.part-card-off { color: var(--ink-2); }
.part-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; }
.part-head h3 { margin: 0 0 0.25rem; }
.part-card p { margin-top: 0.4rem; }
.part-sum { font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.part-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.status-pill { display: inline-flex; align-items: center; font-size: 0.82rem; font-weight: 700; padding: 0.2rem 0.75rem; border-radius: 999px; white-space: nowrap; }
.pill-done { background: var(--good-soft); color: var(--good); box-shadow: inset 0 0 0 1px var(--good); }
.pill-going { background: var(--accent-soft); color: var(--accent-deep); box-shadow: inset 0 0 0 1px var(--accent); }
.pill-todo { background: var(--page); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.pill-off { background: var(--wash); color: var(--ink-2); }
.segs { display: flex; gap: 0.3rem; margin-top: 0.6rem; }
.seg { flex: 1; height: 0.4rem; border-radius: 999px; background: var(--wash-2); transition: background-color 200ms var(--ease); }
.seg-answered { background: var(--accent-mid); }
.seg-now { background: var(--accent); }
.segs-hub .seg-answered { background: var(--good); }
.segs-hub .seg-now { background: var(--accent-mid); }
.saved-row { display: grid; justify-items: start; gap: 0.75rem; margin-top: 2rem !important; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.saved-line { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; color: var(--ink-2); }
.saved-line::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--good); }
.saved-line.is-off::before { background: var(--warn); }
.confirm { width: 100%; padding: 1rem 1.2rem; border-radius: 16px; background: var(--bad-soft); box-shadow: inset 0 0 0 1.5px var(--bad); }
.confirm p { font-weight: 600; }
.confirm .actions { margin: 0.9rem 0 0; }

/* reading: a slim exam bar that stays in view (progress, segments, optional clock) */
.qbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.reading-view > .qhead { position: sticky; top: 68px; z-index: 5; margin: 0 -16px; padding: 0.55rem 16px 0.7rem; background: var(--page); box-shadow: 0 1px 0 var(--line); }
.progress-text { margin: 0; font-weight: 700; }
.clock { margin: 0; min-width: 5.6rem; padding: 0.3rem 0.85rem; border-radius: 999px; text-align: center; font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.clock.is-low { color: var(--warn); box-shadow: inset 0 0 0 2px var(--warn); }
.clock.is-up { color: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 2px var(--bad); font-size: 0.92rem; }
.passage, .prompt { background: var(--wash); border-radius: 1.25rem; padding: 1.1rem 1.25rem; box-shadow: inset 0 0 0 1px var(--line); font-size: 1.04rem; line-height: 1.62; }
.passage p + p, .prompt p + p { margin-top: 0.6rem; }
.prompt p.bullet { margin-left: 1rem; margin-top: 0.3rem; }
fieldset.mcq { border: 0; padding: 0; margin: 1.5rem 0 0; min-width: 0; }
fieldset.mcq legend { font-weight: 800; font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.01em; padding: 0; margin-bottom: 0.9rem; }
.mcq .opt { position: relative; display: block; min-height: 48px; padding: 0; margin-bottom: 0.6rem; font-size: 1rem; line-height: 1.4; border-radius: 1rem; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--page); transition: box-shadow 150ms var(--ease), background-color 150ms var(--ease); }
.mcq .opt:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.mcq .opt input[type="radio"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mcq .opt label { display: flex; align-items: center; gap: 0.75rem; min-height: 48px; margin: 0; padding: 0.7rem 1rem; font-weight: 500; cursor: pointer; }
.mcq .opt b { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--wash-2); font-size: 0.9rem; font-weight: 800; }
.mcq .opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.mcq .opt:has(input:checked) b { background: var(--accent); color: var(--accent-ink); }
.mcq .opt:has(input:checked) label { font-weight: 700; }
.mcq .opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.mcq .opt-card label { display: block; }
.mcq .opt-card strong { display: block; font-size: 1.05rem; }
.opt-note { display: block; margin-top: 0.2rem; font-weight: 400; font-size: 0.93rem; color: var(--ink-2); }

/* writing: the meter fills toward the official range (the two lines mark its ends) */
.answer { line-height: 1.55; }
.counter { margin-top: 0.6rem; }
.meter { position: relative; height: 0.65rem; border-radius: 999px; background: var(--wash-2); overflow: hidden; }
.meter-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left center; transform: scaleX(var(--m, 0)); transition: transform 150ms var(--ease); }
.meter-ok .meter-fill { background: var(--good); }
.meter-long .meter-fill { background: var(--bad); }
.meter-zone { position: absolute; top: 0; bottom: 0; left: calc(var(--z0, 0) * 100%); right: calc((1 - var(--z1, 1)) * 100%); box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink); }
.word-count { font-weight: 700; margin-top: 0.5rem; }
.word-ok { color: var(--good); }
.word-short, .word-long { color: var(--bad); }
.word-empty { color: var(--ink-2); }
.live-conn { margin-top: 0.25rem; }
.tally { padding: 0.6rem 0.9rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.brief-details > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.answer-echo { white-space: pre-wrap; background: var(--wash); border-radius: 1rem; padding: 0.9rem 1.1rem; }
fieldset.checklist { border: 0; border-radius: 1.25rem; padding: 0.9rem 1.2rem 0.5rem; margin: 1.25rem 0 0; min-width: 0; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
fieldset.checklist legend { font-weight: 800; padding: 0.15rem 0.7rem; background: var(--page); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.check-row { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.2rem 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.check-row:last-child { border-bottom: 0; }
.check-row .hint { grid-column: 2; margin: 0; }
.auto-row { grid-template-columns: 1.5rem 1fr; }
.auto-mark { font-weight: 800; font-size: 1.2rem; text-align: center; line-height: 1.4; }
.auto-ok { color: var(--good); }
.auto-no { color: var(--bad); }
.auto-text { margin: 0; }

/* speaking: one card per task, with its official time and a timer */
.task-cards { gap: 1.1rem; margin-top: 1.5rem !important; }
.task-card { padding: clamp(1rem, 3vw, 1.5rem); border-radius: 22px; background: var(--page); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.task-card > * + * { margin-top: 0.8rem; }
.task-head { display: flex; align-items: flex-start; gap: 0.9rem; }
.task-head h3 { margin: 0 !important; }
.task-num { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.task-time { margin: 0.25rem 0 0; font-size: 0.95rem; font-weight: 700; color: var(--accent-deep); }
.task-what { color: var(--ink-2); font-size: 0.95rem; }
.task-how { font-weight: 600; }
.timer { padding: 1rem 1.1rem; border-radius: 18px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
.timer-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; }
.timer-display { font-variant-numeric: tabular-nums; font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.timer-phase { font-weight: 700; color: var(--ink-2); }
.timer.is-prep .timer-phase { color: var(--warn); }
.timer.is-speak .timer-phase { color: var(--good); }
.timer-track { height: 0.45rem; margin: 0.8rem 0; border-radius: 999px; background: var(--wash-2); overflow: hidden; }
.timer-track > span { display: block; height: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 1000ms linear; }
.timer.is-prep .timer-track > span { background: var(--warn); }
.timer-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.check-practised { padding: 0.8rem 1rem; border-radius: 14px; background: var(--wash); margin-bottom: 0; }
.check-practised:has(input:checked) { background: var(--good-soft); }
.rubric-holder { margin: 0.5rem 0 1rem; }

/* ---------- results ---------- */
.stage-inner.results, .stage-inner.part-done, .stage-inner.report { max-width: 52rem; }
.callout { background: var(--accent-soft); border-radius: 1.25rem; padding: 1rem 1.25rem; font-size: 0.97rem; }
.note { background: var(--wash); border-radius: 1.25rem; padding: 1rem 1.25rem; box-shadow: inset 0 0 0 1px var(--line); }
.report-date { color: var(--ink-2); font-weight: 600; }
.score { display: flex; align-items: center; gap: 1.25rem; padding: 1.2rem 1.4rem; border-radius: 22px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
.score-big { font-size: clamp(2.75rem, 10vw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.score-strong .score-big { color: var(--good); }
.score-developing .score-big { color: var(--warn); }
.score-priority .score-big { color: var(--bad); }
.score-band { font-size: 1.15rem; }
.score-note { margin-top: 0.2rem; font-size: 0.92rem; color: var(--ink-2); }
.bar { background: var(--wash-2); border-radius: 999px; height: 0.7rem; overflow: hidden; }
.bar > span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(var(--p, 0)); animation: tc-grow 700ms 120ms var(--ease) both; }
@keyframes tc-grow { from { transform: scaleX(0); } }
.bar-strong > span { background: var(--good); }
.bar-developing > span { background: var(--warn); }
.bar-priority > span { background: var(--bad); }
.areas { list-style: none; padding: 0; }
.area-row + .area-row { margin-top: 1rem; }
.row-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.4rem; font-weight: 700; }
.lvl { font-weight: 800; }
.lvl-strong { color: var(--good); }
.lvl-developing { color: var(--warn); }
.lvl-priority { color: var(--bad); }
.label { font-weight: 800; }
.tip { display: block; color: var(--ink-2); font-size: 0.93rem; margin-top: 0.15rem; }
.drill { background: var(--accent-soft); border-radius: 1rem; padding: 0.8rem 1rem; }
.missed { padding-left: 1.2em; }
.missed li + li { margin-top: 0.8rem; }
details.review { border-radius: 1rem; padding: 0.3rem 1rem 0.6rem; margin-top: 0.7rem; background: var(--page); box-shadow: inset 0 0 0 1.5px var(--line-2); }
details.review > summary { min-height: 48px; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.review-mark { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-weight: 800; font-size: 0.85rem; color: var(--page); }
details.review-miss { box-shadow: inset 0 0 0 2px var(--bad); }
details.review-miss .review-mark { background: var(--bad); }
details.review-ok { box-shadow: inset 0 0 0 2px var(--good); }
details.review-ok .review-mark { background: var(--good); }
details.review > * + * { margin-top: 0.8rem; }
details.review > summary + * { margin-top: 0.4rem; }
.review-q { font-weight: 700; }
.notes { font-size: 0.95rem; color: var(--ink-2); }
.sum-rows { list-style: none; padding: 0; border-top: 1.5px solid var(--ink); }
.sum-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.sum-name { font-weight: 800; font-size: 1.08rem; }
.sum-val { font-weight: 800; font-size: 1.35rem; text-align: right; font-variant-numeric: tabular-nums; }
.sum-row > .lvl, .sum-row > .bar, .sum-row > .btn { grid-column: 1 / -1; }
.sum-row > .btn { justify-self: start; }
.sum-row.is-off .sum-val { font-size: 0.95rem; font-weight: 600; color: var(--ink-2); }
@media (min-width: 720px) {
  .sum-row { grid-template-columns: 9.5rem 5.5rem 10rem minmax(0, 1fr); }
  .sum-row > .lvl, .sum-row > .bar { grid-column: auto; }
  .sum-row > .btn { grid-column: 3 / -1; }
  .sum-val { text-align: left; }
  .sum-row.is-off .sum-val { grid-column: 2 / 4; }
}
.plan-wrap { margin-top: 2rem !important; padding: clamp(1.1rem, 3vw, 1.75rem); border-radius: 24px; background: var(--wash); }
.plan-wrap > h3 { margin-top: 0 !important; }
.plan { list-style: none; padding: 0; margin-top: 1rem; counter-reset: plan; display: grid; gap: 0.8rem; }
.plan-step { counter-increment: plan; position: relative; padding: 1.05rem 1.2rem 1.1rem 3.5rem; border-radius: 18px; background: var(--page); box-shadow: inset 0 0 0 1px var(--line); }
.plan-step::before { content: counter(plan); position: absolute; left: 1rem; top: 0.95rem; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 0.92rem; }
.plan-step + .plan-step { margin-top: 0; }
.plan-step > * + * { margin-top: 0.4rem; }
.plan-head { font-weight: 800; font-size: 1.07rem; letter-spacing: -0.01em; }
.plan-why { font-size: 0.92rem; color: var(--ink-2); }
.part-detail { border-top: 1px solid var(--line); }
.part-detail:last-of-type { border-bottom: 1px solid var(--line); }
.part-detail > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; list-style: none; font-weight: 800; font-size: 1.15rem; }
.part-detail > summary::-webkit-details-marker { display: none; }
.part-detail > summary::after { content: "+"; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--wash); font-weight: 500; font-size: 1.3rem; transition: transform 250ms var(--ease); }
.part-detail[open] > summary::after { transform: rotate(45deg); }
.part-detail > * + * { margin-top: 1rem; }
.part-detail[open] { padding-bottom: 1.5rem; }
.cta { border-top: 1.5px solid var(--ink); margin-top: 2.5rem !important; padding-top: 1.5rem; }
.offscreen { position: absolute; left: -9999px; }

/* the printable report: a plain document on screen, and on paper */
.report-doc { padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: 22px; background: var(--page); box-shadow: var(--tc-shadow-soft), inset 0 0 0 1px var(--line); }
.report-doc > * + * { margin-top: 1rem; }
.report-top { padding-bottom: 1rem; border-bottom: 1.5px solid var(--ink); }
.report-top > * + * { margin-top: 0.4rem; }
.report-brand { font-weight: 800; color: var(--accent-deep); }
.report-doc h3 { margin-top: 1.75rem !important; }
.report-table td, .report-table th { font-size: 0.97rem; }
.report-table tr.is-off th, .report-table tr.is-off td { color: var(--ink-2); font-weight: 500; }
.report-notes { font-size: 0.92rem; color: var(--ink-2); }
.report .plan-step { box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- landing: round-1 polish ---------- */
.tc-val { white-space: nowrap; }
.tc-table td.num { width: 1%; }
.tc-table td.num .src { display: inline-block; }
/* the three steps: compact on phones (number beside the heading), the theme's cards and drawn line on wide screens */
@media (max-width: 899px) {
  .tc-chain .step { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 1rem; padding: 1.1rem 1.2rem 1.2rem; }
  .tc-chain .step::before { grid-row: span 2; width: 2.6rem; height: 2.6rem; margin: 0; font-size: 1.05rem; }
  .tc-chain .step h3 { margin-bottom: 0.2rem; align-self: center; }
}
/* Archivo at 800 sets wide in WebKit: inline bold stays at 700 */
.tc-split .fact-box strong, .tc-price, .tc-table caption, .tc-sample-title { font-weight: 700; }
.tc-sample-ans span[lang="fr"], .notes span[lang="fr"], .tip span[lang="fr"] { color: var(--ink); font-weight: 600; }
.qa details p.tc-faq-a { padding-bottom: 10px; }

/* ---------- round-2 polish ---------- */
.mcq .opt-card label { padding-right: 3.2rem; }
.mcq .opt-card::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 1.3rem; height: 1.3rem; margin-top: -0.65rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); transition: box-shadow 150ms var(--ease); }
.mcq .opt-card:has(input:checked)::after { box-shadow: inset 0 0 0 0.42rem var(--accent); }
/* the optional "stage" select: a plain field with a drawn chevron (no grey system gradient on iPhone) */
select { -webkit-appearance: none; appearance: none; padding-right: 2.6rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%; background-size: 0.36rem 0.36rem, 0.36rem 0.36rem; background-repeat: no-repeat; }
@media (max-width: 479px) {
  .coursebar-in { gap: 0.5rem; }
  .coursenav { flex-wrap: nowrap; gap: 0.75rem; font-size: 0.95rem; }
  .lang-opt { padding: 0 0.75rem; font-size: 0.9rem; min-height: 2.4rem; }
}
.score-est { margin-top: 0.15rem; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
.sum-name { font-weight: 700; }
.part-sum { font-weight: 700; }

/* ---------- round-3 polish ---------- */
main strong, .mcq .opt-card strong { font-weight: 700; }
.task-how { font-weight: 500; color: var(--ink); }
.meter-marks { position: relative; height: 1.1rem; margin-top: 0.2rem; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.meter-marks span { position: absolute; top: 0; transform: translateX(-50%); }
.meter-mark-min { left: calc(var(--z0, 0) * 100%); }
.meter-mark-max { left: calc(var(--z1, 1) * 100%); }
.word-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin-top: 0.35rem; }
.wc-n { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.wc-s { font-weight: 700; }
.report-table th, .report-table td { text-align: left; }
.report-table td:last-child { white-space: nowrap; }

/* ---------- round-4 polish ---------- */
.coursename, .coursenav a { white-space: nowrap; }
@media (max-width: 479px) { .coursename { display: none; } }
@media (min-width: 1000px) { .tc-hero .hero-grid { align-items: start; } .tc-hero .hero-copy { padding-top: clamp(1rem, 3vw, 2.5rem); } }

.lvl { font-weight: 700; }
.wc-u { font-weight: 600; color: var(--ink-2); margin-left: -0.3rem; }

/* ---------- TEF pieces (2026-10-31) ---------- */
/* gap-fill blank: a drawn gap; the underscores stay in the text for copy and screen readers */
.tc-blank { display: inline-block; min-width: 4.2em; margin: 0 0.15em; border-bottom: 2px solid var(--accent-deep); color: transparent; line-height: 1; vertical-align: baseline; user-select: all; }
mark .tc-blank { border-bottom-color: var(--ink); }
/* the document an exercise is about: the start of a news item, a statement, an ad */
.tc-docbox { padding: 1rem 1.15rem; border-radius: 18px; background: var(--page); box-shadow: inset 0 0 0 1.5px var(--line-2); line-height: 1.6; }
.tc-docbox h3, .tc-docbox h4 { font-size: 0.95rem; font-weight: 800; color: var(--accent-deep); margin-bottom: 0.4rem; }
.tc-docbox p + p { margin-top: 0.45rem; }
.stage-inner .tc-docbox > h3, .stage-inner .tc-docbox > h4, .task-card .tc-docbox > h4 { margin-top: 0; }
.tc-docs > .tc-docbox:only-child { grid-column: 1 / -1; }
.prompt + .tc-docbox, .tc-prompt + .tc-docs { margin-top: 0.8rem; }
.tc-ad { box-shadow: inset 0 0 0 2px var(--accent); }
.tc-ad p:first-of-type { font-weight: 800; font-size: 1.08rem; letter-spacing: -0.01em; }
/* section B: the friend's objections, each with a model reply behind a native button */
.tc-objections { padding: 1rem 1.15rem; border-radius: 18px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
.tc-objections h4 { font-size: 1rem; font-weight: 800; }
.tc-objections > * + * { margin-top: 0.6rem; }
.tc-objlist { list-style: none; padding: 0 !important; counter-reset: obj; display: grid; gap: 0.6rem; }
.tc-objlist li { counter-increment: obj; display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); column-gap: 0.7rem; padding: 0.75rem 0.9rem; border-radius: 14px; background: var(--page); box-shadow: inset 0 0 0 1px var(--line); }
.tc-objlist li::before { content: counter(obj); grid-row: span 2; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 0.9rem; }
.tc-obj { font-weight: 700; }
.tc-reply > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--accent-deep); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-deep) 40%, transparent); text-underline-offset: 3px; }
.tc-reply[open] > summary { text-decoration-color: var(--accent-deep); }
.tc-reply p { padding: 0.2rem 0 0.4rem; line-height: 1.6; }
/* landing: which column of the attestation Express Entry reads */
.tc-column { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.1rem, 3vw, 1.75rem); border-radius: 22px; background: var(--page); box-shadow: var(--tc-shadow-soft), inset 0 0 0 2px var(--accent); max-width: 52rem; }
.tc-column > * + * { margin-top: 0.6rem; }
.tc-column-lead { font-weight: 600; font-size: 1.05rem; }
.tc-column .facts li:first-child { border-top: 0; }
.tc-sheet-wide { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
/* the IRCC score table: five columns on wide screens, one card per NCLC level on phones */
.tc-grid td.num { width: auto; font-size: 1rem; white-space: nowrap; }
.tc-grid thead th { text-align: right; }
.tc-grid thead th:first-child { text-align: left; }
@media (max-width: 719px) {
  .tc-grid { position: relative; }
  .tc-grid thead { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tc-grid thead tr { display: block; width: 1px; overflow: hidden; }
  .tc-grid tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
  .tc-grid tbody th { grid-column: 1 / -1; padding: 0 0 0.35rem; border: 0; font-size: 1.05rem; }
  .tc-grid tbody td { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0; border: 0; text-align: left; }
  .tc-grid tbody td::before { content: attr(data-h); font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
  .tc-grid td.num { text-align: left; }
}
/* chart-style reading documents: one data line per row */
.tc-doc-chart p, .passage-chart p { padding: 0.3rem 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tc-doc-chart p:first-child, .passage-chart p:first-child { font-weight: 800; border-bottom-width: 1.5px; border-bottom-color: var(--ink); }
.tc-doc-chart p + p, .passage-chart p + p { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  @page { margin: 14mm; }
  .no-print, .hdr, .coursebar, .skip, .timer, .ftr, .legal-note, #live { display: none !important; }
  body { font-size: 10.5pt; background: var(--page); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .check-area { padding: 0; }
  .stage-inner { max-width: none; }
  .report-doc { padding: 0; box-shadow: none; border-radius: 0; }
  .plan-wrap { padding: 0; background: none; }
  .plan-step, .sum-row, tr, details.review, .area-row, .score { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .src { font-size: 8pt; }
}