/* A single, viewport-centred photo + controls group; captions never participate in sizing. */
.viewer { background:var(--bg); color:var(--ink); overflow:auto; scrollbar-width:none; --viewer-controls-height:240px; --viewer-photo-width:min(45dvh,540px,calc(100vw - 144px),max(120px,calc((100dvh - 400px)*.75))); }
.viewer::-webkit-scrollbar { display:none; }
.viewer[open] { display:flex; flex-direction:column; }
.viewer-top { position:absolute; top:16px; left:20px; right:20px; width:auto; max-width:none; margin:0; }
.viewer-body { flex:1; display:grid; align-content:center; grid-template-columns:minmax(0,1fr); grid-template-rows:calc(var(--viewer-photo-width)*4/3) var(--viewer-controls-height); gap:20px; min-width:0; padding:48px 0; }
.viewer-stage { grid-area:1 / 1; position:relative; display:flex; align-items:center; justify-content:center; width:100%; margin:0; padding:0; gap:0; flex-wrap:nowrap; }
.viewer .photo-frame { width:var(--viewer-photo-width); height:calc(var(--viewer-photo-width)*4/3); aspect-ratio:3/4; flex:none; }
.viewer #previous,.viewer #next { position:absolute; top:50%; bottom:auto; transform:translateY(-50%); opacity:1; z-index:2; }
.viewer #previous { left:auto; right:calc(50% + var(--viewer-photo-width)/2 + 8px); }
.viewer #next { right:auto; left:calc(50% + var(--viewer-photo-width)/2 + 8px); }
.viewer-controls-slot { grid-area:2 / 1; justify-self:center; width:min(100%,600px); height:var(--viewer-controls-height); min-width:0; }
#viewer-controls { position:relative; width:100%; height:100%; min-width:0; }
#viewer-controls #slide-tools { display:grid; grid-template-rows:20px 16px 66px 64px 40px; gap:6px; width:100%; min-width:0; margin:0; }
#viewer-controls #slide-tools[hidden] { display:grid !important; visibility:hidden; }
#viewer-controls .slide-dots { flex-wrap:nowrap; overflow:auto; align-items:center; margin:0; }
#viewer-controls .slide-dots button { flex:none; }
#viewer-controls .slide-strip { grid-row:4; margin:0; padding:4px 0; }
#viewer-controls .slide-actions { grid-row:5; flex-wrap:nowrap; overflow:auto; justify-content:safe center; align-items:center; }
#viewer-controls .slide-actions button { flex:none; white-space:nowrap; }
#viewer-controls .floating-bar { position:absolute; top:48px; left:50%; transform:translateX(-50%); margin:0; flex-wrap:nowrap; width:max-content; max-width:100%; }
#viewer-controls .floating-bar button { white-space:nowrap; }
#viewer-controls #crop-hint { position:absolute; top:8px; width:100%; margin:0; }
.viewer #previous,.viewer #next,#viewer-close,#history-close { display:grid; place-items:center; width:48px; height:48px; min-height:48px; padding:10px; border:0; border-radius:50%; background:transparent; color:var(--muted); box-shadow:none; }
.viewer #previous:hover,.viewer #next:hover,#viewer-close:hover,#history-close:hover { color:var(--ink); background:var(--line); }
.viewer #previous svg,.viewer #next svg,#viewer-close svg,#history-close svg { width:28px; height:28px; pointer-events:none; }
.viewer :is(button,input,[tabindex]):focus-visible { outline:none; outline-offset:0; box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent); }
.viewer .caption-text:focus-visible { border-radius:8px; }
.viewer .slide-strip [aria-pressed=true] { outline:none; box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent); }
@media(min-width:651px) {
  .viewer { --viewer-controls-height:100px; --viewer-thumb-width:92px; --viewer-thumb-height:124px; --viewer-action-size:46px; --viewer-photo-width:min(45dvh,540px,calc(100vw - 360px),max(120px,calc((100dvh - 260px)*.75))); }
  #viewer-controls #slide-tools { grid-template-rows:20px 16px 40px; }
  #viewer-controls .slide-actions { grid-row:3; }
  .viewer-stage>.slide-strip { position:absolute; right:calc(50% + var(--viewer-photo-width)/2 + 5px); top:0; height:100%; max-height:100%; width:calc(var(--viewer-thumb-width) + 10px); display:flex; flex-direction:column; justify-content:flex-start; gap:10px; margin:0; padding:5px; overflow:auto; overscroll-behavior:contain; scrollbar-width:none; }
  .viewer-stage>.slide-strip button { width:var(--viewer-thumb-width); height:var(--viewer-thumb-height); min-height:var(--viewer-thumb-height); border-radius:10px; }
  .viewer-stage>.slide-strip [aria-pressed=true] { outline:3px solid var(--accent); outline-offset:2px; box-shadow:none; }
  /* 06.10.2026, просьба владельца: значки действий кадра ГОРИЗОНТАЛЬНО НАД фото, слева, а не колонкой сбоку. */
  .viewer-stage>.viewer-action-rail { position:absolute; top:calc(-1 * (var(--viewer-action-size) + 14px)); left:50%; transform:translateX(-50%); display:flex; flex-direction:row; gap:10px; margin:0; padding:0; border:0; background:none; overflow:visible; z-index:4; }
  .viewer-action-rail>button { position:relative; display:grid; place-items:center; width:var(--viewer-action-size); height:var(--viewer-action-size); min-height:var(--viewer-action-size); padding:0; border-radius:14px; background:var(--card); border:1px solid var(--line); color:var(--ink); }
  .viewer-action-rail>#delete { color:var(--bad); }
  .viewer-action-rail svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
  .viewer-action-tip { position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%); padding:5px 9px; border-radius:8px; background:#16202b; color:#fff; font-size:12px; white-space:nowrap; pointer-events:none; visibility:hidden; z-index:5; }
  .viewer-action-rail>button:is(:hover,:focus-visible) .viewer-action-tip { visibility:visible; }
  .viewer #previous { right:calc(50% + var(--viewer-photo-width)/2 + var(--viewer-thumb-width) + 22px); }
  .viewer #next { left:calc(50% + var(--viewer-photo-width)/2 + 22px); }
  .viewer #caption-preview { left:auto; align-self:start; transform:translateX(calc(var(--viewer-photo-width)/2 + var(--viewer-action-size) + 42px)); }
  .viewer .caption-panel { width:min(400px,calc(50vw - var(--viewer-photo-width)/2 - var(--viewer-action-size) - 120px)); }
}
@media(min-width:1101px) {
  .viewer { --viewer-photo-width:min(45dvh,540px,max(120px,calc(100vw - 1000px)),max(120px,calc((100dvh - 260px)*.75))); }
}
@media(min-width:651px) and (max-width:1100px) {
  .viewer { --viewer-thumb-width:72px; --viewer-thumb-height:96px; --viewer-action-size:40px; }
  .viewer .caption-panel { left:auto; right:calc(var(--viewer-action-size) + 64px); top:56px; width:min(400px,var(--viewer-photo-width)); max-height:calc(var(--viewer-photo-width)*4/3 - 56px); }
}
@media(max-width:650px) {
  .viewer { padding:16px; }
  #viewer-controls .floating-bar { gap:4px; padding:6px; }
  #viewer-controls .floating-bar button { padding:8px 7px; font-size:11px; }
}
.viewer-moving { will-change:opacity; }
.viewer-moving .caption-panel { backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }