/* AITBM site — shared styles layered on top of Tailwind (Play CDN) */

:root {
  --navy: #1F3864;
  --navy-light: #2E5090;
  --navy-dark: #152743;
  --muted: #555555;
  --line: #e5e7eb;
}

html { scroll-behavior: smooth; }
body { color: #333333; }

/* Anchor offset so section headings clear the sticky nav */
:target { scroll-margin-top: 6rem; }

/* Formula / code presentation */
.formula {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  background: var(--navy-dark);
  color: #e8eefb;
  border-radius: 0.5rem;
  line-height: 1.6;
  max-width: 100%;        /* never wider than its container */
}
/* On phones, wrap long formulas so they fit instead of running off-screen
   (wider screens keep them on one line, scrolling via overflow-x-auto). */
@media (max-width: 640px) {
  .formula {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* Subtle card lift */
.card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -12px rgba(31, 56, 100, .35);
  border-color: var(--navy-light);
}

/* Axis accent bar */
.axis-bar { height: 4px; border-radius: 9999px; }

/* Active nav link */
.nav-link.active { color: var(--navy); font-weight: 700; }
.nav-link.active::after {
  content: ""; display: block; height: 2px; background: var(--navy);
  margin-top: 2px; border-radius: 2px;
}

/* Hero grid backdrop */
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Table polish */
.spec-table th { background: var(--navy); color: #fff; }
.spec-table td, .spec-table th { border: 1px solid var(--line); }
.spec-table tbody tr:nth-child(even) { background: #f7f9fc; }

/* ───────────────────────────────────────────────────────────
   Newcomer-clarity additions (2026 refresh)
   ─────────────────────────────────────────────────────────── */

:root {
  --paper: #faf9f7;        /* warm off-white page tone */
  --accent: #b06a43;       /* warm clay — newcomer wayfinding ONLY */
  --accent-soft: #f5ebe4;  /* clay tint */
  --accent-line: #e7d6ca;
}

/* Warmer page background (cards stay white/gray for contrast) */
.bg-paper { background-color: var(--paper); }

/* Acronym tooltips — hover any term for its plain-English meaning */
abbr[title] {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-decoration-color: #9aa6bd;
  text-underline-offset: 3px;
  cursor: help;
  font-variant: none;
}

/* Mobile nav active state */
.mobile-link.active { background: #eef2f9; color: var(--navy); font-weight: 700; }

/* Warm "new here / start" affordances */
.accent-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 9999px; padding: .25rem .7rem;
  background: var(--accent-soft); color: var(--accent);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--accent-line);
}
.step-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2rem; width: 2rem; border-radius: 9999px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  font-weight: 700; font-size: .85rem; flex: none;
}

/* Architecture flow diagram */
.flow-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.flow-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -16px rgba(31, 56, 100, .45);
  border-color: var(--navy-light);
}
.flow-arrow { color: #b9c2d4; }
.flow-rail { background: #b9c2d4; }
.layer-tab {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  padding: .15rem .55rem; border-radius: 9999px; display: inline-block;
}

/* Quiet anchor links inside dense pages */
.subnav-link { transition: color .15s ease; }

/* Definition list rows on the glossary */
.term-row { scroll-margin-top: 6rem; }
.term-row:target { background: var(--accent-soft); border-color: var(--accent-line); }