/* Brave & Bright - the grown-up hub, PIN pad, setup, lock cards and the "Who is playing?" picker (src/hub.js). Loaded by every page, so
   it carries its own tokens (hb-*) and never relies on game.css or typing.css; phone-first (390 px), one column. */
/* the tokens live on every hub root (overlay, lock card, picker, and account.html's page since 2026-10-23), never on :root, so neither
   page's stylesheet is touched */
.hb-veil,.hb-lock,.hb-who,.ac{--hb-ink:#27304f;--hb-soft:#5a6485;--hb-paper:#fffaf0;--hb-paper2:#f3ebd9;--hb-line:#e2d7bf;--hb-leaf:#4fae4a;--hb-leaf2:#2f8a2b;--hb-sun:#ffc531;--hb-sun2:#d9a321;--hb-berry:#e05a7a;
 --hb-display:"Baloo 2","Trebuchet MS","Segoe UI",system-ui,sans-serif;--hb-body:"Nunito","Segoe UI",system-ui,sans-serif}
/* a closed card is hidden by its own stylesheet: the display below beats the browser's [hidden], and only game.css and typing.css said
   [hidden]{display:none}, so on who.html and account.html a closed hub or lock card still covered the page (found 2026-10-23) */
.hb-veil[hidden],.hb-lock[hidden],.hb-toast[hidden]{display:none!important}
.hb-veil{position:fixed;inset:0;z-index:70;background:#27304f99;display:flex;align-items:flex-end;justify-content:center;padding:0 0 env(safe-area-inset-bottom,0px);color:var(--hb-ink);font:700 16px/1.35 var(--hb-body)}
@media (min-width:640px) and (min-height:620px){.hb-veil{align-items:center}.hb-card{border-radius:28px}}
.hb-card{background:var(--hb-paper);width:100%;max-width:560px;max-height:94%;overflow:auto;border-radius:28px 28px 0 0;padding:16px 16px 20px;box-shadow:0 -6px 0 #0001;-webkit-overflow-scrolling:touch}
.hb-card h2{font:800 24px/1.1 var(--hb-display);margin:0}.hb-card h3{font:800 15px/1.2 var(--hb-body);margin:14px 0 6px;color:var(--hb-soft)}
.hb-top{display:flex;gap:8px;align-items:center;margin-bottom:8px}.hb-top h2{flex:1;min-width:0}
.hb-x{width:44px;height:44px;border-radius:50%;border:0;background:var(--hb-paper2);font-size:20px;display:grid;place-items:center;flex:none;color:inherit;cursor:pointer}
.hb-muted{color:var(--hb-soft);font-size:14px;margin:6px 0}.hb-note{background:#fff3cd;border:2px solid #ffe08a;border-radius:14px;padding:8px 12px;font-size:14px;margin:8px 0}
.hb-bad{color:#b8323f;font-size:14px;margin:6px 0}
.hb-btn{border:0;border-radius:16px;padding:10px 18px;font:800 18px var(--hb-display);background:var(--hb-sun);color:var(--hb-ink);box-shadow:0 5px 0 var(--hb-sun2);cursor:pointer;touch-action:manipulation}
.hb-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--hb-sun2)}.hb-btn[disabled]{opacity:.5;box-shadow:none;transform:none}
.hb-btn.green{background:var(--hb-leaf);color:#fff;box-shadow:0 5px 0 var(--hb-leaf2)}.hb-btn.plain{background:var(--hb-paper2);box-shadow:0 5px 0 var(--hb-line)}
.hb-btn.big{font-size:22px;padding:14px 22px;width:100%;margin-top:12px}.hb-btn.small{font-size:15px;padding:7px 12px;border-radius:12px}
.hb-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.hb-row .hb-btn{flex:1 1 auto}
.hb-q{font:800 26px/1.2 var(--hb-display);text-align:center;margin:12px 0}
.hb-entry{display:flex;justify-content:center;align-items:center;gap:8px;margin:6px 0}
.hb-out{min-width:140px;min-height:52px;display:grid;place-items:center;border-radius:14px;background:#fff;border:3px solid var(--hb-line);font:800 30px var(--hb-display);letter-spacing:6px;font-variant-numeric:tabular-nums}
.hb-out.empty{color:var(--hb-soft);letter-spacing:0}
.hb-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:340px;margin:0 auto 10px}
.hb-key{background:#fff;border:3px solid var(--hb-line);border-radius:14px;box-shadow:0 4px 0 var(--hb-line);font:800 24px var(--hb-display);min-height:50px;color:inherit;touch-action:manipulation;cursor:pointer}
.hb-key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--hb-line)}
@media (max-height:640px){.hb-key{min-height:42px;font-size:21px}.hb-out{min-height:46px;font-size:26px}}
.hb-field{margin:10px 0}.hb-field label{display:block;font-size:14px;color:var(--hb-soft);margin-bottom:4px}
.hb-in{width:100%;font:800 22px var(--hb-display);padding:10px 12px;border:3px solid var(--hb-line);border-radius:14px;background:#fff;color:inherit;letter-spacing:4px}
.hb-in.text{letter-spacing:0;font-size:18px}
.hb-code{font:800 26px/1.3 "Atkinson Hyperlegible Mono",Consolas,monospace;text-align:center;background:#fff;border:3px dashed var(--hb-berry);border-radius:14px;padding:12px;margin:10px 0;letter-spacing:2px;user-select:all;-webkit-user-select:all}
.hb-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin:10px 0}.hb-check input{width:22px;height:22px;flex:none;margin-top:1px}
.hb-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin:4px 0 6px}
.hb-tab{flex:none;border:3px solid var(--hb-line);background:#fff;border-radius:999px;padding:7px 14px;font:800 15px var(--hb-body);color:inherit;cursor:pointer}
.hb-tab[aria-selected=true]{background:#fff0f4;border-color:var(--hb-berry)}
.hb-nav{display:flex;gap:6px;margin:0 -4px 8px;overflow-x:auto}.hb-nav .hb-tab{font-size:14px;padding:6px 12px}
.hb-link{display:block;text-align:center;text-decoration:none;margin:0 0 10px}/* the weekly report (report.html), one link from the hub */
.hb-stat{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:2px dashed var(--hb-line);font-size:15px}.hb-stat b{text-align:right}
.hb-lim{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:2px dashed var(--hb-line)}.hb-lim span{flex:1;font-size:15px}
.hb-lim output{min-width:92px;text-align:center;font:800 17px var(--hb-display)}
.hb-step{width:44px;height:44px;border-radius:12px;border:3px solid var(--hb-line);background:#fff;font:800 22px var(--hb-display);color:inherit;cursor:pointer;touch-action:manipulation}
.hb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.hb-chip{background:#fff;border:3px solid var(--hb-line);border-radius:999px;padding:7px 12px;font:700 14px var(--hb-body);color:inherit;cursor:pointer}
.hb-chip[aria-pressed=true]{background:#fff0f4;border-color:var(--hb-berry)}
.hb-bars{display:grid;gap:4px;margin:6px 0}.hb-bar{display:grid;grid-template-columns:38px 1fr 76px;align-items:center;gap:8px;font-size:13px}
.hb-bar i{display:block;height:14px;border-radius:7px;background:var(--hb-paper2);overflow:hidden}.hb-bar i b{display:block;height:100%;background:var(--hb-leaf);border-radius:7px}
.hb-bar.over i b{background:var(--hb-berry)}
.hb-sess{list-style:none;padding:0;margin:4px 0}.hb-sess li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:2px dashed var(--hb-line);font-size:15px}
.hb-sess small{color:var(--hb-soft)}
.hb-toast{position:fixed;left:16px;right:16px;top:calc(14px + env(safe-area-inset-top,0px));margin-inline:auto;width:fit-content;max-width:92vw;z-index:80;background:#27304fee;color:#fff;border-radius:16px;padding:10px 16px;font:700 15px/1.3 "Nunito","Segoe UI",system-ui,sans-serif;text-align:center;pointer-events:none}
/* the lock card: a whole-screen rest scene, no shame words, buttons for what the child may still do */
.hb-lock{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;text-align:center;color:#fff;
 background:radial-gradient(circle at 78% 18%,#ffe9a3 0,#ffe9a300 16%),linear-gradient(#27304f,#45578f);font:700 16px/1.35 "Nunito","Segoe UI",system-ui,sans-serif}
.hb-lock-in{max-width:440px}.hb-lock .em{font-size:76px;line-height:1}
.hb-lock h2{font:800 clamp(30px,8vw,44px)/1.1 "Baloo 2","Trebuchet MS","Segoe UI",system-ui,sans-serif;margin:14px 0 8px;color:#fff}
.hb-lock p{font-size:20px;margin:0 0 6px}.hb-lock small{display:block;opacity:.85;margin:6px 0 18px;font-size:15px}
.hb-lock .hb-row{justify-content:center}.hb-lock .hb-btn{color:#27304f}
/* the question card's read-aloud chip (game.js draws it; a child may flip it) */
.hb-narr{display:inline-block;margin:0 0 6px;padding:5px 12px;border:3px solid #e2d7bf;border-radius:999px;background:#fff;font:800 13px "Nunito","Segoe UI",system-ui,sans-serif;color:#27304f;cursor:pointer;touch-action:manipulation}
.hb-narr[aria-pressed=true]{background:#fff0f4;border-color:#e05a7a}
/* who.html */
.hb-who{min-height:100vh;display:grid;place-items:center;padding:20px 16px;background:linear-gradient(#7cc8ff,#e3f6ff);color:#27304f;font:700 16px/1.35 "Nunito","Segoe UI",system-ui,sans-serif}
.hb-who-in{width:100%;max-width:560px;text-align:center}.hb-who h1{font:800 clamp(30px,8vw,40px)/1.1 "Baloo 2","Trebuchet MS","Segoe UI",system-ui,sans-serif;margin:0 0 16px}
.hb-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hb-tile{display:grid;justify-items:center;gap:6px;padding:16px 10px 14px;border:0;border-radius:22px;background:#fffaf0;box-shadow:0 6px 0 #0002;font:800 20px "Baloo 2","Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#27304f;cursor:pointer;touch-action:manipulation}
.hb-tile:active{transform:translateY(4px);box-shadow:0 2px 0 #0002}.hb-tile .em{font-size:52px;line-height:1}
.hb-tile.rest{opacity:.75}.hb-tile small{display:block;font:700 13px "Nunito","Segoe UI",system-ui,sans-serif;color:#5a6485}
.hb-who .hb-btn{margin-top:18px}