/* ANDERGO mobile app shell
   This layer intentionally only activates on phone-size screens. It provides
   a thumb-first application hierarchy without changing the rich desktop UI. */
.mobile-learning-dock { display: none; }

@media (max-width: 640px) {
  :root { --mobile-dock-height: calc(66px + env(safe-area-inset-bottom)); }

  html { scroll-padding-top: 9.2rem; }
  body {
    padding-bottom: var(--mobile-dock-height);
    background: #f4f7fc;
    overscroll-behavior-y: contain;
  }

  .navbar {
    position: sticky;
    top: 0;
    z-index: 80;
    padding-bottom: .5rem;
    background: rgba(255,255,255,.94);
  }

  /* Keep the full brand visible in the app header instead of reducing it to
     the product name alone. The subtitle is deliberately compact so it fits
     alongside the account and menu controls on narrow phones. */
  .brand-heading {
    display: grid;
    gap: .08rem;
    line-height: 1;
  }
  .brand-academy-name {
    display: block;
    color: #526682;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .01em;
  }

  .mobile-header-tabs > .nav-learn-cta {
    min-height: 42px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(37,99,235,.18);
  }

  .mobile-learning-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: var(--mobile-dock-height);
    padding: .42rem .35rem calc(.42rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(30,64,175,.1);
    background: rgba(255,255,255,.95);
    box-shadow: 0 -9px 28px rgba(15,23,42,.12);
    backdrop-filter: blur(18px);
  }

  .mobile-learning-dock a {
    display: grid;
    min-width: 0;
    min-height: 48px;
    place-items: center;
    align-content: center;
    gap: 1px;
    border-radius: 13px;
    color: #64748b;
    font-weight: 800;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-learning-dock span { font-size: 1.28rem; line-height: 1; }
  .mobile-learning-dock small { font-size: .62rem; line-height: 1.15; }
  .mobile-learning-dock a:focus-visible { outline: 3px solid #7dd3fc; outline-offset: -2px; }
  .mobile-learning-dock a:active,
  .mobile-learning-dock a.is-current { color: #1d4ed8; background: #eaf2ff; }

  .hero {
    gap: 1.25rem;
    padding: 1rem 1rem 2.1rem;
    background:
      radial-gradient(circle at 100% 0, rgba(14,165,233,.18), transparent 42%),
      linear-gradient(180deg,#f5f9ff 0%,#fff 82%);
  }

  .hero .pill { margin-bottom: .8rem; padding: .4rem .62rem; font-size: .6rem; }
  .hero h1, .hero h2 { font-size: clamp(2rem, 9.2vw, 2.55rem); line-height: 1.02; letter-spacing: -.05em; }
  .hero-copy-carousel { min-height: 0; }
  .hero-copy-slide > p { margin-top: .85rem; font-size: .94rem; line-height: 1.62; }
  .hero-carousel-controls { margin-top: .85rem; }
  .hero-buttons { display:block; margin-top: 1.1rem; }
  .hero-buttons .primary-btn { width:100%; min-height:54px; justify-content:center; border-radius:16px; font-size:.96rem; }
  /* All six languages remain visible at once: a two-column grid is clearer
     than a hidden horizontal carousel and provides full-size tap targets. */
  .hero-language-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    overflow: visible;
    padding: .9rem 0 .35rem;
  }
  .hero-language-tabs button {
    min-width: 0;
    min-height: 62px;
    justify-content: flex-start;
    gap: .5rem;
    padding: .55rem .6rem;
    border-radius: 15px;
    box-shadow: 0 8px 18px rgba(15,23,42,.07);
  }
  .hero-language-tabs b { width: 34px; height: 34px; flex-basis: 34px; font-size: .6rem; }
  .hero-language-tabs button > span { display: grid; min-width: 0; }
  .hero-language-tabs button strong { overflow: hidden; font-size: .82rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
  .hero-language-tabs button small,
  .hero-language-tabs button i { display: none; }

  /* The route controls are configuration, not lesson content. Keep them
     compact on a phone so the learner reaches the units without a long form. */
  .learning-path-section {
    padding: 1rem .75rem 1.15rem;
  }
  .learning-path-section > .section-heading {
    margin-bottom: .4rem;
  }
  .learning-path-section > .section-heading > span {
    font-size: .68rem;
  }
  .learning-path-section > .section-heading h2 {
    margin-block: .1rem;
    font-size: 1.38rem;
  }
  .learning-path-section > .section-heading p {
    margin-top: .2rem;
    font-size: .74rem;
    line-height: 1.35;
  }
  .route-path-controls {
    gap: .42rem;
    margin-bottom: .5rem;
    padding: .5rem;
    border-radius: 14px;
  }
  .route-target-identity {
    min-height: 26px;
    gap: .35rem;
    padding: 0 .05rem .38rem;
  }
  .route-target-identity::before { width: 1.45rem; height: 1.45rem; border-radius: 8px; font-size: .62rem; }
  .route-target-identity span { font-size: .62rem; }
  .route-target-identity strong { font-size: .88rem; }
  .route-path-controls .language-pair-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
  }
  .route-path-controls .route-support-language { grid-column: 1 / -1; }
  .route-path-controls .language-pair-field > span { font-size: .62rem; }
  .route-path-controls .language-pair-field select {
    min-height: 38px;
    padding: .38rem .48rem;
    border-radius: 10px;
    font-size: .76rem;
  }
  .route-path-controls .path-pair-preview { display: none; }
  #learning-path > .level-tabs {
    width: 100%;
    min-height: 40px;
    margin-bottom: .35rem;
    overflow-x: auto;
    padding: .2rem;
    border-radius: 12px;
    scrollbar-width: none;
  }
  #learning-path > .level-tabs::-webkit-scrollbar { display: none; }
  #learning-path > .level-tabs .level-tab {
    flex: 0 0 auto;
    min-height: 34px;
    padding: .34rem .58rem;
    font-size: .68rem;
  }
  #learning-path > .learning-route-context {
    min-height: 26px;
    margin-bottom: .45rem;
    padding: .2rem .55rem;
    font-size: .62rem;
  }
  .learn-route-toggle { min-height: 40px; margin-bottom: .55rem; padding: .5rem .75rem; font-size: .78rem; }

  /* On phones the illustrated route is part of the lesson choice, not a
     secondary drawer. Show it immediately and keep the artwork large enough
     to be meaningful before the learner opens a unit. */
  #learning-path .learn-route-toggle { display: none; }
  .learning-path-layout .skill-graph,
  .learning-path-layout .skill-graph.is-drawer-open {
    order: 1;
    max-height: none;
    margin: 0 0 .65rem;
    padding: .65rem;
    border-width: 1px;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(30,64,175,.08);
    opacity: 1;
    overflow: visible;
  }
  .learning-path-layout .lesson-workspace { order: 2; }
  .path-unit {
    grid-template-columns: 4.4rem minmax(0, 1fr) auto;
    min-height: 92px;
    padding: .55rem .6rem;
  }
  .path-unit-artwork {
    grid-row: 1 / 4;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 14px;
  }
  .path-unit-progress-track { left: 5.45rem; }

  /* Vocabulary and verb cards keep the useful examples on phone screens,
     but use a denser rhythm so more than one item is visible while browsing. */
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck {
    gap: .55rem;
  }
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card,
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card.is-flipped {
    min-height: 0;
  }
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-front {
    gap: .3rem;
    padding: .62rem;
  }
  .vocab-card-level-badge { min-height: 1.45rem; padding: .15rem .4rem; font-size: .61rem; }
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-front-support {
    margin-block: .03rem .08rem;
  }
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-front-support p { font-size: .82rem; }
  .vocab-card-catalogue-definition { font-size: .69rem; line-height: 1.26; }
  .vocab-card-catalogue-examples { gap: .14rem; margin-top: .22rem; }
  .vocab-card-catalogue-examples li { gap: .3rem; font-size: .66rem; line-height: 1.22; }
  .vocab-card-catalogue-examples li > span { width: 1rem; height: 1rem; font-size: .56rem; }
  .vocab-card-catalogue-examples small { margin-top: 0; font-size: .61rem; }
  .vocab-card-catalogue-example-audio { width: 1.18rem; height: 1.18rem; margin-left: .22rem; font-size: .56rem; }
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-front-footer {
    gap: .35rem;
    padding-top: .3rem;
  }

  .verb-catalogue-list { gap: .58rem; }
  .verb-catalogue-row { gap: .52rem; padding: .68rem; border-radius: 14px; }
  .verb-catalogue-head { grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem; }
  .verb-catalogue-rank { width: 1.9rem; height: 1.9rem; font-size: .74rem; }
  .verb-catalogue-identity > strong,
  .verb-catalogue-word > strong { font-size: 1rem; }
  .verb-catalogue-identity > span { font-size: .7rem; }
  .verb-catalogue-identity > small { font-size: .66rem; }
  .verb-catalogue-audio { width: 1.75rem; height: 1.75rem; min-width: 1.75rem; }
  .verb-catalogue-forms { gap: .38rem; padding-top: .5rem; }
  .verb-catalogue-forms span { font-size: .56rem; }
  .verb-catalogue-forms strong { font-size: .7rem; }
  .verb-catalogue-examples { gap: .32rem; padding-top: .5rem; }
  .verb-catalogue-examples > div { grid-template-columns: 1.1rem minmax(0, 1fr); gap: .35rem; }
  .verb-catalogue-examples > div > span { width: 1.05rem; height: 1.05rem; font-size: .56rem; }
  .verb-catalogue-examples p { gap: .3rem; font-size: .68rem; line-height: 1.25; }
  .verb-catalogue-conjugate { min-height: 36px; padding: .4rem .55rem; font-size: .72rem; }

  /* A catalogue is easier to scan as a compact grid than as a long cascade.
     Keep two visible choices per row on normal phones and reserve one column
     only for the smallest devices. */
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck,
  .verb-catalogue-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .vocab-useful-expressions-panel ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
  }
  .vocab-useful-expressions-panel .vocab-expression-card {
    grid-template-columns: 1.1rem minmax(0, 1fr);
    gap: .32rem;
    padding: .45rem;
  }
  .vocab-expression-card-index { width: 1.05rem; height: 1.05rem; font-size: .54rem; }
  .vocab-expression-card p { font-size: .68rem; line-height: 1.2; }
  .vocab-expression-card small { font-size: .58rem; line-height: 1.2; }
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card,
  .verb-catalogue-row {
    min-width: 0;
  }
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-front {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: .24rem;
  }
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-header {
    grid-column: 2;
    grid-row: 1;
  }
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-word-block {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-target,
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-target--medium,
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-target--long {
    font-size: .95rem;
    white-space: normal;
  }
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-front-support p {
    font-size: .74rem;
  }
  .vocab-card-catalogue-definition { font-size: .63rem; }
  .vocab-card-catalogue-examples li {
    grid-template-columns: .9rem minmax(0, 1fr);
    font-size: .6rem;
  }
  .vocab-card-catalogue-examples li > span { width: .9rem; height: .9rem; font-size: .5rem; }
  .vocab-card-catalogue-examples small { font-size: .56rem; }
  .verb-catalogue-row { padding: .58rem; }
  .verb-catalogue-head { grid-template-columns: 1.65rem minmax(0, 1fr); gap: .36rem; }
  .verb-catalogue-rank { width: 1.6rem; height: 1.6rem; font-size: .64rem; }
  .verb-catalogue-identity > strong,
  .verb-catalogue-word > strong { font-size: .84rem; }
  .verb-catalogue-identity > span { font-size: .62rem; }
  .verb-catalogue-identity > small { font-size: .58rem; }
  .verb-catalogue-audio { width: 1.55rem; height: 1.55rem; min-width: 1.55rem; }
  .verb-catalogue-forms { gap: .25rem; }
  .verb-catalogue-forms span { font-size: .49rem; }
  .verb-catalogue-forms strong { font-size: .6rem; }
  .verb-catalogue-examples { gap: .24rem; }
  .verb-catalogue-examples > div { grid-template-columns: .9rem minmax(0, 1fr); gap: .25rem; }
  .verb-catalogue-examples > div > span { width: .88rem; height: .88rem; font-size: .48rem; }
  .verb-catalogue-examples p { font-size: .59rem; line-height: 1.2; }
  .verb-catalogue-conjugate { min-height: 32px; padding: .32rem; font-size: .62rem; }
  .quick-stats { grid-template-columns: 1fr; gap:.55rem; margin-top: 1.1rem; }
  .quick-stats div { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.5rem; padding:.75rem .85rem; border-radius:14px; }
  .quick-stats span { text-align:right; font-size:.69rem; }

  .hero-card { width: min(100%, 400px); min-height: 360px; margin: .2rem auto 0; border-radius: 28px; box-shadow: 0 18px 44px rgba(15,23,70,.18); }
  .hero-cover-caption strong { font-size: 1.55rem; }

  .section { width: min(100% - 1.4rem, 680px); margin-block: 1.3rem; padding: 1.15rem; border-radius: 22px; }
  .section-heading h2 { font-size: clamp(1.55rem,7vw,2rem); line-height:1.08; }
  .section-heading p { font-size:.9rem; line-height:1.55; }
  .compact-hidden-section { margin-top:1rem; }
  .dashboard-actions { display:grid; grid-template-columns:1fr; }
  .dashboard-actions button, .dashboard-actions a { width:100%; min-height:50px; justify-content:center; }

  .learning-route-context, .learning-path-panel, .lesson-workspace, .translator-section, .tutor-section { border-radius:22px; }
  button, .primary-btn, .secondary-btn, input, select, textarea { min-height:44px; }
  input, select, textarea { font-size:16px; }

  footer { padding-bottom: 1.5rem; }
}

@media (max-width: 380px) {
  .mobile-learning-dock small { font-size:.56rem; }
  .hero h1, .hero h2 { font-size:1.9rem; }
  .hero-language-tabs { gap: .45rem; }
  .hero-language-tabs button { padding-inline: .48rem; }
  .hero-language-tabs b { width: 30px; height: 30px; flex-basis: 30px; font-size: .55rem; }
  .hero-language-tabs button strong { font-size: .76rem; }
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck,
  .verb-catalogue-list { grid-template-columns: 1fr; }
}

/* Phone learning views: reserve the horizontal space for the lesson itself.
   Catalogue cards used to be compressed into two narrow columns, which made
   examples and conjugations difficult to scan.  A compact single column is
   quicker to read and retains comfortable touch targets. */
@media (max-width: 640px) {
  .skill-view-section[data-skill='grammar'] .skill-print-area,
  .grammar-test-card {
    padding: .8rem;
    border-radius: 16px;
  }

  .skill-view-section[data-skill='grammar'] .skill-print-area > h3 {
    margin-bottom: .75rem;
    font-size: 1.22rem;
    line-height: 1.15;
  }

  .grammar-lesson-hero,
  .grammar-test-hero,
  .grammar-practice-header {
    align-items: flex-start;
    gap: .55rem;
  }

  .grammar-lesson-hero-icon,
  .grammar-test-hero-icon {
    flex-basis: 2.7rem;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 13px;
    font-size: 1.25rem;
  }

  .grammar-card-grid,
  .grammar-example,
  .grammar-lesson-sections-grid {
    grid-template-columns: 1fr;
    margin-bottom: .75rem;
  }

  .grammar-concept-card,
  .grammar-example-target,
  .grammar-example-bridge,
  .grammar-exercise {
    padding: .75rem;
    border-radius: 13px;
  }

  .grammar-test-meta-list {
    gap: .35rem;
  }

  .grammar-test-meta-list li {
    padding: .3rem .55rem;
    font-size: .7rem;
  }

  .grammar-test-progress-row {
    gap: .5rem;
  }

  .grammar-test-option {
    min-height: 46px;
    padding: .62rem .7rem;
    line-height: 1.3;
  }

  .grammar-test-start-btn,
  .grammar-test-submit-btn {
    width: 100%;
    max-width: none;
  }

  .vocab-catalogue {
    gap: .65rem;
    padding: .75rem;
    border-radius: 16px;
  }

  .vocab-catalogue-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }

  .vocab-catalogue-heading h3 {
    font-size: 1.2rem;
  }

  .vocab-catalogue-toolbar,
  #verbs .verbs-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    padding: .65rem;
  }

  .vocab-catalogue-search,
  .vocab-catalogue-category,
  #verbs .verbs-search-field {
    grid-column: 1 / -1;
  }

  .vocab-catalogue-levels,
  .vocab-catalogue-mastery,
  .verbs-quick-filters {
    flex-wrap: nowrap;
    width: 100%;
    padding-bottom: .3rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .vocab-catalogue-levels::-webkit-scrollbar,
  .vocab-catalogue-mastery::-webkit-scrollbar,
  .verbs-quick-filters::-webkit-scrollbar {
    display: none;
  }

  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck,
  .verb-catalogue-list {
    grid-template-columns: 1fr;
  }
  .vocab-useful-expressions-panel ul { grid-template-columns: 1fr; }

  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card,
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card.is-flipped {
    /* The front/back faces are positioned inside the card, so a zero
       minimum height collapses the entire catalogue into blank stripes. */
    min-height: 198px;
  }

  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-front {
    display: block;
    padding: .48rem .52rem;
  }

  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-word-block {
    display: block;
    padding-top: .2rem;
  }

  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-header {
    display: none;
  }

  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-target,
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-target--medium,
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-target--long {
    font-size: 1.05rem;
  }

  .vocab-card-catalogue-definition {
    font-size: .66rem;
    line-height: 1.22;
  }

  .vocab-card-catalogue-examples li {
    font-size: .62rem;
    line-height: 1.18;
  }

  .verb-catalogue-list {
    gap: .5rem;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .verb-catalogue-row {
    padding: .75rem;
    border: 1px solid rgba(37, 99, 235, .14);
    border-radius: 14px;
  }

  .verb-catalogue-forms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
  }

  .verb-catalogue-forms span {
    font-size: .58rem;
  }

  .verb-catalogue-forms strong {
    font-size: .72rem;
  }

  .verb-catalogue-examples p {
    font-size: .7rem;
    line-height: 1.35;
  }

  .verb-catalogue-conjugate {
    min-height: 42px;
    font-size: .74rem;
  }

  /* Verbos is a reference tool on phones: keep its controls visible, but
     reduce the introductory chrome and make each verb a compact scan row. */
  #verbs.section {
    width: min(100% - 1rem, 680px);
    margin-block: .65rem;
    padding: .7rem;
    border-radius: 16px;
  }

  #verbs .verbs-language-switcher {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    margin: -.1rem 0 .55rem;
    padding: .5rem .6rem;
    border-radius: 12px;
  }

  #verbs .verbs-language-switcher label,
  #verbs .verbs-language-switcher select {
    font-size: .72rem;
  }

  #verbs .verbs-language-switcher select {
    min-height: 38px;
    padding: .35rem .45rem;
  }

  #verbs .unit-verbs-context {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .42rem .6rem;
    margin-bottom: .55rem;
    padding: .58rem;
    border-radius: 13px;
  }

  #verbs .unit-verbs-copy > span,
  #verbs .unit-verbs-score > span {
    font-size: .58rem;
  }

  #verbs .unit-verbs-copy > strong { font-size: .92rem; }
  #verbs .unit-verbs-copy p { display: none; }
  #verbs .unit-verbs-score { min-width: 4.1rem; padding: .4rem .5rem; }
  #verbs .unit-verbs-score strong { font-size: .82rem; }
  #verbs .unit-verbs-context-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
  #verbs .unit-verbs-practice-btn,
  #verbs .unit-verbs-more > summary { min-height: 38px; padding: .4rem .6rem; font-size: .72rem; }

  #verbs .section-heading { margin: .35rem 0 .55rem; }
  #verbs .section-heading h2 { font-size: 1.28rem; line-height: 1.08; }
  #verbs .section-heading p { display: none; }
  #verbs .verbs-catalogue-summary { margin-bottom: .45rem; padding: 0; }
  #verbs .verbs-catalogue-summary > strong { font-size: 1rem; }
  #verbs .verbs-catalogue-summary > span { font-size: .66rem; }

  #verbs .skill-tabs { margin-inline: -.7rem; border-radius: 0; }
  #verbs .skill-tab-button { min-height: 42px; padding: .42rem .25rem; font-size: .7rem; }

  #verbs .verb-catalogue-row {
    min-height: 0;
    gap: .35rem .55rem;
    padding: .58rem;
  }

  #verbs .verb-catalogue-head { grid-template-columns: 1.7rem minmax(0, 1fr) auto; gap: .4rem; }
  #verbs .verb-catalogue-rank { width: 1.55rem; height: 1.55rem; font-size: .6rem; }
  #verbs .verb-catalogue-identity > strong { font-size: .92rem; }
  #verbs .verb-catalogue-identity > span,
  #verbs .verb-catalogue-identity > small { font-size: .62rem; }
  #verbs .verb-catalogue-audio { width: 1.7rem; height: 1.7rem; min-width: 1.7rem; }
  #verbs .verb-catalogue-forms { gap: .25rem; padding-top: .38rem; }
  #verbs .verb-catalogue-forms > div { padding: .35rem .3rem; }
  #verbs .verb-catalogue-forms span { font-size: .5rem; }
  #verbs .verb-catalogue-forms strong { font-size: .64rem; }
  /* Even in the densest phone layout, C1–C2 learners need the authored
     examples to understand a verb in context. Keep them visible, but make
     the two short lines as compact as the rest of the scan card. */
  #verbs .verb-catalogue-examples {
    display: grid;
    gap: .22rem;
    padding-top: .38rem;
  }
  #verbs .verb-catalogue-examples > div {
    grid-template-columns: .92rem minmax(0, 1fr);
    gap: .28rem;
  }
  #verbs .verb-catalogue-examples > div > span {
    width: .9rem;
    height: .9rem;
    font-size: .48rem;
  }
  #verbs .verb-catalogue-examples p {
    font-size: .63rem;
    line-height: 1.24;
  }
  #verbs .verb-catalogue-conjugate { min-height: 36px; margin-top: .1rem; padding: .32rem .5rem; font-size: .68rem; }
  }

/* Final mobile density pass.  It follows every legacy breakpoint so a card
   remains information-complete while the repeated framing stays compact. */
@media (max-width: 640px) {
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card,
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card.is-flipped { min-height: 180px; }
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-front,
  .skill-view-section[data-skill='vocabulary'] .vocab-catalogue-deck .vocab-card-back { gap: .28rem; padding: .48rem .52rem; }
  .skill-view-section[data-skill='grammar'] .grammar-concept-card { min-height: 0; padding: .62rem; }
  .skill-view-section[data-skill='grammar'] .grammar-concept-card-heading { margin-bottom: .38rem; }
  .skill-view-section[data-skill='grammar'] .grammar-concept-icon { width: 2rem; height: 2rem; font-size: .96rem; }
  .skill-view-section[data-skill='grammar'] .grammar-concept-card > span { margin-bottom: .3rem; padding: .18rem .4rem; font-size: .59rem; }
  .skill-view-section[data-skill='grammar'] .grammar-concept-card h4 { margin-bottom: .28rem; font-size: .88rem; }
  .skill-view-section[data-skill='grammar'] .grammar-concept-card p { font-size: .74rem; line-height: 1.35; }
  #verbs .verb-catalogue-list { gap: .42rem; }
  #verbs .verb-catalogue-row { gap: .28rem; padding: .48rem .52rem; border-radius: 12px; }
  #verbs .verb-catalogue-examples { gap: .16rem; padding-top: .28rem; }
  #verbs .verb-catalogue-examples p { font-size: .61rem; line-height: 1.18; }
  #verbs .verb-catalogue-conjugate,
  #verbs .verb-catalogue-row[data-verb-level='B2'] .verb-catalogue-conjugate,
  #verbs .verb-catalogue-row[data-verb-level='C1'] .verb-catalogue-conjugate,
  #verbs .verb-catalogue-row[data-verb-level='C2'] .verb-catalogue-conjugate {
    width: fit-content;
    min-height: 25px;
    margin: 0;
    padding: .14rem .28rem;
    font-size: .6rem;
  }
}