/**
 * ChartDeck UX - the screenshot preview (atlas-ux.js). Round 2: the header auto-hide and the
 * per-pane camera are gone (the top toolbar is always on screen and has the camera).
 */

/* -- screenshot preview ------------------------------------------------------- */
.at-shot { position: fixed; inset: 0; z-index: var(--z-screenshot); display: grid; place-items: center; padding: var(--a-sp-7);
  background: var(--a-scrim); backdrop-filter: blur(3px); }
.at-shot-card { display: grid; gap: var(--a-sp-5); max-width: min(1400px, 100%); max-height: 100%; padding: var(--a-sp-6);
  background: var(--a-panel); border: 1px solid var(--a-line-2); border-radius: var(--a-r-lg);
  box-shadow: var(--a-sh-3); min-width: 0; }
.at-shot-head { display: flex; align-items: center; gap: var(--a-sp-5); min-width: 0; }
.at-shot-t { font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-sans); letter-spacing: var(--a-track-caps); text-transform: uppercase; color: var(--a-fg-1); }
.at-shot-n { font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-tight) var(--a-mono); color: var(--a-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-variant-numeric: tabular-nums; }
.at-shot-x { margin-left: auto; font-size: var(--a-fs-lg); line-height: 1; }
.at-shot-img { display: block; max-width: 100%; max-height: calc(100vh - 170px); width: auto; height: auto;
  border-radius: var(--a-r-md); border: 1px solid var(--a-line-1); justify-self: center; cursor: zoom-in; }
.at-shot-full { position: fixed; inset: 0; z-index: calc(var(--z-screenshot) + 1); display: grid; place-items: center; overflow: auto;
  padding: var(--a-sp-6); background: var(--a-scrim-heavy); }
.at-shot-full-img { display: block; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
  width: auto; height: auto; cursor: zoom-in; border-radius: var(--a-r-sm); box-shadow: var(--a-sh-3); }
.at-shot-full.actual { place-items: start; }
.at-shot-full.actual .at-shot-full-img { max-width: none; max-height: none; cursor: zoom-out; margin: auto; }
.at-shot-full-x { position: fixed; top: 14px; right: var(--a-sp-6); width: 34px; height: 34px; font-size: var(--a-fs-xl); line-height: 1; z-index: 1; }
.at-shot-acts { display: flex; justify-content: flex-end; gap: var(--a-sp-4); }
.at-shot-btn { height: 30px; padding: 0 var(--a-sp-6); border-radius: var(--a-r-md); border: 1px solid var(--a-line-2);
  background: var(--a-raised); color: var(--a-fg-1); font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-sans); cursor: pointer; }
.at-shot-btn:hover { border-color: var(--a-line-3); }
.at-shot-btn.primary { background: var(--a-accent-t2); border-color: var(--a-accent-t3); color: var(--a-accent); }
.at-shot-btn.primary:hover { background: var(--a-accent-t3); }