/* ============================================================================ MindGrow — Child web panel (/student/*) responsive + polish layer. Namespaced via body[data-panel="child"] so it can't bleed into the other panels. Loaded AFTER Tailwind CDN. Kid-friendly: bigger touch targets, chunky focus rings, no aggressive motion. Mirrors the parent/cafeteria/ teacher responsive playbook. The login page sets data-panel via ; a few rules below are global-safe (apply on both login + app shell). ========================================================================== */ /* --- 1. iOS input zoom prevention (font-size >= 16px on form controls) --- */ @media (max-width: 767px) { body[data-panel="child"] input, body[data-panel="child"] select, body[data-panel="child"] textarea, .pin-box, .code-input { font-size: 16px !important; } .pin-box { font-size: 26px !important; } /* keep PIN legible */ } /* --- 2. Safe-area insets for notched phones --- */ @supports (padding: env(safe-area-inset-bottom)) { body[data-panel="child"] footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); } body[data-panel="child"] #child-sidebar { padding-bottom: env(safe-area-inset-bottom); } } /* --- 3. Slim, friendly scrollbars (theme-tinted; fallback for login page) --- */ body[data-panel="child"] * { scrollbar-width: thin; scrollbar-color: rgba(var(--mg-accent-rgb, 124,58,237),.35) transparent; } body[data-panel="child"] *::-webkit-scrollbar { width: 9px; height: 9px; } body[data-panel="child"] *::-webkit-scrollbar-thumb { background: rgba(var(--mg-accent-rgb, 124,58,237),.30); border-radius: 9999px; } body[data-panel="child"] *::-webkit-scrollbar-thumb:hover { background: rgba(var(--mg-accent-rgb, 124,58,237),.50); } /* --- 4. Mobile sidebar drawer width cap --- */ @media (max-width: 1023px) { body[data-panel="child"] #child-sidebar { width: min(86vw, 300px); } body[data-panel="child"].sidebar-open { overflow: hidden; } } /* --- 5. Big touch targets on coarse pointers (kids tap, not click) --- */ @media (hover: none) and (pointer: coarse) { body[data-panel="child"] .knav, body[data-panel="child"] a[href], body[data-panel="child"] button { min-height: 48px; } body[data-panel="child"] .knav { min-height: 52px; } } /* --- 6. Tabular numerals so wallet/stars never wrap mid-glyph --- */ .num-en { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; unicode-bidi: plaintext; } /* --- 7. Chunky, high-contrast focus ring (accessibility for kids) --- */ body[data-panel="child"] a:focus-visible, body[data-panel="child"] button:focus-visible, body[data-panel="child"] input:focus-visible { outline: 3px solid var(--mg-accent, #7C3AED); outline-offset: 2px; border-radius: 0.75rem; } /* --- 8. Respect reduced-motion --- */ @media (prefers-reduced-motion: reduce) { body[data-panel="child"] *, .pop-up, .blob, .fade-up { animation: none !important; transition: none !important; } } /* --- 9. Firefox backdrop-filter fallback (login + topbar glass) --- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body[data-panel="child"] .topbar-glass { background: rgba(255,255,255,0.97); } } /* --- 10. WebKit number-input arrows off (PIN + numeric fields) --- */ body[data-panel="child"] input[type="number"]::-webkit-inner-spin-button, body[data-panel="child"] input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } body[data-panel="child"] input[type="number"] { -moz-appearance: textfield; } /* --- 11. PWA standalone notch padding --- */ @media (display-mode: standalone) { body[data-panel="child"] .topbar-glass { padding-top: calc(0.75rem + env(safe-area-inset-top)); } } /* --- 12. x-cloak (hide Alpine pre-init) --- */ [x-cloak] { display: none !important; } /* --- 13. Print: hide chrome --- */ @media print { body[data-panel="child"] #child-sidebar, body[data-panel="child"] header, body[data-panel="child"] footer { display: none !important; } }