/* ==========================================================
   TALKING BOOK V81 — PROFESSIONAL RESPONSIVE SHELL
   Compact adaptive header for phone, tablet, laptop, desktop
   ========================================================== */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,select,input{touch-action:manipulation}
.mobile-menu-toggle{display:none}

/* Laptop / compact desktop: preserve the full toolbar but reduce wasted height. */
@media (min-width:1101px){
  #tbTopbar.topbar{min-height:68px;padding:10px 16px;gap:14px}
  #tbTopbar .top-actions{align-items:center;gap:9px}
  #tbTopbar .contents-btn{min-height:42px;padding:9px 13px}
  #tbTopbar .mini-field{gap:4px;min-width:150px}
  #tbTopbar .mini-field span{font-size:11px}
  #tbTopbar #appLanguage{min-height:42px;padding:9px 12px}
  #tbTopbar #logoutBtn{min-height:42px}
}

/* Tablet and small laptop: one tidy bar, smaller controls, no redundant language badge. */
@media (min-width:821px) and (max-width:1100px){
  #tbTopbar.topbar{display:flex;position:sticky;top:0;z-index:40;min-height:64px;gap:10px;padding:9px 12px;border-radius:0 0 18px 18px;background:rgba(255,255,255,.97);backdrop-filter:blur(14px)}
  #tbTopbar .tb-login-home{flex:0 1 auto;min-width:185px;padding:2px}
  #tbTopbar .brand-mark.small{width:39px;height:39px;border-radius:12px;font-size:15px}
  #tbTopbar .tb-login-home strong{font-size:16px;line-height:1.15}
  #tbTopbar .tb-login-home small{font-size:10px;line-height:1.2}
  #tbTopbar .top-actions{flex:1 1 auto;display:flex!important;flex-flow:row nowrap;justify-content:flex-end;align-items:center!important;gap:6px;min-width:0}
  #tbTopbar .contents-btn,#tbTopbar #logoutBtn{min-height:42px;padding:8px 10px!important;white-space:nowrap}
  #tbTopbar .mini-field{display:block;min-width:138px;max-width:170px}
  #tbTopbar .mini-field>span{display:none}
  #tbTopbar #appLanguage{min-height:42px;padding:8px 10px;font-size:14px}
  #tbTopbar .tb-language-status{display:none}
}

@media (min-width:821px) and (max-width:940px){
  #tbTopbar .contents-btn{width:42px;min-width:42px;padding:0!important;font-size:16px}
  #tbTopbar .contents-btn span{display:none!important}
  #tbTopbar .mini-field{min-width:132px;max-width:150px}
}

/* Phone: header stays at ~58px until the learner explicitly opens Menu. */
@media (max-width:820px){
  .app-view{padding-top:0!important}
  #tbTopbar.topbar{
    position:sticky;top:0;z-index:100;
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;gap:7px!important;
    width:100%;min-height:58px;
    padding:7px 9px!important;
    border-radius:0 0 16px 16px!important;
    background:rgba(255,255,255,.975)!important;
    border:1px solid rgba(207,221,229,.92);
    box-shadow:0 8px 24px rgba(20,49,70,.10)!important;
    backdrop-filter:blur(16px)!important;
  }
  #tbTopbar .tb-login-home{min-width:0;max-width:100%;padding:1px 3px!important;border-radius:12px}
  #tbTopbar .brand-mark.small{flex:0 0 38px;width:38px;height:38px;border-radius:12px;font-size:14px}
  #tbTopbar .tb-login-home>span:last-child{min-width:0}
  #tbTopbar .tb-login-home strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;line-height:1.1}
  #tbTopbar .tb-login-home small{display:none!important}

  #tbTopbar .mobile-menu-toggle{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-width:76px;height:42px;padding:0 11px;
    border:1px solid rgba(24,65,91,.16);border-radius:13px;
    background:#f2f7fa;color:#173b55;
    font:800 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
    cursor:pointer;box-shadow:0 4px 12px rgba(23,59,85,.06)
  }
  #tbTopbar .mobile-menu-toggle:active{transform:scale(.98)}
  #tbTopbar .mobile-menu-toggle:focus-visible{outline:3px solid rgba(54,132,178,.25);outline-offset:2px}
  #tbTopbar .mobile-menu-icon{font-size:18px;line-height:1;transition:transform .18s ease}
  #tbTopbar.mobile-menu-open .mobile-menu-icon{transform:rotate(90deg)}

  /* Override the older V80 mobile toolbar that permanently occupied several rows. */
  #tbTopbar .top-actions{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:7px!important;align-items:stretch!important;
    width:100%;max-height:0;margin:0!important;padding:0!important;
    overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;
    border-top:0 solid transparent;
    transform:translateY(-5px);
    transition:max-height .24s ease,opacity .18s ease,transform .2s ease,padding .2s ease,border-color .2s ease;
  }
  #tbTopbar.mobile-menu-open .top-actions{
    max-height:230px;padding-top:8px!important;
    opacity:1;visibility:visible;pointer-events:auto;
    border-top:1px solid #e2ebf0;transform:none
  }
  #tbTopbar .contents-btn,#tbTopbar #logoutBtn{
    width:100%;min-height:43px!important;margin:0!important;padding:8px 9px!important;
    border-radius:12px!important;font-size:13px!important;box-shadow:none!important
  }
  #tbTopbar .contents-btn span{display:inline!important;font-size:12px!important}
  #tbTopbar .help-btn{grid-column:1/-1!important;background:#fff8e8!important;border-color:#ead8a4!important}
  #tbTopbar .mini-field{grid-column:1!important;display:block!important;min-width:0!important;margin:0!important}
  #tbTopbar .mini-field>span{display:none!important}
  #tbTopbar #appLanguage{width:100%;height:43px;min-height:43px!important;padding:7px 10px!important;border-radius:12px!important;font-size:15px!important;background:#fff}
  #tbTopbar .tb-language-status{display:none!important}
  #tbTopbar #logoutBtn{grid-column:2!important;background:#eef4f8!important;color:#41596a!important}

  /* Content starts immediately below the compact shell and anchors clear the sticky bar. */
  .app-view>article,.app-view>section{scroll-margin-top:70px}
  .levels-heading,.teen-levels-heading,.senior-levels-heading{scroll-margin-top:70px}
}

@media (max-width:390px){
  #tbTopbar.topbar{padding-left:7px!important;padding-right:7px!important}
  #tbTopbar .mobile-menu-toggle{min-width:66px;padding:0 8px}
  #tbTopbar .mobile-menu-toggle>span:last-child{display:none}
  #tbTopbar .brand-mark.small{flex-basis:36px;width:36px;height:36px}
  #tbTopbar .tb-login-home strong{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  #tbTopbar .top-actions,#tbTopbar .mobile-menu-icon{transition:none!important}
}