/**
 * Engine page — GAR, the cognitive engine behind Ora (engine.html)
 *
 * Written for a split audience: a prospective member skimming for "is this
 * more than a ChatGPT wrapper", and an investor reading for durable IP. The
 * layout alternates claim blocks with evidence blocks so neither reader has
 * to take a sentence on faith.
 *
 * Depends on design-tokens.css for all colour/spacing values.
 */

/* ==========================================================================
   HEADINGS MUST NEVER BE INVISIBLE
   ==========================================================================
   scroll-animations.js walks every <section>, tags its first h2/h3 with
   .section-header, and then hands that element .reveal-on-scroll +
   .reveal-fade-up — which is opacity:0 until an IntersectionObserver adds
   .is-visible. On this page the observer fires for the FIRST such heading and
   no other: verified on a preview channel by scrolling each h2 to the centre
   of the viewport and waiting — five of six stayed at opacity 0 permanently,
   including the closing CTA title.

   Rather than patch shared JS that every page depends on, this opts the page's
   headings out of the reveal entirely. Body copy and cards are unaffected and
   still animate. Specificity is 0,2,0 to beat .reveal-fade-up (0,1,0) —
   scroll-animations.css loads after engine.css, so an equal-specificity rule
   would lose. No !important needed.

   A heading is content, not decoration: if the animation fails it must fail
   visible. */
.engine-hero .engine-hero-title,
.engine-section .engine-section-title,
.engine-cta .engine-cta-title {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.engine-hero {
    position: relative;
    padding: calc(var(--section-padding-y, 6rem) * 1.15) 0 var(--section-padding-y, 6rem);
    background: var(--color-background);
    overflow: hidden;
}

.engine-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 50%;
    width: 1000px;
    height: 1000px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(34, 115, 183, 0.13) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.engine-hero-container {
    position: relative;
    z-index: 1;
    max-width: var(--container-max-width-narrow);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    text-align: center;
}

.engine-eyebrow {
    display: inline-block;
    font-size: var(--font-size-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-secondary-light);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-sm);
}

.engine-hero-title {
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: 1.08;
    margin: 0 0 var(--space-md);
}

.engine-hero-lede {
    font-size: var(--font-size-body-lg);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 auto var(--space-lg);
    max-width: 58ch;
}

.engine-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
}

/* ==========================================================================
   GENERIC SECTION SHELL
   ========================================================================== */

.engine-section {
    padding: var(--section-padding-y, 6rem) 0;
}

.engine-section-alt {
    background: var(--color-background-secondary);
}

.engine-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.engine-container-narrow {
    max-width: var(--container-max-width-narrow);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.engine-section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--space-xl);
}

.engine-section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: 1.15;
    margin: var(--space-sm) 0 var(--space-md);
}

.engine-section-sub {
    font-size: var(--font-size-body-lg);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.engine-prose p {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 var(--space-md);
}

.engine-prose strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   CONTRAST BLOCK — wrapper vs. own engine
   ========================================================================== */

.engine-contrast {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.engine-contrast-card {
    padding: var(--space-lg);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-background-elevated);
}

.engine-contrast-card-muted {
    background: transparent;
    border-style: dashed;
}

.engine-contrast-label {
    font-size: var(--font-size-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--space-sm);
    color: var(--color-text-muted);
}

.engine-contrast-card:not(.engine-contrast-card-muted) .engine-contrast-label {
    color: var(--color-secondary-light);
}

.engine-contrast-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
    line-height: 1.25;
}

.engine-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.engine-list li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.engine-list li::before {
    content: '\2014'; /* em dash */
    position: absolute;
    left: 0;
    color: var(--color-text-muted);
}

.engine-list-check li::before {
    content: '\2713';
    color: var(--color-secondary-light);
    font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   PRINCIPLES GRID
   ========================================================================== */

.engine-principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
}

.engine-principle {
    padding: var(--space-md) var(--space-md) var(--space-lg);
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-background-elevated);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.engine-principle:hover {
    border-color: var(--color-secondary);
    transform: translateY(-3px);
}

.engine-principle-index {
    font-size: var(--font-size-micro);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
    color: var(--color-secondary-light);
    font-weight: var(--font-weight-medium);
}

.engine-principle-title {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: var(--space-3xs, 0.25rem) 0 var(--space-2xs, 0.5rem);
    line-height: 1.25;
}

.engine-principle-text {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ==========================================================================
   EVIDENCE / DISCIPLINE CALLOUT
   ========================================================================== */

.engine-callout {
    border-left: 3px solid var(--color-secondary);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-background-elevated);
    border-radius: 0 10px 10px 0;
    margin: var(--space-lg) 0;
}

.engine-callout p {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    line-height: 1.65;
}

.engine-callout p:last-child {
    margin-bottom: 0;
}

.engine-callout-attrib {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    font-style: italic;
}

/* ==========================================================================
   AUDIENCE SPLIT — members vs. investors
   ========================================================================== */

.engine-audience {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.engine-audience-card {
    padding: var(--space-lg);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-background-elevated);
}

.engine-audience-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
}

/* ==========================================================================
   CLOSING BAND
   ========================================================================== */

.engine-cta {
    padding: var(--space-2xl) 0;
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.engine-cta-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
    line-height: 1.15;
}

.engine-cta-text {
    font-size: var(--font-size-body-lg);
    color: var(--color-text-secondary);
    margin: 0 auto var(--space-lg);
    max-width: 56ch;
    line-height: 1.6;
}

.engine-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
}

.engine-cta-note {
    margin: var(--space-md) 0 0;
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
    .engine-contrast,
    .engine-audience {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .engine-hero {
        padding: var(--section-padding-y-mobile, 4rem) 0;
    }

    .engine-section {
        padding: var(--section-padding-y-mobile, 4rem) 0;
    }

    .engine-hero-title {
        font-size: 2.125rem;
    }

    .engine-section-title,
    .engine-cta-title {
        font-size: 1.875rem;
    }

    .engine-hero-actions .btn,
    .engine-cta-actions .btn {
        width: 100%;
        max-width: 320px;
    }
}

/* ==========================================================================
   PULL QUOTES
   ==========================================================================
   Attributed statements from a named person. Deliberately larger than body
   copy and lighter in weight than a heading, so a skimmer reads them without
   them competing with section titles. */

.engine-pullquote {
    max-width: 46ch;
    margin: var(--space-xl) auto;
    padding-left: var(--space-lg);
    border-left: 3px solid var(--color-secondary);
}

.engine-pullquote p {
    font-size: var(--font-size-h4);
    line-height: 1.4;
    font-weight: var(--font-weight-light);
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
}

.engine-pullquote cite {
    display: block;
    font-style: normal;
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

/* A quote sitting inside a narrow prose column needs no extra centring */
.engine-prose .engine-pullquote {
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   TECHNICAL PAGE — definition blocks, meta line, diagrams
   ========================================================================== */

/* Publication metadata. A technical document that can be cited needs a visible
   date, version and author; without them it reads as marketing. */
.engine-doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 0.5rem) var(--space-md);
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-lg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

.engine-doc-meta strong {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

/* The formal definition — the citable unit of the page, so it is visually
   set apart from the discussion around it. */
.engine-definition {
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    border: 1px solid var(--color-secondary);
    border-radius: 12px;
    background: var(--color-background-elevated);
}

.engine-definition-term {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
}

.engine-definition p {
    font-size: var(--font-size-body);
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md);
}

.engine-definition ol {
    margin: 0;
    padding-left: 1.4em;
    color: var(--color-text-secondary);
}

.engine-definition ol li {
    margin-bottom: var(--space-sm);
    line-height: 1.6;
    font-size: var(--font-size-body);
}

.engine-definition ol li strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/* Diagrams. Inline SVG so there is no external request and no dependency;
   colours come from currentColor and tokens so both themes work. */
.engine-figure {
    margin: var(--space-xl) 0;
}

.engine-figure-frame {
    padding: var(--space-lg) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-background-elevated);
    overflow-x: auto;
}

.engine-figure svg {
    display: block;
    width: 100%;
    height: auto;
    min-width: 520px;
    margin: 0 auto;
}

.engine-figure figcaption {
    margin-top: var(--space-sm);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    line-height: 1.55;
    text-align: center;
}

/* SVG element styling, kept here rather than inline so both themes resolve */
.dg-axis      { stroke: var(--color-border-strong); stroke-width: 1.5; fill: none; }
.dg-grid      { stroke: var(--color-border); stroke-width: 1; fill: none; }
.dg-label     { fill: var(--color-text-secondary); font-size: 13px; font-family: inherit; }
.dg-label-sm  { fill: var(--color-text-muted); font-size: 11.5px; font-family: inherit; }
.dg-title     { fill: var(--color-text); font-size: 13.5px; font-weight: 600; font-family: inherit; }
.dg-flat      { stroke: var(--color-text-muted); stroke-width: 2.5; fill: none; stroke-dasharray: 6 4; }
.dg-step      { stroke: var(--color-secondary); stroke-width: 2.5; fill: none; stroke-linejoin: round; }
.dg-box       { fill: var(--color-background); stroke: var(--color-border-strong); stroke-width: 1.5; }
.dg-box-key   { fill: var(--color-background); stroke: var(--color-secondary); stroke-width: 2; }
.dg-band      { fill: none; stroke: var(--color-secondary-light); stroke-width: 1.25; stroke-dasharray: 4 4; }
.dg-arrow     { stroke: var(--color-border-strong); stroke-width: 1.5; fill: none; }

/* ==========================================================================
   CROSS-PAGE LINK CARD
   ========================================================================== */

.engine-crosslink {
    display: block;
    max-width: var(--container-max-width-narrow);
    margin: var(--space-xl) auto 0;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-background-elevated);
    text-decoration: none;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.engine-crosslink:hover,
.engine-crosslink:focus-visible {
    border-color: var(--color-secondary);
    transform: translateY(-2px);
}

.engine-crosslink-label {
    display: block;
    font-size: var(--font-size-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-secondary-light);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2xs, 0.5rem);
}

.engine-crosslink-title {
    display: block;
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-3xs, 0.25rem);
}

.engine-crosslink-text {
    display: block;
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    line-height: 1.55;
}

@media (max-width: 767px) {
    .engine-pullquote p { font-size: var(--font-size-body-lg); }
    .engine-definition { padding: var(--space-md); }
}

/* Left-aligned document headings for the technical page.
   An inline text-align on the wrapping <header> is not enough: scroll-animations.js
   adds .section-header to the first h2/h3 of every <section>, and that rule centres
   the heading itself, so the inherited value never applies. Targeting the title
   directly at 0,2,0 wins without !important. */
.engine-section-header-left {
    text-align: left;
    max-width: none;
}

.engine-section-header-left .engine-section-title,
.engine-section-header-left .engine-section-sub {
    text-align: left;
}

/* ==========================================================================
   GAR MARK
   ==========================================================================
   Inlined rather than <img src="gar-mark.svg"> so the outlined block inherits
   currentColor and works on both grounds; an external SVG referenced by <img>
   cannot see the page's colour. The standalone files in assets/logo/ exist for
   decks, avatars and READMEs where inlining is not possible. */

.gar-mark {
    display: block;
    width: 76px;
    height: 76px;
    margin: 0 auto var(--space-md);
    color: var(--color-text);
}

.gar-mark-inline {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: -7px;
    margin-right: var(--space-2xs, 0.5rem);
    color: var(--color-text);
}

@media (max-width: 767px) {
    .gar-mark { width: 60px; height: 60px; }
}