/* The link page studio's panel (D117, point 5): its three tabs over the
   draft's form, the rows of the buttons and the socials and the view each
   opens, the pictures, swatches and looks, the versions, and the window
   Adjust photo (D117, point 8). The studio's shell, its top bar, canvas and
   panel's place, is studio.css; this file draws what partials/studio/panel
   and partials/studio/adjust-photo hold. The agreed mock is
   docs/mockups/link-page-editor.html; the admin's tokens and components
   stand for its own. Loaded after the other stylesheets.

   The classes:

     .pane               the panel's inside: .pane-tabs over .pane-scroll;
                         .is-ready once studio-panel.js runs, which shows
                         [data-studio-script-only] and hides
                         [data-studio-no-script]
     .pane-tabs, .pane-tab
                         the three tabs as one segmented track, room for the
                         fold button at its right on a computer
     .pane-part          a tab's section; .pane-section a part of it under
                         .pane-title, a line between two
     .pane-field         a field of the panel, light and 40 pixels (44 and
                         16 pixel text on a phone, so it does not zoom)
     .pane-photo and its parts
                         the profile's photo: a picture of 76 by 69, its
                         buttons, its line and its error
     .pane-rows, .pane-row and its parts
                         a list's rows: the handle (.pane-grip), the link to
                         its view (.pane-row-link), a button's square in its
                         colours (.pane-chip), "Main" (.pane-tag); Move up
                         and Move down without script (.pane-row-moves)
     .pane-add, .pane-ghost
                         Add button and Add social; the ghost of a page
                         without buttons (D77)
     .pane-view and .pane-view-head
                         a button's or a social's view, its back arrow and
                         title
     .pane-picks, .pane-pick
                         a choice of pictures, the button's icon or the
                         social's platform, its radios inside
     .pane-swatches, .pane-swatch, .pane-swatch-any
                         colours to choose, and any colour, its field laid
                         over a ring of every hue
     .pane-emoji         the emoji picker, a popover under its button
     .pane-leads, .pane-resolve
                         a social's Leads to, and Automatic's links
     .pane-looks, .pane-look
                         the looks, small drawings of the page
     .pane-versions, .pane-version
                         the versions, each with Show
     .pane-hint, .pane-sub, .pane-warn, .pane-empty
                         a line under a part, under a title, a warning, and
                         what has nothing yet
     .studio-adjust and .studio-crop
                         the window Adjust photo, its photo under the frame

   Colour only where it means something (D117, point 9): the swatches, the
   looks and a button's square are the page's colours to choose, drawn in
   their drawings' own attributes; everything else is the admin's ink and
   greys. */

/* ------------------------------------------------------------------------
   The panel's inside
   ------------------------------------------------------------------------ */

/* The panel's inside fills the shell's panel below its sheet head, and its
   scroll (.pane-scroll) is the panel's one scroller, on a computer and in
   the phone's sheet alike: the tabs stay at its top. */
.pane {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* While a change of a list, Undo or a photo is sent and the panel loaded
   again, it takes no pointer (studio-panel.js). */
.pane[aria-busy="true"] .pane-scroll {
    pointer-events: none;
}

/* Without script every part stands; with it, studio-panel.js marks the
   panel ready and the parts that need it show. */
.pane:not(.is-ready) [data-studio-script-only],
.pane.is-ready [data-studio-no-script] {
    display: none !important;
}

/* The three tabs, a segmented track across the panel, the fold button's
   room at its right (studio.css places the button). */
.pane-tabs {
    display: flex;
    flex: none;
    gap: 2px;
    margin: var(--space-3) 52px var(--space-2) var(--space-4);
    padding: 3px;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.pane-tab {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 32px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-in-out),
                color var(--duration-fast) var(--ease-in-out);
}

.pane-tab[aria-current="true"] {
    background: var(--color-surface-raised);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

@media (hover: hover) {
    .pane-tab:not([aria-current="true"]):hover {
        color: var(--color-text);
    }
}

.pane-scroll {
    flex: 1;
    min-height: 0;
    padding: 6px var(--space-5) var(--space-10);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.pane-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.pane-section {
    padding-top: 18px;
}

.pane-section + .pane-section {
    margin-top: 18px;
    border-top: 1px solid var(--color-border);
}

.pane-title {
    margin: 0 0 10px;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

.pane-title label {
    cursor: default;
}

.pane-sub {
    margin: -4px 0 var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.pane-hint {
    margin: var(--space-2) 0 0;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    line-height: 1.45;
}

/* A warning in words, its triangle in the grey of the text: nothing here
   holds less than it seems (amber is that), the sentence says it all. */
.pane-warn {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 10px 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.pane-warn .icon {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 1px;
}

.pane-empty {
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* The Save button of a part, without script alone. */
.pane-save {
    margin-top: 14px;
}

/* ------------------------------------------------------------------------
   Fields
   ------------------------------------------------------------------------ */

/* In the calm of a window (D108): a field's name in ink at the size of the
   text over it, light fields of 40 pixels without a shadow, a step darker
   under the pointer. :where() keeps the weight of the fields' own rules, so
   the focus, an error, read only and disabled stay every field's. */
.pane-field {
    margin-top: 14px;
}

:where(.pane) .field-label {
    font-size: var(--text-sm);
}

:where(.pane) .field-help {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

:where(.pane) .input {
    min-height: var(--control-height-md);
    border-color: var(--color-border-strong);
    background-color: var(--color-input);
    font-size: var(--text-base);
    box-shadow: none;
}

@media (hover: hover) {
    :where(.pane) .input:hover:not(:focus-visible, :disabled, [readonly], [aria-invalid="true"]) {
        border-color: var(--color-control-border);
    }
}

/* An error app.js writes under a field after a refused save, in the
   field's column. */
.pane .set-row-error {
    flex: none;
}

.pane-label-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

/* The characters left of the bio, from 120 on. */
.pane-count {
    margin-left: auto;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.pane-switch {
    margin-top: 14px;
}

/* "Try the check on the page" while the 18+ check is on. */
.pane-try {
    margin: var(--space-1) 0 0 calc(-1 * var(--space-2));
}

.pane-age:not(:has(.switch:checked)) .pane-try {
    display: none;
}

/* Main button cannot be turned off on the main one, as its radio cannot. */
.pane-main:checked {
    cursor: default;
}

.pane-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-danger-text);
}

.pane-danger .icon {
    width: 16px;
    height: 16px;
}

@media (hover: hover) {
    .pane-danger:hover {
        color: var(--color-danger-text);
    }
}

.pane-remove {
    margin-top: 22px;
    margin-left: calc(-1 * var(--space-2));
}

/* ------------------------------------------------------------------------
   The profile's photo
   ------------------------------------------------------------------------ */

.pane-photo {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: var(--radius-md);
}

.pane-photo:focus {
    outline: none;
}

.pane-photo-picture {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 76px;
    height: 69px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: var(--color-text-subtle);
    cursor: pointer;
}

.pane-photo-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pane-photo-picture .icon {
    width: 22px;
    height: 22px;
}

.pane-photo-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    min-width: 0;
}

.pane-photo-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* The file field stays out of sight and takes the keyboard's focus, which
   its label, the button, shows; the browser's own control never shows. */
.pane-photo-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.pane-photo-actions:has(.pane-photo-input:focus-visible) .pane-photo-pick {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.pane-photo-links {
    display: flex;
    gap: 2px;
    margin-left: calc(-1 * var(--space-2));
}

/* ------------------------------------------------------------------------
   The lists' rows
   ------------------------------------------------------------------------ */

.pane-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pane-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 60px;
    padding: 0 var(--space-2) 0 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.pane:not(.is-ready) .pane-row {
    padding-left: var(--space-2);
}

.pane-row.is-dragging {
    z-index: 2;
    border-color: var(--color-control-border);
    box-shadow: var(--shadow-lg);
}

@media (hover: hover) {
    .pane-row:hover {
        border-color: var(--color-border-strong);
        background: var(--color-surface-hover);
    }

    .pane-row:hover .pane-grip {
        opacity: 1;
    }
}

/* The handle drags its row, and from the keyboard moves it with the arrow
   keys. */
.pane-grip {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--color-text-subtle);
    opacity: 0.65;
    cursor: grab;
    touch-action: none;
}

.pane-grip .icon {
    width: 14px;
    height: 14px;
}

.pane-row.is-dragging .pane-grip {
    cursor: grabbing;
}

.pane-grip:disabled {
    cursor: default;
}

.pane-row-link {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: var(--space-2) 0 var(--space-2) var(--space-1);
    color: inherit;
    text-decoration: none;
}

.pane-row-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pane-row-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
}

.pane-row-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pane-row-text.is-empty {
    color: var(--color-text-subtle);
    font-weight: var(--weight-normal);
}

.pane-row-sub {
    overflow: hidden;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pane-tag {
    flex: none;
    padding: 1px 7px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: var(--weight-medium);
}

.pane-row-arrow {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--color-text-subtle);
}

.pane-row-moves {
    display: flex;
    flex: none;
}

/* A button's square in its own colours, as the page draws the button: the
   drawing's attributes carry the colours, the ring keeps a white or black
   button apart from the panel. */
.pane-chip {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
}

.pane-chip::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--color-cover-ring);
}

.pane-chip-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pane-chip-face text {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: var(--weight-semibold);
}

.pane-chip-glyph {
    position: relative;
    width: 16px;
    height: 16px;
}

.pane-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--control-height);
    margin-top: 6px;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

.pane-add .icon {
    width: 16px;
    height: 16px;
}

@media (hover: hover) {
    .pane-add:hover:not(:disabled) {
        border-color: var(--color-control-border);
        color: var(--color-text);
    }
}

.pane-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* The ghost of a page without buttons: the shape of a row in the ghost's
   greys, and what is missing (D77). */
.pane-ghost {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-ghost);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.pane-ghost-chip {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-ghost-strong);
}

/* ------------------------------------------------------------------------
   A button's and a social's view
   ------------------------------------------------------------------------ */

/* Without script the views stand under the lists, a line above each. */
.pane-view {
    margin-top: 18px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
}

.pane.is-ready .pane-view {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pane-view-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-3) calc(-1 * var(--space-2)) 0 -10px;
}

.pane-view-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: var(--weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The text with its emoji button at its end. */
.pane-text-emoji {
    position: relative;
}

.pane.is-ready .pane-text-emoji .input {
    padding-right: 46px;
}

.pane-emoji-button {
    position: absolute;
    top: 50%;
    right: var(--space-1);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-subtle);
    font-size: 17px;
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
}

.pane-emoji-button .icon {
    width: 18px;
    height: 18px;
}

/* The emoji chosen in place of the face that offers one. */
.pane-emoji-button:has(> [data-studio-emoji-shown]:not([hidden])) > .icon {
    display: none;
}

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

/* The picker, a popover placed under its button (studio-panel.js). */
.pane-emoji {
    position: fixed;
    inset: auto;
    width: 248px;
    margin: 0;
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
}

.pane-emoji:popover-open {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
}

.pane-emoji-pick {
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: 19px;
    cursor: pointer;
}

.pane-emoji-none {
    grid-column: 1 / -1;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

@media (hover: hover) {
    .pane-emoji-pick:hover {
        background: var(--color-surface-muted);
    }
}

/* A choice of pictures: seven in a row, the chosen one framed in ink. */
.pane-picks {
    min-width: 0;
    padding: 0;
    border: 0;
}

.pane-picks > legend {
    margin-bottom: 6px;
    padding: 0;
}

.pane-pick-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.pane-pick {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.pane-pick-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.pane-pick .glyph {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.pane-pick .glyph.line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pane-pick .icon {
    width: 18px;
    height: 18px;
    color: var(--color-text-subtle);
}

@media (hover: hover) {
    .pane-pick:hover:not(:has(:checked)) {
        border-color: var(--color-border-strong);
        background: var(--color-surface-hover);
    }
}

.pane-pick:has(.pane-pick-input:checked) {
    border-color: var(--color-text);
    background: var(--color-surface-muted);
    box-shadow: inset 0 0 0 1px var(--color-text);
}

.pane-pick:has(.pane-pick-input:focus-visible) {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.pane-pick:has(.pane-pick-input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Colours to choose: a round swatch each, ringed in ink when chosen, and
   any colour last, its colour field laid unseen over a ring of every hue
   (studio/panel-any-colour draws it), its dot the colour while it is none
   of the swatches (without script, always). */
.pane-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.pane-swatch {
    position: relative;
    display: block;
    flex: none;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    cursor: pointer;
}

.pane-swatch svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.pane-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
    pointer-events: none;
}

.pane-swatch[aria-pressed="true"],
.pane-swatch-any.is-chosen {
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-text);
}

.pane.is-ready .pane-swatch-any:not(.is-chosen) .pane-swatch-dot {
    fill: var(--color-surface);
}

.pane-colour {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.pane-swatch:focus-visible,
.pane-swatch-any:has(.pane-colour:focus-visible) {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

.pane-swatch:disabled,
.pane-swatch-any:has(.pane-colour:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.pane-sublabel {
    margin-top: 6px;
    color: var(--color-text-muted);
}

/* ------------------------------------------------------------------------
   A social's Leads to
   ------------------------------------------------------------------------ */

/* Automatic | Own address across the panel, as a window's segmented choice
   (D108, point 6), and under it what the choice holds, by :has(). */
.pane-segmented {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
    border: 0;
    border-radius: var(--radius-md);
}

.pane-segmented .segment {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    min-height: 32px;
    padding: 0 var(--space-2);
    border-radius: calc(var(--radius-md) - 3px);
    font-size: var(--text-sm);
}

.pane-leads {
    min-width: 0;
    padding: 0;
    border: 0;
}

.pane-leads > legend {
    margin-bottom: 6px;
    padding: 0;
}

.pane-leads-automatic,
.pane-leads-address {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--space-2);
}

.pane-leads:has(.segmented-input[value="account"]:checked) .pane-leads-address,
.pane-leads:has(.segmented-input[value="address"]:checked) .pane-leads-automatic {
    display: none;
}

/* Automatic, said link by link: the account each link leads to, or that
   it does not show there. */
.pane-resolve {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 2px 0;
    padding: 0;
    list-style: none;
}

.pane-resolve li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    font-size: var(--text-sm);
}

.pane-resolve .inv-mark {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.pane-resolve .inv-mark .glyph,
.pane-resolve .inv-mark .icon {
    width: 12px;
    height: 12px;
}

.pane-resolve-address {
    overflow: hidden;
    color: var(--color-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pane-resolve li > .icon {
    flex: none;
    width: 12px;
    height: 12px;
    color: var(--color-text-subtle);
}

.pane-resolve-handle {
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.pane-resolve li.is-off {
    color: var(--color-text-subtle);
}

.pane-resolve li.is-off .inv-mark {
    opacity: 0.5;
}

.pane-resolve li.is-off .pane-resolve-handle,
.pane-resolve li:not(.is-off) .pane-resolve-off {
    display: none;
}

/* ------------------------------------------------------------------------
   Design: the looks
   ------------------------------------------------------------------------ */

.pane-looks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.pane-look {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

.pane-look-art {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 1px var(--color-border);
}

.pane-look[aria-pressed="true"] {
    color: var(--color-text);
}

.pane-look[aria-pressed="true"] .pane-look-art {
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-text);
}

@media (hover: hover) {
    .pane-look:not([aria-pressed="true"]):hover .pane-look-art {
        box-shadow: 0 0 0 1px var(--color-border-strong);
    }
}

.pane-look:focus-visible {
    outline: none;
}

.pane-look:focus-visible .pane-look-art {
    outline: 2px solid var(--color-focus);
    outline-offset: 4px;
}

/* ------------------------------------------------------------------------
   Settings: the escape modes and the versions
   ------------------------------------------------------------------------ */

.pane-escape .choice-list-cards .check {
    padding: var(--space-3) 14px;
    border-color: var(--color-border);
    border-radius: var(--radius-md);
}

/* "Recommended" beside Leave the app first, a quiet word as the mock has
   it rather than a status. */
.pane-escape .badge {
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-subtle);
    font-size: 11px;
    font-weight: var(--weight-medium);
}

.pane-escape .badge::before {
    display: none;
}

.pane-versions {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pane-version {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

.pane-version:first-child {
    padding-top: var(--space-1);
    border-top: 0;
}

.pane-version-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pane-version-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
}

.pane-version-period {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.pane-version-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-1);
}

.pane-version-actions .btn .icon {
    width: 16px;
    height: 16px;
}

/* ------------------------------------------------------------------------
   The phone: the panel is a sheet (studio.css), the tabs need no room for
   the fold, and a field's text is 16 pixels, so the phone does not zoom.
   ------------------------------------------------------------------------ */

@media (max-width: 859px) {
    .pane-tabs {
        margin: var(--space-1) var(--space-4) var(--space-2);
    }

    :where(.pane) .input {
        min-height: var(--control-height);
        font-size: var(--text-md);
    }
}

/* ------------------------------------------------------------------------
   The window Adjust photo (studio/adjust-photo): the photo under a fixed
   frame of the page's 21:19, across the window's width, the rest of it
   dimmed and the page's fade at the frame's foot, as the hero draws it
   (transparent at 55 % to the page's colour, which studio-panel.js sets as
   --studio-page-colour). Behind the photo the dark of the device the studio
   draws, the same in either theme, and the dim around the frame of it.
   studio-panel.js sizes the stage and places the photo and the frame.
   ------------------------------------------------------------------------ */

.studio-adjust {
    --studio-page-colour: var(--color-device);
    width: min(480px, calc(100vw - 48px));
}

.studio-crop {
    position: relative;
    margin: var(--space-1) calc(-1 * var(--space-6)) 0;
    overflow: hidden;
    background: var(--color-device);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.studio-crop.is-dragging {
    cursor: grabbing;
}

.studio-crop:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

.studio-crop-image {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    pointer-events: none;
    -webkit-user-drag: none;
}

.studio-crop-frame {
    position: absolute;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-device-paper) 70%, transparent),
                0 0 0 9999px color-mix(in srgb, var(--color-device) 62%, transparent);
    pointer-events: none;
}

.studio-crop-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, var(--studio-page-colour));
}

.studio-crop-zoom {
    display: flex;
    align-items: center;
    gap: 10px;
}

.studio-crop-range {
    flex: 1;
    min-width: 0;
    accent-color: var(--color-primary);
}

@media (max-width: 639px) {
    .studio-crop {
        margin-inline: calc(-1 * var(--space-5));
    }
}