/* ============================================================================
   4reelz /demo + /demo-creator — onboarding overlay, focus, gate popup.
   Bootstrap layered on top of the shared ig-dashboard-v2 prototype.
   ============================================================================ */

/* overlay: keep the app visible behind (low opacity, light blur) */
.demo-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(254,251,254,.62); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; overflow: auto; }
.demo-overlay[hidden] { display: none; }
.demo-sheet { background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.18); padding: 28px; max-width: 380px; width: 100%; text-align: center; }
.demo-sheet h2 { font-family: var(--serif); font-size: 26px; letter-spacing: -.02em; margin: 8px 0 18px; }
.demo-cats { display: grid; grid-template-columns: 1fr; gap: 10px; }
.demo-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fafafa; padding: 12px 14px; cursor: pointer; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; text-align: left; color: inherit; }
.demo-cat:hover { border-color: var(--accent); }
.demo-cat[disabled] { opacity: .45; cursor: default; }
.demo-cat-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.demo-cat-sub { font-size: 9px; letter-spacing: .05em; color: var(--muted); }
.demo-cat-plats { display: flex; gap: 4px; flex: none; }
.demo-plat { font-family: var(--mono); font-size: 8.5px; letter-spacing: .05em; border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px; color: var(--muted); background: var(--card); }
.demo-skip { margin-top: 16px; background: none; border: 0; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.demo-skip:hover { color: var(--ink); }

/* focus (pipeline step): dim the view AND the topbar/tab nav over 1s.
   filter + opacity must share the duration or the dim finishes early. */
body.demo-focus #view > * { filter: blur(3px); opacity: .4; transition: filter 1s ease, opacity 1s ease; }
body.demo-focus .tabs .tab,
body.demo-focus .topbar-lead,
body.demo-focus .profile-btn { filter: blur(3px); opacity: .4; transition: filter 1s ease, opacity 1s ease; }
/* the two Save panels stay fully clear. A class on the button can't clear its
   ancestor card, so the clearing class lives on the cards (.demo-clear). */
body.demo-focus .demo-clear { filter: none !important; opacity: 1 !important; }

/* Save-button invite: halo pulse (ported from prototypes/start-button-anim.html) */
.demo-cta { position: relative; }
.demo-cta::after {
  content: "";
  position: absolute; inset: -5px;
  border: 2px solid var(--accent);
  border-radius: 13px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: halo 1.9s cubic-bezier(.22,.61,.36,1) infinite;
}
#pipe-top-btn.demo-cta::after { animation-delay: 950ms; }
@keyframes halo { 0% { transform: scale(.94); opacity: .45; } 70% { transform: scale(1.10); opacity: 0; } 100% { transform: scale(1.10); opacity: 0; } }

.demo-spot { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; opacity: 1; animation: demo-nudge 1.5s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes demo-nudge { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(3px); } 60% { transform: translateX(-3px); } }
/* state re-renders set .no-anim, which suppresses .stagger animations; re-enable
   the card nudge so the first dashboard card still invites the click. */
#view.no-anim .stagger.demo-spot { opacity: 1 !important; animation: demo-nudge 1.5s cubic-bezier(.22,.61,.36,1) infinite !important; }
.demo-hint { margin: 14px 2px 0; color: var(--accent); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; text-align: center; }

/* demo policy: 5-reel demo set — larger saves route to the join-code popup
   (visually mirrors styles.css .tile[disabled]; the shim also sets the attr
   for keyboard parity) */
#pipe-top-limits [data-limit="10"], #pipe-top-limits [data-limit="25"], #pipe-top-limits [data-limit="50"] { opacity: .45; pointer-events: none; }

/* processing overlay (simulated run) — flex + margin:auto centers when it fits,
   scrolls from the top when it doesn't (grid place-items clips the top) */
.demo-proc { position: fixed; inset: 0; z-index: 85; background: rgba(254,251,254,.96); display: flex; padding: 20px 20px 64px; overflow: auto; }
.demo-proc .box { text-align: center; max-width: 460px; width: 100%; padding: 20px; margin: auto; }
.demo-proc canvas { margin: 0 auto; }
.demo-proc .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: 10px; }
.demo-proc .jobs2 { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; text-align: left; }
.demo-proc .jrow { position: relative; display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--card); }
.demo-proc .jrow .sc { font-family: var(--mono); font-size: 11px; color: var(--muted); flex: none; }
/* once the title lands, the shortcode is redundant */
.demo-proc .jrow.titled .sc { display: none; }
.demo-proc .jrow .ti { flex: 1; min-width: 0; overflow: hidden; }
/* one fixed size on every row: compact technical mono, single line, ellipsis */
.demo-proc .jrow .ti-run { display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-proc .jrow .st { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* the row outline doubles as the progress bar, filling left -> right */
.demo-proc .jrow .fill { position: absolute; inset: -1px; border: 1px solid var(--accent); border-radius: 10px; clip-path: inset(0 100% 0 0); transition: clip-path .35s linear; pointer-events: none; }
.demo-proc .jrow.done .fill { border-color: var(--ok); clip-path: inset(0 0 0 0); }
.demo-proc .jrow.done .st { color: var(--ok); }

/* gate popup */
.demo-pop { position: fixed; inset: 0; z-index: 90; background: rgba(20,19,23,.45); display: grid; place-items: center; padding: 24px; }
.demo-pop .pc { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.25); padding: 26px; max-width: 360px; width: 100%; text-align: center; }
.demo-pop h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 6px; }
.demo-pop p { color: var(--muted); margin: 0 0 16px; font-size: 13.5px; }
.demo-pop button { display: block; width: 100%; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border-radius: 12px; padding: 13px; min-height: 46px; cursor: pointer; }
.demo-pop .primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.demo-pop .ghost { background: var(--card); color: var(--accent); border: 1px solid var(--accent); margin-top: 8px; }

/* join-code "Enter code" — disabled per prototype A3 (outline + lock + Soon) */
.demo-pop button[disabled] { cursor: not-allowed; }
.demo-pop .demo-outline { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--card); color: var(--muted); border: 1px solid var(--line); }
.demo-outline .demo-lock { width: 12px; height: 12px; flex: none; }
.demo-lock rect, .demo-lock path { fill: none; stroke: currentColor; stroke-width: 1.4; }
.demo-cap { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); border-left: 1px solid var(--line); padding-left: 7px; }

/* DEMO-ONLY profile-menu delta (B3): the CREATOR tab is disabled + "Soon".
   Applied by demo-shim.js after boot; the shared prototype at /4reelz/ keeps
   both tabs working. */
.mode-tab[disabled] { color: var(--faint); cursor: not-allowed; }
.mode-tab[disabled]:hover { color: var(--faint); }
.demo-soon { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 1px 5px; }

/* the bare-word DEMO tag */
.demo-tag { display: inline-flex; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#view .demo-tag { margin: 0 2px 12px; }
.demo-proc > .demo-tag { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom)); }

/* internal-only queue-control delta: the "Save next" / "Enqueue next"
   priority controls stay in the /4reelz/ dashboard but never surface in the
   public consumer demo. */
#pipe-ingest-front-btn,
#pipe-top-front-btn,
[data-enqueue-front] { display: none !important; }

/* Consumer demo: no re-processing surface. The internal /4reelz/ dashboard keeps
   the "Needs re-processing" section; the public demo never shows it. The shim
   already stubs /api/reprocess to an empty shape, this removes the section,
   its eyebrow heading and its footnote entirely. */
.section-head:has(#pipe-rp-hint),
#pipe-rp,
#pipe-rp + .pipe-foot { display: none !important; }