/* Showcase chrome — shared by react-sandbox and Razor.Sandbox (TASK-06083).
 *
 * Source of truth: samples/shared/showcase-chrome.css
 *   - React: @import from samples/react-sandbox/src/styles.scss (after the theme chain)
 *   - Razor: node scripts/sync-showcase-chrome.mjs (BeforeBuild) → wwwroot/css/showcase-chrome.css
 * Brand only --sc-accent per surface in the sandbox entry (React cyan / Razor .NET purple).
 */
:root {
    --sc-sidebar: 272px;
    --sc-max: 900px;
    --sc-ink: #14161a;
    --sc-muted: #6b7280;
    --sc-border: #e6e8eb;
    --sc-border-soft: #f0f1f3;
    --sc-canvas: #fbfbfc;
    --sc-surface: #fff;
    --sc-surface-2: #f1f2f4;
    --sc-body-bg: #fff;
    --sc-side-bg: #fcfcfd;
    --sc-input-bg: #fff;
    --sc-example-head-bg: #fff;
    --sc-do-soft: #e8f6ee;
    --sc-dont-soft: #fdecec;
    --sc-warn-soft: #fff8e6;
    --sc-accent: #087ea4; /* default; sandboxes override */
    --sc-do: #137a43;
    --sc-dont: #c02626;
}

/* Dark values live ONCE, keyed on the RESOLVED theme. Both sandboxes stamp
   data-bs-theme="light|dark" on <html> before first paint (react index.html /
   Razor _Layout inline script) and keep it resolved on toggle and OS-preference
   change, so "auto" never reaches CSS. Rules below use only --sc-* variables;
   never hardcode a per-mode colour outside these two blocks. */
:root[data-bs-theme="dark"] {
    --sc-ink: #e6e8ee;
    --sc-muted: #8a90a0;
    --sc-border: #3a414f;
    --sc-border-soft: #2a2f3a;
    --sc-canvas: #181b23;
    --sc-surface: #1c2029;
    --sc-surface-2: #262b36;
    --sc-body-bg: #0f1117;
    --sc-side-bg: #0d0f15;
    --sc-input-bg: #232733;
    --sc-example-head-bg: #181b23;
    --sc-do-soft: color-mix(in srgb, var(--sc-do) 22%, #171a21);
    --sc-dont-soft: color-mix(in srgb, var(--sc-dont) 22%, #171a21);
    --sc-warn-soft: color-mix(in srgb, #e0a800 18%, #171a21);
}

* {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
}
body {
    background: var(--sc-body-bg);
    color: var(--sc-ink);
    font-family: Inter, system-ui, -apple-system, sans-serif;
}
a {
    color: var(--sc-accent);
}
code,
pre,
kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.sc-shell {
    display: grid;
    grid-template-columns: var(--sc-sidebar) 1fr;
    min-height: 100vh;
}

/* Sidebar */
.sc-side {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--sc-border);
    background: var(--sc-side-bg);
    padding: 1rem 0.75rem 3rem;
}
.sc-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.5rem 1rem;
    justify-content: space-between;
}
.sc-brand-mark {
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: #fff;
    padding: 0.18rem 0.45rem;
    border-radius: 0.35rem;
    background: var(--sc-accent);
}
.sc-brand-name {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.1;
}
.sc-brand-sub {
    color: var(--sc-muted);
    font-size: 0.74rem;
}
.sc-theme-toggle {
    background: none;
    border: 1px solid var(--sc-border);
    border-radius: 0.4rem;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--sc-ink);
    transition: all 0.15s;
    flex-shrink: 0;
}
.sc-theme-toggle:hover {
    border-color: var(--sc-accent);
    background: color-mix(in srgb, var(--sc-accent) 8%, transparent);
}
.sc-search {
    width: 100%;
    margin: 0 0.1rem 0.5rem;
}
.sc-search input {
    width: 100%;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--sc-border);
    border-radius: 0.45rem;
    font-size: 0.85rem;
    background: var(--sc-input-bg);
    color: var(--sc-ink);
}
/* On-page menu-motion bar — surfaces the product-level data-wui-menu-motion switch on
   every doc page whose component opens a menu-like overlay. */
.sc-motionbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1rem 0 1.4rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--sc-border);
    border-radius: 0.6rem;
    background: var(--sc-canvas);
}
.sc-motionbar-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-muted);
    margin-right: 0.2rem;
    white-space: nowrap;
}
.sc-motionbar-btn {
    border: 1px solid var(--sc-border);
    background: var(--sc-surface);
    color: var(--sc-ink);
    border-radius: 999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.sc-motionbar-btn:hover {
    border-color: var(--sc-accent);
}
.sc-motionbar-btn.active {
    background: var(--sc-accent);
    border-color: var(--sc-accent);
    color: #fff;
}
.sc-motionbar-hint {
    flex-basis: 100%;
    font-size: 0.72rem;
    color: var(--sc-muted);
}

.sc-navgroup {
    margin-top: 0.9rem;
}
.sc-navgroup-title {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--sc-muted);
    font-weight: 700;
    margin: 0 0.5rem 0.2rem;
}
.sc-navlink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.33rem 0.55rem;
    border-radius: 0.4rem;
    color: var(--sc-ink);
    text-decoration: none;
    font-size: 0.875rem;
}
.sc-navlink:hover {
    background: var(--sc-surface-2);
}
.sc-navlink.active {
    background: color-mix(in srgb, var(--sc-accent) 12%, var(--sc-surface));
    color: var(--sc-accent);
    font-weight: 600;
}
.sc-navlink.soon {
    color: var(--sc-muted);
    cursor: default;
}
.sc-soon-tag {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-muted);
    border: 1px solid var(--sc-border);
    border-radius: 1rem;
    padding: 0 0.35rem;
}

/* Content */
.sc-main {
    min-width: 0;
}
.sc-page {
    max-width: var(--sc-max);
    margin: 0 auto;
    padding: 2.5rem 2.25rem 6rem;
}
.sc-pagehead {
    border-bottom: 1px solid var(--sc-border);
    padding-bottom: 1.4rem;
    margin-bottom: 0.5rem;
}
.sc-cat {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sc-accent);
}
.sc-title {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0.3rem 0 0.4rem;
}
.sc-tagline {
    font-size: 1.12rem;
    color: var(--sc-muted);
    margin: 0;
    line-height: 1.5;
}
.sc-import {
    margin-top: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #0f1117;
    color: #e6e6e6;
    border-radius: 0.45rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
}
.sc-import .bi {
    color: color-mix(in srgb, var(--sc-accent) 55%, #fff);
}

/* Table of contents (in-page) — React catalogue */
.sc-toc {
    position: sticky;
    top: 1.25rem;
    align-self: start;
    font-size: 0.82rem;
}
.sc-toc a {
    display: block;
    color: var(--sc-muted);
    text-decoration: none;
    padding: 0.18rem 0;
    border-left: 2px solid var(--sc-border-soft);
    padding-left: 0.7rem;
}
.sc-toc a:hover {
    color: var(--sc-accent);
    border-color: var(--sc-accent);
}

.sc-section {
    margin-top: 2.75rem;
    scroll-margin-top: 1rem;
}
.sc-section > h2 {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
}
.sc-section-intro {
    color: var(--sc-muted);
    margin: 0 0 1rem;
    max-width: 62ch;
    line-height: 1.55;
}
.sc-lead {
    font-size: 1.02rem;
    line-height: 1.65;
    margin: 1.25rem 0 0;
    max-width: 66ch;
}
.sc-lead p {
    margin: 0 0 0.75rem;
}
.sc-lead-list {
    margin: 0 0 0.85rem;
    padding-left: 1.15rem;
}
.sc-lead-list li {
    margin: 0.25rem 0;
}

/* Example card */
.sc-example {
    border: 1px solid var(--sc-border);
    border-radius: 0.7rem;
    overflow: hidden;
    margin: 1.1rem 0 1.6rem;
}
.sc-example-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--sc-border);
    background: var(--sc-example-head-bg);
}
.sc-example-title {
    font-weight: 600;
    font-size: 0.92rem;
}
.sc-example-desc {
    color: var(--sc-muted);
    font-size: 0.85rem;
    margin: 0.1rem 0 0;
}
.sc-example-canvas {
    padding: 1.75rem 1.5rem;
    background: var(--sc-canvas);
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    background-image: radial-gradient(var(--sc-border) 0.5px, transparent 0.5px);
    background-size: 16px 16px;
}
/* A select/multiselect placed straight in the flex canvas shrinks to its content — its
   menu then wraps the option labels. Give it a readable, capped width. */
.sc-example-canvas > .field:has(wui-select),
.sc-example-canvas > .field:has(wui-multiselect),
.sc-example-canvas > .field:has(wui-autocomplete),
.sc-example-canvas > wui-select,
.sc-example-canvas > wui-multiselect,
.sc-example-canvas > wui-autocomplete {
    width: 100%;
    max-width: 380px;
}
/* AppPageHeader is a full-width masthead — let it fill the flex canvas so its trailing
   actions push to the right edge (space-between) instead of shrinking to content width.
   margin-bottom: 0 so the canvas's align-items: center leaves it truly vertically centred. */
.sc-example-canvas > .page-header {
    flex: 1 1 100%;
    margin-bottom: 0;
}
.sc-code-btn {
    border: 1px solid var(--sc-border);
    background: var(--sc-surface);
    border-radius: 0.35rem;
    font-size: 0.72rem;
    color: var(--sc-muted);
    padding: 0.12rem 0.5rem;
    cursor: pointer;
    white-space: nowrap;
}
.sc-code-btn:hover {
    color: var(--sc-ink);
}
/* No-JS fallback: showcase.js upgrades <details> into a header button (see _Layout). */
.sc-example details {
    border-top: 1px solid var(--sc-border);
}
.sc-example details > summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--sc-muted);
    padding: 0.45rem 0.9rem;
    user-select: none;
}
.sc-example details > summary::-webkit-details-marker {
    display: none;
}
.sc-example details > summary:hover {
    color: var(--sc-ink);
}
.sc-example details[open] > summary {
    border-bottom: 1px solid var(--sc-border-soft);
}
.sc-code {
    margin: 0;
    background: #0f1117;
    color: #e8eaed;
    padding: 0.9rem 1.05rem;
    font-size: 0.8rem;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre;
}
.sc-code .tok-tag {
    color: #7bd0e6;
}
.sc-code .tok-attr {
    color: #c3a6ff;
}
.sc-code .tok-str {
    color: #9ae6b4;
}

/* Do / Don't */
.sc-dodont {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0 1.4rem;
}
.sc-dd {
    border: 1px solid var(--sc-border);
    border-radius: 0.7rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sc-dd-head {
    padding: 0.5rem 0.9rem;
    font-weight: 700;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.sc-dd--do .sc-dd-head {
    background: var(--sc-do-soft);
    color: var(--sc-do);
}
.sc-dd--dont .sc-dd-head {
    background: var(--sc-dont-soft);
    color: var(--sc-dont);
}
.sc-dd-canvas {
    padding: 1.1rem;
    background: var(--sc-canvas);
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
/* A select/multiselect shrinks to its content inside this flex canvas — collapsing to
   ~150px so its menu wraps. Give the select's wrapper a definite width to fill the card. */
.sc-dd-canvas > div:has(.field),
.sc-dd-canvas > div:has(wui-select),
.sc-dd-canvas > div:has(wui-multiselect),
.sc-dd-canvas > div:has(wui-autocomplete),
.sc-dd-canvas > .field,
.sc-dd-canvas > wui-select,
.sc-dd-canvas > wui-multiselect,
.sc-dd-canvas > wui-autocomplete {
    width: 100%;
}
.sc-dd-note {
    padding: 0.7rem 0.9rem;
    font-size: 0.86rem;
    color: var(--sc-ink);
    border-top: 1px solid var(--sc-border-soft);
}

/* Callout */
.sc-callout {
    border: 1px solid transparent;
    border-left: 4px solid var(--sc-accent);
    background: color-mix(in srgb, var(--sc-accent) 7%, var(--sc-surface));
    padding: 0.8rem 1rem;
    border-radius: 0.5rem;
    margin: 1.2rem 0;
    font-size: 0.9rem;
    line-height: 1.55;
}
.sc-callout strong {
    display: block;
    margin-bottom: 0.1rem;
}
.sc-callout--warn {
    border-left-color: #e0a800;
    background: var(--sc-warn-soft);
}

/* When to use */
.sc-usegrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1rem;
}
.sc-usecol h4 {
    font-size: 0.95rem;
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sc-usecol--use h4 {
    color: var(--sc-do);
}
.sc-usecol--avoid h4 {
    color: var(--sc-dont);
}
.sc-uselist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sc-uselist li {
    padding: 0.4rem 0 0.4rem 1.55rem;
    position: relative;
    font-size: 0.9rem;
    line-height: 1.5;
    border-bottom: 1px solid var(--sc-border-soft);
}
.sc-uselist li:last-child {
    border-bottom: 0;
}
.sc-uselist li .alt {
    color: var(--sc-muted);
}
.sc-uselist--use li::before {
    content: "\2713";
    color: var(--sc-do);
    position: absolute;
    left: 0.15rem;
    top: 0.4rem;
    font-weight: 700;
}
.sc-uselist--avoid li::before {
    content: "\2715";
    color: var(--sc-dont);
    position: absolute;
    left: 0.15rem;
    top: 0.4rem;
    font-weight: 700;
}

/* Props */
.sc-props-wrap {
    overflow-x: auto;
    border: 1px solid var(--sc-border);
    border-radius: 0.7rem;
    margin-top: 1rem;
}
.sc-props {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.sc-props th {
    text-align: left;
    background: var(--sc-canvas);
    border-bottom: 1px solid var(--sc-border);
    padding: 0.55rem 0.8rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-muted);
    white-space: nowrap;
}
.sc-props td {
    border-bottom: 1px solid var(--sc-border-soft);
    padding: 0.6rem 0.8rem;
    vertical-align: top;
    line-height: 1.5;
}
.sc-props tr:last-child td {
    border-bottom: 0;
}
.sc-prop-name {
    font-weight: 600;
    font-family: ui-monospace, monospace;
    font-size: 0.82rem;
}
.sc-prop-req {
    color: var(--sc-dont);
    font-weight: 700;
}
.sc-prop-type code {
    color: var(--sc-accent);
    background: color-mix(in srgb, var(--sc-accent) 8%, var(--sc-surface));
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.78rem;
}
.sc-prop-default code {
    color: var(--sc-muted);
    font-size: 0.78rem;
}

/* Related */
.sc-related {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
}
.sc-related a {
    display: block;
    border: 1px solid var(--sc-border);
    border-radius: 0.7rem;
    padding: 0.8rem 0.9rem;
    text-decoration: none;
    color: var(--sc-ink);
    transition: border-color 0.12s;
}
.sc-related a:hover {
    border-color: var(--sc-accent);
}
.sc-related-name {
    font-weight: 600;
    font-size: 0.92rem;
}
.sc-related-desc {
    color: var(--sc-muted);
    font-size: 0.82rem;
    margin-top: 0.15rem;
    line-height: 1.45;
}

.sc-soon-page {
    color: var(--sc-muted);
    max-width: 60ch;
}

@media (max-width: 992px) {
    .sc-shell {
        grid-template-columns: 1fr;
    }
    .sc-side {
        position: static;
        height: auto;
    }
    .sc-dodont,
    .sc-usegrid {
        grid-template-columns: 1fr;
    }
}

/* Icon gallery — the "All icons" section on the Icon page (mirrors react-sandbox styles.scss) */
.sc-iconsearch {
    width: 100%;
    max-width: 340px;
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--sc-border);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    background: var(--sc-input-bg);
    color: var(--sc-ink);
}
.sc-icongrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 0.5rem;
}
.sc-icontile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1rem 0.5rem;
    min-height: 90px;
    border: 1px solid var(--sc-border);
    border-radius: 0.6rem;
    background: var(--sc-surface);
    color: var(--sc-ink);
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s;
    font-family: inherit;
}
.sc-icontile:hover {
    /* --sc-* only: the theme's --wui-primary tint ramp is deliberately light-mode
     fixed (dark components use color-mix), so it must not style the chrome. */
    border-color: var(--sc-accent);
    background: color-mix(in srgb, var(--sc-accent) 10%, transparent);
}
.sc-iconname {
    font-size: 0.72rem;
    color: var(--sc-muted);
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}
.sc-iconempty {
    color: var(--sc-muted);
    font-size: 0.9rem;
    padding: 1rem 0;
}

/* Popover examples (dropdown/select/datepicker) must not be clipped by the card's
   rounded overflow — opt in with .is-overflow (mirrors react-sandbox styles.scss). */
.sc-example.is-overflow {
    overflow: visible;
}
.sc-example.is-overflow .sc-example-head {
    border-radius: 0.7rem 0.7rem 0 0;
}
.sc-example.is-overflow .sc-example-canvas {
    border-radius: 0 0 0.7rem 0.7rem;
    min-height: 180px;
    align-items: flex-start;
}

/* AppShell live-preview device frame (mirrors react-sandbox styles.scss).
   AppShell is viewport-anchored: min-height:100vh, a sticky topbar and a fixed
   footer. Dropped raw into a doc card it overflows and can't scroll. This frame hands it a bounded "device viewport" — `contain` makes the
   frame the containing block for the shell's fixed toggle / footer / drawer / scrim, and
   the overrides swap its 100vh sizing for 100%-of-frame so the page scrolls inside
   .app-content (sticky topbar above, footer pinned below), exactly as the real shell
   scrolls against the window. Sandbox-only; the published theme is untouched. */
.sc-shellframe {
    width: 100%;
    height: 480px;
    min-height: 240px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    contain: layout paint;
    resize: vertical;
}
.sc-shellframe.is-tall {
    height: 560px;
}
.sc-shellframe.is-short {
    height: 340px;
}
.sc-shellframe .app-shell {
    min-height: 0;
    height: 100%;
}
.sc-shellframe .app-sidebar {
    position: relative;
    height: 100%;
}
.sc-shellframe .app-main {
    height: 100%;
    min-height: 0;
}
/* Scroll the content, not the window: topbar & footer are flex:none, content is flex:1. */
.sc-shellframe .app-content {
    overflow-y: auto;
}
/* The real footer is fixed to the viewport; in the frame it rides the flex flow. */
.sc-shellframe .app-footer {
    position: static;
    left: auto;
    right: auto;
    border-top: 1px solid var(--color-border);
}
.sc-shell-demo {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.sc-shell-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}
.sc-shell-demo p {
    max-width: none;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Playground ────────────────────────────────────────────────────────────
   The live "poke every prop" panel that sits above the option matrix on every
   component page. Same markup contract on both surfaces: a `.sc-pg` wrapper
   (a <form> on Razor, a <div> on React) holding a control rail, a preview
   canvas and the generated call. Razor drives it by round-tripping the query
   string through the real tag helper — so what you see is the tag helper's
   own output, not a JS imitation. */
.sc-pg {
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius, 0.6rem);
    background: var(--sc-surface);
    overflow: hidden;
    margin-bottom: 1.1rem;
}
.sc-pg-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;
    align-items: flex-end;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--sc-border);
    background: var(--sc-surface);
}
.sc-pg-ctl {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sc-muted);
    text-transform: none;
}
.sc-pg-ctl > select,
.sc-pg-ctl > input[type="text"],
.sc-pg-ctl > input[type="number"] {
    border: 1px solid var(--sc-border);
    border-radius: 0.35rem;
    background: var(--sc-canvas);
    color: var(--sc-ink);
    font-size: 0.78rem;
    font-weight: 400;
    padding: 0.25rem 0.45rem;
    min-width: 8.5rem;
    max-width: 14rem;
}
.sc-pg-ctl > select:focus-visible,
.sc-pg-ctl > input:focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: 1px;
}
/* Booleans read as a checkbox + name on one line, so a rail of six toggles
   stays scannable next to the two or three dropdowns. */
.sc-pg-ctl--bool {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    padding-bottom: 0.3rem;
    cursor: pointer;
}
.sc-pg-ctl--bool > input {
    accent-color: var(--sc-accent);
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
    cursor: pointer;
}
.sc-pg-reset {
    margin-left: auto;
    align-self: center;
    border: 1px solid var(--sc-border);
    background: var(--sc-surface);
    border-radius: 0.35rem;
    font-size: 0.72rem;
    color: var(--sc-muted);
    padding: 0.18rem 0.55rem;
    cursor: pointer;
}
.sc-pg-reset:hover {
    color: var(--sc-ink);
}
.sc-pg-canvas {
    padding: 2rem 1.5rem;
    background: var(--sc-canvas);
    background-image: radial-gradient(var(--sc-border) 0.5px, transparent 0.5px);
    background-size: 16px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    /* `safe` keeps a preview wider than the canvas fully reachable: it centres while the
       content fits, then falls back to start-alignment once it overflows — so the left edge
       is never clipped past the scroll origin (the classic flex + centre + overflow trap).
       Paired with overflow-x: auto below, an oversized preview scrolls instead of being cut. */
    justify-content: safe center;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    min-height: 7rem;
}
/* A field-shaped component needs a readable width in the centred canvas. */
.sc-pg-canvas > .field,
.sc-pg-canvas > .sc-pg-fill {
    width: 100%;
    max-width: 100%;
}
/* Table-in-a-playground scroll region: a wide table (or a tall one) scrolls inside its own
   box rather than stretching the canvas. `container-type: inline-size` lets a sticky empty
   state measure the VISIBLE width (100cqw) so it stays centred while the header scrolls. */
.sc-tbl-scroll {
    width: 100%;
    overflow: auto;
    max-height: 320px;
    container-type: inline-size;
    border-radius: var(--radius, 12px);
}
/* Empty state: the header row still scrolls with the table, but the message pins to the
   visible viewport (sticky at the left edge, sized to the scroller's width) and centres its
   own content — so it never scrolls off-screen when the wide header is dragged sideways.
   React wraps the message in `.sc-tbl-empty-sticky`; the Razor `<app-table-empty-state>` tag
   helper emits `.tbl-empty` straight into the cell, so both shapes are pinned here for parity. */
.sc-tbl-scroll .sc-tbl-empty-sticky,
.sc-tbl-scroll td.wui-table-empty > .tbl-empty {
    position: sticky;
    left: 0;
    width: 100cqw;
}
.sc-pg-code {
    margin: 0;
    background: #0f1117;
    color: #e8eaed;
    padding: 0.8rem 1.05rem;
    font-size: 0.78rem;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre;
}

/* Callback log — a prop like onChange has nothing to drive from a control, so the
   playground wires it to a handler and shows the calls here (newest first). */
.sc-pg-events {
    border-top: 1px solid var(--wui-border, #e5e7eb);
    padding: 0.7rem 1.05rem;
    background: var(--wui-surface-2, #f8f9fb);
    font-size: 0.78rem;
}

.sc-pg-events-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
    color: var(--wui-text-3, #6b7280);
}

.sc-pg-events-names {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--wui-font-mono, ui-monospace, monospace);
}

.sc-pg-events-empty {
    margin: 0.4rem 0 0;
    color: var(--wui-text-3, #6b7280);
}

.sc-pg-events-list {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.15rem;
}

.sc-pg-events-list code {
    font-size: 0.76rem;
}

/* The fetch-backed Razor playground: a hint that the preview is being re-rendered,
   without moving anything (the controls must not shift under the pointer). */
form.sc-pg[data-pg-busy] .sc-pg-canvas {
    opacity: 0.6;
    transition: opacity 120ms ease;
}

/* ── Option matrix ─────────────────────────────────────────────────────────
   The exhaustive "every value of every prop" grid. Each cell is one rendered
   variant under its own literal prop value, so a reviewer can diff the whole
   surface at a glance and a developer can see which value produced which look. */
.sc-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.9rem;
    padding: 1.5rem;
    background: var(--sc-canvas);
    background-image: radial-gradient(var(--sc-border) 0.5px, transparent 0.5px);
    background-size: 16px 16px;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius, 0.6rem);
    margin-bottom: 1.1rem;
}
.sc-matrix--wide {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.sc-matrix--full {
    grid-template-columns: 1fr;
}
/* In a full-width matrix, let the demo timeline fill the cell so a progress
   tracker's right-aligned date pins to the edge instead of overflowing. */
.sc-matrix--full .sc-matrix-demo .timeline {
    width: 100%;
}
.sc-matrix-cell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.85rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 0.5rem;
    min-width: 0;
}
.sc-matrix-cell > code:first-child {
    font-size: 0.68rem;
    color: var(--sc-muted);
    background: none;
    padding: 0;
    word-break: break-word;
}
.sc-matrix-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    min-width: 0;
}
/* Sub-heading inside a section — labels each prop group in the option matrix. */
.sc-suphead {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sc-muted);
    margin: 1.4rem 0 0.5rem;
}
.sc-section > .sc-suphead:first-of-type {
    margin-top: 0.4rem;
}

/* Theme switch wave (samples/shared/theme-wave.js). The script clips the new page to a rising
   wave, so the browser's default cross-fade is turned off for that transition only: the old
   snapshot stays fully visible above the crest and the new page fully visible below it. */
html.sc-theme-wave::view-transition-old(root),
html.sc-theme-wave::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
/* Hidden until the script attaches the wave, so the new theme never flashes in full first. */
html.sc-theme-wave-up::view-transition-new(root) {
    clip-path: inset(100% 0 0 0);
}
html.sc-theme-wave-down::view-transition-new(root) {
    clip-path: inset(0 0 100% 0);
}