/* Page layout for both Oniro browser pages, kept out of the HTML so the pages'
   Content-Security-Policy can refuse inline styles. Colors and fonts come from the demo kit's
   tokens.css. */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; display: block; }
canvas { width: 100vw; height: 100vh; display: block; }

/* Shown by webgl_check.js in place of the canvas when WebGL2 is unavailable. */
#webgl-warning {
    display: none; position: fixed; inset: 0; z-index: 10;
    background: var(--demo-bg); color: var(--demo-text); font-family: var(--demo-font);
    align-items: center; justify-content: center; text-align: center;
    padding: 2rem; box-sizing: border-box;
}
#webgl-warning > div { max-width: 660px; line-height: 1.6; }
#webgl-warning h2 { color: var(--demo-accent); font-weight: 600; margin-bottom: 0.5rem; }
#webgl-warning .hint { opacity: 0.8; font-size: 0.9em; }

/* Unhidden by the WebAssembly panic hook (oniro_web_ui::page) with the panic message. */
#wasm-panic {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 20;
    max-height: 40vh; overflow: auto; margin: 0 auto; max-width: 720px;
    padding: 1rem 1.25rem; box-sizing: border-box; border-radius: var(--demo-radius);
    background: var(--demo-surface); color: var(--demo-text); font-family: var(--demo-font);
    border: 2px solid var(--demo-accent); white-space: pre-wrap; overflow-wrap: anywhere;
}
#wasm-panic[hidden] { display: none; }