/* FijiLearn home only. Keep desktop labels and layout; phone controls retain
   their existing actions and full accessible names. Declare this layer before
   the older History layer so these focused important layout rules win. */
.fl-learner-short{display:none}
@layer fijilearn-mobile {
  @media (max-width:640px) {
    html #learning-header {
      display:grid!important;
      grid-template-columns:48px minmax(0,1fr) auto auto!important;
      grid-template-areas:"logo brand brand acct" "nav nav nav share" "bula bula stats stats"!important;
      align-items:center!important;gap:8px!important;
      min-height:169px!important;padding:8px 12px!important;
    }
    #learning-header :is(.hbar,.header-tools,.bw-group){display:contents!important}
    #learning-header .learner-nav {
      display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
      align-items:center!important;gap:8px!important;min-width:0!important;
      width:100%!important;margin:0!important;padding:0!important;overflow:visible!important;
    }
    #learning-header .learner-nav :is(a,button),
    #learning-header :is(.bw-pill,.bw-share,.dm-acct-btn) {
      display:inline-flex!important;align-items:center!important;justify-content:center!important;
      height:44px!important;min-height:44px!important;
      padding:8px 10px!important;font-size:14px!important;line-height:1.2!important;
      white-space:nowrap!important;
    }
    #learning-header #learner-link{min-width:0!important;flex:1 1 auto!important}
    #learning-header .fl-learner-full{display:none!important}
    #learning-header .fl-learner-short{display:inline!important}
    #learning-header .learner-nav #sync-status:not(:empty){
      grid-column:1/-1!important;white-space:normal!important;color:#24506e!important;
    }
    #learning-header .bw-pill{justify-self:start!important;width:auto!important;max-width:100%!important;gap:6px!important}
    #learning-header .bw-long{display:none!important}
    #learning-header .bw-short{display:inline!important}
    #learning-header .hstats {
      display:flex!important;grid-area:stats!important;justify-self:end!important;
      align-items:center!important;gap:6px!important;margin:0!important;
    }
    #learning-header .hstats .pill {
      display:inline-flex!important;align-items:center!important;justify-content:center!important;
      min-height:44px!important;height:44px!important;padding:0 8px!important;font-size:12px!important;
    }
    #learning-header .hstats #voice{width:44px!important;min-width:44px!important;padding:0!important;font-size:16px!important}
    #learning-header :is(a,button):focus-visible{outline:2px solid #075b94!important;outline-offset:2px!important}

    /* Keep the first lesson in reach without removing the two secondary actions. */
    .dn-rail{margin:12px 16px 16px!important;padding:0!important;width:auto!important;max-width:none!important}
    .dn-rail__head{gap:6px!important;margin-bottom:10px!important}
    .dn-rail__items{gap:8px!important}
    .dn-suggest{padding:12px 14px!important;min-height:72px!important}
    .dn-suggest--top{padding:16px!important;min-height:0!important}
    .dn-suggest--top .dn-suggest__label{font-size:24px!important;line-height:1.2!important;letter-spacing:-.02em!important}
    .dn-suggest--top .dn-suggest__why{font-size:14px!important;margin-top:4px!important;line-height:1.45!important}
    .dn-suggest--top::after{height:44px!important;margin-top:12px!important;padding-inline:20px!important}
    [data-dn-rail]:empty{min-height:332px!important}
  }
}