/* Shared assessment components. The brand tokens mirror the home page. */
.ta-bank, .ta-test {
  --navy:oklch(22% 0.02 255);
  --navy-light:oklch(30% 0.025 255);
  --navy-dark:oklch(18% 0.02 255);
  --gold:oklch(48% 0.14 254);
  --gold-light:oklch(38% 0.13 254);
  --gold-pale:oklch(94% 0.03 254);
  --white:oklch(98% 0.008 85);
  --off-white:oklch(96% 0.01 85);
  --text-muted:oklch(46% 0.03 255);
  --border:oklch(22% 0.02 255 / 0.12);
  --ta-surface:var(--white);
  --ta-paper:var(--off-white);
  --ta-ink:var(--navy);
  --ta-muted:var(--text-muted);
  --ta-link:var(--gold);
  --ta-rule:var(--border);
  --ta-primary:var(--gold);
  background:var(--ta-paper);
}
.ta-bank .nav, .ta-test .nav { background:var(--navy); border-bottom-color:var(--ta-primary); }
.ta-bank .nav-brand em, .ta-test .nav-brand em, .ta-bank .hero h1 em, .ta-test .hero h1 em, .ta-bank .result-band, .ta-test .result-band { color:var(--ta-primary); }
.ta-bank .nav-brand svg line, .ta-test .nav-brand svg line { stroke:#b08d57; }
.ta-bank .nav-brand svg polygon, .ta-test .nav-brand svg polygon,
.ta-bank .nav-brand svg circle, .ta-test .nav-brand svg circle { fill:#b08d57; }
.ta-bank .hero, .ta-test .hero, .ta-test .results-hero { background:linear-gradient(160deg,#0f1c28 0%,#162a3d 40%,var(--navy) 100%); }
.ta-bank .hero-badge, .ta-test .hero-badge { color:var(--ta-primary); border-color:var(--ta-primary); background:oklch(48% 0.14 254 / .1); }
.ta-bank .grade-banner, .ta-test .grade-banner { background:var(--navy); color:#fff; border-bottom:2px solid var(--ta-primary); }
.ta-bank .footer, .ta-test .footer { background:var(--navy-dark); border-top-color:var(--ta-primary); }
.ta-test .btn-primary, .ta-test .btn-submit { background:var(--ta-primary); color:#fff; }
.ta-test .btn-primary:hover, .ta-test .btn-submit:hover { background:var(--gold-light); color:#fff; }
.ta-bank .nav-brand, .ta-test .nav-brand, .ta-bank .nav-pill, .ta-test .nav-pill { color:#fff; }
.ta-bank .hero::before, .ta-test .hero::before { background:radial-gradient(ellipse at 80% 40%,oklch(48% 0.14 254 / .08),transparent 65%); }
.ta-bank .stats { background:var(--navy); }
.ta-bank .stat-val { background:none; -webkit-text-fill-color:var(--ta-primary); color:var(--ta-primary); }
.ta-bank .stat-lbl, .ta-bank .footer, .ta-test .footer { color:#bdcbdc; }
.ta-bank .how-card, .ta-bank .conclusion, .ta-bank .conc-card, .ta-test .start-card, .ta-test .progress-wrap, .ta-test .level-box, .ta-test .recommendation, .ta-test .skill-diagnosis { background:var(--ta-surface); color:var(--ta-ink); border-color:var(--ta-rule); }
.ta-bank .how-card h2, .ta-bank .how-card li strong, .ta-bank .conclusion h2, .ta-bank .conc-card h3, .ta-test .level-box .score { color:var(--ta-ink); }
.ta-bank .how-card li, .ta-bank .conc-card p, .ta-bank .q-marks, .ta-bank .q-num, .ta-test .start-card p, .ta-test .progress-meta, .ta-test .level-box .lbl, .ta-test .level-box .status, .ta-test .q-topic { color:var(--ta-muted); }
.ta-test .q-header, .ta-test .name-input { background:var(--ta-paper); color:var(--ta-ink); }
.ta-test .btn-nav:not(.btn-next):not(.btn-submit), .ta-test .btn-bank, .ta-test .btn-print { background:var(--ta-surface); color:var(--ta-ink); border-color:var(--ta-rule); }
.ta-bank .notes-nav-link, .ta-test .notes-nav-link { background:var(--ta-surface); color:var(--ta-ink); border-color:var(--ta-rule); }
.ta-bank .notes-nav-link.active, .ta-test .notes-nav-link.active { background:var(--navy); color:#fff; border-color:var(--ta-primary); }
.ta-bank .back-to-topic a, .ta-test .recommendation a { color:var(--ta-link); }
.ta-notice { padding:16px 20px; margin:20px 0; border:1px solid var(--border); border-left:4px solid var(--gold); border-radius:12px; background:var(--white); color:var(--navy); line-height:1.7; }
.ta-source { display:block; margin:10px 0; font-size:13px; line-height:1.65; color:var(--navy); overflow-wrap:anywhere; }
.ta-source a { text-decoration:underline; text-underline-offset:3px; margin-right:14px; }
.ta-source-warning { border-left:3px solid var(--gold); padding-left:10px; }
.ta-diagram { display:block; margin:16px 0; padding:12px; border:1px solid var(--border); border-radius:12px; background:#fff; color:#1a2a3a; }
.ta-diagram svg, .ta-diagram img { display:block; width:100%; height:auto; max-height:440px; object-fit:contain; margin:0 auto; }
.ta-diagram figcaption { margin-top:12px; font-size:13px; line-height:1.6; color:#334155; }
.ta-diagram a { display:inline-block; margin-top:8px; color:#145daa; text-decoration:underline; }
.ta-diagram-sequence { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:14px; margin:16px 0; }
.ta-diagram-sequence .ta-diagram { margin:0; min-width:0; }
.ta-diagram-sequence .ta-diagram:last-child:nth-child(odd) { grid-column:1 / -1; }
.ta-memo-wrap { width:100%; overflow-x:auto; border:1px solid var(--border); border-radius:10px; margin-top:12px; }
.ta-memo { width:100%; table-layout:fixed; border-collapse:collapse; color:var(--navy); background:var(--white); font-size:14px; }
.ta-memo caption { text-align:left; padding:12px; font-weight:700; background:var(--off-white); }
.ta-memo th { text-align:left; background:var(--navy); color:var(--white); padding:10px 12px; }
.ta-memo td { vertical-align:top; padding:12px; border-bottom:1px solid var(--border); overflow-wrap:anywhere; line-height:1.85; }
.ta-memo th:last-child, .ta-memo td:last-child { width:90px; text-align:center; }
.ta-memo td:first-child > * { max-width:100%; }
.ta-memo .step-num { display:none; }
.ta-memo mjx-container, .ta-question mjx-container, .ta-review mjx-container { max-width:100%; overflow-x:auto; overflow-y:hidden; }
.ta-memo tfoot { font-weight:700; }
.ta-memo-note { font-size:12px; line-height:1.6; margin:8px 0; }
.ta-solution summary { cursor:pointer; padding:14px 0; font-weight:700; min-height:44px; }
.ta-bank .q-card { min-width:0; }
.ta-bank .q-body { min-width:0; overflow-wrap:anywhere; }
.ta-bank .q-meta { flex-wrap:wrap; }
.ta-bank .q-body mjx-container { max-width:100%; overflow-x:auto; overflow-y:hidden; }
.ta-bank .q-body svg { max-width:100%; height:auto; }
.ta-tools { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:20px 0; }
.ta-tools label { font-size:14px; font-weight:600; }
.ta-tools input, .ta-tools select { padding:10px; min-height:44px; max-width:100%; border:1px solid var(--border); border-radius:8px; color:var(--navy); background:var(--white); font:inherit; }
.ta-tools input { width:220px; }
.ta-tools label { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ta-reset-filters { min-height:44px; padding:10px 16px; border:1px solid var(--ta-rule); border-radius:8px; background:var(--ta-surface); color:var(--ta-ink); font:inherit; cursor:pointer; }
.ta-reset-filters:hover { border-color:var(--ta-link); }
.ta-bank [hidden] { display:none !important; }
.ta-choices { border:0; padding:0; margin:20px 0; min-width:0; }
.ta-choices legend { font-weight:700; margin-bottom:10px; }
.ta-choice { display:flex; align-items:flex-start; gap:12px; margin:10px 0; padding:14px; border:1px solid var(--border); border-radius:10px; min-height:48px; cursor:pointer; line-height:1.8; overflow-wrap:anywhere; }
.ta-choice input { margin-top:7px; width:18px; height:18px; accent-color:var(--gold); flex-shrink:0; }
.ta-choice > span { min-width:0; }
.ta-choice mjx-container { max-width:100%; overflow-x:auto; }
.ta-choice:has(input:checked:not(:disabled)) { border:2px solid var(--gold); }
.ta-choice-correct { border-color:#13733b; background:#edf7ef; color:#123d23; }
.ta-choice-wrong { border-color:#a72929; background:#fff0ed; color:#701d1d; }
.ta-choice.ta-choice-correct { border:2px solid #13733b; }
.ta-choice.ta-choice-wrong { border:2px solid #a72929; }
.ta-feedback { margin:16px 0; padding:16px; border-left:4px solid var(--gold); border-radius:8px; line-height:1.8; background:var(--off-white); color:var(--navy); }
.ta-feedback.correct { border-color:#13733b; }
.ta-feedback-explanation { margin-top:0.7rem; }
.ta-feedback-explanation > p { margin:0.45rem 0; }
.ta-feedback mjx-container[display="true"] { margin:0.75rem 0; max-width:100%; overflow-x:auto; overflow-y:hidden; }
.ta-memo td:first-child mjx-container[display="true"] { margin:0.45rem 0; }
.ta-feedback.wrong { border-color:#a72929; }
.ta-question:focus, .ta-feedback:focus { outline:none; }
.ta-review { padding:16px; margin:14px 0; border:1px solid var(--border); border-radius:12px; background:var(--white); color:var(--navy); overflow-wrap:anywhere; }
.ta-review summary { cursor:pointer; font-weight:700; min-height:44px; }
.ta-progress { font-size:14px; margin:12px 0; }
.ta-actions { display:flex; gap:12px; flex-wrap:wrap; margin:16px 0; }
.ta-zoom { width:min(1000px,96vw); max-height:94dvh; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--white); color:var(--navy); }
.ta-zoom::backdrop { background:rgb(10 20 30 / .75); }
.ta-zoom .ta-diagram svg, .ta-zoom .ta-diagram img { max-height:none; }
.ta-enlarge, .ta-zoom > form .btn-nav { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 14px; border:1px solid var(--navy); border-radius:8px; background:var(--white); color:var(--navy); font:700 13px/1.2 'DM Sans',sans-serif; cursor:pointer; }
.ta-enlarge { margin-top:10px; }
.ta-enlarge:hover, .ta-zoom > form .btn-nav:hover { background:var(--navy); color:var(--white); }
.ta-bank :focus-visible, .ta-test :focus-visible { outline:3px solid var(--ta-primary); outline-offset:4px; }
.ta-test .screen { min-width:0; }
.ta-test #questionContainer { min-width:0; }
.ta-test .question-card { min-width:0; }
.ta-test .ta-question > h2, .ta-test .ta-question > .ta-source, .ta-test .ta-question > form, .ta-test .ta-question > .ta-diagram, .ta-test .ta-question > .ta-feedback { margin-left:20px; margin-right:20px; }
.ta-test .ta-question > h2 { margin-top:20px; }
.ta-test .ta-question > .ta-feedback, .ta-test .ta-question > form { margin-bottom:20px; }
.ta-bank .ta-source, .ta-test .ta-source { color:var(--ta-muted); }
.ta-bank .ta-source a, .ta-test .ta-source a, .ta-test .ta-feedback a, .ta-test .ta-review a { color:var(--ta-link); }
.ta-bank .ta-notice, .ta-bank .ta-memo, .ta-test .ta-feedback, .ta-test .ta-review, .ta-bank .ta-zoom, .ta-test .ta-zoom { color:var(--ta-ink); background:var(--ta-surface); }
.ta-bank .ta-memo th { color:#fff; background:var(--navy); }
.ta-bank .ta-memo caption, .ta-test .ta-feedback { background:var(--ta-paper); }
.ta-bank .ta-memo-wrap, .ta-bank .ta-memo td { border-color:var(--ta-rule); }
html.es-dark .ta-bank, html.es-dark .ta-test { --ta-surface:#1c2c3c; --ta-paper:#142231; --ta-ink:#e4edf7; --ta-muted:#bdcbdc; --ta-link:#a8caf5; --ta-rule:#546477; }
html.es-dark .ta-bank .ta-tools input, html.es-dark .ta-bank .ta-tools select, html.es-dark .ta-test .ta-question { color:var(--ta-ink); background:var(--ta-surface); }
html.es-dark .ta-test .ta-choice:not(.ta-choice-correct):not(.ta-choice-wrong) { color:var(--ta-ink); background:var(--ta-paper); }
html.es-dark .ta-bank .ta-diagram, html.es-dark .ta-test .ta-diagram { background:#fff; color:#1a2a3a; }
html.es-dark .ta-bank .ta-diagram figcaption, html.es-dark .ta-test .ta-diagram figcaption { color:#334155; }
html.es-dark .ta-test .btn-primary, html.es-dark .ta-test .btn-submit { color:#fff; }
html.es-dark .ta-bank .how-card h2, html.es-dark .ta-bank .how-card li strong, html.es-dark .ta-bank .conclusion h2, html.es-dark .ta-bank .conc-card h3, html.es-dark .ta-test .level-box .score { color:var(--ta-ink); }
html.es-dark .ta-test .btn-nav:not(.btn-next):not(.btn-submit), html.es-dark .ta-test .btn-bank, html.es-dark .ta-test .btn-print { color:var(--ta-ink); }
html.es-dark .ta-bank .ta-enlarge, html.es-dark .ta-test .ta-enlarge { background:#fff; color:#1a2a3a; border-color:#1a2a3a; }
html.es-dark .ta-bank .ta-enlarge:hover, html.es-dark .ta-test .ta-enlarge:hover { background:#1a2a3a; color:#fff; }
@media(max-width:600px) {
  .ta-memo th:last-child, .ta-memo td:last-child { width:65px; }
  .ta-memo td, .ta-memo th { padding:8px; }
  .ta-diagram { padding:6px; }
  .ta-diagram svg, .ta-diagram img { max-height:none; }
  .ta-diagram-sequence { grid-template-columns:1fr; }
  .ta-diagram-sequence .ta-diagram:last-child:nth-child(odd) { grid-column:auto; }
  .ta-tools { align-items:stretch; }
  .ta-tools label, .ta-tools input { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .ta-test .screen { animation:none; } }
@media print {
  .ta-tools, .ta-actions, .ta-test #startScreen, .ta-test #quizScreen, .ta-test .quiz-nav { display:none !important; }
  .ta-bank .ta-solution > * { display:block !important; }
  .ta-diagram, .ta-memo tr { break-inside:avoid; }
  .ta-memo-wrap, .ta-memo mjx-container { overflow:visible; }
  .ta-bank .ta-memo, .ta-bank .ta-memo caption, .ta-bank .ta-memo th { background:#fff; color:#000; }
  .ta-bank .ta-memo th { border-bottom:1px solid #000; }
  .ta-enlarge, .ta-zoom { display:none !important; }
}