/* demo_shell_html — the form's stylesheet.
   Every rule is scoped :where(.pxdemo), which adds no specificity, so no rule
   changes which declaration wins. The root rule itself stays a bare class so it
   still outranks the scoped reset.
   The scope earns its keep for a reason specific to a DEPENDENCY: this sheet is
   head-linked into every page of all four consuming apps, and this form is
   mounted by none of them, so an unscoped .pxdemo-card rule would be live on
   host screens that never show this gallery.
   Order audit: the string "pxdemo" appears in no other stylesheet in the estate
   — not in PXM_SHARED_CSS or PXM_TOKENS_CSS (mar_editor/_pxmar_core_js.py),
   not in MED_ROWS_CSS, not in _px_theme_css.py, not in theme/assets/theme.css,
   and not in any host theme asset. No rule here ties with anything, so none is
   owed a second class.
   No designer gate: this block has no opacity, no display:none, no transform,
   no transition, no animation and no z-index, so nothing is hidden until
   JavaScript runs and the canvas shows the finished chrome.
   No position:relative and no flex:1 0 auto on the root: Form1 consumes
   Layouts.BaseLayout, whose content slot sits inside <main class="page-main">,
   a plain block (theme.css). Adding flex properties to a block child
   would be a layout change nothing is asking for. */
/* ===== PX MAR component gallery chrome (demo only — never shipped to
   hosts). Styling references only --pxm-* tokens (contract §6) with the
   canonical literals as fallbacks so the page renders even before the
   bridge token block lands. All chrome classes are pxdemo-* so nothing
   collides with the components under demo. ===== */
.pxdemo{font-family:var(--pxm-font,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif);
  color:var(--pxm-text-primary,#111827);max-width:1180px;margin:0 auto;
  padding:8px 4px 48px;display:flex;flex-direction:column;gap:18px}
:where(.pxdemo) .pxdemo-intro{background:var(--pxm-bg-elevated,#f3f4f6);border:1px solid var(--pxm-border,#d1d5db);
  border-radius:var(--pxm-radius-lg,12px);padding:14px 18px}
:where(.pxdemo) .pxdemo-intro p{margin:6px 0 0;font-size:.88rem;color:var(--pxm-text-secondary,#4b5563)}
:where(.pxdemo) .pxdemo-intro h1{margin:0;font-size:1.25rem}
:where(.pxdemo) .pxdemo-card{background:var(--pxm-bg-card,#ffffff);border:1px solid var(--pxm-border,#d1d5db);
  border-radius:var(--pxm-radius-lg,12px);box-shadow:var(--pxm-shadow-md,0 4px 12px rgba(0,0,0,.12));
  padding:16px 18px}
:where(.pxdemo) .pxdemo-card-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
:where(.pxdemo) .pxdemo-card h2{margin:0;font-size:1.02rem}
:where(.pxdemo) .pxdemo-kind{font-family:var(--pxm-mono,ui-monospace,Consolas,monospace);font-size:.7rem;
  color:var(--pxm-text-muted,#6b7280);background:var(--pxm-bg-elevated,#f3f4f6);
  border:1px solid var(--pxm-border,#d1d5db);border-radius:999px;padding:2px 9px;white-space:nowrap}
:where(.pxdemo) .pxdemo-desc{margin:6px 0 12px;font-size:.84rem;color:var(--pxm-text-secondary,#4b5563)}
:where(.pxdemo) .pxdemo-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
:where(.pxdemo) .pxdemo-btn{appearance:none;border:1px solid var(--pxm-border-strong,#9ca3af);
  background:var(--pxm-bg-elevated,#f3f4f6);color:var(--pxm-text-primary,#111827);
  border-radius:var(--pxm-radius-md,8px);padding:6px 12px;font-size:.82rem;font-weight:600;
  cursor:pointer;font-family:inherit;line-height:1.2}
:where(.pxdemo) .pxdemo-btn:hover{border-color:var(--pxm-info,#2563eb);color:var(--pxm-info,#2563eb)}
:where(.pxdemo) .pxdemo-btn.pxdemo-primary{background:var(--pxm-info,#2563eb);border-color:var(--pxm-info,#2563eb);
  color:var(--pxm-text-inverse,#ffffff)}
:where(.pxdemo) .pxdemo-btn.pxdemo-primary:hover{opacity:.9;color:var(--pxm-text-inverse,#ffffff)}
:where(.pxdemo) .pxdemo-btn.pxdemo-warn{border-color:var(--pxm-warning,#d97706);color:var(--pxm-warning,#d97706);
  background:transparent}
:where(.pxdemo) .pxdemo-check{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;
  border:1px solid var(--pxm-border,#d1d5db);border-radius:999px;padding:4px 12px 4px 8px;
  cursor:pointer;user-select:none;background:var(--pxm-bg-card,#ffffff)}
:where(.pxdemo) .pxdemo-check code{font-family:var(--pxm-mono,ui-monospace,Consolas,monospace);font-size:.76rem}
:where(.pxdemo) .pxdemo-note{font-size:.78rem;color:var(--pxm-text-muted,#6b7280);margin:0 0 10px}
:where(.pxdemo) .pxdemo-status{display:grid;grid-template-columns:minmax(190px,240px) 1fr;gap:7px 16px;
  font-size:.85rem;margin:0}
:where(.pxdemo) .pxdemo-status dt{color:var(--pxm-text-muted,#6b7280)}
:where(.pxdemo) .pxdemo-status dd{margin:0;font-family:var(--pxm-mono,ui-monospace,Consolas,monospace);
  font-size:.8rem;overflow-wrap:anywhere}
:where(.pxdemo) .pxdemo-ok{color:var(--pxm-success,#16a34a);font-weight:700}
:where(.pxdemo) .pxdemo-bad{color:var(--pxm-danger,#dc2626);font-weight:700}
:where(.pxdemo) .pxdemo-pre{background:var(--pxm-bg-elevated,#f3f4f6);border:1px solid var(--pxm-border,#d1d5db);
  border-radius:var(--pxm-radius-md,8px);padding:10px 12px;font-family:var(--pxm-mono,ui-monospace,Consolas,monospace);
  font-size:.74rem;max-height:240px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0 0}
:where(.pxdemo) .pxdemo-console{background:#0f172a;color:#e2e8f0;border-radius:var(--pxm-radius-md,8px);
  border:1px solid var(--pxm-border-strong,#9ca3af);padding:10px 12px;max-height:300px;
  overflow:auto;font-family:var(--pxm-mono,ui-monospace,Consolas,monospace);font-size:.74rem;line-height:1.5}
:where(.pxdemo) .pxdemo-console:empty::before{content:'— no events yet —';color:#64748b}
:where(.pxdemo) .pxdemo-console-line{white-space:pre-wrap;overflow-wrap:anywhere;
  border-bottom:1px solid rgba(148,163,184,.15);padding:1px 0}
:where(.pxdemo) .pxdemo-slot{min-height:8px}