/* /live-preview: the full in-tab app between the site header and footer.
   The header is 70px and sticky, so the app fills exactly the rest of the
   viewport; the footer sits below it, one scroll away. */
.live-preview {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 71px);
    height: calc(100dvh - 71px);
    min-height: 480px;
}

.live-preview-note {
    margin: 0;
    padding: 6px 16px;
    font-size: .85rem;
    text-align: center;
    color: var(--ink);
    background: var(--pink-wash);
    border-bottom: 1px solid var(--line);
}

.live-preview-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    display: block;
}

main:has(.live-preview) + footer {
    margin-top: 0;
}

/* The page's one heading, set inline in the notice strip so the app keeps the room. */
.live-preview-title {
    display: inline;
    margin: 0 .4em 0 0;
    font-size: inherit;
    font-weight: 700;
    letter-spacing: 0;
}