/* Memaix — shared stylesheet.
   ------------------------------------------------------------------
   There is no build step here. Every page loads Tailwind's CDN build
   plus this file, and duplicates the nav/footer markup. That's the
   deliberate trade: a bit of copied HTML in exchange for zero
   toolchain. Anything that would otherwise be copied *and* tweaked
   per page lives here instead.
   ------------------------------------------------------------------ */

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

:root {
  --amber:     #3D7A8F;
  --amber-bg:  rgba(61,122,143,0.08);
  --amber-bdr: rgba(61,122,143,0.28);
  --teal:      #0891b2;
  --teal-bg:   rgba(8,145,178,0.07);
  --violet:    #7c3aed;
  --violet-bg: rgba(124,58,237,0.07);
  --surf:      #ffffff;
  --surf2:     #f9f8f4;
  --border:    rgba(0,0,0,0.07);
  --muted:     #6b7280;
  --text:      #111111;
  --green:     #22c55e;
}

body { font-family: 'Geist', 'Inter', sans-serif; background: #f5f4f0; }
.mono { font-family: 'Geist Mono', 'JetBrains Mono', monospace; }

/* Warm dot grid behind everything. */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

.surface {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.amber-pill {
  background: var(--amber-bg);
  border: 1px solid var(--amber-bdr);
  color: var(--amber);
  border-radius: 100px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
}

.tag-feat   { background: rgba(8,145,178,0.1);   color: var(--teal);   border: 1px solid rgba(8,145,178,0.2); }
.tag-new    { background: rgba(61,122,143,0.1);  color: var(--amber);  border: 1px solid rgba(61,122,143,0.2); }
.tag-fix    { background: rgba(220,38,38,0.07);  color: #dc2626;       border: 1px solid rgba(220,38,38,0.15); }
.tag-violet { background: var(--violet-bg);      color: var(--violet); border: 1px solid rgba(124,58,237,0.2); }

.badge-xs-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  font-family: 'Geist Mono', monospace;
}

.code-surface {
  background: #1c1917;
  border-radius: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  line-height: 1.8;
  color: #d6d3d1;
}

.stat-label { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-val   { font-size: 30px; font-weight: 700; letter-spacing: -1px; color: var(--text); font-family: 'Geist Mono', monospace; line-height: 1; }

.btn-amber {
  background: var(--amber);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(61,122,143,0.3), 0 4px 12px rgba(61,122,143,0.15);
}
.btn-amber:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-amber:disabled { opacity: 0.45; cursor: not-allowed; transform: none; filter: none; }

.btn-ghost-sm {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s;
  text-decoration: none;
  display: inline-block;
}
.btn-ghost-sm:hover { border-color: rgba(0,0,0,0.15); color: var(--text); background: rgba(0,0,0,0.02); }

/* ---- Topbar ---- */
.topbar {
  background: rgba(245,244,240,0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.nav-link {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: rgba(0,0,0,0.03); }
/* Each page marks its own nav entry with aria-current. One class, no
   per-page overrides — the browser tells us which page we're on. */
.nav-link[aria-current="page"] {
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 5px 11px;
}

/* ---- Page header block, shared by every subpage ---- */
.page-title { font-size: clamp(26px,3vw,36px); font-weight: 800; letter-spacing: -1.2px; line-height: 1.1; color: var(--text); }
.page-lede  { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 620px; }
.eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); display: inline-block; flex: none;
}

.prose-h { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }
.prose-p { font-size: 13px; color: var(--muted); line-height: 1.65; }

tr.rel-row { border-bottom: 1px solid var(--border); transition: background 0.1s; }
tr.rel-row:last-child { border-bottom: none; }
tr.rel-row:hover { background: var(--surf2); }

/* Comparison table (self-hosted vs SaaS). */
.cmp-table { width: 100%; border-collapse: collapse; }
.cmp-table th, .cmp-table td { text-align: left; padding: 14px 20px; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cmp-table tr:last-child td { border-bottom: none; }
.cmp-table th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; }
.cmp-yes { color: var(--amber); font-weight: 600; }
.cmp-no  { color: var(--muted); }

/* Numbered step markers. */
.step-num {
  width: 26px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--amber-bg);
  border: 1px solid var(--amber-bdr);
  color: var(--amber);
  font-family: 'Geist Mono', monospace;
  font-size: 11px; font-weight: 600;
}

/* ---------------------------------------------------------------
   Responsive.

   Several grids are still declared as inline styles (grid-column:
   span N), which outrank any normal stylesheet rule — hence the
   !important below. Deliberate and contained, not house style.
   --------------------------------------------------------------- */

@media (max-width: 1024px) {
  .top-grid { grid-template-columns: repeat(6, 1fr) !important; }
  .top-grid > .hero { grid-column: 1 / -1 !important; min-height: 0 !important; }
  .top-grid > .stat-card { grid-column: span 2 !important; }

  .mid-grid { grid-template-columns: 1fr !important; }
  .mid-grid > * { grid-column: auto !important; }

  .cap-grid { grid-template-columns: 1fr 1fr !important; }
  .two-col  { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  /* Topbar keeps identity and the one action worth tapping. The nav
     itself becomes a scrollable strip below it rather than vanishing —
     with six pages, hiding it would strand the visitor. */
  .top-status { display: none !important; }
  .nav-strip { display: block !important; }
  .top-nav { display: none !important; }

  .top-grid { grid-template-columns: 1fr 1fr !important; }
  .top-grid > .hero { grid-column: 1 / -1 !important; padding: 1.5rem !important; }
  .top-grid > .stat-card { grid-column: auto !important; }
  .top-grid > .stat-card:last-child { grid-column: 1 / -1 !important; }

  .cap-grid { grid-template-columns: 1fr !important; }
  .three-col { grid-template-columns: 1fr !important; }

  .usedby { flex-direction: column; align-items: flex-start !important; gap: 0.75rem !important; padding: 1.25rem !important; }
  .usedby-rule { display: none !important; }
  .usedby-logos { gap: 1.25rem !important; }

  /* Six columns of release metadata will never fit. Keep version and
     title — the rest is detail you'd open the release notes for. */
  .c-refs, .c-type, .c-tests, .c-date { display: none !important; }
  .rel-table th:first-child, .rel-table td:first-child { padding-left: 1rem !important; }
  .rel-table th, .rel-table td { padding-right: 1rem !important; }

  .cmp-table th, .cmp-table td { padding: 12px 14px; font-size: 12px; }

  /* Diff output is intentionally monospaced and wide — let it scroll
     sideways instead of forcing the whole page to. */
  .code-surface { font-size: 11px; }
  .code-surface .p-4 { overflow-x: auto; }

  .footer-inner { flex-direction: column; gap: 1rem; align-items: flex-start !important; }
}

/* The mobile nav strip. Hidden on desktop; the media query above
   turns it on. Horizontal scroll beats a hamburger for six links. */
.nav-strip { display: none; border-bottom: 1px solid var(--border); background: rgba(245,244,240,0.92); }
.nav-strip-inner { display: flex; gap: 4px; padding: 8px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nav-strip-inner::-webkit-scrollbar { display: none; }