/* ==========================================================================
   APF Canvas � focused stylesheet (cleaned + stronger built-in halo)
   Scope: <div class="apf-canvas" data-apf="common">�</div>
   ========================================================================== */

/* ---------- Canvas-local layout tokens (avoid :root pollution) ---------- */
.apf-canvas {
    --stage-sticky-top-desktop: 64px;
    --stage-sticky-top-mobile: 10px;
    --stage-sticky-z: 40;
    --apf-min-area-h: 800px;
    --apf-min-area-h-mobile: 360px;
    --canvas-max-w: 100%;
    --canvas-min-h: 440px;
    --apf-ruler-gap-bottom: 8px;
    --apf-ruler-gap-right: 8px;
    --apf-preview-ppi: 42;
    /* Progress overlay theme hooks (consumes your tokens; safe fallbacks) */
    --apf-pg-bg: color-mix(in oklch, var(--surface-2, rgba(20,24,28,.8)) 94%, transparent);
    --apf-pg-border: color-mix(in oklch, var(--border, rgba(255,255,255,.12)) 80%, transparent);
    --apf-pg-text: var(--text-high, #f6f6f6);
    --apf-pg-accent: color-mix(in oklch, var(--ctl-c1, #6aa9ff) 90%, white 10%);
    --apf-pg-shadow: 0 2px 10px rgba(0,0,0,.25);
}

    /* ---------- Root safety ---------- */
    .apf-canvas [data-apf="common"] {
        position: relative;
    }

    /* ---------- Preview / backboard ---------- */
    .apf-canvas .mid-preview-area {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        min-height: var(--apf-min-area-h);
    }

    /* ---------- JS-sized wrapper (authoritative) ---------- */
    .apf-canvas .mid-canvas-wrapper {
        position: relative;
        isolation: isolate !important; /* predictable z-stack */
        width: var(--canvas-w, auto);
        height: var(--canvas-h, auto);
        margin-inline: auto;
        overflow: visible !important; /* rulers/labels may extend */
    }

        /* Stronger built-in halo (::before). Uses !important to defeat late overrides. */
        .apf-canvas .mid-canvas-wrapper::before,
        .apf-canvas.apf-glass .mid-canvas-wrapper::before {
            content: "" !important;
            position: absolute !important;
            inset: 0 !important;
            z-index: 0 !important;
            pointer-events: none !important;
            border-radius: var(--radius-lg, 12px) !important;
            box-shadow: 0 0 0 2px color-mix(in oklch, var(--ctl-c1, #6aa9ff) 62%, transparent), 0 0 0 3px color-mix(in oklch, var(--ctl-c1, #6aa9ff) 36%, transparent), 0 0 140px 46px color-mix(in oklch, var(--ctl-c1, #6aa9ff) 34%, transparent) !important;
            opacity: .98 !important;
            filter: saturate(120%) !important;
        }

    /* ---------- Host canvas ---------- */
    .apf-canvas .mid-canvas {
        position: relative;
        width: var(--canvas-w, 100%);
        height: var(--canvas-h, 100%);
        border-radius: var(--radius-lg, 12px);
        background-color: var(--surface, #fff);
        background-image: none;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        contain: layout paint;
    }

        .apf-canvas .mid-canvas.is-expanded {
            box-shadow: 0 10px 24px rgba(0,0,0,.14), inset 0 0 0 1px var(--border-strong, rgba(255,255,255,.12));
        }

    /* ---------- Stage layers ---------- */
    .apf-canvas .mid-stage {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform-origin: center center;
        transform: translate(var(--offset-x,0), var(--offset-y,0)) scale(var(--scale,1));
        z-index: 10;
    }

        .apf-canvas .mid-stage > .mid-preview-bg,
        .apf-canvas .mid-stage > .mid-preview-img,
        .apf-canvas .mid-stage > canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        .apf-canvas .mid-stage > .apf-underlay,
        .apf-canvas .mid-stage > .mid-overlay {
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            opacity: 0;
            display: none;
        }

        .apf-canvas .mid-stage > .apf-underlay {
            z-index: 30;
        }

        .apf-canvas .mid-stage > .mid-overlay {
            z-index: 50;
            mix-blend-mode: normal;
        }

        .apf-canvas .mid-stage > .mid-preview-img {
            object-fit: var(--fit, contain);
            object-position: var(--anchor, center);
            pointer-events: none;
            z-index: 40;
        }

        .apf-canvas .mid-stage .mid-preview-img[data-empty="1"] {
            visibility: hidden;
        }

    /* ---------- Rulers / dimension labels ---------- */
    .apf-canvas .dim-label {
        position: absolute;
        inset: auto;
        z-index: 9999;
        pointer-events: none;
        color: var(--text-high);
    }

        .apf-canvas .dim-label.dim-width::before,
        .apf-canvas .dim-label.dim-height::before {
            content: attr(data-text);
            position: absolute;
            white-space: nowrap;
            font: 600 12px/1.2 var(--font-ui, system-ui, sans-serif);
            background-color: var(--surface, #fff);
            color: var(--text, #111);
            border: 1px solid var(--border);
            border-radius: var(--radius, 6px);
            padding: 4px 6px;
            box-shadow: 0 1px 2px rgba(0,0,0,.08);
        }

        .apf-canvas .dim-label.dim-width::before {
            left: var(--dim-label-x);
            top: calc(100% + var(--apf-ruler-gap-bottom));
            transform: translate(-50%,0);
        }

        .apf-canvas .dim-label.dim-height::before {
            top: var(--dim-label-y);
            left: calc(100% + var(--apf-ruler-gap-right));
            transform: translate(0,-50%);
        }

    /* ---------- Canvas-local badges / pills ---------- */
    .apf-canvas .apf-badge-root,
    .apf-canvas .apf-badge-layers {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 150;
    }

    .apf-canvas .product-pill {
        position: absolute;
        z-index: 240;
        pointer-events: auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font: 600 9px/1 var(--font-ui, system-ui, sans-serif);
        padding: 6px 8px;
        border-radius: 999px;
        color: var(--text-high);
        background: var(--overlay-bg, rgba(17,17,17,.75));
        backdrop-filter: blur(4px) saturate(120%);
        box-shadow: 0 1px 3px rgba(0,0,0,.25);
    }
    /* Keep badge layers above stage/overlay but below toolbars */
    .apf-canvas .apf-badge-root {
        z-index: 280 !important;
    }

    .apf-canvas .apf-badge-layers {
        z-index: 281 !important;
        position: absolute;
        inset: 0;
    }

    /* ---------- Canvas toolbars ---------- */
    .apf-canvas .apf-canvas-toolbar,
    .apf-canvas .mid-canvas-toolbar {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 260;
        display: flex;
        gap: 6px;
        pointer-events: auto;
    }

        .apf-canvas .apf-canvas-toolbar button,
        .apf-canvas .mid-canvas-toolbar button {
            padding: 6px 8px;
            border-radius: var(--radius, 8px);
            font: 600 12px/1 var(--font-ui, system-ui, sans-serif);
            border: 1px solid var(--border);
            background: var(--surface-2, rgba(20,24,28,.8));
            color: var(--text-high);
            backdrop-filter: blur(6px);
            transition: transform .06s ease, border-color .2s ease, background .2s ease;
        }

            .apf-canvas .apf-canvas-toolbar button:hover,
            .apf-canvas .mid-canvas-toolbar button:hover {
                transform: translateY(-1px);
                border-color: var(--focus-ring);
                background: var(--surface-hover, rgba(30,34,38,.85));
            }

/* ---------- Dark-mode assist ---------- */
@media (prefers-color-scheme: dark) {
    .apf-canvas .mid-canvas {
        background-color: var(--surface-0, #0f1114);
    }

    .apf-canvas .product-pill {
        background: var(--overlay-bg, rgba(24,26,30,.8));
    }

    .apf-canvas {
        --apf-pg-bg: color-mix(in oklch, var(--surface-2, #12161a) 96%, transparent);
        --apf-pg-border: color-mix(in oklch, var(--border, rgba(255,255,255,.14)) 80%, transparent);
        --apf-pg-text: var(--text-high, #f0f3f6);
        --apf-pg-accent: color-mix(in oklch, var(--ctl-c1, #7ab1ff) 96%, white 4%);
    }
}

/* ========================================================================== 
   MOBILE � sticky backboard; JS owns canvas height
   ========================================================================== */
@media (max-width:900px) {
    .apf-canvas .apf-stage--sticky {
        display: block;
        position: static;
        top: auto;
        height: auto;
        scroll-margin-top: calc(var(--stage-sticky-top-mobile,10px) + 10px);
    }

        .apf-canvas .apf-stage--sticky > .mid-preview-area {
            position: sticky;
            top: var(--stage-sticky-top-mobile, 10px);
            z-index: var(--stage-sticky-z, 40);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: var(--apf-min-area-h-mobile) !important;
            height: auto !important;
            margin: 0;
            padding: 0;
            width: 100%;
        }

    .apf-canvas .mid-canvas-wrapper {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin-inline: auto;
        padding: 0;
        overflow: visible;
    }

    .apf-canvas .mid-canvas {
        width: 100% !important;
        height: var(--canvas-h, auto) !important;
        aspect-ratio: var(--canvas-ar, auto);
        min-height: 0 !important;
        max-height: none !important;
        border-radius: var(--radius-lg, 12px);
        contain: layout paint;
    }
}

/* ---------- Safety floors ---------- */
.apf-canvas .mid-preview-area {
    min-width: 280px;
    min-height: var(--apf-min-area-h, 440px);
}

@media (max-width:900px) {
    .apf-canvas .apf-stage--sticky .mid-preview-area {
        min-height: var(--apf-min-area-h-mobile, 360px);
    }
}

/* ========================================================================== 
   APF Canvas � Progress Overlay & Snippets (inside canvas)
   ========================================================================== */

/* Base: hidden by default */
.apf-canvas .mid-canvas-wrapper > .apf-progress-overlay,
.apf-canvas .mid-canvas-wrapper > .apf-progress-overlay .apf-progress-box {
    display: none;
    visibility: hidden;
    opacity: 0;
}

/* Overlay container (inside canvas) */
.apf-canvas .mid-canvas-wrapper > .apf-progress-overlay {
    position: absolute;
    inset: 0;
    z-index: 282;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: .75rem;
}

/* Box */
.apf-canvas .apf-progress-box {
    pointer-events: auto;
    background: var(--apf-pg-bg);
    border: 1px solid var(--apf-pg-border);
    border-radius: 12px;
    padding: .6rem .85rem;
    min-width: 240px;
    max-width: min(520px, 92%);
    box-shadow: var(--apf-pg-shadow);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    color: var(--apf-pg-text);
}

/* Lines */
.apf-canvas .apf-progress-line {
    display: block;
    font: 600 12px/1.25 var(--font-ui, system-ui, sans-serif);
    color: var(--apf-pg-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(6px);
    animation: apfLineFadeIn .38s ease forwards;
}

    .apf-canvas .apf-progress-line:first-child {
        color: var(--apf-pg-accent);
    }

    .apf-canvas .apf-progress-line:nth-child(1) {
        animation-delay: 0ms;
    }

    .apf-canvas .apf-progress-line:nth-child(2) {
        animation-delay: 160ms;
    }

    .apf-canvas .apf-progress-line:nth-child(3) {
        animation-delay: 320ms;
    }

    .apf-canvas .apf-progress-line:nth-child(4) {
        animation-delay: 480ms;
    }

    .apf-canvas .apf-progress-line:nth-child(5) {
        animation-delay: 640ms;
    }

    .apf-canvas .apf-progress-line:nth-child(6) {
        animation-delay: 800ms;
    }

    .apf-canvas .apf-progress-line:nth-child(7) {
        animation-delay: 960ms;
    }

    .apf-canvas .apf-progress-line:nth-child(8) {
        animation-delay: 1120ms;
    }

    .apf-canvas .apf-progress-line:nth-child(9) {
        animation-delay: 1280ms;
    }

    .apf-canvas .apf-progress-line:nth-child(10) {
        animation-delay: 1440ms;
    }

    .apf-canvas .apf-progress-line.show {
        animation: apfLineFadeIn .38s ease forwards, apfPulse 1.6s ease-in-out .38s infinite alternate;
    }

/* Visibility gate: while generating */
.apf-canvas.is-generating .mid-canvas-wrapper > .apf-progress-overlay,
.apf-canvas[data-generating="1"] .mid-canvas-wrapper > .apf-progress-overlay,
.mid-canvas-wrapper.is-generating > .apf-progress-overlay,
.mid-canvas-wrapper[data-generating="1"] > .apf-progress-overlay {
    display: flex;
    visibility: visible;
    opacity: 1;
}

/* Keyframes */
@keyframes apfLineFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes apfPulse {
    from {
        opacity: 1;
    }

    to {
        opacity: .75;
    }
}

/* ---------- mobile sticky helper (one-time) ---------- */
.apf-main > .apf-col.apf-preview,
[data-apf="common"] > .apf-main > .apf-col.apf-stagecol {
    width: 100%;
    min-width: 0;
    position: sticky;
    z-index: var(--stage-sticky-z, 40);
}

[data-apf="common"] .mid-preview-area {
    width: 100%;
    min-width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* --- Do not let the stage clip children --- */
.apf-canvas .mid-stage {
  overflow: visible !important; /* ensure labels/pills can overhang the masked image */
  z-index: 20;                  /* keep below overlays, badge layers and pills */
}

/* --- Maintain the halo BELOW everything interactive --- */
.apf-canvas .mid-canvas-wrapper::before {
  z-index: 0 !important; /* stays under stage/image/pills/toolbars */
}

/* --- Image & overlay ordering (reference) ---
   base canvas bits <= 50, badge/pills >= 280, toolbars >= 300 */
.apf-canvas .mid-stage > .mid-preview-img      { z-index: 40; }
.apf-canvas .mid-stage > .apf-underlay         { z-index: 30; }
.apf-canvas .mid-stage > .mid-overlay          { z-index: 50; }

/* --- Badge root/layers sit above masked image & overlays --- */
.apf-canvas .apf-badge-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 320 !important;
}
.apf-canvas .apf-badge-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 321 !important;
}

/* --- Product pill (and other pills) above badges & overlays --- */
.apf-canvas .product-pill,
.apf-canvas .apf-pill {
  position: absolute;
  z-index: 340 !important;     /* higher than badge layers */
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 9px/1 var(--font-ui, system-ui, sans-serif);
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--text-high);
  background: var(--overlay-bg, rgba(17,17,17,.75));
  backdrop-filter: blur(4px) saturate(120%);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* --- Toolbars sit above everything interactive inside the canvas --- */
.apf-canvas .apf-canvas-toolbar,
.apf-canvas .mid-canvas-toolbar {
  z-index: 360 !important; /* above pills */
}

/* --- Progress overlay: keep beneath pills/toolbars, above image --- */
.apf-canvas .mid-canvas-wrapper > .apf-progress-overlay {
  z-index: 300 !important;
}

/* --- Hard reset: never let external masks clip our UI layers --- */
.apf-canvas .apf-badge-root,
.apf-canvas .apf-badge-layers,
.apf-canvas .product-pill,
.apf-canvas .apf-pill,
.apf-canvas .apf-canvas-toolbar,
.apf-canvas .mid-canvas-toolbar {
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}
/* --- Do not let the stage clip children --- */
.apf-canvas .mid-stage {
  overflow: visible !important; /* ensure labels/pills can overhang the masked image */
  z-index: 20;                  /* keep below overlays, badge layers and pills */
}

/* --- Maintain the halo BELOW everything interactive --- */
.apf-canvas .mid-canvas-wrapper::before {
  z-index: 0 !important; /* stays under stage/image/pills/toolbars */
}

/* --- Image & overlay ordering (reference) ---
   base canvas bits <= 50, badge/pills >= 280, toolbars >= 300 */
.apf-canvas .mid-stage > .mid-preview-img      { z-index: 40; }
.apf-canvas .mid-stage > .apf-underlay         { z-index: 30; }
.apf-canvas .mid-stage > .mid-overlay          { z-index: 50; }

/* --- Badge root/layers sit above masked image & overlays --- */
.apf-canvas .apf-badge-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 320 !important;
}
.apf-canvas .apf-badge-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 321 !important;
}

/* --- Product pill (and other pills) above badges & overlays --- */
.apf-canvas .product-pill,
.apf-canvas .apf-pill {
  position: absolute;
  z-index: 340 !important;     /* higher than badge layers */
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 9px/1 var(--font-ui, system-ui, sans-serif);
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--text-high);
  background: var(--overlay-bg, rgba(17,17,17,.75));
  backdrop-filter: blur(4px) saturate(120%);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* --- Toolbars sit above everything interactive inside the canvas --- */
.apf-canvas .apf-canvas-toolbar,
.apf-canvas .mid-canvas-toolbar {
  z-index: 360 !important; /* above pills */
}

/* --- Progress overlay: keep beneath pills/toolbars, above image --- */
.apf-canvas .mid-canvas-wrapper > .apf-progress-overlay {
  z-index: 300 !important;
}

/* --- Hard reset: never let external masks clip our UI layers --- */
.apf-canvas .apf-badge-root,
.apf-canvas .apf-badge-layers,
.apf-canvas .product-pill,
.apf-canvas .apf-pill,
.apf-canvas .apf-canvas-toolbar,
.apf-canvas .mid-canvas-toolbar {
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}
/* Smooth size / shape / bg token changes driven by JS or styling JSON */
.apf-canvas .mid-canvas-wrapper,
.apf-canvas .mid-canvas {
  transition:
    width .18s ease, height .18s ease,
    border-radius .18s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    background-size .18s ease,
    background-position .18s ease;
}

/* Image movement/zoom feels deliberate when fit/anchor/scale/offset change */
.apf-canvas .mid-stage > .mid-preview-img,
.apf-canvas .mid-stage,
.apf-canvas canvas.apf-contour-ants {
  transition:
    transform .18s ease,
    object-position .18s ease;
  will-change: transform;
}

/* rulers/pill nudge gracefully when canvas w/h change */
.apf-canvas .dim-label::before,
.apf-canvas .product-pill {
  transition: transform .16s ease, opacity .12s ease, left .18s ease, top .18s ease;
}

/* While JS is coalescing mutations, temporarily suppress transitions
   so there’s no mid-pass tween from partial values. We release this class
   _after_ the frame, so the final values do animate. */
.apf-canvas.apf-updating .mid-canvas-wrapper,
.apf-canvas.apf-updating .mid-canvas,
.apf-canvas.apf-updating .mid-stage,
.apf-canvas.apf-updating .mid-stage > .mid-preview-img,
.apf-canvas.apf-updating .dim-label::before,
.apf-canvas.apf-updating .product-pill {
  transition: none !important;
}
/* ========================== APF Canvas — Themed Controls ========================== */
/* Token bridge (pulls from your global aliases if present) */
.apf-canvas{
  --c1: var(--apf-accent-1, var(--ctl-c1, oklch(.78 .21 330)));
  --c2: var(--apf-accent-2, var(--ctl-c2, oklch(.84 .18 210)));
  --fg: var(--apf-text, var(--text-high, #fff));
  --fg-mid: var(--apf-text-mid, var(--text-mid, #e7e6ef));
  --bd: var(--apf-border, #ffffff22);
  --ring: var(--apf-focus, color-mix(in oklch, var(--c2) 70%, transparent));
  --ring-strong: var(--apf-focus-strong, color-mix(in oklch, var(--c2) 90%, transparent));
  --surface-2: var(--apf-surface-2, #151820);
  --surface-3: var(--apf-surface-3, #10131a);
  --r: var(--apf-radius, 10px);
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* Toolbar wrapper (top-right buttons) */
.apf-canvas :is(.apf-canvas-toolbar,.mid-canvas-toolbar){
  display:flex; gap:.4rem; padding:.25rem;
  background: linear-gradient(180deg, color-mix(in oklch, var(--surface-2) 96%, transparent), color-mix(in oklch, var(--surface-3) 96%, transparent));
  border:1px solid color-mix(in oklch, var(--bd) 100%, transparent);
  border-radius: calc(var(--r) + 4px);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Generic toolbar button (icons or text) */
.apf-canvas :is(.apf-canvas-toolbar,.mid-canvas-toolbar) button{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-width: 34px; min-height: 34px; padding:.45rem .6rem;
  font: 800 .82rem/1 var(--font-ui, Inter, system-ui);
  letter-spacing:.01em;
  color: var(--fg); background: color-mix(in oklch, var(--surface-2) 92%, transparent);
  border:1px solid color-mix(in oklch, var(--bd) 90%, transparent);
  border-radius: calc(var(--r) - 2px);
  transition: transform .12s var(--ease), filter .16s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.apf-canvas :is(.apf-canvas-toolbar,.mid-canvas-toolbar) button:hover{
  transform: translateY(-1px);
  background: color-mix(in oklch, var(--c2) 10%, var(--surface-2));
  border-color: color-mix(in oklch, var(--bd) 65%, transparent);
  box-shadow: 0 12px 26px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06);
}
.apf-canvas :is(.apf-canvas-toolbar,.mid-canvas-toolbar) button:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in oklch, var(--ring) 100%, transparent),
    0 0 0 1px var(--ring-strong) inset,
    0 10px 22px rgba(0,0,0,.32);
}

/* Active / toggled state (e.g., current fit/orientation) */
.apf-canvas :is(.apf-canvas-toolbar,.mid-canvas-toolbar) 
button[aria-pressed="true"],
.apf-canvas :is(.apf-canvas-toolbar,.mid-canvas-toolbar) 
button.is-active{
  background: linear-gradient(135deg, color-mix(in oklch, var(--c1) 34%, transparent), color-mix(in oklch, var(--c2) 34%, transparent));
  border-color: color-mix(in oklch, var(--c2) 55%, #ffffff22);
  color: var(--fg);
  filter: saturate(1.06);
}

/* Compact icon sizing if SVGs exist */
.apf-canvas :is(.apf-canvas-toolbar,.mid-canvas-toolbar) button svg{
  width: 16px; height: 16px; opacity:.95; flex:0 0 16px;
}

/* ======================= Segmented “pill” groups ======================= */
/* If your fit/orientation controls render as a cluster, normalize them: */
.apf-canvas .apf-seg{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid color-mix(in oklch, var(--bd) 95%, transparent);
  border-radius: 999px; overflow:hidden;
  background: linear-gradient(180deg, color-mix(in oklch, var(--surface-2) 96%, transparent), color-mix(in oklch, var(--surface-3) 96%, transparent));
  box-shadow: 0 6px 16px rgba(0,0,0,.28), inset 0 0 0 1px #ffffff08;
}

/* Make segments equal width when laid out horizontally */
.apf-canvas .apf-seg > button{
  flex:1 1 0; min-width: 44px;
  border:0; border-right:1px solid color-mix(in oklch, var(--bd) 70%, transparent);
  border-radius:0; padding:.5rem .7rem;
  font: 800 .8rem/1 var(--font-ui, Inter, system-ui);
  color: var(--fg-mid);
  background: transparent;
}
.apf-canvas .apf-seg > button:last-child{ border-right:0; }

/* Hover/active inside segments */
.apf-canvas .apf-seg > button:hover{
  background: color-mix(in oklch, var(--c2) 12%, transparent);
  color: var(--fg);
}
.apf-canvas .apf-seg > button[aria-pressed="true"],
.apf-canvas .apf-seg > button.is-active{
  background: linear-gradient(135deg, color-mix(in oklch, var(--c1) 30%, transparent), color-mix(in oklch, var(--c2) 28%, transparent));
  color:#fff;
}

/* If your fit/orientation buttons carry data-attributes, catch them too */
.apf-canvas :is([data-fit],[data-anchor],[data-orient]){
  /* piggy-back on the same look */
}

/* ======================= In-canvas floating pills ======================= */
.apf-canvas :is(.apf-pill,.product-pill){
  color: var(--fg);
  background: linear-gradient(180deg, color-mix(in oklch, var(--surface-2) 94%, transparent), color-mix(in oklch, var(--surface-3) 94%, transparent));
  border:1px solid color-mix(in oklch, var(--bd) 100%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 18px rgba(0,0,0,.35);
  backdrop-filter: blur(8px) saturate(120%);
}
.apf-canvas :is(.apf-pill,.product-pill)[data-variant="accent"]{
  background: linear-gradient(135deg, color-mix(in oklch, var(--c1) 32%, transparent), color-mix(in oklch, var(--c2) 32%, transparent));
  border-color: color-mix(in oklch, var(--c2) 55%, #ffffff22);
}

/* Subtle glow when hovering a movable pill */
.apf-canvas :is(.apf-pill,.product-pill):hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 26px rgba(0,0,0,.45);
}