/* ── The expandable 3D viewer and its stats read-out ─────────────────────────
   ModelStage.tsx (Studio, the finished model). One element, two sizes:

   - normal:   `.lp-viewer-frame` fills its card (`.lp-model-viewer`) out of
               flow, so the canvas and the floating rows keep their place;
   - expanded: the SAME element becomes a fixed overlay over the page. It is
               moved under <body> (DetachToBody.tsx) without a remount, so the
               WebGL canvas keeps its context — its ResizeObserver just sees
               the new box (three/canvasResize.ts).

   Why <body>: `.lp-editor-main` (editor.css) is `position: fixed`, hence a
   stacking context; inside it no z-index can rise above the sticky
   `.site-header`. Under <body> the values below count page-wide:
   z-index: above the site header (50/60), below the modals (120). */

.lp-viewer-frame {
    position: absolute;
    inset: 0;
}

.lp-viewer-frame.is-expanded {
    position: fixed;
    inset: clamp(8px, 3vmin, 32px);
    z-index: 115;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-elev);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.lp-viewer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 114;
    background: rgba(0, 0, 0, 0.62);
    cursor: zoom-out;
}

.lp-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.lp-expand-icon { flex: none; }

/* Triangle count, bottom left. Glass like the view rows, quieter:
   it is information, not a control, so it never takes the pointer. */
.lp-viewer-stats {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 4;
    pointer-events: none;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .lp-viewer-stats { left: 8px; bottom: 8px; font-size: 0.625rem; padding: 2px 7px; }
    .lp-expand-btn span { display: none; }
}