/* Mobile header overflow — ⋯ opens a dark cyan glass bottom sheet. Desktop: wrappers use display:contents so actions stay in the toolbar. */ .header-more-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; flex-shrink: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius); background: var(--surface-glass); color: var(--text-muted); font-size: 1rem; cursor: pointer; transition: var(--transition); box-shadow: inset 0 0 16px rgba(90, 159, 212, 0.04), 0 0 12px rgba(90, 159, 212, 0.03); } .header-more-btn i { transition: filter var(--transition); } .header-more-btn:hover { color: var(--text-primary); border-color: var(--accent-border); background: var(--hover-ghost); } .header-more-btn:hover i { filter: drop-shadow(0 0 6px rgba(90, 159, 212, 0.35)); } .header-more-btn[aria-expanded="true"] { color: var(--accent-cyan); border-color: var(--accent-border); background: var(--accent-soft); box-shadow: inset 0 0 16px rgba(90, 159, 212, 0.12), 0 0 20px rgba(90, 159, 212, 0.1); } .header-more-btn[aria-expanded="true"] i { filter: drop-shadow(0 0 8px rgba(90, 159, 212, 0.55)); } .header-more-btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; } .header-more-chrome, .header-more-row-label { display: none; } /* Desktop — flatten wrappers into the header-controls flex row */ @media (min-width: 769px) { .header-more-backdrop, .header-more-sheet, .header-more-actions { display: contents; } .header-more-row--lang { display: contents; } .header-more-row--lang .header-more-row-label { display: none; } } @media (max-width: 768px) { .header-more-btn { display: flex; } body.header-more-open { overflow: hidden; } /* Mounted on by header-overflow.js so header backdrop-filter / isolation cannot clip the sheet (especially in Sky / Focus). */ .header-more-backdrop { position: fixed; inset: 0; z-index: 220; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(2, 4, 10, 0); opacity: 0; pointer-events: none; transition: opacity var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out); } .header-more-backdrop.is-open { opacity: 1; background: rgba(2, 4, 10, 0.55); pointer-events: auto; } .header-more-sheet { position: relative; width: 100%; max-width: 28rem; max-height: min(72dvh, 28rem); display: flex; flex-direction: column; padding: 0 0 calc(0.85rem + env(safe-area-inset-bottom)); border: 1px solid var(--border-strong); border-bottom: none; border-radius: calc(var(--radius) + 10px) calc(var(--radius) + 10px) 0 0; background: linear-gradient(180deg, rgba(12, 22, 44, 0.42) 0%, transparent 42%), var(--header-glass); backdrop-filter: blur(14px); box-shadow: 0 -8px 40px rgba(0, 6, 24, 0.55), 0 0 48px rgba(90, 159, 212, 0.1), inset 0 1px 0 rgba(126, 179, 240, 0.08); transform: translate3d(0, 110%, 0); transition: transform var(--duration-normal) var(--ease-out); will-change: transform; } .header-more-backdrop.is-open .header-more-sheet { transform: translate3d(0, 0, 0); } .header-more-chrome { display: block; flex-shrink: 0; padding: 0.85rem 1rem 0.35rem; } .header-more-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .header-more-title { margin: 0; font-family: var(--font-main); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .header-more-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.35rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-muted); font-size: 1rem; cursor: pointer; transition: var(--transition); } .header-more-close:hover { color: var(--text-primary); background: var(--hover-ghost); border-color: var(--border-subtle); } .header-more-close:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; } .header-more-actions { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.35rem 0.85rem 0.25rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .header-more-row--lang { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 44px; padding: 0.35rem 0.65rem; border: 1px solid var(--border-subtle); border-radius: var(--radius); background: var(--surface-glass); box-shadow: inset 0 0 16px rgba(90, 159, 212, 0.04), 0 0 12px rgba(90, 159, 212, 0.03); } .header-more-row-label { display: inline; font-family: var(--font-main); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); } .header-more-row--lang .header-more-row-label { color: var(--text-muted); } .header-more-row--lang .lang-switcher { border: none; background: transparent; box-shadow: none; padding: 0; min-height: 44px; } .header-more-row--lang .lang-btn { min-width: 2.5rem; min-height: 44px; padding: 0.45rem 0.55rem; font-size: 0.75rem; } /* Row-style secondary actions inside the sheet */ .header-more-actions .focus-fit-toggle, .header-more-actions .focus-fullscreen-toggle, .header-more-actions .about-open-btn, .header-more-actions .install-app-btn, .header-more-actions .admin-link { width: 100%; height: auto; min-height: 44px; justify-content: flex-start; gap: 0.75rem; padding: 0.55rem 0.75rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .header-more-actions .focus-fit-toggle-label { display: inline; } /* Fullscreen is Focus-only — keep it out of Sky/Grid overflow sheets */ body:not(.view-focus) .header-more-actions .focus-fit-toggle, body:not(.view-focus) .header-more-actions .focus-fullscreen-toggle { display: none !important; } .header-more-actions .install-app-btn:not([hidden]) { display: flex !important; } .header-more-actions .admin-link .header-more-row-label { color: inherit; } }