/* Guided demo layer (UI_DEMO=1 only). Everything here is driven by demo.js. */
html.demo-on body { padding-top: 52px; }
html.demo-on .top { top: 52px; }

#demo-bar { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: linear-gradient(90deg, #15171b, #0b0c0f 60%); border-bottom: 1px solid var(--accent); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); font-size: 13px; color: var(--text); }
#demo-bar .d-badge { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent-ink); background: var(--accent); border-radius: 4px; padding: 3px 7px; }
#demo-bar .d-title { flex: none; font-weight: 650; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#demo-bar .d-prog { flex: none; width: 120px; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
#demo-bar .d-prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.4s ease; }
#demo-bar .d-step { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
#demo-bar .d-say { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
#demo-bar .d-btns { flex: none; display: flex; gap: 6px; }
#demo-bar button { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); cursor: pointer; }
#demo-bar button:hover { border-color: var(--accent); }
#demo-bar button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
#demo-bar a { color: var(--accent); font-weight: 600; }

#demo-tip { position: fixed; z-index: 1002; max-width: 360px; padding: 12px 14px; border-radius: 10px; background: #eef0f3; color: #111317; font-size: 13.5px; line-height: 1.45; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; }
#demo-tip.show { opacity: 1; transform: none; }
#demo-tip strong { color: #000; }
#demo-tip .d-kind { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5b636d; margin-bottom: 4px; }
#demo-tip.center { left: 50%; top: 38%; transform: translate(-50%, -50%); max-width: 520px; font-size: 15px; padding: 18px 22px; }
#demo-tip.center.show { transform: translate(-50%, -50%); }

#demo-ring { position: fixed; z-index: 1001; border: 2px solid var(--accent); border-radius: 8px; box-shadow: 0 0 0 4px rgba(94, 227, 200, 0.18), 0 0 0 9999px rgba(3, 10, 12, 0.35); pointer-events: none; opacity: 0; transition: opacity 0.25s ease, left 0.45s ease, top 0.45s ease, width 0.45s ease, height 0.45s ease; }
#demo-ring.show { opacity: 1; }

#demo-cursor { position: fixed; z-index: 1003; left: 0; top: 0; width: 26px; height: 26px; pointer-events: none; transition: transform 0.75s cubic-bezier(0.22, 0.8, 0.3, 1); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
#demo-cursor path { fill: #fff; stroke: #0a0b0d; stroke-width: 1.4; }
/* Press = shrink the arrow itself. Never scale #demo-cursor: its position lives in `transform`,
   and `scale` on the same element multiplies that translate, so the cursor jumps toward 0,0. */
#demo-cursor svg { display: block; transform-origin: 4px 2px; transition: transform 0.12s ease; }
#demo-cursor.press svg { transform: scale(0.82); }
.demo-ripple { position: fixed; z-index: 1002; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--accent); pointer-events: none; animation: demo-ripple 0.6s ease-out forwards; }
@keyframes demo-ripple { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

#demo-pill { position: fixed; z-index: 1000; right: 16px; bottom: 40px; padding: 7px 12px; border-radius: 999px; background: var(--panel-2); color: var(--accent); border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
#demo-pill:hover { text-decoration: none; filter: brightness(1.08); }

/* catalogue */
.demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.demo-card { position: relative; display: flex; flex-direction: column; margin: 0; }
.demo-group { margin: 22px 0 8px; }
.demo-group > .section-head { margin-bottom: 10px; }
.demo-card h3 { margin: 8px 0 6px; font-size: 15px; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--text); }
.demo-card p.demo-ctx { flex: none; font-size: 12px; line-height: 1.45; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; margin: 0 0 12px; }
.demo-card p { color: var(--text); flex: 1; margin: 0 0 10px; }
.demo-card .demo-num { position: absolute; top: 14px; right: 16px; font-size: 22px; font-weight: 700; color: var(--line-2); font-variant-numeric: tabular-nums; }
.demo-card .tag { align-self: flex-start; }

@media (max-width: 820px) {
  #demo-bar .d-title, #demo-bar .d-prog { display: none; }
  #demo-bar { gap: 8px; }
  #demo-tip { max-width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  #demo-cursor, #demo-ring, #demo-tip { transition: none; }
}