/* Public shop open (Steven 2026-10-02). The sheet static/js/public-shop-open.js
   grows from the logged-out pill's Shop button with ClipReveal (clip-reveal.css
   draws the circle), then the real /shop page opens under it. It wears the
   inside utility panel's loading look (layout.css .fullscreen-panel and
   .fullscreen-panel__loading*): a full-viewport white sheet, the spinning
   ring around the site glyph, "LOADING SHOP" in mono caps. No clip-path or
   transition here: the clip-reveal--* classes own both. */
.public-shop-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-utility-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 0 var(--space-5);
    background: var(--surface-primary);
    color: var(--text-muted);
    text-align: center;
}

.public-shop-sheet__ring {
    position: relative;
    width: calc(var(--size-16) + var(--space-3));
    height: calc(var(--size-16) + var(--space-3));
    display: grid;
    place-items: center;
}

.public-shop-sheet__ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--space-1) solid color-mix(in srgb, var(--text-primary) 12%, transparent);
    border-top-color: var(--accent-primary);
    border-radius: var(--radius-full);
    animation: public-shop-sheet-spin var(--duration-slow) linear infinite;
}

.public-shop-sheet__glyph {
    width: var(--size-10);
    height: var(--size-10);
    border-radius: var(--radius-lg);
}

.public-shop-sheet__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    text-transform: uppercase;
}

@keyframes public-shop-sheet-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .public-shop-sheet__ring::before { animation: none; }
}