/* ========================================================================== 
   Demo switcher — THE SINGLE SOURCE OF TRUTH (2026-09-28)

   Every demo page links THIS file instead of carrying its own copy: before
   this pass the .users__tools rail, the switcher pills and (after the
   consolidation) the launcher/panel lived in 28 separate inline stylesheets,
   in five variants of the rail rule alone. One file, one set of numbers.

   The page's own contract:
     · `.users__tools` is a FIXED rail on the right edge, VERTICALLY CENTRED
       (top: 50% + translateY(-50%)) and above the cookie bar (z 200). Two
       page-specific divergences were removed for uniformity:
         - database-demo bottom-anchored it (inset-block-end + z 61) and
           hid it entirely below 768px — both rules are gone, the rail is
           the same everywhere now;
         - database-demo also wore a one-off frosted-glass pill
           (--u-glass/--u-blur) for the links; the canonical pill below
           (the 27-file majority) wins.
     · `.users__demo-link` is the pill form; inside the panel the same class
       becomes a ROW (see the panel rules) — the aria-current ink fill is
       restated there so the "you are here" marker survives the row rules.
     · The LIST itself lives in assets/js/demo-switcher.js — the 21 demo pages
       plus three non-file entries (the forum app at /forum/, its dev server and
       the external shop channel; only the shop opens in a new tab); this file
       only styles what that script renders, plus the optional page-local
       links (the trading-item variants keep their 現行版面/版面 A/版面 B
       group as markup in .users__tools).

    Switcher colors and typography prefer the shell token names and fall back to
    the legacy --u-* names used by older pages.
   ========================================================================== */

/* The rail. Fixed, centred, above the cookie bar (80) and every page layer. */
.users__tools {
    position: fixed;
    z-index: 200;
    inset-block-start: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sf-sp-3);
}

/* The palette tab rides the rail as a static flex child (its own .tintpick
   positioning is page-local CSS; only this rail-scoped correction is shared). */
.users__tools .tintpick {
    position: static;
    transform: none;
}

/* The switcher pill uses a dedicated text-safe link color rather than any
    page's brand — demo navigation belongs to no single page. */
.users__demo-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--sf-surface);
    box-shadow: var(--sf-shadow-sm);
    font-size: var(--shell-fs-sm, var(--u-fs-2));
    font-weight: 600;
    color: var(--shell-link, var(--u-link));
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow .2s var(--shell-ease, var(--u-ease)), transform .2s var(--shell-ease, var(--u-ease));
}

.users__demo-link:hover {
    box-shadow: var(--sf-shadow);
    transform: translateY(-1px);
}

/* "You are here": solid ink, no hover lift — it is not a dead link. */
.users__demo-link[aria-current="page"] {
    background: var(--sf-ink);
    color: var(--sf-surface);
}

.users__demo-link[aria-current="page"]:hover {
    box-shadow: var(--sf-shadow-sm);
    transform: none;
}

/* -------------------------------------------------------------------------
   Launcher + panel (rendered by assets/js/demo-switcher.js)
   ---------------------------------------------------------------------- */

/* Open state reads as "the menu is out": inverted ink, like the switcher's
   own current-page marker. */
.users__tools-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--sf-surface);
    box-shadow: var(--sf-shadow-sm);
    font: inherit;
    font-size: var(--shell-fs-sm, var(--u-fs-2));
    font-weight: 600;
    color: var(--shell-link, var(--u-link));
    cursor: pointer;
    transition: box-shadow .2s var(--shell-ease, var(--u-ease)), background .2s var(--shell-ease, var(--u-ease)),
                color .2s var(--shell-ease, var(--u-ease));
}

.users__tools-toggle:hover {
    box-shadow: var(--sf-shadow);
}

.users__tools-toggle[aria-expanded="true"] {
    background: var(--sf-ink);
    color: var(--sf-surface);
}

/* Opens LEFT: the rail hugs the right edge, there is no room on the right.
   Vertically centred on the rail; max-height + scroll so 15 rows + headings
   fit a phone-height viewport. */
.users__tools__panel {
    position: absolute;
    inset-inline-end: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 210px;
    max-width: calc(100vw - 76px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: var(--sf-sp-3);
    border-radius: var(--sf-radius-lg);
    background: var(--sf-surface);
    box-shadow: var(--sf-shadow-lg);
}

.users__tools__panel.is-open {
    display: block;
}

.users__tools-group + .users__tools-group {
    margin-block-start: var(--sf-sp-3);
    padding-block-start: var(--sf-sp-3);
    border-block-start: 1px solid var(--sf-line);
}

.users__tools-label {
    margin: 0 0 var(--sf-sp-1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--sf-muted);
}

/* In the panel the pills become ROWS: 15 shadowed pills inside a card would
   be the clutter the consolidation removed. */
.users__tools__panel .users__demo-link {
    display: flex;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--sf-radius-sm);
    background: none;
    box-shadow: none;
}

.users__tools__panel .users__demo-link:hover {
    background: var(--sf-brand-tint);
    box-shadow: none;
    transform: none;
}

/* Restate the "you are here" fill: the row rules above tie the base
   [aria-current] rule on specificity and sit LATER in the sheet, so without
   these two the marker would be flattened (and its label would turn white on
   a light tint on hover). */
.users__tools__panel .users__demo-link[aria-current="page"] {
    background: var(--sf-ink);
    color: var(--sf-surface);
}

.users__tools__panel .users__demo-link[aria-current="page"]:hover {
    background: var(--sf-ink);
    color: var(--sf-surface);
}