/*
 * doc_viewer.css — the vault's inline preview.
 *
 * Styles the `document_preview` Turbo Frame on
 * app/views/workspace/documents/show.html.erb: the always-visible viewer for
 * a document's current version, swapped to any other version by a per-row
 * "Vis" in the versions table. See DocumentsController#show,
 * #preview_version and #document_preview_kind for how the frame decides
 * what to render.
 *
 * Deliberately its own namespace (`.nt-vault-preview-*`), not `.nt-doc-*` —
 * that prefix already means "the typeset legal document" (the wizard
 * preview / signing page / printed PDF, see document.css) and this is a
 * different thing: a generic file viewer for whatever a version's blob
 * happens to be (PDF, PNG, JPEG, or an honest "can't show this").
 *
 * Picked up automatically: every file under app/assets/stylesheets is
 * bundled by `stylesheet_link_tag :app` in shared/_head (Propshaft), so
 * nothing else has to reference this file.
 */

/* `<turbo-frame>` is a real element with no box behavior of its own — absent
   a `display`, it stays the browser default for an unknown element
   (`inline`), and the iframe/img inside it would pick up the baseline gap
   inline elements get below their content. Scoped to this one frame's id on
   purpose: the singleton `slideover_frame` / `modal_frame` already get their
   layout from being inside a `<dialog>`, and this rule must never reach
   them. */
turbo-frame#document_preview {
  display: block;
}

/* Turbo sets `busy` on the frame element itself for the duration of a
   navigation (no JS of ours involved) — a dim-and-settle is enough of a
   loading cue for a swap that is usually well under a second. */
turbo-frame#document_preview[busy] {
  opacity: 0.6;
  transition: opacity var(--nt-duration) var(--nt-ease);
}

.nt-vault-preview-frame {
  display: block;
  width: 100%;
  height: min(70vh, 44rem);
  min-height: 22rem;
  border: 1px solid var(--nt-border-subtle);
  border-radius: var(--nt-radius);
  background: var(--nt-surface-sunken);
}

/* Images do not fill their own frame the way a PDF does — a receipt scanned
   in portrait on a phone would otherwise sit inside a huge blank rectangle.
   Centered on a sunken panel instead, sized to the content. */
.nt-vault-preview-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22rem;
  max-height: min(70vh, 44rem);
  padding: var(--nt-space-6);
  border: 1px solid var(--nt-border-subtle);
  border-radius: var(--nt-radius);
  background: var(--nt-surface-sunken);
  overflow: auto;
}

.nt-vault-preview-image img {
  max-width: 100%;
  max-height: min(64vh, 40rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--nt-radius-sm);
  box-shadow: var(--nt-shadow-2);
}

/* ── Phone (≤40rem) ──────────────────────────────────────────────────
 * 40rem is the canonical phone step (BREAKPOINT REGISTRY, notarium.css).
 *
 * `min(70vh, 44rem)` with a 22rem floor is a desk-sized viewer: on a 390×844
 * phone it resolves to 591px, which is most of the screen, and the version
 * table that swaps what the frame shows sits below the fold with no cue that
 * it is there. A PDF at 390px is a thing you tap to open full-screen, not a
 * thing you read in place, so the frame becomes a preview rather than a
 * reading surface.
 */
@media (max-width: 40rem) {
  .nt-vault-preview-frame {
    height: min(58vh, 30rem);
    min-height: 15rem;
  }

  .nt-vault-preview-image {
    min-height: 12rem;
    max-height: min(58vh, 30rem);
    padding: var(--nt-space-4);
  }

  .nt-vault-preview-image img {
    max-height: min(50vh, 26rem);
  }
}