/* ============================================================
   LCE Theme — site-wide design language lifted from the
   Live Control Engine module (reference: "referece LCE.txt").
   Loaded LAST on vessa.html only; overrides shared tokens.
   Fonts: Manrope + IBM Plex Mono. Accent: indigo→purple oklch.
   Shadows: soft, far, negative-spread, hue-tinted.
   ============================================================ */

:root{
  /* ---- type ---- */
  --font:'Manrope', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  /* ---- accent: indigo → soft purple (same L/C, hue 277→295) ---- */
  --accent:#6a9cff;
  --accent2:#8ab4ff;
  --accent-700:#3f7ae6;
  --accent-600:#6a9cff;
  --accent-soft:#eaf1ff;
  --accent-soft-2:#d6e4ff;
  --accent-ink:#ffffff;
  --accent-line:#bcd2ff;
  --accent-grad:linear-gradient(135deg, var(--accent), var(--accent2));

  /* ---- ink (warm cool-violet greys) ---- */
  --ink:oklch(28% 0.02 263);
  --ink-2:oklch(45% 0.022 263);
  --ink-3:oklch(60% 0.018 263);
  --ink-4:oklch(72% 0.015 263);

  /* ---- surfaces / borders ---- */
  --bg:#ffffff;
  --bg-2:oklch(98% 0.004 263);
  --surface:#ffffff;
  --surface-2:oklch(99% 0.003 263);
  --surface-3:oklch(97% 0.005 263);
  --border:oklch(92% 0.01 263);
  --border-2:oklch(89% 0.012 263);
  --border-strong:oklch(84% 0.014 263);

  /* ---- semantic (risk = coral churn) ---- */
  --success:oklch(58% 0.13 158);
  --success-soft:oklch(94% 0.05 158);
  --success-line:oklch(84% 0.07 158);
  --risk:oklch(63% 0.17 28);
  --risk-soft:oklch(94% 0.045 30);
  --risk-line:oklch(85% 0.08 30);
  --warn:oklch(64% 0.13 70);
  --warn-soft:oklch(95% 0.05 75);
  --warn-line:oklch(86% 0.08 75);

  /* ---- radii ---- */
  --radius:20px;
  --radius-sm:13px;
  --radius-lg:26px;

  /* ---- shadows: soft · far · negative-spread · hue-tinted ---- */
  --sh-1:0 8px 20px -12px oklch(45% 0.06 263 / .4);
  --sh-2:0 16px 38px -20px oklch(45% 0.06 263 / .5);
  --sh-3:0 40px 90px -50px oklch(45% 0.06 263 / .45);
  --sh-pop:0 40px 90px -40px oklch(45% 0.08 263 / .5);
  --sh-accent:0 20px 46px -18px #6a9cff;

  /* ---- frosted glass ---- */
  --glass:oklch(99% 0.003 263 / .68);
  --glass-2:oklch(99% 0.003 263 / .55);
  --glass-line:oklch(100% 0 0 / .85);
  --glass-blur:blur(20px) saturate(1.5);
  --glass-inset:inset 0 1px 0 oklch(100% 0 0 / .8);
}

body{ font-feature-settings:normal; }
body::before{
  background:
    radial-gradient(900px 600px at 4% 14%, oklch(70% 0.12 300 / .06), transparent 58%),
    linear-gradient(180deg, #ffffff, var(--bg-2));
}

/* ---- headings: Manrope, heavier, tighter ---- */
.h-display{ font-weight:800; letter-spacing:-.03em; }
.h1{ font-weight:800; letter-spacing:-.025em; }
.h2{ font-weight:700; letter-spacing:-.02em; }
.h3{ font-weight:700; letter-spacing:-.012em; }

/* ---- eyebrow: round dot marker (mono uppercase already) ---- */
.eyebrow{ letter-spacing:.14em; }
.eyebrow::before{ border-radius:50%; width:1.4px; height:1.4px; box-shadow:0 0 0 0.8px #6a9cff; }

/* ---- LCE block: tighten gap above (title→scene) and below (scene→next) by ~70% ---- */
#lce .vblock-head{ margin-bottom:0; }
#lce .vblock-extra{ margin-top:0; }
#lce{ padding-bottom:25px; }
#not-a-bot{ padding-top:25px; }

/* ---- LCE rescue mini-block (gauge + caption) ---- */
.lce-rescue{
  margin-top:11px; display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center;
  background:#fff; border:1px solid var(--glass-line); border-radius:22px;
  box-shadow:0 8px 20px -12px oklch(45% 0.06 263 / .4);
  padding:28px 34px;
}
.lce-gauge{ position:relative; width:260px; flex-shrink:0; }
.lce-gauge svg{ display:block; overflow:visible; }
.lce-gauge-track{ fill:none; stroke:oklch(92% 0.012 263); stroke-width:18; stroke-linecap:round; }
.lce-gauge-val{
  fill:none; stroke:url(#lceGaugeGrad); stroke-width:18; stroke-linecap:round;
  transition:stroke-dashoffset 1.15s cubic-bezier(.22,.61,.36,1);
}
.lce-gauge-num{ position:absolute; left:0; right:0; top:78px; text-align:center; line-height:1; }
.lce-gauge-num b{ font:800 46px/1 var(--mono, inherit); letter-spacing:-.02em; color:var(--ink); }
.lce-gauge-num span{ font:800 22px/1 var(--mono, inherit); color:var(--accent-700); margin-left:2px; }
.lce-gauge-cap{ position:absolute; left:0; right:0; top:128px; text-align:center; font-size:12.5px; color:var(--ink-3); letter-spacing:.01em; }

.lce-rescue-text{ min-width:0; }
.lce-rescue-kicker{ font:700 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-700); margin-bottom:12px; }
.lce-rescue-lead{ font-size:20px; line-height:1.42; font-weight:700; letter-spacing:-.015em; color:var(--ink); margin:0 0 10px; text-wrap:pretty; }
.lce-rescue-sub{ font-size:15px; line-height:1.55; color:var(--ink-2); margin:0 0 16px; text-wrap:pretty; max-width:62ch; }
.lce-rescue-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.lce-chip{ font-size:13px; font-weight:600; color:var(--ink-2); background:var(--accent-soft); border:1px solid oklch(88% 0.04 263); border-radius:999px; padding:6px 13px; }

@media (max-width:760px){
  .lce-rescue{ grid-template-columns:1fr; gap:18px; padding:24px; justify-items:center; }
  .lce-rescue-text{ text-align:center; }
  .lce-rescue-chips{ justify-content:center; }
  .lce-rescue-sub{ margin-left:auto; margin-right:auto; }
}
@media (prefers-reduced-motion: reduce){
  .lce-gauge-val{ transition:none; }
}

/* ---- buttons: gradient primary + iOS-soft ghost ---- */
.btn{ border-radius:12px; letter-spacing:-.005em; }
.btn-sm{ border-radius:10px; }
.btn-primary{
  background:var(--accent-grad); color:#fff;
  box-shadow:var(--sh-accent), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:var(--sh-accent), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-ghost{
  background:oklch(99% 0.003 263 / .72); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border-color:oklch(86% 0.012 263 / .9); box-shadow:var(--sh-1), inset 0 1px 0 oklch(100% 0 0 / .8);
}
.btn-ghost:hover{ border-color:var(--border-strong); transform:translateY(-1px); box-shadow:var(--sh-2), inset 0 1px 0 oklch(100% 0 0 / .8); }

/* ---- brand logo: gradient tile + white ring + two-tone wordmark ---- */
.brand-mark, .brand-mark.v{
  background:var(--accent-grad); color:transparent; font-size:0; position:relative;
  box-shadow:0 8px 20px -8px #6a9cff; border-radius:10px;
}
.brand-mark::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:13px; height:13px; border-radius:50%; border:3px solid #fff;
}
.brand-tx b{ letter-spacing:-.01em; }
.brand-tx b::after{ content:""; }