/* App preview: the slides viewer in the side panel. Values are the app's own, from
   packages/ui/src/components/slides/SlidesViewer.tsx: a light editor surface (#ffffff on a #f1f2f4 field),
   #e4e6ea rules, #1f2328 ink, #6b7280 muted text, #3b82f6 selection, a 56px top bar with 32px buttons at
   13px, and a thumbnail rail with a numbered badge on every slide. Docked, the panel is narrower than the
   app's 290px rail plus a canvas, so the rail moves under the slide; expanded, it is the app's layout. */
.sv-host{container-type:inline-size;min-height:100%;background:#f1f2f4;color:#1f2328;font-family:'Eshlon Sans',sans-serif}
.sv-viewer{display:flex;flex-direction:column;min-height:100%}

.sv-topbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;height:56px;flex-shrink:0;padding:0 12px;background:#fff;border-bottom:1px solid #e4e6ea}
.sv-side{display:flex;flex:1;align-items:center;gap:4px;min-width:0}
.sv-end{justify-content:flex-end;flex:0 0 auto}
.sv-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:14px;font-weight:500;line-height:20px}
.sv-rule{width:1px;height:20px;margin:0 4px;background:#e4e6ea}
.sv-btn{display:flex;align-items:center;gap:6px;height:32px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:#1f2328;font:inherit;font-size:13px;line-height:1;cursor:pointer;transition:background-color 150ms ease}
.sv-btn:hover{background:#0000000d}
.sv-btn:disabled{opacity:.35;cursor:not-allowed;background:transparent}
.sv-export{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:6px;background:#1f2328;color:#fff;font:inherit;font-size:13px;font-weight:500;line-height:1;cursor:pointer}
.sv-topbar svg{width:16px;height:16px;flex-shrink:0}
.sv-btn:focus-visible,.sv-export:focus-visible,.sv-thumb:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}

/* Docked: slide first, rail below it. */
.sv-side.sv-start{display:none}
.sv-title{text-align:left}
.sv-body{display:flex;flex-direction:column;flex:1;min-height:0}
.sv-canvas{order:1;display:flex;padding:20px}
.sv-slide{display:block;width:100%;height:auto;aspect-ratio:16/9;margin:auto;background:#fff;box-shadow:0 6px 28px #0f121429}
.sv-rail{order:2;display:flex;flex-direction:column;background:#fff;border-top:1px solid #e4e6ea}
.sv-count{display:flex;align-items:center;justify-content:center;height:44px;flex-shrink:0;border-bottom:1px solid #e4e6ea;color:#6b7280;font-size:13px;font-variant-numeric:tabular-nums}
.sv-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;padding:16px}
.sv-thumb{position:relative;display:block;padding:0;border:0;border-radius:8px;background:#fff;cursor:pointer}
.sv-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:8px}
.sv-thumb i{position:absolute;inset:0;border:1px solid #e4e6ea;border-radius:8px;pointer-events:none}
.sv-thumb b{position:absolute;left:0;top:0;padding:2px 6px;border-radius:8px 0 8px 0;background:#0f1214b8;color:#fff;font-size:11px;font-weight:500;line-height:16px;font-variant-numeric:tabular-nums}
.sv-thumb[aria-current=true] i{border:2px solid #3b82f6;box-shadow:0 0 0 3px #3b82f633}
.sv-thumb[aria-current=true] b{background:#3b82f6}

/* Expanded: the app's layout. Top bar with Back, the 290px rail on the left, the slide centred on the field. */
@container (min-width:760px){
 .sv-viewer{height:100%;min-height:0}
 .sv-side.sv-start{display:flex}
 .sv-end{flex:1}
 .sv-title{text-align:center}
 .sv-body{flex-direction:row}
 .sv-rail{order:0;width:290px;flex-shrink:0;border-top:0;border-right:1px solid #e4e6ea}
 .sv-thumbs{display:flex;flex-direction:column;align-items:center;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
 .sv-thumb{width:234px;flex-shrink:0}
 .sv-canvas{order:1;flex:1;min-width:0;min-height:0;padding:28px}
 .sv-slide{width:auto;max-width:100%;max-height:100%}
}
/* Expanded, the viewer fills the panel exactly so the rail scrolls on its own, as in the app. */
#ra-panel-content:has(.sv-host){position:relative}
.panel-expanded .sv-host{position:absolute;inset:0;min-height:0}
.panel-expanded .sv-viewer{height:100%;min-height:0}
@media(prefers-reduced-motion:reduce){.sv-btn{transition:none}}

/* Docked, the panel header names the deck, so the viewer's bar leads with the slide count and the rail's own
   count row is not repeated. Expanded, it is the app's bar: centred title, count above the rail. */
.sv-count-top{flex:1;justify-content:flex-start;height:auto;padding-left:4px;border-bottom:0}
.sv-title{display:none}
.sv-rail>.sv-count{display:none}
@container (min-width:760px){
 .sv-count-top{display:none}
 .sv-title{display:block}
 .sv-rail>.sv-count{display:flex}
}

/* The app's floating edit toolbar (slides/SlideToolbar.tsx): glass bar with 18px corners, 36px tools with 10px
   corners and 19px icons, the active tool filled with ink, dividers 20px tall. It floats 20px above the
   canvas's bottom edge and the slide keeps 84px clear beneath it, as in the app. It needs about 520px, so it
   appears in the expanded viewer only; docked, the panel is too narrow and it would cover the slide. */
/* Docked, it floats at the bottom of the panel the same way, over the thumbnails as they scroll. When the
   panel is narrower than the bar, the whole bar scales down a little rather than dropping tools. */
.sv-viewer{position:relative}
.sv-toolbar-wrap{display:flex;justify-content:center;align-items:flex-end;position:sticky;bottom:16px;height:0;z-index:3;pointer-events:none}
.sv-toolbar{transform:scale(var(--sv-bar-scale,1));transform-origin:50% 100%}
.sv-thumbs{padding-bottom:84px}
.sv-toolbar{display:flex;align-items:center;gap:2px;padding:6px 8px;border-radius:18px;color:#1f2328;pointer-events:auto}
.sv-tool{display:flex;align-items:center;justify-content:center;gap:2px;width:36px;height:36px;padding:0;border:0;border-radius:10px;background:transparent;color:#1f2328;cursor:pointer;transition:background-color 150ms ease}
.sv-tool-wide{width:auto;padding:0 6px}
.sv-tool:hover{background:#0000000f}
.sv-tool.is-active,.sv-tool.is-active:hover{background:#1f2328;color:#fff}
.sv-tool:disabled{opacity:.25;cursor:not-allowed;background:transparent}
.sv-tool .pptd-icon{width:19px;height:19px;flex-shrink:0}
.sv-tool .sv-chevron{width:14px;height:14px;opacity:.7}
.sv-fx{font-family:Georgia,'Times New Roman',serif;font-size:16px;font-style:italic;line-height:1}
.sv-tool-rule{width:1px;height:20px;margin:0 6px;flex-shrink:0;background:#0f12141f}
.sv-zoom{display:flex;align-items:center;gap:2px;height:36px;padding:0 8px;border:0;border-radius:10px;background:transparent;color:#1f2328;font:inherit;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color 150ms ease}
.sv-zoom:hover{background:#0000000f}
.sv-zoom .sv-chevron{width:16px;height:16px;opacity:.45}
.sv-tool:focus-visible,.sv-zoom:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
@container (min-width:760px){
 .sv-canvas{position:relative;padding-bottom:84px}
 .sv-toolbar-wrap{position:absolute;left:290px;right:0;bottom:20px;height:auto;padding:0 16px}
 .sv-thumbs{padding-bottom:16px}
}
@media(prefers-reduced-motion:reduce){.sv-tool,.sv-zoom{transition:none}}