/* Demo-only chrome: the first-visit tour (tour.js), the "On WhatsApp" card (templates/_whatsapp_panel.html), the
   plain explanation strip and the founder link (base.html, login.html). Loaded only when console_auth.demo_ui()
   is set. Uses the existing tokens (app.css on console pages, kyrosai.css in the app, same names), no new colours:
   dark by default, light via <html data-theme="light">. */

/* ---- tour: ring and card ---- */
.tour-ring { position: fixed; z-index: 9; pointer-events: none; border-radius: 14px;
  box-shadow: 0 0 0 2px var(--ember, #FF7A1A), 0 0 0 9999px rgba(0, 0, 0, .38); transition: top .2s, left .2s, width .2s, height .2s; }
.tour-card { position: fixed; z-index: 91; right: 20px; bottom: 20px; width: min(360px, calc(100vw - 32px)); box-sizing: border-box;
  background: var(--surface, #141416); color: var(--ink, #F2F2F3); border: 1px solid var(--line, #2A2A2E); border-radius: 16px;
  padding: 16px 18px 14px; box-shadow: var(--shadow, 0 10px 40px rgba(0, 0, 0, .5)); font: 15px/1.5 var(--f, system-ui, sans-serif); }
.tour-card[hidden], .tour-ring[hidden] { display: none; }
.tour-card.centred, .tour-welcome { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 32px)); }
.tour-welcome { z-index: 91; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5), var(--shadow, 0 10px 40px rgba(0, 0, 0, .5)); }
.tour-title { margin: 6px 0 4px; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
.tour-text { margin: 0 0 12px; color: var(--muted, #A1A1A8); }
.tour-welcome .tour-text { margin-bottom: 8px; }
.tour-dots { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-2, #1F1F22); box-shadow: inset 0 0 0 1px var(--faint, #6E6E76); }
.tour-dot.past { background: var(--faint, #6E6E76); box-shadow: none; }
.tour-dot.on { background: var(--ember, #FF7A1A); box-shadow: none; }
.tour-row { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 4px; }
.tour-btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--surface-2, #1F1F22); color: var(--ink, #F2F2F3);
  font: inherit; font-weight: 500; cursor: pointer; }
.tour-btn:hover { background: color-mix(in srgb, var(--surface-2, #1F1F22) 86%, var(--ink, #F2F2F3)); }
.tour-btn:focus-visible { outline: 2px solid var(--focus, var(--ember, #FF7A1A)); outline-offset: 2px; }
.tour-primary { background: var(--primary, #F2F2F3); color: var(--on-primary, #000); font-weight: 600; }
.tour-primary:hover { background: color-mix(in srgb, var(--primary, #F2F2F3) 88%, var(--bg, #000)); }
.tour-skip { margin-right: auto; background: none; color: var(--muted, #A1A1A8); padding: 0 10px; }
.tour-skip:hover { background: var(--surface-2, #1F1F22); color: var(--ink, #F2F2F3); }
@media (max-width: 719px) {   /* a small window: the card sits at the bottom edge, full width */
  .tour-card:not(.centred):not(.tour-welcome) { left: 16px; right: 16px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .tour-ring { transition: none; } }

/* header "Tour" button: from 1180 px up in the bar, below that it lives in the More menu */
.tour-link { color: var(--muted); padding: 0 12px; }
@media (max-width: 1179px) { .top-r > .tour-link { display: none; } }

/* ---- the plain line: a slim dismissible strip under the top bar, and the same words on the login page ---- */
.demo-line { background: var(--surface, #141416); border-bottom: 1px solid var(--line, #2A2A2E); color: var(--muted, #A1A1A8); font-size: 14px; }
.demo-line-in { max-width: var(--page-w, 1440px); margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 12px; }
.demo-line-in span { flex: 1; min-width: 0; }
.demo-line-x { flex-shrink: 0; min-height: 32px; min-width: 32px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; }
.demo-line-x:hover { background: var(--surface-2); color: var(--ink); }
.demo-line-x:focus-visible { outline: 2px solid var(--focus, var(--ember)); }
.login-explain { margin: 0 0 16px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.demo-contact { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.demo-contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.demo-foot { max-width: var(--page-w, 1440px); margin: 24px auto 0; padding: 0 24px 24px; }
@media (max-width: 719px) { .demo-line-in, .demo-foot { padding-left: 16px; padding-right: 16px; } }

/* ---- Overview: the WhatsApp card beside the numbers (wide screens) ---- */
.ov-wa { display: block; }
@media (min-width: 1100px) {
  .ov-wa { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
}
.ov-side { min-width: 0; }
@media (min-width: 1100px) { .ov-side { position: sticky; top: 72px; } }

/* ---- "On WhatsApp": a phone-styled slice of the chat ---- */
.wa { padding: 16px; }
.wa h2 { margin: 0 0 2px; font-size: 17px; }
.wa-cap { margin: 0 0 12px; }
.wa-phone { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--bg); }
.wa-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.wa-mark { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 34% 30%, var(--amber, #FFB547), var(--ember, #FF7A1A) 52%, #7A2408 100%); }
.wa-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.wa-who .small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-chat { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 5px; max-height: 520px; overflow-y: auto; }
.wa-b { max-width: 80%; padding: 5px 9px 4px; border-radius: 10px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.wa-b.kyros { align-self: flex-start; background: var(--surface-2); border-top-left-radius: 3px; }
.wa-b.mine { align-self: flex-end; background: var(--ember-soft, rgba(255, 122, 26, .14)); border-top-right-radius: 3px; }
.wa-t { display: block; margin-top: 1px; text-align: right; font-size: 11px; line-height: 1.2; color: var(--faint); }

/* ---- "On your phone" popup: a centred card over a scrim; the QR sits on a white square (scannable in dark mode) ---- */
.phone-scrim { position: fixed; inset: 0; z-index: 95; background: var(--scrim, rgba(0, 0, 0, .62)); display: grid; place-items: center; padding: 16px; }
.phone-card { position: static; transform: none; width: min(360px, 100%); }
.phone-body { text-align: center; margin: 8px 0 12px; color: var(--muted); }
.phone-body .qr { display: block; width: fit-content; margin: 0 auto; background: #FFFFFF; border-radius: 12px; padding: 6px; line-height: 0; }
/* a QR is square: fix both sides (height:auto left the box taller than the code) */
.phone-body .qr svg { display: block; width: 220px; height: 220px; }
.phone-body p { margin: 10px 0 0; }