/*
 * Units360 Demo Shared Styles
 * Dark theme — matches the main site (units360.ai).
 * All demo HTML files should link this sheet:
 *   <link rel="stylesheet" href="demo-shared.css">
 * then override only what is truly demo-specific in a local <style> block.
 */

/* ── Color tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:      #03040e;              /* page background — matches site */
  --surface: #0c112d;              /* card / panel surface */
  --surface2: #060817;             /* recessed / secondary surface */

  /* Brand colors */
  --teal:    #00d4b4;              /* primary accent — matches site --teal */
  --teal-glow: rgba(0,212,180,.15);
  --blue:    #4f8ef7;              /* secondary accent — matches site --accent */
  --purple:  #7c5ef7;              /* tertiary — matches site --accent2 */
  --credit:  #00d4b4;

  /* Semantic colors */
  --green:   #10b981;   --green-glow: rgba(16,185,129,.18);
  --amber:   #f59e0b;   --amber-glow: rgba(245,158,11,.18);
  --red:     #f87171;   --red-glow:   rgba(248,113,113,.18);

  /* Typography */
  --text:    #e8eaf6;              /* primary text — matches site --text */
  --muted:   #9faec8;              /* secondary text — matches site --muted */

  /* Borders */
  --border:  rgba(100,130,220,.18); /* matches site --glass-bd */
}

/* ── Base reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'SF Pro Display', system-ui, sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 15px;
}

@media (min-width: 901px) {
  html, body {
    overflow: hidden;
  }
}

/* ── Back-nav ─────────────────────────────────────────────────────────────── */
.back-nav {
  position: fixed;
  top: 12px; left: 16px;
  z-index: 100;
  font-size: 12px;
  color: var(--teal);
  text-decoration: none;
  letter-spacing: .3px;
  opacity: .8;
  transition: opacity .2s;
}
.back-nav:hover { opacity: 1; }

@media (max-width: 640px) {
  .back-nav {
    top: 8px;
    left: 10px;
    font-size: 11px;
    background: rgba(3,4,14,0.85);
    padding: 3px 8px;
    border-radius: 6px;
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
  }
}

/* ── Shared badge / pill typography ──────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.badge--teal  { border: 1px solid var(--teal);  color: var(--teal); }
.badge--green { border: 1px solid var(--green); color: var(--green); }
.badge--amber { border: 1px solid var(--amber); color: var(--amber); }

/* ── Muted uppercase label (used everywhere for section headers) ─────────── */
.label-xs {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.prog-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.prog-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  border-radius: 2px;
  transition: width .12s;
}

/* ── Commentary strip (bottom of demo) ───────────────────────────────────── */
.commentary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  flex-shrink: 0;
  min-height: 36px;
  transition: border-color .4s;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .commentary {
    padding: 8px 10px;
    font-size: 11px;
  }
}

/* ── JSON Extract & Code Formatting ── */
.inv-json-line, .dcode, .ev-block, .event-block {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-x: auto;
  max-width: 100%;
}

/* ── Bottom Controls & Player Buttons ── */
#controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 10px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.cbtn, .ctrl-btn, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
}

@media (max-width: 900px) {
  #controls {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10000 !important;
    background: var(--surface, #0c101d) !important;
    border-top: 1px solid var(--border) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 10px 12px 14px !important;
    width: 100% !important;
  }
}

/* ── Floating Back Navigation & Header Alignment ── */
a[href="index.html"] {
  position: fixed !important;
  top: 10px !important;
  left: 12px !important;
  z-index: 99999 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border-radius: 100px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;
}

@media (max-width: 900px) {
  #header {
    padding-left: 135px !important;
    min-height: 52px !important;
    height: auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    position: relative !important;
    z-index: 10 !important;
  }
}

@media (max-width: 640px) {
  #controls {
    gap: 6px !important;
    padding: 10px 8px 16px !important;
  }
  .cbtn, .ctrl-btn, .btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 38px !important;
  }
  .csep, .ctrl-sep {
    display: none !important;
  }
  #kbd-hint {
    display: none !important;
  }
  #header {
    padding-left: 120px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    gap: 6px !important;
  }
  a[href="index.html"] {
    top: 8px !important;
    left: 8px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
  .logo span, #logo-sub {
    display: none !important;
  }
  .badge {
    font-size: 8.5px !important;
    padding: 3px 7px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
  }
  #act-title, .act-title {
    font-size: 18px !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
  }
  #act-desc, .act-desc {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
  }
}

/* ── Overlay & Intro Screen Responsiveness ── */
#overlay, #intro {
  padding: 16px !important;
  box-sizing: border-box !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.intro-acts {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
  max-width: 100% !important;
}

.intro-act-chip {
  font-size: 9.5px !important;
  padding: 4px 9px !important;
  white-space: nowrap !important;
}

.intro-use-case {
  flex-wrap: wrap !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 11.5px !important;
  padding: 8px 14px !important;
  max-width: calc(100vw - 32px) !important;
}

.intro-logo {
  font-size: clamp(22px, 6vw, 32px) !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  text-align: center !important;
}

.intro-sub {
  font-size: 13px !important;
  padding: 0 10px !important;
  max-width: min(440px, 90vw) !important;
}

/* ── Flow & Scene SVG Animation Responsiveness ── */
@media (max-width: 900px) {
  #flow-area, #scene-wrap, #flow-wrap {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  #flow-svg {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
  }
  #scene-svg, .scene-svg {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
  }
}

/* ── Global Act Header Vertical Stacking ── */
@media (max-width: 640px) {
  /* Stack act header vertically on all demo pages */
  #act-hdr {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }
  /* Act desc goes to its own line */
  #act-desc, .act-desc {
    margin-left: 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
  }
  /* Progress steps wrap */
  #prog-acts {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .p-act {
    font-size: 9.5px !important;
  }
}