/* The page's own styling (FAZ 16, plan 16.10): a file of its own, not inline, so that the content security policy needs no 'unsafe-inline' for what we write (Compose adds style
 * elements of its own to its shadow root, which is the policy's one reason to allow inline styles). */
/*
 * The page's two palettes (B11, Settings › Appearance › Theme). Before the application has drawn, the page follows the system (`prefers-color-scheme`, the theme's own
 * default) unless pp-page.js found the application's last palette (`data-pp-theme`); once it runs, the application sets `data-pp-theme` itself — dark while its player is
 * on screen, whatever the theme, so the page under the see-through canvas stays dark there.
 */
:root {
    color-scheme: dark;
    --pp-page: #0b0d12; --pp-text: #e8eaf0;
    --pp-notice: #1b1f2a; --pp-notice-text: #e8eaf0; --pp-notice-line: #3a4152; --pp-notice-quiet: #c8cdd8; --pp-notice-ring: #f5f5f5; --pp-notice-shadow: rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: light) {
    :root:not([data-pp-theme="dark"]) {
        color-scheme: light;
        --pp-page: #f8f6f1; --pp-text: #1a1712;
        --pp-notice: #f1eee7; --pp-notice-text: #1a1712; --pp-notice-line: #d3ccbe; --pp-notice-quiet: #4e4940; --pp-notice-ring: #7c510b; --pp-notice-shadow: rgba(60, 45, 20, .18);
    }
}
:root[data-pp-theme="light"] {
    color-scheme: light;
    --pp-page: #f8f6f1; --pp-text: #1a1712;
    --pp-notice: #f1eee7; --pp-notice-text: #1a1712; --pp-notice-line: #d3ccbe; --pp-notice-quiet: #4e4940; --pp-notice-ring: #7c510b; --pp-notice-shadow: rgba(60, 45, 20, .18);
}
/*
 * The page's colour is the root's, and only the root's (A104, 18 Oct 2026): the player's `<video>` lies under the canvas (`pp-behind`, z-index -1), which a stacking context
 * paints above the root's background but BELOW an in-flow body's own background - a dark <body> hid the picture in every browser. The body is see-through; the root carries
 * the palette's page colour under everything.
 * The page itself never scrolls (A106): everything that scrolls does so inside the canvas. Compose's canvas is an inline box, whose line leaves a few pixels under it (4 px in
 * Chrome), so the document could be scrolled by the wheel or a key - and the canvas went with it while the picture, laid out in the same coordinates, did not.
 */
html { margin: 0; height: 100%; overflow: hidden; background: var(--pp-page); color: var(--pp-text); font-family: system-ui, sans-serif; }
body { margin: 0; height: 100%; overflow: hidden; background: transparent; }
/* Shown until the application draws; Compose replaces the body's content. */
#pp-loading { position: fixed; inset: 0; display: grid; place-items: center; font-size: 15px; opacity: .7; }

/*
 * The player's element (FAZ 16, plan 16.8 and 16.9). The picture is the browser's, not Compose's (PROBE section 5), so a screen that shows it reserves a box and the shell
 * lays this element over the box (`VideoSlot` / `VideoLayer`: left, top, width and height are set from the box, in the document's coordinates measured from the canvas, so
 * that the two move together - A106). Over the canvas by default (Live's preview: nothing is drawn over the picture), `pp-behind` under it for the player's page and the
 * mini player, which draw over the picture and leave a see-through hole in the canvas where it is (A104). It never takes a press: `pointer-events: none`. `playsinline`
 * keeps an iPhone from taking the picture into its own player.
 */
#pp-video { position: absolute; left: 0; top: 0; width: 0; height: 0; background: #000; z-index: 10; display: none; object-fit: contain; pointer-events: none; }
#pp-video.pp-visible { display: block; }
#pp-video.pp-behind { z-index: -1; }

/*
 * Notices of the page itself (FAZ 16, plan 16.10): "a new version is ready" and the native-app banner. DOM, not Compose: they exist before and beside the application, and
 * they must work when the application is the thing being replaced. A column at the top, over the canvas; each notice is one row, dismissible.
 */
#pp-notices { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; padding-top: max(8px, env(safe-area-inset-top)); pointer-events: none; }
#pp-notices > * { pointer-events: auto; box-sizing: border-box; width: 100%; max-width: 560px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--pp-notice); color: var(--pp-notice-text); border: 1px solid var(--pp-notice-line); box-shadow: 0 6px 24px var(--pp-notice-shadow); font-size: 14px; line-height: 1.35; }
#pp-notices img { width: 40px; height: 40px; border-radius: 9px; flex: none; }
#pp-notices .pp-notice-text { flex: 1 1 auto; min-width: 0; }
#pp-notices .pp-notice-text strong { display: block; font-weight: 600; }
#pp-notices a, #pp-notices button { font: inherit; border-radius: 8px; border: 0; cursor: pointer; min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; text-decoration: none; }
#pp-notices .pp-primary { background: #f0c070; color: #0a0a0a; font-weight: 600; }
#pp-notices .pp-quiet { background: transparent; color: var(--pp-notice-quiet); }
#pp-notices a:focus-visible, #pp-notices button:focus-visible { outline: 2px solid var(--pp-notice-ring); outline-offset: 2px; }