/* ============================================
   Accessibility Training — course styles
   Layers on ../css/style.css. Tokens mirror the site's hex values so the
   course looks native; --t- prefix avoids collisions with future site tokens.
   ============================================ */

/* --- 1. Tokens --- */
:root {
  --t-text: #1a1a2e;
  --t-heading: #1F2547;
  --t-body: #374151;
  --t-muted: #6b7280;
  --t-brand: #1a56db;
  --t-brand-hover: #0e3fa1;
  --t-border: #e5e7eb;
  --t-border-soft: #EEF1FB;
  --t-surface: #f9fafb;
  --t-tint: #E8EEFF;
  --t-pass: #0d7439;
  --t-pass-bg: #dff3e6;
  --t-fail: #b91c1c;
  --t-fail-bg: #fee2e2;
  --t-warn: #8a4b00;
  --t-warn-bg: #fbeada;
  --t-radius: 0.75rem;
  --t-header-h: 5rem;
  --t-target: 2.75rem;
  --t-card: #fff;
  --t-tint-border: #c7d6f8;
  --t-pass-soft: #f6fcf8;
  --t-fail-soft: #fffafa;
  --t-code-bg: #1a1a2e;
  --t-code-text: #e5e7eb;
  --t-shadow: rgba(31, 37, 71, 0.12);
  --t-shadow-strong: rgba(31, 37, 71, 0.16);
  --t-apple-bg: #000;
  --t-apple-fg: #fff;
  --t-apple-hover: #1a1a1a;
  --t-google-bg: #fff;
  --t-google-fg: #1f1f1f;
  --t-google-border: #747775;
  --t-google-hover: #f2f2f2;
}

/* Dark palette: the same pairs checked for WCAG 2.2 AA contrast as the site tokens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-text: #e8eaf2;
    --t-heading: #eef0f7;
    --t-body: #cfd3df;
    --t-muted: #a3a8b8;
    --t-brand: #8ab4f8;
    --t-brand-hover: #b3cdfb;
    --t-border: #2a3050;
    --t-border-soft: #232845;
    --t-surface: #151930;
    --t-tint: #1e2a4f;
    --t-tint-border: #34407a;
    --t-pass: #7ee2a8;
    --t-pass-bg: #10291c;
    --t-fail: #ff8a8a;
    --t-fail-bg: #3a1414;
    --t-warn: #f5c26b;
    --t-warn-bg: #3a2a10;
    --t-card: #181c30;
    --t-pass-soft: #12211a;
    --t-fail-soft: #2a1414;
    --t-code-bg: #090b16;
    --t-shadow: rgba(0, 0, 0, 0.45);
    --t-shadow-strong: rgba(0, 0, 0, 0.6);
    --t-apple-bg: #fff;
    --t-apple-fg: #000;
    --t-apple-hover: #e5e7eb;
    --t-google-bg: #131314;
    --t-google-fg: #e3e3e3;
    --t-google-border: #8e918f;
    --t-google-hover: #1f1f20;
  }
}
:root[data-theme="dark"] {
    --t-text: #e8eaf2;
    --t-heading: #eef0f7;
    --t-body: #cfd3df;
    --t-muted: #a3a8b8;
    --t-brand: #8ab4f8;
    --t-brand-hover: #b3cdfb;
    --t-border: #2a3050;
    --t-border-soft: #232845;
    --t-surface: #151930;
    --t-tint: #1e2a4f;
    --t-tint-border: #34407a;
    --t-pass: #7ee2a8;
    --t-pass-bg: #10291c;
    --t-fail: #ff8a8a;
    --t-fail-bg: #3a1414;
    --t-warn: #f5c26b;
    --t-warn-bg: #3a2a10;
    --t-card: #181c30;
    --t-pass-soft: #12211a;
    --t-fail-soft: #2a1414;
    --t-code-bg: #090b16;
    --t-shadow: rgba(0, 0, 0, 0.45);
    --t-shadow-strong: rgba(0, 0, 0, 0.6);
    --t-apple-bg: #fff;
    --t-apple-fg: #000;
    --t-apple-hover: #e5e7eb;
    --t-google-bg: #131314;
    --t-google-fg: #e3e3e3;
    --t-google-border: #8e918f;
    --t-google-hover: #1f1f20;
}

/* --- 2. Page-level fixes for the course pages --- */
html { scroll-padding-top: var(--t-header-h); }
[hidden] { display: none !important; }
/* style.css's `.post-content a` colour beats `.btn--primary`; restore button text colours inside articles.
   Primary buttons stay blue in both schemes, so their text is always white (black on blue was 3.1:1 in dark mode). */
.post-content .btn--primary, .post-content .btn--primary:hover, .post-content .btn--primary:focus { color: #fff; }
.post-content .btn--apple, .post-content .btn--apple:hover, .post-content .btn--apple:focus { color: var(--t-apple-fg); }
.post-content .btn--outline { color: var(--t-brand); }
.post-content .btn--outline:hover, .post-content .btn--outline:focus { color: var(--c-on-brand, #fff); }
[tabindex="-1"], .quiz-q, .post-content h2[id], .post-content h3[id], .test-it, .paywall { scroll-margin-top: var(--t-header-h); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .skip-link, .progress-bar__fill, .lang-switcher__menu { transition: none; }
  .btn:hover { transform: none; }
}
@media (prefers-contrast: more) {
  .quiz-q, .test-it, .module-card, .paywall, .cert { border-width: 2px; border-color: currentColor; }
}

/* --- 3. Guide components (verbatim from help/mac.html; candidates for css/style.css) --- */
.guide-toc {
  background: var(--t-surface);
  border: 1px solid var(--t-border-soft);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  margin-bottom: 2.5rem;
}
.guide-toc h2 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}
.guide-toc ol {
  margin: 0;
  color: var(--t-body);
  line-height: 1.9;
}
.guide-note {
  background: var(--t-tint);
  border-left: 4px solid var(--t-brand);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  color: var(--t-body);
}
.guide-note strong { color: var(--t-heading); }
.guide-note p:last-child { margin-bottom: 0; }
.shortcut-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 0.5rem;
  font-size: 0.95rem;
}
.shortcut-table caption {
  text-align: left;
  font-weight: 600;
  color: var(--t-heading);
  margin-bottom: 0.5rem;
}
.shortcut-table th,
.shortcut-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--t-border-soft);
}
.shortcut-table th {
  background: var(--t-surface);
  color: var(--t-heading);
}
kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--t-tint);
  border: 1px solid var(--t-tint-border);
  border-radius: 0.35rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.9em;
  white-space: nowrap;
  color: var(--t-heading);
}
.table-scroll { overflow-x: auto; }
.shot { margin: 2rem 0 2.5rem; }
.shot__frame {
  border: 1px solid var(--t-border-soft);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 10px 30px var(--t-shadow);
  background: var(--t-card);
}
.shot__frame img { width: 100%; display: block; }
/* Diagrams: a landscape drawing, and a portrait one with larger text for phones. */
.lesson-figure .diagram { display: block; }
.lesson-figure .diagram--narrow { display: none; }
@media (max-width: 600px) {
  .lesson-figure .diagram--wide { display: none; }
  .lesson-figure .diagram--narrow { display: block; }
}
.shot figcaption { font-size: 0.9rem; color: var(--t-muted); margin-top: 0.75rem; line-height: 1.5; }
.step-list {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
}
.step-list > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 0.9rem;
}
.step-list > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--t-tint);
  color: var(--t-heading);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- 4. Lesson header --- */
.post-header__kicker {
  color: var(--t-brand);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}
.lesson-passed-note {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
  background: var(--t-pass-bg);
  color: var(--t-pass);
  font-weight: 600;
  font-size: 0.95rem;
}
.std-map {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 1.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--t-border-soft);
  border-radius: var(--t-radius);
  background: var(--t-surface);
}
.std-map > div { display: grid; grid-template-columns: 11rem 1fr; gap: 0.5rem; }
.std-map dt { font-weight: 600; color: var(--t-heading); }
.std-map dd { margin: 0; color: var(--t-body); }
@media (max-width: 600px) {
  .std-map > div { grid-template-columns: 1fr; gap: 0.1rem; }
}
.post-content pre {
  background: var(--t-code-bg);
  color: var(--t-code-text);
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.6;
}
.post-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
.post-content p code, .post-content li code, .post-content td code { background: var(--t-tint); padding: 0.05rem 0.35rem; border-radius: 0.3rem; color: var(--t-heading); }
.post-content blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 4px solid var(--t-border);
  color: var(--t-body);
  font-style: italic;
}
.post-content blockquote cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.9rem; color: var(--t-muted); }
.sources { font-size: 0.92rem; color: var(--t-muted); margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--t-border); }
.sources h2 { font-size: 1.05rem; margin-top: 0; }
.sources ul { padding-left: 1.25rem; }

/* --- 5. Test it with Accessibility Checker --- */
.test-it {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--t-border);
  border-left: 4px solid var(--t-brand);
  border-radius: 0 var(--t-radius) var(--t-radius) 0;
  background: var(--t-surface);
}
.test-it h2 { margin-top: 0; }
.tag-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--t-tint);
  color: var(--t-heading);
  font-size: 0.85rem;
  font-weight: 600;
}
.test-it__verdict { margin-top: 1.25rem; }
.chip {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  margin: 0 0.15rem;
  border-radius: 0.4rem;
  border: 1px solid var(--t-border);
  background: var(--t-card);
  font-weight: 600;
  font-size: 0.9rem;
}
.chip--pass { border-color: var(--t-pass); color: var(--t-pass); }
.chip--fail { border-color: var(--t-fail); color: var(--t-fail); }
.chip--na { border-color: var(--t-muted); color: var(--t-body); }
.test-it__help { font-size: 0.95rem; margin-bottom: 0; }

/* --- 6. Quiz --- */
.quiz { margin-top: 2.5rem; }
.quiz__passed-note {
  background: var(--t-pass-bg);
  color: var(--t-pass);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.quiz-q {
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  padding: 1.25rem 1.5rem 0.75rem;
  margin: 0 0 1.5rem;
  background: var(--t-card);
}
.quiz-q legend {
  font-weight: 600;
  color: var(--t-heading);
  line-height: 1.5;
  padding: 0 0.35rem;
}
.quiz-q__num { color: var(--t-brand); margin-right: 0.35rem; }
.quiz-q__hint { font-weight: 400; color: var(--t-muted); font-size: 0.92rem; }
.quiz-q__options { display: grid; gap: 0.25rem; margin: 0.5rem 0 0.25rem; }
.quiz-q__option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: var(--t-target);
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--t-body);
  line-height: 1.5;
  cursor: pointer;
}
.quiz-q__option:hover { background: var(--t-surface); }
.quiz-q__option:has(:focus-visible) { outline: 3px solid var(--t-brand); outline-offset: 0; }
.quiz-q__option input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--t-brand); }
.quiz-q--correct { border-color: var(--t-pass); background: var(--t-pass-soft); }
.quiz-q--incorrect { border-color: var(--t-fail); background: var(--t-fail-soft); }
.quiz-q__feedback {
  margin: 0.5rem 0 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: var(--t-surface);
  color: var(--t-body);
  line-height: 1.6;
}
.quiz-q--correct .quiz-q__feedback { background: var(--t-pass-bg); }
.quiz-q--incorrect .quiz-q__feedback { background: var(--t-fail-bg); }
.quiz-q__feedback p { margin: 0 0 0.5rem; }
.quiz-q__feedback p:last-child { margin-bottom: 0; }
.quiz-q__verdict { font-weight: 700; }
.quiz-q--correct .quiz-q__verdict { color: var(--t-pass); }
.quiz-q--incorrect .quiz-q__verdict { color: var(--t-fail); }
.quiz__result {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--t-radius);
  border: 2px solid var(--t-border);
  background: var(--t-surface);
}
.quiz__result h3 { margin-top: 0; }
.quiz__result p:last-child, .quiz__result ul:last-child { margin-bottom: 0; }
.quiz__result--pass { border-color: var(--t-pass); background: var(--t-pass-bg); }
.quiz__result--fail { border-color: var(--t-fail); background: var(--t-fail-bg); }
.quiz__result--error { border-color: var(--t-warn); background: var(--t-warn-bg); }
.quiz__result .btn { margin-top: 0.75rem; }
.quiz__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }

/* --- 7. Lesson navigation --- */
.lesson-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--t-border);
}
.lesson-nav a { color: var(--t-brand); text-decoration: none; font-weight: 600; padding: 0.5rem 0; display: inline-block; min-height: var(--t-target); }
.lesson-nav a:hover { text-decoration: underline; }
.lesson-nav__label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--t-muted); font-weight: 600; }
.lesson-nav__prev { grid-column: 1; }
.lesson-nav__up { grid-column: 2; text-align: center; }
.lesson-nav__next { grid-column: 3; text-align: right; }
.lesson-nav__help { grid-column: 1 / -1; font-size: 0.95rem; color: var(--t-body); margin: 0.5rem 0 0; }
@media (max-width: 600px) {
  .lesson-nav { grid-template-columns: 1fr; }
  .lesson-nav__prev, .lesson-nav__up, .lesson-nav__next { grid-column: 1; text-align: left; }
}

/* --- 8. Paywall --- */
.paywall {
  margin: 2.5rem 0;
  padding: 1.75rem;
  border: 2px solid var(--t-brand);
  border-radius: var(--t-radius);
  background: var(--t-tint);
}
.paywall h2 { margin-top: 0; }
.paywall__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1.25rem 0; }
.paywall__free { margin-bottom: 0; font-size: 0.95rem; }

/* --- 9. Course index --- */
.progress-summary {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  background: var(--t-surface);
}
.progress-summary p { margin: 0; color: var(--t-body); }
.progress-bar { height: 0.6rem; border-radius: 999px; background: var(--t-border); overflow: hidden; }
.progress-bar__fill { height: 100%; width: 0; background: var(--t-brand); transition: width 0.4s ease; }
.progress-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.btn--small { padding: 0.5rem 1rem; font-size: 0.9rem; }
.module-grid { display: grid; gap: 1.5rem; margin: 2rem 0; }
.module-card {
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  padding: 1.5rem 1.75rem;
  background: var(--t-card);
}
.module-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; }
.module-card h2, .module-card h3 { margin: 0; }
.module-card__kicker { color: var(--t-brand); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.25rem; }
.module-card__summary { color: var(--t-body); margin: 0.75rem 0 1rem; }
.module-card__status, .lesson-status, .badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--t-surface);
  color: var(--t-body);
  border: 1px solid var(--t-border);
  white-space: nowrap;
}
.badge--free { background: var(--t-pass-bg); color: var(--t-pass); border-color: var(--t-pass-bg); }
.badge--paid { background: var(--t-tint); color: var(--t-heading); border-color: var(--t-tint); }
/* The paid pill links to the plan page: same look, a link's affordances on hover and focus. */
a.badge--paid, .lesson-list a.badge--paid { display: inline-block; min-height: 1.5rem; font-weight: 600; color: var(--t-heading); text-decoration: none; }
a.badge--paid:hover, a.badge--paid:focus-visible, .lesson-list a.badge--paid:hover, .lesson-list a.badge--paid:focus-visible { text-decoration: underline; border-color: var(--t-brand); color: var(--t-brand); }
a.badge--paid:focus-visible { outline: 3px solid var(--t-brand); outline-offset: 2px; }
.module-card__status--partial { background: var(--t-tint); color: var(--t-heading); border-color: var(--t-tint); }
.module-card__status--complete, .lesson-status--passed { background: var(--t-pass-bg); color: var(--t-pass); border-color: var(--t-pass-bg); }
.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--t-border-soft);
}
.lesson-list a { color: var(--t-brand); font-weight: 500; text-decoration: none; min-height: var(--t-target); display: inline-flex; align-items: center; }
.lesson-list a:hover { text-decoration: underline; }
.lesson-list__meta { display: flex; gap: 0.5rem; align-items: center; color: var(--t-muted); font-size: 0.85rem; }
.module-card__actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.confirm-box {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--t-warn);
  border-radius: 0.5rem;
  background: var(--t-warn-bg);
}
.confirm-box h3 { margin-top: 0; font-size: 1.05rem; }
.confirm-box .btn { margin-right: 0.5rem; }
.status-line { min-height: 1.5rem; color: var(--t-body); }

/* --- 10. Account page --- */
.account-panel {
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  padding: 1.5rem 1.75rem;
  background: var(--t-surface);
  margin: 1.5rem 0;
}
.account-panel h2 { margin-top: 0; }
.account-panel dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 1rem 0; }
.account-panel dt { font-weight: 600; color: var(--t-heading); }
.account-panel dd { margin: 0; color: var(--t-body); }
.btn--apple {
  background: var(--t-apple-bg);
  color: var(--t-apple-fg);
  border-color: var(--t-apple-bg);
}
.btn--apple:hover, .btn--apple:focus { background: var(--t-apple-hover); border-color: var(--t-apple-hover); color: var(--t-apple-fg); }
.btn--apple svg { width: 1.1em; height: 1.1em; fill: currentColor; }

/* --- 11. Certificate --- */
.cert-form { max-width: 32rem; }
.cert-form label { display: block; font-weight: 600; color: var(--t-heading); margin-bottom: 0.35rem; }
.cert-form input[type="text"] {
  width: 100%;
  font: inherit;
  padding: 0.65rem 0.8rem;
  border: 2px solid var(--t-border);
  border-radius: 0.5rem;
  color: var(--t-text);
  background: var(--t-card);
}
.cert-form input[type="text"]:focus-visible { border-color: var(--t-brand); outline: 3px solid var(--t-brand); outline-offset: 2px; }
.field-error { color: var(--t-fail); font-weight: 600; margin: 0.4rem 0 0; }
.cert {
  color-scheme: light;
  --t-text: #1a1a2e;
  --t-heading: #1F2547;
  --t-body: #374151;
  --t-muted: #6b7280;
  --t-pass: #0d7439;
  margin: 2rem 0;
  padding: 2.5rem 3rem;
  border: 6px double var(--t-text);
  border-radius: 0.25rem;
  background: #fff;
  color: var(--t-text);
  text-align: center;
}
.cert__issuer { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.85rem; color: var(--t-muted); margin: 0 0 1rem; }
.cert h1, .cert h2 { margin: 0 0 1rem; }
.cert__lead { color: var(--t-body); margin: 0.5rem 0; }
.cert__name { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; margin: 0.5rem 0; color: var(--t-heading); word-break: break-word; }
.cert__module { font-size: 1.3rem; font-weight: 600; margin: 0.5rem 0; }
.cert__scope { color: var(--t-body); max-width: 40rem; margin: 0.5rem auto 1.5rem; }
.cert__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; margin: 1rem 0; }
.cert__meta div { display: flex; gap: 0.4rem; }
.cert__meta dt { font-weight: 600; }
.cert__meta dd { margin: 0; }
.cert__verify { font-size: 0.85rem; color: var(--t-muted); margin: 1.25rem auto 0; max-width: 44rem; word-break: break-all; }
.cert__disclaimer { font-size: 0.8rem; color: var(--t-muted); margin: 1rem auto 0; max-width: 44rem; }
.cert-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }
@media (max-width: 600px) { .cert { padding: 1.5rem 1rem; } }

/* --- 12. Verify page --- */
.verify-form textarea {
  width: 100%;
  min-height: 6rem;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  padding: 0.65rem 0.8rem;
  border: 2px solid var(--t-border);
  border-radius: 0.5rem;
}
.verify-result { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--t-radius); border: 2px solid var(--t-border); }
.verify-result--valid { border-color: var(--t-pass); background: var(--t-pass-bg); }
.verify-result--invalid { border-color: var(--t-fail); background: var(--t-fail-bg); }
.verify-result h2 { margin-top: 0; }

/* --- 13. Print --- */
@media print {
  .breadcrumb, .lesson-nav, .quiz__actions, .cert-actions, .skip-link, .guide-toc, .paywall__actions, .progress-actions { display: none !important; }
  .post-header { background: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}
body[data-page="certificate"] {
  @media print {
    @page { size: A4 landscape; margin: 12mm; }
    .post-header, .cert-note, .cert-form { display: none !important; }
    .cert {
      margin: 0;
      min-height: calc(100vh - 24mm);
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-radius: 0;
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }
  }
}

/* --- 14. Course landing page --- */
.hero__note { font-size: 0.95rem; color: var(--t-body); margin: 1rem 0 0; max-width: 540px; }
.hero__note a { color: var(--t-brand); }
.hero .btn--apple { min-height: 3rem; }

/* Sign in with Apple, following Apple's Human Interface Guidelines: black (or white) button,
   system font, the Apple logo at the left, title case label, at least 44 px tall. */
.btn--apple, .btn--apple-light {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  min-height: var(--t-target);
  padding: 0.6rem 1.35rem 0.6rem 1.1rem;
  border-radius: 0.6rem;
  gap: 0.55rem;
  white-space: nowrap;
}
.btn--apple { background: var(--t-apple-bg); color: var(--t-apple-fg); border-color: var(--t-apple-bg); }
.btn--apple:hover, .btn--apple:focus { background: var(--t-apple-hover); border-color: var(--t-apple-hover); color: var(--t-apple-fg); }
.btn--apple svg, .btn--apple-light svg { width: 1.25em; height: 1.25em; fill: currentColor; flex: 0 0 auto; margin-top: -0.1em; }
.btn--google, .btn--google-light {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0;
  min-height: var(--t-target);
  padding: 0.6rem 1.35rem 0.6rem 1.1rem;
  border-radius: 0.6rem;
  gap: 0.65rem;
}
.btn--google { background: var(--t-google-bg); color: var(--t-google-fg); border-color: var(--t-google-border); }
.btn--google:hover, .btn--google:focus { background: var(--t-google-hover); border-color: var(--t-google-border); color: var(--t-google-fg); }
.btn--google svg, .btn--google-light svg { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.btn--google-light { background: #fff; color: #1f1f1f; border-color: #fff; }
.btn--google-light:hover, .btn--google-light:focus { background: #f2f2f2; border-color: #f2f2f2; color: #1f1f1f; }
.btn--google[aria-disabled="true"], .btn--google-light[aria-disabled="true"] { opacity: 0.7; }
.section--dark .btn--google-light, .section--dark .btn--google-light:hover { color: #1f1f1f; }
.post-content .btn--google, .post-content .btn--google:hover, .post-content .btn--google:focus { color: var(--t-google-fg); }
.hero .btn--google { min-height: 3rem; }
.btn--apple-light { background: #fff; color: #000; border-color: #fff; }
.btn--apple-light:hover, .btn--apple-light:focus { background: #f3f4f6; border-color: #f3f4f6; color: #000; }
.btn--apple[aria-disabled="true"], .btn--apple-light[aria-disabled="true"] { opacity: 0.7; }
.section--dark .btn--apple-light, .section--dark .btn--apple-light:hover { color: #000; }
.btn--outline-light { color: #fff; border-color: #fff; }
.btn--outline-light:hover, .btn--outline-light:focus { background: #fff; color: #1a1a2e; border-color: #fff; }
.section--dark .btn--white, .cta-section .btn--white { color: #1a1a2e; }
.signed-in-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--t-target);
  padding: 0.5rem 1rem;
  border-radius: 0.6rem;
  background: var(--t-card);
  border: 1px solid var(--t-border);
  color: var(--t-body);
  font-weight: 500;
}
.signed-in-chip a { color: var(--t-brand); }

/* Hero illustration (decorative) */
.course-preview { position: relative; width: 100%; max-width: 420px; }
.course-preview__card {
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 20px 50px var(--t-shadow-strong);
}
.course-preview__kicker { color: var(--t-brand); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.25rem; }
.course-preview__title { font-weight: 700; font-size: 1.35rem; color: var(--t-heading); margin: 0 0 1rem; }
.course-preview__steps { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.6rem; color: var(--t-body); }
.course-preview__steps li { display: flex; align-items: center; gap: 0.7rem; }
.course-preview__tick {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75rem; height: 1.75rem; padding: 0 0.4rem; border-radius: 999px;
  background: var(--t-pass-bg); color: var(--t-pass); font-weight: 700; font-size: 0.85rem;
}
.course-preview__tick--live { background: var(--t-tint); color: var(--t-brand); }
.course-preview__bar { height: 0.5rem; border-radius: 999px; background: var(--t-border); overflow: hidden; }
.course-preview__bar span { display: block; height: 100%; background: var(--t-brand); }
.course-preview__foot { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--t-muted); }
.course-preview__cert {
  position: absolute; right: -1.25rem; bottom: -1.75rem;
  background: var(--t-card); border: 3px double var(--t-text); border-radius: 0.4rem;
  padding: 0.75rem 1rem; box-shadow: 0 12px 30px var(--t-shadow-strong);
  transform: rotate(-3deg);
}
.course-preview__cert-title { margin: 0; font-weight: 700; font-size: 0.9rem; color: var(--t-heading); }
.course-preview__cert-id { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--t-pass); font-weight: 600; }
@media (max-width: 991px) {
  .hero__grid { grid-template-columns: 1fr; }
  .course-preview { margin: 2.5rem auto 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .course-preview__cert { transform: none; } }

/* Steps and plans */
.steps-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: none; }
.step-card { position: relative; background: var(--t-card); border: 1px solid var(--t-border); border-radius: 1rem; padding: 2rem; }
.step-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--t-tint); color: var(--t-heading);
  font-weight: 700; margin-bottom: 1rem;
}
.step-card h3 { margin: 0 0 0.5rem; }
.step-card p { color: var(--t-muted); margin: 0; line-height: 1.6; }
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 960px; margin: 0 auto; }
.plan-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  padding: 2rem;
  color: #d1d5db;
}
.plan-card--featured { border-color: #93b4f4; box-shadow: 0 0 0 1px #93b4f4 inset; }
.plan-card__kicker { color: #93b4f4; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.5rem; }
.plan-card h3 { color: #fff; margin: 0 0 1rem; }
.plan-card__list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.6rem; }
.plan-card__list li { padding-left: 1.6rem; position: relative; line-height: 1.5; }
.plan-card__list li::before { content: '\2713'; position: absolute; left: 0; color: #93b4f4; font-weight: 700; }
.plan-card__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.plan-card__note { margin: 1.25rem 0 0; font-size: 0.9rem; color: #9ca3af; }
.section--gray .module-card { background: var(--t-card); }
@media (max-width: 991px) { .steps-grid { grid-template-columns: 1fr; } .plan-grid { grid-template-columns: 1fr; } }

/* primary buttons inside dark sections: style.css's `.section--dark a` would turn the label light blue (2.96:1 on blue) */
.section--dark .btn--primary, .section--dark .btn--primary:hover, .section--dark .btn--primary:focus { color: #fff; }

/* --- 15. Upgrade page --- */
.plan-options { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.plan-option {
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  padding: 1.5rem;
  background: var(--t-card);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.plan-option--featured { border-color: var(--t-brand); box-shadow: 0 0 0 1px var(--t-brand) inset; }
.plan-option__name { font-weight: 700; font-size: 1.15rem; color: var(--t-heading); margin: 0; }
.plan-option__price { font-size: 1.75rem; font-weight: 700; color: var(--t-text); margin: 0; }
.plan-option__period { font-size: 0.95rem; color: var(--t-muted); font-weight: 500; }
.plan-option__desc { color: var(--t-body); margin: 0 0 0.5rem; flex: 1; }
.plan-option .btn { align-self: flex-start; }
.upgrade-note { font-size: 0.95rem; color: var(--t-body); }

/* --- 16. Daily practice (practice.html) and the course page's practice card --- */
:root {
  --t-on-pass: #fff;
  --t-word-bg: #fde68a;
  --t-word-text: #1a1a2e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --t-on-pass: #0f1222; --t-word-bg: #8ab4f8; --t-word-text: #0f1222; }
}
:root[data-theme="dark"] { --t-on-pass: #0f1222; --t-word-bg: #8ab4f8; --t-word-text: #0f1222; }

.practice-panel {
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  padding: 1.5rem 1.75rem;
  background: var(--t-surface);
  margin: 1.5rem 0;
}
.practice-panel > h2 { margin-top: 0; }
.today__xp { font-size: 1.35rem; font-weight: 700; color: var(--t-heading); margin: 0 0 0.5rem; }
.today__note { margin: 0.5rem 0 1rem; }
.goal-bar, .session__progress { height: 0.75rem; border-radius: 999px; background: var(--t-border); overflow: hidden; }
.goal-bar__fill, .session__fill { height: 100%; width: 0; background: var(--t-pass); border-radius: inherit; transition: width 0.3s ease; }
.session__fill { background: var(--t-brand); }
.today__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.today__stats div { background: var(--t-card); border: 1px solid var(--t-border); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.today__stats dt { font-size: 0.85rem; color: var(--t-muted); font-weight: 600; }
.today__stats dd { margin: 0.15rem 0 0; font-size: 1.2rem; font-weight: 700; color: var(--t-heading); }
.today__week-heading { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.week { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.week__day { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.week__name { font-size: 0.8rem; color: var(--t-muted); font-weight: 600; }
.week__mark {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--t-border); background: var(--t-card); color: var(--t-on-pass); font-weight: 700;
}
.week__day--met .week__mark { background: var(--t-pass); border-color: var(--t-pass); }
.week__day--frozen .week__mark { background: var(--t-tint); border-color: var(--t-brand); color: var(--t-brand); }
.week__day--today .week__mark { border-color: var(--t-brand); border-width: 3px; }

.deck-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; }
.deck {
  background: var(--t-card); border: 1px solid var(--t-border); border-left: 0.5rem solid var(--band, var(--t-brand));
  border-radius: 0.5rem; padding: 1rem 1.25rem;
  display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: center;
}
.deck__title { margin: 0; font-size: 1.1rem; grid-column: 1; }
.deck__desc, .deck__counts { margin: 0; grid-column: 1; }
.deck__counts { color: var(--t-muted); font-size: 0.9rem; }
.deck .btn { grid-column: 2; grid-row: 1 / span 3; min-height: var(--t-target); }
@media (max-width: 480px) { .deck { grid-template-columns: 1fr; } .deck .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.5rem; } }

.goal-options { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.goal-options legend { font-weight: 600; color: var(--t-heading); margin-bottom: 0.5rem; padding: 0; }
.goal-option {
  display: flex; align-items: center; gap: 0.75rem; min-height: var(--t-target);
  padding: 0.5rem 0.75rem; border: 1px solid var(--t-border); border-radius: 0.5rem; background: var(--t-card); cursor: pointer;
}
.goal-option input { width: 1.25rem; height: 1.25rem; accent-color: var(--t-brand); flex: 0 0 auto; }
.goal-option:has(:checked) { border-color: var(--t-brand); box-shadow: 0 0 0 1px var(--t-brand) inset; }
.goal-option:has(:focus-visible) { outline: 3px solid var(--t-brand); outline-offset: 2px; }
.goal-option strong { margin-right: 0.35rem; color: var(--t-heading); }

.reminder-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.reminder-row label { font-weight: 600; color: var(--t-heading); }
.reminder-row input[type="time"] {
  min-height: var(--t-target); padding: 0.4rem 0.6rem; font: inherit; color: var(--t-text);
  background: var(--c-input-bg, #fff); border: 2px solid var(--c-input-border, #6b7280); border-radius: 0.4rem;
}
.reminder-row input[type="time"]:focus-visible { outline: 3px solid var(--t-brand); outline-offset: 2px; }
.reminder-row input[aria-invalid="true"] { border-color: var(--t-fail); }

.session { margin: 1.5rem 0; }
.session__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.session__bar h2 { margin: 0; }
.session__position { margin: 0.75rem 0 0.4rem; font-weight: 600; color: var(--t-heading); }
.session__goto { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0 0; }
.session__goto label { font-weight: 600; color: var(--t-heading); }
.session__goto select, .listen-field select {
  min-height: var(--t-target); padding: 0.3rem 0.5rem; font: inherit; color: var(--t-text);
  background: var(--c-input-bg, #fff); border: 2px solid var(--c-input-border, #6b7280); border-radius: 0.4rem;
}
.session__goto select:focus-visible, .listen-field select:focus-visible { outline: 3px solid var(--t-brand); outline-offset: 2px; }

.flashcard { margin: 1.25rem 0; border: 1px solid var(--t-border); border-radius: var(--t-radius); background: var(--t-card); overflow: hidden; box-shadow: 0 6px 20px var(--t-shadow); }
.flashcard__band { background: var(--band, #1A56DB); color: #fff; padding: 0.6rem 1.25rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; justify-content: space-between; font-weight: 600; font-size: 0.95rem; }
.flashcard__body { padding: 1.25rem 1.5rem 1rem; }
.flashcard__label { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-muted); }
.flashcard__front { margin: 0.25rem 0 0.75rem; font-size: 1.45rem; line-height: 1.3; color: var(--t-heading); }
.flashcard__num { color: var(--t-brand); margin-right: 0.15rem; }
.flashcard__back { border-top: 1px solid var(--t-border); padding-top: 0.75rem; margin-top: 0.5rem; }
.flashcard__answer { font-size: 1.1rem; color: var(--t-text); margin: 0.25rem 0 0.75rem; }
.flashcard__en { color: var(--t-body); font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; }
.flashcard__en-label { font-weight: 600; }
.flashcard__clause { background: var(--t-tint); border: 1px solid var(--t-tint-border); border-radius: 999px; padding: 0.05rem 0.6rem; color: var(--t-text); }
.flashcard__box { margin: 0.75rem 0 0; color: var(--t-muted); font-size: 0.85rem; }
.flashcard__back:not([hidden]) { animation: tk-reveal 0.2s ease-out; }
@keyframes tk-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .flashcard__back:not([hidden]) { animation: none; } .goal-bar__fill, .session__fill { transition: none; } }

.session__actions { display: grid; gap: 0.75rem; }
.session__flip { justify-self: start; }
.session__answers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.answer { justify-content: center; min-height: 3.25rem; font-size: 1.05rem; }
.post-content .answer--gotit, .post-content .answer--gotit:hover, .post-content .answer--gotit:focus { background: var(--t-pass); border-color: var(--t-pass); color: var(--t-on-pass); }
.post-content .answer--notyet, .post-content .answer--notyet:hover, .post-content .answer--notyet:focus { background: var(--t-card); border-color: var(--t-warn); color: var(--t-warn); }
.answer:focus-visible, .listen-btn:focus-visible { outline: 3px solid var(--t-brand); outline-offset: 3px; }
.summary__xp { font-size: 1.2rem; font-weight: 700; color: var(--t-pass); }

.goal-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 60;
  margin: 0; padding: 0.85rem 1.25rem; border-radius: 0.75rem; max-width: calc(100vw - 2rem);
  background: var(--t-pass); color: var(--t-on-pass); font-weight: 700; box-shadow: 0 8px 24px var(--t-shadow-strong);
}
.listen-open .goal-toast { bottom: 7.5rem; }

.practice-teaser { margin: 1rem 0; }
.practice-teaser__stats { font-size: 1.05rem; }
.quiz__xp { font-weight: 600; }

/* --- 17. Listening on lesson pages --- */
.listen-start { margin: 1rem 0 0; }
.listen-start .btn svg { flex: 0 0 auto; }
html.listen-open { scroll-padding-bottom: 8rem; }
html.listen-open body { padding-bottom: 7rem; }
.listen-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--t-card); color: var(--t-text);
  border-top: 1px solid var(--t-border); box-shadow: 0 -6px 20px var(--t-shadow);
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
}
.listen-bar__inner { max-width: 60rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.listen-bar__now { min-width: 0; flex: 1 1 14rem; }
.listen-bar__section { margin: 0; font-weight: 700; color: var(--t-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listen-bar__where { margin: 0; font-size: 0.85rem; color: var(--t-muted); }
.listen-bar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.listen-btn {
  min-width: var(--t-target); min-height: var(--t-target); padding: 0 0.6rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  font: inherit; font-weight: 600; color: var(--t-brand); background: transparent;
  border: 2px solid var(--t-border); border-radius: 0.5rem; cursor: pointer;
}
.listen-btn:hover { border-color: var(--t-brand); }
.listen-btn:disabled { color: var(--t-muted); cursor: default; opacity: 0.6; }
.listen-btn--main { background: var(--c-btn-bg, #1a56db); border-color: var(--c-btn-bg, #1a56db); color: #fff; padding: 0 1rem; }
.listen-btn--main:hover { background: var(--c-btn-bg-hover, #0e3fa1); border-color: var(--c-btn-bg-hover, #0e3fa1); }
.listen-field { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--t-muted); }
.listen-field--voice select { max-width: 12rem; }
.listen-current { background: var(--t-tint); box-shadow: 0 0 0 0.35rem var(--t-tint); border-radius: 0.25rem; }
::highlight(listen-word) { background-color: var(--t-word-bg); color: var(--t-word-text); }
@media (max-width: 600px) {
  .listen-bar__controls { width: 100%; justify-content: space-between; }
  .listen-field--voice { display: none; }
  .listen-field__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .listen-bar__controls { gap: 0.3rem; }
  .listen-btn--main { padding: 0 0.75rem; }
  html.listen-open { scroll-padding-bottom: 9.5rem; }
  html.listen-open body { padding-bottom: 8.5rem; }
}
@media print { .listen-bar, .listen-start, .goal-toast { display: none !important; } }

/* --- Skills check (skills-web): training/skills.html, and code in drawn lesson questions --- */
.skills-choices { display: grid; gap: 0.5rem; }
.skills-hint { margin: 0 0 0.75rem; }
.skills-target { color: var(--t-muted); font-size: 0.92rem; }
.skills-intro h3 { margin-top: 1.5rem; }
.skills-step { margin: 1.5rem 0; }
.skills-step__area { margin: 0.25rem 0 0.75rem; color: var(--t-muted); font-weight: 600; }
.skills-step .session__progress { margin-bottom: 1.25rem; }
.skills-finish-confirm { margin-bottom: 1.25rem; }
.skills-confidence legend { font-weight: 600; }
.skills-confidence__options { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
/* A fieldset is min-content wide by default, so a long code line would widen the page instead of scrolling. */
fieldset.quiz-q { min-width: 0; }
.skills-code { margin: 0.75rem 0; min-width: 0; }
.skills-code figcaption { font-size: 0.85rem; font-weight: 600; color: var(--t-muted); margin-bottom: 0.35rem; }
.skills-code pre { margin: 0; white-space: pre; }
.skills-code pre:focus-visible { outline: 3px solid var(--t-brand); outline-offset: 2px; }
.quiz-q legend code, .quiz-q__option code, .skills-review code, .skills-plan code, .skills-result li a code {
  background: var(--t-tint); padding: 0.05rem 0.35rem; border-radius: 0.3rem; color: var(--t-heading);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; overflow-wrap: anywhere;
}
.skills-result { margin: 1.5rem 0; }
.skills-result__meta { color: var(--t-muted); }
.skills-result__summary { font-size: 1.1rem; color: var(--t-heading); }
.skills-result__actions { margin: 1rem 0 1.5rem; }
.post-content .skills-areas { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.75rem; }
.skills-result__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 2rem; }
.post-content .skills-result__list-heading { font-size: 1rem; margin: 0.5rem 0 0.25rem; }
.skills-area { background: var(--t-card); border: 1px solid var(--t-border); border-radius: 0.5rem; padding: 1rem 1.25rem; }
.skills-area p { margin: 0.4rem 0 0.6rem; }
.skills-area__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.skills-area__head h4 { margin: 0; font-size: 1.05rem; }
.skills-status, .skills-mark, .skills-tag {
  display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem;
  border: 1px solid currentColor;
}
.skills-status--strength, .skills-mark--right, .skills-tag--right { color: var(--t-pass); background: var(--t-pass-bg); }
.skills-status--gap { color: var(--t-warn); background: var(--t-warn-bg); }
.skills-status--on-target, .skills-tag--given { color: var(--t-brand); background: var(--t-tint); }
.skills-status--skipped, .skills-status--untested { color: var(--t-body); background: var(--t-surface); }
.skills-mark--wrong { color: var(--t-fail); background: var(--t-fail-bg); }
.skills-bar { position: relative; height: 0.75rem; border-radius: 999px; background: var(--t-border); margin: 0.75rem 0 0.25rem; }
.skills-bar__fill { height: 100%; width: 0; border-radius: inherit; background: var(--t-brand); }
.skills-area--gap .skills-bar__fill { background: var(--t-warn); }
.skills-area--strength .skills-bar__fill { background: var(--t-pass); }
.skills-bar__target { position: absolute; top: -0.3rem; bottom: -0.3rem; width: 3px; border-radius: 2px; background: var(--t-heading); }
.skills-levels { margin: 0 0 1.5rem; }
.skills-levels summary, .skills-review summary { cursor: pointer; font-weight: 600; color: var(--t-heading); min-height: var(--t-target); padding: 0.5rem 0; }
.skills-levels dl div { margin: 0.5rem 0; }
.skills-levels dt { font-weight: 700; color: var(--t-heading); }
.skills-levels dd { margin: 0; }
.skills-plan { padding-left: 1.5rem; display: grid; gap: 0.75rem; }
.skills-plan__item a { font-weight: 600; }
.skills-plan__item p { margin: 0.2rem 0 0; }
.skills-plan__meta { color: var(--t-muted); font-size: 0.92rem; }
.post-content .skills-review { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.skills-review > li { background: var(--t-card); border: 1px solid var(--t-border); border-radius: 0.5rem; padding: 0 1rem; }
.skills-review summary { font-weight: 400; color: var(--t-text); }
.skills-review__body { padding: 0 0 1rem; }
.skills-review__options { padding-left: 1.25rem; }
.skills-review__options li { margin: 0.35rem 0; }
.skills-review__sources { font-size: 0.92rem; color: var(--t-muted); }
.post-content .skills-past__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.skills-past__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--t-border); }
.skills-past__item .btn { min-height: var(--t-target); }
.skills-cta { border: 1px solid var(--t-tint-border); background: var(--t-tint); border-radius: var(--t-radius); padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.skills-cta h2, .skills-cta h3 { margin-top: 0; }
.skills-cta p { color: var(--t-body); }
@media (prefers-reduced-motion: reduce) {
  .skills-step .session__fill { transition: none; }
}
@media (prefers-contrast: more) {
  .skills-area, .skills-review > li { border-width: 2px; border-color: currentColor; }
}
@media print {
  body[data-page="skills"] .skills-result__actions, body[data-page="skills"] .skills-past, body[data-page="skills"] .skills-intro,
  body[data-page="skills"] .skills-step, body[data-page="skills"] #skills-resume, body[data-page="skills"] .site-header,
  body[data-page="skills"] .site-footer { display: none !important; }
  .skills-area, .skills-review > li { break-inside: avoid; }
  .skills-bar, .skills-bar__fill, .skills-bar__target { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* --- Flashcards: the answer revealed in place, Browse, card direction (cards/web, 2026-10-16) --- */
/* The answer is laid out all along and only concealed, so the card keeps its height on reveal.
   visibility: hidden also takes it out of the accessibility tree until it is shown. */
.flashcard__back[data-concealed] { visibility: hidden; animation: none; }
.flashcard__back:not([data-concealed]) { animation: tk-reveal 0.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .flashcard__back:not([data-concealed]) { animation: none; } }
.flashcard .flashcard__front--meaning { font-size: 1.15rem; font-weight: 500; line-height: 1.5; hyphens: manual; }
.flashcard .flashcard__answer--name { font-size: 1.3rem; font-weight: 700; color: var(--t-heading); }
.direction-options { margin-top: 1.25rem; }
.direction-options .status-line { margin: 0 0 0.25rem; }
.deck__actions { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 0.5rem; align-self: center; }
.deck .deck__actions .btn { grid-column: auto; grid-row: auto; }
@media (max-width: 480px) { .deck__actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; margin-top: 0.5rem; } .deck .deck__actions .btn { margin-top: 0; } }
.browse__search { display: grid; gap: 0.35rem; margin: 1rem 0 0.25rem; }
.browse__search label { font-weight: 600; color: var(--t-heading); }
.browse__search input {
  font: inherit; color: var(--t-text); background: var(--t-card); border: 1px solid var(--t-muted);
  border-radius: 0.5rem; padding: 0.6rem 0.75rem; min-height: var(--t-target); width: 100%; box-sizing: border-box;
}
.browse__search input:focus-visible { outline: 3px solid var(--t-brand); outline-offset: 2px; }
.browse__count { margin: 0.25rem 0 1rem; }
.browse__heading { margin: 1.5rem 0 0.5rem; }
.browse-list { margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.browse__card { border: 1px solid var(--t-border); border-radius: var(--t-radius); background: var(--t-card); padding: 0.9rem 1.1rem; }
.browse__card dt { font-weight: 700; color: var(--t-heading); font-size: 1.05rem; }
.browse__card dd { margin: 0.35rem 0 0; }
.browse__card dd p { margin: 0 0 0.4rem; color: var(--t-text); }
.browse__lesson { font-weight: 600; }

/* iOS track (Module 5): API names in text, tables and quiz options are long single words.
   Let them wrap on a phone instead of widening the page. */
.post-content p code, .post-content li code, .post-content td code, .quiz-q code { overflow-wrap: anywhere; }