/* ══════════════════════════════════════════════════════════════════════════ tabbar.css — the phone's bottom navigation (js/core/ui/tabbar.js). WHY THIS EXISTS. The canon rail already concedes gracefully on a phone: it reflows to two rows and folds its sections into a full-width dropdown (rail-canon.css "Phones"). That dropdown is correct as a fallback and wrong as the primary nav — it spends a whole rail row on chrome, it hides every destination behind a menu, and it puts the most-used control on the page at the FAR end of the thumb's reach. Tap accuracy in the natural thumb zone is ~96%; at the top of a modern phone it is ~61%. So on phones the sections move to a fixed bottom bar and the rail gets its row back. The bar MIRRORS the live tab strip — it keeps no list of its own — so runtime tab gating and badges arrive here for free. FOUR SLOTS AND A MENU, FOREVER. The bar takes at most four destinations plus an overflow sheet, no matter how many tabs the flags add. That cap is the whole point: Books can carry twelve sections, and twelve slots on a 390px screen is 32px each — under the 44pt floor this codebase enforces everywhere else. A nav that a feature switch can widen is a nav that a feature switch can break. Everything is scoped under html.nd-tabbar (feature_mobile_tabbar) and inside the same ≤640px break the rail uses for its own phone reflow, so with the flag off — or on any wider screen — this file contributes nothing. ══════════════════════════════════════════════════════════════════════════ */ :root { --ndtb-h: 56px; /* bar height, excluding the safe area */ --ndtb-pad: env(safe-area-inset-bottom, 0px); } /* z-index sits ABOVE the page and the editor's sticky action bar, and BELOW .bk-overlay (60) — a books modal must cover the nav, not fight it. */ .ndtb { display: none; } .ndtb-scrim, .ndtb-sheet { display: none; } @media (max-width: 640px) { html.nd-tabbar .ndtb { display: flex; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: var(--sp-1_5) var(--sp-1) calc(var(--sp-1) + var(--ndtb-pad)); gap: var(--sp-0_5); background: var(--app-surface); border-top: 1px solid var(--app-border); box-shadow: 0 -6px 20px rgb(0 0 0 / 28%); } :root[data-theme="light"] html.nd-tabbar .ndtb { box-shadow: 0 -4px 16px rgb(15 23 42 / 8%); } /* The page owes the bar its own height, or the last row of every list sits under it. Written on rather than a wrapper so it holds on all seven books pages plus dispatch, none of which share a container class. */ html.nd-tabbar body { padding-bottom: calc(var(--ndtb-h) + var(--ndtb-pad)); } /* The rail's phone dropdown is now redundant — the bar IS the section list. Reclaiming this row is most of the win: it was a full rail row of chrome. */ html.nd-tabbar .nr-selwrap, html.nd-tabbar .nd-tabsel-wrap { display: none; } /* Create moves to the bar's centre slot, so the rail's own "+ New" is now a second button for the same verb — and the one that is harder to reach. It keeps its MENU, which is what the create sheet mirrors; only the trigger stands down. */ html.nd-tabbar .nr-newwrap > .nr-new, html.nd-tabbar .nd-new-wrap > .nd-new { display: none; } /* THE TWO FLOATING LAUNCHERS SAT EXACTLY WHERE THE BAR NOW IS. The help bubble is fixed bottom-right at z-index 2147483000 and the chat circle bottom-left, so both landed on top of the nav — on the two slots hardest to give up, Today and More. Neither earns a permanent button on a 390px screen at the frequency they are used, so on phones they stand down and take a tile in the More sheet instead (core/ui/tabbar.js `extras`), which is what keeps them reachable rather than merely gone. The BUTTONS go, not the widgets: .ndh-panel is positioned inside .ndh-root, so hiding the root would hide the panel the tile opens. The root stays as a zero-size anchor and is lifted clear of the bar instead. */ html.nd-tabbar .ndh-fab { display: none; } html.nd-tabbar .ndh-root { bottom: calc(var(--ndtb-h) + var(--ndtb-pad) + var(--sp-2)); } /* THE CHAT BUBBLE NEEDS !important AND ONLY THE CHAT BUBBLE DOES. dm-ui.js reveals its fallback launcher by writing an INLINE style once identity resolves (`l.style.display = 'flex'`, dm-ui.js:1331), and an inline style beats any stylesheet rule that is not !important — so the plain rule that retired the help bubble left this one on screen, sitting on the nav. bench-canon.css hit the same wall on the same element and reached for the same tool. Disabled at the point of use rather than exempting the file, which would hand every future rule here the same licence. */ /* stylelint-disable-next-line declaration-no-important */ html.nd-tabbar .dm-launch { display: none !important; } /* The messages drawer hangs from top:58px at a fixed 600px, capped only against the viewport — so on a short phone its foot ran under the bar. Cap it against the bar instead. */ html.nd-tabbar .dm-drawer { max-height: calc(100vh - 58px - var(--ndtb-h) - var(--ndtb-pad) - var(--sp-3)); } /* Same argument for the legacy bar's own bottom nav (books.css, ≤560px): the strip stays in the DOM — the bar mirrors it and proxies clicks to it — but it stops drawing, or the page carries two bottom navs. */ html.nd-tabbar .books-tabs { display: none; } /* ── slots ─────────────────────────────────────────────────────────────── */ .ndtb-i { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-0_5); min-height: 48px; padding: var(--sp-0_5) var(--sp-0_5); border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--app-muted); font: 600 10.5px var(--font-ui, 'Sora', system-ui, sans-serif); letter-spacing: -.005em; line-height: 1.1; text-align: center; text-decoration: none; position: relative; -webkit-tap-highlight-color: transparent; } .ndtb-i i.ti { font-size: 21px; line-height: 1; } .ndtb-i span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ndtb-i.is-active { color: var(--app-accent); } .ndtb-i:active { background: var(--app-card-hover); } .ndtb-i:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -2px; } /* Badges ride the icon's corner rather than sitting inline — an inline pill would widen a slot that has no width to give. */ .ndtb-dot { position: absolute; top: 0; left: 56%; min-width: 15px; height: 15px; padding: 0 var(--sp-1); box-sizing: border-box; border-radius: 999px; background: var(--app-danger); color: var(--app-accent-fg); font: 700 9.5px var(--num-font, 'Inter', system-ui, sans-serif); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--app-surface); } :root[data-theme="dark"] .ndtb-dot { color: var(--app-text); } /* ── centre create ─────────────────────────────────────────────────────── */ .ndtb-newslot { flex: 0 0 62px; display: flex; align-items: center; justify-content: center; } .ndtb-new { width: 46px; height: 46px; margin-top: -6px; border: 0; border-radius: 15px; cursor: pointer; background: var(--app-accent); color: var(--app-accent-fg); display: grid; place-items: center; box-shadow: 0 6px 18px rgb(51 177 255 / 32%); -webkit-tap-highlight-color: transparent; } .ndtb-new i.ti { font-size: 23px; } .ndtb-new:focus-visible { outline: 2px solid var(--app-text); outline-offset: 2px; } /* ── sheets ────────────────────────────────────────────────────────────── */ .ndtb-scrim { display: block; position: fixed; inset: 0; z-index: 56; background: rgb(0 0 0 / 55%); } .ndtb-scrim[hidden] { display: none; } .ndtb-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 57; max-height: 82vh; overflow-y: auto; padding: var(--sp-2) var(--sp-3_5) calc(var(--sp-6) + var(--ndtb-pad)); background: var(--app-surface); border-top: 1px solid var(--app-border-2); border-radius: 20px 20px 0 0; box-shadow: 0 -18px 44px rgb(0 0 0 / 45%); animation: ndtb-up .2s ease both; } .ndtb-sheet[hidden] { display: none; } .ndtb-grab { width: 36px; height: 4px; border-radius: 999px; background: var(--app-border-2); margin: var(--sp-0_5) auto var(--sp-3); } .ndtb-sheet h2 { margin: 0 0 var(--sp-3); padding: 0 var(--sp-0_5); font: 750 17px var(--font-ui, 'Sora', system-ui, sans-serif); letter-spacing: -.02em; color: var(--app-text); } /* Ten-plus destinations read faster as tiles than as a scrolling list. */ .ndtb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); } .ndtb-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 86px; padding: var(--sp-2) var(--sp-1); border-radius: 14px; cursor: pointer; background: var(--app-card); border: 1px solid var(--app-border); color: var(--app-text-2); text-decoration: none; font: 600 11px var(--font-ui, 'Sora', system-ui, sans-serif); text-align: center; line-height: 1.25; position: relative; } .ndtb-tile i.ti { font-size: 21px; opacity: .85; } .ndtb-tile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .ndtb-tile:active { background: var(--app-card-hover); } .ndtb-tile.is-active { border-color: var(--app-accent); color: var(--app-text); } .ndtb-tile .ndtb-dot { top: var(--sp-2); left: auto; right: var(--sp-2); box-shadow: none; } /* The create sheet is a list, not a grid — each row carries a verb. */ .ndtb-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 60px; padding: var(--sp-3) var(--sp-3); margin-bottom: var(--sp-2); border-radius: 13px; cursor: pointer; text-decoration: none; background: var(--app-card); border: 1px solid var(--app-border); color: var(--app-text); font: 650 14.5px var(--font-ui, 'Sora', system-ui, sans-serif); letter-spacing: -.01em; } .ndtb-row:last-child { margin-bottom: 0; } .ndtb-row:active { background: var(--app-card-hover); } .ndtb-row > i.ti { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: var(--app-card-hover); color: var(--app-accent); } /* Bottom-anchored chrome clears the bar. books.css already lifts these off --books-navh, but only below 560px; the bar starts at 640, so the range between the two needs its own lift or the editor's action bar sits on top of the nav. Re-stated here rather than widening the books.css break, which would move the bar-less case too. */ html.nd-tabbar .ed-actions { bottom: calc(var(--ndtb-h) + var(--ndtb-pad)); } html.nd-tabbar .bulk-bar { bottom: calc(var(--ndtb-h) + var(--sp-3_5) + var(--ndtb-pad)); } html.nd-tabbar #flash, html.nd-tabbar .toast-container { bottom: calc(var(--ndtb-h) + var(--sp-4) + var(--ndtb-pad)); } } @keyframes ndtb-up { from { transform: translateY(100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .ndtb-sheet { animation: none; } }