/* MatureNode site theme — BLUE.
 *
 * Loaded AFTER fpai-site.css and fpai-v3.css, and overrides them. The shared
 * fpai-*.css files stay byte-identical to the firstpartyai repo on purpose so
 * the three sites remain diffable against one design system; every
 * site-specific colour lives here.
 *
 * Palette matches the favicon: brand dark field #1b2a3e -> #080c14 with the
 * journey thread (#4eacf1 -> #4f46e5, brand/AGENTS.md) as the accent. Same dark
 * structure as fpai, rotated from violet toward blue.
 *
 * TWO THINGS TO KNOW BEFORE EDITING (both cost time to rediscover):
 *
 * 1. The page background is NOT body's background. It is the fixed wash on
 *    `body:has(.fpai-hero)` in fpai-v3.css, which sets background-color,
 *    -image, -attachment and -repeat with !important, and forces .fpai-hero
 *    and .fpai-section to `background: transparent !important` so the wash
 *    shows through. Overriding `.fpai-hero { background }` does nothing.
 *
 * 2. --fpai-canvas / --fpai-ink are declared on `body.fpai-standalone`, not on
 *    :root. A custom property set on body shadows one set on :root for body and
 *    every descendant, so declaring them in :root here silently does nothing.
 */

body.fpai-standalone {
    --fpai-canvas: #050b14;
    --fpai-ink: #e6edf6;
    --fpai-gradient: linear-gradient(160deg, #4eacf1 0%, #4f8cf5 45%, #4f46e5 100%);
    --fpai-glow: rgba(78, 172, 241, 0.2);
    --fpai-glow-strong: rgba(78, 172, 241, 0.4);
}

html { background: #050b14; }

/* ── The page wash ────────────────────────────────────────────────── */
body:has(.fpai-hero) {
    background-color: #050b14 !important;
    background-image:
        radial-gradient(58% 46% at 12% 6%, rgba(78, 172, 241, 0.17) 0%, transparent 55%),
        radial-gradient(52% 42% at 88% 16%, rgba(96, 165, 250, 0.15) 0%, transparent 55%),
        radial-gradient(56% 48% at 84% 74%, rgba(79, 70, 229, 0.14) 0%, transparent 55%),
        radial-gradient(52% 48% at 14% 92%, rgba(78, 172, 241, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #0b1a2e 0%, #071120 45%, #050b14 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* ── Type ─────────────────────────────────────────────────────────── */
/* fpai lifts the ramp toward violet. Rotate it to cyan -> indigo so the
   wordmark sits in the same family as the favicon ring. */
.fpai-gradient-text,
.fpai-section-title--centered,
.fpai-kicker-term,
.fpai-thesis-headline em,
.fpai-stat-value {
    background-image: linear-gradient(130deg, #6cc4f7 0%, #6d9bf5 44%, #8b8cf8 100%) !important;
}

/* ── Orbs ─────────────────────────────────────────────────────────── */
.fpai-hero-mesh::before {
    background: radial-gradient(circle, rgba(78, 172, 241, 0.18) 0%, rgba(78, 172, 241, 0) 70%);
}
.fpai-hero-mesh::after {
    background: radial-gradient(circle, rgba(56, 130, 246, 0.15) 0%, rgba(56, 130, 246, 0) 70%);
}
.fpai-hero-orb-3 {
    background: radial-gradient(circle, rgba(79, 70, 229, 0.18) 0%, rgba(79, 70, 229, 0) 70%);
}

/* ── Footer ───────────────────────────────────────────────────────── */
footer.fpai-site-footer {
    --fsf-purple: #4eacf1;
    --fsf-blue: #4f46e5;
    --fsf-ink: #e8f1fa;
    --fsf-text: #8fa6bd;
    background:
        radial-gradient(115% 130% at 50% -15%, rgba(78, 172, 241, 0.13) 0%, rgba(78, 172, 241, 0.03) 32%, rgba(0, 0, 0, 0) 62%),
        linear-gradient(180deg, #061020 0%, #03070d 58%) !important;
}

/* ══════════════════════════════════════════════════════════════════════
 * REFERENCE PROSE  (.mn-*)
 *
 * The shared fpai-*.css files are a marketing landing-page system: heroes,
 * stat tiles, orbit diagrams. They carry no body-copy typography at all, so
 * everything a reference article needs (measure, headings, tables, footnotes)
 * is defined here.
 *
 * The `mn-` prefix is deliberate and load-bearing. `fpai-` classes are the
 * shared contract with the firstpartyai and inventnode sites and must stay
 * byte-identical across all three; `mn-` marks what is ours alone. Do not add
 * reference-prose rules to any fpai-*.css file, and do not rename these to
 * fpai-*: that would silently fork the shared design system.
 * ══════════════════════════════════════════════════════════════════════ */

.mn-article {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    color: #c8d6e6;
    font-size: 1.0625rem;
    line-height: 1.75;
}

.mn-article > *:first-child { margin-top: 0; }

/* Opening definition: the paragraph search engines and answer engines lift. */
.mn-lede {
    font-size: 1.1875rem;
    line-height: 1.7;
    color: #e6edf6;
    border-left: 2px solid rgba(78, 172, 241, 0.55);
    padding-left: 1.35rem;
    margin: 0 0 2.75rem;
}

.mn-article h2 {
    font-family: var(--brand-font, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: #f2f7fd;
    margin: 3.25rem 0 1rem;
}

.mn-article h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #dce8f5;
    margin: 2rem 0 0.6rem;
}

.mn-article p { margin: 0 0 1.15rem; }

.mn-article strong { color: #eef4fb; font-weight: 600; }

.mn-article a {
    color: #6cc4f7;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: rgba(108, 196, 247, 0.4);
}
.mn-article a:hover { text-decoration-color: #6cc4f7; }

.mn-article ul { margin: 0 0 1.35rem; padding-left: 1.15rem; list-style: none; }
.mn-article ul > li { position: relative; margin-bottom: 0.6rem; padding-left: 0.35rem; }
.mn-article ul > li::before {
    content: "";
    position: absolute;
    left: -0.8rem;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4eacf1;
    opacity: 0.7;
}

/* Definition list: term on the left, who uses it on the right. */
.mn-defs { margin: 0 0 1.5rem; }
.mn-defs dt {
    font-weight: 600;
    color: #eef4fb;
    margin-top: 1.1rem;
}
.mn-defs dt:first-child { margin-top: 0; }
.mn-defs dd { margin: 0.15rem 0 0; }

/* ── Table ────────────────────────────────────────────────────────────
 * Where each authority draws the boundary. Scrolls rather than squashes on
 * narrow screens; a squashed 3-column table is unreadable at 360px. */
.mn-table-wrap { overflow-x: auto; margin: 0 0 1.75rem; }

.mn-table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.55;
}
.mn-table caption {
    caption-side: bottom;
    text-align: left;
    font-size: 0.8125rem;
    color: #7f95ad;
    padding-top: 0.85rem;
}
/* Fixed columns. The regulatory rows carry three or four lines of qualifying
 * text while the last row carries four words, so with auto layout column 2
 * swallowed the table and column 3 wrapped every term onto two lines. */
.mn-table { table-layout: fixed; }
.mn-table th:nth-child(1), .mn-table td:nth-child(1) { width: 28%; }
.mn-table th:nth-child(2), .mn-table td:nth-child(2) { width: 46%; }
.mn-table th:nth-child(3), .mn-table td:nth-child(3) { width: 26%; }

.mn-table th,
.mn-table td {
    text-align: left;
    padding: 0.95rem 1.35rem 0.95rem 0;
    border-bottom: 1px solid rgba(120, 160, 200, 0.16);
    vertical-align: top;
    hyphens: none;
}
.mn-table thead th {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #7f9ab5;
    border-bottom-color: rgba(120, 160, 200, 0.3);
    white-space: nowrap;
}
.mn-table tbody th { font-weight: 600; color: #e6edf6; }
.mn-table td:last-child, .mn-table th:last-child { padding-right: 0; }

.mn-rule {
    border: none;
    border-top: 1px solid rgba(120, 160, 200, 0.16);
    margin: 3rem 0 2rem;
}

/* ── Figures ─────────────────────────────────────────────────────────
 * Generated by figures.gen.py into dist/images/ at 2x. The figures are drawn
 * on the page's own dark field, so they need no card, border or background:
 * a plate around them would announce "pasted image" on a page they already
 * belong to. Width/height are on the <img> to reserve space and avoid a
 * layout shift while they load. */
.mn-figure {
    margin: 2.25rem 0 2rem;
}
.mn-figure img {
    display: block;
    width: 100%;
    height: auto;
}
.mn-figure figcaption {
    margin-top: 0.85rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #8fa6bd;
}

/* ── Aside ──────────────────────────────────────────────────────────
 * Deliberately NOT a card. The one aside on this page sits immediately under
 * the lede, and the lede already carries an accent rule; a filled, bordered
 * box directly beneath it put two competing callouts above the first line of
 * body text and made the page open heavy. This reads as a child of the
 * paragraph above it: indented, smaller, dimmer, no frame. */
.mn-note {
    /* No negative top margin. The lede's 2.75rem bottom margin collapses
     * against it, and pulling back 1.25rem closed the gap to nothing. */
    margin: 0 0 2.25rem 1.35rem;
    padding: 0 0 0 1.35rem;
    border-left: 1px solid rgba(120, 160, 200, 0.22);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #9db2c8;
}
.mn-note > *:last-child { margin-bottom: 0; }
.mn-note em { color: #c8d6e6; font-style: italic; }
.mn-note-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #7f9ab5;
    margin-bottom: 0.4rem;
}

/* ── Footnote references ─────────────────────────────────────────────
 * Numbered citations, Wikipedia-style. sup markers scroll to .mn-refs. */
.mn-cite {
    font-size: 0.72em;
    vertical-align: super;
    line-height: 0;
    margin-left: 0.1em;
    white-space: nowrap;
}
/* Keep the marker welded to the sentence it cites. `white-space: nowrap` only
 * stops a break INSIDE the marker; the break opportunity between the preceding
 * word and the marker is still live, and it fires often enough to matter (at
 * 1280px "[10]" lands at the head of the next line, directly in front of the
 * NEXT sentence, which silently reassigns the citation to the wrong claim).
 * U+2060 WORD JOINER as generated content joins the character stream and
 * removes that break opportunity. Zero visual width, no markup change. */
.mn-cite::before { content: "\2060"; }
.mn-cite a { text-decoration: none; color: #6cc4f7; }
.mn-cite a:hover { text-decoration: underline; }

.mn-refs { padding-left: 1.4rem; margin: 0; font-size: 0.875rem; line-height: 1.65; color: #9db2c8; }
.mn-refs li { margin-bottom: 0.85rem; padding-left: 0.3rem; }
.mn-refs li:target { color: #e6edf6; }
.mn-refs a { color: #6cc4f7; word-break: break-word; }

.mn-updated {
    margin: 2.75rem 0 0;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(120, 160, 200, 0.16);
    font-size: 0.8125rem;
    color: #7f95ad;
}

/* ── Hero: a masthead, not a splash ──────────────────────────────────
 * fpai-v3.css sets .fpai-hero to min-height:100vh, which is right for a
 * marketing landing page that opens on a claim and a pair of CTAs. This hero
 * carries a term and one sentence, so a full viewport of empty field reads as
 * something failed to load rather than as composure. Sized to the content
 * instead, which also brings the definition and the article into the same
 * screen on a laptop. */
.fpai-hero.section {
    min-height: clamp(22rem, 52vh, 30rem);
}

/* The floating orbs are 480-700px wide with a 55-60px blur, positioned as a
 * percentage of a 100vh hero. In a hero this short they overflow and get cut
 * by .fpai-hero's own `overflow: hidden`, which draws a hard horizontal seam
 * across the page right below the definition. The fixed page wash above
 * already paints four large radial gradients over the whole document, so the
 * ambient light is covered without them. Dropping them also removes three
 * infinite animations from a page that has no reason to move. */
.fpai-hero-mesh,
.fpai-hero-orb-3 { display: none; }

/* .fpai-hero::before is a fourth orb (600px, pink) and overflows for the same
 * reason. ::after is NOT an orb: it is the footer-signature hairline with the
 * travelling light that frames the hero's base, it sits at bottom:0 so it
 * cannot be clipped, and it is the one piece of motion worth keeping. */
.fpai-hero::before { display: none; }
.fpai-hero .fpai-hero-title { margin-bottom: 1.25rem; }
.fpai-hero .fpai-hero-sub { margin-bottom: 0; }

@media (max-width: 640px) {
    .mn-article { font-size: 1rem; }
    .mn-lede { font-size: 1.0938rem; padding-left: 1.05rem; }

    /* ── Table stacks instead of scrolling ────────────────────────────
     * A horizontally scrolling table hides its last column behind a cut
     * edge with no affordance that anything is there, and this table is
     * the most important block on the page. Below 640px each row becomes
     * a labelled card. Cells carry data-label in the markup; keep those
     * in sync with the <thead> or the labels here go blank. */
    .mn-table-wrap { overflow-x: visible; }
    /* Flex column rather than block: `caption-side: bottom` stops working the
     * moment the table is not display:table, and a table-caption inside a
     * block parent shrink-wraps into an unreadable ~130px column at the top.
     * Ordering the caption after tbody keeps it below the cards, as on desktop. */
    .mn-table { min-width: 0; display: flex; flex-direction: column; table-layout: auto; }
    /* The desktop percentage widths are set with :nth-child, which outranks the
     * blanket `width:auto` below. Unset them here or the stacked cards inherit
     * a 24/50/26 split and the layout collapses into columns again. */
    .mn-table th:nth-child(1), .mn-table td:nth-child(1),
    .mn-table th:nth-child(2), .mn-table td:nth-child(2),
    .mn-table th:nth-child(3), .mn-table td:nth-child(3) { width: auto; }
    .mn-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .mn-table tbody, .mn-table tr, .mn-table td, .mn-table th { display: block; width: auto; }
    .mn-table caption { display: block; width: auto; order: 2; }
    .mn-table tbody { order: 1; }

    .mn-table tbody tr {
        border: 1px solid rgba(120, 160, 200, 0.18);
        border-radius: 10px;
        padding: 0.9rem 1rem;
        margin-bottom: 0.85rem;
    }
    .mn-table tbody th,
    .mn-table tbody td { border-bottom: 0; padding: 0; }

    .mn-table tbody th[scope="row"] {
        font-size: 1rem;
        margin-bottom: 0.6rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid rgba(120, 160, 200, 0.14);
    }
    .mn-table tbody td { margin-bottom: 0.55rem; }
    .mn-table tbody td:last-child { margin-bottom: 0; }
    .mn-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: #7f9ab5;
        margin-bottom: 0.15rem;
    }
    .mn-table caption { padding-top: 0.25rem; }
}