/* app.css — demo chrome (top nav · footer · theme toggle · placeholder page shell)
 *
 * All values trace to --demo-* tokens. No magic hex or px in component CSS.
 * Bootstrap 5.3 (CDN) supplies the reset; this file only defines:
 *   - body type/colour bridge to tokens
 *   - .demo-nav (top navigation)
 *   - .demo-footer
 *   - .demo-theme-toggle
 *   - .demo-page (generic placeholder shell)
 *
 * Specific page styles (builder.php, design.php, etc.) live in their own files.
 */

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--demo-font-sans);
  /* Body default is `sm` (14 px) — Mailchimp/Linear/Vercel norm for app
   * chrome. `base` (16 px) is reserved for marketing-page lede / hero
   * paragraphs that override locally; everywhere else inherits 14 px so
   * the chrome stays compact. */
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-regular);
  line-height: var(--demo-lh-body);
  letter-spacing: var(--demo-ls-body);
  color: var(--demo-text);
  background: var(--demo-bg);
  font-feature-settings: var(--demo-font-features);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings inherit the family but pick up display weight + tight tracking
 * so any consumer <h1>–<h6> renders crisp without per-instance overrides. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--demo-fw-bold);
  line-height: var(--demo-lh-heading);
  letter-spacing: var(--demo-ls-heading);
  color: var(--demo-text-strong);
}

a {
  color: var(--demo-accent);
  text-decoration: none;
}
a:hover { color: var(--demo-accent-hover); }
a:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
  border-radius: var(--demo-radius-sm);
}

code,
kbd,
samp {
  font-family: var(--demo-font-mono);
  font-size: 0.88em;
  font-weight: var(--demo-fw-regular);
  color: var(--demo-text);
  background: var(--demo-accent-soft);
  padding: 1px 6px;
  border-radius: var(--demo-radius-sm);
  letter-spacing: 0;
}
pre code {
  padding: 0;
  background: transparent;
}

/* ──────────────────────────────────────────────
 * Top nav
 * ────────────────────────────────────────────── */

.demo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--demo-nav-h);
  padding: 0 var(--demo-space-6);
  background: var(--demo-bg);
  border-bottom: 1px solid var(--demo-border);
}

.demo-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--demo-space-3);
  color: var(--demo-text-strong);
  font-weight: var(--demo-fw-semibold);
  font-size: var(--demo-fs-md);
  letter-spacing: var(--demo-ls-heading);
  text-decoration: none;
}
.demo-nav__brand:hover { color: var(--demo-text-strong); }

.demo-nav__logo {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url('/assets/brand/logo_light.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
[data-theme='dark'] .demo-nav__logo {
  background-image: url('/assets/brand/logo_dark.svg');
}

.demo-nav__wordmark { letter-spacing: -0.01em; }
.demo-nav__wordmark-accent { color: var(--demo-accent); }

.demo-nav__links {
  display: flex;
  align-items: center;
  gap: var(--demo-space-6);
}

.demo-nav__link {
  display: inline-flex;
  align-items: center;
  height: var(--demo-nav-h);
  color: var(--demo-text-secondary);
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-medium);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding: 0 var(--demo-space-1);
  transition: color 120ms ease, border-color 120ms ease;
}
.demo-nav__link:hover { color: var(--demo-text-strong); }
.demo-nav__link.is-active {
  color: var(--demo-text-strong);
  font-weight: var(--demo-fw-semibold);
  border-bottom-color: var(--demo-text-strong);
}
.demo-nav__link:focus-visible {
  outline: none;
  color: var(--demo-text-strong);
  border-bottom-color: var(--demo-accent);
}

.demo-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--demo-space-3);
}

.demo-nav__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--demo-text-muted);
  border-radius: var(--demo-radius-md);
  transition: color 120ms ease, background 120ms ease;
}
.demo-nav__buy .material-symbols-outlined {
  font-size: 22px;
  line-height: 1;
}
.demo-nav__buy:hover {
  color: var(--demo-text);
  background: var(--demo-bg-elevated);
}
.demo-nav__buy:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────
 * W6.F.C.5 — Mobile menu toggle (hamburger).
 *
 * Desktop hides the toggle entirely. At <768 px the toggle button
 * appears beside the brand and the .demo-nav__links container is
 * pulled out of the flex row into a full-width vertical drawer that
 * appears below the nav when open. The Examples chevron + mega-menu
 * stay hidden (mega-menu won't fit at 375 px); each tier link in the
 * drawer is reachable directly.
 *
 * Behavior wired by /assets/js/nav-mobile-toggle.js — Esc closes,
 * click-outside closes, opening focuses the first link in the drawer,
 * closing returns focus to the toggle.
 * ────────────────────────────────────────────── */

.demo-nav__mobile-toggle {
  display: none;
  /* Real defaults for when the mobile media query reveals it. */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  color: var(--demo-text);
  cursor: pointer;
  position: relative;
}
.demo-nav__mobile-toggle:hover {
  background: var(--demo-bg-elevated);
  border-color: var(--demo-text-muted);
}
.demo-nav__mobile-toggle:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}
.demo-nav__mobile-toggle-icon {
  font-size: 24px;
  line-height: 1;
}
/* Swap menu ↔ close icon based on parent state. */
.demo-nav__mobile-toggle-icon--close { display: none; }
.demo-nav[data-mobile-open='true'] .demo-nav__mobile-toggle {
  background: var(--demo-bg-elevated);
  border-color: var(--demo-text-muted);
}
.demo-nav[data-mobile-open='true'] .demo-nav__mobile-toggle .demo-nav__mobile-toggle-icon { display: none; }
.demo-nav[data-mobile-open='true'] .demo-nav__mobile-toggle .demo-nav__mobile-toggle-icon--close { display: block; }

@media (max-width: 768px) {
  /* Reveal hamburger; preserve the CodeCanyon icon + theme toggle on the
   * right side of the row by giving the toggle margin-left:auto and
   * leaving .demo-nav__actions to flex-end naturally. */
  .demo-nav__mobile-toggle { display: inline-flex; }

  /* The drawer becomes an absolute-positioned panel below the nav
   * row, full-width, scrollable if the link list ever grows. */
  .demo-nav__links {
    display: none;
    position: absolute;
    top: var(--demo-nav-h);
    left: 0;
    right: 0;
    background: var(--demo-bg);
    border-bottom: 1px solid var(--demo-border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--demo-space-3) var(--demo-space-6);
    box-shadow: var(--demo-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
    z-index: 80;
    max-height: calc(100vh - var(--demo-nav-h));
    overflow-y: auto;
  }
  .demo-nav[data-mobile-open='true'] .demo-nav__links { display: flex; }

  /* Each top-level link becomes a full-width row with a 44 px tap
   * target — meets WCAG 2.5.5 minimum size. The Examples row keeps
   * its label-only link and drops the chevron + mega-menu on mobile;
   * the per-tier rows below it are reachable directly via the hub. */
  .demo-nav__link,
  .demo-nav__examples-link {
    width: 100%;
    height: 44px;
    border-bottom: 1px solid var(--demo-border-soft, var(--demo-border));
    padding: 0 var(--demo-space-2);
  }
  .demo-nav__link.is-active,
  .demo-nav__examples-link.is-active {
    border-bottom-color: var(--demo-accent);
  }
  .demo-nav__examples { width: 100%; }
  .demo-nav__examples-chevron { display: none; }
  .demo-nav__examples-menu { display: none !important; }
}

/* ──────────────────────────────────────────────
 * Theme toggle
 * ────────────────────────────────────────────── */

.demo-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  color: var(--demo-text-muted);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.demo-theme-toggle:hover {
  color: var(--demo-text);
  background: var(--demo-bg-elevated);
  border-color: var(--demo-text-muted);
}
.demo-theme-toggle:active { transform: translateY(1px); }
.demo-theme-toggle:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}
.demo-theme-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.demo-theme-toggle__icon {
  display: none;
  font-size: 20px;
  line-height: 1;
}
[data-theme='light'] .demo-theme-toggle__icon[data-theme-icon-dark] { display: inline-flex; }
[data-theme='dark']  .demo-theme-toggle__icon[data-theme-icon-light] { display: inline-flex; }

/* ──────────────────────────────────────────────
 * Material Symbols (Google) — icon system
 * ──────────────────────────────────────────────
 * Loaded via the <link> tag in each demo/*.php page <head>.
 * Variable-axis font: opsz (optical size), wght (weight),
 * FILL (filled vs outlined), GRAD (grade — visual contrast).
 *
 * Default values match the chrome's quiet-but-crisp tone:
 *   FILL 0    — outlined (filled = emphasis only)
 *   wght 400  — matches body weight (no shouty icons)
 *   GRAD 0    — neutral
 *   opsz 24   — design size
 */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  -webkit-user-select: none;
}

/* ──────────────────────────────────────────────
 * Footer
 * ────────────────────────────────────────────── */

.demo-footer {
  background: var(--demo-bg-elevated);
  border-top: 1px solid var(--demo-border);
}
.demo-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--demo-space-4);
  max-width: var(--demo-content-max);
  min-height: var(--demo-footer-h);
  margin: 0 auto;
  padding: var(--demo-space-4) var(--demo-space-6);
  font-size: var(--demo-fs-sm);
  color: var(--demo-text-secondary);
}
.demo-footer__left,
.demo-footer__right {
  display: flex;
  align-items: center;
  gap: var(--demo-space-3);
  flex-wrap: wrap;
}
.demo-footer__sep {
  color: var(--demo-border);
  user-select: none;
}
.demo-footer a {
  color: var(--demo-text-secondary);
}
.demo-footer a:hover { color: var(--demo-text-strong); }

@media (max-width: 768px) {
  .demo-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ──────────────────────────────────────────────
 * Page shell (placeholder content)
 * ────────────────────────────────────────────── */

.demo-page {
  min-height: calc(100vh - var(--demo-nav-h) - var(--demo-footer-h));
}
.demo-page__inner {
  max-width: var(--demo-content-max);
  margin: 0 auto;
  padding: var(--demo-space-8) var(--demo-space-6);
}
.demo-page__title {
  margin: 0 0 var(--demo-space-4);
  font-size: var(--demo-fs-3xl);
  font-weight: var(--demo-fw-display);
  line-height: var(--demo-lh-display);
  letter-spacing: var(--demo-ls-display);
  color: var(--demo-text-strong);
}
.demo-page__lede {
  margin: 0 0 var(--demo-space-7);
  font-size: var(--demo-fs-lg);
  font-weight: var(--demo-fw-regular);
  line-height: var(--demo-lh-tight);
  color: var(--demo-text);
  max-width: 64ch;
}
.demo-page__placeholder {
  padding: var(--demo-space-7);
  background: var(--demo-bg-elevated);
  border: 1px dashed var(--demo-border);
  border-radius: var(--demo-radius-lg);
  color: var(--demo-text);
}
.demo-page__placeholder-tag {
  display: inline-block;
  margin-bottom: var(--demo-space-4);
  padding: 3px var(--demo-space-3);
  background: var(--demo-accent-soft);
  color: var(--demo-accent);
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
  border-radius: var(--demo-radius-pill);
}
.demo-page__placeholder p {
  margin: 0 0 var(--demo-space-3);
  color: var(--demo-text);
}
.demo-page__placeholder p:last-child { margin: 0; }

/* ──────────────────────────────────────────────
 * Chrome-level primitives (consumed by demo/* pages and the W2 builder UI)
 *
 *   .demo-btn              — buttons (primary · secondary · ghost · with-icon · sm · loading)
 *   .demo-pill             — chips (default · accent · success · warn · error)
 *   .demo-card             — content container (rest · interactive)
 *   .demo-form-*           — text input, textarea, select, radio, checkbox primitives
 *   .demo-visually-hidden  — clip element to 1×1 for screen-reader-only labels
 *
 * Every value reads from --demo-* tokens. No magic numbers.
 * ────────────────────────────────────────────── */

/* Visually-hidden — labelling helper for screen readers.
 * Used by demo partials to attach SR-only headings to landmark
 * sections (e.g. home/proof-strip H2, examples-hub per-tier pill).
 * The same rule lives in examples-hub.css for backwards-compat
 * (declaring it twice is harmless — same selector, same body). */
.demo-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Buttons */

.demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--demo-space-2);
  height: 40px;
  padding: 0 var(--demo-space-4);
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  color: var(--demo-text);
  font-family: var(--demo-font-sans);
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-body);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease,
              color 120ms ease, transform 80ms ease;
}
.demo-btn:hover { background: var(--demo-bg); border-color: var(--demo-text-muted); }
.demo-btn:active { transform: translateY(1px); }
.demo-btn:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}
.demo-btn:disabled,
.demo-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.demo-btn--primary {
  background: var(--demo-primary);
  border-color: var(--demo-primary);
  color: var(--demo-primary-fg);
}
.demo-btn--primary:hover {
  background: var(--demo-primary-hover);
  border-color: var(--demo-primary-hover);
  color: var(--demo-primary-fg);
}

.demo-btn--secondary {
  background: var(--demo-bg);
  border-color: var(--demo-border);
  color: var(--demo-text);
}
.demo-btn--secondary:hover {
  background: var(--demo-bg-elevated);
  border-color: var(--demo-text-muted);
  color: var(--demo-text);
}

.demo-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--demo-text-secondary);
}
.demo-btn--ghost:hover {
  background: var(--demo-bg-elevated);
  border-color: transparent;
  color: var(--demo-text);
}

.demo-btn--with-icon .material-symbols-outlined { font-size: 18px; }

.demo-btn--sm {
  height: 32px;
  padding: 0 var(--demo-space-3);
  font-size: var(--demo-fs-xs);
}

.demo-btn.is-loading { pointer-events: none; }
.demo-btn__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: demo-btn-spin 700ms linear infinite;
}
@keyframes demo-btn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pills */

.demo-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--demo-space-3);
  background: var(--demo-bg-elevated);
  color: var(--demo-text-secondary);
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
  border-radius: var(--demo-radius-pill);
  border: 1px solid var(--demo-border);
}
.demo-pill--accent  { background: var(--demo-accent-soft);                color: var(--demo-accent); border-color: transparent; }
.demo-pill--success { background: rgba(16, 185, 129, 0.12);               color: var(--demo-success); border-color: transparent; }
.demo-pill--warn    { background: rgba(245, 158, 11, 0.12);               color: var(--demo-warn); border-color: transparent; }
.demo-pill--error   { background: rgba(220, 38, 38, 0.10);                color: var(--demo-error); border-color: transparent; }
[data-theme='dark'] .demo-pill--success { background: rgba(52, 211, 153, 0.18); }
[data-theme='dark'] .demo-pill--warn    { background: rgba(251, 191, 36, 0.18); }
[data-theme='dark'] .demo-pill--error   { background: rgba(248, 113, 113, 0.18); }

/* Cards */

.demo-card {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-3);
  padding: var(--demo-space-5);
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-lg);
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.demo-card__title {
  margin: 0;
  font-size: var(--demo-fs-md);
  font-weight: var(--demo-fw-bold);
  color: var(--demo-text-strong);
}
.demo-card__body {
  margin: 0;
  color: var(--demo-text);
  line-height: var(--demo-lh-body);
}
.demo-card--interactive { cursor: pointer; }
.demo-card--interactive:hover {
  box-shadow: var(--demo-shadow-md);
  border-color: var(--demo-text-muted);
  transform: translateY(-2px);
}
.demo-card--interactive:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}

/* Form primitives */

.demo-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-2);
  margin: 0;
  padding: 0;
  border: 0;
}
.demo-form-field__label {
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-medium);
  color: var(--demo-text);
}
.demo-form-field__help {
  font-size: var(--demo-fs-xs);
  color: var(--demo-text-muted);
}
.demo-form-field--inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--demo-space-4);
}

.demo-form-control {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 var(--demo-space-3);
  background: var(--demo-bg);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  color: var(--demo-text);
  font-family: var(--demo-font-sans);
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-regular);
  line-height: 1.5;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
textarea.demo-form-control {
  height: auto;
  min-height: 80px;
  padding: var(--demo-space-3);
  resize: vertical;
}
select.demo-form-control { padding-right: var(--demo-space-7); appearance: auto; }
.demo-form-control:hover { border-color: var(--demo-text-muted); }
.demo-form-control:focus-visible {
  outline: none;
  border-color: var(--demo-accent);
  box-shadow: 0 0 0 3px var(--demo-accent-soft);
}
.demo-form-control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.demo-form-radio,
.demo-form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--demo-space-2);
  font-size: var(--demo-fs-sm);
  color: var(--demo-text);
  cursor: pointer;
}
.demo-form-radio input,
.demo-form-checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--demo-accent);
  cursor: pointer;
}
.demo-form-radio input:focus-visible,
.demo-form-checkbox input:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────
 * .demo-more — collapsed-by-default disclosure for advanced/reference
 * info INSIDE a flow that should stay simple (W6 D13.B.gradient).
 *
 * Pattern: keep walkthrough steps quick-glance; nest "show me more"
 * details inside <details class="demo-more"> blocks. Buyer reading
 * top-down sees only what they need; curious buyers click to reveal
 * shape / edge cases / format references — flow-preserving.
 *
 * Native <details>/<summary> — zero JS, accessible by default
 * (screen readers announce expanded state; Tab + Enter toggles).
 *
 * HTML shape:
 *   <details class="demo-more">
 *     <summary class="demo-more__summary">
 *       <span class="material-symbols-outlined demo-more__lead-icon">lightbulb</span>
 *       <span class="demo-more__title">What's in the bundle?</span>
 *       <span class="demo-more__hint">click to expand</span>
 *       <span class="material-symbols-outlined demo-more__icon">expand_more</span>
 *     </summary>
 *     <div class="demo-more__body">…full content…</div>
 *   </details>
 *
 * Lead-icon convention (Material Symbols Outlined — never emoji):
 *   default tone:  lightbulb · tips_and_updates  (helpful tip / advanced reference)
 *   --neutral:     info · description            (structural / explanatory aside)
 *   --warn:        warning · report              (caveat / "watch out" before shipping)
 *
 * Tones (modifiers):
 *   .demo-more           default — info, accent-soft border on open
 *   .demo-more--neutral  subtle muted; for purely structural notes
 *   .demo-more--warn     when content is a "watch out" caveat
 *
 * Used by W6 Phase B+ example walkthroughs ("shape reference",
 * "edge cases", "production swap matrix"). Showcase:
 * `demo/_partials/design/components.php`. Plan rule: PIPELINE.md
 * §"Content-gradient gate".
 * ────────────────────────────────────────────── */
.demo-more {
  display: block;
  margin: var(--demo-space-3) 0;
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  background: var(--demo-bg-elevated);
  overflow: hidden;
  transition: border-color 120ms ease;
}
.demo-more[open] {
  border-color: var(--demo-accent-soft, var(--demo-accent));
  background: var(--demo-bg);
}

.demo-more__summary {
  display: flex;
  align-items: center;
  gap: var(--demo-space-2);
  padding: var(--demo-space-2) var(--demo-space-3);
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: var(--demo-fs-sm);
  font-weight: 500;
  color: var(--demo-text-secondary);
  transition: background 120ms ease, color 120ms ease;
}
.demo-more__summary::-webkit-details-marker { display: none; }
.demo-more__summary::marker { content: ''; }

.demo-more__summary:hover {
  background: var(--demo-bg-hover, var(--demo-bg-elevated));
  color: var(--demo-text);
}
.demo-more[open] > .demo-more__summary {
  color: var(--demo-text);
  border-bottom: 1px solid var(--demo-border);
}

/* Lead icon — decorative, sits on the LEFT of the title.
 * Use Material Symbols (e.g. `lightbulb`, `info`, `tips_and_updates`,
 * `warning`) — never emoji, never inline SVG. Optional; if absent
 * the chevron + title still align left. */
.demo-more__lead-icon {
  font-size: 18px;
  color: var(--demo-accent);
  flex-shrink: 0;
}
.demo-more--neutral > .demo-more__summary > .demo-more__lead-icon { color: var(--demo-text-secondary); }
.demo-more--warn > .demo-more__summary > .demo-more__lead-icon { color: var(--demo-warn-accent, var(--demo-accent)); }

/* Toggle chevron — sits on the RIGHT (after the hint), rotates 180° on open.
 * Order: [lead-icon] [title] [hint] [chevron] via flex `order`. */
.demo-more__icon {
  font-size: 18px;
  color: var(--demo-text-muted);
  flex-shrink: 0;
  order: 99;   /* push to the far right of the flex row */
  transition: transform 200ms ease, color 120ms ease;
}
.demo-more[open] > .demo-more__summary > .demo-more__icon {
  transform: rotate(180deg);
  color: var(--demo-accent);
}

.demo-more__title { flex: 1; text-align: left; }
.demo-more__title code { font-size: 0.92em; }

.demo-more__hint {
  font-size: var(--demo-fs-xs);
  font-weight: 400;
  color: var(--demo-text-muted);
  font-style: italic;
}
.demo-more[open] > .demo-more__summary > .demo-more__hint::after {
  content: ' (click to collapse)';
}

.demo-more__body {
  padding: var(--demo-space-3) var(--demo-space-4);
  font-size: var(--demo-fs-sm);
  color: var(--demo-text);
  line-height: 1.55;
}
.demo-more__body > :first-child { margin-top: 0; }
.demo-more__body > :last-child  { margin-bottom: 0; }
.demo-more__body p + p { margin-top: var(--demo-space-3); }

/* When the body wraps a code popover edge-to-edge. */
.demo-more__body--flush { padding: 0; }

/* Tonal modifiers */
.demo-more--neutral { background: var(--demo-bg-subtle, var(--demo-bg-elevated)); }
.demo-more--warn {
  border-color: var(--demo-warn-border, var(--demo-border));
  background: var(--demo-warn-bg, var(--demo-bg-elevated));
}
.demo-more--warn > .demo-more__summary { color: var(--demo-warn-text, var(--demo-text-secondary)); }
.demo-more--warn[open] { border-color: var(--demo-warn-accent, var(--demo-accent)); }

@media (prefers-reduced-motion: reduce) {
  .demo-more, .demo-more *, .demo-more__icon { transition: none !important; }
}