/* One navigation for Studio, Reading Room and Mediatheque (UI release program R6). Phone: bottom bar, 56px + safe area, hidden in an open text (owner 2026-09-26, option 2). Desktop: a quiet top strip. Accent = tekhelet (owner D6). */ .lp-app-nav { display: flex; justify-content: center; gap: 4px; background: var(--theme-bg-card, #ffffff); border-bottom: 1px solid var(--theme-border-soft, #e2e8f0); font-family: var(--lp-font-ui, system-ui, sans-serif); } .lp-app-nav-item { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 8px; color: var(--theme-text-secondary, #475569); text-decoration: none; font-size: 15px; font-weight: 500; } .lp-app-nav-item:hover { color: var(--theme-text-primary, #0f172a); background: var(--theme-bg-hover, #f1f5f9); } .lp-app-nav-item[aria-current="page"] { color: #1B4FB8; font-weight: 600; } .lp-app-nav-item:focus-visible { outline: 2px solid #1B4FB8; outline-offset: 2px; } .lp-app-nav-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Desktop and tablet: a strip at the top of the page. */ @media (min-width: 600px) { .lp-app-nav { position: sticky; top: 0; z-index: 50; } body.lp-has-app-nav > .lp-app-nav { margin-bottom: 8px; } /* scrollIntoView({ block: "start" }) targets land below the strip, not under it (R7). */ html:has(> body.lp-has-app-nav) { scroll-padding-top: 56px; } /* The study-mode reader is a fixed full-screen layer: it starts below the strip, otherwise the strip covered its bar («← Полки», ▶, 🔍, Аа) (found in R10 verification). */ body.room-study.lp-has-app-nav #roomReader { top: 45px; } } /* Phone: a bottom bar with labels under the icons. */ @media (max-width: 599px) { .lp-app-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; justify-content: space-around; gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); border-bottom: 0; border-top: 1px solid var(--theme-border-soft, #e2e8f0); } .lp-app-nav-item { flex: 1 1 0; flex-direction: column; gap: 2px; min-height: 48px; padding: 4px 2px; font-size: 11.5px; } .lp-app-nav-icon { width: 22px; height: 22px; } body.lp-has-app-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } /* Studio toasts sit above the bar, not on it (R7). */ body.lp-has-app-nav #toastContainer, body.lp-has-app-nav .v3-toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } body.lp-has-app-nav:not(.room-reading) .room-toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } body.lp-has-app-nav .ml-toast { inset-block-end: calc(72px + env(safe-area-inset-bottom, 0px)); } body.lp-has-app-nav .ml-bulk[data-has-selection=true] { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } /* An open text gives the screen to the video and the table. */ body.room-reading .lp-app-nav { display: none; } body.room-reading.lp-has-app-nav { padding-bottom: 0; } } /* The nav replaces these older cross links. */ body.lp-has-app-nav .room-mediatheque-entry, body.lp-has-app-nav #roomStudioLink, body.lp-has-app-nav .ml-crossnav { display: none !important; } @media (prefers-color-scheme: dark) { body:not(.theme-light) .lp-app-nav { background: var(--theme-bg-card, #1e293b); border-color: var(--theme-border-soft, #334155); } body:not(.theme-light) .lp-app-nav-item { color: #cbd5e1; } body:not(.theme-light) .lp-app-nav-item[aria-current="page"] { color: #7FA6F5; } } body.theme-dark .lp-app-nav { background: var(--theme-bg-card, #1e293b); border-color: var(--theme-border-soft, #334155); } body.theme-dark .lp-app-nav-item { color: #cbd5e1; } body.theme-dark .lp-app-nav-item[aria-current="page"] { color: #7FA6F5; } body.ml-dark .lp-app-nav { background: #111a2a; border-color: #2a3a52; } body.ml-dark .lp-app-nav-item { color: #cbd5e1; } body.ml-dark .lp-app-nav-item[aria-current="page"] { color: #7FA6F5; } @media (forced-colors: active) { .lp-app-nav-item[aria-current="page"] { outline: 2px solid LinkText; } } /* R9 (audit P2-7): a toast never covers the buttons of an open bottom sheet — it rises to the top while the word card or the «Мои слова» sheet is open. */ body:has(.rm-sheet.rm-open:not([hidden])) .room-toast, body:has(.room-study.room-study-open:not([hidden])) .room-toast, body:has(.rm-sheet.rm-open:not([hidden])) #toastContainer { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; } /* R12 (owner 2026-09-26): one typed footer for Studio, Room and Mediatheque, rendered by /js/app-footer.js into