/* ===========================================================================
   Paged reader for the pentagon course — stylesheet.
   Everything here is inert until JS adds `pg-on` to <html>, so one class
   switches the whole thing off and desktop never sees a byte of it.

   The numbers are measured, not chosen. Sources, all on the live page at 375x812:
     - a lesson's content is 11,601px tall today = 14.3 screens of scrolling
     - height = chars * lineHeight * font^2 / (1.97 * columnWidth), with 1.97
       calibrated on 32 real text boxes and re-confirmed at 30px, 38px and 44px
     - 37 of the 171 blocks are reference artifacts and carry 50% of all
       characters; taking them out of the prose budget is what buys the big type
     - a 250-character prose screen supports 34px, a 200-character one 38px

   The hard problem this file solves is not layout, it is the cascade. Six
   !important rules already target `.content-text p` and `.lesson-body p`
   directly (18.5 / 17.5 / 20 / 19 / 28 / 25px across four media blocks).
   Inheritance has no specificity, so a size set on a slide wrapper can never
   reach the text — verified: a wrapper set to 38px still rendered its
   paragraphs at 25px. Every type rule below therefore targets the leaf
   elements, carries !important, and outranks those rules on specificity.
   =========================================================================== */

/* ---------- 1. the shell: the document itself stops scrolling ---------- */
html.pg-on, html.pg-on body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.pg-on body { position: relative; background: #f6f8fc; }

/* The first build appended the track inside .lesson-body and left the page above
   it. A screenshot showed what the numbers had not: the lesson header still
   occupying 176px at the top, a white gap under it, the track running 1px past
   the viewport so the last line was cut by the nav bar, and the lesson-sheet
   backdrop sitting over everything. Making the track a fixed layer removes all
   four at once, and nothing underneath has to be hidden one selector at a time. */
html.pg-on .side-panel,
html.pg-on .course-hero,
html.pg-on .lesson-sub,
html.pg-on .value-strip,
html.pg-on .xp-read,
html.pg-on .aisp-tour-fab,
html.pg-on .mnav,
html.pg-on .ls-backdrop,
html.pg-on header,
html.pg-on footer { display: none !important; }

/* the original containers stay in the DOM — code still looks elements up by id —
   but they are pushed out of sight rather than removed */
html.pg-on .course-shell { position: absolute !important; inset-inline-start: -99999px !important;
                           width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* ---------- 1b. Arabic rendering, fixed inside the reader only ---------- */
/* Two real defects, both confirmed in the live file, both made worse by big type
   in a narrow column.

   word-break:break-word is set on pre/code inside the content (line 1313) and on
   .c-md table cells (line 2085). In Arabic a break inside a word makes the
   renderer shape the two halves as separate words — final form before the break,
   initial form after — so one word becomes two malformed ones. overflow-wrap
   does the job that was actually wanted: it only breaks a word that cannot fit
   at all, which at these sizes is a long Latin token, not Arabic.

   The stack is "Segoe UI", Tahoma, Arial and there are 40 font-weight:900 and
   20 font-weight:800 declarations. None of those faces ships an Arabic 800 or
   900, so the browser synthesises the weight on top of an already-bold 700,
   which thickens the cursive joins and fills the counters of ه م و ق. Capping at
   700 inside the reader uses the real bold instead of a smeared one. */
html.pg-on .pg-slide *,
html.pg-on #pgSheetBody * { word-break: normal !important; overflow-wrap: break-word; }
html.pg-on .pg-slide [style*="font-weight"],
html.pg-on .pg-slide b, html.pg-on .pg-slide strong,
html.pg-on .pg-slide h1, html.pg-on .pg-slide h2, html.pg-on .pg-slide h3,
html.pg-on .pg-slide h4, html.pg-on .pg-slide .c-box-h, html.pg-on .pg-slide .c-prompt-h,
html.pg-on .pg-slide .c-real-h, html.pg-on .pg-slide .c-ba-tag,
html.pg-on #pgSheetBody b, html.pg-on #pgSheetBody strong { font-weight: 700 !important; }
html.pg-on .pg-slide, html.pg-on #pgSheet { letter-spacing: normal !important; }
html.pg-on .pg-slide, html.pg-on #pgNav, html.pg-on #pgSheet { touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; }

/* ---------- 2. the track ---------- */
/* A real scroll container, not a transform strip. Three reasons, heaviest first:
   the gesture is then the platform's own (momentum, half-swipe threshold and
   elastic end come from the OS and run on the compositor, so a fling cannot
   stutter while the AI coach is mid-fetch); a transform would make every slide
   a containing block and silently break the position:fixed sheet and nav; and
   scrollIntoView moves it with no direction arithmetic at all.

   On RTL that last point is load-bearing. Measured in Chromium: scrollLeft is
   0 at the right edge and NEGATIVE leftward, and every positive assignment
   clamps to 0 — so `track.scrollLeft = i * w` does nothing. This file never
   names a direction and the JS never touches scrollLeft. */
#pgTrack {
  position: fixed;
  inset-block-start: 6px;                 /* under the rail */
  inset-block-end: var(--pg-nav);         /* above the bar; JS measures the real height */
  inset-inline: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* load-bearing: without it a swipe past the first screen triggers the browser's
     back gesture and the reader navigates out of the course */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: #ffffff;
  z-index: 30;
}
#pgTrack::-webkit-scrollbar { display: none; }

/* scroll-snap-stop keeps a hard flick from crossing several screens, which is
   the difference between a pager and a filmstrip. */
.pg-slide {
  flex: 0 0 100%;
  background: #ffffff;
  color: #2d3855;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
  padding: 18px 16px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* flex children shrink below their content height by default, which silently
   crushed a 1,669-character card into a 740px slide and clipped its text in the
   first prototype. This is the line that stops that. */
.pg-slide > .pg-in { flex: 0 0 auto; min-height: 0; width: 100%; }

/* an under-full screen is composed, not cut: the content sits a little above
   the optical centre so the bottom bar's weight does not drag the eye down */
.pg-slide.pg-prose > .pg-in { margin-block: auto; }
.pg-slide.pg-ref,
.pg-slide.pg-card { justify-content: flex-start; }

/* ---------- 3. type: four rungs, chosen by the JS, applied to the leaves ---------- */
/* Rungs rather than a continuous size, so adjacent screens look intentional
   rather than arbitrary. The JS floors to the rung at or below the computed
   fit — rounding to the nearest would overflow: a 181-character paragraph
   computes 39.6px, and 44px measured 872px against a 738px box. */
html.pg-on .pg-slide .pg-in p,
html.pg-on .pg-slide .pg-in li,
html.pg-on .pg-slide .pg-in .c-box,
html.pg-on .pg-slide .pg-in .c-steps li,
html.pg-on .pg-slide .pg-in .c-ul li {
  font-size: var(--pgf) !important;
  line-height: var(--pglh) !important;
  margin: 0 0 .55em !important;
}
html.pg-on .pg-slide .pg-in > *:last-child { margin-bottom: 0 !important; }

html.pg-on .pg-slide .pg-in h3 {
  font-size: calc(var(--pgf) * 1.06) !important;
  line-height: 1.45 !important;
  margin: 0 0 .5em !important;
  padding-inline-start: 12px !important;
  border-inline-start: 4px solid var(--pg-accent) !important;
}
html.pg-on .pg-slide .pg-in .c-box-h { font-size: calc(var(--pgf) * .62) !important; }

/* Reference and interactive screens keep one fixed, comfortable size. They are
   scanned and copied rather than read line by line, and a size that tracked
   their 698-1751 character range would put them at 16-22px — smaller than the
   page already shows, which is the defect, not the fix. */
html.pg-on .pg-slide.pg-ref  .pg-in,
html.pg-on .pg-slide.pg-card .pg-in { --pgf: 24px; --pglh: 1.70; }

/* The reference artifacts carry their own pinned leaf sizes — 24 of them across
   four media blocks (.c-prompt-text, .c-real-col, .c-ba-card, .c-ba-tag,
   .c-prompt-h, .c-real-h, .c-real-note, .c-real-tag, small). None is a p or an
   li, so the rule above could never reach them and they would render at 12.5-18px
   inside a reader whose prose is 38px. Each is re-pinned here, in proportion to
   --pgf, at a specificity that outranks a bare class selector. */
html.pg-on .pg-slide .pg-in .c-prompt-text,
html.pg-on .pg-slide .pg-in .c-real-col,
html.pg-on .pg-slide .pg-in .c-ba-card,
html.pg-on #pgSheetBody .c-prompt-text,
html.pg-on #pgSheetBody .c-real-col,
html.pg-on #pgSheetBody .c-ba-card      { font-size: var(--pgf) !important; line-height: var(--pglh) !important; }

html.pg-on .pg-slide .pg-in .c-prompt-h,
html.pg-on .pg-slide .pg-in .c-real-h,
html.pg-on #pgSheetBody .c-prompt-h,
html.pg-on #pgSheetBody .c-real-h       { font-size: calc(var(--pgf) * .72) !important; }

html.pg-on .pg-slide .pg-in .c-ba-tag,
html.pg-on .pg-slide .pg-in .c-real-tag,
html.pg-on .pg-slide .pg-in .c-real-note,
html.pg-on #pgSheetBody .c-ba-tag,
html.pg-on #pgSheetBody .c-real-tag,
html.pg-on #pgSheetBody .c-real-note    { font-size: calc(var(--pgf) * .66) !important; }

html.pg-on .pg-slide .pg-in small,
html.pg-on .pg-slide .pg-in .c-ba-card small,
html.pg-on #pgSheetBody small           { font-size: calc(var(--pgf) * .74) !important;
                                          line-height: 1.6 !important; }

/* the artifact's own buttons stay thumb-sized rather than inheriting 14.5px */
html.pg-on .pg-slide .pg-in .c-copy,
html.pg-on .pg-slide .pg-in .c-try,
html.pg-on .pg-slide .pg-in .c-edit,
html.pg-on #pgSheetBody .c-copy,
html.pg-on #pgSheetBody .c-try,
html.pg-on #pgSheetBody .c-edit { font-size: 19px !important; min-height: 54px !important;
                                  border-radius: 13px !important; }

/* the sheet is a reading surface in its own right */
html.pg-on #pgSheetBody { --pgf: 24px; --pglh: 1.75; }

/* a chapter screen: the heading owns the screen, so it is set as an opener
   rather than a title stranded above nothing */
html.pg-on .pg-slide.pg-chapter > .pg-in { margin-block: auto; text-align: start; }
html.pg-on .pg-slide.pg-chapter h3 {
  font-size: var(--pgf) !important;
  line-height: 1.45 !important;
  border-inline-start-width: 6px !important;
  padding-inline-start: 16px !important;
  margin: 0 !important;
}

/* ---------- 4. one surface: the block's chrome becomes the screen's ---------- */
/* Today a reader sees a card inside a panel inside a shell — he called it
   a page inside a page. Inside a slide the box keeps its tint and loses its
   frame, so the screen itself is the object. */
html.pg-on .pg-slide .pg-in > .c-box,
html.pg-on .pg-slide .pg-in > .c-prompt,
html.pg-on .pg-slide .pg-in > .c-ba,
html.pg-on .pg-slide .pg-in > .c-real,
html.pg-on .pg-slide .pg-in > .plab,
html.pg-on .pg-slide .pg-in > section.card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
html.pg-on .pg-slide .pg-in > .c-ba .c-ba-card,
html.pg-on .pg-slide .pg-in > .c-real .c-real-col { border-radius: 14px !important; }
html.pg-on .pg-slide .pg-in .c-real-pair { grid-template-columns: 1fr !important; }

/* ---------- 5. the progress rail ---------- */
/* Logical properties only, so it fills from the reading origin in both
   directions and no rule has to be mirrored for ?lang=en. */
/* opaque, not a tint: the page behind the reader is the course's dark shell, and
   a translucent rail let it through as a black strip above the white screens */
#pgRail {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 40;
  height: 6px; background: #e6ebf4; display: flex;
}
#pgRailFill {
  background: linear-gradient(90deg, var(--pg-accent), var(--pg-accent2));
  inline-size: 0; transition: inline-size 240ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- 6. the bottom bar: one primary action ---------- */
#pgNav {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 40;
  height: calc(68px + env(safe-area-inset-bottom));
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-block-start: 1px solid rgba(15,23,42,.08);
  box-sizing: border-box;
}
.pg-btn {
  min-height: 52px; border: 0; border-radius: 14px; font: 800 19px/1 inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#pgPrev { flex: 0 0 56px; background: #eef2f9; color: #1e3a5f; font-size: 24px; }
#pgNext { flex: 1 1 auto; background: linear-gradient(90deg, var(--pg-accent), var(--pg-accent2)); color: #fff; }
#pgNext:active, #pgPrev:active { transform: scale(.97); }
.pg-btn[disabled] { opacity: .38; pointer-events: none; }
#pgCount { flex: 0 0 auto; font: 700 15px/1 inherit; color: #64748b; min-width: 48px;
           text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- 7. the artifact sheet, a child of <body> ---------- */
/* The 37 reference artifacts are 698-1751 characters. None fits a screen at a
   size that belongs to this reader, and splitting a frozen AI answer across
   screens stops it being evidence. So the screen carries a real excerpt and
   one action, and the full artifact opens here — a scroll the reader chose,
   outside the track, with nothing nested. Proven by moving a real .c-prompt
   here and firing its Edit button: the inline handler still resolved and still
   found its node, and position:fixed stayed viewport-relative. */
#pgSheet[hidden] { display: none; }
#pgSheet {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: #fff;
}
#pgSheetHead {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  border-block-end: 1px solid rgba(15,23,42,.08);
  font: 800 19px/1.4 inherit; color: #16203a;
}
#pgSheetClose { margin-inline-start: auto; min-width: 48px; min-height: 48px; border: 0;
                border-radius: 12px; background: #eef2f9; color: #1e3a5f; font-size: 22px; cursor: pointer; }
#pgSheetBody { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
               padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
               font-size: 24px; line-height: 1.75; }

/* the excerpt on the poster screen, with the fade that says there is more */
.pg-excerpt { position: relative; max-height: 46vh; overflow: hidden; }
.pg-excerpt::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 90px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
}
.pg-open {
  width: 100%; min-height: 56px; margin-block-start: 14px; border: 0; border-radius: 14px;
  background: #16203a; color: #fff; font: 800 20px/1 inherit; cursor: pointer;
}

/* ---------- 8. motion: the scroll IS the transition ---------- */
/* There is deliberately no per-screen entrance animation. The first version had
   a 260ms fade-and-rise on arrival; it plays about 19 times per lesson and each
   play begins AFTER the scroll has already settled, so it adds a second beat and
   reads as latency rather than polish. The platform's own snap scroll already
   carries the content 1:1 with the finger, with the OS's momentum and its own
   settle — there is nothing left for an animation to improve.
   What remains is press feedback and the sheet, where motion communicates
   something the scroll cannot. */
#pgSheet:not([hidden]) { animation: pgSheetUp 320ms cubic-bezier(.32,.72,0,1) both; }
@keyframes pgSheetUp { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #pgSheet:not([hidden]) { animation: none; }
  #pgRailFill { transition: none; }
  #pgTrack { scroll-behavior: auto; }
  #pgNext:active, #pgPrev:active { transform: none; }
}

/* ---------- 9. tokens ---------- */
html.pg-on { --pg-accent: #2c5aa0; --pg-accent2: #0ea5e9; --pgf: 30px; --pglh: 1.65;
             --pg-nav: calc(68px + env(safe-area-inset-bottom)); }

/* ---------- 10. the desktop-site-mode phone ---------- */
/* A phone with Desktop site on reports a 980px layout viewport and then shrinks
   the result onto about 412px of glass. The existing fix sets html.aisp-dmp and
   an --aisp-dmp-k multiplier; the reader must multiply by it too, or every size
   lands on the glass at 42% of its value. The slide stays one layout viewport
   wide, because that is what the snap container measures. */
html.pg-on.aisp-dmp { --pgk: var(--aisp-dmp-k, 2.38); }
html.pg-on.aisp-dmp .pg-slide { padding: calc(18px * var(--pgk)) calc(16px * var(--pgk)); }
html.pg-on.aisp-dmp #pgNav { height: calc(68px * var(--pgk)); padding: calc(8px * var(--pgk)) calc(12px * var(--pgk)); }
html.pg-on.aisp-dmp .pg-btn { min-height: calc(52px * var(--pgk)); font-size: calc(19px * var(--pgk)); }
html.pg-on.aisp-dmp #pgRail { height: calc(6px * var(--pgk)); }
html.pg-on.aisp-dmp #pgSheetBody { font-size: calc(24px * var(--pgk)); }