/* The showcase switcher strip (ShowcaseToolbar.jsx): prev/next,
   palette chips and (added by the jump menu) the grouped listbox and
   mobile sheet. Shares chrome.css's ink/paper/brand variables and
   sticky positioning via `.str-sc-strip`; this file only adds the
   `.str-sc-tb*` layout and the mobile bottom-bar override. Plain CSS,
   px units, like chrome.css -- no DaisyUI variables. */

/* chrome.css gives `.str-sc-toolbar-mount` a min-height to reserve
   space before React mounts, which (since it exactly matches the
   nav's own height) leaves `.str-sc-strip`'s `position: sticky` no
   room to stick -- a sticky element can't move past its containing
   block's edge, and that block is this div. Once mounted (no longer
   empty), drop the div from the box tree so the nav's containing
   block becomes `main` instead, which is tall enough to let it stick
   below the themed navbar without covering it. Desktop only: the
   mobile rule below switches to a viewport-relative `position:
   fixed`, which doesn't need a tall containing block. */
.str-sc-toolbar-mount:not(:empty) {
    display: contents;
}

.str-sc-tb {
    justify-content: space-between;
}

.str-sc-back-label {
    white-space: nowrap;
}

.str-sc-tb-nav {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 8px;
    border-radius: 6px;
    color: var(--str-sc-paper);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease-out;
}

.str-sc-tb-nav:hover {
    background: rgba(255, 255, 255, 0.1);
}

.str-sc-tb-arrow {
    font-size: 20px;
    line-height: 1;
}

.str-sc-tb-nav-name {
    max-width: 220px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
}

.str-sc-jump {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    justify-content: center;
}

.str-sc-tb-trigger {
    display: flex;
    align-items: center;
    max-width: 100%;
    min-height: 44px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--str-sc-paper);
    font: inherit;
    gap: 8px;
    cursor: pointer;
}

.str-sc-tb-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.str-sc-tb-caret {
    flex: none;
    font-size: 10px;
    opacity: 0.85;
}

/* Bootstrap-style outline reset so the focus-visible ring below is the
   only ring shown; same pair as chrome.css's .str-sc-back. */
.str-sc-tb-nav:focus,
.str-sc-tb-trigger:focus {
    outline: none;
}

.str-sc-tb-nav:focus-visible,
.str-sc-tb-trigger: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: 6px;
}

/* The jump menu panel: a white popover on desktop, a full sheet at
   <= 640px (media query below). Ink-on-white focus rings here, the
   mirror of the paper-on-ink pair above, since the panel sits on white
   regardless of the strip's own ink background. */
.str-sc-jump-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: min(560px, calc(100vh - 140px));
    padding: 12px;
    transform: translateX(-50%);
    border-radius: 12px;
    background: #ffffff;
    color: #1d2b29;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

.str-sc-jump-header {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
}

.str-sc-jump-close {
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
}

.str-sc-jump-close:focus,
.str-sc-jump-input:focus {
    outline: none;
}

.str-sc-jump-close:focus-visible,
.str-sc-jump-input:focus-visible {
    outline: 2px solid #1f7166;
    outline-offset: 2px;
    border-radius: 6px;
}

.str-sc-jump-input {
    flex: none;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #d7ddd9;
    border-radius: 8px;
    font-size: 14px;
    color: #1d2b29;
}

.str-sc-jump-listbox {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.str-sc-jump-group-label {
    padding: 10px 8px 4px;
    color: #1f7166;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.str-sc-jump-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.str-sc-jump-option.is-active {
    background: #e3f2ef;
    box-shadow: inset 3px 0 0 #1f7166;
}

.str-sc-jump-option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.str-sc-jump-pill {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.str-sc-jump-pill-pro {
    background: #fdf1d8;
    color: #6b4500;
}

.str-sc-jump-pill-unreleased {
    background: #eceff1;
    color: #3f4a52;
}

.str-sc-jump-live {
    flex: none;
    padding: 0 8px;
    color: #5c6b66;
    font-size: 12px;
}

.str-sc-tb.is-menu-open {
    z-index: 2000;
}

@media (max-width: 900px) {
    .str-sc-tb-nav-name {
        display: none;
    }
}

@media (max-width: 640px) {
    .str-sc-tb {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        min-height: 64px;
        padding-bottom: env(safe-area-inset-bottom);
    }

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

    .str-sc-back-label {
        display: none;
    }

    .str-sc-jump-panel {
        position: fixed;
        inset: 0;
        top: 0;
        left: 0;
        z-index: auto;
        width: auto;
        max-width: none;
        max-height: none;
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        transform: none;
        border-radius: 0;
    }

    .str-sc-jump-input {
        flex: none;
    }

    .str-sc-jump-listbox {
        flex: 1;
    }

    .str-sc-toast {
        bottom: calc(80px + env(safe-area-inset-bottom));
    }

    /* toolbar.css loads only on gated showcase pages
       (tracking/templates/tracking/showcase/_globals.html), so these
       page-global selectors stay scoped to them. The body padding
       keeps a full manual scroll-to-bottom clear of the fixed bar,
       but a native scrollIntoView (focus, anchor jump, or a
       WebDriver .click()) stops as soon as the target rect fits the
       viewport and doesn't know the bar overlaps it -- so a target
       near the bottom can land right behind the bar. scroll-padding
       on the scrolling box is honored by scrollIntoView itself, so
       it keeps the same clearance for any of those scrolls too. */
    html {
        scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .str-sc-tb-nav {
        transition: none;
    }
}