/* =========================================================================
   Walkthrough-Engine — shared design system v2
   -------------------------------------------------------------------------
   Single source of truth for tokens, type, surfaces, buttons, controls.
   Loaded AFTER each page's inline <style> so it wins the cascade.
   Targets generic structural classes the legacy pages already use
   (header, aside, section, button, input, etc.) plus a few named
   class hooks. Keeps every existing ID/class working — only restyles.
   ========================================================================= */

/* ---- Tokens ----------------------------------------------------------- */
html[data-theme="light"], html:root {
  --bg-base:      #fafaf9;
  --bg-surface:   #ffffff;
  --bg-elev:      #f5f4f1;
  --bg-overlay:   rgba(255, 255, 255, 0.78);
  --line-soft:    rgba(15, 15, 14, 0.06);
  --line:         rgba(15, 15, 14, 0.10);
  --line-strong:  rgba(15, 15, 14, 0.18);
  --text:         #1a1816;
  --text-2:       #4a4842;
  --text-3:       #8a877f;
  --text-4:       #b9b6ad;
  --accent:       #b8651a;
  --accent-fg:    #ffffff;
  --accent-soft:  rgba(184, 101, 26, 0.10);
  --accent-line:  rgba(184, 101, 26, 0.30);
  --route:        #157a3a;
  --route-soft:   rgba(21, 122, 58, 0.10);
  --danger:       #b91c1c;
  --shadow-xs:    0 1px 2px rgba(15, 15, 14, 0.04);
  --shadow-sm:    0 1px 2px rgba(15, 15, 14, 0.04), 0 2px 6px rgba(15, 15, 14, 0.06);
  --shadow-md:    0 4px 8px rgba(15, 15, 14, 0.04), 0 12px 24px rgba(15, 15, 14, 0.08);
  --shadow-lg:    0 8px 16px rgba(15, 15, 14, 0.06), 0 24px 48px rgba(15, 15, 14, 0.12);
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    18px;
  --radius-pill:  999px;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* legacy aliases — old pages reference these names */
  --we-bg-deep:        var(--bg-base);
  --we-bg-panel:       var(--bg-surface);
  --we-bg-elev:        var(--bg-elev);
  --we-line:           var(--line);
  --we-line-strong:    var(--line-strong);
  --we-text:           var(--text);
  --we-text-dim:       var(--text-2);
  --we-text-faint:     var(--text-3);
  --we-accent:         var(--accent);
  --we-accent-soft:    var(--accent-soft);
  --we-route:          var(--route);
  --we-route-soft:     var(--route-soft);
  --we-error:          var(--danger);
  --we-font-display:   var(--font-body);
  --we-font-mono:      var(--font-mono);
}
html[data-theme="dark"] {
  --bg-base:      #0e0e0d;
  --bg-surface:   #181816;
  --bg-elev:      #232220;
  --bg-overlay:   rgba(20, 20, 18, 0.76);
  --line-soft:    rgba(255, 255, 255, 0.04);
  --line:         rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.16);
  --text:         #ededeb;
  --text-2:       #b3b1a9;
  --text-3:       #7a7770;
  --text-4:       #4f4d47;
  --accent:       #e09040;
  --accent-fg:    #1a1816;
  --accent-soft:  rgba(224, 144, 64, 0.14);
  --accent-line:  rgba(224, 144, 64, 0.40);
  --route:        #4ade80;
  --route-soft:   rgba(74, 222, 128, 0.14);
  --danger:       #ef4444;
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-md:    0 4px 8px rgba(0, 0, 0, 0.30), 0 12px 24px rgba(0, 0, 0, 0.40);
  --shadow-lg:    0 8px 16px rgba(0, 0, 0, 0.40), 0 24px 48px rgba(0, 0, 0, 0.50);

  --we-bg-deep:        var(--bg-base);
  --we-bg-panel:       var(--bg-surface);
  --we-bg-elev:        var(--bg-elev);
  --we-line:           var(--line);
  --we-line-strong:    var(--line-strong);
  --we-text:           var(--text);
  --we-text-dim:       var(--text-2);
  --we-text-faint:     var(--text-3);
  --we-accent:         var(--accent);
  --we-accent-soft:    var(--accent-soft);
  --we-route:          var(--route);
  --we-route-soft:     var(--route-soft);
  --we-error:          var(--danger);
}

/* ---- Base type ------------------------------------------------------- */
html, body {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.5;
  letter-spacing: -0.005em !important;
  background: var(--bg-base) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.2s ease, color 0.2s ease;
}
.mono, .ts, .v, code, pre, kbd { font-family: var(--font-mono) !important; }

/* Tone the legacy grid-pattern overlays — barely visible */
body::before {
  background-size: 64px 64px !important;
  opacity: 0.05 !important;
}
html[data-theme="dark"] body::before { opacity: 0.12 !important; }

/* ---- Header (legacy <header> selector, multiple pages) -------------- */
header {
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 14px 24px !important;
  z-index: 50;
}
header h1, header h2, .brand .mark, .brand-title, header .title {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--text) !important;
}
.brand .tag, header .tag {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
  border-left: none !important;
  padding-left: 0 !important;
}

/* ---- Nav links ------------------------------------------------------- */
.we-nav, nav.we-nav {
  display: flex; gap: 4px; align-items: center;
}
.we-nav a {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 7px 12px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  color: var(--text-2) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}
.we-nav a:hover {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
}
.we-nav a.active {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: transparent !important;
}

/* ---- Buttons (header chrome + primary) ------------------------------ */
header button, .tb-btn {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 7px 14px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--line-strong) !important;
  background: transparent !important;
  color: var(--text) !important;
  transition: all 0.15s ease !important;
  cursor: pointer;
  height: auto;
}
header button:hover, .tb-btn:hover {
  background: var(--bg-elev) !important;
  border-color: var(--line-strong) !important;
}
.tb-btn.icon-only {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.tb-btn .icon, header button .icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

/* Primary action — accent fill */
.btn-primary, button.primary, button.btn-primary, #btn-google-signin {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border-color: var(--accent) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 18px !important;
  transition: filter 0.12s ease !important;
}
.btn-primary:hover, button.primary:hover { filter: brightness(1.06); }

/* ---- Section labels ------------------------------------------------- */
.section-label, .label, .group-label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text-3) !important;
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Tour-meta inline labels (header data tiles) */
.tour-meta {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tour-meta .label {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--text-3) !important;
}
.tour-meta .value {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--text) !important;
}

/* ---- Sidebars / aside surfaces ------------------------------------- */
aside, aside.col, aside.sessions, aside.properties {
  background: var(--bg-surface) !important;
  border-right-color: var(--line) !important;
}

/* ---- Cards / panels ------------------------------------------------- */
.card, .job-card, .stop-row, .session-row {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs);
  transition: all 0.15s ease;
}
.card:hover, .job-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong) !important;
  transform: translateY(-1px);
}

/* Stop list rows — tighter */
.stop-row {
  border-radius: var(--radius-sm) !important;
  border-color: transparent !important;
  background: transparent !important;
  padding: 8px !important;
  margin-bottom: 4px !important;
  box-shadow: none;
}
.stop-row:hover {
  background: var(--bg-elev) !important;
  border-color: transparent !important;
  transform: none;
  box-shadow: none;
}
.stop-row.active {
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent) !important;
}
.stop-row .stop-name {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.stop-row .stop-meta {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
  color: var(--text-3) !important;
}

/* ---- Drop zone ------------------------------------------------------ */
.drop-zone, #dz-sessions {
  border-radius: var(--radius-md) !important;
  border: 2px dashed var(--line-strong) !important;
  background: var(--bg-surface) !important;
  padding: 28px 16px !important;
  text-align: center !important;
  transition: all 0.15s ease;
}
.drop-zone:hover, .drop-zone.dz-active, #dz-sessions:hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
.drop-zone .icon {
  font-size: 28px !important;
  color: var(--accent) !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.drop-zone .prompt {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.drop-zone .hint {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text-3) !important;
}

/* ---- Floor-plan tool rows (left rail in edit) ---------------------- */
.fp-tool-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
  font-family: var(--font-body) !important;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.fp-tool-row:hover {
  background: var(--bg-elev) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-xs);
}
.fp-tool-row.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}
.fp-tool-row .ic {
  grid-row: 1 / span 2;
  font-family: var(--font-mono) !important;
  font-size: 15px !important;
  text-align: center;
  color: var(--text) !important;
}
.fp-tool-row .lbl {
  grid-column: 2;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text) !important;
}
.fp-tool-row .hint {
  grid-column: 2;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.45;
  letter-spacing: 0 !important;
  color: var(--text-3) !important;
  margin-top: 2px;
  display: none;
}
.fp-tool-row:hover .hint { display: block; }
.fp-tool-row.green { border-color: var(--route-soft) !important; }
.fp-tool-row.green .ic, .fp-tool-row.green .lbl { color: var(--route) !important; }
.fp-tool-row.danger { border-color: rgba(185, 28, 28, 0.30) !important; }
.fp-tool-row.danger .ic, .fp-tool-row.danger .lbl { color: var(--danger) !important; }

/* ---- Floor plan canvas wrap ---------------------------------------- */
.fp-canvas-wrap {
  border-radius: var(--radius-md) !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .fp-canvas-wrap { box-shadow: var(--shadow-md); }
.fp-home-btn {
  border-radius: var(--radius-sm) !important;
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
}
.fp-home-btn:hover {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border-color: var(--accent) !important;
}

/* ---- Form fields --------------------------------------------------- */
input[type="text"], input[type="number"], input[type="search"],
input[type="email"], select, textarea {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
  letter-spacing: 0 !important;
  transition: all 0.15s ease !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
input[type="range"] { accent-color: var(--accent); }

/* ---- Generic inline labels in props form -------------------------- */
.field-label, .props-form .field-label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text-3) !important;
  margin-bottom: 4px !important;
}

/* ---- Toast --------------------------------------------------------- */
.toast {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 10px 18px !important;
}

/* ---- Boot strip / banners ----------------------------------------- */
#boot-status-strip {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#cloud-save-status {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--radius-pill) !important;
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(8px);
}

/* ---- Sync offset row (edit page) ---------------------------------- */
.vid-offset-row {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-elev) !important;
  padding: 14px !important;
}
.vid-offset-row .vid-offset-head .lbl {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text) !important;
}
.vid-offset-row .vid-offset-head .val {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--route) !important;
}
.vid-offset-row .frame-nudge {
  border-radius: var(--radius-xs) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  background: var(--bg-surface) !important;
  color: var(--route) !important;
  border: 1px solid var(--route-soft) !important;
  padding: 8px 4px !important;
  transition: all 0.12s ease;
}
.vid-offset-row .frame-nudge:hover {
  background: var(--route-soft) !important;
}
.vid-offset-row .frame-nudge.reset {
  background: transparent !important;
  border-color: var(--line-strong) !important;
  color: var(--text-3) !important;
}
.vid-offset-row .vid-offset-hint {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text-3) !important;
}

/* ---- Floor tag chips --------------------------------------------- */
.floor-tag-chip {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

/* ---- Avatar / signed-in indicator -------------------------------- */
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
}

/* ---- Empty states ------------------------------------------------ */
.empty-state, .sessions-empty, .empty {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text-3) !important;
  text-align: center;
  padding: 24px 16px;
}

/* ---- Dashboard job grid ------------------------------------------ */
.jobs-grid, #jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.job-card {
  padding: 18px !important;
  cursor: pointer;
}
.job-card .job-name {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
  text-transform: none !important;
  margin-bottom: 8px;
}
.job-card .meta {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--text-3) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: flex; align-items: center; gap: 12px;
}
.job-card .badge {
  display: inline-block;
  padding: 3px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
}

/* ---- Capture rows (dashboard) ------------------------------------ */
.capture-row {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-surface) !important;
  padding: 12px 14px !important;
  font-family: var(--font-body) !important;
}
.capture-row .when {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}
.capture-row .ts, .capture-row .stat {
  font-family: var(--font-mono) !important;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0;
  text-transform: none;
}
.capture-row a.primary, .capture-row .actions a {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: none !important;
  border-radius: var(--radius-xs) !important;
  padding: 6px 12px !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ---- Pannellum hotspots — keep clean -----------------------------*/
.pnlm-hotspot { transition: transform 0.18s ease; }
.pnlm-hotspot:hover { transform: scale(1.06); }

/* ---- Misc cleanup ------------------------------------------------ */
hr { border: none; border-top: 1px solid var(--line-soft); margin: 16px 0; }
::selection { background: var(--accent-soft); color: var(--text); }

/* ---- Index/landing cards ---------------------------------------- */
.wrap .card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  padding: 22px 24px !important;
  box-shadow: var(--shadow-xs);
  transition: all 0.15s ease;
  text-decoration: none !important;
  color: var(--text) !important;
}
.wrap .card:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.wrap .card .label {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
  margin-bottom: 6px !important;
}
.wrap .card .title {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--accent) !important;
  margin-bottom: 6px !important;
}
.wrap .card .desc {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--text-2) !important;
  letter-spacing: 0 !important;
}
.wrap h1 {
  font-family: var(--font-body) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.wrap .sub {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text-3) !important;
}
.wrap .meta {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-3) !important;
  border-top-color: var(--line) !important;
}