/* Showcase chrome: the strip (ShowcaseToolbar.jsx) and the click-guard
   toast (clickGuard.js). Its own file, like
   static/css/party_template_gallery.css, because themed party pages
   (base_tailwind.html) don't load main.css and this has to read the
   same over all 55 themes -- never DaisyUI variables. Plain CSS, px
   sizes (Tailwind's preflight on these pages resets rem baselines in
   ways this chrome shouldn't inherit). */
.str-sc-strip,
.str-sc-toast {
    --str-sc-ink: #1f7166;
    --str-sc-brand: #75c4b7;
    --str-sc-paper: #ffffff;
    font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    box-sizing: border-box;
}

.str-sc-strip *,
.str-sc-toast * {
    box-sizing: border-box;
}

.str-sc-toolbar-mount {
    min-height: 44px;
}

.str-sc-strip {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    padding: 0 16px;
    background: var(--str-sc-ink);
    color: var(--str-sc-paper);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.str-sc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 4px;
    color: var(--str-sc-paper);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.str-sc-back:hover {
    text-decoration: underline;
}

.str-sc-strip-title {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: baseline;
    gap: 8px;
    overflow: hidden;
}

.str-sc-strip-title::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--str-sc-brand);
}

.str-sc-eyebrow {
    flex: none;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.str-sc-name {
    min-width: 0;
    overflow: hidden;
    color: var(--str-sc-paper);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Bootstrap-style outline reset so the focus-visible ring below is the
   only ring shown, consistent with party_template_gallery.css. */
.str-sc-back:focus {
    outline: none;
}

.str-sc-back:focus-visible {
    outline: 2px solid var(--str-sc-paper);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(31, 113, 102, 0.9);
    border-radius: 4px;
}

.str-sc-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 60;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--str-sc-ink);
    color: var(--str-sc-paper);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    pointer-events: none;
}

.str-sc-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 640px) {
    .str-sc-strip {
        gap: 10px;
        padding: 0 12px;
    }

    .str-sc-eyebrow {
        display: none;
    }

    .str-sc-toast {
        max-width: calc(100vw - 32px);
        bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .str-sc-toast {
        transition: opacity 0.01s linear;
        transform: translate(-50%, 0);
    }
}

/* The claim button's success confetti (react-dom-confetti, mounted by
   ClaimButtonTW.jsx in a `position: relative` wrapper) animates its
   particles with absolute positioning and `translate3d`, well past
   the wrapper's own box. With nothing clipping that between the
   wrapper and the document, the particles inflate
   `documentElement.scrollWidth` and the page scrolls horizontally for
   the ~2.8s the confetti runs -- which overlaps the claim toast, so
   it reads as the toast causing the scroll. `.str-items-page` wraps
   the whole items grid (and every ClaimButtonTW mount) but not the
   toolbar strip or the toast (both render outside it), so clipping
   here contains the particles without affecting sticky positioning.
   This file loads only on gated showcase pages (_globals.html), so
   this shared-classname selector (`.str-items-page` is also used by
   the real party_items_tailwind.html) stays scoped to them. */
.str-items-page {
    overflow-x: hidden;
}

/* react-toastify's own bundled CSS sets `.Toastify__toast-container`
   to `width: 100vw; left: 0` below 480px but never resets `right`,
   so on a page with a vertical scrollbar 100vw overflows the layout
   viewport and the page scrolls horizontally while a toast is up --
   a smaller, independent contributor to the same symptom as above.
   chrome.css loads only on gated showcase pages (_globals.html), so
   this page-global selector (like toolbar.css's `body` rule) stays
   scoped to them. */
@media (max-width: 480px) {
    body .Toastify__toast-container {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
    }
}