/* ============================================================
   shared.css — Design tokens used by every page
   ============================================================
   Import this before any page-specific stylesheet.
   All colours, fonts, radii, and transitions live here.
   ============================================================ */

:root {
  /* ── Colours ──────────────────────────────────────────── */
  --bg:        #0b0e14;
  --surface:   #131720;
  --surface2:  #1a2030;
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.14);
  --text:      #e8eaf0;
  --muted:     #6b7590;

  /* Accent palette */
  --accent:    #059669;   /* green  — primary CTA, active states  */
  --accent2:   #4d9fff;   /* blue   — info, links                  */
  --accent3:   #ff6b6b;   /* red    — errors, warnings             */
  --accent4:   #ffcc44;   /* amber  — caution, highlights          */
  --accent5:   #c77dff;   /* purple — forecast, secondary          */

  /* Tool tile accent (Agent / Questionnaire / Data) */
  --tool:      #38bdf8;   /* sky blue — distinguishes tools from reports */

  /* ── Typography ───────────────────────────────────────── */
  --font-head: 'Syne',                sans-serif;
  --font-body: 'DM Sans',             sans-serif;
  --font-mono: 'DM Mono',             monospace;

  /* ── Shape ────────────────────────────────────────────── */
  --radius:    12px;
  --radius-lg: 20px;
  --radius-sm: 6px;

  /* ── Motion ───────────────────────────────────────────── */
  --transition: 0.4s cubic-bezier(0.4,0,0.2,1);
  --trans-fast: 0.18s ease;
}

/* ── Global reset ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Subtle grain overlay — on by default, pages can opt-out with body.no-grain */
body:not(.no-grain)::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0; opacity: .4;
}

/* ── Shared topbar ───────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  background: rgba(11,14,20,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.header-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 0 2rem; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-head); font-size: 1.15rem;
  font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; color: var(--text);
}
.logo-mark  { color: var(--accent); font-size: 1.3rem; line-height: 1; }
.logo-text em { font-style: normal; color: var(--accent); }

/* ── Shared button primitives ────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-size: .9rem; font-weight: 500;
  padding: .6rem 1.4rem; border-radius: var(--radius-sm);
  cursor: pointer; border: none; transition: all var(--trans-fast);
  text-decoration: none; white-space: nowrap;
}
.btn-primary  { background: var(--accent);  color: #0b0e14; }
.btn-primary:hover  { background: #6bffbf; }
.btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border2); }
.btn-secondary:hover { background: var(--surface); border-color: rgba(255,255,255,.25); }
.btn-ghost    { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover    { color: var(--text); border-color: var(--border2); }
.btn-danger   { background: var(--accent3); color: #fff; }
.btn-danger:hover   { background: #ff8f8f; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-lg       { font-size: 1rem; padding: .8rem 2rem; border-radius: var(--radius-sm); }
.btn-sm       { font-size: .78rem; padding: .35rem .85rem; }

/* ── Form primitives ─────────────────────────────────────── */
.form-group   { display: flex; flex-direction: column; gap: .4rem; }
.form-label   { font-size: .8rem; font-weight: 500; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.form-input, .form-select, .form-textarea {
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); font-family: var(--font-body); font-size: .95rem;
  padding: .65rem 1rem; border-radius: var(--radius-sm);
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,255,176,.1);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted); }
.form-input.error, .form-select.error { border-color: var(--accent3); }
.form-error { font-size: .78rem; color: var(--accent3); margin-top: .25rem; }
.form-hint  { font-size: .78rem; color: var(--muted); margin-top: .25rem; }

/* ── Shared page container ───────────────────────────────── */
.page-wrap {
  max-width: 1400px; margin: 0 auto;
  padding: 80px 2rem 4rem;
  position: relative; z-index: 1;
}
.page-wrap.narrow { max-width: 520px; }
.page-wrap.medium { max-width: 780px; }

/* ── Alert banners ───────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 1.1rem; border-radius: var(--radius-sm);
  font-size: .88rem; line-height: 1.5;
  border: 1px solid transparent;
}
.alert-error   { background: rgba(255,107,107,.1); border-color: rgba(255,107,107,.25); color: #ff9a9a; }
.alert-success { background: rgba(79,255,176,.08); border-color: rgba(79,255,176,.2);  color: #6bffbf; }
.alert-info    { background: rgba(77,159,255,.08); border-color: rgba(77,159,255,.2);  color: #7ab8ff; }

/* ── Spinner / loading ───────────────────────────────────── */
.spinner {
  width: 22px; height: 22px;
  border: 2.5px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Live dot ────────────────────────────────────────────── */
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }

/* ── Skeleton shimmer ────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Back pill (← Visualizations) ───────────────────────── */
#cip-back {
  position: fixed; bottom: 1.0rem; right: 1.4rem; z-index: 99999;
  display: flex; align-items: center; gap: .45rem;
  background: #0d0f18; border: 1px solid rgba(255,255,255,.22);
  border-radius: 5px; padding: .38rem .75rem;
  font-family: 'IBM Plex Mono', monospace; font-size: .58rem;
  letter-spacing: .1em; color: rgba(255,255,255,.7);
  text-decoration: none; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
#cip-back:hover { background: #1a1e30; border-color: rgba(255,255,255,.5); color: #fff; }
#cip-back svg   { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Text selection ─────────────────────────────────────── */
::selection { background: rgba(79,255,176,.2); color: var(--text); }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }

/* ── Logout button (app pages) ───────────────────────────── */
.logout-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.5);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}
.logout-btn:hover {
  border-color: rgba(255,255,255,.4);
  color: rgba(255,255,255,.85);
}

/* ── Profile link (app headers) ──────────────────────────── */
.profile-link {
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .55rem;
  border-radius: 4px;
  cursor: pointer;
  transition: color .15s, background .15s;
  flex-shrink: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.profile-link:hover {
  color: var(--text);
  background: var(--surface2);
}


/* ── Guided walkthrough ──────────────────────────── */
.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9998;
  pointer-events: none;
}

.help-highlight {
  position: relative;
  z-index: 10000 !important;
  box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #2563eb;
  border-radius: 6px;
}

.help-tooltip {
  position: fixed;
  z-index: 10001;
  width: 320px;
  background: white;
  color: #111827;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  font-family: Arial, sans-serif;
}

.help-tooltip h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.help-tooltip p {
  margin: 0 0 14px 0;
  font-size: 14px;
  line-height: 1.4;
}

.help-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.help-actions button {
  padding: 7px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.help-back {
  background: #e5e7eb;
}

.help-next {
  background: #2563eb;
  color: white;
}

.help-skip {
  background: transparent;
  color: #6b7280;
}

.ctrl-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .22rem .6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .2s, color .15s, background .15s;
  flex-shrink: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.ctrl-btn:hover {
  border-color: rgba(255,255,255,.25);
  color: var(--text);
  background: var(--surface2);
}

.cip-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11,14,20,.7);
  backdrop-filter: blur(4px);
  z-index: 100;
  border-radius: inherit;
}
.cip-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
}
.cip-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,255,255,.1);
  border-top-color: var(--accent, #059669);
  border-radius: 50%;
  animation: cip-spin 0.8s linear infinite;
}
@keyframes cip-spin {
  to { transform: rotate(360deg); }
}

#page-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #0b0e14);
  z-index: 9999;
  flex-direction: column;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
  transition: opacity .4s ease;
}
#page-loading.fade-out {
  opacity: 0;
  pointer-events: none;
}
.cip-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255,255,255,.1);
  border-top-color: var(--accent, #059669);
  border-radius: 50%;
  animation: cip-spin 0.8s linear infinite;
}
@keyframes cip-spin { to { transform: rotate(360deg); } }

/* ── Driver.js overlay and highlight customization ──────── */

/* Background overlay color */
.driver-overlay {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* Highlighted element border/glow */
.driver-active-element {
  outline: 2px solid var(--accent, #059669) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.25) !important;
  border-radius: 6px !important;
}

/* Popover box */
.driver-popover {
  background: var(--surface, #131720) !important;
  border: 1px solid var(--border2, rgba(255,255,255,.14)) !important;
  border-radius: var(--radius, 12px) !important;
  color: var(--text, #e8eaf0) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}

/* Popover title */
.driver-popover-title {
  color: var(--text, #e8eaf0) !important;
  font-family: var(--font-head, 'Syne', sans-serif) !important;
  font-size: 1rem !important;
}

/* Popover description */
.driver-popover-description {
  color: var(--muted, #6b7590) !important;
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  font-size: .85rem !important;
  line-height: 1.6 !important;
}

/* Navigation buttons */
.driver-popover-navigation-btns button {
  background: var(--surface2, #1a2030) !important;
  border: 1px solid var(--border2, rgba(255,255,255,.14)) !important;
  color: var(--text, #e8eaf0) !important;
  border-radius: 6px !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: .72rem !important;
}

.driver-popover-navigation-btns button:hover {
  background: var(--accent, #059669) !important;
  border-color: var(--accent, #059669) !important;
  color: #fff !important;
}

/* Progress text */
.driver-popover-progress-text {
  color: var(--muted, #6b7590) !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: .68rem !important;
}

/* Arrow */
.driver-popover-arrow {
  border-color: var(--surface, #131720) !important;
}

/* Close button */
.driver-popover-close-btn {
  color: var(--muted, #6b7590) !important;
}
.driver-popover-close-btn:hover {
  color: var(--text, #e8eaf0) !important;
}