/* =====================================================================================================
   preview-viewer.css — R71 (§66). The preview image, large.

   ADAPTIVE SURFACE LAW, applied rather than cited:
     LAW 1  no `100vh` — `dvh`/`svh` only, so a mobile toolbar collapsing never clips the controls.
     LAW 2  every internal rule is a `@container` query on the viewer itself. The viewer can be opened from
            a 280px pane or a 2560px desktop; a viewport media query would style it by the WINDOW, which is
            exactly the mistake that makes components break in a sidebar.
     LAW 4  landscape phone (844x390) is first-class: the stage takes the remaining space and the surface
            scrolls INTERNALLY, so every control stays reachable at 390px of height.
     LAW 5  >=44x44 CSS px targets under `pointer: coarse`.
     LAW 6  `prefers-reduced-motion: reduce` turns transitions OFF, not merely shortens them.
   Bound to the REAL global tokens (--paper/--ink/--muted/--edge/--accent). A sheet bound to token names
   that do not exist fails SILENTLY, so the gate pixel-asserts properties only these rules set.
   ===================================================================================================== */

.pvw {
  container: pvw / inline-size;
  /* LAW 1: dvh, never vh */
  inline-size: min(96vw, 1400px);
  block-size: min(92dvh, 1000px);
  max-inline-size: 96vw;
  max-block-size: 92dvh;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  /* the whole surface is a column: bar, stage (flexible), menu, note — LAW 4 */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.pvw::backdrop { background: rgb(0 0 0 / .62); }
.pvw:not([open]) { display: none; }
/* true fullscreen: fill the screen, drop the chrome */
.pvw.is-fs { inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none; border: 0; border-radius: 0; }

/* ---- bar ------------------------------------------------------------------------------------------- */
.pvw__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-block-end: 1px solid var(--edge);
  background: color-mix(in oklab, var(--paper), var(--ink) 4%);
}
.pvw__name {
  flex: 1 1 auto; min-inline-size: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .92rem; color: var(--ink);
}
.pvw__btn {
  flex: none;
  display: inline-grid; place-items: center;
  inline-size: 44px; block-size: 44px;              /* LAW 5 — coarse-pointer minimum, unconditionally */
  border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--muted); cursor: pointer;
}
.pvw__btn:hover, .pvw__btn:focus-visible { color: var(--ink); border-color: var(--edge); }
.pvw__btn svg { inline-size: 18px; block-size: 18px; }

/* ---- stage ----------------------------------------------------------------------------------------- */
.pvw__stage {
  position: relative;
  min-block-size: 0;                                 /* the grid row is minmax(0,1fr) — this makes it real */
  display: grid; place-items: center;
  padding: 12px;
  overflow: auto;
  background:
    repeating-conic-gradient(from 45deg, color-mix(in oklab, var(--paper), var(--ink) 5%) 0% 25%, transparent 0% 50%)
    0 0 / 18px 18px;                                  /* a checker, so a transparent PNG is legible */
}
.pvw__img {
  max-inline-size: 100%; max-block-size: 100%;
  inline-size: auto; block-size: auto;
  object-fit: contain;                                /* P1: fit, never crop */
  border-radius: 8px;
  background: var(--paper);
}
.pvw__empty { margin: 0; padding: 24px; text-align: center; color: var(--muted); font-size: .9rem; max-inline-size: 40ch; text-wrap: balance; }
.pvw__drop {
  position: absolute; inset: 10px;
  display: grid; place-items: center;
  border: 2px dashed var(--accent); border-radius: 12px;
  background: color-mix(in oklab, var(--paper) 78%, var(--accent) 22%);
  color: var(--ink); font-size: .95rem;
  opacity: 0; visibility: hidden;
  transition: opacity .14s ease;
}
.pvw__stage.is-drop .pvw__drop { opacity: 1; visibility: visible; }

/* ---- the tool -------------------------------------------------------------------------------------- */
.pvw__menu {
  border-block-start: 1px solid var(--edge);
  background: color-mix(in oklab, var(--paper), var(--ink) 3%);
  padding: 6px;
  display: grid; gap: 2px;
  max-block-size: 46dvh; overflow: auto;              /* LAW 4: never pushes the stage off a short screen */
}
.pvw__menu[hidden] { display: none; }
.pvw__item {
  display: flex; align-items: center; gap: 10px;
  inline-size: 100%; min-block-size: 44px;            /* LAW 5 */
  padding: 8px 12px;
  border: 0; border-radius: 10px;
  background: none; color: var(--ink);
  font: inherit; font-size: .92rem; text-align: start; cursor: pointer;
}
.pvw__item:hover, .pvw__item:focus-visible { background: color-mix(in oklab, var(--paper), var(--ink) 8%); }
.pvw__item svg { flex: none; inline-size: 17px; block-size: 17px; color: var(--accent); }
.pvw__item-t { flex: none; }
.pvw__item-h { color: var(--muted); font-size: .76rem; margin-inline-start: auto; text-align: end; }
.pvw__hint { margin: 4px 12px 6px; color: var(--muted); font-size: .76rem; }
.pvw__note { margin: 0; padding: 8px 12px; border-block-start: 1px solid var(--edge); color: var(--muted); font-size: .84rem; }
.pvw__note:empty, .pvw__note[hidden] { display: none; }

/* ---- LAW 2: the viewer restyles by its OWN width, not the window's ---------------------------------- */
@container pvw (inline-size < 30rem) {
  .pvw__item-h { display: none; }                     /* the hint is the first thing to go, not the label */
  .pvw__name { font-size: .84rem; }
}
/* LAW 4: a landscape phone is ~390px tall — give the picture the room and keep the tool scrollable */
@container pvw (block-size < 28rem) {
  .pvw__menu { max-block-size: 38dvh; }
  .pvw__stage { padding: 6px; }
  .pvw__hint { display: none; }
}

/* ---- LAW 6: reduced motion is a hard stop, not a shortening ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pvw, .pvw__drop, .pvw__btn, .pvw__item { transition: none !important; animation: none !important; }
}
/* forced-colors: never rely on our own backgrounds for meaning */
@media (forced-colors: active) {
  .pvw { border: 1px solid CanvasText; }
  .pvw__drop { border-color: Highlight; background: Canvas; }
  .pvw__btn:focus-visible, .pvw__item:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* R71 (§66 P2): when the engine refuses to fullscreen a modal dialog we fullscreen the STAGE instead —
   it must still present the picture properly, on its own background, with the checker suppressed. */
.pvw__stage:fullscreen { background: #000; padding: 0; place-items: center; }
.pvw__stage:fullscreen .pvw__img { max-inline-size: 100vw; max-block-size: 100dvh; border-radius: 0; background: transparent; }
/* the stage's own exit control — only while the STAGE itself is the fullscreen element (P2) */
.pvw__fsx { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 2;
  display: none; place-items: center; inline-size: 44px; block-size: 44px;
  border: 1px solid rgb(255 255 255 / .35); border-radius: 10px;
  background: rgb(0 0 0 / .55); color: #fff; cursor: pointer; }
.pvw__fsx svg { inline-size: 18px; block-size: 18px; }
.pvw__stage:fullscreen .pvw__fsx { display: grid; }