/* Enpasse AI page. Every AI picture shows a trace or a person deciding. Synthetic data. Prefix ai-. */

.eyebrow .ai-mark { --ai-mark-h: 9px; }

.ai-run-mk { --ai-mark-h: 9px; }

/* ---------- hero: the ocean behind type, at low opacity ---------- */
.ai-hero { position: relative; min-height: 820px; padding-top: 420px; padding-bottom: 40px; overflow: clip; }
.ai-sea { position: absolute; left: 50%; top: 0; width: max(100%, 1920px); aspect-ratio: 16 / 9; transform: translateX(-50%); opacity: .5; pointer-events: none; }
/* a still field of points under the poster, so the hero never reads empty */
.ai-sea::before { content: ""; position: absolute; left: -10%; right: -10%; top: 34%; height: 70%; transform: perspective(700px) rotateX(64deg); transform-origin: 50% 0; background-image: radial-gradient(circle at center, #ffffff8c 0 .9px, transparent 1.4px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 70%, transparent); opacity: .55; }
.ai-sea img, .ai-sea canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-sea::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom in oklab, var(--bg) 0, transparent 22%, transparent 48%, var(--bg) 82%); }
:root[data-theme="light"] .ai-sea { opacity: .3; filter: invert(1); }
:root[data-theme="light"] .ai-sea::after { background: linear-gradient(to bottom in oklab, #000 0, transparent 22%, transparent 48%, #000 82%); }
.ai-hero .wrap { position: relative; z-index: 1; }
.ai-hero-in { position: relative; }
.ai-hero .halo { position: absolute; left: -10%; top: -40%; width: 90%; height: 180%; border-radius: 50%; background: radial-gradient(closest-side, var(--bg), transparent); filter: blur(10px); opacity: .6; z-index: -1; }
.ai-hero .eyebrow { margin-bottom: 20px; color: var(--fg-2); }
.ai-hero .t-lede { margin-top: 28px; max-width: 46ch; }
@media (max-width: 768px) { .ai-hero { padding-top: 260px; min-height: 0; padding-bottom: 72px; } .ai-sea { width: 240%; } }

/* ---------- shared bits ---------- */
.ai-lbl { font-size: 12px; color: var(--fg-3); margin-bottom: 8px; }
.ai-lbl.pad { padding: 18px 20px 4px; margin: 0; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-breathe { 50% { transform: scale(.86); } }
.ai-steps { display: inline-flex; gap: 6px; margin-left: auto; }
.ai-steps span { height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11.5px; color: var(--fg-4); box-shadow: inset 0 0 0 1px var(--line-2); transition: color .4s, box-shadow .4s, background .4s; }
.ai-steps span.done { color: var(--cu); box-shadow: inset 0 0 0 1px var(--cu-line); }
.ai-steps span.on { color: var(--fg-1); background: var(--cu-tint); box-shadow: inset 0 0 0 1px var(--cu); }
.ai-chip { height: 20px; padding: 0 6px; border-radius: 5px; display: inline-flex; align-items: center; gap: 5px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); font-family: "Geist Mono", monospace; font-size: 11px; color: var(--fg-2); vertical-align: 1px; white-space: nowrap; letter-spacing: 0; transition: box-shadow .4s, background .4s, color .4s; }
.ai-chip .v { color: var(--fg-3); }
.ai-chip svg { width: 0; height: 10px; color: var(--ok); transition: width .3s var(--ease-enter); }
.ai-chip.on svg { width: 10px; }
.ai-chip.hot { background: var(--cu-tint); box-shadow: inset 0 0 0 1px var(--cu); color: var(--cu); }

/* ---------- pillar 1: the trace ---------- */
/* taller stages with a shorter floor, so the named decision stays lit */
.ai-tall { height: 940px; }
.ai-tall::after { background: linear-gradient(to top, var(--bg) 0 3%, transparent 22%); }
.ai-page { margin: 24px 26px; padding: 34px 34px; border-radius: 6px; background: var(--paper); color: var(--paper-ink); font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.75; box-shadow: 0 20px 40px #00000059; }
.ai-page .ln { height: 7px; border-radius: 4px; background: #0000000f; margin: 12px 0; }
.ai-page .ln.m { width: 70%; } .ai-page .ln.s { width: 45%; }
.ai-page-h { font-weight: 700; margin-bottom: 14px; }
.ai-page p { margin: 16px 0; }
.ai-hl { background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 0 / 0% 100%; transition: background-size 1.2s var(--ease-enter); }
.ai-hl.on { background-size: 100% 100%; }

.ai-trace { display: grid; grid-template-columns: 168px minmax(0, 1fr); height: calc(100% - 44px); }
.ai-rail { list-style: none; margin: 0; padding: 28px 0 0 24px; position: relative; border-right: 1px solid var(--line-2); }
.ai-rail::before { content: ""; position: absolute; left: 31px; top: 40px; height: 248px; width: 1px; background: var(--line); }
.ai-rail li { position: relative; height: 62px; padding-left: 26px; display: flex; flex-direction: column; color: var(--fg-4); transition: color .5s; }
.ai-rail li i { position: absolute; left: 3px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--fg-4); transition: background .5s, box-shadow .5s; }
.ai-rail li span { font-size: 13px; font-weight: 500; }
.ai-rail li small { font-size: 12px; color: var(--fg-4); transition: color .5s; }
.ai-rail li.on { color: var(--fg-1); }
.ai-rail li.on small { color: var(--fg-3); }
.ai-rail li.on i { background: var(--cu); box-shadow: 0 0 0 3px var(--cu-tint); }
.ai-rail li[data-k="person"].on i { background: var(--fg-1); box-shadow: 0 0 0 3px var(--bg-3); }
.ai-rail li[data-k="person"].ok i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tint); }
.ai-tr-main { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ai-run { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-2); transition: opacity .5s, background .5s; }
.ai-run.plain { background: transparent; box-shadow: none; padding: 0 20px; min-height: 56px; border-bottom: 1px solid var(--line-2); border-radius: 0; flex-wrap: wrap; }
.ai-run.quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-3); }
.ai-sec .ai-src { height: 38px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); color: var(--fg-2); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease-enter), transform .5s var(--ease-enter); }
.ai-src svg { width: 15px; height: 15px; color: var(--fg-3); flex: none; }
.ai-src .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ai-src .r { margin-left: auto; color: var(--fg-3); font-size: 12px; white-space: nowrap; }
.ai-src.in { opacity: 1; transform: none; }
.ai-src.left.in { opacity: .6; }
.ai-run.quiet .ai-steps { display: none; }
.ai-card { border-radius: 14px; padding: 16px 18px; background: var(--cu-tint-2); box-shadow: inset 0 0 0 1px var(--cu-line); opacity: 0; transform: translateY(10px); filter: blur(2px); transition: opacity .7s var(--ease-enter), transform .7s var(--ease-enter), filter .7s var(--ease-enter), background .6s, box-shadow .6s; }
.ai-card.in { opacity: 1; transform: none; filter: none; }
.ai-card.done { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.ai-card-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cu); padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--cu-line) 60%, transparent); }
.ai-card-h .r { margin-left: auto; display: flex; gap: 8px; align-items: center; color: var(--fg-3); }
.ai-card.done .ai-card-h { color: var(--fg-3); border-color: var(--line-2); }
.ai-kv { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding: 12px 0 0; }
.ai-kv > span { color: var(--fg-3); font-size: 12.5px; padding-top: 1px; }
.ai-kv b { font-weight: 560; }
.ai-found p { color: var(--fg-2); line-height: 1.65; }
.ai-found p + p { margin-top: 6px; }
.ai-acts { display: flex; gap: 8px; justify-content: flex-end; padding-top: 16px; transition: opacity .4s, max-height .6s var(--ease-enter); max-height: 60px; }
.ai-card.done .ai-acts { opacity: 0; max-height: 0; padding-top: 0; overflow: hidden; }
.ai-stamp { display: flex; gap: 10px; align-items: flex-start; color: var(--fg-2); font-size: 13px; line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s var(--ease-enter), opacity .7s var(--ease-enter), margin .7s var(--ease-enter); }
.ai-stamp b { font-weight: 500; color: var(--fg-1); }
.ai-card.done .ai-stamp { max-height: 80px; opacity: 1; margin-top: 14px; }




.ai-disc { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--cu-tint); box-shadow: inset 0 0 0 1px var(--cu-line); }
.ai-disc .ai-mark { --ai-mark-h: 7px; margin-top: -1px; }

/* ---------- pillar 2: three ways of working ---------- */
.ai-ways-in { height: 800px; }
.ai-switch { position: absolute; z-index: 9; left: 50%; top: 40px; transform: translateX(-50%); display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: color-mix(in srgb, var(--bg-1) 80%, transparent); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line-3), 0 10px 30px #00000059; }
.ai-switch button { position: relative; z-index: 1; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--fg-3); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: color .3s; white-space: nowrap; }
.ai-switch button svg { width: 14px; height: 14px; }
.ai-switch button[aria-selected="false"] .ai-mark { --am-c: var(--fg-4); }
.ai-switch button[aria-selected="true"] { color: var(--fg-1); }
@media (any-hover: hover) { .ai-switch button:hover { color: var(--fg-1); } }
.ai-switch-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 90px); transform: translateX(var(--x, 4px)); border-radius: 999px; background: var(--bg-3); box-shadow: var(--glass); transition: transform .5s var(--ease-enter), width .5s var(--ease-enter); }
.ai-ways-win { left: 50%; top: 116px; width: min(900px, 88%); height: 540px; transform: translateX(-50%); }
.ai-chip-mode { height: 24px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.ai-chip-mode i { width: 7px; height: 7px; border-radius: 50%; background: var(--cu); transition: background .4s; }
.ai-ways[data-m="without"] .ai-chip-mode i { background: var(--fg-4); }
.ai-mode { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; opacity: 0; transform: translateY(8px); filter: blur(3px); pointer-events: none; transition: opacity .55s var(--ease-enter), transform .55s var(--ease-enter), filter .55s var(--ease-enter); }
.ai-ways[data-m="auto"] .ai-mode[data-m="auto"], .ai-ways[data-m="assisted"] .ai-mode[data-m="assisted"], .ai-ways[data-m="without"] .ai-mode[data-m="without"] { opacity: 1; transform: none; filter: none; }
.ai-ways-cap { position: absolute; z-index: 9; left: 40px; bottom: 36px; max-width: 560px; }
.ai-ways-cap h3 { font-size: 15px; font-weight: 500; }
.ai-ways-cap p { margin-top: 4px; color: var(--fg-3); font-size: 15px; }
.ai-ways-cap [data-m] { display: none; }
.ai-ways[data-m="auto"] .ai-ways-cap [data-m="auto"], .ai-ways[data-m="assisted"] .ai-ways-cap [data-m="assisted"], .ai-ways[data-m="without"] .ai-ways-cap [data-m="without"] { display: block; animation: ai-in .6s var(--ease-enter); }
@keyframes ai-in { from { opacity: 0; transform: translateY(6px); } }

.ai-run-t { color: var(--fg-1); font-weight: 500; white-space: nowrap; }
.ai-counts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-left: auto; color: var(--fg-3); font-size: 12.5px; }
.ai-counts b { color: var(--fg-1); font-weight: 500; font-variant-numeric: tabular-nums; }
.ai-said { padding: 12px 20px; display: flex; align-items: center; gap: 10px; color: var(--fg-3); font-size: 12.5px; border-bottom: 1px solid var(--line-2); }
.ai-need { height: 50px; margin: 0 20px; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line-2); color: var(--fg-1); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease-enter), transform .5s var(--ease-enter); }
.ai-need.in { opacity: 1; transform: none; }
.ai-need > span:nth-child(2) { display: flex; gap: 8px; align-items: center; white-space: nowrap; overflow: hidden; }
.ai-need .r { color: var(--fg-3); font-size: 12px; white-space: nowrap; }
.ai-area { color: var(--fg-3); font-size: 12.5px; }
.ai-mode-f { margin: 18px 20px 0; display: flex; align-items: center; gap: 12px; color: var(--fg-3); font-size: 12.5px; }
.ai-mode-f .ap-btn { margin-left: auto; }

.ai-req { height: 52px; margin: 0 20px; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line-2); }
.ai-req .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-req .st { display: flex; justify-content: flex-end; }
.ai-req.dim { opacity: .45; grid-template-columns: 64px minmax(0, 1fr); }
.ai-req-run { margin: 0 20px; max-height: 0; overflow: hidden; display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 12.5px; border-bottom: 1px solid transparent; transition: max-height .6s var(--ease-enter), padding .6s var(--ease-enter); }
.ai-req-run.on { max-height: 60px; padding: 12px 0; border-bottom-color: var(--line-2); }

.ai-wa { margin: 6px 20px 0; padding: 4px 16px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-3); background: var(--bg-2); }
.ai-wa-r { min-height: 48px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; border-bottom: 1px solid var(--line-2); }
.ai-wa-r > span:first-child { color: var(--fg-3); font-size: 12.5px; }
.ai-wa-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-wa-why { color: var(--fg-4); }
.ai-pick { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ai-pick span { height: 28px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; font-size: 12.5px; color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--line-3); transition: background .3s, color .3s, box-shadow .3s; }
.ai-pick span.on { color: var(--inv-fg); background: var(--inv); box-shadow: none; }
.ai-wa-stamp { display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 12.5px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease-enter), opacity .6s, padding .6s; }
.ai-wa-stamp.on { max-height: 40px; opacity: 1; padding-top: 12px; }
.ai-prov { margin: 10px 20px 0; padding: 12px 14px; border-radius: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; background: var(--bg-2); color: var(--fg-3); font-size: 12.5px; }
.ai-prov svg { width: 16px; height: 16px; color: var(--fg-3); }
.ai-prov b { color: var(--fg-1); font-weight: 500; }




/* ---------- pillar 3: the line, from a file to History (two lanes: AI on, Without AI) ---------- */
.ai-switchline { margin-top: 56px; max-width: 760px; }
.ai-flow { margin: 72px 0 0; }
.ai-fl-stage { position: relative; border-radius: 16px; background: radial-gradient(80% 70% at 30% 0%, var(--bg-2), var(--bg) 85%); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ai-fl-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.ai-fl-lane { position: relative; padding: 22px 28px 28px; }
.ai-fl-lane.wa { border-top: 1px dashed var(--line-3); background: color-mix(in srgb, var(--bg) 55%, transparent); padding-top: 18px; }
.ai-fl-lh { display: flex; align-items: center; gap: 10px; height: 28px; font-size: 13px; color: var(--fg-3); }
.ai-fl-lh b { color: var(--fg-1); font-weight: 500; }
.ai-fl-lh > .ai-mark { --ai-mark-h: 12px; }
.ai-fl-lh > svg { width: 16px; height: 16px; color: var(--fg-3); }
.ai-fl-req { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; color: var(--fg-3); }
.ai-fl-zero { margin-left: auto; height: 26px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-3); }
.ai-fl-zero b { font-family: "Geist Mono", monospace; font-weight: 500; color: var(--fg-1); font-variant-numeric: tabular-nums; transition: color .3s; }
.ai-fl-zero.tick { box-shadow: inset 0 0 0 1px var(--ok); }
.ai-fl-zero.tick b { color: var(--ok); }
.ai-fl-cols { display: grid; grid-template-columns: minmax(0, 1.12fr) 96px minmax(0, 1.36fr) minmax(0, .84fr) minmax(0, 1.16fr); column-gap: 22px; margin-top: 16px; align-items: start; }
.ai-fl-col { position: relative; z-index: 3; min-width: 0; }
.ai-fl-col.gate { align-self: stretch; z-index: 1; }
.ai-fl-k { font-size: 12px; color: var(--fg-4); margin-bottom: 12px; height: 16px; }

/* evidence: rows that light as Enpasse reads them */
.ai-fl-evl { list-style: none; margin: 0; padding: 0; }
.ai-fl-ev { position: relative; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 7px; font-size: 12px; color: var(--fg-3); transition: color .4s, background .4s, box-shadow .4s, opacity .4s; }
.ai-fl-ev + .ai-fl-ev { margin-top: 2px; }
.ai-fl-ev svg { width: 13px; height: 13px; flex: none; color: var(--fg-4); }
.ai-fl-ev .id { font-family: "Geist Mono", monospace; font-size: 11px; color: var(--fg-2); white-space: nowrap; }
.ai-fl-ev .id i { font-style: normal; color: var(--fg-4); }
.ai-fl-ev .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-fl-ev .tag { font-size: 11px; color: var(--fg-4); white-space: nowrap; opacity: 0; transition: opacity .4s; }
.ai-fl-ev.read { color: var(--fg-1); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.ai-fl-ev.read svg { color: var(--fg-2); }
.ai-fl-ev.cited { background: var(--cu-tint); box-shadow: inset 0 0 0 1px var(--cu-line); }
.ai-fl-ev.cited .id { color: var(--cu); }
.ai-fl-ev.left { color: var(--fg-4); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.ai-fl-ev.left .nm { text-decoration: line-through; text-decoration-color: var(--fg-4); }
.ai-fl-ev.left .tag, .ai-fl-ev.cited .tag { opacity: 1; }
.ai-fl-ev.cited .tag { color: var(--cu); }
.wa .ai-fl-ev.cited { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--fg-4); }
.wa .ai-fl-ev.cited .id, .wa .ai-fl-ev.cited .tag { color: var(--fg-1); }

/* the assessment gate: a seam the text crosses */
.ai-fl-gl { position: relative; height: 100%; min-height: 120px; display: grid; place-items: center; }
.ai-fl-gl > i { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; background: linear-gradient(to bottom, transparent, var(--cu) 18%, var(--cu) 82%, transparent); opacity: .55; }
.ai-fl-gl.hot > i { opacity: 1; box-shadow: 0 0 14px 1px color-mix(in srgb, var(--cu) 60%, transparent); }
.ai-fl-gl.off > i { background: none; border-left: 1px dashed var(--fg-4); opacity: .7; }
.ai-fl-cs { display: inline-flex; gap: 2px; align-items: center; }
.ai-fl-cs em { width: 9px; height: 9px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--fg-3) 0 1.5px, transparent 1.5px 3px); opacity: .7; transition: background .35s, opacity .35s; }
.ai-fl-off { display: grid; justify-items: center; gap: 6px; padding: 10px 8px; border-radius: 10px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-3); }
.ai-fl-off svg { width: 18px; height: 18px; }
.ai-fl-off small { font-size: 10.5px; text-align: center; line-height: 1.3; }

/* the suggestion card */
.ai-fl-card { position: relative; padding: 14px 16px 16px; border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 24px 50px #00000066; font-size: 13px; opacity: .25; filter: blur(3px); transform: translateY(8px); transition: opacity .6s var(--ease-enter), filter .6s, transform .6s var(--ease-enter), box-shadow .5s; }
.ai-fl-card.in { opacity: 1; filter: none; transform: none; }
.ai-fl-card.wait { box-shadow: inset 0 0 0 1px var(--cu-line), 0 24px 50px #00000066; }
.ai-fl-card.gone { opacity: .5; }
.ai-fl-card-h { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-3); padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.ai-fl-card-h > .ai-mark { --ai-mark-h: 11px; }
.ai-fl-card-h .r { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.ai-fl-res { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ai-fl-res small { font-size: 12px; color: var(--fg-3); }
.ai-fl-res b { font-weight: 500; color: var(--fg-1); }
.ai-fl-found { margin-top: 8px; color: var(--fg-2); line-height: 1.5; min-height: 3em; }
.ai-fl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 20px; }
.ai-fl-chips .ai-chip { opacity: 0; transform: translateX(-6px); transition: opacity .35s, transform .35s var(--ease-enter), box-shadow .4s, background .4s, color .4s; }
.ai-fl-chips .ai-chip.show { opacity: 1; transform: none; }
.ai-fl-gap { display: none; margin-top: 10px; align-items: center; gap: 8px; font-size: 12px; color: var(--amber); }
.ai-fl-gap svg { width: 13px; height: 13px; }
.ai-fl-card.gapped .ai-fl-gap { display: flex; }
.ai-fl-acts { display: flex; gap: 6px; justify-content: flex-end; margin-top: 14px; transition: opacity .4s; }
.ai-fl-card:not(.wait) .ai-fl-acts { opacity: .35; }
.ai-fl-card.decided .ai-fl-acts { display: none; }
.ai-fl-stamp { display: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); align-items: center; gap: 10px; color: var(--fg-2); font-size: 12.5px; line-height: 1.4; }
.ai-fl-stamp b { color: var(--fg-1); font-weight: 500; }
.ai-fl-card.decided .ai-fl-stamp { display: flex; animation: ai-fl-in .5s var(--ease-enter); }
@keyframes ai-fl-in { from { opacity: 0; transform: translateY(4px); } }
.ap-av.mr { background: #5a3a22; color: #f6e3d2; box-shadow: none; }
.ap-av.big { width: 44px; height: 44px; font-size: 14px; }

/* the manual card, Without AI */
.ai-fl-card.man { opacity: 1; filter: none; transform: none; padding-bottom: 14px; }
.ai-fl-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ai-fl-pick span { height: 26px; padding: 0 10px; border-radius: 7px; display: inline-flex; align-items: center; font-size: 12px; color: var(--fg-4); box-shadow: inset 0 0 0 1px var(--line-2); transition: color .3s, background .3s, box-shadow .3s; }
.ai-fl-pick span.on { color: var(--fg-1); background: var(--bg-3); box-shadow: var(--glass); }
.ai-fl-byrule { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 12px; color: var(--fg-3); }
.ai-fl-byrule svg { width: 14px; height: 14px; flex: none; }
.man .ai-chip.on svg { color: var(--fg-1); }

/* the person */
.ai-fl-person { display: grid; justify-items: start; gap: 2px; padding: 16px; border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); font-size: 13px; transition: box-shadow .5s; }
.ai-fl-person > .ap-av { margin-bottom: 10px; }
.ai-fl-person b { font-weight: 500; color: var(--fg-1); }
.ai-fl-person small { color: var(--fg-3); font-size: 12px; }
.ai-fl-person.wait { box-shadow: inset 0 0 0 1px var(--fg-4), 0 0 0 6px color-mix(in srgb, var(--fg-1) 4%, transparent); }
.ai-fl-person.sm { grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding: 12px 14px; }
.ai-fl-person.sm > .ap-av { margin: 0; }
.ai-fl-person.sm .ai-fl-st { grid-column: 1 / -1; }
.ai-fl-st { margin-top: 10px; min-height: 22px; display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: 12px; }
.ai-fl-st .ai-mark { --ai-mark-h: 16px; }
.ai-fl-st.ok { color: var(--ok); }
.ai-fl-st svg { width: 12px; height: 12px; }
.ai-fl-rule { margin-top: 12px; font-size: 12px; line-height: 1.45; color: var(--fg-4); }

/* History: newest first, rows drop in at the top */
.ai-fl-hl { list-style: none; margin: 0; padding: 0; position: relative; max-height: 352px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent); mask-image: linear-gradient(to bottom, #000 76%, transparent); }
.wa .ai-fl-hl { max-height: 128px; }
.ai-fl-h { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 42px; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 12px; color: var(--fg-3); line-height: 1.35; }
.ai-fl-h b { color: var(--fg-1); font-weight: 500; }
.ai-fl-h .k { font-family: "Geist Mono", monospace; font-size: 11px; color: var(--fg-2); }
.ai-fl-h time { font-size: 11.5px; color: var(--fg-4); white-space: nowrap; }
.ai-fl-h.new { animation: ai-fl-drop .6s var(--ease-enter); }
.ai-fl-h.new b { animation: ai-fl-flash 1.8s ease-out; }
@keyframes ai-fl-drop { from { opacity: 0; transform: translateY(-10px); filter: blur(2px); } }
@keyframes ai-fl-flash { 0% { color: var(--cu); } 100% { color: var(--fg-1); } }
.ai-fl-h .rule { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); color: var(--fg-3); }
.ai-fl-h .rule svg { width: 12px; height: 12px; }

/* caption and control */
.ai-fl-cap { margin-top: 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.ai-fl-cap .ai-two { max-width: 760px; font-size: 20px; }
.ai-fl-play { flex: none; height: 32px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-2); font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: color .2s, background .2s; }
@media (any-hover: hover) { .ai-fl-play:hover { color: var(--fg-1); background: var(--bg-3); } }
.ai-fl-play[hidden] { display: none; }
.ai-fl-play-i { width: 10px; height: 10px; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px); }
.ai-fl-play[aria-pressed="true"] .ai-fl-play-i { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
:root[data-theme="light"] .ai-fl-card.wait { box-shadow: inset 0 0 0 1px var(--cu-line), 0 14px 34px #0000001a; }
:root[data-theme="light"] .ai-fl-stage { background: radial-gradient(80% 70% at 30% 0%, var(--bg-1), var(--bg) 85%); }
@media (max-width: 1100px) { .ai-fl-cols { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1.2fr) minmax(0, .9fr); } .ai-fl-col.hist { grid-column: 1 / -1; margin-top: 28px; } .ai-fl-hl { max-height: 200px; } .wa .ai-fl-hl { max-height: 96px; } .ai-fl-req { display: none; } }
@media (max-width: 760px) {
  .ai-fl-lane { padding: 18px 14px 20px; }
  .ai-fl-cols { grid-template-columns: 1fr; row-gap: 0; }
  .ai-fl-col.gate { height: 92px; }
  .ai-fl-gl { min-height: 0; }
  .ai-fl-gl > i { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; background: linear-gradient(to right, transparent, var(--cu) 18%, var(--cu) 82%, transparent); }
  .ai-fl-gl.off > i { background: none; border-left: 0; border-top: 1px dashed var(--fg-4); }
  .ai-fl-off { grid-auto-flow: column; align-items: center; }
  .ai-fl-col.gate .ai-fl-k { display: none; }
  .ai-fl-col.who, .ai-fl-col.hist { margin-top: 24px; }
  .ai-fl-evl .ai-fl-ev:nth-child(n+8) { display: none; }
  .ai-fl-ev .tag { display: none; }
  .ai-fl-person:not(.sm) { grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  .ai-fl-person:not(.sm) > .ap-av { margin: 0; grid-row: span 2; }
  .ai-fl-person:not(.sm) .ai-fl-st { grid-column: 1 / -1; }
  .ai-fl-card-h .r { display: none; }
  .ai-fl-zero { margin-left: auto; }
  .ai-fl-lh { flex-wrap: wrap; height: auto; }
  .ai-fl-cap { flex-direction: column; }
  .ai-fl-cap .ai-two { font-size: 18px; }
}

.ai-never { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ai-never > div { padding: 28px 28px 0 0; }
.ai-never > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.ai-never svg { width: 18px; height: 18px; color: var(--fg-3); }
.ai-never h3 { margin-top: 18px; font-size: 15px; font-weight: 500; }
.ai-never p { margin-top: 6px; color: var(--fg-3); }
@media (max-width: 1024px) { .ai-never { grid-template-columns: 1fr 1fr; } .ai-never > div:nth-child(3) { padding-left: 0; border-left: 0; } .ai-never > div:nth-child(n+3) { padding-top: 40px; } }
@media (max-width: 600px) { .ai-never { grid-template-columns: 1fr; } .ai-never > div, .ai-never > div + div { padding: 28px 0 0; border-left: 0; } }

/* ---------- pillar 4: the AI policy ---------- */
/* the declaration is report text Enpasse prints from the firm policy: a plain .doc-page (normal surface, never white, not copper: no AI wrote it) */
.ai-decl.doc-page { margin: 24px 26px; padding: 26px 28px; border-radius: 7px; font-family: "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 1.7; box-shadow: inset 0 0 0 1px #0000001f; }
.ai-decl-h { font-weight: 560; margin-bottom: 12px; }
.ai-decl p { margin: 12px 0; }
.ai-decl .ln { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--fg-1) 8%, transparent); margin: 12px 0; }
.ai-decl .ln.m { width: 72%; } .ai-decl .ln.s { width: 44%; }
.ai-pol { padding: 24px 28px; }
.ai-pol-p { color: var(--fg-2); line-height: 1.6; margin-bottom: 22px; max-width: 70ch; }
.ai-prov-t { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-3); overflow: hidden; margin-bottom: 22px; }
.ai-prov-t > div { min-height: 44px; padding: 0 14px; display: grid; grid-template-columns: 1.3fr 1.5fr .8fr .8fr; gap: 14px; align-items: center; border-bottom: 1px solid var(--line-2); color: var(--fg-2); font-size: 12.5px; }
.ai-prov-t > div:last-child { border-bottom: 0; }
.ai-prov-t .hd { min-height: 36px; color: var(--fg-3); font-size: 12px; background: var(--bg-2); }
.ai-prov-t .ph { display: block; }
.ai-prov-t .dim { opacity: .45; }
.ai-prov-t .soon > span:first-child { color: var(--fg-3); }
.ai-starts { justify-self: start; height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11.5px; color: var(--amber); background: var(--amber-tint); white-space: nowrap; }
.ai-acc { padding: 16px 18px; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.ai-acc-f { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.ai-field { height: 52px; padding: 7px 12px; border-radius: 8px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ai-field small { font-size: 11px; color: var(--fg-3); }
.ai-field span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-acc-tick { margin-top: 14px; display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 13px; transition: opacity .4s; }
.ai-acc-tick .ap-btn { margin-left: auto; }
.ai-box-t { width: 16px; height: 16px; flex: none; border-radius: 4px; box-shadow: inset 0 0 0 1.25px var(--fg-4); display: grid; place-items: center; color: transparent; transition: background .25s, color .25s, box-shadow .25s; }
.ai-box-t svg { width: 11px; height: 11px; }
.ai-acc.ticked .ai-box-t, .ai-acc.done .ai-box-t { background: var(--fg-1); box-shadow: none; color: var(--bg); }
.ai-acc-stamp { display: flex; gap: 10px; align-items: flex-start; color: var(--fg-2); font-size: 13px; line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s var(--ease-enter), opacity .7s, margin .7s; }
.ai-acc-stamp b { color: var(--fg-1); font-weight: 500; }
.ai-acc.done .ai-acc-tick { opacity: .35; }
.ai-acc.done .ai-acc-stamp { max-height: 80px; opacity: 1; margin-top: 14px; }

.ai-chg-l { margin-top: 22px; }
.ai-chg { min-height: 48px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line-2); color: var(--fg-2); font-size: 13px; }
.ai-chg b { font-weight: 500; color: var(--fg-1); }
.ai-chg .r { margin-left: auto; color: var(--fg-3); font-size: 12px; white-space: nowrap; }
.ai-chg .ph { flex: 0 0 40%; }
.ai-chg.dim { opacity: .45; }
#ai-stage4 .later { opacity: 0; transform: translateY(6px); transition: opacity .7s var(--ease-enter), transform .7s var(--ease-enter); }
#ai-stage4.post .later { opacity: 1; transform: none; }
@media (max-width: 768px) { .ai-chg { flex-wrap: wrap; padding: 10px 0; } .ai-chg .ap-btn, .ai-chg .r { display: none; } }

/* the provider change timeline */
.ai-change { margin-top: 72px; padding: 40px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); background: linear-gradient(var(--bg-1), var(--bg) 70%); }
.ai-change-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 10px; }
.ai-change-head h3 { grid-column: 1 / span 5; font-size: 20px; font-weight: 560; letter-spacing: -0.015em; line-height: 1.3; }
.ai-change-head p { grid-column: 7 / span 6; color: var(--fg-3); }
.ai-tl { margin-top: 48px; --lane-l: 180px; --lane-r: 48px; }
.ai-tl-axis { position: relative; height: 92px; margin: 0 var(--lane-r) 0 var(--lane-l); border-top: 1px solid var(--line-3); }
.ai-tl-d { position: absolute; top: 0; left: calc(var(--x) * 100%); width: 150px; margin-left: -5px; padding-top: 16px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--fg-4); transition: color .5s; }
.ai-tl-d.end { margin-left: -145px; text-align: right; align-items: flex-end; }
.ai-tl-d i { position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--fg-4); transition: background .5s, box-shadow .5s; }
.ai-tl-d.end i { left: auto; right: 0; }
.ai-tl-d b { font-weight: 500; font-size: 13px; color: var(--fg-3); transition: color .5s; }
.ai-tl-d.on { color: var(--fg-3); }
.ai-tl-d.on b { color: var(--fg-1); }
.ai-tl-d.on i { background: var(--fg-1); box-shadow: 0 0 0 3px var(--bg-3); }
.ai-tl-head { position: absolute; top: -1px; left: 0; height: 1px; width: var(--p, 0%); background: linear-gradient(90deg, transparent, var(--fg-2)); }
.ai-lane { display: grid; grid-template-columns: var(--lane-l) minmax(0, 1fr) var(--lane-r); align-items: center; height: 64px; border-top: 1px solid var(--line-2); }
.ai-lane .nm { font-weight: 500; font-size: 14px; }
.ai-lane-bar { position: relative; height: 8px; border-radius: 4px; background: var(--bg-3); overflow: visible; }
.ai-lane-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 4px; background: color-mix(in srgb, var(--cu) 55%, transparent); }
.ai-lane-st { grid-column: 2 / 4; justify-self: end; margin-top: -2px; display: none; }
.ai-lane { grid-template-rows: auto; }
.ai-lane-st { grid-column: 2; grid-row: 1; justify-self: end; position: relative; z-index: 1; height: 28px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .5s var(--ease-enter), transform .5s var(--ease-enter); }
.ai-lane-st svg { width: 13px; height: 13px; }
.ai-lane-st.ok { color: var(--ok); background: var(--ok-tint); }
.ai-lane-st.wait { color: var(--amber); background: var(--amber-tint); }
.ai-lane.end .ai-lane-st { opacity: 1; transform: none; }
.ai-lane.end .ai-lane-bar i.wait { background: color-mix(in srgb, var(--amber) 40%, transparent); }
.ai-lane-bar { grid-column: 2; grid-row: 1; }


/* ---------- guidance ---------- */
.ai-guide { padding: 128px 0; }
.ai-guide-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: end; }
.ai-guide-head h2 { grid-column: 1 / span 6; }
.ai-two { grid-column: 8 / span 5; font-size: 20px; line-height: 1.4; letter-spacing: -0.015em; color: var(--fg-3); }
.ai-two span { color: var(--fg-1); }
.ai-map { margin-top: 64px; border-top: 1px solid var(--line); }
.ai-map-r { display: grid; grid-template-columns: 160px minmax(0, 5fr) minmax(0, 7fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.ai-sect { font-family: "Geist Mono", monospace; font-size: 12px; color: var(--fg-4); letter-spacing: 0; }
.ai-map-r b { font-weight: 500; font-size: 16px; }
.ai-map-r > span:last-child { color: var(--fg-3); }
@media (max-width: 1024px) { .ai-guide { padding: 96px 0; } .ai-guide-head h2, .ai-two { grid-column: 1 / -1; } .ai-map-r { grid-template-columns: 110px minmax(0, 1fr); } .ai-map-r > span:last-child { grid-column: 2; } }

/* ---------- also ---------- */
.ai-also { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-bottom: 32px; }
.ai-also a { display: flex; flex-direction: column; padding: 28px 28px 28px 0; border-top: 1px solid var(--line); }
.ai-also a + a { padding-left: 28px; border-left: 1px solid var(--line); }
.ai-also svg { width: 18px; height: 18px; color: var(--fg-3); }
.ai-also h3 { margin-top: 18px; font-size: 15px; font-weight: 500; }
.ai-also p { margin-top: 6px; color: var(--fg-3); flex: 1; }
.ai-also .go { margin-top: 18px; display: inline-flex; gap: 6px; align-items: center; color: var(--fg-2); font-size: 13.5px; transition: color .2s; }
.ai-also .go svg { width: 12px; height: 12px; color: inherit; transition: transform .2s var(--ease-out); }
@media (any-hover: hover) { .ai-also a:hover .go { color: var(--fg-1); } .ai-also a:hover .go svg { transform: translateX(3px); } }
@media (max-width: 1024px) { .ai-also { grid-template-columns: 1fr 1fr; } .ai-also a:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 600px) { .ai-also { grid-template-columns: 1fr; } .ai-also a, .ai-also a + a { padding: 28px 0; border-left: 0; } }

/* ---------- light theme touches ---------- */
:root[data-theme="light"] .ai-run.plain { background: transparent; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .ai-trace { grid-template-columns: 1fr; }
  .ai-rail { display: none; }
  .ai-steps { display: none; }
  .ai-kv { grid-template-columns: 1fr; gap: 4px; }
  .ai-change { padding: 28px 20px; }
  .ai-change-head h3, .ai-change-head p { grid-column: 1 / -1; }
  .ai-tl { --lane-l: 0px; --lane-r: 0px; }
  .ai-tl-axis { height: auto; border-top: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; padding-left: 18px; border-left: 1px solid var(--line-3); }
  .ai-tl-head { display: none; }
  .ai-tl-d, .ai-tl-d.end { position: relative; left: auto; width: auto; margin: 0; padding: 0; text-align: left; align-items: flex-start; }
  .ai-tl-d i, .ai-tl-d.end i { left: -23px; right: auto; top: 6px; }
  .ai-lane { grid-template-columns: 1fr; height: auto; padding: 16px 0; gap: 10px; margin-top: 8px; }
  .ai-lane-bar, .ai-lane-st { grid-column: 1; grid-row: auto; justify-self: start; }
  .ai-lane-st { white-space: normal; height: auto; padding: 6px 10px; border-radius: 10px; }
}
@media (max-width: 768px) {
  .ai-tall { height: 860px; }
  .ai-tall::after { background: linear-gradient(to top, var(--bg) 0 2%, transparent 12%); }
  .ai-tall + .stage2-cap { position: static; padding: 20px 12px 12px; }
  .ai-pol-p { display: none; }
  .ai-tall .win.back { display: none; }
  .ai-tall .win:not(.back) { left: 12px !important; right: 12px; width: auto !important; top: 24px !important; }
  .ai-card-h .r { display: none; }
  .ai-src .r { display: none; }
  .ai-tr-main { padding: 14px; }
  .win-bar > span:not(.ap-key):not(.r) { display: none; }
  .win-bar b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ai-ways-in { height: 760px; }
  .ai-switch { top: 24px; }
  .ai-switch button { padding: 0 11px; font-size: 13px; }
  .ai-switch button .ai-mark, .ai-switch button svg { display: none; }
  .ai-ways-win { top: 88px; width: calc(100% - 24px); height: 520px; }
  .ai-ways-cap { left: 20px; right: 20px; bottom: 20px; }
  .ai-need { grid-template-columns: 72px minmax(0, 1fr); }
  .ai-need .r { display: none; }
  .ai-counts { margin-left: 0; width: 100%; }
  .ai-run.plain { padding: 12px 20px; }
  .ai-req { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .ai-req .st .ap-btn svg { display: none; }
  .ai-wa-r { grid-template-columns: 64px minmax(0, 1fr); }
  .ai-prov-t > div { grid-template-columns: 1.4fr 1.4fr; }
  .ai-prov-t > div > :nth-child(n+3) { display: none; }
  .ai-acc-f { grid-template-columns: 1fr 1fr; }
  .ai-acc-f .ai-field:first-child { grid-column: 1 / -1; }
  .ai-acc-tick { flex-wrap: wrap; }
  .ai-pol { padding: 18px; }
  /* phone QA: tighter sections, readable scene text, touch-size controls */
  .pillar { padding: 80px 0; }
  .ai-switch button { height: 40px; }
  .ai-fl-play { height: 40px; }
  .cta { padding: 112px 0 128px; }
  .pillar-head, .ai-change-head, .ai-guide-head, .ai-mk-show .ai-mk-head { grid-template-columns: minmax(0, 1fr); }
  .pillar-head > *, .ai-change-head > *, .ai-guide-head > *, .ai-mk-head > * { grid-column: 1 / -1; }
  .ai-acts { flex-wrap: wrap; max-height: 120px; }
}

/* ---------- the mark: large, cycling through its states ---------- */
.ai-mk-show { padding-top: 112px; padding-bottom: 64px; }
.ai-mk-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: end; }
.ai-mk-head h2 { grid-column: 1 / span 6; }
.ai-mk-stage { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); align-items: center; border-top: 1px solid var(--line); padding-top: 48px; }
.ai-mk-big { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 16px; background: var(--bg-1); box-shadow: var(--glass); }
.ai-mk-big .ai-mark { --ai-mark-h: clamp(96px, 13vw, 168px); --ai-mark-size: var(--ai-mark-h); }
.ai-mk-list { list-style: none; margin: 0; padding: 0; }
.ai-mk-list li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 12px 0 12px 14px; border-left: 1px solid var(--line); color: var(--fg-4); transition: color .3s, border-color .3s; }
.ai-mk-list li b { font-weight: 500; color: var(--fg-3); transition: color .3s; }
.ai-mk-list li.on { border-left-color: var(--cu); color: var(--fg-2); }
.ai-mk-list li.on b { color: var(--fg-1); }
@media (max-width: 1024px) { .ai-mk-head h2, .ai-mk-show .ai-two { grid-column: 1 / -1; } .ai-mk-stage { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ai-mk-show { padding-top: 80px; padding-bottom: 40px; } .ai-mk-list li { grid-template-columns: 1fr; gap: 2px; } .ai-mk-stage { margin-top: 32px; padding-top: 32px; } }


/* ---------- Ask Enpasse (#ask): the chat panel and the six outcome lanes, ported from the old /ask/ page (prefix ai-ask-).
   One chat language: the question is quiet and right; the answer sits on the ground with no bubble; one run line (the AI mark,
   then what was searched); numbered sources in one row; two understated doors. ---------- */
.ai-ask-ttl { grid-column: 1 / span 6; display: grid; gap: 20px; }
.ai-ask-ttl .eyebrow { color: var(--fg-2); }
.ai-ask-row { margin-top: 64px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.ai-ask-live { grid-column: 1 / span 7; position: relative; height: 700px; padding: 8px; border-radius: 18px; background: linear-gradient(#ffffff1f, #ffffff08 40%, #ffffff03) border-box; box-shadow: var(--lift); isolation: isolate; }
:root[data-theme="light"] .ai-ask-live { background: linear-gradient(#0000001a, #0000000a 40%, #00000005); }
.ai-ask-panel { position: relative; height: 100%; min-width: 0; overflow: hidden; border-radius: 12px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-2); display: grid; grid-template-rows: 56px minmax(0, 1fr) auto; font-size: 13px; color: var(--fg-1); }
:root[data-theme="light"] .ai-ask-panel { background: #fff; }
.ai-ask-facts { grid-column: 8 / span 5; grid-row: 1 / span 2; list-style: none; margin: 0; padding: 8px 0 0; display: grid; }
.ai-ask-facts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); color: var(--fg-3); font-size: 15px; line-height: 1.6; }
.ai-ask-facts li:first-child { border-top: 0; padding-top: 0; }
.ai-ask-facts svg { width: 18px; height: 18px; margin-top: 3px; color: var(--fg-3); }
.ai-ask-facts b { display: block; color: var(--fg-1); font-weight: 500; }
.ai-ask-replay { margin-top: 12px; justify-self: start; }
.ai-ask-replay svg { width: 12px; height: 12px; margin-left: -2px; }
.ai-ask-two { grid-column: auto; margin-top: 112px; max-width: 760px; }
.ai-ask-cap { margin-top: 20px; max-width: 64ch; font-size: 14px; line-height: 1.6; color: var(--fg-4); }
.ai-ask-synth { grid-column: 1 / span 7; grid-row: 2; margin-top: 14px; font-size: 12px; color: var(--fg-4); }

/* ---------- the chat language ---------- */
/* the person's question: quiet, right, no border */
.ai-ask-q { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ai-ask-q p { max-width: 82%; padding: 9px 14px; border-radius: 14px; background: var(--bg-3); color: var(--fg-1); font-size: 13.5px; line-height: 1.5; }
:root[data-theme="light"] .ai-ask-q p { background: var(--bg-2); }
.ai-ask-ctx { font-size: 11.5px; color: var(--fg-4); padding-right: 4px; }

/* the run line: one line. While an answer is prepared, the mark at 20px works and the words name the step;
   then the mark settles small and the line becomes what was searched. */
.ai-ask-run { display: flex; align-items: center; gap: 10px; min-height: 24px; color: var(--fg-3); font-size: 12.5px; }
.ai-ask-av { width: 22px; height: 22px; flex: none; display: grid; place-items: center; transition: width .5s var(--ease-enter), height .5s var(--ease-enter); }
.ai-ask-av .ai-mark { --ai-mark-h: 11px; }
.ai-ask-run.live .ai-ask-av { width: 24px; height: 24px; }
.ai-ask-run.live .ai-ask-av .ai-mark { --ai-mark-h: 20px; }
.ai-ask-run.done { color: var(--fg-4); font-size: 12px; }
.ai-ask-run.done .ai-ask-av { width: 16px; height: 16px; }
.ai-ask-run.done .ai-ask-av .ai-mark { --ai-mark-h: 9px; }
.ai-ask-run-t { transition: opacity .25s; }
.ai-ask-run-t.swap { opacity: 0; }
.ai-ask-run.live .ai-ask-run-t { background: linear-gradient(90deg, var(--fg-3) 0 40%, var(--fg-1) 50%, var(--fg-3) 60% 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ai-ask-shine 2.4s linear infinite; }
@keyframes ai-ask-shine { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* the answer: plain text on the ground, with small numbered markers */
.ai-ask-text { display: grid; gap: 6px; color: var(--fg-1); font-size: 14px; line-height: 1.7; }
.ai-ask-text b { font-weight: 560; }
.ai-ask-text .w { opacity: 0; transition: opacity .25s; }
.ai-ask-text .w.on { opacity: 1; }
.ai-ask-n { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; margin: 0 1px; border-radius: 5px; vertical-align: 1px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; font-weight: 500; line-height: 1; color: var(--fg-3); background: var(--bg-3); transition: color .3s, background .3s; }
.ai-ask-n.hot { color: var(--cu); background: var(--cu-tint); }

/* sources: one tidy numbered row */
.ai-ask-cites { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-ask-cite { height: 26px; padding: 0 9px 0 4px; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12px; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-3); transition: color .4s, box-shadow .4s, background .4s, opacity .4s; }
.ai-ask-cite b { display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 5px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; font-weight: 500; color: var(--fg-3); background: var(--bg-3); }
.ai-ask-cite.hot { color: var(--fg-1); background: var(--cu-tint); box-shadow: inset 0 0 0 1px var(--cu-line); }
.ai-ask-cite.hot b { color: var(--cu); background: transparent; }
.ai-ask-cite.chk { color: var(--fg-4); }
.ai-ask-ok { width: 10px; height: 10px; position: relative; display: inline-block; flex: none; }
.ai-ask-ok::after { content: ""; position: absolute; left: 3px; top: 0; width: 3.5px; height: 7px; border: solid var(--ok); border-width: 0 1.4px 1.4px 0; transform: rotate(45deg); transition: opacity .3s; }
.ai-ask-cite.chk .ai-ask-ok::after { opacity: 0; }
.ai-ask-cite.chk .ai-ask-ok { border-radius: 999px; box-shadow: inset 0 0 0 1.2px var(--fg-4); animation: ai-ask-pulse 1.2s ease-in-out infinite; }
@keyframes ai-ask-pulse { 50% { opacity: .35; } }

/* doors: understated, text with a chevron */
.ai-ask-doors { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ai-ask-door { display: inline-flex; align-items: center; gap: 7px; height: 28px; font-size: 12.5px; font-weight: 500; color: var(--fg-2); white-space: nowrap; transition: color .3s; }
.ai-ask-door::after { content: ""; width: 5px; height: 5px; border: solid currentColor; border-width: 1.3px 1.3px 0 0; transform: rotate(45deg); opacity: .6; }
.ai-ask-door.on, .ai-ask-door.press { color: var(--cu); }

/* one exchange */
.ai-ask-x { display: grid; gap: 18px; }
.ai-ask-a { display: grid; gap: 16px; }

/* panel header: a name and two quiet icons */
.ai-ask-ph { padding: 0 16px 0 28px; display: flex; align-items: center; gap: 4px; }
.ai-ask-ph b { margin-right: auto; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.ai-ask-ph-i { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--fg-4); }
.ai-ask-ph-i svg { width: 15px; height: 15px; }

/* two views share the body: the thread, and a passage that slides in over it */
.ai-ask-views { position: relative; overflow: hidden; }
.ai-ask-thread { position: absolute; inset: 0; padding: 20px 28px 32px; overflow: hidden; display: flex; flex-direction: column; gap: 44px; transition: transform .6s var(--ease-enter), opacity .5s; -webkit-mask: linear-gradient(transparent, #000 24px); mask: linear-gradient(transparent, #000 24px); }
.ai-ask-views.pass .ai-ask-thread { transform: translateX(-10%); opacity: 0; }
.ai-ask-thread > * { flex: none; }
.ai-ask-in { animation: ai-ask-in .55s var(--ease-enter) both; }
@keyframes ai-ask-in { from { opacity: 0; transform: translateY(8px); } }

/* the empty chat */
.ai-ask-empty { margin-top: auto; display: grid; gap: 20px; padding-bottom: 4px; }
.ai-ask-empty > .ai-mark { --ai-mark-h: 14px; }
.ai-ask-intro { max-width: 36ch; color: var(--fg-3); font-size: 13px; line-height: 1.6; }
.ai-ask-sugg { display: grid; }
.ai-ask-sugg span { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line-2); color: var(--fg-2); transition: color .2s; }
.ai-ask-sugg span::after { content: ""; flex: none; width: 5px; height: 5px; margin-right: 4px; border: solid var(--fg-4); border-width: 1.3px 1.3px 0 0; transform: rotate(45deg); }
.ai-ask-sugg span.press { color: var(--fg-1); }

/* passage view */
.ai-ask-passage { position: absolute; inset: 0; background: var(--bg-1); transform: translateX(100%); transition: transform .6s var(--ease-enter); display: flex; flex-direction: column; padding: 4px 28px 24px; gap: 18px; }
:root[data-theme="light"] .ai-ask-passage { background: #fff; }
.ai-ask-views.pass .ai-ask-passage { transform: none; }
.ai-ask-back { height: 32px; display: flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: 12.5px; }
.ai-ask-back svg { width: 14px; height: 14px; }
.ai-ask-back.press { color: var(--fg-1); }
.ai-ask-pass-h { display: flex; gap: 12px; align-items: flex-start; }
.ai-ask-pass-h .ai-ask-n { margin-top: 2px; color: var(--cu); background: var(--cu-tint); }
.ai-ask-pass-h b { font-weight: 500; font-size: 14px; }
.ai-ask-pass-id { margin-top: 3px; color: var(--fg-3); font-size: 12px; }
.ai-ask-pass-paper .ap-paper { margin: 0; padding: 18px 18px 14px; font-size: 13.5px; }
.ai-ask-pass-check { display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-size: 12.5px; }
.ai-ask-pass-acts { display: flex; gap: 18px; }

/* composer: one calm field */
.ai-ask-comp { padding: 12px 20px 20px; }
.ai-ask-comp-in { min-height: 48px; padding: 0 8px 0 10px; border-radius: 14px; display: flex; align-items: center; gap: 10px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
:root[data-theme="light"] .ai-ask-comp-in { background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); }
.ai-ask-comp-pill { height: 22px; padding: 0 7px; border-radius: 6px; display: inline-flex; align-items: center; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--line-3); flex: none; white-space: nowrap; }
.ai-ask-comp-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; color: var(--fg-1); }
.ai-ask-ph-t { color: var(--fg-4); }
.ai-ask-comp-t .caret::after { content: ""; display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--fg-1); animation: blink 1s steps(1) infinite; }
.ai-ask-at { color: var(--fg-4); font-size: 14px; flex: none; }
.ai-ask-send { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; color: var(--fg-4); background: var(--bg-3); transition: background .2s, color .2s, transform .15s; flex: none; }
.ai-ask-send svg { width: 13px; height: 13px; }
.ai-ask-send.ready { background: var(--inv); color: var(--inv-fg); }
.ai-ask-send.press { transform: scale(.88); }
.ai-ask-cursor { z-index: 30; }

/* ---------- 3: the sorter, six lanes and one exchange ---------- */
.ai-ask-sorter { margin-top: 80px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ai-ask-lanes { display: grid; border-right: 1px solid var(--line); }
.ai-ask-lane { position: relative; height: 92px; padding: 0 0 0 4px; display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 16px; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.ai-ask-lane:last-child { border-bottom: 0; }
.ai-ask-lane::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; background: var(--cu); opacity: 0; transition: opacity .3s; }
.ai-ask-lane[aria-selected="true"]::before { opacity: 1; }
.ai-ask-lane-h { padding-left: 16px; display: grid; gap: 3px; }
.ai-ask-lane-h b { font-size: 15px; font-weight: 500; color: var(--fg-2); transition: color .3s; }
.ai-ask-lane-h small { font-size: 12.5px; color: var(--fg-4); }
.ai-ask-lane[aria-selected="true"] .ai-ask-lane-h b, .ai-ask-lane:hover .ai-ask-lane-h b { color: var(--fg-1); }
.ai-ask-lane:focus-visible { outline-offset: -2px; }
/* each lane is a track of real-looking questions drifting toward its shape */
.ai-ask-lane-t { position: relative; height: 100%; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 72%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 72%, transparent); }
.ai-ask-lane-r { position: absolute; top: 50%; left: 0; display: flex; gap: 10px; padding-right: 10px; white-space: nowrap; transform: translate(-50%, -50%); animation: ai-ask-drift var(--dur, 60s) linear infinite; animation-play-state: var(--play, running); }
.ai-ask-lane-r span { height: 28px; padding: 0 11px; border-radius: 9px; display: inline-flex; align-items: center; font-size: 12px; color: var(--fg-4); background: var(--bg-2); transition: color .3s, background .3s; }
.ai-ask-lane[aria-selected="true"] .ai-ask-lane-r span { color: var(--fg-2); background: var(--bg-3); }
@keyframes ai-ask-drift { from { transform: translate(-50%, -50%); } to { transform: translate(0, -50%); } }
.ai-ask-ex { position: relative; min-height: 552px; padding: 44px 0 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.ai-ask-ex .ai-ask-x { animation: ai-ask-in .6s var(--ease-enter) both; }
.ai-ask-flag { padding: 12px 14px; border-radius: 10px; background: var(--cu-tint-2); box-shadow: inset 0 0 0 1px var(--cu-line); color: var(--fg-2); font-size: 13px; line-height: 1.55; }
.ai-ask-flag b { font-weight: 560; color: var(--fg-1); display: block; margin-bottom: 2px; }
.ai-ask-sorter { margin-top: 48px; }
.ai-ask-lane { height: 76px; }
.ai-ask-ex { min-height: 456px; padding-top: 32px; padding-bottom: 32px; }

@media (max-width: 1100px) { .ai-ask-lane { grid-template-columns: 170px minmax(0, 1fr); } }
@media (max-width: 1024px) {
  .ai-ask-ttl, .ai-ask-live, .ai-ask-facts, .ai-ask-synth { grid-column: 1 / -1; grid-row: auto; }
  .ai-ask-facts { margin-top: 48px; padding-top: 0; }
}
@media (max-width: 900px) {
  .ai-ask-sorter { grid-template-columns: 1fr; }
  .ai-ask-lanes { border-right: 0; border-bottom: 1px solid var(--line); }
  .ai-ask-ex { padding-left: 0; }
}
@media (max-width: 768px) {
  .ai-ask-row { margin-top: 40px; }
  .ai-ask-live { height: 620px; padding: 6px; }
  .ai-ask-thread { padding: 16px 18px 24px; }
  .ai-ask-ph { padding-left: 18px; }
  .ai-ask-comp { padding: 10px 12px 14px; }
  .ai-ask-passage { padding: 4px 18px 20px; }
  .ai-ask-facts li { font-size: 15px; padding: 16px 0; }
  .ai-ask-replay { min-height: 44px; }
  .ai-ask-two { margin-top: 72px; font-size: 19px; }
  .ai-ask-lane { height: auto; padding: 14px 0; grid-template-columns: 1fr; gap: 10px; }
  .ai-ask-lane-t { height: 30px; }
  .ai-ask-lane::before { top: 14px; bottom: 14px; }
  .ai-ask-ex { padding: 28px 0 32px; min-height: 0; order: -1; border-bottom: 1px solid var(--line); }
  .ai-ask-lanes { border-bottom: 0; }
  .ai-ask-q p { font-size: 14px; }
  .ai-ask-ctx, .ai-ask-run.done, .ai-ask-cite, .ai-ask-door { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-ask-cite.chk .ai-ask-ok, .ai-ask-lane-r, .ai-ask-run.live .ai-ask-run-t { animation: none; }
  .ai-ask-run.live .ai-ask-run-t { color: var(--fg-3); background: none; }
}
.ai-ask-facts li.ai-ask-go { display: block; border-top: 0; padding: 8px 0 0; }

/* ---------- the workflow, already built: an exploded view of the structure around the model ---------- */
.ai-wf { padding: 96px 0; }
/* the guide now runs straight into the mark, without the old card row between */
.ai-guide + .ai-mk-show { padding-top: 8px; }
.ai-wf-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: calc(var(--gutter) * 2); align-items: start; }
.ai-wf-fig { margin: 0; position: sticky; top: 96px; }
.ai-wf-art { position: relative; border-radius: 20px; padding: 28px 12px 16px; background: radial-gradient(70% 60% at 50% 46%, var(--bg-1), transparent 80%); }
.wf-svg { display: block; width: 100%; height: auto; max-height: 720px; overflow: visible; }
.wf-svg * { vector-effect: non-scaling-stroke; transition: fill .6s var(--ease-enter), stroke .6s var(--ease-enter), opacity .6s var(--ease-enter); }
.wf-face { fill: var(--bg-2); fill-opacity: .9; stroke: var(--line-3); stroke-width: 1; }
.wf-ln { stroke: var(--fg-4); stroke-width: 1.5; stroke-linecap: round; fill: none; opacity: .55; }
.wf-tile { fill: var(--bg-4); }
.wf-msk, .wf-chip, .wf-mark, .wf-av { fill: var(--bg-4); }
.wf-page { fill: none; stroke: var(--line-3); }
.wf-flag { fill: var(--fg-4); }
.wf-thread { fill: none; stroke: var(--fg-4); stroke-width: 1; opacity: .5; }
.wf-box { fill: none; stroke: var(--fg-4); }
.wf-tick { fill: none; stroke: var(--fg-4); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .4; }
.wf-dot { fill: var(--fg-4); }
.wf-lead { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 2 3; }
.wf-badge circle { fill: var(--bg-1); stroke: var(--line-3); }
.wf-badge text { font: 500 14px/1 "Geist", system-ui, sans-serif; fill: var(--fg-3); }
.wf-axis { stroke: var(--line-3); stroke-dasharray: 1 5; stroke-linecap: round; }
.wf-hf { fill: none; stroke: var(--fg-4); stroke-dasharray: 4 5; opacity: .5; }
.wf-hl { stroke: var(--fg-4); stroke-dasharray: 4 5; opacity: .35; }
.wf-hl.back { opacity: .18; }
.wf-cs { fill: var(--bg-3); stroke: var(--cu-line); }
.wf-cs.r { fill: var(--bg-4); }
.wf-ct { fill: var(--cu-tint); stroke: var(--cu); }
.wf-tok { opacity: 0; transition: transform 1s var(--ease-enter), opacity .4s; }
.wf-tok path { stroke: var(--cu); stroke-width: 2; stroke-linecap: round; opacity: .45; }
.wf-tok circle { fill: var(--cu); }
/* a layer lights while the task passes it */
.wf-pl.on .wf-face { fill: var(--bg-3); fill-opacity: .96; stroke: var(--fg-4); }
.wf-pl.on .wf-ln { stroke: var(--fg-2); opacity: .8; }
.wf-pl.on .wf-tile { fill: var(--bg-3); }
.wf-pl.on .wf-tile.hot { fill: var(--fg-2); fill-opacity: .8; }
.wf-pl.on .wf-chip, .wf-pl.on .wf-mark, .wf-pl.on .wf-dot.hot { fill: var(--fg-2); }
.wf-pl.on .wf-page, .wf-pl.on .wf-box { stroke: var(--fg-3); }
.wf-pl.on .wf-ln.flag { stroke: var(--amber); }
.wf-pl.on .wf-flag { fill: var(--amber); }
.wf-pl.on .wf-thread { stroke: var(--fg-2); opacity: .9; }
.wf-pl.on .wf-av { fill: var(--fg-3); }
.wf-pl.on .wf-tick { stroke: var(--ok); opacity: 1; }
.wf-pl.on .wf-dot { fill: var(--fg-2); }
.wf-pl.on .wf-lead, .wf-hs.on .wf-lead { stroke: var(--fg-4); stroke-dasharray: none; }
.wf-pl.on .wf-badge circle, .wf-hs.on .wf-badge circle { fill: var(--bg-3); stroke: var(--fg-3); }
.wf-pl.on .wf-badge text, .wf-hs.on .wf-badge text { fill: var(--fg-1); }
.wf-hs.on .wf-hf, .wf-hs.on .wf-hl { stroke: var(--fg-3); opacity: .7; }
.wf-hs.on .wf-hl.back { opacity: .35; }
.wf-core.on .wf-core.on .wf-ct { fill: var(--cu); }
.wf-core.on .wf-cs { stroke: var(--cu); fill: var(--cu-tint); }
.wf-core.on .wf-cs.r { fill: var(--cu-tint-2); }
/* one layer picked: the others step back */
.ai-wf.pick .wf-pl:not(.on) { opacity: .45; }

.ai-wf-cap { margin-top: 14px; max-width: 46ch; color: var(--fg-3); font-size: 14px; line-height: 1.55; }
.ai-wf-cap b { color: var(--fg-1); font-weight: 500; }
.ai-wf-copy { padding-top: 12px; }
.ai-wf-lede { margin-top: 20px; color: var(--fg-3); font-size: 16px; line-height: 1.6; max-width: 44ch; }
.ai-wf-lede b { color: var(--fg-1); font-weight: 500; }
.ai-wf-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.ai-wf-list li { border-bottom: 1px solid var(--line-2); }
.ai-wf-list button { all: unset; box-sizing: border-box; width: 100%; min-height: 44px; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding: 11px 0; cursor: pointer; border-radius: 8px; }
.ai-wf-list button:focus-visible { outline: 2px solid var(--fg-2); outline-offset: 2px; }
.ai-wf-list .n { width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--line-3); transition: color .4s, background .4s, box-shadow .4s; }
.ai-wf-list .t b { display: block; font-size: 15px; font-weight: 500; color: var(--fg-2); transition: color .4s; }
.ai-wf-list .t span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.55; color: var(--fg-4); transition: color .4s; }
.ai-wf-list button.on .n { color: var(--fg-1); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--fg-4); }
.ai-wf-list button.on .t b { color: var(--fg-1); }
.ai-wf-list button.on .t span { color: var(--fg-3); }
@media (any-hover: hover) { .ai-wf-list button:hover .t b { color: var(--fg-1); } }
.ai-wf-two { margin-top: 48px; max-width: 860px; }
.ai-wf-two a { display: inline-block; padding: 9px 0; margin: -9px 0; color: var(--fg-1); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
@media (any-hover: hover) { .ai-wf-two a:hover { text-decoration-color: var(--fg-2); } }

:root[data-theme="light"] .wf-face { fill: var(--bg); }
:root[data-theme="light"] .wf-pl.on .wf-face { fill: var(--bg-2); }
@media (max-width: 1024px) {
  .ai-wf { padding: 96px 0; }
  .ai-wf-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .ai-wf-copy { order: -1; padding-top: 0; }
  .ai-wf-fig { position: relative; top: 0; max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 760px) {
  .ai-wf { padding: 80px 0; }
  .ai-wf-art { padding: 16px 0 8px; }
  .wf-badge text { font-size: 15px; }
  /* the list sits beside the picture on phones as one reading order: heading, picture, then the layers */
  .ai-wf-copy { display: contents; }
  .ai-wf-grid { row-gap: 0; }
  .ai-wf-copy h2 { order: -3; }
  .ai-wf-lede { order: -2; margin-bottom: 28px; }
  .ai-wf-fig { order: -1; }
  .ai-wf-list { margin-top: 28px; }
  .ai-wf-two { margin-top: 48px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .wf-svg *, .wf-tok { transition: none; } }


/* ================= integration pass (24 Oct): calmer, AI-only copper, shared motion tokens ================= */
/* hero: the ocean runs at under half speed (data-fx-speed, driven in ai.js) and sits further back */
.ai-sea { opacity: .4; }
.ai-sea::before { opacity: .3; }
.ai-sea canvas { transition: opacity 1.2s var(--ease-spring); }
:root[data-theme="light"] .ai-sea { opacity: .55; filter: invert(1) grayscale(.35) contrast(1.15); mix-blend-mode: multiply; }
:root[data-theme="light"] .ai-hero .halo { opacity: .85; }

/* trace: the cited log lines, as a dark source excerpt */
.ai-log { margin: 22px 22px; padding: 14px 0; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.9; letter-spacing: 0; }
.ai-log p { margin: 0; padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-log p + p { margin: 0; }
.ai-log .n { display: inline-block; width: 34px; color: var(--fg-4); }
.ai-log .ln { margin: 10px 14px; }
.ai-gapline { margin: 14px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--amber); opacity: 0; transition: opacity var(--dur-enter) var(--ease-spring); }
.ai-gapline svg { width: 13px; height: 13px; flex: none; }
.ai-card.in .ai-gapline { opacity: 1; transition-delay: 1.4s; }

/* copper only where the AI acts: steps, rails and workflow layers go grey; the model core keeps a copper outline */
.ai-steps span.done { color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--line-3); }
.ai-steps span.on { color: var(--fg-1); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--fg-4); }
.ai-rail li.on i { background: var(--fg-2); box-shadow: 0 0 0 3px var(--bg-3); }
.ai-wf-list button.on .n { color: var(--fg-1); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--fg-4); }
:root[data-theme="light"] .wf-pl.on .wf-face { fill: var(--bg-1); }

/* flow: one lane moves at a time; the resting lane steps back */
.ai-fl-lane { transition: opacity var(--dur-swap) var(--ease-swap), filter var(--dur-swap) var(--ease-swap); }
.ai-flow[data-lane="ai"] .ai-fl-lane.wa, .ai-flow[data-lane="wa"] .ai-fl-lane[data-lane="ai"] { opacity: .42; filter: saturate(0); }
.ai-fl-gl.hot > i { box-shadow: none; }

/* Ask: no click ripple; the reading shimmer rests a quarter of each cycle; only the chosen lane drifts */
.ai-ask-run.live .ai-ask-run-t { animation: ai-ask-shine2 2.4s var(--ease-linear) infinite; }
@keyframes ai-ask-shine2 { 0% { background-position: 100% 0; } 75%, 100% { background-position: -50% 0; } }
.ai-ask-cite.chk .ai-ask-ok { animation: none; box-shadow: inset 0 0 0 1.2px var(--fg-3); }
.ai-ask-lane-t { -webkit-mask: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
.ai-ask-lane:not([aria-selected="true"]) .ai-ask-lane-r { animation-play-state: paused; }
.ai-ask-lane::before { background: var(--fg-2); }

/* provider notice: grey bars, amber only where a client was not told */
.ai-lane-bar i { background: color-mix(in srgb, var(--fg-3) 55%, transparent); }
.ai-lane.end .ai-lane-bar i.ok { background: color-mix(in srgb, var(--fg-2) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .ai-fl-lane { transition: none; } .ai-gapline { opacity: 1; transition: none; } }

/* ---------- minimal pass (24 Oct): suggested text is copper, cited text sits on a white page ---------- */
/* Drafted findings are a .doc-page: copper while suggested, the normal surface once accepted. Never white. */
.ai-sheet.doc-page { font-family: "Geist", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.006em; margin-top: 12px; padding: 14px 16px; border-radius: 7px; font-size: 13.5px; line-height: 1.7; }
.ai-sheet p { line-height: 1.7; }
.ai-sheet p + p { margin-top: 6px; }
/* Suggested span: a thin copper underline while it waits; it goes once a person accepts. */
.ai-sg { padding-bottom: 1px; background: linear-gradient(color-mix(in srgb, var(--cu) 75%, transparent), color-mix(in srgb, var(--cu) 75%, transparent)) no-repeat 0 100% / 100% 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .6s var(--ease-spring); }
.ai-card.done .ai-sg, .ai-fl-card.decided .ai-sg, .accepted .ai-sg { background-size: 0% 1px; }
/* Compact chips on the drafted page: id only, detail on hover. */
.ai-sheet .ai-chip { height: 18px; padding: 0 5px; border-radius: 4px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-2); font-size: 10.5px; }
.ai-sheet .ai-chip.hot { background: var(--cu-tint); box-shadow: inset 0 0 0 1px var(--cu-line); color: var(--cu); }
.ai-sheet .ai-chip.on svg { color: var(--ok); }
/* Quieter suggestion card: neutral chrome, copper only in the mark, the title and the underline. */
.ai-card { background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); padding: 14px 16px; border-radius: 12px; }
.ai-card.done { background: var(--bg-1); }
.ai-card-h { padding-bottom: 0; border-bottom: 0; }
.ai-card-h .r b { color: var(--fg-1); font-weight: 500; }
.ai-acts { padding-top: 12px; }
.ai-gapline { color: var(--cu); }
.ai-gapline .ap-key { margin-left: 2px; }
.ai-stamp { align-items: center; }
.ai-stamp > span:not(.ap-av) b { margin-right: 6px; }
.ai-stamp small, .ai-acc-stamp small { margin-left: auto; color: var(--fg-3); font-size: 12px; }
.ai-acc-stamp { align-items: center; }
.ai-acc-stamp > span:not(.ap-av) b { margin-right: 6px; }
.ai-said .r { margin-left: auto; }
.ai-fl-gap { color: var(--cu); }
.ai-fl-found.ai-sheet { min-height: 0; font-size: 12.5px; line-height: 1.6; padding: 10px 12px; }
.ai-fl-stamp b { margin-right: 6px; }
/* follow-up (24 Oct): depth kept, quieter; amber only for what is due */
.ai-gapline .q { color: var(--fg-3); margin-left: 4px; }
.ai-st { display: inline-flex; align-items: center; vertical-align: -2px; margin-left: 6px; cursor: default; }
.ai-st .ai-mark { --ai-mark-h: 12px; }
.ai-need .r { display: inline-flex; align-items: center; }
.ai-mode-f > span:first-child { color: var(--fg-4); font-size: 12px; }
.ai-fl-rule { color: var(--fg-4); }
.ai-lane-st.wait { color: var(--fg-2); background: var(--bg-3); }
.ai-lane.end .ai-lane-bar i.wait { background: color-mix(in srgb, var(--fg-3) 40%, transparent); }

/* ---------- review at list speed: list, white page, properties (Linear frame: hairlines to the edges, no glow) ---------- */
.ai-rv { margin-top: 56px; border-radius: 12px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3); overflow: hidden; font-size: 13px; color: var(--fg-2); }
.ai-rv-top { height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.ai-rv-crumb { display: flex; gap: 8px; align-items: center; color: var(--fg-3); white-space: nowrap; }
.ai-rv-crumb i { font-style: normal; color: var(--fg-4); }
.ai-rv-crumb b { color: var(--fg-1); font-weight: 500; }
.ai-rv-filt { display: flex; gap: 4px; margin-left: 8px; }
.ai-rv-filt > span { height: 24px; padding: 0 9px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: 12px; }
.ai-rv-filt > span.on { background: var(--bg-3); color: var(--fg-1); }
.ai-rv-filt .ai-mark { --ai-mark-h: 11px; }
.ai-rv-prog { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: 12px; }
.ai-rv-prog svg { width: 14px; height: 14px; transform: rotate(-90deg); }
.ai-rv-prog .t { fill: none; stroke: var(--line-3); stroke-width: 2; }
.ai-rv-prog .p { fill: none; stroke: var(--fg-2); stroke-width: 2; stroke-dasharray: 28.6 100; transition: stroke-dasharray .6s var(--ease-swap); }
.ai-rv-prog b { color: var(--fg-1); font-weight: 500; font-variant-numeric: tabular-nums; }
.ai-rv-body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 248px); min-height: 480px; }
.ai-rv-list { list-style: none; margin: 0; padding: 6px 0; border-right: 1px solid var(--line); }
.ai-rv-g { height: 32px; padding: 0 16px; display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: 12px; }
.ai-rv-r { position: relative; height: 36px; padding: 0 16px; display: grid; grid-template-columns: 16px 66px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--fg-2); white-space: nowrap; transition: background var(--dur-hover), color var(--dur-hover); }
.ai-rv-r .k { font-family: "Geist Mono", monospace; font-size: 11.5px; color: var(--fg-3); }
.ai-rv-r .t { overflow: hidden; text-overflow: ellipsis; }
.ai-rv-r.on { background: var(--bg-3); color: var(--fg-1); }
.ai-rv-r.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--fg-2); }
.ai-rv-r.more { color: var(--fg-4); }
/* status icons, word on hover */
.ai-si { width: 14px; height: 14px; display: grid; place-items: center; }
.ai-si svg { width: 14px; height: 14px; }
.ai-si .ai-mark { --ai-mark-h: 12px; }
.ai-si.acc svg circle { fill: var(--fg-2); } .ai-si.acc svg path { stroke: var(--bg-1); }
.ai-si.none svg circle { fill: none; stroke: var(--fg-4); stroke-width: 1.4; }
.ai-si.gap svg circle { fill: none; stroke: var(--fg-3); stroke-width: 1.4; stroke-dasharray: 2.2 2.2; }
.ai-si.pop { animation: ai-si-pop .45s var(--ease-spring); }
@keyframes ai-si-pop { from { transform: scale(.6); opacity: .2; } to { transform: none; opacity: 1; } }
/* the document */
.ai-rv-doc { padding: 22px 28px 20px; min-width: 0; display: flex; flex-direction: column; }
.ai-rv-dh { display: flex; align-items: center; gap: 10px; }
.ai-rv-dh b { color: var(--fg-1); font-weight: 560; font-size: 16px; letter-spacing: -0.01em; }
.ai-rv-proc { margin-top: 8px; display: flex; align-items: center; gap: 10px; color: var(--fg-3); font-size: 12.5px; }
.ai-rv-proc .r { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--cu); }
.ai-rv-proc .r.q { color: var(--fg-3); }
.ai-rv-proc .ai-mark { --ai-mark-h: 12px; }
.ai-rv-sheet { margin-top: 16px; min-height: 132px; font-size: 14px; line-height: 1.75; }
.ai-rv-sheet p { margin: 0; }
.ai-rv-sheet p + p { margin-top: 8px; }
.ai-rv-sheet .s { opacity: 0; filter: blur(3px); transition: opacity .5s var(--ease-spring), filter .5s var(--ease-spring); }
.ai-rv-sheet .s.in { opacity: 1; filter: none; }
.ai-rv-sheet .ai-sg { background-size: 0% 1px; transition: background-size .7s var(--ease-swap); }
.ai-rv-sheet .s.in .ai-sg { background-size: 100% 1px; }
.ai-rv-sheet.acc .s.in .ai-sg { background-size: 0% 1px; background-position: 100% 100%; }
.ai-rv-sheet .ai-chip { opacity: 0; transition: opacity .3s .35s; }
.ai-rv-sheet .s.in .ai-chip { opacity: 1; }
.ai-rv-gap { margin-top: 12px; display: none; align-items: center; gap: 8px; color: var(--cu); font-size: 12.5px; }
.ai-rv-gap.on { display: flex; animation: ai-fl-in .5s var(--ease-enter); }
.ai-rv-gap svg { width: 13px; height: 13px; }
.ai-rv-gap .q { color: var(--fg-3); }
.ai-rv-gap .ap-btn { margin-left: auto; }
.ai-rv-keys { margin-top: 16px; display: flex; gap: 14px; align-items: center; color: var(--fg-3); font-size: 12px; }
.ai-rv-keys .sp { flex: 1; }
.ai-rv-keys > span { display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-hover); }
.ai-rv-keys kbd { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; display: inline-grid; place-items: center; font-family: "Geist Mono", monospace; font-size: 11px; color: var(--fg-2); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3), inset 0 -1px 0 var(--line-3); transition: transform .12s, background .12s, color .12s; }
.ai-rv-keys > span.press { color: var(--fg-1); }
.ai-rv-keys > span.press kbd { transform: translateY(1px); background: var(--fg-1); color: var(--bg); }
.ai-rv-hist { list-style: none; margin: auto 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 8px; }
.ai-rv-hist li { display: flex; align-items: center; gap: 10px; color: var(--fg-3); font-size: 12px; animation: ai-fl-in .45s var(--ease-enter); }
.ai-rv-hist li b { color: var(--fg-2); font-weight: 500; }
.ai-rv-hist li time { margin-left: auto; color: var(--fg-4); }
.ai-rv-hist .ai-mark { --ai-mark-h: 12px; }
.ai-rv-hist .ap-av.round { width: 18px; height: 18px; font-size: 8px; }
/* properties */
.ai-rv-props { margin: 0; padding: 18px 16px; border-left: 1px solid var(--line); display: grid; align-content: start; gap: 14px; }
.ai-rv-props > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 22px; }
.ai-rv-props dt { color: var(--fg-3); font-size: 12px; }
.ai-rv-props dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--fg-1); font-size: 12.5px; }
.ai-rv-props dd .q { color: var(--fg-3); }
.ai-rv-props dd .ai-mark { --ai-mark-h: 12px; }
.ai-rv-props dd .ap-av.round { width: 18px; height: 18px; font-size: 8px; }
.ai-rv-props .ai-chip { background: var(--bg-2); }
.ai-rv-props dd.flash { animation: ai-rv-flash .6s var(--ease-swap); }
@keyframes ai-rv-flash { from { opacity: .2; } to { opacity: 1; } }
:root[data-theme="light"] .ai-rv { background: #fff; }
@media (max-width: 1024px) { .ai-rv-body { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); } .ai-rv-props { display: none; } }
@media (max-width: 720px) {
  .ai-rv-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ai-rv-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .ai-rv-r[data-i="0"], .ai-rv-r[data-i="1"], .ai-rv-r[data-i="6"] { display: none; }
  .ai-rv-filt, .ai-rv-crumb span:first-child, .ai-rv-crumb i:first-of-type { display: none; }
  .ai-rv-doc { padding: 18px 16px; }
  .ai-rv-hint { display: none; }
  .ai-rv-hist { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .ai-rv-sheet .s, .ai-rv-sheet .ai-sg { transition: none; } }

/* ================= Invention round: ask again; suggestions stack, never overwritten ================= */
.ai-sk { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; align-items: start; }
.ai-sk-lbl { font-size: 12.5px; color: var(--fg-3); margin-bottom: 10px; }
.ai-sk-file .src-excerpt p.h { font-weight: 600; }
.ai-sk-was { margin-top: 10px; font-size: 12.5px; color: var(--fg-4); }
.ai-sk-main { border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 30px 80px #0000004d; overflow: hidden; font-size: 13px; }
:root[data-theme="light"] .ai-sk-main { background: #fff; box-shadow: inset 0 0 0 1px #00000014, 0 20px 60px #00000014; }
.ai-sk-h { height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); }
.ai-sk-h b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-sk-h .r { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: 12.5px; --ai-mark-h: 12px; white-space: nowrap; }
.ai-sk-stack { position: relative; margin: 24px 16px 0; height: 200px; }
.ai-sk-card { position: absolute; left: 0; right: 0; top: 0; padding: 12px; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3), 0 12px 30px #0000003d; transform-origin: 50% 0; transition: transform .7s var(--ease-swap), opacity .7s var(--ease-swap), filter .7s var(--ease-swap); }
:root[data-theme="light"] .ai-sk-card { background: var(--bg-1); box-shadow: inset 0 0 0 1px #00000014, 0 10px 24px #0000000f; }
.ai-sk-ch { display: flex; align-items: center; margin-bottom: 8px; } .ai-sk-ch .r { margin-left: auto; color: var(--fg-3); font-size: 12px; }
.ai-sk-card .doc-page { font-size: 14px; line-height: 1.75; } .ai-sk-card .doc-page b { font-weight: 600; }
.ai-sk-ch .r { display: grid; } .ai-sk-ch .r > * { grid-area: 1 / 1; text-align: right; transition: opacity var(--dur-enter); }
.ai-sk-old { opacity: 0; color: var(--fg-2); }
.ai-sk.asked .ai-sk-card[data-n="1"] .d { opacity: 0; }
/* the new card waits below, out of sight; asked again, the old card steps back and the new one arrives in front */
.ai-sk-card.next { opacity: 0; filter: blur(6px); transform: translateY(26px); }
.ai-sk.asked .ai-sk-card[data-n="1"] { transform: translateY(-14px) scale(.94); opacity: .55; z-index: 0; }
.ai-sk.asked .ai-sk-card[data-n="1"] .sugg { background-size: 0% 1px; }
.ai-sk.asked .ai-sk-card[data-n="1"] .ai-mark { opacity: .4; }
.ai-sk.asked .ai-sk-card[data-n="1"] .ai-sk-old { opacity: 1; }
.ai-sk.asked .ai-sk-card[data-n="1"] .sugg-by { color: var(--fg-3); }
.ai-sk.landed .ai-sk-card.next { opacity: 1; filter: none; transform: translateY(52px); z-index: 1; }
.ai-sk.landed .ai-sk-card[data-n="1"] { transform: translateY(-4px) scale(.94); }
.ai-sk-f { margin-top: 16px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line-2); color: var(--fg-3); font-size: 12.5px; }
.ai-sk-f .r { margin-left: auto; }
.ai-sk-f button { border: 0; font: inherit; font-size: 12.5px; cursor: pointer; --ai-mark-h: 12px; }
.ai-sk-f button:disabled { opacity: .45; cursor: default; }
.ai-sk-f button:focus-visible { outline: 2px solid var(--fg-2); outline-offset: 2px; }
@media (max-width: 900px) { .ai-sk { grid-template-columns: minmax(0, 1fr); } .ai-sk-stack { height: 214px; } }
@media (prefers-reduced-motion: reduce) { .ai-sk-card { transition: none; } }

/* ================= Invention round: a file's words stay evidence ================= */
.ai-ij { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.ai-ij-page { position: relative; padding: 14px 20px 18px 54px; }
.ai-ij-page .src-excerpt-h { margin: -14px -20px 14px -54px; padding: 10px 20px; }
.ai-ij-lines { margin: 0; padding: 0; list-style: none; counter-reset: ln; font-size: 15px; line-height: 1.6; }
.ai-ij-lines li { counter-increment: ln; position: relative; padding: 5px 0; color: #a1a4aa; transition: color .3s var(--ease-swap); }
.ai-ij-lines li::before { content: counter(ln); position: absolute; left: -38px; width: 22px; text-align: right; font-family: "Geist Mono", monospace; font-size: 11.5px; color: #c4c6ca; line-height: 24px; }
.ai-ij-lines li.read { color: #111113; }
.ai-ij-lines li:first-child { font-weight: 600; }
.ai-ij-lines li[data-flag] { margin: 4px -10px; padding: 5px 10px; border-radius: 5px; transition: color .3s var(--ease-swap), background .4s var(--ease-swap), box-shadow .4s var(--ease-swap); }
.ai-ij-lines li[data-flag].flag { background: #fdf3e1; box-shadow: inset 0 0 0 1px #94620066; color: #5c3d00; }
.ai-ij-lines li[data-flag]::after { content: "Check closely"; position: absolute; right: 8px; top: -11px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; color: #946200; background: #fff; box-shadow: inset 0 0 0 1px #94620066; opacity: 0; transform: translateY(4px); transition: opacity var(--dur-enter) var(--ease-spring), transform var(--dur-enter) var(--ease-spring); }
.ai-ij-lines li[data-flag].flag::after { opacity: 1; transform: none; }
.ai-ij-head { position: absolute; left: 10px; top: 0; --ai-mark-size: 24px; display: block; width: 24px; height: 24px; transition: transform .2s var(--ease-swap), opacity var(--dur-enter); }
.ai-ij-head.off { opacity: 0; }
.ai-ij-card { border-radius: 14px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 30px 80px #0000004d; overflow: hidden; font-size: 13px; }
:root[data-theme="light"] .ai-ij-card { background: #fff; box-shadow: inset 0 0 0 1px #00000014, 0 20px 60px #00000014; }
.ai-ij-h { height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); }
.ai-ij-h b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-ij-proc { padding: 12px 16px 0; display: flex; align-items: center; gap: 10px; color: var(--fg-3); font-size: 12.5px; }
.ai-ij-proc .r { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; --ai-mark-h: 12px; transition: opacity var(--dur-enter); }
.ai-ij.done .ai-ij-proc .r { opacity: 0; }
.ai-ij-sugg { padding: 14px 16px 0; opacity: .0; filter: blur(4px); transform: translateY(6px); transition: opacity var(--dur-reveal) var(--ease-spring), filter var(--dur-reveal) var(--ease-spring), transform var(--dur-reveal) var(--ease-spring); }
.ai-ij.done .ai-ij-sugg { opacity: 1; filter: none; transform: none; }
.ai-ij-lbl { margin-bottom: 8px; }
.ai-ij-doc { font-size: 14px; line-height: 1.75; }
.ai-ij-doc b { font-weight: 600; }
.ai-ij-flag { margin: 12px 16px 0; padding: 10px 12px; border-radius: 10px; display: flex; gap: 10px; background: var(--amber-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent); opacity: 0; transform: translateY(6px); transition: opacity var(--dur-reveal) var(--ease-spring), transform var(--dur-reveal) var(--ease-spring); }
.ai-ij.flagged .ai-ij-flag { opacity: 1; transform: none; }
.ai-ij-flag svg { width: 15px; height: 15px; color: var(--amber); flex: none; margin-top: 2px; }
.ai-ij-flag b { display: block; font-weight: 500; color: var(--amber); }
.ai-ij-flag span { color: var(--fg-2); font-size: 12.5px; }
.ai-ij-f { margin-top: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line-2); color: var(--fg-3); font-size: 12.5px; }
.ai-ij-f .r { margin-left: auto; display: flex; gap: 6px; }
@media (max-width: 900px) { .ai-ij { grid-template-columns: minmax(0, 1fr); } .ai-ij-page { padding-left: 46px; } .ai-ij-page .src-excerpt-h { margin-left: -46px; } .ai-ij-lines { font-size: 14px; } .ai-ij-lines li[data-flag]::after { right: 4px; top: -12px; } }

/* Review at list speed: Accept is a real button; the copper underline draws away when it is pressed */
.ai-rv-acc { margin-top: 16px; display: flex; gap: 6px; align-items: center; }
.ai-rv-acc .ap-btn { pointer-events: none; }
.ai-rv-acc .ai-rv-go { pointer-events: auto; border: 0; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.ai-rv-acc .ai-rv-go:disabled { opacity: .45; cursor: default; }
.ai-rv-acc .ai-rv-go:focus-visible { outline: 2px solid var(--fg-2); outline-offset: 2px; }
.ai-rv-hint { margin-left: auto; font-size: 12px; color: var(--fg-4); }

/* ================= Linear round: D9 partial answer with a copper trace (Read, cited, then decided) ================= */
.ai-pa { margin: 64px 0 0; }
.ai-pa-win { position: relative; max-width: 920px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--fg-1) 3%, transparent), transparent 40%), var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ai-pa-bar { height: 48px; padding: 0 22px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--fg-3); }
.ai-pa-crumb { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.ai-pa-crumb i { font-style: normal; color: var(--fg-4); }
.ai-pa-crumb b { color: var(--fg-1); font-weight: 500; }
.ai-pa-bar .r { margin-left: auto; }
.ai-pa-body { padding: 28px 28px 22px; }
.ai-pa-q { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; color: var(--fg-1); max-width: 560px; }
.ai-pa-trace { margin-top: 22px; display: flex; align-items: center; gap: 8px; font-size: 13px; --ai-mark-h: 13px; }
.ai-pa-trace svg { width: 8px; height: 8px; fill: none; stroke: var(--cu); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
/* the thinking shimmer, in copper: a lighter band crosses the words, then rests for the last quarter */
.ai-pa-sh { color: var(--cu); background: linear-gradient(90deg, var(--cu) 0 40%, color-mix(in srgb, var(--cu) 35%, var(--fg-1)) 50%, var(--cu) 60% 100%) no-repeat; background-size: 250% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ai-pa-sh 2400ms linear infinite; }
@keyframes ai-pa-sh { 0% { background-position: 100% 0; } 75%, 100% { background-position: 0% 0; } }
/* the answer is cut: the capability shows, the content is withheld */
.ai-pa-ans { margin-top: 12px; -webkit-mask-image: linear-gradient(#000 40%, transparent 85%); mask-image: linear-gradient(#000 40%, transparent 85%); }
.ai-pa-ans .doc-page { padding: 16px 18px 28px; font-size: 15px; line-height: 1.75; }
.ai-pa-ans .ap-ev { vertical-align: 1px; }
.ai-pa-l { opacity: 0; filter: blur(2px); transform: translateY(8px); transition: opacity 300ms var(--ease-spring), filter 300ms var(--ease-spring), transform 300ms var(--ease-spring); transition-delay: calc(500ms + var(--i) * 140ms); }
.ai-pa-l + .ai-pa-l { margin-top: 4px; }
.ai-pa.seen .ai-pa-l { opacity: 1; filter: none; transform: none; }
.ai-pa-who { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; font-size: 13px; }
.ai-pa-who > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.35; }
.ai-pa-who b { font-weight: 500; color: var(--fg-1); }
.ai-pa-who small { color: var(--fg-3); font-size: 12px; }
.ai-pa-who .r { margin-left: auto; display: flex; gap: 8px; }
.ai-pa-cap { margin-top: 24px; max-width: 560px; }
.ai-pa-cap h3 { font-size: 15px; font-weight: 500; color: var(--fg-1); }
.ai-pa-cap p { margin-top: 4px; color: var(--fg-3); font-size: 15px; line-height: 1.55; }
@media (max-width: 640px) {
  .ai-pa { margin-top: 40px; }
  .ai-pa-bar { padding: 0 16px; }
  .ai-pa-body { padding: 20px 16px 16px; }
  .ai-pa-q { font-size: 14px; padding: 10px 12px; }
  .ai-pa-ans .doc-page { padding: 14px 14px 24px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ai-pa-sh { animation: none; background-position: 0 0; } .ai-pa-l { opacity: 1; filter: none; transform: none; transition: none; } }