/* Full-screen demo page. The Kibana Canvas inside keeps its own design. */
body.demo {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; overflow: hidden;
  background: #000;
}

.demo-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap;
  padding: .6rem 1rem;
  background: var(--ink); border-bottom: 1px solid var(--line);
}
.demo-id { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.demo-badge {
  flex: none;
  font-family: var(--font-mono); font-size: .625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  border-radius: .25rem; padding: .35rem .55rem;
}
.demo-id h1 { font-size: .95rem; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-id p { font-size: .6875rem; color: var(--muted); }

.demo-controls { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.demo-controls .btn { min-height: 2.1rem; padding: .4rem .8rem; font-size: .6875rem; }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: .25rem; overflow: hidden; }
.segmented button {
  appearance: none; border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .55rem .8rem;
}
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button:hover { color: var(--text); background: var(--surface); }
.segmented button[aria-pressed="true"] { background: var(--seal); color: var(--ink); }

.live {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--seal-bright);
}
.live i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--seal-bright); box-shadow: 0 0 10px var(--seal-bright); animation: blink 1.6s infinite; }

.demo-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; }
.demo-stage.scroll { overflow-y: auto; overflow-x: hidden; }
.demo-frame { position: relative; overflow: hidden; }
.demo-frame iframe {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 3320px; border: 0; transform-origin: 0 0;
  background: #000;
}

.demo-hint {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 5;
  font-family: var(--font-mono); font-size: .6875rem; color: var(--muted);
  background: color-mix(in srgb, var(--ink) 85%, transparent); border: 1px solid var(--line); border-radius: .25rem;
  padding: .4rem .7rem; transition: opacity .4s;
}
.demo-hint b { color: var(--text); font-weight: 600; }
.demo-hint.hidden { opacity: 0; pointer-events: none; }

/* TV / kiosk: full screen or ?kiosk=1 hides everything but the dashboard. */
body.kiosk .demo-bar, body.kiosk .demo-hint { display: none; }

@keyframes blink { 50% { opacity: .35; } }

@media (max-width: 760px) {
  .demo-id p, .live { display: none; }
}