/* =====================================================================
   a11y-layout.css — making the shell's own screens survive enlarged text.

   THE BUG THIS FIXES
   ------------------
   The home screen is a painted lobby with its controls placed absolutely, in
   PIXELS, against a 440x900 design box. The accessibility text scale works by
   SHRINKING that box (440 -> 338 -> 275) and letting the stage transform blow it
   back up — which is what makes the type physically larger. Absolute pixel
   coordinates do not survive that: at 160% the box is 275px wide while
   `#startDay` still sat at left:92px with a generated `width:256px !important`,
   so it ran 100px past the edge; `#storeBtn` (top:14px, height 64px with large
   targets) and `#settingsBtn` (top:64px) simply overlapped.

   The design box keeps its ASPECT RATIO at every scale (440/900 and 275/562 are
   the same shape), so the fix is to express those coordinates as percentages of
   the box instead of pixels. The composition is then identical at every scale,
   and the type still grows because the smaller box is magnified more.

   Loaded LAST, after css/layout-overrides.css, because that file is generated by
   the layout editor and re-written wholesale — its `!important` pixel sizes have
   to be overridden from outside rather than edited in place.
===================================================================== */

/* ---- the lobby keeps its authored 440x900 box (js/scale.js) --------
   Nothing here repositions it any more. What IS needed is bigger WORDS on it,
   done directly, because the box no longer does it for us. The stone pads and
   the painted play button are art and keep their proportions. */
html[data-text-scale="1.15"] #home #storeBtn.store-btn b,
html[data-text-scale="1.15"] #home #settingsBtn.settings-btn b,
html[data-text-scale="1.3"] #home #storeBtn.store-btn b,
html[data-text-scale="1.3"] #home #settingsBtn.settings-btn b { font-size: 16px !important; }

html[data-text-scale="1.15"] #home #storeBtn.store-btn,
html[data-text-scale="1.3"] #home #storeBtn.store-btn{padding:0 22px 3px!important}
html[data-text-scale="1.15"] #home #settingsBtn.settings-btn,
html[data-text-scale="1.3"] #home #settingsBtn.settings-btn{padding:0!important}
html[data-text-scale="1.15"] #bottomNav button,
html[data-text-scale="1.15"] #bottomNav span,
html[data-text-scale="1.3"] #bottomNav button,
html[data-text-scale="1.3"] #bottomNav span { font-size: 16px !important; }

/* The button carries no text of its own — its label is painted into the lobby
   art, and the element is a transparent hit area over it. The 9px overhang was
   never typography: css/layout-overrides.css (generated by the layout editor)
   pins `width: 256px !important`, a number authored for the 440px design box,
   while `left/right: 92px` already position it. At 1.3 the box is 338px wide, so
   92 + 256 runs past the edge. Letting left/right decide the width restores what
   those two coordinates were meant to do. */
html[data-text-scale="1.15"] #home #startDay,
html[data-text-scale="1.3"] #home #startDay {
  width: auto !important;
  font-size: 21px !important;
}

/* The two lobby buttons are stacked by absolute `top` values authored for a
   ~41px button. With the 64px target floor they grew and overlapped by 10px.
   The second one's position is now DERIVED from the first one's height rather
   than being a second hand-written number, so the pair can never collide again
   whatever the target size. */
#home #storeBtn.store-btn,
#home #settingsBtn.settings-btn {
  min-height:max(50px,var(--a11y-tap,48px))!important;
  align-items: center !important;
}
#home #devReset.dev-reset-btn {
  top:228px!important;
}

/* ---- rows of controls must wrap rather than run off the edge --------
   Every one of these is a label beside a control, or two buttons side by side:
   at 160% the pair is wider than the box, and the second one was cut off.
   `min-width:0` is the part that actually matters — a flex child refuses to
   shrink below its content width without it, which is why the row overflowed
   instead of wrapping. */
.set-row,
.editor-actions,
.memory-editor-actions,
.page-nav,
.calendar-controls {
  flex-wrap: wrap;
  min-width: 0;
}
.set-row > *,
.editor-actions > *,
.memory-editor-actions > *,
.page-nav > * { min-width: 0; max-width: 100%; }
html[data-text-scale="1.3"] .editor-actions,
html[data-text-scale="1.3"] .memory-editor-actions,
html[data-text-scale="1.3"] .page-nav {
  flex-direction: column;
  align-items: stretch;
}
html[data-text-scale="1.3"] .editor-actions button,
html[data-text-scale="1.3"] .memory-editor-actions button { width: 100% !important; }

/* the size picker is three buttons in a row; at 160% they need to stack */

/* a switch must never be squeezed out by a long label */
.set-row .switch { flex: 0 0 auto; }

/* ---- the bottom nav is one painted object at one physical size -------
   The lobby keeps the 440px box while every other screen shrinks it, so the nav
   — which lives inside the same transformed stage — was drawn 1.6x larger on
   Settings than on the lobby, and covered the first row of controls. It is art,
   not type: it counter-scales so it is the same size everywhere, and the screen
   reserves the height it actually occupies. */
/* Only where the box was actually shrunk: the lobby keeps the 440px box, so
   counter-scaling there would shrink the nav below its authored size. */
html[data-text-scale="1.3"] body:not([data-screen="home"]) #bottomNav { transform: translate(-50%, 0) scale(0.769); transform-origin: bottom center; }

html[data-text-scale="1.3"] body:not([data-screen="home"]) #bottomNav { translate: none !important; left: 50%; }
/* the counter-scale shrinks width as well as height, so the bar is widened by
   the inverse first — it has to span the screen, it is the app's main navigation */
html[data-text-scale="1.3"] body:not([data-screen="home"]) #bottomNav { width: 130% !important; max-width: none !important; }

/* the sheet screens must clear it; the nav is ~128 layout px tall */
html[data-text-scale="1.3"] .screen { padding-bottom: 116px; }

/* .sheet-screen scrolls its own parchment, so the padding has to be on the
   SHEET as well — otherwise the nav sits over the last row of controls and the
   screen's own padding scrolls away above it. */
html[data-text-scale="1.3"] .sheet-screen .sheet { padding-bottom: 130px !important; }
html[data-text-scale="1.3"] #calendar,
html[data-text-scale="1.3"] #life,
html[data-text-scale="1.3"] #library { padding-bottom: 130px; }
html[data-text-scale="1.3"] #home.screen { padding-bottom: 0; }

/* Screen titles. Deliberately large and plain: this is the line that answers
   "where am I", which is the question this audience asks most often. */
.screen-title{
  margin:2px 18px 10px;font:800 26px/1.2 inherit;color:var(--deep,#143c2b);
}
html[data-text-scale="1.3"] .screen-title {font-size:24px;margin-bottom:8px}

/* ---- the life book at enlarged text --------------------------------
   `#life .life-book` is absolutely positioned with a hard height:610px and
   overflow:hidden — a number authored for the 900px design box. At 160% the box
   is 562px tall, so the sheet was taller than the screen AND clipped its own
   last 207px: the quota line and both page-turn buttons. The buttons ended up
   under the navigation bar with the screen unable to scroll, so a player who
   answered the first of a thousand questions could not reach the second.

   Above 100% it becomes an ordinary flow column that grows with its content and
   scrolls with the screen. The parchment loses its exact painted proportions;
   being able to turn the page is worth more. */
html[data-text-scale="1.3"] #life .life-book {
  position:static !important;
  left:auto !important; right:auto !important; top:auto !important;
  height:auto !important; min-height:0 !important;
  overflow:visible !important;
  margin:0 16px 0 !important;
}
html[data-text-scale="1.3"] #life .life-book textarea {
  height:auto !important; min-height:150px !important;
}
html[data-text-scale="1.3"] #life { overflow-y:auto; }
/* the page-turn row is the way out of this screen — it never hides */
html[data-text-scale="1.3"] #life .page-nav {
  margin-bottom:16px; gap:12px;
}
html[data-text-scale="1.3"] #life .page-nav button {
  flex:1 1 0; min-height:56px; border:2px solid currentColor; border-radius:14px;
}


/* ---- the developer's way into the full game list --------------------
   #devBtn was a 24x24 transparent square at opacity .15 — findable only by
   someone who knew it was there. It is the only route to #library, the grid of
   all eleven exercises, which is a testing screen rather than a player
   destination. Made legible so it can actually be used, and left plainly marked
   as a developer control so nobody mistakes it for part of the app. */
#home #devBtn.dev-btn {
  z-index: 7 !important;
  top: 14px !important; right: auto !important; left: 14px !important;
  width: auto !important; height: auto !important;
  min-height: 0 !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, .55) !important;
  color: #ffffff !important;
  font: 700 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: 1 !important;
}
#home #devBtn.dev-btn:active { background: rgba(0, 0, 0, .8) !important; }

/* =====================================================================
   FIXED-STAGE ACCESSIBILITY
   Text scaling must never resize the painted 440x900 scene. scale.js now
   preserves that geometry; these rules enlarge words only and keep overflow
   inside the parchment areas that visually own it.
===================================================================== */

html[data-text-scale="1.3"] body:not([data-screen="home"]) #bottomNav {
  left:50% !important;
  translate:-50% 0 !important;
  transform:none !important;
  width:min(100%,680px) !important;
  max-width:680px !important;
}
html[data-text-scale="1.3"] .screen,
html[data-text-scale="1.3"] #calendar,
html[data-text-scale="1.3"] #life,
html[data-text-scale="1.3"] #library { padding-bottom:92px; }

html[data-text-scale="1.3"] .editor-actions,
html[data-text-scale="1.3"] .memory-editor-actions,
html[data-text-scale="1.3"] .page-nav {
  flex-direction:row !important;
  align-items:center;
}
html[data-text-scale="1.3"] .editor-actions button,
html[data-text-scale="1.3"] .memory-editor-actions button {
  width:auto !important;
}

/* Daily route: the cards and statuettes retain their authored coordinates.
   Only the small progress labels grow. */
html[data-text-scale] #sessionGames .session-card .level-counter {
  font-size:calc(18px * var(--a11y-text,1)) !important;
}
html[data-big-targets="1"] #sessionGames .session-card .game-icon img {
  scale:1.22 !important;
  transform-origin:center center;
}

/* Calendar: controls stay in the scroll painting; long form/list content
   scrolls within the workspace instead of moving the whole background. */
#calendar { overflow:hidden !important; }
#calendar .memory-workspace {
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#c98a3d transparent;
}
#calendar .memory-workspace>label {
  font-size:calc(18px * var(--a11y-text,1));
}
#calendar .memory-date span:first-child,
#calendar .memory-date span:last-child {
  font-size:calc(16px * var(--a11y-text,1));
}
#calendar .memory-date strong {
  font-size:calc(66px * var(--a11y-text,1));
}
#calendar #todayBtn {
  font-size:calc(12px * var(--a11y-text,1));
}
#calendar #memoryAnswer {
  font-size:calc(18px * var(--a11y-text,1));
}
#calendar .memory-editor-actions button,
#calendar .entry,
#calendar .memory-empty {
  font-size:calc(16px * var(--a11y-text,1));
}
#calendar .entry b {
  font-size:calc(17px * var(--a11y-text,1));
}
#calendar .memory-empty b {
  font-size:calc(21px * var(--a11y-text,1));
}

/* Life: the decorative scroll and back button are fixed. Only the content
   viewport inside the paper scrolls, so headings can never escape above it. */
#life .life-book {
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#c98a3d transparent;
}
#life { overflow:hidden !important; }
html[data-text-scale="1.3"] #life { overflow:hidden !important; }
html[data-text-scale="1.3"] #life .life-book {
  position:absolute !important;
  left:56px !important;
  right:56px !important;
  top:126px !important;
  height:610px !important;
  min-height:0 !important;
  margin:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#c98a3d transparent;
}
#life .chapter,
#life .page-number {
  font-size:calc(16px * var(--a11y-text,1));
}
#life .life-book h2 {
  font-size:calc(24px * var(--a11y-text,1));
}
#life .life-book textarea {
  font-size:calc(18px * var(--a11y-text,1));
}
#life .editor-actions button,
#life .page-nav button,
#life .quota-line {
  font-size:calc(16px * var(--a11y-text,1));
}
html[data-text-scale="1.3"] #life .life-book textarea {
  height:220px !important;
  min-height:220px !important;
}
html[data-text-scale="1.3"] #life .page-nav {
  margin-bottom:12px;
  gap:12px;
}

/* Other shell text roles use the same explicit multiplier. This keeps font
   growth visible without ever scaling their painted cards or coordinates. */
.coach-text {
  font-size:calc(19px * var(--a11y-text,1));
}
.coach-bubble.compact .coach-text {
  font-size:calc(16.5px * var(--a11y-text,1));
}
#library .game-card h3 {
  font-size:calc(17px * var(--a11y-text,1));
}
#library .game-card p {
  font-size:calc(13px * var(--a11y-text,1));
}
html[data-text-scale] .screen-title {
  font-size:calc(26px * var(--a11y-text,1));
}

/* Large targets change a control's height. Legacy asymmetric padding then put
   some labels against the top edge and others against the bottom edge. All
   text-bearing controls on the two parchment screens share one optical centre. */
#calendar #todayBtn,
#calendar .memory-editor-actions button,
#life .editor-actions button,
#life .page-nav button {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding-block:0 !important;
  line-height:1.15 !important;
  text-align:center;
}