/* pages/trainer/skin-responsive.css — ember re-skin: breakpoints and reduced motion.
   Split from the pre-#149 monolith — rule ORDER preserved; see docs/architecture.md
   ("CSS layers") for the load-order contract each page's <head> follows. */
/* ---- responsive ---- */
@media(max-width:1100px){
  .shellui .todaygrid{grid-template-columns:minmax(0,1fr)}
  .pptoprow{grid-template-columns:minmax(0,1fr)}
  .shellui .libgrid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:899px){
  /* the sidebar becomes the bottom tab bar (style.css set most of this up;
     the pieces below are what the new shell adds) */
  body.shellui{height:auto;overflow:auto}
  .shellui .shell{height:auto;display:block}
  .shellcol{height:auto}
  .shellui main{overflow:visible;padding:24px 16px 40px}
  /* main is not the scroller here (the document is), so the desktop
     first-child margin would just stack on the 24px padding above. */
  .shellui main>:first-child{margin-top:0}
  .shellui .side{
    /* the base rule above says position:static at desktop, and its two-class
       specificity beats style.css's one-class mobile block — so the bottom-bar
       placement is restated here */
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:30;
    height:auto;width:auto;padding:5px 8px;
    flex-direction:row;align-items:center;
    border-right:0;border-top:1px solid var(--pl-line);
    background:color-mix(in srgb, var(--pl-surface) 95%, transparent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  .shellui .tabs{flex-direction:row;flex:1;gap:2px}
  .sbrand{display:none}
  .shellui .tabs button{border-right:0;justify-content:center;padding:8px 6px;border-radius:10px}
  .shellui .tabs button.active{border-radius:10px}
  .shellui .tabs button .ic{width:15px;height:15px}
  .shellui .topbar{height:auto;flex-wrap:wrap;padding:10px 16px;gap:10px}
  .pphero h2{font-size:30px}
  .ppmastery{padding:24px}
  .ppring{width:170px;height:170px;margin:0 auto}
}
@media(max-width:480px){
  .shellui .dayhead h2{font-size:26px}
  .shellui .pstep{padding:16px;border-radius:18px}
  .shellui .pstep .pico{width:44px;height:44px;border-radius:12px}
  .pstat b{font-size:17px}
  .shellui .headctl{width:auto;margin:0 0 0 auto;order:0}
  .pphm-grid i{width:11px;height:11px}
}

@media (prefers-reduced-motion:reduce){
  .shellui .kcell,.ppring .arc{transition:none}
}