/* Weave sections (owner: weave builder): connected systems (#integrations) and governed intelligence (#intelligence).
   Port: the shared product pieces, 4 · Integrations and 5 · Intelligence of public/prototypes/homepage/weave/style.css
   (with their responsive and reduced-motion rules) and the integrations part of cinematic/lower.css.
   Scope: prototype rules that were unscoped stay single-class (.wv-…); rules scoped with .proto-cinematic / .proto-weave
   become .marketing-page--record. Tokens, bands, type and the thread come from home-base.css.
   Markup: templates/index/home/_integrations_weave.html.twig, _intelligence_console.html.twig.
   Behaviour: assets/landing/weave.js (adds .is-driven to a section while the thread drives it).
   Contract: home-port/CONTRACT.md.

   Audit fixes carried here:
   - Major 9 (A11Y-06): nothing is dimmed with opacity. Stages, route steps and console parts that the thread has not
     reached yet use muted colours that still measure 4.5:1 or better; the current one is marked by its node, its colour
     and (without motion) an underline.
   - Major 13 (PERF-05): the five workspace panels share one grid cell, so the section's height never changes.
   - Major 14 (RESP-02): the facts grid has two columns below 1366px and codes never break.
   - RESP-03: the handover window fits a 768px-tall viewport, and the last stage holds the window pinned on
     "Maintained" (the last stage's height follows the measured window, --wv-ops-h).
   - RESP-04: the section headings balance (the site-wide `h2 { text-wrap: pretty }` would otherwise win).
   - RESP-08: the phone tab strip shows a cue while more tabs sit off to the right. */

/* Muted text on the Paper band: lighter than Forest and Slate, still 4.7:1 on Paper. */
.marketing-page--record {
    --wv-muted-title: #627068;
    --wv-muted-copy: #66706A;
}

/* ---------- Shared product pieces ---------- */

.wv-window {
    position: relative; overflow: hidden;
    border: 1px solid rgb(14 59 42 / 0.14); border-radius: 16px;
    background: var(--white); color: var(--ink);
    box-shadow: 0 48px 90px -52px rgb(14 59 42 / 0.45), 0 2px 8px rgb(14 59 42 / 0.05);
}
.wv-window__bar {
    display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 18px;
    border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--slate);
}
.wv-window__crumb { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--forest); }
.wv-status { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-weight: 500; }
.wv-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgb(184 134 43 / 0.16); }

.wv-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.wv-facts--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; }
.wv-facts dt { margin-bottom: 4px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.wv-facts dd { font-size: 15px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Major 14: an identifier is read as one unit. */
.wv-facts code { white-space: nowrap; }

/* ---------- 4 · Integrations ---------- */

/* RESP-04: the heading balances (the site-wide precision rule sets h2 to text-wrap: pretty). */
.wv-integrations .wv-heading, .wv-intelligence .wv-display { text-wrap: balance; }

.wv-handover { margin-top: clamp(72px, 8vw, 112px); align-items: start; }
.wv-stages { grid-column: 1 / span 5; }
.wv-stage { position: relative; min-height: 44vh; padding-bottom: 40px; }
.wv-stage:last-child { min-height: 0; }
.wv-stage .wv-anchor { left: calc(var(--rail-x) - var(--rail)); top: 13px; }
.wv-stage button { display: grid; gap: 8px; cursor: pointer; }
.wv-stage button span { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); }
.wv-stage button strong { font: 600 clamp(1.5rem, 1rem + 1.2vw, 2rem)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--forest); transition: color 0.5s var(--ease-out); }
.wv-stage p { max-width: 42ch; margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--slate); transition: color 0.5s var(--ease-out); }
.wv-handover__stage { grid-column: 6 / span 7; position: sticky; top: calc(var(--header) + 40px); }

/* Title first; the system each stage happens in follows as a sentence-case meta line, not an eyebrow. */
.marketing-page--record .wv-stage button { gap: 6px; }
.marketing-page--record .wv-stage button span { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gold-text); }
/* The node sits on the centre of the title's first line (font size × line-height 1.15 ÷ 2). */
.marketing-page--record .wv-stage .wv-anchor { top: calc(clamp(1.5rem, 1rem + 1.2vw, 2rem) * 0.575); }

.wv-ops__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; }
.wv-ops__head span { font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.wv-ops__head h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; font: 700 1.6rem/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--forest); }
.wv-ops__id { white-space: nowrap; padding: 5px 9px; border-radius: 6px; background: rgb(14 59 42 / 0.07); font-size: 13px; font-weight: 500; color: var(--forest); letter-spacing: 0.02em; transition: background-color 0.4s ease, color 0.4s ease; }
.wv-ops__id.is-asset { background: var(--forest); color: var(--signal); }
.wv-ops__state { text-align: right; }
.wv-ops__state strong { display: block; margin-top: 4px; font-weight: 600; color: var(--forest); }
.wv-ops__tabs { position: relative; }
.wv-ops__bar { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); border-block: 1px solid var(--rule); }
.wv-ops__bar button { padding: 13px 8px; font-size: 13px; font-weight: 500; text-align: center; color: var(--slate); cursor: pointer; transition: color 0.25s ease, background-color 0.25s ease; }
.wv-ops__bar button:hover { background: var(--paper); color: var(--forest); }
.wv-ops__bar [aria-selected="true"] { color: var(--forest); font-weight: 600; }
.wv-ops__progress { position: absolute; bottom: -1px; left: 0; width: 20%; height: 2px; background: var(--gold); transform: translateX(calc(var(--stage, 0) * 100%)); transition: transform 0.6s var(--ease-out); }
.wv-ops__more { display: none; }

/* Major 13: every panel is laid out in the same cell (weave.js hides the inactive ones with inert), so the window, and
   the section, keep one height whichever stage is shown. */
.wv-ops__panels { display: grid; }
.wv-ops__panel { grid-area: 1 / 1; display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; padding: 22px 24px 24px; }
.wv-ops__source { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--slate); }
.wv-ops__source span { font-weight: 600; color: var(--gold-text); }
.wv-ops__source time { font-family: var(--font-mono); }
.wv-ops__record h4 { margin: 10px 0 18px; font: 600 1.15rem/1.3 var(--font-display); color: var(--forest); }
.wv-next { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; margin-top: 20px; padding: 14px 16px; border-radius: 10px; background: var(--paper); }
.wv-next span { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.wv-next strong { grid-row: 2; font-weight: 600; color: var(--forest); }
.wv-next b { grid-row: 1 / span 2; font-size: 12px; font-weight: 500; color: var(--gold-text); }
.wv-gate { display: grid; align-content: start; gap: 14px; padding: 16px; border: 1px solid var(--rule); border-radius: 12px; }
.wv-gate > p:first-child { display: grid; font-size: 12px; color: var(--slate); }
.wv-gate > p:first-child strong { font: 600 1.05rem/1.3 var(--font-display); color: var(--forest); }
.wv-gate li { position: relative; display: grid; padding: 9px 0 9px 28px; border-top: 1px solid var(--rule); font-size: 14px; font-weight: 500; color: var(--ink); }
.wv-gate li small { font-size: 12.5px; font-weight: 400; color: var(--slate); }
.wv-gate li::before { content: ""; position: absolute; top: 12px; left: 0; width: 14px; height: 14px; border: 1.5px solid var(--rule); border-radius: 50%; }
.wv-gate .is-ok::before { border-color: var(--gold); background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.wv-gate__event { display: grid; gap: 4px; padding: 12px; border-radius: 8px; background: var(--forest); color: var(--paper); font-size: 12px; }
.wv-gate__event span { color: rgb(247 245 240 / 0.6); letter-spacing: 0.06em; text-transform: uppercase; font-size: 10.5px; }
.wv-gate__event code { color: var(--signal); font-size: 13px; }
.wv-gate__event small { color: rgb(247 245 240 / 0.7); }

.wv-foundation { margin-top: clamp(96px, 10vw, 160px); padding-top: 40px; border-top: 1px solid rgb(14 59 42 / 0.14); }
.wv-foundation__copy { grid-column: 1 / span 4; }
.wv-foundation__copy h3 { font: 700 clamp(1.6rem, 1rem + 1.4vw, 2.2rem)/1.1 var(--font-display); letter-spacing: -0.025em; color: var(--forest); }
.wv-foundation__copy p { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--slate); }
.wv-foundation__list { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
.wv-foundation__list div { display: grid; align-content: start; gap: 10px; padding-top: 18px; border-top: 2px solid var(--forest); }
.wv-foundation__list dt { font: 600 1.1rem/1.2 var(--font-display); color: var(--forest); }
.wv-foundation__list dd { font-size: 15px; line-height: 1.55; color: var(--slate); }
.wv-foundation__list .wv-foundation__actions { font-size: 11.5px; font-weight: 500; line-height: inherit; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); }

/* ---------- 5 · Intelligence ---------- */

.wv-intelligence__head h2 { grid-column: 1 / span 11; }
.wv-intelligence__head .wv-lead { grid-column: 1 / span 7; margin-top: 30px; }
.wv-decision { margin-top: clamp(72px, 8vw, 112px); align-items: start; }
.wv-route { grid-column: 1 / span 4; }
.wv-route li { position: relative; display: grid; align-content: start; gap: 6px; min-height: 26vh; }
.wv-route li:last-child { min-height: 0; }
.wv-route .wv-anchor { left: calc(var(--rail-x) - var(--rail)); top: 13px; }
.wv-route strong { font: 600 1.6rem/1.2 var(--font-display); letter-spacing: -0.02em; transition: color 0.45s var(--ease-out); }
.wv-route small { font-size: 15px; color: rgb(247 245 240 / 0.66); transition: color 0.45s var(--ease-out); }
.wv-decision__stage { grid-column: 5 / span 8; position: sticky; top: calc(var(--header) + 32px); }

.wv-console { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 50px 90px -50px rgb(0 0 0 / 0.55); }
.wv-console > div { padding: 18px; border-radius: 12px; background: var(--white); transition: background-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), border-color 0.6s var(--ease-out), translate 0.6s var(--ease-out); }
.wv-console > div > span, .wv-console > div > p:first-child span { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.wv-console__q { grid-column: 1 / -1; }
.wv-console__q p { position: relative; min-height: 2.5em; font: 600 clamp(1.15rem, 0.9rem + 0.8vw, 1.5rem)/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--forest); }
/* A11Y-14: while the question types, the full sentence keeps its place (and stays in the accessibility tree) under an
   aria-hidden copy that draws the typing. */
.wv-console__typed { position: absolute; inset: 0; }
.wv-console__question.is-typewriter .wv-console__full { color: transparent; }
.wv-console__typed.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; background: var(--gold); vertical-align: -0.12em; animation: wv-caret 0.9s steps(1) infinite; }
@keyframes wv-caret { 50% { opacity: 0; } }
.wv-console__q code { display: block; margin-top: 10px; font-size: 12px; color: var(--gold-text); }
.wv-console__evidence ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; margin-bottom: 12px; }
.wv-console__evidence li { font-size: 13px; color: var(--slate); }
.wv-console__evidence b { display: block; font: 700 1.9rem/1 var(--font-display); letter-spacing: -0.03em; color: var(--forest); font-variant-numeric: tabular-nums; }
.wv-console__evidence small, .wv-console__agents small { font-size: 12.5px; color: var(--slate); }
.wv-console__agents li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 0; border-top: 1px solid var(--rule); }
.wv-console__agents strong { font-size: 14.5px; font-weight: 600; color: var(--forest); }
.wv-console__agents small { grid-row: 2; }
.wv-console__agents b { grid-row: 1 / span 2; align-self: center; font-size: 12px; font-weight: 500; color: var(--slate); }
.wv-console__agents .is-active b { padding: 4px 9px; border-radius: 999px; background: var(--forest); color: var(--signal); }
.wv-console__finding { grid-column: 1 / -1; border: 1px solid var(--gold); }
.wv-console__finding > p:first-child { display: flex; justify-content: space-between; gap: 12px; }
.wv-console__finding > p:first-child b { font-size: 12px; font-weight: 500; color: var(--gold-text); }
.wv-console__finding h3 { margin-bottom: 10px; font: 700 clamp(1.25rem, 1rem + 0.9vw, 1.7rem)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--forest); }
.wv-console__finding > p:not(:first-child) { max-width: 64ch; font-size: 15px; line-height: 1.55; color: var(--ink); }
.wv-console__finding code { display: block; margin-top: 12px; font-size: 12px; color: var(--slate); }
.wv-console__finding code span { white-space: nowrap; }
.wv-console__plan > p:first-child { display: flex; justify-content: space-between; gap: 12px; }
.wv-console__plan > p:first-child b { font-size: 12px; font-weight: 600; color: var(--forest); }
.wv-console__plan li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.wv-console__plan em { flex: none; font-style: normal; font-size: 12px; font-weight: 500; color: var(--gold-text); }
.wv-console__decision { display: grid; align-content: space-between; gap: 18px; background: var(--forest) !important; color: var(--paper); }
.wv-console__decision p { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.wv-console__decision p i { width: 8px; height: 8px; border: 2px solid var(--signal); border-radius: 50%; }
.wv-console__decision div { display: flex; gap: 8px; }
.wv-ghost-btn { padding: 10px 14px; border: 1px solid rgb(247 245 240 / 0.3); border-radius: 8px; font-size: 13.5px; font-weight: 500; }
.wv-ghost-btn--primary { border-color: var(--signal); background: var(--signal); color: var(--forest); font-weight: 600; }
.wv-footnote { margin-top: 22px; font-size: 14px; color: rgb(247 245 240 / 0.7); }
.wv-footnote strong { color: var(--paper); font-weight: 600; }

/* ---------- The thread drives the story (weave.js adds .is-driven; wide screens with motion) ---------- */

@media (min-width: 1024px) {
    /* Major 9: a stage the thread is not on reads in muted colours (4.7:1 on Paper), not at 42% opacity. */
    .wv-integrations.is-driven .wv-stage:not(.is-active) button strong { color: var(--wv-muted-title); }
    .wv-integrations.is-driven .wv-stage:not(.is-active) p { color: var(--wv-muted-copy); }
    .wv-integrations.is-driven .wv-stage:not(.is-active):is(:hover, :focus-within) button strong { color: var(--forest); }

    /* RESP-03: the last stage is tall enough that the window stays pinned on "Maintained" for as long as each earlier
       stage holds it (44vh) after the node crosses the thread's marker line at 62% of the viewport (--wv-ops-h is the
       measured window height; the node sits 18px under the stage top). */
    .wv-integrations { --wv-stick: calc(var(--header) + 40px); }
    .wv-integrations .wv-handover__stage { top: var(--wv-stick); }
    .wv-integrations.is-driven .wv-stage:last-child { min-height: calc(var(--wv-stick) + var(--wv-ops-h, 640px) + 18px - 18vh); }

    /* Major 9: route steps ahead of the thread stay at 5:1 or better on Forest. */
    .wv-intelligence.is-driven .wv-route li strong { color: rgb(247 245 240 / 0.62); }
    .wv-intelligence.is-driven .wv-route li small { color: rgb(247 245 240 / 0.58); }
    .wv-intelligence.is-driven .wv-route li.is-reached strong { color: var(--paper); }
    .wv-intelligence.is-driven .wv-route li.is-reached small { color: rgb(247 245 240 / 0.66); }
    .wv-intelligence.is-driven .wv-route li.is-current strong { color: var(--signal); }
}

/* Major 9: console parts the request has not reached yet are drawn as dashed outlines with muted text (4.7:1 on Paper)
   instead of fading to 20%; each fills in (white card, full colour) as the thread reaches its step. */
.wv-console [data-console-part].is-future { background: transparent; outline: 1px dashed rgb(14 59 42 / 0.24); outline-offset: -1px; translate: 0 8px; }
.wv-console [data-console-part] :is(h3, p, strong, b, small, code, li, em, span) { transition: color 0.6s var(--ease-out), background-color 0.6s var(--ease-out); }
.wv-console [data-console-part].is-future :is(h3, p, strong, b, small, code, li, em, span) { color: var(--wv-muted-copy); }
.wv-console .wv-console__finding.is-future { border-color: transparent; }
.wv-console [data-console-part].is-future .is-active b { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
.wv-console .wv-console__decision.is-future { background: transparent !important; color: var(--wv-muted-copy); }
.wv-console .wv-console__decision.is-future p i { border-color: var(--wv-muted-copy); }
.wv-console [data-console-part].is-future .wv-ghost-btn { border-color: rgb(92 102 96 / 0.35); background: transparent; }

/* A pinned window fits a short laptop screen (RESP-03: 1024×768, 1280×720). */
@media (min-width: 1024px) and (max-height: 820px) {
    .wv-integrations { --wv-stick: calc(var(--header) + 20px); }
    .wv-window__bar { min-height: 42px; }
    .wv-ops__head { padding: 16px 22px 12px; }
    .wv-ops__head h3 { font-size: 1.4rem; }
    .wv-ops__bar button { padding-block: 11px; }
    .wv-ops__panel { gap: 14px; padding: 16px 22px 18px; }
    .wv-ops__record h4 { margin: 8px 0 12px; }
    .wv-facts--grid { row-gap: 10px; }
    .wv-next { margin-top: 14px; padding: 10px 14px; }
    .wv-gate { gap: 10px; padding: 12px 14px; }
    .wv-gate li { padding-block: 7px; }
    .wv-gate li::before { top: 10px; }
}

/* ---------- Tablet and phone ---------- */

/* Major 14: three columns of facts only where the record column is wide enough for them. */
@media (max-width: 1365px) {
    .wv-facts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
    .wv-stage { min-height: 0; padding-bottom: 36px; }
    .wv-handover__stage, .wv-decision__stage { position: relative; top: 0; margin-top: 24px; }
    .wv-route li { min-height: 0; padding-bottom: 24px; }
    .wv-foundation__list { margin-top: 32px; }
}

@media (max-width: 760px) {
    .wv-ops__panel { grid-template-columns: 1fr; }
    .wv-ops__head { flex-direction: column; align-items: flex-start; }
    .wv-ops__state { text-align: left; }
    .wv-console { grid-template-columns: 1fr; }
    .wv-foundation__list { grid-template-columns: 1fr; }

    /* Five full-size tabs scroll sideways instead of being crushed together. */
    .marketing-page--record .wv-ops__bar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
    .marketing-page--record .wv-ops__bar::-webkit-scrollbar { display: none; }
    .marketing-page--record .wv-ops__bar button { min-height: 44px; padding: 12px 14px; font-size: 13px; }
    .marketing-page--record .wv-ops__progress { display: none; }
    .marketing-page--record .wv-ops__bar [aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--gold); }

    /* RESP-08: while tabs sit off to the right, a solid cue at the strip's edge says so (and scrolls it on tap). */
    .wv-ops__tabs.has-more .wv-ops__more {
        position: absolute; top: 1px; right: 0; bottom: 1px; z-index: 1;
        display: grid; place-items: center; width: 44px;
        border-left: 1px solid var(--rule); background: var(--white); color: var(--gold-text); cursor: pointer;
    }
    .wv-ops__more .marketing-icon { width: 18px; height: 18px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    /* Nothing steps through the handover stages here, so every stage stays at full contrast; the selected one is marked
       by an underline as well as aria-current. */
    .marketing-page--record .wv-stage.is-active button strong { text-decoration: underline 2px var(--gold); text-underline-offset: 0.2em; }
}

/* ---------- Without scripts ---------- */

/* The workspace cannot switch tabs, so it shows all five stages one after another, in normal flow. */
html:not(.home-js) .wv-ops__tabs { display: none; }
html:not(.home-js) .wv-ops__panel[hidden] { display: grid; }
html:not(.home-js) .wv-ops__panel { grid-area: auto; }
html:not(.home-js) .wv-ops__panel + .wv-ops__panel { border-top: 1px solid var(--rule); }
html:not(.home-js) .wv-handover__stage { position: relative; top: 0; }