/* Engineering blueprint: dark-first, one teal accent, diagrams as the visual signature.
   Tokens are RGB triplets so Tailwind can apply opacity (bg-accent/10 etc). */
:root {
  --bg: 247 248 250;
  --surface: 255 255 255;
  --line: 226 230 235;
  --fg: 17 24 39;
  --muted: 91 100 114;
  --accent: 15 118 110;
  --onaccent: 255 255 255;
  --warn: 180 83 9;
  color-scheme: light;
}
html.dark {
  --bg: 11 15 20;
  --surface: 18 24 33;
  --line: 32 42 55;
  --fg: 230 234 240;
  --muted: 139 150 165;
  --accent: 45 212 191;
  --onaccent: 11 15 20;
  --warn: 251 191 36;
  color-scheme: dark;
}

[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Paint the band above the sticky header on phones with a notch. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: rgb(var(--bg));
}
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.02em; }
p { text-wrap: pretty; }

/* Page gutter: one outer wrapper per band. */
.wrap {
  max-width: 72rem;
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.site-header { top: env(safe-area-inset-top, 0px); }

.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--muted));
}
.tnum { font-variant-numeric: tabular-nums; }

/* Blueprint grid behind the hero. */
.blueprint {
  background-image:
    linear-gradient(rgb(var(--line) / 0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--line) / 0.7) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 65% 40%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 65% 40%, #000 35%, transparent 80%);
}

/* Placeholder text Sarath still needs to replace. Easy to spot, easy to grep: class="ph". */
.ph {
  color: rgb(var(--warn));
  border-bottom: 1px dashed rgb(var(--warn) / 0.8);
}

/* Hero sketch: lines draw in once on load; fully visible without motion. */
.draw .ln {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw 1.4s ease-out 0.2s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Case-study prose */
.prose-cs p + p { margin-top: 1rem; }
.prose-cs ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.prose-cs ol { list-style: decimal; padding-left: 1.25rem; display: grid; gap: 0.4rem; }

details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(45deg); }

:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 3px; border-radius: 6px; }

/* Chat widget */
.chat-fab {
  right: max(20px, calc(env(safe-area-inset-right, 0px) + 12px));
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
}
.chat-panel {
  right: max(12px, calc(env(safe-area-inset-right, 0px) + 12px));
  bottom: max(84px, calc(env(safe-area-inset-bottom, 0px) + 84px));
  width: min(380px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 120px));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .draw .ln { animation: none; stroke-dashoffset: 0; }
  *, *::before, *::after { transition: none !important; }
}