/* =========================================================
   Owner's Manual  —  /owners-manual
   The in-page PDF preview: the manual's cover (page 1,
   rendered by account-manuals.js via PDF.js) standing as a
   document beside the copy, opening the shared full-screen
   viewer (includes/manual-viewer.php + manual-viewer.css).
   Rides on .pg-panel from page-sections.css for the border,
   surface, and padding — this file only reshapes the grid
   and draws the document itself.
   ========================================================= */

/* .pg-panel's auto-fit halves would hand the cover ~700px and let the sheet
   tower over the copy — pin it to a document-sized column instead.
   Loaded after page-sections.css, so equal specificity wins. */
.om-doc {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
}

@media only screen and (max-width: 860px) {
    .om-doc {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Quiet divider between the manual's own copy and the tutorials aside. */
.om-doc__aside {
    margin-top: clamp(1.4rem, 2.5vw, 2rem);
    padding-top: clamp(1rem, 1.8vw, 1.4rem);
    border-top: 1px solid var(--theme-border-soft, rgba(255, 255, 255, 0.08));
}

.om-doc__aside p {
    font-size: 0.97rem;
}

/* ── The document ──
   A white sheet on the dark panel, the portal manual tiles' recipe one size
   up. The user manual is a landscape (11×8.5) document, so the placeholder
   holds that shape; once the real cover has drawn, the image's own ratio
   takes over so nothing is ever cropped. */
.om-doc__cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 22 / 17;
    overflow: hidden;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.09));
    border-radius: var(--theme-radius-md, 1rem);
    background: #f7f7f5;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.44);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.om-doc__cover:hover,
.om-doc__cover:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 26px 54px rgba(0, 0, 0, 0.55);
    outline: none;
}

.om-doc.is-rendered .om-doc__cover {
    aspect-ratio: auto;
}

@media only screen and (max-width: 860px) {
    .om-doc__cover {
        justify-self: center;
        width: min(26rem, 100%);
    }
}

.om-doc__page {
    display: block;
    width: 100%;
    height: auto;
}

/* Shown until (or instead of, if PDF.js never loads) the rendered cover. */
.om-doc__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: linear-gradient(160deg, #ffffff 0%, #e9e9e6 100%);
    color: #b4b4ae;
    transition: opacity 0.3s ease;
}

.om-doc__placeholder i {
    font-size: 2.4rem;
    color: #c9c9c3;
}

.om-doc__placeholder-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b4b4ae;
}

/* account-manuals.js flags the tile once the cover has drawn. */
.om-doc.is-rendered .om-doc__placeholder {
    opacity: 0;
    pointer-events: none;
}

/* Floating "read full screen" pill over the sheet's foot. */
.om-doc__hint {
    position: absolute;
    left: 50%;
    bottom: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.52rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--theme-radius-pill, 999px);
    background: rgba(12, 12, 14, 0.86);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.om-doc__hint i {
    font-size: 0.72rem;
    line-height: 1;
}

.om-doc__cover:hover .om-doc__hint,
.om-doc__cover:focus-visible .om-doc__hint {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Touch devices have no hover — keep the pill visible. */
@media (hover: none), (max-width: 860px) {
    .om-doc__hint {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}