/* ===== Academy Hub app shell (loaded last in /it/ and /ai/, and by the hub) =====
   Adds: app switcher (bottom nav on narrow screens, side rail on wide), safe areas, dvh heights,
   two-pane layout when unfolded, 44px tap targets, sane overscroll. Content CSS is untouched. */
:root {
  --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px);
  --top-h: calc(60px + var(--sa-t));
  --nav-h: 60px; --rail-w: 80px;
  --app-b: calc(var(--nav-h) + var(--sa-b));   /* space taken by the bottom nav */
  --app-l: 0px;                                 /* space taken by the side rail */
  --app-r: var(--sa-r);
  --vh: 100vh; --vh: 100dvh;
}
@media (min-width: 760px) {
  :root { --app-b: var(--sa-b); --app-l: calc(var(--rail-w) + var(--sa-l)); }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html, body { max-width: 100%; overflow-x: clip; }
body { padding-left: var(--app-l); padding-right: var(--app-r); padding-bottom: var(--app-b); }
@media (display-mode: standalone) { html { overscroll-behavior-y: none; } }
a, button, summary, label, input, select, textarea, [role="button"], .btn { touch-action: manipulation; }
.sidebar, .search-results, .w-log, .rd-box, .rd-choices, .modal, .app-nav { overscroll-behavior: contain; }
.app-nav, .app-nav * { -webkit-user-select: none; user-select: none; }

/* ---- the academy pages: top bar respects notch/cutout + safe areas ---- */
html.app-academy .topbar { height: var(--top-h); padding-top: var(--sa-t); padding-left: max(14px, var(--sa-l)); }
@media (min-width: 760px) { html.app-academy .topbar { padding-left: 14px; } }
html.app-academy .layout { min-height: calc(var(--vh) - var(--top-h) - var(--app-b)); }
html.app-academy .sidebar { height: calc(var(--vh) - var(--top-h) - var(--app-b)); }
html.app-academy .scrim { left: var(--app-l); bottom: var(--app-b); }
html.app-academy .rpg-world { height: calc(var(--vh) - var(--top-h) - var(--app-b)); }
html.app-academy .rpg-title { min-height: calc(var(--vh) - var(--top-h) - var(--app-b)); }
html.app-academy .prologue .t-inner { height: calc(var(--vh) - var(--top-h) - var(--app-b)); }
html.app-academy body.rpg.rpg-full .rpg-battle { min-height: calc(var(--vh) - var(--top-h) - var(--app-b)); }
html.app-academy .rpg-dialog:not(.in-host) { left: calc(50% + var(--app-l) / 2); bottom: calc(18px + var(--app-b)); width: min(860px, calc(100vw - var(--app-l) - var(--app-r) - 24px)); }
html.app-academy .toast { left: calc(50% + var(--app-l) / 2); bottom: calc(22px + var(--app-b)); max-width: calc(100vw - var(--app-l) - 24px); }
html.app-academy .game-pop { left: calc(50% + var(--app-l) / 2); max-width: calc(100vw - var(--app-l) - 24px); }
html.app-academy .search-results { max-height: min(70vh, calc(var(--vh) - var(--top-h) - var(--app-b) - 20px)); }
html.app-academy .w-hud { max-width: min(340px, calc(100% - 24px)); }
@media (min-width: 761px) {   /* HUD (left) and action buttons (right) share the top row without overlapping */
  html.app-academy .w-hud { max-width: min(340px, calc(40% - 18px)); }
  html.app-academy .w-actions { max-width: calc(60% - 18px); }
}
@media (min-width: 761px) and (max-height: 480px) {   /* landscape cover screen: compact HUD */
  html.app-academy .w-hud { padding: 4px 8px; } html.app-academy .w-banner { top: 30%; }
}
img, canvas, video, svg, pre, table { max-width: 100%; }
html.app-academy .content { min-width: 0; overflow-wrap: anywhere; }
html.app-academy .content pre, html.app-academy .content .CodeMirror, html.app-academy .content table { overflow-x: auto; }
html.app-academy .content table { display: block; }
html.app-academy .content code { overflow-wrap: anywhere; }

/* Off-canvas sidebar (narrow, or RPG full-screen routes) sits beside the rail and above the bottom nav. */
html.app-academy .sidebar { overscroll-behavior: contain; }
@media (max-width: 959.98px) {
  html.app-academy .sidebar { left: var(--app-l); top: var(--top-h); bottom: var(--app-b); max-width: calc(100vw - var(--app-l) - 16px); }
}
html.app-academy body.rpg .sidebar { left: var(--app-l); bottom: var(--app-b); max-width: calc(100vw - var(--app-l) - 16px); }

/* ---- Top bar: never overflows. Key chips stay in row 1; the rest folds into a "⋯ More" row (DOM order and
   event listeners untouched: .topbar-right becomes display:contents and items are re-ordered with flex order). ---- */
html.app-academy .topbar { flex-wrap: wrap; align-content: flex-start; row-gap: 0; column-gap: 6px; padding-right: max(10px, var(--sa-r)); }
html.app-academy .topbar.more-open { height: auto; min-height: var(--top-h); padding-bottom: 8px; }
html.app-academy .topbar-right { display: contents; }
html.app-academy .topbar > *, html.app-academy .topbar-right > * { order: 20; flex: none; }
html.app-academy .topbar > .menu-btn { order: 1; } html.app-academy .topbar > .brand { order: 2; }
html.app-academy .topbar > .search-wrap { order: 3; flex: 1 1 60px; min-width: 44px; max-width: 520px; margin-left: 4px; }
html.app-academy #xpChip { order: 6; } html.app-academy #goldChip { order: 7; } html.app-academy #hqBtn { order: 8; } html.app-academy #acctChip { order: 9; }
@media (max-width: 999.98px) { html.app-academy .topbar #hqBtn .hq-label { display: none; } }
html.app-academy .topbar > .app-more { order: 10; }
html.app-academy .topbar::after { content: ""; order: 15; flex: 0 0 100%; height: 0; }
html.app-academy .topbar > *, html.app-academy .topbar-right > *:not(.py-status) { height: auto; min-height: 44px; margin-top: 8px; }
html.app-academy .topbar > .brand { min-height: 44px; }
@media (max-width: 1279.98px) { html.app-academy .topbar:not(.more-open) .topbar-right > :not(#xpChip):not(#goldChip):not(#acctChip):not(#hqBtn) { display: none !important; } }
html.app-academy .topbar [hidden] { display: none !important; }
html.app-academy .topbar.more-open #trackChip, html.app-academy .topbar.more-open #hqBtn, html.app-academy .topbar.more-open #streakChip { display: inline-flex; align-items: center; }
html.app-academy .topbar.more-open #soundBtn, html.app-academy .topbar.more-open #themeBtn { display: inline-block; }
html.app-academy .topbar.more-open .tc-name { display: inline; }
html.app-academy .topbar.more-open .py-status { display: none !important; }
html.app-academy .topbar .icon-btn, html.app-academy .topbar .xp-chip, html.app-academy .topbar .gold-chip, html.app-academy .topbar .track-chip,
html.app-academy .topbar .acct-chip, html.app-academy .topbar .streak-chip, html.app-academy .topbar .app-more { min-height: 44px; min-width: 44px; }
html.app-academy .topbar .icon-btn, html.app-academy .topbar .app-more { padding-left: 8px; padding-right: 8px; }
html.app-academy .topbar .gold-chip, html.app-academy .topbar .acct-chip, html.app-academy .topbar .streak-chip { display: inline-flex; align-items: center; justify-content: center; }
html.app-academy .app-more { font: 700 1.1rem system-ui, sans-serif; line-height: 1; cursor: pointer; color: inherit; background: var(--card2, #2b3a9e); border: 1px solid var(--border, #f4f1ff); border-radius: 8px; }
html.app-academy body.rpg .app-more { background: #2b3a9e; border: 2px solid #f4f1ff; box-shadow: 0 0 0 2px var(--ink); color: #fff; border-radius: 4px; }
html.app-academy .app-more[aria-expanded="true"] { background: #ffd166; color: #141a52; }
@media (min-width: 1280px) {   /* everything fits: no More button */
  html.app-academy .topbar { flex-wrap: nowrap; }
  html.app-academy .topbar > .app-more { display: none; }
  html.app-academy .topbar-right > * { order: 8; }
  html.app-academy .topbar > *, html.app-academy .topbar-right > *:not(.py-status) { margin-top: 0; }
}
/* tablet/unfolded: track chip, streak and HQ also stay in row 1 when there is room */
@media (min-width: 1000px) and (max-width: 1279.98px) {
  html.app-academy .topbar:not(.more-open) .topbar-right > #trackChip, html.app-academy .topbar:not(.more-open) .topbar-right > #hqBtn { display: inline-flex !important; }
  html.app-academy #trackChip { order: 5; } html.app-academy #hqBtn { order: 8; }
}
@media (max-width: 759.98px) {
  html.app-academy .topbar { padding-left: max(8px, var(--sa-l)); }
  html.app-academy .topbar .menu-btn { display: none !important; }
}
@media (max-width: 380px) { html.app-academy .xp-track { width: 34px; } }
html.app-academy #searchInput { min-height: 44px; font-size: 16px; }  /* 16px stops zoom-on-focus */
html.app-academy input, html.app-academy select, html.app-academy textarea { font-size: max(16px, 1em); }
html.app-academy .btn, html.app-academy .pbtn { min-height: 44px; }
html.app-academy .side-links a, html.app-academy .side-level summary, html.app-academy .side-level a { min-height: 44px; display: flex; align-items: center; }
html.app-academy .search-results .sr-item, html.app-academy .search-results .sr-all { min-height: 44px; }
html.app-academy .dp { min-width: 48px; min-height: 48px; }

/* ---- Wide (unfolded inner screen, landscape cover): two-pane lessons + side rail ---- */
@media (min-width: 760px) {
  html.app-academy body:not(.rpg-full) { --side-w: clamp(240px, 30vw, 300px); }
  html.app-academy body:not(.rpg-full) .menu-btn { display: none !important; }
  html.app-academy body:not(.rpg-full) .sidebar,
  html.app-academy body.rpg:not(.rpg-full) .sidebar {
    position: sticky; left: auto; bottom: auto; top: var(--top-h); transform: none; max-width: none; box-shadow: none; z-index: 1;
    height: calc(var(--vh) - var(--top-h) - var(--app-b));
  }
  html.app-academy body:not(.rpg-full) .scrim { display: none !important; }
  html.app-academy body.rpg:not(.rpg-full) .content { margin: 0; max-width: none; }
  html.app-academy body:not(.rpg-full) .content { max-width: none; }
  html.app-academy body:not(.rpg-full) .content > * { max-width: 980px; }
}
/* Foldable with a reported hinge (progressive enhancement): sidebar fills the left segment. */
@media (horizontal-viewport-segments: 2) {
  html.app-academy body:not(.rpg-full) { --side-w: calc(env(viewport-segment-width 0 0, 300px) - var(--app-l)); }
  html.app-academy body:not(.rpg-full) .content { padding-left: calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px) + 18px); }
}

/* ===== App switcher ===== */
.app-nav { position: fixed; z-index: 45; display: flex; background: linear-gradient(180deg, #1a2066, #0f1440); color: #e8eaff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.app-nav a, .app-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 44px; min-width: 44px; padding: 4px 2px; color: #c9cdf5; background: none; border: 0; font: inherit; font-size: .72rem; font-weight: 600;
  letter-spacing: .01em; text-decoration: none; cursor: pointer; border-radius: 12px; position: relative; }
.app-nav .ic { font-size: 1.35rem; line-height: 1; }
.app-nav [aria-current="page"] { color: #ffd166; }
.app-nav [aria-current="page"] .ic { transform: translateY(-1px); }
.app-nav [aria-current="page"]::after { content: ""; position: absolute; width: 28px; height: 3px; border-radius: 3px; background: #ffd166; }
.app-nav a:focus-visible, .app-nav button:focus-visible { outline: 2px solid #ffd166; outline-offset: -3px; }
.app-nav a:active, .app-nav button:active { background: #ffffff1a; }
@media (max-width: 759.98px) {
  .app-nav { left: 0; right: 0; bottom: 0; height: var(--app-b); padding: 0 max(6px, var(--sa-r)) var(--sa-b) max(6px, var(--sa-l)); border-top: 3px solid #080a1e; box-shadow: 0 -2px 0 #f4f1ff22; }
  .app-nav [aria-current="page"]::after { top: 0; }
  .app-nav .rail-only { display: none; }
}
@media (min-width: 760px) {
  .app-nav { top: 0; bottom: 0; left: 0; width: var(--app-l); flex-direction: column; justify-content: flex-start; gap: 6px;
    padding: calc(var(--sa-t) + 10px) 8px calc(var(--sa-b) + 10px) calc(8px + var(--sa-l)); border-right: 3px solid #080a1e; }
  .app-nav a, .app-nav button { flex: 0 0 auto; min-height: 60px; font-size: .7rem; }
  .app-nav [aria-current="page"] { background: #ffffff14; }
  .app-nav [aria-current="page"]::after { left: 0; top: 14px; width: 3px; height: 32px; }
  .app-nav .nav-menu { display: none; }
  .app-nav .spacer { flex: 1; }
  body.rpg-full .app-nav .nav-menu { display: flex; }
}
.app-nav .spacer { display: none; }
@media (min-width: 760px) { .app-nav .spacer { display: block; } }
.app-nav .badge-dot { position: absolute; top: 6px; right: calc(50% - 18px); width: 8px; height: 8px; border-radius: 50%; background: #34d399; }
@media (max-height: 420px) and (min-width: 760px) { .app-nav a, .app-nav button { min-height: 48px; } .app-nav .lbl { font-size: .62rem; } .app-nav { gap: 2px; } }

/* Update / offline banner */
.app-banner { position: fixed; z-index: 80; left: calc(50% + var(--app-l) / 2); transform: translateX(-50%); bottom: calc(var(--app-b) + 12px);
  display: flex; gap: 10px; align-items: center; max-width: calc(100vw - var(--app-l) - 24px); padding: 8px 10px 8px 14px; border-radius: 12px;
  background: #141a52; color: #fff; border: 2px solid #f4f1ff; box-shadow: 0 0 0 2px #080a1e, 0 8px 24px #0008; font: 600 .9rem system-ui, sans-serif; }
.app-banner button { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 0; background: #ffd166; color: #141a52; font: inherit; cursor: pointer; }
.app-banner button.ghost { background: transparent; color: #c9cdf5; }

@media (prefers-reduced-motion: reduce) {
  html.app-academy .sidebar { transition: none !important; }
  .app-nav * { transition: none !important; }
}
@media print { .app-nav, .app-banner { display: none !important; } body { padding: 0 !important; } }

/* RPG sidebar is always dark: give it dark-theme text colours even when the light theme is on (was unreadable). */
html.app-academy body.rpg .sidebar { --text: #e8eaff; --muted: #aab0e0; --card2: #1d2366; --border: #2b3a9e; --accent: #ffd166; color: #e8eaff; }
/* wide screens: the rail's Menu button replaces the top-bar one */
@media (min-width: 760px) { html.app-academy .topbar .menu-btn { display: none !important; } }
/* Contrast fixes inside the parchment lesson (pre-existing: link colour leaked onto pixel buttons and chips). */
html.app-academy body.rpg .lesson a.pbtn, html.app-academy body.rpg .qh-acts .pbtn { color: #fff; }
html.app-academy body.rpg .lesson .quest-reward .chip { color: #2b2118; border-color: #c9b48a; }
/* Touch targets in the RPG menus / battles (were 30-33px tall) */
html.app-academy .t-item, html.app-academy .b-opt, html.app-academy .b-cmd, html.app-academy .rd-choice { min-height: 44px; }
html.app-academy .b-opt, html.app-academy .b-cmd { display: flex; align-items: center; }
/* Guild Hall world map: long region labels near the edge no longer stick out past the screen */
html.app-academy .g-mapwrap { overflow: hidden; }
html.app-academy .g-pin { max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }