/* ============================================================
   LLOS UX SYNC + MOBILE-FIRST  (appended 2026-06-16)
   Site-wide baseline. Studios / Grammar Academy / admin are
   already excluded from llos.css by the shell, so this never
   touches them. Design tokens + safe mobile-first essentials.
   ============================================================ */
:root{
  --llos-bg:#faf6ef; --llos-card:#ffffff; --llos-ink:#27211b; --llos-muted:#857a6c;
  --llos-line:#ece3d4; --llos-accent:#c2410c; --llos-accent-soft:#fdeee6;
  --llos-ok:#1f7a4d; --llos-radius:14px; --llos-maxw:1160px;
  --llos-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}
/* media never overflows a phone screen */
img,video,iframe,canvas,embed,object{max-width:100%;height:auto;}
/* wide tables scroll inside their box instead of stretching the page */
table{max-width:100%;}
pre,code{white-space:pre-wrap;word-break:break-word;}
/* long words / URLs wrap instead of forcing horizontal scroll */
p,li,h1,h2,h3,h4,a,span,div{overflow-wrap:break-word;}

@media (max-width:640px){
  /* 16px form fields stop iOS from auto-zooming on focus */
  input,select,textarea{font-size:16px;}
  /* comfortable tap targets */
  a,button,.btn,[role=button],input[type=button],input[type=submit]{min-height:42px;}
  /* keep oversized desktop headings readable on phones */
  h1{font-size:clamp(22px,6.2vw,30px);line-height:1.22;}
  h2{font-size:clamp(19px,5.2vw,25px);line-height:1.25;}
  /* tame fixed desktop widths that cause sideways scroll */
  .container,.wrap,.content,main,section{max-width:100%;}
}


/* === section skins: unify CBSE / Dictionary / Games to the LLOS palette (2026-06-16) ===
   Re-maps each section's OWN css variables to the canonical LLOS tokens.
   Scoped to a body class so no other page is affected. No layout changes. */
body.llos-skin-dict{
  --primary:#c2410c; --primary-hover:#a8380a; --bg:#faf6ef; --surface:#ffffff;
  --border:#ece3d4; --accent-soft:#fdeee6;
  --text-primary:#27211b; --text-secondary:#6b6052; --text-muted:#857a6c;
}
body.llos-skin-games{
  --primary-green:#c2410c; --light-green:#fdeee6; --border-green:#f0d9c8;
  --primary-gradient:linear-gradient(135deg,#c2410c 0%,#ea580c 100%);
}
body.llos-skin-cbse{ --accent:#c2410c; background:#faf6ef; }

/* games: hardcoded green accents not covered by the vars */
body.llos-skin-games .cat-card-count{ color:#c2410c; }
body.llos-skin-games .cat-card:hover .cat-card-cta{ color:#a8380a; }

/* ============================================================
   MOBILE & TABLET UX PASS (2026-06-21)
   Additive + mobile-first. Improves reach, readability, and
   "movable" swipe rows without changing the desktop layout.
   (Studios / Academy / admin are excluded from this stylesheet.)
   ============================================================ */

/* kill the 300ms tap delay + give scroll areas momentum */
a,button,[role=button],input,select,label,summary{touch-action:manipulation;}

/* in-page anchors are no longer hidden under the sticky header */
:target{scroll-margin-top:78px;}

/* breadcrumbs scroll sideways instead of overflowing the screen */
.llos-shell-breadcrumbs{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.llos-shell-breadcrumbs::-webkit-scrollbar{display:none;}

/* opt-in: a horizontally swipeable, snapping card row (add class="llos-hscroll") */
.llos-hscroll{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:.35rem;scrollbar-width:thin;}
.llos-hscroll>*{scroll-snap-align:start;flex:0 0 auto;}
.llos-hscroll::-webkit-scrollbar{height:6px;}
.llos-hscroll::-webkit-scrollbar-thumb{background:var(--llos-line);border-radius:99px;}

@media (max-width:640px){
  /* generous tap targets (44px), incl. nav links */
  a,button,.btn,[role=button],input[type=button],input[type=submit],
  .llos-shell-nav a,.llos-shell-footer a{min-height:44px;}
  /* never force sideways scrolling (clip keeps the sticky header working) */
  html,body{overflow-x:clip;}
  /* wide data tables get their own horizontal scroll instead of stretching the page */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* tighten generic multi-column grids so cards aren't cramped */
  [class*="grid"]{gap:.75rem;}
}

/* tablet (641–1024): use the width, keep comfortable gutters */
@media (min-width:641px) and (max-width:1024px){
  .container,.wrap,.content{max-width:100%;padding-left:1rem;padding-right:1rem;}
}