/* The app sets --font-app-ui from JavaScript at runtime. The site stylesheet only reads it
   (.app-ui-scope{font-family:var(--font-app-ui),"Manrope",...}), so on a static page it is
   undefined, the whole declaration is dropped and text falls back to Arial. Measured on the live
   blog on 2026-09-21: the computed family starts with Manrope. Define it here. */
:root { --font-app-ui: "Manrope", sans-serif; }

/* .nx-take p outranks .nx-label, which left the "Our take" label slate instead of the accent. */
.nx-take .nx-label { color: var(--nx-accent, #4648D4); }

/* News-only styles for the AIIA classic-brief layout (docs/reference/design-gate/build_mocks.py
   aiia_a()), trimmed to what that one layout uses. Everything else (Tailwind utilities such as
   text-muted-foreground, bg-background, the header/footer) comes from /news-shell.css, the
   stable pre-built stylesheet the shell links (DESIGN-publish.md section 2).

   main.min-h-screen{min-height:0} from the design-gate file is deliberately left out: it was a
   fix for the mock page only, not wanted in production (see DESIGN-publish.md brief). */

.nx-dek { margin-top: 14px; font-size: 18px; line-height: 1.55; color: #475569; max-width: 62ch; }

.nx-answer { margin-top: 28px; border: 1px solid #DBEAFE; background: #EFF6FF; border-radius: 12px; padding: 20px 22px; }
.nx-answer p { font-size: 16.5px; line-height: 1.6; color: #0F172A; }
.nx-answer p + p { margin-top: 10px; }

.nx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.nx-tile { border: 1px solid #E2E8F0; border-radius: 12px; background: #F8FAFC; padding: 18px; }
.nx-tile b { display: block; font-size: 26px; font-weight: 700; color: #0F172A; letter-spacing: -.02em; line-height: 1.1; }
.nx-tile span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: #64748B; }
@media (max-width: 640px) { .nx-tiles { grid-template-columns: 1fr; } }

/* Accent: the site's own primary colour, set once on the article wrapper (DESIGN-publish.md
   section 2), with the measured rgb(70,72,212) as the fallback if --primary is ever missing.
   Only labels, the button and the take border use it; diagrams and everything else keep the
   design-gate's #2563EB. */
.nx-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nx-accent, #4648D4); }

.nx-take { margin-top: 40px; border: 1px solid #E2E8F0; border-left: 4px solid var(--nx-accent, #4648D4); border-radius: 12px; padding: 24px 26px; background: #fff; }
.nx-take h2 { margin-top: 8px; font-size: 22px; font-weight: 700; line-height: 1.25; color: #0F172A; }
.nx-take p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: #475569; }
.nx-take ul, .nx-take ol { margin-top: 16px; display: grid; gap: 12px; counter-reset: s; list-style: none; padding: 0; }
.nx-take li { position: relative; padding-left: 34px; font-size: 15.5px; line-height: 1.6; color: #334155; counter-increment: s; }
.nx-take ol li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 999px; background: var(--nx-accent, #4648D4); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.nx-take a, .nx-body a, .nx-sources a { color: var(--nx-accent, #4648D4); text-decoration: underline; text-underline-offset: 2px; }

.nx-btn { display: inline-flex; align-items: center; margin-top: 20px; background: var(--nx-accent, #4648D4); color: #fff !important; text-decoration: none !important; border-radius: 8px; padding: 11px 18px; font-weight: 600; font-size: 14px; }

.nx-tablewrap { overflow-x: auto; border: 1px solid #E2E8F0; border-radius: 12px; }
.nx-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.nx-table th, .nx-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid #E2E8F0; line-height: 1.5; }
.nx-table th { background: #F8FAFC; color: #0F172A; font-weight: 600; }
.nx-table td { color: #475569; }
.nx-table td:first-child { color: #0F172A; font-weight: 600; white-space: nowrap; }
.nx-table tr:last-child td { border-bottom: 0; }

.nx-quote { margin: 28px 0; padding-left: 18px; border-left: 3px solid var(--nx-accent, #4648D4); }
.nx-quote p { font-size: 19px; line-height: 1.5; color: #0F172A; }
.nx-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: #64748B; }

.nx-sources { margin-top: 44px; padding-top: 20px; border-top: 1px solid #E2E8F0; }
.nx-sources ol { margin-top: 10px; display: grid; gap: 8px; list-style: decimal; padding-left: 18px; }
.nx-sources li { font-size: 13.5px; line-height: 1.5; color: #64748B; }
.nx-how { margin-top: 12px; font-size: 13px; line-height: 1.5; color: #64748B; }

.nx-faq details { border-bottom: 1px solid #E2E8F0; }
.nx-faq summary { cursor: pointer; padding: 16px 0; font-weight: 500; color: #0F172A; list-style: none; }
.nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq details p { padding: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: #64748B; }

.nx-note { margin: 20px 0; padding: 16px 18px; border: 1px solid #E2E8F0; border-radius: 12px; background: #F8FAFC; font-size: 14.5px; line-height: 1.6; color: #334155; }

/* Generic figure wrapper for bar/trend/timeline/compare/steps/quote_card visuals: no design-gate
   layout needed one (its only figure was the table), so this mirrors nx-take/nx-key's card
   language for a consistent look. */
.nx-fig { margin: 32px 0; padding: 22px 24px; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; }
.nx-fig h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #0F172A; }
.nx-fig figcaption { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: #64748B; }

/* Hub: "a simple card list styled in news.css with the blog's type scale" (DESIGN-publish.md
   section 5); AIIA has no existing hub-card class to reuse, unlike JOI. */
.nx-hub-head { padding-top: 104px; }
.nx-hub-head h1 { font-size: 2rem; font-weight: 700; color: #0F172A; letter-spacing: -.01em; }
.nx-hub-head p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: #475569; max-width: 60ch; }
/* Index layout A (Deepak picked it 2026-09-22): the newest story leads with the three numbers it
   is built on, everything else is a quiet row under a hairline. The flat grid of boxed cards it
   replaced showed none of the evidence and left the page looking empty on a light news day. */
.nx-hub-lead { display: block; background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 30px 32px; text-decoration: none; }
.nx-hub-lead:hover { border-color: #C7D2FE; }
.nx-hub-lead h2 { margin-top: 10px; font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #0F172A; }
.nx-hub-lead-dek { margin-top: 12px; font-size: 17px; line-height: 1.55; color: #475569; }
.nx-hub-stats { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nx-hub-stats div { border: 1px solid #E2E8F0; border-radius: 12px; background: #F8FAFC; padding: 14px 16px; }
.nx-hub-stats b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #0F172A; }
.nx-hub-stats span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: #64748B; }

.nx-hub-list { margin-top: 36px; border-top: 1px solid #E2E8F0; list-style: none; padding: 0; }
.nx-hub-item { border-bottom: 1px solid #E2E8F0; }
.nx-hub-item a { display: block; padding: 22px 2px; text-decoration: none; }
.nx-hub-item a:hover .nx-hub-title { color: var(--nx-accent, #4648D4); }
.nx-hub-kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nx-accent, #4648D4); }
.nx-hub-title { margin-top: 8px; font-size: 20px; font-weight: 700; line-height: 1.3; color: #0F172A; }
.nx-hub-dek { margin-top: 6px; font-size: 15px; line-height: 1.55; color: #475569; }
.nx-hub-meta { margin-top: 8px; font-size: 13px; color: #64748B; }
@media (max-width: 640px) {
  .nx-hub-lead { padding: 24px 22px; }
  .nx-hub-lead h2 { font-size: 25px; }
  .nx-hub-stats { grid-template-columns: 1fr; }
}
.nx-hub-pager { margin-top: 32px; display: flex; gap: 16px; }
.nx-hub-pager a { color: var(--nx-accent, #4648D4); text-decoration: underline; text-underline-offset: 2px; }

/* Related reading, under the FAQ. */
.nx-related { margin-top: 48px; }
.nx-related h2 { margin-bottom: 12px; font-size: 20px; font-weight: 600; color: hsl(var(--foreground)); }
.nx-related ul { display: grid; gap: 8px; list-style: disc; padding-left: 20px; }
.nx-related li { font-size: 15.5px; line-height: 1.55; color: #334155; }
.nx-related a { color: var(--nx-accent, #4648D4); text-decoration: underline; text-underline-offset: 2px; }

/* The header and footer markup is a snapshot of the LIVE site, but each host serves its own
   /news-shell.css built from whatever that host's app is. When staging runs ahead of prod the two
   disagree. Measured 2026-09-22: staging's own nav had moved to a 700px two-column panel, so its
   stylesheet no longer carried `w-[350px]` or `gap-y-8`, and the snapshot's dropdown collapsed to
   its padding, 50px wide, with the items spilling over the page (Deepak saw it on the preview).
   These two rules are copies of the Tailwind utilities the shell markup asks for, so the header we
   ship stands on its own. Checked every class in the shell against both stylesheets: the only
   others missing are the `lucide-*` icon names, which carry no rules, and `2xl:max-w-[1400px]`,
   which only applies above 1536px and is present on live. */
.w-\[350px\] { width: 350px; }
.gap-y-8 { row-gap: 2rem; }