/* User-confirmed preview: phone + tablet use the same tappable bottom chapter dock. */
@media (max-width:1024px){
  body{padding-bottom:calc(54px + env(safe-area-inset-bottom))!important}
  .grammar-mobile-dock{
    position:fixed;left:0;right:0;bottom:0;z-index:74;
    display:flex!important;align-items:stretch;
    background:rgba(255,255,255,.98);
    border-top:1px solid var(--editorial-line-strong);
    box-shadow:0 -8px 22px rgba(23,33,31,.07);
    padding-bottom:env(safe-area-inset-bottom);
    opacity:0;transform:translateY(8px);pointer-events:none;
    transition:.18s ease;
  }
  .grammar-mobile-dock.show{opacity:1;transform:none;pointer-events:auto}
  .grammar-mobile-dock a{
    min-width:0;min-height:48px;flex:1 1 0;
    border:0;border-right:1px solid #e8ecea;background:#fff;
    color:#68746f;text-decoration:none;
    display:flex;align-items:center;justify-content:center;
    padding:0 8px;font-size:12px;font-weight:760;white-space:nowrap;
  }
  .grammar-mobile-dock a:last-child{border-right:0}
  .grammar-mobile-dock a.is-active{background:var(--accent-soft);color:var(--accent)}
  html[data-theme="dark"] .grammar-mobile-dock{background:rgba(17,23,22,.98);border-top-color:#33403c;box-shadow:0 -8px 22px rgba(0,0,0,.24)}
  html[data-theme="dark"] .grammar-mobile-dock a{background:#111716;color:#aab6b1;border-right-color:#2d3935}
  html[data-theme="dark"] .grammar-mobile-dock a.is-active{background:#1a2b36;color:#9dcced}
}
@media (max-width:700px){
  .grammar-mobile-dock a{min-height:44px;font-size:10.5px;padding:0 5px}
}
@media (min-width:701px) and (max-width:1024px){
  .site-nav.reading-mode .grammar-header-links{display:none!important}
  .site-nav.reading-mode .grammar-header-copy{
    display:flex!important;flex-direction:column!important;align-items:center!important;
    gap:2px!important;max-width:calc(100vw - 190px)!important;
    width:max-content!important;text-align:center!important;white-space:normal!important;
  }
  .site-nav.reading-mode .grammar-header-divider{display:none!important}
  .site-nav.reading-mode .grammar-header-name{font-size:18px!important;line-height:1.15!important}
  .site-nav.reading-mode .grammar-header-meaning{
    display:block!important;max-width:100%!important;overflow:visible!important;
    text-overflow:clip!important;white-space:normal!important;line-height:1.25!important;
    text-align:center!important;font-size:12px!important;
  }
}