/* Object-link context menu.
 *
 * ⚠️ ITS OWN CLASS NAMES, DELIBERATELY, AND THIS COST A BUG TO LEARN.
 * The first version reused presentation.js's `.present-menu` / `.present-menu-item`
 * so as not to invent a second menu language. But `.present-menu-item` is not
 * only a style hook — presentation.js binds a document-level click listener to
 * it (static/presentation.js, "const item = e.target.closest('.present-menu-item')")
 * and opens the Image-presentation dialog. So clicking "Copy link" opened that
 * dialog with no folder id, and Create POSTed to a route that answered HTML,
 * surfacing as "Unexpected token '<'".
 *
 * Sharing a class shares BEHAVIOUR, not just appearance. The rules below are
 * deliberately a copy of presentation.css's, so the two menus still look
 * identical while nothing can dispatch across them.
 */
.objlink-menu {
    position: fixed;
    z-index: 10060;                 /* above drawers + modals, below toasts */
    min-width: 200px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.objlink-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius) - 2px);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.objlink-menu-item:hover {
    background: rgb(var(--accent-halo-rgb) / 0.16);
}

.objlink-menu-ref {
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    font-size: 12px;
}

/* A bank card's look-book: all ten frames, judged side by side.
   `auto-fill` rather than a fixed column count so the grid still reads on a
   laptop half-window, where three fixed columns would shrink each frame below
   the size at which a style is legible at all. */
.objlink-frames {
    display: grid;
    /* 320 rather than 220: at 220 the ten frames rendered too small to judge a
       style by, which is the only reason the page shows all ten. auto-fill so a
       half-window laptop drops to two columns instead of shrinking each frame
       below legibility. */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    margin-top: 1rem;
}

.objlink-frame { margin: 0; }

.objlink-frame img {
    cursor: zoom-in;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    background: var(--bg-deep, #111);   /* so a 404 frame reads as a gap,
                                           not as a torn hole in the grid */
}

.objlink-frame figcaption {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-dim);
}


/* Frame viewer — click a look-book frame, then walk the set left/right.
 *
 * ⚠️ PRIVATE CLASS NAMES AND ITS OWN KEY HANDLING, for the reason recorded at
 * the top of this file: the app's `.lightbox-*` classes carry delegated
 * listeners belonging to the project page, and adopting them would inherit
 * behaviour, not just looks. This viewer is deliberately small and owns
 * everything it touches.
 */
.objlink-lb {
    position: fixed;
    inset: 0;
    z-index: 10065;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.86);
}

/* The media slot fills the viewer so an <img> and a <video> are laid out the
   same way; the sizing below applies to whichever one is in it. */
.objlink-lb-slot {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 🔴 FILL THE SPACE, THEN CONTAIN — NOT `max-*`. With maxima only, anything
   smaller than the cap rendered at its natural size and sat lost in the middle
   of a black screen. That is why an image opened large and a VIDEO opened
   small: a <video> has no intrinsic size until its metadata arrives, so it
   painted at the CSS default 300x150, then resized to its own dimensions —
   visibly shrinking after the click. Reported by the owner 3-Sep.

   ⚠️ THIS IS WHAT `/r/`'s OWN VIEWER ALREADY DID (`review_public.html`,
   `.lb img, .lb video`), and the two screens should not disagree about how big
   a picture is. `object-fit: contain` keeps the aspect ratio, so filling costs
   nothing.

   84vh leaves room for the caption without the media pushing it off a short
   window. */
.objlink-lb img,
.objlink-lb video {
    width: 92vw;
    height: 84vh;
    object-fit: contain;
    border-radius: 6px;
}

.objlink-lb-caption {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
    pointer-events: none;
}

.objlink-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
}

.objlink-lb-nav:hover { opacity: 1; }
.objlink-lb-prev { left: 8px; }
.objlink-lb-next { right: 8px; }

.objlink-lb-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
}

.objlink-lb-close:hover { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────────
   THE STYLE MODAL, WHEN IT IS A STEP IN THIS LANE'S CAROUSEL.

   🔴 THE CHEVRONS HAD TO MATCH AND DID NOT. On the client review page every
   overlay pages with one control in one place. On the review setup page a Look
   handed over to the library's style modal, whose own arrows are 44x44 circles
   with a translucent fill at 16px — against this file's 44x64 transparent
   chevrons at 8px. Same gesture, two appearances, one page. Owner, 3-Sep.

   ⚠️ SCOPED TO `.objlink-carousel`, WHICH object_links.js ADDS ONLY WHEN IT
   DRIVES THE MODAL. The style bank and the folder views open the same modal
   and must keep the circles — they are that screen's own control, and this
   lane does not own `style.css` (AGENT_RULES §C4) or the surfaces it dresses.
   Without the scope this would restyle a screen nobody asked us to touch.

   ⚠️ Every property `.style-modal-nav` sets that differs is overridden here,
   INCLUDING the ones that would otherwise survive: `border-radius`,
   `background`, `backdrop-filter` and `height` are what make it a circle, and
   leaving any one of them behind produces a half-converted control that looks
   like a bug rather than like either design.
   ───────────────────────────────────────────────────────────────────────── */
.style-modal-overlay.objlink-carousel .style-modal-nav {
    width: 44px;
    height: 64px;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    font-size: 34px;
    padding: 0;
    opacity: 0.55;
    transition: opacity 120ms ease;
}

.style-modal-overlay.objlink-carousel .style-modal-nav:hover {
    background: transparent;
    opacity: 1;
}

.style-modal-overlay.objlink-carousel .style-modal-prev { left: 8px; }
.style-modal-overlay.objlink-carousel .style-modal-next { right: 8px; }