/* ==========================================================================
   file-viewer.css — the in-app file viewer shell (Views/FileViewer/Index.cshtml)
   --------------------------------------------------------------------------
   A focused, full-height reader that wraps a same-origin PDF/image in app chrome
   with its own Back / Download / Open controls. Exists so an iOS "Add to Home
   Screen" standalone launch never replaces the app with a chrome-less PDF the
   user can't escape. Tokens only (Docs/CSS_ARCHITECTURE.md) — no hardcoded hex.
   ========================================================================== */

.fv-body {
    margin: 0;
    height: 100vh;
    /* Use the small-viewport unit where supported so the toolbar stays put under
       the iOS standalone status bar / dynamic browser chrome. */
    height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--pt-surface-2);
}

.fv-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-3);
    /* Clear the iOS notch / status bar in standalone mode. */
    padding-top: calc(var(--space-2) + env(safe-area-inset-top));
    background: var(--pt-surface-0);
    border-bottom: 1px solid var(--pt-slate-200);
    box-shadow: var(--pt-shadow-sm);
}

.fv-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--fs-16);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pt-slate-800);
}

.fv-actions {
    display: flex;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.fv-stage {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-4);
    /* Honour the home-indicator safe area when scrolled to the bottom. */
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
}

.fv-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

/* One per PDF page. Starts as a sized (aspect-ratio) placeholder, then has its
   rendered <canvas> dropped in once it scrolls near the viewport. */
.fv-page {
    width: 100%;
    max-width: 1100px;
    background: var(--pt-surface-0);
    box-shadow: var(--pt-shadow-md);
    border-radius: 2px;
    overflow: hidden;
}

.fv-canvas {
    display: block;
    width: 100%;
    height: auto;
}

.fv-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    background: var(--pt-surface-0);
    box-shadow: var(--pt-shadow-md);
}

.fv-message {
    max-width: 28rem;
    margin: var(--space-8) auto;
    padding: 0 var(--space-4);
    text-align: center;
    color: var(--pt-slate-600);
}