/* Mia OS — mobiele laag over Decepticon. Wordt via de proxy in de geinjecteerd. Alleen actief onder 768px. */ #mia-nav-toggle { display: none; } @media (max-width: 767.98px) { /* ── App-shell: echte viewporthoogte op mobiel ───────────────── */ .h-screen { height: 100dvh; } /* ── Sidebar wordt een uitschuifbaar paneel ──────────────────── */ aside.bg-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(84vw, 300px) !important; max-width: 300px; z-index: 70; transform: translateX(-100%); transition: transform .22s cubic-bezier(.4, 0, .2, 1); will-change: transform; box-shadow: 0 0 40px rgba(0, 0, 0, .55); padding-bottom: env(safe-area-inset-bottom); overscroll-behavior: contain; } body.mia-nav-open aside.bg-sidebar { transform: translateX(0); } /* Inhoud van het paneel mag scrollen */ aside.bg-sidebar > nav { overflow-y: auto; } /* Logo wegschuiven onder de sluitknop vandaan */ aside.bg-sidebar > div:first-child { padding-left: 3.25rem !important; } /* ── Verduisterde achtergrond ────────────────────────────────── */ #mia-nav-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .22s ease; } body.mia-nav-open #mia-nav-backdrop { opacity: 1; pointer-events: auto; } body.mia-nav-open { overflow: hidden; } /* ── Menuknop linksboven, over de header heen ────────────────── */ #mia-nav-toggle { display: flex; position: fixed; top: 8px; left: 8px; z-index: 80; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(20, 20, 26, .82); backdrop-filter: blur(8px); color: #e6e6ea; cursor: pointer; -webkit-tap-highlight-color: transparent; } #mia-nav-toggle:active { transform: scale(.94); } #mia-nav-toggle svg { width: 20px; height: 20px; } #mia-nav-toggle .mia-ico-close { display: none; } body.mia-nav-open #mia-nav-toggle .mia-ico-open { display: none; } body.mia-nav-open #mia-nav-toggle .mia-ico-close { display: block; } /* ── Header: ruimte voor de knop, geen tekst die omvalt ──────── */ header.h-14 { padding-left: 3.25rem !important; padding-right: .75rem !important; gap: .5rem; } header.h-14 * { white-space: nowrap; } /* De ondertitel en het streepje zijn op een telefoon alleen ruis; de paginatitel staat er direct onder al. */ header.h-14 h2, header.h-14 [role="separator"] { display: none !important; } /* ── Ademruimte: desktop-padding is te ruim op een telefoon ──── */ .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; } .p-6 { padding: 1rem !important; } .gap-6 { gap: 1rem !important; } /* ── Niets mag horizontaal uit het scherm lopen ──────────────── */ main, main * { max-width: 100%; } main { overflow-x: hidden; } pre, code { white-space: pre-wrap; word-break: break-word; } table { display: block; width: 100%; overflow-x: auto; } /* Lange namen/ID's breken af in plaats van de layout op te rekken */ .truncate { min-width: 0; } /* Tikdoelen groot genoeg houden */ nav a, nav button { min-height: 44px; } }