/* STEPIRO typography: IBM Plex Sans Arabic, weights 400 / 500 / 600.
   Loaded last to unify the older page-specific type rules. */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('assets/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('assets/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('assets/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
:root {
  --font-ui: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;
  --type-title: 28px;
  --type-section: 20px;
  --type-body: 17px;
  --type-control: 16px;
  --type-caption: 14px;
  --type-number: 32px;
  --muted: #526b64;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: var(--type-body); line-height: 1.8; font-weight: 400; font-synthesis: none; }
/* Legacy font shorthands include Arial/Georgia and one !important answer rule. */
body, body * { font-family: var(--font-ui) !important; letter-spacing: normal !important; }
h1, h2, h3, h4, h5, h6, b, strong { font-weight: 600 !important; line-height: 1.4; }
p, li { line-height: 1.8; }
button, input, select, textarea { font-family: inherit; }
button, .btn, .filter, .text-link { font-weight: 500 !important; }
input, select, textarea { font-size: var(--type-control); line-height: 1.6; font-weight: 400; }
.pagehead h1, .welcome-row h1, .quiz-top h1,
.hero h2, .home-hero h2, .mastery-hero h2 {
  font-size: var(--type-title); line-height: 1.4; letter-spacing: normal;
}
.card h2, .card h3, .card-title h2, .card-title h3,
.lesson-card h3, .test-card h3, .source-card h3,
.placement-intro h2, .placement-choice h2, .placement-outcome h2,
.mastery-card h2, .mastery-card.compact h2, .study-note h3,
.sheet-header h2, .modal h2, .source-intake h2, .source-policy h2 {
  font-size: var(--type-section); line-height: 1.4;
}
.pagehead p, .card p, .hero p, .home-hero p, .mastery-hero p,
.lesson-card p, .study-note p, .test-card p, .source-card p,
.placement-intro p, .placement-choice p, .placement-method p,
.placement-outcome p, .source-intake p, .source-policy p,
.modal p, .modal .notice, .diagnostic-setup p,
.method-steps p, .solution-list p, .worked-step p, .try-first,
.coach-trap p, .result-review p, .session-card p {
  font-size: var(--type-body); line-height: 1.8;
}
.rule, .lesson-detail .rule { font-size: var(--type-body) !important; line-height: 1.8; }
.notice, .tip, .feedback, .placement-list, .placement-checkbox,
.mastery-check p, .placement-diagnostic-report p {
  font-size: var(--type-body); line-height: 1.8;
}
.notice strong, .feedback-verdict, .solution-list h4, .worked-step h4,
.feedback .solution-heading, .coach-trap strong, .session-card h3,
.week h3, .more-menu strong { font-size: var(--type-body); line-height: 1.5; }
.btn, .btn.small, .hero-buttons .btn, .footer-actions > .btn,
.today-actions .btn, .lesson-actions .btn, .sheet-actions .btn,
.modal-actions .btn, .audio-buttons .btn, .q-controls .btn,
.quiz-top > .btn, .placement-shortcuts .btn, .day .btn {
  font-size: var(--type-control); line-height: 1.5;
  min-height: 48px; white-space: normal; overflow-wrap: anywhere;
}
.text-link, .filter, .nav button, .placement-lessons button,
.mastery-topic strong, .coach-discover strong, .how-button strong,
.quick strong, .skill-meta, .day span {
  font-size: var(--type-control); line-height: 1.6;
}
.section-label { font-size: var(--type-section); line-height: 1.5; }
.quiet, .small-label, .new-label, .eyebrow, .hero-kicker,
.welcome-greeting, .week-chip, .pill, .badge,
.card-title small, .pagehead .eyebrow, .section-label .quiet,
.section-label .text-link, .stat .label, .stat small,
.skill-meta small, .skill-footnote, .session-meta,
.quick small, .source-link, .source-card .source-num,
.source-original, .source-card .source-note, .source-meta,
.source-original p, .lesson-bottom, .lesson-card .small-label,
.field label, .field small, .form-error, .placement-choice label,
.placement-choice > .quiet, .placement-summary p,
.placement-tags > span, .placement-references span,
.placement-references strong, .source-filters .filter,
.source-card-labels .badge, .lesson-source-links small,
.week .weekgoal, .week summary p, .day small,
.mastery-topic small, .mastery-check p, .app-footer,
.q-meta, .flag-btn, .exam-help-note, .quiz-top small,
.audio-status, .audio-fallback, .context-panel p.quiet,
.context-disclosure summary small, .transcript summary,
.how-button small, .coach-discover small, .coach-discover .new-label,
.worked-top small, .worked-top > span, .example-progress,
.coach-section-label, .sheet-header .new-label, .sheet-actions .quiet,
.more-menu small, .mock-block-bar span, .mock-block-bar p,
.block-results small, .format-card .badge,
.source-summary, .lesson-source-links a {
  font-size: var(--type-caption); line-height: 1.7;
}
.context-disclosure[open] > summary small { font-size: 0; }
.context-disclosure[open] > summary small::after { font-size: var(--type-caption); }
.context-disclosure summary, .listening-preview summary { font-size: var(--type-control); line-height: 1.6; }
.bottom-tab, .mobile-location, .brand small,
.breadcrumb, .profile, .top-date, .side-note, .side-bottom button {
  font-size: var(--type-caption); line-height: 1.5;
}
.brand strong, .mobile-logo { font-size: 20px; font-weight: 600 !important; }
.brandmark, .mobile-logomark { font-size: 17px !important; font-weight: 600 !important; }
.side-note strong { font-size: var(--type-control); line-height: 1.6; }
.field input, .field select { font-size: var(--type-control); line-height: 1.5; }
.placement-choice input[inputmode=numeric] { font-size: 24px; }
.placement-inline-score { font-size: var(--type-control); font-weight: 600; line-height: 1.5; }
.goal-path strong, .score-col strong, .placement-score-badge strong,
.stat strong, .score-ring strong, .mastery-count,
.test-num, .source-summary strong, .timer {
  font-size: var(--type-number); line-height: 1.4; font-weight: 600 !important;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.stat strong > span, .mastery-count small, .score-ring strong small,
.goal-path span, .score-col small, .placement-score-badge span {
  font-size: var(--type-caption); line-height: 1.6; font-weight: 400 !important;
}
.goal-path span { max-width: none; }
.timer { min-width: 7ch; width: 7ch; justify-content: center; white-space: nowrap; }
.q-grid button, .daycheck, .lesson-number, .step-box,
.weeknum, .answer .letter, .block-dots i, .block-results > article > span {
  font-weight: 500; font-variant-numeric: tabular-nums;
}
.q-grid button { font-size: var(--type-caption); min-width: 40px; min-height: 40px; }
.weeknum, .step-box { font-size: 20px; }
.answer .letter, .lesson-number, .daycheck { font-size: var(--type-caption); }
.history-list, .format-table { font-size: var(--type-caption); line-height: 1.7; }
.history-list th { font-weight: 500; }
.mock-block-bar strong, .block-results strong { font-size: var(--type-control); line-height: 1.6; }
.block-results b { font-size: 20px; }
.mock-block-bar > div:first-child { align-items: flex-start; }
.block-results article > div { min-width: 0; }
.block-dots { gap: 5px; }
.block-dots i { font-size: 12px; }
.source-card .source-note { line-height: 1.8; }
.source-summary { gap: 20px; }
.source-count, .source-original summary { line-height: 1.7; }
/* The same family includes Latin glyphs; English learning content keeps LTR. */
[lang=en], .en, .formula, .example, .passage-text,
.worked-context, .worked-question, .example-option,
.listening-preview div, .word-example, .word-card strong {
  direction: ltr; text-align: left; letter-spacing: normal !important;
}
.passage-text, .context-disclosure[open] .passage-text,
.transcript .passage-text, .worked-context,
.formula, .example, .error-row .en, .result-review .en,
.listening-preview div, .word-card .word-example {
  font-size: 18px; line-height: 1.8; font-weight: 400;
}
.q-stem, .worked-question, .context-title {
  font-size: 20px; line-height: 1.6; font-weight: 500 !important;
}
.answer, .example-option { font-size: 18px; line-height: 1.6; font-weight: 400 !important; }
.solution-answer { font-size: 18px !important; line-height: 1.8 !important; font-weight: 500 !important; }
.example-option > span { font-size: var(--type-caption); }
.word-card strong { font-size: 24px; }
.word-card .meaning { font-size: var(--type-body); line-height: 1.8; }
.word-card .word-hint, .word-card .text-link { font-size: var(--type-caption); line-height: 1.7; }
.chart-box h3 { font-size: 18px; line-height: 1.5; }
.chart-legend, .chart-table { font-size: var(--type-caption); line-height: 1.6; }
.chart-box svg text { font-size: 14px; }
.q-meta, .card-title, .skill-meta, .error-top { flex-wrap: wrap; }
.welcome-row { flex-wrap: wrap; }
.welcome-row > div:first-child { min-width: 0; }
.card-title > *, .skill-meta > *, .q-meta > * { min-width: 0; }
.quiz-top { display: flex; flex-wrap: wrap; align-items: center; }
.quiz-top > div:first-child { flex: 1 1 100%; min-width: 0; }
.quiz-top > .btn { flex: 1 1 auto; }
.quiz-top #timer { flex: 0 0 auto; font-size: var(--type-number); line-height: 1.4; }
.placement-choice-num { line-height: 1.5; }
.mastery-card p { color: var(--muted); }
.mastery-hero p, .home-hero p { color: #d0e3d9; }
.card .quiet, .skill-meta small, .field small { color: var(--muted); font-size: var(--type-caption); line-height: 1.7; }
.placement-list, .placement-choice p, .lesson-card p,
.test-card p, .source-card p, .session-card p { color: var(--muted); }
@media(max-width:600px) {
  .card-title, .mastery-card-top { align-items: flex-start; }
  .welcome-row > div:first-child { flex: 1 1 200px; }
  .quick-grid { gap: 9px; }
  .quick { min-width: 0; padding-inline: 10px; }
  .quick strong, .quick small { overflow-wrap: anywhere; }
  .goal-path > div { flex-wrap: wrap; gap: 8px; }
  .goal-path span { max-width: 85px; }
  .goal-path { gap: 12px; }
  .bottom-tabs { gap: 2px; padding-inline: 8px; }
  .bottom-tab { font-size: 14px; padding-inline: 2px; }
  .mobile-appbar { gap: 8px; }
  .mobile-location { font-size: 14px; }
  .placement-shortcuts .btn { min-width: 140px; }
  .example-options { grid-template-columns: 1fr; }
  .week summary { flex-wrap: wrap; }
  .week .weekgoal { max-width: none; }
  .day { flex-wrap: wrap; }
  .day > div:nth-child(2) { flex: 1; min-width: 140px; }
  .day .btn { margin-inline-start: auto; }
  .modal { overflow-y: auto; }
  .close-sheet { font-size: 26px; font-weight: 400 !important; }
  .sheet-actions .quiet { text-align: center; }
  .mock-block-bar { padding: 15px; }
  .block-results article { align-items: flex-start; }
}