/* ==========================================================================
   demo-shell.css — styles for the standalone demo viewer shell
   (template/components/_demo_shell.php). Extracted verbatim from the inline
   <style> block that lived in that component (separation-of-concerns refactor).
   Loaded by the component's own <head>.
   ========================================================================== */

body.demo-shell-body { max-width: 760px; margin: 0 auto; padding: 1.25rem 1rem 4rem; background: var(--bg, #fafaf9); }
.demo-shell-crumb { display: flex; align-items: center; gap: .35rem; padding: .55rem .9rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; font-size: .85rem; color: #92400e; margin-bottom: 1rem; flex-wrap: wrap; }
.demo-shell-crumb a { color: #b45309; text-decoration: none; font-weight: 600; }
.demo-shell-crumb a:hover { text-decoration: underline; }
.demo-shell-crumb .sep { color: #92400e; opacity: .55; }
.demo-shell-crumb .here { color: #1c1917; font-weight: 700; }
.demo-shell-crumb .close { margin-left: auto; padding: .15rem .7rem; border: 1px solid #fcd34d; border-radius: 999px; background: #fef3c7; font-size: .78rem; }
.demo-shell-crumb .close:hover { background: #fde68a; text-decoration: none; }
.demo-shell-title { font-size: 1.4rem; margin: 0 0 .35rem; letter-spacing: -.01em; color: #1c1917; }
.demo-shell-desc { color: #57534e; font-size: .9rem; margin: 0 0 .85rem; line-height: 1.55; }
.demo-shell-h { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #78716c; margin: 1rem 0 .5rem; }
.demo-shell-h:empty { display: none; }
/* Build-the-App widget shells: tic-tac-toe, notes, chat are all rendered
   as standalone interactive surfaces. The .demo-output card was built
   for JSON payloads — sandstone background, monospace, 360px max-height —
   which crops the game board and looks wrong around a chat panel.
   Unwrap them when the body contains a known widget root. */
.demo-output:has(.ttt, .notes-app, .chat, .demo-login-wrap, .ws-counter-card) {
    background: transparent; padding: 0;
    min-height: auto; max-height: none; overflow: visible;
    font-family: var(--font, ui-sans-serif, system-ui); font-size: inherit;
}
.inject-case:has(.ttt, .notes-app, .chat, .demo-login-wrap, .ws-counter-card) { border: none; border-radius: 0; }
