/*
 * OculusMind.AI blog — shared post stylesheet.
 *
 * Served same-origin at /blog/post.css and referenced by every post. Posts are
 * otherwise self-contained: all prose and every SVG figure is inline.
 *
 * ── Two palettes, on purpose ───────────────────────────────────────────────
 * The site chrome (masthead, section bar, footer) is DARK, mirroring
 * src/components/SiteHeader.css and Footer.css so a post sits inside the site
 * rather than beside it. The article itself is LIGHT: long-form reading is the
 * one job on this site that a dark surface makes harder, and an article is a
 * different kind of object from a console.
 *
 * Chrome uses the --om-* tokens (mirroring src/styles/tokens.css).
 * The article uses its own --a-* scale, which exists only here.
 *
 * The cyan shifts between them. --om-accent (#22d3ee) is tuned for a near-black
 * ground and fails contrast on white, so the article uses #0e7490 / #0891b2 —
 * the same hue family, dark enough to read as a link on paper.
 *
 * ── Why this is a file and not inline ──────────────────────────────────────
 * The house doc format (AGENTS.md §7) inlines everything so a file renders from
 * disk. Blog posts are web pages on our own origin, not portable documents, and
 * inlining the theme into every post guarantees drift the first time it changes.
 *
 * NO WEBFONT LINK, DELIBERATELY. 'Space Grotesk' / 'Inter' / 'JetBrains Mono'
 * are named in tokens.css but never actually loaded anywhere in the app, so the
 * whole site renders in the system-font fallback. A post that fetched the real
 * faces would be the only page on oculusmind.ai with them — foreign, not
 * polished. If the app ever loads them, this inherits the change for free.
 */

:root {
  /* Chrome — mirrors src/styles/tokens.css */
  --om-bg: #0f1216;
  --om-bg-deep: #0a0d10;
  --om-fg: #e8ecf1;
  --om-fg-dim: #b9c2cd;
  --om-fg-muted: #8b97a5;
  --om-fg-faint: #6b7684;
  --om-accent: #22d3ee;
  --om-warning: #facc15;
  --om-rule: #2a313a;
  --om-font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --om-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --om-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Article — light reading surface */
  --a-bg: #ffffff;
  --a-surface: #f6f8fa;
  --a-fg: #16191d;
  --a-fg-dim: #3d444d;
  --a-fg-muted: #626b76;
  --a-fg-faint: #8b949e;
  --a-rule: #e3e6ea;
  --a-accent: #0e7490;
  --a-accent-bright: #0891b2;
  --a-warn: #b45309;
  --a-warn-line: #d97706;
  --a-good: #15803d;
  --a-good-line: #16a34a;

  --om-radius: 6px;
  --a-measure: 68ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--om-bg-deep);
  color: var(--om-fg);
  font-family: var(--om-font-body);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ---- Masthead + section bar (DARK) -------------------------------------
   Mirrors src/components/SiteHeader.css so a post reads as part of the site.
   A static page has no auth state, so the signed-out nav renders — the right
   default for a public article.

   /widgets is a plain href for the same reason it is in SiteHeader.tsx:38 — it
   is static HTML from the widgets bucket, not an SPA route. Everything here is
   a plain href anyway; there is no router on this page. */

.om-masthead {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid var(--om-rule);
  background: rgba(2, 3, 10, 0.72);
  backdrop-filter: blur(8px);
}
.om-masthead__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.om-masthead__brand {
  font-family: var(--om-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--om-fg);
  text-decoration: none;
}
.om-masthead__brand-accent { color: var(--om-accent); }
.om-masthead__nav {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--om-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.om-masthead__link {
  color: var(--om-fg-muted);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 120ms ease;
}
.om-masthead__link:hover, .om-masthead__link:focus-visible { color: var(--om-accent); }
.om-masthead__divider {
  align-self: stretch;
  width: 1px;
  min-height: 16px;
  background: var(--om-rule);
}
.om-masthead__btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1.5px solid var(--om-accent);
  border-radius: 6px;
  background: var(--om-bg-deep);
  color: var(--om-accent);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.om-masthead__btn:hover, .om-masthead__btn:focus-visible {
  background: var(--om-accent);
  color: var(--om-bg-deep);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.4);
}

/* "Blog" is deliberately NOT a link: /blog does not exist yet, and an
   extensionless href would be rewritten to the SPA shell and land the reader on
   the homepage (see src/config/blogPosts.ts). Make it an <a> in the same change
   that ships the index. */
.om-sectionbar {
  border-bottom: 1px solid var(--om-rule);
  background: var(--om-bg-deep);
}
.om-sectionbar__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--om-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.om-sectionbar__section { color: var(--om-accent); font-weight: 600; }
/* The section label links to the /blog index. Plain text until hovered, so the
   bar still reads as a breadcrumb rather than a row of links. */
a.om-sectionbar__section { text-decoration: none; }
a.om-sectionbar__section:hover,
a.om-sectionbar__section:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.om-sectionbar__sep { color: var(--om-fg-faint); }
.om-sectionbar__topic { color: var(--om-fg-muted); }

/* ---- Article (LIGHT) --------------------------------------------------- */

.om-sheet {
  background: var(--a-bg);
  color: var(--a-fg-dim);
}

.om-article {
  max-width: var(--a-measure);
  margin: 0 auto;
  padding: 56px 24px 88px;
}

.om-headline {
  font-family: var(--om-font-display);
  font-size: clamp(32px, 5.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.024em;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--a-fg);
  text-wrap: balance;
}

.om-dek {
  font-size: clamp(19px, 2.4vw, 22px);
  line-height: 1.5;
  color: var(--a-fg-muted);
  margin: 0 0 36px;
  text-wrap: pretty;
}

/* ---- Byline ----------------------------------------------------------- */

.om-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--a-rule);
  border-bottom: 1px solid var(--a-rule);
  margin: 0 0 28px;
}
.om-byline__avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--a-surface);
  border: 1px solid var(--a-rule);
}
.om-byline__name {
  font-family: var(--om-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--a-fg);
  line-height: 1.3;
}
.om-byline__role {
  font-family: var(--om-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a-accent-bright);
  line-height: 1.6;
}
.om-byline__meta { font-size: 13px; color: var(--a-fg-muted); line-height: 1.5; }

.om-attribution {
  font-size: 15px;
  line-height: 1.6;
  color: var(--a-fg-muted);
  background: var(--a-surface);
  border-left: 3px solid var(--a-accent);
  border-radius: 0 var(--om-radius) var(--om-radius) 0;
  padding: 14px 18px;
  margin: 0 0 40px;
}
.om-attribution strong { color: var(--a-fg); font-weight: 600; }
.om-attribution a { color: var(--a-accent); }

/* ---- Hero -------------------------------------------------------------
   The artwork is square. At the article's measure that would be a ~640px tall
   wall of image between the byline and the first paragraph, so it is cropped to
   a banner. object-position favours the upper-middle, where the robot's face
   and the book are. */

.om-hero {
  margin: 0 0 40px;
}
.om-hero img {
  display: block;
  width: 100%;
  /* `height: auto` is load-bearing: the img carries width/height attributes so
     the browser reserves space before load, and that height is a presentational
     hint that silently wins over `aspect-ratio` unless height is set here. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 38%;
  border-radius: var(--om-radius);
  background: var(--a-surface);
}

/* ---- Body ------------------------------------------------------------- */

.om-article h2 {
  font-family: var(--om-font-display);
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: -0.017em;
  font-weight: 700;
  color: var(--a-fg);
  margin: 52px 0 16px;
}
.om-article h3 {
  font-family: var(--om-font-display);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--a-fg);
  margin: 34px 0 10px;
}
.om-article p { margin: 0 0 22px; }
.om-article strong { color: var(--a-fg); font-weight: 600; }
.om-article em { color: var(--a-fg); }
.om-article a { color: var(--a-accent); text-underline-offset: 2px; }
.om-article ul, .om-article ol { margin: 0 0 22px; padding-left: 24px; }
.om-article li { margin-bottom: 12px; }
.om-article li::marker { color: var(--a-fg-faint); }

.om-lede::first-letter {
  float: left;
  font-family: var(--om-font-display);
  font-size: 58px;
  line-height: 0.84;
  font-weight: 700;
  color: var(--a-accent);
  padding: 6px 10px 0 0;
}

/* ---- Callouts --------------------------------------------------------- */

.om-callout {
  border-left: 3px solid var(--a-accent-bright);
  background: var(--a-surface);
  border-radius: 0 var(--om-radius) var(--om-radius) 0;
  padding: 18px 22px;
  margin: 0 0 26px;
}
.om-callout p:last-child { margin-bottom: 0; }
.om-callout__label {
  display: block;
  font-family: var(--om-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--a-accent);
  margin-bottom: 8px;
}
.om-callout--note { border-left-color: var(--a-rule); background: var(--a-surface); }
.om-callout--note .om-callout__label { color: var(--a-fg-faint); }
.om-callout--warn { border-left-color: var(--a-warn-line); background: #fffbeb; }
.om-callout--warn .om-callout__label { color: var(--a-warn); }
.om-callout--good { border-left-color: var(--a-good-line); background: #f0fdf4; }
.om-callout--good .om-callout__label { color: var(--a-good); }

/* ---- Figures ---------------------------------------------------------- */

.om-figure { margin: 34px 0; width: 100%; }
.om-figure__frame {
  background: var(--a-surface);
  border: 1px solid var(--a-rule);
  border-radius: var(--om-radius);
  padding: 22px 20px;
  overflow-x: auto;
}
/* The diagrams are shown exactly as authored, at every width — no alternate
   layouts, no redraws.

   On a phone that means the ~900-unit artwork scales to about 0.39, so its
   labels render small. That is why the figure is a LINK to its standalone SVG:
   tapping opens a vector the browser zooms losslessly. Forcing a 520px min-width
   inside a scrolling frame (the previous behaviour) was worse on both counts —
   it still rendered at 5.2-5.8px AND made the page scroll sideways. */
.om-figure svg { display: block; width: 100%; height: auto; }
/* A figure is a link to its standalone SVG, which the browser can zoom
   losslessly. The affordance has to be visible without hover, because the people
   most likely to need it are on a phone. */
.om-figure__link { display: block; text-decoration: none; }
.om-figure__link:focus-visible { outline: 2px solid var(--a-accent-bright); outline-offset: 3px; border-radius: var(--om-radius); }
.om-figure__link .om-figure__frame { transition: border-color 120ms ease; }
.om-figure__link:hover .om-figure__frame { border-color: var(--a-accent-bright); }

.om-figure__zoom {
  white-space: nowrap;
  font-family: var(--om-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--a-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  margin-left: 4px;
}
.om-figure__zoom:hover { color: var(--a-accent-bright); }

.om-hero a { display: block; }

.om-figure figcaption {
  font-size: 13px;
  line-height: 1.55;
  color: var(--a-fg-muted);
  margin-top: 12px;
  padding-left: 2px;
}
/* The author's own caption under the figure title: source and units. */
.om-figure__note { display: block; margin: 4px 0 6px; }
.om-figure figcaption b {
  font-family: var(--om-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a-fg-faint);
  font-weight: 600;
  margin-right: 8px;
}

/* ---- Sources ---------------------------------------------------------- */

.om-sources { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--a-rule); }
.om-sources h2 { font-size: 20px; margin-top: 0; }
.om-sources__note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--a-fg-muted);
  background: var(--a-surface);
  border-left: 3px solid var(--a-rule);
  border-radius: 0 var(--om-radius) var(--om-radius) 0;
  padding: 12px 16px;
  margin: 0 0 20px;
}
.om-sources ol { padding-left: 22px; }
.om-sources li { font-size: 15px; line-height: 1.6; color: var(--a-fg-muted); margin-bottom: 12px; }
.om-sources cite { font-style: italic; color: var(--a-fg-dim); }

/* ---- Footer (DARK) -----------------------------------------------------
   Mirrors src/components/Footer.css, including the full legal link set. The
   `stage:` marker from the React footer is omitted: it reports app state a
   static file cannot know. */

.om-postfoot {
  border-top: 1px solid var(--om-rule);
  background: var(--om-bg-deep);
  padding: 16px 24px 24px;
}
.om-postfoot__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  row-gap: 6px;
}
.om-postfoot__brand {
  font-family: var(--om-font-display);
  font-size: 13px;
  color: var(--om-fg-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.om-postfoot__brand-mark { color: var(--om-warning); }
.om-postfoot__links {
  font-size: 11px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.om-postfoot__links a { color: var(--om-fg-muted); text-decoration: none; transition: color 120ms ease; }
.om-postfoot__links a:hover { color: var(--om-accent); }
.om-postfoot__sep { color: var(--om-fg-faint); }
.om-postfoot__meta { font-size: 11px; color: var(--om-fg-muted); }

/* The nav does not fit a 390px phone: brand + Briefs + API + Sign in + Sign up
   overflows by ~15px, and the page then scrolls sideways. SiteHeader.css drops
   the marketing link only below 380px, so the common iPhone/Pixel width falls in
   the gap. Dropped here at 440px instead — the auth controls are the priority,
   which is the same call the app's own stylesheet makes, at a width that works. */
@media (max-width: 440px) {
  .om-masthead__nav .om-masthead__link[href='/integrations'],
  .om-masthead__nav .om-masthead__divider:first-of-type {
    display: none;
  }
}

@media (max-width: 700px) {
  body { font-size: 17px; }
  .om-article { padding: 36px 20px 64px; }
  .om-masthead__nav { gap: 8px; letter-spacing: 0.04em; }
  .om-masthead__btn { padding: 5px 10px; letter-spacing: 0.06em; }
  .om-postfoot__inner { justify-content: flex-start; }
}