/* ==========================================================================
   Photo Templates (admin tools on tools.macroviewpoint.com)
   Editor-first layout, styled after the rewards v2 redesign.
   Phone: preview on top, settings sheet below (the preview stays in view).
   Desktop (900px+): big preview on the left, settings sidebar on the right.
   ========================================================================== */

/* the admin's label font (Phitaya) is declared in the page head for admins only (layouts photo-lite and
   photo-templates), so other visitors' browsers never load it */

/* colors: the sites' tokens from igtags.css (loaded first: light/dark and the member's accent); a few names of the
   tools' own map onto them */
body.pt,
.pt-scope {
    --acc: var(--accent);
    --pt-acc-ink: var(--accent);
    --pt-field: var(--field);
    --pt-switch-off: var(--switch-off);
    --pt-grab: var(--dash);
    --pt-dots: var(--switch-off);
    --pt-veil: color-mix(in srgb, var(--page) 82%, transparent);
    --pt-on-ink: var(--on-ink);
}

body.pt {
    margin: 0;
    background: var(--card);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    -webkit-tap-highlight-color: transparent;
}

body.pt *,
body.pt *::before,
body.pt *::after {
    box-sizing: border-box;
}

[x-cloak] {
    display: none !important;
}

.pt button,
.pt input,
.pt select {
    font-family: inherit;
}

.pt button {
    cursor: pointer;
}

.pt button:disabled {
    cursor: default;
}

.pt :focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}


/* ------------------------------- BUTTONS --------------------------------- */

.pt-btn-primary,
.pt-btn-secondary {
    height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
}

.pt-btn-primary {
    background: var(--acc);
    color: #ffffff;
}

.pt-btn-primary:disabled {
    opacity: .4;
}

.pt-btn-secondary {
    background: var(--soft);
    color: var(--ink);
}

.pt-btn-wide {
    width: 100%;
    height: 48px;
    font-size: 15px;
}

.pt-btn-text {
    height: 44px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}

/* Round gray icon button, like the rewards page's card arrows */
.pt-round {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--soft);
    color: var(--ink);
}

.pt-round:disabled {
    opacity: .4;
}


/* --------------------------------- BAR ----------------------------------- */

.pt-bar {
    flex: none;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 4px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 3;
}

.pt-back {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ink);
}

.pt-back:hover {
    background: var(--soft);
}

.pt-bar-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-bar-tools {
    display: none;
}



/* --------------------------------- HUB ----------------------------------- */

.pt-hub-main {
    max-width: 1120px;
    margin: 0 auto;
    padding-bottom: 24px;
}

.pt-hub-intro {
    margin: 0 0 32px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.pt-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 16px;
}

.pt-hub-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pt-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .10), 0 2px 5px rgba(16, 24, 40, .06);
}

.pt-hub-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--acc);
    color: #ffffff;
}

.pt-hub-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pt-hub-text strong {
    font-size: 17px;
    font-weight: 600;
}

.pt-hub-text span {
    font-size: 14px;
    color: var(--muted);
}

.pt-hub-go {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--soft);
}


/* ------------------------------ APP SHELL -------------------------------- */

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

.pt-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pt-stage {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 0 0 28px;
    background: var(--page);
}

.pt-canvas {
    display: block;
    max-width: 100%;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* The handle stays put; only the body scrolls */
.pt-sheet {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 2;
    margin-top: -16px;
    background: var(--card);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 20px rgba(16, 24, 40, .08);
}

.pt-grabber {
    flex: none;
    width: 100%;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 20px 20px 0 0;
    background: transparent;
    touch-action: none;
    cursor: ns-resize;
}

.pt-grabber span {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--pt-grab);
}

.pt-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 16px calc(28px + env(safe-area-inset-bottom));
}

.pt-empty-note {
    margin: 12px 0;
    font-size: 14px;
    color: var(--muted);
    text-align: center;
}


/* ------------------------------ STAGE BITS ------------------------------- */

.pt-drop {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 24px 16px;
    text-align: center;
}

.pt-drop-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--card);
    box-shadow: var(--shadow);
    color: var(--pt-acc-ink);
}

.pt-drop-title {
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 600;
}

.pt-drop-text {
    margin: 0 0 6px;
    max-width: 340px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted);
}

.pt-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pt-chip {
    position: absolute;
    left: 12px;
    bottom: 40px;
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: rgba(22, 24, 26, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
}

.pt-mouse { display: none; }

@media (hover: hover) and (pointer: fine) {
    .pt-touch { display: none; }
    .pt-mouse { display: inline; }
}

.pt-float {
    position: absolute;
    right: 12px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pt-float {
    align-items: flex-end;
}

.pt-float-done {
    box-shadow: 0 2px 8px rgba(16, 24, 40, .25);
}

.pt-float .pt-round {
    background: var(--card);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .18);
}

.pt-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--pt-veil);
    font-size: 14px;
    font-weight: 500;
    z-index: 2;
}

.pt-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--line);
    border-top-color: var(--acc);
    animation: pt-spin .8s linear infinite;
}

@keyframes pt-spin {
    to { transform: rotate(360deg); }
}


/* -------------------------------- SHEET ---------------------------------- */

.pt-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -16px 16px;
    padding: 0 16px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}

.pt-tabs button {
    flex: 1;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}

.pt-tabs button.is-on {
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--acc);
}

.pt-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.pt-label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.pt-label small {
    font-weight: 400;
    color: var(--muted);
    font-size: 13px;
}

.pt-hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

.pt-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* sliders: own track (the browser's is a light bar in dark mode); --pct = the filled part, set by pt-core.js */
.pt-range {
    flex: 1;
    width: 100%;
    height: 28px;
    margin: 0;
    background: transparent;
    accent-color: var(--acc);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.pt-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--acc) var(--pct, 50%), var(--pt-switch-off) var(--pct, 50%));
}

.pt-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--pt-switch-off);
}

.pt-range::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--acc);
}

.pt-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: none;
    border-radius: 50%;
    background: var(--acc);
    box-shadow: 0 0 0 3px var(--card);
}

.pt-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: var(--acc);
    box-shadow: 0 0 0 3px var(--card);
}

.pt-range:focus-visible {
    outline: none;
}

.pt-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--acc);
}

.pt-range:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--acc);
}

/* Segmented control (rewards v2 pill switch) */
.pt-seg {
    display: flex;
    padding: 4px;
    border-radius: 999px;
    background: var(--soft);
}

.pt-seg button {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 6px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.pt-seg button.is-on {
    background: var(--pt-seg-on, var(--card));
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}

/* Layer switch at the top of the settings: which part the photo's handles edit */
.pt-layers {
    margin-bottom: 14px;
}

.pt-layers button.is-on {
    color: var(--pt-acc-ink);
}

/* Picture tiles (divider shapes, positions) */
.pt-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pt-tiles.is-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pt-tile {
    min-height: 84px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
}

.pt-tile.is-on {
    border: 2px solid var(--acc);
    background: color-mix(in srgb, var(--acc) 7%, var(--card));
    font-weight: 600;
}

.pt-input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--pt-field);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
    font-size: 15px;
}

.pt-input:focus {
    outline: none;
    border-color: var(--acc);
}

/* Switch */
.pt-switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    margin: 9px 0;
    border-radius: 999px;
    background: var(--pt-switch-off);
    transition: background .15s ease;
    cursor: pointer;
}

.pt-switch::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform .15s ease;
}

.pt-switch:checked {
    background: var(--acc);
}

.pt-switch:checked::before {
    transform: translateX(18px);
}

.pt-switch-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
}

/* Photos strip (collage) */
.pt-photos {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
}

.pt-photo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
    color: var(--ink);
}

.pt-photo img {
    width: 40px;
    height: 54px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 6px;
    background: var(--soft);
}

.pt-photo span {
    min-width: 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
}

.pt-photo strong {
    display: block;
    font-size: 13px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collage upload slots on the stage */
.pt-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 440px;
}

.pt-slot {
    position: relative;
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    border: 2px dashed var(--pt-grab);
    border-radius: 16px;
    background: var(--card);
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.pt-slot.is-filled {
    border-style: solid;
    border-color: transparent;
}

.pt-slot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pt-slot b {
    color: var(--ink);
    font-size: 14px;
}

/* Left / right label inputs with the swap button between them */
.pt-label-pair {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pt-label-pair .pt-input {
    flex: 1;
    min-width: 0;
}

/* Detail rows (info pills) */
.pt-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

.pt-list-row:last-child {
    border-bottom: none;
}

.pt-list-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pt-list-fields input {
    width: 100%;
    border: none;
    padding: 2px 0;
    background: transparent;
    color: var(--ink);
}

.pt-list-fields input:focus {
    outline: none;
    box-shadow: 0 1px 0 var(--acc);
}

.pt-list-fields .pt-list-label {
    font-size: 12px;
    color: var(--muted);
}

.pt-list-fields .pt-list-value {
    font-size: 15px;
    padding: 4px 0 6px;
}

.pt-source {
    font-size: 11px;
    color: var(--muted);
}

/* Color swatches */
.pt-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.pt-swatch {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
}

.pt-swatch.is-on {
    box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ink);
}

.pt-swatch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.pt-swatch-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft);
    color: var(--ink);
}

.pt-swatch-pick.is-picking {
    background: var(--ink);
    color: var(--pt-on-ink);
}

.pt-canvas.is-picking {
    cursor: crosshair;
}

/* Hue / saturation / lightness sliders: the track shows the colors */
.pt-color-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    margin: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
    cursor: pointer;
}

.pt-color-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .3);
}

.pt-color-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .3);
}

/* Nudge pad (collage fine-tune) */
.pt-nudge {
    display: grid;
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(3, 44px);
    gap: 6px;
}

.pt-nudge .up { grid-column: 2; grid-row: 1; }
.pt-nudge .left { grid-column: 1; grid-row: 2; }
.pt-nudge .right { grid-column: 3; grid-row: 2; }
.pt-nudge .down { grid-column: 2; grid-row: 3; }

/* move pad + rotate + size on one line */
.pt-tune-tools {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.pt-tune-pair {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
}

.pt-tune-pair > div {
    display: flex;
    gap: 6px;
}

.pt-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 8px 10px 12px;
    border-radius: 12px;
    background: var(--pt-warn-bg);
    color: var(--pt-warn);
    font-size: 13px;
    line-height: 1.45;
}

.pt-warn > span {
    flex: 1;
    min-width: 0;
}

.pt-warn-x {
    flex: none;
    width: 26px;
    height: 26px;
    margin: -3px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

@media (hover: hover) {
    .pt-warn-x:hover {
        background: color-mix(in srgb, currentColor 14%, transparent);
    }
}

.pt-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.pt-actions > * {
    flex: 1;
}


/* --------------------------- CAROUSEL PREVIEW ---------------------------- */
/* A generic swipeable post preview: slides sit edge to edge, no gaps or rounding,
   so the seam looks exactly like it will when swiping. */

/* narrower than the panel on phones, so the whole post fits on screen */
.pt-post {
    width: min(100%, 250px);
    margin: 0 auto 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.pt-post-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
}

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

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

.pt-post-media {
    position: relative;
}

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

.pt-post-track::-webkit-scrollbar {
    display: none;
}

.pt-post-slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: var(--soft);
}

.pt-post-slide canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pt-post-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;
}

.pt-post-arrow {
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    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);
}

.pt-post-arrow.prev { left: 10px; }
.pt-post-arrow.next { right: 10px; }

.pt-post-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 10px 0 2px;
}

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

.pt-post-dots span.is-on {
    background: var(--acc);
}


/* -------------------------------- EXPORT --------------------------------- */

.pt-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(16, 18, 20, .5);
}

.pt-modal-card {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
    background: var(--card);
    border-radius: 20px 20px 0 0;
}

.pt-modal-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
}

.pt-busy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 0;
    font-size: 15px;
    font-weight: 500;
}

.pt-results {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.pt-result {
    margin: 0;
    flex: 0 0 auto;
    max-width: 70%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pt-result img {
    display: block;
    height: 180px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
    background: var(--soft);
}

.pt-result figcaption {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--muted);
}

.pt-result strong {
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}

.pt-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 60;
    max-width: calc(100% - 32px);
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--ink);
    color: var(--pt-on-ink);
    font-size: 14px;
    line-height: 1.4;
    transform: translate(-50%, 20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.pt-toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}


/* -------------------------------- DESKTOP -------------------------------- */

@media (min-width: 900px) {
    .pt-bar {
        padding: 0 16px 0 8px;
    }

    .pt-bar-title {
        flex: none;
        text-align: left;
    }

    .pt-bar-tools {
        flex: 1;
        display: flex;
        justify-content: center;
        gap: 4px;
    }

    .pt-bar-tools a {
        height: 36px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        border-radius: 999px;
        color: var(--muted);
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
    }

    .pt-bar-tools a:hover {
        background: var(--soft);
    }

    .pt-bar-tools a.is-on {
        background: var(--soft);
        color: var(--ink);
        font-weight: 600;
    }


    .pt-main {
        flex-direction: row;
    }

    .pt-stage {
        flex: 1;
        min-width: 0;
        min-height: 0;
        padding: 32px;
    }

    .pt-chip,
    .pt-float {
        bottom: 24px;
    }

    .pt-chip { left: 24px; }
    .pt-float { right: 24px; }

    .pt-sheet {
        flex: 0 0 400px;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        border-left: 1px solid var(--line);
    }

    .pt-grabber {
        display: none;
    }

    .pt-sheet-body {
        padding: 16px 20px 32px;
    }

    .pt-tabs {
        top: -16px;
        margin: 0 -20px 18px;
        padding: 0 20px;
    }

    .pt-post {
        width: 100%;
    }

    .pt-modal {
        align-items: center;
    }

    .pt-modal-card {
        border-radius: 20px;
        padding: 24px;
    }

    .pt-modal-actions {
        flex-direction: row;
    }

    .pt-modal-actions .pt-btn-wide {
        flex: 1;
    }
}

/* ==========================================================================
   Guidelines look (2026-10-12): the same parts as on the three sites (igtags.css). Fields (pill details, label
   texts) keep their minimal look on purpose.
   ========================================================================== */

/* buttons: accent / light; disabled = ink 12% fill, 38% text */
.pt-btn-primary {
    background: var(--accent);
    color: var(--on-accent);
}

.pt-btn-primary:disabled {
    opacity: 1;
    background: color-mix(in srgb, var(--ink) 12%, transparent);
    color: color-mix(in srgb, var(--ink) 38%, transparent);
}

.pt-btn-secondary {
    background: var(--card);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--field);
}

.pt-bar .pt-btn-primary {
    height: 40px;
}

@media (hover: hover) {
    .pt-btn-primary:not(:disabled):hover {
        box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--on-accent) 10%, transparent);
    }

    .pt-btn-secondary:hover {
        box-shadow: inset 0 0 0 1px var(--field), inset 0 0 0 999px color-mix(in srgb, var(--ink) 7%, transparent);
    }
}

/* the destructive choice in a confirmation (Leave, Remove, Reset): tonal red like the sites' .pg-tonal-danger; the
   primary button next to it is the safe way back (Stay, Cancel) */
.pt-btn-secondary.pt-btn-danger {
    background: var(--coral-bg);
    color: var(--coral);
    box-shadow: none;
}

@media (hover: hover) {
    .pt-btn-secondary.pt-btn-danger:hover {
        background: color-mix(in srgb, var(--coral) 16%, var(--card));
        box-shadow: none;
    }
}

/* top bar: round back button, bolder title */
.pt-back {
    width: 40px;
    height: 40px;
    margin-left: 4px;
    background: var(--soft);
    color: var(--soft-ink);
}

.pt-back:hover {
    background: color-mix(in srgb, var(--ink) 10%, var(--soft));
}

.pt-bar-title {
    font-size: 17px;
    font-weight: 700;
}

/* switches: one track, the picked one filled with the accent */
.pt-seg {
    padding: 3px;
    background: var(--seg-track);
}

.pt-seg button {
    height: 34px;
    color: var(--seg-text);
    font-size: 14px;
    transition: background .15s, color .15s;
}

.pt-seg button.is-on,
.pt-layers button.is-on {
    background: var(--accent-soft);
    color: var(--on-accent-soft);
    box-shadow: none;
}

/* is-off: looks disabled but still takes the tap, to say why */
.pt-seg button:disabled,
.pt-seg button.is-off {
    opacity: .4;
}

@media (hover: hover) {
    .pt-seg button:not(.is-on):not(:disabled):not(.is-off):hover {
        background: color-mix(in srgb, var(--ink) 7%, transparent);
        color: var(--ink);
    }
}

/* tabs: like the Settings window tabs */
.pt-tabs button {
    height: 48px;
    font-weight: 600;
}

.pt-tabs button.is-on {
    box-shadow: inset 0 -3px 0 var(--accent);
}

@media (hover: hover) {
    .pt-tabs button:hover {
        color: var(--ink);
    }
}

/* picture tiles (divider shape, pill position): the mode switch from Generate */
.pt-tiles {
    padding: 3px;
    gap: 0;
    border-radius: 22px;
    background: var(--seg-track);
}

.pt-tile {
    min-height: 76px;
    border: none;
    border-radius: 18px;
    background: none;
    color: var(--seg-text);
    font-size: 14px;
    font-weight: 600;
    transition: background .15s, color .15s;
}

.pt-tile svg {
    width: 28px;
    height: 28px;
}

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

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

/* toggles: the sites' switch */
.pt-switch {
    width: 46px;
    height: 28px;
}

.pt-switch::before {
    width: 22px;
    height: 22px;
}

.pt-switch:checked {
    background: var(--accent);
}

.pt-switch:checked::before {
    background: var(--on-accent);
}

/* labels */
.pt-label {
    font-weight: 500;
}

/* warnings: the sites' notice (card, orange outline, icon) */
.pt-warn {
    gap: 12px;
    padding: 12px 10px 12px 14px;
    background: var(--card);
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tone-warn) 50%, transparent);
    font-size: 14px;
}

.pt-warn > svg {
    flex: none;
    margin-top: 1px;
    color: var(--tone-warn);
}

.pt-warn-x {
    margin: -3px 0 -3px auto;
    color: var(--tone-warn);
}

/* photo slots and the start screen: the sites' big photo drop */
.pt-slot {
    gap: 6px;
    border: 2px dashed var(--dash);
    background: var(--soft);
    color: var(--muted);
}

.pt-slot-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--card);
    color: var(--soft-ink);
}

@media (hover: hover) {
    .pt-slot:not(.is-filled):hover {
        border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    }
}

.pt-drop-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    box-shadow: none;
    color: var(--soft-ink);
}

/* photo thumbnails: radius 10 */
.pt-photo img {
    border-radius: 10px;
}

/* windows and toasts */
.pt-modal {
    background: var(--scrim);
}

.pt-toast {
    color: var(--on-ink);
    box-shadow: var(--pop-shadow);
}

@media (min-width: 900px) {
    .pt-bar {
        height: 64px;
    }

    .pt-bar-title {
        font-size: 18px;
    }

    /* the tool switch: the sites' switch */
    .pt-bar-tools {
        flex: 0 1 auto;
        margin: 0 auto;
        padding: 3px;
        gap: 0;
        border-radius: 999px;
        background: var(--seg-track);
    }

    .pt-bar-tools a {
        height: 34px;
        padding: 0 18px;
        justify-content: center;
        color: var(--seg-text);
        transition: background .15s, color .15s;
    }

    .pt-bar-tools a:hover {
        background: color-mix(in srgb, var(--ink) 7%, transparent);
        color: var(--ink);
    }

    .pt-bar-tools a.is-on {
        background: var(--accent-soft);
        color: var(--on-accent-soft);
    }
}

/* Info pills / Carousel split start: one photo box like the Before & After slots */
.pt-drop-box {
    width: calc(100% - 32px);
    max-width: 440px;
    margin: 24px 16px 0;
    padding: 32px 20px;
    border: 2px dashed var(--dash);
    border-radius: 16px;
    background: var(--soft);
    cursor: pointer;
}

.pt-drop-box .pt-drop-icon {
    background: var(--card);
}

@media (hover: hover) {
    .pt-drop-box:hover {
        border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    }
}

/* Info pills tool: the tool bar replaces the settings tabs */
.pt-pills-tool .pt-sheet-body > div > .pt-tabs {
    display: none;
}

/* Carousel split: the tool bar replaces the Split / Info pills switch */
.pt-split-tool .pt-layers {
    display: none;
}

/* layout A: the info pill settings' own tabs become small chips inside the panel */
.pt-a .pt-tabs {
    position: static;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    border: none;
    background: none;
}

.pt-a .pt-tabs button {
    flex: none;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}

.pt-a .pt-tabs button.is-on {
    background: var(--accent-soft);
    color: var(--on-accent-soft);
    font-weight: 600;
    box-shadow: none;
}

/* Before & After: the tool bar replaces the Before & After | Info pills switch and the settings tabs */
.pt-collage-tool .pt-layers,
.pt-collage-tool .pt-tabs[aria-label="Collage settings"] {
    display: none;
}

/* ==========================================================================
   Layout A (2026-10-12), tools with .pt-app.pt-a: a tool bar at the bottom, one small panel at a time
   ========================================================================== */
.pt-nav {
    flex: none;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--card);
}

.pt-nav::-webkit-scrollbar {
    display: none;
}

/* the open tab: icon and name together in one soft accent block (like the Grid Planner tab bar), no gap between them like the segmented switch */
.pt-nav button {
    flex: 1 0 58px;
    min-width: 58px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    border-radius: 16px;
    background: none;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.pt-nav button > span {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pt-nav button.is-on {
    background: var(--accent-soft);
    color: var(--on-accent-soft);
}

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

.pt-save-title {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
}

.pt-a .pt-grabber {
    display: none;
}

@media (max-width: 899px) {
    .pt-a .pt-stage {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
        padding: 8px 0;
    }

    .pt-a .pt-sheet {
        flex: none;
        margin-top: 0;
        border-top: 1px solid var(--line);
        box-shadow: none;
    }

    .pt-a .pt-sheet-body {
        flex: none;
        height: 176px;
        padding: 14px 16px 12px;
    }

    .pt-a .pt-sheet-body.is-tall {
        height: auto;
        max-height: 268px;
    }

    .pt-a .pt-sheet-body.is-closed {
        display: none;
    }

    .pt-a .pt-nav {
        height: 66px;
        padding: 6px 2px calc(8px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        box-sizing: content-box;
    }
}

@media (min-width: 900px) {
    .pt-a .pt-nav {
        order: -1;
        height: 64px;
        padding: 6px;
        border-bottom: 1px solid var(--line);
    }
}

/* warnings are toasts now (the boxes in the panel are hidden) */
.pt-a .pt-warn {
    display: none !important;
}

.pt-toast {
    width: max-content;
}

.pt-toast.is-warn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pt-toast.is-warn::before {
    content: '';
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: #f2b84b;
}

/* phones: above the tool bar */
@media (max-width: 899px) {
    body:has(.pt-a) .pt-toast {
        bottom: calc(92px + env(safe-area-inset-bottom));
    }
}

/* compact toasts (2026-10-12) */
.pt-toast {
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.35;
}

/* layout A: compact picture tiles (one row of four fits the panel) */
.pt-a .pt-tile {
    min-height: 58px;
    padding: 6px 2px;
    gap: 3px;
    font-size: 12px;
}

.pt-a .pt-tile svg {
    width: 24px;
    height: 24px;
}

/* layout A: a slider sits on its label line; tighter fields; no empty room under the tool bar */
.pt-a .pt-field {
    margin-bottom: 14px;
}

.pt-a .pt-field:has(> .pt-range) {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.pt-a .pt-field:has(> .pt-range) > .pt-label {
    width: 84px;
    flex: none;
}

.pt-a .pt-hint {
    font-size: 12px;
}

@media (max-width: 899px) {
    .pt-a .pt-nav {
        height: calc(64px + env(safe-area-inset-bottom));
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }
}

/* layout A, more compact: a switch, slider or row of controls shares the line with its label; the label's
   side note goes; a hint drops to its own line */
.pt-a .pt-field:has(> .pt-seg, > .pt-range, > .pt-row) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.pt-a .pt-field:has(> .pt-seg, > .pt-range, > .pt-row) > .pt-label {
    width: 84px;
    flex: none;
}

.pt-a .pt-field:has(> .pt-seg, > .pt-range, > .pt-row) > .pt-label small {
    display: none;
}

.pt-a .pt-field > .pt-seg,
.pt-a .pt-field > .pt-range,
.pt-a .pt-field > .pt-row {
    flex: 1 1 0;
    min-width: 0;
}

.pt-a .pt-field > .pt-hint {
    flex-basis: 100%;
}

.pt-a .pt-field > .pt-switch-row {
    min-height: 0;
}

/* a press beside a slider's dot pulses the dot (the slider moves only from the dot) */
@keyframes pt-poke {
    0% { box-shadow: 0 0 0 3px var(--card), 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
    100% { box-shadow: 0 0 0 3px var(--card), 0 0 0 16px transparent; }
}

.pt-range.is-poke::-webkit-slider-thumb {
    animation: pt-poke .45s ease-out;
}

.pt-range.is-poke::-moz-range-thumb {
    animation: pt-poke .45s ease-out;
}

/* the info pill panels (and other tall ones) keep one height when switching sub-tabs */
@media (max-width: 899px) {
    .pt-a .pt-sheet-body.is-tall {
        height: 248px;
        max-height: none;
    }
}

.pt-a .pt-label-pair .pt-switch {
    margin: 0 0 0 4px;
}

/* our color picker */
.pt-picker {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}

.pt-picker-sv {
    position: relative;
    height: 84px;
    border-radius: 12px;
    background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
    touch-action: none;
    cursor: crosshair;
}

.pt-picker-hue {
    position: relative;
    height: 14px;
    margin: 0 9px;
    border-radius: 999px;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    touch-action: none;
    cursor: pointer;
}

.pt-picker-sv span,
.pt-picker-hue span {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .35);
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-sizing: border-box;
}

.pt-picker-hue span {
    top: 50%;
    width: 22px;
    height: 22px;
}

/* Carousel split, Preview: the post gets the bigger part of the screen and fits in it whole */
@media (max-width: 899px) {
    .pt-a .pt-sheet-body.is-tall.is-preview {
        height: 58vh;
        height: 58dvh;
    }

    .pt-a .is-preview .pt-post {
        width: min(100%, calc((58dvh - 120px) * .75));
        margin: 0 auto;
    }
}

/* info pill sub-tabs other than Texts: as tall as Sizing needs; color circles a little lower (their ring) */
@media (max-width: 899px) {
    .pt-a .pt-sheet-body.is-mid:not(.is-tall) {
        height: 204px;
    }
}

.pt-a .pt-swatches {
    padding-top: 4px;
}

/* inside Grid Planner (?embed=gp): no tool switch in the bar, so Add to post goes to the right on its own */
@media (min-width: 900px) {
    .pl-embed .pt-bar .pt-btn-primary {
        margin-left: auto;
    }
}

/* the close button inside Grid Planner is a button, not a link like the back button */
.pl-embed .pt-back {
    padding: 0;
    border: none;
    cursor: pointer;
}

@media (min-width: 900px) {
    .pl-embed .pt-back {
        margin-left: 8px;
    }
}

/* inside Grid Planner: a photo of the post in an empty photo box (pl-embed.js) */
.pl-from-post {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    height: 40px;
    padding: 0 12px;
    border: none;
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* in the one-photo box: under Choose photo */
.pl-from-post.is-inline {
    position: static;
    width: auto;
    height: 44px;
    margin-top: 4px;
    padding: 0 18px;
}

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

/* "Select from post": the post's photos as in the post window's Photos row */
.pl-pp .pt-modal-card {
    max-width: 560px;
}

.pl-pp-head {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pl-pp-head .pt-modal-title {
    flex: 1;
    margin: 0;
}

.pl-pp-x {
    width: 40px;
    height: 40px;
    flex: none;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--soft);
    color: var(--soft-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pl-pp-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.pl-pp-item {
    width: 104px;
    flex: none;
    padding: 0;
    border: none;
    background: none;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.pl-pp-item:disabled {
    opacity: .5;
    cursor: default;
}

.pl-pp-pic {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    overflow: hidden;
    background: var(--soft);
}

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

@media (hover: hover) {
    .pl-pp-item:not(:disabled):hover img {
        opacity: .85;
    }
}

.pl-pp-n {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl-pp-info {
    line-height: 1.35;
}

/* the same space on both sides of the close button */
@media (min-width: 900px) {
    .pl-embed .pt-back {
        margin-right: 8px;
    }
}

/* Carousel split: the "show the area bigger" button is for the desktop layout only (phones always fill) */
.pt-float .pl-desk-only {
    display: none;
}

@media (min-width: 900px) {
    .pt-float .pl-desk-only {
        display: flex;
    }
}

/* the snapping magnet (info pills): on = the accent's soft color */
.pt-float .pt-round.pl-snap.is-on {
    background: var(--accent-soft);
    color: var(--on-accent-soft);
}


/* info pills: desktop has one Pills tab (Place, Sizing and Color together), phones the three tabs */
/* (each kind only hidden where it's not used: the visible ones keep their own tab or tool bar layout) */
@media (max-width: 899px) {
    .pl-desk-tab {
        display: none !important;
    }
}

@media (min-width: 900px) {
    .pl-phone-tab {
        display: none !important;
    }
}

/* the pills' color swatches: outlined, so white (and black on dark) stay visible */
.pt-swatches .pt-swatch:not(.pt-swatch-pick) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
}

/* a switch that can't be used right now */
.pt-switch:disabled {
    opacity: .38;
    cursor: default;
}