/* Demos on real example sites (public/js/demo.mjs): frames, overlay, browser tabs, custom-tab states and walkthrough
   controls. Loaded last; it settles the older demo layers (landing, refinement, showcase, product-fidelity, composition).
   Only Browser Extractor tokens are used here: each example site styles itself inside its own frame. */

/* The site fills the window and scrolls inside its own frame. */
.demo-mount .reference-area{position:relative;overflow:hidden!important;background:#fff!important}
.demo-mount .reference{position:absolute;inset:0;height:auto;min-height:0!important;max-width:none!important;padding:0!important;background:#fff!important;background-image:none!important;container-type:normal}
.demo-mount .site-frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:#fff;color-scheme:normal}
.demo-mount .site-frame.is-waiting{visibility:hidden}
.demo-mount[data-animation] .site-frame{pointer-events:none}
.demo-mount[data-site=cadence] .reference,.demo-mount[data-site=cadence] .site-frame{background:#0A0B0F!important}
.demo-mount.is-inspecting .reference{cursor:crosshair}

/* Hover and selection, drawn over the frame like the extension's own overlay. */
.frame-overlay{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.frame-overlay i{position:absolute;left:0;top:0;opacity:0;border-radius:2px;transition:opacity var(--motion-state,160ms) var(--ease-fluid,ease)}
.frame-overlay i.is-on{opacity:1}
.frame-overlay .ov-hover{outline:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.frame-overlay .ov-select{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 9999px rgba(10,10,10,.06)}
[data-animation] .frame-overlay i{transition:opacity var(--motion-state,160ms),transform 520ms var(--ease-enter,ease),width 520ms var(--ease-enter,ease),height 520ms var(--ease-enter,ease)}
@media(prefers-reduced-motion:reduce){.frame-overlay i{transition:none!important}}

/* Toolbar: bottom centre of the site area, wherever the panel is. */
.demo-mount .reference-area>.demo-toolbar{top:auto!important;bottom:24px!important;left:50%!important;transform:translateX(-50%)!important;transition:opacity var(--motion-state,160ms)}
.demo-mount[data-custom] .demo-toolbar .tool[data-tool]{opacity:.45}
.tool-note{position:absolute;left:50%;bottom:92px;z-index:12;width:max-content;max-width:min(420px,calc(100% - 32px));margin:0;padding:var(--space-2) var(--space-3);transform:translateX(-50%);border:1px solid var(--border-standard);border-radius:var(--radius-control);background:var(--surface-elevated);box-shadow:var(--shadow-floating);font-size:var(--text-xs);line-height:1.5;color:var(--text-primary);text-align:center;animation:panel-arrive var(--motion-panel,220ms) var(--ease-enter,ease)}
.inspector-foot{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-standard)}
.inspector-foot .panel-button{width:auto!important;margin:0!important;padding-inline:var(--space-3)}
.inspector-foot span{margin-left:auto;font-size:var(--text-xs);color:var(--text-muted)}

/* Animated chapters: the cursor shows only while it has somewhere to point. */
.demo-mount[data-animation] .sim-cursor{position:absolute;left:0;top:0}
.demo-mount[data-animation] .sim-cursor:not(.is-on){opacity:0!important}
.demo-mount[data-animation] .sim-cursor.is-instant{transition:none!important}
@media(prefers-reduced-motion:reduce){[data-animation] .sim-cursor{display:block!important;transition:none!important}}
.demo-mount[data-animation][data-paused] .product-window{filter:saturate(.85)}

/* Walkthrough controls sit outside the inert window. Only the window ignores the pointer (wheel and touch reach the page). */
.demo-mount[data-animation]{pointer-events:auto}
.demo-mount[data-animation] .product-window{pointer-events:none}
.demo-steps{position:relative;display:flex;gap:var(--space-1);margin-top:var(--space-2);padding-top:28px} /* the step's title sits in this padding, so it never covers the demo or moves the page */
.demo-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* each step is a real button: a 3px bar inside a taller hit area (44px on touch) */
.demo-seg{flex:1 1 0;min-width:0;display:grid;align-items:center;height:28px;padding:0;border:0;background:none;cursor:pointer;}
.demo-seg i{display:block;height:3px;overflow:hidden;border-radius:var(--radius-full);background:var(--border-standard);transition:height var(--transition-fast),background-color var(--transition-fast)}
.demo-seg.is-current i{height:5px;background:var(--border-strong)}
.demo-seg:hover i,.demo-seg:focus-visible i{height:5px;background:var(--border-strong)}
.demo-seg:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--radius-sm)}
.demo-seg b{display:block;width:100%;height:100%;border-radius:inherit;background:var(--border-selected);transform-origin:left;transform:scaleX(0);transition:background-color var(--transition-fast)}
.demo-seg.is-current b{background:var(--accent)}
@media(pointer:coarse){.demo-seg{height:44px}}
@media(max-width:600px){.demo-steps{gap:0;padding-top:48px}.demo-seg i{margin-inline:1px}
  /* phones: the step's name is a plain caption above the bar (two lines reserved), not a chip over its segment */
  .demo-steps .demo-tip{left:0!important;width:100%;white-space:normal;border:0;background:none;padding:0;color:var(--text-secondary);font-size:var(--text-sm);line-height:1.4}} /* phones: equal targets, and two lines reserved for the name */
.demo-tip,.demo-hover{position:absolute;top:0;left:0;max-width:100%;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);line-height:1.4;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity var(--transition-fast),transform var(--transition-fast),left 240ms var(--ease-fluid)}
.demo-tip.is-on,.demo-hover.is-on{opacity:1;transform:none}
.demo-tip b,.demo-hover b{margin-inline-end:var(--space-1);font:inherit;font-family:var(--font-mono)}
/* the current step: an accent chip, always on its own segment */
.demo-tip{z-index:4;border:1px solid var(--border-selected);background:var(--surface-selected-subtle);color:var(--text-primary)}
.demo-tip b{color:var(--accent)}
/* another step, on hover or focus: a plain solid tooltip above the chip, pointing at its segment */
.demo-hover{z-index:6;max-width:none;transform:translateY(3px);overflow:visible;border:1px solid var(--border-strong,var(--border-glass));background:var(--surface-base);color:var(--text-secondary);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.demo-hover::after{content:'';position:absolute;left:var(--point,50%);bottom:-4px;width:6px;height:6px;margin-left:-3px;background:inherit;border:inherit;border-width:0 1px 1px 0;transform:rotate(45deg)}
.demo-hover b{color:var(--text-muted)}
@media(prefers-reduced-motion:reduce){.demo-tip,.demo-hover{transition:none}}
/* the counter leads the bar; its width is fixed so the segments never shift as the number changes */
.demo-count{flex:none;display:flex;align-items:center;min-width:5ch;padding-inline:var(--space-2);font:var(--text-xs) var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap}
.demo-count b{font-weight:500;color:var(--accent)}
@media(max-width:480px){.demo-count{min-width:2ch;padding-inline:var(--space-1)}.demo-count span{display:none}} /* phones: the number alone, so twelve steps keep wide targets */
/* passive on touch: no tap targets, a slim bar */
.demo-steps.is-passive .demo-seg{pointer-events:none;cursor:default;height:12px}
/* The unseen second copy a jump builds: laid out and painted like the shown one (so it loads, measures and samples the same), but placed off screen */
.demo-mount[data-animation]{position:relative;isolation:isolate}
.demo-slot.is-buffer{position:absolute;top:0;left:0;right:0;z-index:-1;pointer-events:none}

/* Responsive view: real frames of a scriptless snapshot. */
.demo-mount .comparison-screen{position:relative;overflow:hidden!important}
.demo-mount .device-frame{position:absolute;left:0;top:0;display:block;border:0;background:#fff;transform-origin:top left}
.demo-mount[data-animation] .device-frame{pointer-events:none}
.demo-mount .device-preview.device-active>span{color:var(--accent)}
.demo-mount .device-preview.device-active .comparison-screen{box-shadow:0 0 0 2px var(--accent),var(--shadow-floating)}
.responsive-note{margin:0;padding:0 28px 20px;font-size:var(--text-xs);color:var(--text-muted)}
.demo-mount .responsive-comparison:not([hidden]){position:absolute;inset:0;z-index:2;overflow:auto;background:var(--surface-base)}
.demo-mount .device-trio{align-items:start}

/* Playground: a browser with tabs and an address bar. The site area fills the window; the AI and Analysis panels
   take a column beside it (a bottom sheet on narrow screens); the inspector floats over it. */
.demo-mount:not([data-animation]) .demo-layout{display:grid!important;position:relative;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;height:760px!important;min-height:0!important}
.demo-mount:not([data-animation])[data-surface=sidebar][data-panel=open] .demo-layout{grid-template-columns:minmax(0,1fr) min(440px,46%)!important}
.demo-mount:not([data-animation]) .reference-area{grid-row:1;height:100%!important;min-height:0!important;max-height:none!important;padding:0!important}
.demo-mount:not([data-animation])[data-surface=sidebar] .demo-layout>aside.property-panel{position:relative!important;inset:auto!important;grid-row:1;height:100%!important;max-height:none!important;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-top:0!important;border-left:1px solid var(--border-glass)!important}
.demo-mount:not([data-animation])[data-surface=sidebar] .property-panel .panel-body{flex:1;min-height:0;overflow:auto}
.playground .browser-tabstrip{gap:var(--space-3)}
.browser-tabs{display:flex;align-items:flex-end;gap:2px;min-width:0;height:100%;overflow-x:auto;scrollbar-width:none}
.browser-tab-wrap{position:relative;display:flex;flex:0 1 210px;min-width:0}
.demo-mount .browser-tab{flex:1;width:auto;min-width:0;height:32px;padding:0 var(--space-3);border:0;border-radius:8px 8px 0 0;background:transparent;color:var(--text-secondary);font:500 var(--text-xs)/1 var(--font-sans);text-align:left;cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast)}
.demo-mount .browser-tab:hover{background:#ffffff0a;color:var(--text-primary)}
.browser-tab-wrap.is-active .browser-tab{background:#202020;color:var(--text-primary)}
.demo-mount .browser-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.browser-favicon{flex-shrink:0;width:16px;height:16px;border-radius:4px}
.browser-favicon .be-icon{width:14px;height:14px}
.browser-tab-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser-tab-kind{margin-left:auto;padding-left:var(--space-2);font-size:10px;color:var(--text-muted);white-space:nowrap}
.browser-tab-wrap:has([data-close-tab]) .browser-tab{padding-right:34px}
.browser-tab-close{position:absolute;right:6px;top:50%;display:grid;place-items:center;width:24px;height:24px;margin-top:-12px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-muted);cursor:pointer}
.browser-tab-close:hover{background:#ffffff14;color:var(--text-primary)}
.browser-tab-close .be-icon{width:14px;height:14px}
.browser-newtab{display:grid;place-items:center;flex-shrink:0;align-self:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--text-secondary);cursor:pointer}
.browser-newtab:hover{background:#ffffff0f;color:var(--text-primary)}
.browser-newtab[aria-disabled=true]{opacity:.4;cursor:not-allowed}
.browser-newtab:focus-visible,.browser-tab-close:focus-visible,.browser-open:focus-visible,.browser-go:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.demo-mount form.browser-url{flex:1;padding:0 4px 0 12px;transition:border-color var(--transition-fast)}
.demo-mount form.browser-url:focus-within{border-color:var(--accent)}
.browser-url input{flex:1;min-width:0;height:30px;padding:0;border:0;outline:0;background:transparent;color:var(--text-primary);font:inherit}
.browser-url input::placeholder{color:var(--text-muted)}
.browser-url input[aria-invalid=true]{color:var(--text-primary)}
.browser-go{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-secondary);cursor:pointer}
.browser-go:hover{background:#ffffff0f;color:var(--text-primary)}
.browser-go .be-icon,.browser-open .be-icon{width:16px;height:16px}
.browser-open{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:6px;color:var(--text-secondary)}
.browser-open:hover{background:#ffffff0a;color:var(--text-primary)}
.browser-open[aria-disabled=true]{opacity:.35;pointer-events:none}
.browser-error{margin:0;padding:var(--space-2) var(--space-4);border-top:1px solid var(--border-standard);background:color-mix(in srgb,var(--error,#f87171) 10%,#202020);color:var(--text-primary);font-size:var(--text-xs)}

/* The custom tab: what it can and can't do, said once and plainly. */
.custom-state{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:var(--space-6);background:var(--surface-base);color:var(--text-primary);pointer-events:none}
.custom-state>*{pointer-events:auto}
.custom-state[data-state=ready]{inset:0 0 auto;display:block;padding:0;background:none}
.custom-card{display:grid;justify-items:start;gap:var(--space-3);max-width:460px;padding:var(--space-6);border:1px solid var(--border-standard);border-radius:var(--radius-floating,16px);background:var(--surface-elevated);box-shadow:var(--shadow-floating)}
.custom-card h3{margin:0;font-size:var(--text-lg);letter-spacing:-.02em}
.custom-card p{margin:0;font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary)}
.custom-card .custom-limit{padding-left:var(--space-3);border-left:2px solid var(--accent);color:var(--text-primary)}
.custom-card--inline{display:flex;align-items:center;justify-items:center;gap:var(--space-3);box-shadow:none}
.custom-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface-selected-subtle);color:var(--accent)}
.custom-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.custom-spinner{width:18px;height:18px;border:2px solid var(--border-standard);border-top-color:var(--accent);border-radius:50%;animation:custom-spin 800ms linear infinite}
@keyframes custom-spin{to{transform:rotate(1turn)}}
.custom-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-4);border-bottom:1px solid var(--border-standard);background:color-mix(in srgb,var(--surface-elevated) 94%,transparent);backdrop-filter:blur(12px)}
.custom-bar p{flex:1 1 280px;margin:0;font-size:var(--text-xs);line-height:1.5;color:var(--text-secondary)}
.custom-bar p b{color:var(--text-primary)}
.custom-bar div{display:flex;gap:var(--space-2)}
.custom-state .button-small{min-height:36px;font-size:var(--text-xs)}
.demo-mount[data-custom] .site-frame{top:var(--custom-bar,0px);height:calc(100% - var(--custom-bar,0px))}

/* The playground note under the window. */
.demo-note{display:flex;gap:var(--space-3);max-width:760px;margin:var(--space-5) auto 0;padding:var(--space-3) var(--space-4);border:1px solid var(--border-standard);border-radius:var(--radius-control);font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary)}
.demo-note [data-icon]{flex:none;margin-top:2px;color:var(--accent)}

@media(max-width:800px){
  .demo-mount:not([data-animation]) .demo-layout{height:640px!important}
  .demo-mount:not([data-animation])[data-surface=sidebar][data-panel=open] .demo-layout{grid-template-columns:minmax(0,1fr)!important}
  .demo-mount:not([data-animation])[data-surface=sidebar] .demo-layout>aside.property-panel{position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:auto!important;height:68%!important;z-index:15;border-left:0!important;border-top:1px solid var(--border-glass)!important;border-radius:16px 16px 0 0;box-shadow:var(--shadow-floating)}
  .demo-mount:not([data-animation])[data-surface=sidebar][data-panel=open] .reference-area>.demo-toolbar{bottom:calc(68% + 12px)!important}
  .browser-tab-kind{display:none}
  .browser-tab-wrap{flex-basis:150px}
}
@media(max-width:600px){
  .demo-mount:not([data-animation]) .demo-layout{height:580px!important}
  .browser-tab-wrap{flex-basis:118px}
  .demo-mount .browser-tab{padding:0 var(--space-2);gap:6px}
  .playground .browser-tabstrip .window-dots{display:none}
  .custom-state{padding:var(--space-4)}
  .custom-card{padding:var(--space-5)}
}
.demo-mount[data-animation][data-phone][data-peek] .demo-layout>aside.property-panel{transform:translateX(100%)!important}

/* Design-tool overlays (demo-design.mjs): spacing shading, Scale handles, distances, the drag ghost and the key caps. */
.frame-overlay .ov-space,.frame-overlay .ov-dist,.frame-overlay .ov-scale,.frame-overlay .ov-ghost,.frame-overlay .ov-insert{position:absolute;left:0;top:0;pointer-events:none}
.ov-space span{position:absolute;display:grid;place-items:center}
.ov-space .sp-m{background:color-mix(in srgb,var(--accent) 45%,transparent)}
.ov-space .sp-p{background:color-mix(in srgb,#3fb68b 45%,transparent)}
.ov-space .sp-g{background:repeating-linear-gradient(135deg,color-mix(in srgb,#5b9dff 55%,transparent) 0 4px,color-mix(in srgb,#5b9dff 20%,transparent) 4px 8px)}
.ov-space b,.ov-dist b{padding:var(--space-1);border-radius:var(--space-1);background:rgba(10,10,10,.78);color:#fff;font:600 var(--text-xs)/1 var(--font-mono)}
.ov-scale{outline:2px solid var(--accent)}
.ov-scale .h{position:absolute;width:8px;height:8px;margin:-4px;box-sizing:border-box;border:2px solid var(--accent);border-radius:2px;background:#fff}
.ov-scale .nw{left:0;top:0}.ov-scale .n{left:50%;top:0}.ov-scale .ne{left:100%;top:0}.ov-scale .e{left:100%;top:50%}.ov-scale .se{left:100%;top:100%}.ov-scale .s{left:50%;top:100%}.ov-scale .sw{left:0;top:100%}.ov-scale .w{left:0;top:50%}
.ov-scale em{position:absolute;left:50%;top:100%;margin-top:var(--space-3);transform:translateX(-50%);padding:var(--space-1) var(--space-2);border-radius:var(--space-1);background:var(--accent);color:var(--text-inverse);font:600 var(--text-xs)/1 var(--font-mono);font-style:normal;white-space:nowrap}
.ov-dist .ds-box{position:absolute;outline:1.5px dashed var(--accent)}
.ov-dist .ds-line{position:absolute;background:var(--accent)}
.ov-dist .ds-line.is-h{height:2px}.ov-dist .ds-line.is-v{width:2px}
.ov-dist .ds-line b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.ov-dist .ds-line::before,.ov-dist .ds-line::after{content:'';position:absolute;background:var(--accent)}
.ov-dist .is-h::before,.ov-dist .is-h::after{top:-4px;width:2px;height:10px}.ov-dist .is-h::before{left:0}.ov-dist .is-h::after{right:0}
.ov-dist .is-v::before,.ov-dist .is-v::after{left:-4px;width:10px;height:2px}.ov-dist .is-v::before{top:0}.ov-dist .is-v::after{bottom:0}
.ov-ghost{box-sizing:border-box;border:2px solid var(--accent);border-radius:var(--space-1);background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:var(--shadow-lg)}
.ov-insert{width:4px;border-radius:2px;background:var(--accent)}
.ov-insert b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:var(--space-1);border-radius:var(--space-1);background:var(--accent);color:var(--text-inverse);font:600 var(--text-xs)/1 var(--font-mono)}
.frame-overlay .demo-keys{position:absolute;left:var(--space-4);top:var(--space-4);display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);border:1px solid var(--border-glass);border-radius:var(--radius-control);background:var(--surface-glass-floating);box-shadow:var(--shadow-floating);color:var(--text-primary);font:500 var(--text-md)/1.2 var(--font-sans);opacity:0;transition:opacity var(--motion-state) var(--ease-fluid)}
.frame-overlay .demo-keys.is-on{opacity:1}
.frame-overlay .demo-keys[hidden]{display:none}
.demo-keys kbd{min-width:24px;padding:var(--space-1) var(--space-2);box-sizing:border-box;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--radius-sm);background:var(--surface-input);font:600 var(--text-xs)/1.4 var(--font-mono);text-align:center}
.demo-keys span{margin-left:var(--space-2);color:var(--text-secondary)}

/* The extension's audit report page, opened over the example site (demo.mjs demoOpenReport). */
.report-sheet{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;overflow:hidden;border-radius:inherit;background:var(--surface-base)}
.report-sheet-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border-standard);background:var(--surface-panel);color:var(--text-primary);font:600 var(--text-md)/1.3 var(--font-sans)}
.report-sheet-bar small{margin-left:var(--space-3);color:var(--text-muted);font:400 var(--text-sm)/1.3 var(--font-sans)}
.report-frame{flex:1;width:100%;min-height:0;border:0;background:var(--surface-base)}
.demo-poster{position:absolute;z-index:4;object-fit:cover;object-position:top left;pointer-events:none;background:var(--surface-base);transition:opacity 220ms var(--ease-exit,ease)}
.demo-poster.is-leaving{opacity:0}