/*
 * Wide-screen readability layer.
 * Loaded after the page-specific styles so desktop typography and interaction
 * remain consistent across the public site and the learning application.
 */

body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

/* Lesson numbers are plain text, without badge styling. */
.lesson-mini-card > div span {
  width: auto;
  height: auto;
  display: inline;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.continue-card .button,
.continue-card .button:hover,
.continue-card .button:focus-visible {
  box-shadow: none !important;
}

.dictionary-score {
  box-shadow: none !important;
}

.reading-story-cover img {
  transition: transform .35s ease;
}

a.reading-story-card:hover .reading-story-cover img {
  transform: scale(1.02);
}

/* Listening uses the same catalogue rhythm as Reading at every viewport size. */
.listening-library {
  margin-top: 60px;
}

.listening-group {
  margin-top: 55px;
}

.reading-story-cover-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 5px;
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 22%, rgba(123, 109, 242, .18), transparent 28%),
    linear-gradient(145deg, #eefbdc, #f1eeff);
  text-align: center;
}

.reading-story-cover-fallback b {
  font-size: 42px;
  line-height: 1;
  letter-spacing: -2px;
}

.reading-story-cover-fallback small {
  color: #5d50c8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

@media (min-width: 1100px) {
  :root {
    --line: #b8c1b7;
    --muted: #56635f;
    --shell: min(1280px, calc(100% - 64px));
  }

  body {
    font-size: 16px;
  }

  p,
  li,
  summary,
  label {
    text-wrap: pretty;
  }

.access-lock-badge,
.answer-comparison small,
.content-lock-label,
.continue-card > div:nth-child(2) > span,
.course-row-copy > span,
.course-row-score span,
.dashboard-stats span,
.diagnostic-result-row em,
.diagnostic-result-row small,
.diagnostic-results-card > footer p,
.diagnostic-results-card > header span,
.dictionary-audio-scale,
.dictionary-practice-launch > div:first-child > span,
.dictionary-topic footer,
.dictionary-topic-complete,
.dictionary-voice-options button,
.example-note strong,
.keyboard-note,
.leaderboard-divider b,
.leaderboard-my-stats small,
.leaderboard-my-stats span,
.leaderboard-panel-heading span,
.leaderboard-person .leaderboard-medal-name,
.leaderboard-person span,
.leaderboard-tabs small,
.leaderboard-you-label,
.legal-document-head>span,
.legal-nav>span,
.legal-summary span,
.lesson-header-inner > div span,
.lesson-mini-card small,
.lesson-result span,
.lesson-visual figcaption span,
.level-pill span,
.level-result-estimate span,
.listening-audio-speed-scale,
.listening-audio-speed-toggle,
.listening-audio-timeline>div,
.listening-audio-volume-popover>span,
.listening-card figure>b,
.listening-card figure>span,
.listening-card-copy footer span,
.listening-card-copy>p,
.listening-card-copy>small,
.listening-cover-placeholder>strong,
.listening-eyebrow,.listening-format-map>header>span,.listening-group>header p,.listening-lesson-kicker,.listening-questions>header span,
.listening-format-card small,
.listening-group>header>b,
.listening-hero-facts span,
.listening-lesson-badges span,
.listening-lesson-footer p,
.listening-lesson-footer>div>span,
.listening-player-foot,
.listening-player-title small,
.listening-question label,
.listening-question legend span,
.listening-questions-actions p,
.listening-questions>header>b,
.listening-transcript-line>strong,
.listening-transcript-tools button,
.listening-transcript-tools p,
.listening-transcript>header p,
.listening-transcript>header span,
.placement-callout span,
.placement-result-card > div b,
.podium-card > strong small,.leaderboard-xp small,
.podium-entry-medal,
.podium-entry-xp small,
.practice-builder-footer small,
.practice-level-pick > header small,.practice-topic-pick > header small,
.practice-match-grid small,
.practice-mistakes small,
.practice-mode-grid small,
.practice-perfect-meme figcaption > span,
.practice-perfect-meme small,
.practice-picker-head span,
.practice-question-copy > span,
.practice-result-stats small,
.practice-word-checks small,
.practice-write-form label,
.reading-article-badges span,
.reading-article-footer p,
.reading-article-footer span,
.reading-article-kicker,
.reading-group > header > b,
.reading-group > header small,
.reading-language-switch > span,
.reading-level-facts dt,
.reading-level-kicker,
.reading-level-mark small,
.reading-library-count,
.reading-origin > span,
.reading-origin a,
.reading-paper-front small,
.reading-question legend .reading-question-number,
.reading-question-options label,
.reading-questions > header b,
.reading-questions > header span,
.reading-questions-actions p,
.reading-shelves article > b,
.reading-shelves small,
.reading-size-nav small,
.reading-soon-label,
.reading-story-card footer span,
.reading-story-card footer strong,
.reading-story-completed,
.reading-story-number,
.reading-story-tags span,
.reading-translation-review,
.reading-word-hint,
.recommendation-side > small,
.reference-cards article>b,
.reference-finish span,
.reference-index span,
.reference-search b,
.reference-section>header span,
.reference-table thead th,
.section-access-lock>span,
.test-type-card footer div small,
.test-type-copy > span,
.theory-card small,.lesson-section-head small,
.uplish-auth-legal,
.uplish-crop-heading span,
.uplish-crop-help,
.uplish-email-settings label,
.uplish-settings-card-title small,
.uplish-status-top,
.uplish-tour-progress,
.word-card-state,
.word-flip-hint {
  font-size: 12px;
}

.answer-comparison div,
.band-card p,
.continue-card p,
.course-card-bottom a,
.course-card-top,.placement-result-card > div:first-child,
.course-hero-progress > span,
.course-row-copy p,
.daily-time span,
.dashboard-section-head > a,
.dashboard-section-links a,
.demo-points span,
.diagnostic-results-card > footer .button,
.diagnostic-results-card > header a,
.diagnostic-test-link,
.dictionary-audio-heading strong,
.dictionary-audio-panel output,
.dictionary-audio-panel strong,
.dictionary-audio-toggle,
.dictionary-back,
.dictionary-practice-launch .button,.practice-result-actions .button,.practice-empty-state .button,
.dictionary-practice-launch p,
.dictionary-score span,
.dictionary-tools > button,
.dictionary-topic footer b,
.dictionary-topic p,
.dictionary-topic-placeholder small,
.example-note,
.examples-grid span,
.feature-tag,
.floating-word span,
.footer-bottom,
.grammar-kicker,
.grammar-parts span,
.hero-notes li span,
.leaderboard-panel-heading p,
.learn-kicker,
.learn-user,
.learn-user button,
.legal-document-footer>b,
.legal-document-head p,
.legal-nav a,
.lesson-completed,
.lesson-footer > span,
.lesson-goals > span,
.lesson-goals article b,
.lesson-goals article p,
.lesson-header-inner > a:last-child,
.lesson-mini-card > div span,
.lesson-mini-card b,
.lesson-mini-card p,
.lesson-reference-link b,
.lesson-result p,
.lesson-section-head p,
.lesson-title > span,
.lesson-visual figcaption p,
.level-card > div,
.level-result-percent,
.level-result-score p,
.level-result-top,
.level-tabs span,
.listening-audio-skip text,
.listening-back,
.listening-card-copy>strong,
.listening-copy small,
.listening-cover-placeholder>span,
.listening-format-card>span,
.listening-group>header small,
.listening-transcript-tools span,
.listening-word-translation>strong,
.mistake-index,
.mistake-question small,
.mobile-test-status,
.payment-redirect-card>a,
.payment-redirect-card>span,
.placement-result-card a,
.placement-result-card p,
.podium-entry-rank,
.practice-builder-footer span,
.practice-empty-state > span,.practice-mode-hero > span,.practice-results > span,
.practice-feedback span,
.practice-level-pick > header i,
.practice-match > header small,
.practice-mode-grid b,
.practice-mode-grid p,
.practice-mode-picker small,
.practice-mode-picker-title,
.practice-picker-head button,
.practice-result-reward,
.practice-score span,
.practice-session-head span,
.practice-session-head strong,
.practice-stop,
.practice-word-checks b,
.price-amount small,
.price-badge,
.price-card > small,
.price-card li span,
.price-card-head > span,
.price-plan-panel li span,
.price-switcher-footer small,
.question-instruction,
.question-level,
.question-number,
.question-skill,
.quiz-card h3 > span,
.quiz-explanation,
.rail-item small,
.reading-adaptation-note,
.reading-empty-note p,
.reading-level-facts dd,
.reading-library > header p,
.reading-origin p,
.reading-panel > span, .listening-copy > span,
.reading-paper-back span,.reading-paper-middle span,
.reading-paper-front > span,
.reading-shelves p,
.reading-source-note p,
.reading-story-summary,
.reading-story-title-ru,
.reading-text-back,
.reading-word-translation > span::after,
.reading-word-translation > strong,
.recommendation-badge,
.recommendation-copy li > span,
.recommendation-copy li small,
.reference-cards p,
.reference-cards small,
.reference-empty,
.reference-index b,
.reference-kicker,
.reference-note,
.reference-search input,
.reference-section>header p,
.reference-shifts span,
.reference-table,
.reference-table tbody th,
.result-kicker,
.result-note,
.rule-breakdown b,
.rule-breakdown p,.theory-card .rule-breakdown p,
.save-toast,
.section-access-lock p,
.sidebar-kicker, .result-section-kicker,
.skill-card-title p,
.subscription-caption,
.subscription-plan-top>span,.subscription-status>span,
.subscription-status a,
.subscription-status p,
.subscription-test-note,
.test-clock small,
.test-option .option-letter,
.test-privacy,
.test-select-hero > span,
.test-select-note,
.topic-chip,
.topic-groups small,
.uplish-account-cards a, .uplish-account-cards small,
.uplish-account-cards article > span,
.uplish-account-nav,
.uplish-account-nav button,
.uplish-account-status > p,
.uplish-auth-benefits > div > span,
.uplish-auth-benefits small,
.uplish-auth-consent b,
.uplish-auth-form label, .uplish-code-form label,
.uplish-avatar-editor p,
.uplish-avatar-status,
.uplish-back-link,
.uplish-card-kicker,
.uplish-email-field span,
.uplish-email-settings > p,
.uplish-flash,
.uplish-onboarding-launch,
.uplish-onboarding-settings p,
.uplish-resend-form,
.uplish-status-row,
.uplish-tour-button, .uplish-tour-community-link,
.uplish-tour-close,
.week-plan div,
.word-actions button,
.word-back-copy small,
.word-example,
.word-image-placeholder small {
  font-size: 13px;
}

.audio-play,
.autosave,
.band-card-top b span,
.course-card-bottom strong,
.course-card-copy p,
.demo-answers button b,
.demo-meta,
.demo-result,
.diagnostic-result-icon,
.diagnostic-result-row b,
.dictionary-empty,
.dictionary-tools input,
.exit-link,
.eyebrow,
.final-kicker,
.footer-links a, .footer-links button,
.hero-notes li,
.leaderboard-community-copy p,
.leaderboard-community-link,
.learn-flash,
.legal-document-footer p,
.legal-document>section p,.legal-document>section ul,
.legal-home-link,
.lesson-feedback,
.lesson-footer button,
.lesson-header-inner > div b,
.lesson-label,
.lesson-progress-row,
.level-card > div b,
.listening-coming-soon p,
.listening-lesson-cover>.listening-cover-placeholder>span,
.listening-lesson-intro>p:last-child,
.listening-question legend,
.mistake-answer > p,
.payment-test-warning,
.placement-callout p,
.podium-entry-name,
.podium-position,
.practice-empty-state p,.practice-mode-hero p,
.practice-feedback strong,
.practice-match > header span,
.practice-match-grid b,
.practice-mistakes p,
.practice-options button,
.practice-question-copy small,
.practice-result-message,
.practice-topic-pick > header label,
.price-tabs button span,
.proof-items span,
.quiz-options label > span,
.rail-item > span,
.rail-item b,
.reading-article-summary,
.reading-group > header > span,
.reading-level-copy > p,
.reading-question legend,
.reading-shelf-icon,
.reading-size-nav span,
.recommendation-copy li b,
.reference-hero-mark small,
.reference-mobile-home,
.result-kicker span,
.result-retry,
.section-number,
.skill-card-head > strong span,
.subscription-plan-top small,
.test-back,
.test-sidebar > p,
.test-type-card footer > strong,
.test-type-copy p,
.test-type-top > small,
.toast,
.uplish-account-cards p,
.uplish-auth-benefits b,
.uplish-auth-card > p,
.uplish-auth-switch,
.uplish-back-link, .uplish-quiet-action,
.uplish-crop-action,
.uplish-email-field > span,
.uplish-onboarding-settings strong,
.uplish-profile-popover a,.uplish-profile-popover button,
.uplish-profile-popover span,
.uplish-settings-card-title span,
.uplish-tour-text,
.uplish-verify-card > p {
  font-size: 14px;
}

  /* Keep long-form reading comfortable at normal browser zoom. */
  .reading-prose,
  .listening-transcript-line > p {
    font-size: 18px;
    line-height: 1.75;
  }

  .legal-document > section p,
  .legal-document > section li {
    font-size: 15px;
    line-height: 1.75;
  }

  .reference-table {
    font-size: 14px;
  }

  .reference-table thead th {
    font-size: 12px;
  }

  .test-option .option-text,
  .practice-options button,
  .reading-question-options label,
  .listening-question label {
    font-size: 14px;
    line-height: 1.45;
  }

  /* Text remains sharp because its containing surface is no longer rasterised at an angle. */
  .lesson-card,
  .grammar-demo,
  .level-code,
  .price-promise > span,
  .placement-orb,
  .uplish-mail-icon,
  .uplish-account-avatar,
  .reading-level-mark,
  .reading-shelf-icon {
    transform: none;
  }

  .word-stack > div,
  .word-stack > div:nth-child(1),
  .word-stack > div:nth-child(2),
  .word-stack > div:nth-child(3) {
    transform: translateX(-50%);
  }

  .reading-paper-front {
    transform: none;
  }

  /* Stronger neutral surfaces survive different monitor gamma and contrast settings. */
  .site-header,
  .learn-header,
  .lesson-mini-card,
  .course-row,
  .level-pill,
  .reading-story-card,
  .listening-card,
  .test-type-card,
  .test-option,
  .reference-section,
  .reference-table-wrap,
  .dictionary-topic,
  .word-card,
  .practice-question,
  .subscription-plan,
  .uplish-auth-card {
    border-color: var(--line);
  }

  .site-header,
  .learn-header {
    background-color: rgba(247, 248, 242, .96);
  }

  /* Keep the leaderboard hero and personal ranking summary visible on wide displays. */
  .leaderboard-hero {
    border-color: #aeb9aa;
    background: linear-gradient(125deg, #fff 0%, #f6ffe6 55%, #eeebff 100%);
  }

  .leaderboard-my-stats {
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .leaderboard-my-stats div {
    border: 1px solid #c2bcd8;
    background: #f1edff;
  }

  .leaderboard-my-stats div:first-child {
    border-color: #91bd42;
    background: var(--lime);
  }

  .leaderboard-community {
    border-color: #aeb9aa;
  }

  /* Selected levels keep the hover border; unselected levels change on hover. */
  .level-pill.active,
  .level-pill.active:hover,
  .level-pill.active:focus-visible,
  .level-tabs a.active,
  .level-tabs a.active:hover,
  .level-tabs a.active:focus-visible,
  .level-tabs a.active.locked-level,
  .level-tabs a.active.locked-level:hover,
  .level-tabs a.active.locked-level:focus-visible {
    border-color: #929c97 !important;
  }

  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(94, 75, 214, .42);
    outline-offset: 3px;
  }
}

@media (min-width: 1440px) {
  :root {
    --shell: min(1360px, calc(100% - 80px));
  }

  .learn-main,
  .reading-main,
  .listening-main,
  .test-select-main {
    padding-top: 64px;
  }
}

@media (min-width: 1440px) {
  /* Account dashboard: preserve hierarchy without making secondary text tiny. */
  .course-card-bottom a {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .01em;
  }

  .course-card-bottom strong {
    font-size: 15px;
    font-weight: 700;
  }

  .course-card-copy p {
    color: #c2cec9;
    font-size: 15px;
    line-height: 1.45;
  }

  .diagnostic-result-row {
    min-height: 78px;
    padding: 11px 13px;
  }

  .diagnostic-result-row small {
    overflow: visible;
    color: #4e5b57;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal;
  }

  .diagnostic-result-row em {
    font-size: 12px;
    font-weight: 600;
  }

  .diagnostic-results-card > footer p {
    max-width: 310px;
    color: #46534f;
    font-size: 14px;
    line-height: 1.55;
  }

  .level-pill span {
    color: #46534f;
    font-size: 14px;
    font-weight: 500;
  }

  .continue-card > div:nth-child(2) > span {
    font-size: 11px;
    line-height: 1.4;
  }

  .continue-card p,
  .course-row-copy p {
    color: #46534f;
    font-size: 15px;
    line-height: 1.55;
  }

  /* Durations should remain legible at native desktop zoom. */
  .lesson-mini-card p,
  .lesson-title > span {
    font-size: 14px;
    line-height: 1.4;
  }

  .course-row-copy > span {
    font-size: 12px;
    line-height: 1.4;
  }

  /* Keep secondary dashboard actions as quiet as lesson durations. */
  .lesson-mini-card b,
  .dashboard-section-links a {
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
  }

  .reading-story-tags span,
  .listening-card-copy footer span,
  .test-type-card footer div small {
    font-size: 13px;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .button,
  .lesson-mini-card,
  .course-row,
  .level-pill,
  .reading-story-card,
  .listening-card,
  .test-type-card,
  .test-option,
  .reference-index a,
  .reference-cards article,
  .dictionary-topic,
  .word-actions button,
  .practice-options button {
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
  }

  .reading-story-card:hover,
  .listening-card:hover,
  .test-option:hover,
  .dictionary-topic:hover,
  .practice-options button:hover:not(:disabled) {
    border-color: #7464df;
    box-shadow: 0 10px 28px rgba(32, 40, 37, .13);
    transform: none;
  }

  .test-type-card:hover {
    box-shadow: 0 10px 28px rgba(32, 40, 37, .13);
    transform: none;
  }

  .test-type-level:hover { border-color: #83bd5d; }
  .test-type-vocabulary:hover { border-color: #9485ef; }
  .test-type-reading:hover { border-color: #d9aa24; }
  .test-type-listening:hover { border-color: #65a9e8; }

  .lesson-mini-card:hover,
  .lesson-mini-card:focus-visible,
  .course-row:hover,
  .course-row:focus-visible,
  .course-row.access-locked:hover,
  .level-pill:hover,
  .level-pill:focus-visible,
  .level-tabs a:hover,
  .level-tabs a:focus-visible {
    border-color: #929c97 !important;
    box-shadow: none !important;
    transform: none;
  }

  .reference-index a:hover,
  .word-actions button:hover,
  .listening-transcript-tools button:hover {
    border-color: #7464df;
    background-color: #ece8ff;
    color: #3f329e;
  }

  .button:hover {
    transform: none;
  }

  .lesson-mini-card:hover b,
  .lesson-mini-card:focus-visible b,
  .dashboard-section-links a:hover,
  .dashboard-section-links a:focus-visible {
    color: var(--muted);
  }
}

/* The diagnostic link keeps its original purple in every interaction state. */
.diagnostic-test-link,
.diagnostic-test-link:hover,
.diagnostic-test-link:focus-visible {
  color: var(--purple) !important;
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid Highlight;
  }
}