/* =====================================================================
   VRAJ PATEL · POSTS
   Shared styles for the long-form write-ups. Tokens are copied from the
   home page (index.html) so the posts read as the same site.
   Light theme only.
   ===================================================================== */

/* ---------- 1. Tokens (from index.html) ---------- */
:root {
  color-scheme: light;

  --ink: #1b1b1b;
  --ink-2: #5f5d58;
  --ink-3: #6b6964;
  --ink-hover: #34322f;
  --paper: #f6f5f1;
  --panel: #ffffff;
  --wash: #edebe5;
  --hover: #f1efea;
  --line: #dedcd6;
  --line-strong: #c9c6be;
  --grid: #ebe9e3;
  --ok: #4f6b4a;
  --on-ink: #ffffff;
  --select: #e6dfd2;
  --shadow-pop: 0 16px 48px rgba(27, 27, 27, 0.12);

  /* chart roles: the validated pair, plus a neutral reference */
  --mine: #b85f3e;
  --base: #3d6ea8;
  --ref: #9a978f;

  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-lede: clamp(18px, 1.7vw, 21px);
  --fs-h2: clamp(24px, 2.6vw, 30px);
  --fs-h1: clamp(34px, 4.6vw, 52px);

  --s-half: 4px;
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-6: 48px;
  --s-8: 64px;
  --s-12: 96px;

  --container: 1180px;
  --measure: 720px;
  --gutter: 48px;
  --nav-h: 64px;
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));

  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 16px;
  --r-pill: 999px;
  --tap: 44px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 200ms;
}
@media (max-width: 1023px) { :root { --gutter: 32px; } }
@media (max-width: 640px) { :root { --gutter: 16px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  padding-left: var(--pad-l);
  padding-right: var(--pad-r);
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-16)/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
h1, h2, h3, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
table { border-collapse: collapse; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--select); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; }
.eyebrow { font: 500 var(--fs-12)/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
code { font: 400 max(12px, 0.9em)/1 var(--font-mono); padding: 1px 5px; border-radius: 4px; background: var(--wash); overflow-wrap: anywhere; }

.skip {
  position: fixed; z-index: 100; top: calc(env(safe-area-inset-top, 0px) + var(--s-1)); left: var(--pad-l);
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-2);
  border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink);
  font: 500 var(--fs-14)/1 var(--font-body); text-decoration: none;
  transform: translateY(-200%); transition: transform var(--dur) var(--ease);
}
.skip:focus { transform: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: var(--tap); padding: 0 var(--s-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--panel); color: var(--ink);
  font: 500 var(--fs-14)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--hover); border-color: var(--ink-2); }
.btns { display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* ---------- 3. Top bar: brand, back to writing, reading progress ---------- */
.x-top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  margin-left: calc(var(--pad-l) * -1); margin-right: calc(var(--pad-r) * -1);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
  background: rgba(246, 245, 241, 0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.x-toprow { display: flex; align-items: center; gap: var(--s-2); min-height: 60px; }
.x-brand {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap); margin-right: auto;
  font: 600 var(--fs-16)/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
}
.x-brand span { font: 500 var(--fs-12)/1 var(--font-mono); letter-spacing: 0.06em; color: var(--ink-2); }
.x-back {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-2);
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 500 var(--fs-14)/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.x-back:hover { background: var(--panel); box-shadow: inset 0 0 0 1px var(--ink-2); }
.x-prog { height: 2px; }
.x-prog i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
@media (max-width: 640px) { .x-brand span { display: none; } }

/* ---------- 4. Article ---------- */
.post { max-width: var(--measure); margin-inline: auto; padding: var(--s-8) 0 var(--s-12); }
.post-head { padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.post-head h1 { margin-top: var(--s-2); font: 600 var(--fs-h1)/1.02 var(--font-display); letter-spacing: -0.03em; }
.post-lede { margin-top: var(--s-3); font: 400 var(--fs-lede)/1.5 var(--font-body); }
.post-meta { margin-top: var(--s-2); font: 400 var(--fs-12)/1.6 var(--font-mono); color: var(--ink-2); }
.post-meta a { overflow-wrap: anywhere; }
.post-update {
  margin-top: var(--s-3); padding: var(--s-2) var(--s-3);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s);
  font-size: var(--fs-14); line-height: 1.6;
}
.post-update b { font-weight: 600; }

/* key numbers: the home page's "Measured results" tiles */
.x-proof-label { margin: var(--s-4) 0 var(--s-2); }
.x-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.x-proof div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s-3); }
.x-proof b { display: block; font: 600 clamp(22px, 2.3vw, 28px)/1.1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.x-proof small { display: block; margin-top: var(--s-1); font: 400 var(--fs-12)/1.5 var(--font-body); color: var(--ink-2); }
@media (min-width: 1100px) { .x-proof--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: -120px; } }
@media (max-width: 640px) { .x-proof div { padding: var(--s-2); } }

.post section { scroll-margin-top: var(--nav-h); padding-top: var(--s-6); }
.post h2 { display: flex; gap: var(--s-1); align-items: baseline; margin-bottom: var(--s-3); font: 600 var(--fs-h2)/1.15 var(--font-display); letter-spacing: -0.02em; }
.post h2 .n { flex: none; font: 500 var(--fs-14)/1 var(--font-mono); letter-spacing: 0; color: var(--ink-2); }
.post h3 { margin: var(--s-4) 0 var(--s-1); font: 600 var(--fs-18)/1.35 var(--font-display); letter-spacing: -0.01em; }
.post p, .post ul, .post ol { max-width: 68ch; }
.post p + p, .post p + ul, .post ul + p, .post ol + p, .post p + ol { margin-top: var(--s-2); }
.post ul, .post ol { padding-left: 1.25em; }
.post li + li { margin-top: var(--s-1); }
.post li::marker { color: var(--ink-3); }
.post b, .post strong { font-weight: 600; }
.post > section > * + .table-wrap, .post > section > * + figure, .post > section > * + .flag, .post > section > * + details, .post > section > * + .spec { margin-top: var(--s-3); }
.post > section > .table-wrap + *, .post > section > figure + *, .post > section > .flag + *, .post > section > details + *, .post > section > .spec + * { margin-top: var(--s-3); }

/* spec list (environment) */
.spec { border-top: 1px solid var(--line); }
.spec div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s-2); padding-block: var(--s-1); border-bottom: 1px solid var(--line); }
.spec dt { font: 400 var(--fs-12)/1.7 var(--font-mono); color: var(--ink-2); }
.spec dd { font-size: var(--fs-14); line-height: 1.6; }
@media (max-width: 640px) { .spec div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* callout (corrections, caveats, bugs) */
.flag { padding: var(--s-3); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-m); }
.flag .eyebrow { margin-bottom: var(--s-1); color: var(--ink); }
.flag p { font-size: var(--fs-14); line-height: 1.65; }
.flag p + p { margin-top: var(--s-1); }

/* secondary detail, folded */
details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); }
details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: var(--tap); padding: var(--s-1) var(--s-3); cursor: pointer; list-style: none;
  font: 500 var(--fs-14)/1.4 var(--font-body);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--dur) var(--ease);
}
details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
details > summary:hover { background: var(--hover); border-radius: var(--r-m); }
details > summary small { margin-left: auto; font: 400 var(--fs-12)/1 var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.details-body { padding: 0 var(--s-3) var(--s-3); border-top: 1px solid var(--line); }
.details-body > :first-child { margin-top: var(--s-2); }
.details-body > * + .table-wrap, .details-body > * + figure, .details-body > * + .flag, .details-body > .table-wrap + * { margin-top: var(--s-2); }
.details-body p, .details-body li { font-size: var(--fs-14); line-height: 1.65; }
.details-body h3 { margin-top: var(--s-3); font-size: var(--fs-16); }
@media (max-width: 640px) { details > summary, .details-body { padding-inline: var(--s-2); } }

/* ---------- 5. Tables (the home page's data tables) ---------- */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--panel); }
.data { width: 100%; font-size: var(--fs-14); line-height: 1.5; }
.data caption { padding: var(--s-2) var(--s-2) var(--s-1); text-align: left; font: 400 var(--fs-12)/1.5 var(--font-mono); color: var(--ink-2); }
.data th, .data td { padding: var(--s-1) var(--s-2); text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.data thead th { font: 500 var(--fs-12)/1.5 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.data tbody th { font-weight: 500; }
.data td.num, .data th.num { text-align: right; font: 500 var(--fs-14)/1.5 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.data thead th.num { font: 500 var(--fs-12)/1.5 var(--font-mono); }
.data td.muted { color: var(--ink-2); }
.data .is-mine { color: var(--mine); }
.data .is-base { color: var(--base); }
.data code { font-size: 12px; }

/* ---------- 6. Charts (drawn by post.js at 1 SVG unit = 1 CSS px) ---------- */
figure.chart { padding: var(--s-3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); }
.chart__title { font: 600 var(--fs-16)/1.35 var(--font-display); letter-spacing: -0.01em; }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: var(--s-1) 0 var(--s-2); padding: 0; list-style: none; font: 400 var(--fs-12)/1.4 var(--font-mono); color: var(--ink-2); }
.chart__legend li { display: inline-flex; align-items: center; gap: var(--s-1); margin: 0 !important; }
.chart__sw { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.chart__plot { position: relative; min-height: 200px; }
.chart__plot svg { max-width: none; overflow: visible; }
.chart__plot svg text { font-family: var(--font-mono); font-size: 12px; }
.chart__plot .band { outline: none; cursor: default; }
.chart__plot .band:focus-visible .band__hit { stroke: var(--ink); stroke-width: 2; }
.chart__tip {
  position: absolute; z-index: 2; min-width: 168px; max-width: 260px; padding: var(--s-1) var(--s-2);
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-s); box-shadow: var(--shadow-pop);
  font: 400 var(--fs-12)/1.5 var(--font-mono); color: var(--ink); pointer-events: none;
}
.chart__tip b { display: block; margin-bottom: var(--s-half); font-weight: 500; }
.chart__tip p { display: flex; align-items: center; gap: var(--s-1); max-width: none; margin: 0 !important; }
.chart__tip p span:last-child { margin-left: auto; padding-left: var(--s-2); font-variant-numeric: tabular-nums; }
.chart figcaption, .shot figcaption { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--fs-14); line-height: 1.6; color: var(--ink-2); }
.chart figcaption b, .shot figcaption b { color: var(--ink); font-weight: 600; }
.chart__twin { margin-top: var(--s-1); font: 400 var(--fs-12)/1.5 var(--font-mono); color: var(--ink-2); }
.charts-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (max-width: 640px) {
  figure.chart { padding: var(--s-2); }
  .charts-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Nsight screenshots */
figure.shot { padding: var(--s-2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); }
.shot a { display: block; overflow-x: auto; border-radius: var(--r-xs); }
.shot img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--wash); }

/* ---------- 7. Footer ---------- */
.post-foot { margin-top: var(--s-8); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.post-foot p { margin-top: var(--s-2); font: 400 var(--fs-12)/1.6 var(--font-mono); color: var(--ink-2); }

/* ---------- 8. Reduced motion + print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print {
  body { padding: 0; background: #fff; }
  .x-top, .skip, .chart__tip { display: none !important; }
  details > .details-body { display: block !important; }
  .post { padding-top: 0; }
  figure, .table-wrap, .flag { break-inside: avoid; }
}