/* ============================================================
   Proben — "Context Radar" blueprint design system
   Light is the DEFAULT (:root). Dark via [data-theme="dark"].
   Same --* token names as theme.css so the shared flow screens
   (PrepareForm / Report / VoicePractice / DialogueMap) inherit it.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- LIGHT (default) ---------- */
:root {
  --bg-0:   #F6F7EF;
  --bg-1:   #FBFCF6;
  --bg-2:   rgba(228,234,224,0.55);        /* translucent tint — grid shows through */
  --rad-1:  #EFF3F6;
  --rad-0:  #F6F7EF;

  --panel:  #FFFFFF;
  --card:   #FFFFFF;
  --card-2: #FFFFFF;
  --chip-bg: rgba(255,255,255,0.92);
  --map-grad-a: #FFFFFF;
  --map-grad-b: #F2F6FB;

  --line:        #E1E6E0;
  --line-soft:   #EAEEE8;
  --line-strong: #CAD3CB;

  --ink:     #13241C;
  --ink-dim: #2E3C34;
  --muted:   #5F6B63;
  --muted-2: #8A948C;

  --inset:   #F3F6F1;
  --inset-2: #E8EDE4;
  --track:   #E4E9DE;
  --hover:   #EEF3E9;

  --header-a: rgba(246,247,239,0.86);
  --header-b: rgba(246,247,239,0.86);
  --header-ink: #13241C;
  --header-line: #E1E6E0;
  --header-blur: rgba(246,247,239,0.82);

  /* accent — soft olive-lime (not neon) */
  --lime:      #A6C94A;
  --lime-deep: #5B7F34;
  --lime-glow: rgba(150,185,70,0.18);
  --cta-ink:   #1b2a0c;

  /* brand mark — layered stack (light) */
  --logo-top: #639922;
  --logo-mid: #A8A69C;
  --logo-bot: #C2C0B6;

  /* mascot (Stacky) — light */
  --mascot-gray-top: #C2C0B6; --mascot-gray-mid: #B0AEA4; --mascot-gray-dark: #A8A69C; --mascot-gray-line: #8E8C84;
  --mascot-green-top: #7FB83C; --mascot-green-mid: #639922; --mascot-green-dark: #3B6D11;
  --mascot-coral: #D85A30; --mascot-blue: #378ADD; --mascot-spark: #EF9F27;
  --mascot-eye-dark: #1A2E05; --mascot-eye-light: #FFFFFF;

  --good:  #4F8A2F;   --c-good: #4F8A2F;   --c-mid: #6F9E2C;
  --amber: #B5792E;   --c-warn: #B5792E;   --amber-dim: #F7EFE2;
  --risk:  #C0573A;   --c-bad:  #C0573A;    --risk-dim:  #F8EDE8;
  --ai:    #5563E6;   --ai-2:   #6C7CFF;    --ai-dim:    #EEF0FF;

  --accent-panel-a: #EEF6E0;
  --accent-panel-b: #F3F9EC;
  --path-bg:   #FFFFFF;
  --path-bg-2: #FAFCF6;
  --pop-bg:    #FFFFFF;

  /* blueprint / radar */
  --bp:        #8BB7FF;
  --bp-soft:   #B8D2FF;
  --bp-line:   rgba(92,142,255,0.45);
  --bp-grid:   rgba(92,142,255,0.038);
  --card-line: rgba(40,40,30,0.10);
  --bp-fill-a: rgba(255,255,255,0.94);
  --bp-fill-b: rgba(180,205,255,0.20);
  --radar:     rgba(92,142,255,0.30);
  --radar-soft:rgba(92,142,255,0.16);

  --serif: 'Hanken Grotesk', system-ui, sans-serif;
  --sans:  'Hanken Grotesk', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 24px;
  --shadow-card: 0 20px 50px -32px rgba(40,60,90,0.30);
  --shadow-pop:  0 18px 50px -16px rgba(40,60,90,0.26);
  --shadow-hero: 0 2px 4px rgba(40,60,90,0.04), 0 12px 28px -10px rgba(40,60,90,0.16), 0 40px 80px -32px rgba(40,60,90,0.30);
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  --bg-0:   #080B0A;
  --bg-1:   #0B100E;
  --bg-2:   rgba(16,24,20,0.45);
  --rad-1:  #0C1411;
  --rad-0:  #080B0A;

  --panel:  rgba(16,26,30,0.72);
  --card:   #0E1714;
  --card-2: #11201B;
  --chip-bg: rgba(10,16,20,0.7);
  --map-grad-a: #0F1A20;
  --map-grad-b: #0A1115;

  --line:        rgba(150,180,210,0.14);
  --line-soft:   rgba(150,180,210,0.08);
  --line-strong: rgba(150,180,210,0.24);

  --ink:     #F3F6EF;
  --ink-dim: #CFD8CF;
  --muted:   #B6C2B8;
  --muted-2: #7F8D84;

  --inset:   rgba(255,255,255,0.03);
  --inset-2: rgba(255,255,255,0.07);
  --track:   rgba(255,255,255,0.08);
  --hover:   rgba(255,255,255,0.06);

  --header-a: rgba(8,11,10,0.82);
  --header-b: rgba(8,11,10,0.82);
  --header-ink: #F3F6EF;
  --header-line: rgba(150,180,210,0.14);
  --header-blur: rgba(8,11,10,0.8);

  --lime:      #AED455;
  --lime-deep: #9BD24A;
  --lime-glow: rgba(174,212,85,0.15);
  --cta-ink:   #10200a;

  /* brand mark — layered stack (dark) */
  --logo-top: #97C459;
  --logo-mid: #55534E;
  --logo-bot: #46443F;

  /* mascot (Stacky) — dark overrides */
  --mascot-gray-top: #6f6d64; --mascot-gray-mid: #5f5d55; --mascot-gray-dark: #54524b; --mascot-gray-line: #8E8C84;
  --mascot-green-top: #9FD45F; --mascot-green-mid: #7FB83C; --mascot-green-dark: #5F9826;
  --mascot-coral: #E0734A; --mascot-blue: #5db0ff; --mascot-spark: #F0B24A;
  --mascot-eye-dark: #0c1705; --mascot-eye-light: #FFFFFF;

  --good:  #9bd24a;   --c-good: #9bd24a;   --c-mid: #b8f13a;
  --amber: #e0aa4a;   --c-warn: #e0aa4a;   --amber-dim: rgba(224,170,74,0.14);
  --risk:  #EA7B61;   --c-bad:  #EA7B61;    --risk-dim:  rgba(234,123,97,0.15);
  --ai:    #8A95FF;   --ai-2:   #8A95FF;    --ai-dim:    rgba(138,149,255,0.16);

  --accent-panel-a: #112019;
  --accent-panel-b: #0B1511;
  --path-bg:   #0E1714;
  --path-bg-2: #0A100E;
  --pop-bg:    #11201B;

  --bp:        rgba(151,190,255,0.55);
  --bp-soft:   rgba(151,190,255,0.30);
  --bp-line:   rgba(151,190,255,0.38);
  --bp-grid:   rgba(151,190,255,0.032);
  --card-line: rgba(170,190,200,0.16);
  --bp-fill-a: rgba(24,40,60,0.62);
  --bp-fill-b: rgba(40,80,140,0.30);
  --radar:     rgba(151,190,255,0.30);
  --radar-soft:rgba(151,190,255,0.14);

  --shadow-card: 0 24px 60px -30px rgba(0,0,0,0.7);
  --shadow-pop:  0 18px 50px -16px rgba(0,0,0,0.8);
  --shadow-hero: 0 2px 6px rgba(0,0,0,0.4), 0 16px 40px -12px rgba(0,0,0,0.6), 0 50px 90px -36px rgba(0,0,0,0.8);
}

:root { --silver-0: var(--header-a); --silver-1: var(--header-b); --silver-ink: var(--header-ink); }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .3s ease, color .3s ease;
}
#root { min-height: 100vh; }

/* blueprint grid */
.grid-tex, .bp-grid {
  background-image:
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
  background-size: 38px 38px;
}

/* faint blueprint grid behind every section, fixed to viewport */
body { position: relative; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
  background-size: 40px 40px;
}
#root { position: relative; z-index: 1; }

.mono, .eyebrow, .kicker, .micro-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 500; }
.serif { font-family: var(--serif); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
/* typography safety: only micro-labels get tracking, never body/UI text */
p, span, a, li, button, input, textarea, h1, h2, h3, h4, div { letter-spacing: normal; }
.mono, .eyebrow, .kicker, .micro-label { letter-spacing: 0.16em; }
.serif { letter-spacing: -0.025em; }

.btn {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  border: none; border-radius: 10px; cursor: pointer;
  padding: 16px 24px; line-height: 1;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-lime { background: var(--lime); color: var(--cta-ink); }
.btn-lime:hover { background: color-mix(in srgb, var(--lime) 88%, white); box-shadow: 0 0 0 4px var(--lime-glow); }
.btn-ghost { background: var(--inset); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: var(--hover); border-color: var(--bp); }
.btn-sm { padding: 10px 15px; font-size: 13.5px; border-radius: 9px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 6px 13px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bp) 8%, transparent);
}
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* blueprint translucent card */
.bp-card {
  border: 1px solid var(--card-line, var(--bp-line));
  background: linear-gradient(180deg, var(--bp-fill-a), var(--bp-fill-b));
  backdrop-filter: blur(8px);
  border-radius: 8px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes radarPulse { 0% { transform: scale(.5); opacity: .5; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.fade-up { animation: fadeUp .5s cubic-bezier(.2,.7,.3,1) both; }
.fade-in { animation: fadeIn .5s ease both; }
.pop-in  { animation: popIn .35s cubic-bezier(.2,.8,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===== Context Gap — living diagram motion ===== */
@keyframes cgDash   { to { stroke-dashoffset: -240; } }
@keyframes cgDashR  { to { stroke-dashoffset: -28; } }
@keyframes cgBreathe {
  0%,100% { box-shadow: 0 22px 46px -28px color-mix(in srgb, var(--lime-deep) 55%, transparent), 0 0 0 0 color-mix(in srgb, var(--lime-deep) 26%, transparent); }
  50%     { box-shadow: 0 30px 60px -22px color-mix(in srgb, var(--lime-deep) 75%, transparent), 0 0 0 12px color-mix(in srgb, var(--lime-deep) 0%, transparent); }
}
@keyframes cgGrow   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cgFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes cgRise   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cg-redline  { animation: cgDashR 1.1s linear infinite; }
.cg-greenflow{ animation: cgDash 2.6s linear infinite; }
.cg-engine   { animation: cgBreathe 3.6s ease-in-out infinite; }
.cg-src      { animation: cgFloat 4.5s ease-in-out infinite; }
.cg-bar > i  { display: block; height: 100%; border-radius: 99px; transform-origin: left center; animation: cgGrow 1.1s cubic-bezier(.2,.8,.3,1) both; }
.cg-rise     { animation: cgRise .5s ease both; }

/* MVP6 — meeting types responsive grid */
.howcard { transition: transform .18s ease, box-shadow .18s ease; }
.howcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

@media (max-width: 980px) {
  .cg-hide-narrow { display: none !important; }
}

/* ===== Mascot (Stacky) animations ===== */
@keyframes mascotBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes mascotWave { 0% { opacity: .25; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(0); } 100% { opacity: .25; transform: translateY(2px); } }
@keyframes mascotShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
@keyframes mascotSpark { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.mascot-anim.is-idle       { animation: mascotBreathe 4.5s ease-in-out infinite; transform-origin: center bottom; }
.mascot-anim.is-practicing { animation: mascotBreathe 3.4s ease-in-out infinite; transform-origin: center bottom; }
.mascot-scan-wave  { animation: mascotWave 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mascot-excl       { animation: mascotShake 1.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mascot-spark      { animation: mascotSpark 1.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mascot-spark:nth-of-type(2) { animation-delay: .4s; }
.mascot-spark:nth-of-type(3) { animation-delay: .2s; }
.mascot-spark:nth-of-type(4) { animation-delay: .6s; }
@media (prefers-reduced-motion: reduce) {
  .mascot-anim, .mascot-scan-wave, .mascot-excl, .mascot-spark { animation: none !important; }
}

/* hero report preview */
@media (max-width: 980px) {
  .mt-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .uc-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cg-grid { grid-template-columns: 1fr !important; }
  .cg-arrow { height: 40px; }
  .cg-arrow svg { transform: rotate(90deg); }
  .cg-zones { grid-template-columns: 1fr !important; }
  .cg-zones > .cg-zone { border-right: none !important; border-left: none !important; border-top: 1px solid var(--line) !important; }
  .cg-zones > .cg-zone:first-child { border-top: none !important; }
  .cg-flow { display: none; }
}
@media (max-width: 620px) {
  .mt-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .uc-grid { grid-template-columns: 1fr !important; }
}