/* Teddy's Future Lab — hub worlds (hub-world.js): the first screen is a fixed 3D world; the page's own content rides on a
   holographic glass sheet that slides up over it. --hs-top matches the floating top chips' space (holo-shell.css). */
:root{--hs-top:calc(84px + env(safe-area-inset-top))}
.hub-page{--peek:76px;position:relative}
.hub-world{position:fixed;inset:0;z-index:0}
.hub-world .hw-title{top:calc(clamp(16px,6vh,64px) + 56px);max-width:min(44vw,600px)}
.hub-world .hw-title h1{font-size:clamp(30px,4.4vw,72px)}
.hub-sub{max-width:520px}
.hub-chips{display:flex;flex-wrap:wrap}
.hub-more{text-decoration:none;cursor:pointer;min-height:44px}
.hub-more:hover,.hub-more:focus-visible{box-shadow:0 0 0 1px #fff,0 0 22px rgba(76,201,255,.6)}
/* tints so each hub feels like its own place inside the child's world */
.hub-learn .hw-glow::after,.hub-create .hw-glow::after,.hub-connect .hw-glow::after,.hub-school .hw-glow::after,.hub-msg .hw-glow::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.hub-learn .hw-glow::after{background:radial-gradient(45% 55% at 76% 48%,rgba(120,90,255,.32),transparent 70%),radial-gradient(30% 35% at 76% 50%,rgba(255,194,61,.22),transparent 70%)}
.hub-create .hw-glow::after{background:radial-gradient(45% 55% at 76% 48%,rgba(255,90,170,.3),transparent 70%),radial-gradient(35% 40% at 76% 56%,rgba(255,194,61,.24),transparent 70%)}
.hub-connect .hw-glow::after,.hub-msg .hw-glow::after{background:radial-gradient(45% 55% at 76% 48%,rgba(40,220,200,.28),transparent 70%),radial-gradient(30% 35% at 76% 50%,rgba(76,201,255,.3),transparent 70%)}
.hub-school .hw-glow::after{background:radial-gradient(45% 55% at 76% 48%,rgba(255,194,61,.24),transparent 70%),radial-gradient(40% 45% at 70% 60%,rgba(76,201,255,.24),transparent 70%)}
[data-hw-layout="tall"].hw .hw-glow::after{background-position:center;opacity:.8}

/* the glass sheet with everything the page already had */
.hub-sheet{position:relative;z-index:2;margin:calc(100svh - var(--hs-top) - var(--peek)) auto 0;max-width:1240px;border-radius:30px 30px 0 0;padding:0 clamp(10px,2vw,26px) 28px;
  background:linear-gradient(180deg,rgba(10,36,92,.9),rgba(3,12,36,.94) 120px);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 0 0 1px rgba(168,236,255,.55),0 -10px 40px rgba(76,201,255,.25),inset 0 1px 0 rgba(255,231,161,.45);outline:none}
.hub-sheet:focus-visible{box-shadow:0 0 0 3px #ffc23d,0 -10px 40px rgba(76,201,255,.25)}
.hub-grip{display:flex;align-items:center;justify-content:center;gap:10px;min-height:var(--peek);margin:0 auto;max-width:min(560px,calc(100% - 200px));text-align:center;font-weight:800;letter-spacing:.04em;color:#fff;text-decoration:none;text-shadow:0 1px 3px #000}
.hub-grip span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#2a1700;background:linear-gradient(180deg,#ffe9a3,#ffc23d);box-shadow:0 0 14px rgba(255,194,61,.7);animation:hub-bob 2.4s ease-in-out infinite}
.hub-grip::before{content:"";position:absolute;left:50%;top:9px;width:54px;height:5px;margin-left:-27px;border-radius:9px;background:rgba(168,236,255,.6)}
@keyframes hub-bob{50%{transform:translateY(-4px)}}
.hub-sheet-body{padding-top:4px}
/* the page's old header and boxes, re-dressed as holographic glass */
.hub-sheet .khead{background:none!important;box-shadow:none!important;border:0!important;padding-top:0!important}
.hub-sheet .khead .emoji{filter:drop-shadow(0 0 12px rgba(76,201,255,.7))}
.hub-sheet .kcard{background:linear-gradient(180deg,rgba(12,44,104,.66),rgba(4,16,46,.8))!important;color:#f3f9ff;border:0!important;box-shadow:0 0 0 1px rgba(168,236,255,.5),0 0 22px rgba(76,201,255,.22),inset 0 1px 0 rgba(255,231,161,.3)!important}
.hub-sheet .kcard h2,.hub-sheet .khead h1{color:#fff}
.hub-sheet .muted,.hub-sheet .khead p{color:#bcd6f5!important}

/* phone held upright: title on top, centrepiece in the middle, objects below */
[data-hw-layout="tall"] .hub-title{left:0;right:0;max-width:none;text-align:center;padding:0 14px;top:calc(76px + env(safe-area-inset-top))}
[data-hw-layout="tall"] .hub-title h1{font-size:clamp(26px,7.6vw,46px)}
[data-hw-layout="tall"] .hub-sub{display:none}
[data-hw-layout="tall"] .hub-chips{justify-content:center}
/* phone held sideways: no peek strip — the "More" chip opens the sheet */
@media (max-height:559px) and (min-aspect-ratio:21/20){.hub-page{--peek:0px}.hub-grip{min-height:56px}}
[data-hw-layout="short"] .hub-title{top:60px;max-width:26vw}[data-hw-layout="short"] .hub-title h1{font-size:clamp(20px,3vw,32px)}[data-hw-layout="short"] .hub-sub{display:none}
[data-hw-layout="short"] .hub-chips .hw-chip{font-size:12px;padding:4px 10px;min-height:32px}
[data-hw-layout="short"] .hub-chips .hub-more{min-height:44px}

/* live cards that float in a hub world (Communication Hub people, School counts) */
.hub-cards{position:absolute;right:clamp(14px,2.5vw,40px);top:calc(clamp(16px,6vh,64px) + 56px);width:min(340px,30vw);display:grid;gap:10px;max-height:calc(46vh);overflow:auto;padding:4px}
.hub-card h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#a8ecff!important;margin:0 0 6px}
.hub-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 8px;margin:4px 0;border-radius:14px;color:#fff;text-decoration:none;background:rgba(4,20,56,.5);box-shadow:inset 0 0 0 1px rgba(120,220,255,.3)}
a.hub-row:hover,a.hub-row:focus-visible{box-shadow:inset 0 0 0 1px #fff,0 0 14px rgba(76,201,255,.5)}
.hub-row b{font-weight:700}.hub-row small{display:block;color:#a8ecff;font-size:12px}
.hub-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#5a6f95}.hub-dot.on{background:#3fd27a;box-shadow:0 0 10px #3fd27a}
.hub-num{margin-left:auto;font-weight:900;color:#ffc23d;font-size:18px}
[data-hw-layout="tall"] .hub-cards,[data-hw-layout="short"] .hub-cards{display:none}
.hub-sheet .hub-cards-copy{display:none}
[data-hw-layout="tall"]~.hub-sheet .hub-cards-copy,[data-hw-layout="short"]~.hub-sheet .hub-cards-copy{display:grid;gap:10px;margin-bottom:14px}
@media (prefers-reduced-motion:reduce){.hub-grip span{animation:none}}
.hub-grip b{font-weight:800}.hub-grip-short{display:none}
@media (max-width:640px){.hub-grip-long{display:none}.hub-grip-short{display:inline}.hub-grip{max-width:calc(100% - 190px)}}
.hub-grip b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.hub-grip{font-size:13.5px;gap:6px}}