/* Tellyport interactive demo. Tokens, buttons, badges, brand, and theme menu come from /welcome/site.css. */

/* Aliases so the layout below can keep its spacing and type scale. */
.demo {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 18px; --text-2xl: 26px; --text-4xl: 52px;
  --text-secondary: var(--text-2); --text-tertiary: var(--text-3); --surface-sunken: var(--surface-2);
  --radius-xs: 4px; --shadow-xl: var(--shadow-lg); --focus-ring: var(--focus);
  background:
    radial-gradient(50% 360px at 80% 0%, rgba(99, 102, 241, 0.12), transparent 70%),
    var(--bg);
}

.demo svg { fill: none; }
.card { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.text-secondary { color: var(--text-2); }
.text-tertiary { color: var(--text-3); }
.demo .badge { height: 24px; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }
.topbar-inner { display: flex; align-items: center; gap: var(--space-3); max-width: 1240px; height: 62px; margin: 0 auto; padding: 0 var(--space-6); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* Footer */
.demo-footer { border-top: 1px solid var(--border); background: var(--bg-subtle); }
.demo-footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; max-width: 1240px; margin: 0 auto; padding: 28px var(--space-6); }
.demo-footer img { width: 120px; height: auto; }
.demo-footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; }
.demo-footer nav a { color: var(--text-2); }
.demo-footer nav a:hover { color: var(--text); }
.demo-footer p { margin-left: auto; color: var(--text-3); font-size: 12.5px; }

.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 550; box-shadow: var(--shadow-xs); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }

/* Page */
.page { max-width: 1240px; margin: 0 auto; padding: var(--space-12) var(--space-6) var(--space-16); }
.section-title { font-size: var(--text-md); font-weight: 600; }
.section-sub { margin-top: 2px; font-size: var(--text-sm); }

.hero { max-width: 760px; }
.hero h1 { margin-top: var(--space-4); font-size: clamp(34px, 5vw, var(--text-4xl)); line-height: 1.05; font-weight: 700; letter-spacing: -0.04em; }
.hero-accent { background: linear-gradient(100deg, #4f46e5, #7c3aed 60%, #2563eb); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .hero-accent { background-image: linear-gradient(100deg, #a5b4fc, #c4b5fd 55%, #93c5fd); }
.hero-lede { margin-top: var(--space-4); max-width: 640px; font-size: var(--text-lg); line-height: 1.55; color: var(--text-secondary); }

/* Stepper */
.stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-10) 0 var(--space-6); padding: 0; list-style: none; }
.stepper-item { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.stepper-num { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border-strong); border-radius: 50%; font-size: var(--text-sm); font-weight: 600; color: var(--text-tertiary); background: var(--surface-sunken); }
.stepper-text { display: grid; min-width: 0; }
.stepper-text b { font-size: var(--text-base); font-weight: 600; }
.stepper-text small { font-size: var(--text-xs); color: var(--text-tertiary); }
.stepper-item.is-current { border-color: var(--accent-border); box-shadow: var(--focus-ring); }
.stepper-item.is-current .stepper-num { border-color: var(--accent); color: var(--text-inverse); background: var(--accent); }
.stepper-item.is-done .stepper-num { border-color: var(--success-border); color: transparent; background: var(--success-soft); position: relative; }
.stepper-item.is-done .stepper-num::after { content: ""; position: absolute; width: 10px; height: 5px; margin-top: -2px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); }

/* Main grid */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.stage { position: sticky; top: 84px; }
.stage-card { padding: var(--space-6); box-shadow: var(--shadow-md); }
.stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }

/* TV mock — a physical device, intentionally dark in both themes */
.tv { display: grid; justify-items: center; }
.tv-bezel { width: 100%; padding: 10px; border-radius: 18px; background: linear-gradient(180deg, #1d2130, #0d0f16); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(15, 23, 42, 0.5), var(--shadow-xl); }
.tv-screen {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 16 / 9; overflow: hidden;
  padding: clamp(14px, 3vw, 28px); border-radius: 10px; color: #f1f3f9;
  background: radial-gradient(120% 90% at 85% 0%, rgba(99, 102, 241, 0.42), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(56, 189, 248, 0.18), transparent 60%), linear-gradient(160deg, #141a33, #090b14 70%);
  transition: background 400ms var(--ease), filter 300ms var(--ease);
}
.tv-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.06), transparent 38%); }
.tv-screen.maintenance { background: radial-gradient(120% 90% at 85% 0%, rgba(245, 158, 11, 0.38), transparent 55%), linear-gradient(160deg, #2a1d0c, #0f0b06 70%); }
.tv-screen.offline { filter: saturate(0.75); }
.tv-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: clamp(10px, 1.4vw, 12px); color: rgba(241, 243, 249, 0.72); }
.tv-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; letter-spacing: 0.01em; }
.tv-brand-dot { width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg, #818cf8, #38bdf8); }
.tv-top-right { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); }
.tv-offline-chip { display: none; padding: 2px 8px; border: 1px solid rgba(253, 176, 34, 0.45); border-radius: var(--radius-full); color: #fcd28a; background: rgba(253, 176, 34, 0.14); font-family: var(--font-sans); font-weight: 500; white-space: nowrap; }
.tv-screen.offline .tv-offline-chip { display: inline-block; }
.tv-content { display: flex; flex: 1; flex-direction: column; justify-content: center; min-height: 0; max-width: 88%; }
.tv-kicker { font-size: clamp(9px, 1.2vw, 11px); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #a5b4fc; }
.tv-screen.maintenance .tv-kicker { color: #fcd28a; }
.tv-title { margin-top: 6px; font-size: clamp(17px, 3.4vw, 32px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.tv-message { margin-top: 6px; font-size: clamp(11px, 1.5vw, 14px); line-height: 1.45; color: rgba(241, 243, 249, 0.72); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(6px, 1.2vw, 10px); margin-top: clamp(10px, 2vw, 18px); }
.tv-rail i { aspect-ratio: 16 / 10; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(140deg, rgba(129, 140, 248, 0.5), rgba(30, 41, 82, 0.6)); }
.tv-rail i:nth-child(2) { background: linear-gradient(140deg, rgba(56, 189, 248, 0.45), rgba(15, 40, 70, 0.6)); }
.tv-rail i:nth-child(3) { background: linear-gradient(140deg, rgba(244, 114, 182, 0.4), rgba(60, 20, 50, 0.6)); }
.tv-rail i:nth-child(4) { background: linear-gradient(140deg, rgba(52, 211, 153, 0.4), rgba(10, 50, 40, 0.6)); }
.tv-screen.maintenance .tv-rail { opacity: 0.25; }
.tv-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: clamp(8px, 1.6vw, 14px); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: clamp(9px, 1.3vw, 12px); color: rgba(241, 243, 249, 0.8); }
.tv-footer-item { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.tv-footer-item .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-footer-label { flex: none; color: rgba(241, 243, 249, 0.5); }
.tv-version { flex: none; }
.tv-screen.updated .tv-content { animation: tv-refresh 600ms var(--ease); }
@keyframes tv-refresh { from { opacity: 0.2; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tv-stand { width: 22%; height: 14px; margin-top: -1px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #2a2f3f, #161a24); }

/* Status grid */
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-6) 0 0; }
.status-tile { min-width: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }
.status-tile dt { font-size: var(--text-xs); font-weight: 500; color: var(--text-tertiary); }
.status-tile dd { margin: 6px 0 0; min-width: 0; }
.status-wide { grid-column: 1 / -1; }
.status-tile .badge { max-width: 100%; height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; white-space: normal; line-height: 1.3; }
.status-tile .badge::before { flex: none; }
.readout { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); color: var(--text); }
.poll-line { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.poll-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.poll-dot.live { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); animation: pulse 2s ease-in-out infinite; }
.poll-dot.warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px var(--success-soft); } }

/* Step cards */
.steps { display: grid; gap: var(--space-4); }
.step-card { padding: var(--space-6); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.step-card.is-current { border-color: var(--accent-border); box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-soft); }
.step-head { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); }
.step-num { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-border); }
.step-card.is-done .step-num { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field-wide { grid-column: 1 / -1; }
.mono-input { font-family: var(--font-mono); font-size: var(--text-sm); }
.select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%), linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.inline-status { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.inline-status:empty { display: none; }
.inline-status.error { color: var(--danger); }
.inline-status.ok { color: var(--success); }

.quick-actions { display: grid; gap: var(--space-4); }
.quick-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 500; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.server-dot { width: 8px; height: 8px; border-radius: 50%; }
.server-a { background: var(--info); }
.server-b { background: var(--accent); }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); cursor: pointer; }
.switch-row > span { display: grid; }
.switch-row b { font-size: var(--text-base); font-weight: 500; }
.switch-row small { font-size: var(--text-xs); color: var(--text-tertiary); }
.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 40px; height: 22px; margin: 0; border-radius: var(--radius-full); background: var(--border-strong); cursor: pointer; transition: background var(--duration) var(--ease); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--duration) var(--ease); }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }

.micro { font-size: var(--text-xs); color: var(--text-tertiary); }
.operator { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.operator summary { cursor: pointer; font-size: var(--text-sm); font-weight: 500; color: var(--accent); width: fit-content; border-radius: var(--radius-xs); }
.operator-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); align-items: end; }
.operator-form .btn { grid-column: 1 / -1; }
.operator-note { grid-column: 1 / -1; }

/* Fallback chain */
.fallback { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.fallback-item { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-tertiary); background: var(--surface); transition: all var(--duration) var(--ease); }
.fallback-item > span:last-child { display: grid; }
.fallback-item b { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }
.fallback-item small { font-size: var(--text-xs); }
.fallback-num { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 600; background: var(--bg-subtle); border: 1px solid var(--border); }
.fallback-item.is-active { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
.fallback-item.is-active b { color: var(--text); }
.fallback-item.is-active .fallback-num { color: var(--text-inverse); background: var(--success); border-color: var(--success); }
:root[data-theme="dark"] .fallback-item.is-active .fallback-num { color: #052e1a; }
.fallback-item.is-active[data-source="last-known-good"] { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
.fallback-item.is-active[data-source="last-known-good"] .fallback-num { background: var(--warning); border-color: var(--warning); }
:root[data-theme="dark"] .fallback-item.is-active[data-source="last-known-good"] .fallback-num { color: #2e1c02; }
.fallback-item.is-active[data-source="bundled"] { border-color: var(--border-strong); background: var(--bg-subtle); color: var(--text-secondary); }
.fallback-item.is-active[data-source="bundled"] .fallback-num { color: var(--text); background: var(--surface); border-color: var(--border-strong); }

/* Activity log */
.activity { margin-top: var(--space-6); overflow: hidden; }
.event-stream { max-height: 280px; margin: 0; padding: var(--space-2) 0; overflow-y: auto; list-style: none; }
.event { display: grid; grid-template-columns: auto 8px minmax(0, 1fr); align-items: baseline; gap: var(--space-2); padding: 8px var(--space-6); font-size: var(--text-sm); color: var(--text-secondary); }
.event + .event { border-top: 1px solid var(--border); }
.event time { white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.event-icon { width: 8px; height: 8px; border-radius: 50%; align-self: center; background: var(--border-strong); }
.event.success .event-icon { background: var(--success); }
.event.warning .event-icon { background: var(--warning); }
.event.danger .event-icon { background: var(--danger); }
.event.info .event-icon { background: var(--accent); }
.event.danger .event-text { color: var(--danger); }
.event:first-child { animation: event-in 300ms var(--ease); }
@keyframes event-in { from { opacity: 0; transform: translateY(-4px); } }

/* Responsive */
@media (max-width: 1000px) {
  .demo-grid { grid-template-columns: minmax(0, 1fr); }
  .stage { position: static; }
}
@media (max-width: 720px) {
  .br-desktop { display: none; }
  .topbar-inner { padding: 0 var(--space-4); gap: var(--space-2); }
  .topbar-tag, .console-link { display: none; }
  .page { padding: var(--space-8) var(--space-4) var(--space-12); }
  .hero h1 { font-size: 32px; }
  .demo-footer-inner { padding: 24px var(--space-4); }
  .demo-footer p { margin-left: 0; }
  .hero-lede { font-size: var(--text-md); }
  .stepper { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin-top: var(--space-6); }
  .stepper-item { padding: 10px var(--space-3); }
  .stage-card, .step-card { padding: var(--space-4); }
  .stage-head { flex-direction: column; gap: var(--space-2); }
  .form-grid, .button-row, .operator-form { grid-template-columns: minmax(0, 1fr); }
  .card-header { padding: var(--space-4); }
  .event { padding: 8px var(--space-4); }
  .tv-bezel { padding: 6px; border-radius: 12px; }
  .tv-rail { display: none; }
  .tv-content { max-width: 100%; }
}