/* modevc.com/tools/tools-theme.css
   Black theme for the founder tools (hub + calculators). Pairs with tools-theme.js (Tailwind palette remap).
   Rules: ink ladder for information, one action colour (Mode VC green) for buttons, focus and the focal
   series, red only for broken. The rest of modevc.com keeps its green theme. */

:root {
  color-scheme: dark;
  --mt-bg: #050506;
  --mt-surface: #0b0b0d;
  --mt-edge: rgba(255, 255, 255, 0.075);
  --mt-edge-hi: rgba(255, 255, 255, 0.14);
  --mt-ink: #f4f4f5;
  --mt-ink2: #a1a1aa;
  --mt-mute: #71717a;
  --mt-act: #10b981;
  --mt-act-hi: #34d399;
  --mt-act-soft: rgba(16, 185, 129, 0.12);

  /* 3d-glow tokens: graphite body, green filament accent */
  --g-bg: #050506; --g-panel: #0b0b0d; --g-edge: #1f1f23;
  --g-body: #0d0d10; --g-side: #08080a; --g-deck: #141417; --g-recess: #060607;
  --g-line: #3a3a41; --g-detail: #232327; --g-ink: #8e8e96; --g-ink-hi: #f4f4f5;
  --g-accent: #34d399; --g-accent-hi: #b5f5dc; --g-accent-dim: rgba(52, 211, 153, 0.10);
}

html { background: var(--mt-bg); }
body.mvc-tools { background: var(--mt-bg); color: #e4e4e7; }
::selection { background: rgba(16, 185, 129, 0.32); color: #fff; }

/* Ambient stage: a faint green key light at the top, a cool rim low on the page, a fading dot grid. */
body.mvc-tools::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 520px at 50% -180px, rgba(16, 185, 129, 0.10), transparent 70%),
    radial-gradient(900px 600px at 100% 110%, rgba(148, 163, 184, 0.05), transparent 70%),
    radial-gradient(700px 500px at -10% 40%, rgba(255, 255, 255, 0.025), transparent 70%);
}
body.mvc-tools::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 45% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 45% at 50% 0%, #000 0%, transparent 100%);
}
body.mvc-tools > * { position: relative; z-index: 1; }

/* Header: a quiet glass bar that stays put while you work */
body.mvc-tools > div > header {
  z-index: 40;
  background: rgba(5, 5, 6, 0.72);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: var(--mt-edge) !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  max-width: none !important;
  padding-left: max(24px, calc((100vw - 80rem) / 2 + 24px)) !important;
  padding-right: max(24px, calc((100vw - 80rem) / 2 + 24px)) !important;
}
@media (min-width: 768px) {
  body.mvc-tools > div > header { position: sticky; top: 0; }
}
body.mvc-tools > div > header > div > a:first-child { color: #34d399; }
body.mvc-tools header nav a[href="/contact"] { border-color: var(--mt-edge-hi); color: #e4e4e7; }
body.mvc-tools header nav a[href="/contact"]:hover { border-color: var(--mt-act); color: #fff; }

/* Headlines: silver to white, the italic word in brand green */
body.mvc-tools main h1 {
  background: linear-gradient(180deg, #ffffff 0%, #d9d9de 55%, #a1a1aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
body.mvc-tools main h1 .italic,
body.mvc-tools main h1 em {
  background: linear-gradient(180deg, #d1fae5 0%, #34d399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
@media (prefers-reduced-motion: no-preference) {
  body.mvc-tools main > section:first-child { animation: mt-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
  body.mvc-tools main > section:nth-child(2) { animation: mt-rise 0.9s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes mt-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Surfaces: graphite glass, hairline edge, top inner light, pointer spotlight */
body.mvc-tools .mt-surface,
body.mvc-tools .smc-card,
body.mvc-tools .nc-card,
body.mvc-tools .nc-glow-card {
  --mx: 50%;
  --my: -200px;
  border-color: var(--mt-edge) !important;
  background-image:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.045), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0) 38%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px -32px rgba(0, 0, 0, 0.9);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
body.mvc-tools .mt-surface:hover,
body.mvc-tools .smc-card:hover,
body.mvc-tools .nc-card:hover,
body.mvc-tools .nc-glow-card:hover { border-color: var(--mt-edge-hi) !important; }
body.mvc-tools main article.mt-surface:hover { border-color: rgba(16, 185, 129, 0.38) !important; }
/* Nested wells (example tables inside a card) stay darker than their card */
body.mvc-tools .mt-surface .mt-surface {
  background-color: rgba(0, 0, 0, 0.45) !important;
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Large result numbers read as the brightest ink, not as an accent */
body.mvc-tools .text-emerald-400:is(.text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl) { color: #ffffff; }

/* Action colour: primary buttons, focus, sliders, checkboxes */
body.mvc-tools .bg-emerald-500 { color: #04130d !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 8px 24px -10px rgba(16, 185, 129, 0.6); }
body.mvc-tools .bg-emerald-500:hover { background-color: #34d399 !important; }
body.mvc-tools input[type="range"],
body.mvc-tools input[type="checkbox"],
body.mvc-tools input[type="radio"] { accent-color: var(--mt-act); }
body.mvc-tools :is(input, select, textarea):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(.bg-transparent) {
  background-color: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.mvc-tools :is(input, select, textarea):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(.bg-transparent):hover { border-color: rgba(255, 255, 255, 0.16); }
body.mvc-tools :is(input, select, textarea):focus {
  border-color: var(--mt-act) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  outline: none;
}
body.mvc-tools input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #0b0b0d inset; }
body.mvc-tools select option { background: #0b0b0d; color: #f4f4f5; }
body.mvc-tools :focus-visible { outline-color: var(--mt-act); }

/* Text in the action shade that is information, not an action, reads as ink */
body.mvc-tools span.text-emerald-500 { color: #d4d4d8; }
body.mvc-tools input.bg-transparent:focus { box-shadow: 0 1px 0 var(--mt-act) !important; border-color: transparent !important; }

/* Small badges: soft tint, never solid */
body.mvc-tools .bg-emerald-950,
body.mvc-tools .bg-emerald-950\/40,
body.mvc-tools .bg-emerald-950\/50 { background-color: rgba(255, 255, 255, 0.05) !important; }

/* Footer: same shared markup, the CTA picks up the tools action colour */
body.mvc-tools .mvc-foot { --mf-accent: #34d399; --mf-line: rgba(255, 255, 255, 0.07); background: rgba(0, 0, 0, 0.35); }

/* Scrollbars */
body.mvc-tools { scrollbar-color: #2e2e33 transparent; }

@media (max-width: 640px) {
  body.mvc-tools > div > header { padding-left: 16px !important; padding-right: 16px !important; }
  body.mvc-tools::after { background-size: 22px 22px; }
}

/* Vega-Lite charts (tools-vl.js) */
.mvl-host { position: relative; width: 100%; min-height: 180px; margin: 4px 0 2px; }
.mvl-host svg { display: block; max-width: 100%; height: auto; }
.mvl-note { font: 400 12px/1.5 var(--nc-mono); color: var(--mt-mute); padding: 24px 0; margin: 0; }
.mvl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.mvl-chips button {
  font: 500 11px/1 var(--nc-mono); letter-spacing: 0.06em; color: var(--mt-ink2);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--mt-edge-hi); border-radius: 999px;
  padding: 8px 12px; min-height: 32px; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.mvl-chips button:hover { color: var(--mt-ink); border-color: rgba(255, 255, 255, 0.24); }
.mvl-chips button[aria-pressed="true"] { color: #d1fae5; border-color: rgba(16, 185, 129, 0.55); background: var(--mt-act-soft); }