/*
  demo-tour.css - layout for the three demo pages and the /demo chooser. Structure and spacing only; colour comes
  from --theme-* tokens so the whole page re-skins when the skin menu changes. The
  Commander's Console illustration carries its own token set (see the sample scope class
  in render-executive-blue.css), so it keeps its own look inside any page skin.
*/

/* Sample-scope token set for the console illustration: the Executive look (the console's
   own skin), scoped to the illustration only and never to the page. These values mirror
   the Executive skin's measured palette; the skin files themselves are untouched. */
.bu-sample-executive-blue {
  --theme-bg-canvas: #030403;
  --theme-bg-surface: rgba(255, 255, 255, 0.04);
  --theme-bg-card: rgba(255, 255, 255, 0.07);
  --theme-border-inactive: rgba(255, 255, 255, 0.12);
  --theme-border-active: #0047ab;
  --theme-text-main: #F0F4FA;
  --theme-text-muted: #A0B4D4;
  --theme-state-warning: #fbbf24;
  --theme-state-error: #ef4444;
  --theme-accent-primary: #4d8fe8;
  --theme-state-gold: #F5C542;
  --theme-state-unpaid: #ff7a1a;
  --theme-x-elevation-2: 0 0 15px rgba(0, 71, 171, 0.5);
  color-scheme: dark;
}

/* Chooser doors: stacked on a phone (see the max-width block), buttons are full touch size. */
.demo-door .bu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--structure-touch-min);
}

/* Plain-text link that must still be a full-size touch target. */
.demo-plain-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--structure-touch-min);
    overflow-wrap: anywhere;
}

/* The share action's live message ("Link copied"): visible, never colour-only. */
.demo-share-status {
    min-height: 1.5em;
    margin: 0;
    font-weight: var(--structure-weight-bold);
}

.demo-share .bu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--structure-touch-min);
    max-width: 100%;
    text-align: center;
}

/* /demo/dojo page background: ONE scoped property. A chosen gym background is dropped in by
   setting --demo-dojo-bg on .demo-dojo-page (for example url("/css/skins/assets/dojo/gym.webp"));
   while it is "none" the page keeps its own skin background (the Fight Night arena). */
.demo-dojo-page {
    --demo-dojo-bg: none;
    background-image: var(--demo-dojo-bg);
    background-size: cover;
    background-position: center;
}

.demo-step {
    scroll-margin-top: 90px;
}

.demo-visual {
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-md);
    align-items: flex-start;
    min-width: 0;
}

.demo-visual > * {
    max-width: 100%;
}

.demo-visual-label {
    font-size: var(--structure-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}

.demo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--structure-gap-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.demo-chip {
    padding: var(--structure-gap-xs) var(--structure-gap-md);
    border: 1px solid var(--theme-border-inactive);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-card);
}

.demo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--structure-gap-md);
    width: 100%;
    align-items: stretch;
}

.demo-card {
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-xs);
    padding: var(--structure-gap-md);
    border: 1px solid var(--theme-border-inactive);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-card);
    min-width: 0;
    overflow-wrap: anywhere;
}

.demo-card .bu-metric-value small {
    font-size: var(--structure-text-sm);
}

.demo-media {
    min-height: 8rem;
}

.demo-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-sm);
    width: 100%;
}

.demo-feature-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--structure-gap-sm);
    padding: var(--structure-gap-sm) var(--structure-gap-md);
    border: 1px solid var(--theme-border-inactive);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-card);
}

.demo-soon,
.demo-live {
    border: 1px solid var(--theme-border-active);
}

.demo-live {
    color: var(--theme-state-healthy);
}

.demo-state {
    font-weight: var(--structure-weight-bold);
}

.demo-gauge-rotate {
    transform: rotate(-90deg);
}

/* ---- Commander's Console illustration (simplified, not interactive) ---- */
.demo-console {
    margin: 0;
    width: 100%;
    background: var(--theme-bg-canvas);
    color: var(--theme-text-main);
    border: 1px solid var(--theme-border-active);
    border-radius: var(--structure-radius-panel);
    box-shadow: var(--theme-x-elevation-2);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.demo-console-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--structure-gap-sm);
    padding: var(--structure-gap-sm) var(--structure-gap-md);
    background: var(--theme-bg-surface);
    border-bottom: 1px solid var(--theme-border-inactive);
}

.demo-console-body {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
}

.demo-console-rail {
    list-style: none;
    margin: 0;
    padding: var(--structure-gap-sm);
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-xs);
    background: var(--theme-bg-surface);
    border-right: 1px solid var(--theme-border-inactive);
}

.demo-console-rail li {
    padding: var(--structure-gap-sm);
    border-radius: var(--structure-radius-max);
    color: var(--theme-text-muted);
    font-size: var(--structure-text-sm);
}

.demo-console-rail .demo-console-rail-current {
    color: var(--theme-text-main);
    background: var(--theme-bg-card);
    border-left: 3px solid var(--theme-border-active);
    font-weight: var(--structure-weight-bold);
}

.demo-console-main {
    padding: var(--structure-gap-md);
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-md);
    min-width: 0;
}

.demo-console-main h3 {
    font-size: var(--structure-text-md);
    margin: 0;
}

.demo-console-warnings {
    padding: var(--structure-gap-sm) var(--structure-gap-md);
    border: 1px solid var(--theme-state-warning);
    border-radius: var(--structure-radius-panel);
}

.demo-console-warnings p {
    margin: var(--structure-gap-xs) 0 0 0;
}

.demo-console-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
    gap: var(--structure-gap-sm);
}

.demo-console-tile {
    padding: var(--structure-gap-sm) var(--structure-gap-md);
    border: 1px solid var(--theme-border-inactive);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-card);
}

.demo-console-tile .bu-metric-label {
    margin: 0;
    font-size: var(--structure-text-xs);
}

.demo-console-roster {
    list-style: none;
    margin: 0;
    padding: 0;
}

.demo-console-roster li {
    display: grid;
    grid-template-columns: 1.6fr 0.6fr 0.8fr 1.2fr;
    gap: var(--structure-gap-sm);
    align-items: center;
    padding: var(--structure-gap-xs) 0;
    border-bottom: 1px solid var(--theme-border-inactive);
    font-size: var(--structure-text-sm);
}

.demo-console-student {
    display: flex;
    align-items: center;
    gap: var(--structure-gap-md);
    min-width: 0;
}

/* Glow-ring avatar, mirroring the console's ring design: outlined glow ring, initials inside. */
.demo-cc-avatar {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    margin: 3px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--structure-text-sm);
    font-weight: 700;
    color: var(--theme-text-main);
    background: var(--theme-bg-card);
}

.demo-cc-avatar__ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--_ring, var(--theme-border-inactive));
    box-shadow: 0 0 8px var(--_ring, transparent);
}

.demo-cc-avatar--risk { --_ring: var(--theme-state-error); }
.demo-cc-avatar--streak { --_ring: var(--theme-accent-primary); }
.demo-cc-avatar--test { --_ring: var(--theme-state-gold); }
.demo-cc-avatar--unpaid { --_ring: var(--theme-state-unpaid); }

@media (prefers-reduced-motion: no-preference) {
    .demo-cc-avatar--risk .demo-cc-avatar__ring { animation: demo-ring-glow 1.6s ease-in-out infinite; }
}

@keyframes demo-ring-glow {
    0%, 100% { box-shadow: 0 0 4px var(--_ring); }
    50% { box-shadow: 0 0 10px var(--_ring); }
}

.demo-ring-label {
    display: block;
    font-size: var(--structure-text-xs);
    color: var(--theme-text-muted);
}

.demo-ring-key {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--structure-gap-md);
    margin: var(--structure-gap-sm) 0 0 0;
    padding: 0;
    font-size: var(--structure-text-xs);
}

.demo-ring-key li {
    display: inline-flex;
    align-items: center;
    gap: var(--structure-gap-xs);
}

.demo-ring-key .demo-cc-avatar {
    width: 14px;
    height: 14px;
    margin: 3px;
    background: transparent;
}

.demo-console-roster .demo-console-roster-head {
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--structure-text-xs);
}

@media (max-width: 720px) {
    .demo-console-roster li {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .demo-console-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .demo-console-rail {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid var(--theme-border-inactive);
    }

    .demo-console-rail .demo-console-rail-current {
        border-left: 0;
        border-bottom: 3px solid var(--theme-border-active);
    }
}

/* ---- Mat check-in roster (staff demo, not interactive) ---- */
.demo-mat-roster {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--structure-gap-sm);
    width: 100%;
}

.demo-mat-student {
    display: flex;
    align-items: center;
    gap: var(--structure-gap-md);
    min-height: var(--structure-touch-min);
    padding: var(--structure-gap-sm) var(--structure-gap-md);
    border: 1px solid var(--theme-border-inactive);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-card);
    min-width: 0;
}

.demo-mat-student .demo-ring-label {
    margin-left: auto;
}

/* Ring states that use page tokens only (the page skin supplies them). */
.demo-cc-avatar--in { --_ring: var(--theme-state-healthy); }
.demo-cc-avatar--waiting { --_ring: var(--theme-border-inactive); }

/* ---- Locker Room HUD and skill tree (student demo) ---- */
.demo-hud {
    align-items: flex-start;
}

.demo-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-sm);
}

.demo-tree-node {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--structure-gap-md);
    padding: var(--structure-gap-sm) var(--structure-gap-md);
    border: 1px solid var(--theme-border-inactive);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-card);
}

.demo-tree-node--done { border-color: var(--theme-state-healthy); }
.demo-tree-node--progress { border-color: var(--theme-border-active); }
.demo-tree-node--locked { opacity: 0.8; }

/* ---- Console sample extras: student snapshot and paper sheet ---- */
.demo-drawer,
.demo-sheet {
    padding: var(--structure-gap-sm) var(--structure-gap-md);
    border: 1px solid var(--theme-border-inactive);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-card);
}

.demo-drawer-list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: var(--structure-gap-sm);
}

.demo-drawer-list dt {
    font-size: var(--structure-text-xs);
    color: var(--theme-text-muted);
    text-transform: uppercase;
}

.demo-drawer-list dd {
    margin: 0;
}

.demo-sheet-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-xs);
}

/* ---- Locker demo: tasteful motion on the SAMPLE visuals (light, CSS-first) ----
   Final state is the default, so with scripts off, or with reduced motion, everything is
   simply static. demo-motion.js switches the motion state on only when motion is allowed, then
   adds .demo-play to a section the first time it scrolls into view; each effect plays once. */
.demo-xp {
    width: 100%;
    height: 0.6rem;
    border: 1px solid var(--theme-border-inactive);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-surface);
    overflow: hidden;
}

.demo-xp .demo-fill {
    height: 100%;
    width: 100%;
    background: var(--theme-accent-primary);
    transform-origin: left center;
    transform: scaleX(var(--demo-fill, 0.7));
}

.demo-belt {
    position: relative;
    overflow: hidden;
}

.demo-belt-stripe {
    display: inline-block;
    width: 1.5rem;
    height: 0.3rem;
    margin-left: var(--structure-gap-sm);
    vertical-align: middle;
    background: var(--theme-state-gold, var(--theme-accent-primary));
}

.demo-tick {
    display: inline-block;
    margin-right: var(--structure-gap-xs);
}

.demo-streak-dots {
    display: flex;
    gap: var(--structure-gap-sm);
}

.demo-streak-dots span {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--theme-accent-primary);
    box-shadow: 0 0 8px var(--theme-accent-primary);
}

@media (prefers-reduced-motion: no-preference) {
    .demo-motion-on [data-demo-motion] .demo-fill { transform: scaleX(0); }
    .demo-motion-on [data-demo-motion].demo-play .demo-fill { transform: scaleX(var(--demo-fill, 0.7)); transition: transform 1.2s ease-out; }

    .demo-motion-on [data-demo-motion] .demo-belt-stripe { transform: translateX(-3rem); opacity: 0; }
    .demo-motion-on [data-demo-motion].demo-play .demo-belt-stripe { transform: none; opacity: 1; transition: transform 0.6s ease-out 0.5s, opacity 0.6s ease-out 0.5s; }

    .demo-motion-on [data-demo-motion] .demo-tick { transform: scale(0); }
    .demo-motion-on [data-demo-motion].demo-play .demo-tick { transform: none; transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) 0.8s; }

    .demo-motion-on [data-demo-motion] .demo-streak-dots span { opacity: 0.15; box-shadow: none; }
    .demo-motion-on [data-demo-motion].demo-play .demo-streak-dots span {
        opacity: 1;
        box-shadow: 0 0 8px var(--theme-accent-primary);
        transition: opacity 0.3s ease-out, box-shadow 0.3s ease-out;
        transition-delay: calc(var(--demo-i, 0) * 0.18s + 0.3s);
    }

    .demo-motion-on [data-demo-motion].demo-play .demo-pulse .fg {
        animation: demo-ring-pulse 1.8s ease-in-out 2;
    }
}

@keyframes demo-ring-pulse {
    0%, 100% { filter: drop-shadow(0 0 2px var(--theme-accent-primary)); }
    50% { filter: drop-shadow(0 0 9px var(--theme-accent-primary)); }
}

@media (prefers-reduced-motion: reduce) {
    [data-demo-motion] .demo-fill,
    [data-demo-motion] .demo-belt-stripe,
    [data-demo-motion] .demo-tick,
    [data-demo-motion] .demo-streak-dots span,
    [data-demo-motion] .demo-pulse .fg {
        animation: none !important;
        transition: none !important;
    }
}

/* ---- Section language (landing page, /demo and the three demo pages) ----
   Each section is a kicker, a big heading and DISPLAY panels with no buttons inside, then
   ONE exit button at the bottom (owner 2026-10-21 18:23 CT, ticket 310). */
.bu-section-exit {
    display: flex;
    justify-content: center;
    padding-top: var(--structure-gap-md);
}

.bu-section-exit .bu-btn,
.demo-exit-sec .bu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--structure-touch-min);
    max-width: 100%;
    text-align: center;
}

.demo-exit-sec .bu-panel {
    align-items: center;
    text-align: center;
}

.bu-metric-note {
    font-size: var(--structure-text-sm);
    line-height: 1.4;
    margin: 0;
}

.bu-corner-note {
    margin: 0;
    font-size: var(--structure-text-sm);
}

/* Counters ("168 - 3 = 165"): a row of display tiles. */
.bu-counter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--structure-gap-md);
}

.bu-counter {
    min-width: 8rem;
    padding: var(--structure-gap-md) var(--structure-gap-lg);
    border: 1px solid var(--theme-border-inactive);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-card);
    text-align: center;
}

.bu-counter--hero {
    border: 2px solid var(--theme-border-active);
}

.bu-counter-value {
    font-size: 2.2rem;
    line-height: 1.1;
    font-weight: var(--structure-weight-bold);
}

.bu-counter--hero .bu-counter-value {
    font-size: 2.6rem;
    color: var(--theme-accent-primary);
}

.bu-counter-label {
    font-size: var(--structure-text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bu-counter-op {
    font-size: 1.5rem;
    color: var(--theme-text-muted);
}

/* Compact mat roster inside a half-width panel. */
.demo-mat-roster--compact {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/* Skill bars (student demo). */
.demo-skill-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-md);
}

.demo-bar {
    height: 0.7rem;
    margin-top: var(--structure-gap-xs);
    border: 1px solid var(--theme-border-inactive);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-surface);
    overflow: hidden;
}

.demo-bar-fill {
    height: 100%;
    width: calc(var(--demo-fill, 0) * 100%);
    background: var(--theme-accent-primary);
}

.demo-skill--done .demo-bar-fill {
    background: var(--theme-state-healthy);
}

.demo-skill--locked {
    color: var(--theme-text-muted);
}

/* Check-in method cards (instructor demo). */
.demo-method-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--structure-gap-md);
}

.demo-method-cards .demo-card {
    justify-content: space-between;
    align-items: flex-start;
}

/* Console demo: big overview tiles and rail chips as display panels. */
.demo-console-tiles--big {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--structure-gap-md);
}

.demo-console-tiles--big .demo-console-tile {
    text-align: center;
    padding: var(--structure-gap-md);
}

.demo-console-tiles--big .bu-metric-value {
    font-size: clamp(2.2rem, 6vw, 3.5rem);
    line-height: 1.1;
}

.demo-chip--current {
    border-color: var(--theme-border-active);
    font-weight: var(--structure-weight-bold);
}

.demo-console-warnings {
    margin-bottom: var(--structure-gap-md);
}

.demo-console-warnings h4 {
    margin: 0;
    font-size: var(--structure-text-md);
}

.demo-sec {
    scroll-margin-top: 90px;
}

/* ---- Landing glimpse frame: a cropped slice of one product screen, faded at the bottom ---- */
.bu-glimpse-benefit {
    max-width: 48rem;
    margin: var(--structure-gap-sm) auto 0 auto;
    text-align: center;
    line-height: 1.6;
}

/* ---- Landing section frame: SKIN-OWNED chrome (R-0823-01) ----
   Default skins render NO frame: the wrapper is display:contents (no box, so no border, background, blur or
   backdrop root between the section grid and its panels), and the caption and the sample chip are hidden. The page
   then matches the reference format exactly and every panel carries the skin's normal frosted glass.

   Contract for a framed skin (to be built in that skin's own file; never here and never in another skin):
     .bu-glimpse-frame    set display:block and grid-column:1 / -1; add border, radius, background, backdrop-filter, glow
     .bu-glimpse-caption  show it (display:block) as the frame's caption bar
     .bu-sample-chip      show it (display:inline-block) in the section header
   Custom properties a framed skin may define on the frame (all optional): --glimpse-frame-border,
   --glimpse-frame-bg, --glimpse-frame-blur, --glimpse-frame-glow, --glimpse-caption-color, --glimpse-chip-border.
   Nothing on this stylesheet may give a wrapper of a panel a backdrop root, or the panels inside blur only the
   wrapper and render as clear glass. */
.bu-glimpse-frame {
    display: contents;
}

.bu-glimpse-caption,
.bu-sample-chip {
    display: none;
}

/* Skill path nodes (landing). */
.bu-path-nodes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--structure-gap-lg);
}

.bu-path-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--structure-gap-xs);
    width: 9rem;
    height: 9rem;
    text-align: center;
    border: 1px solid var(--theme-border-inactive);
    background: var(--theme-bg-card);
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
    font-size: var(--structure-text-xs);
}

/* Node text always uses the main text token (>= 4.5:1 on the panel); state is carried by the border
   (solid accent for reached, dashed for locked) and by the words, never by dim or blue text. */
.bu-path-node {
    color: var(--theme-text-main);
    background: var(--theme-bg-canvas); /* opaque, so the arena photo never shows through the text */
}
.bu-path-nodes .bu-path-node span {
    color: var(--theme-text-main);
    font-size: var(--structure-text-sm);
}
.bu-path-node strong { font-size: var(--structure-text-md); color: var(--theme-text-main); }
.bu-path-node--locked { border: 1px dashed var(--theme-text-muted); }
.bu-path-node--active { border: 2px solid var(--theme-accent-primary); }
.bu-path-node--core { width: 11rem; height: 11rem; border: 2px solid var(--theme-accent-primary); }
.bu-path-node--core strong { font-size: 2rem; }

/* Nav anchors land below the fixed header (every landing section and the two card sections). */
.bu-glimpse-sec,
#demo-doors,
#evolution,
#final-close {
    scroll-margin-top: 90px;
}

/* ---- Console demo shell: left tab rail + centre, as in the real console ---- */
.demo-shell {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    gap: var(--structure-gap-md);
    align-items: start;
}

.demo-rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-sm);
}

.demo-rail li {
    padding: var(--structure-gap-sm) var(--structure-gap-md);
    border: 1px solid var(--theme-border-inactive);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-card);
    color: var(--theme-text-muted);
    min-height: var(--structure-touch-min);
    display: flex;
    align-items: center;
}

.demo-rail .demo-rail-current {
    background: var(--theme-accent-primary);
    color: var(--theme-text-main);
    font-weight: var(--structure-weight-bold);
}

.demo-shell-center {
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-md);
    min-width: 0;
}

.demo-tile-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--structure-gap-md);
}

.demo-tile {
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-xs);
    padding: var(--structure-gap-md);
    border: 1px solid var(--theme-border-inactive);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-card);
}

.demo-tile .bu-metric-label {
    margin: 0;
    font-size: var(--structure-text-xs);
    text-transform: uppercase;
}

.demo-tile .bu-metric-value {
    font-size: 2rem;
    line-height: 1.1;
}

.demo-alert {
    padding: var(--structure-gap-sm) var(--structure-gap-md);
    border: 1px solid var(--theme-state-error);
    border-left-width: 4px;
    border-radius: var(--structure-radius-panel);
}

.demo-alert p {
    margin: 0;
}

.demo-tabs-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--structure-gap-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.demo-tabs-row li {
    padding: var(--structure-gap-xs) var(--structure-gap-md);
    border: 1px solid var(--theme-border-inactive);
    border-radius: var(--structure-radius-panel);
    min-height: var(--structure-touch-min);
    display: inline-flex;
    align-items: center;
}

.demo-tabs-row .demo-tab-current {
    border-color: var(--theme-border-active);
    font-weight: var(--structure-weight-bold);
}

.demo-three-col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--structure-gap-md);
}

.demo-rank-bar-ends {
    display: flex;
    justify-content: space-between;
    gap: var(--structure-gap-md);
    font-size: var(--structure-text-xs);
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .demo-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .demo-rail {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .demo-three-col {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Static look-alikes of form controls (display only: spans, never real controls) ---- */
.demo-fake-field {
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-xs);
    max-width: 100%;
}

.demo-fake-label {
    font-size: var(--structure-text-xs);
    color: var(--theme-text-muted);
}

.demo-fake-select,
.demo-fake-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--structure-gap-sm);
    min-height: var(--structure-touch-min);
    padding: var(--structure-gap-xs) var(--structure-gap-md);
    border: 1px solid var(--theme-border-active);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-card);
}

.demo-fake-btn {
    display: inline-flex;
    justify-content: center;
    font-weight: var(--structure-weight-bold);
}

.demo-fake-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--structure-gap-sm);
}

.demo-check-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-xs);
}

.demo-check-rows li {
    display: flex;
    align-items: center;
    gap: var(--structure-gap-md);
    min-height: var(--structure-touch-min);
}

.demo-fake-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--theme-border-active);
    border-radius: var(--structure-radius-panel);
    background: var(--theme-bg-surface);
}

.demo-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--structure-gap-md);
}

@media (max-width: 720px) {
    .demo-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.demo-exit-lede {
    text-align: center;
    margin: 0;
}

.demo-skin-bar {
    display: flex;
    flex-direction: column;
    gap: var(--structure-gap-sm);
    padding: var(--structure-gap-md) 0;
    border-top: 1px solid var(--theme-border-inactive);
}

/* Class-oriented roster: small display-only divider label in the regulars-first sample roster. */
.demo-roster-divider {
    font-size: var(--structure-text-sm, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
    border-bottom: 1px solid currentColor;
    grid-column: 1 / -1;
    min-height: 0;
}