/* R54 APP SHELL (Claude, 2026-10-22) — bottom tab bar, installed-app polish, phone sizes, full view. Works with public/js/r54-shell.js.
   html.r54-tabs     the bottom tab bar is on (touch devices, or the installed app)       html.r54-phone  the smaller side ≤ 600 px
   html.r54-land     a turned phone (height ≤ 500 px)                                    html.r54-standalone  running as the installed app */

/* ---------------------------------------------------------------- installed app: no bounce, no grey tap flash, nothing under the notch */
html.r54-standalone,html.r54-standalone body{overscroll-behavior-y:none}
html.r54-tabs body{-webkit-tap-highlight-color:transparent}
html.r54-tabs #main,html.r54-tabs .hw.hw-scroll{overscroll-behavior-y:contain}

/* ---------------------------------------------------------------- the bar */
html.r54-tabs{--r54-h:64px;--r54-bar:calc(var(--r54-h) + env(safe-area-inset-bottom,0px))}
html.r54-tabs body.kid-mode{--r54-h:72px}
html.r54-tabs.r54-land{--r54-h:54px}
#r54-tabs{position:fixed;left:0;right:0;bottom:0;z-index:9500;height:var(--r54-bar);box-sizing:border-box;padding:0 max(4px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(4px,env(safe-area-inset-left,0px));
  display:flex;justify-content:center;background:linear-gradient(180deg,rgba(7,24,58,.97),rgba(3,12,32,.99));border-top:1px solid rgba(127,235,255,.35);box-shadow:0 -6px 20px rgba(0,0,0,.35);
  font-family:"Lab Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation}
/* V3 / V4: the look's own bottom ribbon (body::after) is the bar's background — same height, so the band and the bar are one */
html.r54-tabs[data-gfx=v3]{--v3-dock:var(--r54-bar)!important}
html.r54-tabs[data-gfx=v3] #r54-tabs{background:none;border-top:0;box-shadow:none}
.r54-in{display:flex;align-items:stretch;width:100%;max-width:760px;height:var(--r54-h);gap:2px}
.r54-tab,#r54-tabs .r54-slot{flex:1 1 0;min-width:0;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 2px;border:0;border-radius:16px;background:none;color:#cfe6ff;
  text-decoration:none;font:700 12px/1.1 inherit;letter-spacing:-.02em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.r54-ico{display:grid;place-items:center;width:44px;height:30px;border-radius:12px;font-size:23px;line-height:1}
.r54-lbl{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r54-tab[aria-current=page]{color:#fff}
.r54-tab[aria-current=page] .r54-ico{background:linear-gradient(180deg,#ffe58a,#ffc23d);box-shadow:0 0 14px rgba(255,194,61,.55)}
.r54-tab:active,#r54-tabs .r54-slot:active{transform:scale(.94)}
.r54-tab:focus-visible,#r54-tabs .r54-slot:focus-visible{outline:3px solid #ffc23d;outline-offset:-3px}
body.kid-mode .r54-ico{width:50px;height:36px;font-size:27px;border-radius:14px}
body.kid-mode .r54-tab,body.kid-mode #r54-tabs .r54-slot{font-size:13px}
html.r54-land .r54-ico{height:26px;font-size:20px}
html.r54-land .r54-tab,html.r54-land #r54-tabs .r54-slot{flex-direction:row;gap:6px;font-size:13px}
html.r54-land #r54-tabs .r54-slot{flex:0 0 auto!important;padding:4px 10px}
#r54-tabs[data-role=grand] .r54-tab{font-size:14px}#r54-tabs[data-role=grand] .r54-ico{font-size:28px;height:34px}
/* V4 (day look): white words on the blue ribbon, gold for "you are here" */
html[data-look=v4].r54-tabs #r54-tabs .r54-tab,html[data-look=v4].r54-tabs #r54-tabs .r54-slot{color:#fff!important;-webkit-text-fill-color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
html[data-look=v4].r54-tabs #r54-tabs .r54-lbl,html[data-look=v4].r54-tabs #r54-tabs .ta-orb-lbl,html[data-look=v4].r54-tabs #r54-tabs .hs-orb-lbl::after{color:#fff!important;-webkit-text-fill-color:#fff;opacity:1!important;visibility:visible!important}
/* V1 Classic: the bar sits in Classic's own tab-bar row (same height), and Classic's bar steps aside */
html.r54-tabs body.classic-lab #tabbar{display:none!important}
html.r54-tabs body.classic-lab #r54-tabs{height:calc(var(--tabbar,64px) + var(--safe-b,0px));background:var(--bg2,#fff);border-top:1px solid var(--line,#d8e2f0);box-shadow:none}
html.r54-tabs body.classic-lab .r54-in{height:var(--tabbar,64px)}
html.r54-tabs body.classic-lab .r54-tab{color:var(--muted,#4a5a75)}html.r54-tabs body.classic-lab .r54-tab[aria-current=page]{color:var(--text,#0b1730)}
html.r54-tabs body.classic-lab #app:not(.kid) {grid-template-areas:"top" "main" "tabs"}
@media (max-width:699px){html.r54-tabs body.classic-lab #app.bare{grid-template-rows:calc(var(--topbar) + var(--safe-t)) 1fr calc(var(--tabbar) + var(--safe-b))}}

/* the Lab's own buttons inside the bar: Teddy and "All places" (shown as "More") */
html.r54-tabs .hs-home{display:none!important}
#r54-tabs .r54-slot{position:relative!important;inset:auto!important;right:auto!important;bottom:auto!important;left:auto!important;top:auto!important;z-index:auto!important;width:auto!important;height:auto!important;margin:0!important;transform:none;background:none!important;box-shadow:none!important;align-content:center}
#r54-tabs .r54-slot[hidden]{display:none!important}
#r54-tabs .r54-slot{flex:0 0 52px!important}
#r54-tabs .r54-teddy img{width:34px!important;height:34px!important;box-shadow:0 0 0 2px rgba(220,245,255,.95),0 0 12px rgba(80,210,255,.6)!important}
body.kid-mode #r54-tabs .r54-teddy img{width:40px!important;height:40px!important}
#r54-tabs .r54-teddy .ta-orb-ring{display:none}
#r54-tabs .r54-teddy .ta-orb-lbl{padding:0;background:none!important;box-shadow:none!important;font:700 12px/1.1 "Lab Sans",system-ui,sans-serif!important;color:inherit!important;text-shadow:none}
#r54-tabs .r54-more .hs-orb-core{width:34px!important;height:34px!important;grid-template-columns:repeat(3,6px);grid-auto-rows:6px;gap:3px;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 0 0 2px rgba(255,214,110,.9),0 0 12px rgba(76,201,255,.5)}
#r54-tabs .r54-more .hs-orb-core i{width:6px;height:6px;border-radius:2px}
#r54-tabs .r54-more .hs-orb-core::after{display:none}
#r54-tabs .r54-more .hs-orb-lbl{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;font-size:12px!important}
#r54-tabs .r54-more::after{content:attr(data-r54-label);font:700 12px/1.1 "Lab Sans",system-ui,sans-serif;color:inherit}
body.kid-mode #r54-tabs .r54-more .hs-orb-core{width:40px!important;height:40px!important}
html.r54-land #r54-tabs .r54-teddy img,html.r54-land #r54-tabs .r54-more .hs-orb-core{width:28px!important;height:28px!important}

/* pages end ABOVE the bar — nothing scrolls behind it */
html.r54-tabs.hs #main{bottom:var(--r54-bar)!important}
html.r54-tabs.hs #view{padding-bottom:24px!important}
html.r54-tabs.hs #main{scroll-padding-bottom:12px!important}
html.r54-tabs #toasts{bottom:calc(var(--r54-bar) + 10px)!important}
html.r54-tabs .hw.hw-fixed{bottom:var(--r54-bar);min-height:0!important;height:auto}
html.r54-tabs .ta-panel{bottom:calc(var(--r54-bar) + 8px)!important;max-height:calc(100dvh - var(--r54-bar) - 24px)!important}

/* ---------------------------------------------------------------- phones: one column, readable sizes, real tap targets (grown-up pages) */
html.r54-phone body:not(.kid-mode) #view{padding-left:calc(16px + env(safe-area-inset-left,0px))!important;padding-right:calc(16px + env(safe-area-inset-right,0px))!important;font-size:16.5px}
html.r54-phone.hs:not(.r54-land) #view{padding-top:calc(74px + env(safe-area-inset-top,0px))!important}
html.r54-phone body:not(.kid-mode) #view .panel{padding:16px;border-radius:18px}
html.r54-phone body:not(.kid-mode) #view :is(.small,small,.muted.small,.tiny){font-size:14.5px;line-height:1.4}
html.r54-phone body:not(.kid-mode) #view p{line-height:1.5}
html.r54-phone body:not(.kid-mode) #view :is(.btn,button.chip,a.chip,select,.input,input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],textarea){min-height:46px;font-size:16px}
html.r54-phone body:not(.kid-mode) #view .btn.sm{min-height:44px;padding-left:14px;padding-right:14px}
html.r54-phone body:not(.kid-mode) #view :is(.g2,.g3,.g4):not(.keep){grid-template-columns:minmax(0,1fr)!important}
html.r54-phone body:not(.kid-mode) #view .pagehead h1,html.r54-phone body:not(.kid-mode) #view h1{font-size:24px;line-height:1.2}
html.r54-phone body:not(.kid-mode) #view .li{min-height:52px}
html.r54-phone body:not(.kid-mode) #view .tbl{display:block;overflow-x:auto}

/* the grown-ups' 3D "worlds" (Command Center, Communication Hub): on a phone the holograms become a clear list of big buttons that scrolls
   above the bar, instead of crowding into one band of the picture */
html.r54-phone .hw.hw-tone-adult{bottom:var(--r54-bar,0px)!important;overflow-y:auto!important;overflow-x:hidden}
html.r54-phone .hw.hw-tone-adult .hw-art,html.r54-phone .hw.hw-tone-adult .hw-sparks{position:fixed}
html.r54-phone .hw.hw-tone-adult .hw-gl{display:none!important}
html.r54-phone .hw.hw-tone-adult .hw-content{position:relative;inset:auto;padding:calc(70px + env(safe-area-inset-top,0px)) 16px 4px;pointer-events:auto}
html.r54-phone .hw.hw-tone-adult .hw-objects{position:relative;inset:auto;height:auto!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:10px 16px 24px;pointer-events:auto}
html.r54-phone .hw.hw-tone-adult .hw-obj{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:auto!important;height:auto!important;min-height:58px;display:flex!important;align-items:center;gap:10px;padding:8px 12px;border-radius:16px;
  background:linear-gradient(180deg,rgba(24,74,160,.82),rgba(6,24,64,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(168,236,255,.5)}
html.r54-phone .hw.hw-tone-adult .hw-obj[hidden]{display:none!important}
html.r54-phone .hw.hw-tone-adult .hw-ico{display:grid!important;place-items:center;position:static!important;inset:auto;flex:0 0 40px;width:40px;height:40px;font-size:22px;border-radius:12px}
html.r54-phone .hw.hw-tone-adult .hw-lbl{position:static!important;transform:none!important;white-space:normal;padding:0;background:none!important;box-shadow:none!important;text-shadow:none;font-size:15.5px!important;letter-spacing:0!important;text-align:left;line-height:1.2;color:#fff!important}
html.r54-phone .hw.hw-tone-adult .hw-gold .hw-lbl{color:#ffe7a1!important}
html.r54-phone .hw.hw-tone-adult .hw-note{position:static;margin-left:auto;flex:none}
html.r54-phone .hw.hw-tone-adult .hw-badge{display:none}
html.r54-phone .hw.hw-tone-adult :is(.hw-title,.cw-kids,.cw-content,.hw-content>div>header){position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;max-width:none!important;max-height:none!important;transform:none!important}
html.r54-phone .hw.hw-tone-adult .hw-title{margin:0 0 10px}
html.r54-phone .hw.hw-tone-adult .cw-kids{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;padding-bottom:6px}
html.r54-phone .hw.hw-tone-adult .cw-kid{flex:0 0 82%;scroll-snap-align:start}
html[data-look=v4].r54-phone .hw.hw-tone-adult .hw-obj{background:linear-gradient(180deg,#ffffff,#eaf4ff);box-shadow:0 0 0 2px #87c8f5,0 4px 12px rgba(4,52,120,.15)}
html[data-look=v4].r54-phone .hw.hw-tone-adult .hw-lbl,html[data-look=v4].r54-phone .hw.hw-tone-adult .hw-gold .hw-lbl{color:#0b2f7a!important}

/* ---------------------------------------------------------------- full view on phones: the live class and the story reader */
body.r54-full #topbar,body.r54-full #r54-tabs,body.r54-full .tfl-quick,body.r54-full .hs-home,body.r54-full #hs-orb,body.r54-full .ta-orb{display:none!important}
body.r54-full::after{display:none!important}
html.hs body.r54-full #main{top:0!important;bottom:0!important}
body.r54-full #view{padding:calc(62px + var(--tfl-demo-h,0px) + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) calc(96px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px))!important;max-width:none}
body.r54-full #view .khead{display:none}
body.r54-full #view{animation:none!important;transform:none!important}
.r54-exit{position:fixed;z-index:9600;top:calc(8px + var(--tfl-demo-h,0px) + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px));display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 18px;border-radius:999px;
  background:rgba(6,22,62,.92);color:#fff;font:800 16px/1 "Lab Sans",system-ui,sans-serif;text-decoration:none;box-shadow:0 0 0 2px rgba(168,236,255,.8),0 6px 18px rgba(0,0,0,.4)}
.r54-exit:focus-visible{outline:3px solid #ffc23d;outline-offset:3px}
body[data-r54-full=class] .lc-room{min-height:calc(100dvh - 190px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
body[data-r54-full=class] .lc-acts{position:fixed;z-index:9550;left:0;right:0;bottom:0;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;
  padding:10px calc(10px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px));background:linear-gradient(180deg,rgba(3,12,32,.75),rgba(3,12,32,.98))}
body[data-r54-full=class] .lc-acts .kbtn{min-height:52px;font-size:16px;margin:0;width:100%}
html.r54-land body[data-r54-full=class] .lc-acts{grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-r54-full=book] .bk-reader{max-width:none}
body[data-r54-full=book] .bk-front,body[data-r54-full=book] .bk-pic{max-width:100%}
body[data-r54-full=book] .bk-bar{position:fixed;z-index:9550;left:0;right:0;bottom:0;margin:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px calc(12px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));background:linear-gradient(180deg,rgba(3,12,32,.6),rgba(3,12,32,.97))}
body[data-r54-full=book] .bk-bar [data-prev],body[data-r54-full=book] .bk-bar [data-next]{min-width:88px;min-height:64px;font-size:30px;border-radius:20px}
body[data-r54-full=book] .bk-bar .bk-count{font-size:17px;color:#fff}

/* ---------------------------------------------------------------- "Use Teddy Lab like an app" */
.r54-install{position:relative;margin:12px 0;padding:16px 16px 12px;border-radius:18px;background:linear-gradient(180deg,rgba(18,62,140,.92),rgba(6,24,64,.95));color:#f3f9ff;box-shadow:0 0 0 1px rgba(168,236,255,.6);text-align:left;pointer-events:auto;font-size:16px;line-height:1.45}
.r54-install h2{margin:0 0 6px;font-size:19px;color:#fff}
.r54-install p{margin:0 0 8px}
.r54-install ol{margin:6px 0 10px;padding-left:24px}.r54-install li{margin:4px 0}
.r54-install-no{min-height:44px;margin-top:8px;padding:0 16px;border:2px solid rgba(255,255,255,.6);border-radius:999px;background:none;color:#fff;font:700 15px/1 inherit;cursor:pointer}
html[data-look=v4] .r54-install{background:#fff;color:#0b2f7a;box-shadow:0 0 0 2px #87c8f5}html[data-look=v4] .r54-install h2{color:#0b2f7a}html[data-look=v4] .r54-install-no{color:#0b2f7a;border-color:#87c8f5}
body.classic-lab .r54-install{background:var(--panel,#fff);color:var(--text,#0b1730);box-shadow:0 0 0 1px var(--line,#d8e2f0)}body.classic-lab .r54-install h2{color:inherit}body.classic-lab .r54-install-no{color:inherit;border-color:var(--line,#c8d4e6)}
@media (prefers-reduced-motion:reduce){.r54-tab:active,#r54-tabs .r54-slot:active{transform:none}}
/* a grown-up hub (Messages / Communication Hub) on a phone: the list of places and the page's own sheet scroll as ONE page above the bar
   (the sheet no longer slides over places a person cannot reach) */
html.r54-phone .hub-world.hw-tone-adult{position:relative!important;inset:auto!important;top:auto!important;bottom:auto!important;height:auto!important;max-height:none!important;overflow:visible!important;z-index:0}
html.r54-phone .hub-world.hw-tone-adult .hw-content{padding-top:8px}
html.r54-phone .hub-page:has(.hub-world.hw-tone-adult) .hub-sheet{margin-top:16px!important}
html.r54-phone .hub-page:has(.hub-world.hw-tone-adult) .hub-grip{display:none}
/* V4's contrast helper marks words it thinks sit on a light page (v4-ink): in the bar they sit on the navy ribbon, so they stay white */
:root[data-look=v4][data-gfx]:not(#v4) #r54-tabs :is(.v4-ink,.v4-paper,.r54-lbl,.ta-orb-lbl,.hs-orb-lbl),:root[data-look=v4][data-gfx]:not(#v4) #r54-tabs .r54-more::after{color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.55)!important}
:root[data-look=v4][data-gfx]:not(#v4) #r54-tabs :is(.ta-orb-lbl,.hs-orb-lbl){background:none!important;box-shadow:none!important;border:0!important}
:root[data-look=v4][data-gfx]:not(#v4) #r54-tabs .r54-tab[aria-current=page] .r54-lbl{color:#ffe58a!important;-webkit-text-fill-color:#ffe58a!important}
html.hs #r54-tabs#r54-tabs .r54-lbl{color:#e6f3ff!important;-webkit-text-fill-color:#e6f3ff}
html.hs #r54-tabs#r54-tabs .r54-tab[aria-current=page] .r54-lbl{color:#ffe58a!important;-webkit-text-fill-color:#ffe58a}
/* a turned phone: a slimmer top row, so the page gets the height */
html.r54-land.hs #topbar{padding-top:max(4px,env(safe-area-inset-top))!important}
html.r54-land.hs #topbar .clock{display:none!important}
html.r54-land.hs body:not(.kid-mode) #view{padding-top:calc(60px + env(safe-area-inset-top,0px))!important}
html.r54-land.r54-phone .hw.hw-tone-adult .hw-content{padding-top:calc(58px + env(safe-area-inset-top,0px))}
html.r54-land .hw.hw-tone-adult .cw-title p:not(.hw-eyebrow){display:none}
/* the bar steps aside like the Lab's floating buttons: while a dialog / bottom sheet is open, and in the focused "Choose what's allowed" set-up */
html.r54-tabs body:has(.overlay[role=dialog]) #r54-tabs{visibility:hidden!important;pointer-events:none!important}
html.r54-tabs body[data-page=child-allowed] #r54-tabs{display:none!important}
html.r54-tabs.hs:has(body[data-page=child-allowed]) #main{bottom:0!important}
html.r54-tabs body.classic-lab[data-page=child-allowed] #tabbar{display:grid!important}
/* R59a (approved by Adam, 2026-10-25): the Lab's own 3D icons in the tab bar; the emoji stays underneath until the picture has loaded */
.r54-ico{position:relative}.r54-ico .r54-art{position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));pointer-events:none}
body.kid-mode .r54-ico .r54-art{width:46px;height:46px}.r54-has-art .r54-emo{visibility:hidden}