/* ══════════════════════════════════════════════════════════════════════════════
   Pedagion — shared responsive baseline
   ══════════════════════════════════════════════════════════════════════════════
   Loaded by every page, BEFORE each page's own <style> block, so anything here can
   still be overridden deliberately. It fixes the defects that are structural rather
   than per-page, measured by rendering every page from 320px to 1366px:

     · flex and grid children default to min-width:auto, so one long unbroken string
       — a URL, a chemical formula, a long transliterated term — makes the whole row
       wider than the phone. This is the single most common cause of the sideways
       scroll that makes an app feel broken, and neither dashboard.html nor
       viewer.html carried a single overflow-wrap rule before this file.
     · media with no max-width pushes past the viewport.
     · tables are the other reliable overflow: they must scroll inside their own box,
       not drag the page sideways.
     · touch targets below 44px fail Android accessibility and Play's pre-launch
       report; several shared controls measured 14-21px tall.
     · notched and punch-hole phones are everywhere in India — content needs the
       safe-area insets, which only work with viewport-fit=cover set in the meta.

   Written mobile-first: the rules that matter most apply at every width, and the
   wider breakpoints only relax them.
   ══════════════════════════════════════════════════════════════════════════════ */

/* 1. NOTHING SCROLLS SIDEWAYS. ---------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* The flex/grid min-width:auto trap. Scoped to flex and grid children so it cannot
   disturb ordinary block layout. */
:where(.stats, .grid, [style*="display:grid"], [style*="display: grid"],
       [style*="display:flex"], [style*="display: flex"]) > * { min-width: 0; }

/* 2. LONG WORDS BREAK INSTEAD OF BREAKING THE PAGE. -------------------------- */
/* An earlier version of this rule used `overflow-wrap: anywhere` plus
   `word-break: break-word` on every text element. Both were wrong here, for the same
   reason: neither merely ADDS break opportunities - each lowers the element's
   MIN-CONTENT width to a single character. (`word-break: break-word` is a deprecated
   alias defined as `word-break: normal` + `overflow-wrap: anywhere`, so it re-creates
   the effect on its own; removing only the `overflow-wrap` line changes nothing.
   Verified in Chrome: with either property present a short item splits, with neither
   it does not.)
   Once min-content is one character, anything that can be squeezed gets squeezed and
   then split mid-word. Measured at 360px: home.html's plan limit of 20 rendered as
   "2" over "0" - a pricing claim, not a cosmetic defect - and privacy.html's data
   table shredded 41 words, "Account information" coming out as "Acc/ount/info/rma/tion".
   The default is therefore break-word, which breaks a token only when it would
   otherwise overflow the LINE and leaves intrinsic sizing alone. */
:where(p, li, dd, dt, blockquote, figcaption, label, summary,
       h1, h2, h3, h4, h5, h6, .card) {
  overflow-wrap: break-word;
}
/* `anywhere` is kept where genuinely unbreakable tokens actually occur - long-form and
   machine-generated text, which is prose in a block and never a short flex item. These
   are the containers that hold a pasted URL, C6H12O6 + long suffix, or an un-spaced
   Devanagari transliteration. */
:where(.content, .prose, .chapter, .chapter-body, .lesson, .message, .answer,
       .curriculum-text, .break-anywhere) {
  overflow-wrap: anywhere;
}
/* Short numeric and label chrome must never split, whatever squeezes it. */
:where([data-plan-limit], [data-plan-price], .price, .badge, .pill, .chip,
       .stat-value, .count, time) {
  white-space: nowrap;
}
:where(code, pre, kbd, samp) { overflow-wrap: anywhere; white-space: pre-wrap; }
pre { max-width: 100%; overflow-x: auto; }

/* 3. MEDIA NEVER EXCEEDS ITS BOX. ------------------------------------------- */
:where(img, svg, video, canvas, iframe, embed, object) { max-width: 100%; }
:where(img, video) { height: auto; }

/* 4. TABLES SCROLL INSIDE THEMSELVES. --------------------------------------- */
/* Tables carry min-width so columns stay readable; that min-width must not reach
   the page. Any table not already inside a scroll container gets one. */
:where(table) { max-width: 100%; }
/* Without a scroll container the ONLY way a 3-column table fits a 360px phone is by
   breaking words inside the cells, which is what shredded privacy.html. `.pg-table-scroll`
   below has to be applied by hand and never was, so give every table its own scroll on
   small screens and a floor under each column so the text stays readable. */
@media (max-width: 768px) {
  :where(table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  :where(table) :where(td, th) { min-width: 8.5rem; overflow-wrap: break-word; }
  /* A column that is simply off the right edge is invisible - on privacy.html the whole
     "Purpose" column was unreachable unless you guessed to swipe. These are the standard
     local/scroll background shadows: a soft edge appears only on a side that has more
     content, and fades out when you reach that end. Pure CSS, no script. */
  :where(table) {
    background-image:
      linear-gradient(to right,  var(--pg-table-bg, #fff) 30%, rgba(255,255,255,0)),
      linear-gradient(to left,   var(--pg-table-bg, #fff) 30%, rgba(255,255,255,0)),
      radial-gradient(farthest-side at 0 50%,   rgba(15,23,42,.16), rgba(15,23,42,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.16), rgba(15,23,42,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 13px 100%, 13px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}
.pg-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* 5. TOUCH TARGETS. ---------------------------------------------------------- */
/* 44px is the Android and WCAG 2.5.5 floor. Applied to real controls only —
   inline links inside a sentence are excluded, because padding them out would
   wreck body copy for no accessibility gain. */
@media (pointer: coarse) {
  :where(button, [role="button"], input[type="submit"], input[type="button"],
         .btn, .btn-primary, .act-btn, .topbar-btn, .tab, .nav-link) {
    min-height: 44px;
  }
  :where(input, select, textarea) { min-height: 44px; font-size: 16px; }
  /* Standalone links that act as controls rather than words in a sentence. Targeted
     by the classes actually used in this app plus links sitting alone in a nav or
     form-actions row — a blanket rule on every <a> would pad out body copy, which
     helps nobody. */
  :where(a.forgot-link, a.back-nav, a.btn, a.btn-primary, a.act-btn,
         nav > a, .form-actions > a, .auth-links > a, footer > a,
         .modal-link > a, .top-bar > a, .logo) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* 16px on inputs is not cosmetic: iOS Safari and some Android browsers zoom the
     page when a focused input is smaller, and the user is then left zoomed in. */
}

/* 6. HORIZONTAL TAB STRIPS SCROLL RATHER THAN CLIP. -------------------------- */
/* org-admin.html cut "Settings" in half and put "Billing" off-screen entirely on a
   360px phone, with no way to reach either. A tab strip must always be reachable. */
:where(.tabs, .tab-bar, .tab-strip, [role="tablist"]) {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}
:where(.tabs, .tab-bar, .tab-strip, [role="tablist"])::-webkit-scrollbar { display: none; }
:where(.tabs, .tab-bar, .tab-strip, [role="tablist"]) > * { flex: 0 0 auto; }

/* 7. SAFE AREAS on notched and punch-hole devices. --------------------------- */
/* Only has an effect where the page sets viewport-fit=cover, which is why that is
   now on every page's viewport meta. */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
:where(.bottom-nav, .mobile-bottom-nav, .fixed-bottom) {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 8. SMALLEST PHONES STILL IN SERVICE (<=360px). ---------------------------- */
@media (max-width: 360px) {
  :where(.stats, .grid-2, .grid-3) { grid-template-columns: 1fr !important; }
  :where(h1) { font-size: clamp(1.4rem, 6vw, 2rem); }
  :where(h2) { font-size: clamp(1.2rem, 5vw, 1.6rem); }
}

/* 9. TABLETS AND LANDSCAPE. -------------------------------------------------- */
/* A phone layout stretched to 800px is not a tablet layout, and it is the specific
   thing Google Play's large-screen guidance calls out. Content gets a sane measure
   instead of running the full width of the slab. */
@media (min-width: 700px) and (max-width: 1100px) {
  :where(.content, .container, .page, main) { max-width: 100%; }
  :where(.reading-column, .prose, .chapter-body) { max-width: 68ch; margin-inline: auto; }
}

/* 10. Respect the user's motion preference — cheap, and Play's accessibility
       scan looks for it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}