/* The link page studio (views/pages/show.php): its shell, the top bar, the
   canvas with the frames the admin draws around the page, the bar beside
   it, Try's question and arrival, the version bar, the toast, and the
   panel's place, fold and sheet. The panel's own parts are
   studio-panel.css's. [D117; Phase 2, section 3.4; the look of
   docs/mockups/link-page-editor.html, version 9]

   Mobile first. Below 860 pixels the canvas fills the screen under the top
   bar, the page drawn without a device, the bar floats at its foot, and the
   panel is a sheet from the bottom. From 860 pixels the panel stands at the
   right, 340 pixels, 384 from 1,060, the bar upright at the canvas's left
   edge, and the page in the frame the bar chooses: a computer's, as wide as
   the canvas, or a phone's, scaled to fit (studio.js sets the scales). What
   only works with the script, the sheet and the frame studio.js shows,
   asks @media (scripting: enabled); without the script the radios choose
   the frame (:has()), the panel follows the canvas on a phone, and the
   phones sit at a fixed scale.

   The classes:

     .studio-body, .studio-shell, .studio-main
                         the app shell's variant without the sidebar: the
                         studio fills the screen, the impersonation banner
                         above it
     .studio, .is-folded, .is-sheet-open
                         the studio; the panel folded away (a computer), the
                         sheet open (a phone)
     .studio-top, .studio-top-start, .studio-top-middle, .studio-top-end
                         the top bar, three columns, the outer two of one
                         width, so its middle is the bar's
     .studio-back, .studio-title, .studio-name, .studio-step
                         the way back, the page's name in the text's face,
                         "Step 3 of 4" under it on a phone
     .studio-setup, .studio-rule
                         the setup's steps in the middle, a thin rule
     .studio-links, .studio-links-first, .studio-links-icon, .studio-links-more,
     .studio-links-chevron, .studio-links-phone, .studio-links-menu,
     .studio-links-list, .studio-link, .studio-link-line, .is-phone-only
                         the links as one pill and its menu; on a phone the
                         menu's button alone
     .studio-menu-title  a menu's title, the links', the device's and the
                         problems'
     .studio-saved, .studio-redo, .studio-publish, .studio-publish-button,
     .studio-publish-check, .studio-wide-only, .studio-problems,
     .studio-problem, .studio-problem-mark, .studio-create-link,
     .studio-top-note    Saved, Redo, Publish with its check and its
                         problems, Create link in Publish's place on a phone,
                         the line while an experiment runs
     .studio-work        the canvas and the panel side by side
     .studio-stage, .studio-backdrop
                         the canvas, in the page's colour (--studio-page)
                         with its photo blurred behind the phones
     .studio-frame, .is-shown, .studio-viewport, .studio-desk
                         a frame of the canvas, the one shown, the page's
                         viewport, the computer's
     .studio-device-box, .studio-device, .is-iphone, .is-android,
     .studio-screen, .in-app, .studio-status, .studio-island,
     .studio-status-icons, .studio-app-bar, .studio-app-title,
     .studio-chrome-bar, .studio-chrome-address, .studio-chrome-tabs,
     .studio-safari-bar, .studio-safari-address, .studio-home
                         a phone: its body, scaled as a whole, its screen,
                         the status bar, an app's bar, Chrome's, Safari's,
                         the home indicator
     .studio-add-photo   "Add a photo" where the page's photo would go
     .studio-line, .studio-line-action
                         the line under the device, and its Change or Start
                         again
     .studio-version, .studio-version-text, .studio-version-again
                         the bar over a version Versions shows
     .studio-ask, .studio-ask-box, .studio-ask-title, .studio-ask-actions,
     .is-default         the app's own question on an iPhone, in Try
     .studio-arrival, .studio-arrival-mark, .studio-arrival-title,
     .studio-arrival-note
                         where the fan arrives, in Try
     .studio-dock, .studio-dock-device, .studio-dock-button, .studio-dock-rule,
     .studio-dock-name, .studio-devices, .studio-places, .studio-device-menu,
     .studio-edit, .studio-try
                         the bar beside the page
     .studio-panel, .studio-sheet-head, .studio-grabber, .studio-fold
                         the panel's place (its insides studio-panel.css's),
                         the sheet's head on a phone, the fold
     .studio-toast, .is-shown, .studio-toast-text, .studio-toast-action,
     .studio-toast-close the toast, its Undo or link, a flash's close

   Colours are tokens: the admin's for the bars, the panel and the toast;
   the device's own (--color-device-*, the same in either theme) for what
   draws the phone; and the page's own colour, which studio.js reads from
   the draft (--studio-page). No colour takes a new meaning (D117, 9). */

/* ------------------------------------------------------------------------
   The shell
   ------------------------------------------------------------------------ */

.studio-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.studio-shell,
.studio-main,
.studio {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.studio {
    background: var(--color-canvas);
}

/* The cover of a page on its way (D110) lies over the whole studio, which
   has no sidebar beside it nor a bar of the phone under it. */
.studio-body .page-cover {
    left: 0;
    padding-bottom: 0;
}

/* ------------------------------------------------------------------------
   The top bar
   ------------------------------------------------------------------------ */

.studio-top {
    position: relative;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-1);
    height: 52px;
    padding: 0 var(--space-2) 0 var(--space-1);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.studio-top-start {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

.studio-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The studio's title, in the text's face: the display face is a page's
   top title alone (D102), and the studio's name is a bar's. */
.studio-name {
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-step {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    line-height: 1.3;
    white-space: nowrap;
}

.studio-top-middle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    white-space: nowrap;
}

.studio-top-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
}

.studio-rule {
    flex: none;
    width: 1px;
    height: 20px;
    background: var(--color-border);
}

/* The setup's steps have no room on a phone, where "Step 3 of 4" stands
   under the name instead. */
.studio-setup {
    display: none;
}

/* The links: on a phone the menu's button alone, a link's icon. */
.studio-links {
    display: flex;
    align-items: center;
}

.studio-links-first,
.studio-links-chevron {
    display: none;
}

.studio-links-more > summary {
    list-style: none;
}

.studio-links-more > summary::-webkit-details-marker {
    display: none;
}

.studio-links-more[open] > summary {
    background: var(--color-surface-selected);
    color: var(--color-text);
}

.studio-links-menu {
    width: 300px;
}

.studio-menu-title {
    padding: 6px var(--space-3) var(--space-2);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.studio-links-list {
    list-style: none;
}

/* A link of the menu: its platform's mark, its address with Copy, its
   account under it. The copy-text partial's parts take their own places. */
.studio-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "mark address copy"
        "mark line copy";
    align-items: center;
    column-gap: 10px;
    padding: 6px var(--space-1) 6px var(--space-2);
}

.studio-link .cluster {
    display: contents;
}

.studio-link .inv-mark {
    grid-area: mark;
}

.studio-link .mono,
.studio-links-first .mono {
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-link .mono {
    grid-area: address;
}

.studio-link [data-copy] {
    grid-area: copy;
}

.studio-link-line {
    grid-area: line;
    overflow: hidden;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-links-menu .menu-item .icon {
    width: 16px;
    height: 16px;
}

/* Saved, a live region at every width, shows from 1,060 pixels, where the
   bar has its room; narrower a screen reader alone hears it. */
.studio-saved {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 6px;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    opacity: 0;
    transition: opacity 0.3s var(--ease-in-out);
}

.studio-saved.is-shown {
    opacity: 1;
}

.studio-saved .icon {
    width: 14px;
    height: 14px;
}

@media (max-width: 1059px) {
    .studio-saved {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

.studio-publish {
    position: relative;
    margin-left: var(--space-1);
}

.studio-publish-button .icon {
    width: 16px;
    height: 16px;
}

/* Published, which there is nothing to do: the mock's quiet button. */
.studio-publish-button:disabled {
    --btn-fg: var(--color-text-subtle);
    background: var(--color-surface-muted);
    opacity: 1;
}

.studio-wide-only {
    display: none;
}

.studio-problems {
    width: 300px;
}

.studio-problem {
    align-items: flex-start;
}

.studio-problem .menu-item-text {
    white-space: normal;
}

.studio-problem .icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--color-text-subtle);
}

.studio-problem .studio-problem-mark {
    color: var(--color-danger-text);
}

/* On a phone the next step of the setup takes Published's place. */
.studio-create-link {
    display: none;
}

.studio-top-end[data-publish-state="published"]:has(.studio-create-link) .studio-publish {
    display: none;
}

.studio-top-end[data-publish-state="published"] .studio-create-link {
    display: inline-flex;
}

.studio-top-note {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

@media (max-width: 859px) {
    .studio-redo,
    .studio-top-note {
        display: none;
    }
}

@media (min-width: 860px) {
    .studio-top {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: var(--space-3);
        height: 56px;
        padding: 0 var(--space-3);
    }

    .studio-top-start {
        gap: var(--space-2);
    }

    .studio-step {
        display: none;
    }

    .studio-setup {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .studio-setup .steps {
        width: min(320px, 26vw);
    }

    /* The pill: the first link with Copy, the menu's arrow after a rule. */
    .studio-links {
        height: 36px;
        padding: 0 var(--space-1) 0 var(--space-3);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-full);
        background: var(--color-surface);
        box-shadow: var(--shadow-xs);
    }

    .studio-links-first {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-width: 0;
    }

    .studio-links-icon {
        width: 16px;
        height: 16px;
        color: var(--color-text-subtle);
    }

    .studio-links-first .mono {
        max-width: 260px;
    }

    .studio-links .btn-icon {
        width: 28px;
        min-height: 28px;
        border-radius: var(--radius-full);
    }

    .studio-links-more {
        display: flex;
        align-items: center;
        margin-left: 2px;
        padding-left: 3px;
        background: linear-gradient(var(--color-border), var(--color-border)) left center / 1px 18px no-repeat;
    }

    .studio-links-more.is-phone-only,
    .studio-links-phone {
        display: none;
    }

    .studio-links-chevron {
        display: block;
    }

    .studio-wide-only {
        display: inline;
    }

    .studio-top-end[data-publish-state="published"]:has(.studio-create-link) .studio-publish {
        display: block;
    }

    .studio-top-end[data-publish-state="published"] .studio-create-link {
        display: none;
    }
}

@media (min-width: 860px) and (max-width: 1239px) {
    .studio-links-first .mono {
        max-width: 140px;
    }
}

/* Below 1,060 pixels the steps keep their room: each its bar, the done
   ones their check, and the current one its name; the others' names are
   a screen reader's. */
@media (min-width: 860px) and (max-width: 1059px) {
    .studio-setup .steps {
        grid-auto-columns: minmax(28px, auto);
        width: auto;
    }

    .studio-setup .step:not(.is-current) .step-label > span:not(.sr-only) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------------
   The canvas
   ------------------------------------------------------------------------ */

.studio-work {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
}

/* What studio.js sets on the canvas: the page's colour, the phones' scale,
   and the computer's viewport, as wide as the canvas and never narrower
   than 820 pixels, with its scale. These are the values without it. */
.studio-stage {
    --studio-page: var(--color-device);
    --studio-phone-scale: 0.62;
    --studio-desk-width: 100%;
    --studio-desk-height: 100%;
    --studio-desk-scale: 1;
    --studio-system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --studio-chrome: color-mix(in srgb, var(--color-device) 92%, var(--color-device-paper));
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--studio-page);
    isolation: isolate;
}

@media (max-height: 760px) {
    .studio-stage {
        --studio-phone-scale: 0.52;
    }
}

/* The photo blurred behind the phones, as the page draws it from 820
   pixels, a little under the page's colour. */
.studio-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    filter: blur(90px) saturate(1.4);
    transform: scale(1.15);
    pointer-events: none;
}

.studio-frame {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px 0 84px;
}

@media (scripting: enabled) {
    .studio-frame.is-shown {
        display: flex;
    }
}

/* Without script the radios of the bar choose the frame: the device's,
   the iPhone's for an app chosen with Desktop, and the place's. Where
   :has() is missing every frame shows. */
@media (scripting: none) {
    .studio-frame {
        display: flex;
    }

    .studio:has(#studio-device-iphone:checked) .studio-frame:not([data-device="iphone"]),
    .studio:has(#studio-device-android:checked) .studio-frame:not([data-device="android"]),
    .studio:has(#studio-device-desktop:checked):has(#studio-place-browser:checked) .studio-frame:not([data-device="desktop"]),
    .studio:has(#studio-device-desktop:checked):not(:has(#studio-place-browser:checked)) .studio-frame:not([data-device="iphone"]),
    .studio:has(#studio-place-browser:checked) .studio-frame:not([data-place="browser"]),
    .studio:has(#studio-place-instagram:checked) .studio-frame:not([data-place="instagram"]),
    .studio:has(#studio-place-threads:checked) .studio-frame:not([data-place="threads"]),
    .studio:has(#studio-place-facebook:checked) .studio-frame:not([data-place="facebook"]),
    .studio:has(#studio-place-tiktok:checked) .studio-frame:not([data-place="tiktok"]),
    .studio:has(#studio-place-whatsapp:checked) .studio-frame:not([data-place="whatsapp"]),
    .studio:has(#studio-place-snapchat:checked) .studio-frame:not([data-place="snapchat"]) {
        display: none;
    }
}

.studio-viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.studio-viewport iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The computer: the page in a viewport of its own width, scaled down to
   the canvas from its top left corner. */
.studio-desk {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--studio-desk-width);
    height: var(--studio-desk-height);
    transform: scale(var(--studio-desk-scale));
    transform-origin: 0 0;
}

/* A phone: the box takes the room of the scaled phone, which is drawn at
   its own size and scaled from its top left corner. */
.studio-device-box {
    --studio-device-width: 414px;
    --studio-device-height: 868px;
    position: relative;
    flex: none;
    width: calc(var(--studio-device-width) * var(--studio-phone-scale));
    height: calc(var(--studio-device-height) * var(--studio-phone-scale));
}

.studio-frame[data-device="android"] .studio-device-box {
    --studio-device-width: 410px;
    --studio-device-height: 864px;
}

.studio-device {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--studio-device-width);
    height: var(--studio-device-height);
    padding: 12px;
    border-radius: 62px;
    background: var(--color-device);
    box-shadow:
        0 0 0 1.5px color-mix(in srgb, var(--color-device-paper) 20%, var(--color-device)),
        0 0 0 4px color-mix(in srgb, var(--color-device-paper) 5%, var(--color-device)),
        var(--shadow-lg);
    transform: scale(var(--studio-phone-scale));
    transform-origin: 0 0;
}

.studio-device.is-android {
    padding: 10px;
    border-radius: 42px;
}

.studio-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50px;
    background: var(--studio-page);
}

.is-android .studio-screen {
    border-radius: 32px;
}

/* The system's status bar: in the page's colour over the page, light in an
   app, Chrome's grey on Android's browser. */
.studio-status {
    position: relative;
    z-index: 3;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 0 30px 0 44px;
    background: var(--studio-page);
    color: var(--color-device-paper);
    font: 600 16px/1 var(--studio-system-font);
}

.studio-screen.in-app .studio-status,
.studio-screen.is-arrived .studio-status {
    background: var(--color-device-paper);
    color: var(--color-device-ink);
}

.is-android .studio-status {
    height: 36px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 500;
}

.is-android .studio-screen:not(.in-app) .studio-status {
    background: var(--studio-chrome);
}

.studio-island {
    position: absolute;
    top: 11px;
    left: 50%;
    width: 124px;
    height: 36px;
    margin-left: -62px;
    border-radius: 20px;
    background: var(--color-device-ink);
}

.is-android .studio-island {
    top: 10px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
}

.studio-status-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* An app's own bar: close, the page's title and its domain, more. */
.studio-app-bar {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    height: 50px;
    padding: 0 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-device-ink) 10%, var(--color-device-paper));
    background: var(--color-device-paper);
    color: var(--color-device-ink);
    font-family: var(--studio-system-font);
}

.studio-app-bar .icon {
    width: 20px;
    height: 20px;
    stroke-width: 2.2;
}

.studio-app-title {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
    text-align: center;
}

.is-android .studio-app-title {
    text-align: left;
}

.studio-app-title b,
.studio-app-title small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-app-title b {
    font-size: 14px;
    font-weight: 600;
}

.studio-app-title small {
    color: var(--color-device-grey);
    font-size: 12px;
}

/* Chrome's address bar on Android. */
.studio-chrome-bar {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 12px;
    background: var(--studio-chrome);
    color: color-mix(in srgb, var(--color-device-paper) 91%, var(--studio-chrome));
    font-family: var(--studio-system-font);
}

.studio-chrome-address {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    overflow: hidden;
    border-radius: 20px;
    background: color-mix(in srgb, var(--color-device) 82%, var(--color-device-paper));
    font-size: 15px;
    white-space: nowrap;
}

.studio-chrome-bar .icon {
    width: 18px;
    height: 18px;
}

.studio-chrome-address .icon {
    width: 16px;
    height: 16px;
}

.studio-chrome-tabs {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
}

/* Safari's bar, floating at the foot of an iPhone's screen. */
.studio-safari-bar {
    position: absolute;
    right: 12px;
    bottom: 30px;
    left: 12px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 50px;
    padding: 0 16px;
    border-radius: 25px;
    background: color-mix(in srgb, var(--color-device) 84%, transparent);
    box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--color-device-paper) 12%, transparent);
    color: var(--color-device-paper);
    font: 500 15px/1 var(--studio-system-font);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.studio-safari-bar .icon {
    width: 20px;
    height: 20px;
}

.studio-safari-address {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-home {
    position: absolute;
    bottom: 8px;
    left: 50%;
    z-index: 5;
    width: 134px;
    height: 5px;
    margin-left: -67px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--color-device-paper) 85%, transparent);
}

.studio-screen.in-app .studio-home,
.studio-screen.is-arrived .studio-home {
    background: color-mix(in srgb, var(--color-device-ink) 80%, transparent);
}

/* "Add a photo", over the room studio.js makes at the top of the page:
   the page's white, faint, on its colour, in the admin's face. Without
   script it sits small at the top. */
.studio-add-photo {
    position: absolute;
    top: 16px;
    right: 16px;
    left: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 150px;
    border: 1.5px dashed color-mix(in srgb, var(--color-device-paper) 28%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--color-device-paper) 4%, transparent);
    color: color-mix(in srgb, var(--color-device-paper) 72%, transparent);
    font: var(--weight-medium) var(--text-sm)/1.3 var(--font-sans);
    cursor: pointer;
}

.studio-add-photo .icon {
    width: 22px;
    height: 22px;
}

@media (hover: hover) {
    .studio-add-photo:hover {
        background: color-mix(in srgb, var(--color-device-paper) 8%, transparent);
        color: var(--color-device-paper);
    }
}

/* With script it shows once studio.js has placed it over the page's room,
   never across the canvas before the frame has loaded. */
@media (scripting: enabled) {
    .studio-add-photo:not([data-placed]) {
        visibility: hidden;
    }
}

@media (scripting: none) {
    .studio-add-photo {
        top: 8px;
        right: auto;
        left: 50%;
        flex-direction: row;
        height: auto;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-full);
        transform: translateX(-50%);
    }
}

/* The line under the device, as a mark over a picture: the same in either
   theme. */
.studio-line {
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: max-content;
    max-width: min(560px, calc(100% - 32px));
    padding: 7px 14px;
    border-radius: 16px;
    background: var(--color-picture-mark);
    color: color-mix(in srgb, var(--color-on-picture-mark) 90%, transparent);
    font-size: var(--text-sm);
    line-height: 1.35;
    text-wrap: pretty;
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* A keyboard's ring over the canvas, whatever its colours: white with a
   dark halo; never after a click. */
.studio-line-action:focus-visible {
    outline: 2px solid var(--color-device-paper);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--color-device-ink);
}

:root[data-input="pointer"] .studio-line-action:focus-visible {
    box-shadow: none;
}

.studio-line-action {
    flex: none;
    margin-right: -7px;
    padding: 4px 10px;
    border: 0;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-on-picture-mark) 14%, transparent);
    color: var(--color-on-picture-mark);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

@media (hover: hover) {
    .studio-line-action:hover {
        background: color-mix(in srgb, var(--color-on-picture-mark) 22%, transparent);
    }
}

/* The bar over a version Versions shows on the canvas. */
.studio-version {
    position: absolute;
    top: 14px;
    left: 50%;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: calc(100% - 20px);
    padding: 6px 6px 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    white-space: nowrap;
    transform: translateX(-50%);
}

.studio-version-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-version-text b {
    font-weight: var(--weight-semibold);
}

.studio-version-text span {
    color: var(--color-text-muted);
}

.studio-version-again {
    display: flex;
}

@media (max-width: 859px) {
    .studio-version {
        top: 10px;
    }

    .studio-version-text span {
        display: none;
    }
}

/* Try: the app's own question on an iPhone, over its whole screen. */
.studio-ask {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-device-ink) 30%, transparent);
}

.studio-ask-box {
    width: 270px;
    overflow: hidden;
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-device-alert) 96%, transparent);
    color: var(--color-device-ink);
    font-family: var(--studio-system-font);
    text-align: center;
}

.studio-ask-title {
    padding: 20px 16px 18px;
    font-size: 17px;
    font-weight: 600;
}

.studio-ask-actions {
    display: flex;
    border-top: 1px solid color-mix(in srgb, var(--color-device-ink) 16%, transparent);
}

.studio-ask-actions button {
    flex: 1;
    height: 44px;
    border: 0;
    background: none;
    color: var(--color-device-link);
    font: inherit;
    font-size: 17px;
    cursor: pointer;
}

.studio-ask-actions button + button {
    border-left: 1px solid color-mix(in srgb, var(--color-device-ink) 16%, transparent);
}

.studio-ask-actions .is-default {
    font-weight: 600;
}

/* Inside the question's box, which cuts what lies outside it. */
.studio-ask-actions button:focus-visible {
    outline: 2px solid var(--color-device-ink);
    outline-offset: -4px;
}

/* Try: where the fan arrives, in place of the page, under the bars. */
.studio-arrival {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    background: var(--color-device-paper);
    color: var(--color-device-ink);
    font-family: var(--studio-system-font);
    text-align: center;
}

.studio-arrival .inv-mark {
    width: 68px;
    height: 68px;
    border: 0;
    border-radius: 50%;
}

.studio-arrival .inv-mark .glyph,
.studio-arrival .inv-mark .icon {
    width: 32px;
    height: 32px;
}

.studio-arrival-title {
    font-size: 20px;
    font-weight: 700;
}

.studio-arrival-note {
    max-width: 280px;
    color: var(--color-device-grey);
    font-size: 14px;
    line-height: 1.45;
}

/* ------------------------------------------------------------------------
   The bar beside the page
   ------------------------------------------------------------------------ */

.studio-dock {
    position: absolute;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 24px);
    padding: 5px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-lg);
    white-space: nowrap;
    transform: translateX(-50%);
}

.studio-dock-rule {
    flex: none;
    width: 1px;
    height: 22px;
    background: var(--color-border);
}

.studio-edit {
    min-height: 38px;
    padding: 0 var(--space-4) 0 14px;
    border-radius: var(--radius-full);
    gap: 6px;
}

.studio-edit .icon {
    width: 16px;
    height: 16px;
}

.studio-dock-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px 0 12px;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

.studio-dock-button .icon {
    width: 16px;
    height: 16px;
}

@media (hover: hover) {
    .studio-dock-button:hover {
        background: var(--color-surface-muted);
        color: var(--color-text);
    }
}

.studio-try[aria-pressed="true"],
.studio-try[aria-pressed="true"]:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* The device: one icon, its menu beside it. */
.studio-dock-device {
    display: flex;
    align-items: center;
}

.studio-dock-device .studio-dock-button {
    width: 44px;
    padding: 0;
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.studio-device-menu {
    width: 200px;
}

.studio-device-menu .menu-item .icon {
    width: 16px;
    height: 16px;
}

.studio-device-menu .menu-item[aria-checked="false"] .menu-check {
    visibility: hidden;
}

.studio-device-menu .menu-item[aria-checked="true"] .menu-item-text {
    font-weight: var(--weight-semibold);
}

/* The places, and without script the devices: one segmented control each,
   round, their names on hover. */
.studio-dock .segmented {
    flex-wrap: nowrap;
    padding: 3px;
    border: 0;
    border-radius: var(--radius-full);
}

.studio-dock .segment {
    justify-content: center;
    min-height: 32px;
    padding: 0 11px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
}

.studio-dock .segment .icon,
.studio-dock .segment .glyph {
    width: 16px;
    height: 16px;
}

.studio-dock .glyph {
    fill: currentColor;
}

@media (scripting: enabled) {
    .studio-devices {
        display: none;
    }

    .studio-dock .segment .studio-dock-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

@media (max-width: 859px) {
    @media (scripting: enabled) {
        .studio-dock-device,
        .studio-dock-device + .studio-dock-rule {
            display: none;
        }
    }

    .studio.is-sheet-open .studio-dock {
        display: none;
    }
}

/* From 860 pixels upright at the canvas's left edge, centred, its parts
   as icons, their names beside the bar on hover. */
@media (min-width: 860px) {
    .studio-dock {
        top: 50%;
        bottom: auto;
        left: 16px;
        flex-direction: column;
        max-width: none;
        border-radius: 28px;
        transform: translateY(-50%);
    }

    .studio-dock-rule {
        width: 22px;
        height: 1px;
    }

    .studio-dock .segmented {
        flex-direction: column;
    }

    .studio-dock .segment {
        width: 38px;
        min-height: 38px;
        padding: 0;
    }

    .studio-dock-device {
        flex-direction: column;
    }

    .studio-dock-device .studio-dock-button,
    .studio-try {
        width: 44px;
        height: 44px;
        padding: 0;
    }

    .studio-edit {
        display: none;
    }

    @media (scripting: enabled) {
        .studio-try .studio-dock-name {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
        }
    }

    @media (scripting: none) {
        .studio-dock .segment {
            width: auto;
            padding: 0 11px;
        }
    }
}

/* ------------------------------------------------------------------------
   The panel's place
   ------------------------------------------------------------------------ */

/* A phone: a sheet of about two thirds of the screen from the bottom, the
   page above it. */
.studio-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    height: 66vh;
    height: 66dvh;
    max-height: calc(100% - 64px);
    /* Clipped, not hidden: a field focused in the panel's scroller would
       otherwise scroll this box too, and push the tabs under the top bar. */
    overflow: hidden;
    overflow: clip;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: 20px 20px 0 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-sheet);
    visibility: hidden;
    transform: translateY(105%);
    transition: transform var(--duration-normal) var(--ease-sheet), visibility 0s linear var(--duration-normal);
}

.studio-panel[data-open] {
    visibility: visible;
    transform: none;
    transition: transform var(--duration-normal) var(--ease-sheet);
}

/* While a version shows on the canvas the panel rests (inert, studio.js):
   its scroll area faded, its tabs as they are. */
.studio-panel[data-resting] .pane-scroll {
    opacity: 0.5;
}

.studio-sheet-head {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    height: 36px;
    padding: 4px var(--space-2) 0;
    background: var(--color-surface);
    touch-action: none;
}

.studio-grabber {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 5px;
    margin-left: -20px;
    border-radius: 3px;
    background: var(--color-border-strong);
}

.studio-fold {
    display: none;
}

/* Without script on a phone the panel follows the canvas, and the page
   scrolls. */
@media (scripting: none) and (max-width: 859px) {
    .studio-body {
        height: auto;
        overflow: visible;
    }

    .studio-work {
        flex-direction: column;
    }

    .studio-stage {
        flex: none;
        height: 88vh;
    }

    .studio-panel {
        position: static;
        height: auto;
        max-height: none;
        overflow: visible;
        border-top: 1px solid var(--color-border);
        border-radius: 0;
        box-shadow: none;
        visibility: visible;
        transform: none;
    }

    .studio-sheet-head {
        display: none;
    }
}

/* The page on a phone's own screen, without a frame: an app's bar over it
   in an app, the phone's own bars elsewhere. */
@media (scripting: enabled) and (max-width: 859px) {
    .studio-frame {
        padding: 0;
    }

    .studio-desk {
        width: 100%;
        height: 100%;
        transform: none;
    }

    .studio-device-box,
    .studio-device {
        width: 100%;
        height: 100%;
    }

    .studio-device,
    .studio-device.is-android {
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        transform: none;
    }

    .studio-screen,
    .is-android .studio-screen {
        border-radius: 0;
    }

    .studio-status,
    .studio-chrome-bar,
    .studio-safari-bar,
    .studio-home {
        display: none;
    }

    .studio-line {
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }
}

/* From 860 pixels the panel stands at the right of the canvas, and folds
   away as the sidebar does: one button at the same place over its top
   corner, grey beside the tabs, on a white square while folded. */
@media (min-width: 860px) {
    .studio-work {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .studio-panel {
        --studio-fold-room: 52px;
        position: relative;
        z-index: 15;
        height: auto;
        max-height: none;
        min-height: 0;
        padding-bottom: 0;
        border-left: 1px solid var(--color-border);
        border-radius: 0;
        box-shadow: none;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .studio-sheet-head {
        display: none;
    }

    .studio-fold {
        position: absolute;
        top: 12px;
        right: 10px;
        z-index: 25;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--color-text-subtle);
        cursor: pointer;
    }

    .studio-fold .icon {
        width: 18px;
        height: 18px;
    }

    @media (hover: hover) {
        .studio-fold:hover {
            background: var(--color-surface-muted);
            color: var(--color-text);
        }
    }

    /* Folded, the panel takes no room and shows its button alone, at the
       same place over the canvas; only the script folds it, so without it
       the panel stays, whatever the cookie says. */
    @media (scripting: enabled) {
        .studio.is-folded .studio-work {
            grid-template-columns: minmax(0, 1fr);
        }

        /* Anchored at the right alone: the sheet's left and bottom of a
           phone would otherwise hold the empty box, and its button, at the
           canvas's left edge, out of sight. */
        .studio.is-folded .studio-panel {
            position: absolute;
            top: 0;
            right: 0;
            bottom: auto;
            left: auto;
            width: 0;
            height: 0;
            overflow: visible;
            border: 0;
        }

        .studio.is-folded .studio-panel > :not(.studio-fold) {
            display: none;
        }

        .studio.is-folded .studio-fold {
            background: var(--color-surface);
            box-shadow: var(--shadow-lg);
            color: var(--color-text);
        }

        .studio.is-folded .studio-fold:focus-visible {
            outline: 2px solid var(--color-device-paper);
            outline-offset: 2px;
            box-shadow: 0 0 0 6px var(--color-device-ink);
        }

        :root[data-input="pointer"] .studio.is-folded .studio-fold:focus-visible {
            box-shadow: var(--shadow-lg);
        }

        @media (hover: hover) {
            .studio.is-folded .studio-fold:hover {
                background: var(--color-surface-muted);
            }
        }
    }
}

@media (min-width: 1060px) {
    .studio-work {
        grid-template-columns: minmax(0, 1fr) 384px;
    }
}

/* ------------------------------------------------------------------------
   The toast
   ------------------------------------------------------------------------ */

/* A short message at the top of the canvas: a flash message, a removal
   with its Undo, the footer's word on the legal texts. */
.studio-toast {
    position: fixed;
    top: 64px;
    left: 50%;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: max-content;
    max-width: calc(100% - 32px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0s linear 0.18s;
}

/* Hidden once it has faded, so nothing in it is reached while it is gone. */
.studio-toast.is-shown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

.studio-toast-text {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--color-primary);
    box-shadow: var(--shadow-lg);
    color: var(--color-on-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.studio-toast-text .icon {
    width: 16px;
    height: 16px;
}

.studio-toast-close {
    display: grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    margin: -4px -6px -4px 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    cursor: pointer;
}

.studio-toast-close .icon {
    width: 16px;
    height: 16px;
}

.studio-toast-action:focus-visible,
.studio-toast-close:focus-visible {
    outline: 2px solid var(--color-on-primary);
    outline-offset: 2px;
}

.studio-toast-action {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

@media (min-width: 860px) {
    .studio-toast {
        top: 68px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .studio-panel,
    .studio-panel[data-open],
    .studio-saved,
    .studio-toast {
        transition: none;
    }
}