/* ==========================================================================
   Photo tools for everyone (/photo-tools): what the public version adds
   to pt.css - the site menu, crowns on premium options, the "Premium features used"
   block over the photo, the account, the text about the tool below it.
   ========================================================================== */

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

.pt .pl-menu-btn {
    padding: 0;
    border: none;
    cursor: pointer;
}

/* an admin viewing the page as someone else */
.pl-as {
    flex: none;
    height: 26px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    border: 1px dashed var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}


/* ------------------------------ site menu -------------------------------- */

/* the drawer lives in its own .ig box (the tools site's styles), which mustn't take room on the page */
.ig.pl-menu {
    min-height: 0;
    display: block;
    background: none;
}

.pl-account {
    padding: 4px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ig .pl-signin {
    min-height: 48px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    text-decoration: none;
}

.ig .pl-signin:hover {
    box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--on-accent) 10%, transparent);
}

.ig .pl-account-note {
    margin: 8px 4px 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.ig .pl-account-note a {
    color: var(--ink);
    font-weight: 600;
}

.ig .pl-account-note.is-warn {
    margin: 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: color-mix(in srgb, #e8a33d 18%, var(--card));
    color: var(--ink);
}

.pl-account-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pl-account-icon {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--on-accent-soft);
}

.pl-account-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pl-account-text b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-account-text small {
    color: var(--muted);
    font-size: 13px;
}

/* admin: view the pages as... */
.pl-view-as {
    padding: 0 12px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ig .pl-view-as a {
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.ig .pl-view-as a.is-on {
    border-color: transparent;
    background: var(--accent-soft);
    color: var(--on-accent-soft);
}


/* ------------------------------- premium -------------------------------- */

/* the premium mark: one small pill with the crown, the same everywhere (divider tiles, sub-tabs, the Font label,
   the font menu, the slide count) - soft accent, and the card color on a picked (accent-soft) option */
.pl-crown {
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--on-accent-soft);
}

.pl-crown svg,
.pt-a .pt-tile .pl-crown svg {
    width: 12px;
    height: 12px;
}

.pt-tabs button .pl-crown,
.pt-seg button .pl-crown,
.pt-label .pl-crown {
    margin-left: 6px;
}

/* on a picture tile: in its corner */
.pt-tile {
    position: relative;
}

.pt-tile .pl-crown {
    position: absolute;
    top: 6px;
    right: 6px;
}

.pt-seg button.is-on .pl-crown,
.pt-tile.is-on .pl-crown,
.pt-tabs button.is-on .pl-crown,
.pl-fmenu-item.is-on .pl-crown {
    background: var(--card);
    color: var(--on-accent-soft);
}

/* Over the photo (placed by the tool's placeLock, which also draws the watermark exactly under it): solid, so the
   watermark never shows twice */
.pl-lock {
    position: absolute;
    z-index: 1;
    width: max-content;
    padding: 16px 16px 12px; /* the links' own 4px make the bottom 16px too */
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .26);
    color: var(--ink);
    text-align: center;
}

.pt .pl-lock p {
    margin: 0;
}

.pl-lock-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.pl-lock-title svg,
.pl-upsell .pt-modal-title svg {
    color: var(--accent);
}

.pt .pl-lock-text {
    color: var(--soft-ink);
    font-size: 12.5px;
    line-height: 1.4;
    text-wrap: balance;
}

.pl-lock a,
.pl-upsell a {
    color: var(--ink);
    font-weight: 600;
    text-underline-offset: 2px;
}

/* Open Patreon across the block, the two quiet links under it on one line */
.pt .pl-lock-btn {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    padding: 0 16px;
    font-size: 14px;
}

.pl-lock .pt-btn-primary {
    color: var(--on-accent);
    text-decoration: none;
}

/* (.pl-lock p sets margin 0, so the extra 7.5px: the links' text as far below the button as the text above it) */
.pt .pl-lock .pl-lock-links {
    margin-top: 7.5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 8px;
    color: var(--muted);
    font-size: 12px;
}

.pl-lock .pl-lock-link {
    padding: 4px 0;
    border: none;
    background: none;
    color: var(--soft-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* the export window with premium features */
.pl-upsell .pt-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pt .pl-upsell-text {
    margin: 8px 0 0;
    color: var(--soft-ink);
    font-size: 14px;
    line-height: 1.5;
}

.pl-upsell-toggle {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--soft);
}

.pl-upsell-toggle .pt-label {
    margin: 0;
}

/* two equal columns (minmax: the longer label mustn't widen its button); the buttons are the standard 48px ones */
.pl-upsell-btns {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.pl-upsell-btns > * {
    min-width: 0;
}

.pl-upsell .pl-upsell-btns .pt-btn-primary {
    color: var(--on-accent);
    text-decoration: none;
}

.pt .pl-upsell-signin {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

@media (max-width: 380px) {
    .pl-upsell-btns {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* --------------------------- about the tool ----------------------------- */

/* below the tool, for Google and first-time visitors: gone once a photo is in (the tool fills the screen) */
.ig.pl-seo-wrap {
    min-height: 0;
    border-top: 1px solid var(--line);
}

/* while working: the text goes; on desktop the footer stays below the tool (scroll down to it - the tool with the
   header fills the screen), on phones it goes too, so scrolling never fights the editor */
body.pl-working .pl-seo {
    display: none;
}

/* no photo in yet: the wheel over the settings panel scrolls the page down to the text (contain is for the editor) */
body:not(.pl-working) .pt-sheet-body {
    overscroll-behavior: auto;
}

@media (max-width: 899px) {
    body.pl-working .pl-seo-wrap {
        display: none;
    }
}

.pl-seo {
    padding-bottom: 56px;
}


/* ------------------------------- desktop -------------------------------- */

/* the site header (_header) only on desktop; phones have the menu button in the tool's top bar */
.pl-crumbs {
    display: none;
}

.ig.pl-head {
    display: none;
    min-height: 0;
    background: none;
}

.pl-head .ig-menu-sec {
    margin-bottom: 0;
    padding-bottom: 4px;
    border-bottom: none;
}

.pl-head-guest {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* up to the page width (1240px) the full row doesn't fit with the account: the two long tool names get their short
   ones (up to 1060px the header's menu button opens the drawer instead) */
.pl-head .ig-nav-short {
    display: none;
}

@media (max-width: 1240px) {
    .pl-head .ig-links .ig-nav-long {
        display: none;
    }

    .pl-head .ig-links .ig-nav-short {
        display: inline;
    }
}

/* visitors: below 1060px (where the sites switch to the menu button) the row with the short names and "Sign in" still
   fits, down to 1000px - so the names get shorter first, and the menu button only comes after (measured 2026-10-20) */
@media (min-width: 1000px) and (max-width: 1060px) {
    .pl-head .ig-nav:not(.is-signed-in) .ig-links,
    .pl-head .ig-nav:not(.is-signed-in) .ig-nav-right {
        display: flex;
    }

    .pl-head .ig-nav:not(.is-signed-in) .ig-menu-btn {
        display: none;
    }
}

/* the narrowest header row (just above the 1060px menu): "Sign in with Patreon" becomes "Sign in" */
@media (max-width: 1120px) {
    .pl-head .ig-nav-right .ig-nav-long {
        display: none;
    }

    .pl-head .ig-nav-right .ig-nav-short {
        display: inline;
    }
}

/* the links and buttons stay on one line */
.pl-head .ig-links a,
.pl-head .ig-pill-btn,
.pl-head .ig-user {
    white-space: nowrap;
}

.ig .pl-head .ig-pill-btn.is-accent {
    border-color: transparent;
    background: var(--accent);
    color: var(--on-accent);
}

@media (min-width: 900px) {
    .ig.pl-head {
        display: block;
    }

    /* the tool fills what's left under the header (72px + its border) */
    .pl .pt-app {
        height: calc(100vh - 73px);
        height: calc(100dvh - 73px);
    }

    .pt .pl-menu-btn {
        display: none;
    }

    .pl .pt-bar-title {
        display: none;
    }

    /* the tool switcher: always in the middle of the screen, whatever the breadcrumbs' width */
    .pl .pt-bar-tools {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .pl .pt-bar .pt-btn-primary,
    .pl .pt-bar .pl-as {
        margin-left: auto;
    }

    .pl .pt-bar .pl-as + .pt-btn-primary {
        margin-left: 0;
    }

    /* the breadcrumbs in the title's place, like the tool pages' heroes; they start where the header's logo does (its
       centered 1240px row with 20px sides). % = of the bar's inside (8px left, 16px right padding), so a scrollbar
       doesn't count: (bar - 24 - 1240) / 2 + 24 = (page - 1240) / 2 + 20 - 8 */
    .pl-crumbs {
        flex: none;
        margin-left: max(12px, calc((100% - 1240px) / 2 + 24px));
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 14px;
        white-space: nowrap;
    }

    .pl-crumbs a {
        color: var(--muted);
        text-decoration: none;
    }

    .pl-crumbs a:hover {
        color: var(--ink);
    }

    .pl-crumbs span:last-child {
        color: var(--ink);
        font-weight: 600;
    }

    /* the two photo drops: bigger */
    .pl .pt-slots {
        max-width: 640px;
        gap: 16px;
    }

    .pl .pt-slot {
        padding: 0 20px;
        font-size: 14px;
        text-align: center;
    }

    .pl .pt-slot b {
        font-size: 16px;
    }

    /* Line: Style and Color in one panel, no tabs */
    .pl .pl-sub-tabs {
        display: none;
    }

    .pl .pl-sub {
        display: block !important;
    }
}

/* Remove photo(s): under the other photo button in the Photo(s) tab */
.pl-clear {
    margin-top: 12px;
}

/* Labels > Text: the font dropdown, like the sites' .pg-select + .pg-menu (12px corners, 40px items with 10px
   corners, hover 7%, the picked one accent-soft). The menu sits on the page (teleported), placed by openFontMenu() */
.pl-select {
    width: 100%;
    height: 44px;
    padding: 0 12px 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--field);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
    font-size: 15px;
    transition: background .15s;
}

.pl-select > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-select svg {
    flex: none;
    color: var(--muted);
    transition: transform .15s;
}

.pl-select.is-open svg {
    transform: rotate(180deg);
}

.pl-fmenu-bg {
    position: fixed;
    z-index: 1000;
    inset: 0;
}

.pl-fmenu {
    position: fixed;
    z-index: 1001;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--pop-shadow);
    box-sizing: border-box;
}

.pl-fmenu-item {
    flex: none;
    width: 100%;
    min-height: 40px;
    padding: 0 10px 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 10px;
    background: none;
    color: var(--ink);
    font-size: 17px;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

.pl-fmenu-item.is-on {
    background: var(--accent-soft);
    color: var(--on-accent-soft);
}

.pl-mcheck {
    width: 20px;
    flex: none;
    display: inline-flex;
    justify-content: center;
    color: transparent;
}

.pl-fmenu-item.is-on .pl-mcheck {
    color: var(--on-accent-soft);
}

.pl-fmenu-name {
    flex: 1;
    min-width: 0;
}

@media (hover: hover) {
    .pl-select:hover {
        background: color-mix(in srgb, var(--ink) 7%, var(--card));
    }

    .pl-fmenu-item:hover {
        background: color-mix(in srgb, var(--ink) 7%, transparent);
    }

    .pl-fmenu-item.is-on:hover {
        background: color-mix(in srgb, var(--on-accent-soft) 8%, var(--accent-soft));
    }
}

/* Before & After, Photos tab: Swap and Remove side by side on phones */
@media (max-width: 899px) {
    .pl-photo-btns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .pl-photo-btns .pl-clear {
        margin-top: 0;
    }

    .pl-photo-btns .pl-long {
        display: none;
    }
}

/* a field label with the crown pill (Font): the pill centered on the text */
.pt-label:has(> .pl-crown) {
    display: inline-flex;
    align-items: center;
}

/* Labels > Text: "Font" and its dropdown on one line, so the tab fits on a phone without scrolling */
.pt-field:has(> .pl-select) {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.pt-field:has(> .pl-select) > .pt-label {
    flex: none;
    margin: 0;
}

.pt-field > .pl-select {
    flex: 1;
    min-width: 0;
}

/* the Font field is the last thing in Labels > Text: no space under it (the phone panel is 176px tall) */
.pt-a .pt-field:has(> .pl-select) {
    margin-bottom: 0;
}

/* a button with the crown pill (Place, Style, 3 and 4 slides): text and pill centered on one line; in the 32px
   sub-tabs the pill sits as far from the right edge as from the top and bottom (6px) */
.pt-tabs button:has(> .pl-crown),
.pt-seg button:has(> .pl-crown) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pt-a .pt-tabs button:has(> .pl-crown:not([style*="display: none"])) {
    padding-right: 6px;
}

/* the font menu: the list scrolls inside it */
.pl-fmenu-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* one line in both views: a long text ends with ... */
.pl-fmenu-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-fmenu-small {
    flex: none;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.pl-fmenu-item.is-on .pl-fmenu-small {
    color: var(--on-accent-soft);
    opacity: .75;
}


/* Before & After page, below the tool: collage examples (3 cards; phones swipe through them) and the "no need to
   line up" example (before + after -> collage). Surfaces 20px corners, like the other cards */
.pl-ex-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pl-ex {
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.pl-ex img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    display: block;
    object-fit: cover;
}

.pl-ex figcaption,
.pl-ex-in figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pl-ex figcaption {
    padding: 16px;
}

.pl-ex figcaption strong,
.pl-ex-in figcaption strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
}

.pl-ex figcaption span:not(.pl-crown):not(.mv-badge),
.pl-ex-in figcaption span {
    color: var(--soft-ink);
    font-size: 14px;
    line-height: 1.5;
}

.pl-ex-align {
    margin-top: 16px;
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.pl-ex-intro h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
}

.pl-ex-intro p {
    margin: 0;
    color: var(--soft-ink);
    line-height: 1.6;
}

/* before + after -> collage: the pictures in one row at one height (their own shapes), the signs centered on them */
.pl-ex-flow {
    display: grid;
    grid-template-columns: auto 32px auto 32px auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 10px;
    justify-content: center;
    align-items: center;
}

.pl-ex-in {
    display: contents;
}

.pl-ex-in img {
    grid-row: 1;
    height: 240px;
    width: auto;
    display: block;
    border-radius: 12px;
}

.pl-ex-in figcaption {
    grid-row: 2;
    align-self: start;
    text-align: center;
    align-items: center;
}

.pl-ex-in figcaption span {
    font-size: 13px;
}

.pl-ex-in.is-a img, .pl-ex-in.is-a figcaption { grid-column: 1; }
.pl-ex-in.is-b img, .pl-ex-in.is-b figcaption { grid-column: 3; }
.pl-ex-in.is-r img, .pl-ex-in.is-r figcaption { grid-column: 5; }

.pl-ex-op {
    grid-row: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--soft);
    color: var(--ink);
}

.pl-ex-op.is-plus { grid-column: 2; }
.pl-ex-op.is-to { grid-column: 4; }

.pl-ex-op.is-to svg + svg {
    display: none;
}

@media (max-width: 1060px) {
    .pl-ex-align {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

/* phones: the examples swipe sideways; the flow stacks: before + after, an arrow down, the collage */
@media (max-width: 760px) {
    .pl-ex-grid {
        margin: 0 -16px;
        padding: 0 16px 4px;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        scrollbar-width: none;
    }

    .pl-ex-grid::-webkit-scrollbar {
        display: none;
    }

    .pl-ex {
        scroll-snap-align: start;
    }

    .pl-ex-align {
        padding: 16px;
    }

    .pl-ex-flow {
        grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
        grid-template-rows: auto auto auto auto auto;
        column-gap: 8px;
        row-gap: 10px;
    }

    .pl-ex-in img {
        height: 168px;
        max-width: 100%;
        justify-self: center;
    }

    .pl-ex-in.is-a img, .pl-ex-in.is-a figcaption { grid-column: 1; }
    .pl-ex-in.is-b img, .pl-ex-in.is-b figcaption { grid-column: 3; }
    .pl-ex-op.is-plus { grid-column: 2; grid-row: 1; }

    .pl-ex-op.is-to {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: center;
    }

    .pl-ex-op.is-to svg {
        display: none;
    }

    .pl-ex-op.is-to svg + svg {
        display: block;
    }

    .pl-ex-in.is-r img {
        grid-column: 1 / -1;
        grid-row: 4;
        height: auto;
        width: min(100%, 300px);
    }

    .pl-ex-in.is-r figcaption {
        grid-column: 1 / -1;
        grid-row: 5;
    }
}

/* Before & After and Carousel split, near the bottom of the stage while no photo is in: a quiet link down to the examples and the
   text about the tool - centered, the arrow in a small circle under the text */
/* the stage while it shows the hint: a column - the drop boxes centered in the space, the hint at the bottom (in the
   flow, so it never covers the note on a short screen) */
.pt-stage:has(> .pl-scroll-hint:not([style*="display: none"])) {
    flex-direction: column;
    justify-content: flex-start;
}

.pt-stage:has(> .pl-scroll-hint:not([style*="display: none"])) > .pt-drop {
    margin: auto 0;
}

.pl-scroll-hint {
    flex: none;
    margin: 16px 24px 0;
    max-width: 340px;
    display: inline-flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    transition: color .15s;
}

.pl-scroll-hint svg {
    flex: none;
    width: 16px;
    height: 16px;
    padding: 8px;
    box-sizing: content-box;
    border-radius: 50%;
    background: var(--soft);
    color: var(--ink);
    transition: background .15s;
}

@media (hover: hover) {
    .pl-scroll-hint:hover {
        color: var(--ink);
    }

    .pl-scroll-hint:hover svg {
        background: color-mix(in srgb, var(--ink) 12%, var(--soft));
    }
}

/* ...and the drop boxes (3:4) no taller than the stage leaves room for: about 240px go to the spacing, the note and
   the hint, the rest to the boxes; two boxes side by side, so the row is 1.5 x their height + the gap */
.pt-stage:has(> .pl-scroll-hint:not([style*="display: none"])) {
    container-type: size;
}

.pt-stage:has(> .pl-scroll-hint:not([style*="display: none"])) .pt-slots {
    max-width: min(640px, calc((100cqh - 240px) * 1.5 + 16px));
}

/* the same 24px under the hint on phones and desktop */
.pt-stage:has(> .pl-scroll-hint:not([style*="display: none"])) {
    padding-bottom: 0;
}

.pt-stage > .pl-scroll-hint {
    margin-bottom: 24px;
}

/* Before & After on desktop (900px+): the main tabs stay, but a tab has no sub-tabs - Labels shows Text, Place and
   Style together (like Line), and each premium field gets its own crown (on phones the premium sub-tabs carry it) */
.pl-crown.is-desk {
    display: none;
}

@media (min-width: 900px) {
    .pt-collage-tool .pt-sheet-body .pt-tabs[aria-label="Label settings"] {
        display: none !important;
    }

    .pt-collage-tool .pt-sheet-body [x-show^="labSub === "] {
        display: block !important;
    }

    .pl-crown.is-desk {
        display: inline-flex;
    }

    /* the Font field has no space under it on phones (the last one in its tab); here more fields follow */
    .pt-collage-tool .pt-field:has(> .pl-select) {
        margin-bottom: 14px;
    }
}

/* Carousel split preview: swipe with the mouse (pl-split.js mouseSwipe) - no snapping while dragging */
@media (hover: hover) and (pointer: fine) {
    .pt-post-track,
    .pl-sx-track {
        cursor: grab;
        user-select: none;
    }

    .pl-sx-track.is-dragging,
    .pt-post-track.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
    }
}

/* Carousel split page, below the tool: the two uses as Instagram-style posts that swipe (post on the left, the text
   on the right; phones: the text under the post), then the photo -> area -> slides flow (the .pl-ex-* styles of the
   Before & After examples) */
.pl-sx-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pl-sx {
    margin: 0;
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.pl-sx-post {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
}

.pl-sx-head {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.pl-sx-avatar {
    width: 30px;
    height: 30px;
    flex: none;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--line);
}

.pl-sx-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.pl-sx-media {
    position: relative;
}

.pl-sx-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.pl-sx-track::-webkit-scrollbar {
    display: none;
}

.pl-sx-track img {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    display: block;
    object-fit: cover;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.pl-sx-count {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(22, 24, 26, .7);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
}

.pl-sx-arrow {
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #16181a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    cursor: pointer;
}

.pl-sx-arrow.is-prev { left: 10px; }
.pl-sx-arrow.is-next { right: 10px; }
.pl-sx-arrow.is-prev svg { transform: rotate(90deg); }
.pl-sx-arrow.is-next svg { transform: rotate(-90deg); }

.pl-sx-dots {
    padding: 10px 0;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.pl-sx-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--field);
}

.pl-sx-dots span.is-on {
    background: var(--accent);
}

.pl-sx figcaption {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pl-sx figcaption strong {
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
}

.pl-sx figcaption span {
    color: var(--soft-ink);
    font-size: 14px;
    line-height: 1.6;
}

.pl-sx figcaption .pl-sx-hint {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}

.pl-sx-hint svg {
    flex: none;
}

/* the slides of the flow: two side by side, at the flow's picture height */
.pl-ex-pair {
    grid-row: 1;
    grid-column: 5;
    display: flex;
    gap: 2px;
}

.pl-ex-in .pl-ex-pair img {
    height: 240px;
    width: auto;
    border-radius: 0;
}

.pl-ex-pair img:first-child {
    border-radius: 12px 0 0 12px;
}

.pl-ex-pair img:last-child {
    border-radius: 0 12px 12px 0;
}

/* the first sign is an arrow here (Before & After: a plus); phones turn the second one down */
.pl-ex-op.is-plus svg + svg {
    display: none;
}

@media (max-width: 1060px) {
    .pl-sx-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .pl-sx {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .pl-ex-pair {
        grid-column: 1 / -1;
        grid-row: 4;
        width: min(100%, 300px);
        justify-self: center;
    }

    .pl-ex-in .pl-ex-pair img {
        width: calc(50% - 1px);
        height: auto;
    }
}


/* ------------------- inside Grid Planner (?embed=gp, pl-embed.js) ------------------- */

/* no site header above: the tool fills the planner's window; the title stays, the close button is on the left */
@media (min-width: 900px) {
    .pl.pl-embed .pt-app {
        height: 100vh;
        height: 100dvh;
    }

    .pl.pl-embed .pt-bar-title {
        display: block;
    }
}


/* Before & After, phones: the line's Color tab while there's no line (thickness 0) */
.pt-tabs button.is-off {
    color: color-mix(in srgb, var(--ink) 38%, transparent);
    cursor: default;
}

/* Before & After: the turn button over a tapped label (centered on the given point) */
.pt .pl-rot {
    position: absolute;
    z-index: 4;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    background: var(--card);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .25);
    cursor: pointer;
}

/* Before & After: the photo box a file is being dragged over (it goes there when let go) */
.pt-slot.is-over {
    border-style: solid;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--soft));
}

/* an IGTags (i) note in a photo tool label: its styles need the .ig scope, nothing else from it */
.pl-info {
    display: contents;
}

.pl-info .ig-info-tip {
    --tip-x: 70px; /* the label starts at the panel's left edge: the note opens to the right of the (i) */
    font-family: inherit;
}

/* a switch with four options (label Place): on its own line under the label, the full width */
.pt-a .pt-field.pl-stack {
    flex-direction: column;
    align-items: stretch;
}

.pt-a .pt-field.pl-stack > .pt-label {
    width: auto;
}


/* ---------------------------- Detail collage ---------------------------- */

/* the pill's words: tap one to make it bold */
.pd-words {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pd-word {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.pd-word.is-on {
    border-color: transparent;
    background: var(--accent-soft);
    color: var(--on-accent-soft);
    font-weight: 700;
}

/* the automatic text color: a round swatch with an A */
.pt-swatch.pd-auto {
    background: var(--soft);
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
}

/* the photos (which one a part shows) */
.pd-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pd-photo {
    position: relative;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: var(--soft);
    cursor: pointer;
}

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

.pd-photo.is-on {
    border-color: var(--accent);
}

.pd-n,
.pd-x {
    position: absolute;
    top: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-n {
    left: 4px;
}

.pd-x {
    right: 4px;
    cursor: pointer;
}

.pd-add {
    border: 2px dashed var(--dash);
    background: none;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* a photo's camera settings, editable */
.pt-a .pt-field.pd-exif-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.pd-exif-row img {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    object-fit: cover;
}

.pd-exif-row .pt-input {
    flex: 1;
    min-width: 0;
}

/* every swatch outlined: white (and black on dark) would vanish into the panel */
.pt-details-tool .pt-swatch:not(.pt-swatch-pick):not(.pd-auto) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
}

/* Detail collage: the layouts for the photo count (pictures only) */
.pd-tiles {
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 6px;
    padding: 4px;
    border-radius: 16px;
    background: var(--seg-track, var(--soft));
}

.pd-tile {
    height: 60px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: none;
    color: var(--seg-text, var(--muted));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pd-tile.is-on {
    background: var(--accent-soft);
    color: var(--on-accent-soft);
}

@media (hover: hover) {
    .pd-tile:not(.is-on):hover {
        background: color-mix(in srgb, var(--ink) 7%, transparent);
    }
}

/* the photos no part shows: a row under the collage (the stage leaves room for it) */
.pt-details-tool.pd-has-tray .pt-stage {
    padding-bottom: 96px;
}

.pd-tray {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    max-width: calc(100% - 24px);
    padding: 8px;
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .18);
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    z-index: 3;
}

.pd-tray-item {
    width: 56px;
    height: 56px;
    flex: none;
    padding: 0;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background: var(--soft);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
}

.pd-tray-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.pd-tray-add {
    border: 2px dashed var(--dash);
    background: none;
    cursor: pointer;
}

.pd-tray-note {
    flex: none;
    padding: 0 6px;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

/* a photo dragged from the row */
.pd-ghost {
    position: fixed;
    z-index: 100;
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 12px;
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    pointer-events: none;
}

.pd-tiles + .pt-hint {
    margin: 0 0 12px;
}

@media (max-width: 899px) {
    .pd-tray-note {
        display: none;
    }
}


/* Detail collage, STC mode: the usernames */
.pt-input.pd-users {
    height: auto;
    min-height: 200px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
}


/* Before After video: the timeline steps */
.pv-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.pv-step {
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pv-step.is-move {
    background: color-mix(in srgb, var(--accent) 12%, var(--soft));
}

.pv-step-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.pv-step-head b {
    flex: 1;
    font-weight: 600;
}

.pv-step-head small {
    color: var(--muted);
}

.pv-step-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pv-step-btn:disabled {
    opacity: .3;
}

.pv-step-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}

.pv-step-row .pt-range {
    flex: 1;
}

.pv-step-row small {
    width: 36px;
    text-align: right;
    font-size: 12px;
}

/* Before After video, phones: the handle to pull the settings higher */
.pv-grip {
    display: none;
}

@media (max-width: 899px) {
    .pv-grip {
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: none;
        cursor: ns-resize;
    }

    .pv-grip span {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: color-mix(in srgb, var(--ink) 25%, transparent);
    }
}