/* ═══════════════════════════════════════════════════════════════
   PAGE BUILDER — template gallery, guided questions, live editor
   Uses Lakan tokens (--lk-*); the rendered page inside brings its own.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page shell ──
   Follows the pre-session wizard: a stepper strip, then one card that carries
   the header, the step's body and its own actions. No sticky bar, no docked footer. */

.pb-page {
    max-width: 76rem;
}

.pb-card {
    width: 100%;
}

.pb-card--narrow {
    max-width: 46rem;
    align-self: center;
}

/* The live editor renders a whole website inside the card, so it gets the full width
   and lets its own canvas handle the padding. */
.pb-card--editor {
    padding: 1.5rem 1.5rem 1.25rem;
}

.pb-header-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-left: auto;
    flex-shrink: 0;
}

.zen-step--clickable { cursor: pointer; }

.zen-step--clickable:hover .zen-step-dot { border-color: var(--lk-primary); }
.zen-step--clickable:hover .zen-step-label { color: var(--lk-primary); }

@media (max-width: 720px) {
    .pb-header-actions { width: 100%; margin-left: 0; }
    .pb-card--editor { padding: 1rem; }
}

/* ── Template gallery ── */

.pb-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 1.25rem;
}

.pb-tplcard {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: .75rem;
    border-radius: var(--lk-border-radius-lg);
    border: 1px solid var(--lk-border-color);
    background: var(--lk-surface);
    cursor: pointer;
    transition: var(--lk-transition);
    font-family: inherit;
}

.pb-tplcard:hover {
    border-color: color-mix(in srgb, var(--lk-primary) 40%, transparent);
    box-shadow: var(--lk-shadow-soft);
    transform: translateY(-2px);
}

.pb-tplcard--selected {
    border-color: var(--lk-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lk-primary) 14%, transparent);
}

.pb-tplcard-body { padding: 1rem .5rem .25rem; }

.pb-tplcard-name {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--lk-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--lk-text);
}

.pb-tplcard-tag {
    font-size: var(--lk-font-xs);
    font-weight: 600;
    color: var(--lk-primary);
    background: var(--lk-primary-light);
    padding: .1875rem .5rem;
    border-radius: 999px;
}

.pb-tplcard-desc {
    font-size: var(--lk-font-sm);
    line-height: 1.55;
    color: var(--lk-text-muted);
    margin: .5rem 0 0;
}

.pb-tplcard-check {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-top: .75rem;
    font-size: var(--lk-font-xs);
    font-weight: 600;
    color: var(--lk-primary);
}

/* ── Split: questions + live preview ── */

.pb-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    gap: 2.5rem;
    align-items: start;
}

.pb-preview-col { position: sticky; top: calc(var(--pb-sticky-top) + 5.5rem); }

.pb-preview-frame {
    border-radius: var(--lk-border-radius-lg);
    border: 1px solid var(--lk-border-color);
    background: var(--lk-surface);
    overflow: hidden;
    box-shadow: var(--lk-shadow-soft);
}

.pb-preview-chrome {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .625rem .875rem;
    border-bottom: 1px solid var(--lk-border-color);
    background: color-mix(in srgb, var(--lk-text-muted) 5%, transparent);
}

.pb-preview-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--lk-icon-muted); }

.pb-preview-url {
    margin-left: .5rem;
    font-size: var(--lk-font-2xs);
    color: var(--lk-text-muted);
    font-family: var(--lk-font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-preview-viewport {
    position: relative;
    height: 30rem;
    overflow: hidden;
}

.pb-preview-scale .lp2-page { min-height: 1500px; }

.pb-preview-scale {
    position: absolute;
    top: 0;
    left: 0;
    width: 1180px;
    transform: scale(.328);
    transform-origin: top left;
    pointer-events: none;
}

/* ── Question cards ── */

.pb-questions { display: flex; flex-direction: column; gap: 1rem; }

.pb-q {
    background: var(--lk-surface);
    border: 1px solid var(--lk-border-color);
    border-radius: var(--lk-border-radius-lg);
    padding: 1.375rem 1.5rem;
    transition: var(--lk-transition);
}

.pb-q:focus-within { border-color: color-mix(in srgb, var(--lk-primary) 45%, transparent); }

.pb-q--skipped { opacity: .55; }

.pb-q-label {
    font-family: var(--lk-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--lk-text);
    margin: 0;
}

.pb-q-help {
    font-size: var(--lk-font-sm);
    line-height: 1.5;
    color: var(--lk-text-muted);
    margin: .3125rem 0 .875rem;
}

.pb-input,
.pb-area {
    width: 100%;
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-lg);
    line-height: 1.6;
    color: var(--lk-text);
    background: var(--lk-background);
    border: 1px solid var(--lk-border-color);
    border-radius: var(--lk-border-radius);
    padding: .75rem .875rem;
    outline: none;
    resize: vertical;
    transition: var(--lk-transition);
}

.pb-input:focus,
.pb-area:focus {
    border-color: var(--lk-primary);
    background: var(--lk-surface);
    box-shadow: 0 0 0 3px var(--lk-primary-light);
}

.pb-input::placeholder,
.pb-area::placeholder { color: color-mix(in srgb, var(--lk-text-muted) 70%, transparent); }

.pb-q-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    flex-wrap: wrap;
}

.pb-q-spacer { flex: 1; }

/* ── Buttons ── */

.pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    padding: .5625rem 1rem;
    border-radius: var(--lk-border-radius);
    border: 1px solid transparent;
    font-family: var(--lk-font-sans);
    font-size: var(--lk-font-md);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--lk-transition);
}

.pb-btn:disabled { opacity: .5; cursor: not-allowed; }
.pb-btn .material-symbols-outlined { font-size: 1.125rem; }

.pb-btn--primary { background: var(--lk-primary); color: #fff; }
.pb-btn--primary:not(:disabled):hover { background: var(--lk-primary-dark); }

.pb-btn--ghost { background: transparent; color: var(--lk-text-muted); }
.pb-btn--ghost:not(:disabled):hover { background: var(--lk-nav-hover-bg); color: var(--lk-text); }

.pb-btn--outline {
    background: var(--lk-surface);
    color: var(--lk-text);
    border-color: var(--lk-border-color);
}

.pb-btn--outline:not(:disabled):hover { border-color: var(--lk-primary); color: var(--lk-primary); }

.pb-btn--ai {
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--lk-primary) 12%, transparent),
        color-mix(in srgb, var(--lk-tertiary) 12%, transparent));
    color: var(--lk-primary);
    border-color: color-mix(in srgb, var(--lk-primary) 22%, transparent);
}

.pb-btn--ai:not(:disabled):hover {
    border-color: var(--lk-primary);
    box-shadow: 0 0 0 3px var(--lk-primary-light);
}

.pb-btn--sm { padding: .375rem .75rem; font-size: var(--lk-font-sm); }

/* ── Sticky footer ── */

.pb-footer-note {
    font-size: var(--lk-font-sm);
    color: var(--lk-text-muted);
}

/* ── Identity step ── */

.pb-photo {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--lk-surface);
    border: 1px solid var(--lk-border-color);
    border-radius: var(--lk-border-radius-lg);
    margin-bottom: 1rem;
}

.pb-photo-ring {
    position: relative;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--lk-primary-background);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px dashed color-mix(in srgb, var(--lk-primary) 35%, transparent);
}

.pb-photo-ring img { width: 100%; height: 100%; object-fit: cover; }

.pb-photo-initial {
    font-family: var(--lk-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--lk-primary);
    opacity: .5;
}

.pb-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }

.pb-field { display: flex; flex-direction: column; gap: .375rem; }

.pb-field--full { grid-column: 1 / -1; }

.pb-field-label {
    font-family: var(--lk-font-display);
    font-size: var(--lk-font-xs);
    font-weight: 600;
    color: var(--lk-text-muted);
}

.pb-field-hint { font-size: var(--lk-font-xs); color: var(--lk-text-muted); }
.pb-field-hint--ok { color: var(--lk-success); }
.pb-field-hint--bad { color: var(--lk-error); }

.pb-slug-row { display: flex; align-items: center; }

.pb-slug-prefix {
    padding: .75rem .5rem .75rem .875rem;
    background: var(--lk-background);
    border: 1px solid var(--lk-border-color);
    border-right: none;
    border-radius: var(--lk-border-radius) 0 0 var(--lk-border-radius);
    font-size: var(--lk-font-md);
    color: var(--lk-text-muted);
    white-space: nowrap;
}

.pb-slug-row .pb-input { border-radius: 0 var(--lk-border-radius) var(--lk-border-radius) 0; }

/* ── Card panel (used by AI polish + settings groups) ── */

.pb-panel {
    background: var(--lk-surface);
    border: 1px solid var(--lk-border-color);
    border-radius: var(--lk-border-radius-lg);
    padding: 1.5rem;
}

.pb-panel--ai {
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--lk-primary) 6%, var(--lk-surface)),
        color-mix(in srgb, var(--lk-tertiary) 6%, var(--lk-surface)));
    border-color: color-mix(in srgb, var(--lk-primary) 20%, transparent);
}

.pb-panel-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--lk-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 .375rem;
}

.pb-panel-text { font-size: var(--lk-font-md); line-height: 1.6; color: var(--lk-text-muted); margin: 0 0 1rem; }

/* ── Editor workspace ──
   Canvas on the left, a docked tool panel on the right, an icon rail on the edge.
   The panel edits what the canvas shows, so it sits beside it instead of over it:
   no scrim, no closing on save, and collapsing it just gives the canvas the width. */

.pb-workspace {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 11rem);
    min-height: 34rem;
    background: var(--lk-surface);
    border: 1px solid var(--lk-border-color);
    border-radius: var(--lk-border-radius-2xl);
    box-shadow: var(--lk-shadow-soft);
    overflow: hidden;
}

/* ── Toolbar ── */

.pb-toolbar {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--lk-border-color);
    flex-shrink: 0;
}

.pb-toolbar-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--lk-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--lk-text);
}

.pb-toolbar-actions {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pb-tool-back, .pb-icon-btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: .625rem;
    background: none;
    color: var(--lk-text-muted);
    cursor: pointer;
    transition: var(--lk-transition);
}

.pb-tool-back:hover, .pb-icon-btn:hover { background: var(--lk-primary-light); color: var(--lk-primary); }
.pb-tool-back .material-symbols-outlined, .pb-icon-btn .material-symbols-outlined { font-size: 1.25rem; }

.pb-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .4375rem .75rem;
    border: 1px solid var(--lk-border-color);
    border-radius: .625rem;
    background: var(--lk-surface);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--lk-text);
    cursor: pointer;
    transition: var(--lk-transition);
}

.pb-tool-btn:hover:not(:disabled) { border-color: var(--lk-primary); color: var(--lk-primary); }
.pb-tool-btn:disabled { opacity: .45; cursor: default; }
.pb-tool-btn .material-symbols-outlined { font-size: 1.0625rem; }

.pb-tool-btn--save:not(:disabled) {
    border-color: var(--lk-primary);
    background: var(--lk-primary);
    color: var(--lk-text-on-primary);
}

.pb-tool-btn--save:not(:disabled):hover { background: var(--lk-primary-dark); color: var(--lk-text-on-primary); }

.pb-tool-btn--publish {
    border-color: var(--lk-secondary);
    background: var(--lk-secondary-light);
    color: #8a6d12;
}

.pb-toolbar .pb-dirty-dot { animation: zen-pulse 2s ease-in-out infinite; }

/* ── Stage ── */

.pb-stage {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 0;
}

.pb-canvas {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--lk-background);
}

.pb-canvas-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    padding: .5rem 1rem;
    background: var(--lk-primary-light);
    color: var(--lk-primary);
    font-size: var(--lk-font-sm);
    font-weight: 500;
    text-align: center;
}

.pb-canvas-hint .material-symbols-outlined { font-size: 1.0625rem; }

.pb-canvas-hint--warn {
    background: var(--lk-warning-light);
    color: #8a5a06;
}

.pb-canvas-scroll { flex: 1; overflow: auto; padding: 1.25rem; min-height: 0; }

.pb-paper {
    max-width: 74rem;
    margin: 0 auto;
    border-radius: var(--lk-border-radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 50px -30px rgba(0,0,0,.35), 0 2px 6px -2px rgba(0,0,0,.06);
}

/* ── Icon rail ── */

.pb-rail {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .5rem .375rem;
    border-left: 1px solid var(--lk-border-color);
    background: var(--lk-surface);
    order: 3;
}

.pb-rail-btn {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: .625rem;
    background: none;
    color: var(--lk-text-muted);
    cursor: pointer;
    transition: var(--lk-transition);
}

.pb-rail-btn:hover { background: var(--lk-primary-light); color: var(--lk-primary); }
.pb-rail-btn--on { background: var(--lk-primary); color: var(--lk-text-on-primary); }
.pb-rail-btn--on:hover { background: var(--lk-primary-dark); color: var(--lk-text-on-primary); }
.pb-rail-btn .material-symbols-outlined { font-size: 1.25rem; }

/* ── Docked panel ── */

.pb-panel-dock {
    display: flex;
    flex-direction: column;
    width: 23rem;
    min-height: 0;
    border-left: 1px solid var(--lk-border-color);
    background: var(--lk-surface);
    order: 2;
}

.pb-workspace--collapsed .pb-panel-dock { display: none; }

.pb-dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem .875rem .75rem 1rem;
    border-bottom: 1px solid var(--lk-border-color);
    flex-shrink: 0;
}

.pb-dock-title {
    font-size: var(--lk-font-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lk-text-muted);
}

.pb-dock-body { flex: 1; overflow-y: auto; min-height: 0; }

/* ── Accordion ── */

.pb-acc + .pb-acc { border-top: 1px solid var(--lk-border-color); }

.pb-acc-head {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .75rem 1rem;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--lk-transition);
}

.pb-acc-head:hover { background: var(--lk-primary-light); }

.pb-acc-icon { font-size: 1.125rem; color: var(--lk-text-muted); }
.pb-acc--open .pb-acc-icon { color: var(--lk-primary); }

.pb-acc-title {
    flex: 1;
    font-size: var(--lk-font-md);
    font-weight: 600;
    color: var(--lk-text);
}

.pb-acc-caret {
    font-size: 1.125rem;
    color: var(--lk-icon-muted);
    transition: transform .2s ease;
}

.pb-acc--open .pb-acc-caret { transform: rotate(180deg); }

.pb-acc-body {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    padding: .25rem 1rem 1.125rem;
    animation: zen-fadeInUp .25s ease;
}

.pb-acc-group {
    margin: .25rem 0 -.25rem;
    font-size: var(--lk-font-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lk-text-muted);
}

/* ── Guided walkthrough ── */

.pb-guide { display: flex; flex-direction: column; gap: .625rem; }

.pb-guide-top { display: flex; align-items: center; gap: .5rem; }

.pb-guide-count {
    font-size: var(--lk-font-xs);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--lk-text-muted);
}

.pb-guide-tag {
    padding: .0625rem .4375rem;
    border-radius: 999px;
    background: var(--lk-warning-light);
    color: #8a5a06;
    font-size: .625rem;
    font-weight: 700;
}

.pb-guide-track {
    height: .25rem;
    border-radius: 999px;
    background: var(--lk-border-color);
    overflow: hidden;
}

.pb-guide-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--lk-primary);
    transition: width .3s ease;
}

.pb-guide-q { margin: .375rem 0 0; font-size: var(--lk-font-md); font-weight: 600; color: var(--lk-text); }
.pb-guide-help { margin: 0; font-size: var(--lk-font-sm); line-height: 1.55; color: var(--lk-text-muted); }
.pb-guide-ai { align-self: flex-start; }

.pb-guide-nav { display: flex; align-items: center; gap: .375rem; }
.pb-guide-next { margin-left: auto; }

.pb-guide-foot {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding-top: .625rem;
    border-top: 1px solid var(--lk-border-color);
}

.pb-linkbtn {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: var(--lk-font-sm);
    font-weight: 500;
    color: var(--lk-primary);
    cursor: pointer;
}

.pb-linkbtn:hover { text-decoration: underline; }
.pb-linkbtn:disabled { color: var(--lk-text-muted); cursor: default; text-decoration: none; }

/* ── Own portrait, inside the Fotos section ── */

.pb-ownphoto { display: flex; align-items: center; gap: .875rem; }

.pb-ownphoto-ring {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--lk-primary-light);
    color: var(--lk-primary);
}

.pb-ownphoto-ring img { width: 100%; height: 100%; object-fit: cover; }
.pb-ownphoto-body { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.pb-ownphoto-actions { display: flex; gap: .375rem; margin-top: .375rem; flex-wrap: wrap; }


/* ── Palette swatches ── */

.pb-palettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; }

.pb-palette {
    padding: .5rem;
    border-radius: var(--lk-border-radius);
    border: 1px solid var(--lk-border-color);
    background: var(--lk-surface);
    cursor: pointer;
    transition: var(--lk-transition);
    text-align: center;
}

.pb-palette:hover { border-color: color-mix(in srgb, var(--lk-primary) 40%, transparent); }

.pb-palette--selected {
    border-color: var(--lk-primary);
    box-shadow: 0 0 0 2px var(--lk-primary-light);
}

.pb-palette-bar { height: 1.75rem; border-radius: .375rem; margin-bottom: .375rem; }

.pb-palette-name { font-size: var(--lk-font-2xs); font-weight: 600; color: var(--lk-text-muted); }

/* ── Small template switcher (drawer) ── */

.pb-tplmini {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .625rem .75rem;
    border-radius: var(--lk-border-radius);
    border: 1px solid var(--lk-border-color);
    background: var(--lk-surface);
    cursor: pointer;
    text-align: left;
    transition: var(--lk-transition);
    font-family: inherit;
}

.pb-tplmini + .pb-tplmini { margin-top: .5rem; }
.pb-tplmini:hover { border-color: color-mix(in srgb, var(--lk-primary) 40%, transparent); }
.pb-tplmini--selected { border-color: var(--lk-primary); box-shadow: 0 0 0 2px var(--lk-primary-light); }

.pb-tplmini-swatch {
    width: 2.25rem;
    height: 2.75rem;
    border-radius: .375rem;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.06);
}

.pb-tplmini-name { font-size: var(--lk-font-md); font-weight: 600; }
.pb-tplmini-tag { font-size: var(--lk-font-xs); color: var(--lk-text-muted); }

/* ── Workspace on small screens ──
   There is no room for a side-by-side panel on a phone, so it becomes a bottom sheet
   and the rail turns into a horizontal strip above it. */

@media (max-width: 1024px) {
    .pb-workspace { height: calc(100vh - 9rem); border-radius: var(--lk-border-radius-lg); }

    .pb-stage { grid-template-columns: minmax(0, 1fr); position: relative; }

    .pb-rail {
        flex-direction: row;
        gap: .375rem;
        overflow-x: auto;
        border-left: 0;
        border-top: 1px solid var(--lk-border-color);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

    .pb-panel-dock {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 3.25rem;
        z-index: 3;
        width: auto;
        max-height: 60%;
        border-left: 0;
        border-top: 1px solid var(--lk-border-color);
        border-radius: var(--lk-border-radius-lg) var(--lk-border-radius-lg) 0 0;
        box-shadow: 0 -12px 40px -22px rgba(0,0,0,.35);
    }

    .pb-canvas-scroll { padding: .75rem .75rem 4rem; }
    .pb-tool-label { display: none; }
    .pb-toolbar-title span:first-child { display: none; }
}

/* ── Responsive ── */

@media (max-width: 1024px) {
    .pb-split { grid-template-columns: 1fr; }
    .pb-preview-col { position: static; order: -1; }
    .pb-preview-viewport { height: 18rem; }
}

@media (max-width: 700px) {
    .pb-photo { flex-direction: column; text-align: center; }
    .pb-editor-canvas { padding: .5rem; max-height: none; }
    .pb-editor-paper { border-radius: var(--lk-border-radius); box-shadow: none; }
    .pb-palettes { grid-template-columns: repeat(2, 1fr); }

    /* Four labelled dots do not fit; the strip keeps the dots and drops the words. */
    .zen-presession-stepper { max-width: 100%; }
    .pb-page .zen-step-label { display: none; }
    .pb-page .zen-step-line { min-width: 24px; margin-bottom: 0; }
}

/* ═══════════════════════════════════════════════
   IMAGE SLOTS & GALLERY
   The templates ship with photographs; this is where they get swapped.
   ═══════════════════════════════════════════════ */

.pb-group-help {
    font-size: var(--lk-font-xs);
    line-height: 1.5;
    color: var(--lk-text-muted);
    margin: -.5rem 0 .875rem;
}

.pb-slots { display: flex; flex-direction: column; gap: .5rem; }

.pb-slot {
    display: flex;
    align-items: center;
    gap: .875rem;
    width: 100%;
    padding: .5rem;
    border: 1px solid var(--lk-border-color);
    border-radius: .75rem;
    background: var(--lk-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.pb-slot:hover { border-color: var(--lk-primary); background: var(--lk-surface-hover, transparent); }

.pb-slot-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: .5rem;
    overflow: hidden;
    background: var(--lk-surface-variant, rgba(0, 0, 0, .05));
    color: var(--lk-text-muted);
}

.pb-slot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pb-slot-body { flex: 1; min-width: 0; }

.pb-slot-name {
    display: block;
    font-size: var(--lk-font-sm);
    font-weight: 600;
    color: var(--lk-text-primary);
}

.pb-slot-help {
    display: block;
    font-size: var(--lk-font-xs);
    color: var(--lk-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-slot-caret { color: var(--lk-text-muted); font-size: 1.25rem; }

/* ── Gallery, stacked above the settings drawer ── */

.pb-picker-scrim {
    position: fixed;
    inset: 0;
    z-index: 1310;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
}

.pb-picker {
    position: fixed;
    z-index: 1311;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(52rem, calc(100vw - 2rem));
    max-height: min(40rem, calc(100vh - 3rem));
    display: flex;
    flex-direction: column;
    background: var(--lk-surface);
    border: 1px solid var(--lk-border-color);
    border-radius: 1.25rem;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.pb-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--lk-border-color);
}

.pb-picker-title {
    margin: 0;
    font-size: var(--lk-font-md);
    font-weight: 700;
    color: var(--lk-text-primary);
}

.pb-picker-help {
    margin: .25rem 0 0;
    font-size: var(--lk-font-xs);
    color: var(--lk-text-muted);
}

.pb-picker-body { flex: 1; overflow-y: auto; min-height: 0; padding: 1.25rem; }

.pb-picker-group {
    margin: 1.25rem 0 .625rem;
    font-size: var(--lk-font-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lk-text-muted);
}

.pb-picker-body > .pb-picker-group:first-child { margin-top: .25rem; }

.pb-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    /* The body scrolls, not each grid, so rows keep their content height instead of
       being squeezed until the cards clip their own captions. */
    grid-auto-rows: max-content;
    align-content: start;
    align-items: start;
    gap: .75rem;
}

.pb-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 2px solid transparent;
    border-radius: .875rem;
    background: var(--lk-surface-variant, rgba(0, 0, 0, .04));
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, transform .15s ease;
}

.pb-pick:hover { transform: translateY(-2px); }
.pb-pick--on { border-color: var(--lk-primary); }

.pb-pick img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.pb-pick--none {
    align-items: center;
    justify-content: center;
    gap: .375rem;
    aspect-ratio: 4 / 3.55;
    color: var(--lk-text-muted);
}

.pb-pick--none .material-symbols-outlined { font-size: 1.75rem; }

.pb-pick-name {
    display: block;
    padding: .4375rem .5rem;
    font-size: var(--lk-font-xs);
    font-weight: 600;
    color: var(--lk-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-picker-foot {
    margin: 0;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--lk-border-color);
    font-size: var(--lk-font-xs);
    color: var(--lk-text-muted);
}

.pb-editor-hint--warn {
    border-color: color-mix(in srgb, #d97706 40%, transparent);
    background: color-mix(in srgb, #d97706 8%, transparent);
    color: color-mix(in srgb, #92400e 90%, var(--lk-text-primary));
}

/* ── Scheduling stand-in used by the gallery thumbnails ── */

.pb-mockdays, .pb-mocktimes { display: flex; flex-wrap: wrap; gap: .5rem; }
.pb-mocktimes { margin-top: .75rem; }

.pb-mockday {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .125rem;
    padding: .5rem .75rem;
    min-width: 3.25rem;
    border: 1px solid color-mix(in srgb, var(--lp-text, #333) 12%, transparent);
    border-radius: .75rem;
    background: var(--lp-surface, #fff);
    font-size: .875rem;
}

.pb-mockday-dow {
    font-size: .625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .65;
}

.pb-mocktime {
    padding: .4375rem .875rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--lp-primary, #333) 25%, transparent);
    color: var(--lp-primary, #333);
    font-size: .8125rem;
    font-weight: 500;
}

/* ── Template gallery, grouped by style ── */

.pb-style { margin: 2rem 0 .875rem; }
.pb-style:first-of-type { margin-top: 0; }

.pb-style-title {
    margin: 0;
    font-family: var(--lk-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--lk-text);
}

.pb-style-help {
    margin: .1875rem 0 0;
    font-size: var(--lk-font-sm);
    color: var(--lk-text-muted);
}

/* ── Guided fill ──
   Borrows the help tour's spotlight so the two feel like the same thing, but the card
   holds the field instead of only describing it. */

.pbg-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0, 0, 0, .04);
}

.pbg-ring {
    position: fixed;
    z-index: 1402;
    border-radius: .625rem;
    border: 2px solid var(--lk-primary);
    pointer-events: none;
    /* The huge spread is the dimmer: everything outside the ring darkens at once. */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45),
                0 0 0 4px color-mix(in srgb, var(--lk-primary) 25%, transparent);
    animation: pbg-pulse 1.9s ease-in-out infinite;
    transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
}

@keyframes pbg-pulse {
    0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,.45), 0 0 0 4px color-mix(in srgb, var(--lk-primary) 25%, transparent); }
    50%      { box-shadow: 0 0 0 9999px rgba(0,0,0,.45), 0 0 0 9px color-mix(in srgb, var(--lk-primary) 12%, transparent); }
}

.pbg-card {
    position: fixed;
    z-index: 1403;
    width: min(26rem, calc(100vw - 2rem));
    box-sizing: border-box;
    padding: 1.125rem 1.25rem 1.25rem;
    border-radius: var(--lk-border-radius-lg);
    background: var(--lk-surface);
    border: 1px solid var(--lk-border-color);
    box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .45);
    animation: zen-fadeInUp .28s ease;
    transition: top .28s ease, left .28s ease;
}

/* Little arrow pointing back at the ring. */
.pbg-card::before {
    content: "";
    position: absolute;
    left: 50%;
    width: .75rem;
    height: .75rem;
    background: var(--lk-surface);
    border: 1px solid var(--lk-border-color);
    transform: translateX(-50%) rotate(45deg);
}

.pbg-card--below::before { top: -.4375rem; border-right: 0; border-bottom: 0; }
.pbg-card--above::before { bottom: -.4375rem; border-left: 0; border-top: 0; }

.pbg-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }

.pbg-count {
    font-size: var(--lk-font-xs);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--lk-text-muted);
}

.pbg-tag {
    padding: .0625rem .4375rem;
    border-radius: 999px;
    background: var(--lk-warning-light);
    color: #8a5a06;
    font-size: .625rem;
    font-weight: 700;
}

.pbg-close {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: auto;
    border: 0;
    border-radius: .5rem;
    background: none;
    color: var(--lk-text-muted);
    cursor: pointer;
}

.pbg-close:hover { background: var(--lk-nav-hover-bg); color: var(--lk-text); }
.pbg-close .material-symbols-outlined { font-size: 1.125rem; }

.pbg-track { height: .25rem; border-radius: 999px; background: var(--lk-border-color); overflow: hidden; }
.pbg-fill { height: 100%; border-radius: 999px; background: var(--lk-primary); transition: width .3s ease; }

.pbg-q {
    margin: .75rem 0 .25rem;
    font-family: var(--lk-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--lk-text);
}

.pbg-help { margin: 0 0 .75rem; font-size: var(--lk-font-sm); line-height: 1.55; color: var(--lk-text-muted); }
.pbg-ai { margin-top: .625rem; }
.pbg-nav { display: flex; align-items: center; gap: .375rem; margin-top: .875rem; }
.pbg-next { margin-left: auto; }

.pb-tool-btn--guide {
    border-color: color-mix(in srgb, var(--lk-primary) 35%, transparent);
    background: var(--lk-primary-light);
    color: var(--lk-primary);
}

@media (max-width: 700px) {
    /* No room to float beside anything: the card docks to the bottom of the screen. */
    .pbg-card {
        top: auto !important;
        bottom: .625rem;
        left: .625rem !important;
        right: .625rem;
        width: auto;
        transform: none !important;
    }

    .pbg-card::before { display: none; }
}