/* /layout.css: wide screens, for the parent app and (at the next merge) the teacher side. 2026-10-28, step 1 of the wide-screen plan: the shell. THE BREAKPOINTS (the teacher side's W1, fc160ef, uses the same two): phone under 768px NOTHING in this file applies. Every rule below the base .nav-sos line sits in a min-width query. tablet 768px and up the 480px column goes; content gets a wider column; bottom sheets open as centered boxes laptop 1024px and up a left menu replaces the bottom tabs STEP 2 (2026-10-28): The Roots tiles in 3 columns (tablet and laptop), the Garden in 3 on a laptop (2 on a tablet, as on a phone), a Harvest document on a big white page, and on a laptop the Mailbox as a list with the open email beside it ("Pick an email"; nothing opens by itself). The split is set by bloomMbxSplitSync() in index.html. THE SWITCH: every rule needs html.wide-layout. The parent app sets it for the founder's accounts first (BLOOM_WIDE_PERCENT in index.html), then for everyone. Without the class, a wide screen keeps today's 480px column. Two parts: A. THE LEFT MENU (shared). The page opts in with classes: .side-layout on the container, .side-menu on the menu, .side-menu-item on each row. Colors come from four variables, so the parent side is green and the teacher side navy. B. THE PARENT SHELL. Scoped to body:not(.teacher-mode), so it can never change the teacher side, which shares index.html. */ /* Base: the crisis button in the left menu exists only on a laptop. */ .nav-sos { display: none; } /* ── A. THE LEFT MENU (shared) ─────────────────────────────────────────────────── */ @media (min-width: 1024px) { html.wide-layout .side-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } html.wide-layout .side-layout > * { grid-column: 2; grid-row: 1; } html.wide-layout .side-layout > .side-menu { grid-column: 1; grid-row: 1; } html.wide-layout .side-menu { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; height: auto; overflow-y: auto; padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: none; border-right: 1px solid var(--side-line, rgba(0,0,0,0.08)); box-shadow: none; /* The keyboard collapses the bottom tabs on a phone (max-height 0, set inline). A left menu never sits between the typing box and the keys, so it stays. */ max-height: none !important; opacity: 1 !important; pointer-events: auto !important; } html.wide-layout .side-menu-item { flex: none; flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; min-height: 52px; padding: 0 16px; border-top: none; border-left: 4px solid transparent; border-radius: 12px; font-size: 16px; text-align: left; } html.wide-layout .side-menu-item:hover { background: var(--side-hover, #F4F6F4); } html.wide-layout .side-menu-item.active { background: var(--side-active, #EDF1ED); border-left-color: var(--side-accent, currentColor); } html.wide-layout .side-menu-item:focus-visible { outline: 3px solid var(--side-accent, currentColor); outline-offset: -3px; } } /* ── B. THE PARENT SHELL ───────────────────────────────────────────────────────── */ @media (min-width: 768px) { html.wide-layout body:not(.teacher-mode) { max-width: none; } /* The screens before the app (welcome, terms, email, quiz, how Bloom works) stay a phone-shaped column, centered. */ html.wide-layout body:not(.teacher-mode) > #welcomeScreen, html.wide-layout body:not(.teacher-mode) > #termsScreen, html.wide-layout body:not(.teacher-mode) > #emailScreen, html.wide-layout body:not(.teacher-mode) > #quizScreen, html.wide-layout body:not(.teacher-mode) > #howBloomScreen { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; } /* The crisis button stays at the top of every page, as wide as a column, centered. */ html.wide-layout body:not(.teacher-mode) .sos-btn { max-width: 760px; margin-left: auto; margin-right: auto; } /* Ask Bloom's topic chips (2026-11-10): on a phone one row you swipe; a mouse cannot swipe it, so on a wide screen they wrap onto the next line and every one shows. */ html.wide-layout body:not(.teacher-mode) .chips-row:not(.week-starters) { flex-wrap: wrap; overflow-x: visible; } /* Each page in a centered column (padding, so nothing inside a page changes). Named by id as well: the tabs' own rules (#ourbloomTab { padding: 0 }, #resourcesTab and #mailboxTab 16px at the sides) would otherwise win. Those two keep their 16px. */ html.wide-layout body:not(.teacher-mode) .app-content > .tab, html.wide-layout body:not(.teacher-mode) .app-content > #ourbloomTab, html.wide-layout body:not(.teacher-mode) .app-content > #harvestTab { padding-left: max(0px, calc((100% - 760px) / 2)); padding-right: max(0px, calc((100% - 760px) / 2)); } html.wide-layout body:not(.teacher-mode) .app-content > #resourcesTab, html.wide-layout body:not(.teacher-mode) .app-content > #mailboxTab { padding-left: max(16px, calc((100% - 760px) / 2)); padding-right: max(16px, calc((100% - 760px) / 2)); } /* Ask Bloom: a reading width for the messages, the chips and the typing box. */ html.wide-layout body:not(.teacher-mode) .app-content > #chatTab { padding-left: max(0px, calc((100% - 720px) / 2)); padding-right: max(0px, calc((100% - 720px) / 2)); } html.wide-layout body:not(.teacher-mode) .nav-item { font-size: 12px; } /* Bottom sheets open as a centered box. */ html.wide-layout body:not(.teacher-mode) .win-overlay, html.wide-layout body:not(.teacher-mode) .overlay, html.wide-layout body:not(.teacher-mode) .child-card-overlay, html.wide-layout body:not(.teacher-mode) .book-overlay, html.wide-layout body:not(.teacher-mode) .gu-overlay, html.wide-layout body:not(.teacher-mode) #myDayOverlay.on, html.wide-layout body:not(.teacher-mode) #paywallOverlay { align-items: center; padding: 24px; box-sizing: border-box; } html.wide-layout body:not(.teacher-mode) .win-sheet { max-width: 520px; margin: 0 auto; } html.wide-layout body:not(.teacher-mode) .win-sheet, html.wide-layout body:not(.teacher-mode) .sheet, html.wide-layout body:not(.teacher-mode) .child-card-sheet, html.wide-layout body:not(.teacher-mode) .book-sheet, html.wide-layout body:not(.teacher-mode) .gu-sheet, html.wide-layout body:not(.teacher-mode) .paywall-sheet { border-radius: 24px; max-height: calc(100vh - 48px); overflow-y: auto; } /* My Day (fix B, 2026-11-12) opens below the crisis bar, so it fits what is left, not the whole screen. */ html.wide-layout body:not(.teacher-mode) .myday-sheet { border-radius: 24px; max-height: 100%; overflow-y: auto; } /* The Roots: the six tiles in 3 columns, two even rows. */ html.wide-layout body:not(.teacher-mode) #rootsV2Grid, html.wide-layout body:not(.teacher-mode) .ob-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* A Harvest document: one white page, 760px, bigger type for reading. (Print and the PDF have their own layout, unchanged.) The header and the buttons line up with it. */ html.wide-layout body:not(.teacher-mode) #generatorResult .gen-result-header, html.wide-layout body:not(.teacher-mode) #generatorResult .gen-result-body, html.wide-layout body:not(.teacher-mode) #generatorResult .gen-photos, html.wide-layout body:not(.teacher-mode) #generatorResult .gen-saveshare, html.wide-layout body:not(.teacher-mode) #generatorResult .gen-deliver-grid, html.wide-layout body:not(.teacher-mode) #generatorResult .gen-talk-wrap, html.wide-layout body:not(.teacher-mode) #generatorResult .gen-util-row { max-width: 760px; margin-left: auto; margin-right: auto; box-sizing: border-box; } html.wide-layout body:not(.teacher-mode) #generatorResult .gen-result-header { border-radius: 18px; } html.wide-layout body:not(.teacher-mode) #generatorResult .gen-result-body { background: #fff; border-radius: 18px; padding: 36px 40px; margin-bottom: 20px; box-shadow: 0 8px 30px rgba(28,53,40,0.08); } html.wide-layout body:not(.teacher-mode) #generatorResult .gen-result-body .gen-section-body, html.wide-layout body:not(.teacher-mode) #generatorResult .gen-result-body .gen-step-text { font-size: 18px; line-height: 1.7; } html.wide-layout body:not(.teacher-mode) #generatorResult .gen-result-body .gen-section-title { font-size: 22px; } } @media (min-width: 1024px) { html.wide-layout body:not(.teacher-mode) .nav-bar { --side-accent: var(--accent); --side-active: #EEF2EC; --side-hover: #F5F7F3; --side-line: rgba(28,53,40,0.08); } html.wide-layout body:not(.teacher-mode) .nav-item { font-size: 16px; font-weight: 700; } html.wide-layout body:not(.teacher-mode) .nav-item.active { color: var(--forest); } /* The crisis button, pinned at the top of the menu as well as at the top of the page. */ html.wide-layout body:not(.teacher-mode) .nav-sos { display: flex; align-items: center; gap: 8px; min-height: 52px; margin: 0 0 12px; padding: 0 12px; border: none; border-radius: 12px; white-space: nowrap; background: linear-gradient(135deg, var(--sos), var(--sos-2)); color: #fff; font-family: 'Nunito', sans-serif; font-size: 14.5px; font-weight: 700; text-align: left; cursor: pointer; box-shadow: 0 4px 14px rgba(45,122,90,0.30); } html.wide-layout body:not(.teacher-mode) .nav-sos svg { flex-shrink: 0; } /* ...but only while a full-screen page covers the big one at the top (2026-11-10): the page marks the menu button .top-in-view when nothing does (bloomSosTopSync in index.html). Without that class the menu copy shows, so crisis help is never hidden. */ html.wide-layout body:not(.teacher-mode) .nav-sos.top-in-view { display: none; } html.wide-layout body:not(.teacher-mode) .nav-sos:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; } html.wide-layout body:not(.teacher-mode) .app-content > .tab, html.wide-layout body:not(.teacher-mode) .app-content > #ourbloomTab, html.wide-layout body:not(.teacher-mode) .app-content > #harvestTab, html.wide-layout body:not(.teacher-mode) .app-content > #resourcesTab, html.wide-layout body:not(.teacher-mode) .app-content > #mailboxTab { padding-left: max(24px, calc((100% - 980px) / 2)); padding-right: max(24px, calc((100% - 980px) / 2)); } html.wide-layout body:not(.teacher-mode) .app-content > #chatTab { padding-left: max(24px, calc((100% - 720px) / 2)); padding-right: max(24px, calc((100% - 720px) / 2)); } /* Full-screen pages (an email, a Harvest document) open to the right of the menu, so the menu and its crisis button stay in reach. */ html.wide-layout body:not(.teacher-mode) #mbxDetailOverlay, html.wide-layout body:not(.teacher-mode) #generatorOverlay { left: 232px !important; } /* The Garden: 3 columns. */ html.wide-layout body:not(.teacher-mode) .res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.wide-layout body:not(.teacher-mode) #generatorResult .gen-result-body { padding: 48px 64px; } /* The Mailbox: the list on the left, the open email on the right. The list scrolls on its own; the right side is the email (the same #mbxDetailOverlay, moved in) or "Pick an email". */ html.wide-layout body:not(.teacher-mode) #mailboxTab.mbx-split.active { display: grid !important; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); column-gap: 24px; overflow: hidden; padding-left: 24px; padding-right: 24px; padding-bottom: 0; } html.wide-layout body:not(.teacher-mode) #mailboxTab.mbx-split > * { grid-column: 1; } html.wide-layout body:not(.teacher-mode) #mailboxTab.mbx-split > #mbxBody { overflow-y: auto; min-height: 0; padding-bottom: 24px; } html.wide-layout body:not(.teacher-mode) #mailboxTab.mbx-split > #mbxPane { grid-column: 2; grid-row: 1 / -1; position: relative; margin: 0 0 20px; overflow: hidden; background: #fff; border-radius: 20px; box-shadow: 0 8px 30px rgba(28,53,40,0.10); } html.wide-layout body:not(.teacher-mode) #mbxPane .mbx-pick { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-size: 17px; font-weight: 600; color: var(--text-soft); } html.wide-layout body:not(.teacher-mode) #mbxDetailOverlay.mbx-docked { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 2 !important; background: #fff !important; } html.wide-layout body:not(.teacher-mode) #mailboxTab.mbx-split .mbx-card-open { outline: 3px solid #7A9E7E; outline-offset: -3px; } } @media print { html.wide-layout .side-menu, .nav-sos { display: none !important; } html.wide-layout .side-layout { display: block; } }