/* Only the Magic surface is unframed. Avalon navigation and other pages are untouched. */
body.avalon-magic-page #primary.site-content {
    max-width: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
body.avalon-magic-page #content.avalon-magic-container {
    min-height: calc(100vh - var(--avalon-topbar-height, 58px));
    min-height: calc(100dvh - var(--avalon-topbar-height, 58px));
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
/* Start screen-height, then let the isolated content grow the outer page. */
body.avalon-magic-page .avalon-magic-frame {
    background: #141414;
    height: calc(100dvh - var(--avalon-topbar-height, 58px));
    min-height: 0;
}
.avalon-magic-frame {
    display: block;
    width: 100%;
    height: 70vh;
    min-height: 320px;
    border: 0;
}
.avalon-magic-preview { margin: 0; padding: 10px 16px; font-size: 12px; }
/* Optional Page expansion; the normal host remains in document flow. */
.avalon-magic-page-host {
    position: relative; inset: auto; display: block; box-sizing: border-box;
    width: 100%; max-width: none; height: auto; max-height: none;
    margin: 0; padding: 0; border: 0; overflow: visible;
    background: transparent; color: inherit;
}
.avalon-magic-page-host[data-expanded="true"] {
    position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh;
    overflow: hidden; background: var(--avalon-bg, #141414);
}
.avalon-magic-page-host::backdrop { background: var(--avalon-bg, #141414); }
html.avalon-magic-page-expanded, html.avalon-magic-page-expanded body { overflow: hidden !important; }
.avalon-magic-page-host[data-expanded="true"] .avalon-magic-frame { height: 100%; }
.avalon-magic-page-toggle-rail {
    position: sticky; top: var(--avalon-topbar-height, 58px); z-index: 2;
    height: 0; width: 100%; box-sizing: border-box; pointer-events: none;
    display: flex; justify-content: flex-end;
    padding-right: max(var(--magic-toggle-edge-x, 12px), env(safe-area-inset-right));
}
.avalon-magic-page-host[data-expanded="true"] .avalon-magic-page-toggle-rail { position: absolute; top: 0; }
body.avalon-magic-page .avalon-magic-page-toggle,
body.avalon-magic-page .avalon-magic-page-toggle:hover,
body.avalon-magic-page .avalon-magic-page-toggle:active,
body.avalon-magic-page .avalon-magic-page-toggle:focus {
    appearance: none; display: grid; place-items: center; flex: 0 0 44px;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    margin: 0; padding: 0; border: 0; border-radius: 0;
    transform: translateY(max(var(--magic-toggle-edge-y, 8px), env(safe-area-inset-top)));
    background: transparent; background-image: none; box-shadow: none; text-shadow: none;
    outline: none;
    color: var(--magic-toggle-color, var(--avalon-text, #eee));
    opacity: var(--magic-toggle-opacity, .85); cursor: pointer; pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}
body.avalon-magic-page .avalon-magic-page-toggle:focus-visible:not([data-suppress-focus-ring]) {
    opacity: 1; outline: 2px solid currentColor; outline-offset: 2px;
}
.avalon-magic-page-toggle svg { display: block; width: var(--magic-toggle-size, 20px); height: var(--magic-toggle-size, 20px); }
body.avalon-magic-page .avalon-magic-page-toggle[hidden] { display: none; }