/*
 * The homepage's animated editor mock (widget 2): the .pf-ed stage driven by
 * platform_editor.js, with its own demo palette. Split from platform.css on
 * the builder_canvas.css model; it reads the .pf tokens, so platform.css
 * loads first (platform.js imports both, in that order).
 */

/* The mock editor. Its own palette: the demo shows a tenant site, whose colors
   are deliberately not Devanta's brand tokens. */
.pf-ed {
    --pf-ed-chrome: var(--brand-rail);
    --pf-ed-gutter: var(--brand-canvas);
    --pf-ed-line: var(--brand-line);
    --pf-ed-line-soft: var(--brand-line-soft);
    --pf-ed-frame-line: #2b2b20;
    --pf-ed-frame-soft: #d8d4c8;
    --pf-ed-bar-line: #000;
    --pf-ed-preview: #f4f2ea;
    --pf-ed-sel-bg: var(--brand-lime-surface);
    --pf-ed-ok: var(--brand-lime-ink);
    --pf-ed-del: var(--brand-danger);
    --pf-ed-del-soft: var(--brand-danger-on-ink);

    /* The pending queue's amber signal on the dark bar (--hb-warn-*). */
    --pf-ed-warn-bg: #3a3418;
    --pf-ed-warn-line: #7f6f1e;
    --pf-ed-warn-ink: #e7d98a;
    --pf-ed-warn-dot: #e2c447;
    --pf-ed-warn-dot-rgb: 226, 196, 71;

    /* The mock's chrome, the half that is not the fake site below: the dark
       bar, the rail and the small print. Named here for the reason the site
       colors are, rather than inlined down the file. */
    --pf-ed-bar-ink: #cfcdc0;
    --pf-ed-bar-edge: #3a3a2b;
    --pf-ed-bar-well: #242419;
    --pf-ed-chip: #f1eee6;
    --pf-ed-rail-ink: #b6b3a4;
    --pf-ed-rail-dim: #c2bfb2;
    --pf-ed-rail-faint: #9a9789;
    --pf-ed-band-ink: #b5b0a6;
    --pf-ed-label: #6b6960;
    --pf-ed-meta: #a9a596;
    --pf-ed-caption: #5d5b52;

    --pf-ed-site-bg: #f7f5f0;
    --pf-ed-site-panel: #ffffff;
    --pf-ed-site-line: #e5e1d8;
    --pf-ed-site-ink: #201e1d;
    --pf-ed-site-muted: #6b6862;
    --pf-ed-site-faint: #8a8781;
    --pf-ed-site-acc: #a87f00;

    /* The médiathèque's photographs. Abstract gradients rather than files: the
       demo must not ship eight images to say "you have a media library". */
    --pf-ed-photo-a: linear-gradient(148deg, #b9c5a4, #6d7f56);
    --pf-ed-photo-b: linear-gradient(148deg, #e7c489, #a96a25);
    --pf-ed-photo-c: linear-gradient(148deg, #c2c8d2, #6b7484);
    --pf-ed-photo-d: linear-gradient(148deg, #9dabb5, #3f4a55);
    --pf-ed-photo-e: linear-gradient(148deg, #b7cfda, #4e7185);
    --pf-ed-photo-f: linear-gradient(148deg, #ded6c0, #8b7f52);
    --pf-ed-photo-g: linear-gradient(148deg, #cdbecb, #6d5a75);
    --pf-ed-photo-h: linear-gradient(148deg, #cdd6b3, #6a7b42);

    --pf-ed-scale: 1;
    --pf-ed-x: 620px;
    --pf-ed-y: 520px;
    --pf-ed-scroll: 0px;
    --pf-ed-drag: 0px;
    --pf-ed-modal: 0;
    --pf-ed-mlib: 0;
    --pf-ed-ripple: 1;


    color: var(--pf-ink);
}

/* Full bleed on a phone, where 20px of gutter each side costs the mock more
   legibility than it buys. Bootstrap cannot express it: this build disables the
   negative margin utilities, so `row gx-0` zeroes the gutter and this cancels
   the section's own. */
@media (max-width: 767.98px) {
    .pf-ed {
        margin-inline: calc(-1 * var(--pf-gutter));
    }
}

.pf-ed__wrap {
    position: relative;
    height: calc(640px * var(--pf-ed-scale));
}

.pf-ed__shell {
    position: absolute;
    top: 0;
    left: 0;
    width: 1120px;
    height: 640px;
    transform-origin: top left;
    transform: scale(var(--pf-ed-scale));
    border-radius: 14px;
    overflow: hidden;
    background: var(--pf-ed-gutter);
    border: 1px solid var(--pf-ed-frame-line);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.65);
    font-size: 10px;
}

/* ---- shell top bar ---- */
.pf-ed__bar {
    position: relative;
    z-index: 4;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    background: var(--pf-dark);
    color: var(--pf-cream);
    border-bottom: 1px solid var(--pf-ed-bar-line);
}

.pf-ed__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-weight: 650;
    font-size: 15px;
    letter-spacing: -0.03em;
}

.pf-ed__brand-mark {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    background: var(--pf-lime);
    color: var(--pf-ink);
    border-radius: 7px;
}

.pf-ed__brand-mark .brand-logo {
    width: 15px;
    height: 15px;
}

.pf-ed__site-name {
    padding-left: 14px;
    border-left: 1px solid var(--pf-dark-slot);
    font-size: 10.5px;
    font-weight: 600;
}

.pf-ed__ghost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--pf-font-mono);
    font-size: 8.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pf-ed-bar-ink);
    border: 1px solid var(--pf-ed-bar-edge);
    padding: 7px 12px;
    border-radius: var(--pf-pill);
}

/* ---- the pending-changes queue ----
   One verb to go live: the chip is the only publish control, and an empty
   queue renders an inert one, as .hb-queue does in the editor. */
.pf-ed__queue-idle,
.pf-ed__queue-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--pf-pill);
    white-space: nowrap;
    font-family: var(--pf-font-mono);
    font-size: 8.5px;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.pf-ed__queue-idle {
    background: var(--pf-ed-bar-well);
    border: 1px solid var(--pf-dark-slot);
    color: var(--pf-on-dark-faint);
}

.pf-ed__queue-chip {
    display: none;
    background: var(--pf-ed-warn-bg);
    border: 1px solid var(--pf-ed-warn-line);
    color: var(--pf-ed-warn-ink);
    transition: box-shadow 0.25s ease;
}

.pf-ed.is-modified .pf-ed__queue-idle {
    display: none;
}

.pf-ed.is-modified .pf-ed__queue-chip {
    display: inline-flex;
}

.pf-ed.is-pulse-queue .pf-ed__queue-chip {
    box-shadow: 0 0 0 5px rgba(var(--pf-ed-warn-dot-rgb), 0.3);
}

.pf-ed__queue-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--pf-dark-slot);
}

.pf-ed__queue-chip .pf-ed__queue-dot {
    background: var(--pf-ed-warn-dot);
}

.pf-ed__queue-chip i {
    font-size: 7px;
    opacity: 0.75;
}

.pf-ed__queue-panel {
    display: none;
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 5;
    width: 252px;
    flex-direction: column;
    padding: 12px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-ed-line);
    border-radius: 10px;
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.5);
    color: var(--pf-ink);
}

.pf-ed.is-queue .pf-ed__queue-panel {
    display: flex;
}

.pf-ed__queue-eyebrow {
    font-family: var(--pf-font-mono);
    font-size: 7.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-faint);
}

.pf-ed__queue-saved,
.pf-ed__cat-count {
    font-family: var(--pf-font-mono);
    font-size: 7.5px;
    color: var(--pf-faint);
}

.pf-ed__queue-item {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 7px;
    background: var(--pf-ed-chrome);
    border: 1px solid var(--pf-ed-line-soft);
    border-radius: 7px;
    font-size: 9px;
}

.pf-ed.is-modified .pf-ed__queue-item--hero,
.pf-ed.is-swapped .pf-ed__queue-item--moved,
.pf-ed.is-cta .pf-ed__queue-item--cta {
    display: flex;
}

.pf-ed__queue-scope {
    flex: none;
    padding: 2px 5px;
    border-radius: var(--pf-pill);
    background: var(--pf-ed-chip);
    color: var(--pf-muted);
    font-family: var(--pf-font-mono);
    font-size: 7px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pf-ed__queue-time {
    flex: none;
    font-family: var(--pf-font-mono);
    font-size: 7.5px;
    color: var(--pf-faint);
}

.pf-ed__queue-publish {
    text-align: center;
    padding: 8px 0;
    background: var(--pf-lime);
    color: var(--pf-ink);
    border-radius: 8px;
    font-family: var(--pf-font-mono);
    font-size: 9px;
    letter-spacing: 0.05em;
    font-weight: 600;
    transition: box-shadow 0.25s ease;
}

.pf-ed.is-pulse-publish .pf-ed__queue-publish {
    box-shadow: 0 0 0 5px rgba(var(--pf-lime-rgb), 0.35);
}

/* The confirmation is the editor's own toast (.app-toast): bottom, centered. */
.pf-ed__toast {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-ed-line);
    border-radius: 10px;
    font-size: 9.5px;
    color: var(--pf-ink);
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translate(-50%, 10px);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

.pf-ed.is-published .pf-ed__toast {
    opacity: 1;
    transform: translate(-50%, 0);
}

.pf-ed__toast-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--pf-lime);
}

.pf-ed__toast-link {
    font-family: var(--pf-font-mono);
    font-size: 8px;
    color: var(--pf-ed-ok);
    text-decoration: underline;
}

/* ---- one settings column, on the left ----
   It carries the page structure and the open block's form in turn, the way
   .hb-rail and .hb-rail--sheet do in the editor. */
.pf-ed__body {
    position: relative;
    height: 594px;
    display: flex;
}

.pf-ed__rail {
    width: 268px;
    flex: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pf-ed-chrome);
    border-right: 1px solid var(--pf-ed-line);
}

.pf-ed__rail-panel {
    flex: 1;
    min-height: 0;
    padding: 12px;
}

.pf-ed.is-sheet .pf-ed__rail-panel {
    display: none;
}

.pf-ed__modes {
    display: flex;
    gap: 3px;
    margin-bottom: 12px;
    padding: 3px;
    background: var(--pf-ed-gutter);
    border: 1px solid var(--pf-ed-line);
    border-radius: 9px;
}

.pf-ed__mode {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 0;
    border-radius: 6px;
    font-family: var(--pf-font-mono);
    font-size: 8px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--pf-faint);
}

.pf-ed__mode i {
    font-size: 9px;
}

.pf-ed__mode.is-on {
    background: var(--pf-ink);
    color: var(--pf-lime);
    font-weight: 600;
}

.pf-ed__rail-label {
    margin: 0;
    font-family: var(--pf-font-mono);
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-faint);
}

.pf-ed__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
    padding: 9px 0;
    border-radius: 9px;
    background: var(--pf-lime);
    color: var(--pf-ink);
    font-family: var(--pf-font-mono);
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}

.pf-ed__node,
.pf-ed__lib-item {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 8px;
    margin-bottom: 4px;
    border-radius: 8px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-ed-line-soft);
}

.pf-ed__grip {
    font-family: var(--pf-font-mono);
    font-size: 10px;
    color: var(--pf-ed-rail-ink);
    flex: none;
}

.pf-ed__node-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 6px;
    font-size: 10px;
    background: var(--pf-ed-chip);
    color: var(--pf-faint);
}

.pf-ed__node-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden;
}

.pf-ed__node-name {
    font-size: 9.5px;
    font-weight: 600;
}

.pf-ed__node-chev {
    flex: none;
    font-size: 7.5px;
    color: var(--pf-ed-rail-dim);
}

.pf-ed__node-meta {
    font-family: var(--pf-font-mono);
    font-size: 7.5px;
    color: var(--pf-ed-rail-faint);
}

.pf-ed__rail-hint {
    margin: 12px 0 0;
    font-size: 8.5px;
    line-height: 1.5;
    color: var(--pf-faint);
}

/* Block order. The rail and the canvas share it, so the reorder step is one
   class on the root; the CTA block only exists once it has been added. A seam
   carries the order of the block above it and follows it when the two swap,
   so document order alone decides which side of that block it lands on. */
.pf-ed__ins--top { order: 0; }
.pf-ed__node--hero, .pf-ed__sec--hero, .pf-ed__ins--hero { order: 1; }
.pf-ed__node--portrait, .pf-ed__sec--portrait, .pf-ed__ins--portrait { order: 2; }
.pf-ed__node--features, .pf-ed__sec--features, .pf-ed__ins--features { order: 3; }
.pf-ed__node--offer, .pf-ed__sec--offer, .pf-ed__ins--offer { order: 4; }
.pf-ed__node--testimonials, .pf-ed__sec--testimonials, .pf-ed__ins--testimonials { order: 5; }
.pf-ed__node--faq, .pf-ed__sec--faq, .pf-ed__ins--faq { order: 6; }
.pf-ed__node--cta, .pf-ed__sec--cta, .pf-ed__ins--cta { order: 7; }

.pf-ed.is-swapped .pf-ed__node--testimonials,
.pf-ed.is-swapped .pf-ed__sec--testimonials,
.pf-ed.is-swapped .pf-ed__ins--testimonials {
    order: 4;
}

.pf-ed.is-swapped .pf-ed__node--offer,
.pf-ed.is-swapped .pf-ed__sec--offer,
.pf-ed.is-swapped .pf-ed__ins--offer {
    order: 5;
}

.pf-ed__node--cta,
.pf-ed__sec--cta,
.pf-ed__ins--cta {
    display: none;
}

.pf-ed.is-cta .pf-ed__node--cta {
    display: flex;
}

.pf-ed.is-cta .pf-ed__sec--cta {
    display: block;
}

.pf-ed.is-cta .pf-ed__ins--cta {
    display: flex;
}

.pf-ed.is-dragging .pf-ed__node--testimonials {
    position: relative;
    z-index: 3;
    transform: translateY(var(--pf-ed-drag)) rotate(-0.7deg);
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.45);
}

.pf-ed.is-dragging .pf-ed__node--testimonials .pf-ed__grip {
    color: var(--pf-ed-ok);
}

/* ---- center: the canvas bar, then the preview ---- */
.pf-ed__canvas {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pf-ed-gutter);
}

.pf-ed__canvas-bar {
    flex: none;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: var(--pf-ed-preview);
    border-bottom: 1px solid var(--pf-ed-frame-soft);
}

.pf-ed__pages {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-ed-line);
    border-radius: 7px;
    font-size: 9.5px;
    font-weight: 600;
}

.pf-ed__pages i {
    font-size: 8.5px;
    color: var(--pf-faint);
}

.pf-ed__pages i:last-child {
    font-size: 7px;
}

.pf-ed__state {
    margin-right: auto;
    padding: 4px 8px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-ed-frame-soft);
    border-radius: var(--pf-pill);
    white-space: nowrap;
    font-family: var(--pf-font-mono);
    font-size: 7.5px;
    letter-spacing: 0.05em;
    color: var(--pf-muted);
}

.pf-ed__state-pending {
    display: none;
}

.pf-ed.is-modified .pf-ed__state-live {
    display: none;
}

.pf-ed.is-modified .pf-ed__state-pending {
    display: inline;
}

.pf-ed__seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--pf-ed-gutter);
    border: 1px solid var(--pf-ed-frame-soft);
    border-radius: 8px;
}

.pf-ed__seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-family: var(--pf-font-mono);
    font-size: 8px;
    letter-spacing: 0.03em;
    color: var(--pf-muted);
    transition: background 0.2s ease, color 0.2s ease;
}

.pf-ed__seg-btn i {
    font-size: 9px;
}

.pf-ed__seg-btn--icon {
    width: 22px;
    padding: 0;
}

.pf-ed__seg-zoom {
    min-width: 36px;
}

.pf-ed:not(.is-mobile) .pf-ed__seg-btn--desktop,
.pf-ed.is-mobile .pf-ed__seg-btn--mobile {
    background: var(--pf-ink);
    color: var(--pf-lime);
    font-weight: 600;
}

.pf-ed__zoom-full {
    display: none;
}

.pf-ed.is-mobile .pf-ed__zoom-fit {
    display: none;
}

.pf-ed.is-mobile .pf-ed__zoom-full {
    display: inline;
}

/* The preview is laid out at a device width and scaled to fit the desk
   (ADR-0007), so the phone keeps its own width instead of stretching the
   page across the pane. */
.pf-ed__desk {
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    padding: 14px;
    overflow: hidden;
}

.pf-ed__frame {
    width: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    background: var(--pf-surface);
    border: 1px solid var(--pf-ed-frame-soft);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.45);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The frame keeps the desk height, so its width is what sets the ratio: 244
   over the 530px desk is 393 x 852, a reference phone viewport. */
.pf-ed.is-mobile .pf-ed__frame {
    width: 244px;
}

.pf-ed__view {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--pf-ed-site-bg);
}

.pf-ed__page {
    display: flex;
    flex-direction: column;
    transform: translateY(calc(var(--pf-ed-scroll) * -1));
}

.pf-ed__flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(60% 60% at 50% 50%, rgba(var(--pf-lime-rgb), 0.55), transparent 70%);
}

.pf-ed.is-published .pf-ed__flash {
    animation: pf-ed-flash 0.9s ease-out forwards;
}

@keyframes pf-ed-flash {
    from { opacity: 0.9; }
    to { opacity: 0; }
}

.pf-ed.is-swapped .pf-ed__sec--testimonials {
    animation: pf-ed-moved 0.6s ease-out forwards;
}

@keyframes pf-ed-moved {
    from { box-shadow: inset 0 0 0 2px rgba(var(--pf-lime-rgb), 1); }
    to { box-shadow: inset 0 0 0 2px rgba(var(--pf-lime-rgb), 0); }
}

.pf-ed:not(.is-cta) .pf-ed__sec--hero,
.pf-ed.is-cta .pf-ed__sec--cta {
    outline: 2px solid var(--pf-lime);
    outline-offset: -2px;
}

/* Between two blocks: a zero-height row whose pill only shows on hover, so the
   page keeps its real rhythm (.hb-ins). The pill straddles the seam here, where
   .hb-ins__btn sits a half-height above it: align-items already centers it in a
   zero-height row, so that rule's translateY(-50%) shifts it a second time. */
.pf-ed__ins {
    position: relative;
    z-index: 3;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.pf-ed.is-seam .pf-ed__ins--faq {
    opacity: 1;
}

.pf-ed__ins-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--pf-pill);
    background: var(--pf-dark);
    color: var(--pf-lime);
    font-family: var(--pf-font-mono);
    font-size: 7.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 0 3px var(--pf-ed-site-bg);
    transition: box-shadow 0.25s ease;
}

.pf-ed.is-pulse-add .pf-ed__ins--faq .pf-ed__ins-btn {
    box-shadow: 0 0 0 3px var(--pf-ed-site-bg), 0 0 0 8px rgba(var(--pf-lime-rgb), 0.3);
}

.pf-ed__sel-label,
.pf-ed__sel-bar {
    display: none;
    position: absolute;
    z-index: 3;
}

.pf-ed:not(.is-cta) .pf-ed__sec--hero > .pf-ed__sel-label,
.pf-ed:not(.is-cta) .pf-ed__sec--hero > .pf-ed__sel-bar,
.pf-ed.is-cta .pf-ed__sec--cta > .pf-ed__sel-label,
.pf-ed.is-cta .pf-ed__sec--cta > .pf-ed__sel-bar {
    display: flex;
}

.pf-ed__sel-label {
    align-items: center;
    gap: 4px;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    padding: 3px 7px;
    background: var(--pf-dark);
    color: var(--pf-lime);
    font-family: var(--pf-font-mono);
    font-size: 7px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 5px 5px 0 0;
    white-space: nowrap;
}

.pf-ed__sel-bar {
    top: 6px;
    right: 6px;
    gap: 2px;
    padding: 3px;
    background: var(--pf-dark);
    border-radius: 7px;
}

.pf-ed__sel-tool {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    color: var(--pf-ed-bar-ink);
    font-size: 10px;
}

.pf-ed__sel-tool--del {
    color: var(--pf-ed-del-soft);
}

/* ---- the mock tenant site inside the frame ---- */
.pf-ed__site-nav {
    order: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 24px;
    background: var(--pf-ed-site-panel);
    border-bottom: 1px solid var(--pf-ed-site-line);
}

.pf-ed__site-logo {
    font-family: 'Archivo', var(--pf-font-body);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: -0.01em;
    color: var(--pf-ed-site-ink);
}

.pf-ed__site-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pf-ed__site-link {
    font-family: var(--pf-font-mono);
    font-size: 7.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pf-ed-site-muted);
}

.pf-ed__site-link i {
    font-size: 9px;
}

.pf-ed__site-cta {
    font-family: var(--pf-font-mono);
    background: var(--pf-ed-site-acc);
    color: var(--pf-surface);
    font-size: 7px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 6px 10px;
}

.pf-ed__burger {
    display: none;
    flex-direction: column;
    gap: 3px;
    padding: 4px 2px;
}

.pf-ed__burger span {
    display: block;
    width: 13px;
    height: 1.5px;
    background: var(--pf-ed-site-ink);
}

.pf-ed.is-mobile .pf-ed__site-links {
    display: none;
}

.pf-ed.is-mobile .pf-ed__burger {
    display: flex;
}

.pf-ed__hero,
.pf-ed__portrait,
.pf-ed__offer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 26px 24px;
    background: var(--pf-ed-site-bg);
}

.pf-ed__portrait,
.pf-ed__offer {
    gap: 18px;
    padding: 24px;
    background: var(--pf-ed-site-panel);
    border-top: 1px solid var(--pf-ed-site-line);
    border-bottom: 1px solid var(--pf-ed-site-line);
}

.pf-ed__hero-text,
.pf-ed__offer-text {
    flex: 1 1 200px;
    min-width: 0;
}

.pf-ed__portrait-text {
    flex: 1 1 240px;
    min-width: 0;
}

.pf-ed__media {
    position: relative;
    border: 1px solid var(--pf-ed-site-line);
}

.pf-ed__media--wide {
    flex: 1 1 170px;
    min-width: 0;
    aspect-ratio: 16 / 9;
}

.pf-ed__media--tall {
    flex: 1 1 120px;
    aspect-ratio: 3 / 4;
    max-height: 150px;
}

/* The médiathèque chapter swaps the hero's photograph. Both file names ship in
   the inspector; the root's `is-photo` decides which one is current. */
.pf-ed__media--hero {
    background: var(--pf-ed-photo-a);
    transition: background 0.5s ease;
}

.pf-ed.is-photo .pf-ed__media--hero {
    background: var(--pf-ed-photo-b);
}

.pf-ed__swap--after,
.pf-ed.is-photo .pf-ed__swap--before {
    display: none;
}

.pf-ed.is-photo .pf-ed__swap--after {
    display: inline;
}

.pf-ed__site-eyebrow {
    font-family: var(--pf-font-mono);
    font-size: 7px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-ed-site-acc);
    font-weight: 600;
}

.pf-ed__hero-h {
    font-family: 'Archivo', var(--pf-font-body);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--pf-ed-site-ink);
    margin: 8px 0 0;
    min-height: 27px;
}

.pf-ed__site-p {
    font-size: 9.5px;
    line-height: 1.6;
    color: var(--pf-ed-site-muted);
    margin: 9px 0 0;
}

.pf-ed__site-p--sm {
    font-size: 8.5px;
    margin: 0;
}

.pf-ed__site-btn {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--pf-font-mono);
    background: var(--pf-ed-site-acc);
    color: var(--pf-surface);
    font-size: 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 9px 14px;
}

.pf-ed__site-btn--dark {
    background: var(--pf-ed-site-ink);
}

.pf-ed__site-h3 {
    font-family: 'Archivo', var(--pf-font-body);
    font-weight: 700;
    font-size: 15px;
    color: var(--pf-ed-site-ink);
    margin: 7px 0 2px;
}

.pf-ed__site-h3--lead {
    font-size: 16px;
    line-height: 1.15;
    margin: 7px 0 12px;
}

.pf-ed__site-role {
    font-size: 9px;
    color: var(--pf-ed-site-acc);
}

.pf-ed__fact-label {
    font-family: var(--pf-font-mono);
    font-size: 6.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pf-ed-site-faint);
}

.pf-ed__fact-value {
    font-size: 9px;
    font-weight: 600;
    color: var(--pf-ed-site-ink);
}

.pf-ed__pad {
    padding: 24px;
    background: var(--pf-ed-site-bg);
}

.pf-ed__pad--panel {
    background: var(--pf-ed-site-panel);
    border-top: 1px solid var(--pf-ed-site-line);
}

.pf-ed__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.pf-ed__step {
    border-top: 2px solid var(--pf-ed-site-ink);
    padding-top: 9px;
}

.pf-ed__step-num {
    font-family: var(--pf-font-mono);
    font-size: 7px;
    letter-spacing: 0.1em;
    color: var(--pf-ed-site-acc);
}

.pf-ed__step-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--pf-ed-site-ink);
    margin: 3px 0 4px;
}

.pf-ed__checks {
    flex: 1 1 190px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pf-ed__check {
    display: flex;
    gap: 7px;
    font-size: 9px;
    color: var(--pf-ed-site-ink);
}

.pf-ed__check::before {
    content: '✓';
    color: var(--pf-ed-site-acc);
}

.pf-ed__fine {
    font-family: var(--pf-font-mono);
    font-size: 7px;
    color: var(--pf-ed-site-faint);
    margin-top: 2px;
}

.pf-ed__quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.pf-ed__quote {
    background: var(--pf-ed-site-panel);
    border: 1px solid var(--pf-ed-site-line);
    padding: 14px;
}

.pf-ed__quote-text {
    font-size: 9px;
    line-height: 1.6;
    color: var(--pf-ed-site-ink);
    margin: 0 0 10px;
}

.pf-ed__quote-name {
    font-size: 8.5px;
    font-weight: 700;
    color: var(--pf-ed-site-ink);
}

.pf-ed__quote-role {
    display: block;
    font-family: var(--pf-font-mono);
    font-size: 7px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pf-ed-site-faint);
}

.pf-ed__faq-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--pf-ed-site-line);
    font-size: 9.5px;
    font-weight: 600;
    color: var(--pf-ed-site-ink);
}

.pf-ed__faq-row:last-child {
    border-bottom: 0;
}

.pf-ed__faq-plus {
    color: var(--pf-ed-site-acc);
}

.pf-ed__band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 24px;
    background: var(--pf-ed-site-ink);
}

.pf-ed__band-h {
    font-family: 'Archivo', var(--pf-font-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--pf-ed-site-bg);
}

.pf-ed__band-p {
    font-size: 9px;
    color: var(--pf-ed-band-ink);
    margin: 5px 0 0;
}

/* ---- the column with a block open: its form, in place of the structure.
   « Structure » is the way back, as in .hb-insp. ---- */
.pf-ed__sheet {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    background: var(--pf-surface);
}

.pf-ed.is-sheet .pf-ed__sheet {
    display: flex;
}

.pf-ed__back {
    flex: none;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 12px 14px 0;
    padding: 5px 10px;
    border: 1px solid var(--pf-ed-line);
    border-radius: var(--pf-pill);
    font-family: var(--pf-font-mono);
    font-size: 8px;
    letter-spacing: 0.05em;
    color: var(--pf-muted);
}

.pf-ed__sheet-head {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--pf-ed-line);
}

.pf-ed__sheet-heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pf-ed__sheet-eyebrow {
    font-family: var(--pf-font-mono);
    font-size: 7px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-faint);
}

.pf-ed__sheet-title {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
}

.pf-ed__sheet-title--cta,
.pf-ed.is-cta .pf-ed__sheet-title--hero {
    display: none;
}

.pf-ed.is-cta .pf-ed__sheet-title--cta {
    display: block;
}

.pf-ed__sheet-op {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--pf-ed-line);
    border-radius: 6px;
    font-size: 9px;
    color: var(--pf-muted);
}

.pf-ed__sheet-op--del {
    color: var(--pf-ed-del);
}

.pf-ed__sheet-body {
    flex: 1;
    min-height: 0;
    padding: 14px;
    overflow: hidden;
}

.pf-ed__form--cta,
.pf-ed.is-cta .pf-ed__form--hero {
    display: none;
}

.pf-ed.is-cta .pf-ed__form--cta {
    display: block;
}

.pf-ed__label {
    display: block;
    font-family: var(--pf-font-mono);
    font-size: 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pf-ed-label);
    margin: 13px 0 5px;
}

.pf-ed__label:first-child {
    margin-top: 0;
}

.pf-ed__count {
    font-size: 7.5px;
    color: var(--pf-ed-meta);
    letter-spacing: 0;
}

.pf-ed__input {
    display: block;
    background: var(--pf-surface);
    border: 1px solid var(--pf-ed-line);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 10px;
    color: var(--pf-ink);
    line-height: 1.45;
}

.pf-ed__input--area {
    line-height: 1.55;
}

.pf-ed__input--focus {
    min-height: 38px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.pf-ed.is-focused .pf-ed__input--focus {
    border-color: var(--pf-lime);
    box-shadow: 0 0 0 3px rgba(var(--pf-lime-rgb), 0.28);
}

.pf-ed__caret {
    display: none;
    width: 1.5px;
    height: 11px;
    background: var(--pf-ink);
    margin-left: 1px;
    vertical-align: -1px;
}

.pf-ed.is-typing .pf-ed__caret {
    display: inline-block;
    animation: pf-caret 0.9s steps(1, end) infinite;
}

/* The image field. Its only entry point to the médiathèque is this button, so
   the demo's chapter 2 starts here. */
.pf-ed__pick {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--pf-ed-line);
    border-radius: 8px;
}

.pf-ed__pick-thumb {
    width: 32px;
    height: 24px;
    flex: none;
    border-radius: 5px;
}

.pf-ed__pick-thumb.pf-ed__thumb--b,
.pf-ed.is-photo .pf-ed__pick-thumb.pf-ed__thumb--a {
    display: none;
}

.pf-ed.is-photo .pf-ed__pick-thumb.pf-ed__thumb--b {
    display: block;
}

.pf-ed__pick-name {
    font-family: var(--pf-font-mono);
    font-size: 8px;
    color: var(--pf-muted);
}

.pf-ed__pick-btn {
    margin-left: auto;
    flex: none;
    font-family: var(--pf-font-mono);
    font-size: 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pf-ink);
    border: 1px solid var(--pf-line-dash);
    border-radius: var(--pf-pill);
    padding: 6px 10px;
    transition: box-shadow 0.25s ease;
}

.pf-ed.is-pulse-pick .pf-ed__pick-btn {
    box-shadow: 0 0 0 5px rgba(var(--pf-lime-rgb), 0.3);
}

/* The fold stands in for the block's Espacement, Mobile and Réglages tabs. */
.pf-ed__fold {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 9px 10px;
    background: var(--pf-ed-chrome);
    border: 1px solid var(--pf-ed-line-soft);
    border-radius: 9px;
    font-size: 9.5px;
    font-weight: 600;
}

.pf-ed__fold i {
    font-size: 8px;
    color: var(--pf-faint);
}

/* ---- the two modals: block library and médiathèque ----
   Both fill the same 928x500 slot in the stage and share the head, foot and
   button chrome; only the body differs. `--pf-ed-modal` and `--pf-ed-mlib`
   drive their open/close, so the two can never be mid-transition together. */
.pf-ed__backdrop {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: rgba(23, 23, 15, 0.45);
    pointer-events: none;
    opacity: max(var(--pf-ed-modal), var(--pf-ed-mlib));
}

.pf-ed__modal {
    position: absolute;
    left: 96px;
    top: 74px;
    width: 928px;
    height: 500px;
    z-index: 9;
    flex-direction: column;
    background: var(--pf-surface);
    border: 1px solid var(--pf-ed-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}

.pf-ed__backdrop,
.pf-ed__modal {
    display: none;
}

.pf-ed__modal--lib {
    opacity: var(--pf-ed-modal);
    transform: scale(calc(0.96 + 0.04 * var(--pf-ed-modal)));
}

.pf-ed__modal--media {
    opacity: var(--pf-ed-mlib);
    transform: scale(calc(0.96 + 0.04 * var(--pf-ed-mlib)));
}

.pf-ed.is-modal .pf-ed__backdrop,
.pf-ed.is-mlib .pf-ed__backdrop {
    display: block;
}

.pf-ed.is-modal .pf-ed__modal--lib,
.pf-ed.is-mlib .pf-ed__modal--media {
    display: flex;
}

/* ---- modal chrome shared by both ---- */
.pf-ed__modal-head {
    flex: none;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--pf-ed-line);
    background: var(--pf-ed-chrome);
}

.pf-ed__modal-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 152px;
    flex: none;
}

.pf-ed__modal-title {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
}

.pf-ed__modal-count,
.pf-ed__browse-meta {
    font-family: var(--pf-font-mono);
    font-size: 7.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pf-faint);
}

.pf-ed__search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 10px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-ed-line);
    border-radius: var(--pf-pill);
}

.pf-ed__search-icon {
    font-size: 11px;
    color: var(--pf-faint);
}

.pf-ed__search-ph {
    flex: 1;
    min-width: 0;
    font-size: 9.5px;
    color: var(--pf-ed-meta);
}

.pf-ed__kbd {
    font-family: var(--pf-font-mono);
    font-size: 7px;
    letter-spacing: 0.06em;
    color: var(--pf-faint);
    border: 1px solid var(--pf-ed-line);
    border-radius: 4px;
    padding: 3px 5px;
}

.pf-ed__upload {
    flex: none;
    font-family: var(--pf-font-mono);
    font-size: 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--pf-ink);
    background: var(--pf-lime);
    border-radius: var(--pf-pill);
    padding: 8px 12px;
}

.pf-ed__modal-close {
    flex: none;
    font-size: 11px;
    color: var(--pf-faint);
}

.pf-ed__modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
}

.pf-ed__modal-foot {
    flex: none;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-top: 1px solid var(--pf-ed-line);
    background: var(--pf-ed-chrome);
}

.pf-ed__modal-keys,
.pf-ed__modal-chosen {
    font-family: var(--pf-font-mono);
    font-size: 7.5px;
    letter-spacing: 0.06em;
    color: var(--pf-faint);
}

.pf-ed__modal-keys i {
    font-size: 9px;
}

.pf-ed__modal--lib .pf-ed__modal-chosen {
    opacity: 0;
    color: var(--pf-ed-ok);
    transition: opacity 0.25s ease;
}

.pf-ed.is-picked .pf-ed__modal--lib .pf-ed__modal-chosen {
    opacity: 1;
}

/* ---- block library: category rail ---- */
.pf-ed__cats {
    width: 168px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 10px;
    border-right: 1px solid var(--pf-ed-line);
    background: var(--pf-ed-chrome);
}

.pf-ed__cats-label {
    font-family: var(--pf-font-mono);
    font-size: 7.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-faint);
    padding: 0 8px 6px;
}

.pf-ed__cat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 7px;
    border: 1px solid transparent;
}

.pf-ed__cat-name {
    flex: 1;
    min-width: 0;
    font-size: 9px;
    font-weight: 600;
}

/* One category is always current: "Tous les blocs" until the demo picks one. */
.pf-ed:not(.is-cat) .pf-ed__cat--all,
.pf-ed.is-cat .pf-ed__cat--conversion {
    background: var(--pf-dark);
    color: var(--pf-cream);
    border-color: var(--pf-dark);
}

.pf-ed:not(.is-cat) .pf-ed__cat--all .pf-ed__cat-count,
.pf-ed.is-cat .pf-ed__cat--conversion .pf-ed__cat-count {
    color: var(--pf-lime);
}

/* ---- block library: catalog ---- */
.pf-ed__catalog {
    width: 252px;
    flex: none;
    overflow: hidden;
    padding: 12px 12px 20px;
    border-right: 1px solid var(--pf-ed-line);
}

.pf-ed.is-cat .pf-ed__group:not(.pf-ed__group--conversion) {
    display: none;
}

.pf-ed__group-name {
    font-family: var(--pf-font-mono);
    font-size: 7.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pf-muted);
}

.pf-ed__group-count {
    font-family: var(--pf-font-mono);
    font-size: 7px;
    color: var(--pf-faint);
}

.pf-ed__lib-item {
    gap: 8px;
    padding: 0 9px;
    margin-bottom: 5px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.pf-ed__lib-item .pf-ed__node-name {
    font-size: 9px;
}

.pf-ed__lib-item .pf-ed__node-meta {
    font-size: 7px;
}

.pf-ed__lib-check {
    margin-left: auto;
    flex: none;
    font-size: 8px;
    color: var(--pf-ed-ok);
    opacity: 0;
}

.pf-ed.is-pv-form .pf-ed__lib-item--form,
.pf-ed.is-pv-cta .pf-ed__lib-item--cta {
    background: var(--pf-ed-sel-bg);
    border-color: var(--pf-lime);
}

.pf-ed.is-pv-form .pf-ed__lib-item--form .pf-ed__node-icon,
.pf-ed.is-pv-cta .pf-ed__lib-item--cta .pf-ed__node-icon {
    background: var(--pf-dark);
    color: var(--pf-lime);
}

.pf-ed.is-picked .pf-ed__lib-item--cta .pf-ed__lib-check {
    opacity: 1;
}

/* ---- block library: preview pane ---- */
.pf-ed__preview {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--pf-ed-gutter);
}

.pf-ed__preview-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
    padding: 0 14px;
    border-bottom: 1px solid var(--pf-ed-line);
    background: var(--pf-ed-chrome);
}

.pf-ed__preview-label {
    font-family: var(--pf-font-mono);
    font-size: 7.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pf-faint);
}

.pf-ed__preview-caption {
    display: none;
    margin-left: auto;
    font-size: 9px;
    font-weight: 600;
}

.pf-ed.is-pv-form .pf-ed__preview-caption--form,
.pf-ed.is-pv-cta .pf-ed__preview-caption--cta {
    display: block;
}

.pf-ed__stage,
.pf-ed__side-detail {
    flex: 1;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 16px;
}

.pf-ed__preview-hint {
    font-size: 9px;
    color: var(--pf-faint);
}

.pf-ed__preview-card {
    display: none;
    width: 100%;
    background: var(--pf-ed-site-bg);
    border: 1px solid var(--pf-ed-site-line);
    padding: 16px;
}

.pf-ed.is-pv-form .pf-ed__preview-card--form,
.pf-ed.is-pv-cta .pf-ed__preview-card--cta {
    display: block;
}

.pf-ed.is-pv-form .pf-ed__preview-hint,
.pf-ed.is-pv-cta .pf-ed__preview-hint {
    display: none;
}

.pf-ed__preview-card--cta {
    background: none;
    border: 0;
    padding: 0;
}

.pf-ed__mock-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.pf-ed__mock-field {
    height: 22px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-ed-site-line);
}

.pf-ed__mock-field--wide {
    grid-column: 1 / -1;
    height: 42px;
}

.pf-ed__mock-form .pf-ed__site-btn {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 2px;
}

/* ---- block library: the hovered block's card, and the confirm ---- */
.pf-ed__detail {
    flex: none;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--pf-ed-line);
    background: var(--pf-surface);
}

.pf-ed__detail-card {
    display: none;
    flex-direction: column;
    gap: 5px;
    min-height: 52px;
}

.pf-ed:not(.is-pv-form):not(.is-pv-cta) .pf-ed__detail-card--none,
.pf-ed.is-pv-form .pf-ed__detail-card--form,
.pf-ed.is-pv-cta .pf-ed__detail-card--cta {
    display: flex;
}

.pf-ed__detail-title {
    font-size: 10px;
    font-weight: 600;
}

.pf-ed__detail-desc,
.pf-ed__side-alt {
    font-size: 8.5px;
    line-height: 1.5;
    color: var(--pf-muted);
}

.pf-ed__chip {
    font-family: var(--pf-font-mono);
    font-size: 7px;
    letter-spacing: 0.05em;
    color: var(--pf-muted);
    background: var(--pf-bg);
    border: 1px solid var(--pf-ed-line);
    border-radius: var(--pf-pill);
    padding: 3px 7px;
}

.pf-ed__detail-actions,
.pf-ed__side-actions {
    display: none;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12px;
}

.pf-ed.is-picked .pf-ed__detail-actions,
.pf-ed.is-media-pick .pf-ed__side-actions {
    display: flex;
}

.pf-ed__modal-cancel,
.pf-ed__modal-confirm,
.pf-ed__modal-use {
    font-family: var(--pf-font-mono);
    font-size: 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--pf-ink);
    padding: 8px 12px;
    border-radius: var(--pf-pill);
}

.pf-ed__modal-cancel {
    border: 1px solid var(--pf-line-dash);
}

.pf-ed__modal-confirm,
.pf-ed__modal-use {
    text-align: center;
    background: var(--pf-lime);
    transition: box-shadow 0.25s ease;
}

.pf-ed.is-pulse-confirm .pf-ed__modal-confirm,
.pf-ed.is-pulse-use .pf-ed__modal-use {
    box-shadow: 0 0 0 5px rgba(var(--pf-lime-rgb), 0.35);
}

/* ---- médiathèque: the browsing grid ---- */
.pf-ed__browse {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pf-ed__browse-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 32px;
    padding: 0 16px;
    border-bottom: 1px solid var(--pf-ed-line);
    background: var(--pf-ed-chrome);
}

.pf-ed__tiles {
    flex: 1;
    min-height: 0;
    padding: 16px;
}

.pf-ed__tile-thumb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--pf-ed-line);
    border-radius: 8px;
    overflow: hidden;
}

/* The tint is what reads as "selected" at a glance; the ring alone is too quiet
   against a busy photograph. */
.pf-ed.is-media-pick .pf-ed__tile--pick .pf-ed__tile-thumb {
    border-color: var(--pf-ink);
    box-shadow: inset 0 0 0 2px var(--pf-ink);
}

.pf-ed.is-media-pick .pf-ed__tile--pick .pf-ed__tile-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--pf-lime-rgb), 0.22);
}

.pf-ed__tile-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    font-family: var(--pf-font-mono);
    font-size: 6.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pf-ed-del);
    background: var(--pf-surface);
    border: 1px solid var(--pf-ed-del-soft);
    border-radius: var(--pf-pill);
    padding: 2px 5px;
}

.pf-ed__tile-check {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 1;
    display: none;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--pf-lime);
    border: 1px solid var(--pf-ink);
    font-size: 8px;
    color: var(--pf-ink);
}

.pf-ed.is-media-pick .pf-ed__tile--pick .pf-ed__tile-check {
    display: grid;
}

.pf-ed__tile-name {
    font-family: var(--pf-font-mono);
    font-size: 7px;
    color: var(--pf-muted);
}

/* ---- médiathèque: the selected image's details ---- */
.pf-ed__side {
    width: 288px;
    flex: none;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--pf-ed-line);
    background: var(--pf-ed-chrome);
}

.pf-ed__side-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.pf-ed__side-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--pf-ed-line);
    border-radius: 50%;
    color: var(--pf-faint);
    font-size: 12px;
}

.pf-ed__side-card {
    display: none;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-self: start;
}

.pf-ed.is-media-pick .pf-ed__side-card {
    display: flex;
}

.pf-ed.is-media-pick .pf-ed__side-empty {
    display: none;
}

.pf-ed__side-preview {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--pf-ed-line);
    border-radius: 9px;
}

.pf-ed__side-title {
    font-size: 10px;
    font-weight: 600;
}

.pf-ed__side-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid var(--pf-ed-line);
}

.pf-ed__side-value {
    font-family: var(--pf-font-mono);
    font-size: 8px;
}

/* Stand-ins for the tenant's photographs, shared by the médiathèque grid, the
   detail pane and the inspector's image field. */
.pf-ed__thumb--a { background: var(--pf-ed-photo-a); }
.pf-ed__thumb--b { background: var(--pf-ed-photo-b); }
.pf-ed__thumb--c { background: var(--pf-ed-photo-c); }
.pf-ed__thumb--d { background: var(--pf-ed-photo-d); }
.pf-ed__thumb--e { background: var(--pf-ed-photo-e); }
.pf-ed__thumb--f { background: var(--pf-ed-photo-f); }
.pf-ed__thumb--g { background: var(--pf-ed-photo-g); }
.pf-ed__thumb--h { background: var(--pf-ed-photo-h); }

/* ---- the pointer that drives the demo ---- */
.pf-ed__cursor {
    color: var(--pf-dark);
    position: absolute;
    left: var(--pf-ed-x);
    top: var(--pf-ed-y);
    z-index: 20;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

.pf-ed.is-dragging .pf-ed__cursor {
    transform: scale(0.9);
}

.pf-ed__ripple {
    position: absolute;
    left: var(--pf-ed-x);
    top: var(--pf-ed-y);
    z-index: 19;
    display: none;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    border: 2px solid var(--pf-lime);
    pointer-events: none;
    opacity: calc(1 - var(--pf-ed-ripple));
    transform: scale(calc(0.25 + 1.65 * var(--pf-ed-ripple)));
}

.pf-ed.is-clicking .pf-ed__ripple {
    display: block;
}

/* ---- chapter strip: the demo's table of contents, and its only control ----
   A stacked timeline beside the mock, laid out by the Bootstrap grid in
   platform/_editor_demo.html.twig. Below that grid's breakpoint the mock is
   scaled far too small to steer, so the strip does not render at all. */
.pf-ed__chapter {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 11px 14px 13px;
    border-radius: 10px;
    text-align: left;
    font-family: var(--pf-font-body);
    font-size: 0.7rem;
    background: transparent;
    border: 1px solid var(--pf-dark-chip-line);
    color: var(--pf-on-dark-faint);
    overflow: hidden;
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.12s ease;
}

.pf-ed__chapter.is-active {
    font-weight: 600;
    background: rgba(var(--pf-lime-rgb), 0.12);
    border-color: rgba(var(--pf-lime-rgb), 0.45);
    color: var(--pf-lime-tint);
}

.pf-ed__chapter-num {
    font-family: var(--pf-font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    color: var(--pf-ed-caption);
}

.pf-ed__chapter.is-active .pf-ed__chapter-num {
    color: var(--pf-lime);
}

.pf-ed__chapter-label {
    line-height: 1.3;
    text-wrap: balance;
}

.pf-ed__chapter-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.07);
}

.pf-ed__chapter-fill {
    display: block;
    height: 100%;
    width: 0;
    background: rgba(var(--pf-lime-rgb), 0.25);
}

.pf-ed__chapter.is-active .pf-ed__chapter-fill {
    background: var(--pf-lime);
}

@media (prefers-reduced-motion: reduce) {
    /* The demo stops being a film and becomes six stills the chapter
       buttons page through (see assets/platform_editor.js). */
    .pf-ed *,
    .pf-ed *::before,
    .pf-ed *::after {
        transition: none;
        animation: none;
    }

    .pf-ed__cursor {
        display: none;
    }
}